openmptcprouter-feeds/luci-app-openmptcprouter/htdocs/luci-static/resources/openmptcprouter/css/wanstatus.css

.container {
  /* container for entire page. fixes bootstrap theme's ridiculously small page width */
  max-width: 1044px;
}
#interface_field {
  padding: 12px 20px 20px 20px;
}
#mwan_status_text {
  display: table;
  font-size: 14px;
  margin: auto;
  max-width: 1044px;
  min-width: 246px;
  width: 100%;
}
.wanon {
  background-color: #1cc82c;
}
.wanoff {
  background-color: #e55712;
}
.wanon,
.wanoff {
  border-radius: 60px;
  box-shadow: 0px 2px 5px -3px;
  float: left;
  margin: 8px 3px 0px 3px;
  min-height: 30px;
  min-width: 235px;
  padding: 5px 10px 8px 10px;
  text-align: center;
}
/* Mwan3 ligthed CSS */
.container {
  /* container for entire page. fixes bootstrap theme's ridiculously small page width */
  max-width: 1044px;
}
#interface_field {
  padding: 0px;
}
#interface_field td {
  padding: 0px;
}
#interface_status_text {
  display: table;
  font-size: 14px;
  margin: auto;
  max-width: 1044px;
  min-width: 246px;
  width: 100%;
}
ul {
  margin: 0px;
}
/*Now the CSS*/
.tree ul {
  position: relative;
  float: left;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}
.tree li {
  float: left;
  text-align: left;
  list-style-type: none;
  position: relative;
  padding: 5px 0px 5px 85px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}
.tree ul ul {
  padding-left: 85px;
  position: relative;
}
.tree > ul > li:first-child {
  position: relative;
  padding-left: 0px;
}
.tree > ul > li#first-child > a {
  position: relative;
  top: 50%;
}
/*We will use ::before and ::after to draw the connectors
    Before: Bottom part of the element
    After: Top part of the element
*/
.tree ul ul li::before,
.tree ul ul li::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  border-left: 2px solid black;
  width: 85px;
  height: 50%;
  float: left;
  z-index: -10;
  /*
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 2px solid black;
    width: 50%;
    height: 20px;
    background-color: red;
*/
}
.tree ul ul li::after {
  top: auto;
  bottom: 50%;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
}
.tree li:first-child {
  position: relative;
  top: 50%;
}
/*We need to remove first top and the last bottom border */
.tree li:only-child::after {
  display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child {
  padding-top: 0;
}
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::after,
.tree li:last-child::before {
  border-left: 0px;
}
/*Adding back the vertical connector to the last nodes*/
/*
.tree li:last-child::before{
    //border-top: 2px solid black;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}
*/
/*Time to add right connectors from parents*/
.tree ul ul::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  border-top: 2px solid black;
  width: 85px;
  height: 100%;
}
.tree li a {
  display: inline-block;
  background-color: #f3f3f3;
  text-decoration: none;
  /*
    border: 1px solid @color-bg-gray;
    padding: 5px 10px;

    font-family: arial, verdana, tahoma;
    font-size: 11px;

    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    */
}
/*Exception*/
.tree li.remote-from-lease {
  padding-bottom: 0px;
}
.tree li.remote-from-lease::before,
.tree li#networkRootNode::before {
  display: none;
}
.tree li#networkRootNode::after {
  border: none;
}
.tree li.remote-from-lease::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 83px;
  border-left: 2px solid black;
  border-bottom: none;
  width: 2px;
  height: 30px;
  z-index: -10;
}
.tree li#networkRootNode {
  padding: 25px 0 0 0;
}
.tree li.subnode-only-child::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  border-top: 2px solid black;
  width: 85px;
  height: 0;
}
.tree ul li#networkRootNode:not(:first-child) td::before {
  content: '';
  position: absolute;
  top: 0;
  border-left: 2px solid black;
  border-bottom: none;
  width: 2px;
  height: 50%;
  left: 200px;
  z-index: -10;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
/*
.tree li a:hover, .tree li a:hover+ul li a {
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before{
    border-color:  #94a0b4;
}
*/
/*Thats all. I hope you enjoyed it.
Thanks :)*/
.network-node {
  position: relative;
  background-color: #f3f3f3;
  padding: 12px;
  width: 400px;
  max-width: 400px;
  box-sizing: border-box;
}
.network-node .equipment-icon {
  position: relative;
  float: left;
  width: 64px;
  max-width: 64px;
  box-sizing: border-box;
}
.network-node .equipment-icon emded,
.network-node .equipment-icon img {
  width: 64px;
  max-width: 64px;
}
.network-node .equipment-icon img {
  position: relative;
  top: 10px;
}
.network-node .status-icon {
  position: relative;
  float: left;
  width: 30px;
  max-width: 30px;
  margin-left: 24px;
  margin-rigth: 8px;
  top: 20px;
  box-sizing: border-box;
}
.network-node .status-icon img {
  max-width: 30px;
  width: 30px;
}
.network-node .info {
  position: relative;
  float: right;
  width: 250px;
  text-align: left;
  font-size: 12px;
  color: #757575;
}
.network-node .info .title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #333333;
}
.network-node .info .status-message {
  display: block;
}
.network-node .info .status-message.error {
  color: #e55712;
}
.network-node .info .status-message.warning {
  color: #eb9e10;
}
.network-node .info .content {
  display: block;
}
#networkRootNode table td {
  border-top: 0px;
}