Add comprehensive inner page glass styling
- Glass wrapper for inner page tables (Shares, Docker, VMs, Main) - Tab navigation styling with active/inactive glass pills (nav.tabs, div.tab) - Header bar subtle glass treatment - Settings icon grid tile glass cards - Form section bands (div.shade) from opaque dark to subtle transparent - Dropdown checklist containers glass styling - Help text, blockquote, disabled button, checkbox/radio styling - Content padding on #displaybox for consistent spacing Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kaloyan Danchev
370
style.css
370
style.css
@@ -1121,6 +1121,376 @@ table.dashboard td a:hover {
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
INNER PAGES — Content Glass Wrapper
|
||||
============================================ */
|
||||
|
||||
/* #displaybox is the main content area next to sidebar.
|
||||
On non-dashboard pages, wrap content in a glass panel. */
|
||||
#displaybox {
|
||||
padding: 20px 28px !important;
|
||||
}
|
||||
|
||||
/* Header bar — subtle glass strip */
|
||||
#header {
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
backdrop-filter: blur(30px) saturate(1.2) !important;
|
||||
-webkit-backdrop-filter: blur(30px) saturate(1.2) !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
TAB NAVIGATION (nav.tabs with <button>)
|
||||
============================================ */
|
||||
nav.tabs {
|
||||
background: transparent !important;
|
||||
padding: 0 0 12px !important;
|
||||
margin-bottom: 16px !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
|
||||
display: flex !important;
|
||||
gap: 6px !important;
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
|
||||
nav.tabs button {
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
color: var(--glass-text-muted) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
border-radius: 12px !important;
|
||||
padding: 8px 18px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 500 !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
-webkit-backdrop-filter: blur(10px) !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
nav.tabs button:hover {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
color: var(--glass-text) !important;
|
||||
border-color: rgba(255, 255, 255, 0.15) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
nav.tabs button[aria-selected="true"],
|
||||
nav.tabs button.active {
|
||||
background: var(--glass-accent-subtle) !important;
|
||||
color: var(--glass-accent) !important;
|
||||
border-color: rgba(126, 184, 218, 0.30) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
/* Legacy div.tab style tabs (some pages still use these) */
|
||||
div.tabs {
|
||||
background: transparent !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
|
||||
display: flex !important;
|
||||
gap: 6px !important;
|
||||
padding-bottom: 12px !important;
|
||||
margin-bottom: 16px !important;
|
||||
}
|
||||
|
||||
div.tab {
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
color: var(--glass-text-muted) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
border-radius: 12px !important;
|
||||
padding: 8px 18px !important;
|
||||
transition: all 0.2s ease !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
div.tab:hover {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
color: var(--glass-text) !important;
|
||||
}
|
||||
|
||||
div.tab.active,
|
||||
div.tab[aria-selected="true"] {
|
||||
background: var(--glass-accent-subtle) !important;
|
||||
color: var(--glass-accent) !important;
|
||||
border-color: rgba(126, 184, 218, 0.30) !important;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
INNER PAGE TABLES (Shares, Docker, VMs, Main)
|
||||
============================================ */
|
||||
|
||||
/* Table wrapper — glass card for non-dashboard tables */
|
||||
#displaybox table:not(.dashboard) {
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
backdrop-filter: blur(30px) saturate(1.3) !important;
|
||||
-webkit-backdrop-filter: blur(30px) saturate(1.3) !important;
|
||||
border: 1px solid var(--glass-border) !important;
|
||||
border-radius: var(--glass-radius) !important;
|
||||
box-shadow: var(--glass-shadow) !important;
|
||||
overflow: hidden !important;
|
||||
border-collapse: separate !important;
|
||||
border-spacing: 0 !important;
|
||||
}
|
||||
|
||||
/* Table header row */
|
||||
#displaybox table:not(.dashboard) thead {
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
}
|
||||
|
||||
#displaybox table:not(.dashboard) thead th {
|
||||
color: var(--glass-text-muted) !important;
|
||||
font-weight: 500 !important;
|
||||
text-transform: uppercase !important;
|
||||
font-size: 0.72em !important;
|
||||
letter-spacing: 0.6px !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
|
||||
padding: 12px 16px !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
#displaybox table:not(.dashboard) tbody td {
|
||||
color: var(--glass-text) !important;
|
||||
padding: 10px 16px !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
#displaybox table:not(.dashboard) tbody tr:hover {
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
}
|
||||
|
||||
#displaybox table:not(.dashboard) tbody tr:last-child td {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
SETTINGS PAGES — Icon Grid
|
||||
============================================ */
|
||||
|
||||
/* Settings category headers */
|
||||
#displaybox > div.title,
|
||||
.tab-content > div.title {
|
||||
color: var(--glass-text-heading) !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 1.05em !important;
|
||||
padding: 16px 4px 8px !important;
|
||||
margin-top: 12px !important;
|
||||
border-bottom: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Settings icon grid wrapper */
|
||||
.icon-grid,
|
||||
div[style*="icon"],
|
||||
#displaybox > table:not(.dashboard):not(.share_status):not(.disk_status) {
|
||||
border-radius: var(--glass-radius) !important;
|
||||
}
|
||||
|
||||
/* Settings tiles (individual icon buttons) */
|
||||
span.icon-setting,
|
||||
.page-setting,
|
||||
.icon-app {
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
border-radius: 16px !important;
|
||||
backdrop-filter: blur(20px) !important;
|
||||
-webkit-backdrop-filter: blur(20px) !important;
|
||||
transition: all 0.2s ease !important;
|
||||
color: var(--glass-text) !important;
|
||||
}
|
||||
|
||||
span.icon-setting:hover,
|
||||
.page-setting:hover,
|
||||
.icon-app:hover {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
border-color: rgba(255, 255, 255, 0.18) !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
FORM PAGES (Settings detail, Share detail)
|
||||
============================================ */
|
||||
|
||||
/* Settings form — dl/dt/dd layout */
|
||||
dl {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
dt {
|
||||
color: var(--glass-text) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
dd {
|
||||
color: var(--glass-text) !important;
|
||||
}
|
||||
|
||||
/* Alternating section backgrounds on share/settings pages */
|
||||
.section-colored,
|
||||
table.settings > tbody > tr:nth-child(even),
|
||||
#displaybox > div[style*="background"] {
|
||||
background: rgba(255, 255, 255, 0.03) !important;
|
||||
}
|
||||
|
||||
/* Help text */
|
||||
blockquote,
|
||||
.helptext,
|
||||
.help,
|
||||
div.help {
|
||||
color: var(--glass-text-muted) !important;
|
||||
background: rgba(255, 255, 255, 0.03) !important;
|
||||
border-left: 3px solid rgba(126, 184, 218, 0.3) !important;
|
||||
border-radius: 0 8px 8px 0 !important;
|
||||
padding: 10px 14px !important;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
USERS PAGE
|
||||
============================================ */
|
||||
.user-card,
|
||||
div[style*="dashed"],
|
||||
#displaybox > table td > div[style] {
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.10) !important;
|
||||
border-radius: 16px !important;
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
PLUGINS PAGE
|
||||
============================================ */
|
||||
.plugin-list .plugin,
|
||||
#displaybox > table.tablesorter {
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
border: 1px solid var(--glass-border) !important;
|
||||
border-radius: var(--glass-radius) !important;
|
||||
backdrop-filter: blur(30px) saturate(1.3) !important;
|
||||
-webkit-backdrop-filter: blur(30px) saturate(1.3) !important;
|
||||
}
|
||||
|
||||
/* Plugin support thread links */
|
||||
.plugin a.support,
|
||||
a[href*="forums.unraid.net"] {
|
||||
color: var(--glass-accent) !important;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
DOCKER & VM LIST PAGES (advanced table view)
|
||||
============================================ */
|
||||
|
||||
/* Table header bar on Docker/VM pages */
|
||||
#docker_list thead,
|
||||
#vm_list thead,
|
||||
table.tablesorter thead {
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
}
|
||||
|
||||
#docker_list thead th,
|
||||
#vm_list thead th {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
|
||||
}
|
||||
|
||||
/* Container row actions */
|
||||
#docker_list tbody td,
|
||||
#vm_list tbody td {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
MISC INNER PAGE ELEMENTS
|
||||
============================================ */
|
||||
|
||||
/* Page title text */
|
||||
span.title {
|
||||
color: var(--glass-text-heading) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
/* Status badges */
|
||||
span.label,
|
||||
.badge {
|
||||
border-radius: 8px !important;
|
||||
padding: 2px 8px !important;
|
||||
}
|
||||
|
||||
/* Disabled buttons */
|
||||
input[type="button"][disabled],
|
||||
input[type="submit"][disabled],
|
||||
button[disabled] {
|
||||
background: rgba(128, 128, 128, 0.08) !important;
|
||||
color: rgba(128, 128, 128, 0.5) !important;
|
||||
border-color: rgba(128, 128, 128, 0.15) !important;
|
||||
cursor: not-allowed !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Checkbox and radio — subtle glass */
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
border: 1px solid rgba(255, 255, 255, 0.20) !important;
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked,
|
||||
input[type="radio"]:checked {
|
||||
background: var(--glass-accent-subtle) !important;
|
||||
border-color: var(--glass-accent) !important;
|
||||
}
|
||||
|
||||
/* Tooltip / title popups */
|
||||
.tooltip,
|
||||
[data-tooltip] {
|
||||
background: rgba(255, 255, 255, 0.10) !important;
|
||||
backdrop-filter: blur(40px) !important;
|
||||
-webkit-backdrop-filter: blur(40px) !important;
|
||||
border: 1px solid var(--glass-border) !important;
|
||||
border-radius: 10px !important;
|
||||
color: var(--glass-text) !important;
|
||||
}
|
||||
|
||||
/* Notification bar (parity check etc.) */
|
||||
#footer .status {
|
||||
color: var(--glass-text) !important;
|
||||
}
|
||||
|
||||
/* Form section bands (Share detail, disk settings, etc.)
|
||||
Unraid uses div.shade with opaque dark background */
|
||||
div.shade,
|
||||
div.clone-settings.shade,
|
||||
div.clone-settings {
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
|
||||
}
|
||||
|
||||
/* Dropdown checklist containers (multi-select) */
|
||||
.ui-dropdownchecklist-dropcontainer,
|
||||
.ui-widget-content {
|
||||
background: rgba(255, 255, 255, 0.10) !important;
|
||||
backdrop-filter: blur(40px) saturate(1.5) !important;
|
||||
-webkit-backdrop-filter: blur(40px) saturate(1.5) !important;
|
||||
border: 1px solid var(--glass-border) !important;
|
||||
border-radius: 12px !important;
|
||||
color: var(--glass-text) !important;
|
||||
}
|
||||
|
||||
/* Dropdown checklist items */
|
||||
.ui-dropdownchecklist-item {
|
||||
color: var(--glass-text) !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.ui-dropdownchecklist-item:hover {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
CONTENT AREA offset for sidebar
|
||||
============================================ */
|
||||
|
||||
Reference in New Issue
Block a user