PluginProbe
OpenStation: Desktop Windows, Dock & Virtual Desktops for WP Admin / 1.1.10
OpenStation: Desktop Windows, Dock & Virtual Desktops for WP Admin v1.1.10
1.1.10 1.1.9 1.1.8 1.1.7 1.1.6 1.1.5 1.1.4 1.1.3 1.1.2 1.1.1 1.1.0 1.0.1 1.0.0 0.9.8 0.9.7 0.9.6 0.9.4 0.9.5 0.9.3 0.9.2 0.9.1 0.9.0 0.8.9 0.8.8 0.8.7 All 34 releases
← All changes | assets/css/notes.css +101 -62 0.9.61.1.10 View file →
@@ -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,14 @@
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;
364 361 font-family: var(--dm-note-hand-font);
365 362 }
366 363
367 -.desktop-mode-pinned-note__editor::part(textarea) {
364 +.os-pinned-note__editor::part(textarea) {
368 365 background: transparent;
369 366 border: none;
370 367 box-shadow: none;
371 368 color: var(--dm-note-ink, #4d4419);
@@ -374,9 +371,9 @@
374 371 font-size: 14px;
375 372 line-height: 1.45;
376 373 }
377 374
378 -.desktop-mode-pinned-note__body {
375 +.os-pinned-note__body {
379 376 flex: 1 1 auto;
380 377 overflow-y: auto;
381 378 font-family: var(--dm-note-hand-font);
382 379 font-size: 14px;
@@ -385,24 +382,66 @@
385 382 overflow-wrap: break-word;
386 383 user-select: text;
387 384 }
388 385
389 -.desktop-mode-pinned-note__body::selection {
386 +.os-pinned-note__body::selection {
390 387 background: var(--dm-note-paper-deep, #f4df7c);
391 388 }
392 389
393 -.desktop-mode-pinned-note__footer {
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
399 -.desktop-mode-pinned-note__status {
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 +
419 +.os-pinned-note__status {
400 420 opacity: 0.6;
401 421 }
402 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);
440 +}
441 +
403 442 /* Author sticker on read-only public notes — always visible. */
404 -.desktop-mode-pinned-note__attribution {
443 +.os-pinned-note__attribution {
405 444 display: inline-flex;
406 445 align-items: center;
407 446 gap: 6px;
408 447 align-self: flex-start;
@@ -422,19 +461,19 @@
422 461 ------------------------------------------------------------------ */
423 462
424 463 /* The imprint: while the pin is out, the real note stays as a faint
425 464 "where it was" mark. Class stamped by the DragManager at lift. */
426 -.desktop-mode-pinned-note.desktop-mode-file-tile--dragging {
465 +.os-pinned-note.os-file-tile--dragging {
427 466 opacity: 0.18;
428 467 filter: saturate(0.3);
429 468 }
430 469
431 -.desktop-mode-pinned-note.desktop-mode-file-tile--dragging .desktop-mode-pinned-note__paper {
470 +.os-pinned-note.os-file-tile--dragging .os-pinned-note__paper {
432 471 box-shadow: none;
433 472 }
434 473
435 474 /* Keyboard move mode: carried look on the real note. */
436 -.desktop-mode-pinned-note--move-mode .desktop-mode-pinned-note__paper {
475 +.os-pinned-note--move-mode .os-pinned-note__paper {
437 476 box-shadow:
438 477 0 3px 5px rgba(0, 0, 0, 0.2),
439 478 0 26px 48px -10px rgba(0, 0, 0, 0.42),
440 479 inset 0 1px 0 rgba(255, 255, 255, 0.35);
@@ -441,23 +480,23 @@
441 480 }
442 481
443 482 /* The ghost — the note you're carrying by its pin. The DragManager
444 483 owns the ROOT's transform; the pendulum owns the swing wrapper. */
445 -.desktop-mode-pinned-note-ghost {
484 +.os-pinned-note-ghost {
446 485 position: relative;
447 486 }
448 487
449 -.desktop-mode-pinned-note-ghost__swing {
488 +.os-pinned-note-ghost__swing {
450 489 position: relative;
451 490 width: 100%;
452 491 height: 100%;
453 492 }
454 493
455 -.desktop-mode-pinned-note-ghost .desktop-mode-pinned-note__pin {
494 +.os-pinned-note-ghost .os-pinned-note__pin {
456 495 pointer-events: none;
457 496 }
458 497
459 -.desktop-mode-pinned-note-ghost__paper {
498 +.os-pinned-note-ghost__paper {
460 499 /* Clearly airborne. */
461 500 transform: scale(1.04) rotate(2.5deg);
462 501 transform-origin: 50% 14px;
463 502 box-shadow:
@@ -485,9 +524,9 @@
485 524 border-radius: 2px;
486 525 }
487 526
488 527 /* Over the recycle bin: the paper knows what's coming. */
489 -.desktop-mode-pinned-note-ghost--doom .desktop-mode-pinned-note-ghost__paper {
528 +.os-pinned-note-ghost--doom .os-pinned-note-ghost__paper {
490 529 transform: scale(0.88);
491 530 filter: saturate(0.75) brightness(0.95);
492 531 animation: dm-note-doom-shiver 180ms ease-in-out infinite alternate;
493 532 }
@@ -502,9 +541,9 @@
502 541 }
503 542 }
504 543
505 544 /* The one-shot "thunk" ripple at the pin anchor. */
506 -.desktop-mode-pinned-note__ripple {
545 +.os-pinned-note__ripple {
507 546 position: absolute;
508 547 left: calc(50% + var(--dm-pin-dx, 0px) - 4px);
509 548 top: 6px;
510 549 width: 8px;
@@ -518,14 +557,14 @@
518 557 Reduced motion
519 558 ------------------------------------------------------------------ */
520 559
521 560 @media (prefers-reduced-motion: reduce) {
522 - .desktop-mode-pinned-note__paper,
561 + .os-pinned-note__paper,
523 562 .dm-notes-pad__sheet {
524 563 transition: none;
525 564 }
526 565
527 - .desktop-mode-pinned-note-ghost--doom .desktop-mode-pinned-note-ghost__paper {
566 + .os-pinned-note-ghost--doom .os-pinned-note-ghost__paper {
528 567 animation: none;
529 568 transform: scale(0.92);
530 569 }
531 570 }