| @@ -1,8 +1,8 @@ | ||
| 1 | 1 | /** |
| 2 | 2 | * Window links — visual ties between related windows. |
| 3 | 3 | * |
| 4 | - * The link layer sits inside `#desktop-mode-area`, absolutely | |
| 4 | + * The link layer sits inside `#os-area`, absolutely | |
| 5 | 5 | * positioned over the whole desktop. At rest it stacks BETWEEN the |
| 6 | 6 | * widget layer (z 1) and the windows (z 100+) — wires on the desk, |
| 7 | 7 | * visible in the gaps. While a relation-group member is focused, the |
| 8 | 8 | * render host lifts the layer to the group's z-ceiling via an inline |
| @@ -10,9 +10,9 @@ | ||
| 10 | 10 | * `pointer-events: none` throughout — the layer must never steal a |
| 11 | 11 | * click from the desktop or a window. |
| 12 | 12 | * |
| 13 | 13 | * Tuning knobs live in `variables.css` as |
| 14 | - * `--desktop-mode-window-link-*`; the SVG structure comes from the | |
| 14 | + * `--os-window-link-*`; the SVG structure comes from the | |
| 15 | 15 | * built-in `svg-splines` renderer (`src/window-links/renderers/`). |
| 16 | 16 | * Third-party renderers mount their own children into the same layer |
| 17 | 17 | * and are free to ignore all of this. |
| 18 | 18 | * |
| @@ -18,12 +18,12 @@ | ||
| 18 | 18 | * |
| 19 | 19 | * @since 0.9.4 |
| 20 | 20 | */ |
| 21 | 21 | |
| 22 | -.desktop-mode-window-links { | |
| 22 | +.os-window-links { | |
| 23 | 23 | position: absolute; |
| 24 | 24 | inset: 0; |
| 25 | - z-index: var(--desktop-mode-z-window-links, 50); | |
| 25 | + z-index: var(--os-z-window-links, 50); | |
| 26 | 26 | pointer-events: none; |
| 27 | 27 | opacity: 0; |
| 28 | 28 | transition: opacity 0.25s ease; |
| 29 | 29 | } |
| @@ -32,25 +32,25 @@ | ||
| 32 | 32 | * Toggled by the render host per the `windowLinkVisibility` OS |
| 33 | 33 | * setting: always on under `always`, tracking group focus under |
| 34 | 34 | * `focus`. The fade lives here so every renderer inherits it. |
| 35 | 35 | */ |
| 36 | -.desktop-mode-window-links--visible { | |
| 36 | +.os-window-links--visible { | |
| 37 | 37 | opacity: 1; |
| 38 | 38 | } |
| 39 | 39 | |
| 40 | 40 | @media (prefers-reduced-motion: reduce) { |
| 41 | - .desktop-mode-window-links { | |
| 41 | + .os-window-links { | |
| 42 | 42 | transition: none; |
| 43 | 43 | } |
| 44 | 44 | } |
| 45 | 45 | |
| 46 | -.desktop-mode-window-links__svg { | |
| 46 | +.os-window-links__svg { | |
| 47 | 47 | display: block; |
| 48 | 48 | width: 100%; |
| 49 | 49 | height: 100%; |
| 50 | 50 | } |
| 51 | 51 | |
| 52 | -.desktop-mode-window-link__path { | |
| 52 | +.os-window-link__path { | |
| 53 | 53 | fill: none; |
| 54 | 54 | /* Solid scheme color + opacity for the resting dimming. No |
| 55 | 55 | color-mix() anywhere in this chain: when a custom property's |
| 56 | 56 | value can't resolve, the consuming declaration goes invalid at |
| @@ -56,11 +56,11 @@ | ||
| 56 | 56 | value can't resolve, the consuming declaration goes invalid at |
| 57 | 57 | computed-value time and an SVG stroke resets to `none` — |
| 58 | 58 | invisible lines under floating black endpoint markers. The var() |
| 59 | 59 | fallback covers a missing token outright. */ |
| 60 | - stroke: var(--desktop-mode-window-link-color, #2271b1); | |
| 60 | + stroke: var(--os-window-link-color, #2271b1); | |
| 61 | 61 | stroke-opacity: 0.55; |
| 62 | - stroke-width: var(--desktop-mode-window-link-width, 1.5px); | |
| 62 | + stroke-width: var(--os-window-link-width, 1.5px); | |
| 63 | 63 | stroke-linecap: round; |
| 64 | 64 | } |
| 65 | 65 | |
| 66 | 66 | /* |
| @@ -71,23 +71,23 @@ | ||
| 71 | 71 | * marker-end/-start between them on focus. Direction survives as |
| 72 | 72 | * size: the larger dot sits on the root/referenced window; |
| 73 | 73 | * bidirectional reference edges get large dots on both ends. |
| 74 | 74 | */ |
| 75 | -.desktop-mode-window-link__endpoint { | |
| 76 | - fill: var(--desktop-mode-window-link-color, #2271b1); | |
| 75 | +.os-window-link__endpoint { | |
| 76 | + fill: var(--os-window-link-color, #2271b1); | |
| 77 | 77 | fill-opacity: 0.55; |
| 78 | 78 | } |
| 79 | 79 | |
| 80 | -.desktop-mode-window-link__endpoint--active { | |
| 81 | - fill: var(--desktop-mode-window-link-color-active, #2271b1); | |
| 80 | +.os-window-link__endpoint--active { | |
| 81 | + fill: var(--os-window-link-color-active, #2271b1); | |
| 82 | 82 | fill-opacity: 1; |
| 83 | 83 | } |
| 84 | 84 | |
| 85 | 85 | /* Edges touching the focused window get the emphasized stroke. */ |
| 86 | -.desktop-mode-window-link--active .desktop-mode-window-link__path { | |
| 87 | - stroke: var(--desktop-mode-window-link-color-active, #2271b1); | |
| 86 | +.os-window-link--active .os-window-link__path { | |
| 87 | + stroke: var(--os-window-link-color-active, #2271b1); | |
| 88 | 88 | stroke-opacity: 1; |
| 89 | - stroke-width: calc(var(--desktop-mode-window-link-width, 1.5px) + 0.5px); | |
| 89 | + stroke-width: calc(var(--os-window-link-width, 1.5px) + 0.5px); | |
| 90 | 90 | } |
| 91 | 91 | |
| 92 | 92 | /* |
| 93 | 93 | * Related-window chrome cue — stamped by the render host on every |
| @@ -103,11 +103,11 @@ | ||
| 103 | 103 | * |
| 104 | 104 | * The base window chrome already transitions box-shadow, so the halo |
| 105 | 105 | * fades in and out with focus changes for free. |
| 106 | 106 | */ |
| 107 | -.desktop-mode-window--linked { | |
| 108 | - outline: 2px solid var(--desktop-mode-window-link-accent, var(--wp-admin-theme-color, #2271b1)); | |
| 107 | +.os-window--linked { | |
| 108 | + outline: 2px solid var(--os-window-link-accent, var(--wp-admin-theme-color, #2271b1)); | |
| 109 | 109 | outline-offset: 1px; |
| 110 | 110 | box-shadow: |
| 111 | - 0 0 18px 4px var(--desktop-mode-window-link-glow, rgba(34, 113, 177, 0.45)), | |
| 112 | - var(--desktop-mode-window-shadow); | |
| 111 | + 0 0 18px 4px var(--os-window-link-glow, rgba(34, 113, 177, 0.45)), | |
| 112 | + var(--os-window-shadow); | |
| 113 | 113 | } |
