5797 lines
121 KiB
Plaintext
5797 lines
121 KiB
Plaintext
@import "../../node_modules/bootstrap/dist/css/bootstrap.css";
|
|
@import "default-theme.less";
|
|
|
|
// BASE SETTINGS
|
|
@page-width: 1170px;
|
|
@default-input-width: 280px;
|
|
@default-label-width: 200px;
|
|
|
|
// 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(-51px, -132px);
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.glyphicon-danger-sign {
|
|
.icon-default-styles(-12px, -132px);
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.glyphicon-info-sign {
|
|
.icon-default-styles(-12px, -611px);
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.glyphicon-bell {
|
|
.icon-default-styles(-12px, -651px);
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.glyphicon-trash {
|
|
.icon-default-styles(-12px, -691px);
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.glyphicon-edit {
|
|
.icon-default-styles(-52px, -691px);
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.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(-10px, -1130px);
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.glyphicon-pencil {
|
|
.icon-default-styles(-13px, -491px);
|
|
width: 18px;
|
|
height: 18px;
|
|
&:hover {
|
|
background: url(@common-icons-sprite) -53px -491px 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);
|
|
}
|
|
|
|
.glyphicon-selected-role {
|
|
.icon-default-styles(-12px, -851px);
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.glyphicon-indeterminated-role {
|
|
.icon-default-styles(-13px, -892px);
|
|
height: 16px;
|
|
}
|
|
|
|
.discard-changes-icon {
|
|
.icon-default-styles(-12px, -571px);
|
|
width: 17px;
|
|
height: 17px;
|
|
&:hover {
|
|
background: url(@common-icons-sprite) -52px -571px no-repeat;
|
|
}
|
|
}
|
|
|
|
.glyphicon-ok-sign {
|
|
.icon-default-styles(-12px, -811px);
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.glyphicon-ok {
|
|
.icon-default-styles(-12px, -1453px);
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.glyphicon-remove {
|
|
.icon-default-styles(-12px, -1412px);
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.glyphicon-remove-alt {
|
|
.icon-default-styles(-52px, -1410px);
|
|
width: 17px;
|
|
height: 17px;
|
|
&:hover {
|
|
background: url(@common-icons-sprite) -52px -1450px no-repeat;
|
|
}
|
|
}
|
|
|
|
.glyphicon-question-sign {
|
|
.icon-default-styles(-12px, -1211px);
|
|
width: 19px;
|
|
height: 19px;
|
|
}
|
|
|
|
.glyphicon-plus-sign {
|
|
.icon-default-styles(-12px, -1251px);
|
|
width: 19px;
|
|
height: 19px;
|
|
&:hover {
|
|
background: url(@common-icons-sprite) -52px -1251px no-repeat;
|
|
}
|
|
}
|
|
|
|
.glyphicon-minus-sign {
|
|
.icon-default-styles(-12px, -1291px);
|
|
width: 19px;
|
|
height: 19px;
|
|
&:hover {
|
|
background: url(@common-icons-sprite) -52px -1291px no-repeat;
|
|
}
|
|
}
|
|
|
|
.glyphicon-eye-open {
|
|
.icon-default-styles(-12px, -1332px);
|
|
width: 19px;
|
|
height: 19px;
|
|
}
|
|
|
|
.glyphicon-eye-close {
|
|
.icon-default-styles(-12px, -1372px);
|
|
width: 19px;
|
|
height: 19px;
|
|
}
|
|
|
|
.glyphicon-arrow-down {
|
|
.icon-default-styles(-10px, -1490px);
|
|
}
|
|
|
|
.glyphicon-arrow-up {
|
|
.icon-default-styles(-50px, -1489px);
|
|
}
|
|
|
|
.glyphicon-arrow-left {
|
|
.icon-default-styles(-12px, -1649px);
|
|
}
|
|
|
|
.glyphicon-arrow-left-white {
|
|
.icon-default-styles(-12px, -1689px);
|
|
}
|
|
|
|
.glyphicon-arrow-right {
|
|
.icon-default-styles(-52px, -1649px);
|
|
}
|
|
|
|
.glyphicon-arrow-right-white {
|
|
.icon-default-styles(-52px, -1689px);
|
|
}
|
|
|
|
.glyphicon-lock {
|
|
.icon-default-styles(-12px, -1011px);
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.glyphicon-user {
|
|
.icon-default-styles(-54px, -1012px);
|
|
width: 12px;
|
|
height: 14px;
|
|
}
|
|
|
|
.glyphicon-off {
|
|
.icon-default-styles(-54px, -812px);
|
|
width: 13px;
|
|
height: 14px;
|
|
}
|
|
|
|
.glyphicon-plus-white {
|
|
.icon-default-styles(-12px, -1051px);
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.glyphicon-plus-dark {
|
|
.icon-default-styles(-52px, -1051px);
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.glyphicon-minus-white {
|
|
.icon-default-styles(-12px, -1091px);
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.glyphicon-minus-dark {
|
|
.icon-default-styles(-52px, -1091px);
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.glyphicon-deploy {
|
|
.icon-default-styles(-10px, -93px);
|
|
width: 20px;
|
|
height: 17px;
|
|
}
|
|
|
|
.glyphicon-compact {
|
|
.icon-default-styles(-12px, -1172px);
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.glyphicon-timeline {
|
|
.icon-default-styles(-12px, -1611px);
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.glyphicon-table {
|
|
.icon-default-styles(-12px, -1571px);
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
.base-btn-link-colors() {
|
|
@base-btn-link-color: @link-color;
|
|
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, &:focus {
|
|
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%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: @navbar-color;
|
|
outline: 0;
|
|
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(red(@navbar-color), green(@navbar-color), blue(@navbar-color), 0.6);
|
|
}
|
|
|
|
.btn > .glyphicon {
|
|
display: inline-block;
|
|
float: left;
|
|
top: 1px;
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: 1;
|
|
}
|
|
.btn, .open > .dropdown-toggle {
|
|
&.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);
|
|
}
|
|
&.btn-link {
|
|
color: @link-color;
|
|
&:hover {
|
|
color: @link-color-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-progress {
|
|
position: relative;
|
|
color: transparent !important;
|
|
text-shadow: none !important;
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
cursor: default;
|
|
color: transparent;
|
|
outline: none !important;
|
|
box-shadow: none;
|
|
}
|
|
> i {
|
|
visibility: hidden;
|
|
}
|
|
&.btn-default:before {
|
|
border-left-color: @base-text-color;
|
|
border-right-color: @base-text-color;
|
|
}
|
|
.offset-mixin(@offset) {
|
|
margin-top: -@offset;
|
|
margin-left: -@offset;
|
|
width: 2 * @offset;
|
|
height: 2 * @offset;
|
|
}
|
|
&:before {
|
|
content: '';
|
|
display: inline-block;
|
|
position: absolute;
|
|
background: transparent;
|
|
border: 2px solid @white;
|
|
border-top-color: transparent;
|
|
border-bottom-color: transparent;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
top: 50%;
|
|
left: 50%;
|
|
animation: btn-progress 1s ease-in-out infinite;
|
|
.offset-mixin(12px);
|
|
}
|
|
&.btn-xs:before {
|
|
.offset-mixin(7px);
|
|
}
|
|
&.btn-sm:before {
|
|
.offset-mixin(9px);
|
|
}
|
|
&.btn-lg:before {
|
|
.offset-mixin(16px);
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
&.top, &.top-left, &.top-right {
|
|
.tooltip-arrow {
|
|
border-top-color: @tooltip-color;
|
|
}
|
|
}
|
|
&.right .tooltip-arrow {
|
|
border-right-color: @tooltip-color;
|
|
}
|
|
&.left .tooltip-arrow {
|
|
border-left-color: @tooltip-color;
|
|
}
|
|
&.bottom, &.bottom-left, &.bottom-right {
|
|
.tooltip-arrow {
|
|
border-bottom-color: @tooltip-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tooltip-inner {
|
|
background-color: @tooltip-color;
|
|
color: @white;
|
|
font-weight: 500;
|
|
text-align: left;
|
|
padding: 10px;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.tooltip-wrapper {
|
|
display: inline-block;
|
|
}
|
|
|
|
// 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(@radio-checkbox-sprite) no-repeat 0 0 transparent;
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.custom-tumbler input:checked + span {
|
|
background: url(@radio-checkbox-sprite) no-repeat -22px 0px;
|
|
}
|
|
|
|
.custom-tumbler input:indeterminate + span {
|
|
background: url(@radio-checkbox-sprite) 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(@radio-checkbox-sprite) no-repeat 0px -22px;
|
|
}
|
|
|
|
.custom-tumbler input[type=radio]:checked + span {
|
|
background: url(@radio-checkbox-sprite) 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: @navbar-color-hover;
|
|
border-radius: 4px;
|
|
}
|
|
&:focus {
|
|
color: @white;
|
|
background-color: @navbar-color-hover;
|
|
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(@navbar-logo-img) 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) {
|
|
background: url(@header-icons-sprite) no-repeat 0 -@navbar-icon-size * @index;
|
|
&:hover {
|
|
background: url(@header-icons-sprite) 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%;
|
|
top: 0;
|
|
}
|
|
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;
|
|
}
|
|
}
|
|
|
|
.page-load-progress {
|
|
position: absolute;
|
|
height: 5px;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 40;
|
|
opacity: 1;
|
|
transition: opacity 0.2s linear 0.2s;
|
|
.page-load-progress-bar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 2px;
|
|
background: @navbar-color-hover;
|
|
box-shadow: 0 0 8px @navbar-color-hover;
|
|
transition: width 0.35s ease;
|
|
}
|
|
}
|
|
|
|
// 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: lighten(@link-color, 20%);
|
|
}
|
|
}
|
|
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;
|
|
}
|
|
|
|
// 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;
|
|
.help-block {
|
|
display: inline-block;
|
|
margin: 0 0 0 20px;
|
|
font-size: @base-font-size - 1;
|
|
color: @gray + 20%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
&:focus {
|
|
background-color: @navbar-color-active;
|
|
}
|
|
}
|
|
}
|
|
& > a {
|
|
padding-left: 25px;
|
|
line-height: 1.2;
|
|
color: @navbar-color-active;
|
|
font-weight: 600;
|
|
hyphens: none;
|
|
|
|
&:hover {
|
|
color: @white;
|
|
background-color: @navbar-color-hover;
|
|
}
|
|
}
|
|
&.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 0;
|
|
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: 0 0 @base-indent 0;
|
|
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] {
|
|
display: none;
|
|
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;
|
|
}
|
|
.nullable-checkbox {
|
|
position: relative;
|
|
top: 6px;
|
|
height: 34px;
|
|
input {
|
|
width: auto;
|
|
}
|
|
& + input {
|
|
width: 252px;
|
|
}
|
|
}
|
|
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;
|
|
}
|
|
.hidden + .help-block {
|
|
margin-left: 0;
|
|
}
|
|
&.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;
|
|
display: inline-block;
|
|
position: relative;
|
|
margin: -8px 0 0 5px;
|
|
top: 4px;
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
.field-list {
|
|
float: left;
|
|
width: 352px;
|
|
> div {
|
|
float: none;
|
|
input, textarea {
|
|
margin-bottom: @base-indent / 2;
|
|
margin-right: @base-indent;
|
|
}
|
|
&:last-child input, &:last-child textarea {
|
|
margin-bottom: 0;
|
|
}
|
|
.field-controls {
|
|
float: left;
|
|
.btn {
|
|
padding: 0;
|
|
margin: 7px 0 5px;
|
|
&.btn-add-field + .btn {
|
|
margin-left: @base-indent / 2;
|
|
}
|
|
|
|
}
|
|
}
|
|
.field-error {
|
|
.text-danger;
|
|
padding-top: 1px;
|
|
}
|
|
}
|
|
+ .help-block {
|
|
max-width: 350px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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;}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: @navbar-color + 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
&.unsupported {
|
|
.glyphicon {
|
|
height: 18px;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
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(@tabs-icons-sprite) no-repeat 0 -@tab-icon-size * @index;
|
|
}
|
|
&:hover, &.active {
|
|
.icon {
|
|
background: url(@tabs-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);
|
|
}
|
|
&.history {
|
|
.tab-icon-sprite-index(9);
|
|
}
|
|
&.workflows {
|
|
.tab-icon-sprite-index(10);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-content {
|
|
border-radius: 0 8px 8px 8px;
|
|
}
|
|
|
|
.sticker label {
|
|
width: 100%;
|
|
}
|
|
|
|
.well {
|
|
.well-heading {
|
|
margin-bottom: 5px;
|
|
.font-semibold;
|
|
.btn-link {
|
|
padding: 0;
|
|
.glyphicon-filter {
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
}
|
|
.sorter-control, .filter-control {
|
|
margin-right: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
.node-management-panel {
|
|
@management-panel-indent: 5px;
|
|
|
|
.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: 219px;
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
.form-group {
|
|
margin: 0;
|
|
}
|
|
input {
|
|
padding: 4px 24px 6px 10px;
|
|
font-size: @base-font-size - 2;
|
|
animation-name: search;
|
|
animation-duration: 150ms;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
.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 8px;
|
|
}
|
|
|
|
.well {
|
|
margin-bottom: @management-panel-indent * 3;
|
|
|
|
.multiselect {
|
|
&:last-child .btn-link {
|
|
padding-left: @management-panel-indent;
|
|
}
|
|
}
|
|
.control-buttons {
|
|
float: none;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.help-block {
|
|
display: none;
|
|
}
|
|
|
|
.filters {
|
|
.btn-reset-filters {
|
|
.discard-changes-icon {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.glyphicon-filter {
|
|
top: 4px;
|
|
}
|
|
.more-control {
|
|
.dropdown-toggle {
|
|
margin-top: -3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
padding-left: 0;
|
|
.btn-group {
|
|
vertical-align: baseline;
|
|
button {
|
|
padding: 6px 10px;
|
|
.glyphicon {
|
|
margin-right: @management-panel-indent;
|
|
}
|
|
&.dropdown-toggle {
|
|
padding: 6px 8px;
|
|
}
|
|
}
|
|
&: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 {
|
|
.glyphicon {
|
|
padding-left: @management-panel-indent;
|
|
float: none;
|
|
margin: 0 5px 0 5px;
|
|
}
|
|
}
|
|
.filter-control {
|
|
.glyphicon {
|
|
padding-left: @management-panel-indent;
|
|
float: none;
|
|
margin: 7px 5px 0 5px;
|
|
}
|
|
}
|
|
.sorters {
|
|
.form-control {
|
|
width: auto;
|
|
float: left;
|
|
}
|
|
.btn-reset-sorting {
|
|
.discard-changes-icon {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.glyphicon-sort {
|
|
top: 4px;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.active-sorters-filters {
|
|
@base-indent: 5px;
|
|
border-radius: @base-indent;
|
|
/* .btn-default border color from Bootstrap */
|
|
border: 1px solid #ccc;
|
|
padding: @base-indent * 2;
|
|
margin-bottom: @base-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: @base-indent;
|
|
display: inline;
|
|
}
|
|
}
|
|
> strong {
|
|
padding-right: 0;
|
|
}
|
|
button {
|
|
padding: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
right: @base-indent * 3;
|
|
}
|
|
.glyphicon-arrow-down {
|
|
top: 2px;
|
|
}
|
|
}
|
|
.active-filters + .active-sorters {
|
|
margin-top: @base-indent * 2;
|
|
}
|
|
}
|
|
|
|
.multiselect, .number-range {
|
|
.popover {
|
|
display: block;
|
|
width: 220px;
|
|
top: 25px;
|
|
.arrow {
|
|
display: none;
|
|
}
|
|
.help-block {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.multiselect {
|
|
.popover-content {
|
|
overflow-y: auto;
|
|
max-height: 450px;
|
|
> div {
|
|
padding: 0 5px;
|
|
.custom-tumbler + span {
|
|
cursor: pointer;
|
|
position: relative;
|
|
top: 4px;
|
|
max-width: 140px;
|
|
display: inline-block;
|
|
line-height: 14px;
|
|
vertical-align: top;
|
|
.break-word;
|
|
}
|
|
label {
|
|
.font-normal;
|
|
.break-word;
|
|
font-size: @base-font-size - 2;
|
|
line-height: 22px;
|
|
}
|
|
}
|
|
.divider {
|
|
border-bottom: 1px solid @gray + 80%;
|
|
margin: 8px 0 10px;
|
|
}
|
|
.options-filter {
|
|
margin: 0 5px 10px;
|
|
padding: 0;
|
|
input {
|
|
font-size: @base-font-size - 2;
|
|
height: 28px;
|
|
padding: 3px 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.nodes-tab {
|
|
.screen-loading-bar {
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
|
|
// 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.provisioning {
|
|
.progress-bar, + .node-popover .progress-bar {
|
|
background-color: @blue;
|
|
}
|
|
}
|
|
.node.deploying {
|
|
.progress-bar, + .node-popover .progress-bar {
|
|
background-color: @green;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
background-color: @base-node-color;
|
|
box-sizing: border-box;
|
|
&:hover {
|
|
background-color: @base-node-color + 7%;
|
|
}
|
|
|
|
&.discover {
|
|
background-color: @node-color-discover;
|
|
border-color: @node-border-color-discover;
|
|
&:hover {
|
|
background-color: @node-color-discover-hover;
|
|
}
|
|
}
|
|
&.pending_addition {
|
|
background-color: @node-color-pending_addition;
|
|
border-color: @node-border-color-pending_addition;
|
|
&:hover {
|
|
background-color: @node-color-pending_addition + 7%;
|
|
}
|
|
}
|
|
&.pending_deletion {
|
|
background-color: @node-color-pending_deletion;
|
|
border-color: @node-border-color-pending_deletion;
|
|
&:hover {
|
|
background-color: @node-color-pending_deletion + 7%;
|
|
}
|
|
}
|
|
&.error {
|
|
background-color: @node-color-error;
|
|
border-color: @node-border-color-error;
|
|
&:hover {
|
|
background-color: @node-color-error + 5%;
|
|
}
|
|
}
|
|
&.offline, &.removing {
|
|
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%;
|
|
}
|
|
}
|
|
&.removing {
|
|
.node-box {
|
|
cursor: default;
|
|
}
|
|
}
|
|
&.selected {
|
|
background-color: @node-color-selected;
|
|
border-color: @node-border-color-selected;
|
|
box-shadow: inset 0 0 0 0px #c3c5c7;
|
|
&.pending_addition {
|
|
border-color: @node-border-color-pending_addition;
|
|
}
|
|
&.pending_deletion {
|
|
border-color: @node-border-color-pending_deletion;
|
|
}
|
|
&.error {
|
|
border-color: @node-border-color-error;
|
|
}
|
|
&: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;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
.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;
|
|
.tooltip-wrapper {
|
|
position: relative;
|
|
top: 10px;
|
|
width: @node-button-size;
|
|
height: @node-button-size;
|
|
}
|
|
.icon {
|
|
position: absolute;
|
|
top: -10px;
|
|
height: @node-button-size;
|
|
width: @node-button-size;
|
|
background: url(@common-icons-sprite) no-repeat -@node-button-size -@node-button-size;
|
|
opacity: .6;
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
&.icon-logs {
|
|
background: url(@common-icons-sprite) no-repeat 0 -@node-button-size*5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.node-hardware {
|
|
text-align: right;
|
|
float: none;
|
|
margin-right: @node-button-size;
|
|
padding: 18px 0;
|
|
font-size: @base-font-size - 3;
|
|
.font-normal;
|
|
> 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;
|
|
button {
|
|
.glyphicon {
|
|
opacity: 0.6;
|
|
}
|
|
&:hover {
|
|
.glyphicon {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
.sticker {
|
|
display: block;
|
|
position: relative;
|
|
top: 8px;
|
|
left: -2px;
|
|
font-weight: 700;
|
|
font-size: @base-font-size - 4;
|
|
color: @navbar-icon-color;
|
|
}
|
|
.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: @link-color;
|
|
font-size: @base-font-size - 2;
|
|
&:hover, &:focus {
|
|
text-decoration: none;
|
|
}
|
|
.font-normal;
|
|
span {
|
|
position: relative;
|
|
top: -2px;
|
|
left: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.node, .node-popover {
|
|
.node-status {
|
|
width: 22%;
|
|
display: table;
|
|
text-align: center;
|
|
font-size: @base-font-size - 3;
|
|
.font-semibold;
|
|
> div {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
text-transform: uppercase;
|
|
}
|
|
.node-remove-button {
|
|
font-size: @base-font-size - 2;
|
|
margin: 0 0 3px 5px;
|
|
padding: 0 5px;
|
|
}
|
|
.progress {
|
|
height: 20px;
|
|
margin: 0;
|
|
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;}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 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: 82px;
|
|
|
|
.node-box {
|
|
padding: @compact-node-indent;
|
|
> div {
|
|
float: none;
|
|
height: auto;
|
|
}
|
|
|
|
.node-checkbox {
|
|
float: left;
|
|
height: 18px;
|
|
width: 23px;
|
|
animation-name: bounceIn;
|
|
animation-duration: 0.2s;
|
|
animation-fill-mode: both;
|
|
animation-timing-function: linear;
|
|
i.glyphicon {
|
|
font-size: @base-font-size + 4;
|
|
}
|
|
}
|
|
.node-name {
|
|
width: auto;
|
|
height: 18px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
margin-bottom: 2px;
|
|
p {
|
|
border: none;
|
|
&:hover {
|
|
color: @base-text-color;
|
|
}
|
|
}
|
|
}
|
|
.node-hardware {
|
|
text-align: left;
|
|
padding: 2px 0 0px;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
color: @gray;
|
|
span {
|
|
padding: 0;
|
|
}
|
|
}
|
|
.node-status {
|
|
height: 38px;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
padding: 2px 0;
|
|
text-align: left;
|
|
.progress {
|
|
height: 12px;
|
|
width: 80%;
|
|
}
|
|
}
|
|
.node-settings {
|
|
width: 20px;
|
|
height: 20px;
|
|
float: none;
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 43px;
|
|
background: url(@common-icons-sprite) no-repeat -10px -1528px;
|
|
&:hover {
|
|
background: url(@common-icons-sprite) no-repeat -50px -1528px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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-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;
|
|
}
|
|
}
|
|
div {
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
|
|
.role-list {
|
|
li:not(.text-success) {
|
|
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;
|
|
float: left;
|
|
}
|
|
.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-block {
|
|
margin: 0 0 0 24px;
|
|
.node-status {
|
|
font-size: @base-font-size - 4;
|
|
margin: 2px 0;
|
|
width: 80%;
|
|
text-align: left;
|
|
.node-remove-button {
|
|
position: relative;
|
|
top: -1px;
|
|
margin-bottom: 2px;
|
|
}
|
|
}
|
|
}
|
|
.node-buttons {
|
|
margin-left: 44px;
|
|
.btn {
|
|
padding: 3px 5px;
|
|
margin: 0 2px 2px;
|
|
margin-left: 0;
|
|
color: @white;
|
|
font-size: @base-font-size - 4;
|
|
background: @blue;
|
|
line-height: 1;
|
|
text-transform: uppercase;
|
|
&:hover {
|
|
background: @blue - 15%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: 24px;
|
|
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;
|
|
.container {
|
|
margin-top: 80px;
|
|
.box {
|
|
position: relative;
|
|
background-color: @white;
|
|
color: @base-text-color;
|
|
border-radius: 18px;
|
|
margin-top: 10%;
|
|
box-shadow: 0 1px 1px @shadow-color;
|
|
.login-head {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
height: 160px;
|
|
background: url(@login-background-img) no-repeat top left;
|
|
background-size: cover;
|
|
border-radius: 12px 12px 0px 0px;
|
|
}
|
|
.logo {
|
|
@logo-width: 100%;
|
|
@logo-height: 160px;
|
|
background: url(@login-logo-img) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
|
|
background-size: contain;
|
|
background-position: center;
|
|
position: relative;
|
|
top: -@logo-height;
|
|
width: @logo-width;
|
|
height: @logo-height;
|
|
margin: 0 auto -(@logo-height - 20px) 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: @link-color;
|
|
}
|
|
}
|
|
.name {
|
|
font-size: @base-font-size + 3;
|
|
.font-semibold;
|
|
text-decoration: none;
|
|
height: 42px;
|
|
overflow: hidden;
|
|
color: #525960;
|
|
line-height: 20px;
|
|
.break-word()
|
|
}
|
|
.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(@new-environment-img) no-repeat center 20px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
box-sizing: border-box;
|
|
.font-bold;
|
|
&:hover {
|
|
background: @white url(@new-environment-img) no-repeat center 20px;
|
|
text-decoration: none;
|
|
}
|
|
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: @navbar-color;
|
|
background: @support-icon-background-color;
|
|
.support-icon-sprite-index(@index) {
|
|
background: @support-icon-background-color url(@support-images-sprite) 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;
|
|
}
|
|
.btn-download-capacity {
|
|
.glyphicon {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
&.notification-message {
|
|
width: 91%;
|
|
.btn-link {
|
|
padding: 0;
|
|
border: 0;
|
|
user-select: text;
|
|
vertical-align: baseline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ANIMATIONS
|
|
|
|
@keyframes resize {
|
|
0% { width: 0; }
|
|
50% { width: 50%; }
|
|
100% { width: 100%; }
|
|
}
|
|
|
|
@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);
|
|
}
|
|
}
|
|
|
|
@keyframes btn-progress {
|
|
0% {transform: rotate(0deg) scale(1);}
|
|
50% {transform: rotate(180deg) scale(1.1);}
|
|
100% {transform: rotate(360deg) scale(1);}
|
|
}
|
|
|
|
@keyframes search {
|
|
from {
|
|
width: 0px;
|
|
}
|
|
to {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.role-panel {
|
|
padding-bottom: 7px;
|
|
|
|
h4 {
|
|
margin: 0px 0px 20px 0px;
|
|
.help-block {
|
|
display: inline-block;
|
|
margin: 0 0 0 20px;
|
|
font-size: @base-font-size - 1;
|
|
color: @gray + 20%;
|
|
}
|
|
}
|
|
h6 {
|
|
text-transform: capitalize;
|
|
margin-top: 17px;
|
|
.font-normal;
|
|
}
|
|
.role-block {
|
|
@role-height: 48px;
|
|
position: relative;
|
|
float: left;
|
|
width: 24%;
|
|
height: 50px;
|
|
background-color: @white;
|
|
border: 1px solid @gray + 77%;
|
|
border-radius: 23px;
|
|
margin-bottom: 12px;
|
|
cursor: pointer;
|
|
.font-semibold;
|
|
&:not(:last-child) {
|
|
margin-right: 1%;
|
|
}
|
|
.role {
|
|
position: relative;
|
|
width: 100%;
|
|
height: @role-height;
|
|
padding: 0px 16px;
|
|
line-height: 20px;
|
|
overflow: hidden;
|
|
.break-word;
|
|
i {
|
|
display: block;
|
|
position: absolute;
|
|
top: 15px;
|
|
& + span {
|
|
display: table-cell;
|
|
padding: 4px 4px 4px 24px;
|
|
vertical-align: middle;
|
|
height: @role-height;
|
|
overflow: hidden;
|
|
hyphens: none;
|
|
}
|
|
}
|
|
}
|
|
.popover {
|
|
position: absolute;
|
|
bottom: 60px;
|
|
top: auto;
|
|
display: block;
|
|
color: @base-text-color;
|
|
font-size: @base-font-size - 1;
|
|
width: 100%;
|
|
hr {
|
|
margin: 10px 0;
|
|
}
|
|
}
|
|
&:not(.unavailable):hover, &:not(.disabled):focus {
|
|
background-color: @gray + 77%;
|
|
border: 1px solid @gray + 77%;
|
|
}
|
|
&:not(.unavailable):not(.selected):not(.indeterminated) {
|
|
i {
|
|
display: none;
|
|
& + span {
|
|
padding: 4px;
|
|
}
|
|
}
|
|
}
|
|
&.selected, &.indeterminated {
|
|
background-color: @green;
|
|
border: 1px solid @green;
|
|
color: @white;
|
|
&:hover, &:focus {
|
|
background-color: @green - 20%;
|
|
border: 1px solid @green - 20%;
|
|
}
|
|
}
|
|
&.unavailable {
|
|
cursor: default;
|
|
color: @orange;
|
|
border-color: lighten(@orange, 20%);
|
|
&.selected, &.indeterminated {
|
|
background-color: lighten(@green, 15%);
|
|
border: 1px solid lighten(@green, 15%);
|
|
color: @white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// wizard styles
|
|
.wizard {
|
|
.modal-dialog {
|
|
width: 840px;
|
|
height: 560px;
|
|
color: @base-text-color;
|
|
.modal-body {
|
|
padding: 0px;
|
|
> .text-danger {
|
|
margin: 15px;
|
|
}
|
|
}
|
|
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;
|
|
.glyphicon {
|
|
margin-top: -2px;
|
|
top: 4px;
|
|
}
|
|
.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: @navbar-color-hover;
|
|
}
|
|
}
|
|
}
|
|
&.active {
|
|
font-weight: 600;
|
|
a {
|
|
background-color: @navbar-color;
|
|
color: @white;
|
|
}
|
|
&.disabled {
|
|
font-weight: 100;
|
|
color: @base-light-color;
|
|
}
|
|
}
|
|
&.disabled {
|
|
a {
|
|
font-weight: 400;
|
|
color: @base-text-color + 60%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.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: 27px;
|
|
}
|
|
}
|
|
}
|
|
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;
|
|
}
|
|
}
|
|
|
|
.popover {
|
|
color: @base-text-color;
|
|
|
|
&.deployment-task-info {
|
|
width: 260px;
|
|
font-size: @base-font-size - 2;
|
|
span {
|
|
.break-word;
|
|
&:first-child {
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
.status {
|
|
&.error span:last-child {.text-danger;}
|
|
&.ready span:last-child {.text-success;}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
button > .glyphicon {
|
|
float: none;
|
|
}
|
|
}
|
|
&.always-show-scrollbar {
|
|
overflow-y: scroll;
|
|
}
|
|
}
|
|
|
|
.display-changes-dialog, .provision-nodes-dialog, .deploy-nodes-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;
|
|
}
|
|
}
|
|
|
|
.select-nodes-dialog {
|
|
.modal-dialog {
|
|
width: @page-width;
|
|
.modal-body {
|
|
min-height: 550px;
|
|
max-height: 550px;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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 div {
|
|
.break-word;
|
|
}
|
|
.change-hostname {
|
|
button.glyphicon-pencil {
|
|
display: inline;
|
|
margin-left: 5px;
|
|
border: 0;
|
|
vertical-align: middle;
|
|
top: -1px;
|
|
}
|
|
.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;
|
|
strong {
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Node Attributes styles
|
|
.node-attributes {
|
|
@node-attributes-padding: 10px;
|
|
padding: @node-attributes-padding;
|
|
h3 {
|
|
margin-top: 0;
|
|
padding-bottom: 5px;
|
|
border-bottom: 1px solid @gray + 50%;
|
|
color: @base-text-color + 10%;
|
|
font-size: @base-font-size + 7px;
|
|
}
|
|
.section, .setting-section {
|
|
margin-bottom: @node-attributes-padding * 2;
|
|
}
|
|
.alert h4 {
|
|
.font-semibold;
|
|
font-size: @base-font-size;
|
|
}
|
|
.form-group {
|
|
&:after {
|
|
.clearfix;
|
|
}
|
|
margin-bottom: 3px;
|
|
> div {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
label {
|
|
display: inline-block;
|
|
padding-top: 9px;
|
|
width: 26%;
|
|
.font-normal;
|
|
}
|
|
input, textarea {
|
|
width: 371px;
|
|
margin-left: @node-attributes-padding;
|
|
}
|
|
div.field-list {
|
|
input, textarea {
|
|
width: 319px;
|
|
margin: 0 @node-attributes-padding @node-attributes-padding;
|
|
display: inline-block;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
.field-controls {
|
|
width: 50px;
|
|
display: inline;
|
|
button {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
.help-block {
|
|
padding-top: 3px;
|
|
display: block;
|
|
color: @gray;
|
|
margin-top: 0;
|
|
&.field-error {
|
|
margin-left: @node-attributes-padding;
|
|
padding: 0;
|
|
}
|
|
}
|
|
.has-error .help-block, &.has-error .help-block {.text-danger;}
|
|
}
|
|
.checkbox-group {
|
|
label {
|
|
.font-normal;
|
|
.custom-tumbler {
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
}
|
|
.help-block {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
label .glyphicon-warning-sign {
|
|
margin-left: 3px;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
.huge-pages {
|
|
margin-bottom: @node-attributes-padding;
|
|
label {
|
|
.font-normal;
|
|
}
|
|
.labels, input {
|
|
margin-left: 4px;
|
|
}
|
|
.labels {
|
|
.font-semibold;
|
|
> div:first-child {padding-left: 10px;}
|
|
}
|
|
.contents {
|
|
.row {
|
|
margin-left: 0;
|
|
}
|
|
p {
|
|
margin-top: @node-attributes-padding;
|
|
}
|
|
input[type=text] {
|
|
width: 105px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Disks styles
|
|
.disk-box {
|
|
margin-bottom: 20px;
|
|
i {margin-right: 5px;}
|
|
@colors: disk-green, disk-blue, disk-orange, disk-yellow, disk-violet, disk-cyan, disk-red, disk-magenta, disk-mustard, disk-lime, disk-sand;
|
|
.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;
|
|
span.total-space {
|
|
.font-normal;
|
|
color: @gray;
|
|
margin-left: 8px;
|
|
}
|
|
&.boot {
|
|
padding-bottom: 2px;
|
|
label {
|
|
.font-normal;
|
|
color: @gray;
|
|
margin-bottom: 0;
|
|
cursor: pointer;
|
|
font-size: @base-font-size - 2;
|
|
}
|
|
.help-block {
|
|
display: none;
|
|
}
|
|
.custom-tumbler {
|
|
bottom: 5px;
|
|
float: right;
|
|
margin: 0px 0px 0px 6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
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;
|
|
padding-bottom: 10px;
|
|
.volume-group-notice {
|
|
font-size: @base-font-size - 2px;
|
|
}
|
|
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 {
|
|
margin: 0 @disk-form-margin @disk-form-margin * 2 0;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.node-disks + .page-buttons {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
// Interfaces styles
|
|
|
|
.ifc-management-panel {
|
|
@ifc-panel-indent: 5px;
|
|
|
|
.view-mode-switcher {
|
|
margin-bottom: @ifc-panel-indent * 3;
|
|
|
|
.btn-group label {
|
|
width: auto;
|
|
font-size: @base-font-size;
|
|
padding: 7px 10px 8px 10px;
|
|
}
|
|
}
|
|
|
|
.bonding-buttons-box {
|
|
margin-bottom: @ifc-panel-indent * 3;
|
|
}
|
|
|
|
.different-networks-alert a {
|
|
display: block;
|
|
margin-top: @ifc-panel-indent;
|
|
}
|
|
}
|
|
|
|
.ifc-list, .unassigned-networks {
|
|
.ifc-container {
|
|
@base-ifc-indent: 5px;
|
|
margin-bottom: @base-ifc-indent * 2;
|
|
@ifc-container-dark-color: @tab-color - 30%;
|
|
@ifc-container-light-color: @tab-color;
|
|
|
|
.ifc-inner-container {
|
|
border: 1px solid @ifc-container-light-color;
|
|
background: @ifc-container-light-color;
|
|
border-radius: 4px;
|
|
padding: 0;
|
|
margin: 0 0 @base-ifc-indent * 3;
|
|
|
|
&.compact .clearfix {
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
&.has-changes {
|
|
border: 1px solid @green;
|
|
}
|
|
&.over {
|
|
background-color: @ifc-container-light-color + 10%;
|
|
border-color: @ifc-container-dark-color + 10%;
|
|
}
|
|
|
|
> div {
|
|
padding: @base-ifc-indent * 2 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.ifc-info-block {
|
|
margin-bottom: @base-ifc-indent * 2;
|
|
margin-left: @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, .slaves-names {
|
|
.font-semibold;
|
|
}
|
|
}
|
|
}
|
|
.ifc-header {
|
|
padding-left: @base-ifc-indent * 2;
|
|
padding-right: @base-ifc-indent * 2;
|
|
border-bottom: 1px dotted @ifc-container-dark-color;
|
|
.help-block {
|
|
display: none;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 0;
|
|
label {
|
|
width: auto;
|
|
}
|
|
> div {
|
|
float: left;
|
|
select {
|
|
width: 150px;
|
|
}
|
|
}
|
|
}
|
|
.common-ifc-name {
|
|
&.no-checkbox {
|
|
padding: 7px 0 0 @base-ifc-indent * 2;
|
|
.font-semibold;
|
|
}
|
|
.checkbox-group {
|
|
margin-bottom: 0;
|
|
margin-top: 5px;
|
|
label {
|
|
.font-semibold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ifc-properties {
|
|
@common-offset: 10px;
|
|
border-top: 1px dotted @ifc-container-dark-color;
|
|
padding: @common-offset @common-offset * 2 @common-offset * 2;
|
|
|
|
.properties-list {
|
|
.btn-link {
|
|
text-decoration: underline;
|
|
&.text-danger {.text-danger;}
|
|
.glyphicon {
|
|
float: none;
|
|
position: relative;
|
|
top: 3px;
|
|
margin-left: 3px;
|
|
}
|
|
}
|
|
.property-item-container {
|
|
@property-offset: 5px;
|
|
display: inline-block;
|
|
margin-right: @common-offset * 2;
|
|
margin-left: -@common-offset;
|
|
padding: @property-offset @property-offset * 2;
|
|
border-radius: 6px;
|
|
transition: background-color .35s ease;
|
|
&.active {
|
|
background-color: @ifc-container-light-color - 17%;
|
|
}
|
|
&.forbidden {
|
|
opacity: 0.8;
|
|
.glyphicon {
|
|
margin-right: 4px;
|
|
}
|
|
button {
|
|
text-decoration: none;
|
|
color: @gray;
|
|
}
|
|
}
|
|
.glyphicon-lock {
|
|
margin-right: 3px;
|
|
& + span {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
.property-item {
|
|
cursor: pointer;
|
|
padding: 4px 0 6px;
|
|
margin-left: @property-offset;
|
|
}
|
|
}
|
|
}
|
|
|
|
.configuration-panel {
|
|
margin-top: 0;
|
|
padding-top: @common-offset;
|
|
|
|
.interface-sub-tab {
|
|
text-align: left;
|
|
.forms-box {
|
|
margin-bottom: 0;
|
|
.form-group, .checkbox-group {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
&.form-group .help-block {
|
|
max-width: 585px;
|
|
}
|
|
}
|
|
.form-group .field-list {
|
|
width: auto;
|
|
> div:after {
|
|
.clearfix;
|
|
}
|
|
.help-block, + .help-block {
|
|
width: 545px;
|
|
padding-top: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sriov-virtual-functions,
|
|
.physnet {
|
|
label {width: 250px;}
|
|
}
|
|
}
|
|
.toggle-configuration-control {
|
|
.glyphicon {
|
|
margin-top: 9px;
|
|
left: 50px;
|
|
cursor: pointer;
|
|
transition: transform .35s ease;
|
|
&.rotate {
|
|
transform: rotate(-180deg);
|
|
}
|
|
}
|
|
}
|
|
// Offline modes control
|
|
.offloading-modes {
|
|
margin: 0 10px 0;
|
|
.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: 0;
|
|
> div {
|
|
padding: @base-ifc-indent * 2;
|
|
}
|
|
.ifc-networks {
|
|
@network-block-width: 120px;
|
|
@network-block-height: @network-block-width / 2;
|
|
text-align: center;
|
|
font-weight: 100;
|
|
min-height: @network-block-height;
|
|
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;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.no-networks {
|
|
padding-top: 22px;
|
|
}
|
|
}
|
|
.ifc-error {
|
|
margin: @base-ifc-indent + 5;
|
|
font-size: @base-font-size - 2px;
|
|
.text-danger;
|
|
padding: 10px;
|
|
}
|
|
}
|
|
|
|
&.compact {
|
|
.networks-block {
|
|
.ifc-error {
|
|
margin: 10px 0 0 34px;
|
|
}
|
|
.ifc-select {
|
|
height: 50px;
|
|
}
|
|
.checkbox-group {
|
|
display: block;
|
|
width: 24px;
|
|
float: left;
|
|
padding-top: 8px;
|
|
label {
|
|
margin-bottom: 0px;
|
|
.custom-tumbler {
|
|
margin: 0;
|
|
}
|
|
}
|
|
.help-block {
|
|
display: none;
|
|
}
|
|
}
|
|
.ifc-info-block {
|
|
display: inline-block;
|
|
margin-bottom: 0px;
|
|
.ifc-info {
|
|
padding-top: 12px;
|
|
&.ifc-compact {
|
|
padding-top: 20px;
|
|
}
|
|
}
|
|
}
|
|
.ifc-networks {
|
|
min-height: 50px;
|
|
.network-block {
|
|
margin-bottom: 0px;
|
|
padding: 5px;
|
|
height: 50px;
|
|
}
|
|
.no-networks {
|
|
padding-top: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.unassigned-networks {
|
|
.ifc-container .ifc-inner-container {
|
|
background: #f5f5f5;
|
|
border-color: #e3e3e3;
|
|
.ifc-header {
|
|
width: 100%;
|
|
.common-ifc-name.no-checkbox {
|
|
padding: 0 5px;
|
|
}
|
|
.toggle-configuration-control {
|
|
.glyphicon {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
.networks-block .ifc-networks {
|
|
min-height: 80px;
|
|
.no-networks {
|
|
padding-left: 5px;
|
|
}
|
|
}
|
|
&.compact {
|
|
.networks-block .ifc-networks {
|
|
min-height: 70px;
|
|
}
|
|
}
|
|
&.collapsed {
|
|
.ifc-header {
|
|
border-bottom: none;
|
|
.common-ifc-name.no-checkbox {
|
|
padding-top: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Healthcheck tab
|
|
.healthcheck-tab {
|
|
@padding-top-controls: 10px;
|
|
|
|
.alert {
|
|
margin: 0;
|
|
}
|
|
|
|
.healthcheck-controls {
|
|
margin: 2px 0 0;
|
|
padding: @padding-top-controls * 2;
|
|
.toggle-credentials {
|
|
margin-right: 10px;
|
|
}
|
|
.select-all {
|
|
margin-top: 7px;
|
|
label {
|
|
cursor: pointer;
|
|
margin-bottom: 0;
|
|
.custom-tumbler {
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
.help-block {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.credentials {
|
|
padding: 0;
|
|
.forms-box {
|
|
margin: @padding-top-controls 0 0;
|
|
.form-group {
|
|
margin-top: @padding-top-controls;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
.healthcheck-table {
|
|
&.disabled {
|
|
tr th label,
|
|
tr td label {
|
|
cursor: default;
|
|
}
|
|
.custom-tumbler span {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
tr {
|
|
th:first-child, td:first-child {
|
|
padding-left: 20px;
|
|
}
|
|
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 {
|
|
@base-indent: 10px;
|
|
.subtab-icon {
|
|
position: absolute;
|
|
left: 5px;
|
|
top: 10px;
|
|
z-index: 1;
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
.page-buttons {
|
|
.btn-group {
|
|
margin-left: @base-indent;
|
|
}
|
|
}
|
|
.forms-box {
|
|
.setting-section {
|
|
margin-bottom: @base-indent * 4;
|
|
}
|
|
.form-group {
|
|
label {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 30px;
|
|
padding-top: 0;
|
|
.glyphicon {
|
|
padding-right: 15px;
|
|
}
|
|
}
|
|
.field-list > div {
|
|
clear: left;
|
|
}
|
|
}
|
|
.help-block {
|
|
color: @gray;
|
|
}
|
|
}
|
|
.nav-pills:last-child:after {
|
|
margin-bottom: @base-indent * 2;
|
|
}
|
|
h3 {
|
|
.checkbox-group {
|
|
margin-bottom: 0;
|
|
label {
|
|
line-height: 1;
|
|
}
|
|
.help-block {
|
|
display: none;
|
|
}
|
|
}
|
|
.tooltip-icon {
|
|
color: @gray;
|
|
cursor: default;
|
|
padding: 5px 20px 0 5px;
|
|
}
|
|
.popover-container {
|
|
position: relative;
|
|
display: inline-block;
|
|
.requirements-popover {
|
|
display: block;
|
|
overflow: visible;
|
|
top: -6px;
|
|
left: 25px;
|
|
width: 350px;
|
|
max-width: 350px;
|
|
.break-word;
|
|
.arrow {
|
|
top: 20px;
|
|
left: -11px;
|
|
}
|
|
.popover-content {
|
|
padding-right: 8px;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
.field-list {
|
|
.has-error .field-error {
|
|
margin-top: 7px;
|
|
margin-left: @base-indent * 2;
|
|
clear: none;
|
|
}
|
|
+ .help-block {
|
|
max-width: 350px;
|
|
}
|
|
}
|
|
}
|
|
.add-nodegroup-btn {
|
|
margin-top: 5px;
|
|
.glyphicon {
|
|
width: 20px;
|
|
height: 15px;
|
|
}
|
|
}
|
|
.show-all-networks-wrapper {
|
|
margin-top: @base-indent + 1;
|
|
float: right;
|
|
margin-right: @base-indent * 2;
|
|
label {
|
|
.font-normal;
|
|
}
|
|
}
|
|
.network-group-name {
|
|
margin: 5px 0 10px 0;
|
|
font-size: @base-font-size + 12;
|
|
&.no-rename {
|
|
.btn-link {
|
|
text-decoration: none;
|
|
cursor: default;
|
|
color: @link-color;
|
|
}
|
|
}
|
|
.node-group-renaming {
|
|
min-width: 250px;
|
|
width: 50%;
|
|
margin-bottom: 0;
|
|
div {
|
|
margin-left: 15px;
|
|
}
|
|
input {
|
|
margin-top: 3px;
|
|
height: 30px;
|
|
}
|
|
}
|
|
.name {
|
|
display: inline;
|
|
margin-left: 5px;
|
|
}
|
|
.glyphicon {
|
|
margin: 0 5px 0 5px;
|
|
font-size: @base-font-size + 4;
|
|
cursor: pointer;
|
|
}
|
|
.explanation {
|
|
color: @gray;
|
|
font-size: @base-font-size;
|
|
display: block;
|
|
margin-left: 15px;
|
|
padding-bottom: 10px;
|
|
|
|
}
|
|
.has-error {
|
|
.help-block {
|
|
font-size: @base-font-size - 2;
|
|
margin-left: 15px;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
.confirmation-form {
|
|
margin: 10px 0 0;
|
|
label {
|
|
.font-normal;
|
|
margin-bottom: 13px;
|
|
}
|
|
.help-block {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.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 / 2;
|
|
}
|
|
}
|
|
|
|
.documentation {
|
|
margin: 0 0 @dashboard-offset 0;
|
|
.documentation-link {
|
|
margin-bottom: @dashboard-offset / 2;
|
|
.glyphicon {
|
|
margin-right: @dashboard-offset / 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cluster-information {
|
|
background-color: @base-light-color;
|
|
width: @page-width;
|
|
margin: 0 0 @dashboard-offset -@dashboard-offset * 2;
|
|
padding: @dashboard-offset @dashboard-offset * 2 @dashboard-offset * 2;
|
|
|
|
.title {
|
|
padding: 0;
|
|
}
|
|
|
|
.go-to-healthcheck {
|
|
margin-bottom: @dashboard-offset * 2;
|
|
}
|
|
.cluster-info-value, .cluster-info-title {
|
|
height: auto;
|
|
min-height: 30px;
|
|
line-height: 17px;
|
|
margin-bottom: 4px;
|
|
text-align: left;
|
|
&.cluster-info-title {
|
|
.font-semibold;
|
|
}
|
|
&.cluster-info-value {
|
|
&.name {
|
|
.btn-link {
|
|
height: 30px;
|
|
padding: 0;
|
|
border: none;
|
|
text-align: left;
|
|
display: inline-block;
|
|
max-width: 180px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.glyphicon {
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
vertical-align: text-top;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rename-block {
|
|
.form-group {
|
|
margin: 0;
|
|
left: -13px;
|
|
input[type=text] {
|
|
height: 30px;
|
|
margin: 0;
|
|
}
|
|
.help-block {
|
|
font-size: 12px;
|
|
margin-bottom: 0;
|
|
}
|
|
&:not(.has-error) .help-block {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.cluster-info-value.name, .rename-block .form-group {
|
|
position: relative;
|
|
top: -6px;
|
|
}
|
|
|
|
.dashboard-actions-wrapper {
|
|
margin: 0;
|
|
> div {
|
|
width: 50%;
|
|
&:last-child {
|
|
padding-left: 15px;
|
|
}
|
|
}
|
|
button {
|
|
margin-right: @dashboard-offset / 2;
|
|
}
|
|
.glyphicon-info-sign {
|
|
vertical-align: sub;
|
|
}
|
|
}
|
|
|
|
.statistics {
|
|
.title {
|
|
padding-left: 15px;
|
|
}
|
|
.capacity-block {
|
|
margin-bottom: 15px;
|
|
.capacity-items {
|
|
> div {
|
|
background-color: @white;
|
|
padding: 4px 10px;
|
|
&.cpu {
|
|
border: 1px solid @dashboard-gray;
|
|
}
|
|
&.hdd {
|
|
border: 1px solid @dashboard-gray;
|
|
}
|
|
&.ram {
|
|
border-top: 1px solid @dashboard-gray;
|
|
border-bottom: 1px solid @dashboard-gray;
|
|
}
|
|
.capacity-value {
|
|
.font-semibold;
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.statistics-block {
|
|
.btn-add-nodes {
|
|
padding: 0;
|
|
}
|
|
}
|
|
.cluster-info-title {
|
|
margin-bottom: @dashboard-offset;
|
|
}
|
|
}
|
|
}
|
|
|
|
@dashboard-border-color: #d3d3d3;
|
|
@dashboard-border-radius: 4px;
|
|
|
|
.dashboard-block {
|
|
padding: @dashboard-offset;
|
|
border: 1px solid @dashboard-border-color;
|
|
margin: 0 15px @dashboard-offset * 2;
|
|
border-radius: @dashboard-border-radius;
|
|
|
|
> 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 {
|
|
display: block;
|
|
text-align: left;
|
|
.glyphicon {
|
|
top: 3px;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
.btn-discard-changes {
|
|
padding: 0;
|
|
margin-right: 6px;
|
|
border: none;
|
|
position: relative;
|
|
top: -2px;
|
|
.discard-changes-icon {
|
|
display: inline-block;
|
|
margin-top: -2px;
|
|
}
|
|
}
|
|
}
|
|
.instruction {
|
|
margin-bottom: @dashboard-offset;
|
|
}
|
|
.task-alerts {
|
|
padding: 0;
|
|
.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%;
|
|
}
|
|
&.deploy .progress-bar, &.deployment .progress-bar {
|
|
background-color: @green;
|
|
}
|
|
&.provision .progress-bar {
|
|
background-color: @blue;
|
|
}
|
|
&.reset_environment .progress-bar, &.stop_deployment .progress-bar {
|
|
background-color: @orange;
|
|
}
|
|
}
|
|
.toggle-history{
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
line-height: 1;
|
|
.btn-link {
|
|
padding: 0;
|
|
}
|
|
}
|
|
.history-wrapper {
|
|
.progress {
|
|
margin: 0;
|
|
}
|
|
}
|
|
&.actions-panel {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
.action-description {
|
|
padding-right: 0;
|
|
}
|
|
.dropdown {
|
|
margin-right: 0;
|
|
text-align: right;
|
|
.deployment-modes-label {
|
|
color: @gray;
|
|
cursor: default;
|
|
margin-right: @dashboard-offset;
|
|
}
|
|
.dropdown-toggle {
|
|
padding: 0;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
.dropdown-menu {
|
|
right: 0;
|
|
left: auto;
|
|
min-width: auto;
|
|
}
|
|
}
|
|
.form-group {
|
|
label {
|
|
.font-normal;
|
|
float: left;
|
|
margin-right: @dashboard-offset;
|
|
position: relative;
|
|
top: 8px;
|
|
}
|
|
select {
|
|
width: 400px;
|
|
}
|
|
.help-block {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.row .dashboard-block {
|
|
&:first-child {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
&:last-child {
|
|
border-bottom-left-radius: @dashboard-border-radius;
|
|
border-bottom-right-radius: @dashboard-border-radius;
|
|
margin-bottom: @dashboard-offset * 2;
|
|
}
|
|
& + .dashboard-block {
|
|
border-top: none;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
}
|
|
|
|
.links-block {
|
|
.row:not(:last-child) {
|
|
margin-bottom: @dashboard-offset * 2;
|
|
}
|
|
.link-block {
|
|
.title {
|
|
margin-bottom: @dashboard-offset;
|
|
padding: 0;
|
|
a {
|
|
text-decoration: underline;
|
|
&.http-link {
|
|
font-size: @base-font-size;
|
|
display: inline-block;
|
|
margin-left: @dashboard-offset / 2;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.history-tab {
|
|
@base-indent: 20px;
|
|
@base-size: 142px;
|
|
|
|
.alert {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.transaction-list {
|
|
padding: 0 0 @base-indent;
|
|
margin: 10px 0 @base-indent;
|
|
border-bottom: 1px solid @gray;
|
|
> div {
|
|
float: left;
|
|
padding-right: 22px;
|
|
position: relative;
|
|
&:last-child {
|
|
padding-right: 0;
|
|
}
|
|
i.glyphicon-arrow-right {
|
|
display: block;
|
|
position: absolute;
|
|
top: 13px;
|
|
right: 4px;
|
|
}
|
|
}
|
|
a.transaction-link, .btn.dropdown-toggle {
|
|
display: block;
|
|
background: @gray + 80%;
|
|
width: @base-size;
|
|
height: 46px;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
padding: 7px;
|
|
&:hover {
|
|
text-decoration: none;
|
|
background: @gray + 60%;
|
|
}
|
|
span {
|
|
.font-semibold;
|
|
color: @base-text-color;
|
|
line-height: 16px;
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
&.time-start {
|
|
font-size: @base-font-size - 2;
|
|
}
|
|
&:first-child {
|
|
&.time-start {
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
}
|
|
&.error span {
|
|
.text-danger;
|
|
}
|
|
&.active {
|
|
&.ready {
|
|
background: @green;
|
|
&:hover {
|
|
background: @green - 20%;
|
|
}
|
|
}
|
|
&.error {
|
|
background: @red;
|
|
&:hover {
|
|
background: @red - 20%;
|
|
}
|
|
}
|
|
&:focus {
|
|
text-decoration: none;
|
|
}
|
|
span {
|
|
color: @white;
|
|
}
|
|
}
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.dropdown {
|
|
display: inline-block;
|
|
.btn.dropdown-toggle {
|
|
width: @base-size;
|
|
padding: 0 10px;
|
|
overflow: hidden;
|
|
span {
|
|
margin-top: 3px;
|
|
&.previous-deployments {
|
|
display: inline-block;
|
|
width: @base-size - 40px;
|
|
overflow: hidden;
|
|
white-space: pre-wrap;
|
|
text-align: left;
|
|
line-height: 18px;
|
|
float: left;
|
|
margin-top: 0;
|
|
}
|
|
&.caret {
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 19px;
|
|
right: 10px;
|
|
}
|
|
}
|
|
}
|
|
.dropdown-menu {
|
|
top: 48px;
|
|
a {
|
|
span {
|
|
display: inline-block;
|
|
margin-right: 3px;
|
|
}
|
|
&.error {
|
|
.text-danger;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.transaction-summary {
|
|
border-radius: 5px;
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
margin-bottom: @base-indent;
|
|
|
|
> div {
|
|
margin-bottom: 5px;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
&.ready {
|
|
.status {
|
|
.text-success;
|
|
}
|
|
}
|
|
&.error {
|
|
.status, .message {
|
|
.text-danger;
|
|
}
|
|
}
|
|
.transaction-summary-label {
|
|
.font-semibold;
|
|
}
|
|
.dry-run-label {
|
|
margin-left: 10px;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
.screen-loading-bar {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.deployment-history-table {
|
|
@base-indent: 20px;
|
|
|
|
.history-table {
|
|
font-size: @base-font-size - 2;
|
|
line-height: @base-font-size - 2;
|
|
table {
|
|
margin: 0;
|
|
tbody tr td, thead th {
|
|
padding: 5px 15px;
|
|
text-align: left;
|
|
&:nth-child(1), &:nth-child(2) {width: 210px; max-width: 210px;} // task name and node
|
|
&:nth-child(3) {width: 120px; max-width: 120px;} // task status
|
|
&:nth-child(1), &:nth-child(3) {.break-word;} // task name and status
|
|
&:nth-child(5), &:nth-child(6) {width: 170px;} // task start and end time
|
|
&:nth-child(7) {width: 80px; text-align: center;} // task details button
|
|
}
|
|
thead th {
|
|
border-bottom-width: 1px;
|
|
}
|
|
tbody tr:hover {
|
|
background-color: @base-light-color;
|
|
}
|
|
.btn-link {
|
|
font-size: @base-font-size - 2;
|
|
line-height: @base-font-size - 2;
|
|
padding: 0;
|
|
border: 0;
|
|
max-width: 100%;
|
|
&.btn-node-info {
|
|
user-select: text;
|
|
}
|
|
> div {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
.status {
|
|
&.error {.text-danger;}
|
|
&.ready {.text-success;}
|
|
}
|
|
}
|
|
.alert {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.deployment-history-toolbar {
|
|
margin-bottom: @base-indent;
|
|
.buttons {
|
|
height: 34px;
|
|
.view-modes {
|
|
margin-right: @base-indent;
|
|
}
|
|
.zoom-controls {
|
|
margin-left: @base-indent;
|
|
}
|
|
.btn {
|
|
padding: 7px 10px 8px;
|
|
&.btn-sorters {
|
|
margin-right: 5px;
|
|
}
|
|
&.btn-export-history-csv {
|
|
padding: 6px 10px;
|
|
}
|
|
}
|
|
}
|
|
.filters, .sorters {
|
|
margin-top: 17px;
|
|
.well {
|
|
margin: 0;
|
|
.sorter-control {
|
|
.glyphicon {
|
|
padding-left: 5px;
|
|
float: none;
|
|
margin: 0 5px;
|
|
}
|
|
}
|
|
.more-control .btn {
|
|
padding-left: 5px;
|
|
}
|
|
.checkbox-group {
|
|
label {
|
|
width: 100%;
|
|
> span {
|
|
display: block;
|
|
max-width: none;
|
|
width: 165px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.active-sorters-filters {
|
|
margin-bottom: @base-indent;
|
|
}
|
|
|
|
}
|
|
|
|
.deployment-task-details-dialog {
|
|
.modal-dialog {
|
|
width: @page-width;
|
|
.modal-body {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
.row {
|
|
margin: 0;
|
|
padding: 5px 0 8px 0;
|
|
border-bottom: 1px solid @base-light-color;
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
> strong, > span {
|
|
display: inline-block;
|
|
.break-word;
|
|
}
|
|
.status {
|
|
&.error {.text-danger;}
|
|
&.ready {.text-success;}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.deployment-timeline {
|
|
@header-row-height: 20px;
|
|
@border-color: @gray + 50%;
|
|
@max-height: 300px;
|
|
|
|
.striped-background() {
|
|
@row-height: 28px;
|
|
background-color: fade(@gray, 10%);
|
|
background-image: linear-gradient(transparent 50%, @white 0%);
|
|
background-size: @row-height * 2 @row-height * 2;
|
|
}
|
|
|
|
border: 1px solid @border-color;
|
|
|
|
.node-names-column {
|
|
float: left;
|
|
|
|
.header {
|
|
border-right: 1px solid @border-color;
|
|
}
|
|
|
|
.node-names-container {
|
|
overflow: hidden;
|
|
max-height: @max-height;
|
|
|
|
.node-names {
|
|
.striped-background;
|
|
position: relative;
|
|
border-right: 1px solid @border-color;
|
|
|
|
> div {
|
|
width: 100%;
|
|
padding: 6px 10px 5px;
|
|
&, > .btn-link > div {
|
|
font-size: @base-font-size - 2;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
> .btn-link {
|
|
max-width: 100%;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.timelines-column {
|
|
position: relative;
|
|
float: left;
|
|
|
|
.header {
|
|
overflow: hidden;
|
|
|
|
.scale {
|
|
position: relative;
|
|
height: @header-row-height;
|
|
> div {
|
|
position: absolute;
|
|
top: 0;
|
|
border-left: 1px solid @border-color;
|
|
color: @gray;
|
|
font-size: @base-font-size - 5;
|
|
text-align: right;
|
|
padding: 3px 2px 3px 4px;
|
|
height: 100%;
|
|
&:first-child {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.timelines-container {
|
|
overflow: auto;
|
|
max-height: @max-height;
|
|
|
|
.timelines {
|
|
position: relative;
|
|
.striped-background;
|
|
|
|
.current-time-marker {
|
|
position: absolute;
|
|
background-color: @orange;
|
|
width: 1px;
|
|
}
|
|
|
|
.node-task {
|
|
overflow: visible;
|
|
position: absolute;
|
|
border: 1px solid transparent;
|
|
height: 8px;
|
|
margin-top: 10px;
|
|
cursor: pointer;
|
|
&:hover {
|
|
border-color: @blue;
|
|
}
|
|
.error-marker {
|
|
border: 1px solid red;
|
|
background: red;
|
|
border-radius: 50%;
|
|
height: 6px;
|
|
width: 6px;
|
|
position: relative;
|
|
top: -8px;
|
|
margin-left: -4px;
|
|
}
|
|
.popover-anchor {
|
|
position: relative;
|
|
margin-left: -2px;
|
|
width: 1px;
|
|
height: 0;
|
|
top: -1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.node-names-column, .timelines-column {
|
|
div.header {
|
|
background: none;
|
|
border-bottom: 1px solid @border-color;
|
|
height: @header-row-height;
|
|
}
|
|
}
|
|
}
|
|
|
|
.deployment-graphs {
|
|
.btn-upload-graph .glyphicon {
|
|
margin-right: 5px;
|
|
}
|
|
.workflows-table {
|
|
margin: 0;
|
|
tbody {
|
|
tr {
|
|
&:last-child {
|
|
border-bottom: 1px solid @gray + 81%;
|
|
}
|
|
td {
|
|
width: 40%;
|
|
&:nth-child(3), &:nth-child(4) { // actions columns
|
|
width: 10%;
|
|
text-align: center;
|
|
}
|
|
.btn {
|
|
margin: 0 3px;
|
|
padding: 0;
|
|
position: relative;
|
|
top: -1px;
|
|
.font-normal;
|
|
}
|
|
}
|
|
&.subheader {
|
|
td {
|
|
&:nth-child(1) { // graph type column
|
|
.font-bold;
|
|
}
|
|
&:nth-child(2) { // actions column
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
thead {
|
|
th {
|
|
&:nth-child(3), &:nth-child(4) { // actions columns
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.alert {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.deployment-graphs-toolbar {
|
|
.buttons {
|
|
margin-bottom: 15px;
|
|
.btn-filters {
|
|
padding: 7px 10px 8px;
|
|
}
|
|
}
|
|
.filters well, .active-sorters-filters {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.upload-graph-form {
|
|
margin-bottom: 0;
|
|
.form-group {
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
&.has-error .help-block {
|
|
margin-left: 200px;
|
|
}
|
|
}
|
|
}
|