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
:root {
--unified-toolbar-padding: 4px;
--unified-drag-space: 30px;
--unified-customization-padding: 30px;
--unified-toolbar-content-min-height: 28px;
&[uidensity="compact"] {
--unified-toolbar-padding: 1px;
--unified-drag-space: 15px;
--unified-toolbar-content-min-height: 24px;
}
&[uidensity="touch"] {
--unified-toolbar-padding: 7px;
}
&[sizemode="fullscreen"],
&:not([tabsintitlebar]) {
--unified-drag-space: 3px;
}
}
unified-toolbar {
display: block;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
#unifiedToolbarContainer {
display: flex;
justify-content: space-between;
align-items: center;
-moz-window-dragging: drag;
width: 100vw;
/* minheight for the macOS titlebar */
.customizingUnifiedToolbar & {
min-height: 22px;
}
& .titlebar-buttonbox-container {
flex: 0 0 auto;
@media (-moz-platform: windows) {
align-self: stretch;
}
}
@media (-moz-gtk-csd-reversed-placement) {
flex-direction: row-reverse;
}
}
#unifiedToolbar {
flex: 1 1 auto;
display: flex;
align-items: center;
padding-block: var(--unified-toolbar-padding);
min-width: 0;
overflow: hidden;
& .button:is(.toolbar-button, .unified-toolbar-button) {
margin-block: 0;
}
}
#unifiedToolbarContent {
flex: 1 1 auto;
min-height: var(--unified-toolbar-content-min-height);
margin: 0;
/* Padding needed for the children's focus ring. */
padding-block: 3px;
padding-inline: var(--unified-drag-space) 3px;
& li {
-moz-window-dragging: no-drag;
}
& .unified-toolbar-button[disabled] {
opacity: 0.4;
}
& .spacer {
-moz-window-dragging: drag;
}
@media (-moz-windows-accent-color-in-titlebar) {
& .search-bar {
--search-focus-outline-color: var(--windows-accent-outline-color);
--search-outline-offset: var(--focus-outline-offset);
}
}
}
unified-toolbar-customization {
display: none;
}
/* customizing unified toolbar */
/* TODO this approach will have issues with spaces toolbar paddings */
/* we still need the space to be taken up for correct alignment of window decorations */
.customizingUnifiedToolbar {
& #unifiedToolbar {
visibility: hidden;
}
& #unifiedToolbar > *,
& :is(#messengerBody, #spacesToolbar, #toolbar-menubar, #tabs-toolbar) {
display: none;
}
& unified-toolbar-customization {
display: flex;
height: 100%;
background-color: color-mix(in srgb, var(--layout-background-0) 50%, var(--color-black));
color: var(--layout-color-1);
flex: 1;
overflow: hidden;
padding: var(--unified-customization-padding);
}
}
#customizationHeading {
align-self: center;
font-size: 1.2rem;
font-weight: 600;
color: var(--layout-color-2);
margin-block: .5em;
}
#unifiedToolbarCustomizationContainer {
background-color: var(--layout-background-3);
border-radius: 6px;
flex-grow: 1;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
--customization-footer-padding: 12px;
box-shadow:
0 2px 12px -3px rgba(0, 0, 0, 0.5),
0 2px 24px -6px rgba(0, 0, 0, 0.5);
& div[role="tabpanel"] {
flex-grow: 1;
}
}
#customizationFooter {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
user-select: none;
background: var(--layout-background-1);
border-radius: 0 0 6px 6px;
/* We need at least 1rem of padding to ensure the
* #unifiedToolbarCustomizationUnsavedChanges can be displayed in it */
padding-block: max(calc(var(--customization-footer-padding) * 2), 1rem);
padding-inline: var(--customization-footer-padding);
& div:last-child {
text-align: end;
}
}
#buttonStyleContainer {
display: flex;
align-items: center;
gap: 3px;
}
#unifiedToolbarCustomizationUnsavedChanges {
position: fixed;
inset-block-end: calc((var(--customization-footer-padding) * 2 - 1em) / 2 + var(--unified-customization-padding));
inset-inline-end: calc(var(--customization-footer-padding) + var(--unified-customization-padding));
}
#customizationTabs {
display: flex;
flex-wrap: nowrap;
max-width: 100vw;
background-color: var(--tabs-toolbar-background-color);
box-shadow: var(--tabs-toolbar-box-shadow);
padding-top: 3px;
padding-inline: 6px;
}
unified-toolbar-customization-pane:not([hidden]) {
flex-grow: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--layout-background-1);
}
unified-toolbar-tab {
min-width: 28px;
overflow-x: hidden;
display: block;
&::part(icon) {
-moz-context-properties: fill, stroke;
fill: color-mix(in srgb, currentColor 20%, transparent);
stroke: currentColor;
content: var(--webextension-toolbar-image, var(--icon-extension));
max-width: 16px;
max-height: 16px;
}
}
#unified-toolbar-customization-tab-mail::part(icon) {
content: var(--icon-mail);
}
#unified-toolbar-customization-tab-calendar::part(icon) {
content: var(--icon-calendar);
}
#unified-toolbar-customization-tab-tasks::part(icon) {
content: var(--icon-tasks);
}
#unified-toolbar-customization-tab-addressbook::part(icon) {
content: var(--icon-address-book);
}
#unified-toolbar-customization-tab-chat::part(icon) {
content: var(--icon-chat);
}
#unified-toolbar-customization-tab-settings::part(icon) {
content: var(--icon-settings);
}
:is(.live-content, .button-appmenu, #spacesPinnedButton):-moz-window-inactive {
opacity: 0.6;
}
/* Get messages popup */
#toolbarGetMessagesContext {
-moz-context-properties: fill, stroke;
fill: color-mix(in srgb, currentColor 20%, transparent);
stroke: currentColor;
}
#tolbarContextGetAllNewMessages {
list-style-image: var(--icon-cloud-download);
}