beco/ShrinkVertically
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

bar from scratch Assets

Browse Source
This commit is contained in:
Ruben Carlo Benante
2026-07-01 10:05:52 -03:00
parent 5cccbef7d7
commit b8308782f8
2 changed files with 147 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
Asset/css/shrink-vertically.css
View File

@@ -34,39 +34,40 @@
}
/*
* Optional top horizontal scrollbar (added by Asset/js/top-scrollbar.js when the
* "Add a top horizontal scrollbar" setting is enabled). The inner element is given a
* width equal to the board's scrollable width by the script; overflow-x: auto then
* produces a scrollbar whose range mirrors the board's own bottom scrollbar. The 1px
* inner height keeps the bar to just the scrollbar itself.
* Optional custom top horizontal scrollbar (built by Asset/js/top-scrollbar.js when the
* "Add a top horizontal scrollbar" setting is enabled). It is a track + draggable thumb,
* not a native scrollbar, so it renders and can be sized identically in every browser
* (Chrome, Firefox, Safari) and on touch. Thickness follows the --sv-bar-size variable
* (Settings -> Shrink Vertically), injected in the page head; falls back to 25px.
* touch-action: none lets a finger drag the thumb without scrolling the page.
*/
.sv-top-scroll {
overflow-x: auto;
overflow-y: hidden;
}
.sv-top-scroll-inner {
height: 1px;
}
/*
* Make the top scrollbar thick enough to grab easily (touch / big fingers).
* WebKit/Blink (most desktop browsers and mobile Chrome/Safari) let us size the
* scrollbar; styling the thumb/track is needed for it to stay visible once customised.
* Thickness comes from the --sv-bar-size variable (Settings -> Shrink Vertically),
* injected in the page head; falls back to 25px. Chromium/WebKit only (Chrome/Edge/
* Safari, mobile Chrome/Safari); Firefox ignores ::-webkit-scrollbar and keeps its
* default thin bar -- accepted for now.
*/
.sv-top-scroll::-webkit-scrollbar {
position: relative;
width: 100%;
height: var(--sv-bar-size, 25px);
background: rgba(0, 0, 0, 0.06);
border-radius: 4px;
overflow: hidden;
touch-action: none;
}
.sv-top-scroll::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
}
.sv-top-scroll::-webkit-scrollbar-thumb {
.sv-top-scroll-thumb {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: rgba(0, 0, 0, 0.35);
border-radius: 6px;
border-radius: 4px;
cursor: grab;
touch-action: none;
}
.sv-top-scroll.sv-dragging .sv-top-scroll-thumb {
cursor: grabbing;
background: rgba(0, 0, 0, 0.5);
}
.sv-dragging {
user-select: none;
}