pathbar: Refine style

Get closer to mockups by not showing a separator before the menu button.

Instead, a border is added only upon scroll underflow.

2 files changed, 24 insertions, 30 deletions

diff --git a/src/nautilus-pathbar.c b/src/nautilus-pathbar.c
index c092cabb2..7d08b2bdf 100644
--- a/src/nautilus-pathbar.c
+++ b/src/nautilus-pathbar.c
@@ -260,6 +260,7 @@ nautilus_path_bar_init (NautilusPathBar *self)
     gtk_scrolled_window_set_child (GTK_SCROLLED_WINDOW (self->scrolled), self->buttons_box);
 
     self->current_view_menu_button = gtk_menu_button_new ();
+    gtk_widget_add_css_class (self->current_view_menu_button, "flat");
     gtk_menu_button_set_child (GTK_MENU_BUTTON (self->current_view_menu_button),
                                gtk_image_new_from_icon_name ("view-more-symbolic"));
     gtk_box_append (GTK_BOX (self), self->current_view_menu_button);
@@ -297,12 +298,8 @@ nautilus_path_bar_init (NautilusPathBar *self)
                                  GTK_WIDGET (self->current_view_menu_popover));
     bind_current_view_menu_model_to_popover (self);
 
-    gtk_style_context_add_class (gtk_widget_get_style_context (GTK_WIDGET (self)),
-                                 "linked");
-    gtk_style_context_add_class (gtk_widget_get_style_context (GTK_WIDGET (self)),
-                                 "nautilus-path-bar");
-    gtk_style_context_add_class (gtk_widget_get_style_context (GTK_WIDGET (self->buttons_box)),
-                                 "path-buttons-box");
+    gtk_widget_set_name (GTK_WIDGET (self), "NautilusPathBar");
+    gtk_widget_add_css_class (GTK_WIDGET (self), "linked");
 
     /* Action group */
     self->action_group = G_ACTION_GROUP (g_simple_action_group_new ());
@@ -1027,6 +1024,7 @@ make_button_data (NautilusPathBar *self,
     setup_button_type (button_data, self, path);
     button_data->button = gtk_button_new ();
     gtk_widget_set_focus_on_click (button_data->button, FALSE);
+    gtk_widget_set_name (button_data->button, "NautilusPathButton");
 
     /* TODO update button type when xdg directories change */
 
diff --git a/src/resources/css/Adwaita.css b/src/resources/css/Adwaita.css
index e6006a3c5..97cf3bb7f 100644
--- a/src/resources/css/Adwaita.css
+++ b/src/resources/css/Adwaita.css
@@ -31,50 +31,46 @@
 
 /* Path bar */
 
-.nautilus-path-bar > scrolledwindow {
-  margin: 6px 0px 6px 0px;
+#NautilusPathBar {
   background-color: alpha(currentColor, 0.1);
+  border-radius: 6px;
 }
-
-.nautilus-path-bar scrolledwindow:dir(ltr),
-.nautilus-path-bar scrolledwindow:dir(ltr) undershoot.left {
-  border-radius: 6px 0px 0px 6px;
+#NautilusPathBar > menubutton {
+  margin: 0px;
 }
 
-.nautilus-path-bar scrolledwindow:dir(rtl),
-.nautilus-path-bar scrolledwindow:dir(rtl) undershoot.right {
-  border-radius: 0px 6px 6px 0px;
+#NautilusPathBar > scrolledwindow undershoot.left {
+  background: linear-gradient(to right, @headerbar_shade_color 6px, alpha(@headerbar_shade_color, 0) 24px);
+  border-left: solid 1px @borders;
 }
-
-/* Linked look */
-.nautilus-path-bar scrolledwindow:dir(rtl) {
-  margin-left: -1px;
+#NautilusPathBar > scrolledwindow undershoot.right {
+  background: linear-gradient(to left, @headerbar_shade_color 6px, alpha(@headerbar_shade_color, 0) 24px);
+  border-right: solid 1px @borders;
 }
 
-.nautilus-path-bar scrolledwindow undershoot.left {
-  background: linear-gradient(to right, @headerbar_shade_color 6px, alpha(@headerbar_shade_color, 0) 24px);
+/* Match sidebar's rounded corners on the "start" side. */
+#NautilusPathBar > scrolledwindow:dir(ltr) undershoot.left {
+  border-radius: 6px 0px 0px 6px;
 }
-.nautilus-path-bar > scrolledwindow undershoot.right {
-  background: linear-gradient(to left, @headerbar_shade_color 6px, alpha(@headerbar_shade_color, 0) 24px);
+#NautilusPathBar > scrolledwindow:dir(rtl) undershoot.right {
+  border-radius: 0px 6px 6px 0px;
 }
 
-.path-buttons-box button {
+#NautilusPathButton {
   margin: 3px;
-  box-shadow: none;
   border-radius: 4px;
   padding-top: 0px;
   padding-bottom: 0px;
-  border-width: 0px;
-  -gtk-icon-shadow: none;
 }
 
-.path-buttons-box button:not(:hover),
-.path-buttons-box button.current-dir
+#NautilusPathButton:not(:hover),
+#NautilusPathButton.current-dir
 {
   background: none;
 }
 
-.path-buttons-box button:not(.current-dir):not(:backdrop):hover label {
+#NautilusPathButton:not(.current-dir):not(:backdrop):hover label,
+#NautilusPathButton:not(.current-dir):not(:backdrop):hover image {
   opacity: 1;
 }