3dtours/RecipesCam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(library): mint a server frame's tile once and keep it, always show the whole branch under the open node, and draw the year tick as a grey rule

Browse Source
This commit is contained in:
3dtours
2026-10-13 11:50:01 +07:00
parent 150a55f7a3
commit 6d3ee728b4
5 changed files with 86 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/frontend/src/styles/app.css
+12 -2
View File
@@ -1555,8 +1555,18 @@ form[data-key='immich-modal'] {
read by the year first and the month under it after. */
.lib-ruler-band { position: absolute; left: 0; right: 0; background: var(--bg-elev); border-radius: 3px; }
.lib-ruler-tick { position: absolute; left: 0; width: 10px; height: 1px; background: color-mix(in srgb, var(--text-dim) 30%, transparent); }
.lib-ruler-year { width: 100%; height: 2px; background: var(--text-dim); }
.lib-ruler-year i { position: absolute; top: 2px; left: 14px; font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: 0.06em; color: var(--text-dim); }
/* A year is the ruler's own rule: a hairline across the column with the year in
brackets at the end of it — `-----[2024]`, which is what a ruler reads like.
The line is the months' own grey, since a year is a tick like any other and not
a band; the brackets are drawn here so the tick still reads as its bare year. */
.lib-ruler-tick.lib-ruler-year { left: 0; right: 0; width: auto; height: 1px; background: none; display: flex; align-items: center; gap: 4px; }
.lib-ruler-tick.lib-ruler-year::before { content: ''; flex: 1 1 auto; height: 1px; background: color-mix(in srgb, var(--text-dim) 30%, transparent); }
.lib-ruler-tick.lib-ruler-year i { position: static; font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: 0.02em; color: var(--text-dim); }
.lib-ruler-tick.lib-ruler-year i::before { content: '['; }
.lib-ruler-tick.lib-ruler-year i::after { content: ']'; }
.lib-ruler-tick.lib-ruler-year.on { width: auto; background: none; }
.lib-ruler-tick.lib-ruler-year.on::before { background: var(--accent); }
.lib-ruler-tick.lib-ruler-year.on i { color: var(--accent); }
.lib-ruler-tick.on { width: 22px; background: var(--accent); }
.lib-ruler-needle { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); pointer-events: none; }
/* What the thumbnail wall is read through: the selects and the count of what is