Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
/* Colors variables */
:root {
--spaces-bg-color: #e8e8e8;
--spaces-bg-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.05) 100%);
--spaces-button-text-color: currentColor;
--spaces-button-active-text-color: var(--button-primary-text-color);
--spaces-button-active-bg-color: var(--button-primary-background-color);
--spaces-button-badge-text-color: var(--color-white);
--spaces-button-badge-bg-color: var(--color-red-70);
--spaces-button-opacity: 1;
--spaces-border-color: color-mix(in srgb, var(--spaces-bg-color) 85%, black);
&:-moz-window-inactive {
--spaces-button-opacity: 0.7;
--spaces-bg-image: none;
}
@media (prefers-color-scheme: dark) {
--spaces-bg-color: #252525;
}
@media (prefers-contrast) {
&:not([lwtheme]) {
--spaces-bg-color: -moz-Dialog;
--spaces-bg-image: none;
--spaces-border-color: var(--splitter-color);
}
}
/* Density variations */
--messenger-body-border: 1px;
--spaces-icon-size: 20px;
--spaces-padding: 7px;
--spaces-gap: 15px;
--spaces-container-gap: 15px;
--spaces-button-padding: 5px;
--spaces-pinned-button-margin: 5px;
--spaces-button-badge-padding: 1px 6px;
--spaces-button-badge-font: 0.9rem;
--spaces-menuitem-current-indicator-size: 3px;
--spaces-total-width: calc(2 * var(--spaces-padding) + var(--spaces-icon-size) + 2 * var(--spaces-button-padding) + var(--messenger-body-border));
&[uidensity="compact"] {
--spaces-icon-size: 16px;
--spaces-padding: 6px;
--spaces-gap: 9px;
--spaces-container-gap: 9px;
--spaces-button-padding: 4px;
--spaces-pinned-button-margin: 4px;
--spaces-button-badge-padding: 1px 4px;
--spaces-button-badge-font: 0.85rem;
--spaces-menuitem-current-indicator-size: 3px;
}
&[uidensity="touch"] {
--spaces-icon-size: 24px;
--spaces-padding: 9px;
--spaces-gap: 18px;
--spaces-container-gap: 18px;
--spaces-button-padding: 6px;
--spaces-pinned-button-margin: 6px;
--spaces-button-badge-padding: 3px 8px;
--spaces-button-badge-font: 1rem;
--spaces-menuitem-current-indicator-size: 4px;
}
/* DPI variations */
@media (min-resolution: 1.45dppx) and (max-resolution: 1.95dppx) {
--messenger-body-border: 0px; /* Keep the px unit. */
}
}
/* The spaces toolbar is using fixed positioning instead of being the left most
* element in the window, because the toolbox has to touch both sides of the
* window to properly draw client-side window decorations on GTK. To account for
* the spaces toolbar having fixed positioning, the window contents are moved to
* the right by its width. */
.spaces-toolbar:not([hidden]) {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--spaces-gap);
background-color: var(--spaces-bg-color);
background-image: var(--spaces-bg-image);
border-inline-end: 1px solid var(--spaces-border-color);
position: fixed;
inset-inline-start: 0;
inset-block: 0;
padding: var(--spaces-padding);
z-index: 2;
& ~ #messengerBody,
:root:not(.customizingUnifiedToolbar) & ~ #navigation-toolbox #titlebar {
/* Move the window content in by the width of the spaces toolbar */
margin-inline-start: var(--spaces-total-width);
}
:root:not(.customizingUnifiedToolbar) & ~ #navigation-toolbox #unifiedToolbarContainer {
width: calc(100vw - var(--spaces-total-width));
}
}
.spaces-toolbar-container {
display: flex;
flex-direction: column;
align-items: start;
gap: var(--spaces-container-gap);
}
.spaces-toolbar-button {
position: relative;
height: auto;
min-width: auto;
margin: 0;
padding: var(--spaces-button-padding);
line-height: 0; /* We never show text in these buttons */
border: none;
background-color: transparent;
opacity: var(--spaces-button-opacity);
color: var(--spaces-button-text-color);
outline: none;
&:focus-visible:not(:hover) {
outline: 2px solid var(--selected-item-color);
}
&.current {
&:focus-visible:not(:hover) {
outline-offset: 2px;
}
&,
&:hover {
background-color: var(--spaces-button-active-bg-color);
color: var(--spaces-button-active-text-color);
}
}
&:hover:not(.current) {
background-color: color-mix(in srgb, currentColor 10%, transparent);
@media (prefers-contrast) {
background-color: var(--spaces-button-active-bg-color);
color: var(--spaces-button-active-text-color);
}
}
&:is(:not([disabled])):hover:active {
background-color: var(--spaces-button-active-bg-color);
color: var(--spaces-button-active-text-color);
}
& > img {
width: var(--spaces-icon-size);
height: var(--spaces-icon-size);
}
}
@media (prefers-reduced-motion: no-preference) {
.spaces-toolbar {
transition: background-color 280ms ease;
}
.spaces-toolbar-button {
transition: background-color 280ms ease, opacity 280ms ease, color 280ms;
& > img {
transition: fill 280ms ease, stroke 280ms ease, opacity 280ms ease;
}
}
.spaces-toolbar-pinned-button {
transition: background-color 280ms ease, box-shadow 280ms ease;
}
}
#spacesAccentPlaceholder {
background-color: var(--spaces-button-active-bg-color);
color: var(--spaces-button-active-text-color);
}
.spaces-popup-menuitem > .menu-iconic-left {
position: relative;
}
.spaces-popup-menuitem.current > .menu-iconic-left:before {
content: '';
display: block;
position: absolute;
inset-block: 0;
inset-inline-start: calc(var(--spaces-menuitem-current-indicator-size) * -1.75);
width: var(--spaces-menuitem-current-indicator-size);
border-radius: 2px;
background-color: var(--spaces-button-active-bg-color);
}
.spaces-toolbar-button > img,
.spaces-toolbar-statusbar-button > img,
.spaces-toolbar-pinned-button > img,
.spaces-popup-menuitem image {
-moz-context-properties: fill, stroke, stroke-opacity;
fill: color-mix(in srgb, currentColor 20%, transparent);
stroke: currentColor;
}
.spaces-toolbar-statusbar-button {
min-width: auto;
min-height: auto;
padding-inline: 2px;
margin-inline: 3px 0 !important;
line-height: 0;
background: none;
color: inherit;
&:is(:not([disabled])):hover {
background: none;
border: none;
}
}
#spacesPinnedButton {
margin-inline-start: var(--spaces-pinned-button-margin);
list-style-image: var(--icon-spaces-menu);
min-width: auto;
& .toolbarbutton-text,
&[type="menu"] > .toolbarbutton-menu-dropmarker {
display: none;
}
}
img {
#mailButton & {
content: var(--spaces-icon-mail);
}
#addressBookButton & {
content: var(--spaces-icon-address-book);
}
#calendarButton & {
content: var(--spaces-icon-calendar);
}
#tasksButton & {
content: var(--spaces-icon-tasks);
}
#chatButton & {
content: var(--spaces-icon-chat);
}
#settingsButton & {
content: var(--spaces-icon-settings);
}
#collapseButton & {
content: var(--spaces-icon-collapse);
}
#spacesToolbarAddonsOverflowButton & {
content: var(--spaces-icon-overflow);
}
#spacesToolbarReveal & {
height: 16px;
width: 16px;
}
}
#spacesPopupButtonMail {
list-style-image: var(--icon-mail);
}
#spacesPopupButtonAddressBook {
list-style-image: var(--icon-address-book);
}
#spacesPopupButtonCalendar {
list-style-image: var(--icon-calendar);
}
#spacesPopupButtonTasks {
list-style-image: var(--icon-tasks);
}
#spacesPopupButtonChat {
list-style-image: var(--icon-chat);
}
#spacesPopupButtonSettings {
list-style-image: var(--icon-settings);
}
#spacesPopupButtonReveal {
list-style-image: var(--icon-collapse);
}
#chatButton > img,
#spacesPopupButtonChat image {
stroke-opacity: 0;
}
#collapseButton:-moz-locale-dir(rtl) img,
#spacesToolbarReveal img,
#spacesPopupButtonReveal image {
transform: scaleX(-1);
}
#spacesToolbarReveal:-moz-locale-dir(rtl) img,
#spacesPopupButtonReveal:-moz-locale-dir(rtl) image {
transform: none;
}
/* Add-ons section */
#spacesToolbarAddonsContainer {
flex: 1 1 0;
min-height: 0;
}
.spaces-badge-container {
display: none;
position: absolute;
inset-inline-end: -3px;
inset-block-start: -2px;
padding: var(--spaces-button-badge-padding);
font-weight: 600;
font-size: var(--spaces-button-badge-font);
border-radius: 12px;
background-color: var(--spaces-button-badge-bg-color);
color: var(--spaces-button-badge-text-color);
line-height: 1em;
z-index: 1;
&:-moz-window-inactive {
background-color: color-mix(in srgb, var(--spaces-button-badge-bg-color) 50%, black);
}
}
.has-badge {
& .spaces-badge-container {
display: block;
}
&:not([open="true"]) > .toolbarbutton-badge-stack > .toolbarbutton-badge {
display: block;
box-shadow: none;
box-sizing: content-box;
margin: -2px -3px 0 !important;
min-width: 6px;
height: 6px;
width: 6px;
padding: 0;
background: var(--spaces-button-badge-bg-color);
border: 2px solid var(--lwt-accent-color-inactive, var(--lwt-accent-color));
border-radius: 6px;
}
& > .menu-iconic-left::after {
display: block;
content: "";
height: 6px;
width: 6px;
background: var(--spaces-button-badge-bg-color);
border: 2px solid var(--arrowpanel-background);
border-radius: 6px;
position: absolute;
inset-block-start: -3px;
inset-inline-end: -1px;
}
}