ui/css/src/scss/components/dashboard-system.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-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;
}