[epiphany/wip/exalm/tabs] Add incognito style

From: Alexander Mikhaylenko <alexm src gnome org>
To: commits-list gnome org
Cc:
Subject: [epiphany/wip/exalm/tabs] Add incognito style
Date: Wed, 16 Sep 2020 13:21:32 +0000 (UTC)

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

    Add incognito style

 src/resources/themes/Adwaita-dark.css             | 220 ++++++++++++++-------
 src/resources/themes/Adwaita.css                  | 220 ++++++++++++++-------
 src/resources/themes/HighContrast.css             | 220 ++++++++++++++-------
 src/resources/themes/HighContrastInverse.css      | 220 ++++++++++++++-------
 src/resources/themes/_Adwaita-colored-window.scss | 231 +++++++++++++++++-----
 src/resources/themes/elementary.css               |   2 -
 6 files changed, 794 insertions(+), 319 deletions(-)
---
diff --git a/src/resources/themes/Adwaita-dark.css b/src/resources/themes/Adwaita-dark.css
index 80e2adf7a..f5916b49a 100644
--- a/src/resources/themes/Adwaita-dark.css
+++ b/src/resources/themes/Adwaita-dark.css
@@ -90,7 +90,7 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .draggable.drag-hover-bottom { border-bottom: 1px solid #4e9a06; }
 
-.incognito-mode { /*************************** Check and Radio buttons * */ }
+.incognito-mode { /*************************** Check and Radio buttons * */ /* FIXME this should be inlined 
after we finalize the colors */ }
 
 .incognito-mode headerbar { background: #141927 linear-gradient(to top, #1a2235, #1e263b); box-shadow: inset 
0 1px rgba(231, 234, 243, 0.07); border-color: #06080c; }
 
@@ -108,63 +108,111 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .incognito-mode actionbar:backdrop > revealer > box { border-color: #171d2e; }
 
-.incognito-mode notebook > header { border-color: #141927; background-color: #1c2438; }
+.incognito-mode headerbar > *, .incognito-mode actionbar > * { color: #e7eaf3; }
 
-.incognito-mode notebook > header:backdrop { border-color: #171d2e; background-color: #202940; }
+.incognito-mode headerbar > *:backdrop, .incognito-mode actionbar > *:backdrop { color: #868d9e; }
 
-.incognito-mode notebook > header > tabs > tab { color: #868d9e; }
+.incognito-mode headerbar button, .incognito-mode actionbar button { color: #e7eaf3; outline-color: 
rgba(231, 234, 243, 0.3); border-color: #141927; border-bottom-color: #06080c; background-image: 
linear-gradient(to top, #232d46 2px, #252f49); text-shadow: 0 -1px rgba(0, 0, 0, 0.828235); -gtk-icon-shadow: 
0 -1px rgba(0, 0, 0, 0.828235); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 
0.07); }
 
-.incognito-mode notebook > header > tabs > tab button.flat:hover { color: currentColor; }
+.incognito-mode headerbar button.flat, .incognito-mode headerbar button.titlebutton, .incognito-mode 
actionbar button.flat, .incognito-mode actionbar button.titlebutton { border-color: transparent; 
background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
text-shadow: none; -gtk-icon-shadow: none; }
 
-.incognito-mode notebook > header > tabs > tab button.flat, .incognito-mode notebook > header > tabs > tab 
button.flat:backdrop { color: alpha(currentColor,0.3); }
+.incognito-mode headerbar button.titlebutton, .incognito-mode actionbar button.titlebutton { text-shadow: 0 
-1px rgba(0, 0, 0, 0.828235); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.828235); }
 
-.incognito-mode notebook > header > tabs > tab:hover { color: #b7bcc9; border-color: rgba(20, 25, 39, 0.3); 
background-color: rgba(37, 47, 73, 0.2); box-shadow: inset 0 -3px #141927; }
+.incognito-mode headerbar button:hover, .incognito-mode actionbar button:hover { color: #e7eaf3; 
outline-color: rgba(231, 234, 243, 0.3); border-color: #141927; border-bottom-color: #06080c; text-shadow: 0 
-1px rgba(0, 0, 0, 0.780235); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.780235); box-shadow: inset 0 1px 
rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to top, #232d46, 
#26314c 1px); }
 
-.incognito-mode notebook > header > tabs > tab:backdrop { color: #5f677c; border-color: transparent; 
background-color: transparent; box-shadow: none; }
+.incognito-mode headerbar button:active, .incognito-mode headerbar button:checked, .incognito-mode actionbar 
button:active, .incognito-mode actionbar button:checked { color: #e7eaf3; outline-color: rgba(231, 234, 243, 
0.3); border-color: #141927; background-image: image(#151b2a); box-shadow: inset 0 1px rgba(255, 255, 255, 
0); text-shadow: none; -gtk-icon-shadow: none; }
 
-.incognito-mode notebook > header > tabs > tab:checked { color: #e7eaf3; border-color: rgba(20, 25, 39, 
0.5); background-color: rgba(37, 47, 73, 0.5); box-shadow: inset 0 -3px #15539e; }
+.incognito-mode headerbar button:disabled, .incognito-mode actionbar button:disabled { color: #868d9e; 
border-color: #141927; background-image: image(#252f49); text-shadow: none; -gtk-icon-shadow: none; 
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.incognito-mode notebook > header > tabs > tab:checked:hover { background-color: rgba(37, 47, 73, 0.7); }
+.incognito-mode headerbar button:backdrop, .incognito-mode actionbar button:backdrop { color: #868d9e; 
border-color: #171d2e; background-image: image(#252f49); text-shadow: none; -gtk-icon-shadow: none; 
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.incognito-mode notebook > header > tabs > tab:backdrop:checked { color: #868d9e; border-color: #171d2e; 
background-color: #252f49; }
+.incognito-mode headerbar button:backdrop:active, .incognito-mode actionbar button:backdrop:active { color: 
#868d9e; border-color: #171d2e; background-image: image(#1e263b); box-shadow: inset 0 1px rgba(255, 255, 255, 
0); }
 
-.incognito-mode notebook > header > tabs > arrow:active { color: #e7eaf3; outline-color: rgba(231, 234, 243, 
0.3); border-color: #141927; background-image: image(#151b2a); box-shadow: inset 0 1px rgba(255, 255, 255, 
0); text-shadow: none; -gtk-icon-shadow: none; }
+.incognito-mode headerbar button:backdrop:disabled, .incognito-mode actionbar button:backdrop:disabled { 
color: #3e507c; border-color: #171d2e; background-image: image(#252f49); text-shadow: none; -gtk-icon-shadow: 
none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.incognito-mode headerbar > *, .incognito-mode actionbar > *, .incognito-mode notebook > header > * { color: 
#e7eaf3; }
+.incognito-mode headerbar button:checked, .incognito-mode actionbar button:checked { background: 
image(#151b2a); border-color: #0e131d; border-top-color: #06080c; }
 
-.incognito-mode headerbar > *:backdrop, .incognito-mode actionbar > *:backdrop, .incognito-mode notebook > 
header > *:backdrop { color: #868d9e; }
+.incognito-mode headerbar button:checked:backdrop, .incognito-mode actionbar button:checked:backdrop { 
color: #868d9e; border-color: #171d2e; background-image: image(#1e263b); box-shadow: inset 0 1px rgba(255, 
255, 255, 0); }
 
-.incognito-mode headerbar button, .incognito-mode actionbar button, .incognito-mode notebook > header button 
{ color: #e7eaf3; outline-color: rgba(231, 234, 243, 0.3); border-color: #141927; border-bottom-color: 
#06080c; background-image: linear-gradient(to top, #232d46 2px, #252f49); text-shadow: 0 -1px rgba(0, 0, 0, 
0.828235); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.828235); box-shadow: inset 0 1px rgba(255, 255, 255, 
0.02), 0 1px 2px rgba(0, 0, 0, 0.07); }
+.incognito-mode headerbar button.flat:backdrop, .incognito-mode headerbar button.titlebutton:backdrop, 
.incognito-mode actionbar button.flat:backdrop, .incognito-mode actionbar button.titlebutton:backdrop { 
border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px 
rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
 
-.incognito-mode headerbar button.flat, .incognito-mode headerbar button.titlebutton, .incognito-mode 
actionbar button.flat, .incognito-mode actionbar button.titlebutton, .incognito-mode notebook > header 
button.flat, .incognito-mode notebook > header button.titlebutton { border-color: transparent; 
background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
text-shadow: none; -gtk-icon-shadow: none; }
+.incognito-mode headerbar entry, .incognito-mode actionbar entry { border-color: #141927; }
 
-.incognito-mode headerbar button.titlebutton, .incognito-mode actionbar button.titlebutton, .incognito-mode 
notebook > header button.titlebutton { text-shadow: 0 -1px rgba(0, 0, 0, 0.828235); -gtk-icon-shadow: 0 -1px 
rgba(0, 0, 0, 0.828235); }
+.incognito-mode headerbar entry:focus, .incognito-mode actionbar entry:focus { border-color: #030c17; 
box-shadow: inset 0 0 0 1px #15539e; }
 
-.incognito-mode headerbar button:hover, .incognito-mode actionbar button:hover, .incognito-mode notebook > 
header button:hover { color: #e7eaf3; outline-color: rgba(231, 234, 243, 0.3); border-color: #141927; 
border-bottom-color: #06080c; text-shadow: 0 -1px rgba(0, 0, 0, 0.780235); -gtk-icon-shadow: 0 -1px rgba(0, 
0, 0, 0.780235); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); 
background-image: linear-gradient(to top, #232d46, #26314c 1px); }
+.incognito-mode headerbar entry:backdrop, .incognito-mode actionbar entry:backdrop { box-shadow: none; 
border-color: #171d2e; }
 
-.incognito-mode headerbar button:active, .incognito-mode headerbar button:checked, .incognito-mode actionbar 
button:active, .incognito-mode actionbar button:checked, .incognito-mode notebook > header button:active, 
.incognito-mode notebook > header button:checked { color: #e7eaf3; outline-color: rgba(231, 234, 243, 0.3); 
border-color: #141927; background-image: image(#151b2a); box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
text-shadow: none; -gtk-icon-shadow: none; }
+.incognito-mode tabbar .box { background: #151b2a; border-bottom: 1px solid #06080c; }
 
-.incognito-mode headerbar button:disabled, .incognito-mode actionbar button:disabled, .incognito-mode 
notebook > header button:disabled { color: #868d9e; border-color: #141927; background-image: image(#252f49); 
text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.incognito-mode tabbar .box:backdrop { background-color: #151b2a; border-color: #171d2e; }
 
-.incognito-mode headerbar button:backdrop, .incognito-mode actionbar button:backdrop, .incognito-mode 
notebook > header button:backdrop { color: #868d9e; border-color: #171d2e; background-image: image(#252f49); 
text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.incognito-mode tabbar tabbox.pinned:dir(ltr) { padding-right: 1px; box-shadow: inset -1px 0 #06080c; }
 
-.incognito-mode headerbar button:backdrop:active, .incognito-mode actionbar button:backdrop:active, 
.incognito-mode notebook > header button:backdrop:active { color: #868d9e; border-color: #171d2e; 
background-image: image(#1e263b); box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.incognito-mode tabbar tabbox.pinned:dir(ltr):backdrop { box-shadow: inset -1px 0 #171d2e; }
 
-.incognito-mode headerbar button:backdrop:disabled, .incognito-mode actionbar button:backdrop:disabled, 
.incognito-mode notebook > header button:backdrop:disabled { color: #3e507c; border-color: #171d2e; 
background-image: image(#252f49); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px 
rgba(255, 255, 255, 0); }
+.incognito-mode tabbar tabbox.pinned:dir(rtl) { padding-left: 1px; box-shadow: inset 1px 0 #06080c; }
 
-.incognito-mode headerbar button:checked, .incognito-mode actionbar button:checked, .incognito-mode notebook

header button:checked { background: image(#151b2a); border-color: #0e131d; border-top-color: #06080c; }

+.incognito-mode tabbar tabbox.pinned:dir(rtl):backdrop { box-shadow: inset 1px 0 #171d2e; }
 
-.incognito-mode headerbar button:checked:backdrop, .incognito-mode actionbar button:checked:backdrop, 
.incognito-mode notebook > header button:checked:backdrop { color: #868d9e; border-color: #171d2e; 
background-image: image(#1e263b); box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.incognito-mode tabbar undershoot.left { background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 
0, 0, 0) 20px); }
 
-.incognito-mode headerbar button.flat:backdrop, .incognito-mode headerbar button.titlebutton:backdrop, 
.incognito-mode actionbar button.flat:backdrop, .incognito-mode actionbar button.titlebutton:backdrop, 
.incognito-mode notebook > header button.flat:backdrop, .incognito-mode notebook > header 
button.titlebutton:backdrop { border-color: transparent; background-color: transparent; background-image: 
none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
+.incognito-mode tabbar undershoot.right { background: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 
0, 0, 0) 20px); }
 
-.incognito-mode headerbar entry, .incognito-mode actionbar entry, .incognito-mode notebook > header entry { 
border-color: #141927; }
+.incognito-mode tabbar.needs-attention-left undershoot.left { background: linear-gradient(to right, rgba(21, 
83, 158, 0.7), rgba(21, 83, 158, 0.5) 1px, rgba(21, 83, 158, 0) 20px); }
 
-.incognito-mode headerbar entry:focus, .incognito-mode actionbar entry:focus, .incognito-mode notebook > 
header entry:focus { border-color: #030c17; box-shadow: inset 0 0 0 1px #15539e; }
+.incognito-mode tabbar.needs-attention-right undershoot.right { background: linear-gradient(to left, 
rgba(21, 83, 158, 0.7), rgba(21, 83, 158, 0.5) 1px, rgba(21, 83, 158, 0) 20px); }
 
-.incognito-mode headerbar entry:backdrop, .incognito-mode actionbar entry:backdrop, .incognito-mode notebook

header entry:backdrop { box-shadow: none; border-color: #171d2e; }

+.incognito-mode tabbar tab { border-color: #06080c; background-color: #1a2235; }
 
-.automation-mode { /*************************** Check and Radio buttons * */ }
+.incognito-mode tabbar tab .tab-close-button-scrim.left { background: linear-gradient(to left, rgba(26, 34, 
53, 0), #1a2235 18px); }
+
+.incognito-mode tabbar tab .tab-close-button-scrim.right { background: linear-gradient(to right, rgba(26, 
34, 53, 0), #1a2235 18px); }
+
+.incognito-mode tabbar tab:checked { background-color: #252f49; }
+
+.incognito-mode tabbar tab:checked .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(37, 47, 73, 0), #252f49 18px); }
+
+.incognito-mode tabbar tab:checked .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(37, 47, 73, 0), #252f49 18px); }
+
+.incognito-mode tabbar tab:checked:hover { background-color: #2a3553; }
+
+.incognito-mode tabbar tab:checked:hover .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(42, 53, 83, 0), #2a3553 18px); }
+
+.incognito-mode tabbar tab:checked:hover .tab-close-button-scrim.right { background: linear-gradient(to 
right, rgba(42, 53, 83, 0), #2a3553 18px); }
+
+.incognito-mode tabbar tab:hover { background-color: #1f283f; }
+
+.incognito-mode tabbar tab:hover .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(31, 40, 63, 0), #1f283f 18px); }
+
+.incognito-mode tabbar tab:hover .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(31, 40, 63, 0), #1f283f 18px); }
+
+.incognito-mode tabbar tab:backdrop { border-color: #171d2e; background-color: #1a2235; }
+
+.incognito-mode tabbar tab:backdrop .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(26, 34, 53, 0), #1a2235 18px); }
+
+.incognito-mode tabbar tab:backdrop .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(26, 34, 53, 0), #1a2235 18px); }
+
+.incognito-mode tabbar tab:backdrop:checked { background-color: #252f49; }
+
+.incognito-mode tabbar tab:backdrop:checked .tab-close-button-scrim.left { background: linear-gradient(to 
left, rgba(37, 47, 73, 0), #252f49 18px); }
+
+.incognito-mode tabbar tab:backdrop:checked .tab-close-button-scrim.right { background: linear-gradient(to 
right, rgba(37, 47, 73, 0), #252f49 18px); }
+
+.incognito-mode tabbar .start-action, .incognito-mode tabbar .end-action { background: #1a2235; 
border-color: #06080c; }
+
+.incognito-mode tabbar .start-action:backdrop, .incognito-mode tabbar .end-action:backdrop { border-color: 
#171d2e; background-color: #1a2235; }
+
+.incognito-mode tabbar tab.needs-attention { background-image: radial-gradient(ellipse at bottom, rgba(255, 
255, 255, 0.8), rgba(21, 83, 158, 0.2) 15%, rgba(21, 83, 158, 0) 15%); }
+
+.incognito-mode tabbar tab .tab-close-button, .incognito-mode tabbar tab .tab-secondary-icon { background: 
none; }
+
+.incognito-mode tabbar tab .tab-close-button:hover, .incognito-mode tabbar tab 
.tab-secondary-icon.clickable:hover { background: hdyalpha(#e7eaf3, 0.15); }
+
+.incognito-mode tabbar tab .tab-close-button:active, .incognito-mode tabbar tab 
.tab-secondary-icon.clickable:active { background: hdyalpha(black, 0.2); }
+
+.incognito-mode tabbar .tab-close-button-scrim.inverted { background: none; }
+
+.automation-mode { /*************************** Check and Radio buttons * */ /* FIXME this should be inlined 
after we finalize the colors */ }
 
 .automation-mode headerbar { background: #e68700 linear-gradient(to top, #fa9300, #ff9805); box-shadow: 
inset 0 1px rgba(255, 240, 219, 0.07); border-color: #bd6f00; }
 
@@ -182,61 +230,109 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .automation-mode actionbar:backdrop > revealer > box { border-color: #eb8c05; }
 
-.automation-mode notebook > header { border-color: #e68700; background-color: #f2940d; }
+.automation-mode headerbar > *, .automation-mode actionbar > * { color: #fff0db; }
+
+.automation-mode headerbar > *:backdrop, .automation-mode actionbar > *:backdrop { color: #ffc87a; }
+
+.automation-mode headerbar button, .automation-mode actionbar button { color: #fff0db; outline-color: 
rgba(255, 240, 219, 0.3); border-color: #e68700; border-bottom-color: #bd6f00; background-image: 
linear-gradient(to top, #ff9e14 2px, #ffa11a); text-shadow: 0 -1px rgba(0, 0, 0, 0.56); -gtk-icon-shadow: 0 
-1px rgba(0, 0, 0, 0.56); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); }
 
-.automation-mode notebook > header:backdrop { border-color: #eb8c05; background-color: #f89912; }
+.automation-mode headerbar button.flat, .automation-mode headerbar button.titlebutton, .automation-mode 
actionbar button.flat, .automation-mode actionbar button.titlebutton { border-color: transparent; 
background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
text-shadow: none; -gtk-icon-shadow: none; }
 
-.automation-mode notebook > header > tabs > tab { color: #ffc87a; }
+.automation-mode headerbar button.titlebutton, .automation-mode actionbar button.titlebutton { text-shadow: 
0 -1px rgba(0, 0, 0, 0.56); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.56); }
 
-.automation-mode notebook > header > tabs > tab button.flat:hover { color: currentColor; }
+.automation-mode headerbar button:hover, .automation-mode actionbar button:hover { color: #fff0db; 
outline-color: rgba(255, 240, 219, 0.3); border-color: #e68700; border-bottom-color: #bd6f00; text-shadow: 0 
-1px rgba(0, 0, 0, 0.512); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.512); box-shadow: inset 0 1px rgba(255, 
255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to top, #ff9e14, #ffa31f 
1px); }
 
-.automation-mode notebook > header > tabs > tab button.flat, .automation-mode notebook > header > tabs > tab 
button.flat:backdrop { color: alpha(currentColor,0.3); }
+.automation-mode headerbar button:active, .automation-mode headerbar button:checked, .automation-mode 
actionbar button:active, .automation-mode actionbar button:checked { color: #fff0db; outline-color: rgba(255, 
240, 219, 0.3); border-color: #e68700; background-image: image(#eb8a00); box-shadow: inset 0 1px rgba(255, 
255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
 
-.automation-mode notebook > header > tabs > tab:hover { color: #ffdcab; border-color: rgba(230, 135, 0, 
0.3); background-color: rgba(255, 161, 26, 0.2); box-shadow: inset 0 -3px #e68700; }
+.automation-mode headerbar button:disabled, .automation-mode actionbar button:disabled { color: #ffc87a; 
border-color: #e68700; background-image: image(#ffa11a); text-shadow: none; -gtk-icon-shadow: none; 
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.automation-mode notebook > header > tabs > tab:backdrop { color: #ffb853; border-color: transparent; 
background-color: transparent; box-shadow: none; }
+.automation-mode headerbar button:backdrop, .automation-mode actionbar button:backdrop { color: #ffc87a; 
border-color: #eb8c05; background-image: image(#ffa11a); text-shadow: none; -gtk-icon-shadow: none; 
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.automation-mode notebook > header > tabs > tab:checked { color: #fff0db; border-color: rgba(230, 135, 0, 
0.5); background-color: rgba(255, 161, 26, 0.5); box-shadow: inset 0 -3px #15539e; }
+.automation-mode headerbar button:backdrop:active, .automation-mode actionbar button:backdrop:active { 
color: #ffc87a; border-color: #eb8c05; background-image: image(#ff9906); box-shadow: inset 0 1px rgba(255, 
255, 255, 0); }
 
-.automation-mode notebook > header > tabs > tab:checked:hover { background-color: rgba(255, 161, 26, 0.7); }
+.automation-mode headerbar button:backdrop:disabled, .automation-mode actionbar button:backdrop:disabled { 
color: #ffc066; border-color: #eb8c05; background-image: image(#ffa11a); text-shadow: none; -gtk-icon-shadow: 
none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.automation-mode notebook > header > tabs > tab:backdrop:checked { color: #ffc87a; border-color: #eb8c05; 
background-color: #ffa11a; }
+.automation-mode headerbar button:checked, .automation-mode actionbar button:checked { background: 
image(#eb8a00); border-color: #d67e00; border-top-color: #bd6f00; }
 
-.automation-mode notebook > header > tabs > arrow:active { color: #fff0db; outline-color: rgba(255, 240, 
219, 0.3); border-color: #e68700; background-image: image(#eb8a00); box-shadow: inset 0 1px rgba(255, 255, 
255, 0); text-shadow: none; -gtk-icon-shadow: none; }
+.automation-mode headerbar button:checked:backdrop, .automation-mode actionbar button:checked:backdrop { 
color: #ffc87a; border-color: #eb8c05; background-image: image(#ff9906); box-shadow: inset 0 1px rgba(255, 
255, 255, 0); }
 
-.automation-mode headerbar > *, .automation-mode actionbar > *, .automation-mode notebook > header > * { 
color: #fff0db; }
+.automation-mode headerbar button.flat:backdrop, .automation-mode headerbar button.titlebutton:backdrop, 
.automation-mode actionbar button.flat:backdrop, .automation-mode actionbar button.titlebutton:backdrop { 
border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px 
rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
 
-.automation-mode headerbar > *:backdrop, .automation-mode actionbar > *:backdrop, .automation-mode notebook

header > *:backdrop { color: #ffc87a; }

+.automation-mode headerbar entry, .automation-mode actionbar entry { border-color: #e68700; }
 
-.automation-mode headerbar button, .automation-mode actionbar button, .automation-mode notebook > header 
button { color: #fff0db; outline-color: rgba(255, 240, 219, 0.3); border-color: #e68700; border-bottom-color: 
#bd6f00; background-image: linear-gradient(to top, #ff9e14 2px, #ffa11a); text-shadow: 0 -1px rgba(0, 0, 0, 
0.56); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.56); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 
2px rgba(0, 0, 0, 0.07); }
+.automation-mode headerbar entry:focus, .automation-mode actionbar entry:focus { border-color: #030c17; 
box-shadow: inset 0 0 0 1px #15539e; }
 
-.automation-mode headerbar button.flat, .automation-mode headerbar button.titlebutton, .automation-mode 
actionbar button.flat, .automation-mode actionbar button.titlebutton, .automation-mode notebook > header 
button.flat, .automation-mode notebook > header button.titlebutton { border-color: transparent; 
background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
text-shadow: none; -gtk-icon-shadow: none; }
+.automation-mode headerbar entry:backdrop, .automation-mode actionbar entry:backdrop { box-shadow: none; 
border-color: #eb8c05; }
 
-.automation-mode headerbar button.titlebutton, .automation-mode actionbar button.titlebutton, 
.automation-mode notebook > header button.titlebutton { text-shadow: 0 -1px rgba(0, 0, 0, 0.56); 
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.56); }
+.automation-mode tabbar .box { background: #eb8a00; border-bottom: 1px solid #bd6f00; }
 
-.automation-mode headerbar button:hover, .automation-mode actionbar button:hover, .automation-mode notebook

header button:hover { color: #fff0db; outline-color: rgba(255, 240, 219, 0.3); border-color: #e68700;

border-bottom-color: #bd6f00; text-shadow: 0 -1px rgba(0, 0, 0, 0.512); -gtk-icon-shadow: 0 -1px rgba(0, 0, 
0, 0.512); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); background-image: 
linear-gradient(to top, #ff9e14, #ffa31f 1px); }
+.automation-mode tabbar .box:backdrop { background-color: #eb8a00; border-color: #eb8c05; }
 
-.automation-mode headerbar button:active, .automation-mode headerbar button:checked, .automation-mode 
actionbar button:active, .automation-mode actionbar button:checked, .automation-mode notebook > header 
button:active, .automation-mode notebook > header button:checked { color: #fff0db; outline-color: rgba(255, 
240, 219, 0.3); border-color: #e68700; background-image: image(#eb8a00); box-shadow: inset 0 1px rgba(255, 
255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
+.automation-mode tabbar tabbox.pinned:dir(ltr) { padding-right: 1px; box-shadow: inset -1px 0 #bd6f00; }
 
-.automation-mode headerbar button:disabled, .automation-mode actionbar button:disabled, .automation-mode 
notebook > header button:disabled { color: #ffc87a; border-color: #e68700; background-image: image(#ffa11a); 
text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.automation-mode tabbar tabbox.pinned:dir(ltr):backdrop { box-shadow: inset -1px 0 #eb8c05; }
 
-.automation-mode headerbar button:backdrop, .automation-mode actionbar button:backdrop, .automation-mode 
notebook > header button:backdrop { color: #ffc87a; border-color: #eb8c05; background-image: image(#ffa11a); 
text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.automation-mode tabbar tabbox.pinned:dir(rtl) { padding-left: 1px; box-shadow: inset 1px 0 #bd6f00; }
 
-.automation-mode headerbar button:backdrop:active, .automation-mode actionbar button:backdrop:active, 
.automation-mode notebook > header button:backdrop:active { color: #ffc87a; border-color: #eb8c05; 
background-image: image(#ff9906); box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.automation-mode tabbar tabbox.pinned:dir(rtl):backdrop { box-shadow: inset 1px 0 #eb8c05; }
 
-.automation-mode headerbar button:backdrop:disabled, .automation-mode actionbar button:backdrop:disabled, 
.automation-mode notebook > header button:backdrop:disabled { color: #ffc066; border-color: #eb8c05; 
background-image: image(#ffa11a); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px 
rgba(255, 255, 255, 0); }
+.automation-mode tabbar undershoot.left { background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 
0, 0, 0) 20px); }
 
-.automation-mode headerbar button:checked, .automation-mode actionbar button:checked, .automation-mode 
notebook > header button:checked { background: image(#eb8a00); border-color: #d67e00; border-top-color: 
#bd6f00; }
+.automation-mode tabbar undershoot.right { background: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 
0, 0, 0) 20px); }
 
-.automation-mode headerbar button:checked:backdrop, .automation-mode actionbar button:checked:backdrop, 
.automation-mode notebook > header button:checked:backdrop { color: #ffc87a; border-color: #eb8c05; 
background-image: image(#ff9906); box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.automation-mode tabbar.needs-attention-left undershoot.left { background: linear-gradient(to right, 
rgba(21, 83, 158, 0.7), rgba(21, 83, 158, 0.5) 1px, rgba(21, 83, 158, 0) 20px); }
 
-.automation-mode headerbar button.flat:backdrop, .automation-mode headerbar button.titlebutton:backdrop, 
.automation-mode actionbar button.flat:backdrop, .automation-mode actionbar button.titlebutton:backdrop, 
.automation-mode notebook > header button.flat:backdrop, .automation-mode notebook > header 
button.titlebutton:backdrop { border-color: transparent; background-color: transparent; background-image: 
none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
+.automation-mode tabbar.needs-attention-right undershoot.right { background: linear-gradient(to left, 
rgba(21, 83, 158, 0.7), rgba(21, 83, 158, 0.5) 1px, rgba(21, 83, 158, 0) 20px); }
 
-.automation-mode headerbar entry, .automation-mode actionbar entry, .automation-mode notebook > header entry 
{ border-color: #e68700; }
+.automation-mode tabbar tab { border-color: #bd6f00; background-color: #fa9300; }
 
-.automation-mode headerbar entry:focus, .automation-mode actionbar entry:focus, .automation-mode notebook > 
header entry:focus { border-color: #030c17; box-shadow: inset 0 0 0 1px #15539e; }
+.automation-mode tabbar tab .tab-close-button-scrim.left { background: linear-gradient(to left, rgba(250, 
147, 0, 0), #fa9300 18px); }
 
-.automation-mode headerbar entry:backdrop, .automation-mode actionbar entry:backdrop, .automation-mode 
notebook > header entry:backdrop { box-shadow: none; border-color: #eb8c05; }
+.automation-mode tabbar tab .tab-close-button-scrim.right { background: linear-gradient(to right, rgba(250, 
147, 0, 0), #fa9300 18px); }
+
+.automation-mode tabbar tab:checked { background-color: #ffa11a; }
+
+.automation-mode tabbar tab:checked .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(255, 161, 26, 0), #ffa11a 18px); }
+
+.automation-mode tabbar tab:checked .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(255, 161, 26, 0), #ffa11a 18px); }
+
+.automation-mode tabbar tab:checked:hover { background-color: #ffa729; }
+
+.automation-mode tabbar tab:checked:hover .tab-close-button-scrim.left { background: linear-gradient(to 
left, rgba(255, 167, 41, 0), #ffa729 18px); }
+
+.automation-mode tabbar tab:checked:hover .tab-close-button-scrim.right { background: linear-gradient(to 
right, rgba(255, 167, 41, 0), #ffa729 18px); }
+
+.automation-mode tabbar tab:hover { background-color: #ff9a0a; }
+
+.automation-mode tabbar tab:hover .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(255, 154, 10, 0), #ff9a0a 18px); }
+
+.automation-mode tabbar tab:hover .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(255, 154, 10, 0), #ff9a0a 18px); }
+
+.automation-mode tabbar tab:backdrop { border-color: #eb8c05; background-color: #fa9300; }
+
+.automation-mode tabbar tab:backdrop .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(250, 147, 0, 0), #fa9300 18px); }
+
+.automation-mode tabbar tab:backdrop .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(250, 147, 0, 0), #fa9300 18px); }
+
+.automation-mode tabbar tab:backdrop:checked { background-color: #ffa11a; }
+
+.automation-mode tabbar tab:backdrop:checked .tab-close-button-scrim.left { background: linear-gradient(to 
left, rgba(255, 161, 26, 0), #ffa11a 18px); }
+
+.automation-mode tabbar tab:backdrop:checked .tab-close-button-scrim.right { background: linear-gradient(to 
right, rgba(255, 161, 26, 0), #ffa11a 18px); }
+
+.automation-mode tabbar .start-action, .automation-mode tabbar .end-action { background: #fa9300; 
border-color: #bd6f00; }
+
+.automation-mode tabbar .start-action:backdrop, .automation-mode tabbar .end-action:backdrop { border-color: 
#eb8c05; background-color: #fa9300; }
+
+.automation-mode tabbar tab.needs-attention { background-image: radial-gradient(ellipse at bottom, rgba(255, 
255, 255, 0.8), rgba(21, 83, 158, 0.2) 15%, rgba(21, 83, 158, 0) 15%); }
+
+.automation-mode tabbar tab .tab-close-button, .automation-mode tabbar tab .tab-secondary-icon { background: 
none; }
+
+.automation-mode tabbar tab .tab-close-button:hover, .automation-mode tabbar tab 
.tab-secondary-icon.clickable:hover { background: hdyalpha(#fff0db, 0.15); }
+
+.automation-mode tabbar tab .tab-close-button:active, .automation-mode tabbar tab 
.tab-secondary-icon.clickable:active { background: hdyalpha(black, 0.2); }
+
+.automation-mode tabbar .tab-close-button-scrim.inverted { background: none; }
 
 /*************************** Check and Radio buttons * */
 .url_entry:not(:hover):not(:focus) { background-color: rgba(45, 45, 45, 0.75); }
@@ -291,14 +387,6 @@ row.narrow .page-row-close-button image { padding: 6px; }
 
 .epiphany-downloads-button-needs-attention-multiple { animation: needs_attention_keyframes 3s ease-in-out; 
animation-iteration-count: 3; }
 
-.main-notebook tab { min-width: 16px; }
-
-.main-notebook header.top tab, .main-notebook header.bottom tab { border-style: none solid; }
-
-.main-notebook header.left tab, .main-notebook header.right tab { border-style: solid none; }
-
-.tab-attention { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#1f76e1), 
to(transparent)); }
-
 #title-box-container { color: alpha(@theme_fg_color,0.2); }
 
 #title-box-container > clamp { color: @theme_fg_color; }
diff --git a/src/resources/themes/Adwaita.css b/src/resources/themes/Adwaita.css
index b29415315..02e85f9af 100644
--- a/src/resources/themes/Adwaita.css
+++ b/src/resources/themes/Adwaita.css
@@ -90,7 +90,7 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .draggable.drag-hover-bottom { border-bottom: 1px solid #4e9a06; }
 
-.incognito-mode { /*************************** Check and Radio buttons * */ }
+.incognito-mode { /*************************** Check and Radio buttons * */ /* FIXME this should be inlined 
after we finalize the colors */ }
 
 .incognito-mode headerbar { background: #c4d6e9 linear-gradient(to top, #bdd1e6, #c8d9ea); box-shadow: inset 
0 1px rgba(255, 255, 255, 0.8); border-color: #91b2d6; }
 
@@ -108,63 +108,111 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .incognito-mode actionbar:backdrop > revealer > box { border-color: #b4cbe3; }
 
-.incognito-mode notebook > header { border-color: #a7c1de; background-color: #c8d9ea; }
+.incognito-mode headerbar > *, .incognito-mode actionbar > * { color: #1b3149; }
 
-.incognito-mode notebook > header:backdrop { border-color: #b4cbe3; background-color: #d7e3f0; }
+.incognito-mode headerbar > *:backdrop, .incognito-mode actionbar > *:backdrop { color: #8291a0; }
 
-.incognito-mode notebook > header > tabs > tab { color: #8291a0; }
+.incognito-mode headerbar button, .incognito-mode actionbar button { color: #1b3149; outline-color: rgba(27, 
49, 73, 0.3); border-color: #a7c1de; border-bottom-color: #91b2d6; background-image: linear-gradient(to top, 
#dbe6f1 2px, #eaf0f7); 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 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.07); }
 
-.incognito-mode notebook > header > tabs > tab button.flat:hover { color: currentColor; }
+.incognito-mode headerbar button.flat, .incognito-mode headerbar button.titlebutton, .incognito-mode 
actionbar button.flat, .incognito-mode actionbar button.titlebutton { border-color: transparent; 
background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
text-shadow: none; -gtk-icon-shadow: none; }
 
-.incognito-mode notebook > header > tabs > tab button.flat, .incognito-mode notebook > header > tabs > tab 
button.flat:backdrop { color: alpha(currentColor,0.3); }
+.incognito-mode headerbar button.titlebutton, .incognito-mode actionbar button.titlebutton { text-shadow: 0 
1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); }
 
-.incognito-mode notebook > header > tabs > tab:hover { color: #4f6174; border-color: rgba(167, 193, 222, 
0.3); background-color: rgba(234, 240, 247, 0.2); box-shadow: inset 0 -3px #a7c1de; }
+.incognito-mode headerbar button:hover, .incognito-mode actionbar button:hover { color: #1b3149; 
outline-color: rgba(27, 49, 73, 0.3); border-color: #a7c1de; border-bottom-color: #91b2d6; 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, 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to top, #eaf0f7, #edf3f8 1px); }
 
-.incognito-mode notebook > header > tabs > tab:backdrop { color: #abb7c3; border-color: transparent; 
background-color: transparent; box-shadow: none; }
+.incognito-mode headerbar button:active, .incognito-mode headerbar button:checked, .incognito-mode actionbar 
button:active, .incognito-mode actionbar button:checked { color: #1b3149; outline-color: rgba(27, 49, 73, 
0.3); border-color: #a7c1de; background-image: image(#b6cce3); box-shadow: inset 0 1px rgba(255, 255, 255, 
0); text-shadow: none; -gtk-icon-shadow: none; }
 
-.incognito-mode notebook > header > tabs > tab:checked { color: #1b3149; border-color: rgba(167, 193, 222, 
0.5); background-color: rgba(234, 240, 247, 0.5); box-shadow: inset 0 -3px #3584e4; }
+.incognito-mode headerbar button:disabled, .incognito-mode actionbar button:disabled { color: #8291a0; 
border-color: #a7c1de; background-image: image(#eaf0f7); text-shadow: none; -gtk-icon-shadow: none; 
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.incognito-mode notebook > header > tabs > tab:checked:hover { background-color: rgba(234, 240, 247, 0.7); }
+.incognito-mode headerbar button:backdrop, .incognito-mode actionbar button:backdrop { color: #8291a0; 
border-color: #b4cbe3; background-image: image(#eaf0f7); text-shadow: none; -gtk-icon-shadow: none; 
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.incognito-mode notebook > header > tabs > tab:backdrop:checked { color: #8291a0; border-color: #b4cbe3; 
background-color: #eaf0f7; }
+.incognito-mode headerbar button:backdrop:active, .incognito-mode actionbar button:backdrop:active { color: 
#8291a0; border-color: #b4cbe3; background-image: image(#ccdbec); box-shadow: inset 0 1px rgba(255, 255, 255, 
0); }
 
-.incognito-mode notebook > header > tabs > arrow:active { color: #1b3149; outline-color: rgba(27, 49, 73, 
0.3); border-color: #a7c1de; background-image: image(#b6cce3); box-shadow: inset 0 1px rgba(255, 255, 255, 
0); text-shadow: none; -gtk-icon-shadow: none; }
+.incognito-mode headerbar button:backdrop:disabled, .incognito-mode actionbar button:backdrop:disabled { 
color: #b2c9e2; border-color: #b4cbe3; background-image: image(#eaf0f7); text-shadow: none; -gtk-icon-shadow: 
none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.incognito-mode headerbar > *, .incognito-mode actionbar > *, .incognito-mode notebook > header > * { color: 
#1b3149; }
+.incognito-mode headerbar button:checked, .incognito-mode actionbar button:checked { background: 
image(#aac4df); border-color: #9cb9da; border-top-color: #89acd3; }
 
-.incognito-mode headerbar > *:backdrop, .incognito-mode actionbar > *:backdrop, .incognito-mode notebook > 
header > *:backdrop { color: #8291a0; }
+.incognito-mode headerbar button:checked:backdrop, .incognito-mode actionbar button:checked:backdrop { 
color: #8291a0; border-color: #b4cbe3; background-image: image(#ccdbec); box-shadow: inset 0 1px rgba(255, 
255, 255, 0); }
 
-.incognito-mode headerbar button, .incognito-mode actionbar button, .incognito-mode notebook > header button 
{ color: #1b3149; outline-color: rgba(27, 49, 73, 0.3); border-color: #a7c1de; border-bottom-color: #91b2d6; 
background-image: linear-gradient(to top, #dbe6f1 2px, #eaf0f7); 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 rgba(255, 255, 255, 
0.8), 0 1px 2px rgba(0, 0, 0, 0.07); }
+.incognito-mode headerbar button.flat:backdrop, .incognito-mode headerbar button.titlebutton:backdrop, 
.incognito-mode actionbar button.flat:backdrop, .incognito-mode actionbar button.titlebutton:backdrop { 
border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px 
rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
 
-.incognito-mode headerbar button.flat, .incognito-mode headerbar button.titlebutton, .incognito-mode 
actionbar button.flat, .incognito-mode actionbar button.titlebutton, .incognito-mode notebook > header 
button.flat, .incognito-mode notebook > header button.titlebutton { border-color: transparent; 
background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
text-shadow: none; -gtk-icon-shadow: none; }
+.incognito-mode headerbar entry, .incognito-mode actionbar entry { border-color: #a7c1de; }
 
-.incognito-mode headerbar button.titlebutton, .incognito-mode actionbar button.titlebutton, .incognito-mode 
notebook > header button.titlebutton { text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 
1px rgba(255, 255, 255, 0.769231); }
+.incognito-mode headerbar entry:focus, .incognito-mode actionbar entry:focus { border-color: #3584e4; 
box-shadow: inset 0 0 0 1px #3584e4; }
 
-.incognito-mode headerbar button:hover, .incognito-mode actionbar button:hover, .incognito-mode notebook > 
header button:hover { color: #1b3149; outline-color: rgba(27, 49, 73, 0.3); border-color: #a7c1de; 
border-bottom-color: #91b2d6; 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, 0 1px 2px rgba(0, 0, 0, 0.07); 
background-image: linear-gradient(to top, #eaf0f7, #edf3f8 1px); }
+.incognito-mode headerbar entry:backdrop, .incognito-mode actionbar entry:backdrop { box-shadow: none; 
border-color: #b4cbe3; }
 
-.incognito-mode headerbar button:active, .incognito-mode headerbar button:checked, .incognito-mode actionbar 
button:active, .incognito-mode actionbar button:checked, .incognito-mode notebook > header button:active, 
.incognito-mode notebook > header button:checked { color: #1b3149; outline-color: rgba(27, 49, 73, 0.3); 
border-color: #a7c1de; background-image: image(#b6cce3); box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
text-shadow: none; -gtk-icon-shadow: none; }
+.incognito-mode tabbar .box { background: #b2c9e2; border-bottom: 1px solid #91b2d6; }
 
-.incognito-mode headerbar button:disabled, .incognito-mode actionbar button:disabled, .incognito-mode 
notebook > header button:disabled { color: #8291a0; border-color: #a7c1de; background-image: image(#eaf0f7); 
text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.incognito-mode tabbar .box:backdrop { background-color: #c8d9ea; border-color: #b4cbe3; }
 
-.incognito-mode headerbar button:backdrop, .incognito-mode actionbar button:backdrop, .incognito-mode 
notebook > header button:backdrop { color: #8291a0; border-color: #b4cbe3; background-image: image(#eaf0f7); 
text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.incognito-mode tabbar tabbox.pinned:dir(ltr) { padding-right: 1px; box-shadow: inset -1px 0 #91b2d6; }
 
-.incognito-mode headerbar button:backdrop:active, .incognito-mode actionbar button:backdrop:active, 
.incognito-mode notebook > header button:backdrop:active { color: #8291a0; border-color: #b4cbe3; 
background-image: image(#ccdbec); box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.incognito-mode tabbar tabbox.pinned:dir(ltr):backdrop { box-shadow: inset -1px 0 #b4cbe3; }
 
-.incognito-mode headerbar button:backdrop:disabled, .incognito-mode actionbar button:backdrop:disabled, 
.incognito-mode notebook > header button:backdrop:disabled { color: #b2c9e2; border-color: #b4cbe3; 
background-image: image(#eaf0f7); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px 
rgba(255, 255, 255, 0); }
+.incognito-mode tabbar tabbox.pinned:dir(rtl) { padding-left: 1px; box-shadow: inset 1px 0 #91b2d6; }
 
-.incognito-mode headerbar button:checked, .incognito-mode actionbar button:checked, .incognito-mode notebook

header button:checked { background: image(#aac4df); border-color: #9cb9da; border-top-color: #89acd3; }

+.incognito-mode tabbar tabbox.pinned:dir(rtl):backdrop { box-shadow: inset 1px 0 #b4cbe3; }
 
-.incognito-mode headerbar button:checked:backdrop, .incognito-mode actionbar button:checked:backdrop, 
.incognito-mode notebook > header button:checked:backdrop { color: #8291a0; border-color: #b4cbe3; 
background-image: image(#ccdbec); box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.incognito-mode tabbar undershoot.left { background: linear-gradient(to right, rgba(0, 0, 0, 0.07), rgba(0, 
0, 0, 0) 20px); }
 
-.incognito-mode headerbar button.flat:backdrop, .incognito-mode headerbar button.titlebutton:backdrop, 
.incognito-mode actionbar button.flat:backdrop, .incognito-mode actionbar button.titlebutton:backdrop, 
.incognito-mode notebook > header button.flat:backdrop, .incognito-mode notebook > header 
button.titlebutton:backdrop { border-color: transparent; background-color: transparent; background-image: 
none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
+.incognito-mode tabbar undershoot.right { background: linear-gradient(to left, rgba(0, 0, 0, 0.07), rgba(0, 
0, 0, 0) 20px); }
 
-.incognito-mode headerbar entry, .incognito-mode actionbar entry, .incognito-mode notebook > header entry { 
border-color: #a7c1de; }
+.incognito-mode tabbar.needs-attention-left undershoot.left { background: linear-gradient(to right, rgba(53, 
132, 228, 0.7), rgba(53, 132, 228, 0.5) 1px, rgba(53, 132, 228, 0) 20px); }
 
-.incognito-mode headerbar entry:focus, .incognito-mode actionbar entry:focus, .incognito-mode notebook > 
header entry:focus { border-color: #3584e4; box-shadow: inset 0 0 0 1px #3584e4; }
+.incognito-mode tabbar.needs-attention-right undershoot.right { background: linear-gradient(to left, 
rgba(53, 132, 228, 0.7), rgba(53, 132, 228, 0.5) 1px, rgba(53, 132, 228, 0) 20px); }
 
-.incognito-mode headerbar entry:backdrop, .incognito-mode actionbar entry:backdrop, .incognito-mode notebook

header entry:backdrop { box-shadow: none; border-color: #b4cbe3; }

+.incognito-mode tabbar tab { border-color: #91b2d6; background-color: #bdd1e6; }
 
-.automation-mode { /*************************** Check and Radio buttons * */ }
+.incognito-mode tabbar tab .tab-close-button-scrim.left { background: linear-gradient(to left, rgba(189, 
209, 230, 0), #bdd1e6 18px); }
+
+.incognito-mode tabbar tab .tab-close-button-scrim.right { background: linear-gradient(to right, rgba(189, 
209, 230, 0), #bdd1e6 18px); }
+
+.incognito-mode tabbar tab:checked { background-color: #d3e0ef; }
+
+.incognito-mode tabbar tab:checked .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(211, 224, 239, 0), #d3e0ef 18px); }
+
+.incognito-mode tabbar tab:checked .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(211, 224, 239, 0), #d3e0ef 18px); }
+
+.incognito-mode tabbar tab:checked:hover { background-color: #dee8f3; }
+
+.incognito-mode tabbar tab:checked:hover .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(222, 232, 243, 0), #dee8f3 18px); }
+
+.incognito-mode tabbar tab:checked:hover .tab-close-button-scrim.right { background: linear-gradient(to 
right, rgba(222, 232, 243, 0), #dee8f3 18px); }
+
+.incognito-mode tabbar tab:hover { background-color: #c8d9ea; }
+
+.incognito-mode tabbar tab:hover .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(200, 217, 234, 0), #c8d9ea 18px); }
+
+.incognito-mode tabbar tab:hover .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(200, 217, 234, 0), #c8d9ea 18px); }
+
+.incognito-mode tabbar tab:backdrop { border-color: #b4cbe3; background-color: #d3e0ef; }
+
+.incognito-mode tabbar tab:backdrop .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(211, 224, 239, 0), #d3e0ef 18px); }
+
+.incognito-mode tabbar tab:backdrop .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(211, 224, 239, 0), #d3e0ef 18px); }
+
+.incognito-mode tabbar tab:backdrop:checked { background-color: #eaf0f7; }
+
+.incognito-mode tabbar tab:backdrop:checked .tab-close-button-scrim.left { background: linear-gradient(to 
left, rgba(234, 240, 247, 0), #eaf0f7 18px); }
+
+.incognito-mode tabbar tab:backdrop:checked .tab-close-button-scrim.right { background: linear-gradient(to 
right, rgba(234, 240, 247, 0), #eaf0f7 18px); }
+
+.incognito-mode tabbar .start-action, .incognito-mode tabbar .end-action { background: #bdd1e6; 
border-color: #91b2d6; }
+
+.incognito-mode tabbar .start-action:backdrop, .incognito-mode tabbar .end-action:backdrop { border-color: 
#b4cbe3; background-color: #d3e0ef; }
+
+.incognito-mode tabbar tab.needs-attention { background-image: radial-gradient(ellipse at bottom, rgba(255, 
255, 255, 0.8), rgba(53, 132, 228, 0.2) 15%, rgba(53, 132, 228, 0) 15%); }
+
+.incognito-mode tabbar tab .tab-close-button, .incognito-mode tabbar tab .tab-secondary-icon { background: 
none; }
+
+.incognito-mode tabbar tab .tab-close-button:hover, .incognito-mode tabbar tab 
.tab-secondary-icon.clickable:hover { background: hdyalpha(#1b3149, 0.15); }
+
+.incognito-mode tabbar tab .tab-close-button:active, .incognito-mode tabbar tab 
.tab-secondary-icon.clickable:active { background: hdyalpha(black, 0.2); }
+
+.incognito-mode tabbar .tab-close-button-scrim.inverted { background: none; }
+
+.automation-mode { /*************************** Check and Radio buttons * */ /* FIXME this should be inlined 
after we finalize the colors */ }
 
 .automation-mode headerbar { background: #e68700 linear-gradient(to top, #db8100, #eb8a00); box-shadow: 
inset 0 1px rgba(255, 255, 255, 0.8); border-color: #9e5d00; }
 
@@ -182,61 +230,109 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .automation-mode actionbar:backdrop > revealer > box { border-color: #ca7905; }
 
-.automation-mode notebook > header { border-color: #bd6f00; background-color: #de880d; }
+.automation-mode headerbar > *, .automation-mode actionbar > * { color: #643b00; }
+
+.automation-mode headerbar > *:backdrop, .automation-mode actionbar > *:backdrop { color: #b26e0d; }
+
+.automation-mode headerbar button, .automation-mode actionbar button { color: #643b00; outline-color: 
rgba(100, 59, 0, 0.3); border-color: #bd6f00; border-bottom-color: #9e5d00; background-image: 
linear-gradient(to top, #ff9805 2px, #ffa11a); 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 rgba(255, 255, 255, 0.2), 0 
1px 2px rgba(0, 0, 0, 0.07); }
 
-.automation-mode notebook > header:backdrop { border-color: #ca7905; background-color: #ec9312; }
+.automation-mode headerbar button.flat, .automation-mode headerbar button.titlebutton, .automation-mode 
actionbar button.flat, .automation-mode actionbar button.titlebutton { border-color: transparent; 
background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
text-shadow: none; -gtk-icon-shadow: none; }
 
-.automation-mode notebook > header > tabs > tab { color: #b26e0d; }
+.automation-mode headerbar button.titlebutton, .automation-mode actionbar button.titlebutton { text-shadow: 
0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); }
 
-.automation-mode notebook > header > tabs > tab button.flat:hover { color: currentColor; }
+.automation-mode headerbar button:hover, .automation-mode actionbar button:hover { color: #643b00; 
outline-color: rgba(100, 59, 0, 0.3); border-color: #bd6f00; border-bottom-color: #9e5d00; 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 
rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to top, #ffa11a, 
#ffa31f 1px); }
 
-.automation-mode notebook > header > tabs > tab button.flat, .automation-mode notebook > header > tabs > tab 
button.flat:backdrop { color: alpha(currentColor,0.3); }
+.automation-mode headerbar button:active, .automation-mode headerbar button:checked, .automation-mode 
actionbar button:active, .automation-mode actionbar button:checked { color: #643b00; outline-color: rgba(100, 
59, 0, 0.3); border-color: #bd6f00; background-image: image(#d17b00); box-shadow: inset 0 1px rgba(255, 255, 
255, 0); text-shadow: none; -gtk-icon-shadow: none; }
 
-.automation-mode notebook > header > tabs > tab:hover { color: #8b5407; border-color: rgba(189, 111, 0, 
0.3); background-color: rgba(255, 161, 26, 0.2); box-shadow: inset 0 -3px #bd6f00; }
+.automation-mode headerbar button:disabled, .automation-mode actionbar button:disabled { color: #b26e0d; 
border-color: #bd6f00; background-image: image(#ffa11a); text-shadow: none; -gtk-icon-shadow: none; 
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.automation-mode notebook > header > tabs > tab:backdrop { color: #d18212; border-color: transparent; 
background-color: transparent; box-shadow: none; }
+.automation-mode headerbar button:backdrop, .automation-mode actionbar button:backdrop { color: #b26e0d; 
border-color: #ca7905; background-image: image(#ffa11a); text-shadow: none; -gtk-icon-shadow: none; 
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.automation-mode notebook > header > tabs > tab:checked { color: #643b00; border-color: rgba(189, 111, 0, 
0.5); background-color: rgba(255, 161, 26, 0.5); box-shadow: inset 0 -3px #3584e4; }
+.automation-mode headerbar button:backdrop:active, .automation-mode actionbar button:backdrop:active { 
color: #b26e0d; border-color: #ca7905; background-image: image(#f08e00); box-shadow: inset 0 1px rgba(255, 
255, 255, 0); }
 
-.automation-mode notebook > header > tabs > tab:checked:hover { background-color: rgba(255, 161, 26, 0.7); }
+.automation-mode headerbar button:backdrop:disabled, .automation-mode actionbar button:backdrop:disabled { 
color: #cc7800; border-color: #ca7905; background-image: image(#ffa11a); text-shadow: none; -gtk-icon-shadow: 
none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.automation-mode notebook > header > tabs > tab:backdrop:checked { color: #b26e0d; border-color: #ca7905; 
background-color: #ffa11a; }
+.automation-mode headerbar button:checked, .automation-mode actionbar button:checked { background: 
image(#c27200); border-color: #ad6600; border-top-color: #945700; }
 
-.automation-mode notebook > header > tabs > arrow:active { color: #643b00; outline-color: rgba(100, 59, 0, 
0.3); border-color: #bd6f00; background-image: image(#d17b00); box-shadow: inset 0 1px rgba(255, 255, 255, 
0); text-shadow: none; -gtk-icon-shadow: none; }
+.automation-mode headerbar button:checked:backdrop, .automation-mode actionbar button:checked:backdrop { 
color: #b26e0d; border-color: #ca7905; background-image: image(#f08e00); box-shadow: inset 0 1px rgba(255, 
255, 255, 0); }
 
-.automation-mode headerbar > *, .automation-mode actionbar > *, .automation-mode notebook > header > * { 
color: #643b00; }
+.automation-mode headerbar button.flat:backdrop, .automation-mode headerbar button.titlebutton:backdrop, 
.automation-mode actionbar button.flat:backdrop, .automation-mode actionbar button.titlebutton:backdrop { 
border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px 
rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
 
-.automation-mode headerbar > *:backdrop, .automation-mode actionbar > *:backdrop, .automation-mode notebook

header > *:backdrop { color: #b26e0d; }

+.automation-mode headerbar entry, .automation-mode actionbar entry { border-color: #bd6f00; }
 
-.automation-mode headerbar button, .automation-mode actionbar button, .automation-mode notebook > header 
button { color: #643b00; outline-color: rgba(100, 59, 0, 0.3); border-color: #bd6f00; border-bottom-color: 
#9e5d00; background-image: linear-gradient(to top, #ff9805 2px, #ffa11a); 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 rgba(255, 255, 
255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); }
+.automation-mode headerbar entry:focus, .automation-mode actionbar entry:focus { border-color: #3584e4; 
box-shadow: inset 0 0 0 1px #3584e4; }
 
-.automation-mode headerbar button.flat, .automation-mode headerbar button.titlebutton, .automation-mode 
actionbar button.flat, .automation-mode actionbar button.titlebutton, .automation-mode notebook > header 
button.flat, .automation-mode notebook > header button.titlebutton { border-color: transparent; 
background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
text-shadow: none; -gtk-icon-shadow: none; }
+.automation-mode headerbar entry:backdrop, .automation-mode actionbar entry:backdrop { box-shadow: none; 
border-color: #ca7905; }
 
-.automation-mode headerbar button.titlebutton, .automation-mode actionbar button.titlebutton, 
.automation-mode notebook > header button.titlebutton { text-shadow: 0 1px rgba(255, 255, 255, 0.769231); 
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); }
+.automation-mode tabbar .box { background: #cc7800; border-bottom: 1px solid #9e5d00; }
 
-.automation-mode headerbar button:hover, .automation-mode actionbar button:hover, .automation-mode notebook

header button:hover { color: #643b00; outline-color: rgba(100, 59, 0, 0.3); border-color: #bd6f00;

border-bottom-color: #9e5d00; 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 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 
0.07); background-image: linear-gradient(to top, #ffa11a, #ffa31f 1px); }
+.automation-mode tabbar .box:backdrop { background-color: #eb8a00; border-color: #ca7905; }
 
-.automation-mode headerbar button:active, .automation-mode headerbar button:checked, .automation-mode 
actionbar button:active, .automation-mode actionbar button:checked, .automation-mode notebook > header 
button:active, .automation-mode notebook > header button:checked { color: #643b00; outline-color: rgba(100, 
59, 0, 0.3); border-color: #bd6f00; background-image: image(#d17b00); box-shadow: inset 0 1px rgba(255, 255, 
255, 0); text-shadow: none; -gtk-icon-shadow: none; }
+.automation-mode tabbar tabbox.pinned:dir(ltr) { padding-right: 1px; box-shadow: inset -1px 0 #9e5d00; }
 
-.automation-mode headerbar button:disabled, .automation-mode actionbar button:disabled, .automation-mode 
notebook > header button:disabled { color: #b26e0d; border-color: #bd6f00; background-image: image(#ffa11a); 
text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.automation-mode tabbar tabbox.pinned:dir(ltr):backdrop { box-shadow: inset -1px 0 #ca7905; }
 
-.automation-mode headerbar button:backdrop, .automation-mode actionbar button:backdrop, .automation-mode 
notebook > header button:backdrop { color: #b26e0d; border-color: #ca7905; background-image: image(#ffa11a); 
text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.automation-mode tabbar tabbox.pinned:dir(rtl) { padding-left: 1px; box-shadow: inset 1px 0 #9e5d00; }
 
-.automation-mode headerbar button:backdrop:active, .automation-mode actionbar button:backdrop:active, 
.automation-mode notebook > header button:backdrop:active { color: #b26e0d; border-color: #ca7905; 
background-image: image(#f08e00); box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.automation-mode tabbar tabbox.pinned:dir(rtl):backdrop { box-shadow: inset 1px 0 #ca7905; }
 
-.automation-mode headerbar button:backdrop:disabled, .automation-mode actionbar button:backdrop:disabled, 
.automation-mode notebook > header button:backdrop:disabled { color: #cc7800; border-color: #ca7905; 
background-image: image(#ffa11a); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px 
rgba(255, 255, 255, 0); }
+.automation-mode tabbar undershoot.left { background: linear-gradient(to right, rgba(0, 0, 0, 0.07), rgba(0, 
0, 0, 0) 20px); }
 
-.automation-mode headerbar button:checked, .automation-mode actionbar button:checked, .automation-mode 
notebook > header button:checked { background: image(#c27200); border-color: #ad6600; border-top-color: 
#945700; }
+.automation-mode tabbar undershoot.right { background: linear-gradient(to left, rgba(0, 0, 0, 0.07), rgba(0, 
0, 0, 0) 20px); }
 
-.automation-mode headerbar button:checked:backdrop, .automation-mode actionbar button:checked:backdrop, 
.automation-mode notebook > header button:checked:backdrop { color: #b26e0d; border-color: #ca7905; 
background-image: image(#f08e00); box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.automation-mode tabbar.needs-attention-left undershoot.left { background: linear-gradient(to right, 
rgba(53, 132, 228, 0.7), rgba(53, 132, 228, 0.5) 1px, rgba(53, 132, 228, 0) 20px); }
 
-.automation-mode headerbar button.flat:backdrop, .automation-mode headerbar button.titlebutton:backdrop, 
.automation-mode actionbar button.flat:backdrop, .automation-mode actionbar button.titlebutton:backdrop, 
.automation-mode notebook > header button.flat:backdrop, .automation-mode notebook > header 
button.titlebutton:backdrop { border-color: transparent; background-color: transparent; background-image: 
none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
+.automation-mode tabbar.needs-attention-right undershoot.right { background: linear-gradient(to left, 
rgba(53, 132, 228, 0.7), rgba(53, 132, 228, 0.5) 1px, rgba(53, 132, 228, 0) 20px); }
 
-.automation-mode headerbar entry, .automation-mode actionbar entry, .automation-mode notebook > header entry 
{ border-color: #bd6f00; }
+.automation-mode tabbar tab { border-color: #9e5d00; background-color: #db8100; }
 
-.automation-mode headerbar entry:focus, .automation-mode actionbar entry:focus, .automation-mode notebook > 
header entry:focus { border-color: #3584e4; box-shadow: inset 0 0 0 1px #3584e4; }
+.automation-mode tabbar tab .tab-close-button-scrim.left { background: linear-gradient(to left, rgba(219, 
129, 0, 0), #db8100 18px); }
 
-.automation-mode headerbar entry:backdrop, .automation-mode actionbar entry:backdrop, .automation-mode 
notebook > header entry:backdrop { box-shadow: none; border-color: #ca7905; }
+.automation-mode tabbar tab .tab-close-button-scrim.right { background: linear-gradient(to right, rgba(219, 
129, 0, 0), #db8100 18px); }
+
+.automation-mode tabbar tab:checked { background-color: #fa9300; }
+
+.automation-mode tabbar tab:checked .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(250, 147, 0, 0), #fa9300 18px); }
+
+.automation-mode tabbar tab:checked .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(250, 147, 0, 0), #fa9300 18px); }
+
+.automation-mode tabbar tab:checked:hover { background-color: #ff9a0a; }
+
+.automation-mode tabbar tab:checked:hover .tab-close-button-scrim.left { background: linear-gradient(to 
left, rgba(255, 154, 10, 0), #ff9a0a 18px); }
+
+.automation-mode tabbar tab:checked:hover .tab-close-button-scrim.right { background: linear-gradient(to 
right, rgba(255, 154, 10, 0), #ff9a0a 18px); }
+
+.automation-mode tabbar tab:hover { background-color: #eb8a00; }
+
+.automation-mode tabbar tab:hover .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(235, 138, 0, 0), #eb8a00 18px); }
+
+.automation-mode tabbar tab:hover .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(235, 138, 0, 0), #eb8a00 18px); }
+
+.automation-mode tabbar tab:backdrop { border-color: #ca7905; background-color: #fa9300; }
+
+.automation-mode tabbar tab:backdrop .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(250, 147, 0, 0), #fa9300 18px); }
+
+.automation-mode tabbar tab:backdrop .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(250, 147, 0, 0), #fa9300 18px); }
+
+.automation-mode tabbar tab:backdrop:checked { background-color: #ffa11a; }
+
+.automation-mode tabbar tab:backdrop:checked .tab-close-button-scrim.left { background: linear-gradient(to 
left, rgba(255, 161, 26, 0), #ffa11a 18px); }
+
+.automation-mode tabbar tab:backdrop:checked .tab-close-button-scrim.right { background: linear-gradient(to 
right, rgba(255, 161, 26, 0), #ffa11a 18px); }
+
+.automation-mode tabbar .start-action, .automation-mode tabbar .end-action { background: #db8100; 
border-color: #9e5d00; }
+
+.automation-mode tabbar .start-action:backdrop, .automation-mode tabbar .end-action:backdrop { border-color: 
#ca7905; background-color: #fa9300; }
+
+.automation-mode tabbar tab.needs-attention { background-image: radial-gradient(ellipse at bottom, rgba(255, 
255, 255, 0.8), rgba(53, 132, 228, 0.2) 15%, rgba(53, 132, 228, 0) 15%); }
+
+.automation-mode tabbar tab .tab-close-button, .automation-mode tabbar tab .tab-secondary-icon { background: 
none; }
+
+.automation-mode tabbar tab .tab-close-button:hover, .automation-mode tabbar tab 
.tab-secondary-icon.clickable:hover { background: hdyalpha(#643b00, 0.15); }
+
+.automation-mode tabbar tab .tab-close-button:active, .automation-mode tabbar tab 
.tab-secondary-icon.clickable:active { background: hdyalpha(black, 0.2); }
+
+.automation-mode tabbar .tab-close-button-scrim.inverted { background: none; }
 
 /*************************** Check and Radio buttons * */
 .url_entry:not(:hover):not(:focus) { background-color: rgba(255, 255, 255, 0.75); }
@@ -291,14 +387,6 @@ row.narrow .page-row-close-button image { padding: 6px; }
 
 .epiphany-downloads-button-needs-attention-multiple { animation: needs_attention_keyframes 3s ease-in-out; 
animation-iteration-count: 3; }
 
-.main-notebook tab { min-width: 16px; }
-
-.main-notebook header.top tab, .main-notebook header.bottom tab { border-style: none solid; }
-
-.main-notebook header.left tab, .main-notebook header.right tab { border-style: solid none; }
-
-.tab-attention { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), 
to(transparent)); }
-
 #title-box-container { color: alpha(@theme_fg_color,0.2); }
 
 #title-box-container > clamp { color: @theme_fg_color; }
diff --git a/src/resources/themes/HighContrast.css b/src/resources/themes/HighContrast.css
index 87d952a93..34ac1e586 100644
--- a/src/resources/themes/HighContrast.css
+++ b/src/resources/themes/HighContrast.css
@@ -90,7 +90,7 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .draggable.drag-hover-bottom { border-bottom: 1px solid #4e9a06; }
 
-.incognito-mode { /*************************** Check and Radio buttons * */ }
+.incognito-mode { /*************************** Check and Radio buttons * */ /* FIXME this should be inlined 
after we finalize the colors */ }
 
 .incognito-mode headerbar { background: #d0deed linear-gradient(to top, #c8d9ea, #d3e0ef); box-shadow: inset 
0 1px rgba(255, 255, 255, 0.8); border-color: #345d8a; }
 
@@ -108,63 +108,111 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .incognito-mode actionbar:backdrop > revealer > box { border-color: #b4cbe3; }
 
-.incognito-mode notebook > header { border-color: #4074ab; background-color: #c8d9ea; }
+.incognito-mode headerbar > *, .incognito-mode actionbar > * { color: #172a3e; }
 
-.incognito-mode notebook > header:backdrop { border-color: #b4cbe3; background-color: #d7e3f0; }
+.incognito-mode headerbar > *:backdrop, .incognito-mode actionbar > *:backdrop { color: #8291a0; }
 
-.incognito-mode notebook > header > tabs > tab { color: #86919c; }
+.incognito-mode headerbar button, .incognito-mode actionbar button { color: #172a3e; outline-color: rgba(23, 
42, 62, 0.3); border-color: #4074ab; border-bottom-color: #345d8a; background-image: linear-gradient(to top, 
#e6edf6 2px, #f5f8fb); 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, 0 1px 2px rgba(0, 0, 0, 0.07); }
 
-.incognito-mode notebook > header > tabs > tab button.flat:hover { color: currentColor; }
+.incognito-mode headerbar button.flat, .incognito-mode headerbar button.titlebutton, .incognito-mode 
actionbar button.flat, .incognito-mode actionbar button.titlebutton { border-color: transparent; 
background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
text-shadow: none; -gtk-icon-shadow: none; }
 
-.incognito-mode notebook > header > tabs > tab button.flat, .incognito-mode notebook > header > tabs > tab 
button.flat:backdrop { color: alpha(currentColor,0.3); }
+.incognito-mode headerbar button.titlebutton, .incognito-mode actionbar button.titlebutton { text-shadow: 0 
1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); }
 
-.incognito-mode notebook > header > tabs > tab:hover { color: #4f5d6d; border-color: rgba(64, 116, 171, 
0.3); background-color: rgba(245, 248, 251, 0.2); box-shadow: inset 0 -3px #4074ab; }
+.incognito-mode headerbar button:hover, .incognito-mode actionbar button:hover { color: #172a3e; 
outline-color: rgba(23, 42, 62, 0.3); border-color: #4074ab; border-bottom-color: #345d8a; 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, 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to top, #f5f8fb, #f8fafd 1px); }
 
-.incognito-mode notebook > header > tabs > tab:backdrop { color: #abb7c3; border-color: transparent; 
background-color: transparent; box-shadow: none; }
+.incognito-mode headerbar button:active, .incognito-mode headerbar button:checked, .incognito-mode actionbar 
button:active, .incognito-mode actionbar button:checked { color: #172a3e; outline-color: rgba(23, 42, 62, 
0.3); border-color: #4074ab; background-image: image(#c1d3e8); box-shadow: inset 0 1px rgba(255, 255, 255, 
0); text-shadow: none; -gtk-icon-shadow: none; }
 
-.incognito-mode notebook > header > tabs > tab:checked { color: #172a3e; border-color: rgba(64, 116, 171, 
0.5); background-color: rgba(245, 248, 251, 0.5); box-shadow: inset 0 -3px #3584e4; }
+.incognito-mode headerbar button:disabled, .incognito-mode actionbar button:disabled { color: #86919c; 
border-color: #648ebb; background-image: image(#f0f5f9); text-shadow: none; -gtk-icon-shadow: none; 
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.incognito-mode notebook > header > tabs > tab:checked:hover { background-color: rgba(245, 248, 251, 0.7); }
+.incognito-mode headerbar button:backdrop, .incognito-mode actionbar button:backdrop { color: #8291a0; 
border-color: #b4cbe3; background-image: image(#eaf0f7); text-shadow: none; -gtk-icon-shadow: none; 
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.incognito-mode notebook > header > tabs > tab:backdrop:checked { color: #8291a0; border-color: #b4cbe3; 
background-color: #eaf0f7; }
+.incognito-mode headerbar button:backdrop:active, .incognito-mode actionbar button:backdrop:active { color: 
#8291a0; border-color: #b4cbe3; background-image: image(#d4e3f1); box-shadow: inset 0 1px rgba(255, 255, 255, 
0); }
 
-.incognito-mode notebook > header > tabs > arrow:active { color: #172a3e; outline-color: rgba(23, 42, 62, 
0.3); border-color: #4074ab; background-image: image(#c1d3e8); box-shadow: inset 0 1px rgba(255, 255, 255, 
0); text-shadow: none; -gtk-icon-shadow: none; }
+.incognito-mode headerbar button:backdrop:disabled, .incognito-mode actionbar button:backdrop:disabled { 
color: #b2c9e2; border-color: #b4cbe3; background-image: image(#f0f5f9); text-shadow: none; -gtk-icon-shadow: 
none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.incognito-mode headerbar > *, .incognito-mode actionbar > *, .incognito-mode notebook > header > * { color: 
#172a3e; }
+.incognito-mode headerbar button:checked, .incognito-mode actionbar button:checked { background: 
image(#b6cce3); border-color: #3c6ca0; border-top-color: #35608e; }
 
-.incognito-mode headerbar > *:backdrop, .incognito-mode actionbar > *:backdrop, .incognito-mode notebook > 
header > *:backdrop { color: #8291a0; }
+.incognito-mode headerbar button:checked:backdrop, .incognito-mode actionbar button:checked:backdrop { 
color: #8291a0; border-color: #b4cbe3; background-image: image(#d4e3f1); box-shadow: inset 0 1px rgba(255, 
255, 255, 0); }
 
-.incognito-mode headerbar button, .incognito-mode actionbar button, .incognito-mode notebook > header button 
{ color: #172a3e; outline-color: rgba(23, 42, 62, 0.3); border-color: #4074ab; border-bottom-color: #345d8a; 
background-image: linear-gradient(to top, #e6edf6 2px, #f5f8fb); 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, 0 1px 2px 
rgba(0, 0, 0, 0.07); }
+.incognito-mode headerbar button.flat:backdrop, .incognito-mode headerbar button.titlebutton:backdrop, 
.incognito-mode actionbar button.flat:backdrop, .incognito-mode actionbar button.titlebutton:backdrop { 
border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px 
rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
 
-.incognito-mode headerbar button.flat, .incognito-mode headerbar button.titlebutton, .incognito-mode 
actionbar button.flat, .incognito-mode actionbar button.titlebutton, .incognito-mode notebook > header 
button.flat, .incognito-mode notebook > header button.titlebutton { border-color: transparent; 
background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
text-shadow: none; -gtk-icon-shadow: none; }
+.incognito-mode headerbar entry, .incognito-mode actionbar entry { border-color: #4074ab; }
 
-.incognito-mode headerbar button.titlebutton, .incognito-mode actionbar button.titlebutton, .incognito-mode 
notebook > header button.titlebutton { text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 
1px rgba(255, 255, 255, 0.769231); }
+.incognito-mode headerbar entry:focus, .incognito-mode actionbar entry:focus { border-color: #3584e4; 
box-shadow: inset 0 0 0 1px #3584e4; }
 
-.incognito-mode headerbar button:hover, .incognito-mode actionbar button:hover, .incognito-mode notebook > 
header button:hover { color: #172a3e; outline-color: rgba(23, 42, 62, 0.3); border-color: #4074ab; 
border-bottom-color: #345d8a; 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, 0 1px 2px rgba(0, 0, 0, 0.07); 
background-image: linear-gradient(to top, #f5f8fb, #f8fafd 1px); }
+.incognito-mode headerbar entry:backdrop, .incognito-mode actionbar entry:backdrop { box-shadow: none; 
border-color: #b4cbe3; }
 
-.incognito-mode headerbar button:active, .incognito-mode headerbar button:checked, .incognito-mode actionbar 
button:active, .incognito-mode actionbar button:checked, .incognito-mode notebook > header button:active, 
.incognito-mode notebook > header button:checked { color: #172a3e; outline-color: rgba(23, 42, 62, 0.3); 
border-color: #4074ab; background-image: image(#c1d3e8); box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
text-shadow: none; -gtk-icon-shadow: none; }
+.incognito-mode tabbar .box { background: #bdd1e6; border-bottom: 1px solid #345d8a; }
 
-.incognito-mode headerbar button:disabled, .incognito-mode actionbar button:disabled, .incognito-mode 
notebook > header button:disabled { color: #86919c; border-color: #648ebb; background-image: image(#f0f5f9); 
text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.incognito-mode tabbar .box:backdrop { background-color: #c8d9ea; border-color: #b4cbe3; }
 
-.incognito-mode headerbar button:backdrop, .incognito-mode actionbar button:backdrop, .incognito-mode 
notebook > header button:backdrop { color: #8291a0; border-color: #b4cbe3; background-image: image(#eaf0f7); 
text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.incognito-mode tabbar tabbox.pinned:dir(ltr) { padding-right: 1px; box-shadow: inset -1px 0 #345d8a; }
 
-.incognito-mode headerbar button:backdrop:active, .incognito-mode actionbar button:backdrop:active, 
.incognito-mode notebook > header button:backdrop:active { color: #8291a0; border-color: #b4cbe3; 
background-image: image(#d4e3f1); box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.incognito-mode tabbar tabbox.pinned:dir(ltr):backdrop { box-shadow: inset -1px 0 #b4cbe3; }
 
-.incognito-mode headerbar button:backdrop:disabled, .incognito-mode actionbar button:backdrop:disabled, 
.incognito-mode notebook > header button:backdrop:disabled { color: #b2c9e2; border-color: #b4cbe3; 
background-image: image(#f0f5f9); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px 
rgba(255, 255, 255, 0); }
+.incognito-mode tabbar tabbox.pinned:dir(rtl) { padding-left: 1px; box-shadow: inset 1px 0 #345d8a; }
 
-.incognito-mode headerbar button:checked, .incognito-mode actionbar button:checked, .incognito-mode notebook

header button:checked { background: image(#b6cce3); border-color: #3c6ca0; border-top-color: #35608e; }

+.incognito-mode tabbar tabbox.pinned:dir(rtl):backdrop { box-shadow: inset 1px 0 #b4cbe3; }
 
-.incognito-mode headerbar button:checked:backdrop, .incognito-mode actionbar button:checked:backdrop, 
.incognito-mode notebook > header button:checked:backdrop { color: #8291a0; border-color: #b4cbe3; 
background-image: image(#d4e3f1); box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.incognito-mode tabbar undershoot.left { background: linear-gradient(to right, rgba(0, 0, 0, 0.07), rgba(0, 
0, 0, 0) 20px); }
 
-.incognito-mode headerbar button.flat:backdrop, .incognito-mode headerbar button.titlebutton:backdrop, 
.incognito-mode actionbar button.flat:backdrop, .incognito-mode actionbar button.titlebutton:backdrop, 
.incognito-mode notebook > header button.flat:backdrop, .incognito-mode notebook > header 
button.titlebutton:backdrop { border-color: transparent; background-color: transparent; background-image: 
none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
+.incognito-mode tabbar undershoot.right { background: linear-gradient(to left, rgba(0, 0, 0, 0.07), rgba(0, 
0, 0, 0) 20px); }
 
-.incognito-mode headerbar entry, .incognito-mode actionbar entry, .incognito-mode notebook > header entry { 
border-color: #4074ab; }
+.incognito-mode tabbar.needs-attention-left undershoot.left { background: linear-gradient(to right, rgba(53, 
132, 228, 0.7), rgba(53, 132, 228, 0.5) 1px, rgba(53, 132, 228, 0) 20px); }
 
-.incognito-mode headerbar entry:focus, .incognito-mode actionbar entry:focus, .incognito-mode notebook > 
header entry:focus { border-color: #3584e4; box-shadow: inset 0 0 0 1px #3584e4; }
+.incognito-mode tabbar.needs-attention-right undershoot.right { background: linear-gradient(to left, 
rgba(53, 132, 228, 0.7), rgba(53, 132, 228, 0.5) 1px, rgba(53, 132, 228, 0) 20px); }
 
-.incognito-mode headerbar entry:backdrop, .incognito-mode actionbar entry:backdrop, .incognito-mode notebook

header entry:backdrop { box-shadow: none; border-color: #b4cbe3; }

+.incognito-mode tabbar tab { border-color: #345d8a; background-color: #c8d9ea; }
 
-.automation-mode { /*************************** Check and Radio buttons * */ }
+.incognito-mode tabbar tab .tab-close-button-scrim.left { background: linear-gradient(to left, rgba(200, 
217, 234, 0), #c8d9ea 18px); }
+
+.incognito-mode tabbar tab .tab-close-button-scrim.right { background: linear-gradient(to right, rgba(200, 
217, 234, 0), #c8d9ea 18px); }
+
+.incognito-mode tabbar tab:checked { background-color: #dee8f3; }
+
+.incognito-mode tabbar tab:checked .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(222, 232, 243, 0), #dee8f3 18px); }
+
+.incognito-mode tabbar tab:checked .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(222, 232, 243, 0), #dee8f3 18px); }
+
+.incognito-mode tabbar tab:checked:hover { background-color: #eaf0f7; }
+
+.incognito-mode tabbar tab:checked:hover .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(234, 240, 247, 0), #eaf0f7 18px); }
+
+.incognito-mode tabbar tab:checked:hover .tab-close-button-scrim.right { background: linear-gradient(to 
right, rgba(234, 240, 247, 0), #eaf0f7 18px); }
+
+.incognito-mode tabbar tab:hover { background-color: #d3e0ef; }
+
+.incognito-mode tabbar tab:hover .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(211, 224, 239, 0), #d3e0ef 18px); }
+
+.incognito-mode tabbar tab:hover .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(211, 224, 239, 0), #d3e0ef 18px); }
+
+.incognito-mode tabbar tab:backdrop { border-color: #b4cbe3; background-color: #d3e0ef; }
+
+.incognito-mode tabbar tab:backdrop .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(211, 224, 239, 0), #d3e0ef 18px); }
+
+.incognito-mode tabbar tab:backdrop .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(211, 224, 239, 0), #d3e0ef 18px); }
+
+.incognito-mode tabbar tab:backdrop:checked { background-color: #eaf0f7; }
+
+.incognito-mode tabbar tab:backdrop:checked .tab-close-button-scrim.left { background: linear-gradient(to 
left, rgba(234, 240, 247, 0), #eaf0f7 18px); }
+
+.incognito-mode tabbar tab:backdrop:checked .tab-close-button-scrim.right { background: linear-gradient(to 
right, rgba(234, 240, 247, 0), #eaf0f7 18px); }
+
+.incognito-mode tabbar .start-action, .incognito-mode tabbar .end-action { background: #c8d9ea; 
border-color: #345d8a; }
+
+.incognito-mode tabbar .start-action:backdrop, .incognito-mode tabbar .end-action:backdrop { border-color: 
#b4cbe3; background-color: #d3e0ef; }
+
+.incognito-mode tabbar tab.needs-attention { background-image: radial-gradient(ellipse at bottom, rgba(255, 
255, 255, 0.8), rgba(53, 132, 228, 0.2) 15%, rgba(53, 132, 228, 0) 15%); }
+
+.incognito-mode tabbar tab .tab-close-button, .incognito-mode tabbar tab .tab-secondary-icon { background: 
none; }
+
+.incognito-mode tabbar tab .tab-close-button:hover, .incognito-mode tabbar tab 
.tab-secondary-icon.clickable:hover { background: hdyalpha(#172a3e, 0.15); }
+
+.incognito-mode tabbar tab .tab-close-button:active, .incognito-mode tabbar tab 
.tab-secondary-icon.clickable:active { background: hdyalpha(black, 0.2); }
+
+.incognito-mode tabbar .tab-close-button-scrim.inverted { background: none; }
+
+.automation-mode { /*************************** Check and Radio buttons * */ /* FIXME this should be inlined 
after we finalize the colors */ }
 
 .automation-mode headerbar { background: #f59000 linear-gradient(to top, #eb8a00, #fa9300); box-shadow: 
inset 0 1px rgba(255, 255, 255, 0.8); border-color: black; }
 
@@ -182,61 +230,109 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .automation-mode actionbar:backdrop > revealer > box { border-color: #ca7905; }
 
-.automation-mode notebook > header { border-color: #241500; background-color: #de880d; }
+.automation-mode headerbar > *, .automation-mode actionbar > * { color: #553200; }
+
+.automation-mode headerbar > *:backdrop, .automation-mode actionbar > *:backdrop { color: #b26e0d; }
+
+.automation-mode headerbar button, .automation-mode actionbar button { color: #553200; outline-color: 
rgba(85, 50, 0, 0.3); border-color: #241500; border-bottom-color: black; background-image: linear-gradient(to 
top, #ff9e14 2px, #ffa729); 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 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 
0.07); }
 
-.automation-mode notebook > header:backdrop { border-color: #ca7905; background-color: #ec9312; }
+.automation-mode headerbar button.flat, .automation-mode headerbar button.titlebutton, .automation-mode 
actionbar button.flat, .automation-mode actionbar button.titlebutton { border-color: transparent; 
background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
text-shadow: none; -gtk-icon-shadow: none; }
 
-.automation-mode notebook > header > tabs > tab { color: #aa6c14; }
+.automation-mode headerbar button.titlebutton, .automation-mode actionbar button.titlebutton { text-shadow: 
0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); }
 
-.automation-mode notebook > header > tabs > tab button.flat:hover { color: currentColor; }
+.automation-mode headerbar button:hover, .automation-mode actionbar button:hover { color: #553200; 
outline-color: rgba(85, 50, 0, 0.3); border-color: #241500; border-bottom-color: black; 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 
rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to top, #ffa729, 
#ffa92e 1px); }
 
-.automation-mode notebook > header > tabs > tab button.flat, .automation-mode notebook > header > tabs > tab 
button.flat:backdrop { color: alpha(currentColor,0.3); }
+.automation-mode headerbar button:active, .automation-mode headerbar button:checked, .automation-mode 
actionbar button:active, .automation-mode actionbar button:checked { color: #553200; outline-color: rgba(85, 
50, 0, 0.3); border-color: #241500; background-image: image(#e08400); box-shadow: inset 0 1px rgba(255, 255, 
255, 0); text-shadow: none; -gtk-icon-shadow: none; }
 
-.automation-mode notebook > header > tabs > tab:hover { color: #7f4f0a; border-color: rgba(36, 21, 0, 0.3); 
background-color: rgba(255, 167, 41, 0.2); box-shadow: inset 0 -3px #241500; }
+.automation-mode headerbar button:disabled, .automation-mode actionbar button:disabled { color: #aa6c14; 
border-color: #503208; background-image: image(#ffa423); text-shadow: none; -gtk-icon-shadow: none; 
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.automation-mode notebook > header > tabs > tab:backdrop { color: #d18212; border-color: transparent; 
background-color: transparent; box-shadow: none; }
+.automation-mode headerbar button:backdrop, .automation-mode actionbar button:backdrop { color: #b26e0d; 
border-color: #ca7905; background-image: image(#ffa11a); text-shadow: none; -gtk-icon-shadow: none; 
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.automation-mode notebook > header > tabs > tab:checked { color: #553200; border-color: rgba(36, 21, 0, 
0.5); background-color: rgba(255, 167, 41, 0.5); box-shadow: inset 0 -3px #3584e4; }
+.automation-mode headerbar button:backdrop:active, .automation-mode actionbar button:backdrop:active { 
color: #b26e0d; border-color: #ca7905; background-image: image(#fd9500); box-shadow: inset 0 1px rgba(255, 
255, 255, 0); }
 
-.automation-mode notebook > header > tabs > tab:checked:hover { background-color: rgba(255, 167, 41, 0.7); }
+.automation-mode headerbar button:backdrop:disabled, .automation-mode actionbar button:backdrop:disabled { 
color: #cc7800; border-color: #ca7905; background-image: image(#ffa423); text-shadow: none; -gtk-icon-shadow: 
none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.automation-mode notebook > header > tabs > tab:backdrop:checked { color: #b26e0d; border-color: #ca7905; 
background-color: #ffa11a; }
+.automation-mode headerbar button:checked, .automation-mode actionbar button:checked { background: 
image(#d17b00); border-color: #140c00; border-top-color: black; }
 
-.automation-mode notebook > header > tabs > arrow:active { color: #553200; outline-color: rgba(85, 50, 0, 
0.3); border-color: #241500; background-image: image(#e08400); box-shadow: inset 0 1px rgba(255, 255, 255, 
0); text-shadow: none; -gtk-icon-shadow: none; }
+.automation-mode headerbar button:checked:backdrop, .automation-mode actionbar button:checked:backdrop { 
color: #b26e0d; border-color: #ca7905; background-image: image(#fd9500); box-shadow: inset 0 1px rgba(255, 
255, 255, 0); }
 
-.automation-mode headerbar > *, .automation-mode actionbar > *, .automation-mode notebook > header > * { 
color: #553200; }
+.automation-mode headerbar button.flat:backdrop, .automation-mode headerbar button.titlebutton:backdrop, 
.automation-mode actionbar button.flat:backdrop, .automation-mode actionbar button.titlebutton:backdrop { 
border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px 
rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
 
-.automation-mode headerbar > *:backdrop, .automation-mode actionbar > *:backdrop, .automation-mode notebook

header > *:backdrop { color: #b26e0d; }

+.automation-mode headerbar entry, .automation-mode actionbar entry { border-color: #241500; }
 
-.automation-mode headerbar button, .automation-mode actionbar button, .automation-mode notebook > header 
button { color: #553200; outline-color: rgba(85, 50, 0, 0.3); border-color: #241500; border-bottom-color: 
black; background-image: linear-gradient(to top, #ff9e14 2px, #ffa729); 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 rgba(255, 255, 
255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); }
+.automation-mode headerbar entry:focus, .automation-mode actionbar entry:focus { border-color: #3584e4; 
box-shadow: inset 0 0 0 1px #3584e4; }
 
-.automation-mode headerbar button.flat, .automation-mode headerbar button.titlebutton, .automation-mode 
actionbar button.flat, .automation-mode actionbar button.titlebutton, .automation-mode notebook > header 
button.flat, .automation-mode notebook > header button.titlebutton { border-color: transparent; 
background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
text-shadow: none; -gtk-icon-shadow: none; }
+.automation-mode headerbar entry:backdrop, .automation-mode actionbar entry:backdrop { box-shadow: none; 
border-color: #ca7905; }
 
-.automation-mode headerbar button.titlebutton, .automation-mode actionbar button.titlebutton, 
.automation-mode notebook > header button.titlebutton { text-shadow: 0 1px rgba(255, 255, 255, 0.769231); 
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); }
+.automation-mode tabbar .box { background: #db8100; border-bottom: 1px solid black; }
 
-.automation-mode headerbar button:hover, .automation-mode actionbar button:hover, .automation-mode notebook

header button:hover { color: #553200; outline-color: rgba(85, 50, 0, 0.3); border-color: #241500;

border-bottom-color: black; 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 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 
0.07); background-image: linear-gradient(to top, #ffa729, #ffa92e 1px); }
+.automation-mode tabbar .box:backdrop { background-color: #eb8a00; border-color: #ca7905; }
 
-.automation-mode headerbar button:active, .automation-mode headerbar button:checked, .automation-mode 
actionbar button:active, .automation-mode actionbar button:checked, .automation-mode notebook > header 
button:active, .automation-mode notebook > header button:checked { color: #553200; outline-color: rgba(85, 
50, 0, 0.3); border-color: #241500; background-image: image(#e08400); box-shadow: inset 0 1px rgba(255, 255, 
255, 0); text-shadow: none; -gtk-icon-shadow: none; }
+.automation-mode tabbar tabbox.pinned:dir(ltr) { padding-right: 1px; box-shadow: inset -1px 0 black; }
 
-.automation-mode headerbar button:disabled, .automation-mode actionbar button:disabled, .automation-mode 
notebook > header button:disabled { color: #aa6c14; border-color: #503208; background-image: image(#ffa423); 
text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.automation-mode tabbar tabbox.pinned:dir(ltr):backdrop { box-shadow: inset -1px 0 #ca7905; }
 
-.automation-mode headerbar button:backdrop, .automation-mode actionbar button:backdrop, .automation-mode 
notebook > header button:backdrop { color: #b26e0d; border-color: #ca7905; background-image: image(#ffa11a); 
text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.automation-mode tabbar tabbox.pinned:dir(rtl) { padding-left: 1px; box-shadow: inset 1px 0 black; }
 
-.automation-mode headerbar button:backdrop:active, .automation-mode actionbar button:backdrop:active, 
.automation-mode notebook > header button:backdrop:active { color: #b26e0d; border-color: #ca7905; 
background-image: image(#fd9500); box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.automation-mode tabbar tabbox.pinned:dir(rtl):backdrop { box-shadow: inset 1px 0 #ca7905; }
 
-.automation-mode headerbar button:backdrop:disabled, .automation-mode actionbar button:backdrop:disabled, 
.automation-mode notebook > header button:backdrop:disabled { color: #cc7800; border-color: #ca7905; 
background-image: image(#ffa423); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px 
rgba(255, 255, 255, 0); }
+.automation-mode tabbar undershoot.left { background: linear-gradient(to right, rgba(0, 0, 0, 0.07), rgba(0, 
0, 0, 0) 20px); }
 
-.automation-mode headerbar button:checked, .automation-mode actionbar button:checked, .automation-mode 
notebook > header button:checked { background: image(#d17b00); border-color: #140c00; border-top-color: 
black; }
+.automation-mode tabbar undershoot.right { background: linear-gradient(to left, rgba(0, 0, 0, 0.07), rgba(0, 
0, 0, 0) 20px); }
 
-.automation-mode headerbar button:checked:backdrop, .automation-mode actionbar button:checked:backdrop, 
.automation-mode notebook > header button:checked:backdrop { color: #b26e0d; border-color: #ca7905; 
background-image: image(#fd9500); box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.automation-mode tabbar.needs-attention-left undershoot.left { background: linear-gradient(to right, 
rgba(53, 132, 228, 0.7), rgba(53, 132, 228, 0.5) 1px, rgba(53, 132, 228, 0) 20px); }
 
-.automation-mode headerbar button.flat:backdrop, .automation-mode headerbar button.titlebutton:backdrop, 
.automation-mode actionbar button.flat:backdrop, .automation-mode actionbar button.titlebutton:backdrop, 
.automation-mode notebook > header button.flat:backdrop, .automation-mode notebook > header 
button.titlebutton:backdrop { border-color: transparent; background-color: transparent; background-image: 
none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
+.automation-mode tabbar.needs-attention-right undershoot.right { background: linear-gradient(to left, 
rgba(53, 132, 228, 0.7), rgba(53, 132, 228, 0.5) 1px, rgba(53, 132, 228, 0) 20px); }
 
-.automation-mode headerbar entry, .automation-mode actionbar entry, .automation-mode notebook > header entry 
{ border-color: #241500; }
+.automation-mode tabbar tab { border-color: black; background-color: #eb8a00; }
 
-.automation-mode headerbar entry:focus, .automation-mode actionbar entry:focus, .automation-mode notebook > 
header entry:focus { border-color: #3584e4; box-shadow: inset 0 0 0 1px #3584e4; }
+.automation-mode tabbar tab .tab-close-button-scrim.left { background: linear-gradient(to left, rgba(235, 
138, 0, 0), #eb8a00 18px); }
 
-.automation-mode headerbar entry:backdrop, .automation-mode actionbar entry:backdrop, .automation-mode 
notebook > header entry:backdrop { box-shadow: none; border-color: #ca7905; }
+.automation-mode tabbar tab .tab-close-button-scrim.right { background: linear-gradient(to right, rgba(235, 
138, 0, 0), #eb8a00 18px); }
+
+.automation-mode tabbar tab:checked { background-color: #ff9a0a; }
+
+.automation-mode tabbar tab:checked .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(255, 154, 10, 0), #ff9a0a 18px); }
+
+.automation-mode tabbar tab:checked .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(255, 154, 10, 0), #ff9a0a 18px); }
+
+.automation-mode tabbar tab:checked:hover { background-color: #ffa11a; }
+
+.automation-mode tabbar tab:checked:hover .tab-close-button-scrim.left { background: linear-gradient(to 
left, rgba(255, 161, 26, 0), #ffa11a 18px); }
+
+.automation-mode tabbar tab:checked:hover .tab-close-button-scrim.right { background: linear-gradient(to 
right, rgba(255, 161, 26, 0), #ffa11a 18px); }
+
+.automation-mode tabbar tab:hover { background-color: #fa9300; }
+
+.automation-mode tabbar tab:hover .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(250, 147, 0, 0), #fa9300 18px); }
+
+.automation-mode tabbar tab:hover .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(250, 147, 0, 0), #fa9300 18px); }
+
+.automation-mode tabbar tab:backdrop { border-color: #ca7905; background-color: #fa9300; }
+
+.automation-mode tabbar tab:backdrop .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(250, 147, 0, 0), #fa9300 18px); }
+
+.automation-mode tabbar tab:backdrop .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(250, 147, 0, 0), #fa9300 18px); }
+
+.automation-mode tabbar tab:backdrop:checked { background-color: #ffa11a; }
+
+.automation-mode tabbar tab:backdrop:checked .tab-close-button-scrim.left { background: linear-gradient(to 
left, rgba(255, 161, 26, 0), #ffa11a 18px); }
+
+.automation-mode tabbar tab:backdrop:checked .tab-close-button-scrim.right { background: linear-gradient(to 
right, rgba(255, 161, 26, 0), #ffa11a 18px); }
+
+.automation-mode tabbar .start-action, .automation-mode tabbar .end-action { background: #eb8a00; 
border-color: black; }
+
+.automation-mode tabbar .start-action:backdrop, .automation-mode tabbar .end-action:backdrop { border-color: 
#ca7905; background-color: #fa9300; }
+
+.automation-mode tabbar tab.needs-attention { background-image: radial-gradient(ellipse at bottom, rgba(255, 
255, 255, 0.8), rgba(53, 132, 228, 0.2) 15%, rgba(53, 132, 228, 0) 15%); }
+
+.automation-mode tabbar tab .tab-close-button, .automation-mode tabbar tab .tab-secondary-icon { background: 
none; }
+
+.automation-mode tabbar tab .tab-close-button:hover, .automation-mode tabbar tab 
.tab-secondary-icon.clickable:hover { background: hdyalpha(#553200, 0.15); }
+
+.automation-mode tabbar tab .tab-close-button:active, .automation-mode tabbar tab 
.tab-secondary-icon.clickable:active { background: hdyalpha(black, 0.2); }
+
+.automation-mode tabbar .tab-close-button-scrim.inverted { background: none; }
 
 /*************************** Check and Radio buttons * */
 .bookmark-tag-widget { border-radius: 5px; }
@@ -289,14 +385,6 @@ row.narrow .page-row-close-button image { padding: 6px; }
 
 .epiphany-downloads-button-needs-attention-multiple { animation: needs_attention_keyframes 3s ease-in-out; 
animation-iteration-count: 3; }
 
-.main-notebook tab { min-width: 16px; }
-
-.main-notebook header.top tab, .main-notebook header.bottom tab { border-style: none solid; }
-
-.main-notebook header.left tab, .main-notebook header.right tab { border-style: solid none; }
-
-.tab-attention { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), 
to(transparent)); }
-
 #title-box-container { color: alpha(@theme_fg_color,0.2); }
 
 #title-box-container > clamp { color: @theme_fg_color; }
diff --git a/src/resources/themes/HighContrastInverse.css b/src/resources/themes/HighContrastInverse.css
index 32f872de9..69e9b4b4e 100644
--- a/src/resources/themes/HighContrastInverse.css
+++ b/src/resources/themes/HighContrastInverse.css
@@ -90,7 +90,7 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .draggable.drag-hover-bottom { border-bottom: 1px solid #4e9a06; }
 
-.incognito-mode { /*************************** Check and Radio buttons * */ }
+.incognito-mode { /*************************** Check and Radio buttons * */ /* FIXME this should be inlined 
after we finalize the colors */ }
 
 .incognito-mode headerbar { background: #101520 linear-gradient(to top, #171d2e, #1a2235); box-shadow: inset 
0 1px rgba(231, 234, 243, 0.07); border-color: #36456b; }
 
@@ -108,63 +108,111 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .incognito-mode actionbar:backdrop > revealer > box { border-color: #171d2e; }
 
-.incognito-mode notebook > header { border-color: #475b8d; background-color: #1c2438; }
+.incognito-mode headerbar > *, .incognito-mode actionbar > * { color: #eef0f6; }
 
-.incognito-mode notebook > header:backdrop { border-color: #171d2e; background-color: #202940; }
+.incognito-mode headerbar > *:backdrop, .incognito-mode actionbar > *:backdrop { color: #868d9e; }
 
-.incognito-mode notebook > header > tabs > tab { color: #878d9c; }
+.incognito-mode headerbar button, .incognito-mode actionbar button { color: #eef0f6; outline-color: 
rgba(238, 240, 246, 0.3); border-color: #475b8d; border-bottom-color: #36456b; background-image: 
linear-gradient(to top, #1f283f 2px, #212b42); text-shadow: 0 -1px rgba(0, 0, 0, 0.844235); -gtk-icon-shadow: 
0 -1px rgba(0, 0, 0, 0.844235); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 
0.07); }
 
-.incognito-mode notebook > header > tabs > tab button.flat:hover { color: currentColor; }
+.incognito-mode headerbar button.flat, .incognito-mode headerbar button.titlebutton, .incognito-mode 
actionbar button.flat, .incognito-mode actionbar button.titlebutton { border-color: transparent; 
background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
text-shadow: none; -gtk-icon-shadow: none; }
 
-.incognito-mode notebook > header > tabs > tab button.flat, .incognito-mode notebook > header > tabs > tab 
button.flat:backdrop { color: alpha(currentColor,0.3); }
+.incognito-mode headerbar button.titlebutton, .incognito-mode actionbar button.titlebutton { text-shadow: 0 
-1px rgba(0, 0, 0, 0.844235); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.844235); }
 
-.incognito-mode notebook > header > tabs > tab:hover { color: #babfc9; border-color: rgba(71, 91, 141, 0.3); 
background-color: rgba(33, 43, 66, 0.2); box-shadow: inset 0 -3px #475b8d; }
+.incognito-mode headerbar button:hover, .incognito-mode actionbar button:hover { color: #eef0f6; 
outline-color: rgba(238, 240, 246, 0.3); border-color: #475b8d; border-bottom-color: #36456b; text-shadow: 0 
-1px rgba(0, 0, 0, 0.796235); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.796235); box-shadow: inset 0 1px 
rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to top, #1f283f, 
#232d46 1px); }
 
-.incognito-mode notebook > header > tabs > tab:backdrop { color: #5f677c; border-color: transparent; 
background-color: transparent; box-shadow: none; }
+.incognito-mode headerbar button:active, .incognito-mode headerbar button:checked, .incognito-mode actionbar 
button:active, .incognito-mode actionbar button:checked { color: #eef0f6; outline-color: rgba(238, 240, 246, 
0.3); border-color: #475b8d; background-image: image(#121724); box-shadow: inset 0 1px rgba(255, 255, 255, 
0); text-shadow: none; -gtk-icon-shadow: none; }
 
-.incognito-mode notebook > header > tabs > tab:checked { color: #eef0f6; border-color: rgba(71, 91, 141, 
0.5); background-color: rgba(33, 43, 66, 0.5); box-shadow: inset 0 -3px #15539e; }
+.incognito-mode headerbar button:disabled, .incognito-mode actionbar button:disabled { color: #878d9c; 
border-color: #3f517e; background-image: image(#222c45); text-shadow: none; -gtk-icon-shadow: none; 
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.incognito-mode notebook > header > tabs > tab:checked:hover { background-color: rgba(33, 43, 66, 0.7); }
+.incognito-mode headerbar button:backdrop, .incognito-mode actionbar button:backdrop { color: #868d9e; 
border-color: #171d2e; background-image: image(#252f49); text-shadow: none; -gtk-icon-shadow: none; 
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.incognito-mode notebook > header > tabs > tab:backdrop:checked { color: #868d9e; border-color: #171d2e; 
background-color: #252f49; }
+.incognito-mode headerbar button:backdrop:active, .incognito-mode actionbar button:backdrop:active { color: 
#868d9e; border-color: #171d2e; background-image: image(#1b2235); box-shadow: inset 0 1px rgba(255, 255, 255, 
0); }
 
-.incognito-mode notebook > header > tabs > arrow:active { color: #eef0f6; outline-color: rgba(238, 240, 246, 
0.3); border-color: #475b8d; background-image: image(#121724); box-shadow: inset 0 1px rgba(255, 255, 255, 
0); text-shadow: none; -gtk-icon-shadow: none; }
+.incognito-mode headerbar button:backdrop:disabled, .incognito-mode actionbar button:backdrop:disabled { 
color: #3e507c; border-color: #171d2e; background-image: image(#222c45); text-shadow: none; -gtk-icon-shadow: 
none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.incognito-mode headerbar > *, .incognito-mode actionbar > *, .incognito-mode notebook > header > * { color: 
#eef0f6; }
+.incognito-mode headerbar button:checked, .incognito-mode actionbar button:checked { background: 
image(#121724); border-color: #415483; border-top-color: #394972; }
 
-.incognito-mode headerbar > *:backdrop, .incognito-mode actionbar > *:backdrop, .incognito-mode notebook > 
header > *:backdrop { color: #868d9e; }
+.incognito-mode headerbar button:checked:backdrop, .incognito-mode actionbar button:checked:backdrop { 
color: #868d9e; border-color: #171d2e; background-image: image(#1b2235); box-shadow: inset 0 1px rgba(255, 
255, 255, 0); }
 
-.incognito-mode headerbar button, .incognito-mode actionbar button, .incognito-mode notebook > header button 
{ color: #eef0f6; outline-color: rgba(238, 240, 246, 0.3); border-color: #475b8d; border-bottom-color: 
#36456b; background-image: linear-gradient(to top, #1f283f 2px, #212b42); text-shadow: 0 -1px rgba(0, 0, 0, 
0.844235); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.844235); box-shadow: inset 0 1px rgba(255, 255, 255, 
0.02), 0 1px 2px rgba(0, 0, 0, 0.07); }
+.incognito-mode headerbar button.flat:backdrop, .incognito-mode headerbar button.titlebutton:backdrop, 
.incognito-mode actionbar button.flat:backdrop, .incognito-mode actionbar button.titlebutton:backdrop { 
border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px 
rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
 
-.incognito-mode headerbar button.flat, .incognito-mode headerbar button.titlebutton, .incognito-mode 
actionbar button.flat, .incognito-mode actionbar button.titlebutton, .incognito-mode notebook > header 
button.flat, .incognito-mode notebook > header button.titlebutton { border-color: transparent; 
background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
text-shadow: none; -gtk-icon-shadow: none; }
+.incognito-mode headerbar entry, .incognito-mode actionbar entry { border-color: #475b8d; }
 
-.incognito-mode headerbar button.titlebutton, .incognito-mode actionbar button.titlebutton, .incognito-mode 
notebook > header button.titlebutton { text-shadow: 0 -1px rgba(0, 0, 0, 0.844235); -gtk-icon-shadow: 0 -1px 
rgba(0, 0, 0, 0.844235); }
+.incognito-mode headerbar entry:focus, .incognito-mode actionbar entry:focus { border-color: #030c17; 
box-shadow: inset 0 0 0 1px #15539e; }
 
-.incognito-mode headerbar button:hover, .incognito-mode actionbar button:hover, .incognito-mode notebook > 
header button:hover { color: #eef0f6; outline-color: rgba(238, 240, 246, 0.3); border-color: #475b8d; 
border-bottom-color: #36456b; text-shadow: 0 -1px rgba(0, 0, 0, 0.796235); -gtk-icon-shadow: 0 -1px rgba(0, 
0, 0, 0.796235); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); 
background-image: linear-gradient(to top, #1f283f, #232d46 1px); }
+.incognito-mode headerbar entry:backdrop, .incognito-mode actionbar entry:backdrop { box-shadow: none; 
border-color: #171d2e; }
 
-.incognito-mode headerbar button:active, .incognito-mode headerbar button:checked, .incognito-mode actionbar 
button:active, .incognito-mode actionbar button:checked, .incognito-mode notebook > header button:active, 
.incognito-mode notebook > header button:checked { color: #eef0f6; outline-color: rgba(238, 240, 246, 0.3); 
border-color: #475b8d; background-image: image(#121724); box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
text-shadow: none; -gtk-icon-shadow: none; }
+.incognito-mode tabbar .box { background: #121724; border-bottom: 1px solid #36456b; }
 
-.incognito-mode headerbar button:disabled, .incognito-mode actionbar button:disabled, .incognito-mode 
notebook > header button:disabled { color: #878d9c; border-color: #3f517e; background-image: image(#222c45); 
text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.incognito-mode tabbar .box:backdrop { background-color: #151b2a; border-color: #171d2e; }
 
-.incognito-mode headerbar button:backdrop, .incognito-mode actionbar button:backdrop, .incognito-mode 
notebook > header button:backdrop { color: #868d9e; border-color: #171d2e; background-image: image(#252f49); 
text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.incognito-mode tabbar tabbox.pinned:dir(ltr) { padding-right: 1px; box-shadow: inset -1px 0 #36456b; }
 
-.incognito-mode headerbar button:backdrop:active, .incognito-mode actionbar button:backdrop:active, 
.incognito-mode notebook > header button:backdrop:active { color: #868d9e; border-color: #171d2e; 
background-image: image(#1b2235); box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.incognito-mode tabbar tabbox.pinned:dir(ltr):backdrop { box-shadow: inset -1px 0 #171d2e; }
 
-.incognito-mode headerbar button:backdrop:disabled, .incognito-mode actionbar button:backdrop:disabled, 
.incognito-mode notebook > header button:backdrop:disabled { color: #3e507c; border-color: #171d2e; 
background-image: image(#222c45); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px 
rgba(255, 255, 255, 0); }
+.incognito-mode tabbar tabbox.pinned:dir(rtl) { padding-left: 1px; box-shadow: inset 1px 0 #36456b; }
 
-.incognito-mode headerbar button:checked, .incognito-mode actionbar button:checked, .incognito-mode notebook

header button:checked { background: image(#121724); border-color: #415483; border-top-color: #394972; }

+.incognito-mode tabbar tabbox.pinned:dir(rtl):backdrop { box-shadow: inset 1px 0 #171d2e; }
 
-.incognito-mode headerbar button:checked:backdrop, .incognito-mode actionbar button:checked:backdrop, 
.incognito-mode notebook > header button:checked:backdrop { color: #868d9e; border-color: #171d2e; 
background-image: image(#1b2235); box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.incognito-mode tabbar undershoot.left { background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 
0, 0, 0) 20px); }
 
-.incognito-mode headerbar button.flat:backdrop, .incognito-mode headerbar button.titlebutton:backdrop, 
.incognito-mode actionbar button.flat:backdrop, .incognito-mode actionbar button.titlebutton:backdrop, 
.incognito-mode notebook > header button.flat:backdrop, .incognito-mode notebook > header 
button.titlebutton:backdrop { border-color: transparent; background-color: transparent; background-image: 
none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
+.incognito-mode tabbar undershoot.right { background: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 
0, 0, 0) 20px); }
 
-.incognito-mode headerbar entry, .incognito-mode actionbar entry, .incognito-mode notebook > header entry { 
border-color: #475b8d; }
+.incognito-mode tabbar.needs-attention-left undershoot.left { background: linear-gradient(to right, rgba(21, 
83, 158, 0.7), rgba(21, 83, 158, 0.5) 1px, rgba(21, 83, 158, 0) 20px); }
 
-.incognito-mode headerbar entry:focus, .incognito-mode actionbar entry:focus, .incognito-mode notebook > 
header entry:focus { border-color: #030c17; box-shadow: inset 0 0 0 1px #15539e; }
+.incognito-mode tabbar.needs-attention-right undershoot.right { background: linear-gradient(to left, 
rgba(21, 83, 158, 0.7), rgba(21, 83, 158, 0.5) 1px, rgba(21, 83, 158, 0) 20px); }
 
-.incognito-mode headerbar entry:backdrop, .incognito-mode actionbar entry:backdrop, .incognito-mode notebook

header entry:backdrop { box-shadow: none; border-color: #171d2e; }

+.incognito-mode tabbar tab { border-color: #36456b; background-color: #171d2e; }
 
-.automation-mode { /*************************** Check and Radio buttons * */ }
+.incognito-mode tabbar tab .tab-close-button-scrim.left { background: linear-gradient(to left, rgba(23, 29, 
46, 0), #171d2e 18px); }
+
+.incognito-mode tabbar tab .tab-close-button-scrim.right { background: linear-gradient(to right, rgba(23, 
29, 46, 0), #171d2e 18px); }
+
+.incognito-mode tabbar tab:checked { background-color: #212b42; }
+
+.incognito-mode tabbar tab:checked .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(33, 43, 66, 0), #212b42 18px); }
+
+.incognito-mode tabbar tab:checked .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(33, 43, 66, 0), #212b42 18px); }
+
+.incognito-mode tabbar tab:checked:hover { background-color: #26314c; }
+
+.incognito-mode tabbar tab:checked:hover .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(38, 49, 76, 0), #26314c 18px); }
+
+.incognito-mode tabbar tab:checked:hover .tab-close-button-scrim.right { background: linear-gradient(to 
right, rgba(38, 49, 76, 0), #26314c 18px); }
+
+.incognito-mode tabbar tab:hover { background-color: #1c2438; }
+
+.incognito-mode tabbar tab:hover .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(28, 36, 56, 0), #1c2438 18px); }
+
+.incognito-mode tabbar tab:hover .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(28, 36, 56, 0), #1c2438 18px); }
+
+.incognito-mode tabbar tab:backdrop { border-color: #171d2e; background-color: #1a2235; }
+
+.incognito-mode tabbar tab:backdrop .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(26, 34, 53, 0), #1a2235 18px); }
+
+.incognito-mode tabbar tab:backdrop .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(26, 34, 53, 0), #1a2235 18px); }
+
+.incognito-mode tabbar tab:backdrop:checked { background-color: #252f49; }
+
+.incognito-mode tabbar tab:backdrop:checked .tab-close-button-scrim.left { background: linear-gradient(to 
left, rgba(37, 47, 73, 0), #252f49 18px); }
+
+.incognito-mode tabbar tab:backdrop:checked .tab-close-button-scrim.right { background: linear-gradient(to 
right, rgba(37, 47, 73, 0), #252f49 18px); }
+
+.incognito-mode tabbar .start-action, .incognito-mode tabbar .end-action { background: #171d2e; 
border-color: #36456b; }
+
+.incognito-mode tabbar .start-action:backdrop, .incognito-mode tabbar .end-action:backdrop { border-color: 
#171d2e; background-color: #1a2235; }
+
+.incognito-mode tabbar tab.needs-attention { background-image: radial-gradient(ellipse at bottom, rgba(255, 
255, 255, 0.8), rgba(21, 83, 158, 0.2) 15%, rgba(21, 83, 158, 0) 15%); }
+
+.incognito-mode tabbar tab .tab-close-button, .incognito-mode tabbar tab .tab-secondary-icon { background: 
none; }
+
+.incognito-mode tabbar tab .tab-close-button:hover, .incognito-mode tabbar tab 
.tab-secondary-icon.clickable:hover { background: hdyalpha(#eef0f6, 0.15); }
+
+.incognito-mode tabbar tab .tab-close-button:active, .incognito-mode tabbar tab 
.tab-secondary-icon.clickable:active { background: hdyalpha(black, 0.2); }
+
+.incognito-mode tabbar .tab-close-button-scrim.inverted { background: none; }
+
+.automation-mode { /*************************** Check and Radio buttons * */ /* FIXME this should be inlined 
after we finalize the colors */ }
 
 .automation-mode headerbar { background: #db8100 linear-gradient(to top, #f08d00, #fa9300); box-shadow: 
inset 0 1px rgba(255, 240, 219, 0.07); border-color: #ffb64d; }
 
@@ -182,61 +230,109 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .automation-mode actionbar:backdrop > revealer > box { border-color: #eb8c05; }
 
-.automation-mode notebook > header { border-color: #ffcb80; background-color: #f2940d; }
+.automation-mode headerbar > *, .automation-mode actionbar > * { color: #fff4e5; }
+
+.automation-mode headerbar > *:backdrop, .automation-mode actionbar > *:backdrop { color: #ffc87a; }
+
+.automation-mode headerbar button, .automation-mode actionbar button { color: #fff4e5; outline-color: 
rgba(255, 244, 229, 0.3); border-color: #ffcb80; border-bottom-color: #ffb64d; background-image: 
linear-gradient(to top, #ff9a0a 2px, #ff9c0f); text-shadow: 0 -1px rgba(0, 0, 0, 0.576); -gtk-icon-shadow: 0 
-1px rgba(0, 0, 0, 0.576); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); }
 
-.automation-mode notebook > header:backdrop { border-color: #eb8c05; background-color: #f89912; }
+.automation-mode headerbar button.flat, .automation-mode headerbar button.titlebutton, .automation-mode 
actionbar button.flat, .automation-mode actionbar button.titlebutton { border-color: transparent; 
background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
text-shadow: none; -gtk-icon-shadow: none; }
 
-.automation-mode notebook > header > tabs > tab { color: #ffc87a; }
+.automation-mode headerbar button.titlebutton, .automation-mode actionbar button.titlebutton { text-shadow: 
0 -1px rgba(0, 0, 0, 0.576); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.576); }
 
-.automation-mode notebook > header > tabs > tab button.flat:hover { color: currentColor; }
+.automation-mode headerbar button:hover, .automation-mode actionbar button:hover { color: #fff4e5; 
outline-color: rgba(255, 244, 229, 0.3); border-color: #ffcb80; border-bottom-color: #ffb64d; text-shadow: 0 
-1px rgba(0, 0, 0, 0.528); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.528); box-shadow: inset 0 1px rgba(255, 
255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to top, #ff9a0a, #ff9e14 
1px); }
 
-.automation-mode notebook > header > tabs > tab button.flat, .automation-mode notebook > header > tabs > tab 
button.flat:backdrop { color: alpha(currentColor,0.3); }
+.automation-mode headerbar button:active, .automation-mode headerbar button:checked, .automation-mode 
actionbar button:active, .automation-mode actionbar button:checked { color: #fff4e5; outline-color: rgba(255, 
244, 229, 0.3); border-color: #ffcb80; background-image: image(#e08400); box-shadow: inset 0 1px rgba(255, 
255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
 
-.automation-mode notebook > header > tabs > tab:hover { color: #ffdeb0; border-color: rgba(255, 203, 128, 
0.3); background-color: rgba(255, 156, 15, 0.2); box-shadow: inset 0 -3px #ffcb80; }
+.automation-mode headerbar button:disabled, .automation-mode actionbar button:disabled { color: #ffc87a; 
border-color: #ffc169; background-image: image(#ff9e13); text-shadow: none; -gtk-icon-shadow: none; 
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.automation-mode notebook > header > tabs > tab:backdrop { color: #ffb853; border-color: transparent; 
background-color: transparent; box-shadow: none; }
+.automation-mode headerbar button:backdrop, .automation-mode actionbar button:backdrop { color: #ffc87a; 
border-color: #eb8c05; background-image: image(#ffa11a); text-shadow: none; -gtk-icon-shadow: none; 
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.automation-mode notebook > header > tabs > tab:checked { color: #fff4e5; border-color: rgba(255, 203, 128, 
0.5); background-color: rgba(255, 156, 15, 0.5); box-shadow: inset 0 -3px #15539e; }
+.automation-mode headerbar button:backdrop:active, .automation-mode actionbar button:backdrop:active { 
color: #ffc87a; border-color: #eb8c05; background-image: image(#fc9400); box-shadow: inset 0 1px rgba(255, 
255, 255, 0); }
 
-.automation-mode notebook > header > tabs > tab:checked:hover { background-color: rgba(255, 156, 15, 0.7); }
+.automation-mode headerbar button:backdrop:disabled, .automation-mode actionbar button:backdrop:disabled { 
color: #ffc066; border-color: #eb8c05; background-image: image(#ff9e13); text-shadow: none; -gtk-icon-shadow: 
none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-.automation-mode notebook > header > tabs > tab:backdrop:checked { color: #ffc87a; border-color: #eb8c05; 
background-color: #ffa11a; }
+.automation-mode headerbar button:checked, .automation-mode actionbar button:checked { background: 
image(#e08400); border-color: #ffc470; border-top-color: #ffba57; }
 
-.automation-mode notebook > header > tabs > arrow:active { color: #fff4e5; outline-color: rgba(255, 244, 
229, 0.3); border-color: #ffcb80; background-image: image(#e08400); box-shadow: inset 0 1px rgba(255, 255, 
255, 0); text-shadow: none; -gtk-icon-shadow: none; }
+.automation-mode headerbar button:checked:backdrop, .automation-mode actionbar button:checked:backdrop { 
color: #ffc87a; border-color: #eb8c05; background-image: image(#fc9400); box-shadow: inset 0 1px rgba(255, 
255, 255, 0); }
 
-.automation-mode headerbar > *, .automation-mode actionbar > *, .automation-mode notebook > header > * { 
color: #fff4e5; }
+.automation-mode headerbar button.flat:backdrop, .automation-mode headerbar button.titlebutton:backdrop, 
.automation-mode actionbar button.flat:backdrop, .automation-mode actionbar button.titlebutton:backdrop { 
border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px 
rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
 
-.automation-mode headerbar > *:backdrop, .automation-mode actionbar > *:backdrop, .automation-mode notebook

header > *:backdrop { color: #ffc87a; }

+.automation-mode headerbar entry, .automation-mode actionbar entry { border-color: #ffcb80; }
 
-.automation-mode headerbar button, .automation-mode actionbar button, .automation-mode notebook > header 
button { color: #fff4e5; outline-color: rgba(255, 244, 229, 0.3); border-color: #ffcb80; border-bottom-color: 
#ffb64d; background-image: linear-gradient(to top, #ff9a0a 2px, #ff9c0f); text-shadow: 0 -1px rgba(0, 0, 0, 
0.576); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.576); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 
1px 2px rgba(0, 0, 0, 0.07); }
+.automation-mode headerbar entry:focus, .automation-mode actionbar entry:focus { border-color: #030c17; 
box-shadow: inset 0 0 0 1px #15539e; }
 
-.automation-mode headerbar button.flat, .automation-mode headerbar button.titlebutton, .automation-mode 
actionbar button.flat, .automation-mode actionbar button.titlebutton, .automation-mode notebook > header 
button.flat, .automation-mode notebook > header button.titlebutton { border-color: transparent; 
background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
text-shadow: none; -gtk-icon-shadow: none; }
+.automation-mode headerbar entry:backdrop, .automation-mode actionbar entry:backdrop { box-shadow: none; 
border-color: #eb8c05; }
 
-.automation-mode headerbar button.titlebutton, .automation-mode actionbar button.titlebutton, 
.automation-mode notebook > header button.titlebutton { text-shadow: 0 -1px rgba(0, 0, 0, 0.576); 
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.576); }
+.automation-mode tabbar .box { background: #e08400; border-bottom: 1px solid #ffb64d; }
 
-.automation-mode headerbar button:hover, .automation-mode actionbar button:hover, .automation-mode notebook

header button:hover { color: #fff4e5; outline-color: rgba(255, 244, 229, 0.3); border-color: #ffcb80;

border-bottom-color: #ffb64d; text-shadow: 0 -1px rgba(0, 0, 0, 0.528); -gtk-icon-shadow: 0 -1px rgba(0, 0, 
0, 0.528); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); background-image: 
linear-gradient(to top, #ff9a0a, #ff9e14 1px); }
+.automation-mode tabbar .box:backdrop { background-color: #eb8a00; border-color: #eb8c05; }
 
-.automation-mode headerbar button:active, .automation-mode headerbar button:checked, .automation-mode 
actionbar button:active, .automation-mode actionbar button:checked, .automation-mode notebook > header 
button:active, .automation-mode notebook > header button:checked { color: #fff4e5; outline-color: rgba(255, 
244, 229, 0.3); border-color: #ffcb80; background-image: image(#e08400); box-shadow: inset 0 1px rgba(255, 
255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
+.automation-mode tabbar tabbox.pinned:dir(ltr) { padding-right: 1px; box-shadow: inset -1px 0 #ffb64d; }
 
-.automation-mode headerbar button:disabled, .automation-mode actionbar button:disabled, .automation-mode 
notebook > header button:disabled { color: #ffc87a; border-color: #ffc169; background-image: image(#ff9e13); 
text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.automation-mode tabbar tabbox.pinned:dir(ltr):backdrop { box-shadow: inset -1px 0 #eb8c05; }
 
-.automation-mode headerbar button:backdrop, .automation-mode actionbar button:backdrop, .automation-mode 
notebook > header button:backdrop { color: #ffc87a; border-color: #eb8c05; background-image: image(#ffa11a); 
text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.automation-mode tabbar tabbox.pinned:dir(rtl) { padding-left: 1px; box-shadow: inset 1px 0 #ffb64d; }
 
-.automation-mode headerbar button:backdrop:active, .automation-mode actionbar button:backdrop:active, 
.automation-mode notebook > header button:backdrop:active { color: #ffc87a; border-color: #eb8c05; 
background-image: image(#fc9400); box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.automation-mode tabbar tabbox.pinned:dir(rtl):backdrop { box-shadow: inset 1px 0 #eb8c05; }
 
-.automation-mode headerbar button:backdrop:disabled, .automation-mode actionbar button:backdrop:disabled, 
.automation-mode notebook > header button:backdrop:disabled { color: #ffc066; border-color: #eb8c05; 
background-image: image(#ff9e13); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px 
rgba(255, 255, 255, 0); }
+.automation-mode tabbar undershoot.left { background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 
0, 0, 0) 20px); }
 
-.automation-mode headerbar button:checked, .automation-mode actionbar button:checked, .automation-mode 
notebook > header button:checked { background: image(#e08400); border-color: #ffc470; border-top-color: 
#ffba57; }
+.automation-mode tabbar undershoot.right { background: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 
0, 0, 0) 20px); }
 
-.automation-mode headerbar button:checked:backdrop, .automation-mode actionbar button:checked:backdrop, 
.automation-mode notebook > header button:checked:backdrop { color: #ffc87a; border-color: #eb8c05; 
background-image: image(#fc9400); box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+.automation-mode tabbar.needs-attention-left undershoot.left { background: linear-gradient(to right, 
rgba(21, 83, 158, 0.7), rgba(21, 83, 158, 0.5) 1px, rgba(21, 83, 158, 0) 20px); }
 
-.automation-mode headerbar button.flat:backdrop, .automation-mode headerbar button.titlebutton:backdrop, 
.automation-mode actionbar button.flat:backdrop, .automation-mode actionbar button.titlebutton:backdrop, 
.automation-mode notebook > header button.flat:backdrop, .automation-mode notebook > header 
button.titlebutton:backdrop { border-color: transparent; background-color: transparent; background-image: 
none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; }
+.automation-mode tabbar.needs-attention-right undershoot.right { background: linear-gradient(to left, 
rgba(21, 83, 158, 0.7), rgba(21, 83, 158, 0.5) 1px, rgba(21, 83, 158, 0) 20px); }
 
-.automation-mode headerbar entry, .automation-mode actionbar entry, .automation-mode notebook > header entry 
{ border-color: #ffcb80; }
+.automation-mode tabbar tab { border-color: #ffb64d; background-color: #f08d00; }
 
-.automation-mode headerbar entry:focus, .automation-mode actionbar entry:focus, .automation-mode notebook > 
header entry:focus { border-color: #030c17; box-shadow: inset 0 0 0 1px #15539e; }
+.automation-mode tabbar tab .tab-close-button-scrim.left { background: linear-gradient(to left, rgba(240, 
141, 0, 0), #f08d00 18px); }
 
-.automation-mode headerbar entry:backdrop, .automation-mode actionbar entry:backdrop, .automation-mode 
notebook > header entry:backdrop { box-shadow: none; border-color: #eb8c05; }
+.automation-mode tabbar tab .tab-close-button-scrim.right { background: linear-gradient(to right, rgba(240, 
141, 0, 0), #f08d00 18px); }
+
+.automation-mode tabbar tab:checked { background-color: #ff9c0f; }
+
+.automation-mode tabbar tab:checked .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(255, 156, 15, 0), #ff9c0f 18px); }
+
+.automation-mode tabbar tab:checked .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(255, 156, 15, 0), #ff9c0f 18px); }
+
+.automation-mode tabbar tab:checked:hover { background-color: #ffa31f; }
+
+.automation-mode tabbar tab:checked:hover .tab-close-button-scrim.left { background: linear-gradient(to 
left, rgba(255, 163, 31, 0), #ffa31f 18px); }
+
+.automation-mode tabbar tab:checked:hover .tab-close-button-scrim.right { background: linear-gradient(to 
right, rgba(255, 163, 31, 0), #ffa31f 18px); }
+
+.automation-mode tabbar tab:hover { background-color: #ff9600; }
+
+.automation-mode tabbar tab:hover .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(255, 150, 0, 0), #ff9600 18px); }
+
+.automation-mode tabbar tab:hover .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(255, 150, 0, 0), #ff9600 18px); }
+
+.automation-mode tabbar tab:backdrop { border-color: #eb8c05; background-color: #fa9300; }
+
+.automation-mode tabbar tab:backdrop .tab-close-button-scrim.left { background: linear-gradient(to left, 
rgba(250, 147, 0, 0), #fa9300 18px); }
+
+.automation-mode tabbar tab:backdrop .tab-close-button-scrim.right { background: linear-gradient(to right, 
rgba(250, 147, 0, 0), #fa9300 18px); }
+
+.automation-mode tabbar tab:backdrop:checked { background-color: #ffa11a; }
+
+.automation-mode tabbar tab:backdrop:checked .tab-close-button-scrim.left { background: linear-gradient(to 
left, rgba(255, 161, 26, 0), #ffa11a 18px); }
+
+.automation-mode tabbar tab:backdrop:checked .tab-close-button-scrim.right { background: linear-gradient(to 
right, rgba(255, 161, 26, 0), #ffa11a 18px); }
+
+.automation-mode tabbar .start-action, .automation-mode tabbar .end-action { background: #f08d00; 
border-color: #ffb64d; }
+
+.automation-mode tabbar .start-action:backdrop, .automation-mode tabbar .end-action:backdrop { border-color: 
#eb8c05; background-color: #fa9300; }
+
+.automation-mode tabbar tab.needs-attention { background-image: radial-gradient(ellipse at bottom, rgba(255, 
255, 255, 0.8), rgba(21, 83, 158, 0.2) 15%, rgba(21, 83, 158, 0) 15%); }
+
+.automation-mode tabbar tab .tab-close-button, .automation-mode tabbar tab .tab-secondary-icon { background: 
none; }
+
+.automation-mode tabbar tab .tab-close-button:hover, .automation-mode tabbar tab 
.tab-secondary-icon.clickable:hover { background: hdyalpha(#fff4e5, 0.15); }
+
+.automation-mode tabbar tab .tab-close-button:active, .automation-mode tabbar tab 
.tab-secondary-icon.clickable:active { background: hdyalpha(black, 0.2); }
+
+.automation-mode tabbar .tab-close-button-scrim.inverted { background: none; }
 
 /*************************** Check and Radio buttons * */
 .bookmark-tag-widget { border-radius: 5px; }
@@ -289,14 +385,6 @@ row.narrow .page-row-close-button image { padding: 6px; }
 
 .epiphany-downloads-button-needs-attention-multiple { animation: needs_attention_keyframes 3s ease-in-out; 
animation-iteration-count: 3; }
 
-.main-notebook tab { min-width: 16px; }
-
-.main-notebook header.top tab, .main-notebook header.bottom tab { border-style: none solid; }
-
-.main-notebook header.left tab, .main-notebook header.right tab { border-style: solid none; }
-
-.tab-attention { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#1f76e1), 
to(transparent)); }
-
 #title-box-container { color: alpha(@theme_fg_color,0.2); }
 
 #title-box-container > clamp { color: @theme_fg_color; }
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;
+    }
+  }
+}
diff --git a/src/resources/themes/elementary.css b/src/resources/themes/elementary.css
index e0f00de66..fad9618aa 100644
--- a/src/resources/themes/elementary.css
+++ b/src/resources/themes/elementary.css
@@ -110,8 +110,6 @@ dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > li
 
 .entry_icon.starred { color: @BANANA_500; }
 
-.main-notebook tab { min-width: 30px; }
-
 dzlsuggestionpopover > revealer > box { margin: 12px; border: none; background: @theme_base_color; 
border-radius: 3px; box-shadow: 0 0 0 1px alpha(#000,0.2), 0 3px 6px alpha(#000,0.16), 0 3px 6px 
alpha(#000,0.23); }
 
 dzlsuggestionpopover > revealer > box > elastic > scrolledwindow > viewport > list > row:selected .title { 
color: @theme_fg_color; }

[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]