diff options
Diffstat (limited to 'comm/mail/themes/shared/mail/spacesToolbar.css')
| -rw-r--r-- | comm/mail/themes/shared/mail/spacesToolbar.css | 371 |
1 files changed, 371 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/spacesToolbar.css b/comm/mail/themes/shared/mail/spacesToolbar.css new file mode 100644 index 0000000000..f9ad1cadd6 --- /dev/null +++ b/comm/mail/themes/shared/mail/spacesToolbar.css @@ -0,0 +1,371 @@ +/* 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; +} |