ui/css/src/scss/components/system-chart.scss

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