small-package/luci-theme-kucat/htdocs/luci-static/kucat/css/dark.css

785 lines
17 KiB
CSS

/*
* luci-theme-kucat
* Copyright (C) 2019-2024 The Sirpdboy Team <herboy2008@gmail.com>
*
* Have a bug? Please create an issue here on GitHub!
* https://github.com/sirpdboy/luci-theme-kucat/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>
*
* luci-theme-material:
* https://github.com/LuttyYang/luci-theme-material/
* luci-theme-argon:
* https://github.com/jerrykuku/luci-theme-argon
* luci-theme-opentopd:
* https://github.com/sirpdboy/luci-theme-opentopd
*
* Licensed to the public under the Apache License 2.0
*/
body {
font-family: "Microsoft Yahei", "Google Sans", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB"!important
}
body {
color: #98a6ad;
}
*::-webkit-scrollbar {
background: transparent
}
*::-webkit-scrollbar-thumb {
background: #666;
height: 10px;
border-radius: 5px
}
*::-webkit-scrollbar-thumb:hover {
background-color: #bbb
}
*::-webkit-scrollbar-track {
background: transparent
}
::selection {
background-color: #374564!important;
color: #ccc;
}
a:link,
a:visited,
a:active {
color: #d0d7de;
}
a {
color: #d0d7de;
}
header.bar-primary .container-bar-right,
header.bar-primary .container-bar-left {
background-color: rgba(var(--primary-rgbm), 1);
box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15);
transition: all .2s ease;
transition: 0.3s ease-in-out
}
header.bar-primary .container-bar-right .labelbar:hover::before,
header.bar-primary .container-bar-left .labelbar:hover::before {
color: #d0d7de;
}
header.bar-primary .container-bar-left .pdboy-closebar:before {
color: #d0d7de
}
header.bar-primary .container-bar-right .pdboy-openbar:before {
color: #d0d7de
}
header.bar-primary .container-bar-left .pdboy-gohome:before {
color: #d0d7de
}
header.bar-primary .container-bar-left .pdboy-gossr:before {
color: #d0d7de
}
header.bar-primary .container-bar-left .pdboy-gonet:before {
color: #d0d7de
}
header.bar-primary .container-bar-left .pdboy-gouser:before {
color: #d0d7de
}
header.bar-primary .container-bar-left .pdboy-gocontrol:before {
color: #d0d7de
}
header.bar-primary .container-bar-left .pdboy-goadvanced:before {
color: #d0d7de
}
#detail-bubble>div {
border: 1px solid rgba(255,255,255,0.3);
border-radius: 3px;
padding: 1px;
background-color: rgba(var(--primary-rgbbody), 1)!important;
}
#detail-bubble .head .dismiss {
color: #8391a2;
}
#bubble-arrow {
border: 1px solid rgba(255,255,255,0.3);
background-color: rgba(var(--primary-rgbbody), 1);
}
header.bg-primary {
box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.35);
}
.uci_change_indicator.label.notice,
.pd-primary .fill .container .flex1 .showSide,
.pd-primary .fill .container .flex1 .brand,
.showWord::after,
.showWord::before ,
header>.fill>.container>.showWord ,
.showWord {
color: #e9eff3
}
header>.fill>.container>.brand {
font-family: "Microsoft Yahei", "Google Sans", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";
color: #e9eff3;
}
.pull-right a,
.pull-right span a {
color: #bbb;
}
.pull-right a:hover,
.pull-right span a:hover {
background-color: rgba(255, 255, 255, 0.2);
color: #f8f8f8;
}
.pdboy-status_on::before {
color: #e9eff3
}
.showSide {
color: #e9eff3;
}
.notice {
color: #bbb
}
.label {
color: #bbb;
}
footer {
color: #bbb;
}
footer a {
color: #bbb;
}
.main .main-left {
-webkit-box-shadow: rgb(250 250 250 / 75%) 0 0 15px -5px;
box-shadow: 2px 2px 8px #666,-2px -2px 8px #bbb;
}
.main .main-left::-webkit-scrollbar-thumb {
height: 8px;
background: #555;
border-radius: 5px
}
.main .main-left::-webkit-scrollbar-thumb:hover,
.main .main-left::-webkit-scrollbar-thumb:active {
background: #bbb;
border: none
}
.main .main-left .nav li.slide .menu {
color: #bbb
}
.main .main-left .nav .slide .menu:after,
.main .main-left .nav li.slide .menu::after {
color: #bbb;
}
.main .main-left .nav li.slide .menu:hover a::after,
.main .main-left .nav li.slide .menu.active a::after {
color: #bbb;
}
.main>.main-left>.nav>.slide>.menu.active::before,
.main .main-left .nav li.slide .menu:hover::after,
.main .main-left .nav li.slide .menu.active::after {
color: #e9eff3
}
.main .main-left .nav>li>a:hover,
.main .main-left .nav>li>a.active,
.main .main-left .nav li.slide .menu:hover,
.main .main-left .nav li.slide .menu.active {
background-color: rgba(255, 255, 255, 0.2);
color: #e9eff3 !important;
}
.main .main-left .nav li.slide .menu:hover a,
.main .main-left .nav li.slide .menu.active a {
color: #e9eff3
}
.main .main-left .nav li.slide .menu:hover::before,
.main .main-left .nav li.slide .menu.active::before {
color: #e9eff3
}
.main .main-left .nav li.slide .slide-menu li a {
color: #bbb;
}
.main .main-left .nav .slide .slide-menu .active a {
color: #e9eff3;
}
.main .main-left .nav .slide .slide-menu > li.active {
color: #e9eff3;
background-color: rgba(255, 255, 255, 0.2);
border-left: 4px solid #fd8c73
}
.main .main-left .nav .slide .slide-menu li:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.main .main-left .nav .slide .slide-menu li:active a {
color: #e9eff3
}
.main .main-left .nav .slide .slide-menu li:hover a {
color: #e9eff3;
}
.main .main-left .sidenav-header .brand {
font-family: "Microsoft Yahei",-apple-system, "WenQuanYi Micro Hei", "sans-serif";
color: #ccc;
}
.main .main-right #maincontent .container>div:nth-child(1).alert-message.warning>a {
color: #ccc;
}
.main .main-left .nav>li>a:first-child,
.main .main-left .nav li.slide .menu::before,
.main .main-left .nav>li>a:first-child::before,
.main .main-left .nav .slide .menu::before {
color: #bbb
}
select,
input {
font-family: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";
}
input[type="checkbox"] {
background: rgba(255,255,255,0.1);
}
input:checked[type="checkbox"]:before {
transform: rotate(45deg);
width: 12px;
margin-left: 5px;
border-color: #f5f5f5;
border-width: 3px;
border-top-color: transparent;
border-left-color: transparent;
border-radius: 0
}
.cbi-input-radio:checked {
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: rgba(255,255,255,0.7) !important;
background-size: 70%;
background-repeat: no-repeat;
background-position: center
}
select:not([multiple="multiple"]):focus, input:not(.cbi-button):focus, .cbi-dropdown:focus {
background-color: rgba(255,255,255,0.18);
box-shadow: 0 0.5rem 1rem rgba(255,255,255, 0.35);
-webkit-box-shadow: 0 0 6px rgba(255,255,255, 0.35);
-moz-box-shadow: 0 0 6px rgba(255,255,255, 0.35);
}
.btn, button, select, input, .cbi-dropdown,.item::after {
color: #d0d7de;
border: 1px solid rgba(255,255,255,0.12)!important;
box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.12)!important;
}
.btn, .cbi-button, .item::after {
color: #eee;
}
.cbi-input-textarea,
textarea {
color: #8391a2;
background-color: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.12)!important;
box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.12)!important;
}
#diag-rc-output>pre {
color: #bbb
}
#swaptotal>div>div>div>small,
#swapfree>div>div>div>small,
#memfree>div>div>div>small,
#membuff>div>div>div>small,
#conns>div>div>div>small,
#memtotal>div>div>div>small {
color: #ccc !important;
}
.node-main-login .main .main-right #maincontent .alert-message p {
color: #eee;
font-weight: normal;
}
.node-main-login .errorbox {
color: #eee !important;
}
.table {
color: #8391a2;
}
.table-titles .th {
color: #8391a2
}
button:hover,
.btn:hover,
.cbi-button:hover,
.item:hover::after {
box-shadow: 0 0.5rem 1rem rgba(255,255,255, 0.35);
-webkit-box-shadow: 0 0 6px rgba(255,255,255, 0.35);
-moz-box-shadow: 0 0 6px rgba(255,255,255, 0.35);
}
.btn:active ,
.cbi-button:active ,
button:active,
.item:hover::after {
box-shadow: 0 0.5rem 1rem rgba(255,255,255, 0.15);
-webkit-box-shadow: 0 0 6px rgba(255,255,255, 0.15);
-moz-box-shadow: 0 0 6px rgba(255,255,255, 0.15);
}
fieldset[id^="cbi-apply-"] {
box-shadow: 0 2px 2px 0 rgba(255, 255, 255, 0.14), 0 3px 1px -2px rgba(255, 255, 255, 0.32), 0 1px 5px 0 rgba(255, 255, 255, 0.2);
}
.cbi-section>h3:first-child,
.panel-title {
color: #bbb
}
table>tbody>tr>td,
table>tbody>tr>th,
table>tfoot>tr>td,
table>tfoot>tr>th,
table>thead>tr>td,
table>thead>tr>th,
.table>.tbody>.tr>.td,
.table>.tbody>.tr>.th,
.table>.tfoot>.tr>.td,
.table>.tfoot>.tr>.th,
.table>.thead>.tr>.td,
.table>.thead>.tr>.th {
color: #8391a2
}
.cbi-tabcontainer>.cbi-value:nth-of-type(4n+2):hover,.cbi-map>.cbi-section .cbi-value:nth-of-type(4n+2):hover,fieldset>table>tbody>tr:nth-of-type(4n+2):hover,table>tbody>tr:nth-of-type(4n+2):hover,div>.table>.tr:nth-of-type(4n+2):hover {
background-color: rgba(250,250,250,0.05);
}
.cbi-tabcontainer>.cbi-value:nth-of-type(2n+1):hover,.cbi-map>.cbi-section .cbi-value:nth-of-type(2n+1):hover,fieldset>table>tbody>tr:nth-of-type(2n+1):hover,table>tbody>tr:nth-of-type(2n+1):hover,div>.table>.tr:nth-of-type(2n+1):hover {
background-color: rgba(250,250,250,0.05);
}
.cbi-tabcontainer>.cbi-value:nth-of-type(4n):hover,.cbi-map>.cbi-section .cbi-value:nth-of-type(4n):hover,fieldset>table>tbody>tr:nth-of-type(4n):hover,table>tbody>tr:nth-of-type(4n):hover,div>.table>.tr:nth-of-type(4n):hover {
background-color: rgba(250,250,250,0.05);
}
.cbi-rowstyle-2 .cbi-button-up, .cbi-rowstyle-2 .cbi-button-down, body:not(.Interfaces) .cbi-rowstyle-2:first-child {
background-color: rgba(0,0,0,0, 0.2) !important;
}
.cbi-rowstyle-1 .cbi-button-up, .cbi-rowstyle-1 .cbi-button-down, body:not(.Interfaces) .cbi-rowstyle-1:first-child {
background-color: rgba(0,0,0,0, 0.1) !important;
}
.status-bar {
font-size: var(--font-x);
color: #8391a2 !important;
background-color: rgba(var(--primary-rgbbody), 0.9)
}
.success {
color: #ddd;
}
.danger {
color: #ddd;
}
.errorbox {
color: #ccc;
}
h2 {
color: #bbb
}
h3 {
color: #bbb;
}
.panel-title {
color: #bbb;
}
.tabs {
margin: 1rem;
color: #b4c9e3;
}
.tabs::-webkit-scrollbar-thumb {
background-color: #555
}
.tabs::-webkit-scrollbar-track {
background: transparent
}
.tabs>li {
background: #343a40;
box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15);
}
.tabs li[class~="active"] {
border-right: 0.18751rem solid #fd8c73;
border-left: 0.18751rem solid #fd8c73;
box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15);
background-color: rgba(255, 255, 255, 0.2);
}
.tabs li[class~="hover"] {
background-color: rgba(255, 255, 255, 0.2);
}
.tabs li:hover {
box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.35);
background-color: rgba(255, 255, 255, 0.2);
}
.tabs li[class~="active"] a {
color: #bbb
}
.tabs li:hover a {
color: #bbb
}
.tabs li a {
color: #8391a2
}
.cbi-tabmenu {
color: #8391a2;
}
.cbi-tabmenu::-webkit-scrollbar {
width: 5px;
height: 5px;
}
.cbi-tabmenu::-webkit-scrollbar-thumb {
background-color: #555;
}
.cbi-tabmenu li {
background: #343a40;
font-size: 1rem;
border-radius: 0.25rem;
box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15);
}
.cbi-tabmenu li a {
color: ##8391a2;
}
.cbi-tabmenu li:hover {
color: #bbb;
box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.35);
background-color: rgba(255, 255, 255, 0.2);
}
.cbi-tabmenu li:hover a {
color: #bbb
}
.cbi-tabmenu li[class~="cbi-tab"] {
border-right: 0.18751rem solid #fd8c73;
border-left: 0.18751rem solid #fd8c73;
box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15);
background-color: rgba(255, 255, 255, 0.2);
}
.cbi-tabmenu li[class~="cbi-tab"] a {
color: #bbb
}
.cbi-tab-descr {
color: #8391a2;
}
.cbi-dropdown>.open {
background: #333
}
.cbi-dropdown>.more,
.cbi-dropdown>ul>li[placeholder] {
text-shadow: 1px 1px 0 #ccc;
}
.cbi-dropdown[open]>ul.dropdown {
background: #ccc;
}
.cbi-dropdown[open]>ul.dropdown>li[selected] {
background-color: #8391a2;
color: #fff;
}
.cbi-progressbar {
color: #8391a2;
}
.cbi-value-title {
color: #8391a2;
}
.cbi-section-descr {
color: #8391a2
}
.cbi-map-descr {
color: #8391a2;
}
#content_syslog{
box-shadow: 0 0 1px rgba(255, 255, 255, 0.12);
}
#syslog {
color: #8391a2;
font-family: monospace;
background-color: rgba(0,0,0,0.1);
}
.request>.requestBody,
.response .markdown-body,
.markdown-body {
color: #8391a2!important;
background-color: rgba(255,255,255,0)!important;
}
.bottom_wrapper .message_input_wrapper .message_input_text{
background-color: rgba(255,255,255,0.35)!important;
color: #d0d7de!important;
}
#chatlog .response .markdown-body>pre {
background-color: rgba(0,0,0,0.15)!important;
}
#chatlog .response {
background-color: rgba(255,255,255,0.03)!important;
}
.ifacebox-head {
color: #8391a2
}
.zonebadge {
color: #8391a2;
}
.zonebadge strong {
color: #8391a2
}
.Reboot>.main>.main-right #maincontent .container p {
color: #8391a2;
}
.node-services-vssr .block h4 {
color: #8391a2
}
.node-services-vssr .status-bar {
color: #8391a2;
box-shadow: 0 0 .5rem 0 rgba(0, 0, 0, 0.35);
background-color: rgba(0, 0, 0, 0.1) !important;
}
.node-services-vssr .block,
.node-services-shadowsocksr>.block,
.node-services-ssrpro>.block,
.block,
.node-services-bypass>.main .block,
.node-services-vssr>.main .block,
.main .block {
color: #8391a2;
background-color: rgba(255, 255, 255, 0.08) !important;
}
.node-services-shadowsocksr>.block:active,
.node-services-ssrpro>.block:active,
.block:active,
.node-services-bypass>.main .block:active,
.main .block:active,
.node-services-shadowsocksr>.block:hover,
.node-services-ssrpro>.block:hover,
.block:hover,
.node-services-bypass>.main .block:hover,
.main .block:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 6px rgba(0, 0, 0, 0.35);
background-color: rgba(250, 250, 250, 0.1)
}
/* log */
#cbi-openclash .CodeMirror.cm-s-idea.CodeMirror-wrap {
background: rgba(0,0,0,0.1)!important;
color: #adbcc9!important;
}
/* set modi file */
#cbi-openclash .cm-s-material.CodeMirror
{
background-color: #1b4c53!important;
color: #31b9c1!important;
}
/* card */
#cbi-openclash .card
{
background: linear-gradient(#337ab7, #a8bfcf)!important;
box-shadow: 0 8px 16px -8px rgba(255,255,255,0.5)!important;
}
.node-services-adguardhome>.main .cbi-value .cbi-input-textarea {
box-shadow: 0 0 1px rgba(255, 255, 255, 0.3)!important;
}
.Software >.main table tr td:nth-last-child(1) ,
.node-system-packages>.main table tr td:nth-last-child(1) {
color: #8391a2
}
.node-system-packages>.main .cbi-value>pre {
background-color: rgba(0, 0, 0, 0.22) ;
}
.Software >.main .cbi-section-node:first-child .cbi-value-last>div,
.node-system-packages>.main .cbi-section-node:first-child .cbi-value-last>div {
border-color: rgba(255, 255, 255, 0.3) !important;
background-color: rgba(255, 255, 255,0.22) !important;
}
.node-system-packages>.main .cbi-section-node:first-child .cbi-value-last>div>div {
background-color: rgba(var(--primary-rgbm), 1)!important;
}
.cbi-section {
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.08);
}
.cbi-section em {
color: #8391a2;
}
.node-status-realtime table>tbody>tr>td,
.node-status-realtime table>tfoot>tr>td,
.node-status-realtime table>thead>tr>td {
color: #8391a2;
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.cbi-dynlist > .item > span
{
color: #aaa;
}
.cbi-dropdown[open]>ul.dropdown {
background-color: rgba(var(--primary-rgbbody), 1);
}
.ifacebox {
color: #bbb;
}
.ifacebadge {
background-color: #797d7f;
color: #bbb;
}
.cbi-dropdown > .open,
.cbi-dropdown > .more {
background-color: rgba(255,255,255,0)!important;
}
@media screen and (max-width:992px) {
.main .main-left {
-webkit-box-shadow: rgba(250 250 250, 0.75) 0 0 20px -5px;
box-shadow: rgba(250 250 250, 0.75) 0 0 20px -5px;
}
.showSide:hover {
background-color: rgba(255, 255, 255, 0.2);
}
table>tbody>tr>td,
table>tfoot>tr>td,
table>thead>tr>td {
color: #8391a2;
}
}