diff options
Diffstat (limited to 'comm/mail/themes/shared/mail/unifiedToolbar.css')
| -rw-r--r-- | comm/mail/themes/shared/mail/unifiedToolbar.css | 242 |
1 files changed, 242 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/unifiedToolbar.css b/comm/mail/themes/shared/mail/unifiedToolbar.css new file mode 100644 index 0000000000..4f725e13ed --- /dev/null +++ b/comm/mail/themes/shared/mail/unifiedToolbar.css @@ -0,0 +1,242 @@ +/* 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/. */ + +@import url("chrome://messenger/skin/shared/unifiedToolbarShared.css"); + +:root { + --unified-toolbar-padding: 4px; + --unified-drag-space: 30px; + --unified-customization-padding: 30px; + --unified-toolbar-content-min-height: 28px; +} + +:root[uidensity="compact"] { + --unified-toolbar-padding: 1px; + --unified-drag-space: 15px; + --unified-toolbar-content-min-height: 24px; +} + +:root[uidensity="touch"] { + --unified-toolbar-padding: 7px; +} + +:root[sizemode="fullscreen"], +:root: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 #unifiedToolbarContainer { + min-height: 22px; +} + +#unifiedToolbar { + flex: 1 1 auto; + display: flex; + align-items: center; + padding-block: var(--unified-toolbar-padding); + min-width: 0; + overflow: hidden; +} + +#unifiedToolbar .button:is(.toolbar-button, .unified-toolbar-button) { + margin-block: 0; +} + +#unifiedToolbarContainer .titlebar-buttonbox-container { + flex: 0 0 auto; +} + +@media (-moz-platform: windows) { + #unifiedToolbarContainer .titlebar-buttonbox-container { + align-self: stretch; + } +} + +@media (-moz-gtk-csd-reversed-placement) { + #unifiedToolbarContainer { + flex-direction: row-reverse; + } +} + +#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; +} + +#unifiedToolbarContent li { + -moz-window-dragging: no-drag; +} + +#unifiedToolbarContent .unified-toolbar-button[disabled] { + opacity: 0.4; +} + +#unifiedToolbarContent .spacer { + -moz-window-dragging: drag; +} + +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; +} + +.customizingUnifiedToolbar #unifiedToolbar > *, +.customizingUnifiedToolbar #messengerBody, +.customizingUnifiedToolbar #spacesToolbar, +.customizingUnifiedToolbar #toolbar-menubar, +.customizingUnifiedToolbar #tabs-toolbar { + display: none; +} + +.customizingUnifiedToolbar 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; + --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); +} + +#unifiedToolbarCustomizationContainer 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); +} + +#buttonStyleContainer { + display: flex; + align-items: center; + gap: 3px; +} + +#customizationFooter div:last-child { + text-align: end; +} + +#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; +} + +unified-toolbar-tab::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; +} |