admin/site-portfolio
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(glass): displacement-стекло на кнопках (btn--primary/fab--primary/secondary/ghost)

Browse Source 
- primary/fab: полупрозрачный акцентный фон (--btn-primary-bg-lg/-hover-bg-lg, ~82-86%), иначе displacement не виден
- токены --btn-primary-backdrop-lg / -hover-lg = url(#filter) blur()+saturate()
- secondary/ghost: displacement через --v12-glass-neutral-filter-lg
- всё в @supports not (hanging-punctuation:first) — Chromium-only, Safari/Firefox держат чистый blur
This commit is contained in:
root committed 2026-09-24 15:20:34 +02:00
1 parent 5fd8324b47
commit 2e6451e683
1 file changed
+76
Download Patch File Download Diff File Expand all files Collapse all files
public/css/main.css
+76
View File
@@ -114,6 +114,20 @@ html[data-theme="dark"] {
inset 0 -1px 0 color-mix(in srgb, hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)) 18%, transparent);
--btn-primary-backdrop: blur(16px) saturate(135%);
--btn-primary-backdrop-hover: blur(18px) saturate(140%);
/* Liquid Glass (Хабр): displacement + blur — только Chromium */
--btn-primary-backdrop-lg: url(#liquid-glass-displacement) blur(15px) saturate(135%);
--btn-primary-backdrop-hover-lg: url(#liquid-glass-displacement) blur(17px) saturate(140%);
/* Полупрозрачный акцентный фон, чтобы displacement был виден (Liquid Glass) */
--btn-primary-bg-lg: radial-gradient(
circle at 0% 0%,
color-mix(in hsl, var(--accent), white 10%) 0%,
color-mix(in srgb, var(--accent) 82%, transparent) 100%
);
--btn-primary-hover-bg-lg: radial-gradient(
circle at 0% 0%,
color-mix(in hsl, var(--accent), white 14%) 0%,
color-mix(in srgb, var(--accent) 86%, transparent) 100%
);
--btn-primary-sheen: linear-gradient(
155deg,
hsla(0, 0%, 100%, 0.1) 0%,
@@ -206,6 +220,20 @@ html[data-theme="light"] {
inset 0 -1px 0 color-mix(in srgb, var(--accent) 32%, hsl(0 0% 0%) 68%);
--btn-primary-backdrop: blur(10px) saturate(142%);
--btn-primary-backdrop-hover: blur(11px) saturate(148%);
/* Liquid Glass (Хабр): displacement + blur — только Chromium */
--btn-primary-backdrop-lg: url(#liquid-glass-displacement) blur(9px) saturate(142%);
--btn-primary-backdrop-hover-lg: url(#liquid-glass-displacement) blur(10px) saturate(148%);
/* Полупрозрачный акцентный фон, чтобы displacement был виден (Liquid Glass) */
--btn-primary-bg-lg: radial-gradient(
circle at 0% 0%,
color-mix(in hsl, var(--accent), white 10%) 0%,
color-mix(in srgb, var(--accent) 82%, transparent) 100%
);
--btn-primary-hover-bg-lg: radial-gradient(
circle at 0% 0%,
color-mix(in hsl, var(--accent), white 14%) 0%,
color-mix(in srgb, var(--accent) 86%, transparent) 100%
);
--btn-primary-sheen: linear-gradient(
155deg,
color-mix(in srgb, var(--accent) 55%, hsl(0 0% 100%) 45%) 0%,
@@ -5199,6 +5227,54 @@ html[data-theme="light"] .fab.glass-neutral:not(.fab--primary):focus-visible {
backdrop-filter: var(--v12-glass-neutral-filter-elevated-lg);
-webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated-lg);
}
/* Кнопки: primary/fab — акцентное стекло + displacement;
secondary/ghost — нейтральное стекло + displacement */
html[data-theme="dark"] .btn--primary,
html[data-theme="light"] .btn--primary,
html[data-theme="dark"] .fab--primary,
html[data-theme="light"] .fab--primary {
background: var(--btn-primary-bg-lg);
backdrop-filter: var(--btn-primary-backdrop-lg);
-webkit-backdrop-filter: var(--btn-primary-backdrop-lg);
}
html[data-theme="dark"] .btn--primary:hover,
html[data-theme="dark"] .btn--primary:focus-visible,
html[data-theme="light"] .btn--primary:hover,
html[data-theme="light"] .btn--primary:focus-visible,
html[data-theme="dark"] a.btn--primary:visited:hover,
html[data-theme="light"] a.btn--primary:visited:hover,
html[data-theme="dark"] .fab--primary:hover,
html[data-theme="dark"] .fab--primary:focus-visible,
html[data-theme="light"] .fab--primary:hover,
html[data-theme="light"] .fab--primary:focus-visible,
html[data-theme="dark"] a.fab--primary:visited,
html[data-theme="light"] a.fab--primary:visited {
background: var(--btn-primary-hover-bg-lg);
backdrop-filter: var(--btn-primary-backdrop-hover-lg);
-webkit-backdrop-filter: var(--btn-primary-backdrop-hover-lg);
}
html[data-theme="dark"] .btn--secondary,
html[data-theme="light"] .btn--secondary,
html[data-theme="dark"] .btn--ghost,
html[data-theme="light"] .btn--ghost {
backdrop-filter: var(--v12-glass-neutral-filter-lg);
-webkit-backdrop-filter: var(--v12-glass-neutral-filter-lg);
}
html[data-theme="dark"] .btn--secondary:hover,
html[data-theme="dark"] .btn--secondary:focus-visible,
html[data-theme="light"] .btn--secondary:hover,
html[data-theme="light"] .btn--secondary:focus-visible,
html[data-theme="dark"] .btn--ghost:hover,
html[data-theme="dark"] .btn--ghost:focus-visible,
html[data-theme="light"] .btn--ghost:hover,
html[data-theme="light"] .btn--ghost:focus-visible {
backdrop-filter: var(--v12-glass-neutral-filter-elevated-lg);
-webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated-lg);
}
}
html[data-theme="dark"] .nav-more__dock,