gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-19 12:14:23 +01:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity

ui/pager: improve layout

Browse Source
This commit is contained in:
Adorian Doran 2026-02-17 12:42:55 +02:00
parent 0621dfbac7
commit 568a668e9f
1 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/client/src/widgets/collections/Pagination.css
View File

@ -1,5 +1,6 @@
:where(.note-list-pager) {
--note-list-pager-page-button-width: 40px;
--note-list-pager-page-button-gap: 3px;
--note-list-pager-ellipsis-width: 20px;
--note-list-pager-current-page-button-background-color: var(--active-item-background-color);
@ -26,12 +27,15 @@
display: flex;
align-items: baseline;
justify-content: space-around;
gap: 2px;
gap: var(--note-list-pager-page-button-gap);
&.note-list-pager-ellipsis-present {
/* Prevent the prev/next buttons from shifting when ellipses appear or disappear */
--_gap-max-width: calc((var(--note-list-pager-page-button-count) + 2) * var(--note-list-pager-page-button-gap));
min-width: calc(var(--note-list-pager-page-button-count) * var(--note-list-pager-page-button-width)
+ (var(--note-list-pager-ellipsis-width) * 2));
+ (var(--note-list-pager-ellipsis-width) * 2)
+ var(--_gap-max-width));
}
.note-list-pager-page-button {
@ -50,7 +54,6 @@
.note-list-pager-ellipsis {
display: inline-block;
width: var(--note-list-pager-ellipsis-width);
gap: 0;
text-align: center;
opacity: .5;
}