mirror of
https://github.com/caiwx86/small-packages.git
synced 2026-11-04 12:53:56 +08:00
44 lines
2.0 KiB
CSS
44 lines
2.0 KiB
CSS
@layer theme {
|
|
/* .fs-pattern: the masked wallpaper element. Why a dedicated element, why z-index: -1 needs a
|
|
* transparent body — design-system.md, "Wallpaper rendering: why the canvas moves to :root". */
|
|
.fs-pattern { display: none; }
|
|
|
|
:root[data-wallpaper="pattern"] { background-color: var(--fs-bg); }
|
|
/* transparent for both wallpapers: an opaque --fs-bg here would cover the shell's one background layer
|
|
* (the photo on the file wallpaper, the .fs-pattern element on the pattern one). */
|
|
:root[data-wallpaper="pattern"] body,
|
|
:root:is([data-wallpaper="pattern"], [data-wallpaper="file"]) .fs-main { background-color: transparent; }
|
|
:root:is([data-wallpaper="pattern"], [data-wallpaper="file"]) footer.fs-footer { background: transparent; }
|
|
|
|
/* --fs-pattern-url is `none` until an upload exists (head.ut/fs-prefs.js) — the axis picked
|
|
* with no file is a bare canvas, not a broken tile. */
|
|
:root[data-wallpaper="pattern"] .fs-pattern {
|
|
display: block;
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
opacity: var(--fs-pattern-strength);
|
|
}
|
|
/* Theme ink (default): file's own colours discarded, only alpha used through the mask —
|
|
* design-system.md, "The appearance axes". */
|
|
:root[data-wallpaper="pattern"]:not([data-pattern-ink="original"]) .fs-pattern {
|
|
background-color: var(--fs-text);
|
|
-webkit-mask-image: var(--fs-pattern-url);
|
|
mask-image: var(--fs-pattern-url);
|
|
-webkit-mask-repeat: repeat;
|
|
mask-repeat: repeat;
|
|
-webkit-mask-size: var(--fs-pattern-size) auto;
|
|
mask-size: var(--fs-pattern-size) auto;
|
|
}
|
|
/* original: the file's own palette, plain tiled background, no mask. */
|
|
:root[data-wallpaper="pattern"][data-pattern-ink="original"] .fs-pattern {
|
|
background-image: var(--fs-pattern-url);
|
|
background-repeat: repeat;
|
|
background-size: var(--fs-pattern-size) auto;
|
|
}
|
|
|
|
/* No wash layer behind #view: cards paint their own --fs-panel (opaque unless 17-glass.css
|
|
* thins it), so nothing needs dimming globally. */
|
|
}
|