modstagram/modstagram-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

verify

Browse Source
This commit is contained in:
payacom
2026-08-11 19:39:10 +03:30
parent 491040f752
commit 54623fb720
74 changed files with 1361 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/lib/glassBackdrop.ts Normal file
View File

@@ -0,0 +1,28 @@
import type { CSSProperties } from "react";
/**
* Turbopack's Tailwind v4 (Lightning CSS) pipeline silently strips hand-authored
* `backdrop-filter`/`-webkit-backdrop-filter` declarations from globals.css classes
* in this project (confirmed via computed-style + compiled-stylesheet inspection —
* the class survives with every other declaration except backdrop-filter).
* Inline styles bypass that pipeline entirely, so every glass-* class gets its
* matching blur/saturate re-applied here as a companion inline style.
*/
export const GLASS_BACKDROP: Record<string, CSSProperties> = {
"glass-panel": { backdropFilter: "blur(20px) saturate(180%)", WebkitBackdropFilter: "blur(20px) saturate(180%)" },
"chat-header-glass": { backdropFilter: "blur(20px) saturate(180%)", WebkitBackdropFilter: "blur(20px) saturate(180%)" },
"chat-timer-glass": { backdropFilter: "blur(20px) saturate(180%)", WebkitBackdropFilter: "blur(20px) saturate(180%)" },
"chat-timer-badge-glass": { backdropFilter: "blur(10px) saturate(160%)", WebkitBackdropFilter: "blur(10px) saturate(160%)" },
"glass-chat-input": { backdropFilter: "blur(24px) saturate(200%)", WebkitBackdropFilter: "blur(24px) saturate(200%)" },
"glass-panel-strong": { backdropFilter: "blur(24px) saturate(1.4)", WebkitBackdropFilter: "blur(24px) saturate(1.4)" },
"comments-modal-glass": { backdropFilter: "blur(28px) saturate(1.5)", WebkitBackdropFilter: "blur(28px) saturate(1.5)" },
"tab-active-glass": { backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)" },
"glass-modal-overlay": { backdropFilter: "blur(20px) saturate(120%)", WebkitBackdropFilter: "blur(20px) saturate(120%)" },
"glass-modal-overlay--dark": { backdropFilter: "blur(24px) saturate(110%)", WebkitBackdropFilter: "blur(24px) saturate(110%)" },
"glass-modal-panel": { backdropFilter: "blur(28px) saturate(180%)", WebkitBackdropFilter: "blur(28px) saturate(180%)" },
};
/** Returns the inline backdrop-filter style for a known glass-* class name, merged if multiple apply. */
export function glassBackdropStyle(...classNames: string[]): CSSProperties {
return Object.assign({}, ...classNames.map((c) => GLASS_BACKDROP[c]).filter(Boolean));
}