Tweak page row appearance

Reduce spacing for desktop variant, style close button same as on bookmark
tags.

4 files changed, 80 insertions, 49 deletions

diff --git a/src/ephy-page-row.c b/src/ephy-page-row.c
index 43cb6f05a..7914f6775 100644
--- a/src/ephy-page-row.c
+++ b/src/ephy-page-row.c
@@ -144,15 +144,29 @@ void
 ephy_page_row_set_adaptive_mode (EphyPageRow      *self,
                                  EphyAdaptiveMode  adaptive_mode)
 {
+  GtkStyleContext *context;
+
   g_assert (EPHY_IS_PAGE_ROW (self));
 
+  context = gtk_widget_get_style_context (GTK_WIDGET (self));
+
   switch (adaptive_mode) {
   case EPHY_ADAPTIVE_MODE_NORMAL:
     gtk_widget_set_size_request (GTK_WIDGET (self->box), -1, -1);
+    gtk_widget_set_margin_end (GTK_WIDGET (self->box), 0);
+    gtk_widget_set_margin_start (GTK_WIDGET (self->box), 4);
+    gtk_box_set_spacing (self->box, 0);
+
+    gtk_style_context_remove_class (context, "narrow");
 
     break;
   case EPHY_ADAPTIVE_MODE_NARROW:
     gtk_widget_set_size_request (GTK_WIDGET (self->box), -1, 50);
+    gtk_widget_set_margin_end (GTK_WIDGET (self->box), 4);
+    gtk_widget_set_margin_start (GTK_WIDGET (self->box), 8);
+    gtk_box_set_spacing (self->box, 4);
+
+    gtk_style_context_add_class (context, "narrow");
 
     break;
   }
diff --git a/src/resources/gtk/page-row.ui b/src/resources/gtk/page-row.ui
index 3273b9e37..6bc64369a 100644
--- a/src/resources/gtk/page-row.ui
+++ b/src/resources/gtk/page-row.ui
@@ -4,13 +4,12 @@
   <template class="EphyPageRow" parent="GtkListBoxRow">
     <child>
       <object class="GtkBox" id="box">
-        <property name="margin_end">12</property>
-        <property name="margin_start">12</property>
-        <property name="spacing">12</property>
         <property name="visible">True</property>
         <child>
           <object class="GtkStack" id="icon_stack">
             <property name="visible">True</property>
+            <property name="margin_start">4</property>
+            <property name="margin_end">4</property>
             <child>
               <object class="GtkImage" id="icon">
                 <property name="icon_size">1</property>
@@ -33,6 +32,7 @@
             <property name="valign">center</property>
             <property name="visible">True</property>
             <property name="xalign">0</property>
+            <property name="margin_start">4</property>
           </object>
         </child>
         <child>
@@ -40,6 +40,7 @@
             <property name="icon_name">audio-volume-high-symbolic</property>
             <property name="icon_size">1</property>
             <property name="visible">True</property>
+            <property name="margin_start">8</property>
           </object>
         </child>
         <child>
@@ -53,7 +54,9 @@
             <property name="visible">True</property>
             <signal name="clicked" handler="close_clicked_cb" swapped="yes"/>
             <style>
+              <class name="flat"/>
               <class name="image-button"/>
+              <class name="page-row-close-button"/>
             </style>
             <child>
               <object class="GtkImage">
diff --git a/src/resources/themes/Adwaita.css b/src/resources/themes/Adwaita.css
index 0e8eaccf8..501850ece 100644
--- a/src/resources/themes/Adwaita.css
+++ b/src/resources/themes/Adwaita.css
@@ -101,9 +101,9 @@
 
 .bookmark-tag-widget button { background: none; border: none; box-shadow: none; }
 
-.bookmark-tag-widget button:last-child image { color: #454f52; }
+.bookmark-tag-widget button:last-child image { color: #454f52; border: 1px solid transparent; border-radius: 5px; }
 
-.bookmark-tag-widget button:last-child:hover image { border: 1px solid; border-radius: 5px; color: #454f52; outline-color: rgba(69, 79, 82, 0.3); border-color: #cdc7c2; border-bottom-color: #bfb8b1; background-image: linear-gradient(to top, #edebe9 2px, #f6f5f4); text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.07); color: #454f52; outline-color: rgba(69, 79, 82, 0.3); border-color: #cdc7c2; border-bottom-color: #bfb8b1; text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to top, #f6f5f4, #f8f8f7 1px); }
+.bookmark-tag-widget button:last-child:hover image { color: #454f52; outline-color: rgba(69, 79, 82, 0.3); border-color: #cdc7c2; border-bottom-color: #bfb8b1; background-image: linear-gradient(to top, #edebe9 2px, #f6f5f4); text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.07); color: #454f52; outline-color: rgba(69, 79, 82, 0.3); border-color: #cdc7c2; border-bottom-color: #bfb8b1; text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to top, #f6f5f4, #f8f8f7 1px); }
 
 .bookmark-tag-widget button:last-child:active image { color: #454f52; outline-color: rgba(69, 79, 82, 0.3); border-color: #cdc7c2; border-bottom-color: #bfb8b1; background-image: linear-gradient(to top, #edebe9 2px, #f6f5f4); text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.07); color: #454f52; outline-color: rgba(69, 79, 82, 0.3); border-color: #cdc7c2; background-image: image(#d6d1cd); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
 
@@ -111,12 +111,32 @@
 
 .bookmark-tag-widget-selected image, .bookmark-tag-widget-selected label { color: @theme_selected_fg_color; }
 
-.bookmark-tag-widget-selected button:last-child image { color: @theme_selected_fg_color; }
+.bookmark-tag-widget-selected button { background: none; border: none; box-shadow: none; }
+
+.bookmark-tag-widget-selected button:last-child image { color: #ffffff; border: 1px solid transparent; border-radius: 5px; }
 
 .bookmark-tag-widget-selected button:last-child:hover image { color: #ffffff; outline-color: rgba(255, 255, 255, 0.3); border-color: #1b6acb; border-bottom-color: #15539e; background-image: linear-gradient(to top, #2379e2 2px, #3584e4); text-shadow: 0 -1px rgba(0, 0, 0, 0.559216); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.559216); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); color: #ffffff; outline-color: rgba(255, 255, 255, 0.3); border-color: #1b6acb; border-bottom-color: #15539e; text-shadow: 0 -1px rgba(0, 0, 0, 0.511216); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.511216); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to top, #3584e4, #3987e5 1px); }
 
 .bookmark-tag-widget-selected button:last-child:active image { color: #ffffff; outline-color: rgba(255, 255, 255, 0.3); border-color: #1b6acb; border-bottom-color: #15539e; background-image: linear-gradient(to top, #2379e2 2px, #3584e4); text-shadow: 0 -1px rgba(0, 0, 0, 0.559216); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.559216); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); color: #ffffff; outline-color: rgba(255, 255, 255, 0.3); border-color: #1b6acb; background-image: image(#1961b9); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
 
+.page-row-close-button { background: none; border: none; box-shadow: none; }
+
+.page-row-close-button:last-child image { color: #454f52; border: 1px solid transparent; border-radius: 5px; }
+
+.page-row-close-button:last-child:hover image { color: #454f52; outline-color: rgba(69, 79, 82, 0.3); border-color: #cdc7c2; border-bottom-color: #bfb8b1; background-image: linear-gradient(to top, #edebe9 2px, #f6f5f4); text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.07); color: #454f52; outline-color: rgba(69, 79, 82, 0.3); border-color: #cdc7c2; border-bottom-color: #bfb8b1; text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to top, #f6f5f4, #f8f8f7 1px); }
+
+.page-row-close-button:last-child:active image { color: #454f52; outline-color: rgba(69, 79, 82, 0.3); border-color: #cdc7c2; border-bottom-color: #bfb8b1; background-image: linear-gradient(to top, #edebe9 2px, #f6f5f4); text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.07); color: #454f52; outline-color: rgba(69, 79, 82, 0.3); border-color: #cdc7c2; background-image: image(#d6d1cd); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
+
+row:selected .page-row-close-button { background: none; border: none; box-shadow: none; }
+
+row:selected .page-row-close-button:last-child image { color: #ffffff; border: 1px solid transparent; border-radius: 5px; }
+
+row:selected .page-row-close-button:last-child:hover image { color: #ffffff; outline-color: rgba(255, 255, 255, 0.3); border-color: #1b6acb; border-bottom-color: #15539e; background-image: linear-gradient(to top, #2379e2 2px, #3584e4); text-shadow: 0 -1px rgba(0, 0, 0, 0.559216); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.559216); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); color: #ffffff; outline-color: rgba(255, 255, 255, 0.3); border-color: #1b6acb; border-bottom-color: #15539e; text-shadow: 0 -1px rgba(0, 0, 0, 0.511216); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.511216); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to top, #3584e4, #3987e5 1px); }
+
+row:selected .page-row-close-button:last-child:active image { color: #ffffff; outline-color: rgba(255, 255, 255, 0.3); border-color: #1b6acb; border-bottom-color: #15539e; background-image: linear-gradient(to top, #2379e2 2px, #3584e4); text-shadow: 0 -1px rgba(0, 0, 0, 0.559216); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.559216); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); color: #ffffff; outline-color: rgba(255, 255, 255, 0.3); border-color: #1b6acb; background-image: image(#1961b9); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
+
+row.narrow .page-row-close-button image { padding: 6px; }
+
 @keyframes needs_attention_keyframes { 0% { background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0);
     border-color: @borders; }
   /* can't do animation-direction, so holding the color on two keyframes */
diff --git a/src/resources/themes/Adwaita.scss b/src/resources/themes/Adwaita.scss
index f97b8b082..d62c11fe2 100644
--- a/src/resources/themes/Adwaita.scss
+++ b/src/resources/themes/Adwaita.scss
@@ -150,11 +150,35 @@
   }
 }
 
+$close_button_fg_color: lighten($fg_color, 10%);
+@mixin close_button($bg:$bg_color, $fg:$close_button_fg_color) {
+  background: none;
+  border: none;
+  box-shadow: none;
+
+  &:last-child {
+    image {
+      color: $fg;
+      border: 1px solid transparent;
+      border-radius: 5px;
+    }
+
+    &:hover image {
+      @include button(normal, $bg, $fg);
+      @include button(hover, $bg, $fg);
+    }
+
+    &:active image {
+      @include button(normal, $bg, $fg);
+      @include button(active, $bg, $fg);
+    }
+  }
+}
+
 .url_entry:not(:hover):not(:focus) {
   background-color: transparentize($base_color, 0.25);
 }
 
-$close_button_fg_color: lighten($fg_color, 10%);
 .bookmark-tag-widget {
   background-color: darken($bg_color, 10%);
 
@@ -164,31 +188,7 @@ $close_button_fg_color: lighten($fg_color, 10%);
   }
 
   button {
-    background: none;
-    border: none;
-    box-shadow: none;
-
-    &:last-child {
-      image {
-        color: $close_button_fg_color;
-      }
-
-      &:hover {
-        image {
-          border: 1px solid;
-          border-radius: 5px;
-          @include button(normal, $bg_color, $close_button_fg_color);
-          @include button(hover, $bg_color, $close_button_fg_color);
-        }
-      }
-
-      &:active {
-        image {
-          @include button(normal, $bg_color, $close_button_fg_color);
-          @include button(active, $bg_color, $close_button_fg_color);
-        }
-      }
-    }
+    @include close_button();
   }
 }
 
@@ -201,25 +201,19 @@ $close_button_fg_color: lighten($fg_color, 10%);
   }
 
   button {
-    &:last-child {
-      image {
-        color: themecolor(theme_selected_fg_color);
-      }
+    @include close_button($selected_bg_color, $selected_fg_color);
+  }
+}
 
-      &:hover {
-        image {
-          @include button(normal, $selected_bg_color, $selected_fg_color);
-          @include button(hover, $selected_bg_color, $selected_fg_color);
-        }
-      }
+.page-row-close-button {
+  @include close_button();
 
-      &:active {
-        image {
-          @include button(normal, $selected_bg_color, $selected_fg_color);
-          @include button(active, $selected_bg_color, $selected_fg_color);
-        }
-      }
-    }
+  row:selected & {
+    @include close_button($selected_bg_color, $selected_fg_color);
+  }
+
+  row.narrow & image {
+    padding: 6px;
   }
 }