[gnome-text-editor] css: tweak spacing and styling

[Christian Hergert <chergert src gnome org>]

commit 6ea60ace0a4d7eefa214ddcb48230b78bbd865d0
Author: Christian Hergert <chergert redhat com>
Date:   Fri Nov 19 16:32:28 2021 -0800

    css: tweak spacing and styling
    
    Related #225

 src/TextEditor.css           | 25 ++++++++++++++-----------
 src/editor-theme-selector.c  |  1 +
 src/editor-theme-selector.ui |  9 ++++++++-
 3 files changed, 23 insertions(+), 12 deletions(-)
---
diff --git a/src/TextEditor.css b/src/TextEditor.css
index fbed012..3632e76 100644
--- a/src/TextEditor.css
+++ b/src/TextEditor.css
@@ -29,8 +29,11 @@
 
 
 /* EditorThemeSelector */
-.org-gnome-TextEditor checkbutton.theme-selector {
-  margin: 10px 1px 10px 1px;
+.org-gnome-TextEditor themeselector {
+  margin: 9px;
+}
+.org-gnome-TextEditor themeselector checkbutton {
+  margin: 1px;
   min-height: 42px;
   min-width: 42px;
   border-width: 1px;
@@ -38,29 +41,29 @@
   border-color: transparent;
   border-radius: 9999px;
 }
-.org-gnome-TextEditor checkbutton.theme-selector.follow:checked,
-.org-gnome-TextEditor checkbutton.theme-selector.light:checked,
-.org-gnome-TextEditor checkbutton.theme-selector.dark:checked {
+.org-gnome-TextEditor themeselector checkbutton.follow:checked,
+.org-gnome-TextEditor themeselector checkbutton.light:checked,
+.org-gnome-TextEditor themeselector checkbutton.dark:checked {
   border-color: @theme_selected_bg_color;
   border-width: 2px;
-  margin: 9px 0 9px 0;
+  margin: 0;
 }
-.org-gnome-TextEditor checkbutton.theme-selector.follow {
+.org-gnome-TextEditor themeselector checkbutton.follow {
   background: linear-gradient(to bottom right, #fff 50%, #2e3436 50%);
   border-color: #2e3436;
 }
-.org-gnome-TextEditor.dark checkbutton.theme-selector.follow {
+.org-gnome-TextEditor.dark themeselector checkbutton.follow {
   border-color: #dcdddd;
 }
-.org-gnome-TextEditor checkbutton.theme-selector.light {
+.org-gnome-TextEditor themeselector checkbutton.light {
   background-color: #fff;
   border-color: #dcdddd;
 }
-.org-gnome-TextEditor checkbutton.theme-selector.dark {
+.org-gnome-TextEditor themeselector checkbutton.dark {
   background-color: #2e3436;
   border-color: #000;
 }
-.org-gnome-TextEditor checkbutton.theme-selector radio {
+.org-gnome-TextEditor themeselector checkbutton radio {
   -gtk-icon-source: none;
   border: none;
   background: none;
diff --git a/src/editor-theme-selector.c b/src/editor-theme-selector.c
index 65a18c7..966ed7e 100644
--- a/src/editor-theme-selector.c
+++ b/src/editor-theme-selector.c
@@ -134,6 +134,7 @@ editor_theme_selector_class_init (EditorThemeSelectorClass *klass)
 
   g_object_class_install_properties (object_class, N_PROPS, properties);
 
+  gtk_widget_class_set_css_name (widget_class, "themeselector");
   gtk_widget_class_install_property_action (widget_class, "theme.mode", "theme");
   gtk_widget_class_set_template_from_resource (widget_class, 
"/org/gnome/TextEditor/ui/editor-theme-selector.ui");
   gtk_widget_class_set_layout_manager_type (widget_class, GTK_TYPE_BIN_LAYOUT);
diff --git a/src/editor-theme-selector.ui b/src/editor-theme-selector.ui
index b7d7481..0470806 100644
--- a/src/editor-theme-selector.ui
+++ b/src/editor-theme-selector.ui
@@ -1,9 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <template class="EditorThemeSelector" parent="GtkWidget">
+    <property name="hexpand">true</property>
     <child>
       <object class="GtkBox" id="box">
-        <property name="halign">center</property>
+        <property name="hexpand">true</property>
         <property name="orientation">horizontal</property>
         <property name="spacing">12</property>
         <child>
@@ -12,6 +13,8 @@
               <class name="theme-selector"/>
               <class name="follow"/>
             </style>
+            <property name="hexpand">true</property>
+            <property name="halign">center</property>
             <property name="focus-on-click">false</property>
             <property name="action-name">settings.style-variant</property>
             <property name="action-target">'follow'</property>
@@ -27,6 +30,8 @@
               <class name="theme-selector"/>
               <class name="light"/>
             </style>
+            <property name="hexpand">true</property>
+            <property name="halign">center</property>
             <property name="focus-on-click">false</property>
             <property name="action-name">settings.style-variant</property>
             <property name="action-target">'light'</property>
@@ -42,6 +47,8 @@
               <class name="theme-selector"/>
               <class name="dark"/>
             </style>
+            <property name="hexpand">true</property>
+            <property name="halign">center</property>
             <property name="group">light</property>
             <property name="focus-on-click">false</property>
             <property name="action-name">settings.style-variant</property>