1770 lines
51 KiB
CSS
1770 lines
51 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://global/skin/design-system/toolbar.css");
|
|
@import url("chrome://browser/skin/browser-colors.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/content-area.css");
|
|
@import url("chrome://browser/skin/tabbrowser/ctrlTab.css");
|
|
@import url("chrome://browser/skin/tabbrowser/fullscreen-and-pointerlock.css");
|
|
@import url("chrome://browser/skin/tabbrowser/tab.tokens.css");
|
|
@import url("chrome://browser/skin/tabbrowser/tabs-navbar.tokens.css");
|
|
@import url("chrome://browser/skin/tabbrowser/tabs.css");
|
|
@import url("chrome://browser/skin/tabbrowser/tab-groups-list.css");
|
|
@import url("chrome://browser/skin/tabbrowser/tab-hover-preview.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/tokens.css");
|
|
@import url("chrome://browser/skin/urlbar/variables.css");
|
|
@import url("chrome://browser/skin/urlbar/view.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/autocomplete.css");
|
|
@import url("chrome://browser/skin/places/editBookmarkPanel.css");
|
|
@import url("chrome://browser/skin/searchbar.css");
|
|
@import url("chrome://browser/skin/sidebar.css");
|
|
@import url("chrome://browser/skin/aiWindowSidebar.css");
|
|
@import url("chrome://browser/skin/customizableui/customizeMode.css");
|
|
@import url("chrome://browser/skin/UITour.css");
|
|
@import url("chrome://browser/skin/formautofill-notification.css");
|
|
|
|
:root,
|
|
body {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: clip;
|
|
}
|
|
|
|
:root {
|
|
--window-min-width: 500px;
|
|
/* Vertical tabs need extra room in the nav bar for window controls,
|
|
drag space, and the sidebar button. */
|
|
--window-min-width-increase-for-vertical-tabs: calc(var(--window-controls-size) + 23px);
|
|
--window-controls-size: 138px;
|
|
@media (-moz-platform: macos) {
|
|
--window-controls-size: 76px;
|
|
}
|
|
@media (-moz-platform: linux) {
|
|
/* FIXME: Use --titlebar-button-* variables to calculate the window
|
|
controls' size. */
|
|
--window-controls-size: 115px;
|
|
}
|
|
|
|
user-select: none;
|
|
color-scheme: light dark;
|
|
text-rendering: optimizeLegibility;
|
|
/* Minimum sizing comes from specific size requirements and adds on other
|
|
* values for different scenarios that don't lend themselves to design tokens. */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
min-height: 95px;
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
min-width: 95px;
|
|
|
|
@media not (forced-colors) {
|
|
accent-color: var(--color-accent-primary);
|
|
}
|
|
|
|
&:-moz-locale-dir(rtl) {
|
|
direction: rtl;
|
|
}
|
|
|
|
&:not([chromehidden~="toolbar"]) {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
min-width: var(--window-min-width);
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
min-height: 120px;
|
|
|
|
@media -moz-pref("sidebar.verticalTabs") {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
min-width: calc(var(--window-min-width) + var(--window-min-width-increase-for-vertical-tabs));
|
|
|
|
/* If the Content Analysis icon is showing, we don't
|
|
want to collapse it, so make a little more room. */
|
|
&[contentanalysisactive] {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
min-width: calc(var(--window-min-width) + var(--window-min-width-increase-for-vertical-tabs) + 36px);
|
|
}
|
|
}
|
|
}
|
|
|
|
&[taskbartab]:not([chromehidden~="toolbar"]) {
|
|
/* This size prevents toolbar contents from overlapping or overflowing. */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
min-width: 804px;
|
|
}
|
|
|
|
/* z-indices that fight on the browser stack */
|
|
--browser-stack-z-index-devtools-splitter: 1;
|
|
--browser-stack-z-index-dialog-stack: 2;
|
|
--browser-stack-z-index-rdm-toolbar: 3;
|
|
--browser-stack-z-index-screenshots-panel: 4;
|
|
|
|
/* z-indices that fight in the general browser / toolbox area */
|
|
--browser-area-z-index-toolbox: 0;
|
|
--browser-area-z-index-sidebar: 1;
|
|
--browser-area-z-index-tabbox: 2;
|
|
--browser-area-z-index-sidebar-expand-on-hover: 4;
|
|
--browser-area-z-index-sidebar-splitter: 3;
|
|
|
|
/* on macOS the animation of the toolbox in fullscreen needs the toolbox to be higher */
|
|
--browser-area-z-index-toolbox-while-animating: 4;
|
|
|
|
--lwt-additional-images: none;
|
|
--lwt-background-tiling: no-repeat;
|
|
--lwt-background-alignment: right top;
|
|
--lwt-background-size: auto;
|
|
|
|
--toolbox-background-image: none;
|
|
--toolbox-background-repeat: no-repeat;
|
|
--toolbox-background-position: right top;
|
|
--toolbox-background-size: auto;
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
--toolbox-background-image: var(--toolbox-background-gradient);
|
|
}
|
|
|
|
&[lwtheme] {
|
|
--toolbox-background-image: var(--lwt-additional-images);
|
|
--toolbox-background-repeat: var(--lwt-background-tiling);
|
|
--toolbox-background-position: var(--lwt-background-alignment);
|
|
--toolbox-background-size: var(--lwt-background-size);
|
|
}
|
|
|
|
&[lwtheme-image] {
|
|
/* When a theme defines both theme_frame and additional_backgrounds, show
|
|
the latter atop the former. */
|
|
--toolbox-background-image: var(--lwt-header-image), var(--lwt-additional-images);
|
|
--toolbox-background-repeat: no-repeat, var(--lwt-background-tiling);
|
|
--toolbox-background-position: right top, var(--lwt-background-alignment);
|
|
--toolbox-background-size: auto, var(--lwt-background-size);
|
|
}
|
|
|
|
--ext-theme-background-transition: background-color 0.1s cubic-bezier(0.17, 0.67, 0.83, 0.67);
|
|
|
|
--inactive-window-transition: 0.2s ease;
|
|
--inactive-titlebar-opacity: var(--opacity-deemphasized-strong);
|
|
/**
|
|
* 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: 0.75;
|
|
}
|
|
@media (prefers-reduced-motion) {
|
|
--inactive-window-transition: 0s;
|
|
}
|
|
|
|
&[lwtheme] {
|
|
/* Theme colors don't need to use design tokens. */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
color: var(--lwt-text-color);
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
--chrome-window-gap: 4px;
|
|
--chrome-block-radius: 10px;
|
|
|
|
&[uidensity="compact"] {
|
|
--chrome-window-gap: 0;
|
|
}
|
|
|
|
@media (-moz-platform: linux) {
|
|
--chrome-block-radius: env(-moz-gtk-csd-titlebar-radius);
|
|
}
|
|
|
|
@media (-moz-platform: windows) {
|
|
--chrome-block-radius: 4px;
|
|
}
|
|
|
|
@media (-moz-windows-mica) {
|
|
--chrome-block-radius: 8px;
|
|
}
|
|
|
|
@media (-moz-mac-tahoe-theme) {
|
|
--chrome-block-radius: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Toolbox and Toolbars */
|
|
|
|
#navigator-toolbox {
|
|
appearance: none;
|
|
z-index: var(--browser-area-z-index-toolbox);
|
|
|
|
&[fullscreenShouldAnimate] {
|
|
transition: 0.8s margin-top ease-out;
|
|
}
|
|
|
|
/* While we are animating / have animated in the titlebar from macOS,
|
|
* the z-indices are subtly different to accommodate the sidebar better.
|
|
*
|
|
* We also give the toolbox a shadow and border in this case.
|
|
*/
|
|
&.fullscreen-floating-toolbox {
|
|
/* We want to guarantee an opaque background here */
|
|
background-color: ActiveCaption;
|
|
background-image: var(--toolbox-background-image), image(var(--toolbox-background-color));
|
|
background-repeat: var(--toolbox-background-repeat), no-repeat;
|
|
background-position:
|
|
var(--toolbox-background-position),
|
|
top right;
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
background-size: var(--toolbox-background-size), auto;
|
|
z-index: var(--browser-area-z-index-toolbox-while-animating);
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
box-shadow: var(--content-area-shadow);
|
|
/* Variables defined in browser-colors.css will be updated to use design tokens, see bug 1952566. */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
border-bottom-color: var(--chrome-content-separator-color);
|
|
}
|
|
}
|
|
|
|
body {
|
|
/* Prevents the background from propagating to the viewport */
|
|
contain: paint;
|
|
position: relative;
|
|
|
|
background-color: var(--toolbox-background-color);
|
|
color: var(--toolbox-text-color);
|
|
|
|
will-change: background-color;
|
|
transition: background-color var(--inactive-window-transition);
|
|
|
|
&:-moz-window-inactive {
|
|
background-color: var(--toolbox-background-color-inactive);
|
|
color: var(--toolbox-text-color-inactive);
|
|
}
|
|
|
|
:root[customizing] & {
|
|
border-bottom-style: none;
|
|
}
|
|
|
|
@media (-moz-platform: macos) and (-moz-native-theme) {
|
|
/* This is conceptually a background, but putting this on a pseudo-element
|
|
* avoids it from suppressing the chrome-content separator border, etc.
|
|
*
|
|
* We make this exist unconditionally to prevent dynamic changes from
|
|
* reframing the whole toolbox when adding or removing it.
|
|
*
|
|
* See bug 1949528 and bug 1476281 (which would make this unnecessary). */
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Don't make the toolbox vibrant when in full-screen. macOS fullscreen has a
|
|
* native titlebar outside of the window (revealed on hover) anyways. */
|
|
:root[customtitlebar]:not([lwtheme], [macOSNativeFullscreen]) & {
|
|
background-color: transparent;
|
|
|
|
&::after {
|
|
-moz-default-appearance: -moz-window-titlebar;
|
|
appearance: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
:root:not([theme-image-in-toolbox]) body,
|
|
:root[theme-image-in-toolbox] #navigator-toolbox {
|
|
background-image: var(--toolbox-background-image);
|
|
background-repeat: var(--toolbox-background-repeat);
|
|
background-position: var(--toolbox-background-position);
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
background-size: var(--toolbox-background-size);
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
:root[lwtheme]:not([theme-image-in-toolbox]) #navigator-toolbox {
|
|
color: inherit;
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
|
|
}
|
|
|
|
.chrome-block {
|
|
background-color: var(--toolbox-background-color);
|
|
color: var(--toolbox-text-color);
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
border-radius: var(--chrome-block-radius);
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
border: 1px solid var(--chrome-content-separator-color);
|
|
overflow: clip;
|
|
|
|
:root[uidensity="compact"] &#sidebar-container {
|
|
border-radius: 0;
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
border-start-end-radius: var(--chrome-block-radius);
|
|
|
|
&[sidebar-positionend] {
|
|
border-start-end-radius: 0;
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
border-start-start-radius: var(--chrome-block-radius);
|
|
}
|
|
|
|
&[sidebar-panel-open] {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
:root[uidensity="compact"] &:not(#sidebar-container) {
|
|
border-radius: 0;
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
border-start-end-radius: var(--chrome-block-radius);
|
|
|
|
/* Mirror the rounded corner to the inline-start when the sidebar is
|
|
positioned at the inline-end. */
|
|
&[sidebar-positionend] {
|
|
border-start-end-radius: 0;
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
border-start-start-radius: var(--chrome-block-radius);
|
|
}
|
|
}
|
|
|
|
&:-moz-window-inactive {
|
|
background-color: var(--toolbox-background-color-inactive);
|
|
color: var(--toolbox-text-color-inactive);
|
|
}
|
|
|
|
/* Remove the border and rounded corners against the screen edge in
|
|
* fullscreen. */
|
|
:root:is([inFullscreen], [inDOMFullscreen]) & {
|
|
border-radius: 0;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
#navigator-toolbox,
|
|
#sidebar-container {
|
|
background-color: var(--toolbar-background-color);
|
|
}
|
|
}
|
|
|
|
.browser-toolbar {
|
|
appearance: none;
|
|
/* Reset linux padding */
|
|
padding: 0;
|
|
border-style: none;
|
|
background-color: transparent;
|
|
color: inherit;
|
|
|
|
@media not -moz-pref("sidebar.verticalTabs") {
|
|
&:not(.browser-titlebar) {
|
|
background-color: var(--toolbar-background-color);
|
|
color: var(--toolbar-text-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Title bar */
|
|
|
|
.browser-titlebar {
|
|
-moz-window-dragging: drag;
|
|
|
|
:root[customtitlebar] &,
|
|
:root[customtitlebar] & .urlbar:popover-open {
|
|
will-change: opacity;
|
|
transition: opacity var(--inactive-window-transition);
|
|
|
|
&:-moz-window-inactive {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens -- to be addressed in 2033919 */
|
|
opacity: var(--inactive-titlebar-opacity);
|
|
}
|
|
}
|
|
}
|
|
|
|
.titlebar-buttonbox-container {
|
|
order: 1000;
|
|
|
|
@media (-moz-platform: macos) and (not (-moz-mac-rtl)) {
|
|
&:-moz-locale-dir(ltr) {
|
|
order: -1;
|
|
}
|
|
}
|
|
|
|
@media (-moz-mac-rtl) {
|
|
&:-moz-locale-dir(rtl) {
|
|
order: -1;
|
|
}
|
|
}
|
|
|
|
#toolbar-menubar[autohide]:not([inactive]) ~ :is(#TabsToolbar, #nav-bar) > & {
|
|
visibility: hidden;
|
|
}
|
|
|
|
:root:not([customtitlebar], [inFullscreen]) & {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.titlebar-spacer {
|
|
/* Spacer widths are specific and shouldn't change if underlying token sizes change. */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
width: 40px;
|
|
|
|
:root[inFullscreen] &,
|
|
:root:not([customtitlebar]) & {
|
|
display: none;
|
|
}
|
|
|
|
@media (-moz-platform: windows) {
|
|
:root:not([sizemode="normal"]) &[type="pre-tabs"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (-moz-platform: linux) and (-moz-gtk-csd-reversed-placement: 0) {
|
|
:root:not([sizemode="normal"]) &[type="pre-tabs"],
|
|
:root[tiled] &[type="pre-tabs"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (-moz-gtk-csd-reversed-placement) {
|
|
:root:not([sizemode="normal"]) &[type="post-tabs"],
|
|
:root[tiled] &[type="post-tabs"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
&[type="post-tabs"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media -moz-pref("sidebar.verticalTabs") {
|
|
:root:not([taskbartab]) &:is([type="pre-tabs"], [type="post-tabs"]) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Hide the TabsToolbar/nav-bar titlebar controls if the menubar is permanently shown.
|
|
* (That is, if the menu bar doesn't autohide, and we're not in a fullscreen or
|
|
* popup window.) */
|
|
:root:not([chromehidden~="menubar"], [inFullscreen])
|
|
#toolbar-menubar:not([autohide], [collapsed])
|
|
~ :is(#TabsToolbar, #nav-bar)
|
|
> :is(.titlebar-buttonbox-container, .titlebar-spacer) {
|
|
display: none;
|
|
}
|
|
|
|
/* Only show the titlebar buttons and spacers in the first visible toolbar. */
|
|
#navigator-toolbox:not([tabs-hidden]) > #nav-bar > :is(.titlebar-buttonbox-container, .titlebar-spacer) {
|
|
display: none;
|
|
}
|
|
|
|
:root:not([sizemode="maximized"], [sizemode="fullscreen"]) .titlebar-restore,
|
|
:root:is([sizemode="maximized"], [sizemode="fullscreen"]) .titlebar-max {
|
|
display: none;
|
|
}
|
|
|
|
.titlebar-buttonbox {
|
|
appearance: auto;
|
|
-moz-default-appearance: -moz-window-button-box;
|
|
position: relative;
|
|
|
|
:root:not([customtitlebar], [sizemode="fullscreen"]) & {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Menu bar */
|
|
|
|
#toolbar-menubar {
|
|
&[autohide] {
|
|
overflow: hidden;
|
|
|
|
/* For linux and windows, when temporarily showing the menu bar, make it at least
|
|
as tall as the tab toolbar such that the window controls don't appear to move up.
|
|
For MacOS, autohide is never true on the menubar.
|
|
*/
|
|
:root[customtitlebar] #navigator-toolbox:not([tabs-hidden]) > & {
|
|
/* --tabstrip-min-height is defined in tabs.css, which stylelint doesn't know about. */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
min-height: var(--tabstrip-min-height);
|
|
}
|
|
/* adjust the height of the auto-hiding toolbar menubar when the tabstrip is
|
|
hidden and we need to match the height of the nav-bar. */
|
|
:root[customtitlebar] #navigator-toolbox[tabs-hidden] > & {
|
|
/* urlbar variables will be tokenized, see bug 2017983 */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
min-height: calc(var(--urlbar-min-height) + 2 * var(--urlbar-padding-block));
|
|
}
|
|
|
|
&[inactive]:not([customizing]) {
|
|
min-height: 0 !important;
|
|
height: 0 !important;
|
|
padding: 0 !important;
|
|
appearance: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Hide menu elements intended for keyboard access support */
|
|
#main-menubar[openedwithkey="false"] .show-only-for-keyboard {
|
|
display: none;
|
|
}
|
|
|
|
/* Profiles menu */
|
|
|
|
#menu_newProfile {
|
|
--menuitem-icon: url(chrome://global/skin/icons/plus.svg);
|
|
}
|
|
|
|
.menuitem-iconic-profile {
|
|
--menuitem-icon-fill: var(--menu-profiles-theme-bg);
|
|
-moz-context-properties: fill, stroke;
|
|
/* Theme variables don't need to use design system colors. */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
stroke: var(--menu-profiles-theme-fg);
|
|
}
|
|
|
|
/* Navigation toolbar */
|
|
|
|
#nav-bar {
|
|
/* The toolbar buttons that animate use position:absolute and require a
|
|
* positioned #nav-bar. */
|
|
position: relative;
|
|
/* Variables defined in browser-colors.css will be updated to use design tokens, see bug 1952566. */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
border-top: 0.01px var(--tabs-navbar-separator-style) var(--tabs-navbar-separator-color);
|
|
|
|
#navigator-toolbox[tabs-hidden] > & {
|
|
border-top-style: none;
|
|
}
|
|
|
|
:root[sessionrestored][lwtheme] & {
|
|
transition: var(--ext-theme-background-transition);
|
|
}
|
|
}
|
|
|
|
#nav-bar-customization-target {
|
|
/* Don't grow if potentially-user-sized elements (like the searchbar or the
|
|
* bookmarks toolbar item list) are too wide. This forces them to flex to the
|
|
* available space as much as possible, see bug 1795260. */
|
|
min-width: 0;
|
|
|
|
/* Add space to beginning of toolbar and make that space click the first <toolbarbutton> */
|
|
> :is(toolbarbutton, toolbaritem):first-child,
|
|
> toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
|
|
padding-inline-start: var(--toolbar-padding-inline);
|
|
}
|
|
}
|
|
|
|
#vertical-spacer {
|
|
/* Spacer widths are specific and shouldn't change if underlying token sizes change. */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
min-width: 20px;
|
|
|
|
@media not -moz-pref("sidebar.verticalTabs") {
|
|
display: none;
|
|
}
|
|
|
|
:root[taskbartab] & {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Share Button */
|
|
.share-more-button {
|
|
--menuitem-icon: url("chrome://global/skin/icons/more.svg");
|
|
}
|
|
|
|
/* 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: var(--space-small);
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
:root:not([lwtheme]) & {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
border-top: 1px solid var(--chrome-content-separator-color);
|
|
background-color: var(--toolbar-background-color);
|
|
color: var(--toolbar-text-color);
|
|
}
|
|
}
|
|
|
|
:root[uidensity="compact"] & {
|
|
padding-inline: var(--space-xxsmall);
|
|
}
|
|
|
|
/* 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] {
|
|
transition:
|
|
min-height 170ms ease-out,
|
|
max-height 170ms ease-out,
|
|
visibility 170ms linear;
|
|
}
|
|
}
|
|
|
|
&[collapsed] {
|
|
max-height: 0;
|
|
|
|
&.instant {
|
|
visibility: collapse;
|
|
}
|
|
}
|
|
|
|
/* Bookmarks toolbar empty message */
|
|
|
|
/* If the toolbar is not initialized set a zero width, but retain height. */
|
|
&:not([collapsed], [initialized]) > #personal-toolbar-empty {
|
|
visibility: hidden;
|
|
width: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Bookmarks toolbar in customize mode */
|
|
|
|
&[customizing] {
|
|
outline: 1px dashed;
|
|
outline-offset: -3px;
|
|
/* Give the toolbar the correct height when there's no items in it */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
min-height: 22px;
|
|
}
|
|
}
|
|
|
|
#personal-toolbar-empty-description {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#personal-bookmarks {
|
|
position: relative;
|
|
-moz-window-dragging: inherit;
|
|
}
|
|
|
|
#fxms-bmb-button-wrapper,
|
|
toolbarpaletteitem > #personal-bookmarks > #PlacesToolbar,
|
|
#personal-bookmarks:is([overflowedItem="true"], [cui-areatype="panel"]) > #PlacesToolbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Bookmarks toolbar drop indicator */
|
|
|
|
#PlacesToolbarDropIndicatorHolder {
|
|
display: block;
|
|
position: absolute;
|
|
}
|
|
|
|
#PlacesToolbarDropIndicator {
|
|
list-style-image: url(chrome://browser/skin/toolbar-drag-indicator.svg);
|
|
pointer-events: none;
|
|
}
|
|
|
|
#notifications-toolbar {
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.bookmark-item[cutting] {
|
|
> .toolbarbutton-icon,
|
|
> .menu-icon {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens -- to be addressed in 2033919 */
|
|
opacity: 0.5;
|
|
}
|
|
|
|
> .toolbarbutton-text,
|
|
> .menu-text {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens -- to be addressed in 2033919 */
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
/* 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 */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
margin-block: -1px;
|
|
}
|
|
|
|
menupopup::part(drop-indicator) {
|
|
list-style-image: none;
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
height: 2px;
|
|
margin-inline-end: -4em;
|
|
background-color: AccentColor;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Back / Forward buttons context menu */
|
|
|
|
.unified-nav-current {
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
|
|
.unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
|
|
--menuitem-icon: 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) {
|
|
--menuitem-icon: url("chrome://browser/skin/forward.svg") !important;
|
|
}
|
|
|
|
/* Find bar */
|
|
|
|
.browserContainer > findbar {
|
|
background-color: var(--toolbar-background-color);
|
|
color: var(--toolbar-text-color);
|
|
color-scheme: var(--toolbar-color-scheme);
|
|
/* Variables defined in browser-colors.css will be updated to use design tokens, see bug 1952566. */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
border-top-color: var(--chrome-content-separator-color);
|
|
|
|
:root[lwtheme] & {
|
|
background-color: var(--lwt-accent-color); /* Known opaque */
|
|
background-image: image(var(--toolbar-background-color)), var(--toolbox-background-image);
|
|
background-repeat: no-repeat, var(--toolbox-background-repeat);
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
background-position:
|
|
top left,
|
|
var(--toolbox-background-position);
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
background-size: auto, var(--toolbox-background-size);
|
|
background-position-y: bottom !important;
|
|
}
|
|
|
|
:root[lwtheme]:not([lwtheme-image]) &:-moz-window-inactive {
|
|
background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
|
|
}
|
|
}
|
|
|
|
/* Private browsing indicator */
|
|
|
|
.private-browsing-indicator-with-label {
|
|
align-items: center;
|
|
margin-inline: var(--space-small);
|
|
|
|
:root:not([privatebrowsingmode="temporary"]) &,
|
|
#navigator-toolbox:not([tabs-hidden]) #nav-bar > & {
|
|
display: none;
|
|
}
|
|
|
|
#navigator-toolbox[tabs-hidden] #nav-bar > & {
|
|
margin-inline-end: var(--space-medium);
|
|
|
|
/* Hide the private browsing indicator
|
|
label when vertical tabs are enabled */
|
|
> .private-browsing-indicator-label {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.private-browsing-indicator-icon {
|
|
list-style-image: url("chrome://global/skin/icons/indicator-private-browsing.svg");
|
|
width: var(--icon-size);
|
|
height: var(--icon-size);
|
|
}
|
|
|
|
/* Content analysis indicator */
|
|
.content-analysis-indicator {
|
|
:root:not([contentanalysisactive]) &,
|
|
#navigator-toolbox:not([tabs-hidden]) > #nav-bar > & {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Various panels and popup notifications */
|
|
|
|
.screenshotsPagePanel {
|
|
position: relative;
|
|
max-height: 0;
|
|
z-index: var(--browser-stack-z-index-screenshots-panel); /* Above the web content in this stack. */
|
|
}
|
|
|
|
#widget-overflow .webextension-popup-browser {
|
|
background: white;
|
|
|
|
/* 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: var(--space-xxsmall) var(--space-xsmall);
|
|
}
|
|
|
|
#invalid-form-popup {
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
unicode-bidi: plaintext;
|
|
|
|
> description {
|
|
max-width: var(--size-layout-medium);
|
|
}
|
|
}
|
|
|
|
.popup-notification-invalid-input {
|
|
/* Design system box shadows are all neutral tones, the red box shadows can
|
|
* remain until/unless there's some redesign work. */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
box-shadow: 0 0 1.5px 1px red;
|
|
|
|
&[focused] {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
box-shadow: 0 0 2px 2px rgba(255, 0, 0, 0.4);
|
|
}
|
|
}
|
|
|
|
.popup-notification-description[popupid="webauthn-prompt-register-direct"] {
|
|
white-space: pre-line;
|
|
}
|
|
|
|
#sidebar-tools-overflow {
|
|
margin-inline: var(--space-large);
|
|
width: 17.5em;
|
|
|
|
#tools-overflow-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xsmall);
|
|
padding: var(--space-xsmall);
|
|
width: 100%;
|
|
|
|
.expanded-button {
|
|
width: 100%;
|
|
|
|
&::part(button) {
|
|
font-size: var(--font-size-large);
|
|
font-weight: normal;
|
|
justify-content: flex-start;
|
|
/* Calculating padding from other dimensions rather than using a token with no context. */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
padding-inline: calc((var(--button-size-icon) - var(--icon-size)) / 2 - var(--border-width));
|
|
}
|
|
|
|
&::part(moz-button-label) {
|
|
opacity: 1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Contextual Feature Recommendation popup-notification */
|
|
|
|
#cfr-notification-header {
|
|
width: 100%;
|
|
display: block;
|
|
text-align: center;
|
|
box-shadow: var(--box-shadow-level-1);
|
|
}
|
|
|
|
#cfr-notification-header-stack {
|
|
width: 100%;
|
|
}
|
|
|
|
#cfr-notification-header-label {
|
|
margin: var(--space-small);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
#cfr-notification-header-link {
|
|
margin: var(--space-small);
|
|
color: inherit;
|
|
cursor: default;
|
|
justify-self: end;
|
|
}
|
|
|
|
#cfr-notification-header-image {
|
|
width: var(--icon-size-medium);
|
|
height: var(--icon-size-medium);
|
|
padding: var(--space-xxsmall);
|
|
-moz-context-properties: fill, fill-opacity;
|
|
fill: currentColor;
|
|
fill-opacity: var(--opacity-deemphasized-strong);
|
|
list-style-image: url(chrome://global/skin/icons/help.svg);
|
|
|
|
&:hover {
|
|
--header-image-background-color: oklch(from var(--color-gray-50) l c h / 20%);
|
|
|
|
background-color: var(--header-image-background-color);
|
|
border-radius: var(--border-radius-xsmall);
|
|
}
|
|
}
|
|
|
|
#contextual-feature-recommendation-notification {
|
|
width: var(--size-layout-large);
|
|
|
|
.popup-notification-icon {
|
|
margin-inline-end: var(--space-xsmall);
|
|
}
|
|
|
|
.cfr-doorhanger-large-icon {
|
|
width: var(--size-image-large);
|
|
height: var(--size-image-large);
|
|
margin-inline-end: var(--space-medium);
|
|
}
|
|
|
|
.cfr-doorhanger-medium-icon {
|
|
width: var(--size-image-small);
|
|
height: var(--size-image-small);
|
|
margin-inline-end: var(--space-medium);
|
|
}
|
|
|
|
.popup-notification-body-container {
|
|
width: 100%;
|
|
padding-bottom: var(--space-xxsmall);
|
|
}
|
|
|
|
popupnotificationcontent {
|
|
margin-top: 0;
|
|
}
|
|
|
|
description {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&[data-notification-bucket="CFR_MILESTONE_MESSAGE"] {
|
|
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;
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
max-width: 700px;
|
|
overflow-wrap: break-word;
|
|
padding: var(--space-xsmall);
|
|
|
|
&:-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: normal;
|
|
margin: unset;
|
|
margin-inline: var(--space-medium);
|
|
}
|
|
|
|
.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 {
|
|
--popup-button-background-color: oklch(from var(--color-gray-20) l c h / 20%);
|
|
|
|
background-color: var(--popup-button-background-color);
|
|
color: white;
|
|
border: none;
|
|
border-radius: var(--border-radius-xsmall);
|
|
margin: var(--space-xsmall);
|
|
padding: var(--space-xsmall) var(--space-medium);
|
|
flex: 1;
|
|
min-height: var(--size-item-medium);
|
|
|
|
&::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 {
|
|
--popup-button-background-color: oklch(from var(--color-gray-20) l c h / 40%);
|
|
}
|
|
|
|
&:hover:active {
|
|
--popup-button-background-color: oklch(from var(--color-gray-20) l c h / 50%);
|
|
}
|
|
}
|
|
|
|
.popup-notification-secondary-button {
|
|
--popup-button-background-color: transparent;
|
|
|
|
margin: var(--space-xsmall);
|
|
border: none;
|
|
border-radius: var(--border-radius-xsmall);
|
|
background-image: url(chrome://global/skin/icons/close.svg);
|
|
background-color: var(--popup-button-background-color);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 10px;
|
|
-moz-context-properties: fill;
|
|
fill: white;
|
|
min-height: var(--size-item-medium);
|
|
width: var(--size-item-medium);
|
|
padding: 0;
|
|
align-self: center;
|
|
flex: none;
|
|
|
|
&:hover {
|
|
--popup-button-background-color: oklch(from var(--color-gray-20) l c h / 40%);
|
|
}
|
|
}
|
|
|
|
.popup-notification-header-container {
|
|
color: white;
|
|
max-width: unset;
|
|
}
|
|
}
|
|
|
|
&[data-notification-bucket="CFR_SOCIAL_TRACKING_PROTECTION"] {
|
|
/* TODO: determine whether this is still needed, see bug 2032531 */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
width: 386px;
|
|
}
|
|
|
|
&[data-notification-category="addon_recommendation"] {
|
|
.popup-notification-description > b {
|
|
padding-inline-start: var(--space-xsmall);
|
|
}
|
|
|
|
#cfr-notification-footer-learn-more-link {
|
|
margin-inline-start: var(--space-xsmall);
|
|
}
|
|
|
|
#cfr-notification-feature-steps,
|
|
#cfr-notification-header-image {
|
|
display: none;
|
|
}
|
|
|
|
#cfr-notification-header-label {
|
|
margin-block-end: var(--space-small);
|
|
}
|
|
}
|
|
|
|
&[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: var(--font-weight-semibold);
|
|
margin-bottom: var(--space-large);
|
|
}
|
|
|
|
popupnotificationcontent {
|
|
display: block; /* This forces the subtitle content to wrap */
|
|
}
|
|
}
|
|
}
|
|
|
|
#cfr-notification-footer-text-and-addon-info {
|
|
display: block;
|
|
/* Panel variables will be tokenized in bug 2017979 */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
padding: var(--space-small) var(--panel-padding);
|
|
}
|
|
|
|
#cfr-notification-feature-steps {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: var(--space-small);
|
|
|
|
li {
|
|
margin-inline-start: var(--space-small);
|
|
position: relative;
|
|
display: list-item;
|
|
|
|
&:not(:last-child) {
|
|
margin-bottom: var(--space-xsmall);
|
|
}
|
|
}
|
|
}
|
|
|
|
#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: var(--space-medium) var(--space-small);
|
|
}
|
|
|
|
#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: var(--size-item-small);
|
|
}
|
|
|
|
#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: var(--space-small);
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens -- to be addressed in 2033919 */
|
|
opacity: 0.3;
|
|
}
|
|
|
|
#cfr-notification-footer-users {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens -- to be addressed in 2033919 */
|
|
opacity: 0.7;
|
|
}
|
|
|
|
#cfr-notification-footer-spacer {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* Sharing tabs warning */
|
|
|
|
#sharing-tabs-warning-panel {
|
|
max-width: var(--size-layout-large);
|
|
|
|
> 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 {
|
|
--sharing-warning-background-color: var(--color-blue-70);
|
|
|
|
appearance: none;
|
|
border-style: none;
|
|
margin: 0;
|
|
background-color: var(--sharing-warning-background-color);
|
|
color: white;
|
|
border-radius: var(--border-radius-small);
|
|
padding: var(--space-small);
|
|
margin-top: var(--space-large);
|
|
margin-bottom: var(--space-small);
|
|
|
|
&:hover {
|
|
--sharing-warning-background-color: var(--color-blue-80);
|
|
}
|
|
}
|
|
|
|
/* 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. */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
max-height: 600px;
|
|
}
|
|
|
|
#webRTC-selectCamera-label,
|
|
#webRTC-selectMicrophone-label {
|
|
display: none;
|
|
}
|
|
|
|
.webRTC-selectDevice-icon {
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
margin-inline-end: var(--space-small);
|
|
/* Setting width explicitly so it's still visible if the device label is very long */
|
|
width: var(--icon-size);
|
|
}
|
|
|
|
#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: var(--space-small);
|
|
}
|
|
|
|
.popup-notification-body menulist {
|
|
margin: 0;
|
|
}
|
|
|
|
.popup-notification-checkbox {
|
|
margin-block: var(--space-medium) 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: var(--font-weight-semibold);
|
|
margin-top: 0;
|
|
|
|
> b {
|
|
font-weight: inherit;
|
|
}
|
|
}
|
|
|
|
/* Password Manager Doorhanger */
|
|
|
|
.ac-dropmarker {
|
|
appearance: none;
|
|
justify-self: end;
|
|
margin-inline-end: var(--space-small);
|
|
align-self: center;
|
|
content: url(chrome://global/skin/icons/arrow-down-12.svg);
|
|
-moz-context-properties: fill;
|
|
/* Variables defined in browser-colors.css will be updated to use design tokens, see bug 1952566. */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
fill: var(--input-text-color);
|
|
}
|
|
|
|
#tab-notification-deck {
|
|
display: block;
|
|
}
|
|
|
|
/* Relay Integration */
|
|
|
|
.relay-integration-header {
|
|
display: flex;
|
|
align-items: center;
|
|
/* Font-size tokens are unset in platform contexts. */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
font-size: 2em;
|
|
|
|
> div:nth-of-type(1) {
|
|
width: var(--icon-size-xlarge);
|
|
height: var(--icon-size-xlarge);
|
|
background-image: url("chrome://browser/content/logos/relay.svg");
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
> div:nth-of-type(2) {
|
|
direction: ltr;
|
|
margin-inline: var(--space-small);
|
|
|
|
> span:first-of-type {
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
> span:last-of-type {
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.relay-integration-header-variation {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: var(--font-weight-heading);
|
|
/* Font-size tokens are unset in platform contexts. */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
font-size: 1.5em;
|
|
margin: auto;
|
|
|
|
> p {
|
|
margin-block: auto;
|
|
}
|
|
}
|
|
|
|
.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: var(--space-xsmall);
|
|
margin: var(--space-xsmall);
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
> span:first-child {
|
|
margin-inline-end: var(--space-xlarge);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
> span:last-child {
|
|
opacity: var(--opacity-deemphasized-strong);
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
.reusable-relay-masks {
|
|
gap: var(--space-small);
|
|
|
|
> button {
|
|
padding: var(--space-xsmall) var(--space-medium);
|
|
margin: 0;
|
|
align-items: center;
|
|
min-height: var(--size-item-large);
|
|
border-radius: var(--border-radius-circle);
|
|
border: 1px solid var(--border-color-deemphasized);
|
|
background-color: transparent;
|
|
|
|
&:hover {
|
|
background-color: var(--button-background-color-hover);
|
|
border-color: var(--border-color-selected);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* History swipe navigation animation */
|
|
|
|
#historySwipeAnimationContainer {
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#historySwipeAnimationPreviousArrow,
|
|
#historySwipeAnimationNextArrow {
|
|
--swipe-nav-icon-primary-color: AccentColorText;
|
|
--swipe-nav-icon-accent-color: AccentColor;
|
|
|
|
will-change: transform;
|
|
|
|
@media not (prefers-contrast) {
|
|
--swipe-nav-icon-primary-color: var(--color-accent-primary);
|
|
--swipe-nav-icon-accent-color: light-dark(white, black);
|
|
}
|
|
|
|
> svg {
|
|
margin: auto 0;
|
|
}
|
|
}
|
|
|
|
.swipe-nav-icon:-moz-locale-dir(rtl),
|
|
#historySwipeAnimationNextArrow {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.swipe-nav-icon-circle,
|
|
.swipe-nav-icon-circle-outline,
|
|
.swipe-nav-icon-arrow {
|
|
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.
|
|
*/
|
|
.swipe-nav-icon-circle {
|
|
fill: var(--swipe-nav-icon-accent-color);
|
|
stroke: var(--swipe-nav-icon-primary-color);
|
|
|
|
.will-navigate > & {
|
|
fill: var(--swipe-nav-icon-primary-color);
|
|
}
|
|
}
|
|
|
|
.swipe-nav-icon-circle-outline {
|
|
fill: var(--swipe-nav-icon-primary-color);
|
|
stroke: var(--swipe-nav-icon-primary-color);
|
|
transition: opacity 1s;
|
|
will-change: opacity; /* a workaround for bug 1804189 */
|
|
opacity: 0;
|
|
|
|
.will-navigate > & {
|
|
transition-delay: 0.2s;
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens -- to be addressed in 2033919 */
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
.swipe-nav-icon-arrow {
|
|
fill: var(--swipe-nav-icon-primary-color);
|
|
|
|
.will-navigate > & {
|
|
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);
|
|
|
|
.will-navigate > & {
|
|
fill: var(--swipe-nav-icon-accent-color);
|
|
}
|
|
}
|
|
|
|
.swipe-nav-icon-circle {
|
|
fill: var(--swipe-nav-icon-accent-color);
|
|
|
|
.will-navigate > & {
|
|
fill: var(--swipe-nav-icon-primary-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Picture-in-Picture panel */
|
|
|
|
#PictureInPicturePanel {
|
|
/* Panel variables will be tokenized in bug 2017979 */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
width: var(--menu-panel-width-wide);
|
|
font: caption;
|
|
}
|
|
|
|
#PictureInPicturePanelBody {
|
|
gap: var(--space-small);
|
|
padding: var(--space-small) var(--space-large);
|
|
}
|
|
|
|
#PictureInPicturePanelFooter {
|
|
margin: var(--space-small) var(--space-large) var(--space-large);
|
|
}
|
|
|
|
/* AI Window Toggle Button */
|
|
#ai-window-toggle {
|
|
list-style-image: url("chrome://branding/content/about-logo.svg");
|
|
border-radius: var(--border-radius-medium);
|
|
padding-inline-end: var(--toolbarbutton-padding-inner);
|
|
|
|
/* Toggle button should only have padding-inline-end if #PanelUI-button both visible and rendered next to it */
|
|
:root:not([aiwindow-first-run]) &:has(+ #PanelUI-button) {
|
|
padding: 0 var(--smartwindow-ai-toggle-padding, var(--space-xsmall));
|
|
}
|
|
|
|
> .toolbarbutton-icon {
|
|
padding: var(--toolbarbutton-padding-inner);
|
|
|
|
@media not -moz-pref("browser.nova.enabled") {
|
|
/* The design system does not have any inset box-shadow tokens. */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
box-shadow: 0 0 16px 4px var(--box-shadow-color-darker-layer-1) inset;
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
/* set default color for HCM */
|
|
--smart-window-toolbarbutton-color: var(--border-color-interactive-hover);
|
|
--toolbarbutton-background-color-hover: var(--background-color-box);
|
|
--toolbarbutton-background-color-active: var(--background-color-box);
|
|
--toolbarbutton-outline-color: var(--smart-window-toolbarbutton-color);
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
border: var(--border-width) solid var(--smart-window-toolbarbutton-color);
|
|
|
|
@media not (forced-colors) {
|
|
--smart-window-toolbarbutton-color: color-mix(in srgb, var(--color-violet-desaturated-50) 15%, transparent);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Smart Window toggle */
|
|
:root[ai-window] & {
|
|
list-style-image: url("chrome://browser/skin/smart-window-simplified.svg");
|
|
|
|
> .toolbarbutton-icon {
|
|
@media not -moz-pref("browser.nova.enabled") {
|
|
/* Smart Window icon has additional 2px padding per side, to be slightly smaller than Classic Window icon when used in Switcher */
|
|
padding: var(--toolbarbutton-padding-inner);
|
|
/* The design system does not have any inset box-shadow tokens. */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
box-shadow: 0 0 16px 4px var(--smartwindow-toggle-shadow-color) inset;
|
|
}
|
|
|
|
@media (not (forced-colors)) and -moz-pref("browser.nova.enabled") {
|
|
/* The design system does not have any outline width tokens. */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
outline-width: var(--toolbarbutton-padding-inner-compact);
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
box-shadow: 0 0 16px 4px var(--background-color-box) inset;
|
|
--toolbarbutton-background-color-hover: var(--background-color-box);
|
|
--toolbarbutton-background-color-active: var(--background-color-box);
|
|
--toolbarbutton-outline-color-hover: var(--smart-window-toolbarbutton-color);
|
|
--toolbarbutton-outline-color-active: light-dark(
|
|
color-mix(in srgb, var(--color-violet-desaturated-50) 30%, transparent),
|
|
var(--color-violet-desaturated-50)
|
|
);
|
|
--toolbarbutton-outline-color-selected: var(--smart-window-toolbarbutton-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#ai-window-switch-classic,
|
|
#ai-window-switch-ai {
|
|
--button-background-color-ghost-active: light-dark(
|
|
color-mix(in srgb, var(--color-violet-desaturated-60) 30%, transparent),
|
|
color-mix(in srgb, var(--color-violet-desaturated-40) 36%, transparent)
|
|
);
|
|
--button-background-color-ghost-hover: light-dark(
|
|
color-mix(in srgb, var(--color-violet-desaturated-60) 16%, transparent),
|
|
color-mix(in srgb, var(--color-violet-desaturated-40) 24%, transparent)
|
|
);
|
|
|
|
moz-badge {
|
|
margin-inline-start: var(--space-medium);
|
|
}
|
|
|
|
.toolbarbutton-icon {
|
|
margin-inline-end: var(--space-small);
|
|
width: var(--icon-size-medium);
|
|
height: var(--icon-size-medium);
|
|
}
|
|
|
|
.toolbarbutton-text {
|
|
padding-inline-start: 0;
|
|
}
|
|
|
|
&::after {
|
|
content: url("chrome://global/skin/icons/check.svg");
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
width: var(--icon-size);
|
|
height: var(--icon-size);
|
|
margin-inline-start: auto;
|
|
}
|
|
|
|
@media not -moz-pref("browser.nova.enabled") {
|
|
.ai-window-switch-description {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
/* TODO: replace with token when available - Bug 2033070 */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
border-radius: 12px;
|
|
|
|
.toolbarbutton-icon {
|
|
width: var(--icon-size-large);
|
|
height: var(--icon-size-large);
|
|
}
|
|
|
|
.toolbarbutton-text {
|
|
padding-inline-start: var(--space-small);
|
|
text-align: start;
|
|
}
|
|
|
|
.ai-window-switch-description {
|
|
color: var(--text-color-deemphasized);
|
|
font-size: var(--font-size-small);
|
|
}
|
|
}
|
|
}
|
|
|
|
#ai-window-switch-classic {
|
|
list-style-image: url("chrome://branding/content/about-logo.svg");
|
|
|
|
:root[ai-window] &::after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#ai-window-switch-ai {
|
|
list-style-image: url("chrome://browser/skin/smart-window-simplified.svg");
|
|
|
|
:root:not([ai-window]) &::after {
|
|
display: none;
|
|
}
|
|
|
|
@media not -moz-pref("browser.nova.enabled") {
|
|
> .toolbarbutton-icon {
|
|
/* Smart Window icon has additional 0.125rem padding per side, to be slightly smaller than Classic Window icon when used in Switcher */
|
|
padding: var(--space-xxsmall);
|
|
}
|
|
}
|
|
}
|
|
|
|
#appMenu-new-ai-window-button > moz-badge {
|
|
margin-inline-start: auto;
|
|
}
|
|
|
|
/* AI window: hide nav bar on new window or firstrun */
|
|
:root[ai-window][aiwindow-new-window],
|
|
:root[ai-window][aiwindow-first-run] {
|
|
#nav-bar:not(.browser-titlebar) {
|
|
height: 0;
|
|
min-height: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
#urlbar-container,
|
|
#nav-bar-customization-target > *:not(#sidebar-button),
|
|
#nav-bar-overflow-button {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
/* Show back/forward buttons when navigating back to the Smart Window from a page */
|
|
:root[ai-window][aiwindow-new-window][aiwindow-has-nav-forward] {
|
|
#nav-bar:not(.browser-titlebar) {
|
|
height: unset;
|
|
min-height: unset;
|
|
visibility: visible;
|
|
}
|
|
|
|
#nav-bar-customization-target > #back-button,
|
|
#nav-bar-customization-target > #forward-button {
|
|
visibility: visible;
|
|
-moz-user-focus: normal;
|
|
}
|
|
}
|
|
|
|
/* immersive view styles exclusive for first run (nav-bar/urlbar hiding is
|
|
shared with new-window above) */
|
|
:root[ai-window][aiwindow-first-run] {
|
|
#sidebar-button,
|
|
#PanelUI-button {
|
|
display: none;
|
|
}
|
|
|
|
#TabsToolbar > .toolbar-items {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens -- to be addressed in 2033919 */
|
|
opacity: 0.2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@media -moz-pref("sidebar.verticalTabs") {
|
|
#sidebar-container {
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens -- to be addressed in 2033919 */
|
|
opacity: 0.2;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Bookmarks roots menu-items */
|
|
|
|
#BMB_bookmarksToolbar,
|
|
#bookmarksToolbarFolderMenu {
|
|
--menuitem-icon: url("chrome://browser/skin/places/bookmarksToolbar.svg");
|
|
}
|