jazzymc/unraid-glass
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Transparent header, sidebar spacing, title cleanup, and tab inner glow

Browse Source 
- Header: force transparent background (no glass)
- Content area: preserve sidebar margin when collapsed/expanded
- Page titles: remove background and bottom border
- Tabs: replace blue accent with white glass + inset glow on active

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kaloyan Danchev
2026-02-08 10:46:59 +02:00
parent 01fcb31052
commit b17efa805f
1 changed files with 29 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
style.css
View File

@@ -381,17 +381,15 @@ html.sidebar-expanded.Theme--sidebar .nav-tile.right .nav-item a {
padding: 8px 12px !important; padding: 8px 12px !important;
} }
/* --- Content area shifts when sidebar expands (push, not overlap) --- */ /* --- Content area shifts for sidebar (push, not overlap) --- */
#displaybox, #displaybox,
#footer, #footer,
#copyright { #copyright {
margin-left: var(--sidebar-collapsed) !important;
transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
} }
html.sidebar-expanded.Theme--sidebar #displaybox { html.sidebar-expanded.Theme--sidebar #displaybox,
margin-left: var(--sidebar-expanded) !important;
}
html.sidebar-expanded.Theme--sidebar #footer, html.sidebar-expanded.Theme--sidebar #footer,
html.sidebar-expanded.Theme--sidebar #copyright { html.sidebar-expanded.Theme--sidebar #copyright {
margin-left: var(--sidebar-expanded) !important; margin-left: var(--sidebar-expanded) !important;
@@ -580,9 +578,9 @@ div.frame {
div.title, div.title,
#title, #title,
.content #title { .content #title {
background: rgba(255, 255, 255, 0.02) !important; background: transparent !important;
color: var(--glass-text-heading) !important; color: var(--glass-text-heading) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; border-bottom: none !important;
font-weight: 600 !important; font-weight: 600 !important;
font-size: 1.05em !important; font-size: 1.05em !important;
letter-spacing: 0.3px !important; letter-spacing: 0.3px !important;
@@ -1131,12 +1129,12 @@ table.dashboard td a:hover {
padding: 20px 28px !important; padding: 20px 28px !important;
} }
/* Header bar — subtle glass strip */ /* Header bar — MUST stay transparent, no glass background */
#header { #header {
background: rgba(255, 255, 255, 0.04) !important; background: transparent !important;
backdrop-filter: blur(30px) saturate(1.2) !important; backdrop-filter: none !important;
-webkit-backdrop-filter: blur(30px) saturate(1.2) !important; -webkit-backdrop-filter: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; border-bottom: none !important;
} }
@@ -1154,9 +1152,9 @@ nav.tabs {
} }
nav.tabs button { nav.tabs button {
background: rgba(255, 255, 255, 0.06) !important; background: rgba(255, 255, 255, 0.08) !important;
color: var(--glass-text-muted) !important; color: var(--glass-text-muted) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important;
border-radius: 12px !important; border-radius: 12px !important;
padding: 8px 18px !important; padding: 8px 18px !important;
font-size: 13px !important; font-size: 13px !important;
@@ -1167,18 +1165,21 @@ nav.tabs button {
} }
nav.tabs button:hover { nav.tabs button:hover {
background: rgba(255, 255, 255, 0.12) !important; background: rgba(255, 255, 255, 0.14) !important;
color: var(--glass-text) !important; color: var(--glass-text) !important;
border-color: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.18) !important;
box-shadow: none !important; box-shadow: none !important;
} }
nav.tabs button[aria-selected="true"], nav.tabs button[aria-selected="true"],
nav.tabs button.active { nav.tabs button.active {
background: var(--glass-accent-subtle) !important; background: rgba(255, 255, 255, 0.14) !important;
color: var(--glass-accent) !important; color: var(--glass-text-heading) !important;
border-color: rgba(126, 184, 218, 0.30) !important; border-color: rgba(255, 255, 255, 0.20) !important;
font-weight: 600 !important; font-weight: 600 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20),
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
0 0 12px rgba(255, 255, 255, 0.06) !important;
} }
/* Legacy div.tab style tabs (some pages still use these) */ /* Legacy div.tab style tabs (some pages still use these) */
@@ -1192,9 +1193,9 @@ div.tabs {
} }
div.tab { div.tab {
background: rgba(255, 255, 255, 0.06) !important; background: rgba(255, 255, 255, 0.08) !important;
color: var(--glass-text-muted) !important; color: var(--glass-text-muted) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important;
border-radius: 12px !important; border-radius: 12px !important;
padding: 8px 18px !important; padding: 8px 18px !important;
transition: all 0.2s ease !important; transition: all 0.2s ease !important;
@@ -1202,15 +1203,18 @@ div.tab {
} }
div.tab:hover { div.tab:hover {
background: rgba(255, 255, 255, 0.12) !important; background: rgba(255, 255, 255, 0.14) !important;
color: var(--glass-text) !important; color: var(--glass-text) !important;
} }
div.tab.active, div.tab.active,
div.tab[aria-selected="true"] { div.tab[aria-selected="true"] {
background: var(--glass-accent-subtle) !important; background: rgba(255, 255, 255, 0.14) !important;
color: var(--glass-accent) !important; color: var(--glass-text-heading) !important;
border-color: rgba(126, 184, 218, 0.30) !important; border-color: rgba(255, 255, 255, 0.20) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20),
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
0 0 12px rgba(255, 255, 255, 0.06) !important;
} }