header, .alert-message, body.modal-overlay-active #modal_overlay {
align-items: center;
}
body.modal-overlay-active #modal_overlay {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#modal_overlay .right {
align-items: end;
justify-items: end;
}
.cbi-rowstyle-2, .tr.table-titles, .tr.cbi-section-table-titles, .tabs > li:not(.active), .cbi-tabmenu > .cbi-tab-disabled, .tabs > li, .cbi-tabmenu > li, .tabs, .cbi-tabmenu, .ifacebox-head, .ifacebadge, .modal .table, .modal .alert-message {
background: none;
}
.cbi-progressbar, .table .td, .table .th, footer, .modal, button, .actions, .cbi-page-actions, input, textarea, select, .cbi-select, .cbi-dropdown:not(.btn):not(.cbi-button), .btn, .tabs > li:not(.active), .cbi-tabmenu > .cbi-tab-disabled, .tabs > li, .cbi-tabmenu > li, hr, .ifacebox-head, .ifacebox, .ifacebadge, .cbi-dropdown[open] > ul.dropdown > li, .cbi-dropdown[open] > ul.dropdown, .cbi-dropdown[open] > ul.dropdown > li:focus, .uci-dialog div > del, .uci-dialog div > ins, .uci-dialog div > var, .alert-message, .item::after, .item, input[type="checkbox"]::before {
border: none;
}
table.table {
border: 16px solid transparent;
}
.item::after, .add-item > input[type="text"] + .cbi-button {
border-radius: 50%;
font-size: 20px;
height: 20px;
line-height: 20px;
margin: auto 8px;
width: 20px;
}
.cbi-dropdown.btn > .open, .cbi-dropdown.cbi-button > .open {
border-width: 2px;
font-size: 18px;
margin-right: -16px;
}
header, .dropdown-menu a:hover, button, .modal, .item::after, .btn, .cbi-button, .cbi-select, .cbi-dropdown, .cbi-dynlist > .item, input[type="checkbox"]::before, input[type="radio"]::before, input, button, textarea, .ifacebox, .cbi-dropdown[open] > ul.dropdown, .cbi-select select option, .cbi-dropdown[open] > ul.dropdown > li, .dropdown-menu, .alert-message, .ifacebadge {
box-shadow: none;
}
.add-item > input[type="text"] + .cbi-button {
color: transparent;
}
.add-item > input[type="text"] + .cbi-button:before {
display: block;
content: "+";
}
header, #modal_overlay .right, , #modal_overlay .left {
display: flex;
}
.modal.login, .table .td[data-name="_ifacebox"] {
display: grid;
}
hr, #lan-ifc-devices span, footer, #cbi-network-wan .ifacebox-body br, #cbi-network-lan .ifacebox-body br, .ifacebadge img, #wan-ifc-devices .cbi-tooltip-container, h2 {
display: none;
}
.td.cbi-section-actions > :not(.cbi-dropdown) > *, #modal_overlay .left, #modal_overlay .right {
flex: 0;
}
.modal.login label {
flex: 1;
}
body, label, input, button, select, textarea, code, pre {
font-family: none;
}
.label, [data-indicator] {
font-size: 11px;
}
.table, .item::after, .btn, .cbi-button, label, input, button, select, textarea {
font-size: 14px;
}
.table .tr:first-child .th, .tabs, .cbi-tabmenu, body, code, pre {
font-size: 15px;
}
h3 {
font-size: large;
}
em {
font-style: unset;
}
h1, h2, h3, legend, h4, h5, h6, .tabs, .cbi-tabmenu, .label, [data-indicator], .add-item > input[type="text"] + .cbi-button:before, .table .tr:first-child .th, .item::after {
font-weight: 500;
}
.zone-forwards, .network-status-table, .uci-change-legend, .td.cbi-section-table-cell div, #modal_overlay .right, .cbi-value {
gap: 8px;
}
div:has(.right) {
gap: 64px;
justify-content: space-between;
}
.cbi-dynlist > .add-item, .td.cbi-section-actions > *, .item::after, .cbi-dropdown > ul > li, .table .td[data-name="_ifacebox"], .cbi-tabmenu {
justify-content: center;
}
::-webkit-scrollbar, .cbi-progressbar {
height: 4px;
}
input[type="checkbox"], input[type="radio"] {
height: 14px;
}
header {
height: 56px;
left: 0;
position: fixed;
right: 0;
}
input, .btn, .cbi-button, .cbi-dropdown > .open, .cbi-dropdown > .more, .cbi-value-field, .cbi-value label.cbi-value-title {
line-height: 36px;
}
h3 {
line-height: 4rem;
}
input, input[type="text"] + .cbi-button, input[type="password"] + .cbi-button, select + .cbi-button, .cbi-select + .cbi-button {
height: 36px;
}
.ifacebadge.large, .network-status-table .ifacebox-body .ifacebadge, .ifacebadge > *, .ifacebadge.large > *, ul, ol, .td.cbi-section-actions > :not(.cbi-dropdown) > *, .cbi-value-field, .alert-message p, .brand, header, .cbi-dropdown.btn > ul:not(.dropdown), .cbi-dropdown.cbi-button > ul:not(.dropdown) {
margin: 0;
}
.modal.login > button, button.cbi-button {
margin: 0 auto;
}
input[type="text"] + .cbi-button, input[type="password"] + .cbi-button, select + .cbi-button, .cbi-select + .cbi-button {
margin: 0 4px;
}
input[type="checkbox"] {
margin: 2px 8px;
}
.network-status-table .ifacebox-body > * {
margin: 8px;
}
.network-status-table .ifacebox, .tabs, .cbi-tabmenu /*, input[type="text"]*/, .modal {
margin: 8px 0;
}
::-webkit-scrollbar-track {
margin: 16px;
}
.alert-message button {
margin-bottom: unset;
}
[open] > .dropdown > li:not(:last-of-type) {
margin-bottom: 4px;
}
.modal > *, .cbi-value {
margin-bottom: 8px;
}
.table {
margin-bottom: 16px;
}
.cbi-value-description:not(:empty)::before {
margin-top: 9px;
}
.container {
margin-top: 56px;
}
.ifacebox {
margin: 0 8px;
width: 100px;
}
/*.container, */.modal {
max-width: fit-content;
}
a.menu::after {
opacity: 1;
}
a:focus, :focus-visible {
outline: none;
}
html, .modal > textarea {
overflow: overlay;
}
.cbi-value label.cbi-value-title, .add-item > input[type="text"] + .cbi-button, .item::after, .ifacebox, .network-status-table .ifacebox-body .ifacebadge, .tabs, .cbi-tabmenu {
padding: 0;
}
input[type="text"] + .cbi-button, input[type="password"] + .cbi-button, select + .cbi-button, .cbi-select + .cbi-button, .btn, .cbi-button {
padding: 0 16px;
}
body {
padding: 0 24px;
}
.spinning {
padding: 0 34px;
place-self: center;
}
.nav a, .alert-message {
padding: 8px 16px;
}
.dropdown-menu, .label.notice, [data-indicator], .ifacebox, .ifacebadge.large, .cbi-dropdown[open] > ul.dropdown, .table .th, #syslog, pre, textarea {
padding: 8px;
}
.table .td, .controls > * {
padding: 8px 0;
}
.ifacebox-body {
padding: 8px 0 0;
}
.modal {
padding: 16px;
}
.td.left:not(:last-of-type) {
padding-right: 8px;
}
textarea {
resize: none;
}
h3, h4, .tr.placeholder > .td, input, textarea, select, .cbi-select, .cbi-dropdown:not(.btn):not(.cbi-button), .alert-message, .spinning, .add-item > input[type="text"] + .cbi-button, .cbi-dynlist > .item, .zonebadge, code, pre, .modal p, .table .tr:first-child .th, .table .td, h5, .cbi-section-descr {
text-align: center;
}
.nav .dropdown-menu li a, header a, .ifacebadge {
text-shadow: none;
}
.dropdown-menu {
top: 36px;
}
::placeholder, header, .btn, select, h1, h2, h3, h4, .table .tr:first-child .th, .btn_spinner, label, .tabs, .cbi-tabmenu, .controls, .spinning, p, .ifacebox, button {
user-select: none;
}
label.btn {
white-space: pre-wrap;
}
td.td.left {
width: unset;
}
table .td {
width: fit-content;
}
.table .td[data-name="_ifacebox"], .tr.placeholder .nowrap, .tr.placeholder > .td {
width: -webkit-fill-available;
}
::-webkit-scrollbar {
width: 4px;
}
.modal.login > button {
width: 128px;
}
:root {
caret-color: #1a73e8;
--background-color-high: #000;
--background-color-low: none;
--background-color-medium: #333;
--error-color-high: #fff;
--error-color-high-rgb: 255, 0, 0;
--on-error-color: #fff;
--on-success-color: #fff;
--primary-color-high: #1a73e8;
--primary-color-low: #1a73e8;
--primary-color-medium: #1a73e8;
--success-color-high: #fff;
--text-color-high: #fff;
--text-color-medium: #aaa;
}
header, #modal_overlay {
background: #00000099;
}
header, .dropdown-menu, #modal_overlay {
backdrop-filter: blur(16px);
}
.table, .cbi-dropdown[open] > ul.dropdown, .modal.login {
background: #1b1b1b;
}
input, textarea, select, .cbi-select, .cbi-dropdown:not(.btn):not(.cbi-button), .ifacebadge.large, .alert-message, .item, [data-indicator], .ifacebox {
background: #333;
}
.dropdown-menu, .modal, .label.notice {
background: #333333cc;
}
.cbi-button.spinning::before {
background: #fff;
}
::-webkit-scrollbar-thumb, .btn, .item::after, .btn, .cbi-button, .uci-dialog div > ins, .spinning::before, [data-darkmode="true"] .zonebadge[style], [data-darkmode="true"] .ifacebox-head[style] {
background: #1a73e8;
}
::selection, .uci-dialog var > ins {
background: #1a73e866;
}
.dropdown-menu li a:hover, button:hover, .btn:hover, .nav a.menu:hover, header .brand:hover, header ul .active > a {
background: #1a73e833;
}
.uci-dialog var > del, .uci-dialog div > del {
background: #f00;
}
header, header a, footer, button, .label.notice, [data-indicator], .ifacebox-head, .btn.primary, .cbi-button-action.important, .cbi-button-apply, .cbi-section-actions .cbi-button-edit, .cbi-button-action, .cbi-button-reload, .alert-message, .item::after, .add-item > input[type="text"] + .cbi-button:before, [selected], .cbi-dropdown[open] > ul.dropdown > li:focus {
color: #fff;
}
::placeholder {
color: #aaa;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
}
.dropdown-menu, .modal, .table, .ifacebox, .ifacebadge.large, .cbi-dropdown[open] > ul.dropdown, #modal_overlay textarea, .item, #syslog {
border-radius: 16px;
}
.dropdown-menu li a:hover, .cbi-progressbar > div, button, .btn, .nav a.menu:hover, header .brand:hover, header ul .active > a, .label.notice, [data-indicator], input, select, .cbi-select, .cbi-dropdown:not(.btn):not(.cbi-button), .cbi-select select option:checked, .cbi-dropdown[open] > ul.dropdown > li[selected], .cbi-dropdown[open] > ul.dropdown > li:hover, .alert-message, .cbi-button-neutral, .cbi-button-download, .cbi-button-find, .cbi-button-link, .cbi-button-up, .cbi-button-down, [data-darkmode="true"] .zonebadge[style], [data-darkmode="true"] .ifacebox-head[style], .cbi-dropdown[open] > ul.dropdown > li:focus {
border-radius: 32px;
}
There you go. And I use ChromeOS, dunno how you picked that up.