[gtk: 1/5] Adwaita: Improve popover.menu styling

[Matthias Clasen <matthiasc src gnome org>]

commit 4c2707916ce1e8c76b1033666094429813d00422
Author: nana-4 <hnmaigo gmail com>
Date:   Thu Nov 7 21:35:40 2019 +0900

    Adwaita: Improve popover.menu styling
    
    Based on the mockup:
    https://gitlab.gnome.org/Teams/Design/os-mockups/blob/master/menus/menu-design-patterns.png
    
    - Remove horizontal padding from popover.menu contents
    - Remove roundness from modelbutton
    - Adjust sizing to match the mockup
    - Fix visual glitches on button.image-button.model
    - Add missing mergin to arrow icons
    - Fix accelerator position in rtl direction
    - Fix accelerator color
    
    https://gitlab.gnome.org/GNOME/gtk/issues/1824

 gtk/theme/Adwaita/_common.scss           | 69 +++++++++++++++++---------------
 gtk/theme/Adwaita/gtk-contained-dark.css | 34 ++++++++--------
 gtk/theme/Adwaita/gtk-contained.css      | 34 ++++++++--------
 3 files changed, 73 insertions(+), 64 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index b80fc0a9bd..357ee5d4eb 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -4865,28 +4865,29 @@ menubar {
 popover.menu {
   padding: 0px;
 
-  & button.image-button.model {
-    padding: 0;
-    border: none;
-    background: none;
-    box-shadow: none;
-  }
-  & button.image-button.model:selected {
-    border: none;
-    color: $selected_fg_color;
-    background: $selected_bg_color;
-  }
-
   & box.inline-buttons {
-    border-radius: 5px;
-    border-style: none;
-    border-width: 0;
-    border-image-source: none;
-    border-image-width: 1px;
+    padding: 0 20px;
+
+    button.image-button.model {
+      @include button(undecorated);
+
+      min-height: 30px;
+      min-width: 30px;
+      padding: 0;
+      border: none;
+      outline: none;
+      transition: none;
+
+      &:selected { @extend %selected_items; }
+    }
   }
 
   & box.circular-buttons {
-    padding-bottom: 5px;
+    padding: 6px 0;
+
+    button.circular.image-button.model {
+      padding: 11px;
+    }
   }
 
   & > arrow,
@@ -4894,38 +4895,42 @@ popover.menu {
     background-color: $menu_color;
   }
 
+  &.background > contents {
+    padding: 8px 0;
+  }
+
   &.background separator {
-    margin: 5px 0px;
+    margin: 6px 0;
   }
 
   & accelerator {
-    margin-left: 20px;
-    color: gray;
-  }
+    color: gtkalpha(currentColor,0.55);
 
-  & box.inline-buttons {
-    padding: 0 5px;
+    &:dir(ltr) { margin-left: 20px; }
+    &:dir(rtl) { margin-right: 20px; }
   }
 
+  & arrow.left,
   & radio.left,
   & check.left {
     margin-left: 0;
-    margin-right: 12px;
+    margin-right: 8px;
   }
 
+  & arrow.right,
   & radio.right,
   & check.right {
-    margin-left: 12px;
+    margin-left: 8px;
     margin-right: 0;
   }
 
-  & modelbutton:selected {
-    color: $selected_fg_color;
-    background-color: $selected_bg_color;
-  }
+  & modelbutton {
+    min-height: 30px;
+    min-width: 40px;
+    padding: 0 20px;
+    border-radius: 0;
 
-  & modelbutton:selected accelerator {
-    color: mix($selected_fg_color, gray, 50%);
+    &:selected { @extend %selected_items; }
   }
 }
 
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 18a50156f8..8ec5f683dd 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1905,15 +1905,15 @@ button.titlebutton:backdrop { -gtk-icon-shadow: none; }
 
 .selection-mode headerbar button.titlebutton:backdrop, .selection-mode .titlebar 
button.titlebutton:backdrop, headerbar.selection-mode button.titlebutton:backdrop, .titlebar.selection-mode 
button.titlebutton:backdrop { -gtk-icon-shadow: none; }
 
-.view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text 
selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) 
selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, 
.menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, 
calendar:selected { background-color: #15539e; }
+.view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text 
selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) 
selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, 
.menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, 
calendar:selected, popover.menu box.inline-buttons button.image-button.model:selected, popover.menu 
modelbutton:selected { background-color: #15539e; }
 
-label:selected, .selection-mode button.titlebutton, .view:selected:focus, .view:selected, iconview:selected, 
textview > text:selected, textview > text selection:focus, textview > text selection, flowbox 
flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry 
selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, 
treeview.view:selected, row:selected, calendar:selected { color: #ffffff; }
+label:selected, .selection-mode button.titlebutton, .view:selected:focus, .view:selected, iconview:selected, 
textview > text:selected, textview > text selection:focus, textview > text selection, flowbox 
flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry 
selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, 
treeview.view:selected, row:selected, calendar:selected, popover.menu box.inline-buttons 
button.image-button.model:selected, popover.menu modelbutton:selected { color: #ffffff; }
 
-label:disabled selection, label:disabled:selected, .selection-mode button.titlebutton:disabled, 
iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, textview > 
text:disabled:selected:focus, textview > text:disabled:selected, textview > text selection:disabled, flowbox 
flowboxchild:disabled:selected, spinbutton:not(.vertical) selection:disabled, spinbutton.vertical text 
selection:disabled, entry selection:disabled, modelbutton.flat:disabled:selected, 
.menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected { color: #8aa9ce; }
+label:disabled selection, label:disabled:selected, .selection-mode button.titlebutton:disabled, 
iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, textview > 
text:disabled:selected:focus, textview > text:disabled:selected, textview > text selection:disabled, flowbox 
flowboxchild:disabled:selected, spinbutton:not(.vertical) selection:disabled, spinbutton.vertical text 
selection:disabled, entry selection:disabled, modelbutton.flat:disabled:selected, 
.menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected, popover.menu 
box.inline-buttons button.image-button.model:disabled:selected, popover.menu modelbutton:disabled:selected { 
color: #8aa9ce; }
 
-label:backdrop selection, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, 
iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, textview > 
text:backdrop:selected:focus, textview > text:backdrop:selected, textview > text selection:backdrop, flowbox 
flowboxchild:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, spinbutton.vertical text 
selection:backdrop, entry selection:backdrop, modelbutton.flat:backdrop:selected, 
.menuitem.button.flat:backdrop:selected, row:backdrop:selected, calendar:backdrop:selected { color: #d6d6d6; }
+label:backdrop selection, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, 
iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, textview > 
text:backdrop:selected:focus, textview > text:backdrop:selected, textview > text selection:backdrop, flowbox 
flowboxchild:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, spinbutton.vertical text 
selection:backdrop, entry selection:backdrop, modelbutton.flat:backdrop:selected, 
.menuitem.button.flat:backdrop:selected, row:backdrop:selected, calendar:backdrop:selected, popover.menu 
box.inline-buttons button.image-button.model:backdrop:selected, popover.menu modelbutton:backdrop:selected { 
color: #d6d6d6; }
 
-label:backdrop selection:disabled, label:backdrop:disabled:selected, .selection-mode 
button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, 
textview > text:backdrop:disabled:selected, textview > text selection:backdrop:disabled, flowbox 
flowboxchild:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, 
spinbutton.vertical text selection:backdrop:disabled, entry selection:backdrop:disabled, 
modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, 
row:backdrop:disabled:selected, calendar:backdrop:disabled:selected { color: #4f7aaf; }
+label:backdrop selection:disabled, label:backdrop:disabled:selected, .selection-mode 
button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, 
textview > text:backdrop:disabled:selected, textview > text selection:backdrop:disabled, flowbox 
flowboxchild:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, 
spinbutton.vertical text selection:backdrop:disabled, entry selection:backdrop:disabled, 
modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, 
row:backdrop:disabled:selected, calendar:backdrop:disabled:selected, popover.menu box.inline-buttons 
button.image-button.model:backdrop:disabled:selected, popover.menu modelbutton:backdrop:disabled:selected { 
color: #4f7aaf; }
 
 .monospace { font-family: monospace; }
 
@@ -2012,29 +2012,31 @@ menubar .csd.popup decoration { border-radius: 0; }
 
 popover.menu { padding: 0px; }
 
-popover.menu button.image-button.model { padding: 0; border: none; background: none; box-shadow: none; }
+popover.menu box.inline-buttons { padding: 0 20px; }
 
-popover.menu button.image-button.model:selected { border: none; color: #ffffff; background: #15539e; }
+popover.menu box.inline-buttons button.image-button.model { border-color: transparent; background-color: 
transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; 
-gtk-icon-shadow: none; min-height: 30px; min-width: 30px; padding: 0; border: none; outline: none; 
transition: none; }
 
-popover.menu box.inline-buttons { border-radius: 5px; border-style: none; border-width: 0; 
border-image-source: none; border-image-width: 1px; }
+popover.menu box.circular-buttons { padding: 6px 0; }
 
-popover.menu box.circular-buttons { padding-bottom: 5px; }
+popover.menu box.circular-buttons button.circular.image-button.model { padding: 11px; }
 
 popover.menu > arrow, popover.menu.background > contents { background-color: #2f2f2f; }
 
-popover.menu.background separator { margin: 5px 0px; }
+popover.menu.background > contents { padding: 8px 0; }
 
-popover.menu accelerator { margin-left: 20px; color: gray; }
+popover.menu.background separator { margin: 6px 0; }
 
-popover.menu box.inline-buttons { padding: 0 5px; }
+popover.menu accelerator { color: alpha(currentColor,0.55); }
 
-popover.menu radio.left, popover.menu check.left { margin-left: 0; margin-right: 12px; }
+popover.menu accelerator:dir(ltr) { margin-left: 20px; }
 
-popover.menu radio.right, popover.menu check.right { margin-left: 12px; margin-right: 0; }
+popover.menu accelerator:dir(rtl) { margin-right: 20px; }
 
-popover.menu modelbutton:selected { color: #ffffff; background-color: #15539e; }
+popover.menu arrow.left, popover.menu radio.left, popover.menu check.left { margin-left: 0; margin-right: 
8px; }
 
-popover.menu modelbutton:selected accelerator { color: silver; }
+popover.menu arrow.right, popover.menu radio.right, popover.menu check.right { margin-left: 8px; 
margin-right: 0; }
+
+popover.menu modelbutton { min-height: 30px; min-width: 40px; padding: 0 20px; border-radius: 0; }
 
 statusbar { padding: 6px 10px 6px 10px; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 2f9c92d3e4..b896c3c52d 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1921,15 +1921,15 @@ button.titlebutton:backdrop { -gtk-icon-shadow: none; }
 
 .selection-mode headerbar button.titlebutton:backdrop, .selection-mode .titlebar 
button.titlebutton:backdrop, headerbar.selection-mode button.titlebutton:backdrop, .titlebar.selection-mode 
button.titlebutton:backdrop { -gtk-icon-shadow: none; }
 
-.view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text 
selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) 
selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, 
.menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, 
calendar:selected { background-color: #3584e4; }
+.view:selected:focus, .view:selected, iconview:selected, textview > text:selected, textview > text 
selection:focus, textview > text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) 
selection, spinbutton.vertical text selection, entry selection, modelbutton.flat:selected, 
.menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, 
calendar:selected, popover.menu box.inline-buttons button.image-button.model:selected, popover.menu 
modelbutton:selected { background-color: #3584e4; }
 
-label:selected, .selection-mode button.titlebutton, .view:selected:focus, .view:selected, iconview:selected, 
textview > text:selected, textview > text selection:focus, textview > text selection, flowbox 
flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry 
selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, 
treeview.view:selected, row:selected, calendar:selected { color: #ffffff; }
+label:selected, .selection-mode button.titlebutton, .view:selected:focus, .view:selected, iconview:selected, 
textview > text:selected, textview > text selection:focus, textview > text selection, flowbox 
flowboxchild:selected, spinbutton:not(.vertical) selection, spinbutton.vertical text selection, entry 
selection, modelbutton.flat:selected, .menuitem.button.flat:selected, treeview.view:selected:focus, 
treeview.view:selected, row:selected, calendar:selected, popover.menu box.inline-buttons 
button.image-button.model:selected, popover.menu modelbutton:selected { color: #ffffff; }
 
-label:disabled selection, label:disabled:selected, .selection-mode button.titlebutton:disabled, 
iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, textview > 
text:disabled:selected:focus, textview > text:disabled:selected, textview > text selection:disabled, flowbox 
flowboxchild:disabled:selected, spinbutton:not(.vertical) selection:disabled, spinbutton.vertical text 
selection:disabled, entry selection:disabled, modelbutton.flat:disabled:selected, 
.menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected { color: #9ac2f2; }
+label:disabled selection, label:disabled:selected, .selection-mode button.titlebutton:disabled, 
iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, textview > 
text:disabled:selected:focus, textview > text:disabled:selected, textview > text selection:disabled, flowbox 
flowboxchild:disabled:selected, spinbutton:not(.vertical) selection:disabled, spinbutton.vertical text 
selection:disabled, entry selection:disabled, modelbutton.flat:disabled:selected, 
.menuitem.button.flat:disabled:selected, row:disabled:selected, calendar:disabled:selected, popover.menu 
box.inline-buttons button.image-button.model:disabled:selected, popover.menu modelbutton:disabled:selected { 
color: #9ac2f2; }
 
-label:backdrop selection, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, 
iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, textview > 
text:backdrop:selected:focus, textview > text:backdrop:selected, textview > text selection:backdrop, flowbox 
flowboxchild:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, spinbutton.vertical text 
selection:backdrop, entry selection:backdrop, modelbutton.flat:backdrop:selected, 
.menuitem.button.flat:backdrop:selected, row:backdrop:selected, calendar:backdrop:selected { color: #fcfcfc; }
+label:backdrop selection, label:backdrop:selected, .selection-mode button.titlebutton:backdrop, 
iconview:backdrop:selected:focus, .view:backdrop:selected, iconview:backdrop:selected, textview > 
text:backdrop:selected:focus, textview > text:backdrop:selected, textview > text selection:backdrop, flowbox 
flowboxchild:backdrop:selected, spinbutton:not(.vertical) selection:backdrop, spinbutton.vertical text 
selection:backdrop, entry selection:backdrop, modelbutton.flat:backdrop:selected, 
.menuitem.button.flat:backdrop:selected, row:backdrop:selected, calendar:backdrop:selected, popover.menu 
box.inline-buttons button.image-button.model:backdrop:selected, popover.menu modelbutton:backdrop:selected { 
color: #fcfcfc; }
 
-label:backdrop selection:disabled, label:backdrop:disabled:selected, .selection-mode 
button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, 
textview > text:backdrop:disabled:selected, textview > text selection:backdrop:disabled, flowbox 
flowboxchild:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, 
spinbutton.vertical text selection:backdrop:disabled, entry selection:backdrop:disabled, 
modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, 
row:backdrop:disabled:selected, calendar:backdrop:disabled:selected { color: #71a8eb; }
+label:backdrop selection:disabled, label:backdrop:disabled:selected, .selection-mode 
button.titlebutton:backdrop:disabled, .view:backdrop:disabled:selected, iconview:backdrop:disabled:selected, 
textview > text:backdrop:disabled:selected, textview > text selection:backdrop:disabled, flowbox 
flowboxchild:backdrop:disabled:selected, spinbutton:not(.vertical) selection:backdrop:disabled, 
spinbutton.vertical text selection:backdrop:disabled, entry selection:backdrop:disabled, 
modelbutton.flat:backdrop:disabled:selected, .menuitem.button.flat:backdrop:disabled:selected, 
row:backdrop:disabled:selected, calendar:backdrop:disabled:selected, popover.menu box.inline-buttons 
button.image-button.model:backdrop:disabled:selected, popover.menu modelbutton:backdrop:disabled:selected { 
color: #71a8eb; }
 
 .monospace { font-family: monospace; }
 
@@ -2028,29 +2028,31 @@ menubar .csd.popup decoration { border-radius: 0; }
 
 popover.menu { padding: 0px; }
 
-popover.menu button.image-button.model { padding: 0; border: none; background: none; box-shadow: none; }
+popover.menu box.inline-buttons { padding: 0 20px; }
 
-popover.menu button.image-button.model:selected { border: none; color: #ffffff; background: #3584e4; }
+popover.menu box.inline-buttons button.image-button.model { border-color: transparent; background-color: 
transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; 
-gtk-icon-shadow: none; min-height: 30px; min-width: 30px; padding: 0; border: none; outline: none; 
transition: none; }
 
-popover.menu box.inline-buttons { border-radius: 5px; border-style: none; border-width: 0; 
border-image-source: none; border-image-width: 1px; }
+popover.menu box.circular-buttons { padding: 6px 0; }
 
-popover.menu box.circular-buttons { padding-bottom: 5px; }
+popover.menu box.circular-buttons button.circular.image-button.model { padding: 11px; }
 
 popover.menu > arrow, popover.menu.background > contents { background-color: #ffffff; }
 
-popover.menu.background separator { margin: 5px 0px; }
+popover.menu.background > contents { padding: 8px 0; }
 
-popover.menu accelerator { margin-left: 20px; color: gray; }
+popover.menu.background separator { margin: 6px 0; }
 
-popover.menu box.inline-buttons { padding: 0 5px; }
+popover.menu accelerator { color: alpha(currentColor,0.55); }
 
-popover.menu radio.left, popover.menu check.left { margin-left: 0; margin-right: 12px; }
+popover.menu accelerator:dir(ltr) { margin-left: 20px; }
 
-popover.menu radio.right, popover.menu check.right { margin-left: 12px; margin-right: 0; }
+popover.menu accelerator:dir(rtl) { margin-right: 20px; }
 
-popover.menu modelbutton:selected { color: #ffffff; background-color: #3584e4; }
+popover.menu arrow.left, popover.menu radio.left, popover.menu check.left { margin-left: 0; margin-right: 
8px; }
 
-popover.menu modelbutton:selected accelerator { color: silver; }
+popover.menu arrow.right, popover.menu radio.right, popover.menu check.right { margin-left: 8px; 
margin-right: 0; }
+
+popover.menu modelbutton { min-height: 30px; min-width: 40px; padding: 0 20px; border-radius: 0; }
 
 statusbar { padding: 6px 10px 6px 10px; }