# desktop-mode/1.1.13/assets/css/effects.css

OpenStation: Desktop Windows, Dock & Virtual Desktops for WP Admin, version 1.1.13. 82 lines.

- Page: https://pluginprobe.com/plugins/desktop-mode/1.1.13/code/assets/css/effects.css
- Raw: https://pluginprobe.com/plugins/desktop-mode/1.1.13/raw/assets/css/effects.css
- Modified: 2026-10-09T11:10:44+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/desktop-mode/1.1.13/code/assets/css/effects.css#L10-L20`.

```css
/**
 * OpenStation — Window effects.
 *
 * Visual treatments applied to windows by the unfocus-effect engine
 * (`src/effects/unfocus-engine.ts`). The engine toggles a per-effect
 * class on the window root (`.os-window`) while the window
 * is NOT focused; each effect ships the matching rule here (or, for
 * plugin effects, in the plugin's own stylesheet).
 *
 * The fade is driven by the `filter` entry in the shared
 * `.os-window` transition (see `window-chrome.css`), so
 * effects that animate via `filter` get a smooth two-way transition as
 * focus moves between windows — and collapse to instant under
 * `prefers-reduced-motion` along with every other window transition.
 *
 * Registered as its own `os-effects` style handle, chained
 * by dependency between `os-settings` and
 * `os-window-links` so its position in the cascade matches
 * where it sat when these sheets were `@import`ed. Enqueuing
 * `os-windows` still pulls it in via that chain.
 *
 * @since 0.26.0
 */

/*
 * Built-in effect tuning knobs. Every shipped effect is driven by
 * custom properties so a theme or plugin can re-tune the intensity
 * without overriding the whole rule. Their defaults live in the `var()`
 * fallbacks at each use site rather than in a declaration on
 * `.os-window`: a declaration on the window would outrank anything
 * the window inherits, and a theme declares them on the body.
 *
 *   --os-fx-transition-duration   0.5s   how long an effect ramps in and
 *                                        out as focus moves (the filter
 *                                        entry of the window transition)
 *   --os-fx-darken-brightness     0.82   darken: dim
 *   --os-fx-darken-saturate       0.92   darken: slight desaturate
 *   --os-fx-frost-blur            3px    frost: blur
 *   --os-fx-frost-saturate        0.7    frost: cool
 *   --os-fx-frost-brightness      1.08   frost: lift
 *   --os-fx-grayscale-amount      1      grayscale: drain colour
 *   --os-fx-grayscale-brightness  0.95   grayscale: settle brightness
 */

/*
 * `darken` — dims unfocused windows (title bar and body alike) so the
 * focused window reads as the active surface.
 */
.os-window--fx-darken {
	filter:
		brightness( var( --os-fx-darken-brightness, 0.82 ) )
		saturate( var( --os-fx-darken-saturate, 0.92 ) );
}

/*
 * `frost` — throws the window literally out of focus. Blur is the
 * universal "not in focus" cue; lifting the brightness and pulling the
 * saturation down turns it into a pane of cold, frosted glass between
 * the user and the content. `filter: blur()` rasterizes the whole
 * window subtree — iframe content included — so the frosting is total,
 * not just chrome-deep.
 */
.os-window--fx-frost {
	filter:
		blur( var( --os-fx-frost-blur, 3px ) )
		saturate( var( --os-fx-frost-saturate, 0.7 ) )
		brightness( var( --os-fx-frost-brightness, 1.08 ) );
}

/*
 * `grayscale` — drains the colour from unfocused windows so the focused
 * one is the only thing still in colour. The eye is drawn to colour, so
 * this makes the active window pop without dimming anything into the
 * dark. A touch of brightness settling keeps the mono windows from
 * glaring.
 */
.os-window--fx-grayscale {
	filter:
		grayscale( var( --os-fx-grayscale-amount, 1 ) )
		brightness( var( --os-fx-grayscale-brightness, 0.95 ) );
}

```