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 <[email protected]>

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 8e405279d54d5a3d52baabcc19a22d882ae33463..57903c75c3e006e61d09920aa3608273c8aea0e3 100644 (file)
--- 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 cf7dbe973112053f78c3d63110ba946ffb33b5b2..bb9243f697ffd46f4eff90f69067eb0449755002 100644 (file)
--- 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;
@@ -2559,7 +2560,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%;
        }
@@ -2567,10 +2568,6 @@ input[name="nslookup"] {
        .main > .main-left > .nav > li:last-child::before {
                top: 20%;
        }
-
-       .showSide::before {
-               top: -12px;
-       }
 }
 
 @media screen and (max-width: 1600px) {
@@ -3152,12 +3149,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 7a280704613cf0f7dc23bbbfc906ab67d9fd7e5f..5d93b25e8f0058b92fcca8353c02407d78ecb111 100644 (file)
--- 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 18e70761500b6ea9dd5a77b2b28d0b9627d0a816..74d12ac5243600321d28e1039fe8106e99a557e6 100644 (file)
--- 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;