refactor(scrollbars): consolidate and simplify global scrollbar styles

Move and consolidate scrollbar styling into a single block at the end of app.css.
Remove the scattered top-level rule and the left-sidebar-specific overrides and
replace them with a unified set of rules that use ::-webkit-scrollbar pseudo-
elements and reset scrollbar-width/color to auto so WebKit styling wins.

- Set WebKit scrollbar size to 8px, rounded thumb with min-height/border and
  color-mix background.
- Unify hover/active thumb colors to use --app-scrollbar-thumb and
  --app-scrollbar-thumb-hover.
- Keep hidden scrollbars for .repo-tabs-scroll.
This commit is contained in:
2026-09-17 21:43:25 +02:00
parent 3e87c8f6a9
commit 098e9c5fb9
+19 -36
View File
@@ -141,11 +141,7 @@
html, body, #app { width: 100%; height: 100%; margin: 0; } html, body, #app { width: 100%; height: 100%; margin: 0; }
* { scrollbar-width: thin; scrollbar-color: var(--app-scrollbar-thumb) transparent; } /* Scrollbars are styled app-wide at the end of this file. */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--app-scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--app-scrollbar-thumb-hover); }
html { color-scheme: var(--app-color-scheme); } html { color-scheme: var(--app-color-scheme); }
body { body {
@@ -9255,41 +9251,28 @@ section > header.page-header.page-header {
.left-sidebar .tags-panel .tag-create-form input[aria-label="Tag message"] { grid-column: 2 / -1; grid-row: 2; } .left-sidebar .tags-panel .tag-create-form input[aria-label="Tag message"] { grid-column: 2 / -1; grid-row: 2; }
/* --- Sidebar scrollbars --------------------------------------------------- /* --- Scrollbars -----------------------------------------------------------
Slim, rounded thumb that brightens while hovering a scroll area. One look everywhere: a slim, rounded thumb that brightens while the pointer
scrollbar-width/color are reset so WebKit uses the pseudo-element styling. is over the scrolling area. scrollbar-width/color are reset to auto so
The panel lists are named explicitly so they win over any other rule. */ WebKit uses the pseudo-element styling below instead of the native bar. */
.left-sidebar, :root,
.left-sidebar *, * {
.left-sidebar .sidebar-tags-list, scrollbar-width: auto;
.left-sidebar .sidebar-worktree-list, scrollbar-color: auto;
.left-sidebar .stash-list,
.left-sidebar .explorer-list {
scrollbar-width: auto !important;
scrollbar-color: auto !important;
} }
.left-sidebar ::-webkit-scrollbar, ::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
.left-sidebar .sidebar-tags-list::-webkit-scrollbar, ::-webkit-scrollbar-track { margin: 6px 0; background: transparent; }
.left-sidebar .sidebar-worktree-list::-webkit-scrollbar, ::-webkit-scrollbar-corner { background: transparent; }
.left-sidebar .stash-list::-webkit-scrollbar, ::-webkit-scrollbar-thumb {
.left-sidebar .explorer-list::-webkit-scrollbar { width: 8px !important; height: 8px !important; background: transparent; }
.left-sidebar ::-webkit-scrollbar-track,
.left-sidebar .sidebar-tags-list::-webkit-scrollbar-track,
.left-sidebar .sidebar-worktree-list::-webkit-scrollbar-track,
.left-sidebar .stash-list::-webkit-scrollbar-track,
.left-sidebar .explorer-list::-webkit-scrollbar-track { margin: 6px 0; background: transparent; }
.left-sidebar ::-webkit-scrollbar-corner { background: transparent; }
.left-sidebar ::-webkit-scrollbar-thumb,
.left-sidebar .sidebar-tags-list::-webkit-scrollbar-thumb,
.left-sidebar .sidebar-worktree-list::-webkit-scrollbar-thumb,
.left-sidebar .stash-list::-webkit-scrollbar-thumb,
.left-sidebar .explorer-list::-webkit-scrollbar-thumb {
min-height: 28px; min-height: 28px;
border: 2px solid transparent; border: 2px solid transparent;
border-radius: 999px; border-radius: 999px;
background-clip: padding-box; background-clip: padding-box;
background-color: color-mix(in srgb, var(--app-scrollbar-thumb) 55%, transparent); background-color: color-mix(in srgb, var(--app-scrollbar-thumb) 55%, transparent);
} }
.left-sidebar :hover::-webkit-scrollbar-thumb { background-color: var(--app-scrollbar-thumb); } :hover::-webkit-scrollbar-thumb { background-color: var(--app-scrollbar-thumb); }
.left-sidebar ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:hover,
.left-sidebar ::-webkit-scrollbar-thumb:active { background-color: var(--app-scrollbar-thumb-hover); } ::-webkit-scrollbar-thumb:active { background-color: var(--app-scrollbar-thumb-hover); }
/* Tab strips keep their hidden scrollbars. */
.repo-tabs-scroll { scrollbar-width: none; }