104 lines
3.0 KiB
CSS
104 lines
3.0 KiB
CSS
/* Controls */
|
|
/* Switchers, Checkboxes, etc. */
|
|
|
|
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
|
|
|
/* Checkbox */
|
|
input[type="checkbox"],
|
|
checkbox:not(.treenode-checkbox) > .checkbox-check {
|
|
appearance: none !important;
|
|
border: 0 !important;
|
|
border-radius: 6px !important;
|
|
color: var(--gnome-window-color) !important;
|
|
height: 20px !important;
|
|
width: 20px !important;
|
|
}
|
|
input[type="checkbox"]:not(:checked),
|
|
checkbox:not(.treenode-checkbox) > .checkbox-check:not([checked]) {
|
|
background-color: transparent !important;
|
|
box-shadow: inset 0 0 0 2px var(--gnome-trough-background);
|
|
}
|
|
input[type="checkbox"]:not(:checked):hover,
|
|
checkbox:not(.treenode-checkbox) > .checkbox-check:not([checked]):hover {
|
|
box-shadow: inset 0 0 0 2px var(--gnome-trough-hover-background);
|
|
}
|
|
input[type="checkbox"]:checked,
|
|
checkbox:not(.treenode-checkbox) > .checkbox-check[checked] {
|
|
background-color: var(--gnome-accent-bg) !important;
|
|
background-image: url("../icons/select-symbolic.svg") !important;
|
|
background-size: 14px !important;
|
|
fill: white !important;
|
|
}
|
|
|
|
/* Radio */
|
|
radio > .radio-check {
|
|
appearance: none !important;
|
|
border: 0 !important;
|
|
border-radius: 50% !important;
|
|
color: var(--gnome-window-color) !important;
|
|
height: 20px !important;
|
|
padding: 3px !important;
|
|
width: 20px !important;
|
|
}
|
|
radio > .radio-check:not([selected]) {
|
|
background-color: transparent !important;
|
|
box-shadow: inset 0 0 0 2px var(--gnome-trough-background);
|
|
}
|
|
radio > .radio-check:not([selected]):hover {
|
|
box-shadow: inset 0 0 0 2px var(--gnome-trough-hover-background);
|
|
}
|
|
radio > .radio-check[selected] {
|
|
background-color: var(--gnome-accent-bg) !important;
|
|
list-style-image: url("../icons/bullet-symbolic.svg") !important;
|
|
fill: white !important;
|
|
}
|
|
|
|
.radio-label {
|
|
margin-inline-start: 3px !important;
|
|
}
|
|
|
|
/* Switchers */
|
|
.protections-popup-tp-switch-box {
|
|
padding: 0 !important;
|
|
-moz-box-pack: start !important;
|
|
}
|
|
#protections-popup-tp-switch:not([enabled])[showdotindicator]::after {
|
|
display: none !important;
|
|
}
|
|
#protections-popup-tp-switch {
|
|
background: var(--gnome-trough-background) !important;
|
|
border: 0 !important;
|
|
border-radius: 24px !important;
|
|
min-width: 48px !important;
|
|
width: 48px !important;
|
|
min-height: 26px !important;
|
|
padding: 0 !important;
|
|
position: relative !important;
|
|
display: block !important;
|
|
margin: 0 !important;
|
|
}
|
|
#protections-popup-tp-switch:hover {
|
|
background-image: var(--gnome-trough-hover-background) !important;
|
|
}
|
|
#protections-popup-tp-switch::before {
|
|
position: absolute !important;
|
|
top: 2px;
|
|
left: 2px;
|
|
background: #fff !important;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
|
|
border: 0 !important;
|
|
border-radius: 24px !important;
|
|
height: 22px !important;
|
|
width: 22px !important;
|
|
transition: left .2s ease;
|
|
outline: 0 !important;
|
|
}
|
|
#protections-popup-tp-switch[enabled] {
|
|
background: var(--gnome-accent-bg) !important;
|
|
padding-inline-start: 24px !important;
|
|
}
|
|
#protections-popup-tp-switch[enabled]::before {
|
|
background: #fff !important;
|
|
left: 24px;
|
|
}
|