From e0f8d5da4bcab3590672937a1c8a085f272e6574 Mon Sep 17 00:00:00 2001 From: Kaloyan Danchev Date: Wed, 25 Feb 2026 22:27:49 +0200 Subject: [PATCH] Fix remaining review pass 2 bugs: spacing, toggles, share settings, ribbons, tooltips - Bug #8: Fix Main page tab row spacing by positioning .status icon absolutely - Bug #9: Brighten toggle icons (fa-toggle-off/on) from 0.35 to 0.55 opacity - Bug #11: Merge Share Settings clone-settings and form into single glass card - Bugs #16/#17/#19: Clip Apps ribbon badges within rounded card corners - Bug #20: Add glass styling for ZFS Master tooltipster tooltips Co-Authored-By: Claude Opus 4.6 --- style.css | 259 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 238 insertions(+), 21 deletions(-) diff --git a/style.css b/style.css index cf8a018..0b4c284 100644 --- a/style.css +++ b/style.css @@ -104,6 +104,13 @@ body::before { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important; } +/* Notification bell SVG in header — force white */ +#header #UserProfile svg, +#header svg { + color: rgba(255, 255, 255, 0.9) !important; + fill: currentColor !important; +} + /* ============================================ SIDEBAR: Collapsed (icons only, NO hover expand) @@ -1015,7 +1022,7 @@ table.dashboard > tbody.sortable { border-radius: var(--glass-radius) !important; box-shadow: none !important; margin-bottom: 20px !important; - padding-bottom: 14px !important; + padding-bottom: 16px !important; overflow: hidden !important; position: relative; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; @@ -1105,6 +1112,26 @@ span.tile-header-right .fa:hover { color: rgba(255, 255, 255, 0.85) !important; } +/* Card control icons (cog, film, chevron) — ensure white on all cards + including Plex Streams which uses raw FA icons without .tile-header */ +table.dashboard i.control, +table.dashboard .fa.control { + color: rgba(255, 255, 255, 0.55) !important; + background: transparent !important; + border: none !important; + cursor: pointer !important; +} + +table.dashboard i.control:hover, +table.dashboard .fa.control:hover { + color: rgba(255, 255, 255, 0.85) !important; +} + +/* Plex Streams icon — white */ +table.dashboard i.fa-film.icon { + color: var(--glass-text) !important; +} + /* Tile header layout */ span.tile-header { display: flex !important; @@ -1178,15 +1205,11 @@ table.dashboard .usage-bar > span:last-child { 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 rows: consistent height so borders don't clip bars + Scoped to rows containing usage bars (processor/memory cards only) */ +table.dashboard > tbody.sortable > tr > td > .usage-disk, +table.dashboard > tbody.sortable > tr > td > span > .usage-disk { + margin: 4px 0 !important; } /* Dashboard CPU show/hide link — parent flex container needs full width */ @@ -1215,6 +1238,30 @@ table.dashboard img { border-radius: 6px !important; } +/* Dashboard selects — compact height (global select gets 8px 12px padding, too tall for cards) */ +table.dashboard select { + padding: 4px 8px !important; + font-size: 12px !important; + border-radius: 8px !important; +} + +/* Dashboard container status text — tighter spacing to container name */ +#docker_view span.inner, +#vm_view span.inner { + line-height: 1.3 !important; +} + +#docker_view .folder-appname-docker, +#docker_view span.appname { + margin-bottom: 0 !important; +} + +#docker_view span.state, +#vm_view span.state { + font-size: 0.8em !important; + margin-top: 0 !important; +} + /* --- Docker / VM container grid fixes --- */ /* Container items in dashboard */ @@ -1288,6 +1335,7 @@ table.dashboard span.appname a:hover { /* CPU chart — force block display (inline style sets table-row, breaking layout) */ #cpu_chart { display: block !important; + padding-bottom: 8px !important; } /* CPU chart canvas — invert for dark background, block to prevent inline offset */ @@ -1298,10 +1346,12 @@ table.dashboard span.appname a:hover { #cpu_chart td { width: 100% !important; + padding-bottom: 4px !important; } #cpu_chart canvas { width: 100% !important; + display: block !important; } /* System donut charts — thinner ring with opaque center */ @@ -1401,6 +1451,23 @@ nav.tabs { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; + position: relative !important; +} + +/* Move status icon (disk I/O toggle) inline with tabs instead of wrapping to new row */ +nav.tabs .status { + position: absolute !important; + right: 0 !important; + top: 6px !important; + margin: 0 !important; +} + +nav.tabs .status a { + color: var(--glass-text-muted) !important; +} + +nav.tabs .status a:hover { + color: var(--glass-text) !important; } nav.tabs button { @@ -1766,11 +1833,21 @@ img.folder-img-docker { filter: brightness(0) invert(1) !important; } -/* Folder dropdown button */ +/* Folder dropdown button — small circle with chevron */ button[class*="dropDown-"] { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; color: var(--glass-text-muted) !important; + width: 28px !important; + height: 28px !important; + min-width: 28px !important; + padding: 0 !important; + border-radius: 50% !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + vertical-align: middle !important; + font-size: 12px !important; } button[class*="dropDown-"]:hover { @@ -1779,6 +1856,27 @@ button[class*="dropDown-"]:hover { color: var(--glass-text) !important; } +/* Docker autostart column — center switch vertically */ +td.folder-autostart, +td[class*="autostart"] { + text-align: center !important; + vertical-align: middle !important; +} + +td.folder-autostart .switch-button-background, +td[class*="autostart"] .switch-button-background { + margin: 0 auto !important; +} + +/* Switch button labels (Basic View / Advanced View, ON/OFF) — center */ +.switch-button-label { + display: block !important; + text-align: center !important; + font-size: 11px !important; + color: var(--glass-text-muted) !important; + margin-top: 2px !important; +} + /* ============================================ MISC INNER PAGE ELEMENTS @@ -1913,6 +2011,11 @@ span.dfm_filter > i.fa-filter { span.dfm_filter > input.dfm_filter { padding: 5px 12px 5px 30px !important; + color: #fff !important; +} + +span.dfm_filter > input.dfm_filter::placeholder { + color: rgba(255, 255, 255, 0.4) !important; } /* File manager toggle (time/size) */ @@ -2110,12 +2213,17 @@ a.ca_categories { color: var(--glass-text-muted) !important; } -/* Card description fade-out gradient — match glass bg */ +/* Card description fade-out gradient — transparent instead of dark */ .cardDesc::after { - background: linear-gradient(to right, - transparent 0%, - rgba(255, 255, 255, 0.03) 50%, - rgba(30, 30, 40, 0.6) 100%) !important; + background: transparent !important; + display: none !important; +} + +/* Card description — allow text to wrap and ellipsis naturally */ +.cardDesc { + overflow: hidden !important; + text-overflow: ellipsis !important; + padding-bottom: 4px !important; } /* --- Buttons (caButton) --- */ @@ -2680,13 +2788,12 @@ table.tablesorter.indexer tbody tr:hover { overflow: visible !important; } -/* Docker #1: folder-preview wrapper has opaque glass bg. - Make it more subtle/transparent so container items - don't appear in a "tab-like" wrapper. */ +/* Docker #1: folder-preview wrapper — nearly invisible so + container items don't appear in a "tab-like" wrapper. */ .folder-preview, div[class*="folder-preview"] { - background: rgba(255, 255, 255, 0.03) !important; - border: 1px solid rgba(255, 255, 255, 0.06) !important; + background: transparent !important; + border: 1px solid rgba(255, 255, 255, 0.04) !important; border-radius: 10px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; @@ -2743,3 +2850,113 @@ td.folder-storage { border-radius: var(--glass-radius) !important; margin-bottom: 16px !important; } + +/* ===== Bug #9: Toggle icon visibility (Shares Browse, etc.) ===== */ +i.fa.fa-toggle-off, +i.fa.fa-toggle-on { + color: var(--glass-text-muted) !important; + font-size: 18px !important; + cursor: pointer !important; + transition: color 0.2s ease !important; +} + +i.fa.fa-toggle-on { + color: var(--glass-accent) !important; +} + +i.fa.fa-toggle-off:hover, +i.fa.fa-toggle-on:hover { + color: var(--glass-text) !important; +} + +/* ===== Bug #11: Share Settings — merge two glass cards into one ===== */ +div.relative:has(> div.clone-settings) { + 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; + padding: 16px !important; + margin-bottom: 16px !important; + overflow: hidden !important; +} + +#displaybox div.relative:has(> div.clone-settings) > div.clone-settings { + background: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + border: none !important; + border-radius: 0 !important; + border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; + margin: 0 0 16px !important; + padding: 0 0 16px !important; +} + +#displaybox div.relative:has(> div.clone-settings) > form { + background: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + border: none !important; + border-radius: 0 !important; + margin: 0 !important; + padding: 0 !important; +} + +/* ===== Bugs #16/#17/#19: Apps ribbon badge clipping ===== */ +div:has(> [class*="CardBackground"]) { + position: relative !important; + overflow: hidden !important; + border-radius: 16px !important; +} + +.installedCardBackground, +.betaCardBackground, +.officialCardBackground, +.warningCardBackground, +.deprecatedCardBackground, +.greenCardBackground, +.limetechCardBackground { + position: absolute !important; + top: 0 !important; + left: 0 !important; + z-index: 1 !important; +} + +/* ===== Bug #20: ZFS Master tooltipster glass styling ===== */ +.tooltipster-base, +.tooltipster-box, +.tooltipster-sidetip .tooltipster-box { + 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; +} + +.tooltipster-content, +.tooltipster-sidetip .tooltipster-content { + color: var(--glass-text) !important; + font-size: 12px !important; + padding: 6px 12px !important; +} + +.tooltipster-arrow-border, +.tooltipster-arrow-background { + border-color: transparent !important; +} + +.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background { + border-top-color: rgba(255, 255, 255, 0.10) !important; +} + +.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background { + border-bottom-color: rgba(255, 255, 255, 0.10) !important; +} + +.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background { + border-left-color: rgba(255, 255, 255, 0.10) !important; +} + +.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background { + border-right-color: rgba(255, 255, 255, 0.10) !important; +}