Style popups, modals, and Spotlight search; fix card toggle and nav overlap
- Fix card show/hide toggle by removing !important from display: block - Fix sidebar nav-tile.right overlap by removing position: sticky - Remove card header separator line for smooth transition - Add glass styling for Docker/VM context menu dropdowns - Add glass styling for sweet-alert modals with light text - Restyle search as centered Spotlight popup (600px, glass bg) - Fix search icon click by removing inline onclick handler - Update awesomplete dropdown with glass effect and proper spacing - Increase glass brightness, blur, and card padding/typography Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kaloyan Danchev
@@ -54,6 +54,10 @@
|
||||
var link = searchItem.querySelector('a');
|
||||
if (!link) return;
|
||||
|
||||
// Remove any inline onclick handler (Unraid sets onclick="gui_search()")
|
||||
link.removeAttribute('onclick');
|
||||
link.onclick = null;
|
||||
|
||||
// Replace hover with click
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
247
style.css
247
style.css
@@ -12,19 +12,19 @@
|
||||
--glass-accent-subtle: rgba(126, 184, 218, 0.12);
|
||||
|
||||
/* Glass card properties */
|
||||
--glass-bg: rgba(255, 255, 255, 0.08);
|
||||
--glass-bg-hover: rgba(255, 255, 255, 0.11);
|
||||
--glass-bg: rgba(255, 255, 255, 0.12);
|
||||
--glass-bg-hover: rgba(255, 255, 255, 0.16);
|
||||
--glass-border: rgba(255, 255, 255, 0.15);
|
||||
--glass-border-hover: rgba(255, 255, 255, 0.25);
|
||||
--glass-blur: 40px;
|
||||
--glass-blur: 50px;
|
||||
--glass-saturate: 1.5;
|
||||
--glass-radius: 22px;
|
||||
--glass-radius-sm: 14px;
|
||||
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.10);
|
||||
|
||||
/* Text */
|
||||
--glass-text: rgba(255, 255, 255, 0.90);
|
||||
--glass-text-muted: rgba(255, 255, 255, 0.50);
|
||||
--glass-text-muted: rgba(255, 255, 255, 0.55);
|
||||
--glass-text-heading: rgba(255, 255, 255, 0.95);
|
||||
|
||||
/* Override Unraid theme variables */
|
||||
@@ -215,13 +215,10 @@ html.sidebar-expanded #sidebar-toggle-btn svg {
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
/* Utility nav items (right) — separator + sticky at bottom */
|
||||
/* Utility nav items (right) — separator, scrolls with main nav */
|
||||
.Theme--sidebar .nav-tile.right {
|
||||
position: sticky !important;
|
||||
bottom: 0 !important;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
|
||||
padding: 6px 0 6px !important;
|
||||
background: inherit !important;
|
||||
}
|
||||
|
||||
/* DISABLE default Unraid hover width expansion */
|
||||
@@ -405,44 +402,66 @@ html.sidebar-expanded.Theme--sidebar #copyright {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.Theme--sidebar #guiSearchBoxSpan {
|
||||
/* Spotlight-style search popup — centered, wide */
|
||||
.Theme--sidebar #guiSearchBoxSpan,
|
||||
body > #guiSearchBoxSpan {
|
||||
position: fixed !important;
|
||||
top: 28% !important;
|
||||
left: 50% !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
z-index: 10001 !important;
|
||||
width: auto !important;
|
||||
min-width: 440px !important;
|
||||
width: 600px !important;
|
||||
max-width: 90vw !important;
|
||||
height: auto !important;
|
||||
padding: 12px 16px !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
background: rgba(15, 20, 30, 0.80) !important;
|
||||
background: rgba(255, 255, 255, 0.10) !important;
|
||||
backdrop-filter: blur(50px) saturate(1.5) !important;
|
||||
-webkit-backdrop-filter: blur(50px) saturate(1.5) !important;
|
||||
border: 1px solid var(--glass-border) !important;
|
||||
border-radius: 18px !important;
|
||||
border-radius: 20px !important;
|
||||
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
font-size: 15px !important;
|
||||
display: block !important;
|
||||
overflow: visible !important;
|
||||
font-size: 16px !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
.Theme--sidebar #guiSearchBox {
|
||||
width: 400px !important;
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
color: var(--glass-text) !important;
|
||||
border: 1px solid var(--glass-border) !important;
|
||||
border-radius: 12px !important;
|
||||
padding: 10px 16px !important;
|
||||
font-size: 15px !important;
|
||||
font-family: inherit !important;
|
||||
/* Awesomplete wrapper — fill full width */
|
||||
.Theme--sidebar #guiSearchBoxSpan .awesomplete,
|
||||
body > #guiSearchBoxSpan .awesomplete {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.Theme--sidebar #guiSearchBox:focus {
|
||||
border-color: var(--glass-accent) !important;
|
||||
box-shadow: 0 0 0 3px var(--glass-accent-glow) !important;
|
||||
/* Search input — fills full width of glass container */
|
||||
.Theme--sidebar #guiSearchBox,
|
||||
body > #guiSearchBoxSpan #guiSearchBox {
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
background: transparent !important;
|
||||
color: var(--glass-text) !important;
|
||||
border: none !important;
|
||||
border-radius: 20px !important;
|
||||
padding: 18px 24px !important;
|
||||
font-size: 20px !important;
|
||||
font-family: inherit !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.Theme--sidebar #guiSearchBox:focus,
|
||||
body > #guiSearchBoxSpan #guiSearchBox:focus {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Hide awesomplete status indicator (diamond marker) */
|
||||
.Theme--sidebar #guiSearchBoxSpan .awesomplete .visually-hidden,
|
||||
body > #guiSearchBoxSpan .awesomplete .visually-hidden,
|
||||
.Theme--sidebar #guiSearchBoxSpan .awesomplete [role="status"],
|
||||
body > #guiSearchBoxSpan .awesomplete [role="status"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#search-backdrop {
|
||||
@@ -457,30 +476,60 @@ html.sidebar-expanded.Theme--sidebar #copyright {
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.Theme--sidebar .awesomplete > ul {
|
||||
background: rgba(15, 20, 30, 0.90) !important;
|
||||
backdrop-filter: blur(40px) saturate(1.5) !important;
|
||||
-webkit-backdrop-filter: blur(40px) saturate(1.5) !important;
|
||||
/* Autocomplete dropdown — attached to the glass container */
|
||||
.Theme--sidebar .awesomplete > ul,
|
||||
body > #guiSearchBoxSpan .awesomplete > ul {
|
||||
background: rgba(255, 255, 255, 0.14) !important;
|
||||
backdrop-filter: blur(50px) saturate(1.5) !important;
|
||||
-webkit-backdrop-filter: blur(50px) saturate(1.5) !important;
|
||||
border: 1px solid var(--glass-border) !important;
|
||||
border-radius: 14px !important;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
|
||||
padding: 4px !important;
|
||||
border-radius: 16px !important;
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4) !important;
|
||||
padding: 8px !important;
|
||||
margin-top: 5px !important;
|
||||
z-index: 10002 !important;
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
max-height: 50vh !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
.Theme--sidebar .awesomplete > ul > li {
|
||||
/* Hide the awesomplete arrow/caret */
|
||||
.Theme--sidebar .awesomplete > ul::before,
|
||||
.Theme--sidebar .awesomplete > ul::after,
|
||||
body > #guiSearchBoxSpan .awesomplete > ul::before,
|
||||
body > #guiSearchBoxSpan .awesomplete > ul::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.Theme--sidebar .awesomplete > ul > li,
|
||||
body > #guiSearchBoxSpan .awesomplete > ul > li {
|
||||
color: var(--glass-text) !important;
|
||||
padding: 8px 14px !important;
|
||||
padding: 10px 18px !important;
|
||||
border-radius: 10px !important;
|
||||
font-size: 14px !important;
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
.Theme--sidebar .awesomplete > ul > li:hover,
|
||||
.Theme--sidebar .awesomplete > ul > li[aria-selected="true"] {
|
||||
background: rgba(255, 255, 255, 0.10) !important;
|
||||
.Theme--sidebar .awesomplete > ul > li[aria-selected="true"],
|
||||
body > #guiSearchBoxSpan .awesomplete > ul > li:hover,
|
||||
body > #guiSearchBoxSpan .awesomplete > ul > li[aria-selected="true"] {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
color: var(--glass-text-heading) !important;
|
||||
}
|
||||
|
||||
/* Highlighted matching text in results */
|
||||
body > #guiSearchBoxSpan .awesomplete mark,
|
||||
.Theme--sidebar .awesomplete mark {
|
||||
background: rgba(255, 200, 50, 0.25) !important;
|
||||
color: var(--glass-text-heading) !important;
|
||||
padding: 0 1px !important;
|
||||
border-radius: 2px !important;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
GLASS CARDS (Panels, Frames)
|
||||
@@ -516,7 +565,7 @@ div.frame::before {
|
||||
left: 8%;
|
||||
right: 8%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -534,9 +583,10 @@ div.title,
|
||||
background: rgba(255, 255, 255, 0.02) !important;
|
||||
color: var(--glass-text-heading) !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
|
||||
font-weight: 500 !important;
|
||||
letter-spacing: 0.4px !important;
|
||||
padding: 14px 18px !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 1.05em !important;
|
||||
letter-spacing: 0.3px !important;
|
||||
padding: 16px 22px !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -564,7 +614,7 @@ table thead th {
|
||||
font-size: 0.72em !important;
|
||||
letter-spacing: 0.6px !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
|
||||
padding: 10px 14px !important;
|
||||
padding: 12px 16px !important;
|
||||
}
|
||||
|
||||
table tbody tr {
|
||||
@@ -577,7 +627,7 @@ table tbody tr:hover {
|
||||
|
||||
table tbody td {
|
||||
color: var(--glass-text) !important;
|
||||
padding: 10px 14px !important;
|
||||
padding: 12px 16px !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
|
||||
}
|
||||
|
||||
@@ -674,7 +724,7 @@ div.tab:hover {
|
||||
============================================ */
|
||||
.sweet-alert,
|
||||
.swal-modal {
|
||||
background: rgba(15, 20, 30, 0.70) !important;
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
backdrop-filter: blur(50px) saturate(1.5) !important;
|
||||
-webkit-backdrop-filter: blur(50px) saturate(1.5) !important;
|
||||
border: 1px solid var(--glass-border) !important;
|
||||
@@ -683,6 +733,7 @@ div.tab:hover {
|
||||
color: var(--glass-text) !important;
|
||||
}
|
||||
|
||||
.sweet-overlay,
|
||||
.swal-overlay--show-modal,
|
||||
div.shade-black {
|
||||
background: rgba(0, 0, 0, 0.45) !important;
|
||||
@@ -690,6 +741,41 @@ div.shade-black {
|
||||
-webkit-backdrop-filter: blur(6px) !important;
|
||||
}
|
||||
|
||||
/* Sweet-alert inner content — force light text on glass */
|
||||
.sweet-alert h2 {
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
color: var(--glass-text-heading) !important;
|
||||
}
|
||||
|
||||
.sweet-alert p,
|
||||
.sweet-alert pre,
|
||||
.sweet-alert td,
|
||||
.sweet-alert th,
|
||||
.sweet-alert tr,
|
||||
.sweet-alert span,
|
||||
.sweet-alert label,
|
||||
.sweet-alert div {
|
||||
color: var(--glass-text) !important;
|
||||
}
|
||||
|
||||
.sweet-alert .sa-fix {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.sweet-alert hr {
|
||||
border-color: rgba(255, 255, 255, 0.08) !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.sweet-alert button {
|
||||
color: var(--glass-accent) !important;
|
||||
}
|
||||
|
||||
.sweet-alert a,
|
||||
.sweet-alert .link {
|
||||
color: var(--glass-accent) !important;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
DROPDOWN MENUS / POPUPS
|
||||
@@ -705,6 +791,40 @@ div.shade-black {
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
|
||||
}
|
||||
|
||||
/* Context menu (Docker/VM icon click) */
|
||||
.dropdown-menu.dropdown-context {
|
||||
background: rgba(255, 255, 255, 0.10) !important;
|
||||
backdrop-filter: blur(50px) saturate(1.5) !important;
|
||||
-webkit-backdrop-filter: blur(50px) saturate(1.5) !important;
|
||||
border: 1px solid var(--glass-border) !important;
|
||||
border-radius: 14px !important;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
|
||||
padding: 6px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dropdown-menu.dropdown-context > li > a {
|
||||
color: var(--glass-text) !important;
|
||||
padding: 8px 14px !important;
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
transition: background 0.15s ease !important;
|
||||
}
|
||||
|
||||
.dropdown-menu.dropdown-context > li > a:hover {
|
||||
background: rgba(255, 255, 255, 0.10) !important;
|
||||
color: var(--glass-text-heading) !important;
|
||||
}
|
||||
|
||||
.dropdown-menu.dropdown-context > li > a > i {
|
||||
color: var(--glass-text-muted) !important;
|
||||
}
|
||||
|
||||
.dropdown-menu.dropdown-context > li.divider {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
margin: 4px 8px !important;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
STATUS INDICATORS
|
||||
@@ -808,7 +928,7 @@ div.frame:has(> div.grid):hover {
|
||||
|
||||
/* Dashboard grid — prevent first column blowout */
|
||||
div.grid {
|
||||
gap: 20px !important;
|
||||
gap: 24px !important;
|
||||
}
|
||||
|
||||
/* Tile columns — transparent + prevent overflow */
|
||||
@@ -841,7 +961,8 @@ table.dashboard > tbody.sortable {
|
||||
border: 1px solid var(--glass-border) !important;
|
||||
border-radius: var(--glass-radius) !important;
|
||||
box-shadow: var(--glass-shadow) !important;
|
||||
margin-bottom: 16px !important;
|
||||
margin-bottom: 20px !important;
|
||||
padding-bottom: 8px !important;
|
||||
overflow: hidden !important;
|
||||
position: relative;
|
||||
transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
|
||||
@@ -861,15 +982,16 @@ table.dashboard > tbody.sortable::before {
|
||||
left: 8%;
|
||||
right: 8%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Dashboard card rows — use block to preserve inner layouts */
|
||||
/* Dashboard card rows — use block to preserve inner layouts
|
||||
NOTE: display must NOT use !important so Unraid's jQuery .hide() can override */
|
||||
table.dashboard > tbody.sortable > tr {
|
||||
display: block !important;
|
||||
padding: 6px 14px !important;
|
||||
display: block;
|
||||
padding: 10px 18px !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
@@ -878,21 +1000,22 @@ table.dashboard > tbody.sortable > tr:last-child {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
/* Dashboard card cells */
|
||||
/* Dashboard card cells
|
||||
NOTE: display must NOT use !important so Unraid's jQuery .hide() can override */
|
||||
table.dashboard > tbody.sortable > tr > td {
|
||||
display: block !important;
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
border: none !important;
|
||||
padding: 4px 4px !important;
|
||||
padding: 6px 6px !important;
|
||||
color: var(--glass-text) !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Header row of each card */
|
||||
table.dashboard > tbody.sortable > tr:first-child {
|
||||
background: rgba(255, 255, 255, 0.03) !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
|
||||
padding: 10px 14px !important;
|
||||
background: transparent !important;
|
||||
border-bottom: none !important;
|
||||
padding: 14px 18px !important;
|
||||
}
|
||||
|
||||
/* Tile header text */
|
||||
@@ -902,7 +1025,7 @@ span.tile-header-right {
|
||||
color: var(--glass-text-heading) !important;
|
||||
font-weight: 600 !important;
|
||||
letter-spacing: 0.3px !important;
|
||||
font-size: 0.92em !important;
|
||||
font-size: 1em !important;
|
||||
}
|
||||
|
||||
/* Tile header layout */
|
||||
|
||||
Reference in New Issue
Block a user