fix: pill toggle layout — icons absolutely positioned, thumb slides over

Icons are now at fixed positions inside the pill (globe left,
hard-drive right) with absolute positioning. The thumb slides
between them. The active icon is the one NOT covered by the thumb:
- Off: thumb left (covers globe), hard-drive visible
- On: thumb right (covers hard-drive), globe visible
Icons fade with opacity transitions. Thumb changes from white
(off) to black (on) to contrast with the yellow active background.
This commit is contained in:
2026-03-30 15:55:25 -04:00
parent d5a427d885
commit 65a6a73d17
+21 -14
View File
@@ -44,14 +44,12 @@ p {
position: relative;
display: flex;
align-items: center;
width: 56px;
height: 28px;
border-radius: 14px;
width: 52px;
height: 26px;
border-radius: 13px;
background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.1));
cursor: pointer;
flex-shrink: 0;
padding: 0 4px;
justify-content: space-between;
transition: background 0.2s ease;
}
@@ -61,18 +59,19 @@ p {
.mode-toggle-thumb {
position: absolute;
top: 3px;
left: 3px;
top: 2px;
left: 2px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--yj-text-primary, #fff);
transition: left 0.2s ease;
transition: left 0.2s ease, background 0.2s ease;
z-index: 1;
}
.mode-toggle.active .mode-toggle-thumb {
left: 31px;
left: 28px;
background: #000;
}
.mode-toggle.active {
@@ -80,25 +79,33 @@ p {
}
.mode-icon {
font-size: 13px;
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
z-index: 2;
transition: color 0.2s ease;
transition: opacity 0.2s ease;
pointer-events: none;
}
.mode-icon-globe {
color: var(--yj-text-primary, #fff);
left: 7px;
color: #000;
opacity: 0;
}
.mode-icon-local {
right: 7px;
color: var(--yj-text-secondary, #b3b3b3);
opacity: 1;
}
.mode-toggle.active .mode-icon-globe {
color: rgba(0, 0, 0, 0.3);
opacity: 1;
}
.mode-toggle.active .mode-icon-local {
color: #000;
opacity: 0;
}
ul {