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

fix(glass): откат к безопасным background-слоям (без псевдоэлементов/z-index)

Browse Source 
- убраны все ::after/position/z-index эксперименты, ломавшие раскладку
- градиентная обводка через 2 background-слоя (padding-box/border-box) — контент поверх, не ломает
- тёмная тема: засвет приглушён (0.4)
This commit is contained in:
root committed 2026-09-24 18:14:42 +02:00
1 parent 14b7cd829b
commit c69fc8f9c0
1 file changed
+7 -38
Download Patch File Download Diff File Expand all files Collapse all files
public/css/main.css
+7 -38
View File
@@ -5197,51 +5197,20 @@ html[data-theme="light"] .glass-neutral {
-webkit-backdrop-filter: var(--v12-glass-neutral-filter);
}
/* Внешняя градиентная обводка (сверху белый засвет -> снизу прозрачно).
::after с inset:-1px выходит НАРУЖУ; z-index:-1 (без isolation) => видна снаружи,
внутренняя часть уходит под фон родителя, контент не перекрыт.
Исключаем .fab (::after занят sheen). */
/* Градиентная обводка через 2 слоя background (НЕ ломает раскладку, контент поверх фона).
padding-box = фон блока, border-box = градиент бордера (сверху засвет -> снизу прозрачно). */
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;
z-index: 0;
border: 1px solid transparent;
}
/* Шапка уже position:fixed (свой стек-контекст) — z-index:0 не нужен,
иначе может опуститься ниже других fixed-элементов. */
html[data-theme="dark"] .header--scrolled .header__inner,
html[data-theme="light"] .header--scrolled .header__inner {
position: relative;
border: 1px solid transparent;
}
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;
background:
var(--v12-glass-neutral-bg) padding-box,
var(--v12-glass-neutral-border-grad) border-box;
}
html[data-theme="dark"] .theme-picker__panel.glass-neutral,