feat: тонирование акцентом на стеклянном слое (--mp-card-glass-tint)
This commit is contained in:
1 parent
3aced0387b
commit
e0f80d074d
1 file changed
+20
@@ -3453,6 +3453,12 @@ body.home .section__title {
|
||||
transition: border-color 0.22s ease, transform 0.28s ease, box-shadow 0.28s ease;
|
||||
}
|
||||
|
||||
.mp-card--stack-bottom {
|
||||
/* Прозрачность тонирования акцентом на стеклянном слое (0 = нет, 1 = плотно).
|
||||
Меняй значение, чтобы поиграть с насыщенностью tint. */
|
||||
--mp-card-glass-tint: 0.14;
|
||||
}
|
||||
|
||||
.mp-card--stack-bottom::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -3468,6 +3474,20 @@ body.home .section__title {
|
||||
backdrop-filter: var(--v12-glass-neutral-filter-elevated);
|
||||
}
|
||||
|
||||
/* Тонирование акцентом поверх стекла — величина прозрачности задаётся
|
||||
переменной --mp-card-glass-tint на .mp-card--stack-bottom. */
|
||||
.mp-card--stack-bottom::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto 0 0 0;
|
||||
height: 33.333%;
|
||||
z-index: 6;
|
||||
pointer-events: none;
|
||||
border-radius: 0 0 var(--radius-card) var(--radius-card);
|
||||
background: var(--accent);
|
||||
opacity: var(--mp-card-glass-tint);
|
||||
}
|
||||
|
||||
.mp-card:hover,
|
||||
.mp-card:focus-visible {
|
||||
border-color: color-mix(in srgb, var(--accent) 58%, var(--card-border));
|
||||
|
||||
Reference in new issue
Block a user