Contrasty menus

[danirabbit]

Potential dark/flat menu design:

/*
You can type here any CSS rule recognized by GTK+.
You can temporarily disable this custom CSS by clicking on the “Pause” button above.

Changes are applied instantly and globally, for the whole application.
*/

menu {
background: alpha (@SLATE_900, 0.9);
box-shadow: none;
color: white;
border-radius: 6px;
}

menu separator {
border: none;
box-shadow: none;
min-height: 6px
}

menuitem:hover {
background: alpha (#fff, 0.1);
}

window.popup {
border-radius: 7px;
}

window.popup decoration {
border-radius: 7px;
    box-shadow:
        0 3px 8px alpha (#000, 0.2),
        0 1px 2px alpha (#000, 0.3);
}

.keycap {
background: alpha (#fff, 0.4);
color: @SLATE_900;
box-shadow: 0 1px 1px alpha (@SLATE_900, 0.5);
}

.color-button check {
box-shadow:
    inset 0 1px alpha (#fff, 0.15),
0 1px 1px alpha (@SLATE_900, 0.5);
border: none;
}

[cassidyjames]

@danrabbit would this apply for the standard stylesheet (i.e. the light style), or is this just a dark version?

[jtrees]

I like it. But the difference in margins on the left and right kinda bugs me. How about something more symmetric, like this? (It's not pixel perfect.)

[danirabbit]

@jtrees hey that looks nice and makes the submenu arrows stand out more. Good improvement.

@cassidyjames I was kind of playing with it for always, but I know that this breaks down in popovers because you can pack any widget there, so we'd have to basically include the dark stylesheet inside the light stylesheet in popovers. So maybe it's better not to do that.

[ryanprior]

Do you have a render against a dark background, like we would have if using this as part of a dark-mode stylesheet? Looks great against pure white but I wonder about contrast with a darker bg?

[hanaral]

I feel that the panel corners are far too rounded, it looks a bit too much like a popover. I think that the current section dividers and corner radius should be retained to fit the desktop design metaphor. Leaving the corner radius as is makes it less confusing as to where the user right clicked (like the red dot in the image)

As for the colour, I think that more neutral tones fit better, like something more gray-ish or even the current colouring. Excellent work with the palette picker btw.