606 lines
18 KiB
CSS
606 lines
18 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/. */
|
|
|
|
#sidebar-box {
|
|
max-width: 75vw;
|
|
min-width: 14em;
|
|
width: 18em;
|
|
|
|
:root[lwt-sidebar="light"] & {
|
|
color-scheme: light;
|
|
}
|
|
:root[lwt-sidebar="dark"] & {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
@media -moz-pref("sidebar.revamp") {
|
|
min-width: var(--size-layout-small);
|
|
width: 340px;
|
|
padding-block-end: var(--space-small);
|
|
position: relative;
|
|
z-index: var(--browser-area-z-index-sidebar);
|
|
|
|
:root[uidensity="compact"] & {
|
|
width: 280px;
|
|
}
|
|
}
|
|
|
|
&[sidebarcommand="viewGenaiChatSidebar"] {
|
|
min-width: 400px;
|
|
}
|
|
|
|
&[sidebarcommand="viewCPMSidebar"] {
|
|
min-width: 260px;
|
|
}
|
|
}
|
|
|
|
#sidebar-container,
|
|
#sidebar-box {
|
|
text-shadow: none;
|
|
max-width: 75vw;
|
|
|
|
@media not -moz-pref("sidebar.revamp") {
|
|
background-color: var(--sidebar-background-color);
|
|
color: var(--sidebar-text-color);
|
|
/* Note that with sidebar.revamp we apply the --sidebar-background-color to the
|
|
* #sidebar browser. We still need the #sidebar-box background to match the
|
|
* toolbar tho - this background is set on the #browser ancestor rather than here */
|
|
}
|
|
}
|
|
|
|
.sidebar-browser-stack > .dialogStack > .dialogTemplate > .dialogBox {
|
|
/* Not enough horizontal space, remove the margin */
|
|
margin-inline: 0;
|
|
}
|
|
|
|
#sidebar-header {
|
|
font-size: 1.333em;
|
|
padding: 8px;
|
|
border-bottom: 1px solid var(--sidebar-border-color);
|
|
}
|
|
|
|
#sidebar-spacer {
|
|
/* To ensure the button doesn't expand unnecessarily for short labels, the
|
|
spacer should significantly out-flex the button. */
|
|
flex: 1000 1000;
|
|
}
|
|
|
|
#sidebar {
|
|
flex: 1;
|
|
|
|
@media -moz-pref("sidebar.revamp") {
|
|
border-radius: var(--border-radius-medium);
|
|
box-shadow: var(--content-area-shadow);
|
|
outline: 0.5px solid var(--sidebar-border-color);
|
|
background-color: var(--sidebar-background-color);
|
|
color: var(--sidebar-text-color);
|
|
}
|
|
}
|
|
|
|
.sidebar-splitter {
|
|
/* Ensure the splitter is painted on top of the sidebar box it overlaps.
|
|
Otherwise, the user may be unable to drag the splitter to resize the sidebar. */
|
|
position: relative;
|
|
z-index: var(--browser-area-z-index-sidebar-splitter);
|
|
--splitter-width: 4px;
|
|
@media (-moz-overlay-scrollbars) and (not -moz-pref("browser.nova.enabled")) {
|
|
--splitter-width: 2px;
|
|
}
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
border-radius: var(--border-radius-large);
|
|
}
|
|
|
|
min-width: 1px;
|
|
width: var(--splitter-width);
|
|
appearance: none;
|
|
border: none;
|
|
transition: background-color 0.5s ease-in-out;
|
|
margin-inline: 0;
|
|
|
|
@media -moz-pref("sidebar.revamp") {
|
|
background-color: transparent;
|
|
&:hover {
|
|
background-color: var(--focus-outline-color);
|
|
}
|
|
}
|
|
|
|
@media not -moz-pref("sidebar.revamp") {
|
|
border: 0 solid;
|
|
border-color: var(--sidebar-border-color);
|
|
border-inline-end-width: 1px;
|
|
#sidebar-box[sidebar-positionend] + & {
|
|
border-inline-width: 1px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
#sidebar-splitter {
|
|
-moz-user-focus: normal;
|
|
margin-block-end: 1.5px; /* Make space for the 'medium'/3px outline to show */
|
|
|
|
&:focus-visible {
|
|
outline: auto;
|
|
}
|
|
@media -moz-pref("sidebar.revamp") {
|
|
width: var(--space-medium);
|
|
border-inline: calc((var(--space-medium) - var(--splitter-width)) / 2) solid transparent;
|
|
background-clip: padding-box;
|
|
/* Adjust to better align with the bottom of the sidebar-box */
|
|
margin-block-end: var(--space-small);
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
width: var(--splitter-width);
|
|
border-inline: none;
|
|
}
|
|
}
|
|
|
|
#sidebar-launcher-splitter {
|
|
/* We don't let the splitter overlap the sidebar on Linux since the
|
|
* scrollbar is too narrow. */
|
|
@media not (-moz-platform: linux) {
|
|
margin-inline-start: calc(-1 * var(--splitter-width));
|
|
|
|
#sidebar-container[sidebar-positionend] + & {
|
|
margin-inline: 0 calc(-1 * var(--splitter-width));
|
|
}
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
/* Pull the splitter fully over sidebar-main so sidebar-main and sidebar-box
|
|
* sit flush. The factor 2 absorbs both the flexbox gap (--chrome-window-gap)
|
|
* and the splitter's own width. */
|
|
margin-inline-start: calc(-2 * var(--splitter-width));
|
|
|
|
#sidebar-container[sidebar-positionend] + & {
|
|
margin-inline: 0 calc(-2 * var(--splitter-width));
|
|
}
|
|
}
|
|
|
|
@media not -moz-pref("sidebar.verticalTabs") {
|
|
display: none;
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
/* The splitter already has a negative margin-inline-start that makes it
|
|
* overlap the sidebar (see above). Cancel the gap on the tabbox side too so
|
|
* the splitter sits entirely within the gap rather than adding to it. */
|
|
margin-inline-end: calc(-1 * var(--chrome-window-gap));
|
|
|
|
#sidebar-container[sidebar-positionend] + & {
|
|
margin-inline-start: calc(-1 * var(--chrome-window-gap));
|
|
}
|
|
}
|
|
}
|
|
|
|
#sidebar-throbber[loading="true"] {
|
|
list-style-image: url("chrome://global/skin/icons/loading.svg");
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
}
|
|
|
|
#sidebar-title {
|
|
margin: 0;
|
|
padding: 0;
|
|
padding-inline: 8px 4px;
|
|
flex: 1;
|
|
}
|
|
|
|
#sidebar-switcher-arrow {
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
#sidebar-switcher-arrow {
|
|
list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg);
|
|
width: var(--icon-size-xsmall);
|
|
height: var(--icon-size-xsmall);
|
|
}
|
|
|
|
#sidebar-switcher-target {
|
|
appearance: none;
|
|
color: inherit;
|
|
margin-inline-end: 4px;
|
|
border-radius: var(--toolbarbutton-border-radius);
|
|
border: 1px solid transparent;
|
|
padding: 2px 4px;
|
|
flex: 1;
|
|
}
|
|
|
|
#sidebar-switcher-target:hover {
|
|
background-color: var(--toolbarbutton-background-color-hover);
|
|
}
|
|
|
|
#sidebar-switcher-target:hover:active,
|
|
#sidebar-switcher-target.active {
|
|
background-color: var(--toolbarbutton-background-color-active);
|
|
}
|
|
|
|
#sidebar-switcher-target:focus-visible,
|
|
#sidebar-close:focus-visible {
|
|
outline: var(--focus-outline);
|
|
outline-offset: 0;
|
|
}
|
|
|
|
#sidebarMenu-popup > menuitem {
|
|
min-width: 16em;
|
|
}
|
|
|
|
menuseparator + #sidebar-extensions-separator {
|
|
display: none;
|
|
}
|
|
|
|
#sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
|
|
list-style-image: url(chrome://browser/skin/bookmark.svg);
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
#sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
|
|
list-style-image: url(chrome://browser/skin/history.svg);
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
#sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
|
|
list-style-image: url(chrome://browser/skin/synced-tabs.svg);
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* WebExtension Sidebars */
|
|
#sidebar-box[sidebarcommand$="-sidebar-action"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
|
|
list-style-image: var(--webextension-menuitem-image, inherit);
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.webextension-menuitem {
|
|
--menuitem-icon: var(--webextension-menuitem-image);
|
|
}
|
|
|
|
/* Sidebar animation */
|
|
|
|
#sidebar-container,
|
|
sidebar-main,
|
|
#sidebar-box,
|
|
#sidebar-splitter,
|
|
#tabbrowser-tabbox {
|
|
transform-origin: 0 0;
|
|
/* will-change would cause us to be considered animated unconditionally, see
|
|
* bug 1930674 */
|
|
translate: 0;
|
|
}
|
|
|
|
#sidebar-container {
|
|
/* Prevent overflow during sidebar animation when the sidebar is reordered */
|
|
overflow: clip;
|
|
|
|
&[sidebar-ongoing-animations] > sidebar-main::part(overflow-button) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Drive the sidebar-main shadow DOM's launcher button inline padding from the
|
|
* document's uidensity. Custom properties inherit across shadow boundaries,
|
|
* so this value is consumed by sidebar-main.css. Note that we round the
|
|
* padding to the nearest 0.5px, so that the combined start+end padding will be
|
|
* a whole number of CSS pixels. */
|
|
:root {
|
|
--sidebar-launcher-button-padding-inline: round(var(--space-medium), 0.5px);
|
|
|
|
&[uidensity="compact"] {
|
|
/* 32px icon button + 2 * 2px = 36px collapsed sidebar. */
|
|
--sidebar-launcher-button-padding-inline: 2px;
|
|
|
|
--sidebar-expanded-launcher-width: 240px;
|
|
|
|
/* 28px icon button + 2 * 7px = 42px collapsed sidebar. */
|
|
@media -moz-pref("sidebar.verticalTabs") {
|
|
--sidebar-launcher-button-padding-inline: 7px;
|
|
}
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") and (not -moz-pref("sidebar.verticalTabs")) {
|
|
--sidebar-launcher-button-padding-inline: 4px;
|
|
}
|
|
}
|
|
|
|
/* Expand on hover */
|
|
|
|
:root[sidebar-expand-on-hover] {
|
|
#sidebar-container {
|
|
border-radius: inherit;
|
|
background-color: inherit;
|
|
position: relative;
|
|
inset: 0;
|
|
inset-inline-end: unset;
|
|
|
|
/* We only want to apply these styles in two scenarios:
|
|
* When the sidebar is expanded AND hovered
|
|
* When the sidebar is in the process of moving from expanded to collapsed
|
|
*/
|
|
&[sidebar-launcher-expanded],
|
|
&[sidebar-ongoing-animations]:not([sidebar-launcher-expanded]) {
|
|
z-index: var(--browser-area-z-index-sidebar-expand-on-hover);
|
|
position: absolute;
|
|
color: var(--toolbox-text-color);
|
|
/* With Windows Mica, the toolbox background is not guaranteed to be
|
|
* opaque. Make sure there's some opaque backdrop that matches our color
|
|
* scheme. These colors match the "transparency effects disabled" mica
|
|
* backdrop on Windows 11, which is as good as we can make it. */
|
|
background-image: image(var(--toolbox-background-color));
|
|
background-color: light-dark(#e8e8e8, #202020);
|
|
|
|
&:not([sidebar-positionend]) {
|
|
border-inline-end: 0.01px solid var(--sidebar-border-color);
|
|
}
|
|
|
|
&[sidebar-positionend] {
|
|
border-inline-start: 0.01px solid var(--sidebar-border-color);
|
|
}
|
|
}
|
|
|
|
:root[lwtheme] & {
|
|
border-radius: unset;
|
|
border-inline: unset;
|
|
color: var(--toolbox-text-color);
|
|
background-color: var(--toolbox-background-color);
|
|
|
|
&:-moz-window-inactive {
|
|
color: var(--toolbox-text-color-inactive);
|
|
background-color: var(--toolbox-background-color-inactive);
|
|
}
|
|
}
|
|
|
|
&[sidebar-positionend] {
|
|
inset-inline-start: unset;
|
|
inset-inline-end: 0;
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
:root[uidensity="compact"] & {
|
|
--chrome-window-gap: 2px;
|
|
margin-block-start: var(--chrome-window-gap);
|
|
}
|
|
border-radius: var(--chrome-block-radius);
|
|
background-color: var(--toolbar-background-color);
|
|
position: absolute;
|
|
inset-block-end: var(--chrome-window-gap);
|
|
inset-inline-start: var(--chrome-window-gap);
|
|
|
|
/* stylelint-disable max-nesting-depth */
|
|
&[sidebar-launcher-expanded],
|
|
&[sidebar-ongoing-animations]:not([sidebar-launcher-expanded]) {
|
|
background-image: none;
|
|
background-color: var(--toolbar-background-color);
|
|
|
|
&:not([sidebar-positionend]) {
|
|
border-inline-end: 1px solid var(--chrome-content-separator-color);
|
|
}
|
|
&[sidebar-positionend] {
|
|
border-inline-start: 1px solid var(--chrome-content-separator-color);
|
|
}
|
|
}
|
|
/* stylelint-enable max-nesting-depth */
|
|
|
|
&[sidebar-positionend] {
|
|
inset-inline-start: unset;
|
|
inset-inline-end: var(--chrome-window-gap);
|
|
}
|
|
}
|
|
}
|
|
|
|
#sidebar-launcher-splitter[sidebar-launcher-expanded] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* We add margin to compensate for the launcher width to the element next to it.
|
|
The element next to it can be the sidebar box or the tabbox,
|
|
depending on whether the sidebar box is expanded */
|
|
#tabbrowser-tabbox {
|
|
@media not -moz-pref("browser.nova.enabled") {
|
|
&:not([sidebar-positionend]) {
|
|
&:not([sidebar-panel-open]) {
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
&[sidebar-launcher-expanded][sidebar-launcher-hovered]:not([sidebar-panel-open]),
|
|
&[sidebar-ongoing-animations]:not([sidebar-launcher-expanded], [sidebar-panel-open]) {
|
|
margin-inline-start: var(--sidebar-launcher-collapsed-width);
|
|
}
|
|
}
|
|
|
|
&[sidebar-positionend] {
|
|
&:not([sidebar-panel-open]) {
|
|
margin-inline-end: 0;
|
|
}
|
|
|
|
&[sidebar-launcher-expanded][sidebar-launcher-hovered]:not([sidebar-panel-open]),
|
|
&[sidebar-ongoing-animations]:not([sidebar-panel-open], [sidebar-launcher-expanded]) {
|
|
margin-inline-end: var(--sidebar-launcher-collapsed-width);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
&:not([sidebar-positionend], [sidebar-panel-open]) {
|
|
margin-inline-start: calc(var(--sidebar-launcher-collapsed-width) + var(--chrome-window-gap));
|
|
}
|
|
&[sidebar-positionend]:not([sidebar-panel-open]) {
|
|
margin-inline-end: calc(var(--sidebar-launcher-collapsed-width) + var(--chrome-window-gap));
|
|
}
|
|
}
|
|
}
|
|
|
|
#sidebar-box {
|
|
@media not -moz-pref("browser.nova.enabled") {
|
|
&:not([sidebar-positionend]) {
|
|
&[sidebar-panel-open] {
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
&[sidebar-panel-open][sidebar-launcher-hovered][sidebar-launcher-expanded],
|
|
&[sidebar-ongoing-animations][sidebar-panel-open] {
|
|
margin-inline-start: var(--sidebar-launcher-collapsed-width);
|
|
}
|
|
}
|
|
|
|
&[sidebar-positionend] {
|
|
&[sidebar-panel-open] {
|
|
margin-inline-end: 0;
|
|
}
|
|
|
|
&[sidebar-panel-open][sidebar-launcher-hovered][sidebar-launcher-expanded],
|
|
&[sidebar-ongoing-animations][sidebar-panel-open] {
|
|
margin-inline-end: var(--sidebar-launcher-collapsed-width);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
:root[uidensity="compact"] & {
|
|
--chrome-window-gap: 2px;
|
|
}
|
|
&:not([sidebar-positionend])[sidebar-panel-open] {
|
|
margin-inline-start: calc(var(--sidebar-launcher-collapsed-width) + var(--chrome-window-gap));
|
|
}
|
|
&[sidebar-positionend][sidebar-panel-open] {
|
|
margin-inline-end: calc(var(--sidebar-launcher-collapsed-width) + var(--chrome-window-gap));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media -moz-pref("sidebar.visibility", "expand-on-hover") {
|
|
/* We need these rules to apply at all times when the sidebar.visibility
|
|
pref is set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
|
|
has been added to root. There are certain scenarios when that attribute is temporarily
|
|
removed from root such as when toggling the sidebar to expand with the toolbar button. */
|
|
#sidebar {
|
|
box-shadow: none;
|
|
margin-block-start: 1px;
|
|
outline-offset: -0.1px;
|
|
}
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
#sidebar-box {
|
|
background-color: var(--sidebar-background-color);
|
|
color: var(--sidebar-text-color);
|
|
padding-block-end: 0;
|
|
border-inline-start: none;
|
|
}
|
|
|
|
#sidebar {
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
|
|
/* Center the splitter in a 6px gap between sidebar-box and the content area.
|
|
* The flex gap on #browser is --chrome-window-gap (4px); the negative
|
|
* margin-inline absorbs 3px of that gap on each side, leaving 1px of empty
|
|
* space + 4px splitter + 1px of empty space = 6px total. When the closest
|
|
* split-view panel is selected, the content-side margin is widened to 3px
|
|
* (2px for the panel's outline + 1px clear) — see the :has() rules below. */
|
|
#sidebar-splitter {
|
|
width: var(--chrome-window-gap);
|
|
border-inline: none;
|
|
margin-inline: calc(-1 * var(--chrome-window-gap) + 1px);
|
|
|
|
:root[uidensity="compact"] & {
|
|
width: 2px;
|
|
margin-inline: -2px;
|
|
}
|
|
}
|
|
|
|
/* When no panel is open, the launcher splitter sits between sidebar-main and
|
|
* the content area. Match the in-gap layout of #sidebar-splitter so the gap
|
|
* between sidebar-main and the content area matches the sidebar-box case. */
|
|
#sidebar-container:not([sidebar-panel-open]) + #sidebar-launcher-splitter {
|
|
margin-inline: calc(-1 * var(--chrome-window-gap) + 1px);
|
|
|
|
:root[uidensity="compact"] & {
|
|
width: 2px;
|
|
margin-inline: -2px;
|
|
}
|
|
}
|
|
|
|
/* When the closest split-view panel is selected, its outline extends into
|
|
* the splitter's content-side margin. Widen that margin to 3px (2px outline
|
|
* + 1px clear) so the splitter never touches the outline. The "closest"
|
|
* panel is column-0 when the sidebar is on the inline-start side, and
|
|
* column-1 when the sidebar is on the inline-end side. */
|
|
:root:has(#tabbrowser-tabpanels[splitview] .split-view-panel[column="0"].deck-selected) #sidebar-box:not([sidebar-positionend]) + #sidebar-splitter,
|
|
:root:has(#tabbrowser-tabpanels[splitview] .split-view-panel[column="0"].deck-selected)
|
|
#sidebar-container:not([sidebar-panel-open]):not([sidebar-positionend])
|
|
+ #sidebar-launcher-splitter {
|
|
margin-inline-end: calc(-1 * var(--chrome-window-gap) + 3px);
|
|
}
|
|
|
|
:root:has(#tabbrowser-tabpanels[splitview] .split-view-panel[column="1"].deck-selected) #sidebar-box[sidebar-positionend] + #sidebar-splitter,
|
|
:root:has(#tabbrowser-tabpanels[splitview] .split-view-panel[column="1"].deck-selected)
|
|
#sidebar-container[sidebar-positionend]:not([sidebar-panel-open])
|
|
+ #sidebar-launcher-splitter {
|
|
margin-inline-start: calc(-1 * var(--chrome-window-gap) + 3px);
|
|
}
|
|
|
|
/* When a panel is open, square the corners where sidebar-main and sidebar-box
|
|
* meet so they read as one continuous surface. */
|
|
#sidebar-container[sidebar-panel-open] {
|
|
&:not([sidebar-positionend]) {
|
|
border-start-end-radius: 0;
|
|
border-end-end-radius: 0;
|
|
}
|
|
|
|
&[sidebar-positionend] {
|
|
border-start-start-radius: 0;
|
|
border-end-start-radius: 0;
|
|
}
|
|
}
|
|
|
|
/* Straighten out the leading edge of the panel, if it's adjacent to the
|
|
* launcher + splitter. */
|
|
#sidebar-container:not([hidden]) ~ #sidebar-box[sidebar-panel-open] {
|
|
&:not([sidebar-positionend]) {
|
|
border-start-start-radius: 0;
|
|
border-end-start-radius: 0;
|
|
}
|
|
|
|
&[sidebar-positionend] {
|
|
border-start-end-radius: 0;
|
|
border-end-end-radius: 0;
|
|
}
|
|
}
|
|
|
|
@media not -moz-pref("sidebar.verticalTabs") {
|
|
#sidebar-box[sidebar-panel-open]:not([sidebar-positionend]) {
|
|
margin-inline-start: calc(-1 * var(--chrome-window-gap));
|
|
}
|
|
|
|
#sidebar-box[sidebar-panel-open][sidebar-positionend] {
|
|
margin-inline-end: calc(-1 * var(--chrome-window-gap));
|
|
}
|
|
}
|
|
}
|
|
|
|
/* History Menu */
|
|
#sidebar-history-clear,
|
|
#sidebar-history-sort-by-heading {
|
|
padding: var(--menuitem-padding);
|
|
&::before {
|
|
content: unset;
|
|
}
|
|
> .menu-icon {
|
|
display: none;
|
|
}
|
|
}
|