feat(glass): градиентный бордер — сверху белый засвет -> снизу прозрачно
- токен --v12-glass-neutral-border-grad (dark/light) - mask-псевдоэлемент ::before рисует 1px градиентный бордер с сохранением border-radius - нативный border-color -> transparent у glass-блоков, шапки, nav-more, floating
This commit is contained in:
1 parent
94de132cf0
commit
6aeb5a378f
1 file changed
+57
-4
+57
-4
@@ -560,7 +560,7 @@ a:visited:not(.btn):not(.fab):not(.logo):not(.skip-link):hover {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 0.8rem;
|
||||
border: 1px solid var(--line);
|
||||
border: 1px solid transparent;
|
||||
border-radius: calc(var(--radius-card) * 0.7);
|
||||
background: var(--bg-elevated);
|
||||
box-shadow: 0 16px 38px hsla(0, 0%, 0%, 0.2);
|
||||
@@ -755,6 +755,7 @@ a:visited:not(.btn):not(.fab):not(.logo):not(.skip-link):hover {
|
||||
right: 0;
|
||||
z-index: 90;
|
||||
background: var(--bg-elevated);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Плавающая панель: fixed + координаты из JS; фон — токены v12-glass внизу файла */
|
||||
@@ -5134,6 +5135,13 @@ 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));
|
||||
/* Градиентный бордер: сверху белый засвет -> снизу прозрачно */
|
||||
--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) 100%
|
||||
);
|
||||
--v12-glass-neutral-shadow:
|
||||
0 14px 32px hsla(0, 0%, 0%, 0.4),
|
||||
inset 0 1px 0 hsla(0, 0%, 100%, 0.09);
|
||||
@@ -5151,6 +5159,13 @@ html[data-theme="light"] {
|
||||
color-mix(in srgb, var(--bg-elevated) 38%, transparent)
|
||||
);
|
||||
--v12-glass-neutral-border: color-mix(in srgb, var(--line) 58%, hsla(0, 0%, 0%, 0.07));
|
||||
/* Градиентный бордер: сверху белый засвет -> снизу прозрачно (light: ярче) */
|
||||
--v12-glass-neutral-border-grad: linear-gradient(
|
||||
to bottom,
|
||||
hsla(0, 0%, 100%, 0.9) 0%,
|
||||
hsla(0, 0%, 100%, 0.3) 42%,
|
||||
hsla(0, 0%, 100%, 0) 100%
|
||||
);
|
||||
--v12-glass-neutral-shadow:
|
||||
0 14px 28px hsla(var(--theme-h), 22%, 38%, 0.11),
|
||||
inset 0 1px 0 hsla(0, 0%, 100%, 0.9),
|
||||
@@ -5165,7 +5180,7 @@ html[data-theme="light"] {
|
||||
html[data-theme="dark"] .header--scrolled .header__inner,
|
||||
html[data-theme="light"] .header--scrolled .header__inner {
|
||||
background: var(--v12-glass-neutral-bg);
|
||||
border-color: var(--v12-glass-neutral-border);
|
||||
border-color: transparent;
|
||||
box-shadow: var(--v12-glass-neutral-shadow);
|
||||
backdrop-filter: var(--v12-glass-neutral-filter-elevated);
|
||||
-webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated);
|
||||
@@ -5176,12 +5191,50 @@ html[data-theme="light"] .header--scrolled .header__inner {
|
||||
html[data-theme="dark"] .glass-neutral,
|
||||
html[data-theme="light"] .glass-neutral {
|
||||
background: var(--v12-glass-neutral-bg);
|
||||
border-color: var(--v12-glass-neutral-border);
|
||||
border-color: transparent;
|
||||
box-shadow: var(--v12-glass-neutral-shadow);
|
||||
backdrop-filter: var(--v12-glass-neutral-filter);
|
||||
-webkit-backdrop-filter: var(--v12-glass-neutral-filter);
|
||||
}
|
||||
|
||||
/* Градиентный бордер (сверху засвет -> снизу прозрачно) через mask.
|
||||
Исключаем .fab (там ::before занят shine). */
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .theme-picker__panel.glass-neutral,
|
||||
html[data-theme="dark"] .cookie-notice.glass-neutral,
|
||||
html[data-theme="light"] .theme-picker__panel.glass-neutral,
|
||||
@@ -5282,7 +5335,7 @@ html[data-theme="light"] .nav-more__dock,
|
||||
html[data-theme="dark"] #nav-more-menu-floating,
|
||||
html[data-theme="light"] #nav-more-menu-floating {
|
||||
background: var(--v12-glass-neutral-bg);
|
||||
border-color: var(--v12-glass-neutral-border);
|
||||
border-color: transparent;
|
||||
box-shadow: var(--v12-glass-neutral-shadow);
|
||||
backdrop-filter: var(--v12-glass-neutral-filter-elevated);
|
||||
-webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated);
|
||||
|
||||
Reference in new issue
Block a user