| @@ -1,15 +1,13 @@ | ||
| 1 | 1 | /** |
| 2 | - * Desktop Mode — Pinned notes. | |
| 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 | - * (`.desktop-mode-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 | - * with `desktop_mode_notes_colors()` (PHP) and `src/notes/colors.ts`. | |
| 9 | + * with `openstation_notes_colors()` (PHP) and `src/notes/colors.ts`. | |
| 12 | 10 | */ |
| 13 | 11 | |
| 14 | 12 | /* ------------------------------------------------------------------ |
| 15 | 13 | Pastel paper tokens — light, then dimmed dark-scheme variants |
| @@ -114,9 +112,9 @@ | ||
| 114 | 112 | /* ------------------------------------------------------------------ |
| 115 | 113 | Layer root |
| 116 | 114 | ------------------------------------------------------------------ */ |
| 117 | 115 | |
| 118 | -.desktop-mode-notes { | |
| 116 | +.os-notes { | |
| 119 | 117 | position: absolute; |
| 120 | 118 | inset: 0; |
| 121 | 119 | z-index: 2; |
| 122 | 120 | pointer-events: none; |
| @@ -121,15 +119,15 @@ | ||
| 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. */ | |
| 127 | -.desktop-mode-area--overview .desktop-mode-notes { | |
| 123 | +/* Mission-control style overview hides the wall — the notes are | |
| 124 | + desktop objects, not part of the window survey. */ | |
| 125 | +.os-area--overview .os-notes { | |
| 128 | 126 | display: none; |
| 129 | 127 | } |
| 130 | 128 | |
| 131 | -.desktop-mode-notes__live { | |
| 129 | +.os-notes__live { | |
| 132 | 130 | position: absolute; |
| 133 | 131 | width: 1px; |
| 134 | 132 | height: 1px; |
| 135 | 133 | overflow: hidden; |
| @@ -139,9 +137,9 @@ | ||
| 139 | 137 | /* ------------------------------------------------------------------ |
| 140 | 138 | The pinned note |
| 141 | 139 | ------------------------------------------------------------------ */ |
| 142 | 140 | |
| 143 | -.desktop-mode-pinned-note { | |
| 141 | +.os-pinned-note { | |
| 144 | 142 | position: absolute; |
| 145 | 143 | width: 208px; |
| 146 | 144 | pointer-events: auto; |
| 147 | 145 | transform: rotate(var(--dm-note-rot, 0deg)); |
| @@ -148,9 +146,9 @@ | ||
| 148 | 146 | /* The note hangs FROM the pin. */ |
| 149 | 147 | transform-origin: calc(50% + var(--dm-pin-dx, 0px)) 14px; |
| 150 | 148 | } |
| 151 | 149 | |
| 152 | -.desktop-mode-pinned-note__paper { | |
| 150 | +.os-pinned-note__paper { | |
| 153 | 151 | position: relative; |
| 154 | 152 | min-height: 190px; |
| 155 | 153 | max-height: 320px; |
| 156 | 154 | display: flex; |
| @@ -177,9 +175,9 @@ | ||
| 177 | 175 | transition: box-shadow 200ms ease-out; |
| 178 | 176 | } |
| 179 | 177 | |
| 180 | 178 | /* Focus = the paper lifts a hair; never an outline rectangle. */ |
| 181 | -.desktop-mode-pinned-note:focus-within .desktop-mode-pinned-note__paper { | |
| 179 | +.os-pinned-note:focus-within .os-pinned-note__paper { | |
| 182 | 180 | box-shadow: |
| 183 | 181 | 0 2px 3px rgba(0, 0, 0, 0.18), |
| 184 | 182 | 0 12px 26px -6px rgba(0, 0, 0, 0.34), |
| 185 | 183 | inset 0 1px 0 rgba(255, 255, 255, 0.35), |
| @@ -194,9 +192,9 @@ | ||
| 194 | 192 | /* ------------------------------------------------------------------ |
| 195 | 193 | The pushpin |
| 196 | 194 | ------------------------------------------------------------------ */ |
| 197 | 195 | |
| 198 | -.desktop-mode-pinned-note__pin { | |
| 196 | +.os-pinned-note__pin { | |
| 199 | 197 | position: absolute; |
| 200 | 198 | /* Needle tip lands at (50% + dx, 10px) of the note. Tip fractions |
| 201 | 199 | from assets/images/pushpin.svg: 57.0% / 52.5%. Keep the pixel |
| 202 | 200 | constants in sync with PIN_WIDTH / PIN_HEIGHT in src/notes/pin.ts. */ |
| @@ -213,19 +211,19 @@ | ||
| 213 | 211 | transform-origin: 57% 52.5%; |
| 214 | 212 | touch-action: none; |
| 215 | 213 | } |
| 216 | 214 | |
| 217 | -.desktop-mode-pinned-note__pin:active { | |
| 215 | +.os-pinned-note__pin:active { | |
| 218 | 216 | cursor: grabbing; |
| 219 | 217 | } |
| 220 | 218 | |
| 221 | -.desktop-mode-pinned-note__pin:focus-visible { | |
| 219 | +.os-pinned-note__pin:focus-visible { | |
| 222 | 220 | outline: 2px solid var(--wp-admin-theme-color, #3858e9); |
| 223 | 221 | outline-offset: 3px; |
| 224 | 222 | border-radius: 50%; |
| 225 | 223 | } |
| 226 | 224 | |
| 227 | -.desktop-mode-pinned-note__pin-img { | |
| 225 | +.os-pinned-note__pin-img { | |
| 228 | 226 | display: block; |
| 229 | 227 | width: 56px; |
| 230 | 228 | height: 52px; |
| 231 | 229 | pointer-events: none; |
| @@ -231,15 +229,15 @@ | ||
| 231 | 229 | pointer-events: none; |
| 232 | 230 | } |
| 233 | 231 | |
| 234 | 232 | /* Other users' pins are steel — scenery, not a handle. */ |
| 235 | -.desktop-mode-pinned-note[data-owner="other"] .desktop-mode-pinned-note__pin { | |
| 233 | +.os-pinned-note[data-owner="other"] .os-pinned-note__pin { | |
| 236 | 234 | cursor: default; |
| 237 | 235 | pointer-events: none; |
| 238 | 236 | transform: rotate(var(--dm-pin-rot, 0deg)) scale(0.9); |
| 239 | 237 | } |
| 240 | 238 | |
| 241 | -.desktop-mode-pinned-note[data-owner="other"] .desktop-mode-pinned-note__pin-img { | |
| 239 | +.os-pinned-note[data-owner="other"] .os-pinned-note__pin-img { | |
| 242 | 240 | filter: saturate(0.12) brightness(1.08) contrast(0.95); |
| 243 | 241 | } |
| 244 | 242 | |
| 245 | 243 | /* ------------------------------------------------------------------ |
| @@ -245,9 +243,9 @@ | ||
| 245 | 243 | /* ------------------------------------------------------------------ |
| 246 | 244 | Owner chrome — hover/focus-revealed |
| 247 | 245 | ------------------------------------------------------------------ */ |
| 248 | 246 | |
| 249 | -.desktop-mode-pinned-note__meta { | |
| 247 | +.os-pinned-note__meta { | |
| 250 | 248 | position: absolute; |
| 251 | 249 | inset-inline: 8px; |
| 252 | 250 | top: 6px; |
| 253 | 251 | display: flex; |
| @@ -258,23 +256,22 @@ | ||
| 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 | -.desktop-mode-pinned-note__meta .desktop-mode-pinned-note__color-dot { | |
| 266 | - margin-inline-end: auto; | |
| 260 | +.os-pinned-note:hover .os-pinned-note__meta, | |
| 261 | +.os-pinned-note:focus-within .os-pinned-note__meta { | |
| 262 | + opacity: 1; | |
| 267 | 263 | } |
| 268 | 264 | |
| 269 | -.desktop-mode-pinned-note:hover .desktop-mode-pinned-note__meta, | |
| 270 | -.desktop-mode-pinned-note:focus-within .desktop-mode-pinned-note__meta { | |
| 271 | - opacity: 1; | |
| 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; | |
| 272 | 269 | } |
| 273 | 270 | |
| 274 | 271 | /* Color dot: painted in the NEXT color — the affordance shows the |
| 275 | 272 | outcome. */ |
| 276 | -.desktop-mode-pinned-note__color-dot { | |
| 273 | +.os-pinned-note__color-dot { | |
| 277 | 274 | width: 20px; |
| 278 | 275 | height: 20px; |
| 279 | 276 | padding: 0; |
| 280 | 277 | border: 1px solid rgba(0, 0, 0, 0.15); |
| @@ -283,27 +280,27 @@ | ||
| 283 | 280 | cursor: pointer; |
| 284 | 281 | transition: transform 140ms ease-out; |
| 285 | 282 | } |
| 286 | 283 | |
| 287 | -.desktop-mode-pinned-note__color-dot:hover { | |
| 284 | +.os-pinned-note__color-dot:hover { | |
| 288 | 285 | transform: scale(1.25); |
| 289 | 286 | } |
| 290 | 287 | |
| 291 | -.desktop-mode-pinned-note__color-dot:focus-visible { | |
| 288 | +.os-pinned-note__color-dot:focus-visible { | |
| 292 | 289 | outline: 2px solid var(--wp-admin-theme-color, #3858e9); |
| 293 | 290 | outline-offset: 2px; |
| 294 | 291 | } |
| 295 | 292 | |
| 296 | -.desktop-mode-pinned-note__visibility { | |
| 297 | - --wpd-btn-color: var(--dm-note-ink-soft); | |
| 293 | +.os-pinned-note__visibility { | |
| 294 | + --os-ui-btn-color: var(--dm-note-ink-soft); | |
| 298 | 295 | opacity: 0.75; |
| 299 | 296 | } |
| 300 | 297 | |
| 301 | -.desktop-mode-pinned-note__visibility:hover { | |
| 298 | +.os-pinned-note__visibility:hover { | |
| 302 | 299 | opacity: 1; |
| 303 | 300 | } |
| 304 | 301 | |
| 305 | -.desktop-mode-pinned-note__visibility .dashicons { | |
| 302 | +.os-pinned-note__visibility .dashicons { | |
| 306 | 303 | /* Match the color-cycle dot (20px) — the lock/globe was too easy |
| 307 | 304 | to miss at dashicons' default size. */ |
| 308 | 305 | font-size: 20px; |
| 309 | 306 | width: 20px; |
| @@ -312,18 +309,18 @@ | ||
| 312 | 309 | } |
| 313 | 310 | |
| 314 | 311 | /* "Convert to post" — same treatment as the visibility toggle. Only |
| 315 | 312 | rendered for users who can author posts. */ |
| 316 | -.desktop-mode-pinned-note__convert { | |
| 317 | - --wpd-btn-color: var(--dm-note-ink-soft); | |
| 313 | +.os-pinned-note__convert { | |
| 314 | + --os-ui-btn-color: var(--dm-note-ink-soft); | |
| 318 | 315 | opacity: 0.75; |
| 319 | 316 | } |
| 320 | 317 | |
| 321 | -.desktop-mode-pinned-note__convert:hover { | |
| 318 | +.os-pinned-note__convert:hover { | |
| 322 | 319 | opacity: 1; |
| 323 | 320 | } |
| 324 | 321 | |
| 325 | -.desktop-mode-pinned-note__convert svg { | |
| 322 | +.os-pinned-note__convert svg { | |
| 326 | 323 | width: 20px; |
| 327 | 324 | height: 20px; |
| 328 | 325 | fill: var(--dm-note-ink, #4d4419); |
| 329 | 326 | } |
| @@ -331,12 +328,12 @@ | ||
| 331 | 328 | /* ------------------------------------------------------------------ |
| 332 | 329 | "Convert to post" drop-target highlight |
| 333 | 330 | ------------------------------------------------------------------ |
| 334 | 331 | Set on the Posts dock tile / native Posts window body while a note |
| 335 | - pin is dragged over it (`data-desktop-mode-posts-drop-active`, from | |
| 332 | + pin is dragged over it (`data-os-posts-drop-active`, from | |
| 336 | 333 | src/notes/posts-drop-target.ts). Mirrors the recycle-bin affordance. */ |
| 337 | -.desktop-mode-dock__item[data-menu-slug="menu-posts"][data-desktop-mode-posts-drop-active], | |
| 338 | -.desktop-mode-dock__item[data-menu-slug="editphp"][data-desktop-mode-posts-drop-active] { | |
| 334 | +.os-dock__item[data-menu-slug="menu-posts"][data-os-posts-drop-active], | |
| 335 | +.os-dock__item[data-menu-slug="editphp"][data-os-posts-drop-active] { | |
| 339 | 336 | outline: 2px solid var(--wp-admin-theme-color, #3858e9); |
| 340 | 337 | outline-offset: 2px; |
| 341 | 338 | border-radius: 12px; |
| 342 | 339 | background: color-mix( |
| @@ -348,9 +345,9 @@ | ||
| 348 | 345 | outline-color 80ms ease, |
| 349 | 346 | background 80ms ease; |
| 350 | 347 | } |
| 351 | 348 | |
| 352 | -[data-desktop-mode-posts-root][data-desktop-mode-posts-drop-active] { | |
| 349 | +[data-os-posts-root][data-os-posts-drop-active] { | |
| 353 | 350 | position: relative; |
| 354 | 351 | box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color, #3858e9); |
| 355 | 352 | transition: box-shadow 80ms ease; |
| 356 | 353 | } |
| @@ -358,14 +355,17 @@ | ||
| 358 | 355 | /* ------------------------------------------------------------------ |
| 359 | 356 | Ink |
| 360 | 357 | ------------------------------------------------------------------ */ |
| 361 | 358 | |
| 362 | -.desktop-mode-pinned-note__editor { | |
| 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 | -.desktop-mode-pinned-note__editor::part(textarea) { | |
| 367 | +.os-pinned-note__editor::part(textarea) { | |
| 368 | 368 | background: transparent; |
| 369 | 369 | border: none; |
| 370 | 370 | box-shadow: none; |
| 371 | 371 | color: var(--dm-note-ink, #4d4419); |
| @@ -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 | |
| 378 | -.desktop-mode-pinned-note__body { | |
| 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 | + | |
| 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; |
| @@ -385,24 +402,66 @@ | ||
| 385 | 402 | overflow-wrap: break-word; |
| 386 | 403 | user-select: text; |
| 387 | 404 | } |
| 388 | 405 | |
| 389 | -.desktop-mode-pinned-note__body::selection { | |
| 406 | +.os-pinned-note__body::selection { | |
| 390 | 407 | background: var(--dm-note-paper-deep, #f4df7c); |
| 391 | 408 | } |
| 392 | 409 | |
| 393 | -.desktop-mode-pinned-note__footer { | |
| 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 | |
| 399 | -.desktop-mode-pinned-note__status { | |
| 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 | + | |
| 439 | +.os-pinned-note__status { | |
| 400 | 440 | opacity: 0.6; |
| 401 | 441 | } |
| 402 | 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); | |
| 460 | +} | |
| 461 | + | |
| 403 | 462 | /* Author sticker on read-only public notes — always visible. */ |
| 404 | -.desktop-mode-pinned-note__attribution { | |
| 463 | +.os-pinned-note__attribution { | |
| 405 | 464 | display: inline-flex; |
| 406 | 465 | align-items: center; |
| 407 | 466 | gap: 6px; |
| 408 | 467 | align-self: flex-start; |
| @@ -422,19 +481,19 @@ | ||
| 422 | 481 | ------------------------------------------------------------------ */ |
| 423 | 482 | |
| 424 | 483 | /* The imprint: while the pin is out, the real note stays as a faint |
| 425 | 484 | "where it was" mark. Class stamped by the DragManager at lift. */ |
| 426 | -.desktop-mode-pinned-note.desktop-mode-file-tile--dragging { | |
| 485 | +.os-pinned-note.os-file-tile--dragging { | |
| 427 | 486 | opacity: 0.18; |
| 428 | 487 | filter: saturate(0.3); |
| 429 | 488 | } |
| 430 | 489 | |
| 431 | -.desktop-mode-pinned-note.desktop-mode-file-tile--dragging .desktop-mode-pinned-note__paper { | |
| 490 | +.os-pinned-note.os-file-tile--dragging .os-pinned-note__paper { | |
| 432 | 491 | box-shadow: none; |
| 433 | 492 | } |
| 434 | 493 | |
| 435 | 494 | /* Keyboard move mode: carried look on the real note. */ |
| 436 | -.desktop-mode-pinned-note--move-mode .desktop-mode-pinned-note__paper { | |
| 495 | +.os-pinned-note--move-mode .os-pinned-note__paper { | |
| 437 | 496 | box-shadow: |
| 438 | 497 | 0 3px 5px rgba(0, 0, 0, 0.2), |
| 439 | 498 | 0 26px 48px -10px rgba(0, 0, 0, 0.42), |
| 440 | 499 | inset 0 1px 0 rgba(255, 255, 255, 0.35); |
| @@ -441,23 +500,23 @@ | ||
| 441 | 500 | } |
| 442 | 501 | |
| 443 | 502 | /* The ghost — the note you're carrying by its pin. The DragManager |
| 444 | 503 | owns the ROOT's transform; the pendulum owns the swing wrapper. */ |
| 445 | -.desktop-mode-pinned-note-ghost { | |
| 504 | +.os-pinned-note-ghost { | |
| 446 | 505 | position: relative; |
| 447 | 506 | } |
| 448 | 507 | |
| 449 | -.desktop-mode-pinned-note-ghost__swing { | |
| 508 | +.os-pinned-note-ghost__swing { | |
| 450 | 509 | position: relative; |
| 451 | 510 | width: 100%; |
| 452 | 511 | height: 100%; |
| 453 | 512 | } |
| 454 | 513 | |
| 455 | -.desktop-mode-pinned-note-ghost .desktop-mode-pinned-note__pin { | |
| 514 | +.os-pinned-note-ghost .os-pinned-note__pin { | |
| 456 | 515 | pointer-events: none; |
| 457 | 516 | } |
| 458 | 517 | |
| 459 | -.desktop-mode-pinned-note-ghost__paper { | |
| 518 | +.os-pinned-note-ghost__paper { | |
| 460 | 519 | /* Clearly airborne. */ |
| 461 | 520 | transform: scale(1.04) rotate(2.5deg); |
| 462 | 521 | transform-origin: 50% 14px; |
| 463 | 522 | box-shadow: |
| @@ -485,9 +544,9 @@ | ||
| 485 | 544 | border-radius: 2px; |
| 486 | 545 | } |
| 487 | 546 | |
| 488 | 547 | /* Over the recycle bin: the paper knows what's coming. */ |
| 489 | -.desktop-mode-pinned-note-ghost--doom .desktop-mode-pinned-note-ghost__paper { | |
| 548 | +.os-pinned-note-ghost--doom .os-pinned-note-ghost__paper { | |
| 490 | 549 | transform: scale(0.88); |
| 491 | 550 | filter: saturate(0.75) brightness(0.95); |
| 492 | 551 | animation: dm-note-doom-shiver 180ms ease-in-out infinite alternate; |
| 493 | 552 | } |
| @@ -502,9 +561,9 @@ | ||
| 502 | 561 | } |
| 503 | 562 | } |
| 504 | 563 | |
| 505 | 564 | /* The one-shot "thunk" ripple at the pin anchor. */ |
| 506 | -.desktop-mode-pinned-note__ripple { | |
| 565 | +.os-pinned-note__ripple { | |
| 507 | 566 | position: absolute; |
| 508 | 567 | left: calc(50% + var(--dm-pin-dx, 0px) - 4px); |
| 509 | 568 | top: 6px; |
| 510 | 569 | width: 8px; |
| @@ -518,14 +577,14 @@ | ||
| 518 | 577 | Reduced motion |
| 519 | 578 | ------------------------------------------------------------------ */ |
| 520 | 579 | |
| 521 | 580 | @media (prefers-reduced-motion: reduce) { |
| 522 | - .desktop-mode-pinned-note__paper, | |
| 581 | + .os-pinned-note__paper, | |
| 523 | 582 | .dm-notes-pad__sheet { |
| 524 | 583 | transition: none; |
| 525 | 584 | } |
| 526 | 585 | |
| 527 | - .desktop-mode-pinned-note-ghost--doom .desktop-mode-pinned-note-ghost__paper { | |
| 586 | + .os-pinned-note-ghost--doom .os-pinned-note-ghost__paper { | |
| 528 | 587 | animation: none; |
| 529 | 588 | transform: scale(0.92); |
| 530 | 589 | } |
| 531 | 590 | } |
