| @@ -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; |
| @@ -391,14 +388,56 @@ | ||
| 391 | 388 | } |
| 392 | 389 | |
| 393 | 390 | .os-pinned-note__footer { |
| 394 | 391 | display: flex; |
| 392 | + align-items: center; | |
| 393 | + gap: 4px; | |
| 395 | 394 | justify-content: flex-start; |
| 396 | 395 | min-height: 16px; |
| 397 | 396 | } |
| 398 | 397 | |
| 398 | +/* Every action lives here rather than in the meta row. The pushpin is | |
| 399 | + painted over the paper's chrome and covers note-relative x 62–138 | |
| 400 | + across its ±10px jitter, which is the middle of that row — it only | |
| 401 | + ever had room for two controls clear of the pin, and a third landed | |
| 402 | + underneath where a pointer couldn't reach it. | |
| 403 | + | |
| 404 | + Fades as a group on hover/focus, the same way the meta row does, so | |
| 405 | + each button keeps its own 0.75 → 1 hover on top. No gap: each button | |
| 406 | + is a 30px box around a 20px glyph, so its own padding is the spacing. */ | |
| 407 | +.os-pinned-note__actions { | |
| 408 | + display: flex; | |
| 409 | + align-items: center; | |
| 410 | + opacity: 0; | |
| 411 | + transition: opacity 150ms ease-out; | |
| 412 | +} | |
| 413 | + | |
| 414 | +.os-pinned-note:hover .os-pinned-note__actions, | |
| 415 | +.os-pinned-note:focus-within .os-pinned-note__actions { | |
| 416 | + opacity: 1; | |
| 417 | +} | |
| 418 | + | |
| 399 | 419 | .os-pinned-note__status { |
| 400 | 420 | opacity: 0.6; |
| 421 | +} | |
| 422 | + | |
| 423 | +/* "Move to Trash" — same treatment as the other two actions. It does | |
| 424 | + NOT redden on hover: the other two only brighten, and one action | |
| 425 | + changing hue made the row look inconsistent. The confirm dialog it | |
| 426 | + opens is the danger cue. */ | |
| 427 | +.os-pinned-note__trash { | |
| 428 | + --os-ui-btn-color: var(--dm-note-ink-soft); | |
| 429 | + opacity: 0.75; | |
| 430 | +} | |
| 431 | + | |
| 432 | +.os-pinned-note__trash:hover { | |
| 433 | + opacity: 1; | |
| 434 | +} | |
| 435 | + | |
| 436 | +.os-pinned-note__trash svg { | |
| 437 | + width: 20px; | |
| 438 | + height: 20px; | |
| 439 | + fill: var(--dm-note-ink, #4d4419); | |
| 401 | 440 | } |
| 402 | 441 | |
| 403 | 442 | /* Author sticker on read-only public notes — always visible. */ |
| 404 | 443 | .os-pinned-note__attribution { |
