| 1 |
/** |
| 2 |
* OpenStation — 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 (`.os-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 |
* `.os-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 |
* Registered as its own `os-effects` style handle, chained |
| 17 |
* by dependency between `os-settings` and |
| 18 |
* `os-window-links` so its position in the cascade matches |
| 19 |
* where it sat when these sheets were `@import`ed. Enqueuing |
| 20 |
* `os-windows` still pulls it in via that chain. |
| 21 |
* |
| 22 |
* @since 0.26.0 |
| 23 |
*/ |
| 24 |
|
| 25 |
/* |
| 26 |
* Built-in effect tuning knobs. Every shipped effect is driven by |
| 27 |
* custom properties so a theme or plugin can re-tune the intensity |
| 28 |
* without overriding the whole rule (and so the values read as a set). |
| 29 |
*/ |
| 30 |
.os-window { |
| 31 |
/* How long an effect takes to ramp in/out as focus moves between |
| 32 |
* windows. Drives the `filter` entry of the shared window |
| 33 |
* transition (see `window-chrome.css`); applies to every |
| 34 |
* filter-based effect (darken, frost, grayscale) in BOTH |
| 35 |
* directions — losing focus and regaining it. Bump it up for a |
| 36 |
* slower, dreamier blur; drop it for a snappier feel. Collapses to |
| 37 |
* instant under `prefers-reduced-motion`. */ |
| 38 |
--os-fx-transition-duration: 0.5s; |
| 39 |
|
| 40 |
/* darken — dim + slight desaturate */ |
| 41 |
--os-fx-darken-brightness: 0.82; |
| 42 |
--os-fx-darken-saturate: 0.92; |
| 43 |
|
| 44 |
/* frost — frosted-glass blur, lifted + cooled */ |
| 45 |
--os-fx-frost-blur: 3px; |
| 46 |
--os-fx-frost-saturate: 0.7; |
| 47 |
--os-fx-frost-brightness: 1.08; |
| 48 |
|
| 49 |
/* grayscale — drain colour, settle brightness */ |
| 50 |
--os-fx-grayscale-amount: 1; |
| 51 |
--os-fx-grayscale-brightness: 0.95; |
| 52 |
} |
| 53 |
|
| 54 |
/* |
| 55 |
* `darken` — dims unfocused windows (title bar and body alike) so the |
| 56 |
* focused window reads as the active surface. |
| 57 |
*/ |
| 58 |
.os-window--fx-darken { |
| 59 |
filter: |
| 60 |
brightness( var( --os-fx-darken-brightness, 0.82 ) ) |
| 61 |
saturate( var( --os-fx-darken-saturate, 0.92 ) ); |
| 62 |
} |
| 63 |
|
| 64 |
/* |
| 65 |
* `frost` — throws the window literally out of focus. Blur is the |
| 66 |
* universal "not in focus" cue; lifting the brightness and pulling the |
| 67 |
* saturation down turns it into a pane of cold, frosted glass between |
| 68 |
* the user and the content. `filter: blur()` rasterizes the whole |
| 69 |
* window subtree — iframe content included — so the frosting is total, |
| 70 |
* not just chrome-deep. |
| 71 |
*/ |
| 72 |
.os-window--fx-frost { |
| 73 |
filter: |
| 74 |
blur( var( --os-fx-frost-blur, 3px ) ) |
| 75 |
saturate( var( --os-fx-frost-saturate, 0.7 ) ) |
| 76 |
brightness( var( --os-fx-frost-brightness, 1.08 ) ); |
| 77 |
} |
| 78 |
|
| 79 |
/* |
| 80 |
* `grayscale` — drains the colour from unfocused windows so the focused |
| 81 |
* one is the only thing still in colour. The eye is drawn to colour, so |
| 82 |
* this makes the active window pop without dimming anything into the |
| 83 |
* dark. A touch of brightness settling keeps the mono windows from |
| 84 |
* glaring. |
| 85 |
*/ |
| 86 |
.os-window--fx-grayscale { |
| 87 |
filter: |
| 88 |
grayscale( var( --os-fx-grayscale-amount, 1 ) ) |
| 89 |
brightness( var( --os-fx-grayscale-brightness, 0.95 ) ); |
| 90 |
} |
| 91 |
|
