gtk3: Make check/radio visible in Firefox
regardless of whether the background is bright or dark (#123)
regardless of whether the background is bright or dark (#123)
by roundabout, Monday, 19 March 2018, 17:14:37 (1521479677), pushed by roundabout, Sunday, 11 May 2025, 13:22:22 (1746969742)
Author identity: nana-4 <hnmaigo@gmail.com>
4e2aa1c3dc2a91de44c37d439a33a39e29fa1c4a
- Make gtk2 check/radio buttons a bit smaller for Qt apps ([#78](../../issues/78))
- Use `#757575` as check/radio buttons color for only web interfaces ([#123](../../issues/123), if possible)
- Use `#757575` as check/radio buttons color for some web interfaces ([#123](../../issues/123), if possible)
- Make compact variant more compact ([#79](../../issues/79))
> checkbutton > check { @extend %small_check; }
> radiobutton > radio { @extend %small_radio; }
// make check/radio visible regardless of whether the background is bright or dark
> checkbutton > check:not(:checked),
> radiobutton > radio:not(:checked) {
color: $grey_600;
&:hover, &:active { color: $grey_900; }
&:disabled { color: rgba($grey_600, 0.5); }
}
}
// remove ugly border around the menus
background-image: image(alpha(currentColor, 0.1));
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked),
window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
color: #757575;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
color: #212121;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
color: rgba(117, 117, 117, 0.5);
}
window.background:not(.csd) > window > menu,
window.background:not(.csd) > menu > menu {
border: none;
background-image: image(alpha(currentColor, 0.1));
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked),
window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
color: #757575;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
color: #212121;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
color: rgba(117, 117, 117, 0.5);
}
window.background:not(.csd) > window > menu,
window.background:not(.csd) > menu > menu {
border: none;
background-image: image(alpha(currentColor, 0.1));
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked),
window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
color: #757575;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
color: #212121;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
color: rgba(117, 117, 117, 0.5);
}
window.background:not(.csd) > window > menu,
window.background:not(.csd) > menu > menu {
border: none;
background-image: image(alpha(currentColor, 0.1));
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked),
window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
color: #757575;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
color: #212121;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
color: rgba(117, 117, 117, 0.5);
}
window.background:not(.csd) > window > menu,
window.background:not(.csd) > menu > menu {
border: none;
background-image: image(alpha(currentColor, 0.1));
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked),
window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
color: #757575;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
color: #212121;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
color: rgba(117, 117, 117, 0.5);
}
window.background:not(.csd) > window > menu,
window.background:not(.csd) > menu > menu {
border: none;
background-image: image(alpha(currentColor, 0.1));
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked),
window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
color: #757575;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
color: #212121;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
color: rgba(117, 117, 117, 0.5);
}
window.background:not(.csd) > window > menu,
window.background:not(.csd) > menu > menu {
border: none;
background-image: image(alpha(currentColor, 0.1));
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked),
window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
color: #757575;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
color: #212121;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
color: rgba(117, 117, 117, 0.5);
}
window.background:not(.csd) > window > menu,
window.background:not(.csd) > menu > menu {
border: none;
background-image: image(alpha(currentColor, 0.1));
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked),
window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
color: #757575;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
color: #212121;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
color: rgba(117, 117, 117, 0.5);
}
window.background:not(.csd) > window > menu,
window.background:not(.csd) > menu > menu {
border: none;
background-image: image(alpha(currentColor, 0.1));
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked),
window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
color: #757575;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
color: #212121;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
color: rgba(117, 117, 117, 0.5);
}
window.background:not(.csd) > window > menu,
window.background:not(.csd) > menu > menu {
border: none;
background-image: image(alpha(currentColor, 0.1));
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked),
window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
color: #757575;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
color: #212121;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
color: rgba(117, 117, 117, 0.5);
}
window.background:not(.csd) > window > menu,
window.background:not(.csd) > menu > menu {
border: none;
background-image: image(alpha(currentColor, 0.1));
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked),
window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
color: #757575;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
color: #212121;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
color: rgba(117, 117, 117, 0.5);
}
window.background:not(.csd) > window > menu,
window.background:not(.csd) > menu > menu {
border: none;
background-image: image(alpha(currentColor, 0.1));
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked),
window.background:not(.csd) > widget > radiobutton > radio:not(:checked) {
color: #757575;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):hover, window.background:not(.csd) > widget > checkbutton > check:not(:checked):active,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):hover,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):active {
color: #212121;
}
window.background:not(.csd) > widget > checkbutton > check:not(:checked):disabled,
window.background:not(.csd) > widget > radiobutton > radio:not(:checked):disabled {
color: rgba(117, 117, 117, 0.5);
}
window.background:not(.csd) > window > menu,
window.background:not(.csd) > menu > menu {
border: none;