[libadwaita/wip/exalm/tabs: 33/34] Add styles for AdwTab*

From: Alexander Mikhaylenko <alexm src gnome org>
To: commits-list gnome org
Cc:
Subject: [libadwaita/wip/exalm/tabs: 33/34] Add styles for AdwTab*
Date: Fri, 2 Apr 2021 11:02:24 +0000 (UTC)

commit 3b37bd8ffb0b668db3a8c320b316bff9890270c6
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sun Sep 13 02:28:08 2020 +0500

    Add styles for AdwTab*

 src/themes/Adwaita-dark.css        |  78 ++++++++++++++
 src/themes/Adwaita.css             |  78 ++++++++++++++
 src/themes/HighContrast.css        |  78 ++++++++++++++
 src/themes/HighContrastInverse.css |  78 ++++++++++++++
 src/themes/_Adwaita-base.scss      | 210 +++++++++++++++++++++++++++++++++++++
 src/themes/_shared-base.scss       |   5 +
 src/themes/shared.css              |   2 +
 7 files changed, 529 insertions(+)
---
diff --git a/src/themes/Adwaita-dark.css b/src/themes/Adwaita-dark.css
index ee7df25..6bbd23b 100644
--- a/src/themes/Adwaita-dark.css
+++ b/src/themes/Adwaita-dark.css
@@ -102,6 +102,8 @@ listview.inline { background: none; }
 
 popover.combo list, popover.combo listview { min-width: 200px; }
 
+tabview, tabbox { box-shadow: none; }
+
 popover.combo > contents { padding: 0px; }
 
 popover.combo > contents list, popover.combo > contents listview { border-style: none; background-color: 
transparent; }
@@ -207,3 +209,79 @@ 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) { 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) { box-shadow: inset 1px 0 #070707; }
+
+tabbar scrolledwindow.pinned tabbox:dir(rtl):backdrop { box-shadow: inset 1px 0 #202020; }
+
+tabbar scrolledwindow.pinned tabbox:dir(ltr) { 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) { box-shadow: inset 1px 0 #070707; }
+
+tabbar scrolledwindow.pinned tabbox:dir(rtl):backdrop { box-shadow: inset 1px 0 #202020; }
+
+tabbar undershoot { transition: background 150ms ease-in-out; }
+
+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 { border-style: solid; border-color: #070707; border-width: 0 1px 0 1px; transition: background 
150ms ease-in-out, outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms 
cubic-bezier(0.25, 0.46, 0.45, 0.94); background-color: #262626; }
+
+tabbar tab { outline: 0 solid transparent; outline-offset: 4px; }
+
+tabbar tab:focus:focus-visible { outline-color: rgba(21, 83, 158, 0.7); outline-width: 2px; outline-offset: 
-2px; }
+
+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(rtl), tabbar .end-action:dir(ltr) { border-left-width: 1px; }
+
+dnd 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, dnd tab { padding: 6px; }
+
+tabbar tab.needs-attention, dnd 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 button, dnd tab button { 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 button:hover, dnd tab button:hover { background: alpha(#eeeeec, 0.15); }
+
+tabbar tab button:active, dnd tab button:active { background: alpha(black, 0.2); }
diff --git a/src/themes/Adwaita.css b/src/themes/Adwaita.css
index 87b18a4..0f48a69 100644
--- a/src/themes/Adwaita.css
+++ b/src/themes/Adwaita.css
@@ -102,6 +102,8 @@ listview.inline { background: none; }
 
 popover.combo list, popover.combo listview { min-width: 200px; }
 
+tabview, tabbox { box-shadow: none; }
+
 popover.combo > contents { padding: 0px; }
 
 popover.combo > contents list, popover.combo > contents listview { border-style: none; background-color: 
transparent; }
@@ -207,3 +209,79 @@ 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) { 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) { box-shadow: inset 1px 0 #bfb8b1; }
+
+tabbar scrolledwindow.pinned tabbox:dir(rtl):backdrop { box-shadow: inset 1px 0 #d5d0cc; }
+
+tabbar scrolledwindow.pinned tabbox:dir(ltr) { 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) { box-shadow: inset 1px 0 #bfb8b1; }
+
+tabbar scrolledwindow.pinned tabbox:dir(rtl):backdrop { box-shadow: inset 1px 0 #d5d0cc; }
+
+tabbar undershoot { transition: background 150ms ease-in-out; }
+
+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 { border-style: solid; border-color: #bfb8b1; border-width: 0 1px 0 1px; transition: background 
150ms ease-in-out, outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms 
cubic-bezier(0.25, 0.46, 0.45, 0.94); background-color: #dad6d2; }
+
+tabbar tab { outline: 0 solid transparent; outline-offset: 4px; }
+
+tabbar tab:focus:focus-visible { outline-color: rgba(53, 132, 228, 0.5); outline-width: 2px; outline-offset: 
-2px; }
+
+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(rtl), tabbar .end-action:dir(ltr) { border-left-width: 1px; }
+
+dnd 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, dnd tab { padding: 6px; }
+
+tabbar tab.needs-attention, dnd 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 button, dnd tab button { 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 button:hover, dnd tab button:hover { background: alpha(#2e3436, 0.15); }
+
+tabbar tab button:active, dnd tab button:active { background: alpha(black, 0.2); }
diff --git a/src/themes/HighContrast.css b/src/themes/HighContrast.css
index 805cd09..4408602 100644
--- a/src/themes/HighContrast.css
+++ b/src/themes/HighContrast.css
@@ -102,6 +102,8 @@ listview.inline { background: none; }
 
 popover.combo list, popover.combo listview { min-width: 200px; }
 
+tabview, tabbox { box-shadow: none; }
+
 popover.combo > contents { padding: 0px; }
 
 popover.combo > contents list, popover.combo > contents listview { border-style: none; background-color: 
transparent; }
@@ -207,3 +209,79 @@ 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) { 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) { box-shadow: inset 1px 0 #6e645a; }
+
+tabbar scrolledwindow.pinned tabbox:dir(rtl):backdrop { box-shadow: inset 1px 0 #d5d0cc; }
+
+tabbar scrolledwindow.pinned tabbox:dir(ltr) { 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) { box-shadow: inset 1px 0 #6e645a; }
+
+tabbar scrolledwindow.pinned tabbox:dir(rtl):backdrop { box-shadow: inset 1px 0 #d5d0cc; }
+
+tabbar undershoot { transition: background 150ms ease-in-out; }
+
+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 { border-style: solid; border-color: #6e645a; border-width: 0 1px 0 1px; transition: background 
150ms ease-in-out, outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms 
cubic-bezier(0.25, 0.46, 0.45, 0.94); background-color: #e1dedb; }
+
+tabbar tab { outline: 0 solid transparent; outline-offset: 4px; }
+
+tabbar tab:focus:focus-visible { outline-color: rgba(27, 106, 203, 0.8); outline-width: 2px; outline-offset: 
-2px; }
+
+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(rtl), tabbar .end-action:dir(ltr) { border-left-width: 1px; }
+
+dnd 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, dnd tab { padding: 6px; }
+
+tabbar tab.needs-attention, dnd 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 button, dnd tab button { 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 button:hover, dnd tab button:hover { background: alpha(#272c2e, 0.15); }
+
+tabbar tab button:active, dnd tab button:active { background: alpha(black, 0.2); }
diff --git a/src/themes/HighContrastInverse.css b/src/themes/HighContrastInverse.css
index cb0d4b1..1720949 100644
--- a/src/themes/HighContrastInverse.css
+++ b/src/themes/HighContrastInverse.css
@@ -102,6 +102,8 @@ listview.inline { background: none; }
 
 popover.combo list, popover.combo listview { min-width: 200px; }
 
+tabview, tabbox { box-shadow: none; }
+
 popover.combo > contents { padding: 0px; }
 
 popover.combo > contents list, popover.combo > contents listview { border-style: none; background-color: 
transparent; }
@@ -207,3 +209,79 @@ 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) { 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) { box-shadow: inset 1px 0 #4e4e4e; }
+
+tabbar scrolledwindow.pinned tabbox:dir(rtl):backdrop { box-shadow: inset 1px 0 #202020; }
+
+tabbar scrolledwindow.pinned tabbox:dir(ltr) { 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) { box-shadow: inset 1px 0 #4e4e4e; }
+
+tabbar scrolledwindow.pinned tabbox:dir(rtl):backdrop { box-shadow: inset 1px 0 #202020; }
+
+tabbar undershoot { transition: background 150ms ease-in-out; }
+
+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 { border-style: solid; border-color: #4e4e4e; border-width: 0 1px 0 1px; transition: background 
150ms ease-in-out, outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms 
cubic-bezier(0.25, 0.46, 0.45, 0.94); background-color: #202020; }
+
+tabbar tab { outline: 0 solid transparent; outline-offset: 4px; }
+
+tabbar tab:focus:focus-visible { outline-color: rgba(255, 255, 255, 0.6); outline-width: 2px; 
outline-offset: -2px; }
+
+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(rtl), tabbar .end-action:dir(ltr) { border-left-width: 1px; }
+
+dnd 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, dnd tab { padding: 6px; }
+
+tabbar tab.needs-attention, dnd 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 button, dnd tab button { 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 button:hover, dnd tab button:hover { background: alpha(#f3f3f1, 0.15); }
+
+tabbar tab button:active, dnd tab button:active { background: alpha(black, 0.2); }
diff --git a/src/themes/_Adwaita-base.scss b/src/themes/_Adwaita-base.scss
index 205b6b1..d0192f3 100644
--- a/src/themes/_Adwaita-base.scss
+++ b/src/themes/_Adwaita-base.scss
@@ -2,10 +2,15 @@
 @import 'fallback-base';
 @import 'shared-base';
 
+$tab_bg: darken($bg_color, if($variant == 'dark', 6%, 12%));
+$tab_bg_backdrop: darken($backdrop_bg_color, 6%);
+
 // AdwComboRow
 
+$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 $button_radius: 5px;
 $popover_radius: $button_radius + 4;
+$focus_transition: outline-width 200ms $ease-out-quad, outline-offset 200ms $ease-out-quad;
 
 popover.combo > contents {
   padding: 0px;
@@ -323,3 +328,208 @@ 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;
+    }
+  }
+
+  // FIXME: for some reason it's ignored if it's only present once
+  @for $i from 1 through 2 {
+    scrolledwindow.pinned tabbox {
+      &:dir(ltr) {
+        box-shadow: inset -1px 0 $alt_borders_color;
+
+        &:backdrop {
+          box-shadow: inset -1px 0 $backdrop_borders_color;
+        }
+      }
+
+      &:dir(rtl) {
+        box-shadow: inset 1px 0 $alt_borders_color;
+
+        &:backdrop {
+          box-shadow: inset 1px 0 $backdrop_borders_color;
+        }
+      }
+    }
+  }
+
+  undershoot {
+    transition: background 150ms ease-in-out;
+
+    &.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-style: solid;
+    border-color: $alt_borders_color;
+    border-width: 0 1px 0 1px;
+    transition: background 150ms ease-in-out, $focus_transition;
+    background-color: $tab_bg;
+
+    @include focus-ring();
+
+    &: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;
+  }
+
+  .start-action:dir(rtl),
+  .end-action:dir(ltr) {
+    border-left-width: 1px;
+  }
+}
+
+dnd {
+  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,
+dnd {
+  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%);
+    }
+
+    button {
+      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;
+
+      &:hover {
+        background: adwalpha($fg_color, .15);
+      }
+
+      &:active {
+        background: adwalpha(black, .2);
+      }
+    }
+  }
+}
diff --git a/src/themes/_shared-base.scss b/src/themes/_shared-base.scss
index f4c15ff..bc74539 100644
--- a/src/themes/_shared-base.scss
+++ b/src/themes/_shared-base.scss
@@ -11,3 +11,8 @@ popover.combo {
     min-width: 200px;
   }
 }
+
+tabview,
+tabbox {
+  box-shadow: none;
+}
diff --git a/src/themes/shared.css b/src/themes/shared.css
index d849481..28b7020 100644
--- a/src/themes/shared.css
+++ b/src/themes/shared.css
@@ -2,3 +2,5 @@
 listview.inline { background: none; }
 
 popover.combo list, popover.combo listview { min-width: 200px; }
+
+tabview, tabbox { box-shadow: none; }
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]