new design for page /my-virtual-machines
This commit is contained in:
Arvind Tiwari
parent
3b1cd200d6
commit
e92e3a9527
5 changed files with 294 additions and 23 deletions
|
|
@ -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%);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
7
hosting/static/hosting/img/copy.svg
Normal file
7
hosting/static/hosting/img/copy.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
|
||||
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
|
||||
<g><path d="M691,160.8V10H269.5C206.3,72.6,143.1,135.2,80,197.8v641.4h227.9V990H920V160.8H691z M269.5,64.4v134.4H133.1C178.5,154,224,109.2,269.5,64.4z M307.9,801.2H117.5V236.8h190.5V47.9h344.5v112.9h-154c-63.5,62.9-127,125.9-190.5,188.8V801.2z M499.5,215.2v134.5H363.1v-1c45.1-44.5,90.2-89,135.3-133.5L499.5,215.2z M881.5,952h-535V386.6H538V198.8h343.5V952z"/></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 846 B |
7
hosting/static/hosting/img/vm.svg
Normal file
7
hosting/static/hosting/img/vm.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
|
||||
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
|
||||
<g><path d="M724.6,224.4c0,28.2,22.9,51,51,51s51-22.9,51-51c0-28.2-22.9-51-51-51S724.6,196.2,724.6,224.4z M724.6,551c0,28.2,22.9,51,51,51s51-22.9,51-51c0-28.2-22.9-51-51-51S724.6,522.9,724.6,551L724.6,551z M10,683.7c0,45.1,36.5,81.7,81.7,81.7h347.1v56.4c-10,6.7-18.6,15.3-25.3,25.3l-250.3,0c-28.2,0-51,22.9-51,51s22.9,51,51,51h250.3c16.5,24.7,44.5,40.8,76.4,40.8c31.8,0,59.8-16.1,76.4-40.8h270.7c28.2,0,51-22.9,51-51s-22.9-51-51-51H566.2c-6.7-10-15.3-18.6-25.3-25.3v-56.3h367.5c45.1,0,81.7-36.5,81.7-81.7V91.7c0-45.1-36.5-81.7-81.7-81.7H91.7C46.5,10,10,46.5,10,91.7L10,683.7L10,683.7z M157,112.1h686c24.9,0,44.9,20,44.9,44.9v134.7c0,24.9-20,44.9-44.9,44.9H157c-24.9,0-44.9-20-44.9-44.9V157C112.1,132.1,132.1,112.1,157,112.1L157,112.1L157,112.1z M157,438.7h686c24.9,0,44.9,20,44.9,44.9v134.7c0,24.9-20,44.9-44.9,44.9H157c-24.9,0-44.9-20-44.9-44.9V483.7C112.1,458.8,132.1,438.7,157,438.7L157,438.7L157,438.7z"/></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Loading…
Add table
Add a link
Reference in a new issue