diff options
Diffstat (limited to 'comm/mail/themes/shared/mail/unifiedToolbarCustomizationPane.css')
-rw-r--r-- | comm/mail/themes/shared/mail/unifiedToolbarCustomizationPane.css | 196 |
1 files changed, 196 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/unifiedToolbarCustomizationPane.css b/comm/mail/themes/shared/mail/unifiedToolbarCustomizationPane.css new file mode 100644 index 0000000000..bd8f73795e --- /dev/null +++ b/comm/mail/themes/shared/mail/unifiedToolbarCustomizationPane.css @@ -0,0 +1,196 @@ +/* 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/. */ + +/* This is the main stylesheet in the unified-toolbar-customization-pane shadowRoot. */ + +@import url("chrome://messenger/skin/widgets.css"); +@import url("chrome://messenger/skin/shared/unifiedToolbarCustomizableItems.css"); +@import url("chrome://messenger/skin/shared/unifiedToolbarShared.css"); + +.search-button-icon { + content: var(--icon-search); +} + +.palette-search { + display: block; + margin: 12px 0; + max-width: 50ch; + height: 2em; + width: 100%; + align-self: center; +} + +[is="customization-target"], +[is="customization-palette"] { + display: flex; + list-style-type: none; + margin: 0; + padding: 0; + flex-shrink: 0; +} + +[is="customization-target"]:focus-visible, +[is="customization-palette"]:focus-visible { + outline: var(--focus-outline); + outline-color: transparent; +} + +.toolbar-target { + /* TODO this should match actual titlebar dimensions */ + background: var(--layout-background-3); + border-radius: 6px; + padding-inline: 9px; + padding-block: var(--unified-toolbar-padding); + margin: 1rem; + max-width: 100vw; + border: 1px solid var(--layout-border-0); + gap: 6px; + min-height: calc(1rem + 3 * var(--button-padding)); +} + +.toolbar-target .button.unified-toolbar-button { + margin-block: 0; +} + +.toolbar-target .spacer { + color: color-mix(in srgb, var(--layout-color-1) 50%, transparent); + background-image: linear-gradient(to left, currentColor 0%, currentColor 50%, transparent 50%, transparent 100%); + background-size: 9px 1px; + background-position: 5px center; + background-repeat: repeat-x; + position: relative; + height: 100%; + -moz-context-properties: stroke; + stroke: currentColor; +} + +.toolbar-target .spacer::before, +.toolbar-target .spacer::after { + content: ''; + width: 16px; + position: absolute; + height: 100%; + background-repeat: no-repeat; + background-position-y: center; +} + +.toolbar-target .spacer::before { + background-image: var(--icon-nav-left); + left: -5px; +} + +.toolbar-target .spacer::after { + background-image: var(--icon-nav-right); + right: -5px; +} + +.toolbar-target .throbber .throbber-icon { + visibility: visible; +} + +/* buttons are disabled in the preview, but we want them to look active. */ +.toolbar-target .unified-toolbar-button[disabled] { + color: inherit; + opacity: 1; +} + +[is="customization-target"] [is="customizable-element"] .live-content { + pointer-events: none; +} + +[is="customization-target"] [is="customizable-element"] .preview { + display: none; +} + +[is="customization-target"] .collapsed { + display: none; +} + +.customization-palettes { + overflow: auto; +} + +[is="customization-palette"] { + flex-wrap: wrap; + gap: 1rem; + margin: 1rem; +} + +[is="customization-palette"]:not(:last-of-type) { + margin-block-end: 2.5rem; +} + +h2 { + margin-inline: 1rem; + user-select: none; +} + +[is="customizable-element"] { + margin: 0; + padding: 0; +} + +[is="customization-target"]:focus-within [is="customizable-element"][aria-selected="true"], +[is="customization-palette"]:focus-within [is="customizable-element"][aria-selected="true"] { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +[is="customization-palette"] [is="customizable-element"] { + width: 96px; + height: calc(25px + 2.4rem); /* icon: 16px, gap: 9px, 2.4rem = ~2lh */ + background: var(--layout-background-3); + padding: 9px; + border-radius: 6px; + overflow: hidden; +} + +[is="customization-palette"] [is="customizable-element"] .live-content { + display: none; +} + +.preview { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + overflow: hidden; + gap: 9px; + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; +} + +.preview-icon { + height: 16px; + width: 16px; + object-fit: contain; + pointer-events: none; +} + +.preview-label { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + overflow-wrap: break-word; + text-overflow: ellipsis; + user-select: none; + padding-inline: 3px; + max-width: 100%; +} + +/* Drag and drop state styling */ + +.drop-before { + border-inline-start: 1px solid currentColor; +} + +.drop-after { + border-inline-end: 1px solid currentColor; +} + +.dragging { + visibility: hidden; +} |