Add semi-transparent blurred tab icon as background watermark

Large SVG icon on the right side of the viewport reflects the active tab,
crossfades on tab switch. Also removes overflow:hidden from cards to fix
color picker clipping.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-12 11:43:59 +03:00
parent 4245e81a35
commit e97ef3afa6
4 changed files with 82 additions and 0 deletions

View File

@@ -102,6 +102,35 @@ body.modal-open {
background: transparent;
}
/* ── Tab indicator (background watermark) ── */
#tab-indicator {
position: fixed;
right: -10vw;
top: 50%;
transform: translateY(-50%);
width: 55vw;
height: 55vw;
max-width: 600px;
max-height: 600px;
pointer-events: none;
z-index: -1;
opacity: 0;
filter: blur(6px);
color: var(--primary-color);
transition: opacity 0.5s ease;
}
#tab-indicator svg {
width: 100%;
height: 100%;
opacity: 0.04;
}
#tab-indicator.tab-indicator-visible {
opacity: 1;
}
[data-theme="light"] #tab-indicator svg {
opacity: 0.035;
}
.container {
padding: 20px;
}