From a2ca0730c55d5830e9d288f660a5ef90ebb395af Mon Sep 17 00:00:00 2001 From: Kaloyan Danchev Date: Sat, 7 Feb 2026 23:20:30 +0200 Subject: [PATCH] Initial commit: visionOS glassmorphism theme for Unraid 7.2.3 - style.css: Full CSS theme with frosted glass cards, sidebar styling, dashboard individual glass cards, search overlay, FA icon replacements - sidebar.js: Collapsible sidebar toggle with Unraid logo, search popup (moved to body to escape backdrop-filter containing block), Cmd+K shortcut Co-Authored-By: Claude Opus 4.6 --- sidebar.js | 143 ++++++++ style.css | 1029 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 1172 insertions(+) create mode 100644 sidebar.js create mode 100644 style.css diff --git a/sidebar.js b/sidebar.js new file mode 100644 index 0000000..74345c7 --- /dev/null +++ b/sidebar.js @@ -0,0 +1,143 @@ +(function() { + 'use strict'; + var KEY = 'unraid-sidebar-expanded'; + + // Restore state immediately (before DOM ready to avoid flash) + if (localStorage.getItem(KEY) === '1') { + document.documentElement.classList.add('sidebar-expanded'); + } + + function init() { + var menu = document.getElementById('menu'); + if (!menu) return; + + // --- Unraid logo (absolute positioned at very top of sidebar) --- + if (!document.getElementById('sidebar-logo')) { + var logo = document.createElement('img'); + logo.id = 'sidebar-logo'; + logo.src = 'https://cdn.jsdelivr.net/gh/selfhst/icons@main/svg/unraid.svg'; + logo.alt = ''; + menu.appendChild(logo); + } + + // --- Toggle button with chevron (below logo) --- + if (!document.getElementById('sidebar-toggle-btn')) { + var btn = document.createElement('button'); + btn.id = 'sidebar-toggle-btn'; + btn.type = 'button'; + btn.title = 'Toggle Sidebar'; + btn.innerHTML = ''; + + btn.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + var expanded = document.documentElement.classList.toggle('sidebar-expanded'); + localStorage.setItem(KEY, expanded ? '1' : '0'); + }); + + menu.appendChild(btn); + } + + // --- Search overlay (delayed to wait for search plugin init) --- + setTimeout(initSearchOverlay, 800); + } + + function initSearchOverlay() { + if (!window.jQuery) return; + + var searchItem = document.querySelector('.nav-item.gui_search'); + if (!searchItem) return; + + // Remove default hover-based open/close handlers + $(searchItem).off('mouseenter mouseleave'); + + var link = searchItem.querySelector('a'); + if (!link) return; + + // Replace hover with click + link.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + toggleSearch(); + }); + + // Add Cmd+K / Ctrl+K keyboard shortcut (sidebar theme doesn't have one by default) + document.addEventListener('keydown', function(e) { + var isMac = navigator.platform.indexOf('Mac') > -1; + if ((isMac ? e.metaKey : e.ctrlKey) && (e.key === 'k' || e.keyCode === 75)) { + if ($('[role="modal"]:visible').length) return; + e.preventDefault(); + toggleSearch(); + } + }); + } + + function toggleSearch() { + var existing = document.getElementById('guiSearchBoxSpan'); + if (existing) { + closeSearch(); + return; + } + + // Call original gui_search to create the input + if (typeof gui_search === 'function') { + gui_search(); + } + + // Move search box to — backdrop-filter on #menu creates a new + // containing block, so position:fixed inside it is relative to #menu + // and gets clipped by overflow:hidden. Moving to body fixes this. + var searchSpan = document.getElementById('guiSearchBoxSpan'); + if (searchSpan) { + document.body.appendChild(searchSpan); + } + + // Create backdrop overlay + if (!document.getElementById('search-backdrop')) { + var backdrop = document.createElement('div'); + backdrop.id = 'search-backdrop'; + backdrop.addEventListener('click', function() { + closeSearch(); + }); + document.body.appendChild(backdrop); + } + + // Override blur/keydown behavior on the input + var input = document.getElementById('guiSearchBox'); + if (input && window.jQuery) { + $(input).off('blur keydown'); + + input.addEventListener('blur', function() { + setTimeout(function() { + var span = document.getElementById('guiSearchBoxSpan'); + if (span && !span.contains(document.activeElement)) { + closeSearch(); + } + }, 300); + }); + + input.addEventListener('keydown', function(e) { + if (e.key === 'Escape' || e.keyCode === 27) { + e.preventDefault(); + closeSearch(); + } + }); + + input.focus(); + } + } + + function closeSearch() { + // Remove the search span directly (works whether moved to body or not) + var span = document.getElementById('guiSearchBoxSpan'); + if (span) span.remove(); + var backdrop = document.getElementById('search-backdrop'); + if (backdrop) backdrop.remove(); + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..063b182 --- /dev/null +++ b/style.css @@ -0,0 +1,1029 @@ +/* ============================================ + Unraid visionOS Glassmorphism Theme v2.0 + Mountain wallpaper + frosted glass cards + ============================================ */ + +/* --- CSS Variables --- */ +:root { + /* Accent: cool steel blue to match B&W mountains */ + --glass-accent: #7EB8DA; + --glass-accent-hover: #9FCCE8; + --glass-accent-glow: rgba(126, 184, 218, 0.25); + --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-border: rgba(255, 255, 255, 0.15); + --glass-border-hover: rgba(255, 255, 255, 0.25); + --glass-blur: 40px; + --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); + + /* Text */ + --glass-text: rgba(255, 255, 255, 0.90); + --glass-text-muted: rgba(255, 255, 255, 0.50); + --glass-text-heading: rgba(255, 255, 255, 0.95); + + /* Override Unraid theme variables */ + --main-bg-color: transparent; + --alt-background-color: transparent; + --modal-bg-color: rgba(20, 20, 30, 0.85); + --text: var(--glass-text); + --text-muted: var(--glass-text-muted); + --link-color: var(--glass-accent); + --link-color-hover: var(--glass-accent-hover); + --accent-color: var(--glass-accent); + --accent-color-hover: var(--glass-accent-hover); + --header-text-color: var(--glass-text); + --box-shadow: none; + + /* Sidebar dimensions */ + --sidebar-collapsed: 64px; + --sidebar-expanded: 220px; +} + + +/* ============================================ + BACKGROUND: Mountain Wallpaper + ============================================ */ +body { + background: #0a0a0f !important; + background-image: url('/custom/wallpaper.jpg') !important; + background-size: cover !important; + background-position: center center !important; + background-attachment: fixed !important; + background-repeat: no-repeat !important; + color: var(--glass-text) !important; + font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; + -webkit-font-smoothing: antialiased !important; + -moz-osx-font-smoothing: grayscale !important; + letter-spacing: 0.15px !important; +} + +/* Dark overlay on body to ensure contrast */ +body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.45); + z-index: -1; + pointer-events: none; +} + + +/* ============================================ + HEADER BAR + ============================================ */ +#header { + background: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + border-bottom: none !important; + box-shadow: none !important; +} + +#header a, +#header .text-left, +#header .text-right, +#header span, +#header i, +#header .fa, +#header [class*="icon"] { + color: rgba(50, 55, 65, 0.85) !important; +} + + +/* ============================================ + SIDEBAR: Collapsed (icons only, NO hover expand) + ============================================ */ + +/* Sidebar — glass container, keep Unraid's position:fixed */ +.Theme--sidebar #menu { + 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-left: none !important; + border-radius: 0 var(--glass-radius) var(--glass-radius) 0 !important; + box-shadow: 4px 0 30px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; + width: var(--sidebar-collapsed) !important; + overflow: hidden !important; + transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; + margin-top: 4px !important; + margin-bottom: 4px !important; +} + +/* Inner glow on sidebar top edge */ +.Theme--sidebar #menu::before { + content: ''; + position: absolute; + top: 0; + left: 15%; + right: 0; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); + pointer-events: none; + z-index: 1; +} + +/* --- Unraid logo: above toggle button --- */ +#sidebar-logo { + position: absolute !important; + top: 20px !important; + left: 50% !important; + transform: translateX(-50%) !important; + width: 30px !important; + height: 30px !important; + filter: brightness(0) invert(1) !important; + opacity: 0.70 !important; + pointer-events: none !important; + z-index: 10; + transition: opacity 0.2s ease; +} + +/* --- Toggle button: chevron only --- */ +#sidebar-toggle-btn { + position: absolute !important; + top: 50px !important; + left: 50% !important; + transform: translateX(-50%) !important; + width: 36px !important; + height: 36px !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + background: transparent !important; + border: none !important; + border-radius: 50% !important; + color: var(--glass-text-muted) !important; + cursor: pointer !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + padding: 0 !important; + margin: 0 !important; + transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease !important; + z-index: 10; +} + +#sidebar-toggle-btn:hover { + color: var(--glass-text) !important; +} + +#sidebar-toggle-btn svg { + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Expanded: chevron in visible circle, rotated to point left */ +html.sidebar-expanded #sidebar-toggle-btn { + width: 36px !important; + height: 36px !important; + box-sizing: border-box !important; + background: rgba(255, 255, 255, 0.06) !important; + border: 1px solid rgba(255, 255, 255, 0.10) !important; +} + +html.sidebar-expanded #sidebar-toggle-btn:hover { + background: rgba(255, 255, 255, 0.12) !important; + border-color: rgba(255, 255, 255, 0.20) !important; +} + +html.sidebar-expanded #sidebar-toggle-btn svg { + transform: rotate(180deg); +} + +/* --- #nav-block: work with Unraid's existing absolute layout, adjust top --- */ +.Theme--sidebar #nav-block { + top: 92px !important; + padding-left: 10px !important; + color: var(--glass-text-muted) !important; +} + +/* Main nav tile */ +.Theme--sidebar .nav-tile { + padding: 4px 0 !important; +} + +/* Hide nav-tile scrollbar */ +.Theme--sidebar .nav-tile::-webkit-scrollbar { + width: 0 !important; +} + +/* Utility nav items (right) — separator + sticky at bottom */ +.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 */ +.Theme--sidebar .nav-item:hover { + width: auto !important; + background: transparent !important; + padding-right: 0 !important; +} + +/* Nav items — text-align:center to center the inline-flex */ +.Theme--sidebar .nav-item { + display: block !important; + width: auto !important; + border-bottom: none !important; + padding: 2px 0 !important; + transition: none !important; + text-align: center !important; + background: transparent !important; +} + +/* Links — circle container with position:relative for absolute :before */ +.Theme--sidebar .nav-item a { + position: relative !important; + width: 44px !important; + height: 44px !important; + padding: 0 !important; + gap: 0 !important; + font-size: 0 !important; + color: var(--glass-text-muted) !important; + background: transparent !important; + border-radius: 50% !important; + transition: background 0.2s ease, color 0.2s ease !important; + text-decoration: none !important; + overflow: hidden !important; +} + +/* Hide ALL child elements inside links — only :before pseudo stays */ +.Theme--sidebar .nav-item a > * { + display: none !important; +} + +/* :before icons — absolute centered in the circle */ +.Theme--sidebar .nav-item a:before { + position: absolute !important; + left: 50% !important; + top: 50% !important; + transform: translate(-50%, -50%) !important; + font-size: 20px !important; + font-weight: normal !important; + color: inherit !important; + transition: color 0.2s ease !important; +} + +/* Hover — circle highlight */ +.Theme--sidebar .nav-item:hover a { + background: rgba(255, 255, 255, 0.08) !important; + color: var(--glass-text) !important; +} + +/* Active nav item — brighter circle */ +.Theme--sidebar .nav-item.active { + background: transparent !important; +} + +.Theme--sidebar .nav-item.active a { + background: rgba(255, 255, 255, 0.14) !important; + color: var(--glass-text) !important; +} + +/* Remove default left accent bar on active */ +.Theme--sidebar .nav-item.active::before { + display: none !important; +} + +/* Utility nav items — slightly smaller circles, no active state */ +.Theme--sidebar .nav-tile.right .nav-item { + padding: 1px 0 !important; +} + +.Theme--sidebar .nav-tile.right .nav-item a { + width: 38px !important; + height: 38px !important; +} + +.Theme--sidebar .nav-tile.right .nav-item.active a { + background: transparent !important; + color: var(--glass-text-muted) !important; +} + +/* --- Nav-right icons: thinner FontAwesome replacements --- */ +.Theme--sidebar .nav-tile.right .nav-item a:before { + font-family: FontAwesome !important; + font-size: 18px !important; +} +.Theme--sidebar .nav-item.gui_search a:before { content: "\f002" !important; } +.Theme--sidebar .nav-item.LanguageButton a:before { content: "\f0ac" !important; } +.Theme--sidebar .nav-item.LogoutButton a:before { content: "\f08b" !important; } +.Theme--sidebar .nav-item.TerminalButton a:before { content: "\f120" !important; } +.Theme--sidebar .nav-item.BrowseButton a:before { content: "\f115" !important; } +.Theme--sidebar .nav-item.FeedbackButton a:before { content: "\f075" !important; } +.Theme--sidebar .nav-item.InfoButton a:before { content: "\f05a" !important; } +.Theme--sidebar .nav-item.LogButton a:before { content: "\f0f6" !important; } +.Theme--sidebar .nav-item.HelpButton a:before { content: "\f059" !important; } +.Theme--sidebar .nav-item.LockButton a:before { content: "\f09c" !important; font-family: FontAwesome !important; } + +/* --- EXPANDED SIDEBAR --- + Compound selectors: both classes on */ +html.sidebar-expanded.Theme--sidebar #menu { + width: var(--sidebar-expanded) !important; +} + +html.sidebar-expanded.Theme--sidebar .nav-item { + text-align: left !important; +} + +html.sidebar-expanded.Theme--sidebar .nav-item a { + width: auto !important; + height: auto !important; + font-size: 13px !important; + line-height: normal !important; + border-radius: 10px !important; + padding: 10px 12px !important; + gap: 12px !important; + overflow: visible !important; +} + +/* :before back to normal flow in expanded mode */ +html.sidebar-expanded.Theme--sidebar .nav-item a:before { + position: static !important; + transform: none !important; + font-size: 20px !important; + line-height: 1 !important; + width: 24px !important; + text-align: center !important; + flex-shrink: 0 !important; +} + +/* Show spans in expanded */ +html.sidebar-expanded.Theme--sidebar .nav-item a > span { + display: inline !important; + font-size: 13px !important; + font-weight: 400 !important; + letter-spacing: 0.2px !important; + white-space: nowrap !important; +} + +/* Keep everything else hidden in expanded */ +html.sidebar-expanded.Theme--sidebar .nav-item a > b, +html.sidebar-expanded.Theme--sidebar .nav-item a > .system { + display: none !important; +} + +html.sidebar-expanded.Theme--sidebar .nav-tile.right .nav-item a:before { + font-size: 18px !important; +} + +html.sidebar-expanded.Theme--sidebar .nav-tile.right .nav-item a { + width: auto !important; + height: auto !important; + padding: 8px 12px !important; +} + +/* --- Content area shifts when sidebar expands (push, not overlap) --- */ +#displaybox, +#footer, +#copyright { + transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; +} + +html.sidebar-expanded.Theme--sidebar #displaybox { + margin-left: var(--sidebar-expanded) !important; +} + +html.sidebar-expanded.Theme--sidebar #footer, +html.sidebar-expanded.Theme--sidebar #copyright { + margin-left: var(--sidebar-expanded) !important; +} + +/* --- Search: click-triggered centered popup overlay --- */ +.Theme--sidebar .nav-item.gui_search { + overflow: visible !important; +} + +.Theme--sidebar #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; + height: auto !important; + padding: 12px 16px !important; + margin: 0 !important; + background: rgba(15, 20, 30, 0.80) !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; + 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; + 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; +} + +.Theme--sidebar #guiSearchBox:focus { + border-color: var(--glass-accent) !important; + box-shadow: 0 0 0 3px var(--glass-accent-glow) !important; +} + +#search-backdrop { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.35); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + 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; + 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; + z-index: 10002 !important; +} + +.Theme--sidebar .awesomplete > ul > li { + color: var(--glass-text) !important; + padding: 8px 14px !important; + border-radius: 10px !important; + font-size: 14px !important; +} + +.Theme--sidebar .awesomplete > ul > li:hover, +.Theme--sidebar .awesomplete > ul > li[aria-selected="true"] { + background: rgba(255, 255, 255, 0.10) !important; + color: var(--glass-text-heading) !important; +} + + +/* ============================================ + GLASS CARDS (Panels, Frames) + ============================================ */ +div.Panel, +div.frame, +.ca_holder { + background: var(--glass-bg) !important; + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important; + -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important; + border: 1px solid var(--glass-border) !important; + border-radius: var(--glass-radius) !important; + box-shadow: var(--glass-shadow) !important; + margin-bottom: 16px !important; + overflow: hidden; + transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; +} + +/* Hover: subtle brighten */ +div.Panel:hover, +div.frame:hover { + background: var(--glass-bg-hover) !important; + border-color: var(--glass-border-hover) !important; + box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; +} + +/* Inner glow at top edge of cards (visionOS style) */ +div.Panel::before, +div.frame::before { + content: ''; + position: absolute; + top: 0; + left: 8%; + right: 8%; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent); + pointer-events: none; + z-index: 1; +} + +/* Make panels position:relative for the ::before to work */ +div.Panel, +div.frame { + position: relative; +} + +/* Panel Titles */ +div.title, +#title, +.content #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; +} + + +/* ============================================ + TABLES + ============================================ */ +table, +table.tablesorter, +table.share_status, +table.disk_status, +table.dashboard { + background: transparent !important; + border-collapse: separate !important; + border-spacing: 0 !important; +} + +table thead { + background: rgba(255, 255, 255, 0.02) !important; +} + +table 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: 10px 14px !important; +} + +table tbody tr { + transition: background 0.2s ease !important; +} + +table tbody tr:hover { + background: rgba(255, 255, 255, 0.03) !important; +} + +table tbody td { + color: var(--glass-text) !important; + padding: 10px 14px !important; + border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important; +} + + +/* ============================================ + BUTTONS + ============================================ */ +button, +input[type="button"], +input[type="submit"], +a.button { + background: var(--glass-accent-subtle) !important; + color: var(--glass-accent) !important; + border: 1px solid rgba(126, 184, 218, 0.25) !important; + border-radius: var(--glass-radius-sm) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + padding: 8px 20px !important; + font-weight: 500 !important; + cursor: pointer !important; + transition: all 0.25s ease !important; +} + +button:hover, +input[type="button"]:hover, +input[type="submit"]:hover, +a.button:hover { + background: rgba(126, 184, 218, 0.20) !important; + border-color: rgba(126, 184, 218, 0.4) !important; + color: #fff !important; + box-shadow: 0 0 20px var(--glass-accent-glow) !important; +} + + +/* ============================================ + FORM INPUTS + ============================================ */ +input, +textarea, +select { + background: rgba(255, 255, 255, 0.04) !important; + color: var(--glass-text) !important; + border: 1px solid var(--glass-border) !important; + border-radius: var(--glass-radius-sm) !important; + padding: 8px 12px !important; + transition: border-color 0.25s ease, box-shadow 0.25s ease !important; +} + +input:focus, +textarea:focus, +select:focus { + border-color: var(--glass-accent) !important; + box-shadow: 0 0 0 3px var(--glass-accent-glow) !important; + outline: none !important; +} + + +/* ============================================ + TABS + ============================================ */ +div.tabs { + background: transparent !important; + border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; +} + +div.tab { + background: transparent !important; + color: var(--glass-text-muted) !important; + border-radius: var(--glass-radius-sm) var(--glass-radius-sm) 0 0 !important; + transition: all 0.25s ease !important; +} + +div.tab:hover { + background: var(--glass-bg) !important; + color: var(--glass-text) !important; +} + + +/* ============================================ + FOOTER + ============================================ */ +#footer, +#copyright { + background: rgba(255, 255, 255, 0.06) !important; + backdrop-filter: blur(40px) saturate(var(--glass-saturate)) !important; + -webkit-backdrop-filter: blur(40px) saturate(var(--glass-saturate)) !important; + border-top: 1px solid var(--glass-border) !important; + color: var(--glass-text-muted) !important; +} + + +/* ============================================ + MODALS / DIALOGS + ============================================ */ +.sweet-alert, +.swal-modal { + background: rgba(15, 20, 30, 0.70) !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: 24px !important; + box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; + color: var(--glass-text) !important; +} + +.swal-overlay--show-modal, +div.shade-black { + background: rgba(0, 0, 0, 0.45) !important; + backdrop-filter: blur(6px) !important; + -webkit-backdrop-filter: blur(6px) !important; +} + + +/* ============================================ + DROPDOWN MENUS / POPUPS + ============================================ */ +.popupProfile, +.repoPopup, +.pinPopup { + background: rgba(15, 20, 30, 0.65) !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: var(--glass-radius) !important; + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important; +} + + +/* ============================================ + STATUS INDICATORS + ============================================ */ +.green, +.green-text, +.passed { + color: #4ade80 !important; +} + + +/* ============================================ + USAGE BARS + ============================================ */ +.usage-disk, +.usage-bar { + background: rgba(255, 255, 255, 0.06) !important; + border-radius: 8px !important; + overflow: hidden !important; +} + +.usage-disk > span, +.usage-bar > span { + border-radius: 8px !important; + background: linear-gradient(90deg, rgba(126, 184, 218, 0.6), var(--glass-accent)) !important; +} + + +/* ============================================ + LINKS + ============================================ */ +a { + color: var(--glass-accent) !important; + text-decoration: none !important; + transition: color 0.2s ease !important; +} + +a:hover { + color: var(--glass-accent-hover) !important; +} + + +/* ============================================ + SCROLLBAR + ============================================ */ +::-webkit-scrollbar { + width: 5px; + height: 5px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.12); + border-radius: 3px; +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.22); +} + + +/* ============================================ + DOCKER CONTAINER CARDS + ============================================ */ +.ca_templatesDisplay, +.ca_holderFav { + background: var(--glass-bg) !important; + border: 1px solid var(--glass-border) !important; + border-radius: var(--glass-radius-sm) !important; + backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important; + -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important; +} + + +/* ============================================ + DASHBOARD: Individual Glass Cards + ============================================ */ + +/* Remove glass from the dashboard's outer frame so + individual cards float over the wallpaper */ +div.frame:has(> div.grid) { + background: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + border: none !important; + box-shadow: none !important; +} + +div.frame:has(> div.grid)::before { + display: none !important; +} + +div.frame:has(> div.grid):hover { + background: transparent !important; + border-color: transparent !important; + box-shadow: none !important; +} + +/* Dashboard grid — prevent first column blowout */ +div.grid { + gap: 20px !important; +} + +/* Tile columns — transparent + prevent overflow */ +div.tile { + background: transparent !important; + min-width: 0 !important; + overflow: hidden !important; +} + +/* Dashboard tables → block layout, transparent */ +table.dashboard { + display: block !important; + width: 100% !important; + background: transparent !important; + border: none !important; + box-shadow: none !important; +} + +/* Hide colgroup (not needed with block layout) */ +table.dashboard > colgroup { + display: none !important; +} + +/* --- Individual Dashboard Glass Cards --- */ +table.dashboard > tbody.sortable { + display: block !important; + 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; + margin-bottom: 16px !important; + overflow: hidden !important; + position: relative; + transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; +} + +table.dashboard > tbody.sortable:hover { + background: rgba(255, 255, 255, 0.09) !important; + border-color: var(--glass-border-hover) !important; + box-shadow: 0 8px 40px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; +} + +/* visionOS inner glow on dashboard cards */ +table.dashboard > tbody.sortable::before { + content: ''; + position: absolute; + top: 0; + left: 8%; + right: 8%; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent); + pointer-events: none; + z-index: 1; +} + +/* Dashboard card rows — use block to preserve inner layouts */ +table.dashboard > tbody.sortable > tr { + display: block !important; + padding: 6px 14px !important; + border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important; + background: transparent !important; +} + +table.dashboard > tbody.sortable > tr:last-child { + border-bottom: none !important; +} + +/* Dashboard card cells */ +table.dashboard > tbody.sortable > tr > td { + display: block !important; + width: 100% !important; + border: none !important; + padding: 4px 4px !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; +} + +/* Tile header text */ +span.tile-header, +span.tile-header-left, +span.tile-header-right { + color: var(--glass-text-heading) !important; + font-weight: 600 !important; + letter-spacing: 0.3px !important; + font-size: 0.92em !important; +} + +/* Tile header layout */ +span.tile-header { + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + width: 100% !important; +} + +span.tile-header-left { + display: flex !important; + align-items: center !important; + gap: 10px !important; + flex: 1 !important; +} + +/* Stopgap spacers → hidden (card margins handle spacing) */ +table.dashboard > thead.stopgap { + display: none !important; +} + +/* Usage bars inside dashboard cards */ +table.dashboard .usage-disk, +table.dashboard .usage-bar { + background: rgba(255, 255, 255, 0.08) !important; + border-radius: 8px !important; + height: 6px !important; + overflow: hidden !important; +} + +table.dashboard .usage-disk > span, +table.dashboard .usage-bar > span { + border-radius: 8px !important; + background: linear-gradient(90deg, rgba(126, 184, 218, 0.5), var(--glass-accent)) !important; + height: 100% !important; +} + +/* Docker container icons in dashboard */ +table.dashboard img { + border-radius: 6px !important; +} + +/* --- Docker / VM container grid fixes --- */ + +/* Container items in dashboard */ +table.dashboard span.outer { + background: transparent !important; + border: none !important; + border-bottom: none !important; +} + +/* Folder showcase containers */ +table.dashboard div[class*="folder-showcase-outer"] { + display: inline-block !important; + vertical-align: top !important; + border: none !important; + background: transparent !important; +} + +/* Folder row — the main folder summary */ +table.dashboard span.folder-docker { + border: none !important; +} + +/* Remove default dashed/dotted borders from container grid */ +table.dashboard .folder-storage { + border: none !important; + border-top: none !important; +} + +/* Container inner text */ +table.dashboard span.inner { + color: var(--glass-text) !important; +} + +table.dashboard span.inner span.state { + color: var(--glass-text-muted) !important; + font-size: 0.85em !important; +} + +/* Docker/VM container name links — use accent color (clock color) */ +table.dashboard span.inner a, +table.dashboard span.outer a, +table.dashboard td a { + color: var(--glass-accent) !important; +} + +table.dashboard span.inner a:hover, +table.dashboard span.outer a:hover, +table.dashboard td a:hover { + color: var(--glass-accent-hover) !important; +} + + +/* ============================================ + CONTENT AREA offset for sidebar + ============================================ */ +.Theme--sidebar #template { + background: transparent !important; +} + + +/* ============================================ + MISC OVERRIDES + ============================================ */ + +/* Remove harsh backgrounds from content area */ +#template, +.content, +.markdown-textmain { + background: transparent !important; +} + +/* Checkbox / switch styling */ +.switch-button-background { + border-radius: 12px !important; +} + +/* Selection color */ +::selection { + background: rgba(126, 184, 218, 0.3); + color: #fff; +}