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 <noreply@anthropic.com>
This commit is contained in:
Kaloyan Danchev
259
style.css
259
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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user