From 53f5f105dcbcb0d32c993e69a4f37663d75121fc Mon Sep 17 00:00:00 2001 From: John Factotum <50942278+johnfactotum@users.noreply.github.com> Date: Fri, 4 Dec 2020 21:54:03 +0800 Subject: [PATCH 1/2] Fix .linked styling @extend with compound selectors is no longer supported by libsass, which breaks linked buttons. See https://gitlab.gnome.org/GNOME/gtk/-/issues/2237 --- src/gtk3/gtk3-common.scss | 55 ++++++++++++++++++++++----------------- 1 file changed, 31 insertions(+), 24 deletions(-) diff --git a/src/gtk3/gtk3-common.scss b/src/gtk3/gtk3-common.scss index 477e8f1..f32d889 100644 --- a/src/gtk3/gtk3-common.scss +++ b/src/gtk3/gtk3-common.scss @@ -957,11 +957,11 @@ button { toolbar.inline-toolbar toolbutton { > button.flat { @extend %linked_middle; } - &:first-child > button.flat { @extend %linked:first-child; } + &:first-child > button.flat { @extend %linked_left; } - &:last-child > button.flat { @extend %linked:last-child; } + &:last-child > button.flat { @extend %linked_right; } - &:only-child > button.flat { @extend %linked:only-child; } + &:only-child > button.flat { @extend %linked_only_child; } } %linked_middle { @@ -1032,6 +1032,11 @@ toolbar.inline-toolbar toolbutton { } } +%linked_only_child { + border-radius: $base_radius; + -gtk-outline-radius: $base_radius; +} + // .linked assumes Box, which reverses nodes in RTL, so 1st child is always left %linked { @extend %linked_middle; @@ -1039,10 +1044,7 @@ toolbar.inline-toolbar toolbutton { &:first-child { @extend %linked_left; } &:last-child { @extend %linked_right; } - &:only-child { - border-radius: $base_radius; - -gtk-outline-radius: $base_radius; - } + &:only-child { @extend %linked_only_child; } } %linked_flippable_middle { @@ -1146,27 +1148,32 @@ toolbar.inline-toolbar toolbutton { } } -%linked_vertical{ - @extend %linked_vertical_middle; - - &:first-child { +%linked_vertical_top { margin-top: 0; margin-right: 0; border-top-left-radius: $base_radius; border-top-right-radius: $base_radius; -gtk-outline-radius: $base_radius $base_radius 0 0; - } +} - &:last-child { +%linked_vertical_bottom { border-bottom-left-radius: $base_radius; border-bottom-right-radius: $base_radius; -gtk-outline-radius: 0 0 $base_radius $base_radius; - } +} - &:only-child { +%linked_vertical_only_child { border-radius: $base_radius; -gtk-outline-radius: $base_radius; - } +} + +%linked_vertical{ + @extend %linked_vertical_middle; + + &:first-child { @extend %linked_vertical_top; } + &:last-child { @extend %linked_vertical_bottom; } + + &:only-child { @extend %linked_vertical_only_child; } } %undecorated_button { @@ -1525,8 +1532,8 @@ combobox { &.linked { button:nth-child(2) { - &:dir(ltr) { @extend %linked:last-child; } - &:dir(rtl) { @extend %linked:first-child; } + &:dir(ltr) { @extend %linked_right; } + &:dir(rtl) { @extend %linked_left; } } } @@ -1546,14 +1553,14 @@ combobox { &:dir(rtl) { @extend %linked_middle; } // specificity bump } -.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; } -.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; } -.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; } +.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked_left; } +.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked_right; } +.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked_only_child; } .linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; } -.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;} -.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; } -.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; } +.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical_top;} +.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical_bottom; } +.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical_only_child; } /************ From c8f90f8ace94e8b8a9c024da8f3118bdc82e3c6c Mon Sep 17 00:00:00 2001 From: John Factotum <50942278+johnfactotum@users.noreply.github.com> Date: Fri, 4 Dec 2020 21:58:58 +0800 Subject: [PATCH 2/2] Add styles for libhandy 1.0.0 --- meson.build | 6 +- src/gtk3/gtk3-libhandy.scss | 231 ++++++++++++++++++++++++++++++++++++ src/gtk3/gtk3.scss | 1 + 3 files changed, 236 insertions(+), 2 deletions(-) create mode 100644 src/gtk3/gtk3-libhandy.scss diff --git a/meson.build b/meson.build index f7ff3ad..78e1caa 100644 --- a/meson.build +++ b/meson.build @@ -171,7 +171,8 @@ gtk3_noconf_sources = [ 'gtk3-drawing.scss', 'gtk3-common.scss', 'gtk3-apps.scss', - 'gtk3-xfce.scss' + 'gtk3-xfce.scss', + 'gtk3-libhandy.scss' ] # Copy sources that doesnt require configuration to builddir @@ -480,7 +481,8 @@ gtk3_noconf_sources = [ 'gtk3-drawing.scss', 'gtk3-common.scss', 'gtk3-apps.scss', - 'gtk3-xfce.scss' + 'gtk3-xfce.scss', + 'gtk3-libhandy.scss' ] gtk3_version = '3.24' diff --git a/src/gtk3/gtk3-libhandy.scss b/src/gtk3/gtk3-libhandy.scss new file mode 100644 index 0000000..5a90402 --- /dev/null +++ b/src/gtk3/gtk3-libhandy.scss @@ -0,0 +1,231 @@ +/* Based on _libhandy.scss from arc-theme, which in turn was based on +_Adwaita-base.scss from libhandy */ + +// HdyComboRow + +popover.combo { + padding: 0; + + list { + background-color: transparent; + + > row { + padding: 0 10px; + min-height: 50px; + + &:first-child { @extend %linked_vertical_top; } + &:last-child { @extend %linked_vertical_bottom; } + } + } + + overshoot.top { @extend %linked_vertical_top; } + overshoot.bottom { @extend %linked_vertical_bottom; } + + scrollbar.vertical { + background-color: $popover_bg_color; + + &:dir(ltr) { @extend %linked_right; } + &:dir(rtl) { @extend %linked_left; } + } +} + +// HdyExpanderRow + +row.expander { + padding: 0px; + + &:checked image.expander-row-arrow:not(:disabled) { + color: $selected_bg_color; + } + + image.expander-row-arrow:disabled { + color: $insensitive_fg_color; + } +} + +// HdyKeypad + +keypad { + .digit { + font-size: 200%; + font-weight: bold; + } + + .letters { + font-size: 70%; + } + + .symbol { + font-size: 160%; + } +} + +// HdyViewSwitcher + +viewswitcher { + &, & button { + margin: 0; + padding: 0; + } + + button { + border-radius: 0; + border-top: 0; + border-bottom: 0; + + &:not(:checked):not(:hover) { + background: transparent; + border-color: transparent; + } + + &:checked, &:active { + border-color: $borders_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 10px; + + label { + &:dir(ltr) { + padding-right: 7px; + } + + &:dir(rtl) { + padding-left: 7px; + } + } + } + } + + &.needs-attention { + > stack > box label { + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to($selected_bg_color), to(transparent)); + background-size: 6px 6px; + background-repeat: no-repeat; + background-position: right 0px; + + &:dir(rtl) { + background-position: left 0px; + } + } + + &:active > stack > box label { + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to($selected_fg_color), to(transparent)); + } + } + } +} + +// HdyViewSwitcherBar + +viewswitcherbar actionbar > revealer > box { + padding: 0; +} + +// Content list + +list.content { + &, + list { + background-color: transparent; + } + + // Nested rows background + list.nested > row:not(:active) { + &:not(:hover):not(:selected), + &:hover:not(.activatable):not(:selected) { + background-color: mix($bg_color, $base_color); + } + + &:hover.activatable:not(:selected) { + background-color: if($variant != 'dark', mix($base_color, black, 95%), mix($base_color, white, 97%)); + } + } + + > row { + // Regular rows and expander header rows background + &:not(.expander):not(:active):not(:hover):not(:selected), + &:not(.expander):not(:active):hover:not(.activatable):not(:selected), + &.expander row.header:not(:active):not(:hover):not(:selected), + &.expander row.header:not(:active):hover:not(.activatable):not(:selected) { + background-color: $base_color; + } + + &:not(.expander):not(:active):hover.activatable:not(:selected), + &.expander row.header:not(:active):hover.activatable:not(:selected) { + background-color: if($variant != 'dark', mix($base_color, black, 95%), mix($base_color, white, 97%)); + } + + &, + list > row { + border-color: $borders_color; + border-style: solid; + transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + } + + // Top border + &:not(:last-child) { + border-width: 1px 1px 0px 1px; + } + + // Rounded top + &:first-child, + &.expander:first-child row.header, + &.expander:checked, + &.expander:checked row.header, + &.expander:checked + row, + &.expander:checked + row.expander row.header { + @extend %linked_vertical_top; + } + + // Bottom border + &:last-child, + &.checked-expander-row-previous-sibling, + &.expander:checked { + border-width: 1px; + } + + // Rounded bottom + &:last-child, + &.checked-expander-row-previous-sibling, + &.expander:checked, + &.expander:not(:checked):last-child row.header, + &.expander:not(:checked).checked-expander-row-previous-sibling row.header, + &.expander.empty:checked row.header, + &.expander list.nested > row:last-child { + @extend %linked_vertical_bottom; + } + + // Add space around expanded rows + &.expander:checked:not(:first-child), + &.expander:checked + row { + margin-top: 5px; + } + } +} + +// Unified window + +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, + > decoration-overlay { + border-radius: $window_top_radius; + } +} + + diff --git a/src/gtk3/gtk3.scss b/src/gtk3/gtk3.scss index eccc978..31d7ebb 100644 --- a/src/gtk3/gtk3.scss +++ b/src/gtk3/gtk3.scss @@ -16,3 +16,4 @@ $gnome: @gnome_version@; @import 'gtk3-common'; @import 'gtk3-apps'; @import 'gtk3-xfce'; +@import 'gtk3-libhandy';