From 230f6081b7864e8cefcf0b02e6236318dd6d21ca Mon Sep 17 00:00:00 2001 From: Paul Donald Date: Wed, 23 Apr 2025 14:03:57 +0200 Subject: [PATCH] luci-theme: fix some dynamic layout issues Implement a dynamic menu item width to allow item unwrapped and visible: 'min-width: max-content;' or 'max-width: max-content;' Remove IE hacks and fix a console error for -webkit-scrollbar-thumb Signed-off-by: Paul Donald (cherry picked from commit 91572540595dae9ea88ae5e38ce01847cb4c08e0) --- .../htdocs/luci-static/bootstrap/cascade.css | 3 +-- .../htdocs/luci-static/material/cascade.css | 11 ++++------- .../htdocs/luci-static/openwrt2020/cascade.css | 4 ++-- .../htdocs/luci-static/openwrt.org/cascade.css | 2 +- 4 files changed, 8 insertions(+), 12 deletions(-) diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css index c9b768eeb2..803afb0df3 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css @@ -1156,8 +1156,7 @@ a.menu:after { top: 40px; left: -9999px; z-index: 900; - min-width: 160px; - max-width: 220px; + min-width: max-content; margin-left: 0; margin-right: 0; padding: 6px 0; diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css index 18584e8e40..7575f5113f 100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css +++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css @@ -343,6 +343,7 @@ small { float: left; overflow-x: auto; width: calc(0% + 15rem); + min-width: max-content; height: calc(100% - 4rem); background-color: var(--menu-bg-color); transition: visibility 400ms, width 400ms; @@ -2548,7 +2549,7 @@ input[name="nslookup"] { } /* IE hacks */ -@media all and (-ms-high-contrast: none) { +@media all { .main > .main-left > .nav > .slide > .menu::before { top: 30.25%; } @@ -2556,10 +2557,6 @@ input[name="nslookup"] { .main > .main-left > .nav > li:last-child::before { top: 20%; } - - .showSide::before { - top: -12px; - } } @media screen and (max-width: 1600px) { @@ -3141,12 +3138,12 @@ input[name="nslookup"] { ::-webkit-scrollbar-thumb { background: #9e9e9e; } - +/* ::-webkit-scrollbar-thumb:hover { background: #757575; } ::-webkit-scrollbar-thumb:active { background: #424242; - } + }*/ } diff --git a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css index 71cba8eab9..2ab49a9818 100644 --- a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css +++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css @@ -155,8 +155,8 @@ abbr[title], acronym[title] { } #mainmenu { - flex: 1 1 100px; - max-width: 250px; +/* flex: 1 1 100px;*/ + max-width: max-content; background: var(--main-dark-color); color: var(--main-bright-color); padding: 1em; diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css index 0cb2c150f1..3b6f5aa538 100644 --- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css +++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css @@ -82,7 +82,7 @@ a img { } #mainmenu { - max-width: 200px; + max-width: max-content; background: #f5f5f5; border: 1px solid #444; border-width: 0 0 1px 1px; -- 2.30.2