← All changes | assets/css/notes.css +72 -13 1.0.0 → 1.1.13 View file →

		@@ -1,11 +1,9 @@
1	1	/**
2	2	* OpenStation — Pinned notes.
3	3	*
4		- * Paper notes pinned to the wallpaper with a pushpin. Deliberately
5		- * differentiated from the window-like Guidelines sticky cards
6		- * (`.os-sticky-note`): no chrome header, no border, no
7		- * resize handle — a pin, a paper, ink.
	4	+ * Paper notes pinned to the wallpaper with a pushpin: no chrome
	5	+ * header, no border, no resize handle — a pin, a paper, ink.
8	6	*
9	7	* The pastel tokens are shared with the Note Pad widget
10	8	* (`widget-notes.css` consumes them) — keep the slug list in sync
11	9	* with `openstation_notes_colors()` (PHP) and `src/notes/colors.ts`.
		@@ -121,10 +119,10 @@
121	119	z-index: 2;
122	120	pointer-events: none;
123	121	}
124	122
125		-/* Mission-control style overview hides the wall, like the sticky
126		- layer does. */
	123	+/* Mission-control style overview hides the wall — the notes are
	124	+ desktop objects, not part of the window survey. */
127	125	.os-area--overview .os-notes {
128	126	display: none;
129	127	}
130	128
		@@ -258,20 +256,19 @@
258	256	transition: opacity 150ms ease-out;
259	257	z-index: 1;
260	258	}
261	259
262		-/* Push the color dot to the left edge; the action buttons cluster on
263		- the right. Keeps a stable layout whether or not the convert button
264		- is present (it's gated on the `edit_posts` capability). */
265		-.os-pinned-note__meta .os-pinned-note__color-dot {
266		- margin-inline-end: auto;
267		-}
268		-
269	260	.os-pinned-note:hover .os-pinned-note__meta,
270	261	.os-pinned-note:focus-within .os-pinned-note__meta {
271	262	opacity: 1;
272	263	}
273	264
	265	+/* The save chip sits hard left and the colour dot hard right, which
	266	+ keeps both clear of the pushpin painted over the middle of this row. */
	267	+.os-pinned-note__meta .os-pinned-note__color-dot {
	268	+ margin-inline-start: auto;
	269	+}
	270	+
274	271	/* Color dot: painted in the NEXT color — the affordance shows the
275	272	outcome. */
276	273	.os-pinned-note__color-dot {
277	274	width: 20px;
		@@ -360,8 +357,11 @@
360	357	------------------------------------------------------------------ */
361	358
362	359	.os-pinned-note__editor {
363	360	flex: 1 1 auto;
	361	+ /* Let the ink shrink inside the paper's max-height and scroll,
	362	+ rather than spill past the paper's bottom edge. */
	363	+ min-height: 0;
364	364	font-family: var(--dm-note-hand-font);
365	365	}
366	366
367	367	.os-pinned-note__editor::part(textarea) {
		@@ -372,13 +372,30 @@
372	372	caret-color: var(--dm-note-ink, #4d4419);
373	373	font-family: var(--dm-note-hand-font);
374	374	font-size: 14px;
375	375	line-height: 1.45;
	376	+ scrollbar-width: thin;
	377	+ scrollbar-color: color-mix(in srgb, var(--dm-note-ink, #4d4419) 28%, transparent)
	378	+ transparent;
376	379	}
377	380
	381	+/* Long notes: the last line fades into the paper instead of being
	382	+ sliced mid-glyph, so it reads as "keep scrolling", not "cut off".
	383	+ `data-more-below` drops once the reader reaches the end, so the
	384	+ final line is never left faded. */
	385	+.os-pinned-note__editor[data-more-below]::part(textarea),
	386	+.os-pinned-note__body[data-more-below] {
	387	+ -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
	388	+ mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
	389	+}
	390	+
378	391	.os-pinned-note__body {
379	392	flex: 1 1 auto;
	393	+ min-height: 0;
380	394	overflow-y: auto;
	395	+ scrollbar-width: thin;
	396	+ scrollbar-color: color-mix(in srgb, var(--dm-note-ink, #4d4419) 28%, transparent)
	397	+ transparent;
381	398	font-family: var(--dm-note-hand-font);
382	399	font-size: 14px;
383	400	line-height: 1.45;
384	401	white-space: pre-wrap;
		@@ -391,14 +408,56 @@
391	408	}
392	409
393	410	.os-pinned-note__footer {
394	411	display: flex;
	412	+ align-items: center;
	413	+ gap: 4px;
395	414	justify-content: flex-start;
396	415	min-height: 16px;
397	416	}
398	417
	418	+/* Every action lives here rather than in the meta row. The pushpin is
	419	+ painted over the paper's chrome and covers note-relative x 62–138
	420	+ across its ±10px jitter, which is the middle of that row — it only
	421	+ ever had room for two controls clear of the pin, and a third landed
	422	+ underneath where a pointer couldn't reach it.
	423	+
	424	+ Fades as a group on hover/focus, the same way the meta row does, so
	425	+ each button keeps its own 0.75 → 1 hover on top. No gap: each button
	426	+ is a 30px box around a 20px glyph, so its own padding is the spacing. */
	427	+.os-pinned-note__actions {
	428	+ display: flex;
	429	+ align-items: center;
	430	+ opacity: 0;
	431	+ transition: opacity 150ms ease-out;
	432	+}
	433	+
	434	+.os-pinned-note:hover .os-pinned-note__actions,
	435	+.os-pinned-note:focus-within .os-pinned-note__actions {
	436	+ opacity: 1;
	437	+}
	438	+
399	439	.os-pinned-note__status {
400	440	opacity: 0.6;
	441	+}
	442	+
	443	+/* "Move to Trash" — same treatment as the other two actions. It does
	444	+ NOT redden on hover: the other two only brighten, and one action
	445	+ changing hue made the row look inconsistent. The confirm dialog it
	446	+ opens is the danger cue. */
	447	+.os-pinned-note__trash {
	448	+ --os-ui-btn-color: var(--dm-note-ink-soft);
	449	+ opacity: 0.75;
	450	+}
	451	+
	452	+.os-pinned-note__trash:hover {
	453	+ opacity: 1;
	454	+}
	455	+
	456	+.os-pinned-note__trash svg {
	457	+ width: 20px;
	458	+ height: 20px;
	459	+ fill: var(--dm-note-ink, #4d4419);
401	460	}
402	461
403	462	/* Author sticker on read-only public notes — always visible. */
404	463	.os-pinned-note__attribution {