3526 lines
87 KiB
Plaintext
3526 lines
87 KiB
Plaintext
@import 'fonticon.css';
|
|
@import 'bootstrap.css';
|
|
@import 'retina.less';
|
|
|
|
|
|
// Global colors
|
|
// --------------------------------------------------
|
|
|
|
/* Base Colors */
|
|
@fuel-white-color: #ffffff;
|
|
@fuel-grey-light: #dadada;
|
|
@fuel-grey-color: #d3d3d3;
|
|
@fuel-black-color: #333333;
|
|
@fuel-base-color: #999999;
|
|
@fuel-body-color: #39444F;
|
|
|
|
|
|
/* Light colors */
|
|
@fuel-light-1: @fuel-base-color + #111111; /* #AAAAAA */
|
|
@fuel-light-2: @fuel-base-color + #222222; /* #BBBBBB */
|
|
@fuel-light-3: @fuel-base-color + #333333; /* #CCCCCC */
|
|
@fuel-light-4: @fuel-base-color + #444444; /* #DDDDDD */
|
|
@fuel-light-5: @fuel-base-color + #555555; /* #EEEEEE */
|
|
|
|
/* Dark colors */
|
|
@fuel-dark-1: @fuel-base-color - #111111; /* #888888 */
|
|
@fuel-dark-2: @fuel-base-color - #222222; /* #777777 */
|
|
@fuel-dark-3: @fuel-base-color - #333333; /* #666666 */
|
|
@fuel-dark-4: @fuel-base-color - #444444; /* #555555 */
|
|
@fuel-dark-5: @fuel-base-color - #555555; /* #444444 */
|
|
|
|
/* unsorted */
|
|
|
|
@fuel-goldenrod: #c09853;
|
|
@fuel-orange: #ff9300;
|
|
@fuel-red: #de4744;
|
|
@fuel-dark-red: #cc2229;
|
|
@fuel-deep-red: #b94a48;
|
|
@fuel-green: #41b142;
|
|
@fuel-dark-green: #17824b;
|
|
@fuel-blue: #009be9;
|
|
@fuel-light-blue: #a9cdfb;
|
|
@fuel-dark-blue: #0088cc;
|
|
@fuel-gray-blue: #3a87ad;
|
|
@fuel-smoke: #7789a0;
|
|
@fuel-blue-smoke: #afbdd2;
|
|
|
|
|
|
/* body colors */
|
|
@color-body-background: #39444f;
|
|
@color-body-background-gradient1: rgba(128, 134, 143, 0.3);
|
|
@color-body-background-gradient2: rgba(128, 134, 143, 0.3);
|
|
@color-body-background-gradient3: rgba(128, 134, 143, 0.0);
|
|
@color-fiter-box-border: #2b2d31;
|
|
|
|
// Typography
|
|
// -------------------------
|
|
|
|
@font-family-mac: "Helvetica Neue", Helvetica;
|
|
@font-family-win: "Segoe UI", Arial, Verdana, Tahoma;
|
|
@font-family-lin: Oswald;
|
|
@font-family-base: @font-family-win, @font-family-mac, @font-family-lin;
|
|
@font-family-headline: "Segoe UI Light", "Segoe UI", Helvetica, Georgia, Tahoma, Arial;
|
|
@font-family-fontello: "fontello";
|
|
@font-family-filter-bar: "Lucida Console", Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
|
|
/* Base Font size */
|
|
@font-size-base: 14px;
|
|
|
|
/* Small Font size */
|
|
@font-size-small-3: @font-size-base - 3; // 11px
|
|
@font-size-small-2: @font-size-base - 2; // 12px
|
|
@font-size-small-1: @font-size-base - 1; // 13px
|
|
|
|
/* Big Font size */
|
|
@font-size-big-1: @font-size-base + 1; // 15px
|
|
@font-size-big-2: @font-size-base + 2; // 16px
|
|
@font-size-big-3: @font-size-big-2 * 2; // 34px
|
|
|
|
/* Font Colors */
|
|
@font-color-base: @fuel-dark-5;
|
|
@font-color-light: @font-color-base + #444444;
|
|
@font-color-dark: @font-color-base - #222222;
|
|
|
|
/* Font Options */
|
|
@font-aliasing: antialiased;
|
|
@font-subpixel: subpixel-antialiased;
|
|
@text-shadow-white: 0 1px 0 rgba(255, 255, 255, 0.45);
|
|
@text-shadow-black: 0 1px 0 rgba(0, 0, 0, 0.35);
|
|
@text-shadow-none: 0 0 0 rgba(0, 0, 0, 0);
|
|
|
|
// Components: Useful mixins
|
|
// -------------------------
|
|
|
|
// box-sizing
|
|
.box-sizing-mixin() {
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
}
|
|
|
|
// Sizing shortcuts
|
|
.width-height-mixin(@width: 100%; @height: 100%) {
|
|
width: @width;
|
|
height: @height;
|
|
}
|
|
|
|
// Margin-padding
|
|
.indent-mixin(@margin: 0, @padding: 0){
|
|
margin: @margin;
|
|
padding: @padding;
|
|
}
|
|
|
|
// Box Shadow
|
|
.box-shadow-mixin(@box-shadow-value) {
|
|
-webkit-box-shadow: @box-shadow-value;
|
|
-moz-box-shadow: @box-shadow-value;
|
|
box-shadow: @box-shadow-value;
|
|
}
|
|
|
|
// Box Shadow mix
|
|
.box-shadow-mixin-two(@box-shadow-value1, @box-shadow-value2) {
|
|
-webkit-box-shadow: @box-shadow-value1, @box-shadow-value2;
|
|
-moz-box-shadow: @box-shadow-value1, @box-shadow-value2;
|
|
box-shadow: @box-shadow-value1, @box-shadow-value2;
|
|
}
|
|
|
|
// Border radius
|
|
.border-radius-mixin(@radius: 4px) {
|
|
-webkit-border-radius: @radius;
|
|
-moz-border-radius: @radius;
|
|
border-radius: @radius;
|
|
}
|
|
|
|
// Floated block
|
|
.float-mixin(@float: left) {
|
|
display: block;
|
|
float: @float;
|
|
}
|
|
|
|
// Position Mixin
|
|
.position(@position: null, @top: null, @right: null, @bottom: null, @left: null) {
|
|
.property(position, @position);
|
|
.property(top, @top);
|
|
.property(right, @right);
|
|
.property(bottom, @bottom);
|
|
.property(left, @left);
|
|
|
|
.property(@property, @value) {
|
|
._getProp(position) when not (@position = null) { position: @value; };
|
|
._getProp(top) when not (@top = null) { top: @value; };
|
|
._getProp(left) when not (@left = null) { left: @value; };
|
|
._getProp(bottom) when not (@bottom = null) { bottom: @value; };
|
|
._getProp(right) when not (@right = null) { right: @value; };
|
|
._getProp(@property);
|
|
};
|
|
}
|
|
|
|
// Font Mixin
|
|
.font-layout-mixin(@font-size: null, @color: null, @font-weight: null, @font-style: null, @line-height: null, @text-shadow: null, @font-family: null) {
|
|
.property(font-size, @font-size);
|
|
.property(color, @color);
|
|
.property(font-weight, @font-weight);
|
|
.property(font-style, @font-style);
|
|
.property(line-height, @line-height);
|
|
.property(text-shadow, @text-shadow);
|
|
.property(font-family, @font-family);
|
|
|
|
.property(@property, @value) {
|
|
._getProp(font-size) when not (@font-size = null) { font-size: @value; };
|
|
._getProp(color) when not (@color = null) { color: @value; };
|
|
._getProp(font-weight) when not (@font-weight = null) { font-weight: @value; };
|
|
._getProp(font-style) when not (@font-style = null) { font-style: @value; };
|
|
._getProp(line-height) when not (@line-height = null) { line-height: @value; };
|
|
._getProp(text-shadow) when not (@text-shadow = null) { text-shadow: @value; };
|
|
._getProp(font-family) when not (@font-family = null) { font-family: @value; };
|
|
._getProp(@property);
|
|
};
|
|
}
|
|
|
|
// base64 svg Background gradient
|
|
.base64DataUriBackground (@encode, @type: ~"image/svg+xml") {
|
|
@dataUriPrefix: ~"url(data:@{type};base64,";
|
|
@dataUriSuffix: ~")";
|
|
@b64DataUri: ~`(function(a,b,c){function e(a){a=a.replace(/\r\n/g,'\n');var b='';for(var c=0;c<a.length;c++){var d=a.charCodeAt(c);if(d<128){b+=String.fromCharCode(d)}else if(d>127&&d<2048){b+=String.fromCharCode(d>>6|192);b+=String.fromCharCode(d&63|128)}else{b+=String.fromCharCode(d>>12|224);b+=String.fromCharCode(d>>6&63|128);b+=String.fromCharCode(d&63|128)}}return b}function f(a){var b='';var c,f,g,h,i,j,l;var m=0;a=e(a);while(m<a.length){c=a.charCodeAt(m++);f=a.charCodeAt(m++);g=a.charCodeAt(m++);h=c>>2;i=(c&3)<<4|f>>4;j=(f&15)<<2|g>>6;l=g&63;if(isNaN(f)){j=l=64}else if(isNaN(g)){l=64}b=b+d.charAt(h)+d.charAt(i)+d.charAt(j)+d.charAt(l)}return b}var d='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';return a+f(b)+c})('@{dataUriPrefix}','@{encode}','@{dataUriSuffix}')`;
|
|
background: @b64DataUri;
|
|
}
|
|
|
|
// Background vertical gradient
|
|
.css-linear-gradient-mixin(@from-color: #f2f4f4, @to-color: #c4cbcc, @direction-from: top, @direction-to: bottom, @pos-from: 0%, @pos-to: 100%) {
|
|
background-color: @from-color;
|
|
background: -moz-linear-gradient(@direction-from, @from-color @pos-from, @to-color @pos-to); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left @direction-from, left @direction-to, color-stop(@pos-from,@from-color), color-stop(@pos-to,@to-color)); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(@direction-from, @from-color @pos-from, @to-color @pos-to); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(@direction-from, @from-color @pos-from, @to-color @pos-to); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(@direction-from, @from-color @pos-from, @to-color @pos-to); /* IE10+ */
|
|
background: linear-gradient(to @direction-to, @from-color @pos-from, @to-color @pos-to); /* W3C */
|
|
}
|
|
|
|
// Background with svg and filter
|
|
.css-linear-gradient-mixin-filter(@gradient-top, @gradient-bottom) {
|
|
@svg: ~'<?xml version="1.0" ?><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="@{gradient-top}" stop-opacity="1"/><stop offset="100%" stop-color="@{gradient-bottom}" stop-opacity="1"/></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" /></svg>';
|
|
|
|
.base64DataUriBackground(@svg);
|
|
|
|
background: -moz-linear-gradient(top, @gradient-top 0%, @gradient-bottom 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@gradient-top), color-stop(100%,@gradient-bottom)); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(top, @gradient-top 0%,@gradient-bottom 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(top, @gradient-top 0%,@gradient-bottom 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(top, @gradient-top 0%,@gradient-bottom 100%); /* IE10+ */
|
|
background: linear-gradient(to bottom, @gradient-top 0%,@gradient-bottom 100%); /* W3C */
|
|
filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{gradient-top}', endColorstr='@{gradient-bottom}',GradientType=0 )"; /* IE6-8 */
|
|
}
|
|
|
|
|
|
.css-background-image-linear-bottom (@start-color, @end-color) {
|
|
background-image: -webkit-linear-gradient(bottom, @start-color, @end-color);
|
|
background-image: -moz-linear-gradient(bottom,@start-color, @end-color);
|
|
background-image: -o-linear-gradient(bottom, @start-color, @end-color);
|
|
background-image: -ms-linear-gradient(bottom, @start-color, @end-color);
|
|
background-image: linear-gradient(to top, @start-color, @end-color);
|
|
}
|
|
|
|
// Components: Common variables
|
|
// -------------------------
|
|
|
|
@page-width: 1030px;
|
|
@wrapper-margin: 20px;
|
|
@footer-height: 70px;
|
|
|
|
// Components: Navigation variables
|
|
// -------------------------
|
|
|
|
@navigation-box-shadow: 0 3px 9px rgba(0,0,0,.55), inset 0 -5px rgba(34,34,35,.75);
|
|
@navigation-bar-box-shadow: 0 2px 6px rgba(0,0,0,.0), inset 0 1px rgba(255,255,255,.1);
|
|
@navigation-bar-height: 40px;
|
|
@navbar-li-color-from: #6f7e95;
|
|
@navbar-li-color-to: #586476;
|
|
@navbar-darker-gradient: rgba(0,0,0,0.45);
|
|
@navbar-lighter-gradient: rgba(0,0,0,0);
|
|
@navbar-box-shadow-start: 0 1px 2px rgba(0,0,0,.45);
|
|
@navbar-box-shadow-end: inset 0 0 0 1px rgba(255,255,255,.15);
|
|
@navbar-badge-gradient-from: #f46705;
|
|
@navbar-badge-gradient-to: #f9841f;
|
|
|
|
// Components: Node Block variables & mixins
|
|
// -------------------------
|
|
|
|
// Node label mixin
|
|
.node-label-input-common() {
|
|
margin-top: 0;
|
|
margin-right: 3px;
|
|
.position(relative, -2px);
|
|
}
|
|
|
|
@node-details-label-margin: 160px;
|
|
@node-details-size: 22px;
|
|
|
|
@color-nodes-border: @fuel-light-1;
|
|
@color-nodes-rule-list: @fuel-dark-3;
|
|
@color-nodes-node-names: #4a4a4a;
|
|
@color-msg-ok: @fuel-dark-green;
|
|
@color-msg-info: #4794cf;
|
|
@color-msg-error: #8b0000;
|
|
@color-msg-warning: #b44200;
|
|
@color-msg-unimportant: @fuel-dark-1;
|
|
@color-msg-provisioned: @fuel-dark-blue;
|
|
|
|
// Components: Cluster Tabs variables
|
|
// -------------------------
|
|
@cluster-tabs-box-shadow: 0 0 0 rgba(0,0,0,.0), inset 0px 1px 0px rgba(255,255,255,.45);
|
|
@cluster-tabs-border: #404c5c #404c5c #404c5c;
|
|
@cluster-tab-heihgt: 50px;
|
|
@cluster-box-height: 181px;
|
|
@support-img-size: 118px;
|
|
|
|
// Components: Deploy variables
|
|
// -------------------------
|
|
@deploy-btn-shadow: 0 1px 2px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.17), inset 0 0 2px rgba(255,255,255,.13);
|
|
@deploy-btn-shadow-hover: 0 1px 2px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.17), inset 0 0 2px rgba(255,255,255,.13);
|
|
@deploy-btn-shadow-active: 0 1px 2px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.17), inset 0 0 2px rgba(255,255,255,.13);
|
|
|
|
// Components: Btn mixins
|
|
// -------------------------
|
|
|
|
.btn-mixin(@color: @font-color-dark, @background-color: #e4e4e5, @box-shadow-color-start: 0 1px 2px rgba(0,0,0,.25), @box-shadow-color-end: inset 0 0 0 1px rgba(255,255,255,.3), @border-color: #b3b3b3, @gradient-color-start: @fuel-light-5, @gradient-color-end: #dcdcdd) {
|
|
color: @color;
|
|
background: @background-color;
|
|
.box-shadow-mixin-two (@box-shadow-color-start, @box-shadow-color-end);
|
|
border: solid 1px @border-color;
|
|
.css-linear-gradient-mixin-filter(@gradient-color-start, @gradient-color-end);
|
|
}
|
|
|
|
.btn-active-state-mixin(@bg-color: #e6e6e6, @bg-color-9: #d9d9d9) {
|
|
background-color: @bg-color;
|
|
background-color: @bg-color-9 e("\9");
|
|
background-image: none;
|
|
outline: 0;
|
|
}
|
|
|
|
.btn-state-disabled-mixin() {
|
|
cursor: default;
|
|
background-color: @fuel-light-4;
|
|
.font-layout-mixin(@color: @fuel-dark-2, @text-shadow: 0 1px 0px rgba(255, 255, 255, 0.65));
|
|
border-color: @fuel-light-1;
|
|
background-image: none;
|
|
.box-shadow-mixin(inset 0 1px 0px rgba(255, 255, 255, 0.45));
|
|
filter: alpha(opacity=65);
|
|
}
|
|
|
|
// Components: Verification block mixins
|
|
// -------------------------
|
|
|
|
.connect-stop-mixin(@width, @height, @margin-left) {
|
|
display: inline-block;
|
|
.width-height-mixin(@width, @height);
|
|
margin-left: @margin-left;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// Fuel UI style sheet
|
|
// -------------------------
|
|
|
|
html {
|
|
background-color: @color-body-background;
|
|
background-image: url(../img/bg-main.png);
|
|
background-repeat: repeat;
|
|
font-family: @font-family-base;
|
|
height: 100%;
|
|
.box-sizing-mixin;
|
|
}
|
|
|
|
body {
|
|
overflow-y: scroll;
|
|
background: -moz-radial-gradient(center top, @color-body-background-gradient1 0%, @color-body-background-gradient2 30%, @color-body-background-gradient3 55%);
|
|
background: -webkit-gradient(radial, center top, 0, center top, 30%, center top, 55%, color-stop(100%,@color-body-background-gradient1), color-stop(100%,@color-body-background-gradient2), color-stop(100%,@color-body-background-gradient3));
|
|
background: -webkit-radial-gradient(center top, @color-body-background-gradient1 0%, @color-body-background-gradient2 30%, @color-body-background-gradient3 55%);
|
|
background: -o-radial-gradient(center top, @color-body-background-gradient1 0%, @color-body-background-gradient2 30%, @color-body-background-gradient3 55%);
|
|
background: -ms-radial-gradient(center top, @color-body-background-gradient1 0%, @color-body-background-gradient2 30%, @color-body-background-gradient3 55%);
|
|
background: radial-gradient(center top, @color-body-background-gradient1 0%, @color-body-background-gradient2 30%, @color-body-background-gradient3 55%);
|
|
font-family: @font-family-base;
|
|
-webkit-font-smoothing: @font-aliasing;
|
|
height: 100%;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: -moz-none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
::selection {background: #fff2a8; }
|
|
::-moz-selection {background: #fff2a8; }
|
|
|
|
button {
|
|
font-family: @font-family-base;
|
|
}
|
|
|
|
.btn {
|
|
padding: 4px 12px 4px;
|
|
}
|
|
|
|
.enable-selection {
|
|
-webkit-user-select: text;
|
|
-moz-user-select: text;
|
|
-ms-user-select: text;
|
|
user-select: text;
|
|
}
|
|
|
|
.center {
|
|
text-align: center !important;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
.font-layout-mixin(@font-weight: lighter, @font-family: @font-family-headline);
|
|
}
|
|
|
|
.page-title {
|
|
.font-layout-mixin(@color: @fuel-white-color, @text-shadow: @text-shadow-black);
|
|
display: inline-block;
|
|
margin: 0 0 10px 8px !important;
|
|
}
|
|
|
|
label {cursor: default;}
|
|
|
|
.tab-content {
|
|
overflow: visible;
|
|
}
|
|
|
|
.page-sub-title {
|
|
margin-top: 10px;
|
|
margin-bottom: 19px;
|
|
.select-all {margin-top: 12px;}
|
|
.action-btn {margin-top: 7px;}
|
|
}
|
|
|
|
#content .register-trial {
|
|
margin-bottom: 0px;
|
|
background-color: #70869b;
|
|
color: #e8f1f6;
|
|
border: medium none;
|
|
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
|
|
.icon-mirantis {
|
|
font-size: 56px;
|
|
float: left;
|
|
margin: -8px;
|
|
margin-right: 8px;
|
|
}
|
|
p {
|
|
margin: 0px;
|
|
}
|
|
a {
|
|
color: #e8d88e;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
// Footer
|
|
// -------------------------
|
|
.container,
|
|
#footer,
|
|
.navbar-fixed-top .container {
|
|
width: @page-width;
|
|
}
|
|
|
|
.footer-lang {
|
|
display: block;
|
|
padding: 10px 0px 0px 5px;
|
|
font-size: @font-size-small-3;
|
|
margin-top: 0px;
|
|
.current-locale {
|
|
display: inline;
|
|
.font-layout-mixin(@text-shadow: @text-shadow-none);
|
|
}
|
|
}
|
|
|
|
#wrap {
|
|
min-height: 100%;
|
|
height: auto !important;
|
|
/* Negative indent footer by it's height */
|
|
margin: 0 auto -@footer-height;
|
|
}
|
|
|
|
#push, #footer {
|
|
height: @footer-height;
|
|
}
|
|
|
|
#footer {
|
|
display: block;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
cursor: default;
|
|
.box-sizing-mixin;
|
|
&:after {clear: both;}
|
|
}
|
|
|
|
.footer-box {
|
|
background: rgba(0,0,0,0.1);
|
|
.border-radius-mixin;
|
|
height: 50px;
|
|
}
|
|
|
|
.footer-logo {
|
|
.float-mixin;
|
|
.width-height-mixin(67px, 34px);
|
|
background: url(../img/mirantis-logo-small2.png) no-repeat top left;
|
|
margin: 8px 0px 0px 10px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.footer-logo:hover {
|
|
.float-mixin;
|
|
.width-height-mixin(67px, 34px);
|
|
background: url(../img/mirantis-logo-small2.png) no-repeat 0px -34px;
|
|
margin: 8px 0px 0px 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.footer-copyright {
|
|
display: block;
|
|
padding: 14px 20px 0px 20px;
|
|
.font-layout-mixin(@font-size-small-3, @fuel-light-5);
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.footer-version {
|
|
display: block;
|
|
.font-layout-mixin(@font-size-small-3, @fuel-smoke);
|
|
margin-top: 0px;
|
|
padding: 14px 20px 0px 20px;
|
|
}
|
|
|
|
.footer-lang {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
// White Box for Cluster content
|
|
// -------------------------
|
|
|
|
.whitebox {
|
|
display: block;
|
|
width: 100%;
|
|
background-color: @fuel-white-color;
|
|
border: 1px solid #52555a;
|
|
.indent-mixin(60px 0px 20px 0px, 20px 0px 20px 0px);
|
|
.box-sizing-mixin;
|
|
.border-radius-mixin;
|
|
-webkit-border-top-left-radius: 0;
|
|
-moz-border-radius-topleft: 0;
|
|
border-top-left-radius: 0;
|
|
hr {
|
|
border-width: 1px 0 0 0;
|
|
margin: 10px 0 15px 0;
|
|
}
|
|
}
|
|
|
|
.roles-block-row {
|
|
margin-left: -20px;
|
|
padding: 0 20px 3px;
|
|
*zoom: 1;
|
|
&:before, &:after {
|
|
display: table;
|
|
line-height: 0;
|
|
content: "";
|
|
}
|
|
&:after { clear: both; }
|
|
}
|
|
|
|
.tab-pane h3 {
|
|
.indent-mixin();
|
|
.font-layout-mixin(@color: @font-color-dark, @text-shadow: @text-shadow-none);
|
|
}
|
|
|
|
// Navigation Bar
|
|
// -------------------------
|
|
|
|
.navigation-bar {
|
|
margin-top: -1px;
|
|
margin-bottom: 6px;
|
|
display: block;
|
|
.width-height-mixin(100%, 47px);
|
|
border: solid 1px #1f2328;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
.font-layout-mixin(@color: @font-color-light, @font-weight: 200);
|
|
.box-sizing-mixin;
|
|
.box-shadow-mixin(@navigation-box-shadow);
|
|
background: url(../img/nav_bg.png) repeat-x top left;
|
|
.navigation-bar-box {
|
|
display: block;
|
|
overflow: hidden;
|
|
.width-height-mixin(100%, @navigation-bar-height);
|
|
.box-sizing-mixin;
|
|
.box-shadow-mixin(@navigation-bar-box-shadow);
|
|
}
|
|
.navigation-bar-ul {
|
|
.indent-mixin();
|
|
li:first-child {
|
|
border-left: none;
|
|
}
|
|
li {
|
|
.float-mixin;
|
|
overflow: hidden;
|
|
height: @navigation-bar-height;
|
|
border-left: 1px solid @fuel-smoke;
|
|
border-right: 1px solid @fuel-black-color;
|
|
-webkit-font-smoothing: @font-subpixel;
|
|
.font-layout-mixin(@font-size-base, @font-weight: 400);
|
|
a {
|
|
display: block;
|
|
overflow: hidden;
|
|
padding: 10px 20px 0px 20px;
|
|
.width-height-mixin;
|
|
.box-sizing-mixin;
|
|
.font-layout-mixin(@color: @fuel-light-2, @text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5));
|
|
}
|
|
a:hover {
|
|
display: block;
|
|
color: @fuel-white-color;
|
|
text-decoration: none;
|
|
.width-height-mixin;
|
|
.css-linear-gradient-mixin(@navbar-li-color-from, @navbar-li-color-to);
|
|
}
|
|
}
|
|
li:after {
|
|
clear: both;
|
|
}
|
|
li.product-logo{
|
|
a {
|
|
color: @fuel-white-color;
|
|
}
|
|
}
|
|
.product-logo {
|
|
.font-layout-mixin(@font-size-big-2, @fuel-white-color, @font-weight: 800, @text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5));
|
|
a {
|
|
.indent-mixin(0px, 0px 20px 0px 20px);
|
|
.logo {
|
|
display: block;
|
|
.width-height-mixin(92px, @navigation-bar-height);
|
|
.at2x('../img/product-logo.png', top, left, 92px);
|
|
}
|
|
}
|
|
}
|
|
.space{
|
|
border-right: none;
|
|
}
|
|
.active {
|
|
.font-layout-mixin(@color: @fuel-grey-light, @text-shadow: 0 1px 0 rgba(255, 255, 255, 0));
|
|
.css-linear-gradient-mixin(@navbar-darker-gradient, @navbar-lighter-gradient);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=@navbar-darker-gradient, endColorstr=@navbar-lighter-gradient,GradientType=0 ); /* IE6-9 */
|
|
}
|
|
}
|
|
.navigation-bar-icon {
|
|
float: right !important;
|
|
border: none !important;
|
|
i {
|
|
display: block;
|
|
.font-layout-mixin(@font-size-base + 18, #2b3139, @text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2));
|
|
.width-height-mixin;
|
|
.box-sizing-mixin;
|
|
padding: 6px 10px 0px 20px;
|
|
cursor: pointer;
|
|
}
|
|
i:hover {
|
|
color: #1a1d22;
|
|
}
|
|
.badge{
|
|
.position(relative, @top: -34px, @left: 36px);
|
|
padding: 1px 6px 1px 5px;
|
|
cursor: pointer;
|
|
background-color: @fuel-dark-red;
|
|
border: solid 1px #cf600e;
|
|
.box-shadow-mixin-two(@navbar-box-shadow-start, @navbar-box-shadow-end);
|
|
.border-radius-mixin(3px);
|
|
.css-linear-gradient-mixin(@navbar-badge-gradient-from, @navbar-badge-gradient-to, bottom, top);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Node Block
|
|
// -------------------------
|
|
.node {
|
|
display: block;
|
|
padding: 2px;
|
|
margin-bottom: 6px;
|
|
overflow: hidden;
|
|
.width-height-mixin(auto, 56px);
|
|
.box-sizing-mixin;
|
|
&.checked { background-color: #dedede; }
|
|
.node-box {
|
|
display: block;
|
|
border: 1px solid @color-nodes-border;
|
|
cursor: pointer;
|
|
.width-height-mixin(100%, 52px);
|
|
.box-sizing-mixin;
|
|
.css-linear-gradient-mixin-filter(#edeeef, #dfe2e4);
|
|
&:hover {
|
|
box-shadow: 0 0 6px rgba(0,0,0,.2);
|
|
.css-linear-gradient-mixin-filter(#e5e6e8, #d1d5d8);
|
|
}
|
|
&.error {
|
|
cursor: default;
|
|
border-size: 2px;
|
|
border-color: #ae2917;
|
|
.node-content {
|
|
background: #eedddd;
|
|
.css-linear-gradient-mixin-filter(#eedddd, #e3c9c9);
|
|
}
|
|
}
|
|
&.node-new { border-color: #61a466; }
|
|
&.node-offline, &.node-offline .name { opacity: 0.7; }
|
|
&.node-delete { border-color: #a46161; }
|
|
&.node-delete .node-content .node-name-roles .name > p {
|
|
text-decoration: line-through !important;
|
|
cursor: default;
|
|
border-bottom: none;
|
|
&:hover {
|
|
border-bottom: none;
|
|
color: @color-nodes-node-names;
|
|
}
|
|
}
|
|
&.disabled { cursor: default; }
|
|
}
|
|
.node-content {
|
|
display: block;
|
|
height: 50px;
|
|
border: 1px solid #f8f9f9;
|
|
.box-sizing-mixin;
|
|
.node-name-roles {
|
|
-webkit-font-smoothing: @font-aliasing;
|
|
float: left;
|
|
width:300px;
|
|
.name {
|
|
display: block;
|
|
overflow: hidden;
|
|
height: 22px;
|
|
margin: 3px 0px 0px 0px;
|
|
input {
|
|
font-size: @font-size-small-2;
|
|
.indent-mixin(0px, 0px 6px 0px 6px);
|
|
height: 18px;
|
|
}
|
|
.node-renameable {
|
|
display: inline;
|
|
cursor: pointer;
|
|
display: inline;
|
|
.font-layout-mixin(@font-size-base, @font-color-dark, normal, null, 16px);
|
|
border-bottom: 1px dotted @fuel-light-2;
|
|
}
|
|
p {
|
|
display: inline;
|
|
.font-layout-mixin(@font-size-big-1, @color-nodes-node-names, normal, @text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25));
|
|
border-bottom: 1px dotted @fuel-light-1;
|
|
&.node-renameable {
|
|
border-bottom: 1px dotted @fuel-light-1;
|
|
&:hover {
|
|
border-bottom-color: @fuel-dark-blue;
|
|
color: @fuel-dark-blue;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.role-list {
|
|
display: block;
|
|
height: 18px;
|
|
overflow: hidden;
|
|
.indent-mixin;
|
|
margin-top: -2px;
|
|
.font-layout-mixin(@font-size-base - 4, @color-nodes-rule-list);
|
|
text-transform: uppercase;
|
|
> ul {
|
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
|
|
.indent-mixin;
|
|
margin-top: 1px;
|
|
float: left;
|
|
-webkit-font-smoothing: @font-aliasing;
|
|
> li {
|
|
display: inline-block;
|
|
float: left;
|
|
margin-right: 3px;
|
|
&:after {
|
|
margin-left: 3px;
|
|
font-weight: bold;
|
|
content: '·';
|
|
}
|
|
&:last-child:after { content: ''; }
|
|
}
|
|
}
|
|
> .pending-roles li { color: #468847; }
|
|
}
|
|
}
|
|
.node-button {
|
|
float: left;
|
|
height: 100%;
|
|
line-height: 42px;
|
|
}
|
|
.node-hardware {
|
|
width: 240px;
|
|
float: right;
|
|
.indent-mixin;
|
|
text-transform: uppercase;
|
|
margin-top: 14px;
|
|
-webkit-font-smoothing: @font-aliasing;
|
|
.font-layout-mixin(@font-size-small-3, @color-nodes-rule-list, @text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25));
|
|
span {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
float: left;
|
|
padding: 0 0 0 15px;
|
|
}
|
|
}
|
|
.node-details {
|
|
.float-mixin(right);
|
|
.width-height-mixin(@node-details-size, @node-details-size);
|
|
overflow: hidden;
|
|
background: url(/static/img/icons.png) 0px 0px no-repeat;
|
|
margin: 13px 13px 0px 14px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
&:hover {
|
|
background: url(/static/img/icons.png) 0px -22px no-repeat;
|
|
-moz-animation: spin 2s infinite linear;
|
|
-o-animation: spin 2s infinite linear;
|
|
-webkit-animation: spin 2s infinite linear;
|
|
animation: spin 2s infinite linear;
|
|
}
|
|
}
|
|
.node-logo {
|
|
border-left: 1px dotted @color-nodes-border;
|
|
.float-mixin;
|
|
.width-height-mixin(58px, 48px);
|
|
padding: 0;
|
|
speak: none;
|
|
display: inline-block;
|
|
text-decoration: inherit;
|
|
text-align: center;
|
|
font-variant: normal;
|
|
text-transform: none;
|
|
padding-top: 14px;
|
|
.font-layout-mixin(@font-size-base + 19, #aeaeae, normal, normal, null, 0 1px 0 rgba(255, 255, 255, 0.3), @font-family-fontello);
|
|
-webkit-font-smoothing: @font-subpixel;
|
|
.box-sizing-mixin;
|
|
}
|
|
.node-status {
|
|
.float-mixin;
|
|
.width-height-mixin(auto, 100%);
|
|
font-size: @font-size-base - 4.5;
|
|
text-transform: uppercase;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
i { font-size: @font-size-small-3; }
|
|
.node-status-container { line-height: 48px; }
|
|
.progress {
|
|
background-color: #b9bdbf;
|
|
background-image: none;
|
|
.width-height-mixin(150px, 15px);
|
|
.border-radius-mixin(3px);
|
|
margin-top: 15px;
|
|
position: absolute;
|
|
}
|
|
.bar {
|
|
.border-radius-mixin(3px);
|
|
height: 13px;
|
|
margin: 1px;
|
|
}
|
|
span { position: relative; }
|
|
&.provisioning span, &.deploying span {
|
|
.font-layout-mixin(@font-size-base - 4, @fuel-white-color, null, null, 20px, none);
|
|
letter-spacing: 0px;
|
|
text-align: left;
|
|
margin-left: 5px;
|
|
}
|
|
&.msg-ok {color: @color-msg-ok;}
|
|
&.msg-info {color: @color-msg-info;}
|
|
&.msg-error {color: @color-msg-error;}
|
|
&.msg-warning {color: @color-msg-warning;}
|
|
&.msg-unimportant {color: @color-msg-unimportant;}
|
|
&.msg-provisioned {color: @color-msg-provisioned;}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Node management panel
|
|
// -------------------------
|
|
|
|
.nodes-management-panel {
|
|
.nodes-filter {
|
|
position: relative;
|
|
width: auto;
|
|
margin-top: -30px;
|
|
label {
|
|
float: none;
|
|
}
|
|
input[type=text] {
|
|
width: 145px;
|
|
padding-right: 20px;
|
|
&::-ms-clear { .width-height-mixin(0, 0); }
|
|
}
|
|
select {
|
|
margin: 0;
|
|
width: 170px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-clear-filter {
|
|
display: none;
|
|
.width-height-mixin(15px, 20px);
|
|
.position(absolute, @bottom: 18px, @right: 5px);
|
|
}
|
|
|
|
#tab-nodes .cluster-name {
|
|
margin-top: 10px !important;
|
|
}
|
|
|
|
.cluster-list .cluster-name {
|
|
height: 34px;
|
|
overflow: hidden;
|
|
margin: 20px 20px 0px 20px;
|
|
.font-layout-mixin(@font-size-big-2, @font-color-dark, normal, @line-height: 16px);
|
|
word-break: break-all;
|
|
}
|
|
|
|
.node-list-header {
|
|
margin-bottom: 0;
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
a, label {
|
|
padding-top: 3px;
|
|
padding-right: 0;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.span2.select-all {
|
|
text-align: right;
|
|
}
|
|
|
|
.select-all label {
|
|
padding: 0;
|
|
margin-top: 0;
|
|
margin-right: 20px;
|
|
display: inline-block;
|
|
&.disabled {
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
.node-group-header {
|
|
label {
|
|
text-align: right;
|
|
line-height: 20px;
|
|
margin: 0 !important;
|
|
padding: 10px 0 !important;
|
|
input {
|
|
.node-label-input-common;
|
|
}
|
|
}
|
|
}
|
|
.node-list-header label input {
|
|
.node-label-input-common;
|
|
}
|
|
|
|
.node-group-header h4 {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.roles-panel {
|
|
display: block;
|
|
padding: 20px;
|
|
background-color: @fuel-light-5;
|
|
border: 1px solid @color-nodes-border;
|
|
.box-sizing-mixin;
|
|
margin-bottom: 20px;
|
|
> h4 {
|
|
display: block;
|
|
.indent-mixin;
|
|
.font-layout-mixin(@font-size-big-2, @color-nodes-rule-list, @text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35));
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
// Manufacturer
|
|
// -------------------------
|
|
|
|
.manufacturer-hp:before {content: '\e81c';}
|
|
.manufacturer-dell:before {content: '\e808';}
|
|
.manufacturer-vbox:before, .manufacturer-virtualbox:before {content: '\e80a';}
|
|
.manufacturer-vmware:before {content: '\e80d';}
|
|
.manufacturer-xen:before {content: '\e80e'; font-size: (@font-size-base + 26) !important;}
|
|
.manufacturer-openvz:before {content: '\e80c';}
|
|
.manufacturer-cisco:before {content: '\e809';}
|
|
.manufacturer-qemu:before {content: '\e810';}
|
|
.manufacturer-supermicro:before { content: '\e80b'; font-size: (@font-size-base * 2) !important;}
|
|
.manufacturer-kvm:before, .manufacturer-bochs:before {content: '\e80f'; font-size: (@font-size-base * 2 - 1) !important;}
|
|
|
|
// Breadcrumb
|
|
// -------------------------
|
|
|
|
.openstack {
|
|
background: url(../img/cluster_logos.png) 0px 0px no-repeat;
|
|
background-position: 168px 0px;
|
|
}
|
|
|
|
.breadcrumb {
|
|
background-color: rgba(0,0,0,.1);
|
|
margin: -10px 0 10px 0;
|
|
border-radius: 0 0 4px 4px;
|
|
min-height: 20px;
|
|
> li {
|
|
text-shadow: @text-shadow-none;
|
|
> a {
|
|
color: @fuel-light-2;
|
|
text-decoration: underline;
|
|
&:hover {color: @fuel-light-4;}
|
|
}
|
|
}
|
|
> .active {
|
|
color: @fuel-light-4;
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
// Cluster Tabs Design
|
|
// -------------------------
|
|
|
|
.cluster-tabs {
|
|
border: none;
|
|
margin-top: -70px;
|
|
li {
|
|
margin-left: -1px;
|
|
min-width: 98px;
|
|
a {
|
|
height: @cluster-tab-heihgt;
|
|
border-color: @cluster-tabs-border;
|
|
.box-sizing-mixin;
|
|
.font-layout-mixin(@color: @font-color-dark, @line-height: 20px);
|
|
.css-linear-gradient-mixin(@fuel-light-2, @fuel-light-4, bottom, top, 0%, 30%);
|
|
.border-radius-mixin(4px 4px 0 0);
|
|
.box-shadow-mixin(@cluster-tabs-box-shadow);
|
|
&:hover {
|
|
border-color: @cluster-tabs-border;
|
|
.css-linear-gradient-mixin(#b8b8b8, #e8e8e8, bottom, top, 0%, 30%);
|
|
}
|
|
}
|
|
}
|
|
.tab-title {
|
|
display: block;
|
|
font-size: @font-size-small-3;
|
|
text-align: center;
|
|
}
|
|
> li > a { margin-right: 3px;}
|
|
> li > a > b {display: block; width: 30px; height: 30px; margin: -5px auto -5px auto;}
|
|
> .active > a,
|
|
> .active > a:hover {
|
|
background-image: none;
|
|
color: @font-color-base;
|
|
cursor: pointer;
|
|
background-color: @fuel-white-color;
|
|
border-color: @cluster-tabs-border;
|
|
border-bottom-color: transparent;
|
|
}
|
|
}
|
|
|
|
.tab-nodes-normal {.at2x('../img/tab_icons.png', 0px, 0px, 90px);}
|
|
.tab-nodes-good {.at2x('../img/tab_icons.png', -30px, 0px, 90px);}
|
|
.tab-nodes-bad {.at2x('../img/tab_icons.png', -60px, 0px, 90px);}
|
|
|
|
.tab-network-normal {.at2x('../img/tab_icons.png', 0px, -30px, 90px);}
|
|
.tab-network-good {.at2x('../img/tab_icons.png', -30px, -30px, 90px);}
|
|
.tab-network-bad {.at2x('../img/tab_icons.png', -60px, -30px, 90px);}
|
|
|
|
.tab-settings-normal {.at2x('../img/tab_icons.png', 0px, -60px, 90px);}
|
|
.tab-settings-good {.at2x('../img/tab_icons.png', -30px, -60px, 90px);}
|
|
.tab-settings-bad {.at2x('../img/tab_icons.png', -60px, -60px, 90px);}
|
|
|
|
.tab-actions-normal {.at2x('../img/tab_icons.png', 0px, -90px, 90px);}
|
|
.tab-actions-good {.at2x('../img/tab_icons.png', -30px, -90px, 90px);}
|
|
.tab-actions-bad {.at2x('../img/tab_icons.png', -60px, -90px, 90px);}
|
|
|
|
.tab-logs-normal {.at2x('../img/tab_icons.png', 0px, -120px, 90px);}
|
|
.tab-logs-good {.at2x('../img/tab_icons.png', -30px, -120px, 90px);}
|
|
.tab-logs-bad {.at2x('../img/tab_icons.png', -60px, -120px, 90px);}
|
|
|
|
.tab-redhat-normal {.at2x('../img/tab_icons.png', 0px, -150px, 90px);}
|
|
.tab-redhat-good {.at2x('../img/tab_icons.png', -30px, -150px, 90px);}
|
|
.tab-redhat-bad {.at2x('../img/tab_icons.png', -60px, -150px, 90px);}
|
|
|
|
.tab-healthcheck-normal {.at2x('../img/tab_icons.png', 0px, -180px, 90px);}
|
|
.tab-healthcheck-good {.at2x('../img/tab_icons.png', -30px, -180px, 90px);}
|
|
.tab-healthcheck-bad {.at2x('../img/tab_icons.png', -60px, -180px, 90px);}
|
|
|
|
// Global alerts
|
|
// -------------------------
|
|
|
|
.globalalert, .global-error, .global-success, .global-info {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
border: none;
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.4) inset;
|
|
text-shadow: @text-shadow-black;
|
|
> h4 {
|
|
.font-layout-mixin(@font-size-base + 6, @font-weight: 800, @font-style: italic, @font-family: @font-family-win);
|
|
margin-bottom: 6px;
|
|
}
|
|
> p {
|
|
font-style: italic;
|
|
> a { color: #00aeef; }
|
|
}
|
|
> .close {
|
|
color: #6a7d98;
|
|
opacity: 1;
|
|
text-shadow: 0 1px 0 #000000;
|
|
&:hover {
|
|
color: #94a9c2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.globalalert { h4, p { color: @fuel-goldenrod; }}
|
|
.global-error { h4, p {color: @fuel-red;}}
|
|
.global-success { h4, p {color: @fuel-green;}}
|
|
.global-info { h4, p {color: @fuel-gray-blue;}}
|
|
.global-error { p a, p a:hover { color: @fuel-dark-blue; }}
|
|
|
|
// Cluster
|
|
// -------------------------
|
|
|
|
.clusterbox {
|
|
margin-bottom: 20px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background-color: @fuel-white-color;
|
|
.box-sizing-mixin;
|
|
overflow: hidden;
|
|
height: @cluster-box-height;
|
|
&:hover {
|
|
text-decoration: none;
|
|
background-color: #dfe5eb;
|
|
box-shadow: 0 1px 8px rgba(0,0,0,.85), inset 0px 0px 0px rgba(255,255,255,.0);
|
|
cursor: pointer;
|
|
text-shadow: @text-shadow-white;
|
|
.css-linear-gradient-mixin(#f2f4f4, #c4cbcc);
|
|
}
|
|
}
|
|
|
|
.create-cluster-text {
|
|
.font-layout-mixin(@font-size-big-1, #909eae, @text-shadow: @text-shadow-black);
|
|
text-align: center;
|
|
}
|
|
|
|
.create-cluster {
|
|
background: none;
|
|
text-shadow: @text-shadow-black;
|
|
&:hover {
|
|
background-color: #c8cfd6;
|
|
box-shadow: 0 1px 8px rgba(0,0,0,.85), inset 0px 0px 0px rgba(255,255,255,.0);
|
|
cursor: pointer;
|
|
text-shadow: @text-shadow-white;
|
|
> .add-icon > .icon-create {
|
|
.font-layout-mixin(@color: @font-color-dark, @text-shadow: @text-shadow-white);
|
|
}
|
|
> .create-cluster-text {
|
|
.font-layout-mixin(@color: @font-color-dark, @text-shadow: @text-shadow-white);
|
|
}
|
|
}
|
|
> .add-icon {
|
|
display: block;
|
|
height: 116px;
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
text-shadow: @text-shadow-white;
|
|
> .icon-create {
|
|
.font-layout-mixin(110px, #909eae, @text-shadow: @text-shadow-black);
|
|
}
|
|
}
|
|
}
|
|
|
|
.cluster-hardware {
|
|
margin-top: 1px;
|
|
.font-layout-mixin(@font-size-small-1, @font-color-base, normal);
|
|
height: 72px;
|
|
overflow: hidden;
|
|
> .row-fluid > .span4 {
|
|
margin-left: 20px;
|
|
min-height: 14px;
|
|
line-height: 18px;
|
|
}
|
|
> .row-fluid > .span6 {
|
|
margin-left: 20px;
|
|
min-height: 14px;
|
|
line-height: 18px;
|
|
&:after {content: ":";}
|
|
}
|
|
}
|
|
|
|
.cluster-status {
|
|
margin-top: 20px;
|
|
padding-top: 5px;
|
|
height: 26px;
|
|
border-top: 1px solid @fuel-light-1;
|
|
.font-layout-mixin(@font-size-small-1, @font-color-base, @text-shadow: @text-shadow-white);
|
|
text-align: center;
|
|
}
|
|
|
|
// Deploy
|
|
// -------------------------
|
|
|
|
.deploy-btn {
|
|
display: inline-block;
|
|
*display: inline;
|
|
*margin-left: .3em;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
filter: progid:dximagetransform.microsoft.gradient(startColorstr=@fuel-white-color, endColorstr='#ffe6e6e6', GradientType=0);
|
|
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
|
|
*zoom: 1;
|
|
background-color: @fuel-white-color;
|
|
*border: 0;
|
|
border: solid 1px #25282a;
|
|
.indent-mixin(4px 3px 0 0, 4px 14px);
|
|
.border-radius-mixin;
|
|
.box-shadow-mixin(@deploy-btn-shadow);
|
|
.font-layout-mixin(@font-size-base, @color: @fuel-white-color, @font-weight: bold, @text-shadow: @text-shadow-black);
|
|
.css-linear-gradient-mixin-filter(#4889d8, #265d8b);
|
|
&:hover {
|
|
border: solid 1px #25282a;
|
|
background: #4077b0;
|
|
.box-shadow-mixin(@deploy-btn-shadow-hover);
|
|
.font-layout-mixin(@color: @fuel-white-color, @font-weight: bold, @text-shadow: @text-shadow-black);
|
|
.css-linear-gradient-mixin-filter(#4077b0, #265175);
|
|
}
|
|
&:active {
|
|
border: solid 1px #25282a;
|
|
.box-shadow-mixin(@deploy-btn-shadow-active);
|
|
.font-layout-mixin(@color: @fuel-white-color, @font-weight: bold, @text-shadow: @text-shadow-black);
|
|
.css-linear-gradient-mixin-filter(#204d73, #467bb4);
|
|
}
|
|
> .icon-upload-cloud {font-size: @font-size-big-1;}
|
|
}
|
|
|
|
.deploy-btn.disabled, .deploy-btn.disabled:hover, .deploy-btn[disabled], .deploy-btn[disabled]:hover {
|
|
box-shadow: inset 0 2px 6px rgba(0,0,0,.17);
|
|
cursor: default;
|
|
background: rgba(0,0,0,0.1);
|
|
.font-layout-mixin(null, rgba(255,255,255,0.4), null, null, null, @text-shadow-none);
|
|
}
|
|
|
|
.modal-header h3 {
|
|
.font-layout-mixin(@font-size-base + 12, @line-height: 40px);
|
|
margin: 0;
|
|
height: 40px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modal {
|
|
.help-block {
|
|
.font-layout-mixin(@font-size-small-2, @fuel-dark-2);
|
|
line-height: 14px;
|
|
}
|
|
.wizard-footer {
|
|
bottom: 0;
|
|
position: absolute;
|
|
width: 730px;
|
|
button {min-width: 90px;}
|
|
}
|
|
.wizard-body { .indent-mixin; }
|
|
}
|
|
|
|
.wizard-steps-box {
|
|
.width-height-mixin;
|
|
&:after {clear: both;}
|
|
}
|
|
|
|
.wizard-steps-nav {
|
|
background-color: @fuel-light-5;
|
|
position: fixed;
|
|
width: 200px;
|
|
overflow: hidden;
|
|
height: 370px;
|
|
}
|
|
|
|
.wizard-steps-content {
|
|
background-color: @fuel-white-color;
|
|
margin-left: 200px;
|
|
height: 366px;
|
|
padding: 15px 20px 20px 20px;
|
|
.box-sizing-mixin;
|
|
.parameter-name { min-width: 0; }
|
|
.parameter-box.text-type {margin: 10px; }
|
|
.text-type .parameter-name { min-width: 70px; }
|
|
}
|
|
|
|
.wizard-step-nav-item {
|
|
list-style: none outside none;
|
|
margin-bottom: 25px;
|
|
margin-left: 0px;
|
|
> li {
|
|
list-style: none outside none;
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
padding: 8px 0px 8px 30px;
|
|
color: @font-color-light;
|
|
cursor: default;
|
|
}
|
|
> .current {
|
|
background-color: @fuel-white-color;
|
|
cursor: pointer;
|
|
.box-sizing-mixin;
|
|
.font-layout-mixin(@color: #e98900, @font-weight: bold);
|
|
}
|
|
> .available {
|
|
background-color: none;
|
|
color: #468847;
|
|
padding-left: -10px;
|
|
.box-sizing-mixin;
|
|
cursor: pointer;
|
|
&:before {
|
|
speak: none;
|
|
content: '\2713';
|
|
margin-left: -20px;
|
|
margin-right: 3px;
|
|
.font-layout-mixin(@font-weight: normal, @font-style: normal, @line-height: 0, @font-family: @font-family-fontello);
|
|
}
|
|
}
|
|
}
|
|
|
|
.prev-pane-btn {
|
|
> .icon-prev { .indent-mixin(0 4px 0 0, 0); }
|
|
> .icon-next { .indent-mixin( 0 0 0 4px, 0); }
|
|
}
|
|
|
|
.pane-content .alert { margin-bottom: 10px; }
|
|
|
|
.loading {
|
|
margin-top: 200px;
|
|
.width-height-mixin(100%, 90px);
|
|
background: url(../img/cloud-loader.gif) no-repeat top center;
|
|
&.layout-loaded {margin-top: 88px;}
|
|
}
|
|
|
|
.progress-bar {
|
|
margin: 20px 0;
|
|
text-align: center;
|
|
.progress {
|
|
margin: auto;
|
|
width: 50%;
|
|
.bar {width: 100%}
|
|
}
|
|
&.description {
|
|
margin: 5px 0;
|
|
}
|
|
}
|
|
|
|
.progress {
|
|
.bar {
|
|
border-radius: 3px;
|
|
p {white-space: pre;}
|
|
}
|
|
}
|
|
|
|
.network-segment-type {
|
|
font-style: italic;
|
|
p {
|
|
text-transform: uppercase;
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
.networks-table, .networking-parameters {
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
> div {padding-left: 3px;}
|
|
.range-row-header {
|
|
height: 23px;
|
|
font-weight: bold;
|
|
&.mini > div { width: 104px; }
|
|
> div {
|
|
float: left;
|
|
margin-left: 10px;
|
|
font-size: @font-size-small-3;
|
|
line-height: 14px;
|
|
width: 220px;
|
|
&:first-child {margin-left: 202px;}
|
|
}
|
|
}
|
|
.range-row { margin-left: 199px; }
|
|
.range-row, .vlan-tagging {
|
|
label {
|
|
display: inline-block;
|
|
margin-bottom: 0;
|
|
float: left;
|
|
}
|
|
}
|
|
.vlan-tagging {
|
|
height: 40px;
|
|
input[type=text] { width: 172px; }
|
|
}
|
|
div.validation-error {
|
|
float: left;
|
|
.help-inline {
|
|
display: block;
|
|
padding-top: 5px;
|
|
max-width: 540px;
|
|
color: @fuel-deep-red;
|
|
}
|
|
}
|
|
.network-attribute {
|
|
min-height: 47px;
|
|
.parameter-name { width: 185px; }
|
|
&.floating, &.ip-ranges {padding-bottom: 7px; }
|
|
label {margin-bottom: 0;}
|
|
}
|
|
input.mini { width: 91px; }
|
|
.ip-ranges-control, .ranges-control {
|
|
width: 20px;
|
|
margin-top: 3px;
|
|
float: left;
|
|
margin-left: 0 !important;
|
|
.btn-link { padding: 0; }
|
|
}
|
|
}
|
|
|
|
.nodes-summary-container {
|
|
cursor: default;
|
|
}
|
|
|
|
.roles-block-row:first-child {
|
|
.span2 {
|
|
width: auto;
|
|
label { white-space: nowrap; }
|
|
}
|
|
.span8 { width: 720px; }
|
|
.span10 { width: auto; }
|
|
}
|
|
|
|
.tab-pane > div > div {
|
|
overflow: visible;
|
|
}
|
|
|
|
.wrapper {
|
|
margin: 0 @wrapper-margin;
|
|
padding-left: 3px;
|
|
h3 { margin-top: 0; }
|
|
}
|
|
|
|
.page-wrapper {
|
|
background-color: @fuel-white-color;
|
|
border-radius: 4px;
|
|
padding: 20px;
|
|
}
|
|
|
|
// Notifications Popover
|
|
// -------------------------
|
|
|
|
.notification-wrapper {
|
|
position: relative;
|
|
.message-list-placeholder {
|
|
display: inline-block;
|
|
width: 300px;
|
|
z-index: 200;
|
|
background-color: rgba(59, 72, 92, .95);
|
|
.position(absolute, -8px, @left: 730px);
|
|
.box-sizing-mixin;
|
|
.box-shadow-mixin(0 2px 16px rgba(0, 0, 0, 0.65));
|
|
.border-radius-mixin;
|
|
background-clip: padding-box;
|
|
border: 1px solid rgba(41, 49, 62, 1);
|
|
padding: 10px;
|
|
overflow: hidden;
|
|
oveflow-y: auto;
|
|
.message-list-popover {
|
|
list-style: none outside none;
|
|
margin: 2px 0 0;
|
|
&:after {clear: both;}
|
|
cursor: default;
|
|
li {
|
|
.font-layout-mixin(@font-size-small-1, #85a2c8, @text-shadow: @text-shadow-black);
|
|
margin-left: 26px;
|
|
word-wrap: break-word;
|
|
i {
|
|
.float-mixin;
|
|
margin-left: -22px;
|
|
font-size: @font-size-big-2;
|
|
}
|
|
a {
|
|
color: @fuel-dark-blue;
|
|
&:hover { color: @fuel-blue; }
|
|
}
|
|
&.divider, &.divider:hover {
|
|
background-color: #303a49;
|
|
border-bottom: 1px solid rgba(200, 200, 200, .2);
|
|
height: 1px;
|
|
margin: 9px 1px;
|
|
overflow: hidden;
|
|
}
|
|
&.clickable {
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
&:hover {
|
|
color: @fuel-light-blue;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
&.new {
|
|
color: @fuel-light-blue;
|
|
font-weight: bold;
|
|
}
|
|
&.error { color: @fuel-red; }
|
|
&.warning { color: @fuel-orange; }
|
|
}
|
|
}
|
|
.show-more-notifications {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
a {
|
|
text-decoration: none;
|
|
color: @fuel-light-blue;
|
|
&:hover {
|
|
text-decoration: none;
|
|
color: @fuel-white-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Notifications Page
|
|
// -------------------------
|
|
|
|
.notification-list {
|
|
margin: 0 0 10px 0;
|
|
list-style: none outside none;
|
|
li {
|
|
.indent-mixin;
|
|
.font-layout-mixin(@font-size-small-1, @font-color-dark);
|
|
display: block;
|
|
clear: both;
|
|
border-bottom: 1px dotted @fuel-grey-light;
|
|
min-height: 1px;
|
|
&:first-child{ border-bottom: 0px dotted @fuel-white-color; }
|
|
&:last-child{ margin-bottom: 40px; }
|
|
.icon, .datetime, .message {
|
|
.float-mixin;
|
|
cursor: default;
|
|
margin: 6px 0;
|
|
}
|
|
.icon {
|
|
width: 30px;
|
|
font-size: @font-size-big-1;
|
|
}
|
|
.datetime { width: 130px; }
|
|
.message {
|
|
width: 770px;
|
|
&:after { clear: both; }
|
|
}
|
|
&.clickable {
|
|
div {cursor: pointer; }
|
|
.message { text-decoration: underline; }
|
|
&:hover .message {
|
|
text-decoration: none;
|
|
color: @fuel-dark-blue;
|
|
}
|
|
}
|
|
&.unread {
|
|
cursor: pointer;
|
|
color: @font-color-dark;
|
|
font-weight: bold;
|
|
}
|
|
&.error { color: @fuel-deep-red; }
|
|
}
|
|
}
|
|
|
|
// Filter Bar
|
|
// -------------------------
|
|
|
|
.filter-bar {
|
|
display: block;
|
|
clear: both;
|
|
margin: 20px 0px 14px 20px;
|
|
background-color: #e5e5e5;
|
|
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
|
|
.border-radius-mixin;
|
|
.width-height-mixin(auto, 38px);
|
|
.box-sizing-mixin;
|
|
}
|
|
.filter-bar-item {
|
|
.float-mixin;
|
|
margin: 0 0 0 10px;
|
|
}
|
|
.filter-bar-btn {
|
|
margin: 4px;
|
|
}
|
|
.filter-bar-dropdown {
|
|
display: inline-block;
|
|
height: 28px;
|
|
margin: 5px 3px;
|
|
color: @fuel-dark-5;
|
|
background-color: #efefef;
|
|
> i {
|
|
.font-layout-mixin(@font-size-big-1, @fuel-dark-3);
|
|
padding-left: 12px;
|
|
}
|
|
}
|
|
.filter-bar-label {
|
|
.float-mixin;
|
|
.font-layout-mixin(@font-size-base, @fuel-dark-5, @text-shadow: 0 1px 0 rgba(255,255,255,.4));
|
|
margin-top: 9px;
|
|
}
|
|
|
|
.filter-bar-item > .dropdown-menu {
|
|
.position(absolute, @left: auto, @right: 5px);
|
|
}
|
|
@-moz-document url-prefix() {
|
|
.filter-bar-label { margin-top: 8px; }
|
|
}
|
|
.logs-loading {
|
|
margin-top: 20px;
|
|
}
|
|
.table-logs {
|
|
.font-layout-mixin(@font-size-small-1, #545a63);
|
|
tr td {
|
|
padding: 1px 5px;
|
|
line-height: 15px;
|
|
}
|
|
thead th {
|
|
background-color: #ececec;
|
|
vertical-align: middle;
|
|
}
|
|
tbody tr td {
|
|
.font-layout-mixin(@font-size: @font-size-small-1, @font-family: @font-family-filter-bar);
|
|
}
|
|
.no-logs-msg, .entries-skipped-msg { display: none; }
|
|
.no-logs-msg tr td {
|
|
text-align: center;
|
|
padding: 20px;
|
|
}
|
|
.entries-skipped-msg {
|
|
tr td {
|
|
text-align: center;
|
|
padding: 5px;
|
|
}
|
|
.show-all-entries, .show-more-entries {
|
|
color: @fuel-dark-blue;
|
|
&:hover {
|
|
color: #005580;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.show-more-entries {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// logs coloring
|
|
// -------------------------
|
|
|
|
.table-logs tbody {
|
|
tr.info td {background-color: #d9edf7;}
|
|
tr.debug td {background-color: #dff0d8;}
|
|
tr.notice td {background-color: #bce3b8;}
|
|
tr.warning td {background-color: #fcf8e3;}
|
|
tr.error td, tr.err td {background-color: #eccecf;}
|
|
tr.critical td, tr.crit td, tr.fatal td {background-color: #c56d6f; color: @fuel-white-color;}
|
|
tr.alert td {background-color: #d89d9f;}
|
|
tr.emergency td, tr.emerg td {background-color: #8a080b;}
|
|
}
|
|
|
|
.page-control-box {
|
|
display: block;
|
|
height: auto;
|
|
.border-radius-mixin;
|
|
background-color: @fuel-light-5;
|
|
box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
|
|
.indent-mixin(10px 0px 0px 20px, 10px 0px 10px 0px);
|
|
&:after {
|
|
display: table;
|
|
line-height: 0;
|
|
content: "";
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.verification-control .page-control-box {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.page-control-error-placeholder, .page-control-success-placeholder {
|
|
.float-mixin;
|
|
margin: 5px;
|
|
max-width: 640px;
|
|
.font-layout-mixin(@font-size-big-1, #b60007, @text-shadow: 0 1px 0 rgba(0,0,0,.1));
|
|
}
|
|
|
|
.page-control-success-placeholder {
|
|
color: #17824B;
|
|
}
|
|
|
|
.page-control-button-placeholder {
|
|
display: inline-block;
|
|
float: right;
|
|
margin: 5px 10px 5px 10px;
|
|
}
|
|
|
|
.back-button {
|
|
margin: 5px 10px 5px 10px;
|
|
}
|
|
|
|
// buttons facelift
|
|
// -------------------------
|
|
|
|
.apply-btn {
|
|
background-color: #dedede;
|
|
border: solid 1px #aaaaab;
|
|
.font-layout-mixin(@font-size-base, @font-color-base);
|
|
.border-radius-mixin;
|
|
.box-shadow-mixin(inset 0 0 0 1px rgba(255,255,255,.3));
|
|
.css-linear-gradient-mixin(#dcdcdd, @fuel-light-5, bottom, top);
|
|
}
|
|
|
|
.btn {
|
|
.btn-mixin;
|
|
&:hover,
|
|
&:focus {
|
|
color: auto;
|
|
text-decoration: none;
|
|
background-position: 0 0;
|
|
}
|
|
&:focus {
|
|
outline: thin dotted @fuel-black-color;
|
|
outline: 5px auto -webkit-focus-ring-color;
|
|
outline-offset: -2px;
|
|
outline: none;
|
|
}
|
|
&:hover {
|
|
*background-color: @fuel-light-4;
|
|
.btn-mixin(#222222, none, 0 1px 1px rgba(0,0,0,.1), inset 0 0 0 1px rgba(255,255,255,.3), #b3b3b3, #e3e3e3, #cecece);
|
|
text-decoration: none;
|
|
-webkit-transition: background-position 0.1s linear;
|
|
-moz-transition: background-position 0.1s linear;
|
|
-o-transition: background-position 0.1s linear;
|
|
transition: background-position 0.1s linear;
|
|
}
|
|
&.active,
|
|
&:active {
|
|
.btn-active-state-mixin;
|
|
.box-shadow-mixin-two(inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05));
|
|
}
|
|
&.disabled, &[disabled], &[disabled]:hover {
|
|
.btn-state-disabled-mixin;
|
|
}
|
|
}
|
|
|
|
.btn-success {
|
|
.btn-mixin(@fuel-white-color, @fuel-dark-red, 0 1px 2px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.25), #4a954a, #61c161, #51a451);
|
|
&:hover {
|
|
background: linear-gradient(to top, #4c9a4c, #59b259) repeat scroll 0 0 rgba(0, 0, 0, 0);
|
|
border: 1px solid #4a954a;
|
|
text-decoration: none;
|
|
color: #efefef;
|
|
.box-shadow-mixin-two(0 1px 1px rgba(0,0,0,.1), inset 0 0 0 1px rgba(255,255,255,.15));
|
|
}
|
|
&.active,
|
|
&:active {
|
|
.btn-active-state-mixin(#52a652, #d9d9d9);
|
|
.box-shadow-mixin-two(inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05));
|
|
}
|
|
&.disabled, &[disabled], &[disabled]:hover {
|
|
.btn-state-disabled-mixin;
|
|
}
|
|
}
|
|
|
|
.btn-danger {
|
|
.btn-mixin(@fuel-white-color, @fuel-dark-red, 0 1px 2px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.2), #af3f3a, #df534e, #be3730);
|
|
&:hover {
|
|
text-decoration: none;
|
|
.btn-mixin(#efefef, none, 0 1px 1px rgba(0,0,0,.1), inset 0 0 0 1px rgba(255,255,255,.15), #a43a37, #c74a45, #ac332d);
|
|
}
|
|
&.active,
|
|
&:active {
|
|
.btn-active-state-mixin(#ad342e, #d9d9d9);
|
|
.box-shadow-mixin-two(inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05));
|
|
}
|
|
&.disabled, &[disabled], &[disabled]:hover {
|
|
.btn-state-disabled-mixin;
|
|
}
|
|
}
|
|
|
|
.btn-info {
|
|
.btn-mixin(@fuel-white-color, #08c, 0 1px 2px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.2), #08c, @fuel-blue, #08c);
|
|
&:hover {
|
|
.btn-mixin(#efefef, none, 0 1px 1px rgba(0,0,0,.1), inset 0 0 0 1px rgba(255,255,255,.15), #007ab7, #008bd0, #007bb9);
|
|
text-decoration: none;
|
|
}
|
|
&.active,
|
|
&:active {
|
|
.btn-active-state-mixin(#007cba, #d9d9d9);
|
|
.box-shadow-mixin-two(inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05));
|
|
}
|
|
&.disabled, &[disabled], &[disabled]:hover {
|
|
.btn-state-disabled-mixin;
|
|
}
|
|
}
|
|
|
|
.btn-link {
|
|
color: #0088cc;
|
|
cursor: pointer;
|
|
border: none;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
.box-shadow-mixin(none);
|
|
&:active {
|
|
background-color: transparent;
|
|
background-image: none;
|
|
.box-shadow-mixin(none);
|
|
}
|
|
&.current-locale {
|
|
font-size: @font-size-small-3;
|
|
}
|
|
&:hover {
|
|
color: #005580;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border: none;
|
|
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
}
|
|
&.disabled,
|
|
&[disabled] {
|
|
cursor: default;
|
|
background: none;
|
|
.font-layout-mixin(@color: @fuel-dark-2, @text-shadow: 0 1px 0px rgba(255, 255, 255, 0.65));
|
|
border: none;
|
|
background-image: none;
|
|
text-decoration: none;
|
|
.box-shadow-mixin(inset 0 1px 0px rgba(255, 255, 255, 0));
|
|
filter: alpha(opacity=65);
|
|
&:hover { background: none; }
|
|
}
|
|
}
|
|
|
|
.node-button button {
|
|
line-height: 0;
|
|
padding: 4px 20px 0 0;
|
|
font-size: @font-size-small-1;
|
|
}
|
|
|
|
.node-image-outline {
|
|
display: block;
|
|
.width-height-mixin(204px, 62px);
|
|
overflow: hidden;
|
|
background: url(../img/node_image_outline.png) no-repeat top left;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.node-popup {
|
|
.span5 {
|
|
width: 204px;
|
|
}
|
|
.span7 {
|
|
width: 290px;
|
|
margin-left: 15px;
|
|
margin-bottom: 10px;
|
|
div {
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mode-description {
|
|
display: block;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
text-align: justify;
|
|
margin-top: 0px !important;
|
|
font-size: 12px @font-size-small-2;
|
|
line-height: 14px !important;
|
|
}
|
|
|
|
.mode-control-group {
|
|
height: 90px;
|
|
.type-control-group {
|
|
margin: 0;
|
|
}
|
|
.span7 {
|
|
margin-left: 0;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.disabled-cluster {
|
|
background-color: #aaa;
|
|
&:hover {
|
|
.css-linear-gradient-mixin(#d0d2d2, #a2a9aa);
|
|
}
|
|
}
|
|
|
|
.rollback {
|
|
overflow: hidden;
|
|
.width-height-mixin(38px, 34px);
|
|
border: solid 1px rgba(0,0,0,0);
|
|
background: none;
|
|
box-shadow: none;
|
|
.box-sizing-mixin;
|
|
.indent-mixin(3px 4px 0px 4px, 3px 2px 2px 1px);
|
|
> i {
|
|
.font-layout-mixin(@font-size-big-1, @fuel-white-color, bold, @text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3));
|
|
}
|
|
&:hover {
|
|
width: 38px;
|
|
-webkit-border-radius: 4px;
|
|
-moz-border-radius: 4px;
|
|
border-radius: 4px;
|
|
background-color: #59616b;
|
|
.box-shadow-mixin-two(0 1px 4px rgba(0,0,0,.15), inset 0 0 0 1px rgba(255,255,255,.12));
|
|
border: solid 1px #393e45;
|
|
.css-linear-gradient-mixin(#5e6671, #555c66);
|
|
}
|
|
&:active,
|
|
&:focus {
|
|
width: 38px;
|
|
border: transparent;
|
|
background-image: none;
|
|
background-color: #40454d;
|
|
.box-shadow-mixin(inset 0 2px 4px rgba(0,0,0,.2));
|
|
}
|
|
}
|
|
|
|
.statistic {
|
|
> div {
|
|
float: left;
|
|
text-transform: uppercase;
|
|
vertical-align: top;
|
|
padding: 6px 8px;
|
|
.font-layout-mixin(@font-size-small-3, #d3d8d9, normal, null, 11px, 0px 1px 0px rgba(0, 0, 0, 0.3), @font-family-win);
|
|
}
|
|
.stat-count {
|
|
margin-top: -1px;
|
|
padding-right: 1px;
|
|
.font-layout-mixin(@font-size-base + 16,5, @line-height: 26px);
|
|
}
|
|
.stat-title {
|
|
margin-top: -1px;
|
|
padding-left: 2px;
|
|
padding-top: 10px;
|
|
.font-layout-mixin(@font-size-base - 5.5, @font-weight: normal);
|
|
}
|
|
}
|
|
|
|
.cluster-status-progress {
|
|
margin: 0 20px;
|
|
height: 12px;
|
|
background-color: #b5bbbc;
|
|
.border-radius-mixin;
|
|
.box-shadow-mixin-two(0 1px rgba(255,255,255,.25), inset 0 1px 6px rgba(0,0,0,.25));
|
|
.progress {
|
|
height: 15px;
|
|
margin: 4px 0 0;
|
|
}
|
|
}
|
|
|
|
.fieldset-group {
|
|
margin: 0px;
|
|
padding-bottom: 2px;
|
|
> .fieldset-group {
|
|
margin-left: 20px;
|
|
}
|
|
h4 {
|
|
font-size: @font-size-base + 2.5;
|
|
padding: 0px;
|
|
text-transform: capitalize;
|
|
margin: 10px 0 0;
|
|
}
|
|
label {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.deployment-result { margin-top: 5px; }
|
|
|
|
.deployment-control-box {
|
|
border-radius: 4px;
|
|
margin-top: 5px;
|
|
.box-sizing-mixin;
|
|
.width-height-mixin(auto, 40px);
|
|
text-align: right;
|
|
padding: 0px;
|
|
float: right;
|
|
&.after { clear: both; }
|
|
.deployment-control-item-box { float:right; }
|
|
}
|
|
|
|
.deployment-progress-box {
|
|
position: relative;
|
|
background: rgba(0,0,0,.15);
|
|
border-radius: 4px;
|
|
margin-top: 5px;
|
|
.box-sizing-mixin;
|
|
.width-height-mixin(270px, 40px);
|
|
padding: 0px;
|
|
&:after { clear: both; }
|
|
.progress {
|
|
.width-height-mixin(auto, 16px);
|
|
margin: 10px 12px 0;
|
|
padding: 2px;
|
|
background-color: #2b3036;
|
|
background-image: none;
|
|
.bar {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
.percentage {
|
|
margin: 15px 6px 0;
|
|
text-align: right;
|
|
width: 30px;
|
|
.float-mixin(right);
|
|
.font-layout-mixin(@font-size-small-3, @fuel-white-color, bold, @line-height: 11px, @text-shadow: 0 0 0 rgba(0, 0, 0, 0));
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.progress-bar-description {
|
|
.position(absolute, @top: 10px, @left: 29px);
|
|
.font-layout-mixin(@font-size-small-3, @fuel-white-color, bold, @text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35));
|
|
}
|
|
.stop-deployment-btn {
|
|
float: right;
|
|
margin: 5px;
|
|
padding: 4px 5px 4px 6px;
|
|
i { font-size: @font-size-big-2; }
|
|
}
|
|
}
|
|
|
|
.stop_deployment, .reset_environment {
|
|
.progress .bar { width: 100% !important; }
|
|
}
|
|
|
|
pre {
|
|
border: none;
|
|
background: none;
|
|
.font-layout-mixin(@font-size-small-1, #545a63, @line-height: 15px, @font-family: @font-family-filter-bar);
|
|
.indent-mixin(0, 2px);
|
|
}
|
|
|
|
select[name=release] option {
|
|
height: 20px;
|
|
}
|
|
|
|
// Verification Block
|
|
// -------------------------
|
|
|
|
.verification-box {
|
|
display: block;
|
|
margin: 10px 20px;
|
|
.position(relative, @top: 0px, @left: 0px);
|
|
.alert {
|
|
clear: left;
|
|
margin-bottom: 0px;
|
|
margin-top: 10px;
|
|
padding: 8px 35px 10px 14px;
|
|
width: 529px;
|
|
}
|
|
}
|
|
|
|
.verification-network-placeholder {
|
|
.float-mixin;
|
|
width: 590px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.verification-text-placeholder {
|
|
display: block;
|
|
width: 330px;
|
|
float: left;
|
|
li {
|
|
list-style: none outside none;
|
|
margin: 2px 0 8px 0;
|
|
line-height: 17px;
|
|
}
|
|
}
|
|
|
|
.verification-result-table {
|
|
clear: both;
|
|
padding-top: 10px;
|
|
td:last-child {
|
|
width: 400px;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
|
|
.verification-router {
|
|
display: block;
|
|
.width-height-mixin(200px, 58px);
|
|
margin-left: 190px;
|
|
background: url(../img/router.png) no-repeat top left;
|
|
}
|
|
|
|
.verification-node-1 {
|
|
display: inline-block;
|
|
.width-height-mixin(140px, 40px);
|
|
}
|
|
|
|
.verification-node-2, .verification-node-3 {
|
|
display: inline-block;
|
|
.width-height-mixin(140px, 40px);
|
|
margin-left: 76px;
|
|
}
|
|
|
|
.verification-node-1, .verification-node-2, .verification-node-3 {
|
|
background: url(../img/node-small.png) no-repeat top left;
|
|
}
|
|
|
|
.connect-1-stop, .connect-1-success, .connect-1-error {
|
|
.connect-stop-mixin(176px, 62px, 62px);
|
|
}
|
|
|
|
.connect-1-stop { background: url(../img/connect_1_anim.gif) no-repeat top left;}
|
|
.connect-1-success { background: url(../img/connect_1_anim.gif) no-repeat 0px -62px;}
|
|
.connect-1-error { background: url(../img/connect_1_anim.gif) no-repeat 0px -124px;}
|
|
|
|
.connect-2-stop, .connect-2-success, .connect-2-error {
|
|
.connect-stop-mixin(8px, 62px, 45px);
|
|
}
|
|
|
|
.connect-2-stop { background: url(../img/connect_2_anim.gif) no-repeat top left;}
|
|
.connect-2-success { background: url(../img/connect_2_anim.gif) no-repeat 0px -62px;}
|
|
.connect-2-error { background: url(../img/connect_2_anim.gif) no-repeat 0px -124px;}
|
|
|
|
.connect-3-stop, .connect-3-success, .connect-3-error {
|
|
.connect-stop-mixin(176px, 62px, 46px);
|
|
}
|
|
|
|
.connect-3-stop { background: url(../img/connect_3_anim.gif) no-repeat top left;}
|
|
.connect-3-success { background: url(../img/connect_3_anim.gif) no-repeat 0px -62px;}
|
|
.connect-3-error { background: url(../img/connect_3_anim.gif) no-repeat 0px -124px;}
|
|
|
|
.router-box {
|
|
display: block;
|
|
height: 58px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.animation-box {
|
|
display: block;
|
|
height: 62px;
|
|
margin-top: -9px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nodex-box {
|
|
display: block;
|
|
height: 40px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
input.error, .control-group select.error {
|
|
border-color: @fuel-deep-red;
|
|
color: @fuel-deep-red;
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
|
|
}
|
|
|
|
input.error:focus {
|
|
border-color: @fuel-deep-red;
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
|
|
}
|
|
|
|
#nodeDetailsAccordion {
|
|
.accordion-toggle {
|
|
text-transform: capitalize;
|
|
background-color: #ececec;
|
|
.font-layout-mixin(@color: @font-color-dark, @font-weight: bold);
|
|
&[data-group=cpu] {
|
|
text-transform: uppercase;
|
|
}
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
span {
|
|
font-weight: normal;
|
|
padding-left: 5px;
|
|
text-transform: none;
|
|
}
|
|
}
|
|
.accordion-inner div {
|
|
clear: both;
|
|
.font-layout-mixin(@font-size-small-2, @line-height: 12px);
|
|
padding: 4px;
|
|
label {
|
|
text-transform: uppercase;
|
|
display: block;
|
|
.position(@position: absolute; @left: 15px);
|
|
width: @node-details-label-margin - 10;
|
|
.font-layout-mixin(@font-size-small-2, @line-height: 12px);
|
|
word-break: break-all;
|
|
font-weight: normal;
|
|
}
|
|
span {
|
|
display: block;
|
|
margin-left: @node-details-label-margin;
|
|
}
|
|
}
|
|
.nested-object {
|
|
border: 1px solid #ececec;
|
|
margin-top: 3px;
|
|
.border-radius-mixin(3px);
|
|
div {
|
|
padding: 0;
|
|
position: relative;
|
|
margin-top: 3px;
|
|
font-weight: normal;
|
|
word-break: break-all;
|
|
label { left: 0px; }
|
|
}
|
|
}
|
|
}
|
|
|
|
#tab-actions {
|
|
div.row-fluid {margin-bottom: 20px;}
|
|
.action-item-placeholder {
|
|
border: 1px solid @fuel-light-5;
|
|
border-radius: 4px;
|
|
background-color: @fuel-light-5;
|
|
height: 215px !important;
|
|
.box-sizing-mixin;
|
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
overflow: hidden;
|
|
&.action-update {
|
|
margin-left: 0;
|
|
margin-top: 22px;
|
|
height: auto !important;
|
|
}
|
|
h4 {
|
|
display: block;
|
|
height: 24px;
|
|
overflow: hidden;
|
|
.indent-mixin(17px 20px 10px 20px);
|
|
}
|
|
.action-item-controls {
|
|
display: block;
|
|
overflow: hidden;
|
|
.indent-mixin(10px 20px 0px 20px);
|
|
position: relative;
|
|
input[type=text], select {
|
|
width: 250px;
|
|
margin-top: 4px;
|
|
margin-left: 2px;
|
|
}
|
|
select {
|
|
width: auto;
|
|
margin-bottom: 5px;
|
|
margin-right: 10px;
|
|
}
|
|
.action-item-description {
|
|
display: block;
|
|
max-height: 100px;
|
|
overflow: hidden;
|
|
.indent-mixin(0px);
|
|
margin-bottom: 8px;
|
|
&.important {
|
|
color: @fuel-deep-red;
|
|
font-style: italic;
|
|
}
|
|
&.unavailable { color: @fuel-dark-1; }
|
|
&.notice {
|
|
color: @fuel-dark-blue;
|
|
font-style: italic;
|
|
}
|
|
}
|
|
.rollback-environment-btn {margin-left: 10px;}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Support page
|
|
// -------------------------
|
|
|
|
.support-page {
|
|
min-height: 240px;
|
|
hr { clear: both; }
|
|
div:last-child hr { display: none; }
|
|
.el-inner { padding-bottom: 20px; }
|
|
&:after {
|
|
display: table;
|
|
line-height: 0;
|
|
content: "";
|
|
clear: both;
|
|
}
|
|
.snapshot {
|
|
p > span {
|
|
margin-left: 10px;
|
|
&.error { color: @fuel-red; }
|
|
}
|
|
.btn {
|
|
width: 220px;
|
|
text-align: left;
|
|
}
|
|
}
|
|
.btn { margin-right: 10px; }
|
|
.img {
|
|
display: block;
|
|
margin: 10px 0 0 20px !important;
|
|
overflow: hidden;
|
|
.width-height-mixin(@support-img-size, @support-img-size);
|
|
background-image: url(../img/support_icons.png);
|
|
background-repeat: no-repeat;
|
|
&.img-register-fuel { background-position: 0 0; }
|
|
&.img-contact-support { background-position: 0 -@support-img-size; }
|
|
&.img-download-logs { background-position: 0 -(@support-img-size * 2); }
|
|
&.img-audit-logs { background-position: 0 -(@support-img-size * 3); }
|
|
}
|
|
}
|
|
|
|
.accordion-inner, .accordion-inner label {
|
|
cursor: default;
|
|
}
|
|
|
|
// Custom checkbox & radio
|
|
// -------------------------
|
|
|
|
.node-box .custom-tumbler {
|
|
float: left;
|
|
margin: 12px;
|
|
.width-height-mixin(24px, 24px);
|
|
}
|
|
|
|
.custom-tumbler {
|
|
margin-top: 4px;
|
|
.width-height-mixin(24px, 24px);
|
|
position:relative;
|
|
}
|
|
|
|
.custom-tumbler input[type=checkbox]{.width-height-mixin(17px, 17px);margin:0;overflow:hidden;position:absolute;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; cursor: pointer; margin-top: 5px; margin-left: 5px;}
|
|
.custom-tumbler input[type=checkbox] + span{display:block;.width-height-mixin(24px, 24px);overflow:hidden;font-size:1px;line-height:0;background:transparent url(../img/radio_checkbox.png) no-repeat scroll -24px 0px;}
|
|
.custom-tumbler input[type=checkbox]:checked + span{background-position:0 0px;}
|
|
.custom-tumbler input[disabled] + span{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;cursor: not-allowed;}
|
|
.custom-tumbler input[type=checkbox] + span.checked{background-position:0 0px;}
|
|
|
|
.custom-tumbler input[type=radio]{.width-height-mixin(17px, 17px);margin-top:0;overflow:hidden;position:absolute;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0; cursor: pointer; margin-top: 5px; margin-left: 5px;}
|
|
.custom-tumbler input[type=radio] + span{display:block;.width-height-mixin(24px, 24px);overflow:hidden;font-size:1px;line-height:0;background:transparent url(../img/radio_checkbox.png) no-repeat scroll -24px -24px;}
|
|
.custom-tumbler input[type=radio]:checked + span{background-position:0px -24px;}
|
|
.custom-tumbler input[disabled] + span{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;cursor: not-allowed;}
|
|
.custom-tumbler input[type=radio] + span.checked{background-position:0px -24px;}
|
|
|
|
.parameter-box {
|
|
display: block;
|
|
}
|
|
|
|
.fieldset-group > div > .parameter-box,
|
|
.fieldset-group > div > div > .parameter-box {
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.parameter-name {
|
|
.float-mixin;
|
|
.box-sizing-mixin;
|
|
min-width: 120px;
|
|
font-weight: bold;
|
|
margin: 7px 14px 0 0;
|
|
overflow: hidden;
|
|
cursor: default;
|
|
&.hide {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.modal .parameter-name {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.parameter-control {
|
|
.float-mixin;
|
|
padding: 0px;
|
|
margin-right: 10px;
|
|
max-height: 40px;
|
|
}
|
|
|
|
.parameter-description {
|
|
.float-mixin;
|
|
color: @font-color-light;
|
|
.box-sizing-mixin;
|
|
margin-top: 4px;
|
|
&.validation-error { color: @fuel-deep-red; }
|
|
}
|
|
|
|
.parameter-spacer {
|
|
height: 8px;
|
|
}
|
|
|
|
.modal-parameter-description {
|
|
color: @font-color-light;
|
|
margin: 0 0 8px 35px;
|
|
font-size: @font-size-small-2;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.global-description {
|
|
display: block;
|
|
clear: both;
|
|
color: @font-color-light;
|
|
margin: -6px 20px 0 35px;
|
|
}
|
|
|
|
.table-wrapper {
|
|
.indent-mixin;
|
|
> .tablerow-wrapper {
|
|
display: table-row;
|
|
height:40px;
|
|
.parameter-name {
|
|
display: table-cell;
|
|
word-break: break-word !important;
|
|
vertical-align: middle;
|
|
padding: 0 10px 0 12px;
|
|
max-width: 220px;
|
|
float: none;
|
|
}
|
|
.parameter-control {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
float: none;
|
|
.box-sizing-mixin;
|
|
padding: 5px 10px 0 0;
|
|
[type="text"], [type="password"] { margin-bottom: 5px; }
|
|
&.input-append {
|
|
vertical-align: middle;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
.parameter-description {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
margin-top: 0;
|
|
padding: 0;
|
|
max-width: 550px;
|
|
float: none;
|
|
}
|
|
}
|
|
.table-colspan {
|
|
float: none;
|
|
margin-left: 0px;
|
|
}
|
|
> label {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
legend {
|
|
&.openstack-settings, &.networks {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
background-color: #ececec;
|
|
border: 1px solid #e5e5e5;
|
|
border-radius: 4px;
|
|
padding: 10px 12px 12px 12px;
|
|
height: 42px;
|
|
margin-top: 15px;
|
|
.box-sizing-mixin;
|
|
.font-layout-mixin(@font-size-base + 4, @font-color-dark, null, null, 18px);
|
|
.box-sizing-mixin;
|
|
}
|
|
&.openstack-sub-title {
|
|
.font-layout-mixin(@font-size-big-1, null, null, null, 30px);
|
|
margin: 10px 0px 6px 14px;
|
|
}
|
|
.toggleable {
|
|
font-size: @font-size-base + 4;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
.tumbler {
|
|
float:left;
|
|
margin-top: -6px;
|
|
margin-right: 0px;
|
|
}
|
|
}
|
|
|
|
.settings .hide { display: none !important; }
|
|
|
|
.credentials {
|
|
margin-bottom: 15px;
|
|
legend { margin: 0 0 10px; }
|
|
.parameter-box {
|
|
margin-left: 0 !important;
|
|
.parameter-control {
|
|
margin-bottom: 5px;
|
|
input { margin: 0; }
|
|
}
|
|
}
|
|
.note { margin-bottom: 10px; }
|
|
.settings-group {
|
|
background-color: @fuel-light-5;
|
|
padding: 20px 40px 20px 40px;
|
|
border: 1px dotted @fuel-base-color;
|
|
}
|
|
}
|
|
|
|
.toggle-credentials {
|
|
cursor: pointer;
|
|
margin-top: 12px;
|
|
div, i { .float-mixin; }
|
|
div { margin-left: 5px; }
|
|
&:hover {
|
|
div { text-decoration: underline; }
|
|
}
|
|
}
|
|
|
|
hr.slim {
|
|
margin: 10px;
|
|
}
|
|
|
|
.display-changes-dialog {
|
|
ul { margin-left: 35px; }
|
|
.deploy-task-name {
|
|
padding: 8px 10px 1px 10px;
|
|
&.header {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.deploy-task-notice {
|
|
.indent-mixin(0, 0px 10px);
|
|
.font-layout-mixin(@font-style: italic);
|
|
text-align: center;
|
|
}
|
|
.alert { margin: 10px 0; }
|
|
}
|
|
|
|
.radio-checkbox-group {
|
|
.indent-mixin;
|
|
margin-top: 10px;
|
|
&:before, &:after {
|
|
display: table;
|
|
line-height: 0;
|
|
content: "";
|
|
}
|
|
&:after { clear: both; }
|
|
.item-box {
|
|
width: auto;
|
|
float: left;
|
|
margin-left: 0px;
|
|
padding:0px;
|
|
min-height: 1px;
|
|
.parameter-box {
|
|
margin: 0px;
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Network Interfaces Settings
|
|
// -------------------------
|
|
|
|
.physical-network-box {
|
|
display: block;
|
|
&.nodrag {
|
|
opacity: 0.7;
|
|
.network-box-item {
|
|
border-color: @fuel-dark-red;
|
|
background-color: #f2dede;
|
|
}
|
|
}
|
|
}
|
|
|
|
.network-box-name {
|
|
border-bottom: 1px dotted @fuel-base-color;
|
|
font-size: @font-size-big-2;
|
|
padding: 8px 15px;
|
|
label {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.network-box-item {
|
|
display: block;
|
|
background-color: @fuel-light-5;
|
|
min-height: 80px;
|
|
border: 1px solid @fuel-base-color;
|
|
margin-left: 20px;
|
|
margin-bottom: 5px;
|
|
margin-top: 10px;
|
|
&:after{
|
|
clear: both;
|
|
display: table;
|
|
line-height: 0;
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
.network-interfaces-status {
|
|
display: block;
|
|
.width-height-mixin(54px, 58px);
|
|
background: @fuel-light-2;
|
|
padding: 0px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
float: left;
|
|
margin: 10px 20px 0px 0px;
|
|
}
|
|
|
|
.interface-online, .interface-offline {
|
|
speak: none;
|
|
display: inline-block;
|
|
text-decoration: inherit;
|
|
margin-right: 0em;
|
|
margin-left: 0em;
|
|
text-align: center;
|
|
text-transform: none;
|
|
font-variant: normal;
|
|
padding-top: 22px;
|
|
padding-left: 11px;
|
|
.width-height-mixin(0em, 17px);
|
|
.font-layout-mixin(@font-size-big-3, null, normal, normal, 0em, @text-shadow-white, @font-family: @font-family-fontello);
|
|
}
|
|
|
|
.interface-online:before {
|
|
content: '\e813';
|
|
color: #187425;
|
|
}
|
|
|
|
.interface-offline:before {
|
|
content: '\e813';
|
|
color: #494a4c;
|
|
}
|
|
|
|
.logical-network-box {
|
|
.float-mixin;
|
|
width: 600px;
|
|
min-height: 68px;
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
&:after {
|
|
clear: both;
|
|
display: table;
|
|
line-height: 0;
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
.network-bond-name-checkbox {
|
|
margin: 3px 12px 0 0;
|
|
}
|
|
|
|
.network-bond-name {
|
|
margin-top: 5px;
|
|
.font-layout-mixin(@font-size-big-2, @fuel-black-color, @text-shadow: @text-shadow-white);
|
|
&.disabled {
|
|
padding-left: 38px;
|
|
}
|
|
}
|
|
|
|
.network-bond-mode {
|
|
.font-layout-mixin(font-size-normal, @text-shadow: @text-shadow-white);
|
|
margin: 2px 0px 0px 20px;
|
|
> b {
|
|
color: @font-color-base;
|
|
}
|
|
select {
|
|
width: 160px;
|
|
margin-top: -4px;
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
|
|
.bond-speed-warning {
|
|
margin: 10px 0 0 20px;
|
|
}
|
|
|
|
.physical-network-checkbox {
|
|
.float-mixin;
|
|
padding: 23px 0 0 15px;
|
|
width: 52px;
|
|
.box-sizing-mixin;
|
|
}
|
|
|
|
.network-connections-block {
|
|
.float-mixin;
|
|
width: 54px;
|
|
margin-bottom: 8px;
|
|
.box-sizing-mixin;
|
|
}
|
|
|
|
.network-interfaces-name {
|
|
.font-layout-mixin(@font-size-small-3, #505050, bold, null, 16px, @text-shadow-white);
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.network-connections-info-block {
|
|
.float-mixin;
|
|
width: 266px;
|
|
.box-sizing-mixin;
|
|
}
|
|
|
|
.network-connections-info-block-item {
|
|
display: block;
|
|
height: 58px;
|
|
overflow: hidden;
|
|
margin: 10px 0px 0px 10px;
|
|
}
|
|
|
|
.network-connections-info-position {
|
|
display: inline-block;
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.network-connections-info-description {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.network-connections-info-description > div {
|
|
display: block;
|
|
height: 18px;
|
|
font-size: @font-size-small-1;
|
|
}
|
|
|
|
.network-connections-info-description > button {
|
|
font-size: @font-size-small-1;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
|
|
.logical-network-group {
|
|
.float-mixin;
|
|
}
|
|
|
|
.logical-network-item {
|
|
margin-top: 10px;
|
|
margin-left: 10px;
|
|
text-align: center;
|
|
text-shadow: 0 1px 0 rgba(255,255,255,.4);
|
|
border: solid 1px #999;
|
|
background: @fuel-light-4; /* Old browsers */
|
|
.css-linear-gradient-mixin-filter(@fuel-light-4, #b4b4b4);
|
|
.float-mixin;
|
|
.width-height-mixin(120px, 58px);
|
|
.box-shadow-mixin(inset 0 0 0 1px #fff);
|
|
.box-sizing-mixin;
|
|
&:hover {
|
|
border: 1px solid @fuel-dark-2;
|
|
.css-linear-gradient-mixin-filter(#cdcccc, #a7a6a6);
|
|
cursor: move;
|
|
}
|
|
.name {
|
|
height: 18px;
|
|
margin: 10px 3px 0;
|
|
word-break: break-all;
|
|
font-size: @font-size-base;
|
|
text-transform: capitalize;
|
|
overflow: hidden;
|
|
}
|
|
.id {
|
|
.font-layout-mixin(@font-size-base - 4, @fuel-dark-5);
|
|
}
|
|
}
|
|
|
|
.logical-network-group.disabled .logical-network-item:hover {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.network-help-message {
|
|
.font-layout-mixin(@font-size-big-2, @font-color-base);
|
|
margin-top: 26px;
|
|
margin-left: 10px;
|
|
text-align: left;
|
|
}
|
|
|
|
.radio-checkbox-group .item-box .parameter-box {
|
|
.parameter-control {
|
|
margin-right: 5px;
|
|
}
|
|
.parameter-name {
|
|
min-width: 10px;
|
|
}
|
|
}
|
|
|
|
.changes-locked label {
|
|
cursor: default !important;
|
|
}
|
|
|
|
// Disk Utility Start
|
|
// -------------------------
|
|
|
|
.disk-box {
|
|
display: block;
|
|
margin-left: 20px;
|
|
margin-bottom: 30px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.edit-node-disks .disk-box { margin-left: 0px; }
|
|
|
|
.disk-box-name {
|
|
.font-layout-mixin(@font-size-base + 4, @font-color-dark);
|
|
margin-bottom: 8px;
|
|
height: 20px;
|
|
}
|
|
|
|
.disk-box-size {
|
|
.font-layout-mixin(@font-size-base + 4, @font-color-dark);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.disk-map-short {
|
|
clear: both;
|
|
display: block;
|
|
height: 60px;
|
|
background-color: @fuel-white-color;
|
|
border: 1px solid @fuel-base-color;
|
|
.box-sizing-mixin;
|
|
&:hover {
|
|
.box-shadow-mixin(0 0 8px rgba(0,0,0,.3));
|
|
cursor: pointer;
|
|
border-color: @fuel-dark-2;
|
|
}
|
|
}
|
|
|
|
.changes-locked .disk-map-short {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.cluster-toolbar-item {
|
|
a {
|
|
display: block;
|
|
}
|
|
.btn.conflict i {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
.disk-map-full {
|
|
clear: both;
|
|
display: block;
|
|
height: 60px;
|
|
background-color: @fuel-white-color;
|
|
border: 1px solid @fuel-base-color;
|
|
.box-sizing-mixin;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.disk-map-full .disk-map-image .volume-group .close-btn {
|
|
.width-height-mixin(16px,16px);
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAH1JREFUeNrEU8ENwCAI1E7iCI7EZozICBQbml6QV2nSSwhEvANRu6q2CnpVoC0BFLF4mLGZ6APxtbHxUMD8DMSIlZupgFcW2JiRbz8yAcYqZgRkCt1xJoBVydukEGM3m0AEwcAoyV+8o1Xx5RHKQ6xdY/khvX3K/fffeAowAHqsOyt5zY/NAAAAAElFTkSuQmCC);
|
|
.position(relative, @top: -60px, @left: 100%);
|
|
margin-left: -18px;
|
|
margin-top: 2px;
|
|
cursor: pointer;
|
|
&:hover {
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARdJREFUeNqsUzsOgkAUBNEQiTFWSmNCrLWwteICmlhTWFFwDCrjGUi8ggWlrZfgDLZqAD/4xswmSGK1vmTC27czs2+XXdP4jpbAEnQEbY4RL8FDcBc8Of6EWfuCbAt6hEMjg8Kb4EIUNKmUkUXROIqiVZZlx6IorhUDOWqYA4dcq942VhvHcbwpy/JS/QjMgUMTR20RbQ7hrsR5nt+aYlUDh50M1RbhNEGLihgEwTZJkr0SI0dNmYALDbRtnrbjed4CbrZtd33fH4VheHBd94ya5CcxWWMOY3Idao2BYN5sOU3TndRnAPLmPDTQtow/RF8wrf827FlqS6zMTpb1MwEXGmr1DvEvv1H7ImldZe3HZOo+57cAAwDQB4f/K86qKgAAAABJRU5ErkJggg==);
|
|
}
|
|
}
|
|
|
|
.disk-map-image {
|
|
display: block;
|
|
width: 100%;
|
|
border: thin solid white;
|
|
.box-sizing-mixin;
|
|
&:after {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.disk-info-box {
|
|
width: 45%;
|
|
float: left;
|
|
padding: 14px;
|
|
.box-sizing-mixin;
|
|
}
|
|
|
|
.disk-utility-box {
|
|
width: 55%;
|
|
float: left;
|
|
padding: 14px;
|
|
.box-sizing-mixin;
|
|
}
|
|
|
|
.disk-box-title {
|
|
.font-layout-mixin(@font-size-big-2, @font-color-base, @text-shadow: 1px 0 0 rgba(255,255,255,1));
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.disk-map-details {
|
|
border-left: 1px solid @fuel-base-color;
|
|
border-right: 1px solid @fuel-base-color;
|
|
border-bottom: 1px solid @fuel-base-color;
|
|
background-color: @fuel-light-5;
|
|
&.collapse {
|
|
visibility: hidden;
|
|
&.in {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
.disk-map-details-item {
|
|
display: block;
|
|
clear: both;
|
|
min-height: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.disk-map-details-name {
|
|
.font-layout-mixin(@font-size-base, @font-color-base);
|
|
width: 85px;
|
|
float:left;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.disk-map-details-parameter {
|
|
.font-layout-mixin(@font-size-base, @font-color-dark);
|
|
float: left;
|
|
word-break: break-all;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.disk-box .use-all-allowed {
|
|
color: #0088cc;
|
|
&:hover {
|
|
color: #005580;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.disk-visual {
|
|
overflow: hidden;
|
|
height: 60px;
|
|
.volume-group {
|
|
display: inline-block;
|
|
float: left;
|
|
height: 56px;
|
|
text-align: center;
|
|
color: @fuel-white-color;
|
|
.box-sizing-mixin;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.volume-group-box-flag {
|
|
width: 6px;
|
|
height: 59px;
|
|
margin: 2px 12px 2px 2px;
|
|
float: left;
|
|
}
|
|
|
|
.disk-visual .unallocated {
|
|
overflow: hidden;
|
|
background: @fuel-light-1; /* Old browsers */
|
|
.css-linear-gradient-mixin-filter(@fuel-light-1, @fuel-light-4);
|
|
}
|
|
|
|
.disk-visual.invalid {
|
|
div.volume-group {
|
|
outline: 1px solid #fff;
|
|
background: #afafaf !important; /* Old browsers */
|
|
.css-linear-gradient-mixin-filter(#b0b0b0, @fuel-light-1);
|
|
}
|
|
.close-btn {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.unallocated .node-content .toggle-volume {
|
|
.font-layout-mixin(@color: @font-color-base, @text-shadow: 1px 0 0 rgba(255,255,255,.3));
|
|
}
|
|
|
|
.volume-group-name {
|
|
.font-layout-mixin(@font-size-big-2, @text-shadow: 0 0 2px rgba(0,0,0,.5));
|
|
margin-top: 4px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
padding: 3px;
|
|
white-space: nowrap;
|
|
}
|
|
.volume-group-size {
|
|
.font-layout-mixin(@font-size-small-3, @text-shadow: 0 0 2px rgba(0,0,0,.5));
|
|
white-space: nowrap;
|
|
}
|
|
.unallocated .node-content .volume-group-name, .unallocated .node-content .volume-group-size {
|
|
text-shadow: 1px 0 0 rgba(255,255,255,.3);
|
|
}
|
|
.volume-group-box {
|
|
display: block;
|
|
height: 48px;
|
|
border: 1px solid #d0d0d0;
|
|
background-color: #e5e5e5;
|
|
margin-bottom: 10px;
|
|
overflow: hidden;
|
|
.box-sizing-mixin;
|
|
&:hover {
|
|
border: 1px solid #c0c0c0;
|
|
background-color: #e0e0e0;
|
|
}
|
|
&:after {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.volume-group-box-name {
|
|
.font-layout-mixin(@font-size-big-2, @font-color-base);
|
|
display: inline-block;
|
|
float: left;
|
|
margin-top: 10px;
|
|
max-width: 170px;
|
|
}
|
|
|
|
.volume-group-box-edit {
|
|
display: inline-block;
|
|
float: left;
|
|
font-size: @font-size-base - 5;
|
|
text-transform: uppercase;
|
|
margin: 14px 6px 0px 0px;
|
|
}
|
|
|
|
.volume-group-box-input {
|
|
display: inline-block;
|
|
float: left;
|
|
margin: 9px 3px 0px 0px;
|
|
input {
|
|
width: 120px;
|
|
text-align: right;
|
|
margin-bottom: 0;
|
|
}
|
|
.error {
|
|
color: @fuel-deep-red;
|
|
border-color: @fuel-deep-red;
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
|
|
&:focus {
|
|
border-color: #953b39;
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
|
|
}
|
|
}
|
|
}
|
|
|
|
.volume-group-box-sizetype {
|
|
display: inline-block;
|
|
float: left;
|
|
margin: 13px 8px 0px 0px;
|
|
color: @fuel-dark-2;
|
|
}
|
|
|
|
.network-box-error-message,
|
|
.volume-group-error-message {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-align: right;
|
|
.font-layout-mixin(@font-size-small-2, @fuel-deep-red);
|
|
margin-top: -5px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.toggle-volume {
|
|
height: 57px;
|
|
.position(relative, -4px);
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.hidden-titles .toggle-volume > div, .hidden-titles .close-btn {
|
|
display: none !important;
|
|
}
|
|
|
|
// license
|
|
// -------------------------
|
|
|
|
.toggle-volume {
|
|
height: 56px;
|
|
.position(relative, -4px);
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.network-interfaces-modal-info {
|
|
margin-left: 34px;
|
|
> p {
|
|
margin: 0px;
|
|
.font-layout-mixin(@color: @fuel-dark-3, @font-weight: bold);
|
|
}
|
|
> ul > li {
|
|
margin: 0px;
|
|
.font-layout-mixin(@color: @fuel-dark-3, @font-weight: bold);
|
|
}
|
|
}
|
|
|
|
form.rhel-license {
|
|
padding-left: 10px;
|
|
margin-bottom: 0;
|
|
fieldset {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
|
|
form.create-cluster-form {
|
|
margin-bottom: 10px;
|
|
.input-large { width: 330px; }
|
|
select { width: 340px; }
|
|
.control-label {
|
|
width: 140px;
|
|
font-weight: bold;
|
|
}
|
|
.controls { margin-left: 160px; }
|
|
}
|
|
|
|
.control-group {
|
|
> .parameter-box {
|
|
display: block;
|
|
> .parameter-description {
|
|
font-size: @font-size-small-2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.credentials .radio-checkbox-group {
|
|
margin-left: 180px;
|
|
}
|
|
|
|
.release-description {
|
|
font-size: @font-size-small-2 !important;
|
|
line-height: 15px;
|
|
margin-left: 160px;
|
|
text-align: justify;
|
|
width: 335px;
|
|
}
|
|
|
|
.table-releases-box {
|
|
background-color: @fuel-white-color;
|
|
padding: 20px 20px 10px 20px;
|
|
.border-radius-mixin(4px);
|
|
.releases-table {
|
|
th {
|
|
min-width: 200px;
|
|
width: 12%;
|
|
&.name { width: 60%; }
|
|
&.version { min-width: 100px; }
|
|
}
|
|
td {
|
|
height: 30px;
|
|
vertical-align: middle;
|
|
}
|
|
.release-error {
|
|
font-size: @font-size-small-2;
|
|
color: @fuel-red;
|
|
}
|
|
.download_progress .progress {
|
|
.css-linear-gradient-mixin(#435267, @fuel-light-1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.bar-title {
|
|
display: block;
|
|
width: 100%;
|
|
margin-top: -40px;
|
|
.font-layout-mixin(@font-size-small-3, @fuel-white-color);
|
|
text-align: center;
|
|
}
|
|
|
|
input.input-append {
|
|
width: 175px;
|
|
}
|
|
|
|
.parameter-control.input-append .add-on {
|
|
.icon-eye, .icon-eye-off {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
// OpenStack Health Check
|
|
// -------------------------
|
|
|
|
.healthcheck-table {
|
|
margin: 0px 0px 30px 0px;
|
|
th {
|
|
font-weight: normal;
|
|
label {
|
|
margin: 0;
|
|
&.testset-name {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.healthcheck-col-status {width: 50px; text-align: center;}
|
|
.healthcheck-col-duration {width: 120px; text-align: center;}
|
|
th {
|
|
padding-top: 12px; padding-bottom: 12px;
|
|
&.healthcheck-col-select {padding-top: 0; padding-bottom: 10px;}
|
|
}
|
|
.healthcheck-col-select {width: 24px;}
|
|
}
|
|
.healthcheck-name {font-size: @font-size-big-1; margin: 5px 0px 5px 0px;}
|
|
.healthcheck-duration {font-size: @font-size-big-1; margin: 5px 0px 5px 0px; text-align: center; color: @fuel-dark-2;}
|
|
.healthcheck-status {font-size: @font-size-base + 6 ; margin-top: 3px; text-align: center;}
|
|
|
|
.healthcheck-msg {
|
|
.font-layout-mixin(@font-size-small-1, @line-height: 15px);
|
|
.well {
|
|
color: @font-color-base;
|
|
margin: 0;
|
|
b {color: #890000;}
|
|
}
|
|
}
|
|
|
|
.healthcheck-progress {height: 12px; margin-bottom: 0px; margin-top: 8px;}
|
|
.healthcheck-status-stopped, .healthcheck-status-unknown, .healthcheck-status-wait_running {color: @fuel-base-color;}
|
|
.healthcheck-status-success {color: #2e8701;}
|
|
.healthcheck-status-failure, .healthcheck-status-error {color: #890000;}
|
|
|
|
// Cluster toolbar
|
|
// -------------------------
|
|
|
|
.cluster-toolbar {
|
|
display: block;
|
|
.width-height-mixin(100%, 65px);
|
|
padding: 19px 0px 19px 0px;
|
|
margin-bottom: 20px;
|
|
border-bottom: 2px solid @fuel-light-1;
|
|
.box-sizing-mixin;
|
|
> .pull-right { float: right; }
|
|
select { margin-bottom: 0; }
|
|
}
|
|
|
|
.cluster-toolbar-item {
|
|
.float-mixin;
|
|
margin-left: 20px;
|
|
&:first-child {
|
|
margin-left: 0px;
|
|
}
|
|
label {
|
|
height: 30px;
|
|
.float-mixin;
|
|
.indent-mixin;
|
|
line-height: 29px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.node-groups {
|
|
display: block;
|
|
border: solid 1px @fuel-light-3;
|
|
border-radius: 4px;
|
|
padding: 10px 20px 20px 20px;
|
|
margin-bottom: 20px;
|
|
&:hover { background-color: @fuel-light-5; }
|
|
}
|
|
|
|
.animate-spin {
|
|
-moz-animation: spin 2s infinite linear;
|
|
-o-animation: spin 2s infinite linear;
|
|
-webkit-animation: spin 2s infinite linear;
|
|
animation: spin 2s infinite linear;
|
|
display: inline-block;
|
|
}
|
|
@-moz-keyframes spin {
|
|
0% {
|
|
-moz-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: rotate(359deg);
|
|
-o-transform: rotate(359deg);
|
|
-webkit-transform: rotate(359deg);
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|
|
@-webkit-keyframes spin {
|
|
0% {
|
|
-moz-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: rotate(359deg);
|
|
-o-transform: rotate(359deg);
|
|
-webkit-transform: rotate(359deg);
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|
|
@-o-keyframes spin {
|
|
0% {
|
|
-moz-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: rotate(359deg);
|
|
-o-transform: rotate(359deg);
|
|
-webkit-transform: rotate(359deg);
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|
|
@-ms-keyframes spin {
|
|
0% {
|
|
-moz-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: rotate(359deg);
|
|
-o-transform: rotate(359deg);
|
|
-webkit-transform: rotate(359deg);
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|
|
@keyframes spin {
|
|
0% {
|
|
-moz-transform: rotate(0deg);
|
|
-o-transform: rotate(0deg);
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: rotate(359deg);
|
|
-o-transform: rotate(359deg);
|
|
-webkit-transform: rotate(359deg);
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
.roles-panel {
|
|
label {
|
|
.float-mixin;
|
|
max-width: 200px;
|
|
padding-right: 20px;
|
|
}
|
|
input[type=checkbox] {
|
|
.position(relative, -3px);
|
|
}
|
|
hr {
|
|
margin: 20px 0;
|
|
border: 0;
|
|
border-top: 1px solid @fuel-light-1;
|
|
border-bottom: 1px solid @fuel-white-color;
|
|
}
|
|
}
|
|
|
|
.role-container {
|
|
display: block;
|
|
.indent-mixin;
|
|
margin-bottom: 10px;
|
|
label {
|
|
.indent-mixin;
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
.role-description {
|
|
display: block;
|
|
float: none;
|
|
clear: both;
|
|
.font-layout-mixin(@font-size-small-2, @fuel-dark-3, null, italic);
|
|
margin-left: 17px;
|
|
margin-top: -8px;
|
|
}
|
|
|
|
.role-conflict {
|
|
display: inline-block;
|
|
.font-layout-mixin(@font-size-small-2, @fuel-deep-red, null, italic);
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.btn-group-congiration[data-invalid=true] i {
|
|
display: inline;
|
|
}
|
|
|
|
.btn-group-congiration[data-invalid=false] i {
|
|
display: none;
|
|
}
|
|
|
|
.cluster-name-box {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.cluster-name-placeholder {
|
|
width: 800px;
|
|
float: left;
|
|
.name-box {
|
|
.font-layout-mixin(@font-size: 28px, @font-weight: lighter);
|
|
.name {
|
|
float: left;
|
|
height: 34px;
|
|
line-height: 30px;
|
|
max-width: 550px;
|
|
overflow: hidden;
|
|
word-break: break-all;
|
|
margin: 0 0 0 8px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cluster-summary-placeholder {
|
|
margin-left: 8px;
|
|
color: @fuel-grey-color;
|
|
> div {
|
|
.font-layout-mixin(@font-size: @font-size-small-3, @color: @fuel-light-5);
|
|
display: inline-block;
|
|
margin-right: 12px;
|
|
strong { color: @fuel-light-3; }
|
|
span { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
|
|
&.status { text-transform: capitalize; }
|
|
&.error {
|
|
.font-layout-mixin(@font-weight: bold, @color: @fuel-red);
|
|
}
|
|
}
|
|
}
|
|
|
|
.cluster-info-placeholder {
|
|
max-width: 770px;
|
|
}
|
|
|
|
.cluster-deploy-placeholder {
|
|
width: 230px;
|
|
float: right;
|
|
margin-top: 0;
|
|
.box-sizing-mixin();
|
|
}
|
|
|
|
.btn-cluster-details {
|
|
cursor: pointer;
|
|
}
|
|
|
|
i.btn-cluster-details {
|
|
display: inline-block;
|
|
margin-right: -4px;
|
|
.font-layout-mixin(@font-size-big-2, @line-height: 28px);
|
|
.position(relative, @bottom: 3px);
|
|
}
|
|
|
|
.node-list-name-count {
|
|
display: inline-block;
|
|
float: left;
|
|
cursor: default;
|
|
.box-sizing-mixin;
|
|
.indent-mixin;
|
|
margin: 7px 0 0 15px;
|
|
.font-layout-mixin(@font-size-big-2, @line-height: 22px);
|
|
color: @fuel-blue-smoke;
|
|
height: 20px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cluster-details {
|
|
text-align: left;
|
|
.indent-mixin (0, 10px);
|
|
position: absolute;
|
|
z-index: 10000;
|
|
li {
|
|
min-width: 200px;
|
|
margin-bottom: 10px;
|
|
.font-layout-mixin(@font-size-base, @fuel-dark-5);
|
|
strong {
|
|
display: block;
|
|
margin-bottom: -4px;
|
|
.font-layout-mixin(@font-size-small-2, @font-color-light, lighter);
|
|
}
|
|
}
|
|
}
|
|
|
|
.create-cluster-modal {
|
|
width: 760px;
|
|
margin-left: -380px;
|
|
min-height: 485px;
|
|
}
|
|
|
|
|
|
/** Login **/
|
|
.login-placeholder {
|
|
.position(absolute, @top: 0px, @left: 0px);
|
|
.width-height-mixin;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.login-box {
|
|
position: relative;
|
|
.width-height-mixin(500px, 400px);
|
|
background-color: @fuel-white-color;
|
|
.border-radius-mixin(18px);
|
|
margin: 10% auto 0;
|
|
.box-shadow-mixin(0 1px 1px rgba(0,0,0,.5));
|
|
}
|
|
|
|
.login-logo-circle {
|
|
.width-height-mixin(160px, 160px);
|
|
background-color: @fuel-white-color;
|
|
.position(relative, @top: -80px);
|
|
border-radius: 80px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.login-logo {
|
|
background: url(../img/fuel-big-logo.png) repeat scroll 0 0 rgba(0, 0, 0, 0);
|
|
.position(relative, @top: -240px, @left: 156px);
|
|
.width-height-mixin(200px, 260px);
|
|
margin-bottom: -220px;
|
|
}
|
|
|
|
.login-fields-box {
|
|
height: 276px;
|
|
overflow: hidden;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.login-fields-box {
|
|
> .form-horizontal .control-group {
|
|
> label {
|
|
width: 114px;
|
|
font-size: @font-size-big-2 + 2;
|
|
padding-top: 5px;
|
|
> i { color: @fuel-base-color;}
|
|
}
|
|
> .controls {
|
|
margin-left: 120px;
|
|
> button { width: 160px; }
|
|
}
|
|
}
|
|
}
|
|
|
|
.login-error-auth {
|
|
margin: 5px 0px 20px;
|
|
height: 20px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.login-language-box {
|
|
margin-top: 40px;
|
|
margin-left: 180px;
|
|
}
|
|
|
|
.login-copyrights {
|
|
margin-top: 20px;
|
|
}
|
|
.login-copyrights > p {
|
|
.indent-mixin;
|
|
.font-layout-mixin(@font-size: @font-size-small-2, @color: @fuel-light-3, @line-height: 18px );
|
|
}
|
|
|
|
.user-info-box {
|
|
.font-layout-mixin(@font-size: @font-size-small-2, @font-weight: bold, @color: @fuel-white-color, @text-shadow: 0 1px 0 #000000);
|
|
text-align: right;
|
|
margin: 2px;
|
|
height: 20px;
|
|
overflow: hidden;
|
|
& a {
|
|
margin-left: 12px;
|
|
color: @fuel-blue-smoke;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.change-password-form {
|
|
margin: 0;
|
|
.parameter-name { width: 130px; }
|
|
}
|