[epiphany/wip/exalm/tabs: 27/30] Add incognito style

[Alexander Mikhaylenko <alexm src gnome org>]

commit 11e69458bf706c9fba11a00156aad2d7123f9508
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Wed Sep 16 18:21:12 2020 +0500

    Add incognito style

 src/resources/themes/_Adwaita-colored-window.scss | 231 +++++++++++++++++-----
 1 file changed, 178 insertions(+), 53 deletions(-)
---
diff --git a/src/resources/themes/_Adwaita-colored-window.scss 
b/src/resources/themes/_Adwaita-colored-window.scss
index 2bf349b78..386fc43c1 100644
--- a/src/resources/themes/_Adwaita-colored-window.scss
+++ b/src/resources/themes/_Adwaita-colored-window.scss
@@ -70,59 +70,7 @@ actionbar {
   }
 }
 
-notebook > header {
-  border-color: $borders_color;
-  background-color: $dark_fill;
-
-  &:backdrop {
-    border-color: $backdrop_borders_color;
-    background-color: $backdrop_dark_fill;
-  }
-
-  > tabs > tab {
-    color: $insensitive_fg_color;
-
-    button.flat {
-      &:hover { color: currentColor; }
-      &, &:backdrop { color: gtkalpha(currentColor, 0.3); }
-    }
-
-    &:hover {
-      color: mix($insensitive_fg_color, $fg_color, 50%);
-      border-color: transparentize($borders_color, 0.7);
-      background-color: transparentize($bg_color, 0.8);
-      box-shadow: inset 0 -3px $borders_color;
-    }
-
-    &:backdrop {
-      color: mix($backdrop_fg_color, $backdrop_bg_color, 60%);
-      border-color: transparent;
-      background-color: transparent;
-      box-shadow: none;
-    }
-
-    &:checked {
-      color: $fg_color;
-      border-color: transparentize($borders_color, 0.5);
-      background-color: transparentize($bg_color, 0.5);
-      box-shadow: inset 0 -3px $selected_bg_color;
-
-      &:hover { background-color: transparentize($bg_color, 0.3); }
-    }
-
-    &:backdrop:checked {
-      color: $backdrop_fg_color;
-      border-color: $backdrop_borders_color;
-      background-color: $backdrop_bg_color;
-    }
-  }
-
-  > tabs > arrow:active {
-    @include button(active);
-  }
-}
-
-headerbar, actionbar, notebook > header {
+headerbar, actionbar {
   > * {
     color: $fg_color;
 
@@ -176,3 +124,180 @@ headerbar, actionbar, notebook > header {
     }
   }
 }
+
+/* FIXME this should be inlined after we finalize the colors */
+
+$tab_selected_bg:           darken($bg_color, 6%);
+$tab_selected_bg_backdrop:  $backdrop_bg_color;
+
+@if $variant == 'dark' {
+  $tab_selected_bg:         $bg_color;
+}
+
+$tab_bg:                    darken($tab_selected_bg, 6%);
+$tab_bg_backdrop:           darken($tab_selected_bg_backdrop, 6%);
+
+$tab_bar_bg:                darken($tab_selected_bg, 9%);
+$tab_bar_bg_backdrop:       darken($tab_selected_bg_backdrop, 9%);
+
+$tab_hover_bg:              lighten($tab_bg, 3%);
+$tab_selected_hover_bg:     lighten($tab_selected_bg, 3%);
+
+$tab_needs_attention_color: $selected_bg_color;
+
+@mixin undershoot-gradient($dir) {
+  $color: black;
+
+  @if $variant == 'dark' {
+    background: linear-gradient(to #{$dir},
+                                transparentize($color, .6),
+                                transparentize($color, 1) 20px);
+  }
+  @else {
+    background: linear-gradient(to #{$dir},
+                                transparentize($color, .93),
+                                transparentize($color, 1) 20px);
+  }
+}
+
+@mixin need-attention-gradient($dir) {
+  background: linear-gradient(to #{$dir},
+                              transparentize($tab_needs_attention_color, .3),
+                              transparentize($tab_needs_attention_color, .5) 1px,
+                              transparentize($tab_needs_attention_color, 1) 20px);
+}
+
+@mixin tab-background($color) {
+  background-color: $color;
+
+  .tab-close-button-scrim {
+    &.left {
+      background: linear-gradient(to left, transparentize($color, 1), $color 18px);
+    }
+
+    &.right {
+      background: linear-gradient(to right, transparentize($color, 1), $color 18px);
+    }
+  }
+}
+
+tabbar {
+  .box {
+    background: $tab_bar_bg;
+    border-bottom: 1px solid $alt_borders_color;
+
+    &:backdrop {
+      background-color: $tab_bar_bg_backdrop;
+      border-color: $backdrop_borders_color;
+    }
+  }
+
+  tabbox.pinned {
+    &:dir(ltr) {
+      padding-right: 1px;
+      box-shadow: inset -1px 0 $alt_borders_color;
+
+      &:backdrop {
+        box-shadow: inset -1px 0 $backdrop_borders_color;
+      }
+    }
+
+    &:dir(rtl) {
+      padding-left: 1px;
+      box-shadow: inset 1px 0 $alt_borders_color;
+
+      &:backdrop {
+        box-shadow: inset 1px 0 $backdrop_borders_color;
+      }
+    }
+  }
+
+  undershoot {
+    &.left {
+      @include undershoot-gradient("right");
+    }
+
+    &.right {
+      @include undershoot-gradient("left");
+    }
+  }
+
+  &.needs-attention-left undershoot.left {
+    @include need-attention-gradient("right");
+  }
+
+  &.needs-attention-right undershoot.right {
+    @include need-attention-gradient("left");
+  }
+
+  tab {
+    border-color: $alt_borders_color;
+    @include tab-background($tab_bg);
+
+    &:checked {
+      @include tab-background($tab_selected_bg);
+
+      &:hover {
+        @include tab-background($tab_selected_hover_bg);
+      }
+    }
+
+    &:hover {
+      @include tab-background($tab_hover_bg);
+    }
+
+    &:backdrop {
+      border-color: $backdrop_borders_color;
+      @include tab-background($tab_bg_backdrop);
+
+      &:checked {
+        @include tab-background($tab_selected_bg_backdrop);
+      }
+    }
+  }
+
+  .start-action,
+  .end-action {
+    background: $tab_bg;
+    border-color: $alt_borders_color;
+
+    &:backdrop {
+      border-color: $backdrop_borders_color;
+      background-color: $tab_bg_backdrop;
+    }
+  }
+}
+
+tabbar {
+  tab {
+    &.needs-attention {
+      background-image:
+        radial-gradient(ellipse at bottom,
+                        transparentize(white, .2),
+                        transparentize($tab_needs_attention_color, .8) 15%,
+                        transparentize($tab_needs_attention_color, 1) 15%);
+    }
+
+    .tab-close-button,
+    .tab-secondary-icon {
+      background: none;
+    }
+
+    .tab-close-button,
+    .tab-secondary-icon.clickable {
+      &:hover {
+        background: hdyalpha($fg_color, .15);
+      }
+
+      &:active {
+        background: hdyalpha(black, .2);
+      }
+    }
+  }
+
+  .tab-close-button-scrim {
+    &.inverted {
+      background: none;
+    }
+  }
+}