Merge pull request #61 from cassidyjames/odin-styling

First pass at styles for Odin

src/Constants/Stylesheet.vala

@@ -1,106 +1,99 @@
 class Stylesheet {
-    public const string STYLES = """
-        @define-color primary_color #687ddb;
-
-        window {
-          border-bottom-left-radius: 3px;
-          border-bottom-right-radius: 3px;
-          transition: background-color .1s ease-in-out;
-        }
-
-        window.on_drag_motion, window.on_drag_motion .tree_view {
-          background-color: #E8E8E8;
-        }
-
-        window.on_drag_motion .toolbar {
-          background-color: #E8E8E8;
-        }
-
-        .main {
-          border: 3px dashed #c2cdda;
-          border-radius: 3px;
-        }
-
-        .upload_button.add {
-          border-radius: 100%;
-          padding: 10px 17px;
-        }
-
-        .upload_button {
-          padding: 6px 10px 8px;
-          font-size:11px;
-          color: #fff;
-          background: @primary_color;
-          border: 1px solid darker(@primary_color);
-          transition: all 200ms ease-in-out;
-        }
-
-        .h1 {
-          color: #555a6b;
-          font-size: 18px;
-          font-weight: 700;
-        }
-
-        .h4 {
-          font-size: 11px;
-          font-weight: 400;
-        }
-
-        .toolbar {
-          background: #F5F5F5;
-          border-bottom-color: #F5F5F5;
-          box-shadow: inset 0px 1px 1px -2px white;
-          transition: background-color .1s ease-in-out;
-          border: none;
-          outline: none;
-        }
-
-        .toolbar .titlebutton {
-          font-size: 16px;
-          color: #fff;
-          font-weight: 700;
-        }
-
-        .toolbar .titlebutton.add {
-          padding: 0;
-        }
-
-        .list .toolbar {
-          background: @primary_color;
-          color: #fff;
-        }
-
-        .list .toolbar image, .list .toolbar label, .list .toolbar button {
-          color: #fff;
-        }
-
-        .tree_view {
-          background-color: #fff;
-          color: #000;
-          border-bottom-left-radius: 3px;
-          border-bottom-right-radius: 3px;
-        }
-
-        .tree_view row {
-          border-bottom: 1px solid #ddd;
-        }
-
-        .tree_view button {
-          background-color: @primary_color;
-          color: #fff;
-          border: none;
-          border-bottom: 2px solid #E0E0E0;
-          padding: 10px;
-          outline: none;
-          background-image: none;
-
-          border: 1px solid transparent;
-          border-color: @primary_color;
-          box-shadow: inset 0 0, inset 0 0;
-        }
-
-        .tree_view button label {
-          color: #fff;
-        }
-    """;
+  public const string STYLES = """
+    @define-color primary_color #687ddb;
+
+    window {
+      border-bottom-left-radius: 3px;
+      border-bottom-right-radius: 3px;
+      transition: background-color .1s ease-in-out;
+    }
+
+    window.on_drag_motion, window.on_drag_motion .tree_view {
+      background-color: #E8E8E8;
+    }
+
+    window.on_drag_motion .default-decoration {
+      background-color: #E8E8E8;
+    }
+
+    .main {
+      border: 3px dashed #c2cdda;
+      border-radius: 3px;
+    }
+
+    .upload_button.add {
+      border-radius: 100%;
+      padding: 10px 17px;
+    }
+
+    .upload_button {
+      padding: 6px 10px 8px;
+      font-size:11px;
+      color: #fff;
+      background: @primary_color;
+      border: 1px solid darker(@primary_color);
+      transition: all 200ms ease-in-out;
+    }
+
+    .h1 {
+      color: #555a6b;
+      font-size: 18px;
+      font-weight: 700;
+    }
+
+    .h4 {
+      font-size: 11px;
+      font-weight: 400;
+    }
+
+    .default-decoration {
+      transition: background-color .1s ease-in-out;
+    }
+
+    .default-decoration .titlebutton.add {
+      font-size: 16px;
+      font-weight: 700;
+      padding: 0;
+    }
+
+    .list .default-decoration {
+      background: @primary_color;
+      color: #fff;
+    }
+
+    .list .default-decoration image, .list .default-decoration label, .list .default-decoration button {
+      color: #fff;
+      text-shadow: none;
+      -gtk-icon-shadow: none;
+    }
+
+    .tree_view {
+      background-color: #fff;
+      color: #000;
+      border-bottom-left-radius: 3px;
+      border-bottom-right-radius: 3px;
+    }
+
+    .tree_view row {
+      border-bottom: 1px solid #ddd;
+    }
+
+    .tree_view button {
+      background-color: @primary_color;
+      color: #fff;
+      border: none;
+      border-bottom: 2px solid #E0E0E0;
+      padding: 10px;
+      outline: none;
+      background-image: none;
+
+      border: 1px solid transparent;
+      border-color: @primary_color;
+      box-shadow: inset 0 0, inset 0 0;
+    }
+
+    .tree_view button label {
+      color: #fff;
+    }
+  """;
 }

src/MainWindow.vala

@@ -125,11 +125,10 @@ public class MainWindow : Gtk.Window {
     images_list = new List (this.images);
     add (images_list.window ());
 
-    var add_image = new Gtk.Button.with_label ("+");
+    var add_image = new Gtk.Button.from_icon_name ("list-add-symbolic", Gtk.IconSize.SMALL_TOOLBAR);
     add_image.set_tooltip_markup(_("Add Image"));
     this.toolbar.remove (add_image);
 
-    add_image.get_style_context ().add_class ("button");
     add_image.get_style_context ().add_class ("titlebutton");
     add_image.get_style_context ().add_class ("add");
     add_image.clicked.connect (on_open_clicked);

src/Widgets/Toolbar.vala

@@ -4,7 +4,8 @@ public class Toolbar : Gtk.HeaderBar {
 
   public Toolbar () {
     var header_context = this.get_style_context ();
-    header_context.add_class ("toolbar");
+    header_context.add_class ("default-decoration");
+    header_context.add_class ("flat");
 
     this.show_close_button = true;
     this.show_all ();