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

refactor: убрать стеклянный слой с карточек портфолио через параметр data-glass="false"

Browse Source
This commit is contained in:
root committed 2026-10-05 17:53:19 +02:00
1 parent 276c447567
commit c2ee622680
45 files changed
+275 -774
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/css/main.css
+18 -95
View File
@@ -114,10 +114,7 @@ html[data-theme="dark"] {
inset 0 -1px 0 color-mix(in srgb, hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)) 18%, transparent);
--btn-primary-backdrop: blur(16px) saturate(135%);
--btn-primary-backdrop-hover: blur(18px) saturate(140%);
/* Liquid Glass (Хабр): искажение + лёгкое матирование — только Chromium */
--btn-primary-backdrop-lg: url(#liquid-glass-displacement-btn) blur(2px);
--btn-primary-backdrop-hover-lg: url(#liquid-glass-displacement-btn) blur(2px);
/* Полупрозрачный акцентный фон, чтобы displacement был виден (Liquid Glass) */
/* Полупрозрачный акцентный фон — displacement больше не нужен */
--btn-primary-bg-lg: radial-gradient(
circle at 0% 0%,
color-mix(in hsl, var(--accent), white 10%) 0%,
@@ -220,10 +217,7 @@ html[data-theme="light"] {
inset 0 -1px 0 color-mix(in srgb, var(--accent) 32%, hsl(0 0% 0%) 68%);
--btn-primary-backdrop: blur(10px) saturate(142%);
--btn-primary-backdrop-hover: blur(11px) saturate(148%);
/* Liquid Glass (Хабр): искажение + лёгкое матирование — только Chromium */
--btn-primary-backdrop-lg: url(#liquid-glass-displacement-btn) blur(2px);
--btn-primary-backdrop-hover-lg: url(#liquid-glass-displacement-btn) blur(2px);
/* Полупрозрачный акцентный фон, чтобы displacement был виден (Liquid Glass) */
/* Полупрозрачный акцентный фон — displacement больше не нужен */
--btn-primary-bg-lg: radial-gradient(
circle at 0% 0%,
color-mix(in hsl, var(--accent), white 10%) 0%,
@@ -3470,8 +3464,6 @@ body.home .section__title {
background: var(--v12-glass-neutral-bg);
border: none;
box-shadow: var(--v12-glass-neutral-shadow);
-webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated);
backdrop-filter: var(--v12-glass-neutral-filter-elevated);
}
/* Тонирование акцентом поверх стекла: снизу акцент, кверху прозрачно
@@ -3489,6 +3481,13 @@ body.home .section__title {
opacity: var(--mp-card-glass-tint);
}
/* Стекломодификатор: убирает стеклянные слои карточки (data-glass="false").
Замечание: эффект стекла у карточек портфолио — полупрозрачный фон */
.mp-card[data-glass="false"]::before,
.mp-card[data-glass="false"]::after {
display: none;
}
.mp-card:hover,
.mp-card:focus-visible {
border-color: color-mix(in srgb, var(--accent) 58%, var(--card-border));
@@ -3974,6 +3973,15 @@ html[data-theme="dark"] .mp-card--stack-bottom .mp-card__tag {
content: none;
}
/* Стекломодификатор для портфолио: убирает полупрозрачное стекло (background) */
.portfolio-card[data-glass="false"] {
background: var(--surface);
}
.portfolio-card[data-glass="false"] .portfolio-card__body {
background: var(--surface);
}
.portfolio-card__title {
margin: 0;
font-family: var(--font-accent);
@@ -5203,9 +5211,6 @@ html[data-theme="dark"] {
inset 0 1px 0 hsla(0, 0%, 100%, 0.09);
--v12-glass-neutral-filter: blur(16px) saturate(118%);
--v12-glass-neutral-filter-elevated: blur(18px) saturate(125%);
/* Liquid Glass (Хабр): искажение + лёгкое матирование — только Chromium */
--v12-glass-neutral-filter-lg: url(#liquid-glass-displacement) blur(3px);
--v12-glass-neutral-filter-elevated-lg: url(#liquid-glass-displacement) blur(3px);
}
html[data-theme="light"] {
@@ -5221,9 +5226,6 @@ html[data-theme="light"] {
inset 0 -1px 0 hsla(0, 0%, 0%, 0.04);
--v12-glass-neutral-filter: blur(12px) saturate(124%);
--v12-glass-neutral-filter-elevated: blur(14px) saturate(130%);
/* Liquid Glass (Хабр): искажение + лёгкое матирование — только Chromium */
--v12-glass-neutral-filter-lg: url(#liquid-glass-displacement) blur(3px);
--v12-glass-neutral-filter-elevated-lg: url(#liquid-glass-displacement) blur(3px);
}
html[data-theme="dark"] .header--scrolled .header__inner,
@@ -5275,85 +5277,6 @@ html[data-theme="light"] .fab.glass-neutral:not(.fab--primary):focus-visible {
-webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated);
}
/* Liquid Glass (Хабр): Chromium-only displacement.
Safari/Firefox НЕ рендерят url()-фильтр в backdrop-filter — остаётся чистый blur.
Детект: Chrome не поддерживает hanging-punctuation, Safari/Firefox — поддерживают. */
@supports not (hanging-punctuation: first) {
/* Базовый (не-elevated) слой — только .glass-neutral */
html[data-theme="dark"] .glass-neutral,
html[data-theme="light"] .glass-neutral {
backdrop-filter: var(--v12-glass-neutral-filter-lg);
-webkit-backdrop-filter: var(--v12-glass-neutral-filter-lg);
}
/* Elevated-слой: шапка, панели, FAB при наведении, overflow-меню */
html[data-theme="dark"] .header--scrolled .header__inner,
html[data-theme="light"] .header--scrolled .header__inner,
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,
html[data-theme="light"] .cookie-notice.glass-neutral,
html[data-theme="dark"] .fab.glass-neutral:not(.fab--primary):hover,
html[data-theme="dark"] .fab.glass-neutral:not(.fab--primary):focus-visible,
html[data-theme="light"] .fab.glass-neutral:not(.fab--primary):hover,
html[data-theme="light"] .fab.glass-neutral:not(.fab--primary):focus-visible,
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 {
backdrop-filter: var(--v12-glass-neutral-filter-elevated-lg);
-webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated-lg);
}
/* Кнопки: primary/fab — акцентное стекло + displacement;
secondary/ghost — нейтральное стекло + displacement */
html[data-theme="dark"] .btn--primary,
html[data-theme="light"] .btn--primary,
html[data-theme="dark"] .fab--primary,
html[data-theme="light"] .fab--primary {
background: var(--btn-primary-bg-lg);
backdrop-filter: var(--btn-primary-backdrop-lg);
-webkit-backdrop-filter: var(--btn-primary-backdrop-lg);
}
html[data-theme="dark"] .btn--primary:hover,
html[data-theme="dark"] .btn--primary:focus-visible,
html[data-theme="light"] .btn--primary:hover,
html[data-theme="light"] .btn--primary:focus-visible,
html[data-theme="dark"] a.btn--primary:visited:hover,
html[data-theme="light"] a.btn--primary:visited:hover,
html[data-theme="dark"] .fab--primary:hover,
html[data-theme="dark"] .fab--primary:focus-visible,
html[data-theme="light"] .fab--primary:hover,
html[data-theme="light"] .fab--primary:focus-visible,
html[data-theme="dark"] a.fab--primary:visited,
html[data-theme="light"] a.fab--primary:visited {
background: var(--btn-primary-hover-bg-lg);
backdrop-filter: var(--btn-primary-backdrop-hover-lg);
-webkit-backdrop-filter: var(--btn-primary-backdrop-hover-lg);
}
html[data-theme="dark"] .btn--secondary,
html[data-theme="light"] .btn--secondary,
html[data-theme="dark"] .btn--ghost,
html[data-theme="light"] .btn--ghost {
backdrop-filter: var(--v12-glass-neutral-filter-lg);
-webkit-backdrop-filter: var(--v12-glass-neutral-filter-lg);
}
html[data-theme="dark"] .btn--secondary:hover,
html[data-theme="dark"] .btn--secondary:focus-visible,
html[data-theme="light"] .btn--secondary:hover,
html[data-theme="light"] .btn--secondary:focus-visible,
html[data-theme="dark"] .btn--ghost:hover,
html[data-theme="dark"] .btn--ghost:focus-visible,
html[data-theme="light"] .btn--ghost:hover,
html[data-theme="light"] .btn--ghost:focus-visible {
backdrop-filter: var(--v12-glass-neutral-filter-elevated-lg);
-webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated-lg);
}
}
html[data-theme="dark"] .nav-more__dock,
html[data-theme="light"] .nav-more__dock,
html[data-theme="dark"] #nav-more-menu-floating,