4449 lines
95 KiB
Plaintext
4449 lines
95 KiB
Plaintext
@import "../../node_modules/bootstrap/dist/css/bootstrap.css";
|
|
|
|
// COLOR SETTINGS
|
|
|
|
// Base Settings
|
|
@page-width: 1170px;
|
|
@default-input-width: 280px;
|
|
@default-label-width: 200px;
|
|
|
|
// Base Palette
|
|
@base-dark-color: #415766;
|
|
@base-light-color: @base-dark-color + #7a746c;
|
|
@base-text-color: #525960;
|
|
|
|
// Node Colors
|
|
@base-node-color: #e1e4e6;
|
|
@base-node-border: @base-node-color - 30%; // - #1e1f1f;
|
|
|
|
// Node Selected
|
|
@node-color-selected: @base-node-color - 15%; //#101010;
|
|
@node-border-color-selected: @base-node-color - 15%; //#101010;
|
|
|
|
// Node Unallocated
|
|
@node-color-discover: @white;
|
|
@node-border-color-discover: @base-node-border;
|
|
@node-color-discover-hover: @base-node-color + 15%; //#141414;
|
|
|
|
// Node Error
|
|
@node-color-error: @red + 160%; //#decace;
|
|
@node-border-color-error: @red + 10%;
|
|
|
|
// Node New
|
|
@node-color-pending_addition: @base-node-color;
|
|
@node-border-color-pending_addition: @green - 20%;
|
|
|
|
// Pending deletion node
|
|
@node-color-pending_deletion: @base-node-color;
|
|
@node-border-color-pending_deletion: @orange - 20%;
|
|
|
|
// Node Offline
|
|
@node-color-offline: @base-node-color;
|
|
@node-border-color-offline: @base-node-border;
|
|
|
|
// Other Colors
|
|
@white: #ffffff;
|
|
@black: #000000;
|
|
@red: #c94b4b;
|
|
@pure-red: #ff0000;
|
|
@green: #54a854;
|
|
@blue: #4e85aa;
|
|
@orange: #bc6e12;
|
|
@gray: #8c8c8c;
|
|
|
|
// Buttons Colors
|
|
@btn-default: #d4d5d6;
|
|
@btn-success: #48a565;
|
|
@btn-primary: #3d7eaa;
|
|
@btn-warning: #d3a541;
|
|
@btn-danger: #b85d51;
|
|
@btn-info: #7ab0cc;
|
|
|
|
// Background colors
|
|
@light-blue: #eaf0f2;
|
|
@pale-blue: #c9e4ee;
|
|
@light-green: #d0f2dd;
|
|
@light-yellow: #f7e4bf;
|
|
@light-red: #f6c4c3;
|
|
@aquamarine: #bbedcf;
|
|
@rose: #f2aaa9;
|
|
@coral: #ea7170;
|
|
@emergency-red: #a34f4e;
|
|
|
|
@alert-success-bg: #cae8c6;
|
|
@alert-info-bg: #c1d4e1;
|
|
@alert-warning-bg: #f2e0b9;
|
|
@alert-danger-bg: #e8c6c6;
|
|
|
|
// Disk colors
|
|
@disk-orange: #c1684a;
|
|
@disk-blue: #1c7695;
|
|
@disk-green: #43968a;
|
|
@disk-red: #C46054;
|
|
@disk-violet: #9a4aae;
|
|
@disk-yellow: #F2CA5B;
|
|
@disk-cyan: #359CBF;
|
|
|
|
@link-color: saturate(lighten(@base-dark-color, 20%), 30%);
|
|
@link-color-hover: saturate(lighten(@base-dark-color, 10%), 15%);
|
|
@navbar-color: saturate(lighten(@base-dark-color, 20%), 15%);
|
|
@navbar-color-active: saturate(lighten(@base-dark-color, 20%), 15%);
|
|
@navbar-icon-color: @base-dark-color + #203c4c;
|
|
@shadow-color: rgba(0,0,0,0.5);
|
|
|
|
// Tabs & Content Settings
|
|
@tab-color: desaturate(lighten(@base-dark-color, 55%), 20%);
|
|
@tab-color-hover: desaturate(lighten(@base-dark-color, 50%), 20%);
|
|
@tab-color-active: @white;
|
|
|
|
@range-color: @tab-color - 50%;
|
|
@slider-color: @tab-color + 20%;
|
|
|
|
// Fonts and Weight
|
|
@import "../../node_modules/open-sans-fontface/open-sans.css";
|
|
|
|
@open-sans-font: 'Open Sans', helvetica, arial, tahoma, verdana, sans-serif;
|
|
|
|
// Bebas Regular
|
|
@font-face {
|
|
font-family: 'bebas';
|
|
src: url('../fonts/bebas_regular.eot');
|
|
src: url('../fonts/bebas_regular.eot?#iefix') format('embedded-opentype'), url('../fonts/bebas_regular.woff2') format('woff2'), url('../fonts/bebas_regular.woff') format('woff'), url('../fonts/bebas_regular.ttf') format('truetype'), url('../fonts/bebas_regular.svg#bebas_regular') format('svg');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
// Bebas Bold
|
|
@font-face {
|
|
font-family: 'bebas bold';
|
|
src: url('../fonts/bebas_bold.eot');
|
|
src: url('../fonts/bebas_bold.eot?#iefix') format('embedded-opentype'), url('../fonts/bebas_bold.woff2') format('woff2'), url('../fonts/bebas_bold.woff') format('woff'), url('../fonts/bebas_bold.ttf') format('truetype'), url('../fonts/bebas_bold.svg#bebas_bold') format('svg');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
.font-light {font-weight: 300;}
|
|
.font-normal {font-weight: normal;}
|
|
.font-semibold {font-weight: 600;}
|
|
.font-bold {font-weight: bold;}
|
|
.font-extrabold {font-weight: 800;}
|
|
|
|
@base-font-size: 14px;
|
|
|
|
@footer-height: 70px;
|
|
|
|
// MIXINS
|
|
|
|
.text-emboss() {
|
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
|
|
}
|
|
.text-noemboss() {
|
|
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
|
|
}
|
|
.text-shadow() {
|
|
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
|
|
}
|
|
.text-noshadow() {
|
|
text-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
}
|
|
.clearfix() {
|
|
content: " ";
|
|
display: block;
|
|
clear: both;
|
|
font-size: 0;
|
|
height: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.break-word() {
|
|
/* the following code refers to https://css-tricks.com/almanac/properties/w/word-break/ */
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
hyphens: auto;
|
|
-moz-hyphens: auto; /* for word-wrap to work in FF */
|
|
word-break: break-word; /* non standard for webkit */
|
|
}
|
|
|
|
// ICONS
|
|
|
|
.icon-default-styles(@top, @left) {
|
|
width: 15px;
|
|
height: 15px;
|
|
background: url(@common-icons-sprite) @top @left no-repeat;
|
|
&, &:before, &:after {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
.glyphicon-warning-sign {
|
|
.icon-default-styles(-52px, -132px);
|
|
}
|
|
|
|
.glyphicon-danger-sign {
|
|
.icon-default-styles(-13px, -132px);
|
|
width: 16px;
|
|
}
|
|
|
|
.glyphicon-info-sign {
|
|
.icon-default-styles(-13px, -612px);
|
|
}
|
|
|
|
.glyphicon-bell {
|
|
.icon-default-styles(-13px, -652px);
|
|
}
|
|
|
|
.glyphicon-trash {
|
|
.icon-default-styles(-13px, -691px);
|
|
}
|
|
|
|
.glyphicon-edit {
|
|
.icon-default-styles(-56px, -691px);
|
|
}
|
|
|
|
.node-management-button-sizes {
|
|
width: 16px;
|
|
height: 17px;
|
|
}
|
|
|
|
.glyphicon-th {
|
|
.icon-default-styles(-12px, -252px);
|
|
.node-management-button-sizes;
|
|
}
|
|
|
|
.glyphicon-th-list {
|
|
.icon-default-styles(-12px, -292px);
|
|
.node-management-button-sizes;
|
|
}
|
|
|
|
.glyphicon-sort {
|
|
.icon-default-styles(-12px, -372px);
|
|
.node-management-button-sizes;
|
|
}
|
|
|
|
.glyphicon-filter {
|
|
.icon-default-styles(-12px, -412px);
|
|
.node-management-button-sizes;
|
|
}
|
|
|
|
.glyphicon-search {
|
|
.icon-default-styles(-12px, -452px);
|
|
.node-management-button-sizes;
|
|
}
|
|
|
|
.glyphicon-tag {
|
|
.icon-default-styles(-12px, -332px);
|
|
.node-management-button-sizes;
|
|
}
|
|
|
|
.glyphicon-tag-alt {
|
|
.icon-default-styles(-52px, -332px);
|
|
.node-management-button-sizes;
|
|
}
|
|
|
|
.glyphicon-pencil-alt {
|
|
.icon-default-styles(-13px, -492px);
|
|
&:hover {
|
|
background: url(@common-icons-sprite) -53px -492px no-repeat;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.glyphicon-pushpin {
|
|
.icon-default-styles(-12px, -734px);
|
|
}
|
|
.glyphicon-time {
|
|
.icon-default-styles(-12px, -774px);
|
|
}
|
|
.glyphicon-tags {
|
|
.icon-default-styles(-52px, -734px);
|
|
}
|
|
|
|
.glyphicon-list-alt {
|
|
.icon-default-styles(-52px, -212px);
|
|
}
|
|
|
|
.glyphicon-top-page {
|
|
.icon-default-styles(-52px, -800px);
|
|
}
|
|
|
|
.discard-changes-icon {
|
|
.icon-default-styles(-13px, -572px);
|
|
&:hover {
|
|
background: url(@common-icons-sprite) -53px -572px no-repeat;
|
|
}
|
|
}
|
|
|
|
.glyphicon-ok-sign {
|
|
.icon-default-styles(-13px, -812px);
|
|
}
|
|
|
|
.base-btn-link-colors() {
|
|
@base-btn-link-color: #5988A5;
|
|
color: @base-btn-link-color;
|
|
&:hover {
|
|
color: @base-btn-link-color - 15%;
|
|
}
|
|
}
|
|
|
|
// BASE SETTINGS
|
|
|
|
:focus {
|
|
outline:none !important; // This option removes the blue border around the buttons in chrome and safari
|
|
}
|
|
|
|
html, body {
|
|
font-family: @open-sans-font;
|
|
font-weight: normal;
|
|
font-size: @base-font-size;
|
|
background-color: @base-dark-color;
|
|
height: 100%;
|
|
color: @white;
|
|
}
|
|
|
|
#main-container, #content-wrapper {
|
|
height: 100%;
|
|
}
|
|
|
|
b, strong {
|
|
.font-semibold;
|
|
}
|
|
|
|
a {
|
|
color: @link-color;
|
|
&:hover {
|
|
color: @link-color-hover;
|
|
}
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
.font-light;
|
|
}
|
|
|
|
.text-success {color: @green;}
|
|
.text-danger {color: @red;}
|
|
.text-info {color: @blue;}
|
|
.text-warning {color: @orange;}
|
|
.text-critical {color: @pure-red;}
|
|
|
|
// BUTTONS
|
|
|
|
button, .btn:not(.btn-link) {.font-semibold;}
|
|
|
|
.button-mixin(@color) {
|
|
&,
|
|
&:hover,
|
|
&:active,
|
|
&:focus,
|
|
&:disabled {
|
|
background-color: @color;
|
|
border-color: @color;
|
|
color: @white;
|
|
.text-shadow;
|
|
&:hover {
|
|
background-color: @color - 15%;
|
|
border-color: @color - 15%;
|
|
.text-noshadow;
|
|
}
|
|
&:disabled {
|
|
color: @white - 20%;
|
|
.text-noshadow;
|
|
}
|
|
&:active {
|
|
background-color: @color - 25%;
|
|
border-color: @color - 25%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-success {
|
|
.button-mixin(@btn-success);
|
|
}
|
|
.btn-primary {
|
|
.button-mixin(@btn-primary);
|
|
}
|
|
.btn-warning {
|
|
.button-mixin(@btn-warning);
|
|
}
|
|
.btn-danger {
|
|
.button-mixin(@btn-danger);
|
|
}
|
|
.btn-info {
|
|
.button-mixin(@btn-info);
|
|
}
|
|
|
|
|
|
@common-icons-sprite: "../img/icons/icons-sprite.svg";
|
|
|
|
.loading-ticket {
|
|
display: inline-block;
|
|
padding: 10px;
|
|
background-color: rgba(230,130,13,.85);
|
|
background-opacity: 50%;
|
|
border-radius: 4px;
|
|
position: fixed;
|
|
width: 120px;
|
|
height: 40px;
|
|
overflow: hidden;
|
|
top: 48px;
|
|
left: 50%;
|
|
margin-left: -60px;
|
|
z-index: 9999999;
|
|
color: @white;
|
|
.font-semibold;
|
|
.icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
float: left;
|
|
background: url(@common-icons-sprite) no-repeat -51px -90px;
|
|
margin: 0px 8px 0px 2px;
|
|
animation: fade-cloud 1s infinite;
|
|
}
|
|
.text {
|
|
display: inline-block;
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
.modal-open .modal {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.clamp {
|
|
width: 100%;
|
|
max-width: @page-width;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
height: auto !important;
|
|
min-height: 100%;
|
|
&:after {
|
|
.clearfix;
|
|
}
|
|
&.fixed-width-layout {min-width: @page-width;}
|
|
}
|
|
|
|
.content-elements:last-child::after {
|
|
display: block;
|
|
margin: 20px 0;
|
|
margin-bottom: -20px;
|
|
content: "";
|
|
height: 0;
|
|
}
|
|
|
|
// TOOLTIPS
|
|
|
|
.tooltip-inner {
|
|
max-width: 300px;
|
|
}
|
|
|
|
// ALERTS
|
|
|
|
.alert {
|
|
border-radius: 3px;
|
|
border: none;
|
|
strong {
|
|
font-size: @base-font-size + 4px;
|
|
line-height: 1px;
|
|
}
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
.task-result-details {
|
|
@deployment-result-indent: 5px;
|
|
margin-top: @deployment-result-indent;
|
|
.btn-link {
|
|
padding: 0;
|
|
color: @link-color;
|
|
font-size: @base-font-size - 1px;
|
|
}
|
|
pre {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
.break-word;
|
|
}
|
|
}
|
|
}
|
|
|
|
.alert-success {
|
|
background-color: @alert-success-bg;
|
|
&, .close {color: @green;}
|
|
}
|
|
|
|
.alert-info {
|
|
background-color: @alert-info-bg;
|
|
&, .close {color: @blue;}
|
|
}
|
|
|
|
.alert-warning {
|
|
background-color: @alert-warning-bg;
|
|
&, .close {color: @orange;}
|
|
}
|
|
|
|
.alert-danger {
|
|
background-color: @alert-danger-bg;
|
|
&, .close {color: @red;}
|
|
}
|
|
|
|
.global-alert {
|
|
margin: 20px 0;
|
|
background: @base-dark-color - 20%;
|
|
font-size: @base-font-size - 1px;
|
|
.text-shadow;
|
|
.close {
|
|
opacity: 1;
|
|
text-shadow: 0 0;
|
|
&:hover {
|
|
opacity: .7;
|
|
}
|
|
}
|
|
strong {
|
|
font-size: @base-font-size + 2px;
|
|
line-height: 1px;
|
|
}
|
|
a {
|
|
color: @link-color + 40%;
|
|
font-size: @base-font-size - 1px;
|
|
&:hover {
|
|
color: @link-color + 20%;
|
|
}
|
|
}
|
|
&.alert-warning {
|
|
&, .close {color: @orange + 50%;}
|
|
}
|
|
&.alert-danger {
|
|
&, .close {color: @red + 50%;}
|
|
}
|
|
}
|
|
|
|
// CUSTOM CHECKBOX/RADIOBUTTON
|
|
|
|
.custom-tumbler {
|
|
margin: 0 6px 0 0;
|
|
position: relative;
|
|
float: left;
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.custom-tumbler input {
|
|
overflow: hidden;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
margin: 5px 0 0 5px;
|
|
width: 22px;
|
|
height: 22px;
|
|
&, &.form-control {
|
|
opacity: 0 !important;
|
|
}
|
|
}
|
|
|
|
.custom-tumbler input + span {
|
|
display: block;
|
|
overflow: hidden;
|
|
font-size: 1px;
|
|
line-height: 0;
|
|
background: url("../img/ui/radio_checkbox.svg") no-repeat 0 0 transparent;
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.custom-tumbler input:checked + span {
|
|
background: url("../img/ui/radio_checkbox.svg") no-repeat -22px 0px;
|
|
}
|
|
|
|
.custom-tumbler input:indeterminate + span {
|
|
background: url("../img/ui/radio_checkbox.svg") no-repeat -44px 0px;
|
|
}
|
|
|
|
.custom-tumbler input[disabled] + span {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.custom-tumbler input[type=radio] {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.custom-tumbler input[type=radio] + span {
|
|
background: url("../img/ui/radio_checkbox.svg") no-repeat 0px -22px;
|
|
}
|
|
|
|
.custom-tumbler input[type=radio]:checked + span {
|
|
background: url("../img/ui/radio_checkbox.svg") no-repeat -22px -22px;
|
|
}
|
|
|
|
// CUSTOM RANGE INPUT
|
|
|
|
input[type=range] {
|
|
&,
|
|
&:focus,
|
|
&:active,
|
|
&::-moz-focus-inner,
|
|
&:-moz-focusring {
|
|
border: 0 !important;
|
|
outline: none !important;
|
|
}
|
|
&::-ms-track {
|
|
border: inherit;
|
|
color: transparent;
|
|
background: transparent;
|
|
outline: none;
|
|
}
|
|
&::-ms-fill-lower,
|
|
&::-ms-fill-upper {
|
|
background: transparent;
|
|
outline: none;
|
|
}
|
|
&::-ms-tooltip {
|
|
display: none;
|
|
}
|
|
&:disabled {
|
|
opacity: 0.4;
|
|
}
|
|
-webkit-appearance: none;
|
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
|
width: 100%;
|
|
height: 6px;
|
|
margin: 0;
|
|
border: none;
|
|
border-radius: 3px;
|
|
background: @range-color;
|
|
box-shadow: inset 0 1px 0 0 @range-color - 10%, inset 0 -1px 0 0 @range-color + 10%;
|
|
outline: none;
|
|
}
|
|
|
|
// NAVIGATION
|
|
|
|
.navbar-bg {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
z-index: 2;
|
|
width: 100%;
|
|
height: 70px;
|
|
background-color: @white;
|
|
box-shadow: 0 0 10px @shadow-color;
|
|
min-width: @page-width;
|
|
}
|
|
|
|
.navigation-box {
|
|
width: 100%;
|
|
}
|
|
|
|
.navbar {
|
|
border-radius: 0px;
|
|
border: 0px solid transparent;
|
|
margin: 0px;
|
|
min-height: 70px;
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
.navbar-default {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
@navbar-height: 34px;
|
|
> .row {
|
|
margin-right: 0; // Do not break the flow for block elements, following the only navbar row
|
|
}
|
|
.navbar-nav {
|
|
margin: 0;
|
|
margin-top: 18px;
|
|
height: @navbar-height;
|
|
overflow: hidden;
|
|
li {
|
|
display: inline-block;
|
|
width: auto;
|
|
background-color: @white;
|
|
a {
|
|
font-family: 'bebas';
|
|
font-size: @base-font-size + 7;
|
|
color: @navbar-color;
|
|
padding-top: 7px;
|
|
padding-bottom: 0px;
|
|
height: @navbar-height;
|
|
margin-left: 4px;
|
|
-webkit-font-smoothing: antialiased;
|
|
&:hover {
|
|
color: @white;
|
|
background-color: @base-light-color;
|
|
border-radius: 4px;
|
|
}
|
|
&:focus {
|
|
color: @white;
|
|
background-color: @base-light-color;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
.active {
|
|
a {
|
|
color: @white;
|
|
background-color: @navbar-color-active;
|
|
border-radius: 4px;
|
|
&:hover {
|
|
color: @white;
|
|
background-color: @navbar-color-active;
|
|
border-radius: 4px;
|
|
}
|
|
&:focus {
|
|
color: @white;
|
|
background-color: @navbar-color-active;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-logo {
|
|
float: left;
|
|
height: 60px;
|
|
line-height: 20px;
|
|
padding: 0px;
|
|
margin-top: 2px;
|
|
width: 166px;
|
|
background: url(../img/logos/fuel-logo.svg) no-repeat top left;
|
|
}
|
|
|
|
.navbar-icons {
|
|
@navbar-icon-size: 44px;
|
|
@navbar-icon-spacing: 10px;
|
|
@navbar-icon-font: 'bebas bold';
|
|
margin-top: 13px;
|
|
margin-right: 0;
|
|
height: @navbar-icon-size;
|
|
position: relative;
|
|
> li {
|
|
color: @navbar-icon-color;
|
|
display: block;
|
|
float: left;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: @navbar-icon-size;
|
|
height: @navbar-icon-size;
|
|
margin-left: @navbar-icon-spacing;
|
|
-webkit-font-smoothing: antialiased;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
box-sizing: border-box;
|
|
.badge {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: @red;
|
|
border-radius: 4px;
|
|
font-family: @navbar-icon-font;
|
|
font-weight: 100;
|
|
padding: 3px 3px 3px 4px;
|
|
box-shadow: 0 1px 1px @shadow-color;
|
|
font-size: @base-font-size;
|
|
letter-spacing: 1px;
|
|
box-sizing: border-box;
|
|
opacity: 0;
|
|
&.visible {
|
|
opacity: 1;
|
|
transition: opacity .8s ease-in;
|
|
}
|
|
}
|
|
.navbar-icon-sprite-index(@index) {
|
|
@icon-sprite-img: "../img/icons/header-icons-sprite.svg";
|
|
background: url(@icon-sprite-img) no-repeat 0 -@navbar-icon-size * @index;
|
|
&:hover {
|
|
background: url(@icon-sprite-img) no-repeat -@navbar-icon-size -@navbar-icon-size * @index;
|
|
}
|
|
}
|
|
|
|
&.language-icon {
|
|
.navbar-icon-sprite-index(0);
|
|
.language-text {
|
|
display: block;
|
|
text-align: center;
|
|
margin-left: 0;
|
|
margin-top: 7px;
|
|
font-family: @navbar-icon-font;
|
|
font-size: @base-font-size + 8;
|
|
}
|
|
}
|
|
|
|
&.statistics-icon {
|
|
.navbar-icon-sprite-index(1);
|
|
.unallocated {
|
|
display: block;
|
|
text-align: center;
|
|
font-size: @base-font-size - 4;
|
|
.font-bold;
|
|
margin: 8px 0 0 0;
|
|
}
|
|
.total {
|
|
display: block;
|
|
text-align: center;
|
|
font-size: @base-font-size - 4;
|
|
.font-bold;
|
|
margin: 1px 0 0 0;
|
|
}
|
|
&.no-unallocated {
|
|
.navbar-icon-sprite-index(0);
|
|
.total {
|
|
display: block;
|
|
text-align: center;
|
|
margin-left: 0;
|
|
margin-top: 7px;
|
|
.font-light;
|
|
font-family: @navbar-icon-font;
|
|
font-size: @base-font-size + 8;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.user-icon {
|
|
.navbar-icon-sprite-index(2);
|
|
}
|
|
|
|
&.notifications-icon {
|
|
.navbar-icon-sprite-index(3);
|
|
}
|
|
}
|
|
|
|
.popover {
|
|
@default-z-index: 1060;
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: @navbar-icon-size;
|
|
max-width: none;
|
|
z-index: @default-z-index;
|
|
font-family: @open-sans-font;
|
|
.font-normal;
|
|
font-size: @base-font-size - 1px;
|
|
line-height: 1.2;
|
|
background-color: @white;
|
|
background-clip: padding-box;
|
|
border: 1px solid rgba(0,0,0,0.2);
|
|
border-radius: 6px;
|
|
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
|
|
padding: 1px;
|
|
text-align: left;
|
|
white-space: normal;
|
|
color: @base-text-color;
|
|
> .arrow {
|
|
left: auto;
|
|
}
|
|
> .popover-content {
|
|
padding: 12px;
|
|
}
|
|
|
|
&.notifications-popover {
|
|
z-index: @default-z-index - 20;
|
|
.notification {
|
|
border-bottom: 1px solid @gray + 80%;
|
|
padding-bottom: 14px;
|
|
margin-bottom: 10px;
|
|
box-sizing: border-box;
|
|
.glyphicon {
|
|
display: block;
|
|
font-size: @base-font-size + 2px;
|
|
float: left;
|
|
width: 10%;
|
|
margin-top: 2px;
|
|
}
|
|
p {
|
|
display: block;
|
|
width: 90%;
|
|
float: left;
|
|
margin: 0;
|
|
.break-word;
|
|
}
|
|
&.clickable {
|
|
p {
|
|
color: @link-color;
|
|
cursor: pointer;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
color: @link-color-hover;
|
|
}
|
|
}
|
|
}
|
|
&.unread {
|
|
.font-semibold;
|
|
}
|
|
&:after {
|
|
.clearfix;
|
|
}
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
padding-bottom: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
.show-more {
|
|
text-align: center;
|
|
.font-semibold;
|
|
font-size: @base-font-size;
|
|
}
|
|
}
|
|
|
|
&.user-popover {
|
|
.username {
|
|
color: @gray;
|
|
}
|
|
.name {
|
|
margin: 4px 0px 10px 0px;
|
|
padding: 0px;
|
|
}
|
|
.user-actions {
|
|
.clearfix;
|
|
}
|
|
button {
|
|
.glyphicon {
|
|
margin-right: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.statistics-popover {
|
|
.list-group {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
&.language-popover {
|
|
a {
|
|
cursor: pointer;
|
|
padding: 10px 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@default-popover-width: 260px;
|
|
@default-arrow-offset: 10px;
|
|
.popover-layout(@index, @width: @default-popover-width) {
|
|
width: @width;
|
|
@navbar-icon-width: @navbar-icon-size + @navbar-icon-spacing;
|
|
@popover-right-align-offset: @navbar-icon-width * @navbar-icon-count - @width;
|
|
@popover-center-align-offset: @popover-right-align-offset - @navbar-icon-width * @index + @width / 2 - @navbar-icon-size / 2;
|
|
@popover-offset: min(@popover-right-align-offset, @popover-center-align-offset);
|
|
left: @popover-offset;
|
|
> .arrow {
|
|
right: @default-arrow-offset + @navbar-icon-width * @index + (@popover-offset - @popover-right-align-offset);
|
|
}
|
|
}
|
|
|
|
&.with-auth {
|
|
@navbar-icon-count: 4;
|
|
.notifications-popover {.popover-layout(@index: 0)}
|
|
.user-popover {.popover-layout(@index: 1)}
|
|
.statistics-popover {.popover-layout(@index: 2, @width: 230px)}
|
|
.language-popover {.popover-layout(@index: 3, @width: 110px)}
|
|
}
|
|
|
|
&.without-auth {
|
|
@navbar-icon-count: 3;
|
|
.notifications-popover {.popover-layout(@index: 0)}
|
|
.statistics-popover {.popover-layout(@index: 1, @width: 230px)}
|
|
.language-popover {.popover-layout(@index: 2, @width: 110px)}
|
|
}
|
|
}
|
|
|
|
.page-up {
|
|
background: url(@common-icons-sprite) no-repeat -44px -764px;
|
|
cursor: pointer;
|
|
display: block;
|
|
height: 32px;
|
|
opacity: 0.4;
|
|
position: fixed;
|
|
width: 32px;
|
|
z-index: 1;
|
|
margin-left: 1178px;
|
|
top: 19px;
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// BREADCRUMBS
|
|
|
|
.breadcrumb {
|
|
background-color: transparent;
|
|
border-radius: 4px;
|
|
list-style: outside none none;
|
|
font-size: @base-font-size - 1;
|
|
.text-shadow;
|
|
margin: 8px 0 0 0;
|
|
padding: 0;
|
|
li {
|
|
display: inline-block;
|
|
a {
|
|
color: @blue + 60%;
|
|
}
|
|
}
|
|
li + li {
|
|
box-sizing: border-box;
|
|
&:before {
|
|
padding: 0 5px;
|
|
color: @base-light-color;
|
|
content: "/";
|
|
}
|
|
}
|
|
.active {
|
|
color: @base-light-color;
|
|
}
|
|
}
|
|
|
|
// FOOTER
|
|
|
|
#footer-spacer {
|
|
height: 80px;
|
|
clear: both;
|
|
}
|
|
|
|
.footer {
|
|
display: block;
|
|
max-width: @page-width;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
color: @base-dark-color + 60%;
|
|
font-size: @base-font-size - 2;
|
|
height: 70px;
|
|
overflow: hidden;
|
|
margin-top: -70px;
|
|
padding-top: 16px;
|
|
box-sizing: border-box;
|
|
> .mirantis-logo-white {
|
|
display: block;
|
|
width: 61px;
|
|
height: 30px;
|
|
float: left;
|
|
background: url(../img/logos/mirantis-logo-white.svg) no-repeat 0px 0px;
|
|
background-size: contain;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
// PAGE ELEMENTS
|
|
|
|
.page-title {
|
|
margin: 10px 0 14px;
|
|
.title {
|
|
margin: 0;
|
|
padding: 0;
|
|
color: @white;
|
|
font-size: @base-font-size + 12;
|
|
display: block;
|
|
.font-light;
|
|
.text-shadow;
|
|
}
|
|
}
|
|
|
|
.content-box {
|
|
background-color: @white;
|
|
border-radius: 8px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
height: 100%;
|
|
padding: 20px;
|
|
color: @base-text-color;
|
|
box-sizing: border-box;
|
|
.row {
|
|
.title {
|
|
padding: 0px 15px 0px 15px;
|
|
margin-bottom: 10px;
|
|
margin-top: 0;
|
|
.font-light;
|
|
font-size: @base-font-size + 12;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-pills li {
|
|
overflow: hidden;
|
|
user-select: none;
|
|
width: 100%;
|
|
.break-word;
|
|
&:not(.active) {
|
|
cursor: pointer;
|
|
}
|
|
&.active {
|
|
& > a {
|
|
background-color: @navbar-color-active;
|
|
color: @white;
|
|
font-weight: 600;
|
|
&:hover {
|
|
background-color: @navbar-color-active;
|
|
}
|
|
}
|
|
}
|
|
& > a {
|
|
padding-left: 25px;
|
|
line-height: 1.2;
|
|
color: @navbar-color-active;
|
|
font-weight: 600;
|
|
&:hover {
|
|
color: @white;
|
|
background-color: @base-light-color;
|
|
}
|
|
}
|
|
&.group-title {
|
|
font-weight: 600;
|
|
margin: 20px 0 10px 0px;
|
|
cursor: default;
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
|
|
// FORMS
|
|
|
|
.forms-box {
|
|
@base-indent: 20px;
|
|
|
|
margin-bottom: @base-indent * 1.5;
|
|
h3 {
|
|
padding-bottom: 6px;
|
|
margin: 0 0 @base-indent * 1.5;
|
|
border-bottom: 1px solid @gray + 50%;
|
|
color: @base-text-color + 10%;
|
|
box-sizing: border-box;
|
|
font-size: @base-font-size + 7px;
|
|
.font-normal;
|
|
.checkbox-group {
|
|
padding: 0;
|
|
label {
|
|
margin-bottom: -3px;
|
|
.custom-tumbler {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
h4 {
|
|
margin: @base-indent * 1.5 0 @base-indent;
|
|
font-size: @base-font-size + 5px;
|
|
.font-normal;
|
|
}
|
|
label {
|
|
color: @base-text-color;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
line-height: 1.5;
|
|
.font-normal;
|
|
}
|
|
.help-block {
|
|
font-size: @base-font-size - 2px;
|
|
color: @gray + 25%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.radio-group + .form-group, .radio-group + .checkbox-group {
|
|
margin-top: @base-indent * 2;
|
|
}
|
|
.form-group {
|
|
padding: 0 @base-indent / 2;
|
|
margin-bottom: @base-indent;
|
|
box-sizing: border-box;
|
|
label {
|
|
width: @default-label-width;
|
|
float: left;
|
|
padding: 6px 8px 0 0;
|
|
}
|
|
input, textarea, select {
|
|
float: left;
|
|
}
|
|
input[type=file] {
|
|
opacity: 0;
|
|
position: absolute;
|
|
}
|
|
&:not(.disabled) input.file-name[readonly] {
|
|
background-color: white;
|
|
cursor: pointer;
|
|
}
|
|
input, textarea, select {
|
|
max-width: @default-input-width;
|
|
width: @default-input-width;
|
|
}
|
|
textarea {
|
|
max-width: @default-input-width * 2;
|
|
}
|
|
.input-group {
|
|
float: left;
|
|
max-width: @default-input-width;
|
|
@input-addon-width: 40px;
|
|
input {
|
|
width: @default-input-width - @input-addon-width;
|
|
}
|
|
.input-group-addon {
|
|
width: @input-addon-width;
|
|
height: 34px;
|
|
cursor: pointer;
|
|
float: left;
|
|
padding: 8px;
|
|
}
|
|
}
|
|
.help-block {
|
|
max-width: @page-width - @default-input-width - @default-label-width - 280px;
|
|
float: left;
|
|
margin-left: 20px;
|
|
padding-top: 9px;
|
|
box-sizing: border-box;
|
|
}
|
|
&.has-error .help-block {
|
|
.text-danger;
|
|
}
|
|
&:after {
|
|
.clearfix;
|
|
}
|
|
}
|
|
.checkbox-group {
|
|
padding-left: @base-indent / 2;
|
|
margin-bottom: @base-indent;
|
|
.custom-tumbler {
|
|
margin-top: -1px;
|
|
}
|
|
.help-block {
|
|
display: block;
|
|
max-width: auto;
|
|
margin-top: -4px;
|
|
margin-left: 28px;
|
|
}
|
|
}
|
|
.tooltip-icon {
|
|
.text-warning;
|
|
margin-left: 5px;
|
|
font-size: @base-font-size + 2px;
|
|
}
|
|
|
|
// custom control styles
|
|
.repos {
|
|
margin-bottom: @base-indent;
|
|
> .help-block {
|
|
margin: 0 0 @base-indent @base-indent * 0.5;
|
|
}
|
|
.form-inline {
|
|
margin-bottom: 15px;
|
|
position: relative;
|
|
.form-group {
|
|
label {float:none;}
|
|
}
|
|
}
|
|
.form-group {
|
|
margin: 0;
|
|
.help-block {
|
|
position: absolute;
|
|
bottom: 4px;
|
|
left: @default-input-width * 2.5 + @base-indent * 4 + 20px;
|
|
}
|
|
&.repo-uri .form-control {
|
|
@repo-uri-width: @default-input-width * 1.1;
|
|
width: @repo-uri-width;
|
|
max-width: @repo-uri-width;
|
|
}
|
|
&.repo-priority {
|
|
.form-control {
|
|
width: @default-input-width * 0.5;
|
|
}
|
|
.btn-link {
|
|
.base-btn-link-colors;
|
|
}
|
|
}
|
|
.form-control-static {
|
|
display: inline;
|
|
}
|
|
}
|
|
.buttons {
|
|
padding: 0 0 0 @base-indent * 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
// PAGES
|
|
|
|
.welcome-page {
|
|
@vertical-offset: 20px;
|
|
color: @base-text-color;
|
|
padding: 40px;
|
|
> div {
|
|
background-color: @white;
|
|
border-radius: 10px;
|
|
padding: 10px 30px 30px 30px;
|
|
box-sizing: border-box;
|
|
> div {text-align: center;}
|
|
h1 {margin-bottom: @vertical-offset + 10;}
|
|
.notice {
|
|
color:@gray;
|
|
font-size: @base-font-size - 2;
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
}
|
|
.register_installation {
|
|
width: 80%;
|
|
margin: 0 auto 30px auto;
|
|
}
|
|
.happy-cloud {
|
|
padding: 30px;
|
|
.cloud-smile {
|
|
width: 146px;
|
|
height: 108px;
|
|
background-image: url(../img/cloud-smile.png);
|
|
background-repeat: no-repeat;
|
|
margin: 0 auto;
|
|
+ div {
|
|
margin-top: @vertical-offset;
|
|
font-size: @base-font-size + 6;
|
|
}
|
|
}
|
|
span {color: @green - 30%;}
|
|
}
|
|
.welcome-checkbox-box {
|
|
text-align: center;
|
|
padding-top: @vertical-offset;
|
|
}
|
|
.welcome-button-box {
|
|
margin: @vertical-offset 0;
|
|
.btn-lg {
|
|
font-size: @base-font-size;
|
|
margin: 2px 0;
|
|
}
|
|
}
|
|
.register-trial {
|
|
padding: @vertical-offset 10px 4px 10px;
|
|
margin: 0 -30px 7px;
|
|
background-color: @light-blue;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tracking {
|
|
@vertical-offset: 20px;
|
|
.checkbox-group label, .form-group label {.font-semibold;}
|
|
.text-danger {
|
|
margin-bottom: 15px;
|
|
font-style: italic;
|
|
.glyphicon {margin-right: 10px;}
|
|
}
|
|
.help-block {font-style: italic;}
|
|
.statistics-disclaimer-box {
|
|
background-color: @gray + 100%;
|
|
border: 1px solid @gray + 84%;
|
|
overflow-y: auto;
|
|
padding: 20px;
|
|
margin-bottom: 16px;
|
|
text-align: left;
|
|
height: 300px;
|
|
max-height: 300px;
|
|
box-sizing: border-box;
|
|
p { margin-bottom: 10px; }
|
|
ul { margin-bottom: @vertical-offset; }
|
|
}
|
|
.connection-form {
|
|
width: 300px;
|
|
margin: 0 auto;
|
|
text-align: left;
|
|
.help-block {text-align: right;}
|
|
.links-container {
|
|
min-height: 20px;
|
|
margin: 15px 0 20px;
|
|
}
|
|
.btn-link {padding: 0;}
|
|
}
|
|
&.registration-form {
|
|
padding: 15px;
|
|
.form-inline {margin-left: 0;}
|
|
.form-inline div {padding: 0 7px 0 0;}
|
|
.form-group {
|
|
vertical-align: top;
|
|
input {width: 100%;}
|
|
select {width: 100%;}
|
|
}
|
|
.checkbox-group {margin-top: @vertical-offset + 10;}
|
|
}
|
|
}
|
|
|
|
.cluster-page {
|
|
.page-title {
|
|
.title-node-count {
|
|
color: @blue + 60%;
|
|
display: inline-block;
|
|
font-size: @base-font-size + 4;
|
|
left: 18px;
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
}
|
|
|
|
h4 {
|
|
.font-normal;
|
|
color: @base-text-color;
|
|
}
|
|
|
|
.subtab-item-enter {
|
|
max-height: 0px;
|
|
&.subtab-item-enter-active {
|
|
max-height: 60px;
|
|
transition: max-height 0.3s ease-in;
|
|
}
|
|
}
|
|
.subtab-item-leave {
|
|
max-height: 60px;
|
|
&.subtab-item-leave-active {
|
|
max-height: 0px;
|
|
transition: max-height 0.3s ease-in;
|
|
}
|
|
.subtab-item-leave-active {
|
|
max-height: 0px;
|
|
transition: max-height 0.3s ease-in;
|
|
}
|
|
}
|
|
|
|
.logs-tab {
|
|
.log-entries {
|
|
> thead > tr > th, > tbody > tr > th, > tfoot > tr > th, > thead > tr > td, > tbody > tr > td, > tfoot > tr > td {
|
|
border-top: 1px solid @gray + 98%;
|
|
}
|
|
tr {
|
|
th {
|
|
&.col-date {
|
|
width: 135px;
|
|
}
|
|
&.col-level {
|
|
min-width: 60px;
|
|
}
|
|
}
|
|
td {
|
|
&:first-child, &:nth-child(2) {
|
|
white-space: nowrap;
|
|
}
|
|
&:nth-child(3) {
|
|
font-family: monospace;
|
|
white-space: pre-wrap;
|
|
font-size: 90%;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
&.debug td {background-color: @light-green;}
|
|
&.info td {background-color: @pale-blue;}
|
|
&.notice td {background-color: @aquamarine;}
|
|
&.warning td {background-color: @light-yellow;}
|
|
&.error td {background-color: @light-red;}
|
|
&.critical td {background-color: @rose;}
|
|
&.alert td {background-color: @coral; color: @white;}
|
|
&.emerg td {background-color: @emergency-red; color: @white;}
|
|
}
|
|
tfoot td {
|
|
padding-bottom: 0;
|
|
> div {
|
|
height: 25px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
button.show-more-entries {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.actions-tab {
|
|
.action-item {
|
|
.panel {
|
|
background-color: @tab-color + 20%;
|
|
border: none;
|
|
.panel-heading {
|
|
background-color: @tab-color + 10%;
|
|
font-size: @base-font-size + 2px;
|
|
border-bottom: 1px dotted @white;
|
|
color: @base-text-color;
|
|
.font-semibold;
|
|
.text-emboss;
|
|
}
|
|
}
|
|
.action-body {
|
|
margin-bottom: 10px;
|
|
input, select {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
.action-item-description {
|
|
margin-bottom: 5px;
|
|
}
|
|
&.action-update {
|
|
> .panel {
|
|
min-height: 150px;
|
|
}
|
|
select {
|
|
width: 300px;
|
|
}
|
|
button {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.plugins-page {
|
|
h3 {
|
|
margin-top: 0;
|
|
}
|
|
.detail-title span {
|
|
color: @gray;
|
|
}
|
|
.plugin {
|
|
padding: 20px;
|
|
.plugin-link {
|
|
&:not(:last-child) {
|
|
margin-bottom: 5px;
|
|
}
|
|
a {
|
|
display: block;
|
|
}
|
|
}
|
|
.row:not(:last-child) {
|
|
margin-bottom: 5px;
|
|
}
|
|
&:nth-child(odd) {
|
|
background: @light-blue;
|
|
}
|
|
}
|
|
.plugin-page-links {
|
|
margin-top: 30px;
|
|
margin-bottom: 10px;
|
|
font-size: @base-font-size + 2;
|
|
}
|
|
}
|
|
|
|
.equipment-page {
|
|
.plugin-links-block {
|
|
@offset: 10px;
|
|
padding: @offset;
|
|
border: 1px solid #d3d3d3;
|
|
border-radius: 5px;
|
|
margin: 0 15px 15px;
|
|
.link-block {
|
|
padding: 0;
|
|
&:not(:last-child) {
|
|
margin-bottom: @offset;
|
|
}
|
|
.title {
|
|
margin-bottom: @offset / 2;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// TABS
|
|
|
|
.tabs-box {
|
|
@tab-height: 52px;
|
|
@tab-icon-size: 40px;
|
|
@tab-icons-sprite: "../img/tabs/tabs-icons-sprite.svg";
|
|
width: 100%;
|
|
height: @tab-height;
|
|
overflow: hidden;
|
|
.tabs {
|
|
width: 95%;
|
|
height: @tab-height;
|
|
overflow: hidden;
|
|
float: left;
|
|
.cluster-tab {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
width: 8.9%;
|
|
height: @tab-height;
|
|
background-color: @tab-color;
|
|
border-radius: 4px 4px 0 0;
|
|
border-bottom: 2px solid @base-dark-color;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: @base-font-size - 3;
|
|
float: left;
|
|
margin-right: 2px;
|
|
color: @base-text-color;
|
|
|
|
&:hover {
|
|
background-color: @tab-color-hover;
|
|
text-decoration: none;
|
|
}
|
|
&.active {
|
|
background-color: @tab-color-active;
|
|
border-bottom: 2px solid @tab-color-active;
|
|
&:hover {
|
|
background-color: @tab-color-active;
|
|
border-bottom: 2px solid @tab-color-active;
|
|
}
|
|
}
|
|
|
|
.label {
|
|
display: block;
|
|
text-align: center;
|
|
line-height: 1;
|
|
color: @base-text-color;
|
|
cursor: pointer;
|
|
font-size: @base-font-size - 3;
|
|
margin-top: -6px;
|
|
.font-semibold;
|
|
}
|
|
|
|
.icon {
|
|
width: @tab-icon-size;
|
|
height: @tab-icon-size;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.tab-icon-sprite-index(@index) {
|
|
.icon {
|
|
background: url(@tab-icons-sprite) no-repeat 0 -@tab-icon-size * @index;
|
|
}
|
|
&:hover, &.active {
|
|
.icon {
|
|
background: url(@tab-icons-sprite) no-repeat -@tab-icon-size -@tab-icon-size * @index;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.nodes {
|
|
.tab-icon-sprite-index(0);
|
|
}
|
|
&.network {
|
|
.tab-icon-sprite-index(1);
|
|
}
|
|
&.settings {
|
|
.tab-icon-sprite-index(2);
|
|
}
|
|
&.logs {
|
|
.tab-icon-sprite-index(3);
|
|
}
|
|
&.healthcheck {
|
|
.tab-icon-sprite-index(4);
|
|
}
|
|
&.actions {
|
|
.tab-icon-sprite-index(5);
|
|
}
|
|
&.vmware {
|
|
.tab-icon-sprite-index(6);
|
|
}
|
|
&.dashboard {
|
|
.tab-icon-sprite-index(8);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-scroller {
|
|
@tab-scroller-width: 28px;
|
|
@tab-scroller-height: 50px;
|
|
float: right;
|
|
width: 5%;
|
|
height: @tab-scroller-height;
|
|
overflow: hidden;
|
|
.arrow {
|
|
display: inline-block;
|
|
width: @tab-scroller-width;
|
|
height: @tab-scroller-height;
|
|
float: left;
|
|
opacity: 0.7;
|
|
background: url(../img/tabs/tab-arrow-left-icon.svg) no-repeat top left;
|
|
cursor: pointer;
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
&.disabled {
|
|
opacity: 0.3;
|
|
cursor: default;
|
|
}
|
|
&.left {
|
|
background: url(../img/tabs/tab-arrow-left-icon.svg) no-repeat top left;
|
|
}
|
|
&.right {
|
|
background: url(../img/tabs/tab-arrow-right-icon.svg) no-repeat top left;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-content {
|
|
border-radius: 0 8px 8px 8px;
|
|
}
|
|
|
|
.sticker label {
|
|
width: 100%;
|
|
}
|
|
|
|
.node-management-panel {
|
|
@management-panel-indent: 5px;
|
|
|
|
.tooltip-wrapper {
|
|
display: inline-block;
|
|
float: left;
|
|
}
|
|
|
|
.view-mode-switcher {
|
|
margin-right: @management-panel-indent * 3;
|
|
float: left;
|
|
.btn-group label {
|
|
width: auto;
|
|
font-size: @base-font-size;
|
|
}
|
|
}
|
|
|
|
.node-list-management-buttons {
|
|
margin-bottom: @management-panel-indent * 3;
|
|
button.btn {
|
|
margin-right: @management-panel-indent;
|
|
&.btn-labels {
|
|
margin-right: @management-panel-indent * 3;
|
|
}
|
|
}
|
|
.search {
|
|
min-width: 224px;
|
|
position: relative;
|
|
.form-group {
|
|
margin: 0;
|
|
}
|
|
input {
|
|
padding: 4px 24px 6px 10px;
|
|
font-size: @base-font-size - 1;
|
|
}
|
|
.btn-clear-search {
|
|
margin: 0;
|
|
padding: 6px 10px;
|
|
position: absolute;
|
|
right: -1px;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.view-mode-switcher .btn-group label, .node-list-management-buttons button {
|
|
padding: 7px 10px 3px;
|
|
}
|
|
|
|
.well {
|
|
margin-bottom: @management-panel-indent * 3;
|
|
.well-heading {
|
|
margin-bottom: @management-panel-indent;
|
|
.font-semibold;
|
|
.btn-link {
|
|
padding: 0;
|
|
}
|
|
}
|
|
.multiselect {
|
|
&:last-child .btn-link {
|
|
padding-left: @management-panel-indent;
|
|
}
|
|
}
|
|
.control-buttons {
|
|
float: none;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.help-block {
|
|
display: none;
|
|
}
|
|
|
|
.active-sorters-filters {
|
|
border-radius: @management-panel-indent;
|
|
/* .btn-default border color from Bootstrap */
|
|
border: 1px solid #ccc;
|
|
padding: @management-panel-indent * 2;
|
|
margin-bottom: @management-panel-indent * 3;
|
|
cursor: pointer;
|
|
&:hover {
|
|
/* .btn-default:hover background color from Bootstrap */
|
|
background: #e6e6e6;
|
|
}
|
|
.active-sorters, .active-filters {
|
|
position: relative;
|
|
> div {
|
|
padding-right: 40px;
|
|
> div {
|
|
margin-right: @management-panel-indent;
|
|
display: inline;
|
|
}
|
|
}
|
|
> strong {
|
|
padding-right: 0;
|
|
}
|
|
button {
|
|
padding: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
right: @management-panel-indent * 3;
|
|
}
|
|
}
|
|
.active-filters + .active-sorters {
|
|
margin-top: @management-panel-indent * 2;
|
|
}
|
|
}
|
|
|
|
.form-group:not(.checkbox-group) label {
|
|
width: 60px;
|
|
margin: 8px 5px 0 0;
|
|
float: left;
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.control-buttons-box {
|
|
margin-bottom: @management-panel-indent * 3;
|
|
overflow: hidden;
|
|
padding-left: 0;
|
|
.btn-group {
|
|
button {
|
|
padding: 6px 10px;
|
|
.glyphicon {
|
|
margin-right: @management-panel-indent;
|
|
}
|
|
}
|
|
&:not(:first-child) button:first-child {
|
|
margin-left: @management-panel-indent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.filter-group {
|
|
margin-bottom: @management-panel-indent;
|
|
&:first-child {
|
|
margin-top: @management-panel-indent * 2;
|
|
}
|
|
&:last-child {
|
|
margin-bottom: @management-panel-indent * 3;
|
|
position: relative;
|
|
}
|
|
.form-group {
|
|
margin-right: @management-panel-indent;
|
|
}
|
|
.glyphicon {
|
|
margin-right: @management-panel-indent;
|
|
&.glyphicon-plus-sign {
|
|
position: relative;
|
|
top: 7px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sorter-control, .filter-control {
|
|
margin-right: @management-panel-indent;
|
|
.glyphicon {
|
|
padding-left: @management-panel-indent;
|
|
}
|
|
}
|
|
.sorters {
|
|
.form-control {
|
|
width: auto;
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
.labels {
|
|
p {
|
|
color: @base-text-color + 50%;
|
|
& + div {
|
|
margin-top: @management-panel-indent * 3;
|
|
}
|
|
strong {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
.forms-box {
|
|
margin-top: @management-panel-indent * 3;
|
|
margin-bottom: 0;
|
|
.checkbox-group {
|
|
padding: 0;
|
|
margin: 0;
|
|
position: relative;
|
|
top: 7px;
|
|
width: 25px;
|
|
}
|
|
> div + .btn-add-label {
|
|
margin-top: @management-panel-indent;
|
|
margin-left: 35px;
|
|
}
|
|
.form-group {
|
|
@label-input-margin: 15px;
|
|
margin-bottom: @management-panel-indent;
|
|
padding-right: 0;
|
|
position: relative;
|
|
label {
|
|
width: auto;
|
|
padding: 0;
|
|
padding-left: 13px;
|
|
margin: 0 0 3px;
|
|
.font-semibold;
|
|
}
|
|
&.has-warning {
|
|
label .glyphicon {
|
|
position: absolute;
|
|
left: @default-input-width + @label-input-margin;
|
|
top: 12px;
|
|
}
|
|
.form-control {
|
|
border-color: @orange;
|
|
}
|
|
}
|
|
&.label-key-control .help-block {
|
|
display: block;
|
|
margin: 0;
|
|
position: absolute;
|
|
left: @default-input-width * 2 + @label-input-margin * 2;
|
|
bottom: 8px;
|
|
min-width: 475px;
|
|
}
|
|
}
|
|
.has-label {
|
|
.checkbox-group {
|
|
top: 31px;
|
|
}
|
|
.has-warning label .glyphicon {
|
|
top: 32px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.multiselect, .number-range {
|
|
.popover {
|
|
display: block;
|
|
width: 220px;
|
|
top: 25px;
|
|
.arrow {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.multiselect {
|
|
.popover-content {
|
|
overflow-y: auto;
|
|
max-height: 450px;
|
|
> div {
|
|
padding: 0 5px;
|
|
.custom-tumbler + span {
|
|
cursor: pointer;
|
|
position: relative;
|
|
top: 3px;
|
|
max-width: 140px;
|
|
display: inline-block;
|
|
.break-word;
|
|
}
|
|
label {
|
|
.font-normal;
|
|
font-size: @base-font-size - 2;
|
|
}
|
|
}
|
|
.divider {
|
|
border-bottom: 1px solid @gray + 80%;
|
|
margin: 8px 0 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.number-range {
|
|
.popover {
|
|
span {
|
|
padding-top: 6px;
|
|
display: inline-block;
|
|
margin: 0 5px;
|
|
}
|
|
.form-group {
|
|
float: left;
|
|
.form-control {
|
|
width: 76px;
|
|
margin: 0;
|
|
}
|
|
.help-block {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// NODE LIST
|
|
|
|
.node-list {
|
|
|
|
.select-all {
|
|
label {
|
|
display: inline-block;
|
|
position: relative;
|
|
top: 1px;
|
|
.font-normal;
|
|
}
|
|
}
|
|
.node-list-header .select-all {
|
|
margin: 0 21px 8px 7px;
|
|
}
|
|
|
|
.nodes-group {
|
|
.node-progress() {
|
|
.progress {
|
|
position: relative;
|
|
background-color: @base-node-color - 70%;
|
|
.progress-bar-title {
|
|
position: absolute;
|
|
width: 100%;
|
|
line-height: 16px;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
color: @white;
|
|
margin-top: 2px;
|
|
text-transform: uppercase;
|
|
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
|
|
span {padding: 0;}
|
|
}
|
|
}
|
|
}
|
|
|
|
@node-indent: 20px;
|
|
@node-height: 58px;
|
|
@node-inner-height: @node-height - 6;
|
|
@node-border-radius: 4px;
|
|
@node-button-size: 40px;
|
|
|
|
border: 1px solid @gray + 80%;
|
|
border-radius: @node-border-radius;
|
|
padding: @node-indent;
|
|
padding-bottom: 10px;
|
|
margin-bottom: @node-indent;
|
|
box-sizing: border-box;
|
|
|
|
> .row:not(.node-group-header) {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
h4 {
|
|
margin: 0 0 @node-indent 0;
|
|
}
|
|
|
|
.node {
|
|
height: @node-height;
|
|
margin-bottom: 8px;
|
|
overflow: visible;
|
|
padding: 2px 2px 0;
|
|
font-size: @base-font-size - 2;
|
|
border: 1px solid @base-node-border;
|
|
border-radius: @node-border-radius;
|
|
box-shadow: inset 0 0 0 1px @white;
|
|
background-color: @base-node-color;
|
|
box-sizing: border-box;
|
|
|
|
&.discover {
|
|
background-color: @node-color-discover;
|
|
border-color: @node-border-color-discover;
|
|
&:hover {
|
|
background-color: @node-color-discover-hover;
|
|
}
|
|
}
|
|
&.error {
|
|
background-color: @node-color-error;
|
|
border-color: @node-border-color-error;
|
|
&:hover {
|
|
background-color: @node-color-error + 5%;
|
|
}
|
|
}
|
|
&.pending_addition {
|
|
background-color: @node-color-pending_addition;
|
|
border-color: @node-border-color-pending_addition;
|
|
&:hover {
|
|
background-color: @node-color-pending_addition + 10%;
|
|
}
|
|
}
|
|
&.pending_deletion {
|
|
background-color: @node-color-pending_deletion;
|
|
border-color: @node-border-color-pending_deletion;
|
|
}
|
|
&.offline {
|
|
background-color: @node-color-offline + 10%;
|
|
border-color: @node-border-color-offline + 10%;
|
|
.node-name, .node-status, .node-settings {opacity: .7;}
|
|
&:hover {
|
|
background-color: @node-color-offline + 20%;
|
|
}
|
|
}
|
|
&.selected {
|
|
background-color: @node-color-selected;
|
|
border-color: @node-border-color-selected;
|
|
box-shadow: inset 0 0 0 0px #c3c5c7;
|
|
&.error {
|
|
border-color: @node-border-color-error;
|
|
}
|
|
&.pending_addition {
|
|
border-color: @node-border-color-pending_addition;
|
|
}
|
|
&.pending_deletion {
|
|
border-color: @node-border-color-pending_deletion;
|
|
}
|
|
&:hover {
|
|
background-color: @node-color-selected + 10%;
|
|
}
|
|
}
|
|
|
|
.node-box {
|
|
display: block;
|
|
font-weight: 100;
|
|
cursor: pointer;
|
|
margin-bottom: 0;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
> div {
|
|
float: left;
|
|
height: @node-inner-height;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
> div {
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.checkbox-group {
|
|
width: @node-inner-height;
|
|
border-right: 1px dotted @base-node-color - 60%;
|
|
.custom-tumbler {
|
|
margin: 15px 14px 14px;
|
|
}
|
|
}
|
|
|
|
.node-name {
|
|
width: 30%;
|
|
.name {
|
|
height: 31px;
|
|
padding-top: 8px;
|
|
.form-group {
|
|
label {
|
|
display: none;
|
|
}
|
|
input {
|
|
width: 80%;
|
|
}
|
|
}
|
|
}
|
|
p {
|
|
display: inline;
|
|
line-height: 1px;
|
|
border-bottom: 1px dotted @base-text-color + #444444;
|
|
font-size: @base-font-size + 1;
|
|
.text-emboss;
|
|
.font-semibold;
|
|
&:hover {
|
|
color: @link-color-hover;
|
|
border-bottom-color: @link-color-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.node-action {
|
|
width: @node-button-size * 2;
|
|
margin-top: 9px;
|
|
.icon {
|
|
display: inline-block;
|
|
height: @node-button-size;
|
|
width: @node-button-size;
|
|
background: url(@common-icons-sprite) no-repeat -@node-button-size -@node-button-size;
|
|
opacity: .6;
|
|
margin-top: -2px;
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
&.icon-logs {
|
|
background: url(@common-icons-sprite) no-repeat 0 -@node-button-size*5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.node-text-mixin {
|
|
padding: 18px 0;
|
|
font-size: @base-font-size - 3;
|
|
}
|
|
|
|
.node-status {
|
|
width: 22%;
|
|
text-align: center;
|
|
.font-semibold;
|
|
.node-text-mixin;
|
|
span {
|
|
display: inline-block;
|
|
text-transform: uppercase;
|
|
}
|
|
.node-remove-button {
|
|
font-size: @base-font-size - 2;
|
|
margin-left: 5px;
|
|
margin-bottom: 3px;
|
|
padding: 0 5px;
|
|
}
|
|
.node-progress;
|
|
}
|
|
|
|
.node-hardware {
|
|
text-align: right;
|
|
float: none;
|
|
margin-right: @node-button-size;
|
|
.font-normal;
|
|
.node-text-mixin;
|
|
> span {
|
|
padding-left: 5px;
|
|
}
|
|
}
|
|
|
|
.node-settings {
|
|
width: @node-button-size;
|
|
height: @node-button-size;
|
|
margin-top: 7px;
|
|
float: none;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
background: url(@common-icons-sprite) no-repeat 0 0;
|
|
&:hover {
|
|
background: url(@common-icons-sprite) no-repeat -@node-button-size 0;
|
|
}
|
|
}
|
|
|
|
.node-labels {
|
|
width: @node-button-size;
|
|
padding-top: 15px;
|
|
position: relative;
|
|
overflow: visible;
|
|
.node-labels-popover {
|
|
display: block;
|
|
overflow: visible;
|
|
top: 35px;
|
|
left: -14px;
|
|
width: 150px;
|
|
word-break: break-all;
|
|
.arrow {
|
|
left: 22px;
|
|
}
|
|
.popover-content {padding-right: 8px;}
|
|
ul {
|
|
width: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
.btn-link {
|
|
padding: 0;
|
|
color: @blue;
|
|
font-size: @base-font-size - 2;
|
|
&:hover, &:focus {
|
|
text-decoration: none;
|
|
}
|
|
.font-normal;
|
|
span {
|
|
position: relative;
|
|
top: -2px;
|
|
left: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* override node styles for compact panel */
|
|
.compact-node {
|
|
@compact-node-indent: 5px;
|
|
width: 20%;
|
|
float: left;
|
|
position: relative;
|
|
padding: 0;
|
|
padding-right: @compact-node-indent + 3;
|
|
|
|
.unavailable .node-box {
|
|
cursor: default;
|
|
}
|
|
|
|
.node {
|
|
height: @node-height * 1.25;
|
|
|
|
.node-box > div {
|
|
float: none;
|
|
}
|
|
|
|
.node-name{
|
|
height: 18px;
|
|
word-break: break-all;
|
|
p {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.node-box-inner {
|
|
height: @node-height * 0.75;
|
|
padding: @compact-node-indent;
|
|
.node-name {
|
|
width: auto;
|
|
p:hover {
|
|
color: @base-text-color;
|
|
}
|
|
}
|
|
.node-status {
|
|
width: auto;
|
|
padding: 0;
|
|
text-align: left;
|
|
.progress {
|
|
margin: 2px 0;
|
|
height: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.node-checkbox {
|
|
float: left;
|
|
height: 100%;
|
|
width: 23px;
|
|
i.glyphicon {
|
|
font-size: @base-font-size + 4;
|
|
}
|
|
}
|
|
|
|
.node-hardware {
|
|
@node-hardware-height: 25px;
|
|
height: @node-hardware-height;
|
|
padding: 0;
|
|
margin: 0;
|
|
text-align: center;
|
|
border-top: 1px dashed @gray + 40%;
|
|
overflow: hidden;
|
|
.font-semibold;
|
|
p {
|
|
margin: 0;
|
|
padding: 4px 0;
|
|
display: block;
|
|
transition: all 0.3s ease-out;
|
|
&.btn-link {
|
|
font-size: @base-font-size - 2;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
&:hover {
|
|
transition: all 0.3s ease-out;
|
|
/* toggle More Info label */
|
|
p:not(.btn-link) {
|
|
margin-top: -@node-hardware-height;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* lighten compact node panel color on hover */
|
|
&:not(.unavailable) {
|
|
.lighten-node-panel(@color) {
|
|
&, & + .node-hardware {
|
|
background-color: @color + 10%;
|
|
}
|
|
}
|
|
|
|
& .node-box-inner:hover {
|
|
.lighten-node-panel(@base-node-color)
|
|
}
|
|
&.discover .node-box-inner:hover {
|
|
.lighten-node-panel(@node-color-discover-hover)
|
|
}
|
|
&.error .node-box-inner:hover {
|
|
.lighten-node-panel(@node-color-error)
|
|
}
|
|
&.pending_addition .node-box-inner:hover {
|
|
.lighten-node-panel(@node-color-pending_addition)
|
|
}
|
|
&.offline .node-box-inner:hover {
|
|
.lighten-node-panel(@node-color-offline)
|
|
}
|
|
&.selected .node-box-inner:hover {
|
|
.lighten-node-panel(@node-color-selected)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.node-popover {
|
|
top: -@node-height;
|
|
left: -25%;
|
|
background: @base-node-color + 15%;
|
|
border-radius: @node-border-radius;
|
|
width: 150%;
|
|
max-width: none;
|
|
display: block;
|
|
font-family: @open-sans-font;
|
|
animation-name: bounceIn;
|
|
animation-duration: 0.2s;
|
|
animation-fill-mode: both;
|
|
animation-timing-function: linear;
|
|
.arrow, .help-block {
|
|
display: none;
|
|
}
|
|
|
|
.popover-content {
|
|
padding: 0;
|
|
> div > div {
|
|
padding: @compact-node-indent * 2;
|
|
border-bottom: 1px dashed @gray + 40%;
|
|
&:last-child {
|
|
border: none;
|
|
}
|
|
&.hardware-info {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
.node-progress;
|
|
}
|
|
|
|
.node-name {
|
|
.font-bold;
|
|
.checkbox-group {
|
|
label {
|
|
margin: 0;
|
|
}
|
|
}
|
|
.name {
|
|
width: 90%;
|
|
.break-word;
|
|
label {
|
|
display: none;
|
|
margin: 0;
|
|
}
|
|
.form-group {
|
|
position: relative;
|
|
top: 1px;
|
|
margin: 0;
|
|
}
|
|
p {
|
|
border-bottom: 1px dotted @base-text-color + #444444;
|
|
cursor: pointer;
|
|
display: inline;
|
|
&:hover {
|
|
color: @link-color-hover;
|
|
border-bottom-color: @link-color-hover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.role-list {
|
|
li {
|
|
color: @base-text-color;
|
|
}
|
|
}
|
|
|
|
.hardware-info {
|
|
.manufacturer-logo {
|
|
height: 50px;
|
|
float: left;
|
|
}
|
|
.node-hardware {
|
|
float: left;
|
|
font-size: @base-font-size - 2;
|
|
padding: 17px 0 0;
|
|
.font-semibold;
|
|
color: @base-text-color + 50%;
|
|
> span {
|
|
margin-right: @compact-node-indent * 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.node-stats {
|
|
@node-icon-width: 20px;
|
|
.font-semibold;
|
|
.glyphicon {
|
|
width: @node-icon-width;
|
|
top: 3px;
|
|
left: 0px;
|
|
vertical-align: top;
|
|
+ div {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
.role-list {
|
|
font-size: @base-font-size - 4;
|
|
margin-bottom: @compact-node-indent * 2;
|
|
margin-left: 24px;
|
|
.text-emboss;
|
|
ul {
|
|
margin: 0;
|
|
width: 92%;
|
|
padding-top: 5px;
|
|
}
|
|
}
|
|
.node-status {
|
|
text-transform: uppercase;
|
|
font-size: @base-font-size - 4;
|
|
margin-left: 24px;
|
|
div {
|
|
width: 92%;
|
|
}
|
|
span {
|
|
padding-right: @compact-node-indent;
|
|
display: inline-block;
|
|
padding-top: 2px;
|
|
}
|
|
.node-buttons {
|
|
margin: @compact-node-indent 0;
|
|
.btn {
|
|
padding: 3px 5px;
|
|
margin: 0 2px 2px;
|
|
margin-left: 0;
|
|
color: @white;
|
|
.font-bold;
|
|
.text-shadow;
|
|
font-size: @base-font-size - 4;
|
|
background: @blue;
|
|
line-height: 1;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
}
|
|
.progress {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.node-name-input {
|
|
height: 20px;
|
|
font-size: @base-font-size - 2;
|
|
padding: 0 4px;
|
|
border-radius: 3px;
|
|
.font-normal;
|
|
}
|
|
|
|
.manufacturer-logo {
|
|
width: @node-inner-height;
|
|
|
|
.node-logo(@manufacturer) {
|
|
background: url("../img/logos/@{manufacturer}-logo.svg") no-repeat top left;
|
|
}
|
|
&.cisco {.node-logo(cisco);}
|
|
&.vbox {.node-logo(vbox);}
|
|
&.vmware {.node-logo(vmware);}
|
|
&.hp {.node-logo(hp);}
|
|
&.xen {.node-logo(xen);}
|
|
&.openvz {.node-logo(openvz);}
|
|
&.kvm {.node-logo(kvm);}
|
|
&.supermicro {.node-logo(supermicro);}
|
|
&.qemu {.node-logo(qemu);}
|
|
}
|
|
|
|
.role-list {
|
|
font-size: @base-font-size - 4;
|
|
text-transform: uppercase;
|
|
line-height: 10px;
|
|
color: @gray;
|
|
.font-semibold;
|
|
ul {
|
|
padding: 0;
|
|
display: inline-block;
|
|
li {
|
|
display: inline-block;
|
|
margin-right: 4px;
|
|
&:after {
|
|
content: "·";
|
|
margin-left: 3px;
|
|
color: @gray;
|
|
}
|
|
&:last-child:after {
|
|
content: "";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.node-labels {
|
|
text-align: left;
|
|
margin-left: 15px;
|
|
margin-bottom: 5px;
|
|
font-size: @base-font-size - 4;
|
|
ul {
|
|
padding: 0px;
|
|
margin-bottom: 5px;
|
|
display: inline-block;
|
|
width: 92%;
|
|
}
|
|
.glyphicon {
|
|
font-size: @base-font-size - 2;
|
|
}
|
|
.label {
|
|
border-radius: 5px;
|
|
text-transform: uppercase;
|
|
display: inline-block;
|
|
background-color: #d2d5d6;
|
|
font-size: @base-font-size - 4;
|
|
.font-semibold;
|
|
color: @base-text-color;
|
|
font-family: @open-sans-font;
|
|
padding: 4px 6px;
|
|
margin: 0 3px 2px 0;
|
|
white-space: normal;
|
|
text-align: left;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.compact .nodes-group {
|
|
> .row:not(.node-group-header) {
|
|
margin-right: -8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.well .form-group {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// CLUSTERS PAGE
|
|
|
|
.login-page {
|
|
@login-indent: 20px;
|
|
@logo-circle-size: 160px;
|
|
.container {
|
|
margin-top: @logo-circle-size / 2;
|
|
.box {
|
|
position: relative;
|
|
background-color: @white;
|
|
color: @base-text-color;
|
|
border-radius: 18px;
|
|
margin-top: 10%;
|
|
box-shadow: 0 1px 1px @shadow-color;
|
|
.logo-circle {
|
|
background-color: @white;
|
|
position: relative;
|
|
width: @logo-circle-size;
|
|
height: @logo-circle-size;
|
|
top: -@logo-circle-size / 2;
|
|
border-radius: @logo-circle-size / 2;
|
|
margin: 0 auto;
|
|
}
|
|
.logo {
|
|
@logo-width: 200px;
|
|
@logo-height: 260px;
|
|
background: url(../img/fuel-big-logo.svg) repeat scroll 0 0 rgba(0, 0, 0, 0);
|
|
position: relative;
|
|
top: -@logo-height + @login-indent;
|
|
width: @logo-width;
|
|
height: @logo-height;
|
|
margin: 0 auto -(@logo-height - 40px) auto;
|
|
}
|
|
.fields-box {
|
|
overflow: hidden;
|
|
padding-top: 10px;
|
|
form {
|
|
label {
|
|
font-size: @base-font-size + 1;
|
|
padding-top: 6px;
|
|
padding-right: 0;
|
|
text-align: right;
|
|
.glyphicon {
|
|
color: @gray;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.login-error, .http-warning {
|
|
text-align: center;
|
|
margin-bottom: 15px;
|
|
font-size: @base-font-size - 1;
|
|
}
|
|
|
|
.http-warning {
|
|
.text-warning;
|
|
.glyphicon {
|
|
margin-right: 3px;
|
|
vertical-align: text-top;
|
|
}
|
|
}
|
|
|
|
.login-error {
|
|
.text-danger;
|
|
}
|
|
|
|
.login-btn {
|
|
margin-bottom: 5px;
|
|
padding-left: @login-indent;
|
|
padding-right: @login-indent;
|
|
}
|
|
|
|
.footer {
|
|
margin-top: @login-indent;
|
|
font-size: 12px;
|
|
color: @base-dark-color + 60%;
|
|
}
|
|
}
|
|
|
|
.clusters-page {
|
|
.clusterbox {
|
|
display: block;
|
|
width: 100%;
|
|
height: 192px;
|
|
background-color: @white;
|
|
/* height: 200px; */
|
|
border-radius: 6px;
|
|
margin-bottom: 30px;
|
|
padding: 16px;
|
|
text-decoration: none;
|
|
box-sizing: border-box;
|
|
&:hover {
|
|
background-color: @base-node-color;
|
|
text-decoration: none;
|
|
.name {
|
|
color: @blue;
|
|
}
|
|
}
|
|
.name {
|
|
font-size: @base-font-size + 3;
|
|
.font-semibold;
|
|
text-decoration: none;
|
|
height: 42px;
|
|
overflow: hidden;
|
|
color: #525960;
|
|
line-height: 20px;
|
|
word-break: break-all;
|
|
}
|
|
.tech-info {
|
|
height: 80px;
|
|
font-size: @base-font-size - 1;
|
|
color: @gray;
|
|
margin: 10px 0px 8px 0px;
|
|
overflow: hidden;
|
|
.item {
|
|
width: 70%;
|
|
float: left;
|
|
&:after {
|
|
content: ":";
|
|
}
|
|
}
|
|
.value {
|
|
width: 30%;
|
|
float: left;
|
|
text-align: right;
|
|
}
|
|
}
|
|
.status {
|
|
clear: both;
|
|
border-top: 1px dotted @gray;
|
|
text-align: center;
|
|
height: 20px;
|
|
padding-top: 6px;
|
|
box-sizing: border-box;
|
|
.font-semibold;
|
|
}
|
|
&.cluster-disabled,
|
|
&.cluster-disabled:hover,
|
|
&.cluster-disabled > .name,
|
|
&.cluster-disabled > .tech-info,
|
|
&.cluster-disabled > .status {
|
|
background-color: #78818a;
|
|
cursor: default;
|
|
color: @base-dark-color !important;
|
|
text-decoration: none !important;
|
|
}
|
|
}
|
|
|
|
.create-cluster {
|
|
display: block;
|
|
width: 100%;
|
|
height: 192px;
|
|
border-radius: 6px;
|
|
margin-bottom: 30px;
|
|
padding: 16px;
|
|
text-decoration: none;
|
|
background: url(../img/icons/new-environment.svg) no-repeat center 20px;
|
|
text-align: center;
|
|
color: @blue;
|
|
text-decoration: none;
|
|
box-sizing: border-box;
|
|
.font-bold;
|
|
&:hover {
|
|
background: @white url(../img/icons/new-environment.svg) no-repeat center 20px;
|
|
text-decoration: none;
|
|
color: @blue;
|
|
}
|
|
span {
|
|
display: block;
|
|
margin-top: 132px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.support-page {
|
|
.support-box {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
&:after {
|
|
clear: both;
|
|
display: table;
|
|
content: " ";
|
|
}
|
|
}
|
|
.support-box-cover {
|
|
display: block;
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 60px;
|
|
border: 3px solid #e0e0e0;
|
|
float: left;
|
|
box-sizing: border-box;
|
|
|
|
@support-icon-background-color: #4e85aa;
|
|
background: @support-icon-background-color;
|
|
.support-icon-sprite-index(@index) {
|
|
background: @support-icon-background-color url(../img/icons/support-images.svg) no-repeat 0 -120px * @index;
|
|
}
|
|
&.img-register-fuel {
|
|
.support-icon-sprite-index(0);
|
|
}
|
|
&.img-statistics {
|
|
.support-icon-sprite-index(1);
|
|
}
|
|
&.img-contact-support {
|
|
.support-icon-sprite-index(2);
|
|
}
|
|
&.img-documentation-link {
|
|
.support-icon-sprite-index(3);
|
|
}
|
|
&.img-download-logs {
|
|
.support-icon-sprite-index(4);
|
|
}
|
|
&.img-audit-logs {
|
|
.support-icon-sprite-index(5);
|
|
}
|
|
|
|
}
|
|
.support-box-content {
|
|
width: 100%;
|
|
margin-left: -140px;
|
|
padding-left: 140px;
|
|
display: block;
|
|
float: right;
|
|
box-sizing: border-box;
|
|
> h3 {
|
|
margin-top: 0px;
|
|
}
|
|
> div {margin-bottom: 15px;}
|
|
.snapshot button {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.connection-form {margin: 0;}
|
|
.statistics-text-box button {
|
|
padding: 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.capacity-page {
|
|
.table {
|
|
table-layout: fixed;
|
|
}
|
|
}
|
|
|
|
.notifications-page {
|
|
.notification-group {
|
|
&:not(:last-child) {
|
|
margin-bottom: 30px;
|
|
}
|
|
.notification {
|
|
cursor: default;
|
|
&.unread {
|
|
.font-semibold;
|
|
cursor: pointer;
|
|
}
|
|
> div {
|
|
display: block;
|
|
float: left;
|
|
&.notification-time {
|
|
width: 6%;
|
|
}
|
|
&.notification-type {
|
|
width: 3%;
|
|
.glyphicon {
|
|
margin: 2px 0px;
|
|
}
|
|
}
|
|
&.notification-message {
|
|
width: 91%;
|
|
.btn-link {
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ANIMATIONS
|
|
|
|
@keyframes fade-cloud {
|
|
0% { opacity: 0; }
|
|
50% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
|
|
.animate-spin {
|
|
animation-name: spin;
|
|
animation-duration: 4000ms;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform:rotate(0deg);
|
|
}
|
|
to {
|
|
transform:rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(.3);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
|
|
.role-panel {
|
|
.checkbox-group {
|
|
label {
|
|
width: 100%;
|
|
margin-bottom: 2px;
|
|
padding-top: 2px;
|
|
color: @base-text-color;
|
|
cursor: pointer;
|
|
.custom-tumbler {
|
|
top: -1px;
|
|
}
|
|
.glyphicon {
|
|
.text-warning;
|
|
position: relative;
|
|
top: -5px;
|
|
left: 5px;
|
|
}
|
|
}
|
|
&.disabled {
|
|
label {
|
|
cursor: default;
|
|
color: @gray;
|
|
}
|
|
}
|
|
.help-block {
|
|
color: @gray;
|
|
font-size: @base-font-size - 2;
|
|
margin-left: 28px;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// wizard styles
|
|
.wizard {
|
|
.modal-dialog {
|
|
width: 840px;
|
|
height: 560px;
|
|
color: @base-text-color;
|
|
.modal-body {
|
|
padding: 0px;
|
|
}
|
|
label {
|
|
.font-semibold;
|
|
}
|
|
h5 {
|
|
margin-bottom: 20px;
|
|
}
|
|
.forms-box {
|
|
margin-bottom: 0px;
|
|
.name-and-release {
|
|
.alert {
|
|
margin-left: 5px;
|
|
margin-right: 10px;
|
|
}
|
|
.release-description {
|
|
margin-left: 5px;
|
|
}
|
|
.help-block {
|
|
padding-left: 25%;
|
|
marging-right: 0;
|
|
}
|
|
.form-group {
|
|
label {
|
|
width: 25%;
|
|
text-align: right;
|
|
}
|
|
input, select {
|
|
max-width: 75%;
|
|
width: 75%;
|
|
}
|
|
&.has-error {
|
|
.help-block {
|
|
padding-left: 120px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.forms-box .form-group {
|
|
label {
|
|
width: 100%;
|
|
}
|
|
.help-block {
|
|
max-width: 95%;
|
|
width: 95%;
|
|
padding-top: 3px;
|
|
padding-bottom: 6px;
|
|
}
|
|
}
|
|
.wizard-body {
|
|
@wizard-body-height: 364px;
|
|
@wizard-body-padding: 15px;
|
|
height: @wizard-body-height;
|
|
padding: @wizard-body-padding;
|
|
padding-top: 0;
|
|
.wizard-steps-box {
|
|
height: @wizard-body-height - @wizard-body-padding;
|
|
overflow: auto;
|
|
.form-group {
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
.wizard-steps-nav {
|
|
margin-top: @wizard-body-padding;
|
|
padding-left: 0;
|
|
li {
|
|
cursor: pointer;
|
|
}
|
|
.wizard-step {
|
|
&.available {
|
|
a {
|
|
color: @base-text-color;
|
|
font-weight: 600;
|
|
&:hover {
|
|
color: @white;
|
|
background-color: @base-light-color;
|
|
}
|
|
}
|
|
}
|
|
&.active {
|
|
font-weight: 600;
|
|
a {
|
|
background-color: @navbar-color;
|
|
color: @white;
|
|
}
|
|
&.disabled {
|
|
font-weight: 100;
|
|
color: @base-light-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.pane-content {
|
|
margin-top: @wizard-body-padding;
|
|
padding-top: 6px;
|
|
}
|
|
h4 {
|
|
margin-top: 0px;
|
|
margin-bottom: 12px;
|
|
font-size: @base-font-size + 3px;
|
|
.font-semibold;
|
|
}
|
|
.pane-progress-bar {
|
|
padding: 100px 50px;
|
|
}
|
|
}
|
|
.ml2 {
|
|
margin-left: 40px;
|
|
}
|
|
}
|
|
}
|
|
label.parameter-box {
|
|
cursor: pointer;
|
|
padding-left: 0;
|
|
margin-top: 5px;
|
|
.parameter-name {
|
|
padding-top: 2px;
|
|
.font-semibold;
|
|
}
|
|
}
|
|
.alert {
|
|
margin: 0 0 10px 0;
|
|
padding: 7px;
|
|
line-height: 14px;
|
|
font-size: @base-font-size - 2;
|
|
}
|
|
.pane-content > div > .alert {
|
|
margin-top: 0;
|
|
}
|
|
.wizard-storage-pane > .row:first-child {
|
|
margin-bottom: 20px;
|
|
}
|
|
.control-label {
|
|
padding-left: 0;
|
|
.font-semibold;
|
|
}
|
|
.has-error {
|
|
.release-description,
|
|
.mode-description,
|
|
.modal-parameter-description,
|
|
.help-block {
|
|
color: @red;
|
|
}
|
|
}
|
|
.network-pane-description {
|
|
font-size: @base-font-size - 2;
|
|
margin-bottom: 10px;
|
|
}
|
|
.release-description,
|
|
.mode-description,
|
|
.modal-parameter-description,
|
|
.help-block {
|
|
font-size: @base-font-size - 2;
|
|
color: @gray;
|
|
line-height: 14px;
|
|
}
|
|
.checkbox-group {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.modal {
|
|
color: @base-text-color;
|
|
.modal-dialog {margin-top: 6%;}
|
|
.modal-title {
|
|
font-size: @base-font-size + 6px;
|
|
max-width: 96%; /* not to overlay close button */
|
|
.font-normal;
|
|
.break-word;
|
|
}
|
|
.modal-body {
|
|
span.label {
|
|
margin-right: 5px;
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
}
|
|
.modal-footer {
|
|
.btn-group {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
&.always-show-scrollbar {
|
|
overflow-y: scroll;
|
|
}
|
|
}
|
|
|
|
.display-changes-dialog {
|
|
hr {
|
|
margin: 8px 0 12px 0;
|
|
}
|
|
.glyphicon {
|
|
margin-right: 5px;
|
|
}
|
|
.text-warning {
|
|
color: @base-text-color;
|
|
margin-bottom: 15px;
|
|
}
|
|
.instruction {
|
|
display: inline;
|
|
}
|
|
.confirmation-question {
|
|
text-align: center;
|
|
color: @base-text-color;
|
|
.font-semibold;
|
|
}
|
|
}
|
|
|
|
.change-password {
|
|
.form-group .help-block {
|
|
margin: 3px 0 0 @default-label-width;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.nailgun-unavailability-dialog {
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.node-details-popup {
|
|
.node-summary {
|
|
.break-word;
|
|
}
|
|
.node-image-outline {
|
|
width: 200px;
|
|
height: 58px;
|
|
margin-top: 10px;
|
|
background: url("../img/node-image.svg") no-repeat 0 0 transparent;
|
|
}
|
|
.change-hostname {
|
|
button.glyphicon-pencil {
|
|
margin-left: 5px;
|
|
text-decoration: none;
|
|
font-size: @base-font-size - 2;
|
|
}
|
|
.form-group {
|
|
margin: 0;
|
|
label {display: none;}
|
|
.help-block {
|
|
.break-word;
|
|
margin-bottom: 0;
|
|
font-size: @base-font-size - 2;
|
|
}
|
|
}
|
|
}
|
|
.panel-group {
|
|
margin-top: 10px;
|
|
font-size: @base-font-size - 2;
|
|
.panel-heading {
|
|
cursor: pointer;
|
|
}
|
|
.panel-title {
|
|
font-size: @base-font-size;
|
|
}
|
|
.node-details-row label {
|
|
text-transform: uppercase;
|
|
width: 150px;
|
|
word-break: break-all;
|
|
.font-normal;
|
|
margin: 0;
|
|
}
|
|
.nested-object {
|
|
border: 1px solid @gray + 80%;
|
|
border-radius: 3px;
|
|
margin-top: 3px;
|
|
padding: 4px;
|
|
position: relative;
|
|
left: -5px;
|
|
}
|
|
.vms-config {
|
|
label {
|
|
.font-normal;
|
|
}
|
|
textarea {
|
|
min-height: 120px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Disks styles
|
|
.disk-box {
|
|
margin-bottom: 20px;
|
|
@colors: disk-green, disk-blue, disk-orange, disk-yellow, disk-violet, disk-cyan, disk-red;
|
|
.generate-colors(length(@colors));
|
|
.generate-colors(@n, @i: 1) when (@i =< @n) {
|
|
.volume-type-@{i} {
|
|
@color: extract(@colors, @i);
|
|
background: @@color;
|
|
}
|
|
.generate-colors(@n, (@i + 1));
|
|
}
|
|
|
|
h4 {
|
|
font-size: @base-font-size + 1;
|
|
margin: 0;
|
|
padding: 0 0 5px;
|
|
.font-semibold;
|
|
}
|
|
|
|
label {.font-semibold;}
|
|
|
|
.disk-visual {
|
|
@disk-visual-block-height: 50px;
|
|
@disk-visual-block-padding: 4px;
|
|
height: @disk-visual-block-height;
|
|
color: @white;
|
|
cursor: pointer;
|
|
.text-shadow;
|
|
.font-semibold;
|
|
div {
|
|
overflow: hidden;
|
|
}
|
|
.volume-group {
|
|
position: relative;
|
|
> div {
|
|
padding: @disk-visual-block-padding;
|
|
> div {
|
|
height: @disk-visual-block-height / 2 - @disk-visual-block-padding;
|
|
}
|
|
}
|
|
.volume-group-size {
|
|
font-size: @base-font-size - 2;
|
|
.font-normal;
|
|
}
|
|
.close-btn {
|
|
position: absolute;
|
|
z-index: 1000;
|
|
top: -4px;
|
|
right: @disk-visual-block-padding;
|
|
cursor: pointer;
|
|
font-size: @base-font-size + 2px;
|
|
.font-bold;
|
|
}
|
|
&[data-volume=unallocated] {
|
|
background-color: @tab-color - 45%;
|
|
}
|
|
}
|
|
}
|
|
.disk-details {
|
|
background: @tab-color;
|
|
h5 {
|
|
font-size: @base-font-size + 1;
|
|
.font-semibold;
|
|
}
|
|
.disk-info-box {
|
|
.form-group {
|
|
margin-bottom: 0;
|
|
label {
|
|
text-transform: capitalize;
|
|
font-size: @base-font-size - 1;
|
|
}
|
|
p {
|
|
padding: 0;
|
|
}
|
|
.form-control-static {
|
|
min-height: 28px;
|
|
font-size: @base-font-size - 1;
|
|
}
|
|
}
|
|
}
|
|
.disk-utility-box {
|
|
@disk-form-margin: 5px;
|
|
.form-group {
|
|
margin: 0;
|
|
.volume-group-flag {
|
|
display: inline-block;
|
|
width: 10px;
|
|
}
|
|
.volume-group-input {
|
|
padding-right: @disk-form-margin;
|
|
input {
|
|
width: 116%;
|
|
}
|
|
}
|
|
.volume-group-range,
|
|
.volume-group-input {
|
|
label,
|
|
.help-block {
|
|
display: none;
|
|
}
|
|
input[type=range] {
|
|
-moz-transform: translateY(-1000em);
|
|
&::-moz-range-track, &::-moz-range-thumb {
|
|
-moz-transform: translateY(1000em);
|
|
}
|
|
}
|
|
}
|
|
.volume-group-label {
|
|
margin: 0;
|
|
padding-top: @disk-form-margin;
|
|
span {
|
|
margin-right: 10px;
|
|
font-size: @base-font-size - 1;
|
|
}
|
|
}
|
|
.volume-group-size-label {
|
|
padding: @disk-form-margin;
|
|
text-align: right;
|
|
font-size: @base-font-size - 1;
|
|
}
|
|
input[type=range] {
|
|
margin-top: @disk-form-margin * 2 + 2;
|
|
}
|
|
input[type=number] {
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
}
|
|
.volume-group {
|
|
margin-bottom: @disk-form-margin;
|
|
label {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
.volume-group-notice {
|
|
font-size: @base-font-size - 2px;
|
|
margin: 0 @disk-form-margin @disk-form-margin * 2 0;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.node-disks + .page-buttons {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
// Interfaces styles
|
|
|
|
.ifc-list {
|
|
.ifc-container {
|
|
@base-ifc-indent: 5px;
|
|
margin-bottom: @base-ifc-indent * 2;
|
|
|
|
.ifc-inner-container {
|
|
@ifc-container-dark-color: @tab-color - 30%;
|
|
@ifc-container-light-color: @tab-color;
|
|
|
|
background: @ifc-container-light-color;
|
|
border-radius: 4px;
|
|
padding: 0;
|
|
margin: 0 0 @base-ifc-indent * 3;
|
|
|
|
&.nodrag {
|
|
background-color: @red + 150%;
|
|
}
|
|
|
|
&.over {
|
|
background-color: @ifc-container-light-color + 10%;
|
|
border-color: @ifc-container-dark-color + 10%;
|
|
}
|
|
|
|
> div {
|
|
padding: @base-ifc-indent 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.form-group {
|
|
input, select {
|
|
width: 150px;
|
|
}
|
|
&.pull-right > div {
|
|
float: left;
|
|
}
|
|
}
|
|
.checkbox-group {
|
|
label {
|
|
padding-top: 5px;
|
|
}
|
|
}
|
|
.form-group, .checkbox-group {
|
|
margin-bottom: 0;
|
|
label {
|
|
width: auto;
|
|
.font-semibold;
|
|
}
|
|
.help-block {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.ifc-info-block {
|
|
margin-bottom: @base-ifc-indent * 2;
|
|
&:last-child {
|
|
margin-bottom: @base-ifc-indent;
|
|
}
|
|
.ifc-connection {
|
|
@ifc-size: 40px;
|
|
border-radius: @base-ifc-indent;
|
|
background: @gray + 50%;
|
|
padding: @base-ifc-indent;
|
|
margin-right: @base-ifc-indent * 2;
|
|
.ifc-connection-status {
|
|
height: @ifc-size;
|
|
width: @ifc-size;
|
|
&.ifc-online {
|
|
background: url(@common-icons-sprite) no-repeat 0 -160px;
|
|
}
|
|
&.ifc-offline {
|
|
background: url(@common-icons-sprite) no-repeat -40px -160px;
|
|
}
|
|
}
|
|
}
|
|
.ifc-info, .ifc-info .btn-link {
|
|
padding: 2px 0 0 0;
|
|
border: 0;
|
|
font-size: @base-font-size - 1px;
|
|
max-width: 160px;
|
|
word-break: break-all;
|
|
line-height: 1;
|
|
> div:not(:last-child) {
|
|
margin-bottom: 4px;
|
|
}
|
|
.ifc-name {
|
|
.font-semibold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bond-properties {
|
|
border-bottom: 1px dotted @ifc-container-dark-color;
|
|
.ifc-name {
|
|
&.no-checkbox {
|
|
padding: 7px 0px 0px 50px;
|
|
.font-semibold;
|
|
}
|
|
}
|
|
}
|
|
.ifc-properties {
|
|
border-top: 1px dotted @ifc-container-dark-color;
|
|
.checkbox-group {
|
|
text-align: right;
|
|
.custom-tumbler {
|
|
float: right;
|
|
margin: 0 10px 0 7px;
|
|
}
|
|
}
|
|
.toggle-offloading {
|
|
margin-left: 50px;
|
|
}
|
|
}
|
|
// Offline modes control
|
|
.offloading-modes {
|
|
margin: 0 10px 0 50px;
|
|
.btn-default .glyphicon {
|
|
margin-left: 4px;
|
|
&.glyphicon-question-sign {
|
|
color: darkgrey;
|
|
}
|
|
}
|
|
.table {
|
|
margin-bottom: 0;
|
|
tr {
|
|
@mode-indent: 15px;
|
|
.indent-levels(@n, @i: 2) when (@i =< @n) {
|
|
&.level@{i} td:first-child {
|
|
padding-left: (@i * @mode-indent);
|
|
}
|
|
.indent-levels(@n, (@i + 1));
|
|
}
|
|
.indent-levels(4);
|
|
|
|
&.level2 {
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
th:nth-child(n+2) {
|
|
width: 70px;
|
|
text-align: center;
|
|
}
|
|
td {
|
|
&:nth-child(n+2) {
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-link {
|
|
border: 0;
|
|
padding: 0;
|
|
opacity: 0.1;
|
|
color: black;
|
|
&.active, &:not(:disabled):hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.networks-block {
|
|
padding: @base-ifc-indent * 2 0 @base-ifc-indent;
|
|
> div {
|
|
padding: 0;
|
|
}
|
|
.ifc-checkbox {
|
|
width: 50px;
|
|
text-align: center;
|
|
.custom-thumbler {
|
|
margin: 0;
|
|
}
|
|
}
|
|
.ifc-networks {
|
|
@network-block-width: 120px;
|
|
@network-block-height: @network-block-width / 2;
|
|
|
|
min-height: @network-block-height + @base-ifc-indent;
|
|
margin-right: 5px;
|
|
|
|
.network-block {
|
|
width: @network-block-width;
|
|
height: @network-block-height;
|
|
text-align: center;
|
|
border-box: sizing;
|
|
background-color: @ifc-container-dark-color;
|
|
margin-left: @base-ifc-indent;
|
|
margin-bottom: @base-ifc-indent;
|
|
padding: @base-ifc-indent * 2 @base-ifc-indent @base-ifc-indent;
|
|
cursor: move;
|
|
.network-name {
|
|
text-transform: capitalize;
|
|
.font-semibold;
|
|
}
|
|
.vlan-id {
|
|
font-size: @base-font-size - 3px;
|
|
}
|
|
|
|
&.disabled {
|
|
cursor: not-allowed;
|
|
background: none;
|
|
border: 2px solid @ifc-container-dark-color;
|
|
.network-name {
|
|
opacity: 0.7;
|
|
.text-emboss;
|
|
}
|
|
}
|
|
&.dragging {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ifc-error {
|
|
margin: @base-ifc-indent 0;
|
|
font-size: @base-font-size - 2px;
|
|
text-align: right;
|
|
.text-danger;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Healthcheck tab
|
|
.healthcheck-tab {
|
|
@padding-top-controls: 10px;
|
|
.healthcheck-controls {
|
|
margin: 2px 0 @padding-top-controls 0;
|
|
padding-bottom: 0;
|
|
padding-left: 7px;
|
|
.toggle-credentials {
|
|
margin-right: 10px;
|
|
.provide-credentials {
|
|
padding-left: 5px;
|
|
}
|
|
}
|
|
.select-all {
|
|
margin-top: 14px;
|
|
label {
|
|
cursor: pointer;
|
|
> span {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
.btn {
|
|
margin-top: 8px;
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
.credentials {
|
|
.alert {
|
|
margin-left: -15px;
|
|
margin-right: -15px;
|
|
}
|
|
}
|
|
.healthcheck-table {
|
|
&.disabled {
|
|
tr th label,
|
|
tr td label {
|
|
cursor: default;
|
|
}
|
|
.custom-tumbler span {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
tr {
|
|
td {
|
|
&.healthcheck-name,
|
|
&.healthcheck-col-duration,
|
|
&.healthcheck-col-status {
|
|
padding-top: @padding-top-controls;
|
|
}
|
|
&.healthcheck-col-duration,
|
|
&.healthcheck-col-status {
|
|
line-height: 35px;
|
|
}
|
|
label {
|
|
cursor: pointer;
|
|
font-weight: normal;
|
|
line-height: 35px;
|
|
margin: 0;
|
|
}
|
|
.custom-tumbler {
|
|
span {
|
|
margin-top: @padding-top-controls - 2;
|
|
}
|
|
}
|
|
.well {
|
|
margin: 10px 0;
|
|
padding: 10px;
|
|
b {
|
|
.font-extrabold;
|
|
}
|
|
}
|
|
}
|
|
th {
|
|
label {
|
|
cursor: pointer;
|
|
line-height: 17px;
|
|
}
|
|
.font-semibold;
|
|
text-align: center;
|
|
&.healthcheck-name {
|
|
text-align: left;
|
|
}
|
|
|
|
&.healthcheck-name,
|
|
&.healthcheck-col-duration,
|
|
&.healthcheck-col-status {
|
|
line-height: 25px;
|
|
}
|
|
.custom-tumbler {
|
|
span {
|
|
margin-top: @padding-top-controls + 8;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.custom-tumbler {
|
|
margin: 0;
|
|
span {
|
|
margin-top: @padding-top-controls;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
tbody {
|
|
.healthcheck-col-duration,
|
|
.healthcheck-col-status {
|
|
text-align: center;
|
|
.glyphicon {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.network-tab, .settings-tab {
|
|
.subtab-icon {
|
|
position: absolute;
|
|
left: 5px;
|
|
top: 10px;
|
|
z-index: 1;
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
.forms-box {
|
|
.setting-section {
|
|
margin-bottom: 40px;
|
|
}
|
|
.form-group {
|
|
label {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 30px;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
.help-block {
|
|
color: @gray;
|
|
}
|
|
}
|
|
.nav-pills:after {
|
|
margin-bottom: 20px;
|
|
}
|
|
h3 {
|
|
.checkbox-group {
|
|
margin-bottom: 0;
|
|
label {
|
|
line-height: 1;
|
|
}
|
|
.help-block {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.plugin-versions {
|
|
margin-bottom: 25px;
|
|
.radio-group {
|
|
> h4, > div {
|
|
display: block;
|
|
float: left;
|
|
margin: 0;
|
|
}
|
|
h4 {
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
.custom-tumbler + span {
|
|
position: relative;
|
|
top: 1px;
|
|
padding-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Settings tab
|
|
.settings-tab {
|
|
.form-group {
|
|
.help-block {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 30px;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
.plugin-versions {
|
|
.radio-group {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Networks tab
|
|
.network-tab {
|
|
@base-indent: 10px;
|
|
.title {
|
|
margin-bottom: 20px;
|
|
.segmentation-type {
|
|
font-size: @base-font-size + 3px;
|
|
color: @gray;
|
|
display: inline;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
.node-network-groups-list {
|
|
.default {
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
.node-network-groups-controls {
|
|
padding-right: 30px;
|
|
}
|
|
.network-tab-content {
|
|
margin-bottom: 40px;
|
|
}
|
|
.forms-box {
|
|
margin-left: 15px;
|
|
margin-right: 15px;
|
|
&.public {
|
|
margin-top: 5px;
|
|
}
|
|
&:not(.network) .has-error .help-block {
|
|
clear: both;
|
|
margin-left: @default-label-width;
|
|
padding-top: 0;
|
|
max-width: none;
|
|
display: block;
|
|
}
|
|
&.network .help-block {
|
|
max-width: 400px;
|
|
}
|
|
h3 {
|
|
margin-bottom: @base-indent;
|
|
}
|
|
.network-description {
|
|
color: @gray;
|
|
font-size: @base-font-size - 2;
|
|
margin-bottom: @base-indent * 2;
|
|
}
|
|
.form-group {
|
|
padding: 0;
|
|
&.floating_ranges {
|
|
margin-bottom: 10px;
|
|
}
|
|
&.cidr {
|
|
position: relative;
|
|
.checkbox-group {
|
|
margin-bottom: 0;
|
|
input[type=checkbox], label {
|
|
width: auto;
|
|
}
|
|
.help-block {
|
|
display: none;
|
|
}
|
|
}
|
|
.form-group {
|
|
margin-bottom: 0;
|
|
.help-block {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
h3 {
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
.add-nodegroup-btn {
|
|
margin-top: 5px;
|
|
.glyphicon {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.nova-managers {
|
|
margin: @base-indent * 2 0 @base-indent * 2 -@base-indent;
|
|
}
|
|
.network-group-name {
|
|
@node-group-title-height: 50px;
|
|
margin: 5px 0 10px 0;
|
|
font-size: @base-font-size + 12;
|
|
height: @node-group-title-height;
|
|
&.default {
|
|
height: @node-group-title-height + 20px;
|
|
.name {
|
|
height: @node-group-title-height;
|
|
}
|
|
.node-group-renaming {
|
|
height: @node-group-title-height - 4px;
|
|
&.has-error {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
&.no-rename {
|
|
.btn-link {
|
|
text-decoration: none;
|
|
cursor: default;
|
|
color: #337ab7;
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
.node-group-renaming {
|
|
min-width: 250px;
|
|
width: 50%;
|
|
margin-bottom: 0;
|
|
div {
|
|
margin-left: 15px;
|
|
}
|
|
}
|
|
.name {
|
|
display: inline;
|
|
margin-left: 5px;
|
|
}
|
|
.glyphicon {
|
|
margin: 0 10px 0 10px;
|
|
font-size: @base-font-size + 4;
|
|
cursor: pointer;
|
|
}
|
|
.explanation {
|
|
color: @gray;
|
|
font-size: @base-font-size;
|
|
display: block;
|
|
margin-left: 15px;
|
|
}
|
|
.has-error {
|
|
.help-block {
|
|
font-size: @base-font-size - 2;
|
|
margin-left: 15px;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
.show-all-networks {
|
|
margin-top: 13px;
|
|
label {
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
// range control
|
|
.range, .multiple-values {
|
|
.range-row-header {
|
|
margin-bottom: @base-indent / 2;
|
|
font-size: @base-font-size - 2;
|
|
.font-bold;
|
|
div { float: left; }
|
|
// place labels on correct places over ranges
|
|
padding-left: @default-label-width + 29;
|
|
div { width: @default-input-width + 10; }
|
|
}
|
|
.range-row {
|
|
margin-left: @default-label-width;
|
|
margin-bottom: @base-indent;
|
|
.form-group {
|
|
float: left;
|
|
margin: 0 10px 0 0;
|
|
padding: 0;
|
|
.help-block { display: none; }
|
|
}
|
|
.validation-error {
|
|
margin: 0;
|
|
display: block;
|
|
clear: both;
|
|
font-size: @base-font-size - 2;
|
|
}
|
|
.ip-ranges-control {
|
|
float: left;
|
|
padding-left: @base-indent;
|
|
button {
|
|
padding: 7px 5px;
|
|
.base-btn-link-colors;
|
|
}
|
|
}
|
|
}
|
|
&.mini {
|
|
@mini-width: 135px;
|
|
.range-row input { width: @mini-width; }
|
|
// place labels on correct places over ranges
|
|
.range-row-header div { width: @mini-width + 10; }
|
|
}
|
|
}
|
|
|
|
//vlan tag control
|
|
.forms-box:not(.network) .vlan-tagging {
|
|
height: 40px;
|
|
.form-group {
|
|
input[type=text] {
|
|
width: 244px;
|
|
}
|
|
.help-block {
|
|
margin-left: @default-label-width + 36;
|
|
}
|
|
}
|
|
.checkbox-group {
|
|
padding-left: 0;
|
|
margin-bottom: 0;
|
|
margin-left: @default-label-width;
|
|
label {
|
|
width: auto;
|
|
padding-right: 0;
|
|
margin-right: 8px;
|
|
}
|
|
.help-block {
|
|
display: none;
|
|
}
|
|
input[type='checkbox'] {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Verification Block
|
|
// -------------------------
|
|
.verification-control {
|
|
// Verification block mixin
|
|
.connect-stop-mixin(@width, @height, @margin-left) {
|
|
display: inline-block;
|
|
width: @width;
|
|
height: @height;
|
|
margin-left: @margin-left;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.connect-size {
|
|
width: 140px;
|
|
height: 40px;
|
|
}
|
|
|
|
@connect-url-1: url(../img/connect_1_anim.gif);
|
|
@connect-url-2: url(../img/connect_2_anim.gif);
|
|
@connect-url-3: url(../img/connect_3_anim.gif);
|
|
|
|
@connect-height: 62px;
|
|
@connect-width: 124px;
|
|
|
|
.verification-box {
|
|
display: block;
|
|
margin: @base-indent 0 40px 0;
|
|
position: relative;
|
|
.alert {
|
|
clear: left;
|
|
margin-bottom: 0;
|
|
margin-top: @base-indent;
|
|
padding: 8px 35px @base-indent 14px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.verification-network-placeholder {min-width: 605px;}
|
|
.verification-text-placeholder {
|
|
margin-bottom: 30px;
|
|
padding-left: 0;
|
|
.verification-description {
|
|
padding-left: 15px;
|
|
}
|
|
li:first-of-type {
|
|
.font-bold;
|
|
}
|
|
li {
|
|
list-style: none outside none;
|
|
margin: 2px 0 8px 0;
|
|
line-height: 17px;
|
|
}
|
|
}
|
|
.verification-result-table {
|
|
clear: both;
|
|
padding-top: @base-indent;
|
|
td:last-child {
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
.verification-router {
|
|
display: block;
|
|
// needed for image
|
|
width: 200px;
|
|
height: 58px;
|
|
margin-left: @default-label-width - 10;
|
|
background: url(../img/router.png) no-repeat top left;
|
|
}
|
|
|
|
.verification-node-1 {
|
|
display: inline-block;
|
|
.connect-size;
|
|
}
|
|
.verification-node-2, .verification-node-3 {
|
|
.verification-node-1;
|
|
margin-left: 76px;
|
|
}
|
|
|
|
.generate-verification-node(@number-of-iterations, @index: 1) when (@index =< @number-of-iterations) {
|
|
.verification-node-@{index} {
|
|
background: url(../img/node-small.png) no-repeat top left;
|
|
}
|
|
.generate-verification-node(@number-of-iterations, (@index + 1));
|
|
}
|
|
|
|
.generate-connect(@number-of-iterations, @position-horizontal, @position-vertical, @index: 1) when (@index =< @number-of-iterations) {
|
|
&.connect-@{index} {
|
|
background-image: url('../img/connect_@{index}_anim.gif');
|
|
background-position: @position-horizontal @position-vertical;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.generate-connect(@number-of-iterations, @position-horizontal, @position-vertical, (@index + 1));
|
|
}
|
|
|
|
.generate-verification-node(3);
|
|
|
|
.error,
|
|
.success,
|
|
.stop {
|
|
&.connect-1 {
|
|
.connect-stop-mixin(176px, @connect-height, @connect-height);
|
|
}
|
|
&.connect-2 {
|
|
.connect-stop-mixin(8px, @connect-height, 49px);
|
|
}
|
|
&.connect-3 {
|
|
.connect-stop-mixin(176px, @connect-height, 49px);
|
|
}
|
|
}
|
|
|
|
.success {
|
|
.generate-connect(3, 0, -@connect-height);
|
|
}
|
|
|
|
.stop {
|
|
.generate-connect(3, top, left);
|
|
}
|
|
|
|
.error {
|
|
.generate-connect(3, 0, -@connect-width);
|
|
}
|
|
|
|
.router-box {
|
|
display: block;
|
|
height: 58px;
|
|
overflow: hidden;
|
|
}
|
|
.animation-box {
|
|
display: block;
|
|
height: @connect-height;
|
|
margin-top: -9px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
.capacity table {
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.confirm-deletion-form, .confirm-reset-form {
|
|
margin-top: 20px;
|
|
.input-wrapper input {
|
|
width: 513px;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.btn-link.glyphicon {
|
|
padding-left: 0;
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
// Dashboard tab
|
|
.dashboard-tab {
|
|
@dashboard-gray: rgb(153, 153, 153);
|
|
@dashboard-offset: 10px;
|
|
|
|
ul li {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.btn-add-nodes {
|
|
.glyphicon {
|
|
margin-right: @dashboard-offset;
|
|
}
|
|
}
|
|
|
|
.documentation {
|
|
margin: 0 0 @dashboard-offset 0;
|
|
.documentation-link {
|
|
margin-bottom: @dashboard-offset / 2;
|
|
.glyphicon {
|
|
margin-right: @dashboard-offset / 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cluster-information {
|
|
background-color: rgb(231, 240, 242);
|
|
width: @page-width;
|
|
margin: 0 0 @dashboard-offset -@dashboard-offset * 2;
|
|
padding: @dashboard-offset @dashboard-offset * 2;
|
|
.go-to-healthcheck {
|
|
margin-bottom: @dashboard-offset;
|
|
}
|
|
.cluster-info-value, .cluster-info-title {
|
|
height: auto;
|
|
min-height: 30px;
|
|
line-height: 17px;
|
|
margin-bottom: 4px;
|
|
text-align: left;
|
|
white-space: pre;
|
|
&.cluster-info-title {
|
|
.font-semibold;
|
|
}
|
|
&.cluster-info-value {
|
|
&.name {
|
|
.btn-link {
|
|
padding: 0;
|
|
border: none;
|
|
text-align: left;
|
|
display: inline-block;
|
|
max-width: 180px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
text-overflow: ellipsis;
|
|
line-height: 19px;
|
|
}
|
|
.glyphicon {
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
vertical-align: text-top;
|
|
}
|
|
}
|
|
p {
|
|
white-space: pre-line;
|
|
word-wrap: break-word;
|
|
}
|
|
}
|
|
}
|
|
.rename-block {
|
|
height: 30px;
|
|
line-height: 13px;
|
|
margin-bottom: 4px;
|
|
text-align: left;
|
|
&.has-error {
|
|
height: auto;
|
|
.text-danger {
|
|
font-size: 12px;
|
|
width: 215px;
|
|
padding-top: 30px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
input[type=text] {
|
|
width: 240px;
|
|
height: 32px;
|
|
margin: -9px 0 0 -13px;
|
|
float: left;
|
|
}
|
|
}
|
|
.capacity-block {
|
|
margin-bottom: 6px;
|
|
.capacity-items {
|
|
margin-top: -9px;
|
|
.capacity-item {
|
|
cursor: default;
|
|
background-color: @white;
|
|
padding: 4px 10px;
|
|
&.cpu {
|
|
border: 1px solid @dashboard-gray;
|
|
}
|
|
&.hdd {
|
|
border-top: 1px solid @dashboard-gray;
|
|
border-bottom: 1px solid @dashboard-gray;
|
|
}
|
|
&.ram {
|
|
border: 1px solid @dashboard-gray;
|
|
}
|
|
.capacity-value {
|
|
.font-semibold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.statistics-block {
|
|
.cluster-info-title {
|
|
margin-bottom: @dashboard-offset;
|
|
}
|
|
}
|
|
.dashboard-actions-wrapper {
|
|
margin: @dashboard-offset 0 @dashboard-offset 0;
|
|
.reset-environment {
|
|
margin-right: 87px;
|
|
}
|
|
button {
|
|
margin-right: @dashboard-offset / 2;
|
|
}
|
|
.glyphicon-info-sign {
|
|
vertical-align: sub;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dashboard-block {
|
|
padding: @dashboard-offset;
|
|
border: 1px solid #d3d3d3;
|
|
border-radius: 4px;
|
|
margin: 0 15px @dashboard-offset * 2;
|
|
> div {
|
|
padding: @dashboard-offset;
|
|
}
|
|
h4 {
|
|
margin: 0 0 @dashboard-offset 0;
|
|
}
|
|
.description {
|
|
margin-bottom: @dashboard-offset;
|
|
}
|
|
.changes-list {
|
|
ul {
|
|
padding: 0;
|
|
color: @gray;
|
|
margin-bottom: @dashboard-offset;
|
|
li:not(:last-child) {
|
|
margin-bottom: @dashboard-offset / 2;
|
|
}
|
|
}
|
|
.deploy-btn {
|
|
padding-top: 2px;
|
|
display: block;
|
|
text-align: left;
|
|
.deploy-icon {
|
|
position: relative;
|
|
display: inline-block;
|
|
background: url(@common-icons-sprite) no-repeat -10px -90px;
|
|
margin-right: 6px;
|
|
width: 22px;
|
|
height: 18px;
|
|
top: 3px;
|
|
}
|
|
}
|
|
.btn-discard-changes {
|
|
padding: 0;
|
|
margin-left: 6px;
|
|
border: none;
|
|
position: relative;
|
|
top: -1px;
|
|
height: 15px;
|
|
.discard-changes-icon {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
.instruction {
|
|
margin-bottom: @dashboard-offset;
|
|
}
|
|
.environment-alerts {
|
|
.invalid {
|
|
.font-semibold;
|
|
font-size: @base-font-size - 1;
|
|
color: @red;
|
|
margin-bottom: @dashboard-offset;
|
|
}
|
|
.warnings-block {
|
|
font-size: @base-font-size - 1;
|
|
&:not(:last-child) {
|
|
margin-bottom: @dashboard-offset;
|
|
}
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: 1.1;
|
|
li:not(:last-child) {
|
|
margin-bottom: @dashboard-offset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.deploy-process {
|
|
height: auto;
|
|
width: 100%;
|
|
.progress {
|
|
margin-bottom: 0;
|
|
width: 100%;
|
|
height: 22px;
|
|
float: left;
|
|
}
|
|
&.has-stop-control .progress {
|
|
width: 95%;
|
|
}
|
|
}
|
|
}
|
|
.links-block {
|
|
.row:not(:last-child) {
|
|
margin-bottom: @dashboard-offset * 2;
|
|
}
|
|
.link-block {
|
|
.title {
|
|
margin-bottom: @dashboard-offset;
|
|
padding: 0;
|
|
.http-link {
|
|
font-size: @base-font-size;
|
|
display: inline-block;
|
|
margin-left: @dashboard-offset / 2;
|
|
position: relative;
|
|
top: -2.5px;
|
|
}
|
|
}
|
|
.description {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.node-network-group-creation {
|
|
.node-group-name {
|
|
margin: 15px;
|
|
label {
|
|
display: inline;
|
|
margin-right: 20px;
|
|
}
|
|
div {
|
|
display: inline;
|
|
}
|
|
}
|
|
.node-group-input-name {
|
|
display: inline;
|
|
width: 475px;
|
|
}
|
|
.has-error {
|
|
.help-block {
|
|
margin-left: 62px;
|
|
font-size: @base-font-size - 2;
|
|
}
|
|
}
|
|
}
|