← All changes | assets/css/effects.css +33 -39 0.9.6 → 1.1.13 View file →

		@@ -1,21 +1,24 @@
1	1	/**
2		- * Desktop Mode — Window effects.
	2	+ * OpenStation — Window effects.
3	3	*
4	4	* Visual treatments applied to windows by the unfocus-effect engine
5	5	* (`src/effects/unfocus-engine.ts`). The engine toggles a per-effect
6		- * class on the window root (`.desktop-mode-window`) while the window
	6	+ * class on the window root (`.os-window`) while the window
7	7	* is NOT focused; each effect ships the matching rule here (or, for
8	8	* plugin effects, in the plugin's own stylesheet).
9	9	*
10	10	* The fade is driven by the `filter` entry in the shared
11		- * `.desktop-mode-window` transition (see `window-chrome.css`), so
	11	+ * `.os-window` transition (see `window-chrome.css`), so
12	12	* effects that animate via `filter` get a smooth two-way transition as
13	13	* focus moves between windows — and collapse to instant under
14	14	* `prefers-reduced-motion` along with every other window transition.
15	15	*
16		- * Loaded as an @import from `windows.css` so it ships under the single
17		- * `desktop-mode-windows` style handle.
	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.
18	21	*
19	22	* @since 0.26.0
20	23	*/
21	24
		@@ -21,42 +24,33 @@
21	24
22	25	/*
23	26	* Built-in effect tuning knobs. Every shipped effect is driven by
24	27	* 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).
	28	+ * without overriding the whole rule. Their defaults live in the `var()`
	29	+ * fallbacks at each use site rather than in a declaration on
	30	+ * `.os-window`: a declaration on the window would outrank anything
	31	+ * the window inherits, and a theme declares them on the body.
	32	+ *
	33	+ * --os-fx-transition-duration 0.5s how long an effect ramps in and
	34	+ * out as focus moves (the filter
	35	+ * entry of the window transition)
	36	+ * --os-fx-darken-brightness 0.82 darken: dim
	37	+ * --os-fx-darken-saturate 0.92 darken: slight desaturate
	38	+ * --os-fx-frost-blur 3px frost: blur
	39	+ * --os-fx-frost-saturate 0.7 frost: cool
	40	+ * --os-fx-frost-brightness 1.08 frost: lift
	41	+ * --os-fx-grayscale-amount 1 grayscale: drain colour
	42	+ * --os-fx-grayscale-brightness 0.95 grayscale: settle brightness
26	43	*/
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	44
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	45	/*
52	46	* `darken` — dims unfocused windows (title bar and body alike) so the
53	47	* focused window reads as the active surface.
54	48	*/
55		-.desktop-mode-window--fx-darken {
	49	+.os-window--fx-darken {
56	50	filter:
57		- brightness( var( --desktop-mode-fx-darken-brightness, 0.82 ) )
58		- saturate( var( --desktop-mode-fx-darken-saturate, 0.92 ) );
	51	+ brightness( var( --os-fx-darken-brightness, 0.82 ) )
	52	+ saturate( var( --os-fx-darken-saturate, 0.92 ) );
59	53	}
60	54
61	55	/*
62	56	* `frost` — throws the window literally out of focus. Blur is the
		@@ -65,13 +59,13 @@
65	59	* the user and the content. `filter: blur()` rasterizes the whole
66	60	* window subtree — iframe content included — so the frosting is total,
67	61	* not just chrome-deep.
68	62	*/
69		-.desktop-mode-window--fx-frost {
	63	+.os-window--fx-frost {
70	64	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 ) );
	65	+ blur( var( --os-fx-frost-blur, 3px ) )
	66	+ saturate( var( --os-fx-frost-saturate, 0.7 ) )
	67	+ brightness( var( --os-fx-frost-brightness, 1.08 ) );
74	68	}
75	69
76	70	/*
77	71	* `grayscale` — drains the colour from unfocused windows so the focused
		@@ -79,9 +73,9 @@
79	73	* this makes the active window pop without dimming anything into the
80	74	* dark. A touch of brightness settling keeps the mono windows from
81	75	* glaring.
82	76	*/
83		-.desktop-mode-window--fx-grayscale {
	77	+.os-window--fx-grayscale {
84	78	filter:
85		- grayscale( var( --desktop-mode-fx-grayscale-amount, 1 ) )
86		- brightness( var( --desktop-mode-fx-grayscale-brightness, 0.95 ) );
	79	+ grayscale( var( --os-fx-grayscale-amount, 1 ) )
	80	+ brightness( var( --os-fx-grayscale-brightness, 0.95 ) );
87	81	}