66 lines
2.1 KiB
CSS
66 lines
2.1 KiB
CSS
.surface,
|
|
.backing {
|
|
border-radius: var(--dsw-radius-lg);
|
|
}
|
|
|
|
.compact {
|
|
border-radius: var(--dsw-radius-md);
|
|
}
|
|
|
|
:where(.surface) {
|
|
position: relative;
|
|
}
|
|
|
|
.surface {
|
|
anchor-name: var(--dsh-menu-anchor);
|
|
isolation: isolate;
|
|
}
|
|
|
|
/* Filtering only the background keeps nested menus and fixed overlays free of
|
|
* an ancestor backdrop root or a new fixed-position containing block. */
|
|
.material {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -1;
|
|
border-radius: inherit;
|
|
background: var(--dsw-menu-surface-fill);
|
|
backdrop-filter: var(--dsw-menu-backdrop-filter);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.backing {
|
|
display: none;
|
|
}
|
|
|
|
/* Chromium needs opaque pixels behind the page content to blur it over native
|
|
* vibrancy. Body isolation keeps this backing above the native window and below
|
|
* the page; CSS anchors limit it to this menu without a layout observer. */
|
|
:global(html[data-platform='darwin']) .backing {
|
|
display: block;
|
|
position: fixed;
|
|
position-anchor: var(--dsh-menu-anchor);
|
|
top: anchor(top);
|
|
left: anchor(left);
|
|
width: anchor-size(width, 0px);
|
|
height: anchor-size(height, 0px);
|
|
z-index: -1;
|
|
background: var(--dsw-alias-bg-base);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Opacity on the container would prevent its material from blurring the page.
|
|
* Enter animations release their compositing layers so nested menus can blur too. */
|
|
.surface[data-menu-phase='enter'] > *,
|
|
.backing[data-menu-phase='enter'] { animation: dsh-context-menu-in var(--dsh-menu-enter) ease-out; }
|
|
.surface[data-menu-phase='dismiss'] > *,
|
|
.backing[data-menu-phase='dismiss'],
|
|
.surface[data-menu-phase='replace'] > *,
|
|
.backing[data-menu-phase='replace'] { animation: dsh-context-menu-out var(--dsh-menu-dismiss) ease-in both; }
|
|
.surface[data-menu-phase='replace'] > *,
|
|
.backing[data-menu-phase='replace'] { animation-duration: var(--dsh-menu-replace); }
|
|
@keyframes dsh-context-menu-in { from { opacity: 0; } to { opacity: 1; } }
|
|
@keyframes dsh-context-menu-out { from { opacity: 1; } to { opacity: 0; } }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.surface[data-menu-phase] > *, .backing[data-menu-phase] { animation-duration: 0ms; }
|
|
}
|