[gnome-nibbles] Fix CSS broken by the GTK+ version bump

[Iulian Radu <iulianradu src gnome org>]

commit 86d61dfcdb4393681077aed5e7eb47629aefe052
Author: Iulian Radu <iulian radu67 gmail com>
Date:   Sat Feb 13 01:44:04 2016 +0200

    Fix CSS broken by the GTK+ version bump

 data/controls-grid.ui  |    8 ++++----
 data/nibbles.css       |   39 ++++++++++++++++++++++++++++++---------
 data/nibbles.ui        |    6 +-----
 src/gnome-nibbles.vala |    8 ++++----
 4 files changed, 39 insertions(+), 22 deletions(-)
---
diff --git a/data/controls-grid.ui b/data/controls-grid.ui
index a859269..313dc4a 100644
--- a/data/controls-grid.ui
+++ b/data/controls-grid.ui
@@ -34,7 +34,7 @@
                         <property name="visible">True</property>
                         <property name="height-request">45</property>
                         <property name="width-request">45</property>
-                        <style><class name="button"/></style>
+                        <style><class name="controls-button"/></style>
                     </object>
                 </child>
             </object>
@@ -60,7 +60,7 @@
                         <property name="visible">True</property>
                         <property name="height-request">45</property>
                         <property name="width-request">45</property>
-                        <style><class name="button"/></style>
+                        <style><class name="controls-button"/></style>
                     </object>
                 </child>
             </object>
@@ -77,7 +77,7 @@
                         <property name="visible">True</property>
                         <property name="height-request">45</property>
                         <property name="width-request">45</property>
-                        <style><class name="button"/></style>
+                        <style><class name="controls-button"/></style>
                     </object>
                 </child>
             </object>
@@ -103,7 +103,7 @@
                         <property name="visible">True</property>
                         <property name="height-request">45</property>
                         <property name="width-request">45</property>
-                        <style><class name="button"/></style>
+                        <style><class name="controls-button"/></style>
                     </object>
                 </child>
             </object>
diff --git a/data/nibbles.css b/data/nibbles.css
index af9cc0c..7b33f03 100644
--- a/data/nibbles.css
+++ b/data/nibbles.css
@@ -1,5 +1,5 @@
-GtkApplicationWindow.main-window {
-    background: rgba (0, 0, 0, 1);
+.window-background {
+  background-color: rgba(0, 0, 0, 1);
 }
 .menu-title {
   font-size: 2.5em;
@@ -11,12 +11,33 @@ GtkApplicationWindow.main-window {
 .play {
   font-size: 1em;
 }
-GtkToggleButton.number-box {
-    font-size: 3em;
-    font-family: Sans;
-    font-weight: bold;
+.number-box {
+  font-size: 3em;
+  font-weight: bold;
+  font-family: Sans;
+  background-image: linear-gradient(to bottom, #3e4444);
 }
-GtkLabel.countdown {
-    font-size: 2em;
-    color: rgba(229, 229, 229, 1);
+.number-box:hover {
+  background-image: linear-gradient(to bottom, rgba(60, 69, 71, 0.8));
+}
+.number-box:focus {
+  background-image: linear-gradient(to bottom, #215d9c);
+}
+.number-box-focus:hover {
+  background-image: linear-gradient(to bottom, #2260a0, #1f5894 60%, #1d538b);
+}
+.controls-button {
+  padding: 4px 8px;
+  border: 1px solid;
+  border-radius: 3px;
+  color: #eeeeec;
+  outline-color: rgba(238, 238, 236, 0.3);
+  border-color: #1c1f1f;
+  background-image: linear-gradient(to bottom, #343a3a, #2f3434 60%, #2a2f2f);
+  text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(238, 238, 236, 0);
+}
+.countdown {
+  font-size: 2em;
+  color: rgba(229, 229, 229, 1);
 }
diff --git a/data/nibbles.ui b/data/nibbles.ui
index 326b81b..9387ff3 100644
--- a/data/nibbles.ui
+++ b/data/nibbles.ui
@@ -29,7 +29,6 @@
     </object>
     <object class="GtkApplicationWindow" id="nibbles-window">
         <property name="title" translatable="yes">Nibbles</property>
-        <style><class name="main-window"/></style>
         <child>
             <object class="GtkOverlay" id="main_overlay">
                 <property name="visible">True</property>
@@ -37,6 +36,7 @@
                     <object class="GtkBox" id="vbox">
                         <property name="visible">True</property>
                         <property name="orientation">vertical</property>
+                        <style><class name="window-background"/></style>
                         <child>
                             <object class="GtkStack" id="main_stack">
                                 <property name="visible">True</property>
@@ -167,7 +167,6 @@
                                                                 <property name="width-request">150</property>
                                                                 <style>
                                                                     <class name="number-box"/>
-                                                                    <class name="osd"/>
                                                                 </style>
                                                             </object>
                                                             <packing>
@@ -182,7 +181,6 @@
                                                                 <property name="width-request">150</property>
                                                                 <style>
                                                                     <class name="number-box"/>
-                                                                    <class name="osd"/>
                                                                 </style>
                                                             </object>
                                                             <packing>
@@ -197,7 +195,6 @@
                                                                 <property name="width-request">150</property>
                                                                 <style>
                                                                     <class name="number-box"/>
-                                                                    <class name="osd"/>
                                                                 </style>
                                                             </object>
                                                             <packing>
@@ -212,7 +209,6 @@
                                                                 <property name="width-request">150</property>
                                                                 <style>
                                                                     <class name="number-box"/>
-                                                                    <class name="osd"/>
                                                                 </style>
                                                             </object>
                                                             <packing>
diff --git a/src/gnome-nibbles.vala b/src/gnome-nibbles.vala
index 2bf1cf4..9684c76 100644
--- a/src/gnome-nibbles.vala
+++ b/src/gnome-nibbles.vala
@@ -568,21 +568,21 @@ public class Nibbles : Gtk.Application
 
     private void change_number_of_players_cb (Gtk.ToggleButton button)
     {
-        if (!button.get_active () && button.get_style_context ().has_class ("suggested-action"))
+        if (!button.get_active () && button.get_style_context ().has_class ("number-box-focus"))
         {
             button.set_active (true);
         }
-        else if (button.get_active () && !button.get_style_context ().has_class ("suggested-action"))
+        else if (button.get_active () && !button.get_style_context ().has_class ("number-box-focus"))
         {
             next_button_revealer.set_reveal_child (true);
-            button.get_style_context ().add_class ("suggested-action");
+            button.get_style_context ().add_class ("number-box-focus");
             foreach (var other_button in number_of_players_buttons)
             {
                 if (button != other_button)
                 {
                     if (other_button.get_active ())
                     {
-                        other_button.get_style_context ().remove_class ("suggested-action");
+                        other_button.get_style_context ().remove_class ("number-box-focus");
                         other_button.set_active (false);
                         break;
                     }