mirror of
https://github.com/Ysurac/openmptcprouter-feeds.git
synced 2025-03-09 15:40:03 +00:00
Add OpenMPTCProuter status view
This commit is contained in:
Ycarus
parent
8b4c845a9e
commit
144e0f45b9
15 changed files with 787 additions and 3 deletions
|
|
@ -0,0 +1,304 @@
|
|||
.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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue