asgardius/phosh-arch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
phosh-arch/gtk3-mobile/theme-Add-libhandy-styles.patch

544 lines
27 KiB
Diff
Raw Normal View History

init
2024-08-13 17:17:11 +02:00
From: Adrien Plazas <kekun.plazas@laposte.net>
Date: Mon, 31 Aug 2020 10:40:20 +0200
Subject: theme: Add libhandy styles
This is imported from libhandy 1.0.0.
---
gtk/theme/Adwaita/_colors.scss | 6 +
gtk/theme/Adwaita/_common.scss | 187 +++++++++++++++++++++++
gtk/theme/Adwaita/gtk-contained-dark.css | 67 ++++++++
gtk/theme/Adwaita/gtk-contained.css | 67 ++++++++
gtk/theme/HighContrast/_colors-hc.scss | 5 +
gtk/theme/HighContrast/gtk-contained-inverse.css | 67 ++++++++
gtk/theme/HighContrast/gtk-contained.css | 67 ++++++++
7 files changed, 466 insertions(+)
diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss
index 32dd762..79ef3ca 100644
--- a/gtk/theme/Adwaita/_colors.scss
+++ b/gtk/theme/Adwaita/_colors.scss
@@ -75,3 +75,9 @@ $progress_border_color: $selected_borders_color;
$checkradio_bg_color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color,10%));
$checkradio_fg_color: $selected_fg_color;
$checkradio_borders_color: if($variant == 'light', darken($checkradio_bg_color,20%), darken($checkradio_bg_color,40%));
+
+// HdyFlap
+
+$flap_dimming: rgba(0, 0, 0, if($variant == 'light', 0.12, 0.24));
+$flap_border: rgba(0, 0, 0, if($variant == 'light', 0.05, 0.2));
+$flap_outline: rgba(255, 255, 255, if($variant == 'light', 0.2, 0.05));
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index dc02b49..19b6f38 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -4855,3 +4855,190 @@ popover.emoji-completion contents row box {
popover.emoji-completion .emoji:hover {
background: $popover_hover_color;
}
+
+/************
+ * libhandy *
+ ************/
+
+// HdyViewSwitcher
+
+viewswitcher {
+ &, & button {
+ margin: 0;
+ padding: 0;
+ }
+
+ button {
+ border-radius: 0;
+ border-top: 0;
+ border-bottom: 0;
+ box-shadow: none;
+ font-size: 1rem;
+
+ &:not(:checked):not(:hover) {
+ background: transparent;
+ }
+
+ &:not(:only-child):not(:last-child) {
+ border-right-width: 0px;
+ }
+
+ &:not(only-child):first-child:not(:checked):not(:hover),
+ &:not(:checked):not(:hover) + button:not(:checked):not(:hover) {
+ border-left-color: transparent;
+ }
+
+ &:not(only-child):last-child:not(:checked):not(:hover) {
+ border-right-color: transparent;
+ }
+
+ &:not(:checked):hover:not(:backdrop) {
+ background-image: image(lighter($bg_color));
+ }
+
+ &:not(only-child):first-child:not(:checked):hover,
+ &:not(:checked):hover + button:not(:checked):not(:hover),
+ &:not(:checked):not(:hover) + button:not(:checked):hover {
+ border-left-color: shade($borders_color, 1.15);
+ }
+
+ &:not(only-child):last-child:not(:checked):hover {
+ border-right-color: shade($borders_color, 1.15);
+ }
+
+ &:not(:checked):hover:backdrop {
+ background-image: image($bg_color);
+ }
+
+ // View switcher in a header bar
+ headerbar &:not(:checked) {
+ &:hover:not(:backdrop) {
+ // Reimplementation of $button_fill from Adwaita. The colors are made
+ // only 70% visible to avoid the highlight to be too strong.
+ $c: gtkalpha($bg_color, 0.7);
+ $button_fill: if($variant == 'light', linear-gradient(to top, shade($c, 0.96) 2px, $c),
+ linear-gradient(to top, shade($c, 0.99) 2px, $c)) !global;
+ background-image: $button_fill;
+ }
+
+ &:not(only-child):first-child:hover,
+ &:hover + button:not(:checked):not(:hover),
+ &:not(:hover) + button:not(:checked):hover {
+ border-left-color: $borders_color;
+ }
+
+ &:not(only-child):last-child:hover {
+ border-right-color: $borders_color;
+ }
+
+ &:hover:backdrop {
+ background-image: image($bg_color);
+ }
+ }
+
+ // View switcher button
+ > stack > box {
+ &.narrow {
+ font-size: 0.75rem;
+ padding-top: 7px;
+ padding-bottom: 5px;
+
+ image,
+ label {
+ padding-left: 8px;
+ padding-right: 8px;
+ }
+ }
+
+ &.wide {
+ padding: 8px 12px;
+
+ label {
+ &:dir(ltr) {
+ padding-right: 7px;
+ }
+
+ &:dir(rtl) {
+ padding-left: 7px;
+ }
+ }
+ }
+
+ label.active {
+ font-weight: bold;
+ }
+ }
+
+ &.needs-attention {
+ &:active > stack > box label,
+ &:checked > stack > box label {
+ animation: none;
+ background-image: none;
+ }
+
+ > stack > box label {
+ animation: needs_attention 150ms ease-in;
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent));
+ background-size: 6px 6px, 6px 6px;
+ background-repeat: no-repeat;
+ background-position: right 0px, right 1px;
+
+ &:backdrop {
+ background-size: 6px 6px, 0 0;
+ }
+
+ &:dir(rtl) {
+ background-position: left 0px, left 1px;
+ }
+ }
+ }
+ }
+}
+
+// HdyViewSwitcherBar
+
+viewswitcherbar actionbar > revealer > box {
+ padding: 0;
+}
+
+// HdyFlap
+
+@mixin background-shadow($direction) {
+ background-image:
+ linear-gradient($direction,
+ rgba(0, 0, 0, if($variant == 'light', 0.05, 0.1)),
+ rgba(0, 0, 0, if($variant == 'light', 0.01, 0.02)) 40px,
+ rgba(0, 0, 0, 0) 56px),
+ linear-gradient($direction,
+ rgba(0, 0, 0, if($variant == 'light', 0.03, 0.06)),
+ rgba(0, 0, 0, if($variant == 'light', 0.01, 0.02)) 7px,
+ rgba(0, 0, 0, 0) 24px);
+}
+
+flap {
+ > dimming {
+ background: $flap_dimming;
+ }
+
+ > border {
+ min-width: 1px;
+ min-height: 1px;
+ background: $flap_border;
+ }
+
+ > shadow {
+ min-width: 56px;
+ min-height: 56px;
+
+ &.left { @include background-shadow(to right); }
+ &.right { @include background-shadow(to left); }
+ &.up { @include background-shadow(to bottom); }
+ &.down { @include background-shadow(to top); }
+ }
+
+ > outline {
+ min-width: 1px;
+ min-height: 1px;
+ background: $flap_outline;
+ }
+}
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 32b7fb9..9797b3a 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1955,6 +1955,73 @@ popover.emoji-completion contents row box { padding: 2px 10px; }
popover.emoji-completion .emoji:hover { background: #424242; }
+/************ libhandy * */
+viewswitcher, viewswitcher button { margin: 0; padding: 0; }
+
+viewswitcher button { border-radius: 0; border-top: 0; border-bottom: 0; box-shadow: none; font-size: 1rem; }
+
+viewswitcher button:not(:checked):not(:hover) { background: transparent; }
+
+viewswitcher button:not(:only-child):not(:last-child) { border-right-width: 0px; }
+
+viewswitcher button:not(only-child):first-child:not(:checked):not(:hover), viewswitcher button:not(:checked):not(:hover) + button:not(:checked):not(:hover) { border-left-color: transparent; }
+
+viewswitcher button:not(only-child):last-child:not(:checked):not(:hover) { border-right-color: transparent; }
+
+viewswitcher button:not(:checked):hover:not(:backdrop) { background-image: image(lighter(#353535)); }
+
+viewswitcher button:not(only-child):first-child:not(:checked):hover, viewswitcher button:not(:checked):hover + button:not(:checked):not(:hover), viewswitcher button:not(:checked):not(:hover) + button:not(:checked):hover { border-left-color: shade(#1b1b1b, 1.15); }
+
+viewswitcher button:not(only-child):last-child:not(:checked):hover { border-right-color: shade(#1b1b1b, 1.15); }
+
+viewswitcher button:not(:checked):hover:backdrop { background-image: image(#353535); }
+
+headerbar viewswitcher button:not(:checked):hover:not(:backdrop) { background-image: linear-gradient(to top, shade(alpha(#353535,0.7), 0.99) 2px, alpha(#353535,0.7)); }
+
+headerbar viewswitcher button:not(:checked):not(only-child):first-child:hover, headerbar viewswitcher button:not(:checked):hover + button:not(:checked):not(:hover), headerbar viewswitcher button:not(:checked):not(:hover) + button:not(:checked):hover { border-left-color: #1b1b1b; }
+
+headerbar viewswitcher button:not(:checked):not(only-child):last-child:hover { border-right-color: #1b1b1b; }
+
+headerbar viewswitcher button:not(:checked):hover:backdrop { background-image: image(#353535); }
+
+viewswitcher button > stack > box.narrow { font-size: 0.75rem; padding-top: 7px; padding-bottom: 5px; }
+
+viewswitcher button > stack > box.narrow image, viewswitcher button > stack > box.narrow label { padding-left: 8px; padding-right: 8px; }
+
+viewswitcher button > stack > box.wide { padding: 8px 12px; }
+
+viewswitcher button > stack > box.wide label:dir(ltr) { padding-right: 7px; }
+
+viewswitcher button > stack > box.wide label:dir(rtl) { padding-left: 7px; }
+
+viewswitcher button > stack > box label.active { font-weight: bold; }
+
+viewswitcher button.needs-attention:active > stack > box label, viewswitcher button.needs-attention:checked > stack > box label { animation: none; background-image: none; }
+
+viewswitcher button.needs-attention > stack > box label { animation: needs_attention 150ms ease-in; background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 0px, right 1px; }
+
+viewswitcher button.needs-attention > stack > box label:backdrop { background-size: 6px 6px, 0 0; }
+
+viewswitcher button.needs-attention > stack > box label:dir(rtl) { background-position: left 0px, left 1px; }
+
+viewswitcherbar actionbar > revealer > box { padding: 0; }
+
+flap > dimming { background: rgba(0, 0, 0, 0.24); }
+
+flap > border { min-width: 1px; min-height: 1px; background: rgba(0, 0, 0, 0.2); }
+
+flap > shadow { min-width: 56px; min-height: 56px; }
+
+flap > shadow.left { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to right, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
+
+flap > shadow.right { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to left, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
+
+flap > shadow.up { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to bottom, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
+
+flap > shadow.down { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
+
+flap > outline { min-width: 1px; min-height: 1px; background: rgba(255, 255, 255, 0.05); }
+
/* GTK NAMED COLORS ---------------- use responsibly! */
/*
widget text/foreground color */
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 729b1fc..72946ec 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1971,6 +1971,73 @@ popover.emoji-completion contents row box { padding: 2px 10px; }
popover.emoji-completion .emoji:hover { background: white; }
+/************ libhandy * */
+viewswitcher, viewswitcher button { margin: 0; padding: 0; }
+
+viewswitcher button { border-radius: 0; border-top: 0; border-bottom: 0; box-shadow: none; font-size: 1rem; }
+
+viewswitcher button:not(:checked):not(:hover) { background: transparent; }
+
+viewswitcher button:not(:only-child):not(:last-child) { border-right-width: 0px; }
+
+viewswitcher button:not(only-child):first-child:not(:checked):not(:hover), viewswitcher button:not(:checked):not(:hover) + button:not(:checked):not(:hover) { border-left-color: transparent; }
+
+viewswitcher button:not(only-child):last-child:not(:checked):not(:hover) { border-right-color: transparent; }
+
+viewswitcher button:not(:checked):hover:not(:backdrop) { background-image: image(lighter(#f6f5f4)); }
+
+viewswitcher button:not(only-child):first-child:not(:checked):hover, viewswitcher button:not(:checked):hover + button:not(:checked):not(:hover), viewswitcher button:not(:checked):not(:hover) + button:not(:checked):hover { border-left-color: shade(#cdc7c2, 1.15); }
+
+viewswitcher button:not(only-child):last-child:not(:checked):hover { border-right-color: shade(#cdc7c2, 1.15); }
+
+viewswitcher button:not(:checked):hover:backdrop { background-image: image(#f6f5f4); }
+
+headerbar viewswitcher button:not(:checked):hover:not(:backdrop) { background-image: linear-gradient(to top, shade(alpha(#f6f5f4,0.7), 0.96) 2px, alpha(#f6f5f4,0.7)); }
+
+headerbar viewswitcher button:not(:checked):not(only-child):first-child:hover, headerbar viewswitcher button:not(:checked):hover + button:not(:checked):not(:hover), headerbar viewswitcher button:not(:checked):not(:hover) + button:not(:checked):hover { border-left-color: #cdc7c2; }
+
+headerbar viewswitcher button:not(:checked):not(only-child):last-child:hover { border-right-color: #cdc7c2; }
+
+headerbar viewswitcher button:not(:checked):hover:backdrop { background-image: image(#f6f5f4); }
+
+viewswitcher button > stack > box.narrow { font-size: 0.75rem; padding-top: 7px; padding-bottom: 5px; }
+
+viewswitcher button > stack > box.narrow image, viewswitcher button > stack > box.narrow label { padding-left: 8px; padding-right: 8px; }
+
+viewswitcher button > stack > box.wide { padding: 8px 12px; }
+
+viewswitcher button > stack > box.wide label:dir(ltr) { padding-right: 7px; }
+
+viewswitcher button > stack > box.wide label:dir(rtl) { padding-left: 7px; }
+
+viewswitcher button > stack > box label.active { font-weight: bold; }
+
+viewswitcher button.needs-attention:active > stack > box label, viewswitcher button.needs-attention:checked > stack > box label { animation: none; background-image: none; }
+
+viewswitcher button.needs-attention > stack > box label { animation: needs_attention 150ms ease-in; background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 0px, right 1px; }
+
+viewswitcher button.needs-attention > stack > box label:backdrop { background-size: 6px 6px, 0 0; }
+
+viewswitcher button.needs-attention > stack > box label:dir(rtl) { background-position: left 0px, left 1px; }
+
+viewswitcherbar actionbar > revealer > box { padding: 0; }
+
+flap > dimming { background: rgba(0, 0, 0, 0.12); }
+
+flap > border { min-width: 1px; min-height: 1px; background: rgba(0, 0, 0, 0.05); }
+
+flap > shadow { min-width: 56px; min-height: 56px; }
+
+flap > shadow.left { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to right, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+
+flap > shadow.right { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to left, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+
+flap > shadow.up { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to bottom, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+
+flap > shadow.down { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+
+flap > outline { min-width: 1px; min-height: 1px; background: rgba(255, 255, 255, 0.2); }
+
/* GTK NAMED COLORS ---------------- use responsibly! */
/*
widget text/foreground color */
diff --git a/gtk/theme/HighContrast/_colors-hc.scss b/gtk/theme/HighContrast/_colors-hc.scss
index f9c038b..1ce6f24 100644
--- a/gtk/theme/HighContrast/_colors-hc.scss
+++ b/gtk/theme/HighContrast/_colors-hc.scss
@@ -14,3 +14,8 @@ $alt_borders_color: if($variant == 'light', darken($alt_borders_color, 33%), lig
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
$insensitive_bg_color: mix($bg_color, $base_color, 60%);
$insensitive_borders_color: mix($borders_color, $bg_color, 80%);
+
+// HdyFlap
+
+$flap_border: $borders_color;
+$flap_outline: transparent;
diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css b/gtk/theme/HighContrast/gtk-contained-inverse.css
index e35c276..eb633dc 100644
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -2034,3 +2034,70 @@ popover.emoji-completion arrow { border: none; background: none; }
popover.emoji-completion contents row box { padding: 2px 10px; }
popover.emoji-completion .emoji:hover { background: #424242; }
+
+/************ libhandy * */
+viewswitcher, viewswitcher button { margin: 0; padding: 0; }
+
+viewswitcher button { border-radius: 0; border-top: 0; border-bottom: 0; box-shadow: none; font-size: 1rem; }
+
+viewswitcher button:not(:checked):not(:hover) { background: transparent; }
+
+viewswitcher button:not(:only-child):not(:last-child) { border-right-width: 0px; }
+
+viewswitcher button:not(only-child):first-child:not(:checked):not(:hover), viewswitcher button:not(:checked):not(:hover) + button:not(:checked):not(:hover) { border-left-color: transparent; }
+
+viewswitcher button:not(only-child):last-child:not(:checked):not(:hover) { border-right-color: transparent; }
+
+viewswitcher button:not(:checked):hover:not(:backdrop) { background-image: image(lighter(#303030)); }
+
+viewswitcher button:not(only-child):first-child:not(:checked):hover, viewswitcher button:not(:checked):hover + button:not(:checked):not(:hover), viewswitcher button:not(:checked):not(:hover) + button:not(:checked):hover { border-left-color: shade(#686868, 1.15); }
+
+viewswitcher button:not(only-child):last-child:not(:checked):hover { border-right-color: shade(#686868, 1.15); }
+
+viewswitcher button:not(:checked):hover:backdrop { background-image: image(#303030); }
+
+headerbar viewswitcher button:not(:checked):hover:not(:backdrop) { background-image: linear-gradient(to top, shade(alpha(#303030,0.7), 0.99) 2px, alpha(#303030,0.7)); }
+
+headerbar viewswitcher button:not(:checked):not(only-child):first-child:hover, headerbar viewswitcher button:not(:checked):hover + button:not(:checked):not(:hover), headerbar viewswitcher button:not(:checked):not(:hover) + button:not(:checked):hover { border-left-color: #686868; }
+
+headerbar viewswitcher button:not(:checked):not(only-child):last-child:hover { border-right-color: #686868; }
+
+headerbar viewswitcher button:not(:checked):hover:backdrop { background-image: image(#303030); }
+
+viewswitcher button > stack > box.narrow { font-size: 0.75rem; padding-top: 7px; padding-bottom: 5px; }
+
+viewswitcher button > stack > box.narrow image, viewswitcher button > stack > box.narrow label { padding-left: 8px; padding-right: 8px; }
+
+viewswitcher button > stack > box.wide { padding: 8px 12px; }
+
+viewswitcher button > stack > box.wide label:dir(ltr) { padding-right: 7px; }
+
+viewswitcher button > stack > box.wide label:dir(rtl) { padding-left: 7px; }
+
+viewswitcher button > stack > box label.active { font-weight: bold; }
+
+viewswitcher button.needs-attention:active > stack > box label, viewswitcher button.needs-attention:checked > stack > box label { animation: none; background-image: none; }
+
+viewswitcher button.needs-attention > stack > box label { animation: needs_attention 150ms ease-in; background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 0px, right 1px; }
+
+viewswitcher button.needs-attention > stack > box label:backdrop { background-size: 6px 6px, 0 0; }
+
+viewswitcher button.needs-attention > stack > box label:dir(rtl) { background-position: left 0px, left 1px; }
+
+viewswitcherbar actionbar > revealer > box { padding: 0; }
+
+flap > dimming { background: rgba(0, 0, 0, 0.24); }
+
+flap > border { min-width: 1px; min-height: 1px; background: #686868; }
+
+flap > shadow { min-width: 56px; min-height: 56px; }
+
+flap > shadow.left { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to right, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
+
+flap > shadow.right { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to left, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
+
+flap > shadow.up { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to bottom, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
+
+flap > shadow.down { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.02) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0) 24px); }
+
+flap > outline { min-width: 1px; min-height: 1px; background: transparent; }
diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css
index e0c37f5..95d09e5 100644
--- a/gtk/theme/HighContrast/gtk-contained.css
+++ b/gtk/theme/HighContrast/gtk-contained.css
@@ -2050,3 +2050,70 @@ popover.emoji-completion arrow { border: none; background: none; }
popover.emoji-completion contents row box { padding: 2px 10px; }
popover.emoji-completion .emoji:hover { background: white; }
+
+/************ libhandy * */
+viewswitcher, viewswitcher button { margin: 0; padding: 0; }
+
+viewswitcher button { border-radius: 0; border-top: 0; border-bottom: 0; box-shadow: none; font-size: 1rem; }
+
+viewswitcher button:not(:checked):not(:hover) { background: transparent; }
+
+viewswitcher button:not(:only-child):not(:last-child) { border-right-width: 0px; }
+
+viewswitcher button:not(only-child):first-child:not(:checked):not(:hover), viewswitcher button:not(:checked):not(:hover) + button:not(:checked):not(:hover) { border-left-color: transparent; }
+
+viewswitcher button:not(only-child):last-child:not(:checked):not(:hover) { border-right-color: transparent; }
+
+viewswitcher button:not(:checked):hover:not(:backdrop) { background-image: image(lighter(#fdfdfc)); }
+
+viewswitcher button:not(only-child):first-child:not(:checked):hover, viewswitcher button:not(:checked):hover + button:not(:checked):not(:hover), viewswitcher button:not(:checked):not(:hover) + button:not(:checked):hover { border-left-color: shade(#877b6e, 1.15); }
+
+viewswitcher button:not(only-child):last-child:not(:checked):hover { border-right-color: shade(#877b6e, 1.15); }
+
+viewswitcher button:not(:checked):hover:backdrop { background-image: image(#fdfdfc); }
+
+headerbar viewswitcher button:not(:checked):hover:not(:backdrop) { background-image: linear-gradient(to top, shade(alpha(#fdfdfc,0.7), 0.96) 2px, alpha(#fdfdfc,0.7)); }
+
+headerbar viewswitcher button:not(:checked):not(only-child):first-child:hover, headerbar viewswitcher button:not(:checked):hover + button:not(:checked):not(:hover), headerbar viewswitcher button:not(:checked):not(:hover) + button:not(:checked):hover { border-left-color: #877b6e; }
+
+headerbar viewswitcher button:not(:checked):not(only-child):last-child:hover { border-right-color: #877b6e; }
+
+headerbar viewswitcher button:not(:checked):hover:backdrop { background-image: image(#fdfdfc); }
+
+viewswitcher button > stack > box.narrow { font-size: 0.75rem; padding-top: 7px; padding-bottom: 5px; }
+
+viewswitcher button > stack > box.narrow image, viewswitcher button > stack > box.narrow label { padding-left: 8px; padding-right: 8px; }
+
+viewswitcher button > stack > box.wide { padding: 8px 12px; }
+
+viewswitcher button > stack > box.wide label:dir(ltr) { padding-right: 7px; }
+
+viewswitcher button > stack > box.wide label:dir(rtl) { padding-left: 7px; }
+
+viewswitcher button > stack > box label.active { font-weight: bold; }
+
+viewswitcher button.needs-attention:active > stack > box label, viewswitcher button.needs-attention:checked > stack > box label { animation: none; background-image: none; }
+
+viewswitcher button.needs-attention > stack > box label { animation: needs_attention 150ms ease-in; background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 0px, right 1px; }
+
+viewswitcher button.needs-attention > stack > box label:backdrop { background-size: 6px 6px, 0 0; }
+
+viewswitcher button.needs-attention > stack > box label:dir(rtl) { background-position: left 0px, left 1px; }
+
+viewswitcherbar actionbar > revealer > box { padding: 0; }
+
+flap > dimming { background: rgba(0, 0, 0, 0.12); }
+
+flap > border { min-width: 1px; min-height: 1px; background: #877b6e; }
+
+flap > shadow { min-width: 56px; min-height: 56px; }
+
+flap > shadow.left { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to right, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+
+flap > shadow.right { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to left, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+
+flap > shadow.up { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to bottom, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+
+flap > shadow.down { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01) 40px, rgba(0, 0, 0, 0) 56px), linear-gradient(to top, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01) 7px, rgba(0, 0, 0, 0) 24px); }
+
+flap > outline { min-width: 1px; min-height: 1px; background: transparent; }
Reference in a new issue Copy permalink