Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(overview): match sidebar Overview entry to app-category rows

Browse Source 
The pinned 'Overview' sidebar entry used a rounded, inset pill (margin +
border-radius:8px) so its hover/active highlight floated in the middle of the
sidebar, unlike the full-width app-category rows below it. Drop the margin and
radius, adopt the .category padding (15px 20px), border-bottom separator and
var(--surface-hover) hover, so the highlight spans the full sidebar width with
square corners and matches the categories. Keeps font-weight 600 + the
page-updater active tint as its only distinguishing marks.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-06-18 15:32:46 +01:00
parent 9a19e55533
commit bbf2f9a5f4
1 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
containers/libreportal/frontend/components/apps/overview/css/overview.css
View File

@ -14,24 +14,25 @@
#overview-view .tab-pane { display: none; } #overview-view .tab-pane { display: none; }
#overview-view .tab-pane.active { display: block; } #overview-view .tab-pane.active { display: block; }
/* ---- sidebar "Overview" entry (pinned above the search box) ------------- */ /* ---- sidebar "Overview" entry (pinned above the search box) -------------
Matches the app-category rows below it (sidebar.css .category): full-width,
square corners, same padding + separator + hover, so the highlight spans the
whole sidebar rather than a rounded inset pill. Keeps font-weight 600 + the
page-updater active tint as its only distinguishing marks. */
.sidebar-overview-entry { .sidebar-overview-entry {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
margin: 4px 8px 10px; padding: 15px 20px;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
color: var(--sidebar-text, #cdd6e4); color: var(--sidebar-text, #cdd6e4);
border: 1px solid transparent; border-bottom: 1px solid var(--sidebar-border);
transition: background .15s ease, color .15s ease, border-color .15s ease; transition: background .15s ease, color .15s ease;
} }
.sidebar-overview-entry:hover { background: rgba(255, 255, 255, .06); } .sidebar-overview-entry:hover { background: var(--surface-hover); color: var(--text-primary); }
.sidebar-overview-entry.active { .sidebar-overview-entry.active {
background: rgba(var(--page-updater-rgb), .16); background: rgba(var(--page-updater-rgb), .16);
border-color: rgba(var(--page-updater-rgb), .45);
color: #fff; color: #fff;
} }
.sidebar-overview-entry .ov-entry-icon { width: 18px; height: 18px; flex: 0 0 auto; } .sidebar-overview-entry .ov-entry-icon { width: 18px; height: 18px; flex: 0 0 auto; }