Adwaita: Fix needs-attention

Stack switchers are now stackswitcher, no longer .stack-switcher.

Fixes: https://gitlab.gnome.org/GNOME/gtk/issues/2370

3 files changed, 55 insertions, 31 deletions

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 8d1d5142ec..ead3e20e36 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -841,7 +841,7 @@ button {
     }
   }
 
-  .stack-switcher > & {
+  stackswitcher > & {
     // to position the needs attention dot, padding is added to the button
     // child, a label needs just lateral padding while an icon needs vertical
     // padding added too.
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index eabd6f0071..7657fb357c 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -41,8 +41,14 @@ image.drag-icon { -gtk-icon-size: 32px; }
 
 textview { outline: none; }
 
+textview:drop(active) { caret-color: #4e9a06; }
+
 textview border { background-color: #313131; }
 
+iconview:drop(active) { box-shadow: none; }
+
+iconview dndtarget:drop(active) { border-style: solid; border-width: 1px; border-color: #030c17; }
+
 .rubberband, rubberband, flowbox rubberband, treeview.view rubberband, .content-view rubberband, .content-view .rubberband { border: 1px solid #0f3b71; background-color: rgba(15, 59, 113, 0.2); }
 
 flowbox flowboxchild { padding: 3px; }
@@ -352,17 +358,17 @@ button.destructive-action:disabled:active, button.destructive-action:disabled:ch
 
 .osd button.destructive-action:backdrop { color: #eeeeec; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(178, 22, 29, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; }
 
-.stack-switcher > button { outline-offset: -3px; }
+stackswitcher > button { outline-offset: -3px; }
 
-.stack-switcher > button > label { padding-left: 6px; padding-right: 6px; }
+stackswitcher > button > label { padding-left: 6px; padding-right: 6px; }
 
-.stack-switcher > button > image { padding-left: 6px; padding-right: 6px; padding-top: 3px; padding-bottom: 3px; }
+stackswitcher > button > image { padding-left: 6px; padding-right: 6px; padding-top: 3px; padding-bottom: 3px; }
 
-.stack-switcher > button.text-button { padding-left: 10px; padding-right: 10px; }
+stackswitcher > button.text-button { padding-left: 10px; padding-right: 10px; }
 
-.stack-switcher > button.image-button { padding-left: 2px; padding-right: 2px; }
+stackswitcher > button.image-button { padding-left: 2px; padding-right: 2px; }
 
-.stack-switcher > button.needs-attention:active > label, .stack-switcher > button.needs-attention:active > image, .stack-switcher > button.needs-attention:checked > label, .stack-switcher > button.needs-attention:checked > image { animation: none; background-image: none; }
+stackswitcher > button.needs-attention:active > label, stackswitcher > button.needs-attention:active > image, stackswitcher > button.needs-attention:checked > label, stackswitcher > button.needs-attention:checked > image { animation: none; background-image: none; }
 
 button.font separator { background-color: transparent; }
 
@@ -376,11 +382,11 @@ button.circular { border-radius: 9999px; -gtk-outline-radius: 9999px; }
 
 button.circular label { padding: 0; }
 
-.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; }
+stackswitcher > button.needs-attention > label, stackswitcher > 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; }
+stackswitcher > button.needs-attention > label:backdrop, stackswitcher > button.needs-attention > image:backdrop, stacksidebar row.needs-attention > label:backdrop { background-size: 6px 6px, 0 0; }
 
-.stack-switcher > button.needs-attention > label:dir(rtl), .stack-switcher > button.needs-attention > image:dir(rtl), stacksidebar row.needs-attention > label:dir(rtl) { background-position: left 3px, left 2px; }
+stackswitcher > button.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > image:dir(rtl), stacksidebar row.needs-attention > label:dir(rtl) { background-position: left 3px, left 2px; }
 
 .inline-toolbar toolbutton > button { 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); }
 
@@ -700,11 +706,13 @@ treeview.view.separator:backdrop { color: rgba(53, 53, 53, 0.1); }
 
 treeview.view:backdrop { border-left-color: #636362; border-top: #353535; }
 
-treeview.view:drop(active) { border-style: solid none; border-width: 1px; border-color: #030c17; }
+treeview.view:drop(active) { box-shadow: none; }
 
-treeview.view:drop(active).after { border-top-style: none; }
+treeview.view dndtarget:drop(active) { border-style: solid none; border-width: 1px; border-color: #030c17; }
 
-treeview.view:drop(active).before { border-bottom-style: none; }
+treeview.view dndtarget:drop(active).after { border-top-style: none; }
+
+treeview.view dndtarget:drop(active).before { border-bottom-style: none; }
 
 treeview.view.expander { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); color: silver; }
 
@@ -1541,11 +1549,13 @@ scrolledwindow overshoot.right { background-image: radial-gradient(farthest-side
 
 scrolledwindow overshoot.right:backdrop { background-image: radial-gradient(farthest-side at right, #202020 85%, rgba(32, 32, 32, 0)); background-size: 3% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; }
 
-scrolledwindow junction { border-color: transparent; border-image: linear-gradient(to bottom, #1b1b1b 1px, transparent 1px) 0 0 0 1/0 1px stretch; background-color: #313131; }
+scrolledwindow junction { background: #1b1b1b, linear-gradient(to bottom, transparent 1px, #313131 1px), linear-gradient(to right, transparent 1px, #313131 1px); }
+
+scrolledwindow junction:dir(rtl) { background: #1b1b1b, linear-gradient(to bottom, transparent 1px, #313131 1px), linear-gradient(to left, transparent 1px, #313131 1px); }
 
-scrolledwindow junction:dir(rtl) { border-image-slice: 0 1 0 0; }
+scrolledwindow junction:backdrop { transition: 200ms ease-out; background: #202020, linear-gradient(to bottom, transparent 1px, #2d2d2d 1px), linear-gradient(to right, transparent 1px, #2d2d2d 1px); }
 
-scrolledwindow junction:backdrop { border-image-source: linear-gradient(to bottom, #202020 1px, transparent 1px); background-color: #2d2d2d; transition: 200ms ease-out; }
+scrolledwindow junction:backdrop:dir(rtl) { background: #202020, linear-gradient(to bottom, transparent 1px, #2d2d2d 1px), linear-gradient(to left, transparent 1px, #2d2d2d 1px); }
 
 separator { background: #282828; min-width: 1px; min-height: 1px; }
 
@@ -1600,6 +1610,8 @@ expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
 
 expander-widget title:hover > expander { color: white; }
 
+placessidebar:not(decoration):not(window):drop(active):focus, placessidebar:not(decoration):not(window):drop(active), stackswitcher:not(decoration):not(window):drop(active):focus, stackswitcher:not(decoration):not(window):drop(active), expander-widget:not(decoration):not(window):drop(active):focus, expander-widget:not(decoration):not(window):drop(active) { box-shadow: none; }
+
 /************ Calendar * */
 calendar { color: white; border: 1px solid #1b1b1b; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 55d58d13a8..f8018002fe 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -41,8 +41,14 @@ image.drag-icon { -gtk-icon-size: 32px; }
 
 textview { outline: none; }
 
+textview:drop(active) { caret-color: #4e9a06; }
+
 textview border { background-color: #fbfafa; }
 
+iconview:drop(active) { box-shadow: none; }
+
+iconview dndtarget:drop(active) { border-style: solid; border-width: 1px; border-color: #185fb4; }
+
 .rubberband, rubberband, flowbox rubberband, treeview.view rubberband, .content-view rubberband, .content-view .rubberband { border: 1px solid #1b6acb; background-color: rgba(27, 106, 203, 0.2); }
 
 flowbox flowboxchild { padding: 3px; }
@@ -354,17 +360,17 @@ button.destructive-action:disabled:active, button.destructive-action:disabled:ch
 
 .osd button.destructive-action:backdrop { color: #eeeeec; border-color: rgba(0, 0, 0, 0.7); background-color: transparent; background-image: image(rgba(224, 27, 36, 0.5)); background-clip: padding-box; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; }
 
-.stack-switcher > button { outline-offset: -3px; }
+stackswitcher > button { outline-offset: -3px; }
 
-.stack-switcher > button > label { padding-left: 6px; padding-right: 6px; }
+stackswitcher > button > label { padding-left: 6px; padding-right: 6px; }
 
-.stack-switcher > button > image { padding-left: 6px; padding-right: 6px; padding-top: 3px; padding-bottom: 3px; }
+stackswitcher > button > image { padding-left: 6px; padding-right: 6px; padding-top: 3px; padding-bottom: 3px; }
 
-.stack-switcher > button.text-button { padding-left: 10px; padding-right: 10px; }
+stackswitcher > button.text-button { padding-left: 10px; padding-right: 10px; }
 
-.stack-switcher > button.image-button { padding-left: 2px; padding-right: 2px; }
+stackswitcher > button.image-button { padding-left: 2px; padding-right: 2px; }
 
-.stack-switcher > button.needs-attention:active > label, .stack-switcher > button.needs-attention:active > image, .stack-switcher > button.needs-attention:checked > label, .stack-switcher > button.needs-attention:checked > image { animation: none; background-image: none; }
+stackswitcher > button.needs-attention:active > label, stackswitcher > button.needs-attention:active > image, stackswitcher > button.needs-attention:checked > label, stackswitcher > button.needs-attention:checked > image { animation: none; background-image: none; }
 
 button.font separator { background-color: transparent; }
 
@@ -378,11 +384,11 @@ button.circular { border-radius: 9999px; -gtk-outline-radius: 9999px; }
 
 button.circular label { padding: 0; }
 
-.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; }
+stackswitcher > button.needs-attention > label, stackswitcher > 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; }
+stackswitcher > button.needs-attention > label:backdrop, stackswitcher > button.needs-attention > image:backdrop, stacksidebar row.needs-attention > label:backdrop { background-size: 6px 6px, 0 0; }
 
-.stack-switcher > button.needs-attention > label:dir(rtl), .stack-switcher > button.needs-attention > image:dir(rtl), stacksidebar row.needs-attention > label:dir(rtl) { background-position: left 3px, left 4px; }
+stackswitcher > button.needs-attention > label:dir(rtl), stackswitcher > button.needs-attention > image:dir(rtl), stacksidebar row.needs-attention > label:dir(rtl) { background-position: left 3px, left 4px; }
 
 .inline-toolbar toolbutton > button { 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); }
 
@@ -708,11 +714,13 @@ treeview.view.separator:backdrop { color: rgba(246, 245, 244, 0.1); }
 
 treeview.view:backdrop { border-left-color: #c4c5c5; border-top: #f6f5f4; }
 
-treeview.view:drop(active) { border-style: solid none; border-width: 1px; border-color: #185fb4; }
+treeview.view:drop(active) { box-shadow: none; }
 
-treeview.view:drop(active).after { border-top-style: none; }
+treeview.view dndtarget:drop(active) { border-style: solid none; border-width: 1px; border-color: #185fb4; }
 
-treeview.view:drop(active).before { border-bottom-style: none; }
+treeview.view dndtarget:drop(active).after { border-top-style: none; }
+
+treeview.view dndtarget:drop(active).before { border-bottom-style: none; }
 
 treeview.view.expander { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); color: #4d4d4d; }
 
@@ -1557,11 +1565,13 @@ scrolledwindow overshoot.right { background-image: radial-gradient(farthest-side
 
 scrolledwindow overshoot.right:backdrop { background-image: radial-gradient(farthest-side at right, #d5d0cc 85%, rgba(213, 208, 204, 0)); background-size: 3% 100%; background-repeat: no-repeat; background-position: right; background-color: transparent; border: none; box-shadow: none; }
 
-scrolledwindow junction { border-color: transparent; border-image: linear-gradient(to bottom, #cdc7c2 1px, transparent 1px) 0 0 0 1/0 1px stretch; background-color: #cecece; }
+scrolledwindow junction { background: #cdc7c2, linear-gradient(to bottom, transparent 1px, #cecece 1px), linear-gradient(to right, transparent 1px, #cecece 1px); }
+
+scrolledwindow junction:dir(rtl) { background: #cdc7c2, linear-gradient(to bottom, transparent 1px, #cecece 1px), linear-gradient(to left, transparent 1px, #cecece 1px); }
 
-scrolledwindow junction:dir(rtl) { border-image-slice: 0 1 0 0; }
+scrolledwindow junction:backdrop { transition: 200ms ease-out; background: #d5d0cc, linear-gradient(to bottom, transparent 1px, #efedec 1px), linear-gradient(to right, transparent 1px, #efedec 1px); }
 
-scrolledwindow junction:backdrop { border-image-source: linear-gradient(to bottom, #d5d0cc 1px, transparent 1px); background-color: #efedec; transition: 200ms ease-out; }
+scrolledwindow junction:backdrop:dir(rtl) { background: #d5d0cc, linear-gradient(to bottom, transparent 1px, #efedec 1px), linear-gradient(to left, transparent 1px, #efedec 1px); }
 
 separator { background: #d8d4d0; min-width: 1px; min-height: 1px; }
 
@@ -1616,6 +1626,8 @@ expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
 
 expander-widget title:hover > expander { color: #748489; }
 
+placessidebar:not(decoration):not(window):drop(active):focus, placessidebar:not(decoration):not(window):drop(active), stackswitcher:not(decoration):not(window):drop(active):focus, stackswitcher:not(decoration):not(window):drop(active), expander-widget:not(decoration):not(window):drop(active):focus, expander-widget:not(decoration):not(window):drop(active) { box-shadow: none; }
+
 /************ Calendar * */
 calendar { color: black; border: 1px solid #cdc7c2; }