73 lines
3.2 KiB
CSS
73 lines
3.2 KiB
CSS
/*
|
|
* ShrinkVertically -- keep the board's horizontal scrollbar visible when columns
|
|
* are vertically collapsed (gear menu "collapse vertically" / shortcut, which sets
|
|
* localStorage vertical_scroll=0 and adds the class .board-task-list-compact).
|
|
*
|
|
* Kanboard core sets: .board-task-list-compact { max-height: 90vh; }
|
|
* That 90vh is measured from the top of the viewport and ignores the page header
|
|
* above the board, so column + header together exceed the viewport and push the
|
|
* horizontal scrollbar below the fold.
|
|
*
|
|
* We instead reserve a fixed pixel budget for the chrome above and below the task
|
|
* list (page header + board column header + the horizontal scrollbar + a little
|
|
* breathing room). A fixed-px budget is more reliable than a proportional vh value
|
|
* because that chrome is a fixed height regardless of screen size.
|
|
*
|
|
* The pixel budget is the --sv-shrink-offset CSS variable. It is injected in the
|
|
* page head from the plugin setting (Settings -> Shrink Vertically); when unset it
|
|
* falls back to 240px below. Increase it if the scrollbar is still clipped, or
|
|
* decrease it to make the columns taller.
|
|
*
|
|
* The selector is intentionally more specific than core's single-class rule, and
|
|
* uses !important, so this override wins even alongside a theme (e.g. Essential).
|
|
*
|
|
* The min-height override is essential: Kanboard's drag-and-drop sets an INLINE
|
|
* min-height on each column equal to its full content height
|
|
* (BoardDragAndDrop.js: css("min-height", parent().height())). In CSS, min-height
|
|
* beats max-height, so that inline value keeps tall columns from shrinking and our
|
|
* max-height alone does nothing. A stylesheet !important overrides the inline
|
|
* (non-important) min-height, so we reset it to 0 and let max-height win.
|
|
*/
|
|
#board td .board-task-list.board-task-list-compact {
|
|
max-height: calc(100vh - var(--sv-shrink-offset, 240px)) !important;
|
|
min-height: 0 !important;
|
|
}
|
|
|
|
/*
|
|
* 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.
|
|
*/
|
|
.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 {
|
|
height: var(--sv-bar-size, 25px);
|
|
}
|
|
|
|
.sv-top-scroll::-webkit-scrollbar-track {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.sv-top-scroll::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 0, 0, 0.35);
|
|
border-radius: 6px;
|
|
}
|