[libhandy] Add styles for HdyTab*

From: Adrien Plazas <aplazas src gnome org>
To: commits-list gnome org
Cc:
Subject: [libhandy] Add styles for HdyTab*
Date: Mon, 1 Feb 2021 16:10:23 +0000 (UTC)
commit 27b5f63fb6bfca68a85b335649ee78ccef9d98a3
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sun Sep 13 02:28:08 2020 +0500

    Add styles for HdyTab*

 src/themes/Adwaita-dark.css        |  72 ++++++++++++
 src/themes/Adwaita.css             |  72 ++++++++++++
 src/themes/HighContrast.css        |  72 ++++++++++++
 src/themes/HighContrastInverse.css |  72 ++++++++++++
 src/themes/_Adwaita-base.scss      | 222 +++++++++++++++++++++++++++++++++++++
 src/themes/_fallback-base.scss     |   6 +
 src/themes/fallback.css            |   2 +
 7 files changed, 518 insertions(+)
---
diff --git a/src/themes/Adwaita-dark.css b/src/themes/Adwaita-dark.css
index 63ed17e0..86ad0f53 100644
--- a/src/themes/Adwaita-dark.css
+++ b/src/themes/Adwaita-dark.css
@@ -89,6 +89,8 @@ preferencesgroup > box > label:not(:first-child) { margin-top: 6px; }
 
 preferencesgroup > box > box:not(:first-child) { margin-top: 12px; }
 
+tabbar .tab-indicator:not(.clickable) { background: none; box-shadow: none; border-color: transparent; }
+
 /*************************** Check and Radio buttons * */
 popover.combo list { min-width: 200px; }
 
@@ -215,3 +217,73 @@ window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):
 statuspage > scrolledwindow > viewport > box > clamp > box > .icon { color: rgba(238, 238, 236, 0.5); }
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .icon:backdrop { color: rgba(145, 145, 144, 
0.5); }
+
+tabbar .box { min-height: 38px; background: #1e1e1e; border-bottom: 1px solid #070707; }
+
+tabbar .box:backdrop { background-color: #1e1e1e; border-color: #202020; }
+
+tabbar scrolledwindow.pinned undershoot { border: 0 solid #070707; }
+
+tabbar scrolledwindow.pinned:dir(rtl) undershoot.left { border-left-width: 1px; }
+
+tabbar scrolledwindow.pinned:dir(ltr) undershoot.right { border-right-width: 1px; }
+
+tabbar scrolledwindow.pinned:backdrop undershoot { border-color: #202020; }
+
+tabbar scrolledwindow.pinned tabbox:dir(ltr) { padding-right: 1px; box-shadow: inset -1px 0 #070707; }
+
+tabbar scrolledwindow.pinned tabbox:dir(ltr):backdrop { box-shadow: inset -1px 0 #202020; }
+
+tabbar scrolledwindow.pinned tabbox:dir(rtl) { padding-left: 1px; box-shadow: inset 1px 0 #070707; }
+
+tabbar scrolledwindow.pinned tabbox:dir(rtl):backdrop { box-shadow: inset 1px 0 #202020; }
+
+tabbar undershoot { transition: none; }
+
+tabbar undershoot.left { background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 20px); }
+
+tabbar undershoot.right { background: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 20px); }
+
+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); }
+
+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); }
+
+tabbar tab { min-width: 118px; border-style: solid; border-color: #070707; border-width: 0 1px 0 1px; 
transition: background 150ms ease-in-out; background-color: #262626; }
+
+tabbar tab.pinned { min-width: 28px; }
+
+tabbar tab:checked { background-color: #353535; }
+
+tabbar tab:checked:hover { background-color: #3c3c3c; }
+
+tabbar tab:hover { background-color: #2d2d2d; }
+
+tabbar tab:backdrop { border-color: #202020; background-color: #262626; }
+
+tabbar tab:backdrop:checked { background-color: #353535; }
+
+tabbar .start-action, tabbar .end-action { background: #262626; border-color: #070707; border-style: solid; 
transition: background 150ms ease-in-out; }
+
+tabbar .start-action:backdrop, tabbar .end-action:backdrop { border-color: #202020; background-color: 
#262626; }
+
+tabbar .start-action button, tabbar .end-action button { border: none; border-radius: 0; }
+
+tabbar .start-action:dir(ltr), tabbar .end-action:dir(rtl) { border-right-width: 1px; }
+
+tabbar .start-action:dir(ltr) > *, tabbar .end-action:dir(rtl) > * { margin-right: 1px; }
+
+tabbar .start-action:dir(rtl), tabbar .end-action:dir(ltr) { border-left-width: 1px; }
+
+tabbar .start-action:dir(rtl) > *, tabbar .end-action:dir(ltr) > * { margin-left: 1px; }
+
+.tab-drag-icon tab { min-height: 26px; background-color: #3c3c3c; box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 
0.25), 0 0 0 1px rgba(27, 27, 27, 0.9), inset 0 1px rgba(238, 238, 236, 0.07); margin: 25px; }
+
+tabbar tab, .tab-drag-icon tab { padding: 6px; }
+
+tabbar tab.needs-attention, .tab-drag-icon 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%); }
+
+tabbar tab .tab-close-button, tabbar tab .tab-indicator, .tab-drag-icon tab .tab-close-button, 
.tab-drag-icon tab .tab-indicator { padding: 0; margin: 0; min-width: 24px; min-height: 24px; border-radius: 
99px; border: none; box-shadow: none; -gtk-icon-shadow: none; text-shadow: none; background: none; }
+
+tabbar tab .tab-close-button:hover, tabbar tab .tab-indicator.clickable:hover, .tab-drag-icon tab 
.tab-close-button:hover, .tab-drag-icon tab .tab-indicator.clickable:hover { background: alpha(#eeeeec, 
0.15); }
+
+tabbar tab .tab-close-button:active, tabbar tab .tab-indicator.clickable:active, .tab-drag-icon tab 
.tab-close-button:active, .tab-drag-icon tab .tab-indicator.clickable:active { background: alpha(black, 0.2); 
}
diff --git a/src/themes/Adwaita.css b/src/themes/Adwaita.css
index d6ab3e90..4bd7dc3b 100644
--- a/src/themes/Adwaita.css
+++ b/src/themes/Adwaita.css
@@ -89,6 +89,8 @@ preferencesgroup > box > label:not(:first-child) { margin-top: 6px; }
 
 preferencesgroup > box > box:not(:first-child) { margin-top: 12px; }
 
+tabbar .tab-indicator:not(.clickable) { background: none; box-shadow: none; border-color: transparent; }
+
 /*************************** Check and Radio buttons * */
 popover.combo list { min-width: 200px; }
 
@@ -215,3 +217,73 @@ window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):
 statuspage > scrolledwindow > viewport > box > clamp > box > .icon { color: rgba(46, 52, 54, 0.5); }
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .icon:backdrop { color: rgba(146, 149, 149, 
0.5); }
+
+tabbar .box { min-height: 38px; background: #d4cfca; border-bottom: 1px solid #bfb8b1; }
+
+tabbar .box:backdrop { background-color: #e1dedb; border-color: #d5d0cc; }
+
+tabbar scrolledwindow.pinned undershoot { border: 0 solid #bfb8b1; }
+
+tabbar scrolledwindow.pinned:dir(rtl) undershoot.left { border-left-width: 1px; }
+
+tabbar scrolledwindow.pinned:dir(ltr) undershoot.right { border-right-width: 1px; }
+
+tabbar scrolledwindow.pinned:backdrop undershoot { border-color: #d5d0cc; }
+
+tabbar scrolledwindow.pinned tabbox:dir(ltr) { padding-right: 1px; box-shadow: inset -1px 0 #bfb8b1; }
+
+tabbar scrolledwindow.pinned tabbox:dir(ltr):backdrop { box-shadow: inset -1px 0 #d5d0cc; }
+
+tabbar scrolledwindow.pinned tabbox:dir(rtl) { padding-left: 1px; box-shadow: inset 1px 0 #bfb8b1; }
+
+tabbar scrolledwindow.pinned tabbox:dir(rtl):backdrop { box-shadow: inset 1px 0 #d5d0cc; }
+
+tabbar undershoot { transition: none; }
+
+tabbar undershoot.left { background: linear-gradient(to right, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0) 20px); }
+
+tabbar undershoot.right { background: linear-gradient(to left, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0) 20px); }
+
+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); }
+
+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); }
+
+tabbar tab { min-width: 118px; border-style: solid; border-color: #bfb8b1; border-width: 0 1px 0 1px; 
transition: background 150ms ease-in-out; background-color: #dad6d2; }
+
+tabbar tab.pinned { min-width: 28px; }
+
+tabbar tab:checked { background-color: #e8e6e3; }
+
+tabbar tab:checked:hover { background-color: #efedec; }
+
+tabbar tab:hover { background-color: #e1dedb; }
+
+tabbar tab:backdrop { border-color: #d5d0cc; background-color: #e8e6e3; }
+
+tabbar tab:backdrop:checked { background-color: #f6f5f4; }
+
+tabbar .start-action, tabbar .end-action { background: #dad6d2; border-color: #bfb8b1; border-style: solid; 
transition: background 150ms ease-in-out; }
+
+tabbar .start-action:backdrop, tabbar .end-action:backdrop { border-color: #d5d0cc; background-color: 
#e8e6e3; }
+
+tabbar .start-action button, tabbar .end-action button { border: none; border-radius: 0; }
+
+tabbar .start-action:dir(ltr), tabbar .end-action:dir(rtl) { border-right-width: 1px; }
+
+tabbar .start-action:dir(ltr) > *, tabbar .end-action:dir(rtl) > * { margin-right: 1px; }
+
+tabbar .start-action:dir(rtl), tabbar .end-action:dir(ltr) { border-left-width: 1px; }
+
+tabbar .start-action:dir(rtl) > *, tabbar .end-action:dir(ltr) > * { margin-left: 1px; }
+
+.tab-drag-icon tab { min-height: 26px; background-color: #efedec; box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 
0.25), 0 0 0 1px rgba(0, 0, 0, 0.23), inset 0 1px rgba(255, 255, 255, 0.8); margin: 25px; }
+
+tabbar tab, .tab-drag-icon tab { padding: 6px; }
+
+tabbar tab.needs-attention, .tab-drag-icon 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%); }
+
+tabbar tab .tab-close-button, tabbar tab .tab-indicator, .tab-drag-icon tab .tab-close-button, 
.tab-drag-icon tab .tab-indicator { padding: 0; margin: 0; min-width: 24px; min-height: 24px; border-radius: 
99px; border: none; box-shadow: none; -gtk-icon-shadow: none; text-shadow: none; background: none; }
+
+tabbar tab .tab-close-button:hover, tabbar tab .tab-indicator.clickable:hover, .tab-drag-icon tab 
.tab-close-button:hover, .tab-drag-icon tab .tab-indicator.clickable:hover { background: alpha(#2e3436, 
0.15); }
+
+tabbar tab .tab-close-button:active, tabbar tab .tab-indicator.clickable:active, .tab-drag-icon tab 
.tab-close-button:active, .tab-drag-icon tab .tab-indicator.clickable:active { background: alpha(black, 0.2); 
}
diff --git a/src/themes/HighContrast.css b/src/themes/HighContrast.css
index f13c9204..b3717c97 100644
--- a/src/themes/HighContrast.css
+++ b/src/themes/HighContrast.css
@@ -89,6 +89,8 @@ preferencesgroup > box > label:not(:first-child) { margin-top: 6px; }
 
 preferencesgroup > box > box:not(:first-child) { margin-top: 12px; }
 
+tabbar .tab-indicator:not(.clickable) { background: none; box-shadow: none; border-color: transparent; }
+
 /*************************** Check and Radio buttons * */
 popover.combo list { min-width: 200px; }
 
@@ -215,3 +217,73 @@ window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):
 statuspage > scrolledwindow > viewport > box > clamp > box > .icon { color: rgba(39, 44, 46, 0.5); }
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .icon:backdrop { color: rgba(146, 149, 149, 
0.5); }
+
+tabbar .box { min-height: 38px; background: #dad6d2; border-bottom: 1px solid #6e645a; }
+
+tabbar .box:backdrop { background-color: #e1dedb; border-color: #d5d0cc; }
+
+tabbar scrolledwindow.pinned undershoot { border: 0 solid #6e645a; }
+
+tabbar scrolledwindow.pinned:dir(rtl) undershoot.left { border-left-width: 1px; }
+
+tabbar scrolledwindow.pinned:dir(ltr) undershoot.right { border-right-width: 1px; }
+
+tabbar scrolledwindow.pinned:backdrop undershoot { border-color: #d5d0cc; }
+
+tabbar scrolledwindow.pinned tabbox:dir(ltr) { padding-right: 1px; box-shadow: inset -1px 0 #6e645a; }
+
+tabbar scrolledwindow.pinned tabbox:dir(ltr):backdrop { box-shadow: inset -1px 0 #d5d0cc; }
+
+tabbar scrolledwindow.pinned tabbox:dir(rtl) { padding-left: 1px; box-shadow: inset 1px 0 #6e645a; }
+
+tabbar scrolledwindow.pinned tabbox:dir(rtl):backdrop { box-shadow: inset 1px 0 #d5d0cc; }
+
+tabbar undershoot { transition: none; }
+
+tabbar undershoot.left { background: linear-gradient(to right, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0) 20px); }
+
+tabbar undershoot.right { background: linear-gradient(to left, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0) 20px); }
+
+tabbar .needs-attention-left undershoot.left { background: linear-gradient(to right, rgba(27, 106, 203, 
0.7), rgba(27, 106, 203, 0.5) 1px, rgba(27, 106, 203, 0) 20px); }
+
+tabbar .needs-attention-right undershoot.right { background: linear-gradient(to left, rgba(27, 106, 203, 
0.7), rgba(27, 106, 203, 0.5) 1px, rgba(27, 106, 203, 0) 20px); }
+
+tabbar tab { min-width: 118px; border-style: solid; border-color: #6e645a; border-width: 0 1px 0 1px; 
transition: background 150ms ease-in-out; background-color: #e1dedb; }
+
+tabbar tab.pinned { min-width: 28px; }
+
+tabbar tab:checked { background-color: #efedec; }
+
+tabbar tab:checked:hover { background-color: #f6f5f4; }
+
+tabbar tab:hover { background-color: #e8e6e3; }
+
+tabbar tab:backdrop { border-color: #d5d0cc; background-color: #e8e6e3; }
+
+tabbar tab:backdrop:checked { background-color: #f6f5f4; }
+
+tabbar .start-action, tabbar .end-action { background: #e1dedb; border-color: #6e645a; border-style: solid; 
transition: background 150ms ease-in-out; }
+
+tabbar .start-action:backdrop, tabbar .end-action:backdrop { border-color: #d5d0cc; background-color: 
#e8e6e3; }
+
+tabbar .start-action button, tabbar .end-action button { border: none; border-radius: 0; }
+
+tabbar .start-action:dir(ltr), tabbar .end-action:dir(rtl) { border-right-width: 1px; }
+
+tabbar .start-action:dir(ltr) > *, tabbar .end-action:dir(rtl) > * { margin-right: 1px; }
+
+tabbar .start-action:dir(rtl), tabbar .end-action:dir(ltr) { border-left-width: 1px; }
+
+tabbar .start-action:dir(rtl) > *, tabbar .end-action:dir(ltr) > * { margin-left: 1px; }
+
+.tab-drag-icon tab { min-height: 26px; background-color: #f6f5f4; box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 
0.25), 0 0 0 1px rgba(0, 0, 0, 0.23), inset 0 1px rgba(255, 255, 255, 0.8); margin: 25px; }
+
+tabbar tab, .tab-drag-icon tab { padding: 6px; }
+
+tabbar tab.needs-attention, .tab-drag-icon tab.needs-attention { background-image: radial-gradient(ellipse 
at bottom, rgba(255, 255, 255, 0.8), rgba(27, 106, 203, 0.2) 15%, rgba(27, 106, 203, 0) 15%); }
+
+tabbar tab .tab-close-button, tabbar tab .tab-indicator, .tab-drag-icon tab .tab-close-button, 
.tab-drag-icon tab .tab-indicator { padding: 0; margin: 0; min-width: 24px; min-height: 24px; border-radius: 
99px; border: none; box-shadow: none; -gtk-icon-shadow: none; text-shadow: none; background: none; }
+
+tabbar tab .tab-close-button:hover, tabbar tab .tab-indicator.clickable:hover, .tab-drag-icon tab 
.tab-close-button:hover, .tab-drag-icon tab .tab-indicator.clickable:hover { background: alpha(#272c2e, 
0.15); }
+
+tabbar tab .tab-close-button:active, tabbar tab .tab-indicator.clickable:active, .tab-drag-icon tab 
.tab-close-button:active, .tab-drag-icon tab .tab-indicator.clickable:active { background: alpha(black, 0.2); 
}
diff --git a/src/themes/HighContrastInverse.css b/src/themes/HighContrastInverse.css
index 1c4faf29..a4e038ed 100644
--- a/src/themes/HighContrastInverse.css
+++ b/src/themes/HighContrastInverse.css
@@ -89,6 +89,8 @@ preferencesgroup > box > label:not(:first-child) { margin-top: 6px; }
 
 preferencesgroup > box > box:not(:first-child) { margin-top: 12px; }
 
+tabbar .tab-indicator:not(.clickable) { background: none; box-shadow: none; border-color: transparent; }
+
 /*************************** Check and Radio buttons * */
 popover.combo list { min-width: 200px; }
 
@@ -215,3 +217,73 @@ window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):
 statuspage > scrolledwindow > viewport > box > clamp > box > .icon { color: rgba(243, 243, 241, 0.5); }
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .icon:backdrop { color: rgba(145, 145, 144, 
0.5); }
+
+tabbar .box { min-height: 38px; background: #191919; border-bottom: 1px solid #4e4e4e; }
+
+tabbar .box:backdrop { background-color: #1e1e1e; border-color: #202020; }
+
+tabbar scrolledwindow.pinned undershoot { border: 0 solid #4e4e4e; }
+
+tabbar scrolledwindow.pinned:dir(rtl) undershoot.left { border-left-width: 1px; }
+
+tabbar scrolledwindow.pinned:dir(ltr) undershoot.right { border-right-width: 1px; }
+
+tabbar scrolledwindow.pinned:backdrop undershoot { border-color: #202020; }
+
+tabbar scrolledwindow.pinned tabbox:dir(ltr) { padding-right: 1px; box-shadow: inset -1px 0 #4e4e4e; }
+
+tabbar scrolledwindow.pinned tabbox:dir(ltr):backdrop { box-shadow: inset -1px 0 #202020; }
+
+tabbar scrolledwindow.pinned tabbox:dir(rtl) { padding-left: 1px; box-shadow: inset 1px 0 #4e4e4e; }
+
+tabbar scrolledwindow.pinned tabbox:dir(rtl):backdrop { box-shadow: inset 1px 0 #202020; }
+
+tabbar undershoot { transition: none; }
+
+tabbar undershoot.left { background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 20px); }
+
+tabbar undershoot.right { background: linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 20px); }
+
+tabbar .needs-attention-left undershoot.left { background: linear-gradient(to right, rgba(15, 59, 113, 0.7), 
rgba(15, 59, 113, 0.5) 1px, rgba(15, 59, 113, 0) 20px); }
+
+tabbar .needs-attention-right undershoot.right { background: linear-gradient(to left, rgba(15, 59, 113, 
0.7), rgba(15, 59, 113, 0.5) 1px, rgba(15, 59, 113, 0) 20px); }
+
+tabbar tab { min-width: 118px; border-style: solid; border-color: #4e4e4e; border-width: 0 1px 0 1px; 
transition: background 150ms ease-in-out; background-color: #202020; }
+
+tabbar tab.pinned { min-width: 28px; }
+
+tabbar tab:checked { background-color: #303030; }
+
+tabbar tab:checked:hover { background-color: #373737; }
+
+tabbar tab:hover { background-color: #282828; }
+
+tabbar tab:backdrop { border-color: #202020; background-color: #262626; }
+
+tabbar tab:backdrop:checked { background-color: #353535; }
+
+tabbar .start-action, tabbar .end-action { background: #202020; border-color: #4e4e4e; border-style: solid; 
transition: background 150ms ease-in-out; }
+
+tabbar .start-action:backdrop, tabbar .end-action:backdrop { border-color: #202020; background-color: 
#262626; }
+
+tabbar .start-action button, tabbar .end-action button { border: none; border-radius: 0; }
+
+tabbar .start-action:dir(ltr), tabbar .end-action:dir(rtl) { border-right-width: 1px; }
+
+tabbar .start-action:dir(ltr) > *, tabbar .end-action:dir(rtl) > * { margin-right: 1px; }
+
+tabbar .start-action:dir(rtl), tabbar .end-action:dir(ltr) { border-left-width: 1px; }
+
+tabbar .start-action:dir(rtl) > *, tabbar .end-action:dir(ltr) > * { margin-left: 1px; }
+
+.tab-drag-icon tab { min-height: 26px; background-color: #373737; box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 
0.25), 0 0 0 1px rgba(104, 104, 104, 0.9), inset 0 1px rgba(238, 238, 236, 0.07); margin: 25px; }
+
+tabbar tab, .tab-drag-icon tab { padding: 6px; }
+
+tabbar tab.needs-attention, .tab-drag-icon tab.needs-attention { background-image: radial-gradient(ellipse 
at bottom, rgba(255, 255, 255, 0.8), rgba(15, 59, 113, 0.2) 15%, rgba(15, 59, 113, 0) 15%); }
+
+tabbar tab .tab-close-button, tabbar tab .tab-indicator, .tab-drag-icon tab .tab-close-button, 
.tab-drag-icon tab .tab-indicator { padding: 0; margin: 0; min-width: 24px; min-height: 24px; border-radius: 
99px; border: none; box-shadow: none; -gtk-icon-shadow: none; text-shadow: none; background: none; }
+
+tabbar tab .tab-close-button:hover, tabbar tab .tab-indicator.clickable:hover, .tab-drag-icon tab 
.tab-close-button:hover, .tab-drag-icon tab .tab-indicator.clickable:hover { background: alpha(#f3f3f1, 
0.15); }
+
+tabbar tab .tab-close-button:active, tabbar tab .tab-indicator.clickable:active, .tab-drag-icon tab 
.tab-close-button:active, .tab-drag-icon tab .tab-indicator.clickable:active { background: alpha(black, 0.2); 
}
diff --git a/src/themes/_Adwaita-base.scss b/src/themes/_Adwaita-base.scss
index ecedc684..5d2c6a30 100644
--- a/src/themes/_Adwaita-base.scss
+++ b/src/themes/_Adwaita-base.scss
@@ -2,6 +2,9 @@
 @import 'fallback-base';
 @import 'shared-base';
 
+$tab_bg: darken($bg_color, if($variant == 'dark', 6%, 12%));
+$tab_bg_backdrop: darken($backdrop_bg_color, 6%);
+
 // HdyComboRow
 
 popover.combo {
@@ -344,3 +347,222 @@ statuspage > scrolledwindow > viewport > box > clamp > box > .icon {
     color: transparentize($backdrop_fg_color, 0.5);
   }
 }
+
+// Tabs
+
+@mixin undershoot-gradient($dir) {
+  @if $variant == 'dark' {
+    background: linear-gradient(to #{$dir},
+                                transparentize(black, .6),
+                                transparentize(black, 1) 20px);
+  }
+  @else {
+    background: linear-gradient(to #{$dir},
+                                transparentize(black, .93),
+                                transparentize(black, 1) 20px);
+  }
+}
+
+@mixin need-attention-gradient($dir) {
+  background: linear-gradient(to #{$dir},
+                              transparentize($selected_bg_color, .3),
+                              transparentize($selected_bg_color, .5) 1px,
+                              transparentize($selected_bg_color, 1) 20px);
+}
+
+tabbar {
+  .box {
+    min-height: 38px;
+    background: darken($tab_bg, 3%);
+    border-bottom: 1px solid $alt_borders_color;
+
+    &:backdrop {
+      background-color: darken($tab_bg_backdrop, 3%);
+      border-color: $backdrop_borders_color;
+    }
+  }
+
+  scrolledwindow.pinned {
+    undershoot {
+      border: 0 solid $alt_borders_color;
+    }
+
+    &:dir(rtl) undershoot.left {
+      border-left-width: 1px;
+    }
+
+    &:dir(ltr) undershoot.right {
+      border-right-width: 1px;
+    }
+
+    &:backdrop undershoot {
+      border-color: $backdrop_borders_color;
+    }
+
+    tabbox {
+      &: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 {
+    transition: none;
+
+    &.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 {
+    min-width: 118px;
+    border-style: solid;
+    border-color: $alt_borders_color;
+    border-width: 0 1px 0 1px;
+    transition: background 150ms ease-in-out;
+    background-color: $tab_bg;
+
+    &.pinned {
+      min-width: 28px;
+    }
+
+    &:checked {
+      background-color: lighten($tab_bg, 6%);
+
+      &:hover {
+        background-color: lighten($tab_bg, 9%);
+      }
+    }
+
+    &:hover {
+      background-color: lighten($tab_bg, 3%);
+    }
+
+    &:backdrop {
+      border-color: $backdrop_borders_color;
+      background-color: $tab_bg_backdrop;
+
+      &:checked {
+        background-color: $backdrop_bg_color;
+      }
+    }
+  }
+
+  .start-action,
+  .end-action {
+    background: $tab_bg;
+    border-color: $alt_borders_color;
+    border-style: solid;
+    transition: background 150ms ease-in-out;
+
+    &:backdrop {
+      border-color: $backdrop_borders_color;
+      background-color: $tab_bg_backdrop;
+    }
+
+    button {
+      border: none;
+      border-radius: 0;
+    }
+  }
+
+  .start-action:dir(ltr),
+  .end-action:dir(rtl) {
+    border-right-width: 1px;
+
+    > * {
+      margin-right: 1px;
+    }
+  }
+
+  .start-action:dir(rtl),
+  .end-action:dir(ltr) {
+    border-left-width: 1px;
+
+    > * {
+      margin-left: 1px;
+    }
+  }
+}
+
+.tab-drag-icon {
+  tab {
+    min-height: 26px;
+    background-color: lighten($tab_bg, 9%);
+
+    $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
+
+    box-shadow: 0 3px 9px 1px transparentize(black, 0.75),
+                0 0 0 1px $_wm_border, //doing borders with box-shadow
+                inset 0 1px $top_hilight;
+
+    margin: 25px;
+  }
+}
+
+tabbar,
+.tab-drag-icon {
+  tab {
+    padding: 6px;
+
+    &.needs-attention {
+      background-image:
+        radial-gradient(ellipse at bottom,
+                        transparentize(white, .2),
+                        transparentize($selected_bg_color, .8) 15%,
+                        transparentize($selected_bg_color, 1) 15%);
+    }
+
+    .tab-close-button,
+    .tab-indicator {
+      padding: 0;
+      margin: 0;
+      min-width: 24px;
+      min-height: 24px;
+      border-radius: 99px;
+
+      border: none;
+      box-shadow: none;
+      -gtk-icon-shadow: none;
+      text-shadow: none;
+      background: none;
+    }
+
+    .tab-close-button,
+    .tab-indicator.clickable {
+      &:hover {
+        background: hdyalpha($fg_color, .15);
+      }
+
+      &:active {
+        background: hdyalpha(black, .2);
+      }
+    }
+  }
+}
diff --git a/src/themes/_fallback-base.scss b/src/themes/_fallback-base.scss
index b6c9d599..3ade8c08 100644
--- a/src/themes/_fallback-base.scss
+++ b/src/themes/_fallback-base.scss
@@ -185,3 +185,9 @@ preferencesgroup > box {
     margin-top: 12px;
   }
 }
+
+tabbar .tab-indicator:not(.clickable) {
+  background: none;
+  box-shadow: none;
+  border-color: transparent;
+}
diff --git a/src/themes/fallback.css b/src/themes/fallback.css
index 90bd27ce..8638fc6a 100644
--- a/src/themes/fallback.css
+++ b/src/themes/fallback.css
@@ -88,3 +88,5 @@ preferencespage > scrolledwindow > viewport > clamp { margin: 18px 12px; }
 preferencesgroup > box > label:not(:first-child) { margin-top: 6px; }
 
 preferencesgroup > box > box:not(:first-child) { margin-top: 12px; }
+
+tabbar .tab-indicator:not(.clickable) { background: none; box-shadow: none; border-color: transparent; }
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]