| 1 |
/** |
| 2 |
* Desktop Mode — Window effects. |
| 3 |
* |
| 4 |
* Visual treatments applied to windows by the unfocus-effect engine |
| 5 |
* (`src/effects/unfocus-engine.ts`). The engine toggles a per-effect |
| 6 |
* class on the window root (`.desktop-mode-window`) while the window |
| 7 |
* is NOT focused; each effect ships the matching rule here (or, for |
| 8 |
* plugin effects, in the plugin's own stylesheet). |
| 9 |
* |
| 10 |
* The fade is driven by the `filter` entry in the shared |
| 11 |
* `.desktop-mode-window` transition (see `window-chrome.css`), so |
| 12 |
* effects that animate via `filter` get a smooth two-way transition as |
| 13 |
* focus moves between windows — and collapse to instant under |
| 14 |
* `prefers-reduced-motion` along with every other window transition. |
| 15 |
* |
| 16 |
* Loaded as an @import from `windows.css` so it ships under the single |
| 17 |
* `desktop-mode-windows` style handle. |
| 18 |
* |
| 19 |
* @since 0.26.0 |
| 20 |
*/ |
| 21 |
|
| 22 |
/* |
| 23 |
* Built-in effect tuning knobs. Every shipped effect is driven by |
| 24 |
* custom properties so a theme or plugin can re-tune the intensity |
| 25 |
* without overriding the whole rule (and so the values read as a set). |
| 26 |
*/ |
| 27 |
.desktop-mode-window { |
| 28 |
/* How long an effect takes to ramp in/out as focus moves between |
| 29 |
* windows. Drives the `filter` entry of the shared window |
| 30 |
* transition (see `window-chrome.css`); applies to every |
| 31 |
* filter-based effect (darken, frost, grayscale) in BOTH |
| 32 |
* directions — losing focus and regaining it. Bump it up for a |
| 33 |
* slower, dreamier blur; drop it for a snappier feel. Collapses to |
| 34 |
* instant under `prefers-reduced-motion`. */ |
| 35 |
--desktop-mode-fx-transition-duration: 0.5s; |
| 36 |
|
| 37 |
/* darken — dim + slight desaturate */ |
| 38 |
--desktop-mode-fx-darken-brightness: 0.82; |
| 39 |
--desktop-mode-fx-darken-saturate: 0.92; |
| 40 |
|
| 41 |
/* frost — frosted-glass blur, lifted + cooled */ |
| 42 |
--desktop-mode-fx-frost-blur: 3px; |
| 43 |
--desktop-mode-fx-frost-saturate: 0.7; |
| 44 |
--desktop-mode-fx-frost-brightness: 1.08; |
| 45 |
|
| 46 |
/* grayscale — drain colour, settle brightness */ |
| 47 |
--desktop-mode-fx-grayscale-amount: 1; |
| 48 |
--desktop-mode-fx-grayscale-brightness: 0.95; |
| 49 |
} |
| 50 |
|
| 51 |
/* |
| 52 |
* `darken` — dims unfocused windows (title bar and body alike) so the |
| 53 |
* focused window reads as the active surface. |
| 54 |
*/ |
| 55 |
.desktop-mode-window--fx-darken { |
| 56 |
filter: |
| 57 |
brightness( var( --desktop-mode-fx-darken-brightness, 0.82 ) ) |
| 58 |
saturate( var( --desktop-mode-fx-darken-saturate, 0.92 ) ); |
| 59 |
} |
| 60 |
|
| 61 |
/* |
| 62 |
* `frost` — throws the window literally out of focus. Blur is the |
| 63 |
* universal "not in focus" cue; lifting the brightness and pulling the |
| 64 |
* saturation down turns it into a pane of cold, frosted glass between |
| 65 |
* the user and the content. `filter: blur()` rasterizes the whole |
| 66 |
* window subtree — iframe content included — so the frosting is total, |
| 67 |
* not just chrome-deep. |
| 68 |
*/ |
| 69 |
.desktop-mode-window--fx-frost { |
| 70 |
filter: |
| 71 |
blur( var( --desktop-mode-fx-frost-blur, 3px ) ) |
| 72 |
saturate( var( --desktop-mode-fx-frost-saturate, 0.7 ) ) |
| 73 |
brightness( var( --desktop-mode-fx-frost-brightness, 1.08 ) ); |
| 74 |
} |
| 75 |
|
| 76 |
/* |
| 77 |
* `grayscale` — drains the colour from unfocused windows so the focused |
| 78 |
* one is the only thing still in colour. The eye is drawn to colour, so |
| 79 |
* this makes the active window pop without dimming anything into the |
| 80 |
* dark. A touch of brightness settling keeps the mono windows from |
| 81 |
* glaring. |
| 82 |
*/ |
| 83 |
.desktop-mode-window--fx-grayscale { |
| 84 |
filter: |
| 85 |
grayscale( var( --desktop-mode-fx-grayscale-amount, 1 ) ) |
| 86 |
brightness( var( --desktop-mode-fx-grayscale-brightness, 0.95 ) ); |
| 87 |
} |
| 88 |
|
