path: root/comm/mail/themes/shared/mail/spacesToolbar.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/. */

/* 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(--selected-item-text-color);
  --spaces-button-active-bg-color: var(--selected-item-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);
}

:root:-moz-window-inactive {
  --spaces-button-opacity: 0.7;
  --spaces-bg-image: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --spaces-bg-color: #252525;
  }
}

@media (prefers-contrast) {
  :root:not(:-moz-lwtheme) {
    --spaces-bg-color: -moz-Dialog;
    --spaces-bg-image: none;
    --spaces-border-color: var(--splitter-color);
  }
}

/* Density variations */

:root {
  --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));
}

:root[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;
}

:root[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) {
  :root {
    --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;
}

.spaces-toolbar:not([hidden]) ~ #messengerBody,
:root:not(.customizingUnifiedToolbar) .spaces-toolbar:not([hidden]) ~ #navigation-toolbox-background #titlebar {
  /* Move the window content in by the width of the spaces toolbar */
  margin-inline-start: var(--spaces-total-width);
}

:root:not(.customizingUnifiedToolbar) .spaces-toolbar:not([hidden]) ~ #navigation-toolbox-background #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;
}

.spaces-toolbar-button:focus-visible:not(:hover) {
  outline: 2px solid var(--selected-item-color);
}

.spaces-toolbar-button.current:focus-visible:not(:hover) {
  outline-offset: 2px;
}

@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;
  }

  .spaces-toolbar-button > img {
    transition: fill 280ms ease, stroke 280ms ease, opacity 280ms ease;
  }

  .spaces-toolbar-pinned-button {
    transition: background-color 280ms ease, box-shadow 280ms ease;
  }
}

.spaces-toolbar-button.current,
.spaces-toolbar-button.current:hover,
#spacesAccentPlaceholder {
  background-color: var(--spaces-button-active-bg-color);
  color: var(--spaces-button-active-text-color);
}

.spaces-toolbar-button:hover:not(.current) {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}

@media (prefers-contrast) {
  .spaces-toolbar-button:hover:not(.current) {
    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:is(:not([disabled])):hover:active {
  background-color: var(--spaces-button-active-bg-color);
  color: var(--spaces-button-active-text-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-button > img {
  width: var(--spaces-icon-size);
  height: var(--spaces-icon-size);
}

.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;
}

.spaces-toolbar-statusbar-button: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;
}

#spacesPinnedButton .toolbarbutton-text,
#spacesPinnedButton[type="menu"] > .toolbarbutton-menu-dropmarker {
  display: none;
}

#mailButton img {
  content: var(--spaces-icon-mail);
}
#spacesPopupButtonMail {
  list-style-image: var(--icon-mail);
}

#addressBookButton img {
  content: var(--spaces-icon-address-book);
}
#spacesPopupButtonAddressBook {
  list-style-image: var(--icon-address-book);
}

#calendarButton img {
  content: var(--spaces-icon-calendar);
}
#spacesPopupButtonCalendar {
  list-style-image: var(--icon-calendar);
}

#tasksButton img {
  content: var(--spaces-icon-tasks);
}
#spacesPopupButtonTasks {
  list-style-image: var(--icon-tasks);
}

#chatButton img {
  content: var(--spaces-icon-chat);
}
#spacesPopupButtonChat {
  list-style-image: var(--icon-chat);
}

#settingsButton img {
  content: var(--spaces-icon-settings);
}
#spacesPopupButtonSettings {
  list-style-image: var(--icon-settings);
}

#collapseButton img {
  content: var(--spaces-icon-collapse);
}
#spacesPopupButtonReveal {
  list-style-image: var(--icon-collapse);
}

#spacesToolbarAddonsOverflowButton img {
  content: var(--spaces-icon-overflow);
}

#spacesToolbarReveal img {
  height: 16px;
  width: 16px;
}

#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;
}

.spaces-badge-container:-moz-window-inactive {
  background-color: color-mix(in srgb, var(--spaces-button-badge-bg-color) 50%, black);
}

.has-badge .spaces-badge-container {
  display: block;
}

.has-badge: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;
}

.has-badge > .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;
}