diff --git a/style.css b/style.css index 325abde..cf8a018 100644 --- a/style.css +++ b/style.css @@ -100,7 +100,8 @@ body::before { #header i, #header .fa, #header [class*="icon"] { - color: rgba(50, 55, 65, 0.85) !important; + color: rgba(255, 255, 255, 0.9) !important; + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important; } @@ -387,7 +388,6 @@ html.sidebar-expanded.Theme--sidebar .nav-tile.right .nav-item a { } /* --- Content area shifts for sidebar (push, not overlap) --- */ -#header, #displaybox, #footer, #copyright { @@ -395,13 +395,22 @@ html.sidebar-expanded.Theme--sidebar .nav-tile.right .nav-item a { transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } -html.sidebar-expanded.Theme--sidebar #header, html.sidebar-expanded.Theme--sidebar #displaybox, html.sidebar-expanded.Theme--sidebar #footer, html.sidebar-expanded.Theme--sidebar #copyright { margin-left: var(--sidebar-expanded) !important; } +/* Header already has padding-left from Unraid — override it instead of adding margin */ +#header { + padding-left: var(--sidebar-collapsed) !important; + transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; +} + +html.sidebar-expanded.Theme--sidebar #header { + padding-left: var(--sidebar-expanded) !important; +} + /* --- Search: click-triggered centered popup overlay --- */ .Theme--sidebar .nav-item.gui_search { overflow: visible !important; @@ -623,9 +632,14 @@ table thead th { } table tbody tr { + background: transparent !important; transition: background 0.2s ease !important; } +table tbody tr:nth-child(2n) { + background: rgba(255, 255, 255, 0.02) !important; +} + table tbody tr:hover { background: rgba(255, 255, 255, 0.03) !important; } @@ -847,14 +861,38 @@ div.shade-black { .usage-disk, .usage-bar { background: rgba(255, 255, 255, 0.06) !important; - border-radius: 8px !important; + border-radius: 12px !important; overflow: hidden !important; + height: 24px !important; + position: relative !important; } -.usage-disk > span, -.usage-bar > span { - border-radius: 8px !important; +.usage-disk > span:first-child, +.usage-bar > span:first-child { + border-radius: 12px !important; background: linear-gradient(90deg, rgba(126, 184, 218, 0.6), var(--glass-accent)) !important; + height: 100% !important; + display: block !important; +} + +/* Value text overlaid inside the bar */ +.usage-disk > span:last-child, +.usage-bar > span:last-child { + position: absolute !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + display: flex !important; + align-items: center !important; + justify-content: flex-start !important; + padding-left: 8px !important; + font-size: 11px !important; + font-weight: 600 !important; + color: #fff !important; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important; + z-index: 1 !important; + pointer-events: none !important; } @@ -904,6 +942,7 @@ a:hover { 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; + overflow: hidden !important; } @@ -919,6 +958,7 @@ div.frame:has(> div.grid) { -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; + overflow: visible !important; } div.frame:has(> div.grid)::before { @@ -936,11 +976,11 @@ div.grid { gap: 24px !important; } -/* Tile columns — transparent + prevent overflow */ +/* Tile columns — transparent */ div.tile { background: transparent !important; min-width: 0 !important; - overflow: hidden !important; + overflow: visible !important; } /* Dashboard tables → block layout, transparent, no stacking blur */ @@ -973,7 +1013,7 @@ table.dashboard > tbody.sortable { -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; + box-shadow: none !important; margin-bottom: 20px !important; padding-bottom: 14px !important; overflow: hidden !important; @@ -984,7 +1024,7 @@ table.dashboard > tbody.sortable { 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; + box-shadow: none !important; } /* visionOS inner glow on dashboard cards */ @@ -1089,47 +1129,87 @@ table.dashboard > thead.stopgap { table.dashboard .usage-disk, table.dashboard .usage-bar { background: rgba(255, 255, 255, 0.08) !important; - border-radius: 8px !important; - height: 8px !important; + border-radius: 12px !important; + height: 24px !important; margin: 6px 0 !important; overflow: hidden !important; + position: relative !important; } -table.dashboard .usage-disk > span, -table.dashboard .usage-bar > span { - border-radius: 8px !important; +table.dashboard .usage-disk > span:first-child, +table.dashboard .usage-bar > span:first-child { + border-radius: 12px !important; background: linear-gradient(90deg, rgba(126, 184, 218, 0.5), var(--glass-accent)) !important; height: 100% !important; + display: block !important; } -/* CPU bars — thin color-coded bars (higher specificity) */ -#displaybox table.dashboard .usage-disk { - height: 10px !important; - border-radius: 5px !important; +/* Dashboard bar inner spans: normalize height/line-height */ +.Theme--sidebar .usage-disk.sys > span { + line-height: normal !important; + height: 24px !important; } -#displaybox table.dashboard .usage-disk > span { - border-radius: 5px !important; +/* Dashboard: hide the external span.load (Unraid JS fills the bar's inner span) */ +table.dashboard span.head_bar > .load, +table.dashboard span.w72 > .load, +table.dashboard span.w36 > .load, +table.dashboard span.w18 > .load { + display: none !important; } -#displaybox table.dashboard .usage-disk.greenbar > span { +/* Dashboard bar value text: left-aligned, vertically centered (inside bar) */ +table.dashboard .usage-disk > span:last-child, +table.dashboard .usage-bar > span:last-child { + position: absolute !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + display: flex !important; + align-items: center !important; + justify-content: flex-start !important; + padding-left: 8px !important; + font-size: 11px !important; + font-weight: 600 !important; + color: #fff !important; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important; + z-index: 1 !important; + pointer-events: none !important; +} + +/* Dashboard CPU rows: consistent height so borders don't clip bars */ +table.dashboard > tbody.sortable > tr { + height: 32px !important; +} + +/* Dashboard CPU core labels + bar wrappers: matching line-height */ +table.dashboard > tbody.sortable > tr > td { + line-height: 36px !important; + vertical-align: middle !important; +} + +/* Dashboard CPU show/hide link — parent flex container needs full width */ +table.dashboard td > span.flex { + width: 100% !important; +} + +/* Color variants for dashboard bars (class is on the fill span) */ +table.dashboard .usage-disk > span.greenbar, +table.dashboard .usage-bar > span.greenbar { background: linear-gradient(90deg, #22c55e, #4ade80) !important; } -#displaybox table.dashboard .usage-disk.orangebar > span { +table.dashboard .usage-disk > span.orangebar, +table.dashboard .usage-bar > span.orangebar { background: linear-gradient(90deg, #f97316, #fb923c) !important; } -#displaybox table.dashboard .usage-disk.redbar > span { +table.dashboard .usage-disk > span.redbar, +table.dashboard .usage-bar > span.redbar { background: linear-gradient(90deg, #ef4444, #f87171) !important; } -/* Hide empty pill label text inside CPU bars */ -#displaybox table.dashboard .usage-disk > span { - font-size: 0 !important; - color: transparent !important; -} - /* Docker container icons in dashboard */ table.dashboard img { border-radius: 6px !important; @@ -1279,7 +1359,8 @@ div.pie div { } .switch-button-background.checked .switch-button-button { - left: calc(100% - 20px) !important; + left: calc(100% - 21px) !important; + top: calc(50% - 0.5px) !important; } @@ -1400,18 +1481,21 @@ div.tab[aria-selected="true"] { -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; + box-shadow: none !important; overflow: hidden !important; border-collapse: separate !important; border-spacing: 0 !important; } /* Table header row */ -#displaybox table:not(.dashboard) thead { +#displaybox table:not(.dashboard) thead, +#displaybox table:not(.dashboard) thead tr { background: rgba(255, 255, 255, 0.04) !important; + background-color: rgba(255, 255, 255, 0.04) !important; } -#displaybox table:not(.dashboard) thead th { +#displaybox table:not(.dashboard) thead th, +#displaybox table:not(.dashboard) thead td { color: var(--glass-text-muted) !important; font-weight: 500 !important; text-transform: uppercase !important; @@ -1429,6 +1513,14 @@ div.tab[aria-selected="true"] { background: transparent !important; } +#displaybox table:not(.dashboard) tbody tr { + background: transparent !important; +} + +#displaybox table:not(.dashboard) tbody tr:nth-child(2n) { + background: rgba(255, 255, 255, 0.02) !important; +} + #displaybox table:not(.dashboard) tbody tr:hover { background: rgba(255, 255, 255, 0.04) !important; } @@ -1575,17 +1667,27 @@ table.tablesorter thead { border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important; } -/* Docker/VM table rows — override Unraid dark theme background */ -table.tablesorter tbody tr.sortable { +/* All tablesorter rows — override Unraid dark theme --dynamix-tablesorter-* variables */ +table.tablesorter tbody tr { background: transparent !important; + background-color: transparent !important; } -table.tablesorter tbody tr.sortable:nth-child(even) { +table.tablesorter tbody tr:nth-child(2n) { background: rgba(255, 255, 255, 0.02) !important; + background-color: rgba(255, 255, 255, 0.02) !important; } +table.tablesorter tbody tr:hover, table.tablesorter tbody tr.sortable:hover { background: rgba(255, 255, 255, 0.05) !important; + background-color: rgba(255, 255, 255, 0.05) !important; +} + +/* Tablesorter thead — override opaque header backgrounds */ +table.tablesorter thead tr { + background: rgba(255, 255, 255, 0.04) !important; + background-color: rgba(255, 255, 255, 0.04) !important; } @@ -1709,9 +1811,22 @@ button[disabled] { /* Checkbox and radio — subtle glass */ input[type="checkbox"], input[type="radio"] { - border: 1px solid rgba(255, 255, 255, 0.20) !important; + -webkit-appearance: none !important; + appearance: none !important; + width: 16px !important; + min-width: 16px !important; + height: 16px !important; + min-height: 16px !important; + padding: 0 !important; + margin: 0 8px 0 0 !important; + box-sizing: border-box !important; + border: 1px solid rgba(255, 255, 255, 0.25) !important; background: rgba(255, 255, 255, 0.06) !important; border-radius: 4px !important; + cursor: pointer !important; + vertical-align: middle !important; + position: relative !important; + flex-shrink: 0 !important; } input[type="checkbox"]:checked, @@ -1720,15 +1835,99 @@ input[type="radio"]:checked { border-color: var(--glass-accent) !important; } -/* Tooltip / title popups */ +input[type="checkbox"]:checked::after { + content: '✓' !important; + position: absolute !important; + top: 50% !important; + left: 50% !important; + transform: translate(-50%, -50%) !important; + font-size: 12px !important; + color: #fff !important; + line-height: 1 !important; +} + +input[type="radio"] { + border-radius: 50% !important; +} + +input[type="radio"]:checked::after { + content: '' !important; + position: absolute !important; + top: 50% !important; + left: 50% !important; + transform: translate(-50%, -50%) !important; + width: 6px !important; + height: 6px !important; + background: #fff !important; + border-radius: 50% !important; +} + +/* Disabled buttons — slightly more visible */ +input[type="button"]:disabled, +button:disabled { + opacity: 0.65 !important; +} + +/* Tooltip / title popups — glass style */ .tooltip, -[data-tooltip] { +[data-tooltip], +.ui-tooltip, +.tippy-box, +a.info > span { 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; + padding: 6px 12px !important; +} + +.ui-tooltip-content { + color: var(--glass-text) !important; +} + +/* Grey-text icons (lock, etc.) — lighter for dark background */ +.grey-text, +.gray-text { + color: rgba(255, 255, 255, 0.45) !important; +} + +/* File manager filter wrapper */ +span.dfm_filter { + display: inline-flex !important; + align-items: center !important; + position: relative !important; + margin-right: 12px !important; +} + +span.dfm_filter > i.fa-filter { + position: absolute !important; + left: 10px !important; + top: 50% !important; + transform: translateY(-50%) !important; + pointer-events: none !important; + font-size: 14px !important; + color: rgba(255, 255, 255, 0.5) !important; +} + +span.dfm_filter > input.dfm_filter { + padding: 5px 12px 5px 30px !important; +} + +/* File manager toggle (time/size) */ +i.fa-toggle-off, +i.fa-toggle-on { + font-size: 20px !important; + cursor: pointer !important; + vertical-align: middle !important; + transition: color 0.2s ease !important; +} +i.fa-toggle-off { + color: rgba(255, 255, 255, 0.35) !important; +} +i.fa-toggle-on { + color: var(--glass-accent) !important; } /* Notification bar (parity check etc.) */ @@ -2232,6 +2431,11 @@ table thead td { color: var(--glass-text) !important; } +/* Settings/Tools/Plugins font icons — make white */ +.PanelIcon { + color: #fff !important; +} + /* Settings/Tools section headers (injected by Unraid as spans with inline styles) */ #displaybox .content > span[style], #displaybox .content span[style*="font-size"] { @@ -2243,6 +2447,18 @@ table thead td { BUG FIXES — Phase 3: Icon Coloring ============================================ */ +/* Plugin list large FA icons — white */ +#displaybox i.fa.list, +#displaybox i[class*="icon-"].list { + color: #fff !important; +} + +/* Table sorter headers — transparent bg, white text */ +.tablesorter-header-inner { + background: transparent !important; + color: var(--glass-text-muted) !important; +} + /* Settings/Plugins/Tools icon grid: non-FA icons are PNG/SVG . Plugin icons that have selfh.st light SVG replacements get swapped via JS (sidebar.js replacePluginIcons). For others, apply invert filter. @@ -2270,34 +2486,50 @@ table thead td { BUG FIXES — Phase 4: Shadow & Rounding ============================================ */ -/* Soften box-shadow on inner page tables */ -#displaybox table:not(.dashboard) { - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; -} +/* Shadow removed from inner tables — parent glass card handles shadow */ -/* Array Operation page: stacked form sections — - first/middle/last rounding for unified container look. - Unraid uses div.Panel for each section on Array Op. */ -#displaybox div.Panel + div.Panel { - margin-top: -1px !important; - border-top: 1px solid rgba(255, 255, 255, 0.06) !important; -} +/* Array Operation page: unify 4 stacked tables into one glass block. + Tables are: FORM>table, TABLE (direct), FORM>table, FORM>table. + Hidden P elements sit between them in the DOM. */ -#displaybox div.Panel:not(:first-of-type):not(:last-of-type) { +/* All ArrayOp tables: remove individual rounding, collapse spacing */ +#displaybox table.ArrayOperation-Table { border-radius: 0 !important; + margin-top: -1px !important; + margin-bottom: 0 !important; } -#displaybox div.Panel:not(:first-of-type):not(:last-of-type)::before { - display: none !important; +/* Form wrappers: remove their margin so tables sit flush */ +#displaybox .content > form:has(> table.ArrayOperation-Table) { + background: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + border: none !important; + border-radius: 0 !important; + box-shadow: none !important; + padding: 0 !important; + margin-bottom: 0 !important; } -#displaybox div.Panel + div.Panel:last-of-type { +/* Direct table child (Spin Up/Down): also remove bottom margin */ +#displaybox .content > table.ArrayOperation-Table { + margin-bottom: 0 !important; +} + +/* First table (inside first form): round top corners, restore top margin */ +#displaybox .content > form:first-of-type > table.ArrayOperation-Table { + border-radius: var(--glass-radius) var(--glass-radius) 0 0 !important; + margin-top: 0 !important; +} + +/* Last table (inside last form): round bottom corners */ +#displaybox .content > form:last-of-type > table.ArrayOperation-Table { border-radius: 0 0 var(--glass-radius) var(--glass-radius) !important; } -#displaybox div.Panel:first-of-type:has(+ div.Panel) { - border-radius: var(--glass-radius) var(--glass-radius) 0 0 !important; - margin-bottom: 0 !important; +/* Hide cell borders inside ArrayOp tables */ +#displaybox table.ArrayOperation-Table td { + border-color: transparent !important; } @@ -2305,32 +2537,27 @@ table thead td { BUG FIXES — Phase 5: Table & Form Styling ============================================ */ -/* Shares Browse page: file browser table uses a darker style. - Target the browse page specifically via URL-based class or #dir_list */ -#dir_list, -table.file_browser, -#displaybox table.browse_table, -#displaybox div[id*="browse"] table { +/* Shares Browse page: file browser uses table.indexer.tablesorter. + Also covers any general tablesorter table with glass styling. */ +table.tablesorter.indexer, +#displaybox table.tablesorter.indexer { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid var(--glass-border) !important; border-radius: var(--glass-radius) !important; + overflow: hidden !important; } -#dir_list thead td, -#dir_list thead th, -table.file_browser thead td, -table.file_browser thead th { +table.tablesorter.indexer thead td, +table.tablesorter.indexer thead th { background: rgba(255, 255, 255, 0.04) !important; color: var(--glass-text-muted) !important; } -#dir_list tbody tr:nth-child(even), -table.file_browser tbody tr:nth-child(even) { +table.tablesorter.indexer tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03) !important; } -#dir_list tbody tr:hover, -table.file_browser tbody tr:hover { +table.tablesorter.indexer tbody tr:hover { background: rgba(255, 255, 255, 0.05) !important; } @@ -2339,7 +2566,7 @@ table.file_browser tbody tr:hover { #displaybox .content > form, #displaybox form[method], #displaybox div.clone-settings, -#displaybox > .content > table:not(.dashboard):not(.tablesorter):not(.disk_status):not(.share_status) { +#displaybox > .content > table:not(.dashboard):not(.tablesorter):not(.disk_status):not(.share_status):not(.ArrayOperation-Table) { 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; @@ -2362,34 +2589,58 @@ table.file_browser tbody tr:hover { BUG FIXES — Phase 6: Bars & Button Visibility ============================================ */ -/* Main page usage bars: match dashboard style (thin, rounded, gradient) */ +/* Main page usage bars: 24px with value text inside */ #displaybox table:not(.dashboard) .usage-disk, #displaybox table:not(.dashboard) .usage-bar { - height: 8px !important; - border-radius: 8px !important; + height: 24px !important; + border-radius: 12px !important; background: rgba(255, 255, 255, 0.08) !important; overflow: hidden !important; margin: 4px 0 !important; + position: relative !important; } -#displaybox table:not(.dashboard) .usage-disk > span, -#displaybox table:not(.dashboard) .usage-bar > span { +#displaybox table:not(.dashboard) .usage-disk > span:first-child, +#displaybox table:not(.dashboard) .usage-bar > span:first-child { height: 100% !important; - border-radius: 8px !important; + border-radius: 12px !important; background: linear-gradient(90deg, rgba(126, 184, 218, 0.5), var(--glass-accent)) !important; - font-size: 0 !important; + display: block !important; } -/* Color-coded bars on Main page */ -#displaybox table:not(.dashboard) .usage-disk.greenbar > span { +/* Value text overlaid inside the bar */ +#displaybox table:not(.dashboard) .usage-disk > span:last-child, +#displaybox table:not(.dashboard) .usage-bar > span:last-child { + position: absolute !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + display: flex !important; + align-items: center !important; + justify-content: flex-start !important; + padding-left: 8px !important; + font-size: 11px !important; + font-weight: 600 !important; + color: #fff !important; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important; + z-index: 1 !important; + pointer-events: none !important; +} + +/* Color-coded bars on Main page (class is on the fill span) */ +#displaybox table:not(.dashboard) .usage-disk > span.greenbar, +#displaybox table:not(.dashboard) .usage-bar > span.greenbar { background: linear-gradient(90deg, #22c55e, #4ade80) !important; } -#displaybox table:not(.dashboard) .usage-disk.orangebar > span { +#displaybox table:not(.dashboard) .usage-disk > span.orangebar, +#displaybox table:not(.dashboard) .usage-bar > span.orangebar { background: linear-gradient(90deg, #f97316, #fb923c) !important; } -#displaybox table:not(.dashboard) .usage-disk.redbar > span { +#displaybox table:not(.dashboard) .usage-disk > span.redbar, +#displaybox table:not(.dashboard) .usage-bar > span.redbar { background: linear-gradient(90deg, #ef4444, #f87171) !important; }