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

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