menu: adjusted for material style (#7731)

This commit is contained in:
FloVanGH 2025-02-25 08:25:31 +01:00 committed by GitHub
parent aa2f35f82a
commit 5019ff7df4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 27 additions and 26 deletions

View file

@ -13,37 +13,38 @@ export component MenuBarItem {
min-height: base.min-height;
base := MenuBarItemBase {
padding-left: 11px;
padding-right: 11px;
padding-top: 4px;
padding-bottom: 6px;
padding-left: 12px;
padding-right: 12px;
padding-top: 8px;
padding-bottom: 8px;
default-foreground: MaterialPalette.foreground;
hover-foreground: MaterialPalette.accent-foreground;
pressed-foreground: MaterialPalette.accent-foreground;
hover-background: MaterialPalette.accent-background;
pressed-background: MaterialPalette.accent-background;
hover-foreground: MaterialPalette.foreground;
pressed-foreground: MaterialPalette.foreground;
hover-background: MaterialPalette.surface-container-highest;
pressed-background: MaterialPalette.surface-container-highest;
font-size: MaterialFontSettings.body-large.font-size;
font-weight: MaterialFontSettings.body-large.font-weight;
border-radius: 3px;
}
}
export component MenuBar inherits MenuBarBase {
padding: 9px;
spacing: 10px;
padding-left: 4px;
padding-right: 4px;
spacing: 8px;
min-layout-height: 40px;
}
export component MenuFrame inherits MenuFrameBase {
background: MaterialPalette.background;
border-radius: 7px;
background: MaterialPalette.surface-container;
border-radius: 4px;
border-width: 1px;
border-color: MaterialPalette.border;
drop-shadow-color: MaterialPalette.shadow;
drop-shadow-offset-y: 8px;
drop-shadow-blur: 16px;
padding: 1px;
layout-min-width: 280px;
drop-shadow-offset-y: 2px;
drop-shadow-blur: 6px;
padding-top: 8px;
padding-bottom: 8px;
layout-min-width: 200px;
}
export component MenuItem {
@ -57,20 +58,19 @@ export component MenuItem {
min-height: max(40px, base.min-height);
HorizontalLayout {
padding: 5px;
base := MenuItemBase {
default-foreground: MaterialPalette.foreground;
current-foreground: MaterialPalette.accent-foreground;
current-background: MaterialPalette.accent-background;
current-foreground: MaterialPalette.foreground;
current-background: MaterialPalette.surface-container-highest;
font-size: MaterialFontSettings.body-large.font-size;
font-weight: MaterialFontSettings.body-large.font-weight;
border-radius: 4px;
padding-left: 11px;
padding-right: 11px;
padding-left: 12px;
padding-right: 12px;
padding-top: 8px;
padding-bottom: 8px;
spacing: 8px;
sub-menu-icon: @image-url("_arrow_forward.svg");
icon-size: 12px;
icon-size: MaterialFontSettings.body-large.font-size;
}
}
}

View file

@ -47,10 +47,11 @@ export global MaterialPalette {
out property <brush> control-background-tint: !root.dark-color-scheme ? #6750A4 : #D0BCFF;
out property <brush> accent-container: !root.dark-color-scheme ? #4F378B : #4F378B;
out property <brush> accent-ripple: !root.dark-color-scheme ? #D0BCFF : #6750A4;
out property <brush> shadow: #000000;
out property <brush> shadow: #000000.with_alpha(0.3);
out property <brush> border-variant: !root.dark-color-scheme ? #C4C7C5 : #444746;
out property <brush> foreground-alt: !root.dark-color-scheme ? #1C1B1F : #E6E1E5;
out property <brush> secondary-ripple: !root.dark-color-scheme ? #fffc : #000000;
out property <brush> surface-container: !root.dark-color-scheme ? #F3EDF7 : #211F26;
out property <brush> surface-container-high: !root.dark-color-scheme ? #ECE6F0 : #2B2930;
out property <brush> surface-container-highest: !root.dark-color-scheme ? #E6E0E9 : #36343B;
out property <brush> tertiary-container: !root.dark-color-scheme ? #FFD8E4 : #633B48;