You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
614 lines
14 KiB
SCSS
614 lines
14 KiB
SCSS
html, body {
|
|
background-color: #f1f4f5;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'FontAwesome';
|
|
src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
|
|
src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
// green theme
|
|
// $primary-color: #27ae60;
|
|
// $primary-color-hover: lighten( $primary-color, 10% );
|
|
|
|
// blue theme
|
|
// $primary-color: #3498db;
|
|
// $primary-color-hover: lighten( $primary-color, 10% );
|
|
|
|
// tomato red theme
|
|
$primary-color: #ea3200;
|
|
$primary-color-hover: lighten( $primary-color, 10% );
|
|
|
|
|
|
.fa {
|
|
display: inline-block;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: inherit;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
br {
|
|
height: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: none;
|
|
}
|
|
|
|
table#container {
|
|
width: 100% !important;
|
|
margin: 0 0 0 0;
|
|
}
|
|
|
|
td#content a {
|
|
color: #536270;
|
|
}
|
|
|
|
td#content a:hover {
|
|
background: none;
|
|
color: $primary-color;
|
|
}
|
|
|
|
small a {
|
|
color: white !important;
|
|
}
|
|
|
|
small a:hover {
|
|
color: white !important;
|
|
background-color: #76838f !important;
|
|
}
|
|
|
|
/*CUSTOM ICONS*/
|
|
|
|
|
|
td#navi a.indent1:before {
|
|
width: 20px;
|
|
}
|
|
|
|
td#navi a.active.indent1:before {
|
|
width: 20px;
|
|
color: $primary-color;
|
|
}
|
|
|
|
td#navi a.indent2:before {
|
|
width: 15px;
|
|
content: "\f105";
|
|
display: inline-block;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: 13px;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/*home*/
|
|
td#navi a:first-of-type:before {
|
|
content: "\f015";
|
|
display: inline-block;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: 16px;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
/*bandwidth*/
|
|
td#navi a.indent1[href*="bwm"]:before {
|
|
content: "\f1fe";
|
|
display: inline-block;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: 16px;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
/*tools*/
|
|
td#navi a.indent1[href*="tools"]:before {
|
|
content: "\f0ad";
|
|
display: inline-block;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: 16px;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
/*basic*/
|
|
td#navi a.indent1[href*="basic"]:before {
|
|
content: "\f01c";
|
|
display: inline-block;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: 16px;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
/*advanced*/
|
|
td#navi a.indent1[href*="advanced"]:before {
|
|
content: "\f132";
|
|
display: inline-block;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: 16px;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
/*port forward*/
|
|
td#navi a.indent1[href*="forward"]:before {
|
|
content: "\f064";
|
|
display: inline-block;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: 16px;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
/*quality of service*/
|
|
td#navi a.indent1[href*="qos"]:before {
|
|
content: "\f200";
|
|
display: inline-block;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: 16px;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
/*access restriction*/
|
|
td#navi a.indent1[href*="restrict"]:before {
|
|
content: "\f023";
|
|
display: inline-block;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: 16px;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
/*administration*/
|
|
td#navi a.indent1[href*="admin"]:before {
|
|
content: "\f085";
|
|
display: inline-block;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: 16px;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
|
|
|
|
/*about*/
|
|
td#navi a.indent1[href*="about"] {
|
|
color: #2b323a;
|
|
position: absolute;
|
|
display: inline-block;
|
|
top: 12px;
|
|
right: 400px;
|
|
text-shadow: none;
|
|
font-size: 13px;
|
|
}
|
|
td#navi a.indent1[href*="about"]:before {
|
|
content: "\f05a";
|
|
width: 11px;
|
|
display: inline-block;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: 16px;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
padding-right: 10px;
|
|
}
|
|
td#navi a.indent1[href*="about"]:hover {
|
|
color: $primary-color;
|
|
}
|
|
td#navi a.active[href*="about"] {
|
|
color: $primary-color !important;
|
|
}
|
|
|
|
/*reboot*/
|
|
td#navi a.indent1[href*="javascript:reboot()"] {
|
|
color: #2b323a;
|
|
position: absolute;
|
|
display: inline-block;
|
|
top: 12px;
|
|
right: 280px;
|
|
text-shadow: none;
|
|
font-size: 13px;
|
|
}
|
|
td#navi a.indent1[href*="javascript:reboot()"]:before {
|
|
content: "\f021";
|
|
width: 11px;
|
|
display: inline-block;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: 16px;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
padding-right: 10px;
|
|
}
|
|
td#navi a.indent1[href*="javascript:reboot()"]:hover {
|
|
color: $primary-color;
|
|
}
|
|
|
|
/*shutdown*/
|
|
td#navi a.indent1[href*="javascript:shutdown()"] {
|
|
color: #2b323a;
|
|
position: absolute;
|
|
display: inline-block;
|
|
top: 12px;
|
|
right: 150px;
|
|
text-shadow: none;
|
|
font-size: 13px;
|
|
}
|
|
td#navi a.indent1[href*="javascript:shutdown()"]:before {
|
|
content: "\f011";
|
|
width: 11px;
|
|
display: inline-block;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: 16px;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
padding-right: 10px;
|
|
}
|
|
td#navi a.indent1[href*="javascript:shutdown()"]:hover {
|
|
color: $primary-color;
|
|
}
|
|
|
|
/*logout*/
|
|
td#navi a.indent1[href*="javascript:logout()"] {
|
|
color: #2b323a;
|
|
position: absolute;
|
|
display: inline-block;
|
|
top: 12px;
|
|
right: 50px;
|
|
text-shadow: none;
|
|
font-size: 13px;
|
|
}
|
|
td#navi a.indent1[href*="javascript:logout()"]:before {
|
|
content: "\f08b";
|
|
width: 11px;
|
|
display: inline-block;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: 16px;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
padding-right: 10px;
|
|
}
|
|
td#navi a.indent1[href*="javascript:logout()"]:hover {
|
|
color: $primary-color;
|
|
}
|
|
|
|
/* HEADER */
|
|
|
|
|
|
table#container td#header {
|
|
background-color: white;
|
|
border-bottom: none;
|
|
padding: 0 0 0 0;
|
|
position: relative;
|
|
height: 60px;
|
|
box-shadow: rgba(0,0,0,0.2) 0px 0px 8px;
|
|
}
|
|
|
|
table#container td#header div.title {
|
|
font-size: 16px;
|
|
background-color: $primary-color;
|
|
height: 60px;
|
|
display: block;
|
|
width: 240px;
|
|
position: absolute;
|
|
top: 0px;
|
|
line-height: 60px;
|
|
text-align: center;
|
|
|
|
background: no-repeat $primary-color url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkMxODRFQUVDRDNBMTFFNjk3NDFDRkE2N0RCRjNCMDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkMxODRFQUZDRDNBMTFFNjk3NDFDRkE2N0RCRjNCMDkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQzE4NEVBQ0NEM0ExMUU2OTc0MUNGQTY3REJGM0IwOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQzE4NEVBRENEM0ExMUU2OTc0MUNGQTY3REJGM0IwOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnoUfOQAAAImSURBVHjatNZPSFRBHMDxUQtJcgVTSykCCRSKFTpoEkaldhEqyFvkwfCiEIQYQiCeAy+RiNghECIiigI9CCmRJP07eFMkNHWJUqOsXWsNXt8f/jamx74YzfeDD/uYnZnfzLz3Zp7xPM9sQR6eoMKlfqYJjgMoD/hvAMuYNA6RIZkCIgfPsYYYJtCL03iEIv0vGwmrTcI1SRRxHMJd5Gv5YxRIOy1vRS4+I4mWtLPzrV8VhpDEa+zHbjTiPuLeRqR+JVbwER3Yhds4b/drJ7iEhPd3SOXDmMRPJXXeaaJ1PMUR5GPCatuLTDvJCfyyKkintTiIRau8Dwt4jzZrRnM4iQbc0cFI3Egl2YlXVkfXkIXj2pnEGnqwD1+17BSOYkQHKMmjKMIPrSPlUUlS51siabRX70WF3qdinXE2YlqvTZcjF4XYgwge+Pq7Ke/JWd+zUI83aNcnJ6ll9/RxHdZ633EMb9GFbrzABV9/lUZH7hqXdbQvUYNzDm1mJcn0JpLErKUT/Q5tlnYwnTzjHiUYQ6e+rBcd2njyxn/iotCEF/Ny41dMuLEsSaZDTjIrSUZDTvJM7kkxF1OIhJBAtv1ymckH3AppFoNYSD3vEd1ZtzO+6FHx5/hdRRO+beMsrmAx3aFVpyP437gadGilVOt5spWQU7LZ32fQZ4xs89f1jHCJuB67pen6+9fXitGPBjkKzqBMtx/Z7td1p5jDOB5iJqiT3wIMAOGsd+Td/AWpAAAAAElFTkSuQmCC');
|
|
background-position: 66px 16px;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
table#container td#header div.title small {
|
|
display: none;
|
|
}
|
|
|
|
table#container td#header div.version {
|
|
background-color: white;
|
|
height: 60px;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 240px;
|
|
line-height: 60px;
|
|
padding-left: 20px;
|
|
color: #536270;
|
|
font-weight: normal;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* NAVI */
|
|
|
|
td#navi {
|
|
width: 240px !important;
|
|
max-width: 240px;
|
|
background-color: #2b323a;
|
|
padding: 10px 0 0 0;
|
|
}
|
|
|
|
td#navi a {
|
|
color: #959ba0;
|
|
padding: 0 0 0 0;
|
|
display: block;
|
|
text-shadow: #24272b 1px 1px 3px;
|
|
}
|
|
|
|
|
|
td#navi a:hover {
|
|
background-color: transparent !important;
|
|
color: white;
|
|
}
|
|
|
|
td#navi a.indent1 {
|
|
margin-left: 0px;
|
|
padding: 0 0 0 25px;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
font-weight: normal;
|
|
font-size: 14px;
|
|
}
|
|
|
|
td#navi a.indent1.active {
|
|
color: white;
|
|
background-color: none;
|
|
}
|
|
|
|
td#navi a.indent2 {
|
|
margin-left: 0px;
|
|
padding: 0 0 0 55px;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
}
|
|
|
|
td#navi a.indent2.active {
|
|
background-color: #252b31;
|
|
color: white;
|
|
}
|
|
|
|
/* CONTENT */
|
|
|
|
td#content {
|
|
width: auto;
|
|
background-color: #f1f4f5;
|
|
}
|
|
|
|
div#ident {
|
|
display: none;
|
|
}
|
|
|
|
div.section-title {
|
|
margin-top: 20px;
|
|
margin-left: 40px;
|
|
margin-right: 40px;
|
|
margin-bottom: 0px;
|
|
background-color: #ffffff;
|
|
|
|
border-top-left-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
padding-top: 18px;
|
|
padding-left: 20px;
|
|
border-bottom: none;
|
|
|
|
color: #536270;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
|
|
box-shadow: rgba(0,0,0,0.1) 1px 1px 1px;
|
|
}
|
|
|
|
div.section {
|
|
margin-top: 0px;
|
|
margin-left: 40px;
|
|
margin-right: 40px;
|
|
margin-bottom: 20px;
|
|
background-color: #ffffff;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
padding-top: 15px;
|
|
|
|
border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
box-shadow: rgba(0,0,0,0.1) 1px 1px 1px;
|
|
}
|
|
|
|
/* TABLES */
|
|
|
|
table.tomato-grid {
|
|
margin: 0 0 0 0;
|
|
border-spacing: 0px;
|
|
border: none;
|
|
}
|
|
|
|
table.tomato-grid tr.odd {
|
|
cursor: default;
|
|
}
|
|
|
|
table.tomato-grid tr.even {
|
|
cursor: default;
|
|
}
|
|
|
|
table.tomato-grid tr.header td {
|
|
background-color: white !important;
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
padding-left: 5px;
|
|
font-size: 13px;
|
|
color: #536270;
|
|
border-bottom: 1px solid #e4eaec;
|
|
}
|
|
|
|
table.tomato-grid tr.odd {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
table.tomato-grid tr td {
|
|
background-color: transparent !important;
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
padding-left: 5px;
|
|
font-size: 12px;
|
|
color: #76838f;
|
|
border-bottom: 1px solid #e4eaec;
|
|
}
|
|
|
|
table.tomato-grid tr td small {
|
|
display: block;
|
|
}
|
|
|
|
table.tomato-grid tr td small a {
|
|
color: red;
|
|
display: inline-block;
|
|
padding: 4px 7px;
|
|
background-color: #536270;
|
|
color: white;
|
|
font-size: 11px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
table.tomato-grid tr td small a:hover {
|
|
background-color: #76838f;
|
|
}
|
|
|
|
table.tomato-grid tr.even:hover {
|
|
background-color: white !important;
|
|
}
|
|
|
|
table.tomato-grid .controls {
|
|
background-color: white !important;
|
|
}
|
|
|
|
table.tomato-grid .editor {
|
|
background-color: white !important;
|
|
}
|
|
|
|
table.tomato-grid .editor td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
input[type=button] {
|
|
background-color: $primary-color;
|
|
border: none;
|
|
padding: 10px 18px;
|
|
color: white;
|
|
border-radius: 3px;
|
|
font-size: 13px;
|
|
width: auto;
|
|
}
|
|
|
|
input[type=button]:hover {
|
|
background-color: $primary-color-hover;
|
|
cursor: pointer;
|
|
width: auto;
|
|
}
|
|
|
|
div.section div {
|
|
background-color: transparent;
|
|
float: none !important;
|
|
color: #76838f;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #e4eaec;
|
|
}
|
|
|
|
|
|
/* FOOTER */
|
|
|
|
td#footer {
|
|
border: none;
|
|
padding: 0 0 0 0;
|
|
background-color: #f1f4f5;
|
|
text-align: left;
|
|
}
|
|
|
|
td#footer:before {
|
|
display: block;
|
|
background-color: #2b323a;
|
|
width: 240px;
|
|
min-height: 500px;
|
|
content: "";
|
|
float: left;
|
|
}
|
|
|
|
td#footer div {
|
|
text-align: left !important;
|
|
margin-bottom: 10px;
|
|
margin-left: 290px;
|
|
}
|
|
|
|
span#footer-msg {
|
|
display: block;
|
|
float: left;
|
|
width: 15px;
|
|
}
|
|
|
|
|
|
/*STATS*/
|
|
|
|
div#rstats {
|
|
background-color: white;
|
|
border-radius: 4px;
|
|
margin-top: 20px;
|
|
margin-left: 40px;
|
|
margin-right: 40px;
|
|
margin-bottom: 0px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
|
|
box-shadow: rgba(0,0,0,0.1) 1px 1px 1px;
|
|
}
|
|
|
|
span#dtime {
|
|
display: none;
|
|
}
|
|
|
|
div#tab-area {
|
|
margin-bottom: 17px;
|
|
}
|
|
|
|
div#tabs-bottom {
|
|
border: none;
|
|
}
|
|
|
|
ul#tabs li a {
|
|
padding: 8px 8px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
ul#tabs li a.active {
|
|
background-color: $primary-color;
|
|
color: white !important;
|
|
}
|
|
|
|
ul#tabs li a:hover {
|
|
background-color: silver;
|
|
}
|
|
|