mirror/webgui
1
0
Fork 0
mirror of https://github.com/unraid/webgui.git synced 2026-01-06 01:29:54 -06:00
Code Issues Packages Projects Releases Wiki Activity

style: update #displaybox styles for improved layout and responsiveness

Browse Source 
- Added new styles for #displaybox to enhance layout across themes.
- Removed complex old media queries for better clarity and maintenance.
This commit is contained in:
Zack Spear
2025-05-08 16:13:45 -07:00
parent 882f64b077
commit ef04971eb0
1 changed files with 24 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
emhttp/plugins/dynamix/styles/default-base.css
View File

@@ -1,3 +1,4 @@
html {
font-family: clear-sans, sans-serif;
font-size: var(--custom-font-size, 62.5%);
@@ -12,7 +13,7 @@ body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (max-width: 1280px) {
/* @media (max-width: 1280px) {
#template {
min-width: 1260px;
max-width: 1260px;
@@ -31,7 +32,7 @@ body {
max-width: 1920px;
margin: 0 auto;
}
}
} */
img {
border: none;
text-decoration: none;
@@ -566,6 +567,27 @@ div.title.shift {
vertical-align: middle;
padding-bottom: 2px;
}
#displaybox {
width: 100%;
margin: 0 auto;
padding: 0 1rem 4rem;
box-sizing: border-box;
}
.Theme--sidebar #displaybox {
padding-left: 8rem;
}
.Theme--width-boxed #displaybox {
max-width: 1920px;
}
@media (min-width: 1281px) {
.Theme--nav-top.Theme--width-unlimited #displaybox {
padding: 0 2rem;
}
}
#clear {
clear: both;
}
@@ -2212,71 +2234,3 @@ span#wlan0 {
background-color: var(--brand-orange);
}
}
#displaybox {
padding: 0 1rem 4rem;
}
.Theme--sidebar #displaybox {
padding-left: 8rem;
}
/* Theme width styles */
.Theme--width-boxed #displaybox {
min-width: 1280px;
max-width: 1280px;
margin: 0;
}
.Theme--width-unlimited #displaybox {
min-width: 1280px;
margin: 0;
}
/* Media queries for different screen sizes */
@media (max-width: 1280px) {
.Theme--width-boxed #displaybox {
min-width: 1280px;
max-width: 1280px;
margin: 0;
}
.Theme--width-unlimited #displaybox {
min-width: 1280px;
margin: 0;
}
}
@media (min-width: 1281px) {
.Theme--width-boxed #displaybox {
min-width: 1280px;
max-width: 1920px;
margin: 0 auto;
}
.Theme--width-unlimited #displaybox {
min-width: 1280px;
margin: 0 auto;
}
.Theme--nav-top.Theme--width-unlimited #displaybox {
margin: 0 10px;
}
}
@media (min-width: 1921px) {
.Theme--width-boxed #displaybox {
min-width: 1280px;
max-width: 1920px;
margin: 0 auto;
}
.Theme--width-unlimited #displaybox {
min-width: 1280px;
margin: 0 auto;
}
.Theme--nav-top.Theme--width-unlimited #displaybox {
margin: 0 20px;
}
}