[gnome-taquin] Use CSS for radios' background images.

[Arnaud Bonatti <arnaudb src gnome org>]

commit edb8deeca2dd689638150a372e3e2d2e6e167b02
Author: Arnaud Bonatti <arnaud bonatti gmail com>
Date:   Fri Jan 30 11:19:05 2015 +0100

    Use CSS for radios' background images.

 data/taquin.css |   32 +++++++++++++++++++++-----------
 data/taquin.ui  |   54 +++++++++++++-----------------------------------------
 2 files changed, 34 insertions(+), 52 deletions(-)
---
diff --git a/data/taquin.css b/data/taquin.css
index 153be83..4ec562c 100644
--- a/data/taquin.css
+++ b/data/taquin.css
@@ -1,21 +1,31 @@
-GtkApplicationWindow GtkRadioButton {
-    -GtkButton-image-spacing:0;
-    -GtkCheckButton-indicator-size:0;
-    -gtk-icon-source:none;
-    padding:15px 0 0 0;
+GtkRadioButton.radio-like-toggle#radio-fifteen {
+    background-image: url("resource://org/gnome/taquin/images/15-Puzzle.png");
 }
-GtkApplicationWindow GtkMenuButton,
-GtkApplicationWindow GtkRadioButton {
+GtkRadioButton.radio-like-toggle#radio-sixteen {
+    background-image: url("resource://org/gnome/taquin/images/16-Puzzle.png");
+}
+
+GtkRadioButton.radio-like-toggle {
+    background-repeat: no-repeat;
+    /* width is requested by the widget: 200 */
+    padding-top: 15px;
+    padding-bottom: 185px;
+    background-position: center 25px;
+}
+
+GtkRadioButton.radio-like-toggle,
+GtkMenuButton.menubutton-like-combo {
     border-radius:15px;
     outline-radius:13px;
 }
-GtkApplicationWindow GtkMenuButton:checked,
-GtkApplicationWindow GtkMenuButton:prelight {
+
+GtkMenuButton.menubutton-like-combo:checked,
+GtkMenuButton.menubutton-like-combo:prelight {
     color:#2e3436; /* gtk-contained.css’ theme_fg_color */
     background:-gtk-gradient (radial, center center, 0, center center, 0.5, from(rgba (255, 255, 255, 1)), 
to(rgba (255, 255, 255, 0)));
 }
-GtkApplicationWindow GtkMenuButton:checked:backdrop,
-GtkApplicationWindow GtkMenuButton:prelight:backdrop {
+GtkMenuButton.menubutton-like-combo:checked:backdrop,
+GtkMenuButton.menubutton-like-combo:prelight:backdrop {
     color:@theme_unfocused_fg_color;
     background:-gtk-gradient (radial, center center, 0, center center, 0.5, from(rgba (255, 255, 255, 0.3)), 
to(rgba (255, 255, 255, 0)));
 }
diff --git a/data/taquin.ui b/data/taquin.ui
index d9343fe..77dcff7 100644
--- a/data/taquin.ui
+++ b/data/taquin.ui
@@ -104,60 +104,30 @@
                 <child>
                   <object class="GtkRadioButton" id="radio-fifteen">
                     <property name="visible">True</property>
+                    <property name="name">radio-fifteen</property>
+                    <style><class name="radio-like-toggle"/></style>
                     <property name="focus-on-click">False</property>
-                    <property name="relief">none</property>
+                    <property name="relief">none</property> <!-- could probably be replaced by a use of the 
"flat" style-class -->
                     <property name="action-name">win.change-type</property>
                     <property name="action-target">'fifteen'</property>
                     <property name="draw-indicator">False</property>
-                    <child>
-                      <object class="GtkBox">
-                        <property name="visible">True</property>
-                        <property name="orientation">vertical</property>
-                        <child>
-                          <object class="GtkLabel">
-                            <property name="visible">True</property>
-                            <property name="label" translatable="yes">15-Puzzle</property>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkImage">
-                            <property name="resource">/org/gnome/taquin/images/15-Puzzle.png</property>
-                            <property name="visible">True</property>
-                            <property name="pixel-size">150</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
+                    <property name="label" translatable="yes">15-Puzzle</property>
+                    <property name="width-request">200</property>
                   </object>
                 </child>
                 <child>
                   <object class="GtkRadioButton" id="radio-sixteen">
                     <property name="visible">True</property>
+                    <property name="name">radio-sixteen</property>
+                    <style><class name="radio-like-toggle"/></style>
                     <property name="focus-on-click">False</property>
                     <property name="relief">none</property>
                     <property name="action-name">win.change-type</property>
                     <property name="action-target">'sixteen'</property>
                     <property name="group">radio-fifteen</property>
                     <property name="draw-indicator">False</property>
-                    <child>
-                      <object class="GtkBox">
-                        <property name="visible">True</property>
-                        <property name="orientation">vertical</property>
-                        <child>
-                          <object class="GtkLabel">
-                            <property name="visible">True</property>
-                            <property name="label" translatable="yes">16-Puzzle</property>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkImage">
-                            <property name="resource">/org/gnome/taquin/images/16-Puzzle.png</property>
-                            <property name="visible">True</property>
-                            <property name="pixel-size">150</property>
-                          </object>
-                        </child>
-                      </object>
-                    </child>
+                    <property name="label" translatable="yes">16-Puzzle</property>
+                    <property name="width-request">200</property>
                   </object>
                 </child>
               </object>
@@ -178,7 +148,8 @@
                     <property name="use-underline">True</property>
                     <property name="menu-model">size-menu</property>
                     <property name="height-request">60</property>
-                    <style><class name="flat"/></style>
+                    <style><class name="menubutton-like-combo"/></style>
+                    <property name="relief">none</property> <!-- could probably be replaced by a use of the 
"flat" style-class -->
                   </object>
                   <packing>
                     <property name="expand">True</property>
@@ -191,7 +162,8 @@
                     <property name="use-underline">True</property>
                     <property name="menu-model">theme-menu</property>
                     <property name="height-request">60</property>
-                    <style><class name="flat"/></style>
+                    <style><class name="menubutton-like-combo"/></style>
+                    <property name="relief">none</property>
                   </object>
                   <packing>
                     <property name="expand">True</property>