forked from AuroraMiddleware/gtk
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
This commit is contained in:
nana-4
parent
ab32b1bba2
commit
4c2707916c
@ -4865,28 +4865,29 @@ menubar {
|
||||
popover.menu {
|
||||
padding: 0px;
|
||||
|
||||
& button.image-button.model {
|
||||
& box.inline-buttons {
|
||||
padding: 0 20px;
|
||||
|
||||
button.image-button.model {
|
||||
@include button(undecorated);
|
||||
|
||||
min-height: 30px;
|
||||
min-width: 30px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
& button.image-button.model:selected {
|
||||
border: none;
|
||||
color: $selected_fg_color;
|
||||
background: $selected_bg_color;
|
||||
}
|
||||
outline: none;
|
||||
transition: none;
|
||||
|
||||
& box.inline-buttons {
|
||||
border-radius: 5px;
|
||||
border-style: none;
|
||||
border-width: 0;
|
||||
border-image-source: none;
|
||||
border-image-width: 1px;
|
||||
&: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;
|
||||
}
|
||||
|
||||
& box.inline-buttons {
|
||||
padding: 0 5px;
|
||||
color: gtkalpha(currentColor,0.55);
|
||||
|
||||
&: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; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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; }
|
||||
|
||||
|
||||
@ -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; }
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user