// out: ../htdocs/luci-static/argon/css/dark.css, compress: true , sourceMap: false /** * Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template * * luci-theme-argon * Copyright 2023 Jerryk * * Have a bug? Please create an issue here on GitHub! * https://github.com/jerrykuku/luci-theme-argon/issues * * luci-theme-bootstrap: * Copyright 2008 Steven Barth * Copyright 2008 Jo-Philipp Wich * Copyright 2012 David Menting * * MUI: * https://github.com/muicss/mui * * luci-theme-material: * https://github.com/LuttyYang/luci-theme-material/ * * Agron Theme * https://demos.creative-tim.com/argon-dashboard/index.html * * Login background * https://unsplash.com/ * * Licensed to the public under the Apache License 2.0 */ body { background: #1e1e1e; color: #cccccc; } .login-page .login-container { .login-form { background-color: #1e1e1e; -webkit-backdrop-filter: blur(var(--blur-radius-dark)); backdrop-filter: blur(var(--blur-radius-dark)); background-color: rgba(0, 0, 0, var(--blur-opacity-dark)); .brand { color: #adb5bd; } .form-login { .input-group { &::before { color: #adb5bd; } input { background-color: transparent !important; color: #adb5bd; border-bottom: #adb5bd 1px solid !important; border-radius: 0 !important; border-top: none !important; border-left: none !important; border-right: none !important; box-shadow: none; } } .cbi-button-apply { background-color: #483d8b !important; background-color: var(--dark-primary) !important; &:hover, &:focus { opacity: 0.9; } } } } } header::after { background-color: #1e1e1e !important; } .main { .main-left { background-color: #333333 !important; box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .15); .sidenav-header .brand { color: #cccccc; } .nav { .slide { .slide-menu { .active { a { color: #cccccc; &::after { background-color: #cccccc !important; } } &::after { background-color: var(--dark-primary) !important; } } li { a { color: #cccccc; } a:hover { background: none !important; } &::after { background-color: var(--dark-primary) !important; } } } .menu.active { background-color: #483d8b !important; background-color: var(--dark-primary) !important; color: #ffffff !important; a::after { background-color: #ffffff !important; } } } li { a { color: #cccccc !important; } a:hover { background-color: #483d8b !important; background-color: var(--dark-primary) !important; color: #ffffff !important; } } } &::-webkit-scrollbar-thumb { background-color: #252526 !important; } &::-webkit-scrollbar-track { background-color: #333; } } .main-right { background-color: #1e1e1e; } } h2 { color: #ccc; background: #333333; } h3 { color: #ccc; border-bottom: 0; background: #333333; } h4 { color: #8C6900; } abbr { color: var(--dark-primary) !important; } a:link, a:visited, a:active { color: #a5b2ff; } input:-webkit-autofill { background-color: #3c3c3c !important; } #channel_graph { background-color: transparent !important; } .cbi-value-field .cbi-input-apply, .cbi-button-apply, .cbi-button-edit { color: #fff !important; background-color: #483d8b !important; background-color: var(--dark-primary) !important; border-color: #483d8b !important; border-color: var(--dark-primary) !important; } .cbi-section em { color: #ccc; } header.bg-primary { background-color: #1e1e1e !important; } .cbi-map-descr { color: #ccc; } .cbi-section { background: none; box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35) } .panel-title { color: #ccc; background-color: #333333; } div > table > tbody > tr:nth-of-type(2n), div > .table > .tr:nth-of-type(2n) { background-color: #252526; } table > tbody > tr > td, table > tfoot > tr > td, table > thead > tr > td { color: #cccccc; } fieldset > table > tbody > tr:nth-of-type(2n) { background-color: #252526; } table > tbody > tr > td, table > tfoot > tr > td, table > thead > tr > td { border-top: 1px solid #252526; } #swaptotal > div > div, #swapfree > div > div, #memfree > div > div, #membuff > div > div, #conns > div > div, #memtotal > div > div { background-color: var(--dark-primary) !important; } #swaptotal > div > div > div > small, #swapfree > div > div > div > small, #memfree > div > div > div > small, #membuff > div > div > div > small, #conns > div > div > div > small, #memtotal > div > div > div > small { color: #ccc !important; } .node-system-packages > .main .cbi-section-node:first-child .cbi-value-last { line-height: 1.8em; div[style="margin:3px 0; width:300px; height:10px; border:1px solid #000000; background-color:#80C080"] { border: 1px solid #999999 !important; background-color: transparent !important; div { background-color: #ba8b00 !important; } } } table > tbody > tr > th, table > tfoot > tr > th, table > thead > tr > th { background-color: #252526; border-bottom: black 1px solid !important; } tr > td, tr > th, .tr > .td, .tr > .th, .cbi-section-table-row::before, #cbi-wireless > #wifi_assoclist_table > .tr:nth-child(2) { border-top: 0; } .cbi-rowstyle-2 { background-color: #1e1e1e; } .cbi-rowstyle-1 { background-color: #252526; } .cbi-rowstyle-2 .cbi-button-up, .cbi-rowstyle-2 .cbi-button-down, body:not(.Interfaces) .cbi-rowstyle-2:first-child { background-color: rgb(102, 102, 102) !important; } .cbi-section > h3:first-child, .panel-title, h3 { color: #ccc; } h4 { background-color: #1e1e1f; } .cbi-progressbar { background: #282a2c; div { background-color: var(--dark-primary) !important; } } .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { background-color: #1e1e1f; } .cbi-button { color: #ffffff !important; background-color: #483d8b; background-color: var(--dark-primary); } .cbi-section-node { background: none; } abbr { color: #5e72e4; } div > table > tbody > tr:nth-of-type(2n), div > .table > .tbody > .tr:nth-of-type(2n) { background-color: #252526; } #content_syslog { box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35) } #syslog { color: #ccc; background-color: #1e1e1e; } #iwsvg, #iwsvg2, #bwsvg { overflow: hidden; box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35); background-color: #1e1e1e !important; } .tabs { background-color: #252526; li[class~="active"], li:hover { cursor: pointer; color: #ccc !important; a { color: #ccc !important; } } } .tabs > li[class~="active"] > a { color: #ccc; } .tabs > li[class~="active"], .tabs > li:hover { border-bottom: 0.18751rem solid #483d8b; border-bottom: 0.18751rem solid var(--dark-primary); color: var(--dark-primary) !important; background-color: #181819; } .cbi-tabmenu > li > a, .tabs > li > a { color: #ccc; &:hover { color: #ccc; } } .cbi-tabmenu > li { background: #2d2d2d; } .cbi-tabmenu li[class~="cbi-tab"] a { color: #ccc; } .cbi-tabmenu > li:hover { color: #ccc; background: #2d2d2d; border-bottom: 0.18751rem solid var(--dark-primary) !important; } .cbi-tabmenu > li[class~="cbi-tab"] { background-color: #181819; border-bottom: 0.18751rem solid var(--dark-primary) !important; } .cbi-tabcontainer > .cbi-value:nth-of-type(2n) { background-color: #252526; } .cbi-value-title { color: #ccc; } select, input { color: #ccc; background-color: transparent !important; border: 1px solid #252526; box-shadow: none; } select:not([multiple="multiple"]):focus, input:focus { border-color: #483d8b !important; border-color: var(--dark-primary) !important; outline: 0; } select:not([multiple="multiple"]):focus, input:not(.cbi-button):focus, .cbi-dropdown:focus { border-color: #5e72e4; border-color: var(--dark-primary) !important; } select { background-color: #1e1e1e !important; } #cbi-dropbear h2, #cbi-dropbear .cbi-map-descr, #cbi-dropbear .cbi-map-descr abbr, #cbi-rc h2, #cbi-rc .cbi-map-descr, #cbi-distfeedconf h2, #cbi-distfeedconf .cbi-map-descr, #cbi-customfeedconf h2, #cbi-customfeedconf .cbi-map-descr, #cbi-download h2, #cbi-filelist h2 { color: #ccc !important; } .cbi-value-field > ul > li .ifacebadge { background-color: #3c3c3c; } .cbi-section-descr { color: #ccc; } .cbi-input-textarea { background-color: #1e1e1e; color: #ccc; border: 1px solid #3c3c3c !important; } textarea { &:focus-visible { border: 1px solid var(--dark-primary); } } .cbi-section-remove:nth-of-type(2n), .cbi-section-node:nth-of-type(2n) { background-color: #1e1e1e; } .node-system-packages > .main table tr td:nth-last-child(1) { color: #ccc; } .cbi-tooltip { background-color: var(--primary); color: #fff; } .ifacebox { background-color: transparent !important; border: 1px solid #1e1e1e; } .ifacebox-head { color: #ccc; background: #666; } .ifacebox-body { background-color: #333; } .zonebadge strong { color: #333; } .zonebadge > .ifacebadge { background-color: #3c3c3c; } div.cbi-value var, td.cbi-value-field var { color: #5e72e4; } #diag-rc-output > pre { color: #ccc; background-color: #1e1e1e; } .node-services-vssr .block { background-color: #3c3c3c !important; box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35); } .node-services-vssr .block h4 { color: #ccc !important; } .node-services-vssr .status-bar { color: #ccc; box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35); background-color: #1e1e1e; } .node-services-vssr .cbi-section-table-row { color: #ccc; background-color: #3c3c3c !important; box-shadow: 0 0 5px 0 rgba(0, 0, 0, .35) } .node-services-vssr .cbi-section-table-row.fast { background: #483d8b !important; background: var(--dark-primary) !important; color: #fff; } .node-services-vssr .ssr-button { color: #ccc; } .node-services-vssr .incon:nth-child(2) { border-right: #1e1e1e 1px solid; } #xhr_poll_status > .label.success { color: #ccc !important; background-color: darkolivegreen !important; } .notice { background-color: #483d8b !important; background-color: var(--dark-primary) !important; } .cbi-input-find, .cbi-input-save, .cbi-button-add, .cbi-button-save, .cbi-button-find, .cbi-input-reload, .cbi-button-reload { color: #fff !important; background: darkolivegreen !important; border-color: darkolivegreen !important; } .cbi-button-reset, .cbi-input-remove { color: #fff !important; background-color: darkorange !important; border-color: darkorange !important; } .cbi-page-actions .cbi-button-apply, .cbi-section-actions .cbi-button-edit, .cbi-button-edit.important, .cbi-button-apply.important, .cbi-button-reload.important, .cbi-button-action.important { border: 1px #483d8b solid !important; border: 1px var(--dark-primary) solid !important; } .btn[value="Dismiss"], .cbi-button[value="Terminate"], .cbi-button[value="Reset"], .cbi-button[value="Disabled"], .cbi-button[onclick^="iface_reconnect"], .cbi-button[onclick="handleReset(event)"], .cbi-button-neutral[value="Disable"] { color: #fff; border: thin solid darkorange !important; background-color: darkorange !important; } fieldset[id^="cbi-apply-"] { background-color: #333333; } #detail-bubble > div { border: 1px solid #ccc; background: #252525; } .ifacebox-head.active { background-color: var(--dark-primary) !important; } header .fill .status span[data-style="active"] { color: #ccc !important; background-color: darkolivegreen !important; } #cbi-wireless .td, #cbi-network .tr:first-child > .td, .table[width="100%"] > .tr:first-child > .td, [data-page="admin-network-diagnostics"] .tr > .td, .tr.table-titles > .th, .tr.cbi-section-table-titles > .th { background-color: #252526; border-bottom: black 1px solid !important; } .network-status-table .ifacebox-body .ifacebadge { background-color: #252526; border-bottom: 0; box-shadow: none; } td > .ifacebadge, .td > .ifacebadge { color: #fff; background-color: #483d8b; background-color: var(--dark-primary); border: 0; } .alert, .alert-message { background-color: #333; } .alert-message.warning { background-color: #986400 !important; } .alert.error, .alert-message.error { background-color: #784f00; } .alert h4, .alert-message h4 { background-color: #784f00; color: #ffbf00; } .alert-message [class="btn"] { background-color: #777777; color: #ccc; } .uci-dialog { .cbi-section { .uci-change-legend { .uci-change-legend-label { > ins { border-color: #00ad00; background-color: #688668; } > del { border-color: #c60000; background-color: #896565; } > var { background-color: #333; border-color: #666; ins { background-color: #688668; } del { background-color: #896565; } } } } .uci-change-list { > var { background-color: #333; border-color: #666; del { background-color: #896565; } ins { background-color: #688668; } } > ins { border-color: #00ad00; background-color: #688668; } > del { border-color: #c60000; background-color: #896565; } } .uci-change-list + .right { .btn { color: #ccc; } .cbi-button { border: 1px solid #3c3c3c !important; } } } } .btn.danger, .cbi-section-remove > .cbi-button, .cbi-button-remove, .cbi-button-reset, .cbi-button-negative, .cbi-button[value="Stop"], .cbi-button[value="Kill"], .cbi-button[onclick="reboot(this)"], .cbi-button-neutral[value="Restart"] { border: thin solid darkorange !important; background-color: darkorange !important; } .cbi-section, .cbi-section-error, #iptables, .Firewall form, #cbi-network > .cbi-section-node, #cbi-wireless > .cbi-section-node, #cbi-wireless > #wifi_assoclist_table, [data-tab-title], [data-page^="admin-system-admin"]:not(.node-main-login) .cbi-map:not(#cbi-dropbear), [data-page="admin-system-opkg"] #maincontent > .container { background: #1e1e1e !important; box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35); } div[style="width:100%;height:300px;border:1px solid #000;background:#fff"] { background: transparent !important; } [data-page="admin-system-admin"] .cbi-map h2, [data-page="admin-system-admin-password"] .cbi-map h2, [data-page="admin-system-admin"] .cbi-map .cbi-map-descr, [data-page="admin-system-admin-password"] .cbi-map .cbi-map-descr { color: #ccc; } [data-page="admin-system-flash"] { .modal { label > input[type="checkbox"] { top: -0.35rem; } .btn { white-space: normal !important; background-color: darkseagreen; } .alert-message { background-color: transparent !important; } .danger { border: thin solid darkorange !important; background-color: darkorange !important; } } } .cbi-value input[type="password"] + .cbi-button-neutral { background-color: #483d8b !important; background-color: var(--dark-primary) !important; border-color: var(--dark-primary) !important; } .btn, button, select, input, .cbi-dropdown { border: 1px solid #3c3c3c !important; } .cbi-dropdown .preview { color: #ccc; } .cbi-section-table-row { background-color: #1e1e1e !important; } .modal { background-color: #1e1e1e; } .cbi-button-positive { color: #fff !important; background-color: darkolivegreen !important; } [data-page="admin-system-flash"] legend { color: #ccc; } .logout:before { color: #adb5bd !important; } .cbi-dropdown[open] { border-color: #483d8b !important; border-color: var(--dark-primary) !important; } .cbi-dropdown[open] > ul.dropdown { background: #252526 !important; color: #ffffff !important; box-shadow: none; border: 1px solid #3c3c3c !important; } .cbi-dropdown[open] > ul.dropdown li { color: #ffffff; border-bottom: 1px solid #3c3c3c !important; } .cbi-dropdown[open] > ul.dropdown > li[selected] { background-color: #483d8b !important; background-color: var(--dark-primary) !important; border-bottom: 1px solid #3c3c3c !important; } .cbi-dropdown[open] > ul.dropdown > li.focus { background: #483d8b; background: var(--dark-primary); outline: none; } .ifacebadge { background-color: #333333; } .cbi-dynlist > .item > span { border: 1px solid #3c3c3c !important; } .cbi-page-actions .cbi-button-apply, .cbi-section-actions .cbi-button-edit, .cbi-button-edit, .cbi-button-apply, .cbi-button-reload, .cbi-button-action, .cbi-button[value="Submit"], .cbi-button[value="Upload"], .cbi-button[value$="Apply"], .cbi-button[onclick="addKey(event)"] { background: #483d8b !important; background: var(--dark-primary) !important; border-color: var(--dark-primary) !important; } .btn.primary, .cbi-page-actions .cbi-button-save, .cbi-page-actions .cbi-button-apply + .cbi-button-save, .cbi-button-add, .cbi-button-save, .cbi-button-positive, .cbi-button-link, .cbi-button[value="Enable"], .cbi-button[value="Scan"], .cbi-button[value^="Back"], .cbi-button-neutral[onclick="handleConfig(event)"] { background: #483d8b; background: var(--dark-primary); } [data-page="admin-system-opkg"] h2 { color: #ccc !important; } [data-page="admin-system-startup"] textarea { color: #ccc; background-color: transparent; &:focus-visible { border: 1px solid var(--dark-primary); } } [data-page="admin-network-firewall-custom"] #view p textarea, [data-page="admin-status-routes"] #view p textarea, [data-page="admin-system-crontab"] #view p textarea { color: #ccc; background-color: transparent; } #view > .spinning { background: #333333 !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03) !important; } @media screen and (min-width: 600px) { ::-webkit-scrollbar-thumb { background: var(--dark-primary); } ::-webkit-scrollbar-thumb:hover { background: var(--dark-primary); } ::-webkit-scrollbar-thumb:active { background: var(--dark-primary); } } @media screen and (max-width: 480px) { .node-status-iptables > .main div > .cbi-map > form { background-color: #1e1e1e; box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35); } } [data-page="admin-dashboard"] { .main-right > #maincontent { .Dashboard { color: #ccc !important; h3 { color: #ccc; } hr { border-top: 1px solid rgba(255, 255, 255, 1); } .dashboard-bg { background-color: #333333; } } .router-status-info .title img, .lan-info .title img, .wifi-info .title img { filter: invert(90%); } tr { border-top: thin solid #4d4d4d; &:last-child { border-bottom: thin solid #4d4d4d; } } } } [data-page="admin-system-fileassistant"] { .fb-container .panel-container { border-bottom-color: #3c3c3c !important; } .fb-container td[class$="-icon"]::before { filter: invert(0.7); } } [data-page^="admin-services-openclash"] { .cbi-tabmenu::-webkit-scrollbar-thumb { background-color: #5b5b5b; } .cbi-tabmenu::-webkit-scrollbar-track { background-color: rgba(60, 60, 60, 0.75); } #tab { border-color: #3c3c3c; } #diag-rc-output > pre, #dns-rc-output > pre { color: #ccc; border: 1px solid #3c3c3c !important; background-color: #1e1e1e; } img[src$="arrow-clockwise-light.svg"], img[src$="wrench-light.svg"], img[src$="eye-light.svg"] { filter: invert(0.9); } } [data-page="admin-network-diagnostics"] { .cbi-section { background: #252526 !important; } textarea { background: transparent; border-radius: 0.25rem; color: #ccc; border: 1px solid #3c3c3c !important; } .tr > .td { background-color: #252526 !important; } } [data-page="admin-network-network"] { .ifacebox-head[style*="--zone-color-rgb: 144, 240, 144"] { background-color: rgb(73, 126, 73) !important; color: #ccc !important; } .ifacebox-head[style*="--zone-color-rgb: 240, 144, 144;"] { background-color: rgb(156, 79, 79) !important; color: #ccc !important; } .ifacebox-head[style*="--zone-color-rgb: 238, 238, 238;"] { background-color: #666 !important; } } [data-page="admin-network-firewall-rules"] { #cbi-firewall-rule { .zonebadge[style*="--zone-color-rgb:240, 144, 144;"] { --zone-color-rgb: 156, 79, 79 !important; strong { color: #ccc !important; } } .zonebadge[style*="--zone-color-rgb:238, 238, 238;"] { --zone-color-rgb: 112, 112, 112 !important; em { color: #ccc !important; } } > table > .cbi-section-table-row[data-title]::before { background-color: #252526 !important; } } } [data-page="admin-network-network"], [data-page="admin-network-firewall-rules"] { .cbi-dropdown { .zonebadge[style*="--zone-color-rgb:240, 144, 144;"] { --zone-color-rgb: 156, 79, 79 !important; color: #ccc !important; strong { color: #ccc !important; } } .zonebadge[style*="--zone-color-rgb:144, 240, 144;"] { --zone-color-rgb: 73, 126, 73 !important; color: #ccc !important; strong { color: #ccc !important; } } .zonebadge[style*="--zone-color-rgb:238, 238, 238;"] { --zone-color-rgb: 112, 112, 112 !important; strong { color: #ccc !important; + span { color: #ccc !important; } } } } } .btn { background-color: rgb(112, 112, 112); color: #fff; }