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:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user