GTK3: theme notebook tabs

share/themes/Kali-Dark/gtk-3.0/gtk.css

@@ -5245,6 +5245,76 @@ popover.background {
   .csd popover.background, popover.background {
     border-color: rgba(13, 14, 17, 0.75); }
 
+/*************
+ * Notebooks *
+ *************/
+notebook > header {
+  border: 0;
+  padding: 0;
+  background-color: #1b1d24; }
+  notebook > header.top > tabs, notebook > header.bottom > tabs, notebook > header.left > tabs, notebook > header.right > tabs {
+    margin: 0; }
+    notebook > header.top > tabs > tab,
+    notebook > header.top > tabs > tab.reorderable-page, notebook > header.bottom > tabs > tab,
+    notebook > header.bottom > tabs > tab.reorderable-page, notebook > header.left > tabs > tab,
+    notebook > header.left > tabs > tab.reorderable-page, notebook > header.right > tabs > tab,
+    notebook > header.right > tabs > tab.reorderable-page {
+      border: 1px solid transparent;
+      margin: 3px; }
+      notebook > header.top > tabs > tab:hover,
+      notebook > header.top > tabs > tab.reorderable-page:hover, notebook > header.bottom > tabs > tab:hover,
+      notebook > header.bottom > tabs > tab.reorderable-page:hover, notebook > header.left > tabs > tab:hover,
+      notebook > header.left > tabs > tab.reorderable-page:hover, notebook > header.right > tabs > tab:hover,
+      notebook > header.right > tabs > tab.reorderable-page:hover {
+        color: #eeeeec;
+        outline-color: rgba(238, 238, 236, 0.3);
+        border-color: #0d0e11;
+        border-bottom-color: black;
+        text-shadow: 0 -1px rgba(0, 0, 0, 0.825255);
+        -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.825255);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), inset 0 -1px 0 rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27);
+        background-image: linear-gradient(to top, #20232b, #252831 1px); }
+      notebook > header.top > tabs > tab:checked,
+      notebook > header.top > tabs > tab.reorderable-page:checked, notebook > header.bottom > tabs > tab:checked,
+      notebook > header.bottom > tabs > tab.reorderable-page:checked, notebook > header.left > tabs > tab:checked,
+      notebook > header.left > tabs > tab.reorderable-page:checked, notebook > header.right > tabs > tab:checked,
+      notebook > header.right > tabs > tab.reorderable-page:checked {
+        color: #eeeeec;
+        outline-color: rgba(238, 238, 236, 0.3);
+        border-color: #0d0e11;
+        border-bottom-color: black;
+        background-image: linear-gradient(to top, #20232b 2px, #23252e);
+        text-shadow: 0 -1px rgba(0, 0, 0, 0.873255);
+        -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.873255);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), inset 0 -1px 0 rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27);
+        background: #272a34; }
+        notebook > header.top > tabs > tab:checked:backdrop,
+        notebook > header.top > tabs > tab.reorderable-page:checked:backdrop, notebook > header.bottom > tabs > tab:checked:backdrop,
+        notebook > header.bottom > tabs > tab.reorderable-page:checked:backdrop, notebook > header.left > tabs > tab:checked:backdrop,
+        notebook > header.left > tabs > tab.reorderable-page:checked:backdrop, notebook > header.right > tabs > tab:checked:backdrop,
+        notebook > header.right > tabs > tab.reorderable-page:checked:backdrop {
+          color: #888a8d;
+          border-color: #16171d;
+          background-image: image(#23252e);
+          text-shadow: none;
+          -gtk-icon-shadow: none;
+          box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+  notebook > header.top {
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
+  notebook > header.bottom {
+    background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
+  notebook > header.right {
+    background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
+  notebook > header.left {
+    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
+  notebook > header tab {
+    border-radius: 4px;
+    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    min-height: 24px; }
+    notebook > header tab button.flat {
+      margin-top: 1px;
+      margin-bottom: 1px; }
+
 /**************
  * GtkInfoBar *
  **************/

share/themes/Kali-Light/gtk-3.0/gtk-dark.css

@@ -5245,6 +5245,76 @@ popover.background {
   .csd popover.background, popover.background {
     border-color: rgba(13, 14, 17, 0.75); }
 
+/*************
+ * Notebooks *
+ *************/
+notebook > header {
+  border: 0;
+  padding: 0;
+  background-color: #1b1d24; }
+  notebook > header.top > tabs, notebook > header.bottom > tabs, notebook > header.left > tabs, notebook > header.right > tabs {
+    margin: 0; }
+    notebook > header.top > tabs > tab,
+    notebook > header.top > tabs > tab.reorderable-page, notebook > header.bottom > tabs > tab,
+    notebook > header.bottom > tabs > tab.reorderable-page, notebook > header.left > tabs > tab,
+    notebook > header.left > tabs > tab.reorderable-page, notebook > header.right > tabs > tab,
+    notebook > header.right > tabs > tab.reorderable-page {
+      border: 1px solid transparent;
+      margin: 3px; }
+      notebook > header.top > tabs > tab:hover,
+      notebook > header.top > tabs > tab.reorderable-page:hover, notebook > header.bottom > tabs > tab:hover,
+      notebook > header.bottom > tabs > tab.reorderable-page:hover, notebook > header.left > tabs > tab:hover,
+      notebook > header.left > tabs > tab.reorderable-page:hover, notebook > header.right > tabs > tab:hover,
+      notebook > header.right > tabs > tab.reorderable-page:hover {
+        color: #eeeeec;
+        outline-color: rgba(238, 238, 236, 0.3);
+        border-color: #0d0e11;
+        border-bottom-color: black;
+        text-shadow: 0 -1px rgba(0, 0, 0, 0.825255);
+        -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.825255);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), inset 0 -1px 0 rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27);
+        background-image: linear-gradient(to top, #20232b, #252831 1px); }
+      notebook > header.top > tabs > tab:checked,
+      notebook > header.top > tabs > tab.reorderable-page:checked, notebook > header.bottom > tabs > tab:checked,
+      notebook > header.bottom > tabs > tab.reorderable-page:checked, notebook > header.left > tabs > tab:checked,
+      notebook > header.left > tabs > tab.reorderable-page:checked, notebook > header.right > tabs > tab:checked,
+      notebook > header.right > tabs > tab.reorderable-page:checked {
+        color: #eeeeec;
+        outline-color: rgba(238, 238, 236, 0.3);
+        border-color: #0d0e11;
+        border-bottom-color: black;
+        background-image: linear-gradient(to top, #20232b 2px, #23252e);
+        text-shadow: 0 -1px rgba(0, 0, 0, 0.873255);
+        -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.873255);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), inset 0 -1px 0 rgba(13, 14, 17, 0.75), 0 1px 2px rgba(0, 0, 0, 0.27);
+        background: #272a34; }
+        notebook > header.top > tabs > tab:checked:backdrop,
+        notebook > header.top > tabs > tab.reorderable-page:checked:backdrop, notebook > header.bottom > tabs > tab:checked:backdrop,
+        notebook > header.bottom > tabs > tab.reorderable-page:checked:backdrop, notebook > header.left > tabs > tab:checked:backdrop,
+        notebook > header.left > tabs > tab.reorderable-page:checked:backdrop, notebook > header.right > tabs > tab:checked:backdrop,
+        notebook > header.right > tabs > tab.reorderable-page:checked:backdrop {
+          color: #888a8d;
+          border-color: #16171d;
+          background-image: image(#23252e);
+          text-shadow: none;
+          -gtk-icon-shadow: none;
+          box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+  notebook > header.top {
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
+  notebook > header.bottom {
+    background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
+  notebook > header.right {
+    background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
+  notebook > header.left {
+    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
+  notebook > header tab {
+    border-radius: 4px;
+    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    min-height: 24px; }
+    notebook > header tab button.flat {
+      margin-top: 1px;
+      margin-bottom: 1px; }
+
 /**************
  * GtkInfoBar *
  **************/

share/themes/Kali-Light/gtk-3.0/gtk.css

@@ -5266,6 +5266,76 @@ popover.background {
   .csd popover.background, popover.background {
     border-color: rgba(0, 0, 0, 0.1); }
 
+/*************
+ * Notebooks *
+ *************/
+notebook > header {
+  border: 0;
+  padding: 0;
+  background-color: #f2f2f2; }
+  notebook > header.top > tabs, notebook > header.bottom > tabs, notebook > header.left > tabs, notebook > header.right > tabs {
+    margin: 0; }
+    notebook > header.top > tabs > tab,
+    notebook > header.top > tabs > tab.reorderable-page, notebook > header.bottom > tabs > tab,
+    notebook > header.bottom > tabs > tab.reorderable-page, notebook > header.left > tabs > tab,
+    notebook > header.left > tabs > tab.reorderable-page, notebook > header.right > tabs > tab,
+    notebook > header.right > tabs > tab.reorderable-page {
+      border: 1px solid transparent;
+      margin: 3px; }
+      notebook > header.top > tabs > tab:hover,
+      notebook > header.top > tabs > tab.reorderable-page:hover, notebook > header.bottom > tabs > tab:hover,
+      notebook > header.bottom > tabs > tab.reorderable-page:hover, notebook > header.left > tabs > tab:hover,
+      notebook > header.left > tabs > tab.reorderable-page:hover, notebook > header.right > tabs > tab:hover,
+      notebook > header.right > tabs > tab.reorderable-page:hover {
+        color: #5c616c;
+        outline-color: rgba(92, 97, 108, 0.3);
+        border-color: #d9d9d9;
+        border-bottom-color: #c2c2c2;
+        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, inset 0 -1px 0 rgba(217, 217, 217, 0.75), 0 1px 2px rgba(0, 0, 0, 0.07);
+        background-image: linear-gradient(to top, #ffffff, white 1px); }
+      notebook > header.top > tabs > tab:checked,
+      notebook > header.top > tabs > tab.reorderable-page:checked, notebook > header.bottom > tabs > tab:checked,
+      notebook > header.bottom > tabs > tab.reorderable-page:checked, notebook > header.left > tabs > tab:checked,
+      notebook > header.left > tabs > tab.reorderable-page:checked, notebook > header.right > tabs > tab:checked,
+      notebook > header.right > tabs > tab.reorderable-page:checked {
+        color: #5c616c;
+        outline-color: rgba(92, 97, 108, 0.3);
+        border-color: #d9d9d9;
+        border-bottom-color: #c2c2c2;
+        background-image: linear-gradient(to top, whitesmoke 2px, #ffffff);
+        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, inset 0 -1px 0 rgba(217, 217, 217, 0.75), 0 1px 2px rgba(0, 0, 0, 0.07);
+        background: #fafafa; }
+        notebook > header.top > tabs > tab:checked:backdrop,
+        notebook > header.top > tabs > tab.reorderable-page:checked:backdrop, notebook > header.bottom > tabs > tab:checked:backdrop,
+        notebook > header.bottom > tabs > tab.reorderable-page:checked:backdrop, notebook > header.left > tabs > tab:checked:backdrop,
+        notebook > header.left > tabs > tab.reorderable-page:checked:backdrop, notebook > header.right > tabs > tab:checked:backdrop,
+        notebook > header.right > tabs > tab.reorderable-page:checked:backdrop {
+          color: #aeb0b6;
+          border-color: #e0e0e0;
+          background-image: image(#ffffff);
+          text-shadow: none;
+          -gtk-icon-shadow: none;
+          box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+  notebook > header.top {
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
+  notebook > header.bottom {
+    background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
+  notebook > header.right {
+    background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
+  notebook > header.left {
+    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, 0.05) calc(100% - 1px), rgba(0, 0, 0, 0.15)); }
+  notebook > header tab {
+    border-radius: 4px;
+    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    min-height: 24px; }
+    notebook > header tab button.flat {
+      margin-top: 1px;
+      margin-bottom: 1px; }
+
 /**************
  * GtkInfoBar *
  **************/

src/themes/Kali/sass/gtk-sass/_common-tweaks.scss

@@ -214,6 +214,74 @@ popover.background {
   .csd &, & { border-color: if($variant=='light', transparentize(black, 0.9), transparentize($borders_color, 0.25)); }
 }
 
+/*************
+ * Notebooks *
+ *************/
+notebook {
+  > header {
+    border: 0;
+    padding: 0;
+    background-color: $dark_fill;
+
+    &.top,
+    &.bottom,
+    &.left,
+    &.right {
+      > tabs {
+        margin: 0;
+
+        > tab,
+        > tab.reorderable-page {
+          border: 1px solid transparent;
+          margin: 3px;
+
+          &:hover { @include button(hover); }
+
+          &:checked {
+            @include button(normal);
+            background: $base_color;
+
+            &:backdrop { @include button(backdrop); }
+          }
+        }
+      }
+    }
+
+    $gradient:
+      rgba(black, 0),
+      rgba(black, 0) calc(100% - 2px),
+      rgba(black, 0.05) calc(100% - 1px),
+      rgba(black, 0.15);
+
+    &.top {
+      background-image: linear-gradient(to bottom, $gradient);
+    }
+
+    &.bottom {
+      background-image: linear-gradient(to top, $gradient);
+    }
+
+    &.right {
+      background-image: linear-gradient(to left, $gradient);
+    }
+
+    &.left {
+      background-image: linear-gradient(to right, $gradient);
+    }
+
+    tab {
+      border-radius: $button_radius - 1px;
+      transition: $button_transition;
+      min-height: 24px;
+
+      button.flat {
+        margin-top: 1px;
+        margin-bottom: 1px;
+      }
+    }
+  }
+}
+
 /**************
  * GtkInfoBar *
  **************/