Dashboard visual fixes round 3: CPU bars, donut, vertical bars, Docker text
- Fix CPU bars: specificity override (#displaybox table.dashboard) for thin 10px color-coded bars (green/orange/red) filling full card width - Fix CPU chart: force full-width display on #cpu_chart td and canvas - Fix Docker text: force white color on all #docker_view spans and links - Fix System donut: remove saturate/brightness filter, thinner ring (78%), fully opaque center background - Add vertical pill bars for Array/Cache/Unassigned disk utilization with JS module to convert horizontal bars to 28x50px vertical pills with % text inside, MutationObserver for dynamic updates - Add legend color JS module to fix invisible System card legend circles with inline !important colors matching recolored pie segments Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kaloyan Danchev
339
style.css
339
style.css
@@ -49,6 +49,10 @@
|
||||
/* ============================================
|
||||
BACKGROUND: Mountain Wallpaper
|
||||
============================================ */
|
||||
html {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0a0a0f !important;
|
||||
background-image: url('/custom/wallpaper.jpg') !important;
|
||||
@@ -185,13 +189,14 @@ 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;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
border-radius: 50% !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;
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
html.sidebar-expanded #sidebar-toggle-btn svg {
|
||||
@@ -323,6 +328,7 @@ html.sidebar-expanded #sidebar-toggle-btn svg {
|
||||
.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; }
|
||||
.Theme--sidebar .nav-item.LockButton.is-locked a:before { content: "\f023" !important; }
|
||||
|
||||
/* --- EXPANDED SIDEBAR ---
|
||||
Compound selectors: both classes on <html> */
|
||||
@@ -382,6 +388,7 @@ html.sidebar-expanded.Theme--sidebar .nav-tile.right .nav-item a {
|
||||
}
|
||||
|
||||
/* --- Content area shifts for sidebar (push, not overlap) --- */
|
||||
#header,
|
||||
#displaybox,
|
||||
#footer,
|
||||
#copyright {
|
||||
@@ -389,6 +396,7 @@ 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 {
|
||||
@@ -943,6 +951,18 @@ table.dashboard {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
/* Ensure no dark backgrounds between dashboard cards */
|
||||
table.dashboard > tbody:not(.sortable),
|
||||
table.dashboard > thead {
|
||||
background: transparent !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Hide colgroup (not needed with block layout) */
|
||||
@@ -960,7 +980,7 @@ table.dashboard > tbody.sortable {
|
||||
border-radius: var(--glass-radius) !important;
|
||||
box-shadow: var(--glass-shadow) !important;
|
||||
margin-bottom: 20px !important;
|
||||
padding-bottom: 8px !important;
|
||||
padding-bottom: 14px !important;
|
||||
overflow: hidden !important;
|
||||
position: relative;
|
||||
transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
|
||||
@@ -1041,6 +1061,44 @@ span.tile-header-left {
|
||||
flex: 1 !important;
|
||||
}
|
||||
|
||||
/* Dashboard card control icons — transparent background, white only */
|
||||
span.tile-header-right > * {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
box-shadow: none !important;
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
font-size: 2rem !important;
|
||||
padding: 0 !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
span.tile-header-right > *:hover {
|
||||
color: rgba(255, 255, 255, 0.95) !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Nested control icons (gear, chevron) inside tile-header-right-controls */
|
||||
span.tile-header-right .control,
|
||||
span.tile-header-right-controls a {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
box-shadow: none !important;
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
font-size: 2rem !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
span.tile-header-right .control:hover,
|
||||
span.tile-header-right-controls a:hover {
|
||||
color: rgba(255, 255, 255, 0.95) !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Stopgap spacers → hidden (card margins handle spacing) */
|
||||
table.dashboard > thead.stopgap {
|
||||
display: none !important;
|
||||
@@ -1051,7 +1109,8 @@ table.dashboard .usage-disk,
|
||||
table.dashboard .usage-bar {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
border-radius: 8px !important;
|
||||
height: 6px !important;
|
||||
height: 8px !important;
|
||||
margin: 6px 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
@@ -1062,6 +1121,113 @@ table.dashboard .usage-bar > span {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
/* --- Dashboard CPU bars — override inner-page pill style (specificity 1-1-1 > 1-1-0) --- */
|
||||
#displaybox table.dashboard .usage-disk {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
height: 10px !important;
|
||||
min-width: unset !important;
|
||||
border-radius: 5px !important;
|
||||
margin: 4px 0 !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
#displaybox table.dashboard .usage-disk > span:first-child {
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
height: 100% !important;
|
||||
display: block !important;
|
||||
border-radius: 5px !important;
|
||||
}
|
||||
|
||||
/* Color-coded CPU bar fills */
|
||||
#displaybox table.dashboard .usage-disk > span.greenbar {
|
||||
background: linear-gradient(90deg, rgba(74, 222, 128, 0.6), #4ade80) !important;
|
||||
}
|
||||
|
||||
#displaybox table.dashboard .usage-disk > span.orangebar {
|
||||
background: linear-gradient(90deg, rgba(245, 166, 35, 0.6), rgb(245, 166, 35)) !important;
|
||||
}
|
||||
|
||||
#displaybox table.dashboard .usage-disk > span.redbar {
|
||||
background: linear-gradient(90deg, rgba(231, 76, 60, 0.6), rgb(231, 76, 60)) !important;
|
||||
}
|
||||
|
||||
/* Hide empty pill label text inside dashboard bars */
|
||||
#displaybox table.dashboard .usage-disk > span:last-child {
|
||||
font-size: 0 !important;
|
||||
padding: 0 !important;
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
/* --- Array/Cache/Unassigned — Vertical Pill Bars (specificity 1-2-1) --- */
|
||||
#displaybox table.dashboard .usage-disk.vertical-bar {
|
||||
width: 28px !important;
|
||||
height: 50px !important;
|
||||
border-radius: 14px !important;
|
||||
position: relative !important;
|
||||
display: block !important;
|
||||
min-width: unset !important;
|
||||
background: rgba(255, 255, 255, 0.06) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
margin: 0 auto !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* Vertical fill — from bottom */
|
||||
#displaybox table.dashboard .usage-disk.vertical-bar > span:first-child {
|
||||
position: absolute !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
border-radius: 14px !important;
|
||||
top: auto !important;
|
||||
}
|
||||
|
||||
/* Vertical color gradients (bottom to top) */
|
||||
#displaybox table.dashboard .usage-disk.vertical-bar > span.greenbar {
|
||||
background: linear-gradient(0deg, rgba(74, 222, 128, 0.5), #4ade80) !important;
|
||||
}
|
||||
|
||||
#displaybox table.dashboard .usage-disk.vertical-bar > span.orangebar {
|
||||
background: linear-gradient(0deg, rgba(245, 166, 35, 0.5), rgb(245, 166, 35)) !important;
|
||||
}
|
||||
|
||||
#displaybox table.dashboard .usage-disk.vertical-bar > span.redbar {
|
||||
background: linear-gradient(0deg, rgba(231, 76, 60, 0.5), rgb(231, 76, 60)) !important;
|
||||
}
|
||||
|
||||
/* % text inside vertical bar */
|
||||
#displaybox table.dashboard .usage-disk.vertical-bar > span:last-child {
|
||||
position: absolute !important;
|
||||
top: 2px !important;
|
||||
left: 50% !important;
|
||||
transform: translateX(-50%) !important;
|
||||
font-size: 0.65em !important;
|
||||
white-space: nowrap !important;
|
||||
color: white !important;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
|
||||
padding: 0 !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
/* Hide .load text outside vertical bars */
|
||||
#array_list .w18 .load,
|
||||
#pool_list0 .w18 .load,
|
||||
#devs_list .w18 .load {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Center the vertical bar in its cell */
|
||||
#array_list .w18:last-child,
|
||||
#pool_list0 .w18:last-child,
|
||||
#devs_list .w18:last-child {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
/* Docker container icons in dashboard */
|
||||
table.dashboard img {
|
||||
border-radius: 6px !important;
|
||||
@@ -1105,19 +1271,102 @@ table.dashboard span.inner span.state {
|
||||
font-size: 0.85em !important;
|
||||
}
|
||||
|
||||
/* Docker/VM container name links — use accent color (clock color) */
|
||||
/* Docker/VM container name links — use accent color */
|
||||
table.dashboard span.inner a,
|
||||
table.dashboard span.outer a,
|
||||
table.dashboard span.appname a,
|
||||
table.dashboard td a {
|
||||
color: var(--glass-accent) !important;
|
||||
}
|
||||
|
||||
table.dashboard span.inner a:hover,
|
||||
table.dashboard span.outer a:hover,
|
||||
table.dashboard span.appname a:hover,
|
||||
table.dashboard td a:hover {
|
||||
color: var(--glass-accent-hover) !important;
|
||||
}
|
||||
|
||||
/* Docker card — force all text/links to white (FolderView sets blue on some spans) */
|
||||
#docker_view span.inner span,
|
||||
#docker_view span.inner a,
|
||||
#docker_view a {
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
}
|
||||
|
||||
/* --- CPU Chart Canvas — invert grid lines to white --- */
|
||||
#cpuchart {
|
||||
filter: invert(1) hue-rotate(180deg) !important;
|
||||
opacity: 0.85 !important;
|
||||
}
|
||||
|
||||
/* CPU chart row — force full width (TD has no .w26/.w72 spans) */
|
||||
#cpu_chart td {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
padding: 8px 0 !important;
|
||||
}
|
||||
|
||||
#cpu_chart td canvas {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
min-height: 96px !important;
|
||||
}
|
||||
|
||||
/* --- System Card Donut Charts --- */
|
||||
div.pie {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
/* Create donut hole — thinner ring, fully opaque center */
|
||||
div.pie::after {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
width: 78% !important;
|
||||
height: 78% !important;
|
||||
border-radius: 50% !important;
|
||||
background: rgb(15, 15, 25) !important;
|
||||
}
|
||||
|
||||
/* Ensure text labels are above the donut hole */
|
||||
div.pie > span {
|
||||
position: relative !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
/* --- Toggle Switch — Glass Style --- */
|
||||
.switch-button-background {
|
||||
width: 40px !important;
|
||||
height: 22px !important;
|
||||
background: rgba(255, 255, 255, 0.10) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15) !important;
|
||||
border-radius: 11px !important;
|
||||
position: relative !important;
|
||||
display: inline-block !important;
|
||||
vertical-align: middle !important;
|
||||
cursor: pointer !important;
|
||||
transition: background 0.2s ease !important;
|
||||
}
|
||||
|
||||
.switch-button-background.checked {
|
||||
background: rgba(126, 184, 218, 0.3) !important;
|
||||
border-color: rgba(126, 184, 218, 0.4) !important;
|
||||
}
|
||||
|
||||
.switch-button-button {
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
border-radius: 50% !important;
|
||||
background: rgba(255, 255, 255, 0.6) !important;
|
||||
position: absolute !important;
|
||||
top: 50% !important;
|
||||
transform: translateY(-50%) !important;
|
||||
transition: left 0.2s ease !important;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
INNER PAGES — Content Glass Wrapper
|
||||
@@ -1151,7 +1400,7 @@ html.sidebar-expanded.Theme--sidebar #displaybox {
|
||||
nav.tabs {
|
||||
background: transparent !important;
|
||||
padding: 0 0 12px !important;
|
||||
margin-bottom: 16px !important;
|
||||
margin-bottom: 8px !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
|
||||
display: flex !important;
|
||||
gap: 6px !important;
|
||||
@@ -1169,6 +1418,7 @@ nav.tabs button {
|
||||
backdrop-filter: blur(10px) !important;
|
||||
-webkit-backdrop-filter: blur(10px) !important;
|
||||
transition: all 0.2s ease !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
nav.tabs button:hover {
|
||||
@@ -1260,11 +1510,23 @@ div.tab[aria-selected="true"] {
|
||||
|
||||
#displaybox table:not(.dashboard) tbody td {
|
||||
color: var(--glass-text) !important;
|
||||
padding: 10px 16px !important;
|
||||
padding: 14px 16px !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Header rows using <td> instead of <th> (Main/Pool/ZFS pages) */
|
||||
#displaybox table:not(.dashboard) thead td,
|
||||
#displaybox table:not(.dashboard) tbody tr:first-child td {
|
||||
color: var(--glass-text-muted) !important;
|
||||
font-weight: 500 !important;
|
||||
text-transform: uppercase !important;
|
||||
font-size: 0.75em !important;
|
||||
letter-spacing: 0.5px !important;
|
||||
padding: 12px 16px !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
}
|
||||
|
||||
#displaybox table:not(.dashboard) tbody tr:hover {
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
}
|
||||
@@ -1273,6 +1535,60 @@ div.tab[aria-selected="true"] {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
/* White icons inside tables (sort arrows, action icons, snapshots) */
|
||||
#displaybox table i.fa,
|
||||
#displaybox table .fa,
|
||||
#displaybox table i[class*="icon-"] {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
}
|
||||
|
||||
/* Toggle icon between tabs and table */
|
||||
i.toggle.fa {
|
||||
color: rgba(255, 255, 255, 0.5) !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
/* Usage bars on inner pages — larger pill-style with separated text */
|
||||
#displaybox .usage-disk {
|
||||
height: 26px !important;
|
||||
min-width: 80px !important;
|
||||
border-radius: 13px !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
#displaybox .usage-disk > span.orangebar,
|
||||
#displaybox .usage-disk > span.greenbar {
|
||||
border-radius: 13px !important;
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
#displaybox .usage-disk > span:last-child {
|
||||
position: relative !important;
|
||||
z-index: 1 !important;
|
||||
font-size: 0.8em !important;
|
||||
font-weight: 500 !important;
|
||||
padding: 0 10px !important;
|
||||
white-space: nowrap !important;
|
||||
color: var(--glass-text) !important;
|
||||
}
|
||||
|
||||
/* Tooltip styling (custom tooltips) */
|
||||
.tipsy .tipsy-inner {
|
||||
background: rgba(15, 15, 25, 0.85) !important;
|
||||
backdrop-filter: blur(30px) !important;
|
||||
-webkit-backdrop-filter: blur(30px) !important;
|
||||
border: 1px solid var(--glass-border) !important;
|
||||
border-radius: 8px !important;
|
||||
color: var(--glass-text) !important;
|
||||
font-size: 12px !important;
|
||||
padding: 6px 10px !important;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
SETTINGS PAGES — Icon Grid
|
||||
@@ -1623,11 +1939,6 @@ div.clone-settings {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Checkbox / switch styling */
|
||||
.switch-button-background {
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
/* Selection color */
|
||||
::selection {
|
||||
background: rgba(126, 184, 218, 0.3);
|
||||
|
||||
Reference in New Issue
Block a user