From 40a355a42d4a9444dc753c04c6608dade2f06a23 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 03:13:27 +0200 Subject: Adding upstream version 125.0.1. Signed-off-by: Daniel Baumann --- toolkit/themes/shared/popup.css | 89 ++++++++++++++++++++++++++++++++++++----- 1 file changed, 78 insertions(+), 11 deletions(-) (limited to 'toolkit/themes/shared/popup.css') diff --git a/toolkit/themes/shared/popup.css b/toolkit/themes/shared/popup.css index ddc41a66ed..1426f9c4f6 100644 --- a/toolkit/themes/shared/popup.css +++ b/toolkit/themes/shared/popup.css @@ -83,17 +83,6 @@ panel { &[orient=vertical]::part(content) { flex-direction: column; } - - /* ::::: arrow panel ::::: */ - - &:where([type="arrow"]) { - appearance: none; - background-color: transparent; - - &.panel-no-padding::part(content) { - padding: 0; - } - } } menupopup { @@ -129,3 +118,81 @@ menulist > menupopup { } } } + +/* ::::: arrow panel ::::: */ + +panel:where([type="arrow"]) { + appearance: none; + background-color: transparent; + + &.panel-no-padding::part(content) { + padding: 0; + } +} + +/* ::::: panel animations ::::: */ + +.animatable-menupopup, +panel[type="arrow"] { + transition-timing-function: var(--animation-easing-function), ease-out; + + @media (-moz-panel-animations) and (prefers-reduced-motion: no-preference) { + &:not([animate="false"]) { + transition-duration: 0.18s; + } + } + + @media not (-moz-platform: macos) { + transition-property: transform, opacity; + will-change: transform, opacity; + opacity: 0; + transform: translateY(-70px); + + &[side="bottom"] { + transform: translateY(70px); + } + } + + /* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity" + * instead of "transform" and "opacity" for these animations. + * The -moz-window* properties apply to the whole window including the + * window's shadow, and they don't affect the window's "shape", so the + * system doesn't have to recompute the shadow shape during the animation. + * This makes them a lot faster. These properties are not implemented on + * other platforms. + */ + @media (-moz-platform: macos) { + transition-property: -moz-window-transform, -moz-window-opacity; + /* Only do the fade-in animation on pre-Big Sur to avoid missing shadows on + * Big Sur, see bug 1672091. */ + @media not (-moz-mac-big-sur-theme) { + -moz-window-opacity: 0; + -moz-window-transform: translateY(-70px); + + &[side="bottom"] { + -moz-window-transform: translateY(70px); + } + } + /* If the @media rule above is removed, then we can also remove this */ + &[animate="cancel"] { + -moz-window-opacity: 0; + } + } + + &[animate="cancel"] { + -moz-window-transform: none; + transform: none; + } + + &:is([animate="false"], [animate="open"]) { + opacity: 1; + transform: none; + -moz-window-opacity: 1; + -moz-window-transform: none; + transition-timing-function: var(--animation-easing-function), ease-in-out; + } + + &[animating] { + pointer-events: none; + } +} -- cgit v1.2.3