diff options
| author | Georges Basile Stavracas Neto <georges.stavracas@gmail.com> | 2021-10-08 12:54:57 -0300 |
|---|---|---|
| committer | Georges Basile Stavracas Neto <georges.stavracas@gmail.com> | 2021-10-08 12:58:38 -0300 |
| commit | fb0553109f20555bebab39cb7b7eb913b050cc41 (patch) | |
| tree | 4995c49fc11e44866c205dd2c0192e903df9a868 | |
| parent | bd4cc79e057fdf72aa8f67fc10c84f086feb8bd4 (diff) | |
| download | gnome-todo-fb0553109f20555bebab39cb7b7eb913b050cc41.tar.gz | |
theme-selector: Improve selector style
| -rw-r--r-- | src/gui/gtd-theme-selector.ui | 21 | ||||
| -rw-r--r-- | src/themes/Adwaita-themeselector.css | 44 |
2 files changed, 56 insertions, 9 deletions
diff --git a/src/gui/gtd-theme-selector.ui b/src/gui/gtd-theme-selector.ui index 5d329bf5..ef10457c 100644 --- a/src/gui/gtd-theme-selector.ui +++ b/src/gui/gtd-theme-selector.ui @@ -20,6 +20,13 @@ <property name="action-name">settings.style-variant</property> <property name="action-target">'system'</property> <property name="tooltip-text" translatable="yes">System</property> + <child> + <object class="GtkImage"> + <property name="halign">center</property> + <property name="valign">center</property> + <property name="icon-name">object-select-symbolic</property> + </object> + </child> </object> </child> @@ -32,6 +39,13 @@ <property name="action-name">settings.style-variant</property> <property name="action-target">'light'</property> <property name="tooltip-text" translatable="yes">Light style</property> + <child> + <object class="GtkImage"> + <property name="halign">center</property> + <property name="valign">center</property> + <property name="icon-name">object-select-symbolic</property> + </object> + </child> </object> </child> @@ -45,6 +59,13 @@ <property name="action-name">settings.style-variant</property> <property name="action-target">'dark'</property> <property name="tooltip-text" translatable="yes">Dark style</property> + <child> + <object class="GtkImage"> + <property name="halign">center</property> + <property name="valign">center</property> + <property name="icon-name">object-select-symbolic</property> + </object> + </child> </object> </child> diff --git a/src/themes/Adwaita-themeselector.css b/src/themes/Adwaita-themeselector.css index a7676b6e..01086f16 100644 --- a/src/themes/Adwaita-themeselector.css +++ b/src/themes/Adwaita-themeselector.css @@ -5,21 +5,47 @@ themeselector checkbutton radio { padding: 12px; min-height: 24px; min-width: 24px; - border-width: 3px; - border-style: solid; - border-color: transparent; + margin: 2px; + border: solid 1px @light_4; +} + +themeselector checkbutton image { + margin: 0; + padding: 2px; + margin-top: 24px; + margin-left: -24px; + min-width: 24px; + min-height: 24px; + background-color: @accent_bg_color; + color: @accent_fg_color; + border-radius: 100%; + opacity: 0; + transform: scale(0.75) translate(-1px, -1px); } +/* Checked */ themeselector checkbutton radio:checked { - border-color: @theme_selected_bg_color; - -gtk-icon-source: -gtk-scaled(-gtk-icontheme("object-select-symbolic")); + margin: 0; + border-width: 3px; + border-color: @accent_bg_color; +} + +themeselector checkbutton:checked image { + opacity: 1; +} + +/* Individual styles */ +themeselector checkbutton.system radio { + color: #1e1e1e; + background: linear-gradient(135deg, @light_1 0%, @light_1 49%, @dark_3 51%, @dark_3 100%); } themeselector checkbutton.light radio { - color: #2e3436; - background-color: #fff; + color: @dark_3; + background-color: @light_1; } + themeselector checkbutton.dark radio { - color: #fff; - background-color: #2e3436; + color: @light_1; + background-color: @dark_3; } |