| // 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; |
| } |
