From: Adrien Plazas 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; }