refactor: consolidate theme width styles into default-base.css and remove legacy media queries from DefaultPageLayout.php

This commit is contained in:
Zack Spear
2025-04-04 19:42:38 -07:00
parent 6d219e4778
commit 33e4814937
2 changed files with 60 additions and 10 deletions

View File

@@ -57,16 +57,6 @@ function annotate($text) {echo "\n<!--\n",str_repeat("#",strlen($text)),"\n$text
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/themes/{$theme}.css")?>">
<style>
<?if (empty($display['width'])):?>
@media (max-width:1280px){#displaybox{min-width:1280px;max-width:1280px;margin:0}}
@media (min-width:1281px){#displaybox{min-width:1280px;max-width:1920px;margin:0 <?=$themeHelper->isTopNavTheme()?'10px':'auto'?>}}
@media (min-width:1921px){#displaybox{min-width:1280px;max-width:1920px;margin:0 auto}}
<?else:?>
@media (max-width:1280px){#displaybox{min-width:1280px;margin:0}}
@media (min-width:1281px){#displaybox{min-width:1280px;margin:0 <?=$themeHelper->isTopNavTheme()?'10px':'auto'?>}}
@media (min-width:1921px){#displaybox{min-width:1280px;margin:0 <?=$themeHelper->isTopNavTheme()?'20px':'auto'?>}}
<?endif;?>
<?if ($display['font']):?>
html{font-size:<?=$display['font']?>%}
<?endif;?>

View File

@@ -2218,3 +2218,63 @@ span#wlan0 {
background-color: var(--brand-orange);
}
}
/* Theme width styles */
.Theme--boxed-width #displaybox {
min-width: 1280px;
max-width: 1280px;
margin: 0;
}
.Theme--unlimited-width #displaybox {
min-width: 1280px;
margin: 0;
}
/* Media queries for different screen sizes */
@media (max-width: 1280px) {
.Theme--boxed-width #displaybox {
min-width: 1280px;
max-width: 1280px;
margin: 0;
}
.Theme--unlimited-width #displaybox {
min-width: 1280px;
margin: 0;
}
}
@media (min-width: 1281px) {
.Theme--boxed-width #displaybox {
min-width: 1280px;
max-width: 1920px;
margin: 0 auto;
}
.Theme--unlimited-width #displaybox {
min-width: 1280px;
margin: 0 auto;
}
.Theme--nav-top.Theme--unlimited-width #displaybox {
margin: 0 10px;
}
}
@media (min-width: 1921px) {
.Theme--boxed-width #displaybox {
min-width: 1280px;
max-width: 1920px;
margin: 0 auto;
}
.Theme--unlimited-width #displaybox {
min-width: 1280px;
margin: 0 auto;
}
.Theme--nav-top.Theme--unlimited-width #displaybox {
margin: 0 20px;
}
}