[libhandy/tabs: 28/62] Experimental close-button-on-hover
- From: Alexander Mikhaylenko <alexm src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [libhandy/tabs: 28/62] Experimental close-button-on-hover
- Date: Sat, 12 Sep 2020 19:27:44 +0000 (UTC)
commit aa15e41ab253ced4d93c97d0d9a0f11427e43c09
Author: Alexander Mikhaylenko <alexm gnome org>
Date: Mon Sep 7 17:34:17 2020 +0500
Experimental close-button-on-hover
src/hdy-tab.ui | 122 ++++++++++++++++++++-----------------
src/themes/Adwaita-dark.css | 35 ++++++++++-
src/themes/Adwaita.css | 35 ++++++++++-
src/themes/HighContrast.css | 35 ++++++++++-
src/themes/HighContrastInverse.css | 35 ++++++++++-
src/themes/_Adwaita-base.scss | 43 +++++++++++--
6 files changed, 240 insertions(+), 65 deletions(-)
---
diff --git a/src/hdy-tab.ui b/src/hdy-tab.ui
index c5997ae1..268c7d7b 100644
--- a/src/hdy-tab.ui
+++ b/src/hdy-tab.ui
@@ -11,90 +11,102 @@
<class name="tab-contents"/>
</style>
<child>
- <object class="GtkBox">
+ <object class="GtkOverlay">
<property name="visible">True</property>
<child>
- <object class="GtkButton" id="secondary_icon_btn">
+ <object class="GtkBox">
<property name="visible">True</property>
- <property name="can-focus">False</property>
- <property name="valign">center</property>
- <property name="halign">start</property>
- <signal name="clicked" handler="secondary_icon_clicked_cb" swapped="true"/>
- <style>
- <class name="tab-secondary-icon"/>
- </style>
<child>
- <object class="GtkImage" id="secondary_icon">
+ <object class="GtkButton" id="secondary_icon_btn">
<property name="visible">True</property>
+ <property name="can-focus">False</property>
+ <property name="valign">center</property>
+ <property name="halign">start</property>
+ <signal name="clicked" handler="secondary_icon_clicked_cb" swapped="true"/>
+ <style>
+ <class name="tab-secondary-icon"/>
+ </style>
+ <child>
+ <object class="GtkImage" id="secondary_icon">
+ <property name="visible">True</property>
+ </object>
+ </child>
</object>
</child>
- </object>
- </child>
- <child type="center">
- <object class="GtkBox">
- <property name="visible">True</property>
- <child>
- <object class="GtkStack" id="icon_stack">
+ <child type="center">
+ <object class="GtkBox">
<property name="visible">True</property>
- <property name="margin-start">6</property>
- <property name="margin-end">6</property>
<child>
- <object class="GtkImage" id="icon">
+ <object class="GtkStack" id="icon_stack">
<property name="visible">True</property>
- <style>
- <class name="tab-icon"/>
- </style>
+ <property name="margin-start">6</property>
+ <property name="margin-end">6</property>
+ <child>
+ <object class="GtkImage" id="icon">
+ <property name="visible">True</property>
+ <style>
+ <class name="tab-icon"/>
+ </style>
+ </object>
+ <packing>
+ <property name="name">icon</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkSpinner">
+ <property name="visible">True</property>
+ <property name="active">True</property>
+ </object>
+ <packing>
+ <property name="name">spinner</property>
+ </packing>
+ </child>
</object>
- <packing>
- <property name="name">icon</property>
- </packing>
</child>
<child>
- <object class="GtkSpinner">
+ <object class="GtkLabel" id="title">
<property name="visible">True</property>
- <property name="active">True</property>
+ <property name="hexpand">True</property>
+ <property name="halign">center</property>
+ <property name="xalign">0</property>
+ <property name="ellipsize">end</property>
+ <property name="single-line-mode">True</property>
+ <style>
+ <class name="tab-title"/>
+ </style>
</object>
- <packing>
- <property name="name">spinner</property>
- </packing>
</child>
</object>
</child>
- <child>
- <object class="GtkLabel" id="title">
- <property name="visible">True</property>
- <property name="hexpand">True</property>
- <property name="halign">center</property>
- <property name="xalign">0</property>
- <property name="ellipsize">end</property>
- <property name="single-line-mode">True</property>
- <style>
- <class name="tab-title"/>
- </style>
- </object>
- </child>
</object>
</child>
- <child>
- <object class="GtkButton" id="close_btn">
- <property name="visible" bind-source="HdyTab" bind-property="selected"
bind-flags="sync-create"/>
- <property name="valign">center</property>
+ <child type="overlay">
+ <object class="GtkBox">
+ <property name="visible">True</property>
<property name="halign">end</property>
- <property name="can-focus">False</property>
- <property name="margin-start">6</property>
- <signal name="clicked" handler="close_clicked_cb" swapped="true"/>
<style>
- <class name="tab-close-button"/>
+ <class name="tab-close-button-scrim"/>
</style>
<child>
- <object class="GtkImage">
+ <object class="GtkButton" id="close_btn">
<property name="visible">True</property>
- <property name="icon-name">window-close-symbolic</property>
+ <property name="valign">center</property>
+ <property name="can-focus">False</property>
+ <signal name="clicked" handler="close_clicked_cb" swapped="true"/>
+ <style>
+ <class name="tab-close-button"/>
+ </style>
+ <child>
+ <object class="GtkImage">
+ <property name="visible">True</property>
+ <property name="icon-name">window-close-symbolic</property>
+ </object>
+ </child>
</object>
</child>
</object>
<packing>
- <property name="pack-type">end</property>
+ <property name="pass-through">True</property>
</packing>
</child>
</object>
diff --git a/src/themes/Adwaita-dark.css b/src/themes/Adwaita-dark.css
index c7d37b5b..e550d3d8 100644
--- a/src/themes/Adwaita-dark.css
+++ b/src/themes/Adwaita-dark.css
@@ -198,6 +198,7 @@ window.csd.unified:not(.solid-csd):not(.fullscreen) > decoration-overlay { box-s
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized),
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized)
decoration,
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized)
decoration-overlay { border-radius: 8px; }
+/* FIXME this should be inlined after we finalize the colors */
tabbar .box { min-height: 38px; background: #161616; border-color: #070707; border-style: solid; }
tabbar .box:backdrop { background-color: #262626; border-color: #202020; }
@@ -224,18 +225,40 @@ tabbar.needs-attention-left undershoot.left { background: linear-gradient(to rig
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: 130px; border-style: solid; border-color: #070707; border-width: 0 1px 0 1px;
background-color: #1e1e1e; transition: background 150ms ease-in-out; }
+tabbar tab { min-width: 130px; border-style: solid; border-color: #070707; border-width: 0 1px 0 1px;
transition: background 150ms ease-in-out; background-color: #1e1e1e; }
+
+tabbar tab .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right, rgba(30, 30, 30, 0),
#1e1e1e 18px); }
+
+tabbar tab .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(30, 30, 30, 0),
#1e1e1e 18px); }
tabbar tab.pinned { min-width: 40px; }
tabbar tab:checked { background-color: #262626; }
+tabbar tab:checked .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right, rgba(38, 38, 38,
0), #262626 18px); }
+
+tabbar tab:checked .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(38, 38, 38,
0), #262626 18px); }
+
tabbar tab:hover { background-color: #3a3a3a; }
+tabbar tab:hover .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right, rgba(58, 58, 58,
0), #3a3a3a 18px); }
+
+tabbar tab:hover .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(58, 58, 58,
0), #3a3a3a 18px); }
+
tabbar tab:backdrop { border-color: #202020; background-color: #2d2d2d; }
+tabbar tab:backdrop .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right, rgba(45, 45,
45, 0), #2d2d2d 18px); }
+
+tabbar tab:backdrop .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(45, 45, 45,
0), #2d2d2d 18px); }
+
tabbar tab:backdrop:checked { background-color: #353535; }
+tabbar tab:backdrop:checked .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right,
rgba(53, 53, 53, 0), #353535 18px); }
+
+tabbar tab:backdrop:checked .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(53,
53, 53, 0), #353535 18px); }
+
+tabbar tab:not(:hover):not(:checked) .tab-close-button-scrim { opacity: 0; }
+
tabbar .start-action, tabbar .end-action { background: #1e1e1e; 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:
#2d2d2d; }
@@ -252,6 +275,10 @@ tabbar .start-action:dir(rtl) > *, tabbar .end-action:dir(ltr) > * { margin-left
.tab-drag-icon tab { min-height: 38px; background-color: #3a3a3a; 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; }
+.tab-drag-icon tab .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right, rgba(58, 58, 58,
0), #3a3a3a 18px); }
+
+.tab-drag-icon tab .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(58, 58, 58,
0), #3a3a3a 18px); }
+
tabbar tab .tab-contents, .tab-drag-icon tab .tab-contents { 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%); }
@@ -261,3 +288,9 @@ tabbar tab .tab-close-button, tabbar tab .tab-secondary-icon, .tab-drag-icon tab
tabbar tab .tab-close-button:hover, tabbar tab .tab-secondary-icon.clickable:hover, .tab-drag-icon tab
.tab-close-button:hover, .tab-drag-icon tab .tab-secondary-icon.clickable:hover { background: alpha(#eeeeec,
0.15); }
tabbar tab .tab-close-button:active, tabbar tab .tab-secondary-icon.clickable:active, .tab-drag-icon tab
.tab-close-button:active, .tab-drag-icon tab .tab-secondary-icon.clickable:active { background: alpha(black,
0.2); }
+
+tabbar .tab-close-button-scrim, .tab-drag-icon .tab-close-button-scrim { transition: all 150ms ease-in-out; }
+
+tabbar .tab-close-button-scrim:dir(ltr), .tab-drag-icon .tab-close-button-scrim:dir(ltr) { padding-left:
21px; }
+
+tabbar .tab-close-button-scrim:dir(rtl), .tab-drag-icon .tab-close-button-scrim:dir(rtl) { padding-right:
21px; }
diff --git a/src/themes/Adwaita.css b/src/themes/Adwaita.css
index 6805a4c2..f99bae63 100644
--- a/src/themes/Adwaita.css
+++ b/src/themes/Adwaita.css
@@ -198,6 +198,7 @@ window.csd.unified:not(.solid-csd):not(.fullscreen) > decoration-overlay { box-s
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized),
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized)
decoration,
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized)
decoration-overlay { border-radius: 8px; }
+/* FIXME this should be inlined after we finalize the colors */
tabbar .box { min-height: 38px; background: #c6bfb9; border-color: #bfb8b1; border-style: solid; }
tabbar .box:backdrop { background-color: #e1dedb; border-color: #d5d0cc; }
@@ -224,18 +225,40 @@ tabbar.needs-attention-left undershoot.left { background: linear-gradient(to rig
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: 130px; border-style: solid; border-color: #bfb8b1; border-width: 0 1px 0 1px;
background-color: #cdc7c2; transition: background 150ms ease-in-out; }
+tabbar tab { min-width: 130px; border-style: solid; border-color: #bfb8b1; border-width: 0 1px 0 1px;
transition: background 150ms ease-in-out; background-color: #cdc7c2; }
+
+tabbar tab .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right, rgba(205, 199, 194, 0),
#cdc7c2 18px); }
+
+tabbar tab .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(205, 199, 194, 0),
#cdc7c2 18px); }
tabbar tab.pinned { min-width: 40px; }
tabbar tab:checked { background-color: #dad6d2; }
+tabbar tab:checked .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right, rgba(218, 214,
210, 0), #dad6d2 18px); }
+
+tabbar tab:checked .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(218, 214,
210, 0), #dad6d2 18px); }
+
tabbar tab:hover { background-color: #e6e3e0; }
+tabbar tab:hover .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right, rgba(230, 227,
224, 0), #e6e3e0 18px); }
+
+tabbar tab:hover .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(230, 227, 224,
0), #e6e3e0 18px); }
+
tabbar tab:backdrop { border-color: #d5d0cc; background-color: #e8e6e3; }
+tabbar tab:backdrop .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right, rgba(232, 230,
227, 0), #e8e6e3 18px); }
+
+tabbar tab:backdrop .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(232, 230,
227, 0), #e8e6e3 18px); }
+
tabbar tab:backdrop:checked { background-color: #f6f5f4; }
+tabbar tab:backdrop:checked .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right,
rgba(246, 245, 244, 0), #f6f5f4 18px); }
+
+tabbar tab:backdrop:checked .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left,
rgba(246, 245, 244, 0), #f6f5f4 18px); }
+
+tabbar tab:not(:hover):not(:checked) .tab-close-button-scrim { opacity: 0; }
+
tabbar .start-action, tabbar .end-action { background: #cdc7c2; 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; }
@@ -252,6 +275,10 @@ tabbar .start-action:dir(rtl) > *, tabbar .end-action:dir(ltr) > * { margin-left
.tab-drag-icon tab { min-height: 38px; background-color: #e6e3e0; 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; }
+.tab-drag-icon tab .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right, rgba(230, 227,
224, 0), #e6e3e0 18px); }
+
+.tab-drag-icon tab .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(230, 227,
224, 0), #e6e3e0 18px); }
+
tabbar tab .tab-contents, .tab-drag-icon tab .tab-contents { 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%); }
@@ -261,3 +288,9 @@ tabbar tab .tab-close-button, tabbar tab .tab-secondary-icon, .tab-drag-icon tab
tabbar tab .tab-close-button:hover, tabbar tab .tab-secondary-icon.clickable:hover, .tab-drag-icon tab
.tab-close-button:hover, .tab-drag-icon tab .tab-secondary-icon.clickable:hover { background: alpha(#2e3436,
0.15); }
tabbar tab .tab-close-button:active, tabbar tab .tab-secondary-icon.clickable:active, .tab-drag-icon tab
.tab-close-button:active, .tab-drag-icon tab .tab-secondary-icon.clickable:active { background: alpha(black,
0.2); }
+
+tabbar .tab-close-button-scrim, .tab-drag-icon .tab-close-button-scrim { transition: all 150ms ease-in-out; }
+
+tabbar .tab-close-button-scrim:dir(ltr), .tab-drag-icon .tab-close-button-scrim:dir(ltr) { padding-left:
21px; }
+
+tabbar .tab-close-button-scrim:dir(rtl), .tab-drag-icon .tab-close-button-scrim:dir(rtl) { padding-right:
21px; }
diff --git a/src/themes/HighContrast.css b/src/themes/HighContrast.css
index 240dc21d..49f62016 100644
--- a/src/themes/HighContrast.css
+++ b/src/themes/HighContrast.css
@@ -198,6 +198,7 @@ window.csd.unified:not(.solid-csd):not(.fullscreen) > decoration-overlay { box-s
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized),
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized)
decoration,
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized)
decoration-overlay { border-radius: 8px; }
+/* FIXME this should be inlined after we finalize the colors */
tabbar .box { min-height: 38px; background: #cdc7c2; border-color: #6e645a; border-style: solid; }
tabbar .box:backdrop { background-color: #e8e6e3; border-color: #d5d0cc; }
@@ -224,18 +225,40 @@ tabbar.needs-attention-left undershoot.left { background: linear-gradient(to rig
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: 130px; border-style: solid; border-color: #6e645a; border-width: 0 1px 0 1px;
background-color: #d4cfca; transition: background 150ms ease-in-out; }
+tabbar tab { min-width: 130px; border-style: solid; border-color: #6e645a; border-width: 0 1px 0 1px;
transition: background 150ms ease-in-out; background-color: #d4cfca; }
+
+tabbar tab .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right, rgba(212, 207, 202, 0),
#d4cfca 18px); }
+
+tabbar tab .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(212, 207, 202, 0),
#d4cfca 18px); }
tabbar tab.pinned { min-width: 40px; }
tabbar tab:checked { background-color: #e1dedb; }
+tabbar tab:checked .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right, rgba(225, 222,
219, 0), #e1dedb 18px); }
+
+tabbar tab:checked .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(225, 222,
219, 0), #e1dedb 18px); }
+
tabbar tab:hover { background-color: #edebe9; }
+tabbar tab:hover .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right, rgba(237, 235,
233, 0), #edebe9 18px); }
+
+tabbar tab:hover .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(237, 235, 233,
0), #edebe9 18px); }
+
tabbar tab:backdrop { border-color: #d5d0cc; background-color: #efedec; }
+tabbar tab:backdrop .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right, rgba(239, 237,
236, 0), #efedec 18px); }
+
+tabbar tab:backdrop .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(239, 237,
236, 0), #efedec 18px); }
+
tabbar tab:backdrop:checked { background-color: #fdfdfc; }
+tabbar tab:backdrop:checked .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right,
rgba(253, 253, 252, 0), #fdfdfc 18px); }
+
+tabbar tab:backdrop:checked .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left,
rgba(253, 253, 252, 0), #fdfdfc 18px); }
+
+tabbar tab:not(:hover):not(:checked) .tab-close-button-scrim { opacity: 0; }
+
tabbar .start-action, tabbar .end-action { background: #d4cfca; 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:
#efedec; }
@@ -252,6 +275,10 @@ tabbar .start-action:dir(rtl) > *, tabbar .end-action:dir(ltr) > * { margin-left
.tab-drag-icon tab { min-height: 38px; background-color: #edebe9; 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; }
+.tab-drag-icon tab .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right, rgba(237, 235,
233, 0), #edebe9 18px); }
+
+.tab-drag-icon tab .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(237, 235,
233, 0), #edebe9 18px); }
+
tabbar tab .tab-contents, .tab-drag-icon tab .tab-contents { 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%); }
@@ -261,3 +288,9 @@ tabbar tab .tab-close-button, tabbar tab .tab-secondary-icon, .tab-drag-icon tab
tabbar tab .tab-close-button:hover, tabbar tab .tab-secondary-icon.clickable:hover, .tab-drag-icon tab
.tab-close-button:hover, .tab-drag-icon tab .tab-secondary-icon.clickable:hover { background: alpha(#272c2e,
0.15); }
tabbar tab .tab-close-button:active, tabbar tab .tab-secondary-icon.clickable:active, .tab-drag-icon tab
.tab-close-button:active, .tab-drag-icon tab .tab-secondary-icon.clickable:active { background: alpha(black,
0.2); }
+
+tabbar .tab-close-button-scrim, .tab-drag-icon .tab-close-button-scrim { transition: all 150ms ease-in-out; }
+
+tabbar .tab-close-button-scrim:dir(ltr), .tab-drag-icon .tab-close-button-scrim:dir(ltr) { padding-left:
21px; }
+
+tabbar .tab-close-button-scrim:dir(rtl), .tab-drag-icon .tab-close-button-scrim:dir(rtl) { padding-right:
21px; }
diff --git a/src/themes/HighContrastInverse.css b/src/themes/HighContrastInverse.css
index 95242eca..75a0bd4f 100644
--- a/src/themes/HighContrastInverse.css
+++ b/src/themes/HighContrastInverse.css
@@ -198,6 +198,7 @@ window.csd.unified:not(.solid-csd):not(.fullscreen) > decoration-overlay { box-s
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized),
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized)
decoration,
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized)
decoration-overlay { border-radius: 8px; }
+/* FIXME this should be inlined after we finalize the colors */
tabbar .box { min-height: 38px; background: #111111; border-color: #4e4e4e; border-style: solid; }
tabbar .box:backdrop { background-color: #202020; border-color: #202020; }
@@ -224,18 +225,40 @@ tabbar.needs-attention-left undershoot.left { background: linear-gradient(to rig
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: 130px; border-style: solid; border-color: #4e4e4e; border-width: 0 1px 0 1px;
background-color: #191919; transition: background 150ms ease-in-out; }
+tabbar tab { min-width: 130px; border-style: solid; border-color: #4e4e4e; border-width: 0 1px 0 1px;
transition: background 150ms ease-in-out; background-color: #191919; }
+
+tabbar tab .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right, rgba(25, 25, 25, 0),
#191919 18px); }
+
+tabbar tab .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(25, 25, 25, 0),
#191919 18px); }
tabbar tab.pinned { min-width: 40px; }
tabbar tab:checked { background-color: #202020; }
+tabbar tab:checked .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right, rgba(32, 32, 32,
0), #202020 18px); }
+
+tabbar tab:checked .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(32, 32, 32,
0), #202020 18px); }
+
tabbar tab:hover { background-color: #353535; }
+tabbar tab:hover .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right, rgba(53, 53, 53,
0), #353535 18px); }
+
+tabbar tab:hover .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(53, 53, 53,
0), #353535 18px); }
+
tabbar tab:backdrop { border-color: #202020; background-color: #282828; }
+tabbar tab:backdrop .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right, rgba(40, 40,
40, 0), #282828 18px); }
+
+tabbar tab:backdrop .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(40, 40, 40,
0), #282828 18px); }
+
tabbar tab:backdrop:checked { background-color: #303030; }
+tabbar tab:backdrop:checked .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right,
rgba(48, 48, 48, 0), #303030 18px); }
+
+tabbar tab:backdrop:checked .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(48,
48, 48, 0), #303030 18px); }
+
+tabbar tab:not(:hover):not(:checked) .tab-close-button-scrim { opacity: 0; }
+
tabbar .start-action, tabbar .end-action { background: #191919; 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:
#282828; }
@@ -252,6 +275,10 @@ tabbar .start-action:dir(rtl) > *, tabbar .end-action:dir(ltr) > * { margin-left
.tab-drag-icon tab { min-height: 38px; background-color: #353535; 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; }
+.tab-drag-icon tab .tab-close-button-scrim:dir(ltr) { background: linear-gradient(to right, rgba(53, 53, 53,
0), #353535 18px); }
+
+.tab-drag-icon tab .tab-close-button-scrim:dir(rtl) { background: linear-gradient(to left, rgba(53, 53, 53,
0), #353535 18px); }
+
tabbar tab .tab-contents, .tab-drag-icon tab .tab-contents { 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%); }
@@ -261,3 +288,9 @@ tabbar tab .tab-close-button, tabbar tab .tab-secondary-icon, .tab-drag-icon tab
tabbar tab .tab-close-button:hover, tabbar tab .tab-secondary-icon.clickable:hover, .tab-drag-icon tab
.tab-close-button:hover, .tab-drag-icon tab .tab-secondary-icon.clickable:hover { background: alpha(#f3f3f1,
0.15); }
tabbar tab .tab-close-button:active, tabbar tab .tab-secondary-icon.clickable:active, .tab-drag-icon tab
.tab-close-button:active, .tab-drag-icon tab .tab-secondary-icon.clickable:active { background: alpha(black,
0.2); }
+
+tabbar .tab-close-button-scrim, .tab-drag-icon .tab-close-button-scrim { transition: all 150ms ease-in-out; }
+
+tabbar .tab-close-button-scrim:dir(ltr), .tab-drag-icon .tab-close-button-scrim:dir(ltr) { padding-left:
21px; }
+
+tabbar .tab-close-button-scrim:dir(rtl), .tab-drag-icon .tab-close-button-scrim:dir(rtl) { padding-right:
21px; }
diff --git a/src/themes/_Adwaita-base.scss b/src/themes/_Adwaita-base.scss
index 60137a10..e8d8547d 100644
--- a/src/themes/_Adwaita-base.scss
+++ b/src/themes/_Adwaita-base.scss
@@ -336,6 +336,7 @@ window.csd.unified:not(.solid-csd):not(.fullscreen) {
}
+/* FIXME this should be inlined after we finalize the colors */
$tab_selected_bg: darken(darken($bg_color, 10%), 2%);
$tab_selected_bg_backdrop: $bg_color;
@@ -386,6 +387,20 @@ $tab_needs_attention_color: $selected_bg_color;
transparentize($tab_needs_attention_color, 1) 20px);
}
+@mixin tab-background($color) {
+ background-color: $color;
+
+ .tab-close-button-scrim {
+ &:dir(ltr) {
+ background: linear-gradient(to right, transparentize($color, 1), $color 18px);
+ }
+
+ &:dir(rtl) {
+ background: linear-gradient(to left, transparentize($color, 1), $color 18px);
+ }
+ }
+}
+
tabbar {
.box {
min-height: 38px;
@@ -454,29 +469,33 @@ tabbar {
border-style: solid;
border-color: $alt_borders_color;
border-width: 0 1px 0 1px;
- background-color: $tab_bg;
transition: background 150ms ease-in-out;
+ @include tab-background($tab_bg);
&.pinned {
min-width: 40px;
}
&:checked {
- background-color: $tab_selected_bg;
+ @include tab-background($tab_selected_bg);
}
&:hover {
- background-color: $tab_hover_bg;
+ @include tab-background($tab_hover_bg);
}
&:backdrop {
border-color: $backdrop_borders_color;
- background-color: $tab_bg_backdrop;
+ @include tab-background($tab_bg_backdrop);
&:checked {
- background-color: $tab_selected_bg_backdrop;
+ @include tab-background($tab_selected_bg_backdrop);
}
}
+
+ &:not(:hover):not(:checked) .tab-close-button-scrim {
+ opacity: 0;
+ }
}
.start-action,
@@ -519,7 +538,7 @@ tabbar {
.tab-drag-icon {
tab {
min-height: 38px;
- background-color: $tab_hover_bg;
+ @include tab-background($tab_hover_bg);
$_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
@@ -572,4 +591,16 @@ tabbar,
}
}
}
+
+ .tab-close-button-scrim {
+ transition: all 150ms ease-in-out;
+
+ &:dir(ltr) {
+ padding-left: 21px;
+ }
+
+ &:dir(rtl) {
+ padding-right: 21px;
+ }
+ }
}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
