Fix 23 theme bugs across all pages: toggles, text visibility, icons, bars, shadows, layout
Phase 1: Fix toggle switch knob positioning (absolute + translateY centering) Phase 2: Fix text visibility on Main/Shares thead td, Plugins descriptions, Settings/Tools PanelText labels Phase 3: Fix icon coloring - JS replacement for Tailscale/ZFS Master with selfh.st light SVGs, CSS invert for remaining plugin imgs Phase 4: Softer box-shadow on inner tables, stacked Panel rounding for Array Op Phase 5: Browse table styling, form glass containers, Apps detail panel transparency Phase 6: Main page usage bars (8px thin + gradient), plugin/VM button visibility Phase 7: Header overflow fix, Docker folder-preview softening, Apps ribbon clipping, ZFS Master toggle spacing Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
1
assets/icons/openzfs-light.svg
Normal file
1
assets/icons/openzfs-light.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><path d="M-135.2 330c-5.4 5.4-14 5.4-19.4 0s-5.4-14.1 0-19.4c5.4-5.4 14-5.4 19.4 0 5.3 5.3 5.3 14 0 19.4m-3 383.6c-9.4 9.4-24.5 9.4-33.8 0-9.4-9.4-9.4-24.5 0-33.8 9.4-9.4 24.6-9.4 33.8 0 9.3 9.3 9.3 24.5 0 33.8m-80.1-46.2c-9.4-9.4-9.4-24.6 0-33.8 9.4-9.4 24.6-9.4 33.8 0 9.4 9.4 9.4 24.6 0 33.8-9.3 9.4-24.5 9.4-33.8 0m-12.2 46.2c-9.4 9.4-24.6 9.4-33.8 0-9.4-9.4-9.4-24.5 0-33.8 9.4-9.4 24.5-9.4 33.8 0 9.3 9.3 9.3 24.5 0 33.8m-80-46.2c-9.4-9.4-9.4-24.6 0-33.8 9.4-9.4 24.6-9.4 33.8 0 9.4 9.4 9.4 24.6 0 33.8-9.4 9.4-24.6 9.4-33.8 0m-12.3 46.2c-9.4 9.4-24.6 9.4-33.8 0-9.4-9.4-9.4-24.5 0-33.8 9.4-9.4 24.6-9.4 33.8 0 9.3 9.3 9.4 24.5 0 33.8m-80-46.2c-9.4-9.4-9.4-24.5 0-33.8 9.4-9.4 24.6-9.4 33.8 0 9.4 9.4 9.4 24.6 0 33.8-9.4 9.3-24.6 9.4-33.8 0m-12.3 46.2c-9.4 9.4-24.6 9.4-33.8 0-9.4-9.4-9.4-24.6 0-33.8 9.4-9.4 24.5-9.4 33.8 0 9.3 9.3 9.3 24.5 0 33.8M-452 312.3c5.4-5.4 14-5.4 19.4 0s5.4 14.1 0 19.4c-5.4 5.4-14.1 5.4-19.4 0s-5.4-14.1 0-19.4m29.8 29.8c5.4-5.4 14-5.4 19.4 0s5.4 14.1 0 19.4c-5.4 5.4-14.1 5.4-19.4 0-5.4-5.4-5.4-14.1 0-19.4m29.8 29.8c5.4-5.4 14.1-5.4 19.4 0 5.4 5.4 5.4 14.1 0 19.4-5.4 5.4-14 5.4-19.4 0s-5.4-14.1 0-19.4m0-59.6c5.4-5.4 14-5.4 19.4 0s5.4 14.1 0 19.4c-5.4 5.4-14 5.4-19.4 0-5.4-5.3-5.4-14.1 0-19.4m29.8 89.3c5.4-5.4 14.1-5.4 19.4 0 5.4 5.4 5.4 14.1 0 19.4-5.4 5.4-14 5.4-19.4 0-5.4-5.3-5.4-14 0-19.4m0-59.5c5.4-5.4 14-5.4 19.4 0s5.4 14.1 0 19.4c-5.4 5.4-14 5.4-19.4 0s-5.4-14.1 0-19.4m29.8-29.8c5.4-5.4 14-5.4 19.4 0s5.4 14.1 0 19.4c-5.4 5.4-14.1 5.4-19.4 0-5.4-5.3-5.4-14 0-19.4m29.7 89.3c5.4-5.4 14-5.4 19.4 0s5.4 14.1 0 19.4c-5.4 5.4-14 5.4-19.4 0-5.3-5.3-5.3-14 0-19.4m0-59.5c5.4-5.4 14-5.4 19.4 0s5.4 14.1 0 19.4c-5.4 5.4-14.1 5.4-19.4 0s-5.3-14.1 0-19.4m29.8-29.8c5.4-5.4 14.1-5.4 19.4 0 5.4 5.4 5.4 14.1 0 19.4-5.4 5.4-14 5.4-19.4 0-5.3-5.3-5.3-14 0-19.4m9.2 275.1c9.4-9.4 24.6-9.4 33.8 0 9.4 9.4 9.4 24.6 0 33.8-9.4 9.4-24.6 9.4-33.8 0-9.4-9.4-9.4-24.5 0-33.8m10.2-137.3c-5.4 5.4-14 5.4-19.4 0s-5.4-14.1 0-19.4c5.4-5.4 14.1-5.4 19.4 0 5.4 5.3 5.4 14 0 19.4m0-59.6c-5.4 5.4-14 5.4-19.4 0s-5.4-14.1 0-19.4c5.4-5.4 14.1-5.4 19.4 0 5.4 5.4 5.4 14.1 0 19.4m-49.2 70c5.4-5.4 14-5.4 19.4 0s5.4 14.1 0 19.4c-5.4 5.4-14 5.4-19.4 0-5.3-5.4-5.3-14.1 0-19.4m-7.2 80.7c9.4-9.4 24.6-9.4 33.8 0 9.4 9.4 9.4 24.5 0 33.8-9.4 9.4-24.6 9.4-33.8 0-9.4-9.3-9.4-24.5 0-33.8m-12.3 46.2c9.4 9.4 9.4 24.6 0 33.8-9.4 9.4-24.6 9.4-33.8 0-9.4-9.4-9.4-24.5 0-33.8 9.3-9.4 24.5-9.4 33.8 0m-10.2-216.3c5.4-5.4 14-5.4 19.4 0s5.4 14.1 0 19.4c-5.4 5.4-14 5.4-19.4 0-5.4-5.3-5.4-14 0-19.4m0 59.6c5.4-5.4 14-5.4 19.4 0s5.4 14.1 0 19.5-14.1 5.4-19.4 0c-5.4-5.5-5.4-14.2 0-19.5m89.3-29.8c5.4-5.4 14-5.4 19.4 0s5.4 14.1 0 19.4c-5.4 5.4-14 5.4-19.4 0-5.4-5.3-5.4-14 0-19.4m0-59.5c5.4-5.4 14-5.4 19.4 0s5.4 14.1 0 19.4c-5.4 5.4-14 5.4-19.4 0s-5.4-14.1 0-19.4m29.8 29.7c5.4-5.4 14.1-5.4 19.4 0 5.4 5.4 5.4 14.1 0 19.4-5.4 5.4-14 5.4-19.4 0-5.4-5.3-5.4-14 0-19.4m0-59.5c5.4-5.4 14.1-5.4 19.4 0 5.4 5.4 5.4 14 0 19.4s-14 5.4-19.4 0-5.4-14.1 0-19.4m29.8 29.7c5.4-5.4 14.1-5.4 19.4 0 5.4 5.4 5.4 14.1 0 19.4-5.4 5.4-14.1 5.4-19.4 0-5.4-5.3-5.4-14 0-19.4m148.4-45.1c0-21.7-17.6-39.4-39.4-39.4h-436.6c-21.7 0-39.4 17.6-39.4 39.4v149.9h58.6l-58.6 137V733c0 21.7 17.6 39.4 39.4 39.4h436.6c21.7 0 39.4-17.6 39.4-39.4V583.1h-58.6l58.6-137z" style="fill:#fff" transform="matrix(.989 0 0 .993 546 -255)"/></svg>
|
||||||
|
After Width: | Height: | Size: 3.3 KiB |
57
sidebar.js
57
sidebar.js
@@ -324,7 +324,10 @@
|
|||||||
var replaceTimer = null;
|
var replaceTimer = null;
|
||||||
function debouncedReplace() {
|
function debouncedReplace() {
|
||||||
if (replaceTimer) clearTimeout(replaceTimer);
|
if (replaceTimer) clearTimeout(replaceTimer);
|
||||||
replaceTimer = setTimeout(replaceIcons, 200);
|
replaceTimer = setTimeout(function() {
|
||||||
|
replaceIcons();
|
||||||
|
replacePluginIcons();
|
||||||
|
}, 200);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Watch for DOM changes (AJAX loads, FolderView manipulation)
|
// Watch for DOM changes (AJAX loads, FolderView manipulation)
|
||||||
@@ -343,14 +346,48 @@
|
|||||||
observer.observe(target, { childList: true, subtree: true });
|
observer.observe(target, { childList: true, subtree: true });
|
||||||
}
|
}
|
||||||
|
|
||||||
// Replace Tailscale sidebar icon with light SVG
|
// Plugin icon source → selfh.st light SVG replacement
|
||||||
function replaceTailscaleIcon() {
|
// Maps partial src paths to icon names in /custom/assets/icons/
|
||||||
var imgs = document.querySelectorAll('img[alt="Tailscale"]');
|
var PLUGIN_ICON_MAP = {
|
||||||
|
'/plugins/tailscale/': 'tailscale',
|
||||||
|
'/plugins/zfs.master/': 'openzfs',
|
||||||
|
// SNMP has no selfh.st icon — leave for CSS invert filter
|
||||||
|
};
|
||||||
|
|
||||||
|
// Replace plugin icons on Settings/Plugins/Tools pages with selfh.st light SVGs.
|
||||||
|
// Also replaces Tailscale sidebar icon (img[alt="Tailscale"]).
|
||||||
|
function replacePluginIcons() {
|
||||||
|
// Settings/Tools/Plugins grid icons
|
||||||
|
var imgs = document.querySelectorAll('#displaybox img, img[alt="Tailscale"]');
|
||||||
imgs.forEach(function(img) {
|
imgs.forEach(function(img) {
|
||||||
var url = CDN_SVG + '/tailscale-light.svg';
|
// Skip container icons (handled by replaceIcons)
|
||||||
if (img.getAttribute('src') !== url) {
|
if (img.classList.contains('img')) return;
|
||||||
img.src = url;
|
// Skip sidebar logo
|
||||||
img.removeAttribute('onerror');
|
if (img.id === 'sidebar-logo') return;
|
||||||
|
// Skip already replaced
|
||||||
|
if (img.getAttribute('data-glass-icon')) return;
|
||||||
|
|
||||||
|
var src = img.getAttribute('src') || '';
|
||||||
|
var keys = Object.keys(PLUGIN_ICON_MAP);
|
||||||
|
for (var i = 0; i < keys.length; i++) {
|
||||||
|
if (src.indexOf(keys[i]) !== -1) {
|
||||||
|
var iconName = PLUGIN_ICON_MAP[keys[i]];
|
||||||
|
var url = CDN_SVG + '/' + iconName + '-light.svg';
|
||||||
|
img.src = url;
|
||||||
|
img.setAttribute('data-glass-icon', iconName);
|
||||||
|
img.removeAttribute('onerror');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Also handle Tailscale by alt attribute (sidebar)
|
||||||
|
if (img.alt === 'Tailscale') {
|
||||||
|
var tsUrl = CDN_SVG + '/tailscale-light.svg';
|
||||||
|
if (src !== tsUrl) {
|
||||||
|
img.src = tsUrl;
|
||||||
|
img.setAttribute('data-glass-icon', 'tailscale');
|
||||||
|
img.removeAttribute('onerror');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -359,10 +396,10 @@
|
|||||||
function initIcons() {
|
function initIcons() {
|
||||||
// Initial replacement
|
// Initial replacement
|
||||||
setTimeout(replaceIcons, 500);
|
setTimeout(replaceIcons, 500);
|
||||||
setTimeout(replaceTailscaleIcon, 500);
|
setTimeout(replacePluginIcons, 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);
|
setTimeout(replacePluginIcons, 2000);
|
||||||
// Start watching for future changes
|
// Start watching for future changes
|
||||||
startObserver();
|
startObserver();
|
||||||
}
|
}
|
||||||
|
|||||||
345
style.css
345
style.css
@@ -1013,6 +1013,12 @@ table.dashboard > tbody.sortable > tr:last-child {
|
|||||||
border-bottom: none !important;
|
border-bottom: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Hide compact Load: row in Processor card — Overall Load row shows same info.
|
||||||
|
Unraid's DashStats.css hides span.switch but the row keeps 33px of padding/gap */
|
||||||
|
table.dashboard > tbody.sortable > tr:has(.head_bar) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* Dashboard card cells
|
/* Dashboard card cells
|
||||||
NOTE: display must NOT use !important so Unraid's jQuery .hide() can override */
|
NOTE: display must NOT use !important so Unraid's jQuery .hide() can override */
|
||||||
table.dashboard > tbody.sortable > tr > td {
|
table.dashboard > tbody.sortable > tr > td {
|
||||||
@@ -1199,8 +1205,14 @@ table.dashboard span.appname a:hover {
|
|||||||
color: var(--glass-accent) !important;
|
color: var(--glass-accent) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* CPU chart canvas — invert for dark background */
|
/* CPU chart — force block display (inline style sets table-row, breaking layout) */
|
||||||
|
#cpu_chart {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CPU chart canvas — invert for dark background, block to prevent inline offset */
|
||||||
#cpuchart {
|
#cpuchart {
|
||||||
|
display: block !important;
|
||||||
filter: invert(1) hue-rotate(180deg) !important;
|
filter: invert(1) hue-rotate(180deg) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1254,12 +1266,20 @@ div.pie div {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.switch-button-button {
|
.switch-button-button {
|
||||||
|
position: absolute !important;
|
||||||
|
top: 50% !important;
|
||||||
|
left: 2px !important;
|
||||||
|
transform: translateY(-50%) !important;
|
||||||
width: 18px !important;
|
width: 18px !important;
|
||||||
height: 18px !important;
|
height: 18px !important;
|
||||||
border-radius: 50% !important;
|
border-radius: 50% !important;
|
||||||
background: #fff !important;
|
background: #fff !important;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
|
||||||
transition: transform 0.25s ease !important;
|
transition: left 0.25s ease, transform 0.25s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-button-background.checked .switch-button-button {
|
||||||
|
left: calc(100% - 20px) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -2151,3 +2171,324 @@ img.popupIcon {
|
|||||||
.ca_credit {
|
.ca_credit {
|
||||||
color: var(--glass-text-muted) !important;
|
color: var(--glass-text-muted) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
BUG FIXES — Phase 2: Text & Label Visibility
|
||||||
|
============================================ */
|
||||||
|
|
||||||
|
/* Fix: Unraid tables use <td> in <thead>, not <th>.
|
||||||
|
Our existing rules only target thead th — add thead td. */
|
||||||
|
#displaybox table:not(.dashboard) thead td {
|
||||||
|
color: var(--glass-text-muted) !important;
|
||||||
|
font-weight: 500 !important;
|
||||||
|
text-transform: uppercase !important;
|
||||||
|
font-size: 0.72em !important;
|
||||||
|
letter-spacing: 0.6px !important;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
|
||||||
|
padding: 12px 16px !important;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Also cover generic thead td (non-#displaybox context) */
|
||||||
|
table thead td {
|
||||||
|
color: var(--glass-text-muted) !important;
|
||||||
|
font-weight: 500 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Plugins page: table header row has opaque dark bg from tablesorter.
|
||||||
|
The grid role table uses <th> which is fine, but ensure plugin
|
||||||
|
description text, author, version are clearly visible. */
|
||||||
|
#displaybox table.tablesorter tbody td,
|
||||||
|
#displaybox table.tablesorter tbody th,
|
||||||
|
#displaybox .plugin_list td,
|
||||||
|
#displaybox table[role="grid"] td,
|
||||||
|
#displaybox table[role="grid"] [role="gridcell"] {
|
||||||
|
color: var(--glass-text) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Plugin name (h4/strong) and description (p) */
|
||||||
|
#displaybox table.tablesorter h4,
|
||||||
|
#displaybox table.tablesorter strong,
|
||||||
|
#displaybox table[role="grid"] h4,
|
||||||
|
#displaybox table[role="grid"] strong {
|
||||||
|
color: var(--glass-text-heading) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#displaybox table.tablesorter p,
|
||||||
|
#displaybox table[role="grid"] p {
|
||||||
|
color: var(--glass-text-muted) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Plugin status text */
|
||||||
|
#displaybox table.tablesorter .up-to-date,
|
||||||
|
#displaybox table[role="grid"] .up-to-date {
|
||||||
|
color: #4ade80 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Settings/Tools/Plugins icon grid labels (.PanelText) —
|
||||||
|
currently inherits accent blue from <a>. Make labels white for readability. */
|
||||||
|
.PanelText {
|
||||||
|
color: var(--glass-text) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Settings/Tools section headers (injected by Unraid as spans with inline styles) */
|
||||||
|
#displaybox .content > span[style],
|
||||||
|
#displaybox .content span[style*="font-size"] {
|
||||||
|
color: var(--glass-text-heading) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
BUG FIXES — Phase 3: Icon Coloring
|
||||||
|
============================================ */
|
||||||
|
|
||||||
|
/* Settings/Plugins/Tools icon grid: non-FA icons are PNG/SVG <img>.
|
||||||
|
Plugin icons that have selfh.st light SVG replacements get swapped via JS
|
||||||
|
(sidebar.js replacePluginIcons). For others, apply invert filter.
|
||||||
|
We scope this to only target icons inside the icon-grid span (not the
|
||||||
|
whole page) and exclude icons already replaced by JS (data-glass-icon). */
|
||||||
|
#displaybox .icon-setting img:not([data-glass-icon]),
|
||||||
|
#displaybox .page-setting img:not([data-glass-icon]),
|
||||||
|
#displaybox .icon-app img:not([data-glass-icon]),
|
||||||
|
#displaybox a[href*="/Settings/"] > span:first-child img:not([data-glass-icon]),
|
||||||
|
#displaybox a[href*="/Tools/"] > span:first-child img:not([data-glass-icon]),
|
||||||
|
#displaybox table[role="grid"] td:first-child img:not([data-glass-icon]) {
|
||||||
|
filter: brightness(0) invert(1) !important;
|
||||||
|
opacity: 0.85 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Plugin list: first-cell icons (some are <img> not FA) */
|
||||||
|
#displaybox table.tablesorter td:first-child img:not([data-glass-icon]),
|
||||||
|
#displaybox table[role="grid"] [role="gridcell"]:first-child img:not([data-glass-icon]) {
|
||||||
|
filter: brightness(0) invert(1) !important;
|
||||||
|
opacity: 0.85 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#displaybox div.Panel:not(:first-of-type):not(:last-of-type) {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#displaybox div.Panel:not(:first-of-type):not(:last-of-type)::before {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#displaybox div.Panel + div.Panel:last-of-type {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
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 {
|
||||||
|
background: rgba(255, 255, 255, 0.06) !important;
|
||||||
|
border: 1px solid var(--glass-border) !important;
|
||||||
|
border-radius: var(--glass-radius) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dir_list thead td,
|
||||||
|
#dir_list thead th,
|
||||||
|
table.file_browser thead td,
|
||||||
|
table.file_browser 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) {
|
||||||
|
background: rgba(255, 255, 255, 0.03) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dir_list tbody tr:hover,
|
||||||
|
table.file_browser tbody tr:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.05) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Share Settings form page: wrap form content in glass styling.
|
||||||
|
The form uses dl/dt/dd inside a content div. */
|
||||||
|
#displaybox .content > form,
|
||||||
|
#displaybox form[method],
|
||||||
|
#displaybox div.clone-settings,
|
||||||
|
#displaybox > .content > table:not(.dashboard):not(.tablesorter):not(.disk_status):not(.share_status) {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Apps detail panel: ensure tags/buttons area has glass bg */
|
||||||
|
#alternateView .ca_template,
|
||||||
|
#alternateView table {
|
||||||
|
background: transparent !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
BUG FIXES — Phase 6: Bars & Button Visibility
|
||||||
|
============================================ */
|
||||||
|
|
||||||
|
/* Main page usage bars: match dashboard style (thin, rounded, gradient) */
|
||||||
|
#displaybox table:not(.dashboard) .usage-disk,
|
||||||
|
#displaybox table:not(.dashboard) .usage-bar {
|
||||||
|
height: 8px !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
background: rgba(255, 255, 255, 0.08) !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
margin: 4px 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#displaybox table:not(.dashboard) .usage-disk > span,
|
||||||
|
#displaybox table:not(.dashboard) .usage-bar > span {
|
||||||
|
height: 100% !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
background: linear-gradient(90deg, rgba(126, 184, 218, 0.5), var(--glass-accent)) !important;
|
||||||
|
font-size: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Color-coded bars on Main page */
|
||||||
|
#displaybox table:not(.dashboard) .usage-disk.greenbar > span {
|
||||||
|
background: linear-gradient(90deg, #22c55e, #4ade80) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#displaybox table:not(.dashboard) .usage-disk.orangebar > span {
|
||||||
|
background: linear-gradient(90deg, #f97316, #fb923c) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#displaybox table:not(.dashboard) .usage-disk.redbar > span {
|
||||||
|
background: linear-gradient(90deg, #ef4444, #f87171) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Plugins Update: ensure update arrow buttons are visible */
|
||||||
|
#displaybox table.tablesorter input[type="button"],
|
||||||
|
#displaybox table[role="grid"] input[type="button"],
|
||||||
|
#displaybox table.tablesorter button:not([disabled]),
|
||||||
|
#displaybox table[role="grid"] button:not([disabled]) {
|
||||||
|
background: var(--glass-accent-subtle) !important;
|
||||||
|
color: var(--glass-accent) !important;
|
||||||
|
border: 1px solid rgba(126, 184, 218, 0.25) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* VM action buttons — ensure visibility */
|
||||||
|
#displaybox #vm_list button,
|
||||||
|
#displaybox #vm_list input[type="button"] {
|
||||||
|
background: var(--glass-accent-subtle) !important;
|
||||||
|
color: var(--glass-accent) !important;
|
||||||
|
border: 1px solid rgba(126, 184, 218, 0.25) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
BUG FIXES — Phase 7: Page-Specific Layouts
|
||||||
|
============================================ */
|
||||||
|
|
||||||
|
/* Dashboard #3: header clipping — ensure UNRAID banner is fully visible */
|
||||||
|
#header {
|
||||||
|
overflow: visible !important;
|
||||||
|
z-index: 100 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure the Unraid logo/brand area doesn't clip */
|
||||||
|
#header > div:first-child,
|
||||||
|
#header .brand,
|
||||||
|
#header a[href*="unraid.net"] {
|
||||||
|
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. */
|
||||||
|
.folder-preview,
|
||||||
|
div[class*="folder-preview"] {
|
||||||
|
background: rgba(255, 255, 255, 0.03) !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06) !important;
|
||||||
|
border-radius: 10px !important;
|
||||||
|
backdrop-filter: none !important;
|
||||||
|
-webkit-backdrop-filter: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Docker folder-storage cell — reduce the wrapper appearance */
|
||||||
|
td.folder-storage {
|
||||||
|
background: transparent !important;
|
||||||
|
border: none !important;
|
||||||
|
padding: 4px 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Apps #1: ribbon/badge corner rounding.
|
||||||
|
Ensure the card clips the ribbon properly. */
|
||||||
|
.ca_holder {
|
||||||
|
overflow: hidden !important;
|
||||||
|
border-radius: 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Badge text positioning — ensure visible */
|
||||||
|
.ca_holder .installedCardBackground + span,
|
||||||
|
.ca_holder .betaCardBackground + span,
|
||||||
|
.ca_holder .officialCardBackground + span,
|
||||||
|
.ca_holder .warningCardBackground + span,
|
||||||
|
.ca_holder .greenCardBackground + span {
|
||||||
|
color: #fff !important;
|
||||||
|
font-size: 10px !important;
|
||||||
|
z-index: 2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ZFS Master: toggle icon gap fix.
|
||||||
|
The toggle/refresh area sits in a div that has excess margin.
|
||||||
|
Tighten the layout. */
|
||||||
|
#displaybox [id*="zfs"] .switch-button-background,
|
||||||
|
#displaybox [id*="ZFS"] .switch-button-background {
|
||||||
|
display: inline-block !important;
|
||||||
|
vertical-align: middle !important;
|
||||||
|
margin: 0 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fix stacked panels: don't apply to tabpanel children
|
||||||
|
which have their own panel structure */
|
||||||
|
[role="tabpanel"] div.Panel + div.Panel {
|
||||||
|
margin-top: 16px !important;
|
||||||
|
border-top: 1px solid var(--glass-border) !important;
|
||||||
|
border-radius: var(--glass-radius) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[role="tabpanel"] div.Panel:not(:first-of-type):not(:last-of-type) {
|
||||||
|
border-radius: var(--glass-radius) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[role="tabpanel"] div.Panel:first-of-type:has(+ div.Panel) {
|
||||||
|
border-radius: var(--glass-radius) !important;
|
||||||
|
margin-bottom: 16px !important;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user