yonlu/yellowjacket
1
1
Fork 0
Code Issues 52 Pull Requests 4 Actions Packages Projects Releases 12 Wiki Activity

fix: icons outside the pill — globe left, track center, hard-drive right

Browse Source 
Moved icons to sit outside the toggle track on either side.
Both icons are always fully visible. The active side's icon
gets the accent color, the inactive side dims to secondary.
Track is a minimal 36×20px pill with a sliding thumb.
- Off: globe bright, thumb left, hard-drive dimmed
- On: globe dimmed, thumb right + yellow track, hard-drive accent
This commit is contained in:
yonlu
2026-03-30 15:58:10 -04:00
parent 65a6a73d17
commit 4e52f6b494
2 changed files with 28 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.css
+25 -31
View File
@@ -41,71 +41,65 @@ p {
}
.mode-toggle {
position: relative;
display: flex;
align-items: center;
width: 52px;
height: 26px;
border-radius: 13px;
background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.1));
gap: 6px;
cursor: pointer;
flex-shrink: 0;
}
.mode-toggle-track {
position: relative;
width: 36px;
height: 20px;
border-radius: 10px;
background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.15));
transition: background 0.2s ease;
}
.mode-toggle:hover {
background: rgba(255, 255, 255, 0.15);
.mode-toggle:hover .mode-toggle-track {
background: rgba(255, 255, 255, 0.22);
}
.mode-toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 22px;
height: 22px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--yj-text-primary, #fff);
transition: left 0.2s ease, background 0.2s ease;
z-index: 1;
}
.mode-toggle.active .mode-toggle-thumb {
left: 28px;
background: #000;
}
.mode-toggle.active {
.mode-toggle.active .mode-toggle-track {
background: var(--yj-accent, #ffd43b);
}
.mode-toggle.active .mode-toggle-thumb {
left: 18px;
background: #000;
}
.mode-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
z-index: 2;
transition: opacity 0.2s ease;
pointer-events: none;
font-size: 14px;
transition: color 0.2s ease, opacity 0.2s ease;
}
.mode-icon-globe {
left: 7px;
color: #000;
opacity: 0;
color: var(--yj-text-primary, #fff);
}
.mode-icon-local {
right: 7px;
color: var(--yj-text-secondary, #b3b3b3);
opacity: 1;
color: var(--yj-text-secondary, #888);
}
.mode-toggle.active .mode-icon-globe {
opacity: 1;
color: var(--yj-text-secondary, #888);
}
.mode-toggle.active .mode-icon-local {
opacity: 0;
color: var(--yj-accent, #ffd43b);
}
ul {