diff --git a/sidebar.js b/sidebar.js index 74345c7..47f3ffc 100644 --- a/sidebar.js +++ b/sidebar.js @@ -54,6 +54,10 @@ var link = searchItem.querySelector('a'); if (!link) return; + // Remove any inline onclick handler (Unraid sets onclick="gui_search()") + link.removeAttribute('onclick'); + link.onclick = null; + // Replace hover with click link.addEventListener('click', function(e) { e.preventDefault(); diff --git a/style.css b/style.css index 063b182..44eda55 100644 --- a/style.css +++ b/style.css @@ -12,19 +12,19 @@ --glass-accent-subtle: rgba(126, 184, 218, 0.12); /* Glass card properties */ - --glass-bg: rgba(255, 255, 255, 0.08); - --glass-bg-hover: rgba(255, 255, 255, 0.11); + --glass-bg: rgba(255, 255, 255, 0.12); + --glass-bg-hover: rgba(255, 255, 255, 0.16); --glass-border: rgba(255, 255, 255, 0.15); --glass-border-hover: rgba(255, 255, 255, 0.25); - --glass-blur: 40px; + --glass-blur: 50px; --glass-saturate: 1.5; --glass-radius: 22px; --glass-radius-sm: 14px; - --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); + --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.10); /* Text */ --glass-text: rgba(255, 255, 255, 0.90); - --glass-text-muted: rgba(255, 255, 255, 0.50); + --glass-text-muted: rgba(255, 255, 255, 0.55); --glass-text-heading: rgba(255, 255, 255, 0.95); /* Override Unraid theme variables */ @@ -215,13 +215,10 @@ html.sidebar-expanded #sidebar-toggle-btn svg { width: 0 !important; } -/* Utility nav items (right) — separator + sticky at bottom */ +/* Utility nav items (right) — separator, scrolls with main nav */ .Theme--sidebar .nav-tile.right { - position: sticky !important; - bottom: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.10) !important; padding: 6px 0 6px !important; - background: inherit !important; } /* DISABLE default Unraid hover width expansion */ @@ -405,44 +402,66 @@ html.sidebar-expanded.Theme--sidebar #copyright { overflow: visible !important; } -.Theme--sidebar #guiSearchBoxSpan { +/* Spotlight-style search popup — centered, wide */ +.Theme--sidebar #guiSearchBoxSpan, +body > #guiSearchBoxSpan { position: fixed !important; top: 28% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 10001 !important; - width: auto !important; - min-width: 440px !important; + width: 600px !important; + max-width: 90vw !important; height: auto !important; - padding: 12px 16px !important; + padding: 0 !important; margin: 0 !important; - background: rgba(15, 20, 30, 0.80) !important; + background: rgba(255, 255, 255, 0.10) !important; backdrop-filter: blur(50px) saturate(1.5) !important; -webkit-backdrop-filter: blur(50px) saturate(1.5) !important; border: 1px solid var(--glass-border) !important; - border-radius: 18px !important; + border-radius: 20px !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; - display: flex !important; - align-items: center !important; - font-size: 15px !important; + display: block !important; + overflow: visible !important; + font-size: 16px !important; line-height: normal !important; } -.Theme--sidebar #guiSearchBox { - width: 400px !important; - background: rgba(255, 255, 255, 0.08) !important; - color: var(--glass-text) !important; - border: 1px solid var(--glass-border) !important; - border-radius: 12px !important; - padding: 10px 16px !important; - font-size: 15px !important; - font-family: inherit !important; +/* Awesomplete wrapper — fill full width */ +.Theme--sidebar #guiSearchBoxSpan .awesomplete, +body > #guiSearchBoxSpan .awesomplete { + display: block !important; + width: 100% !important; } -.Theme--sidebar #guiSearchBox:focus { - border-color: var(--glass-accent) !important; - box-shadow: 0 0 0 3px var(--glass-accent-glow) !important; +/* Search input — fills full width of glass container */ +.Theme--sidebar #guiSearchBox, +body > #guiSearchBoxSpan #guiSearchBox { + width: 100% !important; + box-sizing: border-box !important; + background: transparent !important; + color: var(--glass-text) !important; + border: none !important; + border-radius: 20px !important; + padding: 18px 24px !important; + font-size: 20px !important; + font-family: inherit !important; + outline: none !important; +} + +.Theme--sidebar #guiSearchBox:focus, +body > #guiSearchBoxSpan #guiSearchBox:focus { + border: none !important; + box-shadow: none !important; +} + +/* Hide awesomplete status indicator (diamond marker) */ +.Theme--sidebar #guiSearchBoxSpan .awesomplete .visually-hidden, +body > #guiSearchBoxSpan .awesomplete .visually-hidden, +.Theme--sidebar #guiSearchBoxSpan .awesomplete [role="status"], +body > #guiSearchBoxSpan .awesomplete [role="status"] { + display: none !important; } #search-backdrop { @@ -457,30 +476,60 @@ html.sidebar-expanded.Theme--sidebar #copyright { z-index: 10000; } -.Theme--sidebar .awesomplete > ul { - background: rgba(15, 20, 30, 0.90) !important; - backdrop-filter: blur(40px) saturate(1.5) !important; - -webkit-backdrop-filter: blur(40px) saturate(1.5) !important; +/* Autocomplete dropdown — attached to the glass container */ +.Theme--sidebar .awesomplete > ul, +body > #guiSearchBoxSpan .awesomplete > ul { + background: rgba(255, 255, 255, 0.14) !important; + backdrop-filter: blur(50px) saturate(1.5) !important; + -webkit-backdrop-filter: blur(50px) saturate(1.5) !important; border: 1px solid var(--glass-border) !important; - border-radius: 14px !important; - box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important; - padding: 4px !important; + border-radius: 16px !important; + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4) !important; + padding: 8px !important; + margin-top: 5px !important; z-index: 10002 !important; + position: absolute !important; + left: 0 !important; + right: 0 !important; + width: 100% !important; + box-sizing: border-box !important; + max-height: 50vh !important; + overflow-y: auto !important; } -.Theme--sidebar .awesomplete > ul > li { +/* Hide the awesomplete arrow/caret */ +.Theme--sidebar .awesomplete > ul::before, +.Theme--sidebar .awesomplete > ul::after, +body > #guiSearchBoxSpan .awesomplete > ul::before, +body > #guiSearchBoxSpan .awesomplete > ul::after { + display: none !important; +} + +.Theme--sidebar .awesomplete > ul > li, +body > #guiSearchBoxSpan .awesomplete > ul > li { color: var(--glass-text) !important; - padding: 8px 14px !important; + padding: 10px 18px !important; border-radius: 10px !important; - font-size: 14px !important; + font-size: 15px !important; } .Theme--sidebar .awesomplete > ul > li:hover, -.Theme--sidebar .awesomplete > ul > li[aria-selected="true"] { - background: rgba(255, 255, 255, 0.10) !important; +.Theme--sidebar .awesomplete > ul > li[aria-selected="true"], +body > #guiSearchBoxSpan .awesomplete > ul > li:hover, +body > #guiSearchBoxSpan .awesomplete > ul > li[aria-selected="true"] { + background: rgba(255, 255, 255, 0.12) !important; color: var(--glass-text-heading) !important; } +/* Highlighted matching text in results */ +body > #guiSearchBoxSpan .awesomplete mark, +.Theme--sidebar .awesomplete mark { + background: rgba(255, 200, 50, 0.25) !important; + color: var(--glass-text-heading) !important; + padding: 0 1px !important; + border-radius: 2px !important; +} + /* ============================================ GLASS CARDS (Panels, Frames) @@ -516,7 +565,7 @@ div.frame::before { left: 8%; right: 8%; height: 1px; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent); + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent); pointer-events: none; z-index: 1; } @@ -534,9 +583,10 @@ div.title, background: rgba(255, 255, 255, 0.02) !important; color: var(--glass-text-heading) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; - font-weight: 500 !important; - letter-spacing: 0.4px !important; - padding: 14px 18px !important; + font-weight: 600 !important; + font-size: 1.05em !important; + letter-spacing: 0.3px !important; + padding: 16px 22px !important; } @@ -564,7 +614,7 @@ table thead th { font-size: 0.72em !important; letter-spacing: 0.6px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; - padding: 10px 14px !important; + padding: 12px 16px !important; } table tbody tr { @@ -577,7 +627,7 @@ table tbody tr:hover { table tbody td { color: var(--glass-text) !important; - padding: 10px 14px !important; + padding: 12px 16px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important; } @@ -674,7 +724,7 @@ div.tab:hover { ============================================ */ .sweet-alert, .swal-modal { - background: rgba(15, 20, 30, 0.70) !important; + background: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(50px) saturate(1.5) !important; -webkit-backdrop-filter: blur(50px) saturate(1.5) !important; border: 1px solid var(--glass-border) !important; @@ -683,6 +733,7 @@ div.tab:hover { color: var(--glass-text) !important; } +.sweet-overlay, .swal-overlay--show-modal, div.shade-black { background: rgba(0, 0, 0, 0.45) !important; @@ -690,6 +741,41 @@ div.shade-black { -webkit-backdrop-filter: blur(6px) !important; } +/* Sweet-alert inner content — force light text on glass */ +.sweet-alert h2 { + background: rgba(255, 255, 255, 0.04) !important; + color: var(--glass-text-heading) !important; +} + +.sweet-alert p, +.sweet-alert pre, +.sweet-alert td, +.sweet-alert th, +.sweet-alert tr, +.sweet-alert span, +.sweet-alert label, +.sweet-alert div { + color: var(--glass-text) !important; +} + +.sweet-alert .sa-fix { + background: transparent !important; +} + +.sweet-alert hr { + border-color: rgba(255, 255, 255, 0.08) !important; + background: transparent !important; +} + +.sweet-alert button { + color: var(--glass-accent) !important; +} + +.sweet-alert a, +.sweet-alert .link { + color: var(--glass-accent) !important; +} + /* ============================================ DROPDOWN MENUS / POPUPS @@ -705,6 +791,40 @@ div.shade-black { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important; } +/* Context menu (Docker/VM icon click) */ +.dropdown-menu.dropdown-context { + background: rgba(255, 255, 255, 0.10) !important; + backdrop-filter: blur(50px) saturate(1.5) !important; + -webkit-backdrop-filter: blur(50px) saturate(1.5) !important; + border: 1px solid var(--glass-border) !important; + border-radius: 14px !important; + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; + padding: 6px !important; + overflow: hidden; +} + +.dropdown-menu.dropdown-context > li > a { + color: var(--glass-text) !important; + padding: 8px 14px !important; + border-radius: 8px !important; + font-size: 13px !important; + transition: background 0.15s ease !important; +} + +.dropdown-menu.dropdown-context > li > a:hover { + background: rgba(255, 255, 255, 0.10) !important; + color: var(--glass-text-heading) !important; +} + +.dropdown-menu.dropdown-context > li > a > i { + color: var(--glass-text-muted) !important; +} + +.dropdown-menu.dropdown-context > li.divider { + background: rgba(255, 255, 255, 0.08) !important; + margin: 4px 8px !important; +} + /* ============================================ STATUS INDICATORS @@ -808,7 +928,7 @@ div.frame:has(> div.grid):hover { /* Dashboard grid — prevent first column blowout */ div.grid { - gap: 20px !important; + gap: 24px !important; } /* Tile columns — transparent + prevent overflow */ @@ -841,7 +961,8 @@ table.dashboard > tbody.sortable { border: 1px solid var(--glass-border) !important; border-radius: var(--glass-radius) !important; box-shadow: var(--glass-shadow) !important; - margin-bottom: 16px !important; + margin-bottom: 20px !important; + padding-bottom: 8px !important; overflow: hidden !important; position: relative; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; @@ -861,15 +982,16 @@ table.dashboard > tbody.sortable::before { left: 8%; right: 8%; height: 1px; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent); + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent); pointer-events: none; z-index: 1; } -/* Dashboard card rows — use block to preserve inner layouts */ +/* Dashboard card rows — use block to preserve inner layouts + NOTE: display must NOT use !important so Unraid's jQuery .hide() can override */ table.dashboard > tbody.sortable > tr { - display: block !important; - padding: 6px 14px !important; + display: block; + padding: 10px 18px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important; background: transparent !important; } @@ -878,21 +1000,22 @@ table.dashboard > tbody.sortable > tr:last-child { border-bottom: none !important; } -/* Dashboard card cells */ +/* Dashboard card cells + NOTE: display must NOT use !important so Unraid's jQuery .hide() can override */ table.dashboard > tbody.sortable > tr > td { - display: block !important; + display: block; width: 100% !important; border: none !important; - padding: 4px 4px !important; + padding: 6px 6px !important; color: var(--glass-text) !important; background: transparent !important; } /* Header row of each card */ table.dashboard > tbody.sortable > tr:first-child { - background: rgba(255, 255, 255, 0.03) !important; - border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; - padding: 10px 14px !important; + background: transparent !important; + border-bottom: none !important; + padding: 14px 18px !important; } /* Tile header text */ @@ -902,7 +1025,7 @@ span.tile-header-right { color: var(--glass-text-heading) !important; font-weight: 600 !important; letter-spacing: 0.3px !important; - font-size: 0.92em !important; + font-size: 1em !important; } /* Tile header layout */