diff options
Diffstat (limited to 'browser/themes/shared/browser-shared.css')
| -rw-r--r-- | browser/themes/shared/browser-shared.css | 1212 |
1 files changed, 1212 insertions, 0 deletions
diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css new file mode 100644 index 0000000000..164b54bd85 --- /dev/null +++ b/browser/themes/shared/browser-shared.css @@ -0,0 +1,1212 @@ +/* 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/. */ + +@import url("chrome://browser/skin/downloads/indicator.css"); +@import url("chrome://browser/skin/addons/extension-controlled.css"); +@import url("chrome://browser/skin/addons/unified-extensions.css"); +@import url("chrome://browser/skin/toolbarbuttons.css"); +@import url("chrome://browser/skin/toolbarbutton-icons.css"); +@import url("chrome://browser/skin/menupanel.css"); +@import url("chrome://browser/skin/urlbar-searchbar.css"); +@import url("chrome://browser/skin/identity-block/identity-block.css"); +@import url("chrome://browser/skin/notification-icons.css"); +@import url("chrome://browser/skin/addon-notification.css"); +@import url("chrome://browser/skin/identity-credential-notification.css"); +@import url("chrome://browser/skin/urlbarView.css"); +@import url("chrome://browser/skin/autocomplete.css"); +@import url("chrome://browser/skin/places/editBookmarkPanel.css"); +@import url("chrome://browser/skin/sidebar.css"); +@import url("chrome://browser/skin/tabs.css"); +@import url("chrome://browser/skin/fullscreen/warning.css"); +@import url("chrome://browser/skin/ctrlTab.css"); +@import url("chrome://browser/skin/customizableui/customizeMode.css"); +@import url("chrome://browser/skin/UITour.css"); +@import url("chrome://browser/skin/formautofill-notification.css"); + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + user-select: none; + color-scheme: light dark; + accent-color: var(--button-primary-bgcolor); + + --toolbox-non-lwt-bgcolor: -moz-headerbar; + --toolbox-non-lwt-textcolor: -moz-headerbartext; + --toolbox-non-lwt-bgcolor-inactive: -moz-headerbarinactive; + --toolbox-non-lwt-textcolor-inactive: -moz-headerbarinactivetext; + + --toolbarbutton-border-radius: 4px; + + --chrome-content-separator-color: ThreeDShadow; + + --tabs-navbar-shadow-size: 1px; + --tabs-navbar-shadow-color: ThreeDShadow; + + --panelui-subview-transition-duration: 150ms; + + --short-notification-background: #0250BB; + --short-notification-gradient: #9059FF; + + --button-bgcolor: color-mix(in srgb, currentColor 13%, transparent); + --button-hover-bgcolor: color-mix(in srgb, currentColor 17%, transparent); + --button-active-bgcolor: color-mix(in srgb, currentColor 30%, transparent); + --button-color: currentColor; + --button-primary-bgcolor: AccentColor; + --button-primary-hover-bgcolor: color-mix(in srgb, black 10%, AccentColor); + --button-primary-active-bgcolor: color-mix(in srgb, black 20%, AccentColor); + --button-primary-color: AccentColorText; + + --buttons-destructive-bgcolor: #e22850; + --buttons-destructive-hover-bgcolor: #c50042; + --buttons-destructive-active-bgcolor: #810220; + --buttons-destructive-color: #fbfbfe; + + --identity-box-margin-inline: 4px; + --urlbar-box-bgcolor: var(--button-bgcolor); + --urlbar-box-focus-bgcolor: var(--button-bgcolor); + --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor); + --urlbar-box-active-bgcolor: var(--button-active-bgcolor); + --urlbar-box-text-color: inherit; + --urlbar-box-hover-text-color: var(--urlbar-box-text-color); + --urlbar-min-height: max(32px, 1.4em); + --urlbar-icon-fill-opacity: 0.9; + --urlbar-icon-padding: calc((var(--urlbar-min-height) - 2px /* border */ - 2px /* padding */ - 16px /* icon */) / 2); + /* This should be used for icons and chiclets inside the input field. It makes + the gap around them more uniform when they are close to the field edges */ + --urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) - 1px); + + --pocket-icon-fill: #ef4056; + + --lwt-additional-images: none; + --lwt-background-alignment: right top; + --lwt-background-tiling: no-repeat; + + --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67); + --inactive-window-transition: 0.2s ease; + --inactive-titlebar-opacity: .6; + /** + * On macOS and Linux, fading the whole titlebar is the native behavior. + * + * On Windows there's no particular standard, but the default .6 opacity + * feels like too much, specially because Windows "fades" the titlebar of + * unresponsive applications. Fade substantially less the titlebar on windows + * to account for this platform difference. + */ + @media (-moz-platform: windows) { + --inactive-titlebar-opacity: .75; + } + + &:where([tabsintitlebar]) { + --toolbox-non-lwt-bgcolor: ActiveCaption; + --toolbox-non-lwt-textcolor: CaptionText; + --toolbox-non-lwt-bgcolor-inactive: InactiveCaption; + --toolbox-non-lwt-textcolor-inactive: InactiveCaptionText; + } + + &:-moz-lwtheme { + color: var(--lwt-text-color); + + --link-color: light-dark(rgb(0, 97, 224), rgb(0, 221, 255)); + --chrome-content-separator-color: rgba(0,0,0,.3); + --tabs-navbar-shadow-color: light-dark(rgba(0,0,0,.1), rgba(0,0,0,.3)); + + @media not (prefers-contrast) { + --focus-outline-color: light-dark(#0061E0, #00DDFF); + } + } + + @media (prefers-contrast) { + --urlbar-icon-fill-opacity: 1; + } + + &[uidensity=compact] { + --urlbar-min-height: max(26px, 1.4em); + } + + &[uidensity=touch] { + --urlbar-min-height: max(34px, 1.4em); + } + + @media (prefers-color-scheme: dark) { + /* Increase the contrast of urlbar boxes in dark mode. + In practice these are bumped-up --button(-hover)-bgcolor rules */ + --urlbar-box-bgcolor: color-mix(in srgb, currentColor 16%, transparent); + --urlbar-box-focus-bgcolor: color-mix(in srgb, currentColor 16%, transparent); + --urlbar-box-hover-bgcolor: color-mix(in srgb, currentColor 22%, transparent); + } + + @media (prefers-reduced-motion) { + --inactive-window-transition: 0s; + } + + @media (min-resolution: 1.5dppx) { + --tabs-navbar-shadow-size: 0.5px; + } + + @media (min-resolution: 3dppx) { + --tabs-navbar-shadow-size: 0.33px; + } +} + +#navigator-toolbox { + appearance: none; + + /* Toolbar / content area border */ + border-bottom: 1px solid var(--chrome-content-separator-color); + + background-color: var(--toolbox-non-lwt-bgcolor); + color: var(--toolbox-non-lwt-textcolor); + + will-change: background-color; + transition: background-color var(--inactive-window-transition); + + &:-moz-window-inactive { + background-color: var(--toolbox-non-lwt-bgcolor-inactive); + color: var(--toolbox-non-lwt-textcolor-inactive); + } + + :root[customizing] & { + border-bottom-style: none; + } + + &:-moz-lwtheme { + background-image: var(--lwt-additional-images); + background-repeat: var(--lwt-background-tiling); + background-position: var(--lwt-background-alignment); + background-color: var(--lwt-accent-color); + color: inherit; + + &:-moz-window-inactive { + background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); + } + } + + /* When a theme defines both theme_frame and additional_backgrounds, show + the latter atop the former. */ + :root[lwtheme-image] & { + 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); + } +} + +.browser-toolbar { + appearance: none; + /* Reset linux padding */ + padding: 0; + + &:not(.titlebar-color) { + background-color: var(--toolbar-bgcolor); + color: var(--toolbar-color); + border-style: none; + } +} + +:root[tabsintitlebar] #titlebar { + will-change: opacity; + transition: opacity var(--inactive-window-transition); + + &:-moz-window-inactive { + opacity: var(--inactive-titlebar-opacity); + } +} + +/* Add space to beginning of toolbar and make that space click the first <toolbarbutton> */ +#nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child, +#nav-bar-customization-target > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) { + padding-inline-start: var(--toolbar-start-end-padding); +} + +:root[sessionrestored] #nav-bar:-moz-lwtheme { + transition: var(--ext-theme-background-transition); +} + +#nav-bar:not([tabs-hidden="true"]) { + /* The toolbar buttons that animate are only visible when the #TabsToolbar is not collapsed. + The animations use position:absolute and require a positioned #nav-bar. */ + position: relative; + box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--tabs-navbar-shadow-color); +} + +/* Bookmarks toolbar */ + +#PersonalToolbar { + /* Make the toolbar not take any vertical space when it's empty, before + bookmarks load. Otherwise, showing the toolbar might resize the content + area twice. */ + min-height: 0; + padding-inline: 6px; + + :root[uidensity=compact] & { + padding-inline: 2px; + } + + /* Vertical sliding animation */ + + overflow: clip; + max-height: 4em; + + :root[sessionrestored] &:not(.instant) { + transition: min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition); + + &[collapsed=true] { + transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear; + } + } + + &[collapsed=true] { + max-height: 0; + + &.instant { + visibility: collapse; + } + } + + /* Bookmarks toolbar empty message */ + + &[collapsed=false]:not([initialized]) > #personal-toolbar-empty { + visibility: hidden; + } + + /* + * Make the empty bookmarks toolbar message take up no horizontal space. + * This avoids two issues: + * 1) drag/drop of urls/bookmarks to the toolbar not working, because they + * land on the personal-toolbar-empty element. + * 2) buttons in the toolbar moving horizontally while the window opens, + * because the element is first shown at full width and then completely + * hidden. + * TODO(emilio): The comment above was never quite true (the message did take + * horizontal space, see bug 1812636). Figure out how much of this rule is + * really needed. + */ + &[collapsed=false] > #personal-toolbar-empty[nowidth] > #personal-toolbar-empty-description { + margin-inline: 0; + min-width: 0; + white-space: nowrap; + position: relative; + z-index: 1; + } + + /* Bookmarks toolbar in customize mode */ + + &[customizing] { + outline: 1px dashed; + outline-offset: -3px; + /* Avoid the toolbar having no height when there's no items in it */ + min-height: 22px; + } +} + +/* Bookmarks toolbar only-on-new-tab mode */ + +:root { + --bookmarks-toolbar-overlapping-browser-height: max(28px, 2em); +} + +:root[BookmarksToolbarOverlapsBrowser] { + #PersonalToolbar { + height: var(--bookmarks-toolbar-overlapping-browser-height); + } + + #navigator-toolbox { + /* Overlap the content area by the height of the bookmarks toolbar so that + temporarily showing the toolbar for new tabs doesn't resize the content + area for all tabs. */ + margin-bottom: calc(-1 * var(--bookmarks-toolbar-overlapping-browser-height)); + z-index: 1; + } + + .newTabBrowserPanel, + #sidebar-box { + /* Make room for the bookmarks toolbar so that it won't visibly overlap the + new tab page and sidebar contents. We do not put this padding on #browser + as that would resize the content area for all tabs including background + tabs, which is what we explicitly want to avoid doing here. */ + padding-top: var(--bookmarks-toolbar-overlapping-browser-height); + } +} + +/* Bookmarks toolbar drop indicator */ + +#PlacesToolbarDropIndicator { + list-style-image: url(chrome://browser/skin/toolbar-drag-indicator.svg); + pointer-events: none; +} + +/* Menupopup drop indicators */ + +menupopup::part(drop-indicator-container) { + /* TODO(emilio): When menupopups get ported to modern flex layout we can + * probably simplify this substantially, by making the indicator position: + * absolute or so (which was never properly supported in XUL). The container + * should become completely unnecessary then. */ + min-width: 0; + min-height: 0; + max-width: 100%; + max-height: 100%; +} + +menupopup::part(drop-indicator-bar) { + position: relative; + /* these two margins must together compensate the indicator's height */ + margin-block: -1px; +} + +menupopup::part(drop-indicator) { + list-style-image: none; + height: 2px; + margin-inline-end: -4em; + background-color: SelectedItem; + pointer-events: none; +} + +/* Back / Forward context menu */ + +.unified-nav-back, +.unified-nav-forward { + -moz-context-properties: fill; + fill: currentColor; +} + +.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr), +.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) { + list-style-image: url("chrome://browser/skin/back.svg") !important; +} + +.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr), +.unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) { + list-style-image: url("chrome://browser/skin/forward.svg") !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; + } + + &:not([mirror]):-moz-locale-dir(rtl), + &[mirror]:-moz-locale-dir(ltr) { + left: auto; + right: 0; + } + + &[sizelimit] { + max-width: 50%; + } + + &[type=status] { + min-width: min(23em, 33%); + } + + &[type=overLink] { + transition: opacity 120ms ease-out, visibility 120ms; + } + + &:is([type=overLink], [inactive][previoustype=overLink]) { + direction: ltr; + } + + &[inactive], + :root[inDOMFullscreen] &:not([type=overLink]) { + transition: none; + opacity: 0; + visibility: hidden; + + &[previoustype=overLink] { + transition: opacity 200ms ease-out, visibility 200ms; + } + } + + /* stylelint-disable-next-line media-query-no-invalid */ + @media (-moz-bool-pref: "browser.tabs.hideStatusPanel") { + visibility: hidden; + } +} + +#statuspanel-label { + color-scheme: env(-moz-content-preferred-color-scheme); + margin: 0; + padding: 2px 4px; + background-color: -moz-dialog; + border: 1px none ThreeDShadow; + border-top-style: solid; + color: -moz-dialogText; + text-shadow: none; + + @media (not (prefers-contrast)) and (not (-moz-platform: linux)) { + background-color: light-dark(#f9f9fa, hsl(240,1%,20%)); + border-color: light-dark(#ddd, hsl(240,1%,40%)); + color: light-dark(#444, rgb(249,249,250)); + } + + #statuspanel:not([mirror]) > &:-moz-locale-dir(ltr), + #statuspanel[mirror] > &:-moz-locale-dir(rtl) { + border-right-style: solid; + /* disabled on Windows for triggering grayscale AA (bug 659213): */ + @media not (-moz-platform: windows) { + border-top-right-radius: .3em; + } + margin-right: 1em; + } + + #statuspanel:not([mirror]) > &:-moz-locale-dir(rtl), + #statuspanel[mirror] > &:-moz-locale-dir(ltr) { + border-left-style: solid; + /* disabled on Windows for triggering grayscale AA (bug 659213): */ + @media not (-moz-platform: windows) { + border-top-left-radius: .3em; + } + margin-left: 1em; + } +} + +/* Find bar */ + +.browserContainer > findbar { + background-color: var(--toolbar-bgcolor); + color: var(--toolbar-color); + color-scheme: var(--toolbar-color-scheme); + border-top-color: var(--chrome-content-separator-color, ThreeDShadow); + + &:-moz-lwtheme { + background-color: var(--lwt-accent-color); + background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images); + background-repeat: no-repeat, var(--lwt-background-tiling); + background-position: right bottom, var(--lwt-background-alignment); + background-position-y: bottom !important; + + :root:not([lwtheme-image]) &:-moz-window-inactive { + background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)); + } + + :root[lwtheme-image] & { + background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image), var(--lwt-additional-images); + background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling); + background-position: center, right bottom, var(--lwt-background-alignment); + } + } +} + +/* Private browsing indicator */ + +#private-browsing-indicator-with-label { + align-items: center; + margin-inline: 7px; + + :root:not([privatebrowsingmode=temporary]) & { + display: none; + } +} + +.private-browsing-indicator-icon { + list-style-image: url("chrome://global/skin/icons/indicator-private-browsing.svg"); + width: 16px; + height: 16px; +} + +/* End private browsing indicator */ + +/* Override theme colors since the picker uses extra colors that + themes cannot set */ +#DateTimePickerPanel { + color-scheme: env(-moz-content-preferred-color-scheme); + --arrowpanel-background: Field; + --arrowpanel-color: FieldText; +} + +#widget-overflow .webextension-popup-browser { + background: #fff; + + /* height set via JS can be lower than the stack min-height, + ensure the browser takes up at least that min-height */ + min-height: 100%; +} + +#addon-progress-notification-progressmeter { + margin: 2px 4px; +} + +/* Contextual Feature Recommendation popup-notification */ + +#cfr-notification-header { + width: 100%; + display: block; + text-align: center; + box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2); +} + +#cfr-notification-header-stack { + width: 100%; +} + +#cfr-notification-header-label { + margin: 9px; + font-weight: 600; +} + +#cfr-notification-header-link { + margin: 7px; + color: inherit; + cursor: default; + justify-self: end; +} + +#cfr-notification-header-image { + width: 19px; + height: 19px; + padding: 2px; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.6; + list-style-image: url(chrome://global/skin/icons/help.svg); + + &:hover { + background-color: hsla(0,0%,70%,.2); + border-radius: 2px; + } +} + +#contextual-feature-recommendation-notification { + width: 400px; + + .popup-notification-icon { + margin-inline-end: 4px; + } + + .cfr-doorhanger-large-icon { + width: 64px; + height: 64px; + margin-inline-end: 12px; + } + + .cfr-doorhanger-medium-icon { + width: 50px; + height: 50px; + margin-inline-end: 12px; + } + + .popup-notification-body-container { + width: 100%; + padding-bottom: 2px; + } + + popupnotificationcontent { + margin-top: 0; + } + + description { + margin-bottom: 0; + } + + &[data-notification-bucket="CFR_MILESTONE_MESSAGE"] { + &:not([hidden]) { + display: flex; + flex-direction: row; + align-items: center; + background: radial-gradient(circle farthest-side at top right, var(--short-notification-gradient), var(--short-notification-background)); + width: unset; + max-width: 700px; + overflow-wrap: break-word; + padding: 4px; + } + + &:-moz-locale-dir(rtl) { + background: radial-gradient(circle farthest-side at top left, var(--short-notification-gradient), var(--short-notification-background)); + } + + .popup-notification-body-container, + .popup-notification-footer-container, + #cfr-notification-header-link { + display: none; + } + + #cfr-notification-header { + box-shadow: none; + } + + description { + font-weight: 400; + margin: unset; + margin-inline: 12px; + } + + .panel-footer, + .popup-notification-header-container { + display: inline-flex; + } + + .panel-footer { + float: inline-end; + background-color: transparent; + flex-direction: row-reverse; + /* Override proton-doorhanger default styles that increase the size of the button */ + margin: 0; + } + + .popup-notification-primary-button { + background-color: rgba(216, 216, 216, 0.2); + color: white; + border: none; + border-radius: 2px; + margin: 4px; + padding: 3px 12px; + flex: 1; + min-height: 22px; + + &::after { + content: url(chrome://global/skin/icons/arrow-left-12.svg); + -moz-context-properties: fill; + fill: currentColor; + transform: translateY(2px); + float: inline-end; + } + + &:-moz-locale-dir(ltr)::after { + content: url(chrome://global/skin/icons/arrow-right-12.svg); + } + + &:hover { + background-color: rgba(216, 216, 216, 0.4); + } + + &:hover:active { + background-color: rgba(216, 216, 216, 0.5); + } + } + + .popup-notification-secondary-button { + margin: 3px; + border: none; + border-radius: 2px; + background-image: url(chrome://global/skin/icons/close.svg); + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + background-size: 10px; + -moz-context-properties: fill; + fill: white; + min-height: 22px; + width: 22px; + padding: 0; + align-self: center; + flex: none; + font-size: 0; + + &:hover { + background-color: rgba(216, 216, 216, 0.4); + } + } + + .popup-notification-header-container { + color: white; + max-width: unset; + } + } + + &[data-notification-bucket="CFR_SOCIAL_TRACKING_PROTECTION"] { + width: 386px; + } + + &[data-notification-category="addon_recommendation"] { + .popup-notification-description > b { + padding-inline-start: 5px; + } + + #cfr-notification-footer-learn-more-link { + margin-inline-start: 5px; + } + + #cfr-notification-feature-steps, + #cfr-notification-header-image { + display: none; + } + + #cfr-notification-header-label { + margin-block-end: 9px; + } + } + + &[data-notification-category="icon_and_message"] { + /* + * `icon_and_message` CFR doorhanger with: icon, title and subtitle. + * No panel header is shown + */ + #cfr-notification-header, + .popup-notification-footer-container { + display: none; + } + + .popup-notification-description { + font-weight: 600; + margin-bottom: 15px; + } + + popupnotificationcontent { + display: block; /* This forces the subtitle content to wrap */ + } + } +} + +#cfr-notification-footer-text-and-addon-info { + display: block; + padding: 10px var(--arrowpanel-padding); +} + +#cfr-notification-feature-steps { + display: flex; + flex-direction: column; + margin-top: 10px; + + li { + margin-inline-start: 10px; + position: relative; + display: list-item; + + &:not(:last-child) { + margin-bottom: 5px; + } + } +} + +#cfr-notification-footer-text, +#cfr-notification-footer-users, +#cfr-notification-footer-learn-more-link { + margin: 0; +} + +#cfr-notification-footer-addon-info { + align-items: center; + display: flex; + margin-block: 10px 6px; +} + +#cfr-notification-footer-filled-stars, +#cfr-notification-footer-empty-stars { + -moz-context-properties: fill, fill-opacity; + background-image: url(chrome://browser/skin/bookmark.svg); + fill: currentColor; + fill-opacity: 0.7; + height: 16px; +} + +#cfr-notification-footer-filled-stars:-moz-locale-dir(rtl), +#cfr-notification-footer-empty-stars { + background-position-x: right; +} + +#cfr-notification-footer-filled-stars, +#cfr-notification-footer-empty-stars:-moz-locale-dir(rtl) { + background-position-x: left; +} + +#cfr-notification-footer-empty-stars[tooltiptext] { + margin-inline-end: 6px; + opacity: 0.3; +} + +#cfr-notification-footer-users { + opacity: 0.7; +} + +#cfr-notification-footer-spacer { + flex-grow: 1; +} + +/* nhnt11: Workaround to insert a linebreak after the DoH doorhanger's title. + * The title uses the inline <b> that usually contains the hostname for + * permission prompts to achieve bold formatting. This is always the 2nd child. + */ +.popup-notification-description[popupid="doh-first-time"] > b:first-of-type { + display: block; + margin-bottom: 4px; /* matches the margin-bottom on description elements */ +} + +/* Sharing tabs warning */ + +#sharing-tabs-warning-panel { + max-width: 400px; + + > hbox[type="window"] > vbox > label > #sharing-warning-screen-panel-header { + display: none; + } + + > hbox[type="screen"] > vbox > label > #sharing-warning-window-panel-header { + display: none; + } +} + +#sharing-warning-proceed-to-tab { + appearance: none; + border-style: none; + margin: 0; + background-color: rgb(0,96,223); + color: rgb(255,255,255); + border-radius: 5px; + padding: 10px; + margin-top: 15px; + margin-bottom: 10px; + + &:hover { + background-color: rgb(0,62,170); + } +} + +/* webRTC device sharing selector */ + +.webRTC-selectDevice-selector-container { + display: flex; + align-items: center; + + > menulist { + flex: 1; + min-width: 0; + } +} + +#webRTC-selectSpeaker-richlistbox { + flex: 1; + /* Keep the richlistbox small enough that a large number of devices doesn't + push the main and secondary action buttons off the bottom of the + popupnotification window when limited by screen size. Only enough + richlistitems need to be shown to indicate that there are options + available but give enough space for the common case of only a few + devices. */ + max-height: 600px; +} + +#webRTC-selectCamera-label, +#webRTC-selectMicrophone-label { + display: none; +} + +.webRTC-selectDevice-icon { + -moz-context-properties: fill; + fill: currentColor; + margin-inline-end: 8px; + /* Setting width explicitly so it's still visible if the device label is very long */ + width: 16px; +} + +#webRTC-selectCamera-icon { + list-style-image: url("chrome://browser/skin/notification-icons/camera.svg"); +} + +#webRTC-selectMicrophone-icon { + list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg"); +} + +#webRTC-selectSpeaker-icon { + list-style-image: url("chrome://browser/skin/notification-icons/speaker.svg"); +} + +/* TODO: move these to popupnotification.css */ + +popupnotificationcontent { + margin-block-start: 8px; +} + +.popup-notification-body menulist { + margin: 0; +} + +.popup-notification-checkbox { + margin-block: 12px 0; +} + +.popup-notification-body-container { + padding-block-end: 0; +} + +.popup-notification-body :is(description, label:not(.learnMore), checkbox, input) { + margin-inline: 0; +} + +.popup-notification-body :is(input, textarea) { + padding: 8px; + border-radius: 4px; + border: 0; + outline: 1px solid var(--input-border-color, ThreeDShadow); + outline-offset: -1px; + background-color: var(--input-bgcolor, Field); + color: var(--input-color, FieldText); +} + +.popup-notification-body input:focus-visible { + outline: 2px solid var(--focus-outline-color); +} + +.popup-notification-description { + font-weight: 600; + margin-top: 0; + + > b { + font-weight: inherit; + } +} + +/* Password Manager Doorhanger */ + +.ac-dropmarker { + appearance: none; + justify-self: end; + margin-inline-end: 8px; + align-self: center; + content: url(chrome://global/skin/icons/arrow-down-12.svg); + -moz-context-properties: fill; + fill: var(--input-color, -moz-DialogText); +} + +.ac-has-end-icon { + text-overflow: ellipsis; + overflow: hidden; +} + +.popup-notification-body input.ac-has-end-icon { + --input-padding-from-arrow-side: calc(8px + 16px + 8px); /* spacing from the end + arrow element width + extra spacing) */ + padding-inline-end: var(--input-padding-from-arrow-side); +} + +/* Avoid overlapping the text on the arrow icon when switching input text direction */ +.popup-notification-body:-moz-locale-dir(rtl) input.ac-has-end-icon:dir(ltr) { + padding-left: var(--input-padding-from-arrow-side); + padding-right: 8px; +} +.popup-notification-body:-moz-locale-dir(ltr) input.ac-has-end-icon:dir(rtl) { + padding-right: var(--input-padding-from-arrow-side); + padding-left: 8px; +} + +.password-notification-label { + margin-block-start: 16px; + + /** + * There's already a margin-block-start of 8px on popupnotificationcontent, + * so the first label only needs 8px of margin-block-start to match the + * spec. + */ + &:first-of-type { + margin-block-start: 8px; + } +} + +#password-notification-visibilityToggle { + margin-block-start: 14px; + + > .checkbox-label-box > .checkbox-label { + opacity: 0.7; + } +} + +#tab-notification-deck { + display: block; +} + +/* Relay Integration */ + +.relay-integration-header { + display: flex; + align-items: center; + font-size: 2em; + + > div { + width: 32px; + height: 32px; + background-image: url("chrome://browser/content/logos/relay.svg"); + background-repeat: no-repeat; + } + + > span:first-of-type { + font-weight: bold; + margin-inline-start: 8px; + } + + > span:last-of-type { + font-weight: normal; + white-space: pre; + } +} + +.popup-notification-description[popupid="relay-integration-offer-notification"] > div:first-of-type { + font-weight: normal; + display: grid; + grid-template-columns: auto; + grid-template-rows: auto auto auto auto; +} + +#relay-integration-reuse-masks-notification > popupnotificationcontent > div { + font-weight: normal; + display: grid; + grid-template-columns: auto; + grid-template-rows: auto auto auto auto; +} + +.reusable-relay-masks { + display: flex; + flex-direction: column; + + > button { + padding: 4px; + margin: 4px; + display: flex; + flex-direction: row; + justify-content: space-between; + + > span:first-child { + margin-inline-end: 20px; + } + + > span:last-child { + opacity: 0.6; + } + } +} + +/* History swipe navigation animation */ + +#historySwipeAnimationPreviousArrow, +#historySwipeAnimationNextArrow { + --swipe-nav-icon-primary-color: SelectedItemText; + --swipe-nav-icon-accent-color: SelectedItem; + + will-change: transform; + + @media not (prefers-contrast) { + /* TODO: Should this be in browser-custom-colors to respect system theming on + * Linux? */ + --swipe-nav-icon-primary-color: light-dark(#0060DF, #00DDFF); + --swipe-nav-icon-accent-color: light-dark(#FFFFFF, #000000); + } + + > svg { + margin: auto 0; + } +} + +#historySwipeAnimationPreviousArrow:-moz-locale-dir(rtl), +#historySwipeAnimationNextArrow:-moz-locale-dir(ltr) { + transform: scaleX(-1); +} + +.swipe-nav-icon { + > path { + transition: fill 1s; + } + + @media not (-moz-platform: macos) { + /* + * Styles for the swipe navigation SVG icon. + * + * `will-navigate` class name is added to the <svg> element when the user's + * swipe gesture reached to the point where history navigation will be + * triggered. It's used for triggering three animations, an arrow color change, + * a circle color change and a glowing effect outer the circle. + */ + > circle { + fill: var(--swipe-nav-icon-accent-color); + stroke: var(--swipe-nav-icon-primary-color); + transition: fill 1s; + + &:first-of-type { + fill: var(--swipe-nav-icon-primary-color); + transition: opacity 1s; + will-change: opacity; /* a workaround for bug 1804189 */ + opacity: 0; + } + } + + &.will-navigate > circle:not(:first-of-type) { + fill: var(--swipe-nav-icon-primary-color); + } + + &.will-navigate > circle:first-of-type { + transition-delay: 0.2s; + opacity: 0.2; + } + + > path { + fill: var(--swipe-nav-icon-primary-color); + } + + &.will-navigate > path { + fill: var(--swipe-nav-icon-accent-color); + stroke: var(--swipe-nav-icon-accent-color); + } + } +} + +@media (-moz-platform: macos) { + /* + * Styles for the swipe navigation SVG icon. + * + * `will-navigate` class name is added to the <svg> element when the user's + * swipe gesture reached to the point where history navigation will be + * triggered. + */ + .swipe-nav-icon-circle-outline, + .swipe-nav-icon-arrow { + fill: var(--swipe-nav-icon-primary-color); + } + + .swipe-nav-icon-circle { + fill: var(--swipe-nav-icon-accent-color); + } + + .swipe-nav-icon.will-navigate { + > .swipe-nav-icon-circle-outline, + > .swipe-nav-icon-arrow { + fill: var(--swipe-nav-icon-accent-color); + } + + > .swipe-nav-icon-circle { + fill: var(--swipe-nav-icon-primary-color); + } + } +} + +/* TODO: move this to toolkit */ +panel toolbarseparator { + appearance: none; + min-height: 0; + border-top: 1px solid var(--panel-separator-color); + border-bottom: none; + margin: var(--panel-separator-margin); + padding: 0; +} + +/* Picture-in-Picture panel */ + +#PictureInPicturePanel { + width: var(--menu-panel-width-wide); + font: caption; +} + +#PictureInPicturePanelBody { + gap: 8px; + padding: 8px 16px; +} + +#PictureInPicturePanelFooter { + margin: 8px 16px 16px; +} + +/* Shopping sidebar */ + +shopping-sidebar { + border-inline-start: 1px solid var(--chrome-content-separator-color); + min-width: 16.92em; + max-width: 32.31em; + width: 320px; + box-sizing: content-box; +} |