fixes and improvements for MI-R3G router Padavan firmware
/* ==UserStyle==
@name MI-R3G Padavan Tweaks
@namespace almaceleste
@version 0.3.0
@description fixes and improvements for MI-R3G router Padavan firmware
@author 🄯 almaceleste (https://almaceleste.github.io)
@license AGPL-3.0-or-later; http://www.gnu.org/licenses/agpl.txt
@homepageURL https://github.com/almaceleste/userstyles
@supportURL https://github.com/almaceleste/userstyles/issues
@preprocessor uso
@var text lan-ip 'router lan ip' 192.168.1.1
@var text wan-ip 'router wan ip' 192.168.1.1
@var text frame-height 'status frame height' 705
@var select invert-type 'icons dark mode' {
'unset': 'none',
'invert*': 'invert(.9)',
'shadow': 'drop-shadow(0 0 1px whitesmoke)',
'tricky': 'drop-shadow(0 0 -1px whitesmoke)'
}
@var select highlight-color 'highlight color' [
'transparent',
'black',
'darkgreen',
'deepskyblue*',
'gold',
'indigo',
'lime',
'magenta',
'navy',
'orangered',
'white'
]
@var select alert-color 'alert color' [
'transparent',
'black',
'darkgreen',
'deepskyblue',
'gold',
'indigo',
'lime',
'magenta',
'navy',
'orangered*',
'white'
]
@var select footer-position 'footer position' {
'center': `
left: 50%;
transform: translateX(-50%);
width: 710px;
`,
'left*': `
width: 240px;
`,
'right': `
right: 25px;
width: 240px;
`
}
==/UserStyle== */
@-moz-document url-prefix(http:///*[[lan-ip]]*//),
url-prefix(https:///*[[lan-ip]]*//),
url-prefix(http:///*[[wan-ip]]*//),
url-prefix(https:///*[[wan-ip]]*//) {
body::-webkit-scrollbar {
display: none;
}
body,
body.body_iframe,
html {
background: url(/bootstrap/img/dark-bg.jpg) repeat fixed center top #333;
color: whitesmoke;
height: 100%;
margin: 0;
}
* {
text-shadow: none !important;
}
button:hover,
input:hover {
background-image: initial !important;
}
a:hover,
button:hover,
input:hover,
select:hover,
span:hover,
#logo:hover,
.popover {
color: /*[[highlight-color]]*/;
filter: drop-shadow(0 0 2px /*[[highlight-color]]*/);
}
button[onclick="clearOut();"]:hover,
input[onclick="applyRule()"]:hover,
input[onclick="applyRule();"]:hover,
input[onclick="clearLog();"]:hover,
input[onclick="fwUpload();"]:hover,
input[onclick="saveMode();"]:hover,
input[onclick="uploadSetting();"]:hover,
input[onclick="uploadStorage();"]:hover,
#bn_apply:hover,
#btn_connect_0:hover,
#btn_connect_1:hover,
#clearlog_btn:hover,
#commit_nvram:hover,
#commit_storage:hover,
#logout_btn:hover,
#reboto_btn:hover,
.btn-danger:hover {
filter: drop-shadow(0 0 3px /*[[alert-color]]*/);
}
i,
#Clients_table img,
#Senario img,
.icon-remove {
filter: /*[[invert-type]]*/;
}
.icon-remove:hover {
filter: drop-shadow(0 0 3px /*[[alert-color]]*/) drop-shadow(0 0 5px /*[[alert-color]]*/);
}
.big-icons,
div.main_itoggle label.itoggle span {
filter: invert(.82);
}
/* popover info window */
.popover {
transform: translateX(-15%);
}
.popover > .arrow {
border-right-color: #555 !important;
}
.popover-inner {
border: 1px solid #555;
padding: 0;
width: 250px;
}
.popover-content,
.popover-title {
background-color: #333 !important;
color: whitesmoke !important;
padding: 7px 15px;
}
#statusframe {
min-height: /*[[frame-height]]*/px;
}
/* main wrapper */
.wrapper {
height: calc(/*[[frame-height]]*/ + 100)px;
left: -5%;
margin-bottom: 70px;
position: relative;
top: -20px;
}
.wrapper > div.container-fluid:first-of-type {
background: url(/bootstrap/img/dark-bg.jpg) repeat fixed center top transparent;
height: 165px;
/* padding-bottom: 5px; */
position: sticky;
top: 0;
z-index: 9;
}
.wrapper > .container-fluid:nth-last-of-type(2) > .row-fluid > .span9 > .row-fluid > .span2 {
position: sticky;
top: 165px;
}
.wrapper > .container-fluid:nth-last-of-type(2) > .row-fluid > .span9 > .row-fluid > .span2 > .well {
height: unset !important;
min-height: 320px;
}
.wrapper .container-fluid:not(:first-child) > .row-fluid > .span3 {
position: sticky;
top: 165px;
}
.wrapper > form > .container-fluid > .row-fluid {
margin-bottom: 70px;
}
.wrapper > #LoadingBar ~ .container-fluid {
position: relative;
top: 20px;
}
.wrapper > form[action='upgrade.cgi'] {
position: relative;
top: 25px;
}
/* highcharts */
.highcharts-background {
fill: #333 !important;
}
.highcharts-container > svg > rect {
fill: transparent;
}
.highcharts-container g.highcharts-legend-item text,
.highcharts-container text.highcharts-title {
fill: whitesmoke !important;
}
#mainMenu,
.well {
background-color: unset !important;
color: whitesmoke !important;
}
.bar_nav ul,
.bar_nav ul a,
.drop_box,
.grad_grey,
.side_nav ul,
.side_nav ul a {
background-color: #333 !important;
background-image: none;
}
.bar_nav ul li:hover > a,
.grad_grey_reverse,
.side_nav #subMenu > a[style],
.side_nav ul li:hover > a,
.side_nav ul li a:hover,
.side_nav ul li.active > a {
background-color: #555 !important;
background-image: none;
border-bottom-color: unset;
border-top: none;
color: whitesmoke !important;
}
.nav-tabs a:hover {
background-color: #555 !important;
color: whitesmoke;
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover {
background-color: #555 !important;
background-image: none;
color: unset;
}
.bar_nav ul li a,
.side_nav ul li a {
border-bottom: 1px solid #777;
background-image: none;
border-top: none;
margin-top: 1px;
}
g.highcharts-grid > path {
stroke: #555 !important;
}
g.highcharts-button > rect {
background-color: #555 !important;
color: whitesmoke !important;
fill: whitesmoke !important;
}
g.highcharts-button > text {
background-color: whitesmoke !important;
color: #555 !important;
fill: #555 !important;
}
span,
text,
#system_time_log_area,
.table td,
.table th {
cursor: default;
}
input,
#system_time_log_area,
.table td,
.table th {
background-color: #333 !important;
border-color: #777 !important;
color: whitesmoke;
}
.table tr:first-child th {
background-color: #555 !important;
border-color: #777 !important;
color: whitesmoke;
}
.table-striped tbody tr:nth-child(2n) td,
.table-striped tbody tr:nth-child(2n) th {
background-color: #555 !important;
}
input[type="file"],
select,
textarea,
#commit_nvram,
#commit_storage,
#log_area,
#syslog_panel_button,
#syslog_panel_button:hover,
#logout_btn,
#reboto_btn,
#wifi5_b_g,
.syslog_panel {
background-color: #333 !important;
background-image: none;
border-color: #555 !important;
color: whitesmoke;
}
a.help_tooltip,
a.help_tooltip:hover {
color: whitesmoke;
}
.alert-info {
background-color: #333;
}
.well .box_head {
position: sticky;
top: 165px;
}
#tabMenu {
position: sticky;
top: 197px;
background-color: #333;
}
/* footer */
#footer {
background: url(/bootstrap/img/dark-bg.jpg) repeat scroll center top transparent;
bottom: 0;
padding: 5px;
position: fixed;
z-index: 9;
/*[[footer-position]]*/
}
/* try to make client table header sticky - does not work for now */
#Clients_table {
position: relative;
}
#Clients_table thead tr:nth-of-type(2) th {
/* position: sticky; */
/* top: 200px; */
}
.body_iframe {
/* overflow-y: scroll; */
}
/* log panel */
#TopBanner {
position: relative;
}
#TopBanner .syslog_panel {
left: 50% !important;
position: absolute !important;
transform: translateX(-60%) translateY(-20px) !important;
}
/* log button */
#TopBanner #syslog_panel_button:hover {
box-shadow: 0 0 5px 0 /*[[highlight-color]]*/;
}
#TopBanner #syslog_panel_button:hover,
#TopBanner #syslog_panel_button span:hover {
cursor: pointer;
filter: none;
}
#TopBanner #syslog_panel_button .label-important {
position: relative;
}
/* create pseudo element under log button for alert event */
#TopBanner #syslog_panel_button .label-important::after {
background-color: #333;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 0 2px 1px /*[[alert-color]]*/;
filter: drop-shadow(0 0 2px /*[[alert-color]]*/);
content: 'Log ';
height: 20px;
font-size: 11px;
position: absolute;
transform: translateX(-70%) translateY(-10%);
width: 62px;
z-index: -1;
}
#TopBanner #syslog_panel_button:hover .label-important::after {
box-shadow: 0 0 2px 2px /*[[alert-color]]*/;
filter: drop-shadow(0 0 3px /*[[alert-color]]*/) drop-shadow(0 0 5px /*[[alert-color]]*/);
}
/* loading bar for firmware update */
#Loading,
#LoadingBar {
bottom: 0;
height: auto !important;
left: 0;
position: fixed !important;
right: 0;
top: 0;
width: auto !important;
}
#LoadingBar .well {
background-color: #333 !important;
}
#LoadingBar .alert {
cursor: default;
background-color: #777 !important;
color: black !important;
}
#LoadingBar .alert:hover {
filter: drop-shadow(0 0 3px /*[[alert-color]]*/) drop-shadow(0 0 5px /*[[alert-color]]*/);
text-shadow: 0 0 2px /*[[alert-color]]*/ !important;
}
#LoadingBar .progress {
background-color: #999 !important;
background-image: none !important;
}
#LoadingBar .progress:hover,
#LoadingBar .progress:hover > .bar {
box-shadow: 0 0 3px 0 /*[[highlight-color]]*/;
filter: drop-shadow(0 0 3px /*[[highlight-color]]*/);
}
#ruleForm > .container-fluid .controls > label > div {
color: whitesmoke;
}
}