[libadwaita/wip/exalm/background-colors2: 13/18] stylesheet: Refresh tab bar styles
- From: Alexander Mikhaylenko <alexm src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [libadwaita/wip/exalm/background-colors2: 13/18] stylesheet: Refresh tab bar styles
- Date: Fri, 1 Oct 2021 13:38:39 +0000 (UTC)
commit f081d24c2f4bfe66114b5ff334d62a218c14b198
Author: Alexander Mikhaylenko <alexm gnome org>
Date: Fri Oct 1 17:27:58 2021 +0500
stylesheet: Refresh tab bar styles
Make it fully recolorable taking advantage of the clipping added earlier.
Darken inactive tabs rather than lightening active, use currentColor for
hover.
This will make more sense when the header bar becomes lighter.
src/stylesheet/widgets/_tab-view.scss | 51 +++++++++++++++++++++--------------
1 file changed, 31 insertions(+), 20 deletions(-)
---
diff --git a/src/stylesheet/widgets/_tab-view.scss b/src/stylesheet/widgets/_tab-view.scss
index 7971365b..e227c677 100644
--- a/src/stylesheet/widgets/_tab-view.scss
+++ b/src/stylesheet/widgets/_tab-view.scss
@@ -1,4 +1,10 @@
-$tab_bg: $headerbar_bg_color;
+$shade_color: if($variant == 'light', transparentize(black, .93), transparentize(black, .64));
+
+$tab_needs_attention_gradient: radial-gradient(ellipse at bottom,
+ transparentize(white, .2),
+ gtkalpha($accent_bg_color, .2) 15%,
+ gtkalpha($accent_bg_color, 0) 15%);
+
@mixin undershoot-gradient($dir) {
@if $variant == 'dark' {
@@ -23,9 +29,14 @@ $tab_bg: $headerbar_bg_color;
tabbar {
.box {
min-height: 38px;
- background: $headerbar_bg_color;
+ background-color: $headerbar_bg_color;
color: $headerbar_fg_color;
border-bottom: 1px solid $headerbar_border_color;
+
+ &:backdrop {
+ background-color: $headerbar_backdrop_color;
+ transition: $backdrop_transition;
+ }
}
scrolledwindow.pinned {
@@ -73,7 +84,7 @@ tabbar {
}
tabbox > background {
- background: gtkshade($tab_bg, .97);
+ background-color: $shade_color;
}
tab {
@@ -81,27 +92,31 @@ tabbar {
border-color: $headerbar_border_color;
border-width: 0 1px 0 1px;
transition: background 150ms ease-in-out, $focus_transition;
- background-color: $tab_bg;
+ background-color: gtkalpha($shade_color, .6);
background-clip: padding-box;
@include focus-ring();
&:checked {
- background-color: gtkshade($tab_bg, 1.06);
-
- &:hover {
- background-color: gtkshade($tab_bg, 1.09);
- }
+ background-color: transparent;
}
&:hover {
- background-color: gtkshade($tab_bg, 1.03);
+ background-image: image(gtkalpha(currentColor, .03));
+ }
+
+ &.needs-attention {
+ background-image: $tab_needs_attention_gradient;
+
+ &:hover {
+ background-image: image(gtkalpha(currentColor, .03)), $tab_needs_attention_gradient;
+ }
}
}
.start-action,
.end-action {
- background-color: $tab_bg;
+ background-color: gtkalpha($shade_color, .6);
background-clip: padding-box;
border-color: $headerbar_border_color;
border-style: solid;
@@ -126,9 +141,13 @@ tabbar {
dnd tab {
min-height: 26px;
- background-color: gtkshade($tab_bg, 1.09);
+ background-color: $headerbar_bg_color;
color: $headerbar_fg_color;
+ &.needs-attention {
+ background-image: $tab_needs_attention_gradient;
+ }
+
$_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize(black, 0.25));
box-shadow: 0 3px 9px 1px transparentize(black, 0.75),
@@ -149,14 +168,6 @@ dnd {
tab {
padding: 6px;
- &.needs-attention {
- background-image:
- radial-gradient(ellipse at bottom,
- transparentize(white, .2),
- gtkalpha($accent_bg_color, .2) 15%,
- gtkalpha($accent_bg_color, 0) 15%);
- }
-
button.image-button {
padding: 0;
margin: 0;
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]