88b9335910
This feature enables to delete and launch a instance or router on the network topology view. So you can do basic actions on this view. Also it enables to change view small or normal. You can see more networks and devices in the small view. implements bp editable-network-topology-view fixes bug #1215683 Change-Id: Ie65d50d2a99f72696c8f10223f8430ad5f90b144
2052 lines
37 KiB
Plaintext
2052 lines
37 KiB
Plaintext
@import "../../bootstrap/less/bootstrap.less";
|
|
@import "../../bootstrap/less/datepicker.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;
|
|
}
|
|
|
|
.datepicker {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.datepicker input {
|
|
width: 65px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.datepicker .btn {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.tab-content {
|
|
overflow: visible;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.d3_quota_bar {
|
|
width: 20%;
|
|
margin-bottom: 8px;
|
|
margin-top: 10px;
|
|
float: left;
|
|
text-align: center;
|
|
}
|
|
|
|
.quota-dynamic {
|
|
overflow: hidden;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Membership widget UI */
|
|
.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;
|
|
}
|
|
.members_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;
|
|
}
|
|
}
|
|
|
|
/* Member lists */
|
|
.member {
|
|
padding: 10px;
|
|
text-align: left;
|
|
}
|
|
.members {
|
|
margin-left: -20px;
|
|
}
|
|
.members ul.btn-group,
|
|
.available_members 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 member creation */
|
|
.add_member_btn {
|
|
display: inline;
|
|
}
|
|
#add_member {
|
|
clear: both;
|
|
}
|
|
.add_member {
|
|
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;
|
|
.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 {
|
|
.box-sizing(border-box);
|
|
font-size: 11px;
|
|
line-height: 12px;
|
|
padding: 2px 5px 3px;
|
|
margin-right: 1px;
|
|
width: 18px;
|
|
text-align: center;
|
|
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;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/**** Network Topology CSS ****/
|
|
#topologyCanvasContainer {
|
|
.box-sizing(border-box);
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 25px;
|
|
padding-left: 50px;
|
|
background: #efefef;
|
|
min-height: 400px;
|
|
div.nodata {
|
|
font-size: 150%;
|
|
text-align: center;
|
|
padding-top: 150px;
|
|
display: none;
|
|
}
|
|
&.noinfo {
|
|
div.nodata {
|
|
display: block;
|
|
|
|
}
|
|
#topology_canvas {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topologyNavi {
|
|
overflow: hidden;
|
|
i {margin-right: 3px;}
|
|
margin: 10px 0 20px;
|
|
.toggleView {
|
|
float: left;
|
|
}
|
|
.launchButtons {
|
|
float: right;
|
|
text-align: right;
|
|
a.btn {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topologyBalloon {
|
|
display: none;
|
|
background: #fff;
|
|
position: absolute;
|
|
left:100px;
|
|
top:20px;
|
|
z-index: 600;
|
|
border-radius: 5px;
|
|
color:#333;
|
|
min-width: 200px;
|
|
&.on {
|
|
display: block;
|
|
}
|
|
line-height: 1.2;
|
|
.vnc_window {
|
|
margin-left: 10px;
|
|
}
|
|
.closeTopologyBalloon {
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
display: block;
|
|
position: absolute;
|
|
font-weight: bold;
|
|
right: 6px;
|
|
top: 0px;
|
|
cursor: pointer;
|
|
padding: 3px;
|
|
color:#aaa;
|
|
&:hover {
|
|
color:#777;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
.contentBody {
|
|
padding: 8px 8px 0;
|
|
}
|
|
span.active, span.down {
|
|
&:before {
|
|
content: "";
|
|
width: 9px;
|
|
height: 9px;
|
|
display: inline-block;
|
|
background: #0d925b;
|
|
margin-right: 3px;
|
|
border-radius: 10px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
span.down {
|
|
&:before {
|
|
background: #e64b41;
|
|
}
|
|
}
|
|
.footer {
|
|
background: #efefef;
|
|
border-top: 1px solid #d9d9d9;
|
|
padding: 8px;
|
|
border-radius: 0px 0px 7px 7px;
|
|
.footerInner {
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
.cell {
|
|
display: table-cell;
|
|
padding-right: 10px;
|
|
}
|
|
.link {
|
|
font-size: 12px;
|
|
}
|
|
.delete {
|
|
padding-right: 0;
|
|
text-align: right;
|
|
.btn {
|
|
&:before {
|
|
content:"Delete ";
|
|
}
|
|
&.deleting:before {
|
|
content:"Deleting ";
|
|
}
|
|
}
|
|
.btn.instance {
|
|
&:before {
|
|
content:"Terminate ";
|
|
}
|
|
&.deleting:before {
|
|
content:"Terminating ";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
table.detaiInfoTable {
|
|
margin-bottom: 5px;
|
|
caption {
|
|
text-align: left;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
margin-bottom: 0px;
|
|
}
|
|
th,td {
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
padding-bottom: 3px;
|
|
background: transparent;
|
|
}
|
|
th {
|
|
color:#999;
|
|
padding-right: 8px;
|
|
width: 80px;
|
|
span {
|
|
vertical-align: middle;
|
|
width:80px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: inline-block;
|
|
}
|
|
&.device {
|
|
text-align: right;
|
|
}
|
|
}
|
|
td {
|
|
padding-right: 5px;
|
|
white-space: nowrap;
|
|
}
|
|
td.delete {
|
|
padding-right: 0;
|
|
text-align: right;
|
|
}
|
|
.btn {
|
|
line-height: 1.4;
|
|
}
|
|
.btn:before {
|
|
content:"Delete ";
|
|
}
|
|
.btn.deleting:before {
|
|
content:"Deleting ";
|
|
}
|
|
}
|
|
font-size: 11px;
|
|
.box-shadow(0px 1px 6px #777);
|
|
&:before {
|
|
border-top: 7px solid transparent;
|
|
border-bottom: 7px solid transparent;
|
|
border-right: 9px solid #bbb;
|
|
display: block;
|
|
position: absolute;
|
|
top: 30px;
|
|
left: -9px;
|
|
width: 0;
|
|
height: 0;
|
|
content: "";
|
|
}
|
|
&:after {
|
|
border-top: 6px solid transparent;
|
|
border-bottom: 6px solid transparent;
|
|
border-right: 8px solid #fff;
|
|
display: block;
|
|
position: absolute;
|
|
top: 31px;
|
|
left: -8px;
|
|
width: 0;
|
|
height: 0;
|
|
content: "";
|
|
}
|
|
&.leftPosition {
|
|
&:before {
|
|
border-right: none;
|
|
border-left: 9px solid #bbb;
|
|
right: -9px;
|
|
top: 30px;
|
|
left:auto;
|
|
}
|
|
&:after {
|
|
border-right: none;
|
|
border-left: 8px solid #fff;
|
|
right: -8px;
|
|
top: 31px;
|
|
left:auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
#topologyMessages {
|
|
width:1px;
|
|
height:1px;
|
|
visibility: hidden;
|
|
position: absolute;
|
|
top: -100px;
|
|
}
|
|
|
|
/**** Resource Topology CSS ****/
|
|
.link {stroke: #999;stroke-width: 1.5px;}
|
|
.node {cursor:pointer;}
|
|
.node text {font: 12px sans-serif;}
|
|
|
|
#resource_container {position:relative;}
|
|
#stack_box {position:absolute;width:300px;top:10px;left:10px;}
|
|
#stack_box h3 {font-size:11pt;line-height:20px;}
|
|
#stack_box p {margin:0;font-size:9pt;line-height:14px;}
|
|
#stack_box a {margin:0;font-size:9pt;line-height:14px;}
|
|
#stack_box img {float:left;}
|
|
#stack_box #stack_info {float:left;white-space:normal;width:200px;}
|
|
|
|
#info_box {position:absolute;width:300px;top:100px;left:10px;}
|
|
#info_box h3 {font-size:9pt;line-height:20px;}
|
|
#info_box p {margin:0;font-size:9pt;line-height:14px;}
|
|
#info_box a {margin:0;font-size:9pt;line-height:14px;}
|
|
#info_box .error {color:darkred;}
|