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 <newtwen+github@gmail.com>
This commit is contained in:
Paul Donald 2025-04-23 14:03:57 +02:00
parent 54192d3b36
commit 9157254059
No known key found for this signature in database
GPG Key ID: 3FC4A933962871D2
4 changed files with 8 additions and 12 deletions

View File

@ -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;

View File

@ -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;
}
}*/
}

View File

@ -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;

View File

@ -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;