Re-implement sidebar with border instead of box-shadow

For some odd reason the GtkTreeview doesn't seem to redraw the box-shadow element when losing focus, so there are some left-over box-shadows when switching directories in Thunar and updating the selected row.
tanderson-google · Sep 17, 2017 · 4535e23 · 4535e23
1 parent 9bfd345
commit 4535e23
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 38 deletions.
diff --git a/gtk-3.0/_common.scss b/gtk-3.0/_common.scss
@@ -3594,22 +3594,31 @@ filechooserbutton:drop(active) {
 
   row,
   treeview {
-    &:selected {
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+    &:selected, &:selected:focus {
       background-image: linear-gradient(to bottom,
                                         shade($sidebar_bg_color, 0.87),
                                         shade($sidebar_bg_color, 0.95) 10%,
                                         shade($sidebar_bg_color, 0.99) 92%,
                                         shade($sidebar_bg_color, 0.92)
                                         );
-      box-shadow: 0 -1px shade($bg_color, 0.85),
-                  0 1px shade($bg_color, 1.12);
+      border-top: 1px solid shade($bg_color, 0.85);
+      border-bottom: 1px solid shade($bg_color, 1.12);
 
       label {
         color: $fg_color;
         &:backdrop { color: $backdrop_fg_color; }
       }
-      &.view:selected { color: $fg_color; }
+      &:backdrop {
+        background-image: none;
+        background-color: $bg_color;
+        color: $fg_color;
+        border-top: 1px solid shade($bg_color, 0.9);
+        border-bottom: 1px solid shade($bg_color, 0.9);
+      }
     }
+    .view:selected, .view:selected:focus { color: $fg_color; }
     &:backdrop { background-color: transparent; }
   }
   @at-root %sidebar_left,
@@ -3618,13 +3627,17 @@ filechooserbutton:drop(active) {
   &.left:dir(rtl) {
     border-right: 1px solid $borders_color;
     border-left-style: none;
+    border-top-style: none;
+    border-bottom-style: none;
   }
 
   @at-root %sidebar_right
   &:dir(rtl),
   &.right {
     border-left: 1px solid $borders_color;
     border-right-style: none;
+    border-top-style: none;
+    border-bottom-style: none;
   }
 
   &:backdrop {

diff --git a/gtk-3.0/gtk-contained-dark.css b/gtk-3.0/gtk-contained-dark.css
@@ -3598,30 +3598,54 @@ filechooserbutton:drop(active) {
   border-style: none;
   background-color: #222;
   -gtk-icon-style: regular; }
-  .sidebar row:selected,
-  .sidebar treeview:selected {
-    background-image: linear-gradient(to bottom, shade(#222, 0.87), shade(#222, 0.95) 10%, shade(#222, 0.99) 92%, shade(#222, 0.92));
-    box-shadow: 0 -1px shade(#393f3f, 0.85), 0 1px shade(#393f3f, 1.12); }
-    .sidebar row:selected label,
-    .sidebar treeview:selected label {
-      color: #eeeeec; }
-      .sidebar row:selected label:backdrop,
-      .sidebar treeview:selected label:backdrop {
-        color: #949796; }
-    .sidebar row:selected.view:selected,
-    .sidebar treeview:selected.view:selected {
+  .sidebar row,
+  .sidebar treeview {
+    box-shadow: none;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent; }
+    .sidebar row:selected, .sidebar row:selected:focus,
+    .sidebar treeview:selected,
+    .sidebar treeview:selected:focus {
+      background-image: linear-gradient(to bottom, shade(#222, 0.87), shade(#222, 0.95) 10%, shade(#222, 0.99) 92%, shade(#222, 0.92));
+      border-top: 1px solid shade(#393f3f, 0.85);
+      border-bottom: 1px solid shade(#393f3f, 1.12); }
+      .sidebar row:selected label, .sidebar row:selected:focus label,
+      .sidebar treeview:selected label,
+      .sidebar treeview:selected:focus label {
+        color: #eeeeec; }
+        .sidebar row:selected label:backdrop, .sidebar row:selected:focus label:backdrop,
+        .sidebar treeview:selected label:backdrop,
+        .sidebar treeview:selected:focus label:backdrop {
+          color: #949796; }
+      .sidebar row:selected:backdrop, .sidebar row:selected:focus:backdrop,
+      .sidebar treeview:selected:backdrop,
+      .sidebar treeview:selected:focus:backdrop {
+        background-image: none;
+        background-color: #393f3f;
+        color: #eeeeec;
+        border-top: 1px solid shade(#393f3f, 0.9);
+        border-bottom: 1px solid shade(#393f3f, 0.9); }
+    .sidebar row .view:selected, .sidebar row iconview:selected, .sidebar row .view:selected:focus, .sidebar row iconview:selected:focus,
+    .sidebar treeview .view:selected,
+    .sidebar treeview iconview:selected,
+    .sidebar treeview .view:selected:focus,
+    .sidebar treeview iconview:selected:focus {
       color: #eeeeec; }
-  .sidebar row:backdrop,
-  .sidebar treeview:backdrop {
-    background-color: transparent; }
+    .sidebar row:backdrop,
+    .sidebar treeview:backdrop {
+      background-color: transparent; }
   stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) {
     border-right: 1px solid #1c1f1f;
-    border-left-style: none; }
+    border-left-style: none;
+    border-top-style: none;
+    border-bottom-style: none; }
   stacksidebar.sidebar:dir(rtl) list
   .sidebar:dir(rtl), stacksidebar.sidebar.right list
   .sidebar:dir(rtl), .sidebar.right {
     border-left: 1px solid #1c1f1f;
-    border-right-style: none; }
+    border-right-style: none;
+    border-top-style: none;
+    border-bottom-style: none; }
   .sidebar:backdrop {
     background-color: #333636;
     border-color: #1f2222;

diff --git a/gtk-3.0/gtk-contained.css b/gtk-3.0/gtk-contained.css
@@ -3627,30 +3627,54 @@ filechooserbutton:drop(active) {
   border-style: none;
   background-color: #dae0e6;
   -gtk-icon-style: regular; }
-  .sidebar row:selected,
-  .sidebar treeview:selected {
-    background-image: linear-gradient(to bottom, shade(#dae0e6, 0.87), shade(#dae0e6, 0.95) 10%, shade(#dae0e6, 0.99) 92%, shade(#dae0e6, 0.92));
-    box-shadow: 0 -1px shade(#cecece, 0.85), 0 1px shade(#cecece, 1.12); }
-    .sidebar row:selected label,
-    .sidebar treeview:selected label {
-      color: #3c3c3c; }
-      .sidebar row:selected label:backdrop,
-      .sidebar treeview:selected label:backdrop {
-        color: #858585; }
-    .sidebar row:selected.view:selected,
-    .sidebar treeview:selected.view:selected {
+  .sidebar row,
+  .sidebar treeview {
+    box-shadow: none;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent; }
+    .sidebar row:selected, .sidebar row:selected:focus,
+    .sidebar treeview:selected,
+    .sidebar treeview:selected:focus {
+      background-image: linear-gradient(to bottom, shade(#dae0e6, 0.87), shade(#dae0e6, 0.95) 10%, shade(#dae0e6, 0.99) 92%, shade(#dae0e6, 0.92));
+      border-top: 1px solid shade(#cecece, 0.85);
+      border-bottom: 1px solid shade(#cecece, 1.12); }
+      .sidebar row:selected label, .sidebar row:selected:focus label,
+      .sidebar treeview:selected label,
+      .sidebar treeview:selected:focus label {
+        color: #3c3c3c; }
+        .sidebar row:selected label:backdrop, .sidebar row:selected:focus label:backdrop,
+        .sidebar treeview:selected label:backdrop,
+        .sidebar treeview:selected:focus label:backdrop {
+          color: #858585; }
+      .sidebar row:selected:backdrop, .sidebar row:selected:focus:backdrop,
+      .sidebar treeview:selected:backdrop,
+      .sidebar treeview:selected:focus:backdrop {
+        background-image: none;
+        background-color: #cecece;
+        color: #3c3c3c;
+        border-top: 1px solid shade(#cecece, 0.9);
+        border-bottom: 1px solid shade(#cecece, 0.9); }
+    .sidebar row .view:selected, .sidebar row iconview:selected, .sidebar row .view:selected:focus, .sidebar row iconview:selected:focus,
+    .sidebar treeview .view:selected,
+    .sidebar treeview iconview:selected,
+    .sidebar treeview .view:selected:focus,
+    .sidebar treeview iconview:selected:focus {
       color: #3c3c3c; }
-  .sidebar row:backdrop,
-  .sidebar treeview:backdrop {
-    background-color: transparent; }
+    .sidebar row:backdrop,
+    .sidebar treeview:backdrop {
+      background-color: transparent; }
   stacksidebar.sidebar:dir(ltr) list, stacksidebar.sidebar.left list, stacksidebar.sidebar.left:dir(rtl) list, .sidebar:dir(ltr), .sidebar.left, .sidebar.left:dir(rtl) {
     border-right: 1px solid #828282;
-    border-left-style: none; }
+    border-left-style: none;
+    border-top-style: none;
+    border-bottom-style: none; }
   stacksidebar.sidebar:dir(rtl) list
   .sidebar:dir(rtl), stacksidebar.sidebar.right list
   .sidebar:dir(rtl), .sidebar.right {
     border-left: 1px solid #828282;
-    border-right-style: none; }
+    border-right-style: none;
+    border-top-style: none;
+    border-bottom-style: none; }
   .sidebar:backdrop {
     background-color: #e4e4e4;
     border-color: #8a8a8a;