CSS: Style tabs for incognito window

2 files changed, 65 insertions, 3 deletions

diff --git a/src/resources/themes/_Adwaita-base.scss b/src/resources/themes/_Adwaita-base.scss
index 284d2d8a2..52b729d75 100644
--- a/src/resources/themes/_Adwaita-base.scss
+++ b/src/resources/themes/_Adwaita-base.scss
@@ -12,7 +12,7 @@
     &:backdrop {
       background-image: -gtk-icontheme($incognito_icon), image($incognito_color);
       box-shadow: inset 0 1px $incognito_edge_color;
-      color: transparentize($backdrop_fg_color, 0.9); // color of the overlayed icon in backdrop
+      color: transparentize($incognito_backdrop_fg_color, 0.9); // color of the overlayed icon in backdrop
     }
   }
 
@@ -24,11 +24,63 @@
     }
   }
 
-  headerbar, actionbar {
+  notebook > header {
+    border-color: $incognito_borders_color;
+    background-color: $incognito_dark_fill;
+
+    &:backdrop {
+      border-color: $incognito_backdrop_borders_color;
+      background-color: $incognito_backdrop_dark_fill;
+    }
+
+    > tabs > tab {
+      color: $incognito_insensitive_fg_color;
+
+      button.flat {
+        &:hover { color: currentColor; }
+        &, &:backdrop { color: gtkalpha(currentColor, 0.3); }
+      }
+
+      &:hover {
+        color: mix($incognito_insensitive_fg_color, $fg_color, 50%);
+        border-color: transparentize($incognito_borders_color, 0.7);
+        background-color: transparentize($incognito_color, 0.8);
+        box-shadow: inset 0 -3px $incognito_borders_color;
+      }
+
+      &:backdrop {
+        color: mix($incognito_backdrop_fg_color, $incognito_backdrop_bg_color, 60%);
+        border-color: transparent;
+        background-color: transparent;
+        box-shadow: none;
+      }
+
+      &:checked {
+        color: $fg_color;
+        border-color: transparentize($incognito_borders_color, 0.5);
+        background-color: transparentize($incognito_color, 0.5);
+        box-shadow: inset 0 -3px $selected_bg_color;
+
+        &:hover { background-color: transparentize($incognito_color, 0.3); }
+      }
+
+      &:backdrop:checked {
+        color: $incognito_backdrop_fg_color;
+        border-color: $incognito_backdrop_borders_color;
+        background-color: $incognito_backdrop_bg_color;
+      }
+    }
+
+    > tabs > arrow:active {
+      @include button(active, $incognito_color);
+    }
+  }
+
+  headerbar, actionbar, notebook > header {
     > * {
       color: $fg_color;
 
-      &:backdrop { color: $backdrop_fg_color }
+      &:backdrop { color: $incognito_backdrop_fg_color }
     }
 
     button { // changing the headerbar background color requires changing widget borders accordingly
diff --git a/src/resources/themes/_definitions.scss b/src/resources/themes/_definitions.scss
index 14cf00022..4885f482c 100644
--- a/src/resources/themes/_definitions.scss
+++ b/src/resources/themes/_definitions.scss
@@ -8,6 +8,12 @@ $incognito_color: lighten($incognito_base_color, 5%);
 $incognito_icon: 'user-not-tracked-symbolic';
 $incognito_edge_color: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
 $incognito_borders_color: if($variant == 'light', darken($incognito_color, 11%), darken($incognito_color, 5%));
+$incognito_dark_fill: mix($incognito_borders_color, $incognito_color, 50%);
+$incognito_insensitive_fg_color: mix($fg_color, $incognito_color, 50%);
+$incognito_backdrop_bg_color: $incognito_color;
+$incognito_backdrop_fg_color: mix($fg_color, $incognito_backdrop_bg_color, 50%);
+$incognito_backdrop_borders_color: mix($incognito_borders_color, $incognito_color, 80%);
+$incognito_backdrop_dark_fill: mix($incognito_backdrop_borders_color, $incognito_backdrop_bg_color, 35%);
 
 // automation mode
 $automation_color: #ff9600;
@@ -18,3 +24,7 @@ $automation_edge_color: lighten($automation_color, 13%);
 @function themecolor($s) {
   @return unquote("@" + "#{$s}");
 }
+
+@function gtkalpha($c,$a) {
+  @return unquote("alpha(#{$c},#{$a})");
+}