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:
1 parent
c69fc8f9c0
commit
372ccfbf60
1 file changed
+31
-7
+31
-7
@@ -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,
|
||||
|
||||
Reference in new issue
Block a user