186 lines
3.5 KiB
CSS
186 lines
3.5 KiB
CSS
/* Check Boxes */
|
|
|
|
.check-box StBoxLayout {
|
|
spacing: .8em;
|
|
}
|
|
|
|
.check-box StBin {
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url("checkbox-off.svg");
|
|
}
|
|
|
|
.check-box:focus StBin {
|
|
background-image: url("checkbox-off-focused.svg");
|
|
}
|
|
|
|
.check-box:checked StBin {
|
|
background-image: url("checkbox.svg");
|
|
}
|
|
|
|
.check-box:focus:checked StBin {
|
|
background-image: url("checkbox-focused.svg");
|
|
}
|
|
|
|
|
|
/* Toggles */
|
|
|
|
.toggle-switch {
|
|
/* background-image: url("./toggle-off.svg"); */
|
|
/* size same as svg */
|
|
height: 18px;
|
|
width: 33px;
|
|
background-color: ACCENT-DISABLED_HOVER;
|
|
border-radius: 99px;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW !important;
|
|
}
|
|
|
|
.toggle-switch:checked {
|
|
/* background-image: url("./toggle-on.svg"); */
|
|
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 */
|
|
|
|
.dnd-button {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.dnd-button .toggle-switch {
|
|
/* size same as svg */
|
|
width: 40px;
|
|
height: 22px;
|
|
border-radius: 9px;
|
|
/* background-image: url("./toggle-off_dnd.svg"); */
|
|
background-color: ACCENT-DISABLED-COLOR;
|
|
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 {
|
|
background-color: ACCENT-DISABLED_HOVER;
|
|
}
|
|
|
|
.dnd-button .toggle-switch:checked {
|
|
/* background-image: url("./toggle-on_dnd.svg"); */
|
|
background-color: BUTTON-COLOR;
|
|
}
|
|
|
|
.dnd-button:hover .toggle-switch:checked {
|
|
background-color: BUTTON_HOVER;
|
|
}
|
|
|
|
.dnd-button:focus {
|
|
border-color: transparent;
|
|
}
|
|
|
|
.dnd-button:focus .toggle-switch {
|
|
box-shadow: inset 0 0 0 1px ACCENT-SECONDARY-COLOR !important;
|
|
}
|
|
|
|
|
|
/* Buttons */
|
|
|
|
.button {
|
|
color: TEXT-PRIMARY-COLOR;
|
|
background-color: ACCENT-DISABLED-COLOR;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
|
transition-duration: 100ms;
|
|
}
|
|
|
|
.button:insensitive {
|
|
box-shadow: none;
|
|
color: TEXT-SECONDARY-COLOR;
|
|
box-shadow: inset 0 0 0 1px BORDER-SHADOW;
|
|
}
|
|
|
|
.button:hover,
|
|
.button:active {
|
|
background-color: ACCENT-DISABLED_HOVER;
|
|
}
|
|
|
|
.button:focus {
|
|
background-color: ACCENT-OPACITY-COLOR;
|
|
box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
|
|
}
|
|
|
|
/* clear button */
|
|
.message-list-clear-button {
|
|
padding: 0 20px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.message-list-clear-button:insensitive {
|
|
background-color: SECTION-COLOR;
|
|
}
|
|
|
|
/* Sliders */
|
|
|
|
.slider,
|
|
.level {
|
|
color: BUTTON-TEXT-COLOR; /* slider handle color (47+) */
|
|
-barlevel-height: 14px;
|
|
-barlevel-background-color: ACCENT-DISABLED-COLOR;
|
|
-barlevel-active-background-color: BUTTON-COLOR;
|
|
-barlevel-border-width: 0px; /* up to 46 */
|
|
/* overfill */
|
|
-barlevel-overdrive-color: #c01c28;
|
|
-barlevel-overdrive-separator-width: 2px;
|
|
-slider-handle-radius: 7px;
|
|
}
|
|
|
|
|
|
/* Scroll bar */
|
|
|
|
StScrollBar {
|
|
padding: 0;
|
|
}
|
|
|
|
StScrollView StScrollBar {
|
|
min-width: 8px;
|
|
min-height: 8px;
|
|
}
|
|
|
|
StScrollBar StBin#trough {
|
|
border-radius: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
StScrollBar StButton#vhandle,
|
|
StScrollBar StButton#hhandle {
|
|
border-radius: 8px;
|
|
background-color: SCROLLBAR-COLOR;
|
|
border: 3px solid transparent;
|
|
transition-duration: 100ms;
|
|
}
|
|
|
|
StScrollBar StButton#vhandle:hover,
|
|
StScrollBar StButton#hhandle:hover {
|
|
background-color: SCROLLBAR_HOVER;
|
|
}
|
|
|
|
StScrollBar StButton#vhandle:active,
|
|
StScrollBar StButton#hhandle:active {
|
|
background-color: SCROLLBAR_ACTIVE;
|
|
} |