Add theme picker dropdown with swatches for theme selection

This commit is contained in:
interlope committed 2026-05-29 18:46:39 +02:00
1 parent 142dcbdf0a
commit 1e2bcb18f1
3 files changed
+144 -22

No files matched your search

+80
View File
@@ -548,6 +548,86 @@ img.nav-svg-icon {
margin-right: 0;
}
/* ----------------------------------------
THEME PICKER DROPDOWN
---------------------------------------- */
.theme-picker-wrap {
position: relative;
}
.theme-picker {
position: absolute;
right: 0;
top: calc(100% + 10px);
display: flex;
gap: 2px;
padding: 10px 8px;
background: #111111;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-md);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
z-index: 1051;
/* hidden by default */
visibility: hidden;
opacity: 0;
transform: translateY(-6px) scale(0.95);
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
pointer-events: none;
}
.theme-picker.is-open {
visibility: visible;
opacity: 1;
transform: translateY(0) scale(1);
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
pointer-events: auto;
}
.swatch {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
background: none;
border: none;
padding: 6px 7px;
cursor: pointer;
border-radius: 8px;
transition: background 0.12s;
}
.swatch:hover {
background: rgba(255, 255, 255, 0.08);
}
/* --sb = swatch background (bg-body of that theme)
--sa = swatch accent colour */
.swatch-dot {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--sb);
border: 2px solid var(--sa);
transition: box-shadow 0.15s;
}
.swatch.is-active .swatch-dot {
box-shadow: 0 0 0 2px var(--sa), 0 0 0 4px rgba(255, 255, 255, 0.18);
}
.swatch-label {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.45);
transition: color 0.12s;
}
.swatch.is-active .swatch-label {
color: rgba(255, 255, 255, 0.9);
}
/* ========================================
PROFILE HERO (Blowfish-style homepage)
======================================== */