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;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 56px;
|
width: 52px;
|
||||||
height: 28px;
|
height: 26px;
|
||||||
border-radius: 14px;
|
border-radius: 13px;
|
||||||
background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.1));
|
background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.1));
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
padding: 0 4px;
|
|
||||||
justify-content: space-between;
|
|
||||||
transition: background 0.2s ease;
|
transition: background 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -61,18 +59,19 @@ p {
|
|||||||
|
|
||||||
.mode-toggle-thumb {
|
.mode-toggle-thumb {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 3px;
|
top: 2px;
|
||||||
left: 3px;
|
left: 2px;
|
||||||
width: 22px;
|
width: 22px;
|
||||||
height: 22px;
|
height: 22px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--yj-text-primary, #fff);
|
background: var(--yj-text-primary, #fff);
|
||||||
transition: left 0.2s ease;
|
transition: left 0.2s ease, background 0.2s ease;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-toggle.active .mode-toggle-thumb {
|
.mode-toggle.active .mode-toggle-thumb {
|
||||||
left: 31px;
|
left: 28px;
|
||||||
|
background: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-toggle.active {
|
.mode-toggle.active {
|
||||||
@@ -80,25 +79,33 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mode-icon {
|
.mode-icon {
|
||||||
font-size: 13px;
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
font-size: 12px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
transition: color 0.2s ease;
|
transition: opacity 0.2s ease;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-icon-globe {
|
.mode-icon-globe {
|
||||||
color: var(--yj-text-primary, #fff);
|
left: 7px;
|
||||||
|
color: #000;
|
||||||
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-icon-local {
|
.mode-icon-local {
|
||||||
|
right: 7px;
|
||||||
color: var(--yj-text-secondary, #b3b3b3);
|
color: var(--yj-text-secondary, #b3b3b3);
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-toggle.active .mode-icon-globe {
|
.mode-toggle.active .mode-icon-globe {
|
||||||
color: rgba(0, 0, 0, 0.3);
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-toggle.active .mode-icon-local {
|
.mode-toggle.active .mode-icon-local {
|
||||||
color: #000;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
|
|||||||
Reference in New Issue
Block a user