fix(glass): градиентный бордер через background-слои вместо ::before mask
- убран псевдоэлемент, который перекрывал контент (меню/панели исчезали) - градиент бордера теперь 2 слоя background: padding-box (фон) + border-box (градиент) - контент снова виден, border-radius сохранён
This commit is contained in:
1 parent
6aeb5a378f
commit
df2ef8b7b6
1 file changed
+7
-28
+7
-28
@@ -5197,8 +5197,9 @@ html[data-theme="light"] .glass-neutral {
|
||||
-webkit-backdrop-filter: var(--v12-glass-neutral-filter);
|
||||
}
|
||||
|
||||
/* Градиентный бордер (сверху засвет -> снизу прозрачно) через mask.
|
||||
Исключаем .fab (там ::before занят shine). */
|
||||
/* Градиентный бордер (сверху белый засвет -> снизу прозрачно).
|
||||
Через 2 слоя background: фон в padding-box, градиент бордера — в border-box.
|
||||
Не перекрывает контент, сохраняет border-radius. */
|
||||
html[data-theme="dark"] .glass-neutral:not(.fab),
|
||||
html[data-theme="light"] .glass-neutral:not(.fab),
|
||||
html[data-theme="dark"] .header--scrolled .header__inner,
|
||||
@@ -5207,32 +5208,10 @@ 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;
|
||||
}
|
||||
html[data-theme="dark"] .glass-neutral:not(.fab)::before,
|
||||
html[data-theme="light"] .glass-neutral:not(.fab)::before,
|
||||
html[data-theme="dark"] .header--scrolled .header__inner::before,
|
||||
html[data-theme="light"] .header--scrolled .header__inner::before,
|
||||
html[data-theme="dark"] .nav-more__dock::before,
|
||||
html[data-theme="light"] .nav-more__dock::before,
|
||||
html[data-theme="dark"] #nav-more-menu-floating::before,
|
||||
html[data-theme="light"] #nav-more-menu-floating::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
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;
|
||||
border: 1px solid transparent;
|
||||
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,
|
||||
|
||||
Reference in new issue
Block a user