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

fix(glass): внешняя обводка через ::after с blur края (не перекрывает контент)

Browse Source 
- inset:-1px выносит рамку наружу, z-index:-1 + isolation, backdrop-filter blur(3px) на кромке
- тёмная тема: засвет приглушён (0.55->0.4), бордер блюрит край как стекло
- убран background-слой
This commit is contained in:
root committed 2026-09-24 17:58:53 +02:00
1 parent df2ef8b7b6
commit 220fb634fc
1 file changed
+35 -9
Download Patch File Download Diff File Expand all files Collapse all files
public/css/main.css
+35 -9
View File
@@ -5135,11 +5135,11 @@ html[data-theme="dark"] {
color-mix(in srgb, var(--surface) 52%, transparent)
);
--v12-glass-neutral-border: color-mix(in srgb, var(--line) 75%, hsla(0, 0%, 100%, 0.08));
/* Градиентный бордер: сверху белый засвет -> снизу прозрачно */
/* Градиентный бордер: сверху белый засвет -> снизу прозрачно (dark: приглушён) */
--v12-glass-neutral-border-grad: linear-gradient(
to bottom,
hsla(0, 0%, 100%, 0.55) 0%,
hsla(0, 0%, 100%, 0.16) 38%,
hsla(0, 0%, 100%, 0.4) 0%,
hsla(0, 0%, 100%, 0.12) 40%,
hsla(0, 0%, 100%, 0) 100%
);
--v12-glass-neutral-shadow:
@@ -5197,9 +5197,9 @@ html[data-theme="light"] .glass-neutral {
-webkit-backdrop-filter: var(--v12-glass-neutral-filter);
}
/* Градиентный бордер (сверху белый засвет -> снизу прозрачно).
Через 2 слоя background: фон в padding-box, градиент бордера — в border-box.
Не перекрывает контент, сохраняет border-radius. */
/* Внешняя градиентная обводка (сверху белый засвет -> снизу прозрачно).
::after с inset:-1px выходит НАРУЖУ блока, блюрит край как стеклянная кромка.
z-index:-1 => не перекрывает контент. Исключаем .fab (::after занят sheen). */
html[data-theme="dark"] .glass-neutral:not(.fab),
html[data-theme="light"] .glass-neutral:not(.fab),
html[data-theme="dark"] .header--scrolled .header__inner,
@@ -5208,10 +5208,36 @@ html[data-theme="dark"] .nav-more__dock,
html[data-theme="light"] .nav-more__dock,
html[data-theme="dark"] #nav-more-menu-floating,
html[data-theme="light"] #nav-more-menu-floating {
position: relative;
isolation: isolate;
border: 1px solid transparent;
background:
var(--v12-glass-neutral-bg) padding-box,
var(--v12-glass-neutral-border-grad) border-box;
}
html[data-theme="dark"] .glass-neutral:not(.fab)::after,
html[data-theme="light"] .glass-neutral:not(.fab)::after,
html[data-theme="dark"] .header--scrolled .header__inner::after,
html[data-theme="light"] .header--scrolled .header__inner::after,
html[data-theme="dark"] .nav-more__dock::after,
html[data-theme="light"] .nav-more__dock::after,
html[data-theme="dark"] #nav-more-menu-floating::after,
html[data-theme="light"] #nav-more-menu-floating::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: var(--v12-glass-neutral-border-grad);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
pointer-events: none;
z-index: -1;
}
html[data-theme="dark"] .theme-picker__panel.glass-neutral,