9fcbbe39bd
A port link between router and extra network was not displayed with demo account. This commit fixed the bug. Also remove dead link when port has no link. fixes bug 1131082 Change-Id: I50c469e55e0b8435b95f03b191a04e27017fc37e
2077 lines
39 KiB
Plaintext
2077 lines
39 KiB
Plaintext
@import "../../bootstrap/less/bootstrap.less";
|
|
|
|
/* new clearfix */
|
|
.clearfix:after {
|
|
visibility: hidden;
|
|
display: block;
|
|
font-size: 0;
|
|
content: " ";
|
|
clear: both;
|
|
height: 0;
|
|
}
|
|
* html .clearfix { zoom: 1; } /* IE6 */
|
|
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
|
|
|
|
@font-face {
|
|
font-family: 'anivers';
|
|
src: url('/static/dashboard/fonts/Anivers_Regular-webfont.eot');
|
|
src: url('/static/dashboard/fonts/Anivers_Regular-webfont.eot?iefix') format('eot'),
|
|
url('/static/dashboard/fonts/Anivers_Regular-webfont.woff') format('woff'),
|
|
url('/static/dashboard/fonts/Anivers_Regular-webfont.ttf') format('truetype'),
|
|
url('/static/dashboard/fonts/Anivers_Regular-webfont.svg#webfont3JLVF59W') format('svg');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
a {
|
|
color: #43a1d6;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
}
|
|
|
|
dt {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#main_content {
|
|
padding-left: 250px;
|
|
padding-right: 25px;
|
|
}
|
|
|
|
.topbar {
|
|
background: #f2f2f2;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
padding: 10px 25px;
|
|
margin-top: 0;
|
|
margin-left: -25px;
|
|
margin-bottom: 20px;
|
|
margin-right: -25px;
|
|
min-width: 700px;
|
|
}
|
|
|
|
.topbar .switcher_bar {
|
|
display: inline-block;
|
|
height: auto;
|
|
width: 160px;
|
|
background-position: 140px center;
|
|
margin-bottom: 0;
|
|
font-size: 11px;
|
|
margin-left: 20px;
|
|
padding: 0;
|
|
background-image: url(/static/dashboard/img/drop_arrow.png);
|
|
border: 1px solid #c0d9e4;
|
|
background-color: #e9f5fa;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.topbar .switcher_bar a {
|
|
padding: 2px 10px 1px;
|
|
margin-left: 0;
|
|
display: block;
|
|
}
|
|
|
|
.topbar .switcher_bar ul {
|
|
width: 130px;
|
|
}
|
|
|
|
#user_info {
|
|
color: #888;
|
|
margin: auto 0;
|
|
}
|
|
|
|
#user_info > a {
|
|
margin-left: 25px;
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
.page-header {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
font-family: anivers;
|
|
}
|
|
|
|
h2 {
|
|
color: #6a6a6a;
|
|
font-size: 30px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
body {
|
|
background-color: #fff;
|
|
min-width: 890px;
|
|
}
|
|
|
|
/* Login Splash Page */
|
|
|
|
#splash {
|
|
background: #fafafa;
|
|
}
|
|
|
|
#splash .login {
|
|
background: #fff url(/static/dashboard/img/logo-splash.png) no-repeat center 35px;
|
|
position: absolute;
|
|
top: 80px;
|
|
left: 50%;
|
|
margin: 0 0 0 -195px;
|
|
padding-top: 170px;
|
|
width: 390px;
|
|
border: 1px solid #e1e1e1;
|
|
max-height: none;
|
|
-webkit-border-radius: 6px;
|
|
-moz-border-radius: 6px;
|
|
border-radius: 6px;
|
|
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
|
|
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
|
|
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
|
|
-webkit-background-clip: padding-box;
|
|
-moz-background-clip: padding-box;
|
|
background-clip: padding-box;
|
|
|
|
form {
|
|
.error {
|
|
width: 100%;
|
|
}
|
|
input {
|
|
width: 350px;
|
|
}
|
|
select {
|
|
width: 360px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#splash .help-block {
|
|
display: none;
|
|
}
|
|
|
|
#create_container_form .modal-footer{
|
|
margin-top: 190px;
|
|
}
|
|
|
|
.nav li a {
|
|
color: #8EACB7;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.container-fluid {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.sidebar {
|
|
background: #edf9ff;
|
|
border-right: 5px solid #e5e5e5;
|
|
border-bottom: 5px solid #e5e5e5;
|
|
float: left;
|
|
}
|
|
|
|
.sidebar h4 {
|
|
margin-left: 14px;
|
|
color: #999;
|
|
}
|
|
|
|
.sidebar .nav-tabs {
|
|
margin-top: -34px;
|
|
}
|
|
|
|
.sidebar .nav-tabs li.active a {
|
|
background-color: #edf9ff;
|
|
}
|
|
|
|
h1.brand {
|
|
width: 100%;
|
|
margin: 0;
|
|
background-color: #f5f5f5;
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
h1.brand a {
|
|
background: url(/static/dashboard/img/logo.png) top left no-repeat;
|
|
display: block;
|
|
float: left;
|
|
width: 116px;
|
|
height: 123px;
|
|
text-indent: -9999px;
|
|
margin-left: 56px;
|
|
margin-top: 15px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
|
|
/* Tenant Dropdown */
|
|
|
|
|
|
a.current_item {
|
|
width: 163px;
|
|
float: left;
|
|
}
|
|
|
|
a.current_item:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a.current_item:hover h3, a.current_item:hover h4 {
|
|
color: #39738c;
|
|
}
|
|
|
|
.sidebar .switcher_bar {
|
|
width: 190px;
|
|
height: 38px;
|
|
padding: 5px 0;
|
|
margin-left: 14px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.sidebar .switcher_bar a.dropdown-toggle {
|
|
display: block;
|
|
padding: 5px 0;
|
|
background-image: url(/static/dashboard/img/drop_arrow.png);
|
|
border: 1px solid #c0d9e4;
|
|
background-color: #e9f5fa;
|
|
background-repeat: no-repeat;
|
|
background-position: 167px 23px;
|
|
}
|
|
|
|
.sidebar .switcher_bar a.dropdown-toggle:hover {
|
|
text-decoration: none;
|
|
background-color: #cde8f4;
|
|
}
|
|
|
|
.sidebar .switcher_bar:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.sidebar .switcher_bar h3 {
|
|
color: #4790ae;
|
|
font-size: 16px;
|
|
margin: -6px 0 0 14px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
text-overflow:ellipsis;
|
|
white-space: nowrap;
|
|
&:hover {
|
|
white-space: normal;
|
|
overflow: visible;
|
|
text-overflow: none;
|
|
padding-right: 1em;
|
|
word-wrap: break-word;
|
|
}
|
|
}
|
|
|
|
.sidebar .switcher_bar h4 {
|
|
color: #6fabc4;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
font-weight: normal;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
.sidebar .switcher_bar ul {
|
|
border: 1px solid #c0d9e4;
|
|
margin-left: -1px;
|
|
width: 190px;
|
|
}
|
|
|
|
.sidebar .switcher_bar li a:hover{
|
|
background: #92d6f1;
|
|
}
|
|
|
|
|
|
#usage {
|
|
margin-bottom: 25px;
|
|
height: 125px;
|
|
}
|
|
|
|
.usage_block {
|
|
background: #e8f8ff;
|
|
color: #84b6c5;
|
|
border: 1px solid #afe3fb;
|
|
-webkit-border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
border-radius: 5px;
|
|
float: left;
|
|
width: 29%;
|
|
margin-right: 5%;
|
|
min-height: 125px;
|
|
}
|
|
|
|
.usage_block.last {
|
|
margin-right: 0;
|
|
}
|
|
|
|
|
|
.usage_block h3 {
|
|
background: #cef0ff;
|
|
color: #4fa5bf;
|
|
font-weight: normal;
|
|
padding: 0 0 0 10px;
|
|
border-bottom: 1px solid #c6e7f5;
|
|
-webkit-border-top-left-radius: 5px;
|
|
-webkit-border-top-right-radius: 5px;
|
|
-moz-border-radius-topleft: 5px;
|
|
-moz-border-radius-topright: 5px;
|
|
border-top-left-radius: 5px;
|
|
border-top-right-radius: 5px;
|
|
}
|
|
.usage_block ul {
|
|
margin: 10px;
|
|
}
|
|
|
|
.usage_block .quantity { font-size: 25px; }
|
|
|
|
.usage_block li {
|
|
font-size: 11px;
|
|
margin: 0 0 15px 0;
|
|
}
|
|
|
|
.usage_block .unit{
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
padding: 0 0 0 1px;
|
|
}
|
|
|
|
|
|
.table-bordered {
|
|
border: none;
|
|
}
|
|
.table_header {
|
|
min-height: 35px;
|
|
padding: 5px 0;
|
|
}
|
|
.table_caption th {
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
.table-bordered tr.table_caption + tr th {
|
|
border-top: 1px solid #ddd;
|
|
}
|
|
.table-bordered tr.table_caption + tr th:first-child,
|
|
.table-bordered tr.table_caption + tr th.hide + th {
|
|
-moz-border-radius-topleft: 4px;
|
|
-webkit-border-top-left-radius: 4px;
|
|
border-top-left-radius: 4px;
|
|
border-left: 1px solid #ddd;
|
|
}
|
|
.table-bordered tr.table_caption + tr th:last-child {
|
|
-moz-border-radius-topright: 4px;
|
|
-webkit-border-top-right-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
border-right: 1px solid #ddd;
|
|
}
|
|
.table-bordered tbody tr td:first-child,
|
|
.table-bordered tfoot tr td:first-child {
|
|
border-left: 1px solid #ddd;
|
|
}
|
|
.table-bordered tbody tr td:last-child,
|
|
.table-bordered tfoot tr td:last-child {
|
|
border-right: 1px solid #ddd;
|
|
}
|
|
.table-bordered tfoot tr td:first-child {
|
|
border-bottom: 1px solid #ddd;
|
|
-moz-border-radius-bottomleft: 4px;
|
|
-webkit-border-bottom-left-radius: 4px;
|
|
border-bottom-left-radius: 4px;
|
|
}
|
|
.table-bordered tfoot tr td:last-child {
|
|
border-bottom: 1px solid #ddd;
|
|
-moz-border-radius-bottomright: 4px;
|
|
-webkit-border-bottom-right-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
.table_title h3, .table_header h3 {
|
|
font-family: anivers;
|
|
font-weight: normal;
|
|
font-size: 24px;
|
|
margin-bottom: 5px;
|
|
float: left;
|
|
}
|
|
.table th.header {
|
|
cursor: pointer;
|
|
}
|
|
.table th.header:hover {
|
|
background-color: #e8e8e8;
|
|
text-decoration: underline;
|
|
}
|
|
.table tbody td.anchor a {
|
|
display: block;
|
|
padding: 8px;
|
|
}
|
|
.table tr.table_caption th.header:hover {
|
|
background-color: transparent;
|
|
cursor: default;
|
|
}
|
|
.table th.headerSortUp:hover,
|
|
.table th.headerSortDown:hover {
|
|
background-color: #dfdfdf;
|
|
}
|
|
.table th.headerSortUp,
|
|
.table th.headerSortDown {
|
|
background-color: #dfdfdf;
|
|
background-repeat: no-repeat;
|
|
background-position: 98% center;
|
|
}
|
|
.table th.headerSortDown {
|
|
background-image: url(/static/dashboard/img/drop_arrow.png);
|
|
}
|
|
.table th.headerSortUp {
|
|
background-image: url(/static/dashboard/img/up_arrow.png);
|
|
}
|
|
.table tr.summation td:first-child,
|
|
.table tr.summation td:last-child {
|
|
border-radius: 0;
|
|
border-bottom: 0 none;
|
|
}
|
|
|
|
th {
|
|
background: #f1f1f1;
|
|
}
|
|
td.anchor {
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
small {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.main_nav {
|
|
list-style: none;
|
|
width: 222px;
|
|
margin: 10px 0 20px 0;
|
|
}
|
|
|
|
.main_nav a {
|
|
color: #999;
|
|
width: 185px;
|
|
padding: 10px;
|
|
display: block;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.main_nav a.active {
|
|
background: #fff;
|
|
border: 2px solid #d8d8d8;
|
|
border-right: 0;
|
|
border-bottom-color: #ccc;
|
|
}
|
|
|
|
table form {
|
|
margin-bottom: 0;
|
|
width: 1px;
|
|
}
|
|
|
|
.messages {
|
|
position: fixed;
|
|
z-index: 9999;
|
|
top: 20px;
|
|
right: 20px;
|
|
width: 300px;
|
|
.alert-block {
|
|
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
|
|
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
|
|
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
|
|
&.alert-error {
|
|
border: 1px solid @red;
|
|
}
|
|
&.alert-success {
|
|
border: 1px solid @green;
|
|
}
|
|
}
|
|
}
|
|
|
|
.alert-block .alert-actions {
|
|
margin-top: -23px;
|
|
margin-right: -23px;
|
|
}
|
|
|
|
.modal > form,
|
|
.login > form,
|
|
.alert-actions > form {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.alert-block p {
|
|
overflow: hidden;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.alert-block p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#actions.single {
|
|
width: 90px;
|
|
}
|
|
|
|
.table-striped tr td {
|
|
transition: background 0.2s;
|
|
-webkit-transition: background 0.2s;
|
|
-moz-transition: background 0.2s;
|
|
-o-transition: background 0.2s;
|
|
}
|
|
|
|
.inspect {
|
|
float: left;
|
|
display: block;
|
|
margin-top: 5px;
|
|
margin-right: 25px;
|
|
}
|
|
|
|
.table {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.table tr td {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.table tr.empty td {
|
|
text-align: center;
|
|
}
|
|
|
|
.table tfoot tr td {
|
|
border-top: 1px solid #DDD;
|
|
background-color: #F1F1F1;
|
|
font-size: 11px;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.table_actions {
|
|
float: right;
|
|
min-width: 400px;
|
|
}
|
|
|
|
.table_actions .table_search, .table_actions .table_filter {
|
|
display: inline-block;
|
|
}
|
|
|
|
.table_search input {
|
|
background: url(/static/dashboard/img/search.png) no-repeat 195px 5px;
|
|
display: inline-block;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.table_actions a, .table_actions button {
|
|
float: right;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.table_actions button.filter {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.table_actions {
|
|
.btn-icon(@x, @y, @icons: "/static/bootstrap/img/glyphicons-halflings.png") {
|
|
padding-left: 23px;
|
|
position: relative;
|
|
|
|
&:before {
|
|
display: inline-block;
|
|
content: "";
|
|
width: 18px;
|
|
height: 20px;
|
|
margin-top: 1px;
|
|
*margin-right: .3em;
|
|
line-height: 14px;
|
|
background-image: url(@icons);
|
|
background-position: @x @y;
|
|
background-repeat: no-repeat;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
}
|
|
|
|
.btn-icon-danger(@x, @y) {
|
|
.btn-icon(@x, @y, "/static/bootstrap/img/glyphicons-halflings-white.png");
|
|
}
|
|
|
|
a.btn-create, a.btn-launch {
|
|
.btn-icon(-403px, -92px);
|
|
}
|
|
|
|
a.btn-download {
|
|
.btn-icon(-91px, -19px);
|
|
}
|
|
|
|
a.btn-upload {
|
|
.btn-icon(-283px, -92px);
|
|
}
|
|
|
|
button.btn-delete, button.btn-terminate {
|
|
.btn-icon-danger(-451px, 5px);
|
|
}
|
|
|
|
}
|
|
|
|
.table_header .table_actions {
|
|
min-width: 0;
|
|
}
|
|
|
|
.table_header .table_actions a, .table_header .table_actions > button,
|
|
.table_header .table_actions .table_search button {
|
|
display: inline-block;
|
|
float: none;
|
|
}
|
|
|
|
.table_header .table_filter {
|
|
vertical-align: bottom;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.table_header .table_filter i {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.table_actions form {
|
|
float: right;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/*
|
|
* Bootstrap styles table backgrounds using nth-child(2n+1), which is
|
|
* oblivious to hidden elements. The styles below allow us to override
|
|
* the bootstrap style when neccessary by setting the odd/even classes.
|
|
*/
|
|
.table-striped.datatable tbody {
|
|
tr.odd td {
|
|
background-color: #f9f9f9;
|
|
}
|
|
tr.even td {
|
|
background-color: inherit;
|
|
}
|
|
tr.odd:hover td,
|
|
tr.even:hover td,
|
|
tr:hover th {
|
|
background-color: #f5f5f5;
|
|
}
|
|
}
|
|
|
|
.table-striped tbody tr.status_unknown:nth-child(odd) td {
|
|
background-color: #ffffb5;
|
|
}
|
|
|
|
.table-striped tbody tr.status_unknown:nth-child(even) td {
|
|
background-color: #ffffc6;
|
|
}
|
|
|
|
.nowrap-col {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.overview {
|
|
font-size: 24px;
|
|
}
|
|
|
|
#monitoring {
|
|
background: #f8f8f8;
|
|
font-size: 14px;
|
|
height: 20px;
|
|
margin: -18px 0 25px;
|
|
padding: 10px;
|
|
border: 1px solid #e1e1e1;
|
|
font-family: "anivers";
|
|
}
|
|
|
|
#monitoring h3 {
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
float: left;
|
|
line-height: 18px;
|
|
}
|
|
|
|
#external_links, #external_links li {
|
|
float: left;
|
|
}
|
|
#external_links li { margin: 0 0 0 15px; }
|
|
|
|
/* Forms */
|
|
|
|
form label {
|
|
text-align: left;
|
|
color: #555;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.modal {
|
|
width: 700px;
|
|
max-height: none; /* Prevents large modals from scrolling unnecessarily */
|
|
top: 80px;
|
|
margin-top: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.modal.loading {
|
|
width: 150px;
|
|
height: 150px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modal.loading p {
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 150px;
|
|
}
|
|
|
|
form.horizontal .form-field {
|
|
float: left;
|
|
}
|
|
|
|
form.horizontal.split_half .form-field {
|
|
width: 334px; /* Fits 2 fields to a row */
|
|
}
|
|
|
|
form.horizontal.split_quarter .form-field {
|
|
width: 167px; /* Fits 4 fields to a row */
|
|
}
|
|
|
|
form.horizontal.split_five .form-field {
|
|
width: 133px; /* Fits 5 fields to a row */
|
|
}
|
|
|
|
form.horizontal fieldset {
|
|
width: 100%;
|
|
}
|
|
|
|
.modal-body {
|
|
overflow-y: visible;
|
|
max-height: none;
|
|
}
|
|
|
|
.modal-body table {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.modal-body ~ hr {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.static_page {
|
|
float: left;
|
|
width: 700px;
|
|
background-color: #FFF;
|
|
border: 1px solid #DDD;
|
|
}
|
|
.static_page > form {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.left {
|
|
float: left;
|
|
width: 347px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.left form {
|
|
margin: 0;
|
|
}
|
|
|
|
.right {
|
|
float: left;
|
|
width: 308px;
|
|
}
|
|
|
|
.workflow ul.nav-tabs {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.workflow td.actions {
|
|
vertical-align: top;
|
|
width: 308px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.workflow td.help_text {
|
|
vertical-align: top;
|
|
width: 340px;
|
|
padding-left: 10px;
|
|
border-left: 1px solid #DDD;
|
|
}
|
|
|
|
.workflow fieldset > table {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.clear {
|
|
clear: both;
|
|
width: 0;
|
|
height: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.modal-body fieldset {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.modal-body fieldset ul {
|
|
width: 90%;
|
|
}
|
|
|
|
.modal-body fieldset .form-field input,
|
|
.modal-body fieldset .form-field textarea {
|
|
width: 298px;
|
|
}
|
|
.modal-body fieldset .form-field select {
|
|
width: 308px;
|
|
}
|
|
.modal-body fieldset .form-field textarea {
|
|
height: @baseLineHeight * 2;
|
|
}
|
|
|
|
.modal-footer input {
|
|
width: auto;
|
|
}
|
|
|
|
.modal-body .modal-footer {
|
|
width: 670px;
|
|
margin-left: -25px;
|
|
margin-right: -15px;
|
|
}
|
|
|
|
.modal-footer a.close {
|
|
margin-top: 0;
|
|
margin-right: 5px;
|
|
font-size: 12px;
|
|
color: #666;
|
|
font-weight: normal;
|
|
filter: alpha(opacity=100);
|
|
-khtml-opacity: 1;
|
|
-moz-opacity: 1;
|
|
opacity: 1;
|
|
}
|
|
|
|
.modal-footer a.close:hover {
|
|
color: #333;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.modal-body .help-block {
|
|
text-align: left;
|
|
float: left;
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#create_keypair_modal .clearfix {
|
|
margin-bottom: 115px;
|
|
}
|
|
|
|
#actions {
|
|
width: 90px;
|
|
}
|
|
#actions .btn {
|
|
margin-bottom: 5px;
|
|
}
|
|
#actions a.btn {
|
|
width: 70px;
|
|
}
|
|
|
|
#actions input.btn {
|
|
text-align: left;
|
|
}
|
|
|
|
#images #actions {
|
|
width: 100px;
|
|
}
|
|
|
|
/*New List Patches*/
|
|
.details-modal .modal-body {
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.form-inline {
|
|
display: inline;
|
|
input, button, a.btn {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
td.select {
|
|
width: 10px;
|
|
}
|
|
|
|
/* Actions dropdown */
|
|
|
|
td.actions_column {
|
|
white-space: nowrap;
|
|
padding: 10px;
|
|
position: relative;
|
|
width: 200px;
|
|
}
|
|
|
|
td.actions_column .btn-group {
|
|
display: inline-block;
|
|
}
|
|
|
|
td.actions_column .row_actions a,
|
|
td.actions_column .row_actions input,
|
|
td.actions_column .row_actions button {
|
|
background: none;
|
|
float: none;
|
|
display: block;
|
|
padding: 5px 10px;
|
|
color: black;
|
|
text-align: left;
|
|
border-radius: 0;
|
|
border: 0 none;
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
td.actions_column .row_actions .hide {
|
|
display: none;
|
|
}
|
|
|
|
td.actions_column .btn-action-required {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Makes size consistent across browsers when mixing "btn-group" and "small" */
|
|
.btn.hide, .btn-group .hide {
|
|
display: none;
|
|
}
|
|
.btn-group .dropdown-toggle:focus {
|
|
outline: none;
|
|
}
|
|
.dropdown-menu button {
|
|
line-height: 18px; /* Matches rule for ".dropdown-menu a" in bootstrap */
|
|
width: 100%;
|
|
}
|
|
.btn-group .dropdown-menu .btn {
|
|
border-radius: 0;
|
|
}
|
|
.dropdown-menu .btn.btn-danger,
|
|
.dropdown-menu .btn.btn-danger:hover,
|
|
.dropdown-menu .btn.btn-success,
|
|
.dropdown-menu .btn.btn-success:hover,
|
|
.dropdown-menu .btn.btn-info,
|
|
.dropdown-menu .btn.btn-info:hover {
|
|
text-shadow: none; /* remove default bootstrap shadowing from button text. */
|
|
}
|
|
.dropdown-menu li:hover {
|
|
background: none;
|
|
}
|
|
.dropdown-menu li.divider:hover {
|
|
background-color: #E5E5E5;
|
|
}
|
|
|
|
td.actions_column .dropdown-menu a:hover,
|
|
td.actions_column .dropdown-menu button:hover {
|
|
background-color: #CDCDCD;
|
|
}
|
|
.dropdown-menu .btn.btn-danger {
|
|
color: #C43C35;
|
|
}
|
|
.dropdown-menu .btn.btn-danger:hover {
|
|
background-color: #f6e0df;
|
|
}
|
|
|
|
|
|
/* Overrides for single-action rows (no dropdown) */
|
|
|
|
tr td.actions_column ul.row_actions.single,
|
|
tr:hover td.actions_column ul.row_actions.single,
|
|
td.actions_column ul.row_actions.single,
|
|
td.actions_column ul.row_actions.single:hover {
|
|
border: none;
|
|
}
|
|
|
|
td.actions_column ul.row_actions.single li.action {
|
|
display: block;
|
|
}
|
|
|
|
td.actions_column ul.row_actions.single li.action:hover {
|
|
background-color: transparent;
|
|
}
|
|
|
|
td.actions_column ul.row_actions.single a,
|
|
td.actions_column ul.row_actions.single input,
|
|
td.actions_column ul.row_actions.single button {
|
|
color: #43a1d6;
|
|
}
|
|
|
|
td.actions_column ul.row_actions.single a:hover,
|
|
td.actions_column ul.row_actions.single input:hover,
|
|
td.actions_column ul.row_actions.single button:hover {
|
|
color: black;
|
|
}
|
|
|
|
th.multi_select_column, td.multi_select_column {
|
|
width: 25px;
|
|
}
|
|
|
|
th.multi_select_column, td.multi_select_column {
|
|
text-align: center;
|
|
}
|
|
|
|
.table-fixed {
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.table input[type="checkbox"] {
|
|
display: inline;
|
|
}
|
|
|
|
div.input input[type="checkbox"] {
|
|
float: left;
|
|
width: 25px;
|
|
}
|
|
|
|
.table_title a {
|
|
font-size: 11px;
|
|
float: right;
|
|
margin-left: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
tr.terminated {
|
|
color: #999999;
|
|
}
|
|
|
|
#instance_tabs {
|
|
float: left;
|
|
width: 100%;
|
|
border-bottom: 1px solid #e1e1e1;
|
|
}
|
|
|
|
#instance_tabs li a {
|
|
background: #f2f2f2;
|
|
display: block;
|
|
font-size: 14px;
|
|
float: left;
|
|
padding: 5px 10px;
|
|
margin-right: 10px;
|
|
border: 1px solid #e1e1e1;
|
|
border-bottom: none;
|
|
}
|
|
|
|
#instance_tabs li.active a {
|
|
background: #fff;
|
|
padding-bottom: 8px;
|
|
margin-bottom: -5px;
|
|
}
|
|
|
|
#main_content .nav-tabs {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#main_content .tab-content {
|
|
border: 1px solid #ddd;
|
|
border-top: 0 none;
|
|
padding: 10px;
|
|
}
|
|
|
|
#main_content .workflow .modal-body {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
#main_content .workflow .modal-body .tab-content {
|
|
border-left: 0 none;
|
|
border-right: 0 none;
|
|
border-bottom: 0 none;
|
|
}
|
|
|
|
.tab_wrapper {
|
|
padding-top: 50px;
|
|
}
|
|
|
|
/* Fix tooltip z-index to show above modals. Bootstrap bug 582*/
|
|
.tooltip {
|
|
z-index: 12000;
|
|
}
|
|
|
|
.volume_boot_disclosure {
|
|
font-weight: bold;
|
|
color: #555;
|
|
cursor: pointer;
|
|
background-image: url(/static/dashboard/img/right_droparrow.png);
|
|
background-repeat: no-repeat;
|
|
background-position: 130px center;
|
|
}
|
|
|
|
.volume_boot_disclosure.on {
|
|
width: 334px;
|
|
margin-bottom: 10px;
|
|
border-bottom: solid 1px #E1E1E1;
|
|
background-image: url(/static/dashboard/img/drop_arrow.png);
|
|
}
|
|
|
|
form div.clearfix.error {
|
|
width: 308px;
|
|
}
|
|
|
|
.nav-tabs a {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-tabs li.error a {
|
|
color: #B94A48;
|
|
}
|
|
|
|
.nav-tabs li.error a:after {
|
|
content: "*";
|
|
}
|
|
|
|
/* Region selector in header */
|
|
|
|
#region_selector {
|
|
position: absolute;
|
|
z-index: 9999;
|
|
right: 0;
|
|
top: 24px;
|
|
}
|
|
|
|
#region_selector a { margin-left: 0; }
|
|
|
|
#region_selector ul{
|
|
float: left;
|
|
margin-left: 5px;
|
|
padding-right: 21px;
|
|
width: 125px;
|
|
}
|
|
#region_selector ul:hover a { display: block; }
|
|
|
|
#region_selector li a{
|
|
padding: 3px 3px 3px 5px;
|
|
display: none;
|
|
background: #E1E1E1;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
#region_selector li:first-child p{
|
|
background: #EDEDED url(/static/dashboard/img/drop_arrow.png) no-repeat 106px 9px !important;
|
|
display: block;
|
|
border: 1px solid #e1e1e1;
|
|
padding: 5px;
|
|
}
|
|
|
|
iframe {
|
|
border: none;
|
|
}
|
|
|
|
.item_detail ul li label {
|
|
color: #000;
|
|
font-weight: bold;
|
|
display: block;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.progress_bar {
|
|
height: 100%;
|
|
width: 100%;
|
|
border: 1px solid #CCC;
|
|
background-color: #CCC;
|
|
}
|
|
|
|
.progress_bar_fill,
|
|
.progress_bar_selected {
|
|
height: 100%;
|
|
float: left;
|
|
}
|
|
|
|
.progress_bar_fill {
|
|
background-color: #666;
|
|
}
|
|
|
|
.progress_bar_selected {
|
|
background-color: #4790AE;
|
|
width: 0;
|
|
}
|
|
|
|
.progress_bar_over {
|
|
background-color: red;
|
|
}
|
|
|
|
.quota_title {
|
|
color: #999;
|
|
padding-bottom: 0;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.quota_title strong {
|
|
color: #000;
|
|
}
|
|
|
|
.quota_title strong span {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.quota_title p {
|
|
float: right;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.quota_bar {
|
|
height: 15px;
|
|
margin: -8px 0 8px;
|
|
}
|
|
|
|
div .flavor_table {
|
|
border: 1px solid #AAA;
|
|
width: 100%;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.flavor_table .flavor_name {
|
|
white-space: nowrap;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
padding: 7px 12px 7px 7px;
|
|
width: 160px;
|
|
}
|
|
|
|
#main_content .row-fluid {
|
|
margin: 10px 0 20px;
|
|
}
|
|
|
|
#main_content .row-fluid:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.header_rule {
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
.item_detail .detail_section {
|
|
margin-bottom: 25px;
|
|
float: left;
|
|
margin-right: 50px;
|
|
}
|
|
|
|
.error .help-inline, .dynamic-error {
|
|
background: #efdfdf;
|
|
border: 1px solid #ead5d8;
|
|
padding: 10px;
|
|
display: block;
|
|
}
|
|
.dynamic-error {
|
|
color: #b94a48;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
label.log-length {
|
|
line-height: 28px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
|
|
.progress-success.bar {
|
|
background-color: #5eb95e;
|
|
background-image: -moz-linear-gradient(top, #62c462, #57a957);
|
|
background-image: -ms-linear-gradient(top, #62c462, #57a957);
|
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
|
|
background-image: -webkit-linear-gradient(top, #62c462, #57a957);
|
|
background-image: -o-linear-gradient(top, #62c462, #57a957);
|
|
background-image: linear-gradient(top, #62c462, #57a957);
|
|
background-repeat: repeat-x;
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
|
|
}
|
|
|
|
.progress_bar_fill.progress-warning.bar {
|
|
background-color: #898989;
|
|
background-image: -moz-linear-gradient(top, #999999, #333333);
|
|
background-image: -ms-linear-gradient(top, #999999, #333333);
|
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#999999), to(#333333));
|
|
background-image: -webkit-linear-gradient(top, #999999, #333333);
|
|
background-image: -o-linear-gradient(top, #999999, #333333);
|
|
background-image: linear-gradient(top, #999999, #333333);
|
|
background-repeat: repeat-x;
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#333333', GradientType=0);
|
|
}
|
|
|
|
.progress_bar_over.bar {
|
|
background-color: #dd514c;
|
|
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
|
|
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
|
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
|
|
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
|
|
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
|
|
background-image: linear-gradient(top, #ee5f5b, #c43c35);
|
|
background-repeat: repeat-x;
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
|
|
}
|
|
|
|
.split_five div.control-group input[type="text"],
|
|
.split_five div.control-group select {
|
|
width: 120px;
|
|
}
|
|
|
|
.warning {
|
|
background-color: @errorBackground;
|
|
border-bottom: 1px solid @red;
|
|
padding: 5px 10px;
|
|
.warning-text {
|
|
text-align: center;
|
|
h3, a {
|
|
display: inline-block;
|
|
}
|
|
h3 {
|
|
vertical-align: bottom;
|
|
}
|
|
}
|
|
}
|
|
#admin_warning_detail {
|
|
ul {
|
|
list-style: circle;
|
|
padding-left: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.no_split {
|
|
margin-top: -60px;
|
|
}
|
|
|
|
/* Project Membership UI */
|
|
.project_membership {
|
|
min-height: 200px;
|
|
|
|
/* Buttons */
|
|
.btn-group {
|
|
margin-left:0px;
|
|
padding: 2px 10px 0 0;
|
|
margin-bottom: 0px;
|
|
border: 1px solid #DDD;
|
|
border-bottom: none;
|
|
}
|
|
.btn-group .active {
|
|
float: right;
|
|
}
|
|
a.btn-primary:hover {
|
|
background-color: #04C;
|
|
}
|
|
|
|
/* Header */
|
|
.help_text {
|
|
margin-left: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.users_title {
|
|
color: #555;
|
|
font-weight: bold;
|
|
padding-left: 10px;
|
|
float: left;
|
|
}
|
|
input {
|
|
background: url(/static/dashboard/img/search.png) no-repeat 105px 5px whiteSmoke;
|
|
}
|
|
.fake_table_header {
|
|
background-color: #F1F1F1;
|
|
width: 306px;
|
|
height: 38px;
|
|
padding-top: 15px;
|
|
border: 1px solid #DDD;
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* 'Fake table' body */
|
|
.fake_table {
|
|
margin-left: 5px;
|
|
width: 315px;
|
|
ul.no_results {
|
|
width: 298px;
|
|
}
|
|
ul.btn-group:hover {
|
|
background-color: #DDD;
|
|
}
|
|
}
|
|
.left {
|
|
.fake_table_header {
|
|
width: 318px;
|
|
}
|
|
}
|
|
.right {
|
|
.fake_table_header {
|
|
width: 318px;
|
|
margin-left: -15px;
|
|
}
|
|
.fake_table ul.no_results {
|
|
margin-left: -20px;
|
|
}
|
|
}
|
|
|
|
/* User lists */
|
|
.member {
|
|
padding: 10px;
|
|
text-align: left;
|
|
}
|
|
.project_members {
|
|
margin-left: -20px;
|
|
}
|
|
.project_members ul.btn-group,
|
|
.available_users ul.btn-group {
|
|
width: 308px;
|
|
}
|
|
.dark_stripe {
|
|
background-color: #F9F9F9;
|
|
}
|
|
.light_stripe {
|
|
background-color: white;
|
|
}
|
|
.last_stripe {
|
|
border-bottom: 1px solid #DDD;
|
|
}
|
|
|
|
/* List filtering */
|
|
.filter {
|
|
width: 120px;
|
|
margin: -5px 13px 15px 0px;
|
|
float: right;
|
|
}
|
|
.no_results {
|
|
border: 1px solid #DDD;
|
|
padding: 10px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Role dropdown menus */
|
|
.role_dropdown li {
|
|
cursor: pointer;
|
|
background: none;
|
|
float: none;
|
|
display: block;
|
|
padding: 5px 10px;
|
|
color: black;
|
|
text-align: left;
|
|
border-radius: 0;
|
|
border: 0 none;
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
box-shadow: none;
|
|
z-index: 99999;
|
|
i {
|
|
opacity: 0;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: #CDCDCD;
|
|
}
|
|
&.selected i {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.dropdown-menu.role_dropdown {
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
.nav .role_options {
|
|
float: right;
|
|
padding-right: 5px;
|
|
}
|
|
}
|
|
|
|
/* Inline user creation */
|
|
.add_user_btn {
|
|
display: inline;
|
|
}
|
|
#add_user {
|
|
clear: both;
|
|
}
|
|
.add_user {
|
|
float: right;
|
|
margin-top: 10px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
/* Fixes overflow on dropdowns in modal */
|
|
.dropdown_fix {
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Replaces CPU hungry spin.js with animated gif */
|
|
.loading_gif {
|
|
width: 35px;
|
|
height: 13px;
|
|
padding-top: 2px;
|
|
padding-right: 5px;
|
|
float: left;
|
|
}
|
|
|
|
.action_required_img {
|
|
width: 35px;
|
|
height: 13px;
|
|
padding-top: 2px;
|
|
padding-right: 5px;
|
|
float: left;
|
|
}
|
|
|
|
//ResourceBrowser
|
|
@dataTableBorderWidth: 1px;
|
|
@dataTableBorderColor: #DDD;
|
|
|
|
@actionsColumnPadding: 10px;
|
|
|
|
@smallButtonHeight: 28px;
|
|
@tdHeight: @smallButtonHeight;
|
|
|
|
@tableCellPadding: 8px;
|
|
|
|
@contentTableWidth: 70%;
|
|
@navigationTableWidth: 30%;
|
|
@browserWrapperWidth: 100%;
|
|
|
|
/* ResourceBrowser style */
|
|
#browser_wrapper {
|
|
width: @browserWrapperWidth;
|
|
min-width: 1000px;
|
|
background-color: @grayLighter;
|
|
border: @dataTableBorderWidth solid @dataTableBorderColor;
|
|
.border-radius(4px);
|
|
.tfoot {
|
|
clear: both;
|
|
padding: 8px;
|
|
border-top: 1px solid @dataTableBorderColor;
|
|
background-color: #F1F1F1;
|
|
font-size: 11px;
|
|
line-height: 14px;
|
|
span {
|
|
display: inline-block;
|
|
&.navigation_table_count {
|
|
width: @navigationTableWidth;
|
|
}
|
|
}
|
|
}
|
|
form, table{
|
|
margin-bottom: 0;
|
|
}
|
|
.navigation_wrapper, .content_wrapper{
|
|
position: relative;
|
|
float: left;
|
|
}
|
|
div.navigation_wrapper {
|
|
z-index: 10;
|
|
width: @navigationTableWidth;
|
|
div.table_wrapper,
|
|
thead th.table_header {
|
|
border-right: 0 none;
|
|
border-top-right-radius: 0;
|
|
}
|
|
td {
|
|
&:first-child {
|
|
border-left: 0 none;
|
|
}
|
|
&.breadcrumb_td {
|
|
padding-right: 0px;
|
|
max-width: 200px;
|
|
}
|
|
}
|
|
tr.current_selected td {
|
|
background-color: #E9F5FA;
|
|
}
|
|
tfoot td {
|
|
border-right: 0 none;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
ul.breadcrumb {
|
|
padding-right: 0px;
|
|
border-top-right-radius: 0px;
|
|
border-bottom-right-radius: 0px;
|
|
border-right: none;
|
|
white-space: nowrap;
|
|
}
|
|
tbody td {
|
|
border-right: @dataTableBorderWidth solid @dataTableBorderColor;
|
|
background-color: @white;
|
|
}
|
|
}
|
|
div.content_wrapper {
|
|
width: @contentTableWidth;
|
|
div.table_wrapper,
|
|
thead th.table_header {
|
|
border-left: 0 none;
|
|
border-top-left-radius: 0;
|
|
}
|
|
td{
|
|
border-bottom: @dataTableBorderWidth solid @dataTableBorderColor;
|
|
&:last-child {
|
|
border-right: 0 none;
|
|
}
|
|
&.breadcrumb_td {
|
|
padding-left: 0px;
|
|
}
|
|
}
|
|
tfoot td {
|
|
border-left: 0 none;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
/* FIXME(Ke Wu): for now there are two breadcrumb tr in both table
|
|
* and this one in the content table is hidden. This hack is made to
|
|
* fix the alignment of two table, needs a better solution in the
|
|
* future.
|
|
*/
|
|
ul.breadcrumb {
|
|
padding-left: 0px;
|
|
border-top-left-radius: 0px;
|
|
border-bottom-left-radius: 0px;
|
|
border-left: none;
|
|
li {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
table {
|
|
border-collapse: collapse;
|
|
thead {
|
|
tr th {
|
|
border-bottom: none;
|
|
background-color: @grayLighter;
|
|
}
|
|
}
|
|
tbody {
|
|
tr:last-child td {
|
|
border-bottom: 1px solid #ddd;
|
|
border-radius: 0;
|
|
}
|
|
tr.empty td {
|
|
height: @tdHeight;
|
|
padding: @actionsColumnPadding;
|
|
}
|
|
td.actions_column {
|
|
position: static;
|
|
}
|
|
}
|
|
}
|
|
.breadcrumb{
|
|
padding: 6px;
|
|
margin: 0 0 1px 0;
|
|
}
|
|
}
|
|
|
|
/* Styling for inline object creation buttons */
|
|
.btn-inline {
|
|
margin-bottom: 9px;
|
|
}
|
|
.modal-body fieldset .form-field select[data-add-item-url] {
|
|
width: 275px;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
/* Styling for draged network object */
|
|
#networkListSortContainer {
|
|
display: none;
|
|
}
|
|
.networklist {
|
|
padding: 6px;
|
|
background: #eee;
|
|
border: 1px solid #ccc;
|
|
min-height: 2em;
|
|
width: auto !important;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
li {
|
|
width: 226px;
|
|
list-style-type: none;
|
|
margin: 6px auto;
|
|
padding: 3px;
|
|
background: #fff;
|
|
border: 1px solid #aaa;
|
|
line-height: 18px;
|
|
border-radius: 3px;
|
|
cursor: move;
|
|
padding-left: 23px;
|
|
background: white url(/static/dashboard/img/drag.png) no-repeat 11px 50%;
|
|
em {
|
|
font-size: 0.5em;
|
|
line-height: 1em;
|
|
color:#999;
|
|
font-style: normal;
|
|
margin-left: 0.8em;
|
|
}
|
|
i {
|
|
margin-right: 5px;
|
|
vertical-align: middle;
|
|
}
|
|
a.btn {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
font-size: 11px;
|
|
line-height: 12px;
|
|
padding: 2px 5px 3px;
|
|
margin-right: 1px;
|
|
width: 18px;
|
|
text-align: center;
|
|
//position: absolute;
|
|
right:5px;
|
|
vertical-align: middle;
|
|
float: right;
|
|
&:before {
|
|
content: "+";
|
|
}
|
|
}
|
|
}
|
|
li.ui-sortable-helper {
|
|
background-color: #def;
|
|
}
|
|
li.ui-state-highlight {
|
|
border: 1px dotted #ccc;
|
|
background: #efefef;
|
|
height: 0.5em;
|
|
}
|
|
li:after {
|
|
visibility: hidden;
|
|
display: block;
|
|
font-size: 0;
|
|
content: " ";
|
|
clear: both;
|
|
height: 0;
|
|
}
|
|
}
|
|
#selected_network {
|
|
margin-bottom: 1.5em;
|
|
counter-reset:v1 0;
|
|
background: #edf9ff;
|
|
border:1px solid #c0d9e4;
|
|
li {
|
|
position: relative;
|
|
a.btn {
|
|
&:before {
|
|
content: "-";
|
|
}
|
|
}
|
|
}
|
|
li:before {
|
|
content:"nic:"counter(v1);
|
|
counter-increment:v1;
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
background: #666;
|
|
color:#fff;
|
|
font-size: 90%;
|
|
padding: 0px 4px;
|
|
vertical-align: middle;
|
|
border-radius: 2px;
|
|
position: absolute;
|
|
left: -2em;
|
|
}
|
|
&.dragging {
|
|
li:before {
|
|
content:"nic:";
|
|
background-color:rgba(102,102,102,0.5);
|
|
padding-right: 10px;
|
|
}
|
|
li.ui-state-highlight:before {
|
|
content:"";
|
|
background:transparent;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/* Styling for network topology */
|
|
.box-sizing(@box: border-box) {
|
|
-webkit-box-sizing: @box;
|
|
-moz-box-sizing: @box;
|
|
-ms-box-sizing: @box;
|
|
-o-box-sizing: @box;
|
|
box-sizing: @box;
|
|
}
|
|
|
|
@-webkit-keyframes progress-bar-stripes {
|
|
from {
|
|
background-position: 20px 0;
|
|
}
|
|
to {
|
|
background-position: 0 0;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes progress-bar-stripes {
|
|
from {
|
|
background-position: 20px 0;
|
|
}
|
|
to {
|
|
background-position: 0 0;
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes progress-bar-stripes {
|
|
from {
|
|
background-position: 20px 0;
|
|
}
|
|
to {
|
|
background-position: 0 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes progress-bar-stripes {
|
|
from {
|
|
background-position: 0 0;
|
|
}
|
|
to {
|
|
background-position: 20px 0;
|
|
}
|
|
}
|
|
|
|
@keyframes progress-bar-stripes {
|
|
from {
|
|
background-position: 20px 0;
|
|
}
|
|
to {
|
|
background-position: 0 0;
|
|
}
|
|
}
|
|
|
|
#topologyCanvas {
|
|
.box-sizing();
|
|
width: 100%;
|
|
height: 500px;
|
|
padding: 25px;
|
|
padding-left: 50px;
|
|
background: #efefef;
|
|
div.nodata {
|
|
font-size: 150%;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding-top: 200px;
|
|
display: none;
|
|
}
|
|
}
|
|
div.networks {
|
|
height: 100%;
|
|
}
|
|
div.network {
|
|
.box-sizing();
|
|
float: left;
|
|
width: 270px;
|
|
height: 100%;
|
|
position: relative;
|
|
.nicname {
|
|
.box-sizing();
|
|
height: 100%;
|
|
width: 17px;
|
|
border-radius: 17px;
|
|
z-index: 200;
|
|
color:#fff;
|
|
position: absolute;
|
|
left: -8px;
|
|
top: 0px;
|
|
cursor: pointer;
|
|
&:hover {
|
|
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
|
|
background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
|
|
background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
|
|
background-image: -o-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
|
|
background-size: 10px 10px;
|
|
}
|
|
&.nourl {
|
|
cursor: auto;
|
|
&:hover {
|
|
background-image:none;
|
|
}
|
|
}
|
|
h3 {
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
position: relative;
|
|
font-weight: normal;
|
|
top:55%;
|
|
color:#fff;
|
|
left:-1px;
|
|
letter-spacing: 0.2em;
|
|
-webkit-transform: rotate(-90deg);
|
|
-moz-transform: rotate(-90deg);
|
|
-ms-transform: rotate(-90deg);
|
|
-o-transform: rotate(-90deg);
|
|
transform: rotate(-90deg);
|
|
|
|
white-space: nowrap;
|
|
text-shadow: 0px 0px 5px #000;
|
|
}
|
|
span.ip {
|
|
position: absolute;
|
|
bottom:-10px;
|
|
left:20px;
|
|
color: #000;
|
|
display: block;
|
|
font-weight: normal;
|
|
font-size: 90%;
|
|
letter-spacing: 0.2em;
|
|
-webkit-transform: rotate(-90deg);
|
|
-moz-transform: rotate(-90deg);
|
|
-ms-transform: rotate(-90deg);
|
|
-o-transform: rotate(-90deg);
|
|
transform: rotate(-90deg);
|
|
-webkit-transform-origin: 0% 0%;
|
|
-moz-transform-origin: 0% 0%;
|
|
-ms-transform-origin: 0% 0%;
|
|
-o-transform-origin: 0% 0%;
|
|
transform-origin: 0% 0%;
|
|
white-space: nowrap;
|
|
text-shadow: 0px 0px 2px #fff,0px 0px 2px #fff;
|
|
}
|
|
}
|
|
.router, .server, .device {
|
|
.box-sizing();
|
|
cursor: pointer;
|
|
width: 90px;
|
|
border: 3px solid #444;
|
|
position: absolute;
|
|
top:30px;
|
|
left:90px;
|
|
color:#fff;
|
|
padding: 0 3px;
|
|
background: #666;
|
|
margin-bottom: 20px;
|
|
border-radius: 8px;
|
|
&:before {
|
|
content: "";
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid #444;
|
|
line-height: 1.2;
|
|
position: absolute;
|
|
border-radius: 20px;
|
|
top:-10px;
|
|
left:-10px;
|
|
background:#fff url(/static/dashboard/img/router.png) no-repeat center center;
|
|
background-size: 16px 16px;
|
|
}
|
|
&:after {
|
|
content: "";
|
|
width: 100%;
|
|
line-height: 1.2;
|
|
position: absolute;
|
|
text-align: center;
|
|
border-radius: 0;
|
|
background: #444;
|
|
color: #fff;
|
|
font-size: 11px;
|
|
height: 1.5em;
|
|
bottom:0px;
|
|
left: 0px;
|
|
}
|
|
span.devicename {
|
|
position: absolute;
|
|
color: #fff;
|
|
bottom: 0px;
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
width: 100%;
|
|
text-align: center;
|
|
z-index:300;
|
|
left:-2px;
|
|
}
|
|
span.name {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
display: block;
|
|
font-size : 12px;
|
|
position: relative;
|
|
z-index:10;
|
|
text-align: center;
|
|
top:4px;
|
|
padding: 0 3px;
|
|
}
|
|
div.port {
|
|
text-align: right;
|
|
min-width: 90px;
|
|
height: 10px;
|
|
font:0px/0px sans-serif;
|
|
position: absolute;
|
|
left:-91px;
|
|
top:8px;
|
|
background-color: #37a9e3;
|
|
background-image: none;
|
|
-webkit-background-size: 20px 20px;
|
|
-moz-background-size: 20px 20px;
|
|
-o-background-size: 20px 20px;
|
|
background-size: 20px 20px;
|
|
z-index:100;
|
|
span.ip {
|
|
.box-sizing();
|
|
color: #333;
|
|
font-size: 9px;
|
|
line-height: 1;
|
|
text-shadow: 0px -1px #fff;
|
|
position: relative;
|
|
top:-1em;
|
|
width: 90px;
|
|
display: inline-block;
|
|
padding-right:8px;
|
|
padding-left: 8px;
|
|
word-wrap:break-word;
|
|
word-break:break-all;
|
|
}
|
|
&.right {
|
|
left:auto;
|
|
right:-92px;
|
|
width: 92px;
|
|
text-align: left;
|
|
span.ip {
|
|
}
|
|
}
|
|
}
|
|
&:hover {
|
|
div.port {
|
|
cursor:pointer;
|
|
background-color: #2688c0;
|
|
-webkit-animation: progress-bar-stripes 1s linear infinite;
|
|
-moz-animation: progress-bar-stripes 1s linear infinite;
|
|
-ms-animation: progress-bar-stripes 1s linear infinite;
|
|
-o-animation: progress-bar-stripes 1s linear infinite;
|
|
animation: progress-bar-stripes 1s linear infinite;
|
|
&:hover {
|
|
-webkit-animation: progress-bar-stripes 0.3s linear infinite;
|
|
-moz-animation: progress-bar-stripes 0.3s linear infinite;
|
|
-ms-animation: progress-bar-stripes 0.3s linear infinite;
|
|
-o-animation: progress-bar-stripes 0.3s linear infinite;
|
|
animation: progress-bar-stripes 0.3s linear infinite;
|
|
}
|
|
&.nourl {
|
|
cursor: auto;
|
|
background-image:none;
|
|
&:hover {
|
|
background-image:none;
|
|
}
|
|
}
|
|
}
|
|
border-color: #222;
|
|
&:after {
|
|
background-color: #222;
|
|
border-color: #222;
|
|
}
|
|
}
|
|
}
|
|
.device {
|
|
border:none;
|
|
background: transparent;
|
|
}
|
|
.server {
|
|
&:before {
|
|
background:#fff url(/static/dashboard/img/server.png) no-repeat center center;
|
|
background-size: 14px 14px;
|
|
}
|
|
background: #fff;
|
|
color:#333;
|
|
}
|
|
}
|
|
|
|
.launchButtons {
|
|
text-align: right;
|
|
margin: 10px 0px 15px 10px;
|
|
a.btn {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
|