From 91eabf9f81dacf8d7ec0655a1be5aaca120bb540 Mon Sep 17 00:00:00 2001 From: kenzok8 Date: Thu, 20 Feb 2025 14:15:37 +0800 Subject: [PATCH] update 2025-02-20 14:15:37 --- .../htdocs/luci-static/kucat/css/style.css | 45 ++++++++----------- .../htdocs/luci-static/kucat/manifest.json | 2 +- .../luasrc/view/themes/kucat/header.htm | 35 ++++++++++++--- 3 files changed, 49 insertions(+), 33 deletions(-) diff --git a/luci-theme-kucat/htdocs/luci-static/kucat/css/style.css b/luci-theme-kucat/htdocs/luci-static/kucat/css/style.css index 9d1365111..ed9bed327 100644 --- a/luci-theme-kucat/htdocs/luci-static/kucat/css/style.css +++ b/luci-theme-kucat/htdocs/luci-static/kucat/css/style.css @@ -35,14 +35,12 @@ --menu-hover-color: #fff; --menu-item-color: #5a636b; --menu-item-titlebg-color: rgba(var(--primary-rgbm),0.22); - --menu-item-hover-bgcolor: rgba(248,248,248, 0.2); + --menu-barbgcolor: rgba(var(--primary-rgbm), var(--primary-rgbm-ts)); --body-text-color: #3c4655; --body-color: #65656b; --inputbg-color: rgba(248,248,248,0.15); --inputtext-color: #4d5256; --inputborder-color: rgba(0,0,0,0.2); - --input-hover-color: #fff; - --input-hover-bgcolor: rgba(248,248,248,0.5); --input-bgcolor: rgba(255,255,255,0.6); --input-boxcolor: rgba(0, 0, 0, 0.12); --input-boxhovercolor: rgba(0, 0, 0, 0.22); @@ -58,14 +56,12 @@ --menu-hover-color: #e9eff3; --menu-item-color: #b4c9e3; --menu-item-titlebg-color: rgba(var(--primary-rgbm),0.4); - --menu-item-hover-bgcolor: rgba(255, 255, 255, 0.2); + --menu-barbgcolor: rgba(var(--primary-rgbm), var(--primary-rgbm-ts)); --body-text-color: #8391a2; --body-color: #8b8e91; --inputbg-color: rgba(255,255,255,0.11); --inputtext-color: #bbb; --inputborder-color: rgba(255,255,255,0.2); - --input-hover-color: #ccc; - --input-hover-bgcolor: rgba(255,255,255,0.22); --input-bgcolor: rgba(0,0,0,0.2); --input-boxcolor: rgba(255,255,255,0.15); --input-boxhovercolor: rgba(255, 255, 255, 0.22); @@ -453,12 +449,12 @@ small { text-decoration:none } .container-bar-right .labelbar:hover::before, .container-bar-left .labelbar:hover::before { - color: var(--menu-color); + color: var(--menu-hover-color); text-decoration: none } .container-bar-right .labelbar::before,.container-bar-left .labelbar::before { - color: var(--menu-color); + color: var(--menu-color); font-size: 2rem !important; text-decoration: none } @@ -516,8 +512,7 @@ small { float: left; width: calc(0% + 17rem); height: 100%; - background-color: rgba(var(--primary-rgbm), var(--primary-rgbm-ts)); - background-image: var(--bgqs-image); + background-color: var(--menu-bgcolor); box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.14), 0 -2px 3px 1px rgba(0, 0, 0, 0.32), 0 0px 5px 2px rgba(0, 0, 0, 0.2); overflow-x: auto; position: fixed; @@ -525,10 +520,10 @@ small { } .main .main-left .sidenav-header { text-align: center; - height: 4.8rem; - background-color: rgba(255, 255, 255, 0); + height: 4.8rem; + margin: 0; + background-color: var(--menu-barbgcolor); padding: 2rem; - margin: 0rem 1rem 0rem 1rem; background-clip: padding-box; border-bottom: 1px solid #ddd; } @@ -555,8 +550,7 @@ small { } header.pd-primary { - background-color: rgba(var(--primary-rgbm), var(--primary-rgbm-ts)); - background-image: var(--bgqs-image); + background-color: var(--menu-barbgcolor); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35); background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent) !important; @@ -786,7 +780,7 @@ text-decoration: none!important; .main .main-left .nav>li>a:first-child { display: block; font-size: var(--font-d); - color: var(--menu-color); + color: var(--menu-fontcolor); padding: .8rem 0rem .8rem 3rem; margin-bottom: 1px; font-weight: 500; @@ -826,7 +820,7 @@ text-decoration: none!important; position: absolute; left: .8rem; content: "\e91a"; - color: var(--menu-color) + color: var(--menu-fontcolor) } .main .main-left .nav>.slide>a::after, .main .main-left>.nav>li>a::after { @@ -838,7 +832,7 @@ text-decoration: none!important; font-weight: normal; font-variant: normal; text-transform: none; - color: var(--menu-color); + color: var(--menu-fontcolor); content: '\e20b'; transition: all .1s ease; -moz-osx-font-smoothing: grayscale; @@ -848,7 +842,7 @@ text-decoration: none!important; } .main .main-left .nav>li>a:hover a::after, .main .main-left>.nav>li>a.active a::after { cursor: pointer; - color: var(--menu-color); + color: var(--menu-hover-color); width: 100% } .main>.main-left .nav>.slide>a.active::before, .main .main-left .nav>li>a:hover::after, .main .main-left .nav>li>a.active::after { @@ -1198,7 +1192,6 @@ table>tbody>tr:first-child>td, table>tfoot>tr:first-child>td, table>thead>tr:fir font-size: var(--font-z); color: var(--menu-hover-color); background-color: #008b89; - background-image: var(--bgqs-image); box-shadow: 0 0.3rem 0.8rem var(--input-boxcolor); transform: translate(1) translate(0,0); transition: transform 225ms,box-shadow 225ms; @@ -1227,20 +1220,16 @@ table>tbody>tr:first-child>td, table>tfoot>tr:first-child>td, table>thead>tr:fir .cbi-tabcontainer>.cbi-value:nth-of-type(4n+2), .cbi-map>.cbi-section .cbi-value:nth-of-type(4n+2), fieldset>table>tbody>tr:nth-of-type(4n+2), table>tbody>tr:nth-of-type(4n+2), div>.table>.tr:nth-of-type(4n+2) { background-color: rgba(var(--primary-rgbm), var(--primary-rgbs-ts)); - background-image: var(--bgqs-image); } .cbi-tabcontainer>.cbi-value:nth-of-type(4n), .cbi-map>.cbi-section .cbi-value:nth-of-type(4n), fieldset>table>tbody>tr:nth-of-type(4n), table>tbody>tr:nth-of-type(4n), div>.table>.tr:nth-of-type(4n) { background-color: rgba(var(--primary-rgbs), var(--primary-rgbs-ts)); - background-image: var(--bgqs-image); } .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(50,50,50,0.05); - background-image: var(--bgqs-image); } .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(50,50,50,0.05); - background-image: var(--bgqs-image); } .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 { @@ -1956,7 +1945,6 @@ select, input { transition: width .25s ease-in; border-radius: var(--radius2)!important; background-color: rgba(var(--primary-rgbm),0.7); - background-image: var(--bgqs-image); } .cbi-progressbar::after { font-size: var(--font-x); @@ -2160,7 +2148,7 @@ body.modal-overlay-active #modal_overlay { .spinning { position: relative; font-size: var(--font-z); - padding-left: 32px !important; + padding: 2rem 0rem 2rem 3rem !important; } .spinning::before { position: absolute; @@ -2185,7 +2173,10 @@ body.modal-overlay-active #modal_overlay { text-align: left !important; margin-left: 5px; } - +.right .cbi-button { + line-height: 1; + margin: 0.2rem; +} .right, .right::before { text-align: right !important; margin-right: 5px; diff --git a/luci-theme-kucat/htdocs/luci-static/kucat/manifest.json b/luci-theme-kucat/htdocs/luci-static/kucat/manifest.json index 4c8c852fc..c859531a3 100644 --- a/luci-theme-kucat/htdocs/luci-static/kucat/manifest.json +++ b/luci-theme-kucat/htdocs/luci-static/kucat/manifest.json @@ -9,7 +9,7 @@ "icons":[ { "src":"img/apple-touch-icon.png", -"sizes":"144x144", +"sizes":"180x180", "type":"image/png" }, { diff --git a/luci-theme-kucat/luasrc/view/themes/kucat/header.htm b/luci-theme-kucat/luasrc/view/themes/kucat/header.htm index e9106ba36..54dcdac90 100644 --- a/luci-theme-kucat/luasrc/view/themes/kucat/header.htm +++ b/luci-theme-kucat/luasrc/view/themes/kucat/header.htm @@ -70,10 +70,6 @@ if primary_opacity == '0' then ufilter = 'none' end - local bgqs_image = '-webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent)' - if bgqs == '1' then - bgqs_image = 'none' - end local bg_url = media..'/img/bg1.jpg' local bg_lock = bg_url if background == '0' then @@ -187,7 +183,8 @@ <% if css then %> <%= css %> - <% end -%> + <% end + if bgqs == '1' then -%> :root { --primary-rgbbody:<%=primary_rgbbody%>; --primary-rgbm: <%=primary_rgbm%>; @@ -199,8 +196,36 @@ --font-x: <%=fontx%>; --ufilter: <%=ufilter%>; --bgqs-image: <%=bgqs_image%>; + --menu-bgcolor: rgba(var(--primary-rgbbody), var(--primary-rgbm-ts)); + --menu-item-hover-bgcolor: rgba(var(--primary-rgbm), var(--primary-rgbm-ts)); + <% if mode == 'dark' then %> + --menu-fontcolor: #bbb; + <% else %> + --menu-fontcolor: #4d4d5d; + <% end -%> + } + <% else %> + :root { + --primary-rgbbody:<%=primary_rgbbody%>; + --primary-rgbm: <%=primary_rgbm%>; + --primary-rgbm-ts: <%=primary_rgbm_ts%>; + --primary-rgbs: <%=primary_rgbs%>; + --primary-rgbs-ts: <%=primary_rgbs_ts%>; + --font-d: <%=fontd%>; + --font-z: <%=fontz%>; + --font-x: <%=fontx%>; + --ufilter: <%=ufilter%>; + --bgqs-image: <%=bgqs_image%>; + --menu-bgcolor: rgba(var(--primary-rgbm), var(--primary-rgbm-ts)); + --menu-item-hover-bgcolor: rgba(255,255,255, 0.3); + <% if mode == 'dark' then %> + --menu-fontcolor: #bbb; + <% else %> + --menu-fontcolor: #f5f5f5f5; + <% end -%> } + <% end -%> <% if setbar == "1" then %> header.bar-primary .container-bar-left { width: 300px;