Fixed switchers (#38)

This method is incompatible with older GNOME versions
This commit is contained in:
Vladyslav Hroshev
2024-09-20 21:25:06 +03:00
parent abeb1e0686
commit 439e16a7f2

View File

@@ -26,20 +26,32 @@
/* Toggles */ /* Toggles */
.toggle-switch { .toggle-switch {
background-image: url("./toggle-off.svg"); /* background-image: url("./toggle-off.svg"); */
/* size same as svg */ /* size same as svg */
height: 18px; height: 18px;
width: 33.2px; width: 33px;
background-color: ACCENT-DISABLED_HOVER; background-color: ACCENT-DISABLED_HOVER;
border-radius: 99px; border-radius: 99px;
box-shadow: inset 0 0 0 1px BORDER-SHADOW !important; box-shadow: inset 0 0 0 1px BORDER-SHADOW !important;
} }
.toggle-switch:checked { .toggle-switch:checked {
background-image: url("./toggle-on.svg"); /* background-image: url("./toggle-on.svg"); */
background-color: BUTTON-COLOR; background-color: BUTTON-COLOR;
} }
.toggle-switch .handle {
/* toggle-switch height - handle margin * 2 */
width: 14px;
height: 14px;
margin: 2px;
background-color: TEXT-SECONDARY-COLOR;
}
.toggle-switch:checked .handle {
background-color: BUTTON-TEXT-COLOR;
}
/* Do Not Distrub toggle */ /* Do Not Distrub toggle */
@@ -50,19 +62,28 @@
.dnd-button .toggle-switch { .dnd-button .toggle-switch {
/* size same as svg */ /* size same as svg */
width: 40px; width: 40px;
height: 21.7px; height: 22px;
border-radius: 9px; border-radius: 9px;
background-image: url("./toggle-off_dnd.svg"); /* background-image: url("./toggle-off_dnd.svg"); */
background-color: ACCENT-DISABLED-COLOR; background-color: ACCENT-DISABLED-COLOR;
transition-duration: 100ms; transition-duration: 100ms;
} }
/* toggle */
.dnd-button .toggle-switch .handle {
/* toggle-switch height - handle margin * 2 */
width: 16px;
height: 16px;
border-radius: 6px;
margin: 3px;
}
.dnd-button:hover .toggle-switch { .dnd-button:hover .toggle-switch {
background-color: ACCENT-DISABLED_HOVER; background-color: ACCENT-DISABLED_HOVER;
} }
.dnd-button .toggle-switch:checked { .dnd-button .toggle-switch:checked {
background-image: url("./toggle-on_dnd.svg"); /* background-image: url("./toggle-on_dnd.svg"); */
background-color: BUTTON-COLOR; background-color: BUTTON-COLOR;
} }