Update nautolus 3.30 parthbar style

vinceliuice · Oct 30, 2018 · 2eb8871 · 2eb8871
1 parent 8f55c24
commit 2eb8871
Show file tree

Hide file tree

Showing 14 changed files with 470 additions and 153 deletions.
diff --git a/src/_sass/gtk/_common.scss b/src/_sass/gtk/_common.scss
@@ -1402,33 +1402,6 @@ headerbar { // headerbar border rounding
   @extend %titlebar;
 }
 
-//.titlebar {
-//  :not(headerbar) .path-bar {
-//    button {
-//      border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
-//                                    $primary_color 0%,
-//                                    transparent 0%)
-//                                    0 0 0 / 0 0 0;
-//
-//      &:checked, &:active {
-//        color: $titlebar_fg_color;
-//        background-color: transparent;
-//        border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
-//                                      $primary_color 100%,
-//                                      transparent 0%)
-//                                      0 0 2 / 0 0 2px;
-//      }
-//      &:checked:backdrop, &:active:backdrop {
-//        color: $titlebar_secondary_fg_color;
-//        border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
-//                                      $titlebar_disabled_fg_color 100%,
-//                                      transparent 0%)
-//                                      0 0 2 / 0 0 2px;
-//      }
-//    }
-//  }
-//}
-
 /************
  * Pathbars *
  ************/

diff --git a/src/_sass/gtk/apps/_gnome.scss b/src/_sass/gtk/apps/_gnome.scss
@@ -28,14 +28,42 @@
   background-image: none;
 }
 
+
 %pathbar_box_button {
+  margin: 0;
+  padding: 0 6px;
+	min-height: $medium_size;
+  border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
+                                $primary_color 0%,
+                                transparent 0%)
+                                0 0 0 / 0 0 0;
+
+  &:checked, &:active {
+    color: $titlebar_fg_color;
+    background-color: transparent;
+    border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
+                                  $primary_color 100%,
+                                  transparent 0%)
+                                  0 0 2 / 0 0 2px;
+  }
+  &:checked:backdrop, &:active:backdrop {
+    color: $titlebar_secondary_fg_color;
+    border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
+                                  $titlebar_disabled_fg_color 100%,
+                                  transparent 0%)
+                                  0 0 2 / 0 0 2px;
+  }
+}
+
+%width_maximized_button {
   margin: 0;
   padding: 0 6px;
 	min-height: $small_size + 6px;
   border-radius: $square_radius - 2px;
   border: 3px solid $primary_color;
   color: $inverse_fg_color;
   background-color: transparent;
+	border-image: none;
 
   &:hover {
     color: $inverse_fg_color;
@@ -49,6 +77,7 @@
     color: $titlebar_secondary_fg_color;
     background-color: $titlebar_bg_color;
     box-shadow: inset 0 0 0 9999px $row_fill_color;
+	  border-image: none;
     background-image: radial-gradient(circle farthest-corner at center,
                                       $row_fill_color 10%,
                                       transparent 0%);
@@ -74,9 +103,10 @@
       background-color: rgba($inverse_secondary_fg_color, 0.08);
     }
   }
-  &:checked:backdrop {
+  &:checked:backdrop, &:active:backdrop {
     color: $titlebar_hint_fg_color;
     background-color: $titlebar_bg_color;
+		border-image: none;
   }
 }
 
@@ -93,15 +123,17 @@
 
   .path-bar-box { // Fixed nautilus 3.30 pathbar
     margin: $container_padding 0;
-//    padding: 2px 0;
-    border-radius: $square_radius;
-    color: $inverse_fg_color;
-    background-color: $primary_color;
+    color: $titlebar_fg_color;
+    background-color: transparent;
 
     button { @extend %pathbar_box_button; }
 
     &.width-maximized {
-//      button { @extend %pathbar_box_button; }
+      color: $inverse_fg_color;
+      background-color: $primary_color;
+      border-radius: $square_radius;
+
+      button { @extend %width_maximized_button; }
     }
 
     // workaround for 3.30.1

diff --git a/src/gtk/gtk-compact-square.css b/src/gtk/gtk-compact-square.css
@@ -4493,61 +4493,82 @@ button.emoji-section:last-child {
 }
 
 .nautilus-window headerbar .path-bar-box button {
+  margin: 0;
+  padding: 0 6px;
+  min-height: 32px;
+  border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #00CE99 0%, transparent 0%) 0 0 0/0 0 0;
+}
+
+.nautilus-window headerbar .path-bar-box button:checked, .nautilus-window headerbar .path-bar-box button:active {
+  color: #FFFFFF;
+  background-color: transparent;
+  border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #00CE99 100%, transparent 0%) 0 0 2/0 0 2px;
+}
+
+.nautilus-window headerbar .path-bar-box button:checked:backdrop, .nautilus-window headerbar .path-bar-box button:active:backdrop {
+  color: rgba(255, 255, 255, 0.7);
+  border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), rgba(255, 255, 255, 0.5) 100%, transparent 0%) 0 0 2/0 0 2px;
+}
+
+.nautilus-window headerbar .path-bar-box.width-maximized button {
   margin: 0;
   padding: 0 6px;
   min-height: 26px;
   border-radius: 6px;
   border: 3px solid #00CE99;
   color: #FFFFFF;
   background-color: transparent;
+  border-image: none;
 }
 
-.nautilus-window headerbar .path-bar-box button:hover {
+.nautilus-window headerbar .path-bar-box.width-maximized button:hover {
   color: #FFFFFF;
   background-color: rgba(255, 255, 255, 0.08);
 }
 
-.nautilus-window headerbar .path-bar-box button:active {
+.nautilus-window headerbar .path-bar-box.width-maximized button:active {
   color: #FFFFFF;
   background-color: rgba(255, 255, 255, 0.12);
 }
 
-.nautilus-window headerbar .path-bar-box button:checked {
+.nautilus-window headerbar .path-bar-box.width-maximized button:checked {
   color: rgba(255, 255, 255, 0.7);
   background-color: #47504e;
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.05);
+  border-image: none;
   background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.05) 10%, transparent 0%);
   background-size: 0% 0%;
 }
 
-.nautilus-window headerbar .path-bar-box button:checked:hover {
+.nautilus-window headerbar .path-bar-box.width-maximized button:checked:hover {
   color: #FFFFFF;
   background-color: #47504e;
 }
 
-.nautilus-window headerbar .path-bar-box button:disabled {
+.nautilus-window headerbar .path-bar-box.width-maximized button:disabled {
   color: rgba(255, 255, 255, 0.5);
   background-color: transparent;
 }
 
-.nautilus-window headerbar .path-bar-box button:checked:disabled {
+.nautilus-window headerbar .path-bar-box.width-maximized button:checked:disabled {
   color: rgba(255, 255, 255, 0.5);
   background-color: #47504e;
 }
 
-.nautilus-window headerbar .path-bar-box button:backdrop {
+.nautilus-window headerbar .path-bar-box.width-maximized button:backdrop {
   color: rgba(255, 255, 255, 0.7);
   background-color: transparent;
 }
 
-.nautilus-window headerbar .path-bar-box button:backdrop:hover {
+.nautilus-window headerbar .path-bar-box.width-maximized button:backdrop:hover {
   color: rgba(255, 255, 255, 0.7);
   background-color: rgba(255, 255, 255, 0.08);
 }
 
-.nautilus-window headerbar .path-bar-box button:checked:backdrop {
+.nautilus-window headerbar .path-bar-box.width-maximized button:checked:backdrop, .nautilus-window headerbar .path-bar-box.width-maximized button:active:backdrop {
   color: rgba(255, 255, 255, 0.5);
   background-color: #47504e;
+  border-image: none;
 }
 
 .nautilus-window,
@@ -4559,9 +4580,14 @@ button.emoji-section:last-child {
 
 .nautilus-window headerbar .path-bar-box {
   margin: 6px 0;
-  border-radius: 8px;
+  color: #FFFFFF;
+  background-color: transparent;
+}
+
+.nautilus-window headerbar .path-bar-box.width-maximized {
   color: #FFFFFF;
   background-color: #00CE99;
+  border-radius: 8px;
 }
 
 .nautilus-window headerbar .path-bar-box.background.frame {

diff --git a/src/gtk/gtk-compact.css b/src/gtk/gtk-compact.css
@@ -4493,61 +4493,82 @@ button.emoji-section:last-child {
 }
 
 .nautilus-window headerbar .path-bar-box button {
+  margin: 0;
+  padding: 0 6px;
+  min-height: 32px;
+  border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #00CE99 0%, transparent 0%) 0 0 0/0 0 0;
+}
+
+.nautilus-window headerbar .path-bar-box button:checked, .nautilus-window headerbar .path-bar-box button:active {
+  color: #FFFFFF;
+  background-color: transparent;
+  border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), #00CE99 100%, transparent 0%) 0 0 2/0 0 2px;
+}
+
+.nautilus-window headerbar .path-bar-box button:checked:backdrop, .nautilus-window headerbar .path-bar-box button:active:backdrop {
+  color: rgba(255, 255, 255, 0.7);
+  border-image: radial-gradient(circle closest-corner at center calc(100% - 1px), rgba(255, 255, 255, 0.5) 100%, transparent 0%) 0 0 2/0 0 2px;
+}
+
+.nautilus-window headerbar .path-bar-box.width-maximized button {
   margin: 0;
   padding: 0 6px;
   min-height: 26px;
   border-radius: 9997px;
   border: 3px solid #00CE99;
   color: #FFFFFF;
   background-color: transparent;
+  border-image: none;
 }
 
-.nautilus-window headerbar .path-bar-box button:hover {
+.nautilus-window headerbar .path-bar-box.width-maximized button:hover {
   color: #FFFFFF;
   background-color: rgba(255, 255, 255, 0.08);
 }
 
-.nautilus-window headerbar .path-bar-box button:active {
+.nautilus-window headerbar .path-bar-box.width-maximized button:active {
   color: #FFFFFF;
   background-color: rgba(255, 255, 255, 0.12);
 }
 
-.nautilus-window headerbar .path-bar-box button:checked {
+.nautilus-window headerbar .path-bar-box.width-maximized button:checked {
   color: rgba(255, 255, 255, 0.7);
   background-color: #47504e;
   box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.05);
+  border-image: none;
   background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.05) 10%, transparent 0%);
   background-size: 0% 0%;
 }
 
-.nautilus-window headerbar .path-bar-box button:checked:hover {
+.nautilus-window headerbar .path-bar-box.width-maximized button:checked:hover {
   color: #FFFFFF;
   background-color: #47504e;
 }
 
-.nautilus-window headerbar .path-bar-box button:disabled {
+.nautilus-window headerbar .path-bar-box.width-maximized button:disabled {
   color: rgba(255, 255, 255, 0.5);
   background-color: transparent;
 }
 
-.nautilus-window headerbar .path-bar-box button:checked:disabled {
+.nautilus-window headerbar .path-bar-box.width-maximized button:checked:disabled {
   color: rgba(255, 255, 255, 0.5);
   background-color: #47504e;
 }
 
-.nautilus-window headerbar .path-bar-box button:backdrop {
+.nautilus-window headerbar .path-bar-box.width-maximized button:backdrop {
   color: rgba(255, 255, 255, 0.7);
   background-color: transparent;
 }
 
-.nautilus-window headerbar .path-bar-box button:backdrop:hover {
+.nautilus-window headerbar .path-bar-box.width-maximized button:backdrop:hover {
   color: rgba(255, 255, 255, 0.7);
   background-color: rgba(255, 255, 255, 0.08);
 }
 
-.nautilus-window headerbar .path-bar-box button:checked:backdrop {
+.nautilus-window headerbar .path-bar-box.width-maximized button:checked:backdrop, .nautilus-window headerbar .path-bar-box.width-maximized button:active:backdrop {
   color: rgba(255, 255, 255, 0.5);
   background-color: #47504e;
+  border-image: none;
 }
 
 .nautilus-window,
@@ -4559,9 +4580,14 @@ button.emoji-section:last-child {
 
 .nautilus-window headerbar .path-bar-box {
   margin: 6px 0;
-  border-radius: 9999px;
+  color: #FFFFFF;
+  background-color: transparent;
+}
+
+.nautilus-window headerbar .path-bar-box.width-maximized {
   color: #FFFFFF;
   background-color: #00CE99;
+  border-radius: 9999px;
 }
 
 .nautilus-window headerbar .path-bar-box.background.frame {