new design for page /my-virtual-machines

hosting/static/hosting/css/commons.css

@@ -162,29 +162,75 @@
 
 /* ========= */
 @media(min-width: 320px) {
-   .modal:before {
-     content: '';
-     display: inline-block;
-     height: 100%;
-     vertical-align: middle;
-     margin-right: -4px;
-   }
- }
+  .modal:before {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+    margin-right: -4px;
+  }
+}
 
 
- @media (min-width: 768px) {
-   .modal-dialog {
+@media (min-width: 768px) {
+  .modal-dialog {
 /*        width: 520px; */
-       margin: 15px auto;
-   }
- }
+      margin: 15px auto;
+  }
+}
 
- .modal {
-   text-align: center;
- }
+.modal {
+  text-align: center;
+}
 
- .modal-dialog {
-   display: inline-block;
-   text-align: left;
-   vertical-align: middle;
- }
+.modal-dialog {
+  display: inline-block;
+  text-align: left;
+  vertical-align: middle;
+}
+
+.un-icon {
+  width: 15px;
+  height: 15px;
+  opacity: 0.5;
+  margin-top: -1px;
+}
+
+.css-plus {
+  position: relative;
+  width: 16px;
+  height: 20px;
+  display: inline-block;
+  vertical-align: middle;
+  /*   top: -1px; */
+}
+
+.css-plus + span {
+  vertical-align: middle;
+}
+
+.css-plus:before {
+  content: '';
+  width: 10px;
+  height: 2px;
+  background: #f6f7f9;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.css-plus:after {
+  content: '';
+  width: 2px;
+  height: 10px;
+  background: #f6f7f9;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}

hosting/static/hosting/css/virtual-machine.css

@@ -227,4 +227,147 @@
     .btn-create-vm {
       float: left !important; 
     }
+}
+
+/* New styles */
+.dashboard-title-thin {
+  font-weight: 300;
+  font-size: 32px;
+}
+
+.dashboard-title-thin .un-icon {
+  height: 34px;
+  margin-right: 5px;
+  margin-top: -1px;
+  width: 20px;
+}
+
+.dashboard-subtitle {
+  font-weight: 300;
+  margin-bottom: 25px;
+}
+
+.btn-vm {
+  background: #1596DA;
+  color: #fff;
+  font-weight: 400;
+  letter-spacing: 0.8px;
+  border-radius: 3px;
+  padding-bottom: 7px;
+  border: 2px solid #1596DA;
+}
+
+.btn-vm:hover, .btn-vm:focus {
+  color: #1596DA;
+  background: #fff;
+}
+.btn-vm:hover .css-plus:after,
+.btn-vm:focus .css-plus:after,
+.btn-vm:hover .css-plus:before,
+.btn-vm:focus .css-plus:before {
+  background: #1596DA;
+}
+.btn-vm-detail {
+  background: #3770CC;
+  color: #fff;
+  font-weight: 400;
+  letter-spacing: 0.6px;
+  font-size: 14px;
+  border-radius: 3px;
+  border: 2px solid #3770CC;
+  padding: 4px 20px;
+  /*   padding-bottom: 7px; */
+}
+
+.btn-vm-detail:hover, .btn-vm-detail:focus {
+  background: #fff;
+  color: #3770CC;
+}
+
+.vm-status, .vm-status-active, .vm-status-failed {
+  font-weight: 600;
+}
+.vm-status-active {
+  color: #4A90E2;
+}
+.vm-status-failed {
+  color: #eb4d5c;
+}
+
+@media (min-width:768px) {
+  .dashboard-subtitle {
+    display: flex;
+    justify-content: space-between;
+    font-size: 16px;
+  }
+}
+@media (max-width:767px) {
+  .dashboard-title-thin {
+    font-size: 22px;
+  }
+  .dashboard-title-thin .un-icon {
+    height: 20px;
+    width: 18px;
+    margin-top: -3px;
+  }
+  .dashboard-subtitle p {
+    width: 200px;
+  }
+}
+
+.table-switch {
+  color: #555;
+}
+
+.table-switch > tbody > tr > td {
+  padding: 12px 8px;
+}
+
+@media (min-width: 768px) {
+  .table-switch > tbody > tr > td:nth-child(1) {
+    padding-right: 45px;
+  }
+}
+
+.table-switch .un-icon {
+  margin-left: 5px;
+}
+
+@media (max-width:767px) {
+  .dashboard-subtitle {
+    margin-bottom: 15px;
+  }
+  .table-switch .un-icon {
+    float: right;
+    margin-top: 0;
+  }
+  .table-switch thead {
+    display: none;
+  }
+  .table-switch tbody tr {
+    display: block;
+    position: relative;
+    border-top: 1px solid #ddd;
+    margin-top: 15px;
+    padding-top: 5px;
+  }
+  .table-switch tbody tr td {
+    display: block;
+    padding-top: 28px;
+    padding-bottom: 6px;
+    position: relative;
+    border: 0;
+  }
+  .table-switch td:before {
+    content: attr(data-header);
+    font-weight: 600;
+    position: absolute;
+    top: 5px;
+
+  }
+  .table-switch .last-td {
+    position: absolute;
+    bottom: 5px;
+    right: 0;
+  }
 }