update 2023-08-28 23:53:08
| @ -8,8 +8,8 @@ include $(TOPDIR)/rules.mk | ||||
|  | ||||
| LUCI_TITLE:=Argone kenzo | ||||
| LUCI_DEPENDS:=+curl +jsonfilter | ||||
| PKG_VERSION:=1.7.7 | ||||
| PKG_RELEASE:=4 | ||||
| PKG_VERSION:=1.8.3 | ||||
| PKG_RELEASE:=5 | ||||
|  | ||||
| include $(TOPDIR)/feeds/luci/luci.mk | ||||
|  | ||||
|  | ||||
| @ -2,6 +2,7 @@ | ||||
|  *  Argone is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argone Template | ||||
|  * | ||||
|  *  luci-theme-argone | ||||
|  *      Copyright 2020 Jerryk | ||||
|  * | ||||
|  *  Have a bug? Please create an issue here on GitHub! | ||||
|  *      https://github.com/kenzok78/luci-theme-argone/issues | ||||
| @ -17,7 +18,7 @@ | ||||
|  *  luci-theme-material: | ||||
|  *      https://github.com/LuttyYang/luci-theme-material/ | ||||
|  * | ||||
|  *  Argon Theme | ||||
|  *  Argone Theme | ||||
|  *	    https://demos.creative-tim.com/argon-dashboard/index.html | ||||
|  * | ||||
|  *  Login background | ||||
| @ -46,7 +47,7 @@ | ||||
|   --warning: #fb6340; | ||||
|   --footer-color: #aaa; | ||||
|   --menubar-background: #fff; | ||||
|   --menubar-scrollbar-thumb: #f6f9fc; | ||||
|   --menubar-scrollbar-thumb: #eee; | ||||
|   --menubar-text-color: #4c4c4c; | ||||
|   --blue: #5e72e4; | ||||
|   --indigo: #5603ad; | ||||
| @ -154,13 +155,35 @@ body { | ||||
|   color: #ffffff; | ||||
|   color: var(--white); | ||||
| } | ||||
| ::-webkit-scrollbar { | ||||
|   width: 10px; | ||||
|   height: 10px; | ||||
| } | ||||
| ::-webkit-scrollbar, | ||||
| ::-webkit-scrollbar-corner { | ||||
|   background: transparent; | ||||
| } | ||||
| ::-webkit-scrollbar-thumb { | ||||
|   background: #9e9e9e; | ||||
| } | ||||
| ::-webkit-scrollbar-thumb:hover { | ||||
|   background: #757575; | ||||
| } | ||||
| ::-webkit-scrollbar-thumb:active { | ||||
|   background: #424242; | ||||
| } | ||||
| a:link, | ||||
| a:visited, | ||||
| a:active { | ||||
|   color: #5e72e4; | ||||
|   color: var(--primary); | ||||
|   text-decoration: none; | ||||
| } | ||||
| a:-webkit-any-link:not(li a, .main-left a, .brand, .pull-right a, .alert-message a, .login-container footer a, .cbi-button) { | ||||
|   color: -webkit-link; | ||||
|   cursor: pointer; | ||||
|   color: var(--primary); | ||||
|   text-shadow: 1px 1px 2px #ccc; | ||||
| } | ||||
| a:hover { | ||||
|   text-decoration: underline; | ||||
| } | ||||
| @ -220,7 +243,8 @@ li { | ||||
| } | ||||
| .login-page .video video { | ||||
|   width: 100%; | ||||
|   height: auto; | ||||
|   height: 100%; | ||||
|   object-fit: cover; | ||||
| } | ||||
| .login-page .volume-control { | ||||
|   position: fixed; | ||||
| @ -277,30 +301,41 @@ li { | ||||
|   max-width: 420px; | ||||
|   background-color: #fff; | ||||
|   background-color: var(--white); | ||||
|   overflow:hidden; | ||||
| } | ||||
| .login-page .login-container .login-form .brand { | ||||
|   display: flex; | ||||
|   -webkit-box-align: center; | ||||
|   align-items: center; | ||||
|   margin: 50px auto 100px 50px; | ||||
|   margin: 50px auto 15px auto; | ||||
|   color: #525461; | ||||
|   color: var(--default); | ||||
| } | ||||
| .login-page .login-container .login-form .brand .icon { | ||||
|   width: 50px; | ||||
|   height: auto; | ||||
|   margin-right: 25px; | ||||
| } | ||||
| .login-page .login-container .login-form .brand .brand-text { | ||||
|   font-size: 1.25rem; | ||||
| .login-page .login-container .login-form .brand-text { | ||||
|   font-size: 1.8rem; | ||||
|   font-weight: 700; | ||||
|   letter-spacing: 1px; | ||||
|   margin-bottom: 85px; | ||||
|   font-family: "TypoGraphica"; | ||||
|   width: 420px; | ||||
|   padding: 0 0.5rem 0.1rem 0.5rem; | ||||
|   text-align: center; | ||||
|   word-break: break-word; | ||||
|   overflow: hidden; | ||||
|   text-overflow: ellipsis; | ||||
|   display: -webkit-box; | ||||
|   -webkit-line-clamp: 2; | ||||
|   -webkit-box-orient: vertical; | ||||
| } | ||||
| .login-page .login-container .login-form .brand:hover { | ||||
|   text-decoration: none; | ||||
| } | ||||
| .login-page .login-container .login-form .form-login { | ||||
|   width: 100%; | ||||
|   width: 420px; | ||||
|   padding: 20px 50px; | ||||
|   box-sizing: border-box; | ||||
| } | ||||
| @ -416,6 +451,10 @@ li { | ||||
|   position: absolute; | ||||
|   bottom: 0; | ||||
| } | ||||
| .login-page .login-container footer, | ||||
| .login-page .login-container footer a { | ||||
|   color: var(--default); | ||||
| } | ||||
| .login-page .login-container footer .ftc { | ||||
|   position: absolute; | ||||
|   bottom: 30px; | ||||
| @ -495,13 +534,9 @@ header .fill .container .brand { | ||||
| footer { | ||||
|   text-align: right; | ||||
|   padding: 1rem; | ||||
|   color: #aaa; | ||||
|   color: var(--footer-color); | ||||
|   font-size: 0.8rem; | ||||
| } | ||||
| footer a { | ||||
|   color: #aaa; | ||||
|   color: var(--footer-color); | ||||
|   text-decoration: none; | ||||
| } | ||||
| /*********************** | ||||
| @ -541,6 +576,7 @@ footer a { | ||||
|   position: fixed; | ||||
|   z-index: 100; | ||||
|   transition: width 0.2s ease-in-out; | ||||
|   overflow-y: scroll; | ||||
| } | ||||
| .main .main-left::-webkit-scrollbar { | ||||
|   width: 5px; | ||||
| @ -551,8 +587,7 @@ footer a { | ||||
|   background-color: var(--menubar-scrollbar-thumb); | ||||
| } | ||||
| .main .main-left::-webkit-scrollbar-track { | ||||
|   background-color: #fff; | ||||
|   background-color: var(--menubar-background); | ||||
|   background-color: transparent; | ||||
| } | ||||
| .main .main-left .sidenav-header { | ||||
|   padding: 1.5rem; | ||||
| @ -672,6 +707,7 @@ footer a { | ||||
|   color: #fff; | ||||
|   background: #5e72e4; | ||||
|   background: var(--primary); | ||||
|   box-shadow: 0 0 1px #ccc; | ||||
| } | ||||
| .main .main-left .nav li.slide .menu:hover a, | ||||
| .main .main-left .nav li.slide .menu.active a { | ||||
| @ -763,6 +799,7 @@ footer a { | ||||
|   background-color: #5e72e4; | ||||
|   background-color: var(--primary); | ||||
|   transition: all 0.2s; | ||||
|   box-shadow: 0 0 1px #ccc; | ||||
| } | ||||
| .main .main-left .nav li.slide .slide-menu li a:hover::after { | ||||
|   color: #000; | ||||
| @ -929,9 +966,6 @@ form.inline + form.inline, | ||||
|   border-color: #5e72e4 !important; | ||||
|   border-color: var(--primary) !important; | ||||
| } | ||||
| .cbi-button-add { | ||||
|   margin-left: 1.5rem; | ||||
| } | ||||
| .node-services-vssr .ssr-button { | ||||
|   margin-left: 0.3rem; | ||||
| } | ||||
| @ -1000,13 +1034,20 @@ select { | ||||
|   text-align: center; | ||||
| } | ||||
| /*textarea*/ | ||||
| .cbi-input-textarea { | ||||
|   width: 100%; | ||||
|   min-height: 14rem; | ||||
|   padding: 0.8rem; | ||||
|   font-size: 0.8rem; | ||||
|   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | ||||
| textarea { | ||||
|   border: 1px solid #dee2e6 !important; | ||||
|   outline: none; | ||||
|   min-height: 14rem !important; | ||||
|   padding: 0.8rem !important; | ||||
|   background-color: #fff; | ||||
|   font-family: var(--font-family-monospace) !important; | ||||
|   font-size: inherit; | ||||
|   color: black; | ||||
|   border-radius: 0.375rem !important; | ||||
|   vertical-align: middle; | ||||
| } | ||||
| .cbi-value .cbi-value-field textarea { | ||||
|   margin: 0.25rem; | ||||
| } | ||||
| /* change */ | ||||
| .uci-change-list { | ||||
| @ -1091,8 +1132,6 @@ input[type="checkbox"] { | ||||
|   vertical-align: middle; | ||||
| } | ||||
| input[type="checkbox"]:checked { | ||||
|   border: 1px solid #5e72e4; | ||||
|   border: 1px solid var(--primary); | ||||
|   background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e') !important; | ||||
|   background-color: #5e72e4; | ||||
|   background-color: var(--primary); | ||||
| @ -1117,8 +1156,6 @@ ul li .cbi-input-checkbox { | ||||
|   margin: 0.25rem 0; | ||||
| } | ||||
| .cbi-input-radio:checked { | ||||
|   border: 1px solid #5e72e4; | ||||
|   border: 1px solid var(--primary); | ||||
|   background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'-4 -4 8 8\'%3e%3ccircle r=\'3\' fill=\'%23fff\'/%3e%3c/svg%3e') !important; | ||||
|   background-color: #5e72e4; | ||||
|   background-color: var(--primary); | ||||
| @ -1228,7 +1265,8 @@ div.cbi-value var, | ||||
| td.cbi-value-field var, | ||||
| .td.cbi-value-field var { | ||||
|   font-style: italic; | ||||
|   color: #0069D6; | ||||
|   color: var(--primary); | ||||
|   text-shadow: 1px 1px 2px #ccc; | ||||
| } | ||||
| small { | ||||
|   font-size: 90%; | ||||
| @ -1382,7 +1420,15 @@ input[name="nslookup"] { | ||||
|   background-color: var(--primary) !important; | ||||
|   background-image: url(../img/trafficbar.png); | ||||
|   background-position: left top; | ||||
|   animation: sparkle 1500ms linear infinite; | ||||
|   animation: sparkle 1000ms linear infinite; | ||||
| } | ||||
| #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 { | ||||
|   text-shadow: 1px 1px 2px #ccc; | ||||
| } | ||||
| /* fix multiple table */ | ||||
| table table, | ||||
| @ -1629,10 +1675,6 @@ th h5, td h5, | ||||
| th h6, td h6 { | ||||
|   background: var(--lighter); | ||||
| } | ||||
| /* OCD: Change the background color of the "now in use" node in PassWall  */ | ||||
| .cbi-section-table > tbody > ._now_use { | ||||
|   background: #5e72e473 !important; | ||||
| } | ||||
| /* language fix */ | ||||
| body.lang_pl.node-main-login .cbi-value-title { | ||||
|   width: 12rem; | ||||
| @ -1746,7 +1788,7 @@ body.lang_pl.node-main-login .cbi-value-title { | ||||
| } | ||||
| .cbi-rowstyle-2 .cbi-button-up, | ||||
| .cbi-rowstyle-2 .cbi-button-down { | ||||
|   background-color: #FFF !important; | ||||
|   background-color: var(--lighter); | ||||
| } | ||||
| .cbi-button-up, | ||||
| .cbi-button-down, | ||||
| @ -1788,7 +1830,8 @@ input { | ||||
|   transition: box-shadow 0.15s ease; | ||||
|   margin: 0.25rem; | ||||
| } | ||||
| select:not([multiple="multiple"]):focus, | ||||
| select:not([multiple="multiple"]):hover, | ||||
| input:hover, | ||||
| input:focus { | ||||
|   border-color: #5e72e4; | ||||
|   border-color: var(--primary); | ||||
| @ -2023,7 +2066,7 @@ h3 { | ||||
|   letter-spacing: 0.1rem; | ||||
|   padding: 1rem 1.5rem; | ||||
|   border-radius: 0.375rem; | ||||
|   background: #fff; | ||||
|   background: var(--lighter); | ||||
|   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03); | ||||
| } | ||||
| fieldset { | ||||
| @ -2065,6 +2108,8 @@ fieldset.cbi-section p { | ||||
|   letter-spacing: 0.1rem; | ||||
|   color: #32325d; | ||||
|   font-weight: 600; | ||||
|   position: sticky; | ||||
|   left: 0; | ||||
| } | ||||
| table { | ||||
|   border-spacing: 0; | ||||
| @ -2131,15 +2176,25 @@ td > table > tbody > tr > td { | ||||
|   white-space: nowrap; | ||||
|   overflow-x: auto; | ||||
| } | ||||
| .tabs::-webkit-scrollbar { | ||||
|   width: 1px; | ||||
| .tabs::-webkit-scrollbar, | ||||
| .cbi-section::-webkit-scrollbar, | ||||
| .cbi-section > *::-webkit-scrollbar, | ||||
| textarea::-webkit-scrollbar, | ||||
| div::-webkit-scrollbar { | ||||
|   width: 5px; | ||||
|   height: 5px; | ||||
| } | ||||
| .tabs::-webkit-scrollbar-thumb { | ||||
|   background-color: #f6f9fc; | ||||
|   background-color: #9e9e9e; | ||||
| } | ||||
| .tabs::-webkit-scrollbar-thumb:hover { | ||||
|   background: #757575; | ||||
| } | ||||
| .tabs::-webkit-scrollbar-thumb:active { | ||||
|   background: #424242; | ||||
| } | ||||
| .tabs::-webkit-scrollbar-track { | ||||
|   background-color: #fff; | ||||
|   background-color: transparent; | ||||
| } | ||||
| .tabs li[class~="active"], | ||||
| .tabs li:hover { | ||||
| @ -2148,7 +2203,7 @@ td > table > tbody > tr > td { | ||||
|   border-bottom: 0.18751rem solid var(--primary); | ||||
|   color: #5e72e4; | ||||
|   color: var(--primary); | ||||
|   background-color: #dce1fe; | ||||
|   background-color: var(--light-subtabs-background); | ||||
|   margin-bottom: 0; | ||||
|   border-radius: 0; | ||||
| } | ||||
| @ -2184,13 +2239,19 @@ td > table > tbody > tr > td { | ||||
|   height: 5px; | ||||
| } | ||||
| .cbi-tabmenu::-webkit-scrollbar-thumb { | ||||
|   background-color: #f6f9fc; | ||||
|   background-color: #9e9e9e; | ||||
| } | ||||
| .cbi-tabmenu::-webkit-scrollbar-thumb:hover { | ||||
|   background: #757575; | ||||
| } | ||||
| .cbi-tabmenu::-webkit-scrollbar-thumb:active { | ||||
|   background: #424242; | ||||
| } | ||||
| .cbi-tabmenu::-webkit-scrollbar-track { | ||||
|   background-color: #fff; | ||||
|   background-color: transparent; | ||||
| } | ||||
| .cbi-tabmenu li { | ||||
|   background: #dce3e9; | ||||
|   background: #e3e3e3; | ||||
|   display: inline-block; | ||||
|   font-size: 0.875rem; | ||||
|   border-top-left-radius: 0.25rem; | ||||
| @ -2209,7 +2270,7 @@ td > table > tbody > tr > td { | ||||
|   border-bottom: 0.18751rem solid var(--primary); | ||||
|   color: #5e72e4; | ||||
|   color: var(--primary); | ||||
|   background-color: #dce1fe; | ||||
|   background-color: var(--light-subtabs-background); | ||||
|   margin-bottom: 0; | ||||
| } | ||||
| .cbi-tabmenu li:hover a { | ||||
| @ -2219,7 +2280,7 @@ td > table > tbody > tr > td { | ||||
|   border-bottom: 0.18751rem solid #5e72e4; | ||||
|   border-bottom: 0.18751rem solid var(--primary); | ||||
|   color: var(--primary); | ||||
|   background-color: #dce1fe; | ||||
|   background-color: var(--light-subtabs-background); | ||||
|   margin-bottom: 0; | ||||
| } | ||||
| .cbi-tabmenu li[class~="cbi-tab"] a { | ||||
| @ -2442,7 +2503,8 @@ select[multiple="multiple"] { | ||||
| .cbi-section-node .cbi-value { | ||||
|   padding: 0.5rem 1rem 0.5rem 1rem !important; | ||||
| } | ||||
| .cbi-tabcontainer > .cbi-value:nth-of-type(2n) { | ||||
| .cbi-tabcontainer > .cbi-value:nth-of-type(2n), | ||||
| .cbi-tabcontainer > .cbi-value:nth-of-type(2n)>textarea { | ||||
|   background-color: #f9f9f9; | ||||
| } | ||||
| .cbi-value-field, | ||||
| @ -2470,8 +2532,9 @@ form > .cbi-map > .cbi-section > .cbi-section-node > .cbi-value > .cbi-value-fie | ||||
|   content: "\f059"; | ||||
| } | ||||
| .cbi-value-description { | ||||
|   color: #8d8d8d; | ||||
|   opacity: 0.8; | ||||
|   font-size: small; | ||||
|   opacity: 0.5; | ||||
|   padding: 0.5rem; | ||||
| } | ||||
| .cbi-value-title { | ||||
| @ -2540,23 +2603,11 @@ td > .ifacebadge { | ||||
|   float: right; | ||||
|   margin: 0 0.3rem; | ||||
| } | ||||
| /*textarea*/ | ||||
| .cbi-input-textarea { | ||||
|   width: 100%; | ||||
|   border: 0; | ||||
|   outline: none; | ||||
|   min-height: 14rem; | ||||
|   padding: 0.8rem; | ||||
|   font-size: 0.8rem; | ||||
|   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | ||||
|   color: black; | ||||
| } | ||||
| #syslog { | ||||
|   width: 100%; | ||||
|   min-height: 15rem; | ||||
|   padding: 1rem; | ||||
|   line-height: 1.4em; | ||||
|   font-size: small; | ||||
|   color: #1e1e1e; | ||||
|   border-radius: 0; | ||||
|   background-color: #fff; | ||||
| @ -2580,7 +2631,7 @@ td > .ifacebadge, | ||||
| .ifacebadge > img { | ||||
|   display: inline-block; | ||||
|   margin: 0 0.3rem; | ||||
|   align-self: flex-start; | ||||
|   align-self: center; | ||||
| } | ||||
| .ifacebadge span { | ||||
|   line-height: 1.6em; | ||||
| @ -2710,16 +2761,6 @@ td > .ifacebadge, | ||||
| .cbi-section-remove { | ||||
|   padding: 0.5rem; | ||||
| } | ||||
| div.cbi-value var, | ||||
| td.cbi-value-field var { | ||||
|   font-style: italic; | ||||
|   color: #0069D6; | ||||
| } | ||||
| small { | ||||
|   font-size: 90%; | ||||
|   white-space: normal; | ||||
|   line-height: 1.42857143; | ||||
| } | ||||
| .cbi-optionals { | ||||
|   padding: 1rem 1rem 0 1rem; | ||||
|   border-top: 1px solid #CCC; | ||||
| @ -2812,7 +2853,7 @@ input[name="nslookup"] { | ||||
|   height: 100% !important; | ||||
|   background-image: url(../img/trafficbar.png); | ||||
|   background-position: left top; | ||||
|   animation: sparkle 1500ms linear infinite; | ||||
|   animation: sparkle 1000ms linear infinite; | ||||
| } | ||||
| .node-system-leds .cbi-section em { | ||||
|   display: block; | ||||
| @ -2829,14 +2870,13 @@ input[name="nslookup"] { | ||||
|   overflow-y: hidden; | ||||
| } | ||||
| .cbi-section em { | ||||
|   padding: 0.75rem 1.5rem; | ||||
|   font-size: 0.7rem; | ||||
|   font-weight: 600; | ||||
|   color: #525f7f; | ||||
|   color: var(--primary); | ||||
|   text-shadow: 1px 1px 2px #ccc; | ||||
|   text-align: center; | ||||
| } | ||||
| .cbi-section h4 { | ||||
|   padding: 0.75rem 1.5rem; | ||||
|   font-size: 0.7rem; | ||||
|   font-weight: 600; | ||||
|   color: #525f7f; | ||||
| @ -2865,6 +2905,12 @@ input[name="nslookup"] { | ||||
| .node-system-flashops fieldset { | ||||
|   margin-top: 0; | ||||
| } | ||||
| .node-system-flashops fieldset > ul { | ||||
|   padding: 1rem; | ||||
| } | ||||
| .node-system-flashops fieldset + .cbi-page-actions { | ||||
|   margin-top: 1rem; | ||||
| } | ||||
| .node-status-iptables .cbi-tabmenu, | ||||
| .node-system-packages .cbi-tabmenu, | ||||
| .node-system-flashops .cbi-tabmenu { | ||||
| @ -2909,6 +2955,95 @@ input[name="nslookup"] { | ||||
| .node-nas-usb_printer em { | ||||
|   display: block; | ||||
| } | ||||
| /* luci-app-passwall */ | ||||
| #cbi-passwall #add_link_div, | ||||
| #cbi-passwall #set_node_div { | ||||
|   background: #fffffff0; | ||||
| } | ||||
| #cbi-passwall .cbi-section-table tbody ._now_use { | ||||
|   background: #5e72e473 !important; | ||||
| } | ||||
| /* luci-app-commands */ | ||||
| .commandbox h3 { | ||||
|   overflow: hidden; | ||||
|   text-overflow: ellipsis; | ||||
| } | ||||
| .commandbox code { | ||||
|   word-break: break-word; | ||||
|   overflow: hidden; | ||||
|   text-overflow: ellipsis; | ||||
|   display: -webkit-box; | ||||
|   -webkit-line-clamp: 2; | ||||
|   -webkit-box-orient: vertical; | ||||
| } | ||||
| div.commandbox { | ||||
|   height: 16em; | ||||
| } | ||||
| /* luci-app-ssr-plus */ | ||||
| #cbi-shadowsocksr .cbi-map-descr h3 { | ||||
|   overflow: hidden; | ||||
|   text-overflow: ellipsis; | ||||
|   white-space: nowrap; | ||||
| } | ||||
| /* luci-app-mwan3 */ | ||||
| .node-status-mwan .cbi-tabmenu { | ||||
|   padding: 3rem 0.5rem 0 0.5rem; | ||||
| } | ||||
| /* luci-app-openclash */ | ||||
| .node-services-openclash .cbi-tabmenu { | ||||
|   font-size: 0; | ||||
| } | ||||
| .node-services-openclash .cbi-tabmenu > li { | ||||
|   margin-right: 4px; | ||||
| } | ||||
| .node-services-openclash .cbi-tabmenu > li:last-child { | ||||
|   margin-right: 0; | ||||
| } | ||||
| /* luci-app-ddnsto */ | ||||
| .node-services-ddnsto .cbi-section-node .cbi-value div { | ||||
|   display: table-cell; | ||||
|   line-height: 1.6; | ||||
|   font-size: 0.875rem; | ||||
| } | ||||
|  | ||||
| /* luci-app-dockerman */ | ||||
| #cbi-dockerd > .cbi-section > br, | ||||
| #cbi-docker > .cbi-section > br { | ||||
|   display: none; | ||||
| } | ||||
|  | ||||
| /* luci-app-diskman */ | ||||
| #cbi-diskman > .cbi-section > br { | ||||
|   display: none; | ||||
| } | ||||
|  | ||||
| /* luci-app-istorex (Quick Start) */ | ||||
| #app #main #page .app-container_body .btn-f, | ||||
| #app #main #page .app-container_body .btn-r { | ||||
|   -webkit-user-select: none; /* Safari */ | ||||
|   -moz-user-select: none; /* Firefox */ | ||||
|   -ms-user-select: none; /* IE10+/Edge */ | ||||
|   user-select: none; /* Standard */ | ||||
|   width: 30px; | ||||
| } | ||||
|  | ||||
| /* luci-app-ttyd */ | ||||
| .TTYD.node-system-terminal .main { | ||||
|   height: 100%!important; | ||||
| } | ||||
| .TTYD.node-system-terminal .main .main-right, | ||||
| .TTYD.node-system-terminal .main .main-right #maincontent, | ||||
| .TTYD.node-system-terminal .main .main-right #maincontent .container .cbi-map { | ||||
|   height: 100%!important; | ||||
|   display: flex!important; | ||||
|   flex-direction: column!important; | ||||
| } | ||||
| .TTYD.node-system-terminal .main .main-right #maincontent, | ||||
| .TTYD.node-system-terminal .main .main-right #maincontent .container, | ||||
| .TTYD.node-system-terminal .main .main-right #maincontent .container .cbi-map #terminal { | ||||
|   flex: 1!important; | ||||
| } | ||||
|  | ||||
| @media screen and (max-width: 1600px) { | ||||
|   .main .main-left { | ||||
|     width: calc(0% + 13rem); | ||||
| @ -2916,7 +3051,7 @@ input[name="nslookup"] { | ||||
|   .main .main-right { | ||||
|     width: calc(100% - 13rem); | ||||
|   } | ||||
|   .cbi-button { | ||||
|   .cbi-button:not(.cbi-button-up, .cbi-button-down) { | ||||
|     /*padding: 0.3rem 1.5rem;*/ | ||||
|     font-size: 0.8rem; | ||||
|   } | ||||
| @ -2933,9 +3068,6 @@ input[name="nslookup"] { | ||||
|   fieldset { | ||||
|     padding: 0; | ||||
|   } | ||||
|   .cbi-input-textarea { | ||||
|     font-size: small; | ||||
|   } | ||||
|   .node-status-iptables > .main fieldset li > a { | ||||
|     padding: 0.3rem 0.6rem; | ||||
|   } | ||||
| @ -2971,25 +3103,6 @@ input[name="nslookup"] { | ||||
|     font-size: 0.7rem; | ||||
|   } | ||||
| } | ||||
| @media screen and (min-width: 600px) { | ||||
|   ::-webkit-scrollbar { | ||||
|     width: 10px; | ||||
|     height: 10px; | ||||
|   } | ||||
|   ::-webkit-scrollbar, | ||||
|   ::-webkit-scrollbar-corner { | ||||
|     background: transparent; | ||||
|   } | ||||
|   ::-webkit-scrollbar-thumb { | ||||
|     background: #9e9e9e; | ||||
|   } | ||||
|   ::-webkit-scrollbar-thumb:hover { | ||||
|     background: #757575; | ||||
|   } | ||||
|   ::-webkit-scrollbar-thumb:active { | ||||
|     background: #424242; | ||||
|   } | ||||
| } | ||||
| @media screen and (max-width: 992px) { | ||||
|   .main .main-left { | ||||
|     width: 0; | ||||
| @ -3034,6 +3147,15 @@ input[name="nslookup"] { | ||||
|     font-size: 1rem; | ||||
|   } | ||||
| } | ||||
| @media screen and (max-width: 500px) { | ||||
|   .login-page .login-container { | ||||
|     margin-left: 0rem !important; | ||||
|     width: 500px; | ||||
|   } | ||||
|   .login-page .login-container .login-form { | ||||
|     max-width: 500px; | ||||
|   } | ||||
| } | ||||
| @media screen and (max-width: 480px) { | ||||
|   body { | ||||
|     font-size: 0.8rem; | ||||
| @ -3042,17 +3164,10 @@ input[name="nslookup"] { | ||||
|     float: right; | ||||
|     margin-top: 0rem !important; | ||||
|   } | ||||
|   .login-page .video video { | ||||
|     width: auto !important; | ||||
|     height: 100% !important; | ||||
|   } | ||||
|   .login-page .login-container { | ||||
|     margin-left: 0rem !important; | ||||
|     width: 100%; | ||||
|   } | ||||
|   .login-page .login-container .login-form { | ||||
|     max-width: 480px; | ||||
|   } | ||||
|   .login-page .login-container .login-form .form-login .input-group::before { | ||||
|     color: #525461; | ||||
|   } | ||||
| @ -3124,10 +3239,9 @@ input[name="nslookup"] { | ||||
|   .cbi-page-actions > div > input { | ||||
|     display: none; | ||||
|   } | ||||
|   .tabs::-webkit-scrollbar, | ||||
|   .cbi-tabmenu::-webkit-scrollbar { | ||||
|     width: 0px; | ||||
|     height: 0px; | ||||
|   ::-webkit-scrollbar { | ||||
|     width: 0px !important; | ||||
|     height: 0px  !important; | ||||
|   } | ||||
|   .tabs > li > a { | ||||
|     font-size: 0.9rem; | ||||
| @ -3218,4 +3332,4 @@ input[name="nslookup"] { | ||||
|     width: 2.3rem !important; | ||||
|     height: auto; | ||||
|   } | ||||
| } | ||||
| } | ||||
|  | ||||
| @ -15,6 +15,10 @@ body { | ||||
|   color: #adb5bd; | ||||
| } | ||||
|  | ||||
| .login-page .login-container .login-form .form-login .input-group .border { | ||||
|   border-bottom: 1px var(--dark-primary) solid; | ||||
| } | ||||
|  | ||||
| .login-page .login-container .login-form .form-login .input-group input { | ||||
|   background-color: transparent !important; | ||||
|   color: #adb5bd; | ||||
| @ -42,7 +46,8 @@ body { | ||||
|   opacity: .9; | ||||
| } | ||||
|  | ||||
| .login-page .login-container footer { | ||||
| .login-page .login-container footer, | ||||
| .login-page .login-container footer a { | ||||
|   color: #adb5bd; | ||||
| } | ||||
|  | ||||
| @ -60,29 +65,36 @@ header::after { | ||||
| } | ||||
|  | ||||
| .main .main-left .nav .slide .slide-menu .active a { | ||||
|   color: #cccccc; | ||||
| } | ||||
|  | ||||
| .main .main-left .nav .slide .slide-menu .active a::after { | ||||
|   background-color: #cccccc !important; | ||||
|   color: #fff !important; | ||||
| } | ||||
|  | ||||
| .main .main-left .nav .slide .slide-menu li a { | ||||
|   color: #cccccc; | ||||
| } | ||||
|  | ||||
| .main .main-left .nav .slide .slide-menu li a::after { | ||||
|   background-color: var(--dark-primary) !important; | ||||
|   box-shadow: 0 0 1px #000  !important; | ||||
| } | ||||
|  | ||||
| .main .main-left .nav .slide .slide-menu li a:hover { | ||||
|   background: none !important; | ||||
| } | ||||
|  | ||||
| .main .main-left .nav .slide .menu:hover, | ||||
| .main .main-left .nav .slide .menu.active { | ||||
|   background-color: #483d8b !important; | ||||
|   background-color: var(--dark-primary) !important; | ||||
|   color: #cccccc !important; | ||||
|   color: #fff !important; | ||||
|   box-shadow: 0 0 1px #000 !important; | ||||
| } | ||||
|  | ||||
| .main .main-left .nav .slide .menu.active a::after { | ||||
|   background-color: #cccccc !important; | ||||
| .main .main-left .nav .slide .menu[data-title=Status]:before { | ||||
|   color: var(--dark-primary) !important; | ||||
| } | ||||
|  | ||||
| .main .main-left .nav .slide .menu[data-title=Control]:before { | ||||
|   color: var(--dark-primary) !important; | ||||
| } | ||||
|  | ||||
| .main .main-left .nav li a { | ||||
| @ -92,17 +104,13 @@ header::after { | ||||
| .main .main-left .nav li a:hover { | ||||
|   background-color: #483d8b !important; | ||||
|   background-color: var(--dark-primary) !important; | ||||
|   color: #cccccc !important; | ||||
|   color: #fff !important; | ||||
| } | ||||
|  | ||||
| .main .main-left::-webkit-scrollbar-thumb { | ||||
|   background-color: #252526 !important; | ||||
| } | ||||
|  | ||||
| .main .main-left::-webkit-scrollbar-track { | ||||
|   background-color: #333; | ||||
| } | ||||
|  | ||||
| .main .main-right { | ||||
|   background-color: #1e1e1e; | ||||
| } | ||||
| @ -118,17 +126,31 @@ h3 { | ||||
|   background: #333333; | ||||
| } | ||||
|  | ||||
| a:-webkit-any-link { | ||||
|   color: -webkit-link; | ||||
|   cursor: pointer; | ||||
|   color: #483d8b; | ||||
|   color: var(--dark-primary); | ||||
| a:link, | ||||
| a:visited, | ||||
| a:active { | ||||
|   color: var(--dark_webkit-any-link); | ||||
| } | ||||
|  | ||||
| a:-webkit-any-link:not(li a, .main-left a, .brand, .pull-right a, .alert-message a, .login-container footer a, .cbi-button) { | ||||
|   color: var(--dark_webkit-any-link) !important; | ||||
|   text-shadow: 1px 1px 2px #000 !important; | ||||
| } | ||||
|  | ||||
| input:-webkit-autofill { | ||||
|   background-color: #3c3c3c !important; | ||||
| } | ||||
|  | ||||
| input[type="checkbox"]:checked { | ||||
|   background-color: #483d8b !important; | ||||
|   background-color: var(--dark-primary) !important; | ||||
| } | ||||
|  | ||||
| .cbi-input-radio:checked { | ||||
|   background-color: #483d8b !important; | ||||
|   background-color: var(--dark-primary) !important; | ||||
| } | ||||
|  | ||||
| .cbi-value-field .cbi-input-apply, | ||||
| .cbi-button-apply, | ||||
| .cbi-button-edit { | ||||
| @ -140,8 +162,8 @@ input:-webkit-autofill { | ||||
| } | ||||
|  | ||||
| .cbi-section em { | ||||
|   color: #483d8b; | ||||
|   color: var(--dark-primary); | ||||
|   color: var(--dark_webkit-any-link); | ||||
|   text-shadow: 1px 1px 2px #000; | ||||
| } | ||||
|  | ||||
| header.bg-primary { | ||||
| @ -196,6 +218,7 @@ table>thead>tr>td { | ||||
| #conns>div>div>div>small, | ||||
| #memtotal>div>div>div>small { | ||||
|   color: #ccc !important; | ||||
|   text-shadow: 1px 1px 2px #000 !important; | ||||
| } | ||||
|  | ||||
| .node-system-packages>.main .cbi-section-node:first-child .cbi-value-last { | ||||
| @ -216,6 +239,7 @@ table>tbody>tr>th, | ||||
| table>tfoot>tr>th, | ||||
| table>thead>tr>th { | ||||
|   background-color: #252526; | ||||
|   border-top: none; | ||||
|   border-bottom: black 1px solid !important; | ||||
| } | ||||
|  | ||||
| @ -254,8 +278,7 @@ table>thead>tr>th { | ||||
| } | ||||
|  | ||||
| abbr { | ||||
|   color: #483d8b; | ||||
|   color: var(--dark-primary); | ||||
|   color: #8898aa; | ||||
| } | ||||
|  | ||||
| div>table>tbody>tr:nth-of-type(2n), | ||||
| @ -319,16 +342,6 @@ th h6, td h6 { | ||||
|   background-color: #00ff0a45 !important; | ||||
| } | ||||
|  | ||||
| /* OCD: Compatible the background color of the "Add the node via the link" & "USE(node)" pop-up window in PassWall (dark mode only) */ | ||||
| #add_link_div, | ||||
| #set_node_div { | ||||
|   background-color: #333333f0 !important; | ||||
|   box-shadow: #00000094 10px 10px 30px 5px !important; | ||||
| } | ||||
| #add_link_div>.cbi-value>.cbi-value-field>#nodes_link { | ||||
|   background: #ccc; | ||||
| } | ||||
|  | ||||
| #content_syslog { | ||||
|   box-shadow: 0 0 .5rem 0 rgba(0,0,0,0.35); | ||||
| } | ||||
| @ -350,26 +363,26 @@ th h6, td h6 { | ||||
|   background-color: #252526; | ||||
| } | ||||
|  | ||||
| .tabs>li[class~="active"]>a { | ||||
|   color: #ccc; | ||||
| } | ||||
|  | ||||
| .tabs>li:hover, | ||||
| .tabs>li[class~="active"], | ||||
| .tabs>li:hover { | ||||
|   border-bottom: .18751rem solid #483d8b; | ||||
| .cbi-tabmenu>li:hover, | ||||
| .cbi-tabmenu>li[class~="cbi-tab"] { | ||||
|   border-bottom: .18751rem solid var(--dark-primary); | ||||
|   color: #ccc; | ||||
|   background-color: #181819; | ||||
|   background-color: #3c3c3c; | ||||
| } | ||||
|  | ||||
| .cbi-tabmenu>li>a, | ||||
| .tabs>li>a { | ||||
|   color: #ccc; | ||||
| .tabs>li>a, | ||||
| .cbi-tabmenu>li>a { | ||||
|   color: #ccc !important; | ||||
| } | ||||
|  | ||||
| .cbi-tabmenu>li>a:hover, | ||||
| .tabs>li>a:hover { | ||||
|   color: #ccc; | ||||
| .cbi-tabmenu>li:hover>a, | ||||
| .cbi-tabmenu>.cbi-tab>a, | ||||
| .tabs>li>a:hover, | ||||
| .tabs>li:hover>a, | ||||
| .tabs>li[class~="active"]>a { | ||||
|   color: #fff !important; | ||||
| } | ||||
|  | ||||
| .cbi-tabmenu>li { | ||||
| @ -380,20 +393,12 @@ th h6, td h6 { | ||||
|   border-bottom: 0 solid #ddd !important; | ||||
| } | ||||
|  | ||||
| .cbi-tabmenu li[class~="cbi-tab"] a { | ||||
| .cbi-tab-descr { | ||||
|   color: #ccc; | ||||
| } | ||||
|  | ||||
| .cbi-tabmenu>li:hover { | ||||
|   color: #ccc; | ||||
|   background: #2d2d2d; | ||||
| } | ||||
|  | ||||
| .cbi-tabmenu>li[class~="cbi-tab"] { | ||||
|   background-color: #181819; | ||||
| } | ||||
|  | ||||
| .cbi-tabcontainer>.cbi-value:nth-of-type(2n) { | ||||
| .cbi-tabcontainer>.cbi-value:nth-of-type(2n), | ||||
| .cbi-tabcontainer>.cbi-value:nth-of-type(2n)>textarea { | ||||
|   background-color: #252526; | ||||
| } | ||||
|  | ||||
| @ -409,7 +414,8 @@ input { | ||||
|   box-shadow: 0 3px 2px rgba(0,0,0,0.05); | ||||
| } | ||||
|  | ||||
| select:not([multiple="multiple"]):focus, | ||||
| select:not([multiple="multiple"]):hover, | ||||
| input:hover, | ||||
| input:focus { | ||||
|   border-color: #483d8b !important; | ||||
|   border-color: var(--dark-primary) !important; | ||||
| @ -444,7 +450,9 @@ select { | ||||
|   color: #ccc; | ||||
| } | ||||
|  | ||||
| .cbi-input-textarea { | ||||
| /*textarea for dark mode*/ | ||||
| textarea { | ||||
|   border: 1px solid #3c3c3c !important; | ||||
|   background-color: #1e1e1e; | ||||
|   color: #ccc; | ||||
| } | ||||
| @ -512,9 +520,11 @@ img[src="/luci-static/resources/icons/loading.gif"] { | ||||
| } | ||||
|  | ||||
| div.cbi-value var, | ||||
| td.cbi-value-field var { | ||||
| td.cbi-value-field var, | ||||
| .td.cbi-value-field var { | ||||
|   color: #483d8b; | ||||
|   color: var(--dark-primary); | ||||
|   color: var(--dark_webkit-any-link); | ||||
|   text-shadow: 1px 1px 2px #000; | ||||
| } | ||||
|  | ||||
| #diag-rc-output>pre { | ||||
| @ -524,7 +534,7 @@ td.cbi-value-field var { | ||||
|  | ||||
| .node-services-vssr .block { | ||||
|   background-color: #1e1e1e !important; | ||||
|   box-shadow: 0 0 .5rem 0 rgba(0,0,0,0.35); | ||||
|   box-shadow: 0 0 .5rem 0 rgba(0,0,0,0.35) !important; | ||||
| } | ||||
|  | ||||
| .node-services-vssr .block h4 { | ||||
| @ -533,8 +543,8 @@ td.cbi-value-field var { | ||||
|  | ||||
| .node-services-vssr .status-bar { | ||||
|   color: #ccc; | ||||
|   box-shadow: 0 0 .5rem 0 rgba(0,0,0,0.35); | ||||
|   background-color: #1e1e1e; | ||||
|   background: #333333f0; | ||||
|   box-shadow: #00000094 10px 10px 30px 5px; | ||||
| } | ||||
|  | ||||
| .node-services-vssr .cbi-section-table-row { | ||||
| @ -666,6 +676,150 @@ fieldset[id^="cbi-apply-"] { | ||||
|   color: #ccc !important; | ||||
| } | ||||
|  | ||||
| /* luci-app-passwall */ | ||||
| #cbi-passwall #add_link_div, | ||||
| #cbi-passwall #set_node_div { | ||||
|   background: #333333f0 !important; | ||||
|   box-shadow: #00000094 10px 10px 30px 5px !important; | ||||
| } | ||||
|  | ||||
| /* luci-app-bypass */ | ||||
| #cbi-bypass .status-bar { | ||||
|   color: #ccc; | ||||
|   background: #333333f0; | ||||
|   box-shadow: #00000094 10px 10px 30px 5px; | ||||
| } | ||||
|  | ||||
| /* luci-app-clash */ | ||||
| #cbi-clash .cbi-section .pure-u-1-4 .pure-g, | ||||
| #cbi-clash .cbi-section .siz .pure-g { | ||||
|   background-color: #1e1e1e !important; | ||||
|   box-shadow: 0 0 .5rem 0 rgba(0,0,0,0.35) !important; | ||||
| } | ||||
|  | ||||
| /* luci-app-openclash */ | ||||
| #cbi-openclash #eye-icon, | ||||
| #cbi-openclash img[title="刷新"] { | ||||
|   filter: invert(100%); | ||||
| } | ||||
| #cbi-openclash #cbi-openclash-config fieldset[control-id="ControlID-46"], | ||||
| #cbi-openclash .CodeMirror-merge-copybuttons-right, | ||||
| .CodeMirror-scroll { | ||||
|   background-color: #333333 !important; | ||||
| } | ||||
| #cbi-openclash .cbi-section .cbi-tabmenu li { | ||||
|   border-right: 1px solid #3c3c3c !important; | ||||
| } | ||||
| #cbi-openclash .CodeMirror-merge { | ||||
|   border: 1px solid transparent !important; | ||||
| } | ||||
| #cbi-openclash-config-clog .cbi-section { | ||||
|   border: 1px solid #3c3c3c !important; | ||||
| } | ||||
| #cbi-openclash .CodeMirror-gutters { | ||||
|   border-right: 1px solid #3c3c3c !important; | ||||
|   background-color: #1e1e1e !important; | ||||
| } | ||||
|  | ||||
| /* luci-app-dockerman */ | ||||
| #cbi-dockerd .img-con img { | ||||
|   filter: invert(0.4); | ||||
| } | ||||
|  | ||||
| /* luci-app-istorex (interface config[NetworkPort]) */ | ||||
| #cbi-nfs-mount  .app-container_status-label_bg { | ||||
|   background: #333333; | ||||
| } | ||||
| #cbi-nfs-mount td svg { | ||||
|   filter: invert(0.3); | ||||
| } | ||||
| #actioner .actioner-dns { | ||||
|   background-color: #333333; | ||||
| } | ||||
| #actioner .actioner-dns_header, | ||||
| #actioner .actioner-container_header { | ||||
|   border-bottom: 1px solid #cbcbcb !important; | ||||
| } | ||||
| #actioner .actioner-dns_footer { | ||||
|   border-top: 1px solid #cbcbcb !important; | ||||
| } | ||||
|  | ||||
| /* luci-app-istorex (Network Guide) */ | ||||
| #app #main #page .title, | ||||
| #app #main #page .desc { | ||||
|   color: #cccccc; | ||||
|   background-color: #333333; | ||||
| } | ||||
| #app #main #page .network-message li:not(span):not(a) { | ||||
|   color: #8d8d8d; | ||||
| } | ||||
| #app #main #page code { | ||||
|   background-color: #333333; | ||||
| } | ||||
|  | ||||
| /* luci-app-istorex (Quick Start) */ | ||||
| #app #main #page .network-container_flow-container, | ||||
| #app #main #page .app-container_status-container, | ||||
| #app #main #page .nas-container .nas-container_card .app-container, | ||||
| #app #main #page .app-container { | ||||
|   background-color: #333333; | ||||
| } | ||||
| #app #main #page .flow-data span, | ||||
| #app #main #page .app-container_status-label_block span, | ||||
| #app #main #page .app-container .item-label span:not(#app #main #page .app-container .progress-value span) { | ||||
|   color: #cccccc; | ||||
| } | ||||
| #app #main #page .app-container_status-info span, | ||||
| #app #main #page .app-container_status-info span, | ||||
| #app #main #page .app-container_title span { | ||||
|   color: #dddddd; | ||||
| } | ||||
| .app-container_body .app-container_status-label_bg { | ||||
|   background-color: #282828 !important; | ||||
| } | ||||
| #app #main #page .item-label_value .progress { | ||||
|   background-color: rgb(118, 118, 118); | ||||
| } | ||||
| #app #main #page .app-container_nas-menu button[class=""] { | ||||
|   background-color: #8b8b8b; | ||||
| } | ||||
| #app #main #page .app-container_nas-menu button[class="on"] { | ||||
|   background-color: #555555; | ||||
| } | ||||
| #app #main #page .app-container_title .DeviceBlock ul { | ||||
|   background-color: #cccccc; | ||||
| } | ||||
| #actioner div.action, | ||||
| #actioner div.actioner-container { | ||||
|   background-color: #3c3c3c; | ||||
| } | ||||
| #actioner div.action .title { | ||||
|   color: #cccccc; | ||||
| } | ||||
| #actioner div.action .desc { | ||||
|   color: #cbcbcb; | ||||
| } | ||||
| #actioner div.action div.roots span, | ||||
| #actioner div.action div.move span:not(span.tip), | ||||
| #actioner div.action div.left span, | ||||
| #actioner div.action div.input_row span, | ||||
| #actioner div.label-item label span { | ||||
|   color: #cbcbcb; | ||||
| } | ||||
| #actioner div.action span.tooltip-trigger svg path { | ||||
|   fill: #cbcbcb; | ||||
| } | ||||
| #actioner div.actioner-dns_body div.label-item_value select { | ||||
|   height: 43px; | ||||
| } | ||||
| #actioner div.actioner-container_footer div.close { | ||||
|   color: #ffffff; | ||||
| } | ||||
| #app #main div.app-container div.app-container_title span a svg path, | ||||
| #app #main #page span.disk_infoicon svg g { | ||||
|   fill: #8b8b8b; | ||||
| } | ||||
|  | ||||
| @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { | ||||
|   .login-page .login-container .login-form { | ||||
|     -webkit-backdrop-filter: blur(var(--blur-radius-dark)); | ||||
|  | ||||
| @ -2,6 +2,7 @@ | ||||
|  *  Argone is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argone Template | ||||
|  * | ||||
|  *  luci-theme-argone | ||||
|  *      Copyright 2020 Jerryk | ||||
|  * | ||||
|  *  Have a bug? Please create an issue here on GitHub! | ||||
|  *      https://github.com/kenzok78/luci-theme-argone/issues | ||||
|  | ||||
| Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 9.4 KiB | 
| Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 8.1 KiB | 
| Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 6.4 KiB | 
| Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 3.5 KiB | 
| Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 3.9 KiB | 
| Before Width: | Height: | Size: 1019 B After Width: | Height: | Size: 2.0 KiB | 
| Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 2.5 KiB | 
| Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 4.7 KiB | 
| Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 6.4 KiB | 
| @ -1,61 +1,37 @@ | ||||
| <?xml version="1.0" encoding="utf-8"?> | ||||
| <!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --> | ||||
| <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | ||||
| 	 viewBox="0 0 256 256" style="enable-background:new 0 0 256 256;" xml:space="preserve"> | ||||
| <style type="text/css"> | ||||
| 	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_1_);} | ||||
| 	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_2_);} | ||||
| 	.st2{fill:#FFFFFF;} | ||||
| </style> | ||||
| <g> | ||||
| 	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="11.1379" y1="10.6499" x2="245.5302" y2="245.0422"> | ||||
| 		<stop  offset="0" style="stop-color:#5E72E4"/> | ||||
| 		<stop  offset="1" style="stop-color:#778AFF"/> | ||||
| 	</linearGradient> | ||||
| 	<path class="st0" d="M36.4,0.2h183.8c19.7,0,35.7,16,35.7,35.7v183.8c0,19.7-16,35.7-35.7,35.7H36.4c-19.7,0-35.7-16-35.7-35.7 | ||||
| 		V35.9C0.7,16.2,16.7,0.2,36.4,0.2z"/> | ||||
| 	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="0.6679" y1="0.18" x2="0.6679" y2="0.18"> | ||||
| 		<stop  offset="0" style="stop-color:#5E72E4"/> | ||||
| 		<stop  offset="1" style="stop-color:#778AFF"/> | ||||
| 	</linearGradient> | ||||
| 	<path class="st1" d="M0.7,0.2"/> | ||||
| </g> | ||||
| <path class="st2" d="M128.3,32.6c-43.9,0-79.4,35.6-79.4,79.4c0,35.3,23.1,65.2,55,75.6l9.9-40.1c-14-5.7-23.8-19.4-23.8-35.5 | ||||
| 	c0-21.2,17.2-38.3,38.3-38.3c21.2,0,38.3,17.2,38.3,38.3c0,16-9.8,29.7-23.8,35.5l9.9,40.1c31.9-10.3,55-40.2,55-75.6 | ||||
| 	C207.8,68.2,172.2,32.6,128.3,32.6z"/> | ||||
| <g> | ||||
| 	<path class="st2" d="M48.5,234.8c-2.3,0-4.3-0.3-6.1-0.9c-1.7-0.6-3.3-1.6-4.7-3c-1.4-1.4-2.5-2.8-3.3-4.2 | ||||
| 		c-0.8-1.4-1.3-2.9-1.6-4.4c-0.3-1.5-0.4-3.2-0.4-4.9c0-2.3,0.3-4.3,0.8-5.9c0.5-1.7,1.1-3.1,1.8-4.3c0.7-1.2,1.8-2.4,3.1-3.6 | ||||
| 		c1.3-1.2,2.8-2.1,4.4-2.8c1.6-0.7,3.5-1.1,5.7-1.1c2,0,3.8,0.3,5.6,0.9c1.7,0.6,3.3,1.5,4.7,2.7c1.4,1.2,2.6,2.6,3.5,4.4 | ||||
| 		c1,1.7,1.6,3.4,1.9,5c0.3,1.6,0.4,3.2,0.4,4.8c-0.1,2.5-0.4,4.7-1,6.6c-0.6,1.9-1.3,3.5-2.2,4.7c-0.9,1.2-1.9,2.3-3.2,3.2 | ||||
| 		c-1.2,0.9-2.7,1.7-4.3,2.2C52.3,234.5,50.5,234.8,48.5,234.8z M48,227.6c1.1,0.1,2.3-0.1,3.4-0.4c1.1-0.4,2.2-1.1,3.2-2.1 | ||||
| 		c1-1,1.6-2.3,1.9-3.8c0.3-1.5,0.5-2.9,0.4-4.3c0-1.9-0.3-3.4-0.7-4.6c-0.4-1.2-1-2.2-1.6-3c-0.6-0.8-1.4-1.5-2.3-2 | ||||
| 		c-0.9-0.5-1.9-0.8-3.1-0.9c-1.1-0.1-2.2,0.1-3.2,0.4c-1,0.4-1.9,0.9-2.7,1.5c-0.8,0.6-1.5,1.5-2.2,2.5c-0.6,1-1,2.1-1.1,3.2 | ||||
| 		c-0.1,1.1-0.2,2.1-0.2,3c0,1.2,0.1,2.4,0.4,3.6c0.2,1.2,0.7,2.3,1.3,3.4c0.6,1,1.5,1.8,2.7,2.4C45.4,227.2,46.6,227.5,48,227.6z"/> | ||||
| 	<path class="st2" d="M77,243.9h-7.2v-32.8H77l0,2c0.3-0.3,0.7-0.6,1.1-0.9c0.4-0.3,0.9-0.5,1.6-0.7c0.7-0.2,1.3-0.3,2-0.3 | ||||
| 		c1.4,0,2.7,0.4,4,1.1c1.3,0.8,2.3,1.8,3.2,3c0.8,1.3,1.4,2.6,1.8,4.1c0.3,1.5,0.5,2.8,0.5,4.1c0,1.3-0.2,2.7-0.7,4.1 | ||||
| 		c-0.5,1.7-1.4,3.1-2.5,4.3c-1.1,1.2-2.3,1.9-3.5,2.2c-1.2,0.3-2.3,0.4-3.1,0.4c-1.6,0-2.7-0.3-3.3-0.8l-1-0.7V243.9z M77,225.8 | ||||
| 		l0,1.7c0.2,0.5,0.5,1,0.9,1.3c0.3,0.4,1.1,0.6,2.1,0.6c1.1,0,1.9-0.3,2.5-0.9c0.5-0.5,0.8-1.3,1-2.3c0.2-1.1,0.3-2.2,0.3-3.5 | ||||
| 		c0-1.3-0.1-2.4-0.4-3.3c-0.3-0.8-0.7-1.5-1.2-2.1c-0.6-0.6-1.3-0.9-2.1-0.8c-0.5,0-1.1,0.2-1.7,0.6c-0.6,0.4-1,0.9-1.2,1.6 | ||||
| 		l-0.2,0.6V225.8z"/> | ||||
| 	<path class="st2" d="M103.3,224.3c0,0.2,0,0.4,0,0.6c0,0.2,0.1,0.7,0.1,1.4c0.1,0.7,0.3,1.5,0.7,2.3c0.4,0.8,0.8,1.3,1.2,1.6 | ||||
| 		c0.5,0.3,0.9,0.3,1.5,0.3c0.4-0.1,0.9-0.2,1.3-0.5c0.4-0.3,0.7-0.7,0.9-1.1c0.2-0.4,0.4-0.8,0.5-1.2l0.2-1h7.4 | ||||
| 		c-0.1,0.5-0.2,1.1-0.3,1.7c-0.1,0.7-0.5,1.4-1,2.3c-0.5,0.8-1.1,1.6-1.9,2.2c-0.7,0.6-1.7,1.1-3,1.5c-1.3,0.4-2.7,0.6-4.3,0.5 | ||||
| 		c-1.6-0.1-3.2-0.4-4.6-0.9c-1.5-0.6-2.6-1.3-3.5-2.3c-0.9-1-1.5-2.2-1.9-3.5c-0.4-1.3-0.6-2.9-0.6-4.6c0-1,0.1-1.9,0.3-2.9 | ||||
| 		c0.2-1,0.5-2,0.9-2.9c0.4-0.9,1-1.9,1.7-2.8c0.7-0.9,1.9-1.8,3.4-2.6c1.5-0.8,3.2-1.2,4.9-1.1c0.7,0,1.7,0.2,2.8,0.5 | ||||
| 		c1.2,0.3,2.3,1,3.5,2c1.2,1,2.1,2.3,2.6,3.8c0.6,1.5,0.9,2.8,0.9,4l0.1,3H103.3z M110,220.2c0-0.6-0.1-1.1-0.2-1.6 | ||||
| 		c-0.1-0.5-0.2-1-0.5-1.6s-0.6-0.9-0.9-1.2c-0.3-0.2-0.8-0.4-1.3-0.4c-0.6,0-1.1,0.1-1.6,0.4c-0.5,0.3-0.9,0.8-1.3,1.6 | ||||
| 		c-0.4,0.7-0.6,1.3-0.6,1.8l-0.1,0.9H110z"/> | ||||
| 	<path class="st2" d="M142.4,234.4h-7.2v-13.1c0-1-0.1-1.8-0.2-2.4c-0.1-0.6-0.4-1.1-0.9-1.6c-0.5-0.4-1.2-0.6-2.1-0.6 | ||||
| 		c-0.6,0.1-1.1,0.3-1.6,0.6c-0.5,0.3-0.8,0.8-1,1.3c-0.2,0.5-0.3,1.3-0.3,2.3v13.3h-7.2v-23.3h7.2v1.3c0.3-0.1,0.6-0.3,1.1-0.5 | ||||
| 		c0.4-0.2,1-0.4,1.6-0.6c0.6-0.2,1.5-0.2,2.5-0.2c1,0.1,1.9,0.2,2.7,0.5c0.8,0.3,1.5,0.7,2.3,1.3c0.7,0.6,1.4,1.3,1.8,2.1 | ||||
| 		c0.5,0.8,0.8,1.7,1,2.5c0.2,0.8,0.3,1.9,0.3,3.1V234.4z"/> | ||||
| 	<path class="st2" d="M163.5,221.2l-3.7,13.3h-5.6l-6.7-23.3h7.1l2.5,11.1l3.4-11.1h6.1l3.2,11l2.3-11h7.1l-6.3,23.3h-5.6 | ||||
| 		L163.5,221.2z"/> | ||||
| 	<path class="st2" d="M184.4,211.1h6.7v4.3c0.3-0.5,0.8-1,1.2-1.5c0.5-0.5,1.3-1.1,2.4-1.7c1.2-0.6,2.1-0.9,2.9-0.9l3.8-0.3v6.2 | ||||
| 		c-0.7-0.1-1.4-0.1-2-0.2c-0.6,0-1.5,0-2.5,0.1c-1.1,0.1-2.1,0.5-3.1,1c-1,0.5-1.6,1-1.9,1.6l-0.8,1.3v13.4h-6.7V211.1z"/> | ||||
| 	<path class="st2" d="M218.3,211.1h5.2v4.6h-5.2v10.9c0,0.8,0.1,1.4,0.3,1.8c0.2,0.4,0.5,0.6,0.8,0.8c0.4,0.1,1,0.2,1.9,0.2h2.3 | ||||
| 		l-0.1,5h-5.1c-0.7,0-1.4,0-2.1-0.1c-0.7-0.1-1.4-0.3-2.1-0.7c-0.7-0.4-1.3-0.9-1.8-1.4c-0.5-0.6-0.8-1.2-1-2 | ||||
| 		c-0.2-0.7-0.3-1.7-0.3-2.8v-11.6h-4.8v-4.6h4.8v-7.6h7.2V211.1z"/> | ||||
| </g> | ||||
| </svg> | ||||
| <?xml version="1.0" encoding="utf-8"?> | ||||
| <!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --> | ||||
| <svg version="1.1" id="图层_1" xmlns:svg="http://www.w3.org/2000/svg" | ||||
| 	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256 256" | ||||
| 	 style="enable-background:new 0 0 256 256;" xml:space="preserve"> | ||||
| <style type="text/css"> | ||||
| 	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#svg_2_00000009581766544743910510000007087157279682564742_);} | ||||
| 	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:url(#svg_3_00000013155245276689480680000010334395393893521599_);} | ||||
| 	.st2{fill:#FFFFFF;} | ||||
| </style> | ||||
| <g> | ||||
| 	<g id="svg_1"> | ||||
| 		 | ||||
| 			<linearGradient id="svg_2_00000043442590260727270070000016472210641679865270_" gradientUnits="userSpaceOnUse" x1="11.1563" y1="247.3437" x2="245.4437" y2="13.0563" gradientTransform="matrix(1 0 0 -1 0 258)"> | ||||
| 			<stop  offset="0" style="stop-color:#5E72E4"/> | ||||
| 			<stop  offset="1" style="stop-color:#778AFF"/> | ||||
| 		</linearGradient> | ||||
| 		 | ||||
| 			<path id="svg_2" style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#svg_2_00000043442590260727270070000016472210641679865270_);" d=" | ||||
| 			M36.4,0.2h183.8c19.7,0,35.7,16,35.7,35.7v183.8c0,19.7-16,35.7-35.7,35.7H36.4c-19.7,0-35.7-16-35.7-35.7V35.9 | ||||
| 			C0.7,16.2,16.7,0.2,36.4,0.2z"/> | ||||
| 		 | ||||
| 			<linearGradient id="svg_3_00000010280352489557108120000000938545297310085033_" gradientUnits="userSpaceOnUse" x1="0.7" y1="257.8" x2="0.7" y2="257.8" gradientTransform="matrix(1 0 0 -1 0 258)"> | ||||
| 			<stop  offset="0" style="stop-color:#5E72E4"/> | ||||
| 			<stop  offset="1" style="stop-color:#778AFF"/> | ||||
| 		</linearGradient> | ||||
| 		 | ||||
| 			<path id="svg_3" style="fill-rule:evenodd;clip-rule:evenodd;fill:url(#svg_3_00000010280352489557108120000000938545297310085033_);" d=" | ||||
| 			M0.7,0.2"/> | ||||
| 	</g> | ||||
| 	<path id="svg_4" class="st2" d="M128.3,45.4c-46.7,0-84.4,37.8-84.4,84.4c0,32.2,18.1,60.2,44.6,74.4c6.8,3.7,15.3-0.2,17.2-7.7 | ||||
| 		l4.3-17.6c1.5-6.2-1-12.6-6.1-16.4c-10-7.4-16.4-19.3-16.4-32.7c0-22.5,18.3-40.7,40.7-40.7c22.5,0,40.7,18.3,40.7,40.7 | ||||
| 		c0,13.4-6.4,25.2-16.4,32.7c-5.1,3.8-7.6,10.2-6.1,16.5l4.4,17.6c1.9,7.5,10.3,11.4,17.2,7.7c26.6-14.2,44.6-42.2,44.6-74.5 | ||||
| 		C212.8,83.3,174.9,45.4,128.3,45.4L128.3,45.4z"/> | ||||
| </g> | ||||
| <circle class="st2" cx="128.3" cy="131.6" r="18.3"/> | ||||
| </svg> | ||||
|  | ||||
| Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 2.3 KiB | 
| @ -0,0 +1,72 @@ | ||||
| /* | ||||
|  *  The background color of the [Light Mode] subtabs follow the custom primary color and reduce its transparency | ||||
|  *  Author: SpeedPartner | ||||
|  */ | ||||
|  | ||||
| /* | ||||
|  *  Get hex for the [Light mode] Primary Color ,then reduce it to 25% transparency and convert it to RGBA value | ||||
|  */ | ||||
| 	const hexColor_primary_light = getComputedStyle(document.documentElement).getPropertyValue('--primary').replace(/\s/, ""); | ||||
| 	const hexToRgba_primary_light = (hex) => { | ||||
|   		const r = parseInt(hex.substring(1, 3), 16); | ||||
|   		const g = parseInt(hex.substring(3, 5), 16); | ||||
|   		const b = parseInt(hex.substring(5, 7), 16); | ||||
|   		const a = 0.15 | ||||
|   		return [r, g, b].map(x => x.toFixed()).concat(a); | ||||
| 	}; | ||||
| 	const rgbaColor_primary_light = hexToRgba_primary_light(hexColor_primary_light); | ||||
| 	console.log(rgbaColor_primary_light); | ||||
|  | ||||
| /* | ||||
|  *  Constitute a css color variable named light-subtabs-background | ||||
|  */ | ||||
| 	document.documentElement.style.setProperty('--light-subtabs-background', `rgba(`+rgbaColor_primary_light+`)`); | ||||
|  | ||||
|  | ||||
| /* | ||||
|  *  Improved link font color that follows custom [Dark mode] Primary Color | ||||
|  *  Author: SpeedPartner | ||||
|  */ | ||||
|  | ||||
| /* | ||||
|  *  Get hex for the [Dark mode] Primary Color ,then reduce it to 70% transparency and convert it to RGB value | ||||
|  */ | ||||
| 	const hexColor_primary = getComputedStyle(document.documentElement).getPropertyValue('--dark-primary').replace(/\s/, ""); | ||||
| 	const hexToRgb_primary = (hex) => { | ||||
|   		const r = parseInt(hex.substring(1, 3), 16); | ||||
|   		const g = parseInt(hex.substring(3, 5), 16); | ||||
|   		const b = parseInt(hex.substring(5, 7), 16); | ||||
|   		const a = 0.7 | ||||
|   		return [r*a, g*a, b*a].map(x => x.toFixed(2)); | ||||
| 	}; | ||||
| 	const rgbColor_primary = hexToRgb_primary(hexColor_primary); | ||||
| 	//console.log(rgbColor_primary); | ||||
|  | ||||
| /* | ||||
|  *  Constitute overlay color #cccccc, then reduce it to 30% transparency and convert it to RGB value | ||||
|  */ | ||||
| 	const hexColor_overlay = "#cccccc"; | ||||
| 	const hexToRgb_overlay = (hex) => { | ||||
|   		const r = parseInt(hex.substring(1, 3), 16); | ||||
|   		const g = parseInt(hex.substring(3, 5), 16); | ||||
|   		const b = parseInt(hex.substring(5, 7), 16); | ||||
|   		const a = 0.3 | ||||
|   		return [r*a, g*a, b*a].map(x => x.toFixed(2)); | ||||
| 	}; | ||||
| 	const rgbColor_overlay = hexToRgb_overlay(hexColor_overlay); | ||||
| 	//console.log(rgbColor_overlay); | ||||
|  | ||||
| /* | ||||
|  *  Overlay the RGB value of two colors | ||||
|  */ | ||||
| 	const New_Color = [ | ||||
|   		Math.round(Number(rgbColor_primary[0]) + Number(rgbColor_overlay[0])), | ||||
|   		Math.round(Number(rgbColor_primary[1]) + Number(rgbColor_overlay[1])), | ||||
|   		Math.round(Number(rgbColor_primary[2]) + Number(rgbColor_overlay[2])) | ||||
| 	]; | ||||
| 	//console.log(New_Color); | ||||
|  | ||||
| /* | ||||
|  *  Constitute a css color variable named dark_webkit-any-link | ||||
|  */ | ||||
| 	document.documentElement.style.setProperty('--dark_webkit-any-link', `rgb(`+New_Color+`)`); | ||||
| @ -1,7 +1,8 @@ | ||||
| /** | ||||
|  *  Argone is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argone Template | ||||
|  *  Argon is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argon Template | ||||
|  * | ||||
|  *  luci-theme-argone | ||||
|  *      Copyright 2023 Jerrykuku | ||||
|  * | ||||
|  *  Have a bug? Please create an issue here on GitHub! | ||||
|  *      https://github.com/kenzok78/luci-theme-argone/issues | ||||
| @ -17,7 +18,7 @@ | ||||
|  *  luci-theme-material: | ||||
|  *      https://github.com/LuttyYang/luci-theme-material/ | ||||
|  * | ||||
|  *  Argone Theme | ||||
|  *  Argon Theme | ||||
|  *	    https://demos.creative-tim.com/argon-dashboard/index.html | ||||
|  * | ||||
|  *  Login background | ||||
|  | ||||
| @ -1,63 +1,64 @@ | ||||
| /** | ||||
|  *  Argone is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argone Template | ||||
|  * | ||||
|  *  luci-theme-argone | ||||
|  * | ||||
|  *  Have a bug? Please create an issue here on GitHub! | ||||
|  *      https://github.com/kenzok78/luci-theme-argone/issues | ||||
|  * | ||||
|  *  luci-theme-bootstrap: | ||||
|  *      Copyright 2008 Steven Barth <steven@midlink.org> | ||||
|  *      Copyright 2008 Jo-Philipp Wich <jow@openwrt.org> | ||||
|  *      Copyright 2012 David Menting <david@nut-bolt.nl> | ||||
|  * | ||||
|  *  MUI: | ||||
|  *      https://github.com/muicss/mui | ||||
|  * | ||||
|  *  luci-theme-material: | ||||
|  *      https://github.com/LuttyYang/luci-theme-material/ | ||||
|  * | ||||
|  *  Argone 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 | ||||
|  */ | ||||
|  | ||||
|     /** | ||||
|      * Sidebar expand | ||||
|      */ | ||||
|     var showSide = false; | ||||
|     $(".showSide").click(function () { | ||||
|         if (showSide) { | ||||
|             $(".darkMask").stop(true).fadeOut("fast"); | ||||
|             $(".main-left").width(0); | ||||
|             $(".main-right").css("overflow-y", "auto"); | ||||
|             showSide = false; | ||||
|         } else { | ||||
|             $(".darkMask").stop(true).fadeIn("fast"); | ||||
|             $(".main-left").width("15rem"); | ||||
|             $(".main-right").css("overflow-y", "hidden"); | ||||
|             showSide = true; | ||||
|         } | ||||
|     }); | ||||
|  | ||||
|     $(".darkMask").click(function () { | ||||
|         if (showSide) { | ||||
|             showSide = false; | ||||
|             $(".darkMask").stop(true).fadeOut("fast"); | ||||
|             $(".main-left").width(0); | ||||
|             $(".main-right").css("overflow-y", "auto"); | ||||
|         } | ||||
|     }); | ||||
|  | ||||
|     $(window).resize(function () { | ||||
|         if ($(window).width() > 921) { | ||||
|             $(".main-left").css("width", ""); | ||||
|             $(".darkMask").stop(true); | ||||
|             $(".darkMask").css("display", "none"); | ||||
|             showSide = false; | ||||
|         } | ||||
|     }); | ||||
| /** | ||||
|  *  Argone is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argone Template | ||||
|  * | ||||
|  *  luci-theme-argone | ||||
|  *      Copyright 2023 Jerrykuku | ||||
|  * | ||||
|  *  Have a bug? Please create an issue here on GitHub! | ||||
|  *      https://github.com/jerrykuku/luci-theme-argone/issues | ||||
|  * | ||||
|  *  luci-theme-bootstrap: | ||||
|  *      Copyright 2008 Steven Barth <steven@midlink.org> | ||||
|  *      Copyright 2008 Jo-Philipp Wich <jow@openwrt.org> | ||||
|  *      Copyright 2012 David Menting <david@nut-bolt.nl> | ||||
|  * | ||||
|  *  MUI: | ||||
|  *      https://github.com/muicss/mui | ||||
|  * | ||||
|  *  luci-theme-material: | ||||
|  *      https://github.com/LuttyYang/luci-theme-material/ | ||||
|  * | ||||
|  *  Argone 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 | ||||
|  */ | ||||
|  | ||||
|     /** | ||||
|      * Sidebar expand | ||||
|      */ | ||||
|     var showSide = false; | ||||
|     $(".showSide").click(function () { | ||||
|         if (showSide) { | ||||
|             $(".darkMask").stop(true).fadeOut("fast"); | ||||
|             $(".main-left").width(0); | ||||
|             $(".main-right").css("overflow-y", "auto"); | ||||
|             showSide = false; | ||||
|         } else { | ||||
|             $(".darkMask").stop(true).fadeIn("fast"); | ||||
|             $(".main-left").width("15rem"); | ||||
|             $(".main-right").css("overflow-y", "hidden"); | ||||
|             showSide = true; | ||||
|         } | ||||
|     }); | ||||
|  | ||||
|     $(".darkMask").click(function () { | ||||
|         if (showSide) { | ||||
|             showSide = false; | ||||
|             $(".darkMask").stop(true).fadeOut("fast"); | ||||
|             $(".main-left").width(0); | ||||
|             $(".main-right").css("overflow-y", "auto"); | ||||
|         } | ||||
|     }); | ||||
|  | ||||
|     $(window).resize(function () { | ||||
|         if ($(window).width() > 921) { | ||||
|             $(".main-left").css("width", ""); | ||||
|             $(".darkMask").stop(true); | ||||
|             $(".darkMask").css("display", "none"); | ||||
|             showSide = false; | ||||
|         } | ||||
|     }); | ||||
|  | ||||
| @ -2,6 +2,7 @@ | ||||
|  *  Argone is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argone Template | ||||
|  * | ||||
|  *  luci-theme-argone | ||||
|  *      Copyright 2023 Jerrykuku | ||||
|  * | ||||
|  *  Have a bug? Please create an issue here on GitHub! | ||||
|  *      https://github.com/kenzok78/luci-theme-argone/issues | ||||
|  | ||||
| @ -1,8 +1,8 @@ | ||||
| //  compress: false | ||||
| /** | ||||
|  *  Argone is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argone Template | ||||
|  * | ||||
|  *  luci-theme-argone | ||||
|  *      Copyright 2020 Jerryk | ||||
|  * | ||||
|  *  Have a bug? Please create an issue here on GitHub! | ||||
|  *      https://github.com/kenzok78/luci-theme-argone/issues | ||||
| @ -57,7 +57,7 @@ | ||||
|     --warning: #fb6340; | ||||
|     --footer-color: #aaa; | ||||
|     --menubar-background: #fff; | ||||
|     --menubar-scrollbar-thumb: #f6f9fc; | ||||
|     --menubar-scrollbar-thumb: #eee; | ||||
|     --menubar-text-color: #4c4c4c; | ||||
|     --blue: #5e72e4; | ||||
|     --indigo: #5603ad; | ||||
| @ -178,14 +178,42 @@ body { | ||||
|     color: var(--white); | ||||
| } | ||||
|  | ||||
| ::-webkit-scrollbar { | ||||
|     width: 10px; | ||||
|     height: 10px; | ||||
| } | ||||
|  | ||||
| ::-webkit-scrollbar, | ||||
| ::-webkit-scrollbar-corner { | ||||
|     background: transparent; | ||||
| } | ||||
|  | ||||
| ::-webkit-scrollbar-thumb { | ||||
|     background: #9e9e9e; | ||||
| } | ||||
|  | ||||
| ::-webkit-scrollbar-thumb:hover { | ||||
|     background: #757575; | ||||
| } | ||||
|  | ||||
| ::-webkit-scrollbar-thumb:active { | ||||
|     background: #424242; | ||||
| } | ||||
|  | ||||
| a:link, | ||||
| a:visited, | ||||
| a:active { | ||||
|     color: #5e72e4; | ||||
|     color: var(--primary); | ||||
|     text-decoration: none; | ||||
| } | ||||
|  | ||||
| a:-webkit-any-link:not(li a, .main-left a, .brand, .pull-right a, .alert-message a, .login-container footer a, .cbi-button) { | ||||
|     color: -webkit-link; | ||||
|     cursor: pointer; | ||||
|     color: var(--primary); | ||||
|     text-shadow: 1px 1px 2px #ccc; | ||||
| } | ||||
|  | ||||
| a:hover { | ||||
|     text-decoration: underline; | ||||
| } | ||||
| @ -256,7 +284,8 @@ li { | ||||
|  | ||||
|         video { | ||||
|             width: 100%; | ||||
|             height: auto; | ||||
|             height: 100%; | ||||
|             object-fit: cover; | ||||
|         } | ||||
|     } | ||||
|  | ||||
| @ -318,26 +347,19 @@ li { | ||||
|             max-width: 420px; | ||||
|             background-color: #fff; | ||||
|             background-color: var(--white); | ||||
|             overflow:hidden; | ||||
|  | ||||
|             .brand { | ||||
|                 display: flex; | ||||
|                 -webkit-box-align: center; | ||||
|                 align-items: center; | ||||
|                 margin: 50px auto 100px 50px; | ||||
|                 margin: 50px auto 15px auto; | ||||
|                 color: #525461; | ||||
|                 color: var(--default); | ||||
|  | ||||
|                 .icon { | ||||
|                     width: 50px; | ||||
|                     height: auto; | ||||
|                     margin-right: 25px; | ||||
|                 } | ||||
|  | ||||
|                 .brand-text { | ||||
|                     font-size: 1.25rem; | ||||
|                     font-weight: 700; | ||||
|                     font-family: "TypoGraphica"; | ||||
|  | ||||
|                 } | ||||
|  | ||||
|                 &:hover { | ||||
| @ -345,8 +367,25 @@ li { | ||||
|                 } | ||||
|             } | ||||
|  | ||||
|             .brand-text { | ||||
|                 font-size: 1.8rem; | ||||
|                 font-weight: 700; | ||||
|                 letter-spacing: 1px; | ||||
|                 margin-bottom: 85px; | ||||
|                 font-family: "TypoGraphica"; | ||||
|                 width: 420px; | ||||
|                 padding: 0 0.5rem 0.1rem 0.5rem; | ||||
|                 text-align: center; | ||||
|                 word-break: break-word; | ||||
|                 overflow: hidden; | ||||
|                 text-overflow: ellipsis; | ||||
|                 display: -webkit-box; | ||||
|                 -webkit-line-clamp: 2; | ||||
|                 -webkit-box-orient: vertical; | ||||
|             } | ||||
|  | ||||
|             .form-login { | ||||
|                 width: 100%; | ||||
|                 width: 420px; | ||||
|                 padding: 20px 50px; | ||||
|                 box-sizing: border-box; | ||||
|  | ||||
| @ -361,7 +400,7 @@ li { | ||||
|                     position: relative; | ||||
|  | ||||
|                     &::before { | ||||
|                         font-family: 'argone' !important; | ||||
|                         font-family: 'argon' !important; | ||||
|                         font-style: normal; | ||||
|                         font-weight: normal; | ||||
|                         font-variant: normal; | ||||
| @ -486,6 +525,14 @@ li { | ||||
|                 display: block; | ||||
|             } | ||||
|         } | ||||
|  | ||||
|         footer { | ||||
|             color: var(--default); | ||||
|  | ||||
|             a { | ||||
|                 color: var(--default); | ||||
|             } | ||||
|         } | ||||
|     } | ||||
| } | ||||
|  | ||||
| @ -582,13 +629,9 @@ footer { | ||||
|  | ||||
|     text-align: right; | ||||
|     padding: 1rem; | ||||
|     color: #aaa; | ||||
|     color: var(--footer-color); | ||||
|     font-size: 0.8rem; | ||||
|  | ||||
|     a { | ||||
|         color: #aaa; | ||||
|         color: var(--footer-color); | ||||
|         text-decoration: none; | ||||
|     } | ||||
| } | ||||
| @ -635,6 +678,7 @@ footer { | ||||
|         position: fixed; | ||||
|         z-index: 100; | ||||
|         transition: width 0.2s ease-in-out; | ||||
|         overflow-y: scroll; | ||||
|  | ||||
|         &::-webkit-scrollbar { | ||||
|             width: 5px; | ||||
| @ -648,8 +692,7 @@ footer { | ||||
|         } | ||||
|  | ||||
|         &::-webkit-scrollbar-track { | ||||
|             background-color: #fff; | ||||
|             background-color: var(--menubar-background); | ||||
|             background-color: transparent; | ||||
|         } | ||||
|  | ||||
|         .sidenav-header { | ||||
| @ -744,7 +787,7 @@ footer { | ||||
|                         position: relative; | ||||
|  | ||||
|                         &::before { | ||||
|                             font-family: 'argone' !important; | ||||
|                             font-family: 'argon' !important; | ||||
|                             font-style: normal; | ||||
|                             font-weight: normal; | ||||
|                             font-variant: normal; | ||||
| @ -764,7 +807,7 @@ footer { | ||||
|                             position: absolute; | ||||
|                             right: 0.5rem; | ||||
|                             top: 0.8rem; | ||||
|                             font-family: 'argone' !important; | ||||
|                             font-family: 'argon' !important; | ||||
|                             font-style: normal; | ||||
|                             font-weight: normal; | ||||
|                             font-variant: normal; | ||||
| @ -788,6 +831,7 @@ footer { | ||||
|                             color: #fff; | ||||
|                             background: #5e72e4; | ||||
|                             background: var(--primary); | ||||
|                             box-shadow: 0 0 1px #ccc; | ||||
|  | ||||
|                             a { | ||||
|                                 color: #000; | ||||
| @ -902,6 +946,7 @@ footer { | ||||
|                                     background-color: #5e72e4; | ||||
|                                     background-color: var(--primary); | ||||
|                                     transition: all 0.2s; | ||||
|                                     box-shadow: 0 0 1px #ccc; | ||||
|                                 } | ||||
|  | ||||
|                                 &:hover::after { | ||||
| @ -1110,10 +1155,6 @@ form.inline+form.inline, | ||||
|     border-color: var(--primary) !important; | ||||
| } | ||||
|  | ||||
| .cbi-button-add { | ||||
|     margin-left: 1.5rem; | ||||
| } | ||||
|  | ||||
| .node-services-vssr .ssr-button { | ||||
|     margin-left: 0.3rem; | ||||
|  | ||||
| @ -1192,23 +1233,25 @@ select { | ||||
|     text-align: center; | ||||
| } | ||||
|  | ||||
|  | ||||
|  | ||||
| /*textarea*/ | ||||
|  | ||||
| .cbi-input-textarea { | ||||
|     width: 100%; | ||||
|     min-height: 14rem; | ||||
|     padding: 0.8rem; | ||||
|     font-size: 0.8rem; | ||||
|     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | ||||
| textarea { | ||||
|     border: 1px solid #dee2e6 !important; | ||||
|     outline: none; | ||||
|     min-height: 14rem !important; | ||||
|     padding: 0.8rem !important; | ||||
|     background-color: #fff; | ||||
|     font-family: var(--font-family-monospace) !important; | ||||
|     font-size: inherit; | ||||
|     color: black; | ||||
|     border-radius: 0.375rem !important; | ||||
|     vertical-align: middle; | ||||
| } | ||||
|  | ||||
|  | ||||
| .cbi-value .cbi-value-field textarea { | ||||
|     margin: 0.25rem; | ||||
| } | ||||
|  | ||||
| /* change */ | ||||
|  | ||||
| .uci-change-list { | ||||
|     font-family: monospace; | ||||
| } | ||||
| @ -1306,8 +1349,6 @@ input[type="checkbox"] { | ||||
| } | ||||
|  | ||||
| input[type="checkbox"]:checked { | ||||
|     border: 1px solid #5e72e4; | ||||
|     border: 1px solid var(--primary); | ||||
|     background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e') !important; | ||||
|     background-color: #5e72e4; | ||||
|     background-color: var(--primary); | ||||
| @ -1336,8 +1377,6 @@ ul li .cbi-input-checkbox { | ||||
| } | ||||
|  | ||||
| .cbi-input-radio:checked { | ||||
|     border: 1px solid #5e72e4; | ||||
|     border: 1px solid var(--primary); | ||||
|     background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'-4 -4 8 8\'%3e%3ccircle r=\'3\' fill=\'%23fff\'/%3e%3c/svg%3e') !important; | ||||
|     background-color: #5e72e4; | ||||
|     background-color: var(--primary); | ||||
| @ -1468,7 +1507,8 @@ div.cbi-value var, | ||||
| td.cbi-value-field var, | ||||
| .td.cbi-value-field var { | ||||
|     font-style: italic; | ||||
|     color: #0069D6; | ||||
|     color: var(--primary); | ||||
|     text-shadow: 1px 1px 2px #ccc; | ||||
| } | ||||
|  | ||||
| small { | ||||
| @ -1649,7 +1689,16 @@ input[name="nslookup"] { | ||||
|     background-color: var(--primary) !important; | ||||
|     background-image: url(../img/trafficbar.png); | ||||
|     background-position: left top; | ||||
|     animation: sparkle 1500ms linear infinite; | ||||
|     animation: sparkle 1000ms linear infinite; | ||||
| } | ||||
|  | ||||
| #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 { | ||||
|     text-shadow: 1px 1px 2px #ccc; | ||||
| } | ||||
|  | ||||
| /* fix multiple table */ | ||||
| @ -1960,11 +2009,6 @@ th h6, td h6 { | ||||
|     background: var(--lighter); | ||||
| } | ||||
|  | ||||
| /* OCD: Change the background color of the "now in use" node in PassWall  */ | ||||
| .cbi-section-table>tbody>._now_use { | ||||
|     background: #5e72e473 !important; | ||||
| } | ||||
|  | ||||
| /* language fix */ | ||||
| body.lang_pl.node-main-login .cbi-value-title { | ||||
|     width: 12rem; | ||||
| @ -2110,7 +2154,7 @@ body.lang_pl.node-main-login .cbi-value-title { | ||||
|  | ||||
| .cbi-rowstyle-2 .cbi-button-up, | ||||
| .cbi-rowstyle-2 .cbi-button-down { | ||||
|     background-color: #FFF !important; | ||||
|     background-color: var(--lighter); | ||||
|  | ||||
| } | ||||
|  | ||||
| @ -2119,7 +2163,7 @@ body.lang_pl.node-main-login .cbi-value-title { | ||||
| .cbi-value-helpicon, | ||||
| .showSide, | ||||
| .main>.loading>span { | ||||
|     font-family: 'argone' !important; | ||||
|     font-family: 'argon' !important; | ||||
|     font-style: normal !important; | ||||
|     font-weight: normal !important; | ||||
|     font-variant: normal !important; | ||||
| @ -2160,7 +2204,8 @@ input { | ||||
|     margin: 0.25rem; | ||||
| } | ||||
|  | ||||
| select:not([multiple="multiple"]):focus, | ||||
| select:not([multiple="multiple"]):hover, | ||||
| input:hover, | ||||
| input:focus { | ||||
|     border-color: #5e72e4; | ||||
|     border-color: var(--primary); | ||||
| @ -2444,7 +2489,7 @@ h3 { | ||||
|     letter-spacing: 0.1rem; | ||||
|     padding: 1rem 1.5rem; | ||||
|     border-radius: 0.375rem; | ||||
|     background: #fff; | ||||
|     background: var(--lighter); | ||||
|     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03); | ||||
| } | ||||
|  | ||||
| @ -2498,6 +2543,8 @@ fieldset.cbi-section p { | ||||
|     letter-spacing: 0.1rem; | ||||
|     color: #32325d; | ||||
|     font-weight: 600; | ||||
|     position: sticky; | ||||
|     left: 0; | ||||
| } | ||||
|  | ||||
| table { | ||||
| @ -2590,16 +2637,24 @@ td>table>tbody>tr>td { | ||||
|     overflow-x: auto; | ||||
|  | ||||
|     &::-webkit-scrollbar { | ||||
|         width: 1px; | ||||
|         width: 5px; | ||||
|         height: 5px; | ||||
|     } | ||||
|  | ||||
|     &::-webkit-scrollbar-thumb { | ||||
|         background-color: #f6f9fc | ||||
|         background-color: #9e9e9e; | ||||
|     } | ||||
|  | ||||
| 	&::-webkit-scrollbar-thumb:hover { | ||||
|         background-color: #757575; | ||||
|     } | ||||
|  | ||||
| 	&::-webkit-scrollbar-thumb:active { | ||||
|         background-color: #424242; | ||||
|     } | ||||
|  | ||||
|     &::-webkit-scrollbar-track { | ||||
|         background-color: #fff; | ||||
|         background-color: transparent; | ||||
|     } | ||||
|  | ||||
|     li[class~="active"], | ||||
| @ -2609,7 +2664,7 @@ td>table>tbody>tr>td { | ||||
|         border-bottom: 0.18751rem solid var(--primary); | ||||
|         color: #5e72e4; | ||||
|         color: var(--primary); | ||||
|         background-color: #dce1fe; | ||||
|         background-color: var(--light-subtabs-background); | ||||
|         margin-bottom: 0; | ||||
|         border-radius: 0; | ||||
|  | ||||
| @ -2638,6 +2693,14 @@ td>table>tbody>tr>td { | ||||
|     } | ||||
| } | ||||
|  | ||||
| .cbi-section::-webkit-scrollbar, | ||||
| .cbi-section > *::-webkit-scrollbar, | ||||
| textarea::-webkit-scrollbar, | ||||
| div::-webkit-scrollbar { | ||||
|     width: 5px; | ||||
|     height: 5px; | ||||
| } | ||||
|  | ||||
| .cbi-tabmenu { | ||||
|     color: white; | ||||
|     padding: 0.5rem 0.5rem 0 0.5rem; | ||||
| @ -2651,15 +2714,23 @@ td>table>tbody>tr>td { | ||||
|     } | ||||
|  | ||||
|     &::-webkit-scrollbar-thumb { | ||||
|         background-color: #f6f9fc | ||||
|         background-color: #9e9e9e; | ||||
|     } | ||||
|  | ||||
|     &::-webkit-scrollbar-track { | ||||
|         background-color: #fff; | ||||
|     &::-webkit-scrollbar-thumb:hover { | ||||
|         background-color: #757575; | ||||
|     } | ||||
|  | ||||
|     &::-webkit-scrollbar-thumb:active { | ||||
|         background-color: t#424242; | ||||
|     } | ||||
|  | ||||
| 	&::-webkit-scrollbar-track { | ||||
|         background-color: transparent; | ||||
|     } | ||||
|  | ||||
|     li { | ||||
|         background: #dce3e9; | ||||
|         background: #e3e3e3; | ||||
|         display: inline-block; | ||||
|         font-size: 0.875rem; | ||||
|         border-top-left-radius: 0.25rem; | ||||
| @ -2679,7 +2750,7 @@ td>table>tbody>tr>td { | ||||
|             border-bottom: 0.18751rem solid var(--primary); | ||||
|             color: #5e72e4; | ||||
|             color: var(--primary); | ||||
|             background-color: #dce1fe; | ||||
|             background-color: var(--light-subtabs-background); | ||||
|             margin-bottom: 0; | ||||
|  | ||||
|             a { | ||||
| @ -2692,7 +2763,7 @@ td>table>tbody>tr>td { | ||||
|         border-bottom: 0.18751rem solid #5e72e4; | ||||
|         border-bottom: 0.18751rem solid var(--primary); | ||||
|         color: var(--primary); | ||||
|         background-color: #dce1fe; | ||||
|         background-color: var(--light-subtabs-background); | ||||
|         margin-bottom: 0; | ||||
|  | ||||
|         a { | ||||
| @ -2971,7 +3042,8 @@ select[multiple="multiple"] { | ||||
| } | ||||
|  | ||||
|  | ||||
| .cbi-tabcontainer>.cbi-value:nth-of-type(2n) { | ||||
| .cbi-tabcontainer>.cbi-value:nth-of-type(2n), | ||||
| .cbi-tabcontainer>.cbi-value:nth-of-type(2n)>textarea { | ||||
|     background-color: #f9f9f9; | ||||
| } | ||||
|  | ||||
| @ -2980,7 +3052,6 @@ select[multiple="multiple"] { | ||||
|     display: table-cell; | ||||
|     line-height: 1.6; | ||||
|     font-size: 0.875rem; | ||||
|  | ||||
| } | ||||
|  | ||||
| /* Fix text position of the luci-app-filebrowser running state */ | ||||
| @ -3006,8 +3077,9 @@ form>.cbi-map>.cbi-section>.cbi-section-node>.cbi-value>.cbi-value-field font { | ||||
| } | ||||
|  | ||||
| .cbi-value-description { | ||||
|     color: #8d8d8d; | ||||
|     opacity: 0.8; | ||||
|     font-size: small; | ||||
|     opacity: 0.5; | ||||
|     padding: 0.5rem; | ||||
| } | ||||
|  | ||||
| @ -3098,25 +3170,11 @@ td>.ifacebadge { | ||||
|     margin: 0 0.3rem; | ||||
| } | ||||
|  | ||||
| /*textarea*/ | ||||
|  | ||||
| .cbi-input-textarea { | ||||
|     width: 100%; | ||||
|     border: 0; | ||||
|     outline: none; | ||||
|     min-height: 14rem; | ||||
|     padding: 0.8rem; | ||||
|     font-size: 0.8rem; | ||||
|     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | ||||
|     color: black; | ||||
| } | ||||
|  | ||||
| #syslog { | ||||
|     width: 100%; | ||||
|     min-height: 15rem; | ||||
|     padding: 1rem; | ||||
|     line-height: 1.4em; | ||||
|     font-size: small; | ||||
|     color: #1e1e1e; | ||||
|     border-radius: 0; | ||||
|     background-color: #fff; | ||||
| @ -3125,14 +3183,6 @@ td>.ifacebadge { | ||||
| } | ||||
|  | ||||
|  | ||||
|  | ||||
|  | ||||
|  | ||||
|  | ||||
|  | ||||
|  | ||||
|  | ||||
|  | ||||
| .ifacebadge { | ||||
|     display: inline-flex; | ||||
|     border-bottom: 0px solid #CCCCCC; | ||||
| @ -3152,7 +3202,7 @@ td>.ifacebadge, | ||||
| .ifacebadge>img { | ||||
|     display: inline-block; | ||||
|     margin: 0 0.3rem; | ||||
|     align-self: flex-start; | ||||
|     align-self: center; | ||||
| } | ||||
|  | ||||
|  | ||||
| @ -3317,18 +3367,6 @@ td>.ifacebadge, | ||||
|     padding: 0.5rem; | ||||
| } | ||||
|  | ||||
| div.cbi-value var, | ||||
| td.cbi-value-field var { | ||||
|     font-style: italic; | ||||
|     color: #0069D6; | ||||
| } | ||||
|  | ||||
| small { | ||||
|     font-size: 90%; | ||||
|     white-space: normal; | ||||
|     line-height: 1.42857143; | ||||
| } | ||||
|  | ||||
|  | ||||
| .cbi-optionals { | ||||
|     padding: 1rem 1rem 0 1rem; | ||||
| @ -3450,7 +3488,7 @@ input[name="nslookup"] { | ||||
|             height: 100% !important; | ||||
|             background-image: url(../img/trafficbar.png); | ||||
|             background-position: left top; | ||||
|             animation: sparkle 1500ms linear infinite; | ||||
|             animation: sparkle 1000ms linear infinite; | ||||
|         } | ||||
|     } | ||||
|  | ||||
| @ -3473,15 +3511,14 @@ input[name="nslookup"] { | ||||
|     overflow-y: hidden; | ||||
|  | ||||
|     em { | ||||
|         padding: 0.75rem 1.5rem; | ||||
|         font-size: 0.7rem; | ||||
|         font-weight: 600; | ||||
|         color: #525f7f; | ||||
|         color: var(--primary); | ||||
|         text-shadow: 1px 1px 2px #ccc; | ||||
|         text-align: center; | ||||
|     } | ||||
|  | ||||
|     h4 { | ||||
|         padding: 0.75rem 1.5rem; | ||||
|         font-size: 0.7rem; | ||||
|         font-weight: 600; | ||||
|         color: #525f7f; | ||||
| @ -3524,6 +3561,14 @@ input[name="nslookup"] { | ||||
|     margin-top: 0; | ||||
| } | ||||
|  | ||||
| .node-system-flashops fieldset > ul { | ||||
|     padding: 1rem; | ||||
| } | ||||
|  | ||||
| .node-system-flashops fieldset + .cbi-page-actions { | ||||
|     margin-top: 1rem; | ||||
| } | ||||
|  | ||||
| .node-status-iptables .cbi-tabmenu, | ||||
| .node-system-packages .cbi-tabmenu, | ||||
| .node-system-flashops .cbi-tabmenu { | ||||
| @ -3586,6 +3631,99 @@ input[name="nslookup"] { | ||||
|     display: block; | ||||
| } | ||||
|  | ||||
| /* luci-app-passwall */ | ||||
| #cbi-passwall #add_link_div, | ||||
| #cbi-passwall #set_node_div { | ||||
|     background: #fffffff0; | ||||
| } | ||||
| #cbi-passwall .cbi-section-table tbody ._now_use { | ||||
|     background: #5e72e473 !important; | ||||
| } | ||||
|  | ||||
| /* luci-app-commands */ | ||||
| .commandbox h3 { | ||||
|     overflow: hidden; | ||||
|     text-overflow: ellipsis; | ||||
| } | ||||
| .commandbox code { | ||||
|     word-break: break-word; | ||||
|     overflow: hidden; | ||||
|     text-overflow: ellipsis; | ||||
|     display: -webkit-box; | ||||
|     -webkit-line-clamp: 2; | ||||
|     -webkit-box-orient: vertical; | ||||
| } | ||||
| div.commandbox { | ||||
|     height: 16em; | ||||
| } | ||||
|  | ||||
| /* luci-app-ssr-plus */ | ||||
| #cbi-shadowsocksr .cbi-map-descr h3 { | ||||
|     overflow: hidden; | ||||
|     text-overflow: ellipsis; | ||||
|     white-space: nowrap; | ||||
| } | ||||
|  | ||||
| /* luci-app-mwan3 */ | ||||
| .node-status-mwan .cbi-tabmenu { | ||||
|     padding: 3rem 0.5rem 0 0.5rem; | ||||
| } | ||||
|  | ||||
| /* luci-app-openclash */ | ||||
| .node-services-openclash .cbi-tabmenu { | ||||
|     font-size: 0; | ||||
| } | ||||
| .node-services-openclash .cbi-tabmenu > li { | ||||
|     margin-right: 4px; | ||||
| } | ||||
| .node-services-openclash .cbi-tabmenu > li:last-child { | ||||
|     margin-right: 0; | ||||
| } | ||||
|  | ||||
| /* luci-app-ddnsto */ | ||||
| .node-services-ddnsto .cbi-section-node .cbi-value div { | ||||
|     display: table-cell; | ||||
|     line-height: 1.6; | ||||
|     font-size: 0.875rem; | ||||
| } | ||||
|  | ||||
| /* luci-app-dockerman */ | ||||
| #cbi-dockerd > .cbi-section > br, | ||||
| #cbi-docker > .cbi-section > br { | ||||
|     display: none; | ||||
| } | ||||
|  | ||||
| /* luci-app-diskman */ | ||||
| #cbi-diskman > .cbi-section > br { | ||||
|     display: none; | ||||
| } | ||||
|  | ||||
| /* luci-app-istorex (Quick Start) */ | ||||
| #app #main #page .app-container_body .btn-f, | ||||
| #app #main #page .app-container_body .btn-r { | ||||
|     -webkit-user-select: none; /* Safari */ | ||||
|     -moz-user-select: none; /* Firefox */ | ||||
|     -ms-user-select: none; /* IE10+/Edge */ | ||||
|     user-select: none; /* Standard */ | ||||
|     width: 30px; | ||||
| } | ||||
|  | ||||
| /* luci-app-ttyd */ | ||||
| .TTYD.node-system-terminal .main { | ||||
|     height: 100%!important; | ||||
| } | ||||
| .TTYD.node-system-terminal .main .main-right, | ||||
| .TTYD.node-system-terminal .main .main-right #maincontent, | ||||
| .TTYD.node-system-terminal .main .main-right #maincontent .container .cbi-map { | ||||
|     height: 100%!important; | ||||
|     display: flex!important; | ||||
|     flex-direction: column!important; | ||||
| } | ||||
| .TTYD.node-system-terminal .main .main-right #maincontent, | ||||
| .TTYD.node-system-terminal .main .main-right #maincontent .container, | ||||
| .TTYD.node-system-terminal .main .main-right #maincontent .container .cbi-map #terminal { | ||||
|     flex: 1!important; | ||||
| } | ||||
|  | ||||
| @media screen and (max-width: 1600px) { | ||||
|  | ||||
| @ -3600,7 +3738,7 @@ input[name="nslookup"] { | ||||
|     } | ||||
|  | ||||
|  | ||||
|     .cbi-button { | ||||
|     .cbi-button:not(.cbi-button-up, .cbi-button-down) { | ||||
|         /*padding: 0.3rem 1.5rem;*/ | ||||
|         font-size: 0.8rem; | ||||
|     } | ||||
| @ -3622,10 +3760,6 @@ input[name="nslookup"] { | ||||
|         padding: 0; | ||||
|     } | ||||
|  | ||||
|     .cbi-input-textarea { | ||||
|         font-size: small; | ||||
|     } | ||||
|  | ||||
|     .node-status-iptables>.main fieldset li>a { | ||||
|         padding: 0.3rem 0.6rem; | ||||
|     } | ||||
| @ -3678,30 +3812,6 @@ input[name="nslookup"] { | ||||
|     } | ||||
| } | ||||
|  | ||||
| @media screen and (min-width: 600px) { | ||||
|     ::-webkit-scrollbar { | ||||
|         width: 10px; | ||||
|         height: 10px; | ||||
|     } | ||||
|  | ||||
|     ::-webkit-scrollbar, | ||||
|     ::-webkit-scrollbar-corner { | ||||
|         background: transparent; | ||||
|     } | ||||
|  | ||||
|     ::-webkit-scrollbar-thumb { | ||||
|         background: #9e9e9e; | ||||
|     } | ||||
|  | ||||
|     ::-webkit-scrollbar-thumb:hover { | ||||
|         background: #757575; | ||||
|     } | ||||
|  | ||||
|     ::-webkit-scrollbar-thumb:active { | ||||
|         background: #424242; | ||||
|     } | ||||
| } | ||||
|  | ||||
| @media screen and (max-width: 992px) { | ||||
|     .main { | ||||
|         .main-left { | ||||
| @ -3762,6 +3872,18 @@ input[name="nslookup"] { | ||||
|  | ||||
| } | ||||
|  | ||||
| @media screen and (max-width: 500px) { | ||||
| .login-page { | ||||
|     .login-container { | ||||
|         margin-left: 0rem !important; | ||||
|         width: 500px; | ||||
|  | ||||
|         .login-form { | ||||
|             max-width: 500px; | ||||
|         } | ||||
|     } | ||||
| } | ||||
|  | ||||
| @media screen and (max-width: 480px) { | ||||
|     body { | ||||
|         font-size: 0.8rem; | ||||
| @ -3772,19 +3894,11 @@ input[name="nslookup"] { | ||||
|         margin-top: 0rem !important; | ||||
|     } | ||||
|  | ||||
|     .login-page .video { | ||||
|         video { | ||||
|             width: auto !important; | ||||
|             height: 100% !important; | ||||
|         } | ||||
|     } | ||||
|  | ||||
|     .login-page .login-container { | ||||
|         margin-left: 0rem !important; | ||||
|         width: 100%; | ||||
|  | ||||
|         .login-form { | ||||
|             max-width: 480px; | ||||
|  | ||||
|             .form-login { | ||||
|                 .input-group { | ||||
| @ -3889,13 +4003,9 @@ input[name="nslookup"] { | ||||
|     } | ||||
|  | ||||
|  | ||||
|     .tabs, | ||||
|     .cbi-tabmenu { | ||||
|         &::-webkit-scrollbar { | ||||
|             width: 0px; | ||||
|             height: 0px; | ||||
|         } | ||||
|  | ||||
|     ::-webkit-scrollbar { | ||||
|         width: 0px !important; | ||||
|         height: 0px  !important; | ||||
|     } | ||||
|  | ||||
|  | ||||
| @ -4020,4 +4130,4 @@ input[name="nslookup"] { | ||||
|             } | ||||
|         } | ||||
|     } | ||||
| } | ||||
| } | ||||
|  | ||||
| @ -1,8 +1,8 @@ | ||||
| //  compress: true | ||||
| /** | ||||
|  *  Argone is a clean HTML5 theme for LuCI. It is based on luci-theme-material and Argone Template | ||||
|  * | ||||
|  *  luci-theme-argone | ||||
|  *      Copyright 2020 Jerryk | ||||
|  * | ||||
|  *  Have a bug? Please create an issue here on GitHub! | ||||
|  *      https://github.com/kenzok78/luci-theme-argone/issues | ||||
| @ -47,6 +47,10 @@ body { | ||||
|                     color: #adb5bd; | ||||
|                 } | ||||
|  | ||||
|                 .border { | ||||
|                     border-bottom: 1px var(--dark-primary) solid; | ||||
|                 } | ||||
|  | ||||
|                 input { | ||||
|                     background-color: transparent !important; | ||||
|                     color: #adb5bd; | ||||
| @ -80,6 +84,9 @@ body { | ||||
|  | ||||
|     footer { | ||||
|         color: #adb5bd; | ||||
|         a { | ||||
|             color: #adb5bd; | ||||
|         } | ||||
|     } | ||||
|  | ||||
| } | ||||
| @ -102,12 +109,13 @@ header::after { | ||||
|         .nav { | ||||
|             .slide { | ||||
|                 .slide-menu { | ||||
|  | ||||
|                     .active { | ||||
|                         a { | ||||
|                             color: #cccccc; | ||||
|                             color: #fff !important; | ||||
|  | ||||
|                             &::after { | ||||
|                                 background-color: #cccccc !important; | ||||
|                                 background-color: var(--dark-primary) !important; | ||||
|                             } | ||||
|                         } | ||||
|                     } | ||||
| @ -115,23 +123,34 @@ header::after { | ||||
|                     li { | ||||
|                         a { | ||||
|                             color: #cccccc; | ||||
|                         } | ||||
|  | ||||
|                         a:hover { | ||||
|                             background: none !important; | ||||
|                             &:hover { | ||||
|                                 background: none !important; | ||||
|                             } | ||||
|  | ||||
|                             &::after { | ||||
|                                 background-color: var(--dark-primary) !important; | ||||
|                                 box-shadow: 0 0 1px #000  !important; | ||||
|                             } | ||||
|  | ||||
|                         } | ||||
|                     } | ||||
|                 } | ||||
|  | ||||
|                 .menu.active { | ||||
|                     background-color: #483d8b !important; | ||||
|                     background-color: var(--dark-primary) !important; | ||||
|                     color: #cccccc !important; | ||||
|  | ||||
|                     a::after { | ||||
|                         background-color: #cccccc !important; | ||||
|                 .menu { | ||||
|                     &:hover, | ||||
|                     &.active { | ||||
|                         background-color: #483d8b !important; | ||||
|                         background-color: var(--dark-primary) !important; | ||||
|                         color: #fff !important; | ||||
|                         box-shadow: 0 0 1px #000 !important; | ||||
|                     } | ||||
|                 } | ||||
|  | ||||
|                 .menu[data-title=Status]:before, | ||||
|                 .menu[data-title=Control]:before { | ||||
|                     color: var(--dark-primary) !important; | ||||
|                 } | ||||
|             } | ||||
|  | ||||
|             li { | ||||
| @ -142,7 +161,7 @@ header::after { | ||||
|                 a:hover { | ||||
|                     background-color: #483d8b !important; | ||||
|                     background-color: var(--dark-primary) !important; | ||||
|                     color: #cccccc !important; | ||||
|                     color: #fff !important; | ||||
|  | ||||
|  | ||||
|                 } | ||||
| @ -154,9 +173,6 @@ header::after { | ||||
|             background-color: #252526 !important; | ||||
|         } | ||||
|  | ||||
|         &::-webkit-scrollbar-track { | ||||
|             background-color: #333; | ||||
|         } | ||||
|     } | ||||
|  | ||||
|     .main-right { | ||||
| @ -175,18 +191,31 @@ h3 { | ||||
|     background: #333333; | ||||
| } | ||||
|  | ||||
| a:-webkit-any-link { | ||||
|     color: -webkit-link; | ||||
|     cursor: pointer; | ||||
|     color: #483d8b; | ||||
|     color: var(--dark-primary); | ||||
| a:link, | ||||
| a:visited, | ||||
| a:active { | ||||
|     color: var(--dark_webkit-any-link); | ||||
| } | ||||
|  | ||||
| a:-webkit-any-link:not(li a, .main-left a, .brand, .pull-right a, .alert-message a, .login-container footer a, .cbi-button) { | ||||
|     color: var(--dark_webkit-any-link) !important; | ||||
|     text-shadow: 1px 1px 2px #000 !important; | ||||
| } | ||||
|  | ||||
| input:-webkit-autofill { | ||||
|     background-color: #3c3c3c !important; | ||||
| } | ||||
|  | ||||
| input[type="checkbox"]:checked { | ||||
|     background-color: #483d8b !important; | ||||
|     background-color: var(--dark-primary) !important; | ||||
| } | ||||
|  | ||||
| .cbi-input-radio:checked { | ||||
|     background-color: #483d8b !important; | ||||
|     background-color: var(--dark-primary) !important; | ||||
| } | ||||
|  | ||||
| .cbi-value-field .cbi-input-apply, | ||||
| .cbi-button-apply, | ||||
| .cbi-button-edit { | ||||
| @ -197,14 +226,11 @@ input:-webkit-autofill { | ||||
|     border-color: var(--dark-primary) !important; | ||||
| } | ||||
|  | ||||
|  | ||||
| .cbi-section em { | ||||
|     color: #483d8b; | ||||
|     color: var(--dark-primary); | ||||
|     color: var(--dark_webkit-any-link); | ||||
|     text-shadow: 1px 1px 2px #000; | ||||
| } | ||||
|  | ||||
|  | ||||
|  | ||||
| header.bg-primary { | ||||
|     background-color: #1e1e1e !important; | ||||
| } | ||||
| @ -258,8 +284,8 @@ table>thead>tr>td { | ||||
| #membuff>div>div>div>small, | ||||
| #conns>div>div>div>small, | ||||
| #memtotal>div>div>div>small { | ||||
|  | ||||
|     color: #ccc !important; | ||||
|     text-shadow: 1px 1px 2px #000 !important; | ||||
| } | ||||
|  | ||||
| .node-system-packages>.main .cbi-section-node:first-child .cbi-value-last { | ||||
| @ -281,8 +307,8 @@ table>thead>tr>td { | ||||
| table>tbody>tr>th, | ||||
| table>tfoot>tr>th, | ||||
| table>thead>tr>th { | ||||
|  | ||||
|     background-color: #252526; | ||||
|     border-top: none; | ||||
|     border-bottom: black 1px solid !important; | ||||
| } | ||||
|  | ||||
| @ -321,9 +347,7 @@ table>thead>tr>th { | ||||
| } | ||||
|  | ||||
| abbr { | ||||
|     color: #483d8b; | ||||
|     color: var(--dark-primary); | ||||
|  | ||||
|     color: #8898aa; | ||||
| } | ||||
|  | ||||
| div>table>tbody>tr:nth-of-type(2n), | ||||
| @ -387,16 +411,6 @@ th h6, td h6 { | ||||
|     background-color: #00ff0a45 !important; | ||||
| } | ||||
|  | ||||
| /* OCD: Compatible the background color of the "Add the node via the link" & "USE(node)" pop-up window in PassWall (dark mode only) */ | ||||
| #add_link_div, | ||||
| #set_node_div { | ||||
|     background-color: #333333f0 !important; | ||||
|     box-shadow: #00000094 10px 10px 30px 5px !important; | ||||
| } | ||||
| #add_link_div>.cbi-value>.cbi-value-field>#nodes_link { | ||||
|     background: #ccc; | ||||
| } | ||||
|  | ||||
| #content_syslog { | ||||
|     box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35) | ||||
| } | ||||
| @ -418,25 +432,26 @@ th h6, td h6 { | ||||
|     background-color: #252526; | ||||
| } | ||||
|  | ||||
| .tabs>li[class~="active"]>a { | ||||
|     color: #ccc; | ||||
| } | ||||
|  | ||||
| .tabs>li:hover, | ||||
| .tabs>li[class~="active"], | ||||
| .tabs>li:hover { | ||||
|     border-bottom: 0.18751rem solid #483d8b; | ||||
|     border-bottom: 0.18751rem solid var(--dark-primary); | ||||
|     color: #ccc; | ||||
|     background-color: #181819; | ||||
| .cbi-tabmenu>li:hover, | ||||
| .cbi-tabmenu>li[class~="cbi-tab"] { | ||||
|     border-bottom: .18751rem solid var(--dark-primary); | ||||
|     background-color: #3c3c3c; | ||||
| } | ||||
|  | ||||
| .cbi-tabmenu>li>a, | ||||
| .tabs>li>a { | ||||
|     color: #ccc; | ||||
| .tabs>li>a, | ||||
| .cbi-tabmenu>li>a { | ||||
|     color: #ccc !important; | ||||
| } | ||||
|  | ||||
|     &:hover { | ||||
|         color: #ccc; | ||||
|     } | ||||
| .cbi-tabmenu>li>a:hover, | ||||
| .cbi-tabmenu>li:hover>a, | ||||
| .cbi-tabmenu>.cbi-tab>a, | ||||
| .tabs>li>a:hover, | ||||
| .tabs>li:hover>a, | ||||
| .tabs>li[class~="active"]>a { | ||||
|     color: #fff !important; | ||||
| } | ||||
|  | ||||
| .cbi-tabmenu>li { | ||||
| @ -447,20 +462,12 @@ th h6, td h6 { | ||||
|     border-bottom: 0px solid #ddd !important; | ||||
| } | ||||
|  | ||||
| .cbi-tabmenu li[class~="cbi-tab"] a { | ||||
| .cbi-tab-descr { | ||||
|     color: #ccc; | ||||
| } | ||||
|  | ||||
| .cbi-tabmenu>li:hover { | ||||
|     color: #ccc; | ||||
|     background: #2d2d2d; | ||||
| } | ||||
|  | ||||
| .cbi-tabmenu>li[class~="cbi-tab"] { | ||||
|     background-color: #181819; | ||||
| } | ||||
|  | ||||
| .cbi-tabcontainer>.cbi-value:nth-of-type(2n) { | ||||
| .cbi-tabcontainer>.cbi-value:nth-of-type(2n), | ||||
| .cbi-tabcontainer>.cbi-value:nth-of-type(2n)>textarea { | ||||
|     background-color: #252526; | ||||
| } | ||||
|  | ||||
| @ -476,7 +483,8 @@ input { | ||||
|     box-shadow: 0 3px 2px rgba(0, 0, 0, .05); | ||||
| } | ||||
|  | ||||
| select:not([multiple="multiple"]):focus, | ||||
| select:not([multiple="multiple"]):hover, | ||||
| input:hover, | ||||
| input:focus { | ||||
|     border-color: #483d8b !important; | ||||
|     border-color: var(--dark-primary) !important; | ||||
| @ -511,13 +519,13 @@ select { | ||||
|     color: #ccc; | ||||
| } | ||||
|  | ||||
| .cbi-input-textarea { | ||||
| /*textarea for dark mode*/ | ||||
| textarea { | ||||
|     border: 1px solid #3c3c3c !important; | ||||
|     background-color: #1e1e1e; | ||||
|     color: #ccc; | ||||
| } | ||||
|  | ||||
|  | ||||
|  | ||||
| .cbi-section-remove:nth-of-type(2n), | ||||
| .cbi-section-node:nth-of-type(2n) { | ||||
|     background-color: #1e1e1e; | ||||
| @ -580,9 +588,11 @@ img[src="/luci-static/resources/icons/loading.gif"] { | ||||
| } | ||||
|  | ||||
| div.cbi-value var, | ||||
| td.cbi-value-field var { | ||||
| td.cbi-value-field var, | ||||
| .td.cbi-value-field var { | ||||
|     color: #483d8b; | ||||
|     color: var(--dark-primary); | ||||
|     color: var(--dark_webkit-any-link); | ||||
|     text-shadow: 1px 1px 2px #000; | ||||
| } | ||||
|  | ||||
| #diag-rc-output>pre { | ||||
| @ -592,7 +602,7 @@ td.cbi-value-field var { | ||||
|  | ||||
| .node-services-vssr .block { | ||||
|     background-color: #1e1e1e !important; | ||||
|     box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35); | ||||
|     box-shadow: 0 0 .5rem 0 rgba(0,0,0,0.35) !important; | ||||
| } | ||||
|  | ||||
| .node-services-vssr .block h4 { | ||||
| @ -601,8 +611,8 @@ td.cbi-value-field var { | ||||
|  | ||||
| .node-services-vssr .status-bar { | ||||
|     color: #ccc; | ||||
|     box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, .35); | ||||
|     background-color: #1e1e1e; | ||||
|     background: #333333f0; | ||||
|     box-shadow: #00000094 10px 10px 30px 5px; | ||||
| } | ||||
|  | ||||
| .node-services-vssr .cbi-section-table-row { | ||||
| @ -738,6 +748,150 @@ fieldset[id^="cbi-apply-"] { | ||||
|     color: #ccc !important; | ||||
| } | ||||
|  | ||||
| /* luci-app-passwall */ | ||||
| #cbi-passwall #add_link_div, | ||||
| #cbi-passwall #set_node_div { | ||||
|     background: #333333f0 !important; | ||||
|     box-shadow: #00000094 10px 10px 30px 5px !important; | ||||
| } | ||||
|  | ||||
| /* luci-app-bypass */ | ||||
| #cbi-bypass .status-bar { | ||||
|     color: #ccc; | ||||
|     background: #333333f0; | ||||
|     box-shadow: #00000094 10px 10px 30px 5px; | ||||
| } | ||||
|  | ||||
| /* luci-app-clash */ | ||||
| #cbi-clash .cbi-section .pure-u-1-4 .pure-g, | ||||
| #cbi-clash .cbi-section .siz .pure-g { | ||||
|     background-color: #1e1e1e !important; | ||||
|     box-shadow: 0 0 .5rem 0 rgba(0,0,0,0.35) !important; | ||||
| } | ||||
|  | ||||
| /* luci-app-openclash */ | ||||
| #cbi-openclash #eye-icon, | ||||
| #cbi-openclash img[title="刷新"] { | ||||
|     filter: invert(100%); | ||||
| } | ||||
| #cbi-openclash #cbi-openclash-config fieldset[control-id="ControlID-46"], | ||||
| #cbi-openclash .CodeMirror-merge-copybuttons-right, | ||||
| .CodeMirror-scroll { | ||||
|     background-color: #333333 !important; | ||||
| } | ||||
| #cbi-openclash .cbi-section .cbi-tabmenu li { | ||||
|     border-right: 1px solid #3c3c3c !important; | ||||
| } | ||||
| #cbi-openclash .CodeMirror-merge { | ||||
|     border: 1px solid transparent !important; | ||||
| } | ||||
| #cbi-openclash-config-clog .cbi-section { | ||||
|     border: 1px solid #3c3c3c !important; | ||||
| } | ||||
| #cbi-openclash .CodeMirror-gutters { | ||||
|     border-right: 1px solid #3c3c3c !important; | ||||
|     background-color: #1e1e1e !important; | ||||
| } | ||||
|  | ||||
| /* luci-app-dockerman */ | ||||
| #cbi-dockerd .img-con img { | ||||
|     filter: invert(0.4); | ||||
| } | ||||
|  | ||||
| /* luci-app-istorex (interface config[NetworkPort]) */ | ||||
| #cbi-nfs-mount  .app-container_status-label_bg { | ||||
|     background: #333333; | ||||
| } | ||||
| #cbi-nfs-mount td svg { | ||||
|     filter: invert(0.3); | ||||
| } | ||||
| #actioner .actioner-dns { | ||||
|     background-color: #333333; | ||||
| } | ||||
| #actioner .actioner-dns_header, | ||||
| #actioner .actioner-container_header { | ||||
|     border-bottom: 1px solid #cbcbcb !important; | ||||
| } | ||||
| #actioner .actioner-dns_footer { | ||||
|     border-top: 1px solid #cbcbcb !important; | ||||
| } | ||||
|  | ||||
| /* luci-app-istorex (Network Guide) */ | ||||
| #app #main #page .title, | ||||
| #app #main #page .desc { | ||||
|     color: #cccccc; | ||||
|     background-color: #333333; | ||||
| } | ||||
| #app #main #page .network-message li:not(span):not(a) { | ||||
|     color: #8d8d8d; | ||||
| } | ||||
| #app #main #page code { | ||||
|     background-color: #333333; | ||||
| } | ||||
|  | ||||
| /* luci-app-istorex (Quick Start) */ | ||||
| #app #main #page .network-container_flow-container, | ||||
| #app #main #page .app-container_status-container, | ||||
| #app #main #page .nas-container .nas-container_card .app-container, | ||||
| #app #main #page .app-container { | ||||
|     background-color: #333333; | ||||
| } | ||||
| #app #main #page .flow-data span, | ||||
| #app #main #page .app-container_status-label_block span, | ||||
| #app #main #page .app-container .item-label span:not(#app #main #page .app-container .progress-value span) { | ||||
|     color: #cccccc; | ||||
| } | ||||
| #app #main #page .app-container_status-info span, | ||||
| #app #main #page .app-container_status-info span, | ||||
| #app #main #page .app-container_title span { | ||||
|     color: #dddddd; | ||||
| } | ||||
| .app-container_body .app-container_status-label_bg { | ||||
|     background-color: #282828 !important; | ||||
| } | ||||
| #app #main #page .item-label_value .progress { | ||||
|     background-color: rgb(118, 118, 118); | ||||
| } | ||||
| #app #main #page .app-container_nas-menu button[class=""] { | ||||
|     background-color: #8b8b8b; | ||||
| } | ||||
| #app #main #page .app-container_nas-menu button[class="on"] { | ||||
|     background-color: #555555; | ||||
| } | ||||
| #app #main #page .app-container_title .DeviceBlock ul { | ||||
|     background-color: #cccccc; | ||||
| } | ||||
| #actioner div.action, | ||||
| #actioner div.actioner-container { | ||||
|     background-color: #3c3c3c; | ||||
| } | ||||
| #actioner div.action .title { | ||||
|     color: #cccccc; | ||||
| } | ||||
| #actioner div.action .desc { | ||||
|     color: #cbcbcb; | ||||
| } | ||||
| #actioner div.action div.roots span, | ||||
| #actioner div.action div.move span:not(span.tip), | ||||
| #actioner div.action div.left span, | ||||
| #actioner div.action div.input_row span, | ||||
| #actioner div.label-item label span { | ||||
|     color: #cbcbcb; | ||||
| } | ||||
| #actioner div.action span.tooltip-trigger svg path { | ||||
|     fill: #cbcbcb; | ||||
| } | ||||
| #actioner div.actioner-dns_body div.label-item_value select { | ||||
|     height: 43px; | ||||
| } | ||||
| #actioner div.actioner-container_footer div.close { | ||||
|     color: #ffffff; | ||||
| } | ||||
| #app #main div.app-container div.app-container_title span a svg path, | ||||
| #app #main #page span.disk_infoicon svg g { | ||||
|     fill: #8b8b8b; | ||||
| } | ||||
|  | ||||
| @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { | ||||
|     .login-page .login-container .login-form { | ||||
|         -webkit-backdrop-filter: blur(var(--blur-radius-dark)); | ||||
|  | ||||
| @ -2,6 +2,7 @@ | ||||
| 	Argone is a clean HTML5 theme for LuCI. It is based on luci-theme-material Argone Template | ||||
|  | ||||
| 	luci-theme-argone | ||||
| 	Copyright 2020 Jerrykuku | ||||
|  | ||||
| 	Have a bug? Please create an issue here on GitHub! | ||||
| 	https://github.com/kenzok78/luci-theme-argone/issues | ||||
| @ -17,7 +18,7 @@ | ||||
| 	luci-theme-material: | ||||
| 	https://github.com/LuttyYang/luci-theme-material/ | ||||
|  | ||||
| 	Argon Theme | ||||
| 	Argone Theme | ||||
| 	https://demos.creative-tim.com/argon-dashboard/index.html | ||||
|  | ||||
| 	Login background | ||||
| @ -40,9 +41,9 @@ | ||||
| </div> | ||||
| <footer> | ||||
| 	<div class="ftc"> | ||||
| 		<a class="luci-link" href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> | ||||
| 		<a class="luci-link" href="https://github.com/openwrt/luci" target="_blank">Powered by <%= ver.luciname %> | ||||
| 			(<%= ver.luciversion %>)</a> / | ||||
| 		<a href="https://github.com/kenzok78/luci-theme-argone">ArgoneTheme <%# vPKG_VERSION %></a> / | ||||
| 		<a href="https://github.com/kenzok78/luci-theme-argone" target="_blank">ArgoneTheme <%# vPKG_VERSION %></a> / | ||||
| 		<%= ver.distversion %> | ||||
| 		<% if #categories > 1 then %> | ||||
| 		<ul class="breadcrumb pull-right" id="modemenu"> | ||||
| @ -58,27 +59,21 @@ | ||||
| </div> | ||||
| </div> | ||||
| 	<script> | ||||
| 		// thanks for Jo-Philipp Wich <jow@openwrt.org> | ||||
| 		var winHeight = $(window).height(); | ||||
| 		$(window).resize(function () { | ||||
| 			if($(document.body).height() < 525 ){ | ||||
| 				if($(".ftc").css('display') != 'none'){ | ||||
| 					$(".ftc").hide() | ||||
| 				} | ||||
| 			}else{ | ||||
| 				if($(".ftc").css('display') == 'none'){ | ||||
| 					$(".ftc").show() | ||||
| 				} | ||||
| 		if (window.innerHeight < 660) { | ||||
| 			document.getElementsByClassName("ftc")[0].style.display = "none"; | ||||
| 		} else { | ||||
| 			document.getElementsByClassName("ftc")[0].style.display = "block"; | ||||
| 		} | ||||
|  | ||||
| 		window.addEventListener('resize', function() { | ||||
| 			if (window.innerHeight < 660) { | ||||
| 				document.getElementsByClassName("ftc")[0].style.display = "none"; | ||||
| 			} else { | ||||
| 				document.getElementsByClassName("ftc")[0].style.display = "block"; | ||||
| 			} | ||||
| 		}) | ||||
| 	</script> | ||||
|  | ||||
| 	<script> | ||||
| 		if (window.orientation == 90 || window.orientation == -90) { | ||||
| 			$(".ftc").hide() | ||||
| 		} | ||||
| 	</script> | ||||
|  | ||||
| 	<script src="<%=media%>/js/styles-argone.js<%# ?v=PKG_VERSION %>"></script> | ||||
| </body> | ||||
| </html> | ||||
|  | ||||
| @ -2,6 +2,7 @@ | ||||
| 	Argone is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argone Template | ||||
|  | ||||
| 	luci-theme-argone | ||||
| 	Copyright 2020 Jerryk <kenzok78@gmail.com> | ||||
|  | ||||
| 	Have a bug? Please create an issue here on GitHub! | ||||
| 	https://github.com/kenzok78/luci-theme-argone/issues | ||||
| @ -14,7 +15,7 @@ | ||||
| 	MUI: | ||||
| 	https://github.com/muicss/mui | ||||
| 	 | ||||
| 	Argon Theme | ||||
| 	Argone Theme | ||||
| 	https://demos.creative-tim.com/argon-dashboard/index.html | ||||
|  | ||||
| 	Licensed to the public under the Apache License 2.0 | ||||
| @ -266,6 +267,7 @@ | ||||
| 	<script src="<%=resource%>/cbi.js<%# ?v=PKG_VERSION %>"></script> | ||||
| 	<script src="<%=resource%>/xhr.js<%# ?v=PKG_VERSION %>"></script> | ||||
| 	<script src="<%=media%>/js/jquery.min.js?v=3.5.1"></script> | ||||
| 	<script src="<%=media%>/js/color_calc-argone.js<%# ?v=PKG_VERSION %>"></script> | ||||
| </head> | ||||
|  | ||||
| <body | ||||
|  | ||||
| @ -2,6 +2,7 @@ | ||||
| 	Argone is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argone Template | ||||
|  | ||||
| 	luci-theme-argone | ||||
| 	Copyright 2020 Jerrykuku | ||||
|  | ||||
| 	Have a bug? Please create an issue here on GitHub! | ||||
| 	https://github.com/kenzok78/luci-theme-argone/issues | ||||
| @ -14,7 +15,7 @@ | ||||
| 	MUI: | ||||
| 	https://github.com/muicss/mui | ||||
| 	 | ||||
| 	Argon Theme | ||||
| 	Argone Theme | ||||
| 	https://demos.creative-tim.com/argon-dashboard/index.html | ||||
|  | ||||
| 	Licensed to the public under the Apache License 2.0 | ||||
|  | ||||
| @ -2,6 +2,7 @@ | ||||
| 	Argone is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI and Argone Template | ||||
|  | ||||
| 	luci-theme-argone | ||||
| 	Copyright 2021 Jerryk | ||||
|  | ||||
| 	Have a bug? Please create an issue here on GitHub! | ||||
| 	https://github.com/kenzok78/luci-theme-argone/issues | ||||
| @ -14,7 +15,7 @@ | ||||
| 	MUI: | ||||
| 	https://github.com/muicss/mui | ||||
|  | ||||
| 	Argon Theme | ||||
| 	Argone Theme | ||||
| 	https://demos.creative-tim.com/argon-dashboard/index.html | ||||
|  | ||||
| 	Licensed to the public under the Apache License 2.0 | ||||
| @ -128,9 +129,8 @@ | ||||
| 	<div class="login-container"> | ||||
| 		<div class="login-form"> | ||||
| 			<!-- Logo Start --> | ||||
| 			<a class="brand" href="/"><img src="<%=media%>/img/argone.svg" class="icon"> | ||||
| 				<span class="brand-text"><%=striptags( (boardinfo.hostname or "?") ) %></span> | ||||
| 			</a> | ||||
| 			<a class="brand" href="/"><img src="<%=media%>/img/argone.svg" class="icon"></a> | ||||
| 			<span class="brand-text"><%=striptags( (boardinfo.hostname or "?") ) %></span> | ||||
| 			<!-- Logo End --> | ||||
| 			<!-- Login Form Start --> | ||||
| 			<form class="form-login" method="post" action="<%=pcdata(luci.http.getenv("REQUEST_URI"))%>"> | ||||
|  | ||||
![41898282+github-actions[bot]@users.noreply.github.com](/assets/img/avatar_default.png) github-actions[bot]
					github-actions[bot]