update 2025-03-01 20:36:43

This commit is contained in:
kenzok8 2025-03-01 20:36:43 +08:00
parent bdd4406384
commit ec05ddcab4
2 changed files with 332 additions and 178 deletions

View File

@ -10,8 +10,8 @@ THEME_TITLE:=Kucat Theme
PKG_NAME:=luci-theme-$(THEME_NAME) PKG_NAME:=luci-theme-$(THEME_NAME)
LUCI_TITLE:=Kucat Theme by sirpdboy LUCI_TITLE:=Kucat Theme by sirpdboy
LUCI_DEPENDS:= LUCI_DEPENDS:=
PKG_VERSION:=2.5.4 PKG_VERSION:=2.5.5
PKG_RELEASE:=20250226 PKG_RELEASE:=20250301
define Package/luci-theme-$(THEME_NAME)/postinst define Package/luci-theme-$(THEME_NAME)/postinst
#!/bin/sh #!/bin/sh

View File

@ -48,7 +48,7 @@
--input-boxhovercolor: rgba(0, 0, 0, 0.22); --input-boxhovercolor: rgba(0, 0, 0, 0.22);
--input-checkcolor: rgba(var(--primary-rgbm), 1); --input-checkcolor: rgba(var(--primary-rgbm), 1);
--font-apple: -apple-system, "Google Sans", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif"; --font-apple: -apple-system, "Google Sans", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif";
--font-sans: "Microsoft Yahei", "Google Sans", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB" --font-sans: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB"
} }
[data-theme="dark"] { [data-theme="dark"] {
@ -69,7 +69,7 @@
--input-boxhovercolor: rgba(255, 255, 255, 0.22); --input-boxhovercolor: rgba(255, 255, 255, 0.22);
--input-checkcolor: rgba(255, 255, 255, 0.7); --input-checkcolor: rgba(255, 255, 255, 0.7);
--font-apple: -apple-system, "Google Sans", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif"; --font-apple: -apple-system, "Google Sans", "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif";
--font-sans: "Microsoft Yahei", "Google Sans", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB" --font-sans: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB"
} }
.tr { .tr {
@ -92,7 +92,7 @@
.th { .th {
line-height: normal; line-height: normal;
display: table-cell; display: table-cell;
padding: 0.5em; padding: .5em;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
white-space: nowrap white-space: nowrap
@ -294,7 +294,6 @@ select,
option, option,
textarea { textarea {
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: var(--font-z);
font-weight: 400; font-weight: 400;
box-sizing: border-box; box-sizing: border-box;
vertical-align: baseline; vertical-align: baseline;
@ -343,7 +342,7 @@ select,
} }
select option { select option {
background-color: rgba(var(--primary-rgbbody), 0.8); background-color: rgba(var(--primary-rgbbody), 1);
width: 100% !important; width: 100% !important;
overflow: hidden overflow: hidden
} }
@ -422,8 +421,10 @@ input:not(.cbi-button):focus,
.cbi-dropdown:focus { .cbi-dropdown:focus {
border: 1px solid rgba(var(--primary-rgbm), 0.7); border: 1px solid rgba(var(--primary-rgbm), 0.7);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.22); box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.22); }
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.22) .cbi-dropdown,
select[multiple="multiple"] {
height: auto;
} }
pre { pre {
@ -584,6 +585,18 @@ small {
transition: 0.1s; transition: 0.1s;
float: left float: left
} }
@keyframes anim-rotate {
0% {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.main>.loading { .main>.loading {
position: fixed; position: fixed;
@ -991,6 +1004,14 @@ span[data-indicator="poll-status"],
color: var(--menu-hover-color) color: var(--menu-hover-color)
} }
body[class*="node-"] > .main > .main-left > .nav > .slide > .menu::before {
transition: transform .1s ease-in-out;
}
body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before {
transition: transform .2s ease-in-out;
}
.main .main-left .nav>li>a.active::after { .main .main-left .nav>li>a.active::after {
-ms-transform: rotate(180deg); -ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg); -webkit-transform: rotate(180deg);
@ -1183,7 +1204,7 @@ h4>span {
h5 { h5 {
font-size: var(--font-z); font-size: var(--font-z);
color: var(--primary-title-color); color: var(--primary-title-color);
margin: 2rem 0 0 0; margin: 1rem 0 0 0;
padding-bottom: 10px padding-bottom: 10px
} }
@ -1296,7 +1317,7 @@ fieldset>fieldset {
[data-tab-title]>h3:first-child, [data-tab-title]>h3:first-child,
[data-tab-title]>h4:first-child, [data-tab-title]>h4:first-child,
[data-tab-title]>p:first-child { [data-tab-title]>p:first-child {
padding-top: 1rem padding: 0 1rem 0 1rem
} }
.table { .table {
@ -1352,12 +1373,6 @@ table .tr>.td.cbi-value-field>[id*="ifc-description"] {
font-weight: normal !important font-weight: normal !important
} }
table>tbody>tr:first-child>td,
table>tfoot>tr:first-child>td,
table>thead>tr:first-child>td {
border-top: 0px solid #eee
}
.container>.cbi-section:first-of-type>.table[width="100%"]>.tr>.td { .container>.cbi-section:first-of-type>.table[width="100%"]>.tr>.td {
padding: .6rem padding: .6rem
} }
@ -1368,6 +1383,12 @@ table>thead>tr:first-child>td {
flex: 1 1 auto flex: 1 1 auto
} }
table>tbody>tr:first-child>td,
table>tfoot>tr:first-child>td,
table>thead>tr:first-child>td {
border-top: 0px solid #eee
}
#cbi-wireless .td, #cbi-wireless .td,
#cbi-network .tr:first-child>.td, #cbi-network .tr:first-child>.td,
.table[width="100%"]>.tr:first-child>.td, .table[width="100%"]>.tr:first-child>.td,
@ -1451,20 +1472,6 @@ textarea {
min-width: 20rem; min-width: 20rem;
} }
.cbi-value-field .cbi-dropdown,
.cbi-value-field .cbi-input-select,
.cbi-value input[type="text"],
.cbi-value input[type="password"] {
min-width: 8rem;
width: 20rem
}
.cbi-value input[type="text"],
.cbi-value input[type="password"] {
padding: 0 10px 0 10px
}
.cbi-section-table-row>.cbi-value-field .cbi-dropdown, .cbi-section-table-row>.cbi-value-field .cbi-dropdown,
.cbi-section-table-row>.cbi-value-field .cbi-input-select, .cbi-section-table-row>.cbi-value-field .cbi-input-select,
.cbi-section-table-row>.cbi-value-field .cbi-input-text, .cbi-section-table-row>.cbi-value-field .cbi-input-text,
@ -1532,12 +1539,8 @@ td>table>tbody>tr>td,
font-size: 1.2rem; font-size: 1.2rem;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
background-image: url("data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9Ijc2OCIgaGVpZ2h0PSI3NjgiIHZpZXdCb3g9IjAgMCA3NjggNzY4Ij4KPHRpdGxlPjwvdGl0bGU+CjxnIGlkPSJpY29tb29uLWlnbm9yZSI+CjwvZz4KPHBhdGggZD0iTTU5OC42MyA0NTcuMzc1bC0xOTItMTkyYy0xMi41MTItMTIuNTEyLTMyLjc2OC0xMi41MTItNDUuMjQ4IDBsLTE5MiAxOTJjLTEyLjUxMiAxMi41MTItMTIuNTEyIDMyLjc2OCAwIDQ1LjI0OHMzMi43NjggMTIuNTEyIDQ1LjI0OCAwbDE2OS4zNzYtMTY5LjM3NiAxNjkuMzc2IDE2OS4zNzZjMTIuNTEyIDEyLjUxMiAzMi43NjggMTIuNTEyIDQ1LjI0OCAwczEyLjUxMi0zMi43NjggMC00NS4yNDh6Ij48L3BhdGg+Cjwvc3ZnPgo=");
background-repeat: no-repeat;
background-position: center;
color: transparent !important; color: transparent !important;
-webkit-appearance: none; background: url("data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9Ijc2OCIgaGVpZ2h0PSI3NjgiIHZpZXdCb3g9IjAgMCA3NjggNzY4Ij4KPHRpdGxlPjwvdGl0bGU+CjxnIGlkPSJpY29tb29uLWlnbm9yZSI+CjwvZz4KPHBhdGggZD0iTTU5OC42MyA0NTcuMzc1bC0xOTItMTkyYy0xMi41MTItMTIuNTEyLTMyLjc2OC0xMi41MTItNDUuMjQ4IDBsLTE5MiAxOTJjLTEyLjUxMiAxMi41MTItMTIuNTEyIDMyLjc2OCAwIDQ1LjI0OHMzMi43NjggMTIuNTEyIDQ1LjI0OCAwbDE2OS4zNzYtMTY5LjM3NiAxNjkuMzc2IDE2OS4zNzZjMTIuNTEyIDEyLjUxMiAzMi43NjggMTIuNTEyIDQ1LjI0OCAwczEyLjUxMi0zMi43NjggMC00NS4yNDh6Ij48L3BhdGg+Cjwvc3ZnPgo=")no-repeat center;
-moz-appearance: none;
background-size: 25px 30px background-size: 25px 30px
} }
@ -1545,12 +1548,8 @@ td>table>tbody>tr>td,
font-size: 1.2rem; font-size: 1.2rem;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
background-image: url("data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9Ijc2OCIgaGVpZ2h0PSI3NjgiIHZpZXdCb3g9IjAgMCA3NjggNzY4Ij4KPHRpdGxlPjwvdGl0bGU+CjxnIGlkPSJpY29tb29uLWlnbm9yZSI+CjwvZz4KPHBhdGggZD0iTTE2OS4zNyAzMTAuNjI0bDE5MiAxOTJjMTIuNTEyIDEyLjUxMiAzMi43NjggMTIuNTEyIDQ1LjI0OCAwbDE5Mi0xOTJjMTIuNTEyLTEyLjUxMiAxMi41MTItMzIuNzY4IDAtNDUuMjQ4cy0zMi43NjgtMTIuNTEyLTQ1LjI0OCAwbC0xNjkuMzc2IDE2OS4zNzYtMTY5LjM3Ni0xNjkuMzc2Yy0xMi41MTItMTIuNTEyLTMyLjc2OC0xMi41MTItNDUuMjQ4IDBzLTEyLjUxMiAzMi43NjggMCA0NS4yNDh6Ij48L3BhdGg+Cjwvc3ZnPgo=");
background-repeat: no-repeat;
background-position: center;
color: transparent !important; color: transparent !important;
-webkit-appearance: none; background: url("data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9Ijc2OCIgaGVpZ2h0PSI3NjgiIHZpZXdCb3g9IjAgMCA3NjggNzY4Ij4KPHRpdGxlPjwvdGl0bGU+CjxnIGlkPSJpY29tb29uLWlnbm9yZSI+CjwvZz4KPHBhdGggZD0iTTE2OS4zNyAzMTAuNjI0bDE5MiAxOTJjMTIuNTEyIDEyLjUxMiAzMi43NjggMTIuNTEyIDQ1LjI0OCAwbDE5Mi0xOTJjMTIuNTEyLTEyLjUxMiAxMi41MTItMzIuNzY4IDAtNDUuMjQ4cy0zMi43NjgtMTIuNTEyLTQ1LjI0OCAwbC0xNjkuMzc2IDE2OS4zNzYtMTY5LjM3Ni0xNjkuMzc2Yy0xMi41MTItMTIuNTEyLTMyLjc2OC0xMi41MTItNDUuMjQ4IDBzLTEyLjUxMiAzMi43NjggMCA0NS4yNDh6Ij48L3BhdGg+Cjwvc3ZnPgo=")no-repeat center;
-moz-appearance: none;
background-size: 25px 30px background-size: 25px 30px
} }
@ -1599,9 +1598,12 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
.cbi-button:active, .cbi-button:active,
.item:hover::after, .item:hover::after,
.item:focus::after, .item:focus::after,
.item:active::after { .item:active::after,
outline: 0; .cbi-page-actions .cbi-button-apply + .cbi-button-save:hover,
text-decoration: none .cbi-page-actions .cbi-button-apply + .cbi-button-save:focus,
.cbi-page-actions .cbi-button-apply + .cbi-button-save:active {
text-decoration: none;
outline: 0;
} }
.btn:focus, .btn:focus,
@ -1627,7 +1629,8 @@ button:hover,
.btn:active, .btn:active,
.cbi-button:active, .cbi-button:active,
button:active, button:active,
.item:active { .item:active ,
.item:active::after {
transform: scale(1) translate(0, 0.15rem); transform: scale(1) translate(0, 0.15rem);
box-shadow: 0 0 6px var(--input-boxhovercolor); box-shadow: 0 0 6px var(--input-boxhovercolor);
-webkit-box-shadow: 0 0 6px var(--input-boxhovercolor); -webkit-box-shadow: 0 0 6px var(--input-boxhovercolor);
@ -1654,6 +1657,8 @@ button:active,
.modal div[class="btn"], .modal div[class="btn"],
.cbi-button-find, .cbi-button-find,
.cbi-button-link, .cbi-button-link,
.cbi-button-up,
.cbi-button-down,
.cbi-button-neutral, .cbi-button-neutral,
.cbi-button[name="zero"], .cbi-button[name="zero"],
.cbi-button[name="restart"], .cbi-button[name="restart"],
@ -1912,6 +1917,20 @@ button:active,
line-height: 1.25 line-height: 1.25
} }
.cbi-value-field .cbi-dropdown,
.cbi-value-field .cbi-input-select,
.cbi-value input[type="text"],
.cbi-value input[type="password"] {
min-width: 8rem;
width: 20rem
}
.cbi-value input[type="text"],
.cbi-value input[type="password"] {
padding: 0 10px 0 10px
}
.cbi-value strong { .cbi-value strong {
font-weight: normal font-weight: normal
} }
@ -2046,6 +2065,18 @@ button:active,
box-sizing: border-box box-sizing: border-box
} }
/* indication line for drag-and-drop in UIDynamicList*/
.cbi-dynlist > .item.drag-over {
border-top: 1px solid var(--inputborder-color);
}
/* Make item being dragged in UIDynamicList partially transparent*/
.cbi-dynlist > .item.dragging {
opacity: 0.5;
}
/* prevent pointer changing when over the span element in UIDynamicList */
.cbi-dynlist>.item>span { .cbi-dynlist>.item>span {
display: block; display: block;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
@ -2080,6 +2111,26 @@ button:active,
flex-wrap: nowrap flex-wrap: nowrap
} }
/* indication line for drag-and-drop in UIDynamicList*/
.cbi-dynlist > .add-item > .cbi-input-text.drag-over {
border-top: 1px solid black;
}
/* indication line for drag-and-drop in UIDynamicList*/
.cbi-dynlist > .add-item > .cbi-button-add.drag-over {
border-top: 1px solid var(--inputborder-color);
}
/* indication line for drag-and-drop in UIDynamicList*/
.cbi-dynlist > .add-item > .cbi-input-text.drag-over {
border-top: 1px solid var(--inputborder-color);
}
/* indication line for drag-and-drop in UIDynamicList*/
.cbi-dynlist > .add-item > .cbi-button-add.drag-over {
border-top: 1px solid var(--inputborder-color);
}
.cbi-dynlist>.add-item input { .cbi-dynlist>.add-item input {
min-width: 17.5rem; min-width: 17.5rem;
width: 17.5rem; width: 17.5rem;
@ -2107,9 +2158,10 @@ button:active,
.cbi-dynlist>.add-item:not([ondrop])>input { .cbi-dynlist>.add-item:not([ondrop])>input {
overflow: hidden; overflow: hidden;
min-width: 17.5rem; min-width: 17.5rem;
width: 100%;
width: 17.5rem; width: 17.5rem;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis text-overflow: ellipsis;
} }
.cbi-dynlist>.add-item[ondrop]>input { .cbi-dynlist>.add-item[ondrop]>input {
@ -2127,11 +2179,6 @@ button:active,
background-color: rgba(var(--primary-rgbm), 0.9); background-color: rgba(var(--primary-rgbm), 0.9);
border: 1px solid rgba(var(--primary-rgbm), 1) border: 1px solid rgba(var(--primary-rgbm), 1)
} }
.cbi-dropdown {
padding: .2rem .2rem
}
.cbi-dropdown[placeholder*="select"] { .cbi-dropdown[placeholder*="select"] {
max-width: 25rem; max-width: 25rem;
height: auto; height: auto;
@ -2145,38 +2192,73 @@ button:active,
width: 100%; width: 100%;
margin: 0 !important; margin: 0 !important;
list-style: none; list-style: none;
outline: 0 outline: 0;
} }
.cbi-dropdown>ul.preview { .cbi-dropdown>ul.preview {
display: none display: none;
} }
.cbi-dropdown>.open, .cbi-dropdown>.open,
.cbi-dropdown>.more { .cbi-dropdown>.more {
flex-basis: 0px;
font-size: 1.5rem;
background-color: rgba(255, 255, 255, 0) !important; background-color: rgba(255, 255, 255, 0) !important;
font-weight: bolder; font-weight: bolder;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: 0 .1rem 0 .2rem;
color:var(--inputtext-color);
text-align: center; text-align: center;
margin-left: .2rem; margin-left: .1rem;
outline: 0 outline: 0;
}
.cbi-dropdown > .open {
border-left: 0.1rem solid var(--inputtext-color);
} }
.cbi-dropdown>.open { .cbi-page-actions > .cbi-dropdown.btn > .open,
padding: 0.2rem; .cbi-page-actions > .cbi-dropdown.btn > .more {
margin: 0;
flex-basis: 0px;
border-left: 0.1rem solid var(--input-boxhovercolor);
font-size: 1.3rem;
margin: 0
} }
.diag-action > .cbi-dropdown.btn > .open,
.cbi-page-actions > .cbi-dropdown.btn > .open {
color:var(--menu-hover-color);
border-left: 0.1rem solid var(--menu-hover-color)
}
.cbi-dropdown.btn>div { .cbi-dropdown.btn>div {
margin: 0px margin: 0px
} }
.cbi-dropdown>.more,
.cbi-dropdown[multiple][more]>.more,
.cbi-dropdown>ul>li[placeholder] {
display: none!important;
}
.cbi-dropdown.btn.cbi-button>ul {
overflow-y: hidden
}
.cbi-dropdown>ul>li {
display: none;
overflow: hidden;
align-items: center;
align-self: center;
flex-grow: 1;
flex-shrink: 1;
min-height: 30px;
margin: 0 0.2rem;
padding: 0 0.5rem 0 0.6rem;
white-space: nowrap;
text-overflow: ellipsis
}
.cbi-dropdown>ul>li .hide-open { .cbi-dropdown>ul>li .hide-open {
display: initial display: initial
} }
@ -2193,6 +2275,13 @@ button:active,
max-width: 1px max-width: 1px
} }
.cbi-value-field>.cbi-dropdown[empty] {
display: inline-flex;
justify-content: flex-end;
align-items: center;
}
.cbi-dropdown>ul>li>form { .cbi-dropdown>ul>li>form {
display: none; display: none;
margin: 0; margin: 0;
@ -2217,106 +2306,23 @@ button:active,
} }
.cbi-dropdown[open]>ul.dropdown { .cbi-dropdown[open]>ul.dropdown {
position: absolute; position: absolute;
z-index: 1100; z-index: 1100;
display: block; display: block;
width: auto; width: auto;
min-width: 100%; min-width: 100%;
max-width: none; max-width: 30rem;
max-height: 200px; box-shadow: 0 0 4px var(--inputborder-color);
box-shadow: 0 0 4px #918e8c; border-radius: var(--radius2);
border-radius: var(--radius2); border: 0px solid var(--inputborder-color);
border: 0px solid var(--inputborder-color); background: rgba(var(--primary-rgbbody), 1);
background: rgba(var(--primary-rgbbody), 1); color: var(--inputtext-color);
color: var(--inputtext-color); cursor: pointer;
margin-left: 0 !important; margin-left: 0 !important;
left: 0 left: 0;
} }
.cbi-dropdown[empty]>ul>li,
.cbi-dropdown[optional][open]>ul.dropdown>li[placeholder],
.cbi-dropdown[multiple][open]>ul.dropdown>li>form {
display: block
}
.cbi-dropdown[open]>ul.dropdown>li .hide-open {
display: none
}
.cbi-dropdown[open]>ul.dropdown>li .hide-close {
display: initial
}
.cbi-dropdown.btn>ul:not(.dropdown),
.cbi-dropdown.cbi-button>ul:not(.dropdown) {
margin: 0 .85rem 0 .85rem !important
}
.cbi-dropdown.btn.cbi-button>ul {
overflow-y: hidden
}
.cbi-dropdown>ul>li {
display: none;
overflow: hidden;
align-items: center;
align-self: center;
flex-grow: 1;
flex-shrink: 1;
min-height: 30px;
padding: .125rem .25em;
white-space: nowrap;
text-overflow: ellipsis
}
.cbi-dropdown[open]>ul.dropdown>li {
border-bottom: thin solid var(--input-boxhovercolor);
padding: 0.2em 0.5em;
margin: 0.1rem auto;
color: var(--inputtext-color);
}
.cbi-dropdown[open]>ul.dropdown>li>input.create-item-input:first-child:last-child {
width: 100%
}
.cbi-dropdown .zonebadge {
width: 100%
}
.cbi-dropdown[open] .zonebadge {
width: 100%;
color: #3b3737
}
.cbi-dropdown[open]>ul.dropdown>li[selected] {
background: rgba(var(--primary-rgbm), 0.22);
color: var(--inputtext-color)
}
.cbi-dropdown[open]>ul.dropdown>li.focus {
border: 1px solid rgba(var(--primary-rgbm), 0.7);
outline: none
}
.cbi-dropdown[open]>ul.dropdown>li:last-child {
margin-bottom: 0;
border-bottom: 0
}
.cbi-dropdown[open]>ul.dropdown>li[unselectable] {
opacity: .7
}
.cbi-dropdown[disabled] {
pointer-events: none;
opacity: .6
}
select[multiple="multiple"] {
height: auto
}
.cbi-dropdown>ul>li[display], .cbi-dropdown>ul>li[display],
.cbi-dropdown[open]>ul.preview, .cbi-dropdown[open]>ul.preview,
@ -2330,21 +2336,84 @@ select[multiple="multiple"] {
flex-grow: 1 flex-grow: 1
} }
.cbi-dropdown>.more, .cbi-dropdown[empty] > ul > li,
.cbi-dropdown>ul>li[placeholder] { .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
font-weight: bold; .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
display: none; display: block;
color: var(--inputtext-color) }
.cbi-dropdown[open] > ul.dropdown > li .hide-open {
display: none;
}
.cbi-dropdown[open] > ul.dropdown > li .hide-close {
display: initial;
}
.cbi-dropdown[open] > ul.dropdown > li {
padding: 0.2em 0.5em;
margin: 0.1rem auto;
color: var(--inputtext-color);
}
/*
.cbi-dropdown.btn>ul:not(.dropdown),
.cbi-dropdown.cbi-button>ul:not(.dropdown) {
margin: 0 .85rem 0 .85rem !important
}
*/
.cbi-dropdown[open] > ul.dropdown > li[selected] {
background: rgba(var(--primary-rgbm), 0.8);
color: var(--menu-hover-color)
}
/*
.cbi-dropdown[open] > ul.dropdown > li.focus, */
.cbi-dropdown[open] > ul.dropdown > li:hover {
background: rgba(var(--primary-rgbm), 0.5);
color: var(--menu-hover-color);
cursor: pointer;
outline: none
}
.cbi-dropdown[open]>ul.dropdown>li:last-child {
margin-bottom: 0;
border-bottom: 0
}
.cbi-dropdown[open]>ul.dropdown>li[unselectable] {
opacity: .7
} }
.cbi-dynlist, .cbi-dynlist,
.cbi-dropdown { .cbi-dropdown {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
min-height: 1.8rem min-height: 1.8rem
} }
.cbi-dropdown {
padding: .2rem
}
.cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
width: 100%;
}
.cbi-dropdown[disabled] {
pointer-events: none;
opacity: .6
}
/*
.cbi-dropdown .zonebadge {
width: 100%
}
.cbi-dropdown[open] .zonebadge {
width: 100%;
color: #3b3737
}
*/
select, select,
input { input {
padding: 0 20px 0 10px; padding: 0 20px 0 10px;
@ -2352,6 +2421,7 @@ input {
margin: 0.2em auto; margin: 0.2em auto;
} }
/* progressbar */
.cbi-progressbar { .cbi-progressbar {
position: relative; position: relative;
height: 26px; height: 26px;
@ -2372,6 +2442,8 @@ input {
.cbi-progressbar::after { .cbi-progressbar::after {
font-size: var(--font-x); font-size: var(--font-x);
font-family: monospace;
font-size-adjust: .5; font-size-adjust: .5;
line-height: normal; line-height: normal;
position: absolute; position: absolute;
@ -2456,11 +2528,11 @@ input {
.modal>pre, .modal>pre,
.modal>textarea { .modal>textarea {
font-size: var(--font-z); font-size: var(--font-z);
font-size-adjust: .35;
overflow: auto; overflow: auto;
margin-bottom: .5em; margin-bottom: .5em;
padding: 8.5px; padding: 8.5px;
cursor: auto; cursor: auto;
white-space: pre-wrap;
outline: 0; outline: 0;
} }
@ -2596,6 +2668,7 @@ body.modal-overlay-active #modal_overlay {
-ms-flex-pack: center -ms-flex-pack: center
} }
/* luci */
.hidden { .hidden {
display: none display: none
} }
@ -2670,12 +2743,19 @@ body.modal-overlay-active #modal_overlay {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.2rem; gap: 0.2rem;
padding: 0 0.8rem; padding: 0.1rem 0.8rem;
box-shadow: inset 0 1px 0px rgba(255, 255, 255, .4), 0 1px 1px rgba(0, 0, 0, .2); border: 1px solid var(--inputborder-color);
background-color: rgba(var(--primary-rgbm), 0.1); background-color: rgba(var(--primary-rgbm), 0.1);
border-radius: var(--radius2) border-radius: var(--radius2)
} }
td > .ifacebadge,
.td > .ifacebadge {
font-size: .8rem;
background-color: rgba(var(--primary-rgbm), 0.1);
}
.ifacebadge>em, .ifacebadge>em,
.ifacebadge>img { .ifacebadge>img {
display: inline-block; display: inline-block;
@ -2729,8 +2809,15 @@ body.modal-overlay-active #modal_overlay {
padding: .5em padding: .5em
} }
#dsl_status_table .ifacebox-body span > strong {
display: inline-block;
min-width: 50%;
}
/* textarea */
.cbi-input-textarea, .cbi-input-textarea,
textarea { textarea {
font-family: monospace;
padding: 10px; padding: 10px;
outline-style: none; outline-style: none;
line-height: normal; line-height: normal;
@ -2744,16 +2831,37 @@ textarea {
border-radius: var(--radius2); border-radius: var(--radius2);
word-wrap: break-word; word-wrap: break-word;
white-space: pre-wrap; white-space: pre-wrap;
margin: 0rem margin: 0.5rem
} }
.cbi-input-textarea:focus, .cbi-input-textarea:focus,
textarea:focus { textarea:focus {
border: 1px solid var(rgba(var(--primary-rgbm), 1)) border: 1px solid var(rgba(var(--primary-rgbm), 1))
} }
#syslog {
font-size: small;
overflow-y: hidden;
font-family: monospace;
width: 100%;
min-height: 15rem;
padding: 10px;
resize: none;
margin: 0rem
border-radius: var(--radius2);
word-wrap: break-word;
white-space: pre-wrap;
background-color: var(--inputbg-color);
color: var(--inputtext-color);
border: 1px solid var(--inputborder-color);
}
#syslog:focus {
outline: 0;
}
/* config changes */
.uci-change-list { .uci-change-list {
font-family: var(--font-apple) font-family: monospace;
} }
.uci-change-list ins, .uci-change-list ins,
@ -2821,6 +2929,7 @@ textarea:focus {
padding: .5rem padding: .5rem
} }
/* other fix */
#iwsvg, #iwsvg,
#iwsvg2, #iwsvg2,
#bwsvg { #bwsvg {
@ -2882,17 +2991,17 @@ textarea:focus {
.zonebadge .ifacebadge { .zonebadge .ifacebadge {
margin: .1rem .2rem; margin: .1rem .2rem;
background-color: #bbb;
color: var(--menu-color); color: var(--menu-color);
border: 1px solid var(--input-boxhovercolor); /* background-color: #bbb;
border: 1px solid var(--input-boxhovercolor); */
} }
.zonebadge>input[type="text"] { .zonebadge>input[type="text"] {
background-color: rgba(var(--primary-rgbbody), 1); background-color: rgba(var(--primary-rgbbody), 1);
border: 1px solid #6c6c6c; border: 1px solid #6c6c6c;
min-width: 8rem; min-width: 10rem;
margin-top: .3rem; margin-top: .3rem;
padding: .16rem 1rem padding: .16rem 1rem;
} }
.zonebadge>em, .zonebadge>em,
@ -3490,10 +3599,17 @@ body.lang_pl.node-main-login .cbi-value-title {
width: 23rem width: 23rem
} }
/* firewall */
#iptables { #iptables {
margin: 0 margin: 0
} }
.Firewall form {
margin: 2rem 2rem 0 0;
padding: 0;
box-shadow: none;
}
.cbi-tab-disabled[data-errors]::after { .cbi-tab-disabled[data-errors]::after {
content: attr(data-errors); content: attr(data-errors);
background: #c43c35; background: #c43c35;
@ -3830,7 +3946,7 @@ body.lang_pl.node-main-login .cbi-value-title {
.main .block { .main .block {
color: var(--body-color); color: var(--body-color);
background-color: var(--inputbg-color) !important; background-color: var(--inputbg-color) !important;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.32), 0 1px 5px 0 var(--inputbg-color) box-shadow: 0 0 4px var(--inputborder-color);
} }
[data-page="admin-services-shadowsocksr"]>.block:active, [data-page="admin-services-shadowsocksr"]>.block:active,
@ -4368,6 +4484,28 @@ div#add_link_div {
padding-bottom: 0.5rem padding-bottom: 0.5rem
} }
.cbi-dropdown[open]>ul.dropdown {
max-width: 15rem;
}
.Firewall form {
position: static !important;
margin: 0 0 2rem 0;
padding: 2rem;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
}
.Firewall form input {
width: 100% !important;
margin: 0;
margin-top: 1rem;
}
.Firewall .center,
.Firewall .center::before {
text-align: left !important;
}
.commandbox { .commandbox {
width: 100% !important; width: 100% !important;
margin-left: 0 !important margin-left: 0 !important
@ -4520,9 +4658,19 @@ div#add_link_div {
[data-page="admin-status-overview"] >.main #view td:nth-child(1), [data-page="admin-status-overview"] >.main #view td:nth-child(1),
.cbi-value-title { .cbi-value-title {
display: block;
min-width: 0 !important;
text-align: left text-align: left
} }
.cbi-value-title,
.cbi-value-description,
.cbi-value-field,
.cbi-value-field .cbi-dropdown,
.cbi-value-field .cbi-input-select,
.cbi-value input[type="text"] {
width: 100%;
}
[data-page="admin-status-overview"] .main #view td:nth-child(1) { [data-page="admin-status-overview"] .main #view td:nth-child(1) {
width: 5rem; width: 5rem;
padding-right: 0.4rem padding-right: 0.4rem
@ -4537,6 +4685,12 @@ div#add_link_div {
line-height: 1 line-height: 1
} }
#syslog,
#diag-rc-output > pre,
#command-rc-output > pre,
[data-page="admin-services-wol"] .notice code {
font-size: .8rem !important;
}
.cbi-value-description { .cbi-value-description {
display: none !important display: none !important
} }