[gnome-text-editor] css: fix theme selector styling to match designs



commit a5418c90b38d1f0521bb6e4dc2a907cbe3f7f435
Author: Christian Hergert <chergert redhat com>
Date:   Fri Nov 19 12:36:37 2021 -0800

    css: fix theme selector styling to match designs
    
    We are still missing a "follow system" button, but this improves the
    styling for light and dark to match the designs.
    
    
https://gitlab.gnome.org/Teams/Design/os-mockups/-/blob/f07e260f25afb96dcfa7fcf4401a47c73bdc8f72/prefer-dark/prefer-dark.png
    
    Fixes #225

 src/TextEditor.css | 41 ++++++++++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 13 deletions(-)
---
diff --git a/src/TextEditor.css b/src/TextEditor.css
index b3fb61c..afb68a4 100644
--- a/src/TextEditor.css
+++ b/src/TextEditor.css
@@ -30,29 +30,44 @@
 
 
 /* EditorThemeSelector */
-
+.org-gnome-TextEditor checkbutton.theme-selector {
+  margin-top: 9px;
+  margin-bottom: 9px;
+  min-height: 42px;
+  min-width: 42px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: 9999px;
+  padding: 1px;
+}
+.org-gnome-TextEditor checkbutton.theme-selector:checked {
+  border-color: @theme_selected_bg_color;
+  border-width: 2px;
+  padding: 0;
+}
 .org-gnome-TextEditor checkbutton.theme-selector radio {
   -gtk-icon-source: none;
+  border: none;
   background: none;
   box-shadow: none;
-  padding: 10px;
-  min-height: 24px;
-  min-width: 24px;
-  border-width: 3px;
-  border-style: solid;
-  border-color: transparent;
+  min-width: 12px;
+  min-height: 12px;
+  margin: 24px 0 0 24px;
+  padding: 2px;
 }
 .org-gnome-TextEditor checkbutton.theme-selector radio:checked {
-  border-color: @theme_selected_bg_color;
-  -gtk-icon-source: -gtk-scaled(-gtk-icontheme("object-select-symbolic"));
+  -gtk-icon-source: -gtk-icontheme("object-select-symbolic");
+  background-color: @theme_selected_bg_color;
+  color: @theme_selected_fg_color;
 }
-.org-gnome-TextEditor checkbutton.theme-selector.light radio {
-  color: #2e3436;
+.org-gnome-TextEditor checkbutton.theme-selector.light:not(:checked) {
   background-color: #fff;
+  border-color: #e2e1de;
 }
-.org-gnome-TextEditor checkbutton.theme-selector.dark radio {
-  color: #fff;
+.org-gnome-TextEditor checkbutton.theme-selector.dark:not(:checked) {
   background-color: #2e3436;
+  border-color: #000;
 }
 
 


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]