improve tabs on gtk4

2 files changed, 94 insertions, 68 deletions

diff --git a/desktop-themes/YaruOk/gtk-4.0/_common.scss b/desktop-themes/YaruOk/gtk-4.0/_common.scss
index 012ae960..5eb62f50 100644..100755
--- a/desktop-themes/YaruOk/gtk-4.0/_common.scss
+++ b/desktop-themes/YaruOk/gtk-4.0/_common.scss
@@ -2038,12 +2038,14 @@ menubar {
 /*************
  * Notebooks *
  *************/
-notebook {
-  @include focus-ring("> header > tabs > tab:checked", $offset: -2px, $focus-state: 'focus:focus-visible');
+$notebook_base_color: lighten($bg_color, 3%);
 
+notebook {
+        border-color:#b0b9c9;
   > header {
     padding: 1px;
     border-color: $borders_color;
+    box-shadow: 1px 1px $bg_color,  1px -1px $bg_color, -1px -1px $bg_color; 
     border-width: 1px;
     background-color: transparent; // Yaru change: remove notebook background
 
@@ -2053,16 +2055,21 @@ notebook {
       border-bottom-style: solid;
       > tabs {
         margin-bottom: -2px;
+        margin-top: 4px;
         > tab {
-          &:hover { color: $fg_color;  }  // Yaru change: 4px underlines are too much
+           background-image: linear-gradient(to bottom, gtkshade($bg_color, 1.02), gtkshade($bg_color, 0.8));
+           box-shadow: 0px -1px $borders_color, 1px 0px $borders_color, -1px 0px  $borders_color, inset 0px -1px $borders_color;
+           border-top-left-radius: 3px;
+           border-top-right-radius: 3px;
+          &:hover {  } // Yaru change: 4px underlines are too much
 
 
           &:checked {  background-image: linear-gradient(to bottom,
                       $core_color_a 3px,
-                      $borders_color 5px,
-                      $base_color 5px,
-                      $base_color); 
-                      box-shadow: 0px -1px $borders_color, 1px 0px $borders_color, -1px 0px  $borders_color; } // Yaru change: 4px underlines are too much
+                      desaturate(darken($core_color_a, 30%), 15%) 5px,
+                      $notebook_base_color 5px,
+                      $notebook_base_color); 
+                      box-shadow: 0px -1px desaturate(darken($core_color_a, 30%), 15%), 1px 0px $borders_color, -1px 0px  $borders_color; } // Yaru change: 4px underlines are too much
         }
       }
     }
@@ -2070,16 +2077,21 @@ notebook {
     &.bottom {
       border-top-style: solid;
       > tabs {
-        margin-top: -2px;
+        margin-top: -3px;
         > tab {
-          &:hover { color: $fg_color; } // Yaru change: 4px underlines are too much
+           background-image: linear-gradient(to top, gtkshade($bg_color, 1.02), gtkshade($bg_color, 0.8));
+           box-shadow: 0px 1px $borders_color , 1px 0px $borders_color, -1px 0px  $borders_color, inset 0px 1px $borders_color; 
+           border-bottom-left-radius: 3px;
+           border-bottom-right-radius: 3px;
+          &:hover {  } // Yaru change: 4px underlines are too much
+
 
           &:checked {  background-image: linear-gradient(to top,
                       $core_color_a 3px,
-                      $borders_color 5px,
-                      $base_color 5px,
-                      $base_color);
-                       box-shadow: 0px 1px $borders_color, 1px 0px $borders_color, -1px 0px  $borders_color; } // Yaru change: 4px underlines are too much
+                      desaturate(darken($core_color_a, 30%), 15%) 5px,
+                      $notebook_base_color 5px,
+                      $notebook_base_color); 
+                       box-shadow: 0px 1px desaturate(darken($core_color_a, 30%), 15%) , 1px 0px $borders_color, -1px 0px  $borders_color; } // Yaru change: 4px underlines are too much
         }
       }
     }
@@ -2087,16 +2099,22 @@ notebook {
     &.left {
       border-right-style: solid;
       > tabs {
-        margin-right: -2px;
+        margin-right: -3px;
         > tab {
-          &:hover {  color: $fg_color; }  // Yaru change: 4px underlines are too much
+            background-image: linear-gradient(to right, gtkshade($bg_color, 1.02), gtkshade($bg_color, 0.8));
+            box-shadow: 0px 1px $borders_color , 0px -1px $borders_color,  -1px 0px $borders_color, inset -1px 0px $borders_color; 
+             border-top-left-radius: 3px;
+           border-bottom-left-radius: 3px;
+
+          &:hover {  } // Yaru change: 4px underlines are too much
+
 
-        &:checked {  background-image: linear-gradient(to right,
+          &:checked {  background-image: linear-gradient(to right,
                       $core_color_a 3px,
-                      $borders_color 5px,
-                      $base_color 5px,
-                      $base_color);
-                      box-shadow: 0px -1px $borders_color,0px 1px $borders_color;   } // Yaru change: 4px underlines are too much
+                      desaturate(darken($core_color_a, 30%), 15%) 5px,
+                      $notebook_base_color 5px,
+                      $notebook_base_color);
+                      box-shadow: -1px 0px desaturate(darken($core_color_a, 30%), 15%) , 0px -1px $borders_color,0px 1px $borders_color;   } // Yaru change: 4px underlines are too much
         }
       }
     }
@@ -2104,17 +2122,21 @@ notebook {
     &.right {
       border-left-style: solid;
       > tabs {
-        margin-left: -2px;
+        margin-left: -3px;
         > tab {
+           background-image: linear-gradient(to left, gtkshade($bg_color, 1.02), gtkshade($bg_color, 0.8));
+           box-shadow: 0px 1px $borders_color , 0px -1px $borders_color,  1px 0px $borders_color, inset 1px 0px $borders_color; 
+             border-top-right-radius: 3px;
+           border-bottom-right-radius: 3px;
           &:hover {  } // Yaru change: 4px underlines are too much
 
 
           &:checked { background-image: linear-gradient(to left,
                       $core_color_a 3px,
-                      $borders_color 5px,
-                      $base_color 5px,
-                      $base_color); 
-                     box-shadow: 0px -1px $borders_color,0px 1px $borders_color;} // Yaru change: 4px underlines are too much
+                      desaturate(darken($core_color_a, 30%), 15%) 5px,
+                      $notebook_base_color 5px,
+                      $notebook_base_color); 
+                     box-shadow:1px 0px desaturate(darken($core_color_a, 30%), 15%), 0px -1px $borders_color,0px 1px $borders_color;} // Yaru change: 4px underlines are too much
         }
       }
     }
@@ -2248,20 +2270,20 @@ notebook {
     &.top,
     &.bottom {
       > tabs {
-        padding-left: 4px;
-        padding-right: 4px;
+        padding-left: 0px;
+        padding-right: 0px;
 
         &:not(:only-child) {
-          margin-left: 3px;
-          margin-right: 3px;
+          margin-left: 1px;
+          margin-right: 1px;
 
-          &:first-child { margin-left: -1px; }
+          &:first-child { margin-left: 0px; }
           &:last-child { margin-right: -1px; }
         }
 
         > tab {
-          margin-left: 4px;
-          margin-right: 4px;
+          margin-left: 0px;
+          margin-right: 0px;
 
           &.reorderable-page { border-style: none solid; }
         }
@@ -2271,32 +2293,34 @@ notebook {
     &.left,
     &.right {
       > tabs {
-        padding-top: 4px;
-        padding-bottom: 4px;
+        padding-top: 0px;
+        padding-bottom: 0px;
 
         &:not(:only-child) {
-          margin-top: 3px;
-          margin-bottom: 3px;
+          margin-top: 0px;
+          margin-bottom: 0px;
 
-          &:first-child { margin-top: -1px; }
+          &:first-child { margin-top: 0px; }
           &:last-child { margin-bottom: -1px; }
         }
 
         > tab {
-          margin-top: 4px;
-          margin-bottom: 4px;
+          margin-top: 0px;
+          margin-bottom: 0px;
 
           &.reorderable-page { border-style: solid none; }
         }
       }
     }
 
-    &.top > tabs > tab { padding-bottom: 4px; }
-    &.bottom > tabs > tab { padding-top: 4px; }
+    &.top > tabs > tab { padding-bottom: 1px; }
+    &.bottom > tabs > tab { padding-top: 1px; }
   }
 
   > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
-    background-color: $base_color;
+    background-color: $notebook_base_color;
+
+    &:backdrop { background-color: $notebook_base_color; }
   }
 }
 
diff --git a/desktop-themes/YaruOk/gtk-4.0/gtk.css b/desktop-themes/YaruOk/gtk-4.0/gtk.css
index d163ec16..913d3642 100644..100755
--- a/desktop-themes/YaruOk/gtk-4.0/gtk.css
+++ b/desktop-themes/YaruOk/gtk-4.0/gtk.css
@@ -761,43 +761,43 @@ menubar > item popover.menu popover.menu { padding: 0 0 4px 0; }
 menubar > item popover.menu.background popover.menu.background > contents { margin: 0; border-radius: 6px; }
 
 /************* Notebooks * */
-notebook > header > tabs > tab:checked { outline: 0 solid transparent; outline-offset: 4px; }
+notebook { border-color: #b0b9c9; }
 
-notebook:focus:focus-visible > header > tabs > tab:checked { outline-color: #a29e9b; outline-width: 2px; outline-offset: -2px; }
-
-notebook > header { padding: 1px; border-color: #a29e9b; border-width: 1px; background-color: transparent; }
+notebook > header { padding: 1px; border-color: #a29e9b; box-shadow: 1px 1px #edeceb, 1px -1px #edeceb, -1px -1px #edeceb; border-width: 1px; background-color: transparent; }
 
 notebook > header > tabs { margin: -1px; }
 
 notebook > header.top { border-bottom-style: solid; }
 
-notebook > header.top > tabs { margin-bottom: -2px; }
+notebook > header.top > tabs { margin-bottom: -2px; margin-top: 4px; }
 
-notebook > header.top > tabs > tab:hover { color: #000000; }
+notebook > header.top > tabs > tab { background-image: linear-gradient(to bottom, #f1f1f0, #c0bdba); box-shadow: 0px -1px #a29e9b, 1px 0px #a29e9b, -1px 0px #a29e9b, inset 0px -1px #a29e9b; border-top-left-radius: 3px; border-top-right-radius: 3px; }
 
-notebook > header.top > tabs > tab:checked { background-image: linear-gradient(to bottom, #a4c2e8 3px, #a29e9b 5px, #ffffff 5px, #ffffff); box-shadow: 0px -1px #a29e9b, 1px 0px #a29e9b, -1px 0px #a29e9b; }
+notebook > header.top > tabs > tab:checked { background-image: linear-gradient(to bottom, #a4c2e8 3px, #4373b0 5px, #f4f4f3 5px, #f4f4f3); box-shadow: 0px -1px #4373b0, 1px 0px #a29e9b, -1px 0px #a29e9b; }
 
 notebook > header.bottom { border-top-style: solid; }
 
-notebook > header.bottom > tabs { margin-top: -2px; }
+notebook > header.bottom > tabs { margin-top: -3px; }
 
-notebook > header.bottom > tabs > tab:hover { color: #000000; }
+notebook > header.bottom > tabs > tab { background-image: linear-gradient(to top, #f1f1f0, #c0bdba); box-shadow: 0px 1px #a29e9b, 1px 0px #a29e9b, -1px 0px #a29e9b, inset 0px 1px #a29e9b; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }
 
-notebook > header.bottom > tabs > tab:checked { background-image: linear-gradient(to top, #a4c2e8 3px, #a29e9b 5px, #ffffff 5px, #ffffff); box-shadow: 0px 1px #a29e9b, 1px 0px #a29e9b, -1px 0px #a29e9b; }
+notebook > header.bottom > tabs > tab:checked { background-image: linear-gradient(to top, #a4c2e8 3px, #4373b0 5px, #f4f4f3 5px, #f4f4f3); box-shadow: 0px 1px #4373b0, 1px 0px #a29e9b, -1px 0px #a29e9b; }
 
 notebook > header.left { border-right-style: solid; }
 
-notebook > header.left > tabs { margin-right: -2px; }
+notebook > header.left > tabs { margin-right: -3px; }
 
-notebook > header.left > tabs > tab:hover { color: #000000; }
+notebook > header.left > tabs > tab { background-image: linear-gradient(to right, #f1f1f0, #c0bdba); box-shadow: 0px 1px #a29e9b, 0px -1px #a29e9b, -1px 0px #a29e9b, inset -1px 0px #a29e9b; border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
 
-notebook > header.left > tabs > tab:checked { background-image: linear-gradient(to right, #a4c2e8 3px, #a29e9b 5px, #ffffff 5px, #ffffff); box-shadow: 0px -1px #a29e9b, 0px 1px #a29e9b; }
+notebook > header.left > tabs > tab:checked { background-image: linear-gradient(to right, #a4c2e8 3px, #4373b0 5px, #f4f4f3 5px, #f4f4f3); box-shadow: -1px 0px #4373b0, 0px -1px #a29e9b, 0px 1px #a29e9b; }
 
 notebook > header.right { border-left-style: solid; }
 
-notebook > header.right > tabs { margin-left: -2px; }
+notebook > header.right > tabs { margin-left: -3px; }
+
+notebook > header.right > tabs > tab { background-image: linear-gradient(to left, #f1f1f0, #c0bdba); box-shadow: 0px 1px #a29e9b, 0px -1px #a29e9b, 1px 0px #a29e9b, inset 1px 0px #a29e9b; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
 
-notebook > header.right > tabs > tab:checked { background-image: linear-gradient(to left, #a4c2e8 3px, #a29e9b 5px, #ffffff 5px, #ffffff); box-shadow: 0px -1px #a29e9b, 0px 1px #a29e9b; }
+notebook > header.right > tabs > tab:checked { background-image: linear-gradient(to left, #a4c2e8 3px, #4373b0 5px, #f4f4f3 5px, #f4f4f3); box-shadow: 1px 0px #4373b0, 0px -1px #a29e9b, 0px 1px #a29e9b; }
 
 notebook > header.top > tabs > arrow { border-top-style: none; }
 
@@ -847,35 +847,37 @@ notebook > header > tabs > tab button.flat:last-child { margin-left: 4px; margin
 
 notebook > header > tabs > tab button.flat:first-child { margin-left: -4px; margin-right: 4px; }
 
-notebook > header.top > tabs, notebook > header.bottom > tabs { padding-left: 4px; padding-right: 4px; }
+notebook > header.top > tabs, notebook > header.bottom > tabs { padding-left: 0px; padding-right: 0px; }
 
-notebook > header.top > tabs:not(:only-child), notebook > header.bottom > tabs:not(:only-child) { margin-left: 3px; margin-right: 3px; }
+notebook > header.top > tabs:not(:only-child), notebook > header.bottom > tabs:not(:only-child) { margin-left: 1px; margin-right: 1px; }
 
-notebook > header.top > tabs:not(:only-child):first-child, notebook > header.bottom > tabs:not(:only-child):first-child { margin-left: -1px; }
+notebook > header.top > tabs:not(:only-child):first-child, notebook > header.bottom > tabs:not(:only-child):first-child { margin-left: 0px; }
 
 notebook > header.top > tabs:not(:only-child):last-child, notebook > header.bottom > tabs:not(:only-child):last-child { margin-right: -1px; }
 
-notebook > header.top > tabs > tab, notebook > header.bottom > tabs > tab { margin-left: 4px; margin-right: 4px; }
+notebook > header.top > tabs > tab, notebook > header.bottom > tabs > tab { margin-left: 0px; margin-right: 0px; }
 
 notebook > header.top > tabs > tab.reorderable-page, notebook > header.bottom > tabs > tab.reorderable-page { border-style: none solid; }
 
-notebook > header.left > tabs, notebook > header.right > tabs { padding-top: 4px; padding-bottom: 4px; }
+notebook > header.left > tabs, notebook > header.right > tabs { padding-top: 0px; padding-bottom: 0px; }
 
-notebook > header.left > tabs:not(:only-child), notebook > header.right > tabs:not(:only-child) { margin-top: 3px; margin-bottom: 3px; }
+notebook > header.left > tabs:not(:only-child), notebook > header.right > tabs:not(:only-child) { margin-top: 0px; margin-bottom: 0px; }
 
-notebook > header.left > tabs:not(:only-child):first-child, notebook > header.right > tabs:not(:only-child):first-child { margin-top: -1px; }
+notebook > header.left > tabs:not(:only-child):first-child, notebook > header.right > tabs:not(:only-child):first-child { margin-top: 0px; }
 
 notebook > header.left > tabs:not(:only-child):last-child, notebook > header.right > tabs:not(:only-child):last-child { margin-bottom: -1px; }
 
-notebook > header.left > tabs > tab, notebook > header.right > tabs > tab { margin-top: 4px; margin-bottom: 4px; }
+notebook > header.left > tabs > tab, notebook > header.right > tabs > tab { margin-top: 0px; margin-bottom: 0px; }
 
 notebook > header.left > tabs > tab.reorderable-page, notebook > header.right > tabs > tab.reorderable-page { border-style: solid none; }
 
-notebook > header.top > tabs > tab { padding-bottom: 4px; }
+notebook > header.top > tabs > tab { padding-bottom: 1px; }
+
+notebook > header.bottom > tabs > tab { padding-top: 1px; }
 
-notebook > header.bottom > tabs > tab { padding-top: 4px; }
+notebook > stack:not(:only-child) { background-color: #f4f4f3; }
 
-notebook > stack:not(:only-child) { background-color: #ffffff; }
+notebook > stack:not(:only-child):backdrop { background-color: #f4f4f3; }
 
 /************** Scrollbars * */
 scrollbar { background-color: #bebdbc; transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }