Revert "Dashboard visual fixes round 3: CPU bars, donut, vertical bars, Docker text"
This reverts commit c9932f275a.
This commit is contained in:
Kaloyan Danchev
247
sidebar.js
247
sidebar.js
@@ -38,35 +38,10 @@
|
|||||||
menu.appendChild(btn);
|
menu.appendChild(btn);
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- Lock button icon toggle (locked vs unlocked) ---
|
|
||||||
initLockButton();
|
|
||||||
|
|
||||||
// --- Search overlay (delayed to wait for search plugin init) ---
|
// --- Search overlay (delayed to wait for search plugin init) ---
|
||||||
setTimeout(initSearchOverlay, 800);
|
setTimeout(initSearchOverlay, 800);
|
||||||
}
|
}
|
||||||
|
|
||||||
function initLockButton() {
|
|
||||||
var lockItem = document.querySelector('.nav-item.LockButton');
|
|
||||||
if (!lockItem) return;
|
|
||||||
var lockLink = lockItem.querySelector('a');
|
|
||||||
if (!lockLink) return;
|
|
||||||
|
|
||||||
// Set initial state based on title
|
|
||||||
function updateLockState() {
|
|
||||||
var title = lockLink.getAttribute('title') || '';
|
|
||||||
if (title.indexOf('Unlock') === 0) {
|
|
||||||
lockItem.classList.add('is-locked');
|
|
||||||
} else {
|
|
||||||
lockItem.classList.remove('is-locked');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
updateLockState();
|
|
||||||
|
|
||||||
// Watch for title attribute changes (Unraid toggles this on click)
|
|
||||||
var observer = new MutationObserver(function() { updateLockState(); });
|
|
||||||
observer.observe(lockLink, { attributes: true, attributeFilter: ['title'] });
|
|
||||||
}
|
|
||||||
|
|
||||||
function initSearchOverlay() {
|
function initSearchOverlay() {
|
||||||
if (!window.jQuery) return;
|
if (!window.jQuery) return;
|
||||||
|
|
||||||
@@ -344,27 +319,12 @@
|
|||||||
observer.observe(target, { childList: true, subtree: true });
|
observer.observe(target, { childList: true, subtree: true });
|
||||||
}
|
}
|
||||||
|
|
||||||
// Replace Tailscale icon on Dashboard and Settings pages
|
|
||||||
function replaceTailscaleIcon() {
|
|
||||||
var TAILSCALE_SVG = CDN_SVG + '/tailscale-light.svg';
|
|
||||||
// Dashboard: img with alt="Tailscale" inside a card header
|
|
||||||
var imgs = document.querySelectorAll('img[alt="Tailscale"], img[src*="tailscale" i]');
|
|
||||||
imgs.forEach(function(img) {
|
|
||||||
if (img.src !== TAILSCALE_SVG && img.getAttribute('src') !== TAILSCALE_SVG) {
|
|
||||||
img.src = TAILSCALE_SVG;
|
|
||||||
img.removeAttribute('onerror');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize when DOM is ready
|
// Initialize when DOM is ready
|
||||||
function initIcons() {
|
function initIcons() {
|
||||||
// Initial replacement
|
// Initial replacement
|
||||||
setTimeout(replaceIcons, 500);
|
setTimeout(replaceIcons, 500);
|
||||||
setTimeout(replaceTailscaleIcon, 500);
|
|
||||||
// Second pass after FolderView finishes its DOM work
|
// Second pass after FolderView finishes its DOM work
|
||||||
setTimeout(replaceIcons, 2000);
|
setTimeout(replaceIcons, 2000);
|
||||||
setTimeout(replaceTailscaleIcon, 2000);
|
|
||||||
// Start watching for future changes
|
// Start watching for future changes
|
||||||
startObserver();
|
startObserver();
|
||||||
}
|
}
|
||||||
@@ -375,210 +335,3 @@
|
|||||||
initIcons();
|
initIcons();
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// Pie Chart Recoloring — vibrant theme colors for System card
|
|
||||||
// =============================================================
|
|
||||||
(function() {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
// Map Unraid's muted conic-gradient colors → vibrant theme colors
|
|
||||||
var COLOR_MAP = [
|
|
||||||
// gray-blue used portions → theme accent
|
|
||||||
[/rgb\(96,\s*110,\s*127\)/g, 'rgb(126, 184, 218)'],
|
|
||||||
// near-black unused → subtle light
|
|
||||||
[/rgb\(35,\s*37,\s*35\)/g, 'rgba(255, 255, 255, 0.08)'],
|
|
||||||
// muted orange → vibrant orange
|
|
||||||
[/rgb\(215,\s*126,\s*13\)/g, 'rgb(245, 166, 35)'],
|
|
||||||
// muted yellow → vibrant yellow
|
|
||||||
[/rgb\(212,\s*172,\s*13\)/g, 'rgb(241, 196, 15)'],
|
|
||||||
// muted red → vibrant red-coral
|
|
||||||
[/rgb\(205,\s*92,\s*92\)/g, 'rgb(231, 76, 60)'],
|
|
||||||
];
|
|
||||||
|
|
||||||
function recolorPie(pie) {
|
|
||||||
var style = pie.getAttribute('style');
|
|
||||||
if (!style || style.indexOf('conic-gradient') === -1) return;
|
|
||||||
|
|
||||||
var newStyle = style;
|
|
||||||
for (var i = 0; i < COLOR_MAP.length; i++) {
|
|
||||||
newStyle = newStyle.replace(COLOR_MAP[i][0], COLOR_MAP[i][1]);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (newStyle !== style) {
|
|
||||||
pie.setAttribute('style', newStyle);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function recolorAll() {
|
|
||||||
var pies = document.querySelectorAll('div.pie');
|
|
||||||
pies.forEach(recolorPie);
|
|
||||||
}
|
|
||||||
|
|
||||||
function startPieObserver() {
|
|
||||||
var pies = document.querySelectorAll('div.pie');
|
|
||||||
if (pies.length === 0) return;
|
|
||||||
|
|
||||||
var observer = new MutationObserver(function(mutations) {
|
|
||||||
for (var i = 0; i < mutations.length; i++) {
|
|
||||||
if (mutations[i].attributeName === 'style') {
|
|
||||||
recolorPie(mutations[i].target);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
pies.forEach(function(pie) {
|
|
||||||
recolorPie(pie);
|
|
||||||
observer.observe(pie, { attributes: true, attributeFilter: ['style'] });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function initPieCharts() {
|
|
||||||
setTimeout(recolorAll, 1000);
|
|
||||||
setTimeout(startPieObserver, 2000);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (document.readyState === 'loading') {
|
|
||||||
document.addEventListener('DOMContentLoaded', initPieCharts);
|
|
||||||
} else {
|
|
||||||
initPieCharts();
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// Vertical Pill Bars — Array/Cache/Unassigned disk utilization
|
|
||||||
// =============================================================
|
|
||||||
(function() {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
function convertBar(bar) {
|
|
||||||
// Skip bars with no data or already converted
|
|
||||||
if (bar.classList.contains('none') || bar.classList.contains('vertical-bar')) return;
|
|
||||||
|
|
||||||
var fill = bar.querySelector('span:first-child');
|
|
||||||
if (!fill) return;
|
|
||||||
|
|
||||||
// Read width (e.g. "83%") and convert to height
|
|
||||||
var w = fill.style.width;
|
|
||||||
if (w) {
|
|
||||||
fill.style.height = w;
|
|
||||||
fill.style.width = '100%';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Copy % text from sibling .load span into bar's last span
|
|
||||||
var parent = bar.parentElement;
|
|
||||||
if (parent) {
|
|
||||||
var loadSpan = parent.querySelector('.load');
|
|
||||||
var textSpan = bar.querySelector('span:last-child');
|
|
||||||
if (loadSpan && textSpan && textSpan !== fill) {
|
|
||||||
textSpan.textContent = loadSpan.textContent.trim();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
bar.classList.add('vertical-bar');
|
|
||||||
}
|
|
||||||
|
|
||||||
function convertAllBars(container) {
|
|
||||||
var bars = container.querySelectorAll('.usage-disk');
|
|
||||||
bars.forEach(convertBar);
|
|
||||||
}
|
|
||||||
|
|
||||||
function initVerticalBars() {
|
|
||||||
var tbodyIds = ['array_list', 'pool_list0', 'devs_list'];
|
|
||||||
var targets = [];
|
|
||||||
|
|
||||||
tbodyIds.forEach(function(id) {
|
|
||||||
var el = document.getElementById(id);
|
|
||||||
if (el) {
|
|
||||||
targets.push(el);
|
|
||||||
convertAllBars(el);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (targets.length === 0) return;
|
|
||||||
|
|
||||||
// Watch for style changes (Unraid updates bar widths) and childList (dynamic adds)
|
|
||||||
var observer = new MutationObserver(function(mutations) {
|
|
||||||
mutations.forEach(function(m) {
|
|
||||||
var tbody = m.target.closest ? m.target.closest('tbody') : null;
|
|
||||||
if (!tbody) tbody = m.target;
|
|
||||||
// Reconvert: remove vertical-bar class from affected bars, then reconvert
|
|
||||||
var bars = tbody.querySelectorAll('.usage-disk');
|
|
||||||
bars.forEach(function(bar) {
|
|
||||||
if (bar.classList.contains('vertical-bar')) {
|
|
||||||
bar.classList.remove('vertical-bar');
|
|
||||||
}
|
|
||||||
convertBar(bar);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
targets.forEach(function(el) {
|
|
||||||
observer.observe(el, { attributes: true, attributeFilter: ['style'], subtree: true, childList: true });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function init() {
|
|
||||||
setTimeout(initVerticalBars, 1500);
|
|
||||||
// Second pass for late-loading content
|
|
||||||
setTimeout(initVerticalBars, 3000);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (document.readyState === 'loading') {
|
|
||||||
document.addEventListener('DOMContentLoaded', init);
|
|
||||||
} else {
|
|
||||||
init();
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// System Card Legend Colors — fix invisible legend circles
|
|
||||||
// =============================================================
|
|
||||||
(function() {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
// Legend circle colors matching recolored pie segments (in DOM order)
|
|
||||||
var LEGEND_COLORS = [
|
|
||||||
'rgb(126, 184, 218)', // System — accent blue
|
|
||||||
'rgb(245, 166, 35)', // VM — orange
|
|
||||||
'rgb(241, 196, 15)', // ZFS cache — yellow
|
|
||||||
'rgb(231, 76, 60)', // Docker — red
|
|
||||||
'rgba(255, 255, 255, 0.3)' // Free — subtle white
|
|
||||||
];
|
|
||||||
|
|
||||||
function colorLegend() {
|
|
||||||
var dynamic = document.getElementById('dynamic');
|
|
||||||
if (!dynamic) return;
|
|
||||||
|
|
||||||
var circles = dynamic.querySelectorAll('i.fa-circle');
|
|
||||||
circles.forEach(function(circle, i) {
|
|
||||||
if (i < LEGEND_COLORS.length) {
|
|
||||||
circle.style.setProperty('color', LEGEND_COLORS[i], 'important');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function initLegendColors() {
|
|
||||||
var dynamic = document.getElementById('dynamic');
|
|
||||||
if (!dynamic) return;
|
|
||||||
|
|
||||||
colorLegend();
|
|
||||||
|
|
||||||
// Re-apply when Unraid re-renders the system card
|
|
||||||
var observer = new MutationObserver(function() {
|
|
||||||
colorLegend();
|
|
||||||
});
|
|
||||||
observer.observe(dynamic, { childList: true, subtree: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
function init() {
|
|
||||||
setTimeout(initLegendColors, 2000);
|
|
||||||
setTimeout(colorLegend, 4000);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (document.readyState === 'loading') {
|
|
||||||
document.addEventListener('DOMContentLoaded', init);
|
|
||||||
} else {
|
|
||||||
init();
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
|
|||||||
339
style.css
339
style.css
@@ -49,10 +49,6 @@
|
|||||||
/* ============================================
|
/* ============================================
|
||||||
BACKGROUND: Mountain Wallpaper
|
BACKGROUND: Mountain Wallpaper
|
||||||
============================================ */
|
============================================ */
|
||||||
html {
|
|
||||||
overflow-x: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: #0a0a0f !important;
|
background: #0a0a0f !important;
|
||||||
background-image: url('/custom/wallpaper.jpg') !important;
|
background-image: url('/custom/wallpaper.jpg') !important;
|
||||||
@@ -189,14 +185,13 @@ html.sidebar-expanded #sidebar-toggle-btn {
|
|||||||
width: 36px !important;
|
width: 36px !important;
|
||||||
height: 36px !important;
|
height: 36px !important;
|
||||||
box-sizing: border-box !important;
|
box-sizing: border-box !important;
|
||||||
background: transparent !important;
|
background: rgba(255, 255, 255, 0.06) !important;
|
||||||
border: none !important;
|
border: 1px solid rgba(255, 255, 255, 0.10) !important;
|
||||||
border-radius: 50% !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html.sidebar-expanded #sidebar-toggle-btn:hover {
|
html.sidebar-expanded #sidebar-toggle-btn:hover {
|
||||||
background: rgba(255, 255, 255, 0.08) !important;
|
background: rgba(255, 255, 255, 0.12) !important;
|
||||||
border: none !important;
|
border-color: rgba(255, 255, 255, 0.20) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
html.sidebar-expanded #sidebar-toggle-btn svg {
|
html.sidebar-expanded #sidebar-toggle-btn svg {
|
||||||
@@ -328,7 +323,6 @@ html.sidebar-expanded #sidebar-toggle-btn svg {
|
|||||||
.Theme--sidebar .nav-item.LogButton a:before { content: "\f0f6" !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.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 a:before { content: "\f09c" !important; font-family: FontAwesome !important; }
|
||||||
.Theme--sidebar .nav-item.LockButton.is-locked a:before { content: "\f023" !important; }
|
|
||||||
|
|
||||||
/* --- EXPANDED SIDEBAR ---
|
/* --- EXPANDED SIDEBAR ---
|
||||||
Compound selectors: both classes on <html> */
|
Compound selectors: both classes on <html> */
|
||||||
@@ -388,7 +382,6 @@ html.sidebar-expanded.Theme--sidebar .nav-tile.right .nav-item a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* --- Content area shifts for sidebar (push, not overlap) --- */
|
/* --- Content area shifts for sidebar (push, not overlap) --- */
|
||||||
#header,
|
|
||||||
#displaybox,
|
#displaybox,
|
||||||
#footer,
|
#footer,
|
||||||
#copyright {
|
#copyright {
|
||||||
@@ -396,7 +389,6 @@ 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;
|
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 #displaybox,
|
||||||
html.sidebar-expanded.Theme--sidebar #footer,
|
html.sidebar-expanded.Theme--sidebar #footer,
|
||||||
html.sidebar-expanded.Theme--sidebar #copyright {
|
html.sidebar-expanded.Theme--sidebar #copyright {
|
||||||
@@ -951,18 +943,6 @@ table.dashboard {
|
|||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
box-shadow: 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) */
|
/* Hide colgroup (not needed with block layout) */
|
||||||
@@ -980,7 +960,7 @@ table.dashboard > tbody.sortable {
|
|||||||
border-radius: var(--glass-radius) !important;
|
border-radius: var(--glass-radius) !important;
|
||||||
box-shadow: var(--glass-shadow) !important;
|
box-shadow: var(--glass-shadow) !important;
|
||||||
margin-bottom: 20px !important;
|
margin-bottom: 20px !important;
|
||||||
padding-bottom: 14px !important;
|
padding-bottom: 8px !important;
|
||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
|
transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
|
||||||
@@ -1061,44 +1041,6 @@ span.tile-header-left {
|
|||||||
flex: 1 !important;
|
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) */
|
/* Stopgap spacers → hidden (card margins handle spacing) */
|
||||||
table.dashboard > thead.stopgap {
|
table.dashboard > thead.stopgap {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
@@ -1109,8 +1051,7 @@ table.dashboard .usage-disk,
|
|||||||
table.dashboard .usage-bar {
|
table.dashboard .usage-bar {
|
||||||
background: rgba(255, 255, 255, 0.08) !important;
|
background: rgba(255, 255, 255, 0.08) !important;
|
||||||
border-radius: 8px !important;
|
border-radius: 8px !important;
|
||||||
height: 8px !important;
|
height: 6px !important;
|
||||||
margin: 6px 0 !important;
|
|
||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1121,113 +1062,6 @@ table.dashboard .usage-bar > span {
|
|||||||
height: 100% !important;
|
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 */
|
/* Docker container icons in dashboard */
|
||||||
table.dashboard img {
|
table.dashboard img {
|
||||||
border-radius: 6px !important;
|
border-radius: 6px !important;
|
||||||
@@ -1271,102 +1105,19 @@ table.dashboard span.inner span.state {
|
|||||||
font-size: 0.85em !important;
|
font-size: 0.85em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Docker/VM container name links — use accent color */
|
/* Docker/VM container name links — use accent color (clock color) */
|
||||||
table.dashboard span.inner a,
|
table.dashboard span.inner a,
|
||||||
table.dashboard span.outer a,
|
table.dashboard span.outer a,
|
||||||
table.dashboard span.appname a,
|
|
||||||
table.dashboard td a {
|
table.dashboard td a {
|
||||||
color: var(--glass-accent) !important;
|
color: var(--glass-accent) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.dashboard span.inner a:hover,
|
table.dashboard span.inner a:hover,
|
||||||
table.dashboard span.outer a:hover,
|
table.dashboard span.outer a:hover,
|
||||||
table.dashboard span.appname a:hover,
|
|
||||||
table.dashboard td a:hover {
|
table.dashboard td a:hover {
|
||||||
color: var(--glass-accent-hover) !important;
|
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
|
INNER PAGES — Content Glass Wrapper
|
||||||
@@ -1400,7 +1151,7 @@ html.sidebar-expanded.Theme--sidebar #displaybox {
|
|||||||
nav.tabs {
|
nav.tabs {
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
padding: 0 0 12px !important;
|
padding: 0 0 12px !important;
|
||||||
margin-bottom: 8px !important;
|
margin-bottom: 16px !important;
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
gap: 6px !important;
|
gap: 6px !important;
|
||||||
@@ -1418,7 +1169,6 @@ nav.tabs button {
|
|||||||
backdrop-filter: blur(10px) !important;
|
backdrop-filter: blur(10px) !important;
|
||||||
-webkit-backdrop-filter: blur(10px) !important;
|
-webkit-backdrop-filter: blur(10px) !important;
|
||||||
transition: all 0.2s ease !important;
|
transition: all 0.2s ease !important;
|
||||||
opacity: 1 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
nav.tabs button:hover {
|
nav.tabs button:hover {
|
||||||
@@ -1510,23 +1260,11 @@ div.tab[aria-selected="true"] {
|
|||||||
|
|
||||||
#displaybox table:not(.dashboard) tbody td {
|
#displaybox table:not(.dashboard) tbody td {
|
||||||
color: var(--glass-text) !important;
|
color: var(--glass-text) !important;
|
||||||
padding: 14px 16px !important;
|
padding: 10px 16px !important;
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
|
border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
|
||||||
background: transparent !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 {
|
#displaybox table:not(.dashboard) tbody tr:hover {
|
||||||
background: rgba(255, 255, 255, 0.04) !important;
|
background: rgba(255, 255, 255, 0.04) !important;
|
||||||
}
|
}
|
||||||
@@ -1535,60 +1273,6 @@ div.tab[aria-selected="true"] {
|
|||||||
border-bottom: none !important;
|
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
|
SETTINGS PAGES — Icon Grid
|
||||||
@@ -1939,6 +1623,11 @@ div.clone-settings {
|
|||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Checkbox / switch styling */
|
||||||
|
.switch-button-background {
|
||||||
|
border-radius: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* Selection color */
|
/* Selection color */
|
||||||
::selection {
|
::selection {
|
||||||
background: rgba(126, 184, 218, 0.3);
|
background: rgba(126, 184, 218, 0.3);
|
||||||
|
|||||||
Reference in New Issue
Block a user