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

.dashboard.admin {
  height: 100%;
  padding: 10px;
  background: #f2f0f0;
  font-size: 13px;
  color: #3d5873;
}

.dashboard.admin .dashboard-container {
  /*+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: 49.5%;
}

.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;
  box-sizing: border-box;
  width: 100%;
  margin: 9px 0 0;
  padding: 0 0;
}

.dashboard.admin .dashboard-container .top {
  float: left;
  box-sizing: border-box;
  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;
  width: 100%;
  padding: 11px 0;
  overflow: auto;
  overflow-x: hidden;
}

.dashboard.admin .zone-stats ul {
  position: relative;
  width: 100%;
}

.dashboard.admin .zone-stats ul li {
  position: relative;
  z-index: $z-index-standard;
  float: left;
  width: 50%;
  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;
  box-sizing: border-box;
  height: 190px;
  overflow: hidden;
}

.dashboard.admin .dashboard-container.sub.alerts.first {
  margin-right: 1%;
}

.dashboard.admin .dashboard-container.sub.alerts .top {
  height: 18%;
};

.dashboard.admin .dashboard-container.sub.alerts ul {
  position: relative;
  width: 100%;
  height: 82%;
  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;
}