forked from mirrors/gecko-dev
2f419065da
This is a start, there are more modules and scripts we can/should move, as well as tests. Differential Revision: https://phabricator.services.mozilla.com/D210676
1203 lines
31 KiB
CSS
1203 lines
31 KiB
CSS
/* 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/content/tabpreview/tabpreview.css");
|
|
@import url("chrome://browser/skin/addons/extension-controlled.css");
|
|
@import url("chrome://browser/skin/addons/unified-extensions.css");
|
|
@import url("chrome://browser/skin/downloads/indicator.css");
|
|
@import url("chrome://browser/skin/tabbrowser/ctrlTab.css");
|
|
@import url("chrome://browser/skin/tabbrowser/tabs.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/fullscreen/warning.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-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
|
|
* 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);
|
|
|
|
: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 {
|
|
list-style-image: url("chrome://global/skin/icons/indicator-private-browsing.svg");
|
|
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;
|
|
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 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-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;
|
|
}
|