fix(glass): внешняя обводка через ::after + isolation:isolate (z-index:-1)

- inset:-1px выносит рамку наружу, isolation создаёт стек без сдвига layout
- position:relative только на не-fixed блоках; шапка (fixed) без правок
- z-index:-1 => под контентом, не перекрывает; backdrop-filter убран (не рендерился с mask)
This commit is contained in:
root committed 2026-09-24 18:36:19 +02:00
1 parent c69fc8f9c0
commit 372ccfbf60
1 file changed
+31 -7
+31 -7
View File
@@ -5197,20 +5197,44 @@ html[data-theme="light"] .glass-neutral {
-webkit-backdrop-filter: var(--v12-glass-neutral-filter);
}
/* Градиентная обводка через 2 слоя background (НЕ ломает раскладку, контент поверх фона).
padding-box = фон блока, border-box = градиент бордера (сверху засвет -> снизу прозрачно). */
/* Внешняя градиентная обводка через ::after (сверху засвет -> снизу прозрачно).
inset:-1px выводит рамку НАРУЖУ; isolation:isolate на родителе + z-index:-1 на
псевдоэлементе => виден снаружи, под контентом (не перекрывает).
Без position/z-index на родителе — раскладка не ломается. */
html[data-theme="dark"] .glass-neutral:not(.fab),
html[data-theme="light"] .glass-neutral:not(.fab),
html[data-theme="dark"] .header--scrolled .header__inner,
html[data-theme="light"] .header--scrolled .header__inner,
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;
pointer-events: none;
z-index: -1;
}
html[data-theme="dark"] .theme-picker__panel.glass-neutral,