diff --git a/src/app.css b/src/app.css index 32dc58a85..7d13d40e8 100644 --- a/src/app.css +++ b/src/app.css @@ -1810,13 +1810,14 @@ body > .szh-menu-container { env(safe-area-inset-bottom) env(safe-area-inset-left); } .szh-menu { - padding: 8px 0; + padding: 4px 0; margin: 0; font-size: var(--text-size); background-color: var(--bg-color); - border: 1px solid var(--outline-color); + border: 1px solid var(--outline-stronger-color); border-radius: 8px; - box-shadow: 0 3px 16px -3px var(--drop-shadow-color); + box-shadow: 0 3px 8px var(--drop-shadow-color), + 0 6px 32px -6px var(--drop-shadow-color); text-align: start; /* animation: appear-smooth 0.15s ease-in-out; */ min-width: 16em; @@ -1881,6 +1882,9 @@ body > .szh-menu-container { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + + --menu-item-bg-inset: 0 4px; + --menu-item-bg-color: var(--button-bg-color); } .szh-menu .szh-menu__item--focusable { background-color: transparent; @@ -1917,9 +1921,30 @@ body > .szh-menu-container { .szh-menu__item:not(.szh-menu__item--disabled, .szh-menu__item--hover) { color: var(--text-color); } +.szh-menu .szh-menu__item:not(.menu-field) { + position: relative; + & > * { + /* z-index: 1; */ + } + + &:before { + content: ''; + background-color: var(--menu-item-bg-color); + position: absolute; + inset: var(--menu-item-bg-inset); + border-radius: 4px; + z-index: -1; + opacity: 0; + } +} .szh-menu .szh-menu__item--hover:not(.menu-field) { color: var(--button-text-color); - background-color: var(--button-bg-color); + /* background-color: var(--button-bg-color); */ + background-color: transparent; + + &:before { + opacity: 1; + } } .szh-menu__divider { background-color: var(--divider-color); @@ -1995,10 +2020,12 @@ body > .szh-menu-container { } .szh-menu .szh-menu__item.danger:not(.szh-menu__item--disabled).szh-menu__item--hover { - background-color: var(--red-text-color); + /* background-color: var(--red-text-color); */ + --menu-item-bg-color: var(--red-text-color); @media (prefers-color-scheme: dark) { - background-color: var(--red-color); + /* background-color: var(--red-color); */ + --menu-item-bg-color: var(--red-color); } } .szh-menu @@ -2038,12 +2065,20 @@ body > .szh-menu-container { ); } } + + &:before { + content: ''; + } + } + + .szh-menu__item--hover { + background-color: var(--menu-item-bg-color); } } .menu-control-group-horizontal:first-child, li[role='none'] + .menu-control-group-horizontal { - margin-top: -8px; + margin-top: -4px; margin-bottom: -4px; .szh-menu__item { @@ -2094,11 +2129,10 @@ body > .szh-menu-container { background-color: var(--bg-blur-color); backdrop-filter: blur(8px) saturate(3); border: var(--hairline-width) solid var(--bg-color); - box-shadow: 0 3px 8px -1px var(--drop-shadow-color); text-shadow: 0 var(--hairline-width) var(--bg-color), 0 0 8px var(--bg-color); } .glass-menu .szh-menu__item--hover { - background-color: var(--button-bg-blur-color); + /* background-color: var(--button-bg-blur-color); */ text-shadow: none; } diff --git a/src/components/nav-menu.css b/src/components/nav-menu.css index 08332fded..0c82191b7 100644 --- a/src/components/nav-menu.css +++ b/src/components/nav-menu.css @@ -22,7 +22,7 @@ margin-bottom: -8px; } .nav-menu section { - padding: 8px 0; + padding: 4px 0; /* width: 50%; */ } @keyframes phanpying { diff --git a/src/index.css b/src/index.css index 45b1eed1d..ce501be15 100644 --- a/src/index.css +++ b/src/index.css @@ -84,6 +84,7 @@ var(--text-color) 60% ); --outline-color: rgba(128, 128, 128, 0.2); + --outline-stronger-color: rgba(128, 128, 128, 0.4); --outline-hover-color: rgba(128, 128, 128, 0.7); --divider-color: rgba(0, 0, 0, 0.1); --backdrop-color: rgba(0, 0, 0, 0.1);