From fb07089ee5c2c92f0d60eb219aa2564e33a9b340 Mon Sep 17 00:00:00 2001
From: Kaloyan Danchev <kaloyandanchev@Kaloyans-MacBook-Air.local>
Date: Sun, 8 Feb 2026 09:40:52 +0200
Subject: [PATCH] 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>
---
 style.css | 370 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 370 insertions(+)

diff --git a/style.css b/style.css
index 44eda55..1cdb5f1 100644
--- a/style.css
+++ b/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
    ============================================ */