browser/themes/shared/sidebar.css
Propagation: 13.33%
Back to Home/* 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;
}
/* stylelint-disable-next-line media-query-no-invalid */
@media -moz-pref("sidebar.revamp") {
min-width: 200px;
width: 340px;
padding-block-end: var(--space-small);
position: relative;
z-index: var(--browser-area-z-index-sidebar);
}
&[sidebarcommand="viewGenaiChatSidebar"] {
min-width: 400px;
}
&[sidebarcommand="viewCPMSidebar"] {
min-width: 260px;
}
}
#sidebar-main,
#sidebar-box {
text-shadow: none;
max-width: 75vw;
/* stylelint-disable-next-line media-query-no-invalid */
@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;
/* stylelint-disable-next-line media-query-no-invalid */
@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) {
--splitter-width: 2px;
}
min-width: 1px;
width: var(--splitter-width);
appearance: none;
border: none;
transition: background-color 0.5s ease-in-out;
/* 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-main[sidebar-positionend] + & {
margin-inline: 0 calc(-1 * var(--splitter-width));
}
}
/* stylelint-disable-next-line media-query-no-invalid */
@media -moz-pref("sidebar.revamp") {
background-color: transparent;
&:hover {
background-color: var(--focus-outline-color);
}
}
/* stylelint-disable-next-line media-query-no-invalid */
@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;
}
}
}
/* stylelint-disable-next-line media-query-no-invalid */
@media -moz-pref("sidebar.revamp") {
#sidebar-splitter {
width: var(--space-medium);
border-inline: calc((var(--space-medium) - var(--splitter-width)) / 2) solid transparent;
background-clip: padding-box;
margin-inline: 0;
}
}
#sidebar-launcher-splitter {
/* stylelint-disable-next-line media-query-no-invalid */
@media not -moz-pref("sidebar.verticalTabs") {
display: none;
}
}
#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-hover-background);
}
#sidebar-switcher-target:hover:active,
#sidebar-switcher-target.active {
background-color: var(--toolbarbutton-active-background);
}
#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-main,
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-main {
/* Prevent overflow during sidebar animation when the sidebar is reordered */
overflow: clip;
&[sidebar-ongoing-animations] > sidebar-main::part(overflow-button) {
display: none;
}
}
/* Expand on hover */
:root[sidebar-expand-on-hover] {
#sidebar-main {
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-textcolor);
/* 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: linear-gradient(var(--toolbox-bgcolor));
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-textcolor);
background-color: var(--toolbox-bgcolor);
&:-moz-window-inactive {
color: var(--toolbox-textcolor-inactive);
background-color: var(--toolbox-bgcolor-inactive);
}
}
&[sidebar-positionend] {
inset-inline-start: unset;
inset-inline-end: 0;
}
}
#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 {
&: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);
}
}
}
#sidebar-box {
&: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);
}
}
}
}
/* stylelint-disable-next-line media-query-no-invalid */
@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 {
--sidebar-border-color: light-dark(rgb(207, 207, 216), rgb(82, 82, 94));
> #sidebar {
box-shadow: none;
margin-block-start: 1px;
border: 0.5px solid var(--sidebar-border-color);
}
}
}
/* History Menu */
#sidebar-history-sort-by-heading {
margin-block: var(--space-xsmall);
}
#sidebar-history-clear {
padding: var(--menuitem-padding);
&::before {
content: unset;
}
}