diff --git a/.gitignore b/.gitignore index 7b1874991c8..9ce1ff013ac 100644 --- a/.gitignore +++ b/.gitignore @@ -53,6 +53,8 @@ tools/cli/build/ *.iso *.tar.gz *.tgz +*.vscode +*.css.map # this ignores _all files starting with '.'. Don't do that! #.* @@ -99,3 +101,4 @@ scripts/.pydevproject *.qcow2 *.raw venv +node_modules diff --git a/pom.xml b/pom.xml index 24ab865d1b5..53386917f15 100644 --- a/pom.xml +++ b/pom.xml @@ -968,8 +968,7 @@ tools/ngui/static/bootstrap/* tools/ngui/static/js/lib/* tools/transifex/.tx/config - ui/css/token-input-facebook.css - ui/css/src/scss/token-input-facebook.scss + ui/css/src/scss/components/token-input-facebook.scss ui/l10n/* ui/lib/flot/jquery.colorhelpers.js ui/lib/flot/jquery.flot.crosshair.js diff --git a/ui/css/cloudstack3-ie7.css b/ui/css/cloudstack3-ie7.css deleted file mode 100644 index 6c0664e8cd7..00000000000 --- a/ui/css/cloudstack3-ie7.css +++ /dev/null @@ -1,201 +0,0 @@ -/* -* 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. -*/ -/*[fmt]1C20-1C0D-E*/ -div.panel div.list-view { - position: relative; - overflow-x: hidden; - margin-top: 0px; -} - -div.toolbar { - top: expression(this.offsetParent.scrollTop); -} - -div.toolbar div.text-search div.search-bar input { - float: left; - border: none; - margin-top: -1px; - margin-right: 0px; - margin-bottom: 0px; - margin-left: -12px; - width: 97%; - height: 67%; -} - -div.panel div.list-view div.fixed-header { - top: expression(this.offsetParent.scrollTop + 30); -} - -.detail-view div.list-view div.fixed-header { - top: 29px !important; - left: 12px !important; -} - -div.panel div.list-view div.data-table table.body { - top: 78px; -} - -.detail-view .main-groups { - width: 96%; - height: 416px; - position: relative; - overflow-x: hidden; - margin-top: -18px; -} - -.detail-view .ui-widget-content { - overflow-x: hidden !important; -} - -.tree-view { - position: relative; - top: expression(this.offsetParent.scrollTop); -} - -.tree-view li .name { - margin: 0px !important; -} - -.detail-view .button.done { - /*+placement:shift 0px 459px;*/ - position: relative; - left: 0px; - top: 459px; -} - -.detail-view ul { - /*+placement:shift;*/ - position: relative; - left: 0; - top: 0; -} - -.ui-tabs ul.ui-tabs-nav { - margin-top: 20px; -} - -.dashboard.admin .dashboard-container.sub.alerts ul { - top: expression(this.offsetParent.scrollTop); -} - -#user-options a:hover { - background: #ADADAD; - color: #FFFFFF; - /*+text-shadow:0px 1px 2px #383838;*/ - -moz-text-shadow: 0px 1px 2px #383838; - -webkit-text-shadow: 0px 1px 2px #383838; - -o-text-shadow: 0px 1px 2px #383838; - text-shadow: 0px 1px 2px #383838; -} - -.multi-wizard .progress ul li span.arrow { - display: none; - border-right: 0px solid #000000; -} - -.tree-view ul li .name { - float: right; -} - -.multi-edit .data .data-body .data-item .expandable-listing { - width: 99.8%; - border: 1px solid #CFC9C9; - max-height: 161px; - position: relative; - overflow: auto; - overflow-x: hidden; - top: expression(this.offsetParent.scrollTop); -} - -table tbody td, -table th { - padding: 9px 5px 8px 0px; - border-right: 1px solid #BFBFBF; - color: #495A76; - clear: none; - width: auto; - width: 88px; - min-width: 88px; - font-size: 11px; - overflow: hidden; - vertical-align: middle; -} - -.detail-view > .toolbar { - position: relative; - float: left; - left: -14px; -} - -.detail-view .list-view > .toolbar { - width: 100% !important; -} - -.system-chart ul.resources li .label { - /*+placement:shift 3px 9px;*/ - position: relative; - left: 3px; - top: 9px; - position: absolute; -} - -.system-chart ul.resources li .button.view-all .view-all-label { - /*+placement:shift 6px 5px;*/ - position: relative; - left: 6px; - top: 5px; -} - -.quick-view-tooltip div.title .icon { - top: -15px; -} - -.quick-view-tooltip .main-groups { - float: left; - left: 0px; - margin-top: 7px; -} - -.quick-view-tooltip .actions { - width: 426px !important; - float: left; -} - -.quick-view-tooltip .action { - float: left !important; - width: 54px !important; - margin-left: 7px !important; -} - -.quick-view-tooltip .action .label { - float: left; - max-width: 20px; -} - -.quick-view-tooltip .action .icon { - float: left; - height: 7px; - left: 0px; -} - -.quick-view-tooltip .detail-view .detail-group.actions .action.text { - filter: alpha(opacity=100); -} - -/*# sourceMappingURL=src/sourcemaps/cloudstack3-ie7.css.map */ diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index d7b6159d2bf..3794ca19f12 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -17,117 +17,53 @@ * specific language governing permissions and limitations * under the License. */ -div.toolbar:after, -.multi-wizard.zone-wizard .select-container .field .select-array-item:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; - font-size: 0; -} - -div.toolbar, -.multi-wizard.zone-wizard .select-container .field .select-array-item { - display: inline-block; -} - -div.toolbar, -.multi-wizard.zone-wizard .select-container .field .select-array-item { - display: block; - height: 1px; -} - body { min-width: 1224px; + background: #ede8e8; font-family: sans-serif; overflow: auto; - background: #EDE8E8; } -body.install-wizard { - font-family: sans-serif; - height: 769px !important; - overflow: auto; - overflow-x: hidden; - background: #FFFFFF url(../images/bg-login.png); -} - -#main-area { - width: 1224px; - height: 729px; - margin: auto; - border: 1px solid #D4D4D4; - /*+box-shadow:0px -5px 11px #B7B7B7;*/ - -moz-box-shadow: 0px -5px 11px #B7B7B7; - -webkit-box-shadow: 0px -5px 11px #B7B7B7; - -o-box-shadow: 0px -5px 11px #B7B7B7; - box-shadow: 0px -5px 11px #B7B7B7; - border: 1px solid #E8E8E8; -} - -#container { - /*[empty]width:;*/ - height: 100%; - margin: auto; - position: relative; -} - -#sections { - display: none; -} - -a { - color: #0B84DC; - text-decoration: none; -} - -a:hover { - text-decoration: underline; - color: #000000; -} - -/*Table*/ table { + position: relative; width: 955px; max-width: 977px; margin: 15px 15px 12px 12px; + border-bottom: 1px solid #c4c5c5; font-size: 13px; text-align: left; text-indent: 10px; - border-bottom: 1px solid #C4C5C5; border-collapse: collapse; - position: relative; } table thead { - background: url(../images/bg-table-head.png) repeat-x; + background: url("../images/bg-table-head.png") repeat-x; cursor: default; } table thead th { - border: 1px solid #C6C3C3; - color: #525252; - border-top: none; - border-bottom: 1px solid #CFC9C9; - text-align: left; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; + border: 1px solid #c6c3c3; + border-top: 0; + border-bottom: 1px solid #cfc9c9; font-weight: bold; white-space: nowrap; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + color: #525252; + text-align: left; + text-shadow: 0 1px 1px #ffffff; cursor: pointer; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; } table thead th.sorted { - color: #312F2F; + color: #312f2f; /*+text-shadow:0px 1px 1px #BFBFBF;*/ - -moz-text-shadow: 0px 1px 1px #BFBFBF; - -webkit-text-shadow: 0px 1px 1px #BFBFBF; - -o-text-shadow: 0px 1px 1px #BFBFBF; - text-shadow: 0px 1px 1px #BFBFBF; + text-shadow: 0 1px 1px #bfbfbf; + -moz-text-shadow: 0 1px 1px #bfbfbf; + -webkit-text-shadow: 0 1px 1px #bfbfbf; + -o-text-shadow: 0 1px 1px #bfbfbf; } table thead th.sorted.desc { @@ -140,31 +76,31 @@ table thead th.sorted.asc { table tbody td, table th { - padding: 10px 5px 6px; - border-right: 1px solid #BFBFBF; - color: #282828; clear: none; - min-width: 88px; - font-size: 11px; - overflow: hidden; vertical-align: middle; + min-width: 88px; + padding: 10px 5px 6px; + border-right: 1px solid #bfbfbf; + font-size: 11px; + color: #282828; + overflow: hidden; } table tbody td.loading { + border-top: 1px solid #fbfbfb; + background: #dbe2e9; text-align: center; - background: #DBE2E9; - border-top: 1px solid #FBFBFB; } table tbody td.truncated { - overflow: visible; max-width: 120px; + overflow: visible; } table tbody td.truncated > span { white-space: nowrap; - overflow: hidden; text-overflow: ellipsis; + overflow: hidden; } .list-view-select table th.name, @@ -174,6 +110,11 @@ table tbody td.truncated > span { max-width: 170px; } +.list-view-select table th.availableHostSuitability, +.list-view-select table td.availableHostSuitability { + max-width: 250px; +} + /** Multiselect*/ table thead th.multiselect, table tbody td.multiselect { @@ -184,11 +125,11 @@ table tbody td.multiselect { table thead th.multiselect input, table tbody td.multiselect input { - margin: 0; - /*+placement:shift -8px 0px;*/ position: relative; + /*+placement:shift -8px 0px;*/ + top: 0; left: -8px; - top: 0px; + margin: 0; } table thead th.multiselect input { @@ -197,18 +138,18 @@ table thead th.multiselect input { /** Actions table cell*/ table tbody td.actions { - width: 130px; - max-width: 130px !important; - min-width: 130px !important; vertical-align: middle; + width: 130px; + min-width: 130px !important; + max-width: 130px !important; } table tbody td.actions input { /*+placement:shift 10px -6px;*/ position: relative; - left: 10px; top: -6px; - margin: 11px 0 0px; + left: 10px; + margin: 11px 0 0; } .list-view-select table tbody td.actions { @@ -231,20 +172,20 @@ table tbody td.actions input { /** Quick view table cell*/ table tbody td.quick-view, table thead th.quick-view { + width: 58px !important; min-width: 58px; max-width: 58px !important; - width: 58px !important; height: 14px !important; - text-indent: 2px; white-space: nowrap; + text-indent: 2px; cursor: default; } table tbody td.quick-view .icon { - margin-left: 22px; margin-top: 3px; - padding: 0px 0px 6px 12px; - background: url(../images/sprites.png) no-repeat -44px -62px; + margin-left: 22px; + padding: 0 0 6px 12px; + background: url("../images/sprites.png") no-repeat -44px -62px; } table tbody td.quick-view:hover .icon { @@ -265,57 +206,57 @@ table tbody tr.loading td.quick-view .loading { /** Row styling*/ table tbody tr { - border-left: 1px solid #C4C5C5; - border-right: 1px solid #C4C5C5; border-top: 1px solid transparent; + border-right: 1px solid #c4c5c5; + border-left: 1px solid #c4c5c5; } table tbody tr.even { - background: #FFFFFF; + background: #ffffff; } table tbody tr.odd { - background: #F2F0F0; + background: #f2f0f0; } table tbody tr.selected { - background: #CBDDF3; - border-top: 1px solid #EDF0F7 !important; - border-bottom: 1px solid #BABFD9; - text-shadow: 0px 1px 1px #FCFBF7; + border-top: 1px solid #edf0f7 !important; + border-bottom: 1px solid #babfd9; + background: #cbddf3; + text-shadow: 0 1px 1px #fcfbf7; } table tbody tr.to-remove { - background: #E05959; - border-top: 1px solid #EDF0F7 !important; - border-bottom: 1px solid #BABFD9; - text-shadow: 0px 1px 1px #FCFBF7; + border-top: 1px solid #edf0f7 !important; + border-bottom: 1px solid #babfd9; + background: #e05959; + text-shadow: 0 1px 1px #fcfbf7; } table tbody tr.loading { - background: #E2E9F0; + background: #e2e9f0; } table tbody tr.loading td { /*+opacity:50%;*/ + opacity: 0.5; filter: alpha(opacity=50); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); -moz-opacity: 0.5; - opacity: 0.5; } table tbody tr.loading td.loading.icon { - background: url(../images/ajax-loader.gif) no-repeat center; height: 35px; padding: 0; + background: url("../images/ajax-loader.gif") no-repeat center; } table tbody tr div.loading { display: block; width: 50px; height: 14px; - background: transparent url(../images/ajax-loader-small.gif) no-repeat center; margin: auto; + background: transparent url("../images/ajax-loader-small.gif") no-repeat center; } table th.resizable { @@ -325,1111 +266,39 @@ table th.resizable { table th div.ui-resizable-handle { position: relative; + float: right; top: -30px; - float: right; -} - -/** Header, misc*/ -#template { - display: none; -} - -/*Login screen*/ -body.login { - background: url(../images/overlay-pattern.png) repeat center, #106CA9 url(../images/bg-login.jpg) no-repeat center; - background-size: auto, cover; - overflow: hidden; -} - -.login { - display: block; - width: 100%; - height: 350px; - /*+placement:shift 0 80px;*/ - position: relative; - left: 0; - top: 80px; - background: #053663; -} - -.login .select-language { - margin-top: 10px; - float: left; -} - -.login .select-language select { - width: 260px; - border: 1px solid #808080; - margin-top: 20px; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - font-size: 12px; - /*+box-shadow:inset 0px 1px 1px #838383;*/ - -moz-box-shadow: inset 0px 1px 1px #838383; - -webkit-box-shadow: inset 0px 1px 1px #838383; - -o-box-shadow: inset 0px 1px 1px #838383; - box-shadow: inset 0px 1px 1px #838383; -} - -.login .fields { - width: 409px; - float: left; - margin: 72px 0 0 88px; -} - -.login .fields .field { - position: relative; -} - -.login .fields .field label { - font-size: 12px; - color: #4E4F53; - /*+placement:displace 9px 14px;*/ - position: absolute; - margin-left: 9px; - margin-top: 14px; -} - -.login .fields .field label.error { - color: #FF0000; - float: right; - left: 264px; - top: 0; -} - -.login .fields input { - width: 248px; - height: 20px; - margin: 5px 0 0; - text-indent: 1px; - font-size: 13px; - border: none; - padding: 5px; - /*+border-radius:3px;*/ - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; - /*+box-shadow:inset 0px 1px 1px #4E4E4E;*/ - -moz-box-shadow: inset 0px 1px 1px #4E4E4E; - -webkit-box-shadow: inset 0px 1px 1px #4E4E4E; - -o-box-shadow: inset 0px 1px 1px #4E4E4E; - box-shadow: inset 0px 1px 1px #4E4E4E; - background: #ECECEC; -} - -.login .fields input.error { - border-color: #FF8080; - background: #FFEAEA; -} - -.login .fields input[type=submit] { - background: transparent url(../images/sprites.png) -563px -747px; - cursor: pointer; - border: none; - margin: 7px 120px 0 -1px; - text-align: center; - width: 69px; - height: 25px; - display: block; - color: #FFFFFF; - font-weight: bold; - float: left; - text-indent: -1px; - /*+text-shadow:0px 1px 2px #000000;*/ - -moz-text-shadow: 0px 1px 2px #000000; - -webkit-text-shadow: 0px 1px 2px #000000; - -o-text-shadow: 0px 1px 2px #000000; - text-shadow: 0px 1px 2px #000000; -} - -.login .fields input[type=samlsubmit] { - background: transparent url(../images/sprites.png) -563px -747px; - cursor: pointer; - border: none; - text-align: center; - width: 60px; - height: 15px; - display: block; - color: #FFFFFF; - font-weight: bold; - text-indent: -1px; - /*+text-shadow:0px 1px 2px #000000;*/ - -moz-text-shadow: 0px 1px 2px #000000; - -webkit-text-shadow: 0px 1px 2px #000000; - -o-text-shadow: 0px 1px 2px #000000; - text-shadow: 0px 1px 2px #000000; - font-size: 10px; -} - -.login .fields input[type=submit]:hover { - background-position: -563px -772px; -} - -.login .logo { - width: 290px; - height: 40px; - float: left; - margin: 72px 0 0 209px; - background: url(../images/logo-login.png) no-repeat 0 0; -} - -.login.nologo .logo { - background-image: url(../images/logo-login-oss.png); -} - -.login form { - display: block; - width: 1000px; - height: 100%; - margin: auto; - background: #053663; -} - -/*About dialog*/ -.dialog-about .ui-widget-content { - padding-left: 0; - padding-right: 0; - width: 100% !important; -} - -.dialog-about .logo { - font-size: 26px; - color: #636363; - padding-top: 20px; -} - -.dialog-about .version { - font-size: 12px; - padding-top: 10px; -} - -.dialog-about .ui-button { - float: none; - margin: 0 auto; -} - -#browser div.panel div.detail-view .toolbar { - width: 100%; } div.list-view table tbody td span { display: block; float: left; max-width: 89%; + margin-left: 12px; + line-height: 15px; word-break: break-all; word-wrap: break-word; text-indent: 0; - margin-left: 12px; - line-height: 15px; } -div.list-view div.toolbar div.section-switcher div.section-select label { - margin: 0 9px 0 0; +td.alert-notification-threshold { + background-color: rgba(255, 231, 175, 0.75); + color: #e87900; } -.loading-overlay { - position: absolute; - width: 100%; - height: 100%; - left: 0px; - top: 0px; - background: #F2F2F2 url(../images/ajax-loader.gif) no-repeat center; - z-index: 500; - /*+opacity:70%;*/ - filter: alpha(opacity=70); - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); - -moz-opacity: 0.7; - opacity: 0.7; +td.alert-disable-threshold { + background-color: rgba(255, 190, 190, 0.75); + color: #f50000; } -.loading-overlay span { - display: block; - text-align: center; - margin: 155px 0 0 5px; - color: #4B4B4B; +span.compact { + height: 16px; } -.detail-view .ui-tabs-panel .loading-overlay { - background-position: 50% 250px; -} - -/*Install wizard*/ -.install-wizard { - width: 1024px; - height: 768px; - margin: auto; - border-top: none; - position: relative; -} - -.install-wizard .header { - text-align: center; - background: url(../images/bg-login.png); - color: #626E82; - height: 365px; - padding: 32px 0 89px; - /*+text-shadow:0px 1px 2px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 2px #FFFFFF; - -webkit-text-shadow: 0px 1px 2px #FFFFFF; - -o-text-shadow: 0px 1px 2px #FFFFFF; - text-shadow: 0px 1px 2px #FFFFFF; - z-index: 9; -} - -.install-wizard .header h3 { - font-size: 20px; -} - -.install-wizard .step { - max-width: 691px; - margin: auto; - padding: 56px 0 0; -} - -.install-wizard .step .title { - width: 303px; - margin: auto auto 30px; - font-size: 22px; - clear: both; - color: #626E82; -} - -.install-wizard .step .subtitle { - color: #4B5E69; - font-weight: bold; - font-size: 12px; -} - -.install-wizard .step p { - color: #4A4A4A; - font-size: 15px; - line-height: 23px; - background: url(../images/bg-gradient-white-transparent.png) repeat-x -114px -270px; -} - -.install-wizard .step ul li { - margin: 14px 0 0 18px; - width: 465px; - font-size: 13px; - list-style: disc; -} - -.install-wizard .step .field { - text-align: left; - margin: 0 0 12px; -} - -.install-wizard .step .field label { - display: block; - clear: both; - font-size: 11px; - color: #4D4D4D; -} - -.install-wizard .step .field label.error { - color: #FF2424; - font-size: 11px; -} - -.install-wizard .body { - width: 1012px; - height: 762px; - margin: -352px auto auto; - z-index: 10; - background: url(../images/bg-gradient-white-transparent.png) repeat-x -114px -141px; - /*+box-shadow:0px -3px 4px #CFCFCF;*/ - -moz-box-shadow: 0px -3px 4px #CFCFCF; - -webkit-box-shadow: 0px -3px 4px #CFCFCF; - -o-box-shadow: 0px -3px 4px #CFCFCF; - box-shadow: 0px -3px 4px #CFCFCF; -} - -.install-wizard h2 { - font-size: 28px; - margin: 0 0 19px; -} - -.install-wizard input[type=text], -.install-wizard input[type=password], -.install-wizard input[type=text], -.install-wizard select { - width: 288px; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - border: 1px solid #CDCDCD; - /*+box-shadow:inset 0px 1px #AEAEAE;*/ - -moz-box-shadow: inset 0px 1px #AEAEAE; - -webkit-box-shadow: inset 0px 1px #AEAEAE; - -o-box-shadow: inset 0px 1px #AEAEAE; - box-shadow: inset 0px 1px #AEAEAE; - -moz-box-shadow: inset 0px 1px 0px #AEAEAE; - -webkit-box-shadow: inset 0px 1px 0px #AEAEAE; - -o-box-shadow: inset 0px 1px 0px #AEAEAE; - font-size: 14px; - color: #232323; - padding: 6px; - background: #F7F7F7; -} - -.install-wizard .button { - background: url(../images/bg-gradients.png) 0px -221px; - padding: 7px 16px 7px 18px; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - border: 1px solid #505050; - color: #FFFFFF; - font-size: 12px; - font-weight: bold; - /*+text-shadow:0px -1px 3px #3F4351;*/ - -moz-text-shadow: 0px -1px 3px #3F4351; - -webkit-text-shadow: 0px -1px 3px #3F4351; - -o-text-shadow: 0px -1px 3px #3F4351; - text-shadow: 0px -1px 3px #3F4351; - float: right; - cursor: pointer; - margin-top: 15px; -} - -.install-wizard .button.advanced-installation, -.install-wizard .button.go-back { - background: #E0DEDE; - color: #3B3B3B; - border: 1px solid #C7C2C2; - /*+text-shadow:0px 0px #FFFFFF;*/ - -moz-text-shadow: 0px 0px #FFFFFF; - -webkit-text-shadow: 0px 0px #FFFFFF; - -o-text-shadow: 0px 0px #FFFFFF; - text-shadow: 0px 0px #FFFFFF; - float: left; -} - -.install-wizard .button.go-back { - padding: 9px 16px 10px 18px; - font-size: 12px; -} - -.install-wizard .setup-form .button.go-back { - /*+placement:shift 15px -14px;*/ - position: relative; - left: 15px; - top: -14px; -} - -.install-wizard .step { - z-index: 11; - position: relative; -} - -.install-wizard .step .tooltip-info { - /*+placement:shift 547px 50px;*/ - position: relative; - left: 547px; - top: 50px; - position: absolute; -} - -/*** Intro*/ -.install-wizard .step.intro.what-is-cloudstack p { - background: url(../images/bg-what-is-cloudstack.png) no-repeat 50% 237px; - height: 540px; -} - -/*** Diagram*/ -.install-wizard .diagram { - width: 910px; - height: 385px; - /*+placement:shift 65px 496px;*/ - position: relative; - left: 65px; - top: 496px; - position: absolute; - z-index: 10; -} - -.install-wizard .diagram .part { - background: url(../images/install-wizard-parts.png) no-repeat; - display: none; -} - -.install-wizard .diagram .part.zone { - width: 742px; - height: 135px; - background-position: -267px -580px; - /*+placement:shift 77px 222px;*/ - position: relative; - left: 77px; - top: 222px; - position: absolute; -} - -.install-wizard .diagram .part.loading { - width: 742px; - height: 432px; - background-position: -1264px -487px; - /*+placement:shift 105px -67px;*/ - position: relative; - left: 105px; - top: -67px; - position: absolute; -} - -.install-wizard .diagram .part.loading .icon { - width: 61px; - height: 76px; - background: url(../images/ajax-loader.gif) no-repeat; - /*+placement:shift 322px 130px;*/ - position: relative; - left: 322px; - top: 130px; -} - -.install-wizard .diagram .part.pod { - width: 266px; - height: 396px; - background-position: -47px -3px; - /*+placement:shift 313px -76px;*/ - position: relative; - left: 313px; - top: -76px; - position: absolute; -} - -.install-wizard .diagram .part.cluster { - width: 266px; - height: 396px; - background-position: -364px 1px; - /*+placement:shift 313px -76px;*/ - position: relative; - left: 313px; - top: -76px; - position: absolute; -} - -.install-wizard .diagram .part.host { - width: 266px; - height: 396px; - background-position: -688px 1px; - /*+placement:shift 313px -76px;*/ - position: relative; - left: 313px; - top: -76px; - position: absolute; -} - -.install-wizard .diagram .part.primaryStorage { - width: 275px; - height: 396px; - background-position: -1046px 1px; - /*+placement:shift 306px -76px;*/ - position: relative; - left: 306px; - top: -76px; - position: absolute; -} - -.install-wizard .diagram .part.secondaryStorage { - width: 385px; - height: 396px; - background-position: -1469px 1px; - /*+placement:shift 306px -76px;*/ - position: relative; - left: 306px; - top: -76px; - position: absolute; -} - -/*** Setup form*/ -.install-wizard .step .setup-form { - display: inline-block; - background: url(../images/bg-transparent-white.png); - width: 469px; - border: 1px solid #DFDFDF; - /*+text-shadow:0px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px #FFFFFF; - -o-text-shadow: 0px 1px #FFFFFF; - text-shadow: 0px 1px #FFFFFF; - -moz-text-shadow: 0px 1px 0px #FFFFFF; - -webkit-text-shadow: 0px 1px 0px #FFFFFF; - -o-text-shadow: 0px 1px 0px #FFFFFF; - /*+box-shadow:0px 5px 9px #9F9F9F;*/ - -moz-box-shadow: 0px 5px 9px #9F9F9F; - -webkit-box-shadow: 0px 5px 9px #9F9F9F; - -o-box-shadow: 0px 5px 9px #9F9F9F; - box-shadow: 0px 5px 9px #9F9F9F; -} - -.install-wizard .step .setup-form .title { - float: left; - margin: 17px 0 0 29px; - color: #626F7C; -} - -.install-wizard .step .setup-form .field { - width: 389px; - display: inline-block; - margin: 6px 0 1px 31px; - padding: 9px; - color: #57646D; -} - -.install-wizard .step .setup-form .field .name { - width: 98px; - text-align: right; - float: left; - font-size: 13px; - padding: 10px 0 0 0px; -} - -.install-wizard .step .setup-form .field .value { - float: right; -} - -.install-wizard .step .setup-form input[type=text], -.install-wizard .step .setup-form input[type=password] { - width: 278px; - border: 1px solid #8D8D8D; - padding: 2px 2px 1px; - margin: 6px 4px 0 0; -} - -.install-wizard .step .setup-form .range-item { - width: 142px; - float: left; -} - -.install-wizard .step .setup-form .range-item input { - width: 131px; -} - -.install-wizard .step .setup-form .multi-range input[type=text] { - width: 128px; -} - -.install-wizard .step .setup-form input.button { - margin: 0 30px 14px 15px; -} - -/*** Step: Change user*/ -.install-wizard .step.change-user { - text-align: center; - padding-top: 95px; - width: 316px; - margin: auto; -} - -.install-wizard .step.intro iframe { - width: 99%; - height: 99%; - margin: 4px; -} - -.install-wizard .step.intro .title { - color: #565454; - margin-left: 0; - margin-bottom: 21px; - font-size: 25px; -} - -.install-wizard .step.intro .subtitle { - margin-bottom: 9px; -} - -.install-wizard .step.intro .subtitle li { - background: url(../images/ajax-loader-small.gif) no-repeat 3px 0px; - position: relative; - width: 45%; - padding: 1px 0 1px 30px; - height: 24px; - list-style: none; -} - -.install-wizard .step.intro .subtitle li.complete { - background: url(../images/icons.png) -1px -224px; -} - -.install-wizard .step.intro .subtitle li.error { - background: url(../images/icons.png) -1px -190px; -} - -.install-wizard .step.intro .subtitle li img { - float: right; -} - -/*Notifications*/ -div.notification-box { - width: 323px; - height: 354px; - background: url(../images/bg-notifications.png) no-repeat 0px 0px; -} - -div.notification-box h3 { - color: #FFFFFF; - /*+placement:shift 0px 35px;*/ - position: relative; - left: 0px; - top: 35px; - text-align: center; - font-size: 21px; - letter-spacing: 1px; - /*+text-shadow:0px 1px 2px #000000;*/ - -moz-text-shadow: 0px 1px 2px #000000; - -webkit-text-shadow: 0px 1px 2px #000000; - -o-text-shadow: 0px 1px 2px #000000; - text-shadow: 0px 1px 2px #000000; -} - -div.notification-box .container { - background: #FFFFFF; - width: 296px; - height: 241px; - margin: auto; - /*+placement:shift 3px 46px;*/ - position: relative; - left: 3px; - top: 46px; - /*+box-shadow:inset 0px 3px 7px #656565;*/ - -moz-box-shadow: inset 0px 3px 7px #656565; - -webkit-box-shadow: inset 0px 3px 7px #656565; - -o-box-shadow: inset 0px 3px 7px #656565; - box-shadow: inset 0px 3px 7px #656565; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - border: 1px solid #8198AE; -} - -div.notification-box .container ul { - margin-top: 8px; - height: 229px; - overflow: auto; - overflow-x: hidden; - width: 294px; -} - -div.notification-box .container ul li { - width: 100%; - height: 41px; - border-bottom: 1px solid #CECECE; - overflow-x: hidden; - text-indent: 0; - font-size: 12px; - color: #4D5E6E; - background: url(../images/icons.png) no-repeat 10px -213px; - cursor: pointer; -} - -div.notification-box .container ul li.error { - height: 53px; - background: url(../images/icons.png) no-repeat 10px -171px; -} - -div.notification-box .container ul li.error .subtitle { - display: block; - width: 213px; - height: 10px; - overflow: hidden; - white-space: nowrap; - float: left; - text-overflow: ellipsis; - color: #808080; - text-indent: 0; - padding: 0; - margin: 0; - /*+placement:shift 48px 17px;*/ - position: relative; - left: 48px; - top: 17px; -} - -div.notification-box .container ul li span { - float: left; - /*+placement:shift 48px 15px;*/ - position: relative; - left: 48px; - top: 15px; - max-width: 202px; - font-size: 14px; - font-weight: 100; - overflow: hidden; -} - -div.notification-box .container ul li span:hover { - color: #5FAAF7; - text-decoration: underline; -} - -div.notification-box .container ul div.remove { - width: 17px; - height: 21px; - background: url(../images/buttons.png) no-repeat -623px -8px; - float: right; - margin: -4px 8px 0px 0px; - cursor: pointer; - /*+placement:shift 0px 16px;*/ - position: relative; - left: 0px; - top: 16px; -} - -div.notification-box .container ul div.remove:hover { - background-position: -606px -8px; -} - -div.notification-box .container ul li.pending { - color: #7E96AC; - background: url(../images/ajax-loader.gif) no-repeat 8px 6px; -} - -div.notification-box .container ul li.first { - border-top: none; -} - -div.notification-box .button { - float: left; - background: url(../images/buttons.png) no-repeat; - cursor: pointer; - /*+placement:shift 0px 51px;*/ - position: relative; - left: 0px; - top: 51px; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - border-bottom: 1px solid #2B2B2B; - /*+box-shadow:0px 0px 2px #272727;*/ - -moz-box-shadow: 0px 0px 2px #272727; - -webkit-box-shadow: 0px 0px 2px #272727; - -o-box-shadow: 0px 0px 2px #272727; - box-shadow: 0px 0px 2px #272727; - padding: 5px 10px 6px; -} - -div.notification-box .button span { - color: #FFFFFF; - font-size: 11px; - font-weight: bold; - letter-spacing: 1px; - /*+text-shadow:0px -1px 2px #171717;*/ - -moz-text-shadow: 0px -1px 2px #171717; - -webkit-text-shadow: 0px -1px 2px #171717; - -o-text-shadow: 0px -1px 2px #171717; - text-shadow: 0px -1px 2px #171717; -} - -div.notification-box .button.clear-list { - background: url(../images/gradients.png) 0px -10px; - margin-left: 16px; -} - -div.notification-box .button.clear-list:hover { - background-position: 0px -51px; -} - -div.notification-box .button.close { - background: url(../images/gradients.png) 0px -317px; - float: right; - margin-right: 10px; - border-bottom: 1px solid #232323; -} - -div.notification-box .button.close:hover { - background-position: -4px -368px; -} - -/*** Corner alert*/ -div.notification.corner-alert { - background: #FFFFFF; - background: rgba(255, 255, 255, 0.95); - /*+box-shadow:0px 2px 10px #000000;*/ - -moz-box-shadow: 0px 2px 10px #000000; - -webkit-box-shadow: 0px 2px 10px #000000; - -o-box-shadow: 0px 2px 10px #000000; - box-shadow: 0px 2px 10px #000000; - width: 300px; - height: 75px; - /*+border-radius:3px;*/ - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; - position: absolute; - text-indent: 10px; - padding: 7px 7px 0; - font-size: 12px; - /*+opacity:70%;*/ - filter: alpha(opacity=70); - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); - -moz-opacity: 0.7; - opacity: 0.7; - z-index: 100; - margin: 38px 0 0 -56px; -} - -div.notification.corner-alert .top-arrow { - background: url(../images/sprites.png) no-repeat -580px -1353px; - width: 36px; - height: 15px; - position: absolute; - top: -15px; - left: 50px; -} - -div.notification.corner-alert div.title { - width: 100%; - height: 33px; - color: #FFFFFF; -} - -div.notification.corner-alert div.title span { - /*+placement:shift 0px 10px;*/ - position: relative; - left: 0px; - top: 10px; - color: #6D6D6D; - padding: 3px 0 12px 24px; - font-weight: 100; - font-size: 14px; - padding-left: 33px; - background: url(../images/icons.png) no-repeat 3px -223px; -} - -div.notification.corner-alert.error div.title span { - background: url(../images/icons.png) no-repeat -2px -190px; -} - -div.notification.corner-alert div.message span { - position: relative; - padding-top: 6px; - font-size: 14px; - display: block; - color: #000000; - /*+placement:shift 17px -2px;*/ - position: relative; - left: 17px; - top: -2px; -} - -/*Tooltips*/ -.tooltip-info { - width: 239px; - min-height: 83px; - display: inline-block; - background: #FFFFFF; - border: 1px solid #BEB8B8; - position: absolute; - z-index: 1000; - /*+border-radius:22px;*/ - -moz-border-radius: 22px; - -webkit-border-radius: 22px; - -khtml-border-radius: 22px; - border-radius: 22px; - border-radius: 22px 22px 22px 22px; -} - -.tooltip-info .arrow { - width: 27px; - height: 47px; - position: absolute; - top: 17px; - left: -18px; - background: url(../images/sprites.png) -583px -939px; -} - -.tooltip-info .title { - color: #485766; - margin: 12px; - font-size: 19px; -} - -.tooltip-info .content { - width: 182px; - font-size: 11px; - line-height: 19px; - padding-bottom: 13px; - overflow: auto; - overflow-x: hidden; - margin: auto; -} - -/*List view*/ -div.panel div.list-view { - overflow: auto; - overflow-x: hidden; - height: 632px; - margin-top: 30px; -} - -.detail-view div.list-view { - width: 930px; - border: 1px solid #DAD4D4; - margin: 41px auto auto !important; - height: 536px !important; - background: #F7F7F7; -} - -div.panel div.list-view div.data-table table { - width: 955px; -} - -.detail-view div.list-view div.data-table table { - width: 903px !important; -} - -.detail-view div.list-view div.data-table table td { - border-left: 1px solid #CACACA; -} - -div.panel div.list-view div.fixed-header { - position: absolute; - top: 29px; - left: 12px; - width: 960px; - height: 47px; - display: table; - background-color: #F7F7F7; - margin: 0; - z-index: 1; -} - -.detail-view div.list-view div.fixed-header { - width: 903px !important; - top: 49px !important; - left: 29px !important; - background: #FFFFFF; -} - -.detail-view div#details-tab-zones div.fixed-header { - left: 25px !important; -} - -.detail-view div.list-view div.fixed-header table { - width: 100% !important; -} - -.project-view div.panel div.list-view div.fixed-header { - background: #6D747D; -} - -div.panel div.list-view div.fixed-header table { - margin: 0; - /*+placement:shift 0px 18px;*/ - position: relative; - left: 0px; - top: 18px; - width: 955px; - /*+box-shadow:0px 4px 10px #DFE1E3;*/ - -moz-box-shadow: 0px 4px 10px #DFE1E3; - -webkit-box-shadow: 0px 4px 10px #DFE1E3; - -o-box-shadow: 0px 4px 10px #DFE1E3; - box-shadow: 0px 4px 10px #DFE1E3; -} - -.project-view div.panel div.list-view div.fixed-header table { - /*+box-shadow:0px 2px 2px #CACDD1;*/ - -moz-box-shadow: 0px 2px 2px #CACDD1; - -webkit-box-shadow: 0px 2px 2px #CACDD1; - -o-box-shadow: 0px 2px 2px #CACDD1; - box-shadow: 0px 2px 2px #CACDD1; -} - -div.list-view td.state { - width: 120px; - min-width: 120px; - max-width: 120px; -} - -div.list-view td.first { - cursor: pointer; -} - -div.list-view tr:not(.multi-edit-selected) td.first:hover { - color: #3A82CD; -} - -div.list-view td.state span { - padding: 1px 0 0 18px; - text-align: center; - width: 80px; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - background: url(../images/sprites.png) 1px -526px; -} - -div.list-view td.state.on span { - background-image: url(../images/sprites.png); - background-repeat: no-repeat; - color: #008000; - background-position: 1px -460px; -} - -div.list-view td.state.off span { - background-image: url(../images/sprites.png); - background-repeat: no-repeat; - color: #B90606; - background-position: 1px -492px; -} - -div.list-view td.state.warning span { - background-image: url(../images/sprites.png); - background-repeat: no-repeat; - color: #B90606; - background-position: 1px -558px; -} - -div.list-view td.state.transition span { - background-image: url(../images/sprites.png); - background-repeat: no-repeat; - color: #B90606; - background-position: 1px -432px; -} - -div.list-view td.state.suitable span { - background: url(../images/icons.png) no-repeat scroll 1px -224px; - color: #008000; - height: 18px; -} - -div.list-view td.state.suitable-storage-migration-required span { - width: 200px; -} - -div.list-view td.state.notsuitable span { - background: url(../images/icons.png) no-repeat scroll 1px -190px; - color: #B90606; - height: 19px; - width: 100px; -} - -div.list-view td.state.notsuitable-storage-migration-required span { - width: 220px !important; -} - -.horizontal-overflow tbody td, .horizontal-overflow thead th { +.horizontal-overflow tbody td, +.horizontal-overflow thead th { min-width: 40px; - padding: 10px 10px 5px 0px; + padding: 10px 10px 5px 0; } .horizontal-overflow th.quick-view { @@ -1437,13 +306,13 @@ div.list-view td.state.notsuitable-storage-migration-required span { } .groupable-header { - background: url(../images/bg-table-head.png); - border-left: 1px solid #C6C3C3; - border-right: 1px solid #C6C3C3; + border-right: 1px solid #c6c3c3; + border-left: 1px solid #c6c3c3; + background: url("../images/bg-table-head.png"); } .groupable-header-columns th { - border: none; + border: 0; } table.horizontal-overflow td.state { @@ -1457,92 +326,1210 @@ table.no-split td.first { } .groupable-header-border { - border-left: 1px solid #C6C3C3; - border-right: 1px solid #C6C3C3; + border-right: 1px solid #c6c3c3; + border-left: 1px solid #c6c3c3; } -td.alert-notification-threshold { - color: #E87900; - background-color: rgba(255, 231, 175, 0.75); +a { + color: #0b84dc; + text-decoration: none; } -td.alert-disable-threshold { - color: #F50000; - background-color: rgba(255, 190, 190, 0.75); +a:hover { + color: #000000; + text-decoration: underline; } -span.compact { - height: 16px; +input.error { + background: #fee5e5; } -/** Quick view tooltip*/ -.quick-view-tooltip { - width: 470px; +label.error { + color: #ff0000; +} + +.label-hovered { + color: #0000ff !important; + cursor: pointer; +} + +.button { + float: left; + background: url("../images/buttons.png") no-repeat; + cursor: pointer; +} + +#main-area { + width: 1224px; + height: 729px; + margin: auto; + border: 1px solid #d4d4d4; + /*+box-shadow:0px -5px 11px #B7B7B7;*/ + border: 1px solid #e8e8e8; + box-shadow: 0 -5px 11px #b7b7b7; + -moz-box-shadow: 0 -5px 11px #b7b7b7; + -webkit-box-shadow: 0 -5px 11px #b7b7b7; + -o-box-shadow: 0 -5px 11px #b7b7b7; +} + +#container { + /*[empty]width:;*/ + position: relative; + height: 100%; + margin: auto; +} + +#sections { + display: none; +} + +#template { + display: none; +} + +body.login { + background: url("../images/overlay-pattern.png") repeat center, #106ca9 url("../images/bg-login.jpg") no-repeat center; + background-size: auto, cover; + overflow: hidden; +} + +.login { + display: block; + position: relative; + top: 80px; + /*+placement:shift 0 80px;*/ + left: 0; + width: 100%; + height: 350px; + background: #053663; +} + +.login .select-language { + float: left; + margin-top: 10px; +} + +.login .select-language select { + width: 260px; + margin-top: 20px; + border: 1px solid #808080; + /*+border-radius:4px;*/ + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + box-shadow: inset 0 1px 1px #838383; + font-size: 12px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + /*+box-shadow:inset 0px 1px 1px #838383;*/ + -khtml-border-radius: 4px; + -moz-box-shadow: inset 0 1px 1px #838383; + -webkit-box-shadow: inset 0 1px 1px #838383; + -o-box-shadow: inset 0 1px 1px #838383; +} + +.login .fields { + float: left; + width: 409px; + margin: 72px 0 0 88px; +} + +.login .fields .field { + position: relative; +} + +.login .fields .field label { + position: absolute; + margin-top: 14px; + /*+placement:displace 9px 14px;*/ + margin-left: 9px; + font-size: 12px; + color: #4e4f53; +} + +.login .fields .field label.error { + float: right; + top: 0; + left: 264px; + color: #ff0000; +} + +.login .fields input { + width: 248px; + height: 20px; + margin: 5px 0 0; + padding: 5px; + border: 0; + border-radius: 3px; + box-shadow: inset 0 1px 1px #4e4e4e; + /*+border-radius:3px;*/ + background: #ececec; + font-size: 13px; + text-indent: 1px; + -moz-border-radius: 3px; + /*+box-shadow:inset 0px 1px 1px #4E4E4E;*/ + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + -moz-box-shadow: inset 0 1px 1px #4e4e4e; + -webkit-box-shadow: inset 0 1px 1px #4e4e4e; + -o-box-shadow: inset 0 1px 1px #4e4e4e; +} + +.login .fields input.error { + border-color: #ff8080; + background: #ffeaea; +} + +.login .fields input[type='submit'] { + display: block; + float: left; + width: 69px; + height: 25px; + margin: 7px 120px 0 -1px; + border: 0; + background: transparent url("../images/sprites.png") -563px -747px; + font-weight: bold; + color: #ffffff; + text-align: center; + text-indent: -1px; + text-shadow: 0 1px 2px #000000; + /*+text-shadow:0px 1px 2px #000000;*/ + cursor: pointer; + -moz-text-shadow: 0 1px 2px #000000; + -webkit-text-shadow: 0 1px 2px #000000; + -o-text-shadow: 0 1px 2px #000000; +} + +.login .fields input[type='samlsubmit'] { + display: block; + width: 60px; + height: 15px; + border: 0; + background: transparent url("../images/sprites.png") -563px -747px; + font-size: 10px; + font-weight: bold; + color: #ffffff; + text-align: center; + text-indent: -1px; + /*+text-shadow:0px 1px 2px #000000;*/ + text-shadow: 0 1px 2px #000000; + cursor: pointer; + -moz-text-shadow: 0 1px 2px #000000; + -webkit-text-shadow: 0 1px 2px #000000; + -o-text-shadow: 0 1px 2px #000000; +} + +.login .fields input[type='submit']:hover { + background-position: -563px -772px; +} + +.login .logo { + float: left; + width: 290px; + height: 40px; + margin: 72px 0 0 209px; + background: url("../images/logo-login.png") no-repeat 0 0; +} + +.login.nologo .logo { + background-image: url("../images/logo-login-oss.png"); +} + +.login form { + display: block; + width: 1000px; + height: 100%; + margin: auto; + background: #053663; +} + +.dialog-about .ui-widget-content { + width: 100% !important; + padding-right: 0; + padding-left: 0; +} + +.dialog-about .logo { + padding-top: 20px; + font-size: 26px; + color: #636363; +} + +.dialog-about .version { + padding-top: 10px; + font-size: 12px; +} + +.dialog-about .ui-button { + float: none; + margin: 0 auto; +} + +.loading-overlay { + opacity: 0.7; + position: absolute; + z-index: 500; + top: 0; + left: 0; + width: 100%; + height: 100%; + /*+opacity:70%;*/ + background: #f2f2f2 url("../images/ajax-loader.gif") no-repeat center; + filter: alpha(opacity=70); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); + -moz-opacity: 0.7; +} + +.loading-overlay span { + display: block; + margin: 155px 0 0 5px; + color: #4b4b4b; + text-align: center; +} + +.detail-view .ui-tabs-panel .loading-overlay { + background-position: 50% 250px; +} + +.install-wizard { + position: relative; + width: 1024px; + height: 768px; + margin: auto; + border-top: 0; +} + +body.install-wizard { + height: 769px !important; + background: #ffffff url("../images/bg-login.png"); + font-family: sans-serif; + overflow: auto; + overflow-x: hidden; +} + +.install-wizard .header { + z-index: 9; + height: 365px; + padding: 32px 0 89px; + background: url("../images/bg-login.png"); + color: #626e82; + /*+text-shadow:0px 1px 2px #FFFFFF;*/ + text-align: center; + text-shadow: 0 1px 2px #ffffff; + -moz-text-shadow: 0 1px 2px #ffffff; + -webkit-text-shadow: 0 1px 2px #ffffff; + -o-text-shadow: 0 1px 2px #ffffff; +} + +.install-wizard .header h3 { + font-size: 20px; +} + +.install-wizard .step { + max-width: 691px; + margin: auto; + padding: 56px 0 0; +} + +.install-wizard .step .title { + clear: both; + width: 303px; + margin: auto auto 30px; + font-size: 22px; + color: #626e82; +} + +.install-wizard .step .subtitle { + font-size: 12px; + font-weight: bold; + color: #4b5e69; +} + +.install-wizard .step p { + background: url("../images/bg-gradient-white-transparent.png") repeat-x -114px -270px; + font-size: 15px; + line-height: 23px; + color: #4a4a4a; +} + +.install-wizard .step ul li { + width: 465px; + margin: 14px 0 0 18px; + font-size: 13px; + list-style: disc; +} + +.install-wizard .step .field { + margin: 0 0 12px; + text-align: left; +} + +.install-wizard .step .field label { + display: block; + clear: both; + font-size: 11px; + color: #4d4d4d; +} + +.install-wizard .step .field label.error { + font-size: 11px; + color: #ff2424; +} + +.install-wizard .body { + z-index: 10; + width: 1012px; + height: 762px; + margin: -352px auto auto; + box-shadow: 0 -3px 4px #cfcfcf; + /*+box-shadow:0px -3px 4px #CFCFCF;*/ + background: url("../images/bg-gradient-white-transparent.png") repeat-x -114px -141px; + -moz-box-shadow: 0 -3px 4px #cfcfcf; + -webkit-box-shadow: 0 -3px 4px #cfcfcf; + -o-box-shadow: 0 -3px 4px #cfcfcf; +} + +.install-wizard h2 { + margin: 0 0 19px; + font-size: 28px; +} + +.install-wizard input[type='text'], +.install-wizard input[type='password'], +.install-wizard input[type='text'], +.install-wizard select { + width: 288px; + /*+border-radius:4px;*/ + padding: 6px; + border: 1px solid #cdcdcd; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + box-shadow: inset 0 1px #aeaeae; + background: #f7f7f7; + /*+box-shadow:inset 0px 1px #AEAEAE;*/ + font-size: 14px; + color: #232323; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + -moz-box-shadow: inset 0 1px #aeaeae; + -webkit-box-shadow: inset 0 1px #aeaeae; + -o-box-shadow: inset 0 1px #aeaeae; + -moz-box-shadow: inset 0 1px 0 #aeaeae; + -webkit-box-shadow: inset 0 1px 0 #aeaeae; + -o-box-shadow: inset 0 1px 0 #aeaeae; +} + +.install-wizard .button { + float: right; + margin-top: 15px; + /*+border-radius:4px;*/ + padding: 7px 16px 7px 18px; + border: 1px solid #505050; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: url("../images/bg-gradients.png") 0 -221px; + font-size: 12px; + font-weight: bold; + color: #ffffff; + text-shadow: 0 -1px 3px #3f4351; + /*+text-shadow:0px -1px 3px #3F4351;*/ + cursor: pointer; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + -moz-text-shadow: 0 -1px 3px #3f4351; + -webkit-text-shadow: 0 -1px 3px #3f4351; + -o-text-shadow: 0 -1px 3px #3f4351; +} + +.install-wizard .button.advanced-installation, +.install-wizard .button.go-back { + float: left; + border: 1px solid #c7c2c2; + background: #e0dede; + /*+text-shadow:0px 0px #FFFFFF;*/ + color: #3b3b3b; + text-shadow: 0 0 #ffffff; + -moz-text-shadow: 0 0 #ffffff; + -webkit-text-shadow: 0 0 #ffffff; + -o-text-shadow: 0 0 #ffffff; +} + +.install-wizard .button.go-back { + padding: 9px 16px 10px 18px; + font-size: 12px; +} + +.install-wizard .setup-form .button.go-back { + /*+placement:shift 15px -14px;*/ + position: relative; + top: -14px; + left: 15px; +} + +.install-wizard .step { + position: relative; + z-index: 10; +} + +.install-wizard .step .tooltip-info { + /*+placement:shift 547px 50px;*/ + position: relative; + position: absolute; + top: 50px; + left: 547px; +} + +/*** Intro*/ +.install-wizard .step.intro.what-is-cloudstack p { + height: 540px; + background: url("../images/bg-what-is-cloudstack.png") no-repeat 50% 237px; +} + +/*** Diagram*/ +.install-wizard .diagram { + position: relative; + position: absolute; + /*+placement:shift 65px 496px;*/ + z-index: 10; + top: 496px; + left: 65px; + width: 910px; + height: 385px; +} + +.install-wizard .diagram .part { + display: none; + background: url("../images/install-wizard-parts.png") no-repeat; +} + +.install-wizard .diagram .part.zone { + position: relative; + position: absolute; + top: 222px; + /*+placement:shift 77px 222px;*/ + left: 77px; + width: 742px; + height: 135px; + background-position: -267px -580px; +} + +.install-wizard .diagram .part.loading { + position: relative; + position: absolute; + top: -67px; + /*+placement:shift 105px -67px;*/ + left: 105px; + width: 742px; + height: 432px; + background-position: -1264px -487px; +} + +.install-wizard .diagram .part.loading .icon { + position: relative; + top: 130px; + left: 322px; + /*+placement:shift 322px 130px;*/ + width: 61px; + height: 76px; + background: url("../images/ajax-loader.gif") no-repeat; +} + +.install-wizard .diagram .part.pod { + position: relative; + position: absolute; + top: -76px; + /*+placement:shift 313px -76px;*/ + left: 313px; + width: 266px; + height: 396px; + background-position: -47px -3px; +} + +.install-wizard .diagram .part.cluster { + position: relative; + position: absolute; + top: -76px; + /*+placement:shift 313px -76px;*/ + left: 313px; + width: 266px; + height: 396px; + background-position: -364px 1px; +} + +.install-wizard .diagram .part.host { + position: relative; + position: absolute; + top: -76px; + /*+placement:shift 313px -76px;*/ + left: 313px; + width: 266px; + height: 396px; + background-position: -688px 1px; +} + +.install-wizard .diagram .part.primaryStorage { + position: relative; + position: absolute; + top: -76px; + /*+placement:shift 306px -76px;*/ + left: 306px; + width: 275px; + height: 396px; + background-position: -1046px 1px; +} + +.install-wizard .diagram .part.secondaryStorage { + position: relative; + position: absolute; + top: -76px; + /*+placement:shift 306px -76px;*/ + left: 306px; + width: 385px; + height: 396px; + background-position: -1469px 1px; +} + +/*** Setup form*/ +.install-wizard .step .setup-form { display: inline-block; + width: 469px; + border: 1px solid #dfdfdf; + box-shadow: 0 5px 9px #9f9f9f; + /*+text-shadow:0px 1px #FFFFFF;*/ + background: url("../images/bg-transparent-white.png"); + text-shadow: 0 1px #ffffff; + -moz-text-shadow: 0 1px #ffffff; + -webkit-text-shadow: 0 1px #ffffff; + -o-text-shadow: 0 1px #ffffff; + -moz-text-shadow: 0 1px 0 #ffffff; + -webkit-text-shadow: 0 1px 0 #ffffff; + /*+box-shadow:0px 5px 9px #9F9F9F;*/ + -o-text-shadow: 0 1px 0 #ffffff; + -moz-box-shadow: 0 5px 9px #9f9f9f; + -webkit-box-shadow: 0 5px 9px #9f9f9f; + -o-box-shadow: 0 5px 9px #9f9f9f; +} + +.install-wizard .step .setup-form .title { + float: left; + margin: 17px 0 0 29px; + color: #626f7c; +} + +.install-wizard .step .setup-form .field { + display: inline-block; + width: 389px; + margin: 6px 0 1px 31px; + padding: 9px; + color: #57646d; +} + +.install-wizard .step .setup-form .field .name { + float: left; + width: 98px; + padding: 10px 0 0 0; + font-size: 13px; + text-align: right; +} + +.install-wizard .step .setup-form .field .value { + float: right; +} + +.install-wizard .step .setup-form input[type='text'], +.install-wizard .step .setup-form input[type='password'] { + width: 278px; + margin: 6px 4px 0 0; + padding: 2px 2px 1px; + border: 1px solid #8d8d8d; +} + +.install-wizard .step .setup-form .range-item { + float: left; + width: 142px; +} + +.install-wizard .step .setup-form .range-item input { + width: 131px; +} + +.install-wizard .step .setup-form .multi-range input[type='text'] { + width: 128px; +} + +.install-wizard .step .setup-form input.button { + margin: 0 30px 14px 15px; +} + +/*** Step: Change user*/ +.install-wizard .step.change-user { + width: 316px; + margin: auto; + padding-top: 95px; + text-align: center; +} + +.install-wizard .step.intro iframe { + width: 99%; + height: 99%; + margin: 4px; +} + +.install-wizard .step.intro .title { + margin-bottom: 21px; + margin-left: 0; + font-size: 25px; + color: #565454; +} + +.install-wizard .step.intro .subtitle { + margin-bottom: 9px; +} + +.install-wizard .step.intro .subtitle li { + position: relative; + width: 45%; + height: 24px; + padding: 1px 0 1px 30px; + background: url("../images/ajax-loader-small.gif") no-repeat 3px 0; + list-style: none; +} + +.install-wizard .step.intro .subtitle li.complete { + background: url("../images/icons.png") -1px -224px; +} + +.install-wizard .step.intro .subtitle li.error { + background: url("../images/icons.png") -1px -190px; +} + +.install-wizard .step.intro .subtitle li img { + float: right; +} + +div.notification-box { + width: 323px; + height: 354px; + background: url("../images/bg-notifications.png") no-repeat 0 0; +} + +div.notification-box h3 { + position: relative; + /*+placement:shift 0px 35px;*/ + top: 35px; + left: 0; + font-size: 21px; + letter-spacing: 1px; + color: #ffffff; + text-align: center; + /*+text-shadow:0px 1px 2px #000000;*/ + text-shadow: 0 1px 2px #000000; + -moz-text-shadow: 0 1px 2px #000000; + -webkit-text-shadow: 0 1px 2px #000000; + -o-text-shadow: 0 1px 2px #000000; +} + +div.notification-box .container { + position: relative; + top: 46px; + left: 3px; + width: 296px; + /*+placement:shift 3px 46px;*/ + height: 241px; + margin: auto; + border: 1px solid #8198ae; + /*+box-shadow:inset 0px 3px 7px #656565;*/ + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + box-shadow: inset 0 3px 7px #656565; + background: #ffffff; + /*+border-radius:4px;*/ + -moz-box-shadow: inset 0 3px 7px #656565; + -webkit-box-shadow: inset 0 3px 7px #656565; + -o-box-shadow: inset 0 3px 7px #656565; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +div.notification-box .container ul { + width: 294px; + height: 229px; + margin-top: 8px; + overflow: auto; + overflow-x: hidden; +} + +div.notification-box .container ul li { + width: 100%; + height: 41px; + border-bottom: 1px solid #cecece; + background: url("../images/icons.png") no-repeat 10px -213px; + font-size: 12px; + color: #4d5e6e; + text-indent: 0; + cursor: pointer; + overflow-x: hidden; +} + +div.notification-box .container ul li.error { + height: 53px; + background: url("../images/icons.png") no-repeat 10px -171px; +} + +div.notification-box .container ul li.error .subtitle { + display: block; + position: relative; + float: left; + top: 17px; + left: 48px; + width: 213px; + height: 10px; + margin: 0; + padding: 0; + white-space: nowrap; + color: #808080; + /*+placement:shift 48px 17px;*/ + text-indent: 0; + text-overflow: ellipsis; + overflow: hidden; +} + +div.notification-box .container ul li span { + position: relative; + /*+placement:shift 48px 15px;*/ + float: left; + top: 15px; + left: 48px; + max-width: 202px; + font-size: 14px; + font-weight: 100; + overflow: hidden; +} + +div.notification-box .container ul li span:hover { + color: #5faaf7; + text-decoration: underline; +} + +div.notification-box .container ul div.remove { + position: relative; + float: right; + top: 16px; + left: 0; + width: 17px; + height: 21px; + /*+placement:shift 0px 16px;*/ + margin: -4px 8px 0 0; + background: url("../images/buttons.png") no-repeat -623px -8px; + cursor: pointer; +} + +div.notification-box .container ul div.remove:hover { + background-position: -606px -8px; +} + +div.notification-box .container ul li.pending { + background: url("../images/ajax-loader.gif") no-repeat 8px 6px; + color: #7e96ac; +} + +div.notification-box .container ul li.first { + border-top: 0; +} + +div.notification-box .button { + position: relative; + float: left; + top: 51px; + /*+placement:shift 0px 51px;*/ + left: 0; + padding: 5px 10px 6px; + border-bottom: 1px solid #2b2b2b; + /*+border-radius:4px;*/ + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + box-shadow: 0 0 2px #272727; + background: url("../images/buttons.png") no-repeat; + cursor: pointer; + -moz-border-radius: 4px; + /*+box-shadow:0px 0px 2px #272727;*/ + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + -moz-box-shadow: 0 0 2px #272727; + -webkit-box-shadow: 0 0 2px #272727; + -o-box-shadow: 0 0 2px #272727; +} + +div.notification-box .button span { + font-size: 11px; + font-weight: bold; + letter-spacing: 1px; + color: #ffffff; + /*+text-shadow:0px -1px 2px #171717;*/ + text-shadow: 0 -1px 2px #171717; + -moz-text-shadow: 0 -1px 2px #171717; + -webkit-text-shadow: 0 -1px 2px #171717; + -o-text-shadow: 0 -1px 2px #171717; +} + +div.notification-box .button.clear-list { + margin-left: 16px; + background: url("../images/gradients.png") 0 -10px; +} + +div.notification-box .button.clear-list:hover { + background-position: 0 -51px; +} + +div.notification-box .button.close { + float: right; + margin-right: 10px; + border-bottom: 1px solid #232323; + background: url("../images/gradients.png") 0 -317px; +} + +div.notification-box .button.close:hover { + background-position: -4px -368px; +} + +/*** Corner alert*/ +div.notification.corner-alert { + opacity: 0.7; + position: absolute; + /*+box-shadow:0px 2px 10px #000000;*/ + z-index: 100; + width: 300px; + height: 75px; + margin: 38px 0 0 -56px; + padding: 7px 7px 0; + border-radius: 3px; + /*+border-radius:3px;*/ + box-shadow: 0 2px 10px #000000; + background: #ffffff; + background: rgba(255, 255, 255, 0.95); + font-size: 12px; + text-indent: 10px; + -moz-box-shadow: 0 2px 10px #000000; + -webkit-box-shadow: 0 2px 10px #000000; + -o-box-shadow: 0 2px 10px #000000; + /*+opacity:70%;*/ + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + filter: alpha(opacity=70); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); + -moz-opacity: 0.7; +} + +div.notification.corner-alert .top-arrow { + position: absolute; + top: -15px; + left: 50px; + width: 36px; + height: 15px; + background: url("../images/sprites.png") no-repeat -580px -1353px; +} + +div.notification.corner-alert div.title { + width: 100%; + height: 33px; + color: #ffffff; +} + +div.notification.corner-alert div.title span { + /*+placement:shift 0px 10px;*/ + position: relative; + top: 10px; + left: 0; + padding: 3px 0 12px 24px; + padding-left: 33px; + background: url("../images/icons.png") no-repeat 3px -223px; + font-size: 14px; + font-weight: 100; + color: #6d6d6d; +} + +div.notification.corner-alert.error div.title span { + background: url("../images/icons.png") no-repeat -2px -190px; +} + +div.notification.corner-alert div.message span { + display: block; + position: relative; + position: relative; + top: -2px; + left: 17px; + /*+placement:shift 17px -2px;*/ + padding-top: 6px; + font-size: 14px; + color: #000000; +} + +.tooltip-info { + display: inline-block; + position: absolute; + z-index: 1000; + width: 239px; + min-height: 83px; + border: 1px solid #beb8b8; + border-radius: 22px; + /*+border-radius:22px;*/ + border-radius: 22px 22px 22px 22px; + background: #ffffff; + -moz-border-radius: 22px; + -webkit-border-radius: 22px; + -khtml-border-radius: 22px; +} + +.tooltip-info .arrow { + position: absolute; + top: 17px; + left: -18px; + width: 27px; + height: 47px; + background: url("../images/sprites.png") -583px -939px; +} + +.tooltip-info .title { + margin: 12px; + font-size: 19px; + color: #485766; +} + +.tooltip-info .content { + width: 182px; + margin: auto; + padding-bottom: 13px; + font-size: 11px; + line-height: 19px; + overflow: auto; + overflow-x: hidden; +} + +div.panel div.list-view { + height: 632px; + margin-top: 30px; + overflow: auto; + overflow-x: hidden; +} + +.detail-view div.list-view { + width: 930px; + height: 536px !important; + margin: 41px auto auto !important; + border: 1px solid #dad4d4; + background: #f7f7f7; +} + +div.panel div.list-view div.data-table table { + width: 955px; +} + +.detail-view div.list-view div.data-table table { + width: 903px !important; +} + +.detail-view div.list-view div.data-table table td { + border-left: 1px solid #cacaca; +} + +div.panel div.list-view div.fixed-header { + display: table; + position: absolute; + z-index: 1; + top: 29px; + left: 12px; + width: 960px; + height: 47px; + margin: 0; + background-color: #f7f7f7; +} + +.detail-view div.list-view div.fixed-header { + top: 49px !important; + left: 29px !important; + width: 903px !important; + background: #ffffff; +} + +.detail-view div#details-tab-zones div.fixed-header { + left: 25px !important; +} + +.detail-view div.list-view div.fixed-header table { + width: 100% !important; +} + +.project-view div.panel div.list-view div.fixed-header { + background: #6d747d; +} + +div.panel div.list-view div.fixed-header table { + position: relative; + /*+placement:shift 0px 18px;*/ + top: 18px; + left: 0; + width: 955px; + margin: 0; + /*+box-shadow:0px 4px 10px #DFE1E3;*/ + box-shadow: 0 4px 10px #dfe1e3; + -moz-box-shadow: 0 4px 10px #dfe1e3; + -webkit-box-shadow: 0 4px 10px #dfe1e3; + -o-box-shadow: 0 4px 10px #dfe1e3; +} + +.project-view div.panel div.list-view div.fixed-header table { + /*+box-shadow:0px 2px 2px #CACDD1;*/ + box-shadow: 0 2px 2px #cacdd1; + -moz-box-shadow: 0 2px 2px #cacdd1; + -webkit-box-shadow: 0 2px 2px #cacdd1; + -o-box-shadow: 0 2px 2px #cacdd1; +} + +div.list-view td.state { + width: 120px; + min-width: 120px; + max-width: 120px; +} + +div.list-view td.first { + cursor: pointer; +} + +div.list-view tr:not(.multi-edit-selected) td.first:hover { + color: #3a82cd; +} + +div.list-view td.state span { + width: 80px; + padding: 1px 0 0 18px; + background: url("../images/sprites.png") 1px -526px; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + text-align: center; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; +} + +div.list-view td.state.on span { + background-image: url("../images/sprites.png"); + background-repeat: no-repeat; + background-position: 1px -460px; + color: #008000; +} + +div.list-view td.state.off span { + background-image: url("../images/sprites.png"); + background-repeat: no-repeat; + background-position: 1px -492px; + color: #b90606; +} + +div.list-view td.state.warning span { + background-image: url("../images/sprites.png"); + background-repeat: no-repeat; + background-position: 1px -558px; + color: #b90606; +} + +div.list-view td.state.transition span { + background-image: url("../images/sprites.png"); + background-repeat: no-repeat; + background-position: 1px -432px; + color: #b90606; +} + +div.list-view td.state.suitable span { + height: 18px; + background: url("../images/icons.png") no-repeat scroll 1px -224px; + color: #008000; +} + +div.list-view td.state.suitable-storage-migration-required span { + width: 200px; +} + +div.list-view td.state.notsuitable span { + width: 100px; + height: 19px; + background: url("../images/icons.png") no-repeat scroll 1px -190px; + color: #b90606; +} + +div.list-view td.state.notsuitable-storage-migration-required span { + width: 220px !important; +} + +.quick-view-tooltip { + display: inline-block; + width: 470px; + margin-left: 0; padding-top: 0; - margin-left: 0px; } .quick-view-tooltip > div.title { - width: 444px; position: absolute; top: 20px; left: 10px; - color: #808080; + width: 444px; font-weight: 100; + color: #808080; } .quick-view-tooltip > div.title .icon { position: relative; + float: right; top: -2px; left: -7px; - background: url(../images/sprites.png) no-repeat -42px -67px; - float: right; - padding: 0px 13px 0 0px; + padding: 0 13px 0 0; + background: url("../images/sprites.png") no-repeat -42px -67px; } .quick-view-tooltip .loading-overlay { + opacity: 0.35; top: 94px; - height: 57px; left: 1px; /*+opacity:35%;*/ + height: 57px; filter: alpha(opacity=35); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=35); -moz-opacity: 0.35; - opacity: 0.35; } .quick-view-tooltip .container { - border: 1px solid #9EA2A5; - background: #FFFFFF; - width: 471px; - min-height: 100px; - height: auto; - overflow: hidden; display: inline-block; + width: 471px; + height: auto; + min-height: 100px; + border: 1px solid #9ea2a5; + box-shadow: 0 7px 9px #676f76; + background: #ffffff; /*+box-shadow:0px 7px 9px #676F76;*/ - -moz-box-shadow: 0px 7px 9px #676F76; - -webkit-box-shadow: 0px 7px 9px #676F76; - -o-box-shadow: 0px 7px 9px #676F76; - box-shadow: 0px 7px 9px #676F76; + overflow: hidden; + -moz-box-shadow: 0 7px 9px #676f76; + -webkit-box-shadow: 0 7px 9px #676f76; + -o-box-shadow: 0 7px 9px #676f76; } /*** Quick view detail view*/ .quick-view-tooltip .detail-view .main-groups { + position: absolute; + top: 55px; width: 456px; height: 170px; - position: absolute; padding-top: 7px; - top: 55px; border: 1px solid #808080; - border-left: none; - border-right: none; - overflow: hidden; + border-right: 0; + border-left: 0; + box-shadow: 0 1px #e6e6e6; /*+box-shadow:0px 1px #E6E6E6;*/ - -moz-box-shadow: 0px 1px #E6E6E6; - -webkit-box-shadow: 0px 1px #E6E6E6; - -o-box-shadow: 0px 1px #E6E6E6; - box-shadow: 0px 1px #E6E6E6; + overflow: hidden; + -moz-box-shadow: 0 1px #e6e6e6; + -webkit-box-shadow: 0 1px #e6e6e6; + -o-box-shadow: 0 1px #e6e6e6; } .quick-view-tooltip .detail-view .tagger { @@ -1555,8 +1542,8 @@ span.compact { .quick-view-tooltip .detail-view .ui-tabs-panel { display: inline-block; - width: 100% !important; float: left; + width: 100% !important; height: auto; overflow: hidden; } @@ -1568,17 +1555,17 @@ span.compact { } .quick-view-tooltip .detail-view .detail-group { + left: -9px; width: 365px; margin: 0; padding: 0; - left: -9px; + border: 0; background: none; - border: none; } .quick-view-tooltip .detail-view .detail-group table { margin: 0; - border: none; + border: 0; background: none; } @@ -1587,36 +1574,36 @@ span.compact { } .quick-view-tooltip .detail-view .detail-group table td.name { - color: #000000 !important; - padding: 0px 29px 0px 5px !important; + padding: 0 29px 0 5px !important; font-size: 13px; + color: #000000 !important; } .quick-view-tooltip .detail-view .detail-group table td.value { font-size: 12px; /*+text-shadow:0px 1px #EAEAEA;*/ - -moz-text-shadow: 0px 1px #EAEAEA; - -webkit-text-shadow: 0px 1px #EAEAEA; - -o-text-shadow: 0px 1px #EAEAEA; - text-shadow: 0px 1px #EAEAEA; + text-shadow: 0 1px #eaeaea; overflow: hidden; + -moz-text-shadow: 0 1px #eaeaea; + -webkit-text-shadow: 0 1px #eaeaea; + -o-text-shadow: 0 1px #eaeaea; } -.quick-view-tooltip .detail-view .detail-group table td.value input[type=text] { +.quick-view-tooltip .detail-view .detail-group table td.value input[type='text'] { width: 258px; height: 10px; - margin-left: 0px; + margin-left: 0; } .quick-view-tooltip .detail-view .detail-group .main-groups table td.value span { - height: 25px; top: 7px; + height: 25px; } .quick-view-tooltip .detail-view .detail-group.actions { position: relative; - top: 202px; float: left; + top: 202px; width: 100%; height: auto; } @@ -1626,21 +1613,21 @@ span.compact { } .quick-view-tooltip .detail-view .detail-group.actions .action.text { + display: inline-block; + float: left; width: 112px; height: 41px; - background: none; - border: none; - float: left; margin-left: 5px; - display: inline-block; + border: 0; + background: none; } .quick-view-tooltip .detail-view .detail-group.actions .action.text:hover { /*+box-shadow:none;*/ + box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; - box-shadow: none; } .quick-view-tooltip .detail-view .detail-group.actions .action.text .icon { @@ -1650,17 +1637,17 @@ span.compact { } .quick-view-tooltip .detail-view .detail-group.actions .action.text .label { - width: 81px; display: block; float: right; + width: 81px; font-size: 11px; - color: #454C53; + color: #454c53; /*+text-shadow:0px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px #FFFFFF; - -o-text-shadow: 0px 1px #FFFFFF; - text-shadow: 0px 1px #FFFFFF; - text-indent: 0px; + text-indent: 0; + text-shadow: 0 1px #ffffff; + -moz-text-shadow: 0 1px #ffffff; + -webkit-text-shadow: 0 1px #ffffff; + -o-text-shadow: 0 1px #ffffff; } .quick-view-tooltip .detail-view .detail-group.actions .action.text:hover .label { @@ -1668,58 +1655,57 @@ span.compact { } .quick-view-tooltip .detail-view .detail-group.actions .detail-actions { + position: relative; + float: left; + top: 27px; + vertical-align: top; width: 460px; height: auto; background: none; - vertical-align: top; - position: relative; - top: 27px; - float: left; } .quick-view-tooltip .detail-view .detail-group.actions td.view-all { position: relative; - left: 0px; - top: 26px; float: left; + top: 26px; + left: 0; height: 26px; /*+box-shadow:inset 0px 1px #FFFFFF;*/ - -moz-box-shadow: inset 0px 1px #FFFFFF; - -webkit-box-shadow: inset 0px 1px #FFFFFF; - -o-box-shadow: inset 0px 1px #FFFFFF; - box-shadow: inset 0px 1px #FFFFFF; + box-shadow: inset 0 1px #ffffff; + -moz-box-shadow: inset 0 1px #ffffff; + -webkit-box-shadow: inset 0 1px #ffffff; + -o-box-shadow: inset 0 1px #ffffff; } .quick-view-tooltip .detail-view .detail-actions a { - background: none; width: 30px; + background: none; } -/*Details page*/ .detail-view { padding: 0 0 0 14px; } .ui-tabs .info { - background: #EFEFEF; + display: inline-block; width: 91%; height: auto; - overflow: visible; - padding: 14px 14px 0; - border: 1px dashed #D7D7D7; - /*+box-shadow:inset 0px 1px 2px #FFFFFF;*/ - -moz-box-shadow: inset 0px 1px 2px #FFFFFF; - -webkit-box-shadow: inset 0px 1px 2px #FFFFFF; - -o-box-shadow: inset 0px 1px 2px #FFFFFF; - box-shadow: inset 0px 1px 2px #FFFFFF; margin: 10px; - display: inline-block; + padding: 14px 14px 0; + border: 1px dashed #d7d7d7; + /*+box-shadow:inset 0px 1px 2px #FFFFFF;*/ + box-shadow: inset 0 1px 2px #ffffff; + background: #efefef; + overflow: visible; + -moz-box-shadow: inset 0 1px 2px #ffffff; + -webkit-box-shadow: inset 0 1px 2px #ffffff; + -o-box-shadow: inset 0 1px 2px #ffffff; } .ui-tabs .info li { - font-size: 12px; - color: #3E4C59; margin: 0 0 18px; + font-size: 12px; + color: #3e4c59; } .ui-tabs .info li strong { @@ -1728,51 +1714,51 @@ span.compact { } .project-view .ui-tabs ul li.ui-state-default a { - background: #6D747D; + box-shadow: inset -1px -2px 12px #596066; /*+box-shadow:inset -1px -2px 12px #596066;*/ + background: #6d747d; + font-weight: bold; + color: #ffffff; + text-shadow: 0 -1px 1px #3a3e42; -moz-box-shadow: inset -1px -2px 12px #596066; -webkit-box-shadow: inset -1px -2px 12px #596066; - -o-box-shadow: inset -1px -2px 12px #596066; - box-shadow: inset -1px -2px 12px #596066; - color: #FFFFFF; - font-weight: bold; /*+text-shadow:0px -1px 1px #3A3E42;*/ - -moz-text-shadow: 0px -1px 1px #3A3E42; - -webkit-text-shadow: 0px -1px 1px #3A3E42; - -o-text-shadow: 0px -1px 1px #3A3E42; - text-shadow: 0px -1px 1px #3A3E42; + -o-box-shadow: inset -1px -2px 12px #596066; + -moz-text-shadow: 0 -1px 1px #3a3e42; + -webkit-text-shadow: 0 -1px 1px #3a3e42; + -o-text-shadow: 0 -1px 1px #3a3e42; } .project-view .ui-tabs ul li.ui-state-hover a { - background: #878E97 0px 8px; + background: #878e97 0 8px; } .project-view .ui-tabs ul li.ui-state-active a { - background: #DBDDDF; - color: #4F6270; + box-shadow: 0 0; + background: #dbdddf; font-weight: bold; /*+text-shadow:0px 0px #FFFFFF;*/ - -moz-text-shadow: 0px 0px #FFFFFF; - -webkit-text-shadow: 0px 0px #FFFFFF; - -o-text-shadow: 0px 0px #FFFFFF; - text-shadow: 0px 0px #FFFFFF; + color: #4f6270; + text-shadow: 0 0 #ffffff; + -moz-text-shadow: 0 0 #ffffff; + -webkit-text-shadow: 0 0 #ffffff; /*+box-shadow:0px 0px;*/ - -moz-box-shadow: 0px 0px; - -webkit-box-shadow: 0px 0px; - -o-box-shadow: 0px 0px; - box-shadow: 0px 0px; - -moz-box-shadow: 0px 0px none; - -webkit-box-shadow: 0px 0px none; - -o-box-shadow: 0px 0px none; + -o-text-shadow: 0 0 #ffffff; + -moz-box-shadow: 0 0; + -webkit-box-shadow: 0 0; + -o-box-shadow: 0 0; + -moz-box-shadow: 0 0 none; + -webkit-box-shadow: 0 0 none; + -o-box-shadow: 0 0 none; } .ui-tabs li.ui-state-active.first.last a, .ui-tabs li.ui-state-default.first.last a { /*+border-radius:4px 4px 0 0;*/ + border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; -khtml-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; } .ui-tabs .ui-tabs-hide { @@ -1780,22 +1766,22 @@ span.compact { } .ui-tabs .ui-tabs-panel { - border: 1px solid #D9D9D9; clear: both; - padding: 7px 0 0 0; width: 97%; + height: 591px; + padding: 7px 0 0 0; + border: 1px solid #d9d9d9; overflow: auto; overflow-x: hidden; - height: 591px; } .detail-view .main-groups { - max-height: 407px; - overflow: auto; - overflow-x: hidden; width: 100%; - /*[empty]padding:;*/ + max-height: 407px; margin-right: 12px; + overflow: auto; + /*[empty]padding:;*/ + overflow-x: hidden; } .detail-view.edit-mode .main-groups { @@ -1804,16 +1790,20 @@ span.compact { .detail-group table { width: 98%; - font-size: 12px; - border-bottom: 1px solid #DFDFDF; - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#eaeaea',GradientType=0 ); margin-top: 10px; + border-bottom: 1px solid #dfdfdf; + font-size: 12px; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#eaeaea', GradientType=0); +} + +.detail-group table tbody { + border: 0; } .detail-group table tr, .detail-group table td { vertical-align: middle; - border: none; + border: 0; cursor: default; } @@ -1822,8 +1812,8 @@ span.compact { } .details.group-multiple table { - border: none; - border-top: none; + border: 0; + border-top: 0; } .details.group-multiple table.header { @@ -1832,15 +1822,15 @@ span.compact { } .details.group-multiple table tbody { - border-top: 1px solid #F2F0F0; + border-top: 1px solid #f2f0f0; } .detail-group .main-groups table td.name { width: 113px; - color: #6D6D6D; - font-weight: bold; padding: 14px 12px 13px 13px; - border: none; + border: 0; + font-weight: bold; + color: #6d6d6d; text-indent: 0; } @@ -1850,19 +1840,19 @@ span.compact { .detail-group .main-groups table td.value > span { display: block; + position: relative; + float: left; + top: 9px; + width: 245px; height: 30px; overflow: auto; - position: relative; - top: 9px; - float: left; - width: 245px; } .detail-group .main-groups table td.value > span.copypasteenabledvalue { - text-overflow: ellipsis; - -o-text-overflow: ellipsis; - overflow: hidden; white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + -o-text-overflow: ellipsis; } .detail-group .main-groups table td.value > .copypasteactive { @@ -1872,12 +1862,12 @@ span.compact { } div.copypasteicon { - background: url("../images/sprites.png") no-repeat -271px -65px; float: left; - height: 21px; - margin-left: 6px; - margin-top: 0px; width: 18px; + height: 21px; + margin-top: 0; + margin-left: 6px; + background: url("../images/sprites.png") no-repeat -271px -65px; } div.copypasteicon:hover { @@ -1885,10 +1875,10 @@ div.copypasteicon:hover { } .detail-group .main-groups table td.value > span.copypasteenabledvalue { - text-overflow: ellipsis; - -o-text-overflow: ellipsis; - overflow: hidden; white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + -o-text-overflow: ellipsis; } .detail-group .main-groups table td.value > .copypasteactive { @@ -1898,12 +1888,12 @@ div.copypasteicon:hover { } div.copypasteicon { - background: url("../images/sprites.png") no-repeat -271px -65px; float: left; - height: 21px; - margin-left: 6px; - margin-top: 0px; width: 18px; + height: 21px; + margin-top: 0; + margin-left: 6px; + background: url("../images/sprites.png") no-repeat -271px -65px; } div.copypasteicon:hover { @@ -1915,39 +1905,39 @@ div.copypasteicon:hover { } .detail-group .main-groups table td.value .view-all { - cursor: pointer; + float: right; /*[empty]height:;*/ /*+border-radius:4px 0 0 4px;*/ + margin: 7px 0 0; + padding: 0; + border-radius: 4px 0 0 4px; + cursor: pointer; -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px 0 0 4px; -khtml-border-radius: 4px 0 0 4px; - border-radius: 4px 0 0 4px; - float: right; - margin: 7px 0 0; - padding: 0px; } .detail-group .main-groups table td.value .view-all span { display: block; float: left; + margin-top: -5px; padding: 5px 2px 8px 4px; - background: url(../images/gradients.png) repeat-x 0px -529px; - border-left: 1px solid #9FA2A6; + border-left: 1px solid #9fa2a6; /*+border-radius:4px 0 0 4px;*/ + border-radius: 4px 0 0 4px; + background: url("../images/gradients.png") repeat-x 0 -529px; -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px 0 0 4px; -khtml-border-radius: 4px 0 0 4px; - border-radius: 4px 0 0 4px; - margin-top: -5px; } .detail-group .main-groups table td.value .view-all .end { - background: url(../images/sprites.png) no-repeat 100% -397px; float: right; width: 22px; height: 25px; - padding: 0px; - margin: -6px 0px 0px; + margin: -6px 0 0; + padding: 0; + background: url("../images/sprites.png") no-repeat 100% -397px; } .detail-group .main-groups table td.value .view-all:hover { @@ -1955,7 +1945,7 @@ div.copypasteicon:hover { } .detail-group .main-groups table td.value .view-all:hover span { - background-position: 0px -566px; + background-position: 0 -566px; } .detail-group .main-groups table td.value .view-all:hover div.end { @@ -1964,52 +1954,20 @@ div.copypasteicon:hover { .detail-view .detail-group .button.add { clear: both; - margin: 0px 21px 13px 0 !important; + margin: 0 21px 13px 0 !important; } .detail-view .details.group-multiple { float: left; - height: 600px; width: 100%; + height: 600px; margin-bottom: 30px; } .detail-view .details.group-multiple .main-groups { - overflow: visible; width: 98%; margin-bottom: 35px; -} - -/*List-view: subselect dropdown*/ -.list-view .subselect { - width: 116px; - display: block; - float: left; - background: url(../images/bg-gradients.png) 0px -42px; - padding: 0; - margin: 8px 0 1px 7px; - clear: both; - border: 1px solid #A8A7A7; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; -} - -.list-view .subselect span { - margin: 4px 0 0 12px; -} - -.list-view .subselect span.info { - font-size: 10px; - white-space: nowrap; -} - -.list-view .subselect select { - width: 85%; - margin: 5px 0 4px; - font-size: 10px; + overflow: visible; } .detail-group .main-groups table td.value .view-all:hover { @@ -2021,68 +1979,68 @@ div.copypasteicon:hover { } .detail-group.head table td.name { - padding: 20px 0px 17px; + padding: 20px 0 17px; } .detail-view .button.done, .detail-view .button.cancel { display: inline-block; - color: #FFFFFF; - font-size: 12px; - font-weight: bold; + position: relative; + position: absolute; + top: 550px; /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; + left: -1px; + margin: 0 0 0 12px; + padding: 9px 20px; border-radius: 4px; border-radius: 4px 4px 4px 4px; /*+text-shadow:0px -1px 2px #000000;*/ - -moz-text-shadow: 0px -1px 2px #000000; - -webkit-text-shadow: 0px -1px 2px #000000; - -o-text-shadow: 0px -1px 2px #000000; - text-shadow: 0px -1px 2px #000000; + box-shadow: 0 1px 4px #adadad; + background: url("../images/bg-gradients.png") 0 -221px; + font-size: 12px; + font-weight: bold; /*+box-shadow:0px 1px 4px #ADADAD;*/ - -moz-box-shadow: 0px 1px 4px #ADADAD; - -webkit-box-shadow: 0px 1px 4px #ADADAD; - -o-box-shadow: 0px 1px 4px #ADADAD; - box-shadow: 0px 1px 4px #ADADAD; + color: #ffffff; + text-shadow: 0 -1px 2px #000000; cursor: pointer; - margin: 0 0 0 12px; - padding: 9px 20px; - background: url(../images/bg-gradients.png) 0px -221px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + -moz-text-shadow: 0 -1px 2px #000000; + -webkit-text-shadow: 0 -1px 2px #000000; /*+placement:shift -1px 550px;*/ - position: relative; - left: -1px; - top: 550px; - position: absolute; + -o-text-shadow: 0 -1px 2px #000000; + -moz-box-shadow: 0 1px 4px #adadad; + -webkit-box-shadow: 0 1px 4px #adadad; + -o-box-shadow: 0 1px 4px #adadad; } .detail-view .button.cancel { - background-position: 0px -795px; left: 85px; + background-position: 0 -795px; color: #808080; /*+text-shadow:0px -1px 2px #000000;*/ - -moz-text-shadow: 0px -1px 2px #000000; - -webkit-text-shadow: 0px -1px 2px #000000; - -o-text-shadow: 0px -1px 2px #000000; - text-shadow: 0px -1px 2px #000000; - -moz-text-shadow: 0px -1px 2px #CCCCCC; - -webkit-text-shadow: 0px -1px 2px #CCCCCC; - -o-text-shadow: 0px -1px 2px #CCCCCC; - text-shadow: 0px -1px 2px #CCCCCC; + text-shadow: 0 -1px 2px #000000; + text-shadow: 0 -1px 2px #cccccc; + -moz-text-shadow: 0 -1px 2px #000000; + -webkit-text-shadow: 0 -1px 2px #000000; + -o-text-shadow: 0 -1px 2px #000000; + -moz-text-shadow: 0 -1px 2px #cccccc; + -webkit-text-shadow: 0 -1px 2px #cccccc; + -o-text-shadow: 0 -1px 2px #cccccc; } .detail-view .button.done:hover { - background-position: 0px -950px; + box-shadow: inset 0 1px 3px #000000; /*+box-shadow:inset 0px 1px 3px #000000;*/ - -moz-box-shadow: inset 0px 1px 3px #000000; - -webkit-box-shadow: inset 0px 1px 3px #000000; - -o-box-shadow: inset 0px 1px 3px #000000; - box-shadow: inset 0px 1px 3px #000000; + background-position: 0 -950px; + -moz-box-shadow: inset 0 1px 3px #000000; + -webkit-box-shadow: inset 0 1px 3px #000000; + -o-box-shadow: inset 0 1px 3px #000000; } .detail-view .button.cancel:hover { - background-position: 0px -834px; + background-position: 0 -834px; } div.group-multiple div.detail-group table { @@ -2090,52 +2048,52 @@ div.group-multiple div.detail-group table { } div.group-multiple div.detail-group table.header { - border: none; margin-top: 11px; + border: 0; } div.group-multiple div.detail-group table.header thead th { + border: 0; background: transparent; - border: none; } div.ui-tabs-panel table span.none { - color: #9D9D9D; + color: #9d9d9d; } div.detail-group td.view-all div.view-all { - width: auto; float: right; + width: auto; } div.detail-group td.view-all a { - font-size: 13px; display: block; - text-decoration: none; - color: #0373B7; - /*+text-shadow:0px 1px 2px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 2px #FFFFFF; - -webkit-text-shadow: 0px 1px 2px #FFFFFF; - -o-text-shadow: 0px 1px 2px #FFFFFF; - text-shadow: 0px 1px 2px #FFFFFF; float: left; + font-size: 13px; font-weight: 100; + /*+text-shadow:0px 1px 2px #FFFFFF;*/ + color: #0373b7; + text-decoration: none; + text-shadow: 0 1px 2px #ffffff; + -moz-text-shadow: 0 1px 2px #ffffff; + -webkit-text-shadow: 0 1px 2px #ffffff; + -o-text-shadow: 0 1px 2px #ffffff; } div.detail-group td.view-all:hover a { - background-position: 0px -566px; + background-position: 0 -566px; } div.detail-group td.view-all a span { /*+placement:shift -4px -1px;*/ position: relative; - left: -4px; top: -1px; + left: -4px; } div.detail-group td.view-all:hover a span { - text-decoration: underline; color: #000000; + text-decoration: underline; } div.detail-group td.view-all div.view-all div.end { @@ -2143,7 +2101,7 @@ div.detail-group td.view-all div.view-all div.end { float: left; width: 15px; height: 25px; - background: url(../images/sprites.png) -617px -398px; + background: url("../images/sprites.png") -617px -398px; } div.detail-group td.view-all:hover div.view-all div.end { @@ -2156,36 +2114,35 @@ div.details div.detail-group td.value select { } div.details div.detail-group td.value input, -div.details div.detail-group td.value input[type=checkbox] { +div.details div.detail-group td.value input[type='checkbox'] { float: left; width: 15px; margin-left: 10px; } div.details div.detail-group td.value input, -div.details div.detail-group td.value input[type=text] { +div.details div.detail-group td.value input[type='text'] { width: 93%; } div.details .main-groups label.error { position: absolute; - right: 10%; top: 6px; + right: 10%; } .detail-view td.view-all.multiple { - max-width: 145px; display: block; float: left; + max-width: 145px; height: 28px; margin-left: 0; text-align: left; } -/*** Actions*/ div.detail-group.actions { - padding: 0; margin: 0; + padding: 0; } div.detail-group.actions table { @@ -2197,15 +2154,15 @@ div.detail-group.actions tr { } div.detail-group.actions td { - height: 50px; vertical-align: middle; + height: 50px; } .details.group-multiple div.detail-group.actions { + position: relative; float: right; max-width: 75%; height: 23px; - position: relative; margin: -15px 0 -5px; } @@ -2214,26 +2171,26 @@ div.detail-group.actions td { } .details.group-multiple div.detail-group.actions td.detail-actions { - background: none; display: block; - height: 35px; float: right; - padding: 0; min-width: 120px; + height: 35px; + padding: 0; + background: none; } .details.group-multiple div.detail-group.actions .detail-actions .action { - float: left; - width: 32px; - /*+placement:shift 11px 7px;*/ position: relative; - left: 11px; + float: left; + /*+placement:shift 11px 7px;*/ top: 7px; + left: 11px; + width: 32px; } .details.group-multiple div.detail-group.actions .detail-actions .action a { - background: none; width: 31px; + background: none; } .detail-group table td.detail-actions { @@ -2242,48 +2199,48 @@ div.detail-group.actions td { .detail-group table td.detail-actions.full-length { display: block; - width: 99%; float: left; + width: 99%; } .detail-group table td.detail-actions .action.text { - padding: 0px 6px 0px 0px; - cursor: pointer; display: inline-block; float: right; margin-right: 8px; - border: 1px solid #C2C2C2; + padding: 0 6px 0 0; + border: 1px solid #c2c2c2; + border-radius: 4px; /*+border-radius:4px;*/ + background: url("../images/bg-gradients.png") repeat-x 0 -83px; + cursor: pointer; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - background: url(../images/bg-gradients.png) repeat-x 0px -83px; } .detail-group table td.detail-actions .action.text .label { - font-size: 12px; - /*+placement:shift -1px 8px;*/ position: relative; - left: -1px; + /*+placement:shift -1px 8px;*/ top: 8px; + left: -1px; + font-size: 12px; } .detail-group table td.detail-actions .action.text:hover { /*+box-shadow:inset 0px 1px 3px #171717;*/ - -moz-box-shadow: inset 0px 1px 3px #171717; - -webkit-box-shadow: inset 0px 1px 3px #171717; - -o-box-shadow: inset 0px 1px 3px #171717; - box-shadow: inset 0px 1px 3px #171717; + box-shadow: inset 0 1px 3px #171717; + -moz-box-shadow: inset 0 1px 3px #171717; + -webkit-box-shadow: inset 0 1px 3px #171717; + -o-box-shadow: inset 0 1px 3px #171717; } .detail-group table td.detail-actions a { display: block; float: left; - text-indent: -9999px; width: 30px; height: 25px; margin: 0; + text-indent: -9999px; } .detail-group table td.detail-actions a:hover { @@ -2291,8 +2248,8 @@ div.detail-group.actions td { } .detail-group table td.detail-actions div.action.first a { - background-position: -385px -11px; width: 32px; + background-position: -385px -11px; } .detail-group table td.detail-actions div.action.first a:hover { @@ -2300,8 +2257,8 @@ div.detail-group.actions td { } .detail-group table td.detail-actions div.action.last a { - background-position: -596px -11px; width: 30px; + background-position: -596px -11px; } .detail-group table td.detail-actions div.action.last a:hover { @@ -2323,90 +2280,80 @@ div.detail-group.actions td { } .detail-group table td.detail-actions a span.icon { - background-image: url(../images/sprites.png); - padding: 10px; display: block; + padding: 10px; + background-image: url("../images/sprites.png"); } -/*Header*/ #header { + position: relative; width: 100%; height: 135px; - background: url(../images/overlay-pattern.png) repeat 0, #1B5070 url(../images/header-gradient.png) no-repeat center; + background: url("../images/overlay-pattern.png") repeat 0, #1b5070 url("../images/header-gradient.png") no-repeat center; background-size: auto, cover; - position: relative; } #header div.button { font-size: 12px; - color: #FFFFFF; + color: #ffffff; cursor: pointer; } #header.nologo div.logo { + position: relative; + top: 15px; + left: 0; width: 1224px; + /*+placement:shift 0px 15px;*/ height: 47px; margin: auto; - background: url(../images/logo.png) no-repeat 0 center; - /*+placement:shift 0px 15px;*/ - position: relative; - left: 0px; - top: 15px; + background: url("../images/logo.png") no-repeat 0 center; } #header div.controls { + position: relative; width: 1226px; height: 48px; - position: relative; margin: 27px auto 0; padding-top: 13px; /*+border-radius:4px 4px 0 0;*/ + border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; -khtml-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; } #header div.controls.nologo { + box-shadow: 0 -1px 6px #0e3955; background: #666666; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZDNkM2QiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); - background: -moz-linear-gradient(top, #666666 0%, #3d3d3d 100%); + background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZDNkM2QiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+"); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #666666), color-stop(100%, #3d3d3d)); background: -webkit-linear-gradient(top, #666666 0%, #3d3d3d 100%); - background: -o-linear-gradient(top, #666666 0%, #3d3d3d 100%); - background: -ms-linear-gradient(top, #666666 0%, #3d3d3d 100%); background: linear-gradient(to bottom, #666666 0%, #3d3d3d 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#3d3d3d',GradientType=0 ); /*+box-shadow:0px -1px 6px #0E3955;*/ - -moz-box-shadow: 0px -1px 6px #0E3955; - -webkit-box-shadow: 0px -1px 6px #0E3955; - -o-box-shadow: 0px -1px 6px #0E3955; - box-shadow: 0px -1px 6px #0E3955; -} - -.button { - float: left; - background: url(../images/buttons.png) no-repeat; - cursor: pointer; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#3d3d3d', GradientType=0); + -moz-box-shadow: 0 -1px 6px #0e3955; + -webkit-box-shadow: 0 -1px 6px #0e3955; + -o-box-shadow: 0 -1px 6px #0e3955; } #header div.notifications { - background: transparent; + position: relative; float: right; + top: -57px; + left: -239px; + /*+placement:shift -174px -57px;*/ height: 18px; padding: 1px 0 0; - /*+placement:shift -174px -57px;*/ - position: relative; - left: -239px; - top: -57px; + background: transparent; } #header div.notifications:after { - content: "|"; + content: '|'; /*+placement:shift 28px 7px;*/ position: relative; - left: 28px; top: 7px; + left: 28px; } #header div.notifications span { @@ -2414,32 +2361,32 @@ div.detail-group.actions td { top: 5px; left: 7px; /*+text-shadow:0px -1px 1px #464646;*/ - -moz-text-shadow: 0px -1px 1px #464646; - -webkit-text-shadow: 0px -1px 1px #464646; - -o-text-shadow: 0px -1px 1px #464646; - text-shadow: 0px -1px 1px #464646; + text-shadow: 0 -1px 1px #464646; + -moz-text-shadow: 0 -1px 1px #464646; + -webkit-text-shadow: 0 -1px 1px #464646; + -o-text-shadow: 0 -1px 1px #464646; } #header div.notifications:hover { - color: #5FAAF7; + color: #5faaf7; } #header div.notifications div.total { + float: left; width: 22px; height: 19px; - float: left; margin: 3px; - background: url(../images/sprites.png) no-repeat -593px -870px; - color: #FFFFFF; + background: url("../images/sprites.png") no-repeat -593px -870px; font-size: 11px; + color: #ffffff; /*+text-shadow:0px -1px #6C7283;*/ - -moz-text-shadow: 0px -1px #6C7283; - -webkit-text-shadow: 0px -1px #6C7283; - -o-text-shadow: 0px -1px #6C7283; - text-shadow: 0px -1px #6C7283; - -moz-text-shadow: 0px -1px 0px #6C7283; - -webkit-text-shadow: 0px -1px 0px #6C7283; - -o-text-shadow: 0px -1px 0px #6C7283; + text-shadow: 0 -1px #6c7283; + -moz-text-shadow: 0 -1px #6c7283; + -webkit-text-shadow: 0 -1px #6c7283; + -o-text-shadow: 0 -1px #6c7283; + -moz-text-shadow: 0 -1px 0 #6c7283; + -webkit-text-shadow: 0 -1px 0 #6c7283; + -o-text-shadow: 0 -1px 0 #6c7283; } #header div.notifications div.total.pending { @@ -2449,69 +2396,93 @@ div.detail-group.actions td { #header div.notifications div.total span { /*+placement:shift 0px 3px;*/ - position: relative; - left: 0px; - top: 3px; - text-align: center; display: block; + position: relative; + top: 3px; + left: 0; width: 21px; font-size: 12px; + text-align: center; } #user { - height: 30px; - margin: 0; + display: inline-block; position: absolute; + float: left; top: -47px; left: 1025px; - cursor: default !important; - display: inline-block; - float: left; + height: 30px; + margin: 0; background: transparent; + cursor: default !important; } #user div.name { display: inline-block; float: left; - padding: 9px 18px 7px 12px; - border-right: none; - /*[empty]border-top:;*/ min-width: 110px; max-width: 220px; - text-align: center; + /*[empty]border-top:;*/ height: 12px; - overflow: hidden; - /*+text-shadow:0px -1px 1px #464646;*/ - -moz-text-shadow: 0px -1px 1px #464646; - -webkit-text-shadow: 0px -1px 1px #464646; - -o-text-shadow: 0px -1px 1px #464646; - text-shadow: 0px -1px 1px #464646; margin: 0; + padding: 9px 18px 7px 12px; + border-right: 0; + text-align: center; + /*+text-shadow:0px -1px 1px #464646;*/ + text-shadow: 0 -1px 1px #464646; + overflow: hidden; + -moz-text-shadow: 0 -1px 1px #464646; + -webkit-text-shadow: 0 -1px 1px #464646; + -o-text-shadow: 0 -1px 1px #464646; } #user div.options { + position: relative; float: left; + top: 0; + /*+placement:shift 0px 0px;*/ + left: 0; width: 31px; height: 28px; - /*+placement:shift 0px 0px;*/ - position: relative; - left: 0px; - top: 0px; - background-position: 0px -867px; + background-position: 0 -867px; cursor: pointer; } #user div.options .arrow { + position: relative; + top: 11px; + left: 8px; + /*+placement:shift 8px 11px;*/ width: 11px; height: 8px; - background: url(../images/buttons.png) -402px -23px; - /*+placement:shift 8px 11px;*/ - position: relative; - left: 8px; - top: 11px; + background: url("../images/buttons.png") -402px -23px; +} + +#user-options { + position: absolute; + z-index: 10000; + top: 30px; + width: 150px; + padding: 15px; + border-radius: 0 0 3px 3px; + /*+border-radius:0 0 3px 3px;*/ + box-shadow: 0 1px 7px #000000; + background: #ffffff; + -moz-border-radius: 0 0 3px 3px; + -webkit-border-radius: 0 0 3px 3px; + /*+box-shadow:0px 1px 7px #000000;*/ + -khtml-border-radius: 0 0 3px 3px; + -moz-box-shadow: 0 1px 7px #000000; + -webkit-box-shadow: 0 1px 7px #000000; + -o-box-shadow: 0 1px 7px #000000; +} + +#user-options a { + float: left; + width: 100%; + padding: 10px 0; } -/** Zone filter (mixed zone management)*/ #header .zone-filter { float: left; width: 111px; @@ -2521,47 +2492,43 @@ div.detail-group.actions td { #header .zone-filter label { position: absolute; top: -3px; - color: #FFFFFF; font-size: 11px; + color: #ffffff; } #header .zone-filter select { width: 100%; - font-size: 12px; + margin-top: 2px; border: 1px solid #000000; - border-bottom: #FFFFFF; + border-bottom: #ffffff; /*+border-radius:4px;*/ + border-radius: 4px; + background: #ececec; + font-size: 12px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - background: #ECECEC; - margin-top: 2px; } -/*Navigation*/ #navigation { - width: 230px; position: relative; float: left; + width: 230px; /*+box-shadow:inset -1px 4px 7px #DDDDDD;*/ - -moz-box-shadow: inset -1px 4px 7px #DDDDDD; - -webkit-box-shadow: inset -1px 4px 7px #DDDDDD; - -o-box-shadow: inset -1px 4px 7px #DDDDDD; - box-shadow: inset -1px 4px 7px #DDDDDD; - background: #EDE8E8; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYlIiBzdG9wLWNvbG9yPSIjZWRlOGU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); - background: -moz-linear-gradient(top, #ffffff 0%, #ede8e8 6%); + box-shadow: inset -1px 4px 7px #dddddd; + background: #ede8e8; + background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYlIiBzdG9wLWNvbG9yPSIjZWRlOGU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg=="); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(6%, #ede8e8)); background: -webkit-linear-gradient(top, #ffffff 0%, #ede8e8 6%); - background: -o-linear-gradient(top, #ffffff 0%, #ede8e8 6%); - background: -ms-linear-gradient(top, #ffffff 0%, #ede8e8 6%); background: linear-gradient(to bottom, #ffffff 0%, #ede8e8 6%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ede8e8',GradientType=0 ); + -moz-box-shadow: inset -1px 4px 7px #dddddd; + -webkit-box-shadow: inset -1px 4px 7px #dddddd; + -o-box-shadow: inset -1px 4px 7px #dddddd; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ede8e8', GradientType=0); } .project-view #navigation { - background: #6D747D; + background: #6d747d; } #navigation ul { @@ -2570,71 +2537,71 @@ div.detail-group.actions td { } .project-view #navigation ul { - border-right: 1px solid #464C53; - background: #6D747D; + border-right: 1px solid #464c53; + background: #6d747d; } #navigation ul li { height: 42px; + border-bottom: 1px solid #d2d2d2; cursor: pointer; - border-bottom: 1px solid #D2D2D2; } .project-view #navigation ul li { - background-image: url(../images/bg-nav-item-project-view.png); - background-position: 0px 0px; - border: none; + border: 0; + background-image: url("../images/bg-nav-item-project-view.png"); + background-position: 0 0; } .project-view #navigation ul li span { - color: #FFFFFF; + color: #ffffff; /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; + text-shadow: 0 1px 1px #000000; + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; } #navigation ul li:hover, #navigation ul li.active { width: 230px; - background: #2C5D7B; + box-shadow: inset 0 0 7px #000000; /*+box-shadow:inset 0px 0px 7px #000000;*/ - -moz-box-shadow: inset 0px 0px 7px #000000; - -webkit-box-shadow: inset 0px 0px 7px #000000; - -o-box-shadow: inset 0px 0px 7px #000000; - box-shadow: inset 0px 0px 7px #000000; + background: #2c5d7b; + -moz-box-shadow: inset 0 0 7px #000000; + -webkit-box-shadow: inset 0 0 7px #000000; + -o-box-shadow: inset 0 0 7px #000000; } #navigation ul li.disabled { /*+opacity:60%;*/ + opacity: 0.6; filter: alpha(opacity=60); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); -moz-opacity: 0.6; - opacity: 0.6; } .project-view #navigation ul li:hover, .project-view #navigation ul li.active { - background: url(../images/bg-nav-item-active-project-view.png); - background-position: 0px 0px; width: 230px; + background: url("../images/bg-nav-item-active-project-view.png"); + background-position: 0 0; } .project-view #navigation ul li.disabled:hover { - background: #D5D5D5; - color: #596D7F; + background: #d5d5d5; + color: #596d7f; cursor: default; } #navigation ul li:hover span, #navigation ul li.active span { - color: #FFFFFF; + color: #ffffff; /*+text-shadow:0px 1px #000000;*/ - -moz-text-shadow: 0px 1px #000000; - -webkit-text-shadow: 0px 1px #000000; - -o-text-shadow: 0px 1px #000000; - text-shadow: 0px 1px #000000; + text-shadow: 0 1px #000000; + -moz-text-shadow: 0 1px #000000; + -webkit-text-shadow: 0 1px #000000; + -o-text-shadow: 0 1px #000000; } #navigation ul li.disabled:hover { @@ -2642,15 +2609,15 @@ div.detail-group.actions td { } #navigation ul li.disabled:hover span { - color: #596D7F; + color: #596d7f; /*+text-shadow:0px 0px;*/ - -moz-text-shadow: 0px 0px; - -webkit-text-shadow: 0px 0px; - -o-text-shadow: 0px 0px; - text-shadow: 0px 0px; - -moz-text-shadow: 0px 0px none; - -webkit-text-shadow: 0px 0px none; - -o-text-shadow: 0px 0px none; + text-shadow: 0 0; + -moz-text-shadow: 0 0; + -webkit-text-shadow: 0 0; + -o-text-shadow: 0 0; + -moz-text-shadow: 0 0 none; + -webkit-text-shadow: 0 0 none; + -o-text-shadow: 0 0 none; -moz-text-shadow: none; -webkit-text-shadow: none; -o-text-shadow: none; @@ -2658,53 +2625,53 @@ div.detail-group.actions td { #navigation ul li.last { background-repeat: repeat; - background-position: 0px 0px; + background-position: 0 0; /*[empty]color:;*/ } #navigation ul li span { /*+placement:shift 14px 13px;*/ position: relative; - left: 14px; top: 13px; + left: 14px; + padding-left: 19px; font-size: 12px; color: #515151; - padding-left: 19px; /*+text-shadow:0px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px #FFFFFF; - -o-text-shadow: 0px 1px #FFFFFF; - text-shadow: 0px 1px #FFFFFF; + text-shadow: 0 1px #ffffff; + -moz-text-shadow: 0 1px #ffffff; + -webkit-text-shadow: 0 1px #ffffff; + -o-text-shadow: 0 1px #ffffff; } #navigation ul li span.icon { - background: url(../images/icons.png) no-repeat 0px 0px; - padding: 16px 16px 13px; - /*+placement:shift 17px 10px;*/ position: relative; - left: 17px; top: 10px; + /*+placement:shift 17px 10px;*/ + left: 17px; + padding: 16px 16px 13px; + background: url("../images/icons.png") no-repeat 0 0; } #navigation ul li.custom-icon span.icon { display: block; - width: 50px; - height: 50px; position: relative; float: left; + width: 50px; + height: 50px; margin-right: -47px; background: none; } #navigation ul li.custom-icon span.icon img { - width: 50px; - height: 50px; + position: relative; + position: absolute; float: left; /*+placement:shift -6px -17px;*/ - position: relative; - left: -6px; top: -17px; - position: absolute; + left: -6px; + width: 50px; + height: 50px; margin-right: -14px; } @@ -2731,7 +2698,7 @@ div.detail-group.actions td { } #navigation ul li.vmsnapshots span.icon { - background: url(../images/sprites.png) no-repeat -34px -666px; + background: url("../images/sprites.png") no-repeat -34px -666px; } #navigation ul li.affinityGroups span.icon { @@ -2798,13 +2765,13 @@ div.detail-group.actions td { } #navigation ul li.global-settings span.icon { - background-image: url(../images/sprites.png); + background-image: url("../images/sprites.png"); background-position: -143px -240px; } #navigation ul li.global-settings.active span.icon, #navigation ul li.global-settings:hover span.icon { - background-image: url(../images/sprites.png); + background-image: url("../images/sprites.png"); background-position: -366px -239px; } @@ -2845,25 +2812,24 @@ div.detail-group.actions td { } #navigation ul li.plugins span.icon { - background: url(../images/sprites.png) no-repeat -140px -291px; + background: url("../images/sprites.png") no-repeat -140px -291px; } #navigation ul li.regions span.icon { - background: url(../images/sprites.png) no-repeat -141px -379px; + background: url("../images/sprites.png") no-repeat -141px -379px; } #navigation ul li.regions.active span.icon, #navigation ul li.regions:hover span.icon { - background: url(../images/sprites.png) no-repeat -365px -377px; + background: url("../images/sprites.png") no-repeat -365px -377px; } -/*Browser*/ #browser { - width: 994px; - height: 100%; - max-width: 994px; position: relative; float: left; + width: 994px; + max-width: 994px; + height: 100%; overflow: hidden; } @@ -2873,42 +2839,42 @@ div.detail-group.actions td { #browser div.panel { height: 100%; - border-right: 1px solid #A5A5A5; + border-right: 1px solid #a5a5a5; + background-color: #f7f7f7; overflow: visible; - background-color: #F7F7F7; } #browser div.panel.panel-highlight-wrapper { display: inline-block; - background: none; + position: absolute; /*+border-radius:9px;*/ + z-index: 10000; + height: 542px; + margin-top: 7px; + padding: 78px 0 67px 51px; + border: 3px solid #ffffff; + /*+box-shadow:0px 0px 12px #000000;*/ + border-radius: 9px; + box-shadow: 0 0 12px #000000; + background: none; + overflow: hidden; -moz-border-radius: 9px; -webkit-border-radius: 9px; -khtml-border-radius: 9px; - border-radius: 9px; - margin-top: 7px; - /*+box-shadow:0px 0px 12px #000000;*/ - -moz-box-shadow: 0px 0px 12px #000000; - -webkit-box-shadow: 0px 0px 12px #000000; - -o-box-shadow: 0px 0px 12px #000000; - box-shadow: 0px 0px 12px #000000; - border: 3px solid #FFFFFF; - height: 542px; - overflow: hidden; - position: absolute; - z-index: 10000; - padding: 78px 0px 67px 51px; + -moz-box-shadow: 0 0 12px #000000; + -webkit-box-shadow: 0 0 12px #000000; + -o-box-shadow: 0 0 12px #000000; } #browser div.panel.panel-highlight-wrapper .panel { + top: 3px; left: 20px !important; height: 631px; overflow: hidden; - top: 3px; } .project-view #browser div.panel { - background: #6D747D; + background: #6d747d; } .ui-tabs div.ui-tabs-panel { @@ -2916,16 +2882,16 @@ div.detail-group.actions td { } .project-view .ui-tabs div.ui-tabs-panel { - background: #DBDDDF; + background: #dbdddf; } #browser div.panel .shadow { + position: absolute; + top: 0; + left: -10px; width: 10px; height: 100%; - top: 0px; - left: -10px; - position: absolute; - background: url(../images/bg-panel-shadow.png) repeat-y 0px 0px; + background: url("../images/bg-panel-shadow.png") repeat-y 0 0; } #browser.panel-highlight { @@ -2934,17 +2900,17 @@ div.detail-group.actions td { #browser.panel-highlight .panel.highlighted { /*+box-shadow:0px 10px 11px #5C5C5C;*/ - -moz-box-shadow: 0px 10px 11px #5C5C5C; - -webkit-box-shadow: 0px 10px 11px #5C5C5C; - -o-box-shadow: 0px 10px 11px #5C5C5C; - box-shadow: 0px 10px 11px #5C5C5C; - border: 5px solid #FFFFFF; + margin-top: 21px; + border: 5px solid #ffffff; + border-radius: 6px; + box-shadow: 0 10px 11px #5c5c5c; + -moz-box-shadow: 0 10px 11px #5c5c5c; /*+border-radius:6px;*/ + -webkit-box-shadow: 0 10px 11px #5c5c5c; + -o-box-shadow: 0 10px 11px #5c5c5c; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; - border-radius: 6px; - margin-top: 21px; } #browser.panel-highlight .panel > .shadow { @@ -2952,65 +2918,63 @@ div.detail-group.actions td { } #browser .highlight-arrow { - width: 24px; - height: 19px; - background: url(../images/sprites.png) -590px -1295px; position: absolute; top: -22px; left: 80px; + width: 24px; + height: 19px; + background: url("../images/sprites.png") -590px -1295px; } -/*Toolbar*/ -/*[clearfix]*/ div.toolbar { + position: relative; + position: absolute; + /*+box-shadow:0px 1px 4px #CFCFCF;*/ + z-index: 6; + top: -1px; + top: 0; + left: 0; + /*+placement:shift 0px -1px;*/ width: 100%; height: 32px; - /*+box-shadow:0px 1px 4px #CFCFCF;*/ - -moz-box-shadow: 0px 1px 4px #CFCFCF; - -webkit-box-shadow: 0px 1px 4px #CFCFCF; - -o-box-shadow: 0px 1px 4px #CFCFCF; - box-shadow: 0px 1px 4px #CFCFCF; - /*+placement:shift 0px -1px;*/ - position: relative; - left: 0px; - top: -1px; - z-index: 6; - position: absolute; - top: 0px; - background: #ECECEC 0px -6px; + box-shadow: 0 1px 4px #cfcfcf; + background: #ececec 0 -6px; + -moz-box-shadow: 0 1px 4px #cfcfcf; + -webkit-box-shadow: 0 1px 4px #cfcfcf; + -o-box-shadow: 0 1px 4px #cfcfcf; } .detail-view .ui-tabs-panel div.toolbar { width: 968px; - background: transparent; - border: none; margin-top: 8px; + border: 0; + background: transparent; } .project-view div.toolbar { - background: #808080 url(../images/bg-nav-item-active-project-view.png) 0px -210px; + background: #808080 url("../images/bg-nav-item-active-project-view.png") 0 -210px; } div.toolbar div.filters { - margin: 5px 0px 0 12px; + margin: 5px 0 0 12px; } div.toolbar div.filters label { - color: #3F3B3B; - font-size: 12px; - font-weight: 100; display: block; float: left; padding: 5px 11px 0 0; + font-size: 12px; + font-weight: 100; + color: #3f3b3b; } .project-view div.toolbar div.filters label { - color: #FFFFFF; + color: #ffffff; /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; + text-shadow: 0 1px 1px #000000; + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; } div.toolbar div.filters select { @@ -3019,56 +2983,56 @@ div.toolbar div.filters select { } div.toolbar div.text-search { - float: right; position: relative; + float: right; } div.toolbar div.text-search div.search-bar { + position: relative; + z-index: 4; float: left; width: 141px; height: 20px; margin: 5px 0 0 12px; - background: #FFFFFF; - border: 1px solid #8B7E7E; - z-index: 4; - position: relative; - border-right: 1px solid #8B8989; + border: 1px solid #8b7e7e; + border-right: 1px solid #8b8989; + border-radius: 4px 0 0 4px; /*+border-radius:4px 0 0 4px;*/ + background: #ffffff; -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px 0 0 4px; -khtml-border-radius: 4px 0 0 4px; - border-radius: 4px 0 0 4px; } div.toolbar div.text-search div.search-bar input { float: left; - border: none; - margin: 1px 0 0; width: 90%; height: 68%; + margin: 1px 0 0; + border: 0; } div.toolbar div.text-search div.search-bar div.filter { - background: #FFFFFF; + float: left; width: 74px; height: 15px; - float: left; + margin: 2px 0 0; + padding: 1px; + border-left: 1px solid #6d6d6d; + background: #ffffff; font-size: 12px; text-align: center; - border-left: 1px solid #6D6D6D; - margin: 2px 0 0px; - padding: 1px; } div.toolbar div.button.search { - background: url(../images/sprites.png) no-repeat -592px -328px; + position: relative; + z-index: 3; + top: 5px; + /*+placement:shift -10px 5px;*/ + left: -10px; width: 33px; height: 22px; - /*+placement:shift -10px 5px;*/ - position: relative; - left: -10px; - top: 5px; - z-index: 3; + background: url("../images/sprites.png") no-repeat -592px -328px; cursor: pointer; } @@ -3084,39 +3048,36 @@ div.toolbar div.button.main-action, .detail-group .button.add { /*+placement:shift 0px 5px;*/ position: relative; - left: 0px; + float: right; top: 5px; - background: #EAEAEA; + left: 0; + height: 12px; + margin: 0 10px 0 0; + padding: 5px 5px 5px 5px; + border: 1px solid #b7b7b7; + border-radius: 4px; + /*+text-shadow:0px 1px 1px #DEE5EA;*/ + border-radius: 4px 4px 4px 4px; + background: #eaeaea; + background: #f7f7f7; + background: #f7f7f7; + background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYWVhZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+"); + background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #f7f7f7), color-stop(100%, #eaeaea)); + background: -webkit-linear-gradient(top, #f7f7f7 1%, #eaeaea 100%); + background: linear-gradient(to bottom, #f7f7f7 1%, #eaeaea 100%); font-size: 12px; font-weight: 100; color: #000000; - margin: 0 10px 0 0; + text-shadow: 0 1px 1px #dee5ea; cursor: pointer; - /*+text-shadow:0px 1px 1px #DEE5EA;*/ - -moz-text-shadow: 0px 1px 1px #DEE5EA; - -webkit-text-shadow: 0px 1px 1px #DEE5EA; - -o-text-shadow: 0px 1px 1px #DEE5EA; - text-shadow: 0px 1px 1px #DEE5EA; - padding: 5px 5px 5px 5px; - background: #F7F7F7; - background: #f7f7f7; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYWVhZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); - background: -moz-linear-gradient(top, #f7f7f7 1%, #eaeaea 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #f7f7f7), color-stop(100%, #eaeaea)); - background: -webkit-linear-gradient(top, #f7f7f7 1%, #eaeaea 100%); - background: -o-linear-gradient(top, #f7f7f7 1%, #eaeaea 100%); - background: -ms-linear-gradient(top, #f7f7f7 1%, #eaeaea 100%); - background: linear-gradient(to bottom, #f7f7f7 1%, #eaeaea 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#eaeaea',GradientType=0 ); - border: 1px solid #B7B7B7; - float: right; + -moz-text-shadow: 0 1px 1px #dee5ea; /*+border-radius:4px;*/ + -webkit-text-shadow: 0 1px 1px #dee5ea; + -o-text-shadow: 0 1px 1px #dee5ea; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#eaeaea', GradientType=0); -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - height: 12px; } div.toolbar div.button.export:hover, @@ -3125,25 +3086,25 @@ div.toolbar div.button.refresh:hover, div.toolbar div.button.main-action:hover, .toolbar div.button.header-action:hover, .detail-group .button.add:hover { - background: #E5E5E5; + box-shadow: inset 0 0 5px #c3c3c3; /*+box-shadow:inset 0px 0px 5px #C3C3C3;*/ - -moz-box-shadow: inset 0px 0px 5px #C3C3C3; - -webkit-box-shadow: inset 0px 0px 5px #C3C3C3; - -o-box-shadow: inset 0px 0px 5px #C3C3C3; - box-shadow: inset 0px 0px 5px #C3C3C3; + background: #e5e5e5; + -moz-box-shadow: inset 0 0 5px #c3c3c3; + -webkit-box-shadow: inset 0 0 5px #c3c3c3; + -o-box-shadow: inset 0 0 5px #c3c3c3; } div.toolbar div.button.main-action span.icon { - background-image: url(../images/sprites.png); display: block; - cursor: pointer; - width: 34px; - height: 20px; - float: left; - /*+placement:shift 0px -7px;*/ position: relative; - left: 0px; + float: left; top: -7px; + left: 0; + width: 34px; + /*+placement:shift 0px -7px;*/ + height: 20px; + background-image: url("../images/sprites.png"); + cursor: pointer; } div.toolbar div.button.refresh { @@ -3152,92 +3113,95 @@ div.toolbar div.button.refresh { } div.toolbar div.button.refresh span { - background-image: url(../images/icons.png); padding: 1px 1px 1px 16px; - background-position: -629px -232px; + background-image: url("../images/icons.png"); background-repeat: no-repeat; + background-position: -629px -232px; } div.toolbar div.button.add span, .detail-group .button.add span.icon { - padding: 0px 0 3px 18px; - background: url(../images/icons.png) no-repeat -626px -209px; - /*+placement:shift 0px 0px;*/ position: relative; - left: 0px; - top: 0px; + top: 0; + /*+placement:shift 0px 0px;*/ + left: 0; + padding: 0 0 3px 18px; + background: url("../images/icons.png") no-repeat -626px -209px; } #browser div.panel.selected div.toolbar { - border-right: 1px solid #43586B; + border-right: 1px solid #43586b; +} + +#browser div.panel div.detail-view .toolbar { + width: 100%; } -/*** Advanced search*/ #advanced_search { - width: 15px; position: absolute; - left: 139px; - top: 4px; z-index: 4; + top: 4px; + left: 139px; + width: 15px; background: none; } #advanced_search .icon { /*+opacity:56%;*/ + opacity: 0.56; + position: absolute; + z-index: 10; + top: 1px; + left: -1px; + padding: 10px; + background: url("../images/sprites.png") no-repeat -62px -162px; filter: alpha(opacity=56); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=56); -moz-opacity: 0.56; - opacity: 0.56; - background: url(../images/sprites.png) no-repeat -62px -162px; - padding: 10px; - position: absolute; - top: 1px; - left: -1px; - z-index: 10; } #advanced_search:hover .icon { /*+opacity:100%;*/ + opacity: 1; filter: alpha(opacity=100); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); -moz-opacity: 1; - opacity: 1; } #advanced_search .form-container { /*+opacity:91%;*/ + opacity: 0.91; + display: inline-block; + position: absolute; + top: 2px; + /*+box-shadow:0px 5px 9px #B6B0B0;*/ + left: -290px; + padding: 18px; + border: 1px solid #808080; + border-radius: 0 0 4px 4px; + box-shadow: 0 5px 9px #b6b0b0; + /*+border-radius:0 0 4px 4px;*/ + background: #ffffff; + cursor: default; filter: alpha(opacity=91); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=91); -moz-opacity: 0.91; - opacity: 0.91; - /*+box-shadow:0px 5px 9px #B6B0B0;*/ - -moz-box-shadow: 0px 5px 9px #B6B0B0; - -webkit-box-shadow: 0px 5px 9px #B6B0B0; - -o-box-shadow: 0px 5px 9px #B6B0B0; - box-shadow: 0px 5px 9px #B6B0B0; - border: 1px solid #808080; - /*+border-radius:0 0 4px 4px;*/ + -moz-box-shadow: 0 5px 9px #b6b0b0; + -webkit-box-shadow: 0 5px 9px #b6b0b0; + -o-box-shadow: 0 5px 9px #b6b0b0; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; -khtml-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; - left: -290px; - top: 2px; - position: absolute; - display: inline-block; - background: #FFFFFF; - padding: 18px; - cursor: default; } #advanced_search .form-container .name { - width: 66px; float: left; + width: 66px; } #advanced_search .form-container .value { - width: 186px; float: left; + width: 186px; } #advanced_search .form-container .form-item { @@ -3252,63 +3216,62 @@ div.toolbar div.button.add span, padding: 3px; } -#advanced_search input[type=submit] { +#advanced_search input[type='submit'] { float: right; - background: url(../images/bg-gradients.png) 0px -220px; + padding: 8px 20px; /*+box-shadow:0px 2px 5px #858585;*/ - -moz-box-shadow: 0px 2px 5px #858585; - -webkit-box-shadow: 0px 2px 5px #858585; - -o-box-shadow: 0px 2px 5px #858585; - box-shadow: 0px 2px 5px #858585; border: 1px solid #606060; - border-top: none; - color: #FFFFFF; + border-top: 0; + border-radius: 4px; + box-shadow: 0 2px 5px #858585; + background: url("../images/bg-gradients.png") 0 -220px; font-size: 12px; font-weight: bold; + color: #ffffff; + text-shadow: 0 1px 1px #000000; /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; + cursor: pointer; + -moz-box-shadow: 0 2px 5px #858585; + -webkit-box-shadow: 0 2px 5px #858585; + -o-box-shadow: 0 2px 5px #858585; /*+border-radius:4px;*/ + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - cursor: pointer; - padding: 8px 20px; } -#advanced_search input[type=submit]:hover { +#advanced_search input[type='submit']:hover { /*+box-shadow:inset 0px 2px 3px #000000;*/ - -moz-box-shadow: inset 0px 2px 3px #000000; - -webkit-box-shadow: inset 0px 2px 3px #000000; - -o-box-shadow: inset 0px 2px 3px #000000; - box-shadow: inset 0px 2px 3px #000000; + box-shadow: inset 0 2px 3px #000000; + -moz-box-shadow: inset 0 2px 3px #000000; + -webkit-box-shadow: inset 0 2px 3px #000000; + -o-box-shadow: inset 0 2px 3px #000000; } #advanced_search .button.cancel { - background: url(noen); - color: #9A9A9A; - font-size: 12px; - float: right; - /*+placement:shift -32px 13px;*/ position: relative; - left: -32px; + float: right; top: 13px; + left: -32px; + /*+placement:shift -32px 13px;*/ + background: url("noen"); + font-size: 12px; font-weight: bold; + color: #9a9a9a; } #advanced_search .button.cancel:hover { color: #494949; } -/*** Panel controls*/ #browser div.panel div.toolbar div.panel-controls { + display: none; float: right; width: 42px; height: 23px; - display: none; } #browser div.panel.reduced div.toolbar div.panel-controls { @@ -3322,12 +3285,12 @@ div.toolbar div.button.add span, } #browser div.panel div.toolbar div.panel-controls div.control { + float: right; width: 25px; height: 26px; - background: url(../images/buttons.png) no-repeat -599px -335px; - float: right; - cursor: pointer; margin-right: 6px; + background: url("../images/buttons.png") no-repeat -599px -335px; + cursor: pointer; } #browser div.panel.maximized.single div.toolbar div.panel-controls div.control { @@ -3346,11 +3309,10 @@ div.toolbar div.button.add span, background-position: -617px -308px; } -/*** Section switcher*/ div.panel div.toolbar div.section-switcher { + float: left; margin-top: 6px; margin-left: 10px; - float: left; } #browser div.panel.maximize-if-selected.selected div.toolbar div.panel-controls div.control { @@ -3363,69 +3325,73 @@ div.toolbar div.section-switcher div.section-select { font-weight: 100; } +div.list-view div.toolbar div.section-switcher div.section-select label { + margin: 0 9px 0 0; +} + div.toolbar div.section-switcher div.section { float: left; - font-size: 11px; - font-weight: bold; - /*+border-radius:10px;*/ - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - -khtml-border-radius: 10px; border-radius: 10px; border-radius: 10px 10px 10px 10px; + /*+border-radius:10px;*/ + font-size: 11px; + font-weight: bold; + text-shadow: 0 1px 1px #ededed; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; /*+text-shadow:0px 1px 1px #EDEDED;*/ - -moz-text-shadow: 0px 1px 1px #EDEDED; - -webkit-text-shadow: 0px 1px 1px #EDEDED; - -o-text-shadow: 0px 1px 1px #EDEDED; - text-shadow: 0px 1px 1px #EDEDED; + -khtml-border-radius: 10px; + -moz-text-shadow: 0 1px 1px #ededed; + -webkit-text-shadow: 0 1px 1px #ededed; + -o-text-shadow: 0 1px 1px #ededed; } div.toolbar div.section-switcher div.section a { - background: url(../images/bg-section-switcher.png) repeat-x 0px -22px; - text-decoration: none; display: block; - color: #516374; padding: 5px 10px 3px; - border: 1px solid #979FA4; + border: 1px solid #979fa4; + background: url("../images/bg-section-switcher.png") repeat-x 0 -22px; + color: #516374; + text-decoration: none; } div.toolbar div.section-switcher div.section a.active { - background: url(../images/bg-section-switcher.png) repeat-x 0px -21px; - background-position: 0px 0px; - border: none; - border-bottom: 1px solid #CCD1D4; - padding-bottom: 2px; padding-top: 6px; + padding-bottom: 2px; + border: 0; + border-bottom: 1px solid #ccd1d4; + box-shadow: inset 0 1px 5px #546874; + background: url("../images/bg-section-switcher.png") repeat-x 0 -21px; /*+box-shadow:inset 0px 1px 5px #546874;*/ - -moz-box-shadow: inset 0px 1px 5px #546874; - -webkit-box-shadow: inset 0px 1px 5px #546874; - -o-box-shadow: inset 0px 1px 5px #546874; - box-shadow: inset 0px 1px 5px #546874; + background-position: 0 0; + -moz-box-shadow: inset 0 1px 5px #546874; + -webkit-box-shadow: inset 0 1px 5px #546874; + -o-box-shadow: inset 0 1px 5px #546874; } div.toolbar div.section-switcher div.section.first a { /*+border-radius:4px 0 0 5px;*/ + border-radius: 4px 0 0 5px; -moz-border-radius: 4px 0 0 5px; -webkit-border-radius: 4px 0 0 5px; -khtml-border-radius: 4px 0 0 5px; - border-radius: 4px 0 0 5px; } div.toolbar div.section-switcher div.section.last a { /*+border-radius:0 4px 4px 0px;*/ - -moz-border-radius: 0 4px 4px 0px; - -webkit-border-radius: 0 4px 4px 0px; - -khtml-border-radius: 0 4px 4px 0px; - border-radius: 0 4px 4px 0px; + border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + -webkit-border-radius: 0 4px 4px 0; + -khtml-border-radius: 0 4px 4px 0; } div.toolbar div.section-switcher div.section.first.last a { /*+border-radius:5px;*/ + border-radius: 5px; + border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; - border-radius: 5px; - border-radius: 5px 5px 5px 5px; } div.toolbar div.section-switcher div.section-select { @@ -3440,14 +3406,14 @@ div.toolbar div.section-switcher div.section-select { div.toolbar div.section-switcher div.section-select select { height: 21px; margin-right: 13px; - font-size: 12px; border: 1px solid #808080; + border-radius: 4px; /*+border-radius:4px;*/ + border-radius: 4px 4px 4px 4px; + font-size: 12px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; } div.toolbar div.section-switcher div.section-select label { @@ -3455,60 +3421,59 @@ div.toolbar div.section-switcher div.section-select label { } .project-view div.list-view div.toolbar div.section-switcher div.section-select label { - color: #FFFFFF; + color: #ffffff; /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; + text-shadow: 0 1px 1px #000000; + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; } -/*Breadcrumbs*/ div.toolbar div.filters { - margin: 5px 0px 0 12px; - width: 200px; float: left; + width: 200px; + margin: 5px 0 0 12px; } div.toolbar div.filters select { width: 104px; height: 21px; - font-size: 12px; - border: 1px solid #808080; + margin: 1px 0 0; + padding: 0 0 0; /*+border-radius:4px;*/ + border: 1px solid #808080; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + font-size: 12px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - padding: 0px 0 0; - margin: 1px 0 0; } #breadcrumbs { + width: 100%; height: 29px; max-height: 29px; - background: #FFFFFF; + background: #ffffff; overflow: hidden; - width: 100%; } .project-view #breadcrumbs { - background-image: url(../images/bg-breadcrumbs-project-view.png); - background-position: 0px 1px; background-color: #828282; + background-image: url("../images/bg-breadcrumbs-project-view.png"); + background-position: 0 1px; } #breadcrumbs div.home { - width: auto; - height: 23px; + position: relative; + z-index: 5; float: left; /*+placement:shift -1px 0px;*/ - position: relative; + top: 0; left: -1px; - top: 0px; + width: auto; + height: 23px; cursor: pointer; - z-index: 5; } .project-view #breadcrumbs div.home { @@ -3522,33 +3487,33 @@ div.toolbar div.filters select { #breadcrumbs ul li, #breadcrumbs div.active-project, #breadcrumbs .home { - height: 21px; + position: relative; + position: relative; float: left; - font-size: 13px; - color: #FFFFFF; - padding: 9px 5px 0px 0px; - cursor: pointer; - /*+placement:shift -13px 0px;*/ - position: relative; + top: 0; left: -13px; - top: 0px; - position: relative; + height: 21px; + /*+placement:shift -13px 0px;*/ margin: 0 0 0 2px; + padding: 9px 5px 0 0; + font-size: 13px; + color: #ffffff; + cursor: pointer; } #breadcrumbs ul li:after, #breadcrumbs .home:after { - content: ">"; - font-size: 11px; - /*+placement:shift 7px -1px;*/ + content: '>'; position: relative; - left: 7px; + /*+placement:shift 7px -1px;*/ top: -1px; - color: #C4C4C4; + left: 7px; + font-size: 11px; + color: #c4c4c4; } .project-view #breadcrumbs ul li { - color: #FFFFFF !important; + color: #ffffff !important; } #breadcrumbs ul li, @@ -3556,10 +3521,10 @@ div.toolbar div.filters select { #breadcrumbs .home { /*+placement:shift 0px 0px;*/ position: relative; - left: 0px; - top: 0px; - color: #63A9F1; - padding: 9px 5px 0px 8px; + top: 0; + left: 0; + padding: 9px 5px 0 8px; + color: #63a9f1; } #breadcrumbs ul li:hover, @@ -3571,36 +3536,35 @@ div.toolbar div.filters select { /*NOTE: End divs are not displayed per UI changes*/ #breadcrumbs ul div.end { /*+placement:shift -37px -1px;*/ - position: relative; - left: -37px; - top: -1px; - margin-right: 0px; - /*Disabled*/ display: none; + position: relative; + top: -1px; + left: -37px; + /*Disabled*/ + margin-right: 0; } #breadcrumbs ul li { position: relative; /*+placement:shift -36px 0px;*/ - top: 0px; + top: 0; font-size: 13px; } #breadcrumbs div.active-project { + display: none; z-index: 2; text-indent: 9px; - display: none; } -/*Group View*/ div.panel div.view.group-thumbnail ul.groups li { + position: relative; float: left; width: 142px; height: 80px; - background: url(../images/buttons.png) no-repeat -1px -399px; margin: 16px -1px -5px 16px; + background: url("../images/buttons.png") no-repeat -1px -399px; cursor: pointer; - position: relative; } div.panel div.view.group-thumbnail ul.groups li.active { @@ -3620,34 +3584,33 @@ div.panel div.view.group-thumbnail ul.groups li.new.drop-hover { } div.panel div.view.group-thumbnail ul.groups li span.name { - font-size: 12px; - color: #49596B; - /*+placement:shift 9px 7px;*/ position: relative; - left: 9px; + position: absolute; + /*+placement:shift 9px 7px;*/ top: 7px; + left: 9px; + font-size: 12px; font-weight: bold; /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - position: absolute; + color: #49596b; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; } div.panel div.view.group-thumbnail ul.groups li span.vm-count { - font-size: 21px; + position: absolute; /*+placement:displace 54px 27px;*/ position: absolute; - margin-left: 54px; margin-top: 27px; - position: absolute; - color: #3A4857; + margin-left: 54px; + font-size: 21px; + color: #3a4857; } -/*Reduced view*/ #browser div.panel.reduced .reduced-hide { - color: #BBB8B8; + color: #bbb8b8; } #browser div.panel.reduced div.toolbar .reduced-hide { @@ -3656,27 +3619,27 @@ div.panel div.view.group-thumbnail ul.groups li span.vm-count { /*List view -- edit field*/ div.view table td.editable div.edit { + position: relative; + top: 0; + /*+placement:shift 6px 0px;*/ + left: 6px; width: 106%; height: 20px; - /*+placement:shift 6px 0px;*/ - position: relative; - left: 6px; - top: 0px; } div.view table td.truncated.editable div.edit { top: 1px; - width: 285px; left: 1px; + width: 285px; } div.view table td.editable div.edit input { + position: relative; + z-index: 1; float: left; width: 66%; height: 17px; - border: none; - position: relative; - z-index: 1; + border: 0; } .detail-view div.view table td.editable div.edit { @@ -3684,15 +3647,15 @@ div.view table td.editable div.edit input { } div.view table td.editable div.action { - float: left; - width: 16px; - height: 19px; - background: #FFFFFF url(../images/buttons.png) -614px -684px; - padding-left: 2px; - /*+placement:shift -2px 0px;*/ position: relative; + float: left; + top: 0; left: -2px; - top: 0px; + width: 16px; + /*+placement:shift -2px 0px;*/ + height: 19px; + padding-left: 2px; + background: #ffffff url("../images/buttons.png") -614px -684px; cursor: pointer; } @@ -3704,13 +3667,12 @@ div.view table td.editable div.action.cancel { background-position: -628px -684px; } -/*** Actions*/ table td.actions { - cursor: default; - /*Make fixed*/ width: 200px; + /*Make fixed*/ min-width: 200px; max-width: 200px; + cursor: default; } table td.actions span { @@ -3718,48 +3680,48 @@ table td.actions span { } table td.actions .action span.icon { - background-image: url(../images/sprites.png); - cursor: pointer; + float: left; width: 23px; height: 21px; - float: left; + background-image: url("../images/sprites.png"); + cursor: pointer; } table td.actions .action.disabled .icon { - cursor: not-allowed; + opacity: 0.2; /*+opacity:20%;*/ + cursor: not-allowed; filter: alpha(opacity=20); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); -moz-opacity: 0.2; - opacity: 0.2; } table tr.odd td.actions .action.disabled .icon { - background-color: #F2F0F0; + background-color: #f2f0f0; } table tr.even td.actions .action.disabled .icon { - background-color: #DFE1E3; + background-color: #dfe1e3; } table tr td.actions .action.text { - cursor: pointer; display: inline-block; - border: 1px solid #C2C2C2; + border: 1px solid #c2c2c2; + border-radius: 4px; /*+border-radius:4px;*/ + background: url("../images/bg-gradients.png") repeat-x 0 -83px; + cursor: pointer; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - background: url(../images/bg-gradients.png) repeat-x 0px -83px; } table tr td.actions .action.text:hover { /*+box-shadow:inset 0px 1px 3px #171717;*/ - -moz-box-shadow: inset 0px 1px 3px #171717; - -webkit-box-shadow: inset 0px 1px 3px #171717; - -o-box-shadow: inset 0px 1px 3px #171717; - box-shadow: inset 0px 1px 3px #171717; + box-shadow: inset 0 1px 3px #171717; + -moz-box-shadow: inset 0 1px 3px #171717; + -webkit-box-shadow: inset 0 1px 3px #171717; + -o-box-shadow: inset 0 1px 3px #171717; } table tr td.actions .action.text .label { @@ -3771,21 +3733,19 @@ table tr td.actions .action.text .icon { } table tr.selected td.actions .action.disabled .icon { - background-color: #CBDDF3; + background-color: #cbddf3; } -/*** Action icons -Dialogs*/ .ui-dialog { - background: #FFFFFF; - text-align: left; - /*+box-shadow:0px -4px 15px #4C4A4A;*/ - -moz-box-shadow: 0px -4px 15px #4C4A4A; - -webkit-box-shadow: 0px -4px 15px #4C4A4A; - -o-box-shadow: 0px -4px 15px #4C4A4A; - box-shadow: 0px -4px 15px #4C4A4A; position: absolute; padding: 15px; + /*+box-shadow:0px -4px 15px #4C4A4A;*/ + box-shadow: 0 -4px 15px #4c4a4a; + background: #ffffff; + text-align: left; + -moz-box-shadow: 0 -4px 15px #4c4a4a; + -webkit-box-shadow: 0 -4px 15px #4c4a4a; + -o-box-shadow: 0 -4px 15px #4c4a4a; } .ui-dialog.ui-corner-all { @@ -3793,31 +3753,31 @@ Dialogs*/ } .ui-dialog .ui-widget-content { + display: inline-block; padding: 8px 0 8px 8px; text-align: center; - display: inline-block; } .ui-dialog .ui-widget-content .nothing-to-select { width: 386px; - line-height: 21px; - text-align: left; - font-size: 16px; - color: #3D3D3D; - padding: 4px 25px 180px 28px; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - background: #FFFFFF; margin: 57px 0 0; + padding: 4px 25px 180px 28px; + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + background: #ffffff; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + font-size: 16px; + line-height: 21px; + color: #3d3d3d; + text-align: left; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; /*+border-radius:10px;*/ + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; - border-radius: 10px; - border-radius: 10px 10px 10px 10px; } .ui-dialog .ui-widget-content .nothing-to-select p { @@ -3827,8 +3787,8 @@ Dialogs*/ .ui-dialog .ui-widget-content .nothing-to-select .specify-ip { margin-top: 28px; padding-top: 21px; + border-top: 1px solid #dfdfdf; font-size: 12px; - border-top: 1px solid #DFDFDF; } .ui-dialog-buttonset { @@ -3838,19 +3798,19 @@ Dialogs*/ .ui-dialog .ui-button { display: block; - cursor: pointer; float: left; width: 110px; height: 31px; - border: none; - background: url(../images/gradients.png) -2px -481px; - border: 1px solid #BFBCBC; + border: 0; + border: 1px solid #bfbcbc; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; /*+border-radius:4px;*/ + background: url("../images/gradients.png") -2px -481px; + cursor: pointer; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; } .ui-dialog .ui-button:hover { @@ -3858,42 +3818,42 @@ Dialogs*/ } .ui-dialog.notice .close.ui-button { - background: transparent; display: inline; - padding: 0; float: right; + padding: 0; + background: transparent; color: #516374; /*+text-shadow:0px -1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px -1px 1px #FFFFFF; - -webkit-text-shadow: 0px -1px 1px #FFFFFF; - -o-text-shadow: 0px -1px 1px #FFFFFF; - text-shadow: 0px -1px 1px #FFFFFF; + text-shadow: 0 -1px 1px #ffffff; + -moz-text-shadow: 0 -1px 1px #ffffff; + -webkit-text-shadow: 0 -1px 1px #ffffff; + -o-text-shadow: 0 -1px 1px #ffffff; } .ui-dialog .ui-button.ok { - background-position: 0px -317px; - border: 1px solid #0065C5; - color: #FFFFFF; + border: 1px solid #0065c5; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; /*+text-shadow:0px -1px 1px #011238;*/ - -moz-text-shadow: 0px -1px 1px #011238; - -webkit-text-shadow: 0px -1px 1px #011238; - -o-text-shadow: 0px -1px 1px #011238; - text-shadow: 0px -1px 1px #011238; + background-position: 0 -317px; + color: #ffffff; + text-shadow: 0 -1px 1px #011238; + -moz-text-shadow: 0 -1px 1px #011238; /*+border-radius:4px;*/ + -webkit-text-shadow: 0 -1px 1px #011238; + -o-text-shadow: 0 -1px 1px #011238; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; } .ui-dialog .ui-button.ok:hover { + border: 1px solid #004ff7; background-position: -3px -368px; - border: 1px solid #004FF7; } .ui-dialog.confirm .ui-button { - margin-top: 0px; + margin-top: 0; margin-left: 11px; } @@ -3903,20 +3863,20 @@ Dialogs*/ .ui-dialog span.message { display: block; - text-align: center; - color: #445361; - font-size: 14px; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; padding-bottom: 40px; + font-size: 14px; + color: #445361; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + text-align: center; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; } .ui-dialog span.message ul { - margin-left: 30px; margin-top: 14px; + margin-left: 30px; text-align: left; list-style: disc; } @@ -3926,24 +3886,24 @@ Dialogs*/ } .ui-dialog span.message p { - text-align: left; margin-top: 20px; + text-align: left; } .ui-dialog-titlebar { - background: #FFFFFF; - color: #000000; height: 33px; + margin: auto; + border-radius: 7px 7px 0 0; /*+border-radius:7px 7px 0 0;*/ + background: #ffffff; + color: #000000; -moz-border-radius: 7px 7px 0 0; -webkit-border-radius: 7px 7px 0 0; -khtml-border-radius: 7px 7px 0 0; - border-radius: 7px 7px 0 0; - margin: auto; } .ui-dialog-titlebar.ui-widget-header { - border: none; + border: 0; font-weight: inherit; } @@ -3954,48 +3914,47 @@ Dialogs*/ .ui-dialog-title { /*+placement:shift 8px 9px;*/ position: relative; - left: 8px; top: 9px; - font-size: 14px; + left: 8px; padding: 2px 0 5px 30px; - background: url(../images/icons.png) no-repeat 0px -255px; + background: url("../images/icons.png") no-repeat 0 -255px; + font-size: 14px; } .notice .ui-dialog-title { - background-position: 0px -288px; + background-position: 0 -288px; } .ui-dialog.confirm .ui-dialog-title { - background: url(../images/icons.png) no-repeat 0px -224px; + background: url("../images/icons.png") no-repeat 0 -224px; } .ui-dialog.create-form .ui-dialog-title { - background: url(../images/icons.png) no-repeat 0px -255px; + background: url("../images/icons.png") no-repeat 0 -255px; } .ui-dialog.warning .ui-dialog-title { - background: url(../images/icons.png) no-repeat 0px -286px; + background: url("../images/icons.png") no-repeat 0 -286px; } .ui-dialog.confirm .ui-button { /*+placement:shift 0px -8px;*/ position: relative; - left: 0px; top: -8px; + left: 0; } -/*** Create form*/ .ui-dialog div.form-container { + display: inline-block; width: 94% !important; height: 106px; text-align: left; - display: inline-block; } .ui-dialog div.form-container span.message { - text-align: left; padding: 0 0 23px 5px; font-size: 15px; + text-align: left; } .ui-dialog div.form-container span.message br { @@ -4003,8 +3962,8 @@ Dialogs*/ } .ui-dialog div.form-container div.form-item { - width: 100%; display: inline-block; + width: 100%; margin: 0 0 12px; } @@ -4012,70 +3971,70 @@ Dialogs*/ float: left; clear: both; width: 115px; - font-size: 15px; - color: #485867; - /*+text-shadow:0px 2px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 2px 1px #FFFFFF; - -webkit-text-shadow: 0px 2px 1px #FFFFFF; - -o-text-shadow: 0px 2px 1px #FFFFFF; - text-shadow: 0px 2px 1px #FFFFFF; margin: 3px 0 0; + font-size: 15px; + /*+text-shadow:0px 2px 1px #FFFFFF;*/ + color: #485867; + text-shadow: 0 2px 1px #ffffff; + -moz-text-shadow: 0 2px 1px #ffffff; + -webkit-text-shadow: 0 2px 1px #ffffff; + -o-text-shadow: 0 2px 1px #ffffff; } .ui-dialog div.form-container div.name label { display: block; width: 119px; - text-align: right; - font-size: 13px; margin-top: 2px; + font-size: 13px; + text-align: right; } .field-required { - color: #EE7B7B; - font-size: 14px; padding: 0 3px 0 0; + font-size: 14px; font-weight: bold; + color: #ee7b7b; } .ui-dialog div.form-container div.value { - width: 61%; - float: left; - margin: 0 0 0 15px; display: inline-block; + float: left; + width: 61%; + margin: 0 0 0 15px; } .ui-dialog div.form-container div.value input, textarea { - width: 98%; - font-size: 14px; - padding: 4px; - background: #F6F6F6; - border: 1px solid #AFAFAF; float: left; + width: 98%; + padding: 4px; + border: 1px solid #afafaf; + background: #f6f6f6; + font-size: 14px; } .ui-dialog div.form-container div.value label { display: block; width: 119px; - text-align: left; - font-size: 13px; margin-top: 2px; margin-left: -10px; + font-size: 13px; + text-align: left; } .ui-dialog div.form-container div.value input.hasDatepicker { - color: #2F5D86; - cursor: pointer; font-size: 13px; + color: #2f5d86; text-indent: 3px; + cursor: pointer; } .ui-dialog div.form-container div.value input.hasDatepicker:hover { /*+box-shadow:inset 0px 0px 3px;*/ - -moz-box-shadow: inset 0px 0px 3px; - -webkit-box-shadow: inset 0px 0px 3px; - -o-box-shadow: inset 0px 0px 3px; - box-shadow: inset 0px 0px 3px; + box-shadow: inset 0 0 3px; + -moz-box-shadow: inset 0 0 3px; + -webkit-box-shadow: inset 0 0 3px; + -o-box-shadow: inset 0 0 3px; } .ui-dialog div.form-container div.value .range-edit { @@ -4085,10 +4044,10 @@ textarea { } .ui-dialog div.form-container div.value .range-edit .range-item { - width: 124px; - height: 32px; position: relative; float: left; + width: 124px; + height: 32px; } .ui-dialog div.form-container div.value .range-edit input { @@ -4098,60 +4057,60 @@ textarea { .ui-dialog div.form-container div.value .range-edit label.error { position: absolute; - left: 3px; top: 25px; + left: 3px; } .ui-dialog div.form-container div.value select { - width: 100%; float: right; + width: 100%; } -.ui-dialog div.form-container div.value input[type=checkbox] { +.ui-dialog div.form-container div.value input[type='checkbox'] { width: 14px; } .ui-dialog div.form-container div.value label.error { display: block; + display: none; clear: both; font-size: 10px; - color: #FA0000; - display: none; + color: #fa0000; } .ui-dialog div.form-container div.multi-array { display: inline-block; - background: #FFFFFF; padding: 4px; + border: 1px solid #808080; /*+border-radius:10px;*/ - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - -khtml-border-radius: 10px; border-radius: 10px; border-radius: 10px 10px 10px 10px; - border: 1px solid #808080; + box-shadow: inset 0 1px 1px #929292; + background: #ffffff; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; /*+box-shadow:inset 0px 1px 1px #929292;*/ - -moz-box-shadow: inset 0px 1px 1px #929292; - -webkit-box-shadow: inset 0px 1px 1px #929292; - -o-box-shadow: inset 0px 1px 1px #929292; - box-shadow: inset 0px 1px 1px #929292; + -khtml-border-radius: 10px; + -moz-box-shadow: inset 0 1px 1px #929292; + -webkit-box-shadow: inset 0 1px 1px #929292; + -o-box-shadow: inset 0 1px 1px #929292; } .ui-dialog div.form-container div.multi-array .item { - width: 111px; float: left; + width: 111px; margin: 0 0 13px; } .ui-dialog div.form-container div.multi-array .item .name { - font-size: 11px; - width: 61px; float: left; + width: 61px; + font-size: 11px; } .ui-dialog div.form-container div.multi-array .item .value { - width: 13px; float: left; + width: 13px; } .ui-dialog div.form-container div.multi-array .item .value input { @@ -4165,44 +4124,43 @@ textarea { } .ui-dialog.create-form .ui-button.ok { - margin-left: 0; float: right; + margin-left: 0; } .ui-dialog.create-form .ui-button.cancel { - background: #B6B6B6 url(../images/gradients.png) 0px -480px; float: right; margin-right: 13px; - border: 1px solid #AAAAAA; + border: 1px solid #aaaaaa; + border-radius: 4px; /*+border-radius:4px;*/ + border-radius: 4px 4px 4px 4px; + background: #b6b6b6 url("../images/gradients.png") 0 -480px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; } .ui-dialog.create-form .ui-button.cancel:hover { - background-position: -4px -426px; border-color: #878787; + background-position: -4px -426px; } -/**** Dynamic input*/ .ui-dialog div.form-container div.value .dynamic-input { - background: #FFFFFF; + clear: both; width: calc(100% + 4px); min-height: 50px; - clear: both; max-height: 211px; + border: 1px solid #cdcdcd; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: #ffffff; + /*+border-radius:4px;*/ overflow: auto; overflow-x: hidden; - border: 1px solid #CDCDCD; - /*+border-radius:4px;*/ -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; } .ui-dialog div.form-container div.value .dynamic-input .form-item { @@ -4216,60 +4174,32 @@ textarea { .ui-dialog div.form-container div.value .dynamic-input .name label { width: inherit; - font-size: 12px; margin-left: 0; + font-size: 12px; } .ui-dialog div.form-container div.value .dynamic-input .value { width: 40%; } -/*User options*/ -#user-options { - background: #FFFFFF; - z-index: 10000; - width: 150px; - position: absolute; - padding: 15px; - top: 30px; - /*+border-radius:0 0 3px 3px;*/ - -moz-border-radius: 0 0 3px 3px; - -webkit-border-radius: 0 0 3px 3px; - -khtml-border-radius: 0 0 3px 3px; - border-radius: 0 0 3px 3px; - /*+box-shadow:0px 1px 7px #000000;*/ - -moz-box-shadow: 0px 1px 7px #000000; - -webkit-box-shadow: 0px 1px 7px #000000; - -o-box-shadow: 0px 1px 7px #000000; - box-shadow: 0px 1px 7px #000000; -} - -#user-options a { - float: left; - width: 100%; - padding: 10px 0; -} - -/*Dashboard -** Admin*/ .dashboard.admin { - background: #F2F0F0; height: 100%; padding: 10px; + background: #f2f0f0; font-size: 13px; - color: #3D5873; + color: #3d5873; } .dashboard.admin .dashboard-container { - background: #FFFFFF; - border: 1px solid #C8C2C2; + margin: 0 0 11px; + padding: 0 8px 18px 0; /*+border-radius:3px;*/ + border: 1px solid #c8c2c2; + border-radius: 3px; + background: #ffffff; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; - border-radius: 3px; - padding: 0px 8px 18px 0px; - margin: 0 0 11px; } .dashboard.admin .dashboard-container.sub { @@ -4278,51 +4208,48 @@ textarea { .dashboard.admin .dashboard-container.sub .button.view-all, .dashboard.admin .dashboard-container .button.fetch-latest { - font-size: 13px; float: right; clear: none; - /*+text-shadow:none;*/ - -moz-text-shadow: none; - -webkit-text-shadow: none; - -o-text-shadow: none; - text-shadow: none; - -moz-text-shadow: 0px 1px 0px #333E49; - -webkit-text-shadow: 0px 1px 0px #333E49; - -o-text-shadow: 0px 1px 0px #333E49; padding: 3px 8px 3px 10px; + /*+text-shadow:none;*/ + border: 1px solid #9d9d9d; + border-radius: 3px; + box-shadow: 0 1px #cacaca; background: #eaeaea; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhZWFlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmQ2ZDYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); - background: -moz-linear-gradient(top, #eaeaea 0%, #d6d6d6 100%); + background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhZWFlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmQ2ZDYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+"); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eaeaea), color-stop(100%, #d6d6d6)); background: -webkit-linear-gradient(top, #eaeaea 0%, #d6d6d6 100%); - background: -o-linear-gradient(top, #eaeaea 0%, #d6d6d6 100%); - background: -ms-linear-gradient(top, #eaeaea 0%, #d6d6d6 100%); background: linear-gradient(to bottom, #eaeaea 0%, #d6d6d6 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#d6d6d6',GradientType=0 ); - border: 1px solid #9D9D9D; + font-size: 13px; + font-weight: 100; + color: #000000; + text-shadow: none; + cursor: pointer; + -moz-text-shadow: none; + -webkit-text-shadow: none; /*+border-radius:3px;*/ + -o-text-shadow: none; + -moz-text-shadow: 0 1px 0 #333e49; + -webkit-text-shadow: 0 1px 0 #333e49; + -o-text-shadow: 0 1px 0 #333e49; + /*+box-shadow:0px 1px #CACACA;*/ + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', endColorstr='#d6d6d6', GradientType=0); -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; - border-radius: 3px; - /*+box-shadow:0px 1px #CACACA;*/ - -moz-box-shadow: 0px 1px #CACACA; - -webkit-box-shadow: 0px 1px #CACACA; - -o-box-shadow: 0px 1px #CACACA; - box-shadow: 0px 1px #CACACA; - cursor: pointer; - font-weight: 100; - color: #000000; + -moz-box-shadow: 0 1px #cacaca; + -webkit-box-shadow: 0 1px #cacaca; + -o-box-shadow: 0 1px #cacaca; } .dashboard.admin .dashboard-container.sub .button.view-all:hover, .dashboard.admin .dashboard-container .button.fetch-latest:hover { - background: #E8E8E8; + box-shadow: inset 0 0 6px #636363; /*+box-shadow:inset 0px 0px 6px #636363;*/ - -moz-box-shadow: inset 0px 0px 6px #636363; - -webkit-box-shadow: inset 0px 0px 6px #636363; - -o-box-shadow: inset 0px 0px 6px #636363; - box-shadow: inset 0px 0px 6px #636363; + background: #e8e8e8; + -moz-box-shadow: inset 0 0 6px #636363; + -webkit-box-shadow: inset 0 0 6px #636363; + -o-box-shadow: inset 0 0 6px #636363; } .dashboard.admin .dashboard-container.sub .title { @@ -4331,40 +4258,40 @@ textarea { /**** Head*/ .dashboard.admin .dashboard-container.head { + float: left; width: 966px; height: 431px; margin: 9px 0 0; - float: left; } .dashboard.admin .dashboard-container .top { - background: #EFEFEF 0px -4px; - padding: 4px 4px 8px; - width: 100%; float: left; + width: 100%; margin: 0; - color: #FFFFFF; + padding: 4px 4px 8px; + background: #efefef 0 -4px; + color: #ffffff; } .dashboard.admin .dashboard-container .title { float: left; - font-size: 13px; - font-weight: 100; - /*+text-shadow:0px 1px 1px #9A9A9A;*/ - -moz-text-shadow: 0px 1px 1px #9A9A9A; - -webkit-text-shadow: 0px 1px 1px #9A9A9A; - -o-text-shadow: 0px 1px 1px #9A9A9A; - text-shadow: 0px 1px 1px #9A9A9A; padding: 5px 0 0 4px; + font-size: 13px; + /*+text-shadow:0px 1px 1px #9A9A9A;*/ + font-weight: 100; + text-shadow: 0 1px 1px #9a9a9a; + -moz-text-shadow: 0 1px 1px #9a9a9a; + -webkit-text-shadow: 0 1px 1px #9a9a9a; + -o-text-shadow: 0 1px 1px #9a9a9a; } .dashboard.admin .dashboard-container .title span { color: #000000; /*+text-shadow:none;*/ + text-shadow: none; -moz-text-shadow: none; -webkit-text-shadow: none; -o-text-shadow: none; - text-shadow: none; } .dashboard.admin .dashboard-container.head .selects { @@ -4373,51 +4300,51 @@ textarea { .dashboard.admin .dashboard-container.head .selects .select { float: left; - padding: 0; margin: 0 0 0 21px; + padding: 0; } .dashboard.admin .dashboard-container.head .selects .select label { display: block; float: left; - padding: 5px 0px 0px; + padding: 5px 0 0; } .dashboard.admin .dashboard-container.head .selects .select select { width: 124px; margin: 3px 0 0 10px; - padding: 0px; + padding: 0; } /**** Charts / stats*/ .dashboard.admin .zone-stats { + position: relative; + top: 0; + left: 0; width: 974px; + /*+placement:shift 0px 0px;*/ height: 416px; overflow: auto; overflow-x: hidden; - /*+placement:shift 0px 0px;*/ - position: relative; - left: 0px; - top: 0px; } .dashboard.admin .zone-stats ul { - width: 996px; - /*+placement:shift -2px 11px;*/ position: relative; - left: -2px; + /*+placement:shift -2px 11px;*/ top: 11px; + left: -2px; + width: 996px; } .dashboard.admin .zone-stats ul li { - width: 488px; - font-size: 14px; - height: 79px; - float: left; position: absolute; position: relative; - cursor: pointer; z-index: 1; + float: left; + width: 488px; + height: 79px; + font-size: 14px; + cursor: pointer; } .dashboard.admin .zone-stats ul li canvas { @@ -4426,174 +4353,174 @@ textarea { } .dashboard.admin .zone-stats ul li:hover { - background: #FFF2DA; + background: #fff2da; } .dashboard.admin .zone-stats ul li .label { - width: 161px; float: left; - font-weight: 100; - border-bottom: 1px solid #E2E2E2; + width: 161px; margin: 5px 0 0 22px; padding: 22px 0 7px; + border-bottom: 1px solid #e2e2e2; + font-weight: 100; } .dashboard.admin .zone-stats ul li .info { float: left; width: 151px; - white-space: nowrap; margin: 12px 0 0; + white-space: nowrap; color: #636363; } .dashboard.admin .zone-stats ul li .info .name { - font-weight: bold; margin-top: 8px; margin-bottom: 9px; font-size: 12px; + font-weight: bold; font-weight: 100; /*[empty]color:;*/ } .dashboard.admin .zone-stats ul li .pie-chart-container { + position: relative; + position: relative; + float: left; + top: 7px; + left: -8px; + /*+placement:shift -8px 7px;*/ width: 91px; height: 69px; overflow: hidden; - float: left; - position: relative; - /*+placement:shift -8px 7px;*/ - position: relative; - left: -8px; - top: 7px; } .dashboard.admin .zone-stats ul li .pie-chart-container .percent-label { - width: 52px; - color: #C98200; - /*+placement:shift 28px 31px;*/ position: relative; - left: 28px; - top: 31px; position: absolute; + /*+placement:shift 28px 31px;*/ + top: 31px; + left: 28px; + width: 52px; font-weight: bold; + color: #c98200; text-align: center; } .dashboard.admin .zone-stats ul li .pie-chart { - width: 70px; - height: 66px; - float: left; - margin: 3px 27px 0 16px; position: relative; z-index: -1; + float: left; + width: 70px; + height: 66px; + margin: 3px 27px 0 16px; } .dashboard.admin .dashboard-container .stats ul li { display: block; + clear: both; width: 97%; height: 40px; - background: url(../images/bg-gradients.png) 0px -29px; - clear: both; - border: 1px solid #C8C2C2; + margin: 0 0 10px; + padding: 0 12px 0; /*+border-radius:10px;*/ + border: 1px solid #c8c2c2; + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + background: url("../images/bg-gradients.png") 0 -29px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; - border-radius: 10px; - border-radius: 10px 10px 10px 10px; - padding: 0 12px 0px; - margin: 0 0 10px; } .dashboard.admin .dashboard-container .stats ul li .name { - width: 178px; float: left; + width: 178px; + margin: 15px 15px 0 0; font-size: 11px; font-weight: bold; - margin: 15px 15px 0 0; } .dashboard.admin .dashboard-container .stats ul li div.value { float: left; - background: url(../images/bg-gradients.png) 0px -51px; width: 295px; height: 100%; - border-left: 1px solid #C8C2C2; - border-right: 1px solid #C8C2C2; margin: 0 9px 0 0; + border-right: 1px solid #c8c2c2; + border-left: 1px solid #c8c2c2; + background: url("../images/bg-gradients.png") 0 -51px; } .dashboard.admin .dashboard-container .stats ul li .value .content { - background: url(../images/bg-gradients.png) repeat-x 0px 0px; margin: 6px 9px 9px; padding: 9px; - color: #FFFFFF; + border-right: 1px solid #6a6a6a; + border-bottom: 1px solid #ffffff; /*Adjusting the font size for proper display*/ - font-size: 10px; - border-left: 1px solid #6A6A6A; - border-right: 1px solid #6A6A6A; - border-bottom: 1px solid #FFFFFF; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; + border-left: 1px solid #6a6a6a; border-radius: 4px; border-radius: 4px 4px 4px 4px; + background: url("../images/bg-gradients.png") repeat-x 0 0; + /*+border-radius:4px;*/ + font-size: 10px; + color: #ffffff; + text-shadow: 0 -1px 1px #6f6f6f; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; /*+text-shadow:0px -1px 1px #6F6F6F;*/ - -moz-text-shadow: 0px -1px 1px #6F6F6F; - -webkit-text-shadow: 0px -1px 1px #6F6F6F; - -o-text-shadow: 0px -1px 1px #6F6F6F; - text-shadow: 0px -1px 1px #6F6F6F; + -khtml-border-radius: 4px; + -moz-text-shadow: 0 -1px 1px #6f6f6f; + -webkit-text-shadow: 0 -1px 1px #6f6f6f; + -o-text-shadow: 0 -1px 1px #6f6f6f; } .dashboard.admin .dashboard-container .stats ul li .chart { float: left; width: 290px; height: 17px; - padding: 0px 1px; - background: url(../images/bg-gradients.png) 0px -130px; margin: 12px 23px 0 0; + padding: 0 1px; + border-top: 1px solid #727272; /*+border-radius:7px;*/ + border-bottom: 1px solid #ffffff; + border-radius: 7px; + border-radius: 7px 7px 7px 7px; + background: url("../images/bg-gradients.png") 0 -130px; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px; - border-radius: 7px; - border-radius: 7px 7px 7px 7px; - border-bottom: 1px solid #FFFFFF; - border-top: 1px solid #727272; } .dashboard.admin .dashboard-container .stats ul li .chart .chart-line { height: 15px; - background: url(../images/bg-gradients.png) 0px -149px; + margin: 1px 0 0; /*+border-radius:10px;*/ + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + background: url("../images/bg-gradients.png") 0 -149px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; - border-radius: 10px; - border-radius: 10px 10px 10px 10px; - margin: 1px 0px 0; } .dashboard.admin .dashboard-container .stats ul li .percentage { float: left; + margin: 13px 0 0; font-size: 20px; font-weight: bold; - margin: 13px 0 0; /*+text-shadow:0px -2px 1px #FFFFFF;*/ - -moz-text-shadow: 0px -2px 1px #FFFFFF; - -webkit-text-shadow: 0px -2px 1px #FFFFFF; - -o-text-shadow: 0px -2px 1px #FFFFFF; - text-shadow: 0px -2px 1px #FFFFFF; + text-shadow: 0 -2px 1px #ffffff; + -moz-text-shadow: 0 -2px 1px #ffffff; + -webkit-text-shadow: 0 -2px 1px #ffffff; + -o-text-shadow: 0 -2px 1px #ffffff; } /**** Alerts*/ .dashboard.admin .dashboard-container.sub.alerts { - float: left; - margin: 0 12px 0 0; - height: 170px; - overflow: hidden; position: relative; + float: left; + height: 170px; + margin: 0 12px 0 0; + overflow: hidden; } .dashboard.admin .dashboard-container.sub.alerts.last { @@ -4601,49 +4528,49 @@ textarea { } .dashboard.admin .dashboard-container.sub.alerts ul { + position: relative; width: 468px; height: 100%; + margin: 0 0 0 8px; overflow-y: scroll; - position: relative; - margin: 0px 0 0 8px; } .dashboard.admin .dashboard-container.sub.alerts ul li { - background: #F0F0F0; float: left; - border: 1px solid #D4D0D0; + margin: 9px; + padding: 8px; /*+border-radius:3px;*/ + border: 1px solid #d4d0d0; + border-radius: 3px; + background: #f0f0f0; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; - border-radius: 3px; - margin: 9px; - padding: 8px; } .dashboard.admin .dashboard-container.sub.alerts ul li { - border: 1px solid #FF7070; - background: #FFEFEF; + border: 1px solid #ff7070; + background: #ffefef; } .dashboard.admin .dashboard-container.sub.alerts ul li span.title { width: 100%; - font-weight: bold; - font-size: 14px; - font-weight: 100; - color: #266E9A; margin: 3px 0 5px; - /*+text-shadow:0px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px #FFFFFF; - -o-text-shadow: 0px 1px #FFFFFF; - text-shadow: 0px 1px #FFFFFF; padding: 0; + font-size: 14px; + font-weight: bold; + font-weight: 100; + /*+text-shadow:0px 1px #FFFFFF;*/ + color: #266e9a; + text-shadow: 0 1px #ffffff; + -moz-text-shadow: 0 1px #ffffff; + -webkit-text-shadow: 0 1px #ffffff; + -o-text-shadow: 0 1px #ffffff; } .dashboard.admin .dashboard-container.sub.alerts ul li p { float: left; - margin: 4px 0px 0px; + margin: 4px 0 0; color: #252525; } @@ -4653,38 +4580,38 @@ textarea { /*** User*/ #browser div.panel .dashboard.user .toolbar { - height: 60px; position: relative; + height: 60px; } .dashboard.user .button.view-all { float: right; - border: 1px solid #4B5B6B; + margin: -4px 4px -4px 0; /*+border-radius:4px;*/ + padding: 2px 3px 3px; + border: 1px solid #4b5b6b; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: url("../images/bg-gradients.png") 0 -147px; + color: #ffffff; + /*+text-shadow:0px -1px 2px #13293E;*/ + text-indent: 0; + text-shadow: 0 -1px 2px #13293e; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - color: #FFFFFF; - /*+text-shadow:0px -1px 2px #13293E;*/ - -moz-text-shadow: 0px -1px 2px #13293E; - -webkit-text-shadow: 0px -1px 2px #13293E; - -o-text-shadow: 0px -1px 2px #13293E; - text-shadow: 0px -1px 2px #13293E; - padding: 2px 3px 3px; - margin: -4px 4px -4px 0; - text-indent: 0; - background: url(../images/bg-gradients.png) 0px -147px; + -moz-text-shadow: 0 -1px 2px #13293e; + -webkit-text-shadow: 0 -1px 2px #13293e; + -o-text-shadow: 0 -1px 2px #13293e; } .dashboard.user .button.view-all:hover { - background-position: 0px 0px; + background-position: 0 0; /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; + text-shadow: 0 1px 1px #000000; + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; } /**** Actions*/ @@ -4695,39 +4622,39 @@ textarea { .dashboard.user .dashboard-actions ul li { float: left; width: 123px; - cursor: pointer; height: 40px; margin: 0 9px 0 0; + border: 1px solid #395268; /*+border-radius:4px;*/ + border-right: 1px solid #556778; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + box-shadow: inset 0 0 1px #dde3ec; + background: url("../images/bg-gradients.png") repeat-x 0 -181px; + /*+box-shadow:inset 0px 0px 1px #DDE3EC;*/ + cursor: pointer; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - /*+box-shadow:inset 0px 0px 1px #DDE3EC;*/ - -moz-box-shadow: inset 0px 0px 1px #DDE3EC; - -webkit-box-shadow: inset 0px 0px 1px #DDE3EC; - -o-box-shadow: inset 0px 0px 1px #DDE3EC; - box-shadow: inset 0px 0px 1px #DDE3EC; - border: 1px solid #395268; - border-right: 1px solid #556778; - background: url(../images/bg-gradients.png) repeat-x 0px -181px; + -moz-box-shadow: inset 0 0 1px #dde3ec; + -webkit-box-shadow: inset 0 0 1px #dde3ec; + -o-box-shadow: inset 0 0 1px #dde3ec; } .dashboard.user .dashboard-actions ul li span { - color: #FFFFFF; - font-size: 11px; - /*+text-shadow:0px 1px 2px #444444;*/ - -moz-text-shadow: 0px 1px 2px #444444; - -webkit-text-shadow: 0px 1px 2px #444444; - -o-text-shadow: 0px 1px 2px #444444; - text-shadow: 0px 1px 2px #444444; - background: url(../images/icons.png) no-repeat -613px -309px; - padding: 8px 12px 11px 34px; - /*+placement:shift 4px 10px;*/ position: relative; - left: 4px; top: 10px; + /*+text-shadow:0px 1px 2px #444444;*/ + left: 4px; + padding: 8px 12px 11px 34px; + background: url("../images/icons.png") no-repeat -613px -309px; + font-size: 11px; + color: #ffffff; + text-shadow: 0 1px 2px #444444; + /*+placement:shift 4px 10px;*/ + -moz-text-shadow: 0 1px 2px #444444; + -webkit-text-shadow: 0 1px 2px #444444; + -o-text-shadow: 0 1px 2px #444444; } .dashboard.user .dashboard-actions ul li.add-iso span { @@ -4746,32 +4673,32 @@ textarea { .dashboard.user .vm-status { width: 98%; margin: 19px auto auto; - border: 1px solid #D2CDCD; + border: 1px solid #d2cdcd; /*+border-radius:9px;*/ + border-radius: 9px; + border-radius: 9px 9px 9px 9px; -moz-border-radius: 9px; -webkit-border-radius: 9px; -khtml-border-radius: 9px; - border-radius: 9px; - border-radius: 9px 9px 9px 9px; } .dashboard.user .vm-status .title { width: 100%; - background: url(../images/bg-gradients.png) 0px -53px; + padding: 13px 0 12px; /*+border-radius:10px 10px 0 0;*/ + border-bottom: 1px solid #c8c2c2; + border-radius: 10px 10px 0 0; + background: url("../images/bg-gradients.png") 0 -53px; + font-size: 13px; + color: #4a5967; + text-shadow: 0 1px 1px #ffffff; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; - -khtml-border-radius: 10px 10px 0 0; - border-radius: 10px 10px 0 0; - font-size: 13px; - color: #4A5967; - padding: 13px 0 12px; - border-bottom: 1px solid #C8C2C2; /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; + -khtml-border-radius: 10px 10px 0 0; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; } .dashboard.user .vm-status .title span { @@ -4779,7 +4706,7 @@ textarea { } .dashboard.user .vm-status .content { - padding: 9px 0px; + padding: 9px 0; } .dashboard.user .vm-status .content ul { @@ -4791,44 +4718,44 @@ textarea { float: left; width: 243px; height: 237px; - border: 1px solid #E6EBEE; - border-top: 2px solid #D3D9DE; + margin: 0 0 0 11px; + border: 1px solid #e6ebee; /*+border-radius:10px;*/ + border-top: 2px solid #d3d9de; + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + background: #ebedf1; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; - border-radius: 10px; - border-radius: 10px 10px 10px 10px; - margin: 0 0 0 11px; - background: #EBEDF1; } .dashboard.user .vm-status .content ul li .name { - font-size: 28px; - color: #5C7082; - padding: 0 0 0 35px; margin: 14px 0 0; + padding: 0 0 0 35px; + background: url("../images/icons.png") -617px -488px; + font-size: 28px; /*+text-shadow:0px 2px 2px #FFFFFF;*/ - -moz-text-shadow: 0px 2px 2px #FFFFFF; - -webkit-text-shadow: 0px 2px 2px #FFFFFF; - -o-text-shadow: 0px 2px 2px #FFFFFF; - text-shadow: 0px 2px 2px #FFFFFF; - background: url(../images/icons.png) -617px -488px; + color: #5c7082; + text-shadow: 0 2px 2px #ffffff; + -moz-text-shadow: 0 2px 2px #ffffff; + -webkit-text-shadow: 0 2px 2px #ffffff; + -o-text-shadow: 0 2px 2px #ffffff; } .dashboard.user .vm-status .content ul li .value { - background: #DFE9CC; width: 229px; - color: #5D7C98; - /*+text-shadow:0px 1px 2px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 2px #FFFFFF; - -webkit-text-shadow: 0px 1px 2px #FFFFFF; - -o-text-shadow: 0px 1px 2px #FFFFFF; - text-shadow: 0px 1px 2px #FFFFFF; - font-size: 58px; margin: 12px auto auto; + padding: 59px 0; + /*+text-shadow:0px 1px 2px #FFFFFF;*/ + background: #dfe9cc; + font-size: 58px; + color: #5d7c98; text-align: center; - padding: 59px 0px; + text-shadow: 0 1px 2px #ffffff; + -moz-text-shadow: 0 1px 2px #ffffff; + -webkit-text-shadow: 0 1px 2px #ffffff; + -o-text-shadow: 0 1px 2px #ffffff; } .dashboard.user .vm-status .content ul li.stopped .name { @@ -4836,7 +4763,7 @@ textarea { } .dashboard.user .vm-status .content ul li.stopped .value { - background: #EDCBCE; + background: #edcbce; } .dashboard.user .vm-status .content ul li.total .name { @@ -4844,7 +4771,7 @@ textarea { } .dashboard.user .vm-status .content ul li.total .value { - background: #DFE4E9; + background: #dfe4e9; } /***** Tables / status list*/ @@ -4858,35 +4785,35 @@ textarea { .dashboard.user .status-lists ul li.events .content li { width: 97%; - cursor: default; margin: 6px 11px 0 0; - font-size: 11px; padding: 13px 0 12px 16px; - color: #495A76; + border: 1px solid #dbdbdb; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; /*+text-shadow:0px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px #FFFFFF; - -o-text-shadow: 0px 1px #FFFFFF; - text-shadow: 0px 1px #FFFFFF; - border: 1px solid #DBDBDB; + box-shadow: 0 2px 4px #c0c0c0; + background: #efefef url("../images/bg-gradients.png") repeat-x 0 -29px; + font-size: 11px; + color: #495a76; + text-shadow: 0 1px #ffffff; /*+box-shadow:0px 2px 4px #C0C0C0;*/ - -moz-box-shadow: 0px 2px 4px #C0C0C0; - -webkit-box-shadow: 0px 2px 4px #C0C0C0; - -o-box-shadow: 0px 2px 4px #C0C0C0; - box-shadow: 0px 2px 4px #C0C0C0; - background: #EFEFEF url(../images/bg-gradients.png) repeat-x 0px -29px; + cursor: default; + -moz-text-shadow: 0 1px #ffffff; + -webkit-text-shadow: 0 1px #ffffff; + -o-text-shadow: 0 1px #ffffff; + -moz-box-shadow: 0 2px 4px #c0c0c0; /*+border-radius:4px;*/ + -webkit-box-shadow: 0 2px 4px #c0c0c0; + -o-box-shadow: 0 2px 4px #c0c0c0; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; } .dashboard.user .status-lists ul li.events .content li .title { - font-weight: bold; - color: #4A5A6A; margin-bottom: 9px; + font-weight: bold; + color: #4a5a6a; } .dashboard.user .status-lists ul li { @@ -4901,7 +4828,7 @@ textarea { } .dashboard.user .status-lists table th { - padding: 8px 0px 6px; + padding: 8px 0 6px; } .dashboard.user .status-lists .events table { @@ -4909,11 +4836,11 @@ textarea { } .dashboard.user .status-lists table tbody { - height: 256px; display: block; + height: 256px; + padding: 0 0; overflow: auto; overflow-x: hidden; - padding: 0 0px; } .dashboard.user .status-lists table td.value { @@ -4922,8 +4849,8 @@ textarea { .dashboard.user .status-lists table td.desc { width: 151px; - overflow: hidden; cursor: default; + overflow: hidden; } .dashboard.user .status-lists .my-account table tbody tr td { @@ -4932,12 +4859,12 @@ textarea { } .dashboard.user .status-lists table thead { - background: url(../images/bg-gradients.png) 0px -351px; - border-top: 1px solid #C4C5C5; + border-top: 1px solid #c4c5c5; + background: url("../images/bg-gradients.png") 0 -351px; } .dashboard.user .status-lists table tr.odd { - background: #DFE1E3; + background: #dfe1e3; } .dashboard.user .status-lists table td { @@ -4951,20 +4878,19 @@ textarea { } .dashboard.user .status-lists li.ip-addresses .desc { - color: #3F5468; + color: #3f5468; } .dashboard.user .status-lists li.ip-addresses .value { - font-size: 29px; margin: 7px 0 0; + font-size: 29px; /*+text-shadow:0px 1px 2px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 2px #FFFFFF; - -webkit-text-shadow: 0px 1px 2px #FFFFFF; - -o-text-shadow: 0px 1px 2px #FFFFFF; - text-shadow: 0px 1px 2px #FFFFFF; + text-shadow: 0 1px 2px #ffffff; + -moz-text-shadow: 0 1px 2px #ffffff; + -webkit-text-shadow: 0 1px 2px #ffffff; + -o-text-shadow: 0 1px 2px #ffffff; } -/*System chart*/ .system-chart { width: 100%; height: 100%; @@ -4973,34 +4899,34 @@ textarea { } .system-chart ul.resources li { - background: transparent url(../images/bg-gradients.png) repeat-x 0px -1340px; - text-align: left; + position: absolute; width: 100px; height: 60px; - position: absolute; - border: 1px solid #99A0A5; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; + border: 1px solid #99a0a5; border-radius: 4px; border-radius: 4px 4px 4px 4px; + /*+border-radius:4px;*/ + box-shadow: 0 0 2px #a6a6a6; + background: transparent url("../images/bg-gradients.png") repeat-x 0 -1340px; + text-align: left; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; /*+box-shadow:0px 0px 2px #A6A6A6;*/ - -moz-box-shadow: 0px 0px 2px #A6A6A6; - -webkit-box-shadow: 0px 0px 2px #A6A6A6; - -o-box-shadow: 0px 0px 2px #A6A6A6; - box-shadow: 0px 0px 2px #A6A6A6; + -khtml-border-radius: 4px; + -moz-box-shadow: 0 0 2px #a6a6a6; + -webkit-box-shadow: 0 0 2px #a6a6a6; + -o-box-shadow: 0 0 2px #a6a6a6; } .system-chart ul.resources li .button.view-all { + position: relative; + position: absolute; + top: 34px; + /*+placement:shift 32px 34px;*/ + left: 32px; width: 65px; height: 25px; - background: url(../images/buttons.png) no-repeat -458px -504px; - /*+placement:shift 32px 34px;*/ - position: relative; - left: 32px; - top: 34px; - position: absolute; + background: url("../images/buttons.png") no-repeat -458px -504px; } .system-chart ul.resources li .button.view-all:hover { @@ -5008,33 +4934,33 @@ textarea { } .system-chart ul.resources li .button.view-all .view-all-label { - color: #FFFFFF; - font-size: 11px; - /*+text-shadow:0px -1px 1px #000000;*/ - -moz-text-shadow: 0px -1px 1px #000000; - -webkit-text-shadow: 0px -1px 1px #000000; - -o-text-shadow: 0px -1px 1px #000000; - text-shadow: 0px -1px 1px #000000; - /*+placement:shift 9px 0px;*/ position: relative; + top: 0; + /*+text-shadow:0px -1px 1px #000000;*/ left: 9px; - top: 0px; + font-size: 11px; + color: #ffffff; + text-shadow: 0 -1px 1px #000000; + /*+placement:shift 9px 0px;*/ + -moz-text-shadow: 0 -1px 1px #000000; + -webkit-text-shadow: 0 -1px 1px #000000; + -o-text-shadow: 0 -1px 1px #000000; } .system-chart ul.resources li .label { - font-weight: bold; - font-size: 12px; - color: #5C7485; - /*+text-shadow:0px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px #FFFFFF; - -o-text-shadow: 0px 1px #FFFFFF; - text-shadow: 0px 1px #FFFFFF; - /*+placement:shift 3px 3px;*/ position: relative; - left: 3px; - top: 3px; position: absolute; + top: 3px; + /*+text-shadow:0px 1px #FFFFFF;*/ + left: 3px; + font-size: 12px; + font-weight: bold; + color: #5c7485; + /*+placement:shift 3px 3px;*/ + text-shadow: 0 1px #ffffff; + -moz-text-shadow: 0 1px #ffffff; + -webkit-text-shadow: 0 1px #ffffff; + -o-text-shadow: 0 1px #ffffff; } /** Resources*/ @@ -5046,7 +4972,7 @@ textarea { .system-chart.dashboard.admin .dashboard-container { width: 930px; - border: none; + border: 0; } .system-chart.dashboard.admin .dashboard-container .top { @@ -5054,15 +4980,15 @@ textarea { } .system-chart.dashboard.admin .dashboard-container .top .title { - color: #55687A; + color: #55687a; } .system-chart.dashboard.admin .dashboard-container .top .title span { /*+text-shadow:0px 0px #FFFFFF;*/ - -moz-text-shadow: 0px 0px #FFFFFF; - -webkit-text-shadow: 0px 0px #FFFFFF; - -o-text-shadow: 0px 0px #FFFFFF; - text-shadow: 0px 0px #FFFFFF; + text-shadow: 0 0 #ffffff; + -moz-text-shadow: 0 0 #ffffff; + -webkit-text-shadow: 0 0 #ffffff; + -o-text-shadow: 0 0 #ffffff; } .system-chart.dashboard.admin .dashboard-container .stats .chart { @@ -5071,15 +4997,15 @@ textarea { /** Compute*/ .system-chart.compute { - background: url(../images/bg-system-chart-compute.png) no-repeat center; + background: url("../images/bg-system-chart-compute.png") no-repeat center; } /*** Compute resources*/ .system-chart.compute ul.resources { + position: relative; width: 98%; height: 97%; margin: 0; - position: relative; } .system-chart.compute ul.resources li.zone { @@ -5087,241 +5013,239 @@ textarea { } .system-chart.compute ul.resources li.zone .label { - width: 100%; - left: 0px; top: 20px; + left: 0; + width: 100%; font-size: 14px; text-align: center; } .system-chart.compute ul.resources li.pods { - left: 299px; top: 112px; + left: 299px; } .system-chart.compute ul.resources li.clusters { - left: 396px; top: 189px; + left: 396px; } .system-chart.compute ul.resources li.hosts { - left: 507px; top: 265px; + left: 507px; } .system-chart.compute ul.resources li.primaryStorage { - left: 507px; top: 375px; + left: 507px; } .system-chart.compute ul.resources li.secondaryStorage { - left: 299px; top: 497px; + left: 299px; } .system-chart.compute ul.resources li.ucs { - left: 299px; top: 406px; + left: 299px; } /** Network*/ .system-chart.network .network-switch-icon { - color: #506980; - font-weight: bold; - background: url(../images/bg-gradients.png) repeat-x 0px -38px; - border: 1px solid #CDCDCD; - border-top: 2px solid #FFFFFF; + position: relative; + position: absolute; + z-index: 3; + top: 76px; + left: 187px; /*+box-shadow:0px 0px 2px #A4A4A4;*/ - -moz-box-shadow: 0px 0px 2px #A4A4A4; - -webkit-box-shadow: 0px 0px 2px #A4A4A4; - -o-box-shadow: 0px 0px 2px #A4A4A4; - box-shadow: 0px 0px 2px #A4A4A4; + padding: 8px 7px; + border: 1px solid #cdcdcd; + border-top: 2px solid #ffffff; + border-radius: 2px; /*+border-radius:2px;*/ + border-radius: 2px 2px 2px 2px; + box-shadow: 0 0 2px #a4a4a4; + background: url("../images/bg-gradients.png") repeat-x 0 -38px; + font-weight: bold; + color: #506980; + -moz-box-shadow: 0 0 2px #a4a4a4; + /*+placement:shift 187px 76px;*/ + -webkit-box-shadow: 0 0 2px #a4a4a4; + -o-box-shadow: 0 0 2px #a4a4a4; -moz-border-radius: 2px; -webkit-border-radius: 2px; -khtml-border-radius: 2px; - border-radius: 2px; - border-radius: 2px 2px 2px 2px; - padding: 8px 7px; - /*+placement:shift 187px 76px;*/ - position: relative; - left: 187px; - top: 76px; - position: absolute; - z-index: 3; } .system-chart.network .base-circle-icon { - width: 35px; - height: 34px; - background: url(../images/bg-system-network-traffic.png) 0px -853px; - /*+placement:shift 227px 557px;*/ position: relative; - left: 227px; - top: 557px; position: absolute; z-index: 5; + /*+placement:shift 227px 557px;*/ + top: 557px; + left: 227px; + width: 35px; + height: 34px; + background: url("../images/bg-system-network-traffic.png") 0 -853px; } .system-chart.network ul.resources { - width: 100%; - height: 98%; position: absolute; z-index: 2; + width: 100%; + height: 98%; } .system-chart.network ul.resources li { - background: transparent; + border: 0; /*+box-shadow:0px 0px;*/ - -moz-box-shadow: 0px 0px; - -webkit-box-shadow: 0px 0px; - -o-box-shadow: 0px 0px; - box-shadow: 0px 0px; - -moz-box-shadow: 0px 0px none; - -webkit-box-shadow: 0px 0px none; - -o-box-shadow: 0px 0px none; + border-radius: 0; + border-radius: 0 0 0 0; + box-shadow: 0 0; + background: transparent; + -moz-box-shadow: 0 0; + -webkit-box-shadow: 0 0; + -o-box-shadow: 0 0; + -moz-box-shadow: 0 0 none; + -webkit-box-shadow: 0 0 none; + -o-box-shadow: 0 0 none; -moz-box-shadow: none; + /*+border-radius:0px;*/ -webkit-box-shadow: none; -o-box-shadow: none; - border: none; - /*+border-radius:0px;*/ - -moz-border-radius: 0px; - -webkit-border-radius: 0px; - -khtml-border-radius: 0px; - border-radius: 0px; - border-radius: 0px 0px 0px 0px; + -moz-border-radius: 0; + -webkit-border-radius: 0; + -khtml-border-radius: 0; } .system-chart.network ul.resources li .view-all { /*+placement:shift 19px 21px;*/ position: relative; - left: 19px; top: 21px; + left: 19px; } .system-chart.network ul.resources li.public { /*+placement:shift 356px 23px;*/ position: relative; - left: 356px; - top: 23px; position: absolute; + top: 23px; + left: 356px; } .system-chart.network ul.resources li.guest { /*+placement:shift 356px 155px;*/ position: relative; - left: 356px; - top: 155px; position: absolute; + top: 155px; + left: 356px; } .system-chart.network ul.resources li.management { /*+placement:shift 356px 242px;*/ position: relative; - left: 356px; - top: 242px; position: absolute; + top: 242px; + left: 356px; } .system-chart.network ul.resources li.storage { /*+placement:shift 356px 333px;*/ position: relative; - left: 356px; - top: 333px; position: absolute; + top: 333px; + left: 356px; } .system-chart.network ul.resources li.providers { /*+placement:shift 248px 427px;*/ position: relative; - left: 248px; - top: 427px; - height: 77px; - width: 258px; position: absolute; - background: url(../images/bg-system-network-traffic.png) no-repeat -50px -848px; + top: 427px; + left: 248px; + width: 258px; + height: 77px; + background: url("../images/bg-system-network-traffic.png") no-repeat -50px -848px; } .system-chart.network ul.resources li.providers span { /*+placement:shift 99px 5px;*/ position: relative; - left: 99px; - top: 5px; position: absolute; + top: 5px; + left: 99px; font-size: 12px; } .system-chart.network ul.resources li.providers .view-all { /*+placement:shift 186px 48px;*/ position: relative; - left: 186px; - top: 48px; position: absolute; + top: 48px; + left: 186px; } .system-chart.network .system-network-chart { - width: 100%; - height: 100%; position: relative; z-index: 1; + width: 100%; + height: 100%; } .system-chart.network .system-network-chart .network-chart-item { - background: url(../images/bg-system-network-traffic.png) no-repeat; width: 213px; height: 539px; + background: url("../images/bg-system-network-traffic.png") no-repeat; } .system-chart.network .system-network-chart .network-chart-item.public { - background-position: -793px -1px; - /*+placement:shift 245px 20px;*/ position: relative; - left: 245px; - top: 20px; + /*+placement:shift 245px 20px;*/ position: absolute; + top: 20px; + left: 245px; + background-position: -793px -1px; } .system-chart.network .system-network-chart .network-chart-item.management { - background-position: -273px 12px; - /*+placement:shift 239px 20px;*/ position: relative; - left: 239px; - top: 20px; + /*+placement:shift 239px 20px;*/ position: absolute; + top: 20px; + left: 239px; + background-position: -273px 12px; } .system-chart.network .system-network-chart .network-chart-item.storage { - background-position: -523px 12px; - /*+placement:shift 231px 20px;*/ position: relative; - left: 231px; - top: 20px; + /*+placement:shift 231px 20px;*/ position: absolute; + top: 20px; + left: 231px; + background-position: -523px 12px; } .system-chart.network .system-network-chart .network-chart-item.guest { - background-position: -43px 12px; - /*+placement:shift 251px 20px;*/ position: relative; - left: 251px; - top: 20px; + /*+placement:shift 251px 20px;*/ position: absolute; + top: 20px; + left: 251px; + background-position: -43px 12px; } -/** NAAS -** Add initial resource form*/ .panel .add-first-network-resource { margin: 37px; - font-size: 14px; - background: #FFFFFF; padding: 19px 19px 79px; + border: 1px solid #ececec; + border-radius: 12px; /*+border-radius:12px;*/ + border-radius: 12px 12px 12px 12px; + background: #ffffff; + font-size: 14px; -moz-border-radius: 12px; -webkit-border-radius: 12px; -khtml-border-radius: 12px; - border-radius: 12px; - border-radius: 12px 12px 12px 12px; - border: 1px solid #ECECEC; } .panel .add-first-network-resource form { @@ -5332,28 +5256,28 @@ textarea { } .panel .add-first-network-resource .title { - font-size: 26px; - color: #3984D1; - /*+text-shadow:0px 1px 2px #BCBCBC;*/ - -moz-text-shadow: 0px 1px 2px #BCBCBC; - -webkit-text-shadow: 0px 1px 2px #BCBCBC; - -o-text-shadow: 0px 1px 2px #BCBCBC; - text-shadow: 0px 1px 2px #BCBCBC; margin: 0 0 17px; + font-size: 26px; + /*+text-shadow:0px 1px 2px #BCBCBC;*/ + color: #3984d1; + text-shadow: 0 1px 2px #bcbcbc; + -moz-text-shadow: 0 1px 2px #bcbcbc; + -webkit-text-shadow: 0 1px 2px #bcbcbc; + -o-text-shadow: 0 1px 2px #bcbcbc; } .panel .add-first-network-resource .message { display: block; - color: #545151; margin: 0 0 30px; + color: #545151; } .panel .add-first-network-resource .form-item { - width: 409px; display: inline-block; - padding: 5px; position: relative; + width: 409px; margin: 0 0 2px; + padding: 5px; } .panel .add-first-network-resource .form-item label { @@ -5364,32 +5288,32 @@ textarea { .panel .add-first-network-resource .form-item label.error { display: none; - font-size: 10px; position: absolute; top: 30px; left: 137px; + font-size: 10px; } .panel .add-first-network-resource .form-item input { float: right; /*+border-radius:6px;*/ - -moz-border-radius: 6px; - -webkit-border-radius: 6px; - -khtml-border-radius: 6px; + border: 1px solid #b7b7b7; border-radius: 6px; border-radius: 6px 6px 6px 6px; font-size: 16px; - border: 1px solid #B7B7B7; + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + -khtml-border-radius: 6px; } -.panel .add-first-network-resource .form-item input[type=checkbox] { +.panel .add-first-network-resource .form-item input[type='checkbox'] { float: right; margin: 0 266px 0 0; } -.panel .add-first-network-resource .form-item input[type=text], -.panel .add-first-network-resource .form-item input[type=password], -.panel .add-first-network-resource .form-item input[type=text], +.panel .add-first-network-resource .form-item input[type='text'], +.panel .add-first-network-resource .form-item input[type='password'], +.panel .add-first-network-resource .form-item input[type='text'], .panel .add-first-network-resource .form-item select { width: 276px; } @@ -5400,42 +5324,42 @@ textarea { } .panel .add-first-network-resource .button { - padding: 11px 23px 11px 21px; - cursor: pointer; - background: url(../images/bg-gradients.png) repeat-x 0px -221px; + clear: both; margin: 29px 0 0; + padding: 11px 23px 11px 21px; + border: 1px solid #858585; /*+border-radius:10px;*/ + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + background: url("../images/bg-gradients.png") repeat-x 0 -221px; + color: #ffffff; + cursor: pointer; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; - border-radius: 10px; - border-radius: 10px 10px 10px 10px; - border: 1px solid #858585; - color: #FFFFFF; - clear: both; /*[empty]position:;*/ } .panel .add-first-network-resource .multi-array { - background: #FFFFFF; - border: 1px solid #DCDCDC; display: inline-block; float: left; - padding: 12px; clear: both; width: 383px; margin: 3px 0 10px; + padding: 12px; + border: 1px solid #dcdcdc; + border-radius: 7px; /*+border-radius:7px;*/ + border-radius: 7px 7px 7px 7px; + background: #ffffff; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px; - border-radius: 7px; - border-radius: 7px 7px 7px 7px; } .panel .add-first-network-resource .multi-array .item { - max-width: 155px; float: left; + max-width: 155px; margin: 6px 0 0 24px; } @@ -5452,42 +5376,38 @@ textarea { margin: 0; } -/*Form validation*/ -input.error { - background: #FEE5E5; -} - -label.error { - color: #FF0000; -} - -/*Multi-step wizard*/ .multi-wizard { + display: inline-block; width: 500px; height: 550px; - display: inline-block; } /*** Progress bar*/ .multi-wizard .progress { - color: #FFFFFF; font-size: 11px; + color: #ffffff; } .multi-wizard .progress ul { - height: 40px; float: left; clear: both; + height: 40px; } /*[clearfix]*/ .multi-wizard .progress ul li { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: relative; float: left; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; width: 128px; height: 40px; - position: relative; - display: flex; - align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; justify-content: center; } @@ -5497,34 +5417,34 @@ label.error { } .multi-wizard .progress ul li.active { - background: url(../images/bg-gradients.png) 0px -221px; + border-radius: 5px; + background: url("../images/bg-gradients.png") 0 -221px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; - border-radius: 5px; } .multi-wizard .progress ul li span { position: relative; - color: #000000; - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; width: 62px; + color: #000000; text-align: center; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; } .multi-wizard .progress ul li span.arrow { + display: none; + position: absolute; + /*+placement:displace 74px -3px;*/ + z-index: 1000; width: 17px; height: 15px; - /*+placement:displace 74px -3px;*/ - position: absolute; - margin-left: 74px; margin-top: -3px; - background: url(../images/icons.png) no-repeat 0px -422px; - z-index: 1000; - display: none; + margin-left: 74px; + background: url("../images/icons.png") no-repeat 0 -422px; } .multi-wizard.instance-wizard .progress ul li span.arrow { @@ -5537,53 +5457,53 @@ label.error { .multi-wizard .progress ul li span.number { width: auto; + background: transparent; font-size: 27px; font-weight: bold; - color: #BBBBBB; - background: transparent; + color: #bbbbbb; } .multi-wizard .progress ul li.active span { /*+text-shadow:0px -1px 1px #004AFF;*/ - -moz-text-shadow: 0px -1px 1px #004AFF; - -webkit-text-shadow: 0px -1px 1px #004AFF; - -o-text-shadow: 0px -1px 1px #004AFF; - text-shadow: 0px -1px 1px #004AFF; - color: #FFFFFF; + color: #ffffff; + text-shadow: 0 -1px 1px #004aff; + -moz-text-shadow: 0 -1px 1px #004aff; + -webkit-text-shadow: 0 -1px 1px #004aff; + -o-text-shadow: 0 -1px 1px #004aff; } /*** Content*/ .multi-wizard .main-desc { - font-size: 11px; - text-align: left; - width: 437px; - /*+placement:shift 3px 25px;*/ position: relative; - left: 3px; top: 25px; + left: 3px; + /*+placement:shift 3px 25px;*/ + width: 437px; + font-size: 11px; line-height: 17px; + text-align: left; } .multi-wizard .review .main-desc, .multi-wizard .select-template .main-desc { - margin-left: 10px; left: 0; + margin-left: 10px; } .multi-wizard .content { - background: #FFFFFF; + display: inline-block; + float: left; width: 440px; min-height: 366px; margin: 24px 0 0; - padding-bottom: 8px; /*+border-radius:4px;*/ + padding-bottom: 8px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: #ffffff; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - display: inline-block; - float: left; } .multi-wizard .select-security-group .content { @@ -5592,13 +5512,13 @@ label.error { .multi-wizard .content .section { width: 416px; - background: #E9E9E9; margin: 16px auto auto; - overflow: hidden; - text-align: left; + border: 1px solid #e0dfdf; + background: #e9e9e9; font-size: 12px; - color: #505A62; - border: 1px solid #E0DFDF; + color: #505a62; + text-align: left; + overflow: hidden; } .multi-wizard.instance-wizard .service-offering .content { @@ -5612,16 +5532,16 @@ label.error { width: 334px; height: 45px; margin: 9px auto auto; - background: #D6D6D6; + background: #d6d6d6; } .multi-wizard .content .section .select-area .desc { - text-align: left; - width: 155px; float: right; + width: 155px; padding: 9px 0 0; font-size: 12px; color: #989898; + text-align: left; } .multi-wizard .content .section .select-area input { @@ -5631,60 +5551,60 @@ label.error { } .multi-wizard .content .section .select-area select { - padding: 0; + float: left; width: 158px; /*+border-radius:4px;*/ + margin: 11px 0 0 14px; + padding: 0; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - margin: 11px 0px 0 14px; - float: left; } -.multi-wizard .content .section .select-area input[type=radio], -.multi-wizard.instance-wizard .content .section.select-template input[type=radio] { +.multi-wizard .content .section .select-area input[type='radio'], +.multi-wizard.instance-wizard .content .section.select-template input[type='radio'] { margin: 14px 16px 0; } .multi-wizard .content .section .select-area label { float: left; - text-align: left; - font-size: 18px; - color: #62798E; - /*+text-shadow:0px 2px 2px #EFEFEF;*/ - -moz-text-shadow: 0px 2px 2px #EFEFEF; - -webkit-text-shadow: 0px 2px 2px #EFEFEF; - -o-text-shadow: 0px 2px 2px #EFEFEF; - text-shadow: 0px 2px 2px #EFEFEF; margin: 12px 12px 12px 2px; + font-size: 18px; + color: #62798e; + /*+text-shadow:0px 2px 2px #EFEFEF;*/ + text-align: left; + text-shadow: 0 2px 2px #efefef; + -moz-text-shadow: 0 2px 2px #efefef; + -webkit-text-shadow: 0 2px 2px #efefef; + -o-text-shadow: 0 2px 2px #efefef; } .multi-wizard .content .section .select-area label.error { - font-size: 10px; - color: #FF0000; margin: 2px 0 0 14px; + font-size: 10px; + color: #ff0000; } .multi-wizard .content .section p { - font-size: 11px; - text-align: left; - color: #808080; padding: 0 0 0 40px; + font-size: 11px; + color: #808080; + text-align: left; } .multi-wizard .content .section h3 { - text-align: left; - color: #62798E; - font-weight: bold; - padding: 14px 14px 3px 39px; - /*+text-shadow:0px 1px 1px #EFEFEF;*/ - -moz-text-shadow: 0px 1px 1px #EFEFEF; - -webkit-text-shadow: 0px 1px 1px #EFEFEF; - -o-text-shadow: 0px 1px 1px #EFEFEF; - text-shadow: 0px 1px 1px #EFEFEF; margin: 0; + padding: 14px 14px 3px 39px; + font-weight: bold; + color: #62798e; + /*+text-shadow:0px 1px 1px #EFEFEF;*/ + text-align: left; + text-shadow: 0 1px 1px #efefef; + -moz-text-shadow: 0 1px 1px #efefef; + -webkit-text-shadow: 0 1px 1px #efefef; + -o-text-shadow: 0 1px 1px #efefef; } .multi-wizard .content .section.select-zone { @@ -5696,25 +5616,25 @@ label.error { } .multi-wizard .content.tab-view { - margin: 31px 0px 0px; + margin: 31px 0 0; + padding: 0 8px; background: transparent; - padding: 0px 8px; } .multi-wizard .content.tab-view div.ui-tabs-panel { - border: 1px solid #E2DDDD; clear: both; - height: 72% !important; width: 98%; + height: 72% !important; + height: 591px; + border: 1px solid #e2dddd; + border-radius: 0 3px 10px 10px; + background: #ffffff; + /*+border-radius:0 3px 10px 10px;*/ overflow: auto; overflow-x: hidden; - height: 591px; - /*+border-radius:0 3px 10px 10px;*/ -moz-border-radius: 0 3px 10px 10px; -webkit-border-radius: 0 3px 10px 10px; -khtml-border-radius: 0 3px 10px 10px; - border-radius: 0 3px 10px 10px; - background: #FFFFFF; } .multi-wizard .content.tab-view div.ui-tabs-panel.ui-tabs-hide { @@ -5722,14 +5642,14 @@ label.error { } .multi-wizard.instance-wizard .select-iso .content .select .hypervisor { - float: left; display: block; - clear: both; - margin: 12px 0 0 58px; - /*+placement:shift 0px -6px;*/ position: relative; - left: 0px; + float: left; + clear: both; + /*+placement:shift 0px -6px;*/ top: -6px; + left: 0; + margin: 12px 0 0 58px; } .multi-wizard.instance-wizard .select-iso .content .select .hypervisor select { @@ -5737,14 +5657,14 @@ label.error { } .multi-wizard.instance-wizard .select-iso .content .select .hypervisor label { - color: #000000; - font-size: 11px; - margin-right: 9px; - margin-left: 2px; - /*+placement:shift;*/ position: relative; - left: 0; top: 0; + left: 0; + margin-right: 9px; + /*+placement:shift;*/ + margin-left: 2px; + font-size: 11px; + color: #000000; } .multi-wizard.instance-wizard .select-iso .wizard-step-conditional.select-iso .content .select.selected { @@ -5753,96 +5673,96 @@ label.error { /*** UI widgets*/ .multi-wizard .ui-tabs ul.ui-tabs-nav { - margin-top: 7px; display: block; - height: 41px; - background: transparent; - border: none; - /*+placement:shift -6px 5px;*/ - position: relative; - left: -6px; - top: 5px; - overflow: hidden; display: inline-block; + position: relative; z-index: 10; + top: 5px; + /*+placement:shift -6px 5px;*/ + left: -6px; + height: 41px; + margin-top: 7px; + border: 0; + background: transparent; + overflow: hidden; } .multi-wizard .select-iso .ui-tabs ul { float: left; - left: 0px; top: 1px; + left: 0; } .multi-wizard .ui-tabs li.ui-state-active { - background: #FFFFFF; + background: #ffffff; } .multi-wizard .ui-tabs li.ui-state-default a { - padding-left: 0; padding-right: 0; + padding-left: 0; } .multi-wizard .ui-slider { - width: 136px; - padding: 0; - margin: 8px -2px 3px; - background: url(../images/bg-gradients.png) 0px -307px !important; float: left; + width: 136px; + margin: 8px -2px 3px; + padding: 0; + background: url("../images/bg-gradients.png") 0 -307px !important; } .multi-wizard.instance-wizard .ui-slider { + margin: 8px 0 0 2px; padding: 7px 0 0 8px; - margin: 8px 0px 0px 2px; } .multi-wizard .ui-slider .ui-slider-handle { display: block; - background: url(../images/buttons.png) -622px -274px; + position: relative; + top: -0.5rem; width: 18px; height: 18px; - position: relative; - outline: none; - border: none; - top: -0.5rem; margin-left: -0.9rem; + border: 0; + outline: none; + background: url("../images/buttons.png") -622px -274px; } /*** Select container*/ .multi-wizard .select-container { height: 352px; + margin: 10px 10px 0; + border: 1px solid #d9dfe1; + border-radius: 4px; + /*+border-radius:4px;*/ + border-radius: 4px 4px 4px 4px; overflow: auto; overflow-x: hidden; - border: 1px solid #D9DFE1; - /*+border-radius:4px;*/ -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - margin: 10px 10px 0px; } .multi-wizard .select-container p { padding: 11px; + background: #dfdfdf; color: #424242; - background: #DFDFDF; } .multi-wizard .select-container .select { - font-size: 13px; + display: inline-block; + float: left; + width: 100%; + min-height: 35px; margin: -1px 0 0; padding: 0 0 14px; - min-height: 35px; - width: 100%; - display: inline-block; + border: 0; + background: #ffffff; + font-size: 13px; text-align: left; - float: left; - border: none; - background: #FFFFFF; } .multi-wizard .select-container .select.odd { - background: #EBEFF4; + background: #ebeff4; } .multi-wizard .select-container .select input { @@ -5851,33 +5771,33 @@ label.error { } .multi-wizard .select-container .select .select-desc { - max-width: 335px; - min-height: 28px; - overflow: hidden; + display: inline-block; float: left; clear: none; + max-width: 335px; + min-height: 28px; margin: 21px 0 0; - display: inline-block; + overflow: hidden; } .multi-wizard .select-container .select .select-desc .name { - font-weight: bold; margin: 0 0 5px; + font-weight: bold; } .multi-wizard .select-container .select .select-desc .desc { + display: inline-block; font-size: 11px; color: #808080; - display: inline-block; /*[empty]height:;*/ } /*** Buttons*/ .multi-wizard .buttons { - width: 100%; position: absolute; bottom: 10px; - left: 0px; + left: 0; + width: 100%; } .multi-wizard .buttons .button { @@ -5885,107 +5805,107 @@ label.error { height: 16px; padding: 11px 0 8px; /*+box-shadow:0px 1px 1px #FFFFFF;*/ - -moz-box-shadow: 0px 1px 1px #FFFFFF; - -webkit-box-shadow: 0px 1px 1px #FFFFFF; - -o-box-shadow: 0px 1px 1px #FFFFFF; - box-shadow: 0px 1px 1px #FFFFFF; - border: 1px solid #78818F; - cursor: pointer; - font-weight: bold; + border: 1px solid #78818f; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + box-shadow: 0 1px 1px #ffffff; font-size: 12px; + font-weight: bold; + cursor: pointer; + -moz-box-shadow: 0 1px 1px #ffffff; /*+border-radius:4px;*/ + -webkit-box-shadow: 0 1px 1px #ffffff; + -o-box-shadow: 0 1px 1px #ffffff; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; } .multi-wizard .buttons .button.next { /*+placement:float-right 77px 0px;*/ - float: right; position: relative; + float: right; + top: 0; left: 77px; - top: 0px; - color: #FFFFFF; + border: 1px solid #0069cf; /*+text-shadow:0px -1px 1px #465259;*/ - -moz-text-shadow: 0px -1px 1px #465259; - -webkit-text-shadow: 0px -1px 1px #465259; - -o-text-shadow: 0px -1px 1px #465259; - text-shadow: 0px -1px 1px #465259; - background: #0049FF url(../images/gradients.png) 0px -317px; + border-top: 1px solid #0070fc; + background: #0049ff url("../images/gradients.png") 0 -317px; font-weight: bold; - border: 1px solid #0069CF; - border-top: 1px solid #0070FC; + color: #ffffff; + text-shadow: 0 -1px 1px #465259; + -moz-text-shadow: 0 -1px 1px #465259; + -webkit-text-shadow: 0 -1px 1px #465259; + -o-text-shadow: 0 -1px 1px #465259; } .multi-wizard .buttons .button.next:hover { + border: 1px solid #0035b8; + border-bottom: 1px solid #0062fa; background-position: -3px -368px; - border: 1px solid #0035B8; - border-bottom: 1px solid #0062FA; } .multi-wizard .buttons .button.next.final { - padding: 4px 0px 9px; width: 115px; margin: 3px 0 0; + padding: 4px 0 9px; } .multi-wizard .buttons .button.next.final span { - background: url(../images/icons.png) 0px -349px; - /*+placement:shift 0px 5px;*/ position: relative; - left: 0px; + /*+placement:shift 0px 5px;*/ top: 5px; - padding: 5px 0px 5px 30px; + left: 0; + padding: 5px 0 5px 30px; + background: url("../images/icons.png") 0 -349px; } .multi-wizard .buttons .button.cancel { - border: none; + position: relative; /*+placement:float-right -127px 0px;*/ float: right; - position: relative; + top: 0; left: -127px; - top: 0px; - color: #808080; + padding: 14px 0 0 0; + border: 0; /*+border-radius:0;*/ + border-radius: 0; + border-radius: 0 0 0 0; + box-shadow: 0 0; + background: transparent; + color: #808080; + text-shadow: 0 1px 1px #ffffff; + /*+box-shadow:0px 0px;*/ -moz-border-radius: 0; -webkit-border-radius: 0; -khtml-border-radius: 0; - border-radius: 0; - border-radius: 0 0 0 0; - background: transparent; - /*+box-shadow:0px 0px;*/ - -moz-box-shadow: 0px 0px; - -webkit-box-shadow: 0px 0px; - -o-box-shadow: 0px 0px; - box-shadow: 0px 0px; - -moz-box-shadow: 0px 0px inherit; - -webkit-box-shadow: 0px 0px inherit; - -o-box-shadow: 0px 0px inherit; + -moz-box-shadow: 0 0; + -webkit-box-shadow: 0 0; + -o-box-shadow: 0 0; + -moz-box-shadow: 0 0 inherit; + -webkit-box-shadow: 0 0 inherit; + -o-box-shadow: 0 0 inherit; -moz-box-shadow: inherit; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ -webkit-box-shadow: inherit; -o-box-shadow: inherit; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - padding: 14px 0 0px 0px; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; } .multi-wizard .buttons .button.cancel:hover { - color: #5E5E5E; + color: #5e5e5e; } .multi-wizard .buttons .button.previous { - background: #D6D6D6; - color: #62798E; margin-left: 27px; + background: #d6d6d6; + color: #62798e; } .multi-wizard .buttons .button.previous:hover { - background: #C6C6C6; + background: #c6c6c6; } /** Instance wizard @@ -5994,16 +5914,16 @@ label.error { height: 260px; margin: 0; /*+border-radius:0 0 5px 5px;*/ + border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -khtml-border-radius: 0 0 5px 5px; - border-radius: 0 0 5px 5px; } /*** Data disk offering*/ .multi-wizard.instance-wizard .content .section { - padding: 9px 0 16px; margin: 12px 0 15px 8px; + padding: 9px 0 16px; } .multi-wizard.instance-wizard .content .section.no-thanks { @@ -6016,38 +5936,38 @@ label.error { height: 300px; margin: -7px 6px 0 8px; /*+border-radius:6px;*/ + border-radius: 6px; + border-radius: 6px 6px 6px 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; - border-radius: 6px; - border-radius: 6px 6px 6px 6px; } .multi-wizard.instance-wizard .data-disk-offering .disk-select-group { float: left; - margin-top: 12px; width: 100%; + margin-top: 12px; } .multi-wizard.instance-wizard .data-disk-offering .disk-select-header { - border-bottom: 1px solid #D4D4D4; + height: 17px; /*+border-radius:4px;*/ + padding: 6px; + border-bottom: 1px solid #d4d4d4; + border-radius: 4px; + background: #c2c2c2 0 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - background: #C2C2C2 0px 4px; - padding: 6px; - height: 17px; } .multi-wizard.instance-wizard .disk-select-group.selected .disk-select-header { - background: #505050; + border-radius: 4px 4px 0 0; /*+border-radius:4px 4px 0 0;*/ + background: #505050; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; -khtml-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; } .multi-wizard.instance-wizard .data-disk-offering .disk-select-header input { @@ -6056,38 +5976,38 @@ label.error { .multi-wizard.instance-wizard .data-disk-offering .disk-select-header .title { float: left; - font-size: 14px; padding: 2px; + font-size: 14px; } .multi-wizard.instance-wizard .disk-select-group.selected .disk-select-header .title { - color: #FFFFFF; + color: #ffffff; /*+text-shadow:0px -1px #000000;*/ - -moz-text-shadow: 0px -1px #000000; - -webkit-text-shadow: 0px -1px #000000; - -o-text-shadow: 0px -1px #000000; - text-shadow: 0px -1px #000000; + text-shadow: 0 -1px #000000; + -moz-text-shadow: 0 -1px #000000; + -webkit-text-shadow: 0 -1px #000000; + -o-text-shadow: 0 -1px #000000; } .multi-wizard.instance-wizard .data-disk-offering .multi-disk-select-container { max-height: 257px; - overflow: auto; - border: 1px solid #DDDBDB; padding: 13px; - background: #E4E4E4; + border: 1px solid #dddbdb; + background: #e4e4e4; + overflow: auto; } .multi-wizard.instance-wizard .data-disk-offering .disk-select-group .select-container { - max-height: 114px; + display: none; float: left; + max-height: 114px; margin: 0; - border: none; /*+border-radius:0;*/ + border: 0; + border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -khtml-border-radius: 0; - border-radius: 0; - display: none; } .multi-wizard.instance-wizard .data-disk-offering .disk-select-group.selected .select-container { @@ -6095,8 +6015,8 @@ label.error { } .multi-wizard.instance-wizard .data-disk-offering .disk-select-group .select { - padding: 0 0 17px; height: 0; + padding: 0 0 17px; } .multi-wizard.instance-wizard .data-disk-offering .disk-select-group.custom-size .section.custom-size { @@ -6112,8 +6032,8 @@ label.error { } .multi-wizard.instance-wizard .data-disk-offering.required .select-container { - height: 344px; position: relative; + height: 344px; margin-top: 9px !important; } @@ -6125,18 +6045,18 @@ label.error { height: 213px; margin: -7px 6px 0 8px; /*+border-radius:6px;*/ + border-radius: 6px; + border-radius: 6px 6px 6px 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; - border-radius: 6px; - border-radius: 6px 6px 6px 6px; } .multi-wizard.instance-wizard .content .section input { float: left; } -.multi-wizard.instance-wizard .content .section input[type=radio] { +.multi-wizard.instance-wizard .content .section input[type='radio'] { margin: 8px 2px 0 17px; } @@ -6147,27 +6067,27 @@ label.error { } .multi-wizard.instance-wizard .content .section .select-area label { - margin: 12px 0px 0px; + margin: 12px 0 0; } .multi-wizard.instance-wizard .content .section label.size { - color: #647A8E; font-weight: bold; + color: #647a8e; /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; } .multi-wizard.instance-wizard .section.custom-size { position: relative; - background: #F4F4F4; + box-sizing: border-box; + width: 100%; + margin: 12px 0; padding: 7px; border-radius: 4px; - width: 100%; - box-sizing: border-box; - margin: 12px 0; + background: #f4f4f4; } .multi-wizard.instance-wizard .section.custom-size.custom-disk-size { @@ -6177,37 +6097,37 @@ label.error { .multi-wizard.instance-wizard .section.custom-iops { position: relative; - background: #F4F4F4; padding: 7px; border-radius: 4px; + background: #f4f4f4; } .multi-wizard.instance-wizard .section.custom-iops-do { position: relative; - background: #F4F4F4; - padding: 7px; - border-radius: 4px; box-sizing: border-box; width: 426px; + padding: 7px; + border-radius: 4px; + background: #f4f4f4; } -.multi-wizard.instance-wizard .section.custom-size input[type=radio] { +.multi-wizard.instance-wizard .section.custom-size input[type='radio'] { float: left; } -.multi-wizard.instance-wizard .section.custom-size input[type=text] { +.multi-wizard.instance-wizard .section.custom-size input[type='text'] { float: left; width: 28px; margin: 6px -1px 0 8px; } -.multi-wizard.instance-wizard .section.custom-iops input[type=text] { +.multi-wizard.instance-wizard .section.custom-iops input[type='text'] { float: left; width: 28px; margin: 6px -1px 0 8px; } -.multi-wizard.instance-wizard .section.custom-iops-do input[type=text] { +.multi-wizard.instance-wizard .section.custom-iops-do input[type='text'] { float: left; width: 28px; margin: 6px -1px 0 8px; @@ -6261,8 +6181,8 @@ label.error { } .instance-wizard .step.data-disk-offering .custom-iops-do .field { - width: 30%; float: left; + width: 30%; margin-bottom: 5px; } @@ -6301,14 +6221,14 @@ label.error { } .instance-wizard .step.service-offering .custom-size .field { - width: 30%; float: left; + width: 30%; margin-bottom: 13px; } .instance-wizard .step.service-offering .custom-iops .field { - width: 30%; float: left; + width: 30%; margin-bottom: 13px; } @@ -6338,20 +6258,20 @@ label.error { /*** Network*/ .multi-wizard.instance-wizard .no-network { - background: #FFFFFF; - width: 773px; - height: 52px; position: absolute; + z-index: 1; top: 98px; left: 11px; + width: 773px; + height: 52px; /*+border-radius:5px;*/ + padding: 162px 0 194px; + border-radius: 5px; + border-radius: 5px 5px 5px 5px; + background: #ffffff; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; - border-radius: 5px; - border-radius: 5px 5px 5px 5px; - z-index: 1; - padding: 162px 0 194px; } .multi-wizard.instance-wizard .no-network p { @@ -6360,9 +6280,9 @@ label.error { } .multi-wizard.instance-wizard .select-network .select table { + float: left; width: 405px; margin: 4px 12px 0; - float: left; } .multi-wizard.instance-wizard .select-network .select table thead { @@ -6371,15 +6291,15 @@ label.error { } .multi-wizard.instance-wizard .select-network .select table td { - padding: 0; - margin: 0; vertical-align: top; + margin: 0; + padding: 0; } .multi-wizard.instance-wizard .select-network .select table .select-container { - margin: 0px; - border: 0; height: 223px; + margin: 0; + border: 0; } .multi-wizard.instance-wizard .select-network.no-add-network .select table .select-container { @@ -6392,18 +6312,18 @@ label.error { } .multi-wizard.instance-wizard .select-network .select.new-network table .select-container .select { - margin: -12px 0 0; position: relative; + margin: -12px 0 0; text-align: right; } .multi-wizard.instance-wizard .select-network .select.new-network table .select-container .select select { + position: relative; + top: 0; + /*+placement:shift;*/ + left: 0; width: 145px; margin: 4px 0 0; - /*+placement:shift;*/ - position: relative; - left: 0; - top: 0; } .multi-wizard.instance-wizard .select-network .select.new-network { @@ -6415,18 +6335,18 @@ label.error { } .multi-wizard.instance-wizard .select-network .main-desc { - width: 252px; + float: left; top: 12px; left: 12px; - float: left; + width: 252px; } .multi-wizard.instance-wizard .select-network .select .secondary-input { float: right; width: 80px; height: 48px; + border-left: 1px solid #d7d7d7; font-size: 11px; - border-left: 1px solid #D7D7D7; color: #000000; } @@ -6435,27 +6355,27 @@ label.error { } .multi-wizard.instance-wizard .select-network .select .secondary-input input { + position: relative; + top: 21px; + /*+placement:shift 9px 21px;*/ + left: 9px; margin: 0 !important; padding: 0 !important; - /*+placement:shift 9px 21px;*/ - position: relative; - left: 9px; - top: 21px; } .multi-wizard.instance-wizard .select-network .select .secondary-input .name { - float: right; - /*+placement:shift -16px 22px;*/ position: relative; - left: -16px; + /*+placement:shift -16px 22px;*/ + float: right; top: 22px; + left: -16px; } .multi-wizard.instance-wizard .select-network .select-container .select { - width: 100%; - float: left; - padding: 0; position: relative; + float: left; + width: 100%; + padding: 0; } .multi-wizard.instance-wizard .select-network .select-container .select.advanced { @@ -6463,25 +6383,25 @@ label.error { } .multi-wizard.instance-wizard .select-network .select .advanced-options { - background: url(../images/sprites.png) -7px -795px; + float: right; width: 20px; height: 20px; - float: right; - cursor: pointer; margin-top: 15px; margin-right: 13px; + background: url("../images/sprites.png") -7px -795px; + cursor: pointer; } .multi-wizard.instance-wizard .select-network .select .advanced-options:hover, .multi-wizard.instance-wizard .select-network .select.advanced .advanced-options { - background: url(../images/sprites.png) -32px -795px; + background: url("../images/sprites.png") -32px -795px; } .multi-wizard.instance-wizard .select-network .select .specify-ip { display: none; position: absolute; top: 45px; - left: 0px; + left: 0; width: 100%; } @@ -6490,26 +6410,26 @@ label.error { } .multi-wizard.instance-wizard .select-network .select.advanced .specify-ip input { - margin: 0px 0 0 15px; width: 138px; + margin: 0 0 0 15px; } .multi-wizard.instance-wizard .select-network .select-container .select input { - margin: 21px 15px 0px; float: left; + margin: 21px 15px 0; } .multi-wizard.instance-wizard .select-network .select-container .select label { float: left; - font-size: 11px; margin: 4px 0 0 42px; - color: #4E6B82; + font-size: 11px; + color: #4e6b82; } .multi-wizard.instance-wizard .select-network .select-vpc { float: left; + margin: 7px 0 7px 7px; padding: 3px; - margin: 7px 0px 7px 7px; } .multi-wizard.instance-wizard .select-network.no-add-network .select-vpc { @@ -6528,14 +6448,14 @@ label.error { .multi-wizard.instance-wizard .select-network .select.new-network .advanced-options { /*+placement:shift 379px 15px;*/ position: relative; - left: 379px; - top: 15px; position: absolute; + top: 15px; + left: 379px; } .multi-wizard.instance-wizard .select-network .select.new-network .select.advanced { - height: 106px; position: relative; + height: 106px; } .multi-wizard.instance-wizard .select-network .select.new-network.unselected .select.advanced { @@ -6566,16 +6486,16 @@ label.error { .multi-wizard.instance-wizard .select-network .select.new-network .field { /*+placement:shift 41px 21px;*/ position: relative; - left: 41px; + position: absolute; top: 21px; + left: 41px; font-size: 11px; color: #000000; - position: absolute; } .multi-wizard.instance-wizard .select-network .select.new-network .field .name { - width: 99px; float: left; + width: 99px; padding: 3px 0 0; /*[empty]display:;*/ } @@ -6607,19 +6527,19 @@ label.error { } .multi-wizard.instance-wizard .select-network .select-container .select .select-desc .desc { - font-size: 11px; - color: #808080; float: left; max-width: 113px; + font-size: 11px; + color: #808080; } .multi-wizard.instance-wizard .select-network .select-container .select .select-desc .name { + float: left; width: 116px; + margin: 0 16px 0 0; font-size: 11px; font-weight: normal; - float: left; color: #000000; - margin: 0 16px 0 0; } .multi-wizard.instance-wizard .select-network .select.new-network .select-desc .name { @@ -6639,15 +6559,15 @@ label.error { .multi-wizard .review .select-container .select .name { float: left; - margin: 13px 22px 0 14px; width: 127px; + margin: 13px 22px 0 14px; font-size: 11px; } .multi-wizard .review .select-container .select .value { float: left; - margin: 9px 21px 0; width: 136px; + margin: 9px 21px 0; } .multi-wizard .review .select-container .select .value span { @@ -6656,112 +6576,112 @@ label.error { .multi-wizard .review .select-container .select .edit { float: right; - cursor: pointer; height: 18px; - margin: 11px 20px 0 0px; - background: url(../images/icons.png) -10px -452px; - padding: 0px 0px 0 20px; + margin: 11px 20px 0 0; + padding: 0 0 0 20px; + background: url("../images/icons.png") -10px -452px; + cursor: pointer; } .multi-wizard .review .select-container .select.odd .edit a { - background: #EBEFF4; + background: #ebeff4; } .multi-wizard .review .select-container .select .edit a { - font-size: 10px; - color: #0000FF; - text-decoration: none; padding: 5px 0 8px; - background: #FFFFFF; + background: #ffffff; + font-size: 10px; + color: #0000ff; + text-decoration: none; } .multi-wizard .review .select-container .select input, .multi-wizard .review .select-container .select select { - margin: 0; - width: 151px; float: left; + width: 151px; + margin: 0; } /*** Diagram*/ .multi-wizard.instance-wizard .diagram { - width: 1px; - height: 502px; position: absolute; top: 109px; left: 465px; + width: 1px; + height: 502px; } .multi-wizard.instance-wizard .diagram .part { - background: url(../images/instance-wizard-parts.png) no-repeat 0px 0px; + background: url("../images/instance-wizard-parts.png") no-repeat 0 0; } .multi-wizard.instance-wizard .diagram .part.zone-plane { + position: absolute; width: 354px; height: 117px; - background-position: -38px -55px; /*+placement:displace -38px 259px;*/ - position: absolute; margin-top: 259px; + background-position: -38px -55px; } .multi-wizard.instance-wizard .diagram .part.computer-tower-front { + position: absolute; width: 95px; height: 254px; - background-position: -54px -210px; /*+placement:displace 44px 92px;*/ - position: absolute; - margin-left: 44px; margin-top: 92px; + margin-left: 44px; + background-position: -54px -210px; } .multi-wizard.instance-wizard .diagram .part.computer-tower-back { + position: absolute; width: 194px; height: 271px; - background-position: -148px -192px; /*+placement:displace 138px 74px;*/ - position: absolute; - margin-left: 138px; margin-top: 74px; + margin-left: 138px; + background-position: -148px -192px; } .multi-wizard.instance-wizard .diagram .part.os-drive { + position: absolute; width: 194px; height: 86px; - background-position: -348px -192px; /*+placement:displace 138px 74px;*/ - position: absolute; - margin-left: 138px; margin-top: 74px; + margin-left: 138px; + background-position: -348px -192px; } .multi-wizard.instance-wizard .diagram .part.cpu { + position: absolute; width: 194px; height: 49px; - background-position: -344px -278px; /*+placement:displace 138px 156px;*/ - position: absolute; - margin-left: 138px; margin-top: 156px; + margin-left: 138px; + background-position: -344px -278px; } .multi-wizard.instance-wizard .diagram .part.hd { + position: absolute; width: 194px; height: 44px; - background-position: -344px -331px; /*+placement:displace 138px 208px;*/ - position: absolute; - margin-left: 138px; margin-top: 208px; + margin-left: 138px; + background-position: -344px -331px; } .multi-wizard.instance-wizard .diagram .part.network-card { + position: absolute; width: 194px; height: 44px; - background-position: -344px -380px; /*+placement:displace 138px 260px;*/ - position: absolute; - margin-left: 138px; margin-top: 260px; + margin-left: 138px; + background-position: -344px -380px; } /** Add zone wizard*/ @@ -6771,38 +6691,38 @@ label.error { } .multi-wizard.zone-wizard ul.subnav { - text-align: left; - /*+placement:shift 30px 104px;*/ position: relative; - left: 30px; - top: 104px; + /*+placement:shift 30px 104px;*/ position: absolute; + top: 104px; + left: 30px; + text-align: left; list-style: disc inside; } .multi-wizard.zone-wizard ul.subnav li { float: left; + height: 20px; + margin-right: 34px; padding: 0; font-size: 12px; white-space: nowrap; + color: #9a9a9a; text-transform: uppercase; list-style: none; - height: 20px; - margin-right: 34px; - color: #9A9A9A; } .multi-wizard.zone-wizard ul.subnav li:after { - content: ">"; - font-size: 13px; - /*+placement:shift 4px -1px;*/ + content: '>'; position: relative; - left: 4px; + /*+placement:shift 4px -1px;*/ top: -1px; + left: 4px; + font-size: 13px; } .multi-wizard.zone-wizard ul.subnav li.active { - color: #0000FF; + color: #0000ff; } .multi-wizard.zone-wizard .ui-tabs-panel { @@ -6814,9 +6734,9 @@ label.error { .multi-wizard.zone-wizard ul.ui-tabs-nav { /*+placement:shift 0px 0px;*/ position: relative; - left: 0px; - top: 0px; float: left; + top: 0; + left: 0; margin: 6px 0 3px 3px; } @@ -6826,65 +6746,65 @@ label.error { } .multi-wizard.zone-wizard .setup-guest-traffic .select-container { - background: #E9EAEB; + background: #e9eaeb; overflow: hidden; } .multi-wizard.zone-wizard .setup-guest-traffic.basic .select-container { - background: #FFFFFF; + background: #ffffff; } .multi-wizard.zone-wizard .main-desc { - width: 516px; + position: relative; float: left; /*+placement:shift 0;*/ - position: relative; - left: 0; top: 0; - margin: 23px 0 0px 6px; - font-weight: 100; + left: 0; + width: 516px; + margin: 23px 0 0 6px; font-size: 14px; + font-weight: 100; color: #424242; } .multi-wizard.zone-wizard .review .main-desc.pre-setup { - width: 90%; - font-size: 18px; - color: #2C4159; - background: url(../images/icons.png) no-repeat 74px -224px; - padding: 1px 0 1px 20px; - text-align: center; - margin-left: 50px; - font-weight: 100; - /*+placement:shift 0px 153px;*/ position: relative; - left: 0px; top: 153px; + left: 0; left: -10px; + width: 90%; + margin-left: 50px; + padding: 1px 0 1px 20px; + background: url("../images/icons.png") no-repeat 74px -224px; + /*+placement:shift 0px 153px;*/ + font-size: 18px; + font-weight: 100; + color: #2c4159; + text-align: center; /*+text-shadow:0px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px #FFFFFF; - -o-text-shadow: 0px 1px #FFFFFF; - text-shadow: 0px 1px #FFFFFF; + text-shadow: 0 1px #ffffff; + -moz-text-shadow: 0 1px #ffffff; + -webkit-text-shadow: 0 1px #ffffff; + -o-text-shadow: 0 1px #ffffff; } .multi-wizard.zone-wizard .info-desc { - font-size: 11px; float: left; - text-align: left; - overflow: auto; - overflow-x: hidden; - padding: 11px; width: 698px; margin: 29px 0 68px 5px; - background: #FFFFFF; - border: 1px solid #C7C7C7; + padding: 11px; + border: 1px solid #c7c7c7; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: #ffffff; + font-size: 11px; + text-align: left; /*+border-radius:4px;*/ + overflow: auto; + overflow-x: hidden; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; } .multi-wizard.zone-wizard .setup-storage-traffic .info-desc { @@ -6902,8 +6822,8 @@ label.error { } .multi-wizard.zone-wizard .main-desc em { - text-decoration: underline; font-weight: bold; + text-decoration: underline; } .multi-wizard.zone-wizard .progress ul li { @@ -6921,26 +6841,26 @@ label.error { } .multi-wizard.zone-wizard .select-network .content .section { + position: relative; + top: 14px; + /*+placement:shift 0px 14px;*/ + left: 0; width: 665px; height: 430px; - /*+placement:shift 0px 14px;*/ - position: relative; - left: 0px; - top: 14px; } .multi-wizard.zone-wizard .select-network .content { + float: none; width: 100%; height: 461px; - float: none; margin: 7px auto auto; padding-bottom: 28px; } .multi-wizard.zone-wizard .select-network-model .select-area { - height: 181px; - width: 586px; position: relative; + width: 586px; + height: 181px; } .multi-wizard.zone-wizard .select-network-model .select-area.basic-zone { @@ -6952,49 +6872,49 @@ label.error { } .multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode { - height: 98px; - overflow: hidden; - float: left; - margin: 5px 0 0; position: absolute; + float: left; top: 114px; left: 9px; + height: 98px; + margin: 5px 0 0; + overflow: hidden; } .multi-wizard.zone-wizard .select-network-model .select-area.disabled .isolation-mode { /*+opacity:50%;*/ + opacity: 0.5; filter: alpha(opacity=50); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); -moz-opacity: 0.5; - opacity: 0.5; } .multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .title { - font-size: 15px; - color: #5D7387; - /*+placement:shift 36px 2px;*/ position: relative; - left: 36px; top: 2px; + /*+placement:shift 36px 2px;*/ + left: 36px; + font-size: 15px; + color: #5d7387; } .multi-wizard.zone-wizard .select-network-model .select-area .desc { + position: relative; + top: 12px; + left: -27px; width: 373px; height: 70px; - color: #727272; - background: #EFEFEF; - padding: 12px 18px 25px; /*+placement:shift -27px 12px;*/ - position: relative; - left: -27px; - top: 12px; + padding: 12px 18px 25px; + border-radius: 7px; + border-radius: 7px 7px 7px 7px; /*+border-radius:7px;*/ + background: #efefef; + line-height: 19px; + color: #727272; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px; - border-radius: 7px; - border-radius: 7px 7px 7px 7px; - line-height: 19px; } .multi-wizard.zone-wizard .select-network-model .select-area.basic-zone .desc { @@ -7009,15 +6929,15 @@ label.error { .multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .select-area { width: 586px; height: 61px; - overflow: hidden; margin: 0; - padding: 0px 0 9px; + padding: 0 0 9px; background: none; + overflow: hidden; } .multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .select-area label { - font-size: 11px; margin: 24px 0 0 2px; + font-size: 11px; } .multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .select-area input { @@ -7030,17 +6950,17 @@ label.error { } .multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .select-area .desc { - padding: 6px 7px 11px; + position: relative; + float: right; + top: 12px; + left: -27px; width: 388px; height: 29px; - font-size: 11px; margin-right: 9px; - background: #EFEFEF; - float: right; /*+placement:shift -27px 12px;*/ - position: relative; - left: -27px; - top: 12px; + padding: 6px 7px 11px; + background: #efefef; + font-size: 11px; } .multi-wizard.zone-wizard .content.input-area { @@ -7053,61 +6973,61 @@ label.error { /*** Add physical network -- network form items*/ .multi-wizard.zone-wizard .setup-physical-network .content.input-area { + position: relative; width: 627px; height: 396px; background: transparent; - position: relative; } .multi-wizard.zone-wizard .setup-physical-network .drag-helper-icon { + position: relative; + position: absolute; + top: 303px; + /*+placement:shift 134px 303px;*/ + left: 134px; width: 80px; height: 84px; - background: url(../images/sprites.png) no-repeat 0px -1365px; - /*+placement:shift 134px 303px;*/ - position: relative; - left: 134px; - top: 303px; - position: absolute; + background: url("../images/sprites.png") no-repeat 0 -1365px; } .multi-wizard.zone-wizard .select-container.multi { display: inline-block; - width: 490px; - margin: 6px auto auto; float: right; + width: 490px; height: auto; - border: 1px solid #BFBFBF; - overflow: visible; + margin: 6px auto auto; + border: 1px solid #bfbfbf; + border-radius: 4px; /*+border-radius:4px;*/ + border-radius: 4px 4px 4px 4px; + box-shadow: inset 0 1px 2px #cbcaca; + background: #f8f6f6; + overflow: visible; -moz-border-radius: 4px; + /*+box-shadow:inset 0px 1px 2px #CBCACA;*/ -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - /*+box-shadow:inset 0px 1px 2px #CBCACA;*/ - -moz-box-shadow: inset 0px 1px 2px #CBCACA; - -webkit-box-shadow: inset 0px 1px 2px #CBCACA; - -o-box-shadow: inset 0px 1px 2px #CBCACA; - box-shadow: inset 0px 1px 2px #CBCACA; - background: #F8F6F6; + -moz-box-shadow: inset 0 1px 2px #cbcaca; + -webkit-box-shadow: inset 0 1px 2px #cbcaca; + -o-box-shadow: inset 0 1px 2px #cbcaca; /*[empty]display:;*/ } .multi-wizard.zone-wizard .select-container.multi.disabled { - border: 1px dotted #A7A7A7; + opacity: 0.4; /*+opacity:40%;*/ + border: 1px dotted #a7a7a7; filter: alpha(opacity=40); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); -moz-opacity: 0.4; - opacity: 0.4; } .multi-wizard.zone-wizard .select-container.multi .physical-network-icon { + float: left; width: 61px; height: 53px; - float: left; - border-right: 1px solid #CDCDCD; - background: url(../images/sprites.png) -109px -1393px; + border-right: 1px solid #cdcdcd; + background: url("../images/sprites.png") -109px -1393px; } .multi-wizard.zone-wizard .select-container.multi input { @@ -7127,37 +7047,37 @@ label.error { } .multi-wizard.zone-wizard .select-container.multi .drop-container { - background: #DAE2EC; + position: relative; + clear: both; width: 484px; height: 114px; - clear: both; - position: relative; + border: 3px dashed #bbbfc4; /*+border-radius:4px;*/ + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: #dae2ec; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - border: 3px dashed #BBBFC4; } .multi-wizard.zone-wizard .select-container.multi .drop-container ul { - background: #DAE2EC; + position: absolute; /*+border-radius:5px;*/ + top: 4px; + left: 2px; + width: 99%; + height: 94%; + border-radius: 5px; + border-radius: 5px 5px 5px 5px; + background: #dae2ec; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; - border-radius: 5px; - border-radius: 5px 5px 5px 5px; - width: 99%; - height: 94%; - top: 4px; - left: 2px; - position: absolute; } .multi-wizard.zone-wizard .select-container.multi .drop-container ul.active { - background: #DFEAFF; + background: #dfeaff; } .multi-wizard.zone-wizard .select-container.multi .drop-container ul li { @@ -7166,56 +7086,56 @@ label.error { } .multi-wizard.zone-wizard .select-container.multi .drop-container span.empty-message { - text-align: center; - color: #959BA0; - font-size: 13px; - /*+placement:shift 0px 45px;*/ position: relative; - left: 0px; top: 45px; + left: 0; + /*+placement:shift 0px 45px;*/ + font-size: 13px; + color: #959ba0; + text-align: center; } /*** Add physical network -- traffic type drag area*/ .multi-wizard.zone-wizard .traffic-types-drag-area { + position: relative; + float: left; + top: 0; + left: 3px; + /*+border-radius:4px;*/ width: 96px; height: 370px; - background: #F0F1F2; - border: 1px solid #DCCACA; - /*+border-radius:4px;*/ + margin: 8px 0 0; + padding: 0; + border: 1px solid #dccaca; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: #f0f1f2; + text-align: left; + /*+placement:shift 3px 0px;*/ -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - float: left; - text-align: left; - padding: 0; - margin: 8px 0 0; - /*+placement:shift 3px 0px;*/ - position: relative; - left: 3px; - top: 0px; } .multi-wizard.zone-wizard .traffic-types-drag-area .header { margin: 0; + padding: 8px 0 7px; + border-bottom: 1px solid #dccaca; + border-radius: 4px 4px 0 0; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + background: #f8f8f8; font-size: 13px; font-weight: bold; - color: #5C5C5C; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - background: #F8F8F8; + color: #5c5c5c; text-align: center; - padding: 8px 0 7px; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; /*+border-radius:4px 4px 0 0;*/ + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; -khtml-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; - border-bottom: 1px solid #DCCACA; } .multi-wizard.zone-wizard .traffic-types-drag-area > ul { @@ -7224,11 +7144,11 @@ label.error { .multi-wizard.zone-wizard .traffic-types-drag-area > ul > li { float: left; - font-size: 11px; width: 100%; - background: transparent; height: 83px; margin: 16px 13px 0 0; + background: transparent; + font-size: 11px; } .multi-wizard.zone-wizard .traffic-types-drag-area > ul > li.required { @@ -7243,36 +7163,36 @@ label.error { width: 60px; height: 54px; margin-left: 16px; - background: #E4E4E4; + border-bottom: 1px solid #ffffff; /*+border-radius:5px;*/ - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - -khtml-border-radius: 5px; border-radius: 5px; border-radius: 5px 5px 5px 5px; + box-shadow: inset 0 2px 4px #999696; + background: #e4e4e4; + -moz-border-radius: 5px; /*+box-shadow:inset 0px 2px 4px #999696;*/ - -moz-box-shadow: inset 0px 2px 4px #999696; - -webkit-box-shadow: inset 0px 2px 4px #999696; - -o-box-shadow: inset 0px 2px 4px #999696; - box-shadow: inset 0px 2px 4px #999696; - border-bottom: 1px solid #FFFFFF; + -webkit-border-radius: 5px; + -khtml-border-radius: 5px; + -moz-box-shadow: inset 0 2px 4px #999696; + -webkit-box-shadow: inset 0 2px 4px #999696; + -o-box-shadow: inset 0 2px 4px #999696; } .multi-wizard.zone-wizard .traffic-types-drag-area > ul > li ul.container li { /*+placement:shift 1px 2px;*/ position: relative; - left: 1px; top: 2px; + left: 1px; } .multi-wizard.zone-wizard li.traffic-type-draggable { display: block; - background: transparent url(../images/sprites.png) no-repeat 0px -1161px; + z-index: 5000; width: 51px; height: 51px; margin: auto; + background: transparent url("../images/sprites.png") no-repeat 0 -1161px; cursor: move; - z-index: 5000; } .multi-wizard.zone-wizard .traffic-types-drag-area li.traffic-type-draggable:hover, @@ -7285,26 +7205,26 @@ label.error { .multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable:hover { /*+placement:shift -2px -4px;*/ position: relative; - left: -2px; top: -4px; + left: -2px; } .multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable:hover { /*+placement:shift -8px -6px;*/ position: relative; - left: -8px; top: -6px; - margin-right: 0px; + left: -8px; width: 70px !important; + margin-right: 0; } .multi-wizard.zone-wizard li.traffic-type-draggable.disabled { /*+opacity:50%;*/ + opacity: 0.5; + cursor: not-allowed; filter: alpha(opacity=50); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); -moz-opacity: 0.5; - opacity: 0.5; - cursor: not-allowed; } .multi-wizard.zone-wizard .traffic-types-drag-area ul > li.disabled { @@ -7313,16 +7233,16 @@ label.error { .multi-wizard.zone-wizard li.traffic-type-draggable.disabled { /*+opacity:50%;*/ + opacity: 0.5; + cursor: not-allowed; filter: alpha(opacity=50); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); -moz-opacity: 0.5; - opacity: 0.5; - cursor: not-allowed; } .multi-wizard.zone-wizard li.traffic-type-draggable.management { - background-position: 0px -1161px; height: 52px; + background-position: 0 -1161px; } .multi-wizard.zone-wizard .traffic-types-drag-area li.traffic-type-draggable.management:hover, @@ -7364,16 +7284,16 @@ label.error { } .multi-wizard.zone-wizard .traffic-types-drag-area > ul > li .info { + float: left; width: 100%; margin: 5px 0 0 -2px; line-height: 14px; - float: left; } .multi-wizard.zone-wizard .traffic-types-drag-area > ul > li .info .title { - text-align: center; font-weight: bold; color: #787879; + text-align: center; } .multi-wizard.zone-wizard .traffic-types-drag-area > ul > li .info .desc { @@ -7386,118 +7306,118 @@ label.error { } .multi-wizard.zone-wizard .drop-container .traffic-type-draggable > .edit-traffic-type { - cursor: pointer; display: block; + position: relative; + top: 70px; + left: -16px; width: 59px; height: 23px; padding: 2px 9px 0 12px; - background: url(../images/bg-gradients.png) 0px -1342px; - border: 1px solid #C4C4C4; /*+border-radius:4px;*/ + border: 1px solid #c4c4c4; + border-top: 1px solid #ffffff; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: url("../images/bg-gradients.png") 0 -1342px; + cursor: pointer; + /*+placement:shift -16px 70px;*/ -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - border-top: 1px solid #FFFFFF; - /*+placement:shift -16px 70px;*/ - position: relative; - left: -16px; - top: 70px; } .multi-wizard.zone-wizard .drop-container .traffic-type-draggable > .edit-traffic-type:hover { - background-position: 0px -105px; - color: #FFFFFF; + box-shadow: inset 0 -1px 1px #727272; + background-position: 0 -105px; /*+box-shadow:inset 0px -1px 1px #727272;*/ - -moz-box-shadow: inset 0px -1px 1px #727272; - -webkit-box-shadow: inset 0px -1px 1px #727272; - -o-box-shadow: inset 0px -1px 1px #727272; - box-shadow: inset 0px -1px 1px #727272; + color: #ffffff; + -moz-box-shadow: inset 0 -1px 1px #727272; + -webkit-box-shadow: inset 0 -1px 1px #727272; + -o-box-shadow: inset 0 -1px 1px #727272; } .multi-wizard.zone-wizard .drop-container .traffic-type-draggable > .edit-traffic-type:hover span { - color: #FFFFFF; + color: #ffffff; /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; + text-shadow: 0 1px 1px #000000; + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; } .multi-wizard.zone-wizard .drop-container .traffic-type-draggable:hover > .edit-traffic-type { /*+placement:shift -7px 76px;*/ position: relative; - left: -7px; top: 76px; + left: -7px; } .multi-wizard.zone-wizard .drop-container .traffic-type-draggable .edit-traffic-type span { - text-align: center; font-size: 11px; font-weight: bold; - color: #4E73A6; + color: #4e73a6; + text-align: center; /*+text-shadow:0px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px #FFFFFF; - -o-text-shadow: 0px 1px #FFFFFF; - text-shadow: 0px 1px #FFFFFF; + text-shadow: 0 1px #ffffff; + -moz-text-shadow: 0 1px #ffffff; + -webkit-text-shadow: 0 1px #ffffff; + -o-text-shadow: 0 1px #ffffff; } .multi-wizard.zone-wizard .drop-container .traffic-type-draggable .edit-traffic-type span.icon { float: left; - background: url(../images/sprites.png) -7px -4px; padding: 7px 11px 0 7px; + background: url("../images/sprites.png") -7px -4px; } .multi-wizard.zone-wizard .traffic-type-draggable .edit-traffic-type span.name { + position: relative; float: left; + top: -16px; + left: -13px; width: 76px; - font-size: 10px; - padding: 2px; - color: #4E5F6F; - background: #DBE1E9; + margin-bottom: -13px; /*+border-radius:4px 4px 0 0;*/ - -moz-border-radius: 4px 4px 0 0; - -webkit-border-radius: 4px 4px 0 0; - -khtml-border-radius: 4px 4px 0 0; + padding: 2px; + border: 1px solid #c3bcbc; + border-bottom: 1px solid #d1cdcd; border-radius: 4px 4px 0 0; /*+placement:shift -13px -16px;*/ - position: relative; - left: -13px; - top: -16px; - margin-bottom: -13px; - border: 1px solid #C3BCBC; - border-bottom: 1px solid #D1CDCD; + box-shadow: inset 0 1px 1px #f5f4f4; + background: #dbe1e9; + font-size: 10px; + color: #4e5f6f; + -moz-border-radius: 4px 4px 0 0; + -webkit-border-radius: 4px 4px 0 0; /*+box-shadow:inset 0px 1px 1px #F5F4F4;*/ - -moz-box-shadow: inset 0px 1px 1px #F5F4F4; - -webkit-box-shadow: inset 0px 1px 1px #F5F4F4; - -o-box-shadow: inset 0px 1px 1px #F5F4F4; - box-shadow: inset 0px 1px 1px #F5F4F4; + -khtml-border-radius: 4px 4px 0 0; + -moz-box-shadow: inset 0 1px 1px #f5f4f4; + -webkit-box-shadow: inset 0 1px 1px #f5f4f4; + -o-box-shadow: inset 0 1px 1px #f5f4f4; } .multi-wizard.zone-wizard .traffic-type-draggable .edit-traffic-type:hover span.name { - background: #C4C3C3; + background: #c4c3c3; } /*** Configure guest network -- tabs*/ .multi-wizard.zone-wizard .setup-guest-traffic .ui-widget-content { - width: 682px; - height: 281px; - border-bottom: none; - border-right: none; - /*+placement:shift -1px -7px;*/ position: relative; - left: -1px; top: -7px; + left: -1px; + width: 682px; + /*+placement:shift -1px -7px;*/ + height: 281px; + border-right: 0; + border-bottom: 0; } .multi-wizard.zone-wizard .setup-guest-traffic ul.ui-tabs-nav { - width: 456px; - /*+placement:shift -4px -8px;*/ position: relative; - left: -4px; + /*+placement:shift -4px -8px;*/ top: -8px; + left: -4px; + width: 456px; } .multi-wizard.zone-wizard .setup-guest-traffic .main-desc { @@ -7506,15 +7426,15 @@ label.error { } .multi-wizard.zone-wizard .setup-guest-traffic .content { - margin-left: -4px; margin-top: 2px; + margin-left: -4px; } /*** Multi-edit*/ .multi-wizard.zone-wizard .multi-edit { - width: 732px; float: left; - margin-left: 0px; + width: 732px; + margin-left: 0; } .multi-wizard.zone-wizard .multi-edit table { @@ -7533,8 +7453,8 @@ label.error { } .multi-wizard.zone-wizard .multi-edit table input { - margin: 2px 0px 2px -5px; - padding: 2px 0px; + margin: 2px 0 2px -5px; + padding: 2px 0; } .multi-wizard.zone-wizard .multi-edit .data { @@ -7556,72 +7476,72 @@ label.error { } .multi-wizard.zone-wizard .multi-edit .data-body .data-item td span { + max-width: 91px; font-size: 10px; text-overflow: ellipsis; - max-width: 91px; } /*** Select container fields*/ .multi-wizard.zone-wizard .select-container .field { + float: left; width: 100%; padding-bottom: 13px; - float: left; } .multi-wizard.zone-wizard .select-container .field.odd { - background: #EBEFF5; + background: #ebeff5; } .multi-wizard.zone-wizard .select-container .field .name { float: left; - margin: 18px 0 0 12px; width: 95px; + margin: 18px 0 0 12px; font-size: 11px; - text-align: left; line-height: 13px; + text-align: left; } .multi-wizard.zone-wizard .select-container .field .value { - float: left; position: relative; + float: left; } .multi-wizard.zone-wizard .select-container .field .value span { display: block; + margin: 20px 0 0; font-size: 11px; color: #052060; - margin: 20px 0 0; } .multi-wizard.zone-wizard .select-container .field .value label.error { - color: #FF0000; - font-size: 10px; - position: absolute; display: block; - text-align: left; - margin: 2px 0 0 16px; - float: right; - /*+placement:shift 1px 31px;*/ - position: relative; - left: 1px; - top: 31px; position: absolute; + position: relative; + position: absolute; + float: right; + top: 31px; + left: 1px; + /*+placement:shift 1px 31px;*/ + margin: 2px 0 0 16px; + font-size: 10px; + color: #ff0000; + text-align: left; } .multi-wizard.zone-wizard .select-container .field .value input, .multi-wizard.zone-wizard .select-container .field .value select { + float: left; width: 316px; height: 20px; margin: 13px 13px 0 18px; - float: left; } .multi-wizard.zone-wizard .select-container .field .range-edit .range-item { - width: 106px; float: left; + width: 106px; } -.multi-wizard.zone-wizard .select-container .field .range-edit .range-item input[type=text] { +.multi-wizard.zone-wizard .select-container .field .range-edit .range-item input[type='text'] { width: 93px; margin: 16px 0 0 17px; } @@ -7631,9 +7551,9 @@ label.error { height: 21px; } -.multi-wizard.zone-wizard .select-container .field .value input[type=checkbox] { - float: left; +.multi-wizard.zone-wizard .select-container .field .value input[type='checkbox'] { display: block; + float: left; width: 13px; } @@ -7648,29 +7568,45 @@ label.error { } .multi-wizard.zone-wizard .select-container .field .select-array { - width: 360px; display: inline-block; + width: 360px; } /*[clearfix]*/ .multi-wizard.zone-wizard .select-container .field .select-array-item { + float: left; width: 175px; height: 34px; - float: left; +} + +div.toolbar, +.multi-wizard.zone-wizard .select-container .field .select-array-item { + display: block; + height: 1px; +} + +div.toolbar:after, +.multi-wizard.zone-wizard .select-container .field .select-array-item:after { + visibility: hidden; + content: '.'; + display: block; + clear: both; + height: 0; + font-size: 0; } .multi-wizard.zone-wizard .select-container .field .select-array-item .name { - width: 127px; float: right; - padding: 0; + width: 127px; margin: 11px 0 0; + padding: 0; } .multi-wizard.zone-wizard .select-container .field .select-array-item .value { - width: 41px; float: right; - padding: 0; + width: 41px; margin: 0; + padding: 0; } .multi-wizard.zone-wizard .select-container .field .select-array-item .value input { @@ -7679,36 +7615,36 @@ label.error { } .multi-wizard.zone-wizard .setup-physical-network .button.add.new-physical-network { - background: #808080 url(../images/bg-gradients.png) 0px -264px; visibility: hidden; - border: 1px solid #ADA7A7; - padding: 6px 20px 6px 11px; - font-size: 12px; float: right; margin: 14px 6px 0 0; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; + padding: 6px 20px 6px 11px; + border: 1px solid #ada7a7; border-radius: 4px; border-radius: 4px 4px 4px 4px; + /*+border-radius:4px;*/ + background: #808080 url("../images/bg-gradients.png") 0 -264px; + font-size: 12px; color: #475765; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; + text-shadow: 0 1px 1px #ffffff; cursor: pointer; + -moz-border-radius: 4px; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; } .multi-wizard.zone-wizard .setup-physical-network .button.remove.physical-network { - padding: 10px 10px 0px; - background: url(../images/sprites.png) -6px -93px; - cursor: pointer; position: relative; float: right; top: 27px; margin: -26px 0 0; + padding: 10px 10px 0; + background: url("../images/sprites.png") -6px -93px; + cursor: pointer; } .multi-wizard.zone-wizard .setup-physical-network .select-container.disabled .button.remove.physical-network { @@ -7720,62 +7656,59 @@ label.error { } .multi-wizard.zone-wizard .setup-physical-network .button.add.new-physical-network:hover { - background-position: 0px -349px; + background-position: 0 -349px; color: #000000; /*+text-shadow:0px 1px 2px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 2px #FFFFFF; - -webkit-text-shadow: 0px 1px 2px #FFFFFF; - -o-text-shadow: 0px 1px 2px #FFFFFF; - text-shadow: 0px 1px 2px #FFFFFF; + text-shadow: 0 1px 2px #ffffff; + -moz-text-shadow: 0 1px 2px #ffffff; + -webkit-text-shadow: 0 1px 2px #ffffff; + -o-text-shadow: 0 1px 2px #ffffff; } .multi-wizard.zone-wizard .setup-physical-network .button.add.new-physical-network .icon { padding: 10px; - background: url(../images/sprites.png) -44px -58px; + background: url("../images/sprites.png") -44px -58px; } /*** Review / launch*/ .multi-wizard.zone-wizard .review .launch-container { + float: left; width: 98%; max-height: 438px; - overflow: auto; - overflow-x: hidden; - float: left; - background: #ECECEC 0px -12px; - background: #F7F7F7; - background: -moz-linear-gradient(top, #f7f7f7 0%, #eaeaea 100%); + margin: 11px 0 0 7px; + border: 1px solid #cacaca; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: #ececec 0 -12px; + background: #f7f7f7; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #eaeaea)); background: -webkit-linear-gradient(top, #f7f7f7 0%, #eaeaea 100%); - background: -o-linear-gradient(top, #f7f7f7 0%, #eaeaea 100%); - background: -ms-linear-gradient(top, #f7f7f7 0%, #eaeaea 100%); background: linear-gradient(to bottom, #f7f7f7 0%, #eaeaea 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#eaeaea',GradientType=0 ); - margin: 11px 0 0 7px; /*+border-radius:4px;*/ + overflow: auto; + overflow-x: hidden; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#eaeaea', GradientType=0); -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border: 1px solid #CACACA; - border-radius: 4px 4px 4px 4px; } .multi-wizard.zone-wizard .review .launch-container li { width: 100%; - text-align: left; padding: 15px 0 15px 12px; font-size: 12px; font-weight: bold; + text-align: left; } .multi-wizard.zone-wizard .review .launch-container li .icon { /*[empty]display:;*/ padding: 10px 21px 10px 10px; - background: url(../images/icons.png) -2px -217px; + background: url("../images/icons.png") -2px -217px; } .multi-wizard.zone-wizard .review .launch-container li.loading .icon { - background: url(../images/ajax-loader-small.gif) no-repeat 2px 9px; + background: url("../images/ajax-loader-small.gif") no-repeat 2px 9px; } .multi-wizard.zone-wizard .review .launch-container li.error .icon { @@ -7786,7 +7719,6 @@ label.error { display: none; } -/*Tree view*/ .tree-view { width: 24%; height: 98%; @@ -7803,20 +7735,20 @@ label.error { } .tree-view ul li { - position: relative; - left: 21px; - font-size: 12px; display: block; - margin: 7px 0 0; + position: relative; clear: both; + left: 21px; width: 100%; + margin: 7px 0 0; + font-size: 12px; } .tree-view > ul { /*+placement:shift 3px 40px;*/ position: relative; - left: 3px; top: 40px; + left: 3px; } .tree-view > ul > li { @@ -7825,7 +7757,7 @@ label.error { .tree-view ul li .name { float: left; - margin: 1px 0px 13px 17px; + margin: 1px 0 13px 17px; padding: 6px 9px 6px 4px; cursor: pointer; } @@ -7835,24 +7767,24 @@ label.error { } .tree-view ul li .name.selected { - background: #DDDCDD; + border-radius: 5px; /*+border-radius:5px;*/ + border-radius: 5px 5px 5px 5px; + background: #dddcdd; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; - border-radius: 5px; - border-radius: 5px 5px 5px 5px; } .tree-view ul li .expand { + position: absolute; + float: left; + float: left; width: 10px; height: 10px; - float: left; - background: url(../images/buttons.png) -630px -245px; margin: 4px 5px 0 0; - float: left; + background: url("../images/buttons.png") -630px -245px; cursor: pointer; - position: absolute; } .tree-view ul li.expanded > .expand { @@ -7863,11 +7795,6 @@ label.error { float: left; } -.detail-group table tbody { - border: none; -} - -/*Dialog-based list view*/ .ui-dialog .list-view { height: 515px !important; overflow: auto; @@ -7880,13 +7807,13 @@ label.error { } div.panel.ui-dialog div.list-view div.fixed-header { + z-index: 1; top: 55px; left: 35px; width: 759px; height: 49px; - background-color: #FFFFFF; margin: 0; - z-index: 1; + background-color: #ffffff; } .ui-dialog .list-view table { @@ -7899,25 +7826,25 @@ div.panel.ui-dialog div.list-view div.fixed-header { } .ui-dialog.panel div.list-view div.data-table table tbody tr.multi-edit-selected { - background: #C3E0FC; + background: #c3e0fc; } /*List-view: subselect dropdown*/ .list-view .subselect { - width: 173px; - cursor: default; display: block; float: left; - background: #E8E8E8; - padding: 0; - margin: 0 0 0 -3px; clear: both; - border: 1px solid #A8A7A7; + width: 173px; + margin: 0 0 0 -3px; + padding: 0; + border: 1px solid #a8a7a7; + border-radius: 2px; + background: #e8e8e8; /*+border-radius:2px;*/ + cursor: default; -moz-border-radius: 2px; -webkit-border-radius: 2px; -khtml-border-radius: 2px; - border-radius: 2px; } .list-view .subselect:hover span { @@ -7931,6 +7858,8 @@ div.panel.ui-dialog div.list-view div.fixed-header { .list-view .subselect span.info { background: none; + font-size: 10px; + white-space: nowrap; } .list-view .subselect span:hover { @@ -7943,7 +7872,6 @@ div.panel.ui-dialog div.list-view div.fixed-header { font-size: 10px; } -/*Multi-edit*/ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBalancer div.multi-edit form table.multi-edit thead tr th, div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBalancer div.multi-edit form table.multi-edit tbody tr td { min-width: 100px; @@ -7959,7 +7887,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal } .multi-edit table.multi-edit { - border-top: none; + border-top: 0; } .multi-edit table th { @@ -7970,7 +7898,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal } .detail-group .multi-edit table td { - border-left: 1px solid #CDCCCC; + border-left: 1px solid #cdcccc; } .detail-view .multi-edit input { @@ -7979,8 +7907,8 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal .detail-view .multi-edit select { width: 93%; - font-size: 10px; min-width: 80px; + font-size: 10px; } .multi-edit input { @@ -7996,24 +7924,24 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal } .multi-edit .range input { + position: relative; width: 35px; margin-right: 2px; - position: relative; } .multi-edit .range label { display: block; - clear: both; - /*+placement:shift 3px 2px;*/ position: relative; - left: 3px; + /*+placement:shift 3px 2px;*/ + clear: both; top: 2px; + left: 3px; } .multi-edit label.error { - font-size: 10px; - margin: 3px 0 0; float: left; + margin: 3px 0 0; + font-size: 10px; } .multi-edit .data-table td span { @@ -8030,7 +7958,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal } .multi-edit .data-table td.add-vm:hover { - color: #5FAAF7; + color: #5faaf7; } .multi-edit .data-table .fixed-header { @@ -8038,77 +7966,77 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal } .multi-edit .button.add-vm { + position: relative; + top: 0; + left: 4px; + width: 74px; + /*+text-shadow:0px 1px 1px #000000;*/ + padding: 6px 0 4px; + border: 1px solid #858585; + border-top: 0; + border-radius: 5px; + /*+box-shadow:0px 1px 1px #FFFFFF;*/ + border-radius: 5px 5px 5px 5px; + box-shadow: 0 1px 1px #ffffff; + background: url("../images/bg-gradients.png") repeat-x 0 -220px; font-size: 10px; font-weight: bold; - cursor: pointer; - color: #FFFFFF; - /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; - /*+box-shadow:0px 1px 1px #FFFFFF;*/ - -moz-box-shadow: 0px 1px 1px #FFFFFF; - -webkit-box-shadow: 0px 1px 1px #FFFFFF; - -o-box-shadow: 0px 1px 1px #FFFFFF; - box-shadow: 0px 1px 1px #FFFFFF; - border: 1px solid #858585; - border-top: none; + color: #ffffff; /*+border-radius:5px;*/ + text-align: center; + text-indent: 0; + text-shadow: 0 1px 1px #000000; + cursor: pointer; + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; + -moz-box-shadow: 0 1px 1px #ffffff; + -webkit-box-shadow: 0 1px 1px #ffffff; + -o-box-shadow: 0 1px 1px #ffffff; + /*+placement:shift 4px 0px;*/ -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; - border-radius: 5px; - border-radius: 5px 5px 5px 5px; - width: 74px; - text-indent: 0px; - text-align: center; - padding: 6px 0px 4px; - background: url(../images/bg-gradients.png) repeat-x 0px -220px; - /*+placement:shift 4px 0px;*/ - position: relative; - left: 4px; - top: 0px; } .multi-edit .button.add-vm:hover { - background-position: 0px -241px; + box-shadow: inset 0 1px 1px #000000; /*+box-shadow:inset 0px 1px 1px #000000;*/ - -moz-box-shadow: inset 0px 1px 1px #000000; - -webkit-box-shadow: inset 0px 1px 1px #000000; - -o-box-shadow: inset 0px 1px 1px #000000; - box-shadow: inset 0px 1px 1px #000000; + background-position: 0 -241px; + -moz-box-shadow: inset 0 1px 1px #000000; + -webkit-box-shadow: inset 0 1px 1px #000000; + -o-box-shadow: inset 0 1px 1px #000000; } .multi-edit .button.custom-action { - background: url(../images/bg-gradients.png) 0px -271px; - border: 1px solid #B7B7B7; - color: #485867; + border: 1px solid #b7b7b7; + background: url("../images/bg-gradients.png") 0 -271px; font-size: 10px; + color: #485867; /*+text-shadow:0px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px #FFFFFF; - -o-text-shadow: 0px 1px #FFFFFF; - text-shadow: 0px 1px #FFFFFF; + text-shadow: 0 1px #ffffff; + -moz-text-shadow: 0 1px #ffffff; + -webkit-text-shadow: 0 1px #ffffff; + -o-text-shadow: 0 1px #ffffff; } .multi-edit td.disabled .button.add-vm.custom-action { /*+opacity:50%;*/ + opacity: 0.5; + cursor: not-allowed; filter: alpha(opacity=50); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); -moz-opacity: 0.5; - opacity: 0.5; - cursor: not-allowed; } .multi-edit .button.custom-action:hover { - background: #808080 url(../images/bg-gradients.png); - color: #FFFFFF; + background: #808080 url("../images/bg-gradients.png"); + color: #ffffff; /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; + text-shadow: 0 1px 1px #000000; + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; } .ui-dialog.multi-edit-add-list { @@ -8131,21 +8059,21 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal .multi-edit-add-list .ui-button.ok, .multi-edit-add-list .ui-button.cancel { - float: right; - /*+placement:shift 506px -18px;*/ position: relative; - left: 506px; + /*+placement:shift 506px -18px;*/ + float: right; top: -18px; + left: 506px; } .multi-edit-add-list .ui-button.cancel { /*+placement:shift 492px -18px;*/ position: relative; left: 492px; - border: none; + border: 0; background: transparent; - color: #808B95; font-weight: bold; + color: #808b95; } .multi-edit-add-list div.form-container { @@ -8169,9 +8097,9 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal } .multi-edit .data .data-body .data-item { - margin-bottom: 14px; - border: 1px solid #CDCCCC; position: relative; + margin-bottom: 14px; + border: 1px solid #cdcccc; } .multi-edit .data .data-body .data-item .loading-overlay { @@ -8180,46 +8108,46 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal .multi-edit .data .data-body .data-item.loading { height: 28px; - background: #FFFFFF url(../images/ajax-loader.gif) no-repeat center; - border: 1px solid #DDDDDD; + border: 1px solid #dddddd; + background: #ffffff url("../images/ajax-loader.gif") no-repeat center; } .multi-edit .data .data-body .data-item.loading .label { - color: #808080; + margin: 12px 0 0; font-size: 12px; + color: #808080; text-align: center; text-indent: 19%; - margin: 12px 0 0; } .multi-edit .data .data-body .data-item table { - margin: 0; - border: none; width: 100%; + margin: 0; + border: 0; + background: #f0f1f2; overflow: hidden; - background: #F0F1F2; } .multi-edit .data .data-body .data-item tr { - background: #EFEFEF; - border: none; + border: 0; + background: #efefef; } .multi-edit .data .data-body .data-item table tbody tr td { - background: #F0F1F2; - border-left: none; - border-right: 1px solid #CFC9C9; height: 15px; + border-right: 1px solid #cfc9c9; + border-left: 0; + background: #f0f1f2; overflow: auto; } .multi-edit .data .data-body .data-item > table tbody tr td span { - overflow: hidden; - max-width: 90%; display: block; float: left; - text-overflow: ellipsis; + max-width: 90%; white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } .multi-edit .data .data-body .data-item table tbody tr td.name { @@ -8228,18 +8156,18 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal .multi-edit .data .data-body .data-item table tbody tr td.name span { width: 53px; - color: #4C5D78; font-weight: bold; + color: #4c5d78; } .multi-edit .data .data-body .data-item .expandable-listing table tbody tr td.name span { - color: #4C5D78; font-weight: normal; + color: #4c5d78; cursor: pointer; } .multi-edit .data .data-body .data-item .expandable-listing table tbody tr td.name span:hover { - color: #0000FF; + color: #0000ff; } div#details-tab-aclRules table.multi-edit tr th.number, @@ -8284,55 +8212,59 @@ div#details-tab-aclRules div.multi-edit table tr td.reason { max-width: 60px !important; } -div#details-tab-aclRules div.multi-edit table tr th.icmptype, div#details-tab-aclRules div.multi-edit table tr td.icmptype, -div#details-tab-aclRules div.multi-edit table tr th.icmpcode, div#details-tab-aclRules div.multi-edit table tr td.icmpcode { +div#details-tab-aclRules div.multi-edit table tr th.icmptype, +div#details-tab-aclRules div.multi-edit table tr td.icmptype, +div#details-tab-aclRules div.multi-edit table tr th.icmpcode, +div#details-tab-aclRules div.multi-edit table tr td.icmpcode { width: 60px !important; min-width: 60px !important; max-width: 60px !important; } -div#details-tab-aclRules div.multi-edit table tr th.startport, div#details-tab-aclRules div.multi-edit table tr td.startport, -div#details-tab-aclRules div.multi-edit table tr th.endport, div#details-tab-aclRules div.multi-edit table tr td.endport { +div#details-tab-aclRules div.multi-edit table tr th.startport, +div#details-tab-aclRules div.multi-edit table tr td.startport, +div#details-tab-aclRules div.multi-edit table tr th.endport, +div#details-tab-aclRules div.multi-edit table tr td.endport { width: 60px !important; min-width: 60px !important; max-width: 60px !important; } div#details-tab-aclRules td.cidrlist span { - text-align: center; width: 100%; + text-align: center; } .multi-edit .data .data-body .data-item table tbody tr td.multi-actions .action { - cursor: pointer; + float: left; width: 28px; height: 21px; - float: left; + cursor: pointer; } .multi-edit .data .data-body .data-item table tbody tr td.multi-actions .action span.icon { - background-image: url(../images/sprites.png); - cursor: pointer; + float: left; width: 28px; height: 21px; - float: left; + background-image: url("../images/sprites.png"); + cursor: pointer; } .multi-edit .data .data-body .data-item tr td .expand { + display: block; + float: left; width: 14px; height: 15px; - display: block; - cursor: pointer; - background: #FFFFFF url(../images/sprites.png) -541px -499px; - border: 1px solid #D0D0D0; + margin: -3px 0 0 11px; + border: 1px solid #d0d0d0; /*+border-radius:9px;*/ + border-radius: 9px; + border-radius: 9px 9px 9px 9px; + background: #ffffff url("../images/sprites.png") -541px -499px; + cursor: pointer; -moz-border-radius: 9px; -webkit-border-radius: 9px; -khtml-border-radius: 9px; - border-radius: 9px; - border-radius: 9px 9px 9px 9px; - float: left; - margin: -3px 0 0 11px; } .multi-edit .data .data-body .data-item tr td.add-vm, @@ -8341,59 +8273,59 @@ div#details-tab-aclRules td.cidrlist span { } .multi-edit .data .data-body .data-item tr td .custom-action { - margin: -2px 0 0 0px; + margin: -2px 0 0 0; } .multi-edit .data .data-body .data-item tr td.add-vm:hover { - color: #0060FF; font-weight: bold; + color: #0060ff; } .multi-edit .data .data-body .data-item tr td.add-vm p { - text-indent: 0; - padding-left: 9px; margin-top: 3px; margin-bottom: 6px; + padding-left: 9px; + text-indent: 0; } .multi-edit .data .data-body .data-item tr td.multi-actions .icon { /*+placement:shift -3px -2px;*/ position: relative; - left: -3px; top: -2px; + left: -3px; } .multi-edit .data .data-body .data-item .expandable-listing { width: 99.8%; - border: 1px solid #CFC9C9; max-height: 161px; + border: 1px solid #cfc9c9; overflow: auto; overflow-x: hidden; } .multi-edit .data .data-body .data-item .expandable-listing tr { width: 100%; - border: none; margin: 0; padding: 0; + border: 0; } .multi-edit .data .data-body .data-item .expandable-listing tr td { - background: #DDE0E2; - border: none; margin: 0; + border: 0; + background: #dde0e2; text-indent: 37px; } .multi-edit .data .data-body .data-item .expandable-listing tr.odd td { - background: #F2F0F0; + background: #f2f0f0; } .ui-tabs-panel .add-by { - font-size: 12px; - color: #536474; width: 94%; margin: 13px 0 0 14px; + font-size: 12px; + color: #536474; } .ui-tabs-panel .add-by .selection { @@ -8444,27 +8376,27 @@ div#details-tab-aclRules td.cidrlist span { position: relative; /*+placement:shift 14px 11px;*/ position: relative; - left: 14px; top: 11px; + left: 14px; } .multi-edit .header-fields .form-container { width: 96%; height: 32px; - background: #E4E4E4; + border: 1px solid #d4cfcf; /*+border-radius:4px;*/ + border-radius: 4px; + background: #e4e4e4; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border: 1px solid #D4CFCF; } .multi-edit .header-fields .form-item { - padding: 4px 15px 3px 9px; - margin-bottom: 32px; - margin-right: 0; float: left; + margin-right: 0; + margin-bottom: 32px; + padding: 4px 15px 3px 9px; } .multi-edit .header-fields .form-item input, @@ -8478,9 +8410,9 @@ div#details-tab-aclRules td.cidrlist span { } .multi-edit .header-fields .form-item .name { - font-size: 14px; padding: 5px; - color: #55687A; + font-size: 14px; + color: #55687a; } /*Sortable*/ @@ -8502,103 +8434,102 @@ div#details-tab-aclRules td.cidrlist span { margin: 0; } -/*Recurring snapshots*/ .recurring-snapshots { display: inline-block; } .recurring-snapshots .schedule .add-snapshot-actions { - width: 581px; - clear: both; float: left; - font-size: 13px; + clear: both; + width: 581px; margin-bottom: 13px; - border-top: 1px solid #FFFFFF; + border-top: 1px solid #ffffff; + font-size: 13px; } .recurring-snapshots .schedule .add-snapshot-action { /*+placement:shift -7px -34px;*/ position: relative; - left: -7px; - top: -34px; float: right; - cursor: pointer; + top: -34px; + left: -7px; padding: 10px; + cursor: pointer; } .recurring-snapshots .schedule .add-snapshot-action.add { - color: #0000FF; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; font-weight: bold; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + color: #0000ff; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; } .recurring-snapshots .schedule .add-snapshot-action.add:hover { - color: #1A85F4; + color: #1a85f4; } .recurring-snapshots .schedule p { - font-size: 13px; margin: 0; + font-size: 13px; } .recurring-snapshots .schedule .forms form { font-size: 12px; - color: #4F6171; + color: #4f6171; } .recurring-snapshots .schedule .forms form select { float: left; - margin: 3px 10px 3px 3px; max-width: 100%; + margin: 3px 10px 3px 3px; } .recurring-snapshots .schedule .forms form input { /*+placement:shift 1px 4px;*/ position: relative; - left: 1px; top: 4px; + left: 1px; } .recurring-snapshots .schedule .forms form label { /*+placement:shift 5px 4px;*/ position: relative; - left: 5px; top: 4px; + left: 5px; } .recurring-snapshots .schedule .forms form label.error { - width: 100%; float: left; + width: 100%; font-size: 10px; } .recurring-snapshots .schedule .forms form .field { - width: 100%; float: left; + width: 100%; margin: 8px 0 0; } .recurring-snapshots .schedule .forms form .name { float: left; - text-align: right; width: 72px; - padding: 4px 0 0; margin: 3px 14px 0 0; + padding: 4px 0 0; + text-align: right; } .recurring-snapshots .schedule .forms form .value { - width: 470px; float: left; + width: 470px; text-align: left; } .ui-dialog .recurring-snapshots .ui-widget-content { - padding: 0; margin: 0; + padding: 0; } .recurring-snapshots .ui-button { @@ -8609,54 +8540,54 @@ div#details-tab-aclRules td.cidrlist span { } .recurring-snapshots .scheduled-snapshots { - clear: both; position: relative; + clear: both; top: -26px; } .recurring-snapshots .scheduled-snapshots p { - font-weight: bold; font-size: 12px; + font-weight: bold; /*+text-shadow:0px 2px 2px #FFFFFF;*/ - -moz-text-shadow: 0px 2px 2px #FFFFFF; - -webkit-text-shadow: 0px 2px 2px #FFFFFF; - -o-text-shadow: 0px 2px 2px #FFFFFF; - text-shadow: 0px 2px 2px #FFFFFF; + text-shadow: 0 2px 2px #ffffff; + -moz-text-shadow: 0 2px 2px #ffffff; + -webkit-text-shadow: 0 2px 2px #ffffff; + -o-text-shadow: 0 2px 2px #ffffff; } .recurring-snapshots .scheduled-snapshots table { - border: none; - /*+placement:shift 0px -14px;*/ position: relative; + /*+placement:shift 0px -14px;*/ top: -14px; width: 100%; margin: 0; + border: 0; } .recurring-snapshots .scheduled-snapshots table td.actions div.action span.icon { /*+placement:shift -3px -4px;*/ position: relative; - left: -3px; top: -4px; + left: -3px; } .recurring-snapshots .scheduled-snapshots tr { - padding: 0; - border: 0; display: block; + display: none; width: 100%; height: 38px; margin: 22px 0 0; - display: none; + padding: 0; + border: 0; } .recurring-snapshots .scheduled-snapshots tr td { - border: none; - padding: 5px 0px 0 14px; + padding: 5px 0 0 14px; + border: 0; font-size: 12px; word-break: keep-all; word-wrap: normal; - text-indent: 0px; + text-indent: 0; } .recurring-snapshots .scheduled-snapshots tr td.keep { @@ -8673,13 +8604,13 @@ div#details-tab-aclRules td.cidrlist span { } .recurring-snapshots .scheduled-snapshots table tbody tr td.actions { - max-width: 22px !important; min-width: 22px !important; + max-width: 22px !important; } .recurring-snapshots .scheduled-snapshots tr td.time { min-width: 144px; - background: url(../images/sprites.png) no-repeat -536px -533px; + background: url("../images/sprites.png") no-repeat -536px -533px; text-indent: 0.7em; } @@ -8696,59 +8627,59 @@ div#details-tab-aclRules td.cidrlist span { } .recurring-snapshots p { - text-align: left; + display: block; + max-width: 550px; + margin-bottom: 16px; + padding: 0 47px 0 0; font-size: 14px; line-height: 18px; - padding: 0 47px 0 0; - color: #475765; - margin-bottom: 16px; /*+text-shadow:0px 3px 3px #FFFFFF;*/ - -moz-text-shadow: 0px 3px 3px #FFFFFF; - -webkit-text-shadow: 0px 3px 3px #FFFFFF; - -o-text-shadow: 0px 3px 3px #FFFFFF; - text-shadow: 0px 3px 3px #FFFFFF; - max-width: 550px; - display: block; + color: #475765; + text-align: left; + text-shadow: 0 3px 3px #ffffff; + -moz-text-shadow: 0 3px 3px #ffffff; + -webkit-text-shadow: 0 3px 3px #ffffff; + -o-text-shadow: 0 3px 3px #ffffff; } .recurring-snapshots .ui-tabs ul { - position: relative; - margin: 0; - width: 100%; - padding: 0; - margin: 0; display: block; + position: relative; + width: 100%; + margin: 0; + margin: 0; + padding: 0; } .recurring-snapshots .ui-tabs ul li a { width: 76px; - background: url(../images/sprites.png) no-repeat -521px -533px; + background: url("../images/sprites.png") no-repeat -521px -533px; } .recurring-snapshots .ui-tabs ul li.disabled a { /*+opacity:50%;*/ + opacity: 0.5; filter: alpha(opacity=50); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); -moz-opacity: 0.5; - opacity: 0.5; } .recurring-snapshots .ui-tabs ul li.disabled:hover a { - border: none; - background-color: transparent; - border: none; + border: 0; + border: 0; + box-shadow: 0 0; /*+box-shadow:0px 0px;*/ - -moz-box-shadow: 0px 0px; - -webkit-box-shadow: 0px 0px; - -o-box-shadow: 0px 0px; - box-shadow: 0px 0px; - -moz-box-shadow: 0px 0px none; - -webkit-box-shadow: 0px 0px none; - -o-box-shadow: 0px 0px none; + background-color: transparent; + cursor: default; + -moz-box-shadow: 0 0; + -webkit-box-shadow: 0 0; + -o-box-shadow: 0 0; + -moz-box-shadow: 0 0 none; + -webkit-box-shadow: 0 0 none; + -o-box-shadow: 0 0 none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; - cursor: default; } .recurring-snapshots .ui-tabs ul li.daily a { @@ -8764,38 +8695,37 @@ div#details-tab-aclRules td.cidrlist span { } .recurring-snapshots .ui-tabs div.ui-tabs-panel { - height: 144px; width: 100%; - border: none; - background: #E9E9E9; + height: 144px; + border: 0; + background: #e9e9e9; } .recurring-snapshots .ui-tabs div.ui-tabs-panel.ui-tabs-hide { display: none; } -/*Upload volume*/ .upload-volume .list-view { margin-top: 5px !important; } .upload-volume .listView-container { - background: #FFFFFF; width: 823px; - margin: 71px 0px 20px 28px; - border: 1px solid #DADADA; + margin: 71px 0 20px 28px; + border: 1px solid #dadada; + border-radius: 4px; /*+border-radius:4px;*/ + border-radius: 4px 4px 4px 4px; + background: #ffffff; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; } .upload-volume div.list-view .data-table div.fixed-header { top: 115px !important; left: 56px !important; - background: #FFFFFF !important; + background: #ffffff !important; } .upload-volume .data-table table.body { @@ -8805,10 +8735,10 @@ div#details-tab-aclRules td.cidrlist span { .upload-volume .list-view .toolbar { top: 118px; - width: 801px; left: 43px; + width: 801px; + border: 0; background: transparent; - border: none; } .upload-volume .top-fields { @@ -8825,13 +8755,13 @@ div#details-tab-aclRules td.cidrlist span { .upload-volume .top-fields input { float: right; /*+border-radius:3px;*/ + width: 186px; + padding: 2px; + border-radius: 3px; + border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; - border-radius: 3px; - border-radius: 3px 3px 3px 3px; - padding: 2px; - width: 186px; } .upload-volume .top-fields label, @@ -8840,153 +8770,152 @@ div#details-tab-aclRules td.cidrlist span { float: left; padding: 6px; font-size: 12px; - color: #4C5D6C; + color: #4c5d6c; /*+text-shadow:0px 0px #FFFFFF;*/ - -moz-text-shadow: 0px 0px #FFFFFF; - -webkit-text-shadow: 0px 0px #FFFFFF; - -o-text-shadow: 0px 0px #FFFFFF; - text-shadow: 0px 0px #FFFFFF; + text-shadow: 0 0 #ffffff; + -moz-text-shadow: 0 0 #ffffff; + -webkit-text-shadow: 0 0 #ffffff; + -o-text-shadow: 0 0 #ffffff; } .upload-volume .desc { position: absolute; - width: 825px; - text-align: left; top: 79px; left: 32px; - border-top: 1px solid #CFCFCF; + width: 825px; + border-top: 1px solid #cfcfcf; + text-align: left; } -/*Network detail chat*/ .network-chart { + position: relative; width: 100%; height: 100%; - position: relative; - background: url(../images/bg-network.png) no-repeat 38% 70px; + background: url("../images/bg-network.png") no-repeat 38% 70px; } .network-chart.static-nat { - background: url(../images/bg-network-nat.png) no-repeat 31% 62px; + background: url("../images/bg-network-nat.png") no-repeat 31% 62px; } .network-chart ul { + position: absolute; + top: 0; + left: 0; width: 536px; height: 421px; - position: absolute; - top: 0px; - left: 0px; } .network-chart li { display: block; width: 147px; height: 86px; - background: url(../images/buttons.png) no-repeat 0px -399px; + background: url("../images/buttons.png") no-repeat 0 -399px; } .network-chart li.static-nat-enabled { /*+placement:shift 31px 44px;*/ position: relative; - left: 31px; top: 44px; + left: 31px; } .network-chart li.static-nat-enabled .vmname { /*+placement:shift 16px 41px;*/ position: relative; - left: 16px; + position: absolute; top: 41px; - cursor: pointer; + left: 16px; max-width: 98px; max-height: 21px; padding: 7px; + border-radius: 9px; + border-radius: 9px 9px 9px 9px; + background: url("../images/bg-gradients.png") repeat-x 2px -221px; font-size: 10px; - position: absolute; - overflow: hidden; - color: #485563; font-weight: bold; /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; - background: url(../images/bg-gradients.png) repeat-x 2px -221px; - color: #FFFFFF; + color: #485563; + color: #ffffff; + text-shadow: 0 1px 1px #000000; + cursor: pointer; + overflow: hidden; + -moz-text-shadow: 0 1px 1px #000000; /*+border-radius:9px;*/ + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; -moz-border-radius: 9px; -webkit-border-radius: 9px; -khtml-border-radius: 9px; - border-radius: 9px; - border-radius: 9px 9px 9px 9px; } .network-chart li.static-nat-enabled .vmname:hover { - background-position: 0px -946px; + background-position: 0 -946px; } .network-chart li.static-nat-enabled .name { - background: url(../images/sprites.png) no-repeat -6px -460px; + background: url("../images/sprites.png") no-repeat -6px -460px; } .network-chart li.static-nat-enabled .name span { - font-size: 11px; padding: 0 0 0 25px; + font-size: 11px; } .network-chart li.disabled { /*+opacity:100%;*/ + opacity: 1; filter: alpha(opacity=100); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); -moz-opacity: 1; - opacity: 1; } .network-chart li.firewall { /*+placement:shift 282px 188px;*/ position: relative; - left: 356px; - top: 188px; position: absolute; + top: 188px; + left: 356px; } .network-chart li.loadBalancing { /*+placement:shift 167px 342px;*/ position: relative; - left: 237px; - top: 342px; position: absolute; + top: 342px; + left: 237px; } .network-chart li.portForwarding { /*+placement:shift 401px 342px;*/ position: relative; - left: 480px; - top: 342px; position: absolute; + top: 342px; + left: 480px; } .network-chart li .name { - color: #4E5F6F; - width: 130px; - /*+text-shadow:0px 1px 1px #FCFCFC;*/ - -moz-text-shadow: 0px 1px 1px #FCFCFC; - -webkit-text-shadow: 0px 1px 1px #FCFCFC; - -o-text-shadow: 0px 1px 1px #FCFCFC; - text-shadow: 0px 1px 1px #FCFCFC; - /*+placement:shift 10px 11px;*/ position: relative; - left: 10px; top: 11px; + /*+text-shadow:0px 1px 1px #FCFCFC;*/ + left: 10px; + width: 130px; + color: #4e5f6f; + text-shadow: 0 1px 1px #fcfcfc; + /*+placement:shift 10px 11px;*/ + -moz-text-shadow: 0 1px 1px #fcfcfc; + -webkit-text-shadow: 0 1px 1px #fcfcfc; + -o-text-shadow: 0 1px 1px #fcfcfc; } .network-chart li.disabled .name { - color: #8695A5; - /*+placement:shift 5px 32px;*/ position: relative; - left: 5px; + /*+placement:shift 5px 32px;*/ top: 32px; - text-decoration: line-through; + left: 5px; + color: #8695a5; text-align: center; + text-decoration: line-through; } .network-chart li .view-details { @@ -8994,68 +8923,64 @@ div#details-tab-aclRules td.cidrlist span { position: absolute; right: 34px; bottom: 19px; - cursor: pointer; - background: #F7F7F7; + padding: 8px 20px; + border: 1px solid #a2a2a2; + border-radius: 4px; background: #f7f7f7; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYWVhZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); - background: -moz-linear-gradient(top, #f7f7f7 1%, #eaeaea 100%); + background: #f7f7f7; + background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYWVhZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+"); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #f7f7f7), color-stop(100%, #eaeaea)); background: -webkit-linear-gradient(top, #f7f7f7 1%, #eaeaea 100%); - background: -o-linear-gradient(top, #f7f7f7 1%, #eaeaea 100%); - background: -ms-linear-gradient(top, #f7f7f7 1%, #eaeaea 100%); background: linear-gradient(to bottom, #f7f7f7 1%, #eaeaea 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#eaeaea',GradientType=0 ); font-size: 11px; - padding: 8px 20px; color: #000000; - border: 1px solid #A2A2A2; + cursor: pointer; /*+border-radius:4px;*/ + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#eaeaea', GradientType=0); -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; } .network-chart li .view-details:hover { - background: #D5D5D5; + box-shadow: inset 0 0 4px #000000; /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; + background: #d5d5d5; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; /*+box-shadow:inset 0px 0px 4px #000000;*/ - -moz-box-shadow: inset 0px 0px 4px #000000; - -webkit-box-shadow: inset 0px 0px 4px #000000; - -o-box-shadow: inset 0px 0px 4px #000000; - box-shadow: inset 0px 0px 4px #000000; + -o-text-shadow: 0 1px 1px #ffffff; + -moz-box-shadow: inset 0 0 4px #000000; + -webkit-box-shadow: inset 0 0 4px #000000; + -o-box-shadow: inset 0 0 4px #000000; } .network-chart li.disabled .view-details { display: none; } -/*System Dashboard*/ .system-dashboard { - height: 258px; - width: 962px; display: block; + position: relative; + width: 962px; /*+border-radius:3px;*/ + height: 258px; + margin: 18px 0 0 15px; + border-radius: 3px; + box-shadow: inset 0 0 1px #ffffff; + /*+box-shadow:inset 0px 0px 1px #FFFFFF;*/ -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; - border-radius: 3px; - /*+box-shadow:inset 0px 0px 1px #FFFFFF;*/ - -moz-box-shadow: inset 0px 0px 1px #FFFFFF; - -webkit-box-shadow: inset 0px 0px 1px #FFFFFF; - -o-box-shadow: inset 0px 0px 1px #FFFFFF; - box-shadow: inset 0px 0px 1px #FFFFFF; - position: relative; - margin: 18px 0 0 15px; + -moz-box-shadow: inset 0 0 1px #ffffff; + -webkit-box-shadow: inset 0 0 1px #ffffff; + -o-box-shadow: inset 0 0 1px #ffffff; } .system-dashboard.zone { height: 609px; - background-position: 0px -1423px; + background-position: 0 -1423px; } .system-dashboard-view .toolbar { @@ -9063,130 +8988,127 @@ div#details-tab-aclRules td.cidrlist span { } .system-dashboard .head { - color: #000000; + padding: 0 0 12px; /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; + box-shadow: 0 0 1px #ffffff; + color: #000000; text-indent: 11px; - padding: 0px 0 12px; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; /*+box-shadow:0px 0px 1px #FFFFFF;*/ - -moz-box-shadow: 0px 0px 1px #FFFFFF; - -webkit-box-shadow: 0px 0px 1px #FFFFFF; - -o-box-shadow: 0px 0px 1px #FFFFFF; - box-shadow: 0px 0px 1px #FFFFFF; + -o-text-shadow: 0 1px 1px #ffffff; + -moz-box-shadow: 0 0 1px #ffffff; + -webkit-box-shadow: 0 0 1px #ffffff; + -o-box-shadow: 0 0 1px #ffffff; } .project-view .system-dashboard .head { - color: #FFFFFF; + padding-top: 14px; /*+text-shadow:0px -1px #000000;*/ - -moz-text-shadow: 0px -1px #000000; - -webkit-text-shadow: 0px -1px #000000; - -o-text-shadow: 0px -1px #000000; - text-shadow: 0px -1px #000000; + box-shadow: none; + color: #ffffff; + text-shadow: 0 -1px #000000; + -moz-text-shadow: 0 -1px #000000; /*+box-shadow:none;*/ + -webkit-text-shadow: 0 -1px #000000; + -o-text-shadow: 0 -1px #000000; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; - box-shadow: none; - padding-top: 14px; } .system-dashboard .view-more, .system-dashboard .view-all { float: right; margin: -4px 19px 0 0; - cursor: pointer; - font-size: 13px; - font-weight: 100; - background: #DADADA repeat-x 0px -735px; + border: 1px solid #b5b5b5; + border-radius: 3px; + border-radius: 3px 3px 3px 3px; + background: #dadada repeat-x 0 -735px; background: #eaeaea; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhZWFlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmQ2ZDYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); - background: -moz-linear-gradient(top, #eaeaea 0%, #d6d6d6 100%); + background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhZWFlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmQ2ZDYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+"); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eaeaea), color-stop(100%, #d6d6d6)); background: -webkit-linear-gradient(top, #eaeaea 0%, #d6d6d6 100%); - background: -o-linear-gradient(top, #eaeaea 0%, #d6d6d6 100%); - background: -ms-linear-gradient(top, #eaeaea 0%, #d6d6d6 100%); background: linear-gradient(to bottom, #eaeaea 0%, #d6d6d6 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#d6d6d6',GradientType=0 ); + font-size: 13px; /*+border-radius:3px;*/ + font-weight: 100; + cursor: pointer; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', endColorstr='#d6d6d6', GradientType=0); -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; - border-radius: 3px; - border-radius: 3px 3px 3px 3px; - border: 1px solid #B5B5B5; } .system-dashboard .view-more:hover, .system-dashboard .view-all:hover { - background-position: 0px -763px; + box-shadow: inset 0 1px 1px #000000; /*+box-shadow:inset 0px 1px 1px #000000;*/ - -moz-box-shadow: inset 0px 1px 1px #000000; - -webkit-box-shadow: inset 0px 1px 1px #000000; - -o-box-shadow: inset 0px 1px 1px #000000; - box-shadow: inset 0px 1px 1px #000000; - background: #C1C1C1; + background: #c1c1c1; + background-position: 0 -763px; + -moz-box-shadow: inset 0 1px 1px #000000; + -webkit-box-shadow: inset 0 1px 1px #000000; + -o-box-shadow: inset 0 1px 1px #000000; } .system-dashboard .status_box .view-all { /*+placement:shift 18px 110px;*/ position: relative; - left: 18px; - top: 110px; - width: 83%; position: absolute; - text-align: center; + top: 110px; + left: 18px; + width: 83%; padding: 8px 0; + text-align: center; } .system-dashboard .status_box { - font-size: 14px; margin: 10px 0 0; + border: 0; background: transparent; - border: none; + font-size: 14px; } .system-dashboard .status_box li { - height: 178px; + position: relative; + float: left; width: 228px; - padding: 0; - margin: 0 0 0 8px; + height: 178px; /*+border-radius:3px;*/ + margin: 0 0 0 8px; + padding: 0; + border: 1px solid #c6c6c6; + border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; - border-radius: 3px; - position: relative; - border: 1px solid #C6C6C6; - float: left; } .system-dashboard.zone .status_box li { - margin-bottom: 8px; height: 152px; - background-color: #F4F4F4; + margin-bottom: 8px; + background-color: #f4f4f4; } .system-dashboard.zone .status_box li .icon { - background: url(../images/infrastructure-icons.png) no-repeat 0px 0px; - padding: 65px 80px 5px; - /*+placement:shift 31px 19px;*/ + opacity: 0.56; position: relative; - left: 51px; - top: 19px; + /*+placement:shift 31px 19px;*/ position: absolute; + top: 19px; + left: 51px; + padding: 65px 80px 5px; /*+opacity:56%;*/ + background: url("../images/infrastructure-icons.png") no-repeat 0 0; filter: alpha(opacity=56); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=56); -moz-opacity: 0.56; - opacity: 0.56; } .system-dashboard .status_box li span.label { - color: #CCCFD4; font-size: 12px; + color: #cccfd4; } .system-dashboard .status_box li span.total { @@ -9194,106 +9116,106 @@ div#details-tab-aclRules td.cidrlist span { } .system-dashboard .status_box li span.label { - color: #CCCFD4; font-size: 12px; + color: #cccfd4; } .system-dashboard .status_box li span.unit { - color: #C1C4C9; font-size: 13px; + color: #c1c4c9; } .system-dashboard .status_box li span.header { - margin: 1px 0 0; - /*+placement:shift 13px 5px;*/ position: relative; - left: 13px; + /*+placement:shift 13px 5px;*/ top: 13px; + left: 13px; + margin: 1px 0 0; font-weight: 100; } .system-dashboard.zone .status_box li span.header { font-size: 14px; - color: #4F4F4F; + color: #4f4f4f; } .system-dashboard .status_box li span.status { - font-size: 27px; - /*+placement:shift 13px 141px;*/ position: relative; - left: 13px; - top: 141px; + /*+placement:shift 13px 141px;*/ position: absolute; - color: #25FF25; + top: 141px; + left: 13px; + font-size: 27px; + color: #25ff25; /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; + text-shadow: 0 1px 1px #000000; + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; } .system-dashboard .status_box li span.instance.total { /*+placement:shift 12px 32px;*/ position: relative; - left: 12px; - top: 32px; position: absolute; + top: 32px; + left: 12px; } .system-dashboard .status_box li span.instance.label { /*+placement:shift 15px 53px;*/ position: relative; - left: 15px; - top: 53px; position: absolute; + top: 53px; + left: 15px; } .system-dashboard .status_box li span.vcpu-hours.total { /*+placement:shift 13px 76px;*/ position: relative; - left: 13px; - top: 76px; position: absolute; + top: 76px; + left: 13px; } .system-dashboard .status_box li span.vcpu-hours.label { /*+placement:shift 14px 95px;*/ position: relative; - left: 14px; - top: 95px; position: absolute; + top: 95px; + left: 14px; } .system-dashboard .status_box li span.gb-hours.total { /*+placement:shift 106px 77px;*/ position: relative; - left: 106px; - top: 77px; position: absolute; + top: 77px; + left: 106px; } .system-dashboard .status_box li span.gb-hours.label { /*+placement:shift 106px 95px;*/ position: relative; - left: 106px; - top: 95px; position: absolute; + top: 95px; + left: 106px; } .system-dashboard .status_box li span.overview.total { - font-size: 56px; - /*+placement:shift 9px 29px;*/ position: relative; - left: 9px; - top: 29px; + /*+placement:shift 9px 29px;*/ position: absolute; + top: 29px; + left: 9px; + font-size: 56px; font-weight: 100; - color: #2B7DAF; + color: #2b7daf; /*+text-shadow:0px -1px 2px #FFFFFF;*/ - -moz-text-shadow: 0px -1px 2px #FFFFFF; - -webkit-text-shadow: 0px -1px 2px #FFFFFF; - -o-text-shadow: 0px -1px 2px #FFFFFF; - text-shadow: 0px -1px 2px #FFFFFF; + text-shadow: 0 -1px 2px #ffffff; + -moz-text-shadow: 0 -1px 2px #ffffff; + -webkit-text-shadow: 0 -1px 2px #ffffff; + -o-text-shadow: 0 -1px 2px #ffffff; } .system-dashboard .status_box li.capacity span.overview.total { @@ -9303,67 +9225,67 @@ div#details-tab-aclRules td.cidrlist span { .system-dashboard .status_box li span.overview.label { /*+placement:shift 52px 79px;*/ position: relative; - left: 52px; - top: 79px; position: absolute; + top: 79px; + left: 52px; } .system-dashboard .status_box li span.used.total { /*+placement:shift 14px 130px;*/ position: relative; - left: 14px; - top: 130px; - font-size: 30px; position: absolute; + top: 130px; + left: 14px; + font-size: 30px; } .system-dashboard .status_box li span.used.label { /*+placement:shift 14px 153px;*/ position: relative; - left: 14px; - top: 153px; position: absolute; + top: 153px; + left: 14px; } .system-dashboard .status_box li span.used.unit { /*+placement:shift 67px 135px;*/ position: relative; - left: 67px; - top: 135px; position: absolute; + top: 135px; + left: 67px; } .system-dashboard .status_box li span.available.unit { /*+placement:shift 159px 135px;*/ position: relative; - left: 159px; - top: 135px; position: absolute; + top: 135px; + left: 159px; } .system-dashboard .status_box li span.available.total { /*+placement:shift 97px 130px;*/ position: relative; - left: 97px; - top: 130px; - font-size: 30px; position: absolute; + top: 130px; + left: 97px; + font-size: 30px; } .system-dashboard .status_box li span.available.label { /*+placement:shift 97px 153px;*/ position: relative; - left: 97px; - top: 153px; position: absolute; + top: 153px; + left: 97px; } .system-dashboard-view .socket-info { + float: left; width: 100%; height: 239px; - overflow: auto; - float: left; padding: 0; + overflow: auto; } .system-dashboard-view .socket-info > .title { @@ -9372,28 +9294,28 @@ div#details-tab-aclRules td.cidrlist span { } .system-dashboard-view .socket-info li { + float: left; width: 139px; - padding: 13px; /*+border-radius:3px;*/ + margin: 7px; + padding: 13px; + border: 1px solid #cccccc; + border-radius: 3px; + background: #efefef; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; - border-radius: 3px; - margin: 7px; - border: 1px solid #CCC; - background: #EFEFEF; - float: left; } .system-dashboard-view .socket-info li > div { - text-decoration: none; float: left; + text-decoration: none; } .system-dashboard-view .socket-info li .name { width: 100%; - font-weight: 100; margin-bottom: 13px; + font-weight: 100; } .system-dashboard-view .socket-info li .hosts, @@ -9403,15 +9325,15 @@ div#details-tab-aclRules td.cidrlist span { } .system-dashboard-view .socket-info li div .title { - color: #424242; - border: none; - font-size: 13px; padding-bottom: 3px; + border: 0; + font-size: 13px; + color: #424242; } .add-zone-resource .form-container { - height: auto !important; display: inline-block; + height: auto !important; overflow: visible; } @@ -9421,22 +9343,22 @@ div#details-tab-aclRules td.cidrlist span { } .add-zone-resource .head { + display: inline-block; width: 100%; margin-bottom: 7px; - display: inline-block; - border-bottom: 1px solid #AFBDCA; + border-bottom: 1px solid #afbdca; /*+box-shadow:0px 1px #FFFFFF;*/ - -moz-box-shadow: 0px 1px #FFFFFF; - -webkit-box-shadow: 0px 1px #FFFFFF; - -o-box-shadow: 0px 1px #FFFFFF; - box-shadow: 0px 1px #FFFFFF; + box-shadow: 0 1px #ffffff; + -moz-box-shadow: 0 1px #ffffff; + -webkit-box-shadow: 0 1px #ffffff; + -o-box-shadow: 0 1px #ffffff; } .add-zone-resource .head span { float: left; + padding: 10px 0 18px; font-size: 14px; text-indent: 5px; - padding: 10px 0 18px; } .add-zone-resource .head select { @@ -9463,11 +9385,11 @@ div#details-tab-aclRules td.cidrlist span { } .system-dashboard.zone .status_box li.primary-storage .icon { - background-position: -32px -404px; - /*+placement:shift 37px 68px;*/ position: relative; - left: 37px; + /*+placement:shift 37px 68px;*/ top: 68px; + left: 37px; + background-position: -32px -404px; } .system-dashboard.zone .status_box li.sockets .icon { @@ -9475,11 +9397,11 @@ div#details-tab-aclRules td.cidrlist span { } .system-dashboard.zone .status_box li.secondary-storage .icon { - background-position: -216px -404px; - /*+placement:shift 37px 68px;*/ position: relative; - left: 37px; + /*+placement:shift 37px 68px;*/ top: 68px; + left: 37px; + background-position: -216px -404px; } .system-dashboard.zone .status_box li.system-vms .icon, @@ -9491,77 +9413,75 @@ div#details-tab-aclRules td.cidrlist span { background-position: -601px -400px; } -/*Projects -** View switcher*/ #header .view-switcher { - font-size: 12px; - color: #55687B; float: left; margin: 11px 0 0 18px; + font-size: 12px; + color: #55687b; } #header div.view-switcher { - height: 39px; - background-position: 0px -5px; - /*+placement:shift 0px -10px;*/ - position: relative; - left: 0px; - top: -10px; - margin-right: 9px; display: none; + position: relative; + /*+placement:shift 0px -10px;*/ + top: -10px; + left: 0; + height: 39px; + margin-right: 9px; + background-position: 0 -5px; } #header div.view-switcher.alt { - background-position: 0px -41px; + background-position: 0 -41px; } #header div.view-switcher div { - float: left; - /*[empty]display:;*/ - width: 126px; - padding: 13px 0 0; - margin: 0; - text-indent: 17px; position: relative; + /*[empty]display:;*/ + float: left; + width: 126px; + margin: 0; + padding: 13px 0 0; + text-indent: 17px; /*+text-shadow:0px -1px 1px #2D2D2D;*/ - -moz-text-shadow: 0px -1px 1px #2D2D2D; - -webkit-text-shadow: 0px -1px 1px #2D2D2D; - -o-text-shadow: 0px -1px 1px #2D2D2D; - text-shadow: 0px -1px 1px #2D2D2D; + text-shadow: 0 -1px 1px #2d2d2d; + -moz-text-shadow: 0 -1px 1px #2d2d2d; + -webkit-text-shadow: 0 -1px 1px #2d2d2d; + -o-text-shadow: 0 -1px 1px #2d2d2d; } #header div.view-switcher .select.active { - color: #FFFFFF; font-weight: bold; + color: #ffffff; /*+text-shadow:0px -1px 1px #5B5B5B;*/ - -moz-text-shadow: 0px -1px 1px #5B5B5B; - -webkit-text-shadow: 0px -1px 1px #5B5B5B; - -o-text-shadow: 0px -1px 1px #5B5B5B; - text-shadow: 0px -1px 1px #5B5B5B; + text-shadow: 0 -1px 1px #5b5b5b; + -moz-text-shadow: 0 -1px 1px #5b5b5b; + -webkit-text-shadow: 0 -1px 1px #5b5b5b; + -o-text-shadow: 0 -1px 1px #5b5b5b; } #header div.view-switcher div span.icon { - background: url(../images/icons.png) no-repeat; + position: relative; + top: 0; + top: 0; + left: -4px; width: 10px; + /*+placement:shift -4px 0px;*/ height: 10px; padding: 0 19px 0 0; - top: 0; - /*+placement:shift -4px 0px;*/ - position: relative; - left: -4px; - top: 0px; + background: url("../images/icons.png") no-repeat; } #header div.view-switcher div.default-view span.icon { - background-position: -23px 0px; + background-position: -23px 0; } #header div.view-switcher div.project-view span.icon { - background-position: -24px 0px !important; + background-position: -24px 0 !important; } #header div.view-switcher div.select span.icon { - background-position: -47px 0px; + background-position: -47px 0; } #header .view-switcher span { @@ -9576,43 +9496,45 @@ div#details-tab-aclRules td.cidrlist span { } /*** View switcher (drop-down)*/ -.project-switcher, .domain-switcher { +.project-switcher, +.domain-switcher { float: left; width: 223px; padding: 9px 17px 0 19px; /*+border-radius:4px;*/ + border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; } -.project-switcher label, .domain-switcher label { +.project-switcher label, +.domain-switcher label { + float: left; top: 29px; - color: #FFFFFF; - font-size: 13px; - float: left; - margin-right: 7px; margin-top: 5px; + margin-right: 7px; + font-size: 13px; + color: #ffffff; } -.project-switcher select, .domain-switcher select { - width: 70%; +.project-switcher select, +.domain-switcher select { float: left; - margin-top: 0px; + width: 70%; + margin-top: 0; border: 1px solid #393939; /*+text-shadow:0px -1px 1px #373737;*/ - -moz-text-shadow: 0px -1px 1px #373737; - -webkit-text-shadow: 0px -1px 1px #373737; - -o-text-shadow: 0px -1px 1px #373737; - text-shadow: 0px -1px 1px #373737; background: #515151; font-size: 13px; font-weight: 100; - color: #FFFFFF; + color: #ffffff; + text-shadow: 0 -1px 1px #373737; + -moz-text-shadow: 0 -1px 1px #373737; + -webkit-text-shadow: 0 -1px 1px #373737; + -o-text-shadow: 0 -1px 1px #373737; } -/*** Select project*/ .project-selector { display: inline-block; } @@ -9622,157 +9544,156 @@ div#details-tab-aclRules td.cidrlist span { } .project-selector .toolbar { - width: 420px; position: relative; - background: transparent; - border: none; - border-bottom: 1px solid #93A4B4; + width: 420px; + border: 0; + border-bottom: 1px solid #93a4b4; + box-shadow: 0 2px #ffffff; /*+box-shadow:0px 2px #FFFFFF;*/ - -moz-box-shadow: 0px 2px #FFFFFF; - -webkit-box-shadow: 0px 2px #FFFFFF; - -o-box-shadow: 0px 2px #FFFFFF; - box-shadow: 0px 2px #FFFFFF; - -moz-box-shadow: 0px 2px 0px #FFFFFF; - -webkit-box-shadow: 0px 2px 0px #FFFFFF; - -o-box-shadow: 0px 2px 0px #FFFFFF; + background: transparent; + -moz-box-shadow: 0 2px #ffffff; + -webkit-box-shadow: 0 2px #ffffff; + -o-box-shadow: 0 2px #ffffff; + -moz-box-shadow: 0 2px 0 #ffffff; + -webkit-box-shadow: 0 2px 0 #ffffff; + -o-box-shadow: 0 2px 0 #ffffff; } -.project-selector .search input[type=text] { +.project-selector .search input[type='text'] { /*+border-radius:3px;*/ - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; - border-radius: 3px 3px 3px 3px; + float: left; width: 192px; height: 18px; margin: 6px 0 0 105px; + border: 1px solid #9dadbb; + border-radius: 3px; + border-radius: 3px 3px 3px 3px; + box-shadow: 0 1px 1px #ffffff; /*+box-shadow:0px 1px 1px #FFFFFF;*/ - -moz-box-shadow: 0px 1px 1px #FFFFFF; - -webkit-box-shadow: 0px 1px 1px #FFFFFF; - -o-box-shadow: 0px 1px 1px #FFFFFF; - box-shadow: 0px 1px 1px #FFFFFF; - border: 1px solid #9DADBB; - float: left; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + -moz-box-shadow: 0 1px 1px #ffffff; + -webkit-box-shadow: 0 1px 1px #ffffff; + -o-box-shadow: 0 1px 1px #ffffff; } -.project-selector .search input[type=submit] { +.project-selector .search input[type='submit'] { display: block; + position: relative; float: left; - border: none; - cursor: pointer; - margin: 6px 0 0; - background: url(../images/sprites.png) no-repeat -601px -328px; + top: 0; + left: -2px; width: 25px; height: 22px; - border-left: 1px solid #283979; + margin: 6px 0 0; + border: 0; /*+placement:shift -2px 0px;*/ - position: relative; - left: -2px; - top: 0px; + border-left: 1px solid #283979; + background: url("../images/sprites.png") no-repeat -601px -328px; + cursor: pointer; cursor: pointer; } .project-selector .listing { - margin: 15px; - border: 1px solid #D0D0D0; position: relative; + margin: 15px; + border: 1px solid #d0d0d0; } .project-selector .listing .data { width: 100%; height: 275px; - background: #F2F0F0; + margin: 18px 0 0; + background: #f2f0f0; overflow: auto; overflow-x: hidden; - margin: 18px 0 0; } .project-selector .listing .data ul { - text-align: left; font-size: 11px; + text-align: left; } .project-selector .listing .data ul li { padding: 10px 0 10px 7px; - cursor: pointer; font-size: 12px; + cursor: pointer; } .project-selector .listing .data ul li.odd { - background: #DFE1E3; + background: #dfe1e3; } .project-selector .listing .data ul li:hover { - background: #CBDDF3; - border-top: 1px solid #FFFFFF; - border-bottom: 1px solid #BABFD9; padding: 9px 0 9px 7px; + border-top: 1px solid #ffffff; + border-bottom: 1px solid #babfd9; + background: #cbddf3; } .project-selector .listing .header { - width: 379px; - background: url(../images/bg-gradients.png) repeat-x 0px -164px; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - text-align: left; - color: #4F6171; - font-size: 11px; - padding: 3px 2px 3px 7px; - border-bottom: 1px solid #FFFFFF; position: absolute; left: 0; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + width: 379px; + padding: 3px 2px 3px 7px; + border-bottom: 1px solid #ffffff; + background: url("../images/bg-gradients.png") repeat-x 0 -164px; + font-size: 11px; + color: #4f6171; + text-align: left; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; } .project-selector .button.cancel { - color: #808080; - background: #B6B6B6 url("../images/gradients.png") repeat 0 -480px; - border: 1px solid #AAAAAA; - border-radius: 4px 4px 4px 4px; - font-size: 13px; - font-weight: bold; - padding: 8px 20px; float: none; - cursor: pointer; - color: #838181; - left: 170px; top: -8px; + left: 170px; width: 54px; margin: auto auto 17px; + padding: 8px 20px; + border: 1px solid #aaaaaa; + border-radius: 4px 4px 4px 4px; + background: #b6b6b6 url("../images/gradients.png") repeat 0 -480px; + font-size: 13px; + font-weight: bold; + color: #808080; + color: #838181; + cursor: pointer; } .project-selector .button.cancel:hover { - color: #3A3A3A; + color: #3a3a3a; } -/*** Resource management*/ .project-dashboard .resources form { - background: #FFFFFF; + display: inline-block; width: 87%; /*+border-radius:11px;*/ - -moz-border-radius: 11px; - -webkit-border-radius: 11px; - -khtml-border-radius: 11px; - border-radius: 11px; - border-radius: 11px 11px 11px 11px; - padding: 26px; margin-top: 17px; margin-left: 22px; + padding: 26px; + border-radius: 11px; + border-radius: 11px 11px 11px 11px; + box-shadow: inset 0 3px 4px #979797; + background: #ffffff; + -moz-border-radius: 11px; /*+box-shadow:inset 0px 3px 4px #979797;*/ - -moz-box-shadow: inset 0px 3px 4px #979797; - -webkit-box-shadow: inset 0px 3px 4px #979797; - -o-box-shadow: inset 0px 3px 4px #979797; - box-shadow: inset 0px 3px 4px #979797; - display: inline-block; + -webkit-border-radius: 11px; + -khtml-border-radius: 11px; + -moz-box-shadow: inset 0 3px 4px #979797; + -webkit-box-shadow: inset 0 3px 4px #979797; + -o-box-shadow: inset 0 3px 4px #979797; } .project-dashboard .resources form .field { - width: 100%; float: left; clear: both; + width: 100%; margin: auto auto 30px; } @@ -9780,41 +9701,41 @@ div#details-tab-aclRules td.cidrlist span { float: left; } -.project-dashboard .resources form input[type=text] { +.project-dashboard .resources form input[type='text'] { float: right; width: 176px; - font-size: 16px; margin: 0 287px 0 0; + padding: 6px; /*+border-radius:4px;*/ + border: 1px solid #c6c6c6; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + font-size: 16px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - border: 1px solid #C6C6C6; - padding: 6px; } -.project-dashboard .resources form input[type=submit] { +.project-dashboard .resources form input[type='submit'] { display: block; - border: none; - background: transparent url(../images/bg-gradients.png) 0px -220px; float: left; + clear: both; padding: 9px 20px; - cursor: pointer; - color: #FFFFFF; + border: 0; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; /*+border-radius:4px;*/ + background: transparent url("../images/bg-gradients.png") 0 -220px; + color: #ffffff; + cursor: pointer; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - clear: both; } .detail-view .project-dashboard .resources form { width: 83%; - border-bottom: 1px solid #DBDBDB; + border-bottom: 1px solid #dbdbdb; } .detail-view .project-dashboard .resources form .field input { @@ -9829,12 +9750,12 @@ div#details-tab-aclRules td.cidrlist span { .project-dashboard .ui-tabs { /*+placement:shift 10px -31px;*/ position: relative; - left: 10px; top: -31px; + left: 10px; } .project-view .project-dashboard .ui-tabs .multi-edit table td { - background: #EAEAEA; + background: #eaeaea; } .project-dashboard-view .overview-area { @@ -9843,10 +9764,10 @@ div#details-tab-aclRules td.cidrlist span { .project-dashboard-view .compute-and-storage .system-dashboard, .project-dashboard-view .users .system-dashboard { + float: left; width: 510px; height: 230px; - float: left; - background: #777E88; + background: #777e88; } .project-dashboard-view .compute-and-storage .system-dashboard ul, @@ -9859,20 +9780,20 @@ div#details-tab-aclRules td.cidrlist span { .project-dashboard-view .users .system-dashboard li { width: 156px; height: 161px; - background: #3D4045; - color: #FFFFFF; + background: #3d4045; + color: #ffffff; } .project-dashboard-view .compute-and-storage .system-dashboard li .icon, .project-dashboard-view .users li .icon { + position: relative; + position: absolute; + /*+placement:shift 27px 20px;*/ + top: 20px; + left: 27px; width: 100px; height: 76px; - /*+placement:shift 27px 20px;*/ - position: relative; - left: 27px; - top: 20px; - position: absolute; - background: url(../images/sprites.png) no-repeat 2px -1039px; + background: url("../images/sprites.png") no-repeat 2px -1039px; } .project-dashboard-view .compute-and-storage .system-dashboard li.storage .icon { @@ -9884,35 +9805,35 @@ div#details-tab-aclRules td.cidrlist span { } .project-dashboard-view .compute-and-storage .system-dashboard li .overview { + position: relative; width: 100%; height: 53px; - position: relative; margin: 81px 0 0; - color: #FFFFFF; + color: #ffffff; /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; + text-shadow: 0 1px 1px #000000; + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; } .project-dashboard-view .compute-and-storage .system-dashboard li.storage .overview .total { - font-size: 28px; - /*+placement:shift 30px 21px;*/ position: relative; - left: 30px; - top: 21px; + /*+placement:shift 30px 21px;*/ position: absolute; + top: 21px; + left: 30px; + font-size: 28px; } .project-dashboard-view .compute-and-storage .system-dashboard li.storage .overview .label { - font-size: 13px; - color: #C3C1C1; - /*+placement:shift 91px 33px;*/ position: relative; - left: 91px; - top: 33px; position: absolute; + /*+placement:shift 91px 33px;*/ + top: 33px; + left: 91px; + font-size: 13px; + color: #c3c1c1; } .project-dashboard-view .compute-and-storage .system-dashboard li .overview .overview-item { @@ -9926,20 +9847,20 @@ div#details-tab-aclRules td.cidrlist span { } .project-dashboard-view .compute-and-storage .system-dashboard li .overview .overview-item .label { - font-size: 11px; margin: 4px 0 0; - color: #C7C7C7; + font-size: 11px; + color: #c7c7c7; } .project-dashboard-view .compute-and-storage .system-dashboard li .overview .overview-item.running .label { - color: #2BFF2B; + color: #2bff2b; /*[empty]background-position:;*/ } .project-dashboard-view .users .system-dashboard { + clear: both; width: 509px; height: 100%; - clear: both; } .project-dashboard-view .users .system-dashboard ul { @@ -9954,25 +9875,24 @@ div#details-tab-aclRules td.cidrlist span { } .project-dashboard-view .users .system-dashboard li .icon { - background-position: -306px -1044px; left: 16px; + background-position: -306px -1044px; } .project-dashboard-view .users .system-dashboard li .header { + position: relative; + position: absolute; + /*+placement:shift 7px 110px;*/ + top: 110px; + left: 7px; width: 77px; max-width: 77px; - /*+placement:shift 7px 110px;*/ - position: relative; - left: 7px; - top: 110px; - position: absolute; - text-align: center; - overflow: hidden; white-space: nowrap; + text-align: center; text-overflow: ellipsis; + overflow: hidden; } -/**** Info box*/ .info-boxes { float: right; width: 233px; @@ -9982,25 +9902,25 @@ div#details-tab-aclRules td.cidrlist span { .info-boxes .info-box { display: inline-block; - border: 1px solid #B3C3D0; + border: 1px solid #b3c3d0; /*+box-shadow:inset 0px -1px 7px #A7A7A7;*/ - -moz-box-shadow: inset 0px -1px 7px #A7A7A7; - -webkit-box-shadow: inset 0px -1px 7px #A7A7A7; - -o-box-shadow: inset 0px -1px 7px #A7A7A7; - box-shadow: inset 0px -1px 7px #A7A7A7; - background: #FFFFFF; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + box-shadow: inset 0 -1px 7px #a7a7a7; + background: #ffffff; + -moz-box-shadow: inset 0 -1px 7px #a7a7a7; /*+border-radius:4px;*/ + -webkit-box-shadow: inset 0 -1px 7px #a7a7a7; + -o-box-shadow: inset 0 -1px 7px #a7a7a7; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; } .info-boxes .info-box.events { - margin-top: 4px; - height: 323px; width: 228px; + height: 323px; + margin-top: 4px; } .info-boxes .info-box.events ul { @@ -10010,57 +9930,57 @@ div#details-tab-aclRules td.cidrlist span { } .info-boxes .info-box ul { - margin: 0 0 3px 2px; - height: auto; display: inline-block; + height: auto; + margin: 0 0 3px 2px; } .info-boxes .info-box ul li { + display: inline-block; width: 224px; margin: 0 2px 0 0; - display: inline-block; - border-bottom: 1px solid #BDD2DF; - border-top: 1px solid #FFFFFF; + border-top: 1px solid #ffffff; + border-bottom: 1px solid #bdd2df; } .info-boxes .info-box ul li.odd { - background: #ECECEC; + background: #ececec; } .info-boxes .info-box .button { - background: url(../images/bg-gradients.png) 0px -734px; - color: #FFFFFF; - border: 1px solid #82A3C7; + float: right; + margin: 0 14px 0 0; + padding: 2px 6px 3px 3px; /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; + border: 1px solid #82a3c7; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + box-shadow: inset 0 1px 1px #85acc4; /*+border-radius:4px;*/ + background: url("../images/bg-gradients.png") 0 -734px; + font-size: 10px; + font-weight: bold; + color: #ffffff; + text-shadow: 0 1px 1px #000000; + /*+box-shadow:inset 0px 1px 1px #85ACC4;*/ + cursor: pointer; + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - /*+box-shadow:inset 0px 1px 1px #85ACC4;*/ - -moz-box-shadow: inset 0px 1px 1px #85ACC4; - -webkit-box-shadow: inset 0px 1px 1px #85ACC4; - -o-box-shadow: inset 0px 1px 1px #85ACC4; - box-shadow: inset 0px 1px 1px #85ACC4; - padding: 2px 6px 3px 3px; - font-size: 10px; - cursor: pointer; - font-weight: bold; - float: right; - margin: 0 14px 0 0; + -moz-box-shadow: inset 0 1px 1px #85acc4; + -webkit-box-shadow: inset 0 1px 1px #85acc4; + -o-box-shadow: inset 0 1px 1px #85acc4; } .info-boxes .info-box .button span { /*+placement:shift 0px 2px;*/ position: relative; - left: 0px; - top: 2px; float: left; + top: 2px; + left: 0; } .info-boxes .info-box .title .button { @@ -10068,97 +9988,96 @@ div#details-tab-aclRules td.cidrlist span { } .info-boxes .info-box .title .button span { - color: #FFFFFF; - font-size: 10px; - margin: 0; - padding: 0; - /*+placement:shift 1px 1px;*/ position: relative; - left: 1px; top: 1px; + left: 1px; + margin: 0; + /*+placement:shift 1px 1px;*/ + padding: 0; + font-size: 10px; + color: #ffffff; } .info-boxes .info-box .button:hover { - background-position: 0px -766px; + background-position: 0 -766px; } .info-boxes .info-box .button .arrow { + position: relative; + float: right; + top: 0; + /*+placement:shift 0px 0px;*/ + left: 0; width: 16px; height: 13px; - float: right; - /*+placement:shift 0px 0px;*/ - position: relative; - left: 0px; - top: 0px; - background: url(../images/sprites.png) no-repeat -455px -84px; + background: url("../images/sprites.png") no-repeat -455px -84px; } .info-boxes .info-box ul li .total, .info-boxes .info-box ul li .date { + position: relative; + float: left; + top: 0; + left: 0; width: 52px; height: 36px; - float: left; - font-size: 24px; - color: #647C91; - border-right: 1px solid #BDD2DF; /*+placement:shift;*/ - position: relative; - left: 0; - top: 0; + border-right: 1px solid #bdd2df; + font-size: 24px; + color: #647c91; text-align: right; } .info-boxes .info-box ul li .date { + margin: 1px 0 0; font-size: 11px; text-align: center; - margin: 1px 0 0; } .info-boxes .info-box ul li .date span { /*+placement:shift 0px 11px;*/ position: relative; - left: 0px; top: 11px; + left: 0; } .info-boxes .info-box ul li .desc { - color: #606060; - font-size: 12px; - /*+placement:shift 5px 8px;*/ - position: relative; - left: 5px; - top: 8px; display: inline-block; - padding-bottom: 13px; + position: relative; + /*+placement:shift 5px 8px;*/ + top: 8px; + left: 5px; max-width: 153px; - overflow: hidden; - text-overflow: ellipsis; + padding-bottom: 13px; + font-size: 12px; white-space: nowrap; + color: #606060; + text-overflow: ellipsis; + overflow: hidden; } .info-boxes .info-box ul li .total span { /*+placement:shift -5px 7px;*/ position: relative; - left: -5px; top: 7px; + left: -5px; } .info-boxes .info-box .title { height: 27px; - border-bottom: 1px solid #BDD2DF; + border-bottom: 1px solid #bdd2df; } .info-boxes .info-box .title span { /*+placement:shift 8px 6px;*/ position: relative; - left: 8px; top: 6px; + left: 8px; font-size: 12px; font-weight: bold; - color: #4E748C; + color: #4e748c; } -/*** New project form*/ .new-project { display: inline-block; margin: 0 0 20px 30px; @@ -10173,9 +10092,9 @@ div#details-tab-aclRules td.cidrlist span { } .ui-dialog .new-project .add-by { - font-size: 12px; - color: #5E6D7D; margin-left: 11px; + font-size: 12px; + color: #5e6d7d; } .ui-dialog .new-project .add-by input { @@ -10187,36 +10106,36 @@ div#details-tab-aclRules td.cidrlist span { } .new-project .title { - color: #3497E6; + margin: 10px 0 32px; font-size: 26px; /*+text-shadow:0px 1px 2px #D6D6D6;*/ - -moz-text-shadow: 0px 1px 2px #D6D6D6; - -webkit-text-shadow: 0px 1px 2px #D6D6D6; - -o-text-shadow: 0px 1px 2px #D6D6D6; - text-shadow: 0px 1px 2px #D6D6D6; - letter-spacing: 0px; - margin: 10px 0 32px; + letter-spacing: 0; + color: #3497e6; + text-shadow: 0 1px 2px #d6d6d6; + -moz-text-shadow: 0 1px 2px #d6d6d6; + -webkit-text-shadow: 0 1px 2px #d6d6d6; + -o-text-shadow: 0 1px 2px #d6d6d6; } .new-project .field { /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - width: 686px; display: inline-block; - background: #DFDFDF; + width: 686px; margin: -2px 0 -4px auto; + background: #dfdfdf; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; } #new-project-review-tabs-resouces { - background: #D2D2D2; height: 225px; + background: #d2d2d2; } .new-project .resources .ui-widget-content { - background: #FFFFFF; + background: #ffffff; } .new-project .resources .field { @@ -10225,123 +10144,123 @@ div#details-tab-aclRules td.cidrlist span { } .new-project .field span.value { - color: #475765; - /*+placement:shift 21px 20px;*/ position: relative; - left: 21px; + /*+placement:shift 21px 20px;*/ top: 20px; + left: 21px; + color: #475765; } .new-project .field label { display: block; + float: left; width: 104px; height: 59px; - color: #5B5B5B; - float: left; - background: #D2D2D2; - text-align: right; padding: 20px 24px 0 0; + background: #d2d2d2; + color: #5b5b5b; + text-align: right; } .new-project .resources .field label { - font-size: 14px; height: auto; padding: 10px 14px 14px 40px; + font-size: 14px; } .new-project .field label.error { - color: #FF0000; - font-size: 9px; - /*+placement:displace 154px 29px;*/ position: absolute; - margin-left: 154px; - margin-top: 29px; - background: transparent; width: auto; + /*+placement:displace 154px 29px;*/ height: auto; + margin-top: 29px; + margin-left: 154px; + background: transparent; + font-size: 9px; + color: #ff0000; } -.new-project .field input[type=text] { - background: #FFFFFF 0px 7px; +.new-project .field input[type='text'] { + float: right; /*+border-radius:5px;*/ - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - -khtml-border-radius: 5px; - border-radius: 5px; - border-radius: 5px 5px 5px 5px; - font-size: 14px; - border: 1px solid #E2E1DF; - /*+box-shadow:inset 0px 1px #A1A1A1;*/ - -moz-box-shadow: inset 0px 1px #A1A1A1; - -webkit-box-shadow: inset 0px 1px #A1A1A1; - -o-box-shadow: inset 0px 1px #A1A1A1; - box-shadow: inset 0px 1px #A1A1A1; - -moz-box-shadow: inset 0px 1px 0px #A1A1A1; - -webkit-box-shadow: inset 0px 1px 0px #A1A1A1; - -o-box-shadow: inset 0px 1px 0px #A1A1A1; width: 506px; height: 20px; margin: 17px 25px 0 0; - float: right; - border: 1px solid #C7C7C7; + border: 1px solid #e2e1df; + border: 1px solid #c7c7c7; + border-radius: 5px; + border-radius: 5px 5px 5px 5px; + /*+box-shadow:inset 0px 1px #A1A1A1;*/ + box-shadow: inset 0 1px #a1a1a1; + background: #ffffff 0 7px; + font-size: 14px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -khtml-border-radius: 5px; + -moz-box-shadow: inset 0 1px #a1a1a1; + -webkit-box-shadow: inset 0 1px #a1a1a1; + -o-box-shadow: inset 0 1px #a1a1a1; + -moz-box-shadow: inset 0 1px 0 #a1a1a1; + -webkit-box-shadow: inset 0 1px 0 #a1a1a1; + -o-box-shadow: inset 0 1px 0 #a1a1a1; } -.new-project .resources .field input[type=text] { +.new-project .resources .field input[type='text'] { margin: 6px 9px 0 0; } .new-project .button.cancel { - color: #808080; - background: transparent; - font-size: 12px; - font-weight: bold; - float: left; - cursor: pointer; - color: #838181; - /*+placement:shift 488px 9px;*/ position: relative; - left: 488px; + float: left; top: 9px; + left: 488px; left: 480px; margin: 19px 0 0 40px; + background: transparent; + /*+placement:shift 488px 9px;*/ + font-size: 12px; + font-weight: bold; + color: #808080; + color: #838181; + cursor: pointer; } .new-project .button.cancel:hover { - color: #3A3A3A; + color: #3a3a3a; } -.new-project input[type=submit], +.new-project input[type='submit'], .new-project .button.confirm { display: inline-block; - height: 31px; - border: none; - /*+placement:float-right 63px 18px;*/ - float: right; position: relative; - left: 63px; + float: right; + /*+placement:float-right 63px 18px;*/ top: 18px; - color: #FFFFFF; + left: 63px; + height: 31px; + margin: 0 63px 0 0; + border: 0; /*+text-shadow:0px -1px 1px #465259;*/ - -moz-text-shadow: 0px -1px 1px #465259; - -webkit-text-shadow: 0px -1px 1px #465259; - -o-text-shadow: 0px -1px 1px #465259; - text-shadow: 0px -1px 1px #465259; - background: #0049FF url(../images/gradients.png) 0px -317px; + border: 1px solid #0069cf; + border-top: 1px solid #0070fc; + border-radius: 9px; + border-radius: 9px 9px 9px 9px; + background: #0049ff url("../images/gradients.png") 0 -317px; font-size: 13px; font-weight: bold; - border: 1px solid #0069CF; - border-top: 1px solid #0070FC; + color: #ffffff; + text-shadow: 0 -1px 1px #465259; /*+border-radius:9px;*/ + cursor: pointer; + -moz-text-shadow: 0 -1px 1px #465259; + -webkit-text-shadow: 0 -1px 1px #465259; + -o-text-shadow: 0 -1px 1px #465259; -moz-border-radius: 9px; -webkit-border-radius: 9px; -khtml-border-radius: 9px; - border-radius: 9px; - border-radius: 9px 9px 9px 9px; - margin: 0px 63px 0 0; - cursor: pointer; } -.new-project input[type=submit]:hover, +.new-project input[type='submit']:hover, .new-project .button.confirm:hover { background-position: -3px -369px; } @@ -10353,25 +10272,25 @@ div#details-tab-aclRules td.cidrlist span { .new-project .button.confirm { display: block; height: 27px; - padding: 13px 10px 0px 12px; + padding: 13px 10px 0 12px; } .new-project .button.confirm.next { - padding: 10px 34px 0px 29px; + padding: 10px 34px 0 29px; } .new-project .review .button.confirm.next { /*+placement:shift 25px 11px;*/ position: relative; - left: 25px; top: 11px; + left: 25px; } .new-project .review .ui-tabs { /*+placement:shift -29px -31px;*/ position: relative; - left: -29px; top: -31px; + left: -29px; } .new-project .review .ui-tabs .ui-widget-content { @@ -10384,11 +10303,11 @@ div#details-tab-aclRules td.cidrlist span { } .new-project .review .ui-tabs ul { - text-align: left; - /*+placement:shift 0px -2px;*/ position: relative; - left: 0px; + /*+placement:shift 0px -2px;*/ top: -2px; + left: 0; + text-align: left; } .new-project .review .ui-tabs .list-view { @@ -10399,9 +10318,9 @@ div#details-tab-aclRules td.cidrlist span { .new-project .review .ui-tabs .list-view .fixed-header { position: absolute; z-index: 1000; - height: 58px; - background: #FFFFFF; top: -22px; + height: 58px; + background: #ffffff; } .new-project .review .ui-tabs .list-view .data-table table { @@ -10410,31 +10329,31 @@ div#details-tab-aclRules td.cidrlist span { } .new-project .review .ui-tabs .list-view .data-table table .edit { - width: 132px; - background: #FFFFFF; - /*+placement:shift 14px 0px;*/ position: relative; + top: 0; + /*+placement:shift 14px 0px;*/ left: 14px; - top: 0px; + width: 132px; + background: #ffffff; } .new-project .review .ui-tabs .list-view .data-table table .edit select { + float: left; width: 95px; height: 20px; - float: left; - background: #FFFFFF; - border: 1px solid #B2B2B2; + border: 1px solid #b2b2b2; + background: #ffffff; } .new-project .review .ui-tabs .list-view .data-table table .edit .action { + position: relative; float: left; + top: 0; + /*+placement:shift 14px 0px;*/ + left: 14px; + height: 20px; margin: 0; padding: 0; - /*+placement:shift 14px 0px;*/ - position: relative; - left: 14px; - top: 0px; - height: 20px; } .new-project .review .ui-tabs .list-view .toolbar { @@ -10442,13 +10361,13 @@ div#details-tab-aclRules td.cidrlist span { } .new-project .review .project-data { - padding: 16px; - background: #F4F4F4; - margin: 0; - /*+placement:shift -19px -13px;*/ position: relative; - left: -19px; top: -13px; + left: -19px; + /*+placement:shift -19px -13px;*/ + margin: 0; + padding: 16px; + background: #f4f4f4; } .new-project .review .project-data .field { @@ -10457,41 +10376,41 @@ div#details-tab-aclRules td.cidrlist span { } .new-project .button.later { - color: #808080; - background: url(../images/bg-gradients.png) 0px -261px; - border: 1px solid #B1B1B1; - /*+box-shadow:inset 0px 2px 2px #FFFFFF;*/ - -moz-box-shadow: inset 0px 2px 2px #FFFFFF; - -webkit-box-shadow: inset 0px 2px 2px #FFFFFF; - -o-box-shadow: inset 0px 2px 2px #FFFFFF; - box-shadow: inset 0px 2px 2px #FFFFFF; float: right; - font-size: 13px; margin: 19px -40px 0 0; padding: 13px 7px 14px 8px; + /*+box-shadow:inset 0px 2px 2px #FFFFFF;*/ + border: 1px solid #b1b1b1; + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + box-shadow: inset 0 2px 2px #ffffff; + background: url("../images/bg-gradients.png") 0 -261px; + font-size: 13px; + color: #808080; + -moz-box-shadow: inset 0 2px 2px #ffffff; /*+border-radius:10px;*/ + -webkit-box-shadow: inset 0 2px 2px #ffffff; + -o-box-shadow: inset 0 2px 2px #ffffff; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; - border-radius: 10px; - border-radius: 10px 10px 10px 10px; } .new-project .button.later:hover { - color: #000000; + box-shadow: inset 0 1px 1px #a1a1a1; /*+box-shadow:inset 0px 1px 1px #A1A1A1;*/ - -moz-box-shadow: inset 0px 1px 1px #A1A1A1; - -webkit-box-shadow: inset 0px 1px 1px #A1A1A1; - -o-box-shadow: inset 0px 1px 1px #A1A1A1; - box-shadow: inset 0px 1px 1px #A1A1A1; - background-position: 0px -86px; + background-position: 0 -86px; + color: #000000; + -moz-box-shadow: inset 0 1px 1px #a1a1a1; + -webkit-box-shadow: inset 0 1px 1px #a1a1a1; + -o-box-shadow: inset 0 1px 1px #a1a1a1; } -.new-project input[type=submit]:hover { +.new-project input[type='submit']:hover { background-position: -3px -369px; } -.new-project .resources input[type=submit] { +.new-project .resources input[type='submit'] { display: none; } @@ -10505,81 +10424,79 @@ div#details-tab-aclRules td.cidrlist span { .new-project .multi-edit .data .data-item { margin: 0; - border: none; - border: 1px solid #D2D2D2; + border: 0; + border: 1px solid #d2d2d2; } .new-project .multi-edit .data .data-item.even td { - background: #DFE1E3; + background: #dfe1e3; } -/*Tooltip*/ .tooltip-box { + display: inline-block; width: 15%; height: auto; - display: inline-block; + margin-left: 23px; padding: 4px; - background: #FFFFFF; - border: 1px solid #BEB8B8; padding: 10px; + border: 1px solid #beb8b8; /*+border-radius:4px;*/ + border-radius: 4px; + box-shadow: 0 1px 12px #353535; + background: #ffffff; -moz-border-radius: 4px; -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - margin-left: 23px; /*+box-shadow:0px 1px 12px #353535;*/ - -moz-box-shadow: 0px 1px 12px #353535; - -webkit-box-shadow: 0px 1px 12px #353535; - -o-box-shadow: 0px 1px 12px #353535; - box-shadow: 0px 1px 12px #353535; + -khtml-border-radius: 4px; + -moz-box-shadow: 0 1px 12px #353535; + -webkit-box-shadow: 0 1px 12px #353535; + -o-box-shadow: 0 1px 12px #353535; } .tooltip-box .arrow { + position: relative; + position: absolute; + top: 3px; + /*+placement:shift -16px 3px;*/ + left: -16px; width: 19px; height: 30px; - background: url(../images/sprites.png) -585px -947px; - /*+placement:shift -16px 3px;*/ - position: relative; - left: -16px; - top: 3px; - position: absolute; + background: url("../images/sprites.png") -585px -947px; } -/*Tagger*/ .tagger { + position: relative; + top: 0; + left: -4px; width: 94%; margin: auto; - padding-bottom: 12px; - background: #F2F0F0; - border: 1px solid #CFC9C9; /*+placement:shift -4px 0px;*/ - position: relative; - left: -4px; - top: 0px; + padding-bottom: 12px; + border: 1px solid #cfc9c9; + background: #f2f0f0; } .tagger .field { - width: 35%; - float: left; position: relative; + float: left; + width: 35%; } .tagger .tag-info { - font-size: 11px; - color: #757575; margin-top: 12px; margin-left: 8px; + font-size: 11px; + color: #757575; } .tagger .tag-info.title { - font-size: 11px; - color: #6F9BF0; margin-bottom: 5px; + font-size: 11px; + color: #6f9bf0; } .tagger form { - margin: 12px 9px 0px; + margin: 12px 9px 0; } .tagger.readonly form { @@ -10588,35 +10505,35 @@ div#details-tab-aclRules td.cidrlist span { .tagger form label { display: block; + position: relative; float: left; + top: 8px; + left: 5px; width: 25px; - text-align: right; - font-size: 10px; - color: #394552; margin-right: 9px; /*+placement:shift 5px 8px;*/ - position: relative; - left: 5px; - top: 8px; + font-size: 10px; + color: #394552; + text-align: right; } .tagger form label.error { position: absolute; - color: #FF0000; - left: 44px; top: 28px !important; + left: 44px; + color: #ff0000; /*[empty]background-color:;*/ } .tagger form input { padding: 4px; - background: #FFFFFF; border: 1px solid #808080; + border-radius: 4px; /*+border-radius:4px;*/ + background: #ffffff; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; } .tagger form input { @@ -10624,28 +10541,28 @@ div#details-tab-aclRules td.cidrlist span { margin-left: 9px; } -.tagger form input[type=submit] { - background: url(../images/bg-gradients.png) repeat-x 0px -220px; - cursor: pointer; - color: #FFFFFF; +.tagger form input[type='submit'] { + width: auto; + margin-left: 16px; + padding: 7px 25px 7px 26px; /*+text-shadow:0px -1px 2px #000000;*/ - -moz-text-shadow: 0px -1px 2px #000000; - -webkit-text-shadow: 0px -1px 2px #000000; - -o-text-shadow: 0px -1px 2px #000000; - text-shadow: 0px -1px 2px #000000; - border: none; + border: 0; + border-radius: 4px; + background: url("../images/bg-gradients.png") repeat-x 0 -220px; + color: #ffffff; + text-shadow: 0 -1px 2px #000000; /*+border-radius:4px;*/ + cursor: pointer; + -moz-text-shadow: 0 -1px 2px #000000; + -webkit-text-shadow: 0 -1px 2px #000000; + -o-text-shadow: 0 -1px 2px #000000; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - padding: 7px 25px 7px 26px; - margin-left: 16px; - width: auto; } -.tagger form input[type=submit]:hover { - background-position: 0px -946px; +.tagger form input[type='submit']:hover { + background-position: 0 -946px; } .tagger ul { @@ -10653,39 +10570,39 @@ div#details-tab-aclRules td.cidrlist span { width: 96%; margin: 16px auto auto; /*+border-radius:2px;*/ + padding-bottom: 10px; + border: 1px solid #d2d2d2; + border-radius: 2px; + box-shadow: inset 0 0 10px #dcdcdc; + background: #ffffff; + overflow: auto; -moz-border-radius: 2px; -webkit-border-radius: 2px; - -khtml-border-radius: 2px; - border-radius: 2px; - overflow: auto; - padding-bottom: 10px; - border: 1px solid #D2D2D2; - background: #FFFFFF; /*+box-shadow:inset 0px 0px 10px #DCDCDC;*/ - -moz-box-shadow: inset 0px 0px 10px #DCDCDC; - -webkit-box-shadow: inset 0px 0px 10px #DCDCDC; - -o-box-shadow: inset 0px 0px 10px #DCDCDC; - box-shadow: inset 0px 0px 10px #DCDCDC; + -khtml-border-radius: 2px; + -moz-box-shadow: inset 0 0 10px #dcdcdc; + -webkit-box-shadow: inset 0 0 10px #dcdcdc; + -o-box-shadow: inset 0 0 10px #dcdcdc; } .tagger ul li { - background: #DFDFDF 0px 4px; - height: 15px; - padding: 0px 18px 0 7px; display: inline-block; + position: relative; float: left; - margin-left: 7px; - margin-right: 2px; + top: 2px; + left: 0; + height: 15px; margin-top: 5px; + margin-right: 2px; /*+border-radius:4px;*/ + margin-left: 7px; + padding: 0 18px 0 7px; + border-radius: 4px; + background: #dfdfdf 0 4px; + /*+placement:shift 0px 2px;*/ -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - /*+placement:shift 0px 2px;*/ - position: relative; - left: 0px; - top: 2px; } .tagger ul li span { @@ -10698,10 +10615,10 @@ div#details-tab-aclRules td.cidrlist span { } .tagger ul li span.label { - font-size: 10px; position: relative; - left: 15px; top: -2px; + left: 15px; + font-size: 10px; } .tagger.readonly ul li span.label { @@ -10709,44 +10626,44 @@ div#details-tab-aclRules td.cidrlist span { } .tagger ul li span.label > span { - float: left; display: block; + float: left; margin-top: 2px; } .tagger ul li span.label > span.key { - font-weight: bold; max-width: 134px; - overflow: hidden; + margin-right: 5px; + margin-left: 15px; + font-weight: bold; white-space: nowrap; text-overflow: ellipsis; - margin-left: 15px; - margin-right: 5px; + overflow: hidden; } .tagger ul li span.label > span.value { max-width: 160px; - overflow: hidden; + margin-left: 6px; white-space: nowrap; text-overflow: ellipsis; - margin-left: 6px; + overflow: hidden; } .tagger ul li span.remove { - width: 15px !important; - overflow: hidden !important; - height: 11px !important; - background: #DFDFDF; display: block; - top: 0px !important; + position: absolute !important; + top: 0 !important; left: -3px !important; - text-indent: 4px; - padding: 4px 0px 0px 8px; + width: 15px !important; + height: 11px !important; + padding: 4px 0 0 8px; + background: #dfdfdf; font-size: 8px; font-weight: bold; + color: #5b5b5b; + text-indent: 4px; cursor: pointer; - position: absolute !important; - color: #5B5B5B; + overflow: hidden !important; } .tagger.readonly ul li span.remove { @@ -10785,97 +10702,96 @@ div#details-tab-aclRules td.cidrlist span { font-size: 11px !important; } -.ui-dialog .tagger input[type=submit] { +.ui-dialog .tagger input[type='submit'] { padding: 6px 15px; } -/*VPC / vApps*/ .vpc-chart { + position: relative; width: 100%; height: 94%; - overflow: auto; - position: relative; margin: 30px 0 0; - background: #FFFFFF 0px 24px; + background: #ffffff 0 24px; + overflow: auto; } .vpc-chart .vpc-title { + position: relative; + position: absolute; + /*+placement:shift 11px 41px;*/ + top: 41px; + left: 11px; width: 210px; font-size: 22px; - /*+placement:shift 11px 41px;*/ - position: relative; - left: 11px; - top: 41px; - position: absolute; - color: #5F768A; + color: #5f768a; } .vpc-chart .vpc-title > span { - max-width: 160px; display: block; float: left; - overflow-y: hidden; + max-width: 160px; overflow-x: auto; + overflow-y: hidden; } .vpc-chart .vpc-title .icon { - padding: 7px 15px; - background: url(../images/sprites.png) no-repeat -145px -195px; - margin-left: 10px; - cursor: pointer; - /*+placement:shift 6px -8px;*/ position: relative; - left: 6px; - top: -8px; float: left; + top: -8px; + left: 6px; + /*+placement:shift 6px -8px;*/ + margin-left: 10px; + padding: 7px 15px; + background: url("../images/sprites.png") no-repeat -145px -195px; + cursor: pointer; } .vpc-chart .vpc-title .vpc-configure-tooltip { + display: none; + position: absolute; + z-index: 2000; width: 129px; padding: 35px 10px 10px; font-size: 14px; - display: none; - z-index: 2000; - position: absolute; } .vpc-chart .vpc-title .vpc-configure-tooltip .arrow { - width: 30px; - height: 20px; - background: #FFFFFF url(../images/sprites.png) no-repeat -589px -997px; - /*+placement:shift 13px 26px;*/ position: relative; - left: 13px; - top: 26px; position: absolute; z-index: 1; + /*+placement:shift 13px 26px;*/ + top: 26px; + left: 13px; + width: 30px; + height: 20px; + background: #ffffff url("../images/sprites.png") no-repeat -589px -997px; } .vpc-chart .vpc-title .vpc-configure-tooltip ul { - border: 1px solid #C2C2C2; - background: #FFFFFF; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - /*+placement:shift 0px -6px;*/ position: relative; - left: 0px; top: -6px; + /*+border-radius:4px;*/ + left: 0; margin: 10px 0; padding: 9px; + border: 1px solid #c2c2c2; + /*+placement:shift 0px -6px;*/ + border-radius: 4px; + box-shadow: 0 1px 8px #cbcbcb; + background: #ffffff; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; /*+box-shadow:0px 1px 8px #CBCBCB;*/ - -moz-box-shadow: 0px 1px 8px #CBCBCB; - -webkit-box-shadow: 0px 1px 8px #CBCBCB; - -o-box-shadow: 0px 1px 8px #CBCBCB; - box-shadow: 0px 1px 8px #CBCBCB; + -khtml-border-radius: 4px; + -moz-box-shadow: 0 1px 8px #cbcbcb; + -webkit-box-shadow: 0 1px 8px #cbcbcb; + -o-box-shadow: 0 1px 8px #cbcbcb; } .vpc-chart .vpc-title .vpc-configure-tooltip li { padding: 3px 0 5px; - cursor: pointer; font-size: 12px; + cursor: pointer; } .vpc-chart .vpc-title .vpc-configure-tooltip li:hover { @@ -10883,221 +10799,221 @@ div#details-tab-aclRules td.cidrlist span { } .vpc-chart ul.tiers { - padding: 0 0 0 26px; margin: 79px 0 0 232px; - border-left: 3px solid #CCC; + padding: 0 0 0 26px; + border-left: 3px solid #cccccc; } .vpc-chart li.tier { display: block; + position: relative; + position: relative; + top: 58px; + /*+border-radius:4px;*/ + left: 0; width: 258px; height: 107px; margin: -55px 0 90px; - /*+border-radius:4px;*/ + border: 1px solid #50545a; + border-radius: 4px; + /*+placement:shift 0px 58px;*/ + box-shadow: 0 5px 7px #dadada; + background: url("../images/bg-gradients.png") 0 -2637px; -moz-border-radius: 4px; -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border: 1px solid #50545A; - background: url(../images/bg-gradients.png) 0px -2637px; - /*+placement:shift 0px 58px;*/ - position: relative; - left: 0px; - top: 58px; - position: relative; /*+box-shadow:0px 5px 7px #DADADA;*/ - -moz-box-shadow: 0px 5px 7px #DADADA; - -webkit-box-shadow: 0px 5px 7px #DADADA; - -o-box-shadow: 0px 5px 7px #DADADA; - box-shadow: 0px 5px 7px #DADADA; + -khtml-border-radius: 4px; + -moz-box-shadow: 0 5px 7px #dadada; + -webkit-box-shadow: 0 5px 7px #dadada; + -o-box-shadow: 0 5px 7px #dadada; } .vpc-chart li.tier .loading-overlay { /*+border-radius:4px;*/ + border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; } .vpc-chart li.tier .connect-line { position: absolute; + position: relative; + position: absolute; + top: 49px; + /*+placement:shift -29px 49px;*/ + left: -29px; width: 28px; height: 3px; - background: #CCCCCC 0px -8px; - /*+placement:shift -29px 49px;*/ - position: relative; - left: -29px; - top: 49px; - position: absolute; + background: #cccccc 0 -8px; } .vpc-chart li.tier span.title { - color: #FFFFFF; - /*+placement:shift 8px 7px;*/ position: relative; - left: 8px; - top: 7px; + /*+placement:shift 8px 7px;*/ position: absolute; - cursor: pointer; + top: 7px; + left: 8px; padding: 3px; font-size: 24px; + color: #ffffff; + text-decoration: underline; /*+text-shadow:1px 2px 2px #000000;*/ + text-shadow: 1px 2px 2px #000000; + cursor: pointer; -moz-text-shadow: 1px 2px 2px #000000; -webkit-text-shadow: 1px 2px 2px #000000; -o-text-shadow: 1px 2px 2px #000000; - text-shadow: 1px 2px 2px #000000; - text-decoration: underline; } .vpc-chart li.tier span.cidr { /*+placement:shift 12px 46px;*/ position: relative; - left: 12px; - top: 46px; position: absolute; + top: 46px; + left: 12px; font-size: 14px; /*+text-shadow:0px -1px 1px #343E4C;*/ - -moz-text-shadow: 0px -1px 1px #343E4C; - -webkit-text-shadow: 0px -1px 1px #343E4C; - -o-text-shadow: 0px -1px 1px #343E4C; - text-shadow: 0px -1px 1px #343E4C; - color: #FFFFFF; + color: #ffffff; + text-shadow: 0 -1px 1px #343e4c; + -moz-text-shadow: 0 -1px 1px #343e4c; + -webkit-text-shadow: 0 -1px 1px #343e4c; + -o-text-shadow: 0 -1px 1px #343e4c; } .vpc-chart li.tier .actions { + position: relative; + position: absolute; + position: absolute; + /*+border-radius:0 0 4px 4px;*/ + top: 71px; + left: -1px; width: 258px; height: 35px; - background: #CCC; - /*+border-radius:0 0 4px 4px;*/ + /*+placement:shift -1px 71px;*/ + border: 1px solid #808080; + border-top: 1px solid #4c545e; + border-radius: 0 0 4px 4px; + box-shadow: inset 0 1px #ffffff; + /*+box-shadow:inset 0px 1px #FFFFFF;*/ + background: #cccccc; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; -khtml-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; - /*+placement:shift -1px 71px;*/ - position: relative; - left: -1px; - top: 71px; - position: absolute; - /*+box-shadow:inset 0px 1px #FFFFFF;*/ - -moz-box-shadow: inset 0px 1px #FFFFFF; - -webkit-box-shadow: inset 0px 1px #FFFFFF; - -o-box-shadow: inset 0px 1px #FFFFFF; - box-shadow: inset 0px 1px #FFFFFF; - border: 1px solid #808080; - border-top: 1px solid #4C545E; - position: absolute; + -moz-box-shadow: inset 0 1px #ffffff; + -webkit-box-shadow: inset 0 1px #ffffff; + -o-box-shadow: inset 0 1px #ffffff; } .vpc-chart li.tier .actions .action { - cursor: pointer; float: left; width: 50px; height: 24px; - text-align: center; + margin: 4px 0 4px 4px; + border: 1px solid #909090; /*+border-radius:4px;*/ + border-radius: 4px; + background: url("../images/bg-gradients.png") 0 -2533px; + font-weight: bold; + color: #4b637a; + text-align: center; + text-shadow: 0 1px 1px #ffffff; + cursor: pointer; -moz-border-radius: 4px; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - margin: 4px 0px 4px 4px; - border: 1px solid #909090; - color: #4B637A; - font-weight: bold; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - background: url(../images/bg-gradients.png) 0px -2533px; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; } .vpc-chart li.tier .actions .action.disabled, .vpc-chart li.tier .actions .action.disabled:hover { - color: #9D9D9D; - background: #CFCFCF; + border-color: #b5b5b5; + box-shadow: none; /*+text-shadow:none;*/ + background: #cfcfcf; + color: #9d9d9d; + text-shadow: none; + cursor: not-allowed; -moz-text-shadow: none; -webkit-text-shadow: none; - -o-text-shadow: none; - text-shadow: none; - border-color: #B5B5B5; - cursor: not-allowed; /*+box-shadow:none;*/ + -o-text-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; - box-shadow: none; } .vpc-chart li.tier .actions .action:hover { - border: 1px solid #7A8B9A; - background-position: 0px -106px; - color: #5B7A96; + border: 1px solid #7a8b9a; + box-shadow: inset 1px 2px 4px #808080; + background-position: 0 -106px; /*+box-shadow:inset 1px 2px 4px #808080;*/ + color: #5b7a96; -moz-box-shadow: inset 1px 2px 4px #808080; -webkit-box-shadow: inset 1px 2px 4px #808080; -o-box-shadow: inset 1px 2px 4px #808080; - box-shadow: inset 1px 2px 4px #808080; } .vpc-chart li.tier .actions .action span.label { /*+placement:shift 1px 3px;*/ position: relative; - left: 1px; top: 3px; + left: 1px; font-size: 11px; } .vpc-chart li.tier .actions .action.remove, .vpc-chart li.tier .actions .action.remove:hover { - background: none; - width: 30px; - padding: 0; - float: right; - border: none; - /*+placement:shift -3px -2px;*/ position: relative; - left: -3px; + float: right; top: -2px; + left: -3px; + width: 30px; + /*+placement:shift -3px -2px;*/ + padding: 0; + border: 0; + box-shadow: none; /*+box-shadow:none;*/ + background: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; - box-shadow: none; } .vpc-chart li.tier .action span.icon { - background-image: url(../images/sprites.png); - cursor: pointer; - width: 37px; - height: 23px; - float: left; - /*+placement:shift 1px 3px;*/ position: relative; - left: 1px; + float: left; top: 3px; + left: 1px; + width: 37px; + /*+placement:shift 1px 3px;*/ + height: 23px; + background-image: url("../images/sprites.png"); + cursor: pointer; } .vpc-chart li.tier .vm-count { - font-size: 23px; - left: 134px; - top: 3px; + display: block; position: absolute; - color: #FFFFFF; + top: 3px; + left: 134px; + width: 100px; /*+text-shadow:1px 2px 2px #000000;*/ + margin: 4px; + padding: 5px; + border: 1px solid transparent; + font-size: 23px; + color: #ffffff; + text-align: center; + text-decoration: underline; + text-shadow: 1px 2px 2px #000000; + cursor: pointer; -moz-text-shadow: 1px 2px 2px #000000; -webkit-text-shadow: 1px 2px 2px #000000; -o-text-shadow: 1px 2px 2px #000000; - text-shadow: 1px 2px 2px #000000; - cursor: pointer; - display: block; - padding: 5px; - text-align: center; - width: 100px; - border: 1px solid transparent; - margin: 4px; - text-decoration: underline; } .vpc-chart li.tier.loading .vm-count { @@ -11105,23 +11021,23 @@ div#details-tab-aclRules td.cidrlist span { } .vpc-chart li.tier .vm-count .loading-overlay { + opacity: 1; display: none; - width: 24px; - height: 24px; position: absolute; - left: 15px; top: 7px; + left: 15px; + width: 24px; /*+border-radius:12px;*/ + height: 24px; + border-radius: 12px; + background-image: url("../images/ajax-loader-small.gif"); -moz-border-radius: 12px; -webkit-border-radius: 12px; - -khtml-border-radius: 12px; - border-radius: 12px; - background-image: url(../images/ajax-loader-small.gif); /*+opacity:100%;*/ + -khtml-border-radius: 12px; filter: alpha(opacity=100); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); -moz-opacity: 1; - opacity: 1; } .vpc-chart li.tier.loading .vm-count .loading-overlay { @@ -11130,9 +11046,9 @@ div#details-tab-aclRules td.cidrlist span { .vpc-chart li.tier .vm-count:hover, .vpc-chart li.tier .title:hover { + border: 1px solid #4c545e; border-radius: 4px; - border: 1px solid #4C545E; - background: url(../images/bg-gradients.png) 0px -2751px; + background: url("../images/bg-gradients.png") 0 -2751px; } .vpc-chart li.tier .vm-count .total { @@ -11141,63 +11057,63 @@ div#details-tab-aclRules td.cidrlist span { } .vpc-chart li.tier.placeholder { - background: #ECECEC; - border: dotted #ACACAC; + border: dotted #acacac; + border-radius: 4px; /*+border-radius:4px;*/ + box-shadow: none; + background: #ececec; + cursor: pointer; -moz-border-radius: 4px; + /*+box-shadow:none;*/ -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - /*+box-shadow:none;*/ -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; - box-shadow: none; - cursor: pointer; } .vpc-chart li.tier.placeholder:hover { - background: #D3D3D3; + box-shadow: 0 2px 8px #a7a7a7; /*+box-shadow:0px 2px 8px #A7A7A7;*/ - -moz-box-shadow: 0px 2px 8px #A7A7A7; - -webkit-box-shadow: 0px 2px 8px #A7A7A7; - -o-box-shadow: 0px 2px 8px #A7A7A7; - box-shadow: 0px 2px 8px #A7A7A7; + background: #d3d3d3; + -moz-box-shadow: 0 2px 8px #a7a7a7; + -webkit-box-shadow: 0 2px 8px #a7a7a7; + -o-box-shadow: 0 2px 8px #a7a7a7; } .vpc-chart li.tier.placeholder span { top: 40px; left: 66px; - color: #9F9F9F; + color: #9f9f9f; /*+text-shadow:none;*/ + text-decoration: none; + text-shadow: none; -moz-text-shadow: none; -webkit-text-shadow: none; -o-text-shadow: none; - text-shadow: none; - text-decoration: none; } .vpc-chart li.tier.placeholder:hover span { - color: #000000; + border: 0; /*+text-shadow:0px 0px 7px #FFFFFF;*/ - -moz-text-shadow: 0px 0px 7px #FFFFFF; - -webkit-text-shadow: 0px 0px 7px #FFFFFF; - -o-text-shadow: 0px 0px 7px #FFFFFF; - text-shadow: 0px 0px 7px #FFFFFF; background: none; - border: none; + color: #000000; + text-shadow: 0 0 7px #ffffff; + -moz-text-shadow: 0 0 7px #ffffff; + -webkit-text-shadow: 0 0 7px #ffffff; + -o-text-shadow: 0 0 7px #ffffff; } .vpc-chart li.tier.virtual-router { - margin: 0px; + position: relative; + top: -36px; + left: 17px; + /*+placement:shift 17px -36px;*/ width: 222px; height: 65px; - /*+placement:shift 17px -36px;*/ - position: relative; - left: 17px; - top: -36px; - background-position: 0px -2519px; - border: 1px solid #ADADAD; + margin: 0; + border: 1px solid #adadad; + background-position: 0 -2519px; cursor: pointer; } @@ -11215,55 +11131,54 @@ div#details-tab-aclRules td.cidrlist span { } .vpc-chart li.tier.virtual-router span { - color: #586E82; - font-size: 18px; - /*+text-shadow:0px 1px 3px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 3px #FFFFFF; - -webkit-text-shadow: 0px 1px 3px #FFFFFF; - -o-text-shadow: 0px 1px 3px #FFFFFF; - text-shadow: 0px 1px 3px #FFFFFF; - /*+placement:shift 53px 22px;*/ position: relative; - left: 53px; top: 22px; + /*+text-shadow:0px 1px 3px #FFFFFF;*/ + left: 53px; + font-size: 18px; + color: #586e82; text-decoration: none; + /*+placement:shift 53px 22px;*/ + text-shadow: 0 1px 3px #ffffff; + -moz-text-shadow: 0 1px 3px #ffffff; + -webkit-text-shadow: 0 1px 3px #ffffff; + -o-text-shadow: 0 1px 3px #ffffff; } .vpc-chart li.tier.virtual-router span:hover { + border: 0; background: none; - border: none; } .vpc-chart li.tier.virtual-router .connect-line { /*+placement:shift -47px 14px;*/ position: relative; - left: -47px; top: 14px; + left: -47px; width: 46px; } /*VPC: Enable Static NAT fields*/ .list-view.instances .filters.tier-select { width: 246px; - padding: 2px 20px 2px 13px; margin: 1px 120px 0 19px; + padding: 2px 20px 2px 13px; } .list-view.instances .filters.tier-select label { - color: #FFFFFF; + color: #ffffff; /*+text-shadow:0px 1px 3px #000000;*/ - -moz-text-shadow: 0px 1px 3px #000000; - -webkit-text-shadow: 0px 1px 3px #000000; - -o-text-shadow: 0px 1px 3px #000000; - text-shadow: 0px 1px 3px #000000; + text-shadow: 0 1px 3px #000000; + -moz-text-shadow: 0 1px 3px #000000; + -webkit-text-shadow: 0 1px 3px #000000; + -o-text-shadow: 0 1px 3px #000000; } .list-view.instances .filters.tier-select select { - width: 166px; float: left; + width: 166px; } -/*Configure ACL dialog / VM tier list view dialog*/ .ui-dialog.configure-acl .multi-edit { width: 866px; } @@ -11280,8 +11195,8 @@ div#details-tab-aclRules td.cidrlist span { .ui-dialog.configure-acl .ui-dialog-buttonpane { /*+placement:shift 722px -2px;*/ position: relative; - left: 722px; top: -2px; + left: 722px; } .ui-dialog.configure-acl div.view.list-view { @@ -11290,9 +11205,9 @@ div#details-tab-aclRules td.cidrlist span { .ui-dialog.configure-acl .multi-edit .data { width: 901px; - padding: 0; - margin: 0; height: 370px; + margin: 0; + padding: 0; overflow: auto; overflow-x: hidden; } @@ -11319,8 +11234,8 @@ div.ui-dialog div.acl div.multi-edit div.data div.data-body div.data-item table .detail-view .acl .multi-edit th, .detail-view .acl .multi-edit td { - padding-right: 0px !important; min-width: 25px !important; + padding-right: 0 !important; } .detail-view .acl .multi-edit th { @@ -11333,15 +11248,14 @@ div.ui-dialog div.acl div.multi-edit div.data div.data-body div.data-item table .detail-view .acl .multi-edit .add-vm { width: 51px; - text-indent: 0px; - padding-right: 0px; + padding-right: 0; + text-indent: 0; } .detail-view .acl .multi-edit td.multi-actions { width: 65px; } -/*HEALTH CHECK*/ .ui-dialog .health-check { height: 295px !important; padding-bottom: 93px; @@ -11353,30 +11267,29 @@ div.ui-dialog div.health-check div.health-check-description { div.ui-dialog div.health-check div.form-container form div.form-item { width: 58%; - margin-left: 116px; margin-top: -16px; margin-bottom: 30px; + margin-left: 116px; } div.ui-dialog div.health-check div.health-check-config-title { float: left; - color: #808080; - font-size: 17px; margin-left: 15px; + font-size: 17px; + color: #808080; } div.ui-dialog div.health-check div.health-check-advanced-title { float: left; - color: #808080; - font-size: 17px; - margin-left: 15px; margin-top: -70px; + margin-left: 15px; + font-size: 17px; + color: #808080; } -/*Autoscaler*/ .ui-dialog div.autoscaler { - overflow: auto; max-height: 600px; + overflow: auto; } div.container div.panel div#details-tab-network.detail-group div div.multi-edit table.multi-edit tbody tr td, @@ -11392,69 +11305,69 @@ div.container div.panel div#details-tab-network.detail-group div div.multi-edit } .ui-dialog div.autoscaler .detail-actions .buttons .action { + float: left; width: 32px; - float: left; } -.ui-dialog div.autoscaler div.form-container div.form-item[rel=securityGroups] { +.ui-dialog div.autoscaler div.form-container div.form-item[rel='securityGroups'] { display: block; - width: 370px; float: left; + width: 370px; } -.ui-dialog div.autoscaler div.form-container div.form-item[rel=diskOfferingId] { +.ui-dialog div.autoscaler div.form-container div.form-item[rel='diskOfferingId'] { display: inline-block; - width: 370px; - float: left; position: relative; + float: left; + width: 370px; margin-top: 1px; } -.ui-dialog div.autoscaler div.form-container div.form-item[rel=minInstance] { +.ui-dialog div.autoscaler div.form-container div.form-item[rel='minInstance'] { display: block; - width: 50%; float: left; + width: 50%; } -.ui-dialog div.autoscaler div.form-container div.form-item[rel=maxInstance] { +.ui-dialog div.autoscaler div.form-container div.form-item[rel='maxInstance'] { display: inline-block; - width: 50%; + position: relative; float: left; left: -30px; - position: relative; + width: 50%; } -.ui-dialog div.autoscaler div.form-container div.form-item[rel=interval] { +.ui-dialog div.autoscaler div.form-container div.form-item[rel='interval'] { display: block; - width: 50%; float: left; + width: 50%; } -.ui-dialog div.autoscaler div.form-container div.form-item[rel=quietTime] { +.ui-dialog div.autoscaler div.form-container div.form-item[rel='quietTime'] { display: inline-block; - width: 50%; + position: relative; float: left; left: -15px; - position: relative; + width: 50%; } -.ui-dialog div.autoscaler div.form-container div.form-item[rel=snmpCommunity] { +.ui-dialog div.autoscaler div.form-container div.form-item[rel='snmpCommunity'] { display: block; - width: 50%; float: left; + width: 50%; } -.ui-dialog div.autoscaler div.form-container div.form-item[rel=snmpPort] { +.ui-dialog div.autoscaler div.form-container div.form-item[rel='snmpPort'] { display: inline-block; - width: 50%; + position: relative; float: left; left: -15px; - position: relative; + width: 50%; } .ui-dialog div.autoscaler div.form-container div.value select { - width: 88%; float: left; + width: 88%; } div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container { @@ -11466,73 +11379,73 @@ div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container { } div.ui-dialog div.autoscaler div.scale-up-policy div.multi-edit { - margin-top: 0px; + margin-top: 0; } div.ui-dialog div.autoscaler div.scale-down-policy div.multi-edit { - margin-top: 0px; + margin-top: 0; } div.ui-dialog div.autoscaler div.scale-up-policy-title { - color: #0055BB; - margin-left: -650px; margin-top: 40px; + margin-left: -650px; + color: #0055bb; } div.ui-dialog div.autoscaler div.scale-up-policy-title label { - font-size: 13px; - margin-left: 200px; margin-right: 10px; + margin-left: 200px; + font-size: 13px; } div.ui-dialog div.autoscaler div.scale-up-policy-title hr.policy-divider { - border-left: 1px none #38546D; - border-right: 1px none #16222C; - border-top: 1px none #38546D; margin-bottom: 12px; + border-top: 1px none #38546d; + border-right: 1px none #16222c; + border-left: 1px none #38546d; } div.ui-dialog div.autoscaler div.scale-down-policy-title hr.policy-divider { - border-left: 1px none #38546D; - border-right: 1px none #16222C; - border-top: 1px none #38546D; margin-bottom: 12px; + border-top: 1px none #38546d; + border-right: 1px none #16222c; + border-left: 1px none #38546d; } div.ui-dialog div.autoscaler div.field-group.bottom-fields hr.policy-divider { - border-left: 1px none #38546D; - border-right: 1px none #16222C; - border-top: 1px none #38546D; margin-top: 15px; margin-bottom: -1px; + border-top: 1px none #38546d; + border-right: 1px none #16222c; + border-left: 1px none #38546d; } div.ui-dialog div.autoscaler div.scale-down-policy-title label { - font-size: 13px; - margin-left: 170px; margin-right: 10px; + margin-left: 170px; + font-size: 13px; } div.ui-dialog div.autoscaler div.scale-down-policy-title { - color: #0055BB; - margin-left: -620px; margin-top: 10px; + margin-left: -620px; + color: #0055bb; } -div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container div.form-item div.value input[type=text] { - margin-left: 729px; +div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container div.form-item div.value input[type='text'] { width: 30%; margin-top: -17px; + margin-left: 729px; } div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container div.form-item div.name { margin-left: 420px; } -div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container div.form-item div.value input[type=text] { - margin-left: 698px; +div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container div.form-item div.value input[type='text'] { width: 30%; margin-top: -16px; + margin-left: 698px; } div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container div.form-item div.name { @@ -11540,73 +11453,73 @@ div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container div. } div.ui-dialog div.autoscaler div.scale-up-policy div.multi-edit div.data div.data-body div.data-item { - margin-bottom: 0px; margin-right: 22px; + margin-bottom: 0; } div.ui-dialog div.autoscaler div.scale-down-policy div.multi-edit div.data div.data-body div.data-item { - margin-bottom: 0px; margin-right: 22px; + margin-bottom: 0; } div.ui-dialog div.autoscaler div.scale-up-policy div.slide-label { - color: #A5A3A7; - font-size: 14px; + width: 12px; margin-bottom: 3px; margin-left: 755px; - width: 12px; + font-size: 14px; + color: #a5a3a7; } div.ui-dialog div.autoscaler div.scale-down-policy div.slide-label { - color: #A5A3A7; - font-size: 14px; + width: 12px; margin-bottom: 3px; margin-left: 755px; - width: 12px; + font-size: 14px; + color: #a5a3a7; } div.ui-dialog div.autoscaler div.scale-up-policy div.hide { - background: #FFFFFF url("../images/minus.png") no-repeat 38% 59%; - border: 1px solid #D0D0D0; - border-radius: 9px 9px 9px 9px; - cursor: pointer; float: right; + width: 14px; height: 15px; margin: -20px 45px 0 11px; - width: 14px; + border: 1px solid #d0d0d0; + border-radius: 9px 9px 9px 9px; + background: #ffffff url("../images/minus.png") no-repeat 38% 59%; + cursor: pointer; } div.ui-dialog div.autoscaler div.scale-down-policy div.hide { - background: #FFFFFF url("../images/minus.png") no-repeat 31% 54%; - border: 1px solid #D0D0D0; - border-radius: 9px 9px 9px 9px; - cursor: pointer; float: right; + width: 14px; height: 15px; margin: -20px 45px 0 11px; - width: 14px; + border: 1px solid #d0d0d0; + border-radius: 9px 9px 9px 9px; + background: #ffffff url("../images/minus.png") no-repeat 31% 54%; + cursor: pointer; } div.ui-dialog div.autoscaler div.scale-up-policy div.expand { - background: #FFFFFF url("../images/sprites.png") repeat -541px -499px; - border: 1px solid #D0D0D0; - border-radius: 9px 9px 9px 9px; - cursor: pointer; float: right; + width: 14px; height: 15px; margin: -20px 45px 0 11px; - width: 14px; + border: 1px solid #d0d0d0; + border-radius: 9px 9px 9px 9px; + background: #ffffff url("../images/sprites.png") repeat -541px -499px; + cursor: pointer; } div.ui-dialog div.autoscaler div.scale-down-policy div.expand { - background: #FFFFFF url("../images/sprites.png") repeat -541px -499px; - border: 1px solid #D0D0D0; - border-radius: 9px 9px 9px 9px; - cursor: pointer; float: right; + width: 14px; height: 15px; margin: -20px 45px 0 11px; - width: 14px; + border: 1px solid #d0d0d0; + border-radius: 9px 9px 9px 9px; + background: #ffffff url("../images/sprites.png") repeat -541px -499px; + cursor: pointer; } div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-item div.name label { @@ -11615,25 +11528,25 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it /*List state BG colors*/ .list-view .body td.item-state-on { - background: #C0FFC0; - border-bottom: 1px solid #09BC09; + border-bottom: 1px solid #09bc09; + background: #c0ffc0; } .list-view .body td.item-state-off { - background: #FFD8CF; - border-bottom: 1px solid #FF9F9F; + border-bottom: 1px solid #ff9f9f; + background: #ffd8cf; } .list-view .body tr.selected td.item-state-on, .list-view .body tr.selected td.item-state-off { - background-color: inherit; border-color: inherit; + background-color: inherit; } /*Autoscaler*/ .ui-dialog div.autoscaler { - overflow: auto; max-height: 600px; + overflow: auto; } div.container div.panel div#details-tab-network.detail-group div div.multi-edit table.multi-edit tbody tr td, @@ -11648,69 +11561,69 @@ div.container div.panel div#details-tab-network.detail-group div div.multi-edit } .ui-dialog div.autoscaler .detail-actions .buttons .action { + float: left; width: 32px; - float: left; } -.ui-dialog div.autoscaler div.form-container div.form-item[rel=securityGroups] { +.ui-dialog div.autoscaler div.form-container div.form-item[rel='securityGroups'] { display: block; - width: 370px; float: left; + width: 370px; } -.ui-dialog div.autoscaler div.form-container div.form-item[rel=diskOfferingId] { +.ui-dialog div.autoscaler div.form-container div.form-item[rel='diskOfferingId'] { display: inline-block; - width: 370px; - float: left; position: relative; + float: left; + width: 370px; margin-top: 1px; } -.ui-dialog div.autoscaler div.form-container div.form-item[rel=minInstance] { +.ui-dialog div.autoscaler div.form-container div.form-item[rel='minInstance'] { display: block; - width: 50%; float: left; + width: 50%; } -.ui-dialog div.autoscaler div.form-container div.form-item[rel=maxInstance] { +.ui-dialog div.autoscaler div.form-container div.form-item[rel='maxInstance'] { display: inline-block; - width: 50%; + position: relative; float: left; left: -30px; - position: relative; + width: 50%; } -.ui-dialog div.autoscaler div.form-container div.form-item[rel=interval] { +.ui-dialog div.autoscaler div.form-container div.form-item[rel='interval'] { display: block; - width: 50%; float: left; + width: 50%; } -.ui-dialog div.autoscaler div.form-container div.form-item[rel=quietTime] { +.ui-dialog div.autoscaler div.form-container div.form-item[rel='quietTime'] { display: inline-block; - width: 50%; + position: relative; float: left; left: -15px; - position: relative; + width: 50%; } -.ui-dialog div.autoscaler div.form-container div.form-item[rel=snmpCommunity] { +.ui-dialog div.autoscaler div.form-container div.form-item[rel='snmpCommunity'] { display: block; - width: 50%; float: left; + width: 50%; } -.ui-dialog div.autoscaler div.form-container div.form-item[rel=snmpPort] { +.ui-dialog div.autoscaler div.form-container div.form-item[rel='snmpPort'] { display: inline-block; - width: 50%; + position: relative; float: left; left: -15px; - position: relative; + width: 50%; } .ui-dialog div.autoscaler div.form-container div.value select { - width: 88%; float: left; + width: 88%; } div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container { @@ -11722,73 +11635,73 @@ div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container { } div.ui-dialog div.autoscaler div.scale-up-policy div.multi-edit { - margin-top: 0px; + margin-top: 0; } div.ui-dialog div.autoscaler div.scale-down-policy div.multi-edit { - margin-top: 0px; + margin-top: 0; } div.ui-dialog div.autoscaler div.scale-up-policy-title { - color: #0055BB; - margin-left: -650px; margin-top: 40px; + margin-left: -650px; + color: #0055bb; } div.ui-dialog div.autoscaler div.scale-up-policy-title label { - font-size: 13px; - margin-left: 200px; margin-right: 10px; + margin-left: 200px; + font-size: 13px; } div.ui-dialog div.autoscaler div.scale-up-policy-title hr.policy-divider { - border-left: 1px none #38546D; - border-right: 1px none #16222C; - border-top: 1px none #38546D; margin-bottom: 12px; + border-top: 1px none #38546d; + border-right: 1px none #16222c; + border-left: 1px none #38546d; } div.ui-dialog div.autoscaler div.scale-down-policy-title hr.policy-divider { - border-left: 1px none #38546D; - border-right: 1px none #16222C; - border-top: 1px none #38546D; margin-bottom: 12px; + border-top: 1px none #38546d; + border-right: 1px none #16222c; + border-left: 1px none #38546d; } div.ui-dialog div.autoscaler div.field-group.bottom-fields hr.policy-divider { - border-left: 1px none #38546D; - border-right: 1px none #16222C; - border-top: 1px none #38546D; margin-top: 15px; margin-bottom: -1px; + border-top: 1px none #38546d; + border-right: 1px none #16222c; + border-left: 1px none #38546d; } div.ui-dialog div.autoscaler div.scale-down-policy-title label { - font-size: 13px; - margin-left: 170px; margin-right: 10px; + margin-left: 170px; + font-size: 13px; } div.ui-dialog div.autoscaler div.scale-down-policy-title { - color: #0055BB; - margin-left: -620px; margin-top: 10px; + margin-left: -620px; + color: #0055bb; } -div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container div.form-item div.value input[type=text] { - margin-left: 195px; +div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container div.form-item div.value input[type='text'] { width: 30%; margin-top: 1px; + margin-left: 195px; } div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container div.form-item div.name { margin-left: 390px; } -div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container div.form-item div.value input[type=text] { - margin-left: 670px; +div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container div.form-item div.value input[type='text'] { width: 30%; margin-top: -16px; + margin-left: 670px; } div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container div.form-item div.name { @@ -11796,97 +11709,96 @@ div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container div. } div.ui-dialog div.autoscaler div.scale-up-policy div.multi-edit div.data div.data-body div.data-item { - margin-bottom: 0px; margin-right: 22px; + margin-bottom: 0; } div.ui-dialog div.autoscaler div.scale-down-policy div.multi-edit div.data div.data-body div.data-item { - margin-bottom: 0px; margin-right: 22px; + margin-bottom: 0; } div.ui-dialog div.autoscaler div.scale-up-policy div.slide-label { - color: #A5A3A7; - font-size: 14px; + width: 12px; margin-bottom: 3px; margin-left: 755px; - width: 12px; + font-size: 14px; + color: #a5a3a7; } div.ui-dialog div.autoscaler div.scale-down-policy div.slide-label { - color: #A5A3A7; - font-size: 14px; + width: 12px; margin-bottom: 3px; margin-left: 755px; - width: 12px; + font-size: 14px; + color: #a5a3a7; } div.ui-dialog div.autoscaler div.scale-up-policy div.hide { - background: #FFFFFF url("../images/minus.png") no-repeat 38% 59%; - border: 1px solid #D0D0D0; - border-radius: 9px 9px 9px 9px; - cursor: pointer; float: right; + width: 14px; height: 15px; margin: -20px 45px 0 11px; - width: 14px; + border: 1px solid #d0d0d0; + border-radius: 9px 9px 9px 9px; + background: #ffffff url("../images/minus.png") no-repeat 38% 59%; + cursor: pointer; } div.ui-dialog div.autoscaler div.scale-down-policy div.hide { - background: #FFFFFF url("../images/minus.png") no-repeat 31% 54%; - border: 1px solid #D0D0D0; - border-radius: 9px 9px 9px 9px; - cursor: pointer; float: right; + width: 14px; height: 15px; margin: -20px 45px 0 11px; - width: 14px; + border: 1px solid #d0d0d0; + border-radius: 9px 9px 9px 9px; + background: #ffffff url("../images/minus.png") no-repeat 31% 54%; + cursor: pointer; } div.ui-dialog div.autoscaler div.scale-up-policy div.expand { - background: #FFFFFF url("../images/sprites.png") repeat -541px -499px; - border: 1px solid #D0D0D0; - border-radius: 9px 9px 9px 9px; - cursor: pointer; float: right; + width: 14px; height: 15px; margin: -20px 45px 0 11px; - width: 14px; + border: 1px solid #d0d0d0; + border-radius: 9px 9px 9px 9px; + background: #ffffff url("../images/sprites.png") repeat -541px -499px; + cursor: pointer; } div.ui-dialog div.autoscaler div.scale-down-policy div.expand { - background: #FFFFFF url("../images/sprites.png") repeat -541px -499px; - border: 1px solid #D0D0D0; - border-radius: 9px 9px 9px 9px; - cursor: pointer; float: right; + width: 14px; height: 15px; margin: -20px 45px 0 11px; - width: 14px; + border: 1px solid #d0d0d0; + border-radius: 9px 9px 9px 9px; + background: #ffffff url("../images/sprites.png") repeat -541px -499px; + cursor: pointer; } div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-item div.name label { font-size: 11px; } -/*UI datepicker*/ .ui-datepicker { - background: #FFFFFF 0px -2470px; + display: none; width: 300px; height: auto; - overflow: hidden; padding: 4px 0 0; + border-radius: 4px; /*+border-radius:4px;*/ + box-shadow: 0 3px 8px #000000; + background: #ffffff 0 -2470px; + overflow: hidden; -moz-border-radius: 4px; + /*+box-shadow:0px 3px 8px #000000;*/ -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - /*+box-shadow:0px 3px 8px #000000;*/ - -moz-box-shadow: 0px 3px 8px #000000; - -webkit-box-shadow: 0px 3px 8px #000000; - -o-box-shadow: 0px 3px 8px #000000; - box-shadow: 0px 3px 8px #000000; - display: none; + -moz-box-shadow: 0 3px 8px #000000; + -webkit-box-shadow: 0 3px 8px #000000; + -o-box-shadow: 0 3px 8px #000000; } .ui-datepicker .ui-datepicker-title { @@ -11896,37 +11808,37 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { - font-size: 13px; - color: #FFFFFF; - /*+box-shadow:0px 1px 5px #444444;*/ - -moz-box-shadow: 0px 1px 5px #444444; - -webkit-box-shadow: 0px 1px 5px #444444; - -o-box-shadow: 0px 1px 5px #444444; - box-shadow: 0px 1px 5px #444444; - /*+text-shadow:0px -1px 1px #050505;*/ - -moz-text-shadow: 0px -1px 1px #050505; - -webkit-text-shadow: 0px -1px 1px #050505; - -o-text-shadow: 0px -1px 1px #050505; - text-shadow: 0px -1px 1px #050505; - padding: 6px; margin: 6px 13px 6px 14px; + padding: 6px; + /*+box-shadow:0px 1px 5px #444444;*/ + border-radius: 4px; + box-shadow: 0 1px 5px #444444; + background: url("../images/bg-gradients.png") 0 -182px; + font-size: 13px; + /*+text-shadow:0px -1px 1px #050505;*/ font-size: 12px; - background: url(../images/bg-gradients.png) 0px -182px; + color: #ffffff; + text-shadow: 0 -1px 1px #050505; cursor: pointer; + -moz-box-shadow: 0 1px 5px #444444; + -webkit-box-shadow: 0 1px 5px #444444; + -o-box-shadow: 0 1px 5px #444444; + -moz-text-shadow: 0 -1px 1px #050505; + -webkit-text-shadow: 0 -1px 1px #050505; /*+border-radius:4px;*/ + -o-text-shadow: 0 -1px 1px #050505; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; } .ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover { /*+box-shadow:inset 0px 0px 10px #000000;*/ - -moz-box-shadow: inset 0px 0px 10px #000000; - -webkit-box-shadow: inset 0px 0px 10px #000000; - -o-box-shadow: inset 0px 0px 10px #000000; - box-shadow: inset 0px 0px 10px #000000; + box-shadow: inset 0 0 10px #000000; + -moz-box-shadow: inset 0 0 10px #000000; + -webkit-box-shadow: inset 0 0 10px #000000; + -o-box-shadow: inset 0 0 10px #000000; } .ui-datepicker .ui-datepicker-prev { @@ -11940,18 +11852,18 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it .ui-datepicker .ui-datepicker-title .ui-datepicker-month { width: 85px; font-size: 16px; - color: #2C363F; + color: #2c363f; } .ui-datepicker .ui-datepicker-title { - text-align: center; + position: relative; + top: 6px; + left: 0; width: 188px; + /*+placement:shift 0px 6px;*/ height: 19px; padding: 3px 0 0; - /*+placement:shift 0px 6px;*/ - position: relative; - left: 0px; - top: 6px; + text-align: center; } .ui-datepicker table { @@ -11962,10 +11874,10 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it .ui-datepicker table th, .ui-datepicker table td { min-width: 24px; - text-align: center; - border: 1px solid #B9B6B6; - text-indent: 0px; padding: 7px 0; + border: 1px solid #b9b6b6; + text-align: center; + text-indent: 0; /*[empty]+placement:;*/ } @@ -11975,91 +11887,90 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it .ui-datepicker table td.ui-state-disabled, .ui-datepicker table td.ui-state-disabled:hover { - background-color: #DCDCDC; + box-shadow: none; /*+box-shadow:none;*/ + background-color: #dcdcdc; + cursor: default; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; - box-shadow: none; - cursor: default; } .ui-datepicker table td a { - text-decoration: none; - color: #485867; font-size: 12px; + color: #485867; + text-decoration: none; } .ui-datepicker table td:hover { - background-color: #6A839A; + box-shadow: inset 0 0 4px #6b6b6b; /*+box-shadow:inset 0px 0px 4px #6B6B6B;*/ - -moz-box-shadow: inset 0px 0px 4px #6B6B6B; - -webkit-box-shadow: inset 0px 0px 4px #6B6B6B; - -o-box-shadow: inset 0px 0px 4px #6B6B6B; - box-shadow: inset 0px 0px 4px #6B6B6B; + background-color: #6a839a; + -moz-box-shadow: inset 0 0 4px #6b6b6b; + -webkit-box-shadow: inset 0 0 4px #6b6b6b; + -o-box-shadow: inset 0 0 4px #6b6b6b; } .ui-datepicker table td:hover a { - color: #FFFFFF; - text-shadow: 0px -1px #000000; + color: #ffffff; + text-shadow: 0 -1px #000000; } -/*Plugins listing*/ .plugins-listing ul { width: 100%; } .plugins-listing ul li { /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - /*+box-shadow:0px 2px 6px #D3D3D3;*/ - -moz-box-shadow: 0px 2px 6px #D3D3D3; - -webkit-box-shadow: 0px 2px 6px #D3D3D3; - -o-box-shadow: 0px 2px 6px #D3D3D3; - box-shadow: 0px 2px 6px #D3D3D3; - border: 1px solid #A8A3A3; - background: url(../images/bg-gradients.png) 0px -29px; width: 98%; height: 66px; margin: 9px auto 12px; + border: 1px solid #a8a3a3; + /*+box-shadow:0px 2px 6px #D3D3D3;*/ + border-radius: 4px; + box-shadow: 0 2px 6px #d3d3d3; + background: url("../images/bg-gradients.png") 0 -29px; cursor: pointer; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + -moz-box-shadow: 0 2px 6px #d3d3d3; + -webkit-box-shadow: 0 2px 6px #d3d3d3; + -o-box-shadow: 0 2px 6px #d3d3d3; } .plugins-listing ul li:hover { /*+box-shadow:inset 0px 2px 4px #B9B9B9;*/ - -moz-box-shadow: inset 0px 2px 4px #B9B9B9; - -webkit-box-shadow: inset 0px 2px 4px #B9B9B9; - -o-box-shadow: inset 0px 2px 4px #B9B9B9; - box-shadow: inset 0px 2px 4px #B9B9B9; + box-shadow: inset 0 2px 4px #b9b9b9; + -moz-box-shadow: inset 0 2px 4px #b9b9b9; + -webkit-box-shadow: inset 0 2px 4px #b9b9b9; + -o-box-shadow: inset 0 2px 4px #b9b9b9; } .plugins-listing ul li .title { display: block; float: left; width: 90%; - font-weight: bold; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - color: #4A5A6A; margin: 13px 0 7px; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + font-weight: bold; + color: #4a5a6a; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; } .plugins-listing ul li .desc { - color: #524E4E; font-size: 13px; + color: #524e4e; } .plugins-listing ul li .icon { display: block; + float: left; width: 50px; height: 50px; - float: left; margin: 8px 13px 13px 11px; } @@ -12068,53 +11979,52 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it height: 100%; } -/*Regions*/ .region-switcher { display: inline-block; position: relative; /*+border-radius:4px;*/ + position: relative; + float: left; + top: 1px; + left: 27px; + height: 28px; + margin: 5px 13px 0 0; + border-radius: 4px; + cursor: pointer; + /*+placement:shift 27px 1px;*/ -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - height: 28px; - float: left; - margin: 5px 13px 0 0; - cursor: pointer; - /*+placement:shift 27px 1px;*/ - position: relative; - left: 27px; - top: 1px; } .region-selector { /*+border-radius:4px;*/ + position: relative; + position: absolute; + z-index: 5500; + top: 49px; + left: 185px; + width: 318px; + height: 372px; + /*+placement:shift 185px 49px;*/ + border-radius: 4px; + background: url("../images/bg-notifications.png") center; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - width: 318px; - background: url(../images/bg-notifications.png) center; - height: 372px; - /*+placement:shift 185px 49px;*/ - position: relative; - left: 185px; - top: 49px; - position: absolute; - z-index: 5500; } .region-selector h2 { - color: #FFFFFF; - text-align: center; + margin: 31px 0 14px; font-size: 21px; letter-spacing: 1px; + color: #ffffff; /*+text-shadow:0px 1px 2px #000000;*/ - -moz-text-shadow: 0px 1px 2px #000000; - -webkit-text-shadow: 0px 1px 2px #000000; - -o-text-shadow: 0px 1px 2px #000000; - text-shadow: 0px 1px 2px #000000; - margin: 31px 0 14px; + text-align: center; + text-shadow: 0 1px 2px #000000; + -moz-text-shadow: 0 1px 2px #000000; + -webkit-text-shadow: 0 1px 2px #000000; + -o-text-shadow: 0 1px 2px #000000; } .region-selector .buttons { @@ -12124,115 +12034,115 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it } .region-selector .buttons .button.close { - background: url(../images/gradients.png) 0px -317px; float: right; margin-right: 10px; + padding: 8px; border-bottom: 1px solid #232323; /*+border-radius:4px;*/ + border-radius: 4px; + background: url("../images/gradients.png") 0 -317px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - padding: 8px; } .region-selector .buttons .button.close:hover { /*+box-shadow:inset 0px 2px 4px #525252;*/ - -moz-box-shadow: inset 0px 2px 4px #525252; - -webkit-box-shadow: inset 0px 2px 4px #525252; - -o-box-shadow: inset 0px 2px 4px #525252; - box-shadow: inset 0px 2px 4px #525252; + box-shadow: inset 0 2px 4px #525252; + -moz-box-shadow: inset 0 2px 4px #525252; + -webkit-box-shadow: inset 0 2px 4px #525252; + -o-box-shadow: inset 0 2px 4px #525252; } .region-selector .buttons .button.close span { - color: #FFFFFF; font-weight: bold; letter-spacing: 1px; + color: #ffffff; /*+text-shadow:0px 1px 2px #000000;*/ - -moz-text-shadow: 0px 1px 2px #000000; - -webkit-text-shadow: 0px 1px 2px #000000; - -o-text-shadow: 0px 1px 2px #000000; - text-shadow: 0px 1px 2px #000000; + text-shadow: 0 1px 2px #000000; + -moz-text-shadow: 0 1px 2px #000000; + -webkit-text-shadow: 0 1px 2px #000000; + -o-text-shadow: 0 1px 2px #000000; } .region-selector ul { - background: #FFFFFF; width: 94%; + height: 237px; /*+border-radius:4px;*/ + margin: auto; + border: 1px solid #b7b7b7; + border-radius: 4px; + box-shadow: inset 0 0 8px #a3a3a3; + background: #ffffff; + overflow: auto; -moz-border-radius: 4px; -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - height: 237px; - border: 1px solid #B7B7B7; - overflow: auto; - margin: auto; /*+box-shadow:inset 0px 0px 8px #A3A3A3;*/ - -moz-box-shadow: inset 0px 0px 8px #A3A3A3; - -webkit-box-shadow: inset 0px 0px 8px #A3A3A3; - -o-box-shadow: inset 0px 0px 8px #A3A3A3; - box-shadow: inset 0px 0px 8px #A3A3A3; + -khtml-border-radius: 4px; + -moz-box-shadow: inset 0 0 8px #a3a3a3; + -webkit-box-shadow: inset 0 0 8px #a3a3a3; + -o-box-shadow: inset 0 0 8px #a3a3a3; } .region-selector ul li { - background: none; - color: #415C72; - font-size: 13px; + width: 100%; + padding: 15px 0; + border-bottom: 1px solid #cacaca; /*+text-shadow:none;*/ + background: none; + font-size: 13px; + color: #415c72; + text-indent: 14px; + text-shadow: none; + cursor: pointer; -moz-text-shadow: none; -webkit-text-shadow: none; -o-text-shadow: none; - text-shadow: none; - text-indent: 14px; - cursor: pointer; - border-bottom: 1px solid #CACACA; - width: 100%; - padding: 15px 0; } .region-selector ul li:hover, .region-selector ul li.active { - background: #E9E9E9 url(../images/bg-gradients.png) repeat-x 0px -31px; + background: #e9e9e9 url("../images/bg-gradients.png") repeat-x 0 -31px; /*+text-shadow:0px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px #FFFFFF; - -o-text-shadow: 0px 1px #FFFFFF; - text-shadow: 0px 1px #FFFFFF; + text-shadow: 0 1px #ffffff; + -moz-text-shadow: 0 1px #ffffff; + -webkit-text-shadow: 0 1px #ffffff; + -o-text-shadow: 0 1px #ffffff; } .region-switcher .icon { display: inline-block; - float: left; display: block; + position: absolute; + float: left; width: 26px; height: 26px; - background: url(../images/sprites.png) -15px -1313px; - position: absolute; + background: url("../images/sprites.png") -15px -1313px; } .region-switcher .title { display: inline-block; + position: relative; float: right; + top: 0; + left: -1px; + max-width: 285px; padding: 9px 9px 0 34px; - color: #FFFFFF; font-size: 13px; font-weight: 100; - max-width: 285px; - overflow: hidden; - white-space: nowrap; /*+placement:shift -1px 0px;*/ - position: relative; - left: -1px; - top: 0px; + white-space: nowrap; + color: #ffffff; + overflow: hidden; } .region-switcher:hover, .region-switcher.active { /*+box-shadow:inset 0px 1px 5px #000000;*/ - -moz-box-shadow: inset 0px 1px 5px #000000; - -webkit-box-shadow: inset 0px 1px 5px #000000; - -o-box-shadow: inset 0px 1px 5px #000000; - box-shadow: inset 0px 1px 5px #000000; + box-shadow: inset 0 1px 5px #000000; + -moz-box-shadow: inset 0 1px 5px #000000; + -webkit-box-shadow: inset 0 1px 5px #000000; + -o-box-shadow: inset 0 1px 5px #000000; } .region-switcher:hover .icon, @@ -12240,26 +12150,25 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it background-position: -70px -1311px; } -/*CA Cert*/ .cacert-download { display: inline-block; position: relative; - height: 30px; - float: right; - cursor: pointer; position: absolute; - left: 1175px; + float: right; top: 20px; + left: 1175px; + height: 30px; + cursor: pointer; } .cacert-download .icon { display: inline-block; - float: left; display: block; + position: absolute; + float: left; width: 32px; height: 30px; - background: url(../images/sprites.png) -142px -348px; - position: absolute; + background: url("../images/sprites.png") -142px -348px; } .cacert-download:hover .icon, @@ -12267,7 +12176,6 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it background-position: -368px -348px; } -/*Action icons*/ .action.edit .icon { background-position: 1px -1px; } @@ -12297,23 +12205,23 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it .stop .icon, .removeVmwareDc .icon, .release .icon { - background-position: 0px -31px; + background-position: 0 -31px; } .stop:hover .icon, .removeVmwareDc:hover .icon, .release:hover .icon { - background-position: 0px -613px; + background-position: 0 -613px; } .restart .icon, .releaseDedicatedZone .icon { - background-position: 0px -63px; + background-position: 0 -63px; } .restart:hover .icon, .releaseDedicatedZone:hover .icon { - background-position: 0px -645px; + background-position: 0 -645px; } .destroy .icon, @@ -12336,22 +12244,22 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it .migrate .icon, .migrateToAnotherStorage .icon { - background-position: 0px -125px; + background-position: 0 -125px; } .migrate:hover .icon, .migrateToAnotherStorage:hover .icon { - background-position: 0px -707px; + background-position: 0 -707px; } .migrate .icon, .migrateVolume .icon { - background-position: 0px -125px; + background-position: 0 -125px; } .migrate:hover .icon, .migrateVolume:hover .icon { - background-position: 0px -707px; + background-position: 0 -707px; } .viewMetrics .icon { @@ -12363,11 +12271,11 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it } .refreshMetrics .icon { - background-position: 0px -62px; + background-position: 0 -62px; } .refreshMetrics:hover .icon { - background-position: 0px -62px; + background-position: 0 -62px; } .attach .icon, @@ -12825,18 +12733,18 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it } .moveDrag .icon { - cursor: move; + border-radius: 10px; /*+border-radius:10px;*/ + border-radius: 10px 10px 10px 10px; + background-position: -82px -162px; + cursor: move; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; - border-radius: 10px; - border-radius: 10px 10px 10px 10px; - background-position: -82px -162px; } .moveDrag:hover .icon { - background-color: #FFFFFF; + background-color: #ffffff; cursor: move !important; } @@ -12894,14 +12802,9 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it background-position: -197px -647px; } -.label-hovered { - cursor: pointer; - color: #0000FF !important; -} - .accounts-wizard table { - margin: 0; width: 100%; + margin: 0; table-layout: fixed; } @@ -12911,15 +12814,15 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it } .accounts-wizard td:last-child { - border: none; + border: 0; } .accounts-wizard tbody tr:nth-child(even) { - background: #DFE1E3; + background: #dfe1e3; } .accounts-wizard tbody tr:nth-child(odd) { - background: #F2F0F0; + background: #f2f0f0; } .accounts-wizard .content { @@ -12933,18 +12836,18 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it .accounts-wizard .content td.select, .accounts-wizard .content th.select { - background: none; - border-right: 1px solid #BFBFBF; width: 60px !important; min-width: 60px !important; max-width: 60px !important; + border-right: 1px solid #bfbfbf; + background: none; } .accounts-wizard .content .select input { - padding: 0; width: auto; height: auto; margin: 18px 0 0 24px; + padding: 0; } .accounts-wizard .content:last-child { @@ -12961,18 +12864,18 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it width: 320px; font-size: 13px; color: #485867; - text-shadow: 0px 2px 1px #FFFFFF; + text-shadow: 0 2px 1px #ffffff; } .ldap-account-choice { - border: none !important; + border: 0; border-radius: 0 0 0 0 !important; } .manual-account-details .name { - margin-top: 2px; - width: 100px; float: left; + width: 100px; + margin-top: 2px; padding-bottom: 10px; } @@ -12992,20 +12895,20 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it } .manual-account-details .form-item:after { - content: "."; + visibility: hidden; + content: '.'; display: block; clear: both; - visibility: hidden; - line-height: 0; height: 0; + line-height: 0; } .manual-account-details .form-item { - padding: 5px; + box-sizing: border-box; width: 100%; + padding: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; - box-sizing: border-box; } .manual-account-details select, @@ -13014,32 +12917,31 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it } .manual-account-details input { - background: #F6F6F6; + border: 1px solid #afafaf; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: #f6f6f6; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - border: 1px solid #AFAFAF; } .manual-account-details > *:nth-child(even) { - background: #DFE1E3; + background: #dfe1e3; } .manual-account-details > *:nth-child(odd) { - background: #F2F0F0; + background: #f2f0f0; } .manual-account-details .value { display: inline-block; } -/*GPU*/ div.gpugroups div.list-view div.fixed-header { position: relative; + top: 0 !important; left: 12px !important; - top: 0px !important; } div.gpugroups div.list-view div.fixed-header table { @@ -13054,79 +12956,52 @@ div.gpugroups div.list-view { position: relative; height: auto !important; margin-top: 0 !important; - border: none !important; + border: 0; } .gpugroups { float: left; - height: 100%; width: 100%; + height: 100%; overflow-x: hidden; overflow-y: auto; } .gpugroups .gpugroup-container { - border: 1px solid #C8C2C2; - border-radius: 3px; - height: auto !important; - margin: 12px; - padding: 0; position: relative; float: left; width: auto; + height: auto !important; + margin: 12px; + padding: 0; + border: 1px solid #c8c2c2; + border-radius: 3px; } .gpugroups .gpugroup-container .title { + padding: 12px 12px 5px; font-size: 13px; font-weight: 100; - padding: 12px 12px 5px; } .ui-dialog .ui-button.add { - background: transparent linear-gradient(to bottom, #f7f7f7 1%, #eaeaea 100%) repeat 0px 0px; - font-size: 12px; - height: 12px; width: auto; - margin: 0px 0px 12px; + height: 12px; + margin: 0 0 12px; padding: 5px 7px 5px 6px; + background: transparent -webkit-linear-gradient(top, #f7f7f7 1%, #eaeaea 100%) repeat 0 0; + background: transparent linear-gradient(to bottom, #f7f7f7 1%, #eaeaea 100%) repeat 0 0; + font-size: 12px; } .ui-dialog .ui-button.add:hover { - background: #E5E5E5 repeat 0px 0px; - box-shadow: inset 0px 0px 5px #C3C3C3; + box-shadow: inset 0 0 5px #c3c3c3; + background: #e5e5e5 repeat 0 0; } .ui-dialog .ui-button.add span { - background: transparent url("../images/icons.png") no-repeat -626px -209px; padding: 0 0 3px 18px; -} - -ul.ui-autocomplete.ui-menu { - width: 250px; - background: #ddd; - font-size: 13px; - padding: 5px; - max-height: 400px; - overflow-x: hidden; - overflow-y: auto; -} - -.multi-edit-add-list .ui-button.migrateok, -.multi-edit-add-list .ui-button.migratecancel { - top: -5px !important; -} - -.migrate-vm-available-host-list div.text-search { - right: 30px; -} - -.migrate-vm-available-host-list div.ui-widget-content { - display: block !important; -} - -.list-view-select table th.availableHostSuitability, -.list-view-select table td.availableHostSuitability { - max-width: 250px; + background: transparent url("../images/icons.png") no-repeat -626px -209px; } .copy-template-destination-list div.text-search { @@ -13159,60 +13034,60 @@ div.panel.copy-template-destination-list div.list-view div.fixed-header { div.button.export { position: relative; - left: 0px; + float: right; top: 5px; + left: 0; + height: 12px; + margin: 0 10px 0 0; + padding: 5px 5px 5px 5px; + border: 1px solid #b7b7b7; + border-radius: 4px 4px 4px 4px; + background: -webkit-linear-gradient(top, #f7f7f7 1%, #eaeaea 100%); + background: linear-gradient(to bottom, #f7f7f7 1%, #eaeaea 100%); font-size: 12px; font-weight: 100; color: #000000; - margin: 0 10px 0 0; + text-shadow: 0 1px 1px #dee5ea; cursor: pointer; - text-shadow: 0px 1px 1px #DEE5EA; - padding: 5px 5px 5px 5px; - background: linear-gradient(to bottom, #f7f7f7 1%, #eaeaea 100%); - border: 1px solid #B7B7B7; - float: right; - border-radius: 4px 4px 4px 4px; - height: 12px; } div.button.export a { - padding: 0px 0 3px 20px; - background: url(../images/exportCsvIcon.png) no-repeat; position: relative; - left: 0px; - top: 0px; + top: 0; + left: 0; + padding: 0 0 3px 20px; + background: url("../images/exportCsvIcon.png") no-repeat; background-size: 15.5px; + color: #000000; text-decoration: none; - color: black; } -/*jQuery UI specific stylings*/ .ui-widget { font-family: inherit; } .ui-widget-content, .ui-widget.ui-widget-content { - border: none; + border: 0; background: inherit; } .ui-dialog.ui-widget-content { - background: #FFFFFF; + background: #ffffff; } .ui-tabs .ui-tabs-nav { - margin-top: 42px; display: block; + position: relative; + z-index: 2; + float: left; width: 100%; height: 41px; - float: left; - border: none; - overflow: hidden; - z-index: 2; - position: relative; - background-color: inherit; + margin-top: 42px; padding: 0; + border: 0; + background-color: inherit; + overflow: hidden; } .ui-tabs .ui-tabs-nav.ui-corner-all { @@ -13224,23 +13099,23 @@ div.button.export a { } .ui-tabs .ui-tab .ui-tabs-anchor { - float: left; - padding: 15px 10px; - min-width: 91px; - text-align: center; - font-size: 11px; - color: #4E6070; - text-decoration: none; position: relative; + float: left; + min-width: 91px; + padding: 15px 10px; + font-size: 11px; + color: #4e6070; + text-align: center; + text-decoration: none; } .ui-tabs .ui-tab.ui-state-default { - border: 1px solid #D9D9D9; - background: #F0F0F0; + border: 1px solid #d9d9d9; + background: #f0f0f0; } .ui-tabs .ui-tab.ui-state-active { - background: #FFFFFF; + background: #ffffff; } .ui-tabs .ui-tab.ui-state-hover a { @@ -13249,4 +13124,137 @@ div.button.export a { cursor: pointer; } +ul.ui-autocomplete.ui-menu { + width: 250px; + max-height: 400px; + padding: 5px; + background: #dddddd; + font-size: 13px; + overflow-x: hidden; + overflow-y: auto; +} + +ul.token-input-list-facebook { + z-index: 2147483647; + clear: left; + width: 233px; + height: auto !important; + height: 1%; + min-height: 1px; + margin: 0; + padding: 0; + border: 1px solid #afafaf; + background-color: #f6f6f6; + font-family: Verdana; + font-size: 12px; + list-style-type: none; + cursor: text; + overflow: hidden; +} + +ul.token-input-list-facebook li input { + width: 100px; + margin: 2px 0; + padding: 3px 8px; + border: 0; + background-color: #ffffff; + -webkit-appearance: caret; +} + +li.token-input-token-facebook { + float: left; + height: auto !important; + height: 15px; + margin: 3px; + padding: 1px 3px; + border: 1px solid #ccd5e4; + border-radius: 5px; + background-color: #eff2f7; + font-size: 11px; + white-space: nowrap; + color: #000000; + cursor: default; + overflow: hidden; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; +} + +li.token-input-token-facebook p { + display: inline; + margin: 0; + padding: 0; +} + +li.token-input-token-facebook span { + margin-left: 5px; + font-weight: bold; + color: #a6b3cf; + cursor: pointer; +} + +li.token-input-selected-token-facebook { + border: 1px solid #3b5998; + background-color: #5670a6; + color: #ffffff; +} + +li.token-input-input-token-facebook { + float: left; + margin: 0; + padding: 0; + list-style-type: none; +} + +div.token-input-dropdown-facebook { + position: absolute; + z-index: 2147483647; + width: 233px; + border-right: 1px solid #cccccc; + border-bottom: 1px solid #cccccc; + border-left: 1px solid #cccccc; + background-color: #ffffff; + font-family: Verdana; + font-size: 11px; + cursor: default; + overflow: hidden; +} + +div.token-input-dropdown-facebook p { + width: 233px; + margin: 0; + padding: 5px; + font-weight: bold; + color: #777777; +} + +div.token-input-dropdown-facebook ul { + margin: 0; + padding: 0; +} + +div.token-input-dropdown-facebook ul li { + margin: 0; + padding: 3px; + background-color: #ffffff; + list-style-type: none; +} + +div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook { + background-color: #ffffff; +} + +div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook { + background-color: #ffffff; +} + +div.token-input-dropdown-facebook ul li em { + font-weight: bold; + font-style: normal; +} + +div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook { + background-color: #3b5998; + color: #ffffff; +} + /*# sourceMappingURL=src/sourcemaps/cloudstack3.css.map */ diff --git a/ui/css/cloudstack3.hu.css b/ui/css/cloudstack3.hu.css index c1eae3b14e5..6c0a437cd56 100644 --- a/ui/css/cloudstack3.hu.css +++ b/ui/css/cloudstack3.hu.css @@ -1,3 +1,4 @@ +/*[fmt]1C20-1C0D-E*/ /* * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -16,10 +17,6 @@ * specific language governing permissions and limitations * under the License. */ -/* - * correct the breadcrumbs, hungarian translation is longer - * than the english default. - */ #breadcrumbs div.home { width: 100px; } diff --git a/ui/css/cloudstack3.ja_JP.css b/ui/css/cloudstack3.ja_JP.css index 4f2eda1c653..03d234311c5 100644 --- a/ui/css/cloudstack3.ja_JP.css +++ b/ui/css/cloudstack3.ja_JP.css @@ -27,14 +27,14 @@ .dashboard.admin .dashboard-container .stats ul li .percentage { float: left; + margin: 13px 0 0; font-size: 15px; font-weight: bold; - margin: 13px 0 0; /*+text-shadow:0px -2px 1px #FFFFFF;*/ - -moz-text-shadow: 0px -2px 1px #FFFFFF; - -webkit-text-shadow: 0px -2px 1px #FFFFFF; - -o-text-shadow: 0px -2px 1px #FFFFFF; - text-shadow: 0px -2px 1px #FFFFFF; + text-shadow: 0 -2px 1px #ffffff; + -moz-text-shadow: 0 -2px 1px #ffffff; + -webkit-text-shadow: 0 -2px 1px #ffffff; + -o-text-shadow: 0 -2px 1px #ffffff; } .dashboard.admin .dashboard-container .stats ul li .value .content { @@ -70,15 +70,16 @@ table thead th.quick-view { } .multi-wizard .review .select-container .select .name { - white-space: nowrap; font-size: 10px; + white-space: nowrap; } .quick-view-tooltip .detail-view .detail-group.actions .action.text .label { font-size: 8px; } -.detail-view .multi-edit table tr th, .detail-view .multi-edit table tr td { +.detail-view .multi-edit table tr th, +.detail-view .multi-edit table tr td { font-size: 8px; } diff --git a/ui/css/custom.css b/ui/css/custom.css deleted file mode 100644 index 544d2ebbf85..00000000000 --- a/ui/css/custom.css +++ /dev/null @@ -1,23 +0,0 @@ -/* -* 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. -* -* -* Use custom.css to override the default CloudStack styles -*/ - -/*# sourceMappingURL=src/sourcemaps/custom.css.map */ diff --git a/ui/css/src/.jsbeautifyrc b/ui/css/src/.jsbeautifyrc new file mode 100644 index 00000000000..e32858826b7 --- /dev/null +++ b/ui/css/src/.jsbeautifyrc @@ -0,0 +1,31 @@ +// 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. + +{ + // Documentation: https://github.com/einars/js-beautify/ + // All Rules: https://github.com/HookyQR/VSCodeBeautify/blob/master/Settings.md + "css": { + "allowed_file_extensions": ["css", "scss", "sass", "less"], + "end_with_newline": true, + "indent_char": " ", + "indent_size": 2, + "newline_between_rules": true, + "selector_separator": " ", + "selector_separator_newline": true, // Separate selectors with newline or not (e.g. "a,\nbr" or "a, br"), + "space_around_combinator": true // space around > and ~ + } +} diff --git a/ui/css/src/.sass-lint.yml b/ui/css/src/.sass-lint.yml index 6db357b0658..7b0d8d6d0f3 100644 --- a/ui/css/src/.sass-lint.yml +++ b/ui/css/src/.sass-lint.yml @@ -5,9 +5,9 @@ # 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 @@ -26,29 +26,35 @@ options: optOut: true files: - include: 'theme-ewerk/core/css/src/sass/**/*.s+(a|c)ss' + include: '**/*.scss' + ignore: + - node_modules/** + +syntax: + include: + - scss rules: - attribute-quotes: 1 #!todo set this to 2, after autofix with sass-lint-auto-fix + attribute-quotes: 2 bem-depth: - 0 - max-depth: 1 - border-zero: 1 #!todo set this to 2, after autofix with sass-lint-auto-fix + border-zero: 2 brace-style: 1 class-name-format: - - 1 - - convention: hyphenatedbem + - 0 + - convention: hyphenatedlowercase clean-import-paths: - 1 - filename-extension: false leading-underscore: false empty-line-between-blocks: - - 1 #!todo set this to 2, after autofix with sass-lint-auto-fix + - 2 - ignore-single-line-rulesets: true extends-before-declarations: 2 extends-before-mixins: 2 final-newline: - - 1 #!todo set this to 2, after autofix with sass-lint-auto-fix + - 2 - include: true force-attribute-nesting: 0 force-element-nesting: 0 @@ -58,20 +64,20 @@ rules: - allow-leading-underscore: true convention: hyphenatedlowercase hex-length: - - 1 #!todo set this to 2, after autofix with sass-lint-auto-fix + - 2 - style: long hex-notation: - - 1 #!todo set this to 2, after autofix with sass-lint-auto-fix + - 2 - style: lowercase id-name-format: - - 1 + - 0 - convention: hyphenatedlowercase indentation: - - 1 #!todo set this to 2, after autofix with sass-lint-auto-fix + - 1 #!todo set this to 2, when autofix with sass-lint-auto-fix is possible - size: 2 leading-zero: - - 1 #!todo set this to 2, after autofix with sass-lint-auto-fix - - include: false + - 1 #!todo set this to 2, when autofix with sass-lint-auto-fix is possible + - include: true mixin-name-format: - 1 - allow-leading-underscore: true @@ -85,18 +91,18 @@ rules: - 1 - max-depth: 3 no-color-keywords: 1 - no-color-literals: 1 - no-css-comments: 1 + no-color-literals: 0 + no-css-comments: 0 no-debug: 1 - no-duplicate-properties: 1 + no-duplicate-properties: 0 no-empty-rulesets: 1 no-extends: 0 no-ids: 0 no-important: 0 no-invalid-hex: 1 - no-mergeable-selectors: 1 + no-mergeable-selectors: 0 no-misspelled-properties: - - 1 + - 0 - extra-properties: - caret-color no-qualifying-elements: @@ -107,16 +113,16 @@ rules: no-trailing-zero: 1 no-transition-all: 0 no-url-protocols: 1 - # no-vendor-prefixes: bugs - # - 1 - # - ignore-non-standard: true + no-vendor-prefixes: + - 0 + - ignore-non-standard: true no-warn: 1 placeholder-in-extend: 1 placeholder-name-format: - 1 - convention: hyphenatedlowercase property-sort-order: - - 1 #!todo set this to 2, after autofix with sass-lint-auto-fix + - 2 - order: # visibility @@ -379,10 +385,10 @@ rules: - dpi - '%' quotes: - - 1 #!todo set this to 2, after autofix with sass-lint-auto-fix + - 1 #!todo set this to 2, when autofix with sass-lint-auto-fix is possible - style: single shorthand-values: - - 1 + - 0 #!todo set this to 2, when autofix with sass-lint-auto-fix is possible - allowed-shorthands: - 1 - 2 @@ -413,11 +419,7 @@ rules: variable-for-property: - 1 - properties: [ - box-shadow, - border, z-index, - color, - background-color ] variable-name-format: - 1 @@ -434,20 +436,21 @@ resolvers: final-newline: 1 hex-length: 1 hex-notation: 1 - indentation: 1 + leading-zero: 1 #not implemented yet for sass-lint-auto-fix + indentation: 1 #not implemented yet for sass-lint-auto-fix no-color-keywords: 1 no-css-comments: 0 no-important: 0 no-trailing-zero: 1 property-sort-order: 1 + shorthand-values: 1 #not implemented yet for sass-lint-auto-fix space-after-bang: 1 space-after-colon: 1 - #space-after-comma: 1 not implemented yet for sass-lint-auto-fix + space-after-comma: 1 #not implemented yet for sass-lint-auto-fix space-before-bang: 1 space-before-colon: 1 space-between-parens: 1 - #trailing-semicolon: 1 not implemented yet for sass-lint-auto-fix - #space-after-comma: 1 not implemented yet for sass-lint-auto-fix + trailing-semicolon: 1 #not implemented yet for sass-lint-auto-fix url-quotes: 1 - #quotes: 1 not implemented yet for sass-lint-auto-fix + quotes: 1 #not implemented yet for sass-lint-auto-fix zero-unit: 1 \ No newline at end of file diff --git a/ui/css/src/Gulpfile.js b/ui/css/src/Gulpfile.js index f2a8514968d..dd37dd7544e 100644 --- a/ui/css/src/Gulpfile.js +++ b/ui/css/src/Gulpfile.js @@ -1,21 +1,19 @@ -/* -* 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. -*/ +// 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. 'use strict'; @@ -24,13 +22,32 @@ const gulp = require('gulp'); const sass = require('gulp-sass'); const sassLint = require('gulp-sass-lint'); const sourcemaps = require('gulp-sourcemaps'); +const autoprefixer = require('gulp-autoprefixer'); +const shell = require('gulp-shell'); const pathRoot = process.cwd(); const pathCss = pathRoot + '/../'; const pathSass = pathRoot + '/scss/'; const filesSass = pathRoot + '/scss/*.scss'; +const browserVersions = [ + "last 1 versions", + "last 20 firefox versions", + "last 20 chrome versions", + "last 5 opera versions", + "ie >= 9", + "last 5 edge versions", + "safari >= 9", + "last 3 ios versions", + "last 5 android versions", + "last 5 ie_mob versions", + "last 5 and_chr versions" +]; +gulp.task('lintSassFix', + shell.task('npm run fix') +); + const buildSass = (style) => { const buildSass = () => { // function and name is required here for gulp-task naming-process return gulp.src(filesSass) @@ -41,6 +58,10 @@ const buildSass = (style) => { outputStyle: style }) .on('error', sass.logError)) + .pipe(autoprefixer({ + browsers: browserVersions, //todo remove all current prefix rules from css + cascade: false // prefix indentation in one line? + })) .pipe(sourcemaps.write('./src/sourcemaps')) .pipe(gulp.dest(pathCss)); } @@ -57,6 +78,7 @@ const lintSass = () => { const watchSass = () => { gulp.watch(pathSass + '**/*.scss', gulp.series( + 'lintSassFix', lintSass, buildSass('expanded') ) @@ -66,6 +88,7 @@ const watchSass = () => { gulp.task('default', gulp.series( + 'lintSassFix', lintSass, buildSass('expanded'), gulp.parallel( diff --git a/ui/css/src/readme.md b/ui/css/src/readme.md index e877273ffea..9e3e073c772 100644 --- a/ui/css/src/readme.md +++ b/ui/css/src/readme.md @@ -4,5 +4,6 @@ 2. run $(npm install) inside package.json folder 3. run $(npm start) inside package.json folder 4. gulp automaticaly watches for .scss changes and compiles children scss-files of scss-folder to css now + 5. Find a plugin for your code-editor to get use of .jsbeautifyrc as second instance for more rules that sass-lint-auto-fix doesn't support. (for vscode: "Beautify") ## Keep package versions up to date if possible. check with $(npm outdated) inside package.json folder diff --git a/ui/css/src/scss/cloudstack3-ie7.scss b/ui/css/src/scss/cloudstack3-ie7.scss deleted file mode 100644 index 114e9c01edc..00000000000 --- a/ui/css/src/scss/cloudstack3-ie7.scss +++ /dev/null @@ -1,209 +0,0 @@ -/* -* 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. -*/ - -/*[fmt]1C20-1C0D-E*/ -div.panel div.list-view { - position: relative; - overflow-x: hidden; - margin-top: 0px; -} - -div.toolbar { - top: expression(this.offsetParent.scrollTop); -} - -div.toolbar div.text-search div.search-bar input { - float: left; - border: none; - margin-top: -1px; - margin-right: 0px; - margin-bottom: 0px; - margin-left: -12px; - width: 97%; - height: 67%; -} - -div.panel div.list-view div.fixed-header { - top: expression(this.offsetParent.scrollTop + 30); -} - -.detail-view div.list-view div.fixed-header { - top: 29px !important; - left: 12px !important; -} - -div.panel div.list-view div.data-table table.body { - top: 78px; -} - -.detail-view .main-groups { - width: 96%; - height: 416px; - position: relative; - overflow-x: hidden; - margin-top: -18px; -} - -.detail-view .ui-widget-content { - overflow-x: hidden !important; -} - -.tree-view { - position: relative; - top: expression(this.offsetParent.scrollTop); -} - -.tree-view li .name { - margin: 0px !important; -} - -.detail-view .button.done { - /*+placement:shift 0px 459px;*/ - position: relative; - left: 0px; - top: 459px; -} - -.detail-view ul { - /*+placement:shift;*/ - position: relative; - left: 0; - top: 0; -} - -.ui-tabs ul.ui-tabs-nav { - margin-top: 20px; -} - -.dashboard.admin .dashboard-container.sub.alerts ul { - top: expression(this.offsetParent.scrollTop); -} - -#user-options a:hover { - background: #ADADAD; - color: #FFFFFF; - /*+text-shadow:0px 1px 2px #383838;*/ - -moz-text-shadow: 0px 1px 2px #383838; - -webkit-text-shadow: 0px 1px 2px #383838; - -o-text-shadow: 0px 1px 2px #383838; - text-shadow: 0px 1px 2px #383838; -} - -.multi-wizard .progress ul li span.arrow { - display: none; - border-right: 0px solid #000000; -} - -.tree-view ul li .name { - float: right; -} - -.multi-edit .data .data-body .data-item .expandable-listing { - width: 99.8%; - border: 1px solid #CFC9C9; - max-height: 161px; - position: relative; - overflow: auto; - overflow-x: hidden; - top: expression(this.offsetParent.scrollTop); -} - -table tbody td, -table th { - padding: 9px 5px 8px 0px; - border-right: 1px solid #BFBFBF; - color: #495A76; - clear: none; - width: auto; - width: 88px; - min-width: 88px; - font-size: 11px; - overflow: hidden; - vertical-align: middle; -} - -.detail-view > .toolbar { - position: relative; - float: left; - left: -14px; -} - -.detail-view .list-view > .toolbar { - width: 100% !important; -} - -.system-chart ul.resources li .label { - /*+placement:shift 3px 9px;*/ - position: relative; - left: 3px; - top: 9px; - position: absolute; -} - -.system-chart ul.resources li .button.view-all .view-all-label { - /*+placement:shift 6px 5px;*/ - position: relative; - left: 6px; - top: 5px; -} - -.quick-view-tooltip div.title > span.title { -} - -.quick-view-tooltip div.title .icon { - top: -15px; -} - -.quick-view-tooltip table { -} - -.quick-view-tooltip .main-groups { - float: left; - left: 0px; - margin-top: 7px; -} - -.quick-view-tooltip .actions { - width: 426px !important; - float: left; -} - -.quick-view-tooltip .action { - float: left !important; - width: 54px !important; - margin-left: 7px !important; -} - -.quick-view-tooltip .action .label { - float: left; - max-width: 20px; -} - -.quick-view-tooltip .action .icon { - float: left; - height: 7px; - left: 0px; -} - -.list-view td.quick-view { -} - -.quick-view-tooltip .detail-view .detail-group.actions .action.text { - filter:alpha(opacity=100); -} diff --git a/ui/css/src/scss/cloudstack3.hu.scss b/ui/css/src/scss/cloudstack3.hu.scss index 77259e14d57..64ee7884da7 100644 --- a/ui/css/src/scss/cloudstack3.hu.scss +++ b/ui/css/src/scss/cloudstack3.hu.scss @@ -1,26 +1,19 @@ -/* -* 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. -*/ +// 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. -/* - * correct the breadcrumbs, hungarian translation is longer - * than the english default. - */ -#breadcrumbs div.home { - width: 100px; -} +@import 'licences/AL-css'; +@import 'languages/hungarian'; diff --git a/ui/css/src/scss/cloudstack3.ja_JP.scss b/ui/css/src/scss/cloudstack3.ja_JP.scss index c4164d92970..976679c3a66 100644 --- a/ui/css/src/scss/cloudstack3.ja_JP.scss +++ b/ui/css/src/scss/cloudstack3.ja_JP.scss @@ -1,83 +1,19 @@ -/*[fmt]1C20-1C0D-E*/ -/* -* 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. -*/ -#header div.view-switcher { - font-size: 9px; -} +// 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. -.dashboard.admin .dashboard-container .stats ul li .name { - font-size: 10px; -} - -.dashboard.admin .dashboard-container .stats ul li .percentage { - float: left; - font-size: 15px; - font-weight: bold; - margin: 13px 0 0; - /*+text-shadow:0px -2px 1px #FFFFFF;*/ - -moz-text-shadow: 0px -2px 1px #FFFFFF; - -webkit-text-shadow: 0px -2px 1px #FFFFFF; - -o-text-shadow: 0px -2px 1px #FFFFFF; - text-shadow: 0px -2px 1px #FFFFFF; -} - -.dashboard.admin .dashboard-container .stats ul li .value .content { - font-size: 10px; -} - -div.toolbar div.filters label { - font-size: 9px; -} - -div.toolbar div.filters select { - width: 82px; - font-size: 11px; -} - -div.toolbar div.button.add, -div.toolbar div.button.refresh, -div.toolbar div.button.add, -div.toolbar div.button.main-action, -.toolbar div.button.header-action, -.detail-group .button.add { - font-size: 10px; - white-space: nowrap; -} - -table tbody td.quick-view, -table thead th.quick-view { - font-size: 8px; -} - -.multi-wizard.instance-wizard .progress ul li span.multiline { - font-size: 9px; -} - -.multi-wizard .review .select-container .select .name { - white-space: nowrap; - font-size: 10px; -} - -.quick-view-tooltip .detail-view .detail-group.actions .action.text .label { - font-size: 8px; -} - -.detail-view .multi-edit table tr th, .detail-view .multi-edit table tr td { - font-size: 8px; -} \ No newline at end of file +@import 'licences/AL-css'; +@import 'languages/japanese'; diff --git a/ui/css/src/scss/cloudstack3.scss b/ui/css/src/scss/cloudstack3.scss index cfad99df14a..5a20e0db7c7 100644 --- a/ui/css/src/scss/cloudstack3.scss +++ b/ui/css/src/scss/cloudstack3.scss @@ -1,13239 +1,91 @@ -/*[fmt]1C20-1C0D-E*/ -/* -* 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. -*/ -div.toolbar:after, -.multi-wizard.zone-wizard .select-container .field .select-array-item:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; - font-size: 0; -} - -div.toolbar, -.multi-wizard.zone-wizard .select-container .field .select-array-item { - display: inline-block; -} - -div.toolbar, -.multi-wizard.zone-wizard .select-container .field .select-array-item { - display: block; - height: 1px; -} - -body { - min-width: 1224px; - font-family: sans-serif; - overflow: auto; - background: #EDE8E8; -} - -body.install-wizard { - font-family: sans-serif; - height: 769px !important; - overflow: auto; - overflow-x: hidden; - background: #FFFFFF url(../images/bg-login.png); -} - -#main-area { - width: 1224px; - height: 729px; - margin: auto; - border: 1px solid #D4D4D4; - /*+box-shadow:0px -5px 11px #B7B7B7;*/ - -moz-box-shadow: 0px -5px 11px #B7B7B7; - -webkit-box-shadow: 0px -5px 11px #B7B7B7; - -o-box-shadow: 0px -5px 11px #B7B7B7; - box-shadow: 0px -5px 11px #B7B7B7; - border: 1px solid #E8E8E8; -} - -#container { - /*[empty]width:;*/ - height: 100%; - margin: auto; - position: relative; -} - -#sections { - display: none; -} - -a { - color: #0B84DC; - text-decoration: none; -} - -a:hover { - text-decoration: underline; - color: #000000; -} - -/*Table*/ -table { - width: 955px; - max-width: 977px; - margin: 15px 15px 12px 12px; - font-size: 13px; - text-align: left; - text-indent: 10px; - border-bottom: 1px solid #C4C5C5; - border-collapse: collapse; - position: relative; -} - -table thead { - background: url(../images/bg-table-head.png) repeat-x; - cursor: default; -} - -table thead th { - border: 1px solid #C6C3C3; - color: #525252; - border-top: none; - border-bottom: 1px solid #CFC9C9; - text-align: left; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - font-weight: bold; - white-space: nowrap; - cursor: pointer; -} - -table thead th.sorted { - color: #312F2F; - /*+text-shadow:0px 1px 1px #BFBFBF;*/ - -moz-text-shadow: 0px 1px 1px #BFBFBF; - -webkit-text-shadow: 0px 1px 1px #BFBFBF; - -o-text-shadow: 0px 1px 1px #BFBFBF; - text-shadow: 0px 1px 1px #BFBFBF; -} - -table thead th.sorted.desc { - background-position: 102% -111px; -} - -table thead th.sorted.asc { - background-position: 102% -157px; -} - -table tbody td, -table th { - padding: 10px 5px 6px; - border-right: 1px solid #BFBFBF; - color: #282828; - clear: none; - min-width: 88px; - font-size: 11px; - overflow: hidden; - vertical-align: middle; -} - -table tbody td.loading { - text-align: center; - background: #DBE2E9; - border-top: 1px solid #FBFBFB; -} - -table tbody td.truncated { - overflow: visible; - max-width: 120px; -} - -table tbody td.truncated > span { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.list-view-select table th.name, -.list-view-select table td.name { - width: 170px; - min-width: 170px; - max-width: 170px; -} - -/** Multiselect*/ -table thead th.multiselect, -table tbody td.multiselect { - width: 20px; - min-width: 20px; - max-width: 20px; -} - -table thead th.multiselect input, -table tbody td.multiselect input { - margin: 0; - /*+placement:shift -8px 0px;*/ - position: relative; - left: -8px; - top: 0px; -} - -table thead th.multiselect input { - margin-left: 2px; -} - -/** Actions table cell*/ -table tbody td.actions { - width: 130px; - max-width: 130px !important; - min-width: 130px !important; - vertical-align: middle; -} - -table tbody td.actions input { - /*+placement:shift 10px -6px;*/ - position: relative; - left: 10px; - top: -6px; - margin: 11px 0 0px; -} - -.list-view-select table tbody td.actions { - width: 40px !important; - min-width: 40px !important; - max-width: 40px !important; -} - -.list-view-select table tbody td.actions input { - margin: 0 0 0 -7px; -} - -.list-view-select table thead th.actions { - width: 40px !important; - min-width: 40px !important; - max-width: 40px !important; - text-indent: 5px; -} - -/** Quick view table cell*/ -table tbody td.quick-view, -table thead th.quick-view { - min-width: 58px; - max-width: 58px !important; - width: 58px !important; - height: 14px !important; - text-indent: 2px; - white-space: nowrap; - cursor: default; -} - -table tbody td.quick-view .icon { - margin-left: 22px; - margin-top: 3px; - padding: 0px 0px 6px 12px; - background: url(../images/sprites.png) no-repeat -44px -62px; -} - -table tbody td.quick-view:hover .icon { - background-position: -44px -644px; -} - -table tbody tr.loading td.quick-view .icon { - display: none; -} - -table tbody tr.loading td.quick-view { - cursor: default; -} - -table tbody tr.loading td.quick-view .loading { - background-position: center center; -} - -/** Row styling*/ -table tbody tr { - border-left: 1px solid #C4C5C5; - border-right: 1px solid #C4C5C5; - border-top: 1px solid transparent; -} - -table tbody tr.even { - background: #FFFFFF; -} - -table tbody tr.odd { - background: #F2F0F0; -} - -table tbody tr.selected { - background: #CBDDF3; - border-top: 1px solid #EDF0F7 !important; - border-bottom: 1px solid #BABFD9; - text-shadow: 0px 1px 1px #FCFBF7; -} - -table tbody tr.to-remove { - background: #E05959; - border-top: 1px solid #EDF0F7 !important; - border-bottom: 1px solid #BABFD9; - text-shadow: 0px 1px 1px #FCFBF7; -} - -table tbody tr.loading { - background: #E2E9F0; -} - -table tbody tr.loading td { - /*+opacity:50%;*/ - filter: alpha(opacity=50); - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); - -moz-opacity: 0.5; - opacity: 0.5; -} - -table tbody tr.loading td.loading.icon { - background: url(../images/ajax-loader.gif) no-repeat center; - height: 35px; - padding: 0; -} - -table tbody tr div.loading { - display: block; - width: 50px; - height: 14px; - background: transparent url(../images/ajax-loader-small.gif) no-repeat center; - margin: auto; -} - -table th.resizable { - position: relative; - cursor: col-resize; -} - -table th div.ui-resizable-handle { - position: relative; - top: -30px; - float: right; -} - -/** Header, misc*/ -#template { - display: none; -} - -/*Login screen*/ -body.login { - background: url(../images/overlay-pattern.png) repeat center, #106CA9 url(../images/bg-login.jpg) no-repeat center; - background-size: auto, cover; - overflow: hidden; -} - -.login { - display: block; - width: 100%; - height: 350px; - /*+placement:shift 0 80px;*/ - position: relative; - left: 0; - top: 80px; - background: #053663; -} - -.login .select-language { - margin-top: 10px; - float: left; -} - -.login .select-language select { - width: 260px; - border: 1px solid #808080; - margin-top: 20px; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - font-size: 12px; - /*+box-shadow:inset 0px 1px 1px #838383;*/ - -moz-box-shadow: inset 0px 1px 1px #838383; - -webkit-box-shadow: inset 0px 1px 1px #838383; - -o-box-shadow: inset 0px 1px 1px #838383; - box-shadow: inset 0px 1px 1px #838383; -} - -.login .fields { - width: 409px; - float: left; - margin: 72px 0 0 88px; -} - -.login .fields .field { - position: relative; -} - -.login .fields .field label { - font-size: 12px; - color: #4E4F53; - /*+placement:displace 9px 14px;*/ - position: absolute; - margin-left: 9px; - margin-top: 14px; -} - -.login .fields .field label.error { - color: #FF0000; - float: right; - left: 264px; - top: 0; -} - -.login .fields input { - width: 248px; - height: 20px; - margin: 5px 0 0; - text-indent: 1px; - font-size: 13px; - border: none; - padding: 5px; - /*+border-radius:3px;*/ - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; - /*+box-shadow:inset 0px 1px 1px #4E4E4E;*/ - -moz-box-shadow: inset 0px 1px 1px #4E4E4E; - -webkit-box-shadow: inset 0px 1px 1px #4E4E4E; - -o-box-shadow: inset 0px 1px 1px #4E4E4E; - box-shadow: inset 0px 1px 1px #4E4E4E; - background: #ECECEC; -} - -.login .fields input.error { - border-color: #FF8080; - background: #FFEAEA; -} - -.login .fields input[type=submit] { - background: transparent url(../images/sprites.png) -563px -747px; - cursor: pointer; - border: none; - margin: 7px 120px 0 -1px; - text-align: center; - width: 69px; - height: 25px; - display: block; - color: #FFFFFF; - font-weight: bold; - float: left; - text-indent: -1px; - /*+text-shadow:0px 1px 2px #000000;*/ - -moz-text-shadow: 0px 1px 2px #000000; - -webkit-text-shadow: 0px 1px 2px #000000; - -o-text-shadow: 0px 1px 2px #000000; - text-shadow: 0px 1px 2px #000000; -} - -.login .fields input[type=samlsubmit] { - background: transparent url(../images/sprites.png) -563px -747px; - cursor: pointer; - border: none; - text-align: center; - width: 60px; - height: 15px; - display: block; - color: #FFFFFF; - font-weight: bold; - text-indent: -1px; - /*+text-shadow:0px 1px 2px #000000;*/ - -moz-text-shadow: 0px 1px 2px #000000; - -webkit-text-shadow: 0px 1px 2px #000000; - -o-text-shadow: 0px 1px 2px #000000; - text-shadow: 0px 1px 2px #000000; - font-size: 10px; -} - -.login .fields input[type=submit]:hover { - background-position: -563px -772px; -} - -.login .logo { - width: 290px; - height: 40px; - float: left; - margin: 72px 0 0 209px; - background: url(../images/logo-login.png) no-repeat 0 0; -} - -.login.nologo .logo { - background-image: url(../images/logo-login-oss.png); -} - -.login form { - display: block; - width: 1000px; - height: 100%; - margin: auto; - background: #053663; -} - -/*About dialog*/ -.dialog-about .ui-widget-content { - padding-left: 0; - padding-right: 0; - width: 100% !important; -} - -.dialog-about .logo { - font-size: 26px; - color: #636363; - padding-top: 20px; -} - -.dialog-about .version { - font-size: 12px; - padding-top: 10px; -} - -.dialog-about .ui-button { - float: none; - margin: 0 auto; -} - -#browser div.panel div.detail-view .toolbar { - width: 100%; -} - -div.list-view table tbody td span { - display: block; - float: left; - max-width: 89%; - word-break: break-all; - word-wrap: break-word; - text-indent: 0; - margin-left: 12px; - line-height: 15px; -} - -div.list-view div.toolbar div.section-switcher div.section-select label { - margin: 0 9px 0 0; -} - -.loading-overlay { - position: absolute; - width: 100%; - height: 100%; - left: 0px; - top: 0px; - background: #F2F2F2 url(../images/ajax-loader.gif) no-repeat center; - z-index: 500; - /*+opacity:70%;*/ - filter: alpha(opacity=70); - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); - -moz-opacity: 0.7; - opacity: 0.7; -} - -.loading-overlay span { - display: block; - text-align: center; - margin: 155px 0 0 5px; - color: #4B4B4B; -} - -.detail-view .ui-tabs-panel .loading-overlay { - background-position: 50% 250px; -} - -/*Install wizard*/ -.install-wizard { - width: 1024px; - height: 768px; - margin: auto; - border-top: none; - position: relative; -} - -.install-wizard .header { - text-align: center; - background: url(../images/bg-login.png); - color: #626E82; - height: 365px; - padding: 32px 0 89px; - /*+text-shadow:0px 1px 2px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 2px #FFFFFF; - -webkit-text-shadow: 0px 1px 2px #FFFFFF; - -o-text-shadow: 0px 1px 2px #FFFFFF; - text-shadow: 0px 1px 2px #FFFFFF; - z-index: 9; -} - -.install-wizard .header h3 { - font-size: 20px; -} - -.install-wizard .step { - max-width: 691px; - margin: auto; - padding: 56px 0 0; -} - -.install-wizard .step .title { - width: 303px; - margin: auto auto 30px; - font-size: 22px; - clear: both; - color: #626E82; -} - -.install-wizard .step .subtitle { - color: #4B5E69; - font-weight: bold; - font-size: 12px; -} - -.install-wizard .step p { - color: #4A4A4A; - font-size: 15px; - line-height: 23px; - background: url(../images/bg-gradient-white-transparent.png) repeat-x -114px -270px; -} - -.install-wizard .step ul li { - margin: 14px 0 0 18px; - width: 465px; - font-size: 13px; - list-style: disc; -} - -.install-wizard .step .field { - text-align: left; - margin: 0 0 12px; -} - -.install-wizard .step .field label { - display: block; - clear: both; - font-size: 11px; - color: #4D4D4D; -} - -.install-wizard .step .field label.error { - color: #FF2424; - font-size: 11px; -} - -.install-wizard .body { - width: 1012px; - height: 762px; - margin: -352px auto auto; - z-index: 10; - background: url(../images/bg-gradient-white-transparent.png) repeat-x -114px -141px; - /*+box-shadow:0px -3px 4px #CFCFCF;*/ - -moz-box-shadow: 0px -3px 4px #CFCFCF; - -webkit-box-shadow: 0px -3px 4px #CFCFCF; - -o-box-shadow: 0px -3px 4px #CFCFCF; - box-shadow: 0px -3px 4px #CFCFCF; -} - -.install-wizard h2 { - font-size: 28px; - margin: 0 0 19px; -} - -.install-wizard input[type=text], -.install-wizard input[type=password], -.install-wizard input[type=text], -.install-wizard select { - width: 288px; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - border: 1px solid #CDCDCD; - /*+box-shadow:inset 0px 1px #AEAEAE;*/ - -moz-box-shadow: inset 0px 1px #AEAEAE; - -webkit-box-shadow: inset 0px 1px #AEAEAE; - -o-box-shadow: inset 0px 1px #AEAEAE; - box-shadow: inset 0px 1px #AEAEAE; - -moz-box-shadow: inset 0px 1px 0px #AEAEAE; - -webkit-box-shadow: inset 0px 1px 0px #AEAEAE; - -o-box-shadow: inset 0px 1px 0px #AEAEAE; - font-size: 14px; - color: #232323; - padding: 6px; - background: #F7F7F7; -} - -.install-wizard .button { - background: url(../images/bg-gradients.png) 0px -221px; - padding: 7px 16px 7px 18px; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - border: 1px solid #505050; - color: #FFFFFF; - font-size: 12px; - font-weight: bold; - /*+text-shadow:0px -1px 3px #3F4351;*/ - -moz-text-shadow: 0px -1px 3px #3F4351; - -webkit-text-shadow: 0px -1px 3px #3F4351; - -o-text-shadow: 0px -1px 3px #3F4351; - text-shadow: 0px -1px 3px #3F4351; - float: right; - cursor: pointer; - margin-top: 15px; -} - -.install-wizard .button.advanced-installation, -.install-wizard .button.go-back { - background: #E0DEDE; - color: #3B3B3B; - border: 1px solid #C7C2C2; - /*+text-shadow:0px 0px #FFFFFF;*/ - -moz-text-shadow: 0px 0px #FFFFFF; - -webkit-text-shadow: 0px 0px #FFFFFF; - -o-text-shadow: 0px 0px #FFFFFF; - text-shadow: 0px 0px #FFFFFF; - float: left; -} - -.install-wizard .button.go-back { - padding: 9px 16px 10px 18px; - font-size: 12px; -} - -.install-wizard .setup-form .button.go-back { - /*+placement:shift 15px -14px;*/ - position: relative; - left: 15px; - top: -14px; -} - -.install-wizard .step { - z-index: 11; - position: relative; -} - -.install-wizard .step .tooltip-info { - /*+placement:shift 547px 50px;*/ - position: relative; - left: 547px; - top: 50px; - position: absolute; -} - -/*** Intro*/ -.install-wizard .step.intro.what-is-cloudstack p { - background: url(../images/bg-what-is-cloudstack.png) no-repeat 50% 237px; - height: 540px; -} - -/*** Diagram*/ -.install-wizard .diagram { - width: 910px; - height: 385px; - /*+placement:shift 65px 496px;*/ - position: relative; - left: 65px; - top: 496px; - position: absolute; - z-index: 10; -} - -.install-wizard .diagram .part { - background: url(../images/install-wizard-parts.png) no-repeat; - display: none; -} - -.install-wizard .diagram .part.zone { - width: 742px; - height: 135px; - background-position: -267px -580px; - /*+placement:shift 77px 222px;*/ - position: relative; - left: 77px; - top: 222px; - position: absolute; -} - -.install-wizard .diagram .part.loading { - width: 742px; - height: 432px; - background-position: -1264px -487px; - /*+placement:shift 105px -67px;*/ - position: relative; - left: 105px; - top: -67px; - position: absolute; -} - -.install-wizard .diagram .part.loading .icon { - width: 61px; - height: 76px; - background: url(../images/ajax-loader.gif) no-repeat; - /*+placement:shift 322px 130px;*/ - position: relative; - left: 322px; - top: 130px; -} - -.install-wizard .diagram .part.pod { - width: 266px; - height: 396px; - background-position: -47px -3px; - /*+placement:shift 313px -76px;*/ - position: relative; - left: 313px; - top: -76px; - position: absolute; -} - -.install-wizard .diagram .part.cluster { - width: 266px; - height: 396px; - background-position: -364px 1px; - /*+placement:shift 313px -76px;*/ - position: relative; - left: 313px; - top: -76px; - position: absolute; -} - -.install-wizard .diagram .part.host { - width: 266px; - height: 396px; - background-position: -688px 1px; - /*+placement:shift 313px -76px;*/ - position: relative; - left: 313px; - top: -76px; - position: absolute; -} - -.install-wizard .diagram .part.primaryStorage { - width: 275px; - height: 396px; - background-position: -1046px 1px; - /*+placement:shift 306px -76px;*/ - position: relative; - left: 306px; - top: -76px; - position: absolute; -} - -.install-wizard .diagram .part.secondaryStorage { - width: 385px; - height: 396px; - background-position: -1469px 1px; - /*+placement:shift 306px -76px;*/ - position: relative; - left: 306px; - top: -76px; - position: absolute; -} - -/*** Setup form*/ -.install-wizard .step .setup-form { - display: inline-block; - background: url(../images/bg-transparent-white.png); - width: 469px; - border: 1px solid #DFDFDF; - /*+text-shadow:0px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px #FFFFFF; - -o-text-shadow: 0px 1px #FFFFFF; - text-shadow: 0px 1px #FFFFFF; - -moz-text-shadow: 0px 1px 0px #FFFFFF; - -webkit-text-shadow: 0px 1px 0px #FFFFFF; - -o-text-shadow: 0px 1px 0px #FFFFFF; - /*+box-shadow:0px 5px 9px #9F9F9F;*/ - -moz-box-shadow: 0px 5px 9px #9F9F9F; - -webkit-box-shadow: 0px 5px 9px #9F9F9F; - -o-box-shadow: 0px 5px 9px #9F9F9F; - box-shadow: 0px 5px 9px #9F9F9F; -} - -.install-wizard .step .setup-form .title { - float: left; - margin: 17px 0 0 29px; - color: #626F7C; -} - -.install-wizard .step .setup-form .field { - width: 389px; - display: inline-block; - margin: 6px 0 1px 31px; - padding: 9px; - color: #57646D; -} - -.install-wizard .step .setup-form .field .name { - width: 98px; - text-align: right; - float: left; - font-size: 13px; - padding: 10px 0 0 0px; -} - -.install-wizard .step .setup-form .field .value { - float: right; -} - -.install-wizard .step .setup-form input[type=text], -.install-wizard .step .setup-form input[type=password] { - width: 278px; - border: 1px solid #8D8D8D; - padding: 2px 2px 1px; - margin: 6px 4px 0 0; -} - -.install-wizard .step .setup-form .range-item { - width: 142px; - float: left; -} - -.install-wizard .step .setup-form .range-item input { - width: 131px; -} - -.install-wizard .step .setup-form .multi-range input[type=text] { - width: 128px; -} - -.install-wizard .step .setup-form input.button { - margin: 0 30px 14px 15px; -} - -/*** Step: Change user*/ -.install-wizard .step.change-user { - text-align: center; - padding-top: 95px; - width: 316px; - margin: auto; -} - -.install-wizard .step.intro iframe { - width: 99%; - height: 99%; - margin: 4px; -} - -.install-wizard .step.intro .title { - color: #565454; - margin-left: 0; - margin-bottom: 21px; - font-size: 25px; -} - -.install-wizard .step.intro .subtitle { - margin-bottom: 9px; -} - -.install-wizard .step.intro .subtitle li { - background: url(../images/ajax-loader-small.gif) no-repeat 3px 0px; - position: relative; - width: 45%; - padding: 1px 0 1px 30px; - height: 24px; - list-style: none; -} - -.install-wizard .step.intro .subtitle li.complete { - background: url(../images/icons.png) -1px -224px; -} - -.install-wizard .step.intro .subtitle li.error { - background: url(../images/icons.png) -1px -190px; -} - -.install-wizard .step.intro .subtitle li img { - float: right; -} - -/*Notifications*/ -div.notification-box { - width: 323px; - height: 354px; - background: url(../images/bg-notifications.png) no-repeat 0px 0px; -} - -div.notification-box h3 { - color: #FFFFFF; - /*+placement:shift 0px 35px;*/ - position: relative; - left: 0px; - top: 35px; - text-align: center; - font-size: 21px; - letter-spacing: 1px; - /*+text-shadow:0px 1px 2px #000000;*/ - -moz-text-shadow: 0px 1px 2px #000000; - -webkit-text-shadow: 0px 1px 2px #000000; - -o-text-shadow: 0px 1px 2px #000000; - text-shadow: 0px 1px 2px #000000; -} - -div.notification-box .container { - background: #FFFFFF; - width: 296px; - height: 241px; - margin: auto; - /*+placement:shift 3px 46px;*/ - position: relative; - left: 3px; - top: 46px; - /*+box-shadow:inset 0px 3px 7px #656565;*/ - -moz-box-shadow: inset 0px 3px 7px #656565; - -webkit-box-shadow: inset 0px 3px 7px #656565; - -o-box-shadow: inset 0px 3px 7px #656565; - box-shadow: inset 0px 3px 7px #656565; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - border: 1px solid #8198AE; -} - -div.notification-box .container ul { - margin-top: 8px; - height: 229px; - overflow: auto; - overflow-x: hidden; - width: 294px; -} - -div.notification-box .container ul li { - width: 100%; - height: 41px; - border-bottom: 1px solid #CECECE; - overflow-x: hidden; - text-indent: 0; - font-size: 12px; - color: #4D5E6E; - background: url(../images/icons.png) no-repeat 10px -213px; - cursor: pointer; -} - -div.notification-box .container ul li.error { - height: 53px; - background: url(../images/icons.png) no-repeat 10px -171px; -} - -div.notification-box .container ul li.error .subtitle { - display: block; - width: 213px; - height: 10px; - overflow: hidden; - white-space: nowrap; - float: left; - text-overflow: ellipsis; - color: #808080; - text-indent: 0; - padding: 0; - margin: 0; - /*+placement:shift 48px 17px;*/ - position: relative; - left: 48px; - top: 17px; -} - -div.notification-box .container ul li span { - float: left; - /*+placement:shift 48px 15px;*/ - position: relative; - left: 48px; - top: 15px; - max-width: 202px; - font-size: 14px; - font-weight: 100; - overflow: hidden; -} - -div.notification-box .container ul li span:hover { - color: #5FAAF7; - text-decoration: underline; -} - -div.notification-box .container ul div.remove { - width: 17px; - height: 21px; - background: url(../images/buttons.png) no-repeat -623px -8px; - float: right; - margin: -4px 8px 0px 0px; - cursor: pointer; - /*+placement:shift 0px 16px;*/ - position: relative; - left: 0px; - top: 16px; -} - -div.notification-box .container ul div.remove:hover { - background-position: -606px -8px; -} - -div.notification-box .container ul li.pending { - color: #7E96AC; - background: url(../images/ajax-loader.gif) no-repeat 8px 6px; -} - -div.notification-box .container ul li.first { - border-top: none; -} - -div.notification-box .button { - float: left; - background: url(../images/buttons.png) no-repeat; - cursor: pointer; - /*+placement:shift 0px 51px;*/ - position: relative; - left: 0px; - top: 51px; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - border-bottom: 1px solid #2B2B2B; - /*+box-shadow:0px 0px 2px #272727;*/ - -moz-box-shadow: 0px 0px 2px #272727; - -webkit-box-shadow: 0px 0px 2px #272727; - -o-box-shadow: 0px 0px 2px #272727; - box-shadow: 0px 0px 2px #272727; - padding: 5px 10px 6px; -} - -div.notification-box .button span { - color: #FFFFFF; - font-size: 11px; - font-weight: bold; - letter-spacing: 1px; - /*+text-shadow:0px -1px 2px #171717;*/ - -moz-text-shadow: 0px -1px 2px #171717; - -webkit-text-shadow: 0px -1px 2px #171717; - -o-text-shadow: 0px -1px 2px #171717; - text-shadow: 0px -1px 2px #171717; -} - -div.notification-box .button.clear-list { - background: url(../images/gradients.png) 0px -10px; - margin-left: 16px; -} - -div.notification-box .button.clear-list:hover { - background-position: 0px -51px; -} - -div.notification-box .button.close { - background: url(../images/gradients.png) 0px -317px; - float: right; - margin-right: 10px; - border-bottom: 1px solid #232323; -} - -div.notification-box .button.close:hover { - background-position: -4px -368px; -} - -/*** Corner alert*/ -div.notification.corner-alert { - background: #FFFFFF; - background: rgba(255, 255, 255, 0.95); - /*+box-shadow:0px 2px 10px #000000;*/ - -moz-box-shadow: 0px 2px 10px #000000; - -webkit-box-shadow: 0px 2px 10px #000000; - -o-box-shadow: 0px 2px 10px #000000; - box-shadow: 0px 2px 10px #000000; - width: 300px; - height: 75px; - /*+border-radius:3px;*/ - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; - position: absolute; - text-indent: 10px; - padding: 7px 7px 0; - font-size: 12px; - /*+opacity:70%;*/ - filter: alpha(opacity=70); - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); - -moz-opacity: 0.7; - opacity: 0.7; - z-index: 100; - margin: 38px 0 0 -56px; -} - -div.notification.corner-alert .top-arrow { - background: url(../images/sprites.png) no-repeat -580px -1353px; - width: 36px; - height: 15px; - position: absolute; - top: -15px; - left: 50px; -} - -div.notification.corner-alert div.title { - width: 100%; - height: 33px; - color: #FFFFFF; -} - -div.notification.corner-alert div.title span { - /*+placement:shift 0px 10px;*/ - position: relative; - left: 0px; - top: 10px; - color: #6D6D6D; - padding: 3px 0 12px 24px; - font-weight: 100; - font-size: 14px; - padding-left: 33px; - background: url(../images/icons.png) no-repeat 3px -223px; -} - -div.notification.corner-alert.error div.title span { - background: url(../images/icons.png) no-repeat -2px -190px; -} - -div.notification.corner-alert div.message span { - position: relative; - padding-top: 6px; - font-size: 14px; - display: block; - color: #000000; - /*+placement:shift 17px -2px;*/ - position: relative; - left: 17px; - top: -2px; -} - -/*Tooltips*/ -.tooltip-info { - width: 239px; - min-height: 83px; - display: inline-block; - background: #FFFFFF; - border: 1px solid #BEB8B8; - position: absolute; - z-index: 1000; - /*+border-radius:22px;*/ - -moz-border-radius: 22px; - -webkit-border-radius: 22px; - -khtml-border-radius: 22px; - border-radius: 22px; - border-radius: 22px 22px 22px 22px; -} - -.tooltip-info .arrow { - width: 27px; - height: 47px; - position: absolute; - top: 17px; - left: -18px; - background: url(../images/sprites.png) -583px -939px; -} - -.tooltip-info .title { - color: #485766; - margin: 12px; - font-size: 19px; -} - -.tooltip-info .content { - width: 182px; - font-size: 11px; - line-height: 19px; - padding-bottom: 13px; - overflow: auto; - overflow-x: hidden; - margin: auto; -} - -/*List view*/ -div.panel div.list-view { - overflow: auto; - overflow-x: hidden; - height: 632px; - margin-top: 30px; -} - -.detail-view div.list-view { - width: 930px; - border: 1px solid #DAD4D4; - margin: 41px auto auto !important; - height: 536px !important; - background: #F7F7F7; -} - -div.panel div.list-view div.data-table table { - width: 955px; -} - -.detail-view div.list-view div.data-table table { - width: 903px !important; -} - -.detail-view div.list-view div.data-table table td { - border-left: 1px solid #CACACA; -} - -div.panel div.list-view div.fixed-header { - position: absolute; - top: 29px; - left: 12px; - width: 960px; - height: 47px; - display: table; - background-color: #F7F7F7; - margin: 0; - z-index: 1; -} - -.detail-view div.list-view div.fixed-header { - width: 903px !important; - top: 49px !important; - left: 29px !important; - background: #FFFFFF; -} - -.detail-view div#details-tab-zones div.fixed-header { - left: 25px !important; -} - -.detail-view div.list-view div.fixed-header table { - width: 100% !important; -} - -.project-view div.panel div.list-view div.fixed-header { - background: #6D747D; -} - -div.panel div.list-view div.fixed-header table { - margin: 0; - /*+placement:shift 0px 18px;*/ - position: relative; - left: 0px; - top: 18px; - width: 955px; - /*+box-shadow:0px 4px 10px #DFE1E3;*/ - -moz-box-shadow: 0px 4px 10px #DFE1E3; - -webkit-box-shadow: 0px 4px 10px #DFE1E3; - -o-box-shadow: 0px 4px 10px #DFE1E3; - box-shadow: 0px 4px 10px #DFE1E3; -} - -.project-view div.panel div.list-view div.fixed-header table { - /*+box-shadow:0px 2px 2px #CACDD1;*/ - -moz-box-shadow: 0px 2px 2px #CACDD1; - -webkit-box-shadow: 0px 2px 2px #CACDD1; - -o-box-shadow: 0px 2px 2px #CACDD1; - box-shadow: 0px 2px 2px #CACDD1; -} - -div.list-view td.state { - width: 120px; - min-width: 120px; - max-width: 120px; -} - -div.list-view td.first { - cursor: pointer; -} - -div.list-view tr:not(.multi-edit-selected) td.first:hover { - color: #3A82CD; -} - -div.list-view td.state span { - padding: 1px 0 0 18px; - text-align: center; - width: 80px; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - background: url(../images/sprites.png) 1px -526px; -} - -div.list-view td.state.on span { - background-image: url(../images/sprites.png); - background-repeat: no-repeat; - color: #008000; - background-position: 1px -460px; -} - -div.list-view td.state.off span { - background-image: url(../images/sprites.png); - background-repeat: no-repeat; - color: #B90606; - background-position: 1px -492px; -} - -div.list-view td.state.warning span { - background-image: url(../images/sprites.png); - background-repeat: no-repeat; - color: #B90606; - background-position: 1px -558px; -} - -div.list-view td.state.transition span { - background-image: url(../images/sprites.png); - background-repeat: no-repeat; - color: #B90606; - background-position: 1px -432px; -} - -div.list-view td.state.suitable span { - background: url(../images/icons.png) no-repeat scroll 1px -224px; - color: #008000; - height: 18px; -} - -div.list-view td.state.suitable-storage-migration-required span { - width: 200px; -} - -div.list-view td.state.notsuitable span { - background: url(../images/icons.png) no-repeat scroll 1px -190px; - color: #B90606; - height: 19px; - width: 100px; -} - -div.list-view td.state.notsuitable-storage-migration-required span { - width: 220px !important; -} - -.horizontal-overflow tbody td, .horizontal-overflow thead th { - min-width: 40px; - padding: 10px 10px 5px 0px; -} - -.horizontal-overflow th.quick-view { - padding-left: 5px; -} - -.groupable-header { - background: url(../images/bg-table-head.png); - border-left: 1px solid #C6C3C3; - border-right: 1px solid #C6C3C3; -} - -.groupable-header-columns th { - border: none; -} - -table.horizontal-overflow td.state { - width: 55px; - min-width: 55px; - max-width: 55px; -} - -table.no-split td.first { - min-width: 150px; -} - -.groupable-header-border { - border-left: 1px solid #C6C3C3; - border-right: 1px solid #C6C3C3; -} - -td.alert-notification-threshold { - color: #E87900; - background-color: rgba(255, 231, 175, 0.75); -} - -td.alert-disable-threshold { - color: #F50000; - background-color: rgba(255, 190, 190, 0.75); -} - -span.compact { - height: 16px; -} - -/** Quick view tooltip*/ -.quick-view-tooltip { - width: 470px; - display: inline-block; - padding-top: 0; - margin-left: 0px; -} - -.quick-view-tooltip > div.title { - width: 444px; - position: absolute; - top: 20px; - left: 10px; - color: #808080; - font-weight: 100; -} - -.quick-view-tooltip > div.title .icon { - position: relative; - top: -2px; - left: -7px; - background: url(../images/sprites.png) no-repeat -42px -67px; - float: right; - padding: 0px 13px 0 0px; -} - -.quick-view-tooltip .loading-overlay { - top: 94px; - height: 57px; - left: 1px; - /*+opacity:35%;*/ - filter: alpha(opacity=35); - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=35); - -moz-opacity: 0.35; - opacity: 0.35; -} - -.quick-view-tooltip .container { - border: 1px solid #9EA2A5; - background: #FFFFFF; - width: 471px; - min-height: 100px; - height: auto; - overflow: hidden; - display: inline-block; - /*+box-shadow:0px 7px 9px #676F76;*/ - -moz-box-shadow: 0px 7px 9px #676F76; - -webkit-box-shadow: 0px 7px 9px #676F76; - -o-box-shadow: 0px 7px 9px #676F76; - box-shadow: 0px 7px 9px #676F76; -} - -/*** Quick view detail view*/ -.quick-view-tooltip .detail-view .main-groups { - width: 456px; - height: 170px; - position: absolute; - padding-top: 7px; - top: 55px; - border: 1px solid #808080; - border-left: none; - border-right: none; - overflow: hidden; - /*+box-shadow:0px 1px #E6E6E6;*/ - -moz-box-shadow: 0px 1px #E6E6E6; - -webkit-box-shadow: 0px 1px #E6E6E6; - -o-box-shadow: 0px 1px #E6E6E6; - box-shadow: 0px 1px #E6E6E6; -} - -.quick-view-tooltip .detail-view .tagger { - display: none; -} - -.quick-view-tooltip .detail-view ul { - display: none !important; -} - -.quick-view-tooltip .detail-view .ui-tabs-panel { - display: inline-block; - width: 100% !important; - float: left; - height: auto; - overflow: hidden; -} - -.quick-view-tooltip .detail-view .details { - display: inline-block; - height: auto; - padding-bottom: 224px; -} - -.quick-view-tooltip .detail-view .detail-group { - width: 365px; - margin: 0; - padding: 0; - left: -9px; - background: none; - border: none; -} - -.quick-view-tooltip .detail-view .detail-group table { - margin: 0; - border: none; - background: none; -} - -.quick-view-tooltip .detail-view .detail-group table tr { - background: none; -} - -.quick-view-tooltip .detail-view .detail-group table td.name { - color: #000000 !important; - padding: 0px 29px 0px 5px !important; - font-size: 13px; -} - -.quick-view-tooltip .detail-view .detail-group table td.value { - font-size: 12px; - /*+text-shadow:0px 1px #EAEAEA;*/ - -moz-text-shadow: 0px 1px #EAEAEA; - -webkit-text-shadow: 0px 1px #EAEAEA; - -o-text-shadow: 0px 1px #EAEAEA; - text-shadow: 0px 1px #EAEAEA; - overflow: hidden; -} - -.quick-view-tooltip .detail-view .detail-group table td.value input[type=text] { - width: 258px; - height: 10px; - margin-left: 0px; -} - -.quick-view-tooltip .detail-view .detail-group .main-groups table td.value span { - height: 25px; - top: 7px; -} - -.quick-view-tooltip .detail-view .detail-group.actions { - position: relative; - top: 202px; - float: left; - width: 100%; - height: auto; -} - -.quick-view-tooltip .detail-view .detail-group.actions .button { - top: 160px; -} - -.quick-view-tooltip .detail-view .detail-group.actions .action.text { - width: 112px; - height: 41px; - background: none; - border: none; - float: left; - margin-left: 5px; - display: inline-block; -} - -.quick-view-tooltip .detail-view .detail-group.actions .action.text:hover { - /*+box-shadow:none;*/ - -moz-box-shadow: none; - -webkit-box-shadow: none; - -o-box-shadow: none; - box-shadow: none; -} - -.quick-view-tooltip .detail-view .detail-group.actions .action.text .icon { - display: block; - float: left; - width: 4px; -} - -.quick-view-tooltip .detail-view .detail-group.actions .action.text .label { - width: 81px; - display: block; - float: right; - font-size: 11px; - color: #454C53; - /*+text-shadow:0px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px #FFFFFF; - -o-text-shadow: 0px 1px #FFFFFF; - text-shadow: 0px 1px #FFFFFF; - text-indent: 0px; -} - -.quick-view-tooltip .detail-view .detail-group.actions .action.text:hover .label { - color: #000000; -} - -.quick-view-tooltip .detail-view .detail-group.actions .detail-actions { - width: 460px; - height: auto; - background: none; - vertical-align: top; - position: relative; - top: 27px; - float: left; -} - -.quick-view-tooltip .detail-view .detail-group.actions td.view-all { - position: relative; - left: 0px; - top: 26px; - float: left; - height: 26px; - /*+box-shadow:inset 0px 1px #FFFFFF;*/ - -moz-box-shadow: inset 0px 1px #FFFFFF; - -webkit-box-shadow: inset 0px 1px #FFFFFF; - -o-box-shadow: inset 0px 1px #FFFFFF; - box-shadow: inset 0px 1px #FFFFFF; -} - -.quick-view-tooltip .detail-view .detail-actions a { - background: none; - width: 30px; -} - -/*Details page*/ -.detail-view { - padding: 0 0 0 14px; -} - -.ui-tabs .info { - background: #EFEFEF; - width: 91%; - height: auto; - overflow: visible; - padding: 14px 14px 0; - border: 1px dashed #D7D7D7; - /*+box-shadow:inset 0px 1px 2px #FFFFFF;*/ - -moz-box-shadow: inset 0px 1px 2px #FFFFFF; - -webkit-box-shadow: inset 0px 1px 2px #FFFFFF; - -o-box-shadow: inset 0px 1px 2px #FFFFFF; - box-shadow: inset 0px 1px 2px #FFFFFF; - margin: 10px; - display: inline-block; -} - -.ui-tabs .info li { - font-size: 12px; - color: #3E4C59; - margin: 0 0 18px; -} - -.ui-tabs .info li strong { - font-weight: bold; - color: #506273; -} - -.project-view .ui-tabs ul li.ui-state-default a { - background: #6D747D; - /*+box-shadow:inset -1px -2px 12px #596066;*/ - -moz-box-shadow: inset -1px -2px 12px #596066; - -webkit-box-shadow: inset -1px -2px 12px #596066; - -o-box-shadow: inset -1px -2px 12px #596066; - box-shadow: inset -1px -2px 12px #596066; - color: #FFFFFF; - font-weight: bold; - /*+text-shadow:0px -1px 1px #3A3E42;*/ - -moz-text-shadow: 0px -1px 1px #3A3E42; - -webkit-text-shadow: 0px -1px 1px #3A3E42; - -o-text-shadow: 0px -1px 1px #3A3E42; - text-shadow: 0px -1px 1px #3A3E42; -} - -.project-view .ui-tabs ul li.ui-state-hover a { - background: #878E97 0px 8px; -} - -.project-view .ui-tabs ul li.ui-state-active a { - background: #DBDDDF; - color: #4F6270; - font-weight: bold; - /*+text-shadow:0px 0px #FFFFFF;*/ - -moz-text-shadow: 0px 0px #FFFFFF; - -webkit-text-shadow: 0px 0px #FFFFFF; - -o-text-shadow: 0px 0px #FFFFFF; - text-shadow: 0px 0px #FFFFFF; - /*+box-shadow:0px 0px;*/ - -moz-box-shadow: 0px 0px; - -webkit-box-shadow: 0px 0px; - -o-box-shadow: 0px 0px; - box-shadow: 0px 0px; - -moz-box-shadow: 0px 0px none; - -webkit-box-shadow: 0px 0px none; - -o-box-shadow: 0px 0px none; -} - -.ui-tabs li.ui-state-active.first.last a, -.ui-tabs li.ui-state-default.first.last a { - /*+border-radius:4px 4px 0 0;*/ - -moz-border-radius: 4px 4px 0 0; - -webkit-border-radius: 4px 4px 0 0; - -khtml-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; -} - -.ui-tabs .ui-tabs-hide { - display: none !important; -} - -.ui-tabs .ui-tabs-panel { - border: 1px solid #D9D9D9; - clear: both; - padding: 7px 0 0 0; - width: 97%; - overflow: auto; - overflow-x: hidden; - height: 591px; -} - -.detail-view .main-groups { - max-height: 407px; - overflow: auto; - overflow-x: hidden; - width: 100%; - /*[empty]padding:;*/ - margin-right: 12px; -} - -.detail-view.edit-mode .main-groups { - max-height: 360px; -} - -.detail-group table { - width: 98%; - font-size: 12px; - border-bottom: 1px solid #DFDFDF; - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#eaeaea',GradientType=0 ); - margin-top: 10px; -} - -.detail-group table tr, -.detail-group table td { - vertical-align: middle; - border: none; - cursor: default; -} - -.detail-group table tr.odd { - background: none; -} - -.details.group-multiple table { - border: none; - border-top: none; -} - -.details.group-multiple table.header { - width: 94%; - margin-bottom: 1px; -} - -.details.group-multiple table tbody { - border-top: 1px solid #F2F0F0; -} - -.detail-group .main-groups table td.name { - width: 113px; - color: #6D6D6D; - font-weight: bold; - padding: 14px 12px 13px 13px; - border: none; - text-indent: 0; -} - -.detail-group .main-groups table td.value { - text-indent: 0; -} - -.detail-group .main-groups table td.value > span { - display: block; - height: 30px; - overflow: auto; - position: relative; - top: 9px; - float: left; - width: 245px; -} - -.detail-group .main-groups table td.value > span.copypasteenabledvalue { - text-overflow: ellipsis; - -o-text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} - -.detail-group .main-groups table td.value > .copypasteactive { - display: auto; - white-space: nowrap; - overflow: none; -} - -div.copypasteicon { - background: url("../images/sprites.png") no-repeat -271px -65px; - float: left; - height: 21px; - margin-left: 6px; - margin-top: 0px; - width: 18px; -} - -div.copypasteicon:hover { - background: url("../images/sprites.png") no-repeat -271px -646px; -} - -.detail-group .main-groups table td.value > span.copypasteenabledvalue { - text-overflow: ellipsis; - -o-text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} - -.detail-group .main-groups table td.value > .copypasteactive { - display: auto; - white-space: nowrap; - overflow: none; -} - -div.copypasteicon { - background: url("../images/sprites.png") no-repeat -271px -65px; - float: left; - height: 21px; - margin-left: 6px; - margin-top: 0px; - width: 18px; -} - -div.copypasteicon:hover { - background: url("../images/sprites.png") no-repeat -271px -646px; -} - -.detail-group .main-groups table td.value > span select { - width: 100% !important; -} - -.detail-group .main-groups table td.value .view-all { - cursor: pointer; - /*[empty]height:;*/ - /*+border-radius:4px 0 0 4px;*/ - -moz-border-radius: 4px 0 0 4px; - -webkit-border-radius: 4px 0 0 4px; - -khtml-border-radius: 4px 0 0 4px; - border-radius: 4px 0 0 4px; - float: right; - margin: 7px 0 0; - padding: 0px; -} - -.detail-group .main-groups table td.value .view-all span { - display: block; - float: left; - padding: 5px 2px 8px 4px; - background: url(../images/gradients.png) repeat-x 0px -529px; - border-left: 1px solid #9FA2A6; - /*+border-radius:4px 0 0 4px;*/ - -moz-border-radius: 4px 0 0 4px; - -webkit-border-radius: 4px 0 0 4px; - -khtml-border-radius: 4px 0 0 4px; - border-radius: 4px 0 0 4px; - margin-top: -5px; -} - -.detail-group .main-groups table td.value .view-all .end { - background: url(../images/sprites.png) no-repeat 100% -397px; - float: right; - width: 22px; - height: 25px; - padding: 0px; - margin: -6px 0px 0px; -} - -.detail-group .main-groups table td.value .view-all:hover { - background-position: 100% -431px; -} - -.detail-group .main-groups table td.value .view-all:hover span { - background-position: 0px -566px; -} - -.detail-group .main-groups table td.value .view-all:hover div.end { - background-position: -618px -430px; -} - -.detail-view .detail-group .button.add { - clear: both; - margin: 0px 21px 13px 0 !important; -} - -.detail-view .details.group-multiple { - float: left; - height: 600px; - width: 100%; - margin-bottom: 30px; -} - -.detail-view .details.group-multiple .main-groups { - overflow: visible; - width: 98%; - margin-bottom: 35px; -} - -/*List-view: subselect dropdown*/ -.list-view .subselect { - width: 116px; - display: block; - float: left; - background: url(../images/bg-gradients.png) 0px -42px; - padding: 0; - margin: 8px 0 1px 7px; - clear: both; - border: 1px solid #A8A7A7; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; -} - -.list-view .subselect span { - margin: 4px 0 0 12px; -} - -.list-view .subselect span.info { - font-size: 10px; - white-space: nowrap; -} - -.list-view .subselect select { - width: 85%; - margin: 5px 0 4px; - font-size: 10px; -} - -.detail-group .main-groups table td.value .view-all:hover { - background-position: 100% -431px; -} - -.panel.always-maximized .detail-group .main-groups table td.value span { - width: 565px; -} - -.detail-group.head table td.name { - padding: 20px 0px 17px; -} - -.detail-view .button.done, -.detail-view .button.cancel { - display: inline-block; - color: #FFFFFF; - font-size: 12px; - font-weight: bold; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - /*+text-shadow:0px -1px 2px #000000;*/ - -moz-text-shadow: 0px -1px 2px #000000; - -webkit-text-shadow: 0px -1px 2px #000000; - -o-text-shadow: 0px -1px 2px #000000; - text-shadow: 0px -1px 2px #000000; - /*+box-shadow:0px 1px 4px #ADADAD;*/ - -moz-box-shadow: 0px 1px 4px #ADADAD; - -webkit-box-shadow: 0px 1px 4px #ADADAD; - -o-box-shadow: 0px 1px 4px #ADADAD; - box-shadow: 0px 1px 4px #ADADAD; - cursor: pointer; - margin: 0 0 0 12px; - padding: 9px 20px; - background: url(../images/bg-gradients.png) 0px -221px; - /*+placement:shift -1px 550px;*/ - position: relative; - left: -1px; - top: 550px; - position: absolute; -} - -.detail-view .button.cancel { - background-position: 0px -795px; - left: 85px; - color: #808080; - /*+text-shadow:0px -1px 2px #000000;*/ - -moz-text-shadow: 0px -1px 2px #000000; - -webkit-text-shadow: 0px -1px 2px #000000; - -o-text-shadow: 0px -1px 2px #000000; - text-shadow: 0px -1px 2px #000000; - -moz-text-shadow: 0px -1px 2px #CCCCCC; - -webkit-text-shadow: 0px -1px 2px #CCCCCC; - -o-text-shadow: 0px -1px 2px #CCCCCC; - text-shadow: 0px -1px 2px #CCCCCC; -} - -.detail-view .button.done:hover { - background-position: 0px -950px; - /*+box-shadow:inset 0px 1px 3px #000000;*/ - -moz-box-shadow: inset 0px 1px 3px #000000; - -webkit-box-shadow: inset 0px 1px 3px #000000; - -o-box-shadow: inset 0px 1px 3px #000000; - box-shadow: inset 0px 1px 3px #000000; -} - -.detail-view .button.cancel:hover { - background-position: 0px -834px; -} - -div.group-multiple div.detail-group table { - margin-top: -1px; -} - -div.group-multiple div.detail-group table.header { - border: none; - margin-top: 11px; -} - -div.group-multiple div.detail-group table.header thead th { - background: transparent; - border: none; -} - -div.ui-tabs-panel table span.none { - color: #9D9D9D; -} - -div.detail-group td.view-all div.view-all { - width: auto; - float: right; -} - -div.detail-group td.view-all a { - font-size: 13px; - display: block; - text-decoration: none; - color: #0373B7; - /*+text-shadow:0px 1px 2px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 2px #FFFFFF; - -webkit-text-shadow: 0px 1px 2px #FFFFFF; - -o-text-shadow: 0px 1px 2px #FFFFFF; - text-shadow: 0px 1px 2px #FFFFFF; - float: left; - font-weight: 100; -} - -div.detail-group td.view-all:hover a { - background-position: 0px -566px; -} - -div.detail-group td.view-all a span { - /*+placement:shift -4px -1px;*/ - position: relative; - left: -4px; - top: -1px; -} - -div.detail-group td.view-all:hover a span { - text-decoration: underline; - color: #000000; -} - -div.detail-group td.view-all div.view-all div.end { - display: none; - float: left; - width: 15px; - height: 25px; - background: url(../images/sprites.png) -617px -398px; -} - -div.detail-group td.view-all:hover div.view-all div.end { - background-position: -617px -431px; -} - -div.details div.detail-group td.value input, -div.details div.detail-group td.value select { - width: 282px; -} - -div.details div.detail-group td.value input, -div.details div.detail-group td.value input[type=checkbox] { - float: left; - width: 15px; - margin-left: 10px; -} - -div.details div.detail-group td.value input, -div.details div.detail-group td.value input[type=text] { - width: 93%; -} - -div.details .main-groups label.error { - position: absolute; - right: 10%; - top: 6px; -} - -.detail-view td.view-all.multiple { - max-width: 145px; - display: block; - float: left; - height: 28px; - margin-left: 0; - text-align: left; -} - -/*** Actions*/ -div.detail-group.actions { - padding: 0; - margin: 0; -} - -div.detail-group.actions table { - padding: 0; -} - -div.detail-group.actions tr { - margin: 0; -} - -div.detail-group.actions td { - height: 50px; - vertical-align: middle; -} - -.details.group-multiple div.detail-group.actions { - float: right; - max-width: 75%; - height: 23px; - position: relative; - margin: -15px 0 -5px; -} - -.details.group-multiple div.detail-group.actions table { - background: none; -} - -.details.group-multiple div.detail-group.actions td.detail-actions { - background: none; - display: block; - height: 35px; - float: right; - padding: 0; - min-width: 120px; -} - -.details.group-multiple div.detail-group.actions .detail-actions .action { - float: left; - width: 32px; - /*+placement:shift 11px 7px;*/ - position: relative; - left: 11px; - top: 7px; -} - -.details.group-multiple div.detail-group.actions .detail-actions .action a { - background: none; - width: 31px; -} - -.detail-group table td.detail-actions { - height: 26px; -} - -.detail-group table td.detail-actions.full-length { - display: block; - width: 99%; - float: left; -} - -.detail-group table td.detail-actions .action.text { - padding: 0px 6px 0px 0px; - cursor: pointer; - display: inline-block; - float: right; - margin-right: 8px; - border: 1px solid #C2C2C2; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - background: url(../images/bg-gradients.png) repeat-x 0px -83px; -} - -.detail-group table td.detail-actions .action.text .label { - font-size: 12px; - /*+placement:shift -1px 8px;*/ - position: relative; - left: -1px; - top: 8px; -} - -.detail-group table td.detail-actions .action.text:hover { - /*+box-shadow:inset 0px 1px 3px #171717;*/ - -moz-box-shadow: inset 0px 1px 3px #171717; - -webkit-box-shadow: inset 0px 1px 3px #171717; - -o-box-shadow: inset 0px 1px 3px #171717; - box-shadow: inset 0px 1px 3px #171717; -} - -.detail-group table td.detail-actions a { - display: block; - float: left; - text-indent: -9999px; - width: 30px; - height: 25px; - margin: 0; -} - -.detail-group table td.detail-actions a:hover { - background-position: -417px -43px; -} - -.detail-group table td.detail-actions div.action.first a { - background-position: -385px -11px; - width: 32px; -} - -.detail-group table td.detail-actions div.action.first a:hover { - background-position: -385px -43px; -} - -.detail-group table td.detail-actions div.action.last a { - background-position: -596px -11px; - width: 30px; -} - -.detail-group table td.detail-actions div.action.last a:hover { - background-position: -596px -43px; -} - -.detail-group table td.detail-actions div.action.single a { - width: 31px; - height: 26px; - background-position: -414px -625px; -} - -.detail-group table td.detail-actions div.action.text a { - background: none; -} - -.detail-group table td.detail-actions div.action.single a:hover { - background-position: -414px -587px; -} - -.detail-group table td.detail-actions a span.icon { - background-image: url(../images/sprites.png); - padding: 10px; - display: block; -} - -/*Header*/ -#header { - width: 100%; - height: 135px; - background: url(../images/overlay-pattern.png) repeat 0, #1B5070 url(../images/header-gradient.png) no-repeat center; - background-size: auto, cover; - position: relative; -} - -#header div.button { - font-size: 12px; - color: #FFFFFF; - cursor: pointer; -} - -#header.nologo div.logo { - width: 1224px; - height: 47px; - margin: auto; - background: url(../images/logo.png) no-repeat 0 center; - /*+placement:shift 0px 15px;*/ - position: relative; - left: 0px; - top: 15px; -} - -#header div.controls { - width: 1226px; - height: 48px; - position: relative; - margin: 27px auto 0; - padding-top: 13px; - /*+border-radius:4px 4px 0 0;*/ - -moz-border-radius: 4px 4px 0 0; - -webkit-border-radius: 4px 4px 0 0; - -khtml-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; -} - -#header div.controls.nologo { - background: #666666; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZDNkM2QiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); - background: -moz-linear-gradient(top, #666666 0%, #3d3d3d 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#3d3d3d)); - background: -webkit-linear-gradient(top, #666666 0%,#3d3d3d 100%); - background: -o-linear-gradient(top, #666666 0%,#3d3d3d 100%); - background: -ms-linear-gradient(top, #666666 0%,#3d3d3d 100%); - background: linear-gradient(to bottom, #666666 0%,#3d3d3d 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#3d3d3d',GradientType=0 ); - /*+box-shadow:0px -1px 6px #0E3955;*/ - -moz-box-shadow: 0px -1px 6px #0E3955; - -webkit-box-shadow: 0px -1px 6px #0E3955; - -o-box-shadow: 0px -1px 6px #0E3955; - box-shadow: 0px -1px 6px #0E3955; -} - -.button { - float: left; - background: url(../images/buttons.png) no-repeat; - cursor: pointer; -} - -#header div.notifications { - background: transparent; - float: right; - height: 18px; - padding: 1px 0 0; - /*+placement:shift -174px -57px;*/ - position: relative; - left: -239px; - top: -57px; -} - -#header div.notifications:after { - content: "|"; - /*+placement:shift 28px 7px;*/ - position: relative; - left: 28px; - top: 7px; -} - -#header div.notifications span { - position: relative; - top: 5px; - left: 7px; - /*+text-shadow:0px -1px 1px #464646;*/ - -moz-text-shadow: 0px -1px 1px #464646; - -webkit-text-shadow: 0px -1px 1px #464646; - -o-text-shadow: 0px -1px 1px #464646; - text-shadow: 0px -1px 1px #464646; -} - -#header div.notifications:hover { - color: #5FAAF7; -} - -#header div.notifications div.total { - width: 22px; - height: 19px; - float: left; - margin: 3px; - background: url(../images/sprites.png) no-repeat -593px -870px; - color: #FFFFFF; - font-size: 11px; - /*+text-shadow:0px -1px #6C7283;*/ - -moz-text-shadow: 0px -1px #6C7283; - -webkit-text-shadow: 0px -1px #6C7283; - -o-text-shadow: 0px -1px #6C7283; - text-shadow: 0px -1px #6C7283; - -moz-text-shadow: 0px -1px 0px #6C7283; - -webkit-text-shadow: 0px -1px 0px #6C7283; - -o-text-shadow: 0px -1px 0px #6C7283; -} - -#header div.notifications div.total.pending { - background-position: -593px -846px; - font-weight: bold; -} - -#header div.notifications div.total span { - /*+placement:shift 0px 3px;*/ - position: relative; - left: 0px; - top: 3px; - text-align: center; - display: block; - width: 21px; - font-size: 12px; -} - -#user { - height: 30px; - margin: 0; - position: absolute; - top: -47px; - left: 1025px; - cursor: default !important; - display: inline-block; - float: left; - background: transparent; -} - -#user div.name { - display: inline-block; - float: left; - padding: 9px 18px 7px 12px; - border-right: none; - /*[empty]border-top:;*/ - min-width: 110px; - max-width: 220px; - text-align: center; - height: 12px; - overflow: hidden; - /*+text-shadow:0px -1px 1px #464646;*/ - -moz-text-shadow: 0px -1px 1px #464646; - -webkit-text-shadow: 0px -1px 1px #464646; - -o-text-shadow: 0px -1px 1px #464646; - text-shadow: 0px -1px 1px #464646; - margin: 0; -} - -#user div.options { - float: left; - width: 31px; - height: 28px; - /*+placement:shift 0px 0px;*/ - position: relative; - left: 0px; - top: 0px; - background-position: 0px -867px; - cursor: pointer; -} - -#user div.options .arrow { - width: 11px; - height: 8px; - background: url(../images/buttons.png) -402px -23px; - /*+placement:shift 8px 11px;*/ - position: relative; - left: 8px; - top: 11px; -} - -/** Zone filter (mixed zone management)*/ -#header .zone-filter { - float: left; - width: 111px; - margin: 9px 20px 0 2px; -} - -#header .zone-filter label { - position: absolute; - top: -3px; - color: #FFFFFF; - font-size: 11px; -} - -#header .zone-filter select { - width: 100%; - font-size: 12px; - border: 1px solid #000000; - border-bottom: #FFFFFF; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - background: #ECECEC; - margin-top: 2px; -} - -/*Navigation*/ -#navigation { - width: 230px; - position: relative; - float: left; - /*+box-shadow:inset -1px 4px 7px #DDDDDD;*/ - -moz-box-shadow: inset -1px 4px 7px #DDDDDD; - -webkit-box-shadow: inset -1px 4px 7px #DDDDDD; - -o-box-shadow: inset -1px 4px 7px #DDDDDD; - box-shadow: inset -1px 4px 7px #DDDDDD; - background: #EDE8E8; - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYlIiBzdG9wLWNvbG9yPSIjZWRlOGU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); - background: -moz-linear-gradient(top, #ffffff 0%, #ede8e8 6%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(6%,#ede8e8)); - background: -webkit-linear-gradient(top, #ffffff 0%,#ede8e8 6%); - background: -o-linear-gradient(top, #ffffff 0%,#ede8e8 6%); - background: -ms-linear-gradient(top, #ffffff 0%,#ede8e8 6%); - background: linear-gradient(to bottom, #ffffff 0%,#ede8e8 6%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ede8e8',GradientType=0 ); -} - -.project-view #navigation { - background: #6D747D; -} - -#navigation ul { - height: 700px; - padding-top: 29px; -} - -.project-view #navigation ul { - border-right: 1px solid #464C53; - background: #6D747D; -} - -#navigation ul li { - height: 42px; - cursor: pointer; - border-bottom: 1px solid #D2D2D2; -} - -.project-view #navigation ul li { - background-image: url(../images/bg-nav-item-project-view.png); - background-position: 0px 0px; - border: none; -} - -.project-view #navigation ul li span { - color: #FFFFFF; - /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; -} - -#navigation ul li:hover, -#navigation ul li.active { - width: 230px; - background: #2C5D7B; - /*+box-shadow:inset 0px 0px 7px #000000;*/ - -moz-box-shadow: inset 0px 0px 7px #000000; - -webkit-box-shadow: inset 0px 0px 7px #000000; - -o-box-shadow: inset 0px 0px 7px #000000; - box-shadow: inset 0px 0px 7px #000000; -} - -#navigation ul li.disabled { - /*+opacity:60%;*/ - filter: alpha(opacity=60); - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); - -moz-opacity: 0.6; - opacity: 0.6; -} - -.project-view #navigation ul li:hover, -.project-view #navigation ul li.active { - background: url(../images/bg-nav-item-active-project-view.png); - background-position: 0px 0px; - width: 230px; -} - -.project-view #navigation ul li.disabled:hover { - background: #D5D5D5; - color: #596D7F; - cursor: default; -} - -#navigation ul li:hover span, -#navigation ul li.active span { - color: #FFFFFF; - /*+text-shadow:0px 1px #000000;*/ - -moz-text-shadow: 0px 1px #000000; - -webkit-text-shadow: 0px 1px #000000; - -o-text-shadow: 0px 1px #000000; - text-shadow: 0px 1px #000000; -} - -#navigation ul li.disabled:hover { - cursor: not-allowed !important; -} - -#navigation ul li.disabled:hover span { - color: #596D7F; - /*+text-shadow:0px 0px;*/ - -moz-text-shadow: 0px 0px; - -webkit-text-shadow: 0px 0px; - -o-text-shadow: 0px 0px; - text-shadow: 0px 0px; - -moz-text-shadow: 0px 0px none; - -webkit-text-shadow: 0px 0px none; - -o-text-shadow: 0px 0px none; - -moz-text-shadow: none; - -webkit-text-shadow: none; - -o-text-shadow: none; -} - -#navigation ul li.last { - background-repeat: repeat; - background-position: 0px 0px; - /*[empty]color:;*/ -} - -#navigation ul li span { - /*+placement:shift 14px 13px;*/ - position: relative; - left: 14px; - top: 13px; - font-size: 12px; - color: #515151; - padding-left: 19px; - /*+text-shadow:0px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px #FFFFFF; - -o-text-shadow: 0px 1px #FFFFFF; - text-shadow: 0px 1px #FFFFFF; -} - -#navigation ul li span.icon { - background: url(../images/icons.png) no-repeat 0px 0px; - padding: 16px 16px 13px; - /*+placement:shift 17px 10px;*/ - position: relative; - left: 17px; - top: 10px; -} - -#navigation ul li.custom-icon span.icon { - display: block; - width: 50px; - height: 50px; - position: relative; - float: left; - margin-right: -47px; - background: none; -} - -#navigation ul li.custom-icon span.icon img { - width: 50px; - height: 50px; - float: left; - /*+placement:shift -6px -17px;*/ - position: relative; - left: -6px; - top: -17px; - position: absolute; - margin-right: -14px; -} - -/*Navigation icons*/ -#navigation ul li.dashboard span.icon, -#navigation ul li.dashboard-user span.icon { - background-position: -14px -18px; -} - -#navigation ul li.dashboard:hover span.icon, -#navigation ul li.dashboard-user:hover span.icon span.icon, -#navigation ul li.dashboard.active span.icon, -#navigation ul li.dashboard-user.active span.icon span.icon { - background-position: -23px -687px; -} - -#navigation ul li.instances span.icon { - background-position: -73px -18px; -} - -#navigation ul li.instances.active span.icon, -#navigation ul li.instances:hover span.icon { - background-position: -82px -686px; -} - -#navigation ul li.vmsnapshots span.icon { - background: url(../images/sprites.png) no-repeat -34px -666px; -} - -#navigation ul li.affinityGroups span.icon { - background-position: -73px -87px; -} - -#navigation ul li.affinityGroups.active span.icon, -#navigation ul li.affinityGroups:hover span.icon { - background-position: -82px -755px; -} - -#navigation ul li.storage span.icon { - background-position: -127px -19px; -} - -#navigation ul li.storage.active span.icon, -#navigation ul li.storage:hover span.icon { - background-position: -137px -687px; -} - -#navigation ul li.network span.icon { - background-position: -180px -20px; -} - -#navigation ul li.network.active span.icon, -#navigation ul li.network:hover span.icon { - background-position: -189px -690px; -} - -#navigation ul li.templates span.icon { - background-position: -233px -21px; -} - -#navigation ul li.templates.active span.icon, -#navigation ul li.templates:hover span.icon { - background-position: -242px -690px; -} - -#navigation ul li.projects span.icon { - background-position: -294px -21px; -} - -#navigation ul li.projects.active span.icon, -#navigation ul li.projects:hover span.icon { - background-position: -303px -690px; -} - -#navigation ul li.events span.icon { - background-position: -351px -23px; -} - -#navigation ul li.events.active span.icon, -#navigation ul li.events:hover span.icon { - background-position: -359px -692px; -} - -#navigation ul li.configuration span.icon { - background-position: -401px -21px; -} - -#navigation ul li.configuration.active span.icon, -#navigation ul li.configuration:hover span.icon { - background-position: -410px -690px; -} - -#navigation ul li.global-settings span.icon { - background-image: url(../images/sprites.png); - background-position: -143px -240px; -} - -#navigation ul li.global-settings.active span.icon, -#navigation ul li.global-settings:hover span.icon { - background-image: url(../images/sprites.png); - background-position: -366px -239px; -} - -#navigation ul li.roles span.icon { - background-position: -460px -80px; -} - -#navigation ul li.roles.active span.icon, -#navigation ul li.roles:hover span.icon { - background-position: -469px -750px; -} - -#navigation ul li.accounts span.icon { - background-position: -458px -19px; -} - -#navigation ul li.accounts.active span.icon, -#navigation ul li.accounts:hover span.icon { - background-position: -467px -688px; -} - -#navigation ul li.system span.icon { - background-position: -569px -24px; -} - -#navigation ul li.system.active span.icon, -#navigation ul li.system:hover span.icon { - background-position: -578px -692px; -} - -#navigation ul li.domains span.icon { - background-position: -520px -21px; -} - -#navigation ul li.domains.active span.icon, -#navigation ul li.domains:hover span.icon { - background-position: -529px -690px; -} - -#navigation ul li.plugins span.icon { - background: url(../images/sprites.png) no-repeat -140px -291px; -} - -#navigation ul li.regions span.icon { - background: url(../images/sprites.png) no-repeat -141px -379px; -} - -#navigation ul li.regions.active span.icon, -#navigation ul li.regions:hover span.icon { - background: url(../images/sprites.png) no-repeat -365px -377px; -} - -/*Browser*/ -#browser { - width: 994px; - height: 100%; - max-width: 994px; - position: relative; - float: left; - overflow: hidden; -} - -#browser.panel-highlight { - overflow: visible; -} - -#browser div.panel { - height: 100%; - border-right: 1px solid #A5A5A5; - overflow: visible; - background-color: #F7F7F7; -} - -#browser div.panel.panel-highlight-wrapper { - display: inline-block; - background: none; - /*+border-radius:9px;*/ - -moz-border-radius: 9px; - -webkit-border-radius: 9px; - -khtml-border-radius: 9px; - border-radius: 9px; - margin-top: 7px; - /*+box-shadow:0px 0px 12px #000000;*/ - -moz-box-shadow: 0px 0px 12px #000000; - -webkit-box-shadow: 0px 0px 12px #000000; - -o-box-shadow: 0px 0px 12px #000000; - box-shadow: 0px 0px 12px #000000; - border: 3px solid #FFFFFF; - height: 542px; - overflow: hidden; - position: absolute; - z-index: 10000; - padding: 78px 0px 67px 51px; -} - -#browser div.panel.panel-highlight-wrapper .panel { - left: 20px !important; - height: 631px; - overflow: hidden; - top: 3px; -} - -.project-view #browser div.panel { - background: #6D747D; -} - -.ui-tabs div.ui-tabs-panel { - position: relative; -} - -.project-view .ui-tabs div.ui-tabs-panel { - background: #DBDDDF; -} - -#browser div.panel .shadow { - width: 10px; - height: 100%; - top: 0px; - left: -10px; - position: absolute; - background: url(../images/bg-panel-shadow.png) repeat-y 0px 0px; -} - -#browser.panel-highlight { - overflow: visible; -} - -#browser.panel-highlight .panel.highlighted { - /*+box-shadow:0px 10px 11px #5C5C5C;*/ - -moz-box-shadow: 0px 10px 11px #5C5C5C; - -webkit-box-shadow: 0px 10px 11px #5C5C5C; - -o-box-shadow: 0px 10px 11px #5C5C5C; - box-shadow: 0px 10px 11px #5C5C5C; - border: 5px solid #FFFFFF; - /*+border-radius:6px;*/ - -moz-border-radius: 6px; - -webkit-border-radius: 6px; - -khtml-border-radius: 6px; - border-radius: 6px; - margin-top: 21px; -} - -#browser.panel-highlight .panel > .shadow { - display: none; -} - -#browser .highlight-arrow { - width: 24px; - height: 19px; - background: url(../images/sprites.png) -590px -1295px; - position: absolute; - top: -22px; - left: 80px; -} - -/*Toolbar*/ -/*[clearfix]*/div.toolbar { - width: 100%; - height: 32px; - /*+box-shadow:0px 1px 4px #CFCFCF;*/ - -moz-box-shadow: 0px 1px 4px #CFCFCF; - -webkit-box-shadow: 0px 1px 4px #CFCFCF; - -o-box-shadow: 0px 1px 4px #CFCFCF; - box-shadow: 0px 1px 4px #CFCFCF; - /*+placement:shift 0px -1px;*/ - position: relative; - left: 0px; - top: -1px; - z-index: 6; - position: absolute; - top: 0px; - background: #ECECEC 0px -6px; -} - -.detail-view .ui-tabs-panel div.toolbar { - width: 968px; - background: transparent; - border: none; - margin-top: 8px; -} - -.project-view div.toolbar { - background: #808080 url(../images/bg-nav-item-active-project-view.png) 0px -210px; -} - -div.toolbar div.filters { - margin: 5px 0px 0 12px; -} - -div.toolbar div.filters label { - color: #3F3B3B; - font-size: 12px; - font-weight: 100; - display: block; - float: left; - padding: 5px 11px 0 0; -} - -.project-view div.toolbar div.filters label { - color: #FFFFFF; - /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; -} - -div.toolbar div.filters select { - width: 142px; - border: 1px solid #808080; -} - -div.toolbar div.text-search { - float: right; - position: relative; -} - -div.toolbar div.text-search div.search-bar { - float: left; - width: 141px; - height: 20px; - margin: 5px 0 0 12px; - background: #FFFFFF; - border: 1px solid #8B7E7E; - z-index: 4; - position: relative; - border-right: 1px solid #8B8989; - /*+border-radius:4px 0 0 4px;*/ - -moz-border-radius: 4px 0 0 4px; - -webkit-border-radius: 4px 0 0 4px; - -khtml-border-radius: 4px 0 0 4px; - border-radius: 4px 0 0 4px; -} - -div.toolbar div.text-search div.search-bar input { - float: left; - border: none; - margin: 1px 0 0; - width: 90%; - height: 68%; -} - -div.toolbar div.text-search div.search-bar div.filter { - background: #FFFFFF; - width: 74px; - height: 15px; - float: left; - font-size: 12px; - text-align: center; - border-left: 1px solid #6D6D6D; - margin: 2px 0 0px; - padding: 1px; -} - -div.toolbar div.button.search { - background: url(../images/sprites.png) no-repeat -592px -328px; - width: 33px; - height: 22px; - /*+placement:shift -10px 5px;*/ - position: relative; - left: -10px; - top: 5px; - z-index: 3; - cursor: pointer; -} - -div.toolbar div.button.search:hover { - background-position: -592px -359px; -} - -div.toolbar div.button.add, -div.toolbar div.button.refresh, -div.toolbar div.button.add, -div.toolbar div.button.main-action, -.toolbar div.button.header-action, -.detail-group .button.add { - /*+placement:shift 0px 5px;*/ - position: relative; - left: 0px; - top: 5px; - background: #EAEAEA; - font-size: 12px; - font-weight: 100; - color: #000000; - margin: 0 10px 0 0; - cursor: pointer; - /*+text-shadow:0px 1px 1px #DEE5EA;*/ - -moz-text-shadow: 0px 1px 1px #DEE5EA; - -webkit-text-shadow: 0px 1px 1px #DEE5EA; - -o-text-shadow: 0px 1px 1px #DEE5EA; - text-shadow: 0px 1px 1px #DEE5EA; - padding: 5px 5px 5px 5px; - background: #F7F7F7; - background: rgb(247, 247, 247); - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYWVhZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); - background: -moz-linear-gradient(top, rgba(247,247,247,1) 1%, rgba(234,234,234,1) 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(247,247,247,1)), color-stop(100%,rgba(234,234,234,1))); - background: -webkit-linear-gradient(top, rgba(247,247,247,1) 1%,rgba(234,234,234,1) 100%); - background: -o-linear-gradient(top, rgba(247,247,247,1) 1%,rgba(234,234,234,1) 100%); - background: -ms-linear-gradient(top, rgba(247,247,247,1) 1%,rgba(234,234,234,1) 100%); - background: linear-gradient(to bottom, rgba(247,247,247,1) 1%,rgba(234,234,234,1) 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#eaeaea',GradientType=0 ); - border: 1px solid #B7B7B7; - float: right; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - height: 12px; -} - -div.toolbar div.button.export:hover, -div.toolbar div.button.add:hover, -div.toolbar div.button.refresh:hover, -div.toolbar div.button.main-action:hover, -.toolbar div.button.header-action:hover, -.detail-group .button.add:hover { - background: #E5E5E5; - /*+box-shadow:inset 0px 0px 5px #C3C3C3;*/ - -moz-box-shadow: inset 0px 0px 5px #C3C3C3; - -webkit-box-shadow: inset 0px 0px 5px #C3C3C3; - -o-box-shadow: inset 0px 0px 5px #C3C3C3; - box-shadow: inset 0px 0px 5px #C3C3C3; -} - -div.toolbar div.button.main-action span.icon { - background-image: url(../images/sprites.png); - display: block; - cursor: pointer; - width: 34px; - height: 20px; - float: left; - /*+placement:shift 0px -7px;*/ - position: relative; - left: 0px; - top: -7px; -} - -div.toolbar div.button.refresh { - float: right; - margin: 0 20px 0 0; -} - -div.toolbar div.button.refresh span { - background-image: url(../images/icons.png); - padding: 1px 1px 1px 16px; - background-position: -629px -232px; - background-repeat: no-repeat; -} - -div.toolbar div.button.add span, -.detail-group .button.add span.icon { - padding: 0px 0 3px 18px; - background: url(../images/icons.png) no-repeat -626px -209px; - /*+placement:shift 0px 0px;*/ - position: relative; - left: 0px; - top: 0px; -} - -#browser div.panel.selected div.toolbar { - border-right: 1px solid #43586B; -} - -/*** Advanced search*/ -#advanced_search { - width: 15px; - position: absolute; - left: 139px; - top: 4px; - z-index: 4; - background: none; -} - -#advanced_search .icon { - /*+opacity:56%;*/ - filter: alpha(opacity=56); - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=56); - -moz-opacity: 0.56; - opacity: 0.56; - background: url(../images/sprites.png) no-repeat -62px -162px; - padding: 10px; - position: absolute; - top: 1px; - left: -1px; - z-index: 10; -} - -#advanced_search:hover .icon { - /*+opacity:100%;*/ - filter: alpha(opacity=100); - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); - -moz-opacity: 1; - opacity: 1; -} - -#advanced_search .form-container { - /*+opacity:91%;*/ - filter: alpha(opacity=91); - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=91); - -moz-opacity: 0.91; - opacity: 0.91; - /*+box-shadow:0px 5px 9px #B6B0B0;*/ - -moz-box-shadow: 0px 5px 9px #B6B0B0; - -webkit-box-shadow: 0px 5px 9px #B6B0B0; - -o-box-shadow: 0px 5px 9px #B6B0B0; - box-shadow: 0px 5px 9px #B6B0B0; - border: 1px solid #808080; - /*+border-radius:0 0 4px 4px;*/ - -moz-border-radius: 0 0 4px 4px; - -webkit-border-radius: 0 0 4px 4px; - -khtml-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; - left: -290px; - top: 2px; - position: absolute; - display: inline-block; - background: #FFFFFF; - padding: 18px; - cursor: default; -} - -#advanced_search .form-container .name { - width: 66px; - float: left; -} - -#advanced_search .form-container .value { - width: 186px; - float: left; -} - -#advanced_search .form-container .form-item { - width: 268px; - height: 40px; - margin-bottom: 15px; -} - -#advanced_search .form-container .form-item input, -#advanced_search .form-container .form-item select { - width: 97%; - padding: 3px; -} - -#advanced_search input[type=submit] { - float: right; - background: url(../images/bg-gradients.png) 0px -220px; - /*+box-shadow:0px 2px 5px #858585;*/ - -moz-box-shadow: 0px 2px 5px #858585; - -webkit-box-shadow: 0px 2px 5px #858585; - -o-box-shadow: 0px 2px 5px #858585; - box-shadow: 0px 2px 5px #858585; - border: 1px solid #606060; - border-top: none; - color: #FFFFFF; - font-size: 12px; - font-weight: bold; - /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - cursor: pointer; - padding: 8px 20px; -} - -#advanced_search input[type=submit]:hover { - /*+box-shadow:inset 0px 2px 3px #000000;*/ - -moz-box-shadow: inset 0px 2px 3px #000000; - -webkit-box-shadow: inset 0px 2px 3px #000000; - -o-box-shadow: inset 0px 2px 3px #000000; - box-shadow: inset 0px 2px 3px #000000; -} - -#advanced_search .button.cancel { - background: url(noen); - color: #9A9A9A; - font-size: 12px; - float: right; - /*+placement:shift -32px 13px;*/ - position: relative; - left: -32px; - top: 13px; - font-weight: bold; -} - -#advanced_search .button.cancel:hover { - color: #494949; -} - -/*** Panel controls*/ -#browser div.panel div.toolbar div.panel-controls { - float: right; - width: 42px; - height: 23px; - display: none; -} - -#browser div.panel.reduced div.toolbar div.panel-controls { - display: block; - float: left; - width: 194px; -} - -#browser div.panel.maximized div.toolbar div.panel-controls { - display: block; -} - -#browser div.panel div.toolbar div.panel-controls div.control { - width: 25px; - height: 26px; - background: url(../images/buttons.png) no-repeat -599px -335px; - float: right; - cursor: pointer; - margin-right: 6px; -} - -#browser div.panel.maximized.single div.toolbar div.panel-controls div.control { - display: none; -} - -#browser div.panel div.toolbar div.panel-controls div.control:hover { - background-position: -593px -309px; -} - -#browser div.panel.maximized div.toolbar div.panel-controls div.control { - background-position: -621px -334px; -} - -#browser div.panel.maximized div.toolbar div.panel-controls div.control:hover { - background-position: -617px -308px; -} - -/*** Section switcher*/ -div.panel div.toolbar div.section-switcher { - margin-top: 6px; - margin-left: 10px; - float: left; -} - -#browser div.panel.maximize-if-selected.selected div.toolbar div.panel-controls div.control { - display: none; -} - -div.toolbar div.section-switcher div.section-select { - float: right; - font-size: 12px; - font-weight: 100; -} - -div.toolbar div.section-switcher div.section { - float: left; - font-size: 11px; - font-weight: bold; - /*+border-radius:10px;*/ - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - -khtml-border-radius: 10px; - border-radius: 10px; - border-radius: 10px 10px 10px 10px; - /*+text-shadow:0px 1px 1px #EDEDED;*/ - -moz-text-shadow: 0px 1px 1px #EDEDED; - -webkit-text-shadow: 0px 1px 1px #EDEDED; - -o-text-shadow: 0px 1px 1px #EDEDED; - text-shadow: 0px 1px 1px #EDEDED; -} - -div.toolbar div.section-switcher div.section a { - background: url(../images/bg-section-switcher.png) repeat-x 0px -22px; - text-decoration: none; - display: block; - color: #516374; - padding: 5px 10px 3px; - border: 1px solid #979FA4; -} - -div.toolbar div.section-switcher div.section a.active { - background: url(../images/bg-section-switcher.png) repeat-x 0px -21px; - background-position: 0px 0px; - border: none; - border-bottom: 1px solid #CCD1D4; - padding-bottom: 2px; - padding-top: 6px; - /*+box-shadow:inset 0px 1px 5px #546874;*/ - -moz-box-shadow: inset 0px 1px 5px #546874; - -webkit-box-shadow: inset 0px 1px 5px #546874; - -o-box-shadow: inset 0px 1px 5px #546874; - box-shadow: inset 0px 1px 5px #546874; -} - -div.toolbar div.section-switcher div.section.first a { - /*+border-radius:4px 0 0 5px;*/ - -moz-border-radius: 4px 0 0 5px; - -webkit-border-radius: 4px 0 0 5px; - -khtml-border-radius: 4px 0 0 5px; - border-radius: 4px 0 0 5px; -} - -div.toolbar div.section-switcher div.section.last a { - /*+border-radius:0 4px 4px 0px;*/ - -moz-border-radius: 0 4px 4px 0px; - -webkit-border-radius: 0 4px 4px 0px; - -khtml-border-radius: 0 4px 4px 0px; - border-radius: 0 4px 4px 0px; -} - -div.toolbar div.section-switcher div.section.first.last a { - /*+border-radius:5px;*/ - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - -khtml-border-radius: 5px; - border-radius: 5px; - border-radius: 5px 5px 5px 5px; -} - -div.toolbar div.section-switcher div.section-select { - float: left; - height: 26px; -} - -.project-view div.toolbar div.section-switcher div.section-select { - background: transparent; -} - -div.toolbar div.section-switcher div.section-select select { - height: 21px; - margin-right: 13px; - font-size: 12px; - border: 1px solid #808080; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; -} - -div.toolbar div.section-switcher div.section-select label { - margin: 0 9px 0 0; -} - -.project-view div.list-view div.toolbar div.section-switcher div.section-select label { - color: #FFFFFF; - /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; -} - -/*Breadcrumbs*/ -div.toolbar div.filters { - margin: 5px 0px 0 12px; - width: 200px; - float: left; -} - -div.toolbar div.filters select { - width: 104px; - height: 21px; - font-size: 12px; - border: 1px solid #808080; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - padding: 0px 0 0; - margin: 1px 0 0; -} - -#breadcrumbs { - height: 29px; - max-height: 29px; - background: #FFFFFF; - overflow: hidden; - width: 100%; -} - -.project-view #breadcrumbs { - background-image: url(../images/bg-breadcrumbs-project-view.png); - background-position: 0px 1px; - background-color: #828282; -} - -#breadcrumbs div.home { - width: auto; - height: 23px; - float: left; - /*+placement:shift -1px 0px;*/ - position: relative; - left: -1px; - top: 0px; - cursor: pointer; - z-index: 5; -} - -.project-view #breadcrumbs div.home { - background-position: -63px -98px; -} - -.project-view #breadcrumbs div.end { - background-position: -89px -98px; -} - -#breadcrumbs ul li, -#breadcrumbs div.active-project, -#breadcrumbs .home { - height: 21px; - float: left; - font-size: 13px; - color: #FFFFFF; - padding: 9px 5px 0px 0px; - cursor: pointer; - /*+placement:shift -13px 0px;*/ - position: relative; - left: -13px; - top: 0px; - position: relative; - margin: 0 0 0 2px; -} - -#breadcrumbs ul li:after, -#breadcrumbs .home:after { - content: ">"; - font-size: 11px; - /*+placement:shift 7px -1px;*/ - position: relative; - left: 7px; - top: -1px; - color: #C4C4C4; -} - -.project-view #breadcrumbs ul li { - color: #FFFFFF !important; -} - -#breadcrumbs ul li, -#breadcrumbs div.active-project, -#breadcrumbs .home { - /*+placement:shift 0px 0px;*/ - position: relative; - left: 0px; - top: 0px; - color: #63A9F1; - padding: 9px 5px 0px 8px; -} - -#breadcrumbs ul li:hover, -#breadcrumbs ul li.active, -#breadcrumbs ul li.maximized { - color: #000000; -} - -/*NOTE: End divs are not displayed per UI changes*/ -#breadcrumbs ul div.end { - /*+placement:shift -37px -1px;*/ - position: relative; - left: -37px; - top: -1px; - margin-right: 0px; - /*Disabled*/ - display: none; -} - -#breadcrumbs ul li { - position: relative; - /*+placement:shift -36px 0px;*/ - top: 0px; - font-size: 13px; -} - -#breadcrumbs div.active-project { - z-index: 2; - text-indent: 9px; - display: none; -} - -/*Group View*/ -div.panel div.view.group-thumbnail ul.groups li { - float: left; - width: 142px; - height: 80px; - background: url(../images/buttons.png) no-repeat -1px -399px; - margin: 16px -1px -5px 16px; - cursor: pointer; - position: relative; -} - -div.panel div.view.group-thumbnail ul.groups li.active { - background-position: -1px -489px; -} - -div.panel div.view.group-thumbnail ul.groups li.drop-hover { - background-position: -1px -310px !important; -} - -div.panel div.view.group-thumbnail ul.groups li.new { - background-position: -147px -401px; -} - -div.panel div.view.group-thumbnail ul.groups li.new.drop-hover { - background-position: -148px -312px !important; -} - -div.panel div.view.group-thumbnail ul.groups li span.name { - font-size: 12px; - color: #49596B; - /*+placement:shift 9px 7px;*/ - position: relative; - left: 9px; - top: 7px; - font-weight: bold; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - position: absolute; -} - -div.panel div.view.group-thumbnail ul.groups li span.vm-count { - font-size: 21px; - /*+placement:displace 54px 27px;*/ - position: absolute; - margin-left: 54px; - margin-top: 27px; - position: absolute; - color: #3A4857; -} - -/*Reduced view*/ -#browser div.panel.reduced .reduced-hide { - color: #BBB8B8; -} - -#browser div.panel.reduced div.toolbar .reduced-hide { - display: none; -} - -/*List view -- edit field*/ -div.view table td.editable div.edit { - width: 106%; - height: 20px; - /*+placement:shift 6px 0px;*/ - position: relative; - left: 6px; - top: 0px; -} - -div.view table td.truncated.editable div.edit { - top: 1px; - width: 285px; - left: 1px; -} - -div.view table td.editable div.edit input { - float: left; - width: 66%; - height: 17px; - border: none; - position: relative; - z-index: 1; -} - -.detail-view div.view table td.editable div.edit { - width: 116px; -} - -div.view table td.editable div.action { - float: left; - width: 16px; - height: 19px; - background: #FFFFFF url(../images/buttons.png) -614px -684px; - padding-left: 2px; - /*+placement:shift -2px 0px;*/ - position: relative; - left: -2px; - top: 0px; - cursor: pointer; -} - -div.view table td.editable div.action.save { - margin-left: 2px; -} - -div.view table td.editable div.action.cancel { - background-position: -628px -684px; -} - -/*** Actions*/ -table td.actions { - cursor: default; - /*Make fixed*/ - width: 200px; - min-width: 200px; - max-width: 200px; -} - -table td.actions span { - margin: 0 0 0 2px !important; -} - -table td.actions .action span.icon { - background-image: url(../images/sprites.png); - cursor: pointer; - width: 23px; - height: 21px; - float: left; -} - -table td.actions .action.disabled .icon { - cursor: not-allowed; - /*+opacity:20%;*/ - filter: alpha(opacity=20); - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); - -moz-opacity: 0.2; - opacity: 0.2; -} - -table tr.odd td.actions .action.disabled .icon { - background-color: #F2F0F0; -} - -table tr.even td.actions .action.disabled .icon { - background-color: #DFE1E3; -} - -table tr td.actions .action.text { - cursor: pointer; - display: inline-block; - border: 1px solid #C2C2C2; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - background: url(../images/bg-gradients.png) repeat-x 0px -83px; -} - -table tr td.actions .action.text:hover { - /*+box-shadow:inset 0px 1px 3px #171717;*/ - -moz-box-shadow: inset 0px 1px 3px #171717; - -webkit-box-shadow: inset 0px 1px 3px #171717; - -o-box-shadow: inset 0px 1px 3px #171717; - box-shadow: inset 0px 1px 3px #171717; -} - -table tr td.actions .action.text .label { - padding: 4px 0 0 4px; -} - -table tr td.actions .action.text .icon { - padding-bottom: 4px; -} - -table tr.selected td.actions .action.disabled .icon { - background-color: #CBDDF3; -} - -/*** Action icons -Dialogs*/ -.ui-dialog { - background: #FFFFFF; - text-align: left; - /*+box-shadow:0px -4px 15px #4C4A4A;*/ - -moz-box-shadow: 0px -4px 15px #4C4A4A; - -webkit-box-shadow: 0px -4px 15px #4C4A4A; - -o-box-shadow: 0px -4px 15px #4C4A4A; - box-shadow: 0px -4px 15px #4C4A4A; - position: absolute; - padding: 15px; -} - -.ui-dialog.ui-corner-all { - border-radius: 0; -} - -.ui-dialog .ui-widget-content { - padding: 8px 0 8px 8px; - text-align: center; - display: inline-block; -} - -.ui-dialog .ui-widget-content .nothing-to-select { - width: 386px; - line-height: 21px; - text-align: left; - font-size: 16px; - color: #3D3D3D; - padding: 4px 25px 180px 28px; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - background: #FFFFFF; - margin: 57px 0 0; - /*+border-radius:10px;*/ - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - -khtml-border-radius: 10px; - border-radius: 10px; - border-radius: 10px 10px 10px 10px; -} - -.ui-dialog .ui-widget-content .nothing-to-select p { - margin: 18px 0 0; -} - -.ui-dialog .ui-widget-content .nothing-to-select .specify-ip { - margin-top: 28px; - padding-top: 21px; - font-size: 12px; - border-top: 1px solid #DFDFDF; -} - -.ui-dialog-buttonset { - width: 285px; - margin: 0; -} - -.ui-dialog .ui-button { - display: block; - cursor: pointer; - float: left; - width: 110px; - height: 31px; - border: none; - background: url(../images/gradients.png) -2px -481px; - border: 1px solid #BFBCBC; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; -} - -.ui-dialog .ui-button:hover { - background-position: -4px -426px; -} - -.ui-dialog.notice .close.ui-button { - background: transparent; - display: inline; - padding: 0; - float: right; - color: #516374; - /*+text-shadow:0px -1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px -1px 1px #FFFFFF; - -webkit-text-shadow: 0px -1px 1px #FFFFFF; - -o-text-shadow: 0px -1px 1px #FFFFFF; - text-shadow: 0px -1px 1px #FFFFFF; -} - -.ui-dialog .ui-button.ok { - background-position: 0px -317px; - border: 1px solid #0065C5; - color: #FFFFFF; - /*+text-shadow:0px -1px 1px #011238;*/ - -moz-text-shadow: 0px -1px 1px #011238; - -webkit-text-shadow: 0px -1px 1px #011238; - -o-text-shadow: 0px -1px 1px #011238; - text-shadow: 0px -1px 1px #011238; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; -} - -.ui-dialog .ui-button.ok:hover { - background-position: -3px -368px; - border: 1px solid #004FF7; -} - -.ui-dialog.confirm .ui-button { - margin-top: 0px; - margin-left: 11px; -} - -.ui-dialog.confirm .ui-button.cancel { - margin-left: 50px; -} - -.ui-dialog span.message { - display: block; - text-align: center; - color: #445361; - font-size: 14px; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - padding-bottom: 40px; -} - -.ui-dialog span.message ul { - margin-left: 30px; - margin-top: 14px; - text-align: left; - list-style: disc; -} - -.ui-dialog span.message ul li { - margin-top: 3px; -} - -.ui-dialog span.message p { - text-align: left; - margin-top: 20px; -} - -.ui-dialog-titlebar { - background: #FFFFFF; - color: #000000; - height: 33px; - /*+border-radius:7px 7px 0 0;*/ - -moz-border-radius: 7px 7px 0 0; - -webkit-border-radius: 7px 7px 0 0; - -khtml-border-radius: 7px 7px 0 0; - border-radius: 7px 7px 0 0; - margin: auto; -} - -.ui-dialog-titlebar.ui-widget-header { - border: none; - font-weight: inherit; -} - -.ui-dialog-titlebar .ui-icon-closethick { - display: none; -} - -.ui-dialog-title { - /*+placement:shift 8px 9px;*/ - position: relative; - left: 8px; - top: 9px; - font-size: 14px; - padding: 2px 0 5px 30px; - background: url(../images/icons.png) no-repeat 0px -255px; -} - -.notice .ui-dialog-title { - background-position: 0px -288px; -} - -.ui-dialog.confirm .ui-dialog-title { - background: url(../images/icons.png) no-repeat 0px -224px; -} - -.ui-dialog.create-form .ui-dialog-title { - background: url(../images/icons.png) no-repeat 0px -255px; -} - -.ui-dialog.warning .ui-dialog-title { - background: url(../images/icons.png) no-repeat 0px -286px; -} - -.ui-dialog.confirm .ui-button { - /*+placement:shift 0px -8px;*/ - position: relative; - left: 0px; - top: -8px; -} - -/*** Create form*/ -.ui-dialog div.form-container { - width: 94% !important; - height: 106px; - text-align: left; - display: inline-block; -} - -.ui-dialog div.form-container span.message { - text-align: left; - padding: 0 0 23px 5px; - font-size: 15px; -} - -.ui-dialog div.form-container span.message br { - margin-bottom: 13px; -} - -.ui-dialog div.form-container div.form-item { - width: 100%; - display: inline-block; - margin: 0 0 12px; -} - -.ui-dialog div.form-container div.name { - float: left; - clear: both; - width: 115px; - font-size: 15px; - color: #485867; - /*+text-shadow:0px 2px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 2px 1px #FFFFFF; - -webkit-text-shadow: 0px 2px 1px #FFFFFF; - -o-text-shadow: 0px 2px 1px #FFFFFF; - text-shadow: 0px 2px 1px #FFFFFF; - margin: 3px 0 0; -} - -.ui-dialog div.form-container div.name label { - display: block; - width: 119px; - text-align: right; - font-size: 13px; - margin-top: 2px; -} - -.field-required { - color: #EE7B7B; - font-size: 14px; - padding: 0 3px 0 0; - font-weight: bold; -} - -.ui-dialog div.form-container div.value { - width: 61%; - float: left; - margin: 0 0 0 15px; - display: inline-block; -} - -.ui-dialog div.form-container div.value input, -textarea { - width: 98%; - font-size: 14px; - padding: 4px; - background: #F6F6F6; - border: 1px solid #AFAFAF; - float: left; -} - -.ui-dialog div.form-container div.value label { - display: block; - width: 119px; - text-align: left; - font-size: 13px; - margin-top: 2px; - margin-left: -10px; -} - -.ui-dialog div.form-container div.value input.hasDatepicker { - color: #2F5D86; - cursor: pointer; - font-size: 13px; - text-indent: 3px; -} - -.ui-dialog div.form-container div.value input.hasDatepicker:hover { - /*+box-shadow:inset 0px 0px 3px;*/ - -moz-box-shadow: inset 0px 0px 3px; - -webkit-box-shadow: inset 0px 0px 3px; - -o-box-shadow: inset 0px 0px 3px; - box-shadow: inset 0px 0px 3px; -} - -.ui-dialog div.form-container div.value .range-edit { - width: 249px; - height: 33px; - margin: 2px 0 0; -} - -.ui-dialog div.form-container div.value .range-edit .range-item { - width: 124px; - height: 32px; - position: relative; - float: left; -} - -.ui-dialog div.form-container div.value .range-edit input { - width: 105px; - margin: 0 9px 0 0; -} - -.ui-dialog div.form-container div.value .range-edit label.error { - position: absolute; - left: 3px; - top: 25px; -} - -.ui-dialog div.form-container div.value select { - width: 100%; - float: right; -} - -.ui-dialog div.form-container div.value input[type=checkbox] { - width: 14px; -} - -.ui-dialog div.form-container div.value label.error { - display: block; - clear: both; - font-size: 10px; - color: #FA0000; - display: none; -} - -.ui-dialog div.form-container div.multi-array { - display: inline-block; - background: #FFFFFF; - padding: 4px; - /*+border-radius:10px;*/ - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - -khtml-border-radius: 10px; - border-radius: 10px; - border-radius: 10px 10px 10px 10px; - border: 1px solid #808080; - /*+box-shadow:inset 0px 1px 1px #929292;*/ - -moz-box-shadow: inset 0px 1px 1px #929292; - -webkit-box-shadow: inset 0px 1px 1px #929292; - -o-box-shadow: inset 0px 1px 1px #929292; - box-shadow: inset 0px 1px 1px #929292; -} - -.ui-dialog div.form-container div.multi-array .item { - width: 111px; - float: left; - margin: 0 0 13px; -} - -.ui-dialog div.form-container div.multi-array .item .name { - font-size: 11px; - width: 61px; - float: left; -} - -.ui-dialog div.form-container div.multi-array .item .value { - width: 13px; - float: left; -} - -.ui-dialog div.form-container div.multi-array .item .value input { - float: left; - margin: 0; - padding: 0; -} - -.ui-dialog.create-form .ui-dialog-buttonpane { - margin-left: 25px; -} - -.ui-dialog.create-form .ui-button.ok { - margin-left: 0; - float: right; -} - -.ui-dialog.create-form .ui-button.cancel { - background: #B6B6B6 url(../images/gradients.png) 0px -480px; - float: right; - margin-right: 13px; - border: 1px solid #AAAAAA; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; -} - -.ui-dialog.create-form .ui-button.cancel:hover { - background-position: -4px -426px; - border-color: #878787; -} - -/**** Dynamic input*/ -.ui-dialog div.form-container div.value .dynamic-input { - background: #FFFFFF; - width: calc(100% + 4px); - min-height: 50px; - clear: both; - max-height: 211px; - overflow: auto; - overflow-x: hidden; - border: 1px solid #CDCDCD; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; -} - -.ui-dialog div.form-container div.value .dynamic-input .form-item { - width: 97%; - margin: 4px 0 0 5px; -} - -.ui-dialog div.form-container div.value .dynamic-input .name { - width: 99px; -} - -.ui-dialog div.form-container div.value .dynamic-input .name label { - width: inherit; - font-size: 12px; - margin-left: 0; -} - -.ui-dialog div.form-container div.value .dynamic-input .value { - width: 40%; -} - -/*User options*/ -#user-options { - background: #FFFFFF; - z-index: 10000; - width: 150px; - position: absolute; - padding: 15px; - top: 30px; - /*+border-radius:0 0 3px 3px;*/ - -moz-border-radius: 0 0 3px 3px; - -webkit-border-radius: 0 0 3px 3px; - -khtml-border-radius: 0 0 3px 3px; - border-radius: 0 0 3px 3px; - /*+box-shadow:0px 1px 7px #000000;*/ - -moz-box-shadow: 0px 1px 7px #000000; - -webkit-box-shadow: 0px 1px 7px #000000; - -o-box-shadow: 0px 1px 7px #000000; - box-shadow: 0px 1px 7px #000000; -} - -#user-options a { - float: left; - width: 100%; - padding: 10px 0; -} - -/*Dashboard -** Admin*/ -.dashboard.admin { - background: #F2F0F0; - height: 100%; - padding: 10px; - font-size: 13px; - color: #3D5873; -} - -.dashboard.admin .dashboard-container { - background: #FFFFFF; - border: 1px solid #C8C2C2; - /*+border-radius:3px;*/ - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; - padding: 0px 8px 18px 0px; - margin: 0 0 11px; -} - -.dashboard.admin .dashboard-container.sub { - width: 468px; -} - -.dashboard.admin .dashboard-container.sub .button.view-all, -.dashboard.admin .dashboard-container .button.fetch-latest { - font-size: 13px; - float: right; - clear: none; - /*+text-shadow:none;*/ - -moz-text-shadow: none; - -webkit-text-shadow: none; - -o-text-shadow: none; - text-shadow: none; - -moz-text-shadow: 0px 1px 0px #333E49; - -webkit-text-shadow: 0px 1px 0px #333E49; - -o-text-shadow: 0px 1px 0px #333E49; - padding: 3px 8px 3px 10px; - background: rgb(234, 234, 234); - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhZWFlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmQ2ZDYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); - background: -moz-linear-gradient(top, rgba(234,234,234,1) 0%, rgba(214,214,214,1) 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,234,234,1)), color-stop(100%,rgba(214,214,214,1))); - background: -webkit-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(214,214,214,1) 100%); - background: -o-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(214,214,214,1) 100%); - background: -ms-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(214,214,214,1) 100%); - background: linear-gradient(to bottom, rgba(234,234,234,1) 0%,rgba(214,214,214,1) 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#d6d6d6',GradientType=0 ); - border: 1px solid #9D9D9D; - /*+border-radius:3px;*/ - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; - /*+box-shadow:0px 1px #CACACA;*/ - -moz-box-shadow: 0px 1px #CACACA; - -webkit-box-shadow: 0px 1px #CACACA; - -o-box-shadow: 0px 1px #CACACA; - box-shadow: 0px 1px #CACACA; - cursor: pointer; - font-weight: 100; - color: #000000; -} - -.dashboard.admin .dashboard-container.sub .button.view-all:hover, -.dashboard.admin .dashboard-container .button.fetch-latest:hover { - background: #E8E8E8; - /*+box-shadow:inset 0px 0px 6px #636363;*/ - -moz-box-shadow: inset 0px 0px 6px #636363; - -webkit-box-shadow: inset 0px 0px 6px #636363; - -o-box-shadow: inset 0px 0px 6px #636363; - box-shadow: inset 0px 0px 6px #636363; -} - -.dashboard.admin .dashboard-container.sub .title { - float: left; -} - -/**** Head*/ -.dashboard.admin .dashboard-container.head { - width: 966px; - height: 431px; - margin: 9px 0 0; - float: left; -} - -.dashboard.admin .dashboard-container .top { - background: #EFEFEF 0px -4px; - padding: 4px 4px 8px; - width: 100%; - float: left; - margin: 0; - color: #FFFFFF; -} - -.dashboard.admin .dashboard-container .title { - float: left; - font-size: 13px; - font-weight: 100; - /*+text-shadow:0px 1px 1px #9A9A9A;*/ - -moz-text-shadow: 0px 1px 1px #9A9A9A; - -webkit-text-shadow: 0px 1px 1px #9A9A9A; - -o-text-shadow: 0px 1px 1px #9A9A9A; - text-shadow: 0px 1px 1px #9A9A9A; - padding: 5px 0 0 4px; -} - -.dashboard.admin .dashboard-container .title span { - color: #000000; - /*+text-shadow:none;*/ - -moz-text-shadow: none; - -webkit-text-shadow: none; - -o-text-shadow: none; - text-shadow: none; -} - -.dashboard.admin .dashboard-container.head .selects { - float: right; -} - -.dashboard.admin .dashboard-container.head .selects .select { - float: left; - padding: 0; - margin: 0 0 0 21px; -} - -.dashboard.admin .dashboard-container.head .selects .select label { - display: block; - float: left; - padding: 5px 0px 0px; -} - -.dashboard.admin .dashboard-container.head .selects .select select { - width: 124px; - margin: 3px 0 0 10px; - padding: 0px; -} - -/**** Charts / stats*/ -.dashboard.admin .zone-stats { - width: 974px; - height: 416px; - overflow: auto; - overflow-x: hidden; - /*+placement:shift 0px 0px;*/ - position: relative; - left: 0px; - top: 0px; -} - -.dashboard.admin .zone-stats ul { - width: 996px; - /*+placement:shift -2px 11px;*/ - position: relative; - left: -2px; - top: 11px; -} - -.dashboard.admin .zone-stats ul li { - width: 488px; - font-size: 14px; - height: 79px; - float: left; - position: absolute; - position: relative; - cursor: pointer; - z-index: 1; -} - -.dashboard.admin .zone-stats ul li canvas { - position: relative; - z-index: -1; -} - -.dashboard.admin .zone-stats ul li:hover { - background: #FFF2DA; -} - -.dashboard.admin .zone-stats ul li .label { - width: 161px; - float: left; - font-weight: 100; - border-bottom: 1px solid #E2E2E2; - margin: 5px 0 0 22px; - padding: 22px 0 7px; -} - -.dashboard.admin .zone-stats ul li .info { - float: left; - width: 151px; - white-space: nowrap; - margin: 12px 0 0; - color: #636363; -} - -.dashboard.admin .zone-stats ul li .info .name { - font-weight: bold; - margin-top: 8px; - margin-bottom: 9px; - font-size: 12px; - font-weight: 100; - /*[empty]color:;*/ -} - -.dashboard.admin .zone-stats ul li .pie-chart-container { - width: 91px; - height: 69px; - overflow: hidden; - float: left; - position: relative; - /*+placement:shift -8px 7px;*/ - position: relative; - left: -8px; - top: 7px; -} - -.dashboard.admin .zone-stats ul li .pie-chart-container .percent-label { - width: 52px; - color: #C98200; - /*+placement:shift 28px 31px;*/ - position: relative; - left: 28px; - top: 31px; - position: absolute; - font-weight: bold; - text-align: center; -} - -.dashboard.admin .zone-stats ul li .pie-chart { - width: 70px; - height: 66px; - float: left; - margin: 3px 27px 0 16px; - position: relative; - z-index: -1; -} - -.dashboard.admin .dashboard-container .stats ul li { - display: block; - width: 97%; - height: 40px; - background: url(../images/bg-gradients.png) 0px -29px; - clear: both; - border: 1px solid #C8C2C2; - /*+border-radius:10px;*/ - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - -khtml-border-radius: 10px; - border-radius: 10px; - border-radius: 10px 10px 10px 10px; - padding: 0 12px 0px; - margin: 0 0 10px; -} - -.dashboard.admin .dashboard-container .stats ul li .name { - width: 178px; - float: left; - font-size: 11px; - font-weight: bold; - margin: 15px 15px 0 0; -} - -.dashboard.admin .dashboard-container .stats ul li div.value { - float: left; - background: url(../images/bg-gradients.png) 0px -51px; - width: 295px; - height: 100%; - border-left: 1px solid #C8C2C2; - border-right: 1px solid #C8C2C2; - margin: 0 9px 0 0; -} - -.dashboard.admin .dashboard-container .stats ul li .value .content { - background: url(../images/bg-gradients.png) repeat-x 0px 0px; - margin: 6px 9px 9px; - padding: 9px; - color: #FFFFFF; - /*Adjusting the font size for proper display*/ - font-size: 10px; - border-left: 1px solid #6A6A6A; - border-right: 1px solid #6A6A6A; - border-bottom: 1px solid #FFFFFF; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - /*+text-shadow:0px -1px 1px #6F6F6F;*/ - -moz-text-shadow: 0px -1px 1px #6F6F6F; - -webkit-text-shadow: 0px -1px 1px #6F6F6F; - -o-text-shadow: 0px -1px 1px #6F6F6F; - text-shadow: 0px -1px 1px #6F6F6F; -} - -.dashboard.admin .dashboard-container .stats ul li .chart { - float: left; - width: 290px; - height: 17px; - padding: 0px 1px; - background: url(../images/bg-gradients.png) 0px -130px; - margin: 12px 23px 0 0; - /*+border-radius:7px;*/ - -moz-border-radius: 7px; - -webkit-border-radius: 7px; - -khtml-border-radius: 7px; - border-radius: 7px; - border-radius: 7px 7px 7px 7px; - border-bottom: 1px solid #FFFFFF; - border-top: 1px solid #727272; -} - -.dashboard.admin .dashboard-container .stats ul li .chart .chart-line { - height: 15px; - background: url(../images/bg-gradients.png) 0px -149px; - /*+border-radius:10px;*/ - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - -khtml-border-radius: 10px; - border-radius: 10px; - border-radius: 10px 10px 10px 10px; - margin: 1px 0px 0; -} - -.dashboard.admin .dashboard-container .stats ul li .percentage { - float: left; - font-size: 20px; - font-weight: bold; - margin: 13px 0 0; - /*+text-shadow:0px -2px 1px #FFFFFF;*/ - -moz-text-shadow: 0px -2px 1px #FFFFFF; - -webkit-text-shadow: 0px -2px 1px #FFFFFF; - -o-text-shadow: 0px -2px 1px #FFFFFF; - text-shadow: 0px -2px 1px #FFFFFF; -} - -/**** Alerts*/ -.dashboard.admin .dashboard-container.sub.alerts { - float: left; - margin: 0 12px 0 0; - height: 170px; - overflow: hidden; - position: relative; -} - -.dashboard.admin .dashboard-container.sub.alerts.last { - margin-right: 0; -} - -.dashboard.admin .dashboard-container.sub.alerts ul { - width: 468px; - height: 100%; - overflow-y: scroll; - position: relative; - margin: 0px 0 0 8px; -} - -.dashboard.admin .dashboard-container.sub.alerts ul li { - background: #F0F0F0; - float: left; - border: 1px solid #D4D0D0; - /*+border-radius:3px;*/ - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; - margin: 9px; - padding: 8px; -} - -.dashboard.admin .dashboard-container.sub.alerts ul li { - border: 1px solid #FF7070; - background: #FFEFEF; -} - -.dashboard.admin .dashboard-container.sub.alerts ul li span.title { - width: 100%; - font-weight: bold; - font-size: 14px; - font-weight: 100; - color: #266E9A; - margin: 3px 0 5px; - /*+text-shadow:0px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px #FFFFFF; - -o-text-shadow: 0px 1px #FFFFFF; - text-shadow: 0px 1px #FFFFFF; - padding: 0; -} - -.dashboard.admin .dashboard-container.sub.alerts ul li p { - float: left; - margin: 4px 0px 0px; - color: #252525; -} - -.dashboard.admin .dashboard-container.sub.alerts ul li p br { - display: none; -} - -/*** User*/ -#browser div.panel .dashboard.user .toolbar { - height: 60px; - position: relative; -} - -.dashboard.user .button.view-all { - float: right; - border: 1px solid #4B5B6B; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - color: #FFFFFF; - /*+text-shadow:0px -1px 2px #13293E;*/ - -moz-text-shadow: 0px -1px 2px #13293E; - -webkit-text-shadow: 0px -1px 2px #13293E; - -o-text-shadow: 0px -1px 2px #13293E; - text-shadow: 0px -1px 2px #13293E; - padding: 2px 3px 3px; - margin: -4px 4px -4px 0; - text-indent: 0; - background: url(../images/bg-gradients.png) 0px -147px; -} - -.dashboard.user .button.view-all:hover { - background-position: 0px 0px; - /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; -} - -/**** Actions*/ -.dashboard.user .dashboard-actions ul { - padding: 11px; -} - -.dashboard.user .dashboard-actions ul li { - float: left; - width: 123px; - cursor: pointer; - height: 40px; - margin: 0 9px 0 0; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - /*+box-shadow:inset 0px 0px 1px #DDE3EC;*/ - -moz-box-shadow: inset 0px 0px 1px #DDE3EC; - -webkit-box-shadow: inset 0px 0px 1px #DDE3EC; - -o-box-shadow: inset 0px 0px 1px #DDE3EC; - box-shadow: inset 0px 0px 1px #DDE3EC; - border: 1px solid #395268; - border-right: 1px solid #556778; - background: url(../images/bg-gradients.png) repeat-x 0px -181px; -} - -.dashboard.user .dashboard-actions ul li span { - color: #FFFFFF; - font-size: 11px; - /*+text-shadow:0px 1px 2px #444444;*/ - -moz-text-shadow: 0px 1px 2px #444444; - -webkit-text-shadow: 0px 1px 2px #444444; - -o-text-shadow: 0px 1px 2px #444444; - text-shadow: 0px 1px 2px #444444; - background: url(../images/icons.png) no-repeat -613px -309px; - padding: 8px 12px 11px 34px; - /*+placement:shift 4px 10px;*/ - position: relative; - left: 4px; - top: 10px; -} - -.dashboard.user .dashboard-actions ul li.add-iso span { - background-position: -613px -352px; -} - -.dashboard.user .dashboard-actions ul li.add-volume span { - background-position: -613px -264px; -} - -.dashboard.user .dashboard-actions ul li.acquire-ip span { - background-position: -613px -389px; -} - -/**** VM Status*/ -.dashboard.user .vm-status { - width: 98%; - margin: 19px auto auto; - border: 1px solid #D2CDCD; - /*+border-radius:9px;*/ - -moz-border-radius: 9px; - -webkit-border-radius: 9px; - -khtml-border-radius: 9px; - border-radius: 9px; - border-radius: 9px 9px 9px 9px; -} - -.dashboard.user .vm-status .title { - width: 100%; - background: url(../images/bg-gradients.png) 0px -53px; - /*+border-radius:10px 10px 0 0;*/ - -moz-border-radius: 10px 10px 0 0; - -webkit-border-radius: 10px 10px 0 0; - -khtml-border-radius: 10px 10px 0 0; - border-radius: 10px 10px 0 0; - font-size: 13px; - color: #4A5967; - padding: 13px 0 12px; - border-bottom: 1px solid #C8C2C2; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; -} - -.dashboard.user .vm-status .title span { - padding: 0 0 0 8px; -} - -.dashboard.user .vm-status .content { - padding: 9px 0px; -} - -.dashboard.user .vm-status .content ul { - display: inline-block; - margin: auto; -} - -.dashboard.user .vm-status .content ul li { - float: left; - width: 243px; - height: 237px; - border: 1px solid #E6EBEE; - border-top: 2px solid #D3D9DE; - /*+border-radius:10px;*/ - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - -khtml-border-radius: 10px; - border-radius: 10px; - border-radius: 10px 10px 10px 10px; - margin: 0 0 0 11px; - background: #EBEDF1; -} - -.dashboard.user .vm-status .content ul li .name { - font-size: 28px; - color: #5C7082; - padding: 0 0 0 35px; - margin: 14px 0 0; - /*+text-shadow:0px 2px 2px #FFFFFF;*/ - -moz-text-shadow: 0px 2px 2px #FFFFFF; - -webkit-text-shadow: 0px 2px 2px #FFFFFF; - -o-text-shadow: 0px 2px 2px #FFFFFF; - text-shadow: 0px 2px 2px #FFFFFF; - background: url(../images/icons.png) -617px -488px; -} - -.dashboard.user .vm-status .content ul li .value { - background: #DFE9CC; - width: 229px; - color: #5D7C98; - /*+text-shadow:0px 1px 2px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 2px #FFFFFF; - -webkit-text-shadow: 0px 1px 2px #FFFFFF; - -o-text-shadow: 0px 1px 2px #FFFFFF; - text-shadow: 0px 1px 2px #FFFFFF; - font-size: 58px; - margin: 12px auto auto; - text-align: center; - padding: 59px 0px; -} - -.dashboard.user .vm-status .content ul li.stopped .name { - background-position: -617px -524px; -} - -.dashboard.user .vm-status .content ul li.stopped .value { - background: #EDCBCE; -} - -.dashboard.user .vm-status .content ul li.total .name { - background-position: -617px -559px; -} - -.dashboard.user .vm-status .content ul li.total .value { - background: #DFE4E9; -} - -/***** Tables / status list*/ -.dashboard.user .status-lists { - margin: 15px 0 0 8px; -} - -.dashboard.user .status-lists ul li.events { - width: 512px; -} - -.dashboard.user .status-lists ul li.events .content li { - width: 97%; - cursor: default; - margin: 6px 11px 0 0; - font-size: 11px; - padding: 13px 0 12px 16px; - color: #495A76; - /*+text-shadow:0px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px #FFFFFF; - -o-text-shadow: 0px 1px #FFFFFF; - text-shadow: 0px 1px #FFFFFF; - border: 1px solid #DBDBDB; - /*+box-shadow:0px 2px 4px #C0C0C0;*/ - -moz-box-shadow: 0px 2px 4px #C0C0C0; - -webkit-box-shadow: 0px 2px 4px #C0C0C0; - -o-box-shadow: 0px 2px 4px #C0C0C0; - box-shadow: 0px 2px 4px #C0C0C0; - background: #EFEFEF url(../images/bg-gradients.png) repeat-x 0px -29px; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; -} - -.dashboard.user .status-lists ul li.events .content li .title { - font-weight: bold; - color: #4A5A6A; - margin-bottom: 9px; -} - -.dashboard.user .status-lists ul li { - float: left; - margin: 0 10px 0 0; -} - -.dashboard.user .status-lists table { - width: 252px; - margin: 0; - cursor: default; -} - -.dashboard.user .status-lists table th { - padding: 8px 0px 6px; -} - -.dashboard.user .status-lists .events table { - width: 515px; -} - -.dashboard.user .status-lists table tbody { - height: 256px; - display: block; - overflow: auto; - overflow-x: hidden; - padding: 0 0px; -} - -.dashboard.user .status-lists table td.value { - cursor: default; -} - -.dashboard.user .status-lists table td.desc { - width: 151px; - overflow: hidden; - cursor: default; -} - -.dashboard.user .status-lists .my-account table tbody tr td { - padding-top: 19px; - padding-bottom: 19px; -} - -.dashboard.user .status-lists table thead { - background: url(../images/bg-gradients.png) 0px -351px; - border-top: 1px solid #C4C5C5; -} - -.dashboard.user .status-lists table tr.odd { - background: #DFE1E3; -} - -.dashboard.user .status-lists table td { - vertical-align: middle; -} - -/****** IP addresses*/ -.dashboard.user .status-lists li.ip-addresses td { - width: 250px; - padding: 28px 0 51px; -} - -.dashboard.user .status-lists li.ip-addresses .desc { - color: #3F5468; -} - -.dashboard.user .status-lists li.ip-addresses .value { - font-size: 29px; - margin: 7px 0 0; - /*+text-shadow:0px 1px 2px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 2px #FFFFFF; - -webkit-text-shadow: 0px 1px 2px #FFFFFF; - -o-text-shadow: 0px 1px 2px #FFFFFF; - text-shadow: 0px 1px 2px #FFFFFF; -} - -/*System chart*/ -.system-chart { - width: 100%; - height: 100%; - overflow: auto; - overflow-x: hidden; -} - -.system-chart ul.resources li { - background: transparent url(../images/bg-gradients.png) repeat-x 0px -1340px; - text-align: left; - width: 100px; - height: 60px; - position: absolute; - border: 1px solid #99A0A5; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - /*+box-shadow:0px 0px 2px #A6A6A6;*/ - -moz-box-shadow: 0px 0px 2px #A6A6A6; - -webkit-box-shadow: 0px 0px 2px #A6A6A6; - -o-box-shadow: 0px 0px 2px #A6A6A6; - box-shadow: 0px 0px 2px #A6A6A6; -} - -.system-chart ul.resources li .button.view-all { - width: 65px; - height: 25px; - background: url(../images/buttons.png) no-repeat -458px -504px; - /*+placement:shift 32px 34px;*/ - position: relative; - left: 32px; - top: 34px; - position: absolute; -} - -.system-chart ul.resources li .button.view-all:hover { - background-position: -537px -504px; -} - -.system-chart ul.resources li .button.view-all .view-all-label { - color: #FFFFFF; - font-size: 11px; - /*+text-shadow:0px -1px 1px #000000;*/ - -moz-text-shadow: 0px -1px 1px #000000; - -webkit-text-shadow: 0px -1px 1px #000000; - -o-text-shadow: 0px -1px 1px #000000; - text-shadow: 0px -1px 1px #000000; - /*+placement:shift 9px 0px;*/ - position: relative; - left: 9px; - top: 0px; -} - -.system-chart ul.resources li .label { - font-weight: bold; - font-size: 12px; - color: #5C7485; - /*+text-shadow:0px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px #FFFFFF; - -o-text-shadow: 0px 1px #FFFFFF; - text-shadow: 0px 1px #FFFFFF; - /*+placement:shift 3px 3px;*/ - position: relative; - left: 3px; - top: 3px; - position: absolute; -} - -/** Resources*/ -.system-chart.dashboard.admin { - width: 97%; - height: 96%; - background: transparent; -} - -.system-chart.dashboard.admin .dashboard-container { - width: 930px; - border: none; -} - -.system-chart.dashboard.admin .dashboard-container .top { - background: transparent; -} - -.system-chart.dashboard.admin .dashboard-container .top .title { - color: #55687A; -} - -.system-chart.dashboard.admin .dashboard-container .top .title span { - /*+text-shadow:0px 0px #FFFFFF;*/ - -moz-text-shadow: 0px 0px #FFFFFF; - -webkit-text-shadow: 0px 0px #FFFFFF; - -o-text-shadow: 0px 0px #FFFFFF; - text-shadow: 0px 0px #FFFFFF; -} - -.system-chart.dashboard.admin .dashboard-container .stats .chart { - width: 300px; -} - -/** Compute*/ -.system-chart.compute { - background: url(../images/bg-system-chart-compute.png) no-repeat center; -} - -/*** Compute resources*/ -.system-chart.compute ul.resources { - width: 98%; - height: 97%; - margin: 0; - position: relative; -} - -.system-chart.compute ul.resources li.zone { - left: 196px; -} - -.system-chart.compute ul.resources li.zone .label { - width: 100%; - left: 0px; - top: 20px; - font-size: 14px; - text-align: center; -} - -.system-chart.compute ul.resources li.pods { - left: 299px; - top: 112px; -} - -.system-chart.compute ul.resources li.clusters { - left: 396px; - top: 189px; -} - -.system-chart.compute ul.resources li.hosts { - left: 507px; - top: 265px; -} - -.system-chart.compute ul.resources li.primaryStorage { - left: 507px; - top: 375px; -} - -.system-chart.compute ul.resources li.secondaryStorage { - left: 299px; - top: 497px; -} - -.system-chart.compute ul.resources li.ucs { - left: 299px; - top: 406px; -} - -/** Network*/ -.system-chart.network .network-switch-icon { - color: #506980; - font-weight: bold; - background: url(../images/bg-gradients.png) repeat-x 0px -38px; - border: 1px solid #CDCDCD; - border-top: 2px solid #FFFFFF; - /*+box-shadow:0px 0px 2px #A4A4A4;*/ - -moz-box-shadow: 0px 0px 2px #A4A4A4; - -webkit-box-shadow: 0px 0px 2px #A4A4A4; - -o-box-shadow: 0px 0px 2px #A4A4A4; - box-shadow: 0px 0px 2px #A4A4A4; - /*+border-radius:2px;*/ - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - -khtml-border-radius: 2px; - border-radius: 2px; - border-radius: 2px 2px 2px 2px; - padding: 8px 7px; - /*+placement:shift 187px 76px;*/ - position: relative; - left: 187px; - top: 76px; - position: absolute; - z-index: 3; -} - -.system-chart.network .base-circle-icon { - width: 35px; - height: 34px; - background: url(../images/bg-system-network-traffic.png) 0px -853px; - /*+placement:shift 227px 557px;*/ - position: relative; - left: 227px; - top: 557px; - position: absolute; - z-index: 5; -} - -.system-chart.network ul.resources { - width: 100%; - height: 98%; - position: absolute; - z-index: 2; -} - -.system-chart.network ul.resources li { - background: transparent; - /*+box-shadow:0px 0px;*/ - -moz-box-shadow: 0px 0px; - -webkit-box-shadow: 0px 0px; - -o-box-shadow: 0px 0px; - box-shadow: 0px 0px; - -moz-box-shadow: 0px 0px none; - -webkit-box-shadow: 0px 0px none; - -o-box-shadow: 0px 0px none; - -moz-box-shadow: none; - -webkit-box-shadow: none; - -o-box-shadow: none; - border: none; - /*+border-radius:0px;*/ - -moz-border-radius: 0px; - -webkit-border-radius: 0px; - -khtml-border-radius: 0px; - border-radius: 0px; - border-radius: 0px 0px 0px 0px; -} - -.system-chart.network ul.resources li .view-all { - /*+placement:shift 19px 21px;*/ - position: relative; - left: 19px; - top: 21px; -} - -.system-chart.network ul.resources li.public { - /*+placement:shift 356px 23px;*/ - position: relative; - left: 356px; - top: 23px; - position: absolute; -} - -.system-chart.network ul.resources li.guest { - /*+placement:shift 356px 155px;*/ - position: relative; - left: 356px; - top: 155px; - position: absolute; -} - -.system-chart.network ul.resources li.management { - /*+placement:shift 356px 242px;*/ - position: relative; - left: 356px; - top: 242px; - position: absolute; -} - -.system-chart.network ul.resources li.storage { - /*+placement:shift 356px 333px;*/ - position: relative; - left: 356px; - top: 333px; - position: absolute; -} - -.system-chart.network ul.resources li.providers { - /*+placement:shift 248px 427px;*/ - position: relative; - left: 248px; - top: 427px; - height: 77px; - width: 258px; - position: absolute; - background: url(../images/bg-system-network-traffic.png) no-repeat -50px -848px; -} - -.system-chart.network ul.resources li.providers span { - /*+placement:shift 99px 5px;*/ - position: relative; - left: 99px; - top: 5px; - position: absolute; - font-size: 12px; -} - -.system-chart.network ul.resources li.providers .view-all { - /*+placement:shift 186px 48px;*/ - position: relative; - left: 186px; - top: 48px; - position: absolute; -} - -.system-chart.network .system-network-chart { - width: 100%; - height: 100%; - position: relative; - z-index: 1; -} - -.system-chart.network .system-network-chart .network-chart-item { - background: url(../images/bg-system-network-traffic.png) no-repeat; - width: 213px; - height: 539px; -} - -.system-chart.network .system-network-chart .network-chart-item.public { - background-position: -793px -1px; - /*+placement:shift 245px 20px;*/ - position: relative; - left: 245px; - top: 20px; - position: absolute; -} - -.system-chart.network .system-network-chart .network-chart-item.management { - background-position: -273px 12px; - /*+placement:shift 239px 20px;*/ - position: relative; - left: 239px; - top: 20px; - position: absolute; -} - -.system-chart.network .system-network-chart .network-chart-item.storage { - background-position: -523px 12px; - /*+placement:shift 231px 20px;*/ - position: relative; - left: 231px; - top: 20px; - position: absolute; -} - -.system-chart.network .system-network-chart .network-chart-item.guest { - background-position: -43px 12px; - /*+placement:shift 251px 20px;*/ - position: relative; - left: 251px; - top: 20px; - position: absolute; -} - -/** NAAS -** Add initial resource form*/ -.panel .add-first-network-resource { - margin: 37px; - font-size: 14px; - background: #FFFFFF; - padding: 19px 19px 79px; - /*+border-radius:12px;*/ - -moz-border-radius: 12px; - -webkit-border-radius: 12px; - -khtml-border-radius: 12px; - border-radius: 12px; - border-radius: 12px 12px 12px 12px; - border: 1px solid #ECECEC; -} - -.panel .add-first-network-resource form { - display: inline-block; - height: 442px; - overflow: auto; - overflow-x: hidden; -} - -.panel .add-first-network-resource .title { - font-size: 26px; - color: #3984D1; - /*+text-shadow:0px 1px 2px #BCBCBC;*/ - -moz-text-shadow: 0px 1px 2px #BCBCBC; - -webkit-text-shadow: 0px 1px 2px #BCBCBC; - -o-text-shadow: 0px 1px 2px #BCBCBC; - text-shadow: 0px 1px 2px #BCBCBC; - margin: 0 0 17px; -} - -.panel .add-first-network-resource .message { - display: block; - color: #545151; - margin: 0 0 30px; -} - -.panel .add-first-network-resource .form-item { - width: 409px; - display: inline-block; - padding: 5px; - position: relative; - margin: 0 0 2px; -} - -.panel .add-first-network-resource .form-item label { - float: left; - width: 109px; - text-align: right; -} - -.panel .add-first-network-resource .form-item label.error { - display: none; - font-size: 10px; - position: absolute; - top: 30px; - left: 137px; -} - -.panel .add-first-network-resource .form-item input { - float: right; - /*+border-radius:6px;*/ - -moz-border-radius: 6px; - -webkit-border-radius: 6px; - -khtml-border-radius: 6px; - border-radius: 6px; - border-radius: 6px 6px 6px 6px; - font-size: 16px; - border: 1px solid #B7B7B7; -} - -.panel .add-first-network-resource .form-item input[type=checkbox] { - float: right; - margin: 0 266px 0 0; -} - -.panel .add-first-network-resource .form-item input[type=text], -.panel .add-first-network-resource .form-item input[type=password], -.panel .add-first-network-resource .form-item input[type=text], -.panel .add-first-network-resource .form-item select { - width: 276px; -} - -.panel .add-first-network-resource .form-item select { - width: 280px; - margin: 0 0 0 20px; -} - -.panel .add-first-network-resource .button { - padding: 11px 23px 11px 21px; - cursor: pointer; - background: url(../images/bg-gradients.png) repeat-x 0px -221px; - margin: 29px 0 0; - /*+border-radius:10px;*/ - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - -khtml-border-radius: 10px; - border-radius: 10px; - border-radius: 10px 10px 10px 10px; - border: 1px solid #858585; - color: #FFFFFF; - clear: both; - /*[empty]position:;*/ -} - -.panel .add-first-network-resource .multi-array { - background: #FFFFFF; - border: 1px solid #DCDCDC; - display: inline-block; - float: left; - padding: 12px; - clear: both; - width: 383px; - margin: 3px 0 10px; - /*+border-radius:7px;*/ - -moz-border-radius: 7px; - -webkit-border-radius: 7px; - -khtml-border-radius: 7px; - border-radius: 7px; - border-radius: 7px 7px 7px 7px; -} - -.panel .add-first-network-resource .multi-array .item { - max-width: 155px; - float: left; - margin: 6px 0 0 24px; -} - -.panel .add-first-network-resource .multi-array .item .name { - float: left; -} - -.panel .add-first-network-resource .multi-array .item .value { - float: right; - margin: 0 0 0 13px; -} - -.panel .add-first-network-resource .multi-array .item .value input { - margin: 0; -} - -/*Form validation*/ -input.error { - background: #FEE5E5; -} - -label.error { - color: #FF0000; -} - -/*Multi-step wizard*/ -.multi-wizard { - width: 500px; - height: 550px; - display: inline-block; -} - -/*** Progress bar*/ -.multi-wizard .progress { - color: #FFFFFF; - font-size: 11px; -} - -.multi-wizard .progress ul { - height: 40px; - float: left; - clear: both; -} - -/*[clearfix]*/ -.multi-wizard .progress ul li { - float: left; - width: 128px; - height: 40px; - position: relative; - display: flex; - align-items: center; - justify-content: center; -} - -.multi-wizard.instance-wizard .progress ul li { - width: 102px; - margin-left: 8px; -} - -.multi-wizard .progress ul li.active { - background: url(../images/bg-gradients.png) 0px -221px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - -khtml-border-radius: 5px; - border-radius: 5px; -} - -.multi-wizard .progress ul li span { - position: relative; - color: #000000; - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - width: 62px; - text-align: center; -} - -.multi-wizard .progress ul li span.arrow { - width: 17px; - height: 15px; - /*+placement:displace 74px -3px;*/ - position: absolute; - margin-left: 74px; - margin-top: -3px; - background: url(../images/icons.png) no-repeat 0px -422px; - z-index: 1000; - display: none; -} - -.multi-wizard.instance-wizard .progress ul li span.arrow { - left: 19px; -} - -.multi-wizard .progress ul li.active span.arrow { - background-position: -1px -396px; -} - -.multi-wizard .progress ul li span.number { - width: auto; - font-size: 27px; - font-weight: bold; - color: #BBBBBB; - background: transparent; -} - -.multi-wizard .progress ul li.active span { - /*+text-shadow:0px -1px 1px #004AFF;*/ - -moz-text-shadow: 0px -1px 1px #004AFF; - -webkit-text-shadow: 0px -1px 1px #004AFF; - -o-text-shadow: 0px -1px 1px #004AFF; - text-shadow: 0px -1px 1px #004AFF; - color: #FFFFFF; -} - -/*** Content*/ -.multi-wizard .main-desc { - font-size: 11px; - text-align: left; - width: 437px; - /*+placement:shift 3px 25px;*/ - position: relative; - left: 3px; - top: 25px; - line-height: 17px; -} - -.multi-wizard .review .main-desc, -.multi-wizard .select-template .main-desc { - margin-left: 10px; - left: 0; -} - -.multi-wizard .content { - background: #FFFFFF; - width: 440px; - min-height: 366px; - margin: 24px 0 0; - padding-bottom: 8px; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - display: inline-block; - float: left; -} - -.multi-wizard .select-security-group .content { - height: 366px; -} - -.multi-wizard .content .section { - width: 416px; - background: #E9E9E9; - margin: 16px auto auto; - overflow: hidden; - text-align: left; - font-size: 12px; - color: #505A62; - border: 1px solid #E0DFDF; -} - -.multi-wizard.instance-wizard .service-offering .content { - width: 463px; - max-height: 365px; - overflow: auto; - overflow-x: hidden; -} - -.multi-wizard .content .section .select-area { - width: 334px; - height: 45px; - margin: 9px auto auto; - background: #D6D6D6; -} - -.multi-wizard .content .section .select-area .desc { - text-align: left; - width: 155px; - float: right; - padding: 9px 0 0; - font-size: 12px; - color: #989898; -} - -.multi-wizard .content .section .select-area input { - float: left; - margin: 0; - padding: 9px; -} - -.multi-wizard .content .section .select-area select { - padding: 0; - width: 158px; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - margin: 11px 0px 0 14px; - float: left; -} - -.multi-wizard .content .section .select-area input[type=radio], -.multi-wizard.instance-wizard .content .section.select-template input[type=radio] { - margin: 14px 16px 0; -} - -.multi-wizard .content .section .select-area label { - float: left; - text-align: left; - font-size: 18px; - color: #62798E; - /*+text-shadow:0px 2px 2px #EFEFEF;*/ - -moz-text-shadow: 0px 2px 2px #EFEFEF; - -webkit-text-shadow: 0px 2px 2px #EFEFEF; - -o-text-shadow: 0px 2px 2px #EFEFEF; - text-shadow: 0px 2px 2px #EFEFEF; - margin: 12px 12px 12px 2px; -} - -.multi-wizard .content .section .select-area label.error { - font-size: 10px; - color: #FF0000; - margin: 2px 0 0 14px; -} - -.multi-wizard .content .section p { - font-size: 11px; - text-align: left; - color: #808080; - padding: 0 0 0 40px; -} - -.multi-wizard .content .section h3 { - text-align: left; - color: #62798E; - font-weight: bold; - padding: 14px 14px 3px 39px; - /*+text-shadow:0px 1px 1px #EFEFEF;*/ - -moz-text-shadow: 0px 1px 1px #EFEFEF; - -webkit-text-shadow: 0px 1px 1px #EFEFEF; - -o-text-shadow: 0px 1px 1px #EFEFEF; - text-shadow: 0px 1px 1px #EFEFEF; - margin: 0; -} - -.multi-wizard .content .section.select-zone { - height: 117px; -} - -.multi-wizard .content .section.select-template { - height: 206px; -} - -.multi-wizard .content.tab-view { - margin: 31px 0px 0px; - background: transparent; - padding: 0px 8px; -} - -.multi-wizard .content.tab-view div.ui-tabs-panel { - border: 1px solid #E2DDDD; - clear: both; - height: 72% !important; - width: 98%; - overflow: auto; - overflow-x: hidden; - height: 591px; - /*+border-radius:0 3px 10px 10px;*/ - -moz-border-radius: 0 3px 10px 10px; - -webkit-border-radius: 0 3px 10px 10px; - -khtml-border-radius: 0 3px 10px 10px; - border-radius: 0 3px 10px 10px; - background: #FFFFFF; -} - -.multi-wizard .content.tab-view div.ui-tabs-panel.ui-tabs-hide { - display: none; -} - -.multi-wizard.instance-wizard .select-iso .content .select .hypervisor { - float: left; - display: block; - clear: both; - margin: 12px 0 0 58px; - /*+placement:shift 0px -6px;*/ - position: relative; - left: 0px; - top: -6px; -} - -.multi-wizard.instance-wizard .select-iso .content .select .hypervisor select { - width: 160px; -} - -.multi-wizard.instance-wizard .select-iso .content .select .hypervisor label { - color: #000000; - font-size: 11px; - margin-right: 9px; - margin-left: 2px; - /*+placement:shift;*/ - position: relative; - left: 0; - top: 0; -} - -.multi-wizard.instance-wizard .select-iso .wizard-step-conditional.select-iso .content .select.selected { - height: 90px; -} - -/*** UI widgets*/ -.multi-wizard .ui-tabs ul.ui-tabs-nav { - margin-top: 7px; - display: block; - height: 41px; - background: transparent; - border: none; - /*+placement:shift -6px 5px;*/ - position: relative; - left: -6px; - top: 5px; - overflow: hidden; - display: inline-block; - z-index: 10; -} - -.multi-wizard .select-iso .ui-tabs ul { - float: left; - left: 0px; - top: 1px; -} - -.multi-wizard .ui-tabs li.ui-state-active { - background: #FFFFFF; -} - -.multi-wizard .ui-tabs li.ui-state-default a { - padding-left: 0; - padding-right: 0; -} - -.multi-wizard .ui-slider { - width: 136px; - padding: 0; - margin: 8px -2px 3px; - background: url(../images/bg-gradients.png) 0px -307px !important; - float: left; -} - -.multi-wizard.instance-wizard .ui-slider { - padding: 7px 0 0 8px; - margin: 8px 0px 0px 2px; -} - -.multi-wizard .ui-slider .ui-slider-handle { - display: block; - background: url(../images/buttons.png) -622px -274px; - width: 18px; - height: 18px; - position: relative; - outline: none; - border: none; - top: -0.5rem; - margin-left: -0.9rem; -} - -/*** Select container*/ -.multi-wizard .select-container { - height: 352px; - overflow: auto; - overflow-x: hidden; - border: 1px solid #D9DFE1; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - margin: 10px 10px 0px; -} - -.multi-wizard .select-container p { - padding: 11px; - color: #424242; - background: #DFDFDF; -} - -.multi-wizard .select-container .select { - font-size: 13px; - margin: -1px 0 0; - padding: 0 0 14px; - min-height: 35px; - width: 100%; - display: inline-block; - text-align: left; - float: left; - border: none; - background: #FFFFFF; -} - -.multi-wizard .select-container .select.odd { - background: #EBEFF4; -} - -.multi-wizard .select-container .select input { - float: left; - margin: 21px 24px 0; -} - -.multi-wizard .select-container .select .select-desc { - max-width: 335px; - min-height: 28px; - overflow: hidden; - float: left; - clear: none; - margin: 21px 0 0; - display: inline-block; -} - -.multi-wizard .select-container .select .select-desc .name { - font-weight: bold; - margin: 0 0 5px; -} - -.multi-wizard .select-container .select .select-desc .desc { - font-size: 11px; - color: #808080; - display: inline-block; - /*[empty]height:;*/ -} - -/*** Buttons*/ -.multi-wizard .buttons { - width: 100%; - position: absolute; - bottom: 10px; - left: 0px; -} - -.multi-wizard .buttons .button { - width: 88px; - height: 16px; - padding: 11px 0 8px; - /*+box-shadow:0px 1px 1px #FFFFFF;*/ - -moz-box-shadow: 0px 1px 1px #FFFFFF; - -webkit-box-shadow: 0px 1px 1px #FFFFFF; - -o-box-shadow: 0px 1px 1px #FFFFFF; - box-shadow: 0px 1px 1px #FFFFFF; - border: 1px solid #78818F; - cursor: pointer; - font-weight: bold; - font-size: 12px; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; -} - -.multi-wizard .buttons .button.next { - /*+placement:float-right 77px 0px;*/ - float: right; - position: relative; - left: 77px; - top: 0px; - color: #FFFFFF; - /*+text-shadow:0px -1px 1px #465259;*/ - -moz-text-shadow: 0px -1px 1px #465259; - -webkit-text-shadow: 0px -1px 1px #465259; - -o-text-shadow: 0px -1px 1px #465259; - text-shadow: 0px -1px 1px #465259; - background: #0049FF url(../images/gradients.png) 0px -317px; - font-weight: bold; - border: 1px solid #0069CF; - border-top: 1px solid #0070FC; -} - -.multi-wizard .buttons .button.next:hover { - background-position: -3px -368px; - border: 1px solid #0035B8; - border-bottom: 1px solid #0062FA; -} - -.multi-wizard .buttons .button.next.final { - padding: 4px 0px 9px; - width: 115px; - margin: 3px 0 0; -} - -.multi-wizard .buttons .button.next.final span { - background: url(../images/icons.png) 0px -349px; - /*+placement:shift 0px 5px;*/ - position: relative; - left: 0px; - top: 5px; - padding: 5px 0px 5px 30px; -} - -.multi-wizard .buttons .button.cancel { - border: none; - /*+placement:float-right -127px 0px;*/ - float: right; - position: relative; - left: -127px; - top: 0px; - color: #808080; - /*+border-radius:0;*/ - -moz-border-radius: 0; - -webkit-border-radius: 0; - -khtml-border-radius: 0; - border-radius: 0; - border-radius: 0 0 0 0; - background: transparent; - /*+box-shadow:0px 0px;*/ - -moz-box-shadow: 0px 0px; - -webkit-box-shadow: 0px 0px; - -o-box-shadow: 0px 0px; - box-shadow: 0px 0px; - -moz-box-shadow: 0px 0px inherit; - -webkit-box-shadow: 0px 0px inherit; - -o-box-shadow: 0px 0px inherit; - -moz-box-shadow: inherit; - -webkit-box-shadow: inherit; - -o-box-shadow: inherit; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - padding: 14px 0 0px 0px; -} - -.multi-wizard .buttons .button.cancel:hover { - color: #5E5E5E; -} - -.multi-wizard .buttons .button.previous { - background: #D6D6D6; - color: #62798E; - margin-left: 27px; -} - -.multi-wizard .buttons .button.previous:hover { - background: #C6C6C6; -} - -/** Instance wizard -** Select ISO*/ -.multi-wizard.instance-wizard .select-iso .select-container { - height: 260px; - margin: 0; - /*+border-radius:0 0 5px 5px;*/ - -moz-border-radius: 0 0 5px 5px; - -webkit-border-radius: 0 0 5px 5px; - -khtml-border-radius: 0 0 5px 5px; - border-radius: 0 0 5px 5px; -} - -/*** Data disk offering*/ -.multi-wizard.instance-wizard .content .section { - padding: 9px 0 16px; - margin: 12px 0 15px 8px; -} - -.multi-wizard.instance-wizard .content .section.no-thanks { - box-sizing: border-box; - width: 426px; -} - -.multi-wizard.instance-wizard .data-disk-offering .select-container, -.multi-wizard.instance-wizard .sshkeyPairs .select-container { - height: 300px; - margin: -7px 6px 0 8px; - /*+border-radius:6px;*/ - -moz-border-radius: 6px; - -webkit-border-radius: 6px; - -khtml-border-radius: 6px; - border-radius: 6px; - border-radius: 6px 6px 6px 6px; -} - -.multi-wizard.instance-wizard .data-disk-offering .disk-select-group { - float: left; - margin-top: 12px; - width: 100%; -} - -.multi-wizard.instance-wizard .data-disk-offering .disk-select-header { - border-bottom: 1px solid #D4D4D4; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - background: #C2C2C2 0px 4px; - padding: 6px; - height: 17px; -} - -.multi-wizard.instance-wizard .disk-select-group.selected .disk-select-header { - background: #505050; - /*+border-radius:4px 4px 0 0;*/ - -moz-border-radius: 4px 4px 0 0; - -webkit-border-radius: 4px 4px 0 0; - -khtml-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; -} - -.multi-wizard.instance-wizard .data-disk-offering .disk-select-header input { - float: left; -} - -.multi-wizard.instance-wizard .data-disk-offering .disk-select-header .title { - float: left; - font-size: 14px; - padding: 2px; -} - -.multi-wizard.instance-wizard .disk-select-group.selected .disk-select-header .title { - color: #FFFFFF; - /*+text-shadow:0px -1px #000000;*/ - -moz-text-shadow: 0px -1px #000000; - -webkit-text-shadow: 0px -1px #000000; - -o-text-shadow: 0px -1px #000000; - text-shadow: 0px -1px #000000; -} - -.multi-wizard.instance-wizard .data-disk-offering .multi-disk-select-container { - max-height: 257px; - overflow: auto; - border: 1px solid #DDDBDB; - padding: 13px; - background: #E4E4E4; -} - -.multi-wizard.instance-wizard .data-disk-offering .disk-select-group .select-container { - max-height: 114px; - float: left; - margin: 0; - border: none; - /*+border-radius:0;*/ - -moz-border-radius: 0; - -webkit-border-radius: 0; - -khtml-border-radius: 0; - border-radius: 0; - display: none; -} - -.multi-wizard.instance-wizard .data-disk-offering .disk-select-group.selected .select-container { - display: block; -} - -.multi-wizard.instance-wizard .data-disk-offering .disk-select-group .select { - padding: 0 0 17px; - height: 0; -} - -.multi-wizard.instance-wizard .data-disk-offering .disk-select-group.custom-size .section.custom-size { - display: block !important; -} - -.multi-wizard.instance-wizard .data-disk-offering .disk-select-group .select input { - margin: 13px 12px 12px; -} - -.multi-wizard.instance-wizard .data-disk-offering .disk-select-group .select-desc { - margin: 13px 0 0; -} - -.multi-wizard.instance-wizard .data-disk-offering.required .select-container { - height: 344px; - position: relative; - margin-top: 9px !important; -} - -.multi-wizard.instance-wizard .custom-disk-size .select-container { - height: 279px; -} - -.multi-wizard.instance-wizard .custom-disk-size .select-container { - height: 213px; - margin: -7px 6px 0 8px; - /*+border-radius:6px;*/ - -moz-border-radius: 6px; - -webkit-border-radius: 6px; - -khtml-border-radius: 6px; - border-radius: 6px; - border-radius: 6px 6px 6px 6px; -} - -.multi-wizard.instance-wizard .content .section input { - float: left; -} - -.multi-wizard.instance-wizard .content .section input[type=radio] { - margin: 8px 2px 0 17px; -} - -.multi-wizard.instance-wizard .content .section label { - display: block; - float: left; - margin: 10px 7px 7px; -} - -.multi-wizard.instance-wizard .content .section .select-area label { - margin: 12px 0px 0px; -} - -.multi-wizard.instance-wizard .content .section label.size { - color: #647A8E; - font-weight: bold; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; -} - -.multi-wizard.instance-wizard .section.custom-size { - position: relative; - background: #F4F4F4; - padding: 7px; - border-radius: 4px; - width: 100%; - box-sizing: border-box; - margin: 12px 0; -} - -.multi-wizard.instance-wizard .section.custom-size.custom-disk-size { - width: 426px; - margin-left: 8px; -} - -.multi-wizard.instance-wizard .section.custom-iops { - position: relative; - background: #F4F4F4; - padding: 7px; - border-radius: 4px; -} - -.multi-wizard.instance-wizard .section.custom-iops-do { - position: relative; - background: #F4F4F4; - padding: 7px; - border-radius: 4px; - box-sizing: border-box; - width: 426px; -} - -.multi-wizard.instance-wizard .section.custom-size input[type=radio] { - float: left; -} - -.multi-wizard.instance-wizard .section.custom-size input[type=text] { - float: left; - width: 28px; - margin: 6px -1px 0 8px; -} - -.multi-wizard.instance-wizard .section.custom-iops input[type=text] { - float: left; - width: 28px; - margin: 6px -1px 0 8px; -} - -.multi-wizard.instance-wizard .section.custom-iops-do input[type=text] { - float: left; - width: 28px; - margin: 6px -1px 0 8px; -} - -.multi-wizard.instance-wizard .section.custom-size label.error { - position: absolute; - top: 29px; - left: 242px; - font-size: 10px; -} - -.instance-wizard .step.data-disk-offering.custom-disk-size .select-container { - height: 272px; -} - -.instance-wizard .step.data-disk-offering.custom-iops-do .select-container { - height: 240px; -} - -.instance-wizard .step.data-disk-offering.custom-disk-size.custom-iops-do .select-container { - height: 176px; -} - -.instance-wizard .step.data-disk-offering.required.custom-disk-size .select-container { - height: 315px; -} - -.instance-wizard .step.data-disk-offering.required.custom-iops-do .select-container { - height: 295px; -} - -.instance-wizard .step.data-disk-offering.required.custom-disk-size.custom-iops-do .select-container { - height: 223px; -} - -.instance-wizard .step.data-disk-offering .custom-iops-do { - display: none; -} - -.instance-wizard .step.data-disk-offering.custom-iops-do .custom-iops-do { - display: block; -} - -.instance-wizard .step.data-disk-offering .custom-iops-do .field { - width: 30%; - float: left; - margin-bottom: 5px; -} - -.instance-wizard .step.data-disk-offering .custom-iops-do .field label { - text-indent: 20px; -} - -.instance-wizard .step.data-disk-offering .custom-iops-do .field input { - width: 88%; - margin-left: 26px; -} - -/*** Compute offering*/ -.instance-wizard .step.service-offering.custom-size .select-container { - height: 235px; -} - -.instance-wizard .step.service-offering.custom-iops .select-container { - height: 235px; -} - -.instance-wizard .step.service-offering .custom-size { - display: none; -} - -.instance-wizard .step.service-offering .custom-iops { - display: none; -} - -.instance-wizard .step.service-offering.custom-size .custom-size { - display: block; -} - -.instance-wizard .step.service-offering.custom-iops .custom-iops { - display: block; -} - -.instance-wizard .step.service-offering .custom-size .field { - width: 30%; - float: left; - margin-bottom: 13px; -} - -.instance-wizard .step.service-offering .custom-iops .field { - width: 30%; - float: left; - margin-bottom: 13px; -} - -.instance-wizard .step.service-offering .custom-size .field label { - text-indent: 20px; -} - -.instance-wizard .step.service-offering .custom-iops .field label { - text-indent: 20px; -} - -.instance-wizard .step.service-offering .custom-size .field input { - width: 88%; - margin-left: 26px; -} - -.instance-wizard .step.service-offering .custom-size .field label.error { - position: relative; - top: 0; - left: 0; -} - -.instance-wizard .step.service-offering .custom-iops .field input { - width: 88%; - margin-left: 26px; -} - -/*** Network*/ -.multi-wizard.instance-wizard .no-network { - background: #FFFFFF; - width: 773px; - height: 52px; - position: absolute; - top: 98px; - left: 11px; - /*+border-radius:5px;*/ - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - -khtml-border-radius: 5px; - border-radius: 5px; - border-radius: 5px 5px 5px 5px; - z-index: 1; - padding: 162px 0 194px; -} - -.multi-wizard.instance-wizard .no-network p { - font-size: 22px; - line-height: 25px; -} - -.multi-wizard.instance-wizard .select-network .select table { - width: 405px; - margin: 4px 12px 0; - float: left; -} - -.multi-wizard.instance-wizard .select-network .select table thead { - margin: 0; - padding: 0; -} - -.multi-wizard.instance-wizard .select-network .select table td { - padding: 0; - margin: 0; - vertical-align: top; -} - -.multi-wizard.instance-wizard .select-network .select table .select-container { - margin: 0px; - border: 0; - height: 223px; -} - -.multi-wizard.instance-wizard .select-network.no-add-network .select table .select-container { - height: 282px; -} - -.multi-wizard.instance-wizard .select-network .select.new-network table .select-container { - height: 29px; - overflow: visible; -} - -.multi-wizard.instance-wizard .select-network .select.new-network table .select-container .select { - margin: -12px 0 0; - position: relative; - text-align: right; -} - -.multi-wizard.instance-wizard .select-network .select.new-network table .select-container .select select { - width: 145px; - margin: 4px 0 0; - /*+placement:shift;*/ - position: relative; - left: 0; - top: 0; -} - -.multi-wizard.instance-wizard .select-network .select.new-network { - margin: -17px 0 0; -} - -.multi-wizard.instance-wizard .select-network.no-add-network .select.new-network { - display: none !important; -} - -.multi-wizard.instance-wizard .select-network .main-desc { - width: 252px; - top: 12px; - left: 12px; - float: left; -} - -.multi-wizard.instance-wizard .select-network .select .secondary-input { - float: right; - width: 80px; - height: 48px; - font-size: 11px; - border-left: 1px solid #D7D7D7; - color: #000000; -} - -.multi-wizard.instance-wizard .select-network .select.advanced .secondary-input { - height: 73px; -} - -.multi-wizard.instance-wizard .select-network .select .secondary-input input { - margin: 0 !important; - padding: 0 !important; - /*+placement:shift 9px 21px;*/ - position: relative; - left: 9px; - top: 21px; -} - -.multi-wizard.instance-wizard .select-network .select .secondary-input .name { - float: right; - /*+placement:shift -16px 22px;*/ - position: relative; - left: -16px; - top: 22px; -} - -.multi-wizard.instance-wizard .select-network .select-container .select { - width: 100%; - float: left; - padding: 0; - position: relative; -} - -.multi-wizard.instance-wizard .select-network .select-container .select.advanced { - height: 74px; -} - -.multi-wizard.instance-wizard .select-network .select .advanced-options { - background: url(../images/sprites.png) -7px -795px; - width: 20px; - height: 20px; - float: right; - cursor: pointer; - margin-top: 15px; - margin-right: 13px; -} - -.multi-wizard.instance-wizard .select-network .select .advanced-options:hover, -.multi-wizard.instance-wizard .select-network .select.advanced .advanced-options { - background: url(../images/sprites.png) -32px -795px; -} - -.multi-wizard.instance-wizard .select-network .select .specify-ip { - display: none; - position: absolute; - top: 45px; - left: 0px; - width: 100%; -} - -.multi-wizard.instance-wizard .select-network .select.advanced .specify-ip { - display: block; -} - -.multi-wizard.instance-wizard .select-network .select.advanced .specify-ip input { - margin: 0px 0 0 15px; - width: 138px; -} - -.multi-wizard.instance-wizard .select-network .select-container .select input { - margin: 21px 15px 0px; - float: left; -} - -.multi-wizard.instance-wizard .select-network .select-container .select label { - float: left; - font-size: 11px; - margin: 4px 0 0 42px; - color: #4E6B82; -} - -.multi-wizard.instance-wizard .select-network .select-vpc { - float: left; - padding: 3px; - margin: 7px 0px 7px 7px; -} - -.multi-wizard.instance-wizard .select-network.no-add-network .select-vpc { - visibility: hidden !important; -} - -.multi-wizard.instance-wizard .select-network .select-vpc select { - width: 124px; -} - -.multi-wizard.instance-wizard .select-network .select-vpc label { - font-size: 10px; -} - -/**** New networ*/ -.multi-wizard.instance-wizard .select-network .select.new-network .advanced-options { - /*+placement:shift 379px 15px;*/ - position: relative; - left: 379px; - top: 15px; - position: absolute; -} - -.multi-wizard.instance-wizard .select-network .select.new-network .select.advanced { - height: 106px; - position: relative; -} - -.multi-wizard.instance-wizard .select-network .select.new-network.unselected .select.advanced { - height: auto; -} - -.multi-wizard.instance-wizard .select-network .select.new-network .select.advanced .specify-ip { - top: 74px; - left: 29px; -} - -.multi-wizard.instance-wizard .select-network .select.new-network .hide-if-selected { - display: none; -} - -.multi-wizard.instance-wizard .select-network .select.new-network.unselected .hide-if-unselected { - display: none; -} - -.multi-wizard.instance-wizard .select-network .select.new-network.unselected .hide-if-selected { - display: block; -} - -.multi-wizard.instance-wizard .select-network .select.new-network input { - margin-top: 24px; -} - -.multi-wizard.instance-wizard .select-network .select.new-network .field { - /*+placement:shift 41px 21px;*/ - position: relative; - left: 41px; - top: 21px; - font-size: 11px; - color: #000000; - position: absolute; -} - -.multi-wizard.instance-wizard .select-network .select.new-network .field .name { - width: 99px; - float: left; - padding: 3px 0 0; - /*[empty]display:;*/ -} - -.multi-wizard.instance-wizard .select-network .select.new-network .field .value { - float: left; -} - -.multi-wizard.instance-wizard .select-network .select.new-network .field .value input { - width: 138px; - margin: 0 0 0 11px; -} - -.multi-wizard.instance-wizard .select-network .select.new-network label.error { - display: none !important; -} - -.multi-wizard.instance-wizard .select-network .select.new-network .secondary-input { - width: 97px; - padding: 13px 0 17px; -} - -.multi-wizard.instance-wizard .select-network .select.new-network .secondary-input .name { - margin: 0 17px 0 0; -} - -.multi-wizard.instance-wizard .select-network .select.new-network .select-desc { - width: 255px; -} - -.multi-wizard.instance-wizard .select-network .select-container .select .select-desc .desc { - font-size: 11px; - color: #808080; - float: left; - max-width: 113px; -} - -.multi-wizard.instance-wizard .select-network .select-container .select .select-desc .name { - width: 116px; - font-size: 11px; - font-weight: normal; - float: left; - color: #000000; - margin: 0 16px 0 0; -} - -.multi-wizard.instance-wizard .select-network .select.new-network .select-desc .name { - width: 99px; - margin: 4px 0 0; -} - -.multi-wizard.instance-wizard .select-network .select.new-network.unselected .select-desc .name { - color: #808080; -} - -/*** Confirmation*/ -.multi-wizard .review .select-container .select { - height: 35px; - padding: 0; -} - -.multi-wizard .review .select-container .select .name { - float: left; - margin: 13px 22px 0 14px; - width: 127px; - font-size: 11px; -} - -.multi-wizard .review .select-container .select .value { - float: left; - margin: 9px 21px 0; - width: 136px; -} - -.multi-wizard .review .select-container .select .value span { - font-size: 10px; -} - -.multi-wizard .review .select-container .select .edit { - float: right; - cursor: pointer; - height: 18px; - margin: 11px 20px 0 0px; - background: url(../images/icons.png) -10px -452px; - padding: 0px 0px 0 20px; -} - -.multi-wizard .review .select-container .select.odd .edit a { - background: #EBEFF4; -} - -.multi-wizard .review .select-container .select .edit a { - font-size: 10px; - color: #0000FF; - text-decoration: none; - padding: 5px 0 8px; - background: #FFFFFF; -} - -.multi-wizard .review .select-container .select input, -.multi-wizard .review .select-container .select select { - margin: 0; - width: 151px; - float: left; -} - -/*** Diagram*/ -.multi-wizard.instance-wizard .diagram { - width: 1px; - height: 502px; - position: absolute; - top: 109px; - left: 465px; -} - -.multi-wizard.instance-wizard .diagram .part { - background: url(../images/instance-wizard-parts.png) no-repeat 0px 0px; -} - -.multi-wizard.instance-wizard .diagram .part.zone-plane { - width: 354px; - height: 117px; - background-position: -38px -55px; - /*+placement:displace -38px 259px;*/ - position: absolute; - margin-top: 259px; -} - -.multi-wizard.instance-wizard .diagram .part.computer-tower-front { - width: 95px; - height: 254px; - background-position: -54px -210px; - /*+placement:displace 44px 92px;*/ - position: absolute; - margin-left: 44px; - margin-top: 92px; -} - -.multi-wizard.instance-wizard .diagram .part.computer-tower-back { - width: 194px; - height: 271px; - background-position: -148px -192px; - /*+placement:displace 138px 74px;*/ - position: absolute; - margin-left: 138px; - margin-top: 74px; -} - -.multi-wizard.instance-wizard .diagram .part.os-drive { - width: 194px; - height: 86px; - background-position: -348px -192px; - /*+placement:displace 138px 74px;*/ - position: absolute; - margin-left: 138px; - margin-top: 74px; -} - -.multi-wizard.instance-wizard .diagram .part.cpu { - width: 194px; - height: 49px; - background-position: -344px -278px; - /*+placement:displace 138px 156px;*/ - position: absolute; - margin-left: 138px; - margin-top: 156px; -} - -.multi-wizard.instance-wizard .diagram .part.hd { - width: 194px; - height: 44px; - background-position: -344px -331px; - /*+placement:displace 138px 208px;*/ - position: absolute; - margin-left: 138px; - margin-top: 208px; -} - -.multi-wizard.instance-wizard .diagram .part.network-card { - width: 194px; - height: 44px; - background-position: -344px -380px; - /*+placement:displace 138px 260px;*/ - position: absolute; - margin-left: 138px; - margin-top: 260px; -} - -/** Add zone wizard*/ -.multi-wizard.zone-wizard { - display: block; - height: 675px; -} - -.multi-wizard.zone-wizard ul.subnav { - text-align: left; - /*+placement:shift 30px 104px;*/ - position: relative; - left: 30px; - top: 104px; - position: absolute; - list-style: disc inside; -} - -.multi-wizard.zone-wizard ul.subnav li { - float: left; - padding: 0; - font-size: 12px; - white-space: nowrap; - text-transform: uppercase; - list-style: none; - height: 20px; - margin-right: 34px; - color: #9A9A9A; -} - -.multi-wizard.zone-wizard ul.subnav li:after { - content: ">"; - font-size: 13px; - /*+placement:shift 4px -1px;*/ - position: relative; - left: 4px; - top: -1px; -} - -.multi-wizard.zone-wizard ul.subnav li.active { - color: #0000FF; -} - -.multi-wizard.zone-wizard .ui-tabs-panel { - height: 422px; - overflow: auto; - overflow-x: hidden; -} - -.multi-wizard.zone-wizard ul.ui-tabs-nav { - /*+placement:shift 0px 0px;*/ - position: relative; - left: 0px; - top: 0px; - float: left; - margin: 6px 0 3px 3px; -} - -.multi-wizard.zone-wizard .select-container { - height: 333px; - overflow: auto; -} - -.multi-wizard.zone-wizard .setup-guest-traffic .select-container { - background: #E9EAEB; - overflow: hidden; -} - -.multi-wizard.zone-wizard .setup-guest-traffic.basic .select-container { - background: #FFFFFF; -} - -.multi-wizard.zone-wizard .main-desc { - width: 516px; - float: left; - /*+placement:shift 0;*/ - position: relative; - left: 0; - top: 0; - margin: 23px 0 0px 6px; - font-weight: 100; - font-size: 14px; - color: #424242; -} - -.multi-wizard.zone-wizard .review .main-desc.pre-setup { - width: 90%; - font-size: 18px; - color: #2C4159; - background: url(../images/icons.png) no-repeat 74px -224px; - padding: 1px 0 1px 20px; - text-align: center; - margin-left: 50px; - font-weight: 100; - /*+placement:shift 0px 153px;*/ - position: relative; - left: 0px; - top: 153px; - left: -10px; - /*+text-shadow:0px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px #FFFFFF; - -o-text-shadow: 0px 1px #FFFFFF; - text-shadow: 0px 1px #FFFFFF; -} - -.multi-wizard.zone-wizard .info-desc { - font-size: 11px; - float: left; - text-align: left; - overflow: auto; - overflow-x: hidden; - padding: 11px; - width: 698px; - margin: 29px 0 68px 5px; - background: #FFFFFF; - border: 1px solid #C7C7C7; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; -} - -.multi-wizard.zone-wizard .setup-storage-traffic .info-desc { - margin-bottom: 10px; -} - -.multi-wizard.zone-wizard .setup-public-traffic .info-desc, -.multi-wizard.zone-wizard .setup-guest-traffic .info-desc, -.multi-wizard.zone-wizard .setup-physical-network .info-desc { - margin-bottom: 12px; -} - -.multi-wizard.zone-wizard .info-desc strong { - font-weight: bold; -} - -.multi-wizard.zone-wizard .main-desc em { - text-decoration: underline; - font-weight: bold; -} - -.multi-wizard.zone-wizard .progress ul li { - width: 107px; - margin-left: 7px; - padding: 0 32px 0 0; -} - -.multi-wizard.zone-wizard .progress ul li span { - width: 102px; -} - -.multi-wizard.zone-wizard .progress ul li span.arrow { - margin: -4px 0 0 109px; -} - -.multi-wizard.zone-wizard .select-network .content .section { - width: 665px; - height: 430px; - /*+placement:shift 0px 14px;*/ - position: relative; - left: 0px; - top: 14px; -} - -.multi-wizard.zone-wizard .select-network .content { - width: 100%; - height: 461px; - float: none; - margin: 7px auto auto; - padding-bottom: 28px; -} - -.multi-wizard.zone-wizard .select-network-model .select-area { - height: 181px; - width: 586px; - position: relative; -} - -.multi-wizard.zone-wizard .select-network-model .select-area.basic-zone { - height: 105px; -} - -.multi-wizard.zone-wizard .select-network-model .select-area.advanced-zone { - height: 233px; -} - -.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode { - height: 98px; - overflow: hidden; - float: left; - margin: 5px 0 0; - position: absolute; - top: 114px; - left: 9px; -} - -.multi-wizard.zone-wizard .select-network-model .select-area.disabled .isolation-mode { - /*+opacity:50%;*/ - filter: alpha(opacity=50); - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); - -moz-opacity: 0.5; - opacity: 0.5; -} - -.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .title { - font-size: 15px; - color: #5D7387; - /*+placement:shift 36px 2px;*/ - position: relative; - left: 36px; - top: 2px; -} - -.multi-wizard.zone-wizard .select-network-model .select-area .desc { - width: 373px; - height: 70px; - color: #727272; - background: #EFEFEF; - padding: 12px 18px 25px; - /*+placement:shift -27px 12px;*/ - position: relative; - left: -27px; - top: 12px; - /*+border-radius:7px;*/ - -moz-border-radius: 7px; - -webkit-border-radius: 7px; - -khtml-border-radius: 7px; - border-radius: 7px; - border-radius: 7px 7px 7px 7px; - line-height: 19px; -} - -.multi-wizard.zone-wizard .select-network-model .select-area.basic-zone .desc { - padding-bottom: 4px; -} - -.multi-wizard.zone-wizard .select-network-model .select-area .desc em { - font-weight: bold; - text-decoration: underline; -} - -.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .select-area { - width: 586px; - height: 61px; - overflow: hidden; - margin: 0; - padding: 0px 0 9px; - background: none; -} - -.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .select-area label { - font-size: 11px; - margin: 24px 0 0 2px; -} - -.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .select-area input { - margin: 26px 0 11px; -} - -.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .select-area input { - margin: 24px 8px 0 12px !important; - padding: 0 !important; -} - -.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .select-area .desc { - padding: 6px 7px 11px; - width: 388px; - height: 29px; - font-size: 11px; - margin-right: 9px; - background: #EFEFEF; - float: right; - /*+placement:shift -27px 12px;*/ - position: relative; - left: -27px; - top: 12px; -} - -.multi-wizard.zone-wizard .content.input-area { - width: 721px; - min-height: inherit; - margin: -50px auto auto 4px; - overflow: auto; - overflow-x: hidden; -} - -/*** Add physical network -- network form items*/ -.multi-wizard.zone-wizard .setup-physical-network .content.input-area { - width: 627px; - height: 396px; - background: transparent; - position: relative; -} - -.multi-wizard.zone-wizard .setup-physical-network .drag-helper-icon { - width: 80px; - height: 84px; - background: url(../images/sprites.png) no-repeat 0px -1365px; - /*+placement:shift 134px 303px;*/ - position: relative; - left: 134px; - top: 303px; - position: absolute; -} - -.multi-wizard.zone-wizard .select-container.multi { - display: inline-block; - width: 490px; - margin: 6px auto auto; - float: right; - height: auto; - border: 1px solid #BFBFBF; - overflow: visible; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - /*+box-shadow:inset 0px 1px 2px #CBCACA;*/ - -moz-box-shadow: inset 0px 1px 2px #CBCACA; - -webkit-box-shadow: inset 0px 1px 2px #CBCACA; - -o-box-shadow: inset 0px 1px 2px #CBCACA; - box-shadow: inset 0px 1px 2px #CBCACA; - background: #F8F6F6; - /*[empty]display:;*/ -} - -.multi-wizard.zone-wizard .select-container.multi.disabled { - border: 1px dotted #A7A7A7; - /*+opacity:40%;*/ - filter: alpha(opacity=40); - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); - -moz-opacity: 0.4; - opacity: 0.4; -} - -.multi-wizard.zone-wizard .select-container.multi .physical-network-icon { - width: 61px; - height: 53px; - float: left; - border-right: 1px solid #CDCDCD; - background: url(../images/sprites.png) -109px -1393px; -} - -.multi-wizard.zone-wizard .select-container.multi input { - width: 195px !important; - margin: 2px 0 0 17px !important; -} - -.multi-wizard.zone-wizard .select-container.multi .field { - width: 425px; - height: 46px; - margin-top: -6px; -} - -.multi-wizard.zone-wizard .select-container.multi .field .name { - width: 93%; - margin-left: 17px; -} - -.multi-wizard.zone-wizard .select-container.multi .drop-container { - background: #DAE2EC; - width: 484px; - height: 114px; - clear: both; - position: relative; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - border: 3px dashed #BBBFC4; -} - -.multi-wizard.zone-wizard .select-container.multi .drop-container ul { - background: #DAE2EC; - /*+border-radius:5px;*/ - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - -khtml-border-radius: 5px; - border-radius: 5px; - border-radius: 5px 5px 5px 5px; - width: 99%; - height: 94%; - top: 4px; - left: 2px; - position: absolute; -} - -.multi-wizard.zone-wizard .select-container.multi .drop-container ul.active { - background: #DFEAFF; -} - -.multi-wizard.zone-wizard .select-container.multi .drop-container ul li { - float: left; - margin: 2px 17px 0 29px; -} - -.multi-wizard.zone-wizard .select-container.multi .drop-container span.empty-message { - text-align: center; - color: #959BA0; - font-size: 13px; - /*+placement:shift 0px 45px;*/ - position: relative; - left: 0px; - top: 45px; -} - -/*** Add physical network -- traffic type drag area*/ -.multi-wizard.zone-wizard .traffic-types-drag-area { - width: 96px; - height: 370px; - background: #F0F1F2; - border: 1px solid #DCCACA; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - float: left; - text-align: left; - padding: 0; - margin: 8px 0 0; - /*+placement:shift 3px 0px;*/ - position: relative; - left: 3px; - top: 0px; -} - -.multi-wizard.zone-wizard .traffic-types-drag-area .header { - margin: 0; - font-size: 13px; - font-weight: bold; - color: #5C5C5C; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - background: #F8F8F8; - text-align: center; - padding: 8px 0 7px; - /*+border-radius:4px 4px 0 0;*/ - -moz-border-radius: 4px 4px 0 0; - -webkit-border-radius: 4px 4px 0 0; - -khtml-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; - border-bottom: 1px solid #DCCACA; -} - -.multi-wizard.zone-wizard .traffic-types-drag-area > ul { - width: 100%; -} - -.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li { - float: left; - font-size: 11px; - width: 100%; - background: transparent; - height: 83px; - margin: 16px 13px 0 0; -} - -.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li.required { - display: none; -} - -.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li.required.clone { - display: block; -} - -.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li ul.container { - width: 60px; - height: 54px; - margin-left: 16px; - background: #E4E4E4; - /*+border-radius:5px;*/ - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - -khtml-border-radius: 5px; - border-radius: 5px; - border-radius: 5px 5px 5px 5px; - /*+box-shadow:inset 0px 2px 4px #999696;*/ - -moz-box-shadow: inset 0px 2px 4px #999696; - -webkit-box-shadow: inset 0px 2px 4px #999696; - -o-box-shadow: inset 0px 2px 4px #999696; - box-shadow: inset 0px 2px 4px #999696; - border-bottom: 1px solid #FFFFFF; -} - -.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li ul.container li { - /*+placement:shift 1px 2px;*/ - position: relative; - left: 1px; - top: 2px; -} - -.multi-wizard.zone-wizard li.traffic-type-draggable { - display: block; - background: transparent url(../images/sprites.png) no-repeat 0px -1161px; - width: 51px; - height: 51px; - margin: auto; - cursor: move; - z-index: 5000; -} - -.multi-wizard.zone-wizard .traffic-types-drag-area li.traffic-type-draggable:hover, -.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable:hover { - width: 69px !important; - height: 66px !important; -} - -.multi-wizard.zone-wizard .traffic-types-drag-area li.traffic-type-draggable:hover, -.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable:hover { - /*+placement:shift -2px -4px;*/ - position: relative; - left: -2px; - top: -4px; -} - -.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable:hover { - /*+placement:shift -8px -6px;*/ - position: relative; - left: -8px; - top: -6px; - margin-right: 0px; - width: 70px !important; -} - -.multi-wizard.zone-wizard li.traffic-type-draggable.disabled { - /*+opacity:50%;*/ - filter: alpha(opacity=50); - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); - -moz-opacity: 0.5; - opacity: 0.5; - cursor: not-allowed; -} - -.multi-wizard.zone-wizard .traffic-types-drag-area ul > li.disabled { - display: none; -} - -.multi-wizard.zone-wizard li.traffic-type-draggable.disabled { - /*+opacity:50%;*/ - filter: alpha(opacity=50); - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); - -moz-opacity: 0.5; - opacity: 0.5; - cursor: not-allowed; -} - -.multi-wizard.zone-wizard li.traffic-type-draggable.management { - background-position: 0px -1161px; - height: 52px; -} - -.multi-wizard.zone-wizard .traffic-types-drag-area li.traffic-type-draggable.management:hover, -.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable.management:hover { - background-position: -11px -1225px; -} - -.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable.management:hover { - margin-right: -1px; -} - -.multi-wizard.zone-wizard li.traffic-type-draggable.public { - width: 53px; - height: 53px; - background-position: -54px -1160px; -} - -.multi-wizard.zone-wizard .traffic-types-drag-area li.traffic-type-draggable.public:hover, -.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable.public:hover { - background-position: -87px -1225px; -} - -.multi-wizard.zone-wizard li.traffic-type-draggable.guest { - background-position: -113px -1161px; -} - -.multi-wizard.zone-wizard .traffic-types-drag-area li.traffic-type-draggable.guest:hover, -.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable.guest:hover { - background-position: -166px -1227px; -} - -.multi-wizard.zone-wizard li.traffic-type-draggable.storage { - background-position: -170px -1160px; -} - -.multi-wizard.zone-wizard .traffic-types-drag-area li.traffic-type-draggable.storage:hover, -.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable.storage:hover { - background-position: -244px -1224px; -} - -.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li .info { - width: 100%; - margin: 5px 0 0 -2px; - line-height: 14px; - float: left; -} - -.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li .info .title { - text-align: center; - font-weight: bold; - color: #787879; -} - -.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li .info .desc { - display: none; -} - -/*** Traffic type icon -- edit button*/ -.multi-wizard.zone-wizard .traffic-type-draggable .edit-traffic-type { - display: none; -} - -.multi-wizard.zone-wizard .drop-container .traffic-type-draggable > .edit-traffic-type { - cursor: pointer; - display: block; - width: 59px; - height: 23px; - padding: 2px 9px 0 12px; - background: url(../images/bg-gradients.png) 0px -1342px; - border: 1px solid #C4C4C4; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - border-top: 1px solid #FFFFFF; - /*+placement:shift -16px 70px;*/ - position: relative; - left: -16px; - top: 70px; -} - -.multi-wizard.zone-wizard .drop-container .traffic-type-draggable > .edit-traffic-type:hover { - background-position: 0px -105px; - color: #FFFFFF; - /*+box-shadow:inset 0px -1px 1px #727272;*/ - -moz-box-shadow: inset 0px -1px 1px #727272; - -webkit-box-shadow: inset 0px -1px 1px #727272; - -o-box-shadow: inset 0px -1px 1px #727272; - box-shadow: inset 0px -1px 1px #727272; -} - -.multi-wizard.zone-wizard .drop-container .traffic-type-draggable > .edit-traffic-type:hover span { - color: #FFFFFF; - /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; -} - -.multi-wizard.zone-wizard .drop-container .traffic-type-draggable:hover > .edit-traffic-type { - /*+placement:shift -7px 76px;*/ - position: relative; - left: -7px; - top: 76px; -} - -.multi-wizard.zone-wizard .drop-container .traffic-type-draggable .edit-traffic-type span { - text-align: center; - font-size: 11px; - font-weight: bold; - color: #4E73A6; - /*+text-shadow:0px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px #FFFFFF; - -o-text-shadow: 0px 1px #FFFFFF; - text-shadow: 0px 1px #FFFFFF; -} - -.multi-wizard.zone-wizard .drop-container .traffic-type-draggable .edit-traffic-type span.icon { - float: left; - background: url(../images/sprites.png) -7px -4px; - padding: 7px 11px 0 7px; -} - -.multi-wizard.zone-wizard .traffic-type-draggable .edit-traffic-type span.name { - float: left; - width: 76px; - font-size: 10px; - padding: 2px; - color: #4E5F6F; - background: #DBE1E9; - /*+border-radius:4px 4px 0 0;*/ - -moz-border-radius: 4px 4px 0 0; - -webkit-border-radius: 4px 4px 0 0; - -khtml-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; - /*+placement:shift -13px -16px;*/ - position: relative; - left: -13px; - top: -16px; - margin-bottom: -13px; - border: 1px solid #C3BCBC; - border-bottom: 1px solid #D1CDCD; - /*+box-shadow:inset 0px 1px 1px #F5F4F4;*/ - -moz-box-shadow: inset 0px 1px 1px #F5F4F4; - -webkit-box-shadow: inset 0px 1px 1px #F5F4F4; - -o-box-shadow: inset 0px 1px 1px #F5F4F4; - box-shadow: inset 0px 1px 1px #F5F4F4; -} - -.multi-wizard.zone-wizard .traffic-type-draggable .edit-traffic-type:hover span.name { - background: #C4C3C3; -} - -/*** Configure guest network -- tabs*/ -.multi-wizard.zone-wizard .setup-guest-traffic .ui-widget-content { - width: 682px; - height: 281px; - border-bottom: none; - border-right: none; - /*+placement:shift -1px -7px;*/ - position: relative; - left: -1px; - top: -7px; -} - -.multi-wizard.zone-wizard .setup-guest-traffic ul.ui-tabs-nav { - width: 456px; - /*+placement:shift -4px -8px;*/ - position: relative; - left: -4px; - top: -8px; -} - -.multi-wizard.zone-wizard .setup-guest-traffic .main-desc { - margin-top: 27px; - margin-left: -3px; -} - -.multi-wizard.zone-wizard .setup-guest-traffic .content { - margin-left: -4px; - margin-top: 2px; -} - -/*** Multi-edit*/ -.multi-wizard.zone-wizard .multi-edit { - width: 732px; - float: left; - margin-left: 0px; -} - -.multi-wizard.zone-wizard .multi-edit table { - float: left; - width: 98%; -} - -.multi-wizard.zone-wizard .multi-edit table td, -.multi-wizard.zone-wizard .multi-edit table th { - padding: 4px; -} - -.multi-wizard.zone-wizard .multi-edit table th { - padding-top: 11px; - padding-bottom: 8px; -} - -.multi-wizard.zone-wizard .multi-edit table input { - margin: 2px 0px 2px -5px; - padding: 2px 0px; -} - -.multi-wizard.zone-wizard .multi-edit .data { - float: left; - overflow: visible; -} - -.multi-wizard.zone-wizard .multi-edit .data-body { - margin: 0; -} - -.multi-wizard.zone-wizard .multi-edit .data-body .data-item { - float: left; -} - -.multi-wizard.zone-wizard .multi-edit .data-body .data-item td { - padding-top: 8px; - padding-bottom: 8px; -} - -.multi-wizard.zone-wizard .multi-edit .data-body .data-item td span { - font-size: 10px; - text-overflow: ellipsis; - max-width: 91px; -} - -/*** Select container fields*/ -.multi-wizard.zone-wizard .select-container .field { - width: 100%; - padding-bottom: 13px; - float: left; -} - -.multi-wizard.zone-wizard .select-container .field.odd { - background: #EBEFF5; -} - -.multi-wizard.zone-wizard .select-container .field .name { - float: left; - margin: 18px 0 0 12px; - width: 95px; - font-size: 11px; - text-align: left; - line-height: 13px; -} - -.multi-wizard.zone-wizard .select-container .field .value { - float: left; - position: relative; -} - -.multi-wizard.zone-wizard .select-container .field .value span { - display: block; - font-size: 11px; - color: #052060; - margin: 20px 0 0; -} - -.multi-wizard.zone-wizard .select-container .field .value label.error { - color: #FF0000; - font-size: 10px; - position: absolute; - display: block; - text-align: left; - margin: 2px 0 0 16px; - float: right; - /*+placement:shift 1px 31px;*/ - position: relative; - left: 1px; - top: 31px; - position: absolute; -} - -.multi-wizard.zone-wizard .select-container .field .value input, -.multi-wizard.zone-wizard .select-container .field .value select { - width: 316px; - height: 20px; - margin: 13px 13px 0 18px; - float: left; -} - -.multi-wizard.zone-wizard .select-container .field .range-edit .range-item { - width: 106px; - float: left; -} - -.multi-wizard.zone-wizard .select-container .field .range-edit .range-item input[type=text] { - width: 93px; - margin: 16px 0 0 17px; -} - -.multi-wizard.zone-wizard .select-container .field .value select { - width: 327px; - height: 21px; -} - -.multi-wizard.zone-wizard .select-container .field .value input[type=checkbox] { - float: left; - display: block; - width: 13px; -} - -.multi-wizard.zone-wizard .select-container .field .value.multi-range input { - float: left; - width: 137px; -} - -.multi-wizard.zone-wizard .select-container .field .value.multi-range span { - float: left; - margin: 13px 0 0; -} - -.multi-wizard.zone-wizard .select-container .field .select-array { - width: 360px; - display: inline-block; -} - -/*[clearfix]*/.multi-wizard.zone-wizard .select-container .field .select-array-item { - width: 175px; - height: 34px; - float: left; -} - -.multi-wizard.zone-wizard .select-container .field .select-array-item .name { - width: 127px; - float: right; - padding: 0; - margin: 11px 0 0; -} - -.multi-wizard.zone-wizard .select-container .field .select-array-item .value { - width: 41px; - float: right; - padding: 0; - margin: 0; -} - -.multi-wizard.zone-wizard .select-container .field .select-array-item .value input { - width: inherit; - margin: 12px 0 0 11px; -} - -.multi-wizard.zone-wizard .setup-physical-network .button.add.new-physical-network { - background: #808080 url(../images/bg-gradients.png) 0px -264px; - visibility: hidden; - border: 1px solid #ADA7A7; - padding: 6px 20px 6px 11px; - font-size: 12px; - float: right; - margin: 14px 6px 0 0; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - color: #475765; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - cursor: pointer; -} - -.multi-wizard.zone-wizard .setup-physical-network .button.remove.physical-network { - padding: 10px 10px 0px; - background: url(../images/sprites.png) -6px -93px; - cursor: pointer; - position: relative; - float: right; - top: 27px; - margin: -26px 0 0; -} - -.multi-wizard.zone-wizard .setup-physical-network .select-container.disabled .button.remove.physical-network { - display: none; -} - -.multi-wizard.zone-wizard .setup-physical-network .button.remove.physical-network:hover { - background-position: -6px -675px; -} - -.multi-wizard.zone-wizard .setup-physical-network .button.add.new-physical-network:hover { - background-position: 0px -349px; - color: #000000; - /*+text-shadow:0px 1px 2px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 2px #FFFFFF; - -webkit-text-shadow: 0px 1px 2px #FFFFFF; - -o-text-shadow: 0px 1px 2px #FFFFFF; - text-shadow: 0px 1px 2px #FFFFFF; -} - -.multi-wizard.zone-wizard .setup-physical-network .button.add.new-physical-network .icon { - padding: 10px; - background: url(../images/sprites.png) -44px -58px; -} - -/*** Review / launch*/ -.multi-wizard.zone-wizard .review .launch-container { - width: 98%; - max-height: 438px; - overflow: auto; - overflow-x: hidden; - float: left; - background: #ECECEC 0px -12px; - background: #F7F7F7; - background: -moz-linear-gradient(top, #f7f7f7 0%, #eaeaea 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#eaeaea)); - background: -webkit-linear-gradient(top, #f7f7f7 0%,#eaeaea 100%); - background: -o-linear-gradient(top, #f7f7f7 0%,#eaeaea 100%); - background: -ms-linear-gradient(top, #f7f7f7 0%,#eaeaea 100%); - background: linear-gradient(to bottom, #f7f7f7 0%,#eaeaea 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#eaeaea',GradientType=0 ); - margin: 11px 0 0 7px; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border: 1px solid #CACACA; - border-radius: 4px 4px 4px 4px; -} - -.multi-wizard.zone-wizard .review .launch-container li { - width: 100%; - text-align: left; - padding: 15px 0 15px 12px; - font-size: 12px; - font-weight: bold; -} - -.multi-wizard.zone-wizard .review .launch-container li .icon { - /*[empty]display:;*/ - padding: 10px 21px 10px 10px; - background: url(../images/icons.png) -2px -217px; -} - -.multi-wizard.zone-wizard .review .launch-container li.loading .icon { - background: url(../images/ajax-loader-small.gif) no-repeat 2px 9px; -} - -.multi-wizard.zone-wizard .review .launch-container li.error .icon { - background-position: -2px -185px; -} - -.multi-wizard.zone-wizard .review .launch-container li.info .icon { - display: none; -} - -/*Tree view*/ -.tree-view { - width: 24%; - height: 98%; - overflow: auto; -} - -.tree-view.overflowScroll { - overflow: scroll; -} - -.tree-view ul { - display: block; - width: 85px; -} - -.tree-view ul li { - position: relative; - left: 21px; - font-size: 12px; - display: block; - margin: 7px 0 0; - clear: both; - width: 100%; -} - -.tree-view > ul { - /*+placement:shift 3px 40px;*/ - position: relative; - left: 3px; - top: 40px; -} - -.tree-view > ul > li { - left: 5px; -} - -.tree-view ul li .name { - float: left; - margin: 1px 0px 13px 17px; - padding: 6px 9px 6px 4px; - cursor: pointer; -} - -.tree-view ul li .name:hover { - text-decoration: underline; -} - -.tree-view ul li .name.selected { - background: #DDDCDD; - /*+border-radius:5px;*/ - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - -khtml-border-radius: 5px; - border-radius: 5px; - border-radius: 5px 5px 5px 5px; -} - -.tree-view ul li .expand { - width: 10px; - height: 10px; - float: left; - background: url(../images/buttons.png) -630px -245px; - margin: 4px 5px 0 0; - float: left; - cursor: pointer; - position: absolute; -} - -.tree-view ul li.expanded > .expand { - background-position: -631px -228px; -} - -#browser .tree-view div.toolbar div.text-search { - float: left; -} - -.detail-group table tbody { - border: none; -} - -/*Dialog-based list view*/ -.ui-dialog .list-view { - height: 515px !important; - overflow: auto; - overflow-x: hidden; -} - -.ui-dialog .list-view .toolbar { - top: 50px; - width: 854px; -} - -div.panel.ui-dialog div.list-view div.fixed-header { - top: 55px; - left: 35px; - width: 759px; - height: 49px; - background-color: #FFFFFF; - margin: 0; - z-index: 1; -} - -.ui-dialog .list-view table { - top: 9px !important; -} - -.ui-dialog.panel div.list-view div.data-table table { - width: 778px; - margin-top: 39px; -} - -.ui-dialog.panel div.list-view div.data-table table tbody tr.multi-edit-selected { - background: #C3E0FC; -} - -/*List-view: subselect dropdown*/ -.list-view .subselect { - width: 173px; - cursor: default; - display: block; - float: left; - background: #E8E8E8; - padding: 0; - margin: 0 0 0 -3px; - clear: both; - border: 1px solid #A8A7A7; - /*+border-radius:2px;*/ - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - -khtml-border-radius: 2px; - border-radius: 2px; -} - -.list-view .subselect:hover span { - color: initial; -} - -.list-view .subselect span { - margin: 4px 0 0 12px; - cursor: default; -} - -.list-view .subselect span.info { - background: none; -} - -.list-view .subselect span:hover { - color: initial; -} - -.list-view .subselect select { - width: 175px; - margin: 0 0 0 -11px; - font-size: 10px; -} - -/*Multi-edit*/ -div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBalancer div.multi-edit form table.multi-edit thead tr th, -div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBalancer div.multi-edit form table.multi-edit tbody tr td { - min-width: 100px; -} - -.multi-edit { - overflow: auto; -} - -.multi-edit > form { - position: relative; - clear: both; -} - -.multi-edit table.multi-edit { - border-top: none; -} - -.multi-edit table th { - min-width: 88px; - white-space: nowrap; - text-align: center; - text-indent: 0; -} - -.detail-group .multi-edit table td { - border-left: 1px solid #CDCCCC; -} - -.detail-view .multi-edit input { - width: 70%; -} - -.detail-view .multi-edit select { - width: 93%; - font-size: 10px; - min-width: 80px; -} - -.multi-edit input { - width: 85%; -} - -.multi-edit .range { - position: relative; -} - -.multi-edit .range .range-item { - float: left; -} - -.multi-edit .range input { - width: 35px; - margin-right: 2px; - position: relative; -} - -.multi-edit .range label { - display: block; - clear: both; - /*+placement:shift 3px 2px;*/ - position: relative; - left: 3px; - top: 2px; -} - -.multi-edit label.error { - font-size: 10px; - margin: 3px 0 0; - float: left; -} - -.multi-edit .data-table td span { - float: left; -} - -.multi-edit .data-table td.add-vm { - cursor: pointer; -} - -.multi-edit th.add-rule, -.multi-edit td.add-rule { - border-right: 1px solid #cdcccc; -} - -.multi-edit .data-table td.add-vm:hover { - color: #5FAAF7; -} - -.multi-edit .data-table .fixed-header { - display: none; -} - -.multi-edit .button.add-vm { - font-size: 10px; - font-weight: bold; - cursor: pointer; - color: #FFFFFF; - /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; - /*+box-shadow:0px 1px 1px #FFFFFF;*/ - -moz-box-shadow: 0px 1px 1px #FFFFFF; - -webkit-box-shadow: 0px 1px 1px #FFFFFF; - -o-box-shadow: 0px 1px 1px #FFFFFF; - box-shadow: 0px 1px 1px #FFFFFF; - border: 1px solid #858585; - border-top: none; - /*+border-radius:5px;*/ - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - -khtml-border-radius: 5px; - border-radius: 5px; - border-radius: 5px 5px 5px 5px; - width: 74px; - text-indent: 0px; - text-align: center; - padding: 6px 0px 4px; - background: url(../images/bg-gradients.png) repeat-x 0px -220px; - /*+placement:shift 4px 0px;*/ - position: relative; - left: 4px; - top: 0px; -} - -.multi-edit .button.add-vm:hover { - background-position: 0px -241px; - /*+box-shadow:inset 0px 1px 1px #000000;*/ - -moz-box-shadow: inset 0px 1px 1px #000000; - -webkit-box-shadow: inset 0px 1px 1px #000000; - -o-box-shadow: inset 0px 1px 1px #000000; - box-shadow: inset 0px 1px 1px #000000; -} - -.multi-edit .button.custom-action { - background: url(../images/bg-gradients.png) 0px -271px; - border: 1px solid #B7B7B7; - color: #485867; - font-size: 10px; - /*+text-shadow:0px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px #FFFFFF; - -o-text-shadow: 0px 1px #FFFFFF; - text-shadow: 0px 1px #FFFFFF; -} - -.multi-edit td.disabled .button.add-vm.custom-action { - /*+opacity:50%;*/ - filter: alpha(opacity=50); - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); - -moz-opacity: 0.5; - opacity: 0.5; - cursor: not-allowed; -} - -.multi-edit .button.custom-action:hover { - background: #808080 url(../images/bg-gradients.png); - color: #FFFFFF; - /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; -} - -.ui-dialog.multi-edit-add-list { - width: initial !important; -} - -.ui-dialog.multi-edit-add-list .ui-dialog-buttonpane { - display: block; -} - -.ui-dialog.multi-edit-add-list .ui-dialog-buttonpane .ui-dialog-buttonset { - width: initial; - padding-right: 15px; -} - -.ui-dialog.multi-edit-add-list .ui-dialog-buttonpane .ui-dialog-buttonset button { - top: 0; - left: 0; -} - -.multi-edit-add-list .ui-button.ok, -.multi-edit-add-list .ui-button.cancel { - float: right; - /*+placement:shift 506px -18px;*/ - position: relative; - left: 506px; - top: -18px; -} - -.multi-edit-add-list .ui-button.cancel { - /*+placement:shift 492px -18px;*/ - position: relative; - left: 492px; - border: none; - background: transparent; - color: #808B95; - font-weight: bold; -} - -.multi-edit-add-list div.form-container { - width: auto !important; - height: auto; - text-align: center; -} - -.multi-edit-add-list div.form-container div.name label { - display: inline; -} - -.multi-edit .data .data-body { - margin: auto auto auto 11px; - overflow: hidden; -} - -.panel.always-maximized .multi-edit .data .data-body { - width: 96%; - margin: 0 0 0 12px; -} - -.multi-edit .data .data-body .data-item { - margin-bottom: 14px; - border: 1px solid #CDCCCC; - position: relative; -} - -.multi-edit .data .data-body .data-item .loading-overlay { - background-position: 50% 50%; -} - -.multi-edit .data .data-body .data-item.loading { - height: 28px; - background: #FFFFFF url(../images/ajax-loader.gif) no-repeat center; - border: 1px solid #DDDDDD; -} - -.multi-edit .data .data-body .data-item.loading .label { - color: #808080; - font-size: 12px; - text-align: center; - text-indent: 19%; - margin: 12px 0 0; -} - -.multi-edit .data .data-body .data-item table { - margin: 0; - border: none; - width: 100%; - overflow: hidden; - background: #F0F1F2; -} - -.multi-edit .data .data-body .data-item tr { - background: #EFEFEF; - border: none; -} - -.multi-edit .data .data-body .data-item table tbody tr td { - background: #F0F1F2; - border-left: none; - border-right: 1px solid #CFC9C9; - height: 15px; - overflow: auto; -} - -.multi-edit .data .data-body .data-item > table tbody tr td span { - overflow: hidden; - max-width: 90%; - display: block; - float: left; - text-overflow: ellipsis; - white-space: nowrap; -} - -.multi-edit .data .data-body .data-item table tbody tr td.name { - padding-top: 9px; -} - -.multi-edit .data .data-body .data-item table tbody tr td.name span { - width: 53px; - color: #4C5D78; - font-weight: bold; -} - -.multi-edit .data .data-body .data-item .expandable-listing table tbody tr td.name span { - color: #4C5D78; - font-weight: normal; - cursor: pointer; -} - -.multi-edit .data .data-body .data-item .expandable-listing table tbody tr td.name span:hover { - color: #0000FF; -} - -div#details-tab-aclRules table.multi-edit tr th.number, -div#details-tab-aclRules div.data-item table tr td.number { - width: 45px !important; - min-width: 45px !important; - max-width: 45px !important; -} - -div#details-tab-aclRules div.multi-edit table tr th.action, -div#details-tab-aclRules div.multi-edit table tr td.action { - width: 40px !important; - min-width: 40px !important; - max-width: 40px !important; -} - -div#details-tab-aclRules div.multi-edit table tr th.protocol, -div#details-tab-aclRules div.multi-edit table tr td.protocol { - width: 50px !important; - min-width: 50px !important; - max-width: 50px !important; -} - -div#details-tab-aclRules div.multi-edit table tr th.protocolnumber, -div#details-tab-aclRules div.multi-edit table tr td.protocolnumber { - width: 60px !important; - min-width: 60px !important; - max-width: 60px !important; -} - -div#details-tab-aclRules div.multi-edit table tr th.traffictype, -div#details-tab-aclRules div.multi-edit table tr td.traffictype { - width: 60px !important; - min-width: 60px !important; - max-width: 60px !important; -} - -div#details-tab-aclRules div.multi-edit table tr th.reason, -div#details-tab-aclRules div.multi-edit table tr td.reason { - width: 60px !important; - min-width: 60px !important; - max-width: 60px !important; -} - -div#details-tab-aclRules div.multi-edit table tr th.icmptype, div#details-tab-aclRules div.multi-edit table tr td.icmptype, -div#details-tab-aclRules div.multi-edit table tr th.icmpcode, div#details-tab-aclRules div.multi-edit table tr td.icmpcode { - width: 60px !important; - min-width: 60px !important; - max-width: 60px !important; -} - -div#details-tab-aclRules div.multi-edit table tr th.startport, div#details-tab-aclRules div.multi-edit table tr td.startport, -div#details-tab-aclRules div.multi-edit table tr th.endport, div#details-tab-aclRules div.multi-edit table tr td.endport { - width: 60px !important; - min-width: 60px !important; - max-width: 60px !important; -} - -div#details-tab-aclRules td.cidrlist span { - text-align: center; - width: 100%; -} - -.multi-edit .data .data-body .data-item table tbody tr td.multi-actions .action { - cursor: pointer; - width: 28px; - height: 21px; - float: left; -} - -.multi-edit .data .data-body .data-item table tbody tr td.multi-actions .action span.icon { - background-image: url(../images/sprites.png); - cursor: pointer; - width: 28px; - height: 21px; - float: left; -} - -.multi-edit .data .data-body .data-item tr td .expand { - width: 14px; - height: 15px; - display: block; - cursor: pointer; - background: #FFFFFF url(../images/sprites.png) -541px -499px; - border: 1px solid #D0D0D0; - /*+border-radius:9px;*/ - -moz-border-radius: 9px; - -webkit-border-radius: 9px; - -khtml-border-radius: 9px; - border-radius: 9px; - border-radius: 9px 9px 9px 9px; - float: left; - margin: -3px 0 0 11px; -} - -.multi-edit .data .data-body .data-item tr td.add-vm, -.multi-edit tr th.add-vm { - cursor: pointer; -} - -.multi-edit .data .data-body .data-item tr td .custom-action { - margin: -2px 0 0 0px; -} - -.multi-edit .data .data-body .data-item tr td.add-vm:hover { - color: #0060FF; - font-weight: bold; -} - -.multi-edit .data .data-body .data-item tr td.add-vm p { - text-indent: 0; - padding-left: 9px; - margin-top: 3px; - margin-bottom: 6px; -} - -.multi-edit .data .data-body .data-item tr td.multi-actions .icon { - /*+placement:shift -3px -2px;*/ - position: relative; - left: -3px; - top: -2px; -} - -.multi-edit .data .data-body .data-item .expandable-listing { - width: 99.8%; - border: 1px solid #CFC9C9; - max-height: 161px; - overflow: auto; - overflow-x: hidden; -} - -.multi-edit .data .data-body .data-item .expandable-listing tr { - width: 100%; - border: none; - margin: 0; - padding: 0; -} - -.multi-edit .data .data-body .data-item .expandable-listing tr td { - background: #DDE0E2; - border: none; - margin: 0; - text-indent: 37px; -} - -.multi-edit .data .data-body .data-item .expandable-listing tr.odd td { - background: #F2F0F0; -} - -.ui-tabs-panel .add-by { - font-size: 12px; - color: #536474; - width: 94%; - margin: 13px 0 0 14px; -} - -.ui-tabs-panel .add-by .selection { - width: 236px; - margin: 8px 0 0; -} - -.ui-tabs-panel .add-by .selection input { - margin: 0 6px 0 0; -} - -.ui-tabs-panel .add-by .selection label { - margin: 0 22px 0 0; -} - -/** Fix long table overflow*/ -.detail-view .multi-edit { - width: 100%; -} - -.detail-view .multi-edit table { - width: 97%; - max-width: inherit; -} - -.detail-view .multi-edit table tr th, -.detail-view .multi-edit table tr td { - width: 84px !important; - min-width: 84px !important; - max-width: 84px !important; - font-size: 10px; -} - -/* special case for 'Source CIDR' column - make it wide enough to fit a CIDR without ellipsizing*/ -.detail-view .multi-edit table tr th.cidrlist, -.detail-view .multi-edit table tr td.cidrlist { - min-width: 118px !important; - max-width: 118px !important; - padding: 0 0 0 0; -} -.detail-view .multi-edit td.cidrlist input { - width: 85%; -} - - -/** Header fields*/ -.multi-edit .header-fields { - position: relative; - /*+placement:shift 14px 11px;*/ - position: relative; - left: 14px; - top: 11px; -} - -.multi-edit .header-fields .form-container { - width: 96%; - height: 32px; - background: #E4E4E4; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border: 1px solid #D4CFCF; -} - -.multi-edit .header-fields .form-item { - padding: 4px 15px 3px 9px; - margin-bottom: 32px; - margin-right: 0; - float: left; -} - -.multi-edit .header-fields .form-item input, -.multi-edit .header-fields .form-item select { - margin-top: 4px; -} - -.multi-edit .header-fields .form-item .name, -.multi-edit .header-fields .form-item .value { - float: left; -} - -.multi-edit .header-fields .form-item .name { - font-size: 14px; - padding: 5px; - color: #55687A; -} - -/*Sortable*/ -.multi-edit table tbody tr td.reorder, -.multi-edit table thead tr th.reorder { - width: 16px !important; - min-width: 16px !important; - max-width: 16px !important; -} - -/*Security Rules*/ -.security-rules .multi-edit input { - width: 69px; - margin: 0 0 0 9px; -} - -.security-rules .multi-edit .range input { - width: 44px; - margin: 0; -} - -/*Recurring snapshots*/ -.recurring-snapshots { - display: inline-block; -} - -.recurring-snapshots .schedule .add-snapshot-actions { - width: 581px; - clear: both; - float: left; - font-size: 13px; - margin-bottom: 13px; - border-top: 1px solid #FFFFFF; -} - -.recurring-snapshots .schedule .add-snapshot-action { - /*+placement:shift -7px -34px;*/ - position: relative; - left: -7px; - top: -34px; - float: right; - cursor: pointer; - padding: 10px; -} - -.recurring-snapshots .schedule .add-snapshot-action.add { - color: #0000FF; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - font-weight: bold; -} - -.recurring-snapshots .schedule .add-snapshot-action.add:hover { - color: #1A85F4; -} - -.recurring-snapshots .schedule p { - font-size: 13px; - margin: 0; -} - -.recurring-snapshots .schedule .forms form { - font-size: 12px; - color: #4F6171; -} - -.recurring-snapshots .schedule .forms form select { - float: left; - margin: 3px 10px 3px 3px; - max-width: 100%; -} - -.recurring-snapshots .schedule .forms form input { - /*+placement:shift 1px 4px;*/ - position: relative; - left: 1px; - top: 4px; -} - -.recurring-snapshots .schedule .forms form label { - /*+placement:shift 5px 4px;*/ - position: relative; - left: 5px; - top: 4px; -} - -.recurring-snapshots .schedule .forms form label.error { - width: 100%; - float: left; - font-size: 10px; -} - -.recurring-snapshots .schedule .forms form .field { - width: 100%; - float: left; - margin: 8px 0 0; -} - -.recurring-snapshots .schedule .forms form .name { - float: left; - text-align: right; - width: 72px; - padding: 4px 0 0; - margin: 3px 14px 0 0; -} - -.recurring-snapshots .schedule .forms form .value { - width: 470px; - float: left; - text-align: left; -} - -.ui-dialog .recurring-snapshots .ui-widget-content { - padding: 0; - margin: 0; -} - -.recurring-snapshots .ui-button { - /*+placement:anchor-bottom-right 9px 9px;*/ - position: absolute; - right: 9px; - bottom: 9px; -} - -.recurring-snapshots .scheduled-snapshots { - clear: both; - position: relative; - top: -26px; -} - -.recurring-snapshots .scheduled-snapshots p { - font-weight: bold; - font-size: 12px; - /*+text-shadow:0px 2px 2px #FFFFFF;*/ - -moz-text-shadow: 0px 2px 2px #FFFFFF; - -webkit-text-shadow: 0px 2px 2px #FFFFFF; - -o-text-shadow: 0px 2px 2px #FFFFFF; - text-shadow: 0px 2px 2px #FFFFFF; -} - -.recurring-snapshots .scheduled-snapshots table { - border: none; - /*+placement:shift 0px -14px;*/ - position: relative; - top: -14px; - width: 100%; - margin: 0; -} - -.recurring-snapshots .scheduled-snapshots table td.actions div.action span.icon { - /*+placement:shift -3px -4px;*/ - position: relative; - left: -3px; - top: -4px; -} - -.recurring-snapshots .scheduled-snapshots tr { - padding: 0; - border: 0; - display: block; - width: 100%; - height: 38px; - margin: 22px 0 0; - display: none; -} - -.recurring-snapshots .scheduled-snapshots tr td { - border: none; - padding: 5px 0px 0 14px; - font-size: 12px; - word-break: keep-all; - word-wrap: normal; - text-indent: 0px; -} - -.recurring-snapshots .scheduled-snapshots tr td.keep { - min-width: 60px; -} - -.recurring-snapshots .scheduled-snapshots tr td.timezone { - min-width: 168px; - font-size: 12px; -} - -.recurring-snapshots .scheduled-snapshots tr td.timezone span { - font-size: 10px; -} - -.recurring-snapshots .scheduled-snapshots table tbody tr td.actions { - max-width: 22px !important; - min-width: 22px !important; -} - -.recurring-snapshots .scheduled-snapshots tr td.time { - min-width: 144px; - background: url(../images/sprites.png) no-repeat -536px -533px; - text-indent: 0.7em; -} - -.recurring-snapshots .scheduled-snapshots tr.daily td.time { - background-position: -537px -569px; -} - -.recurring-snapshots .scheduled-snapshots tr.weekly td.time { - background-position: -537px -605px; -} - -.recurring-snapshots .scheduled-snapshots tr.monthly td.time { - background-position: -537px -648px; -} - -.recurring-snapshots p { - text-align: left; - font-size: 14px; - line-height: 18px; - padding: 0 47px 0 0; - color: #475765; - margin-bottom: 16px; - /*+text-shadow:0px 3px 3px #FFFFFF;*/ - -moz-text-shadow: 0px 3px 3px #FFFFFF; - -webkit-text-shadow: 0px 3px 3px #FFFFFF; - -o-text-shadow: 0px 3px 3px #FFFFFF; - text-shadow: 0px 3px 3px #FFFFFF; - max-width: 550px; - display: block; -} - -.recurring-snapshots .ui-tabs ul { - position: relative; - margin: 0; - width: 100%; - padding: 0; - margin: 0; - display: block; -} - -.recurring-snapshots .ui-tabs ul li a { - width: 76px; - background: url(../images/sprites.png) no-repeat -521px -533px; -} - -.recurring-snapshots .ui-tabs ul li.disabled a { - /*+opacity:50%;*/ - filter: alpha(opacity=50); - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); - -moz-opacity: 0.5; - opacity: 0.5; -} - -.recurring-snapshots .ui-tabs ul li.disabled:hover a { - border: none; - background-color: transparent; - border: none; - /*+box-shadow:0px 0px;*/ - -moz-box-shadow: 0px 0px; - -webkit-box-shadow: 0px 0px; - -o-box-shadow: 0px 0px; - box-shadow: 0px 0px; - -moz-box-shadow: 0px 0px none; - -webkit-box-shadow: 0px 0px none; - -o-box-shadow: 0px 0px none; - -moz-box-shadow: none; - -webkit-box-shadow: none; - -o-box-shadow: none; - cursor: default; -} - -.recurring-snapshots .ui-tabs ul li.daily a { - background-position: -522px -570px; -} - -.recurring-snapshots .ui-tabs ul li.weekly a { - background-position: -526px -605px; -} - -.recurring-snapshots .ui-tabs ul li.monthly a { - background-position: -528px -649px; -} - -.recurring-snapshots .ui-tabs div.ui-tabs-panel { - height: 144px; - width: 100%; - border: none; - background: #E9E9E9; -} - -.recurring-snapshots .ui-tabs div.ui-tabs-panel.ui-tabs-hide { - display: none; -} - -/*Upload volume*/ -.upload-volume .list-view { - margin-top: 5px !important; -} - -.upload-volume .listView-container { - background: #FFFFFF; - width: 823px; - margin: 71px 0px 20px 28px; - border: 1px solid #DADADA; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; -} - -.upload-volume div.list-view .data-table div.fixed-header { - top: 115px !important; - left: 56px !important; - background: #FFFFFF !important; -} - -.upload-volume .data-table table.body { - margin-top: 66px !important; - margin-left: 19px; -} - -.upload-volume .list-view .toolbar { - top: 118px; - width: 801px; - left: 43px; - background: transparent; - border: none; -} - -.upload-volume .top-fields { - float: left; - clear: none; - margin-left: 24px; -} - -.upload-volume .top-fields .field { - float: left; - margin-right: 50px; -} - -.upload-volume .top-fields input { - float: right; - /*+border-radius:3px;*/ - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; - border-radius: 3px 3px 3px 3px; - padding: 2px; - width: 186px; -} - -.upload-volume .top-fields label, -.upload-volume .desc { - display: block; - float: left; - padding: 6px; - font-size: 12px; - color: #4C5D6C; - /*+text-shadow:0px 0px #FFFFFF;*/ - -moz-text-shadow: 0px 0px #FFFFFF; - -webkit-text-shadow: 0px 0px #FFFFFF; - -o-text-shadow: 0px 0px #FFFFFF; - text-shadow: 0px 0px #FFFFFF; -} - -.upload-volume .desc { - position: absolute; - width: 825px; - text-align: left; - top: 79px; - left: 32px; - border-top: 1px solid #CFCFCF; -} - -/*Network detail chat*/ -.network-chart { - width: 100%; - height: 100%; - position: relative; - background: url(../images/bg-network.png) no-repeat 38% 70px; -} - -.network-chart.static-nat { - background: url(../images/bg-network-nat.png) no-repeat 31% 62px; -} - -.network-chart ul { - width: 536px; - height: 421px; - position: absolute; - top: 0px; - left: 0px; -} - -.network-chart li { - display: block; - width: 147px; - height: 86px; - background: url(../images/buttons.png) no-repeat 0px -399px; -} - -.network-chart li.static-nat-enabled { - /*+placement:shift 31px 44px;*/ - position: relative; - left: 31px; - top: 44px; -} - -.network-chart li.static-nat-enabled .vmname { - /*+placement:shift 16px 41px;*/ - position: relative; - left: 16px; - top: 41px; - cursor: pointer; - max-width: 98px; - max-height: 21px; - padding: 7px; - font-size: 10px; - position: absolute; - overflow: hidden; - color: #485563; - font-weight: bold; - /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; - background: url(../images/bg-gradients.png) repeat-x 2px -221px; - color: #FFFFFF; - /*+border-radius:9px;*/ - -moz-border-radius: 9px; - -webkit-border-radius: 9px; - -khtml-border-radius: 9px; - border-radius: 9px; - border-radius: 9px 9px 9px 9px; -} - -.network-chart li.static-nat-enabled .vmname:hover { - background-position: 0px -946px; -} - -.network-chart li.static-nat-enabled .name { - background: url(../images/sprites.png) no-repeat -6px -460px; -} - -.network-chart li.static-nat-enabled .name span { - font-size: 11px; - padding: 0 0 0 25px; -} - -.network-chart li.disabled { - /*+opacity:100%;*/ - filter: alpha(opacity=100); - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); - -moz-opacity: 1; - opacity: 1; -} - -.network-chart li.firewall { - /*+placement:shift 282px 188px;*/ - position: relative; - left: 356px; - top: 188px; - position: absolute; -} - -.network-chart li.loadBalancing { - /*+placement:shift 167px 342px;*/ - position: relative; - left: 237px; - top: 342px; - position: absolute; -} - -.network-chart li.portForwarding { - /*+placement:shift 401px 342px;*/ - position: relative; - left: 480px; - top: 342px; - position: absolute; -} - -.network-chart li .name { - color: #4E5F6F; - width: 130px; - /*+text-shadow:0px 1px 1px #FCFCFC;*/ - -moz-text-shadow: 0px 1px 1px #FCFCFC; - -webkit-text-shadow: 0px 1px 1px #FCFCFC; - -o-text-shadow: 0px 1px 1px #FCFCFC; - text-shadow: 0px 1px 1px #FCFCFC; - /*+placement:shift 10px 11px;*/ - position: relative; - left: 10px; - top: 11px; -} - -.network-chart li.disabled .name { - color: #8695A5; - /*+placement:shift 5px 32px;*/ - position: relative; - left: 5px; - top: 32px; - text-decoration: line-through; - text-align: center; -} - -.network-chart li .view-details { - /*+placement:anchor-bottom-right 34px 19px;*/ - position: absolute; - right: 34px; - bottom: 19px; - cursor: pointer; - background: #F7F7F7; - background: rgb(247, 247, 247); - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYWVhZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); - background: -moz-linear-gradient(top, rgba(247,247,247,1) 1%, rgba(234,234,234,1) 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(247,247,247,1)), color-stop(100%,rgba(234,234,234,1))); - background: -webkit-linear-gradient(top, rgba(247,247,247,1) 1%,rgba(234,234,234,1) 100%); - background: -o-linear-gradient(top, rgba(247,247,247,1) 1%,rgba(234,234,234,1) 100%); - background: -ms-linear-gradient(top, rgba(247,247,247,1) 1%,rgba(234,234,234,1) 100%); - background: linear-gradient(to bottom, rgba(247,247,247,1) 1%,rgba(234,234,234,1) 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#eaeaea',GradientType=0 ); - font-size: 11px; - padding: 8px 20px; - color: #000000; - border: 1px solid #A2A2A2; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; -} - -.network-chart li .view-details:hover { - background: #D5D5D5; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - /*+box-shadow:inset 0px 0px 4px #000000;*/ - -moz-box-shadow: inset 0px 0px 4px #000000; - -webkit-box-shadow: inset 0px 0px 4px #000000; - -o-box-shadow: inset 0px 0px 4px #000000; - box-shadow: inset 0px 0px 4px #000000; -} - -.network-chart li.disabled .view-details { - display: none; -} - -/*System Dashboard*/ -.system-dashboard { - height: 258px; - width: 962px; - display: block; - /*+border-radius:3px;*/ - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; - /*+box-shadow:inset 0px 0px 1px #FFFFFF;*/ - -moz-box-shadow: inset 0px 0px 1px #FFFFFF; - -webkit-box-shadow: inset 0px 0px 1px #FFFFFF; - -o-box-shadow: inset 0px 0px 1px #FFFFFF; - box-shadow: inset 0px 0px 1px #FFFFFF; - position: relative; - margin: 18px 0 0 15px; -} - -.system-dashboard.zone { - height: 609px; - background-position: 0px -1423px; -} - -.system-dashboard-view .toolbar { - position: relative; -} - -.system-dashboard .head { - color: #000000; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - text-indent: 11px; - padding: 0px 0 12px; - /*+box-shadow:0px 0px 1px #FFFFFF;*/ - -moz-box-shadow: 0px 0px 1px #FFFFFF; - -webkit-box-shadow: 0px 0px 1px #FFFFFF; - -o-box-shadow: 0px 0px 1px #FFFFFF; - box-shadow: 0px 0px 1px #FFFFFF; -} - -.project-view .system-dashboard .head { - color: #FFFFFF; - /*+text-shadow:0px -1px #000000;*/ - -moz-text-shadow: 0px -1px #000000; - -webkit-text-shadow: 0px -1px #000000; - -o-text-shadow: 0px -1px #000000; - text-shadow: 0px -1px #000000; - /*+box-shadow:none;*/ - -moz-box-shadow: none; - -webkit-box-shadow: none; - -o-box-shadow: none; - box-shadow: none; - padding-top: 14px; -} - -.system-dashboard .view-more, -.system-dashboard .view-all { - float: right; - margin: -4px 19px 0 0; - cursor: pointer; - font-size: 13px; - font-weight: 100; - background: #DADADA repeat-x 0px -735px; - background: rgb(234, 234, 234); - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhZWFlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmQ2ZDYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); - background: -moz-linear-gradient(top, rgba(234,234,234,1) 0%, rgba(214,214,214,1) 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,234,234,1)), color-stop(100%,rgba(214,214,214,1))); - background: -webkit-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(214,214,214,1) 100%); - background: -o-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(214,214,214,1) 100%); - background: -ms-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(214,214,214,1) 100%); - background: linear-gradient(to bottom, rgba(234,234,234,1) 0%,rgba(214,214,214,1) 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#d6d6d6',GradientType=0 ); - /*+border-radius:3px;*/ - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; - border-radius: 3px 3px 3px 3px; - border: 1px solid #B5B5B5; -} - -.system-dashboard .view-more:hover, -.system-dashboard .view-all:hover { - background-position: 0px -763px; - /*+box-shadow:inset 0px 1px 1px #000000;*/ - -moz-box-shadow: inset 0px 1px 1px #000000; - -webkit-box-shadow: inset 0px 1px 1px #000000; - -o-box-shadow: inset 0px 1px 1px #000000; - box-shadow: inset 0px 1px 1px #000000; - background: #C1C1C1; -} - -.system-dashboard .status_box .view-all { - /*+placement:shift 18px 110px;*/ - position: relative; - left: 18px; - top: 110px; - width: 83%; - position: absolute; - text-align: center; - padding: 8px 0; -} - -.system-dashboard .status_box { - font-size: 14px; - margin: 10px 0 0; - background: transparent; - border: none; -} - -.system-dashboard .status_box li { - height: 178px; - width: 228px; - padding: 0; - margin: 0 0 0 8px; - /*+border-radius:3px;*/ - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; - position: relative; - border: 1px solid #C6C6C6; - float: left; -} - -.system-dashboard.zone .status_box li { - margin-bottom: 8px; - height: 152px; - background-color: #F4F4F4; -} - -.system-dashboard.zone .status_box li .icon { - background: url(../images/infrastructure-icons.png) no-repeat 0px 0px; - padding: 65px 80px 5px; - /*+placement:shift 31px 19px;*/ - position: relative; - left: 51px; - top: 19px; - position: absolute; - /*+opacity:56%;*/ - filter: alpha(opacity=56); - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=56); - -moz-opacity: 0.56; - opacity: 0.56; -} - -.system-dashboard .status_box li span.label { - color: #CCCFD4; - font-size: 12px; -} - -.system-dashboard .status_box li span.total { - font-size: 25px; -} - -.system-dashboard .status_box li span.label { - color: #CCCFD4; - font-size: 12px; -} - -.system-dashboard .status_box li span.unit { - color: #C1C4C9; - font-size: 13px; -} - -.system-dashboard .status_box li span.header { - margin: 1px 0 0; - /*+placement:shift 13px 5px;*/ - position: relative; - left: 13px; - top: 13px; - font-weight: 100; -} - -.system-dashboard.zone .status_box li span.header { - font-size: 14px; - color: #4F4F4F; -} - -.system-dashboard .status_box li span.status { - font-size: 27px; - /*+placement:shift 13px 141px;*/ - position: relative; - left: 13px; - top: 141px; - position: absolute; - color: #25FF25; - /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; -} - -.system-dashboard .status_box li span.instance.total { - /*+placement:shift 12px 32px;*/ - position: relative; - left: 12px; - top: 32px; - position: absolute; -} - -.system-dashboard .status_box li span.instance.label { - /*+placement:shift 15px 53px;*/ - position: relative; - left: 15px; - top: 53px; - position: absolute; -} - -.system-dashboard .status_box li span.vcpu-hours.total { - /*+placement:shift 13px 76px;*/ - position: relative; - left: 13px; - top: 76px; - position: absolute; -} - -.system-dashboard .status_box li span.vcpu-hours.label { - /*+placement:shift 14px 95px;*/ - position: relative; - left: 14px; - top: 95px; - position: absolute; -} - -.system-dashboard .status_box li span.gb-hours.total { - /*+placement:shift 106px 77px;*/ - position: relative; - left: 106px; - top: 77px; - position: absolute; -} - -.system-dashboard .status_box li span.gb-hours.label { - /*+placement:shift 106px 95px;*/ - position: relative; - left: 106px; - top: 95px; - position: absolute; -} - -.system-dashboard .status_box li span.overview.total { - font-size: 56px; - /*+placement:shift 9px 29px;*/ - position: relative; - left: 9px; - top: 29px; - position: absolute; - font-weight: 100; - color: #2B7DAF; - /*+text-shadow:0px -1px 2px #FFFFFF;*/ - -moz-text-shadow: 0px -1px 2px #FFFFFF; - -webkit-text-shadow: 0px -1px 2px #FFFFFF; - -o-text-shadow: 0px -1px 2px #FFFFFF; - text-shadow: 0px -1px 2px #FFFFFF; -} - -.system-dashboard .status_box li.capacity span.overview.total { - font-size: 32px; -} - -.system-dashboard .status_box li span.overview.label { - /*+placement:shift 52px 79px;*/ - position: relative; - left: 52px; - top: 79px; - position: absolute; -} - -.system-dashboard .status_box li span.used.total { - /*+placement:shift 14px 130px;*/ - position: relative; - left: 14px; - top: 130px; - font-size: 30px; - position: absolute; -} - -.system-dashboard .status_box li span.used.label { - /*+placement:shift 14px 153px;*/ - position: relative; - left: 14px; - top: 153px; - position: absolute; -} - -.system-dashboard .status_box li span.used.unit { - /*+placement:shift 67px 135px;*/ - position: relative; - left: 67px; - top: 135px; - position: absolute; -} - -.system-dashboard .status_box li span.available.unit { - /*+placement:shift 159px 135px;*/ - position: relative; - left: 159px; - top: 135px; - position: absolute; -} - -.system-dashboard .status_box li span.available.total { - /*+placement:shift 97px 130px;*/ - position: relative; - left: 97px; - top: 130px; - font-size: 30px; - position: absolute; -} - -.system-dashboard .status_box li span.available.label { - /*+placement:shift 97px 153px;*/ - position: relative; - left: 97px; - top: 153px; - position: absolute; -} - -.system-dashboard-view .socket-info { - width: 100%; - height: 239px; - overflow: auto; - float: left; - padding: 0; -} - -.system-dashboard-view .socket-info > .title { - padding: 8px; - font-size: 13px; -} - -.system-dashboard-view .socket-info li { - width: 139px; - padding: 13px; - /*+border-radius:3px;*/ - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; - margin: 7px; - border: 1px solid #CCC; - background: #EFEFEF; - float: left; -} - -.system-dashboard-view .socket-info li > div { - text-decoration: none; - float: left; -} - -.system-dashboard-view .socket-info li .name { - width: 100%; - font-weight: 100; - margin-bottom: 13px; -} - -.system-dashboard-view .socket-info li .hosts, -.system-dashboard-view .socket-info li .sockets { - width: 54px; - /*[empty]color:;*/ -} - -.system-dashboard-view .socket-info li div .title { - color: #424242; - border: none; - font-size: 13px; - padding-bottom: 3px; -} - -.add-zone-resource .form-container { - height: auto !important; - display: inline-block; - overflow: visible; -} - -.add-zone-resource .form-container form { - display: inline-block; - height: auto; -} - -.add-zone-resource .head { - width: 100%; - margin-bottom: 7px; - display: inline-block; - border-bottom: 1px solid #AFBDCA; - /*+box-shadow:0px 1px #FFFFFF;*/ - -moz-box-shadow: 0px 1px #FFFFFF; - -webkit-box-shadow: 0px 1px #FFFFFF; - -o-box-shadow: 0px 1px #FFFFFF; - box-shadow: 0px 1px #FFFFFF; -} - -.add-zone-resource .head span { - float: left; - font-size: 14px; - text-indent: 5px; - padding: 10px 0 18px; -} - -.add-zone-resource .head select { - float: left; - margin: -3px 0 6px 13px; - margin: 8px 0 0 9px; -} - -/** Infrastructure icons*/ -.system-dashboard.zone .status_box li.zones .icon { - background-position: -36px -105px; -} - -.system-dashboard.zone .status_box li.pods .icon { - background-position: -229px -105px; -} - -.system-dashboard.zone .status_box li.clusters .icon { - background-position: -411px -96px; -} - -.system-dashboard.zone .status_box li.hosts .icon { - background-position: -601px -102px; -} - -.system-dashboard.zone .status_box li.primary-storage .icon { - background-position: -32px -404px; - /*+placement:shift 37px 68px;*/ - position: relative; - left: 37px; - top: 68px; -} - -.system-dashboard.zone .status_box li.sockets .icon { - background-position: -14px -581px; -} - -.system-dashboard.zone .status_box li.secondary-storage .icon { - background-position: -216px -404px; - /*+placement:shift 37px 68px;*/ - position: relative; - left: 37px; - top: 68px; -} - -.system-dashboard.zone .status_box li.system-vms .icon, -.system-dashboard.zone .status_box li.management-servers .icon { - background-position: -408px -399px; -} - -.system-dashboard.zone .status_box li.virtual-routers .icon { - background-position: -601px -400px; -} - -/*Projects -** View switcher*/ -#header .view-switcher { - font-size: 12px; - color: #55687B; - float: left; - margin: 11px 0 0 18px; -} - -#header div.view-switcher { - height: 39px; - background-position: 0px -5px; - /*+placement:shift 0px -10px;*/ - position: relative; - left: 0px; - top: -10px; - margin-right: 9px; - display: none; -} - -#header div.view-switcher.alt { - background-position: 0px -41px; -} - -#header div.view-switcher div { - float: left; - /*[empty]display:;*/ - width: 126px; - padding: 13px 0 0; - margin: 0; - text-indent: 17px; - position: relative; - /*+text-shadow:0px -1px 1px #2D2D2D;*/ - -moz-text-shadow: 0px -1px 1px #2D2D2D; - -webkit-text-shadow: 0px -1px 1px #2D2D2D; - -o-text-shadow: 0px -1px 1px #2D2D2D; - text-shadow: 0px -1px 1px #2D2D2D; -} - -#header div.view-switcher .select.active { - color: #FFFFFF; - font-weight: bold; - /*+text-shadow:0px -1px 1px #5B5B5B;*/ - -moz-text-shadow: 0px -1px 1px #5B5B5B; - -webkit-text-shadow: 0px -1px 1px #5B5B5B; - -o-text-shadow: 0px -1px 1px #5B5B5B; - text-shadow: 0px -1px 1px #5B5B5B; -} - -#header div.view-switcher div span.icon { - background: url(../images/icons.png) no-repeat; - width: 10px; - height: 10px; - padding: 0 19px 0 0; - top: 0; - /*+placement:shift -4px 0px;*/ - position: relative; - left: -4px; - top: 0px; -} - -#header div.view-switcher div.default-view span.icon { - background-position: -23px 0px; -} - -#header div.view-switcher div.project-view span.icon { - background-position: -24px 0px !important; -} - -#header div.view-switcher div.select span.icon { - background-position: -47px 0px; -} - -#header .view-switcher span { - padding: 0 13px 0 0; - background-repeat: repeat-x; -} - -#header .view-switcher select { - max-width: 120px; - margin: 6px 3px 0 -21px; - padding: 3px 0 4px; -} - -/*** View switcher (drop-down)*/ -.project-switcher, .domain-switcher { - float: left; - width: 223px; - padding: 9px 17px 0 19px; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; -} - -.project-switcher label, .domain-switcher label { - top: 29px; - color: #FFFFFF; - font-size: 13px; - float: left; - margin-right: 7px; - margin-top: 5px; -} - -.project-switcher select, .domain-switcher select { - width: 70%; - float: left; - margin-top: 0px; - border: 1px solid #393939; - /*+text-shadow:0px -1px 1px #373737;*/ - -moz-text-shadow: 0px -1px 1px #373737; - -webkit-text-shadow: 0px -1px 1px #373737; - -o-text-shadow: 0px -1px 1px #373737; - text-shadow: 0px -1px 1px #373737; - background: #515151; - font-size: 13px; - font-weight: 100; - color: #FFFFFF; -} - -/*** Select project*/ -.project-selector { - display: inline-block; -} - -.project-selector-dialog .ui-widget-content { - padding: 0 !important; -} - -.project-selector .toolbar { - width: 420px; - position: relative; - background: transparent; - border: none; - border-bottom: 1px solid #93A4B4; - /*+box-shadow:0px 2px #FFFFFF;*/ - -moz-box-shadow: 0px 2px #FFFFFF; - -webkit-box-shadow: 0px 2px #FFFFFF; - -o-box-shadow: 0px 2px #FFFFFF; - box-shadow: 0px 2px #FFFFFF; - -moz-box-shadow: 0px 2px 0px #FFFFFF; - -webkit-box-shadow: 0px 2px 0px #FFFFFF; - -o-box-shadow: 0px 2px 0px #FFFFFF; -} - -.project-selector .search input[type=text] { - /*+border-radius:3px;*/ - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; - border-radius: 3px 3px 3px 3px; - width: 192px; - height: 18px; - margin: 6px 0 0 105px; - /*+box-shadow:0px 1px 1px #FFFFFF;*/ - -moz-box-shadow: 0px 1px 1px #FFFFFF; - -webkit-box-shadow: 0px 1px 1px #FFFFFF; - -o-box-shadow: 0px 1px 1px #FFFFFF; - box-shadow: 0px 1px 1px #FFFFFF; - border: 1px solid #9DADBB; - float: left; -} - -.project-selector .search input[type=submit] { - display: block; - float: left; - border: none; - cursor: pointer; - margin: 6px 0 0; - background: url(../images/sprites.png) no-repeat -601px -328px; - width: 25px; - height: 22px; - border-left: 1px solid #283979; - /*+placement:shift -2px 0px;*/ - position: relative; - left: -2px; - top: 0px; - cursor: pointer; -} - -.project-selector .listing { - margin: 15px; - border: 1px solid #D0D0D0; - position: relative; -} - -.project-selector .listing .data { - width: 100%; - height: 275px; - background: #F2F0F0; - overflow: auto; - overflow-x: hidden; - margin: 18px 0 0; -} - -.project-selector .listing .data ul { - text-align: left; - font-size: 11px; -} - -.project-selector .listing .data ul li { - padding: 10px 0 10px 7px; - cursor: pointer; - font-size: 12px; -} - -.project-selector .listing .data ul li.odd { - background: #DFE1E3; -} - -.project-selector .listing .data ul li:hover { - background: #CBDDF3; - border-top: 1px solid #FFFFFF; - border-bottom: 1px solid #BABFD9; - padding: 9px 0 9px 7px; -} - -.project-selector .listing .header { - width: 379px; - background: url(../images/bg-gradients.png) repeat-x 0px -164px; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - text-align: left; - color: #4F6171; - font-size: 11px; - padding: 3px 2px 3px 7px; - border-bottom: 1px solid #FFFFFF; - position: absolute; - left: 0; -} - -.project-selector .button.cancel { - color: #808080; - background: #B6B6B6 url("../images/gradients.png") repeat 0 -480px; - border: 1px solid #AAAAAA; - border-radius: 4px 4px 4px 4px; - font-size: 13px; - font-weight: bold; - padding: 8px 20px; - float: none; - cursor: pointer; - color: #838181; - left: 170px; - top: -8px; - width: 54px; - margin: auto auto 17px; -} - -.project-selector .button.cancel:hover { - color: #3A3A3A; -} - -/*** Resource management*/ -.project-dashboard .resources form { - background: #FFFFFF; - width: 87%; - /*+border-radius:11px;*/ - -moz-border-radius: 11px; - -webkit-border-radius: 11px; - -khtml-border-radius: 11px; - border-radius: 11px; - border-radius: 11px 11px 11px 11px; - padding: 26px; - margin-top: 17px; - margin-left: 22px; - /*+box-shadow:inset 0px 3px 4px #979797;*/ - -moz-box-shadow: inset 0px 3px 4px #979797; - -webkit-box-shadow: inset 0px 3px 4px #979797; - -o-box-shadow: inset 0px 3px 4px #979797; - box-shadow: inset 0px 3px 4px #979797; - display: inline-block; -} - -.project-dashboard .resources form .field { - width: 100%; - float: left; - clear: both; - margin: auto auto 30px; -} - -.project-dashboard .resources form label { - float: left; -} - -.project-dashboard .resources form input[type=text] { - float: right; - width: 176px; - font-size: 16px; - margin: 0 287px 0 0; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - border: 1px solid #C6C6C6; - padding: 6px; -} - -.project-dashboard .resources form input[type=submit] { - display: block; - border: none; - background: transparent url(../images/bg-gradients.png) 0px -220px; - float: left; - padding: 9px 20px; - cursor: pointer; - color: #FFFFFF; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - clear: both; -} - -.detail-view .project-dashboard .resources form { - width: 83%; - border-bottom: 1px solid #DBDBDB; -} - -.detail-view .project-dashboard .resources form .field input { - margin-right: 105px; -} - -/*** Dashboard*/ -.project-dashboard .toolbar { - position: relative; -} - -.project-dashboard .ui-tabs { - /*+placement:shift 10px -31px;*/ - position: relative; - left: 10px; - top: -31px; -} - -.project-view .project-dashboard .ui-tabs .multi-edit table td { - background: #EAEAEA; -} - -.project-dashboard-view .overview-area { - float: left; -} - -.project-dashboard-view .compute-and-storage .system-dashboard, -.project-dashboard-view .users .system-dashboard { - width: 510px; - height: 230px; - float: left; - background: #777E88; -} - -.project-dashboard-view .compute-and-storage .system-dashboard ul, -.project-dashboard-view .users .system-dashboard ul { - height: 162px; - margin: 14px 0 0; -} - -.project-dashboard-view .compute-and-storage .system-dashboard li, -.project-dashboard-view .users .system-dashboard li { - width: 156px; - height: 161px; - background: #3D4045; - color: #FFFFFF; -} - -.project-dashboard-view .compute-and-storage .system-dashboard li .icon, -.project-dashboard-view .users li .icon { - width: 100px; - height: 76px; - /*+placement:shift 27px 20px;*/ - position: relative; - left: 27px; - top: 20px; - position: absolute; - background: url(../images/sprites.png) no-repeat 2px -1039px; -} - -.project-dashboard-view .compute-and-storage .system-dashboard li.storage .icon { - background-position: -89px -1036px; -} - -.project-dashboard-view .compute-and-storage .system-dashboard li.bandwidth .icon { - background-position: -184px -1036px; -} - -.project-dashboard-view .compute-and-storage .system-dashboard li .overview { - width: 100%; - height: 53px; - position: relative; - margin: 81px 0 0; - color: #FFFFFF; - /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; -} - -.project-dashboard-view .compute-and-storage .system-dashboard li.storage .overview .total { - font-size: 28px; - /*+placement:shift 30px 21px;*/ - position: relative; - left: 30px; - top: 21px; - position: absolute; -} - -.project-dashboard-view .compute-and-storage .system-dashboard li.storage .overview .label { - font-size: 13px; - color: #C3C1C1; - /*+placement:shift 91px 33px;*/ - position: relative; - left: 91px; - top: 33px; - position: absolute; -} - -.project-dashboard-view .compute-and-storage .system-dashboard li .overview .overview-item { - float: left; - margin: 12px 0 0 20px; -} - -.project-dashboard-view .compute-and-storage .system-dashboard li .overview .overview-item .total { - font-size: 24px; - font-weight: bold; -} - -.project-dashboard-view .compute-and-storage .system-dashboard li .overview .overview-item .label { - font-size: 11px; - margin: 4px 0 0; - color: #C7C7C7; -} - -.project-dashboard-view .compute-and-storage .system-dashboard li .overview .overview-item.running .label { - color: #2BFF2B; - /*[empty]background-position:;*/ -} - -.project-dashboard-view .users .system-dashboard { - width: 509px; - height: 100%; - clear: both; -} - -.project-dashboard-view .users .system-dashboard ul { - overflow-y: auto; -} - -.project-dashboard-view .users .system-dashboard li { - width: 86px; - height: 138px; - margin-bottom: 24px; - margin-left: 6px; -} - -.project-dashboard-view .users .system-dashboard li .icon { - background-position: -306px -1044px; - left: 16px; -} - -.project-dashboard-view .users .system-dashboard li .header { - width: 77px; - max-width: 77px; - /*+placement:shift 7px 110px;*/ - position: relative; - left: 7px; - top: 110px; - position: absolute; - text-align: center; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -/**** Info box*/ -.info-boxes { - float: right; - width: 233px; - height: 551px; - margin: 21px 5px 0 0; -} - -.info-boxes .info-box { - display: inline-block; - border: 1px solid #B3C3D0; - /*+box-shadow:inset 0px -1px 7px #A7A7A7;*/ - -moz-box-shadow: inset 0px -1px 7px #A7A7A7; - -webkit-box-shadow: inset 0px -1px 7px #A7A7A7; - -o-box-shadow: inset 0px -1px 7px #A7A7A7; - box-shadow: inset 0px -1px 7px #A7A7A7; - background: #FFFFFF; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; -} - -.info-boxes .info-box.events { - margin-top: 4px; - height: 323px; - width: 228px; -} - -.info-boxes .info-box.events ul { - max-height: 295px; - overflow: auto; - overflow-x: hidden; -} - -.info-boxes .info-box ul { - margin: 0 0 3px 2px; - height: auto; - display: inline-block; -} - -.info-boxes .info-box ul li { - width: 224px; - margin: 0 2px 0 0; - display: inline-block; - border-bottom: 1px solid #BDD2DF; - border-top: 1px solid #FFFFFF; -} - -.info-boxes .info-box ul li.odd { - background: #ECECEC; -} - -.info-boxes .info-box .button { - background: url(../images/bg-gradients.png) 0px -734px; - color: #FFFFFF; - border: 1px solid #82A3C7; - /*+text-shadow:0px 1px 1px #000000;*/ - -moz-text-shadow: 0px 1px 1px #000000; - -webkit-text-shadow: 0px 1px 1px #000000; - -o-text-shadow: 0px 1px 1px #000000; - text-shadow: 0px 1px 1px #000000; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - /*+box-shadow:inset 0px 1px 1px #85ACC4;*/ - -moz-box-shadow: inset 0px 1px 1px #85ACC4; - -webkit-box-shadow: inset 0px 1px 1px #85ACC4; - -o-box-shadow: inset 0px 1px 1px #85ACC4; - box-shadow: inset 0px 1px 1px #85ACC4; - padding: 2px 6px 3px 3px; - font-size: 10px; - cursor: pointer; - font-weight: bold; - float: right; - margin: 0 14px 0 0; -} - -.info-boxes .info-box .button span { - /*+placement:shift 0px 2px;*/ - position: relative; - left: 0px; - top: 2px; - float: left; -} - -.info-boxes .info-box .title .button { - margin: 4px 6px 0 3px; -} - -.info-boxes .info-box .title .button span { - color: #FFFFFF; - font-size: 10px; - margin: 0; - padding: 0; - /*+placement:shift 1px 1px;*/ - position: relative; - left: 1px; - top: 1px; -} - -.info-boxes .info-box .button:hover { - background-position: 0px -766px; -} - -.info-boxes .info-box .button .arrow { - width: 16px; - height: 13px; - float: right; - /*+placement:shift 0px 0px;*/ - position: relative; - left: 0px; - top: 0px; - background: url(../images/sprites.png) no-repeat -455px -84px; -} - -.info-boxes .info-box ul li .total, -.info-boxes .info-box ul li .date { - width: 52px; - height: 36px; - float: left; - font-size: 24px; - color: #647C91; - border-right: 1px solid #BDD2DF; - /*+placement:shift;*/ - position: relative; - left: 0; - top: 0; - text-align: right; -} - -.info-boxes .info-box ul li .date { - font-size: 11px; - text-align: center; - margin: 1px 0 0; -} - -.info-boxes .info-box ul li .date span { - /*+placement:shift 0px 11px;*/ - position: relative; - left: 0px; - top: 11px; -} - -.info-boxes .info-box ul li .desc { - color: #606060; - font-size: 12px; - /*+placement:shift 5px 8px;*/ - position: relative; - left: 5px; - top: 8px; - display: inline-block; - padding-bottom: 13px; - max-width: 153px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.info-boxes .info-box ul li .total span { - /*+placement:shift -5px 7px;*/ - position: relative; - left: -5px; - top: 7px; -} - -.info-boxes .info-box .title { - height: 27px; - border-bottom: 1px solid #BDD2DF; -} - -.info-boxes .info-box .title span { - /*+placement:shift 8px 6px;*/ - position: relative; - left: 8px; - top: 6px; - font-size: 12px; - font-weight: bold; - color: #4E748C; -} - -/*** New project form*/ -.new-project { - display: inline-block; - margin: 0 0 20px 30px; -} - -.new-project form { - margin: 0; -} - -.ui-dialog .new-project { - text-align: left; -} - -.ui-dialog .new-project .add-by { - font-size: 12px; - color: #5E6D7D; - margin-left: 11px; -} - -.ui-dialog .new-project .add-by input { - margin-right: 8px; -} - -.ui-dialog .new-project .add-by label { - margin-right: 12px; -} - -.new-project .title { - color: #3497E6; - font-size: 26px; - /*+text-shadow:0px 1px 2px #D6D6D6;*/ - -moz-text-shadow: 0px 1px 2px #D6D6D6; - -webkit-text-shadow: 0px 1px 2px #D6D6D6; - -o-text-shadow: 0px 1px 2px #D6D6D6; - text-shadow: 0px 1px 2px #D6D6D6; - letter-spacing: 0px; - margin: 10px 0 32px; -} - -.new-project .field { - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - width: 686px; - display: inline-block; - background: #DFDFDF; - margin: -2px 0 -4px auto; -} - -#new-project-review-tabs-resouces { - background: #D2D2D2; - height: 225px; -} - -.new-project .resources .ui-widget-content { - background: #FFFFFF; -} - -.new-project .resources .field { - height: 39px; - padding: 0; -} - -.new-project .field span.value { - color: #475765; - /*+placement:shift 21px 20px;*/ - position: relative; - left: 21px; - top: 20px; -} - -.new-project .field label { - display: block; - width: 104px; - height: 59px; - color: #5B5B5B; - float: left; - background: #D2D2D2; - text-align: right; - padding: 20px 24px 0 0; -} - -.new-project .resources .field label { - font-size: 14px; - height: auto; - padding: 10px 14px 14px 40px; -} - -.new-project .field label.error { - color: #FF0000; - font-size: 9px; - /*+placement:displace 154px 29px;*/ - position: absolute; - margin-left: 154px; - margin-top: 29px; - background: transparent; - width: auto; - height: auto; -} - -.new-project .field input[type=text] { - background: #FFFFFF 0px 7px; - /*+border-radius:5px;*/ - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - -khtml-border-radius: 5px; - border-radius: 5px; - border-radius: 5px 5px 5px 5px; - font-size: 14px; - border: 1px solid #E2E1DF; - /*+box-shadow:inset 0px 1px #A1A1A1;*/ - -moz-box-shadow: inset 0px 1px #A1A1A1; - -webkit-box-shadow: inset 0px 1px #A1A1A1; - -o-box-shadow: inset 0px 1px #A1A1A1; - box-shadow: inset 0px 1px #A1A1A1; - -moz-box-shadow: inset 0px 1px 0px #A1A1A1; - -webkit-box-shadow: inset 0px 1px 0px #A1A1A1; - -o-box-shadow: inset 0px 1px 0px #A1A1A1; - width: 506px; - height: 20px; - margin: 17px 25px 0 0; - float: right; - border: 1px solid #C7C7C7; -} - -.new-project .resources .field input[type=text] { - margin: 6px 9px 0 0; -} - -.new-project .button.cancel { - color: #808080; - background: transparent; - font-size: 12px; - font-weight: bold; - float: left; - cursor: pointer; - color: #838181; - /*+placement:shift 488px 9px;*/ - position: relative; - left: 488px; - top: 9px; - left: 480px; - margin: 19px 0 0 40px; -} - -.new-project .button.cancel:hover { - color: #3A3A3A; -} - -.new-project input[type=submit], -.new-project .button.confirm { - display: inline-block; - height: 31px; - border: none; - /*+placement:float-right 63px 18px;*/ - float: right; - position: relative; - left: 63px; - top: 18px; - color: #FFFFFF; - /*+text-shadow:0px -1px 1px #465259;*/ - -moz-text-shadow: 0px -1px 1px #465259; - -webkit-text-shadow: 0px -1px 1px #465259; - -o-text-shadow: 0px -1px 1px #465259; - text-shadow: 0px -1px 1px #465259; - background: #0049FF url(../images/gradients.png) 0px -317px; - font-size: 13px; - font-weight: bold; - border: 1px solid #0069CF; - border-top: 1px solid #0070FC; - /*+border-radius:9px;*/ - -moz-border-radius: 9px; - -webkit-border-radius: 9px; - -khtml-border-radius: 9px; - border-radius: 9px; - border-radius: 9px 9px 9px 9px; - margin: 0px 63px 0 0; - cursor: pointer; -} - -.new-project input[type=submit]:hover, -.new-project .button.confirm:hover { - background-position: -3px -369px; -} - -.new-project .button { - cursor: pointer; -} - -.new-project .button.confirm { - display: block; - height: 27px; - padding: 13px 10px 0px 12px; -} - -.new-project .button.confirm.next { - padding: 10px 34px 0px 29px; -} - -.new-project .review .button.confirm.next { - /*+placement:shift 25px 11px;*/ - position: relative; - left: 25px; - top: 11px; -} - -.new-project .review .ui-tabs { - /*+placement:shift -29px -31px;*/ - position: relative; - left: -29px; - top: -31px; -} - -.new-project .review .ui-tabs .ui-widget-content { - width: 695px; - height: 185px; -} - -.new-project .review .ui-tabs .ui-widget-content.ui-tabs-hide { - display: none; -} - -.new-project .review .ui-tabs ul { - text-align: left; - /*+placement:shift 0px -2px;*/ - position: relative; - left: 0px; - top: -2px; -} - -.new-project .review .ui-tabs .list-view { - width: 688px; - height: 185px !important; -} - -.new-project .review .ui-tabs .list-view .fixed-header { - position: absolute; - z-index: 1000; - height: 58px; - background: #FFFFFF; - top: -22px; -} - -.new-project .review .ui-tabs .list-view .data-table table { - width: 669px; - margin: 31px 0 -1px; -} - -.new-project .review .ui-tabs .list-view .data-table table .edit { - width: 132px; - background: #FFFFFF; - /*+placement:shift 14px 0px;*/ - position: relative; - left: 14px; - top: 0px; -} - -.new-project .review .ui-tabs .list-view .data-table table .edit select { - width: 95px; - height: 20px; - float: left; - background: #FFFFFF; - border: 1px solid #B2B2B2; -} - -.new-project .review .ui-tabs .list-view .data-table table .edit .action { - float: left; - margin: 0; - padding: 0; - /*+placement:shift 14px 0px;*/ - position: relative; - left: 14px; - top: 0px; - height: 20px; -} - -.new-project .review .ui-tabs .list-view .toolbar { - display: none; -} - -.new-project .review .project-data { - padding: 16px; - background: #F4F4F4; - margin: 0; - /*+placement:shift -19px -13px;*/ - position: relative; - left: -19px; - top: -13px; -} - -.new-project .review .project-data .field { - width: 677px; - margin: auto; -} - -.new-project .button.later { - color: #808080; - background: url(../images/bg-gradients.png) 0px -261px; - border: 1px solid #B1B1B1; - /*+box-shadow:inset 0px 2px 2px #FFFFFF;*/ - -moz-box-shadow: inset 0px 2px 2px #FFFFFF; - -webkit-box-shadow: inset 0px 2px 2px #FFFFFF; - -o-box-shadow: inset 0px 2px 2px #FFFFFF; - box-shadow: inset 0px 2px 2px #FFFFFF; - float: right; - font-size: 13px; - margin: 19px -40px 0 0; - padding: 13px 7px 14px 8px; - /*+border-radius:10px;*/ - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - -khtml-border-radius: 10px; - border-radius: 10px; - border-radius: 10px 10px 10px 10px; -} - -.new-project .button.later:hover { - color: #000000; - /*+box-shadow:inset 0px 1px 1px #A1A1A1;*/ - -moz-box-shadow: inset 0px 1px 1px #A1A1A1; - -webkit-box-shadow: inset 0px 1px 1px #A1A1A1; - -o-box-shadow: inset 0px 1px 1px #A1A1A1; - box-shadow: inset 0px 1px 1px #A1A1A1; - background-position: 0px -86px; -} - -.new-project input[type=submit]:hover { - background-position: -3px -369px; -} - -.new-project .resources input[type=submit] { - display: none; -} - -.new-project .multi-edit { - width: 671px; -} - -.new-project .multi-edit .data { - width: 700px; -} - -.new-project .multi-edit .data .data-item { - margin: 0; - border: none; - border: 1px solid #D2D2D2; -} - -.new-project .multi-edit .data .data-item.even td { - background: #DFE1E3; -} - -/*Tooltip*/ -.tooltip-box { - width: 15%; - height: auto; - display: inline-block; - padding: 4px; - background: #FFFFFF; - border: 1px solid #BEB8B8; - padding: 10px; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - margin-left: 23px; - /*+box-shadow:0px 1px 12px #353535;*/ - -moz-box-shadow: 0px 1px 12px #353535; - -webkit-box-shadow: 0px 1px 12px #353535; - -o-box-shadow: 0px 1px 12px #353535; - box-shadow: 0px 1px 12px #353535; -} - -.tooltip-box .arrow { - width: 19px; - height: 30px; - background: url(../images/sprites.png) -585px -947px; - /*+placement:shift -16px 3px;*/ - position: relative; - left: -16px; - top: 3px; - position: absolute; -} - -/*Tagger*/ -.tagger { - width: 94%; - margin: auto; - padding-bottom: 12px; - background: #F2F0F0; - border: 1px solid #CFC9C9; - /*+placement:shift -4px 0px;*/ - position: relative; - left: -4px; - top: 0px; -} - -.tagger .field { - width: 35%; - float: left; - position: relative; -} - -.tagger .tag-info { - font-size: 11px; - color: #757575; - margin-top: 12px; - margin-left: 8px; -} - -.tagger .tag-info.title { - font-size: 11px; - color: #6F9BF0; - margin-bottom: 5px; -} - -.tagger form { - margin: 12px 9px 0px; -} - -.tagger.readonly form { - display: none; -} - -.tagger form label { - display: block; - float: left; - width: 25px; - text-align: right; - font-size: 10px; - color: #394552; - margin-right: 9px; - /*+placement:shift 5px 8px;*/ - position: relative; - left: 5px; - top: 8px; -} - -.tagger form label.error { - position: absolute; - color: #FF0000; - left: 44px; - top: 28px !important; - /*[empty]background-color:;*/ -} - -.tagger form input { - padding: 4px; - background: #FFFFFF; - border: 1px solid #808080; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; -} - -.tagger form input { - width: 45%; - margin-left: 9px; -} - -.tagger form input[type=submit] { - background: url(../images/bg-gradients.png) repeat-x 0px -220px; - cursor: pointer; - color: #FFFFFF; - /*+text-shadow:0px -1px 2px #000000;*/ - -moz-text-shadow: 0px -1px 2px #000000; - -webkit-text-shadow: 0px -1px 2px #000000; - -o-text-shadow: 0px -1px 2px #000000; - text-shadow: 0px -1px 2px #000000; - border: none; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - padding: 7px 25px 7px 26px; - margin-left: 16px; - width: auto; -} - -.tagger form input[type=submit]:hover { - background-position: 0px -946px; -} - -.tagger ul { - display: block; - width: 96%; - margin: 16px auto auto; - /*+border-radius:2px;*/ - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - -khtml-border-radius: 2px; - border-radius: 2px; - overflow: auto; - padding-bottom: 10px; - border: 1px solid #D2D2D2; - background: #FFFFFF; - /*+box-shadow:inset 0px 0px 10px #DCDCDC;*/ - -moz-box-shadow: inset 0px 0px 10px #DCDCDC; - -webkit-box-shadow: inset 0px 0px 10px #DCDCDC; - -o-box-shadow: inset 0px 0px 10px #DCDCDC; - box-shadow: inset 0px 0px 10px #DCDCDC; -} - -.tagger ul li { - background: #DFDFDF 0px 4px; - height: 15px; - padding: 0px 18px 0 7px; - display: inline-block; - float: left; - margin-left: 7px; - margin-right: 2px; - margin-top: 5px; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - /*+placement:shift 0px 2px;*/ - position: relative; - left: 0px; - top: 2px; -} - -.tagger ul li span { - color: #000000; -} - -.tagger ul li span.label span.value { - max-width: 100px; - overflow: hidden; -} - -.tagger ul li span.label { - font-size: 10px; - position: relative; - left: 15px; - top: -2px; -} - -.tagger.readonly ul li span.label { - left: 6px; -} - -.tagger ul li span.label > span { - float: left; - display: block; - margin-top: 2px; -} - -.tagger ul li span.label > span.key { - font-weight: bold; - max-width: 134px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - margin-left: 15px; - margin-right: 5px; -} - -.tagger ul li span.label > span.value { - max-width: 160px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - margin-left: 6px; -} - -.tagger ul li span.remove { - width: 15px !important; - overflow: hidden !important; - height: 11px !important; - background: #DFDFDF; - display: block; - top: 0px !important; - left: -3px !important; - text-indent: 4px; - padding: 4px 0px 0px 8px; - font-size: 8px; - font-weight: bold; - cursor: pointer; - position: absolute !important; - color: #5B5B5B; -} - -.tagger.readonly ul li span.remove { - display: none; -} - -.tagger ul li span.remove:hover { - color: #000000; -} - -/** Dialog tagger*/ -.ui-dialog .tagger { - width: 375px; -} - -.ui-dialog .tagger .tag-info { - display: none; -} - -.ui-dialog.editTags .ui-button { - float: right; -} - -.ui-dialog.editTags .ui-dialog-buttonpane { - float: right; -} - -.ui-dialog .tagger .field { - width: 119px !important; -} - -.ui-dialog .tagger input.key, -.ui-dialog .tagger input.value { - width: 66px !important; - height: 15px; - font-size: 11px !important; -} - -.ui-dialog .tagger input[type=submit] { - padding: 6px 15px; -} - -/*VPC / vApps*/ -.vpc-chart { - width: 100%; - height: 94%; - overflow: auto; - position: relative; - margin: 30px 0 0; - background: #FFFFFF 0px 24px; -} - -.vpc-chart .vpc-title { - width: 210px; - font-size: 22px; - /*+placement:shift 11px 41px;*/ - position: relative; - left: 11px; - top: 41px; - position: absolute; - color: #5F768A; -} - -.vpc-chart .vpc-title > span { - max-width: 160px; - display: block; - float: left; - overflow-y: hidden; - overflow-x: auto; -} - -.vpc-chart .vpc-title .icon { - padding: 7px 15px; - background: url(../images/sprites.png) no-repeat -145px -195px; - margin-left: 10px; - cursor: pointer; - /*+placement:shift 6px -8px;*/ - position: relative; - left: 6px; - top: -8px; - float: left; -} - -.vpc-chart .vpc-title .vpc-configure-tooltip { - width: 129px; - padding: 35px 10px 10px; - font-size: 14px; - display: none; - z-index: 2000; - position: absolute; -} - -.vpc-chart .vpc-title .vpc-configure-tooltip .arrow { - width: 30px; - height: 20px; - background: #FFFFFF url(../images/sprites.png) no-repeat -589px -997px; - /*+placement:shift 13px 26px;*/ - position: relative; - left: 13px; - top: 26px; - position: absolute; - z-index: 1; -} - -.vpc-chart .vpc-title .vpc-configure-tooltip ul { - border: 1px solid #C2C2C2; - background: #FFFFFF; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - /*+placement:shift 0px -6px;*/ - position: relative; - left: 0px; - top: -6px; - margin: 10px 0; - padding: 9px; - /*+box-shadow:0px 1px 8px #CBCBCB;*/ - -moz-box-shadow: 0px 1px 8px #CBCBCB; - -webkit-box-shadow: 0px 1px 8px #CBCBCB; - -o-box-shadow: 0px 1px 8px #CBCBCB; - box-shadow: 0px 1px 8px #CBCBCB; -} - -.vpc-chart .vpc-title .vpc-configure-tooltip li { - padding: 3px 0 5px; - cursor: pointer; - font-size: 12px; -} - -.vpc-chart .vpc-title .vpc-configure-tooltip li:hover { - font-weight: bold; -} - -.vpc-chart ul.tiers { - padding: 0 0 0 26px; - margin: 79px 0 0 232px; - border-left: 3px solid #CCC; -} - -.vpc-chart li.tier { - display: block; - width: 258px; - height: 107px; - margin: -55px 0 90px; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border: 1px solid #50545A; - background: url(../images/bg-gradients.png) 0px -2637px; - /*+placement:shift 0px 58px;*/ - position: relative; - left: 0px; - top: 58px; - position: relative; - /*+box-shadow:0px 5px 7px #DADADA;*/ - -moz-box-shadow: 0px 5px 7px #DADADA; - -webkit-box-shadow: 0px 5px 7px #DADADA; - -o-box-shadow: 0px 5px 7px #DADADA; - box-shadow: 0px 5px 7px #DADADA; -} - -.vpc-chart li.tier .loading-overlay { - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; -} - -.vpc-chart li.tier .connect-line { - position: absolute; - width: 28px; - height: 3px; - background: #CCCCCC 0px -8px; - /*+placement:shift -29px 49px;*/ - position: relative; - left: -29px; - top: 49px; - position: absolute; -} - -.vpc-chart li.tier span.title { - color: #FFFFFF; - /*+placement:shift 8px 7px;*/ - position: relative; - left: 8px; - top: 7px; - position: absolute; - cursor: pointer; - padding: 3px; - font-size: 24px; - /*+text-shadow:1px 2px 2px #000000;*/ - -moz-text-shadow: 1px 2px 2px #000000; - -webkit-text-shadow: 1px 2px 2px #000000; - -o-text-shadow: 1px 2px 2px #000000; - text-shadow: 1px 2px 2px #000000; - text-decoration: underline; -} - -.vpc-chart li.tier span.cidr { - /*+placement:shift 12px 46px;*/ - position: relative; - left: 12px; - top: 46px; - position: absolute; - font-size: 14px; - /*+text-shadow:0px -1px 1px #343E4C;*/ - -moz-text-shadow: 0px -1px 1px #343E4C; - -webkit-text-shadow: 0px -1px 1px #343E4C; - -o-text-shadow: 0px -1px 1px #343E4C; - text-shadow: 0px -1px 1px #343E4C; - color: #FFFFFF; -} - -.vpc-chart li.tier .actions { - width: 258px; - height: 35px; - background: #CCC; - /*+border-radius:0 0 4px 4px;*/ - -moz-border-radius: 0 0 4px 4px; - -webkit-border-radius: 0 0 4px 4px; - -khtml-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; - /*+placement:shift -1px 71px;*/ - position: relative; - left: -1px; - top: 71px; - position: absolute; - /*+box-shadow:inset 0px 1px #FFFFFF;*/ - -moz-box-shadow: inset 0px 1px #FFFFFF; - -webkit-box-shadow: inset 0px 1px #FFFFFF; - -o-box-shadow: inset 0px 1px #FFFFFF; - box-shadow: inset 0px 1px #FFFFFF; - border: 1px solid #808080; - border-top: 1px solid #4C545E; - position: absolute; -} - -.vpc-chart li.tier .actions .action { - cursor: pointer; - float: left; - width: 50px; - height: 24px; - text-align: center; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - margin: 4px 0px 4px 4px; - border: 1px solid #909090; - color: #4B637A; - font-weight: bold; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - background: url(../images/bg-gradients.png) 0px -2533px; -} - -.vpc-chart li.tier .actions .action.disabled, -.vpc-chart li.tier .actions .action.disabled:hover { - color: #9D9D9D; - background: #CFCFCF; - /*+text-shadow:none;*/ - -moz-text-shadow: none; - -webkit-text-shadow: none; - -o-text-shadow: none; - text-shadow: none; - border-color: #B5B5B5; - cursor: not-allowed; - /*+box-shadow:none;*/ - -moz-box-shadow: none; - -webkit-box-shadow: none; - -o-box-shadow: none; - box-shadow: none; -} - -.vpc-chart li.tier .actions .action:hover { - border: 1px solid #7A8B9A; - background-position: 0px -106px; - color: #5B7A96; - /*+box-shadow:inset 1px 2px 4px #808080;*/ - -moz-box-shadow: inset 1px 2px 4px #808080; - -webkit-box-shadow: inset 1px 2px 4px #808080; - -o-box-shadow: inset 1px 2px 4px #808080; - box-shadow: inset 1px 2px 4px #808080; -} - -.vpc-chart li.tier .actions .action span.label { - /*+placement:shift 1px 3px;*/ - position: relative; - left: 1px; - top: 3px; - font-size: 11px; -} - -.vpc-chart li.tier .actions .action.remove, -.vpc-chart li.tier .actions .action.remove:hover { - background: none; - width: 30px; - padding: 0; - float: right; - border: none; - /*+placement:shift -3px -2px;*/ - position: relative; - left: -3px; - top: -2px; - /*+box-shadow:none;*/ - -moz-box-shadow: none; - -webkit-box-shadow: none; - -o-box-shadow: none; - box-shadow: none; -} - -.vpc-chart li.tier .action span.icon { - background-image: url(../images/sprites.png); - cursor: pointer; - width: 37px; - height: 23px; - float: left; - /*+placement:shift 1px 3px;*/ - position: relative; - left: 1px; - top: 3px; -} - -.vpc-chart li.tier .vm-count { - font-size: 23px; - left: 134px; - top: 3px; - position: absolute; - color: #FFFFFF; - /*+text-shadow:1px 2px 2px #000000;*/ - -moz-text-shadow: 1px 2px 2px #000000; - -webkit-text-shadow: 1px 2px 2px #000000; - -o-text-shadow: 1px 2px 2px #000000; - text-shadow: 1px 2px 2px #000000; - cursor: pointer; - display: block; - padding: 5px; - text-align: center; - width: 100px; - border: 1px solid transparent; - margin: 4px; - text-decoration: underline; -} - -.vpc-chart li.tier.loading .vm-count { - padding-right: 10px; -} - -.vpc-chart li.tier .vm-count .loading-overlay { - display: none; - width: 24px; - height: 24px; - position: absolute; - left: 15px; - top: 7px; - /*+border-radius:12px;*/ - -moz-border-radius: 12px; - -webkit-border-radius: 12px; - -khtml-border-radius: 12px; - border-radius: 12px; - background-image: url(../images/ajax-loader-small.gif); - /*+opacity:100%;*/ - filter: alpha(opacity=100); - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); - -moz-opacity: 1; - opacity: 1; -} - -.vpc-chart li.tier.loading .vm-count .loading-overlay { - display: block; -} - -.vpc-chart li.tier .vm-count:hover, -.vpc-chart li.tier .title:hover { - border-radius: 4px; - border: 1px solid #4C545E; - background: url(../images/bg-gradients.png) 0px -2751px; -} - -.vpc-chart li.tier .vm-count .total { - padding-right: 4px; - font-size: 24px; -} - -.vpc-chart li.tier.placeholder { - background: #ECECEC; - border: dotted #ACACAC; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - /*+box-shadow:none;*/ - -moz-box-shadow: none; - -webkit-box-shadow: none; - -o-box-shadow: none; - box-shadow: none; - cursor: pointer; -} - -.vpc-chart li.tier.placeholder:hover { - background: #D3D3D3; - /*+box-shadow:0px 2px 8px #A7A7A7;*/ - -moz-box-shadow: 0px 2px 8px #A7A7A7; - -webkit-box-shadow: 0px 2px 8px #A7A7A7; - -o-box-shadow: 0px 2px 8px #A7A7A7; - box-shadow: 0px 2px 8px #A7A7A7; -} - -.vpc-chart li.tier.placeholder span { - top: 40px; - left: 66px; - color: #9F9F9F; - /*+text-shadow:none;*/ - -moz-text-shadow: none; - -webkit-text-shadow: none; - -o-text-shadow: none; - text-shadow: none; - text-decoration: none; -} - -.vpc-chart li.tier.placeholder:hover span { - color: #000000; - /*+text-shadow:0px 0px 7px #FFFFFF;*/ - -moz-text-shadow: 0px 0px 7px #FFFFFF; - -webkit-text-shadow: 0px 0px 7px #FFFFFF; - -o-text-shadow: 0px 0px 7px #FFFFFF; - text-shadow: 0px 0px 7px #FFFFFF; - background: none; - border: none; -} - -.vpc-chart li.tier.virtual-router { - margin: 0px; - width: 222px; - height: 65px; - /*+placement:shift 17px -36px;*/ - position: relative; - left: 17px; - top: -36px; - background-position: 0px -2519px; - border: 1px solid #ADADAD; - cursor: pointer; -} - -.vpc-chart li.tier.virtual-router:hover { - text-decoration: underline; -} - -.vpc-chart li.tier.virtual-router.disabled:hover { - text-decoration: none; -} - -.vpc-chart li.tier.virtual-router.disabled, -.vpc-chart li.tier.virtual-router.disabled span { - cursor: default; -} - -.vpc-chart li.tier.virtual-router span { - color: #586E82; - font-size: 18px; - /*+text-shadow:0px 1px 3px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 3px #FFFFFF; - -webkit-text-shadow: 0px 1px 3px #FFFFFF; - -o-text-shadow: 0px 1px 3px #FFFFFF; - text-shadow: 0px 1px 3px #FFFFFF; - /*+placement:shift 53px 22px;*/ - position: relative; - left: 53px; - top: 22px; - text-decoration: none; -} - -.vpc-chart li.tier.virtual-router span:hover { - background: none; - border: none; -} - -.vpc-chart li.tier.virtual-router .connect-line { - /*+placement:shift -47px 14px;*/ - position: relative; - left: -47px; - top: 14px; - width: 46px; -} - -/*VPC: Enable Static NAT fields*/ -.list-view.instances .filters.tier-select { - width: 246px; - padding: 2px 20px 2px 13px; - margin: 1px 120px 0 19px; -} - -.list-view.instances .filters.tier-select label { - color: #FFFFFF; - /*+text-shadow:0px 1px 3px #000000;*/ - -moz-text-shadow: 0px 1px 3px #000000; - -webkit-text-shadow: 0px 1px 3px #000000; - -o-text-shadow: 0px 1px 3px #000000; - text-shadow: 0px 1px 3px #000000; -} - -.list-view.instances .filters.tier-select select { - width: 166px; - float: left; -} - -/*Configure ACL dialog / VM tier list view dialog*/ -.ui-dialog.configure-acl .multi-edit { - width: 866px; -} - -.ui-dialog.configure-acl .multi-edit table { - max-width: none; -} - -.ui-dialog.configure-acl .multi-edit table select, -.detail-view .acl .multi-edit select { - width: 76px; -} - -.ui-dialog.configure-acl .ui-dialog-buttonpane { - /*+placement:shift 722px -2px;*/ - position: relative; - left: 722px; - top: -2px; -} - -.ui-dialog.configure-acl div.view.list-view { - max-height: 474px; -} - -.ui-dialog.configure-acl .multi-edit .data { - width: 901px; - padding: 0; - margin: 0; - height: 370px; - overflow: auto; - overflow-x: hidden; -} - -.ui-dialog.configure-acl .multi-edit .data .multi-actions { - min-width: none !important; - max-width: none !important; -} - -.ui-dialog.configure-acl .view.list-view table.body tr td.actions { - width: 184px !important; - max-width: 184px !important; -} - -div.ui-dialog div.acl div.multi-edit table.multi-edit thead tr th, -div.ui-dialog div.acl div.multi-edit table.multi-edit tbody tr td { - min-width: 75px; -} - -div.ui-dialog div.acl div.multi-edit div.data div.data-body div.data-item table tbody tr td { - width: 100%; - min-width: 77px; -} - -.detail-view .acl .multi-edit th, -.detail-view .acl .multi-edit td { - padding-right: 0px !important; - min-width: 25px !important; -} - -.detail-view .acl .multi-edit th { - font-size: 10px; -} - -.detail-view .acl .multi-edit input { - width: 50px; -} - -.detail-view .acl .multi-edit .add-vm { - width: 51px; - text-indent: 0px; - padding-right: 0px; -} - -.detail-view .acl .multi-edit td.multi-actions { - width: 65px; -} - -/*HEALTH CHECK*/ -.ui-dialog .health-check { - height: 295px !important; - padding-bottom: 93px; -} - -div.ui-dialog div.health-check div.health-check-description { - color: #808080; -} - -div.ui-dialog div.health-check div.form-container form div.form-item { - width: 58%; - margin-left:116px; - margin-top: -16px; - margin-bottom: 30px; -} - -div.ui-dialog div.health-check div.health-check-config-title { - float: left; - color: #808080; - font-size: 17px; - margin-left: 15px; -} - -div.ui-dialog div.health-check div.health-check-advanced-title { - float: left; - color: #808080; - font-size: 17px; - margin-left: 15px; - margin-top: -70px; -} - -/*Autoscaler*/ -.ui-dialog div.autoscaler { - overflow: auto; - max-height: 600px; -} - -div.container div.panel div#details-tab-network.detail-group div div.multi-edit table.multi-edit tbody tr td, -div.container div.panel div#details-tab-network.detail-group div div.multi-edit table.multi-edit thead tr th { - min-width: 80px; - max-width: 80px; - font-size: 10px; -} - -.ui-dialog div.autoscaler .detail-actions .buttons { - float: right; - margin-right: 6px; -} - -.ui-dialog div.autoscaler .detail-actions .buttons .action { - width: 32px; - float: left; -} - -.ui-dialog div.autoscaler div.form-container div.form-item[rel=securityGroups] { - display: block; - width: 370px; - float: left; -} - -.ui-dialog div.autoscaler div.form-container div.form-item[rel=diskOfferingId] { - display: inline-block; - width: 370px; - float: left; - position: relative; - margin-top: 1px; -} - -.ui-dialog div.autoscaler div.form-container div.form-item[rel=minInstance] { - display: block; - width: 50%; - float: left; -} - -.ui-dialog div.autoscaler div.form-container div.form-item[rel=maxInstance] { - display: inline-block; - width: 50%; - float: left; - left: -30px; - position: relative; -} - -.ui-dialog div.autoscaler div.form-container div.form-item[rel=interval] { - display: block; - width: 50%; - float: left; -} - -.ui-dialog div.autoscaler div.form-container div.form-item[rel=quietTime] { - display: inline-block; - width: 50%; - float: left; - left: -15px; - position: relative; -} - -.ui-dialog div.autoscaler div.form-container div.form-item[rel=snmpCommunity] { - display: block; - width: 50%; - float: left; -} - -.ui-dialog div.autoscaler div.form-container div.form-item[rel=snmpPort] { - display: inline-block; - width: 50%; - float: left; - left: -15px; - position: relative; -} - -.ui-dialog div.autoscaler div.form-container div.value select { - width: 88%; - float: left; -} - -div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container { - height: 55px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container { - height: 55px; -} - -div.ui-dialog div.autoscaler div.scale-up-policy div.multi-edit { - margin-top: 0px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy div.multi-edit { - margin-top: 0px; -} - -div.ui-dialog div.autoscaler div.scale-up-policy-title { - color: #0055BB; - margin-left: -650px; - margin-top: 40px; -} - -div.ui-dialog div.autoscaler div.scale-up-policy-title label { - font-size: 13px; - margin-left: 200px; - margin-right: 10px; -} - -div.ui-dialog div.autoscaler div.scale-up-policy-title hr.policy-divider { - border-left: 1px none #38546D; - border-right: 1px none #16222C; - border-top: 1px none #38546D; - margin-bottom: 12px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy-title hr.policy-divider { - border-left: 1px none #38546D; - border-right: 1px none #16222C; - border-top: 1px none #38546D; - margin-bottom: 12px; -} - -div.ui-dialog div.autoscaler div.field-group.bottom-fields hr.policy-divider { - border-left: 1px none #38546D; - border-right: 1px none #16222C; - border-top: 1px none #38546D; - margin-top: 15px; - margin-bottom: -1px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy-title label { - font-size: 13px; - margin-left: 170px; - margin-right: 10px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy-title { - color: #0055BB; - margin-left: -620px; - margin-top: 10px; -} - -div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container div.form-item div.value input[type=text] { - margin-left: 729px; - width: 30%; - margin-top: -17px; -} - -div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container div.form-item div.name { - margin-left: 420px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container div.form-item div.value input[type=text] { - margin-left: 698px; - width: 30%; - margin-top: -16px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container div.form-item div.name { - margin-left: 420px; -} - -div.ui-dialog div.autoscaler div.scale-up-policy div.multi-edit div.data div.data-body div.data-item { - margin-bottom: 0px; - margin-right: 22px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy div.multi-edit div.data div.data-body div.data-item { - margin-bottom: 0px; - margin-right: 22px; -} - -div.ui-dialog div.autoscaler div.scale-up-policy div.slide-label { - color: #A5A3A7; - font-size: 14px; - margin-bottom: 3px; - margin-left: 755px; - width: 12px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy div.slide-label { - color: #A5A3A7; - font-size: 14px; - margin-bottom: 3px; - margin-left: 755px; - width: 12px; -} - -div.ui-dialog div.autoscaler div.scale-up-policy div.hide { - background: #FFFFFF url("../images/minus.png") no-repeat 38% 59%; - border: 1px solid #D0D0D0; - border-radius: 9px 9px 9px 9px; - cursor: pointer; - float: right; - height: 15px; - margin: -20px 45px 0 11px; - width: 14px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy div.hide { - background: #FFFFFF url("../images/minus.png") no-repeat 31% 54%; - border: 1px solid #D0D0D0; - border-radius: 9px 9px 9px 9px; - cursor: pointer; - float: right; - height: 15px; - margin: -20px 45px 0 11px; - width: 14px; -} - -div.ui-dialog div.autoscaler div.scale-up-policy div.expand { - background: #FFFFFF url("../images/sprites.png") repeat -541px -499px; - border: 1px solid #D0D0D0; - border-radius: 9px 9px 9px 9px; - cursor: pointer; - float: right; - height: 15px; - margin: -20px 45px 0 11px; - width: 14px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy div.expand { - background: #FFFFFF url("../images/sprites.png") repeat -541px -499px; - border: 1px solid #D0D0D0; - border-radius: 9px 9px 9px 9px; - cursor: pointer; - float: right; - height: 15px; - margin: -20px 45px 0 11px; - width: 14px; -} - -div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-item div.name label { - font-size: 11px; -} - -/*List state BG colors*/ -.list-view .body td.item-state-on { - background: #C0FFC0; - border-bottom: 1px solid #09BC09; -} - -.list-view .body td.item-state-off { - background: #FFD8CF; - border-bottom: 1px solid #FF9F9F; -} - -.list-view .body tr.selected td.item-state-on, -.list-view .body tr.selected td.item-state-off { - background-color: inherit; - border-color: inherit; -} - -/*Autoscaler*/ -.ui-dialog div.autoscaler { - overflow: auto; - max-height: 600px; -} - -div.container div.panel div#details-tab-network.detail-group div div.multi-edit table.multi-edit tbody tr td, -div.container div.panel div#details-tab-network.detail-group div div.multi-edit table.multi-edit thead tr th { - min-width: 72px; - font-size: 10px; -} - -.ui-dialog div.autoscaler .detail-actions .buttons { - float: right; - margin-right: 6px; -} - -.ui-dialog div.autoscaler .detail-actions .buttons .action { - width: 32px; - float: left; -} - -.ui-dialog div.autoscaler div.form-container div.form-item[rel=securityGroups] { - display: block; - width: 370px; - float: left; -} - -.ui-dialog div.autoscaler div.form-container div.form-item[rel=diskOfferingId] { - display: inline-block; - width: 370px; - float: left; - position: relative; - margin-top: 1px; -} - -.ui-dialog div.autoscaler div.form-container div.form-item[rel=minInstance] { - display: block; - width: 50%; - float: left; -} - -.ui-dialog div.autoscaler div.form-container div.form-item[rel=maxInstance] { - display: inline-block; - width: 50%; - float: left; - left: -30px; - position: relative; -} - -.ui-dialog div.autoscaler div.form-container div.form-item[rel=interval] { - display: block; - width: 50%; - float: left; -} - -.ui-dialog div.autoscaler div.form-container div.form-item[rel=quietTime] { - display: inline-block; - width: 50%; - float: left; - left: -15px; - position: relative; -} - -.ui-dialog div.autoscaler div.form-container div.form-item[rel=snmpCommunity] { - display: block; - width: 50%; - float: left; -} - -.ui-dialog div.autoscaler div.form-container div.form-item[rel=snmpPort] { - display: inline-block; - width: 50%; - float: left; - left: -15px; - position: relative; -} - -.ui-dialog div.autoscaler div.form-container div.value select { - width: 88%; - float: left; -} - -div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container { - height: 55px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container { - height: 55px; -} - -div.ui-dialog div.autoscaler div.scale-up-policy div.multi-edit { - margin-top: 0px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy div.multi-edit { - margin-top: 0px; -} - -div.ui-dialog div.autoscaler div.scale-up-policy-title { - color: #0055BB; - margin-left: -650px; - margin-top: 40px; -} - -div.ui-dialog div.autoscaler div.scale-up-policy-title label { - font-size: 13px; - margin-left: 200px; - margin-right: 10px; -} - -div.ui-dialog div.autoscaler div.scale-up-policy-title hr.policy-divider { - border-left: 1px none #38546D; - border-right: 1px none #16222C; - border-top: 1px none #38546D; - margin-bottom: 12px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy-title hr.policy-divider { - border-left: 1px none #38546D; - border-right: 1px none #16222C; - border-top: 1px none #38546D; - margin-bottom: 12px; -} - -div.ui-dialog div.autoscaler div.field-group.bottom-fields hr.policy-divider { - border-left: 1px none #38546D; - border-right: 1px none #16222C; - border-top: 1px none #38546D; - margin-top: 15px; - margin-bottom: -1px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy-title label { - font-size: 13px; - margin-left: 170px; - margin-right: 10px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy-title { - color: #0055BB; - margin-left: -620px; - margin-top: 10px; -} - -div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container div.form-item div.value input[type=text] { - margin-left: 195px; - width: 30%; - margin-top: 1px; -} - -div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container div.form-item div.name { - margin-left: 390px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container div.form-item div.value input[type=text] { - margin-left: 670px; - width: 30%; - margin-top: -16px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container div.form-item div.name { - margin-left: 390px; -} - -div.ui-dialog div.autoscaler div.scale-up-policy div.multi-edit div.data div.data-body div.data-item { - margin-bottom: 0px; - margin-right: 22px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy div.multi-edit div.data div.data-body div.data-item { - margin-bottom: 0px; - margin-right: 22px; -} - -div.ui-dialog div.autoscaler div.scale-up-policy div.slide-label { - color: #A5A3A7; - font-size: 14px; - margin-bottom: 3px; - margin-left: 755px; - width: 12px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy div.slide-label { - color: #A5A3A7; - font-size: 14px; - margin-bottom: 3px; - margin-left: 755px; - width: 12px; -} - -div.ui-dialog div.autoscaler div.scale-up-policy div.hide { - background: #FFFFFF url("../images/minus.png") no-repeat 38% 59%; - border: 1px solid #D0D0D0; - border-radius: 9px 9px 9px 9px; - cursor: pointer; - float: right; - height: 15px; - margin: -20px 45px 0 11px; - width: 14px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy div.hide { - background: #FFFFFF url("../images/minus.png") no-repeat 31% 54%; - border: 1px solid #D0D0D0; - border-radius: 9px 9px 9px 9px; - cursor: pointer; - float: right; - height: 15px; - margin: -20px 45px 0 11px; - width: 14px; -} - -div.ui-dialog div.autoscaler div.scale-up-policy div.expand { - background: #FFFFFF url("../images/sprites.png") repeat -541px -499px; - border: 1px solid #D0D0D0; - border-radius: 9px 9px 9px 9px; - cursor: pointer; - float: right; - height: 15px; - margin: -20px 45px 0 11px; - width: 14px; -} - -div.ui-dialog div.autoscaler div.scale-down-policy div.expand { - background: #FFFFFF url("../images/sprites.png") repeat -541px -499px; - border: 1px solid #D0D0D0; - border-radius: 9px 9px 9px 9px; - cursor: pointer; - float: right; - height: 15px; - margin: -20px 45px 0 11px; - width: 14px; -} - -div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-item div.name label { - font-size: 11px; -} - -/*UI datepicker*/ -.ui-datepicker { - background: #FFFFFF 0px -2470px; - width: 300px; - height: auto; - overflow: hidden; - padding: 4px 0 0; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - /*+box-shadow:0px 3px 8px #000000;*/ - -moz-box-shadow: 0px 3px 8px #000000; - -webkit-box-shadow: 0px 3px 8px #000000; - -o-box-shadow: 0px 3px 8px #000000; - box-shadow: 0px 3px 8px #000000; - display: none; -} - -.ui-datepicker .ui-datepicker-title { - width: 100%; - margin: auto; -} - -.ui-datepicker .ui-datepicker-prev, -.ui-datepicker .ui-datepicker-next { - font-size: 13px; - color: #FFFFFF; - /*+box-shadow:0px 1px 5px #444444;*/ - -moz-box-shadow: 0px 1px 5px #444444; - -webkit-box-shadow: 0px 1px 5px #444444; - -o-box-shadow: 0px 1px 5px #444444; - box-shadow: 0px 1px 5px #444444; - /*+text-shadow:0px -1px 1px #050505;*/ - -moz-text-shadow: 0px -1px 1px #050505; - -webkit-text-shadow: 0px -1px 1px #050505; - -o-text-shadow: 0px -1px 1px #050505; - text-shadow: 0px -1px 1px #050505; - padding: 6px; - margin: 6px 13px 6px 14px; - font-size: 12px; - background: url(../images/bg-gradients.png) 0px -182px; - cursor: pointer; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; -} - -.ui-datepicker .ui-datepicker-prev:hover, -.ui-datepicker .ui-datepicker-next:hover { - /*+box-shadow:inset 0px 0px 10px #000000;*/ - -moz-box-shadow: inset 0px 0px 10px #000000; - -webkit-box-shadow: inset 0px 0px 10px #000000; - -o-box-shadow: inset 0px 0px 10px #000000; - box-shadow: inset 0px 0px 10px #000000; -} - -.ui-datepicker .ui-datepicker-prev { - float: left; -} - -.ui-datepicker .ui-datepicker-next { - float: right; -} - -.ui-datepicker .ui-datepicker-title .ui-datepicker-month { - width: 85px; - font-size: 16px; - color: #2C363F; -} - -.ui-datepicker .ui-datepicker-title { - text-align: center; - width: 188px; - height: 19px; - padding: 3px 0 0; - /*+placement:shift 0px 6px;*/ - position: relative; - left: 0px; - top: 6px; -} - -.ui-datepicker table { - width: 277px; - height: 9px; -} - -.ui-datepicker table th, -.ui-datepicker table td { - min-width: 24px; - text-align: center; - border: 1px solid #B9B6B6; - text-indent: 0px; - padding: 7px 0; - /*[empty]+placement:;*/ -} - -.ui-datepicker table td { - cursor: pointer; -} - -.ui-datepicker table td.ui-state-disabled, -.ui-datepicker table td.ui-state-disabled:hover { - background-color: #DCDCDC; - /*+box-shadow:none;*/ - -moz-box-shadow: none; - -webkit-box-shadow: none; - -o-box-shadow: none; - box-shadow: none; - cursor: default; -} - -.ui-datepicker table td a { - text-decoration: none; - color: #485867; - font-size: 12px; -} - -.ui-datepicker table td:hover { - background-color: #6A839A; - /*+box-shadow:inset 0px 0px 4px #6B6B6B;*/ - -moz-box-shadow: inset 0px 0px 4px #6B6B6B; - -webkit-box-shadow: inset 0px 0px 4px #6B6B6B; - -o-box-shadow: inset 0px 0px 4px #6B6B6B; - box-shadow: inset 0px 0px 4px #6B6B6B; -} - -.ui-datepicker table td:hover a { - color: #FFFFFF; - text-shadow: 0px -1px #000000; -} - -/*Plugins listing*/ -.plugins-listing ul { - width: 100%; -} - -.plugins-listing ul li { - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - /*+box-shadow:0px 2px 6px #D3D3D3;*/ - -moz-box-shadow: 0px 2px 6px #D3D3D3; - -webkit-box-shadow: 0px 2px 6px #D3D3D3; - -o-box-shadow: 0px 2px 6px #D3D3D3; - box-shadow: 0px 2px 6px #D3D3D3; - border: 1px solid #A8A3A3; - background: url(../images/bg-gradients.png) 0px -29px; - width: 98%; - height: 66px; - margin: 9px auto 12px; - cursor: pointer; -} - -.plugins-listing ul li:hover { - /*+box-shadow:inset 0px 2px 4px #B9B9B9;*/ - -moz-box-shadow: inset 0px 2px 4px #B9B9B9; - -webkit-box-shadow: inset 0px 2px 4px #B9B9B9; - -o-box-shadow: inset 0px 2px 4px #B9B9B9; - box-shadow: inset 0px 2px 4px #B9B9B9; -} - -.plugins-listing ul li .title { - display: block; - float: left; - width: 90%; - font-weight: bold; - /*+text-shadow:0px 1px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px 1px #FFFFFF; - -o-text-shadow: 0px 1px 1px #FFFFFF; - text-shadow: 0px 1px 1px #FFFFFF; - color: #4A5A6A; - margin: 13px 0 7px; -} - -.plugins-listing ul li .desc { - color: #524E4E; - font-size: 13px; -} - -.plugins-listing ul li .icon { - display: block; - width: 50px; - height: 50px; - float: left; - margin: 8px 13px 13px 11px; -} - -.plugins-listing ul li .icon img { - width: 100%; - height: 100%; -} - -/*Regions*/ -.region-switcher { - display: inline-block; - position: relative; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - height: 28px; - float: left; - margin: 5px 13px 0 0; - cursor: pointer; - /*+placement:shift 27px 1px;*/ - position: relative; - left: 27px; - top: 1px; -} - -.region-selector { - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - width: 318px; - background: url(../images/bg-notifications.png) center; - height: 372px; - /*+placement:shift 185px 49px;*/ - position: relative; - left: 185px; - top: 49px; - position: absolute; - z-index: 5500; -} - -.region-selector h2 { - color: #FFFFFF; - text-align: center; - font-size: 21px; - letter-spacing: 1px; - /*+text-shadow:0px 1px 2px #000000;*/ - -moz-text-shadow: 0px 1px 2px #000000; - -webkit-text-shadow: 0px 1px 2px #000000; - -o-text-shadow: 0px 1px 2px #000000; - text-shadow: 0px 1px 2px #000000; - margin: 31px 0 14px; -} - -.region-selector .buttons { - width: 95%; - height: 33px; - margin: 5px auto 0; -} - -.region-selector .buttons .button.close { - background: url(../images/gradients.png) 0px -317px; - float: right; - margin-right: 10px; - border-bottom: 1px solid #232323; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - padding: 8px; -} - -.region-selector .buttons .button.close:hover { - /*+box-shadow:inset 0px 2px 4px #525252;*/ - -moz-box-shadow: inset 0px 2px 4px #525252; - -webkit-box-shadow: inset 0px 2px 4px #525252; - -o-box-shadow: inset 0px 2px 4px #525252; - box-shadow: inset 0px 2px 4px #525252; -} - -.region-selector .buttons .button.close span { - color: #FFFFFF; - font-weight: bold; - letter-spacing: 1px; - /*+text-shadow:0px 1px 2px #000000;*/ - -moz-text-shadow: 0px 1px 2px #000000; - -webkit-text-shadow: 0px 1px 2px #000000; - -o-text-shadow: 0px 1px 2px #000000; - text-shadow: 0px 1px 2px #000000; -} - -.region-selector ul { - background: #FFFFFF; - width: 94%; - /*+border-radius:4px;*/ - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - height: 237px; - border: 1px solid #B7B7B7; - overflow: auto; - margin: auto; - /*+box-shadow:inset 0px 0px 8px #A3A3A3;*/ - -moz-box-shadow: inset 0px 0px 8px #A3A3A3; - -webkit-box-shadow: inset 0px 0px 8px #A3A3A3; - -o-box-shadow: inset 0px 0px 8px #A3A3A3; - box-shadow: inset 0px 0px 8px #A3A3A3; -} - -.region-selector ul li { - background: none; - color: #415C72; - font-size: 13px; - /*+text-shadow:none;*/ - -moz-text-shadow: none; - -webkit-text-shadow: none; - -o-text-shadow: none; - text-shadow: none; - text-indent: 14px; - cursor: pointer; - border-bottom: 1px solid #CACACA; - width: 100%; - padding: 15px 0; -} - -.region-selector ul li:hover, -.region-selector ul li.active { - background: #E9E9E9 url(../images/bg-gradients.png) repeat-x 0px -31px; - /*+text-shadow:0px 1px #FFFFFF;*/ - -moz-text-shadow: 0px 1px #FFFFFF; - -webkit-text-shadow: 0px 1px #FFFFFF; - -o-text-shadow: 0px 1px #FFFFFF; - text-shadow: 0px 1px #FFFFFF; -} - -.region-switcher .icon { - display: inline-block; - float: left; - display: block; - width: 26px; - height: 26px; - background: url(../images/sprites.png) -15px -1313px; - position: absolute; -} - -.region-switcher .title { - display: inline-block; - float: right; - padding: 9px 9px 0 34px; - color: #FFFFFF; - font-size: 13px; - font-weight: 100; - max-width: 285px; - overflow: hidden; - white-space: nowrap; - /*+placement:shift -1px 0px;*/ - position: relative; - left: -1px; - top: 0px; -} - -.region-switcher:hover, -.region-switcher.active { - /*+box-shadow:inset 0px 1px 5px #000000;*/ - -moz-box-shadow: inset 0px 1px 5px #000000; - -webkit-box-shadow: inset 0px 1px 5px #000000; - -o-box-shadow: inset 0px 1px 5px #000000; - box-shadow: inset 0px 1px 5px #000000; -} - -.region-switcher:hover .icon, -.region-switcher.active .icon { - background-position: -70px -1311px; -} - -/*CA Cert*/ -.cacert-download { - display: inline-block; - position: relative; - height: 30px; - float: right; - cursor: pointer; - position: absolute; - left: 1175px; - top: 20px; -} - -.cacert-download .icon { - display: inline-block; - float: left; - display: block; - width: 32px; - height: 30px; - background: url(../images/sprites.png) -142px -348px; - position: absolute; -} - -.cacert-download:hover .icon, -.cacert-download.active .icon { - background-position: -368px -348px; -} - -/*Action icons*/ -.action.edit .icon { - background-position: 1px -1px; -} - -.action.edit:hover .icon { - background-position: 1px -583px; -} - -.start .icon, -.startByAdmin .icon { - background-position: -169px -1px; -} - -.start:hover .icon, -.startByAdmin:hover .icon { - background-position: -169px -583px; -} - -.updateVmwareDc .icon { - background-position: -265px -148px; -} - -.updateVmwareDc:hover .icon { - background-position: -265px -728px; -} - -.stop .icon, -.removeVmwareDc .icon, -.release .icon { - background-position: 0px -31px; -} - -.stop:hover .icon, -.removeVmwareDc:hover .icon, -.release:hover .icon { - background-position: 0px -613px; -} - -.restart .icon, -.releaseDedicatedZone .icon { - background-position: 0px -63px; -} - -.restart:hover .icon, -.releaseDedicatedZone:hover .icon { - background-position: 0px -645px; -} - -.destroy .icon, -.expunge .icon, -.remove .icon, -.removeMulti .icon, -.delete .icon, -.decline .icon, -.deleteacllist .icon { - background-position: 1px -92px; -} - -.destroy:hover .icon, -.expunge:hover .icon, -.remove:hover .icon, -.delete:hover .icon, -.deleteacllist:hover .icon { - background-position: 1px -674px; -} - -.migrate .icon, -.migrateToAnotherStorage .icon { - background-position: 0px -125px; -} - -.migrate:hover .icon, -.migrateToAnotherStorage:hover .icon { - background-position: 0px -707px; -} - -.migrate .icon, -.migrateVolume .icon { - background-position: 0px -125px; -} - -.migrate:hover .icon, -.migrateVolume:hover .icon { - background-position: 0px -707px; -} - -.viewMetrics .icon { - background-position: -40px -32px; -} - -.viewMetrics:hover .icon { - background-position: -40px -32px; -} - -.refreshMetrics .icon { - background-position: 0px -62px; -} - -.refreshMetrics:hover .icon { - background-position: 0px -62px; -} - -.attach .icon, -.attachISO .icon, -.attachDisk .icon, -.associateProfileToBlade .icon { - background-position: -104px -3px; -} - -.attach:hover .icon, -.attachISO:hover .icon, -.attachDisk:hover .icon { - background-position: -101px -585px; -} - -.detach .icon, -.detachISO .icon, -.detachDisk .icon, -.disassociateProfileFromBlade .icon { - background-position: -101px -65px; -} - -.detach:hover .icon, -.detachISO:hover .icon, -.detachDisk:hover .icon, -.disassociateProfileFromBlade:hover .icon { - background-position: -101px -647px; -} - -.secureKVMHost .icon, -.resetPassword .icon, -.changePassword .icon { - background-position: -68px -30px; -} - -.secureKVMHost:hover .icon, -.resetPassword:hover .icon, -.changePassword:hover .icon { - background-position: -68px -612px; -} - -.resetSSHKeyForVirtualMachine .icon { - background-position: -196px -3px; -} - -.resetSSHKeyForVirtualMachine:hover .icon { - background-position: -195px -586px; -} - -.changeService .icon { - background-position: -38px -33px; -} - -.changeService:hover .icon { - background-position: -38px -615px; -} - -.snapshot .icon, -.takeSnapshot .icon { - background-position: -36px -91px; -} - -.snapshot:hover .icon, -.takeSnapshot:hover .icon { - background-position: -36px -673px; -} - -.recurringSnapshot .icon { - background-position: -69px -95px; -} - -.recurringSnapshot:hover .icon { - background-position: -69px -677px; -} - -.downloadVolume .icon, -.downloadTemplate .icon, -.downloadISO .icon { - background-position: -35px -125px; -} - -.downloadVolume:hover .icon, -.downloadTemplate:hover .icon, -.downloadISO:hover .icon { - background-position: -35px -707px; -} - -.createVolume .icon { - background-position: -70px -124px; -} - -.createVolume:hover .icon { - background-position: -70px -706px; -} - -.enable .icon, -.enableStaticNAT .icon { - background-position: -102px -92px; -} - -.enable:hover .icon, -.enableStaticNAT:hover .icon { - background-position: -102px -676px; -} - -.disable .icon, -.disableStaticNAT .icon { - background-position: -136px -93px; -} - -.disable:hover .icon, -.disableStaticNAT:hover .icon { - background-position: -136px -677px; -} - -.add .icon, -.addNew .icon, -.addLdapAccount .icon, -.assignVm .icon, -.rootAdminAddGuestNetwork .icon { - background-position: -37px -61px; -} - -.add:hover .icon, -.addNew:hover .icon, -.addLdapAccount:hover .icon, -.assignVm:hover .icon, -.rootAdminAddGuestNetwork:hover .icon { - background-position: -37px -643px; -} - -.assignVmToAnotherAccount .icon { - background-position: -232px -97px; -} - -.assignVmToAnotherAccount:hover .icon { - background-position: -231px -678px; -} - -.create .icon, -.createTemplate .icon, -.enableSwift .icon, -.addVM .icon, -.dedicateZone .icon, -.dedicate .icon { - background-position: -69px -63px; -} - -.create:hover .icon, -.createTemplate:hover .icon, -.enableSwift:hover .icon, -.addVM:hover .icon, -.dedicateZone:hover .icon { - background-position: -69px -645px; -} - -.copyTemplate .icon, -.copyISO .icon { - background-position: -138px -2px; -} - -.copyTemplate:hover .icon, -.copyISO:hover .icon { - background-position: -138px -584px; -} - -.createVM .icon { - background-position: -137px -32px; -} - -.createVM:hover .icon { - background-position: -137px -614px; -} - -.blankHAForHost .icon { - background-position: -266px -31px; -} - -.blankHAForHost:hover .icon { - background-position: -266px -31px; -} - -.configureHAForHost .icon { - background-position: -270px -148px; -} - -.configureHAForHost:hover .icon { - background-position: -270px -728px; -} - -.enableHA .icon { - background-position: -265px -93px; -} - -.enableHA:hover .icon { - background-position: -265px -673px; -} - -.disableHA .icon { - background-position: -265px -120px; -} - -.disableHA:hover .icon { - background-position: -265px -700px; -} - -.blankOutOfBandManagement .icon { - background-position: -266px -31px; -} - -.blankOutOfBandManagement:hover .icon { - background-position: -266px -31px; -} - -.configureOutOfBandManagement .icon { - background-position: -168px -31px; -} - -.configureOutOfBandManagement:hover .icon { - background-position: -168px -613px; -} - -.diagnostics .icon { - background-position: -165px -122px; -} - -.diagnostics:hover .icon { - background-position: -165px -704px; -} - -.enableOutOfBandManagement .icon { - background-position: -138px -65px; -} - -.enableOutOfBandManagement:hover .icon { - background-position: -138px -647px; -} - -.disableOutOfBandManagement .icon { - background-position: -138px -123px; -} - -.disableOutOfBandManagement:hover .icon { - background-position: -138px -705px; -} - -.issueOutOfBandManagementPowerAction .icon { - background-position: -266px -3px; -} - -.issueOutOfBandManagementPowerAction:hover .icon { - background-position: -265px -584px; -} - -.changeOutOfBandManagementPassword .icon { - background-position: -68px -30px; -} - -.changeOutOfBandManagementPassword:hover .icon { - background-position: -68px -612px; -} - -.enableMaintenanceMode .icon { - background-position: -138px -65px; -} - -.enableMaintenanceMode:hover .icon { - background-position: -138px -647px; -} - -.cancelMaintenanceMode .icon { - background-position: -138px -123px; -} - -.cancelMaintenanceMode:hover .icon { - background-position: -138px -705px; -} - -.lock .icon { - background-position: -104px -124px; -} - -.lock:hover .icon { - background-position: -104px -706px; -} - -.updateResourceLimits .icon { - background-position: -100px -32px; -} - -.updateResourceLimits:hover .icon { - background-position: -100px -614px; -} - -.addVlanRange .icon, -.addVmwareDc .icon { - background-position: -37px -62px; -} - -.addVlanRange:hover .icon, -.addVmwareDc:hover .icon { - background-position: -37px -62px; -} - -.removeVlanRange .icon { - background-position: 1px -92px; -} - -.removeVlanRange:hover .icon { - background-position: 1px -92px; -} - -.resize .icon, -.updateResourceCount .icon { - background-position: -167px -66px; -} - -.resize:hover .icon, -.updateResourceCount:hover .icon { - background-position: -167px -648px; -} - -.generateKeys .icon, -.networkACL .icon { - background-position: -167px -95px; -} - -.generateKeys:hover .icon, -.networkACL:hover .icon { - background-position: -167px -677px; -} - -.revertSnapshot .icon, -.revertToVMSnapshot .icon, -.restoreVM .icon, -.restore .icon, -.recover .icon { - background-position: -168px -31px; -} - -.reset .icon, -.reinstall .icon { - background-position: -168px -31px; -} - -.scaleUp .icon { - background-position: -167px -66px; -} - -.revertSnapshot:hover .icon, -.revertToVMSnapshot:hover .icon, -.restoreVM:hover .icon, -.restore:hover .icon { - background-position: -168px -613px; -} - -.reset:hover .icon { - background-position: -168px -613px; -} - -.enableVPN .icon { - background-position: -198px -3px; -} - -.enableVPN:hover .icon { - background-position: -197px -586px; -} - -.disableVPN .icon { - background-position: -198px -32px; -} - -.disableVPN:hover .icon { - background-position: -197px -615px; -} - -.addIpRange .icon { - background-position: -197px -65px; -} - -.addIpRange:hover .icon { - background-position: -197px -647px; -} - -.forceReconnect .icon { - background-position: -196px -95px; -} - -.forceReconnect:hover .icon { - background-position: -196px -677px; -} - -.manage .icon { - background-position: -165px -122px; -} - -.manage:hover .icon { - background-position: -165px -704px; -} - -.unmanage .icon { - background-position: -196px -122px; -} - -.unmanage:hover .icon { - background-position: -196px -704px; -} - -.configureSamlAuthorization .icon { - background-position: -165px -122px; -} - -.configureSamlAuthorization:hover .icon { - background-position: -165px -704px; -} - -.viewConsole .icon { - background-position: -231px -2px; -} - -.viewConsole:hover .icon { - background-position: -229px -586px; -} - -.moveTop .icon { - background-position: -24px -161px; -} - -.moveTop:hover .icon { - background-position: -24px -734px; -} - -.moveBottom .icon { - background-position: -98px -161px; -} - -.moveBottom:hover .icon { - background-position: -98px -734px; -} - -.moveUp .icon { - background-position: -2px -161px; -} - -.moveUp:hover .icon { - background-position: -2px -734px; -} - -.moveDown .icon { - background-position: -55px -161px; -} - -.moveDown:hover .icon { - background-position: -55px -734px; -} - -.moveDrag .icon { - cursor: move; - /*+border-radius:10px;*/ - -moz-border-radius: 10px; - -webkit-border-radius: 10px; - -khtml-border-radius: 10px; - border-radius: 10px; - border-radius: 10px 10px 10px 10px; - background-position: -82px -162px; -} - -.moveDrag:hover .icon { - background-color: #FFFFFF; - cursor: move !important; -} - -.uploadVolume .icon { - background-position: -232px -34px; -} - -.uploadVolume:hover .icon { - background-position: -230px -615px; -} - -.editTags .icon { - background-position: -228px -65px; -} - -.editTags:hover .icon { - background-position: -228px -646px; -} - -.replaceacllist .icon, -.replaceACL .icon, -.updateIpaddr .icon, -.changeAffinity .icon { - background-position: -264px -2px; -} - -.replaceacllist:hover .icon, -.replaceACL:hover .icon, -.updateIpaddr:hover .icon, -.changeAffinity:hover .icon { - background-position: -263px -583px; -} - -.releaseFromAccount .icon { - background-position: -230px -123px; -} - -.releaseFromAccount:hover .icon { - background-position: -229px -704px; -} - -.addAccount .icon { - background-position: -231px -96px; -} - -.addAccount:hover .icon { - background-position: -230px -677px; -} - -.linktoldap .icon { - background-position: -197px -65px; -} - -.linktoldap:hover .icon { - background-position: -197px -647px; -} - -.label-hovered { - cursor: pointer; - color: #0000FF !important; -} - -.accounts-wizard table { - margin: 0; - width: 100%; - table-layout: fixed; -} - -.accounts-wizard .ui-button { - display: inline-block !important; - float: none !important; -} - -.accounts-wizard td:last-child { - border: none; -} - -.accounts-wizard tbody tr:nth-child(even) { - background: #DFE1E3; -} - -.accounts-wizard tbody tr:nth-child(odd) { - background: #F2F0F0; -} - -.accounts-wizard .content { - display: inline-block; -} - -.accounts-wizard .content td { - white-space: nowrap; - text-overflow: ellipsis; -} - -.accounts-wizard .content td.select, -.accounts-wizard .content th.select { - background: none; - border-right: 1px solid #BFBFBF; - width: 60px !important; - min-width: 60px !important; - max-width: 60px !important; -} - -.accounts-wizard .content .select input { - padding: 0; - width: auto; - height: auto; - margin: 18px 0 0 24px; -} - -.accounts-wizard .content:last-child { - margin-left: 14px; -} - -.accounts-wizard table thead th:first-child { - width: 50px; - min-width: 50px; - max-width: 50px; -} - -.accounts-wizard .input-area { - width: 320px; - font-size: 13px; - color: #485867; - text-shadow: 0px 2px 1px #FFFFFF; -} - -.ldap-account-choice { - border: none !important; - border-radius: 0 0 0 0 !important; -} - -.manual-account-details .name { - margin-top: 2px; - width: 100px; - float: left; - padding-bottom: 10px; -} - -.manual-account-details { - height: auto !important; - overflow: visible !important; - overflow-x: visible !important; -} - -.manual-account-details label.error { - display: block; - font-size: 10px; -} - -.manual-account-details .value { - float: left; -} - -.manual-account-details .form-item:after { - content: "."; - display: block; - clear: both; - visibility: hidden; - line-height: 0; - height: 0; -} - -.manual-account-details .form-item { - padding: 5px; - width: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.manual-account-details select, -.manual-account-details input { - width: 150px; -} - -.manual-account-details input { - background: #F6F6F6; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - border-radius: 4px 4px 4px 4px; - border: 1px solid #AFAFAF; -} - -.manual-account-details > *:nth-child(even) { - background: #DFE1E3; -} - -.manual-account-details > *:nth-child(odd) { - background: #F2F0F0; -} - -.manual-account-details .value { - display: inline-block; -} - -/*GPU*/ -div.gpugroups div.list-view div.fixed-header { - position: relative; - left: 12px !important; - top: 0px !important; -} - -div.gpugroups div.list-view div.fixed-header table { - width: auto; -} - -div.gpugroups div.list-view div.data-table table { - margin-top: 0; -} - -div.gpugroups div.list-view { - position: relative; - height: auto !important; - margin-top: 0 !important; - border: none !important; -} - -.gpugroups { - float: left; - height: 100%; - width: 100%; - overflow-x: hidden; - overflow-y: auto; -} - -.gpugroups .gpugroup-container { - border: 1px solid #C8C2C2; - border-radius: 3px; - height: auto !important; - margin: 12px; - padding: 0; - position: relative; - float: left; - width: auto; -} - -.gpugroups .gpugroup-container .title { - font-size: 13px; - font-weight: 100; - padding: 12px 12px 5px; -} - -.ui-dialog .ui-button.add { - background: transparent linear-gradient(to bottom, #f7f7f7 1%, #eaeaea 100%) repeat 0px 0px; - font-size: 12px; - height: 12px; - width: auto; - margin: 0px 0px 12px; - padding: 5px 7px 5px 6px; -} - -.ui-dialog .ui-button.add:hover { - background: #E5E5E5 repeat 0px 0px; - box-shadow: inset 0px 0px 5px #C3C3C3; -} - -.ui-dialog .ui-button.add span { - background: transparent url("../images/icons.png") no-repeat -626px -209px; - padding: 0 0 3px 18px; -} - -ul.ui-autocomplete.ui-menu { - width: 250px; - background: #ddd; - font-size: 13px; - padding: 5px; - max-height: 400px; - overflow-x: hidden; - overflow-y: auto; -} - -.multi-edit-add-list .ui-button.migrateok, -.multi-edit-add-list .ui-button.migratecancel { - top: -5px !important; -} - -.migrate-vm-available-host-list div.text-search { - right: 30px; -} - -.migrate-vm-available-host-list div.ui-widget-content { - display: block !important; -} - -.list-view-select table th.availableHostSuitability, -.list-view-select table td.availableHostSuitability { - max-width: 250px; -} -.copy-template-destination-list div.text-search { - right: 5px; -} - -.copy-template-destination-list div.ui-widget-content { - display: block !important; -} - -div.panel.copy-template-destination-list div.list-view div.fixed-header{ - width: 500px; -} - -.copy-template-destination-list.panel div.list-view div.data-table table{ - width: 595px; -} - -.copy-template-destination-list .list-view .toolbar { - width: 654px; -} - -.multi-edit-add-list .ui-button.copytemplateok{ - left: 330px; -} - -.multi-edit-add-list .ui-button.copytemplatecancel { - left: 310px; -} - -div.button.export { - position: relative; - left: 0px; - top: 5px; - font-size: 12px; - font-weight: 100; - color: #000000; - margin: 0 10px 0 0; - cursor: pointer; - text-shadow: 0px 1px 1px #DEE5EA; - padding: 5px 5px 5px 5px; - background: linear-gradient(to bottom, rgba(247,247,247,1) 1%,rgba(234,234,234,1) 100%); - border: 1px solid #B7B7B7; - float: right; - border-radius: 4px 4px 4px 4px; - height: 12px; -} - -div.button.export a { - padding: 0px 0 3px 20px; - background: url(../images/exportCsvIcon.png) no-repeat; - position: relative; - left: 0px; - top: 0px; - background-size: 15.5px; - text-decoration: none; - color: black; -} - -/*jQuery UI specific stylings*/ -.ui-widget { - font-family: inherit; -} - -.ui-widget-content, -.ui-widget.ui-widget-content { - border: none; - background: inherit; -} - -.ui-dialog.ui-widget-content { - background: #FFFFFF; -} - -.ui-tabs .ui-tabs-nav { - margin-top: 42px; - display: block; - width: 100%; - height: 41px; - float: left; - border: none; - overflow: hidden; - z-index: 2; - position: relative; - background-color: inherit; - padding: 0; -} - -.ui-tabs .ui-tabs-nav.ui-corner-all { - border-bottom-left-radius: 0; -} - -.ui-tabs .ui-tabs-nav .ui-tab { - margin-right: 1px; -} - -.ui-tabs .ui-tab .ui-tabs-anchor { - float: left; - padding: 15px 10px; - min-width: 91px; - text-align: center; - font-size: 11px; - color: #4E6070; - text-decoration: none; - position: relative; -} - -.ui-tabs .ui-tab.ui-state-default { - border: 1px solid #D9D9D9; - background: #F0F0F0; -} - -.ui-tabs .ui-tab.ui-state-active { - background: #FFFFFF; -} - -.ui-tabs .ui-tab.ui-state-hover a { - text-decoration: underline; - /*color: #000000;*/ - cursor: pointer; -} +// 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. + + +@import 'licences/AL-css'; + +@import 'variables/z-index'; +@import 'common/common'; + +@import 'objects/table'; +@import 'objects/links'; +@import 'objects/form-elements'; + +@import 'frame/wrapper-elements'; + +@import 'components/login'; +@import 'components/dialog-about'; +@import 'components/loading-overlay'; +@import 'components/install-wizzard'; +@import 'components/notifications'; +@import 'components/tooltip-info'; +@import 'components/list-view2'; +@import 'components/quick-view-tooltip'; +@import 'components/details-page'; +@import 'components/actions'; +@import 'components/header'; +@import 'components/header-notifications'; +@import 'components/user'; +@import 'components/zone-filter'; +@import 'components/navigation'; +@import 'components/browser'; +@import 'components/toolbar'; +@import 'components/advanced-search'; +@import 'components/panel-controls'; +@import 'components/section-switcher'; +@import 'components/breadcrumbs'; +@import 'components/view'; +@import 'components/actions-table'; +@import 'components/actions-dialog'; +@import 'components/create-form'; +@import 'components/dynamic-input'; +@import 'components/dashboard'; +@import 'components/system-chart'; +@import 'components/first-network-resource'; +@import 'components/multi-wizzard'; +@import 'components/treeview'; +@import 'components/list-view'; +@import 'components/multi-edit'; +@import 'components/recurring-snapshots'; +@import 'components/upload-volume'; +@import 'components/network-chart'; +@import 'components/dashboard-system'; +@import 'components/view-switcher'; +@import 'components/project-selector'; +@import 'components/dashboard-project'; +@import 'components/info-boxes'; +@import 'components/new-project'; +@import 'components/tooltip-box'; +@import 'components/tagger'; +@import 'components/vpc-chart'; +@import 'components/acl-dialog'; +@import 'components/health-check'; +@import 'components/autoscaler'; +@import 'components/datepicker'; +@import 'components/plugins-listing'; +@import 'components/region-switcher'; +@import 'components/ca-cert-download'; +@import 'components/action-icons'; +@import 'components/accounts-wizzard'; +@import 'components/gpu-groups'; +@import 'components/button-add'; +@import 'components/copy-template'; +@import 'components/button-export'; +@import 'components/jquery-ui'; +@import 'components/token-input-facebook'; + +@import 'custom/custom'; diff --git a/ui/css/src/scss/common/common.scss b/ui/css/src/scss/common/common.scss new file mode 100644 index 00000000000..e5ba5d9bb2e --- /dev/null +++ b/ui/css/src/scss/common/common.scss @@ -0,0 +1,23 @@ +// 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. + +body { + min-width: 1224px; + background: #ede8e8; + font-family: sans-serif; + overflow: auto; +} diff --git a/ui/css/src/scss/components/accounts-wizzard.scss b/ui/css/src/scss/components/accounts-wizzard.scss new file mode 100644 index 00000000000..da7a05cb313 --- /dev/null +++ b/ui/css/src/scss/components/accounts-wizzard.scss @@ -0,0 +1,152 @@ +// 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. + +.accounts-wizard table { + width: 100%; + margin: 0; + table-layout: fixed; +} + +.accounts-wizard .ui-button { + display: inline-block !important; + float: none !important; +} + +.accounts-wizard td:last-child { + border: 0; +} + +.accounts-wizard tbody tr:nth-child(even) { + background: #dfe1e3; +} + +.accounts-wizard tbody tr:nth-child(odd) { + background: #f2f0f0; +} + +.accounts-wizard .content { + display: inline-block; +} + +.accounts-wizard .content td { + white-space: nowrap; + text-overflow: ellipsis; +} + +.accounts-wizard .content td.select, +.accounts-wizard .content th.select { + width: 60px !important; + min-width: 60px !important; + max-width: 60px !important; + border-right: 1px solid #bfbfbf; + background: none; +} + +.accounts-wizard .content .select input { + width: auto; + height: auto; + margin: 18px 0 0 24px; + padding: 0; +} + +.accounts-wizard .content:last-child { + margin-left: 14px; +} + +.accounts-wizard table thead th:first-child { + width: 50px; + min-width: 50px; + max-width: 50px; +} + +.accounts-wizard .input-area { + width: 320px; + font-size: 13px; + color: #485867; + text-shadow: 0 2px 1px #ffffff; +} + +.ldap-account-choice { + border: 0; + border-radius: 0 0 0 0 !important; +} + +.manual-account-details .name { + float: left; + width: 100px; + margin-top: 2px; + padding-bottom: 10px; +} + +.manual-account-details { + height: auto !important; + overflow: visible !important; + overflow-x: visible !important; +} + +.manual-account-details label.error { + display: block; + font-size: 10px; +} + +.manual-account-details .value { + float: left; +} + +.manual-account-details .form-item:after { + visibility: hidden; + content: '.'; + display: block; + clear: both; + height: 0; + line-height: 0; +} + +.manual-account-details .form-item { + box-sizing: border-box; + width: 100%; + padding: 5px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; +} + +.manual-account-details select, +.manual-account-details input { + width: 150px; +} + +.manual-account-details input { + border: 1px solid #afafaf; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: #f6f6f6; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.manual-account-details > *:nth-child(even) { + background: #dfe1e3; +} + +.manual-account-details > *:nth-child(odd) { + background: #f2f0f0; +} + +.manual-account-details .value { + display: inline-block; +} diff --git a/ui/css/src/scss/components/acl-dialog.scss b/ui/css/src/scss/components/acl-dialog.scss new file mode 100644 index 00000000000..63de914f6cc --- /dev/null +++ b/ui/css/src/scss/components/acl-dialog.scss @@ -0,0 +1,93 @@ +// 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. + +.ui-dialog.configure-acl .multi-edit { + width: 866px; +} + +.ui-dialog.configure-acl .multi-edit table { + max-width: none; +} + +.ui-dialog.configure-acl .multi-edit table select, +.detail-view .acl .multi-edit select { + width: 76px; +} + +.ui-dialog.configure-acl .ui-dialog-buttonpane { + /*+placement:shift 722px -2px;*/ + position: relative; + top: -2px; + left: 722px; +} + +.ui-dialog.configure-acl div.view.list-view { + max-height: 474px; +} + +.ui-dialog.configure-acl .multi-edit .data { + width: 901px; + height: 370px; + margin: 0; + padding: 0; + overflow: auto; + overflow-x: hidden; +} + +.ui-dialog.configure-acl .multi-edit .data .multi-actions { + min-width: none !important; + max-width: none !important; +} + +.ui-dialog.configure-acl .view.list-view table.body tr td.actions { + width: 184px !important; + max-width: 184px !important; +} + +div.ui-dialog div.acl div.multi-edit table.multi-edit thead tr th, +div.ui-dialog div.acl div.multi-edit table.multi-edit tbody tr td { + min-width: 75px; +} + +div.ui-dialog div.acl div.multi-edit div.data div.data-body div.data-item table tbody tr td { + width: 100%; + min-width: 77px; +} + +.detail-view .acl .multi-edit th, +.detail-view .acl .multi-edit td { + min-width: 25px !important; + padding-right: 0 !important; +} + +.detail-view .acl .multi-edit th { + font-size: 10px; +} + +.detail-view .acl .multi-edit input { + width: 50px; +} + +.detail-view .acl .multi-edit .add-vm { + width: 51px; + padding-right: 0; + text-indent: 0; +} + +.detail-view .acl .multi-edit td.multi-actions { + width: 65px; +} diff --git a/ui/css/src/scss/components/action-icons.scss b/ui/css/src/scss/components/action-icons.scss new file mode 100644 index 00000000000..c35645d3a0d --- /dev/null +++ b/ui/css/src/scss/components/action-icons.scss @@ -0,0 +1,642 @@ +// 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. + +.action.edit .icon { + background-position: 1px -1px; +} + +.action.edit:hover .icon { + background-position: 1px -583px; +} + +.start .icon, +.startByAdmin .icon { + background-position: -169px -1px; +} + +.start:hover .icon, +.startByAdmin:hover .icon { + background-position: -169px -583px; +} + +.updateVmwareDc .icon { + background-position: -265px -148px; +} + +.updateVmwareDc:hover .icon { + background-position: -265px -728px; +} + +.stop .icon, +.removeVmwareDc .icon, +.release .icon { + background-position: 0 -31px; +} + +.stop:hover .icon, +.removeVmwareDc:hover .icon, +.release:hover .icon { + background-position: 0 -613px; +} + +.restart .icon, +.releaseDedicatedZone .icon { + background-position: 0 -63px; +} + +.restart:hover .icon, +.releaseDedicatedZone:hover .icon { + background-position: 0 -645px; +} + +.destroy .icon, +.expunge .icon, +.remove .icon, +.removeMulti .icon, +.delete .icon, +.decline .icon, +.deleteacllist .icon { + background-position: 1px -92px; +} + +.destroy:hover .icon, +.expunge:hover .icon, +.remove:hover .icon, +.delete:hover .icon, +.deleteacllist:hover .icon { + background-position: 1px -674px; +} + +.migrate .icon, +.migrateToAnotherStorage .icon { + background-position: 0 -125px; +} + +.migrate:hover .icon, +.migrateToAnotherStorage:hover .icon { + background-position: 0 -707px; +} + +.migrate .icon, +.migrateVolume .icon { + background-position: 0 -125px; +} + +.migrate:hover .icon, +.migrateVolume:hover .icon { + background-position: 0 -707px; +} + +.viewMetrics .icon { + background-position: -40px -32px; +} + +.viewMetrics:hover .icon { + background-position: -40px -32px; +} + +.refreshMetrics .icon { + background-position: 0 -62px; +} + +.refreshMetrics:hover .icon { + background-position: 0 -62px; +} + +.attach .icon, +.attachISO .icon, +.attachDisk .icon, +.associateProfileToBlade .icon { + background-position: -104px -3px; +} + +.attach:hover .icon, +.attachISO:hover .icon, +.attachDisk:hover .icon { + background-position: -101px -585px; +} + +.detach .icon, +.detachISO .icon, +.detachDisk .icon, +.disassociateProfileFromBlade .icon { + background-position: -101px -65px; +} + +.detach:hover .icon, +.detachISO:hover .icon, +.detachDisk:hover .icon, +.disassociateProfileFromBlade:hover .icon { + background-position: -101px -647px; +} + +.secureKVMHost .icon, +.resetPassword .icon, +.changePassword .icon { + background-position: -68px -30px; +} + +.secureKVMHost:hover .icon, +.resetPassword:hover .icon, +.changePassword:hover .icon { + background-position: -68px -612px; +} + +.resetSSHKeyForVirtualMachine .icon { + background-position: -196px -3px; +} + +.resetSSHKeyForVirtualMachine:hover .icon { + background-position: -195px -586px; +} + +.changeService .icon { + background-position: -38px -33px; +} + +.changeService:hover .icon { + background-position: -38px -615px; +} + +.snapshot .icon, +.takeSnapshot .icon { + background-position: -36px -91px; +} + +.snapshot:hover .icon, +.takeSnapshot:hover .icon { + background-position: -36px -673px; +} + +.recurringSnapshot .icon { + background-position: -69px -95px; +} + +.recurringSnapshot:hover .icon { + background-position: -69px -677px; +} + +.downloadVolume .icon, +.downloadTemplate .icon, +.downloadISO .icon { + background-position: -35px -125px; +} + +.downloadVolume:hover .icon, +.downloadTemplate:hover .icon, +.downloadISO:hover .icon { + background-position: -35px -707px; +} + +.createVolume .icon { + background-position: -70px -124px; +} + +.createVolume:hover .icon { + background-position: -70px -706px; +} + +.enable .icon, +.enableStaticNAT .icon { + background-position: -102px -92px; +} + +.enable:hover .icon, +.enableStaticNAT:hover .icon { + background-position: -102px -676px; +} + +.disable .icon, +.disableStaticNAT .icon { + background-position: -136px -93px; +} + +.disable:hover .icon, +.disableStaticNAT:hover .icon { + background-position: -136px -677px; +} + +.add .icon, +.addNew .icon, +.addLdapAccount .icon, +.assignVm .icon, +.rootAdminAddGuestNetwork .icon { + background-position: -37px -61px; +} + +.add:hover .icon, +.addNew:hover .icon, +.addLdapAccount:hover .icon, +.assignVm:hover .icon, +.rootAdminAddGuestNetwork:hover .icon { + background-position: -37px -643px; +} + +.assignVmToAnotherAccount .icon { + background-position: -232px -97px; +} + +.assignVmToAnotherAccount:hover .icon { + background-position: -231px -678px; +} + +.create .icon, +.createTemplate .icon, +.enableSwift .icon, +.addVM .icon, +.dedicateZone .icon, +.dedicate .icon { + background-position: -69px -63px; +} + +.create:hover .icon, +.createTemplate:hover .icon, +.enableSwift:hover .icon, +.addVM:hover .icon, +.dedicateZone:hover .icon { + background-position: -69px -645px; +} + +.copyTemplate .icon, +.copyISO .icon { + background-position: -138px -2px; +} + +.copyTemplate:hover .icon, +.copyISO:hover .icon { + background-position: -138px -584px; +} + +.createVM .icon { + background-position: -137px -32px; +} + +.createVM:hover .icon { + background-position: -137px -614px; +} + +.blankHAForHost .icon { + background-position: -266px -31px; +} + +.blankHAForHost:hover .icon { + background-position: -266px -31px; +} + +.configureHAForHost .icon { + background-position: -270px -148px; +} + +.configureHAForHost:hover .icon { + background-position: -270px -728px; +} + +.enableHA .icon { + background-position: -265px -93px; +} + +.enableHA:hover .icon { + background-position: -265px -673px; +} + +.disableHA .icon { + background-position: -265px -120px; +} + +.disableHA:hover .icon { + background-position: -265px -700px; +} + +.blankOutOfBandManagement .icon { + background-position: -266px -31px; +} + +.blankOutOfBandManagement:hover .icon { + background-position: -266px -31px; +} + +.configureOutOfBandManagement .icon { + background-position: -168px -31px; +} + +.configureOutOfBandManagement:hover .icon { + background-position: -168px -613px; +} + +.diagnostics .icon { + background-position: -165px -122px; +} + +.diagnostics:hover .icon { + background-position: -165px -704px; +} + +.enableOutOfBandManagement .icon { + background-position: -138px -65px; +} + +.enableOutOfBandManagement:hover .icon { + background-position: -138px -647px; +} + +.disableOutOfBandManagement .icon { + background-position: -138px -123px; +} + +.disableOutOfBandManagement:hover .icon { + background-position: -138px -705px; +} + +.issueOutOfBandManagementPowerAction .icon { + background-position: -266px -3px; +} + +.issueOutOfBandManagementPowerAction:hover .icon { + background-position: -265px -584px; +} + +.changeOutOfBandManagementPassword .icon { + background-position: -68px -30px; +} + +.changeOutOfBandManagementPassword:hover .icon { + background-position: -68px -612px; +} + +.enableMaintenanceMode .icon { + background-position: -138px -65px; +} + +.enableMaintenanceMode:hover .icon { + background-position: -138px -647px; +} + +.cancelMaintenanceMode .icon { + background-position: -138px -123px; +} + +.cancelMaintenanceMode:hover .icon { + background-position: -138px -705px; +} + +.lock .icon { + background-position: -104px -124px; +} + +.lock:hover .icon { + background-position: -104px -706px; +} + +.updateResourceLimits .icon { + background-position: -100px -32px; +} + +.updateResourceLimits:hover .icon { + background-position: -100px -614px; +} + +.addVlanRange .icon, +.addVmwareDc .icon { + background-position: -37px -62px; +} + +.addVlanRange:hover .icon, +.addVmwareDc:hover .icon { + background-position: -37px -62px; +} + +.removeVlanRange .icon { + background-position: 1px -92px; +} + +.removeVlanRange:hover .icon { + background-position: 1px -92px; +} + +.resize .icon, +.updateResourceCount .icon { + background-position: -167px -66px; +} + +.resize:hover .icon, +.updateResourceCount:hover .icon { + background-position: -167px -648px; +} + +.generateKeys .icon, +.networkACL .icon { + background-position: -167px -95px; +} + +.generateKeys:hover .icon, +.networkACL:hover .icon { + background-position: -167px -677px; +} + +.revertSnapshot .icon, +.revertToVMSnapshot .icon, +.restoreVM .icon, +.restore .icon, +.recover .icon { + background-position: -168px -31px; +} + +.reset .icon, +.reinstall .icon { + background-position: -168px -31px; +} + +.scaleUp .icon { + background-position: -167px -66px; +} + +.revertSnapshot:hover .icon, +.revertToVMSnapshot:hover .icon, +.restoreVM:hover .icon, +.restore:hover .icon { + background-position: -168px -613px; +} + +.reset:hover .icon { + background-position: -168px -613px; +} + +.enableVPN .icon { + background-position: -198px -3px; +} + +.enableVPN:hover .icon { + background-position: -197px -586px; +} + +.disableVPN .icon { + background-position: -198px -32px; +} + +.disableVPN:hover .icon { + background-position: -197px -615px; +} + +.addIpRange .icon { + background-position: -197px -65px; +} + +.addIpRange:hover .icon { + background-position: -197px -647px; +} + +.forceReconnect .icon { + background-position: -196px -95px; +} + +.forceReconnect:hover .icon { + background-position: -196px -677px; +} + +.manage .icon { + background-position: -165px -122px; +} + +.manage:hover .icon { + background-position: -165px -704px; +} + +.unmanage .icon { + background-position: -196px -122px; +} + +.unmanage:hover .icon { + background-position: -196px -704px; +} + +.configureSamlAuthorization .icon { + background-position: -165px -122px; +} + +.configureSamlAuthorization:hover .icon { + background-position: -165px -704px; +} + +.viewConsole .icon { + background-position: -231px -2px; +} + +.viewConsole:hover .icon { + background-position: -229px -586px; +} + +.moveTop .icon { + background-position: -24px -161px; +} + +.moveTop:hover .icon { + background-position: -24px -734px; +} + +.moveBottom .icon { + background-position: -98px -161px; +} + +.moveBottom:hover .icon { + background-position: -98px -734px; +} + +.moveUp .icon { + background-position: -2px -161px; +} + +.moveUp:hover .icon { + background-position: -2px -734px; +} + +.moveDown .icon { + background-position: -55px -161px; +} + +.moveDown:hover .icon { + background-position: -55px -734px; +} + +.moveDrag .icon { + border-radius: 10px; + /*+border-radius:10px;*/ + border-radius: 10px 10px 10px 10px; + background-position: -82px -162px; + cursor: move; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -khtml-border-radius: 10px; +} + +.moveDrag:hover .icon { + background-color: #ffffff; + cursor: move !important; +} + +.uploadVolume .icon { + background-position: -232px -34px; +} + +.uploadVolume:hover .icon { + background-position: -230px -615px; +} + +.editTags .icon { + background-position: -228px -65px; +} + +.editTags:hover .icon { + background-position: -228px -646px; +} + +.replaceacllist .icon, +.replaceACL .icon, +.updateIpaddr .icon, +.changeAffinity .icon { + background-position: -264px -2px; +} + +.replaceacllist:hover .icon, +.replaceACL:hover .icon, +.updateIpaddr:hover .icon, +.changeAffinity:hover .icon { + background-position: -263px -583px; +} + +.releaseFromAccount .icon { + background-position: -230px -123px; +} + +.releaseFromAccount:hover .icon { + background-position: -229px -704px; +} + +.addAccount .icon { + background-position: -231px -96px; +} + +.addAccount:hover .icon { + background-position: -230px -677px; +} + +.linktoldap .icon { + background-position: -197px -65px; +} + +.linktoldap:hover .icon { + background-position: -197px -647px; +} diff --git a/ui/css/src/scss/components/actions-dialog.scss b/ui/css/src/scss/components/actions-dialog.scss new file mode 100644 index 00000000000..3408e4c5fdd --- /dev/null +++ b/ui/css/src/scss/components/actions-dialog.scss @@ -0,0 +1,224 @@ +// 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. + +.ui-dialog { + position: absolute; + padding: 15px; + /*+box-shadow:0px -4px 15px #4C4A4A;*/ + box-shadow: 0 -4px 15px #4c4a4a; + background: #ffffff; + text-align: left; + -moz-box-shadow: 0 -4px 15px #4c4a4a; + -webkit-box-shadow: 0 -4px 15px #4c4a4a; + -o-box-shadow: 0 -4px 15px #4c4a4a; +} + +.ui-dialog.ui-corner-all { + border-radius: 0; +} + +.ui-dialog .ui-widget-content { + display: inline-block; + padding: 8px 0 8px 8px; + text-align: center; +} + +.ui-dialog .ui-widget-content .nothing-to-select { + width: 386px; + margin: 57px 0 0; + padding: 4px 25px 180px 28px; + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + background: #ffffff; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + font-size: 16px; + line-height: 21px; + color: #3d3d3d; + text-align: left; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + /*+border-radius:10px;*/ + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -khtml-border-radius: 10px; +} + +.ui-dialog .ui-widget-content .nothing-to-select p { + margin: 18px 0 0; +} + +.ui-dialog .ui-widget-content .nothing-to-select .specify-ip { + margin-top: 28px; + padding-top: 21px; + border-top: 1px solid #dfdfdf; + font-size: 12px; +} + +.ui-dialog-buttonset { + width: 285px; + margin: 0; +} + +.ui-dialog .ui-button { + display: block; + float: left; + width: 110px; + height: 31px; + border: 0; + border: 1px solid #bfbcbc; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + /*+border-radius:4px;*/ + background: url('../images/gradients.png') -2px -481px; + cursor: pointer; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.ui-dialog .ui-button:hover { + background-position: -4px -426px; +} + +.ui-dialog.notice .close.ui-button { + display: inline; + float: right; + padding: 0; + background: transparent; + color: #516374; + /*+text-shadow:0px -1px 1px #FFFFFF;*/ + text-shadow: 0 -1px 1px #ffffff; + -moz-text-shadow: 0 -1px 1px #ffffff; + -webkit-text-shadow: 0 -1px 1px #ffffff; + -o-text-shadow: 0 -1px 1px #ffffff; +} + +.ui-dialog .ui-button.ok { + border: 1px solid #0065c5; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + /*+text-shadow:0px -1px 1px #011238;*/ + background-position: 0 -317px; + color: #ffffff; + text-shadow: 0 -1px 1px #011238; + -moz-text-shadow: 0 -1px 1px #011238; + /*+border-radius:4px;*/ + -webkit-text-shadow: 0 -1px 1px #011238; + -o-text-shadow: 0 -1px 1px #011238; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.ui-dialog .ui-button.ok:hover { + border: 1px solid #004ff7; + background-position: -3px -368px; +} + +.ui-dialog.confirm .ui-button { + margin-top: 0; + margin-left: 11px; +} + +.ui-dialog.confirm .ui-button.cancel { + margin-left: 50px; +} + +.ui-dialog span.message { + display: block; + padding-bottom: 40px; + font-size: 14px; + color: #445361; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + text-align: center; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; +} + +.ui-dialog span.message ul { + margin-top: 14px; + margin-left: 30px; + text-align: left; + list-style: disc; +} + +.ui-dialog span.message ul li { + margin-top: 3px; +} + +.ui-dialog span.message p { + margin-top: 20px; + text-align: left; +} + +.ui-dialog-titlebar { + height: 33px; + margin: auto; + border-radius: 7px 7px 0 0; + /*+border-radius:7px 7px 0 0;*/ + background: #ffffff; + color: #000000; + -moz-border-radius: 7px 7px 0 0; + -webkit-border-radius: 7px 7px 0 0; + -khtml-border-radius: 7px 7px 0 0; +} + +.ui-dialog-titlebar.ui-widget-header { + border: 0; + font-weight: inherit; +} + +.ui-dialog-titlebar .ui-icon-closethick { + display: none; +} + +.ui-dialog-title { + /*+placement:shift 8px 9px;*/ + position: relative; + top: 9px; + left: 8px; + padding: 2px 0 5px 30px; + background: url('../images/icons.png') no-repeat 0 -255px; + font-size: 14px; +} + +.notice .ui-dialog-title { + background-position: 0 -288px; +} + +.ui-dialog.confirm .ui-dialog-title { + background: url('../images/icons.png') no-repeat 0 -224px; +} + +.ui-dialog.create-form .ui-dialog-title { + background: url('../images/icons.png') no-repeat 0 -255px; +} + +.ui-dialog.warning .ui-dialog-title { + background: url('../images/icons.png') no-repeat 0 -286px; +} + +.ui-dialog.confirm .ui-button { + /*+placement:shift 0px -8px;*/ + position: relative; + top: -8px; + left: 0; +} diff --git a/ui/css/src/scss/components/actions-table.scss b/ui/css/src/scss/components/actions-table.scss new file mode 100644 index 00000000000..f650eb29bdf --- /dev/null +++ b/ui/css/src/scss/components/actions-table.scss @@ -0,0 +1,85 @@ +// 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. + +table td.actions { + width: 200px; + /*Make fixed*/ + min-width: 200px; + max-width: 200px; + cursor: default; +} + +table td.actions span { + margin: 0 0 0 2px !important; +} + +table td.actions .action span.icon { + float: left; + width: 23px; + height: 21px; + background-image: url('../images/sprites.png'); + cursor: pointer; +} + +table td.actions .action.disabled .icon { + opacity: 0.2; + /*+opacity:20%;*/ + cursor: not-allowed; + filter: alpha(opacity=20); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); + -moz-opacity: 0.2; +} + +table tr.odd td.actions .action.disabled .icon { + background-color: #f2f0f0; +} + +table tr.even td.actions .action.disabled .icon { + background-color: #dfe1e3; +} + +table tr td.actions .action.text { + display: inline-block; + border: 1px solid #c2c2c2; + border-radius: 4px; + /*+border-radius:4px;*/ + background: url('../images/bg-gradients.png') repeat-x 0 -83px; + cursor: pointer; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +table tr td.actions .action.text:hover { + /*+box-shadow:inset 0px 1px 3px #171717;*/ + box-shadow: inset 0 1px 3px #171717; + -moz-box-shadow: inset 0 1px 3px #171717; + -webkit-box-shadow: inset 0 1px 3px #171717; + -o-box-shadow: inset 0 1px 3px #171717; +} + +table tr td.actions .action.text .label { + padding: 4px 0 0 4px; +} + +table tr td.actions .action.text .icon { + padding-bottom: 4px; +} + +table tr.selected td.actions .action.disabled .icon { + background-color: #cbddf3; +} diff --git a/ui/css/src/scss/components/actions.scss b/ui/css/src/scss/components/actions.scss new file mode 100644 index 00000000000..990eced3543 --- /dev/null +++ b/ui/css/src/scss/components/actions.scss @@ -0,0 +1,161 @@ +// 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. + +div.detail-group.actions { + margin: 0; + padding: 0; +} + +div.detail-group.actions table { + padding: 0; +} + +div.detail-group.actions tr { + margin: 0; +} + +div.detail-group.actions td { + vertical-align: middle; + height: 50px; +} + +.details.group-multiple div.detail-group.actions { + position: relative; + float: right; + max-width: 75%; + height: 23px; + margin: -15px 0 -5px; +} + +.details.group-multiple div.detail-group.actions table { + background: none; +} + +.details.group-multiple div.detail-group.actions td.detail-actions { + display: block; + float: right; + min-width: 120px; + height: 35px; + padding: 0; + background: none; +} + +.details.group-multiple div.detail-group.actions .detail-actions .action { + position: relative; + float: left; + /*+placement:shift 11px 7px;*/ + top: 7px; + left: 11px; + width: 32px; +} + +.details.group-multiple div.detail-group.actions .detail-actions .action a { + width: 31px; + background: none; +} + +.detail-group table td.detail-actions { + height: 26px; +} + +.detail-group table td.detail-actions.full-length { + display: block; + float: left; + width: 99%; +} + +.detail-group table td.detail-actions .action.text { + display: inline-block; + float: right; + margin-right: 8px; + padding: 0 6px 0 0; + border: 1px solid #c2c2c2; + border-radius: 4px; + /*+border-radius:4px;*/ + background: url('../images/bg-gradients.png') repeat-x 0 -83px; + cursor: pointer; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.detail-group table td.detail-actions .action.text .label { + position: relative; + /*+placement:shift -1px 8px;*/ + top: 8px; + left: -1px; + font-size: 12px; +} + +.detail-group table td.detail-actions .action.text:hover { + /*+box-shadow:inset 0px 1px 3px #171717;*/ + box-shadow: inset 0 1px 3px #171717; + -moz-box-shadow: inset 0 1px 3px #171717; + -webkit-box-shadow: inset 0 1px 3px #171717; + -o-box-shadow: inset 0 1px 3px #171717; +} + +.detail-group table td.detail-actions a { + display: block; + float: left; + width: 30px; + height: 25px; + margin: 0; + text-indent: -9999px; +} + +.detail-group table td.detail-actions a:hover { + background-position: -417px -43px; +} + +.detail-group table td.detail-actions div.action.first a { + width: 32px; + background-position: -385px -11px; +} + +.detail-group table td.detail-actions div.action.first a:hover { + background-position: -385px -43px; +} + +.detail-group table td.detail-actions div.action.last a { + width: 30px; + background-position: -596px -11px; +} + +.detail-group table td.detail-actions div.action.last a:hover { + background-position: -596px -43px; +} + +.detail-group table td.detail-actions div.action.single a { + width: 31px; + height: 26px; + background-position: -414px -625px; +} + +.detail-group table td.detail-actions div.action.text a { + background: none; +} + +.detail-group table td.detail-actions div.action.single a:hover { + background-position: -414px -587px; +} + +.detail-group table td.detail-actions a span.icon { + display: block; + padding: 10px; + background-image: url('../images/sprites.png'); +} diff --git a/ui/css/src/scss/components/advanced-search.scss b/ui/css/src/scss/components/advanced-search.scss new file mode 100644 index 00000000000..14ceccf31af --- /dev/null +++ b/ui/css/src/scss/components/advanced-search.scss @@ -0,0 +1,146 @@ +// 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. + +#advanced_search { + position: absolute; + z-index: $z-index-search; + top: 4px; + left: 139px; + width: 15px; + background: none; +} + +#advanced_search .icon { + /*+opacity:56%;*/ + opacity: 0.56; + position: absolute; + z-index: $z-index-install-wizard2; + top: 1px; + left: -1px; + padding: 10px; + background: url('../images/sprites.png') no-repeat -62px -162px; + filter: alpha(opacity=56); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=56); + -moz-opacity: 0.56; +} + +#advanced_search:hover .icon { + /*+opacity:100%;*/ + opacity: 1; + filter: alpha(opacity=100); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + -moz-opacity: 1; +} + +#advanced_search .form-container { + /*+opacity:91%;*/ + opacity: 0.91; + display: inline-block; + position: absolute; + top: 2px; + /*+box-shadow:0px 5px 9px #B6B0B0;*/ + left: -290px; + padding: 18px; + border: 1px solid #808080; + border-radius: 0 0 4px 4px; + box-shadow: 0 5px 9px #b6b0b0; + /*+border-radius:0 0 4px 4px;*/ + background: #ffffff; + cursor: default; + filter: alpha(opacity=91); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=91); + -moz-opacity: 0.91; + -moz-box-shadow: 0 5px 9px #b6b0b0; + -webkit-box-shadow: 0 5px 9px #b6b0b0; + -o-box-shadow: 0 5px 9px #b6b0b0; + -moz-border-radius: 0 0 4px 4px; + -webkit-border-radius: 0 0 4px 4px; + -khtml-border-radius: 0 0 4px 4px; +} + +#advanced_search .form-container .name { + float: left; + width: 66px; +} + +#advanced_search .form-container .value { + float: left; + width: 186px; +} + +#advanced_search .form-container .form-item { + width: 268px; + height: 40px; + margin-bottom: 15px; +} + +#advanced_search .form-container .form-item input, +#advanced_search .form-container .form-item select { + width: 97%; + padding: 3px; +} + +#advanced_search input[type='submit'] { + float: right; + padding: 8px 20px; + /*+box-shadow:0px 2px 5px #858585;*/ + border: 1px solid #606060; + border-top: 0; + border-radius: 4px; + box-shadow: 0 2px 5px #858585; + background: url('../images/bg-gradients.png') 0 -220px; + font-size: 12px; + font-weight: bold; + color: #ffffff; + text-shadow: 0 1px 1px #000000; + /*+text-shadow:0px 1px 1px #000000;*/ + cursor: pointer; + -moz-box-shadow: 0 2px 5px #858585; + -webkit-box-shadow: 0 2px 5px #858585; + -o-box-shadow: 0 2px 5px #858585; + /*+border-radius:4px;*/ + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +#advanced_search input[type='submit']:hover { + /*+box-shadow:inset 0px 2px 3px #000000;*/ + box-shadow: inset 0 2px 3px #000000; + -moz-box-shadow: inset 0 2px 3px #000000; + -webkit-box-shadow: inset 0 2px 3px #000000; + -o-box-shadow: inset 0 2px 3px #000000; +} + +#advanced_search .button.cancel { + position: relative; + float: right; + top: 13px; + left: -32px; + /*+placement:shift -32px 13px;*/ + background: url('noen'); + font-size: 12px; + font-weight: bold; + color: #9a9a9a; +} + +#advanced_search .button.cancel:hover { + color: #494949; +} diff --git a/ui/css/src/scss/components/autoscaler.scss b/ui/css/src/scss/components/autoscaler.scss new file mode 100644 index 00000000000..aea10502136 --- /dev/null +++ b/ui/css/src/scss/components/autoscaler.scss @@ -0,0 +1,511 @@ +// 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. + +.ui-dialog div.autoscaler { + max-height: 600px; + overflow: auto; +} + +div.container div.panel div#details-tab-network.detail-group div div.multi-edit table.multi-edit tbody tr td, +div.container div.panel div#details-tab-network.detail-group div div.multi-edit table.multi-edit thead tr th { + min-width: 80px; + max-width: 80px; + font-size: 10px; +} + +.ui-dialog div.autoscaler .detail-actions .buttons { + float: right; + margin-right: 6px; +} + +.ui-dialog div.autoscaler .detail-actions .buttons .action { + float: left; + width: 32px; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel='securityGroups'] { + display: block; + float: left; + width: 370px; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel='diskOfferingId'] { + display: inline-block; + position: relative; + float: left; + width: 370px; + margin-top: 1px; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel='minInstance'] { + display: block; + float: left; + width: 50%; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel='maxInstance'] { + display: inline-block; + position: relative; + float: left; + left: -30px; + width: 50%; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel='interval'] { + display: block; + float: left; + width: 50%; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel='quietTime'] { + display: inline-block; + position: relative; + float: left; + left: -15px; + width: 50%; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel='snmpCommunity'] { + display: block; + float: left; + width: 50%; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel='snmpPort'] { + display: inline-block; + position: relative; + float: left; + left: -15px; + width: 50%; +} + +.ui-dialog div.autoscaler div.form-container div.value select { + float: left; + width: 88%; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container { + height: 55px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container { + height: 55px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy div.multi-edit { + margin-top: 0; +} + +div.ui-dialog div.autoscaler div.scale-down-policy div.multi-edit { + margin-top: 0; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title { + margin-top: 40px; + margin-left: -650px; + color: #0055bb; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title label { + margin-right: 10px; + margin-left: 200px; + font-size: 13px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title hr.policy-divider { + margin-bottom: 12px; + border-top: 1px none #38546d; + border-right: 1px none #16222c; + border-left: 1px none #38546d; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title hr.policy-divider { + margin-bottom: 12px; + border-top: 1px none #38546d; + border-right: 1px none #16222c; + border-left: 1px none #38546d; +} + +div.ui-dialog div.autoscaler div.field-group.bottom-fields hr.policy-divider { + margin-top: 15px; + margin-bottom: -1px; + border-top: 1px none #38546d; + border-right: 1px none #16222c; + border-left: 1px none #38546d; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title label { + margin-right: 10px; + margin-left: 170px; + font-size: 13px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title { + margin-top: 10px; + margin-left: -620px; + color: #0055bb; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container div.form-item div.value input[type='text'] { + width: 30%; + margin-top: -17px; + margin-left: 729px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container div.form-item div.name { + margin-left: 420px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container div.form-item div.value input[type='text'] { + width: 30%; + margin-top: -16px; + margin-left: 698px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container div.form-item div.name { + margin-left: 420px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy div.multi-edit div.data div.data-body div.data-item { + margin-right: 22px; + margin-bottom: 0; +} + +div.ui-dialog div.autoscaler div.scale-down-policy div.multi-edit div.data div.data-body div.data-item { + margin-right: 22px; + margin-bottom: 0; +} + +div.ui-dialog div.autoscaler div.scale-up-policy div.slide-label { + width: 12px; + margin-bottom: 3px; + margin-left: 755px; + font-size: 14px; + color: #a5a3a7; +} + +div.ui-dialog div.autoscaler div.scale-down-policy div.slide-label { + width: 12px; + margin-bottom: 3px; + margin-left: 755px; + font-size: 14px; + color: #a5a3a7; +} + +div.ui-dialog div.autoscaler div.scale-up-policy div.hide { + float: right; + width: 14px; + height: 15px; + margin: -20px 45px 0 11px; + border: 1px solid #d0d0d0; + border-radius: 9px 9px 9px 9px; + background: #ffffff url('../images/minus.png') no-repeat 38% 59%; + cursor: pointer; +} + +div.ui-dialog div.autoscaler div.scale-down-policy div.hide { + float: right; + width: 14px; + height: 15px; + margin: -20px 45px 0 11px; + border: 1px solid #d0d0d0; + border-radius: 9px 9px 9px 9px; + background: #ffffff url('../images/minus.png') no-repeat 31% 54%; + cursor: pointer; +} + +div.ui-dialog div.autoscaler div.scale-up-policy div.expand { + float: right; + width: 14px; + height: 15px; + margin: -20px 45px 0 11px; + border: 1px solid #d0d0d0; + border-radius: 9px 9px 9px 9px; + background: #ffffff url('../images/sprites.png') repeat -541px -499px; + cursor: pointer; +} + +div.ui-dialog div.autoscaler div.scale-down-policy div.expand { + float: right; + width: 14px; + height: 15px; + margin: -20px 45px 0 11px; + border: 1px solid #d0d0d0; + border-radius: 9px 9px 9px 9px; + background: #ffffff url('../images/sprites.png') repeat -541px -499px; + cursor: pointer; +} + +div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-item div.name label { + font-size: 11px; +} + +/*List state BG colors*/ +.list-view .body td.item-state-on { + border-bottom: 1px solid #09bc09; + background: #c0ffc0; +} + +.list-view .body td.item-state-off { + border-bottom: 1px solid #ff9f9f; + background: #ffd8cf; +} + +.list-view .body tr.selected td.item-state-on, +.list-view .body tr.selected td.item-state-off { + border-color: inherit; + background-color: inherit; +} + +/*Autoscaler*/ +.ui-dialog div.autoscaler { + max-height: 600px; + overflow: auto; +} + +div.container div.panel div#details-tab-network.detail-group div div.multi-edit table.multi-edit tbody tr td, +div.container div.panel div#details-tab-network.detail-group div div.multi-edit table.multi-edit thead tr th { + min-width: 72px; + font-size: 10px; +} + +.ui-dialog div.autoscaler .detail-actions .buttons { + float: right; + margin-right: 6px; +} + +.ui-dialog div.autoscaler .detail-actions .buttons .action { + float: left; + width: 32px; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel='securityGroups'] { + display: block; + float: left; + width: 370px; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel='diskOfferingId'] { + display: inline-block; + position: relative; + float: left; + width: 370px; + margin-top: 1px; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel='minInstance'] { + display: block; + float: left; + width: 50%; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel='maxInstance'] { + display: inline-block; + position: relative; + float: left; + left: -30px; + width: 50%; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel='interval'] { + display: block; + float: left; + width: 50%; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel='quietTime'] { + display: inline-block; + position: relative; + float: left; + left: -15px; + width: 50%; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel='snmpCommunity'] { + display: block; + float: left; + width: 50%; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel='snmpPort'] { + display: inline-block; + position: relative; + float: left; + left: -15px; + width: 50%; +} + +.ui-dialog div.autoscaler div.form-container div.value select { + float: left; + width: 88%; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container { + height: 55px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container { + height: 55px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy div.multi-edit { + margin-top: 0; +} + +div.ui-dialog div.autoscaler div.scale-down-policy div.multi-edit { + margin-top: 0; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title { + margin-top: 40px; + margin-left: -650px; + color: #0055bb; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title label { + margin-right: 10px; + margin-left: 200px; + font-size: 13px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title hr.policy-divider { + margin-bottom: 12px; + border-top: 1px none #38546d; + border-right: 1px none #16222c; + border-left: 1px none #38546d; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title hr.policy-divider { + margin-bottom: 12px; + border-top: 1px none #38546d; + border-right: 1px none #16222c; + border-left: 1px none #38546d; +} + +div.ui-dialog div.autoscaler div.field-group.bottom-fields hr.policy-divider { + margin-top: 15px; + margin-bottom: -1px; + border-top: 1px none #38546d; + border-right: 1px none #16222c; + border-left: 1px none #38546d; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title label { + margin-right: 10px; + margin-left: 170px; + font-size: 13px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title { + margin-top: 10px; + margin-left: -620px; + color: #0055bb; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container div.form-item div.value input[type='text'] { + width: 30%; + margin-top: 1px; + margin-left: 195px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container div.form-item div.name { + margin-left: 390px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container div.form-item div.value input[type='text'] { + width: 30%; + margin-top: -16px; + margin-left: 670px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container div.form-item div.name { + margin-left: 390px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy div.multi-edit div.data div.data-body div.data-item { + margin-right: 22px; + margin-bottom: 0; +} + +div.ui-dialog div.autoscaler div.scale-down-policy div.multi-edit div.data div.data-body div.data-item { + margin-right: 22px; + margin-bottom: 0; +} + +div.ui-dialog div.autoscaler div.scale-up-policy div.slide-label { + width: 12px; + margin-bottom: 3px; + margin-left: 755px; + font-size: 14px; + color: #a5a3a7; +} + +div.ui-dialog div.autoscaler div.scale-down-policy div.slide-label { + width: 12px; + margin-bottom: 3px; + margin-left: 755px; + font-size: 14px; + color: #a5a3a7; +} + +div.ui-dialog div.autoscaler div.scale-up-policy div.hide { + float: right; + width: 14px; + height: 15px; + margin: -20px 45px 0 11px; + border: 1px solid #d0d0d0; + border-radius: 9px 9px 9px 9px; + background: #ffffff url('../images/minus.png') no-repeat 38% 59%; + cursor: pointer; +} + +div.ui-dialog div.autoscaler div.scale-down-policy div.hide { + float: right; + width: 14px; + height: 15px; + margin: -20px 45px 0 11px; + border: 1px solid #d0d0d0; + border-radius: 9px 9px 9px 9px; + background: #ffffff url('../images/minus.png') no-repeat 31% 54%; + cursor: pointer; +} + +div.ui-dialog div.autoscaler div.scale-up-policy div.expand { + float: right; + width: 14px; + height: 15px; + margin: -20px 45px 0 11px; + border: 1px solid #d0d0d0; + border-radius: 9px 9px 9px 9px; + background: #ffffff url('../images/sprites.png') repeat -541px -499px; + cursor: pointer; +} + +div.ui-dialog div.autoscaler div.scale-down-policy div.expand { + float: right; + width: 14px; + height: 15px; + margin: -20px 45px 0 11px; + border: 1px solid #d0d0d0; + border-radius: 9px 9px 9px 9px; + background: #ffffff url('../images/sprites.png') repeat -541px -499px; + cursor: pointer; +} + +div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-item div.name label { + font-size: 11px; +} diff --git a/ui/css/src/scss/components/breadcrumbs.scss b/ui/css/src/scss/components/breadcrumbs.scss new file mode 100644 index 00000000000..e0ded9302a4 --- /dev/null +++ b/ui/css/src/scss/components/breadcrumbs.scss @@ -0,0 +1,144 @@ +// 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. + +div.toolbar div.filters { + float: left; + width: 200px; + margin: 5px 0 0 12px; +} + +div.toolbar div.filters select { + width: 104px; + height: 21px; + margin: 1px 0 0; + padding: 0 0 0; + /*+border-radius:4px;*/ + border: 1px solid #808080; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + font-size: 12px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +#breadcrumbs { + width: 100%; + height: 29px; + max-height: 29px; + background: #ffffff; + overflow: hidden; +} + +.project-view #breadcrumbs { + background-color: #828282; + background-image: url('../images/bg-breadcrumbs-project-view.png'); + background-position: 0 1px; +} + +#breadcrumbs div.home { + position: relative; + z-index: $z-index-breadcrumbs2; + float: left; + /*+placement:shift -1px 0px;*/ + top: 0; + left: -1px; + width: auto; + height: 23px; + cursor: pointer; +} + +.project-view #breadcrumbs div.home { + background-position: -63px -98px; +} + +.project-view #breadcrumbs div.end { + background-position: -89px -98px; +} + +#breadcrumbs ul li, +#breadcrumbs div.active-project, +#breadcrumbs .home { + position: relative; + position: relative; + float: left; + top: 0; + left: -13px; + height: 21px; + /*+placement:shift -13px 0px;*/ + margin: 0 0 0 2px; + padding: 9px 5px 0 0; + font-size: 13px; + color: #ffffff; + cursor: pointer; +} + +#breadcrumbs ul li:after, +#breadcrumbs .home:after { + content: '>'; + position: relative; + /*+placement:shift 7px -1px;*/ + top: -1px; + left: 7px; + font-size: 11px; + color: #c4c4c4; +} + +.project-view #breadcrumbs ul li { + color: #ffffff !important; +} + +#breadcrumbs ul li, +#breadcrumbs div.active-project, +#breadcrumbs .home { + /*+placement:shift 0px 0px;*/ + position: relative; + top: 0; + left: 0; + padding: 9px 5px 0 8px; + color: #63a9f1; +} + +#breadcrumbs ul li:hover, +#breadcrumbs ul li.active, +#breadcrumbs ul li.maximized { + color: #000000; +} + +/*NOTE: End divs are not displayed per UI changes*/ +#breadcrumbs ul div.end { + /*+placement:shift -37px -1px;*/ + display: none; + position: relative; + top: -1px; + left: -37px; + /*Disabled*/ + margin-right: 0; +} + +#breadcrumbs ul li { + position: relative; + /*+placement:shift -36px 0px;*/ + top: 0; + font-size: 13px; +} + +#breadcrumbs div.active-project { + display: none; + z-index: $z-index-breadcrumbs1; + text-indent: 9px; +} diff --git a/ui/css/src/scss/components/browser.scss b/ui/css/src/scss/components/browser.scss new file mode 100644 index 00000000000..31dce19f348 --- /dev/null +++ b/ui/css/src/scss/components/browser.scss @@ -0,0 +1,118 @@ +// 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. + +#browser { + position: relative; + float: left; + width: 994px; + max-width: 994px; + height: 100%; + overflow: hidden; +} + +#browser.panel-highlight { + overflow: visible; +} + +#browser div.panel { + height: 100%; + border-right: 1px solid #a5a5a5; + background-color: #f7f7f7; + overflow: visible; +} + +#browser div.panel.panel-highlight-wrapper { + display: inline-block; + position: absolute; + /*+border-radius:9px;*/ + z-index: $z-index-panel-highlight; + height: 542px; + margin-top: 7px; + padding: 78px 0 67px 51px; + border: 3px solid #ffffff; + /*+box-shadow:0px 0px 12px #000000;*/ + border-radius: 9px; + box-shadow: 0 0 12px #000000; + background: none; + overflow: hidden; + -moz-border-radius: 9px; + -webkit-border-radius: 9px; + -khtml-border-radius: 9px; + -moz-box-shadow: 0 0 12px #000000; + -webkit-box-shadow: 0 0 12px #000000; + -o-box-shadow: 0 0 12px #000000; +} + +#browser div.panel.panel-highlight-wrapper .panel { + top: 3px; + left: 20px !important; + height: 631px; + overflow: hidden; +} + +.project-view #browser div.panel { + background: #6d747d; +} + +.ui-tabs div.ui-tabs-panel { + position: relative; +} + +.project-view .ui-tabs div.ui-tabs-panel { + background: #dbdddf; +} + +#browser div.panel .shadow { + position: absolute; + top: 0; + left: -10px; + width: 10px; + height: 100%; + background: url('../images/bg-panel-shadow.png') repeat-y 0 0; +} + +#browser.panel-highlight { + overflow: visible; +} + +#browser.panel-highlight .panel.highlighted { + /*+box-shadow:0px 10px 11px #5C5C5C;*/ + margin-top: 21px; + border: 5px solid #ffffff; + border-radius: 6px; + box-shadow: 0 10px 11px #5c5c5c; + -moz-box-shadow: 0 10px 11px #5c5c5c; + /*+border-radius:6px;*/ + -webkit-box-shadow: 0 10px 11px #5c5c5c; + -o-box-shadow: 0 10px 11px #5c5c5c; + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + -khtml-border-radius: 6px; +} + +#browser.panel-highlight .panel > .shadow { + display: none; +} + +#browser .highlight-arrow { + position: absolute; + top: -22px; + left: 80px; + width: 24px; + height: 19px; + background: url('../images/sprites.png') -590px -1295px; +} diff --git a/ui/css/src/scss/components/button-add.scss b/ui/css/src/scss/components/button-add.scss new file mode 100644 index 00000000000..f176e213d7e --- /dev/null +++ b/ui/css/src/scss/components/button-add.scss @@ -0,0 +1,35 @@ +// 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. + +.ui-dialog .ui-button.add { + width: auto; + height: 12px; + margin: 0 0 12px; + padding: 5px 7px 5px 6px; + background: transparent linear-gradient(to bottom, #f7f7f7 1%, #eaeaea 100%) repeat 0 0; + font-size: 12px; +} + +.ui-dialog .ui-button.add:hover { + box-shadow: inset 0 0 5px #c3c3c3; + background: #e5e5e5 repeat 0 0; +} + +.ui-dialog .ui-button.add span { + padding: 0 0 3px 18px; + background: transparent url('../images/icons.png') no-repeat -626px -209px; +} diff --git a/ui/css/src/scss/components/button-export.scss b/ui/css/src/scss/components/button-export.scss new file mode 100644 index 00000000000..84f9c149615 --- /dev/null +++ b/ui/css/src/scss/components/button-export.scss @@ -0,0 +1,45 @@ +// 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. + +div.button.export { + position: relative; + float: right; + top: 5px; + left: 0; + height: 12px; + margin: 0 10px 0 0; + padding: 5px 5px 5px 5px; + border: 1px solid #b7b7b7; + border-radius: 4px 4px 4px 4px; + background: linear-gradient(to bottom, rgba(247, 247, 247, 1) 1%, rgba(234, 234, 234, 1) 100%); + font-size: 12px; + font-weight: 100; + color: #000000; + text-shadow: 0 1px 1px #dee5ea; + cursor: pointer; +} + +div.button.export a { + position: relative; + top: 0; + left: 0; + padding: 0 0 3px 20px; + background: url('../images/exportCsvIcon.png') no-repeat; + background-size: 15.5px; + color: #000000; + text-decoration: none; +} diff --git a/ui/css/src/scss/components/ca-cert-download.scss b/ui/css/src/scss/components/ca-cert-download.scss new file mode 100644 index 00000000000..33005ee0462 --- /dev/null +++ b/ui/css/src/scss/components/ca-cert-download.scss @@ -0,0 +1,42 @@ +// 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. + +.cacert-download { + display: inline-block; + position: relative; + position: absolute; + float: right; + top: 20px; + left: 1175px; + height: 30px; + cursor: pointer; +} + +.cacert-download .icon { + display: inline-block; + display: block; + position: absolute; + float: left; + width: 32px; + height: 30px; + background: url('../images/sprites.png') -142px -348px; +} + +.cacert-download:hover .icon, +.cacert-download.active .icon { + background-position: -368px -348px; +} diff --git a/ui/css/src/scss/components/copy-template.scss b/ui/css/src/scss/components/copy-template.scss new file mode 100644 index 00000000000..ff06375c1e0 --- /dev/null +++ b/ui/css/src/scss/components/copy-template.scss @@ -0,0 +1,44 @@ +// 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. + +.copy-template-destination-list div.text-search { + right: 5px; +} + +.copy-template-destination-list div.ui-widget-content { + display: block !important; +} + +div.panel.copy-template-destination-list div.list-view div.fixed-header { + width: 500px; +} + +.copy-template-destination-list.panel div.list-view div.data-table table { + width: 595px; +} + +.copy-template-destination-list .list-view .toolbar { + width: 654px; +} + +.multi-edit-add-list .ui-button.copytemplateok { + left: 330px; +} + +.multi-edit-add-list .ui-button.copytemplatecancel { + left: 310px; +} diff --git a/ui/css/src/scss/components/create-form.scss b/ui/css/src/scss/components/create-form.scss new file mode 100644 index 00000000000..09ab932a088 --- /dev/null +++ b/ui/css/src/scss/components/create-form.scss @@ -0,0 +1,218 @@ +// 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. + +.ui-dialog div.form-container { + display: inline-block; + width: 94% !important; + height: 106px; + text-align: left; +} + +.ui-dialog div.form-container span.message { + padding: 0 0 23px 5px; + font-size: 15px; + text-align: left; +} + +.ui-dialog div.form-container span.message br { + margin-bottom: 13px; +} + +.ui-dialog div.form-container div.form-item { + display: inline-block; + width: 100%; + margin: 0 0 12px; +} + +.ui-dialog div.form-container div.name { + float: left; + clear: both; + width: 115px; + margin: 3px 0 0; + font-size: 15px; + /*+text-shadow:0px 2px 1px #FFFFFF;*/ + color: #485867; + text-shadow: 0 2px 1px #ffffff; + -moz-text-shadow: 0 2px 1px #ffffff; + -webkit-text-shadow: 0 2px 1px #ffffff; + -o-text-shadow: 0 2px 1px #ffffff; +} + +.ui-dialog div.form-container div.name label { + display: block; + width: 119px; + margin-top: 2px; + font-size: 13px; + text-align: right; +} + +.field-required { + padding: 0 3px 0 0; + font-size: 14px; + font-weight: bold; + color: #ee7b7b; +} + +.ui-dialog div.form-container div.value { + display: inline-block; + float: left; + width: 61%; + margin: 0 0 0 15px; +} + +.ui-dialog div.form-container div.value input, +textarea { + float: left; + width: 98%; + padding: 4px; + border: 1px solid #afafaf; + background: #f6f6f6; + font-size: 14px; +} + +.ui-dialog div.form-container div.value label { + display: block; + width: 119px; + margin-top: 2px; + margin-left: -10px; + font-size: 13px; + text-align: left; +} + +.ui-dialog div.form-container div.value input.hasDatepicker { + font-size: 13px; + color: #2f5d86; + text-indent: 3px; + cursor: pointer; +} + +.ui-dialog div.form-container div.value input.hasDatepicker:hover { + /*+box-shadow:inset 0px 0px 3px;*/ + box-shadow: inset 0 0 3px; + -moz-box-shadow: inset 0 0 3px; + -webkit-box-shadow: inset 0 0 3px; + -o-box-shadow: inset 0 0 3px; +} + +.ui-dialog div.form-container div.value .range-edit { + width: 249px; + height: 33px; + margin: 2px 0 0; +} + +.ui-dialog div.form-container div.value .range-edit .range-item { + position: relative; + float: left; + width: 124px; + height: 32px; +} + +.ui-dialog div.form-container div.value .range-edit input { + width: 105px; + margin: 0 9px 0 0; +} + +.ui-dialog div.form-container div.value .range-edit label.error { + position: absolute; + top: 25px; + left: 3px; +} + +.ui-dialog div.form-container div.value select { + float: right; + width: 100%; +} + +.ui-dialog div.form-container div.value input[type='checkbox'] { + width: 14px; +} + +.ui-dialog div.form-container div.value label.error { + display: block; + display: none; + clear: both; + font-size: 10px; + color: #fa0000; +} + +.ui-dialog div.form-container div.multi-array { + display: inline-block; + padding: 4px; + border: 1px solid #808080; + /*+border-radius:10px;*/ + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + box-shadow: inset 0 1px 1px #929292; + background: #ffffff; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + /*+box-shadow:inset 0px 1px 1px #929292;*/ + -khtml-border-radius: 10px; + -moz-box-shadow: inset 0 1px 1px #929292; + -webkit-box-shadow: inset 0 1px 1px #929292; + -o-box-shadow: inset 0 1px 1px #929292; +} + +.ui-dialog div.form-container div.multi-array .item { + float: left; + width: 111px; + margin: 0 0 13px; +} + +.ui-dialog div.form-container div.multi-array .item .name { + float: left; + width: 61px; + font-size: 11px; +} + +.ui-dialog div.form-container div.multi-array .item .value { + float: left; + width: 13px; +} + +.ui-dialog div.form-container div.multi-array .item .value input { + float: left; + margin: 0; + padding: 0; +} + +.ui-dialog.create-form .ui-dialog-buttonpane { + margin-left: 25px; +} + +.ui-dialog.create-form .ui-button.ok { + float: right; + margin-left: 0; +} + +.ui-dialog.create-form .ui-button.cancel { + float: right; + margin-right: 13px; + border: 1px solid #aaaaaa; + border-radius: 4px; + /*+border-radius:4px;*/ + border-radius: 4px 4px 4px 4px; + background: #b6b6b6 url('../images/gradients.png') 0 -480px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.ui-dialog.create-form .ui-button.cancel:hover { + border-color: #878787; + background-position: -4px -426px; +} diff --git a/ui/css/src/scss/components/dashboard-project.scss b/ui/css/src/scss/components/dashboard-project.scss new file mode 100644 index 00000000000..5a6db9edb51 --- /dev/null +++ b/ui/css/src/scss/components/dashboard-project.scss @@ -0,0 +1,239 @@ +// 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. + +.project-dashboard .resources form { + display: inline-block; + width: 87%; + /*+border-radius:11px;*/ + margin-top: 17px; + margin-left: 22px; + padding: 26px; + border-radius: 11px; + border-radius: 11px 11px 11px 11px; + box-shadow: inset 0 3px 4px #979797; + background: #ffffff; + -moz-border-radius: 11px; + /*+box-shadow:inset 0px 3px 4px #979797;*/ + -webkit-border-radius: 11px; + -khtml-border-radius: 11px; + -moz-box-shadow: inset 0 3px 4px #979797; + -webkit-box-shadow: inset 0 3px 4px #979797; + -o-box-shadow: inset 0 3px 4px #979797; +} + +.project-dashboard .resources form .field { + float: left; + clear: both; + width: 100%; + margin: auto auto 30px; +} + +.project-dashboard .resources form label { + float: left; +} + +.project-dashboard .resources form input[type='text'] { + float: right; + width: 176px; + margin: 0 287px 0 0; + padding: 6px; + /*+border-radius:4px;*/ + border: 1px solid #c6c6c6; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + font-size: 16px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.project-dashboard .resources form input[type='submit'] { + display: block; + float: left; + clear: both; + padding: 9px 20px; + border: 0; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + /*+border-radius:4px;*/ + background: transparent url('../images/bg-gradients.png') 0 -220px; + color: #ffffff; + cursor: pointer; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.detail-view .project-dashboard .resources form { + width: 83%; + border-bottom: 1px solid #dbdbdb; +} + +.detail-view .project-dashboard .resources form .field input { + margin-right: 105px; +} + +/*** Dashboard*/ +.project-dashboard .toolbar { + position: relative; +} + +.project-dashboard .ui-tabs { + /*+placement:shift 10px -31px;*/ + position: relative; + top: -31px; + left: 10px; +} + +.project-view .project-dashboard .ui-tabs .multi-edit table td { + background: #eaeaea; +} + +.project-dashboard-view .overview-area { + float: left; +} + +.project-dashboard-view .compute-and-storage .system-dashboard, +.project-dashboard-view .users .system-dashboard { + float: left; + width: 510px; + height: 230px; + background: #777e88; +} + +.project-dashboard-view .compute-and-storage .system-dashboard ul, +.project-dashboard-view .users .system-dashboard ul { + height: 162px; + margin: 14px 0 0; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li, +.project-dashboard-view .users .system-dashboard li { + width: 156px; + height: 161px; + background: #3d4045; + color: #ffffff; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li .icon, +.project-dashboard-view .users li .icon { + position: relative; + position: absolute; + /*+placement:shift 27px 20px;*/ + top: 20px; + left: 27px; + width: 100px; + height: 76px; + background: url('../images/sprites.png') no-repeat 2px -1039px; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li.storage .icon { + background-position: -89px -1036px; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li.bandwidth .icon { + background-position: -184px -1036px; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li .overview { + position: relative; + width: 100%; + height: 53px; + margin: 81px 0 0; + color: #ffffff; + /*+text-shadow:0px 1px 1px #000000;*/ + text-shadow: 0 1px 1px #000000; + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li.storage .overview .total { + position: relative; + /*+placement:shift 30px 21px;*/ + position: absolute; + top: 21px; + left: 30px; + font-size: 28px; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li.storage .overview .label { + position: relative; + position: absolute; + /*+placement:shift 91px 33px;*/ + top: 33px; + left: 91px; + font-size: 13px; + color: #c3c1c1; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li .overview .overview-item { + float: left; + margin: 12px 0 0 20px; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li .overview .overview-item .total { + font-size: 24px; + font-weight: bold; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li .overview .overview-item .label { + margin: 4px 0 0; + font-size: 11px; + color: #c7c7c7; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li .overview .overview-item.running .label { + color: #2bff2b; + /*[empty]background-position:;*/ +} + +.project-dashboard-view .users .system-dashboard { + clear: both; + width: 509px; + height: 100%; +} + +.project-dashboard-view .users .system-dashboard ul { + overflow-y: auto; +} + +.project-dashboard-view .users .system-dashboard li { + width: 86px; + height: 138px; + margin-bottom: 24px; + margin-left: 6px; +} + +.project-dashboard-view .users .system-dashboard li .icon { + left: 16px; + background-position: -306px -1044px; +} + +.project-dashboard-view .users .system-dashboard li .header { + position: relative; + position: absolute; + /*+placement:shift 7px 110px;*/ + top: 110px; + left: 7px; + width: 77px; + max-width: 77px; + white-space: nowrap; + text-align: center; + text-overflow: ellipsis; + overflow: hidden; +} diff --git a/ui/css/src/scss/components/dashboard-system.scss b/ui/css/src/scss/components/dashboard-system.scss new file mode 100644 index 00000000000..acec78e683d --- /dev/null +++ b/ui/css/src/scss/components/dashboard-system.scss @@ -0,0 +1,472 @@ +// 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. + +.system-dashboard { + display: block; + position: relative; + width: 962px; + /*+border-radius:3px;*/ + height: 258px; + margin: 18px 0 0 15px; + border-radius: 3px; + box-shadow: inset 0 0 1px #ffffff; + /*+box-shadow:inset 0px 0px 1px #FFFFFF;*/ + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + -moz-box-shadow: inset 0 0 1px #ffffff; + -webkit-box-shadow: inset 0 0 1px #ffffff; + -o-box-shadow: inset 0 0 1px #ffffff; +} + +.system-dashboard.zone { + height: 609px; + background-position: 0 -1423px; +} + +.system-dashboard-view .toolbar { + position: relative; +} + +.system-dashboard .head { + padding: 0 0 12px; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + box-shadow: 0 0 1px #ffffff; + color: #000000; + text-indent: 11px; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + /*+box-shadow:0px 0px 1px #FFFFFF;*/ + -o-text-shadow: 0 1px 1px #ffffff; + -moz-box-shadow: 0 0 1px #ffffff; + -webkit-box-shadow: 0 0 1px #ffffff; + -o-box-shadow: 0 0 1px #ffffff; +} + +.project-view .system-dashboard .head { + padding-top: 14px; + /*+text-shadow:0px -1px #000000;*/ + box-shadow: none; + color: #ffffff; + text-shadow: 0 -1px #000000; + -moz-text-shadow: 0 -1px #000000; + /*+box-shadow:none;*/ + -webkit-text-shadow: 0 -1px #000000; + -o-text-shadow: 0 -1px #000000; + -moz-box-shadow: none; + -webkit-box-shadow: none; + -o-box-shadow: none; +} + +.system-dashboard .view-more, +.system-dashboard .view-all { + float: right; + margin: -4px 19px 0 0; + border: 1px solid #b5b5b5; + border-radius: 3px; + border-radius: 3px 3px 3px 3px; + background: #dadada repeat-x 0 -735px; + background: rgb(234, 234, 234); + background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhZWFlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmQ2ZDYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+'); + background: -moz-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(214, 214, 214, 1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(214, 214, 214, 1))); + background: -webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(214, 214, 214, 1) 100%); + background: -o-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(214, 214, 214, 1) 100%); + background: -ms-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(214, 214, 214, 1) 100%); + background: linear-gradient(to bottom, rgba(234, 234, 234, 1) 0%, rgba(214, 214, 214, 1) 100%); + font-size: 13px; + /*+border-radius:3px;*/ + font-weight: 100; + cursor: pointer; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', endColorstr='#d6d6d6', GradientType=0); + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; +} + +.system-dashboard .view-more:hover, +.system-dashboard .view-all:hover { + box-shadow: inset 0 1px 1px #000000; + /*+box-shadow:inset 0px 1px 1px #000000;*/ + background: #c1c1c1; + background-position: 0 -763px; + -moz-box-shadow: inset 0 1px 1px #000000; + -webkit-box-shadow: inset 0 1px 1px #000000; + -o-box-shadow: inset 0 1px 1px #000000; +} + +.system-dashboard .status_box .view-all { + /*+placement:shift 18px 110px;*/ + position: relative; + position: absolute; + top: 110px; + left: 18px; + width: 83%; + padding: 8px 0; + text-align: center; +} + +.system-dashboard .status_box { + margin: 10px 0 0; + border: 0; + background: transparent; + font-size: 14px; +} + +.system-dashboard .status_box li { + position: relative; + float: left; + width: 228px; + height: 178px; + /*+border-radius:3px;*/ + margin: 0 0 0 8px; + padding: 0; + border: 1px solid #c6c6c6; + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; +} + +.system-dashboard.zone .status_box li { + height: 152px; + margin-bottom: 8px; + background-color: #f4f4f4; +} + +.system-dashboard.zone .status_box li .icon { + opacity: 0.56; + position: relative; + /*+placement:shift 31px 19px;*/ + position: absolute; + top: 19px; + left: 51px; + padding: 65px 80px 5px; + /*+opacity:56%;*/ + background: url('../images/infrastructure-icons.png') no-repeat 0 0; + filter: alpha(opacity=56); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=56); + -moz-opacity: 0.56; +} + +.system-dashboard .status_box li span.label { + font-size: 12px; + color: #cccfd4; +} + +.system-dashboard .status_box li span.total { + font-size: 25px; +} + +.system-dashboard .status_box li span.label { + font-size: 12px; + color: #cccfd4; +} + +.system-dashboard .status_box li span.unit { + font-size: 13px; + color: #c1c4c9; +} + +.system-dashboard .status_box li span.header { + position: relative; + /*+placement:shift 13px 5px;*/ + top: 13px; + left: 13px; + margin: 1px 0 0; + font-weight: 100; +} + +.system-dashboard.zone .status_box li span.header { + font-size: 14px; + color: #4f4f4f; +} + +.system-dashboard .status_box li span.status { + position: relative; + /*+placement:shift 13px 141px;*/ + position: absolute; + top: 141px; + left: 13px; + font-size: 27px; + color: #25ff25; + /*+text-shadow:0px 1px 1px #000000;*/ + text-shadow: 0 1px 1px #000000; + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; +} + +.system-dashboard .status_box li span.instance.total { + /*+placement:shift 12px 32px;*/ + position: relative; + position: absolute; + top: 32px; + left: 12px; +} + +.system-dashboard .status_box li span.instance.label { + /*+placement:shift 15px 53px;*/ + position: relative; + position: absolute; + top: 53px; + left: 15px; +} + +.system-dashboard .status_box li span.vcpu-hours.total { + /*+placement:shift 13px 76px;*/ + position: relative; + position: absolute; + top: 76px; + left: 13px; +} + +.system-dashboard .status_box li span.vcpu-hours.label { + /*+placement:shift 14px 95px;*/ + position: relative; + position: absolute; + top: 95px; + left: 14px; +} + +.system-dashboard .status_box li span.gb-hours.total { + /*+placement:shift 106px 77px;*/ + position: relative; + position: absolute; + top: 77px; + left: 106px; +} + +.system-dashboard .status_box li span.gb-hours.label { + /*+placement:shift 106px 95px;*/ + position: relative; + position: absolute; + top: 95px; + left: 106px; +} + +.system-dashboard .status_box li span.overview.total { + position: relative; + /*+placement:shift 9px 29px;*/ + position: absolute; + top: 29px; + left: 9px; + font-size: 56px; + font-weight: 100; + color: #2b7daf; + /*+text-shadow:0px -1px 2px #FFFFFF;*/ + text-shadow: 0 -1px 2px #ffffff; + -moz-text-shadow: 0 -1px 2px #ffffff; + -webkit-text-shadow: 0 -1px 2px #ffffff; + -o-text-shadow: 0 -1px 2px #ffffff; +} + +.system-dashboard .status_box li.capacity span.overview.total { + font-size: 32px; +} + +.system-dashboard .status_box li span.overview.label { + /*+placement:shift 52px 79px;*/ + position: relative; + position: absolute; + top: 79px; + left: 52px; +} + +.system-dashboard .status_box li span.used.total { + /*+placement:shift 14px 130px;*/ + position: relative; + position: absolute; + top: 130px; + left: 14px; + font-size: 30px; +} + +.system-dashboard .status_box li span.used.label { + /*+placement:shift 14px 153px;*/ + position: relative; + position: absolute; + top: 153px; + left: 14px; +} + +.system-dashboard .status_box li span.used.unit { + /*+placement:shift 67px 135px;*/ + position: relative; + position: absolute; + top: 135px; + left: 67px; +} + +.system-dashboard .status_box li span.available.unit { + /*+placement:shift 159px 135px;*/ + position: relative; + position: absolute; + top: 135px; + left: 159px; +} + +.system-dashboard .status_box li span.available.total { + /*+placement:shift 97px 130px;*/ + position: relative; + position: absolute; + top: 130px; + left: 97px; + font-size: 30px; +} + +.system-dashboard .status_box li span.available.label { + /*+placement:shift 97px 153px;*/ + position: relative; + position: absolute; + top: 153px; + left: 97px; +} + +.system-dashboard-view .socket-info { + float: left; + width: 100%; + height: 239px; + padding: 0; + overflow: auto; +} + +.system-dashboard-view .socket-info > .title { + padding: 8px; + font-size: 13px; +} + +.system-dashboard-view .socket-info li { + float: left; + width: 139px; + /*+border-radius:3px;*/ + margin: 7px; + padding: 13px; + border: 1px solid #cccccc; + border-radius: 3px; + background: #efefef; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; +} + +.system-dashboard-view .socket-info li > div { + float: left; + text-decoration: none; +} + +.system-dashboard-view .socket-info li .name { + width: 100%; + margin-bottom: 13px; + font-weight: 100; +} + +.system-dashboard-view .socket-info li .hosts, +.system-dashboard-view .socket-info li .sockets { + width: 54px; + /*[empty]color:;*/ +} + +.system-dashboard-view .socket-info li div .title { + padding-bottom: 3px; + border: 0; + font-size: 13px; + color: #424242; +} + +.add-zone-resource .form-container { + display: inline-block; + height: auto !important; + overflow: visible; +} + +.add-zone-resource .form-container form { + display: inline-block; + height: auto; +} + +.add-zone-resource .head { + display: inline-block; + width: 100%; + margin-bottom: 7px; + border-bottom: 1px solid #afbdca; + /*+box-shadow:0px 1px #FFFFFF;*/ + box-shadow: 0 1px #ffffff; + -moz-box-shadow: 0 1px #ffffff; + -webkit-box-shadow: 0 1px #ffffff; + -o-box-shadow: 0 1px #ffffff; +} + +.add-zone-resource .head span { + float: left; + padding: 10px 0 18px; + font-size: 14px; + text-indent: 5px; +} + +.add-zone-resource .head select { + float: left; + margin: -3px 0 6px 13px; + margin: 8px 0 0 9px; +} + +/** Infrastructure icons*/ +.system-dashboard.zone .status_box li.zones .icon { + background-position: -36px -105px; +} + +.system-dashboard.zone .status_box li.pods .icon { + background-position: -229px -105px; +} + +.system-dashboard.zone .status_box li.clusters .icon { + background-position: -411px -96px; +} + +.system-dashboard.zone .status_box li.hosts .icon { + background-position: -601px -102px; +} + +.system-dashboard.zone .status_box li.primary-storage .icon { + position: relative; + /*+placement:shift 37px 68px;*/ + top: 68px; + left: 37px; + background-position: -32px -404px; +} + +.system-dashboard.zone .status_box li.sockets .icon { + background-position: -14px -581px; +} + +.system-dashboard.zone .status_box li.secondary-storage .icon { + position: relative; + /*+placement:shift 37px 68px;*/ + top: 68px; + left: 37px; + background-position: -216px -404px; +} + +.system-dashboard.zone .status_box li.system-vms .icon, +.system-dashboard.zone .status_box li.management-servers .icon { + background-position: -408px -399px; +} + +.system-dashboard.zone .status_box li.virtual-routers .icon { + background-position: -601px -400px; +} diff --git a/ui/css/src/scss/components/dashboard.scss b/ui/css/src/scss/components/dashboard.scss new file mode 100644 index 00000000000..049a71eb4e5 --- /dev/null +++ b/ui/css/src/scss/components/dashboard.scss @@ -0,0 +1,728 @@ +// 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. + +.dashboard.admin { + height: 100%; + padding: 10px; + background: #f2f0f0; + font-size: 13px; + color: #3d5873; +} + +.dashboard.admin .dashboard-container { + margin: 0 0 11px; + padding: 0 8px 18px 0; + /*+border-radius:3px;*/ + border: 1px solid #c8c2c2; + border-radius: 3px; + background: #ffffff; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; +} + +.dashboard.admin .dashboard-container.sub { + width: 468px; +} + +.dashboard.admin .dashboard-container.sub .button.view-all, +.dashboard.admin .dashboard-container .button.fetch-latest { + float: right; + clear: none; + padding: 3px 8px 3px 10px; + /*+text-shadow:none;*/ + border: 1px solid #9d9d9d; + border-radius: 3px; + box-shadow: 0 1px #cacaca; + background: rgb(234, 234, 234); + background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhZWFlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmQ2ZDYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+'); + background: -moz-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(214, 214, 214, 1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(214, 214, 214, 1))); + background: -webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(214, 214, 214, 1) 100%); + background: -o-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(214, 214, 214, 1) 100%); + background: -ms-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(214, 214, 214, 1) 100%); + background: linear-gradient(to bottom, rgba(234, 234, 234, 1) 0%, rgba(214, 214, 214, 1) 100%); + font-size: 13px; + font-weight: 100; + color: #000000; + text-shadow: none; + cursor: pointer; + -moz-text-shadow: none; + -webkit-text-shadow: none; + /*+border-radius:3px;*/ + -o-text-shadow: none; + -moz-text-shadow: 0 1px 0 #333e49; + -webkit-text-shadow: 0 1px 0 #333e49; + -o-text-shadow: 0 1px 0 #333e49; + /*+box-shadow:0px 1px #CACACA;*/ + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', endColorstr='#d6d6d6', GradientType=0); + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + -moz-box-shadow: 0 1px #cacaca; + -webkit-box-shadow: 0 1px #cacaca; + -o-box-shadow: 0 1px #cacaca; +} + +.dashboard.admin .dashboard-container.sub .button.view-all:hover, +.dashboard.admin .dashboard-container .button.fetch-latest:hover { + box-shadow: inset 0 0 6px #636363; + /*+box-shadow:inset 0px 0px 6px #636363;*/ + background: #e8e8e8; + -moz-box-shadow: inset 0 0 6px #636363; + -webkit-box-shadow: inset 0 0 6px #636363; + -o-box-shadow: inset 0 0 6px #636363; +} + +.dashboard.admin .dashboard-container.sub .title { + float: left; +} + +/**** Head*/ +.dashboard.admin .dashboard-container.head { + float: left; + width: 966px; + height: 431px; + margin: 9px 0 0; +} + +.dashboard.admin .dashboard-container .top { + float: left; + width: 100%; + margin: 0; + padding: 4px 4px 8px; + background: #efefef 0 -4px; + color: #ffffff; +} + +.dashboard.admin .dashboard-container .title { + float: left; + padding: 5px 0 0 4px; + font-size: 13px; + /*+text-shadow:0px 1px 1px #9A9A9A;*/ + font-weight: 100; + text-shadow: 0 1px 1px #9a9a9a; + -moz-text-shadow: 0 1px 1px #9a9a9a; + -webkit-text-shadow: 0 1px 1px #9a9a9a; + -o-text-shadow: 0 1px 1px #9a9a9a; +} + +.dashboard.admin .dashboard-container .title span { + color: #000000; + /*+text-shadow:none;*/ + text-shadow: none; + -moz-text-shadow: none; + -webkit-text-shadow: none; + -o-text-shadow: none; +} + +.dashboard.admin .dashboard-container.head .selects { + float: right; +} + +.dashboard.admin .dashboard-container.head .selects .select { + float: left; + margin: 0 0 0 21px; + padding: 0; +} + +.dashboard.admin .dashboard-container.head .selects .select label { + display: block; + float: left; + padding: 5px 0 0; +} + +.dashboard.admin .dashboard-container.head .selects .select select { + width: 124px; + margin: 3px 0 0 10px; + padding: 0; +} + +/**** Charts / stats*/ +.dashboard.admin .zone-stats { + position: relative; + top: 0; + left: 0; + width: 974px; + /*+placement:shift 0px 0px;*/ + height: 416px; + overflow: auto; + overflow-x: hidden; +} + +.dashboard.admin .zone-stats ul { + position: relative; + /*+placement:shift -2px 11px;*/ + top: 11px; + left: -2px; + width: 996px; +} + +.dashboard.admin .zone-stats ul li { + position: absolute; + position: relative; + z-index: $z-index-standard; + float: left; + width: 488px; + height: 79px; + font-size: 14px; + cursor: pointer; +} + +.dashboard.admin .zone-stats ul li canvas { + position: relative; + z-index: $z-index-behind; +} + +.dashboard.admin .zone-stats ul li:hover { + background: #fff2da; +} + +.dashboard.admin .zone-stats ul li .label { + float: left; + width: 161px; + margin: 5px 0 0 22px; + padding: 22px 0 7px; + border-bottom: 1px solid #e2e2e2; + font-weight: 100; +} + +.dashboard.admin .zone-stats ul li .info { + float: left; + width: 151px; + margin: 12px 0 0; + white-space: nowrap; + color: #636363; +} + +.dashboard.admin .zone-stats ul li .info .name { + margin-top: 8px; + margin-bottom: 9px; + font-size: 12px; + font-weight: bold; + font-weight: 100; + /*[empty]color:;*/ +} + +.dashboard.admin .zone-stats ul li .pie-chart-container { + position: relative; + position: relative; + float: left; + top: 7px; + left: -8px; + /*+placement:shift -8px 7px;*/ + width: 91px; + height: 69px; + overflow: hidden; +} + +.dashboard.admin .zone-stats ul li .pie-chart-container .percent-label { + position: relative; + position: absolute; + /*+placement:shift 28px 31px;*/ + top: 31px; + left: 28px; + width: 52px; + font-weight: bold; + color: #c98200; + text-align: center; +} + +.dashboard.admin .zone-stats ul li .pie-chart { + position: relative; + z-index: $z-index-behind; + float: left; + width: 70px; + height: 66px; + margin: 3px 27px 0 16px; +} + +.dashboard.admin .dashboard-container .stats ul li { + display: block; + clear: both; + width: 97%; + height: 40px; + margin: 0 0 10px; + padding: 0 12px 0; + /*+border-radius:10px;*/ + border: 1px solid #c8c2c2; + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + background: url('../images/bg-gradients.png') 0 -29px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -khtml-border-radius: 10px; +} + +.dashboard.admin .dashboard-container .stats ul li .name { + float: left; + width: 178px; + margin: 15px 15px 0 0; + font-size: 11px; + font-weight: bold; +} + +.dashboard.admin .dashboard-container .stats ul li div.value { + float: left; + width: 295px; + height: 100%; + margin: 0 9px 0 0; + border-right: 1px solid #c8c2c2; + border-left: 1px solid #c8c2c2; + background: url('../images/bg-gradients.png') 0 -51px; +} + +.dashboard.admin .dashboard-container .stats ul li .value .content { + margin: 6px 9px 9px; + padding: 9px; + border-right: 1px solid #6a6a6a; + border-bottom: 1px solid #ffffff; + /*Adjusting the font size for proper display*/ + border-left: 1px solid #6a6a6a; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: url('../images/bg-gradients.png') repeat-x 0 0; + /*+border-radius:4px;*/ + font-size: 10px; + color: #ffffff; + text-shadow: 0 -1px 1px #6f6f6f; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + /*+text-shadow:0px -1px 1px #6F6F6F;*/ + -khtml-border-radius: 4px; + -moz-text-shadow: 0 -1px 1px #6f6f6f; + -webkit-text-shadow: 0 -1px 1px #6f6f6f; + -o-text-shadow: 0 -1px 1px #6f6f6f; +} + +.dashboard.admin .dashboard-container .stats ul li .chart { + float: left; + width: 290px; + height: 17px; + margin: 12px 23px 0 0; + padding: 0 1px; + border-top: 1px solid #727272; + /*+border-radius:7px;*/ + border-bottom: 1px solid #ffffff; + border-radius: 7px; + border-radius: 7px 7px 7px 7px; + background: url('../images/bg-gradients.png') 0 -130px; + -moz-border-radius: 7px; + -webkit-border-radius: 7px; + -khtml-border-radius: 7px; +} + +.dashboard.admin .dashboard-container .stats ul li .chart .chart-line { + height: 15px; + margin: 1px 0 0; + /*+border-radius:10px;*/ + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + background: url('../images/bg-gradients.png') 0 -149px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -khtml-border-radius: 10px; +} + +.dashboard.admin .dashboard-container .stats ul li .percentage { + float: left; + margin: 13px 0 0; + font-size: 20px; + font-weight: bold; + /*+text-shadow:0px -2px 1px #FFFFFF;*/ + text-shadow: 0 -2px 1px #ffffff; + -moz-text-shadow: 0 -2px 1px #ffffff; + -webkit-text-shadow: 0 -2px 1px #ffffff; + -o-text-shadow: 0 -2px 1px #ffffff; +} + +/**** Alerts*/ +.dashboard.admin .dashboard-container.sub.alerts { + position: relative; + float: left; + height: 170px; + margin: 0 12px 0 0; + overflow: hidden; +} + +.dashboard.admin .dashboard-container.sub.alerts.last { + margin-right: 0; +} + +.dashboard.admin .dashboard-container.sub.alerts ul { + position: relative; + width: 468px; + height: 100%; + margin: 0 0 0 8px; + overflow-y: scroll; +} + +.dashboard.admin .dashboard-container.sub.alerts ul li { + float: left; + margin: 9px; + padding: 8px; + /*+border-radius:3px;*/ + border: 1px solid #d4d0d0; + border-radius: 3px; + background: #f0f0f0; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; +} + +.dashboard.admin .dashboard-container.sub.alerts ul li { + border: 1px solid #ff7070; + background: #ffefef; +} + +.dashboard.admin .dashboard-container.sub.alerts ul li span.title { + width: 100%; + margin: 3px 0 5px; + padding: 0; + font-size: 14px; + font-weight: bold; + font-weight: 100; + /*+text-shadow:0px 1px #FFFFFF;*/ + color: #266e9a; + text-shadow: 0 1px #ffffff; + -moz-text-shadow: 0 1px #ffffff; + -webkit-text-shadow: 0 1px #ffffff; + -o-text-shadow: 0 1px #ffffff; +} + +.dashboard.admin .dashboard-container.sub.alerts ul li p { + float: left; + margin: 4px 0 0; + color: #252525; +} + +.dashboard.admin .dashboard-container.sub.alerts ul li p br { + display: none; +} + +/*** User*/ +#browser div.panel .dashboard.user .toolbar { + position: relative; + height: 60px; +} + +.dashboard.user .button.view-all { + float: right; + margin: -4px 4px -4px 0; + /*+border-radius:4px;*/ + padding: 2px 3px 3px; + border: 1px solid #4b5b6b; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: url('../images/bg-gradients.png') 0 -147px; + color: #ffffff; + /*+text-shadow:0px -1px 2px #13293E;*/ + text-indent: 0; + text-shadow: 0 -1px 2px #13293e; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + -moz-text-shadow: 0 -1px 2px #13293e; + -webkit-text-shadow: 0 -1px 2px #13293e; + -o-text-shadow: 0 -1px 2px #13293e; +} + +.dashboard.user .button.view-all:hover { + background-position: 0 0; + /*+text-shadow:0px 1px 1px #000000;*/ + text-shadow: 0 1px 1px #000000; + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; +} + +/**** Actions*/ +.dashboard.user .dashboard-actions ul { + padding: 11px; +} + +.dashboard.user .dashboard-actions ul li { + float: left; + width: 123px; + height: 40px; + margin: 0 9px 0 0; + border: 1px solid #395268; + /*+border-radius:4px;*/ + border-right: 1px solid #556778; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + box-shadow: inset 0 0 1px #dde3ec; + background: url('../images/bg-gradients.png') repeat-x 0 -181px; + /*+box-shadow:inset 0px 0px 1px #DDE3EC;*/ + cursor: pointer; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + -moz-box-shadow: inset 0 0 1px #dde3ec; + -webkit-box-shadow: inset 0 0 1px #dde3ec; + -o-box-shadow: inset 0 0 1px #dde3ec; +} + +.dashboard.user .dashboard-actions ul li span { + position: relative; + top: 10px; + /*+text-shadow:0px 1px 2px #444444;*/ + left: 4px; + padding: 8px 12px 11px 34px; + background: url('../images/icons.png') no-repeat -613px -309px; + font-size: 11px; + color: #ffffff; + text-shadow: 0 1px 2px #444444; + /*+placement:shift 4px 10px;*/ + -moz-text-shadow: 0 1px 2px #444444; + -webkit-text-shadow: 0 1px 2px #444444; + -o-text-shadow: 0 1px 2px #444444; +} + +.dashboard.user .dashboard-actions ul li.add-iso span { + background-position: -613px -352px; +} + +.dashboard.user .dashboard-actions ul li.add-volume span { + background-position: -613px -264px; +} + +.dashboard.user .dashboard-actions ul li.acquire-ip span { + background-position: -613px -389px; +} + +/**** VM Status*/ +.dashboard.user .vm-status { + width: 98%; + margin: 19px auto auto; + border: 1px solid #d2cdcd; + /*+border-radius:9px;*/ + border-radius: 9px; + border-radius: 9px 9px 9px 9px; + -moz-border-radius: 9px; + -webkit-border-radius: 9px; + -khtml-border-radius: 9px; +} + +.dashboard.user .vm-status .title { + width: 100%; + padding: 13px 0 12px; + /*+border-radius:10px 10px 0 0;*/ + border-bottom: 1px solid #c8c2c2; + border-radius: 10px 10px 0 0; + background: url('../images/bg-gradients.png') 0 -53px; + font-size: 13px; + color: #4a5967; + text-shadow: 0 1px 1px #ffffff; + -moz-border-radius: 10px 10px 0 0; + -webkit-border-radius: 10px 10px 0 0; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -khtml-border-radius: 10px 10px 0 0; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; +} + +.dashboard.user .vm-status .title span { + padding: 0 0 0 8px; +} + +.dashboard.user .vm-status .content { + padding: 9px 0; +} + +.dashboard.user .vm-status .content ul { + display: inline-block; + margin: auto; +} + +.dashboard.user .vm-status .content ul li { + float: left; + width: 243px; + height: 237px; + margin: 0 0 0 11px; + border: 1px solid #e6ebee; + /*+border-radius:10px;*/ + border-top: 2px solid #d3d9de; + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + background: #ebedf1; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -khtml-border-radius: 10px; +} + +.dashboard.user .vm-status .content ul li .name { + margin: 14px 0 0; + padding: 0 0 0 35px; + background: url('../images/icons.png') -617px -488px; + font-size: 28px; + /*+text-shadow:0px 2px 2px #FFFFFF;*/ + color: #5c7082; + text-shadow: 0 2px 2px #ffffff; + -moz-text-shadow: 0 2px 2px #ffffff; + -webkit-text-shadow: 0 2px 2px #ffffff; + -o-text-shadow: 0 2px 2px #ffffff; +} + +.dashboard.user .vm-status .content ul li .value { + width: 229px; + margin: 12px auto auto; + padding: 59px 0; + /*+text-shadow:0px 1px 2px #FFFFFF;*/ + background: #dfe9cc; + font-size: 58px; + color: #5d7c98; + text-align: center; + text-shadow: 0 1px 2px #ffffff; + -moz-text-shadow: 0 1px 2px #ffffff; + -webkit-text-shadow: 0 1px 2px #ffffff; + -o-text-shadow: 0 1px 2px #ffffff; +} + +.dashboard.user .vm-status .content ul li.stopped .name { + background-position: -617px -524px; +} + +.dashboard.user .vm-status .content ul li.stopped .value { + background: #edcbce; +} + +.dashboard.user .vm-status .content ul li.total .name { + background-position: -617px -559px; +} + +.dashboard.user .vm-status .content ul li.total .value { + background: #dfe4e9; +} + +/***** Tables / status list*/ +.dashboard.user .status-lists { + margin: 15px 0 0 8px; +} + +.dashboard.user .status-lists ul li.events { + width: 512px; +} + +.dashboard.user .status-lists ul li.events .content li { + width: 97%; + margin: 6px 11px 0 0; + padding: 13px 0 12px 16px; + border: 1px solid #dbdbdb; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + /*+text-shadow:0px 1px #FFFFFF;*/ + box-shadow: 0 2px 4px #c0c0c0; + background: #efefef url('../images/bg-gradients.png') repeat-x 0 -29px; + font-size: 11px; + color: #495a76; + text-shadow: 0 1px #ffffff; + /*+box-shadow:0px 2px 4px #C0C0C0;*/ + cursor: default; + -moz-text-shadow: 0 1px #ffffff; + -webkit-text-shadow: 0 1px #ffffff; + -o-text-shadow: 0 1px #ffffff; + -moz-box-shadow: 0 2px 4px #c0c0c0; + /*+border-radius:4px;*/ + -webkit-box-shadow: 0 2px 4px #c0c0c0; + -o-box-shadow: 0 2px 4px #c0c0c0; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.dashboard.user .status-lists ul li.events .content li .title { + margin-bottom: 9px; + font-weight: bold; + color: #4a5a6a; +} + +.dashboard.user .status-lists ul li { + float: left; + margin: 0 10px 0 0; +} + +.dashboard.user .status-lists table { + width: 252px; + margin: 0; + cursor: default; +} + +.dashboard.user .status-lists table th { + padding: 8px 0 6px; +} + +.dashboard.user .status-lists .events table { + width: 515px; +} + +.dashboard.user .status-lists table tbody { + display: block; + height: 256px; + padding: 0 0; + overflow: auto; + overflow-x: hidden; +} + +.dashboard.user .status-lists table td.value { + cursor: default; +} + +.dashboard.user .status-lists table td.desc { + width: 151px; + cursor: default; + overflow: hidden; +} + +.dashboard.user .status-lists .my-account table tbody tr td { + padding-top: 19px; + padding-bottom: 19px; +} + +.dashboard.user .status-lists table thead { + border-top: 1px solid #c4c5c5; + background: url('../images/bg-gradients.png') 0 -351px; +} + +.dashboard.user .status-lists table tr.odd { + background: #dfe1e3; +} + +.dashboard.user .status-lists table td { + vertical-align: middle; +} + +/****** IP addresses*/ +.dashboard.user .status-lists li.ip-addresses td { + width: 250px; + padding: 28px 0 51px; +} + +.dashboard.user .status-lists li.ip-addresses .desc { + color: #3f5468; +} + +.dashboard.user .status-lists li.ip-addresses .value { + margin: 7px 0 0; + font-size: 29px; + /*+text-shadow:0px 1px 2px #FFFFFF;*/ + text-shadow: 0 1px 2px #ffffff; + -moz-text-shadow: 0 1px 2px #ffffff; + -webkit-text-shadow: 0 1px 2px #ffffff; + -o-text-shadow: 0 1px 2px #ffffff; +} diff --git a/ui/css/src/scss/components/datepicker.scss b/ui/css/src/scss/components/datepicker.scss new file mode 100644 index 00000000000..7ec092a06b4 --- /dev/null +++ b/ui/css/src/scss/components/datepicker.scss @@ -0,0 +1,150 @@ +// 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. + +.ui-datepicker { + display: none; + width: 300px; + height: auto; + padding: 4px 0 0; + border-radius: 4px; + /*+border-radius:4px;*/ + box-shadow: 0 3px 8px #000000; + background: #ffffff 0 -2470px; + overflow: hidden; + -moz-border-radius: 4px; + /*+box-shadow:0px 3px 8px #000000;*/ + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + -moz-box-shadow: 0 3px 8px #000000; + -webkit-box-shadow: 0 3px 8px #000000; + -o-box-shadow: 0 3px 8px #000000; +} + +.ui-datepicker .ui-datepicker-title { + width: 100%; + margin: auto; +} + +.ui-datepicker .ui-datepicker-prev, +.ui-datepicker .ui-datepicker-next { + margin: 6px 13px 6px 14px; + padding: 6px; + /*+box-shadow:0px 1px 5px #444444;*/ + border-radius: 4px; + box-shadow: 0 1px 5px #444444; + background: url('../images/bg-gradients.png') 0 -182px; + font-size: 13px; + /*+text-shadow:0px -1px 1px #050505;*/ + font-size: 12px; + color: #ffffff; + text-shadow: 0 -1px 1px #050505; + cursor: pointer; + -moz-box-shadow: 0 1px 5px #444444; + -webkit-box-shadow: 0 1px 5px #444444; + -o-box-shadow: 0 1px 5px #444444; + -moz-text-shadow: 0 -1px 1px #050505; + -webkit-text-shadow: 0 -1px 1px #050505; + /*+border-radius:4px;*/ + -o-text-shadow: 0 -1px 1px #050505; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.ui-datepicker .ui-datepicker-prev:hover, +.ui-datepicker .ui-datepicker-next:hover { + /*+box-shadow:inset 0px 0px 10px #000000;*/ + box-shadow: inset 0 0 10px #000000; + -moz-box-shadow: inset 0 0 10px #000000; + -webkit-box-shadow: inset 0 0 10px #000000; + -o-box-shadow: inset 0 0 10px #000000; +} + +.ui-datepicker .ui-datepicker-prev { + float: left; +} + +.ui-datepicker .ui-datepicker-next { + float: right; +} + +.ui-datepicker .ui-datepicker-title .ui-datepicker-month { + width: 85px; + font-size: 16px; + color: #2c363f; +} + +.ui-datepicker .ui-datepicker-title { + position: relative; + top: 6px; + left: 0; + width: 188px; + /*+placement:shift 0px 6px;*/ + height: 19px; + padding: 3px 0 0; + text-align: center; +} + +.ui-datepicker table { + width: 277px; + height: 9px; +} + +.ui-datepicker table th, +.ui-datepicker table td { + min-width: 24px; + padding: 7px 0; + border: 1px solid #b9b6b6; + text-align: center; + text-indent: 0; + /*[empty]+placement:;*/ +} + +.ui-datepicker table td { + cursor: pointer; +} + +.ui-datepicker table td.ui-state-disabled, +.ui-datepicker table td.ui-state-disabled:hover { + box-shadow: none; + /*+box-shadow:none;*/ + background-color: #dcdcdc; + cursor: default; + -moz-box-shadow: none; + -webkit-box-shadow: none; + -o-box-shadow: none; +} + +.ui-datepicker table td a { + font-size: 12px; + color: #485867; + text-decoration: none; +} + +.ui-datepicker table td:hover { + box-shadow: inset 0 0 4px #6b6b6b; + /*+box-shadow:inset 0px 0px 4px #6B6B6B;*/ + background-color: #6a839a; + -moz-box-shadow: inset 0 0 4px #6b6b6b; + -webkit-box-shadow: inset 0 0 4px #6b6b6b; + -o-box-shadow: inset 0 0 4px #6b6b6b; +} + +.ui-datepicker table td:hover a { + color: #ffffff; + text-shadow: 0 -1px #000000; +} diff --git a/ui/css/src/scss/components/details-page.scss b/ui/css/src/scss/components/details-page.scss new file mode 100644 index 00000000000..3298e8457c9 --- /dev/null +++ b/ui/css/src/scss/components/details-page.scss @@ -0,0 +1,476 @@ +// 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. + +//TODO find new stategy to organize this styles +.detail-view { + padding: 0 0 0 14px; +} + +.ui-tabs .info { + display: inline-block; + width: 91%; + height: auto; + margin: 10px; + padding: 14px 14px 0; + border: 1px dashed #d7d7d7; + /*+box-shadow:inset 0px 1px 2px #FFFFFF;*/ + box-shadow: inset 0 1px 2px #ffffff; + background: #efefef; + overflow: visible; + -moz-box-shadow: inset 0 1px 2px #ffffff; + -webkit-box-shadow: inset 0 1px 2px #ffffff; + -o-box-shadow: inset 0 1px 2px #ffffff; +} + +.ui-tabs .info li { + margin: 0 0 18px; + font-size: 12px; + color: #3e4c59; +} + +.ui-tabs .info li strong { + font-weight: bold; + color: #506273; +} + +.project-view .ui-tabs ul li.ui-state-default a { + box-shadow: inset -1px -2px 12px #596066; + /*+box-shadow:inset -1px -2px 12px #596066;*/ + background: #6d747d; + font-weight: bold; + color: #ffffff; + text-shadow: 0 -1px 1px #3a3e42; + -moz-box-shadow: inset -1px -2px 12px #596066; + -webkit-box-shadow: inset -1px -2px 12px #596066; + /*+text-shadow:0px -1px 1px #3A3E42;*/ + -o-box-shadow: inset -1px -2px 12px #596066; + -moz-text-shadow: 0 -1px 1px #3a3e42; + -webkit-text-shadow: 0 -1px 1px #3a3e42; + -o-text-shadow: 0 -1px 1px #3a3e42; +} + +.project-view .ui-tabs ul li.ui-state-hover a { + background: #878e97 0 8px; +} + +.project-view .ui-tabs ul li.ui-state-active a { + box-shadow: 0 0; + background: #dbdddf; + font-weight: bold; + /*+text-shadow:0px 0px #FFFFFF;*/ + color: #4f6270; + text-shadow: 0 0 #ffffff; + -moz-text-shadow: 0 0 #ffffff; + -webkit-text-shadow: 0 0 #ffffff; + /*+box-shadow:0px 0px;*/ + -o-text-shadow: 0 0 #ffffff; + -moz-box-shadow: 0 0; + -webkit-box-shadow: 0 0; + -o-box-shadow: 0 0; + -moz-box-shadow: 0 0 none; + -webkit-box-shadow: 0 0 none; + -o-box-shadow: 0 0 none; +} + +.ui-tabs li.ui-state-active.first.last a, +.ui-tabs li.ui-state-default.first.last a { + /*+border-radius:4px 4px 0 0;*/ + border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + -webkit-border-radius: 4px 4px 0 0; + -khtml-border-radius: 4px 4px 0 0; +} + +.ui-tabs .ui-tabs-hide { + display: none !important; +} + +.ui-tabs .ui-tabs-panel { + clear: both; + width: 97%; + height: 591px; + padding: 7px 0 0 0; + border: 1px solid #d9d9d9; + overflow: auto; + overflow-x: hidden; +} + +.detail-view .main-groups { + width: 100%; + max-height: 407px; + margin-right: 12px; + overflow: auto; + /*[empty]padding:;*/ + overflow-x: hidden; +} + +.detail-view.edit-mode .main-groups { + max-height: 360px; +} + +.detail-group table { + width: 98%; + margin-top: 10px; + border-bottom: 1px solid #dfdfdf; + font-size: 12px; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#eaeaea', GradientType=0); +} + +.detail-group table tbody { + border: 0; +} + +.detail-group table tr, +.detail-group table td { + vertical-align: middle; + border: 0; + cursor: default; +} + +.detail-group table tr.odd { + background: none; +} + +.details.group-multiple table { + border: 0; + border-top: 0; +} + +.details.group-multiple table.header { + width: 94%; + margin-bottom: 1px; +} + +.details.group-multiple table tbody { + border-top: 1px solid #f2f0f0; +} + +.detail-group .main-groups table td.name { + width: 113px; + padding: 14px 12px 13px 13px; + border: 0; + font-weight: bold; + color: #6d6d6d; + text-indent: 0; +} + +.detail-group .main-groups table td.value { + text-indent: 0; +} + +.detail-group .main-groups table td.value > span { + display: block; + position: relative; + float: left; + top: 9px; + width: 245px; + height: 30px; + overflow: auto; +} + +.detail-group .main-groups table td.value > span.copypasteenabledvalue { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + -o-text-overflow: ellipsis; +} + +.detail-group .main-groups table td.value > .copypasteactive { + display: auto; + white-space: nowrap; + overflow: none; +} + +div.copypasteicon { + float: left; + width: 18px; + height: 21px; + margin-top: 0; + margin-left: 6px; + background: url('../images/sprites.png') no-repeat -271px -65px; +} + +div.copypasteicon:hover { + background: url('../images/sprites.png') no-repeat -271px -646px; +} + +.detail-group .main-groups table td.value > span.copypasteenabledvalue { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + -o-text-overflow: ellipsis; +} + +.detail-group .main-groups table td.value > .copypasteactive { + display: auto; + white-space: nowrap; + overflow: none; +} + +div.copypasteicon { + float: left; + width: 18px; + height: 21px; + margin-top: 0; + margin-left: 6px; + background: url('../images/sprites.png') no-repeat -271px -65px; +} + +div.copypasteicon:hover { + background: url('../images/sprites.png') no-repeat -271px -646px; +} + +.detail-group .main-groups table td.value > span select { + width: 100% !important; +} + +.detail-group .main-groups table td.value .view-all { + float: right; + /*[empty]height:;*/ + /*+border-radius:4px 0 0 4px;*/ + margin: 7px 0 0; + padding: 0; + border-radius: 4px 0 0 4px; + cursor: pointer; + -moz-border-radius: 4px 0 0 4px; + -webkit-border-radius: 4px 0 0 4px; + -khtml-border-radius: 4px 0 0 4px; +} + +.detail-group .main-groups table td.value .view-all span { + display: block; + float: left; + margin-top: -5px; + padding: 5px 2px 8px 4px; + border-left: 1px solid #9fa2a6; + /*+border-radius:4px 0 0 4px;*/ + border-radius: 4px 0 0 4px; + background: url('../images/gradients.png') repeat-x 0 -529px; + -moz-border-radius: 4px 0 0 4px; + -webkit-border-radius: 4px 0 0 4px; + -khtml-border-radius: 4px 0 0 4px; +} + +.detail-group .main-groups table td.value .view-all .end { + float: right; + width: 22px; + height: 25px; + margin: -6px 0 0; + padding: 0; + background: url('../images/sprites.png') no-repeat 100% -397px; +} + +.detail-group .main-groups table td.value .view-all:hover { + background-position: 100% -431px; +} + +.detail-group .main-groups table td.value .view-all:hover span { + background-position: 0 -566px; +} + +.detail-group .main-groups table td.value .view-all:hover div.end { + background-position: -618px -430px; +} + +.detail-view .detail-group .button.add { + clear: both; + margin: 0 21px 13px 0 !important; +} + +.detail-view .details.group-multiple { + float: left; + width: 100%; + height: 600px; + margin-bottom: 30px; +} + +.detail-view .details.group-multiple .main-groups { + width: 98%; + margin-bottom: 35px; + overflow: visible; +} + + +.detail-group .main-groups table td.value .view-all:hover { + background-position: 100% -431px; +} + +.panel.always-maximized .detail-group .main-groups table td.value span { + width: 565px; +} + +.detail-group.head table td.name { + padding: 20px 0 17px; +} + +.detail-view .button.done, +.detail-view .button.cancel { + display: inline-block; + position: relative; + position: absolute; + top: 550px; + /*+border-radius:4px;*/ + left: -1px; + margin: 0 0 0 12px; + padding: 9px 20px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + /*+text-shadow:0px -1px 2px #000000;*/ + box-shadow: 0 1px 4px #adadad; + background: url('../images/bg-gradients.png') 0 -221px; + font-size: 12px; + font-weight: bold; + /*+box-shadow:0px 1px 4px #ADADAD;*/ + color: #ffffff; + text-shadow: 0 -1px 2px #000000; + cursor: pointer; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + -moz-text-shadow: 0 -1px 2px #000000; + -webkit-text-shadow: 0 -1px 2px #000000; + /*+placement:shift -1px 550px;*/ + -o-text-shadow: 0 -1px 2px #000000; + -moz-box-shadow: 0 1px 4px #adadad; + -webkit-box-shadow: 0 1px 4px #adadad; + -o-box-shadow: 0 1px 4px #adadad; +} + +.detail-view .button.cancel { + left: 85px; + background-position: 0 -795px; + color: #808080; + /*+text-shadow:0px -1px 2px #000000;*/ + text-shadow: 0 -1px 2px #000000; + text-shadow: 0 -1px 2px #cccccc; + -moz-text-shadow: 0 -1px 2px #000000; + -webkit-text-shadow: 0 -1px 2px #000000; + -o-text-shadow: 0 -1px 2px #000000; + -moz-text-shadow: 0 -1px 2px #cccccc; + -webkit-text-shadow: 0 -1px 2px #cccccc; + -o-text-shadow: 0 -1px 2px #cccccc; +} + +.detail-view .button.done:hover { + box-shadow: inset 0 1px 3px #000000; + /*+box-shadow:inset 0px 1px 3px #000000;*/ + background-position: 0 -950px; + -moz-box-shadow: inset 0 1px 3px #000000; + -webkit-box-shadow: inset 0 1px 3px #000000; + -o-box-shadow: inset 0 1px 3px #000000; +} + +.detail-view .button.cancel:hover { + background-position: 0 -834px; +} + +div.group-multiple div.detail-group table { + margin-top: -1px; +} + +div.group-multiple div.detail-group table.header { + margin-top: 11px; + border: 0; +} + +div.group-multiple div.detail-group table.header thead th { + border: 0; + background: transparent; +} + +div.ui-tabs-panel table span.none { + color: #9d9d9d; +} + +div.detail-group td.view-all div.view-all { + float: right; + width: auto; +} + +div.detail-group td.view-all a { + display: block; + float: left; + font-size: 13px; + font-weight: 100; + /*+text-shadow:0px 1px 2px #FFFFFF;*/ + color: #0373b7; + text-decoration: none; + text-shadow: 0 1px 2px #ffffff; + -moz-text-shadow: 0 1px 2px #ffffff; + -webkit-text-shadow: 0 1px 2px #ffffff; + -o-text-shadow: 0 1px 2px #ffffff; +} + +div.detail-group td.view-all:hover a { + background-position: 0 -566px; +} + +div.detail-group td.view-all a span { + /*+placement:shift -4px -1px;*/ + position: relative; + top: -1px; + left: -4px; +} + +div.detail-group td.view-all:hover a span { + color: #000000; + text-decoration: underline; +} + +div.detail-group td.view-all div.view-all div.end { + display: none; + float: left; + width: 15px; + height: 25px; + background: url('../images/sprites.png') -617px -398px; +} + +div.detail-group td.view-all:hover div.view-all div.end { + background-position: -617px -431px; +} + +div.details div.detail-group td.value input, +div.details div.detail-group td.value select { + width: 282px; +} + +div.details div.detail-group td.value input, +div.details div.detail-group td.value input[type='checkbox'] { + float: left; + width: 15px; + margin-left: 10px; +} + +div.details div.detail-group td.value input, +div.details div.detail-group td.value input[type='text'] { + width: 93%; +} + +div.details .main-groups label.error { + position: absolute; + top: 6px; + right: 10%; +} + +.detail-view td.view-all.multiple { + display: block; + float: left; + max-width: 145px; + height: 28px; + margin-left: 0; + text-align: left; +} diff --git a/ui/css/src/scss/components/dialog-about.scss b/ui/css/src/scss/components/dialog-about.scss new file mode 100644 index 00000000000..e9f00fb2571 --- /dev/null +++ b/ui/css/src/scss/components/dialog-about.scss @@ -0,0 +1,38 @@ +// 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. + +.dialog-about .ui-widget-content { + width: 100% !important; + padding-right: 0; + padding-left: 0; +} + +.dialog-about .logo { + padding-top: 20px; + font-size: 26px; + color: #636363; +} + +.dialog-about .version { + padding-top: 10px; + font-size: 12px; +} + +.dialog-about .ui-button { + float: none; + margin: 0 auto; +} diff --git a/ui/css/src/scss/components/dynamic-input.scss b/ui/css/src/scss/components/dynamic-input.scss new file mode 100644 index 00000000000..98c5265fcaf --- /dev/null +++ b/ui/css/src/scss/components/dynamic-input.scss @@ -0,0 +1,52 @@ +// 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. + +.ui-dialog div.form-container div.value .dynamic-input { + clear: both; + width: calc(100% + 4px); + min-height: 50px; + max-height: 211px; + border: 1px solid #cdcdcd; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: #ffffff; + /*+border-radius:4px;*/ + overflow: auto; + overflow-x: hidden; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.ui-dialog div.form-container div.value .dynamic-input .form-item { + width: 97%; + margin: 4px 0 0 5px; +} + +.ui-dialog div.form-container div.value .dynamic-input .name { + width: 99px; +} + +.ui-dialog div.form-container div.value .dynamic-input .name label { + width: inherit; + margin-left: 0; + font-size: 12px; +} + +.ui-dialog div.form-container div.value .dynamic-input .value { + width: 40%; +} diff --git a/ui/css/src/scss/components/first-network-resource.scss b/ui/css/src/scss/components/first-network-resource.scss new file mode 100644 index 00000000000..1072d119fc0 --- /dev/null +++ b/ui/css/src/scss/components/first-network-resource.scss @@ -0,0 +1,158 @@ +// 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. + +.panel .add-first-network-resource { + margin: 37px; + padding: 19px 19px 79px; + border: 1px solid #ececec; + border-radius: 12px; + /*+border-radius:12px;*/ + border-radius: 12px 12px 12px 12px; + background: #ffffff; + font-size: 14px; + -moz-border-radius: 12px; + -webkit-border-radius: 12px; + -khtml-border-radius: 12px; +} + +.panel .add-first-network-resource form { + display: inline-block; + height: 442px; + overflow: auto; + overflow-x: hidden; +} + +.panel .add-first-network-resource .title { + margin: 0 0 17px; + font-size: 26px; + /*+text-shadow:0px 1px 2px #BCBCBC;*/ + color: #3984d1; + text-shadow: 0 1px 2px #bcbcbc; + -moz-text-shadow: 0 1px 2px #bcbcbc; + -webkit-text-shadow: 0 1px 2px #bcbcbc; + -o-text-shadow: 0 1px 2px #bcbcbc; +} + +.panel .add-first-network-resource .message { + display: block; + margin: 0 0 30px; + color: #545151; +} + +.panel .add-first-network-resource .form-item { + display: inline-block; + position: relative; + width: 409px; + margin: 0 0 2px; + padding: 5px; +} + +.panel .add-first-network-resource .form-item label { + float: left; + width: 109px; + text-align: right; +} + +.panel .add-first-network-resource .form-item label.error { + display: none; + position: absolute; + top: 30px; + left: 137px; + font-size: 10px; +} + +.panel .add-first-network-resource .form-item input { + float: right; + /*+border-radius:6px;*/ + border: 1px solid #b7b7b7; + border-radius: 6px; + border-radius: 6px 6px 6px 6px; + font-size: 16px; + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + -khtml-border-radius: 6px; +} + +.panel .add-first-network-resource .form-item input[type='checkbox'] { + float: right; + margin: 0 266px 0 0; +} + +.panel .add-first-network-resource .form-item input[type='text'], +.panel .add-first-network-resource .form-item input[type='password'], +.panel .add-first-network-resource .form-item input[type='text'], +.panel .add-first-network-resource .form-item select { + width: 276px; +} + +.panel .add-first-network-resource .form-item select { + width: 280px; + margin: 0 0 0 20px; +} + +.panel .add-first-network-resource .button { + clear: both; + margin: 29px 0 0; + padding: 11px 23px 11px 21px; + border: 1px solid #858585; + /*+border-radius:10px;*/ + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + background: url('../images/bg-gradients.png') repeat-x 0 -221px; + color: #ffffff; + cursor: pointer; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -khtml-border-radius: 10px; + /*[empty]position:;*/ +} + +.panel .add-first-network-resource .multi-array { + display: inline-block; + float: left; + clear: both; + width: 383px; + margin: 3px 0 10px; + padding: 12px; + border: 1px solid #dcdcdc; + border-radius: 7px; + /*+border-radius:7px;*/ + border-radius: 7px 7px 7px 7px; + background: #ffffff; + -moz-border-radius: 7px; + -webkit-border-radius: 7px; + -khtml-border-radius: 7px; +} + +.panel .add-first-network-resource .multi-array .item { + float: left; + max-width: 155px; + margin: 6px 0 0 24px; +} + +.panel .add-first-network-resource .multi-array .item .name { + float: left; +} + +.panel .add-first-network-resource .multi-array .item .value { + float: right; + margin: 0 0 0 13px; +} + +.panel .add-first-network-resource .multi-array .item .value input { + margin: 0; +} diff --git a/ui/css/src/scss/components/gpu-groups.scss b/ui/css/src/scss/components/gpu-groups.scss new file mode 100644 index 00000000000..7b1e747bd5f --- /dev/null +++ b/ui/css/src/scss/components/gpu-groups.scss @@ -0,0 +1,62 @@ +// 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. + +div.gpugroups div.list-view div.fixed-header { + position: relative; + top: 0 !important; + left: 12px !important; +} + +div.gpugroups div.list-view div.fixed-header table { + width: auto; +} + +div.gpugroups div.list-view div.data-table table { + margin-top: 0; +} + +div.gpugroups div.list-view { + position: relative; + height: auto !important; + margin-top: 0 !important; + border: 0; +} + +.gpugroups { + float: left; + width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: auto; +} + +.gpugroups .gpugroup-container { + position: relative; + float: left; + width: auto; + height: auto !important; + margin: 12px; + padding: 0; + border: 1px solid #c8c2c2; + border-radius: 3px; +} + +.gpugroups .gpugroup-container .title { + padding: 12px 12px 5px; + font-size: 13px; + font-weight: 100; +} diff --git a/ui/css/src/scss/components/header-notifications.scss b/ui/css/src/scss/components/header-notifications.scss new file mode 100644 index 00000000000..bcc6a06ee70 --- /dev/null +++ b/ui/css/src/scss/components/header-notifications.scss @@ -0,0 +1,84 @@ +// 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. + +#header div.notifications { + position: relative; + float: right; + top: -57px; + left: -239px; + /*+placement:shift -174px -57px;*/ + height: 18px; + padding: 1px 0 0; + background: transparent; +} + +#header div.notifications:after { + content: '|'; + /*+placement:shift 28px 7px;*/ + position: relative; + top: 7px; + left: 28px; +} + +#header div.notifications span { + position: relative; + top: 5px; + left: 7px; + /*+text-shadow:0px -1px 1px #464646;*/ + text-shadow: 0 -1px 1px #464646; + -moz-text-shadow: 0 -1px 1px #464646; + -webkit-text-shadow: 0 -1px 1px #464646; + -o-text-shadow: 0 -1px 1px #464646; +} + +#header div.notifications:hover { + color: #5faaf7; +} + +#header div.notifications div.total { + float: left; + width: 22px; + height: 19px; + margin: 3px; + background: url('../images/sprites.png') no-repeat -593px -870px; + font-size: 11px; + color: #ffffff; + /*+text-shadow:0px -1px #6C7283;*/ + text-shadow: 0 -1px #6c7283; + -moz-text-shadow: 0 -1px #6c7283; + -webkit-text-shadow: 0 -1px #6c7283; + -o-text-shadow: 0 -1px #6c7283; + -moz-text-shadow: 0 -1px 0 #6c7283; + -webkit-text-shadow: 0 -1px 0 #6c7283; + -o-text-shadow: 0 -1px 0 #6c7283; +} + +#header div.notifications div.total.pending { + background-position: -593px -846px; + font-weight: bold; +} + +#header div.notifications div.total span { + /*+placement:shift 0px 3px;*/ + display: block; + position: relative; + top: 3px; + left: 0; + width: 21px; + font-size: 12px; + text-align: center; +} diff --git a/ui/css/src/scss/components/header.scss b/ui/css/src/scss/components/header.scss new file mode 100644 index 00000000000..37134c7752a --- /dev/null +++ b/ui/css/src/scss/components/header.scss @@ -0,0 +1,71 @@ +// 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. + +#header { + position: relative; + width: 100%; + height: 135px; + background: url('../images/overlay-pattern.png') repeat 0, #1b5070 url('../images/header-gradient.png') no-repeat center; + background-size: auto, cover; +} + +#header div.button { + font-size: 12px; + color: #ffffff; + cursor: pointer; +} + +#header.nologo div.logo { + position: relative; + top: 15px; + left: 0; + width: 1224px; + /*+placement:shift 0px 15px;*/ + height: 47px; + margin: auto; + background: url('../images/logo.png') no-repeat 0 center; +} + +#header div.controls { + position: relative; + width: 1226px; + height: 48px; + margin: 27px auto 0; + padding-top: 13px; + /*+border-radius:4px 4px 0 0;*/ + border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + -webkit-border-radius: 4px 4px 0 0; + -khtml-border-radius: 4px 4px 0 0; +} + +#header div.controls.nologo { + box-shadow: 0 -1px 6px #0e3955; + background: #666666; + background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZDNkM2QiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+'); + background: -moz-linear-gradient(top, #666666 0%, #3d3d3d 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #666666), color-stop(100%, #3d3d3d)); + background: -webkit-linear-gradient(top, #666666 0%, #3d3d3d 100%); + background: -o-linear-gradient(top, #666666 0%, #3d3d3d 100%); + background: -ms-linear-gradient(top, #666666 0%, #3d3d3d 100%); + background: linear-gradient(to bottom, #666666 0%, #3d3d3d 100%); + /*+box-shadow:0px -1px 6px #0E3955;*/ + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#3d3d3d', GradientType=0); + -moz-box-shadow: 0 -1px 6px #0e3955; + -webkit-box-shadow: 0 -1px 6px #0e3955; + -o-box-shadow: 0 -1px 6px #0e3955; +} diff --git a/ui/css/src/scss/components/health-check.scss b/ui/css/src/scss/components/health-check.scss new file mode 100644 index 00000000000..9fd14dd3a33 --- /dev/null +++ b/ui/css/src/scss/components/health-check.scss @@ -0,0 +1,47 @@ +// 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. + +.ui-dialog .health-check { + height: 295px !important; + padding-bottom: 93px; +} + +div.ui-dialog div.health-check div.health-check-description { + color: #808080; +} + +div.ui-dialog div.health-check div.form-container form div.form-item { + width: 58%; + margin-top: -16px; + margin-bottom: 30px; + margin-left: 116px; +} + +div.ui-dialog div.health-check div.health-check-config-title { + float: left; + margin-left: 15px; + font-size: 17px; + color: #808080; +} + +div.ui-dialog div.health-check div.health-check-advanced-title { + float: left; + margin-top: -70px; + margin-left: 15px; + font-size: 17px; + color: #808080; +} diff --git a/ui/css/src/scss/components/info-boxes.scss b/ui/css/src/scss/components/info-boxes.scss new file mode 100644 index 00000000000..c8c369dbc11 --- /dev/null +++ b/ui/css/src/scss/components/info-boxes.scss @@ -0,0 +1,201 @@ +// 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. + +.info-boxes { + float: right; + width: 233px; + height: 551px; + margin: 21px 5px 0 0; +} + +.info-boxes .info-box { + display: inline-block; + border: 1px solid #b3c3d0; + /*+box-shadow:inset 0px -1px 7px #A7A7A7;*/ + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + box-shadow: inset 0 -1px 7px #a7a7a7; + background: #ffffff; + -moz-box-shadow: inset 0 -1px 7px #a7a7a7; + /*+border-radius:4px;*/ + -webkit-box-shadow: inset 0 -1px 7px #a7a7a7; + -o-box-shadow: inset 0 -1px 7px #a7a7a7; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.info-boxes .info-box.events { + width: 228px; + height: 323px; + margin-top: 4px; +} + +.info-boxes .info-box.events ul { + max-height: 295px; + overflow: auto; + overflow-x: hidden; +} + +.info-boxes .info-box ul { + display: inline-block; + height: auto; + margin: 0 0 3px 2px; +} + +.info-boxes .info-box ul li { + display: inline-block; + width: 224px; + margin: 0 2px 0 0; + border-top: 1px solid #ffffff; + border-bottom: 1px solid #bdd2df; +} + +.info-boxes .info-box ul li.odd { + background: #ececec; +} + +.info-boxes .info-box .button { + float: right; + margin: 0 14px 0 0; + padding: 2px 6px 3px 3px; + /*+text-shadow:0px 1px 1px #000000;*/ + border: 1px solid #82a3c7; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + box-shadow: inset 0 1px 1px #85acc4; + /*+border-radius:4px;*/ + background: url('../images/bg-gradients.png') 0 -734px; + font-size: 10px; + font-weight: bold; + color: #ffffff; + text-shadow: 0 1px 1px #000000; + /*+box-shadow:inset 0px 1px 1px #85ACC4;*/ + cursor: pointer; + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + -moz-box-shadow: inset 0 1px 1px #85acc4; + -webkit-box-shadow: inset 0 1px 1px #85acc4; + -o-box-shadow: inset 0 1px 1px #85acc4; +} + +.info-boxes .info-box .button span { + /*+placement:shift 0px 2px;*/ + position: relative; + float: left; + top: 2px; + left: 0; +} + +.info-boxes .info-box .title .button { + margin: 4px 6px 0 3px; +} + +.info-boxes .info-box .title .button span { + position: relative; + top: 1px; + left: 1px; + margin: 0; + /*+placement:shift 1px 1px;*/ + padding: 0; + font-size: 10px; + color: #ffffff; +} + +.info-boxes .info-box .button:hover { + background-position: 0 -766px; +} + +.info-boxes .info-box .button .arrow { + position: relative; + float: right; + top: 0; + /*+placement:shift 0px 0px;*/ + left: 0; + width: 16px; + height: 13px; + background: url('../images/sprites.png') no-repeat -455px -84px; +} + +.info-boxes .info-box ul li .total, +.info-boxes .info-box ul li .date { + position: relative; + float: left; + top: 0; + left: 0; + width: 52px; + height: 36px; + /*+placement:shift;*/ + border-right: 1px solid #bdd2df; + font-size: 24px; + color: #647c91; + text-align: right; +} + +.info-boxes .info-box ul li .date { + margin: 1px 0 0; + font-size: 11px; + text-align: center; +} + +.info-boxes .info-box ul li .date span { + /*+placement:shift 0px 11px;*/ + position: relative; + top: 11px; + left: 0; +} + +.info-boxes .info-box ul li .desc { + display: inline-block; + position: relative; + /*+placement:shift 5px 8px;*/ + top: 8px; + left: 5px; + max-width: 153px; + padding-bottom: 13px; + font-size: 12px; + white-space: nowrap; + color: #606060; + text-overflow: ellipsis; + overflow: hidden; +} + +.info-boxes .info-box ul li .total span { + /*+placement:shift -5px 7px;*/ + position: relative; + top: 7px; + left: -5px; +} + +.info-boxes .info-box .title { + height: 27px; + border-bottom: 1px solid #bdd2df; +} + +.info-boxes .info-box .title span { + /*+placement:shift 8px 6px;*/ + position: relative; + top: 6px; + left: 8px; + font-size: 12px; + font-weight: bold; + color: #4e748c; +} diff --git a/ui/css/src/scss/components/install-wizzard.scss b/ui/css/src/scss/components/install-wizzard.scss new file mode 100644 index 00000000000..d9e3fa18a6f --- /dev/null +++ b/ui/css/src/scss/components/install-wizzard.scss @@ -0,0 +1,434 @@ +// 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. + +.install-wizard { + position: relative; + width: 1024px; + height: 768px; + margin: auto; + border-top: 0; +} + +body.install-wizard { + height: 769px !important; //TODO important may be removed + background: #ffffff url('../images/bg-login.png'); + font-family: sans-serif; + overflow: auto; + overflow-x: hidden; +} + +.install-wizard .header { + z-index: $z-index-install-wizard1; + height: 365px; + padding: 32px 0 89px; + background: url('../images/bg-login.png'); + color: #626e82; + /*+text-shadow:0px 1px 2px #FFFFFF;*/ + text-align: center; + text-shadow: 0 1px 2px #ffffff; + -moz-text-shadow: 0 1px 2px #ffffff; + -webkit-text-shadow: 0 1px 2px #ffffff; + -o-text-shadow: 0 1px 2px #ffffff; +} + +.install-wizard .header h3 { + font-size: 20px; +} + +.install-wizard .step { + max-width: 691px; + margin: auto; + padding: 56px 0 0; +} + +.install-wizard .step .title { + clear: both; + width: 303px; + margin: auto auto 30px; + font-size: 22px; + color: #626e82; +} + +.install-wizard .step .subtitle { + font-size: 12px; + font-weight: bold; + color: #4b5e69; +} + +.install-wizard .step p { + background: url('../images/bg-gradient-white-transparent.png') repeat-x -114px -270px; + font-size: 15px; + line-height: 23px; + color: #4a4a4a; +} + +.install-wizard .step ul li { + width: 465px; + margin: 14px 0 0 18px; + font-size: 13px; + list-style: disc; +} + +.install-wizard .step .field { + margin: 0 0 12px; + text-align: left; +} + +.install-wizard .step .field label { + display: block; + clear: both; + font-size: 11px; + color: #4d4d4d; +} + +.install-wizard .step .field label.error { + font-size: 11px; + color: #ff2424; +} + +.install-wizard .body { + z-index: $z-index-install-wizard2; + width: 1012px; + height: 762px; + margin: -352px auto auto; + box-shadow: 0 -3px 4px #cfcfcf; + /*+box-shadow:0px -3px 4px #CFCFCF;*/ + background: url('../images/bg-gradient-white-transparent.png') repeat-x -114px -141px; + -moz-box-shadow: 0 -3px 4px #cfcfcf; + -webkit-box-shadow: 0 -3px 4px #cfcfcf; + -o-box-shadow: 0 -3px 4px #cfcfcf; +} + +.install-wizard h2 { + margin: 0 0 19px; + font-size: 28px; +} + +.install-wizard input[type='text'], +.install-wizard input[type='password'], +.install-wizard input[type='text'], +.install-wizard select { + width: 288px; + /*+border-radius:4px;*/ + padding: 6px; + border: 1px solid #cdcdcd; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + box-shadow: inset 0 1px #aeaeae; + background: #f7f7f7; + /*+box-shadow:inset 0px 1px #AEAEAE;*/ + font-size: 14px; + color: #232323; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + -moz-box-shadow: inset 0 1px #aeaeae; + -webkit-box-shadow: inset 0 1px #aeaeae; + -o-box-shadow: inset 0 1px #aeaeae; + -moz-box-shadow: inset 0 1px 0 #aeaeae; + -webkit-box-shadow: inset 0 1px 0 #aeaeae; + -o-box-shadow: inset 0 1px 0 #aeaeae; +} + +.install-wizard .button { + float: right; + margin-top: 15px; + /*+border-radius:4px;*/ + padding: 7px 16px 7px 18px; + border: 1px solid #505050; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: url('../images/bg-gradients.png') 0 -221px; + font-size: 12px; + font-weight: bold; + color: #ffffff; + text-shadow: 0 -1px 3px #3f4351; + /*+text-shadow:0px -1px 3px #3F4351;*/ + cursor: pointer; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + -moz-text-shadow: 0 -1px 3px #3f4351; + -webkit-text-shadow: 0 -1px 3px #3f4351; + -o-text-shadow: 0 -1px 3px #3f4351; +} + +.install-wizard .button.advanced-installation, +.install-wizard .button.go-back { + float: left; + border: 1px solid #c7c2c2; + background: #e0dede; + /*+text-shadow:0px 0px #FFFFFF;*/ + color: #3b3b3b; + text-shadow: 0 0 #ffffff; + -moz-text-shadow: 0 0 #ffffff; + -webkit-text-shadow: 0 0 #ffffff; + -o-text-shadow: 0 0 #ffffff; +} + +.install-wizard .button.go-back { + padding: 9px 16px 10px 18px; + font-size: 12px; +} + +.install-wizard .setup-form .button.go-back { + /*+placement:shift 15px -14px;*/ + position: relative; + top: -14px; + left: 15px; +} + +.install-wizard .step { + position: relative; + z-index: $z-index-install-wizard2; +} + +.install-wizard .step .tooltip-info { + /*+placement:shift 547px 50px;*/ + position: relative; + position: absolute; + top: 50px; + left: 547px; +} + +/*** Intro*/ +.install-wizard .step.intro.what-is-cloudstack p { + height: 540px; + background: url('../images/bg-what-is-cloudstack.png') no-repeat 50% 237px; +} + +/*** Diagram*/ +.install-wizard .diagram { + position: relative; + position: absolute; + /*+placement:shift 65px 496px;*/ + z-index: $z-index-install-wizard2; + top: 496px; + left: 65px; + width: 910px; + height: 385px; +} + +.install-wizard .diagram .part { + display: none; + background: url('../images/install-wizard-parts.png') no-repeat; +} + +.install-wizard .diagram .part.zone { + position: relative; + position: absolute; + top: 222px; + /*+placement:shift 77px 222px;*/ + left: 77px; + width: 742px; + height: 135px; + background-position: -267px -580px; +} + +.install-wizard .diagram .part.loading { + position: relative; + position: absolute; + top: -67px; + /*+placement:shift 105px -67px;*/ + left: 105px; + width: 742px; + height: 432px; + background-position: -1264px -487px; +} + +.install-wizard .diagram .part.loading .icon { + position: relative; + top: 130px; + left: 322px; + /*+placement:shift 322px 130px;*/ + width: 61px; + height: 76px; + background: url('../images/ajax-loader.gif') no-repeat; +} + +.install-wizard .diagram .part.pod { + position: relative; + position: absolute; + top: -76px; + /*+placement:shift 313px -76px;*/ + left: 313px; + width: 266px; + height: 396px; + background-position: -47px -3px; +} + +.install-wizard .diagram .part.cluster { + position: relative; + position: absolute; + top: -76px; + /*+placement:shift 313px -76px;*/ + left: 313px; + width: 266px; + height: 396px; + background-position: -364px 1px; +} + +.install-wizard .diagram .part.host { + position: relative; + position: absolute; + top: -76px; + /*+placement:shift 313px -76px;*/ + left: 313px; + width: 266px; + height: 396px; + background-position: -688px 1px; +} + +.install-wizard .diagram .part.primaryStorage { + position: relative; + position: absolute; + top: -76px; + /*+placement:shift 306px -76px;*/ + left: 306px; + width: 275px; + height: 396px; + background-position: -1046px 1px; +} + +.install-wizard .diagram .part.secondaryStorage { + position: relative; + position: absolute; + top: -76px; + /*+placement:shift 306px -76px;*/ + left: 306px; + width: 385px; + height: 396px; + background-position: -1469px 1px; +} + +/*** Setup form*/ +.install-wizard .step .setup-form { + display: inline-block; + width: 469px; + border: 1px solid #dfdfdf; + box-shadow: 0 5px 9px #9f9f9f; + /*+text-shadow:0px 1px #FFFFFF;*/ + background: url('../images/bg-transparent-white.png'); + text-shadow: 0 1px #ffffff; + -moz-text-shadow: 0 1px #ffffff; + -webkit-text-shadow: 0 1px #ffffff; + -o-text-shadow: 0 1px #ffffff; + -moz-text-shadow: 0 1px 0 #ffffff; + -webkit-text-shadow: 0 1px 0 #ffffff; + /*+box-shadow:0px 5px 9px #9F9F9F;*/ + -o-text-shadow: 0 1px 0 #ffffff; + -moz-box-shadow: 0 5px 9px #9f9f9f; + -webkit-box-shadow: 0 5px 9px #9f9f9f; + -o-box-shadow: 0 5px 9px #9f9f9f; +} + +.install-wizard .step .setup-form .title { + float: left; + margin: 17px 0 0 29px; + color: #626f7c; +} + +.install-wizard .step .setup-form .field { + display: inline-block; + width: 389px; + margin: 6px 0 1px 31px; + padding: 9px; + color: #57646d; +} + +.install-wizard .step .setup-form .field .name { + float: left; + width: 98px; + padding: 10px 0 0 0; + font-size: 13px; + text-align: right; +} + +.install-wizard .step .setup-form .field .value { + float: right; +} + +.install-wizard .step .setup-form input[type='text'], +.install-wizard .step .setup-form input[type='password'] { + width: 278px; + margin: 6px 4px 0 0; + padding: 2px 2px 1px; + border: 1px solid #8d8d8d; +} + +.install-wizard .step .setup-form .range-item { + float: left; + width: 142px; +} + +.install-wizard .step .setup-form .range-item input { + width: 131px; +} + +.install-wizard .step .setup-form .multi-range input[type='text'] { + width: 128px; +} + +.install-wizard .step .setup-form input.button { + margin: 0 30px 14px 15px; +} + +/*** Step: Change user*/ +.install-wizard .step.change-user { + width: 316px; + margin: auto; + padding-top: 95px; + text-align: center; +} + +.install-wizard .step.intro iframe { + width: 99%; + height: 99%; + margin: 4px; +} + +.install-wizard .step.intro .title { + margin-bottom: 21px; + margin-left: 0; + font-size: 25px; + color: #565454; +} + +.install-wizard .step.intro .subtitle { + margin-bottom: 9px; +} + +.install-wizard .step.intro .subtitle li { + position: relative; + width: 45%; + height: 24px; + padding: 1px 0 1px 30px; + background: url('../images/ajax-loader-small.gif') no-repeat 3px 0; + list-style: none; +} + +.install-wizard .step.intro .subtitle li.complete { + background: url('../images/icons.png') -1px -224px; +} + +.install-wizard .step.intro .subtitle li.error { + background: url('../images/icons.png') -1px -190px; +} + +.install-wizard .step.intro .subtitle li img { + float: right; +} diff --git a/ui/css/src/scss/components/jquery-ui.scss b/ui/css/src/scss/components/jquery-ui.scss new file mode 100644 index 00000000000..6816518ad48 --- /dev/null +++ b/ui/css/src/scss/components/jquery-ui.scss @@ -0,0 +1,88 @@ +// 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. + +.ui-widget { + font-family: inherit; +} + +.ui-widget-content, +.ui-widget.ui-widget-content { + border: 0; + background: inherit; +} + +.ui-dialog.ui-widget-content { + background: #ffffff; +} + +.ui-tabs .ui-tabs-nav { + display: block; + position: relative; + z-index: $z-index-ui-tabs; + float: left; + width: 100%; + height: 41px; + margin-top: 42px; + padding: 0; + border: 0; + background-color: inherit; + overflow: hidden; +} + +.ui-tabs .ui-tabs-nav.ui-corner-all { + border-bottom-left-radius: 0; +} + +.ui-tabs .ui-tabs-nav .ui-tab { + margin-right: 1px; +} + +.ui-tabs .ui-tab .ui-tabs-anchor { + position: relative; + float: left; + min-width: 91px; + padding: 15px 10px; + font-size: 11px; + color: #4e6070; + text-align: center; + text-decoration: none; +} + +.ui-tabs .ui-tab.ui-state-default { + border: 1px solid #d9d9d9; + background: #f0f0f0; +} + +.ui-tabs .ui-tab.ui-state-active { + background: #ffffff; +} + +.ui-tabs .ui-tab.ui-state-hover a { + text-decoration: underline; + /*color: #000000;*/ + cursor: pointer; +} + +ul.ui-autocomplete.ui-menu { + width: 250px; + max-height: 400px; + padding: 5px; + background: #dddddd; + font-size: 13px; + overflow-x: hidden; + overflow-y: auto; +} diff --git a/ui/css/src/scss/components/list-view.scss b/ui/css/src/scss/components/list-view.scss new file mode 100644 index 00000000000..51d6ac2d443 --- /dev/null +++ b/ui/css/src/scss/components/list-view.scss @@ -0,0 +1,94 @@ +// 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. + +//TODO refactoring for all "list-view" files +.ui-dialog .list-view { + height: 515px !important; + overflow: auto; + overflow-x: hidden; +} + +.ui-dialog .list-view .toolbar { + top: 50px; + width: 854px; +} + +div.panel.ui-dialog div.list-view div.fixed-header { + z-index: $z-index-standard; + top: 55px; + left: 35px; + width: 759px; + height: 49px; + margin: 0; + background-color: #ffffff; +} + +.ui-dialog .list-view table { + top: 9px !important; +} + +.ui-dialog.panel div.list-view div.data-table table { + width: 778px; + margin-top: 39px; +} + +.ui-dialog.panel div.list-view div.data-table table tbody tr.multi-edit-selected { + background: #c3e0fc; +} + +/*List-view: subselect dropdown*/ +.list-view .subselect { + display: block; + float: left; + clear: both; + width: 173px; + margin: 0 0 0 -3px; + padding: 0; + border: 1px solid #a8a7a7; + border-radius: 2px; + background: #e8e8e8; + /*+border-radius:2px;*/ + cursor: default; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + -khtml-border-radius: 2px; +} + +.list-view .subselect:hover span { + color: initial; +} + +.list-view .subselect span { + margin: 4px 0 0 12px; + cursor: default; +} + +.list-view .subselect span.info { + background: none; + font-size: 10px; + white-space: nowrap; +} + +.list-view .subselect span:hover { + color: initial; +} + +.list-view .subselect select { + width: 175px; + margin: 0 0 0 -11px; + font-size: 10px; +} diff --git a/ui/css/src/scss/components/list-view2.scss b/ui/css/src/scss/components/list-view2.scss new file mode 100644 index 00000000000..4a426b199a1 --- /dev/null +++ b/ui/css/src/scss/components/list-view2.scss @@ -0,0 +1,172 @@ +// 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. + +//TODO refactoring for all "list-view" files +div.panel div.list-view { + height: 632px; + margin-top: 30px; + overflow: auto; + overflow-x: hidden; +} + +.detail-view div.list-view { + width: 930px; + height: 536px !important; + margin: 41px auto auto !important; + border: 1px solid #dad4d4; + background: #f7f7f7; +} + +div.panel div.list-view div.data-table table { + width: 955px; +} + +.detail-view div.list-view div.data-table table { + width: 903px !important; +} + +.detail-view div.list-view div.data-table table td { + border-left: 1px solid #cacaca; +} + +div.panel div.list-view div.fixed-header { + display: table; + position: absolute; + z-index: $z-index-standard; + top: 29px; + left: 12px; + width: 960px; + height: 47px; + margin: 0; + background-color: #f7f7f7; +} + +.detail-view div.list-view div.fixed-header { + top: 49px !important; + left: 29px !important; + width: 903px !important; + background: #ffffff; +} + +.detail-view div#details-tab-zones div.fixed-header { + left: 25px !important; +} + +.detail-view div.list-view div.fixed-header table { + width: 100% !important; +} + +.project-view div.panel div.list-view div.fixed-header { + background: #6d747d; +} + +div.panel div.list-view div.fixed-header table { + position: relative; + /*+placement:shift 0px 18px;*/ + top: 18px; + left: 0; + width: 955px; + margin: 0; + /*+box-shadow:0px 4px 10px #DFE1E3;*/ + box-shadow: 0 4px 10px #dfe1e3; + -moz-box-shadow: 0 4px 10px #dfe1e3; + -webkit-box-shadow: 0 4px 10px #dfe1e3; + -o-box-shadow: 0 4px 10px #dfe1e3; +} + +.project-view div.panel div.list-view div.fixed-header table { + /*+box-shadow:0px 2px 2px #CACDD1;*/ + box-shadow: 0 2px 2px #cacdd1; + -moz-box-shadow: 0 2px 2px #cacdd1; + -webkit-box-shadow: 0 2px 2px #cacdd1; + -o-box-shadow: 0 2px 2px #cacdd1; +} + +div.list-view td.state { + width: 120px; + min-width: 120px; + max-width: 120px; +} + +div.list-view td.first { + cursor: pointer; +} + +div.list-view tr:not(.multi-edit-selected) td.first:hover { + color: #3a82cd; +} + +div.list-view td.state span { + width: 80px; + padding: 1px 0 0 18px; + background: url('../images/sprites.png') 1px -526px; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + text-align: center; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; +} + +div.list-view td.state.on span { + background-image: url('../images/sprites.png'); + background-repeat: no-repeat; + background-position: 1px -460px; + color: #008000; +} + +div.list-view td.state.off span { + background-image: url('../images/sprites.png'); + background-repeat: no-repeat; + background-position: 1px -492px; + color: #b90606; +} + +div.list-view td.state.warning span { + background-image: url('../images/sprites.png'); + background-repeat: no-repeat; + background-position: 1px -558px; + color: #b90606; +} + +div.list-view td.state.transition span { + background-image: url('../images/sprites.png'); + background-repeat: no-repeat; + background-position: 1px -432px; + color: #b90606; +} + +div.list-view td.state.suitable span { + height: 18px; + background: url('../images/icons.png') no-repeat scroll 1px -224px; + color: #008000; +} + +div.list-view td.state.suitable-storage-migration-required span { + width: 200px; +} + +div.list-view td.state.notsuitable span { + width: 100px; + height: 19px; + background: url('../images/icons.png') no-repeat scroll 1px -190px; + color: #b90606; +} + +div.list-view td.state.notsuitable-storage-migration-required span { + width: 220px !important; +} diff --git a/ui/css/src/scss/components/loading-overlay.scss b/ui/css/src/scss/components/loading-overlay.scss new file mode 100644 index 00000000000..22909e30334 --- /dev/null +++ b/ui/css/src/scss/components/loading-overlay.scss @@ -0,0 +1,42 @@ +// 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. + +.loading-overlay { + opacity: 0.7; + position: absolute; + z-index: $z-index-loading-overlay; + top: 0; + left: 0; + width: 100%; + height: 100%; + /*+opacity:70%;*/ + background: #f2f2f2 url('../images/ajax-loader.gif') no-repeat center; + filter: alpha(opacity=70); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); + -moz-opacity: 0.7; +} + +.loading-overlay span { + display: block; + margin: 155px 0 0 5px; + color: #4b4b4b; + text-align: center; +} + +.detail-view .ui-tabs-panel .loading-overlay { + background-position: 50% 250px; +} diff --git a/ui/css/src/scss/components/login.scss b/ui/css/src/scss/components/login.scss new file mode 100644 index 00000000000..f6f3a2438d3 --- /dev/null +++ b/ui/css/src/scss/components/login.scss @@ -0,0 +1,171 @@ +// 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. + +body.login { + background: url('../images/overlay-pattern.png') repeat center, #106ca9 url('../images/bg-login.jpg') no-repeat center; + background-size: auto, cover; + overflow: hidden; +} + +.login { + display: block; + position: relative; + top: 80px; + /*+placement:shift 0 80px;*/ + left: 0; + width: 100%; + height: 350px; + background: #053663; +} + +.login .select-language { + float: left; + margin-top: 10px; +} + +.login .select-language select { + width: 260px; + margin-top: 20px; + border: 1px solid #808080; + /*+border-radius:4px;*/ + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + box-shadow: inset 0 1px 1px #838383; + font-size: 12px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + /*+box-shadow:inset 0px 1px 1px #838383;*/ + -khtml-border-radius: 4px; + -moz-box-shadow: inset 0 1px 1px #838383; + -webkit-box-shadow: inset 0 1px 1px #838383; + -o-box-shadow: inset 0 1px 1px #838383; +} + +.login .fields { + float: left; + width: 409px; + margin: 72px 0 0 88px; +} + +.login .fields .field { + position: relative; +} + +.login .fields .field label { + position: absolute; + margin-top: 14px; + /*+placement:displace 9px 14px;*/ + margin-left: 9px; + font-size: 12px; + color: #4e4f53; +} + +.login .fields .field label.error { + float: right; + top: 0; + left: 264px; + color: #ff0000; +} + +.login .fields input { + width: 248px; + height: 20px; + margin: 5px 0 0; + padding: 5px; + border: 0; + border-radius: 3px; + box-shadow: inset 0 1px 1px #4e4e4e; + /*+border-radius:3px;*/ + background: #ececec; + font-size: 13px; + text-indent: 1px; + -moz-border-radius: 3px; + /*+box-shadow:inset 0px 1px 1px #4E4E4E;*/ + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + -moz-box-shadow: inset 0 1px 1px #4e4e4e; + -webkit-box-shadow: inset 0 1px 1px #4e4e4e; + -o-box-shadow: inset 0 1px 1px #4e4e4e; +} + +.login .fields input.error { + border-color: #ff8080; + background: #ffeaea; +} + +.login .fields input[type='submit'] { + display: block; + float: left; + width: 69px; + height: 25px; + margin: 7px 120px 0 -1px; + border: 0; + background: transparent url('../images/sprites.png') -563px -747px; + font-weight: bold; + color: #ffffff; + text-align: center; + text-indent: -1px; + text-shadow: 0 1px 2px #000000; + /*+text-shadow:0px 1px 2px #000000;*/ + cursor: pointer; + -moz-text-shadow: 0 1px 2px #000000; + -webkit-text-shadow: 0 1px 2px #000000; + -o-text-shadow: 0 1px 2px #000000; +} + +.login .fields input[type='samlsubmit'] { + display: block; + width: 60px; + height: 15px; + border: 0; + background: transparent url('../images/sprites.png') -563px -747px; + font-size: 10px; + font-weight: bold; + color: #ffffff; + text-align: center; + text-indent: -1px; + /*+text-shadow:0px 1px 2px #000000;*/ + text-shadow: 0 1px 2px #000000; + cursor: pointer; + -moz-text-shadow: 0 1px 2px #000000; + -webkit-text-shadow: 0 1px 2px #000000; + -o-text-shadow: 0 1px 2px #000000; +} + +.login .fields input[type='submit']:hover { + background-position: -563px -772px; +} + +.login .logo { + float: left; + width: 290px; + height: 40px; + margin: 72px 0 0 209px; + background: url('../images/logo-login.png') no-repeat 0 0; +} + +.login.nologo .logo { + background-image: url('../images/logo-login-oss.png'); +} + +.login form { + display: block; + width: 1000px; + height: 100%; + margin: auto; + background: #053663; +} diff --git a/ui/css/src/scss/components/migrate-vm.scss b/ui/css/src/scss/components/migrate-vm.scss new file mode 100644 index 00000000000..00740f792e4 --- /dev/null +++ b/ui/css/src/scss/components/migrate-vm.scss @@ -0,0 +1,29 @@ +// 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. + +.migrate-vm-available-host-list div.text-search { + right: 30px; +} + +.migrate-vm-available-host-list div.ui-widget-content { + display: block !important; +} + +.multi-edit-add-list .ui-button.migrateok, +.multi-edit-add-list .ui-button.migratecancel { + top: -5px !important; +} diff --git a/ui/css/src/scss/components/multi-edit.scss b/ui/css/src/scss/components/multi-edit.scss new file mode 100644 index 00000000000..ca869717231 --- /dev/null +++ b/ui/css/src/scss/components/multi-edit.scss @@ -0,0 +1,579 @@ +// 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. + +div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBalancer div.multi-edit form table.multi-edit thead tr th, +div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBalancer div.multi-edit form table.multi-edit tbody tr td { + min-width: 100px; +} + +.multi-edit { + overflow: auto; +} + +.multi-edit > form { + position: relative; + clear: both; +} + +.multi-edit table.multi-edit { + border-top: 0; +} + +.multi-edit table th { + min-width: 88px; + white-space: nowrap; + text-align: center; + text-indent: 0; +} + +.detail-group .multi-edit table td { + border-left: 1px solid #cdcccc; +} + +.detail-view .multi-edit input { + width: 70%; +} + +.detail-view .multi-edit select { + width: 93%; + min-width: 80px; + font-size: 10px; +} + +.multi-edit input { + width: 85%; +} + +.multi-edit .range { + position: relative; +} + +.multi-edit .range .range-item { + float: left; +} + +.multi-edit .range input { + position: relative; + width: 35px; + margin-right: 2px; +} + +.multi-edit .range label { + display: block; + position: relative; + /*+placement:shift 3px 2px;*/ + clear: both; + top: 2px; + left: 3px; +} + +.multi-edit label.error { + float: left; + margin: 3px 0 0; + font-size: 10px; +} + +.multi-edit .data-table td span { + float: left; +} + +.multi-edit .data-table td.add-vm { + cursor: pointer; +} + +.multi-edit th.add-rule, +.multi-edit td.add-rule { + border-right: 1px solid #cdcccc; +} + +.multi-edit .data-table td.add-vm:hover { + color: #5faaf7; +} + +.multi-edit .data-table .fixed-header { + display: none; +} + +.multi-edit .button.add-vm { + position: relative; + top: 0; + left: 4px; + width: 74px; + /*+text-shadow:0px 1px 1px #000000;*/ + padding: 6px 0 4px; + border: 1px solid #858585; + border-top: 0; + border-radius: 5px; + /*+box-shadow:0px 1px 1px #FFFFFF;*/ + border-radius: 5px 5px 5px 5px; + box-shadow: 0 1px 1px #ffffff; + background: url('../images/bg-gradients.png') repeat-x 0 -220px; + font-size: 10px; + font-weight: bold; + color: #ffffff; + /*+border-radius:5px;*/ + text-align: center; + text-indent: 0; + text-shadow: 0 1px 1px #000000; + cursor: pointer; + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; + -moz-box-shadow: 0 1px 1px #ffffff; + -webkit-box-shadow: 0 1px 1px #ffffff; + -o-box-shadow: 0 1px 1px #ffffff; + /*+placement:shift 4px 0px;*/ + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -khtml-border-radius: 5px; +} + +.multi-edit .button.add-vm:hover { + box-shadow: inset 0 1px 1px #000000; + /*+box-shadow:inset 0px 1px 1px #000000;*/ + background-position: 0 -241px; + -moz-box-shadow: inset 0 1px 1px #000000; + -webkit-box-shadow: inset 0 1px 1px #000000; + -o-box-shadow: inset 0 1px 1px #000000; +} + +.multi-edit .button.custom-action { + border: 1px solid #b7b7b7; + background: url('../images/bg-gradients.png') 0 -271px; + font-size: 10px; + color: #485867; + /*+text-shadow:0px 1px #FFFFFF;*/ + text-shadow: 0 1px #ffffff; + -moz-text-shadow: 0 1px #ffffff; + -webkit-text-shadow: 0 1px #ffffff; + -o-text-shadow: 0 1px #ffffff; +} + +.multi-edit td.disabled .button.add-vm.custom-action { + /*+opacity:50%;*/ + opacity: 0.5; + cursor: not-allowed; + filter: alpha(opacity=50); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); + -moz-opacity: 0.5; +} + +.multi-edit .button.custom-action:hover { + background: #808080 url('../images/bg-gradients.png'); + color: #ffffff; + /*+text-shadow:0px 1px 1px #000000;*/ + text-shadow: 0 1px 1px #000000; + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; +} + +.ui-dialog.multi-edit-add-list { + width: initial !important; +} + +.ui-dialog.multi-edit-add-list .ui-dialog-buttonpane { + display: block; +} + +.ui-dialog.multi-edit-add-list .ui-dialog-buttonpane .ui-dialog-buttonset { + width: initial; + padding-right: 15px; +} + +.ui-dialog.multi-edit-add-list .ui-dialog-buttonpane .ui-dialog-buttonset button { + top: 0; + left: 0; +} + +.multi-edit-add-list .ui-button.ok, +.multi-edit-add-list .ui-button.cancel { + position: relative; + /*+placement:shift 506px -18px;*/ + float: right; + top: -18px; + left: 506px; +} + +.multi-edit-add-list .ui-button.cancel { + /*+placement:shift 492px -18px;*/ + position: relative; + left: 492px; + border: 0; + background: transparent; + font-weight: bold; + color: #808b95; +} + +.multi-edit-add-list div.form-container { + width: auto !important; + height: auto; + text-align: center; +} + +.multi-edit-add-list div.form-container div.name label { + display: inline; +} + +.multi-edit .data .data-body { + margin: auto auto auto 11px; + overflow: hidden; +} + +.panel.always-maximized .multi-edit .data .data-body { + width: 96%; + margin: 0 0 0 12px; +} + +.multi-edit .data .data-body .data-item { + position: relative; + margin-bottom: 14px; + border: 1px solid #cdcccc; +} + +.multi-edit .data .data-body .data-item .loading-overlay { + background-position: 50% 50%; +} + +.multi-edit .data .data-body .data-item.loading { + height: 28px; + border: 1px solid #dddddd; + background: #ffffff url('../images/ajax-loader.gif') no-repeat center; +} + +.multi-edit .data .data-body .data-item.loading .label { + margin: 12px 0 0; + font-size: 12px; + color: #808080; + text-align: center; + text-indent: 19%; +} + +.multi-edit .data .data-body .data-item table { + width: 100%; + margin: 0; + border: 0; + background: #f0f1f2; + overflow: hidden; +} + +.multi-edit .data .data-body .data-item tr { + border: 0; + background: #efefef; +} + +.multi-edit .data .data-body .data-item table tbody tr td { + height: 15px; + border-right: 1px solid #cfc9c9; + border-left: 0; + background: #f0f1f2; + overflow: auto; +} + +.multi-edit .data .data-body .data-item > table tbody tr td span { + display: block; + float: left; + max-width: 90%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.multi-edit .data .data-body .data-item table tbody tr td.name { + padding-top: 9px; +} + +.multi-edit .data .data-body .data-item table tbody tr td.name span { + width: 53px; + font-weight: bold; + color: #4c5d78; +} + +.multi-edit .data .data-body .data-item .expandable-listing table tbody tr td.name span { + font-weight: normal; + color: #4c5d78; + cursor: pointer; +} + +.multi-edit .data .data-body .data-item .expandable-listing table tbody tr td.name span:hover { + color: #0000ff; +} + +div#details-tab-aclRules table.multi-edit tr th.number, +div#details-tab-aclRules div.data-item table tr td.number { + width: 45px !important; + min-width: 45px !important; + max-width: 45px !important; +} + +div#details-tab-aclRules div.multi-edit table tr th.action, +div#details-tab-aclRules div.multi-edit table tr td.action { + width: 40px !important; + min-width: 40px !important; + max-width: 40px !important; +} + +div#details-tab-aclRules div.multi-edit table tr th.protocol, +div#details-tab-aclRules div.multi-edit table tr td.protocol { + width: 50px !important; + min-width: 50px !important; + max-width: 50px !important; +} + +div#details-tab-aclRules div.multi-edit table tr th.protocolnumber, +div#details-tab-aclRules div.multi-edit table tr td.protocolnumber { + width: 60px !important; + min-width: 60px !important; + max-width: 60px !important; +} + +div#details-tab-aclRules div.multi-edit table tr th.traffictype, +div#details-tab-aclRules div.multi-edit table tr td.traffictype { + width: 60px !important; + min-width: 60px !important; + max-width: 60px !important; +} + +div#details-tab-aclRules div.multi-edit table tr th.reason, +div#details-tab-aclRules div.multi-edit table tr td.reason { + width: 60px !important; + min-width: 60px !important; + max-width: 60px !important; +} + +div#details-tab-aclRules div.multi-edit table tr th.icmptype, +div#details-tab-aclRules div.multi-edit table tr td.icmptype, +div#details-tab-aclRules div.multi-edit table tr th.icmpcode, +div#details-tab-aclRules div.multi-edit table tr td.icmpcode { + width: 60px !important; + min-width: 60px !important; + max-width: 60px !important; +} + +div#details-tab-aclRules div.multi-edit table tr th.startport, +div#details-tab-aclRules div.multi-edit table tr td.startport, +div#details-tab-aclRules div.multi-edit table tr th.endport, +div#details-tab-aclRules div.multi-edit table tr td.endport { + width: 60px !important; + min-width: 60px !important; + max-width: 60px !important; +} + +div#details-tab-aclRules td.cidrlist span { + width: 100%; + text-align: center; +} + +.multi-edit .data .data-body .data-item table tbody tr td.multi-actions .action { + float: left; + width: 28px; + height: 21px; + cursor: pointer; +} + +.multi-edit .data .data-body .data-item table tbody tr td.multi-actions .action span.icon { + float: left; + width: 28px; + height: 21px; + background-image: url('../images/sprites.png'); + cursor: pointer; +} + +.multi-edit .data .data-body .data-item tr td .expand { + display: block; + float: left; + width: 14px; + height: 15px; + margin: -3px 0 0 11px; + border: 1px solid #d0d0d0; + /*+border-radius:9px;*/ + border-radius: 9px; + border-radius: 9px 9px 9px 9px; + background: #ffffff url('../images/sprites.png') -541px -499px; + cursor: pointer; + -moz-border-radius: 9px; + -webkit-border-radius: 9px; + -khtml-border-radius: 9px; +} + +.multi-edit .data .data-body .data-item tr td.add-vm, +.multi-edit tr th.add-vm { + cursor: pointer; +} + +.multi-edit .data .data-body .data-item tr td .custom-action { + margin: -2px 0 0 0; +} + +.multi-edit .data .data-body .data-item tr td.add-vm:hover { + font-weight: bold; + color: #0060ff; +} + +.multi-edit .data .data-body .data-item tr td.add-vm p { + margin-top: 3px; + margin-bottom: 6px; + padding-left: 9px; + text-indent: 0; +} + +.multi-edit .data .data-body .data-item tr td.multi-actions .icon { + /*+placement:shift -3px -2px;*/ + position: relative; + top: -2px; + left: -3px; +} + +.multi-edit .data .data-body .data-item .expandable-listing { + width: 99.8%; + max-height: 161px; + border: 1px solid #cfc9c9; + overflow: auto; + overflow-x: hidden; +} + +.multi-edit .data .data-body .data-item .expandable-listing tr { + width: 100%; + margin: 0; + padding: 0; + border: 0; +} + +.multi-edit .data .data-body .data-item .expandable-listing tr td { + margin: 0; + border: 0; + background: #dde0e2; + text-indent: 37px; +} + +.multi-edit .data .data-body .data-item .expandable-listing tr.odd td { + background: #f2f0f0; +} + +.ui-tabs-panel .add-by { + width: 94%; + margin: 13px 0 0 14px; + font-size: 12px; + color: #536474; +} + +.ui-tabs-panel .add-by .selection { + width: 236px; + margin: 8px 0 0; +} + +.ui-tabs-panel .add-by .selection input { + margin: 0 6px 0 0; +} + +.ui-tabs-panel .add-by .selection label { + margin: 0 22px 0 0; +} + +/** Fix long table overflow*/ +.detail-view .multi-edit { + width: 100%; +} + +.detail-view .multi-edit table { + width: 97%; + max-width: inherit; +} + +.detail-view .multi-edit table tr th, +.detail-view .multi-edit table tr td { + width: 84px !important; + min-width: 84px !important; + max-width: 84px !important; + font-size: 10px; +} + +/* special case for 'Source CIDR' column - make it wide enough to fit a CIDR without ellipsizing*/ +.detail-view .multi-edit table tr th.cidrlist, +.detail-view .multi-edit table tr td.cidrlist { + min-width: 118px !important; + max-width: 118px !important; + padding: 0 0 0 0; +} + +.detail-view .multi-edit td.cidrlist input { + width: 85%; +} + + +/** Header fields*/ +.multi-edit .header-fields { + position: relative; + /*+placement:shift 14px 11px;*/ + position: relative; + top: 11px; + left: 14px; +} + +.multi-edit .header-fields .form-container { + width: 96%; + height: 32px; + border: 1px solid #d4cfcf; + /*+border-radius:4px;*/ + border-radius: 4px; + background: #e4e4e4; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.multi-edit .header-fields .form-item { + float: left; + margin-right: 0; + margin-bottom: 32px; + padding: 4px 15px 3px 9px; +} + +.multi-edit .header-fields .form-item input, +.multi-edit .header-fields .form-item select { + margin-top: 4px; +} + +.multi-edit .header-fields .form-item .name, +.multi-edit .header-fields .form-item .value { + float: left; +} + +.multi-edit .header-fields .form-item .name { + padding: 5px; + font-size: 14px; + color: #55687a; +} + +/*Sortable*/ +.multi-edit table tbody tr td.reorder, +.multi-edit table thead tr th.reorder { + width: 16px !important; + min-width: 16px !important; + max-width: 16px !important; +} + +/*Security Rules*/ +.security-rules .multi-edit input { + width: 69px; + margin: 0 0 0 9px; +} + +.security-rules .multi-edit .range input { + width: 44px; + margin: 0; +} diff --git a/ui/css/src/scss/components/multi-wizzard.scss b/ui/css/src/scss/components/multi-wizzard.scss new file mode 100644 index 00000000000..3b74f739c27 --- /dev/null +++ b/ui/css/src/scss/components/multi-wizzard.scss @@ -0,0 +1,2350 @@ +// 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. + +.multi-wizard { + display: inline-block; + width: 500px; + height: 550px; +} + +/*** Progress bar*/ +.multi-wizard .progress { + font-size: 11px; + color: #ffffff; +} + +.multi-wizard .progress ul { + float: left; + clear: both; + height: 40px; +} + +/*[clearfix]*/ +.multi-wizard .progress ul li { + display: flex; + position: relative; + float: left; + align-items: center; + width: 128px; + height: 40px; + justify-content: center; +} + +.multi-wizard.instance-wizard .progress ul li { + width: 102px; + margin-left: 8px; +} + +.multi-wizard .progress ul li.active { + border-radius: 5px; + background: url('../images/bg-gradients.png') 0 -221px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -khtml-border-radius: 5px; +} + +.multi-wizard .progress ul li span { + position: relative; + width: 62px; + color: #000000; + text-align: center; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; +} + +.multi-wizard .progress ul li span.arrow { + display: none; + position: absolute; + /*+placement:displace 74px -3px;*/ + z-index: $z-index-toolbox-info; + width: 17px; + height: 15px; + margin-top: -3px; + margin-left: 74px; + background: url('../images/icons.png') no-repeat 0 -422px; +} + +.multi-wizard.instance-wizard .progress ul li span.arrow { + left: 19px; +} + +.multi-wizard .progress ul li.active span.arrow { + background-position: -1px -396px; +} + +.multi-wizard .progress ul li span.number { + width: auto; + background: transparent; + font-size: 27px; + font-weight: bold; + color: #bbbbbb; +} + +.multi-wizard .progress ul li.active span { + /*+text-shadow:0px -1px 1px #004AFF;*/ + color: #ffffff; + text-shadow: 0 -1px 1px #004aff; + -moz-text-shadow: 0 -1px 1px #004aff; + -webkit-text-shadow: 0 -1px 1px #004aff; + -o-text-shadow: 0 -1px 1px #004aff; +} + +/*** Content*/ +.multi-wizard .main-desc { + position: relative; + top: 25px; + left: 3px; + /*+placement:shift 3px 25px;*/ + width: 437px; + font-size: 11px; + line-height: 17px; + text-align: left; +} + +.multi-wizard .review .main-desc, +.multi-wizard .select-template .main-desc { + left: 0; + margin-left: 10px; +} + +.multi-wizard .content { + display: inline-block; + float: left; + width: 440px; + min-height: 366px; + margin: 24px 0 0; + /*+border-radius:4px;*/ + padding-bottom: 8px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: #ffffff; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.multi-wizard .select-security-group .content { + height: 366px; +} + +.multi-wizard .content .section { + width: 416px; + margin: 16px auto auto; + border: 1px solid #e0dfdf; + background: #e9e9e9; + font-size: 12px; + color: #505a62; + text-align: left; + overflow: hidden; +} + +.multi-wizard.instance-wizard .service-offering .content { + width: 463px; + max-height: 365px; + overflow: auto; + overflow-x: hidden; +} + +.multi-wizard .content .section .select-area { + width: 334px; + height: 45px; + margin: 9px auto auto; + background: #d6d6d6; +} + +.multi-wizard .content .section .select-area .desc { + float: right; + width: 155px; + padding: 9px 0 0; + font-size: 12px; + color: #989898; + text-align: left; +} + +.multi-wizard .content .section .select-area input { + float: left; + margin: 0; + padding: 9px; +} + +.multi-wizard .content .section .select-area select { + float: left; + width: 158px; + /*+border-radius:4px;*/ + margin: 11px 0 0 14px; + padding: 0; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.multi-wizard .content .section .select-area input[type='radio'], +.multi-wizard.instance-wizard .content .section.select-template input[type='radio'] { + margin: 14px 16px 0; +} + +.multi-wizard .content .section .select-area label { + float: left; + margin: 12px 12px 12px 2px; + font-size: 18px; + color: #62798e; + /*+text-shadow:0px 2px 2px #EFEFEF;*/ + text-align: left; + text-shadow: 0 2px 2px #efefef; + -moz-text-shadow: 0 2px 2px #efefef; + -webkit-text-shadow: 0 2px 2px #efefef; + -o-text-shadow: 0 2px 2px #efefef; +} + +.multi-wizard .content .section .select-area label.error { + margin: 2px 0 0 14px; + font-size: 10px; + color: #ff0000; +} + +.multi-wizard .content .section p { + padding: 0 0 0 40px; + font-size: 11px; + color: #808080; + text-align: left; +} + +.multi-wizard .content .section h3 { + margin: 0; + padding: 14px 14px 3px 39px; + font-weight: bold; + color: #62798e; + /*+text-shadow:0px 1px 1px #EFEFEF;*/ + text-align: left; + text-shadow: 0 1px 1px #efefef; + -moz-text-shadow: 0 1px 1px #efefef; + -webkit-text-shadow: 0 1px 1px #efefef; + -o-text-shadow: 0 1px 1px #efefef; +} + +.multi-wizard .content .section.select-zone { + height: 117px; +} + +.multi-wizard .content .section.select-template { + height: 206px; +} + +.multi-wizard .content.tab-view { + margin: 31px 0 0; + padding: 0 8px; + background: transparent; +} + +.multi-wizard .content.tab-view div.ui-tabs-panel { + clear: both; + width: 98%; + height: 72% !important; + height: 591px; + border: 1px solid #e2dddd; + border-radius: 0 3px 10px 10px; + background: #ffffff; + /*+border-radius:0 3px 10px 10px;*/ + overflow: auto; + overflow-x: hidden; + -moz-border-radius: 0 3px 10px 10px; + -webkit-border-radius: 0 3px 10px 10px; + -khtml-border-radius: 0 3px 10px 10px; +} + +.multi-wizard .content.tab-view div.ui-tabs-panel.ui-tabs-hide { + display: none; +} + +.multi-wizard.instance-wizard .select-iso .content .select .hypervisor { + display: block; + position: relative; + float: left; + clear: both; + /*+placement:shift 0px -6px;*/ + top: -6px; + left: 0; + margin: 12px 0 0 58px; +} + +.multi-wizard.instance-wizard .select-iso .content .select .hypervisor select { + width: 160px; +} + +.multi-wizard.instance-wizard .select-iso .content .select .hypervisor label { + position: relative; + top: 0; + left: 0; + margin-right: 9px; + /*+placement:shift;*/ + margin-left: 2px; + font-size: 11px; + color: #000000; +} + +.multi-wizard.instance-wizard .select-iso .wizard-step-conditional.select-iso .content .select.selected { + height: 90px; +} + +/*** UI widgets*/ +.multi-wizard .ui-tabs ul.ui-tabs-nav { + display: block; + display: inline-block; + position: relative; + z-index: $z-index-install-wizard2; + top: 5px; + /*+placement:shift -6px 5px;*/ + left: -6px; + height: 41px; + margin-top: 7px; + border: 0; + background: transparent; + overflow: hidden; +} + +.multi-wizard .select-iso .ui-tabs ul { + float: left; + top: 1px; + left: 0; +} + +.multi-wizard .ui-tabs li.ui-state-active { + background: #ffffff; +} + +.multi-wizard .ui-tabs li.ui-state-default a { + padding-right: 0; + padding-left: 0; +} + +.multi-wizard .ui-slider { + float: left; + width: 136px; + margin: 8px -2px 3px; + padding: 0; + background: url('../images/bg-gradients.png') 0 -307px !important; +} + +.multi-wizard.instance-wizard .ui-slider { + margin: 8px 0 0 2px; + padding: 7px 0 0 8px; +} + +.multi-wizard .ui-slider .ui-slider-handle { + display: block; + position: relative; + top: -0.5rem; + width: 18px; + height: 18px; + margin-left: -0.9rem; + border: 0; + outline: none; + background: url('../images/buttons.png') -622px -274px; +} + +/*** Select container*/ +.multi-wizard .select-container { + height: 352px; + margin: 10px 10px 0; + border: 1px solid #d9dfe1; + border-radius: 4px; + /*+border-radius:4px;*/ + border-radius: 4px 4px 4px 4px; + overflow: auto; + overflow-x: hidden; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.multi-wizard .select-container p { + padding: 11px; + background: #dfdfdf; + color: #424242; +} + +.multi-wizard .select-container .select { + display: inline-block; + float: left; + width: 100%; + min-height: 35px; + margin: -1px 0 0; + padding: 0 0 14px; + border: 0; + background: #ffffff; + font-size: 13px; + text-align: left; +} + +.multi-wizard .select-container .select.odd { + background: #ebeff4; +} + +.multi-wizard .select-container .select input { + float: left; + margin: 21px 24px 0; +} + +.multi-wizard .select-container .select .select-desc { + display: inline-block; + float: left; + clear: none; + max-width: 335px; + min-height: 28px; + margin: 21px 0 0; + overflow: hidden; +} + +.multi-wizard .select-container .select .select-desc .name { + margin: 0 0 5px; + font-weight: bold; +} + +.multi-wizard .select-container .select .select-desc .desc { + display: inline-block; + font-size: 11px; + color: #808080; + /*[empty]height:;*/ +} + +/*** Buttons*/ +.multi-wizard .buttons { + position: absolute; + bottom: 10px; + left: 0; + width: 100%; +} + +.multi-wizard .buttons .button { + width: 88px; + height: 16px; + padding: 11px 0 8px; + /*+box-shadow:0px 1px 1px #FFFFFF;*/ + border: 1px solid #78818f; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + box-shadow: 0 1px 1px #ffffff; + font-size: 12px; + font-weight: bold; + cursor: pointer; + -moz-box-shadow: 0 1px 1px #ffffff; + /*+border-radius:4px;*/ + -webkit-box-shadow: 0 1px 1px #ffffff; + -o-box-shadow: 0 1px 1px #ffffff; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.multi-wizard .buttons .button.next { + /*+placement:float-right 77px 0px;*/ + position: relative; + float: right; + top: 0; + left: 77px; + border: 1px solid #0069cf; + /*+text-shadow:0px -1px 1px #465259;*/ + border-top: 1px solid #0070fc; + background: #0049ff url('../images/gradients.png') 0 -317px; + font-weight: bold; + color: #ffffff; + text-shadow: 0 -1px 1px #465259; + -moz-text-shadow: 0 -1px 1px #465259; + -webkit-text-shadow: 0 -1px 1px #465259; + -o-text-shadow: 0 -1px 1px #465259; +} + +.multi-wizard .buttons .button.next:hover { + border: 1px solid #0035b8; + border-bottom: 1px solid #0062fa; + background-position: -3px -368px; +} + +.multi-wizard .buttons .button.next.final { + width: 115px; + margin: 3px 0 0; + padding: 4px 0 9px; +} + +.multi-wizard .buttons .button.next.final span { + position: relative; + /*+placement:shift 0px 5px;*/ + top: 5px; + left: 0; + padding: 5px 0 5px 30px; + background: url('../images/icons.png') 0 -349px; +} + +.multi-wizard .buttons .button.cancel { + position: relative; + /*+placement:float-right -127px 0px;*/ + float: right; + top: 0; + left: -127px; + padding: 14px 0 0 0; + border: 0; + /*+border-radius:0;*/ + border-radius: 0; + border-radius: 0 0 0 0; + box-shadow: 0 0; + background: transparent; + color: #808080; + text-shadow: 0 1px 1px #ffffff; + /*+box-shadow:0px 0px;*/ + -moz-border-radius: 0; + -webkit-border-radius: 0; + -khtml-border-radius: 0; + -moz-box-shadow: 0 0; + -webkit-box-shadow: 0 0; + -o-box-shadow: 0 0; + -moz-box-shadow: 0 0 inherit; + -webkit-box-shadow: 0 0 inherit; + -o-box-shadow: 0 0 inherit; + -moz-box-shadow: inherit; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -webkit-box-shadow: inherit; + -o-box-shadow: inherit; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; +} + +.multi-wizard .buttons .button.cancel:hover { + color: #5e5e5e; +} + +.multi-wizard .buttons .button.previous { + margin-left: 27px; + background: #d6d6d6; + color: #62798e; +} + +.multi-wizard .buttons .button.previous:hover { + background: #c6c6c6; +} + +/** Instance wizard +** Select ISO*/ +.multi-wizard.instance-wizard .select-iso .select-container { + height: 260px; + margin: 0; + /*+border-radius:0 0 5px 5px;*/ + border-radius: 0 0 5px 5px; + -moz-border-radius: 0 0 5px 5px; + -webkit-border-radius: 0 0 5px 5px; + -khtml-border-radius: 0 0 5px 5px; +} + +/*** Data disk offering*/ +.multi-wizard.instance-wizard .content .section { + margin: 12px 0 15px 8px; + padding: 9px 0 16px; +} + +.multi-wizard.instance-wizard .content .section.no-thanks { + box-sizing: border-box; + width: 426px; +} + +.multi-wizard.instance-wizard .data-disk-offering .select-container, +.multi-wizard.instance-wizard .sshkeyPairs .select-container { + height: 300px; + margin: -7px 6px 0 8px; + /*+border-radius:6px;*/ + border-radius: 6px; + border-radius: 6px 6px 6px 6px; + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + -khtml-border-radius: 6px; +} + +.multi-wizard.instance-wizard .data-disk-offering .disk-select-group { + float: left; + width: 100%; + margin-top: 12px; +} + +.multi-wizard.instance-wizard .data-disk-offering .disk-select-header { + height: 17px; + /*+border-radius:4px;*/ + padding: 6px; + border-bottom: 1px solid #d4d4d4; + border-radius: 4px; + background: #c2c2c2 0 4px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.multi-wizard.instance-wizard .disk-select-group.selected .disk-select-header { + border-radius: 4px 4px 0 0; + /*+border-radius:4px 4px 0 0;*/ + background: #505050; + -moz-border-radius: 4px 4px 0 0; + -webkit-border-radius: 4px 4px 0 0; + -khtml-border-radius: 4px 4px 0 0; +} + +.multi-wizard.instance-wizard .data-disk-offering .disk-select-header input { + float: left; +} + +.multi-wizard.instance-wizard .data-disk-offering .disk-select-header .title { + float: left; + padding: 2px; + font-size: 14px; +} + +.multi-wizard.instance-wizard .disk-select-group.selected .disk-select-header .title { + color: #ffffff; + /*+text-shadow:0px -1px #000000;*/ + text-shadow: 0 -1px #000000; + -moz-text-shadow: 0 -1px #000000; + -webkit-text-shadow: 0 -1px #000000; + -o-text-shadow: 0 -1px #000000; +} + +.multi-wizard.instance-wizard .data-disk-offering .multi-disk-select-container { + max-height: 257px; + padding: 13px; + border: 1px solid #dddbdb; + background: #e4e4e4; + overflow: auto; +} + +.multi-wizard.instance-wizard .data-disk-offering .disk-select-group .select-container { + display: none; + float: left; + max-height: 114px; + margin: 0; + /*+border-radius:0;*/ + border: 0; + border-radius: 0; + -moz-border-radius: 0; + -webkit-border-radius: 0; + -khtml-border-radius: 0; +} + +.multi-wizard.instance-wizard .data-disk-offering .disk-select-group.selected .select-container { + display: block; +} + +.multi-wizard.instance-wizard .data-disk-offering .disk-select-group .select { + height: 0; + padding: 0 0 17px; +} + +.multi-wizard.instance-wizard .data-disk-offering .disk-select-group.custom-size .section.custom-size { + display: block !important; +} + +.multi-wizard.instance-wizard .data-disk-offering .disk-select-group .select input { + margin: 13px 12px 12px; +} + +.multi-wizard.instance-wizard .data-disk-offering .disk-select-group .select-desc { + margin: 13px 0 0; +} + +.multi-wizard.instance-wizard .data-disk-offering.required .select-container { + position: relative; + height: 344px; + margin-top: 9px !important; +} + +.multi-wizard.instance-wizard .custom-disk-size .select-container { + height: 279px; +} + +.multi-wizard.instance-wizard .custom-disk-size .select-container { + height: 213px; + margin: -7px 6px 0 8px; + /*+border-radius:6px;*/ + border-radius: 6px; + border-radius: 6px 6px 6px 6px; + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + -khtml-border-radius: 6px; +} + +.multi-wizard.instance-wizard .content .section input { + float: left; +} + +.multi-wizard.instance-wizard .content .section input[type='radio'] { + margin: 8px 2px 0 17px; +} + +.multi-wizard.instance-wizard .content .section label { + display: block; + float: left; + margin: 10px 7px 7px; +} + +.multi-wizard.instance-wizard .content .section .select-area label { + margin: 12px 0 0; +} + +.multi-wizard.instance-wizard .content .section label.size { + font-weight: bold; + color: #647a8e; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; +} + +.multi-wizard.instance-wizard .section.custom-size { + position: relative; + box-sizing: border-box; + width: 100%; + margin: 12px 0; + padding: 7px; + border-radius: 4px; + background: #f4f4f4; +} + +.multi-wizard.instance-wizard .section.custom-size.custom-disk-size { + width: 426px; + margin-left: 8px; +} + +.multi-wizard.instance-wizard .section.custom-iops { + position: relative; + padding: 7px; + border-radius: 4px; + background: #f4f4f4; +} + +.multi-wizard.instance-wizard .section.custom-iops-do { + position: relative; + box-sizing: border-box; + width: 426px; + padding: 7px; + border-radius: 4px; + background: #f4f4f4; +} + +.multi-wizard.instance-wizard .section.custom-size input[type='radio'] { + float: left; +} + +.multi-wizard.instance-wizard .section.custom-size input[type='text'] { + float: left; + width: 28px; + margin: 6px -1px 0 8px; +} + +.multi-wizard.instance-wizard .section.custom-iops input[type='text'] { + float: left; + width: 28px; + margin: 6px -1px 0 8px; +} + +.multi-wizard.instance-wizard .section.custom-iops-do input[type='text'] { + float: left; + width: 28px; + margin: 6px -1px 0 8px; +} + +.multi-wizard.instance-wizard .section.custom-size label.error { + position: absolute; + top: 29px; + left: 242px; + font-size: 10px; +} + +.instance-wizard .step.data-disk-offering.custom-disk-size .select-container { + height: 272px; +} + +.instance-wizard .step.data-disk-offering.custom-iops-do .select-container { + height: 240px; +} + +.instance-wizard .step.data-disk-offering.custom-disk-size.custom-iops-do .select-container { + height: 176px; +} + +.instance-wizard .step.data-disk-offering.required.custom-disk-size .select-container { + height: 315px; +} + +.instance-wizard .step.data-disk-offering.required.custom-iops-do .select-container { + height: 295px; +} + +.instance-wizard .step.data-disk-offering.required.custom-disk-size.custom-iops-do .select-container { + height: 223px; +} + +.instance-wizard .step.data-disk-offering .custom-iops-do { + display: none; +} + +.instance-wizard .step.data-disk-offering.custom-iops-do .custom-iops-do { + display: block; +} + +.instance-wizard .step.data-disk-offering .custom-iops-do .field { + float: left; + width: 30%; + margin-bottom: 5px; +} + +.instance-wizard .step.data-disk-offering .custom-iops-do .field label { + text-indent: 20px; +} + +.instance-wizard .step.data-disk-offering .custom-iops-do .field input { + width: 88%; + margin-left: 26px; +} + +/*** Compute offering*/ +.instance-wizard .step.service-offering.custom-size .select-container { + height: 235px; +} + +.instance-wizard .step.service-offering.custom-iops .select-container { + height: 235px; +} + +.instance-wizard .step.service-offering .custom-size { + display: none; +} + +.instance-wizard .step.service-offering .custom-iops { + display: none; +} + +.instance-wizard .step.service-offering.custom-size .custom-size { + display: block; +} + +.instance-wizard .step.service-offering.custom-iops .custom-iops { + display: block; +} + +.instance-wizard .step.service-offering .custom-size .field { + float: left; + width: 30%; + margin-bottom: 13px; +} + +.instance-wizard .step.service-offering .custom-iops .field { + float: left; + width: 30%; + margin-bottom: 13px; +} + +.instance-wizard .step.service-offering .custom-size .field label { + text-indent: 20px; +} + +.instance-wizard .step.service-offering .custom-iops .field label { + text-indent: 20px; +} + +.instance-wizard .step.service-offering .custom-size .field input { + width: 88%; + margin-left: 26px; +} + +.instance-wizard .step.service-offering .custom-size .field label.error { + position: relative; + top: 0; + left: 0; +} + +.instance-wizard .step.service-offering .custom-iops .field input { + width: 88%; + margin-left: 26px; +} + +/*** Network*/ +.multi-wizard.instance-wizard .no-network { + position: absolute; + z-index: $z-index-standard; + top: 98px; + left: 11px; + width: 773px; + height: 52px; + /*+border-radius:5px;*/ + padding: 162px 0 194px; + border-radius: 5px; + border-radius: 5px 5px 5px 5px; + background: #ffffff; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -khtml-border-radius: 5px; +} + +.multi-wizard.instance-wizard .no-network p { + font-size: 22px; + line-height: 25px; +} + +.multi-wizard.instance-wizard .select-network .select table { + float: left; + width: 405px; + margin: 4px 12px 0; +} + +.multi-wizard.instance-wizard .select-network .select table thead { + margin: 0; + padding: 0; +} + +.multi-wizard.instance-wizard .select-network .select table td { + vertical-align: top; + margin: 0; + padding: 0; +} + +.multi-wizard.instance-wizard .select-network .select table .select-container { + height: 223px; + margin: 0; + border: 0; +} + +.multi-wizard.instance-wizard .select-network.no-add-network .select table .select-container { + height: 282px; +} + +.multi-wizard.instance-wizard .select-network .select.new-network table .select-container { + height: 29px; + overflow: visible; +} + +.multi-wizard.instance-wizard .select-network .select.new-network table .select-container .select { + position: relative; + margin: -12px 0 0; + text-align: right; +} + +.multi-wizard.instance-wizard .select-network .select.new-network table .select-container .select select { + position: relative; + top: 0; + /*+placement:shift;*/ + left: 0; + width: 145px; + margin: 4px 0 0; +} + +.multi-wizard.instance-wizard .select-network .select.new-network { + margin: -17px 0 0; +} + +.multi-wizard.instance-wizard .select-network.no-add-network .select.new-network { + display: none !important; +} + +.multi-wizard.instance-wizard .select-network .main-desc { + float: left; + top: 12px; + left: 12px; + width: 252px; +} + +.multi-wizard.instance-wizard .select-network .select .secondary-input { + float: right; + width: 80px; + height: 48px; + border-left: 1px solid #d7d7d7; + font-size: 11px; + color: #000000; +} + +.multi-wizard.instance-wizard .select-network .select.advanced .secondary-input { + height: 73px; +} + +.multi-wizard.instance-wizard .select-network .select .secondary-input input { + position: relative; + top: 21px; + /*+placement:shift 9px 21px;*/ + left: 9px; + margin: 0 !important; + padding: 0 !important; +} + +.multi-wizard.instance-wizard .select-network .select .secondary-input .name { + position: relative; + /*+placement:shift -16px 22px;*/ + float: right; + top: 22px; + left: -16px; +} + +.multi-wizard.instance-wizard .select-network .select-container .select { + position: relative; + float: left; + width: 100%; + padding: 0; +} + +.multi-wizard.instance-wizard .select-network .select-container .select.advanced { + height: 74px; +} + +.multi-wizard.instance-wizard .select-network .select .advanced-options { + float: right; + width: 20px; + height: 20px; + margin-top: 15px; + margin-right: 13px; + background: url('../images/sprites.png') -7px -795px; + cursor: pointer; +} + +.multi-wizard.instance-wizard .select-network .select .advanced-options:hover, +.multi-wizard.instance-wizard .select-network .select.advanced .advanced-options { + background: url('../images/sprites.png') -32px -795px; +} + +.multi-wizard.instance-wizard .select-network .select .specify-ip { + display: none; + position: absolute; + top: 45px; + left: 0; + width: 100%; +} + +.multi-wizard.instance-wizard .select-network .select.advanced .specify-ip { + display: block; +} + +.multi-wizard.instance-wizard .select-network .select.advanced .specify-ip input { + width: 138px; + margin: 0 0 0 15px; +} + +.multi-wizard.instance-wizard .select-network .select-container .select input { + float: left; + margin: 21px 15px 0; +} + +.multi-wizard.instance-wizard .select-network .select-container .select label { + float: left; + margin: 4px 0 0 42px; + font-size: 11px; + color: #4e6b82; +} + +.multi-wizard.instance-wizard .select-network .select-vpc { + float: left; + margin: 7px 0 7px 7px; + padding: 3px; +} + +.multi-wizard.instance-wizard .select-network.no-add-network .select-vpc { + visibility: hidden !important; +} + +.multi-wizard.instance-wizard .select-network .select-vpc select { + width: 124px; +} + +.multi-wizard.instance-wizard .select-network .select-vpc label { + font-size: 10px; +} + +/**** New networ*/ +.multi-wizard.instance-wizard .select-network .select.new-network .advanced-options { + /*+placement:shift 379px 15px;*/ + position: relative; + position: absolute; + top: 15px; + left: 379px; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .select.advanced { + position: relative; + height: 106px; +} + +.multi-wizard.instance-wizard .select-network .select.new-network.unselected .select.advanced { + height: auto; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .select.advanced .specify-ip { + top: 74px; + left: 29px; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .hide-if-selected { + display: none; +} + +.multi-wizard.instance-wizard .select-network .select.new-network.unselected .hide-if-unselected { + display: none; +} + +.multi-wizard.instance-wizard .select-network .select.new-network.unselected .hide-if-selected { + display: block; +} + +.multi-wizard.instance-wizard .select-network .select.new-network input { + margin-top: 24px; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .field { + /*+placement:shift 41px 21px;*/ + position: relative; + position: absolute; + top: 21px; + left: 41px; + font-size: 11px; + color: #000000; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .field .name { + float: left; + width: 99px; + padding: 3px 0 0; + /*[empty]display:;*/ +} + +.multi-wizard.instance-wizard .select-network .select.new-network .field .value { + float: left; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .field .value input { + width: 138px; + margin: 0 0 0 11px; +} + +.multi-wizard.instance-wizard .select-network .select.new-network label.error { + display: none !important; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .secondary-input { + width: 97px; + padding: 13px 0 17px; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .secondary-input .name { + margin: 0 17px 0 0; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .select-desc { + width: 255px; +} + +.multi-wizard.instance-wizard .select-network .select-container .select .select-desc .desc { + float: left; + max-width: 113px; + font-size: 11px; + color: #808080; +} + +.multi-wizard.instance-wizard .select-network .select-container .select .select-desc .name { + float: left; + width: 116px; + margin: 0 16px 0 0; + font-size: 11px; + font-weight: normal; + color: #000000; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .select-desc .name { + width: 99px; + margin: 4px 0 0; +} + +.multi-wizard.instance-wizard .select-network .select.new-network.unselected .select-desc .name { + color: #808080; +} + +/*** Confirmation*/ +.multi-wizard .review .select-container .select { + height: 35px; + padding: 0; +} + +.multi-wizard .review .select-container .select .name { + float: left; + width: 127px; + margin: 13px 22px 0 14px; + font-size: 11px; +} + +.multi-wizard .review .select-container .select .value { + float: left; + width: 136px; + margin: 9px 21px 0; +} + +.multi-wizard .review .select-container .select .value span { + font-size: 10px; +} + +.multi-wizard .review .select-container .select .edit { + float: right; + height: 18px; + margin: 11px 20px 0 0; + padding: 0 0 0 20px; + background: url('../images/icons.png') -10px -452px; + cursor: pointer; +} + +.multi-wizard .review .select-container .select.odd .edit a { + background: #ebeff4; +} + +.multi-wizard .review .select-container .select .edit a { + padding: 5px 0 8px; + background: #ffffff; + font-size: 10px; + color: #0000ff; + text-decoration: none; +} + +.multi-wizard .review .select-container .select input, +.multi-wizard .review .select-container .select select { + float: left; + width: 151px; + margin: 0; +} + +/*** Diagram*/ +.multi-wizard.instance-wizard .diagram { + position: absolute; + top: 109px; + left: 465px; + width: 1px; + height: 502px; +} + +.multi-wizard.instance-wizard .diagram .part { + background: url('../images/instance-wizard-parts.png') no-repeat 0 0; +} + +.multi-wizard.instance-wizard .diagram .part.zone-plane { + position: absolute; + width: 354px; + height: 117px; + /*+placement:displace -38px 259px;*/ + margin-top: 259px; + background-position: -38px -55px; +} + +.multi-wizard.instance-wizard .diagram .part.computer-tower-front { + position: absolute; + width: 95px; + height: 254px; + /*+placement:displace 44px 92px;*/ + margin-top: 92px; + margin-left: 44px; + background-position: -54px -210px; +} + +.multi-wizard.instance-wizard .diagram .part.computer-tower-back { + position: absolute; + width: 194px; + height: 271px; + /*+placement:displace 138px 74px;*/ + margin-top: 74px; + margin-left: 138px; + background-position: -148px -192px; +} + +.multi-wizard.instance-wizard .diagram .part.os-drive { + position: absolute; + width: 194px; + height: 86px; + /*+placement:displace 138px 74px;*/ + margin-top: 74px; + margin-left: 138px; + background-position: -348px -192px; +} + +.multi-wizard.instance-wizard .diagram .part.cpu { + position: absolute; + width: 194px; + height: 49px; + /*+placement:displace 138px 156px;*/ + margin-top: 156px; + margin-left: 138px; + background-position: -344px -278px; +} + +.multi-wizard.instance-wizard .diagram .part.hd { + position: absolute; + width: 194px; + height: 44px; + /*+placement:displace 138px 208px;*/ + margin-top: 208px; + margin-left: 138px; + background-position: -344px -331px; +} + +.multi-wizard.instance-wizard .diagram .part.network-card { + position: absolute; + width: 194px; + height: 44px; + /*+placement:displace 138px 260px;*/ + margin-top: 260px; + margin-left: 138px; + background-position: -344px -380px; +} + +/** Add zone wizard*/ +.multi-wizard.zone-wizard { + display: block; + height: 675px; +} + +.multi-wizard.zone-wizard ul.subnav { + position: relative; + /*+placement:shift 30px 104px;*/ + position: absolute; + top: 104px; + left: 30px; + text-align: left; + list-style: disc inside; +} + +.multi-wizard.zone-wizard ul.subnav li { + float: left; + height: 20px; + margin-right: 34px; + padding: 0; + font-size: 12px; + white-space: nowrap; + color: #9a9a9a; + text-transform: uppercase; + list-style: none; +} + +.multi-wizard.zone-wizard ul.subnav li:after { + content: '>'; + position: relative; + /*+placement:shift 4px -1px;*/ + top: -1px; + left: 4px; + font-size: 13px; +} + +.multi-wizard.zone-wizard ul.subnav li.active { + color: #0000ff; +} + +.multi-wizard.zone-wizard .ui-tabs-panel { + height: 422px; + overflow: auto; + overflow-x: hidden; +} + +.multi-wizard.zone-wizard ul.ui-tabs-nav { + /*+placement:shift 0px 0px;*/ + position: relative; + float: left; + top: 0; + left: 0; + margin: 6px 0 3px 3px; +} + +.multi-wizard.zone-wizard .select-container { + height: 333px; + overflow: auto; +} + +.multi-wizard.zone-wizard .setup-guest-traffic .select-container { + background: #e9eaeb; + overflow: hidden; +} + +.multi-wizard.zone-wizard .setup-guest-traffic.basic .select-container { + background: #ffffff; +} + +.multi-wizard.zone-wizard .main-desc { + position: relative; + float: left; + /*+placement:shift 0;*/ + top: 0; + left: 0; + width: 516px; + margin: 23px 0 0 6px; + font-size: 14px; + font-weight: 100; + color: #424242; +} + +.multi-wizard.zone-wizard .review .main-desc.pre-setup { + position: relative; + top: 153px; + left: 0; + left: -10px; + width: 90%; + margin-left: 50px; + padding: 1px 0 1px 20px; + background: url('../images/icons.png') no-repeat 74px -224px; + /*+placement:shift 0px 153px;*/ + font-size: 18px; + font-weight: 100; + color: #2c4159; + text-align: center; + /*+text-shadow:0px 1px #FFFFFF;*/ + text-shadow: 0 1px #ffffff; + -moz-text-shadow: 0 1px #ffffff; + -webkit-text-shadow: 0 1px #ffffff; + -o-text-shadow: 0 1px #ffffff; +} + +.multi-wizard.zone-wizard .info-desc { + float: left; + width: 698px; + margin: 29px 0 68px 5px; + padding: 11px; + border: 1px solid #c7c7c7; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: #ffffff; + font-size: 11px; + text-align: left; + /*+border-radius:4px;*/ + overflow: auto; + overflow-x: hidden; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.multi-wizard.zone-wizard .setup-storage-traffic .info-desc { + margin-bottom: 10px; +} + +.multi-wizard.zone-wizard .setup-public-traffic .info-desc, +.multi-wizard.zone-wizard .setup-guest-traffic .info-desc, +.multi-wizard.zone-wizard .setup-physical-network .info-desc { + margin-bottom: 12px; +} + +.multi-wizard.zone-wizard .info-desc strong { + font-weight: bold; +} + +.multi-wizard.zone-wizard .main-desc em { + font-weight: bold; + text-decoration: underline; +} + +.multi-wizard.zone-wizard .progress ul li { + width: 107px; + margin-left: 7px; + padding: 0 32px 0 0; +} + +.multi-wizard.zone-wizard .progress ul li span { + width: 102px; +} + +.multi-wizard.zone-wizard .progress ul li span.arrow { + margin: -4px 0 0 109px; +} + +.multi-wizard.zone-wizard .select-network .content .section { + position: relative; + top: 14px; + /*+placement:shift 0px 14px;*/ + left: 0; + width: 665px; + height: 430px; +} + +.multi-wizard.zone-wizard .select-network .content { + float: none; + width: 100%; + height: 461px; + margin: 7px auto auto; + padding-bottom: 28px; +} + +.multi-wizard.zone-wizard .select-network-model .select-area { + position: relative; + width: 586px; + height: 181px; +} + +.multi-wizard.zone-wizard .select-network-model .select-area.basic-zone { + height: 105px; +} + +.multi-wizard.zone-wizard .select-network-model .select-area.advanced-zone { + height: 233px; +} + +.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode { + position: absolute; + float: left; + top: 114px; + left: 9px; + height: 98px; + margin: 5px 0 0; + overflow: hidden; +} + + + +.multi-wizard.zone-wizard .select-network-model .select-area.disabled .isolation-mode { + /*+opacity:50%;*/ + opacity: 0.5; + filter: alpha(opacity=50); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); + -moz-opacity: 0.5; +} + +.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .title { + position: relative; + top: 2px; + /*+placement:shift 36px 2px;*/ + left: 36px; + font-size: 15px; + color: #5d7387; +} + +.multi-wizard.zone-wizard .select-network-model .select-area .desc { + position: relative; + top: 12px; + left: -27px; + width: 373px; + height: 70px; + /*+placement:shift -27px 12px;*/ + padding: 12px 18px 25px; + border-radius: 7px; + border-radius: 7px 7px 7px 7px; + /*+border-radius:7px;*/ + background: #efefef; + line-height: 19px; + color: #727272; + -moz-border-radius: 7px; + -webkit-border-radius: 7px; + -khtml-border-radius: 7px; +} + +.multi-wizard.zone-wizard .select-network-model .select-area.basic-zone .desc { + padding-bottom: 4px; +} + +.multi-wizard.zone-wizard .select-network-model .select-area .desc em { + font-weight: bold; + text-decoration: underline; +} + +.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .select-area { + width: 586px; + height: 61px; + margin: 0; + padding: 0 0 9px; + background: none; + overflow: hidden; +} + +.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .select-area label { + margin: 24px 0 0 2px; + font-size: 11px; +} + +.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .select-area input { + margin: 26px 0 11px; +} + +.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .select-area input { + margin: 24px 8px 0 12px !important; + padding: 0 !important; +} + +.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .select-area .desc { + position: relative; + float: right; + top: 12px; + left: -27px; + width: 388px; + height: 29px; + margin-right: 9px; + /*+placement:shift -27px 12px;*/ + padding: 6px 7px 11px; + background: #efefef; + font-size: 11px; +} + +.multi-wizard.zone-wizard .content.input-area { + width: 721px; + min-height: inherit; + margin: -50px auto auto 4px; + overflow: auto; + overflow-x: hidden; +} + +/*** Add physical network -- network form items*/ +.multi-wizard.zone-wizard .setup-physical-network .content.input-area { + position: relative; + width: 627px; + height: 396px; + background: transparent; +} + +.multi-wizard.zone-wizard .setup-physical-network .drag-helper-icon { + position: relative; + position: absolute; + top: 303px; + /*+placement:shift 134px 303px;*/ + left: 134px; + width: 80px; + height: 84px; + background: url('../images/sprites.png') no-repeat 0 -1365px; +} + +.multi-wizard.zone-wizard .select-container.multi { + display: inline-block; + float: right; + width: 490px; + height: auto; + margin: 6px auto auto; + border: 1px solid #bfbfbf; + border-radius: 4px; + /*+border-radius:4px;*/ + border-radius: 4px 4px 4px 4px; + box-shadow: inset 0 1px 2px #cbcaca; + background: #f8f6f6; + overflow: visible; + -moz-border-radius: 4px; + /*+box-shadow:inset 0px 1px 2px #CBCACA;*/ + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + -moz-box-shadow: inset 0 1px 2px #cbcaca; + -webkit-box-shadow: inset 0 1px 2px #cbcaca; + -o-box-shadow: inset 0 1px 2px #cbcaca; + /*[empty]display:;*/ +} + +.multi-wizard.zone-wizard .select-container.multi.disabled { + opacity: 0.4; + /*+opacity:40%;*/ + border: 1px dotted #a7a7a7; + filter: alpha(opacity=40); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); + -moz-opacity: 0.4; +} + +.multi-wizard.zone-wizard .select-container.multi .physical-network-icon { + float: left; + width: 61px; + height: 53px; + border-right: 1px solid #cdcdcd; + background: url('../images/sprites.png') -109px -1393px; +} + +.multi-wizard.zone-wizard .select-container.multi input { + width: 195px !important; + margin: 2px 0 0 17px !important; +} + +.multi-wizard.zone-wizard .select-container.multi .field { + width: 425px; + height: 46px; + margin-top: -6px; +} + +.multi-wizard.zone-wizard .select-container.multi .field .name { + width: 93%; + margin-left: 17px; +} + +.multi-wizard.zone-wizard .select-container.multi .drop-container { + position: relative; + clear: both; + width: 484px; + height: 114px; + border: 3px dashed #bbbfc4; + /*+border-radius:4px;*/ + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: #dae2ec; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.multi-wizard.zone-wizard .select-container.multi .drop-container ul { + position: absolute; + /*+border-radius:5px;*/ + top: 4px; + left: 2px; + width: 99%; + height: 94%; + border-radius: 5px; + border-radius: 5px 5px 5px 5px; + background: #dae2ec; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -khtml-border-radius: 5px; +} + +.multi-wizard.zone-wizard .select-container.multi .drop-container ul.active { + background: #dfeaff; +} + +.multi-wizard.zone-wizard .select-container.multi .drop-container ul li { + float: left; + margin: 2px 17px 0 29px; +} + +.multi-wizard.zone-wizard .select-container.multi .drop-container span.empty-message { + position: relative; + top: 45px; + left: 0; + /*+placement:shift 0px 45px;*/ + font-size: 13px; + color: #959ba0; + text-align: center; +} + +/*** Add physical network -- traffic type drag area*/ +.multi-wizard.zone-wizard .traffic-types-drag-area { + position: relative; + float: left; + top: 0; + left: 3px; + /*+border-radius:4px;*/ + width: 96px; + height: 370px; + margin: 8px 0 0; + padding: 0; + border: 1px solid #dccaca; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: #f0f1f2; + text-align: left; + /*+placement:shift 3px 0px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area .header { + margin: 0; + padding: 8px 0 7px; + border-bottom: 1px solid #dccaca; + border-radius: 4px 4px 0 0; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + background: #f8f8f8; + font-size: 13px; + font-weight: bold; + color: #5c5c5c; + text-align: center; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + /*+border-radius:4px 4px 0 0;*/ + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; + -moz-border-radius: 4px 4px 0 0; + -webkit-border-radius: 4px 4px 0 0; + -khtml-border-radius: 4px 4px 0 0; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area > ul { + width: 100%; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li { + float: left; + width: 100%; + height: 83px; + margin: 16px 13px 0 0; + background: transparent; + font-size: 11px; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li.required { + display: none; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li.required.clone { + display: block; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li ul.container { + width: 60px; + height: 54px; + margin-left: 16px; + border-bottom: 1px solid #ffffff; + /*+border-radius:5px;*/ + border-radius: 5px; + border-radius: 5px 5px 5px 5px; + box-shadow: inset 0 2px 4px #999696; + background: #e4e4e4; + -moz-border-radius: 5px; + /*+box-shadow:inset 0px 2px 4px #999696;*/ + -webkit-border-radius: 5px; + -khtml-border-radius: 5px; + -moz-box-shadow: inset 0 2px 4px #999696; + -webkit-box-shadow: inset 0 2px 4px #999696; + -o-box-shadow: inset 0 2px 4px #999696; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li ul.container li { + /*+placement:shift 1px 2px;*/ + position: relative; + top: 2px; + left: 1px; +} + +.multi-wizard.zone-wizard li.traffic-type-draggable { + display: block; + z-index: $z-index-multi-wizard2; + width: 51px; + height: 51px; + margin: auto; + background: transparent url('../images/sprites.png') no-repeat 0 -1161px; + cursor: move; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area li.traffic-type-draggable:hover, +.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable:hover { + width: 69px !important; + height: 66px !important; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area li.traffic-type-draggable:hover, +.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable:hover { + /*+placement:shift -2px -4px;*/ + position: relative; + top: -4px; + left: -2px; +} + +.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable:hover { + /*+placement:shift -8px -6px;*/ + position: relative; + top: -6px; + left: -8px; + width: 70px !important; + margin-right: 0; +} + +.multi-wizard.zone-wizard li.traffic-type-draggable.disabled { + /*+opacity:50%;*/ + opacity: 0.5; + cursor: not-allowed; + filter: alpha(opacity=50); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); + -moz-opacity: 0.5; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area ul > li.disabled { + display: none; +} + +.multi-wizard.zone-wizard li.traffic-type-draggable.disabled { + /*+opacity:50%;*/ + opacity: 0.5; + cursor: not-allowed; + filter: alpha(opacity=50); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); + -moz-opacity: 0.5; +} + +.multi-wizard.zone-wizard li.traffic-type-draggable.management { + height: 52px; + background-position: 0 -1161px; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area li.traffic-type-draggable.management:hover, +.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable.management:hover { + background-position: -11px -1225px; +} + +.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable.management:hover { + margin-right: -1px; +} + +.multi-wizard.zone-wizard li.traffic-type-draggable.public { + width: 53px; + height: 53px; + background-position: -54px -1160px; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area li.traffic-type-draggable.public:hover, +.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable.public:hover { + background-position: -87px -1225px; +} + +.multi-wizard.zone-wizard li.traffic-type-draggable.guest { + background-position: -113px -1161px; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area li.traffic-type-draggable.guest:hover, +.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable.guest:hover { + background-position: -166px -1227px; +} + +.multi-wizard.zone-wizard li.traffic-type-draggable.storage { + background-position: -170px -1160px; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area li.traffic-type-draggable.storage:hover, +.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable.storage:hover { + background-position: -244px -1224px; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li .info { + float: left; + width: 100%; + margin: 5px 0 0 -2px; + line-height: 14px; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li .info .title { + font-weight: bold; + color: #787879; + text-align: center; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li .info .desc { + display: none; +} + +/*** Traffic type icon -- edit button*/ +.multi-wizard.zone-wizard .traffic-type-draggable .edit-traffic-type { + display: none; +} + +.multi-wizard.zone-wizard .drop-container .traffic-type-draggable > .edit-traffic-type { + display: block; + position: relative; + top: 70px; + left: -16px; + width: 59px; + height: 23px; + padding: 2px 9px 0 12px; + /*+border-radius:4px;*/ + border: 1px solid #c4c4c4; + border-top: 1px solid #ffffff; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: url('../images/bg-gradients.png') 0 -1342px; + cursor: pointer; + /*+placement:shift -16px 70px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.multi-wizard.zone-wizard .drop-container .traffic-type-draggable > .edit-traffic-type:hover { + box-shadow: inset 0 -1px 1px #727272; + background-position: 0 -105px; + /*+box-shadow:inset 0px -1px 1px #727272;*/ + color: #ffffff; + -moz-box-shadow: inset 0 -1px 1px #727272; + -webkit-box-shadow: inset 0 -1px 1px #727272; + -o-box-shadow: inset 0 -1px 1px #727272; +} + +.multi-wizard.zone-wizard .drop-container .traffic-type-draggable > .edit-traffic-type:hover span { + color: #ffffff; + /*+text-shadow:0px 1px 1px #000000;*/ + text-shadow: 0 1px 1px #000000; + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; +} + +.multi-wizard.zone-wizard .drop-container .traffic-type-draggable:hover > .edit-traffic-type { + /*+placement:shift -7px 76px;*/ + position: relative; + top: 76px; + left: -7px; +} + +.multi-wizard.zone-wizard .drop-container .traffic-type-draggable .edit-traffic-type span { + font-size: 11px; + font-weight: bold; + color: #4e73a6; + text-align: center; + /*+text-shadow:0px 1px #FFFFFF;*/ + text-shadow: 0 1px #ffffff; + -moz-text-shadow: 0 1px #ffffff; + -webkit-text-shadow: 0 1px #ffffff; + -o-text-shadow: 0 1px #ffffff; +} + +.multi-wizard.zone-wizard .drop-container .traffic-type-draggable .edit-traffic-type span.icon { + float: left; + padding: 7px 11px 0 7px; + background: url('../images/sprites.png') -7px -4px; +} + +.multi-wizard.zone-wizard .traffic-type-draggable .edit-traffic-type span.name { + position: relative; + float: left; + top: -16px; + left: -13px; + width: 76px; + margin-bottom: -13px; + /*+border-radius:4px 4px 0 0;*/ + padding: 2px; + border: 1px solid #c3bcbc; + border-bottom: 1px solid #d1cdcd; + border-radius: 4px 4px 0 0; + /*+placement:shift -13px -16px;*/ + box-shadow: inset 0 1px 1px #f5f4f4; + background: #dbe1e9; + font-size: 10px; + color: #4e5f6f; + -moz-border-radius: 4px 4px 0 0; + -webkit-border-radius: 4px 4px 0 0; + /*+box-shadow:inset 0px 1px 1px #F5F4F4;*/ + -khtml-border-radius: 4px 4px 0 0; + -moz-box-shadow: inset 0 1px 1px #f5f4f4; + -webkit-box-shadow: inset 0 1px 1px #f5f4f4; + -o-box-shadow: inset 0 1px 1px #f5f4f4; +} + +.multi-wizard.zone-wizard .traffic-type-draggable .edit-traffic-type:hover span.name { + background: #c4c3c3; +} + +/*** Configure guest network -- tabs*/ +.multi-wizard.zone-wizard .setup-guest-traffic .ui-widget-content { + position: relative; + top: -7px; + left: -1px; + width: 682px; + /*+placement:shift -1px -7px;*/ + height: 281px; + border-right: 0; + border-bottom: 0; +} + +.multi-wizard.zone-wizard .setup-guest-traffic ul.ui-tabs-nav { + position: relative; + /*+placement:shift -4px -8px;*/ + top: -8px; + left: -4px; + width: 456px; +} + +.multi-wizard.zone-wizard .setup-guest-traffic .main-desc { + margin-top: 27px; + margin-left: -3px; +} + +.multi-wizard.zone-wizard .setup-guest-traffic .content { + margin-top: 2px; + margin-left: -4px; +} + +/*** Multi-edit*/ +.multi-wizard.zone-wizard .multi-edit { + float: left; + width: 732px; + margin-left: 0; +} + +.multi-wizard.zone-wizard .multi-edit table { + float: left; + width: 98%; +} + +.multi-wizard.zone-wizard .multi-edit table td, +.multi-wizard.zone-wizard .multi-edit table th { + padding: 4px; +} + +.multi-wizard.zone-wizard .multi-edit table th { + padding-top: 11px; + padding-bottom: 8px; +} + +.multi-wizard.zone-wizard .multi-edit table input { + margin: 2px 0 2px -5px; + padding: 2px 0; +} + +.multi-wizard.zone-wizard .multi-edit .data { + float: left; + overflow: visible; +} + +.multi-wizard.zone-wizard .multi-edit .data-body { + margin: 0; +} + +.multi-wizard.zone-wizard .multi-edit .data-body .data-item { + float: left; +} + +.multi-wizard.zone-wizard .multi-edit .data-body .data-item td { + padding-top: 8px; + padding-bottom: 8px; +} + +.multi-wizard.zone-wizard .multi-edit .data-body .data-item td span { + max-width: 91px; + font-size: 10px; + text-overflow: ellipsis; +} + +/*** Select container fields*/ +.multi-wizard.zone-wizard .select-container .field { + float: left; + width: 100%; + padding-bottom: 13px; +} + +.multi-wizard.zone-wizard .select-container .field.odd { + background: #ebeff5; +} + +.multi-wizard.zone-wizard .select-container .field .name { + float: left; + width: 95px; + margin: 18px 0 0 12px; + font-size: 11px; + line-height: 13px; + text-align: left; +} + +.multi-wizard.zone-wizard .select-container .field .value { + position: relative; + float: left; +} + +.multi-wizard.zone-wizard .select-container .field .value span { + display: block; + margin: 20px 0 0; + font-size: 11px; + color: #052060; +} + +.multi-wizard.zone-wizard .select-container .field .value label.error { + display: block; + position: absolute; + position: relative; + position: absolute; + float: right; + top: 31px; + left: 1px; + /*+placement:shift 1px 31px;*/ + margin: 2px 0 0 16px; + font-size: 10px; + color: #ff0000; + text-align: left; +} + +.multi-wizard.zone-wizard .select-container .field .value input, +.multi-wizard.zone-wizard .select-container .field .value select { + float: left; + width: 316px; + height: 20px; + margin: 13px 13px 0 18px; +} + +.multi-wizard.zone-wizard .select-container .field .range-edit .range-item { + float: left; + width: 106px; +} + +.multi-wizard.zone-wizard .select-container .field .range-edit .range-item input[type='text'] { + width: 93px; + margin: 16px 0 0 17px; +} + +.multi-wizard.zone-wizard .select-container .field .value select { + width: 327px; + height: 21px; +} + +.multi-wizard.zone-wizard .select-container .field .value input[type='checkbox'] { + display: block; + float: left; + width: 13px; +} + +.multi-wizard.zone-wizard .select-container .field .value.multi-range input { + float: left; + width: 137px; +} + +.multi-wizard.zone-wizard .select-container .field .value.multi-range span { + float: left; + margin: 13px 0 0; +} + +.multi-wizard.zone-wizard .select-container .field .select-array { + display: inline-block; + width: 360px; +} + +/*[clearfix]*/ +.multi-wizard.zone-wizard .select-container .field .select-array-item { + float: left; + width: 175px; + height: 34px; +} + +div.toolbar, +.multi-wizard.zone-wizard .select-container .field .select-array-item { + display: block; + height: 1px; +} + +div.toolbar:after, +.multi-wizard.zone-wizard .select-container .field .select-array-item:after { + visibility: hidden; + content: '.'; + display: block; + clear: both; + height: 0; + font-size: 0; +} + +.multi-wizard.zone-wizard .select-container .field .select-array-item .name { + float: right; + width: 127px; + margin: 11px 0 0; + padding: 0; +} + +.multi-wizard.zone-wizard .select-container .field .select-array-item .value { + float: right; + width: 41px; + margin: 0; + padding: 0; +} + +.multi-wizard.zone-wizard .select-container .field .select-array-item .value input { + width: inherit; + margin: 12px 0 0 11px; +} + +.multi-wizard.zone-wizard .setup-physical-network .button.add.new-physical-network { + visibility: hidden; + float: right; + margin: 14px 6px 0 0; + padding: 6px 20px 6px 11px; + border: 1px solid #ada7a7; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + /*+border-radius:4px;*/ + background: #808080 url('../images/bg-gradients.png') 0 -264px; + font-size: 12px; + color: #475765; + text-shadow: 0 1px 1px #ffffff; + cursor: pointer; + -moz-border-radius: 4px; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; +} + +.multi-wizard.zone-wizard .setup-physical-network .button.remove.physical-network { + position: relative; + float: right; + top: 27px; + margin: -26px 0 0; + padding: 10px 10px 0; + background: url('../images/sprites.png') -6px -93px; + cursor: pointer; +} + +.multi-wizard.zone-wizard .setup-physical-network .select-container.disabled .button.remove.physical-network { + display: none; +} + +.multi-wizard.zone-wizard .setup-physical-network .button.remove.physical-network:hover { + background-position: -6px -675px; +} + +.multi-wizard.zone-wizard .setup-physical-network .button.add.new-physical-network:hover { + background-position: 0 -349px; + color: #000000; + /*+text-shadow:0px 1px 2px #FFFFFF;*/ + text-shadow: 0 1px 2px #ffffff; + -moz-text-shadow: 0 1px 2px #ffffff; + -webkit-text-shadow: 0 1px 2px #ffffff; + -o-text-shadow: 0 1px 2px #ffffff; +} + +.multi-wizard.zone-wizard .setup-physical-network .button.add.new-physical-network .icon { + padding: 10px; + background: url('../images/sprites.png') -44px -58px; +} + +/*** Review / launch*/ +.multi-wizard.zone-wizard .review .launch-container { + float: left; + width: 98%; + max-height: 438px; + margin: 11px 0 0 7px; + border: 1px solid #cacaca; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + background: #ececec 0 -12px; + background: #f7f7f7; + background: -moz-linear-gradient(top, #f7f7f7 0%, #eaeaea 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #eaeaea)); + background: -webkit-linear-gradient(top, #f7f7f7 0%, #eaeaea 100%); + background: -o-linear-gradient(top, #f7f7f7 0%, #eaeaea 100%); + background: -ms-linear-gradient(top, #f7f7f7 0%, #eaeaea 100%); + background: linear-gradient(to bottom, #f7f7f7 0%, #eaeaea 100%); + /*+border-radius:4px;*/ + overflow: auto; + overflow-x: hidden; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#eaeaea', GradientType=0); + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.multi-wizard.zone-wizard .review .launch-container li { + width: 100%; + padding: 15px 0 15px 12px; + font-size: 12px; + font-weight: bold; + text-align: left; +} + +.multi-wizard.zone-wizard .review .launch-container li .icon { + /*[empty]display:;*/ + padding: 10px 21px 10px 10px; + background: url('../images/icons.png') -2px -217px; +} + +.multi-wizard.zone-wizard .review .launch-container li.loading .icon { + background: url('../images/ajax-loader-small.gif') no-repeat 2px 9px; +} + +.multi-wizard.zone-wizard .review .launch-container li.error .icon { + background-position: -2px -185px; +} + +.multi-wizard.zone-wizard .review .launch-container li.info .icon { + display: none; +} diff --git a/ui/css/src/scss/components/navigation.scss b/ui/css/src/scss/components/navigation.scss new file mode 100644 index 00000000000..c17a610554a --- /dev/null +++ b/ui/css/src/scss/components/navigation.scss @@ -0,0 +1,333 @@ +// 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. + +#navigation { + position: relative; + float: left; + width: 230px; + /*+box-shadow:inset -1px 4px 7px #DDDDDD;*/ + box-shadow: inset -1px 4px 7px #dddddd; + background: #ede8e8; + background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYlIiBzdG9wLWNvbG9yPSIjZWRlOGU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg=='); + background: -moz-linear-gradient(top, #ffffff 0%, #ede8e8 6%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(6%, #ede8e8)); + background: -webkit-linear-gradient(top, #ffffff 0%, #ede8e8 6%); + background: -o-linear-gradient(top, #ffffff 0%, #ede8e8 6%); + background: -ms-linear-gradient(top, #ffffff 0%, #ede8e8 6%); + background: linear-gradient(to bottom, #ffffff 0%, #ede8e8 6%); + -moz-box-shadow: inset -1px 4px 7px #dddddd; + -webkit-box-shadow: inset -1px 4px 7px #dddddd; + -o-box-shadow: inset -1px 4px 7px #dddddd; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ede8e8', GradientType=0); +} + +.project-view #navigation { + background: #6d747d; +} + +#navigation ul { + height: 700px; + padding-top: 29px; +} + +.project-view #navigation ul { + border-right: 1px solid #464c53; + background: #6d747d; +} + +#navigation ul li { + height: 42px; + border-bottom: 1px solid #d2d2d2; + cursor: pointer; +} + +.project-view #navigation ul li { + border: 0; + background-image: url('../images/bg-nav-item-project-view.png'); + background-position: 0 0; +} + +.project-view #navigation ul li span { + color: #ffffff; + /*+text-shadow:0px 1px 1px #000000;*/ + text-shadow: 0 1px 1px #000000; + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; +} + +#navigation ul li:hover, +#navigation ul li.active { + width: 230px; + box-shadow: inset 0 0 7px #000000; + /*+box-shadow:inset 0px 0px 7px #000000;*/ + background: #2c5d7b; + -moz-box-shadow: inset 0 0 7px #000000; + -webkit-box-shadow: inset 0 0 7px #000000; + -o-box-shadow: inset 0 0 7px #000000; +} + +#navigation ul li.disabled { + /*+opacity:60%;*/ + opacity: 0.6; + filter: alpha(opacity=60); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); + -moz-opacity: 0.6; +} + +.project-view #navigation ul li:hover, +.project-view #navigation ul li.active { + width: 230px; + background: url('../images/bg-nav-item-active-project-view.png'); + background-position: 0 0; +} + +.project-view #navigation ul li.disabled:hover { + background: #d5d5d5; + color: #596d7f; + cursor: default; +} + +#navigation ul li:hover span, +#navigation ul li.active span { + color: #ffffff; + /*+text-shadow:0px 1px #000000;*/ + text-shadow: 0 1px #000000; + -moz-text-shadow: 0 1px #000000; + -webkit-text-shadow: 0 1px #000000; + -o-text-shadow: 0 1px #000000; +} + +#navigation ul li.disabled:hover { + cursor: not-allowed !important; +} + +#navigation ul li.disabled:hover span { + color: #596d7f; + /*+text-shadow:0px 0px;*/ + text-shadow: 0 0; + -moz-text-shadow: 0 0; + -webkit-text-shadow: 0 0; + -o-text-shadow: 0 0; + -moz-text-shadow: 0 0 none; + -webkit-text-shadow: 0 0 none; + -o-text-shadow: 0 0 none; + -moz-text-shadow: none; + -webkit-text-shadow: none; + -o-text-shadow: none; +} + +#navigation ul li.last { + background-repeat: repeat; + background-position: 0 0; + /*[empty]color:;*/ +} + +#navigation ul li span { + /*+placement:shift 14px 13px;*/ + position: relative; + top: 13px; + left: 14px; + padding-left: 19px; + font-size: 12px; + color: #515151; + /*+text-shadow:0px 1px #FFFFFF;*/ + text-shadow: 0 1px #ffffff; + -moz-text-shadow: 0 1px #ffffff; + -webkit-text-shadow: 0 1px #ffffff; + -o-text-shadow: 0 1px #ffffff; +} + +#navigation ul li span.icon { + position: relative; + top: 10px; + /*+placement:shift 17px 10px;*/ + left: 17px; + padding: 16px 16px 13px; + background: url('../images/icons.png') no-repeat 0 0; +} + +#navigation ul li.custom-icon span.icon { + display: block; + position: relative; + float: left; + width: 50px; + height: 50px; + margin-right: -47px; + background: none; +} + +#navigation ul li.custom-icon span.icon img { + position: relative; + position: absolute; + float: left; + /*+placement:shift -6px -17px;*/ + top: -17px; + left: -6px; + width: 50px; + height: 50px; + margin-right: -14px; +} + +/*Navigation icons*/ +#navigation ul li.dashboard span.icon, +#navigation ul li.dashboard-user span.icon { + background-position: -14px -18px; +} + +#navigation ul li.dashboard:hover span.icon, +#navigation ul li.dashboard-user:hover span.icon span.icon, +#navigation ul li.dashboard.active span.icon, +#navigation ul li.dashboard-user.active span.icon span.icon { + background-position: -23px -687px; +} + +#navigation ul li.instances span.icon { + background-position: -73px -18px; +} + +#navigation ul li.instances.active span.icon, +#navigation ul li.instances:hover span.icon { + background-position: -82px -686px; +} + +#navigation ul li.vmsnapshots span.icon { + background: url('../images/sprites.png') no-repeat -34px -666px; +} + +#navigation ul li.affinityGroups span.icon { + background-position: -73px -87px; +} + +#navigation ul li.affinityGroups.active span.icon, +#navigation ul li.affinityGroups:hover span.icon { + background-position: -82px -755px; +} + +#navigation ul li.storage span.icon { + background-position: -127px -19px; +} + +#navigation ul li.storage.active span.icon, +#navigation ul li.storage:hover span.icon { + background-position: -137px -687px; +} + +#navigation ul li.network span.icon { + background-position: -180px -20px; +} + +#navigation ul li.network.active span.icon, +#navigation ul li.network:hover span.icon { + background-position: -189px -690px; +} + +#navigation ul li.templates span.icon { + background-position: -233px -21px; +} + +#navigation ul li.templates.active span.icon, +#navigation ul li.templates:hover span.icon { + background-position: -242px -690px; +} + +#navigation ul li.projects span.icon { + background-position: -294px -21px; +} + +#navigation ul li.projects.active span.icon, +#navigation ul li.projects:hover span.icon { + background-position: -303px -690px; +} + +#navigation ul li.events span.icon { + background-position: -351px -23px; +} + +#navigation ul li.events.active span.icon, +#navigation ul li.events:hover span.icon { + background-position: -359px -692px; +} + +#navigation ul li.configuration span.icon { + background-position: -401px -21px; +} + +#navigation ul li.configuration.active span.icon, +#navigation ul li.configuration:hover span.icon { + background-position: -410px -690px; +} + +#navigation ul li.global-settings span.icon { + background-image: url('../images/sprites.png'); + background-position: -143px -240px; +} + +#navigation ul li.global-settings.active span.icon, +#navigation ul li.global-settings:hover span.icon { + background-image: url('../images/sprites.png'); + background-position: -366px -239px; +} + +#navigation ul li.roles span.icon { + background-position: -460px -80px; +} + +#navigation ul li.roles.active span.icon, +#navigation ul li.roles:hover span.icon { + background-position: -469px -750px; +} + +#navigation ul li.accounts span.icon { + background-position: -458px -19px; +} + +#navigation ul li.accounts.active span.icon, +#navigation ul li.accounts:hover span.icon { + background-position: -467px -688px; +} + +#navigation ul li.system span.icon { + background-position: -569px -24px; +} + +#navigation ul li.system.active span.icon, +#navigation ul li.system:hover span.icon { + background-position: -578px -692px; +} + +#navigation ul li.domains span.icon { + background-position: -520px -21px; +} + +#navigation ul li.domains.active span.icon, +#navigation ul li.domains:hover span.icon { + background-position: -529px -690px; +} + +#navigation ul li.plugins span.icon { + background: url('../images/sprites.png') no-repeat -140px -291px; +} + +#navigation ul li.regions span.icon { + background: url('../images/sprites.png') no-repeat -141px -379px; +} + +#navigation ul li.regions.active span.icon, +#navigation ul li.regions:hover span.icon { + background: url('../images/sprites.png') no-repeat -365px -377px; +} diff --git a/ui/css/src/scss/components/network-chart.scss b/ui/css/src/scss/components/network-chart.scss new file mode 100644 index 00000000000..8ef7ee64d5b --- /dev/null +++ b/ui/css/src/scss/components/network-chart.scss @@ -0,0 +1,192 @@ +// 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. + +.network-chart { + position: relative; + width: 100%; + height: 100%; + background: url('../images/bg-network.png') no-repeat 38% 70px; +} + +.network-chart.static-nat { + background: url('../images/bg-network-nat.png') no-repeat 31% 62px; +} + +.network-chart ul { + position: absolute; + top: 0; + left: 0; + width: 536px; + height: 421px; +} + +.network-chart li { + display: block; + width: 147px; + height: 86px; + background: url('../images/buttons.png') no-repeat 0 -399px; +} + +.network-chart li.static-nat-enabled { + /*+placement:shift 31px 44px;*/ + position: relative; + top: 44px; + left: 31px; +} + +.network-chart li.static-nat-enabled .vmname { + /*+placement:shift 16px 41px;*/ + position: relative; + position: absolute; + top: 41px; + left: 16px; + max-width: 98px; + max-height: 21px; + padding: 7px; + border-radius: 9px; + border-radius: 9px 9px 9px 9px; + background: url('../images/bg-gradients.png') repeat-x 2px -221px; + font-size: 10px; + font-weight: bold; + /*+text-shadow:0px 1px 1px #000000;*/ + color: #485563; + color: #ffffff; + text-shadow: 0 1px 1px #000000; + cursor: pointer; + overflow: hidden; + -moz-text-shadow: 0 1px 1px #000000; + /*+border-radius:9px;*/ + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; + -moz-border-radius: 9px; + -webkit-border-radius: 9px; + -khtml-border-radius: 9px; +} + +.network-chart li.static-nat-enabled .vmname:hover { + background-position: 0 -946px; +} + +.network-chart li.static-nat-enabled .name { + background: url('../images/sprites.png') no-repeat -6px -460px; +} + +.network-chart li.static-nat-enabled .name span { + padding: 0 0 0 25px; + font-size: 11px; +} + +.network-chart li.disabled { + /*+opacity:100%;*/ + opacity: 1; + filter: alpha(opacity=100); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + -moz-opacity: 1; +} + +.network-chart li.firewall { + /*+placement:shift 282px 188px;*/ + position: relative; + position: absolute; + top: 188px; + left: 356px; +} + +.network-chart li.loadBalancing { + /*+placement:shift 167px 342px;*/ + position: relative; + position: absolute; + top: 342px; + left: 237px; +} + +.network-chart li.portForwarding { + /*+placement:shift 401px 342px;*/ + position: relative; + position: absolute; + top: 342px; + left: 480px; +} + +.network-chart li .name { + position: relative; + top: 11px; + /*+text-shadow:0px 1px 1px #FCFCFC;*/ + left: 10px; + width: 130px; + color: #4e5f6f; + text-shadow: 0 1px 1px #fcfcfc; + /*+placement:shift 10px 11px;*/ + -moz-text-shadow: 0 1px 1px #fcfcfc; + -webkit-text-shadow: 0 1px 1px #fcfcfc; + -o-text-shadow: 0 1px 1px #fcfcfc; +} + +.network-chart li.disabled .name { + position: relative; + /*+placement:shift 5px 32px;*/ + top: 32px; + left: 5px; + color: #8695a5; + text-align: center; + text-decoration: line-through; +} + +.network-chart li .view-details { + /*+placement:anchor-bottom-right 34px 19px;*/ + position: absolute; + right: 34px; + bottom: 19px; + padding: 8px 20px; + border: 1px solid #a2a2a2; + border-radius: 4px; + background: #f7f7f7; + background: rgb(247, 247, 247); + background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYWVhZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+'); + background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(234, 234, 234, 1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(247, 247, 247, 1)), color-stop(100%, rgba(234, 234, 234, 1))); + background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(234, 234, 234, 1) 100%); + background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(234, 234, 234, 1) 100%); + background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(234, 234, 234, 1) 100%); + background: linear-gradient(to bottom, rgba(247, 247, 247, 1) 1%, rgba(234, 234, 234, 1) 100%); + font-size: 11px; + color: #000000; + cursor: pointer; + /*+border-radius:4px;*/ + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#eaeaea', GradientType=0); + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.network-chart li .view-details:hover { + box-shadow: inset 0 0 4px #000000; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + background: #d5d5d5; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + /*+box-shadow:inset 0px 0px 4px #000000;*/ + -o-text-shadow: 0 1px 1px #ffffff; + -moz-box-shadow: inset 0 0 4px #000000; + -webkit-box-shadow: inset 0 0 4px #000000; + -o-box-shadow: inset 0 0 4px #000000; +} + +.network-chart li.disabled .view-details { + display: none; +} diff --git a/ui/css/src/scss/components/new-project.scss b/ui/css/src/scss/components/new-project.scss new file mode 100644 index 00000000000..095811c6bd1 --- /dev/null +++ b/ui/css/src/scss/components/new-project.scss @@ -0,0 +1,370 @@ +// 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. + +.new-project { + display: inline-block; + margin: 0 0 20px 30px; +} + +.new-project form { + margin: 0; +} + +.ui-dialog .new-project { + text-align: left; +} + +.ui-dialog .new-project .add-by { + margin-left: 11px; + font-size: 12px; + color: #5e6d7d; +} + +.ui-dialog .new-project .add-by input { + margin-right: 8px; +} + +.ui-dialog .new-project .add-by label { + margin-right: 12px; +} + +.new-project .title { + margin: 10px 0 32px; + font-size: 26px; + /*+text-shadow:0px 1px 2px #D6D6D6;*/ + letter-spacing: 0; + color: #3497e6; + text-shadow: 0 1px 2px #d6d6d6; + -moz-text-shadow: 0 1px 2px #d6d6d6; + -webkit-text-shadow: 0 1px 2px #d6d6d6; + -o-text-shadow: 0 1px 2px #d6d6d6; +} + +.new-project .field { + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + display: inline-block; + width: 686px; + margin: -2px 0 -4px auto; + background: #dfdfdf; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; +} + +#new-project-review-tabs-resouces { + height: 225px; + background: #d2d2d2; +} + +.new-project .resources .ui-widget-content { + background: #ffffff; +} + +.new-project .resources .field { + height: 39px; + padding: 0; +} + +.new-project .field span.value { + position: relative; + /*+placement:shift 21px 20px;*/ + top: 20px; + left: 21px; + color: #475765; +} + +.new-project .field label { + display: block; + float: left; + width: 104px; + height: 59px; + padding: 20px 24px 0 0; + background: #d2d2d2; + color: #5b5b5b; + text-align: right; +} + +.new-project .resources .field label { + height: auto; + padding: 10px 14px 14px 40px; + font-size: 14px; +} + +.new-project .field label.error { + position: absolute; + width: auto; + /*+placement:displace 154px 29px;*/ + height: auto; + margin-top: 29px; + margin-left: 154px; + background: transparent; + font-size: 9px; + color: #ff0000; +} + +.new-project .field input[type='text'] { + float: right; + /*+border-radius:5px;*/ + width: 506px; + height: 20px; + margin: 17px 25px 0 0; + border: 1px solid #e2e1df; + border: 1px solid #c7c7c7; + border-radius: 5px; + border-radius: 5px 5px 5px 5px; + /*+box-shadow:inset 0px 1px #A1A1A1;*/ + box-shadow: inset 0 1px #a1a1a1; + background: #ffffff 0 7px; + font-size: 14px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -khtml-border-radius: 5px; + -moz-box-shadow: inset 0 1px #a1a1a1; + -webkit-box-shadow: inset 0 1px #a1a1a1; + -o-box-shadow: inset 0 1px #a1a1a1; + -moz-box-shadow: inset 0 1px 0 #a1a1a1; + -webkit-box-shadow: inset 0 1px 0 #a1a1a1; + -o-box-shadow: inset 0 1px 0 #a1a1a1; +} + +.new-project .resources .field input[type='text'] { + margin: 6px 9px 0 0; +} + +.new-project .button.cancel { + position: relative; + float: left; + top: 9px; + left: 488px; + left: 480px; + margin: 19px 0 0 40px; + background: transparent; + /*+placement:shift 488px 9px;*/ + font-size: 12px; + font-weight: bold; + color: #808080; + color: #838181; + cursor: pointer; +} + +.new-project .button.cancel:hover { + color: #3a3a3a; +} + +.new-project input[type='submit'], +.new-project .button.confirm { + display: inline-block; + position: relative; + float: right; + /*+placement:float-right 63px 18px;*/ + top: 18px; + left: 63px; + height: 31px; + margin: 0 63px 0 0; + border: 0; + /*+text-shadow:0px -1px 1px #465259;*/ + border: 1px solid #0069cf; + border-top: 1px solid #0070fc; + border-radius: 9px; + border-radius: 9px 9px 9px 9px; + background: #0049ff url('../images/gradients.png') 0 -317px; + font-size: 13px; + font-weight: bold; + color: #ffffff; + text-shadow: 0 -1px 1px #465259; + /*+border-radius:9px;*/ + cursor: pointer; + -moz-text-shadow: 0 -1px 1px #465259; + -webkit-text-shadow: 0 -1px 1px #465259; + -o-text-shadow: 0 -1px 1px #465259; + -moz-border-radius: 9px; + -webkit-border-radius: 9px; + -khtml-border-radius: 9px; +} + +.new-project input[type='submit']:hover, +.new-project .button.confirm:hover { + background-position: -3px -369px; +} + +.new-project .button { + cursor: pointer; +} + +.new-project .button.confirm { + display: block; + height: 27px; + padding: 13px 10px 0 12px; +} + +.new-project .button.confirm.next { + padding: 10px 34px 0 29px; +} + +.new-project .review .button.confirm.next { + /*+placement:shift 25px 11px;*/ + position: relative; + top: 11px; + left: 25px; +} + +.new-project .review .ui-tabs { + /*+placement:shift -29px -31px;*/ + position: relative; + top: -31px; + left: -29px; +} + +.new-project .review .ui-tabs .ui-widget-content { + width: 695px; + height: 185px; +} + +.new-project .review .ui-tabs .ui-widget-content.ui-tabs-hide { + display: none; +} + +.new-project .review .ui-tabs ul { + position: relative; + /*+placement:shift 0px -2px;*/ + top: -2px; + left: 0; + text-align: left; +} + +.new-project .review .ui-tabs .list-view { + width: 688px; + height: 185px !important; +} + +.new-project .review .ui-tabs .list-view .fixed-header { + position: absolute; + z-index: $z-index-toolbox-info; + top: -22px; + height: 58px; + background: #ffffff; +} + +.new-project .review .ui-tabs .list-view .data-table table { + width: 669px; + margin: 31px 0 -1px; +} + +.new-project .review .ui-tabs .list-view .data-table table .edit { + position: relative; + top: 0; + /*+placement:shift 14px 0px;*/ + left: 14px; + width: 132px; + background: #ffffff; +} + +.new-project .review .ui-tabs .list-view .data-table table .edit select { + float: left; + width: 95px; + height: 20px; + border: 1px solid #b2b2b2; + background: #ffffff; +} + +.new-project .review .ui-tabs .list-view .data-table table .edit .action { + position: relative; + float: left; + top: 0; + /*+placement:shift 14px 0px;*/ + left: 14px; + height: 20px; + margin: 0; + padding: 0; +} + +.new-project .review .ui-tabs .list-view .toolbar { + display: none; +} + +.new-project .review .project-data { + position: relative; + top: -13px; + left: -19px; + /*+placement:shift -19px -13px;*/ + margin: 0; + padding: 16px; + background: #f4f4f4; +} + +.new-project .review .project-data .field { + width: 677px; + margin: auto; +} + +.new-project .button.later { + float: right; + margin: 19px -40px 0 0; + padding: 13px 7px 14px 8px; + /*+box-shadow:inset 0px 2px 2px #FFFFFF;*/ + border: 1px solid #b1b1b1; + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + box-shadow: inset 0 2px 2px #ffffff; + background: url('../images/bg-gradients.png') 0 -261px; + font-size: 13px; + color: #808080; + -moz-box-shadow: inset 0 2px 2px #ffffff; + /*+border-radius:10px;*/ + -webkit-box-shadow: inset 0 2px 2px #ffffff; + -o-box-shadow: inset 0 2px 2px #ffffff; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -khtml-border-radius: 10px; +} + +.new-project .button.later:hover { + box-shadow: inset 0 1px 1px #a1a1a1; + /*+box-shadow:inset 0px 1px 1px #A1A1A1;*/ + background-position: 0 -86px; + color: #000000; + -moz-box-shadow: inset 0 1px 1px #a1a1a1; + -webkit-box-shadow: inset 0 1px 1px #a1a1a1; + -o-box-shadow: inset 0 1px 1px #a1a1a1; +} + +.new-project input[type='submit']:hover { + background-position: -3px -369px; +} + +.new-project .resources input[type='submit'] { + display: none; +} + +.new-project .multi-edit { + width: 671px; +} + +.new-project .multi-edit .data { + width: 700px; +} + +.new-project .multi-edit .data .data-item { + margin: 0; + border: 0; + border: 1px solid #d2d2d2; +} + +.new-project .multi-edit .data .data-item.even td { + background: #dfe1e3; +} diff --git a/ui/css/src/scss/components/notifications.scss b/ui/css/src/scss/components/notifications.scss new file mode 100644 index 00000000000..c47995e8c8c --- /dev/null +++ b/ui/css/src/scss/components/notifications.scss @@ -0,0 +1,275 @@ +// 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. + +div.notification-box { + width: 323px; + height: 354px; + background: url('../images/bg-notifications.png') no-repeat 0 0; +} + +div.notification-box h3 { + position: relative; + /*+placement:shift 0px 35px;*/ + top: 35px; + left: 0; + font-size: 21px; + letter-spacing: 1px; + color: #ffffff; + text-align: center; + /*+text-shadow:0px 1px 2px #000000;*/ + text-shadow: 0 1px 2px #000000; + -moz-text-shadow: 0 1px 2px #000000; + -webkit-text-shadow: 0 1px 2px #000000; + -o-text-shadow: 0 1px 2px #000000; +} + +div.notification-box .container { + position: relative; + top: 46px; + left: 3px; + width: 296px; + /*+placement:shift 3px 46px;*/ + height: 241px; + margin: auto; + border: 1px solid #8198ae; + /*+box-shadow:inset 0px 3px 7px #656565;*/ + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + box-shadow: inset 0 3px 7px #656565; + background: #ffffff; + /*+border-radius:4px;*/ + -moz-box-shadow: inset 0 3px 7px #656565; + -webkit-box-shadow: inset 0 3px 7px #656565; + -o-box-shadow: inset 0 3px 7px #656565; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +div.notification-box .container ul { + width: 294px; + height: 229px; + margin-top: 8px; + overflow: auto; + overflow-x: hidden; +} + +div.notification-box .container ul li { + width: 100%; + height: 41px; + border-bottom: 1px solid #cecece; + background: url('../images/icons.png') no-repeat 10px -213px; + font-size: 12px; + color: #4d5e6e; + text-indent: 0; + cursor: pointer; + overflow-x: hidden; +} + +div.notification-box .container ul li.error { + height: 53px; + background: url('../images/icons.png') no-repeat 10px -171px; +} + +div.notification-box .container ul li.error .subtitle { + display: block; + position: relative; + float: left; + top: 17px; + left: 48px; + width: 213px; + height: 10px; + margin: 0; + padding: 0; + white-space: nowrap; + color: #808080; + /*+placement:shift 48px 17px;*/ + text-indent: 0; + text-overflow: ellipsis; + overflow: hidden; +} + +div.notification-box .container ul li span { + position: relative; + /*+placement:shift 48px 15px;*/ + float: left; + top: 15px; + left: 48px; + max-width: 202px; + font-size: 14px; + font-weight: 100; + overflow: hidden; +} + +div.notification-box .container ul li span:hover { + color: #5faaf7; + text-decoration: underline; +} + +div.notification-box .container ul div.remove { + position: relative; + float: right; + top: 16px; + left: 0; + width: 17px; + height: 21px; + /*+placement:shift 0px 16px;*/ + margin: -4px 8px 0 0; + background: url('../images/buttons.png') no-repeat -623px -8px; + cursor: pointer; +} + +div.notification-box .container ul div.remove:hover { + background-position: -606px -8px; +} + +div.notification-box .container ul li.pending { + background: url('../images/ajax-loader.gif') no-repeat 8px 6px; + color: #7e96ac; +} + +div.notification-box .container ul li.first { + border-top: 0; +} + +div.notification-box .button { + position: relative; + float: left; + top: 51px; + /*+placement:shift 0px 51px;*/ + left: 0; + padding: 5px 10px 6px; + border-bottom: 1px solid #2b2b2b; + /*+border-radius:4px;*/ + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + box-shadow: 0 0 2px #272727; + background: url('../images/buttons.png') no-repeat; + cursor: pointer; + -moz-border-radius: 4px; + /*+box-shadow:0px 0px 2px #272727;*/ + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + -moz-box-shadow: 0 0 2px #272727; + -webkit-box-shadow: 0 0 2px #272727; + -o-box-shadow: 0 0 2px #272727; +} + +div.notification-box .button span { + font-size: 11px; + font-weight: bold; + letter-spacing: 1px; + color: #ffffff; + /*+text-shadow:0px -1px 2px #171717;*/ + text-shadow: 0 -1px 2px #171717; + -moz-text-shadow: 0 -1px 2px #171717; + -webkit-text-shadow: 0 -1px 2px #171717; + -o-text-shadow: 0 -1px 2px #171717; +} + +div.notification-box .button.clear-list { + margin-left: 16px; + background: url('../images/gradients.png') 0 -10px; +} + +div.notification-box .button.clear-list:hover { + background-position: 0 -51px; +} + +div.notification-box .button.close { + float: right; + margin-right: 10px; + border-bottom: 1px solid #232323; + background: url('../images/gradients.png') 0 -317px; +} + +div.notification-box .button.close:hover { + background-position: -4px -368px; +} + +/*** Corner alert*/ +div.notification.corner-alert { + opacity: 0.7; + position: absolute; + /*+box-shadow:0px 2px 10px #000000;*/ + z-index: $z-index-notification; + width: 300px; + height: 75px; + margin: 38px 0 0 -56px; + padding: 7px 7px 0; + border-radius: 3px; + /*+border-radius:3px;*/ + box-shadow: 0 2px 10px #000000; + background: #ffffff; + background: rgba(255, 255, 255, 0.95); + font-size: 12px; + text-indent: 10px; + -moz-box-shadow: 0 2px 10px #000000; + -webkit-box-shadow: 0 2px 10px #000000; + -o-box-shadow: 0 2px 10px #000000; + /*+opacity:70%;*/ + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + filter: alpha(opacity=70); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); + -moz-opacity: 0.7; +} + +div.notification.corner-alert .top-arrow { + position: absolute; + top: -15px; + left: 50px; + width: 36px; + height: 15px; + background: url('../images/sprites.png') no-repeat -580px -1353px; +} + +div.notification.corner-alert div.title { + width: 100%; + height: 33px; + color: #ffffff; +} + +div.notification.corner-alert div.title span { + /*+placement:shift 0px 10px;*/ + position: relative; + top: 10px; + left: 0; + padding: 3px 0 12px 24px; + padding-left: 33px; + background: url('../images/icons.png') no-repeat 3px -223px; + font-size: 14px; + font-weight: 100; + color: #6d6d6d; +} + +div.notification.corner-alert.error div.title span { + background: url('../images/icons.png') no-repeat -2px -190px; +} + +div.notification.corner-alert div.message span { + display: block; + position: relative; + position: relative; + top: -2px; + left: 17px; + /*+placement:shift 17px -2px;*/ + padding-top: 6px; + font-size: 14px; + color: #000000; +} diff --git a/ui/css/src/scss/components/panel-controls.scss b/ui/css/src/scss/components/panel-controls.scss new file mode 100644 index 00000000000..bdf9b1f1506 --- /dev/null +++ b/ui/css/src/scss/components/panel-controls.scss @@ -0,0 +1,58 @@ +// 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. + +#browser div.panel div.toolbar div.panel-controls { + display: none; + float: right; + width: 42px; + height: 23px; +} + +#browser div.panel.reduced div.toolbar div.panel-controls { + display: block; + float: left; + width: 194px; +} + +#browser div.panel.maximized div.toolbar div.panel-controls { + display: block; +} + +#browser div.panel div.toolbar div.panel-controls div.control { + float: right; + width: 25px; + height: 26px; + margin-right: 6px; + background: url('../images/buttons.png') no-repeat -599px -335px; + cursor: pointer; +} + +#browser div.panel.maximized.single div.toolbar div.panel-controls div.control { + display: none; +} + +#browser div.panel div.toolbar div.panel-controls div.control:hover { + background-position: -593px -309px; +} + +#browser div.panel.maximized div.toolbar div.panel-controls div.control { + background-position: -621px -334px; +} + +#browser div.panel.maximized div.toolbar div.panel-controls div.control:hover { + background-position: -617px -308px; +} diff --git a/ui/css/src/scss/components/plugins-listing.scss b/ui/css/src/scss/components/plugins-listing.scss new file mode 100644 index 00000000000..4eb1b677a9d --- /dev/null +++ b/ui/css/src/scss/components/plugins-listing.scss @@ -0,0 +1,79 @@ +// 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. + +.plugins-listing ul { + width: 100%; +} + +.plugins-listing ul li { + /*+border-radius:4px;*/ + width: 98%; + height: 66px; + margin: 9px auto 12px; + border: 1px solid #a8a3a3; + /*+box-shadow:0px 2px 6px #D3D3D3;*/ + border-radius: 4px; + box-shadow: 0 2px 6px #d3d3d3; + background: url('../images/bg-gradients.png') 0 -29px; + cursor: pointer; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + -moz-box-shadow: 0 2px 6px #d3d3d3; + -webkit-box-shadow: 0 2px 6px #d3d3d3; + -o-box-shadow: 0 2px 6px #d3d3d3; +} + +.plugins-listing ul li:hover { + /*+box-shadow:inset 0px 2px 4px #B9B9B9;*/ + box-shadow: inset 0 2px 4px #b9b9b9; + -moz-box-shadow: inset 0 2px 4px #b9b9b9; + -webkit-box-shadow: inset 0 2px 4px #b9b9b9; + -o-box-shadow: inset 0 2px 4px #b9b9b9; +} + +.plugins-listing ul li .title { + display: block; + float: left; + width: 90%; + margin: 13px 0 7px; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + font-weight: bold; + color: #4a5a6a; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; +} + +.plugins-listing ul li .desc { + font-size: 13px; + color: #524e4e; +} + +.plugins-listing ul li .icon { + display: block; + float: left; + width: 50px; + height: 50px; + margin: 8px 13px 13px 11px; +} + +.plugins-listing ul li .icon img { + width: 100%; + height: 100%; +} diff --git a/ui/css/src/scss/components/project-selector.scss b/ui/css/src/scss/components/project-selector.scss new file mode 100644 index 00000000000..1e1901f67b1 --- /dev/null +++ b/ui/css/src/scss/components/project-selector.scss @@ -0,0 +1,151 @@ +// 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. + +.project-selector { + display: inline-block; +} + +.project-selector-dialog .ui-widget-content { + padding: 0 !important; +} + +.project-selector .toolbar { + position: relative; + width: 420px; + border: 0; + border-bottom: 1px solid #93a4b4; + box-shadow: 0 2px #ffffff; + /*+box-shadow:0px 2px #FFFFFF;*/ + background: transparent; + -moz-box-shadow: 0 2px #ffffff; + -webkit-box-shadow: 0 2px #ffffff; + -o-box-shadow: 0 2px #ffffff; + -moz-box-shadow: 0 2px 0 #ffffff; + -webkit-box-shadow: 0 2px 0 #ffffff; + -o-box-shadow: 0 2px 0 #ffffff; +} + +.project-selector .search input[type='text'] { + /*+border-radius:3px;*/ + float: left; + width: 192px; + height: 18px; + margin: 6px 0 0 105px; + border: 1px solid #9dadbb; + border-radius: 3px; + border-radius: 3px 3px 3px 3px; + box-shadow: 0 1px 1px #ffffff; + /*+box-shadow:0px 1px 1px #FFFFFF;*/ + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + -moz-box-shadow: 0 1px 1px #ffffff; + -webkit-box-shadow: 0 1px 1px #ffffff; + -o-box-shadow: 0 1px 1px #ffffff; +} + +.project-selector .search input[type='submit'] { + display: block; + position: relative; + float: left; + top: 0; + left: -2px; + width: 25px; + height: 22px; + margin: 6px 0 0; + border: 0; + /*+placement:shift -2px 0px;*/ + border-left: 1px solid #283979; + background: url('../images/sprites.png') no-repeat -601px -328px; + cursor: pointer; + cursor: pointer; +} + +.project-selector .listing { + position: relative; + margin: 15px; + border: 1px solid #d0d0d0; +} + +.project-selector .listing .data { + width: 100%; + height: 275px; + margin: 18px 0 0; + background: #f2f0f0; + overflow: auto; + overflow-x: hidden; +} + +.project-selector .listing .data ul { + font-size: 11px; + text-align: left; +} + +.project-selector .listing .data ul li { + padding: 10px 0 10px 7px; + font-size: 12px; + cursor: pointer; +} + +.project-selector .listing .data ul li.odd { + background: #dfe1e3; +} + +.project-selector .listing .data ul li:hover { + padding: 9px 0 9px 7px; + border-top: 1px solid #ffffff; + border-bottom: 1px solid #babfd9; + background: #cbddf3; +} + +.project-selector .listing .header { + position: absolute; + left: 0; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + width: 379px; + padding: 3px 2px 3px 7px; + border-bottom: 1px solid #ffffff; + background: url('../images/bg-gradients.png') repeat-x 0 -164px; + font-size: 11px; + color: #4f6171; + text-align: left; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; +} + +.project-selector .button.cancel { + float: none; + top: -8px; + left: 170px; + width: 54px; + margin: auto auto 17px; + padding: 8px 20px; + border: 1px solid #aaaaaa; + border-radius: 4px 4px 4px 4px; + background: #b6b6b6 url('../images/gradients.png') repeat 0 -480px; + font-size: 13px; + font-weight: bold; + color: #808080; + color: #838181; + cursor: pointer; +} + +.project-selector .button.cancel:hover { + color: #3a3a3a; +} diff --git a/ui/css/src/scss/components/quick-view-tooltip.scss b/ui/css/src/scss/components/quick-view-tooltip.scss new file mode 100644 index 00000000000..51bf0325ec9 --- /dev/null +++ b/ui/css/src/scss/components/quick-view-tooltip.scss @@ -0,0 +1,235 @@ +// 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. + +.quick-view-tooltip { + display: inline-block; + width: 470px; + margin-left: 0; + padding-top: 0; +} + +.quick-view-tooltip > div.title { + position: absolute; + top: 20px; + left: 10px; + width: 444px; + font-weight: 100; + color: #808080; +} + +.quick-view-tooltip > div.title .icon { + position: relative; + float: right; + top: -2px; + left: -7px; + padding: 0 13px 0 0; + background: url('../images/sprites.png') no-repeat -42px -67px; +} + +.quick-view-tooltip .loading-overlay { + opacity: 0.35; + top: 94px; + left: 1px; + /*+opacity:35%;*/ + height: 57px; + filter: alpha(opacity=35); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=35); + -moz-opacity: 0.35; +} + +.quick-view-tooltip .container { + display: inline-block; + width: 471px; + height: auto; + min-height: 100px; + border: 1px solid #9ea2a5; + box-shadow: 0 7px 9px #676f76; + background: #ffffff; + /*+box-shadow:0px 7px 9px #676F76;*/ + overflow: hidden; + -moz-box-shadow: 0 7px 9px #676f76; + -webkit-box-shadow: 0 7px 9px #676f76; + -o-box-shadow: 0 7px 9px #676f76; +} + +/*** Quick view detail view*/ +.quick-view-tooltip .detail-view .main-groups { + position: absolute; + top: 55px; + width: 456px; + height: 170px; + padding-top: 7px; + border: 1px solid #808080; + border-right: 0; + border-left: 0; + box-shadow: 0 1px #e6e6e6; + /*+box-shadow:0px 1px #E6E6E6;*/ + overflow: hidden; + -moz-box-shadow: 0 1px #e6e6e6; + -webkit-box-shadow: 0 1px #e6e6e6; + -o-box-shadow: 0 1px #e6e6e6; +} + +.quick-view-tooltip .detail-view .tagger { + display: none; +} + +.quick-view-tooltip .detail-view ul { + display: none !important; +} + +.quick-view-tooltip .detail-view .ui-tabs-panel { + display: inline-block; + float: left; + width: 100% !important; + height: auto; + overflow: hidden; +} + +.quick-view-tooltip .detail-view .details { + display: inline-block; + height: auto; + padding-bottom: 224px; +} + +.quick-view-tooltip .detail-view .detail-group { + left: -9px; + width: 365px; + margin: 0; + padding: 0; + border: 0; + background: none; +} + +.quick-view-tooltip .detail-view .detail-group table { + margin: 0; + border: 0; + background: none; +} + +.quick-view-tooltip .detail-view .detail-group table tr { + background: none; +} + +.quick-view-tooltip .detail-view .detail-group table td.name { + padding: 0 29px 0 5px !important; + font-size: 13px; + color: #000000 !important; +} + +.quick-view-tooltip .detail-view .detail-group table td.value { + font-size: 12px; + /*+text-shadow:0px 1px #EAEAEA;*/ + text-shadow: 0 1px #eaeaea; + overflow: hidden; + -moz-text-shadow: 0 1px #eaeaea; + -webkit-text-shadow: 0 1px #eaeaea; + -o-text-shadow: 0 1px #eaeaea; +} + +.quick-view-tooltip .detail-view .detail-group table td.value input[type='text'] { + width: 258px; + height: 10px; + margin-left: 0; +} + +.quick-view-tooltip .detail-view .detail-group .main-groups table td.value span { + top: 7px; + height: 25px; +} + +.quick-view-tooltip .detail-view .detail-group.actions { + position: relative; + float: left; + top: 202px; + width: 100%; + height: auto; +} + +.quick-view-tooltip .detail-view .detail-group.actions .button { + top: 160px; +} + +.quick-view-tooltip .detail-view .detail-group.actions .action.text { + display: inline-block; + float: left; + width: 112px; + height: 41px; + margin-left: 5px; + border: 0; + background: none; +} + +.quick-view-tooltip .detail-view .detail-group.actions .action.text:hover { + /*+box-shadow:none;*/ + box-shadow: none; + -moz-box-shadow: none; + -webkit-box-shadow: none; + -o-box-shadow: none; +} + +.quick-view-tooltip .detail-view .detail-group.actions .action.text .icon { + display: block; + float: left; + width: 4px; +} + +.quick-view-tooltip .detail-view .detail-group.actions .action.text .label { + display: block; + float: right; + width: 81px; + font-size: 11px; + color: #454c53; + /*+text-shadow:0px 1px #FFFFFF;*/ + text-indent: 0; + text-shadow: 0 1px #ffffff; + -moz-text-shadow: 0 1px #ffffff; + -webkit-text-shadow: 0 1px #ffffff; + -o-text-shadow: 0 1px #ffffff; +} + +.quick-view-tooltip .detail-view .detail-group.actions .action.text:hover .label { + color: #000000; +} + +.quick-view-tooltip .detail-view .detail-group.actions .detail-actions { + position: relative; + float: left; + top: 27px; + vertical-align: top; + width: 460px; + height: auto; + background: none; +} + +.quick-view-tooltip .detail-view .detail-group.actions td.view-all { + position: relative; + float: left; + top: 26px; + left: 0; + height: 26px; + /*+box-shadow:inset 0px 1px #FFFFFF;*/ + box-shadow: inset 0 1px #ffffff; + -moz-box-shadow: inset 0 1px #ffffff; + -webkit-box-shadow: inset 0 1px #ffffff; + -o-box-shadow: inset 0 1px #ffffff; +} + +.quick-view-tooltip .detail-view .detail-actions a { + width: 30px; + background: none; +} diff --git a/ui/css/src/scss/components/recurring-snapshots.scss b/ui/css/src/scss/components/recurring-snapshots.scss new file mode 100644 index 00000000000..e857fc00db1 --- /dev/null +++ b/ui/css/src/scss/components/recurring-snapshots.scss @@ -0,0 +1,287 @@ +// 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. + +.recurring-snapshots { + display: inline-block; +} + +.recurring-snapshots .schedule .add-snapshot-actions { + float: left; + clear: both; + width: 581px; + margin-bottom: 13px; + border-top: 1px solid #ffffff; + font-size: 13px; +} + +.recurring-snapshots .schedule .add-snapshot-action { + /*+placement:shift -7px -34px;*/ + position: relative; + float: right; + top: -34px; + left: -7px; + padding: 10px; + cursor: pointer; +} + +.recurring-snapshots .schedule .add-snapshot-action.add { + font-weight: bold; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + color: #0000ff; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; +} + +.recurring-snapshots .schedule .add-snapshot-action.add:hover { + color: #1a85f4; +} + +.recurring-snapshots .schedule p { + margin: 0; + font-size: 13px; +} + +.recurring-snapshots .schedule .forms form { + font-size: 12px; + color: #4f6171; +} + +.recurring-snapshots .schedule .forms form select { + float: left; + max-width: 100%; + margin: 3px 10px 3px 3px; +} + +.recurring-snapshots .schedule .forms form input { + /*+placement:shift 1px 4px;*/ + position: relative; + top: 4px; + left: 1px; +} + +.recurring-snapshots .schedule .forms form label { + /*+placement:shift 5px 4px;*/ + position: relative; + top: 4px; + left: 5px; +} + +.recurring-snapshots .schedule .forms form label.error { + float: left; + width: 100%; + font-size: 10px; +} + +.recurring-snapshots .schedule .forms form .field { + float: left; + width: 100%; + margin: 8px 0 0; +} + +.recurring-snapshots .schedule .forms form .name { + float: left; + width: 72px; + margin: 3px 14px 0 0; + padding: 4px 0 0; + text-align: right; +} + +.recurring-snapshots .schedule .forms form .value { + float: left; + width: 470px; + text-align: left; +} + +.ui-dialog .recurring-snapshots .ui-widget-content { + margin: 0; + padding: 0; +} + +.recurring-snapshots .ui-button { + /*+placement:anchor-bottom-right 9px 9px;*/ + position: absolute; + right: 9px; + bottom: 9px; +} + +.recurring-snapshots .scheduled-snapshots { + position: relative; + clear: both; + top: -26px; +} + +.recurring-snapshots .scheduled-snapshots p { + font-size: 12px; + font-weight: bold; + /*+text-shadow:0px 2px 2px #FFFFFF;*/ + text-shadow: 0 2px 2px #ffffff; + -moz-text-shadow: 0 2px 2px #ffffff; + -webkit-text-shadow: 0 2px 2px #ffffff; + -o-text-shadow: 0 2px 2px #ffffff; +} + +.recurring-snapshots .scheduled-snapshots table { + position: relative; + /*+placement:shift 0px -14px;*/ + top: -14px; + width: 100%; + margin: 0; + border: 0; +} + +.recurring-snapshots .scheduled-snapshots table td.actions div.action span.icon { + /*+placement:shift -3px -4px;*/ + position: relative; + top: -4px; + left: -3px; +} + +.recurring-snapshots .scheduled-snapshots tr { + display: block; + display: none; + width: 100%; + height: 38px; + margin: 22px 0 0; + padding: 0; + border: 0; +} + +.recurring-snapshots .scheduled-snapshots tr td { + padding: 5px 0 0 14px; + border: 0; + font-size: 12px; + word-break: keep-all; + word-wrap: normal; + text-indent: 0; +} + +.recurring-snapshots .scheduled-snapshots tr td.keep { + min-width: 60px; +} + +.recurring-snapshots .scheduled-snapshots tr td.timezone { + min-width: 168px; + font-size: 12px; +} + +.recurring-snapshots .scheduled-snapshots tr td.timezone span { + font-size: 10px; +} + +.recurring-snapshots .scheduled-snapshots table tbody tr td.actions { + min-width: 22px !important; + max-width: 22px !important; +} + +.recurring-snapshots .scheduled-snapshots tr td.time { + min-width: 144px; + background: url('../images/sprites.png') no-repeat -536px -533px; + text-indent: 0.7em; +} + +.recurring-snapshots .scheduled-snapshots tr.daily td.time { + background-position: -537px -569px; +} + +.recurring-snapshots .scheduled-snapshots tr.weekly td.time { + background-position: -537px -605px; +} + +.recurring-snapshots .scheduled-snapshots tr.monthly td.time { + background-position: -537px -648px; +} + +.recurring-snapshots p { + display: block; + max-width: 550px; + margin-bottom: 16px; + padding: 0 47px 0 0; + font-size: 14px; + line-height: 18px; + /*+text-shadow:0px 3px 3px #FFFFFF;*/ + color: #475765; + text-align: left; + text-shadow: 0 3px 3px #ffffff; + -moz-text-shadow: 0 3px 3px #ffffff; + -webkit-text-shadow: 0 3px 3px #ffffff; + -o-text-shadow: 0 3px 3px #ffffff; +} + +.recurring-snapshots .ui-tabs ul { + display: block; + position: relative; + width: 100%; + margin: 0; + margin: 0; + padding: 0; +} + +.recurring-snapshots .ui-tabs ul li a { + width: 76px; + background: url('../images/sprites.png') no-repeat -521px -533px; +} + +.recurring-snapshots .ui-tabs ul li.disabled a { + /*+opacity:50%;*/ + opacity: 0.5; + filter: alpha(opacity=50); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); + -moz-opacity: 0.5; +} + +.recurring-snapshots .ui-tabs ul li.disabled:hover a { + border: 0; + border: 0; + box-shadow: 0 0; + /*+box-shadow:0px 0px;*/ + background-color: transparent; + cursor: default; + -moz-box-shadow: 0 0; + -webkit-box-shadow: 0 0; + -o-box-shadow: 0 0; + -moz-box-shadow: 0 0 none; + -webkit-box-shadow: 0 0 none; + -o-box-shadow: 0 0 none; + -moz-box-shadow: none; + -webkit-box-shadow: none; + -o-box-shadow: none; +} + +.recurring-snapshots .ui-tabs ul li.daily a { + background-position: -522px -570px; +} + +.recurring-snapshots .ui-tabs ul li.weekly a { + background-position: -526px -605px; +} + +.recurring-snapshots .ui-tabs ul li.monthly a { + background-position: -528px -649px; +} + +.recurring-snapshots .ui-tabs div.ui-tabs-panel { + width: 100%; + height: 144px; + border: 0; + background: #e9e9e9; +} + +.recurring-snapshots .ui-tabs div.ui-tabs-panel.ui-tabs-hide { + display: none; +} diff --git a/ui/css/src/scss/components/region-switcher.scss b/ui/css/src/scss/components/region-switcher.scss new file mode 100644 index 00000000000..1b309ec56fd --- /dev/null +++ b/ui/css/src/scss/components/region-switcher.scss @@ -0,0 +1,187 @@ +// 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. + +.region-switcher { + display: inline-block; + position: relative; + /*+border-radius:4px;*/ + position: relative; + float: left; + top: 1px; + left: 27px; + height: 28px; + margin: 5px 13px 0 0; + border-radius: 4px; + cursor: pointer; + /*+placement:shift 27px 1px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.region-selector { + /*+border-radius:4px;*/ + position: relative; + position: absolute; + z-index: $z-index-region-selector; + top: 49px; + left: 185px; + width: 318px; + height: 372px; + /*+placement:shift 185px 49px;*/ + border-radius: 4px; + background: url('../images/bg-notifications.png') center; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.region-selector h2 { + margin: 31px 0 14px; + font-size: 21px; + letter-spacing: 1px; + color: #ffffff; + /*+text-shadow:0px 1px 2px #000000;*/ + text-align: center; + text-shadow: 0 1px 2px #000000; + -moz-text-shadow: 0 1px 2px #000000; + -webkit-text-shadow: 0 1px 2px #000000; + -o-text-shadow: 0 1px 2px #000000; +} + +.region-selector .buttons { + width: 95%; + height: 33px; + margin: 5px auto 0; +} + +.region-selector .buttons .button.close { + float: right; + margin-right: 10px; + padding: 8px; + border-bottom: 1px solid #232323; + /*+border-radius:4px;*/ + border-radius: 4px; + background: url('../images/gradients.png') 0 -317px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.region-selector .buttons .button.close:hover { + /*+box-shadow:inset 0px 2px 4px #525252;*/ + box-shadow: inset 0 2px 4px #525252; + -moz-box-shadow: inset 0 2px 4px #525252; + -webkit-box-shadow: inset 0 2px 4px #525252; + -o-box-shadow: inset 0 2px 4px #525252; +} + +.region-selector .buttons .button.close span { + font-weight: bold; + letter-spacing: 1px; + color: #ffffff; + /*+text-shadow:0px 1px 2px #000000;*/ + text-shadow: 0 1px 2px #000000; + -moz-text-shadow: 0 1px 2px #000000; + -webkit-text-shadow: 0 1px 2px #000000; + -o-text-shadow: 0 1px 2px #000000; +} + +.region-selector ul { + width: 94%; + height: 237px; + /*+border-radius:4px;*/ + margin: auto; + border: 1px solid #b7b7b7; + border-radius: 4px; + box-shadow: inset 0 0 8px #a3a3a3; + background: #ffffff; + overflow: auto; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + /*+box-shadow:inset 0px 0px 8px #A3A3A3;*/ + -khtml-border-radius: 4px; + -moz-box-shadow: inset 0 0 8px #a3a3a3; + -webkit-box-shadow: inset 0 0 8px #a3a3a3; + -o-box-shadow: inset 0 0 8px #a3a3a3; +} + +.region-selector ul li { + width: 100%; + padding: 15px 0; + border-bottom: 1px solid #cacaca; + /*+text-shadow:none;*/ + background: none; + font-size: 13px; + color: #415c72; + text-indent: 14px; + text-shadow: none; + cursor: pointer; + -moz-text-shadow: none; + -webkit-text-shadow: none; + -o-text-shadow: none; +} + +.region-selector ul li:hover, +.region-selector ul li.active { + background: #e9e9e9 url('../images/bg-gradients.png') repeat-x 0 -31px; + /*+text-shadow:0px 1px #FFFFFF;*/ + text-shadow: 0 1px #ffffff; + -moz-text-shadow: 0 1px #ffffff; + -webkit-text-shadow: 0 1px #ffffff; + -o-text-shadow: 0 1px #ffffff; +} + +.region-switcher .icon { + display: inline-block; + display: block; + position: absolute; + float: left; + width: 26px; + height: 26px; + background: url('../images/sprites.png') -15px -1313px; +} + +.region-switcher .title { + display: inline-block; + position: relative; + float: right; + top: 0; + left: -1px; + max-width: 285px; + padding: 9px 9px 0 34px; + font-size: 13px; + font-weight: 100; + /*+placement:shift -1px 0px;*/ + white-space: nowrap; + color: #ffffff; + overflow: hidden; +} + +.region-switcher:hover, +.region-switcher.active { + /*+box-shadow:inset 0px 1px 5px #000000;*/ + box-shadow: inset 0 1px 5px #000000; + -moz-box-shadow: inset 0 1px 5px #000000; + -webkit-box-shadow: inset 0 1px 5px #000000; + -o-box-shadow: inset 0 1px 5px #000000; +} + +.region-switcher:hover .icon, +.region-switcher.active .icon { + background-position: -70px -1311px; +} diff --git a/ui/css/src/scss/components/section-switcher.scss b/ui/css/src/scss/components/section-switcher.scss new file mode 100644 index 00000000000..acd5cdc4447 --- /dev/null +++ b/ui/css/src/scss/components/section-switcher.scss @@ -0,0 +1,137 @@ +// 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. + + +div.panel div.toolbar div.section-switcher { + float: left; + margin-top: 6px; + margin-left: 10px; +} + +#browser div.panel.maximize-if-selected.selected div.toolbar div.panel-controls div.control { + display: none; +} + +div.toolbar div.section-switcher div.section-select { + float: right; + font-size: 12px; + font-weight: 100; +} + +div.list-view div.toolbar div.section-switcher div.section-select label { + margin: 0 9px 0 0; +} + +div.toolbar div.section-switcher div.section { + float: left; + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + /*+border-radius:10px;*/ + font-size: 11px; + font-weight: bold; + text-shadow: 0 1px 1px #ededed; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + /*+text-shadow:0px 1px 1px #EDEDED;*/ + -khtml-border-radius: 10px; + -moz-text-shadow: 0 1px 1px #ededed; + -webkit-text-shadow: 0 1px 1px #ededed; + -o-text-shadow: 0 1px 1px #ededed; +} + +div.toolbar div.section-switcher div.section a { + display: block; + padding: 5px 10px 3px; + border: 1px solid #979fa4; + background: url('../images/bg-section-switcher.png') repeat-x 0 -22px; + color: #516374; + text-decoration: none; +} + +div.toolbar div.section-switcher div.section a.active { + padding-top: 6px; + padding-bottom: 2px; + border: 0; + border-bottom: 1px solid #ccd1d4; + box-shadow: inset 0 1px 5px #546874; + background: url('../images/bg-section-switcher.png') repeat-x 0 -21px; + /*+box-shadow:inset 0px 1px 5px #546874;*/ + background-position: 0 0; + -moz-box-shadow: inset 0 1px 5px #546874; + -webkit-box-shadow: inset 0 1px 5px #546874; + -o-box-shadow: inset 0 1px 5px #546874; +} + +div.toolbar div.section-switcher div.section.first a { + /*+border-radius:4px 0 0 5px;*/ + border-radius: 4px 0 0 5px; + -moz-border-radius: 4px 0 0 5px; + -webkit-border-radius: 4px 0 0 5px; + -khtml-border-radius: 4px 0 0 5px; +} + +div.toolbar div.section-switcher div.section.last a { + /*+border-radius:0 4px 4px 0px;*/ + border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + -webkit-border-radius: 0 4px 4px 0; + -khtml-border-radius: 0 4px 4px 0; +} + +div.toolbar div.section-switcher div.section.first.last a { + /*+border-radius:5px;*/ + border-radius: 5px; + border-radius: 5px 5px 5px 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -khtml-border-radius: 5px; +} + +div.toolbar div.section-switcher div.section-select { + float: left; + height: 26px; +} + +.project-view div.toolbar div.section-switcher div.section-select { + background: transparent; +} + +div.toolbar div.section-switcher div.section-select select { + height: 21px; + margin-right: 13px; + border: 1px solid #808080; + border-radius: 4px; + /*+border-radius:4px;*/ + border-radius: 4px 4px 4px 4px; + font-size: 12px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +div.toolbar div.section-switcher div.section-select label { + margin: 0 9px 0 0; +} + +.project-view div.list-view div.toolbar div.section-switcher div.section-select label { + color: #ffffff; + /*+text-shadow:0px 1px 1px #000000;*/ + text-shadow: 0 1px 1px #000000; + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; +} diff --git a/ui/css/src/scss/components/system-chart.scss b/ui/css/src/scss/components/system-chart.scss new file mode 100644 index 00000000000..1de6e2caf8a --- /dev/null +++ b/ui/css/src/scss/components/system-chart.scss @@ -0,0 +1,359 @@ +// 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. + +.system-chart { + width: 100%; + height: 100%; + overflow: auto; + overflow-x: hidden; +} + +.system-chart ul.resources li { + position: absolute; + width: 100px; + height: 60px; + border: 1px solid #99a0a5; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + /*+border-radius:4px;*/ + box-shadow: 0 0 2px #a6a6a6; + background: transparent url('../images/bg-gradients.png') repeat-x 0 -1340px; + text-align: left; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + /*+box-shadow:0px 0px 2px #A6A6A6;*/ + -khtml-border-radius: 4px; + -moz-box-shadow: 0 0 2px #a6a6a6; + -webkit-box-shadow: 0 0 2px #a6a6a6; + -o-box-shadow: 0 0 2px #a6a6a6; +} + +.system-chart ul.resources li .button.view-all { + position: relative; + position: absolute; + top: 34px; + /*+placement:shift 32px 34px;*/ + left: 32px; + width: 65px; + height: 25px; + background: url('../images/buttons.png') no-repeat -458px -504px; +} + +.system-chart ul.resources li .button.view-all:hover { + background-position: -537px -504px; +} + +.system-chart ul.resources li .button.view-all .view-all-label { + position: relative; + top: 0; + /*+text-shadow:0px -1px 1px #000000;*/ + left: 9px; + font-size: 11px; + color: #ffffff; + text-shadow: 0 -1px 1px #000000; + /*+placement:shift 9px 0px;*/ + -moz-text-shadow: 0 -1px 1px #000000; + -webkit-text-shadow: 0 -1px 1px #000000; + -o-text-shadow: 0 -1px 1px #000000; +} + +.system-chart ul.resources li .label { + position: relative; + position: absolute; + top: 3px; + /*+text-shadow:0px 1px #FFFFFF;*/ + left: 3px; + font-size: 12px; + font-weight: bold; + color: #5c7485; + /*+placement:shift 3px 3px;*/ + text-shadow: 0 1px #ffffff; + -moz-text-shadow: 0 1px #ffffff; + -webkit-text-shadow: 0 1px #ffffff; + -o-text-shadow: 0 1px #ffffff; +} + +/** Resources*/ +.system-chart.dashboard.admin { + width: 97%; + height: 96%; + background: transparent; +} + +.system-chart.dashboard.admin .dashboard-container { + width: 930px; + border: 0; +} + +.system-chart.dashboard.admin .dashboard-container .top { + background: transparent; +} + +.system-chart.dashboard.admin .dashboard-container .top .title { + color: #55687a; +} + +.system-chart.dashboard.admin .dashboard-container .top .title span { + /*+text-shadow:0px 0px #FFFFFF;*/ + text-shadow: 0 0 #ffffff; + -moz-text-shadow: 0 0 #ffffff; + -webkit-text-shadow: 0 0 #ffffff; + -o-text-shadow: 0 0 #ffffff; +} + +.system-chart.dashboard.admin .dashboard-container .stats .chart { + width: 300px; +} + +/** Compute*/ +.system-chart.compute { + background: url('../images/bg-system-chart-compute.png') no-repeat center; +} + +/*** Compute resources*/ +.system-chart.compute ul.resources { + position: relative; + width: 98%; + height: 97%; + margin: 0; +} + +.system-chart.compute ul.resources li.zone { + left: 196px; +} + +.system-chart.compute ul.resources li.zone .label { + top: 20px; + left: 0; + width: 100%; + font-size: 14px; + text-align: center; +} + +.system-chart.compute ul.resources li.pods { + top: 112px; + left: 299px; +} + +.system-chart.compute ul.resources li.clusters { + top: 189px; + left: 396px; +} + +.system-chart.compute ul.resources li.hosts { + top: 265px; + left: 507px; +} + +.system-chart.compute ul.resources li.primaryStorage { + top: 375px; + left: 507px; +} + +.system-chart.compute ul.resources li.secondaryStorage { + top: 497px; + left: 299px; +} + +.system-chart.compute ul.resources li.ucs { + top: 406px; + left: 299px; +} + +/** Network*/ +.system-chart.network .network-switch-icon { + position: relative; + position: absolute; + z-index: $z-index-system-chart2; + top: 76px; + left: 187px; + /*+box-shadow:0px 0px 2px #A4A4A4;*/ + padding: 8px 7px; + border: 1px solid #cdcdcd; + border-top: 2px solid #ffffff; + border-radius: 2px; + /*+border-radius:2px;*/ + border-radius: 2px 2px 2px 2px; + box-shadow: 0 0 2px #a4a4a4; + background: url('../images/bg-gradients.png') repeat-x 0 -38px; + font-weight: bold; + color: #506980; + -moz-box-shadow: 0 0 2px #a4a4a4; + /*+placement:shift 187px 76px;*/ + -webkit-box-shadow: 0 0 2px #a4a4a4; + -o-box-shadow: 0 0 2px #a4a4a4; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + -khtml-border-radius: 2px; +} + +.system-chart.network .base-circle-icon { + position: relative; + position: absolute; + z-index: $z-index-circle-icon; + /*+placement:shift 227px 557px;*/ + top: 557px; + left: 227px; + width: 35px; + height: 34px; + background: url('../images/bg-system-network-traffic.png') 0 -853px; +} + +.system-chart.network ul.resources { + position: absolute; + z-index: $z-index-system-chart1; + width: 100%; + height: 98%; +} + +.system-chart.network ul.resources li { + border: 0; + /*+box-shadow:0px 0px;*/ + border-radius: 0; + border-radius: 0 0 0 0; + box-shadow: 0 0; + background: transparent; + -moz-box-shadow: 0 0; + -webkit-box-shadow: 0 0; + -o-box-shadow: 0 0; + -moz-box-shadow: 0 0 none; + -webkit-box-shadow: 0 0 none; + -o-box-shadow: 0 0 none; + -moz-box-shadow: none; + /*+border-radius:0px;*/ + -webkit-box-shadow: none; + -o-box-shadow: none; + -moz-border-radius: 0; + -webkit-border-radius: 0; + -khtml-border-radius: 0; +} + +.system-chart.network ul.resources li .view-all { + /*+placement:shift 19px 21px;*/ + position: relative; + top: 21px; + left: 19px; +} + +.system-chart.network ul.resources li.public { + /*+placement:shift 356px 23px;*/ + position: relative; + position: absolute; + top: 23px; + left: 356px; +} + +.system-chart.network ul.resources li.guest { + /*+placement:shift 356px 155px;*/ + position: relative; + position: absolute; + top: 155px; + left: 356px; +} + +.system-chart.network ul.resources li.management { + /*+placement:shift 356px 242px;*/ + position: relative; + position: absolute; + top: 242px; + left: 356px; +} + +.system-chart.network ul.resources li.storage { + /*+placement:shift 356px 333px;*/ + position: relative; + position: absolute; + top: 333px; + left: 356px; +} + +.system-chart.network ul.resources li.providers { + /*+placement:shift 248px 427px;*/ + position: relative; + position: absolute; + top: 427px; + left: 248px; + width: 258px; + height: 77px; + background: url('../images/bg-system-network-traffic.png') no-repeat -50px -848px; +} + +.system-chart.network ul.resources li.providers span { + /*+placement:shift 99px 5px;*/ + position: relative; + position: absolute; + top: 5px; + left: 99px; + font-size: 12px; +} + +.system-chart.network ul.resources li.providers .view-all { + /*+placement:shift 186px 48px;*/ + position: relative; + position: absolute; + top: 48px; + left: 186px; +} + +.system-chart.network .system-network-chart { + position: relative; + z-index: $z-index-standard; + width: 100%; + height: 100%; +} + +.system-chart.network .system-network-chart .network-chart-item { + width: 213px; + height: 539px; + background: url('../images/bg-system-network-traffic.png') no-repeat; +} + +.system-chart.network .system-network-chart .network-chart-item.public { + position: relative; + /*+placement:shift 245px 20px;*/ + position: absolute; + top: 20px; + left: 245px; + background-position: -793px -1px; +} + +.system-chart.network .system-network-chart .network-chart-item.management { + position: relative; + /*+placement:shift 239px 20px;*/ + position: absolute; + top: 20px; + left: 239px; + background-position: -273px 12px; +} + +.system-chart.network .system-network-chart .network-chart-item.storage { + position: relative; + /*+placement:shift 231px 20px;*/ + position: absolute; + top: 20px; + left: 231px; + background-position: -523px 12px; +} + +.system-chart.network .system-network-chart .network-chart-item.guest { + position: relative; + /*+placement:shift 251px 20px;*/ + position: absolute; + top: 20px; + left: 251px; + background-position: -43px 12px; +} diff --git a/ui/css/src/scss/components/tagger.scss b/ui/css/src/scss/components/tagger.scss new file mode 100644 index 00000000000..f9fa169a0da --- /dev/null +++ b/ui/css/src/scss/components/tagger.scss @@ -0,0 +1,258 @@ +// 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. + +.tagger { + position: relative; + top: 0; + left: -4px; + width: 94%; + margin: auto; + /*+placement:shift -4px 0px;*/ + padding-bottom: 12px; + border: 1px solid #cfc9c9; + background: #f2f0f0; +} + +.tagger .field { + position: relative; + float: left; + width: 35%; +} + +.tagger .tag-info { + margin-top: 12px; + margin-left: 8px; + font-size: 11px; + color: #757575; +} + +.tagger .tag-info.title { + margin-bottom: 5px; + font-size: 11px; + color: #6f9bf0; +} + +.tagger form { + margin: 12px 9px 0; +} + +.tagger.readonly form { + display: none; +} + +.tagger form label { + display: block; + position: relative; + float: left; + top: 8px; + left: 5px; + width: 25px; + margin-right: 9px; + /*+placement:shift 5px 8px;*/ + font-size: 10px; + color: #394552; + text-align: right; +} + +.tagger form label.error { + position: absolute; + top: 28px !important; + left: 44px; + color: #ff0000; + /*[empty]background-color:;*/ +} + +.tagger form input { + padding: 4px; + border: 1px solid #808080; + border-radius: 4px; + /*+border-radius:4px;*/ + background: #ffffff; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.tagger form input { + width: 45%; + margin-left: 9px; +} + +.tagger form input[type='submit'] { + width: auto; + margin-left: 16px; + padding: 7px 25px 7px 26px; + /*+text-shadow:0px -1px 2px #000000;*/ + border: 0; + border-radius: 4px; + background: url('../images/bg-gradients.png') repeat-x 0 -220px; + color: #ffffff; + text-shadow: 0 -1px 2px #000000; + /*+border-radius:4px;*/ + cursor: pointer; + -moz-text-shadow: 0 -1px 2px #000000; + -webkit-text-shadow: 0 -1px 2px #000000; + -o-text-shadow: 0 -1px 2px #000000; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.tagger form input[type='submit']:hover { + background-position: 0 -946px; +} + +.tagger ul { + display: block; + width: 96%; + margin: 16px auto auto; + /*+border-radius:2px;*/ + padding-bottom: 10px; + border: 1px solid #d2d2d2; + border-radius: 2px; + box-shadow: inset 0 0 10px #dcdcdc; + background: #ffffff; + overflow: auto; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + /*+box-shadow:inset 0px 0px 10px #DCDCDC;*/ + -khtml-border-radius: 2px; + -moz-box-shadow: inset 0 0 10px #dcdcdc; + -webkit-box-shadow: inset 0 0 10px #dcdcdc; + -o-box-shadow: inset 0 0 10px #dcdcdc; +} + +.tagger ul li { + display: inline-block; + position: relative; + float: left; + top: 2px; + left: 0; + height: 15px; + margin-top: 5px; + margin-right: 2px; + /*+border-radius:4px;*/ + margin-left: 7px; + padding: 0 18px 0 7px; + border-radius: 4px; + background: #dfdfdf 0 4px; + /*+placement:shift 0px 2px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.tagger ul li span { + color: #000000; +} + +.tagger ul li span.label span.value { + max-width: 100px; + overflow: hidden; +} + +.tagger ul li span.label { + position: relative; + top: -2px; + left: 15px; + font-size: 10px; +} + +.tagger.readonly ul li span.label { + left: 6px; +} + +.tagger ul li span.label > span { + display: block; + float: left; + margin-top: 2px; +} + +.tagger ul li span.label > span.key { + max-width: 134px; + margin-right: 5px; + margin-left: 15px; + font-weight: bold; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.tagger ul li span.label > span.value { + max-width: 160px; + margin-left: 6px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.tagger ul li span.remove { + display: block; + position: absolute !important; + top: 0 !important; + left: -3px !important; + width: 15px !important; + height: 11px !important; + padding: 4px 0 0 8px; + background: #dfdfdf; + font-size: 8px; + font-weight: bold; + color: #5b5b5b; + text-indent: 4px; + cursor: pointer; + overflow: hidden !important; +} + +.tagger.readonly ul li span.remove { + display: none; +} + +.tagger ul li span.remove:hover { + color: #000000; +} + +/** Dialog tagger*/ +.ui-dialog .tagger { + width: 375px; +} + +.ui-dialog .tagger .tag-info { + display: none; +} + +.ui-dialog.editTags .ui-button { + float: right; +} + +.ui-dialog.editTags .ui-dialog-buttonpane { + float: right; +} + +.ui-dialog .tagger .field { + width: 119px !important; +} + +.ui-dialog .tagger input.key, +.ui-dialog .tagger input.value { + width: 66px !important; + height: 15px; + font-size: 11px !important; +} + +.ui-dialog .tagger input[type='submit'] { + padding: 6px 15px; +} diff --git a/ui/css/token-input-facebook.css b/ui/css/src/scss/components/token-input-facebook.scss similarity index 72% rename from ui/css/token-input-facebook.css rename to ui/css/src/scss/components/token-input-facebook.scss index 6b596fc99fe..563ca7b3158 100644 --- a/ui/css/token-input-facebook.css +++ b/ui/css/src/scss/components/token-input-facebook.scss @@ -1,75 +1,74 @@ -/* - * jQuery Plugin: Tokenizing Autocomplete Text Entry - * Version 1.6.0 - * - * Copyright (c) 2009 James Smith (http://loopj.com) - * Licensed jointly under the GPL and MIT licenses, - * choose which one suits your project best! - * - */ -/* Example tokeninput style #2: Facebook style */ +// jQuery Plugin: Tokenizing Autocomplete Text Entry +// Version 1.6.0 +// +// Copyright (c) 2009 James Smith (http://loopj.com) +// Licensed jointly under the GPL and MIT licenses, +// choose which one suits your project best! + +// Example tokeninput style #2: Facebook style + ul.token-input-list-facebook { - overflow: hidden; + z-index: $z-index-facebook; + clear: left; + width: 233px; height: auto !important; height: 1%; - width: 233px; - border: 1px solid #AFAFAF; - cursor: text; - font-size: 12px; - font-family: Verdana; min-height: 1px; - z-index: 2147483647; margin: 0; padding: 0; - background-color: #F6F6F6; + border: 1px solid #afafaf; + background-color: #f6f6f6; + font-family: Verdana; + font-size: 12px; list-style-type: none; - clear: left; + cursor: text; + overflow: hidden; } ul.token-input-list-facebook li input { - border: 0; width: 100px; - padding: 3px 8px; - background-color: white; margin: 2px 0; + padding: 3px 8px; + border: 0; + background-color: #ffffff; -webkit-appearance: caret; } li.token-input-token-facebook { - overflow: hidden; + float: left; height: auto !important; height: 15px; margin: 3px; padding: 1px 3px; - background-color: #eff2f7; - color: #000; - cursor: default; border: 1px solid #ccd5e4; - font-size: 11px; border-radius: 5px; + background-color: #eff2f7; + font-size: 11px; + white-space: nowrap; + color: #000000; + cursor: default; + overflow: hidden; -moz-border-radius: 5px; -webkit-border-radius: 5px; - float: left; - white-space: nowrap; } li.token-input-token-facebook p { display: inline; - padding: 0; margin: 0; + padding: 0; } li.token-input-token-facebook span { - color: #a6b3cf; margin-left: 5px; font-weight: bold; + color: #a6b3cf; cursor: pointer; } li.token-input-selected-token-facebook { - background-color: #5670a6; border: 1px solid #3b5998; - color: #fff; + background-color: #5670a6; + color: #ffffff; } li.token-input-input-token-facebook { @@ -81,24 +80,24 @@ li.token-input-input-token-facebook { div.token-input-dropdown-facebook { position: absolute; + z-index: $z-index-facebook; width: 233px; - background-color: #fff; - overflow: hidden; - border-left: 1px solid #ccc; - border-right: 1px solid #ccc; - border-bottom: 1px solid #ccc; - cursor: default; - font-size: 11px; + border-right: 1px solid #cccccc; + border-bottom: 1px solid #cccccc; + border-left: 1px solid #cccccc; + background-color: #ffffff; font-family: Verdana; - z-index: 2147483647; + font-size: 11px; + cursor: default; + overflow: hidden; } div.token-input-dropdown-facebook p { - margin: 0; width: 233px; + margin: 0; padding: 5px; font-weight: bold; - color: #777; + color: #777777; } div.token-input-dropdown-facebook ul { @@ -107,18 +106,18 @@ div.token-input-dropdown-facebook ul { } div.token-input-dropdown-facebook ul li { - background-color: #fff; - padding: 3px; margin: 0; + padding: 3px; + background-color: #ffffff; list-style-type: none; } div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook { - background-color: #fff; + background-color: #ffffff; } div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook { - background-color: #fff; + background-color: #ffffff; } div.token-input-dropdown-facebook ul li em { @@ -128,7 +127,5 @@ div.token-input-dropdown-facebook ul li em { div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook { background-color: #3b5998; - color: #fff; + color: #ffffff; } - -/*# sourceMappingURL=src/sourcemaps/token-input-facebook.css.map */ diff --git a/ui/css/src/scss/components/toolbar.scss b/ui/css/src/scss/components/toolbar.scss new file mode 100644 index 00000000000..19ab0524d60 --- /dev/null +++ b/ui/css/src/scss/components/toolbar.scss @@ -0,0 +1,230 @@ +// 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. + +div.toolbar { + position: relative; + position: absolute; + /*+box-shadow:0px 1px 4px #CFCFCF;*/ + z-index: $z-index-toolbar; + top: -1px; + top: 0; + left: 0; + /*+placement:shift 0px -1px;*/ + width: 100%; + height: 32px; + box-shadow: 0 1px 4px #cfcfcf; + background: #ececec 0 -6px; + -moz-box-shadow: 0 1px 4px #cfcfcf; + -webkit-box-shadow: 0 1px 4px #cfcfcf; + -o-box-shadow: 0 1px 4px #cfcfcf; +} + +.detail-view .ui-tabs-panel div.toolbar { + width: 968px; + margin-top: 8px; + border: 0; + background: transparent; +} + +.project-view div.toolbar { + background: #808080 url('../images/bg-nav-item-active-project-view.png') 0 -210px; +} + +div.toolbar div.filters { + margin: 5px 0 0 12px; +} + +div.toolbar div.filters label { + display: block; + float: left; + padding: 5px 11px 0 0; + font-size: 12px; + font-weight: 100; + color: #3f3b3b; +} + +.project-view div.toolbar div.filters label { + color: #ffffff; + /*+text-shadow:0px 1px 1px #000000;*/ + text-shadow: 0 1px 1px #000000; + -moz-text-shadow: 0 1px 1px #000000; + -webkit-text-shadow: 0 1px 1px #000000; + -o-text-shadow: 0 1px 1px #000000; +} + +div.toolbar div.filters select { + width: 142px; + border: 1px solid #808080; +} + +div.toolbar div.text-search { + position: relative; + float: right; +} + +div.toolbar div.text-search div.search-bar { + position: relative; + z-index: $z-index-search; + float: left; + width: 141px; + height: 20px; + margin: 5px 0 0 12px; + border: 1px solid #8b7e7e; + border-right: 1px solid #8b8989; + border-radius: 4px 0 0 4px; + /*+border-radius:4px 0 0 4px;*/ + background: #ffffff; + -moz-border-radius: 4px 0 0 4px; + -webkit-border-radius: 4px 0 0 4px; + -khtml-border-radius: 4px 0 0 4px; +} + +div.toolbar div.text-search div.search-bar input { + float: left; + width: 90%; + height: 68%; + margin: 1px 0 0; + border: 0; +} + +div.toolbar div.text-search div.search-bar div.filter { + float: left; + width: 74px; + height: 15px; + margin: 2px 0 0; + padding: 1px; + border-left: 1px solid #6d6d6d; + background: #ffffff; + font-size: 12px; + text-align: center; +} + +div.toolbar div.button.search { + position: relative; + z-index: $z-index-system-chart2; + top: 5px; + /*+placement:shift -10px 5px;*/ + left: -10px; + width: 33px; + height: 22px; + background: url('../images/sprites.png') no-repeat -592px -328px; + cursor: pointer; +} + +div.toolbar div.button.search:hover { + background-position: -592px -359px; +} + +div.toolbar div.button.add, +div.toolbar div.button.refresh, +div.toolbar div.button.add, +div.toolbar div.button.main-action, +.toolbar div.button.header-action, +.detail-group .button.add { + /*+placement:shift 0px 5px;*/ + position: relative; + float: right; + top: 5px; + left: 0; + height: 12px; + margin: 0 10px 0 0; + padding: 5px 5px 5px 5px; + border: 1px solid #b7b7b7; + border-radius: 4px; + /*+text-shadow:0px 1px 1px #DEE5EA;*/ + border-radius: 4px 4px 4px 4px; + background: #eaeaea; + background: #f7f7f7; + background: rgb(247, 247, 247); + background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYWVhZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+'); + background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(234, 234, 234, 1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(247, 247, 247, 1)), color-stop(100%, rgba(234, 234, 234, 1))); + background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(234, 234, 234, 1) 100%); + background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(234, 234, 234, 1) 100%); + background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(234, 234, 234, 1) 100%); + background: linear-gradient(to bottom, rgba(247, 247, 247, 1) 1%, rgba(234, 234, 234, 1) 100%); + font-size: 12px; + font-weight: 100; + color: #000000; + text-shadow: 0 1px 1px #dee5ea; + cursor: pointer; + -moz-text-shadow: 0 1px 1px #dee5ea; + /*+border-radius:4px;*/ + -webkit-text-shadow: 0 1px 1px #dee5ea; + -o-text-shadow: 0 1px 1px #dee5ea; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#eaeaea', GradientType=0); + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +div.toolbar div.button.export:hover, +div.toolbar div.button.add:hover, +div.toolbar div.button.refresh:hover, +div.toolbar div.button.main-action:hover, +.toolbar div.button.header-action:hover, +.detail-group .button.add:hover { + box-shadow: inset 0 0 5px #c3c3c3; + /*+box-shadow:inset 0px 0px 5px #C3C3C3;*/ + background: #e5e5e5; + -moz-box-shadow: inset 0 0 5px #c3c3c3; + -webkit-box-shadow: inset 0 0 5px #c3c3c3; + -o-box-shadow: inset 0 0 5px #c3c3c3; +} + +div.toolbar div.button.main-action span.icon { + display: block; + position: relative; + float: left; + top: -7px; + left: 0; + width: 34px; + /*+placement:shift 0px -7px;*/ + height: 20px; + background-image: url('../images/sprites.png'); + cursor: pointer; +} + +div.toolbar div.button.refresh { + float: right; + margin: 0 20px 0 0; +} + +div.toolbar div.button.refresh span { + padding: 1px 1px 1px 16px; + background-image: url('../images/icons.png'); + background-repeat: no-repeat; + background-position: -629px -232px; +} + +div.toolbar div.button.add span, +.detail-group .button.add span.icon { + position: relative; + top: 0; + /*+placement:shift 0px 0px;*/ + left: 0; + padding: 0 0 3px 18px; + background: url('../images/icons.png') no-repeat -626px -209px; +} + +#browser div.panel.selected div.toolbar { + border-right: 1px solid #43586b; +} + +#browser div.panel div.detail-view .toolbar { + width: 100%; +} diff --git a/ui/css/src/scss/components/tooltip-box.scss b/ui/css/src/scss/components/tooltip-box.scss new file mode 100644 index 00000000000..1385d9afa37 --- /dev/null +++ b/ui/css/src/scss/components/tooltip-box.scss @@ -0,0 +1,48 @@ +// 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. + +.tooltip-box { + display: inline-block; + width: 15%; + height: auto; + margin-left: 23px; + padding: 4px; + padding: 10px; + border: 1px solid #beb8b8; + /*+border-radius:4px;*/ + border-radius: 4px; + box-shadow: 0 1px 12px #353535; + background: #ffffff; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + /*+box-shadow:0px 1px 12px #353535;*/ + -khtml-border-radius: 4px; + -moz-box-shadow: 0 1px 12px #353535; + -webkit-box-shadow: 0 1px 12px #353535; + -o-box-shadow: 0 1px 12px #353535; +} + +.tooltip-box .arrow { + position: relative; + position: absolute; + top: 3px; + /*+placement:shift -16px 3px;*/ + left: -16px; + width: 19px; + height: 30px; + background: url('../images/sprites.png') -585px -947px; +} diff --git a/ui/css/src/scss/components/tooltip-info.scss b/ui/css/src/scss/components/tooltip-info.scss new file mode 100644 index 00000000000..fad62c778c3 --- /dev/null +++ b/ui/css/src/scss/components/tooltip-info.scss @@ -0,0 +1,57 @@ +// 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. + +.tooltip-info { + display: inline-block; + position: absolute; + z-index: $z-index-toolbox-info; + width: 239px; + min-height: 83px; + border: 1px solid #beb8b8; + border-radius: 22px; + /*+border-radius:22px;*/ + border-radius: 22px 22px 22px 22px; + background: #ffffff; + -moz-border-radius: 22px; + -webkit-border-radius: 22px; + -khtml-border-radius: 22px; +} + +.tooltip-info .arrow { + position: absolute; + top: 17px; + left: -18px; + width: 27px; + height: 47px; + background: url('../images/sprites.png') -583px -939px; +} + +.tooltip-info .title { + margin: 12px; + font-size: 19px; + color: #485766; +} + +.tooltip-info .content { + width: 182px; + margin: auto; + padding-bottom: 13px; + font-size: 11px; + line-height: 19px; + overflow: auto; + overflow-x: hidden; +} diff --git a/ui/css/src/scss/components/treeview.scss b/ui/css/src/scss/components/treeview.scss new file mode 100644 index 00000000000..9514393f1f0 --- /dev/null +++ b/ui/css/src/scss/components/treeview.scss @@ -0,0 +1,92 @@ +// 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. + +.tree-view { + width: 24%; + height: 98%; + overflow: auto; +} + +.tree-view.overflowScroll { + overflow: scroll; +} + +.tree-view ul { + display: block; + width: 85px; +} + +.tree-view ul li { + display: block; + position: relative; + clear: both; + left: 21px; + width: 100%; + margin: 7px 0 0; + font-size: 12px; +} + +.tree-view > ul { + /*+placement:shift 3px 40px;*/ + position: relative; + top: 40px; + left: 3px; +} + +.tree-view > ul > li { + left: 5px; +} + +.tree-view ul li .name { + float: left; + margin: 1px 0 13px 17px; + padding: 6px 9px 6px 4px; + cursor: pointer; +} + +.tree-view ul li .name:hover { + text-decoration: underline; +} + +.tree-view ul li .name.selected { + border-radius: 5px; + /*+border-radius:5px;*/ + border-radius: 5px 5px 5px 5px; + background: #dddcdd; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -khtml-border-radius: 5px; +} + +.tree-view ul li .expand { + position: absolute; + float: left; + float: left; + width: 10px; + height: 10px; + margin: 4px 5px 0 0; + background: url('../images/buttons.png') -630px -245px; + cursor: pointer; +} + +.tree-view ul li.expanded > .expand { + background-position: -631px -228px; +} + +#browser .tree-view div.toolbar div.text-search { + float: left; +} diff --git a/ui/css/src/scss/components/upload-volume.scss b/ui/css/src/scss/components/upload-volume.scss new file mode 100644 index 00000000000..5f88ad8a462 --- /dev/null +++ b/ui/css/src/scss/components/upload-volume.scss @@ -0,0 +1,98 @@ +// 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. + +.upload-volume .list-view { + margin-top: 5px !important; +} + +.upload-volume .listView-container { + width: 823px; + margin: 71px 0 20px 28px; + border: 1px solid #dadada; + border-radius: 4px; + /*+border-radius:4px;*/ + border-radius: 4px 4px 4px 4px; + background: #ffffff; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.upload-volume div.list-view .data-table div.fixed-header { + top: 115px !important; + left: 56px !important; + background: #ffffff !important; +} + +.upload-volume .data-table table.body { + margin-top: 66px !important; + margin-left: 19px; +} + +.upload-volume .list-view .toolbar { + top: 118px; + left: 43px; + width: 801px; + border: 0; + background: transparent; +} + +.upload-volume .top-fields { + float: left; + clear: none; + margin-left: 24px; +} + +.upload-volume .top-fields .field { + float: left; + margin-right: 50px; +} + +.upload-volume .top-fields input { + float: right; + /*+border-radius:3px;*/ + width: 186px; + padding: 2px; + border-radius: 3px; + border-radius: 3px 3px 3px 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; +} + +.upload-volume .top-fields label, +.upload-volume .desc { + display: block; + float: left; + padding: 6px; + font-size: 12px; + color: #4c5d6c; + /*+text-shadow:0px 0px #FFFFFF;*/ + text-shadow: 0 0 #ffffff; + -moz-text-shadow: 0 0 #ffffff; + -webkit-text-shadow: 0 0 #ffffff; + -o-text-shadow: 0 0 #ffffff; +} + +.upload-volume .desc { + position: absolute; + top: 79px; + left: 32px; + width: 825px; + border-top: 1px solid #cfcfcf; + text-align: left; +} diff --git a/ui/css/src/scss/components/user.scss b/ui/css/src/scss/components/user.scss new file mode 100644 index 00000000000..529ec81bfe4 --- /dev/null +++ b/ui/css/src/scss/components/user.scss @@ -0,0 +1,94 @@ +// 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. + +#user { + display: inline-block; + position: absolute; + float: left; + top: -47px; + left: 1025px; + height: 30px; + margin: 0; + background: transparent; + cursor: default !important; +} + +#user div.name { + display: inline-block; + float: left; + min-width: 110px; + max-width: 220px; + /*[empty]border-top:;*/ + height: 12px; + margin: 0; + padding: 9px 18px 7px 12px; + border-right: 0; + text-align: center; + /*+text-shadow:0px -1px 1px #464646;*/ + text-shadow: 0 -1px 1px #464646; + overflow: hidden; + -moz-text-shadow: 0 -1px 1px #464646; + -webkit-text-shadow: 0 -1px 1px #464646; + -o-text-shadow: 0 -1px 1px #464646; +} + +#user div.options { + position: relative; + float: left; + top: 0; + /*+placement:shift 0px 0px;*/ + left: 0; + width: 31px; + height: 28px; + background-position: 0 -867px; + cursor: pointer; +} + +#user div.options .arrow { + position: relative; + top: 11px; + left: 8px; + /*+placement:shift 8px 11px;*/ + width: 11px; + height: 8px; + background: url('../images/buttons.png') -402px -23px; +} + +#user-options { + position: absolute; + z-index: $z-index-panel-highlight; + top: 30px; + width: 150px; + padding: 15px; + border-radius: 0 0 3px 3px; + /*+border-radius:0 0 3px 3px;*/ + box-shadow: 0 1px 7px #000000; + background: #ffffff; + -moz-border-radius: 0 0 3px 3px; + -webkit-border-radius: 0 0 3px 3px; + /*+box-shadow:0px 1px 7px #000000;*/ + -khtml-border-radius: 0 0 3px 3px; + -moz-box-shadow: 0 1px 7px #000000; + -webkit-box-shadow: 0 1px 7px #000000; + -o-box-shadow: 0 1px 7px #000000; +} + +#user-options a { + float: left; + width: 100%; + padding: 10px 0; +} diff --git a/ui/css/src/scss/components/view-switcher.scss b/ui/css/src/scss/components/view-switcher.scss new file mode 100644 index 00000000000..deaee37010f --- /dev/null +++ b/ui/css/src/scss/components/view-switcher.scss @@ -0,0 +1,138 @@ +// 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. + +#header .view-switcher { + float: left; + margin: 11px 0 0 18px; + font-size: 12px; + color: #55687b; +} + +#header div.view-switcher { + display: none; + position: relative; + /*+placement:shift 0px -10px;*/ + top: -10px; + left: 0; + height: 39px; + margin-right: 9px; + background-position: 0 -5px; +} + +#header div.view-switcher.alt { + background-position: 0 -41px; +} + +#header div.view-switcher div { + position: relative; + /*[empty]display:;*/ + float: left; + width: 126px; + margin: 0; + padding: 13px 0 0; + text-indent: 17px; + /*+text-shadow:0px -1px 1px #2D2D2D;*/ + text-shadow: 0 -1px 1px #2d2d2d; + -moz-text-shadow: 0 -1px 1px #2d2d2d; + -webkit-text-shadow: 0 -1px 1px #2d2d2d; + -o-text-shadow: 0 -1px 1px #2d2d2d; +} + +#header div.view-switcher .select.active { + font-weight: bold; + color: #ffffff; + /*+text-shadow:0px -1px 1px #5B5B5B;*/ + text-shadow: 0 -1px 1px #5b5b5b; + -moz-text-shadow: 0 -1px 1px #5b5b5b; + -webkit-text-shadow: 0 -1px 1px #5b5b5b; + -o-text-shadow: 0 -1px 1px #5b5b5b; +} + +#header div.view-switcher div span.icon { + position: relative; + top: 0; + top: 0; + left: -4px; + width: 10px; + /*+placement:shift -4px 0px;*/ + height: 10px; + padding: 0 19px 0 0; + background: url('../images/icons.png') no-repeat; +} + +#header div.view-switcher div.default-view span.icon { + background-position: -23px 0; +} + +#header div.view-switcher div.project-view span.icon { + background-position: -24px 0 !important; +} + +#header div.view-switcher div.select span.icon { + background-position: -47px 0; +} + +#header .view-switcher span { + padding: 0 13px 0 0; + background-repeat: repeat-x; +} + +#header .view-switcher select { + max-width: 120px; + margin: 6px 3px 0 -21px; + padding: 3px 0 4px; +} + +/*** View switcher (drop-down)*/ +.project-switcher, +.domain-switcher { + float: left; + width: 223px; + padding: 9px 17px 0 19px; + /*+border-radius:4px;*/ + border-radius: 4px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.project-switcher label, +.domain-switcher label { + float: left; + top: 29px; + margin-top: 5px; + margin-right: 7px; + font-size: 13px; + color: #ffffff; +} + +.project-switcher select, +.domain-switcher select { + float: left; + width: 70%; + margin-top: 0; + border: 1px solid #393939; + /*+text-shadow:0px -1px 1px #373737;*/ + background: #515151; + font-size: 13px; + font-weight: 100; + color: #ffffff; + text-shadow: 0 -1px 1px #373737; + -moz-text-shadow: 0 -1px 1px #373737; + -webkit-text-shadow: 0 -1px 1px #373737; + -o-text-shadow: 0 -1px 1px #373737; +} diff --git a/ui/css/src/scss/components/view.scss b/ui/css/src/scss/components/view.scss new file mode 100644 index 00000000000..187a1c1b896 --- /dev/null +++ b/ui/css/src/scss/components/view.scss @@ -0,0 +1,126 @@ +// 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. + +div.panel div.view.group-thumbnail ul.groups li { + position: relative; + float: left; + width: 142px; + height: 80px; + margin: 16px -1px -5px 16px; + background: url('../images/buttons.png') no-repeat -1px -399px; + cursor: pointer; +} + +div.panel div.view.group-thumbnail ul.groups li.active { + background-position: -1px -489px; +} + +div.panel div.view.group-thumbnail ul.groups li.drop-hover { + background-position: -1px -310px !important; +} + +div.panel div.view.group-thumbnail ul.groups li.new { + background-position: -147px -401px; +} + +div.panel div.view.group-thumbnail ul.groups li.new.drop-hover { + background-position: -148px -312px !important; +} + +div.panel div.view.group-thumbnail ul.groups li span.name { + position: relative; + position: absolute; + /*+placement:shift 9px 7px;*/ + top: 7px; + left: 9px; + font-size: 12px; + font-weight: bold; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + color: #49596b; + text-shadow: 0 1px 1px #ffffff; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; +} + +div.panel div.view.group-thumbnail ul.groups li span.vm-count { + position: absolute; + /*+placement:displace 54px 27px;*/ + position: absolute; + margin-top: 27px; + margin-left: 54px; + font-size: 21px; + color: #3a4857; +} + +#browser div.panel.reduced .reduced-hide { + color: #bbb8b8; +} + +#browser div.panel.reduced div.toolbar .reduced-hide { + display: none; +} + +/*List view -- edit field*/ +div.view table td.editable div.edit { + position: relative; + top: 0; + /*+placement:shift 6px 0px;*/ + left: 6px; + width: 106%; + height: 20px; +} + +div.view table td.truncated.editable div.edit { + top: 1px; + left: 1px; + width: 285px; +} + +div.view table td.editable div.edit input { + position: relative; + z-index: $z-index-standard; + float: left; + width: 66%; + height: 17px; + border: 0; +} + +.detail-view div.view table td.editable div.edit { + width: 116px; +} + +div.view table td.editable div.action { + position: relative; + float: left; + top: 0; + left: -2px; + width: 16px; + /*+placement:shift -2px 0px;*/ + height: 19px; + padding-left: 2px; + background: #ffffff url('../images/buttons.png') -614px -684px; + cursor: pointer; +} + +div.view table td.editable div.action.save { + margin-left: 2px; +} + +div.view table td.editable div.action.cancel { + background-position: -628px -684px; +} diff --git a/ui/css/src/scss/components/vpc-chart.scss b/ui/css/src/scss/components/vpc-chart.scss new file mode 100644 index 00000000000..4e949e5094e --- /dev/null +++ b/ui/css/src/scss/components/vpc-chart.scss @@ -0,0 +1,489 @@ +// 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. + +.vpc-chart { + position: relative; + width: 100%; + height: 94%; + margin: 30px 0 0; + background: #ffffff 0 24px; + overflow: auto; +} + +.vpc-chart .vpc-title { + position: relative; + position: absolute; + /*+placement:shift 11px 41px;*/ + top: 41px; + left: 11px; + width: 210px; + font-size: 22px; + color: #5f768a; +} + +.vpc-chart .vpc-title > span { + display: block; + float: left; + max-width: 160px; + overflow-x: auto; + overflow-y: hidden; +} + +.vpc-chart .vpc-title .icon { + position: relative; + float: left; + top: -8px; + left: 6px; + /*+placement:shift 6px -8px;*/ + margin-left: 10px; + padding: 7px 15px; + background: url('../images/sprites.png') no-repeat -145px -195px; + cursor: pointer; +} + +.vpc-chart .vpc-title .vpc-configure-tooltip { + display: none; + position: absolute; + z-index: $z-index-vpc-tooltip; + width: 129px; + padding: 35px 10px 10px; + font-size: 14px; +} + +.vpc-chart .vpc-title .vpc-configure-tooltip .arrow { + position: relative; + position: absolute; + z-index: $z-index-standard; + /*+placement:shift 13px 26px;*/ + top: 26px; + left: 13px; + width: 30px; + height: 20px; + background: #ffffff url('../images/sprites.png') no-repeat -589px -997px; +} + +.vpc-chart .vpc-title .vpc-configure-tooltip ul { + position: relative; + top: -6px; + /*+border-radius:4px;*/ + left: 0; + margin: 10px 0; + padding: 9px; + border: 1px solid #c2c2c2; + /*+placement:shift 0px -6px;*/ + border-radius: 4px; + box-shadow: 0 1px 8px #cbcbcb; + background: #ffffff; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + /*+box-shadow:0px 1px 8px #CBCBCB;*/ + -khtml-border-radius: 4px; + -moz-box-shadow: 0 1px 8px #cbcbcb; + -webkit-box-shadow: 0 1px 8px #cbcbcb; + -o-box-shadow: 0 1px 8px #cbcbcb; +} + +.vpc-chart .vpc-title .vpc-configure-tooltip li { + padding: 3px 0 5px; + font-size: 12px; + cursor: pointer; +} + +.vpc-chart .vpc-title .vpc-configure-tooltip li:hover { + font-weight: bold; +} + +.vpc-chart ul.tiers { + margin: 79px 0 0 232px; + padding: 0 0 0 26px; + border-left: 3px solid #cccccc; +} + +.vpc-chart li.tier { + display: block; + position: relative; + position: relative; + top: 58px; + /*+border-radius:4px;*/ + left: 0; + width: 258px; + height: 107px; + margin: -55px 0 90px; + border: 1px solid #50545a; + border-radius: 4px; + /*+placement:shift 0px 58px;*/ + box-shadow: 0 5px 7px #dadada; + background: url('../images/bg-gradients.png') 0 -2637px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + /*+box-shadow:0px 5px 7px #DADADA;*/ + -khtml-border-radius: 4px; + -moz-box-shadow: 0 5px 7px #dadada; + -webkit-box-shadow: 0 5px 7px #dadada; + -o-box-shadow: 0 5px 7px #dadada; +} + +.vpc-chart li.tier .loading-overlay { + /*+border-radius:4px;*/ + border-radius: 4px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} + +.vpc-chart li.tier .connect-line { + position: absolute; + position: relative; + position: absolute; + top: 49px; + /*+placement:shift -29px 49px;*/ + left: -29px; + width: 28px; + height: 3px; + background: #cccccc 0 -8px; +} + +.vpc-chart li.tier span.title { + position: relative; + /*+placement:shift 8px 7px;*/ + position: absolute; + top: 7px; + left: 8px; + padding: 3px; + font-size: 24px; + color: #ffffff; + text-decoration: underline; + /*+text-shadow:1px 2px 2px #000000;*/ + text-shadow: 1px 2px 2px #000000; + cursor: pointer; + -moz-text-shadow: 1px 2px 2px #000000; + -webkit-text-shadow: 1px 2px 2px #000000; + -o-text-shadow: 1px 2px 2px #000000; +} + +.vpc-chart li.tier span.cidr { + /*+placement:shift 12px 46px;*/ + position: relative; + position: absolute; + top: 46px; + left: 12px; + font-size: 14px; + /*+text-shadow:0px -1px 1px #343E4C;*/ + color: #ffffff; + text-shadow: 0 -1px 1px #343e4c; + -moz-text-shadow: 0 -1px 1px #343e4c; + -webkit-text-shadow: 0 -1px 1px #343e4c; + -o-text-shadow: 0 -1px 1px #343e4c; +} + +.vpc-chart li.tier .actions { + position: relative; + position: absolute; + position: absolute; + /*+border-radius:0 0 4px 4px;*/ + top: 71px; + left: -1px; + width: 258px; + height: 35px; + /*+placement:shift -1px 71px;*/ + border: 1px solid #808080; + border-top: 1px solid #4c545e; + border-radius: 0 0 4px 4px; + box-shadow: inset 0 1px #ffffff; + /*+box-shadow:inset 0px 1px #FFFFFF;*/ + background: #cccccc; + -moz-border-radius: 0 0 4px 4px; + -webkit-border-radius: 0 0 4px 4px; + -khtml-border-radius: 0 0 4px 4px; + -moz-box-shadow: inset 0 1px #ffffff; + -webkit-box-shadow: inset 0 1px #ffffff; + -o-box-shadow: inset 0 1px #ffffff; +} + +.vpc-chart li.tier .actions .action { + float: left; + width: 50px; + height: 24px; + margin: 4px 0 4px 4px; + border: 1px solid #909090; + /*+border-radius:4px;*/ + border-radius: 4px; + background: url('../images/bg-gradients.png') 0 -2533px; + font-weight: bold; + color: #4b637a; + text-align: center; + text-shadow: 0 1px 1px #ffffff; + cursor: pointer; + -moz-border-radius: 4px; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; +} + +.vpc-chart li.tier .actions .action.disabled, +.vpc-chart li.tier .actions .action.disabled:hover { + border-color: #b5b5b5; + box-shadow: none; + /*+text-shadow:none;*/ + background: #cfcfcf; + color: #9d9d9d; + text-shadow: none; + cursor: not-allowed; + -moz-text-shadow: none; + -webkit-text-shadow: none; + /*+box-shadow:none;*/ + -o-text-shadow: none; + -moz-box-shadow: none; + -webkit-box-shadow: none; + -o-box-shadow: none; +} + +.vpc-chart li.tier .actions .action:hover { + border: 1px solid #7a8b9a; + box-shadow: inset 1px 2px 4px #808080; + background-position: 0 -106px; + /*+box-shadow:inset 1px 2px 4px #808080;*/ + color: #5b7a96; + -moz-box-shadow: inset 1px 2px 4px #808080; + -webkit-box-shadow: inset 1px 2px 4px #808080; + -o-box-shadow: inset 1px 2px 4px #808080; +} + +.vpc-chart li.tier .actions .action span.label { + /*+placement:shift 1px 3px;*/ + position: relative; + top: 3px; + left: 1px; + font-size: 11px; +} + +.vpc-chart li.tier .actions .action.remove, +.vpc-chart li.tier .actions .action.remove:hover { + position: relative; + float: right; + top: -2px; + left: -3px; + width: 30px; + /*+placement:shift -3px -2px;*/ + padding: 0; + border: 0; + box-shadow: none; + /*+box-shadow:none;*/ + background: none; + -moz-box-shadow: none; + -webkit-box-shadow: none; + -o-box-shadow: none; +} + +.vpc-chart li.tier .action span.icon { + position: relative; + float: left; + top: 3px; + left: 1px; + width: 37px; + /*+placement:shift 1px 3px;*/ + height: 23px; + background-image: url('../images/sprites.png'); + cursor: pointer; +} + +.vpc-chart li.tier .vm-count { + display: block; + position: absolute; + top: 3px; + left: 134px; + width: 100px; + /*+text-shadow:1px 2px 2px #000000;*/ + margin: 4px; + padding: 5px; + border: 1px solid transparent; + font-size: 23px; + color: #ffffff; + text-align: center; + text-decoration: underline; + text-shadow: 1px 2px 2px #000000; + cursor: pointer; + -moz-text-shadow: 1px 2px 2px #000000; + -webkit-text-shadow: 1px 2px 2px #000000; + -o-text-shadow: 1px 2px 2px #000000; +} + +.vpc-chart li.tier.loading .vm-count { + padding-right: 10px; +} + +.vpc-chart li.tier .vm-count .loading-overlay { + opacity: 1; + display: none; + position: absolute; + top: 7px; + left: 15px; + width: 24px; + /*+border-radius:12px;*/ + height: 24px; + border-radius: 12px; + background-image: url('../images/ajax-loader-small.gif'); + -moz-border-radius: 12px; + -webkit-border-radius: 12px; + /*+opacity:100%;*/ + -khtml-border-radius: 12px; + filter: alpha(opacity=100); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + -moz-opacity: 1; +} + +.vpc-chart li.tier.loading .vm-count .loading-overlay { + display: block; +} + +.vpc-chart li.tier .vm-count:hover, +.vpc-chart li.tier .title:hover { + border: 1px solid #4c545e; + border-radius: 4px; + background: url('../images/bg-gradients.png') 0 -2751px; +} + +.vpc-chart li.tier .vm-count .total { + padding-right: 4px; + font-size: 24px; +} + +.vpc-chart li.tier.placeholder { + border: dotted #acacac; + border-radius: 4px; + /*+border-radius:4px;*/ + box-shadow: none; + background: #ececec; + cursor: pointer; + -moz-border-radius: 4px; + /*+box-shadow:none;*/ + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + -moz-box-shadow: none; + -webkit-box-shadow: none; + -o-box-shadow: none; +} + +.vpc-chart li.tier.placeholder:hover { + box-shadow: 0 2px 8px #a7a7a7; + /*+box-shadow:0px 2px 8px #A7A7A7;*/ + background: #d3d3d3; + -moz-box-shadow: 0 2px 8px #a7a7a7; + -webkit-box-shadow: 0 2px 8px #a7a7a7; + -o-box-shadow: 0 2px 8px #a7a7a7; +} + +.vpc-chart li.tier.placeholder span { + top: 40px; + left: 66px; + color: #9f9f9f; + /*+text-shadow:none;*/ + text-decoration: none; + text-shadow: none; + -moz-text-shadow: none; + -webkit-text-shadow: none; + -o-text-shadow: none; +} + +.vpc-chart li.tier.placeholder:hover span { + border: 0; + /*+text-shadow:0px 0px 7px #FFFFFF;*/ + background: none; + color: #000000; + text-shadow: 0 0 7px #ffffff; + -moz-text-shadow: 0 0 7px #ffffff; + -webkit-text-shadow: 0 0 7px #ffffff; + -o-text-shadow: 0 0 7px #ffffff; +} + +.vpc-chart li.tier.virtual-router { + position: relative; + top: -36px; + left: 17px; + /*+placement:shift 17px -36px;*/ + width: 222px; + height: 65px; + margin: 0; + border: 1px solid #adadad; + background-position: 0 -2519px; + cursor: pointer; +} + +.vpc-chart li.tier.virtual-router:hover { + text-decoration: underline; +} + +.vpc-chart li.tier.virtual-router.disabled:hover { + text-decoration: none; +} + +.vpc-chart li.tier.virtual-router.disabled, +.vpc-chart li.tier.virtual-router.disabled span { + cursor: default; +} + +.vpc-chart li.tier.virtual-router span { + position: relative; + top: 22px; + /*+text-shadow:0px 1px 3px #FFFFFF;*/ + left: 53px; + font-size: 18px; + color: #586e82; + text-decoration: none; + /*+placement:shift 53px 22px;*/ + text-shadow: 0 1px 3px #ffffff; + -moz-text-shadow: 0 1px 3px #ffffff; + -webkit-text-shadow: 0 1px 3px #ffffff; + -o-text-shadow: 0 1px 3px #ffffff; +} + +.vpc-chart li.tier.virtual-router span:hover { + border: 0; + background: none; +} + +.vpc-chart li.tier.virtual-router .connect-line { + /*+placement:shift -47px 14px;*/ + position: relative; + top: 14px; + left: -47px; + width: 46px; +} + +/*VPC: Enable Static NAT fields*/ +.list-view.instances .filters.tier-select { + width: 246px; + margin: 1px 120px 0 19px; + padding: 2px 20px 2px 13px; +} + +.list-view.instances .filters.tier-select label { + color: #ffffff; + /*+text-shadow:0px 1px 3px #000000;*/ + text-shadow: 0 1px 3px #000000; + -moz-text-shadow: 0 1px 3px #000000; + -webkit-text-shadow: 0 1px 3px #000000; + -o-text-shadow: 0 1px 3px #000000; +} + +.list-view.instances .filters.tier-select select { + float: left; + width: 166px; +} diff --git a/ui/css/src/scss/components/zone-filter.scss b/ui/css/src/scss/components/zone-filter.scss new file mode 100644 index 00000000000..1bc939ef2d3 --- /dev/null +++ b/ui/css/src/scss/components/zone-filter.scss @@ -0,0 +1,43 @@ +// 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. + +#header .zone-filter { + float: left; + width: 111px; + margin: 9px 20px 0 2px; +} + +#header .zone-filter label { + position: absolute; + top: -3px; + font-size: 11px; + color: #ffffff; +} + +#header .zone-filter select { + width: 100%; + margin-top: 2px; + border: 1px solid #000000; + border-bottom: #ffffff; + /*+border-radius:4px;*/ + border-radius: 4px; + background: #ececec; + font-size: 12px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; +} diff --git a/ui/css/src/scss/custom/custom.scss b/ui/css/src/scss/custom/custom.scss new file mode 100644 index 00000000000..57ccdb3457e --- /dev/null +++ b/ui/css/src/scss/custom/custom.scss @@ -0,0 +1,21 @@ +// 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. + +//* Use custom.scss to override the default CloudStack styles +//* Use it as your global @import file for many scss files. +//* Use lines like @import "database.scss"; inside here only. +//* Custom scss is imported on bottom of cloudstack3.scss diff --git a/ui/css/src/scss/frame/wrapper-elements.scss b/ui/css/src/scss/frame/wrapper-elements.scss new file mode 100644 index 00000000000..10a9f96e91d --- /dev/null +++ b/ui/css/src/scss/frame/wrapper-elements.scss @@ -0,0 +1,44 @@ +// 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. + +#main-area { + width: 1224px; + height: 729px; + margin: auto; + border: 1px solid #d4d4d4; + /*+box-shadow:0px -5px 11px #B7B7B7;*/ + border: 1px solid #e8e8e8; + box-shadow: 0 -5px 11px #b7b7b7; + -moz-box-shadow: 0 -5px 11px #b7b7b7; + -webkit-box-shadow: 0 -5px 11px #b7b7b7; + -o-box-shadow: 0 -5px 11px #b7b7b7; +} + +#container { + /*[empty]width:;*/ + position: relative; + height: 100%; + margin: auto; +} + +#sections { + display: none; +} + +#template { + display: none; +} diff --git a/ui/css/src/scss/languages/hungarian.scss b/ui/css/src/scss/languages/hungarian.scss new file mode 100644 index 00000000000..da9d7c78eb0 --- /dev/null +++ b/ui/css/src/scss/languages/hungarian.scss @@ -0,0 +1,20 @@ +// 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. + +#breadcrumbs div.home { + width: 100px; // hungarian translation is longer than the english default. +} diff --git a/ui/css/src/scss/languages/japanese.scss b/ui/css/src/scss/languages/japanese.scss new file mode 100644 index 00000000000..f2a603f623e --- /dev/null +++ b/ui/css/src/scss/languages/japanese.scss @@ -0,0 +1,82 @@ +// 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. + +#header div.view-switcher { + font-size: 9px; +} + +.dashboard.admin .dashboard-container .stats ul li .name { + font-size: 10px; +} + +.dashboard.admin .dashboard-container .stats ul li .percentage { + float: left; + margin: 13px 0 0; + font-size: 15px; + font-weight: bold; + /*+text-shadow:0px -2px 1px #FFFFFF;*/ + text-shadow: 0 -2px 1px #ffffff; + -moz-text-shadow: 0 -2px 1px #ffffff; + -webkit-text-shadow: 0 -2px 1px #ffffff; + -o-text-shadow: 0 -2px 1px #ffffff; +} + +.dashboard.admin .dashboard-container .stats ul li .value .content { + font-size: 10px; +} + +div.toolbar div.filters label { + font-size: 9px; +} + +div.toolbar div.filters select { + width: 82px; + font-size: 11px; +} + +div.toolbar div.button.add, +div.toolbar div.button.refresh, +div.toolbar div.button.add, +div.toolbar div.button.main-action, +.toolbar div.button.header-action, +.detail-group .button.add { + font-size: 10px; + white-space: nowrap; +} + +table tbody td.quick-view, +table thead th.quick-view { + font-size: 8px; +} + +.multi-wizard.instance-wizard .progress ul li span.multiline { + font-size: 9px; +} + +.multi-wizard .review .select-container .select .name { + font-size: 10px; + white-space: nowrap; +} + +.quick-view-tooltip .detail-view .detail-group.actions .action.text .label { + font-size: 8px; +} + +.detail-view .multi-edit table tr th, +.detail-view .multi-edit table tr td { + font-size: 8px; +} diff --git a/ui/css/src/scss/custom.scss b/ui/css/src/scss/licences/AL-css.scss similarity index 92% rename from ui/css/src/scss/custom.scss rename to ui/css/src/scss/licences/AL-css.scss index 021362338d8..1e58f62659e 100644 --- a/ui/css/src/scss/custom.scss +++ b/ui/css/src/scss/licences/AL-css.scss @@ -1,3 +1,6 @@ +// licence for compiled css file + +/*[fmt]1C20-1C0D-E*/ /* * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -15,7 +18,4 @@ * KIND, either express or implied. See the License for the * specific language governing permissions and limitations * under the License. -* -* -* Use custom.css to override the default CloudStack styles */ diff --git a/ui/css/src/scss/objects/form-elements.scss b/ui/css/src/scss/objects/form-elements.scss new file mode 100644 index 00000000000..b0e7448f17a --- /dev/null +++ b/ui/css/src/scss/objects/form-elements.scss @@ -0,0 +1,35 @@ +// 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. + +input.error { + background: #fee5e5; +} + +label.error { + color: #ff0000; +} + +.label-hovered { + color: #0000ff !important; + cursor: pointer; +} + +.button { + float: left; + background: url('../images/buttons.png') no-repeat; + cursor: pointer; +} diff --git a/ui/css/src/scss/objects/links.scss b/ui/css/src/scss/objects/links.scss new file mode 100644 index 00000000000..cef37013396 --- /dev/null +++ b/ui/css/src/scss/objects/links.scss @@ -0,0 +1,26 @@ +// 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. + +a { + color: #0b84dc; + text-decoration: none; +} + +a:hover { + color: #000000; + text-decoration: underline; +} diff --git a/ui/css/src/scss/objects/table.scss b/ui/css/src/scss/objects/table.scss new file mode 100644 index 00000000000..f15569d5a55 --- /dev/null +++ b/ui/css/src/scss/objects/table.scss @@ -0,0 +1,323 @@ +// 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. + +//TODO find new stategy to organize this styles +table { + position: relative; + width: 955px; + max-width: 977px; + margin: 15px 15px 12px 12px; + border-bottom: 1px solid #c4c5c5; + font-size: 13px; + text-align: left; + text-indent: 10px; + border-collapse: collapse; +} + +table thead { + background: url('../images/bg-table-head.png') repeat-x; + cursor: default; +} + +table thead th { + border: 1px solid #c6c3c3; + border-top: 0; + border-bottom: 1px solid #cfc9c9; + font-weight: bold; + white-space: nowrap; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + color: #525252; + text-align: left; + text-shadow: 0 1px 1px #ffffff; + cursor: pointer; + -moz-text-shadow: 0 1px 1px #ffffff; + -webkit-text-shadow: 0 1px 1px #ffffff; + -o-text-shadow: 0 1px 1px #ffffff; +} + +table thead th.sorted { + color: #312f2f; + /*+text-shadow:0px 1px 1px #BFBFBF;*/ + text-shadow: 0 1px 1px #bfbfbf; + -moz-text-shadow: 0 1px 1px #bfbfbf; + -webkit-text-shadow: 0 1px 1px #bfbfbf; + -o-text-shadow: 0 1px 1px #bfbfbf; +} + +table thead th.sorted.desc { + background-position: 102% -111px; +} + +table thead th.sorted.asc { + background-position: 102% -157px; +} + +table tbody td, +table th { + clear: none; + vertical-align: middle; + min-width: 88px; + padding: 10px 5px 6px; + border-right: 1px solid #bfbfbf; + font-size: 11px; + color: #282828; + overflow: hidden; +} + +table tbody td.loading { + border-top: 1px solid #fbfbfb; + background: #dbe2e9; + text-align: center; +} + +table tbody td.truncated { + max-width: 120px; + overflow: visible; +} + +table tbody td.truncated > span { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.list-view-select table th.name, +.list-view-select table td.name { + width: 170px; + min-width: 170px; + max-width: 170px; +} + +.list-view-select table th.availableHostSuitability, +.list-view-select table td.availableHostSuitability { + max-width: 250px; +} + +/** Multiselect*/ +table thead th.multiselect, +table tbody td.multiselect { + width: 20px; + min-width: 20px; + max-width: 20px; +} + +table thead th.multiselect input, +table tbody td.multiselect input { + position: relative; + /*+placement:shift -8px 0px;*/ + top: 0; + left: -8px; + margin: 0; +} + +table thead th.multiselect input { + margin-left: 2px; +} + +/** Actions table cell*/ +table tbody td.actions { + vertical-align: middle; + width: 130px; + min-width: 130px !important; + max-width: 130px !important; +} + +table tbody td.actions input { + /*+placement:shift 10px -6px;*/ + position: relative; + top: -6px; + left: 10px; + margin: 11px 0 0; +} + +.list-view-select table tbody td.actions { + width: 40px !important; + min-width: 40px !important; + max-width: 40px !important; +} + +.list-view-select table tbody td.actions input { + margin: 0 0 0 -7px; +} + +.list-view-select table thead th.actions { + width: 40px !important; + min-width: 40px !important; + max-width: 40px !important; + text-indent: 5px; +} + +/** Quick view table cell*/ +table tbody td.quick-view, +table thead th.quick-view { + width: 58px !important; + min-width: 58px; + max-width: 58px !important; + height: 14px !important; + white-space: nowrap; + text-indent: 2px; + cursor: default; +} + +table tbody td.quick-view .icon { + margin-top: 3px; + margin-left: 22px; + padding: 0 0 6px 12px; + background: url('../images/sprites.png') no-repeat -44px -62px; +} + +table tbody td.quick-view:hover .icon { + background-position: -44px -644px; +} + +table tbody tr.loading td.quick-view .icon { + display: none; +} + +table tbody tr.loading td.quick-view { + cursor: default; +} + +table tbody tr.loading td.quick-view .loading { + background-position: center center; +} + +/** Row styling*/ +table tbody tr { + border-top: 1px solid transparent; + border-right: 1px solid #c4c5c5; + border-left: 1px solid #c4c5c5; +} + +table tbody tr.even { + background: #ffffff; +} + +table tbody tr.odd { + background: #f2f0f0; +} + +table tbody tr.selected { + border-top: 1px solid #edf0f7 !important; + border-bottom: 1px solid #babfd9; + background: #cbddf3; + text-shadow: 0 1px 1px #fcfbf7; +} + +table tbody tr.to-remove { + border-top: 1px solid #edf0f7 !important; + border-bottom: 1px solid #babfd9; + background: #e05959; + text-shadow: 0 1px 1px #fcfbf7; +} + +table tbody tr.loading { + background: #e2e9f0; +} + +table tbody tr.loading td { + /*+opacity:50%;*/ + opacity: 0.5; + filter: alpha(opacity=50); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); + -moz-opacity: 0.5; +} + +table tbody tr.loading td.loading.icon { + height: 35px; + padding: 0; + background: url('../images/ajax-loader.gif') no-repeat center; +} + +table tbody tr div.loading { + display: block; + width: 50px; + height: 14px; + margin: auto; + background: transparent url('../images/ajax-loader-small.gif') no-repeat center; +} + +table th.resizable { + position: relative; + cursor: col-resize; +} + +table th div.ui-resizable-handle { + position: relative; + float: right; + top: -30px; +} + +div.list-view table tbody td span { + display: block; + float: left; + max-width: 89%; + margin-left: 12px; + line-height: 15px; + word-break: break-all; + word-wrap: break-word; + text-indent: 0; +} + +td.alert-notification-threshold { + background-color: rgba(255, 231, 175, 0.75); + color: #e87900; +} + +td.alert-disable-threshold { + background-color: rgba(255, 190, 190, 0.75); + color: #f50000; +} + +span.compact { + height: 16px; +} + +.horizontal-overflow tbody td, +.horizontal-overflow thead th { + min-width: 40px; + padding: 10px 10px 5px 0; +} + +.horizontal-overflow th.quick-view { + padding-left: 5px; +} + +.groupable-header { + border-right: 1px solid #c6c3c3; + border-left: 1px solid #c6c3c3; + background: url('../images/bg-table-head.png'); +} + +.groupable-header-columns th { + border: 0; +} + +table.horizontal-overflow td.state { + width: 55px; + min-width: 55px; + max-width: 55px; +} + +table.no-split td.first { + min-width: 150px; +} + +.groupable-header-border { + border-right: 1px solid #c6c3c3; + border-left: 1px solid #c6c3c3; +} diff --git a/ui/css/src/scss/token-input-facebook.scss b/ui/css/src/scss/token-input-facebook.scss deleted file mode 100644 index 2eb2afcff72..00000000000 --- a/ui/css/src/scss/token-input-facebook.scss +++ /dev/null @@ -1,132 +0,0 @@ -/* -* jQuery Plugin: Tokenizing Autocomplete Text Entry -* Version 1.6.0 -* -* Copyright (c) 2009 James Smith (http://loopj.com) -* Licensed jointly under the GPL and MIT licenses, -* choose which one suits your project best! -* -*/ -/* Example tokeninput style #2: Facebook style */ -ul.token-input-list-facebook { - overflow: hidden; - height: auto !important; - height: 1%; - width: 233px; - border: 1px solid #AFAFAF; - cursor: text; - font-size: 12px; - font-family: Verdana; - min-height: 1px; - z-index: 2147483647; - margin: 0; - padding: 0; - background-color: #F6F6F6; - list-style-type: none; - clear: left; -} - -ul.token-input-list-facebook li input { - border: 0; - width: 100px; - padding: 3px 8px; - background-color: white; - margin: 2px 0; - -webkit-appearance: caret; -} - -li.token-input-token-facebook { - overflow: hidden; - height: auto !important; - height: 15px; - margin: 3px; - padding: 1px 3px; - background-color: #eff2f7; - color: #000; - cursor: default; - border: 1px solid #ccd5e4; - font-size: 11px; - border-radius: 5px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - float: left; - white-space: nowrap; -} - -li.token-input-token-facebook p { - display: inline; - padding: 0; - margin: 0; -} - -li.token-input-token-facebook span { - color: #a6b3cf; - margin-left: 5px; - font-weight: bold; - cursor: pointer; -} - -li.token-input-selected-token-facebook { - background-color: #5670a6; - border: 1px solid #3b5998; - color: #fff; -} - -li.token-input-input-token-facebook { - float: left; - margin: 0; - padding: 0; - list-style-type: none; -} - -div.token-input-dropdown-facebook { - position: absolute; - width: 233px; - background-color: #fff; - overflow: hidden; - border-left: 1px solid #ccc; - border-right: 1px solid #ccc; - border-bottom: 1px solid #ccc; - cursor: default; - font-size: 11px; - font-family: Verdana; - z-index: 2147483647; -} - -div.token-input-dropdown-facebook p { - margin: 0; - width : 233px; - padding: 5px; - font-weight: bold; - color: #777; -} - -div.token-input-dropdown-facebook ul { - margin: 0; - padding: 0; -} - -div.token-input-dropdown-facebook ul li { - background-color: #fff; - padding: 3px; - margin: 0; - list-style-type: none; -} - -div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook { - background-color: #fff; -} - -div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook { - background-color: #fff; -} - -div.token-input-dropdown-facebook ul li em { - font-weight: bold; - font-style: normal; -} - -div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook { - background-color: #3b5998; - color: #fff; -} diff --git a/ui/css/src/scss/variables/z-index.scss b/ui/css/src/scss/variables/z-index.scss new file mode 100644 index 00000000000..46aff3764b6 --- /dev/null +++ b/ui/css/src/scss/variables/z-index.scss @@ -0,0 +1,39 @@ +// 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. + +//TODO rework variable-names, z-index values and set up z-index value-dependencies +$z-index-behind: -1; +$z-index-standard: 1; +$z-index-breadcrumbs1: 2; +$z-index-system-chart1: 2; +$z-index-ui-tabs: 2; +$z-index-system-chart2: 3; +$z-index-search: 4; +$z-index-breadcrumbs2: 5; +$z-index-circle-icon: 5; +$z-index-toolbar: 6; +$z-index-install-wizard1: 9; +$z-index-install-wizard2: 10; +$z-index-install-wizard3: 11; +$z-index-notification: 100; +$z-index-loading-overlay: 500; +$z-index-toolbox-info: 1000; +$z-index-vpc-tooltip: 2000; +$z-index-multi-wizard2: 5000; +$z-index-region-selector: 5500; +$z-index-panel-highlight: 10000; +$z-index-facebook: 2147483647; diff --git a/ui/index.html b/ui/index.html index 1140d146577..e725b8153de 100644 --- a/ui/index.html +++ b/ui/index.html @@ -26,11 +26,6 @@ - - -