pathbars: non button look as per wireframes

- not sure about the metrics changing font-weight: bold

3 files changed, 78 insertions, 21 deletions

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index c4dca89f43..5b60f5196b 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -1395,6 +1395,16 @@ headerbar {
  ************/
 
 .path-bar button {
+  /* non-buttons */
+  border-radius: 0;
+  background-image: none;
+  background-color: transparent;
+  border-width: 0;
+  border-bottom: 3px solid transparent; /* not padding due to transitions */
+  &:checked {
+    border-color: $selected_bg_color;
+    font-weight: bold;
+  }
   &:only-child {
     padding-left: 12px;
     padding-right: 12px;
@@ -1405,7 +1415,10 @@ headerbar {
   & label:first-child { padding-right: 2px; }
   & label:only-child { padding-right: 0; padding-left: 0; }
 }
-
+  .path-bar button:hover { border-color: transparentize($selected_bg_color, .5); }
+  .path-bar button:active { border-color: darken($selected_bg_color, 10%) }
+  .path-bar button:backdrop:checked { border-color: $backdrop_borders_color; }
+  
 /**************
  * Tree Views *
  **************/
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 8357667f69..cd6a6ff035 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1882,16 +1882,38 @@ window.csd > .titlebar:not(headerbar) {
 /************
  * Pathbars *
  ************/
-.path-bar button:only-child {
-  padding-left: 12px;
-  padding-right: 12px; }
-.path-bar button label:last-child {
-  padding-left: 2px; }
-.path-bar button label:first-child {
-  padding-right: 2px; }
-.path-bar button label:only-child {
-  padding-right: 0;
-  padding-left: 0; }
+.path-bar button, .path-bar headerbar button.titlebutton, headerbar .path-bar button.titlebutton,
+.path-bar .titlebar button.titlebutton,
+.titlebar .path-bar button.titlebutton {
+  /* non-buttons */
+  border-radius: 0;
+  background-image: none;
+  background-color: transparent;
+  border-width: 0;
+  border-bottom: 3px solid transparent;
+  /* not padding due to transitions */ }
+  .path-bar button:checked {
+    border-color: #215d9c;
+    font-weight: bold; }
+  .path-bar button:only-child {
+    padding-left: 12px;
+    padding-right: 12px; }
+  .path-bar button label:last-child {
+    padding-left: 2px; }
+  .path-bar button label:first-child {
+    padding-right: 2px; }
+  .path-bar button label:only-child {
+    padding-right: 0;
+    padding-left: 0; }
+
+.path-bar button:hover {
+  border-color: rgba(33, 93, 156, 0.5); }
+
+.path-bar button:active {
+  border-color: #184472; }
+
+.path-bar button:backdrop:checked {
+  border-color: #1f2222; }
 
 /**************
  * Tree Views *
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 555d1d2094..d8f96316a6 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1886,16 +1886,38 @@ window.csd > .titlebar:not(headerbar) {
 /************
  * Pathbars *
  ************/
-.path-bar button:only-child {
-  padding-left: 12px;
-  padding-right: 12px; }
-.path-bar button label:last-child {
-  padding-left: 2px; }
-.path-bar button label:first-child {
-  padding-right: 2px; }
-.path-bar button label:only-child {
-  padding-right: 0;
-  padding-left: 0; }
+.path-bar button, .path-bar headerbar button.titlebutton, headerbar .path-bar button.titlebutton,
+.path-bar .titlebar button.titlebutton,
+.titlebar .path-bar button.titlebutton {
+  /* non-buttons */
+  border-radius: 0;
+  background-image: none;
+  background-color: transparent;
+  border-width: 0;
+  border-bottom: 3px solid transparent;
+  /* not padding due to transitions */ }
+  .path-bar button:checked {
+    border-color: #4a90d9;
+    font-weight: bold; }
+  .path-bar button:only-child {
+    padding-left: 12px;
+    padding-right: 12px; }
+  .path-bar button label:last-child {
+    padding-left: 2px; }
+  .path-bar button label:first-child {
+    padding-right: 2px; }
+  .path-bar button label:only-child {
+    padding-right: 0;
+    padding-left: 0; }
+
+.path-bar button:hover {
+  border-color: rgba(74, 144, 217, 0.5); }
+
+.path-bar button:active {
+  border-color: #2a76c6; }
+
+.path-bar button:backdrop:checked {
+  border-color: #a5a5a1; }
 
 /**************
  * Tree Views *