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:
+21
-14
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user