Adwaita: better stack switcher logic

Now the stack switcher buttons look right even when not in the
header-bar.

3 files changed, 75 insertions, 95 deletions

diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index f7fb68a8d6..15da98545d 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -506,31 +506,27 @@ $_dot_color: if($variant=='light', $selected_bg_color,
     padding-right: 16px;
   }
 
-  // stack switcher buttons
-  .action-bar .stack-switcher &.image-button,
-  .header-bar .stack-switcher &.image-button {
-    // override the padding since we need to add some padding on the
-    // GtkImage itself to fit the circle
-    padding: 5px 2px;
-  }
-  .action-bar .stack-switcher &.text-button,
-  .header-bar .stack-switcher &.text-button {
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-top: 5px;     // I need these to not get overridden by radio
-    padding-bottom: 6px;  // button style
-    outline-offset: -3px; //
-
-  }
   .stack-switcher > & {
-    padding-left: 2px;  // subtract the padding which will be added to the
-    padding-right: 2px; // GtkLabel
+    // 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.
     > GtkLabel {
       padding-left: 6px;  // label padding
       padding-right: 6px; //
     }
     > GtkImage {
-      padding: 3px 6px; // image padding
+      padding-left: 6px;   // image padding
+      padding-right: 6px;  //
+      padding-top: 3px;    //
+      padding-bottom: 3px; //
+    }
+    &.text-button {
+      padding: 5px 10px 6px; // needed or it will get overridden
+    }
+    &.image-button {
+      // we want image buttons to have a 1:1 aspect ratio, so compensation
+      // of the padding added to the GtkImage is needed
+      padding: 5px 2px;
     }
     &.needs-attention > GtkLabel,
     &.needs-attention > GtkImage {
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index c4b78b4a91..bab9645723 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -820,45 +820,37 @@ GtkCalendar.header .button.titlebutton {
   GtkCalendar.header .text-button.button.titlebutton {
     padding-left: 16px;
     padding-right: 16px; }
-  .action-bar .stack-switcher .button.image-button, .action-bar .stack-switcher .header-bar .titlebutton.button, .header-bar .action-bar .stack-switcher .titlebutton.button,
-  .action-bar .stack-switcher .titlebar .titlebutton.button,
-  .titlebar .action-bar .stack-switcher .titlebutton.button,
-  .action-bar .stack-switcher GtkCalendar.header .titlebutton.button,
-  GtkCalendar.header .action-bar .stack-switcher .titlebutton.button, .header-bar .stack-switcher .button.image-button, .header-bar .stack-switcher .titlebutton.button {
+  .stack-switcher > .button > GtkLabel, .header-bar .stack-switcher > .button.titlebutton > GtkLabel,
+  .titlebar .stack-switcher > .button.titlebutton > GtkLabel,
+  GtkCalendar.header .stack-switcher > .button.titlebutton > GtkLabel {
+    padding-left: 6px;
+    padding-right: 6px; }
+  .stack-switcher > .button > GtkImage, .header-bar .stack-switcher > .button.titlebutton > GtkImage,
+  .titlebar .stack-switcher > .button.titlebutton > GtkImage,
+  GtkCalendar.header .stack-switcher > .button.titlebutton > GtkImage {
+    padding-left: 6px;
+    padding-right: 6px;
+    padding-top: 3px;
+    padding-bottom: 3px; }
+  .stack-switcher > .button.text-button {
+    padding: 5px 10px 6px; }
+  .stack-switcher > .button.image-button, .header-bar .stack-switcher > .titlebutton.button,
+  .titlebar .stack-switcher > .titlebutton.button,
+  GtkCalendar.header .stack-switcher > .titlebutton.button {
     padding: 5px 2px; }
-  .action-bar .stack-switcher .button.text-button, .header-bar .stack-switcher .button.text-button {
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-top: 5px;
-    padding-bottom: 6px;
-    outline-offset: -3px; }
-  .stack-switcher > .button, .header-bar .stack-switcher > .button.titlebutton,
-  .titlebar .stack-switcher > .button.titlebutton,
-  GtkCalendar.header .stack-switcher > .button.titlebutton {
-    padding-left: 2px;
-    padding-right: 2px; }
-    .stack-switcher > .button > GtkLabel, .header-bar .stack-switcher > .button.titlebutton > GtkLabel,
-    .titlebar .stack-switcher > .button.titlebutton > GtkLabel,
-    GtkCalendar.header .stack-switcher > .button.titlebutton > GtkLabel {
-      padding-left: 6px;
-      padding-right: 6px; }
-    .stack-switcher > .button > GtkImage, .header-bar .stack-switcher > .button.titlebutton > GtkImage,
-    .titlebar .stack-switcher > .button.titlebutton > GtkImage,
-    GtkCalendar.header .stack-switcher > .button.titlebutton > GtkImage {
-      padding: 3px 6px; }
-    .stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage {
-      animation: needs_attention 150ms ease-in;
-      background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3583d5), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.45, to(rgba(0, 0, 0, 0.81176)), to(transparent));
-      background-size: 6px 6px, 6px 6px;
-      background-repeat: no-repeat;
-      background-position: right 3px, right 2px; }
-      .stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop {
-        background-size: 6px 6px, 0 0; }
-      .stack-switcher > .button.needs-attention > GtkLabel:dir(rtl), .stack-switcher > .button.needs-attention > GtkImage:dir(rtl) {
-        background-position: left 3px, left 2px; }
-    .stack-switcher > .button.needs-attention:active > GtkLabel, .stack-switcher > .button.needs-attention:active > GtkImage, .stack-switcher > .button.needs-attention:checked > GtkLabel, .stack-switcher > .button.needs-attention:checked > GtkImage {
-      animation: none;
-      background-image: none; }
+  .stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage {
+    animation: needs_attention 150ms ease-in;
+    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3583d5), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.45, to(rgba(0, 0, 0, 0.81176)), to(transparent));
+    background-size: 6px 6px, 6px 6px;
+    background-repeat: no-repeat;
+    background-position: right 3px, right 2px; }
+    .stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop {
+      background-size: 6px 6px, 0 0; }
+    .stack-switcher > .button.needs-attention > GtkLabel:dir(rtl), .stack-switcher > .button.needs-attention > GtkImage:dir(rtl) {
+      background-position: left 3px, left 2px; }
+  .stack-switcher > .button.needs-attention:active > GtkLabel, .stack-switcher > .button.needs-attention:active > GtkImage, .stack-switcher > .button.needs-attention:checked > GtkLabel, .stack-switcher > .button.needs-attention:checked > GtkImage {
+    animation: none;
+    background-image: none; }
   .inline-toolbar .button, .inline-toolbar .header-bar .button.titlebutton, .header-bar .inline-toolbar .button.titlebutton,
   .inline-toolbar .titlebar .button.titlebutton,
   .titlebar .inline-toolbar .button.titlebutton,
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 6d4bab849d..fa506108ee 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -812,45 +812,37 @@ GtkCalendar.header .button.titlebutton {
   GtkCalendar.header .text-button.button.titlebutton {
     padding-left: 16px;
     padding-right: 16px; }
-  .action-bar .stack-switcher .button.image-button, .action-bar .stack-switcher .header-bar .titlebutton.button, .header-bar .action-bar .stack-switcher .titlebutton.button,
-  .action-bar .stack-switcher .titlebar .titlebutton.button,
-  .titlebar .action-bar .stack-switcher .titlebutton.button,
-  .action-bar .stack-switcher GtkCalendar.header .titlebutton.button,
-  GtkCalendar.header .action-bar .stack-switcher .titlebutton.button, .header-bar .stack-switcher .button.image-button, .header-bar .stack-switcher .titlebutton.button {
+  .stack-switcher > .button > GtkLabel, .header-bar .stack-switcher > .button.titlebutton > GtkLabel,
+  .titlebar .stack-switcher > .button.titlebutton > GtkLabel,
+  GtkCalendar.header .stack-switcher > .button.titlebutton > GtkLabel {
+    padding-left: 6px;
+    padding-right: 6px; }
+  .stack-switcher > .button > GtkImage, .header-bar .stack-switcher > .button.titlebutton > GtkImage,
+  .titlebar .stack-switcher > .button.titlebutton > GtkImage,
+  GtkCalendar.header .stack-switcher > .button.titlebutton > GtkImage {
+    padding-left: 6px;
+    padding-right: 6px;
+    padding-top: 3px;
+    padding-bottom: 3px; }
+  .stack-switcher > .button.text-button {
+    padding: 5px 10px 6px; }
+  .stack-switcher > .button.image-button, .header-bar .stack-switcher > .titlebutton.button,
+  .titlebar .stack-switcher > .titlebutton.button,
+  GtkCalendar.header .stack-switcher > .titlebutton.button {
     padding: 5px 2px; }
-  .action-bar .stack-switcher .button.text-button, .header-bar .stack-switcher .button.text-button {
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-top: 5px;
-    padding-bottom: 6px;
-    outline-offset: -3px; }
-  .stack-switcher > .button, .header-bar .stack-switcher > .button.titlebutton,
-  .titlebar .stack-switcher > .button.titlebutton,
-  GtkCalendar.header .stack-switcher > .button.titlebutton {
-    padding-left: 2px;
-    padding-right: 2px; }
-    .stack-switcher > .button > GtkLabel, .header-bar .stack-switcher > .button.titlebutton > GtkLabel,
-    .titlebar .stack-switcher > .button.titlebutton > GtkLabel,
-    GtkCalendar.header .stack-switcher > .button.titlebutton > GtkLabel {
-      padding-left: 6px;
-      padding-right: 6px; }
-    .stack-switcher > .button > GtkImage, .header-bar .stack-switcher > .button.titlebutton > GtkImage,
-    .titlebar .stack-switcher > .button.titlebutton > GtkImage,
-    GtkCalendar.header .stack-switcher > .button.titlebutton > GtkImage {
-      padding: 3px 6px; }
-    .stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage {
-      animation: needs_attention 150ms ease-in;
-      background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.76923)), to(transparent));
-      background-size: 6px 6px, 6px 6px;
-      background-repeat: no-repeat;
-      background-position: right 3px, right 4px; }
-      .stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop {
-        background-size: 6px 6px, 0 0; }
-      .stack-switcher > .button.needs-attention > GtkLabel:dir(rtl), .stack-switcher > .button.needs-attention > GtkImage:dir(rtl) {
-        background-position: left 3px, left 4px; }
-    .stack-switcher > .button.needs-attention:active > GtkLabel, .stack-switcher > .button.needs-attention:active > GtkImage, .stack-switcher > .button.needs-attention:checked > GtkLabel, .stack-switcher > .button.needs-attention:checked > GtkImage {
-      animation: none;
-      background-image: none; }
+  .stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage {
+    animation: needs_attention 150ms ease-in;
+    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.76923)), to(transparent));
+    background-size: 6px 6px, 6px 6px;
+    background-repeat: no-repeat;
+    background-position: right 3px, right 4px; }
+    .stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop {
+      background-size: 6px 6px, 0 0; }
+    .stack-switcher > .button.needs-attention > GtkLabel:dir(rtl), .stack-switcher > .button.needs-attention > GtkImage:dir(rtl) {
+      background-position: left 3px, left 4px; }
+  .stack-switcher > .button.needs-attention:active > GtkLabel, .stack-switcher > .button.needs-attention:active > GtkImage, .stack-switcher > .button.needs-attention:checked > GtkLabel, .stack-switcher > .button.needs-attention:checked > GtkImage {
+    animation: none;
+    background-image: none; }
   .inline-toolbar .button, .inline-toolbar .header-bar .button.titlebutton, .header-bar .inline-toolbar .button.titlebutton,
   .inline-toolbar .titlebar .button.titlebutton,
   .titlebar .inline-toolbar .button.titlebutton,