diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /browser/base/content/browser.css | |
parent | Initial commit. (diff) | |
download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip |
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | browser/base/content/browser.css | 1682 |
1 files changed, 1682 insertions, 0 deletions
diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css new file mode 100644 index 0000000000..4279c9ccfc --- /dev/null +++ b/browser/base/content/browser.css @@ -0,0 +1,1682 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root, +body { + margin: 0; + padding: 0; + height: 100%; + width: 100%; + overflow: clip; +} + +:root { + text-rendering: optimizeLegibility; + min-height: 95px; + min-width: 95px; + + /* z-indices that fight on the browser stack */ + --browser-stack-z-index-devtools-splitter: 1; + --browser-stack-z-index-dialog-stack: 2; + --browser-stack-z-index-rdm-toolbar: 3; +} + +:root:-moz-locale-dir(rtl) { + direction: rtl; +} + +:root:not([chromehidden~="toolbar"]) { + min-width: 450px; + min-height: 120px; +} + +#appcontent, +#browser, +#tabbrowser-tabbox, +#tabbrowser-tabpanels, +.browserSidebarContainer { + /* Allow devtools with large specified width/height to shrink */ + min-width: 0; + min-height: 0; +} + +/* We set large flex on both containers to allow the devtools toolbox to + * set a flex value itself. We don't want the toolbox to actually take up free + * space, but we do want it to collapse when the window shrinks, and with + * flex: 0 it can't. + * + * When the toolbox is on the bottom it's a sibling of browserStack, and when + * it's on the side it's a sibling of browserContainer. + */ +.browserContainer { + flex: 10000 10000; + /* To contain the status panel */ + position: relative; + + /* .browserContainer only contains the devtools when docked horizontally */ + min-height: 0; +} + +.browserStack { + flex: 10000 10000; + /* Prevent shrinking the page content to 0 height and width */ + min-height: 25px; + min-width: 25px; +} + +body { + display: flex; + flex-direction: column; + flex: 1; +} + +#navigator-toolbox:-moz-lwtheme { + background-image: var(--lwt-additional-images); + background-repeat: var(--lwt-background-tiling); + background-position: var(--lwt-background-alignment); +} + +/* TODO bug 1695280: Remove these media selectors and merge the rule below + with the ruleset above. We must set background properties on :root and not + #navigator-toolbox on Windows 7/8 due to a WebRender bug that hides the + minimize/maximize/close buttons. */ +@media not (-moz-platform: windows-win7) { + @media not (-moz-platform: windows-win8) { + #navigator-toolbox:-moz-lwtheme { + background-color: var(--lwt-accent-color); + } + + /* When a theme defines both theme_frame and additional_backgrounds, show + the latter atop the former. */ + :root[lwtheme-image] #navigator-toolbox { + background-image: var(--lwt-header-image), var(--lwt-additional-images); + background-repeat: no-repeat, var(--lwt-background-tiling); + background-position: right top, var(--lwt-background-alignment); + } + + #navigator-toolbox:-moz-window-inactive:-moz-lwtheme { + background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); + } + } +} +/* TODO bug 1695280: Remove this block. */ +@media (-moz-platform: windows-win7), + (-moz-platform: windows-win8) { + :root:-moz-lwtheme { + background-color: var(--lwt-accent-color); + background-image: var(--lwt-additional-images); + background-repeat: var(--lwt-background-tiling); + background-position: var(--lwt-background-alignment); + } + + :root[lwtheme-image] { + background-image: var(--lwt-header-image, linear-gradient(transparent, transparent)), var(--lwt-additional-images) !important; + background-repeat: no-repeat, var(--lwt-background-tiling); + background-position: right top, var(--lwt-background-alignment) !important; + } + + :root:-moz-lwtheme:-moz-window-inactive { + background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); + } +} + +#titlebar { + -moz-window-dragging: drag; +} + +#toolbar-menubar[autohide="true"] { + overflow: hidden; +} + +#toolbar-menubar[autohide="true"][inactive="true"]:not([customizing="true"]) { + min-height: 0 !important; + height: 0 !important; + padding: 0 !important; + appearance: none !important; +} + +#toolbar-menubar:not([autohide]) { + visibility: collapse; +} + +panelmultiview { + align-items: flex-start; + min-width: 0; + min-height: 0; +} + +panelmultiview[transitioning] { + pointer-events: none; +} + +panelview { + flex-direction: column; +} + +panelview:not([visible]) { + visibility: collapse; +} + +.panel-viewcontainer { + overflow: hidden; + flex-shrink: 0; + min-width: 0; + min-height: 0; +} + +.panel-viewcontainer[panelopen] { + transition-property: height; + transition-timing-function: var(--animation-easing-function); + transition-duration: var(--panelui-subview-transition-duration); + will-change: height; +} + +.panel-viewcontainer.offscreen { + display: block; +} + +.panel-viewstack { + overflow: visible; + transition: height var(--panelui-subview-transition-duration); +} + +@supports not -moz-bool-pref("browser.tabs.tabmanager.enabled") { + #tabbrowser-tabs:not([overflow="true"], [hashiddentabs]) ~ #alltabs-button { + display: none; + } + #tabbrowser-tabs:not([overflow="true"])[using-closing-tabs-spacer] ~ #alltabs-button { + /* temporary space to keep a tab's close button under the cursor */ + display: flex; + visibility: hidden; + } +} + +#tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) ~ #new-tab-button, +#tabbrowser-tabs[overflow="true"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button, +#tabbrowser-tabs:not([hasadjacentnewtabbutton]) > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button, +#TabsToolbar[customizing="true"] #tabs-newtab-button { + display: none; +} + +.tabbrowser-tab:not([pinned]) { + flex: 100 100; + max-width: 225px; + min-width: var(--tab-min-width); + transition: min-width 100ms ease-out, + max-width 100ms ease-out; +} + +:root[uidensity=touch] .tabbrowser-tab:not([pinned]) { + /* Touch mode needs additional space for the close button. */ + min-width: calc(var(--tab-min-width) + 10px); +} + +.tabbrowser-tab:not([pinned], [fadein]) { + max-width: 0.1px; + min-width: 0.1px; + visibility: hidden; +} + +.tab-icon-pending:not([fadein]), +.tab-icon-image:not([fadein]), +.tab-close-button:not([fadein]), +.tabbrowser-tab:not([fadein])::after, +.tab-background:not([fadein]) { + visibility: hidden; +} + +.tab-label:not([fadein]), +.tab-throbber:not([fadein]) { + display: none; +} + +#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { + position: absolute !important; + display: block; +} + +#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected], +#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[multiselected] { + position: relative; + z-index: 2; + pointer-events: none; /* avoid blocking dragover events on scroll buttons */ +} + +@media (prefers-reduced-motion: no-preference) { + #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[fadein]:not([selected]):not([multiselected]), + .tabbrowser-tab[tab-grouping], + .tabbrowser-tab[tabdrop-samewindow] { + transition: transform 200ms var(--animation-easing-function); + } +} + +.tabbrowser-tab[tab-grouping][multiselected]:not([selected]) { + z-index: 2; +} + +/* Make it easier to drag tabs by expanding the drag area downwards. */ +#tabbrowser-tabs[movingtab] { + padding-bottom: 15px; + margin-bottom: -15px; +} + +#navigator-toolbox[movingtab] > #nav-bar { + pointer-events: none; +} + +#nav-bar-customization-target { + /* Don't grow if potentially-user-sized elements (like the searchbar or the + * bookmarks toolbar item list) are too wide. This forces them to flex to the + * available space as much as possible, see bug 1795260. */ + min-width: 0; +} + +/* Allow dropping a tab on buttons with associated drop actions. */ +#navigator-toolbox[movingtab] > #nav-bar > #nav-bar-customization-target > #personal-bookmarks, +#navigator-toolbox[movingtab] > #nav-bar > #nav-bar-customization-target > #home-button, +#navigator-toolbox[movingtab] > #nav-bar > #nav-bar-customization-target > #downloads-button, +#navigator-toolbox[movingtab] > #nav-bar > #nav-bar-customization-target > #bookmarks-menu-button { + pointer-events: auto; +} + +/* The address bar needs to be able to render outside of the toolbar, but as + * long as it's within the toolbar's bounds we can clip the toolbar so that the + * rendering pipeline doesn't reserve an enormous texture for it. */ +#nav-bar:not([urlbar-exceeds-toolbar-bounds]), +/* When customizing, overflowable toolbars move automatically moved items back + * from the overflow menu, but we still don't want to render them outside of + * the customization target. */ +toolbar[overflowable][customizing] > .customization-target { + overflow: clip; +} + +toolbar:not([overflowing]) > .overflow-button, +toolbar[customizing] > .overflow-button { + display: none; +} + +toolbar[customizing] #ion-button, +toolbar[customizing] #whats-new-menu-button { + display: none; +} + +:root:not([chromehidden~="toolbar"]) #nav-bar[nonemptyoverflow] > .overflow-button, +#nav-bar[customizing] > .overflow-button { + display: flex; +} + +/* The ids are ugly, but this should be reasonably performant, and + * using a tagname as the last item would be less so. + */ +#widget-overflow-list:empty + #widget-overflow-fixed-separator, +#widget-overflow:not([hasfixeditems]) #widget-overflow-fixed-separator { + display: none; +} + +/* Hide the TabsToolbar titlebar controls if the menubar is permanently shown. + * (That is, if the menu bar doesn't autohide, and we're not in a fullscreen or + * popup window.) */ +:root:not([chromehidden~="menubar"], [inFullscreen]) #toolbar-menubar[autohide="false"] + #TabsToolbar > :is(.titlebar-buttonbox-container, .titlebar-spacer) { + display: none; +} + +:root:not([chromemargin], [inFullscreen]) .titlebar-buttonbox-container, +:root[inFullscreen] .titlebar-spacer, +:root:not([tabsintitlebar]) .titlebar-spacer { + display: none; +} + +@media (-moz-platform: windows) { + :root:not([sizemode=normal]) .titlebar-spacer[type="pre-tabs"] { + display: none; + } +} + +@media (-moz-platform: linux) { + @media (-moz-gtk-csd-reversed-placement: 0) { + :root:not([sizemode=normal]) .titlebar-spacer[type="pre-tabs"], + :root[gtktiledwindow=true] .titlebar-spacer[type="pre-tabs"] { + display: none; + } + } + @media (-moz-gtk-csd-reversed-placement) { + :root:not([sizemode=normal]) .titlebar-spacer[type="post-tabs"], + :root[gtktiledwindow=true] .titlebar-spacer[type="post-tabs"] { + display: none; + } + } +} + +:root:not([sizemode=maximized], [sizemode=fullscreen]) .titlebar-restore, +:root:is([sizemode=maximized], [sizemode=fullscreen]) .titlebar-max { + display: none; +} + +#toolbar-menubar[autohide="true"]:not([inactive]) + #TabsToolbar > .titlebar-buttonbox-container { + visibility: hidden; +} + +:root[tabsintitlebar] .titlebar-buttonbox { + position: relative; +} + +:root:not([tabsintitlebar], [sizemode=fullscreen]) .titlebar-buttonbox { + display: none; +} + +.titlebar-buttonbox { + appearance: auto; + -moz-default-appearance: -moz-window-button-box; + position: relative; +} + +#personal-toolbar-empty-description { + -moz-window-dragging: no-drag; +} + +#personal-bookmarks { + -moz-window-dragging: inherit; +} + +toolbarpaletteitem { + -moz-window-dragging: no-drag; + justify-content: flex-start; +} + +.titlebar-buttonbox-container { + order: 1000; +} + +@media (-moz-platform: macos) { + @media not (-moz-mac-rtl) { + .titlebar-buttonbox-container:-moz-locale-dir(ltr) { + order: -1; + } + } + + @media (-moz-mac-rtl) { + .titlebar-buttonbox-container:-moz-locale-dir(rtl) { + order: -1; + } + } +} + +:root[inDOMFullscreen] #navigator-toolbox, +:root[inDOMFullscreen] #fullscr-toggler, +:root[inDOMFullscreen] #sidebar-box, +:root[inDOMFullscreen] #sidebar-splitter, +:root[inFullscreen]:not([macOSNativeFullscreen]) toolbar:not([fullscreentoolbar=true]), +:root[inFullscreen] .global-notificationbox { + visibility: collapse; +} + +#navigator-toolbox[fullscreenShouldAnimate] { + transition: 0.8s margin-top ease-out; +} + +/* Rules to help integrate WebExtension buttons */ + +.webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-icon { + height: 16px; + width: 16px; +} + +@media not all and (min-resolution: 1.1dppx) { + .webextension-browser-action { + list-style-image: var(--webextension-toolbar-image, inherit); + } + + toolbar[brighttext] .webextension-browser-action { + list-style-image: var(--webextension-toolbar-image-light, inherit); + } + + toolbar:not([brighttext]) .webextension-browser-action:-moz-lwtheme { + list-style-image: var(--webextension-toolbar-image-dark, inherit); + } + + toolbaritem:is([overflowedItem="true"], [cui-areatype="panel"]) > .webextension-browser-action { + list-style-image: var(--webextension-menupanel-image, inherit); + } + + :root[lwt-popup-brighttext] toolbaritem:is([overflowedItem="true"], [cui-areatype="panel"]) > .webextension-browser-action { + list-style-image: var(--webextension-menupanel-image-light, inherit); + } + + :root:not([lwt-popup-brighttext]) toolbaritem:is([overflowedItem="true"], [cui-areatype="panel"]) > .webextension-browser-action:-moz-lwtheme { + list-style-image: var(--webextension-menupanel-image-dark, inherit); + } + + .webextension-menuitem { + list-style-image: var(--webextension-menuitem-image, inherit) !important; + } +} + +@media (min-resolution: 1.1dppx) { + .webextension-browser-action { + list-style-image: var(--webextension-toolbar-image-2x, inherit); + } + + toolbar[brighttext] .webextension-browser-action { + list-style-image: var(--webextension-toolbar-image-2x-light, inherit); + } + + toolbar:not([brighttext]) .webextension-browser-action:-moz-lwtheme { + list-style-image: var(--webextension-toolbar-image-2x-dark, inherit); + } + + toolbaritem:is([overflowedItem="true"], [cui-areatype="panel"]) > .webextension-browser-action { + list-style-image: var(--webextension-menupanel-image-2x, inherit); + } + + :root[lwt-popup-brighttext] toolbaritem:is([overflowedItem="true"], [cui-areatype="panel"]) > .webextension-browser-action { + list-style-image: var(--webextension-menupanel-image-2x-light, inherit); + } + + :root:not([lwt-popup-brighttext]) toolbaritem:is([overflowedItem="true"], [cui-areatype="panel"]) > .webextension-browser-action:-moz-lwtheme { + list-style-image: var(--webextension-menupanel-image-2x-dark, inherit); + } + + .webextension-menuitem { + list-style-image: var(--webextension-menuitem-image-2x, inherit) !important; + } +} + +toolbarbutton.webextension-menuitem > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +toolbarpaletteitem[removable="false"] { + opacity: 0.5; +} + +@media not (-moz-platform: macos) { + toolbarpaletteitem[place="palette"], + toolbarpaletteitem[place="panel"], + toolbarpaletteitem[place="toolbar"] { + -moz-user-focus: normal; + } +} + +#bookmarks-toolbar-placeholder, +#bookmarks-toolbar-button, +toolbarpaletteitem > #personal-bookmarks > #PlacesToolbar, +#personal-bookmarks:is([overflowedItem=true], [cui-areatype="panel"]) > #PlacesToolbar { + display: none; +} + +toolbarpaletteitem[place="toolbar"] > #personal-bookmarks > #bookmarks-toolbar-placeholder, +toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-button, +#personal-bookmarks:is([overflowedItem=true], [cui-areatype="panel"]) > #bookmarks-toolbar-button { + display: flex; +} + +#personal-bookmarks { + position: relative; +} + +#PlacesToolbarDropIndicatorHolder { + display: block; + position: absolute; +} + +#allTabsMenu-dropIndicatorHolder { + display: block; + position: relative; +} + +#allTabsMenu-dropIndicator { + background: url(chrome://browser/skin/tabbrowser/tab-drag-indicator.svg) no-repeat center; + display: block; + position: absolute; + transform: rotate(-90deg); + width: 12px; + height: 29px; + inset-inline-start: 8px; + top: 0; + pointer-events: none; +} + +#allTabsMenu-dropIndicator:-moz-locale-dir(rtl) { + transform: rotate(90deg); +} + +#nav-bar-customization-target > #personal-bookmarks, +toolbar:not(#TabsToolbar) > #wrapper-personal-bookmarks, +toolbar:not(#TabsToolbar) > #personal-bookmarks { + flex: 1 auto; +} + +#reload-button:not([displaystop]) + #stop-button, +#reload-button[displaystop] { + display: none; +} + +/* The reload-button is only disabled temporarily when it becomes visible + to prevent users from accidentally clicking it. We don't however need + to show this disabled state, as the flicker that it generates is short + enough to be visible but not long enough to explain anything to users. */ +#reload-button[disabled]:not(:-moz-window-inactive) > .toolbarbutton-icon { + opacity: 1 !important; +} + +/* Ensure stop-button and reload-button are displayed correctly when in the overflow menu */ +.widget-overflow-list > #stop-reload-button > .toolbarbutton-1 { + flex: 1; +} + +@media (-moz-platform: macos) { + :root[inFullscreen="true"] { + padding-top: 0; /* override drawintitlebar="true" */ + } +} + +/* Hide menu elements intended for keyboard access support */ +#main-menubar[openedwithkey=false] .show-only-for-keyboard { + display: none; +} + +/* ::::: location bar & search bar ::::: */ + +#urlbar, +#searchbar { + /* Setting a min-width to let the location & search bars maintain a constant + * width in case they haven't been resized manually. (bug 965772) */ + min-width: 1px; +} + +/* Align URLs to the right in RTL mode. */ +#urlbar-input:-moz-locale-dir(rtl) { + text-align: right !important; +} + +/* Make sure that the location bar's alignment changes according + to the input box direction if the user switches the text direction using + cmd_switchTextDirection (which applies a dir attribute to the <input>). */ +#urlbar-input[dir=ltr]:-moz-locale-dir(rtl) { + text-align: left !important; +} + +#urlbar-input[dir=rtl]:-moz-locale-dir(ltr) { + text-align: right !important; +} + +/* + * Display visual cue that browser is under remote control. + * This is to help users visually distinguish a user agent session that + * is under remote control from those used for normal browsing sessions. + * + * Attribute is controlled by browser.js:/gRemoteControl. + */ +:root[remotecontrol] #remote-control-box { + visibility: visible; + padding-inline: var(--urlbar-icon-padding); +} + +:root[remotecontrol] #remote-control-icon { + list-style-image: url(chrome://browser/content/static-robot.png); + width: 16px; + height: 16px; +} + +:root[remotecontrol] #urlbar-background { + background-image: repeating-linear-gradient( + -45deg, + rgba(255, 60, 60, 0.25) 0 25px, + rgba(175, 0, 0, 0.25) 25px 50px + ); + + background-attachment: fixed; + /* Override the usual breakout animation so the gradient doesn't shift around + when the panel opens. */ + animation: none !important; +} + +/* Show the url scheme in a static box when overflowing to the left */ +.urlbar-input-box { + position: relative; + direction: ltr; +} + +#urlbar-scheme { + position: absolute; + height: 100%; + visibility: hidden; + direction: ltr; + pointer-events: none; +} + +#urlbar-input { + mask-repeat: no-repeat; + unicode-bidi: plaintext; + text-align: match-parent; +} + +#urlbar:not([focused])[domaindir="ltr"]> #urlbar-input-container > .urlbar-input-box > #urlbar-input { + direction: ltr; + unicode-bidi: embed; +} + +/* The following rules apply overflow masks to the unfocused urlbar + This mask may be overriden when a Contextual Feature Recommendation is shown, + see browser/themes/shared/urlbar-searchbar.inc.css for details */ + +#urlbar:not([focused])[textoverflow="both"] > #urlbar-input-container > .urlbar-input-box > #urlbar-input { + mask-image: linear-gradient(to right, transparent, black 3ch, black calc(100% - 3ch), transparent); +} +#urlbar:not([focused])[textoverflow="right"] > #urlbar-input-container > .urlbar-input-box > #urlbar-input { + mask-image: linear-gradient(to left, transparent, black 3ch); +} +#urlbar:not([focused])[textoverflow="left"] > #urlbar-input-container > .urlbar-input-box > #urlbar-input { + mask-image: linear-gradient(to right, transparent, black 3ch); +} + +/* The protocol is visible if there is an RTL domain and we overflow to the left. + Uses the required-valid trick to check if it contains a value */ +#urlbar:not([focused])[textoverflow="left"][domaindir="rtl"] > #urlbar-input-container > .urlbar-input-box > #urlbar-scheme:valid { + visibility: visible; +} +#urlbar:not([focused])[textoverflow="left"][domaindir="rtl"] > #urlbar-input-container > .urlbar-input-box > #urlbar-input { + mask-image: linear-gradient(to right, transparent var(--urlbar-scheme-size), black calc(var(--urlbar-scheme-size) + 3ch)); +} + +/* Apply crisp rendering for favicons at exactly 2dppx resolution */ +@media (resolution: 2dppx) { + .searchbar-engine-image { + image-rendering: -moz-crisp-edges; + } +} + +#urlbar[actiontype="switchtab"][actionoverride] > #urlbar-input-container > #urlbar-label-box, +#urlbar:not([actiontype="switchtab"], [actiontype="extension"], [searchmode]) > #urlbar-input-container > #urlbar-label-box, +#urlbar:not([actiontype="switchtab"]) > #urlbar-input-container > #urlbar-label-box > #urlbar-label-switchtab, +#urlbar:not([actiontype="extension"]) > #urlbar-input-container > #urlbar-label-box > #urlbar-label-extension, +#urlbar[searchmode][breakout-extend] > #urlbar-input-container > #urlbar-label-box, +#urlbar:not([searchmode]) > #urlbar-input-container > #urlbar-label-box > #urlbar-label-search-mode, +#urlbar[breakout-extend] > #urlbar-input-container > #urlbar-label-box > #urlbar-label-search-mode { + display: none; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"] { + justify-content: center; + color: FieldText; + min-height: 2.6666em; + border-top: 1px solid rgba(38,38,38,.15); + background-color: hsla(0,0%,80%,.35); /* match arrowpanel-dimmed */; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"]:hover, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"][selected] { + background-color: hsla(0,0%,80%,.5); /* match arrowpanel-dimmed-further */ +} + +/* Define the minimum width based on the style of result rows. + The order of the min-width rules below must be in increasing order. */ +#PopupAutoComplete:is([resultstyles~="loginsFooter"], [resultstyles~="insecureWarning"])::part(content) { + min-width: 17em; +} + +#PopupAutoComplete:is([resultstyles~="importableLogins"], [resultstyles~="generatedPassword"])::part(content) { + min-width: 22em; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] { + height: auto; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon { + margin-inline-start: 0; + display: initial; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title > .ac-text-overflow-container > .ac-title-text { + text-overflow: initial; + white-space: initial; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title > label { + margin-inline-start: 0; +} + +#urlbar-input-container[pageproxystate=invalid] > #page-action-buttons > .urlbar-page-action, +#identity-box.chromeUI ~ #page-action-buttons > .urlbar-page-action:not(#star-button-box), +#urlbar[usertyping] > #urlbar-input-container > #page-action-buttons > #urlbar-zoom-button, +#urlbar:not([usertyping]) > #urlbar-input-container > #urlbar-go-button, +#urlbar:not([focused]) > #urlbar-input-container > #urlbar-go-button { + display: none; +} + +#nav-bar:not([keyNav=true]) #identity-box, +#nav-bar:not([keyNav=true]) #tracking-protection-icon-container { + -moz-user-focus: normal; +} + +/* We leave 310px plus whatever space the download and unified extensions + * buttons will need when they *both* appear. Normally, for each button, this + * should be 16px for the icon, plus 2 * 2px padding plus the + * toolbarbutton-inner-padding. We're adding 4px to ensure things like rounding + * on hidpi don't accidentally result in the buttons going into overflow. + */ +#urlbar-container { + width: calc(310px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding))); +} + +/* When the download button OR the unified extensions button is shown, we leave + * 310px plus the space needed for a single button as described above. */ +#nav-bar:is([downloadsbuttonshown], [unifiedextensionsbuttonshown]) #urlbar-container { + width: calc(310px + 24px + 2 * var(--toolbarbutton-inner-padding)); +} + +/* When both the download and unified extensions buttons are visible, we use + * the base min-width value. */ +#nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container { + width: 310px; +} + +/* Customize mode is difficult to use at moderate window width if the Urlbar + remains 310px wide. */ +:root[customizing] #urlbar-container { + width: 280px; +} + +#identity-icon-box { + max-width: calc(30px + 13em); +} + +@media (max-width: 770px) { + #urlbar-container { + width: calc(240px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding))); + } + #nav-bar:is([downloadsbuttonshown], [unifiedextensionsbuttonshown]) #urlbar-container { + width: calc(240px + 24px + 2 * var(--toolbarbutton-inner-padding)); + } + #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container { + width: 240px; + } + :root[customizing] #urlbar-container { + width: 245px; + } + #identity-icon-box { + max-width: 80px; + } + /* Contenxtual identity labels are user-customizable and can be very long, + so we only show the colored icon when the window gets small. */ + #userContext-label { + display: none; + } +} + +/* The page actions menu is hidden by default, it is only shown in small + windows as the overflow target of multiple page action buttons */ +#pageActionButton { + visibility: collapse; +} + +/* 680px is just below half of popular 1366px wide screens, so when putting two + browser windows next to each other on such a screen, they'll be above this + threshold. */ +@media (max-width: 680px) { + /* Page action buttons are duplicated in the page action menu so we can + safely hide them in small windows. */ + #pageActionSeparator, + #pageActionButton[multiple-children] ~ .urlbar-page-action { + display: none; + } + #pageActionButton[multiple-children] { + visibility: visible; + } +} +@media (max-width: 550px) { + #urlbar-container { + width: calc(176px + 2 * (24px + 2 * var(--toolbarbutton-inner-padding))); + } + #nav-bar[downloadsbuttonshown] #urlbar-container, + #nav-bar[unifiedextensionsbuttonshown] #urlbar-container { + width: calc(176px + 24px + 2 * var(--toolbarbutton-inner-padding)); + } + #nav-bar[downloadsbuttonshown][unifiedextensionsbuttonshown] #urlbar-container { + width: 176px; + } + #identity-icon-box { + max-width: 70px; + } + #urlbar-zoom-button { + display: none; + } +} + +/* Flexible spacer sizing (gets overridden in the navbar) */ +toolbarpaletteitem[place=toolbar][id^=wrapper-customizableui-special-spring], +toolbarspring { + flex: 1; + min-width: 28px; + max-width: 112px; +} + +#nav-bar toolbarpaletteitem[id^=wrapper-customizableui-special-spring], +#nav-bar toolbarspring { + flex: 80 80; + /* We shrink the flexible spacers, but not to nothing so they can be + * manipulated in customize mode; the next rule shrinks them further + * outside customize mode. */ + min-width: 10px; +} + +#nav-bar:not([customizing]) toolbarspring { + min-width: 1px; +} + +#widget-overflow-list > toolbarspring { + display: none; +} + +/* ::::: Unified Back-/Forward Button ::::: */ +.unified-nav-current { + font-weight: bold; +} + +.bookmark-item > label { + /* ensure we use the direction of the bookmarks label instead of the + * browser locale */ + unicode-bidi: plaintext; + /* Preserve whitespace in bookmark names */ + white-space: pre; +} + +/* Apply crisp rendering for favicons at exactly 2dppx resolution */ +@media (resolution: 2dppx) { + .menuitem-with-favicon > .menu-iconic-left > .menu-iconic-icon { + image-rendering: -moz-crisp-edges; + } + + .bookmark-item > .toolbarbutton-icon, + .bookmark-item > .menu-iconic-left > .menu-iconic-icon { + image-rendering: -moz-crisp-edges; + } +} + +menupopup[emptyplacesresult="true"] > .hide-if-empty-places-result { + display: none; +} + +/* Hide extension toolbars that neglected to set the proper class */ +:root[chromehidden~="location"][chromehidden~="toolbar"] toolbar:not(.chromeclass-menubar) { + display: none; +} + +#navigator-toolbox , +#mainPopupSet { + min-width: 1px; +} + +/* History Swipe Animation */ + +#historySwipeAnimationContainer { + overflow: hidden; + pointer-events: none; +} + +/* Full Screen UI */ + +#fullscr-toggler { + top: 0; + left: 0; + right: 0; + height: 1px; + position: fixed; + z-index: 2147483647; +} + +#fullscreen-and-pointerlock-wrapper { + position: fixed; + z-index: 2147483647 !important; + width: 100%; + height: 100%; + top: 0; + pointer-events: none; +} + +.pointerlockfswarning { + position: fixed; + visibility: visible; + transition: transform 300ms ease-in; + /* To center the warning box horizontally, + we use left: 50% with translateX(-50%). */ + top: 0; left: 50%; + transform: translate(-50%, -100%); + box-sizing: border-box; + width: max-content; + max-width: 95%; + pointer-events: none; +} +.pointerlockfswarning:not([hidden]) { + display: flex; + will-change: transform; +} +.pointerlockfswarning[onscreen] { + transform: translate(-50%, 50px); +} +.pointerlockfswarning[ontop] { + /* Use -10px to hide the border and border-radius on the top */ + transform: translate(-50%, -10px); +} +:root[macOSNativeFullscreen] .pointerlockfswarning[ontop] { + transform: translate(-50%, 80px); +} + +.pointerlockfswarning-domain-text, +.pointerlockfswarning-generic-text { + word-wrap: break-word; + /* We must specify a min-width, otherwise word-wrap:break-word doesn't work. Bug 630864. */ + min-width: 1px +} +.pointerlockfswarning-domain-text:not([hidden]) + .pointerlockfswarning-generic-text { + display: none; +} + +#fullscreen-exit-button { + pointer-events: auto; +} + +/* notification anchors should only be visible when their associated + notifications are */ +#nav-bar:not([keyNav=true]) .notification-anchor-icon { + -moz-user-focus: normal; +} + +#blocked-permissions-container > .blocked-permission-icon:not([showing]), +.notification-anchor-icon:not([showing]) { + display: none; +} + +#invalid-form-popup > description { + max-width: 280px; +} + +.popup-anchor { + /* should occupy space but not be visible */ + opacity: 0; + pointer-events: none; + position: absolute; +} + +browser[tabmodalPromptShowing], browser[tabDialogShowing] { + -moz-user-focus: none !important; +} + +/* Status panel */ + +#statuspanel:not([hidden]) { + max-width: calc(100% - 5px); + pointer-events: none; + + /* Take a bit more space vertically for the mouse tracker to hit us more + * easily */ + padding-top: 2em; + + position: absolute; + bottom: 0; + left: 0; +} + +#statuspanel:not([mirror]):-moz-locale-dir(rtl), +#statuspanel[mirror]:-moz-locale-dir(ltr) { + left: auto; + right: 0; +} + +#statuspanel[sizelimit] { + max-width: 50%; +} + +#statuspanel[type=status] { + min-width: min(23em, 33%); +} + +#statuspanel[type=overLink] { + transition: opacity 120ms ease-out, visibility 120ms; +} + +#statuspanel:is([type=overLink], [inactive][previoustype=overLink]) { + direction: ltr; +} + +#statuspanel[inactive] { + transition: none; + opacity: 0; + visibility: hidden; +} + +#statuspanel[inactive][previoustype=overLink] { + transition: opacity 200ms ease-out, visibility 200ms; +} + +/*** Visibility of downloads indicator controls ***/ + +/* Hide the default icon, show the anchor instead. */ +#downloads-button > .toolbarbutton-badge-stack > image.toolbarbutton-icon { + display: none; +} + +toolbarpaletteitem[place="palette"] > #downloads-button > .toolbarbutton-badge-stack > image.toolbarbutton-icon { + display: flex; +} + +toolbarpaletteitem[place="palette"] > #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-anchor { + display: none; +} + +@media (-moz-panel-animations) and (prefers-reduced-motion: no-preference) { +@media (-moz-platform: macos) { + /* 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. In fact, Gecko no longer triggers shadow shape recomputations + for repaints. + These properties are not implemented on other platforms. */ + #BMB_bookmarksPopup:not([animate="false"]) { + transition-property: -moz-window-transform, -moz-window-opacity; + transition-duration: 0.18s, 0.18s; + transition-timing-function: + var(--animation-easing-function), ease-out; + } + + /* Only do the fade-in animation on pre-Big Sur to avoid missing shadows on + * Big Sur, see bug 1672091. */ + @media (-moz-mac-big-sur-theme: 0) { + #BMB_bookmarksPopup:not([animate="false"]) { + -moz-window-opacity: 0; + -moz-window-transform: translateY(-70px); + } + + #BMB_bookmarksPopup[side="bottom"]:not([animate="false"]) { + -moz-window-transform: translateY(70px); + } + } + + /* [animate] is here only so that this rule has greater specificity than the + * rule right above */ + #BMB_bookmarksPopup[animate][animate="open"] { + -moz-window-opacity: 1.0; + transition-duration: 0.18s, 0.18s; + -moz-window-transform: none; + transition-timing-function: + var(--animation-easing-function), ease-in-out; + } + + #BMB_bookmarksPopup[animate][animate="cancel"] { + -moz-window-opacity: 0; + -moz-window-transform: none; + } +} +@media not (-moz-platform: macos) { + #BMB_bookmarksPopup:not([animate="false"]) { + opacity: 0; + transform: translateY(-70px); + transition-property: transform, opacity; + transition-duration: 0.18s, 0.18s; + transition-timing-function: + var(--animation-easing-function), ease-out; + will-change: transform, opacity; + } + + #BMB_bookmarksPopup[side="bottom"]:not([animate="false"]) { + transform: translateY(70px); + } + + /* [animate] is here only so that this rule has greater specificity than the + * rule right above */ + #BMB_bookmarksPopup[animate][animate="open"] { + opacity: 1.0; + transition-duration: 0.18s, 0.18s; + transform: none; + transition-timing-function: + var(--animation-easing-function), ease-in-out; + } + + #BMB_bookmarksPopup[animate][animate="cancel"] { + transform: none; + } +} +} + +/* Apply crisp rendering for favicons at exactly 2dppx resolution */ +@media (resolution: 2dppx) { + .PanelUI-remotetabs-clientcontainer > toolbarbutton > .toolbarbutton-icon, + #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon, + #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon, + #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon { + image-rendering: -moz-crisp-edges; + } +} + +#customization-container { + flex-direction: row; + flex-direction: column; + min-height: 0; +} + +#customization-container:not([hidden]) { + /* In a separate rule to avoid 'display:flex' causing the node to be + * displayed while the container is still hidden. */ + display: flex; +} + +#customization-content-container { + display: flex; + flex: 1; /* Grow so there isn't empty space below the footer */ + min-height: 0; /* Allow this to shrink so the footer doesn't get pushed out. */ +} + +#customization-panelHolder { + padding-top: 10px; + padding-bottom: 10px; +} + +#customization-panelHolder > #widget-overflow-fixed-list { + flex: 1; /* Grow within the available space, and allow ourselves to shrink */ + display: flex; + flex-direction: column; + overflow-y: auto; + overflow-x: hidden; +} + +#customization-panelWrapper, +#customization-panelWrapper > .panel-arrowcontent, +#customization-panelHolder { + flex-direction: column; + display: flex; + flex-shrink: 1; + min-height: calc(174px + 9em); +} + +#customization-panelWrapper { + flex: 1; + align-items: end; /* align to the end on the cross-axis (affects arrow) */ +} + +#customization-panel-container { + overflow-y: auto; + display: flex; + flex-direction: column; + flex: none; +} + +toolbarpaletteitem[dragover] { + border-inline-color: transparent; +} + +#customization-palette-container { + display: flex; + flex-direction: column; + flex: 1; +} + +#customization-palette:not([hidden]) { + display: block; + flex: 1 1 auto; + overflow: auto; + min-height: 3em; +} + +#customization-footer-spacer, +#customization-spacer { + flex: 1 1 auto; +} + +#customization-footer { + display: flex; + align-items: center; + flex-shrink: 0; + flex-wrap: wrap; +} + +#customization-toolbar-visibility-button > .box-inherit > .button-menu-dropmarker { + display: flex; +} + +#customization-lwtheme-button > .box-inherit > .button-menu-dropmarker, +#customization-uidensity-button > .box-inherit > .button-menu-dropmarker { + display: flex; +} + +toolbarpaletteitem[place="palette"] { + flex-direction: column; + width: 7em; + max-width: 7em; + /* icon (16) + margin (9 + 12) + 3 lines of text: */ + height: calc(39px + 3em); + margin-bottom: 5px; + margin-inline-end: 24px; + overflow: visible; + display: inline-flex; + vertical-align: top; +} + +toolbarpaletteitem[place="palette"][hidden] { + display: none; +} + +toolbarpaletteitem > toolbarbutton, +toolbarpaletteitem > toolbaritem { + /* Prevent children from getting events */ + pointer-events: none; + justify-content: center; +} + +toolbarpaletteitem:not([place="palette"]) > #stop-reload-button { + justify-content: inherit; +} + +:root[customizing=true] .addon-banner-item, +:root[customizing=true] .panel-banner-item { + display: none; +} + +/* Firefox View */ +:root[firefoxviewhidden] #wrapper-firefox-view-button, +:root[firefoxviewhidden] #firefox-view-button { + display: none; +} + +/* UI Tour */ + +@keyframes uitour-wobble { + from { + transform: rotate(0deg) translateX(3px) rotate(0deg); + } + 50% { + transform: rotate(360deg) translateX(3px) rotate(-360deg); + } + to { + transform: rotate(720deg) translateX(0px) rotate(-720deg); + } +} + +@keyframes uitour-zoom { + from { + transform: scale(0.8); + } + 50% { + transform: scale(1.0); + } + to { + transform: scale(0.8); + } +} + +@keyframes uitour-color { + from { + border-color: #5B9CD9; + } + 50% { + border-color: #FF0000; + } + to { + border-color: #5B9CD9; + } +} + +#UITourHighlightContainer, +#UITourHighlight { + pointer-events: none; +} + +#UITourHighlight[active] { + animation-delay: 2s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +#UITourHighlight[active="wobble"] { + animation-name: uitour-wobble; + animation-delay: 0s; + animation-duration: 1.5s; + animation-iteration-count: 1; +} +#UITourHighlight[active="zoom"] { + animation-name: uitour-zoom; + animation-duration: 1s; +} +#UITourHighlight[active="color"] { + animation-name: uitour-color; + animation-duration: 2s; +} + +/* Combined context-menu items */ +#context-navigation > .menuitem-iconic > .menu-iconic-text, +#context-navigation > .menuitem-iconic > .menu-accel-container { + display: none; +} + +.popup-notification-invalid-input { + box-shadow: 0 0 1.5px 1px red; +} + +.popup-notification-invalid-input[focused] { + box-shadow: 0 0 2px 2px rgba(255,0,0,0.4); +} + +.popup-notification-description[popupid=webauthn-prompt-register-direct] { + white-space: pre-line; +} + +.dragfeedback-tab { + appearance: none; + opacity: 0.65; + -moz-window-shadow: none; +} + +/* Page action buttons */ +.pageAction-panel-button > .toolbarbutton-icon { + list-style-image: var(--pageAction-image-16px, inherit); +} +.urlbar-page-action { + list-style-image: var(--pageAction-image-16px, inherit); +} +@media (min-resolution: 1.1dppx) { + .pageAction-panel-button > .toolbarbutton-icon { + list-style-image: var(--pageAction-image-32px, inherit); + } + .urlbar-page-action { + list-style-image: var(--pageAction-image-32px, inherit); + } +} + +/* Print pending */ +.printSettingsBrowser { + width: 250px !important; +} + +.previewStack { + background-color: #f9f9fa; + color: #0c0c0d; +} + +.previewRendering { + background-repeat: no-repeat; + background-size: 60px 60px; + background-position: center center; + display: flex; + align-items: center; + justify-content: center; + visibility: hidden; +} + +.printPreviewBrowser { + visibility: collapse; + opacity: 1; +} + +.previewStack[rendering=true] > .previewRendering, +.previewStack[previewtype="source"] > .printPreviewBrowser[previewtype="source"], +.previewStack[previewtype="selection"] > .printPreviewBrowser[previewtype="selection"], +.previewStack[previewtype="simplified"] > .printPreviewBrowser[previewtype="simplified"] { + visibility: inherit; +} + +.previewStack[rendering=true] > .printPreviewBrowser { + opacity: 0; +} + +.print-pending-label { + margin-top: 110px; + font-size: large; +} + +printpreview-pagination { + opacity: 0; +} +printpreview-pagination:focus-within, +.previewStack:hover printpreview-pagination { + opacity: 1; +} +.previewStack[rendering=true] printpreview-pagination { + opacity: 0; +} + +@media (prefers-color-scheme: dark) { + .previewStack { + background-color: #2A2A2E; + color: rgb(249, 249, 250); + } +} + +@media (prefers-reduced-motion: no-preference) { + .previewRendering { + background-image: url("chrome://browser/skin/tabbrowser/pendingpaint.png"); + } + + .printPreviewBrowser { + transition: opacity 60ms; + } + + .previewStack[rendering=true] > .printPreviewBrowser { + transition: opacity 1ms 250ms; + } + + printpreview-pagination { + transition: opacity 100ms 500ms; + } + + printpreview-pagination:focus-within, + .previewStack:hover printpreview-pagination { + transition: opacity 100ms; + } +} + +#sidebar-box { + min-width: 14em; + max-width: 36em; + width: 18em; +} + +/* WebExtension Sidebars */ +#sidebar-box[sidebarcommand$="-sidebar-action"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { + list-style-image: var(--webextension-menuitem-image, inherit); + -moz-context-properties: fill; + fill: currentColor; + width: 16px; + height: 16px; +} + +@media (min-resolution: 1.1dppx) { + #sidebar-box[sidebarcommand$="-sidebar-action"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { + list-style-image: var(--webextension-menuitem-image-2x, inherit); + } +} + +toolbar[keyNav=true]:not([collapsed=true], [customizing=true]) toolbartabstop { + -moz-user-focus: normal; +} + +/** + * Dialogs + */ + +.dialogStack { + z-index: var(--browser-stack-z-index-dialog-stack); + position: absolute; + inset: 0; +} + +.dialogStack.temporarilyHidden { + /* For some printing use cases we need to visually hide the dialog before + * actually closing it / make it disappear from the frame tree. */ + visibility: hidden; +} + +.dialogOverlay { + align-items: center; + visibility: hidden; +} + +.dialogOverlay[topmost="true"] { + z-index: 1; +} + +.dialogBox { + background-clip: content-box; + display: flex; + margin: 0 3vw; + padding: 0; + overflow-x: auto; +} + +.dialogBox:not(.spotlightBox) { + box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2); + border-radius: 8px; +} + +/* + * In High Contrast Mode, this prevents a dialog from visually bleeding into + * the window behind it, which looks jarring. + */ +@media (prefers-contrast) { +.dialogBox { + outline: 1px solid WindowText; +} +} + +.dialogBox[resizable="true"] { + resize: both; + overflow: hidden; + min-height: 20em; +} + +.dialogBox[sizeto="available"] { + --box-top-px: 0px; /* Overridden using inline style */ + --box-inline-margin: 4px; + --box-block-margin: 4px; + --box-ideal-width: 1000; + --box-ideal-height: 650; + --box-max-width-margin: calc(100vw - 2 * var(--box-inline-margin)); + --box-max-height-margin: calc(100vh - var(--box-top-px) - var(--box-block-margin)); + --box-max-width-ratio: 70vw; + --box-max-height-ratio: calc(var(--box-ideal-height) / var(--box-ideal-width) * var(--box-max-width-ratio)); + --box-max-height-requested: 100vh; + --box-max-width-requested: 100vw; + --box-max-height-remaining: calc(100vh - var(--box-top-px)); + width: 100vw; + height: 100vh; + margin: 0; +} + +.dialogBox:not(.spotlightBox)[sizeto="available"] { + max-width: min(max(var(--box-ideal-width) * 1px, var(--box-max-width-ratio)), var(--box-max-width-margin), var(--box-max-width-requested)); + max-height: min(max(var(--box-ideal-height) * 1px, var(--box-max-height-ratio)), var(--box-max-height-margin), var(--box-max-height-requested), var(--box-max-height-remaining)); +} + +@media (min-width: 550px) { + .dialogBox[sizeto="available"] { + --box-inline-margin: min(calc(4px + (100vw - 550px) / 4), 16px); + } +} + +@media (min-width: 800px) { + .dialogBox[sizeto="available"] { + --box-inline-margin: min(calc(16px + (100vw - 800px) / 4), 32px); + } +} + +@media (min-height: 350px) { + .dialogBox[sizeto="available"] { + --box-block-margin: min(calc(4px + (100vh - 350px) / 4), 16px); + } +} + +@media (min-height: 550px) { + .dialogBox[sizeto="available"] { + --box-block-margin: min(calc(16px + (100vh - 550px) / 4), 32px); + } +} + +.dialogStack .dialogBox.spotlightBox[sizeto="available"] { + /* Tab modal: subtract the navigator toolbox height from the dialog height. */ + height: calc(100vh - var(--box-top-px)); +} + +.content-prompt-dialog > .dialogOverlay { + display: grid; + align-items: unset; + place-content: center; + /* 90% for 5% top/bottom margins, the document height so that + * smaller dialogs don't become too big. */ + grid-auto-rows: min(90%, var(--doc-height-px)); +} + +:not(.content-prompt-dialog) > .dialogOverlay > .dialogBox:not(.spotlightBox) { + /* Make dialogs overlap with upper chrome UI. Not necessary for Spotlight + dialogs that are intended to be centered above the window or content area. */ + margin-top: -5px; +} + +/* For window-modal dialogs, we allow overlapping the urlbar if the window is + * small enough. */ +#window-modal-dialog > .dialogOverlay > .dialogBox:not(.spotlightBox) { + /* Do not go below 3px (as otherwise the top of the dialog would be + * adjacent to or clipped by the top of the window), or above the window + * size. */ + margin-top: clamp( + 3px, + var(--chrome-offset, 20px) - 5px, + calc(100vh - var(--subdialog-inner-height) - 5px) + ); +} + +#window-modal-dialog { + overflow: visible; + padding: 0; + /* Override default <html:dialog> styles */ + border-width: 0; + background-color: transparent; + /* This makes the dialog top-aligned by default (the dialog box will move via + * margin-top above) */ + bottom: auto; +} + +#window-modal-dialog.spotlight { + /* Spotlight window modal dialogs should be equal in size to the window. */ + bottom: revert; + max-height: 100%; + max-width: 100%; +} + +.dialogFrame { + margin: 0; + flex: 1; + /* Default dialog dimensions */ + width: 34em; +} + +.dialogOverlay[topmost="true"], +#window-modal-dialog::backdrop { + background-color: rgba(28, 27, 34, 0.45); +} + +.dialogOverlay[hideContent="true"][topmost="true"] { + background-color: var(--tabpanel-background-color); +} + +/* For the window-modal dialog, the background is supplied by the HTML dialog + * backdrop, so the dialogOverlay background above "double backgrounds" - so + * we remove it here: */ +#window-modal-dialog > .dialogOverlay[topmost="true"] { + background-color: transparent; +} + +/* Hide tab-modal dialogs when a window-modal one is up. */ +:root[window-modal-open] .browserStack > .dialogStack { + visibility: hidden; +} + +/** + * End Dialogs + */ |