toolkit/themes/shared/popup.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
   6
   7 /* ::::: menupopup ::::: */
   8
   9 menupopup,
  10 panel {
  11   /* We can always render in the preferred color scheme (unless otherwise
  12    * overridden). */
  13   color-scheme: light dark;
  14
  15   min-width: 1px;
  16   --panel-background: Menu;
  17   --panel-color: MenuText;
  18   --panel-padding-block: 4px;
  19   --panel-padding: var(--panel-padding-block) 0;
  20   --panel-border-radius: 4px;
  21   --panel-border-color: ThreeDShadow;
  22   --panel-width: initial;
  23
  24   --panel-shadow-margin: 0px;
  25   --panel-shadow: 0 0 var(--panel-shadow-margin) hsla(0,0%,0%,.2);
  26   -moz-window-input-region-margin: var(--panel-shadow-margin);
  27   margin: calc(-1 * var(--panel-shadow-margin));
  28
  29   /* Panel design token theming */
  30   --color-canvas: var(--panel-background);
  31
  32   @media (-moz-platform: linux) {
  33     --panel-border-radius: 8px;
  34     --panel-padding-block: 3px;
  35
  36     @media (prefers-contrast) {
  37       --panel-border-color: color-mix(in srgb, currentColor 60%, transparent);
  38     }
  39   }
  40
  41   @media (-moz-platform: linux) or (-moz-platform: windows) {
  42     /* To account for the box-shadow below */
  43     --panel-shadow-margin: 4px;
  44   }
  45
  46   @media (-moz-platform: macos) {
  47     appearance: auto;
  48     -moz-default-appearance: menupopup;
  49     /* We set the default background here, rather than on ::part(content),
  50      * because otherwise it'd interfere with the native look. Non-native-looking
  51      * popups should get their background via --panel-background */
  52     background-color: Menu;
  53     --panel-background: none;
  54     --panel-border-color: transparent;
  55     /* This should be kept in sync with GetMenuMaskImage() */
  56     --panel-border-radius: 6px;
  57   }
  58
  59   &::part(content) {
  60     display: flex;
  61     box-sizing: border-box;
  62
  63     padding: var(--panel-padding);
  64     color: var(--panel-color);
  65     background: var(--panel-background);
  66     border-radius: var(--panel-border-radius);
  67     border: 1px solid var(--panel-border-color);
  68     width: var(--panel-width);
  69     box-shadow: var(--panel-shadow);
  70     margin: var(--panel-shadow-margin);
  71
  72     min-width: 0;
  73     min-height: 0;
  74
  75     /* Makes popup constraints work. Round up to avoid subpixel rounding
  76      * causing overflow, see bug 1846050 */
  77     max-height: round(up, 100% - 2 * var(--panel-shadow-margin), 1px);
  78     max-width: round(up, 100% - 2 * var(--panel-shadow-margin), 1px);
  79
  80     overflow: clip; /* Don't let panel content overflow the border */
  81   }
  82
  83   &[orient=vertical]::part(content) {
  84     flex-direction: column;
  85   }
  86 }
  87
  88 menupopup {
  89   /* Also apply the padding in the inline axis for menus */
  90   --panel-padding: var(--panel-padding-block);
  91
  92   @media (-moz-platform: windows) {
  93     > menu,
  94     > menuitem {
  95       padding-block: 0.5em;
  96       padding-inline-start: 1em;
  97     }
  98   }
  99
 100   > menu > menupopup {
 101     /* Vertically align nested menupopups: the shadow plus the top padding plus top border */
 102     margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--panel-padding-block) + 1px));
 103   }
 104 }
 105
 106 /* Rules for popups associated with menulists */
 107 menulist > menupopup {
 108   min-width: 0;
 109
 110   @media (-moz-platform: windows) {
 111     font: inherit;
 112   }
 113
 114   @media (-moz-platform: macos) {
 115     &:not([position]) {
 116       margin-inline-start: -13px;
 117       margin-top: -1px;
 118     }
 119   }
 120 }
 121
 122 /* ::::: arrow panel ::::: */
 123
 124 panel:where([type="arrow"]) {
 125   appearance: none;
 126   background-color: transparent;
 127
 128   &.panel-no-padding::part(content) {
 129     padding: 0;
 130   }
 131 }
 132
 133 /* ::::: panel animations ::::: */
 134
 135 .animatable-menupopup,
 136 panel[type="arrow"] {
 137   transition-timing-function: var(--animation-easing-function), ease-out;
 138
 139   @media (-moz-panel-animations) and (prefers-reduced-motion: no-preference) {
 140     &:not([animate="false"]) {
 141       transition-duration: 0.18s;
 142     }
 143   }
 144
 145   @media not (-moz-platform: macos) {
 146     transition-property: transform, opacity;
 147     will-change: transform, opacity;
 148     opacity: 0;
 149     transform: translateY(-70px);
 150
 151     &[side="bottom"] {
 152       transform: translateY(70px);
 153     }
 154   }
 155
 156   /* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity"
 157    * instead of "transform" and "opacity" for these animations.
 158    * The -moz-window* properties apply to the whole window including the
 159    * window's shadow, and they don't affect the window's "shape", so the
 160    * system doesn't have to recompute the shadow shape during the animation.
 161    * This makes them a lot faster. These properties are not implemented on
 162    * other platforms.
 163    */
 164   @media (-moz-platform: macos) {
 165     transition-property: -moz-window-transform, -moz-window-opacity;
 166     /* Only do the fade-in animation on pre-Big Sur to avoid missing shadows on
 167      * Big Sur, see bug 1672091. */
 168     @media not (-moz-mac-big-sur-theme) {
 169       -moz-window-opacity: 0;
 170       -moz-window-transform: translateY(-70px);
 171
 172       &[side="bottom"] {
 173         -moz-window-transform: translateY(70px);
 174       }
 175     }
 176     /* If the @media rule above is removed, then we can also remove this */
 177     &[animate="cancel"] {
 178       -moz-window-opacity: 0;
 179     }
 180   }
 181
 182   &[animate="cancel"] {
 183     -moz-window-transform: none;
 184     transform: none;
 185   }
 186
 187   &:is([animate="false"], [animate="open"]) {
 188     opacity: 1;
 189     transform: none;
 190     -moz-window-opacity: 1;
 191     -moz-window-transform: none;
 192     transition-timing-function: var(--animation-easing-function), ease-in-out;
 193   }
 194
 195   &[animating] {
 196     pointer-events: none;
 197   }
 198 }