From bbf2f9a5f42c773bd0d3178f0aad4144433594e3 Mon Sep 17 00:00:00 2001 From: librelad Date: Thu, 18 Jun 2026 15:32:46 +0100 Subject: [PATCH] style(overview): match sidebar Overview entry to app-category rows 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 Signed-off-by: librelad --- .../components/apps/overview/css/overview.css | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/containers/libreportal/frontend/components/apps/overview/css/overview.css b/containers/libreportal/frontend/components/apps/overview/css/overview.css index 26e06c2..bdec130 100644 --- a/containers/libreportal/frontend/components/apps/overview/css/overview.css +++ b/containers/libreportal/frontend/components/apps/overview/css/overview.css @@ -14,24 +14,25 @@ #overview-view .tab-pane { display: none; } #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 { display: flex; align-items: center; gap: 10px; - margin: 4px 8px 10px; - padding: 10px 12px; - border-radius: 8px; + padding: 15px 20px; cursor: pointer; font-weight: 600; color: var(--sidebar-text, #cdd6e4); - border: 1px solid transparent; - transition: background .15s ease, color .15s ease, border-color .15s ease; + border-bottom: 1px solid var(--sidebar-border); + 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 { background: rgba(var(--page-updater-rgb), .16); - border-color: rgba(var(--page-updater-rgb), .45); color: #fff; } .sidebar-overview-entry .ov-entry-icon { width: 18px; height: 18px; flex: 0 0 auto; }