From 83eeeb6a19b3b7671a82605bc99cd85974d5c78e Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Mon, 7 Oct 2019 16:50:34 -0400 Subject: [PATCH] Adwaita: circular button fix - remove old border drawing code that was breaking coloured buttons - fixes #2173 --- gtk/theme/Adwaita/_common.scss | 22 ---------------------- gtk/theme/Adwaita/gtk-contained-dark.css | 6 +----- gtk/theme/Adwaita/gtk-contained.css | 6 +----- 3 files changed, 2 insertions(+), 32 deletions(-) diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 6e0da61bef..ff68dd1ae9 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -887,28 +887,6 @@ button { -gtk-outline-radius: 9999px; label { padding: 0; } - - // the followind code is needed since we use a darker bottom border on buttons, which looks pretty - // bad with a 100% border radius (see https://bugzilla.gnome.org/show_bug.cgi?id=771205 for details), - // so on relevant states we an additional background-image with a gradient clipped on the border-box, - // so setting a transparent border would reveal it. - // FIXME: take care of colored circular button. - $_border_bg: linear-gradient(to top, $alt-borders-color 25%, $borders-color 50%); - - &:not(.flat):not(:checked):not(:active):not(:disabled):not(:backdrop) { - @include button(normal); - background-image: $button_fill, $_border_bg; - border-color: transparent; - } - - &:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) { - @include button(hover); - background-image: $button_fill, $_border_bg; - border-color: transparent; - } - - background-origin: padding-box, border-box; - background-clip: padding-box, border-box; } } diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index 64ea8a0231..6e8793eba8 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -409,14 +409,10 @@ button.font > box > box > label { font-weight: bold; } .primary-toolbar button { -gtk-icon-shadow: none; } -button.circular { border-radius: 9999px; -gtk-outline-radius: 9999px; background-origin: padding-box, border-box; background-clip: padding-box, border-box; } +button.circular { border-radius: 9999px; -gtk-outline-radius: 9999px; } button.circular label { padding: 0; } -button.circular:not(.flat):not(:checked):not(:active):not(:disabled):not(:backdrop) { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #1b1b1b; border-bottom-color: #070707; background-image: linear-gradient(to top, #323232 2px, #353535); text-shadow: 0 -1px rgba(0, 0, 0, 0.834353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.834353); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to top, #323232 2px, #353535), linear-gradient(to top, #070707 25%, #1b1b1b 50%); border-color: transparent; } - -button.circular:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #1b1b1b; border-bottom-color: #070707; text-shadow: 0 -1px rgba(0, 0, 0, 0.786353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.786353); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to top, #323232, #373737 1px); background-image: linear-gradient(to top, #323232, #373737 1px), linear-gradient(to top, #070707 25%, #1b1b1b 50%); border-color: transparent; } - .stack-switcher > button.needs-attention > label, .stack-switcher > button.needs-attention > image, stacksidebar row.needs-attention > label { animation: needs_attention 150ms ease-in; background-image: radial-gradient(farthest-side, #1f76e1 96%, rgba(31, 118, 225, 0)), radial-gradient(farthest-side, rgba(0, 0, 0, 0.834353) 95%, rgba(0, 0, 0, 0)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 2px; } .stack-switcher > button.needs-attention > label:backdrop, .stack-switcher > button.needs-attention > image:backdrop, stacksidebar row.needs-attention > label:backdrop { background-size: 6px 6px, 0 0; } diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index 7ce9172737..5b66287d57 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -411,14 +411,10 @@ button.font > box > box > label { font-weight: bold; } .primary-toolbar button { -gtk-icon-shadow: none; } -button.circular { border-radius: 9999px; -gtk-outline-radius: 9999px; background-origin: padding-box, border-box; background-clip: padding-box, border-box; } +button.circular { border-radius: 9999px; -gtk-outline-radius: 9999px; } button.circular label { padding: 0; } -button.circular:not(.flat):not(:checked):not(:active):not(:disabled):not(:backdrop) { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #cdc7c2; border-bottom-color: #bfb8b1; background-image: linear-gradient(to top, #edebe9 2px, #f6f5f4); text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to top, #edebe9 2px, #f6f5f4), linear-gradient(to top, #bfb8b1 25%, #cdc7c2 50%); border-color: transparent; } - -button.circular:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #cdc7c2; border-bottom-color: #bfb8b1; text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.07); background-image: linear-gradient(to top, #f6f5f4, #f8f8f7 1px); background-image: linear-gradient(to top, #f6f5f4, #f8f8f7 1px), linear-gradient(to top, #bfb8b1 25%, #cdc7c2 50%); border-color: transparent; } - .stack-switcher > button.needs-attention > label, .stack-switcher > button.needs-attention > image, stacksidebar row.needs-attention > label { animation: needs_attention 150ms ease-in; background-image: radial-gradient(farthest-side, #3584e4 96%, rgba(53, 132, 228, 0)), radial-gradient(farthest-side, rgba(255, 255, 255, 0.769231) 95%, rgba(255, 255, 255, 0)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } .stack-switcher > button.needs-attention > label:backdrop, .stack-switcher > button.needs-attention > image:backdrop, stacksidebar row.needs-attention > label:backdrop { background-size: 6px 6px, 0 0; } -- 2.30.2