diff --git a/data/screenshots/treeview.png b/data/screenshots/treeview.png index e083ace..154cdb6 100644 Binary files a/data/screenshots/treeview.png and b/data/screenshots/treeview.png differ diff --git a/data/screenshots/welcome-screen.png b/data/screenshots/welcome-screen.png index 0ead28d..8987bce 100644 Binary files a/data/screenshots/welcome-screen.png and b/data/screenshots/welcome-screen.png differ diff --git a/src/Constants/Stylesheet.vala b/src/Constants/Stylesheet.vala index c598466..c143dc9 100644 --- a/src/Constants/Stylesheet.vala +++ b/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; + } + """; } diff --git a/src/MainWindow.vala b/src/MainWindow.vala index bf9b197..0d22667 100644 --- a/src/MainWindow.vala +++ b/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); diff --git a/src/Widgets/Toolbar.vala b/src/Widgets/Toolbar.vala index 9e76179..ba765f0 100644 --- a/src/Widgets/Toolbar.vala +++ b/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 ();