| /** |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the |
| * "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| |
| /************************************************************************ |
| * Health status(service/host/host component health)icons class names |
| ***********************************************************************/ |
| @health-status-red-icon: icon-warning-sign; |
| @health-status-green-icon: icon-ok-sign; |
| @health-status-yellow-icon: icon-question-sign; |
| @health-status-orange-icon: icon-minus-sign; |
| @maintenance-icon: icon-medkit; |
| /************************************************************************ |
| * Health status(service/host/host component health)icon colors |
| ***********************************************************************/ |
| @health-status-red: #ff0000; |
| @health-status-green: #5AB400; |
| @health-status-yellow: #FFD13D; |
| @health-status-orange: #FF8E00; |
| @maintenance-black: #000000; |
| /************************************************************************ |
| * Health status(service/host/host component health)icon colors ends |
| ***********************************************************************/ |
| @space-s: 5px; |
| @space-m: 10px; |
| @space-l: 20px; |
| @green: #69BE28; |
| @blue: #0572ff; |
| @gray-blue: #80A0B9; |
| @gray: #999; |
| @current-green: #468847; |
| |
| @spinner-default-width: 36px; |
| @spinner-default-height: 36px; |
| @spinner-small-width: 30px; |
| @spinner-small-height: 30px; |
| |
| .@{health-status-red-icon} { |
| color: @health-status-red; |
| } |
| .@{health-status-green-icon} { |
| color: @health-status-green; |
| } |
| .@{health-status-yellow-icon} { |
| color: @health-status-yellow; |
| } |
| .@{health-status-orange-icon} { |
| color: @health-status-orange; |
| } |
| .@{maintenance-icon} { |
| color: @maintenance-black; |
| } |
| |
| @-webkit-keyframes orangePulse { |
| from { background-color: #fdb82f; } |
| 50% { background-color: #fd910e; } |
| to { background-color: #fdb82f; } |
| } |
| |
| @-moz-keyframes orangePulse { |
| from { background-color: #fdb82f; } |
| 50% { background-color: #fd910e; } |
| to { background-color: #fdb82f; } |
| } |
| |
| @keyframes orangePulse |
| { |
| 0% { background-color: #fdb82f; } |
| 50% { background-color: #fd910e; } |
| 100% { background-color: #fdb82f; } |
| } |
| |
| @-webkit-keyframes greenPulse { |
| from { background-color: #118fff; } |
| 50% { background-color: #006DCC; } |
| to { background-color: #118fff; } |
| } |
| |
| @-moz-keyframes greenPulse { |
| from { background-color: #118fff; } |
| 50% { background-color: #006DCC; } |
| to { background-color: #118fff; } |
| } |
| |
| @keyframes greenPulse |
| { |
| 0% { background-color: #118fff; } |
| 50% { background-color: #006DCC; } |
| 100% { background-color: #118fff; } |
| } |
| |
| @-webkit-keyframes greenPulseInner { |
| from { color: #118fff; } |
| 50% { color: #006DCC; } |
| to { color: #118fff; } |
| } |
| |
| @-moz-keyframes greenPulseInner { |
| from { color: #118fff; } |
| 50% { color: #006DCC; } |
| to { color: #118fff; } |
| } |
| |
| @keyframes greenPulseInner |
| { |
| 0% { color: #118fff; } |
| 50% { color: #006DCC; } |
| 100% { color: #118fff; } |
| } |
| |
| @-webkit-keyframes redPulse { |
| from { background-color: #ff3333; } |
| 50% { background-color: #ff0000; } |
| to { background-color: #ff3333; } |
| } |
| |
| @-moz-keyframes redPulse { |
| from { background-color: #ff3333; } |
| 50% { background-color: #ff0000; } |
| to { background-color: #ff3333; } |
| } |
| |
| @keyframes redPulse |
| { |
| 0% { background-color: #ff3333; } |
| 50% { background-color: #ff0000; } |
| 100% { background-color: #ff3333; } |
| } |
| |
| .gradient(@color: #FAFAFA, @start: #FFFFFF, @stop: #F2F2F2) { |
| background: @color; |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0, @start), color-stop(1, @stop)); |
| background: -ms-linear-gradient(top, @start, @stop); |
| background: -moz-linear-gradient(center top, @start 0%, @stop 100%); |
| filter: progid:dximagetransform.microsoft.gradient(startColorstr= @start, endColorstr= @stop, GradientType=0); // for IE9- |
| } |
| |
| |
| @footer-height: 100px; |
| |
| @restart-indicator-color: #FDB82F; |
| |
| @top-nav-bg-color-from: #555555; |
| @top-nav-bg-color-to: #333333; |
| @top-nav-brand-color: #ffffff; |
| @top-nav-ops-count-color: #ffffff; |
| @top-nav-ops-count-bg-color: #c3c3c3; |
| @top-nav-menu-active-text-color: #333333; |
| @top-nav-menu-active-bg-color: #ffffff; |
| @top-nav-menu-text-color: #c3c3c3; |
| @top-nav-menu-text-hover-color: #ffffff; |
| @top-nav-menu-dropdown-border-color: #c3c3c3; |
| @top-nav-menu-dropdown-bg-color: #ffffff; |
| @top-nav-menu-dropdown-text-color: #333333; |
| @default-font-size: 14px; |
| @smaller-font-size: 12px; |
| |
| /************************************************************************ |
| * Modal popup properties |
| ***********************************************************************/ |
| // modal body content padding |
| @modal-body-padding: 15px; |
| // modal header height |
| @modal-header-height: 50px; |
| // modal footer height |
| @modal-footer-height: 60px; |
| |
| .editable-list-container.well{ |
| padding: 10px; |
| position: relative; |
| margin-bottom: 25px; |
| cursor: pointer; |
| } |
| .editable-list-container.well.edit-mode{ |
| cursor: default; |
| } |
| .editable-list-container.well.disabled{ |
| background: white; |
| } |
| |
| .editable-list-container .items-box{ |
| |
| } |
| .editable-list-container .items-box ul.items-list{ |
| list-style-type: none; |
| margin: 0; |
| padding: 0; |
| } |
| |
| .editable-list-container .items-box ul.items-list li.item{ |
| display: inline-block; |
| padding: 4px 8px; |
| margin: 0 5px 5px 2px; |
| background: white; |
| border: 1px solid #ebebeb; |
| max-width: 100%; |
| white-space: nowrap; |
| position: relative; |
| a { |
| color: #555; |
| } |
| } |
| |
| .editable-list-container.edit-mode .items-box ul.items-list li.item.deletable{ |
| padding-right: 25px; |
| } |
| .editable-list-container .items-box ul.items-list li.item.global{ |
| background-color: #f5f5f5; |
| } |
| |
| .editable-list-container .items-box ul.items-list li.item .close{ |
| margin: -2px 0 0 5px; |
| width: 13px; |
| outline: none; |
| position: absolute; |
| display: none; |
| } |
| .editable-list-container.edit-mode .items-box ul.items-list li.item .close{ |
| display: inline-block; |
| } |
| |
| .editable-list-container .items-box ul.items-list li a{ |
| text-decoration: none; |
| } |
| |
| .editable-list-container.edit-mode .items-box ul.items-list li.item.add-item-input .ember-text-field{ |
| display: inline-block!important; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| position: relative; |
| padding: 0 0; |
| margin: 0 0; |
| border: none; |
| width: 50px; |
| height: 18px; |
| -webkit-box-shadow: none; |
| -moz-box-shadow: none; |
| box-shadow: none; |
| -webkit-transition: none; |
| -moz-transition: none; |
| -o-transition: none; |
| transition: none; |
| } |
| |
| .editable-list-container .items-box ul.items-list li.item.add-item{ |
| color: #ddd; |
| } |
| |
| .typeahead-box{ |
| position: absolute; |
| left: 0; |
| margin-top: 5px; |
| background: white; |
| border: 1px solid #ebebeb; |
| z-index: 1000; |
| min-width: 65px; |
| max-height: 150px; |
| overflow: auto; |
| } |
| .typeahead-box ul{ |
| list-style-type: none; |
| margin: 0; |
| padding: 0; |
| } |
| .typeahead-box ul li{ |
| padding: 3px 5px; |
| display: block; |
| cursor: pointer; |
| } |
| |
| .typeahead-box ul li.selected, .typeahead-box ul li:hover{ |
| background: #eee; |
| } |
| |
| .editable-list-container .actions-panel{ |
| position: absolute; |
| right: 5px; |
| bottom: -30px; |
| padding: 2px 5px 5px 5px; |
| background: #f5f5f5; |
| border: 1px solid #e3e3e3; |
| border-top: none; |
| border-radius: 0 0 4px 4px; |
| |
| -webkit-transition: all 0.3s; |
| -o-transition: all 0.3s; |
| transition: all 0.3s; |
| |
| -ms-transform-origin: 0% 0%; /* IE 9 */ |
| -webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */ |
| transform-origin: 0% 0%; |
| |
| -webkit-transform: rotateX(0deg); |
| -ms-transform: rotateX(0deg); |
| -o-transform: rotateX(0deg); |
| transform: rotateX(0deg); |
| |
| .btn-xs { |
| padding: 1px 5px; |
| font-size: 12px; |
| line-height: 1.5; |
| border-radius: 3px; |
| } |
| .icon-remove { |
| color: #000000; |
| } |
| .icon-ok { |
| color: white; |
| } |
| } |
| |
| .editable-list-container.disabled .pencil-box{ |
| display: none; |
| } |
| .editable-list-container .pencil-box{ |
| position: absolute; |
| right: 5px; |
| top: 5px; |
| opacity: 0; |
| -webkit-transition: all 0.3s; |
| -o-transition: all 0.3s; |
| transition: all 0.3s; |
| } |
| .editable-list-container:hover .pencil-box{ |
| opacity: 1; |
| } |
| .editable-list-container.edit-mode:hover .pencil-box{ |
| opacity: 0; |
| } |
| |
| .table-overlay { |
| position: absolute; |
| opacity: 0.9; |
| background-color: #fefefe; |
| .spinner { |
| display: none; |
| } |
| } |
| |
| .host-elements { |
| border: 1px solid #ddd; |
| height: 120px; |
| overflow: auto; |
| padding: 5px; |
| ul { |
| margin-bottom: 0; |
| } |
| table { |
| width: 100%; |
| td { |
| width: 50%; |
| padding: 0; |
| } |
| } |
| } |
| |
| .export-graph-list { |
| top: 25px; |
| min-width: 60px; |
| font-size: 14px; |
| cursor: auto; |
| a { |
| cursor: pointer; |
| } |
| } |
| |
| .bootstrap-checkbox { |
| &>button.btn { |
| &:focus { |
| border-color: none; |
| box-shadow: 0; |
| outline: 0 none; |
| } |
| &.btn-large { |
| padding-top: 6px; |
| } |
| } |
| } |
| |
| .lh-btn { |
| line-height: 30px; |
| } |
| |
| .text-bold { |
| font-weight: bold; |
| } |
| |
| .pre-styled { |
| display: block; |
| padding: 9.5px; |
| margin: 0 0 10px; |
| font-size: 11px; |
| line-height: 14px; |
| font-family: monospace; |
| word-break: break-all; |
| word-wrap: break-word; |
| white-space: pre; |
| white-space: pre-wrap; |
| background-color: #f5f5f5; |
| border: 1px solid #ccc; |
| border: 1px solid rgba(0, 0, 0, 0.15); |
| -webkit-border-radius: 4px; |
| -moz-border-radius: 4px; |
| border-radius: 4px; |
| } |
| |
| .tabs-left, .tabs-right { |
| border-bottom: none; |
| padding-top: 2px; |
| } |
| .tabs-left { |
| border-right: 1px solid #ddd; |
| } |
| .tabs-right { |
| border-left: 1px solid #ddd; |
| } |
| .tabs-left>li, .tabs-right>li { |
| float: none; |
| margin-bottom: 2px; |
| } |
| .tabs-left>li { |
| margin-right: -1px; |
| } |
| .tabs-right>li { |
| margin-left: -1px; |
| } |
| .tabs-left>li>a:hover, |
| .tabs-left>li>a:focus { |
| border-bottom-color: transparent; |
| } |
| .tabs-left>li.active>a, |
| .tabs-left>li.active>a:hover, |
| .tabs-left>li.active>a:focus { |
| border-bottom-color: #ddd; |
| border-right-color: transparent; |
| } |
| |
| .tabs-right>li.active>a, |
| .tabs-right>li.active>a:hover, |
| .tabs-right>li.active>a:focus { |
| border-bottom: 1px solid #ddd; |
| border-left-color: transparent; |
| } |
| .tabs-left>li>a { |
| border-radius: 4px 0 0 4px; |
| margin-right: 0; |
| display:block; |
| } |
| .tabs-right>li>a { |
| border-radius: 0 4px 4px 0; |
| margin-right: 0; |
| } |
| |
| .btn-primary[disabled] { |
| .icon-spinner { |
| color: white; |
| } |
| } |