mirror of
https://github.com/block/buzz.git
synced 2026-11-09 02:41:57 +00:00
b0c6d6f744
## Summary - show relevant unread threads and active agents when hovering a channel - keep channel-level unread emphasis separate from thread activity dots - make activity rows navigate to the thread and remove demo-only data ## Test plan - `just ci` (all stages passed except the final duplicate native check, which ran out of disk after its earlier clippy pass) - `cd desktop && pnpm exec playwright test tests/e2e/channel-activity-popover.spec.ts --project=smoke` --------- Signed-off-by: kenny lopez <klopez4212@gmail.com>
100 lines
2.9 KiB
CSS
100 lines
2.9 KiB
CSS
.buzz-sidebar-scrollbar {
|
|
scrollbar-color: transparent transparent;
|
|
}
|
|
|
|
.buzz-sidebar-scrollbar:hover {
|
|
scrollbar-color: var(
|
|
--buzz-sidebar-scrollbar-thumb,
|
|
hsl(var(--sidebar-border) / 0.8)
|
|
)
|
|
transparent;
|
|
}
|
|
|
|
.buzz-sidebar-scrollbar::-webkit-scrollbar {
|
|
height: 10px;
|
|
width: 10px;
|
|
}
|
|
|
|
.buzz-sidebar-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.buzz-sidebar-scrollbar::-webkit-scrollbar-thumb {
|
|
background-clip: content-box;
|
|
background-color: transparent;
|
|
border: 3px solid transparent;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.buzz-sidebar-scrollbar:hover::-webkit-scrollbar-thumb {
|
|
background-color: var(
|
|
--buzz-sidebar-scrollbar-thumb,
|
|
hsl(var(--sidebar-border) / 0.8)
|
|
);
|
|
}
|
|
|
|
/* Channel activity keeps its chrome outside the scrolling surface. The slim,
|
|
* low-contrast thumb belongs only to the activity list beneath the header. */
|
|
.buzz-channel-activity-scrollbar {
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
.buzz-channel-activity-scrollbar::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.buzz-channel-activity-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.buzz-channel-activity-scrollbar::-webkit-scrollbar-thumb {
|
|
background-clip: content-box;
|
|
background-color: hsl(var(--foreground) / 0.15);
|
|
border: 2px solid transparent;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
/*
|
|
* Main-content scroll areas that have sticky blurred chrome inside them.
|
|
* Native overlay scrollbars paint UNDER composited descendants
|
|
* (backdrop-filter + z-index) in WKWebView, so the thumb looks cut off
|
|
* behind the blur bar. A custom scrollbar occupies its own gutter outside
|
|
* the content box, so sticky children can no longer cover it.
|
|
*/
|
|
/*
|
|
* NOTE: no `scrollbar-color` here on purpose — when the standard property is
|
|
* set, engines ignore the `::-webkit-scrollbar` pseudo styles and fall back
|
|
* to overlay scrollbars, which reintroduces the bug.
|
|
*/
|
|
.buzz-content-scrollbar {
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
.buzz-content-scrollbar::-webkit-scrollbar {
|
|
height: 10px;
|
|
width: 10px;
|
|
}
|
|
|
|
.buzz-content-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
/* The native thumb stays permanently transparent (but grabbable — the hit
|
|
* area is real). Visibility while scrolling is handled by a separate overlay
|
|
* indicator element positioned over the gutter, because WebKit does not
|
|
* re-resolve `::-webkit-scrollbar` styles when classes/attributes on the
|
|
* scroller change dynamically. */
|
|
.buzz-content-scrollbar::-webkit-scrollbar-thumb {
|
|
background-clip: content-box;
|
|
background-color: transparent;
|
|
border: 3px solid transparent;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
/* Scrollbar-part pseudo-classes are resolved by the scrollbar itself, so
|
|
* these DO update dynamically — keep the thumb visible under the pointer. */
|
|
.buzz-content-scrollbar::-webkit-scrollbar-thumb:hover,
|
|
.buzz-content-scrollbar::-webkit-scrollbar-thumb:active {
|
|
background-color: hsl(var(--border) / 0.9);
|
|
}
|