Source code
Revision control
Copy as Markdown
Other Tools
/* 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
: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-separator-color: ThreeDShadow;
--tabs-navbar-separator-style: solid;
--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;
}
&[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-separator-color: light-dark(rgba(0,0,0,.1), rgba(0,0,0,.3));
--attention-dot-color: light-dark(#2ac3a2, #54ffbd);
@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;
}
}
#navigator-toolbox {
appearance: none;
/* Toolbar / content area border */
border-bottom: 0.01px 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;
}
:root[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);
}
#nav-bar {
/* The toolbar buttons that animate use position:absolute and require a
* positioned #nav-bar. */
position: relative;
border-top: 0.01px var(--tabs-navbar-separator-style) var(--tabs-navbar-separator-color);
&[tabs-hidden] {
border-top-style: none;
}
:root[sessionrestored][lwtheme] & {
transition: var(--ext-theme-background-transition);
}
}
/* 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
* 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 {
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) {
}
.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
.unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
}
/* 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;
@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;
@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);
:root[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[lwtheme]: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 {
width: 16px;
height: 16px;
}
/* End private browsing indicator */
/* Content analysis indicator */
:root:not([contentanalysisactive]) #content-analysis-indicator {
display: none;
}
/* End content analysis 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;
&: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 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 {
-moz-context-properties: fill;
fill: currentColor;
transform: translateY(2px);
float: inline-end;
}
&:-moz-locale-dir(ltr)::after {
}
&: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-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;
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 {
}
#webRTC-selectMicrophone-icon {
}
#webRTC-selectSpeaker-icon {
}
/* 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-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;
-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-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;
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;
}