diff --git a/gtk/Makefile.am b/gtk/Makefile.am
index 45f862a761..6a53a2b7c5 100644
--- a/gtk/Makefile.am
+++ b/gtk/Makefile.am
@@ -1249,6 +1249,14 @@ gtk.gresource.xml: Makefile.am inspector/Makefile.inc
echo " theme/HighContrast/gtk-inverse.css" >> $@; \
echo " theme/HighContrast/gtk-contained.css" >> $@; \
echo " theme/HighContrast/gtk-contained-inverse.css" >> $@; \
+ for f in $(srcdir)/theme/HighContrast/assets/*.png; do \
+ n=`basename $$f`; \
+ echo " theme/HighContrast/assets/$$n" >> $@; \
+ done; \
+ for f in $(srcdir)/theme/HighContrast/assets/*.svg; do \
+ n=`basename $$f`; \
+ echo " theme/HighContrast/assets/$$n" >> $@; \
+ done; \
echo " theme/win32/gtk-win32-base.css" >> $@; \
echo " theme/win32/gtk.css" >> $@; \
for f in $(srcdir)/cursor/*.png; do \
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 54d533cb37..219f94d4c1 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -1605,60 +1605,177 @@ switch {
/*************************
* Check and Radio items *
*************************/
+// draw regular check and radio items using our PNG assets
+// all assets are rendered from assets.svg. never add pngs directly
-// FIXME
-GtkCheckButton.text-button, GtkRadioButton.text-button {
+checkbutton.text-button, radiobutton.text-button {
// this is for a nice focus on check and radios text
- padding: 1px;
+ padding: 2px 0;
outline-offset: 0;
-}
-@each $w,$a in ('check', 'checkbox'),
- ('radio','radio') {
- #{$w} {
- color: $fg_color;
- background-image: none;
- -gtk-icon-source: -gtk-icontheme('#{$a}-symbolic');
- &:hover { color: $bg_color; }
- &:checked, &:active {
- -gtk-icon-source: -gtk-icontheme('#{$a}-checked-symbolic');
- &:disabled {
- color: $insensitive_fg_color;
- &:backdrop { color: $insensitive_fg_color; }
- }
- &:backdrop { color: $backdrop_fg_color; }
- }
- &:disabled {
+ label:not(:only-child) {
+ &:first-child { margin-left: 4px; }
+ &:last-child { margin-right: 4px; }
+ }
+
+ &:disabled {
+ &:active, &:indeterminate, & {
+ // set insensitive color, which is overriden otherwise
color: $insensitive_fg_color;
+
&:backdrop { color: $insensitive_fg_color; }
}
- &:indeterminate {
- -gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic');
- }
- &:backdrop {
- color: $backdrop_fg_color;
- &:selected { color: $backdrop_fg_color; }
- }
}
}
-radiobutton radio,
-checkbutton check {
- min-width: 16px;
- min-height: 16px;
- margin: 0 2px 0 2px;
- &:only-child {
- margin: 0;
+check,
+radio {
+ margin: 0 4px;
+
+ &:only-child { margin: 0; }
+
+ min-height: 14px;
+ min-width: 14px;
+ border: 1px solid;
+ -gtk-icon-source: none;
+
+ @include button(normal);
+
+ &:hover { @include button(hover); }
+ &:active { @include button(active); }
+ &:disabled { @include button(insensitive); }
+ &:backdrop {
+ @include button(backdrop);
+
+ &:disabled { @include button(backdrop-insensitive); }
+ }
+
+ @if $variant == 'light' {
+ // the borders of the light variant versions of checks and radios are too similar in luminosity to the selected background
+ // color, hence we need special casing.
+ row:selected & { border-color: $selected_borders_color; }
+ }
+
+ .osd & {
+ @include button(osd);
+
+ &:hover { @include button(osd); }
+ &:active { @include button(osd-active); }
+ &:backdrop { @include button(osd-backdrop); }
+ &:disabled { @include button(osd-insensitive); }
+ }
+
+ menu menuitem & {
+ margin: 0; // this is a workaround for a menu check/radio size allocation issue
+
+ &, &:hover, &:disabled { //FIXME use button reset mixin
+ min-height: 14px;
+ min-width: 14px;
+ background-image: none;
+ background-color: transparent;
+ box-shadow: none;
+ -gtk-icon-shadow: none;
+ color: inherit;
+ border-color: currentColor;
+ animation: none;
+ }
+ }
+}
+
+%check,
+check {
+ border-radius: 3px;
+
+ &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")),
+ -gtk-recolor(url("assets/check-symbolic.symbolic.png"))); }
+
+ &:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")),
+ -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
+}
+
+%radio,
+radio {
+ border-radius: 100%;
+
+ &:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/bullet-symbolic.svg")),
+ -gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))); }
+
+ &:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")),
+ -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
+}
+
+// let's animate things
+@keyframes check_check {
+ from { -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
+ to { -gtk-icon-transform: unset; }
+}
+
+@keyframes check_radio {
+ from { -gtk-icon-transform: scale(0); }
+ to { -gtk-icon-transform: unset; }
+}
+
+@keyframes check_indeterminate {
+ from { -gtk-icon-transform: scale(0, 1); }
+ to { -gtk-icon-transform: unset; }
+}
+
+check:not(:indeterminate):checked { animation: check_check 400ms; }
+
+radio:not(:indeterminate):checked { animation: check_radio 400ms; }
+
+check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate 400ms; }
+
+// no animations in menus
+menu menuitem {
+ check:not(:indeterminate):checked,
+ radio:not(:indeterminate):checked,
+ check:indeterminate:checked:active,
+ radio:indeterminate:checked { animation: none; }
+}
+
+
+// treeview stuff, let's the fun begin:
+treeview.view check:selected {
+ &:focus, &:backdrop, & {
+ &:disabled, & {
+ @extend %check;
+ }
+ }
+}
+
+treeview.view radio:selected {
+ &:focus, &:backdrop, & {
+ &:disabled, & {
+ @extend %radio;
+ }
}
}
treeview.view check,
treeview.view radio {
- color: $fg_color;
- &:hover { color: $fg_color; }
+ &:selected {
+ &:focus, &:hover, & { color: $selected_fg_color; }
+
+ &:backdrop {
+ &:hover, & {
+ color: $selected_fg_color;
+ border-color: $selected_fg_color;
+ }
+
+ &:disabled {
+ color: $insensitive_fg_color;
+ border-color: $insensitive_fg_color;
+ }
+ }
+
+ &:disabled { color: $insensitive_fg_color;}
+ }
}
+
+
/************
* GtkScale *
************/
diff --git a/gtk/theme/HighContrast/assets/bullet-symbolic.svg b/gtk/theme/HighContrast/assets/bullet-symbolic.svg
new file mode 100644
index 0000000000..c0299734fc
--- /dev/null
+++ b/gtk/theme/HighContrast/assets/bullet-symbolic.svg
@@ -0,0 +1,155 @@
+
+
+
+
diff --git a/gtk/theme/HighContrast/assets/bullet-symbolic.symbolic.png b/gtk/theme/HighContrast/assets/bullet-symbolic.symbolic.png
new file mode 100644
index 0000000000..2ccb0e861a
Binary files /dev/null and b/gtk/theme/HighContrast/assets/bullet-symbolic.symbolic.png differ
diff --git a/gtk/theme/HighContrast/assets/check-symbolic.svg b/gtk/theme/HighContrast/assets/check-symbolic.svg
new file mode 100644
index 0000000000..bac5cd6aaa
--- /dev/null
+++ b/gtk/theme/HighContrast/assets/check-symbolic.svg
@@ -0,0 +1,154 @@
+
+
+
+
diff --git a/gtk/theme/HighContrast/assets/check-symbolic.symbolic.png b/gtk/theme/HighContrast/assets/check-symbolic.symbolic.png
new file mode 100644
index 0000000000..eed1f45a58
Binary files /dev/null and b/gtk/theme/HighContrast/assets/check-symbolic.symbolic.png differ
diff --git a/gtk/theme/HighContrast/assets/dash-symbolic.svg b/gtk/theme/HighContrast/assets/dash-symbolic.svg
new file mode 100644
index 0000000000..7886d54166
--- /dev/null
+++ b/gtk/theme/HighContrast/assets/dash-symbolic.svg
@@ -0,0 +1,153 @@
+
+
+
+
diff --git a/gtk/theme/HighContrast/assets/dash-symbolic.symbolic.png b/gtk/theme/HighContrast/assets/dash-symbolic.symbolic.png
new file mode 100644
index 0000000000..c20d4bac52
Binary files /dev/null and b/gtk/theme/HighContrast/assets/dash-symbolic.symbolic.png differ
diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css b/gtk/theme/HighContrast/gtk-contained-inverse.css
index 0aca791c45..6693a488d2 100644
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -1747,75 +1747,198 @@ switch {
/*************************
* Check and Radio items *
*************************/
-GtkCheckButton.text-button, GtkRadioButton.text-button {
- padding: 1px;
+checkbutton.text-button, radiobutton.text-button {
+ padding: 2px 0;
outline-offset: 0; }
-
-check {
- color: #fff;
- background-image: none;
- -gtk-icon-source: -gtk-icontheme("checkbox-symbolic"); }
- check:hover {
- color: #000; }
- check:checked, check:active {
- -gtk-icon-source: -gtk-icontheme("checkbox-checked-symbolic"); }
- check:checked:disabled, check:active:disabled {
- color: gray; }
- check:checked:disabled:backdrop, check:active:disabled:backdrop {
- color: gray; }
- check:checked:backdrop, check:active:backdrop {
- color: #fff; }
- check:disabled {
+ checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button label:not(:only-child):first-child {
+ margin-left: 4px; }
+ checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button label:not(:only-child):last-child {
+ margin-right: 4px; }
+ checkbutton.text-button:disabled:active, checkbutton.text-button:disabled:indeterminate, checkbutton.text-button:disabled, radiobutton.text-button:disabled:active, radiobutton.text-button:disabled:indeterminate, radiobutton.text-button:disabled {
color: gray; }
- check:disabled:backdrop {
+ checkbutton.text-button:disabled:active:backdrop, checkbutton.text-button:disabled:indeterminate:backdrop, checkbutton.text-button:disabled:backdrop, radiobutton.text-button:disabled:active:backdrop, radiobutton.text-button:disabled:indeterminate:backdrop, radiobutton.text-button:disabled:backdrop {
color: gray; }
- check:indeterminate {
- -gtk-icon-source: -gtk-icontheme("checkbox-mixed-symbolic"); }
- check:backdrop {
- color: #fff; }
- check:backdrop:selected {
- color: #fff; }
+check,
radio {
+ margin: 0 4px;
+ min-height: 14px;
+ min-width: 14px;
+ border: 1px solid;
+ -gtk-icon-source: none;
+ border-width: 2px;
+ border-style: solid;
color: #fff;
background-image: none;
- -gtk-icon-source: -gtk-icontheme("radio-symbolic"); }
- radio:hover {
- color: #000; }
- radio:checked, radio:active {
- -gtk-icon-source: -gtk-icontheme("radio-checked-symbolic"); }
- radio:checked:disabled, radio:active:disabled {
- color: gray; }
- radio:checked:disabled:backdrop, radio:active:disabled:backdrop {
- color: gray; }
- radio:checked:backdrop, radio:active:backdrop {
- color: #fff; }
- radio:disabled {
- color: gray; }
- radio:disabled:backdrop {
- color: gray; }
- radio:indeterminate {
- -gtk-icon-source: -gtk-icontheme("radio-mixed-symbolic"); }
- radio:backdrop {
- color: #fff; }
- radio:backdrop:selected {
- color: #fff; }
-
-radiobutton radio,
-checkbutton check {
- min-width: 16px;
- min-height: 16px;
- margin: 0 2px 0 2px; }
- radiobutton radio:only-child,
- checkbutton check:only-child {
+ background-color: #000;
+ border-color: gray; }
+ check:only-child,
+ radio:only-child {
margin: 0; }
+ check:hover,
+ radio:hover {
+ border-width: 2px;
+ border-style: solid;
+ color: #fff;
+ background-color: #000;
+ border-color: gray;
+ background-image: none; }
+ check:active,
+ radio:active {
+ border-width: 2px;
+ border-style: solid;
+ background-image: none;
+ color: black;
+ background-color: white;
+ border-color: gray; }
+ check:disabled,
+ radio:disabled {
+ border-width: 2px;
+ border-style: solid;
+ color: gray;
+ background-color: #070707;
+ border-color: #494949;
+ background-image: none;
+ text-shadow: none;
+ -gtk-icon-shadow: none; }
+ check:backdrop,
+ radio:backdrop {
+ border-width: 2px;
+ border-style: solid;
+ color: #fff;
+ background-color: #000;
+ border-color: #737373;
+ background-image: none;
+ text-shadow: none;
+ -gtk-icon-shadow: none; }
+ check:backdrop:disabled,
+ radio:backdrop:disabled {
+ border-width: 2px;
+ border-style: solid;
+ color: gray;
+ background-color: #070707;
+ border-color: #494949;
+ background-image: none; }
+ .osd check, .osd
+ radio {
+ border-width: 2px;
+ border-style: solid;
+ color: #fff;
+ background-image: none;
+ background-color: rgba(0, 0, 0, 0.8);
+ border-color: rgba(255, 255, 255, 0.2);
+ box-shadow: none; }
+ .osd check:hover, .osd
+ radio:hover {
+ border-width: 2px;
+ border-style: solid;
+ color: #fff;
+ background-image: none;
+ background-color: rgba(0, 0, 0, 0.8);
+ border-color: rgba(255, 255, 255, 0.2);
+ box-shadow: none; }
+ .osd check:active, .osd
+ radio:active {
+ border-width: 2px;
+ border-style: solid;
+ color: rgba(0, 0, 0, 0.8);
+ background-color: #fff;
+ border-color: rgba(255, 255, 255, 0.2);
+ box-shadow: none; }
+ .osd check:backdrop, .osd
+ radio:backdrop {
+ border-width: 2px;
+ border-style: solid; }
+ .osd check:disabled, .osd
+ radio:disabled {
+ border-width: 2px;
+ border-style: solid;
+ border-color: rgba(255, 255, 255, 0.2);
+ color: gray; }
+ menu menuitem check, menu menuitem
+ radio {
+ margin: 0; }
+ menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem
+ radio, menu menuitem
+ radio:hover, menu menuitem
+ radio:disabled {
+ min-height: 14px;
+ min-width: 14px;
+ background-image: none;
+ background-color: transparent;
+ box-shadow: none;
+ -gtk-icon-shadow: none;
+ color: inherit;
+ border-color: currentColor;
+ animation: none; }
-treeview.view check,
-treeview.view radio {
+treeview.view check:selected:focus:disabled, treeview.view check:selected:focus, treeview.view check:selected:backdrop:disabled, treeview.view check:selected:backdrop, treeview.view check:selected:disabled, treeview.view check:selected,
+check {
+ border-radius: 3px; }
+ treeview.view check:checked:selected,
+ check:checked {
+ -gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")), -gtk-recolor(url("assets/check-symbolic.symbolic.png"))); }
+ treeview.view check:indeterminate:selected,
+ check:indeterminate {
+ -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
+
+treeview.view radio:selected:focus:disabled, treeview.view radio:selected:focus, treeview.view radio:selected:backdrop:disabled, treeview.view radio:selected:backdrop, treeview.view radio:selected:disabled, treeview.view radio:selected,
+radio {
+ border-radius: 100%; }
+ treeview.view radio:checked:selected,
+ radio:checked {
+ -gtk-icon-source: image(-gtk-recolor(url("assets/bullet-symbolic.svg")), -gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))); }
+ treeview.view radio:indeterminate:selected,
+ radio:indeterminate {
+ -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
+
+@keyframes check_check {
+ from {
+ -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
+ to {
+ -gtk-icon-transform: unset; } }
+@keyframes check_radio {
+ from {
+ -gtk-icon-transform: scale(0); }
+ to {
+ -gtk-icon-transform: unset; } }
+@keyframes check_indeterminate {
+ from {
+ -gtk-icon-transform: scale(0, 1); }
+ to {
+ -gtk-icon-transform: unset; } }
+check:not(:indeterminate):checked {
+ animation: check_check 400ms; }
+
+radio:not(:indeterminate):checked {
+ animation: check_radio 400ms; }
+
+check:indeterminate:checked, radio:indeterminate:checked {
+ animation: check_indeterminate 400ms; }
+
+menu menuitem check:not(:indeterminate):checked,
+menu menuitem radio:not(:indeterminate):checked,
+menu menuitem check:indeterminate:checked:active,
+menu menuitem radio:indeterminate:checked {
+ animation: none; }
+
+treeview.view check:selected:focus, treeview.view check:selected:hover, treeview.view check:selected,
+treeview.view radio:selected:focus,
+treeview.view radio:selected:hover,
+treeview.view radio:selected {
color: #fff; }
- treeview.view check:hover,
- treeview.view radio:hover {
- color: #fff; }
+treeview.view check:selected:backdrop:hover, treeview.view check:selected:backdrop,
+treeview.view radio:selected:backdrop:hover,
+treeview.view radio:selected:backdrop {
+ color: #fff;
+ border-color: #fff; }
+treeview.view check:selected:backdrop:disabled,
+treeview.view radio:selected:backdrop:disabled {
+ color: gray;
+ border-color: gray; }
+treeview.view check:selected:disabled,
+treeview.view radio:selected:disabled {
+ color: gray; }
/************
* GtkScale *
diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css
index f6081e7bf4..50af9251a9 100644
--- a/gtk/theme/HighContrast/gtk-contained.css
+++ b/gtk/theme/HighContrast/gtk-contained.css
@@ -1747,75 +1747,201 @@ switch {
/*************************
* Check and Radio items *
*************************/
-GtkCheckButton.text-button, GtkRadioButton.text-button {
- padding: 1px;
+checkbutton.text-button, radiobutton.text-button {
+ padding: 2px 0;
outline-offset: 0; }
-
-check {
- color: #000;
- background-image: none;
- -gtk-icon-source: -gtk-icontheme("checkbox-symbolic"); }
- check:hover {
- color: #fff; }
- check:checked, check:active {
- -gtk-icon-source: -gtk-icontheme("checkbox-checked-symbolic"); }
- check:checked:disabled, check:active:disabled {
- color: gray; }
- check:checked:disabled:backdrop, check:active:disabled:backdrop {
- color: gray; }
- check:checked:backdrop, check:active:backdrop {
- color: #000; }
- check:disabled {
+ checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button label:not(:only-child):first-child {
+ margin-left: 4px; }
+ checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button label:not(:only-child):last-child {
+ margin-right: 4px; }
+ checkbutton.text-button:disabled:active, checkbutton.text-button:disabled:indeterminate, checkbutton.text-button:disabled, radiobutton.text-button:disabled:active, radiobutton.text-button:disabled:indeterminate, radiobutton.text-button:disabled {
color: gray; }
- check:disabled:backdrop {
+ checkbutton.text-button:disabled:active:backdrop, checkbutton.text-button:disabled:indeterminate:backdrop, checkbutton.text-button:disabled:backdrop, radiobutton.text-button:disabled:active:backdrop, radiobutton.text-button:disabled:indeterminate:backdrop, radiobutton.text-button:disabled:backdrop {
color: gray; }
- check:indeterminate {
- -gtk-icon-source: -gtk-icontheme("checkbox-mixed-symbolic"); }
- check:backdrop {
- color: #000; }
- check:backdrop:selected {
- color: #000; }
+check,
radio {
+ margin: 0 4px;
+ min-height: 14px;
+ min-width: 14px;
+ border: 1px solid;
+ -gtk-icon-source: none;
+ border-width: 2px;
+ border-style: solid;
color: #000;
background-image: none;
- -gtk-icon-source: -gtk-icontheme("radio-symbolic"); }
- radio:hover {
- color: #fff; }
- radio:checked, radio:active {
- -gtk-icon-source: -gtk-icontheme("radio-checked-symbolic"); }
- radio:checked:disabled, radio:active:disabled {
- color: gray; }
- radio:checked:disabled:backdrop, radio:active:disabled:backdrop {
- color: gray; }
- radio:checked:backdrop, radio:active:backdrop {
- color: #000; }
- radio:disabled {
- color: gray; }
- radio:disabled:backdrop {
- color: gray; }
- radio:indeterminate {
- -gtk-icon-source: -gtk-icontheme("radio-mixed-symbolic"); }
- radio:backdrop {
- color: #000; }
- radio:backdrop:selected {
- color: #000; }
-
-radiobutton radio,
-checkbutton check {
- min-width: 16px;
- min-height: 16px;
- margin: 0 2px 0 2px; }
- radiobutton radio:only-child,
- checkbutton check:only-child {
+ background-color: #fff;
+ border-color: gray; }
+ check:only-child,
+ radio:only-child {
margin: 0; }
+ check:hover,
+ radio:hover {
+ border-width: 2px;
+ border-style: solid;
+ color: #000;
+ background-color: #fff;
+ border-color: gray;
+ background-image: none; }
+ check:active,
+ radio:active {
+ border-width: 2px;
+ border-style: solid;
+ background-image: none;
+ color: white;
+ background-color: black;
+ border-color: gray; }
+ check:disabled,
+ radio:disabled {
+ border-width: 2px;
+ border-style: solid;
+ color: gray;
+ background-color: white;
+ border-color: silver;
+ background-image: none;
+ text-shadow: none;
+ -gtk-icon-shadow: none; }
+ check:backdrop,
+ radio:backdrop {
+ border-width: 2px;
+ border-style: solid;
+ color: #000;
+ background-color: #fff;
+ border-color: #8d8d8d;
+ background-image: none;
+ text-shadow: none;
+ -gtk-icon-shadow: none; }
+ check:backdrop:disabled,
+ radio:backdrop:disabled {
+ border-width: 2px;
+ border-style: solid;
+ color: gray;
+ background-color: white;
+ border-color: silver;
+ background-image: none; }
+ row:selected check, row:selected
+ radio {
+ border-color: #000; }
+ .osd check, .osd
+ radio {
+ border-width: 2px;
+ border-style: solid;
+ color: #fff;
+ background-image: none;
+ background-color: rgba(0, 0, 0, 0.8);
+ border-color: rgba(255, 255, 255, 0.2);
+ box-shadow: none; }
+ .osd check:hover, .osd
+ radio:hover {
+ border-width: 2px;
+ border-style: solid;
+ color: #fff;
+ background-image: none;
+ background-color: rgba(0, 0, 0, 0.8);
+ border-color: rgba(255, 255, 255, 0.2);
+ box-shadow: none; }
+ .osd check:active, .osd
+ radio:active {
+ border-width: 2px;
+ border-style: solid;
+ color: rgba(0, 0, 0, 0.8);
+ background-color: #fff;
+ border-color: rgba(255, 255, 255, 0.2);
+ box-shadow: none; }
+ .osd check:backdrop, .osd
+ radio:backdrop {
+ border-width: 2px;
+ border-style: solid; }
+ .osd check:disabled, .osd
+ radio:disabled {
+ border-width: 2px;
+ border-style: solid;
+ border-color: rgba(255, 255, 255, 0.2);
+ color: gray; }
+ menu menuitem check, menu menuitem
+ radio {
+ margin: 0; }
+ menu menuitem check, menu menuitem check:hover, menu menuitem check:disabled, menu menuitem
+ radio, menu menuitem
+ radio:hover, menu menuitem
+ radio:disabled {
+ min-height: 14px;
+ min-width: 14px;
+ background-image: none;
+ background-color: transparent;
+ box-shadow: none;
+ -gtk-icon-shadow: none;
+ color: inherit;
+ border-color: currentColor;
+ animation: none; }
-treeview.view check,
-treeview.view radio {
- color: #000; }
- treeview.view check:hover,
- treeview.view radio:hover {
- color: #000; }
+treeview.view check:selected:focus:disabled, treeview.view check:selected:focus, treeview.view check:selected:backdrop:disabled, treeview.view check:selected:backdrop, treeview.view check:selected:disabled, treeview.view check:selected,
+check {
+ border-radius: 3px; }
+ treeview.view check:checked:selected,
+ check:checked {
+ -gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")), -gtk-recolor(url("assets/check-symbolic.symbolic.png"))); }
+ treeview.view check:indeterminate:selected,
+ check:indeterminate {
+ -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
+
+treeview.view radio:selected:focus:disabled, treeview.view radio:selected:focus, treeview.view radio:selected:backdrop:disabled, treeview.view radio:selected:backdrop, treeview.view radio:selected:disabled, treeview.view radio:selected,
+radio {
+ border-radius: 100%; }
+ treeview.view radio:checked:selected,
+ radio:checked {
+ -gtk-icon-source: image(-gtk-recolor(url("assets/bullet-symbolic.svg")), -gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))); }
+ treeview.view radio:indeterminate:selected,
+ radio:indeterminate {
+ -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")), -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
+
+@keyframes check_check {
+ from {
+ -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
+ to {
+ -gtk-icon-transform: unset; } }
+@keyframes check_radio {
+ from {
+ -gtk-icon-transform: scale(0); }
+ to {
+ -gtk-icon-transform: unset; } }
+@keyframes check_indeterminate {
+ from {
+ -gtk-icon-transform: scale(0, 1); }
+ to {
+ -gtk-icon-transform: unset; } }
+check:not(:indeterminate):checked {
+ animation: check_check 400ms; }
+
+radio:not(:indeterminate):checked {
+ animation: check_radio 400ms; }
+
+check:indeterminate:checked, radio:indeterminate:checked {
+ animation: check_indeterminate 400ms; }
+
+menu menuitem check:not(:indeterminate):checked,
+menu menuitem radio:not(:indeterminate):checked,
+menu menuitem check:indeterminate:checked:active,
+menu menuitem radio:indeterminate:checked {
+ animation: none; }
+
+treeview.view check:selected:focus, treeview.view check:selected:hover, treeview.view check:selected,
+treeview.view radio:selected:focus,
+treeview.view radio:selected:hover,
+treeview.view radio:selected {
+ color: #fff; }
+treeview.view check:selected:backdrop:hover, treeview.view check:selected:backdrop,
+treeview.view radio:selected:backdrop:hover,
+treeview.view radio:selected:backdrop {
+ color: #fff;
+ border-color: #fff; }
+treeview.view check:selected:backdrop:disabled,
+treeview.view radio:selected:backdrop:disabled {
+ color: gray;
+ border-color: gray; }
+treeview.view check:selected:disabled,
+treeview.view radio:selected:disabled {
+ color: gray; }
/************
* GtkScale *