summaryrefslogtreecommitdiffstats
path: root/comm/mail/themes/shared/mail
diff options
context:
space:
mode:
Diffstat (limited to 'comm/mail/themes/shared/mail')
-rw-r--r--comm/mail/themes/shared/mail/EdInsertChars.css27
-rw-r--r--comm/mail/themes/shared/mail/EditorDialog.css347
-rw-r--r--comm/mail/themes/shared/mail/abContactsPanel.css93
-rw-r--r--comm/mail/themes/shared/mail/abFormFields.css89
-rw-r--r--comm/mail/themes/shared/mail/abPrint.css88
-rw-r--r--comm/mail/themes/shared/mail/abResultsPane.css22
-rw-r--r--comm/mail/themes/shared/mail/abSearchDialog.css18
-rw-r--r--comm/mail/themes/shared/mail/about3Pane.css631
-rw-r--r--comm/mail/themes/shared/mail/aboutAddonsExtra.css174
-rw-r--r--comm/mail/themes/shared/mail/aboutAddressBook.css1023
-rw-r--r--comm/mail/themes/shared/mail/aboutDownloads.css131
-rw-r--r--comm/mail/themes/shared/mail/aboutImport.css431
-rw-r--r--comm/mail/themes/shared/mail/aboutPolicies.css159
-rw-r--r--comm/mail/themes/shared/mail/aboutSupport.css67
-rw-r--r--comm/mail/themes/shared/mail/accountCentral.css527
-rw-r--r--comm/mail/themes/shared/mail/accountHub.css349
-rw-r--r--comm/mail/themes/shared/mail/accountHubForms.css114
-rw-r--r--comm/mail/themes/shared/mail/accountManage.css606
-rw-r--r--comm/mail/themes/shared/mail/accountManager.css305
-rw-r--r--comm/mail/themes/shared/mail/accountSetup.css1021
-rw-r--r--comm/mail/themes/shared/mail/accountWizard.css27
-rw-r--r--comm/mail/themes/shared/mail/activity/activity.css117
-rw-r--r--comm/mail/themes/shared/mail/attachmentList.css168
-rw-r--r--comm/mail/themes/shared/mail/autocomplete.css23
-rw-r--r--comm/mail/themes/shared/mail/avatars.css71
-rw-r--r--comm/mail/themes/shared/mail/browserRequest.css14
-rw-r--r--comm/mail/themes/shared/mail/cardDAV.css94
-rw-r--r--comm/mail/themes/shared/mail/cardDialog.css160
-rw-r--r--comm/mail/themes/shared/mail/chat.css1006
-rw-r--r--comm/mail/themes/shared/mail/cloudfileSelectDialog.css20
-rw-r--r--comm/mail/themes/shared/mail/colors.css130
-rw-r--r--comm/mail/themes/shared/mail/common.css131
-rw-r--r--comm/mail/themes/shared/mail/compacttheme.css39
-rw-r--r--comm/mail/themes/shared/mail/composerOverlay.css16
-rw-r--r--comm/mail/themes/shared/mail/contextMenu.css210
-rw-r--r--comm/mail/themes/shared/mail/converterDialog.css57
-rw-r--r--comm/mail/themes/shared/mail/customizeToolbar.css110
-rw-r--r--comm/mail/themes/shared/mail/editorContent.css108
-rw-r--r--comm/mail/themes/shared/mail/extensionPopup.css14
-rw-r--r--comm/mail/themes/shared/mail/feedSubscribe.css43
-rw-r--r--comm/mail/themes/shared/mail/fieldMapImport.css23
-rw-r--r--comm/mail/themes/shared/mail/filterDialog.css139
-rw-r--r--comm/mail/themes/shared/mail/filterEditor.css27
-rw-r--r--comm/mail/themes/shared/mail/folderColors.css37
-rw-r--r--comm/mail/themes/shared/mail/folderMenus.css101
-rw-r--r--comm/mail/themes/shared/mail/folderPane.css312
-rw-r--r--comm/mail/themes/shared/mail/folderProps.css41
-rw-r--r--comm/mail/themes/shared/mail/glodaFacetView.css723
-rw-r--r--comm/mail/themes/shared/mail/glodacomplete.css51
-rw-r--r--comm/mail/themes/shared/mail/grid-layout.css84
-rw-r--r--comm/mail/themes/shared/mail/icons.css304
-rw-r--r--comm/mail/themes/shared/mail/icons/ablist.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/aboutdebugging-logo.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/account-sync.svg102
-rw-r--r--comm/mail/themes/shared/mail/icons/accounts.svg9
-rw-r--r--comm/mail/themes/shared/mail/icons/add-circle-fill.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/addcontact.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/addlist.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/addon-install-blocked.svg38
-rw-r--r--comm/mail/themes/shared/mail/icons/addon-install-confirm.svg19
-rw-r--r--comm/mail/themes/shared/mail/icons/addon-install-downloading.svg38
-rw-r--r--comm/mail/themes/shared/mail/icons/addon-install-error.svg38
-rw-r--r--comm/mail/themes/shared/mail/icons/addon-install-installed.svg38
-rw-r--r--comm/mail/themes/shared/mail/icons/addon-install-warning.svg38
-rw-r--r--comm/mail/themes/shared/mail/icons/address.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/anchor.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/app-update-badge.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/app-update.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/appbutton-badged.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/appbutton.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/archive.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/arrow-dropdown.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/attach.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/attachment-col.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/attachment-deleted-large.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/attachment-deleted.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/bold.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/browser-back.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/browser-forward.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/bullet-list.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/cancel.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/center-align.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/cert-error.svg31
-rw-r--r--comm/mail/themes/shared/mail/icons/chat.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/checkbox.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/collapse.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/compact.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/connection-insecure.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/connection-mixed.svg9
-rw-r--r--comm/mail/themes/shared/mail/icons/connection-secure.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/contact-generic.svg15
-rw-r--r--comm/mail/themes/shared/mail/icons/contact.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/conversation.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/correspondents-rtl.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/correspondents.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/cut.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/decrease.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/delete-col.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/delete.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/developer.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/download.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/empty-search-results.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/encryption-key.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/exclude.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/feeds-folder.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/feeds.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/file-item.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/file.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/filter.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/fingerprint.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/flag-col.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/flagged.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/folder-local.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/folder-new-indicator.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/folder.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/forget.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/format-dropmarker.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/forward-redirect.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/forward.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/founder.pngbin0 -> 658 bytes
-rw-r--r--comm/mail/themes/shared/mail/icons/get-all.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/getmsg.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/globe-secure.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/globe.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/goback.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/goforward.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/half-operator.pngbin0 -> 667 bytes
-rw-r--r--comm/mail/themes/shared/mail/icons/help.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/hidden.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/highlights.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/hline.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/hourglass.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/image.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/import.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/inbox.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/increase.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/indent.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/info.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/information.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/italics.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/join.svg9
-rw-r--r--comm/mail/themes/shared/mail/icons/junk-col.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/junk.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/justify.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/left-align.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/loading.svg98
-rw-r--r--comm/mail/themes/shared/mail/icons/login.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/mark.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/menu.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/message-encrypted-notok.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/message-encrypted-ok.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/message-secure.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/message-signed-mismatch.svg9
-rw-r--r--comm/mail/themes/shared/mail/icons/message-signed-ok.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/message-signed-unknown.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/message-signed-unverified.svg9
-rw-r--r--comm/mail/themes/shared/mail/icons/message-signed-verified.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/message.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/more.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/move-first.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/move-last.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/move-left.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/move-right.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/move-together.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/navigation.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new-addressbook.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new-calendar.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new-key.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new-window.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/new/activity/addItemIcon.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/new/activity/compactMailIcon.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/new/activity/copyMailIcon.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/new/activity/defaultEventIcon.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/new/activity/defaultProcessIcon.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/new/activity/deleteMailIcon.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/new/activity/error.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/new/activity/indexMailIcon.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/new/activity/info.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/new/activity/moveMailIcon.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/new/activity/question.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/new/activity/removeItemIcon.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/new/activity/sendMailIcon.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/new/activity/syncMailIcon.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/new/activity/undoIcon.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/new/activity/warning.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/new/address-book-indicator.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/attachment-sm.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/bell-disabled.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/bell-ring.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/bell.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/calendar-empty.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/chat-lock-finished.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/chat-lock-insecure.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/chat-lock-private.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/chat-lock-unverified.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/chat-lock.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/circle-sm.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/column-menu.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/account-settings.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/add-circle.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/add.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/address-book.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/app-menu-badged.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/app-menu.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/archive.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/attachment.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/calendar-invite.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/calendar-today.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/calendar.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/chat.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/check.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/checkbox.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/clock.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/close.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/cloud-download.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/collapse.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/compress.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/contact.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/conversation.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/copy.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/cut.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/density-compact.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/density-default.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/density-relaxed.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/display-options.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/download.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/draft.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/error-circle.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/event-status.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/export.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/extension.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/eye.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/features.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/file.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/filter.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/fingerprint.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/flexible-space.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/folder-filter.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/folder-rss.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/folder-save.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/folder.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/font.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/forward-col.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/forward-redirect-col.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/forward.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/get-mail.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/globe-secure.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/globe.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/handshake.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/heart.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/hidden.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/id.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/import.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/inbox.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/info.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/kebab.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/key.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/layout.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/link.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/lock-disabled.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/lock.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/low-priority.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/mail-secure.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/mail.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/more.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/nav-back.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/nav-down-unread.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/nav-down.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/nav-forward.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/nav-left.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/nav-right.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/nav-up-unread.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/nav-up.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/new-address-book.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/new-chat.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/new-contact.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/new-event.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/new-key.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/new-mail.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/new-task.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/new-user-list.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/newsletter.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/offline.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/online.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/outbox.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/overflow.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/paint-brush.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/paste.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/pencil.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/photo-ban.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/pin.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/print.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/priority.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/question.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/quit.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/quote.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/receipt.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/redirect-col.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/redirect.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/remove.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/reply-all.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/reply-col.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/reply-forward-col.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/reply-forward-redirect-col.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/reply-list.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/reply-redirect-col.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/reply.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/restore.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/ribbon.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/rss.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/search.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/sent.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/settings.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/shield.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/shortcut.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/sort.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/spaces-menu.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/spam.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/spelling.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/star.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/subthread-ignored.svg9
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/subtract-circle.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/sync.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/tag.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/tasks.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/template.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/tentative.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/thread-ignored.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/thread.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/tools.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/trash.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/unread.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/user-list-alt.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/user-list.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/user.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/compact/warning.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/event-continue.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/event-end.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/event-start.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/loading.svg98
-rw-r--r--comm/mail/themes/shared/mail/icons/new/mail-sm.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/nav-down-sm.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/nav-left-sm.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/nav-right-sm.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/nav-today.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/nav-up-sm.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/add-circle.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/add.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/address-book.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/archive.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/calendar-invite.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/calendar.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/chat.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/cloud-download.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/collapse.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/download.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/draft.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/folder-filter.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/folder-rss.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/folder.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/globe-secure.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/globe.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/inbox.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/link.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/mail-secure.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/mail.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/more.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/newsletter.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/outbox.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/overflow.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/rss.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/sent.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/settings.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/spam.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/subtract-circle.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/tasks.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/template.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/normal/trash.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/notify.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/recurrence-exception.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/recurrence.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/spam-sm.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/star-sm.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/status-away-sm.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/status-away.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/status-idle-sm.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/status-idle.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/status-offline-sm.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/status-offline.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/status-online-sm.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/status-online.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/subtract-circle-sm.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/supernova-logo.webpbin0 -> 1748 bytes
-rw-r--r--comm/mail/themes/shared/mail/icons/new/tag-sm.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/thread-sm.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/add-circle.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/address-book.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/calendar.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/chat.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/collapse.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/dictionary.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/export.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/extension-update-available.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/extension-update-recent.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/extension.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/features.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/globe.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/import.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/language.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/lock.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/mail.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/overflow.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/paint-brush.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/pencil.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/settings.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/subtract-circle.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/sync.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/new/touch/tasks.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/trash-sm.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/unread-dot.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/new/unread-sm.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/newmail.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/newmsg.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/newsgroup.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/nextmsg.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/nextunread.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/notification-fill-12.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/notloading.pngbin0 -> 681 bytes
-rw-r--r--comm/mail/themes/shared/mail/icons/notloading@2x.pngbin0 -> 1924 bytes
-rw-r--r--comm/mail/themes/shared/mail/icons/number-list.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/offline.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/online.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/operator.pngbin0 -> 727 bytes
-rw-r--r--comm/mail/themes/shared/mail/icons/outbox.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/outdent.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/overflow-indicator.pngbin0 -> 794 bytes
-rw-r--r--comm/mail/themes/shared/mail/icons/overflow.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/paragraph.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/paste.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/phishing.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/pill-indicator.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/pluginBlocked.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/popular.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/previousmsg.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/previousunread.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/print.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/privacy-security.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/quit.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/quote.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/read.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/readcol.svg9
-rw-r--r--comm/mail/themes/shared/mail/icons/reader-mode.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/redirect.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/remote-blocked.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/remove-text-styling.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/reply-forward-redirect.svg8
-rw-r--r--comm/mail/themes/shared/mail/icons/reply-forward.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/reply-redirect.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/reply.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/replyall.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/replylist.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/restore.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/return-receipt.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/right-align.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/save-as.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/save.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/search-folder.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/search-not-found.svg11
-rw-r--r--comm/mail/themes/shared/mail/icons/search-spinner.svg9
-rw-r--r--comm/mail/themes/shared/mail/icons/send.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/sent.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/shield.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/sidebar-left.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/size.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/smiley.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/sort.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/spaces.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/spelling.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/spring.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/star.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/starred.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/status-away.svg14
-rw-r--r--comm/mail/themes/shared/mail/icons/status-idle.svg14
-rw-r--r--comm/mail/themes/shared/mail/icons/status-offline.svg14
-rw-r--r--comm/mail/themes/shared/mail/icons/status-online.svg14
-rw-r--r--comm/mail/themes/shared/mail/icons/sticky.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/stop.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/subthread-ignored.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/subtract-circle-fill.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/tab-drag-indicator.svg4
-rw-r--r--comm/mail/themes/shared/mail/icons/table.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/tag.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/template.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/thread-col.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/thread-ignored.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/thread.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/timeline.svg12
-rw-r--r--comm/mail/themes/shared/mail/icons/toolbarbutton-arrow.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/underline.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/userIcon.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/visible.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/voice.pngbin0 -> 733 bytes
-rw-r--r--comm/mail/themes/shared/mail/icons/waiting.svg6
-rw-r--r--comm/mail/themes/shared/mail/icons/warning-12.svg7
-rw-r--r--comm/mail/themes/shared/mail/icons/zoomout.svg6
-rw-r--r--comm/mail/themes/shared/mail/illustrations/accounts.svg62
-rw-r--r--comm/mail/themes/shared/mail/illustrations/connection-error.svg51
-rw-r--r--comm/mail/themes/shared/mail/illustrations/form.svg56
-rw-r--r--comm/mail/themes/shared/mail/illustrations/octopus-setup.svg75
-rw-r--r--comm/mail/themes/shared/mail/illustrations/sloth.svg88
-rw-r--r--comm/mail/themes/shared/mail/illustrations/sync-devices.svg49
-rw-r--r--comm/mail/themes/shared/mail/imAccounts.css203
-rw-r--r--comm/mail/themes/shared/mail/imMenulist.css13
-rw-r--r--comm/mail/themes/shared/mail/imRichlistbox.css15
-rw-r--r--comm/mail/themes/shared/mail/images/account-watermark-light.pngbin0 -> 21457 bytes
-rw-r--r--comm/mail/themes/shared/mail/images/account-watermark.pngbin0 -> 39280 bytes
-rw-r--r--comm/mail/themes/shared/mail/images/pendingpaint.pngbin0 -> 12955 bytes
-rw-r--r--comm/mail/themes/shared/mail/inContentDialog.css335
-rw-r--r--comm/mail/themes/shared/mail/input-fields.css51
-rw-r--r--comm/mail/themes/shared/mail/joinchat.css25
-rw-r--r--comm/mail/themes/shared/mail/layout.css81
-rw-r--r--comm/mail/themes/shared/mail/mailWindow1.css200
-rw-r--r--comm/mail/themes/shared/mail/menulist.css24
-rw-r--r--comm/mail/themes/shared/mail/message-bar.css432
-rw-r--r--comm/mail/themes/shared/mail/messageBody.css201
-rw-r--r--comm/mail/themes/shared/mail/messageHeader.css1002
-rw-r--r--comm/mail/themes/shared/mail/messageIcons.css360
-rw-r--r--comm/mail/themes/shared/mail/messageQuotes.css67
-rw-r--r--comm/mail/themes/shared/mail/messenger.css1506
-rw-r--r--comm/mail/themes/shared/mail/messengercompose.css1485
-rw-r--r--comm/mail/themes/shared/mail/migrationProgress.css111
-rw-r--r--comm/mail/themes/shared/mail/msgSelectOffline.css56
-rw-r--r--comm/mail/themes/shared/mail/multimessageview.css211
-rw-r--r--comm/mail/themes/shared/mail/newmailalert.css140
-rw-r--r--comm/mail/themes/shared/mail/overrides/add.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/arrow-down-12.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/arrow-down.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/arrow-left-12.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/arrow-left.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/arrow-right-12.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/arrow-right.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/arrow-up-12.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/arrow-up.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/blocked.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/category-available.svg7
-rw-r--r--comm/mail/themes/shared/mail/overrides/category-discover.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/category-extensions.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/category-recent.svg7
-rw-r--r--comm/mail/themes/shared/mail/overrides/category-themes.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/check.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/chevron.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/close.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/defaultFavicon.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/delete.svg7
-rw-r--r--comm/mail/themes/shared/mail/overrides/error.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/extension.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/find-next-arrow.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/find-previous-arrow.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/folder.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/help.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/info-filled.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/info.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/more.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/open-in-new.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/plugin-blocked.svg7
-rw-r--r--comm/mail/themes/shared/mail/overrides/plugin.svg7
-rw-r--r--comm/mail/themes/shared/mail/overrides/print.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/search-glass.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/security-broken.svg7
-rw-r--r--comm/mail/themes/shared/mail/overrides/security-warning.svg9
-rw-r--r--comm/mail/themes/shared/mail/overrides/security.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/settings.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/update-icon.svg6
-rw-r--r--comm/mail/themes/shared/mail/overrides/warning.svg6
-rw-r--r--comm/mail/themes/shared/mail/panelUI.css1199
-rw-r--r--comm/mail/themes/shared/mail/popupPanel.css213
-rw-r--r--comm/mail/themes/shared/mail/preferences/applications.css234
-rw-r--r--comm/mail/themes/shared/mail/preferences/calendar.svg6
-rw-r--r--comm/mail/themes/shared/mail/preferences/chat.svg6
-rw-r--r--comm/mail/themes/shared/mail/preferences/dialog.css174
-rw-r--r--comm/mail/themes/shared/mail/preferences/general.svg6
-rw-r--r--comm/mail/themes/shared/mail/preferences/passwordmgr.css44
-rw-r--r--comm/mail/themes/shared/mail/preferences/preferences.css1098
-rw-r--r--comm/mail/themes/shared/mail/preferences/privacy-security.svg6
-rw-r--r--comm/mail/themes/shared/mail/preferences/subdialog.css78
-rw-r--r--comm/mail/themes/shared/mail/primaryToolbar.css238
-rw-r--r--comm/mail/themes/shared/mail/profileDowngrade.css18
-rw-r--r--comm/mail/themes/shared/mail/quickFilterBar.css197
-rw-r--r--comm/mail/themes/shared/mail/sanitizeDialog.css49
-rw-r--r--comm/mail/themes/shared/mail/search-bar.css89
-rw-r--r--comm/mail/themes/shared/mail/searchBox.css129
-rw-r--r--comm/mail/themes/shared/mail/searchDialog.css126
-rw-r--r--comm/mail/themes/shared/mail/spacesToolbar.css371
-rw-r--r--comm/mail/themes/shared/mail/splitter.css162
-rw-r--r--comm/mail/themes/shared/mail/subscribe.css80
-rw-r--r--comm/mail/themes/shared/mail/tabmail.css484
-rw-r--r--comm/mail/themes/shared/mail/tagColors.css13
-rw-r--r--comm/mail/themes/shared/mail/themeableDialog.css608
-rw-r--r--comm/mail/themes/shared/mail/threadPane.css822
-rw-r--r--comm/mail/themes/shared/mail/tree-listbox.css528
-rw-r--r--comm/mail/themes/shared/mail/unifiedToolbar.css242
-rw-r--r--comm/mail/themes/shared/mail/unifiedToolbarCustomizableItems.css197
-rw-r--r--comm/mail/themes/shared/mail/unifiedToolbarCustomizationPane.css196
-rw-r--r--comm/mail/themes/shared/mail/unifiedToolbarShared.css408
-rw-r--r--comm/mail/themes/shared/mail/unifiedToolbarTab.css62
-rw-r--r--comm/mail/themes/shared/mail/variables.css291
-rw-r--r--comm/mail/themes/shared/mail/vcard.css476
-rw-r--r--comm/mail/themes/shared/mail/verifychat.css17
-rw-r--r--comm/mail/themes/shared/mail/widgets.css370
-rw-r--r--comm/mail/themes/shared/mail/wizard.css52
610 files changed, 30476 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/EdInsertChars.css b/comm/mail/themes/shared/mail/EdInsertChars.css
new file mode 100644
index 0000000000..1fb5430642
--- /dev/null
+++ b/comm/mail/themes/shared/mail/EdInsertChars.css
@@ -0,0 +1,27 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/* Keep the reading order in the document for accessibility, but re-order for
+ * visual display. */
+#LatinL_Label {
+ grid-row: 1;
+ grid-column: 1;
+}
+
+#LatinM_Label {
+ grid-row: 1;
+ grid-column: 2;
+}
+
+#LatinL {
+ grid-row: 2;
+ grid-column: 1;
+}
+
+#LatinM {
+ grid-row: 2;
+ grid-column: 2;
+}
diff --git a/comm/mail/themes/shared/mail/EditorDialog.css b/comm/mail/themes/shared/mail/EditorDialog.css
new file mode 100644
index 0000000000..4bd7b4b86f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/EditorDialog.css
@@ -0,0 +1,347 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root:-moz-lwtheme {
+ background-color: var(--lwt-accent-color);
+ color: var(--lwt-text-color);
+}
+
+#imageDlg {
+ overflow: auto;
+ max-width: inherit;
+}
+
+.MinWidth5em {
+ min-width: 5em;
+}
+
+.MinWidth10em {
+ min-width: 10em;
+}
+
+.MinWidth15em {
+ min-width: 15em;
+}
+
+.MinWidth20em {
+ min-width: 20em;
+}
+
+.bold {
+ font-weight: bold;
+}
+
+.italic {
+ font-style: italic;
+}
+
+.larger {
+ font-size: 120%;
+}
+
+*|*.narrow {
+ width: 4em;
+}
+
+.menulist-narrow {
+ width: 10em;
+}
+
+.wrap {
+ width: 1em;
+}
+
+.menuitem-highlight-1 {
+ font-weight : bold;
+}
+
+.color-well {
+ width: 30px;
+ height: 12px;
+ border: 1px inset #CCCCCC;
+ margin: auto;
+}
+
+.color-well[default="true"] {
+ border: 1px solid transparent;
+ background-color: inherit;
+}
+
+.color-well + .button-box {
+ display: none;
+}
+
+.color-button {
+ min-width: 0;
+ margin: 2px;
+}
+
+button.color-button .button-text {
+ margin-inline: 0;
+}
+
+#spacingLabel,
+#alignLabel,
+#imagemapLabel {
+ margin-top: 0;
+}
+
+#ColorPickerSwatch {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ margin-inline: -21px 10px;
+ border: 1px solid var(--field-border-color);
+}
+
+#ColorInput {
+ padding-inline-end: 21px;
+}
+
+#LastPickedButton {
+ align-items: center;
+}
+
+#LastPickedColor {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ margin-inline-start: 2px;
+ border: 1px solid var(--field-border-color);
+ order: 2;
+}
+
+/* temporary -- we need a simple box-based list defined in XBL */
+tree.list {
+ border: 1px inset #ccc;
+ /* same as in menulist.css */
+ margin: 1px 5px 2px;
+ /* use rows="#" in XUL to define height */
+}
+
+#ColorPreview {
+ border: 1px inset #ccc;
+ margin-inline-start: 10px;
+ padding: 0 5px;
+ min-width: 100px;
+ min-height: 50px;
+}
+
+#alignTypeSelect {
+ margin-inline-start: 5px;
+}
+
+/* ::::: table properties dialog ::::: */
+
+#NextButton,
+#PreviousButton {
+ list-style-image: url("chrome://global/skin/icons/arrow-left-12.svg");
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+#PreviousButton[type="row"] {
+ list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
+}
+
+#NextButton[type="row"] {
+ list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+}
+
+#NextButton > .button-box > .button-icon,
+#PreviousButton > .button-box > .button-icon {
+ margin-inline-end: 2px;
+}
+
+#NextButton:not([type="row"]) > .button-box > .button-icon {
+ transform: scaleX(-1);
+}
+
+/* ::::: spelling dialog ::::: */
+
+#MisspelledWord {
+ font-weight: bold;
+ max-width: 16em;
+ text-overflow: ellipsis;
+}
+
+#ReplaceWordInput {
+ min-width: 16em;
+ width: 16em;
+}
+
+.spell-check {
+ min-width: 8em;
+}
+
+/* ::::: color picker ::::: */
+
+/* use outset shape for a button look */
+.colorpicker {
+ border: 1px outset #CCCCCC;
+ /* This should be the same as for textbox */
+ margin-inline-start: 4px;
+ /* For a little extra space between buttons */
+ margin-bottom: 2px;
+}
+
+.colorpicker:active {
+ border: 1px inset #CCCCCC;
+}
+
+.smallspacer {
+ width: 3px;
+ height: 3px;
+ min-width: 3px;
+ min-height: 3px;
+}
+
+.spacer {
+ width: 5px;
+ height: 5px;
+ min-width: 5px;
+ min-height: 5px;
+}
+
+.bigspacer {
+ width: 10px;
+ height: 10px;
+ min-width: 10px;
+ min-height: 10px;
+}
+
+/* These should be the width of the checkbox and radio button images + margin + padding
+ Used to indent below those to the level of the text label next to image
+*/
+.checkbox-spacer {
+ width: 2em;
+ min-width: 2em;
+}
+
+.radio-spacer {
+ width: 2em;
+ min-width: 2em;
+}
+
+.align-menu[value="top"] {
+ list-style-image:url("chrome://editor/skin/icons/img-align-top.gif");
+}
+
+.align-menu[value="middle"] {
+ list-style-image:url("chrome://editor/skin/icons/img-align-middle.gif");
+}
+
+.align-menu[value="bottom"] {
+ list-style-image:url("chrome://editor/skin/icons/img-align-bottom.gif");
+}
+
+.align-menu[value="right"] {
+ list-style-image:url("chrome://editor/skin/icons/img-align-right.gif");
+}
+
+.align-menu[value="left"] {
+ list-style-image:url("chrome://editor/skin/icons/img-align-left.gif");
+}
+
+/* Don't change width/height of these without changing values in
+ GetOriginalWidth(), EdImageProps.js
+*/
+#preview-image-box {
+ border: 1px inset #CCCCCC;
+ width: 82px;
+ max-width: 82px;
+ min-width: 82px;
+ height: 52px;
+ max-height: 52px;
+ min-height: 52px;
+ margin: 6px 5px;
+ overflow: clip;
+}
+
+#preview-image-holder {
+ padding: 0;
+ margin: 0;
+}
+
+#tagLabel {
+ font-weight: bold;
+}
+
+.AttributesTree {
+ min-width: 200px;
+ min-height: 200px;
+}
+
+#AddJSEAttributeNameList > menupopup > menuseparator,
+#AddHTMLAttributeNameInput > menupopup > menuseparator {
+ appearance: none;
+ margin-block: 3px;
+ padding-block: 0;
+ border-top-color: #d7d7d7;
+}
+
+html|fieldset {
+ margin: 1em 3px 3px 3px;
+ padding: 3px 0 6px;
+ border: none;
+}
+html|legend {
+ font-weight: bold;
+ margin-top: -1em;
+ margin-inline-start: 3px;
+ padding-inline: 3px;
+}
+
+html|fieldset > hbox,
+html|fieldset > vbox,
+html|fieldset > radiogroup,
+html|fieldset > menulist {
+ width: -moz-available;
+}
+
+html|table html|th {
+ font-weight: normal;
+ text-align: start;
+}
+
+*|*.display-flex {
+ display: flex;
+}
+
+*|*.flex-1 {
+ flex: 1;
+}
+
+#SuggestedList {
+ flex-direction: column;
+ max-height: 10em;
+}
+
+#dictionary-list {
+ list-style-type: none;
+ padding: 6px 3px;
+ margin: 0;
+ max-height: 5em;
+ overflow-y: auto;
+}
+
+html|input[type="checkbox"] {
+ -moz-appearance: checkbox;
+}
+
+/* Advanced Edit dialog */
+
+#HTMLAttrCol,
+#CSSPropCol,
+#AttrCol {
+ flex: 35 35;
+}
+
+#HTMLValCol,
+#CSSValCol,
+#HeaderCol {
+ flex: 65 65;
+}
diff --git a/comm/mail/themes/shared/mail/abContactsPanel.css b/comm/mail/themes/shared/mail/abContactsPanel.css
new file mode 100644
index 0000000000..269ee3d110
--- /dev/null
+++ b/comm/mail/themes/shared/mail/abContactsPanel.css
@@ -0,0 +1,93 @@
+/* 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/. */
+
+/* ===== sidebarPanel.css ===============================================
+ == Styles for the Address Book sidebar panel.
+ ======================================================================= */
+
+@import url("chrome://messenger/skin/messenger.css");
+
+#abContactsPanel:not([lwt-tree]) {
+ --button-background: rgba(128, 128, 128, .15);
+ --button-background-hover: rgba(128, 128, 128, .25);
+ --button-background-active: rgba(128, 128, 128, .35);
+ --box-text-color: MenuText;
+ --box-background-color: Menu;
+ --box-border-color: ThreeDShadow;
+ --field-border-color: rgba(128, 128, 128, .6);
+}
+
+#abContactsPanel {
+ appearance: none;
+ background-color: -moz-Dialog;
+ background-image: none !important;
+ color: -moz-dialogText;
+ text-shadow: none;
+}
+
+#abContactsPanel[lwt-tree] {
+ background-color: var(--toolbar-bgcolor);
+ color: var(--lwt-text-color);
+}
+
+#abContextMenuButton {
+ min-width: 11px;
+ list-style-image: url("chrome://messenger/skin/addressbook/icons/menu.svg");
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+#abContextMenuButton:not(:hover) {
+ background: transparent;
+ border-color: transparent;
+}
+
+#abContextMenuButton:hover:focus-visible {
+ outline-style: none;
+}
+
+#abContextMenuButton > .toolbarbutton-icon {
+ width: 11px;
+ height: 11px;
+}
+
+#abContextMenuButton > .toolbarbutton-text {
+ display: none;
+}
+
+#sidebarAbContextMenu {
+ /* Compensate the arrow-scrollbox padding. */
+ margin: -4px;
+}
+
+#addressbookList:not(:-moz-focusring) {
+ border: 1px solid var(--field-border-color);
+}
+
+#addressbookList:not(:hover,[open="true"]) {
+ background: transparent;
+}
+
+#abResultsTree {
+ border-inline-end: none !important;
+}
+
+/* Hide the twisty gap. */
+treechildren::-moz-tree-twisty {
+ width: 0;
+ padding-inline: 2px;
+}
+
+treechildren::-moz-tree-image(GeneratedName) {
+ margin-inline-end: 2px;
+ list-style-image: var(--icon-contact);
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ opacity: 0.85;
+}
+
+treechildren::-moz-tree-image(GeneratedName, MailList) {
+ list-style-image: var(--icon-user-list);
+}
diff --git a/comm/mail/themes/shared/mail/abFormFields.css b/comm/mail/themes/shared/mail/abFormFields.css
new file mode 100644
index 0000000000..ac0d2cb9a0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/abFormFields.css
@@ -0,0 +1,89 @@
+/* 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/. */
+
+:root {
+ --in-content-button-border-radius: 3px;
+}
+
+@media not (prefers-contrast) {
+ :root {
+ --in-content-button-background: var(--grey-90-a10);
+ --in-content-button-background-hover: var(--grey-90-a20);
+ }
+
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --in-content-button-background: rgba(249, 249, 250, 0.1);
+ --in-content-button-background-hover: rgba(249, 249, 250, 0.15);
+ }
+ }
+}
+
+button {
+ margin: 0;
+ padding: 0 12px;
+ border-radius: var(--in-content-button-border-radius);
+ min-height: var(--in-content-button-height);
+}
+
+button + button {
+ margin-inline-start: 6px;
+}
+
+input[type="number"] {
+ min-height: calc(var(--in-content-button-height) - 4px);
+ padding: 1px;
+ border-radius: var(--in-content-button-border-radius);
+}
+
+/* sizes: chars + 8px padding + 1px borders + spin buttons 25+2+10px */
+input[type="number"].size3 {
+ width: calc(3ch + 55px);
+}
+input[type="number"].size5 {
+ width: calc(5ch + 55px);
+}
+
+input[type="number"]::-moz-number-spin-box {
+ padding-inline-start: 10px;
+}
+
+input[type="number"]::-moz-number-spin-up,
+input[type="number"]::-moz-number-spin-down {
+ appearance: none;
+ min-width: 25px;
+ border: 1px solid var(--in-content-box-border-color);
+ border-radius: 0;
+ background-color: var(--in-content-button-background);
+ background-position: center;
+ background-repeat: no-repeat;
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+input[type="number"]::-moz-number-spin-up:hover,
+input[type="number"]::-moz-number-spin-down:hover {
+ background-color: var(--in-content-button-background-hover);
+}
+
+input[type="number"]::-moz-number-spin-up {
+ min-height: calc(var(--in-content-button-height) * 0.5 - 3px);
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ border-start-end-radius: var(--in-content-button-border-radius);
+ background-image: var(--icon-nav-up-sm);
+}
+
+input[type="number"]::-moz-number-spin-down {
+ min-height: calc(var(--in-content-button-height) * 0.5 - 4px);
+ border-end-end-radius: var(--in-content-button-border-radius);
+ background-image: var(--icon-nav-down-sm);
+}
+
+input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"]) {
+ border-radius: var(--in-content-button-border-radius);
+ padding-block: initial;
+ /* it should be --in-content-button-height but input doesn't include the border */
+ min-height: calc(var(--in-content-button-height) - 2px);
+}
diff --git a/comm/mail/themes/shared/mail/abPrint.css b/comm/mail/themes/shared/mail/abPrint.css
new file mode 100644
index 0000000000..ce5aaa9e75
--- /dev/null
+++ b/comm/mail/themes/shared/mail/abPrint.css
@@ -0,0 +1,88 @@
+/* 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/. */
+
+:root {
+ font-family: sans-serif;
+}
+
+body > div {
+ padding: 0.5em;
+ break-inside: avoid-page;
+ border: 1px solid black;
+ margin: 0.5em;
+}
+
+.contact-header {
+ display: flex;
+ align-items: center;
+}
+
+.contact-photo {
+ margin-inline-end: 0.5em;
+ width: 5em;
+ height: 5em;
+ border-radius: 100%;
+ object-fit: cover;
+ object-position: center;
+}
+
+.contact-headings {
+ flex: 1;
+}
+
+.contact-heading-name {
+ margin-block: 0;
+ font-size: 1.4rem;
+ font-weight: 400;
+}
+
+.contact-heading-nickname {
+ margin-block: 0;
+ font-size: 1.1rem;
+}
+
+.contact-heading-email {
+ /* Don't print this, it's redundant information. */
+ display: none;
+}
+
+.contact-body {
+ column-width: 25em;
+}
+
+section {
+ padding-block: 0.5em;
+ line-height: 1.2;
+ box-sizing: border-box;
+ break-inside: avoid-column;
+}
+
+h2 {
+ margin-block: 0 0.5em;
+ font-size: 1.1rem;
+ line-height: 1.2;
+ font-weight: 500;
+}
+
+.entry-list {
+ display: grid;
+ grid-template-columns: min-content auto;
+ gap: 0.5em;
+ align-items: baseline;
+ margin-block: 0;
+ margin-inline-start: 0.5em;
+ padding: 0;
+ list-style: none inside;
+}
+
+.entry-item {
+ display: contents;
+}
+
+.entry-type {
+ font-size: 0.9rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ opacity: .85;
+}
diff --git a/comm/mail/themes/shared/mail/abResultsPane.css b/comm/mail/themes/shared/mail/abResultsPane.css
new file mode 100644
index 0000000000..9aa7cf9085
--- /dev/null
+++ b/comm/mail/themes/shared/mail/abResultsPane.css
@@ -0,0 +1,22 @@
+/* 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/. */
+
+/* Hide the twisty gap. */
+treechildren::-moz-tree-twisty {
+ width: 0;
+ padding-inline: 2px;
+}
+
+treechildren::-moz-tree-image(GeneratedName) {
+ margin-inline-end: 2px;
+ list-style-image: var(--icon-contact);
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ opacity: 0.85;
+}
+
+treechildren::-moz-tree-image(GeneratedName, MailList) {
+ list-style-image: var(--icon-user-list);
+}
diff --git a/comm/mail/themes/shared/mail/abSearchDialog.css b/comm/mail/themes/shared/mail/abSearchDialog.css
new file mode 100644
index 0000000000..75ca6c8ff8
--- /dev/null
+++ b/comm/mail/themes/shared/mail/abSearchDialog.css
@@ -0,0 +1,18 @@
+/* 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/. */
+
+#searchResults {
+ flex: 1 1 0;
+ min-height: 150px;
+}
+
+#searchResultListBox {
+ flex: 1 1 0;
+ min-height: 0;
+ overflow: hidden;
+}
+
+#abResultsTree {
+ min-height: 0;
+}
diff --git a/comm/mail/themes/shared/mail/about3Pane.css b/comm/mail/themes/shared/mail/about3Pane.css
new file mode 100644
index 0000000000..75a4f9b668
--- /dev/null
+++ b/comm/mail/themes/shared/mail/about3Pane.css
@@ -0,0 +1,631 @@
+/* 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/threadPane.css");
+
+:root {
+ --foldertree-background: -moz-Dialog;
+ --treeitem-border-radius: 3px;
+ --folder-mode-name-padding: 6px;
+ --folder-tree-header-gap: 9px;
+ --folder-tree-header-padding: 9px;
+ --folder-pane-icon-size: 16px;
+ --folder-pane-icon-new: var(--icon-add);
+ --folder-pane-icon-more: var(--icon-more);
+ --folder-pane-icon-download: var(--icon-cloud-download);
+ --folder-pane-icon-kebab: var(--icon-kebab);
+}
+
+@media not (prefers-contrast) {
+ :root {
+ --foldertree-background: var(--color-gray-05);
+ --folderpane-unread-count-background: var(--color-gray-50);
+ --folderpane-unread-count-text: var(--color-white);
+ --folderpane-total-count-background: var(--color-gray-20);
+ --folderpane-total-count-text: var(--color-gray-90);
+ --folderpane-unread-new-count-background: var(--color-blue-60);
+ --treeitem-background-selected: var(--color-gray-20);
+ --treeitem-background-hover: var(--color-gray-10);
+ --treeitem-text-active: var(--color-white);
+ --treeitem-background-active: var(--color-blue-50);
+ --in-content-item-selected-unfocused: var(--color-gray-20);
+ }
+
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --foldertree-background: var(--color-gray-80);
+ --folderpane-unread-new-count-background: var(--color-blue-50);
+ --folderpane-total-count-background: var(--color-gray-60);
+ --folderpane-total-count-text: var(--color-white);
+ --treeitem-background-selected: var(--color-gray-70);
+ --treeitem-background-hover: var(--color-gray-60);
+ --treeitem-background-active: var(--color-blue-60);
+ --in-content-item-selected-unfocused: rgba(249, 249, 250, 0.05);
+ --in-content-primary-button-background: #45a1ff;
+ --in-content-primary-button-background-hover: #65c1ff;
+ --in-content-primary-button-background-active: #85e1ff;
+ --in-content-focus-outline-color: #45a1ff;
+ }
+ }
+}
+
+@media (prefers-contrast) {
+ :root:not(:-moz-lwtheme) {
+ --folderpane-unread-count-background: var(--selected-item-color);
+ --folderpane-unread-count-text: var(--selected-item-text-color);
+ --folderpane-total-count-background: var(--selected-item-color);
+ --folderpane-total-count-text: var(--selected-item-text-color);
+ --folderpane-unread-new-count-background: ButtonShadow;
+ --treeitem-background-selected: transparent;
+ --treeitem-background-hover: transparent;
+ --treeitem-outline-hover: 2px solid var(--selected-item-color);
+ --treeitem-text-active: var(--selected-item-text-color);
+ --treeitem-background-active: var(--selected-item-color);
+ }
+}
+
+:root[lwt-tree] {
+ --foldertree-background: var(--sidebar-background-color);
+ --treeitem-background-selected: color-mix(in srgb, transparent 70%, var(--sidebar-highlight-background-color));
+ --treeitem-background-hover: color-mix(in srgb, transparent 80%, var(--sidebar-highlight-background-color));
+ --treeitem-text-active: var(--sidebar-highlight-text-color);
+ --treeitem-background-active: var(--sidebar-highlight-background-color);
+}
+
+:root[uidensity="compact"] {
+ --folder-mode-name-padding: 3px;
+ --folder-tree-header-gap: 6px;
+ --folder-tree-header-padding: 4px 6px 3px;
+}
+
+:root[uidensity="touch"] {
+ --folder-mode-name-padding: 9px;
+ --folder-tree-header-gap: 12px;
+ --folder-pane-icon-size: 20px;
+ --folder-pane-icon-new: var(--icon-add-md);
+ --folder-pane-icon-more: var(--icon-more-md);
+ --folder-pane-icon-download: var(--icon-cloud-download-md);
+}
+
+
+html {
+ height: 100%;
+}
+
+body {
+ height: 100%;
+ margin: 0;
+ text-shadow: none;
+
+ display: grid;
+ --folderPaneSplitter-width: 18em;
+ --messagePaneSplitter-width: 54em;
+ --messagePaneSplitter-height: 36em;
+}
+
+/* Different layouts */
+
+#folderPane {
+ grid-area: folders;
+ box-sizing: border-box;
+ /* Matches the collapse-width on the splitter. */
+ min-width: 100px;
+ overflow: hidden auto;
+ background-color: var(--sidebar-background-color, var(--foldertree-background));
+ color: var(--sidebar-text-color, inherit);
+ user-select: none;
+}
+
+#folderPaneSplitter {
+ grid-area: folderPaneSplitter;
+}
+
+#threadPane {
+ container-name: threadPane;
+ container-type: inline-size;
+ grid-area: threads;
+ box-sizing: border-box;
+ min-height: 200px;
+ min-width: 300px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+#messagePaneSplitter {
+ grid-area: messagePaneSplitter;
+}
+
+#messagePane {
+ grid-area: message;
+ box-sizing: border-box;
+ /* Matches the collapse-height and collapse-width on the splitter. */
+ min-height: 100px;
+ min-width: 300px;
+ overflow: auto;
+ display: flex;
+}
+
+#accountCentralBrowser {
+ grid-area: account-central;
+ box-sizing: border-box;
+ min-width: 400px;
+}
+
+:is(
+ #messagePane,
+ #folderPane
+).collapsed-by-splitter {
+ /* NOTE: We use "display: none" rather than "visibility: collapse". In the
+ * latter case, the min-width of min-height of the element would still
+ * influence the "auto" track sizing in the grid layout. In the former case
+ * the grid is completely missing a grid item for this track, so the "auto"
+ * size properly reduces to 0, as desired. Note that the track is indeed
+ * missing a grid item because each element in the body is explicitly placed
+ * in a grid-area, which means that there is no auto-placement of the grid
+ * items that would fill the track. */
+ display: none;
+}
+
+/* Classic layout: folder tree on the left, thread tree and message browser on the right. */
+body.layout-classic {
+ grid-template: "folders folderPaneSplitter threads" minmax(auto, 1fr)
+ "folders folderPaneSplitter messagePaneSplitter" min-content
+ "folders folderPaneSplitter message" minmax(auto, var(--messagePaneSplitter-height))
+ / minmax(auto, var(--folderPaneSplitter-width)) min-content minmax(auto, 1fr);
+}
+
+/* Vertical layout: three columns. */
+body.layout-vertical {
+ grid-template: "folders folderPaneSplitter threads messagePaneSplitter message" auto
+ / minmax(auto, var(--folderPaneSplitter-width)) min-content minmax(auto, 1fr) min-content minmax(auto, var(--messagePaneSplitter-width));
+}
+
+/* Wide layout: folder tree and thread tree on the top, and message browser on the bottom. */
+body.layout-wide {
+ grid-template: "folders folderPaneSplitter threads" minmax(auto, 1fr)
+ "messagePaneSplitter messagePaneSplitter messagePaneSplitter" min-content
+ "message message message" minmax(auto, var(--messagePaneSplitter-height))
+ / minmax(auto, var(--folderPaneSplitter-width)) min-content minmax(auto, 1fr);
+}
+
+/* If Account Central is shown, it overrides the layout setting. */
+body.account-central {
+ grid-template: "folders folderPaneSplitter account-central" auto
+ / minmax(auto, var(--folderPaneSplitter-width)) min-content minmax(auto, 1fr);
+}
+
+body.account-central :is(
+ #threadPane,
+ #messagePaneSplitter,
+ #messagePane,
+) {
+ display: none;
+}
+
+body:not(.account-central) #accountCentralBrowser {
+ display: none;
+}
+
+/* Folder tree pane. */
+
+#folderPaneHeaderBar:not([hidden]) {
+ --button-margin: 0;
+ display: flex;
+ flex-direction: row-reverse;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--folder-tree-header-gap);
+ position: sticky;
+ top: 0;
+ background-color: var(--sidebar-background-color, var(--foldertree-background));
+ color: var(--layout-color-2);
+ padding: var(--folder-tree-header-padding);
+ z-index: 1;
+}
+
+#folderPaneGetMessages,
+#folderPaneMoreButton,
+#folderPaneWriteMessage {
+ --icon-size: var(--folder-pane-icon-size);
+}
+
+#folderPaneGetMessages {
+ background-image: var(--folder-pane-icon-download);
+}
+
+#folderPaneGetMessagesContext {
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+#itemGetAllNewMessages {
+ list-style-image: var(--folder-pane-icon-download);
+}
+
+#folderPaneMoreButton {
+ background-image: var(--folder-pane-icon-more);
+}
+
+#folderPaneWriteMessage {
+ background-image: var(--folder-pane-icon-new);
+}
+
+#folderTree,
+#folderTree ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ --depth: 0;
+ --indent: calc(16px * var(--depth));
+}
+
+#folderTree ul {
+ overflow: hidden;
+ height: auto;
+}
+
+#folderTree:focus-visible {
+ outline: none;
+}
+
+#folderTree li[data-mode] {
+ margin-bottom: 3px;
+}
+
+#folderTree > li:not(:first-of-type) > .mode-container {
+ justify-content: space-between;
+ border-top: 1px solid var(--sidebar-border-color, var(--splitter-color));
+}
+
+#folderTree > li.unselectable > .mode-container {
+ margin: 0;
+ border-radius: 0;
+}
+
+#folderTree > li.unselectable > .mode-container:hover {
+ background-color: transparent;
+}
+
+#folderTree > li > .mode-container > .mode-name {
+ font-weight: 600;
+ font-size: 1.1rem;
+ min-height: initial;
+ padding-block: var(--folder-mode-name-padding);
+ padding-inline-start: 12px;
+ flex: 1;
+}
+
+#folderTree > li > .mode-container > .mode-button {
+ background-image: var(--icon-kebab);
+}
+
+#folderPaneHeaderBar[hidden] + #folderTree > li.unselectable:first-of-type > .mode-container {
+ border-top-style: none;
+}
+
+.mode-container:not([hidden]) {
+ display: flex;
+ align-items: center;
+}
+
+.container {
+ display: flex;
+ align-items: center;
+ -moz-context-properties: fill;
+ margin-inline: 6px;
+ border-radius: var(--treeitem-border-radius);
+ fill: currentColor;
+ cursor: default;
+ padding-inline-start: var(--indent);
+}
+
+li.selected > .container {
+ background-color: var(--treeitem-background-selected);
+}
+
+li:not(.selected) > .container:hover {
+ background-color: var(--treeitem-background-hover);
+}
+
+@media (prefers-contrast) {
+ li:not(:focus-visible) > .container:hover {
+ outline: var(--treeitem-outline-hover);
+ outline-offset: -2px;
+ }
+}
+
+li.context-menu-target:not(.selected) > .container,
+li.context-menu-target:not(.selected) > .container:hover {
+ background-color: color-mix(in srgb, var(--treeitem-background-active) 10%, transparent);
+ outline: 1px var(--listbox-border-type) var(--listbox-focused-selected-bg);
+ outline-offset: -1px;
+}
+
+#folderTree:focus-within li.selected > .container,
+#folderTree li.drop-target > .container {
+ background-color: var(--treeitem-background-active);
+ color: var(--treeitem-text-active);
+}
+
+#folderTree li .twisty {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--list-item-buttons-size);
+ height: var(--list-item-buttons-size);
+}
+
+#folderTree li:not(.children) .twisty-icon {
+ display: none;
+}
+
+#folderTree li.children.collapsed > .container .twisty-icon {
+ transform: rotate(-90deg);
+}
+
+#folderTree li.children.collapsed:dir(rtl) > .container .twisty-icon {
+ transform: rotate(90deg);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ #folderTree .twisty-icon {
+ transition: transform var(--transition-duration) var(--transition-timing);
+ }
+}
+
+#folderTree .icon {
+ position: relative;
+ width: 16px;
+ height: 16px;
+ background-image: var(--icon-folder);
+ background-repeat: no-repeat;
+ --icon-color: var(--folder-color-folder);
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, var(--icon-color, var(--folder-color-folder)) 20%, transparent);
+ stroke: var(--icon-color, var(--folder-color-folder));
+}
+
+.new-messages:not([data-server-type]) > .container > .icon::after {
+ position: absolute;
+ content: var(--icon-new-indicator);
+ inset-inline-start: -2px;
+ inset-block-start: -2px;
+}
+
+#folderTree:focus-within li.selected > .container > .icon {
+ --icon-color: currentColor !important; /* Override the user customized folder color. */
+}
+
+#folderTree li[data-server-type] > .container > .icon {
+ --icon-color: var(--primary);
+}
+
+#folderTree li:is([data-server-type="imap"], [data-server-type="pop3"]) > .container > .icon {
+ background-image: var(--icon-mail);
+}
+
+menuitem.server:is([data-server-type="imap"], [data-server-type="pop3"]) {
+ list-style-image: var(--icon-mail);
+}
+
+#folderTree li:is([data-server-type="imap"], [data-server-type="pop3"])[data-server-secure="true"]
+ > .container > .icon {
+ background-image: var(--icon-mail-secure);
+}
+
+menuitem.server:is([data-server-type="imap"], [data-server-type="pop3"])[data-server-secure="true"] {
+ list-style-image: var(--icon-mail-secure);
+}
+
+#folderTree li[data-server-type="none"] > .container > .icon {
+ background-image: var(--icon-folder);
+}
+
+#folderTree li[data-server-type="nntp"] > .container > .icon {
+ background-image: var(--icon-globe);
+}
+
+menuitem.server[data-server-type="nntp"] {
+ list-style-image: var(--icon-globe);
+}
+
+#folderTree li[data-server-type="nntp"][data-server-secure="true"] > .container > .icon {
+ background-image: var(--icon-globe-secure);
+}
+
+menuitem.server[data-server-type="nntp"][data-server-secure="true"] {
+ list-style-image: var(--icon-globe-secure);
+}
+
+#folderTree li[data-server-type="rss"] > .container > .icon {
+ background-image: var(--icon-rss);
+}
+
+#folderTree li[data-server-type="rss"] > ul > li:not([data-folder-type], [data-is-busy="true"]) .icon {
+ --icon-color: currentColor;
+ fill: var(--icon-color);
+}
+
+menuitem.server[data-server-type="rss"] {
+ list-style-image: var(--icon-rss);
+}
+
+#folderTree li[data-folder-type="archive"] > .container > .icon {
+ background-image: var(--icon-archive);
+ --icon-color: var(--folder-color-archive);
+}
+
+#folderTree li[data-folder-type="drafts"] > .container > .icon {
+ background-image: var(--icon-draft);
+ --icon-color: var(--folder-color-draft);
+}
+
+#folderTree li[data-folder-type="inbox"] > .container > .icon {
+ background-image: var(--icon-inbox);
+ --icon-color: var(--folder-color-inbox);
+}
+
+#folderTree li[data-folder-type="junk"] > .container > .icon {
+ background-image: var(--icon-spam);
+ --icon-color: var(--folder-color-spam);
+}
+
+#folderTree li[data-folder-type="outbox"] > .container > .icon {
+ background-image: var(--icon-outbox);
+ --icon-color: var(--folder-color-outbox);
+}
+
+#folderTree li[data-folder-type="sent"] > .container > .icon {
+ background-image: var(--icon-sent);
+ --icon-color: var(--folder-color-sent);
+}
+
+#folderTree li[data-folder-type="templates"] > .container > .icon {
+ background-image: var(--icon-template);
+ --icon-color: var(--folder-color-template);
+}
+
+#folderTree li[data-folder-type="trash"] > .container > .icon {
+ background-image: var(--icon-trash);
+ --icon-color: var(--folder-color-trash);
+}
+
+#folderTree li[data-folder-type="virtual"] > .container > .icon {
+ background-image: var(--icon-folder-filter);
+ --icon-color: var(--folder-color-folder-filter);
+}
+
+#folderTree li[data-server-type="nntp"] ul .icon {
+ background-image: var(--icon-newsletter);
+ --icon-color: var(--folder-color-newsletter);
+}
+
+#folderTree li[data-is-paused="true"] > .container > .icon,
+#folderTree li[data-is-paused="true"] > .container > .name,
+#folderTree li[data-is-paused="true"] ul > li > .container > .icon,
+#folderTree li[data-is-paused="true"] ul > li > .container > .name {
+ opacity: 0.6;
+}
+
+#folderTree li[data-is-busy="true"] > .container > .icon {
+ content: var(--icon-clock) !important;
+ background-image: none;
+ --icon-color: var(--button-primary-background-color);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ #folderTree li[data-is-busy="true"] > .container > .icon {
+ content: var(--icon-loading) !important;
+ animation: activity-indicator-3pane 1.05s steps(30) infinite;
+ object-fit: cover;
+ object-position: 0px 0;
+ }
+ @keyframes activity-indicator-3pane {
+ 100% { object-position: -480px 0; }
+ }
+}
+
+#folderTree li[data-has-error="true"] > .container > .icon {
+ content: var(--icon-warning) !important;
+ background-image: none;
+ fill: var(--color-amber-30);
+ stroke: var(--color-amber-60);
+}
+
+#folderTree li[data-tag-key] > .container > .icon {
+ background-image: var(--icon-tag);
+}
+
+.name {
+ flex: 1;
+ margin-inline: 7px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow-x: hidden;
+}
+
+#folderTree li[data-server-type] > .container > .name {
+ font-weight: bold;
+}
+
+.noselect-folder > .container > .name {
+ font-style: italic;
+ opacity: 0.6;
+}
+
+#folderTree:focus-within li.noselect-folder.selected > .container > .name {
+ opacity: 0.8;
+}
+
+.unread > .container > .name,
+.new-messages > .container > .name {
+ font-weight: bold;
+}
+
+.new-messages > .container > .name {
+ color: var(--new-folder-color);
+}
+
+#folderTree:focus-within li.selected.new-messages > .container > .name {
+ color: currentColor;
+}
+
+.folder-count-badge {
+ display: none;
+ padding: 1px 4px;
+ border-radius: 1000px;
+ color: var(--folderpane-unread-count-text);
+ font-size: 0.85em;
+ font-weight: bold;
+ min-width: 16px;
+ text-align: center;
+ line-height: initial;
+ box-sizing: border-box;
+ margin-inline-end: 6px;
+}
+
+.total-count {
+ font-weight: normal;
+ color: var(--folderpane-total-count-text);
+ background-color: var(--folderpane-total-count-background);
+}
+
+.unread > .container > .unread-count {
+ display: unset;
+ background-color: var(--folderpane-unread-count-background);
+}
+
+.total > .container > .total-count:not([hidden]) {
+ display: unset;
+}
+
+.new-messages > .container > .unread-count {
+ background-color: var(--folderpane-unread-new-count-background);
+}
+
+#folderTree:focus-within li.selected > .container > .unread-count {
+ background-color: var(--folderpane-unread-count-text);
+ color: var(--treeitem-background-active);
+}
+
+.folder-size {
+ font-size: .8rem;
+ font-weight: bold;
+ color: var(--layout-color-3);
+ margin-inline-end: 6px;
+}
+
+#folderTree:focus-within li.selected > .container > .folder-size {
+ color: currentColor;
+}
+
+/* Message browser pane. */
+
+#webBrowser,
+#messageBrowser,
+#multiMessageBrowser {
+ flex: 1;
+}
diff --git a/comm/mail/themes/shared/mail/aboutAddonsExtra.css b/comm/mail/themes/shared/mail/aboutAddonsExtra.css
new file mode 100644
index 0000000000..9fc38f6c5e
--- /dev/null
+++ b/comm/mail/themes/shared/mail/aboutAddonsExtra.css
@@ -0,0 +1,174 @@
+/* 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/icons.css");
+@import url("chrome://messenger/skin/colors.css");
+
+body {
+ /* Override the absolute (px) font-size value in common-shared.css. */
+ font-size: 1.1rem;
+}
+
+#full {
+ grid-template-columns: 18em 1fr;
+}
+
+#sidebar {
+ background-color: var(--in-content-categories-background);
+}
+
+#sidebar > #categories {
+ width: inherit;
+ padding-inline-end: 0;
+}
+
+#categories > .category {
+ border-radius: var(--in-content-button-border-radius);
+ -moz-context-properties: fill, fill-opacity, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+/* Hide Plugins category */
+button[name="plugin"] {
+ display: none;
+}
+
+.sidebar-footer-list > li {
+ margin-inline: 6px;
+ border-radius: var(--in-content-button-border-radius);
+}
+
+@media (max-width: 830px) {
+ #full {
+ grid-template-columns: 60px 1fr;
+ }
+
+ #categories > .category {
+ padding-inline: 12px;
+ }
+
+ .sidebar-footer-list > li > a {
+ margin-inline: auto;
+ }
+}
+
+.category[name="discover"] {
+ background-image: var(--addons-manager-recommendations);
+}
+
+.category[name="extension"] {
+ background-image: var(--addons-manager-extensions);
+}
+
+.category[name="theme"] {
+ background-image: var(--addons-manager-themes);
+}
+
+.category[name="dictionary"] {
+ background-image: var(--addons-manager-dictionaries);
+}
+
+.category[name="locale"] {
+ background-image: var(--addons-manager-languages);
+}
+
+.category[name="sitepermission"] {
+ background-image: var(--addons-manager-site-permissions);
+}
+
+.category[name="available-updates"] {
+ background-image: var(--addons-manager-available-updates);
+}
+
+.category[name="recent-updates"] {
+ background-image: var(--addons-manager-recent-updates);
+}
+
+/* Temporary styles for the supernova icons */
+#preferencesButton .sidebar-footer-icon,
+.page-options-menu > .more-options-button {
+ -moz-context-properties: fill, stroke, stroke-opacity;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+/* Settings icon override */
+#preferencesButton .sidebar-footer-icon {
+ content: var(--icon-settings);
+}
+
+.page-options-menu > .more-options-button {
+ background-image: url("chrome://messenger/skin/icons/new/touch/settings.svg");
+ width: 24px;
+ height: 24px;
+}
+
+.more-options-button {
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+ background-image: var(--icon-more);
+}
+
+/* Hide in extension details the private browsing section */
+section > .addon-detail-row-private-browsing,
+.addon-detail-row-private-browsing + .addon-detail-row.addon-detail-help-row {
+ display: none;
+}
+
+/* Hide the options entry in the options menu, as we have a dedicated button */
+addon-options panel-item[action="preferences"] {
+ display:none;
+}
+
+.extension-options-button {
+ min-width: auto;
+ min-height: auto;
+ width: 24px;
+ height: 24px;
+ margin: 0;
+ margin-inline-start: 8px;
+ -moz-context-properties: fill;
+ fill: currentColor;
+ background-image: url("chrome://messenger/skin/icons/developer.svg");
+ background-repeat: no-repeat;
+ background-position: center center;
+ /* Get the -badged ::after element in the right spot. */
+ padding: 1px;
+ display: flex;
+ justify-content: flex-end;
+}
+
+recommended-addon-card .addon.card:hover {
+ box-shadow: var(--card-shadow-hover);
+ cursor: pointer;
+}
+
+panel-item[action="remove"] {
+ --icon: var(--icon-trash);
+}
+panel-item {
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+/* Override the absolute (px) font-size values in aboutaddons.css. */
+
+.addon-name,
+.disco-addon-name {
+ font-size: 1.25rem;
+ font-weight: 600;
+}
+
+.theme-enable-button,
+.addon-description,
+.disco-addon-author,
+.disco-cta-button {
+ font-size: 1.1rem;
+}
+
+button.tab-button {
+ font-size: 1.1rem;
+}
diff --git a/comm/mail/themes/shared/mail/aboutAddressBook.css b/comm/mail/themes/shared/mail/aboutAddressBook.css
new file mode 100644
index 0000000000..d155fe3d1c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/aboutAddressBook.css
@@ -0,0 +1,1023 @@
+/* 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/preferences/subdialog.css");
+@import url("chrome://messenger/skin/abFormFields.css");
+@import url("chrome://messenger/skin/icons.css");
+
+:root {
+ appearance: none;
+ font: message-box;
+ background-color: var(--layout-background-0);
+
+ --address-book-card-min-height: 140px;
+
+ --ab-card-line-height: 1.3em;
+ --ab-card-table-row-height: 22px;
+}
+
+:root[uidensity="compact"] {
+ --ab-card-line-height: 1em;
+ --ab-card-table-row-height: 18px;
+}
+
+:root[uidensity="touch"] {
+ --ab-card-line-height: 1.4em;
+ --ab-card-table-row-height: 32px;
+}
+
+@media (prefers-contrast) {
+ :root {
+ background-color: transparent;
+ color: currentColor;
+
+ --address-book-cards-list-bg: transparent;
+ --address-book-icons-color: currentColor;
+ }
+}
+
+@media not (prefers-contrast) {
+ :root {
+ background: var(--layout-background-0);
+ color: var(--layout-color-0);
+
+ --address-book-cards-list-bg: var(--layout-background-1);
+ --address-book-icons-color: var(--layout-color-0);
+ }
+}
+
+/* Globals */
+
+.disabled {
+ opacity: 0.5;
+ pointer-events: none;
+}
+
+/* Page layout */
+
+body {
+ --address-book-pane-min-width: 240px;
+ --booksSplitter-width: var(--address-book-pane-min-width);
+ --sharedSplitter-height: 50%;
+ --address-book-cards-pane-min-width: 340px;
+ --sharedSplitter-width: var(--address-book-cards-pane-min-width);
+ --address-book-details-pane-min-width: 500px;
+
+ display: grid;
+ grid-template: "toolbox toolbox toolbox toolbox toolbox" min-content
+ "books booksSplitter cards sharedSplitter details" minmax(auto, 1fr)
+ / minmax(var(--address-book-pane-min-width), var(--booksSplitter-width)) min-content
+ minmax(var(--address-book-cards-pane-min-width), var(--sharedSplitter-width)) min-content
+ minmax(var(--address-book-details-pane-min-width), 1fr);
+ text-shadow: none;
+ font-size: 1.1rem;
+}
+
+body.layout-table {
+ grid-template: "toolbox toolbox toolbox" min-content
+ "books booksSplitter cards" minmax(var(--address-book-card-min-height), 1fr)
+ "books booksSplitter sharedSplitter" min-content
+ "books booksSplitter details" minmax(auto, var(--sharedSplitter-height))
+ / minmax(var(--address-book-pane-min-width), var(--booksSplitter-width)) min-content minmax(var(--address-book-details-pane-min-width), 1fr);
+}
+
+#dialogStack {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
+/* Toolbar */
+
+#toolbox {
+ grid-area: toolbox;
+ font: message-box;
+ font-size: 1rem;
+}
+
+.toolbarbutton-1:focus-visible {
+ outline: var(--in-content-focus-outline);
+}
+
+#toolbarCreateBook {
+ list-style-image: var(--icon-new-address-book);
+}
+
+#toolbarCreateContact {
+ list-style-image: var(--icon-new-contact);
+}
+
+#toolbarCreateList {
+ list-style-image: var(--icon-new-user-list);
+}
+
+#toolbarImport {
+ list-style-image: var(--icon-import);
+}
+
+/* Books pane */
+
+#booksPane {
+ grid-area: books;
+ padding-block-start: 30px;
+ display: flex;
+ flex-direction: column;
+ overflow-y: auto;
+ background-color: var(--layout-background-2);
+}
+
+#booksSplitter {
+ grid-area: booksSplitter;
+}
+
+#books {
+ flex: 1;
+ font-size: 1.1rem;
+ scroll-behavior: smooth;
+ -moz-user-select: none;
+}
+
+#books:focus-visible {
+ outline: none;
+}
+
+#books,
+#books ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+#allAddressBooks {
+ margin-block-end: 10px;
+}
+
+.bookRow-container,
+.listRow-container {
+ display: flex;
+ align-items: center;
+ margin-inline: 6px;
+ border-radius: var(--in-content-button-border-radius);
+ color: var(--listbox-color);
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, var(--address-book-icons-color) 20%, transparent);
+ stroke: var(--address-book-icons-color);
+ cursor: default;
+}
+
+#books:not(:focus) :where(.bookRow, .listRow).selected > :is(.bookRow-container, .listRow-container) {
+ background-color: var(--listbox-selected-bg);
+ outline: var(--listbox-selected-outline);
+ outline-offset: -2px;
+}
+
+.bookRow > .bookRow-container:hover,
+.listRow > .listRow-container:hover {
+ background-color: var(--listbox-hover);
+}
+
+#books:focus :where(.bookRow, .listRow).selected > :is(.bookRow-container, .listRow-container) {
+ background-color: var(--listbox-focused-selected-bg);
+ color: var(--listbox-selected-color);
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+#books:focus .selected .twisty {
+ stroke: currentColor;
+}
+
+.bookRow.drop-target > .bookRow-container,
+.listRow.drop-target > .listRow-container {
+ background-color: var(--in-content-item-selected);
+ color: var(--in-content-item-selected-text);
+}
+
+.bookRow .twisty {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--list-item-buttons-size);
+ height: var(--list-item-buttons-size);
+ -moz-context-properties: stroke;
+ stroke: var(--address-book-icons-color);
+}
+
+.bookRow:not(.children) .twisty-icon {
+ display: none;
+}
+
+.bookRow.children.collapsed .twisty-icon {
+ transform: rotate(-90deg);
+}
+
+.bookRow.children.collapsed:dir(rtl) .twisty-icon {
+ transform: rotate(90deg);
+}
+
+.bookRow-icon,
+.listRow-icon {
+ width: 16px;
+ height: 16px;
+ background-image: var(--addressbook-tree-ab);
+ background-position: center center;
+ background-repeat: no-repeat;
+}
+
+.bookRow.remote .bookRow-icon {
+ background-image: var(--addressbook-tree-remote);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .bookRow.requesting .bookRow-icon {
+ position: relative;
+ overflow: hidden;
+ background: none;
+ }
+
+ .bookRow.requesting .bookRow-icon::before {
+ content: "";
+ position: absolute;
+ background-image: var(--icon-loading);
+ width: 480px;
+ height: 100%;
+ animation: tab-throbber-animation 1.05s steps(30) infinite;
+ }
+
+ .bookRow.requesting .bookRow-icon:dir(rtl)::before {
+ animation-name: tab-throbber-animation-rtl;
+ }
+
+ @keyframes tab-throbber-animation {
+ 0% { transform: translateX(0); }
+ 100% { transform: translateX(-100%); }
+ }
+
+ @keyframes tab-throbber-animation-rtl {
+ 0% { transform: translateX(0); }
+ 100% { transform: translateX(100%); }
+ }
+}
+
+.bookRow-name,
+.listRow-name {
+ flex: 1;
+ margin-inline: 7px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow-x: hidden;
+}
+
+.bookRow > ul {
+ overflow: hidden;
+ height: auto;
+}
+
+.bookRow > ul:empty,
+.bookRow.collapsed > ul {
+ height: 0;
+}
+
+.bookRow-menu,
+.listRow-menu {
+ background-image: var(--icon-more);
+ background-position: center center;
+ background-repeat: no-repeat;
+ width: var(--list-item-buttons-size);
+ height: var(--list-item-buttons-size);
+ display: none;
+}
+
+.bookRow-container:hover .bookRow-menu,
+.listRow-container:hover .listRow-menu,
+#books:focus-visible .bookRow.selected .bookRow-menu,
+#books:focus-visible .listRow.selected .listRow-menu {
+ display: unset;
+}
+
+.listRow-container {
+ padding-inline-start: 51px;
+}
+
+.listRow-icon {
+ background-image: var(--addressbook-tree-list);
+}
+
+/* Cards pane */
+
+#cardsPane {
+ position: relative;
+ grid-area: cards;
+ padding-block-start: 32px;
+ display: flex;
+ flex-direction: column;
+ overflow-y: hidden;
+ background-color: var(--address-book-cards-list-bg);
+}
+
+#cardsPaneHeader {
+ display: flex;
+ margin-block-end: 8px;
+ margin-inline: 6px;
+ align-items: center;
+}
+
+#searchInput {
+ height: var(--in-content-button-height);
+ flex: 1;
+ margin-block: 0;
+ margin-inline: 0 6px;
+ padding-inline: 8px;
+ box-sizing: border-box;
+ border: 1px solid var(--in-content-box-border-color);
+ border-radius: var(--in-content-button-border-radius);
+ color: inherit;
+ background-color: var(--in-content-box-background);
+}
+
+#searchInput:focus {
+ border-color: transparent;
+ outline: 2px solid var(--color-blue-60);
+ outline-offset: -1px;
+}
+
+#displayButton {
+ --button-margin: 0;
+ background-image: var(--icon-display-options);
+}
+
+/* Hide list items for sorting in table view. */
+body.layout-table ~ menupopup#sortContext >
+ :where(menuitem:is([name="sort"], [value="addrbook"]), menuseparator:last-of-type) {
+ display: none;
+}
+
+/* Hide address book toggle in the list view if All Address Book is not selected. */
+body:not(.layout-table):not(.all-ab-selected) ~ menupopup#sortContext >
+ menuitem[value="addrbook"] {
+ display: none;
+}
+
+.all-ab-selected .address-book-name {
+ margin-block-start: auto;
+ opacity: 0.8;
+ flex-shrink: 0;
+ font-weight: initial;
+}
+
+#cards {
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+#cards[rows="ab-card-row"] {
+ border-top: 1px solid var(--splitter-color);
+}
+
+#placeholderEmptyBook::before,
+#placeholderSearchOnly::before {
+ background-image: var(--addressbook-tree-list);
+}
+
+#placeholderCreateContact {
+ color: var(--in-content-primary-button-background);
+}
+
+#placeholderCreateContact::before {
+ background-image: var(--icon-new-contact);
+}
+
+#placeholderSearching::before {
+ background-image: var(--icon-search);
+}
+
+#placeholderNoSearchResults::before {
+ /* TODO: Replace this with a "no results" search icon, like search-not-found.svg but nice. */
+ background-image: var(--icon-search);
+}
+
+tr[is="ab-card-row"] td > .card-container {
+ display: flex;
+ align-items: center;
+ max-height: inherit;
+ box-sizing: border-box;
+}
+
+.selected-card {
+ white-space: nowrap;
+ display: flex;
+ align-items: center;
+}
+
+:is(tr[is="ab-card-row"], .selected-card) .ab-card-row-data {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ line-height: var(--ab-card-line-height);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ flex: 1 1 auto;
+}
+
+:is(tr[is="ab-card-row"], .selected-card) :is(.ab-card-first-line, .ab-card-second-line) {
+ display: flex;
+ justify-content: space-between;
+ margin-block: 0;
+ font-size: 1rem;
+ position: relative;
+}
+
+:is(tr[is="ab-card-row"], .selected-card) span {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+:is(tr[is="ab-card-row"], .selected-card) .name {
+ font-size: 1.1rem;
+ font-weight: 500;
+}
+
+:is(tr[is="ab-card-row"], .selected-card) :is(.name, .address) {
+ flex: 1 1 auto;
+}
+
+tr[is="ab-card-row"] :is(.ab-card-first-line, .ab-card-second-line) {
+ line-height: 1.3;
+}
+
+:root[uidensity="compact"] tr[is="ab-card-row"] :is(.ab-card-first-line, .ab-card-second-line) {
+ line-height: 1.2;
+}
+
+:root[uidensity="touch"] tr[is="ab-card-row"] :is(.ab-card-first-line, .ab-card-second-line) {
+ line-height: 1.4;
+}
+
+@media (-moz-platform: windows) {
+ :root[uidensity="compact"] tr[is="ab-card-row"] :is(.ab-card-first-line, .ab-card-second-line) {
+ line-height: 1.4;
+ }
+}
+
+tr[is="ab-card-row"]:not(.selected) .ab-card-second-line {
+ color: var(--in-content-deemphasized-text);
+}
+
+tr[is="ab-card-row"].selected .recipient-avatar.is-mail-list {
+ color: currentColor;
+}
+
+/* Details pane */
+
+#sharedSplitter {
+ grid-area: sharedSplitter;
+}
+
+body.is-editing #sharedSplitter {
+ z-index: 2;
+}
+
+body.layout-table #sharedSplitter {
+ width: auto !important;
+}
+
+body:not(.layout-table) #sharedSplitter {
+ height: auto !important;
+}
+
+#detailsPane.collapsed-by-splitter,
+#sharedSplitter.splitter-collapsed {
+ display: none;
+}
+
+#detailsPane {
+ grid-area: details;
+ min-height: var(--address-book-card-min-height);
+ user-select: text;
+}
+
+#detailsPane:not([hidden]) {
+ display: grid;
+ grid-template: "scroll-content" 1fr
+ "footer" auto / 1fr;
+}
+
+#editContactForm {
+ display: contents;
+}
+
+.contact-details-scroll {
+ grid-area: scroll-content;
+ overflow: auto;
+ padding: 21px;
+}
+
+#detailsFooter {
+ grid-area: footer;
+ padding: 21px;
+ background-color: var(--in-content-page-background);
+}
+
+.contact-details-scroll > *,
+#detailsFooter {
+ /* Fits two #detailsBody and vcard-edit columns. */
+ max-width: 64em;
+}
+
+body.is-editing #detailsPane {
+ z-index: 2;
+ background-color: var(--in-content-page-background);
+ color: var(--in-content-page-color);
+ box-shadow: 0 2px 6px -5px #000;
+}
+
+#detailsPaneBackdrop {
+ grid-column: 1 / -1;
+ grid-row: 2 / -1;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 1;
+}
+
+body:not(.is-editing) #detailsPaneBackdrop {
+ display: none;
+}
+
+body.is-editing #viewContact {
+ display: none;
+}
+
+body:not(.is-editing) #editContactForm {
+ display: none;
+}
+
+.contact-header:not([hidden]) {
+ display: grid;
+ grid-template: "photo headings" auto / auto 1fr;
+ align-items: center;
+ gap: 1em;
+ margin-bottom: 15px;
+}
+
+#photoInput {
+ display: contents;
+}
+
+#photoButton,
+#viewContactPhoto {
+ grid-area: photo;
+}
+
+.contact-photo {
+ width: 100px;
+ height: 100px;
+ border-radius: 100%;
+ object-fit: cover;
+ object-position: center;
+ background-color: var(--in-content-button-background);
+ -moz-context-properties: stroke;
+ stroke: color-mix(in srgb, transparent 50%, var(--recipient-avatar-color));
+}
+
+#photoButton {
+ position: relative;
+ border-radius: 100%;
+ padding: 0;
+ margin: 0;
+}
+
+#photoButton:hover {
+ background: none;
+}
+
+#photoOverlay {
+ position: absolute;
+ inset: 0;
+ border-radius: 100%;
+}
+
+#photoButton:focus-visible {
+ outline: 2px solid var(--in-content-focus-outline-color);
+ outline-offset: 2px;
+}
+
+#photoButton:is(:focus-visible, :hover) #photoOverlay {
+ background-color: #0003;
+ background-image: var(--icon-more);
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: 48px;
+ -moz-context-properties: stroke;
+ stroke: #fff;
+ cursor: pointer;
+}
+
+.contact-headings:not([hidden]) {
+ grid-area: headings;
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ word-break: break-word;
+}
+
+.contact-heading-name,
+.contact-headings p {
+ margin-block: 0;
+}
+
+.contact-heading-name {
+ font-size: 1.6rem;
+ font-weight: 400;
+}
+
+.contact-heading-nickname {
+ font-size: 1.2rem;
+ color: var(--in-content-deemphasized-text);
+}
+
+.contact-heading-email {
+ margin-block: 0;
+ font-size: 1.1rem;
+ font-weight: 400;
+ color: var(--in-content-deemphasized-text);
+}
+
+.list-header:not([hidden]),
+.selection-header:not([hidden]) {
+ display: flex;
+ align-items: center;
+ margin-bottom: 15px;
+}
+
+.list-header .recipient-avatar {
+ width: 50px;
+ height: 50px;
+}
+
+#detailsBody {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(31.5em, 1fr));
+ grid-template-rows: masonry;
+ gap: 1em;
+}
+
+#detailsActions {
+ grid-column: 1 / -1;
+}
+
+#detailsBody section {
+ padding: 15px;
+ border-radius: var(--in-content-button-border-radius);
+ border: 1px solid var(--in-content-box-info-border);
+ background-color: var(--in-content-box-info-background);
+ font-size: 1.1rem;
+ line-height: 1.2;
+}
+
+.button-block:not([hidden]) {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ row-gap: 6px;
+}
+
+.button-block div {
+ display: flex;
+ align-items: center;
+}
+
+.edit-block {
+ flex: 1;
+ justify-content: end;
+}
+
+.icon-button:not([hidden]) {
+ min-width: 0;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 5px;
+ background-color: transparent;
+ --in-content-button-border-color: transparent;
+}
+
+.icon-button:hover {
+ background-color: var(--in-content-button-background);
+}
+
+.icon-button:hover:active {
+ background-color: var(--in-content-button-background-active);
+}
+
+.icon-button::before {
+ content: "";
+ width: 16px;
+ height: 16px;
+ -moz-context-properties: fill, stroke, fill-opacity;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ fill-opacity: var(--toolbarbutton-icon-fill-opacity);
+}
+
+#detailsWriteButton::before {
+ background-image: var(--icon-pencil);
+}
+
+#detailsEventButton::before {
+ background-image: var(--icon-new-event);
+}
+
+#detailsSearchButton::before {
+ background-image: var(--icon-search);
+}
+
+#detailsNewListButton::before {
+ background-image: var(--icon-new-user-list);
+}
+
+#detailsBody h2 {
+ margin-block: 0 15px;
+ font-size: 1.1rem;
+ line-height: 1.2;
+ font-weight: 500;
+}
+
+.entry-list {
+ display: grid;
+ grid-template-columns: min-content auto;
+ gap: 6px;
+ align-items: baseline;
+ margin-block: 0;
+ margin-inline-start: 9px;
+ padding: 0;
+ list-style: none inside;
+}
+
+.entry-item {
+ display: contents;
+}
+
+.entry-type {
+ font-size: 0.9rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ opacity: .85;
+}
+
+.entry-value {
+ word-break: break-all;
+}
+
+section#notes div {
+ white-space: pre-wrap;
+ overflow-wrap: break-word;
+}
+
+section#selectedCards {
+ width: 31.5em;
+ grid-column: 1 / -1;
+ margin-inline: auto;
+}
+
+section#selectedCards ul {
+ margin: 0;
+ padding: 0;
+ list-style: none inside;
+ display: flex;
+ flex-direction: column;
+ row-gap: 12px;
+}
+
+#detailsDeleteButton {
+ color: var(--vcard-delete-button-color);
+}
+
+#detailsDeleteButton:hover {
+ background-color: var(--vcard-delete-button-color);
+ color: var(--color-white);
+}
+
+#detailsDeleteButton:hover:active {
+ background-color: var(--red-70);
+}
+
+#detailsDeleteButton::before,
+.icon-button-delete {
+ background-image: var(--icon-trash);
+}
+
+#detailsFooter label {
+ margin: 0 4px;
+ white-space: nowrap;
+}
+
+#detailsFooter menulist:not([hidden]) {
+ margin-inline: 4px;
+ min-height: var(--in-content-button-height);
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+#detailsFooter menulist > menupopup {
+ --panel-padding: 4px 0;
+ --panel-border-color: var(--arrowpanel-border-color);
+ --panel-border-radius: var(--arrowpanel-border-radius);
+}
+
+input[type="number"] {
+ min-height: 28px;
+ padding: 1px;
+ border-radius: var(--in-content-button-border-radius);
+}
+
+/* sizes: chars + 8px padding + 1px borders + spin buttons 25+2+10px */
+input[type="number"].size3 {
+ width: calc(3ch + 55px);
+}
+input[type="number"].size5 {
+ width: calc(5ch + 55px);
+}
+
+input[type="number"]::-moz-number-spin-box {
+ padding-inline-start: 10px;
+}
+
+input[type="number"]::-moz-number-spin-up,
+input[type="number"]::-moz-number-spin-down {
+ appearance: none;
+ min-width: 25px;
+ border: 1px solid var(--in-content-box-border-color);
+ border-radius: 0;
+ background-color: var(--in-content-button-background);
+ background-position: center;
+ background-repeat: no-repeat;
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+input[type="number"]::-moz-number-spin-up:hover,
+input[type="number"]::-moz-number-spin-down:hover {
+ background-color: var(--in-content-button-background-hover);
+}
+
+input[type="number"]::-moz-number-spin-up {
+ min-height: calc(var(--in-content-button-height) * 0.5 - 2px);
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ border-start-end-radius: var(--in-content-button-border-radius);
+ background-image: url("chrome://global/skin/icons/arrow-up-12.svg");
+}
+
+input[type="number"]::-moz-number-spin-down {
+ min-height: calc(var(--in-content-button-height) * 0.5 - 3px);
+ border-end-end-radius: var(--in-content-button-border-radius);
+ background-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+}
+
+/* Photo dialog */
+
+#photoDialogInner {
+ width: 500px;
+ text-align: center;
+}
+
+#photoDropTarget {
+ height: 100px;
+ background-color: var(--in-content-button-background);
+ background-image: var(--icon-user);
+ background-size: 80px;
+ background-position: center;
+ -moz-context-properties: stroke;
+ stroke: var(--in-content-box-background);
+ background-repeat: no-repeat;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+#photoDropTarget[hidden] {
+ display: none;
+}
+
+#photoDropTarget .icon {
+ display: none;
+ margin-inline-end: 8px;
+ width: 16px;
+ height: 16px;
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .bookRow-container,
+ .listRow-container,
+ .twisty {
+ transition:
+ color var(--transition-duration) var(--transition-timing),
+ background-color var(--transition-duration) var(--transition-timing),
+ fill var(--transition-duration) var(--transition-timing),
+ stroke var(--transition-duration) var(--transition-timing);
+ }
+
+ .bookRow .twisty-icon {
+ transition: transform var(--transition-duration) var(--transition-timing);
+ }
+
+ #photoDropTarget.drop-loading .icon {
+ display: unset;
+ position: relative;
+ overflow: hidden;
+ text-align: start;
+ }
+
+ #photoDropTarget.drop-loading .icon::before {
+ content: "";
+ position: absolute;
+ background-image: url("chrome://messenger/skin/icons/loading.svg");
+ width: 480px;
+ height: 100%;
+ animation: tab-throbber-animation 1.05s steps(30) infinite;
+ }
+
+ #photoDropTarget.drop-loading .icon:dir(rtl)::before {
+ animation-name: tab-throbber-animation-rtl;
+ }
+
+ @keyframes tab-throbber-animation {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-100%);
+ }
+ }
+
+ @keyframes tab-throbber-animation-rtl {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(100%);
+ }
+ }
+}
+
+#photoDropTarget.drop-error .icon {
+ display: unset;
+ background-image: url("chrome://global/skin/icons/warning.svg");
+ background-size: contain;
+}
+
+#photoDialog svg {
+ margin: -10px;
+}
+
+#photoDialog svg[hidden] {
+ display: none;
+}
+
+#photoDialog rect {
+ fill: transparent;
+}
+
+#photoDialog rect:not(.corner) {
+ shape-rendering: crispEdges;
+ stroke: #fff;
+ stroke-width: 1px;
+}
+
+#photoDialog .corner.nw {
+ cursor: nw-resize;
+}
+
+#photoDialog .corner.ne {
+ cursor: ne-resize;
+}
+
+#photoDialog .corner.se {
+ cursor: se-resize;
+}
+
+#photoDialog .corner.sw {
+ cursor: sw-resize;
+}
+
+#photoDialog .extra1 {
+ margin-inline-end: auto;
+}
+
+#cardCount {
+ position: sticky;
+ bottom: 0;
+ background-color: var(--in-content-categories-background);
+ border-top: 1px solid var(--splitter-color);
+ color: color-mix(in srgb, currentColor 75%, transparent);
+ padding: 9px;
+ margin-block-start: 6px;
+ font-weight: 500;
+ font-size: 1rem;
+}
diff --git a/comm/mail/themes/shared/mail/aboutDownloads.css b/comm/mail/themes/shared/mail/aboutDownloads.css
new file mode 100644
index 0000000000..5fd6b119c6
--- /dev/null
+++ b/comm/mail/themes/shared/mail/aboutDownloads.css
@@ -0,0 +1,131 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+@media not (prefers-contrast) {
+ :root {
+ --in-content-button-background: var(--grey-90-a10);
+ --in-content-button-background-hover: var(--grey-90-a20);
+ --in-content-button-background-active: var(--grey-90-a30);
+ }
+
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --in-content-button-background: rgba(249, 249, 250, 0.1);
+ --in-content-button-background-hover: rgba(249, 249, 250, 0.15);
+ --in-content-button-background-active: rgba(249, 249, 250, 0.2);
+ --in-content-primary-button-background: #45a1ff;
+ --in-content-focus-outline-color: #45a1ff;
+ }
+ }
+}
+
+body {
+ color: var(--in-content-page-color);
+ background: var(--in-content-page-background);
+ text-shadow: none;
+}
+
+#downloadTopBox {
+ background-color: var(--toolbar-bgcolor);
+ padding: 10px 18px;
+ border-bottom: 1px solid var(--chrome-content-separator-color);
+}
+
+#downloadBottomBox {
+ padding: 15px 18px;
+}
+
+#downloadBottomBox:-moz-lwtheme {
+ text-shadow: none;
+}
+
+#msgDownloadsRichListBox {
+ margin-block: 0;
+}
+
+#msgDownloadsRichListBox > .download {
+ min-height: 5em;
+ border-bottom: 1px solid hsla(0, 0%, 50%, .3);
+ border-radius: 3px;
+}
+
+#msgDownloadsRichListBox > .download > vbox {
+ display: flex;
+ flex-direction: column;
+}
+
+#clearDownloads {
+ margin-inline-start: 0;
+ padding: 0 12px;
+ border-radius: 3px;
+ font-weight: 400;
+}
+
+#searchBox {
+ width: 22em;
+ margin-inline-end: 0;
+}
+
+.fileTypeIcon {
+ margin-inline: 8px;
+ /* explicitly size the icon, so size doesn't vary on hidpi systems */
+ height: 32px;
+ width: 32px;
+}
+
+.sender,
+.fileName {
+ margin-block: 3px;
+ font-weight: 600;
+}
+
+.sender[value=""] {
+ display: none;
+}
+
+.size,
+.startDate {
+ opacity: 0.7;
+ margin-block: 3px;
+}
+
+.downloadButton {
+ align-items: center;
+ background: transparent !important;
+ min-width: 0;
+ height: unset;
+ margin: 0;
+ border: none !important;
+ outline: none !important;
+ color: inherit;
+ padding: 0 12px;
+}
+
+.downloadButton > .button-box {
+ appearance: none;
+ padding: 8px;
+}
+
+.downloadButton > .button-box > .button-icon {
+ width: 16px;
+ height: 16px;
+ margin: 0;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+.downloadButton > .button-box > .button-text {
+ display: none;
+}
+
+.downloadButton:hover > .button-box {
+ background-color: var(--in-content-button-background-hover);
+ border-radius: 50%;
+}
+
+.downloadButton:hover:active > .button-box {
+ background-color: var(--in-content-button-background-active);
+}
diff --git a/comm/mail/themes/shared/mail/aboutImport.css b/comm/mail/themes/shared/mail/aboutImport.css
new file mode 100644
index 0000000000..9d81f4a029
--- /dev/null
+++ b/comm/mail/themes/shared/mail/aboutImport.css
@@ -0,0 +1,431 @@
+/* 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/colors.css");
+
+:root {
+ --main-title-size: 1.8rem;
+ --title-icon-margin: 8px;
+}
+
+*[hidden] {
+ display: none !important;
+}
+
+body {
+ text-shadow: none;
+ background-color: rgba(0, 0, 0, 0.03);
+}
+
+h1 {
+ padding-top: 0;
+ margin: 0 0 8px;
+ font-size: var(--main-title-size);
+ font-weight: 300;
+ line-height: 1.3;
+}
+
+h2 {
+ margin: 0 0 4px;
+ font-size: 1.4rem;
+ font-weight: 600;
+ line-height: 1.4;
+}
+
+.light-heading {
+ font-weight: 300;
+}
+
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+p {
+ line-height: 1.8em;
+ margin: 0;
+}
+
+progress {
+ width: 100%;
+}
+
+dl {
+ display: grid;
+ grid-template-columns: [label] max-content [value] minmax(min-content, auto);
+ column-gap: 1ch;
+}
+
+dl div {
+ display: grid;
+ grid-column: 1 / 3;
+ grid-template-columns: subgrid;
+ grid-template-rows: subgrid;
+}
+
+dt {
+ font-weight: 600;
+ grid-area: label;
+}
+
+dd {
+ grid-area: value;
+ margin: 0;
+}
+
+#csvFieldMap table {
+ margin-top: 1rem;
+ table-layout: fixed;
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 1rem;
+}
+
+#csvFieldMap th {
+ font-weight: 600;
+}
+
+#csvFieldMap th,
+#csvFieldMap td {
+ border-bottom: 1px solid var(--in-content-page-color);
+}
+
+#csvFieldMap th:last-child {
+ width: 2rem;
+}
+
+#csvFieldMap td:last-child {
+ text-align: end;
+}
+
+#csvFieldMap {
+ margin-top: 2rem;
+ display: block;
+}
+
+#csvFieldMap select {
+ line-height: 1.2;
+ background-position-x: right 10px;
+ padding-inline-start: 8px;
+ margin-inline-start: 0;
+ width: 100%;
+}
+
+#csvFieldMap select:dir(rtl) {
+ background-position-x: left 10px;
+}
+
+#csvFieldMap input {
+ margin-top: 4px;
+}
+
+#main {
+ margin: 4em;
+ min-width: 400px;
+ max-width: 600px;
+}
+
+#main .buttons-container {
+ margin-top: 1.5em;
+ display: flex;
+ justify-content: space-between;
+}
+
+#main .buttons-container button {
+ margin: 0;
+}
+
+#main .buttons-container .continue {
+ margin-inline-start: auto;
+}
+
+.tabPane > section {
+ background-color: var(--in-content-box-background);
+ border-radius: var(--in-content-button-border-radius);
+ padding: 2em calc(var(--main-title-size) + var(--title-icon-margin) + 1em);
+}
+
+.tabPane h1 {
+ position: relative;
+}
+
+.tabPane h1::before {
+ content: "";
+ background-repeat: no-repeat;
+ background-position: bottom center;
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ color: var(--primary);
+ margin-inline-end: var(--title-icon-margin);
+ position: absolute;
+ inset-inline-start: calc(-1 * (var(--main-title-size) + var(--title-icon-margin)));
+}
+
+#tabPane-start.tabPane h1::before {
+ background-image: var(--icon-import-lg);
+}
+
+#tabPane-export.tabPane h1::before {
+ background-image: var(--icon-export-lg);
+}
+
+.source-list {
+ padding: 1em 0;
+}
+
+.profile-list {
+ padding-top: 0.5em;
+}
+
+.option-list {
+ padding: 1em 0;
+ list-style: none;
+}
+
+#calendarItemsTools {
+ margin-top: 1rem;
+ display: flex;
+ align-items: center;
+}
+
+#calendarItemsTools input {
+ flex: 1;
+ padding-inline: 0.5rem;
+ height: 32px;
+}
+
+#calendar-item-list {
+ height: 60vh;
+ overflow: auto;
+ background-color: rgba(215, 215, 219, 0.2);
+ margin-top: 1rem;
+ margin-inline: 2px;
+}
+
+.calendar-item-wrapper {
+ margin: 1rem;
+ padding: 1rem;
+ display: flex;
+ background: var(--in-content-page-background);
+}
+
+.notificationbox-stack notification-message:last-child {
+ margin-block-end: 12px;
+}
+
+/* Override common.css */
+.toggle-container-with-text {
+ grid-template-columns: min-content 1fr;
+ display: grid;
+ grid-template-areas:
+ "i text"
+ ". desc";
+ margin-block: 1em;
+ line-height: 1.5;
+}
+
+.toggle-container-with-text:last-child {
+ margin-block-end: 0;
+}
+
+.toggle-container-with-text input {
+ grid-area: i;
+}
+
+.toggle-container-with-text p:last-of-type {
+ grid-area: desc;
+}
+
+.toggle-container-with-text p:first-of-type {
+ grid-area: text;
+}
+
+.toggle-container-with-text .tip-caption dt {
+ color: var(--in-content-page-color);
+}
+
+#tabPane-export p {
+ margin-bottom: 1rem;
+}
+
+/* Override calendar-item-summary.css */
+calendar-item-summary {
+ font-size: 1rem;
+ width: 100%;
+}
+
+.calendar-caption {
+ display: none;
+}
+
+.item-description {
+ border: 1px solid var(--in-content-page-color);
+ margin: 2px 4px 0;
+ min-height: 10em;
+}
+
+.summary-items {
+ list-style-image: var(--icon-check);
+ list-style-position: inside;
+ -moz-context-properties: stroke;
+ stroke: var(--color-green-60);
+ line-height: 1.8;
+}
+
+.tabPane > section > .center-button,
+.center-button {
+ margin-inline: auto;
+}
+
+.center-button {
+ display: block;
+ margin-block: 1em;
+}
+
+a.center-button {
+ max-width: max-content;
+}
+
+.progressPane,
+.center {
+ text-align: center;
+}
+
+/* Conditionally visible elements */
+.restart-only,
+.progressFinish,
+.progressPane {
+ display: none;
+}
+
+.restart-required .restart-only {
+ display: inherit;
+}
+
+.progress .before-progress {
+ display: none;
+}
+
+.progress .progressPane,
+.complete .progressFinish {
+ display: inherit;
+}
+
+.final-step .next-button,
+.restart-required .no-restart {
+ display: none;
+}
+
+.complete .progressFinish.center-button {
+ display: block;
+}
+
+/* Icons */
+.icon {
+ object-fit: contain;
+ vertical-align: middle;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+.icon.info {
+ color: var(--primary);
+}
+
+.icon.warn {
+ color: var(--color-orange-40);
+}
+
+.back {
+ background-image: var(--icon-nav-left);
+ background-repeat: no-repeat;
+ background-position: 0.5em center;
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+ padding-inline-start: 1em;
+}
+
+.back:dir(rtl) {
+ background-image: var(--icon-nav-right);
+ background-position-x: right 0.5em;
+}
+
+#importFooter {
+ margin-block-start: 4em;
+ text-align: center;
+}
+
+/* Navigation steps */
+
+#stepNav {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ margin-block-end: 2em;
+ margin-inline: 1em;
+ --step-size: var(--in-content-button-height);
+}
+
+#stepNav li {
+ flex-grow: 1;
+ font-size: 1.4rem;
+ display: flex;
+ align-items: center;
+}
+
+#stepNav li:first-child {
+ flex-grow: 0;
+}
+
+#stepNav button {
+ border-radius: var(--step-size);
+ height: var(--step-size);
+ width: var(--step-size);
+ min-width: var(--step-size);
+ padding: 0;
+ margin: 0;
+ opacity: 1;
+ box-sizing: border-box;
+ font-weight: 600;
+}
+
+#stepNav li:not(:first-child)::before {
+ content: "";
+ border-block-start: 2px dashed var(--in-content-button-background);
+ display: block;
+ margin-block-start: 1px;
+ flex-grow: 1;
+}
+
+#stepNav li.current button {
+ border: 3px solid var(--primary);
+ background: var(--in-content-box-background);
+ color: var(--primary);
+}
+
+#stepNav li.completed button {
+ background: var(--primary);
+ color: var(--in-content-box-background);
+}
+
+#stepNav li.completed:not(:first-child)::before,
+#stepNav li.current:not(:first-child)::before {
+ border-block-start: 2px solid var(--primary);
+}
+
+#navConfirm button {
+ border-radius: var(--in-content-button-border-radius);
+ width: auto;
+ font-size: 1rem;
+ padding-inline: 0.5em;
+}
diff --git a/comm/mail/themes/shared/mail/aboutPolicies.css b/comm/mail/themes/shared/mail/aboutPolicies.css
new file mode 100644
index 0000000000..2217e30a6a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/aboutPolicies.css
@@ -0,0 +1,159 @@
+/* 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://global/skin/in-content/common.css");
+
+html {
+ height: 100%;
+}
+
+body {
+ display: flex;
+ align-items: stretch;
+ height: 100%;
+}
+
+#sectionTitle {
+ float: inline-start;
+ padding-inline-start: 1rem;
+}
+
+/** Categories **/
+
+.category {
+ cursor: pointer;
+ /* Center category names */
+ display: flex;
+ align-items: center;
+}
+
+.category .category-name {
+ pointer-events: none;
+}
+
+#categories hr {
+ border-top-color: rgba(255,255,255,0.15);
+}
+
+/** Content area **/
+
+.main-content {
+ flex: 1;
+}
+
+.tab {
+ padding: 0.5em 0;
+}
+
+.tab table {
+ width: 100%;
+}
+
+tbody tr {
+ transition: background cubic-bezier(.07, .95, 0, 1) 250ms;
+}
+
+tbody tr:hover {
+ background-color: var(--in-content-item-hover);
+}
+
+th, td, table {
+ border-collapse: collapse;
+ border: none;
+ text-align: start;
+}
+
+th {
+ padding: 1rem;
+ font-size: larger;
+}
+
+td {
+ padding: 1rem;
+}
+
+/*
+ * In Documentation Tab, this property sets the policies row in an
+ * alternate color scheme of white and grey as each policy comprises
+ * of two tbody tags, one for the description and the other for the
+ * collapsible information block.
+ */
+
+.active-policies tr.odd:not(:hover),
+.errors tr:nth-child(odd):not(:hover),
+tbody:nth-child(4n + 1) {
+ background-color: var(--in-content-box-background-odd);
+}
+
+.arr_sep.odd:not(:last-child) td:not(:first-child) {
+ border-bottom: 2px solid #f9f9fa;
+}
+
+.arr_sep.even:not(:last-child) td:not(:first-child) {
+ border-bottom: 2px solid #ededf0;
+}
+
+.last_row:not(:last-child) td {
+ border-bottom: 2px solid #d7d7db !important;
+}
+
+.icon {
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: 16px;
+ -moz-context-properties: fill;
+ display: inline-block;
+ fill: var(--newtab-icon-primary-color);
+ height: 14px;
+ vertical-align: middle;
+ width: 14px;
+ margin-top: -.125rem;
+ margin-left: .5rem;
+}
+
+.collapsible {
+ cursor: pointer;
+ border: none;
+ outline: none;
+}
+
+.content {
+ display: none;
+}
+
+.content-style {
+ background-color: var(--in-content-box-background);
+ color: var(--blue-50);
+}
+
+tbody.collapsible td {
+ padding-bottom: 1rem;
+}
+
+.schema {
+ font-family: monospace;
+ white-space: pre;
+ direction: ltr;
+}
+
+/*
+ * The Active tab has two messages: one for when the policy service
+ * is inactive and another for when the there are no specified
+ * policies. The three classes below control which message to display
+ * or to show the policy table.
+ */
+.no-specified-policies > table,
+.inactive-service > table {
+ display: none;
+}
+
+:not(.no-specified-policies) > .no-specified-policies-message,
+:not(.inactive-service) > .inactive-service-message {
+ display: none;
+}
+
+.no-specified-policies-message,
+.inactive-service-message {
+ padding: 1rem;
+}
diff --git a/comm/mail/themes/shared/mail/aboutSupport.css b/comm/mail/themes/shared/mail/aboutSupport.css
new file mode 100644
index 0000000000..288950dc79
--- /dev/null
+++ b/comm/mail/themes/shared/mail/aboutSupport.css
@@ -0,0 +1,67 @@
+/* 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/. */
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --in-content-button-background: rgba(249, 249, 250, 0.1);
+ --in-content-button-background-hover: rgba(249, 249, 250, 0.15);
+ --in-content-button-background-active: rgba(249, 249, 250, 0.2);
+ --in-content-primary-button-background: #45a1ff;
+ --in-content-primary-button-background-hover: #65c1ff;
+ --in-content-primary-button-background-active: #85e1ff;
+ --in-content-focus-outline-color: #45a1ff;
+ }
+}
+
+#support-buttons {
+ display: flex;
+}
+
+#support-buttons > div {
+ display: inherit;
+ align-items: center;
+}
+
+#contents.show-private-data .data-public {
+ display: none;
+}
+
+#contents:not(.show-private-data) .data-private {
+ display: none;
+}
+
+#safe-mode-box > h3 {
+ margin-top: 0;
+}
+
+#check-show-private-data {
+ margin-inline-end: 3px;
+ vertical-align: text-bottom;
+}
+
+.gray-text {
+ color: #888;
+}
+
+.thead-level2 > th {
+ background-color: hsl(0, 0%, 60%);
+}
+
+td.data-private {
+ background-color: #ff9;
+ color: #333;
+}
+
+.calendar-table > thead > th:nth-of-type(1) {
+ width: 25%;
+}
+
+.calendar-table + .calendar-table {
+ margin-top: 50px;
+}
+
+.calendar-table caption {
+ margin-bottom: 5px;
+ font-weight: bold;
+}
diff --git a/comm/mail/themes/shared/mail/accountCentral.css b/comm/mail/themes/shared/mail/accountCentral.css
new file mode 100644
index 0000000000..343901fbb7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/accountCentral.css
@@ -0,0 +1,527 @@
+/* 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/messenger.css");
+@import url("chrome://messenger/skin/icons.css");
+
+html {
+ height: 100%;
+}
+
+:root {
+ --bg-color: #ffffff;
+ --bg-watermark: url("chrome://messenger/skin/images/account-watermark.png");
+ --header-bg-color: rgba(0, 0, 0, 0.05);
+ --accounts-bg-color: rgba(0, 0, 0, 0.03);
+ --text-color: #36385A;
+ --title-color: #002275;
+ --primary-color: #0a84ff;
+ --primary-color-hover: #0060df;
+ --btn-color: #36385A;
+ --btn-color-hover: #FFFFFF;
+ --btn-bg: #FFFFFF;
+ --btn-bg-hover: #0060df;
+ --btn-shadow-hover: rgba(0, 0, 0, 0.3);
+ --popup-bg: #EDEDF0;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --bg-color: #2f2f33;
+ --bg-watermark: url("chrome://messenger/skin/images/account-watermark-light.png");
+ --header-bg-color: rgba(255, 255, 255, 0.05);
+ --accounts-bg-color: rgba(255, 255, 255, 0.03);
+ --text-color: #f9f9fa;
+ --title-color: #fefefe;
+ --primary-color: #0a84ff;
+ --primary-color-hover: #0a84ff;
+ --btn-color: #FFFFFF;
+ --btn-color-hover: #FFFFFF;
+ --btn-bg: #38383d;
+ --btn-bg-hover: #0060df;
+ --btn-shadow-hover: rgba(0, 0, 0, 0.3);
+ --popup-bg: #474749;
+ }
+}
+
+:root[lwt-tree-brighttext] {
+ --bg-color: #2f2f33;
+ --bg-watermark: url("chrome://messenger/skin/images/account-watermark-light.png");
+ --header-bg-color: rgba(255, 255, 255, 0.05);
+ --accounts-bg-color: rgba(255, 255, 255, 0.03);
+ --text-color: #f9f9fa;
+ --title-color: #fefefe;
+ --primary-color: #0a84ff;
+ --primary-color-hover: #0a84ff;
+ --btn-color: #FFFFFF;
+ --btn-color-hover: #FFFFFF;
+ --btn-bg: #38383d;
+ --btn-bg-hover: #0060df;
+ --btn-shadow-hover: rgba(0, 0, 0, 0.3);
+ --popup-bg: #474749;
+}
+
+body {
+ /* Overwrite rules in messenger.css. */
+ display: block;
+ overflow: auto;
+ margin: 0;
+ height: 100vh;
+ background-color: var(--body-background-color);
+ text-shadow: none;
+}
+
+#accountCentral {
+ display: flex;
+ flex-direction: column;
+ background-color: var(--bg-color);
+ background-image: var(--bg-watermark);
+ background-position: bottom right;
+ background-repeat: no-repeat;
+ color: var(--text-color);
+ height: 100%;
+}
+
+#brandLogo {
+ width: 64px;
+ height: 64px;
+ margin-inline-end: 20px;
+ flex-shrink: 0;
+}
+
+#accountLogo {
+ -moz-context-properties: fill, stroke, stroke-opacity;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ color: var(--primary-color);
+ width: 20px;
+ height: 20px;
+ margin-inline-end: 10px;
+ flex-shrink: 0;
+ background: var(--account-central-mail) center no-repeat;
+ background-size: contain;
+ display: block;
+}
+
+#accountLogo[type="none"] {
+ background-image: var(--account-central-folder);
+}
+
+#accountLogo[type="rss"] {
+ background-image: var(--account-central-rss);
+}
+
+#accountLogo[type="nntp"] {
+ background-image: var(--account-central-globe);
+ margin-block-start: 3px;
+}
+
+.account-central-header {
+ display: flex;
+ align-items: center;
+ background-color: var(--header-bg-color);
+ padding: 20px 30px;
+}
+
+.account-central-header.summary-header {
+ padding-block: 16px;
+}
+
+[hidden] {
+ display: none !important; /* Ensure flex items obey hidden="hidden". */
+}
+
+.account-central-header > aside {
+ display: flex;
+ align-items: center;
+ width: 160px;
+ flex: 1 1 auto;
+}
+
+aside.settings-btn-container {
+ justify-content: end;
+}
+
+.account-central-title {
+ font-size: x-large;
+ margin-inline-end: 6px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ margin-block: 0;
+}
+
+#accountName {
+ font-size: 1.2em;
+ font-weight: 600;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ margin-block: 0;
+ /* Prevents UI jumping when dynamically changing the content. */
+ min-height: 21px;
+}
+
+.account-central-version {
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+ font-size: small;
+ margin-top: 10px;
+ line-height: 1em;
+}
+
+.account-central-version > label {
+ margin-inline: 0 1px;
+}
+
+#releasenotes {
+ cursor: pointer;
+}
+
+#releasenotes img {
+ color: var(--primary-color);
+ -moz-context-properties: fill, stroke, stroke-opacity;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ fill-opacity: 1;
+ width: 16px;
+ height: 16px;
+ margin-inline-start: 3px;
+}
+
+#releasenotes img:hover,
+#releasenotes img:focus {
+ color: var(--primary-color-hover);
+}
+
+.account-central-section {
+ display: flex;
+ flex-direction: column;
+ padding-inline: 30px;
+ padding-block: 10px;
+ position: relative;
+}
+
+.account-central-section.setup-section {
+ padding-block-end: 30px;
+}
+
+.account-central-section.zebra {
+ background-color: var(--accounts-bg-color);
+}
+
+#accountFeaturesSection {
+ margin-block-start: 20px;
+}
+
+.section-title {
+ font-size: larger;
+ font-weight: 600;
+ color: var(--title-color);
+ margin-block: 10px 20px;
+ /* Prevents UI jumping when dynamically changing the content. */
+ min-height: 21px;
+}
+
+.row-container {
+ margin-inline: -10px;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.row-container > p {
+ flex: 1;
+ display: block;
+ min-width: 300px;
+ max-width: 550px;
+ margin-inline: 10px;
+ margin-block: 0 20px;
+}
+
+.row-container.account-options > .btn-link {
+ margin-inline: 5px 15px;
+ padding-inline: 5px;
+}
+
+/* Custom buttons style */
+.btn-hub {
+ transition: background-color 280ms ease,
+ color 280ms ease,
+ box-shadow 280ms ease;
+ appearance: none;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.1em;
+ color: var(--btn-color);
+ background-color: var(--btn-bg);
+ -moz-context-properties: fill, stroke, stroke-opacity;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ min-width: 110px;
+ height: 90px;
+ padding: 10px;
+ border: none;
+ border-radius: 4px;
+ margin-inline: 10px;
+ margin-block-end: 10px;
+ cursor: pointer;
+ box-shadow: 0 5px 20px -5px var(--btn-shadow-hover);
+}
+
+.btn-hub:not([disabled="true"]):hover {
+ color: var(--btn-color-hover) !important;
+ background-color: var(--btn-bg-hover);
+ box-shadow: 0 14px 16px -12px var(--btn-shadow-hover),
+ inset 20px 20px 50px -30px rgba(255, 255, 255, .35);
+}
+
+.btn-hub.btn-inline {
+ flex-direction: row;
+ width: auto;
+ height: auto;
+ padding: 8px 12px;
+ justify-content: flex-start;
+ min-width: 140px;
+}
+
+.btn-hub:focus:not(:hover) {
+ color: var(--primary-color) !important;
+}
+
+.btn-hub::before {
+ position: relative;
+ display: block;
+ content: '';
+ margin-block-end: 10px;
+ margin-inline-end: 0;
+ width: 20px;
+ height: 20px;
+ color: var(--primary-color);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: contain;
+ transition: color 280ms ease;
+}
+
+.btn-hub.btn-inline::before {
+ margin-block-end: 0;
+ margin-inline-end: 10px;
+ width: 16px;
+ height: 16px;
+}
+
+.btn-hub:hover::before {
+ color: var(--btn-color-hover) !important;
+}
+
+#setupEmail::before {
+ background-image: var(--account-central-mail);
+}
+
+#setupCalendar::before {
+ background-image: var(--account-central-calendar);
+}
+
+#setupAddressBook::before {
+ background-image: var(--account-central-address-book);
+}
+
+#setupChat::before {
+ background-image: var(--account-central-chat);
+}
+
+#setupFilelink::before {
+ background-image: var(--account-central-link);
+}
+
+#setupFeeds::before,
+#rssSubscriptionButton::before {
+ background-image: var(--account-central-rss);
+}
+
+#nntpSubscriptionButton::before {
+ background-image: var(--account-central-globe);
+}
+
+#setupNewsgroups::before {
+ background-image: var(--account-central-newsletter);
+}
+
+#importButton::before {
+ background-image: var(--icon-import);
+}
+
+#setupEmail.btn-inline::before {
+ background-image: var(--icon-mail);
+}
+
+#setupCalendar.btn-inline::before {
+ background-image: var(--icon-calendar);
+}
+
+#setupAddressBook.btn-inline::before {
+ background-image: var(--icon-address-book);
+}
+
+#setupChat.btn-inline::before {
+ background-image: var(--icon-chat);
+}
+
+#setupFilelink.btn-inline::before {
+ background-image: var(--icon-link);
+}
+
+#setupFeeds.btn-inline::before,
+#rssSubscriptionButton.btn-inline::before {
+ background-image: var(--icon-rss);
+}
+
+#nntpSubscriptionButton.btn-inline::before {
+ background-image: var(--icon-newsletter);
+}
+
+#setupNewsgroups.btn-inline::before {
+ background-image: var(--icon-newsletter);
+}
+
+
+.account-description {
+ position: absolute;
+ opacity: 0;
+ top: 100%;
+ margin-top: -30px;
+ width: 90vw;
+ left: 30px;
+ text-align: left;
+ transition: opacity 280ms ease;
+ z-index: 1;
+}
+
+.account-description > p {
+ display: inline-block;
+ background-color: var(--popup-bg);
+ padding: 4px 8px;
+ border-radius: 4px;
+ box-shadow: 0 2px 5px -4px rgba(0, 0, 0, 0.8);
+}
+
+.btn-hub:hover + .account-description {
+ opacity: 1;
+}
+
+/* Custom link style */
+.donation-link {
+ color: var(--primary-color);
+ font-style: italic;
+ font-weight: 600;
+ transition: color .2s;
+ cursor: pointer;
+}
+
+.donation-link:hover {
+ color: var(--primary-color-hover);
+}
+
+.donation-link:focus:not(:hover) {
+ outline: 1px dotted var(--selected-item-color);
+}
+
+.btn-link {
+ appearance: none;
+ display: flex;
+ background-color: transparent;
+ -moz-context-properties: fill, stroke, stroke-opacity;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ border: none;
+ cursor: pointer;
+ padding: 0;
+ line-height: 1em;
+ align-items: center;
+ transition: color .2s;
+}
+
+.btn-link.btn-inline {
+ margin-block-end: 20px;
+}
+
+.resource-link {
+ color: var(--text-color);
+ -moz-context-properties: fill, stroke, stroke-opacity;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ margin-block-end: 10px;
+ margin-inline: 10px 30px;
+ transition: color .2s;
+ cursor: pointer;
+}
+
+.btn-link::before,
+.resource-link::before {
+ position: relative;
+ display: inline-block;
+ content: '';
+ background-repeat: no-repeat;
+ width: 16px;
+ height: 16px;
+ margin-inline-end: 5px;
+ vertical-align: sub;
+}
+
+.btn-link:hover,
+.resource-link:hover {
+ color: var(--primary-color-hover) !important;
+ background-color: transparent;
+}
+
+.resource-link:focus:not(:hover) {
+ outline: 1px dotted var(--selected-item-color);
+}
+
+#featuresLink::before {
+ background-image: var(--icon-features);
+}
+
+#supportLink::before {
+ background-image: var(--icon-question);
+}
+
+#involvedLink::before {
+ background-image: var(--icon-handshake);
+}
+
+#developerLink::before {
+ background-image: var(--icon-tools);
+}
+
+#settingsButton {
+ padding-inline: 3px;
+}
+
+#settingsButton::before {
+ background-image: var(--icon-account-settings);
+}
+
+#readButton::before {
+ background-image: var(--icon-inbox);
+}
+
+#composeButton::before {
+ background-image: var(--icon-pencil);
+}
+
+#searchButton::before {
+ background-image: var(--icon-search);
+}
+
+#filterButton::before {
+ background-image: var(--icon-filter);
+}
+
+#e2eButton::before {
+ background-image: var(--icon-key);
+}
diff --git a/comm/mail/themes/shared/mail/accountHub.css b/comm/mail/themes/shared/mail/accountHub.css
new file mode 100644
index 0000000000..e12b5024b8
--- /dev/null
+++ b/comm/mail/themes/shared/mail/accountHub.css
@@ -0,0 +1,349 @@
+/* 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/colors.css");
+@import url("chrome://messenger/skin/widgets.css");
+@import url("chrome://global/skin/in-content/common.css");
+@import url("chrome://messenger/skin/inContentDialog.css");
+@import url("chrome://messenger/skin/accountHubForms.css");
+
+dialog {
+ --hub-button-color: var(--color-gray-90);
+ --hub-button-background: var(--color-white);
+ --hub-account-button-background: transparent;
+ --hub-account-button-background-hover: var(--color-ink-10);
+ --hub-account-button-background-hover-active: var(--color-gray-10);
+ --hub-account-button-border-color: var(--color-gray-30);
+
+ --hub-input-height: 33px;
+ --hub-input-border-radius: 3px;
+}
+
+@media not (prefers-contrast) {
+ @media (prefers-color-scheme: dark) {
+ dialog {
+ --hub-button-color: var(--color-gray-05);
+ --hub-button-background: var(--color-gray-90);
+ --hub-account-button-background: var(--color-gray-70);
+ --hub-account-button-background-hover: var(--color-gray-80);
+ --hub-account-button-background-hover-active: var(--color-gray-90);
+ --hub-account-button-border-color: var(--color-gray-60);
+ }
+ }
+}
+
+@media (prefers-contrast) {
+ dialog {
+ --hub-button-color: currentColor;
+ --hub-button-background: transparent;
+ --hub-account-button-background: transparent;
+ --hub-account-button-background-hover: transparent;
+ --hub-account-button-background-hover-active: transparent;
+ --hub-account-button-border-color: AccentColor;
+ }
+}
+
+/* Dialog container */
+
+.account-hub-dialog {
+ display: grid;
+ min-width: 660px;
+ min-height: 360px;
+ max-width: 680px;
+ max-height: 70vh;
+}
+
+.account-hub-view:not([hidden]),
+.account-hub-form {
+ display: grid;
+ grid-template: "header" min-content
+ "body" minmax(auto, 1fr)
+ "footer" min-content;
+ gap: 21px;
+ text-align: center;
+}
+
+/* Typography */
+
+dialog h1 {
+ font-weight: 300;
+ font-size: 1.8rem;
+ line-height: 1em;
+ margin-block: 0;
+}
+
+dialog h1.sub-view-title {
+ font-size: 1.7rem;
+ font-weight: 400;
+ margin-block-start: 9px;
+}
+
+/* Header */
+
+.start-header {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 15px;
+}
+
+.start-header h1 {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+#closeButton:not([hidden]) {
+ min-width: 0;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 5px;
+ background-color: transparent;
+ --in-content-button-border-color: transparent;
+}
+
+#closeButton:hover {
+ background-color: var(--in-content-button-background);
+}
+
+#closeButton:hover:active {
+ background-color: var(--in-content-button-background-active);
+}
+
+#closeButton {
+ position: absolute;
+ inset-inline-end: 15px;
+ inset-block-start: 15px;
+ appearance: none;
+ border: none;
+ border-radius: 50%;
+ width: 21px;
+ height: 21px;
+}
+
+#closeButton:hover {
+ background-color: var(--button-hover-background-color);
+}
+#closeButton:hover:active {
+ background-color: var(--button-active-background-color);
+}
+
+#closeButton img {
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+ content: var(--icon-close);
+}
+
+#welcomeHeader > img {
+ width: 90px;
+ height: 90px;
+}
+
+#defaultHeader > img {
+ width: 60px;
+ height: 60px;
+}
+
+#defaultHeader .start-header-brand-name {
+ font-size: 1.3rem;
+}
+
+#defaultHeader .start-header-title {
+ font-size: 2rem;
+}
+
+#welcomeHeader h1 {
+ font-size: 1.4rem;
+ gap: 12px;
+}
+
+#welcomeHeader h1 > span {
+ font-size: 2.5rem;
+}
+
+#welcomeHeader h1 > span > small {
+ font-size: 1rem;
+ font-weight: 400;
+}
+
+.hub-header {
+ grid-area: header;
+}
+
+/* Body */
+
+.hub-body {
+ grid-area: body;
+ display: flex;
+ gap: 30px;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ margin-inline: 30px;
+}
+
+.hub-body-grid {
+ display: flex;
+ gap: 21px;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.button-account {
+ width: 170px;
+ min-height: 93px;
+ font-size: 1.2rem;
+ font-weight: normal;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 3px;
+ margin: 0;
+ padding: 12px;
+ color: var(--hub-button-color);
+ background-color: var(--hub-account-button-background);
+ border: 1px solid var(--hub-account-button-border-color);
+ box-shadow: 0 4px 6px -6px rgba(0, 0, 0, 0.3), inset 0 0 0 transparent;
+}
+
+.button-account:hover {
+ color: var(--hub-button-color) !important;
+ background-color: var(--hub-account-button-background-hover) !important;
+ box-shadow: 0 8px 12px -8px rgba(0, 0, 0, 0.3), inset 0 0 0 transparent;
+}
+
+.button-account:hover:active {
+ color: var(--hub-button-color) !important;
+ background-color: var(--hub-account-button-background-hover-active) !important;
+ box-shadow: 0 0 0 transparent, inset 0 4px 6px -2px rgba(0, 0, 0, 0.4);
+}
+
+.button-account::before {
+ display: block;
+ content: '';
+ width: 24px;
+ height: 24px;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, var(--primary) 10%, transparent);
+ stroke: var(--primary);
+ background-size: 24px;
+ background-repeat: no-repeat;
+ background-position: center;
+}
+
+#emailButton::before {
+ background-image: var(--icon-mail-lg);
+}
+
+#newEmailButton::before {
+ background-image: var(--icon-new-mail);
+}
+
+#calendarButton::before {
+ background-image: var(--icon-calendar-lg);
+}
+
+#addressBookButton::before {
+ background-image: var(--icon-address-book-lg);
+}
+
+#chatButton::before {
+ background-image: var(--icon-chat-lg);
+}
+
+#feedButton::before {
+ background-image: var(--icon-rss);
+}
+
+#newsgroupButton::before {
+ background-image: var(--icon-newsletter);
+}
+
+#importButton::before {
+ background-image: var(--icon-import-lg);
+}
+
+#hubSyncButton {
+ align-self: center;
+ position: relative;
+ padding: 9px 12px;
+ font-weight: normal;
+ font-size: 1.2rem;
+ line-height: 1;
+ border: none;
+ color: var(--hub-button-color);
+ background-color: var(--hub-button-background);
+}
+
+#hubSyncButton:hover {
+ color: var(--hub-button-color);
+ background-color: var(--hub-account-button-background-hover);
+}
+
+#hubSyncButton::before {
+ content: var(--icon-account-sync);
+ display: inline-block;
+ margin-inline-end: 12px;
+ vertical-align: middle;
+}
+
+#hubSyncButton::after {
+ content: '';
+ position: absolute;
+ background: var(--color-blue-50);
+ background-image: linear-gradient(127deg, var(--color-teal-50), var(--color-magenta-50));
+ inset: -2px;
+ border-radius: 8px;
+ filter: blur(10px);
+ opacity: 0.6;
+ z-index: -1;
+ transform: scale(0.95) translateY(5px);
+}
+
+#hubSyncButton:hover::after {
+ transform: scale(0.85) translateY(8px);
+ filter: blur(15px);
+}
+
+#hubSyncButton:hover:active::after {
+ transform: scale(1) translateY(0px);
+ filter: blur(3px);
+}
+
+/* Footer */
+
+.hub-footer {
+ grid-area: footer;
+}
+
+.footer-links {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 3px 6px;
+ justify-content: center;
+}
+
+.footer-links li:not([hidden]) ~ li:not([hidden])::before {
+ content: "·";
+ margin-inline-end: 6px;
+}
+
+/* Animations */
+
+@media (prefers-reduced-motion: no-preference) {
+ .button-account {
+ transition: background 220ms ease, box-shadow 200ms ease;
+ }
+
+ #hubSyncButton {
+ transition: background 220ms ease;
+ }
+
+ #hubSyncButton::after {
+ transition: transform 200ms ease, filter 200ms ease;
+ }
+}
diff --git a/comm/mail/themes/shared/mail/accountHubForms.css b/comm/mail/themes/shared/mail/accountHubForms.css
new file mode 100644
index 0000000000..30887a24be
--- /dev/null
+++ b/comm/mail/themes/shared/mail/accountHubForms.css
@@ -0,0 +1,114 @@
+/* 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/. */
+
+form {
+ grid-row: header / footer;
+}
+
+form .hub-body {
+ align-items: stretch;
+ justify-content: flex-start;
+ place-self: center;
+ gap: 0;
+ width: 100%;
+ max-width: 400px;
+ text-align: start;
+ margin-inline: 0;
+}
+
+form label {
+ font-size: 1.1rem;
+ line-height: 1;
+ margin-block-end: 3px;
+}
+
+.input-control {
+ display: flex;
+ align-items: center;
+ margin-block-end: 21px;
+}
+
+.input-control.vertical {
+ flex-direction: column;
+ align-items: stretch;
+}
+
+form .input-field {
+ flex: 1;
+ margin-inline: 0;
+ padding-block: 0;
+ padding-inline-end: 33px;
+ min-height: var(--hub-input-height);
+ border-radius: var(--hub-input-border-radius);
+}
+
+.form-icon {
+ cursor: pointer;
+ width: 16px;
+ height: 16px;
+ -moz-context-properties: fill, fill-opacity, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ fill-opacity: 0.7;
+ margin-inline: -26px 10px;
+}
+
+.form-toggle-button {
+ cursor: pointer;
+ appearance: none;
+ background: transparent;
+ border: none;
+ padding: 0 4px;
+ margin-inline: -30px 6px;
+ min-width: auto;
+ min-height: auto;
+ margin-block: 0;
+ line-height: 0;
+}
+
+.form-toggle-button:hover,
+.form-toggle-button:active {
+ background-color: transparent !important;
+}
+
+.form-toggle-button .form-icon {
+ pointer-events: none;
+ margin-inline: 0;
+}
+
+#password:placeholder-shown + .form-toggle-button {
+ display: none;
+}
+
+#password[type="password"] + .form-toggle-button .form-icon {
+ content: var(--icon-hidden);
+}
+
+#password[type="text"] + .form-toggle-button .form-icon {
+ content: var(--icon-eye);
+}
+
+#password[type="text"] + .form-toggle-button {
+ color: var(--in-content-primary-button-background);
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+.icon-warning {
+ display: none;
+ color: var(--orange-50);
+ fill-opacity: 1;
+}
+
+input:user-invalid ~ .form-icon {
+ display: none;
+}
+
+input:user-invalid ~ .icon-warning {
+ display: inline-block;
+}
+
+.remember-button-container {
+ margin-block-start: -18px;
+}
diff --git a/comm/mail/themes/shared/mail/accountManage.css b/comm/mail/themes/shared/mail/accountManage.css
new file mode 100644
index 0000000000..40d156815f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/accountManage.css
@@ -0,0 +1,606 @@
+/* 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/. */
+
+/* ===== accountManage.css ==============================================
+ == Styles for the Mail Account Manager.
+ ======================================================================= */
+
+@import url("chrome://global/skin/global.css");
+@import url("chrome://global/skin/in-content/common.css");
+@import url("chrome://messenger/skin/preferences/preferences.css");
+@import url("chrome://messenger/skin/colors.css");
+
+@media (prefers-contrast) {
+ :root {
+ --in-content-accent-color: var(--selected-item-color);
+ }
+}
+
+#containerBox {
+ width: 100%;
+ max-width: 800px;
+ padding-block: 40px;
+ padding-inline: 24px 28px;
+}
+
+fieldset {
+ margin: 0 0 32px;
+ padding: initial;
+ border-style: none;
+}
+
+fieldset:last-of-type {
+ margin-bottom: 0;
+}
+
+.openpgp-more-btn > menupopup {
+ appearance: none;
+ font-size: 1em;
+ --panel-border-color: var(--in-content-box-border-color);
+ --panel-border-radius: 2px;
+ --panel-background: var(--in-content-box-background);
+ --panel-color: var(--in-content-text-color);
+ --panel-padding: 0;
+}
+
+.openpgp-more-btn > menupopup > menuitem {
+ appearance: none;
+ color: var(--in-content-text-color);
+ padding-block: 0.2em;
+ padding-inline: 10px 30px;
+}
+
+.openpgp-more-btn > menupopup > menuitem[_moz-menuactive="true"] {
+ color: var(--in-content-item-hover-text);
+ background-color: var(--in-content-item-hover);
+}
+
+.openpgp-more-btn > menupopup > menuitem[selected="true"] {
+ color: var(--in-content-item-selected-text);
+ background-color: var(--in-content-item-selected);
+}
+
+.openpgp-more-btn > menupopup > menuseparator {
+ appearance: none;
+ margin: 0;
+ padding: 0;
+ border-top: 1px solid var(--in-content-box-border-color);
+ border-bottom: none;
+}
+
+#archiveHierarchyButton,
+#globalJunkPrefsLink {
+ margin-inline-end: 8px;
+}
+
+#archiveTree > treechildren::-moz-tree-image {
+ -moz-context-properties: fill, fill-opacity, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+/* ::::: account manager :::::: */
+
+.header {
+ font-size: 1.1em;
+ font-weight: 600;
+ line-height: 1.4em;
+ margin-block: 16px 4px;
+ padding-bottom: 0;
+}
+
+.input-container:not([hidden="true"]) {
+ display: flex;
+ align-items: center;
+}
+
+.input-container.container-column:not([hidden="true"]) {
+ flex-direction: column;
+}
+
+.input-container:not([hidden="true"]) > .input-inline {
+ flex: 1;
+}
+
+menulist.input-inline {
+ margin: 2px 4px;
+}
+
+.identity-table {
+ margin-inline-end: 14px;
+}
+
+menupopup[is="folder-menupopup"] {
+ appearance: none;
+}
+
+menulist > menupopup menu,
+menulist > menupopup menuitem {
+ padding-inline-end: 5px;
+}
+
+/* Needed for additional menupopup levels */
+menulist > menupopup menupopup {
+ font: inherit;
+}
+
+menulist > menupopup menupopup > menu,
+menulist > menupopup menupopup > menuitem {
+ border: 1px solid transparent;
+}
+
+menulist > menupopup menupopup > menu:not([disabled="true"])[_moz-menuactive="true"],
+menulist > menupopup menupopup > menuitem:not([disabled="true"])[_moz-menuactive="true"] {
+ color: var(--in-content-text-color);
+ background-color: var(--in-content-item-hover);
+}
+
+menulist > menupopup menupopup > menu[disabled="true"],
+menulist > menupopup menupopup > menuitem[disabled="true"] {
+ color: #999;
+ /* override the [_moz-menuactive="true"] background color from
+ global/menu.css */
+ background-color: transparent;
+}
+
+menulist > menupopup .menu-right {
+ appearance: none;
+ -moz-context-properties: fill;
+ list-style-image: url("chrome://global/skin/icons/arrow-left-12.svg");
+ fill: currentColor;
+}
+
+menulist > menupopup .menu-right:-moz-locale-dir(ltr) {
+ transform: scaleX(-1);
+}
+
+menulist > menupopup menupopup menuseparator {
+ appearance: none;
+ margin: 0;
+ padding: 0;
+ border-top: 1px solid var(--in-content-box-border-color);
+ border-bottom: none;
+}
+
+.specialFolderPickerGrid {
+ margin-inline-start: 20px;
+}
+
+.fccReplyFollowsParent {
+ margin-inline-start: 20px;
+}
+
+.signatureBox {
+ font-family: -moz-fixed;
+}
+
+richlistitem[default="true"],
+#identitiesList > richlistitem:first-child {
+ font-weight: bold;
+}
+
+.label-inline {
+ margin-block: auto;
+ min-width: 200px;
+}
+
+.option-description {
+ margin-inline-start: 30px;
+ margin-block-start: 3px;
+}
+
+#defaultPort,
+#servertypeVerbose,
+#identity\.htmlSigFormat {
+ margin-inline-start: 4px;
+}
+
+#identity\.signature {
+ margin-block: 4px;
+}
+
+#autosyncNotDownload {
+ margin-inline-end: 12px;
+}
+
+#whiteListAbURI richlistitem {
+ padding-inline-start: 10px;
+}
+
+#whiteListAbURI checkbox {
+ -moz-user-focus: none;
+}
+
+#identitiesList richlistitem {
+ align-items: center;
+ padding-inline-start: 10px;
+ height: 34px;
+}
+
+#identityDialog.doScroll {
+ margin-inline: 0;
+}
+
+#identityDialog.doScroll::part(content-box) {
+ contain: initial;
+}
+
+#identityTabsPanels > vbox {
+ overflow-y: auto;
+ height: calc(100vh - 7em); /* Don't include the tabbar and buttons. */
+}
+
+/* ::::: Server Settings :::::: */
+
+#amServerSetting {
+ display: inline-grid;
+ grid-template-columns: max-content 1fr auto;
+}
+
+#amServerSetting div:not([hidden]) {
+ /* Do not override display: none when hidden. */
+ display: flex;
+ align-items: center;
+}
+
+#amServerSetting .input-flex {
+ flex-grow: 1;
+ width: 14ch;
+}
+
+/* ::::: SMTP Server Panel :::::: */
+
+.smtpServerListItem {
+ align-items: center;
+ padding-inline-start: 10px;
+ height: 34px;
+}
+
+#smtpServerInfoBox {
+ padding: 9px;
+ border: 1px solid var(--in-content-border-color);
+ border-radius: 4px;
+ border-spacing: 0;
+ background-color: rgba(215, 215, 219, 0.2);
+}
+
+#smtpServerInfoBox th {
+ height: 1.7em;
+ padding: 0;
+ text-align: end;
+ width: 10%;
+ white-space: nowrap;
+}
+
+#smtpServerInfoBox td {
+ padding: 0;
+ padding-inline-start: 8px;
+}
+
+/* ::::: dialog header ::::: */
+
+.dialogheader-title {
+ margin-block: 0 8px;
+ margin-inline-start: 0;
+ font-size: 1.46em;
+ font-weight: 300;
+ line-height: 1.3em;
+ color: var(--in-content-text-color);
+}
+
+.identity-table th {
+ font-weight: normal;
+ text-align: left;
+}
+
+.identity-table td {
+ padding-inline-end: 10px;
+}
+
+.identity-table td input {
+ width: 100%;
+}
+
+/* ::::: e2e encryption ::::: */
+
+#openPgpKey {
+ -moz-context-properties: fill, stroke, fill-opacity;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ fill-opacity: 0.5;
+ width: 48px;
+ height: 48px;
+ margin-inline-end: 10px;
+}
+
+/* Add a bit of space to the end of descriptions to
+ * leave margin with e.g. additional buttons on the side. */
+.description-with-side-element {
+ margin-inline-end: 10px !important;
+}
+
+.openpgp-description p {
+ margin-block: 0 6px;
+}
+
+.openpgp-status {
+ vertical-align: text-top;
+ -moz-context-properties: fill, stroke;
+ margin-inline-end: 2px;
+ width: 16px;
+}
+
+.openpgp-status.status-success {
+ fill: color-mix(in srgb, var(--color-green-50) 20%, transparent);
+ stroke: var(--color-green-50);
+}
+
+.openpgp-status.status-error {
+ fill: color-mix(in srgb, var(--color-red-50) 20%, transparent);
+ stroke: var(--color-red-50);
+}
+
+/* ::::: OpenPGP key selection ::::: */
+
+.openpgp-container {
+ margin-top: 10px;
+}
+
+.opengpg-intro-section {
+ margin-bottom: 10px;
+}
+
+#openPgpKeyList {
+ margin-top: 16px;
+}
+
+.content-blocking-category .checkbox-label-box,
+.extra-information-label > img {
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+.content-blocking-category {
+ border-radius: 4px;
+ margin: 3px 0;
+ padding: 9px;
+ border: 1px solid var(--in-content-border-color);
+ background-color: rgba(215, 215, 219, 0.2);
+}
+
+.content-blocking-category.disabled {
+ opacity: 0.5;
+}
+
+.content-blocking-category.disabled .radio-check {
+ opacity: 1;
+}
+
+.content-blocking-warning > .indent,
+.content-blocking-category > .indent {
+ margin-inline-end: 28px;
+ margin-inline-start: 30px;
+}
+
+.arrowhead {
+ appearance: none;
+ border: none;
+ border-radius: 2px;
+ min-height: 20px;
+ min-width: 20px;
+ max-height: 20px;
+ max-width: 20px;
+ list-style-image: url("chrome://messenger/skin/icons/new/nav-down-sm.svg");
+ background-color: transparent;
+ padding: 3px;
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+.arrowhead:not([disabled]):hover {
+ cursor: pointer;
+ background-color: var(--grey-90-a10);
+}
+
+.arrowhead:not([disabled]):hover:active {
+ background-color: var(--grey-90-a20);
+}
+
+.arrowhead.up {
+ list-style-image: url("chrome://messenger/skin/icons/new/nav-up-sm.svg");
+}
+
+.content-blocking-category.expanded:not(.selected) .content-blocking-warning {
+ background-color: var(--grey-90-a10);
+}
+
+.content-blocking-category.selected {
+ border: 1px solid #45A1FF;
+ background-color: rgba(69, 161, 255, 0.2);
+}
+
+.content-blocking-warning-title,
+.content-blocking-category .radio-label-box {
+ font-weight: bold;
+}
+
+.content-blocking-extra-information {
+ visibility: collapse;
+}
+
+.extra-information-label {
+ display: grid;
+ grid-template-columns: auto max-content 1fr;
+ row-gap: 10px;
+ align-items: center;
+ margin-block: 18px;
+}
+
+/* Apply display: block to the containers of all the category information, as
+ * without this the flex-wrapped blocks inside don't stretch vertically to
+ * enclose their content. */
+.content-blocking-category > .indent {
+ display: block;
+}
+
+.content-blocking-category.expanded .content-blocking-extra-information {
+ visibility: visible;
+ display: flex;
+ flex-direction: column;
+ align-content: stretch;
+ margin-bottom: 10px;
+}
+
+.content-blocking-extra-information > .custom-option {
+ margin: 10px 0;
+}
+
+.content-blocking-warning {
+ background-color: rgba(69, 161, 255, 0.2);
+ border-radius: 4px;
+ padding: 10px 0;
+ margin: 10px 0;
+}
+
+.content-blocking-warning:not([hidden]) + .content-blocking-warning {
+ margin-top: 0;
+}
+
+.content-blocking-category-description {
+ font-size: 90%;
+ opacity: 0.6;
+}
+
+.expiration-date-icon {
+ vertical-align: text-top;
+ -moz-context-properties: fill, stroke;
+ margin-inline-end: 4px;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ width: 16px;
+}
+
+.expiration-date-icon:not([src]) {
+ display: none;
+}
+
+.expiration-date-container.key-expired description {
+ color: var(--color-red-50);
+ font-weight: 600;
+}
+
+.expiration-date-container.key-expired .expiration-date-icon {
+ fill: color-mix(in srgb, var(--color-amber-50) 20%, transparent);
+ stroke: var(--color-amber-50);
+}
+
+.first-element {
+ margin-inline-start: 0;
+}
+
+.last-element {
+ margin-inline-end: 0;
+}
+
+.button-small {
+ margin-inline-start: 8px;
+ font-size: 0.9em;
+ min-height: 28px;
+ margin-block: 0;
+}
+
+.extra-information-label-type {
+ font-weight: 600;
+ margin-inline-end: 4px;
+}
+
+/* Key info icons */
+.extra-information-label > img {
+ margin-inline-end: 5px;
+}
+
+.openpgp-key-details {
+ margin-bottom: 18px;
+ border: 1px solid var(--in-content-box-border-color);
+ border-radius: 4px;
+ overflow: hidden;
+ background-color: var(--in-content-page-background);
+}
+
+.openpgp-key-details tabs {
+ border-top: none;
+}
+
+.openpgp-key-details tabpanels {
+ padding: 0 10px 18px;
+}
+
+.openpgp-image-btn .button-icon {
+ margin-inline-end: 4px;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+.openpgp-add-key-button {
+ list-style-image: var(--icon-new-key);
+}
+
+.openpgp-props-btn {
+ list-style-image: var(--icon-tools);
+}
+
+.openpgp-more-btn .button-menu-dropmarker {
+ list-style-image: url("chrome://messenger/skin/icons/new/nav-down-sm.svg");
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+.intro-paragraph {
+ margin-block: 0 6px;
+}
+
+.external-pill {
+ background-color: #4576B6;
+ color: #fff;
+ font-weight: 600;
+ font-size: 0.9em;
+ padding: 1px 6px;
+ border-radius: 12px;
+}
+
+.input-container > .plain {
+ flex: 1;
+ background-color: transparent;
+ border-style: none;
+ box-shadow: none !important;
+ outline: none;
+ padding-block: 0;
+}
+
+.chat-encryption-status {
+ margin: 0;
+ padding: 0;
+}
+
+#protocolIcon {
+ margin-inline-end: 6px;
+}
+
+.chat-encryption-sessions {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+.chat-encryption-sessions li {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+}
+
+.chat-current-session > span {
+ font-weight: bold;
+}
diff --git a/comm/mail/themes/shared/mail/accountManager.css b/comm/mail/themes/shared/mail/accountManager.css
new file mode 100644
index 0000000000..ead8c232aa
--- /dev/null
+++ b/comm/mail/themes/shared/mail/accountManager.css
@@ -0,0 +1,305 @@
+/* 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/. */
+
+/* ===== accountManage.css ==============================================
+ == Styles for the Mail Account Manager.
+ ======================================================================= */
+
+@import url("chrome://global/skin/global.css");
+@import url("chrome://global/skin/in-content/common.css");
+@import url("chrome://messenger/skin/preferences/preferences.css");
+
+@media (prefers-contrast) {
+ :root {
+ --in-content-accent-color: var(--selected-item-color);
+ }
+}
+
+html {
+ height: 100%;
+}
+
+body {
+ height: 100%;
+ display: grid;
+ grid-template-columns: min-content auto;
+}
+
+#accountTreeBox {
+ display: flex;
+ flex-direction: column;
+ max-width: 25em;
+ min-width: 18em;
+ height: 100vh;
+ box-sizing: border-box;
+ padding-top: 40px;
+ background-color: var(--in-content-categories-background);
+ border-inline-end: 1px solid var(--in-content-categories-border);
+}
+
+#accountTreeBox:-moz-locale-dir(rtl) {
+ background-image: linear-gradient(to right, transparent, transparent 3px,
+ var(--in-content-categories-background) 3px);
+}
+
+/* Account list */
+
+#accounttree {
+ flex-grow: 1;
+ overflow-y: auto;
+}
+
+#accounttree:focus-visible {
+ outline: none;
+}
+
+#accounttree, #accounttree ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+#accounttree li {
+ transition: opacity 250ms;
+}
+
+#accounttree li > div {
+ display: flex;
+ align-items: center;
+ -moz-context-properties: fill;
+ margin-inline: 6px;
+ border-radius: var(--in-content-button-border-radius);
+ fill: currentColor;
+ cursor: default;
+}
+
+#accounttree li.selected > div {
+ background-color: var(--in-content-button-background);
+}
+
+#accounttree li > div:hover {
+ background-color: var(--in-content-item-hover);
+ color: var(--in-content-item-hover-text);
+}
+
+#accounttree:focus li.selected > div {
+ background-color: var(--in-content-item-selected);
+ color: var(--in-content-item-selected-text);
+}
+
+#accounttree li .twisty {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--list-item-buttons-size);
+ height: var(--list-item-buttons-size);
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+#accounttree li:not(.children) .twisty-icon {
+ display: none;
+}
+
+#accounttree li.children.collapsed .twisty-icon {
+ transform: rotate(-90deg);
+}
+
+#accounttree li.children.collapsed:dir(rtl) .twisty-icon {
+ transform: rotate(90deg);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ li .twisty-icon {
+ transition: transform 200ms ease;
+ }
+}
+
+#accounttree li div.icon {
+ width: 16px;
+ height: 16px;
+ background-image: var(--icon-mail);
+ background-position: center center;
+ background-repeat: no-repeat;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+#accounttree li.serverType-imap.isSecure div.icon,
+#accounttree li.serverType-pop3.isSecure div.icon {
+ background-image: var(--icon-mail-secure);
+}
+
+#accounttree li.serverType-feeds div.icon,
+#accounttree li.serverType-rss div.icon {
+ list-style-image: var(--icon-rss);
+}
+
+#accounttree li.serverType-im div.icon {
+ background-image: var(--spaces-icon-chat);
+}
+
+#accounttree li.serverType-news div.icon {
+ background-image: var(--icon-newsletter);
+}
+
+#accounttree li.serverType-nntp div.icon {
+ background-image: var(--icon-globe);
+}
+
+#accounttree li.serverType-nntp.isSecure div.icon {
+ background-image: var(--icon-globe-secure);
+}
+
+#accounttree li.serverType-none div.icon {
+ background-image: var(--icon-folder);
+}
+
+#accounttree li.serverType-smtp div.icon {
+ background-image: var(--icon-outbox);
+}
+
+#accounttree li .name {
+ flex: 1;
+ margin-inline: 7px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow-x: hidden;
+}
+
+#accounttree > li > div > .name {
+ font-weight: 500;
+}
+
+#accounttree > li.isDefaultServer > div > .name {
+ text-decoration: underline;
+}
+
+#accounttree ul > li > div {
+ padding-inline-start: 42px;
+}
+
+#accounttree ul {
+ overflow: hidden;
+ height: auto;
+}
+
+#accounttree li ul:empty,
+#accounttree li.collapsed ul {
+ height: 0;
+}
+
+#accounttree li.dragging {
+ opacity: 0.75;
+}
+
+/* Styles for the Account Actions button */
+
+#accountActionsButton {
+ margin: 6px;
+}
+
+#accountActionsDropdown {
+ appearance: none;
+ font-size: 1em;
+ --panel-border-color: var(--in-content-box-border-color);
+ --panel-border-radius: 2px;
+ --panel-background: var(--in-content-box-background);
+ --panel-color: var(--in-content-text-color);
+ --panel-padding: 0;
+}
+
+#accountActionsDropdown > menuitem {
+ appearance: none;
+ color: var(--in-content-text-color);
+ padding-block: 0.2em;
+ padding-inline: 10px 30px;
+}
+
+#accountActionsDropdown > menuitem:not([disabled="true"])[_moz-menuactive="true"] {
+ color: var(--in-content-item-hover-text);
+ background-color: var(--in-content-item-hover);
+}
+
+#accountActionsDropdown > menuitem:not([disabled="true"])[selected="true"] {
+ color: var(--in-content-item-selected-text);
+ background-color: var(--in-content-item-selected);
+}
+
+#accountActionsDropdown > menuitem[disabled="true"] {
+ color: #999;
+ /* override the [_moz-menuactive="true"] background color from
+ global/menu.css */
+ background-color: transparent;
+}
+
+#accountActionsDropdown > menuseparator {
+ appearance: none;
+ margin: 0;
+ padding: 0;
+ border-top: 1px solid var(--in-content-box-border-color);
+ border-bottom: none;
+}
+
+#accountActionsButton > .button-box > .button-menu-dropmarker {
+ appearance: none;
+ display: flex;
+ list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+ -moz-context-properties: fill;
+ fill: currentColor;
+ width: 12px;
+ height: 12px;
+}
+
+.sidebar-footer-list {
+ margin-top: 24px;
+ margin-inline: 0;
+}
+
+.sidebar-footer-link {
+ margin-inline: 6px;
+ border-radius: var(--in-content-button-border-radius);
+}
+
+#contentFrame {
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+
+#dialogStack {
+ position: absolute;
+ inset: 0;
+}
+
+#editVCardDialog {
+ /* Two <vcard-edit> columns. */
+ width: 64em;
+}
+
+#editVCardDialog form {
+ display: flex;
+ flex-direction: column;
+}
+
+#editVCardDialog #vCardDisplayNameCheckbox {
+ display: none;
+}
+
+@media (max-width: 830px) {
+ .sidebar-footer-list {
+ align-items: unset;
+ margin-inline-start: unset;
+ }
+
+ .sidebar-footer-link {
+ width: unset;
+ height: unset;
+ }
+
+ .sidebar-footer-label {
+ display: inline-block;
+ }
+}
diff --git a/comm/mail/themes/shared/mail/accountSetup.css b/comm/mail/themes/shared/mail/accountSetup.css
new file mode 100644
index 0000000000..a91c73f4a2
--- /dev/null
+++ b/comm/mail/themes/shared/mail/accountSetup.css
@@ -0,0 +1,1021 @@
+/* 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://global/skin/in-content/common.css");
+@import url("chrome://messenger/skin/preferences/preferences.css");
+
+:root {
+ --addon-bg: #f8f8f8;
+ --addon-border: #ccc;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --addon-bg: #333;
+ --addon-border: #111;
+ }
+}
+
+:root,
+body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ overflow: auto;
+ background-color: rgba(0, 0, 0, 0.03);
+}
+
+header {
+ margin: 3rem 4rem;
+}
+
+.title {
+ font-size: 2.2rem;
+}
+
+.title.success {
+ padding-inline-start: 24px;
+ background: var(--icon-check) 0 center no-repeat;
+ background-size: 22px;
+ -moz-context-properties: stroke;
+ stroke: var(--color-green-50);
+}
+
+.title.success:dir(rtl) {
+ background-position-x: right;
+}
+
+.description {
+ line-height: 1.45em;
+ margin-block-end: 0;
+}
+
+.description + .description {
+ margin-block-start: 0;
+ margin-block-end: 1em;
+}
+
+.main-container {
+ max-width: 80rem;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ margin: 0 4rem 3rem;
+}
+
+.column {
+ flex: 1;
+ min-width: 400px;
+}
+
+.first-column {
+ max-width: 425px;
+}
+
+.column-wide {
+ max-width: 525px;
+}
+
+.second-column {
+ display: flex;
+ justify-content: center;
+ text-align: center;
+}
+
+@media (max-width: 57rem) {
+ .second-column {
+ max-width: 425px;
+ margin-top: 2rem;
+ }
+
+ .second-column img {
+ display: none;
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .second-column article {
+ transition: opacity .3s ease, transform .3s ease;
+ }
+
+ .second-column article.hide {
+ opacity: 0;
+ transform: scale(0.9);
+ }
+}
+
+.second-column article p {
+ max-width: 40rem;
+ padding-inline: 4rem;
+}
+
+#form {
+ display: flex;
+ flex-direction: column;
+}
+
+#form label,
+#calendarDialog label {
+ font-size: 0.9em;
+ line-height: 1em;
+ margin-block-end: 3px;
+}
+
+.input-control {
+ display: flex;
+ align-items: center;
+ margin-block-end: 21px;
+}
+
+.input-control.vertical {
+ flex-direction: column;
+ align-items: stretch;
+}
+
+#form .input-field {
+ flex: 1;
+ font-size: 0.9em;
+ margin-inline: 0;
+ padding-block: 0;
+ padding-inline-end: 33px;
+ min-height: var(--in-content-button-height);
+ border-radius: var(--in-content-button-border-radius);
+}
+
+.form-icon {
+ cursor: pointer;
+ -moz-context-properties: fill, fill-opacity, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ fill-opacity: 0.7;
+ margin-inline: -26px 10px;
+}
+
+.form-toggle-button {
+ appearance: none;
+ background: transparent;
+ border: none;
+ padding: 0 4px;
+ margin-inline: -30px 6px;
+ min-width: auto;
+ min-height: auto;
+ margin-block: 0;
+ line-height: 0;
+}
+
+.form-toggle-button:hover,
+.form-toggle-button:active {
+ background-color: transparent !important;
+}
+
+.form-toggle-button .form-icon {
+ margin-inline: 0;
+}
+
+.icon-warning {
+ display: none;
+ color: var(--orange-50);
+ fill-opacity: 1;
+}
+
+input:user-invalid ~ .form-icon {
+ display: none;
+}
+
+input:user-invalid ~ .icon-warning {
+ display: inline-block;
+}
+
+.provisioner-button-container {
+ display: flex;
+ justify-content: end;
+}
+
+.btn-link {
+ appearance: none;
+ background-color: transparent !important;
+ color: var(--in-content-link-color) !important;
+ border-style: none;
+ padding: 0 3px;
+ font-size: 1rem;
+ font-weight: 600;
+ cursor: pointer;
+ min-height: auto;
+ border-radius: var(--in-content-button-border-radius);
+}
+
+.btn-link-new-email {
+ margin: -18px 0 2px;
+}
+
+.btn-link:hover {
+ color: var(--in-content-link-color-hover) !important;
+ text-decoration: underline;
+}
+
+.btn-link:focus-visible {
+ outline-offset: 1px;
+}
+
+.btn-link[hidden] {
+ margin: 0;
+}
+
+.password-toggled {
+ color: var(--in-content-primary-button-background);
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+.remember-button-container {
+ display: flex;
+ justify-content: start;
+ margin-block: -15px 24px;
+}
+
+.action-buttons-container {
+ display: flex;
+ justify-content: space-between;
+ margin-inline: -6px;
+}
+
+.action-buttons-container aside {
+ display: flex;
+ align-items: center;
+}
+
+.action-buttons-container button {
+ border-radius: var(--in-content-button-border-radius);
+}
+
+.account-setup-notifications {
+ display: flex;
+ flex-direction: column;
+ margin-inline: -4px;
+}
+
+.account-setup-notifications .notificationbox-stack {
+ margin-block-end: 15px;
+ background-color: transparent;
+}
+
+/* Results area */
+
+#resultsArea:not([hidden]) {
+ display: flex;
+ flex-direction: column;
+ margin-block-end: 15px;
+}
+
+.section-title {
+ margin-block: 0 12px;
+}
+
+.autoconfig-note {
+ margin-block: 10px 0;
+ font-size: 1rem;
+}
+
+.content-blocking-category {
+ border-radius: 4px;
+ margin: 3px 0;
+ padding: 9px;
+ border: 1px solid var(--in-content-border-color);
+ background-color: rgba(215, 215, 219, 0.2);
+}
+
+.content-blocking-category.selected {
+ border: 1px solid #45A1FF;
+ background-color: rgba(69, 161, 255, 0.2);
+}
+
+.content-blocking-category.selected .result-details {
+ display: flex;
+}
+
+.results-option:not([hidden]) {
+ display: grid;
+ grid-template-columns: auto auto 1fr;
+ column-gap: 3px;
+}
+
+.results-option .toggle-container-with-text,
+.result-details,
+.result-details-row {
+ display: contents;
+}
+
+.results-option .toggle-container-with-text span,
+.result-indent,
+.result-details {
+ grid-column: 2 / 4;
+}
+
+.result-details {
+ display: none;
+ flex-direction: column;
+ font-size: 0.9em;
+ row-gap: 9px;
+ margin-block: 9px;
+}
+
+.result-details-row {
+ display: grid;
+ grid-template: "icon heading" auto
+ ". info" auto / auto 1fr;
+ gap: 3px 6px;
+}
+
+.result-details-row img {
+ grid-area: icon;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ color: inherit;
+ width: 16px;
+ height: 16px;
+}
+
+.result-details-title {
+ grid-area: heading;
+ display: flex;
+ align-items: baseline;
+ gap: 3px;
+}
+
+.result-details-title h4 {
+ margin-block: 0;
+}
+
+.result-details-row .result-host-info {
+ grid-area: info;
+}
+
+.results-option .toggle-container-with-text span {
+ line-height: 1.4em;
+}
+
+.strong {
+ font-weight: 600;
+}
+
+.result-indent {
+ margin-block: 0;
+}
+
+/* Confirmation dialog */
+
+.account-setup-dialog {
+ max-width: 500px;
+}
+
+/* Insecure dialog */
+
+.account-setup-dialog.dialog-critical {
+ max-width: 700px;
+}
+
+/* Manual config area */
+
+#manualConfigArea {
+ margin-block-end: 15px;
+}
+
+#manualConfigArea select,
+#manualConfigArea input:not([type="radio"],[type="checkbox"]) {
+ margin: 0;
+ width: 4em;
+ flex: 1;
+}
+
+#manualConfigArea select {
+ padding-inline-start: 6px;
+ padding-block: 0;
+}
+
+#manualConfigArea select:not([size], [multiple]) {
+ background-position-x: right 10px;
+}
+
+#manualConfigArea select:not([size], [multiple]):dir(rtl) {
+ background-position-x: left 10px;
+}
+
+#manualConfigArea select > option {
+ padding-inline-start: 11px;
+}
+
+#manualConfigArea legend {
+ margin-top: 0;
+ background-color: var(--in-content-primary-button-background);
+ border-radius: var(--in-content-button-border-radius);
+ padding: 2px 6px;
+ font-size: 0.9rem;
+ text-transform: uppercase;
+ color: var(--in-content-primary-button-text-color);
+}
+
+#manualConfigArea input[type="number"] {
+ width: calc(2ch + 60px);
+ text-align: end;
+}
+
+.manual-config-grid {
+ display: grid;
+ row-gap: 12px;
+}
+
+.manual-config-grid ~ .manual-config-grid {
+ margin-top: 15px;
+}
+
+.manual-config-grid aside {
+ display: grid;
+ grid-template-columns: 40% 1fr;
+ column-gap: 6px;
+ align-items: center;
+}
+
+.manual-config-grid .input-control {
+ align-items: initial;
+ margin-block-end: 0;
+}
+
+.manual-config-two-columns {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ column-gap: 12px;
+}
+
+.option-label {
+ font-size: 1.05rem;
+ line-height: 1em;
+ font-weight: 500;
+}
+
+.link-row {
+ display: flex;
+ justify-content: end;
+}
+
+#outgoingProtocol {
+ display: flex;
+ height: 100%;
+ align-items: center;
+ font-weight: 500;
+ margin-inline: 4px;
+}
+
+.foot-note {
+ line-height: 1.5em;
+ font-size: 1rem;
+ margin-block-start: 21px;
+}
+
+/* Result area */
+
+.result-host-info {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+.protocol-type {
+ display: inline-block;
+ text-transform: uppercase;
+ padding: 1px 4px;
+ font-size: 0.8rem;
+ font-weight: bold;
+ border-radius: 2px;
+ background-color: var(--in-content-primary-button-background);
+ color: var(--in-content-primary-button-text-color);
+}
+
+.protocol-type.insecure {
+ background-color: var(--red-70);
+ color: var(--in-content-primary-button-text-color);
+}
+
+.result-host-info > span {
+ margin-inline: 0;
+}
+
+.result-host-info > .domain {
+ font-weight: bold;
+}
+
+.cert-status.insecure {
+ margin: 0 0 5px 0;
+ color: var(--red-70);
+}
+
+#installAddonInfo {
+ background-color: var(--addon-bg);
+ padding: 3px 6px;
+ border-radius: var(--in-content-button-border-radius);
+ border: 1px solid var(--addon-border);
+}
+
+#resultAddonIntro {
+ margin-block: 3px 12px;
+}
+
+#resultAddonInstallRows .icon {
+ width: 32px;
+ height: 32px;
+ margin-inline-end: 6px;
+}
+
+.addon-container {
+ display: flex;
+ align-items: center;
+}
+
+.link {
+ flex: 1;
+ line-height: 1.2em;
+}
+
+input[disabled],
+select[disabled] {
+ opacity: 0.5;
+}
+
+/* Success view */
+
+.success-column:not([hidden]) {
+ display: flex;
+ flex-direction: column;
+}
+
+.account-success-block {
+ display: grid;
+ grid-template-columns: min-content 1fr min-content;
+ align-items: center;
+ color: inherit;
+ background-color: var(--in-content-box-background);
+ box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
+ column-gap: 6px;
+ padding: 3px 9px;
+ border-radius: var(--in-content-button-border-radius);
+ min-height: 39px;
+ line-height: 1em;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+.account-type-image {
+ color: var(--in-content-link-color);
+}
+
+.linked-services-button {
+ display: flex;
+ align-items: center;
+ background-color: transparent;
+ border-width: 0;
+ appearance: none;
+ margin: 0;
+ padding-inline: 0;
+ width: 100%;
+ height: auto;
+}
+
+button.linked-services-button:hover {
+ background-color: transparent;
+ color: var(--in-content-accent-color);
+ cursor: pointer;
+}
+
+button.linked-services-button:hover:active {
+ background-color: transparent;
+ border-color: transparent;
+}
+
+.linked-services-button > aside {
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ flex: 1;
+ padding: 3px;
+}
+
+.linked-services-description {
+ font-size: 0.9em;
+ margin-block: 0;
+ text-align: start;
+ color: var(--in-content-deemphasized-text);
+}
+
+.account-name {
+ margin-block-end: 3px;
+ font-weight: 500;
+}
+
+.account-email {
+ font-size: 0.9em;
+ color: var(--in-content-link-color);
+ font-weight: 500;
+}
+
+.quick-links {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-around;
+ margin: 12px 21px 27px;
+}
+
+.quick-link {
+ appearance: none;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ border: none;
+ padding: 6px;
+ padding-inline-start: 27px;
+ margin: 6px 3px;
+ line-height: 1em;
+ background-position: 3px center;
+ background-repeat: no-repeat;
+ background-size: 16px;
+ background-color: transparent;
+ min-height: auto;
+ border-radius: 0;
+ cursor: pointer;
+ text-align: start;
+}
+
+.quick-link:dir(rtl) {
+ background-position-x: right 3px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .quick-link {
+ transition: color .2s ease;
+ }
+}
+
+button.quick-link:hover,
+button.quick-link:hover:active {
+ background-color: transparent;
+ color: var(--in-content-link-color);
+}
+
+#settingsButton {
+ background-image: var(--icon-settings);
+}
+
+#signatureButton {
+ background-image: var(--icon-pencil);
+}
+
+#encryptionButton {
+ background-image: var(--icon-key);
+}
+
+#dictionariesButton {
+ background-image: var(--icon-download);
+}
+
+#addressBookCardDAVButton,
+#addressBookLDAPButton {
+ background-image: var(--icon-new-address-book);
+ align-self: start;
+}
+
+#createCalendarButton {
+ background-image: var(--icon-new-event);
+ align-self: start;
+}
+
+#linkedServices h3 {
+ font-size: 1.6rem;
+ font-weight: 300;
+ margin-bottom: 0;
+}
+
+#linkedServices p.tip-caption {
+ margin-top: 9px;
+ margin-bottom: 0;
+}
+
+.services-buttons-container {
+ display: flex;
+ flex-direction: column;
+}
+
+.linked-services-container:not([hidden]) {
+ display: flex;
+ flex-direction: column;
+ margin-block-start: 6px;
+}
+
+.linked-services-section {
+ margin-top: 18px;
+}
+
+.linked-services-list {
+ list-style: none;
+ padding-inline: 0 3px;
+ margin-block: 0;
+ max-height: 15em;
+ overflow: auto;
+}
+
+.linked-services-list li {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-inline-start: 4px;
+ border-radius: var(--in-content-button-border-radius);
+}
+
+.linked-services-list button.small-button {
+ line-height: 0.9em;
+ padding-block: 0;
+}
+
+.list-item-name {
+ flex: 1;
+ padding-inline: 6px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-weight: 600;
+}
+
+.self-center {
+ align-self: center;
+}
+
+.final-buttons-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ margin-block: 18px 12px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .linked-service-dropdown {
+ transition: transform .2s ease;
+ }
+}
+
+.opened .linked-service-dropdown {
+ transform: rotate(90deg);
+}
+
+.linked-service-dropdown:dir(rtl) {
+ transform: rotate(180deg);
+}
+
+.linked-service-dropdown img {
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+button.existing {
+ background: var(--icon-check) 0 center no-repeat;
+ background-size: 16px;
+ -moz-context-properties: stroke;
+ stroke: var(--color-green-50);
+ opacity: 1;
+ padding-inline-start: 18px;
+}
+
+button.existing:dir(rtl) {
+ background-position-x: right;
+}
+
+#calendarDialog {
+ width: 100%;
+}
+
+.calendar-dialog-form {
+ display: grid;
+ grid-template-columns: max-content auto;
+ align-items: center;
+ row-gap: 3px;
+ column-gap: 3px;
+ margin-block-end: 21px;
+}
+
+.input-grow {
+ flex: 1;
+}
+
+#calendarDialog .calendar-dialog-form label,
+.calendar-dialog-form .input-control {
+ margin-block-end: 0;
+}
+
+.calendar-dialog-form select,
+.calendar-dialog-form input[type="color"] {
+ margin-inline: 4px;
+}
+
+.calendar-dialog-form select {
+ padding-inline-start: 9px;
+ padding-block: 0;
+ line-height: var(--in-content-button-height);
+}
+
+.calendar-dialog-form select:not([size], [multiple]) {
+ background-position-x: right 10px;
+}
+
+.calendar-dialog-form select:not([size], [multiple]):dir(rtl) {
+ background-position-x: left 10px;
+}
+
+.calendar-dialog-form select > option {
+ padding-inline-start: 11px;
+}
+
+
+/* Account Provisioner variations */
+
+#backButton {
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+ background-image: var(--icon-nav-back);
+ background-repeat: no-repeat;
+ background-position-x: 6px;
+ background-position-y: center;
+ padding-inline-start: 25px;
+ background-size: 16px;
+}
+
+#backButton:dir(rtl) {
+ background-image: var(--icon-nav-forward);
+ background-position-x: right 6px;
+}
+
+.service-title {
+ margin-top: 0;
+ font-size: 1.1em;
+ font-weight: 600;
+}
+
+.service-description {
+ font-size: 0.9em;
+ line-height: 1.3em;
+ color: var(--in-content-deemphasized-text);
+}
+
+.service-form {
+ margin-bottom: 30px;
+}
+
+.service-form-container {
+ display: flex;
+ align-items: center;
+}
+
+.service-form-container input {
+ flex: 1;
+ margin-inline: 0 10px;
+}
+
+.service-form-container button {
+ margin-inline: 0;
+}
+
+.providers-list {
+ margin: 10px 0 40px;
+ padding: 0;
+ list-style: none;
+ display: flex;
+}
+
+.providers-list li {
+ margin-inline: 6px;
+ display: flex;
+ align-items: center;
+}
+
+.providers-list img {
+ width: 26px;
+ margin-inline-end: 6px;
+}
+
+.providers-list span {
+ font-weight: bold;
+}
+
+.provisioner-buttons {
+ margin-inline: -3px;
+}
+
+.provisioner-results-area {
+ margin-block-end: 21px;
+}
+
+.results-title {
+ font-weight: 500;
+ margin-block: 0 9px;
+}
+
+.result-list-header {
+ margin-block: 0 10px;
+ text-transform: uppercase;
+ background-color: var(--button-background-color);
+ color: var(--default);
+ padding: 9px 6px;
+ border-radius: var(--in-content-button-border-radius);
+ text-align: center;
+ margin: -9px -9px 10px;
+}
+.results-list {
+ display: flex;
+ flex-direction: column;
+}
+
+.results-list ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.results-list ul + .result-list-header {
+ margin-block-start: 10px;
+}
+
+.result-item {
+ margin-block-end: 12px;
+}
+
+.result-item > button {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-radius: var(--in-content-button-border-radius);
+ background-color: rgba(215, 215, 219, 0.2);
+ border: 1px solid var(--in-content-border-color);
+ padding: 6px 9px;
+ width: 100%;
+ text-align: start;
+ margin: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .result-item > button {
+ transition: background-color 180ms ease, color 180ms ease, border 180ms ease;
+ }
+}
+
+.result-item > button > img {
+ -moz-context-properties: fill;
+ fill: currentColor;
+ width: 12px;
+ opacity: 0.7;
+}
+
+.result-data {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ word-wrap: break-word;
+}
+
+.result-name {
+ font-size: 1.05em;
+ font-weight: 500;
+}
+
+.result-price {
+ color: var(--in-content-primary-button-background);
+}
+
+.result-item > button:hover {
+ background-color: var(--in-content-box-background);
+ box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
+}
+
+.result-item > button:hover > img {
+ color: var(--in-content-primary-button-background);
+}
+
+@media (-moz-platform: linux),
+ (-moz-platform: windows) {
+ #manualConfigArea select {
+ line-height: 1.7;
+ }
+}
+
+@media (-moz-platform: macos) {
+ #manualConfigArea select {
+ line-height: 2;
+ }
+}
diff --git a/comm/mail/themes/shared/mail/accountWizard.css b/comm/mail/themes/shared/mail/accountWizard.css
new file mode 100644
index 0000000000..e1933104e3
--- /dev/null
+++ b/comm/mail/themes/shared/mail/accountWizard.css
@@ -0,0 +1,27 @@
+/* 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/messenger.css");
+
+description {
+ margin-inline: 4px;
+}
+
+.awIdentityLabel {
+ width: 8em;
+ margin-inline-start: 5px;
+}
+
+#accountprotocol,
+#accountsummary {
+ overflow: visible;
+}
+
+#summarygrid {
+ overflow: auto;
+}
+
+#value-column {
+ min-width: 15em;
+}
diff --git a/comm/mail/themes/shared/mail/activity/activity.css b/comm/mail/themes/shared/mail/activity/activity.css
new file mode 100644
index 0000000000..209ae5547a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/activity/activity.css
@@ -0,0 +1,117 @@
+/* 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/. */
+
+#activityManager[lwt-tree] {
+ background-color: var(--toolbar-bgcolor);
+ color: var(--lwt-text-color);
+}
+
+body {
+ margin: 0;
+}
+
+#activityContainer {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+}
+
+#activityContainer > #activityView {
+ min-height: 0;
+ flex: 1 1 auto;
+}
+
+#activityContainer > #clearListButton {
+ align-self: start;
+ flex: 0 0 auto;
+}
+
+ul.activityview {
+ display: block;
+ margin: 0;
+ padding-inline-start: 0;
+ overflow: auto;
+ border-bottom: 1px solid var(--field-border-color);
+ background-color: var(--field-background-color);
+}
+
+li.activitygroup {
+ display: block;
+}
+
+li.activityitem {
+ display: grid;
+ grid-template:
+ "icon display time" auto
+ "icon progress progress" auto
+ "icon status status" 1fr / auto 1fr auto;
+ align-items: baseline;
+}
+
+.activityitem {
+ padding: 7px 4px;
+ border-bottom: 1px solid var(--field-border-color);
+}
+
+.activitygroup-list .activityitem {
+ padding-inline-start: 12px;
+}
+
+.activityitem > img {
+ width: 48px;
+ height: 48px;
+ grid-area: icon;
+ align-self: start;
+}
+
+.activityitem > .displayText {
+ grid-area: display;
+}
+
+.activityitem > .dateTime {
+ grid-area: time;
+}
+
+.activityitem > .progressmeter {
+ grid-area: progress;
+}
+
+.activityitem > .statusText {
+ grid-area: status;
+}
+
+.contextDisplayText,
+.progressmeter,
+.dateTime,
+.displayText,
+.statusText {
+ margin: 2px 6px;
+}
+
+:is(
+ .contextDisplayText,
+ .dateTime,
+ .displayText,
+ .statusText
+):empty {
+ display: none;
+}
+
+.contextDisplayText,
+.displayText,
+.statusText {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+h2.contextDisplayText {
+ font-size: inherit;
+}
+
+.dateTime,
+.statusText {
+ font-size: smaller;
+ opacity: .8;
+}
diff --git a/comm/mail/themes/shared/mail/attachmentList.css b/comm/mail/themes/shared/mail/attachmentList.css
new file mode 100644
index 0000000000..a0142d2b00
--- /dev/null
+++ b/comm/mail/themes/shared/mail/attachmentList.css
@@ -0,0 +1,168 @@
+/* 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/. */
+
+.attachmentList {
+ appearance: none;
+ -moz-user-focus: normal;
+ margin: 0;
+ padding: 3px;
+ background-color: var(--layout-background-2);
+ color: var(--layout-color-2);
+ border: none;
+ display: flex;
+ overflow-x: hidden;
+ align-items: start;
+ align-content: start;
+ flex: 1;
+ flex-direction: row;
+ flex-wrap: wrap;
+}
+
+.attachmentList[collapsed] {
+ display: none;
+ height: 0;
+}
+
+.attachmentItem {
+ border: 1px solid transparent;
+ min-width: 10em;
+ padding: 1px 3px;
+ border-radius: 2px;
+ display: flex;
+ align-items: baseline;
+}
+
+.attachmentItem > * {
+ /* We treat the entire attachment item as a single object for click events.
+ * This ensures that dragging will drag the entire widget by default, and
+ * click event targets will point to the attachmentItem, rather than a
+ * descendant. */
+ pointer-events: none;
+}
+
+.attachmentList:focus > .attachmentItem[selected="true"] > * {
+ color: inherit;
+}
+
+.attachmentItem > .attachmentcell-icon {
+ flex: 0 0 auto;
+ align-self: center;
+}
+
+.attachmentItem > .attachmentcell-name {
+ flex: 0 1 auto;
+ white-space: nowrap;
+ overflow-x: hidden;
+ text-overflow: ellipsis;
+}
+
+.attachmentItem > .attachmentcell-extension {
+ /* The extension part grows to fill the available space after the attachment
+ * name, but the name part shrinks when we do not have enough space. */
+ flex: 1 0 auto;
+}
+
+.attachmentItem > .attachmentcell-size {
+ flex: 0 0 auto;
+}
+
+.attachmentList[seltype="multiple"]:focus .attachmentItem[current="true"] {
+ border-color: var(--selected-item-color);
+ outline: none;
+}
+
+/* Hide the drop indicator for the message pane attachment list. */
+#attachmentList .attachmentItem .attach-drop-indicator {
+ display: none;
+}
+
+#attachmentBucket .attachmentItem .attach-drop-indicator {
+ position: absolute;
+ z-index: 3;
+ display: none;
+ margin: -6px -6px -4px;
+ transform: scale(0.8);
+}
+
+#attachmentBucket .attachmentItem[dropOn="before"] .attach-drop-indicator.before {
+ display: inline;
+}
+
+#attachmentBucket .attachmentItem[dropOn="after"] .attach-drop-indicator.after {
+ display: inline;
+}
+
+.attachmentList[seltype="multiple"]:focus
+ .attachmentItem[current="true"][selected="true"] {
+ border-color: var(--sidebar-highlight-border-color, var(--item-focus-selected-border-color));
+}
+
+:root[lwt-tree] .attachmentList {
+ background-color: var(--sidebar-background-color);
+ color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] .attachmentList .attachmentItem {
+ color: var(--sidebar-text-color) !important;
+}
+
+:root[lwt-tree] .attachmentList .attachmentItem:hover {
+ background-color: hsla(0, 0%, 50%, .15);
+ border-color: transparent;
+}
+
+:root[lwt-tree] .attachmentList .attachmentItem[selected="true"] {
+ border-color: hsla(0, 0%, 50%, 0.2);
+ background: hsla(0, 0%, 50%, 0.2);
+ color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] .attachmentList:focus .attachmentItem[selected="true"] {
+ background: var(--sidebar-highlight-background-color, hsla(0, 0%, 80%, .3));
+ color: var(--sidebar-highlight-text-color, var(--sidebar-text-color)) !important;
+}
+
+:root[lwt-tree-brighttext] .attachmentList:focus .attachmentItem[selected="true"] {
+ background: var(--sidebar-highlight-background-color, rgba(249, 249, 250, .1));
+}
+
+#attachmentName.notfound,
+.attachmentItem.notfound {
+ text-decoration-line: line-through;
+}
+
+.attachmentcell-icon {
+ margin: 1px;
+ width: 16px;
+ height: 16px;
+}
+
+.attachmentcell-name,
+.attachmentcell-extension,
+.attachmentcell-size {
+ margin-block: 2px;
+}
+
+/* NOTE: We do not create a margin between the name and extension. */
+.attachmentcell-name,
+.attachmentcell-size {
+ margin-inline-start: 6px;
+}
+
+.attachmentcell-extension,
+.attachmentcell-size {
+ margin-inline-end: 5px;
+}
+
+.attachmentcell-size {
+ opacity: 0.6;
+}
+
+.attachmentList:focus .attachmentItem[selected="true"] .attachmentcell-size {
+ opacity: 0.8;
+}
+
+.attachmentItem:not(.notfound):hover .text-link {
+ text-decoration: underline;
+}
diff --git a/comm/mail/themes/shared/mail/autocomplete.css b/comm/mail/themes/shared/mail/autocomplete.css
new file mode 100644
index 0000000000..02b3f563ef
--- /dev/null
+++ b/comm/mail/themes/shared/mail/autocomplete.css
@@ -0,0 +1,23 @@
+/* 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/. */
+
+#PopupAutoComplete > richlistbox > richlistitem {
+ min-height: 20px;
+ border: 0;
+ border-radius: 0;
+ padding: 0 1px;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
+ margin-inline: 4px 0;
+}
+
+#PopupAutoComplete > richlistbox > richlistitem > .ac-title {
+ font: icon;
+ margin-inline-start: 4px;
+}
+
+#PopupAutoComplete > richlistbox {
+ padding: 0;
+}
diff --git a/comm/mail/themes/shared/mail/avatars.css b/comm/mail/themes/shared/mail/avatars.css
new file mode 100644
index 0000000000..b649b13758
--- /dev/null
+++ b/comm/mail/themes/shared/mail/avatars.css
@@ -0,0 +1,71 @@
+/* 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/colors.css");
+
+:root {
+ --recipient-avatar-size: 28px;
+ --recipient-avatar-placeholder-size: 16px;
+
+ --recipient-avatar-color: var(--color-gray-50);
+ --recipient-avatar-background-color: var(--color-gray-30);
+}
+
+:root[uidensity="compact"] {
+ --recipient-avatar-size: 24px;
+ --recipient-avatar-placeholder-size: contain;
+ --recipient-multi-line-gap: 0;
+}
+
+:root[uidensity="touch"] {
+ --recipient-avatar-size: 32px;
+ --recipient-avatar-placeholder-size: 16px;
+}
+
+@media not (prefers-contrast) {
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --recipient-avatar-color: var(--color-gray-30);
+ --recipient-avatar-background-color: var(--color-gray-60);
+ }
+ }
+}
+
+@media (prefers-contrast) {
+ :root {
+ --recipient-avatar-color: currentColor;
+ --recipient-avatar-background-color: color-mix(in srgb, currentColor 30%, transparent);
+ }
+}
+
+.recipient-avatar {
+ display: inline-flex;
+ height: var(--recipient-avatar-size);
+ width: var(--recipient-avatar-size);
+ border-radius: 50%;
+ margin-inline-end: 6px;
+ text-align: center;
+ overflow: hidden;
+ color: var(--recipient-avatar-color);
+ background-color: var(--recipient-avatar-background-color);
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 auto;
+}
+
+.recipient-avatar.is-mail-list {
+ background: none;
+}
+
+.recipient-avatar img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.recipient-avatar.is-mail-list img {
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
diff --git a/comm/mail/themes/shared/mail/browserRequest.css b/comm/mail/themes/shared/mail/browserRequest.css
new file mode 100644
index 0000000000..ecd7298494
--- /dev/null
+++ b/comm/mail/themes/shared/mail/browserRequest.css
@@ -0,0 +1,14 @@
+/* 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/. */
+
+#header.contentTabAddress {
+ min-width: 0;
+ padding: 2px;
+ margin: 0;
+ border-block-end: 1px solid ThreeDShadow;
+}
+
+#headerMessage.contentTabUrlInput {
+ overflow: hidden;
+}
diff --git a/comm/mail/themes/shared/mail/cardDAV.css b/comm/mail/themes/shared/mail/cardDAV.css
new file mode 100644
index 0000000000..a93dd63b0e
--- /dev/null
+++ b/comm/mail/themes/shared/mail/cardDAV.css
@@ -0,0 +1,94 @@
+/* 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/. */
+
+#carddav-statusArea {
+ background: transparent;
+ border: 1px solid transparent;
+ border-radius: 2px;
+ padding: 3px 4px;
+ color: var(--text-color);
+}
+
+#carddav-statusArea[status=error] {
+ background-color: #FFE900;
+ border-color: #F2D00F;
+ color: -moz-DialogText;
+}
+
+#carddav-statusArea[status=loading] {
+ background-color: rgba(0, 0, 0, 0.05);
+ border-color: rgba(0, 0, 0, 0.1);
+}
+
+#carddav-statusContainer {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ /* center align */
+ max-width: max-content;
+ margin-inline: auto;
+}
+
+#carddav-statusContainer > #carddav-statusImage {
+ flex: 0 0 auto;
+}
+
+#carddav-statusContainer > #carddav-statusMessage {
+ flex: 1 1 auto;
+}
+
+#carddav-statusImage {
+ -moz-context-properties: fill;
+ fill: currentColor;
+ width: 16px;
+ height: 16px;
+}
+
+#carddav-statusImage:not([src]) {
+ display: none;
+}
+
+#carddav-resultsArea {
+ margin-block-start: 6px;
+ margin-block-end: 6px;
+}
+
+#carddav-availableBooksHeader {
+ font-weight: 600;
+}
+
+#carddav-availableBooks {
+ overflow: auto;
+ flex: 1 1 0;
+}
+
+#carddav-properties-table {
+ display: grid;
+ grid-template-columns: min-content auto;
+ align-items: baseline;
+}
+
+.input-container {
+ display: flex;
+}
+
+.input-container > * {
+ flex: 1;
+}
+
+#carddav-refreshActive-cell {
+ /* This shouldn't be necessary, but there's no good combination of checkbox
+ * and label that play nicely with the align-items: baseline above. */
+ align-self: center;
+}
+
+#carddav-refreshInterval-cell {
+ display: flex;
+ align-items: baseline;
+}
+
+#carddav-refreshInterval {
+ flex: 1;
+ margin: 2px 4px;
+}
diff --git a/comm/mail/themes/shared/mail/cardDialog.css b/comm/mail/themes/shared/mail/cardDialog.css
new file mode 100644
index 0000000000..3706fb6ddb
--- /dev/null
+++ b/comm/mail/themes/shared/mail/cardDialog.css
@@ -0,0 +1,160 @@
+/* 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/. */
+
+/* ===== cardViewOverlay.css ============================================
+ == Styles for Address Book dialogs.
+ ======================================================================= */
+
+@import url("chrome://messenger/skin/messenger.css");
+@import url("chrome://messenger/skin/icons.css");
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+window {
+ --lwt-header-image: none !important;
+}
+
+.input-inline {
+ margin-inline-end: 0 !important;
+}
+
+/* ::::: Card Edit dialog ::::: */
+
+#contactGrid {
+ display: grid;
+ grid-auto-flow: column;
+}
+
+.inputGrid {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ align-content: start;
+ align-items: center;
+}
+
+.align-end {
+ text-align: end;
+}
+
+.showingPhonetic .input-inline {
+ max-width: 16ch;
+}
+
+#BirthMonth[value="-1"],
+#BirthDay[value="-1"],
+.placeholderOption {
+ color: #888;
+}
+
+.YearWidth {
+ width: 8ch;
+}
+
+.ZipWidth {
+ max-width: 14ch !important;
+}
+
+.DepartmentWidth {
+ max-width: 20ch !important;
+}
+
+/* ::::: List dialogs ::::: */
+
+.menu-iconic-left,
+menulist::part(icon) {
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+#addressingWidget {
+ -moz-user-focus: none;
+ height: 15em;
+ margin-bottom: 12px;
+}
+
+.dummy-row,
+.addressingWidgetItem {
+ border: none !important;
+ background-color: inherit !important;
+ color: inherit !important;
+ min-height: 30px;
+}
+
+.addressingWidgetItem:hover,
+.autocomplete-richlistitem:hover {
+ background-color: var(--in-content-item-hover, hsla(0, 0%, 50%, 0.3)) !important;
+}
+
+.textbox-addressingWidget {
+ min-height: 30px;
+ padding-inline: 5px;
+ outline-offset: -2px;
+}
+
+.dummy-row-cell,
+.addressingWidgetCell {
+ border-bottom: 1px solid hsla(0, 0%, 50%, 0.3);
+}
+
+panel[type="autocomplete-richlistbox"] {
+ border: 1px solid var(--in-content-box-border-color, ThreeDShadow);
+}
+
+panel[type="autocomplete-richlistbox"]::part(content) {
+ border-width: 0;
+}
+
+.autocomplete-richlistbox {
+ border-width: 0;
+ border-radius: 0;
+}
+
+.autocomplete-richlistitem {
+ padding-inline-start: 3px;
+}
+
+.person-icon {
+ margin: 0 3px;
+ content: var(--icon-contact);
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+#photo {
+ list-style-image: var(--icon-user);
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ box-shadow: 0 0 5px rgba(127, 127, 127, 0.7);
+}
+
+#PhotoContainer {
+ margin: 5px;
+}
+
+#PhotoDropTarget {
+ margin-top: 5px;
+}
+
+#PhotoDropTarget:hover {
+ border: 1px dashed hsla(0, 0%, 50%, 0.5);
+}
+
+#PhotoFile {
+ background-position: 2px center;
+ background-repeat: no-repeat;
+ padding-inline-start: 20px;
+}
+
+#ProgressContainer {
+ max-height: 0;
+ transition: all .5s ease-out;
+ overflow: hidden;
+}
+#ProgressContainer.expanded {
+ margin-top: 10px;
+ max-height: 40px; /* something higher than the actual height, but not too large */
+}
diff --git a/comm/mail/themes/shared/mail/chat.css b/comm/mail/themes/shared/mail/chat.css
new file mode 100644
index 0000000000..e7a65f137f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/chat.css
@@ -0,0 +1,1006 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+#chatTabPanel {
+ --imbox-selected-text-color: FieldText;
+ --imbox-selected-background-color: Field;
+ --imgroup-selected-background-color: ThreeDLightShadow;
+ overflow: hidden;
+}
+
+:root[lwt-tree-brighttext] #chatTabPanel {
+ --imbox-selected-text-color: #f9f9fa;
+ --imbox-selected-background-color: #18181a;
+}
+
+.im-placeholder-screen {
+ color: FieldText;
+ background-color: Field;
+ overflow: auto;
+ font-size: 15px;
+ font-weight: normal;
+}
+
+:root[lwt-tree-brighttext] .im-placeholder-screen {
+ color: var(--sidebar-text-color);
+ background-color: var(--sidebar-background-color);
+}
+
+.im-placeholder-box {
+ max-width: calc(500px + 9em);
+ min-height: 3em;
+ background: url("chrome://global/skin/icons/info.svg") left 0 no-repeat;
+ -moz-context-properties: fill;
+ fill: currentColor;
+ background-size: 3em;
+ margin-right: .5em;
+ margin-left: .5em;
+ padding-right: 4.5em;
+ padding-left: 4.5em;
+}
+
+.im-placeholder-innerbox {
+ opacity: .8;
+}
+
+.im-placeholder-title {
+ font-size: 2em;
+ font-weight: lighter;
+ line-height: 1.2;
+ margin: 0;
+ margin-bottom: .5em;
+ padding-bottom: .4em;
+ border-bottom: 1px solid var(--splitter-color);
+}
+
+.im-placeholder-desc {
+ margin-right: 0;
+ margin-left: 0;
+}
+
+#noPreviousConvDesc {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.im-placeholder-button-box > button {
+ appearance: none;
+ /* override forms.css */
+ font: inherit;
+ min-height: 30px;
+ color: inherit;
+ border: 1px solid var(--button-border-color);
+ border-radius: var(--button-border-radius);
+ background-color: var(--button-background-color);
+}
+
+.im-placeholder-button-box > button:hover {
+ background-color: var(--button-hover-background-color);
+}
+
+.im-placeholder-button-box > button:hover:active {
+ background-color: var(--button-active-background-color);
+}
+
+.im-placeholder-button-box > button:focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-offset);
+}
+
+.im-placeholder-button-box > button > .button-box {
+ padding-inline: 10px;
+}
+
+#listPaneBox {
+ border-inline-end: 1px solid var(--splitter-color);
+}
+
+:root[lwt-tree] #listPaneBox {
+ appearance: none;
+ background-color: var(--sidebar-background-color);
+ border-inline-end-color: var(--sidebar-border-color);
+ color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree-brighttext] #listPaneBox {
+ border-inline-end-color: var(--sidebar-border-color);
+}
+
+#contactlistbox {
+ color: inherit;
+ margin: 0;
+ /* make it possible to let the children overwrite the end border.
+ margin-inline-start because of the inverted direction */
+ margin-inline-start: -1px;
+ contain: size;
+}
+
+/* move the scrollbar to the left */
+#contactlistbox:-moz-locale-dir(ltr),
+#contactlistbox:-moz-locale-dir(rtl) > richlistitem:is([is="chat-imconv-richlistitem"],[is="chat-contact-richlistitem"],[is="chat-group-richlistitem"]) {
+ direction: rtl;
+}
+
+#contactlistbox:-moz-locale-dir(rtl),
+#contactlistbox:-moz-locale-dir(ltr) > richlistitem:is([is="chat-imconv-richlistitem"],[is="chat-contact-richlistitem"],[is="chat-group-richlistitem"]) {
+ direction: ltr;
+}
+
+richlistitem[is="chat-group-richlistitem"] {
+ align-items: center;
+ padding-inline-start: 4px;
+ margin-inline-end: 1px;
+}
+
+richlistitem[is="chat-group-richlistitem"] > label {
+ margin-inline-start: 4px;
+}
+
+richlistitem[is="chat-group-richlistitem"],
+richlistitem[is="chat-imconv-richlistitem"][unread] {
+ font-weight: bold;
+}
+
+richlistitem[is="chat-imconv-richlistitem"][attention] {
+ color: blue;
+}
+
+richlistitem[is="chat-group-richlistitem"][selected] {
+ background-color: var(--imgroup-selected-background-color);
+ color: var(--imbox-selected-text-color);
+}
+
+richlistbox:focus > richlistitem[is="chat-group-richlistitem"][selected="true"] {
+ background-color: var(--imgroup-selected-background-color);
+ color: var(--imbox-selected-text-color);
+}
+
+richlistitem[is="chat-imconv-richlistitem"],
+richlistitem[is="chat-contact-richlistitem"] {
+ border-top: 1px solid transparent;
+ border-bottom: 1px solid transparent;
+ align-items: center;
+}
+
+.contact-hbox {
+ align-items: center;
+ overflow: hidden;
+}
+
+.conv-hbox {
+ overflow: hidden;
+}
+
+.box-line {
+ width: 2px;
+ height: 100%;
+}
+
+richlistitem[is="chat-contact-richlistitem"] > .box-line {
+ /* equalize the space, the .closeConversationButton uses */
+ margin-inline-end: 22px;
+}
+
+.box-line[selected=true] {
+ background-color: var(--tabline-color);
+}
+
+richlistitem:is([is="chat-imconv-richlistitem"],[is="chat-contact-richlistitem"],[is="chat-group-richlistitem"]) {
+ pointer-events: auto;
+}
+
+richlistitem:is([is="chat-imconv-richlistitem"],[is="chat-contact-richlistitem"],[is="chat-group-richlistitem"]):not([selected=true]):hover {
+ background-color: rgba(0,0,0,.1);
+}
+
+:root[lwt-tree] richlistitem[is="chat-group-richlistitem"],
+:root[lwt-tree] richlistitem[is="chat-imconv-richlistitem"]:not([selected]),
+:root[lwt-tree] richlistitem[is="chat-contact-richlistitem"]:not([selected]) {
+ color: var(--sidebar-text-color);
+}
+
+richlistitem[is="chat-imconv-richlistitem"][selected=true],
+richlistitem[is="chat-contact-richlistitem"][selected=true] {
+ background-color: var(--imbox-selected-background-color) !important;
+ border-color: var(--splitter-color) !important;
+ color: var(--imbox-selected-text-color) !important;
+}
+
+:root[lwt-tree] richlistitem[is="chat-group-richlistitem"][selected],
+:root[lwt-tree] richlistitem:is([is="chat-imconv-richlistitem"],[is="chat-contact-richlistitem"],[is="chat-group-richlistitem"]):not([selected=true]):hover {
+ background-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
+ color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
+}
+
+:root[lwt-tree-brighttext] richlistitem[is="chat-group-richlistitem"][selected],
+:root[lwt-tree-brighttext] richlistitem:is([is="chat-imconv-richlistitem"],[is="chat-contact-richlistitem"],[is="chat-group-richlistitem"]):not([selected=true]):hover {
+ background-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
+}
+
+richlistitem[is="chat-imconv-richlistitem"]:not(:hover) > .closeConversationButton {
+ visibility: hidden;
+}
+
+/* From instantbird/themes/blist.css */
+.contactStatusText,
+.convStatusText {
+ color: GrayText;
+}
+
+.convDisplayName,
+.blistDisplayName,
+.contactDisplayName,
+richlistitem[is="chat-group-richlistitem"] > label {
+ display: inline-block;
+}
+
+.blistDisplayName {
+ flex: 1 auto;
+}
+
+.convUnreadCount,
+.contactDisplayName,
+.convDisplayName,
+.contactDisplayNameInput {
+ margin-inline-end: 0;
+}
+
+.contactDisplayNameInput {
+ margin: 0;
+}
+
+.convUnreadCount {
+ margin-inline-start: 0.5ch;
+}
+
+.convUnreadTargetedCount {
+ color: hsl(0, 100%, 27%);
+ background-color: hsl(0, 100%, 87%);
+ border-radius: 50px;
+ margin: 1px 3px;
+ margin-inline-start: 1ch;
+}
+
+.convUnreadCount[value="0"],
+.convUnreadTargetedCount[value="0"] {
+ display: none;
+}
+
+.convUnreadTargetedCountLabel {
+ margin: 0;
+}
+
+.contactStatusText,
+.convStatusText {
+ margin-inline-start: 0;
+}
+
+/* Avoid a strange jumping bug when hovering and the startChatBubble appears */
+.contact-vbox {
+ min-height: 40px;
+}
+
+.startChatBubble,
+.closeConversationButton {
+ margin: 0 3px;
+ padding: 0;
+ border: none;
+ background: transparent;
+ appearance: none;
+ width: 16px;
+ height: 16px;
+ min-height: 16px;
+ min-width: 16px;
+ cursor: pointer;
+ -moz-user-focus: ignore;
+}
+
+.startChatBubble {
+ display: none;
+ list-style-image: var(--icon-new-chat);
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+richlistitem[is="chat-contact-richlistitem"][cansend]:hover .startChatBubble {
+ display: flex;
+}
+
+.closeConversationButton > .button-box > .button-icon {
+ width: 16px;
+ height: 16px;
+}
+
+/* From im/themes/conversation.css */
+.browser {
+ margin: 0 0;
+}
+
+.conv-bottom, .conv-nicklist {
+ margin: 0 0;
+}
+
+.convBox {
+ min-height: 135px;
+ min-width: 200px;
+}
+
+.conv-top {
+ min-height: 60px;
+}
+
+.conv-top-info {
+ margin: 0;
+ border-style: none;
+ appearance: none;
+ -moz-window-dragging: no-drag;
+ border-bottom: 1px solid var(--splitter-color);
+}
+
+.userIcon {
+ border: 2px solid rgba(0,0,0,0.15);
+ border-radius: 5px;
+ object-fit: contain;
+ width: 48px;
+ height: 48px;
+}
+
+:root[lwt-tree-brighttext] .userIcon {
+ border-color: rgba(255,255,255,0.15);
+}
+
+.userIcon:not([src]) {
+ display: none;
+}
+
+.fillUserIcon {
+ -moz-context-properties: fill, fill-opacity;
+ fill: currentColor;
+ fill-opacity: 0.3;
+}
+
+.statusTypeIcon, .smallStatusIcon {
+ /* Place in opposite corner. */
+ /* NOTE: unlike position: absolute, the image will still take up space if its
+ * sibling (such as .userIcon) is hidden. */
+ margin-block: auto 0;
+ margin-inline: auto 0;
+}
+
+.statusTypeIcon {
+ width: 16px;
+ height: 16px;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, var(--color-ink-50) 20%, transparent);
+ stroke: var(--color-ink-50);
+}
+
+#statusTypeIcon:not([disabled]) {
+ cursor: pointer;
+}
+
+.userIcon:not([src]) + .statusTypeIcon {
+ /* If userIcon is invisible (for chat) we still keep the status icon in the
+ * same position. */
+ padding-block-start: 32px;
+}
+
+/* Used with protoIcon. */
+.smallStatusIcon {
+ width: 10px;
+ height: 10px;
+}
+
+#protolist richlistitem {
+ align-items: center;
+}
+
+.protoIcon {
+ width: 16px;
+ height: 16px;
+ object-fit: contain;
+}
+
+.protoIconDimmed {
+ opacity: 0.7;
+}
+
+richlistitem:not([selected]) .protoIconDimmed {
+ opacity: 0.3;
+}
+
+:root[lwt-tree-brighttext] .protoIconDimmed {
+ opacity: 0.8;
+}
+
+:root[lwt-tree-brighttext] richlistitem:not([selected]) .protoIconDimmed {
+ opacity: 0.5;
+}
+
+#statusTypeIcon[status="available"],
+#statusTypeAvailable,
+#imStatusAvailable {
+ list-style-image: var(--icon-status-online);
+}
+
+#statusTypeIcon[status="idle"] {
+ list-style-image: var(--icon-status-idle);
+}
+
+#statusTypeIcon[status="offline"],
+#statusTypeIcon[status="invisible"],
+#statusTypeOffline,
+#imStatusOffline {
+ list-style-image: var(--icon-status-offline);
+}
+
+#statusTypeIcon[status="unavailable"],
+#statusTypeIcon[status="away"],
+#statusTypeUnavailable,
+#imStatusUnavailable {
+ list-style-image: var(--icon-status-away);
+}
+
+/* corresponds to im/themes/conversation.css @media all and (min-height: 251px) */
+.displayUserAccount {
+ padding: 6px;
+ display: flex;
+ gap: 6px;
+}
+
+/* User image and status stack. */
+.displayUserAccount > stack {
+ flex: 0 0 auto;
+ align-self: start;
+}
+
+.nameAndStatusGrid {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ align-items: center;
+ gap: 4px;
+ flex: 1 1 auto;
+}
+
+.nameAndStatusGrid > * {
+ margin: 0;
+}
+
+.nameAndStatusGrid > :is(hr, .statusMessage, .statusMessageInput) {
+ grid-column: 1 / 3;
+}
+
+.nameAndStatusGrid > hr {
+ height: 0;
+ border-block-start: 1px solid hsla(0, 0%, 50%, 0.5);
+ border-block-end: none;
+ border-inline: none;
+}
+
+.displayName {
+ font-size: larger;
+ display: block;
+}
+
+.nameAndStatusGrid > .displayName:empty + hr {
+ display: none;
+}
+
+.statusMessage {
+ display: inline-block;
+}
+
+.statusMessage[noTopic] {
+ font-style: italic;
+}
+
+.statusMessageInput[editing] {
+ color: -moz-dialogtext;
+}
+
+.conv-messages {
+ min-width: 150px;
+}
+
+/* Animation copied from the find bar in Firefox - http://dxr.mozilla.org/mozilla-central/source/toolkit/themes/linux/global/findBar.css#7 */
+.conv-status-container {
+ display: block;
+ height: 20px;
+ padding: 3px;
+ border-bottom: 1px solid ThreeDShadow;
+ transition-property: margin-top, opacity, visibility;
+ transition-duration: 150ms, 150ms, 0s;
+ transition-timing-function: ease-in-out, ease-in-out, linear;
+}
+
+.conv-status-container[hidden] {
+ /* Override display:none to make the transition work. */
+ display: flex;
+ visibility: collapse;
+ margin-top: -1em;
+ opacity: 0;
+ transition-delay: 0s, 0s, 150ms;
+}
+
+.conv-textbox {
+ appearance: none;
+ margin: 0;
+ /* margin-inline-end so the borders show up on all sides. */
+ margin-inline-end: 1px;
+ padding: 2px;
+ box-sizing: content-box;
+ border: 2px solid transparent;
+}
+
+:root[lwt-tree] .conv-textbox {
+ background-color: var(--toolbar-field-background-color);
+ color: var(--toolbar-field-color);
+}
+
+.conv-textbox:focus-visible {
+ border-color: var(--toolbar-field-focus-border-color);
+ outline-style: none;
+}
+
+.conv-textbox[invalidInput="true"] {
+ border-color: red;
+}
+
+.conv-counter {
+ justify-self: end;
+ align-self: end;
+ color: #000;
+ background-color: rgba(246, 246, 246, 0.7);
+ border-inline-start: 1px solid rgb(200, 200, 200);
+ border-top: 1px solid rgb(200, 200, 200);
+ /* Padding that gets flipped to margins in .conv-counter[value^="0"] to avoid the red border. */
+ font-size: 130%;
+ padding-top: 0;
+ padding-bottom: 1px;
+ padding-inline-start: 5px;
+ padding-inline-end: 6px;
+ margin: 0;
+}
+
+:root[lwt-tree-brighttext] .conv-counter {
+ color: var(--sidebar-text-color);
+ background-color: rgba(22, 22, 22, 0.2);
+ border-inline-start: 1px solid var(--splitter-color);
+ border-top: 1px solid var(--splitter-color);
+}
+
+.conv-counter:-moz-locale-dir(ltr) {
+ border-top-left-radius: 3px;
+}
+
+.conv-counter:-moz-locale-dir(rtl) {
+ border-top-right-radius: 3px;
+}
+
+.conv-counter[value=""] {
+ display: none;
+}
+
+/* Negative counter values (user went over the character limit). */
+.conv-counter[value^="-"] {
+ color: red;
+}
+
+.splitter[orient="vertical"],
+#logsSplitter {
+ border-style: none;
+ min-height: 0;
+ /* splitter grip area */
+ height: 5px;
+ background-color: transparent;
+ /* make only the splitter border visible */
+ margin-top: -5px;
+ margin-inline-start: 0;
+ /* because of the negative margin needed to make the splitter visible */
+ position: relative;
+ z-index: 10;
+ border-bottom: 1px solid var(--splitter-color);
+}
+
+/* Adaptation of #folderpane_splitter */
+#listSplitter,
+#contextSplitter {
+ margin-top: 0;
+ /* splitter grip area */
+ width: 5px;
+ /* because of the negative margin needed to make the splitter visible */
+ position: relative;
+ z-index: 10;
+ transition: border-width .3s ease-in;
+}
+
+#listSplitter {
+ border-inline-start: 1px solid transparent;
+ /* make only the splitter border visible */
+ margin-inline-end: -5px;
+}
+
+#listSplitter[state="collapsed"]:hover {
+ border-inline-start: 4px solid var(--selected-item-color);
+}
+
+#contextSplitter {
+ border-inline-end: 1px solid var(--splitter-color);
+ /* make only the splitter border visible */
+ margin-inline-start: -5px;
+}
+
+#contextSplitter[state="collapsed"]:hover {
+ border-inline-end: 4px solid var(--selected-item-color);
+}
+
+#conv-toolbar {
+ border-style: none;
+}
+
+#logTree {
+ margin: 0 0;
+}
+
+.conv-nicklist-label {
+ pointer-events: none;
+ font-weight: bold;
+ padding-inline-start: 1px;
+ display: inline-block;
+}
+
+.conv-nicklist-image {
+ pointer-events: none;
+ width: 16px;
+ margin: 0 2px;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+.conv-nicklist-image:not([src]) {
+ visibility: hidden;
+}
+
+.conv-logs-header-label {
+ appearance: auto;
+ -moz-default-appearance: treeheadercell;
+ margin: 0 -1px 0 0;
+ padding-left: 3px;
+}
+
+#nicklist > richlistitem[inactive] > .conv-nicklist-image {
+ opacity: 0.45;
+}
+
+#nicklist > richlistitem[inactive][selected] > .conv-nicklist-image {
+ opacity: 0.7;
+}
+
+#nicklist > richlistitem[inactive] > label {
+ color: GrayText !important;
+ font-weight: normal;
+}
+
+.conv-nicklist:focus > richlistitem[inactive][selected] > label {
+ color: var(--selected-item-text-color) !important;
+}
+
+/* from instantbird/themes/blist.css */
+richlistitem[is="chat-group-richlistitem"] .twisty {
+ padding-top: 1px;
+ width: 10px;
+ height: 10px;
+ margin-inline-start: 5px;
+ background: var(--icon-nav-down-sm) no-repeat center;
+ background-size: contain;
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+richlistitem[is="chat-group-richlistitem"].closed .twisty {
+ transform: rotate(-90deg);
+}
+
+richlistitem[is="chat-group-richlistitem"].closed:-moz-locale-dir(rtl) .twisty {
+ transform: rotate(90deg);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ richlistitem[is="chat-group-richlistitem"] .twisty {
+ transition: transform 200ms ease;
+ }
+}
+
+.prplBuddyIcon {
+ margin: 2px 0;
+}
+
+.searchProtoIcon {
+ -moz-context-properties: fill;
+ fill: currentColor;
+ opacity: 0.54;
+}
+
+#statusTypeIcon {
+ min-width: 40px;
+}
+
+/* show the status icon also in text mode */
+toolbar[mode="text"] #statusTypeIcon > .toolbarbutton-icon {
+ display: flex;
+}
+
+.status-container {
+ width: 15em;
+}
+
+#statusMessageLabel:not([statusType="offline"],[disabled]) {
+ cursor: text;
+}
+
+#statusMessageInput.status-message-input {
+ margin: 0;
+}
+
+.statusMessageToolbarItem {
+ margin: 2px 4px;
+ margin-inline-start: -1px;
+ padding: 3px 5px 4px;
+ border: 1px solid transparent;
+ border-radius: var(--button-border-radius);
+ background-clip: padding-box;
+}
+
+#chat-status-selector:hover > vbox > .statusMessageToolbarItem,
+.statusMessageToolbarItem:focus {
+ color: var(--toolbar-field-color);
+ background-color: var(--toolbar-field-background-color);
+ border-color: var(--toolbar-field-border-color);
+}
+
+#chat-status-selector > vbox > .statusMessageToolbarItem[editing],
+.statusMessageToolbarItem:-moz-lwtheme:focus {
+ appearance: none;
+ padding-inline-start: 4px;
+ padding-inline-end: 4px;
+ color: var(--toolbar-field-color);
+ background-color: var(--toolbar-field-focus-background-color);
+ border-color: var(--toolbar-field-focus-border-color);
+ outline: 1px solid var(--toolbar-field-focus-border-color);
+}
+
+.statusMessageToolbarItem[statusType="offline"],
+.statusMessageToolbarItem[disabled] {
+ border: none;
+}
+
+.alltabs-item[style*="chat.svg"] {
+ -moz-context-properties: fill, stroke-opacity;
+ stroke-opacity: 0;
+ fill: currentColor;
+}
+
+#button-add-buddy {
+ list-style-image: var(--icon-new-contact);
+}
+
+#button-join-chat {
+ list-style-image: var(--icon-new-chat);
+}
+
+#button-chat-accounts {
+ list-style-image: var(--icon-id);
+}
+
+:root[lwt-tree] #contextPane {
+ background-color: var(--sidebar-background-color);
+ border-bottom: 1px solid var(--sidebar-border-color);
+ color: var(--sidebar-text-color);
+}
+
+#contextPaneFlexibleBox {
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+
+#contextPaneFlexibleBox vbox.conv-chat {
+ flex: 1 1 0;
+ min-height: 0;
+}
+
+#previousConversations {
+ flex: 1 1 0;
+}
+
+:root[lwt-tree] #nicklist,
+:root[lwt-tree] .conv-nicklist-header,
+:root[lwt-tree] .conv-logs-header-label {
+ appearance: none;
+ background-color: var(--sidebar-background-color);
+ border-bottom: 1px solid var(--sidebar-border-color);
+ color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree-brighttext] #nicklist,
+:root[lwt-tree-brighttext] .conv-nicklist-header,
+:root[lwt-tree-brighttext] .conv-logs-header-label {
+ border-bottom-color: var(--sidebar-border-color, rgba(249,249,250,.2));
+}
+
+.conv-header-label {
+ display: inline-block;
+}
+
+#participantCount {
+ background: transparent;
+ width: 0;
+}
+
+:root[lwt-tree] #participantCount {
+ color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] .conv-nicklist > richlistitem {
+ color: var(--sidebar-text-color);
+ box-shadow: none;
+}
+
+:root[lwt-tree] .conv-nicklist > richlistitem[selected="true"],
+:root[lwt-tree] .conv-nicklist:focus > richlistitem[current="true"],
+:root[lwt-tree] .conv-nicklist:focus > richlistitem[selected="true"] {
+ background-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.3));
+ background-image: none;
+ border-color: var(--sidebar-border-color);
+ color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
+}
+
+:root[lwt-tree-brighttext] .conv-nicklist > richlistitem[selected="true"],
+:root[lwt-tree-brighttext] .conv-nicklist:focus > richlistitem[current="true"],
+:root[lwt-tree-brighttext] .conv-nicklist:focus > richlistitem[selected="true"] {
+ background-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
+ border-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.1));
+}
+
+:root[lwt-tree] #nicklist > richlistitem[inactive]:not([selected]) > label {
+ color: var(--sidebar-text-color) !important;
+ opacity: .55;
+}
+
+:root[lwt-tree] #nicklist > richlistitem[inactive][selected] > label,
+:root[lwt-tree] #nicklist:focus > richlistitem[inactive][selected] > label {
+ color: var(--sidebar-highlight-text-color, var(--sidebar-text-color)) !important;
+}
+
+:root[lwt-tree] #logTree {
+ appearance: none;
+}
+
+#goToConversation {
+ appearance: none !important;
+ margin: 4px;
+ padding: 1px !important;
+ color: inherit !important;
+ border: 1px solid hsla(0, 0%, 50%, 0.5);
+ border-radius: var(--button-border-radius);
+ background-color: hsla(0, 0%, 50%, 0.2) !important;
+ box-shadow: none;
+ transition-property: background-color, border-color, box-shadow;
+ transition-duration: 150ms;
+}
+
+#goToConversation:hover {
+ background-color: hsla(0, 0%, 50%, 0.3) !important;
+}
+
+#goToConversation:hover:active {
+ background-color: hsla(0, 0%, 50%, 0.4) !important;
+ box-shadow: 0 0 1px hsla(0, 0%, 50%, 0.15) inset;
+}
+
+
+/* Chat Toolbar button. */
+toolbar[mode="text"] #button-chat {
+ flex-direction: row;
+}
+
+.badgeButton-badge {
+ background-color: red;
+ border: 1px solid white;
+ border-radius: 1em;
+ box-shadow: 1px 1px 1px black;
+ color: white;
+ font: xx-small Helvetica, Verdana, Tahoma, sans-serif;
+ height: -moz-fit-content;
+ min-width: 1em;
+ text-align: center;
+ margin-top: -4px;
+ margin-inline-start: 5px;
+ margin-inline-end: 0;
+ padding-inline: 1px;
+ padding-block: 1px 0;
+}
+
+toolbar[mode="text"] .badgeButton-badge {
+ margin: 0;
+}
+
+.badgeButton-badgeLabel {
+ margin: 0;
+}
+
+/* encryption status selector */
+
+.encryption-container {
+ border-top: 1px solid var(--splitter-color);
+ min-height: 32px;
+ padding: 4px;
+}
+
+.encryption-label {
+ font-weight: 600;
+ text-overflow: ellipsis;
+ display: inline-block;
+ white-space: nowrap;
+ overflow: hidden;
+ min-width: 0;
+}
+
+.encryption-not-private > image {
+ list-style-image: url("chrome://messenger/skin/icons/new/chat-lock-insecure.svg");
+}
+
+.encryption-unverified > image {
+ list-style-image: url("chrome://messenger/skin/icons/new/chat-lock-unverified.svg");
+}
+
+.encryption-finished > image {
+ list-style-image: url("chrome://messenger/skin/icons/new/chat-lock-finished.svg");
+}
+
+.encryption-private > image {
+ list-style-image: url("chrome://messenger/skin/icons/new/chat-lock-private.svg");
+}
+
+.encryption-button {
+ appearance: none !important;
+ padding: 1px !important;
+ border: 1px solid var(--toolbarbutton-hover-bordercolor);
+ border-radius: var(--button-border-radius);
+ background: var(--toolbarbutton-hover-background) !important;
+ box-shadow: var(--toolbarbutton-hover-boxshadow);
+ transition-property: background-color, border-color, box-shadow;
+ transition-duration: 150ms;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+.encryption-button:not([disabled="true"]):not([open="true"]):hover {
+ background: var(--toolbarbutton-active-background) !important;
+ border-color: var(--toolbarbutton-active-bordercolor);
+}
+
+.encryption-button[open="true"] {
+ background: var(--toolbarbutton-active-background) !important;
+ border-color: var(--toolbarbutton-active-bordercolor);
+ box-shadow: var(--toolbarbutton-active-boxshadow);
+}
+
+.encryption-button > image {
+ margin-inline-end: 3px !important;
+ width: 14px;
+}
+
+.encryption-button .toolbarbutton-menu-dropmarker {
+ appearance: none !important;
+ list-style-image: var(--icon-nav-down-sm);
+ margin-inline: 3px 0;
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
diff --git a/comm/mail/themes/shared/mail/cloudfileSelectDialog.css b/comm/mail/themes/shared/mail/cloudfileSelectDialog.css
new file mode 100644
index 0000000000..3bb5ac03e0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/cloudfileSelectDialog.css
@@ -0,0 +1,20 @@
+/* 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/. */
+
+richlistitem {
+ display: flex;
+ align-items: center;
+ padding: 4px 8px;
+}
+
+richlistitem > label {
+ flex: 1 1 auto;
+}
+
+richlistitem > img {
+ flex: 0 0 auto;
+ margin-inline-end: 8px;
+ width: 32px;
+ height: 32px;
+}
diff --git a/comm/mail/themes/shared/mail/colors.css b/comm/mail/themes/shared/mail/colors.css
new file mode 100644
index 0000000000..c393401bb0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/colors.css
@@ -0,0 +1,130 @@
+/* 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/. */
+
+:host,
+:root {
+ --color-red-10: #FEE2E2;
+ --color-red-20: #FECACA;
+ --color-red-30: #FCA5A5;
+ --color-red-40: #f87171;
+ --color-red-50: #ef4444;
+ --color-red-60: #dc2626;
+ --color-red-70: #b91c1c;
+ --color-red-80: #991b1b;
+ --color-red-90: #7f1d1d;
+
+ --color-orange-10: #ffedd5;
+ --color-orange-20: #fed7aa;
+ --color-orange-30: #fdba74;
+ --color-orange-40: #fb923c;
+ --color-orange-50: #f97316;
+ --color-orange-60: #ea580c;
+ --color-orange-70: #c2410c;
+ --color-orange-80: #9a3412;
+ --color-orange-90: #7c2d12;
+
+ --color-amber-10: #fef3c7;
+ --color-amber-20: #fde68a;
+ --color-amber-30: #fcd34d;
+ --color-amber-40: #fbbf24;
+ --color-amber-50: #f59e0b;
+ --color-amber-60: #d97706;
+ --color-amber-70: #b45309;
+ --color-amber-80: #92400e;
+ --color-amber-90: #78350f;
+
+ --color-yellow-10: #fef9c3;
+ --color-yellow-20: #fef08a;
+ --color-yellow-30: #fde047;
+ --color-yellow-40: #facc15;
+ --color-yellow-50: #eab308;
+ --color-yellow-60: #ca8a04;
+ --color-yellow-70: #a16207;
+ --color-yellow-80: #854d0e;
+ --color-yellow-90: #713f12;
+
+ --color-green-10: #dcfce7;
+ --color-green-20: #bbf7d0;
+ --color-green-30: #86efac;
+ --color-green-40: #4ade80;
+ --color-green-50: #22c55e;
+ --color-green-60: #16a34a;
+ --color-green-70: #15803d;
+ --color-green-80: #166534;
+ --color-green-90: #14532d;
+
+ --color-teal-10: #cdfaf7;
+ --color-teal-20: #9ff4f0;
+ --color-teal-30: #62e9e6;
+ --color-teal-40: #27d3d6;
+ --color-teal-50: #0db7bd;
+ --color-teal-60: #0a929d;
+ --color-teal-70: #0e757f;
+ --color-teal-80: #135e67;
+ --color-teal-90: #144e56;
+
+ --color-blue-10: #ddeefe;
+ --color-blue-20: #bce0fd;
+ --color-blue-30: #88ccfc;
+ --color-blue-40: #4cb1f9;
+ --color-blue-50: #2493ef;
+ --color-blue-60: #1373d9;
+ --color-blue-70: #105bbc;
+ --color-blue-80: #124c9a;
+ --color-blue-90: #15427c;
+
+ --color-purple-10: #f3e8ff;
+ --color-purple-20: #e9d5ff;
+ --color-purple-30: #d8b4fe;
+ --color-purple-40: #c084fc;
+ --color-purple-50: #a855f7;
+ --color-purple-60: #9333ea;
+ --color-purple-70: #7e22ce;
+ --color-purple-80: #6b21a8;
+ --color-purple-90: #581c87;
+
+ --color-magenta-10: #fbe7f9;
+ --color-magenta-20: #f8cff3;
+ --color-magenta-30: #f4a9e8;
+ --color-magenta-40: #ee75d7;
+ --color-magenta-50: #e247c4;
+ --color-magenta-60: #cd26a5;
+ --color-magenta-70: #b01a86;
+ --color-magenta-80: #91186e;
+ --color-magenta-90: #79195c;
+
+ --color-brown-10: #f4e9d7;
+ --color-brown-20: #efdfc4;
+ --color-brown-30: #e4cdab;
+ --color-brown-40: #d7bc96;
+ --color-brown-50: #b6986c;
+ --color-brown-60: #96764b;
+ --color-brown-70: #755b38;
+ --color-brown-80: #51412c;
+ --color-brown-90: #47341f;
+
+ --color-gray-05: #fafafa;
+ --color-gray-10: #f4f4f5;
+ --color-gray-20: #e4e4e7;
+ --color-gray-30: #d4d4d8;
+ --color-gray-40: #a1a1aa;
+ --color-gray-50: #71717a;
+ --color-gray-60: #52525b;
+ --color-gray-70: #3f3f46;
+ --color-gray-80: #27272a;
+ --color-gray-90: #18181b;
+
+ --color-ink-10: #f1f3fa;
+ --color-ink-20: #e3e5f2;
+ --color-ink-30: #cdd0e5;
+ --color-ink-40: #9b9ec2;
+ --color-ink-50: #6e6f9b;
+ --color-ink-60: #52507c;
+ --color-ink-70: #3e3c67;
+ --color-ink-80: #2a284b;
+ --color-ink-90: #1a1838;
+
+ --color-white: #ffffff;
+ --color-black: #000000;
+}
diff --git a/comm/mail/themes/shared/mail/common.css b/comm/mail/themes/shared/mail/common.css
new file mode 100644
index 0000000000..460fcbefc7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/common.css
@@ -0,0 +1,131 @@
+/* - 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://global/skin/in-content/common-shared.css");
+@import url("chrome://messenger/skin/layout.css");
+
+:host,
+:root {
+ --in-content-button-height: 2.2em;
+ --in-content-button-border-radius: 3px;
+ --in-content-button-border-color: color-mix(in srgb, currentColor 9%, transparent);
+ --in-content-button-border-color-hover: color-mix(in srgb, currentColor 17%, transparent);
+ --in-content-sidebar-width: auto;
+ --menu-item-margin: 0 3px;
+}
+
+:root:not(.system-font-size) {
+ font: message-box;
+}
+
+@media not (prefers-contrast) {
+ :host,
+ :root {
+ --in-content-box-info-background: var(--layout-background-1);
+ --in-content-box-info-border: var(--layout-border-0);
+ --in-content-button-background: var(--grey-90-a10);
+ --in-content-button-background-hover: var(--grey-90-a20);
+ --in-content-button-background-active: var(--grey-90-a30);
+ --in-content-categories-background: var(--layout-background-2);
+ --in-content-categories-border: var(--in-content-categories-background);
+ --in-content-item-selected-unfocused: var(--color-gray-20);
+ --in-content-item-hover: color-mix(in srgb, currentColor 12%, transparent);
+ --in-content-item-selected: color-mix(in srgb, currentColor 20%, transparent);
+ --in-content-item-selected-text: var(--in-content-page-color);
+ }
+
+ @media (prefers-color-scheme: dark) {
+ :host,
+ :root {
+ --in-content-box-info-background: var(--layout-background-2);
+ --in-content-box-info-border: transparent;
+ --in-content-categories-background: var(--layout-background-2);
+ --in-content-item-selected-unfocused: rgba(249, 249, 250, 0.05);
+ --in-content-button-background: rgba(249, 249, 250, 0.1);
+ --in-content-button-background-hover: rgba(249, 249, 250, 0.15);
+ --in-content-button-background-active: rgba(249, 249, 250, 0.2);
+ --in-content-primary-button-background: #45a1ff;
+ --in-content-primary-button-background-hover: #65c1ff;
+ --in-content-primary-button-background-active: #85e1ff;
+ --in-content-focus-outline-color: #45a1ff;
+ }
+ }
+}
+
+@media (prefers-contrast) {
+ :root {
+ --in-content-box-info-background: transparent;
+ --in-content-box-info-border: currentColor;
+ --in-content-categories-background: transparent;
+ --in-content-categories-border: currentColor;
+ }
+}
+
+.sidebar-footer-link,
+#categories > .category {
+ border-color: transparent !important;
+}
+
+#categories > .category {
+ margin-inline: 6px;
+}
+
+#categories > .category[selected] {
+ font-weight: 500;
+}
+
+@media not (prefers-contrast) {
+ #categories > .category[selected] {
+ background-color: var(--in-content-button-background) !important;
+ color: unset;
+ }
+
+ #categories[keyboard-navigation="true"]:focus-visible > .category[current],
+ #categories > .category:focus-visible {
+ background-color: var(--in-content-item-selected) !important;
+ color: var(--in-content-item-selected-text);
+ outline: none;
+ }
+}
+
+.category-name {
+ font-size: 1.1rem;
+}
+
+.sidebar-footer-list {
+ margin-inline: 0;
+}
+
+.sidebar-footer-icon {
+ margin: 10px;
+}
+
+.sidebar-footer-label {
+ margin: 0;
+}
+
+menupopup {
+ --panel-border-color: var(--in-content-box-border-color);
+ --panel-background: var(--in-content-box-background);
+ --panel-color: var(--in-content-text-color);
+}
+
+menupopup::part(content) {
+ border-radius: var(--arrowpanel-border-radius);
+}
+
+menulist > menupopup {
+ --panel-padding: 3px 0;
+}
+
+menupopup > :is(menu, menuitem) {
+ margin: var(--menu-item-margin);
+ min-height: 24px;
+ padding-block: var(--menu-item-padding);
+ border-radius: 3px;
+}
+
+menulist > menupopup menuseparator {
+ margin: 4px 8px;
+}
diff --git a/comm/mail/themes/shared/mail/compacttheme.css b/comm/mail/themes/shared/mail/compacttheme.css
new file mode 100644
index 0000000000..3ead999372
--- /dev/null
+++ b/comm/mail/themes/shared/mail/compacttheme.css
@@ -0,0 +1,39 @@
+/* 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/. */
+
+/* compacttheme.css is loaded in messenger.xhtml after messenger.css when it
+ is preffed on. The bulk of the styling is here in the shared file, but
+ there are overrides for each platform in their compacttheme.css files. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root:-moz-lwtheme {
+ --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor);
+ --toolbar-non-lwt-textcolor: var(--lwt-text-color);
+ --toolbar-non-lwt-bgimage: none;
+ --new-focused-folder-color: var(--sidebar-highlight-text-color);
+}
+
+@media (prefers-color-scheme: dark) {
+ :root:-moz-lwtheme {
+ /* Toolbar buttons */
+ --lwt-toolbarbutton-hover-background: rgba(179, 179, 179, 0.4);
+ --lwt-toolbarbutton-active-background: rgba(179, 179, 179, 0.6);
+ --autocomplete-popup-highlight-background: #0060DF;
+ }
+
+ #folderTree:-moz-lwtheme
+ treechildren::-moz-tree-image(folderNameCol, newMessages-true),
+ #folderTree:-moz-lwtheme
+ treechildren::-moz-tree-image(folderNameCol, isServer-true, biffState-NewMail) {
+ --new-folder-color: var(--color-blue-40);
+ }
+
+ #folderTree:-moz-lwtheme
+ treechildren::-moz-tree-cell-text(hasUnreadMessages-true, selected, focus),
+ #folderTree:-moz-lwtheme
+ treechildren::-moz-tree-cell-text(closed, subfoldersHaveUnreadMessages-true, selected, focus) {
+ color: var(--sidebar-highlight-text-color) !important;
+ }
+}
diff --git a/comm/mail/themes/shared/mail/composerOverlay.css b/comm/mail/themes/shared/mail/composerOverlay.css
new file mode 100644
index 0000000000..89f0fcaa7e
--- /dev/null
+++ b/comm/mail/themes/shared/mail/composerOverlay.css
@@ -0,0 +1,16 @@
+/* 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/. */
+
+/* Because this sheet is loaded synchronously while the user is waiting for the
+ compose window to appear, it must not @import a ton of other things, and
+ especially must not trigger network access. */
+
+table.moz-email-headers-table:hover,
+table.moz-email-headers-table:hover > tbody > tr > th,
+table.moz-email-headers-table:hover > tbody > tr > td,
+blockquote[type=cite] table:hover,
+blockquote[type=cite] table:hover > tbody > tr > th,
+blockquote[type=cite] table:hover > tbody > tr > td {
+ border: 1px solid lightgrey !important;
+}
diff --git a/comm/mail/themes/shared/mail/contextMenu.css b/comm/mail/themes/shared/mail/contextMenu.css
new file mode 100644
index 0000000000..7a29a5ec0d
--- /dev/null
+++ b/comm/mail/themes/shared/mail/contextMenu.css
@@ -0,0 +1,210 @@
+/* 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/. */
+
+:root {
+ --menu-item-margin: 0 4px;
+ --menu-item-padding: 4px;
+}
+
+/* UI Density customization */
+
+:root[uidensity="compact"] {
+ --menu-item-margin: 0 3px;
+ --menu-item-padding: 3px;
+}
+
+:root[uidensity="compact"] menupopup {
+ --arrowpanel-padding: 3px 0;
+}
+
+:root[uidensity="touch"] {
+ --menu-item-padding: 9px;
+}
+
+menupopup {
+ /* Complement the :is(menu, menuitem) margin. */
+ --arrowpanel-padding: 4px 0;
+ --panel-background: var(--arrowpanel-background);
+ --panel-color: var(--arrowpanel-color);
+ --panel-border-color: var(--arrowpanel-border-color);
+ --panel-border-radius: var(--arrowpanel-border-radius);
+ --panel-padding: var(--arrowpanel-padding);
+ --menu-color: var(--arrowpanel-color);
+ --menu-border-color: var(--arrowpanel-border-color);
+ --menu-background-color: var(--arrowpanel-background);
+ font: menu;
+ font-size: inherit;
+ text-align: start;
+}
+
+menubar:not(:-moz-lwtheme) > menu menupopup {
+ --panel-background: Menu;
+ --panel-color: MenuText;
+}
+
+menupopup > menuitem {
+ appearance: none !important;
+}
+
+menupopup > :is(menu, menuitem) > .menu-text {
+ appearance: none;
+ margin-inline-start: 0 !important;
+}
+
+menupopup > :is(menu, menuitem) {
+ appearance: none;
+ margin: var(--menu-item-margin);
+ min-height: 24px;
+ padding-inline: 8px;
+ padding-block: var(--menu-item-padding);
+ border-radius: 3px;
+ background-color: transparent;
+}
+
+menupopup > :is(menu, menuitem):focus {
+ outline: 0;
+}
+
+menupopup > :is(menu, menuitem)[disabled="true"],
+menupopup > :is(menu, menuitem)[disabled="true"]:hover,
+menupopup > :is(menu, menuitem)[checked="true"][disabled="true"],
+menupopup > :is(menu, menuitem)[checked="true"][disabled="true"]:hover {
+ color: var(--text-color-deemphasized);
+ background-color: transparent;
+}
+
+menu > .menu-right {
+ display: none;
+}
+
+menupopup > menu::after {
+ -moz-context-properties: stroke, fill-opacity;
+ content: var(--icon-nav-right-sm);
+ stroke: currentColor;
+ float: inline-end;
+}
+
+menupopup > menu:-moz-locale-dir(rtl)::after {
+ content: var(--icon-nav-left-sm);
+}
+
+menupopup > menu::after {
+ margin-inline-start: 10px;
+}
+
+menupopup > :is(menu, menuitem)[checked="true"] {
+ list-style-image: var(--icon-check);
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+ color: inherit;
+}
+
+menupopup > :is(menu, menuitem):not([disabled="true"],:active)[_moz-menuactive] {
+ color: inherit;
+ background-color: var(--arrowpanel-dimmed);
+}
+
+menupopup > :is(menu, menuitem):not([disabled="true"])[_moz-menuactive]:active {
+ color: inherit;
+ background-color: var(--arrowpanel-dimmed-further);
+ box-shadow: 0 1px 0 hsla(210, 4%, 10%, 0.03) inset;
+}
+
+menubar:not(:-moz-lwtheme) > menu menupopup >
+ :is(menu, menuitem):not([disabled="true"])[_moz-menuactive] {
+ color: -moz-MenuHoverText;
+ background-color: -moz-MenuHover;
+}
+
+@media (-moz-platform: windows-win10) and (-moz-windows-default-theme){
+ menubar:not(:-moz-lwtheme) > menu menupopup >
+ :is(menu, menuitem):not([disabled="true"])[_moz-menuactive] {
+ color: inherit;
+ background-color: var(--arrowpanel-dimmed-further);
+ }
+}
+
+menupopup > menuseparator {
+ appearance: none !important;
+ min-height: 0;
+ border-top: 1px solid var(--panel-separator-color);
+ border-bottom: none;
+ margin: 4px 8px;
+ padding: 0;
+}
+
+#ContentSelectDropdown > menupopup {
+ /* !important to override inline styles */
+ --content-select-background-image: none !important;
+ --panel-color: var(--arrowpanel-color) !important;
+}
+
+#ContentSelectDropdown > menupopup[customoptionstyling="true"]::part(arrowscrollbox) {
+ /* !important to override inline styles */
+ background-image: none !important;
+ background-color: var(--arrowpanel-background) !important;
+}
+
+#ContentSelectDropdown .ContentSelectDropdown-item-0:not([_moz-menuactive="true"]) {
+ background-color: var(--arrowpanel-background) !important;
+ color: var(--arrowpanel-color) !important;
+}
+
+.menu-iconic-accel {
+ margin-inline-end: 3px !important;
+}
+
+/* browser navigation context menu in content pages */
+#context-navigation > .menuitem-iconic {
+ -moz-box-flex: 1;
+ -moz-box-pack: center;
+ -moz-box-align: center;
+ flex: 1 0 auto;
+ margin: var(--menu-item-margin);
+ border-radius: 3px;
+}
+
+#context-navigation > .menuitem-iconic > .menu-iconic-left {
+ appearance: none;
+}
+
+#context-navigation > .menuitem-iconic > .menu-iconic-text,
+#context-navigation > .menuitem-iconic > .menu-accel-container {
+ display: none;
+}
+
+#context-navigation > .menuitem-iconic > .menu-iconic-left {
+ margin: 0;
+ padding: 0;
+}
+
+#context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
+ width: 1.25em;
+ height: auto;
+ margin: 7px;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+#browserContext-back {
+ list-style-image: url("chrome://messenger/skin/icons/browser-back.svg");
+}
+
+#browserContext-forward {
+ list-style-image: url("chrome://messenger/skin/icons/browser-forward.svg");
+}
+
+#browserContext-reload {
+ list-style-image: url("chrome://global/skin/icons/reload.svg");
+}
+
+#browserContext-stop {
+ list-style-image: url("chrome://global/skin/icons/close.svg");
+}
+
+#browserContext-back:-moz-locale-dir(rtl),
+#browserContext-forward:-moz-locale-dir(rtl),
+#browserContext-reload:-moz-locale-dir(rtl) {
+ transform: scaleX(-1);
+}
diff --git a/comm/mail/themes/shared/mail/converterDialog.css b/comm/mail/themes/shared/mail/converterDialog.css
new file mode 100644
index 0000000000..381ccf808d
--- /dev/null
+++ b/comm/mail/themes/shared/mail/converterDialog.css
@@ -0,0 +1,57 @@
+/* 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/. */
+
+html {
+ background-color: -moz-Dialog;
+}
+
+body {
+ color: -moz-DialogText;
+ font: message-box;
+ position: relative;
+ min-width: 330px;
+ max-width: 50em;
+}
+
+.convert-area {
+ display: grid;
+ grid-template: "icon text text" auto
+ "icon progress-bar progress-percent" auto
+ "buttons buttons buttons" 1fr / auto 70% 1fr;
+ gap: 10px 15px;
+}
+
+.convert-area[hidden] {
+ display: none;
+}
+
+.infoIcon {
+ width: 48px;
+ height: 48px;
+ grid-area: icon;
+ align-self: start;
+}
+
+p {
+ margin: 0;
+ /* Only one paragraph should be displayed at any given time. */
+ grid-area: text;
+ align-self: start;
+}
+
+.controls {
+ grid-area: buttons;
+ align-self: end;
+ justify-self: end;
+}
+
+#progress {
+ grid-area: progress-bar;
+ align-self: center;
+}
+
+#progressPercent {
+ grid-area: progress-percent;
+ align-self: center;
+}
diff --git a/comm/mail/themes/shared/mail/customizeToolbar.css b/comm/mail/themes/shared/mail/customizeToolbar.css
new file mode 100644
index 0000000000..01f68490ec
--- /dev/null
+++ b/comm/mail/themes/shared/mail/customizeToolbar.css
@@ -0,0 +1,110 @@
+/* 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/. */
+
+#CustomizeToolbarWindow:-moz-lwtheme[lwtheme-image] {
+ background-image: none !important;
+ text-shadow: none;
+}
+
+#main-box {
+ padding: 8px;
+ height: 100%;
+}
+
+#instructions {
+ font-weight: 600;
+ font-size: 1.2em;
+ margin-block: 5px 10px;
+}
+
+#palette-box {
+ overflow: auto;
+ display: block;
+ min-height: 3em;
+ background-color: hsla(0, 0%, 100%, .3);
+ border: 1px solid hsla(0, 0%, 50%, .4);
+}
+
+:root[lwt-tree] #palette-box {
+ scrollbar-color: rgba(204, 204, 204, .5) rgba(230, 230, 235, .5);
+}
+
+:root[lwt-tree-brighttext] #palette-box {
+ scrollbar-color: rgba(249, 249, 250, .4) rgba(20, 20, 25, .3);
+}
+
+#palette-box > toolbarpaletteitem {
+ padding: 8px 2px;
+ margin: 0 8px;
+}
+
+toolbarpaletteitem {
+ -moz-window-dragging: no-drag;
+ justify-content: flex-start;
+}
+
+toolbarpaletteitem[place="palette"] {
+ flex-direction: column;
+ width: 10em;
+ max-width: 10em;
+ /* icon (16) + margin (9 + 12) + 4 lines of text: */
+ height: calc(39px + 4em);
+ margin-bottom: 5px;
+ margin-inline-end: 24px;
+ overflow: visible;
+ display: inline-flex;
+ vertical-align: top;
+}
+
+toolbarpaletteitem[place=palette]::after {
+ content: attr(title);
+ display: block;
+ text-align: center;
+}
+
+toolbarpaletteitem > toolbarbutton,
+toolbarpaletteitem > toolbarseparator,
+toolbarpaletteitem > toolbaritem {
+ /* Prevent children from getting events */
+ pointer-events: none;
+ justify-content: center;
+ flex: 1;
+}
+
+toolbarpaletteitem[type="separator"][place="palette"] {
+ align-items: center;
+}
+
+toolbarpaletteitem[type="separator"][place="palette"] toolbarseparator {
+ background-color: currentColor;
+}
+
+toolbarpaletteitem[type="spacer"][place="palette"] toolbarspacer {
+ flex: 1000 1000;
+}
+
+#main-box > box {
+ overflow: hidden;
+}
+
+/* Hide the toolbarbutton label because we replicate it on the wrapper */
+.toolbarbutton-text {
+ display: none;
+}
+
+toolbarbutton > .toolbarbutton-menubutton-dropmarker {
+ display: none;
+}
+
+#buttonBox {
+ margin-block: 5px;
+}
+
+#titlebarSettings > checkbox {
+ margin-inline: 0 15px;
+}
+
+#modelistLabel {
+ margin-top: 2px;
+}
diff --git a/comm/mail/themes/shared/mail/editorContent.css b/comm/mail/themes/shared/mail/editorContent.css
new file mode 100644
index 0000000000..9b2d6c913f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/editorContent.css
@@ -0,0 +1,108 @@
+/* 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/. */
+
+/* Styles to alter look of things in the Editor content window
+ * for the "Normal Edit Mode" These settings will be removed
+ * when we display in completely WYSIWYG "Edit Preview" mode
+ * Anything that should never change, like cursors, should be
+ * place in EditorOverride.css, instead of here.
+*/
+
+a[name] {
+ min-height: 17px; margin-left: 2px; margin-top: 2px;
+ padding-left: 20px;
+ background-image: url(chrome://messenger/content/messengercompose/images/tag-anchor.gif);
+ background-repeat: no-repeat;
+ background-position: top left;
+}
+
+/* Force border display for empty cells
+ and tables with 0 border
+*/
+table {
+ empty-cells: show;
+}
+
+/* give a red dotted border to tables and cells with no border
+ otherwise they are invisible
+*/
+table[empty-cells],
+ table[border="0"],
+ /* next two selectors on line below for the case where tbody is omitted */
+ table[border="0"] > tr > td, table[border="0"] > tr > th,
+ table[border="0"] > thead > tr > td, table[border="0"] > tbody > tr > td, table[border="0"] > tfoot > tr > td,
+ table[border="0"] > thead > tr > th, table[border="0"] > tbody > tr > th, table[border="0"] > tfoot > tr > th,
+ table:not([border]),
+ /* next two selectors on line below for the case where tbody is omitted */
+ table:not([border]) > tr > td, table:not([border]) > tr > th,
+ table:not([border]) > thead > tr > td, table:not([border]) > tbody > tr > td, table:not([border]) > tfoot > tr > td,
+ table:not([border]) > thead > tr > th, table:not([border]) > tbody > tr > th, table:not([border]) > tfoot > tr > th
+{
+ border: 1px dotted red;
+}
+
+/* give a green dashed border to forms otherwise they are invisible
+*/
+form
+{
+ border: 2px dashed green;
+}
+/* give a green dotted border to labels otherwise they are invisible
+*/
+label
+{
+ border: 1px dotted green;
+}
+
+img {
+ -moz-force-broken-image-icon: 1;
+}
+
+.moz-card.loading {
+ opacity: 0;
+}
+.moz-card {
+ position: relative;
+ opacity: 1;
+ transition: opacity 1.5s;
+}
+
+.moz-card .remove-card {
+ position: absolute;
+ inset-inline-end: 15px;
+ top: 15px;
+ width: 20px;
+ height: 20px;
+ opacity: 0.3;
+ cursor: pointer;
+
+ font-size: 1.4em;
+ line-height: 18px;
+ border: 1px solid #f9f9fa;
+ border-radius: 15px;
+ float: inline-end;
+ font-weight: 600;
+ display: inline-block;
+ transform: rotate(45deg);
+ margin-block: -0.2em 0.2em;
+ margin-inline: 0.2em -0.2em;
+
+ color: #2a2a2e;
+ background-color: white;
+}
+.moz-card .remove-card:hover {
+ opacity: 1;
+}
+
+/* Can be removed when it is in messageQuotes.css enabled again */
+@media (prefers-color-scheme: dark) {
+ body {
+ color: #f9f9fa;
+ background-color: #2a2a2e;
+ }
+
+ span[_moz_quote="true"] {
+ color: #009fff;
+ }
+}
diff --git a/comm/mail/themes/shared/mail/extensionPopup.css b/comm/mail/themes/shared/mail/extensionPopup.css
new file mode 100644
index 0000000000..bf4e615f08
--- /dev/null
+++ b/comm/mail/themes/shared/mail/extensionPopup.css
@@ -0,0 +1,14 @@
+/* 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/. */
+
+.popup-anchor {
+ /* should occupy space but not be visible */
+ opacity: 0;
+ pointer-events: none;
+ position: absolute;
+}
+
+:root[chromehidden~="location"] #header {
+ display: none
+}
diff --git a/comm/mail/themes/shared/mail/feedSubscribe.css b/comm/mail/themes/shared/mail/feedSubscribe.css
new file mode 100644
index 0000000000..a97709be68
--- /dev/null
+++ b/comm/mail/themes/shared/mail/feedSubscribe.css
@@ -0,0 +1,43 @@
+/* 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/. */
+
+#feedSubscriptions {
+ min-width: 60em;
+ min-height: 40em;
+}
+
+#rssSubscriptionsList > treechildren::-moz-tree-image {
+ width: 16px;
+ height: 16px;
+ -moz-context-properties: fill, fill-opacity, stroke;
+ fill: color-mix(in srgb, var(--default) 20%, transparent);
+ stroke: var(--default);
+}
+
+#folderNameCol {
+ flex: 2 2;
+}
+
+#rssFeedInfoBox {
+ border: 1px solid ThreeDShadow;
+ margin: 4px;
+ padding-top: 4px;
+ background-color: rgba(0, 0, 0, 0.05);
+}
+
+:root[lwt-tree] #rssFeedInfoBox {
+ border-color: var(--sidebar-border-color);
+}
+
+:root[lwt-tree-brighttext] #rssFeedInfoBox {
+ background-color: rgba(255, 255, 255, 0.05);
+}
+
+#autotagPrefix {
+ max-width: 15em;
+}
+
+#statusContainerBox {
+ height: 2.4em;
+}
diff --git a/comm/mail/themes/shared/mail/fieldMapImport.css b/comm/mail/themes/shared/mail/fieldMapImport.css
new file mode 100644
index 0000000000..f5653905ef
--- /dev/null
+++ b/comm/mail/themes/shared/mail/fieldMapImport.css
@@ -0,0 +1,23 @@
+/* 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/. */
+
+treecolpicker {
+ display: none;
+}
+
+#checkedHeader {
+ flex: 3 3;
+}
+
+#fieldNameHeader {
+ flex: 7 7;
+}
+
+#sampleDataHeader {
+ flex: 13 13;
+}
+
+richlistitem > hbox > checkbox {
+ margin: 0;
+}
diff --git a/comm/mail/themes/shared/mail/filterDialog.css b/comm/mail/themes/shared/mail/filterDialog.css
new file mode 100644
index 0000000000..e52ace4073
--- /dev/null
+++ b/comm/mail/themes/shared/mail/filterDialog.css
@@ -0,0 +1,139 @@
+/* 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/. */
+
+/* ===== filterDialog.css ===============================================
+ == Styles for the Mail Filters dialog.
+ ======================================================================= */
+
+#filterListDialog:not([lwt-tree]):-moz-lwtheme {
+ background: -moz-Dialog !important;
+ color: -moz-DialogText;
+ text-shadow: none;
+
+ --button-background: rgba(128, 128, 128, .15);
+ --button-background-hover: rgba(128, 128, 128, .25);
+ --button-background-active: rgba(128, 128, 128, .35);
+ --button-border-color: rgba(128, 128, 128, .4);
+ --box-text-color: MenuText;
+ --box-background-color: Menu;
+ --box-border-color: ThreeDShadow;
+ --field-text-color: FieldText;
+ --field-background-color: Field;
+ --field-border-color: rgba(128, 128, 128, .6);
+ --field-border-hover-color: rgba(128, 128, 128, .8);
+ --popup-item-hover: rgba(128, 128, 128, .2);
+ --popup-item-hover-text: MenuText;
+ --popup-item-selected: var(--selected-item-color);
+ --popup-selected-text: var(--selected-item-text-color);
+ --richlist-button-background: -moz-Dialog;
+}
+
+#filterListGrid {
+ min-height: 0;
+}
+
+#filterListBox {
+ min-width: 0;
+ min-height: 0;
+}
+
+#filterList {
+ height: 340px;
+}
+
+#searchBox {
+ max-width: 30ch;
+}
+
+/* ::::: columns :::::: */
+
+treecolpicker {
+ display: none;
+}
+
+richlistitem {
+ padding-block: 1px;
+}
+
+richlistitem > checkbox {
+ width: 100px;
+ min-width: 100px;
+ margin: 0;
+ -moz-user-focus: none;
+}
+
+checkbox:not([label]) .checkbox-label-box {
+ display: none;
+}
+
+.search-value-menulist {
+ flex: 1;
+}
+
+.search-value-input {
+ width: -moz-available;
+}
+
+.search-menulist[unavailable="true"] {
+ opacity: 0.6;
+}
+
+.ruleactionitem {
+ min-width: 20em;
+}
+
+.ruleaction-type {
+ min-width: 15em;
+}
+
+#statusbar {
+ height: 1.8em;
+ padding: 2px 4px;
+}
+
+toolbarbutton[is="toolbarbutton-menu-button"] {
+ appearance: none;
+ min-height: 24px;
+ margin: 4px;
+ color: inherit !important;
+ background-color: var(--button-background-color);
+ border: 1px solid var(--button-border-color);
+ border-radius: var(--button-border-radius);
+}
+
+toolbarbutton[is="toolbarbutton-menu-button"] > toolbarbutton {
+ appearance: none;
+ margin-block: 0;
+ padding-block: 0 !important;
+ font-weight: inherit;
+ background-color: transparent;
+ border-width: 0;
+ border-inline-end: 1px solid var(--button-border-color);
+}
+
+toolbarbutton[is="toolbarbutton-menu-button"]:hover,
+toolbarbutton[is="toolbarbutton-menu-button"] > toolbarbutton:hover {
+ background-color: var(--button-hover-background-color);
+}
+
+toolbarbutton[is="toolbarbutton-menu-button"]:hover:active,
+toolbarbutton[is="toolbarbutton-menu-button"] > toolbarbutton:hover:active {
+ background-color: var(--button-active-background-color);
+}
+
+toolbarbutton[is="toolbarbutton-menu-button"] > dropmarker {
+ appearance: none;
+ list-style-image: var(--icon-nav-down-sm);
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+ display: inline-flex;
+ height: 100%;
+ align-items: center;
+ justify-content: center;
+}
+
+#filterListGrid toolbarbutton *:focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-offset);
+}
diff --git a/comm/mail/themes/shared/mail/filterEditor.css b/comm/mail/themes/shared/mail/filterEditor.css
new file mode 100644
index 0000000000..b65f8aff96
--- /dev/null
+++ b/comm/mail/themes/shared/mail/filterEditor.css
@@ -0,0 +1,27 @@
+/* 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/. */
+
+#filterNameBox {
+ min-height: 30px;
+}
+
+#applyFiltersSettings {
+ min-height: 150px;
+}
+
+#searchTermListBox {
+ flex: 1 1 auto;
+ min-height: 100px;
+ height: 150px;
+}
+
+#searchTermBox {
+ min-height: 0;
+}
+
+#filterActionsBox {
+ flex: 1 1 auto;
+ min-height: 150px;
+ height: 150px;
+}
diff --git a/comm/mail/themes/shared/mail/folderColors.css b/comm/mail/themes/shared/mail/folderColors.css
new file mode 100644
index 0000000000..8e3a5906ee
--- /dev/null
+++ b/comm/mail/themes/shared/mail/folderColors.css
@@ -0,0 +1,37 @@
+/* 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/. */
+
+:root {
+ --folder-color-inbox: var(--color-blue-50);
+ --folder-color-draft: var(--color-purple-50);
+ --folder-color-sent: var(--color-green-60);
+ --folder-color-archive: var(--color-brown-60);
+ --folder-color-spam: var(--color-red-60);
+ --folder-color-trash: var(--color-ink-60);
+ --folder-color-template: var(--color-gray-60);
+ --folder-color-newsletter: var(--color-gray-60);
+ --folder-color-rss: var(--color-orange-60);
+ --folder-color-outbox: var(--color-teal-60);
+ --folder-color-folder: var(--color-yellow-50);
+ --folder-color-folder-filter: var(--color-magenta-60);
+ --folder-color-folder-rss: var(--color-orange-60);
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --folder-color-inbox: var(--color-blue-30);
+ --folder-color-draft: var(--color-purple-30);
+ --folder-color-sent: var(--color-green-30);
+ --folder-color-archive: var(--color-brown-30);
+ --folder-color-spam: var(--color-red-30);
+ --folder-color-trash: var(--color-ink-30);
+ --folder-color-template: var(--color-gray-10);
+ --folder-color-newsletter: var(--color-gray-10);
+ --folder-color-rss: var(--color-orange-30);
+ --folder-color-outbox: var(--color-teal-30);
+ --folder-color-folder: var(--color-yellow-10);
+ --folder-color-folder-filter: var(--color-magenta-30);
+ --folder-color-folder-rss: var(--color-orange-30);
+ }
+}
diff --git a/comm/mail/themes/shared/mail/folderMenus.css b/comm/mail/themes/shared/mail/folderMenus.css
new file mode 100644
index 0000000000..3dcce5510a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/folderMenus.css
@@ -0,0 +1,101 @@
+/* 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/. */
+
+/* ===== folderMenus.css ================================================
+ == Icons for menus which represent mail folder.
+ ======================================================================= */
+
+.folderMenuItem::part(icon),
+.folderMenuItem > .menu-iconic-left > .menu-iconic-icon {
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+/* ::::: Folder icons for menus ::::: */
+
+/* Folders */
+.folderMenuItem {
+ list-style-image: var(--icon-folder);
+}
+
+/* Newsgroup */
+.folderMenuItem[ServerType="nntp"] {
+ list-style-image: var(--icon-newsletter);
+}
+
+/* Feed folder */
+.folderMenuItem[IsFeedFolder="true"] {
+ list-style-image: var(--icon-folder-rss);
+}
+
+/* Special folders */
+
+.folderMenuItem[SpecialFolder="Inbox"] {
+ list-style-image: var(--icon-inbox);
+}
+
+.folderMenuItem[SpecialFolder="Sent"] {
+ list-style-image: var(--icon-sent);
+}
+
+.folderMenuItem[SpecialFolder="Outbox"] {
+ list-style-image: var(--icon-outbox);
+}
+
+.folderMenuItem[SpecialFolder="Drafts"] {
+ list-style-image: var(--icon-draft);
+}
+
+.folderMenuItem[SpecialFolder="Templates"] {
+ list-style-image: var(--icon-template);
+}
+
+.folderMenuItem[SpecialFolder="Junk"] {
+ list-style-image: var(--icon-spam);
+}
+
+.folderMenuItem[SpecialFolder="Trash"] {
+ list-style-image: var(--icon-trash);
+}
+
+.folderMenuItem[SpecialFolder="Archive"] {
+ list-style-image: var(--icon-archive);
+}
+
+.folderMenuItem[SpecialFolder="Virtual"] {
+ list-style-image: var(--icon-folder-filter);
+
+}
+
+/* IMAP/POP server */
+.folderMenuItem[IsServer="true"] {
+ list-style-image: var(--icon-mail);
+}
+
+/* IMAP/POP secure server */
+.folderMenuItem[IsServer="true"][ServerType="imap"][IsSecure="true"],
+.folderMenuItem[IsServer="true"][ServerType="pop3"][IsSecure="true"] {
+ list-style-image: var(--icon-mail-secure);
+}
+
+/* Local server */
+.folderMenuItem[IsServer="true"][ServerType="none"] {
+ list-style-image: var(--icon-folder);
+}
+
+/* News server */
+.folderMenuItem[IsServer="true"][ServerType="nntp"] {
+ list-style-image: var(--icon-globe);
+}
+
+/** Secure news server */
+.folderMenuItem[IsServer="true"][ServerType="nntp"][IsSecure="true"] {
+ list-style-image: var(--icon-globe-secure);
+}
+
+/* Feed server */
+.folderMenuItem[IsServer="true"][ServerType="rss"] {
+ list-style-image: var(--icon-rss);
+}
diff --git a/comm/mail/themes/shared/mail/folderPane.css b/comm/mail/themes/shared/mail/folderPane.css
new file mode 100644
index 0000000000..ba48da9aee
--- /dev/null
+++ b/comm/mail/themes/shared/mail/folderPane.css
@@ -0,0 +1,312 @@
+/* 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/folderColors.css");
+
+:root {
+ --new-focused-folder-color: var(--selected-item-text-color);
+
+ --primary-fill: color-mix(in srgb, var(--primary) 20%, transparent);
+ --primary-stroke: var(--primary);
+}
+
+/* ::::: Tabmail ::::: */
+#folderTree > treechildren::-moz-tree-image {
+ -moz-context-properties: fill, fill-opacity, stroke;
+}
+
+/* ::::: Folder Pane ::::: */
+
+#folderTree > treechildren::-moz-tree-image,
+#accounttree > treechildren::-moz-tree-image {
+ width: 16px;
+ height: 16px;
+}
+
+/* reduce the padding set from messenger.css */
+#folderTree > treechildren::-moz-tree-cell-text {
+ padding-inline-start: 3px;
+}
+
+treechildren::-moz-tree-image(folderNameCol) {
+ list-style-image: var(--folder-pane-folder);
+ margin-inline-end: 2px;
+ fill: color-mix(in srgb, var(--folder-color-folder) 20%, transparent);
+ stroke: var(--folder-color-folder);
+}
+
+treechildren::-moz-tree-twisty {
+ list-style-image: var(--icon-nav-right-sm);
+}
+
+treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty {
+ list-style-image: var(--icon-nav-left-sm);
+}
+
+treechildren::-moz-tree-twisty(open) {
+ list-style-image: var(--icon-nav-down-sm);
+}
+
+/* ..... Inbox ..... */
+treechildren::-moz-tree-image(folderNameCol, specialFolder-Inbox) {
+ list-style-image: var(--folder-pane-inbox);
+ fill: color-mix(in srgb, var(--folder-color-inbox) 20%, transparent);
+ stroke: var(--folder-color-inbox);
+}
+
+/* ..... Sent ..... */
+treechildren::-moz-tree-image(folderNameCol, specialFolder-Sent) {
+ list-style-image: var(--folder-pane-sent);
+ fill: color-mix(in srgb, var(--folder-color-sent) 20%, transparent);
+ stroke: var(--folder-color-sent);
+}
+
+/* ..... Outbox ..... */
+treechildren::-moz-tree-image(folderNameCol, specialFolder-Outbox) {
+ list-style-image: var(--folder-pane-outbox);
+ fill: color-mix(in srgb, var(--folder-color-outbox) 20%, transparent);
+ stroke: var(--folder-color-outbox);
+}
+
+/* ..... Drafts ..... */
+treechildren::-moz-tree-image(folderNameCol, specialFolder-Drafts) {
+ list-style-image: var(--folder-pane-draft);
+ fill: color-mix(in srgb, var(--folder-color-draft) 20%, transparent);
+ stroke: var(--folder-color-draft);
+}
+
+/* ..... Trash ..... */
+treechildren::-moz-tree-image(folderNameCol, specialFolder-Trash) {
+ list-style-image: var(--folder-pane-trash);
+ fill: color-mix(in srgb, var(--folder-color-trash) 20%, transparent);
+ stroke: var(--folder-color-trash);
+}
+
+/* ..... Archives ..... */
+treechildren::-moz-tree-image(folderNameCol, specialFolder-Archive) {
+ list-style-image: var(--folder-pane-archive);
+ fill: color-mix(in srgb, var(--folder-color-archive) 20%, transparent);
+ stroke: var(--folder-color-archive);
+}
+
+/* ..... Templates ..... */
+treechildren::-moz-tree-image(folderNameCol, specialFolder-Templates) {
+ list-style-image: var(--folder-pane-template);
+ fill: color-mix(in srgb, var(--folder-color-template) 20%, transparent);
+ stroke: var(--folder-color-template);
+}
+
+/* ..... Junk ..... */
+treechildren::-moz-tree-image(folderNameCol, specialFolder-Junk) {
+ list-style-image: var(--folder-pane-spam);
+ fill: color-mix(in srgb, var(--folder-color-spam) 20%, transparent);
+ stroke: var(--folder-color-spam);
+}
+
+/* ..... Saved Search Folder ..... */
+treechildren::-moz-tree-image(folderNameCol, specialFolder-Virtual) {
+ list-style-image: var(--folder-pane-folder-filter);
+ fill: color-mix(in srgb, var(--folder-color-folder-filter) 20%, transparent);
+ stroke: var(--folder-color-folder-filter);
+}
+
+/* ..... Newsgroup ..... */
+treechildren::-moz-tree-image(folderNameCol, serverType-nntp) {
+ list-style-image: var(--folder-pane-newsletter);
+ fill: color-mix(in srgb, var(--folder-color-newsletter) 20%, transparent);
+ stroke: var(--folder-color-newsletter);
+}
+
+/* ..... Mail server ..... */
+treechildren::-moz-tree-image(folderNameCol, isServer-true) {
+ list-style-image: var(--folder-pane-mail);
+ fill: var(--primary-fill);
+ stroke: var(--primary-stroke);
+}
+
+/* ..... Feed server/account ..... */
+treechildren::-moz-tree-image(folderNameCol, isServer-true, serverType-rss) {
+ list-style-image: var(--folder-pane-rss);
+ fill: var(--primary-fill);
+ stroke: var(--primary-stroke);
+}
+/* ..... Feed folder ..... */
+treechildren::-moz-tree-image(folderNameCol, isFeedFolder-true) {
+ list-style-image: var(--folder-pane-folder-rss);
+ fill: color-mix(in srgb, var(--folder-color-folder-rss) 20%, transparent);
+ stroke: var(--folder-color-folder-rss);
+}
+/* ..... Feed message or subscription item ..... */
+treechildren::-moz-tree-image(folderNameCol, isFeed-true) {
+ list-style-image: var(--folder-pane-rss);
+ fill: color-mix(in srgb, var(--folder-color-rss) 20%, transparent);
+ stroke: var(--folder-color-rss);
+}
+
+treechildren::-moz-tree-image(folderNameCol, serverIsPaused),
+treechildren::-moz-tree-cell-text(folderNameCol, serverIsPaused),
+treechildren::-moz-tree-image(folderNameCol, isPaused),
+treechildren::-moz-tree-cell-text(folderNameCol, isPaused) {
+ opacity: 0.6;
+}
+
+treechildren::-moz-tree-image(folderNameCol, isBusy) {
+ list-style-image: url("chrome://messenger/skin/icons/waiting.svg");
+}
+
+treechildren::-moz-tree-image(folderNameCol, hasError) {
+ list-style-image: url("chrome://global/skin/icons/warning.svg");
+ fill: #e62117;
+}
+
+/* ..... Local folders ..... */
+treechildren::-moz-tree-image(folderNameCol, isServer-true, serverType-none) {
+ list-style-image: var(--folder-pane-folder);
+ fill: var(--primary-fill);
+ stroke: var(--primary-stroke);
+}
+
+/* ..... Secure mail server ..... */
+treechildren::-moz-tree-image(folderNameCol, isServer-true, serverType-pop3, isSecure-true),
+treechildren::-moz-tree-image(folderNameCol, isServer-true, serverType-imap, isSecure-true) {
+ list-style-image: var(--folder-pane-mail-secure);
+ fill: var(--primary-fill);
+ stroke: var(--primary-stroke);
+}
+
+/* ..... News server ..... */
+treechildren::-moz-tree-image(folderNameCol, isServer-true, serverType-nntp) {
+ list-style-image: var(--folder-pane-globe);
+ fill: var(--primary-fill);
+ stroke: var(--primary-stroke);
+}
+
+treechildren::-moz-tree-image(folderNameCol, isServer-true, serverType-nntp, isSecure-true) {
+ list-style-image: var(--folder-pane-globe-secure);
+ fill: var(--primary-fill);
+ stroke: var(--primary-stroke);
+}
+
+/* ::::: All Servers ::::: */
+
+treechildren::-moz-tree-cell-text(hasUnreadMessages-true),
+treechildren::-moz-tree-cell-text(folderNameCol, isServer-true),
+treechildren::-moz-tree-cell-text(closed, subfoldersHaveUnreadMessages-true),
+treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true),
+treechildren::-moz-tree-cell-text(folderNameCol, specialFolder-Inbox, newMessages-true) {
+ font-weight: bold !important;
+}
+
+treechildren::-moz-tree-image(folderNameCol, newMessages-true),
+treechildren::-moz-tree-image(folderNameCol, isServer-true, biffState-NewMail),
+treechildren::-moz-tree-cell-text(folderNameCol, isServer-true, biffState-NewMail),
+treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true),
+treechildren::-moz-tree-cell-text(folderNameCol, specialFolder-Inbox, newMessages-true) {
+ color: var(--new-folder-color) !important;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+/* Make the new mail indicator better visible on dark themes */
+@media (prefers-color-scheme: dark) {
+ #folderTree:-moz-lwtheme
+ treechildren::-moz-tree-cell-text(hasUnreadMessages-true),
+ #folderTree:-moz-lwtheme
+ treechildren::-moz-tree-cell-text(closed, subfoldersHaveUnreadMessages-true) {
+ --sidebar-text-color: var(--color-white);
+ }
+
+ #folderTree:-moz-lwtheme
+ treechildren::-moz-tree-cell-text(folderNameCol, isServer-true, biffState-NewMail),
+ #folderTree:-moz-lwtheme
+ treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true),
+ #folderTree:-moz-lwtheme
+ treechildren::-moz-tree-cell-text(folderNameCol, specialFolder-Inbox, newMessages-true) {
+ --new-folder-color: var(--color-blue-40);
+ }
+}
+
+treechildren::-moz-tree-image(folderNameCol, newMessages-true),
+treechildren::-moz-tree-image(folderNameCol, isServer-true, biffState-NewMail) {
+ fill: color-mix(in srgb, var(--new-folder-color) 20%, transparent) !important;
+ stroke: var(--new-folder-color) !important;
+}
+
+treechildren::-moz-tree-cell-text(folderNameCol, isServer-true, biffState-NewMail, selected, focus),
+treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true, selected, focus),
+treechildren::-moz-tree-cell-text(folderNameCol, specialFolder-Inbox, newMessages-true, selected, focus) {
+ color: var(--new-focused-folder-color) !important;
+}
+
+treechildren::-moz-tree-image(folderNameCol, selected, focus),
+treechildren::-moz-tree-image(folderNameCol, newMessages-true, selected, focus),
+treechildren::-moz-tree-image(folderNameCol, isServer-true, biffState-NewMail, selected, focus) {
+ opacity: 1 !important;
+ fill: color-mix(in srgb, var(--new-focused-folder-color) 20%, transparent) !important;
+ stroke: var(--new-focused-folder-color) !important;
+}
+
+treechildren::-moz-tree-cell-text(folderNameCol, noSelect-true) {
+ opacity: 0.6;
+ font-style: italic;
+}
+
+treechildren::-moz-tree-cell-text(imapdeleted) {
+ text-decoration: line-through;
+}
+
+@media not (prefers-contrast) {
+ treechildren::-moz-tree-cell-text(imapdeleted) {
+ opacity: 0.6;
+ }
+}
+
+.tree-folder-checkbox {
+ list-style-image: none;
+}
+
+/* ::::: Folder Summary Popup ::::: */
+
+.folderSummary-message-row {
+ /* This max width ends up dictating the overall width of the popup
+ because it controls how large the preview, subject and sender text can be
+ before cropping kicks in */
+ max-width: 450px;
+}
+
+.folderSummary-subject {
+ font-weight: bold;
+}
+
+.folderSummary-previewText {
+ opacity: 0.6;
+}
+
+#folderTree treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true) {
+ margin-inline-start: -20px;
+ padding-inline-start: 23px;
+ background-image: var(--icon-new-indicator);
+ background-repeat: no-repeat;
+ background-position: left;
+}
+
+#folderTree:-moz-locale-dir(rtl)
+ treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true) {
+ background-position: right;
+}
+
+/* UI Density customization */
+
+:root[uidensity="touch"] #folderTree
+ treechildren::-moz-tree-cell-text(folderNameCol, newMessages-true) {
+ margin-inline-start: -24px;
+ padding-inline-start: 29px;
+ margin-block-start: -6px;
+ padding-block-start: 6px;
+}
+
+:root[uidensity="touch"] #folderTree > treechildren::-moz-tree-image {
+ width: 20px;
+ height: 20px;
+}
diff --git a/comm/mail/themes/shared/mail/folderProps.css b/comm/mail/themes/shared/mail/folderProps.css
new file mode 100644
index 0000000000..d6d03d8e3c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/folderProps.css
@@ -0,0 +1,41 @@
+/* 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/. */
+
+html {
+ min-height: 370px;
+ min-width: 750px;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+}
+
+description {
+ max-width: 80vw;
+}
+
+#nameBox {
+ display: grid;
+ grid-template-columns: auto 1fr;
+}
+
+#quotaDetails {
+ padding-inline-start: 6px;
+ list-style: none;
+}
+
+#quotaDetails > li {
+ margin-block-end: 4px;
+}
+
+progress.quota-percentage {
+ appearance: none;
+ height: 10px;
+ background-color: hsla(0, 0%, 60%, 0.2);
+ border: 1px solid var(--chrome-content-separator-color);
+ border-radius: 3px;
+ overflow: hidden;
+ margin-inline: 1em;
+}
diff --git a/comm/mail/themes/shared/mail/glodaFacetView.css b/comm/mail/themes/shared/mail/glodaFacetView.css
new file mode 100644
index 0000000000..2707545185
--- /dev/null
+++ b/comm/mail/themes/shared/mail/glodaFacetView.css
@@ -0,0 +1,723 @@
+/* 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/messenger.css");
+@import url("chrome://messenger/skin/colors.css");
+@import url("chrome://messenger/skin/layout.css");
+@import url("chrome://messenger/skin/widgets.css");
+
+html,
+body {
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ height: 100%;
+ overflow-y: auto;
+}
+
+#body {
+ --dateColor: var(--color-gray-20);
+ --dateTextColor: var(--color-gray-90);
+ --barColor: var(--selected-item-color);
+ --barHlColor: var(--linkColor);
+ --dateHLColor: var(--selected-item-color);
+ --panelHoverColor: inherit;
+ --linkColor: var(--color-blue-70);
+}
+
+@media (prefers-color-scheme: dark) {
+ #body {
+ --dateColor: var(--color-gray-60);
+ --dateTextColor: var(--color-white);
+ --linkColor: var(--color-blue-30);
+ }
+}
+
+@media (prefers-contrast) {
+ #body {
+ --panelHoverColor: SelectedItemText;
+ --linkColor: -moz-NativehyperlinkText;
+ }
+}
+
+#gloda-facet-view {
+ display: flex;
+ background-color: var(--layout-background-0);
+ color: var(--layout-color-0);
+ align-items: stretch;
+}
+
+.facets-sidebar {
+ width: 20em;
+ max-width: 20em;
+ padding: 4px;
+ padding-inline-start: 1em;
+ background-color: var(--layout-background-1);
+ color: var(--layout-color-1);
+}
+
+#main-column {
+ flex: 1;
+ padding-inline-start: 1em;
+ min-height: 100vh;
+}
+
+#header {
+ max-width: 60em;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 2em;
+}
+
+#data-column {
+ margin-top: 1em;
+ margin-inline-end: 1em;
+ max-width: 60em;
+ display: flex;
+ flex-direction: column;
+}
+
+.popup-menu {
+ position: absolute;
+ display: block;
+ z-index: 100;
+ overflow: hidden;
+ padding: 3px;
+ border: 1px solid var(--arrowpanel-border-color);
+ border-radius: 8px;
+ background-color: var(--arrowpanel-background);
+ box-shadow: 0 0 4px hsla(210, 4%, 10%, .2);
+}
+
+.popup-menuitem {
+ font: menu;
+ padding: 4px 10px;
+ border-radius: 3px;
+}
+
+.popup-menuitem:hover,
+.popup-menuitem:focus {
+ background-color: var(--arrowpanel-dimmed);
+ color: var(--panelHoverColor);
+}
+
+.popup-menu[variety="remainder"] .undo {
+ display: none;
+}
+.popup-menu[variety="include"] .top {
+ display: none;
+}
+.popup-menu[variety="include"] .bottom {
+ display: none;
+}
+.popup-menu[variety="exclude"] .top {
+ display: none;
+}
+.popup-menu[variety="exclude"] .bottom {
+ display: none;
+}
+
+.popup-menuitem:focus {
+ cursor: pointer;
+}
+
+.popup-menu[variety="invisible"] {
+ display: none;
+}
+
+/* ===== Query Explanation ===== */
+
+#query-explanation {
+ padding-inline-start: 0;
+ font-size: small;
+}
+
+.explanation-fulltext-label,
+.explanation-query-label {
+ font-size: medium;
+ font-weight: bold;
+}
+
+.explanation-fulltext-label,
+.explanation-fulltext-term {
+ margin: 0 0.1em;
+}
+
+.explanation-fulltext-criteria {
+ color: var(--layout-color-3);
+ margin: 0 0.1em;
+}
+
+.explanation-query-label,
+.explanation-query-involves,
+.explanation-query-tagged {
+ margin-inline-end: 0.5ex;
+}
+
+/* ===== Facets ===== */
+
+h1, h2, h3 {
+ cursor: default;
+}
+
+.facetious[uninitialized] {
+ display: none !important;
+}
+
+.facetious {
+ display: list-item; /* take the whole column width */
+ list-style: none;
+ padding: 2px;
+}
+
+.facet-included-header[state="empty"],
+.facet-excluded-header[state="empty"],
+.facet-remaindered-header[needed="false"] {
+ display: none;
+}
+
+.facet-included-header[state="empty"] + .facet-included,
+.facet-excluded-header[state="empty"] + .facet-excluded,
+.facet-remaindered:empty {
+ display: none;
+}
+
+.facet-excluded > .bar > .bar-link {
+ text-decoration: line-through; /* strike the names of excluded facets */
+}
+
+.date-wrapper {
+ position: relative;
+ height: 80px;
+ display: block;
+ padding: 0;
+ padding-top: 0.5em;
+ margin-inline-end: 1em;
+ padding-inline-start: 2em;
+ padding-bottom: 1em;
+}
+
+.gloda-timeline-button {
+ margin-inline-start: 8px;
+}
+
+.gloda-timeline-button > img {
+ /* Icon is squashed. */
+ width: 14px;
+ height: 10px;
+ margin-inline-end: 2px;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+.gloda-timeline-button[checked="true"] {
+ background: var(--toolbarbutton-active-background);
+ border-color: var(--toolbarbutton-active-bordercolor);
+ box-shadow: var(--toolbarbutton-active-boxshadow);
+}
+
+.facet-date-zoom-out {
+ position: absolute;
+ top: -18px;
+ left: 0;
+ width: 24px !important;
+ height: 24px !important;
+ background-position: center center;
+ background-repeat: no-repeat;
+ border: 1px solid transparent;
+ border-radius: var(--button-border-radius);
+}
+
+html[dir="rtl"] .facet-date-zoom-out {
+ left: auto;
+ right: 0;
+}
+
+.facetious[type="date"][zoomedout="false"] .facet-date-zoom-out {
+ background-image: url("chrome://messenger/skin/icons/zoomout.svg");
+ cursor: pointer;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+.facetious[type="date"][zoomedout="false"] .facet-date-zoom-out:hover {
+ fill: var(--selected-item-text-color);
+ background-color: var(--selected-item-color);
+ border-color: Field;
+}
+
+.date-vis-frame {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+html[dir="rtl"] .date-vis-frame {
+ left: auto;
+ right: 0;
+}
+
+/* === Boolean Facet === */
+
+#facet-fromMe, #facet-toMe, #facet-star, #facet-attachmentTypes {
+ display: inline-block; /* override the general .facetious list-item style */
+}
+
+/* special case: hide these two facets when they don't match */
+#facet-star[disabled], #facet-attachmentTypes[disabled] {
+ display: none;
+}
+
+.facet-checkbox-bubble {
+ display: inline-flex;
+ padding: 2px;
+ padding-inline-end: 6px;
+ border-radius: var(--button-border-radius);
+ cursor: pointer;
+}
+
+.facet-checkbox-bubble > input {
+ display: none;
+}
+
+facet-boolean[disabled] {
+ opacity: 0.6;
+}
+
+facet-boolean[disabled] > .facet-checkbox-bubble,
+facet-boolean-filtered[disabled] > .facet-checkbox-bubble {
+ cursor: default;
+}
+
+facet-boolean:not([disabled]):hover > .facet-checkbox-bubble,
+facet-boolean-filtered:not([disabled]):hover > .facet-checkbox-bubble,
+facet-boolean[checked="true"]:not([disabled]) > .facet-checkbox-bubble,
+facet-boolean-filtered[checked="true"]:not([disabled]) > .facet-checkbox-bubble {
+ background-color: var(--selected-item-color);
+ color: var(--selected-item-text-color);
+}
+
+.facet-checkbox-label,
+.facet-checkbox-count {
+ margin: 3px;
+}
+
+.facetious:not(:hover) > .facet-checkbox-count {
+ color: var(--layout-color-3);
+}
+.facet-checkbox-count:empty {
+ display: none;
+}
+.facet-checkbox-count::before {
+ content: "(";
+}
+.facet-checkbox-count::after {
+ content: ")";
+}
+
+/* === Boolean Filtered === */
+
+facet-boolean-filtered:not([checked]) > .facet-filter-list {
+ display: none
+}
+
+.facet-filter-list {
+ display: block;
+}
+
+/* === Discrete Facet === */
+
+.facet-content {
+ max-height: 32em;
+ overflow: auto;
+}
+
+.facet-more {
+ display: none;
+ margin: 1px;
+ margin-top: 0.5em;
+ cursor: pointer;
+}
+
+.facet-more[needed="true"] {
+ display: inline-block;
+}
+
+html[dir="rtl"] .bar-count {
+ right: auto;
+ left: 3px;
+}
+
+.barry {
+ margin: 0;
+ padding: 0;
+ border-top: 1px solid var(--layout-color-3);
+}
+
+.bar {
+ position: relative;
+ cursor: pointer;
+ border-bottom: 1px solid var(--layout-color-3);
+}
+
+.bar[selected="true"] {
+ background-color: var(--selected-item-color);
+ color: var(--selected-item-text-color);
+}
+
+.bar:hover,
+.bar:focus {
+ background-color: var(--selected-item-color);
+ outline: none;
+}
+
+.bar-link {
+ text-decoration: none;
+ display: block;
+ color: var(--linkColor);
+ padding-top: 0.3em;
+ padding-bottom: 0.3em;
+ padding-inline-start: 0.5em;
+ padding-inline-end: 4em;
+ position: relative;
+ z-index: 2;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.bar-count {
+ position: absolute;
+ display: block;
+ right: 0;
+ margin-inline-end: 8px;
+ line-height: 1.6em;
+ color: var(--layout-color-3);
+}
+
+html[dir="rtl"] .bar-link {
+ padding: 0.3em 0.5em 0.3em 2em;
+}
+
+.bar:hover > .bar-link,
+.bar:hover > .bar-count,
+.bar:focus > .bar-link,
+.bar:focus > .bar-count {
+ color: var(--selected-item-text-color);
+}
+
+.bar[selected="true"]> .bar-link {
+ color: var(--selected-item-text-color);
+}
+.bar[selected="true"] > .bar-count {
+ color: var(--selected-item-text-color);
+}
+
+/* ===== Results ===== */
+
+.results-message-header {
+ display: none; /* $('.results-message-header').show() is run if there are results */
+ border-bottom: 2px solid hsla(0, 0%, 60%, 0.25);
+ padding: 4px 2px;
+ padding-inline-end: 0;
+ margin-bottom: 0.5em;
+}
+
+#results[state="some"] .results-message-header {
+ display: flex;
+ align-items: center;
+}
+
+.results-message-count {
+ font-weight: 600;
+ font-size: 1rem;
+ margin: 0;
+}
+
+.results-message-showall-button {
+ appearance: none !important;
+ color: var(--linkColor);
+ cursor: pointer;
+ padding: 4px;
+ border-radius: var(--button-border-radius);
+ padding-inline-end: 20px;
+ margin-inline-end: 2px;
+ -moz-context-properties: fill;
+ fill: currentColor;
+ background-image: url("chrome://messenger/skin/icons/new-window.svg");
+ background-position: right 4px center;
+ background-size: 11px;
+ background-repeat: no-repeat;
+}
+
+.results-message-showall-button:hover,
+.results-message-showall-button:focus {
+ background-color: var(--selected-item-color);
+ color: var(--selected-item-text-color);
+}
+
+.results-message-sort-bar {
+ flex: 1;
+ display: flex;
+ justify-content: end;
+}
+
+#sortby {
+ appearance: none;
+ min-height: 24px;
+ color: inherit;
+ margin: 1px 5px;
+ padding-block: 0;
+ padding-inline: 4px 20px;
+ border: 1px solid var(--button-border-color);
+ border-radius: var(--button-border-radius);
+ background-color: var(--button-background-color);
+ background-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+ background-position: right 4px center;
+ background-repeat: no-repeat;
+ background-size: auto 12px;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+#sortby:dir(rtl) {
+ background-position-x: left 4px;
+}
+
+#sortby:hover,
+#sortby:focus {
+ background-color: var(--button-hover-background-color);
+ cursor: pointer;
+}
+
+/* ===== Messages ===== */
+
+.message {
+ display: block;
+ font-family: sans-serif;
+ font-size: small;
+ padding: 3px 5px;
+ border: 1px solid transparent;
+ border-bottom-color: lightgrey;
+ border-radius: var(--button-border-radius);
+ color: var(--layout-color-1);
+ overflow: hidden;
+}
+.message:not(:first-child) {
+ border-top-style: none;
+}
+.message:last-child {
+ border-bottom-color: transparent;
+}
+
+.message:hover {
+ border-color: lightgrey;
+ box-shadow: 0 0 1px lightgrey inset, 0 0 1px lightgrey inset, 0 0 1px lightgrey inset;
+}
+
+.message:hover .message-subject {
+ color: var(--selected-item-color);
+}
+
+.message .message-subject:hover,
+.message .message-subject:focus {
+ background-color: var(--selected-item-color);
+ color: var(--selected-item-text-color);
+}
+
+.message:focus,
+.message[unread="true"]:focus {
+ border: 1px dotted lightgrey;
+ padding: 1em 0;
+}
+
+.message-header {
+ margin-bottom: 0.5em;
+}
+.message-meta {
+ float: inline-end;
+ padding-inline-start: 2em;
+ text-align: end;
+ max-width: 20em;
+ max-height: 10em;
+ overflow: hidden;
+ color: var(--layout-color-3);
+}
+
+.message-attachments {
+ text-align: end;
+ overflow: hidden;
+}
+
+.message-attachment {
+ max-width: 20em;
+ text-align: start;
+ display: inline-block;
+ white-space: nowrap;
+ padding-inline-start: 1ex;
+}
+
+.message-attachment::after {
+ content: ", ";
+}
+.message-attachment:last-child::after {
+ content: "";
+}
+
+.message-attachment-icon {
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ background: url("chrome://messenger/skin/icons/attach.svg") transparent no-repeat center right;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+html[dir="rtl"] .message-attachment-icon {
+ background-position: center left;
+}
+
+.message-line {
+ position: relative;
+}
+
+.message-addresses-group {
+ text-align: end;
+}
+
+.message-star[starred="true"] {
+ display: inline-block;
+ width: 12px !important;
+ height: 12px;
+ background-image: url("chrome://messenger/skin/icons/flagged.svg");
+ background-size: contain;
+ -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
+ fill: #f4bc44;
+ fill-opacity: 1;
+ stroke: #f4bc44;
+ stroke-opacity: 1;
+}
+
+.message-addresses-group {
+ padding-inline-start: 1em;
+}
+
+.message-subject-group {
+ padding-inline-start: 2px; /* to line up the subjects with the "Top N messages out of M" */
+}
+
+.message-author, .message-recipients {
+ text-align: end;
+ display: inline;
+ color: var(--layout-color-1);
+}
+
+.message-subject {
+ color: var(--linkColor);
+ font-size: medium;
+}
+
+.message-subject:hover {
+ cursor: pointer;
+}
+
+.message-body {
+ color: var(--layout-color-1);
+ margin-inline-start: 1em;
+ font-family: monospace;
+ font-size: medium;
+ white-space: pre-wrap;
+}
+
+.message-body-fulltext-match {
+ color: var(--selected-item-text-color);
+ background-color: var(--selected-item-color);
+ border-radius: var(--button-border-radius);
+}
+
+.message-recipients-group {
+ margin-inline-start: 0.5em;
+ font-size: small;
+}
+
+.message-tag {
+ display: inline-block; /* to avoid splitting 'To' and 'Do' e.g. */
+ margin-inline-start: 3px;
+ padding: 0 0.5ex;
+ border-radius: 3px;
+ border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
+}
+
+.show-more {
+ display: none; /* $('.show-more').show() is run if there are results */
+ float: inline-end;
+ margin-block: 5px 2em;
+ margin-inline-end: 1em;
+ cursor: pointer;
+ align-self: flex-end;
+}
+
+div.loading,
+div.empty {
+ margin: 0 auto;
+ text-align: center;
+}
+
+span.loading,
+span.empty {
+ color: var(--layout-color-2);
+ background-color: var(--layout-background-2);
+ border: 1px outset var(--layout-border-2);
+ border-radius: var(--button-border-radius);
+}
+
+img.loading,
+img.empty {
+ margin: 0 1ex;
+ padding: 0;
+ border: none;
+ vertical-align: middle;
+}
+
+html[dir="rtl"] img.empty {
+ transform: scaleX(-1);
+}
+
+div.empty {
+ display: none;
+}
+
+span.empty {
+ background-color: inherit;
+ border: none;
+ font-size: large;
+ color: var(--color-blue-70);
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+#facet-date {
+ max-height: 104px;
+ padding-top: 2px;
+ padding-bottom: 2px;
+ overflow: visible;
+ /* Put facet-date at the top */
+ order: -1;
+}
+
+#facet-date[hide="true"] {
+ max-height: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ #facet-date,
+ .results-message-showall-button {
+ transition: all 200ms ease;
+ }
+}
diff --git a/comm/mail/themes/shared/mail/glodacomplete.css b/comm/mail/themes/shared/mail/glodacomplete.css
new file mode 100644
index 0000000000..bfbe7fb610
--- /dev/null
+++ b/comm/mail/themes/shared/mail/glodacomplete.css
@@ -0,0 +1,51 @@
+/* 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/. */
+
+#PopupGlodaAutocomplete .explanation, .gloda-single-identity {
+ margin-inline-start: 1em;
+ margin-top: 2px;
+ margin-bottom: 2px;
+}
+
+#PopupGlodaAutocomplete .autocomplete-richlistbox {
+ display: flex;
+ justify-content: flex-start;
+ flex-direction: column;
+}
+
+#PopupGlodaAutocomplete .ac-comment {
+ font-size: 1.1em;
+ margin-inline-start: 0;
+}
+
+#PopupGlodaAutocomplete .ac-url-text {
+ color: -moz-nativehyperlinktext;
+ font-size: 0.95em;
+}
+
+#PopupGlodaAutocomplete span.ac-emphasize-text {
+ font-weight: bold;
+}
+
+#PopupGlodaAutocomplete .ac-url-text[selected="true"] {
+ color: inherit !important;
+}
+
+#PopupGlodaAutocomplete .gloda-single-identity[selected="true"] .ac-url{
+ color: white;
+}
+
+#PopupGlodaAutocomplete .parameters {
+ font-style: italic;
+ margin-inline-start: 1em;
+}
+
+/**
+ * Match type gloda-single-tag-richlistitem, gloda-single-identity-richlistitem,
+ * gloda-fulltext-single-richlistitem, gloda-fulltext-all, gloda-contact-chunk-richlistitem
+ * and gloda-multi.
+ */
+#PopupGlodaAutocomplete .autocomplete-richlistitem[type^="gloda"] {
+ overflow: clip;
+}
diff --git a/comm/mail/themes/shared/mail/grid-layout.css b/comm/mail/themes/shared/mail/grid-layout.css
new file mode 100644
index 0000000000..a83e831d34
--- /dev/null
+++ b/comm/mail/themes/shared/mail/grid-layout.css
@@ -0,0 +1,84 @@
+/* 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/. */
+
+.grid-two-column {
+ display: inline-grid;
+ grid-template-columns: auto auto;
+}
+
+.grid-three-column {
+ display: inline-grid;
+ grid-template-columns: auto auto auto;
+}
+
+.grid-two-column-fr {
+ display: inline-grid;
+}
+
+.grid-block-two-column-fr {
+ display: block grid;
+}
+
+.grid-two-column-fr, .grid-block-two-column-fr {
+ grid-template-columns: auto 1fr;
+}
+
+.grid-two-column-equalsize {
+ display: inline-grid;
+ min-width: max-content;
+ grid-template-columns: 1fr 1fr;
+}
+
+.grid-two-column-auto-min {
+ display: inline-grid;
+ grid-template-columns: auto min-content;
+}
+
+.grid-three-column-auto-x-auto {
+ display: inline-grid;
+ grid-template-columns: auto 1fr auto;
+}
+
+.grid-two-column-x-auto {
+ display: inline-grid;
+ grid-template-columns: 1fr auto;
+ grid-template-rows: 1fr auto auto;
+}
+
+.grid-two-column menulist,
+.grid-two-column textarea,
+.grid-three-column menulist,
+.grid-three-column textarea {
+ width: 100%;
+}
+
+.grid-items-baseline {
+ align-items: baseline;
+}
+
+.grid-items-center {
+ align-items: center;
+}
+
+.flex-items-center {
+ display: flex;
+ align-items: center;
+}
+
+.flex-content-center {
+ justify-content: center;
+}
+
+.flex-content-column {
+ display: flex;
+ flex-direction: column;
+}
+
+.grid-item-span-row {
+ grid-column: 1 / -1;
+}
+
+.grid-item-col2 {
+ grid-column: 2 / 2;
+}
diff --git a/comm/mail/themes/shared/mail/icons.css b/comm/mail/themes/shared/mail/icons.css
new file mode 100644
index 0000000000..5af3ea1388
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons.css
@@ -0,0 +1,304 @@
+/* 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/. */
+
+/* Density variations */
+
+:root {
+ --icon-account-settings: url("chrome://messenger/skin/icons/new/compact/account-settings.svg");
+ --icon-add: url("chrome://messenger/skin/icons/new/compact/add.svg");
+ --icon-address-book: url("chrome://messenger/skin/icons/new/compact/address-book.svg");
+ --icon-app-menu: url("chrome://messenger/skin/icons/new/compact/app-menu.svg");
+ --icon-app-menu-badged: url("chrome://messenger/skin/icons/new/compact/app-menu-badged.svg");
+ --icon-archive: url("chrome://messenger/skin/icons/new/compact/archive.svg");
+ --icon-attachment: url("chrome://messenger/skin/icons/new/compact/attachment.svg");
+ --icon-calendar-invite: url("chrome://messenger/skin/icons/new/compact/calendar-invite.svg");
+ --icon-calendar-today: url("chrome://messenger/skin/icons/new/compact/calendar-today.svg");
+ --icon-calendar: url("chrome://messenger/skin/icons/new/compact/calendar.svg");
+ --icon-chat: url("chrome://messenger/skin/icons/new/compact/chat.svg");
+ --icon-check: url("chrome://messenger/skin/icons/new/compact/check.svg");
+ --icon-checkbox: url("chrome://messenger/skin/icons/new/compact/checkbox.svg");
+ --icon-clock: url("chrome://messenger/skin/icons/new/compact/clock.svg");
+ --icon-close: url("chrome://messenger/skin/icons/new/compact/close.svg");
+ --icon-cloud-download: url("chrome://messenger/skin/icons/new/compact/cloud-download.svg");
+ --icon-collapse: url("chrome://messenger/skin/icons/new/compact/collapse.svg");
+ --icon-compress: url("chrome://messenger/skin/icons/new/compact/compress.svg");
+ --icon-contact: url("chrome://messenger/skin/icons/new/compact/contact.svg");
+ --icon-conversation: url("chrome://messenger/skin/icons/new/compact/conversation.svg");
+ --icon-copy: url("chrome://messenger/skin/icons/new/compact/copy.svg");
+ --icon-cut: url("chrome://messenger/skin/icons/new/compact/cut.svg");
+ --icon-density-compact: url("chrome://messenger/skin/icons/new/compact/density-compact.svg");
+ --icon-density-default: url("chrome://messenger/skin/icons/new/compact/density-default.svg");
+ --icon-density-relaxed: url("chrome://messenger/skin/icons/new/compact/density-relaxed.svg");
+ --icon-display-options: url("chrome://messenger/skin/icons/new/compact/display-options.svg");
+ --icon-download: url("chrome://messenger/skin/icons/new/compact/download.svg");
+ --icon-draft: url("chrome://messenger/skin/icons/new/compact/draft.svg");
+ --icon-error-circle: url("chrome://messenger/skin/icons/new/compact/error-circle.svg");
+ --icon-export: url("chrome://messenger/skin/icons/new/compact/export.svg");
+ --icon-extension: url("chrome://messenger/skin/icons/new/compact/extension.svg");
+ --icon-event-status: url("chrome://messenger/skin/icons/new/compact/event-status.svg");
+ --icon-eye: url("chrome://messenger/skin/icons/new/compact/eye.svg");
+ --icon-features: url("chrome://messenger/skin/icons/new/compact/features.svg");
+ --icon-file: url("chrome://messenger/skin/icons/new/compact/file.svg");
+ --icon-filter: url("chrome://messenger/skin/icons/new/compact/filter.svg");
+ --icon-fingerprint: url("chrome://messenger/skin/icons/new/compact/fingerprint.svg");
+ --icon-flexible-space: url("chrome://messenger/skin/icons/new/compact/flexible-space.svg");
+ --icon-folder-filter: url("chrome://messenger/skin/icons/new/compact/folder-filter.svg");
+ --icon-folder-rss: url("chrome://messenger/skin/icons/new/compact/folder-rss.svg");
+ --icon-folder-save: url("chrome://messenger/skin/icons/new/compact/folder-save.svg");
+ --icon-folder: url("chrome://messenger/skin/icons/new/compact/folder.svg");
+ --icon-font: url("chrome://messenger/skin/icons/new/compact/font.svg");
+ --icon-forward: url("chrome://messenger/skin/icons/new/compact/forward.svg");
+ --icon-get-mail: url("chrome://messenger/skin/icons/new/compact/get-mail.svg");
+ --icon-globe-secure: url("chrome://messenger/skin/icons/new/compact/globe-secure.svg");
+ --icon-globe: url("chrome://messenger/skin/icons/new/compact/globe.svg");
+ --icon-handshake: url("chrome://messenger/skin/icons/new/compact/handshake.svg");
+ --icon-heart: url("chrome://messenger/skin/icons/new/compact/heart.svg");
+ --icon-hidden: url("chrome://messenger/skin/icons/new/compact/hidden.svg");
+ --icon-id: url("chrome://messenger/skin/icons/new/compact/id.svg");
+ --icon-import: url("chrome://messenger/skin/icons/new/compact/import.svg");
+ --icon-inbox: url("chrome://messenger/skin/icons/new/compact/inbox.svg");
+ --icon-info: url("chrome://messenger/skin/icons/new/compact/info.svg");
+ --icon-kebab: url("chrome://messenger/skin/icons/new/compact/kebab.svg");
+ --icon-key: url("chrome://messenger/skin/icons/new/compact/key.svg");
+ --icon-layout: url("chrome://messenger/skin/icons/new/compact/layout.svg");
+ --icon-link: url("chrome://messenger/skin/icons/new/compact/link.svg");
+ --icon-lock: url("chrome://messenger/skin/icons/new/compact/lock.svg");
+ --icon-lock-disabled: url("chrome://messenger/skin/icons/new/compact/lock-disabled.svg");
+ --icon-mail-secure: url("chrome://messenger/skin/icons/new/compact/mail-secure.svg");
+ --icon-mail: url("chrome://messenger/skin/icons/new/compact/mail.svg");
+ --icon-more: url("chrome://messenger/skin/icons/new/compact/more.svg");
+ --icon-nav-back: url("chrome://messenger/skin/icons/new/compact/nav-back.svg");
+ --icon-nav-down-unread: url("chrome://messenger/skin/icons/new/compact/nav-down-unread.svg");
+ --icon-nav-down: url("chrome://messenger/skin/icons/new/compact/nav-down.svg");
+ --icon-nav-forward: url("chrome://messenger/skin/icons/new/compact/nav-forward.svg");
+ --icon-nav-left: url("chrome://messenger/skin/icons/new/compact/nav-left.svg");
+ --icon-nav-right: url("chrome://messenger/skin/icons/new/compact/nav-right.svg");
+ --icon-nav-up-unread: url("chrome://messenger/skin/icons/new/compact/nav-up-unread.svg");
+ --icon-nav-up: url("chrome://messenger/skin/icons/new/compact/nav-up.svg");
+ --icon-new-address-book: url("chrome://messenger/skin/icons/new/compact/new-address-book.svg");
+ --icon-new-chat: url("chrome://messenger/skin/icons/new/compact/new-chat.svg");
+ --icon-new-contact: url("chrome://messenger/skin/icons/new/compact/new-contact.svg");
+ --icon-new-event: url("chrome://messenger/skin/icons/new/compact/new-event.svg");
+ --icon-new-key: url("chrome://messenger/skin/icons/new/compact/new-key.svg");
+ --icon-new-mail: url("chrome://messenger/skin/icons/new/compact/new-mail.svg");
+ --icon-new-task: url("chrome://messenger/skin/icons/new/compact/new-task.svg");
+ --icon-new-user-list: url("chrome://messenger/skin/icons/new/compact/new-user-list.svg");
+ --icon-newsletter: url("chrome://messenger/skin/icons/new/compact/newsletter.svg");
+ --icon-notification-sm: url("chrome://messenger/skin/icons/notification-fill-12.svg");
+ --icon-offline: url("chrome://messenger/skin/icons/new/compact/offline.svg");
+ --icon-online: url("chrome://messenger/skin/icons/new/compact/online.svg");
+ --icon-outbox: url("chrome://messenger/skin/icons/new/compact/outbox.svg");
+ --icon-overflow: url("chrome://messenger/skin/icons/new/compact/overflow.svg");
+ --icon-paint-brush: url("chrome://messenger/skin/icons/new/compact/paint-brush.svg");
+ --icon-paste: url("chrome://messenger/skin/icons/new/compact/paste.svg");
+ --icon-pencil: url("chrome://messenger/skin/icons/new/compact/pencil.svg");
+ --icon-photo-ban: url("chrome://messenger/skin/icons/new/compact/photo-ban.svg");
+ --icon-pin: url("chrome://messenger/skin/icons/new/compact/pin.svg");
+ --icon-print: url("chrome://messenger/skin/icons/new/compact/print.svg");
+ --icon-priority: url("chrome://messenger/skin/icons/new/compact/priority.svg");
+ --icon-priority-low: url("chrome://messenger/skin/icons/new/compact/low-priority.svg");
+ --icon-question: url("chrome://messenger/skin/icons/new/compact/question.svg");
+ --icon-quit: url("chrome://messenger/skin/icons/new/compact/quit.svg");
+ --icon-quote: url("chrome://messenger/skin/icons/new/compact/quote.svg");
+ --icon-receipt: url("chrome://messenger/skin/icons/new/compact/receipt.svg");
+ --icon-redirect: url("chrome://messenger/skin/icons/new/compact/redirect.svg");
+ --icon-remove: url("chrome://messenger/skin/icons/new/compact/remove.svg");
+ --icon-reply-all: url("chrome://messenger/skin/icons/new/compact/reply-all.svg");
+ --icon-reply-list: url("chrome://messenger/skin/icons/new/compact/reply-list.svg");
+ --icon-reply: url("chrome://messenger/skin/icons/new/compact/reply.svg");
+ --icon-restore: url("chrome://messenger/skin/icons/new/compact/restore.svg");
+ --icon-ribbon: url("chrome://messenger/skin/icons/new/compact/ribbon.svg");
+ --icon-rss: url("chrome://messenger/skin/icons/new/compact/rss.svg");
+ --icon-search: url("chrome://messenger/skin/icons/new/compact/search.svg");
+ --icon-sent: url("chrome://messenger/skin/icons/new/compact/sent.svg");
+ --icon-settings: url("chrome://messenger/skin/icons/new/compact/settings.svg");
+ --icon-shield: url("chrome://messenger/skin/icons/new/compact/shield.svg");
+ --icon-shortcut: url("chrome://messenger/skin/icons/new/compact/shortcut.svg");
+ --icon-sort: url("chrome://messenger/skin/icons/new/compact/sort.svg");
+ --icon-spaces-menu: url("chrome://messenger/skin/icons/new/compact/spaces-menu.svg");
+ --icon-spam: url("chrome://messenger/skin/icons/new/compact/spam.svg");
+ --icon-spelling: url("chrome://messenger/skin/icons/new/compact/spelling.svg");
+ --icon-star: url("chrome://messenger/skin/icons/new/compact/star.svg");
+ --icon-subtract-circle-sm: url("chrome://messenger/skin/icons/new/subtract-circle-sm.svg");
+ --icon-sync: url("chrome://messenger/skin/icons/new/compact/sync.svg");
+ --icon-tag: url("chrome://messenger/skin/icons/new/compact/tag.svg");
+ --icon-tasks: url("chrome://messenger/skin/icons/new/compact/tasks.svg");
+ --icon-template: url("chrome://messenger/skin/icons/new/compact/template.svg");
+ --icon-tentative: url("chrome://messenger/skin/icons/new/compact/tentative.svg");
+ --icon-thread: url("chrome://messenger/skin/icons/new/compact/thread.svg");
+ --icon-thread-ignored: url("chrome://messenger/skin/icons/new/compact/thread-ignored.svg");
+ --icon-subthread-ignored: url("chrome://messenger/skin/icons/new/compact/subthread-ignored.svg");
+ --icon-tools: url("chrome://messenger/skin/icons/new/compact/tools.svg");
+ --icon-trash: url("chrome://messenger/skin/icons/new/compact/trash.svg");
+ --icon-unread: url("chrome://messenger/skin/icons/new/compact/unread.svg");
+ --icon-user: url("chrome://messenger/skin/icons/new/compact/user.svg");
+ --icon-user-list: url("chrome://messenger/skin/icons/new/compact/user-list.svg");
+ --icon-warning: url("chrome://messenger/skin/icons/new/compact/warning.svg");
+ --icon-warning-sm: url("chrome://messenger/skin/icons/warning-12.svg");
+
+ /* Medium variations, touch, 20px */
+ --icon-add-md: url("chrome://messenger/skin/icons/new/normal/add.svg");
+ --icon-cloud-download-md: url("chrome://messenger/skin/icons/new/normal/cloud-download.svg");
+ --icon-download-md: url("chrome://messenger/skin/icons/new/normal/download.svg");
+ --icon-more-md: url("chrome://messenger/skin/icons/new/normal/more.svg");
+
+ /* Large variations, touch, 24px */
+ --icon-address-book-lg: url("chrome://messenger/skin/icons/new/touch/address-book.svg");
+ --icon-calendar-lg: url("chrome://messenger/skin/icons/new/touch/calendar.svg");
+ --icon-chat-lg: url("chrome://messenger/skin/icons/new/touch/chat.svg");
+ --icon-export-lg: url("chrome://messenger/skin/icons/new/touch/export.svg");
+ --icon-import-lg: url("chrome://messenger/skin/icons/new/touch/import.svg");
+ --icon-mail-lg: url("chrome://messenger/skin/icons/new/touch/mail.svg");
+
+ --icon-calendar-empty: url("chrome://messenger/skin/icons/new/calendar-empty.svg");
+ --icon-circle-small: url("chrome://messenger/skin/icons/new/circle-sm.svg");
+ --icon-loading: url("chrome://messenger/skin/icons/new/loading.svg");
+ --icon-nav-down-sm: url("chrome://messenger/skin/icons/new/nav-down-sm.svg");
+ --icon-nav-left-sm: url("chrome://messenger/skin/icons/new/nav-left-sm.svg");
+ --icon-nav-right-sm: url("chrome://messenger/skin/icons/new/nav-right-sm.svg");
+ --icon-nav-up-sm: url("chrome://messenger/skin/icons/new/nav-up-sm.svg");
+ --icon-nav-today: url("chrome://messenger/skin/icons/new/nav-today.svg");
+ --icon-column-menu: url("chrome://messenger/skin/icons/new/column-menu.svg");
+ --icon-attachment-sm: url("chrome://messenger/skin/icons/new/attachment-sm.svg");
+ --icon-spam-sm: url("chrome://messenger/skin/icons/new/spam-sm.svg");
+ --icon-star-sm: url("chrome://messenger/skin/icons/new/star-sm.svg");
+ --icon-tag-sm: url("chrome://messenger/skin/icons/new/tag-sm.svg");
+ --icon-thread-sm: url("chrome://messenger/skin/icons/new/thread-sm.svg");
+ --icon-trash-sm: url("chrome://messenger/skin/icons/new/trash-sm.svg");
+ --icon-unread-dot: url("chrome://messenger/skin/icons/new/unread-dot.svg");
+ --icon-unread-sm: url("chrome://messenger/skin/icons/new/unread-sm.svg");
+ --icon-new-indicator: url("chrome://messenger/skin/icons/folder-new-indicator.svg");
+ --icon-notify: url("chrome://messenger/skin/icons/new/notify.svg");
+ --icon-calendar-imip: url("chrome://messenger/skin/icons/new/normal/calendar-invite.svg");
+ --icon-event-start: url("chrome://messenger/skin/icons/new/event-start.svg");
+ --icon-event-end: url("chrome://messenger/skin/icons/new/event-end.svg");
+ --icon-event-continue: url("chrome://messenger/skin/icons/new/event-continue.svg");
+ --icon-mail-sm: url("chrome://messenger/skin/icons/new/mail-sm.svg");
+ --icon-bell: url("chrome://messenger/skin/icons/new/bell.svg");
+ --icon-bell-disabled: url("chrome://messenger/skin/icons/new/bell-disabled.svg");
+ --icon-bell-ring: url("chrome://messenger/skin/icons/new/bell-ring.svg");
+ --icon-recurrence: url("chrome://messenger/skin/icons/new/recurrence.svg");
+ --icon-recurrence-exception: url("chrome://messenger/skin/icons/new/recurrence-exception.svg");
+
+ --icon-forward-col: url("chrome://messenger/skin/icons/new/compact/forward-col.svg");
+ --icon-reply-col: url("chrome://messenger/skin/icons/new/compact/reply-col.svg");
+ --icon-redirect-col: url("chrome://messenger/skin/icons/new/compact/redirect-col.svg");
+ --icon-forward-redirect-col: url("chrome://messenger/skin/icons/new/compact/forward-redirect-col.svg");
+ --icon-reply-forward-col: url("chrome://messenger/skin/icons/new/compact/reply-forward-col.svg");
+ --icon-reply-forward-redirect-col: url("chrome://messenger/skin/icons/new/compact/reply-forward-redirect-col.svg");
+ --icon-reply-redirect-col: url("chrome://messenger/skin/icons/new/compact/reply-redirect-col.svg");
+
+ --icon-status-away: url("chrome://messenger/skin/icons/new/status-away.svg");
+ --icon-status-away-sm: url("chrome://messenger/skin/icons/new/status-away-sm.svg");
+ --icon-status-idle: url("chrome://messenger/skin/icons/new/status-idle.svg");
+ --icon-status-idle-sm: url("chrome://messenger/skin/icons/new/status-idle-sm.svg");
+ --icon-status-offline: url("chrome://messenger/skin/icons/new/status-offline.svg");
+ --icon-status-offline-sm: url("chrome://messenger/skin/icons/new/status-offline-sm.svg");
+ --icon-status-online: url("chrome://messenger/skin/icons/new/status-online.svg");
+ --icon-status-online-sm: url("chrome://messenger/skin/icons/new/status-online-sm.svg");
+
+ --icon-warning-dialog: url("chrome://messenger/skin/icons/new/activity/warning.svg");
+ --icon-question-dialog: url("chrome://messenger/skin/icons/new/activity/question.svg");
+
+ --spaces-icon-mail: url("chrome://messenger/skin/icons/new/normal/mail.svg");
+ --spaces-icon-address-book: url("chrome://messenger/skin/icons/new/normal/address-book.svg");
+ --spaces-icon-calendar: url("chrome://messenger/skin/icons/new/normal/calendar.svg");
+ --spaces-icon-tasks: url("chrome://messenger/skin/icons/new/normal/tasks.svg");
+ --spaces-icon-chat: url("chrome://messenger/skin/icons/new/normal/chat.svg");
+ --spaces-icon-overflow: url("chrome://messenger/skin/icons/new/normal/overflow.svg");
+ --spaces-icon-settings: url("chrome://messenger/skin/icons/new/normal/settings.svg");
+ --spaces-icon-collapse: url("chrome://messenger/skin/icons/new/normal/collapse.svg");
+
+ --folder-pane-mail: var(--icon-mail);
+ --folder-pane-mail-secure: var(--icon-mail-secure);
+ --folder-pane-inbox: var(--icon-inbox);
+ --folder-pane-draft: var(--icon-draft);
+ --folder-pane-sent: var(--icon-sent);
+ --folder-pane-archive: var(--icon-archive);
+ --folder-pane-spam: var(--icon-spam);
+ --folder-pane-trash: var(--icon-trash);
+ --folder-pane-template: var(--icon-template);
+ --folder-pane-rss: var(--icon-rss);
+ --folder-pane-globe: var(--icon-globe);
+ --folder-pane-globe-secure: var(--icon-globe-secure);
+ --folder-pane-newsletter: var(--icon-newsletter);
+ --folder-pane-outbox: var(--icon-outbox);
+ --folder-pane-folder: var(--icon-folder);
+ --folder-pane-folder-filter: var(--icon-folder-filter);
+ --folder-pane-folder-rss: var(--icon-folder-rss);
+
+ --addressbook-tree-ab: var(--icon-address-book);
+ --addressbook-tree-list: var(--icon-user-list);
+ --addressbook-tree-remote: var(--icon-globe);
+
+ --account-central-address-book: url("chrome://messenger/skin/icons/new/normal/address-book.svg");
+ --account-central-calendar: url("chrome://messenger/skin/icons/new/normal/calendar.svg");
+ --account-central-chat: url("chrome://messenger/skin/icons/new/normal/chat.svg");
+ --account-central-folder: url("chrome://messenger/skin/icons/new/normal/folder.svg");
+ --account-central-globe: url("chrome://messenger/skin/icons/new/normal/globe.svg");
+ --account-central-link: url("chrome://messenger/skin/icons/new/normal/link.svg");
+ --account-central-mail: url("chrome://messenger/skin/icons/new/normal/mail.svg");
+ --account-central-newsletter: url("chrome://messenger/skin/icons/new/normal/newsletter.svg");
+ --account-central-rss: url("chrome://messenger/skin/icons/new/normal/rss.svg");
+
+ --font-size-increase: url("chrome://messenger/skin/icons/new/normal/add-circle.svg");
+ --font-size-decrease: url("chrome://messenger/skin/icons/new/normal/subtract-circle.svg");
+
+ --addons-manager-recommendations: url("chrome://messenger/skin/icons/new/touch/features.svg");
+ --addons-manager-extensions: url("chrome://messenger/skin/icons/new/touch/extension.svg");
+ --addons-manager-themes: url("chrome://messenger/skin/icons/new/touch/paint-brush.svg");
+ --addons-manager-dictionaries: url("chrome://messenger/skin/icons/new/touch/dictionary.svg");
+ --addons-manager-languages: url("chrome://messenger/skin/icons/new/touch/language.svg");
+ --addons-manager-site-permissions: url("chrome://messenger/skin/icons/new/touch/globe.svg");
+ --addons-manager-available-updates: url("chrome://messenger/skin/icons/new/touch/extension-update-available.svg");
+ --addons-manager-recent-updates: url("chrome://messenger/skin/icons/new/touch/extension-update-recent.svg");
+
+ --icon-account-sync: url("chrome://messenger/skin/icons/account-sync.svg");
+}
+
+:root[uidensity="compact"] {
+ --spaces-icon-mail: var(--icon-mail);
+ --spaces-icon-address-book: var(--icon-address-book);
+ --spaces-icon-calendar: var(--icon-calendar);
+ --spaces-icon-tasks: var(--icon-tasks);
+ --spaces-icon-chat: var(--icon-chat);
+ --spaces-icon-overflow: var(--icon-overflow);
+ --spaces-icon-settings: var(--icon-settings);
+ --spaces-icon-collapse: var(--icon-collapse);
+
+ --font-size-increase: url("chrome://messenger/skin/icons/new/compact/add-circle.svg");
+ --font-size-decrease: url("chrome://messenger/skin/icons/new/compact/subtract-circle.svg");
+}
+
+:root[uidensity="touch"] {
+ --spaces-icon-mail: url("chrome://messenger/skin/icons/new/touch/mail.svg");
+ --spaces-icon-address-book: url("chrome://messenger/skin/icons/new/touch/address-book.svg");
+ --spaces-icon-calendar: url("chrome://messenger/skin/icons/new/touch/calendar.svg");
+ --spaces-icon-tasks: url("chrome://messenger/skin/icons/new/touch/tasks.svg");
+ --spaces-icon-chat: url("chrome://messenger/skin/icons/new/touch/chat.svg");
+ --spaces-icon-overflow: url("chrome://messenger/skin/icons/new/touch/overflow.svg");
+ --spaces-icon-settings: url("chrome://messenger/skin/icons/new/touch/settings.svg");
+ --spaces-icon-collapse: url("chrome://messenger/skin/icons/new/touch/collapse.svg");
+
+ --folder-pane-mail: url("chrome://messenger/skin/icons/new/normal/mail.svg");
+ --folder-pane-mail-secure: url("chrome://messenger/skin/icons/new/normal/mail-secure.svg");
+ --folder-pane-inbox: url("chrome://messenger/skin/icons/new/normal/inbox.svg");
+ --folder-pane-draft: url("chrome://messenger/skin/icons/new/normal/draft.svg");
+ --folder-pane-sent: url("chrome://messenger/skin/icons/new/normal/sent.svg");
+ --folder-pane-archive: url("chrome://messenger/skin/icons/new/normal/archive.svg");
+ --folder-pane-spam: url("chrome://messenger/skin/icons/new/normal/spam.svg");
+ --folder-pane-trash: url("chrome://messenger/skin/icons/new/normal/trash.svg");
+ --folder-pane-template: url("chrome://messenger/skin/icons/new/normal/template.svg");
+ --folder-pane-rss: url("chrome://messenger/skin/icons/new/normal/rss.svg");
+ --folder-pane-globe: url("chrome://messenger/skin/icons/new/normal/globe.svg");
+ --folder-pane-globe-secure: url("chrome://messenger/skin/icons/new/normal/globe-secure.svg");
+ --folder-pane-newsletter: url("chrome://messenger/skin/icons/new/normal/newsletter.svg");
+ --folder-pane-outbox: url("chrome://messenger/skin/icons/new/normal/outbox.svg");
+ --folder-pane-folder: url("chrome://messenger/skin/icons/new/normal/folder.svg");
+ --folder-pane-folder-filter: url("chrome://messenger/skin/icons/new/normal/folder-filter.svg");
+ --folder-pane-folder-rss: url("chrome://messenger/skin/icons/new/normal/folder-rss.svg");
+
+ --font-size-increase: url("chrome://messenger/skin/icons/new/touch/add-circle.svg");
+ --font-size-decrease: url("chrome://messenger/skin/icons/new/touch/subtract-circle.svg");
+}
diff --git a/comm/mail/themes/shared/mail/icons/ablist.svg b/comm/mail/themes/shared/mail/icons/ablist.svg
new file mode 100644
index 0000000000..eb06c7192f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/ablist.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M6.812 9.349a4 4 0 1 1 4.377 0A7.003 7.003 0 0 1 16 16H2a7.003 7.003 0 0 1 4.812-6.651zM9 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 3a5.001 5.001 0 0 0-4.584 3h9.168A5.001 5.001 0 0 0 9 11z"/>
+ <path d="M4.049 6.7A4 4 0 0 1 9.7 1.049 5 5 0 0 0 4.049 6.7zM1.252 14H0c0-2.89 1.75-5.37 4.249-6.439.178.543.447 1.045.788 1.488A8.016 8.016 0 0 0 1.252 14z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/aboutdebugging-logo.svg b/comm/mail/themes/shared/mail/icons/aboutdebugging-logo.svg
new file mode 100644
index 0000000000..a238bd3902
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/aboutdebugging-logo.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M22.75 10.2a9.42 9.42 0 00-1.22-3.13c-.05-.09-.1-.2-.17-.28-.12-.19-.26-.38-.4-.56a8 8 0 00-2.4-2.43 8.99 8.99 0 00-.52-.34c-1.6-1-2.62-1.13-2.62-1.13a8.99 8.99 0 00-4.95-.57c.13-.24.25-.33.29-.34h.02-.02c-.41.03-.91.3-1.36.58.31-.6.96-.95 1.05-1h.02c-.52-.03-1.98.3-3.23 1.69A9.86 9.86 0 001 11.79a9.45 9.45 0 002.39 6.46l.02.04a8 8 0 003.1 2.16c.1.04.18.05.25.05l-.04-.01c.02-.05-.79-1.34-1.15-2.89.72.74 1.58 1.3 2.54 1.4.1.03-.34-.52-.82-1.25l.65.23 7.17 2.39c-.7.72-1.65 1.42-2.94 2.04 0 0 2.88-.24 4.31-1.84-.58 1.34-2.18 2.06-2.18 2.06a10.63 10.63 0 006.22-3.54c2.23-2.78 2.9-5.39 2.23-8.9zm-5.7 6.5a6.14 6.14 0 01-1.5 3.3L2.7 15.6a9.2 9.2 0 01-.48-3.72c.22.41.9.75 1.3.77-.96-2.15-.68-3.41.04-4.4.26.39.62.86.98 1.39l.07-.3c.02-.14.03-.24.07-.35-.33-.48-.6-.9-.81-1.18.4-.45.84-.78 1.24-1 .01.19.05.36.1.57.07.29.09.72.05 1.06v-.01l-.03.2c-.02.07-.2.26-.26.76-.05.53.14.82.33 1.05.22-.21.63-.73 1.39-1.02.75-.3 1.25-.75 2.21-1.24.57-.29 1.17-.25 1.93-.22 1.36.24 3.14.72 4.81.8.38.9.53 2.2.53 2.23l.02.32a112.47 112.47 0 01-7.89 2.77c-.12.03-1.39-1.8-2.57-3.56-.02.04-.06.05-.07.07a.46.46 0 00-.09.1l-.25.15c1.27 1.87 2.78 3.95 2.92 3.95 1.29-.46 5.17-1.83 7.97-2.79-.02 2.11-.57 2.66-.57 2.66s.7-.27 1.43-1c0 .59-.16 2.1-1.38 3.56 0 0 .64-.17 1.36-.51z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/account-sync.svg b/comm/mail/themes/shared/mail/icons/account-sync.svg
new file mode 100644
index 0000000000..48315145b1
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/account-sync.svg
@@ -0,0 +1,102 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" width="28" height="28">
+ <path fill="url(#a)" d="M25.179 5.495A13.814 13.814 0 0 0 14.554.003C11.304-.062 9.058.915 7.787 1.7c1.7-.986 4.16-1.545 6.314-1.517 5.54.07 11.492 3.843 12.375 10.644 1.015 7.807-4.423 14.323-12.072 14.343-8.416.022-13.535-7.43-12.197-14.123.025-.328.073-.654.145-.975a13.235 13.235 0 0 1 1.467-4.907c-.969.502-2.203 2.088-2.812 3.557a14.474 14.474 0 0 0-.91 7.063c.022.181.04.362.065.542A14.022 14.022 0 1 0 25.179 5.495Z"/>
+ <path fill="url(#b)" d="M25.179 5.495A13.814 13.814 0 0 0 14.554.003C11.304-.062 9.058.915 7.787 1.7c1.7-.986 4.16-1.545 6.314-1.517 5.54.07 11.492 3.843 12.375 10.644 1.015 7.807-4.423 14.323-12.072 14.343-8.416.022-13.535-7.43-12.197-14.123.025-.328.073-.654.145-.975a13.235 13.235 0 0 1 1.467-4.907c-.969.502-2.203 2.088-2.812 3.557a14.474 14.474 0 0 0-.91 7.063c.022.181.04.362.065.542A14.022 14.022 0 1 0 25.179 5.495Z" opacity=".67"/>
+ <path fill="url(#c)" d="M25.179 5.495A13.814 13.814 0 0 0 14.554.003C11.304-.062 9.058.915 7.787 1.7c1.7-.986 4.16-1.545 6.314-1.517 5.54.07 11.492 3.843 12.375 10.644 1.015 7.807-4.423 14.323-12.072 14.343-8.416.022-13.535-7.43-12.197-14.123.025-.328.073-.654.145-.975a13.235 13.235 0 0 1 1.467-4.907c-.969.502-2.203 2.088-2.812 3.557a14.474 14.474 0 0 0-.91 7.063c.022.181.04.362.065.542A14.022 14.022 0 1 0 25.179 5.495Z"/>
+ <path fill="url(#d)" d="M25.179 5.495A13.814 13.814 0 0 0 14.554.003C11.304-.062 9.058.915 7.787 1.7c1.7-.986 4.16-1.545 6.314-1.517 5.54.07 11.492 3.843 12.375 10.644 1.015 7.807-4.423 14.323-12.072 14.343-8.416.022-13.535-7.43-12.197-14.123.025-.328.073-.654.145-.975a13.235 13.235 0 0 1 1.467-4.907c-.969.502-2.203 2.088-2.812 3.557a14.474 14.474 0 0 0-.91 7.063c.022.181.04.362.065.542A14.022 14.022 0 1 0 25.179 5.495Z"/>
+ <path fill="url(#e)" d="M25.179 5.495A13.814 13.814 0 0 0 14.554.003C11.304-.062 9.058.915 7.787 1.7c1.7-.986 4.16-1.545 6.314-1.517 5.54.07 11.492 3.843 12.375 10.644 1.015 7.807-4.423 14.323-12.072 14.343-8.416.022-13.535-7.43-12.197-14.123.025-.328.073-.654.145-.975a13.235 13.235 0 0 1 1.467-4.907c-.969.502-2.203 2.088-2.812 3.557a14.474 14.474 0 0 0-.91 7.063c.022.181.04.362.065.542A14.022 14.022 0 1 0 25.179 5.495Z"/>
+ <path fill="url(#f)" d="M26.478 10.827c.11.841.145 1.69.105 2.537.464-.07.93-.132 1.395-.186a14.004 14.004 0 0 0-2.798-7.683A13.814 13.814 0 0 0 14.556.003C11.305-.062 9.059.915 7.789 1.7c1.7-.986 4.16-1.545 6.314-1.517 5.54.07 11.491 3.842 12.375 10.644z"/>
+ <path fill="url(#g)" d="M26.819 10.44C26.03 3.33 19.692.136 14.103.182 11.949.2 9.489.714 7.789 1.7c-.45.267-.868.584-1.246.945.045-.037.18-.148.403-.301l.022-.015.02-.014a9.33 9.33 0 0 1 2.692-1.25 15.225 15.225 0 0 1 4.614-.54 11.639 11.639 0 0 1 10.938 11.198c.128 4.622-3.655 8.307-8.016 8.521-3.172.155-6.16-1.38-7.62-4.45a7.587 7.587 0 0 1-.687-2.216c-.692-4.673 2.446-8.657 5.323-9.644C12.68 2.578 8.791 2.67 5.896 4.8 3.81 6.334 2.459 8.667 2.01 11.45a11.53 11.53 0 0 0 .819 6.3 12.354 12.354 0 0 0 10.53 7.505c.348.027.697.04 1.045.04 9.262 0 13.28-7.03 12.414-14.856z"/>
+ <path fill="url(#h)" d="M26.819 10.44C26.03 3.33 19.692.136 14.103.182 11.949.2 9.489.714 7.789 1.7c-.45.267-.868.584-1.246.945.045-.037.18-.148.403-.301l.022-.015.02-.014a9.33 9.33 0 0 1 2.692-1.25 15.225 15.225 0 0 1 4.614-.54 11.639 11.639 0 0 1 10.938 11.198c.128 4.622-3.655 8.307-8.016 8.521-3.172.155-6.16-1.38-7.62-4.45a7.587 7.587 0 0 1-.687-2.216c-.692-4.673 2.446-8.657 5.323-9.644C12.68 2.578 8.791 2.67 5.896 4.8 3.81 6.334 2.459 8.667 2.01 11.45a11.53 11.53 0 0 0 .819 6.3 12.354 12.354 0 0 0 10.53 7.505c.348.027.697.04 1.045.04 9.262 0 13.28-7.03 12.414-14.856z"/>
+ <path fill="url(#i)" d="M26.819 10.44C26.03 3.33 19.692.136 14.103.182 11.949.2 9.489.714 7.789 1.7c-.45.267-.868.584-1.246.945.045-.037.18-.148.403-.301l.022-.015.02-.014a9.33 9.33 0 0 1 2.692-1.25 15.225 15.225 0 0 1 4.614-.54 11.639 11.639 0 0 1 10.938 11.198c.128 4.622-3.655 8.307-8.016 8.521-3.172.155-6.16-1.38-7.62-4.45a7.587 7.587 0 0 1-.687-2.216c-.692-4.673 2.446-8.657 5.323-9.644C12.68 2.578 8.791 2.67 5.896 4.8 3.81 6.334 2.459 8.667 2.01 11.45a11.53 11.53 0 0 0 .819 6.3 12.354 12.354 0 0 0 10.53 7.505c.348.027.697.04 1.045.04 9.262 0 13.28-7.03 12.414-14.856z" opacity=".53"/>
+ <path fill="url(#j)" d="M26.819 10.44C26.03 3.33 19.692.136 14.103.182 11.949.2 9.489.714 7.789 1.7c-.45.267-.868.584-1.246.945.045-.037.18-.148.403-.301l.022-.015.02-.014a9.33 9.33 0 0 1 2.692-1.25 15.225 15.225 0 0 1 4.614-.54 11.639 11.639 0 0 1 10.938 11.198c.128 4.622-3.655 8.307-8.016 8.521-3.172.155-6.16-1.38-7.62-4.45a7.587 7.587 0 0 1-.687-2.216c-.692-4.673 2.446-8.657 5.323-9.644C12.68 2.578 8.791 2.67 5.896 4.8 3.81 6.334 2.459 8.667 2.01 11.45a11.53 11.53 0 0 0 .819 6.3 12.354 12.354 0 0 0 10.53 7.505c.348.027.697.04 1.045.04 9.262 0 13.28-7.03 12.414-14.856z" opacity=".53"/>
+ <path fill="url(#k)" d="M17.216 20.244c5.985-.364 8.547-5.32 8.707-8.836C26.174 5.915 22.915-.007 14.294.525a15.225 15.225 0 0 0-4.614.541 10.1 10.1 0 0 0-2.692 1.25l-.02.014-.022.015a7.092 7.092 0 0 0-.393.294 11.719 11.719 0 0 1 7.342-1.377c4.95.65 9.475 4.5 9.475 9.58 0 3.91-3.02 6.895-6.558 6.68-5.255-.314-6.58-5.704-3.846-8.033-.737-.159-2.123.152-3.087 1.594-.866 1.295-.817 3.294-.283 4.711a7.742 7.742 0 0 0 7.62 4.45z"/>
+ <path fill="url(#l)" d="M25.18 5.495a13.98 13.98 0 0 0-1.218-1.394 10.97 10.97 0 0 0-1.112-1.024c.226.197.442.407.647.627a7.864 7.864 0 0 1 1.709 2.85c.73 2.215.683 4.988-.713 7.165a8.239 8.239 0 0 1-7.3 3.813c-.126 0-.253 0-.381-.01-5.255-.314-6.58-5.704-3.846-8.033-.737-.159-2.123.152-3.087 1.594-.866 1.295-.817 3.294-.283 4.711a7.587 7.587 0 0 1-.687-2.216c-.692-4.673 2.446-8.657 5.323-9.644C12.68 2.578 8.791 2.67 5.896 4.8a9.746 9.746 0 0 0-3.53 5.11A13.475 13.475 0 0 1 3.82 5.166c-.97.502-2.203 2.088-2.812 3.557a14.474 14.474 0 0 0-.91 7.062c.021.181.04.362.064.542A14.022 14.022 0 1 0 25.18 5.495Z"/>
+ <path fill="url(#m)" d="M25.206 6.554a7.86 7.86 0 0 0-1.71-2.85 10.564 10.564 0 0 0-3.182-2.273A14.182 14.182 0 0 0 17.185.322a13.942 13.942 0 0 0-5.798-.035c-1.989.42-3.738 1.28-4.844 2.357a11.235 11.235 0 0 1 2.81-1.12 11.748 11.748 0 0 1 10.911 2.835 9.453 9.453 0 0 1 1.515 1.855c1.714 2.785 1.552 6.287.216 8.353-.992 1.534-3.118 2.975-5.1 2.958a8.27 8.27 0 0 0 7.598-3.805c1.396-2.178 1.444-4.95.713-7.166z"/>
+ <path fill="url(#n)" d="M25.206 6.554a7.86 7.86 0 0 0-1.71-2.85 10.564 10.564 0 0 0-3.182-2.273A14.182 14.182 0 0 0 17.185.322a13.942 13.942 0 0 0-5.798-.035c-1.989.42-3.738 1.28-4.844 2.357a11.235 11.235 0 0 1 2.81-1.12 11.748 11.748 0 0 1 10.911 2.835 9.453 9.453 0 0 1 1.515 1.855c1.714 2.785 1.552 6.287.216 8.353-.992 1.534-3.118 2.975-5.1 2.958a8.27 8.27 0 0 0 7.598-3.805c1.396-2.178 1.444-4.95.713-7.166z"/>
+ <defs>
+ <radialGradient id="a" cx="0" cy="0" r="1" gradientTransform="translate(25.034 5.735) scale(31.773)" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#FFF36E"/>
+ <stop offset=".5" stop-color="#FC4055"/>
+ <stop offset="1" stop-color="#E31587"/>
+ </radialGradient>
+ <radialGradient id="b" cx="0" cy="0" r="1" gradientTransform="translate(2.319 7.049) scale(18.8041)" gradientUnits="userSpaceOnUse">
+ <stop offset=".001" stop-color="#C60084"/>
+ <stop offset="1" stop-color="#FC4055" stop-opacity="0"/>
+ </radialGradient>
+ <radialGradient id="c" cx="0" cy="0" r="1" gradientTransform="matrix(37.3096 0 0 37.3097 27.75 3.927)" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#FFDE67" stop-opacity=".6"/>
+ <stop offset=".093" stop-color="#FFD966" stop-opacity=".581"/>
+ <stop offset=".203" stop-color="#FFCA65" stop-opacity=".525"/>
+ <stop offset=".321" stop-color="#FEB262" stop-opacity=".432"/>
+ <stop offset=".446" stop-color="#FE8F5E" stop-opacity=".302"/>
+ <stop offset=".573" stop-color="#FD6459" stop-opacity=".137"/>
+ <stop offset=".664" stop-color="#FC4055" stop-opacity="0"/>
+ </radialGradient>
+ <radialGradient id="d" cx="0" cy="0" r="1" gradientTransform="matrix(48.1323 0 0 48.1324 14.798 15.541)" gradientUnits="userSpaceOnUse">
+ <stop offset=".153" stop-color="#810220"/>
+ <stop offset=".167" stop-color="#920B27" stop-opacity=".861"/>
+ <stop offset=".216" stop-color="#CB2740" stop-opacity=".398"/>
+ <stop offset=".253" stop-color="#EF394F" stop-opacity=".11"/>
+ <stop offset=".272" stop-color="#FC4055" stop-opacity="0"/>
+ </radialGradient>
+ <radialGradient id="e" cx="0" cy="0" r="1" gradientTransform="matrix(48.1323 0 0 48.1324 11.156 14.936)" gradientUnits="userSpaceOnUse">
+ <stop offset=".113" stop-color="#810220"/>
+ <stop offset=".133" stop-color="#920B27" stop-opacity=".861"/>
+ <stop offset=".204" stop-color="#CB2740" stop-opacity=".398"/>
+ <stop offset=".257" stop-color="#EF394F" stop-opacity=".11"/>
+ <stop offset=".284" stop-color="#FC4055" stop-opacity="0"/>
+ </radialGradient>
+ <radialGradient id="g" cx="0" cy="0" r="1" gradientTransform="matrix(29.8269 0 0 29.8891 24.31 4.232)" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#FF9640"/>
+ <stop offset=".8" stop-color="#FC4055"/>
+ </radialGradient>
+ <radialGradient id="h" cx="0" cy="0" r="1" gradientTransform="matrix(29.8269 0 0 29.8891 24.31 4.232)" gradientUnits="userSpaceOnUse">
+ <stop offset=".084" stop-color="#FFDE67"/>
+ <stop offset=".147" stop-color="#FFDC66" stop-opacity=".968"/>
+ <stop offset=".246" stop-color="#FFD562" stop-opacity=".879"/>
+ <stop offset=".369" stop-color="#FFCB5D" stop-opacity=".734"/>
+ <stop offset=".511" stop-color="#FFBC55" stop-opacity=".533"/>
+ <stop offset=".667" stop-color="#FFAA4B" stop-opacity=".28"/>
+ <stop offset=".822" stop-color="#FF9640" stop-opacity="0"/>
+ </radialGradient>
+ <radialGradient id="i" cx="0" cy="0" r="1" gradientTransform="matrix(3.61273 14.2023 -14.79377 3.76319 17.478 13.529)" gradientUnits="userSpaceOnUse">
+ <stop offset=".363" stop-color="#FC4055"/>
+ <stop offset=".443" stop-color="#FD604D" stop-opacity=".633"/>
+ <stop offset=".545" stop-color="#FE8644" stop-opacity=".181"/>
+ <stop offset=".59" stop-color="#FF9640" stop-opacity="0"/>
+ </radialGradient>
+ <radialGradient id="j" cx="0" cy="0" r="1" gradientTransform="translate(14.958 14.734) scale(14.6265)" gradientUnits="userSpaceOnUse">
+ <stop offset=".216" stop-color="#FC4055" stop-opacity=".8"/>
+ <stop offset=".267" stop-color="#FD5251" stop-opacity=".633"/>
+ <stop offset=".41" stop-color="#FE8345" stop-opacity=".181"/>
+ <stop offset=".474" stop-color="#FF9640" stop-opacity="0"/>
+ </radialGradient>
+ <radialGradient id="k" cx="0" cy="0" r="1" gradientTransform="matrix(50.413 0 0 50.5181 30.262 .856)" gradientUnits="userSpaceOnUse">
+ <stop offset=".054" stop-color="#FFF36E"/>
+ <stop offset=".457" stop-color="#FF9640"/>
+ <stop offset=".639" stop-color="#FF9640"/>
+ </radialGradient>
+ <linearGradient id="f" x1="16.041" x2="24.286" y1="2.725" y2="17.007" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#FFBD4F"/>
+ <stop offset=".508" stop-color="#FF9640" stop-opacity="0"/>
+ </linearGradient>
+ <linearGradient id="l" x1="20.668" x2="6.354" y1="2.479" y2="27.272" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#FFF36E" stop-opacity=".8"/>
+ <stop offset=".094" stop-color="#FFF36E" stop-opacity=".699"/>
+ <stop offset=".752" stop-color="#FFF36E" stop-opacity="0"/>
+ </linearGradient>
+ <linearGradient id="m" x1="14.205" x2="21.805" y1="-.234" y2="21.771" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#B833E1"/>
+ <stop offset=".371" stop-color="#9059FF"/>
+ <stop offset=".614" stop-color="#5B6DF8"/>
+ <stop offset="1" stop-color="#0090ED"/>
+ </linearGradient>
+ <linearGradient id="n" x1="9.699" x2="23.825" y1=".113" y2="14.24" gradientUnits="userSpaceOnUse">
+ <stop offset=".805" stop-color="#722291" stop-opacity="0"/>
+ <stop offset="1" stop-color="#592ACB" stop-opacity=".5"/>
+ </linearGradient>
+ </defs>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/accounts.svg b/comm/mail/themes/shared/mail/icons/accounts.svg
new file mode 100644
index 0000000000..3274cb80d0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/accounts.svg
@@ -0,0 +1,9 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M7.281 5H8.75A.25.25 0 0 0 9 4.75V.984a.984.984 0 0 0-1.969 0V4.75a.25.25 0 0 0 .25.25z"/>
+ <path d="M13.5 2H11a1 1 0 0 0 0 2h2.5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .5-.5H5a1 1 0 0 0 0-2H2.5A2.5 2.5 0 0 0 0 4.5v7A2.5 2.5 0 0 0 2.5 14h11a2.5 2.5 0 0 0 2.5-2.5v-7A2.5 2.5 0 0 0 13.5 2z"/>
+ <rect x="3" y="6" width="4" height="4" rx=".577" ry=".577"/>
+ <path d="M9.5 7h3a.5.5 0 0 0 0-1h-3a.5.5 0 0 0 0 1zm0 1a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/add-circle-fill.svg b/comm/mail/themes/shared/mail/icons/add-circle-fill.svg
new file mode 100644
index 0000000000..4732d4f63c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/add-circle-fill.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill-opacity="context-fill-opacity">
+ <circle fill="context-stroke" cx="7.6" cy="7.6" r="7.5"/>
+ <path fill="context-fill" d="M11 8.2H8.6l-.4.4V11c0 .3-.3.6-.6.6S7 11.3 7 11V8.6l-.3-.4H4.2c-.3 0-.6-.2-.6-.6s.3-.6.6-.6h2.4l.4-.3V4.2c0-.3.3-.6.6-.6s.6.3.6.6v2.4l.4.4H11c.3 0 .6.3.6.6s-.3.6-.6.6z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/addcontact.svg b/comm/mail/themes/shared/mail/icons/addcontact.svg
new file mode 100644
index 0000000000..746df96777
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/addcontact.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm.027 6c.082.734.34 1.416.73 2H1a7.003 7.003 0 0 1 4.812-6.651 4 4 0 1 1 4.377 0c.107.035.214.074.32.114a4.52 4.52 0 0 0-1.785 1.589A5.001 5.001 0 0 0 3.417 13h4.61z"/>
+ <path d="M12.5 16a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm.5-4v-1.5a.5.5 0 1 0-1 0V12h-1.5a.5.5 0 1 0 0 1H12v1.5a.5.5 0 1 0 1 0V13h1.5a.5.5 0 1 0 0-1H13z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/addlist.svg b/comm/mail/themes/shared/mail/icons/addlist.svg
new file mode 100644
index 0000000000..fb60e383a0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/addlist.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M16 16h-.671H16zm-3.535-8a4.502 4.502 0 0 0-4.229 3.058A5.006 5.006 0 0 0 4.416 14h3.84a4.51 4.51 0 0 0 1.415 2H2a7.003 7.003 0 0 1 4.812-6.651A4 4 0 1 1 12.465 8zM9 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>
+ <path d="M4.049 6.7A4 4 0 0 1 9.7 1.049 5 5 0 0 0 4.049 6.7zM1.252 14H0a7 7 0 0 1 4.249-6.439c.178.543.447 1.045.788 1.488A8.016 8.016 0 0 0 1.252 14z"/>
+ <path d="M12.5 16a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm.5-4v-1.5a.5.5 0 1 0-1 0V12h-1.5a.5.5 0 1 0 0 1H12v1.5a.5.5 0 1 0 1 0V13h1.5a.5.5 0 1 0 0-1H13z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/addon-install-blocked.svg b/comm/mail/themes/shared/mail/icons/addon-install-blocked.svg
new file mode 100644
index 0000000000..caaaa466b6
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/addon-install-blocked.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="64" height="64" viewBox="0 0 64 64">
+ <defs>
+ <style>
+ .style-puzzle-piece {
+ fill: url('#gradient-linear-puzzle-piece');
+ }
+ .style-badge-shadow {
+ fill: #0d131a;
+ fill-opacity: .15;
+ }
+ .style-badge-background {
+ fill: #fff;
+ }
+ .style-badge-inside {
+ fill: #e62117;
+ }
+ .style-badge-icon {
+ fill: #fff;
+ }
+ </style>
+ <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%">
+ <stop offset="0%" stop-color="#999999" stop-opacity="1"/>
+ <stop offset="100%" stop-color="#8c8c8c" stop-opacity="1"/>
+ </linearGradient>
+ </defs>
+ <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/>
+ <svg width="32" height="32" x="32" y="0">
+ <ellipse class="style-badge-shadow" rx="14" ry="15" cx="16" cy="17" />
+ <circle class="style-badge-background" r="15" cy="15" cx="16" />
+ <circle class="style-badge-inside" r="12" cy="15" cx="16" />
+ <rect class="style-badge-icon" x="9" y="13" width="14" height="4" rx="1" ry="1" />
+ </svg>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/addon-install-confirm.svg b/comm/mail/themes/shared/mail/icons/addon-install-confirm.svg
new file mode 100644
index 0000000000..a164552538
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/addon-install-confirm.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="64" height="64" viewBox="0 0 64 64">
+ <defs>
+ <style>
+ .style-puzzle-piece {
+ fill: url('#gradient-linear-puzzle-piece');
+ }
+ </style>
+ <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%">
+ <stop offset="0%" stop-color="#66cc52" stop-opacity="1"/>
+ <stop offset="100%" stop-color="#60bf4c" stop-opacity="1"/>
+ </linearGradient>
+ </defs>
+ <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/addon-install-downloading.svg b/comm/mail/themes/shared/mail/icons/addon-install-downloading.svg
new file mode 100644
index 0000000000..9dcc8069cd
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/addon-install-downloading.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="64" height="64" viewBox="0 0 64 64">
+ <defs>
+ <style>
+ .style-puzzle-piece {
+ fill: url('#gradient-linear-puzzle-piece');
+ }
+ .style-badge-shadow {
+ fill: #0d131a;
+ fill-opacity: .15;
+ }
+ .style-badge-background {
+ fill: #fff;
+ }
+ .style-badge-inside {
+ fill: #55cc3d;
+ }
+ .style-badge-icon {
+ fill: #fff;
+ }
+ </style>
+ <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%">
+ <stop offset="0%" stop-color="#66cc52" stop-opacity="1"/>
+ <stop offset="100%" stop-color="#60bf4c" stop-opacity="1"/>
+ </linearGradient>
+ </defs>
+ <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/>
+ <svg width="32" height="32" x="32" y="0">
+ <ellipse class="style-badge-shadow" rx="14" ry="15" cx="16" cy="17" />
+ <circle class="style-badge-background" r="15" cy="15" cx="16" />
+ <circle class="style-badge-inside" r="12" cy="15" cx="16" />
+ <path class="style-badge-icon" d="M22.7,16.1l-5.6,5.5C16.8,21.9,16.4,22,16,22c-0.4,0-0.7-0.1-1-0.4 l-5.6-5.5C8.8,15.5,8.9,15,9.8,15l3.2,0V9c0-0.6,0.5-1,1.1-1h4c0.6,0,1,0.4,1,1v6h3.2C23.1,15,23.3,15.5,22.7,16.1z"/>
+ </svg>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/addon-install-error.svg b/comm/mail/themes/shared/mail/icons/addon-install-error.svg
new file mode 100644
index 0000000000..e25950f258
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/addon-install-error.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="64" height="64" viewBox="0 0 64 64">
+ <defs>
+ <style>
+ .style-puzzle-piece {
+ fill: url('#gradient-linear-puzzle-piece');
+ }
+ .style-badge-shadow {
+ fill: #0d131a;
+ fill-opacity: .15;
+ }
+ .style-badge-background {
+ fill: #fff;
+ }
+ .style-badge-inside {
+ fill: #e62117;
+ }
+ .style-badge-icon {
+ fill: #fff;
+ }
+ </style>
+ <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%">
+ <stop offset="0%" stop-color="#999999" stop-opacity="1"/>
+ <stop offset="100%" stop-color="#8c8c8c" stop-opacity="1"/>
+ </linearGradient>
+ </defs>
+ <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/>
+ <svg width="32" height="32" x="32" y="0">
+ <ellipse class="style-badge-shadow" rx="14" ry="15" cx="16" cy="17" />
+ <circle class="style-badge-background" r="15" cy="15" cx="16" />
+ <circle class="style-badge-inside" r="12" cy="15" cx="16" />
+ <path class="style-badge-icon" d="M14.9,16.2c0,0,0.1,0.8,1.1,0.8c1,0,1.1-0.8,1.1-0.8 s0.7-3.5,0.8-5.2C18,9.3,18.4,7,16,7s-2,2.4-1.9,4C14.2,12.7,14.9,16.2,14.9,16.2z M16,19c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2 c1.1,0,2-0.9,2-2C18,19.9,17.1,19,16,19z" />
+ </svg>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/addon-install-installed.svg b/comm/mail/themes/shared/mail/icons/addon-install-installed.svg
new file mode 100644
index 0000000000..3b352c21d3
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/addon-install-installed.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="64" height="64" viewBox="0 0 64 64">
+ <defs>
+ <style>
+ .style-puzzle-piece {
+ fill: url('#gradient-linear-puzzle-piece');
+ }
+ .style-badge-shadow {
+ fill: #0d131a;
+ fill-opacity: .15;
+ }
+ .style-badge-background {
+ fill: #fff;
+ }
+ .style-badge-inside {
+ fill: #55cc3d;
+ }
+ .style-badge-icon {
+ fill: #fff;
+ }
+ </style>
+ <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%">
+ <stop offset="0%" stop-color="#66cc52" stop-opacity="1"/>
+ <stop offset="100%" stop-color="#60bf4c" stop-opacity="1"/>
+ </linearGradient>
+ </defs>
+ <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/>
+ <svg width="32" height="32" x="32" y="0">
+ <ellipse class="style-badge-shadow" rx="14" ry="15" cx="16" cy="17" />
+ <circle class="style-badge-background" r="15" cy="15" cx="16" />
+ <circle class="style-badge-inside" r="12" cy="15" cx="16" />
+ <path class="style-badge-icon" d="M22.8,12.3c0,0-6.7,8.1-6.9,8.3c-0.4,0.5-1.5,0.3-1.7,0 c-0.2-0.3-5-5.8-5-5.8c-0.3-0.3-0.3-0.7,0-1l1-1c0.4-0.4,0.9,0,1.2,0.3c0.3,0.4,3.4,3.8,3.4,3.8s5.2-6.1,5.4-6.4 c0.5-0.8,1.6-0.8,1.9-0.5l0.7,0.6C23.1,11.1,23.1,12,22.8,12.3z" />
+ </svg>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/addon-install-warning.svg b/comm/mail/themes/shared/mail/icons/addon-install-warning.svg
new file mode 100644
index 0000000000..bac1903c61
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/addon-install-warning.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="64" height="64" viewBox="0 0 64 64">
+ <defs>
+ <style>
+ .style-puzzle-piece {
+ fill: url('#gradient-linear-puzzle-piece');
+ }
+ .style-badge-shadow {
+ fill: #0d131a;
+ fill-opacity: .15;
+ }
+ .style-badge-background {
+ fill: #fff;
+ }
+ .style-badge-inside {
+ fill: #ffcd02;
+ }
+ .style-badge-icon {
+ fill: #fff;
+ }
+ </style>
+ <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%">
+ <stop offset="0%" stop-color="#999999" stop-opacity="1"/>
+ <stop offset="100%" stop-color="#8c8c8c" stop-opacity="1"/>
+ </linearGradient>
+ </defs>
+ <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/>
+ <svg width="32" height="32" x="32" y="0">
+ <path class="style-badge-shadow" d="M29.5,25.8L18.7,4c-0.6-1.2-1.6-2-2.7-2c-1.1,0-2.1,0.7-2.7,2L2.5,25.8 c-0.6,1.2-0.6,2.5-0.1,3.6C2.9,30.4,4,31,5.2,31h21.6c1.2,0,2.3-0.6,2.8-1.6C30.2,28.4,30.1,27.1,29.5,25.8z" />
+ <path class="style-badge-background" d="M16,0c-1.7,0-3.2,1-4.1,2.7L1.7,21.9c-0.9,1.7-0.9,3.4,0,4.8C2.5,28.2,4.1,29,5.9,29H26 c1.9,0,3.4-0.8,4.3-2.2c0.9-1.4,0.8-3.2,0-4.8L20.1,2.7C19.2,1,17.7,0,16,0L16,0z" />
+ <path class="style-badge-inside" d="M5.9,26c-1.7,0-2.4-1.2-1.6-2.7L14.6,4.1c0.8-1.5,2.1-1.5,2.8,0l10.3,19.3 c0.8,1.5,0.1,2.7-1.6,2.7H5.9z" />
+ <path class="style-badge-icon" d="M14.9,17.6c0,0,0.1,0.7,1.1,0.7c1,0,1.1-0.7,1.1-0.7 s0.7-2.9,0.8-4.2c0.1-1.3,0.5-3.2-1.9-3.2c-2.4,0-2,1.9-1.9,3.2C14.2,14.8,14.9,17.6,14.9,17.6z M16,20c-1.1,0-2,0.9-2,2 c0,1.1,0.9,2,2,2c1.1,0,2-0.9,2-2C18,20.9,17.1,20,16,20z" />
+ </svg>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/address.svg b/comm/mail/themes/shared/mail/icons/address.svg
new file mode 100644
index 0000000000..71a48830b7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/address.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M3 0a2 2 0 00-2 2v1.02c-1.32.11-1.32 1.84 0 1.96v2.04c-1.32.12-1.32 1.85 0 1.96v2.04c-1.32.12-1.32 1.84 0 1.96V14c0 1.1.9 2 2 2h11a2 2 0 002-2V2a2 2 0 00-2-2zm1 2h9a1 1 0 011 1v10a1 1 0 01-1 1H4a1 1 0 01-1-1c1.5 0 1.5-2 0-2V9c1.5 0 1.5-2 0-2V5c1.5 0 1.5-2 0-2a1 1 0 011-1zm9 10c0-3.1-.68-3.36-2.74-3.84C12.51 6.89 11.58 3.46 9 3.5c-2.53.02-3.44 3.36-1.26 4.65C5.68 8.67 5 9.02 5 12z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/anchor.svg b/comm/mail/themes/shared/mail/icons/anchor.svg
new file mode 100644
index 0000000000..f4f8f9f149
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/anchor.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M2 1C.667 1 .667 3 2 3h12c1.33 0 1.33-2 0-2zm1.732 9.14l.618.86H2c-1.241 0-1.258 2 0 2h2.35l-.618.86c-.809 1.02.679 2.26 1.538 1.28L7.801 12 5.27 8.859c-.874-.874-2.281.356-1.538 1.281zM2 5C.667 5 .667 7 2 7h12c1.33 0 1.33-2 0-2zm8 4c-1.333 0-1.333 2 0 2h4c1.33 0 1.33-2 0-2zm0 4c-1.333 0-1.333 2 0 2h4c1.33 0 1.33-2 0-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/app-update-badge.svg b/comm/mail/themes/shared/mail/icons/app-update-badge.svg
new file mode 100644
index 0000000000..3aff78f4a4
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/app-update-badge.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill">
+ <path d="M7.63.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zm3.31 7.38a.62.62 0 0 1-.88 0l-1.81-1.8v5.3a.63.63 0 0 1-1.25 0v-5.3l-1.8 1.8a.63.63 0 0 1-.9-.89L7.3 4h.65l3 3a.63.63 0 0 1 0 .88z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/app-update.svg b/comm/mail/themes/shared/mail/icons/app-update.svg
new file mode 100644
index 0000000000..df68f58851
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/app-update.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"
+ width="32" height="32" viewBox="0 0 32 32">
+ <path stroke="#fff" stroke-width="3px" stroke-linecap="round" d="M 16,9 L 16,24 M 16,9 L 11,14 M 16,9 L 21,14"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/appbutton-badged.svg b/comm/mail/themes/shared/mail/icons/appbutton-badged.svg
new file mode 100644
index 0000000000..b4a7a722ee
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/appbutton-badged.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M3 4h4c1.33 0 1.33-2 0-2H3C1.67 2 1.67 4 3 4zm10 3H3C1.67 7 1.67 9 3 9h10c1.33 0 1.33-2 0-2zm0 5H3c-1.33 0-1.33 2 0 2h10c1.33 0 1.33-2 0-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/appbutton.svg b/comm/mail/themes/shared/mail/icons/appbutton.svg
new file mode 100644
index 0000000000..86f38be5e4
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/appbutton.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M3,4H13a1,1,0,0,0,0-2H3A1,1,0,0,0,3,4ZM13,7H3A1,1,0,0,0,3,9H13a1,1,0,0,0,0-2Zm0,5H3a1,1,0,0,0,0,2H13a1,1,0,0,0,0-2Z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/archive.svg b/comm/mail/themes/shared/mail/icons/archive.svg
new file mode 100644
index 0000000000..abe6b8f598
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/archive.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M3.5 5a.5.5 0 0 1 0-1h9a.5.5 0 1 1 0 1h-9zm1-2a.5.5 0 0 1 0-1h7a.5.5 0 1 1 0 1h-7zM3 6h3a2 2 0 1 0 4 0h3a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm1.535 2H3v5h10V8h-1.535A3.998 3.998 0 0 1 8 10a3.998 3.998 0 0 1-3.465-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/arrow-dropdown.svg b/comm/mail/themes/shared/mail/icons/arrow-dropdown.svg
new file mode 100644
index 0000000000..de2ba56361
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/arrow-dropdown.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M8 11.7c-.26 0-.5-.12-.7-.3l-5-5c-.68-.9.5-2.38 1.4-1.78L8 8.9l4.3-4.28c.9-.68 2.1.88 1.4 1.78l-5 5c-.2.2-.46.3-.7.3z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/attach.svg b/comm/mail/themes/shared/mail/icons/attach.svg
new file mode 100644
index 0000000000..c5efb3bc9c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/attach.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M5 3v9a3 3 0 0 0 6 0V3.5a.5.5 0 1 1 1 0V12a4 4 0 1 1-8 0V3a3 3 0 1 1 6 0v8a2 2 0 1 1-4 0V5.5a.5.5 0 0 1 1 0V11a1 1 0 0 0 2 0V3a2 2 0 1 0-4 0z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/attachment-col.svg b/comm/mail/themes/shared/mail/icons/attachment-col.svg
new file mode 100644
index 0000000000..077f91eaca
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/attachment-col.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+ <path fill="context-fill" d="M11 10V4c0-.28-.22-.5-.5-.5s-.5.22-.5.5v6zM6 5v4H5V5c0-.28.22-.5.5-.5s.5.22.5.5zM3 3c0-1.66 1.34-3 3-3s3 1.34 3 3v6H8V4H4v6H3zm3 6c0 .55.45 1 1 1s1-.45 1-1h1c0 1.1-.9 2-2 2s-2-.9-2-2zm-2 1c0 1.66 1.34 3 3 3s3-1.34 3-3h1c0 2.2-1.8 4-4 4s-4-1.8-4-4zm0-7v1h4V3zm4 0c0-1.1-.9-2-2-2s-2 .9-2 2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/attachment-deleted-large.svg b/comm/mail/themes/shared/mail/icons/attachment-deleted-large.svg
new file mode 100644
index 0000000000..683e94bec6
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/attachment-deleted-large.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+ <path fill="#f60e0e" d="M13.18 16.02l-6.6 6.58c-1.8 1.9.94 4.66 2.84 2.84l6.58-6.6 6.58 6.6c1.9 1.82 4.66-.94 2.84-2.84l-6.6-6.58 6.6-6.6c1.94-1.88-.94-4.76-2.84-2.8L16 13.18l-6.6-6.6c-1.88-1.8-4.64.94-2.8 2.84z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/attachment-deleted.svg b/comm/mail/themes/shared/mail/icons/attachment-deleted.svg
new file mode 100644
index 0000000000..531e8fc435
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/attachment-deleted.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="#f60e0e" d="M6.59 8l-3.3 3.29c-.9.95.47 2.33 1.42 1.42L8 9.41l3.29 3.3c.95.91 2.33-.47 1.42-1.42L9.41 8l3.3-3.3c.97-.94-.47-2.38-1.42-1.4L8 6.58l-3.3-3.3c-.94-.9-2.32.47-1.4 1.42z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/bold.svg b/comm/mail/themes/shared/mail/icons/bold.svg
new file mode 100644
index 0000000000..bd9361600f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/bold.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M3 1a1 1 0 00-1 1v12a1 1 0 001 1h6.5a4.5 4.5 0 002.91-7.93A4 4 0 0013 5a4 4 0 00-4-4H4zm2 3h4a1 1 0 011 1 1 1 0 01-1 1H5zm0 5h4.5a1.5 1.5 0 110 3H5z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/browser-back.svg b/comm/mail/themes/shared/mail/icons/browser-back.svg
new file mode 100644
index 0000000000..b52c06b776
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/browser-back.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M14.375 8 3.048 8l4.308-4.308a.626.626 0 0 0-.885-.885L1 8.281l0 .689 5.472 5.473a.623.623 0 0 0 .884 0 .628.628 0 0 0 0-.885L3.048 9.25l11.327 0a.625.625 0 0 0 0-1.25z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/browser-forward.svg b/comm/mail/themes/shared/mail/icons/browser-forward.svg
new file mode 100644
index 0000000000..2eac6f3ed7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/browser-forward.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="m1.625 8 11.327 0-4.308-4.308a.626.626 0 0 1 .885-.885L15 8.281l0 .689-5.472 5.473a.623.623 0 0 1-.884 0 .628.628 0 0 1 0-.885l4.308-4.308-11.327 0a.625.625 0 0 1 0-1.25z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/bullet-list.svg b/comm/mail/themes/shared/mail/icons/bullet-list.svg
new file mode 100644
index 0000000000..c8fcd69b9b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/bullet-list.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M2.5 1.5A1.5 1.5 0 0 0 1 3a1.5 1.5 0 0 0 1.5 1.5A1.5 1.5 0 0 0 4 3a1.5 1.5 0 0 0-1.5-1.5zM7 2C5.667 2 5.667 4 7 4h6c1.33 0 1.33-2 0-2H7zM2.5 6.5A1.5 1.5 0 0 0 1 8a1.5 1.5 0 0 0 1.5 1.5A1.5 1.5 0 0 0 4 8a1.5 1.5 0 0 0-1.5-1.5zM7 7C5.667 7 5.667 9 7 9h6c1.33 0 1.33-2 0-2H7zm-4.5 4.5A1.5 1.5 0 0 0 1 13a1.5 1.5 0 0 0 1.5 1.5A1.5 1.5 0 0 0 4 13a1.5 1.5 0 0 0-1.5-1.5zM7 12c-1.333 0-1.333 2 0 2h6c1.33 0 1.33-2 0-2H7z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/cancel.svg b/comm/mail/themes/shared/mail/icons/cancel.svg
new file mode 100644
index 0000000000..f47acb22de
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/cancel.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M6.586 8l-2.293 2.293a1 1 0 0 0 1.414 1.414L8 9.414l2.293 2.293a1 1 0 0 0 1.414-1.414L9.414 8l2.293-2.293a1 1 0 1 0-1.414-1.414L8 6.586 5.707 4.293a1 1 0 0 0-1.414 1.414L6.586 8zM8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0z"></path></svg> \ No newline at end of file
diff --git a/comm/mail/themes/shared/mail/icons/center-align.svg b/comm/mail/themes/shared/mail/icons/center-align.svg
new file mode 100644
index 0000000000..0f29d9937a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/center-align.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M2 1C.667 1 .667 3 2 3h12c1.33 0 1.33-2 0-2zm2 4C2.667 5 2.667 7 4 7h8c1.33 0 1.33-2 0-2zM2 9C.667 9 .667 11 2 11h12c1.33 0 1.33-2 0-2zm1 4c-1.333 0-1.333 2 0 2h10c1.33 0 1.33-2 0-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/cert-error.svg b/comm/mail/themes/shared/mail/icons/cert-error.svg
new file mode 100644
index 0000000000..134944525f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/cert-error.svg
@@ -0,0 +1,31 @@
+<!-- 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/. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="45" height="45" viewBox="0 0 45 45">
+ <style>
+ .icon-default {
+ fill: #999;
+ }
+ </style>
+ <defs>
+ <rect id="shape-lock-clasp-outer" x="8" y="2" width="28" height="40" rx="14" ry="14" />
+ <rect id="shape-lock-clasp-inner" x="14" y="8" width="16" height="28" rx="8" ry="8" />
+ <rect id="shape-lock-base" x="4" y="18" width="36" height="24" rx="3" ry="3" />
+ <mask id="mask-clasp-cutout">
+ <rect width="48" height="48" fill="#000" />
+ <use xlink:href="#shape-lock-clasp-outer" fill="#fff" />
+ <use xlink:href="#shape-lock-clasp-inner" fill="#000" />
+ <line x1="4" y1="38" x2="41" y2="3" stroke="#000" stroke-width="5.5" />
+ <line x1="4" y1="46" x2="41" y2="11" stroke="#000" stroke-width="5.5" />
+ <rect x="4" y="18" width="36" height="26" rx="6" ry="6" />
+ </mask>
+ <mask id="mask-base-cutout">
+ <rect width="45" height="45" fill="#000" />
+ <use xlink:href="#shape-lock-base" fill="#fff" />
+ <line x1="2.5" y1="41.5" x2="41" y2="5" stroke="#000" stroke-width="8.5" />
+ </mask>
+ </defs>
+ <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" fill="#999" />
+ <use xlink:href="#shape-lock-base" mask="url(#mask-base-cutout)" fill="#999" />
+ <line x1="2.5" y1="41.5" x2="41" y2="5" stroke="#d92d21" stroke-width="5.5" />
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/chat.svg b/comm/mail/themes/shared/mail/icons/chat.svg
new file mode 100644
index 0000000000..84fa9763b9
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/chat.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M12 16a1 1 0 0 1-.77-.37L8.26 12H2.42A2.43 2.43 0 0 1 0 9.58V3.42A2.43 2.43 0 0 1 2.42 1h11.16A2.43 2.43 0 0 1 16 3.42v6.16A2.43 2.43 0 0 1 13.58 12H13v3a1 1 0 0 1-1 1zM2.42 3a.42.42 0 0 0-.42.42v6.16c0 .232.188.42.42.42h6.31a1 1 0 0 1 .77.37l1.5 1.82V11a1 1 0 0 1 1-1h1.58a.42.42 0 0 0 .42-.42V3.42a.42.42 0 0 0-.42-.42H2.42z"/>
+ <path fill="context-fill" fill-opacity="context-stroke-opacity" d="M2.42 3a.42.42 0 0 0-.42.42v6.16c0 .232.188.42.42.42h6.31a1 1 0 0 1 .77.37l1.5 1.82V11c0-.55.45-1 1-1h1.58c.23 0 .42-.188.42-.42V3.42c0-.232-.19-.42-.42-.42z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/checkbox.svg b/comm/mail/themes/shared/mail/icons/checkbox.svg
new file mode 100644
index 0000000000..0d94782d98
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/checkbox.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <rect fill="none" stroke="context-stroke" stroke-opacity="1" width="15" height="15" x="0.5" y="0.5" rx="2" ry="2" />
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M6 14a1 1 0 0 1-.7-.3l-3-3a1 1 0 0 1 1.4-1.4l2.16 2.15 6.32-9.02a1 1 0 0 1 1.64 1.14l-7 10a1 1 0 0 1-.73.43.86.86 0 0 1-.09 0z"/>
+ <path fill="context-fill" fill-opacity="context-stroke-opacity" d="M 2,7 H 14 V 9 H 2 Z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/collapse.svg b/comm/mail/themes/shared/mail/icons/collapse.svg
new file mode 100644
index 0000000000..b721d38203
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/collapse.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="m3.293 7.293a1 1 0 0 0 0 1.414l5 5a1 1 0 0 0 1.414-1.414l-3.293-3.293h8.586a1 1 0 1 0 0-2h-8.586l3.293-3.293a1 1 0 0 0-1.414-1.414zm-1.293 5.707v-10a1 1 0 0 0-2 0v10a1 1 0 0 0 2 0z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/compact.svg b/comm/mail/themes/shared/mail/icons/compact.svg
new file mode 100644
index 0000000000..20fb907707
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/compact.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M9 15v-2.5a.5.5 0 1 1 1 0V15h1.82l-.667-4H4.847l-.667 4H6v-2.5a.5.5 0 1 1 1 0V15h2zm3.004 1h-8a1 1 0 0 1-.98-1.2L4 10c0-1.864 2.5-3 3-3V1a1 1 0 1 1 2 0v6c.5 0 3 1.136 3 3l.983 4.8a1 1 0 0 1-.98 1.2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/connection-insecure.svg b/comm/mail/themes/shared/mail/icons/connection-insecure.svg
new file mode 100644
index 0000000000..1d558a2dd9
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/connection-insecure.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path d="M12.5 6.984h-.484L4 15h8.5a1.5 1.5 0 0 0 1.5-1.5V8.484a1.5 1.5 0 0 0-1.5-1.5zm-6.5 0V5a2 2 0 0 1 4 0v1l1.892-1.892A4 4 0 0 0 4 5v1.984h-.5a1.5 1.5 0 0 0-1.5 1.5V13.5a1.483 1.483 0 0 0 .07.43l6.946-6.946z" fill="context-fill"/>
+ <path d="M2 15a1 1 0 0 1-.707-1.707l12-12a1 1 0 0 1 1.414 1.414l-12 12A1 1 0 0 1 2 15z" fill="#ff0039"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/connection-mixed.svg b/comm/mail/themes/shared/mail/icons/connection-mixed.svg
new file mode 100644
index 0000000000..9238cdc18b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/connection-mixed.svg
@@ -0,0 +1,9 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path d="M8 1a4 4 0 0 0-4 4v1.984h-.5a1.5 1.5 0 0 0-1.5 1.5V13.5A1.5 1.5 0 0 0 3.5 15h2.535a2.274 2.274 0 0 1 .207-1.318L9.43 7.27a2.266 2.266 0 0 1 .2-.286H6V5a2 2 0 0 1 4 0v1.568A2.255 2.255 0 0 1 11.478 6a2.283 2.283 0 0 1 .522.073V5a4 4 0 0 0-4-4z" fill="context-fill"/>
+ <path d="M15.818 14.127l-3.189-6.411a1.285 1.285 0 0 0-2.3 0l-3.192 6.411A1.294 1.294 0 0 0 8.289 16h6.377a1.294 1.294 0 0 0 1.152-1.873z" fill="#ffbf00"/>
+ <path d="M11.478 8a.272.272 0 0 1 .256.161l3.188 6.412a.291.291 0 0 1-.013.291.275.275 0 0 1-.243.137H8.289a.275.275 0 0 1-.243-.137.29.29 0 0 1-.013-.291l3.188-6.412A.272.272 0 0 1 11.478 8m0-1a1.272 1.272 0 0 0-1.152.716l-3.189 6.411A1.294 1.294 0 0 0 8.289 16h6.377a1.294 1.294 0 0 0 1.152-1.873l-3.189-6.411A1.272 1.272 0 0 0 11.478 7z" fill="#d76e00" opacity=".35"/>
+ <path d="M11.5 12a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-1 0v2a.5.5 0 0 0 .5.5zm0 .809a.691.691 0 1 0 .691.691.691.691 0 0 0-.691-.691z" fill="#fff"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/connection-secure.svg b/comm/mail/themes/shared/mail/icons/connection-secure.svg
new file mode 100644
index 0000000000..7636448b3a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/connection-secure.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" d="M12,7 L13,7 C13.5522847,7 14,7.44771525 14,8 L14,14 C14,14.5522847 13.5522847,15 13,15 L3,15 C2.44771525,15 2,14.5522847 2,14 L2,8 C2,7.44771525 2.44771525,7 3,7 L4,7 L4,5.00032973 C4,2.79202307 5.79321704,1 8,1 C10.2075938,1 12,2.79481161 12,5.00032973 L12,7 Z M10,7 L10,5.00032973 C10,3.89878113 9.10242341,3 8,3 C6.89748845,3 6,3.89689088 6,5.00032973 L6,7 L10,7 Z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/contact-generic.svg b/comm/mail/themes/shared/mail/icons/contact-generic.svg
new file mode 100644
index 0000000000..1600b8fa2a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/contact-generic.svg
@@ -0,0 +1,15 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150" viewBox="0 0 150 150">
+ <defs>
+ <linearGradient gradientUnits="userSpaceOnUse" y2="33" x2="1" y1="53" x1="62" id="lg1" xlink:href="#lg2"/>
+ <linearGradient id="lg2">
+ <stop offset="0" stop-color="#a7a7a7" stop-opacity="1"/>
+ <stop offset="1" stop-color="#a7a7a7" stop-opacity="0.15"/>
+ </linearGradient>
+ </defs>
+ <rect fill="#ffffff" y="0" x="0" height="150" width="150"/>
+ <rect fill="url(#lg1)" y="8" x="8" height="134" width="134"/>
+ <path fill="#000000" d="M8 142v-11L53 111.8c1.7-4.8 2.2-9.7-.4-16.3C49 92.1 47.3 86 46.3 80a40.3 40.3 0 01-6.9-22.5c.2-1.9 3.1-3.3 4.6 0-1-8.5-.6-17 1.2-25.2l2.7 2.3 13.9-17.7-.6 6.6 17.3-4.3L95 23.9l-2.5 2.8 17.8 6.4-8.5 2.6 6.7 9.7-5 .3c1 4.2.8 8 .3 12 1.3-1.3 3.7-2.3 3.9 1.2-.1 8-2.8 20.1-6 20.3a25 25 0 01-7.2 16.2 40.5 40.5 0 00-.5 16.8l48 20v10z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/contact.svg b/comm/mail/themes/shared/mail/icons/contact.svg
new file mode 100644
index 0000000000..1b4b6f7d35
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/contact.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M5.81 8.35a4 4 0 114.38 0A7 7 0 0115 15H1a7 7 0 014.81-6.65zM8 7a2 2 0 100-4 2 2 0 000 4zm0 3a5 5 0 00-4.58 3h9.16A5 5 0 008 10z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/conversation.svg b/comm/mail/themes/shared/mail/icons/conversation.svg
new file mode 100644
index 0000000000..f73088ec83
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/conversation.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M16 9.671a4.509 4.509 0 0 0-2-1.415V5c0-.1 0-.2-.1-.3 0 .1 0 .2-.1.2l-5.5 4c-.1.1-.2.1-.3.1-.1 0-.2 0-.3-.1l-5.5-4c-.1 0-.2 0-.2-.1V11c0 .6.4 1 1 1h5.027a4.55 4.55 0 0 0 .23 2H3c-1.7 0-3-1.3-3-3V5c0-1.7 1.3-3 3-3h10c1.7 0 3 1.3 3 3v4.671zM13 4H3c-.1 0-.2 0-.3.1h.1L8 7.9l5.2-3.8h.1c-.1-.1-.2-.1-.3-.1z"/>
+ <path d="M12.5 16a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm2.354-2.146A.498.498 0 0 0 14.5 13h-4a.5.5 0 1 0 0 1h2.793l-.147.146a.5.5 0 0 0 .708.708l1-1zm-4.708-2.708A.498.498 0 0 0 10.5 12h4a.5.5 0 1 0 0-1h-2.793l.147-.146a.5.5 0 0 0-.708-.708l-1 1z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/correspondents-rtl.svg b/comm/mail/themes/shared/mail/icons/correspondents-rtl.svg
new file mode 100644
index 0000000000..15ecf13250
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/correspondents-rtl.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M13 7H5.41l2.3-2.3c.9-.94-.47-2.32-1.42-1.4l-4 4a1 1 0 000 1.4l4 4.01c.95.91 2.33-.47 1.42-1.42L5.4 9H13c1.33 0 1.33-2 0-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/correspondents.svg b/comm/mail/themes/shared/mail/icons/correspondents.svg
new file mode 100644
index 0000000000..b4e6299af0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/correspondents.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M13.71 7.3l-4-4c-.95-.92-2.33.47-1.42 1.4L10.6 7H3C1.67 7 1.67 9 3 9h7.59l-2.3 2.29c-.97.95.48 2.39 1.42 1.42l4-4a1 1 0 000-1.42z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/cut.svg b/comm/mail/themes/shared/mail/icons/cut.svg
new file mode 100644
index 0000000000..e0e685c4c1
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/cut.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M11.5 10a2.481 2.481 0 0 0-.379.038L3.977 1.214a2.5 2.5 0 0 0-.371 3.515l2.789 3.444-1.51 1.866A2.486 2.486 0 0 0 4.5 10a2.522 2.522 0 1 0 2.329 1.609L8 10.159 9.172 11.6A2.5 2.5 0 1 0 11.5 10zm-7 3.75a1.25 1.25 0 1 1 1.25-1.25 1.251 1.251 0 0 1-1.25 1.25zm7 0a1.25 1.25 0 1 1 1.25-1.25 1.251 1.251 0 0 1-1.25 1.25zm.9-9.021a2.5 2.5 0 0 0-.371-3.515L8.5 5.569l1.608 1.986z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/decrease.svg b/comm/mail/themes/shared/mail/icons/decrease.svg
new file mode 100644
index 0000000000..3e76de2fbe
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/decrease.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M10 10l3 4.5 3-4.5zM1 4a1 1 0 100 2h3v8c0 .55.45 1 1 1s.93-.45 1-1V6h3a1 1 0 100-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/delete-col.svg b/comm/mail/themes/shared/mail/icons/delete-col.svg
new file mode 100644
index 0000000000..de9c226249
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/delete-col.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M6.5 2.01c-.67 0-1.34.31-1.5.99H3C1.67 3 1.67 5 3 5v5c0 1 1 2 2 2h3c1 0 2-1 2-2V5c1.33 0 1.33-2 0-2H8c-.16-.64-.83-.98-1.5-.99zM5.5 5c.25 0 .5.17.5.5v4a.5.5 0 01-1 0v-4c0-.33.25-.5.5-.5zm1.98 0c.25 0 .5.17.5.5v4a.5.5 0 01-1 0v-4c0-.33.25-.5.5-.5z"/>
+</svg> \ No newline at end of file
diff --git a/comm/mail/themes/shared/mail/icons/delete.svg b/comm/mail/themes/shared/mail/icons/delete.svg
new file mode 100644
index 0000000000..1a5dc2c023
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/delete.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M6.5 12a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 0 .5.5zm2 0a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 0 .5.5zm2 0a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 0 .5.5z"/>
+ <path d="M14 2h-3.05a2.5 2.5 0 0 0-4.9 0H3a1 1 0 0 0 0 2v9a3 3 0 0 0 3 3h5a3 3 0 0 0 3-3V4a1 1 0 0 0 0-2zM8.5 1a1.489 1.489 0 0 1 1.391 1H7.109A1.489 1.489 0 0 1 8.5 1zM12 13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4h7z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/developer.svg b/comm/mail/themes/shared/mail/icons/developer.svg
new file mode 100644
index 0000000000..c2496a1f44
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/developer.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" d="M14.555 3.2l-2.434 2.436a1.243 1.243 0 1 1-1.757-1.757L12.8 1.445A3.956 3.956 0 0 0 11 1a3.976 3.976 0 0 0-3.434 6.02l-6.273 6.273a1 1 0 1 0 1.414 1.414L8.98 8.434A3.96 3.96 0 0 0 11 9a4 4 0 0 0 4-4 3.956 3.956 0 0 0-.445-1.8z"></path>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/download.svg b/comm/mail/themes/shared/mail/icons/download.svg
new file mode 100644
index 0000000000..f61d718648
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/download.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" d="M7.3 13.92a1 1 0 0 0 1.4 0l5-5a1 1 0 0 0-1.4-1.4L9 10.8V2.2a1 1 0 0 0-2 0v8.6L3.7 7.5a1 1 0 0 0-1.4 1.4l5 5z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/empty-search-results.svg b/comm/mail/themes/shared/mail/icons/empty-search-results.svg
new file mode 100644
index 0000000000..29286aeb50
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/empty-search-results.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 185 185" width="185px" height="185px">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M74.8 1.08a71.6 70.98 0 0 0-61 30.12A76.91 76.91 0 0 0 1 73.33a72.34 71.72 0 0 0 72.2 71.54c14.4 0 28.8-4.78 41.6-12.73l49.8 49.29c4.8 4.76 12 4.76 16.8 0a11.64 11.54 0 0 0 0-16.69l-49.8-50.09A72.16 71.54 0 0 0 114.8 14.5 73.44 72.8 0 0 0 74.8 1Zm-1.6 24.57c26.4 0 48 21.45 48 47.68a48.2 47.78 0 0 1-48 47.69A48.24 47.82 0 0 1 25 73.33a48.24 47.82 0 0 1 48.2-47.68ZM50.8 58.38 66 73.73 50.8 88.97c-5 4.78 2.4 11.94 7.2 7.16l15.2-15.32 14.4 15.24c4.8 4.7 12-2.46 7.2-7.15L80.4 73.65l15.2-15.27c4-4.68-2.4-11.04-7.2-7.08L73.2 66.57 58 51.3c-5.6-3.73-10.4 2.16-7.2 7.08z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/encryption-key.svg b/comm/mail/themes/shared/mail/icons/encryption-key.svg
new file mode 100644
index 0000000000..ab5432bb57
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/encryption-key.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M12 4a4 4 0 0 0-3.86 3H1a1 1 0 0 0 0 2v1a1 1 0 0 0 2 0V9h1v1a1 1 0 0 0 2 0V9h2.14A4 4 0 1 0 12 4zm0 6a2 2 0 1 1 2-2 2 2 0 0 1-2 2z"></path></svg> \ No newline at end of file
diff --git a/comm/mail/themes/shared/mail/icons/exclude.svg b/comm/mail/themes/shared/mail/icons/exclude.svg
new file mode 100644
index 0000000000..dcd05894c3
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/exclude.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16px" height="16px">
+ <path d="M 10.508 3.674 C 9.77 3.246 8.914 3 8 3 C 5.24 3 3 5.24 3 8 L 3 8 C 3 8.914 3.246 9.77 3.674 10.508 L 10.508 3.674 Z M 12.326 5.492 C 12.754 6.23 13 7.086 13 8 C 13 10.76 10.76 13 8 13 C 7.086 13 6.23 12.754 5.492 12.326 L 12.326 5.492 Z M 1 8 C 1 4.137 4.137 1 8 1 C 11.863 1 15 4.137 15 8 C 15 11.863 11.863 15 8 15 C 4.137 15 1 11.863 1 8 L 1 8 Z" fill-rule="evenodd" fill="context-fill"/>
+</svg> \ No newline at end of file
diff --git a/comm/mail/themes/shared/mail/icons/feeds-folder.svg b/comm/mail/themes/shared/mail/icons/feeds-folder.svg
new file mode 100644
index 0000000000..dd0179007a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/feeds-folder.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" d="M2 1a2 2 0 00-2 2v10c0 1.1.9 2 2 2h12a2 2 0 002-2V5a2 2 0 00-2-2H8.15L6.58 1.54A2 2 0 005.22 1H2zm0 2h3.22L6.3 4H2V3zm6 1.99l.15.01H14v8H2V5h6v-.01zM5 5.5a.5.5 0 000 1 5.44 5.44 0 015.5 5.5.5.5 0 001 0A6.43 6.43 0 005 5.5zm0 2a.5.5 0 000 1A3.46 3.46 0 018.5 12a.5.5 0 001 0A4.45 4.45 0 005 7.5zm.75 2.5A1.25 1.25 0 107 11.25 1.25 1.25 0 005.75 10z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/feeds.svg b/comm/mail/themes/shared/mail/icons/feeds.svg
new file mode 100644
index 0000000000..b07091fa92
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/feeds.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity"><path d="M3.5 10A2.5 2.5 0 1 0 6 12.5 2.5 2.5 0 0 0 3.5 10zM2 1a1 1 0 0 0 0 2 10.883 10.883 0 0 1 11 11 1 1 0 0 0 2 0A12.862 12.862 0 0 0 2 1zm0 4a1 1 0 0 0 0 2 6.926 6.926 0 0 1 7 7 1 1 0 0 0 2 0 8.9 8.9 0 0 0-9-9z"></path></svg>
diff --git a/comm/mail/themes/shared/mail/icons/file-item.svg b/comm/mail/themes/shared/mail/icons/file-item.svg
new file mode 100644
index 0000000000..c01f14d1be
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/file-item.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M13 0H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1zm-2.5-9h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zm0 2h-5a.5.5 0 0 0 0 1h5a.5.5 0 1 0 0-1zm0 2h-5a.5.5 0 0 0 0 1h5a.5.5 0 1 0 0-1zm-3 2h-2a.5.5 0 0 0 0 1h2a.5.5 0 1 0 0-1z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/file.svg b/comm/mail/themes/shared/mail/icons/file.svg
new file mode 100644
index 0000000000..b7268c328d
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/file.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M7.293 12.707a1 1 0 0 0 1.414 0l5-5a1 1 0 0 0-1.414-1.414L9 9.586V1a1 1 0 1 0-2 0v8.586L3.707 6.293a1 1 0 0 0-1.414 1.414zM13 14H3a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/filter.svg b/comm/mail/themes/shared/mail/icons/filter.svg
new file mode 100644
index 0000000000..ad403b2a96
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/filter.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M3 3l4 5v5h2V8l4-5H3zm8 5.702V13a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8.702L1.438 4.249C.391 2.94 1.323 1 3 1h10c1.677 0 2.61 1.94 1.562 3.25L11 8.701z"/>
+ <path fill-opacity=".3" d="M4.5 5h7L9 8v5H7V8z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/fingerprint.svg b/comm/mail/themes/shared/mail/icons/fingerprint.svg
new file mode 100644
index 0000000000..f28ff18706
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/fingerprint.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity"><path d="M8 0a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 8.24 8.24 0 0 1-1.14 4.28A5.75 5.75 0 0 0 11 14a1 1 0 0 0 2 0 3.91 3.91 0 0 1 .63-1.79A10.18 10.18 0 0 0 15 7a7 7 0 0 0-7-7z"></path><path d="M8 3a4 4 0 0 0-4 4 2 2 0 0 1-2 2 1 1 0 0 0 0 2 4 4 0 0 0 4-4 2 2 0 0 1 4 0 6.88 6.88 0 0 1-1.74 4.8 11 11 0 0 0-1.15 1.75 1 1 0 0 0 .44 1.34A.93.93 0 0 0 8 15a1 1 0 0 0 .89-.55 9.74 9.74 0 0 1 1-1.44A8.84 8.84 0 0 0 12 7a4 4 0 0 0-4-4z"></path><path d="M8 6a1 1 0 0 0-1 1c0 4.21-5.26 6-5.32 6.05a1 1 0 0 0-.63 1.27A1 1 0 0 0 2 15a1.25 1.25 0 0 0 .32 0C2.59 14.86 9 12.66 9 7a1 1 0 0 0-1-1z"></path></svg> \ No newline at end of file
diff --git a/comm/mail/themes/shared/mail/icons/flag-col.svg b/comm/mail/themes/shared/mail/icons/flag-col.svg
new file mode 100644
index 0000000000..ddc3614c7c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/flag-col.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="context-fill">
+ <path d="M9.3 11L6 9.34l-3.26 1.63.77-3.61L.87 4.98l3.57-.47L6.06.89l1.45 3.59 3.62.5-2.46 2.45z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/flagged.svg b/comm/mail/themes/shared/mail/icons/flagged.svg
new file mode 100644
index 0000000000..e0f1e15412
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/flagged.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-stroke" fill-opacity="context-stroke-opacity" d="M8 2l2 4 4 .7-3 2.58L12 14l-4-2-4 2 1-4.72L2 6.7 6 6z"/>
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.95 6.3a1.06 1.06 0 00-.84-.71l-3.58-.52-1.6-3.26a1.08 1.08 0 00-1.86 0l-1.6 3.26-3.58.52a1.05 1.05 0 00-.57 1.8L3.9 9.91l-.6 3.58c-.16.85.74 1.51 1.5 1.1L8 12.91l3.2 1.7c.15.12.31.12.49.12.22 0 .43-.12.6-.21.33-.24.48-.62.42-1.02l-.6-3.59 2.59-2.53c.28-.28.38-.7.25-1.08zm-5.1 2.88l.45 2.57L8 10.54l-2.3 1.21.44-2.57L4.3 7.36 6.86 7 8 4.65l1.15 2.34 2.56.37z"/>
+</svg> \ No newline at end of file
diff --git a/comm/mail/themes/shared/mail/icons/folder-local.svg b/comm/mail/themes/shared/mail/icons/folder-local.svg
new file mode 100644
index 0000000000..4533451d60
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/folder-local.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" width="16" height="16" viewBox="0 0 16 16">
+ <path d="M14 3H8.151L6.584 1.538A2 2 0 0 0 5.219 1H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM5.219 3l1.072 1H2V3zM14 13H2V5h6v-.014c.05 0 .1.014.151.014H14z"/>
+ <path fill-opacity=".3" d="M 14,13 H 2 V 5 h 12 z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/folder-new-indicator.svg b/comm/mail/themes/shared/mail/icons/folder-new-indicator.svg
new file mode 100644
index 0000000000..3de1d7faca
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/folder-new-indicator.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
+ <circle r="3" cy="4" cx="4" fill="#ffe900" stroke="#ff9400" stroke-width="1.5"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/folder.svg b/comm/mail/themes/shared/mail/icons/folder.svg
new file mode 100644
index 0000000000..6738ad6749
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/folder.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" d="M13 4H7.85L6.38 2.54A1.93 1.93 0 005.02 2H2a2 2 0 00-2 2v9c0 1.1.9 2 2 2h11a2 2 0 002-2V6a2 2 0 00-2-2zM5 4l1 1H2V4zm8 9H2V6h5.8v-.01c0-.05.1.01.15.01H13z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/forget.svg b/comm/mail/themes/shared/mail/icons/forget.svg
new file mode 100644
index 0000000000..56b9c0b057
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/forget.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M6.854 10.854l2-2A.5.5 0 0 0 9 8.5v-4a.5.5 0 0 0-1 0v3.793l-1.854 1.853a.5.5 0 1 0 .707.707zM8 0a8.011 8.011 0 0 0-7 4.184V1.5a.5.5 0 0 0-1 0v5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 0-1H2.344a.938.938 0 0 0 .056-.085 6 6 0 1 1 0 4.184 1 1 0 0 0-1.873.7A7.991 7.991 0 1 0 8 0z"></path></svg> \ No newline at end of file
diff --git a/comm/mail/themes/shared/mail/icons/format-dropmarker.svg b/comm/mail/themes/shared/mail/icons/format-dropmarker.svg
new file mode 100644
index 0000000000..d1f1e2a01b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/format-dropmarker.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="6" viewBox="0 0 8 6">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M4 5.8c-.26 0-.5-.12-.7-.3l-3-3C-.38 1.6.8.12 1.7.72L4 3 6.3.72c.9-.68 2.1.88 1.4 1.78l-3 3a1 1 0 0 1-.7.3z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/forward-redirect.svg b/comm/mail/themes/shared/mail/icons/forward-redirect.svg
new file mode 100644
index 0000000000..07806bd2df
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/forward-redirect.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M12.21 5h-2.15c-1.1 0-1.92-.11-2.66.48-.32.25-.34.24-.63.53-.95.96-2.38-.48-1.41-1.42.3-.33.49-.4.79-.67 1.07-.86 2.34-.94 3.93-.92h2.16l-.94-1.16c-1-1.03.69-2.44 1.53-1.28L15.66 4l-2.83 3.44c-.86.9-2.26-.27-1.53-1.28z"/>
+ <path fill="context-stroke" fill-opacity="context-fill-opacity" d="M12.44 8.16c-.76-.03-1.48.91-.81 1.68L13.36 12l-1.73 2.16c-.8 1.02.68 2.26 1.53 1.28L16 12l-2.84-3.44a.97.97 0 00-.72-.4zm-4.19.04c-.74-.01-1.42.88-.82 1.64L8.35 11H6.19c-.96.03-1.9-.3-2.65-.92-.32-.25-.54-.5-.83-.8-.95-.96-2.4.48-1.42 1.43.3.33.7.66 1 .93 1.1.9 2.49 1.4 3.91 1.36h2.17l-.95 1.16c-.9 1.03.69 2.35 1.54 1.28L11.8 12 8.97 8.56a.97.97 0 00-.72-.36z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/forward.svg b/comm/mail/themes/shared/mail/icons/forward.svg
new file mode 100644
index 0000000000..09772f53e2
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/forward.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M10.35 9.017c-1.263.006-2.315.004-3.156-.003-1.092-.01-1.922.314-2.657.905a6.041 6.041 0 0 0-.45.404c-.09.088-.362.367-.38.384a1 1 0 1 1-1.414-1.414c.004-.004.286-.292.393-.397.199-.196.39-.368.598-.535 1.076-.866 2.344-1.362 3.929-1.347.839.008 1.894.009 3.166.003L9.232 5.64a1 1 0 1 1 1.536-1.28L13.802 8l-3.034 3.64a1 1 0 0 1-1.536-1.28l1.119-1.343z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/founder.png b/comm/mail/themes/shared/mail/icons/founder.png
new file mode 100644
index 0000000000..aca3a925c6
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/founder.png
Binary files differ
diff --git a/comm/mail/themes/shared/mail/icons/get-all.svg b/comm/mail/themes/shared/mail/icons/get-all.svg
new file mode 100644
index 0000000000..8427692084
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/get-all.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M8 0c-.5 0-1 .33-1 1v8.59l-3.3-3.3c-.94-.9-2.32.47-1.4 1.42l5 5a1 1 0 001.4 0l5.01-5c.91-.95-.47-2.33-1.42-1.42L9 9.6V1c0-.67-.5-1-1-1z"/><path d="M14 11a1 1 0 00-1 1v1a1 1 0 01-1 1H4a1 1 0 01-1-1v-1c0-1.33-2-1.33-2 0v1a3 3 0 003 3h8a3 3 0 003-3v-1a1 1 0 00-1-1z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/getmsg.svg b/comm/mail/themes/shared/mail/icons/getmsg.svg
new file mode 100644
index 0000000000..5161709ff3
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/getmsg.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M10.3 11.3L9 12.58V8a1 1 0 00-2 0v4.59l-1.3-1.3a1 1 0 00-1.4 1.42l3 3a1 1 0 001.4 0l3-3a1 1 0 00-1.4-1.42zM2.5 10H5c1.33 0 1.33-2 0-2H2.5a.5.5 0 01-.5-.5v-5c0-.28.23-.5.5-.5h11c.28 0 .5.22.5.5v5a.5.5 0 01-.5.5H11c-1.33 0-1.33 2 0 2h2.5A2.5 2.5 0 0016 7.5v-5A2.5 2.5 0 0013.5 0h-11A2.5 2.5 0 000 2.5v5A2.5 2.5 0 002.5 10z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/globe-secure.svg b/comm/mail/themes/shared/mail/icons/globe-secure.svg
new file mode 100644
index 0000000000..8f6c73dc0f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/globe-secure.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M8 0A8 8 0 00-.03 8.86a8.06 8.06 0 008.96 7.11A5.1 5.1 0 017.68 14c-1.48-.75-1.88-1.81-2.24-2.96h2.41c.07-.37.18-.74.32-1.08H5.17c-.23-1.3-.23-2.62 0-3.92h5.65c.1.49.14.88.16 1.37.32-.12.65-.2.98-.22 0-.42-.1-.74-.12-1.15h1.82c.19.55.29.9.32 1.49.77.4 1.42 1.3 1.84 2.15A8 8 0 008 0zm0 2c1.07 0 2.04 1.2 2.57 2.96H5.43C5.96 3.2 6.93 2 8 2zm-2.56.58a7.7 7.7 0 00-1.05 2.38H2.84a6.03 6.03 0 012.6-2.38zm5.12 0a6.05 6.05 0 012.6 2.38h-1.55a7.7 7.7 0 00-1.05-2.38zM2.34 6.04h1.82c-.2 1.3-.2 2.62 0 3.92H2.34a5.98 5.98 0 010-3.92zm.5 5h1.55c.21.85.57 1.65 1.05 2.38a6.08 6.08 0 01-2.6-2.38z"/>
+ <path d="M14 11h.56c.24 0 .44.2.44.44v3.12c0 .24-.2.44-.44.44H9.44a.44.44 0 01-.44-.44v-3.12c0-.24.2-.44.44-.44H10v-.84c0-2.6 4-2.63 4 0zm-1 0v-.84c0-1.17-2-1.17-2 0V11z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/globe.svg b/comm/mail/themes/shared/mail/icons/globe.svg
new file mode 100644
index 0000000000..1a51482293
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/globe.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" d="M8 0a8 8 0 1 0 8 8 8.009 8.009 0 0 0-8-8zm5.163 4.958h-1.552a7.7 7.7 0 0 0-1.051-2.376 6.03 6.03 0 0 1 2.603 2.376zM14 8a5.963 5.963 0 0 1-.335 1.958h-1.821A12.327 12.327 0 0 0 12 8a12.327 12.327 0 0 0-.156-1.958h1.821A5.963 5.963 0 0 1 14 8zm-6 6c-1.075 0-2.037-1.2-2.567-2.958h5.135C10.037 12.8 9.075 14 8 14zM5.174 9.958a11.084 11.084 0 0 1 0-3.916h5.651A11.114 11.114 0 0 1 11 8a11.114 11.114 0 0 1-.174 1.958zM2 8a5.963 5.963 0 0 1 .335-1.958h1.821a12.361 12.361 0 0 0 0 3.916H2.335A5.963 5.963 0 0 1 2 8zm6-6c1.075 0 2.037 1.2 2.567 2.958H5.433C5.963 3.2 6.925 2 8 2zm-2.56.582a7.7 7.7 0 0 0-1.051 2.376H2.837A6.03 6.03 0 0 1 5.44 2.582zm-2.6 8.46h1.549a7.7 7.7 0 0 0 1.051 2.376 6.03 6.03 0 0 1-2.603-2.376zm7.723 2.376a7.7 7.7 0 0 0 1.051-2.376h1.552a6.03 6.03 0 0 1-2.606 2.376z"></path>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/goback.svg b/comm/mail/themes/shared/mail/icons/goback.svg
new file mode 100644
index 0000000000..81f28f533a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/goback.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M15 7H3.414l4.293-4.293a1 1 0 0 0-1.414-1.414l-6 6a1 1 0 0 0 0 1.414l6 6a1 1 0 0 0 1.414-1.414L3.414 9H15a1 1 0 0 0 0-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/goforward.svg b/comm/mail/themes/shared/mail/icons/goforward.svg
new file mode 100644
index 0000000000..9075cb58f1
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/goforward.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M15.707 7.293l-6-6a1 1 0 0 0-1.414 1.414L12.586 7H1a1 1 0 0 0 0 2h11.586l-4.293 4.293a1 1 0 1 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/half-operator.png b/comm/mail/themes/shared/mail/icons/half-operator.png
new file mode 100644
index 0000000000..2e89f37b31
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/half-operator.png
Binary files differ
diff --git a/comm/mail/themes/shared/mail/icons/help.svg b/comm/mail/themes/shared/mail/icons/help.svg
new file mode 100644
index 0000000000..737218ce17
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/help.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" d="M8 1a7 7 0 1 0 7 7 7.008 7.008 0 0 0-7-7zm0 13a6 6 0 1 1 6-6 6.007 6.007 0 0 1-6 6zM8 3.125A2.7 2.7 0 0 0 5.125 6a.875.875 0 0 0 1.75 0c0-1 .6-1.125 1.125-1.125a1.105 1.105 0 0 1 1.13.744.894.894 0 0 1-.53 1.016A2.738 2.738 0 0 0 7.125 9v.337a.875.875 0 0 0 1.75 0v-.37a1.041 1.041 0 0 1 .609-.824A2.637 2.637 0 0 0 10.82 5.16 2.838 2.838 0 0 0 8 3.125zm0 7.625A1.25 1.25 0 1 0 9.25 12 1.25 1.25 0 0 0 8 10.75z"></path>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/hidden.svg b/comm/mail/themes/shared/mail/icons/hidden.svg
new file mode 100644
index 0000000000..1752f9f45e
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/hidden.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M12 7l-4 4a4 4 0 0 0 4-4zm3.955.7a1 1 0 0 1 0 .6A8.325 8.325 0 0 1 8 14a8.478 8.478 0 0 1-2.59-.409l1.66-1.661c.308.046.619.069.93.07a6.331 6.331 0 0 0 5.943-4 5.781 5.781 0 0 0-1.118-1.828l1.41-1.41a7.817 7.817 0 0 1 1.72 2.938zm-1.248-6.407a1 1 0 0 1 0 1.414l-12 12a1 1 0 1 1-1.414-1.414l1.284-1.287A7.874 7.874 0 0 1 .045 8.294a1 1 0 0 1 0-.594A8.355 8.355 0 0 1 11.7 2.882l1.593-1.589a1 1 0 0 1 1.414 0zM8.5 5A1.5 1.5 0 0 0 7 6.5c.003.295.094.581.263.823l2.06-2.06A1.46 1.46 0 0 0 8.5 5zM2.057 8a5.928 5.928 0 0 0 1.936 2.595l.986-.986A3.933 3.933 0 0 1 4.557 5a6.061 6.061 0 0 0-2.5 3z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/highlights.svg b/comm/mail/themes/shared/mail/icons/highlights.svg
new file mode 100644
index 0000000000..91c7acd1fa
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/highlights.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path d="M9.5 3s.428 2.43 1.249 3.251S14 7.5 14 7.5s-2.43.394-3.251 1.215S9.5 12 9.5 12s-.394-2.464-1.215-3.285S5 7.5 5 7.5s2.464-.428 3.285-1.249S9.5 3 9.5 3m0-2h-.014a2 2 0 0 0-1.96 1.68 7.536 7.536 0 0 1-.659 2.154 7.9 7.9 0 0 1-2.212.7 2 2 0 0 0 .029 3.945 7.733 7.733 0 0 1 2.183.658 7.74 7.74 0 0 1 .658 2.185A2 2 0 0 0 9.489 14H9.5a2 2 0 0 0 1.971-1.657 7.891 7.891 0 0 1 .7-2.209 7.566 7.566 0 0 1 2.154-.659 2 2 0 0 0 .027-3.944 7.694 7.694 0 0 1-2.181-.7 7.731 7.731 0 0 1-.7-2.181A2 2 0 0 0 9.5 1zM3 15.5a.5.5 0 0 1-.49-.421 3.047 3.047 0 0 0-.4-1.186 3.047 3.047 0 0 0-1.186-.4.5.5 0 0 1-.007-.986 3.147 3.147 0 0 0 1.192-.417 3.051 3.051 0 0 0 .4-1.171A.5.5 0 0 1 3 10.5a.5.5 0 0 1 .492.413 3.094 3.094 0 0 0 .417 1.179 3.142 3.142 0 0 0 1.178.416.5.5 0 0 1-.007.985 3.007 3.007 0 0 0-1.172.4 3.166 3.166 0 0 0-.416 1.192A.5.5 0 0 1 3 15.5zm-.5-11a.5.5 0 0 1-.49-.42 2.344 2.344 0 0 0-.265-.82 2.344 2.344 0 0 0-.82-.265.5.5 0 0 1-.007-.986 2.41 2.41 0 0 0 .827-.277A2.306 2.306 0 0 0 2.007.92.5.5 0 0 1 2.5.5a.5.5 0 0 1 .492.412 2.353 2.353 0 0 0 .278.818 2.372 2.372 0 0 0 .816.276.5.5 0 0 1-.007.985 2.306 2.306 0 0 0-.811.266 2.41 2.41 0 0 0-.277.827.5.5 0 0 1-.491.416z" fill="context-fill"></path>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/hline.svg b/comm/mail/themes/shared/mail/icons/hline.svg
new file mode 100644
index 0000000000..85f6ddb31a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/hline.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M2.5 6h11c2 0 2 3 0 3h-11C.5 9 .5 6 2.5 6z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/hourglass.svg b/comm/mail/themes/shared/mail/icons/hourglass.svg
new file mode 100644
index 0000000000..ebb0409f74
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/hourglass.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill">
+ <path d="M13 1a1 1 0 010 2h-.01l.01.5c0 1.75-2.01 2.51-2.01 4.5 0 2 2.01 2.75 2.01 4.5l-.01.5H13a1 1 0 010 2H3a1 1 0 010-2h.01a8.56 8.56 0 01-.01-.5C3 10.75 4.99 10 5 8c.01-1.99-2-2.75-2-4.5l.01-.5H3a1 1 0 110-2h10zm-2.01 2H5v.25L5 3.5C5 5.36 7 6.02 7 8c0 1.99-2 2.64-2 4.5v.25l.01.25h.6l.43-.7C7.02 10.77 7.68 10 8 10c.37 0 1.17 1 2.4 3h.59l.01-.5c0-1.86-2.01-2.49-2.01-4.5S11 5.36 11 3.5v-.25L10.99 3z"/>
+ <path d="M6 4h4C8.95 6 8.28 7 8 7s-.95-1-2-3z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/image.svg b/comm/mail/themes/shared/mail/icons/image.svg
new file mode 100644
index 0000000000..3034ec15ee
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/image.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M3 1a3 3 0 0 0-3 3v8c0 1.66 1.343 3 3 3h10c1.66 0 3-1.34 3-3V4c0-1.691-1.31-3-3-3zm0 2h10c.55 0 1 .448 1 1v6l-1.5-1-1.5 1-4.5-3-3 2H2V4a1 1 0 0 1 1-1zm8.51 1c-2.052-.05-2.053 3.051 0 2.999 1.95-.05 1.95-2.948 0-2.999zM6.5 8l4.5 3 1.5-1 1.5 1v1c0 .55-.45 1-1 1H3c-.552 0-1-.45-1-1v-2h1.5z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/import.svg b/comm/mail/themes/shared/mail/icons/import.svg
new file mode 100644
index 0000000000..ba6c0bc709
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/import.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M13.374 1H4.623A2.83 2.83 0 0 0 2 4v4h2V4a.928.928 0 0 1 .833-1h8.333A.928.928 0 0 1 14 4v8a.928.928 0 0 1-.833 1H4.833A.928.928 0 0 1 4 12v-1H2v1a2.833 2.833 0 0 0 2.627 3h9.623A1.888 1.888 0 0 0 16 13V4a2.833 2.833 0 0 0-2.626-3z"></path><path fill="context-fill" d="M7.146 11.146a.5.5 0 1 0 .707.707l2-2a.5.5 0 0 0 0-.707l-2-2a.5.5 0 0 0-.707.707L8.293 9H1.5a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 1.5 10h6.793z"></path></svg> \ No newline at end of file
diff --git a/comm/mail/themes/shared/mail/icons/inbox.svg b/comm/mail/themes/shared/mail/icons/inbox.svg
new file mode 100644
index 0000000000..2431953f58
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/inbox.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M13 1H3a3.007 3.007 0 0 0-3 3v8a3.009 3.009 0 0 0 3 3h10a3.005 3.005 0 0 0 3-3V4a3.012 3.012 0 0 0-3-3zM3 3h10a1 1 0 0 1 1 1v3h-3.5a.5.5 0 0 0-.5.5c0 .751-.146 2.5-1.5 2.5h-1C6.146 10 6 8.251 6 7.5a.5.5 0 0 0-.5-.5H2V4a1 1 0 0 1 1-1zm10 10H3a1 1 0 0 1-1-1V8h3.017c.134 1.889 1.041 3 2.483 3h1c1.442 0 2.349-1.111 2.483-3H14v4a1 1 0 0 1-1 1z"></path></svg> \ No newline at end of file
diff --git a/comm/mail/themes/shared/mail/icons/increase.svg b/comm/mail/themes/shared/mail/icons/increase.svg
new file mode 100644
index 0000000000..64deccf52d
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/increase.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M1 1a1 1 0 100 2h4v11a1 1 0 102 0V3h4a1 1 0 100-2H1zm12 3.5L10 9h6l-3-4.5z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/indent.svg b/comm/mail/themes/shared/mail/icons/indent.svg
new file mode 100644
index 0000000000..fb32427c9f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/indent.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M2 1C.667 1 .667 3 2 3h12c1.33 0 1.33-2 0-2H2zm2.045 2.965c-.763-.032-1.487.905-.813 1.676L4.35 7H2C.759 7 .742 9 2 9h2.35l-1.118 1.36c-.809 1.02.679 2.26 1.538 1.28L7.801 8 4.77 4.359c-.213-.267-.471-.384-.725-.394zM10 5c-1.333 0-1.333 2 0 2h4c1.33 0 1.33-2 0-2h-4zm0 4c-1.333 0-1.333 2 0 2h4c1.33 0 1.33-2 0-2h-4zm-8 4c-1.333 0-1.333 2 0 2h12c1.33 0 1.33-2 0-2H2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/info.svg b/comm/mail/themes/shared/mail/icons/info.svg
new file mode 100644
index 0000000000..d55bf6ec5b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/info.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M8 15a7 7 0 1 1 7-7 7 7 0 0 1-7 7zM8 2a6 6 0 1 0 6 6 6 6 0 0 0-6-6zm0 10a1 1 0 0 1-1-1V8a1 1 0 0 1 2 0v3a1 1 0 0 1-1 1zm0-6a1 1 0 1 1 1-1 1 1 0 0 1-1 1z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/information.svg b/comm/mail/themes/shared/mail/icons/information.svg
new file mode 100644
index 0000000000..2c1a63bd8e
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/information.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8zM8 2a6 6 0 1 0 6 6 6.006 6.006 0 0 0-6-6z"/>
+ <path d="M8 7a1 1 0 0 0-1 1v3a1 1 0 0 0 2 0V8a1 1 0 0 0-1-1z"/>
+ <circle cx="8" cy="5" r="1.188"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/italics.svg b/comm/mail/themes/shared/mail/icons/italics.svg
new file mode 100644
index 0000000000..3ecd12f5bd
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/italics.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M7 1a1 1 0 100 2h1.48L5.42 13H4a1 1 0 100 2h5a1 1 0 100-2H7.52l3.05-10H12a1 1 0 100-2H7z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/join.svg b/comm/mail/themes/shared/mail/icons/join.svg
new file mode 100644
index 0000000000..7ec1ab0608
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/join.svg
@@ -0,0 +1,9 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M12 16a1 1 0 0 1-.77-.37L8.26 12H2.42A2.43 2.43 0 0 1 0 9.58V3.42A2.43 2.43 0 0 1 2.42 1h11.16A2.43 2.43 0 0 1 16 3.42v6.16A2.43 2.43 0 0 1 13.58 12H13v3a1 1 0 0 1-1 1zM2.42 3a.42.42 0 0 0-.42.42v6.16a.42.42 0 0 0 .42.42h6.31a1 1 0 0 1 .77.37l1.5 1.82V11a1 1 0 0 1 1-1h1.58a.42.42 0 0 0 .42-.42V3.42a.42.42 0 0 0-.42-.42z"/>
+ <circle cx="5" cy="7" r="1"/>
+ <circle cx="8" cy="7" r="1"/>
+ <circle cx="11" cy="7" r="1"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/junk-col.svg b/comm/mail/themes/shared/mail/icons/junk-col.svg
new file mode 100644
index 0000000000..88f4f5ed5b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/junk-col.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="context-fill">
+ <path d="M6.67 1.12c2.7 1.45 4.2 3.33 4.26 6.08v.74a4.03 4.03 0 01-3.92 4.04 4 4 0 01-3.93-4.04l-.02-1c0-1.57 1.22-2.93 2.14-3.58-.66 1.54-.64 2.77.63 3.8l.4.26.44-.24c1.55-2.01 1-4.04 0-6.06z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/junk.svg b/comm/mail/themes/shared/mail/icons/junk.svg
new file mode 100644
index 0000000000..ede045c211
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/junk.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-stroke" fill-opacity="context-stroke-opacity" d="M8.25 3.84c2.48 1.42 4.64 6.11 3.7 8.05-1.16 2.02-2.75 2.44-5.07 1.92-1.76-1.1-2.3-3.48-1.87-5.54.73.3 1.47.88 1.97 1.56 1.9-1.53 1.76-4.01 1.27-6z"/>
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M13.94 11.73C13.45 14.32 11.12 16 8.38 16a4.9 4.9 0 01-4.93-3.5c-.62-1.8-.46-4.35-.2-5.54.6-1.72 2.38-.7 3.21 0 .34-1.25.1-2.84-.71-3.92C4.96 2 6.03.6 7.23 1.09c4.39 1.73 7.46 6.7 6.71 10.64zM7 10S6 8.55 5.07 8.4c0 0-.33 2.2.3 3.6s1.5 2 3.01 2c1.83 0 3.3-1.06 3.6-2.64.45-2.4-1.11-5.52-3.6-7.35C8.86 5.8 8.76 8.34 7 10z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/justify.svg b/comm/mail/themes/shared/mail/icons/justify.svg
new file mode 100644
index 0000000000..bf9c2208f4
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/justify.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M2 1c-1.333 0-1.333 2 0 2h12c1.33 0 1.33-2 0-2zm0 4c-1.333 0-1.333 2 0 2h12c1.33 0 1.33-2 0-2zm0 4C.667 9 .667 11 2 11h12c1.33 0 1.33-2 0-2zM2 13c-1.333 0-1.333 2 0 2h12c1.33 0 1.33-2 0-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/left-align.svg b/comm/mail/themes/shared/mail/icons/left-align.svg
new file mode 100644
index 0000000000..10c58bab9e
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/left-align.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M2 1C.667 1 .667 3 2 3h12c1.33 0 1.33-2 0-2zm0 4C.667 5 .667 7 2 7h10c1.33 0 1.33-2 0-2zm0 4C.667 9 .667 11 2 11h12c1.33 0 1.33-2 0-2zm0 4c-1.333 0-1.333 2 0 2h11c1.33 0 1.33-2 0-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/loading.svg b/comm/mail/themes/shared/mail/icons/loading.svg
new file mode 100644
index 0000000000..1bc5843781
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/loading.svg
@@ -0,0 +1,98 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="480" height="16" fill="context-fill">
+ <svg>
+ <path d="M2.062 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="16">
+ <path d="M3.613 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="32">
+ <path d="M6.352 6.057c1.214 0 2.2 0.87 2.2 1.943 0 1.072 -0.986 1.943 -2.2 1.943 -1.214 0 -2.2 -0.87 -2.2 -1.943 0 -1.072 0.986 -1.943 2.2 -1.943z"/>
+ </svg>
+ <svg x="48">
+ <path d="M8.338 6.171c1.435 0 2.6 0.82 2.6 1.829 0 1.01 -1.165 1.829 -2.6 1.829s-2.6 -0.82 -2.6 -1.829c0 -1.01 1.165 -1.829 2.6 -1.829z"/>
+ </svg>
+ <svg x="64">
+ <path d="M9.762 6.286c1.655 0 3 0.768 3 1.714s-1.345 1.714 -3 1.714c-1.656 0 -3 -0.768 -3 -1.714s1.344 -1.714 3 -1.714z"/>
+ </svg>
+ <svg x="80">
+ <path d="M10.828 6.4c1.877 0 3.4 0.717 3.4 1.6 0 0.883 -1.523 1.6 -3.4 1.6 -1.876 0 -3.4 -0.717 -3.4 -1.6 0 -0.883 1.524 -1.6 3.4 -1.6z"/>
+ </svg>
+ <svg x="96">
+ <path d="M11.648 6.3c1.683 0 3.05 0.762 3.05 1.7s-1.367 1.7 -3.05 1.7c-1.683 0 -3.05 -0.762 -3.05 -1.7s1.367 -1.7 3.05 -1.7z"/>
+ </svg>
+ <svg x="112">
+ <path d="M12.287 6.2c1.49 0 2.7 0.807 2.7 1.8s-1.21 1.8 -2.7 1.8c-1.49 0 -2.7 -0.807 -2.7 -1.8s1.21 -1.8 2.7 -1.8z"/>
+ </svg>
+ <svg x="128">
+ <path d="M12.785 6.1c1.297 0 2.35 0.851 2.35 1.9s-1.053 1.9 -2.35 1.9c-1.297 0 -2.35 -0.851 -2.35 -1.9s1.053 -1.9 2.35 -1.9z"/>
+ </svg>
+ <svg x="144">
+ <path d="M13.17 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2c0 -1.104 0.897 -2 2 -2z"/>
+ </svg>
+ <svg x="160">
+ <path d="M13.463 6c1.103 0 2 0.896 2 2s-0.897 2 -2 2a2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="176">
+ <path d="M13.677 6c1.103 0 2 0.896 2 2s-0.897 2 -2 2a2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="192">
+ <path d="M13.823 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="208">
+ <path d="M13.911 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="224">
+ <path d="M13.947 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="240">
+ <path d="M13.937 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="256">
+ <path d="M13.27 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2c0 -1.104 0.897 -2 2 -2z"/>
+ </svg>
+ <svg x="272">
+ <path d="M10.65 6.057c1.182 0 2.142 0.87 2.142 1.943 0 1.072 -0.96 1.943 -2.143 1.943 -1.182 0 -2.142 -0.87 -2.142 -1.943 0 -1.072 0.96 -1.943 2.142 -1.943z"/>
+ </svg>
+ <svg x="288">
+ <path d="M7.911 6.171c1.34 0 2.429 0.82 2.429 1.829 0 1.01 -1.088 1.829 -2.429 1.829 -1.34 0 -2.428 -0.82 -2.428 -1.829 0 -1.01 1.088 -1.829 2.428 -1.829z"/>
+ </svg>
+ <svg x="304">
+ <path d="M6.18 6.286c1.498 0 2.715 0.768 2.715 1.714s-1.217 1.714 -2.715 1.714c-1.498 0 -2.714 -0.768 -2.714 -1.714s1.216 -1.714 2.714 -1.714z"/>
+ </svg>
+ <svg x="320">
+ <path d="M5.01 6.4c1.655 0 3 0.717 3 1.6 0 0.883 -1.345 1.6 -3 1.6 -1.656 0 -3 -0.717 -3 -1.6 0 -0.883 1.344 -1.6 3 -1.6z"/>
+ </svg>
+ <svg x="336">
+ <path d="M4.167 6.3c1.518 0 2.75 0.762 2.75 1.7s-1.232 1.7 -2.75 1.7 -2.75 -0.762 -2.75 -1.7 1.232 -1.7 2.75 -1.7z"/>
+ </svg>
+ <svg x="352">
+ <path d="M3.54 6.2c1.38 0 2.5 0.807 2.5 1.8s-1.12 1.8 -2.5 1.8 -2.5 -0.807 -2.5 -1.8 1.12 -1.8 2.5 -1.8z"/>
+ </svg>
+ <svg x="368">
+ <path d="M3.069 6.1c1.241 0 2.25 0.851 2.25 1.9s-1.009 1.9 -2.25 1.9c-1.242 0 -2.25 -0.851 -2.25 -1.9s1.008 -1.9 2.25 -1.9z"/>
+ </svg>
+ <svg x="384">
+ <path d="M2.714 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="400">
+ <path d="M2.452 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="416">
+ <path d="M2.266 6c1.103 0 2 0.896 2 2s-0.897 2 -2 2a2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="432">
+ <path d="M2.142 6c1.103 0 2 0.896 2 2s-0.897 2 -2 2a2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="448">
+ <path d="M2.071 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="464">
+ <path d="M2.046 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2c0 -1.104 0.897 -2 2 -2z"/>
+ </svg>
+ <svg x="480">
+ <path d="M2.062 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/login.svg b/comm/mail/themes/shared/mail/icons/login.svg
new file mode 100644
index 0000000000..bd39abee73
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/login.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M10.992 1a4.009 4.009 0 0 0-4.009 4.008c0 .1.022.187.028.282-.059.05-.119.087-.178.143L5.667 6.6a.366.366 0 0 0 0 .467A1.878 1.878 0 0 0 6 7.5.353.353 0 0 1 6 8l-5 5v1.767a.229.229 0 0 0 .233.233H3.77a.229.229 0 0 0 .23-.233v-.778h.75a.227.227 0 0 0 .233-.228v-.768H5.2s.28 0 .28-.235V12.5h.779s.233-.1.233-.244v-1.271h.855l1.12-1.118H8.7l.467.467c.233.233.233.233.365.233a.437.437 0 0 0 .275-.127l.993-1.273c.034-.053.054-.107.084-.161.036 0 .07.011.107.011a4.008 4.008 0 1 0 0-8.017zM12.5 4.489a1 1 0 1 1 1-1 1 1 0 0 1-1 1z"></path></svg>
diff --git a/comm/mail/themes/shared/mail/icons/mark.svg b/comm/mail/themes/shared/mail/icons/mark.svg
new file mode 100644
index 0000000000..ddf0bd9f5a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/mark.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M3 3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v12l-5-3-5 3V3zm8 0H5v8.468l3-1.8 3 1.8V3zM8 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/menu.svg b/comm/mail/themes/shared/mail/icons/menu.svg
new file mode 100644
index 0000000000..fe7fbda549
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/menu.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11">
+ <path stroke="context-fill" d="M2 2.5h7-7zm0 3h7-7zm0 3h7-7z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/message-encrypted-notok.svg b/comm/mail/themes/shared/mail/icons/message-encrypted-notok.svg
new file mode 100644
index 0000000000..1d558a2dd9
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/message-encrypted-notok.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path d="M12.5 6.984h-.484L4 15h8.5a1.5 1.5 0 0 0 1.5-1.5V8.484a1.5 1.5 0 0 0-1.5-1.5zm-6.5 0V5a2 2 0 0 1 4 0v1l1.892-1.892A4 4 0 0 0 4 5v1.984h-.5a1.5 1.5 0 0 0-1.5 1.5V13.5a1.483 1.483 0 0 0 .07.43l6.946-6.946z" fill="context-fill"/>
+ <path d="M2 15a1 1 0 0 1-.707-1.707l12-12a1 1 0 0 1 1.414 1.414l-12 12A1 1 0 0 1 2 15z" fill="#ff0039"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/message-encrypted-ok.svg b/comm/mail/themes/shared/mail/icons/message-encrypted-ok.svg
new file mode 100644
index 0000000000..516b3811a1
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/message-encrypted-ok.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="#12bc00" d="M9.33 16a.83.83 0 01-.6-.24l-2.5-2.5a.83.83 0 011.18-1.18l1.8 1.8 5.28-7.53a.83.83 0 011.36.96l-5.84 8.34a.83.83 0 01-.68.36z"/>
+ <path fill="context-fill" d="M5.54 15l-.02-1c-1.76-1.76.76-4.3 2.6-2.6l.88.87 3-4.3c0-.56-.5-.97-1-.97h-1V5C10-.33 2-.33 2 5v2H1a1 1 0 00-1 1v6a1 1 0 001 1zM8 5v2H4V5c0-2.67 4-2.67 4 0z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/message-secure.svg b/comm/mail/themes/shared/mail/icons/message-secure.svg
new file mode 100644
index 0000000000..f443e8ec22
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/message-secure.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" width="16" height="16"><path d="M3 2C1.35 2 0 3.35 0 5v6c0 1.65 1.35 3 3 3h5v-2H3a1 1 0 01-1-1V5a1 1 0 011-1h10a1 1 0 011 1v2.5c.53.37.96.98 1 2.04.01.37.53.43 1 .46V5c0-1.65-1.35-3-3-3z"/><path d="M8 9a.5.5 0 01-.3-.1l-5.5-4a.5.5 0 11.6-.8L8 7.88l5.2-3.78a.5.5 0 01.6.8l-5.5 4A.5.5 0 018 9zm6 2h.5c.28 0 .5.22.5.5v3a.5.5 0 01-.5.5h-5a.5.5 0 01-.5-.5v-3c0-.28.22-.5.5-.5h.5v-1a2 2 0 014 0zm-1 0v-1a1 1 0 00-2 0v1z"/></svg>
diff --git a/comm/mail/themes/shared/mail/icons/message-signed-mismatch.svg b/comm/mail/themes/shared/mail/icons/message-signed-mismatch.svg
new file mode 100644
index 0000000000..bf35b03352
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/message-signed-mismatch.svg
@@ -0,0 +1,9 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" d="M7.86 0c-.4 0-1.23 1.06-1.62 1.19-.38.12-1.7-.2-2.03.03-.32.24-.35 1.55-.58 1.88-.23.32-1.5.8-1.62 1.17-.12.38.67 1.46.68 1.85 0 .39-.73 1.5-.6 1.86.14.37 1.44.8 1.68 1.11.25.31.34 1.62.67 1.84.33.23 1.64-.16 2.03-.05.21.07.57.39.91.67l1.33-2.64A3 3 0 018 9a3 3 0 01-3-3 3 3 0 012.95-3A3 3 0 018 3a3 3 0 013 2.83 1.9 1.9 0 012.2 1.04L13.76 8c.11-.09.2-.18.23-.26.12-.38-.67-1.46-.68-1.85 0-.39.73-1.5.6-1.86-.14-.37-1.44-.8-1.68-1.11-.25-.31-.34-1.62-.67-1.84-.33-.23-1.64.16-2.03.05C9.14 1 8.27-.01 7.86 0zM6.29 12.15c-.08-.04-.17-.1-.22-.11-.4-.08-1.64.41-2 .22-.35-.2-.6-1.51-.88-1.8a1.46 1.46 0 00-.4-.24L.53 14l2.23.13L4 16z"/>
+ <path fill="#f00" d="M15.82 14.13l-3.2-6.41a1.28 1.28 0 00-2.3 0l-3.18 6.4A1.3 1.3 0 008.29 16h6.38a1.3 1.3 0 001.15-1.87z"/>
+ <path fill="#690000" opacity=".35" d="M11.48 8a.27.27 0 01.25.16l3.2 6.41a.3.3 0 01-.02.3.28.28 0 01-.24.13H8.29a.28.28 0 01-.24-.14.29.29 0 01-.02-.29l3.2-6.4a.27.27 0 01.25-.17m0-1a1.27 1.27 0 00-1.15.72l-3.2 6.4A1.3 1.3 0 008.3 16h6.38a1.3 1.3 0 001.15-1.87l-3.2-6.41A1.27 1.27 0 0011.49 7z"/>
+ <path fill="#fff" d="M11.5 12a.5.5 0 00.5-.5v-2a.5.5 0 00-1 0v2a.5.5 0 00.5.5zm0 .8a.7.7 0 10.7.7.7.7 0 00-.7-.7z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/message-signed-ok.svg b/comm/mail/themes/shared/mail/icons/message-signed-ok.svg
new file mode 100644
index 0000000000..35625c02c5
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/message-signed-ok.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill">
+ <path d="M7.86 0c-.4 0-1.23 1.06-1.62 1.19-.38.12-1.7-.2-2.03.03-.32.24-.35 1.55-.58 1.88-.23.32-1.5.8-1.62 1.17-.12.38.67 1.46.68 1.85 0 .39-.73 1.5-.6 1.86.14.37 1.44.8 1.68 1.11.25.31.34 1.62.67 1.84.33.23 1.64-.16 2.03-.05.39.12 1.26 1.13 1.67 1.12.4 0 1.23-1.06 1.62-1.19.38-.12 1.7.2 2.03-.03.32-.24.35-1.55.58-1.88.23-.32 1.5-.8 1.62-1.17.11-.38-.67-1.46-.68-1.85 0-.39.73-1.5.6-1.86-.14-.37-1.44-.8-1.68-1.11-.25-.31-.34-1.62-.67-1.84-.33-.23-1.64.16-2.03.05C9.14 1 8.27-.01 7.86 0zm.09 3A3 3 0 018 3a3 3 0 013 3 3 3 0 01-3 3 3 3 0 01-3-3 3 3 0 012.95-3zM6.29 12.15c-.08-.04-.17-.1-.22-.11-.4-.08-1.64.41-2 .22-.35-.2-.6-1.51-.88-1.8a1.46 1.46 0 00-.4-.24L.53 14l2.23.13L4 16zM13.27 10.1c-.07.04-.16.08-.2.13-.27.3-.46 1.62-.8 1.83s-1.62-.23-2.01-.13c-.1.03-.25.12-.41.23L12 16l1.23-1.87 2.23-.13z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/message-signed-unknown.svg b/comm/mail/themes/shared/mail/icons/message-signed-unknown.svg
new file mode 100644
index 0000000000..6037d4caf4
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/message-signed-unknown.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" d="M7.86 0c-.4 0-1.23 1.06-1.62 1.19-.38.12-1.7-.2-2.03.03-.32.24-.35 1.55-.58 1.88-.23.32-1.5.8-1.62 1.17-.12.38.67 1.46.68 1.85 0 .39-.73 1.5-.6 1.86.14.37 1.44.8 1.68 1.11.25.31.34 1.62.67 1.84.25.17 1.05 0 1.6-.06a5.5 5.5 0 01.72-2.15A3 3 0 015 6a3 3 0 012.95-3A3 3 0 018 3a3 3 0 013 3 3 3 0 010 .02 5.5 5.5 0 01.5-.02 5.5 5.5 0 011.98.37c-.1-.2-.17-.37-.17-.49 0-.39.73-1.5.6-1.86-.14-.37-1.44-.8-1.68-1.11-.25-.31-.34-1.62-.67-1.84-.33-.23-1.64.16-2.03.05C9.13 1 8.27-.01 7.86 0zM2.79 10.22L.53 14l2.23.13L4 16l2.09-3.52a5.5 5.5 0 01-.06-.44c-.43-.05-1.6.4-1.96.22-.35-.2-.6-1.5-.88-1.8a1.46 1.46 0 00-.4-.24z"/>
+ <circle fill="#fff" r="3.5" cy="11.5" cx="11.5"/>
+ <path fill="#0a84ff" d="M11.5 16c-6 0-6-9 0-9s6 9 0 9zm.52-2.25c0-.69-1.04-.69-1.04 0s1.04.69 1.04 0zm-1.2-3.38c0-.33.29-.67.68-.67s.68.34.68.68a.8.8 0 01-.18.43c-.08.1-.17.2-.26.27l-.12.1-.33.37a1.46 1.46 0 00-.24.85c0 .6.9.6.9 0 0-.2.05-.3.09-.34a.69.69 0 01.09-.11l.06-.06.08-.08.04-.03c.14-.12.27-.27.4-.41.17-.23.37-.57.37-1a1.58 1.57 0 00-3.16 0c0 .6.9.6.9 0z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/message-signed-unverified.svg b/comm/mail/themes/shared/mail/icons/message-signed-unverified.svg
new file mode 100644
index 0000000000..62705fdb18
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/message-signed-unverified.svg
@@ -0,0 +1,9 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" d="M7.86 0c-.4 0-1.23 1.06-1.62 1.19-.38.12-1.7-.2-2.03.03-.32.24-.35 1.55-.58 1.88-.23.32-1.5.8-1.62 1.17-.12.38.67 1.46.68 1.85 0 .39-.73 1.5-.6 1.86.14.37 1.44.8 1.68 1.11.25.31.34 1.62.67 1.84.33.23 1.64-.16 2.03-.05.21.07.57.39.91.67l1.33-2.64A3 3 0 018 9a3 3 0 01-3-3 3 3 0 012.95-3A3 3 0 018 3a3 3 0 013 2.83 1.9 1.9 0 012.2 1.04L13.76 8c.11-.09.2-.18.23-.26.12-.38-.67-1.46-.68-1.85 0-.39.73-1.5.6-1.86-.14-.37-1.44-.8-1.68-1.11-.25-.31-.34-1.62-.67-1.84-.33-.23-1.64.16-2.03.05C9.14 1 8.27-.01 7.86 0zM6.29 12.15c-.08-.04-.17-.1-.22-.11-.4-.08-1.64.41-2 .22-.35-.2-.6-1.51-.88-1.8a1.46 1.46 0 00-.4-.24L.53 14l2.23.13L4 16z"/>
+ <path fill="#ffbf00" d="M15.82 14.13l-3.2-6.41a1.28 1.28 0 00-2.3 0l-3.18 6.4A1.3 1.3 0 008.29 16h6.38a1.3 1.3 0 001.15-1.87z"/>
+ <path fill="#d76e00" opacity=".35" d="M11.48 8a.27.27 0 01.25.16l3.2 6.41a.3.3 0 01-.02.3.28.28 0 01-.24.13H8.29a.28.28 0 01-.24-.14.29.29 0 01-.02-.29l3.2-6.4a.27.27 0 01.25-.17m0-1a1.27 1.27 0 00-1.15.72l-3.2 6.4A1.3 1.3 0 008.3 16h6.38a1.3 1.3 0 001.15-1.87l-3.2-6.41A1.27 1.27 0 0011.49 7z"/>
+ <path fill="#fff" d="M11.5 12a.5.5 0 00.5-.5v-2a.5.5 0 00-1 0v2a.5.5 0 00.5.5zm0 .8a.7.7 0 10.7.7.7.7 0 00-.7-.7z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/message-signed-verified.svg b/comm/mail/themes/shared/mail/icons/message-signed-verified.svg
new file mode 100644
index 0000000000..5e1b083417
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/message-signed-verified.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" d="M7.86 0c-.4 0-1.23 1.06-1.62 1.19-.38.12-1.7-.2-2.03.03-.32.24-.35 1.55-.58 1.88-.23.32-1.5.8-1.62 1.17-.12.38.67 1.46.68 1.85 0 .39-.73 1.5-.6 1.86.14.37 1.44.8 1.68 1.11.25.31.34 1.62.67 1.84.12.09.4.08.7.05a1.83 1.83 0 012.97-.62l.97.96 4.59-6.55.1-.11c.1-.26.18-.5.13-.64-.13-.37-1.43-.8-1.67-1.11-.25-.31-.34-1.62-.67-1.84-.33-.23-1.64.16-2.03.05C9.14 1 8.27-.01 7.86 0zm.09 3A3 3 0 018 3a3 3 0 013 3 3 3 0 01-3 3 3 3 0 01-3-3 3 3 0 012.95-3zM2.78 10.22L.54 14l2.23.13L4 16l1.7-2.86-.18-.18v-.01c-.21-.22-.36-.48-.44-.76-.41.09-.82.17-1 .07-.36-.2-.6-1.51-.9-1.8a1.47 1.47 0 00-.4-.24zM13.78 11l-2.54 3.64L12 16l1.23-1.87 2.23-.13-1.68-3z"/>
+ <path fill="#12bc00" d="M9.33 15a.83.83 0 01-.6-.25l-2.5-2.5a.83.83 0 011.18-1.18l1.8 1.8 5.28-7.52a.83.83 0 011.36.96l-5.84 8.33a.83.83 0 01-.68.36z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/message.svg b/comm/mail/themes/shared/mail/icons/message.svg
new file mode 100644
index 0000000000..62fd0e0875
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/message.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M13 2H3a3.013 3.013 0 0 0-3 3v6a3.013 3.013 0 0 0 3 3h10a3.013 3.013 0 0 0 3-3V5a3.013 3.013 0 0 0-3-3zm1 9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1z"/>
+ <path d="M8 9a.5.5 0 0 1-.294-.1l-5.5-4a.5.5 0 1 1 .588-.8L8 7.882 13.207 4.1a.5.5 0 0 1 .588.809l-5.5 4A.5.5 0 0 1 8 9z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/more.svg b/comm/mail/themes/shared/mail/icons/more.svg
new file mode 100644
index 0000000000..3457654c25
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/more.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M2 6a2 2 0 1 0 2 2 2 2 0 0 0-2-2zm6 0a2 2 0 1 0 2 2 2 2 0 0 0-2-2zm6 0a2 2 0 1 0 2 2 2 2 0 0 0-2-2z"></path></svg> \ No newline at end of file
diff --git a/comm/mail/themes/shared/mail/icons/move-first.svg b/comm/mail/themes/shared/mail/icons/move-first.svg
new file mode 100644
index 0000000000..b579880fdb
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/move-first.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path d="m12.703 12.297c0.9 0.94-0.46 2.3-1.4 1.4l-5-5c-0.4-0.38-0.4-1.02 0-1.4l5-5c0.94-0.9 2.3 0.47 1.4 1.4l-4.27 4.3zm-7.7-9.3a1 1 0 1 0-2 0v10a1 1 0 1 0 2 0z" fill="context-fill" fill-opacity="context-fill-opacity"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/move-last.svg b/comm/mail/themes/shared/mail/icons/move-last.svg
new file mode 100644
index 0000000000..cc1aba7a8b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/move-last.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path d="m3.2928 12.307c-0.88 0.94 0.47 2.3 1.4 1.4l5.02-5c0.4-0.38 0.4-1.02 0-1.4l-5-5c-0.95-0.9-2.3 0.47-1.42 1.4l4.3 4.3zm7.7-9.3a1 1 0 1 1 2 0v10a1 1 0 1 1-2 0z" fill="context-fill" fill-opacity="context-fill-opacity"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/move-left.svg b/comm/mail/themes/shared/mail/icons/move-left.svg
new file mode 100644
index 0000000000..db1e7bb13f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/move-left.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path d="m11.217 12.382c0.88 0.94-0.47 2.3-1.4 1.4l-5.02-5c-0.4-0.38-0.4-1.02 0-1.4l5-5c0.95-0.9 2.3 0.47 1.42 1.4l-4.3 4.3z" fill="context-fill" fill-opacity="context-fill-opacity"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/move-right.svg b/comm/mail/themes/shared/mail/icons/move-right.svg
new file mode 100644
index 0000000000..622dc59858
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/move-right.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path d="m4.7822 12.217c-0.88 0.94 0.47 2.3 1.4 1.4l5.02-5c0.4-0.38 0.4-1.02 0-1.4l-5-5c-0.95-0.9-2.3 0.47-1.42 1.4l4.3 4.3z" fill="context-fill" fill-opacity="context-fill-opacity"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/move-together.svg b/comm/mail/themes/shared/mail/icons/move-together.svg
new file mode 100644
index 0000000000..cedbcb8909
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/move-together.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M2 4h4c1.3-.04 1.3-1.96 0-2H2C.7 2.04.7 3.96 2 4zm4 3H2C.67 7 .67 9 2 9h4c1.33 0 1.33-2 0-2zm0 5H2c-1.33 0-1.33 2 0 2h4c1.33 0 1.33-2 0-2zM10 6h4c1.3-.04 1.3-1.96 0-2h-4c-1.3.04-1.3 1.96 0 2zm4 1h-4c-1.34 0-1.34 2 0 2h4c1.33 0 1.33-2 0-2zm0 3h-4c-1.33 0-1.33 2 0 2h4c1.33 0 1.33-2 0-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/navigation.svg b/comm/mail/themes/shared/mail/icons/navigation.svg
new file mode 100644
index 0000000000..ce876d06d4
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/navigation.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill-opacity="context-fill-opacity" fill="context-fill" d="M14 7H4.4l4.3-4.3c.92-.94-.46-2.32-1.4-1.4l-6 6c-.4.38-.4 1 0 1.4l6 6c.94.92 2.32-.46 1.4-1.4L4.4 9H14c1.33 0 1.33-2 0-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new-addressbook.svg b/comm/mail/themes/shared/mail/icons/new-addressbook.svg
new file mode 100644
index 0000000000..0e26f7ede4
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new-addressbook.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M3 0a2 2 0 00-2 2v1.02c-1.32.1-1.32 1.84 0 1.96v2.04c-1.32.12-1.32 1.85 0 1.96v2.04c-1.32.12-1.32 1.84 0 1.96V14c0 1.1.9 2 2 2h6.69a4.5 4.5 0 01-1.42-2H4a1 1 0 01-1-1c1.5 0 1.5-2 0-2V9c1.5 0 1.5-2 0-2V5c1.5 0 1.5-2 0-2a1 1 0 011-1h9a1 1 0 011 1v5.26a4.5 4.5 0 012 1.41V2a2 2 0 00-2-2H3zm6 3.5c-2.53.02-3.44 3.36-1.26 4.65C5.68 8.67 5 9.02 5 12h3.04a4.5 4.5 0 012.84-3.69l-.62-.15C12.51 6.89 11.58 3.46 9 3.5zM12.5 9a3.5 3.5 0 000 7 3.5 3.5 0 000-7zm0 1a.5.5 0 01.5.5V12h1.5a.5.5 0 010 1H13v1.5a.5.5 0 01-1 0V13h-1.5a.5.5 0 010-1H12v-1.5a.5.5 0 01.5-.5z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new-calendar.svg b/comm/mail/themes/shared/mail/icons/new-calendar.svg
new file mode 100644
index 0000000000..e6ad0dfb79
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new-calendar.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M4.5 0a.5.5 0 00-.5.5v3a.5.5 0 001 0v-3a.5.5 0 00-.5-.5zm7 0a.5.5 0 00-.5.5v3a.5.5 0 001 0v-3a.5.5 0 00-.5-.5zM6 2v2h4V2H6zm-3 .17A3 3 0 001 5v7a3 3 0 003 3h4.76a4.5 4.5 0 01-.72-2H4a1 1 0 01-1-1V6h10v2.03a4.5 4.5 0 012 .73V5a3 3 0 00-2-2.83V5H3V2.17zM4 7v2h2V7H4zm3 0v2h2V7H7zm3 0v1.76a4.5 4.5 0 012-.72V7h-2zm2.5 2a3.5 3.5 0 000 7 3.5 3.5 0 000-7zM4 10v2h2v-2H4zm3 0v2h1.04a4.5 4.5 0 01.72-2H7zm5.5 0a.5.5 0 01.5.5V12h1.5a.5.5 0 010 1H13v1.5a.5.5 0 01-1 0V13h-1.5a.5.5 0 010-1H12v-1.5a.5.5 0 01.5-.5z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new-key.svg b/comm/mail/themes/shared/mail/icons/new-key.svg
new file mode 100644
index 0000000000..8dab38df32
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new-key.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M8.7.98a4.01 4.01 0 00-3.36 6.06L.3 12.1c-.9.95.46 2.27 1.4 1.4l.72.72c.95.76 2.2-.53 1.36-1.44l-.64-.68.64-.75.72.75c.95.76 2.24-.49 1.4-1.43l-.68-.68 1.52-1.52c.38.23.8.38 1.25.46 0-.46.38-.93.98-.93H11V6.5c0-.46 0-1.43 1.75-1.43 0-2.35-1.55-4.05-3.9-4.09zm.08 2.04c.52 0 1.06.2 1.43.57.76.76.76 2.05 0 2.84a2 2 0 11-1.43-3.4zm3.74 2.96a.49.49 0 00-.52.53V9H9.5c-.68 0-.68.99 0 .99H12v2.52c0 .64.99.64 1 0V10h2.51c.68 0 .68-1 0-1H13V6.5c0-.28-.19-.53-.48-.52z"/>
+</svg> \ No newline at end of file
diff --git a/comm/mail/themes/shared/mail/icons/new-window.svg b/comm/mail/themes/shared/mail/icons/new-window.svg
new file mode 100644
index 0000000000..a349f80106
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new-window.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M15.5 12H13V9.5a.5.5 0 0 0-1 0V12H9.5a.5.5 0 0 0 0 1H12v2.5a.5.5 0 0 0 1 0V13h2.5a.5.5 0 0 0 0-1z"></path><path fill="context-fill" d="M16 4a3 3 0 0 0-3-3H3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h4.03v-.006a.994.994 0 0 0 0-1.987V13H3a1 1 0 0 1-1-1V6h12v1.952h.01c0 .017-.01.031-.01.048a1 1 0 0 0 2 0c0-.017-.009-.031-.01-.048H16zM2 5V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1z"></path></svg> \ No newline at end of file
diff --git a/comm/mail/themes/shared/mail/icons/new/activity/addItemIcon.svg b/comm/mail/themes/shared/mail/icons/new/activity/addItemIcon.svg
new file mode 100644
index 0000000000..fbf9a040ec
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/activity/addItemIcon.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="a"><stop style="stop-color:#0a929d;stop-opacity:1" offset="0"/><stop style="stop-color:#27d3d6;stop-opacity:1" offset="1"/></linearGradient><linearGradient xlink:href="#a" id="b" x1="24.025" y1="654.52" x2="24.025" y2="612.546" gradientUnits="userSpaceOnUse"/></defs><path style="opacity:1;fill:url(#b);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M46.026 634.546a22 22 0 0 1-22 22 22 22 0 0 1-22-22 22 22 0 0 1 22-22 22 22 0 0 1 22 22z" transform="translate(0 -610.52)"/><path style="opacity:1;fill:#135e67;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M24 616.52c-9.941 0-18 8.059-18 18 0 9.94 8.059 18 18 18s18-8.06 18-18c0-9.941-8.059-18-18-18zm0 2c8.837 0 16 7.163 16 16 0 8.836-7.163 16-16 16s-16-7.164-16-16c0-8.837 7.163-16 16-16zm0 5c-1.108 0-2 .892-2 2v7h-7c-1.108 0-2 .892-2 2s.892 2 2 2h7v7c0 1.108.892 2 2 2s2-.892 2-2v-7h7c1.108 0 2-.892 2-2s-.892-2-2-2h-7v-7c0-1.108-.892-2-2-2zm21.979 9.658c-.356 11.874-10.074 21.322-21.954 21.342-11.738-.026-21.388-9.263-21.927-20.989-.032.338-.056.676-.073 1.014 0 12.15 9.85 22 22 22s22-9.85 22-22a21.973 21.973 0 0 0-.046-1.367z" transform="translate(0 -610.52)"/><path style="opacity:1;fill:#f1f3fa;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M24 615.52c-9.941 0-18 8.059-18 18 0 9.94 8.059 18 18 18s18-8.06 18-18c0-9.941-8.059-18-18-18zm0 2c8.837 0 16 7.163 16 16 0 8.836-7.163 16-16 16s-16-7.164-16-16c0-8.837 7.163-16 16-16zm0 5c-1.108 0-2 .892-2 2v7h-7c-1.108 0-2 .892-2 2s.892 2 2 2h7v7c0 1.108.892 2 2 2s2-.892 2-2v-7h7c1.108 0 2-.892 2-2s-.892-2-2-2h-7v-7c0-1.108-.892-2-2-2z" transform="translate(0 -610.52)"/></svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/activity/compactMailIcon.svg b/comm/mail/themes/shared/mail/icons/new/activity/compactMailIcon.svg
new file mode 100644
index 0000000000..2d16c60571
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/activity/compactMailIcon.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="b"><stop style="stop-color:#a1a1aa;stop-opacity:1" offset="0"/><stop style="stop-color:#d4d4d8;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="a"><stop style="stop-color:#d7bc96;stop-opacity:1" offset="0"/><stop style="stop-color:#efdfc4;stop-opacity:1" offset="1"/></linearGradient><linearGradient xlink:href="#a" id="c" x1="25" y1="652.52" x2="25" y2="624.52" gradientUnits="userSpaceOnUse"/><linearGradient xlink:href="#b" id="d" x1="24" y1="652.52" x2="24" y2="631.52" gradientUnits="userSpaceOnUse"/></defs><g transform="translate(0 -610.52)"><rect style="fill:#d7bc96;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" width="40" height="40" x="4" y="614.52" rx="9" ry="9"/><rect style="fill:#96764b;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" width="36" height="34" x="6" y="616.52" rx="7" ry="7"/><rect style="fill:#51412c;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000;opacity:.3" width="34" height="32" x="7" y="617.52" rx="6" ry="6"/><rect style="fill:#f1f3fa;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" width="32" height="30" x="8" y="618.52" rx="5" ry="5"/><path style="fill:#51412c;fill-opacity:1;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000;opacity:.3" d="M4 623.52v22c0 4.986 4.014 9 9 9h22c4.986 0 9-4.014 9-9v-22H32a1 1 0 0 0-1 1c-.483 3.399-3.456 6-6.986 6h-.028c-3.53 0-6.503-2.601-6.986-6a1 1 0 0 0-1-1z"/><path style="fill:url(#c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000;fill-opacity:1" d="M4 624.52v21c0 4.986 4.014 9 9 9h22c4.986 0 9-4.014 9-9v-21H32a1 1 0 0 0-1 1c-.483 3.399-3.456 6-6.986 6h-.028c-3.53 0-6.503-2.601-6.986-6a1 1 0 0 0-1-1H4z"/><path style="fill:#96764b;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M4 643.52v2c0 4.986 4.014 9 9 9h22c4.986 0 9-4.014 9-9v-2c0 4.986-4.014 9-9 9H13a8.98 8.98 0 0 1-9-9z"/><path style="fill:#f4e9d7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000;fill-opacity:1" d="M4 624.52v1h12a1 1 0 0 1 1 1c.483 3.399 3.456 6 6.986 6h.028c3.53 0 6.503-2.601 6.986-6a1 1 0 0 1 1-1h12v-1H32a1 1 0 0 0-1 1c-.483 3.399-3.456 6-6.986 6h-.028c-3.53 0-6.503-2.601-6.986-6a1 1 0 0 0-1-1H4z"/><path style="opacity:.3;fill:#51412c;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M25 632.52c-.554 0-1 .446-1 1v1c0 .554.446 1 1 1h1c.554 0 1-.446 1-1v-1c0-.554-.446-1-1-1zm-3 3c-.554 0-1 .446-1 1v1c0 .554.446 1 1 1h1c.554 0 1-.446 1-1v-1c0-.554-.446-1-1-1zm3 3c-.554 0-1 .446-1 1v1c0 .554.446 1 1 1h1c.554 0 1-.446 1-1v-1c0-.554-.446-1-1-1zm-3 3c-.554 0-1 .446-1 1v1c0 .554.446 1 1 1h1c.554 0 1-.446 1-1v-1c0-.554-.446-1-1-1zm3 3c-.554 0-1 .446-1 1v1c0 .554.446 1 1 1h1c.554 0 1-.446 1-1v-1c0-.554-.446-1-1-1zm-3 3c-.554 0-1 .446-1 1v1c0 .554.446 1 1 1h1c.554 0 1-.446 1-1v-1c0-.554-.446-1-1-1zm3 3c-.554 0-1 .446-1 1v1c0 .554.446 1 1 1h1c.554 0 1-.446 1-1v-1c0-.554-.446-1-1-1z"/><rect style="opacity:.3;fill:#51412c;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" width="2" height="21" x="23" y="631.52" rx=".5" ry=".5"/><path style="opacity:1;fill:url(#d);fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M25 631.52c-.554 0-1 .446-1 1v1c0 .554.446 1 1 1h1c.554 0 1-.446 1-1v-1c0-.554-.446-1-1-1h-1zm-3 3c-.554 0-1 .446-1 1v1c0 .554.446 1 1 1h1c.554 0 1-.446 1-1v-1c0-.554-.446-1-1-1h-1zm3 3c-.554 0-1 .446-1 1v1c0 .554.446 1 1 1h1c.554 0 1-.446 1-1v-1c0-.554-.446-1-1-1h-1zm-3 3c-.554 0-1 .446-1 1v1c0 .554.446 1 1 1h1c.554 0 1-.446 1-1v-1c0-.554-.446-1-1-1h-1zm3 3c-.554 0-1 .446-1 1v1c0 .554.446 1 1 1h1c.554 0 1-.446 1-1v-1c0-.554-.446-1-1-1h-1zm-3 3c-.554 0-1 .446-1 1v1c0 .554.446 1 1 1h1c.554 0 1-.446 1-1v-1c0-.554-.446-1-1-1h-1zm3 3c-.554 0-1 .446-1 1v1c0 .554.446 1 1 1h1c.554 0 1-.446 1-1v-1c0-.554-.446-1-1-1h-1z"/></g></svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/activity/copyMailIcon.svg b/comm/mail/themes/shared/mail/icons/new/activity/copyMailIcon.svg
new file mode 100644
index 0000000000..946135b038
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/activity/copyMailIcon.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="c"><stop offset="0" style="stop-color:#f1f3fa;stop-opacity:1"/><stop offset="1" style="stop-color:#e3e5f2;stop-opacity:1"/></linearGradient><linearGradient xlink:href="#a" id="g" x1="8.5" x2="8.5" y1="623.52" y2="613.52" gradientUnits="userSpaceOnUse"/><linearGradient id="a"><stop offset="0" style="stop-color:#f1f3fa;stop-opacity:1"/><stop offset="1" style="stop-color:#cdd0e5;stop-opacity:1"/></linearGradient><linearGradient xlink:href="#b" id="h" x1="8" x2="8" y1="617.52" y2="624.52" gradientUnits="userSpaceOnUse"/><linearGradient id="b"><stop offset="0" style="stop-color:#f1f3fa;stop-opacity:1"/><stop offset="1" style="stop-color:#e3e5f2;stop-opacity:1"/></linearGradient><linearGradient xlink:href="#c" id="i" x1="8" x2="8" y1="3" y2="10" gradientUnits="userSpaceOnUse"/><linearGradient xlink:href="#a" id="d" gradientUnits="userSpaceOnUse" x1="8.5" y1="623.52" x2="8.5" y2="613.52"/><linearGradient xlink:href="#b" id="e" gradientUnits="userSpaceOnUse" x1="8" y1="617.52" x2="8" y2="624.52"/><linearGradient xlink:href="#c" id="f" gradientUnits="userSpaceOnUse" x1="8" y1="3" x2="8" y2="10"/></defs><g transform="matrix(2 0 0 2 2 -1223.038)" style="opacity:1"><rect width="14" height="11" x="1" y="613.52" rx="1.5" ry="1.5" style="opacity:1;fill:url(#d);fill-opacity:1;stroke:none;stroke-linecap:round;stroke-linejoin:round"/><path style="color:#000;fill:#cdd0e5;fill-opacity:1;stroke-linecap:round;stroke-linejoin:round" d="M8 617.019a.498.498 0 0 0-.342.135l-6.638 6.098c.005.035.01.069.018.102.038.09.07.192.102.298.237.513.755.868 1.36.868h11c.752 0 1.369-.548 1.48-1.268l-6.638-6.098a.498.498 0 0 0-.342-.135Z"/><path d="M2.5 624.52a1.496 1.496 0 0 1-1.332-.809l6.49-6.057a.5.5 0 0 1 .684 0l6.49 6.057c-.25.481-.75.809-1.332.809z" style="color:#000;fill:url(#e);fill-opacity:1;stroke-linecap:round;stroke-linejoin:round"/><path style="color:#000;fill:#cdd0e5;fill-opacity:1;stroke-linecap:round;stroke-linejoin:round" d="M8 621.02a.498.498 0 0 1-.342-.135l-6.638-6.098c.005-.035.01-.069.018-.102.038-.09.07-.192.102-.298a1.496 1.496 0 0 1 1.36-.868h11c.752 0 1.369.548 1.48 1.268l-6.638 6.098a.498.498 0 0 1-.342.135Z"/><path d="M2.5 3c-.581 0-1.083.328-1.332.809l6.49 6.056a.5.5 0 0 0 .684 0l6.49-6.056A1.496 1.496 0 0 0 13.5 3Z" style="color:#000;fill:url(#f);fill-opacity:1;stroke-linecap:round;stroke-linejoin:round" transform="translate(0 610.52)"/><path style="opacity:1;fill:#cdd0e5;fill-opacity:1;stroke:none;stroke-linecap:round;stroke-linejoin:round" d="M1 622.025v.995c0 .831.669 1.5 1.5 1.5h11c.831 0 1.5-.669 1.5-1.5v-.995c0 .83-.669 1.5-1.5 1.5h-11c-.831 0-1.5-.67-1.5-1.5z"/><path style="opacity:1;fill:#cdd0e5;fill-opacity:1;stroke:none;stroke-linecap:round;stroke-linejoin:round" d="M8.5 622.019c-1.108 0-2 .892-2 2v.501h7c.831 0 1.5-.669 1.5-1.5v-1.001H8.5z"/></g><g transform="matrix(2 0 0 2 14 -1205.04)"><rect width="14" height="11" x="1" y="613.52" rx="1.5" ry="1.5" style="opacity:1;fill:url(#g);fill-opacity:1;stroke:none;stroke-linecap:round;stroke-linejoin:round"/><path style="color:#000;fill:#cdd0e5;fill-opacity:1;stroke-linecap:round;stroke-linejoin:round" d="M8 617.019a.498.498 0 0 0-.342.135l-6.638 6.098c.005.035.01.069.018.102.038.09.07.192.102.298.237.513.755.868 1.36.868h11c.752 0 1.369-.548 1.48-1.268l-6.638-6.098a.498.498 0 0 0-.342-.135z"/><path d="M2.5 624.52a1.496 1.496 0 0 1-1.332-.809l6.49-6.057a.5.5 0 0 1 .684 0l6.49 6.057c-.25.481-.75.809-1.332.809z" style="color:#000;fill:url(#h);fill-opacity:1;stroke-linecap:round;stroke-linejoin:round"/><path style="color:#000;fill:#cdd0e5;fill-opacity:1;stroke-linecap:round;stroke-linejoin:round" d="M8 621.02a.498.498 0 0 1-.342-.135l-6.638-6.098c.005-.035.01-.069.018-.102.038-.09.07-.192.102-.298a1.496 1.496 0 0 1 1.36-.868h11c.752 0 1.369.548 1.48 1.268l-6.638 6.098a.498.498 0 0 1-.342.135Z"/><path d="M2.5 3c-.581 0-1.083.328-1.332.809l6.49 6.056a.5.5 0 0 0 .684 0l6.49-6.056A1.496 1.496 0 0 0 13.5 3Z" style="color:#000;fill:url(#i);fill-opacity:1;stroke-linecap:round;stroke-linejoin:round" transform="translate(0 610.52)"/><path style="opacity:1;fill:#cdd0e5;fill-opacity:1;stroke:none;stroke-linecap:round;stroke-linejoin:round" d="M1 622.025v.995c0 .831.669 1.5 1.5 1.5h11c.831 0 1.5-.669 1.5-1.5v-.995c0 .83-.669 1.5-1.5 1.5h-11c-.831 0-1.5-.67-1.5-1.5z"/></g></svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/activity/defaultEventIcon.svg b/comm/mail/themes/shared/mail/icons/new/activity/defaultEventIcon.svg
new file mode 100644
index 0000000000..841fe1bc10
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/activity/defaultEventIcon.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="c"><stop style="stop-color:#a1a1aa;stop-opacity:1" offset="0"/><stop style="stop-color:#f4f4f5;stop-opacity:1" offset=".5"/><stop style="stop-color:#a1a1aa;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="b"><stop style="stop-color:#e4e4e7;stop-opacity:1" offset="0"/><stop style="stop-color:#fafafa;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="a"><stop style="stop-color:#b91c1c;stop-opacity:1" offset="0"/><stop style="stop-color:#f87171;stop-opacity:1" offset="1"/></linearGradient><linearGradient xlink:href="#a" id="e" x1="24" y1="625.52" x2="24" y2="614.52" gradientUnits="userSpaceOnUse"/><linearGradient xlink:href="#b" id="d" x1="24" y1="652.52" x2="24" y2="614.52" gradientUnits="userSpaceOnUse"/><linearGradient xlink:href="#c" id="f" x1="13.5" y1="620.52" x2="13.5" y2="629.52" gradientUnits="userSpaceOnUse"/></defs><g transform="translate(0 -610.52)"><rect style="fill:url(#d);stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000;fill-opacity:1" width="40" height="40" x="4" y="614.52" rx="9" ry="9"/><path style="fill:#d4d4d8;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M4 643.52v2c0 4.986 4.014 9 9 9h22c4.986 0 9-4.014 9-9v-2c0 4.986-4.014 9-9 9H13a8.98 8.98 0 0 1-9-9z"/><path style="fill:url(#e);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000;fill-opacity:1" d="M13 614.52h22c4.986 0 9 4.014 9 9v2H4v-2c0-4.986 4.014-9 9-9z"/><rect style="opacity:1;fill:#991b1b;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" width="40" height="1" x="4" y="624.52" rx="0" ry="0"/><path style="opacity:1;fill:#991b1b;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M13.5 619.52c-.831 0-1.5.669-1.5 1.5v6c0 .83.669 1.5 1.5 1.5s1.5-.67 1.5-1.5v-6c0-.831-.669-1.5-1.5-1.5zm21 0c-.831 0-1.5.669-1.5 1.5v6c0 .83.669 1.5 1.5 1.5s1.5-.67 1.5-1.5v-6c0-.831-.669-1.5-1.5-1.5z"/><path style="opacity:1;fill:#e4e4e7;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M13.5 625.52a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5zm21 0a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5z"/><path style="opacity:1;fill:url(#f);fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M13.5 620.52c-.831 0-1.5.669-1.5 1.5v6c0 .83.669 1.5 1.5 1.5s1.5-.67 1.5-1.5v-6c0-.831-.669-1.5-1.5-1.5zm21 0c-.831 0-1.5.669-1.5 1.5v6c0 .83.669 1.5 1.5 1.5s1.5-.67 1.5-1.5v-6c0-.831-.669-1.5-1.5-1.5z"/><path style="opacity:.1;fill:#000;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M9 631.52c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1h7c.554 0 1-.446 1-1v-3c0-.554-.446-1-1-1H9zm23 0c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1h7c.554 0 1-.446 1-1v-3c0-.554-.446-1-1-1h-7zm-12 6c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1h8c.554 0 1-.446 1-1v-3c0-.554-.446-1-1-1h-8zm-11 6c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1h7c.554 0 1-.446 1-1v-3c0-.554-.446-1-1-1H9zm23 0c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1h7c.554 0 1-.446 1-1v-3c0-.554-.446-1-1-1h-7z"/><path style="opacity:.05;fill:#000;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M20 631.52c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1h8c.554 0 1-.446 1-1v-3c0-.554-.446-1-1-1h-8zm-11 6c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1h7c.554 0 1-.446 1-1v-3c0-.554-.446-1-1-1H9zm23 0c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1h7c.554 0 1-.446 1-1v-3c0-.554-.446-1-1-1h-7zm-12 6c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1h8c.554 0 1-.446 1-1v-3c0-.554-.446-1-1-1h-8z"/></g></svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/activity/defaultProcessIcon.svg b/comm/mail/themes/shared/mail/icons/new/activity/defaultProcessIcon.svg
new file mode 100644
index 0000000000..028d65cead
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/activity/defaultProcessIcon.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="a"><stop style="stop-color:#6e6f9b;stop-opacity:1" offset="0"/><stop style="stop-color:#9b9ec2;stop-opacity:1" offset="1"/></linearGradient><linearGradient xlink:href="#a" id="b" x1="24.025" y1="658.923" x2="24.025" y2="607.664" gradientUnits="userSpaceOnUse" gradientTransform="translate(4.34 114.617) scale(.81937)"/></defs><path style="opacity:1;fill:url(#b);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M22 612.52c-1.108 0-2 .892-2 2v2.502a18.026 18.026 0 0 0-4.785 1.85l-1.676-1.677a1.995 1.995 0 0 0-2.828 0l-3.535 3.536a1.995 1.995 0 0 0 0 2.828l1.53 1.529a18.026 18.026 0 0 0-2.097 4.932H4.5c-1.108 0-2 .892-2 2v5c0 1.108.892 2 2 2h2.1a18.026 18.026 0 0 0 2.086 4.95l-1.51 1.51a1.995 1.995 0 0 0 0 2.829l3.535 3.535a1.995 1.995 0 0 0 2.828 0l1.64-1.64A18.026 18.026 0 0 0 20 652.07v2.45c0 1.108.892 2 2 2h5c1.108 0 2-.892 2-2v-2.655a18.026 18.026 0 0 0 4.484-1.998l1.977 1.977a1.995 1.995 0 0 0 2.828 0l3.535-3.535a1.995 1.995 0 0 0 0-2.828l-2.123-2.123a18.026 18.026 0 0 0 1.752-4.338H44.5c1.108 0 2-.892 2-2v-5c0-1.108-.892-2-2-2h-3.03a18.026 18.026 0 0 0-1.76-4.348l2.114-2.113a1.995 1.995 0 0 0 0-2.828l-3.535-3.536a1.995 1.995 0 0 0-2.828 0l-1.996 1.997a18.026 18.026 0 0 0-4.465-1.97v-2.702c0-1.108-.892-2-2-2h-5zm2 13a8 8 0 0 1 8 8 8 8 0 0 1-8 8 8 8 0 0 1-8-8 8 8 0 0 1 8-8z" transform="translate(0 -610.52)"/><path style="opacity:1;fill:#52507c;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M6.865 621.145a1.99 1.99 0 0 0 .31 2.414l1.53 1.529c.21-.449.437-.888.682-1.318l-2.211-2.211a1.998 1.998 0 0 1-.31-.414zm35.27 0a1.998 1.998 0 0 1-.31.414l-2.764 2.763c.235.441.452.891.65 1.35l2.113-2.113a1.99 1.99 0 0 0 .31-2.414zM24 624.52a8 8 0 0 0-8 8 8 8 0 0 0 .035.5 8 8 0 0 1 7.965-7.5 8 8 0 0 1 7.973 7.623 8 8 0 0 0 .027-.623 8 8 0 0 0-8-8zm-21.5 10.5v2c0 1.108.892 2 2 2h2.1c.207 1.227 1.166 3.504 2.086 4.95l.677-.677c-.938-1.537-2.32-4.528-2.763-6.273H4.5c-1.108 0-2-.892-2-2zm44 0c0 1.108-.892 2-2 2h-3.047c-.393 1.516-1.632 4.323-2.402 5.687l.65.65c.818-1.513 1.329-2.732 1.752-4.337H44.5c1.108 0 2-.892 2-2v-2zM6.865 645.895a1.99 1.99 0 0 0 .31 2.414l3.536 3.535a1.995 1.995 0 0 0 2.828 0l1.64-1.64c1.51.85 3.133 1.479 4.821 1.866v-2a18.026 18.026 0 0 1-4.82-1.867l-1.64 1.64a1.995 1.995 0 0 1-2.83 0l-3.534-3.534a1.998 1.998 0 0 1-.31-.414zm35.27 0a1.998 1.998 0 0 1-.31.414l-3.536 3.535a1.995 1.995 0 0 1-2.828 0l-1.977-1.977A18.026 18.026 0 0 1 29 649.865v2a18.026 18.026 0 0 0 4.484-1.998l1.977 1.977a1.995 1.995 0 0 0 2.828 0l3.535-3.535a1.99 1.99 0 0 0 .31-2.414zM20 652.52v2c0 1.108.892 2 2 2h5c1.108 0 2-.892 2-2v-2c0 1.108-.892 2-2 2h-5c-1.108 0-2-.892-2-2z" transform="translate(0 -610.52)"/></svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/activity/deleteMailIcon.svg b/comm/mail/themes/shared/mail/icons/new/activity/deleteMailIcon.svg
new file mode 100644
index 0000000000..9d4d061a19
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/activity/deleteMailIcon.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="c"><stop style="stop-color:#6e6f9b;stop-opacity:1" offset="0"/><stop style="stop-color:#52507c;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="b"><stop style="stop-color:#cdd0e5;stop-opacity:1" offset="0"/><stop style="stop-color:#e3e5f2;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="a"><stop style="stop-color:#9b9ec2;stop-opacity:1" offset="0"/><stop style="stop-color:#cdd0e5;stop-opacity:1" offset="1"/></linearGradient><linearGradient xlink:href="#a" id="d" x1="24" y1="656.52" x2="24" y2="631.52" gradientUnits="userSpaceOnUse"/><linearGradient xlink:href="#b" id="e" x1="24" y1="629.52" x2="24" y2="615.52" gradientUnits="userSpaceOnUse"/><linearGradient xlink:href="#c" id="f" x1="24" y1="648.02" x2="24" y2="632.52" gradientUnits="userSpaceOnUse"/></defs><g transform="translate(0 -612.52)"><rect style="fill:url(#d);stroke-linecap:round;stroke-linejoin:round;stop-color:#000;fill-opacity:1" width="34" height="41.5" x="7" y="617.02" rx="11.5" ry="11.5"/><rect style="fill:#9b9ec2;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" width="36" height="16" x="6" y="615.52" rx="11" ry="6.682"/><rect style="fill:url(#e);stroke-linecap:round;stroke-linejoin:round;stop-color:#000;fill-opacity:1" width="36" height="14" x="6" y="615.52" rx="11" ry="6.682"/><path style="fill:#6e6f9b;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M7 645.02v2c0 6.37 5.129 11.5 11.5 11.5h11c6.371 0 11.5-5.13 11.5-11.5v-2c0 6.37-5.129 11.5-11.5 11.5h-11c-6.371 0-11.5-5.13-11.5-11.5z"/></g><path style="color:#000;fill:#9b9ec2;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="M22 612.52c-2.735 0-5 2.264-5 5v1a2 2 0 0 0 2 2 2 2 0 0 0 2-2v-1c0-.59.411-1 1-1h4c.589 0 1 .41 1 1v1a2 2 0 0 0 2 2 2 2 0 0 0 2-2v-1c0-2.736-2.265-5-5-5z" transform="translate(0 -610.52)"/><path style="opacity:.5;fill:url(#f);fill-opacity:1;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M15 632.52c-1.108 0-2 .892-2 2v11c0 1.108.892 2 2 2s2-.892 2-2v-11c0-1.108-.892-2-2-2zm9 1c-1.108 0-2 .892-2 2v11c0 1.108.892 2 2 2s2-.892 2-2v-11c0-1.108-.892-2-2-2zm9-1c-1.108 0-2 .892-2 2v11c0 1.108.892 2 2 2s2-.892 2-2v-11c0-1.108-.892-2-2-2z" transform="translate(0 -610.52)"/></svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/activity/error.svg b/comm/mail/themes/shared/mail/icons/new/activity/error.svg
new file mode 100644
index 0000000000..3bfc4e1170
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/activity/error.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="a"><stop style="stop-color:#dc2626;stop-opacity:1" offset="0"/><stop style="stop-color:#f87171;stop-opacity:1" offset="1"/></linearGradient><linearGradient xlink:href="#a" id="b" x1="24.025" y1="654.52" x2="24.025" y2="612.546" gradientUnits="userSpaceOnUse"/></defs><path style="opacity:1;fill:url(#b);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M46.026 634.546a22 22 0 0 1-22 22 22 22 0 0 1-22-22 22 22 0 0 1 22-22 22 22 0 0 1 22 22z" transform="translate(0 -610.52)"/><path style="opacity:1;fill:#991b1b;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M24 616.52c-9.941 0-18 8.059-18 18 0 9.94 8.059 18 18 18s18-8.06 18-18c0-9.941-8.059-18-18-18zm0 2c8.837 0 16 7.163 16 16 0 8.836-7.163 16-16 16s-16-7.164-16-16c0-8.837 7.163-16 16-16zm0 6c-1.108 0-2 .892-2 2v9c0 1.108.892 2 2 2s2-.892 2-2v-9c0-1.108-.892-2-2-2zm21.979 8.658c-.356 11.874-10.074 21.322-21.954 21.342-11.738-.026-21.388-9.263-21.927-20.989-.032.338-.056.676-.073 1.014 0 12.15 9.85 22 22 22s22-9.85 22-22a21.965 21.965 0 0 0-.046-1.367zM24 639.52c-1.108 0-2 .892-2 2s.892 2 2 2 2-.892 2-2-.892-2-2-2z" transform="translate(0 -610.52)"/><path style="opacity:1;fill:#f1f3fa;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M24 651.52c-9.941 0-18-8.06-18-18 0-9.941 8.059-18 18-18s18 8.059 18 18c0 9.94-8.059 18-18 18zm0-2c8.837 0 16-7.164 16-16 0-8.837-7.163-16-16-16s-16 7.163-16 16c0 8.836 7.163 16 16 16zm0-7c-1.108 0-2-.892-2-2s.892-2 2-2 2 .892 2 2-.892 2-2 2zm0-6c-1.108 0-2-.892-2-2v-9c0-1.108.892-2 2-2s2 .892 2 2v9c0 1.108-.892 2-2 2z" transform="translate(0 -610.52)"/></svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/activity/indexMailIcon.svg b/comm/mail/themes/shared/mail/icons/new/activity/indexMailIcon.svg
new file mode 100644
index 0000000000..cc5113d4e7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/activity/indexMailIcon.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="c"><stop style="stop-color:#fff;stop-opacity:1" offset="0"/><stop style="stop-color:#fff;stop-opacity:0" offset="1"/></linearGradient><linearGradient id="b"><stop style="stop-color:#cdd0e5;stop-opacity:1" offset="0"/><stop style="stop-color:#e3e5f2;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="a"><stop style="stop-color:#96764b;stop-opacity:1" offset="0"/><stop style="stop-color:#b6986c;stop-opacity:1" offset="1"/></linearGradient><linearGradient xlink:href="#a" id="e" x1="42" y1="655.52" x2="42" y2="638.52" gradientUnits="userSpaceOnUse"/><linearGradient xlink:href="#b" id="d" x1="18" y1="642.52" x2="18" y2="612.52" gradientUnits="userSpaceOnUse"/><radialGradient xlink:href="#c" id="f" cx="14" cy="622.52" fx="14" fy="622.52" r="4" gradientUnits="userSpaceOnUse"/></defs><g transform="translate(0 -610.52)"><circle style="opacity:.5;fill:#ddeefe;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" cx="18" cy="628.52" r="14"/><path style="color:#000;fill:url(#d);stroke-linecap:round;stroke-linejoin:round;fill-opacity:1" d="M18 612.52c-8.813 0-16 7.187-16 16 0 8.813 7.187 16 16 16 3.688 0 7.088-1.264 9.799-3.373l2.787 2.787a2 2 0 0 0 2.828 0 2 2 0 0 0 0-2.828l-2.787-2.788A15.907 15.907 0 0 0 34 628.52c0-8.813-7.187-16-16-16zm0 4c6.651 0 12 5.349 12 12 0 6.65-5.349 12-12 12s-12-5.35-12-12c0-6.651 5.349-12 12-12z"/><path style="color:#000;fill:#cdd0e5;stroke-linecap:round;stroke-linejoin:round" d="M18 614.52a11.97 11.97 0 0 0-11.955 13c.505-6.179 5.641-11 11.955-11s11.45 4.821 11.955 11a11.97 11.97 0 0 0-11.955-13z"/><path style="color:#000;fill:#9b9ec2;stroke-linecap:round;stroke-linejoin:round;opacity:.3" d="M33.965 627.516c-.206 3.302-2.248 7.51-4.166 9.974l.828.828C32.25 636.295 34 633.051 34 628.52c0-.338-.014-.672-.035-1.004zm-31.93.004c-.02.33-.035.663-.035 1 0 8.812 7.187 16 16 16 3.688 0 7.088-1.264 9.799-3.373l2.787 2.787a2 2 0 0 0 3.146-2.414 2 2 0 0 1-3.146.414l-2.787-2.787A15.907 15.907 0 0 1 18 642.52c-8.477 0-15.445-6.651-15.965-15z"/><path style="color:#000;fill:url(#e);stroke-linecap:round;stroke-linejoin:round;fill-opacity:1" d="M32 638.52a4 4 0 0 0-2.828 1.171 4 4 0 0 0 0 5.657l11 11a4 4 0 0 0 5.656 0 4 4 0 0 0 0-5.657l-11-11A4 4 0 0 0 32 638.52Z"/><path style="color:#000;fill:#755b38;stroke-linecap:round;stroke-linejoin:round" d="M28.152 641.52a4 4 0 0 0 1.02 3.828l11 11a4 4 0 0 0 5.656 0 4 4 0 0 0 1.043-3.828 4 4 0 0 1-1.043 1.828 4 4 0 0 1-5.656 0l-11-11a4 4 0 0 1-1.02-1.828z"/><circle style="opacity:.5;fill:url(#f);stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stop-color:#000;fill-opacity:1" cx="14" cy="622.52" r="4"/></g></svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/activity/info.svg b/comm/mail/themes/shared/mail/icons/new/activity/info.svg
new file mode 100644
index 0000000000..aabfb6406a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/activity/info.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="a"><stop style="stop-color:#2493ef;stop-opacity:1" offset="0"/><stop style="stop-color:#4cb1f9;stop-opacity:1" offset="1"/></linearGradient><linearGradient xlink:href="#a" id="b" x1="24.025" y1="654.52" x2="24.025" y2="612.546" gradientUnits="userSpaceOnUse"/></defs><path style="opacity:1;fill:url(#b);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M46.026 634.546a22 22 0 0 1-22 22 22 22 0 0 1-22-22 22 22 0 0 1 22-22 22 22 0 0 1 22 22z" transform="translate(0 -610.52)"/><path style="opacity:1;fill:#105bbc;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M24 616.52a18 18 0 0 0-18 18 18 18 0 0 0 18 18 18 18 0 0 0 18-18 18 18 0 0 0-18-18zm0 2a16 16 0 0 1 16 16 16 16 0 0 1-16 16 16 16 0 0 1-16-16 16 16 0 0 1 16-16zm0 6c-1.108 0-2 .892-2 2s.892 2 2 2 2-.892 2-2-.892-2-2-2zm0 6c-1.108 0-2 .892-2 2v9c0 1.108.892 2 2 2s2-.892 2-2v-9c0-1.108-.892-2-2-2zm21.979 2.658a22 22 0 0 1-21.954 21.342A22 22 0 0 1 2.098 633.53a22 22 0 0 0-.073 1.014 22 22 0 0 0 22 22 22 22 0 0 0 22-22 22 22 0 0 0-.046-1.367z" transform="translate(0 -610.52)"/><path style="opacity:1;fill:#f1f3fa;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M24 615.52a18 18 0 0 0-18 18 18 18 0 0 0 18 18 18 18 0 0 0 18-18 18 18 0 0 0-18-18zm0 2a16 16 0 0 1 16 16 16 16 0 0 1-16 16 16 16 0 0 1-16-16 16 16 0 0 1 16-16zm0 6c-1.108 0-2 .892-2 2s.892 2 2 2 2-.892 2-2-.892-2-2-2zm0 6c-1.108 0-2 .892-2 2v9c0 1.108.892 2 2 2s2-.892 2-2v-9c0-1.108-.892-2-2-2z" transform="translate(0 -610.52)"/></svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/activity/moveMailIcon.svg b/comm/mail/themes/shared/mail/icons/new/activity/moveMailIcon.svg
new file mode 100644
index 0000000000..178941b263
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/activity/moveMailIcon.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="b"><stop style="stop-color:#e3e5f2;stop-opacity:1" offset="0"/><stop style="stop-color:#f1f3fa;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="a"><stop style="stop-color:#1373d9;stop-opacity:1" offset="0"/><stop style="stop-color:#4cb1f9;stop-opacity:1" offset="1"/></linearGradient><linearGradient xlink:href="#a" id="d" x1="28.08" y1="646.515" x2="28.08" y2="619.52" gradientUnits="userSpaceOnUse"/><linearGradient xlink:href="#b" id="c" x1="28.163" y1="649.498" x2="27.742" y2="617.525" gradientUnits="userSpaceOnUse"/></defs><path style="color:#000;fill:url(#c);stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;fill-opacity:1" d="M27.742 617.525a6.004 6.004 0 0 0-4.164 1.938 3 3 0 0 0 0 .002c-2.215 2.416-2.048 6.261.367 8.476l.631.579H8c-3.278 0-6 2.721-6 6 0 3.278 2.722 6 6 6h16.576l-.63.578c-2.416 2.215-2.583 6.06-.368 8.476 2.216 2.416 6.06 2.582 8.477.367l12-11c2.558-2.346 2.558-6.497 0-8.843l-12-11a3 3 0 0 0 0-.002 6.004 6.004 0 0 0-4.313-1.57z" transform="translate(0 -610.52)"/><path style="color:#000;fill:url(#d);stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;fill-opacity:1" d="M27.871 619.522a3 3 0 0 0-2.082.97 3 3 0 0 0 .184 4.237l6.314 5.79H8a3 3 0 0 0-3 3 3 3 0 0 0 3 3h24.287l-6.314 5.789a3 3 0 0 0-.184 4.238 3 3 0 0 0 4.238.183l12-11a3 3 0 0 0 0-4.421l-12-11a3 3 0 0 0-2.156-.786z" transform="translate(0 -610.52)"/><path style="color:#000;fill:#124c9a;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="M25.057 622.042a3 3 0 0 0 .916 2.687l6.314 5.79h1.094l-7.408-6.791a3 3 0 0 1-.916-1.686zM5.078 633.019a3 3 0 0 0-.078.5 3 3 0 0 0 3 3h24.287l1.094-1.002H8a3 3 0 0 1-2.922-2.498zm37.875 0a3 3 0 0 1-.926 1.709l-12 11a3 3 0 0 1-4.238-.184 3 3 0 0 1-.732-1.55 3 3 0 0 0 .732 2.552 3 3 0 0 0 4.238.183l12-11a3 3 0 0 0 .926-2.71z" transform="translate(0 -610.52)"/><path style="color:#000;fill:#cdd0e5;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="M22.107 622.508c-.227 1.365-.195 3.836 2.47 6.012h1.763l-.631-.579c-2.397-2.099-3.391-4.153-3.602-5.433zM2.092 633.52c-.057.326-.092.659-.092 1 0 3.278 2.722 6 6 6h16.576c.296-.519.673-1 1.133-1.422l.63-.578H8c-2.937 0-5.422-2.188-5.908-5zm43.793 0a5.918 5.918 0 0 1-1.83 3.422l-12 11c-2.416 2.215-6.261 2.048-8.477-.368a5.92 5.92 0 0 1-1.47-3.043c-.29 1.765.187 3.643 1.47 5.043 2.216 2.416 6.06 2.583 8.477.368l12-11c1.543-1.416 2.148-3.486 1.83-5.422z" transform="translate(0 -610.52)"/></svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/activity/question.svg b/comm/mail/themes/shared/mail/icons/new/activity/question.svg
new file mode 100644
index 0000000000..2da7f369e8
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/activity/question.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="a"><stop style="stop-color:#2493ef;stop-opacity:1" offset="0"/><stop style="stop-color:#4cb1f9;stop-opacity:1" offset="1"/></linearGradient><linearGradient xlink:href="#a" id="b" x1="24.025" y1="654.52" x2="24.025" y2="612.546" gradientUnits="userSpaceOnUse"/></defs><path style="opacity:1;fill:url(#b);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M46.026 634.546a22 22 0 0 1-22 22 22 22 0 0 1-22-22 22 22 0 0 1 22-22 22 22 0 0 1 22 22z" transform="translate(0 -610.52)"/><path style="opacity:1;fill:#105bbc;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M24 616.52c-9.941 0-18 8.059-18 18 0 9.94 8.059 18 18 18s18-8.06 18-18c0-9.941-8.059-18-18-18zm0 2c8.837 0 16 7.163 16 16 0 8.836-7.163 16-16 16s-16-7.164-16-16c0-8.837 7.163-16 16-16zm0 6c-1.746 0-3.418.463-4.748 1.476-1.33 1.014-2.252 2.68-2.252 4.524a2 2 0 0 0 2 2 2 2 0 0 0 2-2c0-.642.196-.977.676-1.342.48-.365 1.309-.658 2.324-.658 1.789 0 3 1.215 3 2.5 0 1.284-1.211 2.5-3 2.5h-.082c-1.063 0-1.918.892-1.918 2v2c0 1.108.855 2 1.918 2h.164c1.063 0 1.918-.892 1.918-2v-.276c2.827-.792 5-3.218 5-6.224 0-3.687-3.266-6.5-7-6.5zm21.979 8.658c-.356 11.874-10.074 21.322-21.954 21.342-11.738-.026-21.388-9.263-21.927-20.989-.032.338-.056.676-.073 1.014 0 12.15 9.85 22 22 22s22-9.85 22-22a21.965 21.965 0 0 0-.046-1.367zM24 641.52a2 2 0 0 0-2 2 2 2 0 0 0 2 2 2 2 0 0 0 2-2 2 2 0 0 0-2-2z" transform="translate(0 -610.52)"/><path style="opacity:1;fill:#f1f3fa;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M24 615.52c-9.941 0-18 8.059-18 18 0 9.94 8.059 18 18 18s18-8.06 18-18c0-9.941-8.059-18-18-18zm0 2c8.837 0 16 7.163 16 16 0 8.836-7.163 16-16 16s-16-7.164-16-16c0-8.837 7.163-16 16-16zm0 6c-1.746 0-3.418.463-4.748 1.476-1.33 1.014-2.252 2.68-2.252 4.524a2 2 0 0 0 2 2 2 2 0 0 0 2-2c0-.642.196-.977.676-1.342.48-.365 1.309-.658 2.324-.658 1.789 0 3 1.215 3 2.5 0 1.284-1.211 2.5-3 2.5h-.082c-1.063 0-1.918.892-1.918 2v2c0 1.108.855 2 1.918 2h.164c1.063 0 1.918-.892 1.918-2v-.276c2.827-.792 5-3.218 5-6.224 0-3.687-3.266-6.5-7-6.5zm0 17a2 2 0 0 0-2 2 2 2 0 0 0 2 2 2 2 0 0 0 2-2 2 2 0 0 0-2-2z" transform="translate(0 -610.52)"/></svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/activity/removeItemIcon.svg b/comm/mail/themes/shared/mail/icons/new/activity/removeItemIcon.svg
new file mode 100644
index 0000000000..1e10304869
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/activity/removeItemIcon.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="a"><stop style="stop-color:#0a929d;stop-opacity:1" offset="0"/><stop style="stop-color:#27d3d6;stop-opacity:1" offset="1"/></linearGradient><linearGradient xlink:href="#a" id="b" x1="24.025" y1="654.52" x2="24.025" y2="612.546" gradientUnits="userSpaceOnUse"/></defs><path style="opacity:1;fill:url(#b);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M46.026 634.546a22 22 0 0 1-22 22 22 22 0 0 1-22-22 22 22 0 0 1 22-22 22 22 0 0 1 22 22z" transform="translate(0 -610.52)"/><path style="opacity:1;fill:#135e67;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M24 616.52c-9.941 0-18 8.059-18 18 0 9.94 8.059 18 18 18s18-8.06 18-18c0-9.941-8.059-18-18-18zm0 2c8.837 0 16 7.163 16 16 0 8.836-7.163 16-16 16s-16-7.164-16-16c0-8.837 7.163-16 16-16zm-9 14c-1.108 0-2 .892-2 2s.892 2 2 2h18c1.108 0 2-.892 2-2s-.892-2-2-2zm30.979.658c-.356 11.874-10.074 21.322-21.954 21.342-11.738-.026-21.388-9.263-21.927-20.989-.032.338-.056.676-.073 1.014 0 12.15 9.85 22 22 22s22-9.85 22-22a21.973 21.973 0 0 0-.046-1.367z" transform="translate(0 -610.52)"/><path style="opacity:1;fill:#f1f3fa;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M24 615.52c-9.941 0-18 8.059-18 18 0 9.94 8.059 18 18 18s18-8.06 18-18c0-9.941-8.059-18-18-18zm0 2c8.837 0 16 7.163 16 16 0 8.836-7.163 16-16 16s-16-7.164-16-16c0-8.837 7.163-16 16-16zm-9 14c-1.108 0-2 .892-2 2s.892 2 2 2c6.668.017 11.333 0 18 0 1.108 0 2-.892 2-2s-.892-2-2-2z" transform="translate(0 -610.52)"/></svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/activity/sendMailIcon.svg b/comm/mail/themes/shared/mail/icons/new/activity/sendMailIcon.svg
new file mode 100644
index 0000000000..c900edd0db
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/activity/sendMailIcon.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="c"><stop style="stop-color:#e3e5f2;stop-opacity:1" offset="0"/><stop style="stop-color:#f1f3fa;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="b"><stop style="stop-color:#cdd0e5;stop-opacity:1" offset="0"/><stop style="stop-color:#e3e5f2;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="a"><stop offset="0" style="stop-color:#ffe900;stop-opacity:1"/><stop offset="1" style="stop-color:#fff376;stop-opacity:1"/></linearGradient><linearGradient xlink:href="#b" id="e" x1="18.915" y1="30.545" x2="18.915" y2="13.093" gradientUnits="userSpaceOnUse"/><linearGradient xlink:href="#c" id="d" x1="18.915" y1="32" x2="18.915" y2="0" gradientUnits="userSpaceOnUse"/></defs><g style="stroke-width:.72716"><path d="M29 0c-1.306 0-2.304.412-3.58.926L2.654 9.71l.102-.03c-1.51.404-2.744 1.694-2.744 3.332 0 1.7 1.33 2.882 2.734 3.148l-.172-.05 9.798 3.526 3.47 9.774-.038-.124c.16.686.532 1.318 1.068 1.824A3.12 3.12 0 0 0 19 32c1.626 0 2.718-1.26 3.27-2.48a.967.967 0 0 0 .022-.056L31.12 6.176a.998.998 0 0 0 .014-.048c.304-.932.868-1.74.868-3.128 0-1.646-1.354-3-3-3z" style="color:#000;fill:url(#d);fill-rule:evenodd;stroke-width:1.45431;stroke-linejoin:round;fill-opacity:1" transform="matrix(1.37543 0 0 1.375 1.983 2)"/><path d="m15.842 29.41-.038-.124c.16.686.532 1.318 1.068 1.824A3.12 3.12 0 0 0 19 32c1.626 0 2.718-1.26 3.27-2.48a.967.967 0 0 0 .022-.056L31.12 6.176a.998.998 0 0 0 .014-.048c.304-.932.868-1.74.868-3.128 0-.822-.326-1.56-.87-2.104-.22.195-18.76 18.74-18.76 18.74Z" style="color:#000;fill:url(#e);fill-rule:evenodd;stroke-width:1.45431;stroke-linejoin:round;fill-opacity:1" transform="matrix(1.37543 0 0 1.375 1.983 2)"/><path d="m10.122 17.705 2.977 1.204 1.139 3.76L31.132.896Z" style="opacity:.5;fill:#9b9ec2;stroke:none;stroke-width:1.45431px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" transform="matrix(1.37543 0 0 1.375 1.983 2)"/><path style="color:#000;fill:#9b9ec2;fill-rule:evenodd;stroke-width:1.45431;stroke-linejoin:round" d="M31.93 2.357c-.16.922-.556 1.583-.796 2.316a1.01 1.01 0 0 1-.014.049L22.292 28.01a.933.933 0 0 1-.021.055c-.552 1.22-1.645 2.48-3.27 2.48a3.12 3.12 0 0 1-2.13-.89 3.67 3.67 0 0 1-1.044-1.74l-2.728-9.006-10.45-4.226C1.49 14.428.405 13.553.1 12.281a3.165 3.165 0 0 0-.088.73c0 1.661 1.27 2.826 2.637 3.127l-.075-.029.172.052-.097-.023 9.723 3.498 3.455 9.733c-.008-.028-.017-.055-.023-.083l.038.125-.015-.042a3.67 3.67 0 0 0 1.045 1.74A3.12 3.12 0 0 0 19 32c1.626 0 2.719-1.26 3.27-2.48a.93.93 0 0 0 .022-.056L31.12 6.176a.906.906 0 0 0 .014-.048c.304-.932.868-1.74.868-3.128 0-.221-.026-.436-.072-.643zM2.649 14.683c.032.007.064.017.097.023l-.172-.051Zm13.178 13.232.015.041-.038-.125.023.084z" transform="matrix(1.37543 0 0 1.375 1.983 2)"/></g></svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/activity/syncMailIcon.svg b/comm/mail/themes/shared/mail/icons/new/activity/syncMailIcon.svg
new file mode 100644
index 0000000000..50fceb098c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/activity/syncMailIcon.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="a"><stop style="stop-color:#16a34a;stop-opacity:1" offset="0"/><stop style="stop-color:#22c55e;stop-opacity:1" offset="1"/></linearGradient><linearGradient xlink:href="#a" id="b" x1="24.025" y1="654.52" x2="24.025" y2="612.546" gradientUnits="userSpaceOnUse"/></defs><path style="opacity:1;fill:url(#b);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M46.026 634.546a22 22 0 0 1-22 22 22 22 0 0 1-22-22 22 22 0 0 1 22-22 22 22 0 0 1 22 22z" transform="translate(0 -610.52)"/><path style="fill:#166534;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M24 616.52c-9.941 0-18 8.059-18 18 0 9.94 8.059 18 18 18s18-8.06 18-18c0-9.941-8.059-18-18-18zm0 2c8.837 0 16 7.163 16 16 0 8.836-7.163 16-16 16s-16-7.164-16-16c0-8.837 7.163-16 16-16zm0 5c-2.989 0-5.71 1.198-7.693 3.138a1 1 0 0 0-.016 1.414 1 1 0 0 0 1.414.016A8.958 8.958 0 0 1 24 625.52c4.84 0 8.77 3.791 8.99 8.576l-1.283-1.283a1 1 0 0 0-.707-.293 1 1 0 0 0-.707.293 1 1 0 0 0 0 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0 0-1.414 1 1 0 0 0-1.414 0l-1.303 1.302c-.214-5.876-5.062-10.595-10.99-10.595zm-9.85 8.996a1 1 0 0 0-.103.01 1 1 0 0 0-.754.287l-3 3a1 1 0 0 0 0 1.414 1 1 0 0 0 1.414 0l1.377-1.377c.66 5.438 5.303 9.67 10.916 9.67 3.035 0 5.795-1.235 7.785-3.229a1 1 0 0 0-.002-1.414 1 1 0 0 0-1.414 0A8.958 8.958 0 0 1 24 643.52a8.983 8.983 0 0 1-8.865-7.452l1.158 1.159a1 1 0 0 0 1.414 0 1 1 0 0 0 0-1.414l-2.78-2.78a1 1 0 0 0-.777-.517zm31.829.662c-.356 11.874-10.074 21.322-21.954 21.342-11.738-.026-21.388-9.263-21.927-20.989-.032.338-.056.676-.073 1.014 0 12.15 9.85 22 22 22s22-9.85 22-22a21.973 21.973 0 0 0-.046-1.367z" transform="translate(0 -610.52)"/><path style="fill:#f1f3fa;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M24 615.52c-9.941 0-18 8.059-18 18 0 9.94 8.059 18 18 18s18-8.06 18-18c0-9.941-8.059-18-18-18zm0 2c8.837 0 16 7.163 16 16 0 8.836-7.163 16-16 16s-16-7.164-16-16c0-8.837 7.163-16 16-16zm0 5c-2.989 0-5.71 1.198-7.693 3.138a1 1 0 0 0-.016 1.414 1 1 0 0 0 1.414.016A8.958 8.958 0 0 1 24 624.52c4.84 0 8.77 3.791 8.99 8.576l-1.283-1.283a1 1 0 0 0-.707-.293 1 1 0 0 0-.707.293 1 1 0 0 0 0 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0 0-1.414 1 1 0 0 0-1.414 0l-1.303 1.302c-.214-5.876-5.062-10.595-10.99-10.595zm-9.85 8.996a1 1 0 0 0-.103.01 1 1 0 0 0-.754.287l-3 3a1 1 0 0 0 0 1.414 1 1 0 0 0 1.414 0l1.377-1.377c.66 5.438 5.303 9.67 10.916 9.67 3.035 0 5.795-1.235 7.785-3.229a1 1 0 0 0-.002-1.414 1 1 0 0 0-1.414 0A8.958 8.958 0 0 1 24 642.52a8.983 8.983 0 0 1-8.865-7.452l1.158 1.159a1 1 0 0 0 1.414 0 1 1 0 0 0 0-1.414l-2.78-2.78a1 1 0 0 0-.777-.517z" transform="translate(0 -610.52)"/></svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/activity/undoIcon.svg b/comm/mail/themes/shared/mail/icons/new/activity/undoIcon.svg
new file mode 100644
index 0000000000..3e4ab55c73
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/activity/undoIcon.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="b"><stop style="stop-color:#e3e5f2;stop-opacity:1" offset="0"/><stop style="stop-color:#f1f3fa;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="a"><stop style="stop-color:#f59e0b;stop-opacity:1" offset="0"/><stop style="stop-color:#fbbf24;stop-opacity:1" offset="1"/></linearGradient><linearGradient xlink:href="#a" id="d" x1="20.147" y1="646.514" x2="20.147" y2="619.524" gradientUnits="userSpaceOnUse"/><linearGradient xlink:href="#b" id="c" x1="19.248" y1="649.521" x2="19.248" y2="617.514" gradientUnits="userSpaceOnUse"/></defs><path style="color:#000;fill:url(#c);stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;fill-opacity:1" d="M20.262 617.52a6.004 6.004 0 0 0-4.317 1.57l-12 11c-2.558 2.347-2.558 6.497 0 8.844l12 11c2.416 2.215 6.261 2.048 8.477-.367 2.215-2.417 2.048-6.262-.367-8.477l-.631-.578H27.512c.09 0 .182-.003.273-.008 4.123-.196 6.294 1.238 6.3 1.246.216.249.155.079.15.328-.006.25-.167 1.073-.965 2.492-1.608 2.858-.57 6.565 2.289 8.172 2.857 1.608 6.565.57 8.171-2.289 3.075-5.466 3.333-12.047-.566-16.555-3.709-4.288-9.549-5.653-15.793-5.382l.129-.004h-4.076l.63-.578c2.416-2.216 2.583-6.06.368-8.477a6.004 6.004 0 0 0-4.16-1.937z" transform="translate(0 -610.52)"/><path style="color:#000;fill:url(#d);stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;fill-opacity:1" d="M20.13 619.524a3 3 0 0 0-2.157.785l-12 11a3 3 0 0 0 0 4.422l12 11a3 3 0 0 0 4.238-.184 3 3 0 0 0-.184-4.238l-6.314-5.79H27.5a3 3 0 0 0 .143-.003c4.705-.224 7.617 1.012 8.712 2.279 1.096 1.267 1.403 2.924-.47 6.254a3 3 0 0 0 1.144 4.086 3 3 0 0 0 4.086-1.145c2.627-4.67 2.684-9.763-.22-13.12-2.88-3.331-7.664-4.599-13.395-4.35H15.713l6.314-5.79a3 3 0 0 0 .184-4.238 3 3 0 0 0-2.08-.968z" transform="translate(0 -610.52)"/><path style="color:#000;fill:#cdd0e5;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="M25.895 622.504c-.21 1.282-1.58 3.91-3.6 5.43l-.63.578h1.759c2.669-2.165 2.697-4.641 2.47-6.008zm-23.78 11.012c-.317 1.935.288 4.003 1.83 5.418l12 11c2.416 2.215 6.261 2.048 8.477-.367 1.282-1.4 1.761-3.276 1.473-5.04a5.922 5.922 0 0 1-1.473 3.047c-2.216 2.416-6.06 2.583-8.477.368l-12-11a5.917 5.917 0 0 1-1.83-3.426zm26.42 4.976c-.242 0-.492.007-.75.02a6.234 6.234 0 0 1-.285.008l-5.972.019.63.578c.458.42.874.93 1.266 1.395H27.512c.09 0 .182-.003.273-.008 3.34-.159 6.06.87 6.459 1.411 1.039-1.881-2.214-3.365-5.709-3.423zm17.488 2.569c-.176 2.504-.973 5.054-2.293 7.4-1.606 2.858-5.314 3.897-8.171 2.29-1.631-.918-2.667-2.518-2.96-4.255-.401 2.425.714 4.984 2.96 6.246 2.857 1.608 6.565.57 8.171-2.289 1.673-2.972 2.503-6.273 2.293-9.392z" transform="translate(0 -610.52)"/><path style="color:#000;fill:#d97706;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none" d="M22.955 622.016a3 3 0 0 1-.928 1.713l-7.408 6.79h1.094l6.314-5.788a3 3 0 0 0 .928-2.715zM5.043 633.02a3 3 0 0 0 .93 2.71l12 11a3 3 0 0 0 4.238-.183 3 3 0 0 0 .744-2.525 3 3 0 0 1-4.982 1.707l-12-11a3 3 0 0 1-.93-1.71Zm23.46 2.47c-.28.003-.566.01-.86.024a3.39 3.39 0 0 1-.143.004H14.62l1.093 1.002H27.5c.048 0 .095-.001.143-.004 4.705-.224 7.617 1.012 8.712 2.279.44.508.748 1.082.844 1.799.15-1.22-.217-2.076-.844-2.801-1.027-1.188-3.65-2.347-7.851-2.303zm14.558 5.077c-.096 2.093-.753 4.3-1.946 6.421a3 3 0 0 1-4.086 1.145 3 3 0 0 1-1.472-2.139 3 3 0 0 0 1.472 3.14 3 3 0 0 0 4.086-1.144c1.386-2.463 2.047-5.042 1.946-7.423z" transform="translate(0 -610.52)"/></svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/activity/warning.svg b/comm/mail/themes/shared/mail/icons/new/activity/warning.svg
new file mode 100644
index 0000000000..2553a85097
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/activity/warning.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="b"><stop style="stop-color:#fbbf24;stop-opacity:1" offset="0"/><stop style="stop-color:#fcd34d;stop-opacity:1" offset="1"/></linearGradient><linearGradient id="a"><stop offset="0" style="stop-color:#ffe900;stop-opacity:1"/><stop offset="1" style="stop-color:#fff376;stop-opacity:1"/></linearGradient><linearGradient xlink:href="#b" id="c" x1="24" y1="652.52" x2="24" y2="614.52" gradientUnits="userSpaceOnUse"/></defs><path style="color:#000;fill:url(#c);stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;fill-opacity:1" d="M24 614.52a4 4 0 0 0-3.535 2.129l-18 30c-1.41 2.663.521 5.87 3.535 5.87h36c3.014 0 4.944-3.207 3.535-5.87l-18-30a4 4 0 0 0-3.535-2.13Z" transform="translate(0 -610.52)"/><path style="color:#000;fill:#a16207;stroke-linecap:round;stroke-linejoin:round" d="M24 627.52c-1.108 0-2 .892-2 2v9c0 1.108.892 2 2 2s2-.892 2-2v-9c0-1.108-.892-2-2-2zm0 15c-1.108 0-2 .892-2 2s.892 2 2 2 2-.892 2-2-.892-2-2-2zm-21.535 4.129zm-.461 2.095c-.006.255-.004.513-.004.776 0 2.5 1.308 4.999 4 5h36c2.692-.001 4-2.5 4-5.002 0-.263.002-.52-.004-.774-.117 2.003-1.756 3.775-3.996 3.776H6c-2.24 0-3.879-1.773-3.996-3.776z" transform="translate(0 -610.52)"/><path style="fill:#2a284b;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stop-color:#000" d="M24 616.52a2 2 0 0 0-1.766 1.062l-18 30c-.706 1.332.259 2.937 1.766 2.938h36c1.507-.001 2.472-1.606 1.766-2.938l-18-30A2 2 0 0 0 24 616.52zm0 3a1 1 0 0 1 .889.54l15.877 27a1 1 0 0 1-.889 1.46H8.123a1 1 0 0 1-.889-1.46l15.877-27a1 1 0 0 1 .889-.54zm0 7c-1.108 0-2 .892-2 2v9c0 1.108.892 2 2 2s2-.892 2-2v-9c0-1.108-.892-2-2-2zm0 15c-1.108 0-2 .892-2 2s.892 2 2 2 2-.892 2-2-.892-2-2-2z" transform="translate(0 -610.52)"/></svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/address-book-indicator.svg b/comm/mail/themes/shared/mail/icons/new/address-book-indicator.svg
new file mode 100644
index 0000000000..edb3e6f56e
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/address-book-indicator.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12">
+ <path d="M6 .5A5.5 5.5 0 0 0 .5 6a5.5 5.5 0 0 0 2 4.232V8.5c0-.554.446-1 1-1h1v-.508A2.5 2.5 0 0 1 3.5 5 2.5 2.5 0 0 1 6 2.5 2.5 2.5 0 0 1 8.5 5a2.5 2.5 0 0 1-1 1.992V7.5h1c.554 0 1 .446 1 1v1.732A5.5 5.5 0 0 0 11.5 6 5.5 5.5 0 0 0 6 .5Z" fill="context-fill"/>
+ <path d="M6 0C2.692 0 0 2.692 0 6s2.692 6 6 6 6-2.692 6-6-2.692-6-6-6Zm0 1c2.767 0 5 2.233 5 5a4.983 4.983 0 0 1-1 3.004V8.5C10 7.678 9.322 7 8.5 7h-.373c.516-.549.87-1.233.873-1.998A.5.5 0 0 0 9 5v-.006a.5.5 0 0 0 0-.002A3.006 3.006 0 0 0 5.996 2 3.008 3.008 0 0 0 3 5.002a.5.5 0 0 0 0 .002c.004.765.358 1.448.873 1.996H3.5C2.678 7 2 7.678 2 8.5v.504A4.983 4.983 0 0 1 1 6c0-2.767 2.233-5 5-5Zm-.004 2A1.994 1.994 0 0 1 8 4.996v.002a1.999 1.999 0 0 1-.8 1.592.5.5 0 0 0-.2.4v.51a.5.5 0 0 0 .5.5h1c.286 0 .5.214.5.5V10a.5.5 0 0 0 0 .002A4.982 4.982 0 0 1 6 11a4.982 4.982 0 0 1-3-.998A.5.5 0 0 0 3 10V8.5c0-.286.214-.5.5-.5h1a.5.5 0 0 0 .5-.5v-.51a.5.5 0 0 0-.2-.4A1.998 1.998 0 0 1 4 5.002V5c0-1.109.887-1.998 1.996-2Z" fill="context-stroke"/>
+</svg>
+
diff --git a/comm/mail/themes/shared/mail/icons/new/attachment-sm.svg b/comm/mail/themes/shared/mail/icons/new/attachment-sm.svg
new file mode 100644
index 0000000000..ac86975ef8
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/attachment-sm.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <path d="M7 2.501A1.5 1.5 0 0 0 4 2.5v5.975c0 1.38 1.12 2.55 2.5 2.55S9 9.855 9 8.475V4.5a.5.5 0 0 1 1 0v4.054c-.044 1.896-1.594 3.47-3.5 3.47S3.044 10.451 3 8.555V2.502a2.5 2.5 0 0 1 5 0v5.027a1.5 1.5 0 0 1-3-.003V3.501a.5.5 0 0 1 1 0v4.024a.5.5 0 0 0 1 0z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/bell-disabled.svg b/comm/mail/themes/shared/mail/icons/new/bell-disabled.svg
new file mode 100644
index 0000000000..05e9884c17
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/bell-disabled.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <path d="M6 1.504c-1.662 0-3.5 1.338-3.5 3v2.88l5.355-5.357C7.285 1.7 6.63 1.504 6 1.504Zm3.5 3.122L4.62 9.504h5.598a.344.346 0 0 0 .346-.346v-.615c0-.575-.461-1.038-1.034-1.038H9.5ZM2.364 7.519a1.029 1.035 0 0 0-.85.85l.85-.849Z" fill="context-fill"/>
+ <path d="M6 1.002c-.964 0-1.932.375-2.687.989C2.558 2.604 2 3.487 2 4.504v2.715c-.555.232-1 .685-1 1.324v.34l1.998-1.998V4.504c0-.645.362-1.26.942-1.732.579-.471 1.363-.766 2.06-.766.487 0 1.013.147 1.485.393l.736-.736c-.668-.416-1.445-.66-2.221-.66Zm4.5.002a.5.5 0 0 0-.354.147l-9 9a.5.5 0 0 0 0 .707.5.5 0 0 0 .707 0l9-9a.5.5 0 0 0 0-.707.5.5 0 0 0-.353-.147Zm-.525 3.147-.973.972v2.883h.529a.523.526 0 0 1 .535.537v.461H5.121l-1.117 1.117c.02.537.175 1.02.517 1.362.369.367.895.521 1.479.521.584 0 1.11-.154 1.478-.521.368-.367.521-.895.522-1.477h2.219a.854.854 0 0 0 .843-.847v-.616c0-.661-.476-1.13-1.064-1.345V4.504c0-.12-.009-.238-.023-.353zM5 10.006h2c0 .416-.096.638-.229.77-.132.132-.354.228-.77.228-.418 0-.64-.096-.773-.228-.131-.132-.228-.354-.228-.77Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/bell-ring.svg b/comm/mail/themes/shared/mail/icons/new/bell-ring.svg
new file mode 100644
index 0000000000..d1f32b8a59
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/bell-ring.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <path d="M6 1.504c-1.662 0-3.5 1.338-3.5 3v3.002a1.03 1.036 0 0 0-1.002 1.037v.616c0 .192.153.345.344.345h8.377a.344.346 0 0 0 .346-.346v-.615c0-.575-.461-1.038-1.034-1.038H9.5V4.504c0-1.662-1.838-3-3.5-3z" fill="context-fill"/>
+ <path d="M2.498.007a.5.5 0 0 0-.293.095C.364 1.452.11 3.538 0 5.477a.5.5 0 0 0 .473.527A.5.5 0 0 0 1 5.532c.106-1.896.31-3.536 1.795-4.625A.5.5 0 0 0 2.902.21a.5.5 0 0 0-.404-.202Zm7.004 0a.5.5 0 0 0-.404.202.5.5 0 0 0 .107.698C10.69 1.997 10.894 3.636 11 5.53a.5.5 0 0 0 .527.473.5.5 0 0 0 .473-.527c-.108-1.939-.364-4.024-2.205-5.375a.5.5 0 0 0-.293-.095ZM6 1.002c-.964 0-1.932.375-2.687.989C2.558 2.604 2 3.487 2 4.504v2.715c-.555.232-1 .685-1 1.324v.616c0 .46.384.847.842.847H4c0 .582.154 1.11.521 1.477.369.367.895.521 1.479.521.584 0 1.11-.154 1.478-.521.368-.367.521-.895.522-1.477h2.219a.854.854 0 0 0 .843-.847v-.616c0-.661-.476-1.13-1.064-1.345V4.504c0-1.017-.557-1.9-1.312-2.513C7.93 1.377 6.964 1.002 6 1.002Zm0 1.004c.698 0 1.481.295 2.06.766.58.47.942 1.087.942 1.732v3.502h.529a.523.526 0 0 1 .535.537v.461h-8.07v-.46a.523.526 0 0 1 .518-.538l.484-.014V4.504c0-.645.362-1.26.942-1.732.579-.471 1.363-.766 2.06-.766Zm-1 8h2c0 .416-.096.638-.229.77-.132.132-.354.228-.77.228-.418 0-.64-.096-.773-.228-.131-.132-.228-.354-.228-.77Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/bell.svg b/comm/mail/themes/shared/mail/icons/new/bell.svg
new file mode 100644
index 0000000000..e44e0058d8
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/bell.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <path d="M6 1.504c-1.662 0-3.5 1.338-3.5 3v3.002a1.03 1.036 0 0 0-1.002 1.037v.616c0 .192.153.345.344.345h8.377a.344.346 0 0 0 .346-.346v-.615c0-.575-.461-1.038-1.034-1.038H9.5V4.504c0-1.662-1.838-3-3.5-3z" fill="context-fill"/>
+ <path d="M6 1.002c-.964 0-1.932.375-2.687.989C2.558 2.604 2 3.487 2 4.504v2.715c-.555.232-1 .685-1 1.324v.616c0 .46.384.847.842.847H4c0 .582.154 1.11.521 1.477.369.367.895.521 1.479.521.584 0 1.11-.154 1.478-.521.368-.367.521-.895.522-1.477h2.219a.854.854 0 0 0 .843-.847v-.616c0-.661-.476-1.13-1.064-1.345V4.504c0-1.017-.557-1.9-1.312-2.513C7.93 1.377 6.964 1.002 6 1.002Zm0 1.004c.698 0 1.481.295 2.06.766.58.47.942 1.087.942 1.732v3.502h.529a.523.526 0 0 1 .535.537v.461h-8.07v-.46a.523.526 0 0 1 .518-.538l.484-.014V4.504c0-.645.362-1.26.942-1.732.579-.471 1.363-.766 2.06-.766Zm-1 8h2c0 .416-.096.638-.229.77-.132.132-.354.228-.77.228-.418 0-.64-.096-.773-.228-.131-.132-.228-.354-.228-.77Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/calendar-empty.svg b/comm/mail/themes/shared/mail/icons/new/calendar-empty.svg
new file mode 100644
index 0000000000..6bd489de69
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/calendar-empty.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M2.5.5c-1.108 0-2 2.892-2 4h15c0-1.108-.892-4-2-4z" fill="context-fill"/>
+ <path d="M3 0C1.347 0 0 1.346 0 3v10c0 1.653 1.347 3 3 3h10c1.653 0 3-1.347 3-3V3c0-1.654-1.347-3-3-3Zm0 1h10c1.117 0 2 .883 2 2v1h-2v-.5c0-.667-1-.667-1 0V4H4v-.5c0-.667-1-.667-1 0V4H1V3c0-1.117.883-2 2-2ZM1 5h2v.5c0 .667 1 .667 1 0V5h8v.5c0 .667 1 .667 1 0V5h2v8c0 1.116-.883 2-2 2H3c-1.117 0-2-.884-2-2Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/chat-lock-finished.svg b/comm/mail/themes/shared/mail/icons/new/chat-lock-finished.svg
new file mode 100644
index 0000000000..80002b2c23
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/chat-lock-finished.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <path d="M3 4.5c-.831 0-1.5.669-1.5 1.5v3c0 .83.669 1.5 1.5 1.5h3.148A3.5 3.5 0 0 1 6 9.5 3.5 3.5 0 0 1 9.5 6c0-.831-.669-1.5-1.5-1.5Z" fill="context-fill"/>
+ <path d="M5.5 0C3.57 0 2 1.57 2 3.5v.771C1.404 4.619 1 5.264 1 6v3c0 1.099.9 2 2 2h3.342a3.5 3.5 0 0 1-.307-1H3c-.563 0-1-.438-1-1V6c0-.563.437-1 1-1h5c.563 0 1 .437 1 1v.035A3.5 3.5 0 0 1 9.5 6a3.5 3.5 0 0 1 .5.035V6c0-.736-.404-1.381-1-1.729V3.5C9 1.57 7.43 0 5.5 0Zm0 1C6.894 1 8 2.106 8 3.5V4H3v-.5C3 2.106 4.106 1 5.5 1Z" fill="context-stroke"/>
+ <path fill="#f97316" d="M12 9.5A2.5 2.5 0 0 1 9.5 12 2.5 2.5 0 0 1 7 9.5 2.5 2.5 0 0 1 9.5 7 2.5 2.5 0 0 1 12 9.5Z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/chat-lock-insecure.svg b/comm/mail/themes/shared/mail/icons/new/chat-lock-insecure.svg
new file mode 100644
index 0000000000..42f368957f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/chat-lock-insecure.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <path d="M3 4.5c-.831 0-1.5.669-1.5 1.5v3c0 .83.669 1.5 1.5 1.5h3.385c.018-.02.035-.042.054-.06l.94-.94-.94-.94a1.515 1.515 0 0 1 0-2.12 1.501 1.501 0 0 1 2.122 0l.939.939v-1.38c0-.83-.669-1.5-1.5-1.5H3Z" fill="context-fill"/>
+ <path d="M5.5 0C3.57 0 2 1.57 2 3.5v.771C1.404 4.619 1 5.264 1 6v3c0 1.099.9 2 2 2h3.092a1.45 1.45 0 0 1 .347-.56l.44-.44H3c-.563 0-1-.438-1-1V6c0-.563.437-1 1-1h5c.563 0 1 .437 1 1v.879l.5.5.5-.5v-.88c0-.735-.404-1.38-1-1.728V3.5C9 1.57 7.43 0 5.5 0Zm0 1C6.894 1 8 2.106 8 3.5V4H3v-.5C3 2.106 4.106 1 5.5 1Z" fill="context-stroke"/>
+ <path fill="#ef4444" d="M7.5 7a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .707L8.793 9.5l-1.647 1.646a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0L9.5 10.207l1.646 1.646a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.707L10.207 9.5l1.647-1.647a.5.5 0 0 0 0-.707.5.5 0 0 0-.708 0L9.5 8.793 7.854 7.146A.5.5 0 0 0 7.5 7Z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/chat-lock-private.svg b/comm/mail/themes/shared/mail/icons/new/chat-lock-private.svg
new file mode 100644
index 0000000000..cbffebaf75
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/chat-lock-private.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <path d="M3 4.5c-.831 0-1.5.669-1.5 1.5v3c0 .83.669 1.5 1.5 1.5h3.379l-.94-.94a1.515 1.515 0 0 1 0-2.12 1.515 1.515 0 0 1 2.122 0l.775.774L9.5 6.664V6c0-.831-.669-1.5-1.5-1.5Z" fill="context-fill"/>
+ <path d="M5.5 0C3.57 0 2 1.57 2 3.5v.771C1.404 4.619 1 5.264 1 6v3c0 1.099.9 2 2 2h3.877l-.998-1H3c-.563 0-1-.438-1-1V6c0-.563.437-1 1-1h5c.563 0 1 .437 1 1v1.33L10 6v-.002c0-.735-.404-1.38-1-1.727V3.5C9 1.57 7.43 0 5.5 0Zm0 1C6.894 1 8 2.106 8 3.5V4H3v-.5C3 2.106 4.106 1 5.5 1Z" fill="context-stroke"/>
+ <path fill="#4ade80" d="M11.43 6.006a.5.5 0 0 0-.33.193L8.445 9.74 6.854 8.145a.5.5 0 0 0-.708 0 .5.5 0 0 0 0 .708l2 2A.5.5 0 0 0 8.9 10.8l3-4a.5.5 0 0 0-.1-.701.5.5 0 0 0-.37-.094z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/chat-lock-unverified.svg b/comm/mail/themes/shared/mail/icons/new/chat-lock-unverified.svg
new file mode 100644
index 0000000000..f2348401c7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/chat-lock-unverified.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <path d="M3 4.5c-.831 0-1.5.669-1.5 1.5v3c0 .83.669 1.5 1.5 1.5h2.3l2.42-4.031c.264-.397.67-.47.67-.47.17 0 .392-.002.61 0h.5c0-.83-.669-1.5-1.5-1.5z" fill="context-fill"/>
+ <path d="M5.5 0C3.57 0 2 1.57 2 3.5v.771C1.404 4.619 1 5.264 1 6v3c0 1.099.9 2 2 2h2l.6-1H3c-.563 0-1-.438-1-1V6c0-.563.437-1 1-1h5c.563 0 1 .437 1 1h1c0-.736-.404-1.381-1-1.729V3.5C9 1.57 7.43 0 5.5 0Zm0 1C6.894 1 8 2.106 8 3.5V4H3v-.5C3 2.106 4.106 1 5.5 1Z" fill="context-stroke"/>
+ <path fill="#facc15" d="M9 7a.5.5 0 0 0-.424.234l-2.5 4A.5.5 0 0 0 6.5 12h5a.5.5 0 0 0 .424-.766l-2.5-4A.5.5 0 0 0 9 7Z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/chat-lock.svg b/comm/mail/themes/shared/mail/icons/new/chat-lock.svg
new file mode 100644
index 0000000000..e09622329c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/chat-lock.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <path d="M3 4.5h5c.831 0 1.5.669 1.5 1.5v3c0 .83-.669 1.5-1.5 1.5H3c-.831 0-1.5-.67-1.5-1.5V6c0-.831.669-1.5 1.5-1.5Z" fill="context-fill"/>
+ <path d="M5.5 0C3.57 0 2 1.57 2 3.5v.771C1.404 4.619 1 5.264 1 6v3c0 1.099.9 2 2 2h5c1.1 0 2-.901 2-2V6c0-.736-.404-1.381-1-1.729V3.5C9 1.57 7.43 0 5.5 0Zm0 1C6.894 1 8 2.106 8 3.5V4H3v-.5C3 2.106 4.106 1 5.5 1ZM3 5h5c.563 0 1 .437 1 1v3c0 .562-.437 1-1 1H3c-.563 0-1-.438-1-1V6c0-.563.437-1 1-1Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/circle-sm.svg b/comm/mail/themes/shared/mail/icons/new/circle-sm.svg
new file mode 100644
index 0000000000..8497dcfac1
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/circle-sm.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" fill="context-fill">
+ <circle cx="5" cy="5" r="5" />
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/column-menu.svg b/comm/mail/themes/shared/mail/icons/new/column-menu.svg
new file mode 100644
index 0000000000..336cb16281
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/column-menu.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <path d="M3 2c-.554 0-1 .446-1 1v1h8V3c0-.554-.446-1-1-1Z" fill="context-fill"/>
+ <path d="M3 1c-1.1 0-2 .9-2 2v6c0 1.099.9 2 2 2h4.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H5V5h2v.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V5h2v.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V3c0-1.1-.9-2-2-2Zm0 1h1v2H2V3c0-.563.437-1 1-1Zm2 0h2v2H5Zm3 0h1c.563 0 1 .437 1 1v1H8ZM2 5h2v5H3c-.563 0-1-.438-1-1Zm5.5 2a.5.5 0 0 0-.416.777l2 3a.5.5 0 0 0 .832 0l2-3A.5.5 0 0 0 11.5 7Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/account-settings.svg b/comm/mail/themes/shared/mail/icons/new/compact/account-settings.svg
new file mode 100644
index 0000000000..7f7d3f47f0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/account-settings.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M8 .498a1 1 0 0 0-.48.123l-5.5 3c-.32.176-.52.514-.52.879v7c0 .365.2.703.52.879l1.48.807V12c0-.831.669-1.5 1.5-1.5h1.5c-.741-.295-1.999-1.953-2-3.5a3.5 3.5 0 0 1 7 0c-.001 1.547-1.259 3.205-2 3.5H11c.831 0 1.5.669 1.5 1.5v1.186l1.48-.807c.32-.176.52-.514.52-.879v-7c0-.365-.2-.703-.52-.879l-5.5-3A1 1 0 0 0 8 .498ZM7.969 15.5h.062z" fill="context-fill"/>
+ <path d="M8-.002c-.248 0-.496.06-.72.184l-5.5 3A1.5 1.5 0 0 0 1 4.5v7a1.502 1.502 0 0 0 .78 1.318l5.5 3c.448.246.992.246 1.44 0l5.5-3A1.5 1.5 0 0 0 15 11.5v-7a1.502 1.502 0 0 0-.78-1.318l-5.5-3A1.499 1.499 0 0 0 8-.002ZM8 1a.5.5 0 0 1 .24.06l5.5 3c.16.088.26.258.26.44v7c0 .182-.1.352-.26.44l-.74.404V12c0-1.1-.9-2-2-2h-.326c.167-.2.372-.269.527-.514C11.646 8.782 12 7.91 12 7c0-2.203-1.797-4-4-4-2.203 0-4 1.797-4 4 0 .909.354 1.782.799 2.486.155.245.36.314.527.514H5c-1.1 0-2 .9-2 2v.344l-.74-.405A.503.503 0 0 1 2 11.5v-7c0-.182.1-.352.26-.44l5.5-3A.5.5 0 0 1 8 1Zm0 3c1.663 0 3 1.337 3 3 0 .638-.275 1.368-.645 1.953-.369.585-.879 1.018-1.04 1.082A.5.5 0 0 0 9.5 11H11c.563 0 1 .437 1 1v.889l-3.76 2.05a.502.502 0 0 1-.48 0L4 12.89V12c0-.563.437-1 1-1h1.5a.5.5 0 0 0 .186-.965c-.162-.064-.672-.497-1.041-1.082C5.275 8.368 5 7.638 5 7c0-1.663 1.337-3 3-3Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/add-circle.svg b/comm/mail/themes/shared/mail/icons/new/compact/add-circle.svg
new file mode 100644
index 0000000000..cef48e8643
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/add-circle.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M7.5.47A7.03 7.03 0 0 0 .47 7.5a7.03 7.03 0 0 0 7.03 7.03 7.03 7.03 0 0 0 7.03-7.03A7.03 7.03 0 0 0 7.5.47Z" stroke-opacity="0.2" stroke="context-stroke" fill="context-fill"/>
+ <path d="M7.5 4a.5.5 0 0 0-.5.5V7H4.5a.5.5 0 0 0 0 1H7v2.5a.5.5 0 0 0 1 0V8h2.5a.5.5 0 0 0 0-1H8V4.5a.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/add.svg b/comm/mail/themes/shared/mail/icons/new/compact/add.svg
new file mode 100644
index 0000000000..a15b3f2b61
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/add.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M7.5 3a.5.5 0 0 0-.5.5V7H3.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5H7v3.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V8h3.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H8V3.5a.5.5 0 0 0-.5-.5z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/address-book.svg b/comm/mail/themes/shared/mail/icons/new/compact/address-book.svg
new file mode 100644
index 0000000000..05c49694d7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/address-book.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M4 1c-1.1 0-2 .9-2 2h-.5a.5.5 0 0 0 0 1H2v2h-.5a.5.5 0 0 0-.492.5.5.5 0 0 0 .492.5H2v2h-.5a.5.5 0 0 0 0 1H2v2h-.5a.5.5 0 0 0-.492.5.5.5 0 0 0 .492.5H2c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2Zm0 1h8c.563 0 1 .437 1 1v10c0 .563-.437 1-1 1H4c-.563 0-1-.437-1-1h.5a.5.5 0 0 0 .428-.748A.5.5 0 0 0 3.5 12H3v-2h.5a.5.5 0 0 0 .428-.252A.5.5 0 0 0 3.5 9H3V7h.5a.5.5 0 0 0 .428-.252.5.5 0 0 0 0-.496A.5.5 0 0 0 3.5 6H3V4h.5a.5.5 0 0 0 .428-.252A.5.5 0 0 0 3.5 3H3c0-.563.437-1 1-1Zm4.5 2c-.861 0-1.537.312-1.947.805C6.143 5.297 6 5.917 6 6.5c0 .861.298 1.486.61 1.875.181.227.258.243.39.334V9h-.5C5.678 9 5 9.678 5 10.5v1a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-1c0-.286.214-.5.5-.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.277-.447s-.143-.067-.332-.303C7.2 7.514 7 7.139 7 6.5c0-.417.108-.797.322-1.055C7.537 5.188 7.862 5 8.5 5c.639 0 .963.188 1.178.445.214.258.322.638.322 1.055 0 .639-.202 1.014-.39 1.25-.19.236-.333.303-.333.303A.5.5 0 0 0 9 8.5v1a.5.5 0 0 0 .5.5h1c.286 0 .5.214.5.5v1a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-1c0-.822-.678-1.5-1.5-1.5H10v-.291c.132-.091.209-.107.39-.334.312-.389.61-1.014.61-1.875 0-.583-.142-1.203-.553-1.695C10.037 4.312 9.361 4 8.5 4Z" fill="context-stroke"/>
+ <path d="M4 2c-.554 0-1 .446-1 1v10c0 .554.446 1 1 1h8c.554 0 1-.446 1-1V3c0-.554-.446-1-1-1Z" fill="context-fill"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/app-menu-badged.svg b/comm/mail/themes/shared/mail/icons/new/compact/app-menu-badged.svg
new file mode 100644
index 0000000000..4b51fb0a8c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/app-menu-badged.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M2.5 3c-.667 0-.667 1 0 1h5c.667 0 .667-1 0-1zm0 4c-.667 0-.667 1 0 1h11c.667 0 .667-1 0-1zm0 4c-.667 0-.667 1 0 1h11c.667 0 .667-1 0-1z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/app-menu.svg b/comm/mail/themes/shared/mail/icons/new/compact/app-menu.svg
new file mode 100644
index 0000000000..c0a65b1818
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/app-menu.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M2.5 3a.5.5 0 1 0 0 1h11a.5.5 0 0 0 0-1Zm0 4a.5.5 0 1 0 0 1h11a.5.5 0 0 0 0-1Zm0 4a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/archive.svg b/comm/mail/themes/shared/mail/icons/new/compact/archive.svg
new file mode 100644
index 0000000000..0d29b3243d
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/archive.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M4 2c-1.108 0-2 .892-2 2v8c0 1.108.892 2 2 2h8c1.108 0 2-.892 2-2V4c0-1.108-.892-2-2-2Zm7 1H5ZM4 4h8v1.5V5v1h-1.17C10.42 7.167 9.31 8 8 8s-2.42-.833-2.83-2H4V5v.5Z" fill="context-fill"/>
+ <path d="M4 1C2.347 1 1 2.347 1 4v8c0 1.653 1.347 3 3 3h8c1.653 0 3-1.347 3-3V4c0-1.653-1.347-3-3-3Zm0 1h8c1.117 0 2 .883 2 2v1h-1V4c0-.545-.455-1-1-1H4c-.545 0-1 .455-1 1v1.002c-.342 0-.673 0-1-.002V4c0-1.117.883-2 2-2Zm0 2h8v1h-1.5a.5.5 0 0 0-.5.5C10 6.167 9.278 7 8 7s-2-.833-2-1.5a.5.5 0 0 0-.5-.5c-.399 0-.951 0-1.5.002Zm1.244 2C5.543 7.084 6.524 8 8 8c1.476 0 2.457-.916 2.756-2H14v6c0 1.117-.883 2-2 2H9v-1H8v1H4c-1.117 0-2-.883-2-2V6.002c1.123.004 2.362-.001 3.244-.002ZM8 13v-1H7v1zm0-1h1v-1H8Zm0-1v-1H7v1zm0-1h1V9H8Zm0-1V8H7v1z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/attachment.svg b/comm/mail/themes/shared/mail/icons/new/compact/attachment.svg
new file mode 100644
index 0000000000..e7b8f9717f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/attachment.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M9 3.5a1.5 1.5 0 0 0-3-.001v7.95C6 12.83 7.12 14 8.5 14s2.5-1.17 2.5-2.55V5.5a.5.5 0 0 1 1 0v6.03C11.955 13.427 10.405 15 8.5 15S5.044 13.426 5 11.53V3.5a2.5 2.5 0 0 1 5 0v7.003a1.5 1.5 0 0 1-3-.003v-5a.5.5 0 0 1 1 0v5a.5.5 0 0 0 1 0Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/calendar-invite.svg b/comm/mail/themes/shared/mail/icons/new/compact/calendar-invite.svg
new file mode 100644
index 0000000000..ae2b4b0f0a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/calendar-invite.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4 2c-1.108 0-2 .892-2 2h12c0-1.108-.892-2-2-2Zm1 5.5c-.277 0-.5.223-.5.5v1c0 .277.223.5.5.5h1c.277 0 .5-.223.5-.5V8c0-.277-.223-.5-.5-.5Zm5 3c-.277 0-.5.223-.5.5v1c0 .277.223.5.5.5h1c.277 0 .5-.223.5-.5v-1c0-.277-.223-.5-.5-.5z" fill="context-fill"/>
+ <path d="M4 1C2.347 1 1 2.346 1 4v8c0 1.653 1.347 3 3 3h8c1.653 0 3-1.347 3-3V4c0-1.654-1.347-3-3-3Zm0 1h8c1.117 0 2 .883 2 2h-2v-.5a.5.5 0 1 0-1 0V4H5v-.5c0-.277-.208-.5-.467-.5h-.066C4.208 3 4 3.223 4 3.5V4H2c0-1.117.883-2 2-2ZM2 5h2v.5c0 .277.208.5.467.5h.066C4.792 6 5 5.777 5 5.5V5h6v.5a.5.5 0 1 0 1 0V5h2v7c0 1.116-.883 2-2 2H4c-1.117 0-2-.884-2-2Zm2.5 2a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5ZM5 8h1v1H5Zm3.5 0a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm1 2a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5Zm-5 1a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm5.5 0h1v1h-1z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/calendar-today.svg b/comm/mail/themes/shared/mail/icons/new/compact/calendar-today.svg
new file mode 100644
index 0000000000..facf5a9871
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/calendar-today.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4 2c-1.108 0-2 .892-2 2h12c0-1.108-.892-2-2-2Zm1 5.5c-.277 0-.5.223-.5.5v1c0 .277.223.5.5.5h1c.277 0 .5-.223.5-.5V8c0-.277-.223-.5-.5-.5Z" fill="context-fill"/>
+ <path d="M4 1C2.347 1 1 2.346 1 4v8c0 1.653 1.347 3 3 3h8c1.653 0 3-1.347 3-3V4c0-1.654-1.347-3-3-3Zm0 1h8c1.117 0 2 .883 2 2h-2v-.5a.5.5 0 0 0-.5-.493.5.5 0 0 0-.5.493V4H5v-.5a.5.5 0 0 0-.5-.493.5.5 0 0 0-.5.493V4H2c0-1.117.883-2 2-2ZM2 5h2v.5a.5.5 0 0 0 1 0V5h6v.5a.5.5 0 0 0 1 0V5h2v7c0 1.116-.883 2-2 2H4c-1.117 0-2-.884-2-2Zm2.5 2a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5Zm3.975 0A.5.5 0 1 0 8.5 7ZM10.5 7a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .428-.252A.5.5 0 0 0 11.5 7ZM5 8h1v1H5Zm3.475 1A.5.5 0 1 0 8.5 9ZM10.5 9a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .428-.252A.5.5 0 0 0 11.5 9Zm-6 2a.5.5 0 0 0-.492.5.5.5 0 0 0 .492.5h1a.5.5 0 0 0 .428-.748A.5.5 0 0 0 5.5 11Zm3.016 0a.5.5 0 0 0-.493.5.5.5 0 0 0 .493.5h1a.5.5 0 0 0 .427-.748.5.5 0 0 0-.427-.252Zm2.984 0a.5.5 0 0 0-.492.5.5.5 0 0 0 .492.5h1a.5.5 0 0 0 .428-.748A.5.5 0 0 0 11.5 11Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/calendar.svg b/comm/mail/themes/shared/mail/icons/new/compact/calendar.svg
new file mode 100644
index 0000000000..9620681019
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/calendar.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M4 2c-1.108 0-2 .892-2 2h12c0-1.108-.892-2-2-2Z" fill="context-fill"/>
+ <path d="M4 1C2.347 1 1 2.347 1 4v8c0 1.653 1.347 3 3 3h8c1.653 0 3-1.347 3-3V4c0-1.653-1.347-3-3-3Zm0 1h8c1.117 0 2 .883 2 2h-2v-.5a.5.5 0 0 0-.5-.492.5.5 0 0 0-.5.492V4H5v-.5a.5.5 0 0 0-.5-.492.5.5 0 0 0-.5.492V4H2c0-1.117.883-2 2-2ZM2 5h2v.5a.5.5 0 0 0 1 0V5h6v.5a.5.5 0 0 0 1 0V5h2v7c0 1.117-.883 2-2 2H4c-1.117 0-2-.883-2-2Zm2.475 2A.5.5 0 0 0 4.5 8h1a.5.5 0 1 0 0-1zm3 0A.5.5 0 0 0 7.5 8h1a.5.5 0 1 0 0-1zm3 0a.5.5 0 0 0 .025 1h1a.5.5 0 1 0 0-1zm-6 2a.5.5 0 0 0 .025 1h1a.5.5 0 1 0 0-1zm3 0a.5.5 0 0 0 .025 1h1a.5.5 0 1 0 0-1zm3 0a.5.5 0 0 0 .025 1h1a.5.5 0 1 0 0-1zm-6 2a.5.5 0 0 0 .025 1h1a.5.5 0 1 0 0-1zm3 0a.5.5 0 0 0 .025 1h1a.5.5 0 1 0 0-1zm3 0a.5.5 0 0 0 .025 1h1a.5.5 0 1 0 0-1z" fill="context-stroke"/>
+</svg>
+
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/chat.svg b/comm/mail/themes/shared/mail/icons/new/compact/chat.svg
new file mode 100644
index 0000000000..984941fd89
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/chat.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M4 1C2.347 1 1 2.347 1 4v3c0 1.653 1.347 3 3 3v2.5a.5.5 0 0 0 .854.354L5.707 12h2.586l2.853 2.854A.5.5 0 0 0 12 14.5V12c1.653 0 3-1.347 3-3V6c0-1.35-.899-2.497-2.129-2.871A3.007 3.007 0 0 0 10 1Zm0 1h6c1.117 0 2 .883 2 2v3c0 1.117-.883 2-2 2H7.5a.5.5 0 0 0-.354.146L5 11.293V9.5a.5.5 0 0 0-.5-.5H4c-1.117 0-2-.883-2-2V4c0-1.117.883-2 2-2Zm9 2.264c.6.342 1 .986 1 1.736v3c0 1.117-.883 2-2 2h-.5a.5.5 0 0 0-.5.5v1.793l-2.146-2.147A.5.5 0 0 0 8.5 11H6.707l1-1H10c1.653 0 3-1.347 3-3zM4.5 5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm1.975 0A.5.5 0 0 0 6.5 6h1a.499.499 0 1 0 0-1H6.475ZM9.5 5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+ <path d="M13 4.264c.6.342 1 .986 1 1.736v3c0 1.117-.883 2-2 2h-.5a.5.5 0 0 0-.5.5v1.793l-2.146-2.147A.5.5 0 0 0 8.5 11H6.707l1-1H10c1.653 0 3-1.347 3-3z" fill="context-fill"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/check.svg b/comm/mail/themes/shared/mail/icons/new/compact/check.svg
new file mode 100644
index 0000000000..0e6e03b7eb
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/check.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <!-- Use both context-fill and context-stroke path to account for the styling coming from toolkit for those sections we can't override. -->
+ <path d="M13.43 3.006a.5.5 0 0 0-.33.195l-5.655 7.537-3.591-3.592a.5.5 0 0 0-.708 0 .5.5 0 0 0 0 .708l4 4A.5.5 0 0 0 7.9 11.8l6-8a.5.5 0 0 0-.1-.701.5.5 0 0 0-.37-.094z" fill="context-fill transparent"/>
+ <path d="M13.43 3.006a.5.5 0 0 0-.33.195l-5.655 7.537-3.591-3.592a.5.5 0 0 0-.708 0 .5.5 0 0 0 0 .708l4 4A.5.5 0 0 0 7.9 11.8l6-8a.5.5 0 0 0-.1-.701.5.5 0 0 0-.37-.094z" fill="context-stroke transparent"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/checkbox.svg b/comm/mail/themes/shared/mail/icons/new/compact/checkbox.svg
new file mode 100644
index 0000000000..dccc7e9a5b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/checkbox.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4 1C2.347 1 1 2.346 1 4v8c0 1.653 1.347 3 3 3h8c1.653 0 3-1.347 3-3V4c0-1.654-1.347-3-3-3Zm0 1h8c1.117 0 2 .883 2 2v8c0 1.116-.883 2-2 2H4c-1.117 0-2-.884-2-2V4c0-1.117.883-2 2-2Z" fill="context-stroke"/>
+ <path d="M11.402 4.01a.5.5 0 0 0-.318.212L7.422 9.714 4.854 7.146a.5.5 0 0 0-.708 0 .5.5 0 0 0 0 .707l3 3a.5.5 0 0 0 .77-.076l4-6a.5.5 0 0 0-.139-.693.5.5 0 0 0-.375-.075Z" fill-opacity="context-fill-opacity" fill="context-fill"/>
+ <path d="M4.5 7a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Z" fill-opacity="context-stroke-opacity" fill="context-fill"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/clock.svg b/comm/mail/themes/shared/mail/icons/new/compact/clock.svg
new file mode 100644
index 0000000000..563d5ba2b9
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/clock.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M14.5 7.5a7 7 0 0 1-7 7 7 7 0 0 1-7-7 7 7 0 0 1 7-7 7 7 0 0 1 7 7z" fill="context-fill"/>
+ <path d="M7.5 0C3.364 0 0 3.363 0 7.5 0 11.636 3.364 15 7.5 15S15 11.636 15 7.5C15 3.363 11.636 0 7.5 0Zm0 1C11.096 1 14 3.904 14 7.5c0 3.595-2.904 6.5-6.5 6.5A6.492 6.492 0 0 1 1 7.5C1 3.904 3.904 1 7.5 1Zm0 1a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H8V2.5a.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/close.svg b/comm/mail/themes/shared/mail/icons/new/compact/close.svg
new file mode 100644
index 0000000000..1317c42410
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/close.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4.5 4a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .707L7.293 8l-3.147 3.146a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0L8 8.707l3.146 3.146a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.707L8.707 8l3.147-3.147a.5.5 0 0 0 0-.707.5.5 0 0 0-.708 0L8 7.293 4.854 4.146A.5.5 0 0 0 4.5 4z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/cloud-download.svg b/comm/mail/themes/shared/mail/icons/new/compact/cloud-download.svg
new file mode 100644
index 0000000000..60d86587da
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/cloud-download.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M10.5 1.5a2.993 2.993 0 0 0-2.62 1.533A2.74 2.74 0 0 0 6.25 2.5c-1.276 0-2.343.86-2.656 2.035A2.492 2.492 0 0 0 1.5 7c0 1.385 1.115 2.5 2.5 2.5h3v-1C7 7.669 7.669 7 8.5 7s1.5.669 1.5 1.5v1h2c1.385 0 2.5-1.115 2.5-2.5 0-.82-.393-1.543-1-1.998V4.5c0-1.662-1.338-3-3-3z" fill="context-fill"/>
+ <path d="M10.5 1c-1.158 0-2.125.618-2.762 1.486C7.28 2.24 6.805 2 6.25 2c-1.405 0-2.54.932-2.992 2.186C1.982 4.53 1 5.618 1 7c0 1.653 1.347 3 3 3h2.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H4c-1.117 0-2-.883-2-2 0-1.005.72-1.816 1.674-1.97a.5.5 0 0 0 .402-.366A2.238 2.238 0 0 1 6.25 3c.504 0 .96.161 1.334.436a.5.5 0 0 0 .732-.159A2.489 2.489 0 0 1 10.5 2C11.894 2 13 3.106 13 4.5v.502a.5.5 0 0 0 .2.4c.486.366.8.937.8 1.598 0 1.117-.883 2-2 2h-1.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5H12c1.653 0 3-1.347 3-3 0-.868-.41-1.615-1-2.162V4.5C14 2.57 12.43 1 10.5 1zm-2 7.006a.5.5 0 0 0-.5.5v4.793l-2.146-2.147a.5.5 0 1 0-.708.707l3 3a.482.482 0 0 0 .036.026.495.495 0 0 0 .318.121.468.468 0 0 0 .035-.006.504.504 0 0 0 .15-.035.495.495 0 0 0 .133-.08.482.482 0 0 0 .036-.026l3-3a.5.5 0 1 0-.708-.707L9 13.3V8.506a.5.5 0 0 0-.5-.5z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/collapse.svg b/comm/mail/themes/shared/mail/icons/new/compact/collapse.svg
new file mode 100644
index 0000000000..d0dae80d20
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/collapse.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M2.5 2a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-10a.5.5 0 0 0-.5-.5Zm6 1a.5.5 0 0 0-.354.146l-4 4A.5.5 0 0 0 4 7.5a.5.5 0 0 0 .146.354l4 4a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.708L5.707 8H13.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H5.707l3.147-3.146a.5.5 0 0 0 0-.708A.5.5 0 0 0 8.5 3Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/compress.svg b/comm/mail/themes/shared/mail/icons/new/compact/compress.svg
new file mode 100644
index 0000000000..05a4391e7a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/compress.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M6.5 5.5h3c.554 0 1 .446 1 1v3c0 .554-.446 1-1 1h-3c-.554 0-1-.446-1-1v-3c0-.554.446-1 1-1z" fill="context-fill"/>
+ <path d="M1.5 1a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .707L3.293 4H1.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .354-.147.5.5 0 0 0 .076-.1.5.5 0 0 0 .004-.003.5.5 0 0 0 .002-.004.5.5 0 0 0 .046-.117.5.5 0 0 0 .018-.13v-3a.5.5 0 0 0-.5-.5.5.5 0 0 0-.5.5v1.794L1.854 1.146A.5.5 0 0 0 1.5 1Zm10 0a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .146.353.5.5 0 0 0 .1.076.5.5 0 0 0 .004.004.5.5 0 0 0 .004.002.5.5 0 0 0 .117.047A.5.5 0 0 0 11.5 5h3a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5h-1.793l2.147-2.147A.5.5 0 0 0 15 1.5a.5.5 0 0 0-.146-.354.5.5 0 0 0-.708 0L12 3.293V1.5a.5.5 0 0 0-.5-.5Zm-5 4C5.678 5 5 5.677 5 6.5v3c0 .822.678 1.5 1.5 1.5h3c.822 0 1.5-.678 1.5-1.5v-3c0-.823-.678-1.5-1.5-1.5Zm0 1h3c.286 0 .5.214.5.5v3c0 .285-.214.5-.5.5h-3a.488.488 0 0 1-.5-.5v-3c0-.286.214-.5.5-.5Zm-5 5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h1.793l-2.147 2.146A.5.5 0 0 0 1 14.5a.5.5 0 0 0 .146.353.5.5 0 0 0 .708 0L4 12.707V14.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.146-.354.5.5 0 0 0-.1-.076.5.5 0 0 0-.004-.004.5.5 0 0 0-.004-.002.5.5 0 0 0-.117-.047A.5.5 0 0 0 4.5 11Zm10 0a.5.5 0 0 0-.354.146.5.5 0 0 0-.076.1.5.5 0 0 0-.004.004.5.5 0 0 0-.002.004.5.5 0 0 0-.046.117.5.5 0 0 0-.018.129v3a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-1.793l2.146 2.146A.5.5 0 0 0 14.5 15a.5.5 0 0 0 .354-.147.5.5 0 0 0 0-.707L12.707 12H14.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/contact.svg b/comm/mail/themes/shared/mail/icons/new/compact/contact.svg
new file mode 100644
index 0000000000..5851d57e1f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/contact.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M7.5.5a7 7 0 0 0-7 7 7 7 0 0 0 3 5.728V11.75c0-.693.558-1.25 1.25-1.25H6.5v-.446A2.75 2.75 0 0 1 4.75 7.5 2.75 2.75 0 0 1 7.5 4.75a2.75 2.75 0 0 1 2.75 2.75 2.75 2.75 0 0 1-1.75 2.554v.446h1.75c.692 0 1.25.557 1.25 1.25v1.478a7 7 0 0 0 3-5.728 7 7 0 0 0-7-7z" fill="context-fill"/>
+ <path d="M7.5 0C3.364 0 0 3.363 0 7.5a7.493 7.493 0 0 0 3.143 6.1.5.5 0 0 0 .064.044A7.458 7.458 0 0 0 7.5 15a7.458 7.458 0 0 0 4.293-1.356.5.5 0 0 0 .064-.045A7.493 7.493 0 0 0 15 7.499c0-4.136-3.364-7.5-7.5-7.5zm0 1C11.096 1 14 3.904 14 7.5a6.479 6.479 0 0 1-2 4.691V12c0-1.1-.9-2-2-2h-.102c.083-.096.193-.101.272-.207.46-.616.829-1.417.83-2.293C11 5.573 9.427 4 7.5 4A3.508 3.508 0 0 0 4 7.5c.001.876.37 1.677.83 2.293.08.106.19.11.272.207H5c-1.1 0-2 .9-2 2v.191A6.477 6.477 0 0 1 1 7.5C1 3.904 3.904 1 7.5 1Zm0 4C8.887 5 10 6.113 10 7.5c-.001.585-.27 1.212-.63 1.695-.36.483-.857.792-.97.814a.5.5 0 0 0 .1.99H10c.563 0 1 .438 1 1v.98a6.475 6.475 0 0 1-3.5 1.02 6.48 6.48 0 0 1-3.5-1.02v-.98c0-.562.437-1 1-1h1.5a.5.5 0 0 0 .1-.99c-.113-.022-.61-.331-.97-.814-.36-.483-.629-1.11-.63-1.695C5 6.113 6.113 5 7.5 5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/conversation.svg b/comm/mail/themes/shared/mail/icons/new/compact/conversation.svg
new file mode 100644
index 0000000000..37f6919c74
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/conversation.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M3 3.5c-.831 0-1.5.669-1.5 1.5v7c0 .83.669 1.5 1.5 1.5h5c0-.401.171-.766.436-1.037-.116-.127-.258-.237-.32-.39a1.537 1.537 0 0 1 .323-1.634l2-2a1.5 1.5 0 0 1 2.122 0c.424.425.428 1.025.228 1.56H14.5v-5c0-.83-.669-1.5-1.5-1.5H3Z" fill="context-fill"/>
+ <path d="M3 3c-1.1 0-2 .9-2 2v7c0 1.099.9 2 2 2h5.09a1.416 1.416 0 0 1 .004-1H3c-.563 0-1-.438-1-1V5c0-.563.437-1 1-1h10c.563 0 1 .437 1 1v5h1V5c0-1.1-.9-2-2-2Zm.47 2.002a.5.5 0 0 0-.343.166.5.5 0 0 0 .041.705l2.781 2.47-2.803 2.803a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l2.843-2.844.971.864a.5.5 0 0 0 .664 0l.97-.864.284.284.707-.707-.242-.243 2.781-2.47a.5.5 0 0 0 .041-.705.5.5 0 0 0-.705-.041L8 8.832 3.832 5.127a.5.5 0 0 0-.361-.125Zm7.952 4.004a.5.5 0 0 0-.276.14l-2 2A.5.5 0 0 0 9.5 12h6a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5h-4.793l1.147-1.147a.5.5 0 0 0 0-.707.5.5 0 0 0-.432-.14zM9.5 13a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h4.793l-1.147 1.146a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l2-2A.5.5 0 0 0 15.5 13Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/copy.svg b/comm/mail/themes/shared/mail/icons/new/compact/copy.svg
new file mode 100644
index 0000000000..9d2c4afd8f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/copy.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M5 1c-1.1 0-2 .901-2 2-1.1 0-2 .901-2 2v8c0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2 1.1 0 2-.9 2-2V3c0-1.099-.9-2-2-2Zm0 1h7c.563 0 1 .438 1 1v8c0 .563-.437 1-1 1H5c-.563 0-1-.437-1-1V3c0-.562.437-1 1-1ZM3 4v7c0 1.1.9 2 2 2h6c0 .563-.437 1-1 1H3c-.563 0-1-.437-1-1V5c0-.562.437-1 1-1Zm3.5 0a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm0 2a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm0 2a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+ <path d="M3.268 4C3.098 4.294 3 4.634 3 5v6c0 1.108.892 2 2 2h5a1.99 1.99 0 0 0 1-.268V13c0 .554-.446 1-1 1H3c-.554 0-1-.446-1-1V5c0-.554.446-1 1-1Z" fill="context-fill"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/cut.svg b/comm/mail/themes/shared/mail/icons/new/compact/cut.svg
new file mode 100644
index 0000000000..a8f1159a01
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/cut.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4.418 2.006a.5.5 0 0 0-.184.07.5.5 0 0 0-.158.69L7.41 8.099 6.34 9.812A2.492 2.492 0 0 0 4.5 9 2.508 2.508 0 0 0 2 11.5C2 12.874 3.125 14 4.5 14S7 12.874 7 11.5c0-.246-.037-.483-.104-.707a.5.5 0 0 0 .028-.028L8 9.043l1.076 1.722a.5.5 0 0 0 .028.028A2.482 2.482 0 0 0 9 11.5c0 1.374 1.125 2.5 2.5 2.5s2.5-1.126 2.5-2.5c0-1.375-1.125-2.5-2.5-2.5-.726 0-1.382.313-1.84.812L8.59 8.099l3.334-5.334a.5.5 0 0 0-.158-.69.5.5 0 0 0-.69.159L8 7.156l-3.076-4.92a.5.5 0 0 0-.506-.23ZM4.5 10c.834 0 1.5.665 1.5 1.5 0 .834-.666 1.5-1.5 1.5S3 12.334 3 11.5c0-.835.666-1.5 1.5-1.5zm7 0c.834 0 1.5.665 1.5 1.5 0 .834-.666 1.5-1.5 1.5s-1.5-.666-1.5-1.5c0-.835.666-1.5 1.5-1.5z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/density-compact.svg b/comm/mail/themes/shared/mail/icons/new/compact/density-compact.svg
new file mode 100644
index 0000000000..05a4391e7a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/density-compact.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M6.5 5.5h3c.554 0 1 .446 1 1v3c0 .554-.446 1-1 1h-3c-.554 0-1-.446-1-1v-3c0-.554.446-1 1-1z" fill="context-fill"/>
+ <path d="M1.5 1a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .707L3.293 4H1.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .354-.147.5.5 0 0 0 .076-.1.5.5 0 0 0 .004-.003.5.5 0 0 0 .002-.004.5.5 0 0 0 .046-.117.5.5 0 0 0 .018-.13v-3a.5.5 0 0 0-.5-.5.5.5 0 0 0-.5.5v1.794L1.854 1.146A.5.5 0 0 0 1.5 1Zm10 0a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .146.353.5.5 0 0 0 .1.076.5.5 0 0 0 .004.004.5.5 0 0 0 .004.002.5.5 0 0 0 .117.047A.5.5 0 0 0 11.5 5h3a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5h-1.793l2.147-2.147A.5.5 0 0 0 15 1.5a.5.5 0 0 0-.146-.354.5.5 0 0 0-.708 0L12 3.293V1.5a.5.5 0 0 0-.5-.5Zm-5 4C5.678 5 5 5.677 5 6.5v3c0 .822.678 1.5 1.5 1.5h3c.822 0 1.5-.678 1.5-1.5v-3c0-.823-.678-1.5-1.5-1.5Zm0 1h3c.286 0 .5.214.5.5v3c0 .285-.214.5-.5.5h-3a.488.488 0 0 1-.5-.5v-3c0-.286.214-.5.5-.5Zm-5 5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h1.793l-2.147 2.146A.5.5 0 0 0 1 14.5a.5.5 0 0 0 .146.353.5.5 0 0 0 .708 0L4 12.707V14.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.146-.354.5.5 0 0 0-.1-.076.5.5 0 0 0-.004-.004.5.5 0 0 0-.004-.002.5.5 0 0 0-.117-.047A.5.5 0 0 0 4.5 11Zm10 0a.5.5 0 0 0-.354.146.5.5 0 0 0-.076.1.5.5 0 0 0-.004.004.5.5 0 0 0-.002.004.5.5 0 0 0-.046.117.5.5 0 0 0-.018.129v3a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-1.793l2.146 2.146A.5.5 0 0 0 14.5 15a.5.5 0 0 0 .354-.147.5.5 0 0 0 0-.707L12.707 12H14.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/density-default.svg b/comm/mail/themes/shared/mail/icons/new/compact/density-default.svg
new file mode 100644
index 0000000000..7de83e9f4c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/density-default.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M6.5 5.5h3c.554 0 1 .446 1 1v3c0 .554-.446 1-1 1h-3c-.554 0-1-.446-1-1v-3c0-.554.446-1 1-1z" fill="context-fill"/>
+ <path d="M4 1C2.347 1 1 2.346 1 4v1.488a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V4c0-1.117.883-2 2-2h1.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm6.5 0a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5H12c1.117 0 2 .883 2 2v1.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V4c0-1.654-1.347-3-3-3Zm-4 4C5.678 5 5 5.677 5 6.5v3c0 .822.678 1.5 1.5 1.5h3c.822 0 1.5-.678 1.5-1.5v-3c0-.823-.678-1.5-1.5-1.5Zm0 1h3c.286 0 .5.214.5.5v3c0 .285-.214.5-.5.5h-3a.488.488 0 0 1-.5-.5v-3c0-.286.214-.5.5-.5Zm-5 4a.5.5 0 0 0-.5.5V12c0 1.653 1.347 3 3 3h1.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H4c-1.117 0-2-.884-2-2v-1.5a.5.5 0 0 0-.5-.5Zm13 0a.5.5 0 0 0-.5.5V12c0 1.116-.883 2-2 2h-1.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5H12c1.653 0 3-1.347 3-3v-1.5a.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/density-relaxed.svg b/comm/mail/themes/shared/mail/icons/new/compact/density-relaxed.svg
new file mode 100644
index 0000000000..652f77c5a7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/density-relaxed.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M6.5 5.5h3c.554 0 1 .446 1 1v3c0 .554-.446 1-1 1h-3c-.554 0-1-.446-1-1v-3c0-.554.446-1 1-1z" fill="context-fill"/>
+ <path d="M1.5 1a.5.5 0 0 0-.129.017.5.5 0 0 0-.225.13.5.5 0 0 0-.076.099.5.5 0 0 0-.004.004.5.5 0 0 0-.002.004.5.5 0 0 0-.046.117A.5.5 0 0 0 1 1.5v3a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V2.707l2.146 2.146A.5.5 0 0 0 4.5 5a.5.5 0 0 0 .354-.147.5.5 0 0 0 0-.707L2.707 2H4.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm10 0a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h1.793l-2.147 2.146A.5.5 0 0 0 11 4.5a.5.5 0 0 0 .146.353.5.5 0 0 0 .708 0L14 2.707V4.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.018-.13.5.5 0 0 0-.128-.224.5.5 0 0 0-.1-.076.5.5 0 0 0-.004-.004.5.5 0 0 0-.004-.002.5.5 0 0 0-.117-.047A.5.5 0 0 0 14.5 1Zm-5 4C5.678 5 5 5.677 5 6.5v3c0 .822.678 1.5 1.5 1.5h3c.822 0 1.5-.678 1.5-1.5v-3c0-.823-.678-1.5-1.5-1.5Zm0 1h3c.286 0 .5.214.5.5v3c0 .285-.214.5-.5.5h-3a.488.488 0 0 1-.5-.5v-3c0-.286.214-.5.5-.5Zm-5 5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .018.129.5.5 0 0 0 .128.224.5.5 0 0 0 .1.076.5.5 0 0 0 .004.004.5.5 0 0 0 .004.002.5.5 0 0 0 .117.047A.5.5 0 0 0 1.5 15h3a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H2.707l2.147-2.147A.5.5 0 0 0 5 11.5a.5.5 0 0 0-.146-.354.5.5 0 0 0-.708 0L2 13.293V11.5a.5.5 0 0 0-.5-.5Zm10 0a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .707L13.293 14H11.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .129-.018.5.5 0 0 0 .225-.129.5.5 0 0 0 .076-.1.5.5 0 0 0 .004-.003.5.5 0 0 0 .002-.004.5.5 0 0 0 .046-.117.5.5 0 0 0 .018-.13v-3a.5.5 0 0 0-.5-.5.5.5 0 0 0-.5.5v1.794l-2.146-2.147A.5.5 0 0 0 11.5 11Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/display-options.svg b/comm/mail/themes/shared/mail/icons/new/compact/display-options.svg
new file mode 100644
index 0000000000..2efb8fc123
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/display-options.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M2.5 2a.5.5 0 0 0-.5.5V4c0 .545.455 1 1 1h6c.545 0 1-.455 1-1V2.5a.5.5 0 0 0-.5-.5.5.5 0 0 0-.5.5V4H3V2.5a.5.5 0 0 0-.5-.5zm10 0a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-.5-.5zM3 6c-.545 0-1 .455-1 1v2c0 .545.455 1 1 1h6c.545 0 1-.455 1-1V7c0-.545-.455-1-1-1H3zm0 1h6v2H3V7zm9.506.006c-.82 0-1.494.675-1.494 1.494A1.5 1.5 0 0 0 12 9.902V13.5a.5.5 0 0 0 1 0V9.906c.579-.206 1-.76 1-1.406 0-.82-.675-1.494-1.494-1.494zm0 1c.279 0 .494.215.494.494a.487.487 0 0 1-.494.494.487.487 0 0 1-.494-.494c0-.279.215-.494.494-.494zM3 11c-.545 0-1 .455-1 1v1.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V12h6v1.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V12c0-.545-.455-1-1-1H3z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/download.svg b/comm/mail/themes/shared/mail/icons/new/compact/download.svg
new file mode 100644
index 0000000000..b1f6aa5513
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/download.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M7.5 3a.5.5 0 0 0-.5.5v4.793L4.854 6.146a.5.5 0 0 0-.708 0 .5.5 0 0 0 0 .707l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.707.5.5 0 0 0-.708 0L8 8.293V3.5a.5.5 0 0 0-.5-.5zm-4 7a.5.5 0 0 0-.5.5v1c0 .822.678 1.5 1.5 1.5h6c.822 0 1.5-.678 1.5-1.5v-1a.5.5 0 0 0-.5-.5.5.5 0 0 0-.5.5v1c0 .285-.214.5-.5.5h-6a.488.488 0 0 1-.5-.5v-1a.5.5 0 0 0-.5-.5z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/draft.svg b/comm/mail/themes/shared/mail/icons/new/compact/draft.svg
new file mode 100644
index 0000000000..404d190c31
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/draft.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M4 2h8c.554 0 1 .446 1 1v10c0 .554-.446 1-1 1H4c-.554 0-1-.446-1-1V3c0-.554.446-1 1-1Z" fill="context-fill"/>
+ <path d="M4 1c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2Zm0 1h8c.563 0 1 .437 1 1v10c0 .563-.437 1-1 1H4c-.563 0-1-.437-1-1V3c0-.563.437-1 1-1Zm1.5 2a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .428-.252A.5.5 0 0 0 10.5 4Zm0 2a.5.5 0 0 0-.492.5.5.5 0 0 0 .492.5h5a.5.5 0 0 0 .428-.252.5.5 0 0 0 0-.496A.5.5 0 0 0 10.5 6Zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 .428-.252A.5.5 0 0 0 8.5 8Zm2 3a.5.5 0 0 0-.492.5.5.5 0 0 0 .492.5h3a.5.5 0 0 0 .428-.748A.5.5 0 0 0 10.5 11Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/error-circle.svg b/comm/mail/themes/shared/mail/icons/new/compact/error-circle.svg
new file mode 100644
index 0000000000..c45136b411
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/error-circle.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-opacity="context-fill-opacity" height="16" width="16">
+ <path d="M7.5 14.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z" fill="context-fill"/>
+ <path d="M7.5 0a7.5 7.5 0 1 0 .02 15.02A7.5 7.5 0 0 0 7.5 0zm0 1a6.5 6.5 0 1 1 0 13A6.5 6.5 0 0 1 1 7.5C1 3.9 3.9 1 7.5 1zm0 3a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5zm0 6a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/event-status.svg b/comm/mail/themes/shared/mail/icons/new/compact/event-status.svg
new file mode 100644
index 0000000000..271ff999e8
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/event-status.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4 1.5h8c1.385 0 2.5 1.115 2.5 2.5v.5h-13V4c0-1.385 1.115-2.5 2.5-2.5Z" fill="context-fill"/>
+ <path d="M4 1C2.347 1 1 2.346 1 4v8c0 1.653 1.347 3 3 3h8c1.653 0 3-1.347 3-3V4c0-1.654-1.347-3-3-3Zm0 1h8c1.117 0 2 .883 2 2h-2v-.5a.5.5 0 1 0-1 0V4H5v-.5a.5.5 0 1 0-1 0V4H2c0-1.117.883-2 2-2ZM2 5h2v.5a.5.5 0 1 0 1 0V5h6v.5a.5.5 0 1 0 1 0V5h2v7c0 1.116-.883 2-2 2H4c-1.117 0-2-.884-2-2Zm8.56 2.004a.5.5 0 0 0-.13.002.5.5 0 0 0-.33.193l-2.655 3.539-1.591-1.592a.5.5 0 0 0-.708 0 .5.5 0 0 0 0 .707l2 2A.5.5 0 0 0 7.9 11.8l3-4a.5.5 0 0 0-.1-.7.5.5 0 0 0-.24-.096Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/export.svg b/comm/mail/themes/shared/mail/icons/new/compact/export.svg
new file mode 100644
index 0000000000..a985cdd80a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/export.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M11.732 4c.17.294.268.635.268 1v6c0 1.108-.892 2-2 2H5a1.99 1.99 0 0 1-1-.268V13c0 .554.446 1 1 1h7c.554 0 1-.446 1-1V5c0-.554-.446-1-1-1Z" fill="context-fill"/>
+ <path d="M3 1c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2 0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2 0-1.1-.9-2-2-2Zm0 1h7c.563 0 1 .437 1 1v8c0 .563-.437 1-1 1H3c-.563 0-1-.437-1-1V3c0-.563.437-1 1-1Zm3.5 1c-.14 0-.24.043-.354.146l-2 2a.5.5 0 0 0 .708.708L6 4.707V7.5a.5.5 0 1 0 1 0V4.707l1.146 1.147a.5.5 0 0 0 .708-.708l-2-2C6.763 3.033 6.65 3 6.5 3ZM12 4c.563 0 1 .437 1 1v8c0 .563-.437 1-1 1H5c-.563 0-1-.437-1-1h6c1.1 0 2-.9 2-2zM4.5 8a.5.5 0 0 0-.5.5v1c0 .822.678 1.5 1.5 1.5h2c.822 0 1.5-.678 1.5-1.5v-1a.5.5 0 0 0-.5-.5.5.5 0 0 0-.5.5v1c0 .286-.214.5-.5.5h-2a.488.488 0 0 1-.5-.5v-1a.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/extension.svg b/comm/mail/themes/shared/mail/icons/new/compact/extension.svg
new file mode 100644
index 0000000000..23ddf6b3ee
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/extension.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M14 6.5c-.97 0-1 1-1.75 1a.77.77 0 0 1-.75-.75V5.5a1 1 0 0 0-1-1H9.25a.77.77 0 0 1-.75-.75c0-.75 1-.78 1-1.75C9.5 1.14 8.1.5 7 .5S4.5 1.14 4.5 2c0 .97 1 1 1 1.75a.77.77 0 0 1-.75.75H1.5a1 1 0 0 0-1 1v1.25c.01.41.34.74.75.75.75 0 .78-1 1.75-1 .87 0 1.5 1.4 1.5 2.5s-.64 2.5-1.5 2.5c-.97 0-1-1-1.75-1a.77.77 0 0 0-.75.75v3.25a1 1 0 0 0 1 1h3.25a.77.77 0 0 0 .75-.75c0-.75-1-.78-1-1.75 0-.86 1.4-1.5 2.5-1.5s2.5.64 2.5 1.5c0 .97-1 1-1 1.75.01.41.34.74.75.75h1.25a1 1 0 0 0 1-1v-3.25a.77.77 0 0 1 .75-.75c.75 0 .78 1 1.75 1 .86 0 1.5-1.4 1.5-2.5s-.64-2.5-1.5-2.5z" fill="context-fill"/>
+ <path d="M7 0c-.647 0-1.33.175-1.902.488C4.526.802 4 1.298 4 2c0 .657.403 1.094.668 1.33.133.118.23.209.277.27.044.057.05.076.051.14a.263.263 0 0 1-.26.26H1.5C.677 4 0 4.677 0 5.5v1.262A1.277 1.277 0 0 0 1.238 8h.012c.299 0 .57-.117.756-.258.186-.14.306-.293.41-.41C2.625 7.097 2.686 7 3 7c.167 0 .417.176.637.578C3.857 7.981 4 8.545 4 9c0 .453-.144 1.019-.365 1.422S3.159 11 3 11c-.313 0-.375-.097-.584-.332-.104-.117-.224-.27-.41-.41A1.279 1.279 0 0 0 1.25 10h-.014c-.67.017-1.219.565-1.236 1.236V14.5c0 .823.677 1.5 1.5 1.5h3.264A1.276 1.276 0 0 0 6 14.764v-.014c0-.299-.117-.57-.258-.756-.14-.186-.293-.306-.41-.41C5.097 13.375 5 13.314 5 13c0-.159.175-.414.578-.635A3.211 3.211 0 0 1 7 12c.453 0 1.019.144 1.422.365S9 12.841 9 13c0 .313-.097.375-.332.584-.117.104-.27.224-.41.41A1.279 1.279 0 0 0 8 14.75v.012A1.277 1.277 0 0 0 9.238 16H10.5c.823 0 1.5-.677 1.5-1.5v-3.236a.263.263 0 0 1 .26-.26c.064.001.083.007.14.05.061.047.152.145.27.278.236.265.673.668 1.33.668.701 0 1.198-.526 1.512-1.098A4.046 4.046 0 0 0 16 9c0-.647-.175-1.33-.488-1.902C15.198 6.526 14.702 6 14 6c-.657 0-1.094.403-1.33.668a2.493 2.493 0 0 1-.27.277c-.057.044-.076.05-.14.051a.263.263 0 0 1-.26-.26V5.5c0-.823-.677-1.5-1.5-1.5H9.264a.263.263 0 0 1-.26-.26c.001-.064.007-.083.05-.14.047-.061.145-.152.278-.27C9.597 3.094 10 2.657 10 2 10 1.299 9.474.802 8.902.488A4.046 4.046 0 0 0 7 0Zm0 1c.453 0 1.019.144 1.422.365S9 1.841 9 2c0 .313-.097.375-.332.584-.117.104-.27.224-.41.41A1.279 1.279 0 0 0 8 3.75v.014c.017.67.565 1.219 1.236 1.236H10.5c.282 0 .5.218.5.5v1.264c.017.67.565 1.219 1.236 1.236h.014c.299 0 .57-.117.756-.258.186-.14.306-.293.41-.41.209-.235.27-.332.584-.332.159 0 .414.175.635.578.221.403.365.969.365 1.422 0 .453-.144 1.019-.365 1.422S14.159 11 14 11c-.313 0-.375-.097-.584-.332-.104-.117-.224-.27-.41-.41A1.279 1.279 0 0 0 12.25 10h-.014c-.67.017-1.219.565-1.236 1.236V14.5c0 .282-.218.5-.5.5H9.262a.26.26 0 0 1-.258-.258c0-.066.007-.085.05-.142.047-.061.145-.152.278-.27.265-.236.668-.673.668-1.33 0-.701-.526-1.198-1.098-1.512A4.046 4.046 0 0 0 7 11c-.647 0-1.33.175-1.902.488C4.526 11.802 4 12.298 4 13c0 .657.403 1.094.668 1.33.133.118.23.209.277.27.044.057.05.076.051.14a.263.263 0 0 1-.26.26H1.5a.493.493 0 0 1-.5-.5v-3.236a.263.263 0 0 1 .26-.26c.064.001.083.007.14.05.061.047.152.145.27.278.236.265.673.668 1.33.668.701 0 1.198-.526 1.512-1.098A4.046 4.046 0 0 0 5 9c0-.645-.172-1.33-.484-1.902C4.203 6.525 3.703 6 3 6c-.657 0-1.094.403-1.33.668a2.493 2.493 0 0 1-.27.277c-.057.044-.076.05-.142.051A.26.26 0 0 1 1 6.738V5.5c0-.282.218-.5.5-.5h3.264A1.276 1.276 0 0 0 6 3.764V3.75c0-.299-.117-.57-.258-.756-.14-.186-.293-.306-.41-.41C5.097 2.375 5 2.314 5 2c0-.159.175-.414.578-.635A3.211 3.211 0 0 1 7 1Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/eye.svg b/comm/mail/themes/shared/mail/icons/new/compact/eye.svg
new file mode 100644
index 0000000000..feb2d5b43c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/eye.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M11.5 7A3.5 3.5 0 0 1 8 10.5 3.5 3.5 0 0 1 4.5 7 3.5 3.5 0 0 1 8 3.5 3.5 3.5 0 0 1 11.5 7Z" fill="context-fill"/>
+ <path d="M8 3c-.069 0-.137.002-.205.006-3.657.114-5.73 3.244-6.711 4.716a.5.5 0 0 0 0 .555C2.084 9.777 4.214 13 8 13c3.786 0 5.916-3.223 6.916-4.723a.5.5 0 0 0 0-.555c-.982-1.472-3.054-4.602-6.71-4.716A4.018 4.018 0 0 0 8 3Zm0 1c.052 0 .103.002.154.004h.008A2.993 2.993 0 0 1 11 7c0 1.662-1.337 3-3 3S5 8.662 5 7a2.993 2.993 0 0 1 2.838-2.996h.008A3.06 3.06 0 0 1 8 4Zm0 1a2 2 0 0 0-2 2 2 2 0 0 0 2 2 2 2 0 0 0 2-2 2 2 0 0 0-2-2Zm-3.672.414A3.972 3.972 0 0 0 4 7c0 2.203 1.797 4 4 4 2.203 0 4-1.797 4-4 0-.563-.117-1.1-.328-1.586.96.81 1.666 1.814 2.185 2.586-1.034 1.537-2.808 4-5.857 4-3.05 0-4.823-2.463-5.857-4 .519-.772 1.225-1.777 2.185-2.586Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/features.svg b/comm/mail/themes/shared/mail/icons/new/compact/features.svg
new file mode 100644
index 0000000000..0c10ff7a14
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/features.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4 1.5c-.337 0-.572 1.45-.81 1.69-.24.238-1.69.473-1.69.81 0 .337 1.45.572 1.69.81.238.24.473 1.69.81 1.69.337 0 .572-1.45.81-1.69.24-.238 1.69-.473 1.69-.81 0-.337-1.45-.572-1.69-.81C4.573 2.95 4.338 1.5 4 1.5Zm6 .977c-.76 0-1.096 3.353-1.633 3.89-.537.537-3.89.874-3.89 1.633 0 .76 3.353 1.096 3.89 1.633.537.537.874 3.89 1.633 3.89.76 0 1.096-3.353 1.633-3.89.537-.537 3.89-.874 3.89-1.633 0-.76-3.353-1.096-3.89-1.633-.537-.537-.874-3.89-1.633-3.89ZM4 9.5c-.337 0-.572 1.45-.81 1.69-.24.238-1.69.473-1.69.81 0 .337 1.45.572 1.69.81.238.24.473 1.69.81 1.69.337 0 .572-1.45.81-1.69.24-.238 1.69-.473 1.69-.81 0-.337-1.45-.572-1.69-.81-.238-.24-.473-1.69-.81-1.69Z" fill="context-fill"/>
+ <path d="M4 1a.678.678 0 0 0-.48.213c-.094.096-.148.19-.198.285-.1.19-.17.395-.238.6-.068.204-.131.406-.186.558-.054.152-.153.27-.062.18.09-.09-.028.008-.18.062-.152.055-.354.118-.558.186a4.05 4.05 0 0 0-.6.238c-.095.05-.189.104-.285.198A.678.678 0 0 0 1 4c0 .221.117.387.213.48.096.094.19.148.285.198.19.1.395.17.6.238.204.068.406.131.558.186.152.054.27.153.18.062-.09-.09.008.028.062.18.055.152.118.354.186.558.068.205.139.41.238.6.05.095.104.189.198.285A.677.677 0 0 0 4 7a.678.678 0 0 0 .48-.213c.094-.096.148-.19.198-.285.1-.19.17-.395.238-.6.068-.204.131-.406.186-.558.054-.152.153-.27.062-.18-.09.09.028-.008.18-.062.152-.055.354-.118.558-.186a4.05 4.05 0 0 0 .6-.238c.095-.05.189-.104.285-.198A.678.678 0 0 0 7 4a.678.678 0 0 0-.213-.48 1.127 1.127 0 0 0-.285-.198c-.19-.1-.395-.17-.6-.238-.204-.068-.406-.131-.558-.186-.152-.054-.27-.153-.18-.062.09.09-.008-.028-.062-.18-.055-.152-.118-.354-.186-.558a4.021 4.021 0 0 0-.238-.6 1.127 1.127 0 0 0-.198-.285A.678.678 0 0 0 4 1Zm6 .977c-.279 0-.5.158-.639.312a1.956 1.956 0 0 0-.316.514c-.17.376-.303.826-.428 1.287-.125.46-.24.927-.353 1.297-.113.37-.282.658-.25.627.031-.032-.258.137-.627.25-.37.112-.837.228-1.297.353-.46.125-.911.257-1.287.428a1.94 1.94 0 0 0-.514.316c-.154.138-.312.36-.312.639s.158.5.312.639c.155.138.326.23.514.316.376.17.826.303 1.287.428.46.125.927.24 1.297.353.37.113.658.282.627.25-.032-.031.137.258.25.627.112.37.228.837.353 1.297.125.46.257.911.428 1.287.085.188.178.36.316.514.138.154.36.312.639.312s.5-.158.639-.312c.138-.155.23-.326.316-.514.17-.376.303-.826.428-1.287.125-.46.24-.927.353-1.297.113-.37.282-.658.25-.627-.031.032.258-.137.627-.25.37-.112.837-.228 1.297-.353.46-.125.911-.257 1.287-.428a1.94 1.94 0 0 0 .514-.316c.154-.138.312-.36.312-.639s-.158-.5-.312-.639a1.956 1.956 0 0 0-.514-.316c-.376-.17-.826-.303-1.287-.428-.46-.125-.927-.24-1.297-.353-.37-.113-.658-.282-.627-.25.032.031-.137-.258-.25-.627-.112-.37-.228-.837-.353-1.297-.125-.46-.257-.911-.428-1.287a1.956 1.956 0 0 0-.316-.514c-.138-.154-.36-.312-.639-.312Zm-6 .53c.053.162.104.33.16.487.067.187.087.34.297.549.21.21.362.23.549.297.157.056.325.107.486.16-.161.053-.33.104-.486.16-.187.067-.34.087-.549.297-.21.21-.23.362-.297.549-.056.157-.107.325-.16.486-.053-.161-.104-.33-.16-.486-.067-.187-.087-.34-.297-.549-.21-.21-.362-.23-.549-.297-.157-.056-.325-.107-.486-.16.161-.053.33-.104.486-.16.187-.067.34-.087.549-.297.21-.21.23-.362.297-.549.056-.157.107-.325.16-.486Zm6 .632c.017.032.027.038.045.078.123.27.252.69.373 1.135.121.445.236.916.361 1.326.125.41.2.743.5 1.043.3.3.633.375 1.043.5.41.125.881.24 1.326.361.446.121.865.25 1.135.373.04.018.046.028.078.045-.032.017-.038.027-.078.045-.27.123-.69.252-1.135.373-.445.121-.916.236-1.326.361-.41.125-.743.2-1.043.5-.3.3-.375.633-.5 1.043-.125.41-.24.881-.361 1.326-.121.446-.25.866-.373 1.135-.018.04-.028.046-.045.078-.017-.032-.027-.038-.045-.078-.123-.27-.252-.69-.373-1.135-.121-.445-.236-.916-.361-1.326-.125-.41-.2-.743-.5-1.043-.3-.3-.633-.375-1.043-.5-.41-.125-.881-.24-1.326-.361-.446-.121-.866-.25-1.135-.373-.04-.018-.046-.028-.078-.045.032-.017.038-.027.078-.045.27-.123.69-.252 1.135-.373.445-.121.916-.236 1.326-.361.41-.125.743-.2 1.043-.5.3-.3.375-.633.5-1.043.125-.41.24-.881.361-1.326.121-.446.25-.866.373-1.135.018-.04.028-.046.045-.078ZM4 9a.678.678 0 0 0-.48.213c-.094.096-.148.19-.198.285-.1.19-.17.395-.238.6-.068.204-.131.406-.186.558-.054.152-.153.27-.062.18.09-.09-.028.008-.18.062-.152.055-.354.118-.558.186a4.02 4.02 0 0 0-.6.238c-.095.05-.189.104-.285.198A.678.678 0 0 0 1 12c0 .221.117.387.213.48.096.094.19.148.285.198.19.1.395.17.6.238.204.068.406.131.558.186.152.054.27.153.18.062-.09-.09.008.028.062.18.055.152.118.354.186.558.068.205.139.41.238.6.05.095.104.189.198.285A.677.677 0 0 0 4 15a.678.678 0 0 0 .48-.213c.094-.096.148-.19.198-.285.1-.19.17-.395.238-.6.068-.204.131-.406.186-.558.054-.152.153-.27.062-.18-.09.09.028-.008.18-.062.152-.055.354-.118.558-.186a4.02 4.02 0 0 0 .6-.238c.095-.05.189-.104.285-.198A.678.678 0 0 0 7 12a.678.678 0 0 0-.213-.48 1.127 1.127 0 0 0-.285-.198c-.19-.1-.395-.17-.6-.238-.204-.068-.406-.131-.558-.186-.152-.054-.27-.153-.18-.062.09.09-.008-.028-.062-.18-.055-.152-.118-.354-.186-.558a4.021 4.021 0 0 0-.238-.6 1.127 1.127 0 0 0-.198-.285A.678.678 0 0 0 4 9Zm0 1.508c.053.161.104.33.16.486.067.187.087.34.297.549.21.21.362.23.549.297.157.056.325.107.486.16-.161.053-.33.104-.486.16-.187.067-.34.087-.549.297-.21.21-.23.362-.297.549-.056.157-.107.325-.16.486-.053-.161-.104-.33-.16-.486-.067-.187-.087-.34-.297-.549-.21-.21-.362-.23-.549-.297-.157-.056-.325-.107-.486-.16.161-.053.33-.104.486-.16.187-.067.34-.087.549-.297.21-.21.23-.362.297-.549.056-.157.107-.325.16-.486Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/file.svg b/comm/mail/themes/shared/mail/icons/new/compact/file.svg
new file mode 100644
index 0000000000..31b266c291
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/file.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4 1.5h8c.831 0 1.5.669 1.5 1.5v10c0 .83-.669 1.5-1.5 1.5H4c-.831 0-1.5-.67-1.5-1.5V3c0-.831.669-1.5 1.5-1.5Z" fill="context-fill"/>
+ <path d="M4 1c-1.1 0-2 .9-2 2v10c0 1.099.9 2 2 2h8c1.1 0 2-.901 2-2V3c0-1.1-.9-2-2-2Zm0 1h8c.563 0 1 .437 1 1v10c0 .562-.437 1-1 1H4c-.563 0-1-.438-1-1V3c0-.563.437-1 1-1Zm1.5 2a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .428-.252A.5.5 0 0 0 10.5 4Zm0 2a.5.5 0 0 0-.492.5.5.5 0 0 0 .492.5h5a.5.5 0 0 0 .428-.252.5.5 0 0 0 0-.496A.5.5 0 0 0 10.5 6Zm0 2a.5.5 0 0 0-.492.5.5.5 0 0 0 .492.5h5a.5.5 0 0 0 .428-.252.5.5 0 0 0 0-.496A.5.5 0 0 0 10.5 8Zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 .428-.748A.5.5 0 0 0 8.5 10Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/filter.svg b/comm/mail/themes/shared/mail/icons/new/compact/filter.svg
new file mode 100644
index 0000000000..ad90c8dfb2
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/filter.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M3.5 3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5Zm4 0a.5.5 0 0 0-.5.5v6.59a1.51 1.51 0 0 0-1 1.416 1.507 1.507 0 0 0 1.5 1.496c.823 0 1.5-.678 1.5-1.5V11.5a1.512 1.512 0 0 0-1-1.41V3.5a.5.5 0 0 0-.5-.5Zm4 0a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5ZM3.496 6.002A1.508 1.508 0 0 0 2 7.506a1.506 1.506 0 0 0 1 1.406V12.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V8.912c.58-.208 1-.763 1-1.41V7.5a1.51 1.51 0 0 0-1.504-1.498Zm.002 1a.494.494 0 0 1 .502.5.491.491 0 0 1-.488.498.5.5 0 0 0-.012 0 .5.5 0 0 0-.006.002A.492.492 0 0 1 3 7.504c0-.283.216-.502.498-.502Zm7.998 0A1.508 1.508 0 0 0 10 8.506a1.506 1.506 0 0 0 1 1.406V12.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V9.912c.58-.208 1-.763 1-1.41V8.5a1.51 1.51 0 0 0-1.504-1.498Zm.002 1c.282-.001.5.216.502.498v.002a.491.491 0 0 1-.488.498.5.5 0 0 0-.012 0 .5.5 0 0 0-.006.002.492.492 0 0 1-.494-.498c0-.283.216-.502.498-.502zm-4 3a.494.494 0 0 1 .502.5c0 .282-.218.5-.5.5a.492.492 0 0 1-.5-.498c0-.283.216-.502.498-.502z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/fingerprint.svg b/comm/mail/themes/shared/mail/icons/new/compact/fingerprint.svg
new file mode 100644
index 0000000000..786681a146
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/fingerprint.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M8 1c-1.958 0-3.606.883-4.855 2.148a.5.5 0 0 0 .003.707.5.5 0 0 0 .707-.003C4.963 2.73 6.34 2 8 2c1.19 0 2.296.345 3.229.941a.5.5 0 0 0 .69-.152.5.5 0 0 0-.151-.69A6.976 6.976 0 0 0 8 1Zm0 2C5.245 3 3 5.245 3 8a.5.5 0 0 0 .5.5A.5.5 0 0 0 4 8c0-2.215 1.785-4 4-4s3.982 1.784 4 4.004c.011 1.366-.064 3.941-.916 5.219a.5.5 0 0 0 .139.693.5.5 0 0 0 .693-.139c1.148-1.722 1.095-4.399 1.084-5.78C12.978 5.245 10.756 3 8 3Zm5.393 1.012a.5.5 0 0 0-.182.07.5.5 0 0 0-.152.691 5.962 5.962 0 0 1 .921 3.717.5.5 0 0 0 .457.54.5.5 0 0 0 .54-.46 6.972 6.972 0 0 0-1.074-4.336.5.5 0 0 0-.315-.218.5.5 0 0 0-.195-.004Zm-11.391.98a.5.5 0 0 0-.463.309 7.022 7.022 0 0 0-.354 4.303.5.5 0 0 0 .6.373.5.5 0 0 0 .373-.602 6.017 6.017 0 0 1 .305-3.69.5.5 0 0 0-.27-.654.5.5 0 0 0-.191-.039ZM8 5C6.35 5 5 6.35 5 8c0 .508.122 1.314.064 2.145-.057.83-.285 1.568-.841 1.939a.5.5 0 0 0-.139.693.5.5 0 0 0 .693.139c.944-.629 1.216-1.736 1.284-2.703C6.128 9.246 6 8.302 6 8c0-1.11.89-2 2-2 .63 0 1.158.124 1.484.35.327.225.516.524.516 1.15a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5c0-.874-.369-1.575-.947-1.975C9.474 5.125 8.75 5 8 5Zm0 2.06a.624.624 0 0 0-.121.018c-.315.079-.515.294-.656.541A1.768 1.768 0 0 0 7 8.5v3.338c-.459.84-1.006 1.665-1.8 2.262a.5.5 0 0 0-.1.7.5.5 0 0 0 .7.1c.914-.685 1.524-1.605 2.044-2.543a.5.5 0 0 0 .015-.02C8.555 11.076 9 9.74 9 8.5c0-.43-.059-.763-.234-1.041A.908.908 0 0 0 8 7.061ZM3.5 9a.5.5 0 0 0-.5.5c0 .833-.354 1.146-.854 1.646a.5.5 0 0 0 0 .708.5.5 0 0 0 .708 0C3.354 11.354 4 10.667 4 9.5a.5.5 0 0 0-.5-.5Zm7.006 0a.5.5 0 0 0-.506.494c-.017 1.495-.547 3.032-1.889 4.692a.5.5 0 0 0 .075.703.5.5 0 0 0 .703-.075c1.452-1.797 2.092-3.58 2.111-5.308A.5.5 0 0 0 10.506 9Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/flexible-space.svg b/comm/mail/themes/shared/mail/icons/new/compact/flexible-space.svg
new file mode 100644
index 0000000000..ab614511f9
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/flexible-space.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill-opacity="context-fill-opacity">
+ <path d="M4.5 4a.5.5 0 0 0-.354.146l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 1 0 .708-.708L2.207 7.5l2.647-2.646A.5.5 0 0 0 4.5 4zm7.04.002a.498.498 0 0 0-.394.852L13.793 7.5l-2.647 2.646a.5.5 0 1 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.498.498 0 0 0-.315-.144zM4.5 7a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1zm3 0a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5h-1zm3 0a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5h-1z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/folder-filter.svg b/comm/mail/themes/shared/mail/icons/new/compact/folder-filter.svg
new file mode 100644
index 0000000000..420ad3d575
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/folder-filter.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M2 3.5c-.277 0-.5.223-.5.5v8c0 .831.669 1.5 1.5 1.5h5.635a3.5 3.5 0 0 1-.635-2A3.5 3.5 0 0 1 11.5 8c1.229 0 2.4.5 3 1.5V8c0-1-.82-1.5-1.5-1.5H8.5l-2-3H3Z" fill="context-fill"/>
+ <path d="M2 3c-.545 0-1 .455-1 1v8c0 1.1.9 2 2 2h5.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H3c-.563 0-1-.437-1-1V6h2.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H2V4h4.232l1.852 2.777A.5.5 0 0 0 8.5 7H13c.218 0 .487.09.678.254.19.165.322.383.322.746v1.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V6c0-1.1-.9-2-2-2H7.5a.5.5 0 0 0-.06.01l-.524-.787A.5.5 0 0 0 6.5 3Zm6.102 2H13c.563 0 1 .437 1 1v.264A2.045 2.045 0 0 0 13 6H8.768ZM11.5 9A2.508 2.508 0 0 0 9 11.5c0 1.375 1.125 2.5 2.5 2.5a2.48 2.48 0 0 0 1.377-.416l1.27 1.27a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.708l-1.27-1.269A2.48 2.48 0 0 0 14 11.5c0-1.375-1.125-2.5-2.5-2.5Zm0 1c.834 0 1.5.666 1.5 1.5s-.666 1.5-1.5 1.5-1.5-.666-1.5-1.5.666-1.5 1.5-1.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/folder-rss.svg b/comm/mail/themes/shared/mail/icons/new/compact/folder-rss.svg
new file mode 100644
index 0000000000..3af238d044
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/folder-rss.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M2 3.5c-.277 0-.5.223-.5.5v8c0 .831.669 1.5 1.5 1.5h5v-4C8 8.669 8.669 8 9.5 8h2.611c.725 0 1.383.046 1.889.5h.5V8c0-1-.82-1.5-1.5-1.5H8.5l-2-3H3Z" fill="context-fill"/>
+ <path d="M2 3c-.545 0-1 .455-1 1v8c0 1.1.9 2 2 2h4.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H3c-.563 0-1-.437-1-1V6h2.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H2V4h4.232l1.852 2.777A.5.5 0 0 0 8.5 7H13c.218 0 .487.09.678.254.19.165.322.383.322.746v.5a.5.5 0 0 0 .059.219.5.5 0 0 0 .023.047.5.5 0 0 0 .152.152.5.5 0 0 0 .047.023A.5.5 0 0 0 14.5 9a.5.5 0 0 0 .219-.059.5.5 0 0 0 .047-.023.5.5 0 0 0 .152-.152.5.5 0 0 0 .023-.047A.5.5 0 0 0 15 8.5V6c0-1.1-.9-2-2-2H7.5a.5.5 0 0 0-.06.01l-.524-.787A.5.5 0 0 0 6.5 3Zm6.102 2H13c.563 0 1 .437 1 1v.264A2.045 2.045 0 0 0 13 6H8.768ZM9.5 9a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h.5a4 4 0 0 1 4 4v.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0 0-.002.5.5 0 0 0 0-.002.5.5 0 0 0 0-.002.5.5 0 0 0 0-.002.5.5 0 0 0 0-.002.5.5 0 0 0 0-.002.5.5 0 0 0 0-.002.5.5 0 0 0 0-.002.5.5 0 0 0 0-.002.5.5 0 0 0 0-.002.5.5 0 0 0 0-.001.5.5 0 0 0 0-.002.5.5 0 0 0 0-.002V14a5 5 0 0 0-5-5h-.475A.5.5 0 0 0 9.5 9Zm0 2a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h.5a2 2 0 0 1 2 2v.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0 0-.002.5.5 0 0 0 0-.002.5.5 0 0 0 0-.002.5.5 0 0 0 0-.002.5.5 0 0 0 0-.002.5.5 0 0 0 0-.002.5.5 0 0 0 0-.002.5.5 0 0 0 0-.002.5.5 0 0 0 0-.002.5.5 0 0 0 0-.002.5.5 0 0 0 0-.001.5.5 0 0 0 0-.002.5.5 0 0 0 0-.002V14a3 3 0 0 0-3-3h-.475a.5.5 0 0 0-.025 0Zm.5 2a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/folder-save.svg b/comm/mail/themes/shared/mail/icons/new/compact/folder-save.svg
new file mode 100644
index 0000000000..a0a3412e91
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/folder-save.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M2 3.5c-.277 0-.5.223-.5.5v8c0 .831.669 1.5 1.5 1.5h6.379l-.94-.94a1.515 1.515 0 0 1 0-2.12 1.515 1.515 0 0 1 2.122 0l.439.439V8.5c0-.817.683-1.5 1.5-1.5s1.5.683 1.5 1.5v2.379l.44-.44c.019-.019.04-.036.06-.054V8c0-1-.82-1.5-1.5-1.5H8.5l-2-3z" fill="context-fill"/>
+ <path d="M2 3c-.545 0-1 .455-1 1v8c0 1.1.9 2 2 2h6.879l-1-1H3c-.563 0-1-.437-1-1V6h2.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H2V4h4.232l1.852 2.777A.5.5 0 0 0 8.5 7H13c.218 0 .487.09.678.254.19.165.322.383.322.746v2.879l.44-.44c.161-.161.354-.278.56-.35V6c0-1.1-.9-2-2-2H7.5a.5.5 0 0 0-.059.012l-.525-.79A.5.5 0 0 0 6.5 3Zm6.102 2H13c.563 0 1 .437 1 1v.264A2.045 2.045 0 0 0 13 6H8.768ZM12.5 8a.5.5 0 0 0-.5.5v4.793l-2.146-2.147a.5.5 0 0 0-.708.708l3 3a.507.507 0 0 0 .036.025.5.5 0 0 0 .132.08.448.448 0 0 0 .15.035L12.5 15a.213.213 0 0 0 .035-.006.53.53 0 0 0 .15-.035.496.496 0 0 0 .133-.08.507.507 0 0 0 .036-.025l3-3a.5.5 0 0 0-.708-.708L13 13.293V8.5a.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/folder.svg b/comm/mail/themes/shared/mail/icons/new/compact/folder.svg
new file mode 100644
index 0000000000..26f1f73397
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/folder.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M2 3.5c-.277 0-.5.223-.5.5v8c0 .831.669 1.5 1.5 1.5h10c.831 0 1.5-.669 1.5-1.5V8c0-1-.82-1.5-1.5-1.5H8.5l-2-3H3Z" fill="context-fill"/>
+ <path d="M2 3c-.545 0-1 .455-1 1v8c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H7.5a.5.5 0 0 0-.059.012l-.525-.79A.5.5 0 0 0 6.5 3Zm0 1h4.232l1.852 2.777A.5.5 0 0 0 8.5 7H13c.218 0 .487.09.678.254.19.165.322.383.322.746v4c0 .563-.437 1-1 1H3c-.563 0-1-.437-1-1V6h2.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H2Zm6.102 1H13c.563 0 1 .437 1 1v.264A2.045 2.045 0 0 0 13 6H8.768Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/font.svg b/comm/mail/themes/shared/mail/icons/new/compact/font.svg
new file mode 100644
index 0000000000..bd19aa2154
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/font.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-opacity="context-fill-opacity" height="16" width="16">
+ <path d="M4 1.5A2.495 2.495 0 0 0 1.5 4v8c0 1.385 1.115 2.5 2.5 2.5h8c1.385 0 2.5-1.115 2.5-2.5V4c0-1.385-1.115-2.5-2.5-2.5H4zm5.5 3h2v7h-2v-7z" fill="context-fill"/>
+ <path d="M4 1a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4zm0 1h8a2.042 2.042 0 0 1 .402.041h.002a2.002 2.002 0 0 1 1.555 1.555v.002A2.013 2.013 0 0 1 14 4v8a1.997 1.997 0 0 1-2 2H4c-.138 0-.272-.015-.402-.041h-.002A2.002 2.002 0 0 1 2 12V4a2.036 2.036 0 0 1 .041-.402v-.002A2.002 2.002 0 0 1 4 2zm3.5 2a.5.5 0 0 0-.459.303L4.17 11H3.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5h-.242l.857-2H9v2h-.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H12V4.5a.5.5 0 0 0-.5-.5h-4zm.33 1H9v3H6.545L7.83 5zM10 5h1v6h-1V5z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/forward-col.svg b/comm/mail/themes/shared/mail/icons/new/compact/forward-col.svg
new file mode 100644
index 0000000000..b506626163
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/forward-col.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path fill="context-fill" d="M9.5 4a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .707L11.293 7H6c-1.1 0-2 .9-2 2v1.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V9c0-.563.437-1 1-1h5.293l-2.147 2.146a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 .105-.156.5.5 0 0 0 .004-.006.5.5 0 0 0 .002-.006A.5.5 0 0 0 13 7.5a.5.5 0 0 0-.004-.065.5.5 0 0 0-.004-.015.5.5 0 0 0-.01-.05.5.5 0 0 0-.017-.052.5.5 0 0 0-.002-.01.5.5 0 0 0-.012-.025.5.5 0 0 0-.017-.033.5.5 0 0 0-.01-.016.5.5 0 0 0-.028-.039.5.5 0 0 0-.005-.008.5.5 0 0 0-.037-.04l-3-3A.5.5 0 0 0 9.5 4Z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/forward-redirect-col.svg b/comm/mail/themes/shared/mail/icons/new/compact/forward-redirect-col.svg
new file mode 100644
index 0000000000..695d04a4b0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/forward-redirect-col.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path fill="context-stroke" d="M2.5 9a.5.5 0 0 0-.5.5V11c0 1.099.9 2 2 2h4.293l-2.147 2.146a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 .05-.06.5.5 0 0 0 .07-.139A.5.5 0 0 0 10 12.5a.5.5 0 0 0-.004-.06.5.5 0 0 0-.008-.052.5.5 0 0 0-.002-.007.5.5 0 0 0-.002-.006.5.5 0 0 0-.017-.053.5.5 0 0 0-.016-.04.5.5 0 0 0-.008-.015.5.5 0 0 0-.02-.033.5.5 0 0 0-.01-.018.5.5 0 0 0-.022-.029.5.5 0 0 0-.004-.006.5.5 0 0 0-.033-.035l-.022-.021-2.978-2.979A.5.5 0 0 0 6.5 9a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .707L8.293 12H4c-.563 0-1-.438-1-1V9.5a.5.5 0 0 0-.5-.5Zm6.922.006a.5.5 0 0 0-.276.14.5.5 0 0 0 0 .707l2.647 2.647-2.647 2.646a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.707l-3-3a.5.5 0 0 0-.432-.14Z"/>
+ <path fill="context-fill" d="M9.422 1.006a.5.5 0 0 0-.276.14.5.5 0 0 0 0 .707L11.293 4H6c-1.1 0-2 .9-2 2v1.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V6c0-.563.437-1 1-1h5.293L9.146 7.146a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 .105-.156.5.5 0 0 0 .004-.006.5.5 0 0 0 .002-.006A.5.5 0 0 0 13 4.5a.5.5 0 0 0-.004-.065.5.5 0 0 0-.004-.015.5.5 0 0 0-.01-.05.5.5 0 0 0-.017-.052.5.5 0 0 0-.002-.01.5.5 0 0 0-.012-.025.5.5 0 0 0-.017-.033.5.5 0 0 0-.01-.016.5.5 0 0 0-.028-.039.5.5 0 0 0-.005-.008.5.5 0 0 0-.037-.04l-3-3a.5.5 0 0 0-.432-.141Z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/forward.svg b/comm/mail/themes/shared/mail/icons/new/compact/forward.svg
new file mode 100644
index 0000000000..3525ee6534
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/forward.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M8.5 3.5a1 1 0 0 1 .707.293l3 3a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L9.086 8.5H5c-.294 0-.5.205-.5.5v1.5a1 1 0 0 1-2 0V9c0-1.368 1.132-2.5 2.5-2.5h4.086L7.793 5.207A1 1 0 0 1 8.5 3.5Z" fill="context-fill"/>
+ <path d="M8.5 3a1.5 1.5 0 0 0-1.06.439 1.508 1.508 0 0 0 0 2.121l.439.44H5C3.356 6 2 7.356 2 9v1.5c0 .822.677 1.5 1.5 1.5S5 11.322 5 10.5V9h2.879l-.44.439a1.508 1.508 0 0 0 0 2.121c.582.582 1.54.582 2.122 0l3-3c.092-.093.173-.197.238-.31h-.002a1.494 1.494 0 0 0 0-1.5h.002a1.504 1.504 0 0 0-.238-.311l-3-3a1.5 1.5 0 0 0-1.061-.44Zm0 1a.5.5 0 0 1 .354.146l3 3c.03.03.056.066.078.104a.5.5 0 0 0 .002 0 .499.499 0 0 1 0 .5.5.5 0 0 0-.002 0 .498.498 0 0 1-.078.103l-3 3c-.2.2-.508.2-.708 0a.493.493 0 0 1 0-.707l1.293-1.293A.5.5 0 0 0 9.086 8H5c-.527 0-1 .472-1 1v1.5c0 .282-.218.5-.5.5a.493.493 0 0 1-.5-.5V9c0-1.092.908-2 2-2h4.086a.5.5 0 0 0 .353-.854L8.146 4.853a.493.493 0 0 1 0-.707A.5.5 0 0 1 8.5 4Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/get-mail.svg b/comm/mail/themes/shared/mail/icons/new/compact/get-mail.svg
new file mode 100644
index 0000000000..872135a289
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/get-mail.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M3 4c-.554 0-1 .446-1 1v7c0 .554.446 1 1 1h5.879l-.44-.44a1.515 1.515 0 0 1 0-2.12 1.515 1.515 0 0 1 2.122 0l.439.439V8.5c0-.817.683-1.5 1.5-1.5s1.5.683 1.5 1.5V5c0-.554-.446-1-1-1Z" fill="context-fill"/>
+ <path d="M3 3c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h6.879l-1-1H3c-.563 0-1-.437-1-1V5c0-.563.437-1 1-1h10c.563 0 1 .437 1 1v5.879l.44-.44c.161-.161.354-.276.56-.347V5c0-1.1-.9-2-2-2Zm.47 2.002a.5.5 0 0 0-.343.166.5.5 0 0 0 .041.705l2.781 2.47-2.803 2.803a.5.5 0 0 0 0 .708.5.5 0 0 0 .708 0L6.697 9.01l.971.863a.5.5 0 0 0 .664 0l.97-.863L11 10.707V9.293l-.95-.95 2.782-2.47a.5.5 0 0 0 .041-.705.5.5 0 0 0-.705-.041L8 8.832 3.832 5.127a.5.5 0 0 0-.361-.125ZM12.5 8a.5.5 0 0 0-.5.5v4.793l-2.146-2.147a.5.5 0 0 0-.708 0 .5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .036.025.5.5 0 0 0 .058.04.5.5 0 0 0 .074.04.5.5 0 0 0 .065.021.5.5 0 0 0 .086.014.5.5 0 0 0 .035.006.5.5 0 0 0 .035-.006.5.5 0 0 0 .086-.014.5.5 0 0 0 .065-.021.5.5 0 0 0 .074-.04.5.5 0 0 0 .058-.04.5.5 0 0 0 .036-.025l3-3a.5.5 0 0 0 0-.708.5.5 0 0 0-.708 0L13 13.293V8.5a.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/globe-secure.svg b/comm/mail/themes/shared/mail/icons/new/compact/globe-secure.svg
new file mode 100644
index 0000000000..0201c7362a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/globe-secure.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M7.5.5a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 .695-.035A2.466 2.466 0 0 1 8 13.5v-2c0-.78.434-1.393 1-1.852V9.5C9 7.58 10.58 6 12.5 6c.714 0 1.38.22 1.936.592A7 7 0 0 0 7.5.5Zm3 10c-.554 0-1 .446-1 1v2c0 .554.446 1 1 1h4c.554 0 1-.446 1-1v-2c0-.554-.446-1-1-1z" fill="context-fill"/>
+ <path d="M7.5 0C3.818 0 .749 2.667.12 6.17l-.022.129a7.517 7.517 0 0 0 0 2.404l.021.127C.75 12.333 3.818 15 7.5 15c.326 0 .647-.022.963-.063-.3-.42-.462-.922-.463-1.437v-.139a5.56 5.56 0 0 1-.5.502 6.391 6.391 0 0 1-1.084-1.265 7.947 7.947 0 0 1-.844-1.674c.582.048 1.22.076 1.928.076.197 0 .378-.008.564-.012.102-.388.317-.725.59-1.015-1.13.055-2.264.027-3.39-.084A10.487 10.487 0 0 1 5 7.5c0-.9.101-1.695.264-2.39C5.913 5.04 6.652 5 7.5 5c.848 0 1.587.04 2.236.11.136.582.226 1.238.252 1.962.276-.285.601-.523.96-.703-.037-.389-.09-.76-.159-1.11 1.024.185 1.744.441 2.238.688.1.05.186.099.268.147.65.153 1.233.488 1.69.949a7.638 7.638 0 0 0-.083-.744l-.021-.129C14.25 2.667 11.182 0 7.5 0Zm0 1.137c.257.225.661.631 1.084 1.265.298.447.597 1.002.844 1.674A23.127 23.127 0 0 0 7.5 4c-.708 0-1.346.028-1.928.076.214-.59.498-1.151.844-1.674.305-.467.67-.892 1.084-1.265Zm-1.393.013a7.97 7.97 0 0 0-.523.698 9.031 9.031 0 0 0-1.107 2.353c-1.335.198-2.282.518-2.95.852-.022.01-.042.022-.064.033A6.494 6.494 0 0 1 6.107 1.15Zm2.786 0a6.494 6.494 0 0 1 4.644 3.936l-.064-.033c-.668-.334-1.615-.654-2.95-.852a9.066 9.066 0 0 0-1.107-2.353 7.853 7.853 0 0 0-.523-.698ZM4.21 5.26C4.079 5.934 4 6.68 4 7.5c0 .82.079 1.566.21 2.24-1.023-.184-1.743-.44-2.237-.687-.456-.228-.721-.446-.87-.594-.021-.022-.022-.026-.039-.043a6.573 6.573 0 0 1 0-1.834l.04-.041c.148-.148.413-.366.869-.594.494-.247 1.214-.503 2.238-.687ZM12.5 7A2.506 2.506 0 0 0 10 9.5v.59c-.58.208-1 .763-1 1.41v2c0 .822.678 1.5 1.5 1.5h4c.822 0 1.5-.678 1.5-1.5v-2c0-.647-.42-1.202-1-1.41V9.5C15 8.124 13.876 7 12.5 7Zm0 1c.84 0 1.5.66 1.5 1.5v.5h-3v-.5c0-.84.66-1.5 1.5-1.5ZM1.463 9.912l.064.035c.668.334 1.615.654 2.95.852a9.066 9.066 0 0 0 1.107 2.353c.177.265.354.494.525.698a6.496 6.496 0 0 1-4.646-3.938ZM10.5 11h4c.286 0 .5.214.5.5v2c0 .286-.214.5-.5.5h-4a.488.488 0 0 1-.5-.5v-2c0-.286.214-.5.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/globe.svg b/comm/mail/themes/shared/mail/icons/new/compact/globe.svg
new file mode 100644
index 0000000000..e6649bdef5
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/globe.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M14.5 7.5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z" fill="context-fill"/>
+ <path d="M7.5 0C3.818 0 .749 2.667.12 6.17l-.022.129a7.517 7.517 0 0 0 0 2.404l.021.127C.75 12.333 3.818 15 7.5 15c3.682 0 6.751-2.667 7.38-6.17l.022-.127a7.518 7.518 0 0 0 0-2.404l-.021-.129C14.25 2.667 11.182 0 7.5 0Zm0 1.137c.257.225.661.631 1.084 1.265.298.447.597 1.002.844 1.674A23.127 23.127 0 0 0 7.5 4c-.708 0-1.346.028-1.928.076.214-.59.498-1.151.844-1.674.305-.467.67-.892 1.084-1.265Zm-1.393.013a7.97 7.97 0 0 0-.523.698 9.031 9.031 0 0 0-1.107 2.353c-1.335.198-2.282.518-2.95.852-.022.01-.042.022-.064.033A6.494 6.494 0 0 1 6.107 1.15Zm2.786 0a6.494 6.494 0 0 1 4.644 3.936l-.064-.033c-.668-.334-1.615-.654-2.95-.852a9.066 9.066 0 0 0-1.107-2.353 7.853 7.853 0 0 0-.523-.698ZM7.5 5c.848 0 1.587.04 2.236.11C9.9 5.804 10 6.6 10 7.5c0 .9-.101 1.693-.264 2.389A21.13 21.13 0 0 1 7.5 10a21.13 21.13 0 0 1-2.236-.111A10.47 10.47 0 0 1 5 7.5c0-.9.101-1.695.264-2.39C5.913 5.04 6.652 5 7.5 5Zm-3.29.26C4.08 5.934 4 6.68 4 7.5c0 .82.079 1.566.21 2.24-1.023-.184-1.743-.44-2.237-.687-.456-.228-.721-.446-.87-.594-.021-.022-.022-.026-.039-.043a6.569 6.569 0 0 1 0-1.834l.04-.041c.148-.148.413-.366.869-.594.494-.247 1.214-.503 2.238-.687Zm6.58 0c1.023.184 1.743.44 2.237.687.456.228.721.446.87.594l.039.041a6.59 6.59 0 0 1 0 1.834c-.017.017-.018.021-.04.043-.148.148-.413.366-.869.594-.494.247-1.214.503-2.238.687.132-.674.211-1.42.211-2.24 0-.82-.079-1.566-.21-2.24ZM1.462 9.914l.064.033c.668.334 1.615.654 2.95.852a9.077 9.077 0 0 0 1.107 2.353c.177.265.354.494.525.698a6.495 6.495 0 0 1-4.646-3.936Zm12.074 0A6.495 6.495 0 0 1 8.89 13.85c.171-.204.348-.433.525-.698.48-.727.853-1.52 1.107-2.353 1.335-.198 2.282-.518 2.95-.852.022-.01.042-.022.064-.033zm-7.965 1.01c.582.048 1.22.076 1.928.076s1.346-.028 1.928-.076a7.947 7.947 0 0 1-.844 1.674A6.391 6.391 0 0 1 7.5 13.863a6.391 6.391 0 0 1-1.084-1.265 7.947 7.947 0 0 1-.844-1.674Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/handshake.svg b/comm/mail/themes/shared/mail/icons/new/compact/handshake.svg
new file mode 100644
index 0000000000..5fd165bed8
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/handshake.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M11.148 2.5c-.854 0-1.708.558-2.363 1.213l-.805.708 1.475 1.284c.47.41.44 1.15 0 1.59-.44.44-1.151.44-1.592 0L6.561 5.992C5.16 7.457 4.665 8.02 3.5 9.25c1.621 1.58 2.1 2.149 3.63 3.816.217.217.541.434.866.434.325 0 .65-.217.867-.434 1.5-1.695 3.05-3.139 4.65-4.738.656-.654.987-1.412.987-2.328 0-.916-.331-1.863-.986-2.518a3.337 3.337 0 0 0-2.366-.982Z" fill="context-fill"/>
+ <path d="M4.844 2c-.983 0-1.97.38-2.719 1.129C1.358 3.896 1 4.966 1 6s.392 1.95 1.125 2.682a.48.48 0 0 0 .004.004c1.619 1.578 3.111 3.061 4.633 4.718l.008.008.007.008c.035.034.071.069.11.103.038.035.077.07.119.104h.002c.042.033.085.067.13.098a1.81 1.81 0 0 0 .475.222 1.406 1.406 0 0 0 .766 0c.356-.098.631-.32.838-.527l.012-.01.01-.012a46.757 46.757 0 0 1 1.69-1.804c.955-.97 1.933-1.908 2.938-2.912a4.253 4.253 0 0 0 .68-.897A3.633 3.633 0 0 0 15 6a4.39 4.39 0 0 0-.156-1.162 3.852 3.852 0 0 0-.977-1.71 3.871 3.871 0 0 0-2.35-1.11h-.001A3.844 3.844 0 0 0 11.148 2c-.067 0-.133.003-.199.008a3.178 3.178 0 0 0-1.295.406 5.166 5.166 0 0 0-.65.434 6.51 6.51 0 0 0-.572.511l-.463.407-.407-.407C6.854 2.651 5.917 2 4.845 2Zm0 1c.637 0 1.41.465 2.011 1.066.337.314.687.643.999.909l1.273 1.107c.237.206.225.609-.025.86a.614.614 0 0 1-.885 0L6.553 5.276l-.354.37c-1.252 1.31-1.827 1.944-2.754 2.93-.204-.201-.405-.402-.613-.604C2.255 7.396 2 6.798 2 6s.29-1.622.832-2.164A2.83 2.83 0 0 1 4.844 3Zm6.304 0a2.83 2.83 0 0 1 2.204 1.053c.12.152.224.318.312.496v.002c.219.444.336.952.336 1.449 0 .696-.201 1.241-.639 1.754v.002a3.98 3.98 0 0 1-.2.217c-.793.792-1.577 1.55-2.352 2.324a60.45 60.45 0 0 0-1.73 1.787c-.191.206-.38.415-.57.629-.117.118-.29.22-.411.264a.33.33 0 0 1-.102.023.33.33 0 0 1-.1-.023h-.001a1.198 1.198 0 0 1-.276-.153h-.002a1.114 1.114 0 0 1-.133-.111l-.234-.256 2.604-2.603a.5.5 0 0 0-.708-.708l-2.574 2.575a96.12 96.12 0 0 0-.754-.81l2.057-2.057a.5.5 0 0 0-.707-.708l-2.045 2.045a71.88 71.88 0 0 0-.936-.943c.814-.865 1.442-1.543 2.385-2.537l.938.937c.63.631 1.668.631 2.299 0 .63-.63.677-1.708-.026-2.32l-1.02-.887.364-.363.012-.012c.45-.45.998-.825 1.511-.984A1.9 1.9 0 0 1 11.148 3Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/heart.svg b/comm/mail/themes/shared/mail/icons/new/compact/heart.svg
new file mode 100644
index 0000000000..bc89914c4d
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/heart.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M13.514 8.327c.655-.654.986-1.41.986-2.327 0-.916-.331-1.864-.986-2.518a3.335 3.335 0 0 0-2.365-.982c-.854 0-1.71.558-2.364 1.212l-.789.788-.788-.788C6.553 3.058 5.698 2.5 4.844 2.5c-.855 0-1.71.327-2.365.982C1.824 4.136 1.5 5.084 1.5 6c0 .916.324 1.673.979 2.327C4.1 9.908 5.599 11.4 7.13 13.067c.217.216.542.433.866.433.325 0 .65-.216.867-.433 1.5-1.696 3.05-3.14 4.65-4.74Z" fill="context-fill"/>
+ <path d="M4.844 2c-.983 0-1.97.38-2.719 1.129C1.358 3.896 1 4.966 1 6s.392 1.95 1.125 2.682a.5.5 0 0 0 .004.004c1.619 1.578 3.111 3.061 4.633 4.718a.5.5 0 0 0 .015.016c.276.275.672.58 1.22.58.546 0 .944-.305 1.22-.58a.5.5 0 0 0 .02-.022c1.48-1.673 3.022-3.11 4.63-4.716C14.6 7.95 15 7.037 15 6s-.367-2.106-1.133-2.871A3.843 3.843 0 0 0 11.148 2c-1.072 0-2.008.651-2.716 1.36l-.436.433-.434-.434C6.854 2.651 5.917 2 4.845 2Zm0 1c.637 0 1.41.465 2.011 1.066l.788.788a.5.5 0 0 0 .707 0l.789-.788C9.74 3.466 10.51 3 11.149 3a2.83 2.83 0 0 1 2.011.836C13.704 4.38 14 5.204 14 6s-.262 1.395-.84 1.973c-1.585 1.584-3.137 3.032-4.65 4.74-.158.157-.411.287-.514.287-.103 0-.354-.13-.512-.287-1.534-1.67-3.035-3.164-4.652-4.74C2.255 7.396 2 6.798 2 6s.29-1.622.832-2.164A2.83 2.83 0 0 1 4.844 3Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/hidden.svg b/comm/mail/themes/shared/mail/icons/new/compact/hidden.svg
new file mode 100644
index 0000000000..bc82ddca41
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/hidden.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M8 3.5A3.5 3.5 0 0 0 4.5 7a3.5 3.5 0 0 0 .316 1.453l3.903-4.88A3.5 3.5 0 0 0 8 3.5Zm3.107 1.892-3.99 4.989A3.5 3.5 0 0 0 8 10.5 3.5 3.5 0 0 0 11.5 7a3.5 3.5 0 0 0-.393-1.608Z" fill="context-fill"/>
+ <path d="M11.445 2.002a.5.5 0 0 0-.336.185l-8 10a.5.5 0 0 0 .079.703.5.5 0 0 0 .703-.078l8-10a.5.5 0 0 0-.079-.703.5.5 0 0 0-.367-.107ZM8 3c-.069 0-.137.002-.205.006-3.657.114-5.73 3.244-6.711 4.716a.5.5 0 0 0 0 .555c.422.633 1.05 1.572 1.914 2.447l.637-.795c-.619-.654-1.107-1.356-1.492-1.93.519-.771 1.225-1.776 2.185-2.585A3.972 3.972 0 0 0 4 7c0 .68.171 1.32.473 1.882l.7-.878a2.993 2.993 0 0 1 2.664-4h.009A3.06 3.06 0 0 1 8 4c.052 0 .103.002.154.004h.008c.067.003.132.011.197.02l.74-.927a6.343 6.343 0 0 0-.894-.091A4.018 4.018 0 0 0 8 3Zm3.943 1.35-1.181 1.476c.152.36.238.756.238 1.174a2.992 2.992 0 0 1-3.537 2.949l-.688.857c.387.125.798.194 1.225.194 2.203 0 4-1.797 4-4 0-.563-.117-1.1-.328-1.586.96.81 1.666 1.814 2.185 2.586-1.034 1.537-2.808 4-5.857 4a5.29 5.29 0 0 1-1.9-.348l-.65.814A6.29 6.29 0 0 0 8 13c3.786 0 5.916-3.223 6.916-4.723a.5.5 0 0 0 0-.555c-.578-.867-1.536-2.31-2.973-3.373Zm-4.416.712a2 2 0 0 0-1.523 1.904Zm2.461 1.73-1.74 2.174A2 2 0 0 0 10 7a2 2 0 0 0-.012-.207Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/id.svg b/comm/mail/themes/shared/mail/icons/new/compact/id.svg
new file mode 100644
index 0000000000..05f1c1040c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/id.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M7 2.5c-.277 0-.5.223-.5.5v2c0 .277.223.5.5.5h2c.277 0 .5-.223.5-.5V3c0-.277-.223-.5-.5-.5Zm-3 5c-.277 0-.5.223-.5.5v3c0 .277.223.5.5.5h3c.277 0 .5-.223.5-.5V8c0-.277-.223-.5-.5-.5Z" fill="context-fill"/>
+ <path d="M7 2c-.545 0-1 .454-1 1H3c-1.1 0-2 .9-2 2v7c0 1.099.9 2 2 2h10c1.1 0 2-.901 2-2V5c0-1.1-.9-2-2-2h-3c0-.546-.455-1-1-1Zm0 1h2v2H7ZM3 4h3v1c0 .545.455 1 1 1h2c.545 0 1-.455 1-1V4h3c.563 0 1 .437 1 1v7c0 .562-.437 1-1 1H3c-.563 0-1-.438-1-1V5c0-.563.437-1 1-1Zm1 3c-.545 0-1 .454-1 1v3c0 .545.455 1 1 1h3c.545 0 1-.455 1-1V8c0-.546-.455-1-1-1Zm5.5 0a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5ZM4 8h3v3H4Zm5.5 1a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm0 2a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/import.svg b/comm/mail/themes/shared/mail/icons/new/compact/import.svg
new file mode 100644
index 0000000000..e80bc6b44e
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/import.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M11.732 4c.17.294.268.635.268 1v6c0 1.108-.892 2-2 2H5a1.99 1.99 0 0 1-1-.268V13c0 .554.446 1 1 1h7c.554 0 1-.446 1-1V5c0-.554-.446-1-1-1Z" fill="context-fill"/>
+ <path d="M3 1c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2 0 1.1.9 2 2 2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2 0-1.1-.9-2-2-2Zm0 1h7c.563 0 1 .437 1 1v8c0 .563-.437 1-1 1H3c-.563 0-1-.437-1-1V3c0-.563.437-1 1-1Zm3.5 1a.5.5 0 0 0-.5.5v2.793L4.854 5.146a.5.5 0 0 0-.708.708l2 2C6.322 8.029 6.5 8 6.5 8s.182.025.354-.146l2-2a.5.5 0 0 0-.708-.708L7 6.293V3.5a.5.5 0 0 0-.5-.5ZM12 4c.563 0 1 .437 1 1v8c0 .563-.437 1-1 1H5c-.563 0-1-.437-1-1h6c1.1 0 2-.9 2-2zM4.5 8a.5.5 0 0 0-.5.5v1c0 .822.678 1.5 1.5 1.5h2c.822 0 1.5-.678 1.5-1.5v-1a.5.5 0 1 0-1 0v1c0 .286-.214.5-.5.5h-2a.488.488 0 0 1-.5-.5v-1a.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/inbox.svg b/comm/mail/themes/shared/mail/icons/new/compact/inbox.svg
new file mode 100644
index 0000000000..551edad095
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/inbox.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M4 2c-1.108 0-2 .892-2 2v8c0 1.108.892 2 2 2h8c1.108 0 2-.892 2-2V4c0-1.108-.892-2-2-2Zm1 3h6v1H5ZM4 7h8v3h-1.17c-.41 1.167-1.52 2-2.83 2s-2.42-.833-2.83-2H4Z" fill="context-fill"/>
+ <path d="M4 1C2.347 1 1 2.347 1 4v8c0 1.653 1.347 3 3 3h8c1.653 0 3-1.347 3-3V4c0-1.653-1.347-3-3-3Zm0 1h8c1.117 0 2 .883 2 2v5h-1V7c0-.545-.455-1-1-1V5c0-.545-.455-1-1-1H5c-.545 0-1 .455-1 1v1c-.545 0-1 .455-1 1v2.002c-.342 0-.673 0-1-.002V4c0-1.117.883-2 2-2Zm1 3h6v1H5ZM4 7h8v2h-1.5a.5.5 0 0 0-.5.5c0 .667-.722 1.5-2 1.5s-2-.833-2-1.5a.5.5 0 0 0-.5-.5c-.399 0-.951 0-1.5.002Zm1.244 3c.299 1.084 1.28 2 2.756 2 1.476 0 2.457-.916 2.756-2H14v2c0 1.117-.883 2-2 2H4c-1.117 0-2-.883-2-2v-1.998c1.123.004 2.362-.001 3.244-.002Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/info.svg b/comm/mail/themes/shared/mail/icons/new/compact/info.svg
new file mode 100644
index 0000000000..ebf600cc09
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/info.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M14.5 7.5a7 7 0 0 1-7 7 7 7 0 0 1-7-7 7 7 0 0 1 7-7 7 7 0 0 1 7 7z" fill="context-fill"/>
+ <path d="M7.5 0C3.364 0 0 3.363 0 7.5 0 11.636 3.364 15 7.5 15S15 11.636 15 7.5C15 3.363 11.636 0 7.5 0Zm0 1C11.096 1 14 3.904 14 7.5c0 3.595-2.904 6.5-6.5 6.5A6.492 6.492 0 0 1 1 7.5C1 3.904 3.904 1 7.5 1Zm0 3a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm0 2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5Zm0-1.5zm0 0z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/kebab.svg b/comm/mail/themes/shared/mail/icons/new/compact/kebab.svg
new file mode 100644
index 0000000000..33552abf5a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/kebab.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M9 4a1 1 0 1 0-1 1h.002a.5.5 0 0 0 .002 0A1.002 1.002 0 0 0 9 4Zm0 4a1 1 0 1 0-1 1h.002a.5.5 0 0 0 .002 0A1.002 1.002 0 0 0 9 8Zm0 4a1 1 0 1 0-1 1h.002a.5.5 0 0 0 .002 0A1.002 1.002 0 0 0 9 12Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/key.svg b/comm/mail/themes/shared/mail/icons/new/compact/key.svg
new file mode 100644
index 0000000000..ad970e8a1d
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/key.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M11 1.5A3.5 3.5 0 0 0 7.5 5a3.5 3.5 0 0 0 .246 1.264l-.24.242L7.5 6.5l-5 5v2h2l1-1v-1h1l1-1v-1h1l1-1-.006-.006.242-.24A3.5 3.5 0 0 0 11 8.5 3.5 3.5 0 0 0 14.5 5 3.5 3.5 0 0 0 11 1.5Zm.5 2a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1z" fill="context-fill"/>
+ <path d="M11 1C8.797 1 7 2.797 7 5a.5.5 0 0 0 0 .004c.003.373.108.731.213 1.088l-.055.054a.5.5 0 0 0-.012 0l-5 5A.5.5 0 0 0 2 11.5v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .354-.146l1-1A.5.5 0 0 0 6 12.5V12h.5a.5.5 0 0 0 .354-.146l1-1A.5.5 0 0 0 8 10.5V10h.5a.5.5 0 0 0 .354-.146l1-1a.5.5 0 0 0 .023-.036l.031-.03c.357.104.715.21 1.088.212A.5.5 0 0 0 11 9c2.203 0 4-1.797 4-4 0-2.203-1.797-4-4-4Zm0 1c1.663 0 3 1.337 3 3a2.992 2.992 0 0 1-2.998 3 3.004 3.004 0 0 1-1.082-.21.5.5 0 0 0-.535.108l-.242.24a.5.5 0 0 0-.008.02L8.293 9H7.5a.5.5 0 0 0-.5.5v.793L6.293 11H5.5a.5.5 0 0 0-.5.5v.793L4.293 13H3v-1.293l4.842-4.842a.5.5 0 0 0 .02-.008l.24-.242a.5.5 0 0 0 .109-.535A3.004 3.004 0 0 1 8 5v-.002A2.992 2.992 0 0 1 11 2Zm.5 1c-.823 0-1.5.677-1.5 1.5S10.677 6 11.5 6 13 5.323 13 4.5 12.323 3 11.5 3Zm0 1c.282 0 .5.218.5.5 0 .282-.218.5-.5.5a.493.493 0 0 1-.5-.5c0-.282.218-.5.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/layout.svg b/comm/mail/themes/shared/mail/icons/new/compact/layout.svg
new file mode 100644
index 0000000000..31e9587719
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/layout.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M3 3.5c-.831 0-1.5.669-1.5 1.5v7c0 .83.669 1.5 1.5 1.5h4.5v-10z" fill="context-fill"/>
+ <path d="M3 3c-1.1 0-2 .9-2 2v7c0 1.099.9 2 2 2h10c1.1 0 2-.901 2-2V5c0-1.1-.9-2-2-2Zm0 1h4v9H3c-.563 0-1-.438-1-1V5c0-.563.437-1 1-1Zm5 0h5c.563 0 1 .437 1 1v7c0 .562-.437 1-1 1H8ZM3.5 6a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm0 2a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm0 2a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/link.svg b/comm/mail/themes/shared/mail/icons/new/compact/link.svg
new file mode 100644
index 0000000000..5161058abc
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/link.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M11.588 1a1.992 1.992 0 0 0-1.414.582L8.052 3.703a2.006 2.006 0 0 0 0 2.829l.354.355-1.52 1.52-.354-.354a2.007 2.007 0 0 0-2.828 0l-2.122 2.122a2.006 2.006 0 0 0 0 2.827l1.414 1.415a2.008 2.008 0 0 0 2.83 0l2.12-2.122a2.006 2.006 0 0 0 0-2.828l-.353-.354 1.52-1.52.354.353c.777.778 2.05.778 2.828 0l2.121-2.121a2.006 2.006 0 0 0 0-2.829l-1.414-1.414A1.989 1.989 0 0 0 11.588 1zm0 .99c.254 0 .508.1.707.299l1.414 1.414a.988.988 0 0 1 0 1.414L11.588 7.24a.987.987 0 0 1-1.414 0l-.354-.352 1.032-1.033a.5.5 0 0 0 0-.707.5.5 0 0 0-.707 0L9.113 6.18l-.354-.355a.987.987 0 0 1 0-1.415l2.122-2.121a1 1 0 0 1 .707-.298zm-6.47 6.471c.255 0 .509.1.708.299l.353.353-1.033 1.033a.5.5 0 0 0 0 .708.5.5 0 0 0 .707 0L6.886 9.82l.354.354a.987.987 0 0 1 0 1.414L5.119 13.71a.99.99 0 0 1-1.415-.001l-1.415-1.414a.986.986 0 0 1 0-1.415L4.41 8.76a.998.998 0 0 1 .709-.299z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/lock-disabled.svg b/comm/mail/themes/shared/mail/icons/new/compact/lock-disabled.svg
new file mode 100644
index 0000000000..f822e07c76
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/lock-disabled.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4 5.5c-.831 0-1.5.669-1.5 1.5v4.379l5.879-5.88H4Zm8.525.095L3.66 14.461c.11.025.223.039.34.039h8c.831 0 1.5-.67 1.5-1.5V7c0-.646-.405-1.192-.975-1.405z" fill="context-fill"/>
+ <path d="M8 0C5.793 0 4 1.792 4 4v1c-1.1 0-2 .9-2 2v4.879l1-1v-3.88c0-.562.437-1 1-1h3.879l1-1H5v-1c0-1.67 1.33-3 3-3 .836 0 1.583.335 2.125.878a.5.5 0 0 0 .707.002.5.5 0 0 0 0-.707A3.995 3.995 0 0 0 8 0Zm4.902 5.218-.789.79A.984.984 0 0 1 13 7v6c0 .562-.437 1-1 1H4.121l-.857.857c.228.091.476.143.736.143h8c1.1 0 2-.901 2-2V7c0-.775-.449-1.45-1.098-1.782ZM8.99 9.131l-1.926 1.925-.084.315a.5.5 0 0 0 .485.629H8.5a.5.5 0 0 0 .484-.621L8.59 9.802c.214-.158.363-.398.4-.671Z" fill="context-stroke"/>
+ <path d="m14.146 1.146-13 13a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l13-13a.5.5 0 0 0 0-.707.5.5 0 0 0-.708 0z" fill="#ff0039"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/lock.svg b/comm/mail/themes/shared/mail/icons/new/compact/lock.svg
new file mode 100644
index 0000000000..9c1239d294
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/lock.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4 5.5h8c.831 0 1.5.669 1.5 1.5v6c0 .83-.669 1.5-1.5 1.5H4c-.831 0-1.5-.67-1.5-1.5V7c0-.831.669-1.5 1.5-1.5Z" fill="context-fill"/>
+ <path d="M8 0C5.793 0 4 1.792 4 4v1c-1.1 0-2 .9-2 2v6c0 1.099.9 2 2 2h8c1.1 0 2-.901 2-2V7c0-1.1-.9-2-2-2V4c0-2.208-1.793-4-4-4Zm0 1c1.67 0 3 1.329 3 3v1H5V4c0-1.671 1.33-3 3-3ZM4 6h8c.563 0 1 .437 1 1v6c0 .562-.437 1-1 1H4c-.563 0-1-.438-1-1V7c0-.563.437-1 1-1Zm4 2c-.546 0-1 .453-1 1 0 .323.16.613.402.797l-.422 1.574a.5.5 0 0 0 .485.629H8.5a.5.5 0 0 0 .484-.621L8.59 9.802A1 1 0 0 0 9 9c0-.547-.454-1-1-1Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/low-priority.svg b/comm/mail/themes/shared/mail/icons/new/compact/low-priority.svg
new file mode 100644
index 0000000000..59653d7eb3
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/low-priority.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-opacity="context-fill-opacity" height="16" width="16">
+ <path d="M7.5 3a.5.5 0 0 0-.5.5v7.793l-1.146-1.147A.5.5 0 0 0 5.5 10a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .141.095.5.5 0 0 0 .049.02A.5.5 0 0 0 7.5 13a.5.5 0 0 0 .164-.031.5.5 0 0 0 .049-.02.5.5 0 0 0 .14-.095l2-2a.5.5 0 0 0 0-.708.5.5 0 0 0-.707 0L8 11.293V3.5a.5.5 0 0 0-.5-.5z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/mail-secure.svg b/comm/mail/themes/shared/mail/icons/new/compact/mail-secure.svg
new file mode 100644
index 0000000000..479dab310b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/mail-secure.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M3 4c-.554 0-1 .446-1 1v7c0 .554.446 1 1 1h5v-1.5c0-.78.434-1.393 1-1.852V9.5C9 7.58 10.58 6 12.5 6c.536 0 1.044.123 1.5.342V5c0-.554-.446-1-1-1Zm7.5 6.5c-.554 0-1 .446-1 1v2c0 .554.446 1 1 1h4c.554 0 1-.446 1-1v-2c0-.554-.446-1-1-1z" fill="context-fill"/>
+ <path d="M3 3c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h5.05a2.48 2.48 0 0 1-.05-.5V13H3c-.563 0-1-.437-1-1V5c0-.563.437-1 1-1h10c.563 0 1 .437 1 1v1.342c.374.18.713.424 1 .719V5c0-1.1-.9-2-2-2Zm.47 2.002a.5.5 0 0 0-.343.166.5.5 0 0 0 .041.705l2.781 2.47-2.803 2.803a.5.5 0 0 0 0 .708.5.5 0 0 0 .708 0L6.697 9.01l.971.863a.5.5 0 0 0 .664 0l.676-.6a3.496 3.496 0 0 1 1.021-2.244L8 8.832 3.832 5.127a.5.5 0 0 0-.361-.125Zm8.928.01a.5.5 0 0 0-.23.115l-1.86 1.654a3.474 3.474 0 0 1 2.376-.777l.148-.131a.5.5 0 0 0 .041-.705.5.5 0 0 0-.475-.156ZM12.5 7A2.506 2.506 0 0 0 10 9.5v.59c-.58.208-1 .763-1 1.41v2c0 .822.678 1.5 1.5 1.5h4c.822 0 1.5-.678 1.5-1.5v-2c0-.647-.42-1.202-1-1.41V9.5C15 8.124 13.876 7 12.5 7Zm0 1c.84 0 1.5.66 1.5 1.5v.5h-3v-.5c0-.84.66-1.5 1.5-1.5Zm-2 3h4c.286 0 .5.214.5.5v2c0 .286-.214.5-.5.5h-4a.488.488 0 0 1-.5-.5v-2c0-.286.214-.5.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/mail.svg b/comm/mail/themes/shared/mail/icons/new/compact/mail.svg
new file mode 100644
index 0000000000..161ced2898
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/mail.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M3 4h10c.554 0 1 .446 1 1v7c0 .554-.446 1-1 1H3c-.554 0-1-.446-1-1V5c0-.554.446-1 1-1Z" fill="context-fill"/>
+ <path d="M3 3c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm0 1h10c.563 0 1 .437 1 1v7c0 .563-.437 1-1 1H3c-.563 0-1-.437-1-1V5c0-.563.437-1 1-1Zm.47 1.002a.5.5 0 0 0-.343.166.5.5 0 0 0 .041.705l2.781 2.47-2.803 2.803a.5.5 0 0 0 0 .708.5.5 0 0 0 .708 0L6.697 9.01l.971.863a.5.5 0 0 0 .664 0l.97-.863 2.844 2.844a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.708L10.05 8.344l2.781-2.471a.5.5 0 0 0 .041-.705.5.5 0 0 0-.705-.041L8 8.832 3.832 5.127a.5.5 0 0 0-.361-.125Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/more.svg b/comm/mail/themes/shared/mail/icons/new/compact/more.svg
new file mode 100644
index 0000000000..5ab35ef587
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/more.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4 7c-.546 0-1 .453-1 1 0 .546.454 1 1 1s1-.454 1-1v-.002a.5.5 0 0 0 0-.002A1.008 1.008 0 0 0 4 7Zm4 0c-.546 0-1 .453-1 1 0 .546.454 1 1 1s1-.454 1-1v-.002a.5.5 0 0 0 0-.002A1.008 1.008 0 0 0 8 7Zm4 0c-.546 0-1 .453-1 1 0 .546.454 1 1 1s1-.454 1-1v-.002a.5.5 0 0 0 0-.002A1.008 1.008 0 0 0 12 7Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/nav-back.svg b/comm/mail/themes/shared/mail/icons/new/compact/nav-back.svg
new file mode 100644
index 0000000000..450a3b1ba0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/nav-back.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M7.5 3a.5.5 0 0 0-.354.146l-4 4A.5.5 0 0 0 3 7.5a.5.5 0 0 0 .146.353l4 4a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.707L4.707 8H12.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H4.707l3.147-3.147a.5.5 0 0 0 0-.707A.5.5 0 0 0 7.5 3Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/nav-down-unread.svg b/comm/mail/themes/shared/mail/icons/new/compact/nav-down-unread.svg
new file mode 100644
index 0000000000..dcb514cc68
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/nav-down-unread.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M3.525 5.002a.5.5 0 0 0-.359.127.5.5 0 0 0-.037.705l4.5 5a.5.5 0 0 0 .742 0l4.5-5a.5.5 0 0 0-.037-.705.5.5 0 0 0-.705.037L8 9.754 3.871 5.166a.5.5 0 0 0-.346-.164zM13 9c-1.099 0-2 .901-2 2s.901 2 2 2 2-.901 2-2-.901-2-2-2zm0 1c.558 0 1 .442 1 1s-.442 1-1 1-1-.442-1-1 .442-1 1-1z" fill="context-stroke"/>
+ <path d="M14.5 11a1.5 1.5 0 0 1-1.5 1.5 1.5 1.5 0 0 1-1.5-1.5A1.5 1.5 0 0 1 13 9.5a1.5 1.5 0 0 1 1.5 1.5Z" fill="context-fill"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/nav-down.svg b/comm/mail/themes/shared/mail/icons/new/compact/nav-down.svg
new file mode 100644
index 0000000000..68adb2ac47
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/nav-down.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <!-- Use both context-fill and context-stroke path to account for the styling coming from toolkit for those sections we can't override. -->
+ <path d="M3.166 5.128a.5.5 0 0 0-.037.706l4.5 5a.5.5 0 0 0 .742 0l4.5-5a.5.5 0 0 0-.037-.706.5.5 0 0 0-.705.038L8 9.753 3.871 5.166a.5.5 0 0 0-.705-.038z" fill="context-fill transparent"/>
+ <path d="M3.166 5.128a.5.5 0 0 0-.037.706l4.5 5a.5.5 0 0 0 .742 0l4.5-5a.5.5 0 0 0-.037-.706.5.5 0 0 0-.705.038L8 9.753 3.871 5.166a.5.5 0 0 0-.705-.038z" fill="context-stroke transparent"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/nav-forward.svg b/comm/mail/themes/shared/mail/icons/new/compact/nav-forward.svg
new file mode 100644
index 0000000000..fd2d750d05
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/nav-forward.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M8.5 3a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .707L11.293 7H3.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h7.793l-3.147 3.146a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 .103-.152.5.5 0 0 0 .008-.024A.5.5 0 0 0 13 7.5a.5.5 0 0 0-.018-.13.5.5 0 0 0-.048-.12.5.5 0 0 0-.08-.104l-4-4A.5.5 0 0 0 8.5 3Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/nav-left.svg b/comm/mail/themes/shared/mail/icons/new/compact/nav-left.svg
new file mode 100644
index 0000000000..b88b57605c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/nav-left.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <!-- Use both context-fill and context-stroke path to account for the styling coming from toolkit for those sections we can't override. -->
+ <path d="M10.872 3.166a.5.5 0 0 0-.706-.037l-5 4.5a.5.5 0 0 0 0 .742l5 4.5a.5.5 0 0 0 .706-.037.5.5 0 0 0-.038-.705L6.247 8l4.587-4.129a.5.5 0 0 0 .038-.705z" fill="context-fill transparent"/>
+ <path d="M10.872 3.166a.5.5 0 0 0-.706-.037l-5 4.5a.5.5 0 0 0 0 .742l5 4.5a.5.5 0 0 0 .706-.037.5.5 0 0 0-.038-.705L6.247 8l4.587-4.129a.5.5 0 0 0 .038-.705z" fill="context-stroke transparent"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/nav-right.svg b/comm/mail/themes/shared/mail/icons/new/compact/nav-right.svg
new file mode 100644
index 0000000000..43a78bcbef
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/nav-right.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <!-- Use both context-fill and context-stroke path to account for the styling coming from toolkit for those sections we can't override. -->
+ <path d="M5.128 3.166a.5.5 0 0 1 .706-.037l5 4.5a.5.5 0 0 1 0 .742l-5 4.5a.5.5 0 0 1-.706-.037.5.5 0 0 1 .038-.705L9.753 8 5.166 3.871a.5.5 0 0 1-.038-.705z" fill="context-fill transparent"/>
+ <path d="M5.128 3.166a.5.5 0 0 1 .706-.037l5 4.5a.5.5 0 0 1 0 .742l-5 4.5a.5.5 0 0 1-.706-.037.5.5 0 0 1 .038-.705L9.753 8 5.166 3.871a.5.5 0 0 1-.038-.705z" fill="context-stroke transparent"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/nav-up-unread.svg b/comm/mail/themes/shared/mail/icons/new/compact/nav-up-unread.svg
new file mode 100644
index 0000000000..68dd8e6933
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/nav-up-unread.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M13 3c-1.099 0-2 .901-2 2s.901 2 2 2 2-.901 2-2-.901-2-2-2zm0 1c.558 0 1 .442 1 1s-.442 1-1 1-1-.442-1-1 .442-1 1-1zM8 5a.5.5 0 0 0-.371.166l-4.5 5a.5.5 0 0 0 .037.705.5.5 0 0 0 .705-.037L8 6.246l4.129 4.588a.5.5 0 0 0 .705.037.5.5 0 0 0 .037-.705l-4.5-5A.5.5 0 0 0 8 5z" fill="context-stroke"/>
+ <path d="M14.5 5A1.5 1.5 0 0 1 13 6.5 1.5 1.5 0 0 1 11.5 5 1.5 1.5 0 0 1 13 3.5 1.5 1.5 0 0 1 14.5 5Z" fill="context-fill"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/nav-up.svg b/comm/mail/themes/shared/mail/icons/new/compact/nav-up.svg
new file mode 100644
index 0000000000..5072e04f28
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/nav-up.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <!-- Use both context-fill and context-stroke path to account for the styling coming from toolkit for those sections we can't override. -->
+ <path d="M3.166 10.872a.5.5 0 0 1-.037-.706l4.5-5a.5.5 0 0 1 .742 0l4.5 5a.5.5 0 0 1-.037.706.5.5 0 0 1-.705-.038L8 6.247l-4.129 4.587a.5.5 0 0 1-.705.038z" fill="context-fill transparent"/>
+ <path d="M3.166 10.872a.5.5 0 0 1-.037-.706l4.5-5a.5.5 0 0 1 .742 0l4.5 5a.5.5 0 0 1-.037.706.5.5 0 0 1-.705-.038L8 6.247l-4.129 4.587a.5.5 0 0 1-.705.038z" fill="context-stroke transparent"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/new-address-book.svg b/comm/mail/themes/shared/mail/icons/new/compact/new-address-book.svg
new file mode 100644
index 0000000000..7156f194ac
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/new-address-book.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4 1.5c-.831 0-1.5.669-1.5 1.5v10c0 .83.669 1.5 1.5 1.5h6V13H8.5c-.817 0-1.5-.684-1.5-1.5 0-.817.683-1.5 1.5-1.5H10V8.5c0-.817.683-1.5 1.5-1.5s1.5.683 1.5 1.5V10h.5V3c0-.831-.669-1.5-1.5-1.5Z" fill="context-fill"/>
+ <path d="M4 1c-1.1 0-2 .9-2 2h-.5a.5.5 0 1 0 0 1H2v2h-.5a.5.5 0 1 0 0 1H2v2h-.5a.5.5 0 1 0 0 1H2v2h-.5a.5.5 0 1 0 0 1H2c0 1.099.9 2 2 2h6.09a1.456 1.456 0 0 1-.09-.5V14H4c-.563 0-1-.438-1-1h.5a.5.5 0 1 0 0-1H3v-2h.5a.5.5 0 1 0 0-1H3V7h.5a.5.5 0 1 0 0-1H3V4h.5a.5.5 0 1 0 0-1H3c0-.563.437-1 1-1h8c.563 0 1 .437 1 1v7h1V3c0-1.1-.9-2-2-2Zm4.5 3c-.861 0-1.537.312-1.947.804C6.143 5.297 6 5.916 6 6.5c0 .86.298 1.486.61 1.875.181.227.258.242.39.334v.29h-.5c-.822 0-1.5.678-1.5 1.5v1a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-1c0-.285.214-.5.5-.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.277-.447s-.143-.066-.332-.302C7.201 7.513 7 7.139 7 6.5c0-.417.108-.798.322-1.055C7.537 5.188 7.862 5 8.5 5c.639 0 .963.188 1.178.445.214.257.322.638.322 1.055 0 .639-.202 1.013-.39 1.25-.19.236-.333.302-.333.302A.5.5 0 0 0 9 8.5v1a.5.5 0 0 0 .5.5h.5V8.499c0-.621.397-1.166.947-1.39.034-.188.053-.39.053-.61 0-.583-.142-1.202-.553-1.695C10.037 4.312 9.361 4 8.5 4Zm3 4a.5.5 0 0 0-.5.5V11H8.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5H11v2.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V12h2.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H12V8.5a.5.5 0 0 0-.5-.5Zm1.5 5v1.5c0 .082-.008.163-.021.242A2.006 2.006 0 0 0 14 13Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/new-chat.svg b/comm/mail/themes/shared/mail/icons/new/compact/new-chat.svg
new file mode 100644
index 0000000000..dbec416515
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/new-chat.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4 1C2.347 1 1 2.346 1 4v3c0 1.653 1.347 3 3 3v2.5a.5.5 0 0 0 .854.353L5.707 12H8.09a1.456 1.456 0 0 1 0-1H6.707l1-1H10c.35 0 .687-.06 1-.172V8.736A2.008 2.008 0 0 1 10 9H7.5a.5.5 0 0 0-.354.146L5 11.293V9.5a.5.5 0 0 0-.5-.5H4c-1.117 0-2-.884-2-2V4c0-1.117.883-2 2-2h6c1.117 0 2 .883 2 2v3c0 .03-.003.06-.004.091.159-.058.328-.091.504-.091.174 0 .341.033.498.09L13 7V4.263c.6.343 1 .986 1 1.737v4h.828c.111-.314.172-.65.172-1V6c0-1.35-.899-2.497-2.129-2.871A3.007 3.007 0 0 0 10 .999H4Zm.5 4a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm1.975 0A.5.5 0 0 0 6.5 6h1a.5.5 0 1 0 0-1zM9.5 5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm3 3a.5.5 0 0 0-.5.5V11H9.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5H12v2.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V12h2.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H13V8.5a.5.5 0 0 0-.5-.5Zm-3.227 4.98 1.747 1.746A1.444 1.444 0 0 1 11 14.5v-1.207L10.707 13H9.5a1.43 1.43 0 0 1-.227-.02Z" fill="context-stroke"/>
+ <path d="M13 4.264V7l-.002.09C13.576 7.3 14 7.858 14 8.5V6c0-.75-.4-1.394-1-1.736Zm-2 5.564c-.313.111-.65.172-1 .172h1zM7.707 10l-1 1H8.09c.21-.577.768-1 1.41-1Zm3 3 .293.293V13Z" fill="context-fill"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/new-contact.svg b/comm/mail/themes/shared/mail/icons/new/compact/new-contact.svg
new file mode 100644
index 0000000000..cf80f4d863
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/new-contact.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M7.5.5a7 7 0 0 0-7 7 7 7 0 0 0 3 5.728V11.75c0-.693.558-1.25 1.25-1.25H6.5v-.446A2.75 2.75 0 0 1 4.75 7.5 2.75 2.75 0 0 1 7.5 4.75a2.75 2.75 0 0 1 2.75 2.75 2.75 2.75 0 0 1-1.75 2.554v.338a1.49 1.49 0 0 1 1-.392H11V8.5c0-.817.683-1.5 1.5-1.5s1.5.683 1.5 1.5V10h.03a7 7 0 0 0 .47-2.5 7 7 0 0 0-7-7z" fill="context-fill"/>
+ <path d="M7.5 0C3.364 0 0 3.363 0 7.5a7.493 7.493 0 0 0 3.143 6.1.5.5 0 0 0 .064.044 7.458 7.458 0 0 0 7.793.48V13h-.037A6.473 6.473 0 0 1 7.5 14c-1.29 0-2.49-.376-3.5-1.022V12c0-.563.437-1 1-1h1.5a.5.5 0 0 0 .1-.99c-.113-.023-.61-.332-.97-.815-.36-.483-.629-1.11-.63-1.695C5 6.113 6.113 5 7.5 5S10 6.113 10 7.5c-.001.585-.27 1.212-.63 1.695-.36.483-.857.792-.97.814a.5.5 0 0 0-.244.836A1.516 1.516 0 0 1 9.5 10h.398c.083-.096.193-.101.272-.207.46-.616.829-1.417.83-2.293C11 5.573 9.427 4 7.5 4A3.508 3.508 0 0 0 4 7.5c.001.876.37 1.677.83 2.293.08.106.19.11.272.207H5c-1.1 0-2 .9-2 2v.191A6.477 6.477 0 0 1 1 7.5C1 3.904 3.904 1 7.5 1a6.492 6.492 0 0 1 6.465 7.183v.002c.022.102.035.207.035.315V10h.568A7.46 7.46 0 0 0 15 7.5C15 3.363 11.636 0 7.5 0Zm5 8a.5.5 0 0 0-.5.5V11H9.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5H12v2.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V12h2.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H13V8.5a.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/new-event.svg b/comm/mail/themes/shared/mail/icons/new/compact/new-event.svg
new file mode 100644
index 0000000000..587dd655ce
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/new-event.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M3.5 1.5c-1.108 0-2 1.892-2 3h13c0-1.108-.892-3-2-3z" fill="context-fill"/>
+ <path d="M4 1C2.347 1 1 2.346 1 4v8c0 1.653 1.347 3 3 3h5.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H4c-1.117 0-2-.884-2-2V5h2v.5a.5.5 0 0 0 1 0V5h6v.5a.5.5 0 0 0 1 0V5h2v4.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V4c0-1.654-1.347-3-3-3Zm0 1h8c1.117 0 2 .883 2 2h-2v-.5a.5.5 0 0 0-.5-.493.5.5 0 0 0-.5.493V4H5v-.5a.5.5 0 0 0-.5-.493.5.5 0 0 0-.5.493V4H2c0-1.117.883-2 2-2Zm.5 5a.5.5 0 0 0-.492.5.5.5 0 0 0 .492.5h1a.5.5 0 0 0 .428-.748A.5.5 0 0 0 5.5 7Zm3.016 0a.5.5 0 0 0-.493.5.5.5 0 0 0 .493.5h1a.5.5 0 0 0 .427-.252.5.5 0 0 0 0-.496A.5.5 0 0 0 8.516 7ZM11.5 8a.5.5 0 0 0-.5.5V11H8.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5H11v2.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V12h2.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H12V8.5a.5.5 0 0 0-.5-.5Zm-7 1a.5.5 0 0 0-.492.5.5.5 0 0 0 .492.5h1a.5.5 0 0 0 .428-.748A.5.5 0 0 0 5.5 9Zm3.016 0a.5.5 0 0 0-.493.5.5.5 0 0 0 .493.5h1a.5.5 0 0 0 0-1zM4.5 11a.5.5 0 0 0-.492.5.5.5 0 0 0 .492.5h1a.5.5 0 0 0 .428-.252.5.5 0 0 0 0-.496A.5.5 0 0 0 5.5 11Zm9.371 2.017a.5.5 0 0 0-.225.13l-.5.5a.5.5 0 0 0 0 .706.5.5 0 0 0 .708 0l.5-.5a.5.5 0 0 0 0-.707.5.5 0 0 0-.483-.129z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/new-key.svg b/comm/mail/themes/shared/mail/icons/new/compact/new-key.svg
new file mode 100644
index 0000000000..4a3e3f2620
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/new-key.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M11 1.5A3.5 3.5 0 0 0 7.5 5a3.5 3.5 0 0 0 .246 1.264l-.24.242L7.5 6.5l-5 5v2h2l1-1v-1h1l1-1v-1h1l1-1-.006-.006.242-.24A3.5 3.5 0 0 0 11 8.5c0-.831.669-1.5 1.5-1.5.4 0 .761.155 1.03.408A3.5 3.5 0 0 0 14.5 5 3.5 3.5 0 0 0 11 1.5Zm.5 2a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1z" fill="context-fill"/>
+ <path d="M11 1C8.797 1 7 2.797 7 5a.5.5 0 0 0 0 .004c.003.373.108.731.213 1.088l-.055.054a.5.5 0 0 0-.012 0l-5 5A.5.5 0 0 0 2 11.5v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .354-.146l1-1A.5.5 0 0 0 6 12.5V12h.5a.5.5 0 0 0 .354-.146l1-1A.5.5 0 0 0 8 10.5V10h.5a.5.5 0 0 0 .354-.146l1-1a.5.5 0 0 0 .023-.036l.031-.03c.357.104.715.21 1.088.212A.5.5 0 0 0 11 9v-.5a1.5 1.5 0 0 1 .088-.504c-.029 0-.057.004-.086.004a3.004 3.004 0 0 1-1.082-.21.5.5 0 0 0-.535.108l-.242.24a.5.5 0 0 0-.008.02L8.293 9H7.5a.5.5 0 0 0-.5.5v.793L6.293 11H5.5a.5.5 0 0 0-.5.5v.793L4.293 13H3v-1.293l4.842-4.842a.5.5 0 0 0 .02-.008l.24-.242a.5.5 0 0 0 .109-.535A3.004 3.004 0 0 1 8 5v-.002A2.992 2.992 0 0 1 11 2c1.663 0 3 1.337 3 3a2.99 2.99 0 0 1-.885 2.133 1.5 1.5 0 0 1 .72.683A3.987 3.987 0 0 0 15 5c0-2.203-1.797-4-4-4Zm.5 2c-.823 0-1.5.677-1.5 1.5S10.677 6 11.5 6 13 5.323 13 4.5 12.323 3 11.5 3Zm0 1c.282 0 .5.218.5.5 0 .282-.218.5-.5.5a.493.493 0 0 1-.5-.5c0-.282.218-.5.5-.5Zm1 4a.5.5 0 0 0-.5.5V11H9.5a.5.5 0 0 0 0 1H12v2.5a.5.5 0 0 0 1 0V12h2.5a.5.5 0 0 0 0-1H13V8.5a.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/new-mail.svg b/comm/mail/themes/shared/mail/icons/new/compact/new-mail.svg
new file mode 100644
index 0000000000..1b8c93ed36
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/new-mail.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M3 4c-.554 0-1 .446-1 1v7c0 .554.446 1 1 1h6.5c-.817 0-1.5-.683-1.5-1.5S8.683 10 9.5 10H11V8.5c0-.817.683-1.5 1.5-1.5s1.5.683 1.5 1.5V5c0-.554-.446-1-1-1Z" fill="context-fill"/>
+ <path d="M3 3c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h8v-1H3c-.563 0-1-.437-1-1V5c0-.563.437-1 1-1h10c.563 0 1 .437 1 1v5h1V5c0-1.1-.9-2-2-2Zm.47 2.002a.5.5 0 0 0-.343.166.5.5 0 0 0 .041.705l2.781 2.47-2.803 2.803a.5.5 0 0 0 0 .708.5.5 0 0 0 .708 0L6.697 9.01l.971.863a.5.5 0 0 0 .664 0l.97-.863.991.99H11v-.707l-.95-.95 2.782-2.47a.5.5 0 0 0 .041-.705.5.5 0 0 0-.705-.041L8 8.832 3.832 5.127a.5.5 0 0 0-.361-.125ZM12.5 8a.5.5 0 0 0-.5.5V11H9.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5H12v2.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V12h2.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H13V8.5a.5.5 0 0 0-.5-.5Zm1.5 5v.729c.301-.176.553-.428.729-.729Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/new-task.svg b/comm/mail/themes/shared/mail/icons/new/compact/new-task.svg
new file mode 100644
index 0000000000..c44b6a243b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/new-task.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M6.5 0c-.647 0-1.204.42-1.412 1H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h6.086a1.5 1.5 0 0 1-.086-.5V14H4c-.563 0-1-.437-1-1V3c0-.563.437-1 1-1h1.086A1.51 1.51 0 0 0 6.5 3.004h3A1.51 1.51 0 0 0 10.914 2H12c.563 0 1 .437 1 1v7h1V3c0-1.1-.9-2-2-2h-1.088c-.208-.58-.765-1-1.412-1Zm0 1h3c.286 0 .5.214.5.5v.004c0 .286-.214.5-.5.5h-3a.488.488 0 0 1-.5-.5V1.5c0-.286.214-.5.5-.5Zm4.06 5.004a.5.5 0 0 0-.13.002.5.5 0 0 0-.33.193L7.445 9.74 5.854 8.145a.5.5 0 0 0-.708 0 .5.5 0 0 0 0 .708l2 2A1.497 1.497 0 0 1 8.5 10l1.756-2.34c.028-.041.058-.08.09-.119l.554-.74a.5.5 0 0 0-.1-.701.5.5 0 0 0-.24-.096ZM11.5 8a.5.5 0 0 0-.5.5V11H8.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5H11v2.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V12h2.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H12V8.5a.5.5 0 0 0-.5-.5Zm1.5 5v1.5c0 .082-.009.162-.021.24A2.004 2.004 0 0 0 14 13Z" fill="context-stroke"/>
+ <path d="M4 1.5c-.554 0-1.5.946-1.5 1.5v10c0 .554.946 1.5 1.5 1.5h6V13H8.5c-.831 0-1.5-.669-1.5-1.5S7.669 10 8.5 10H10V8.5c0-.831.669-1.5 1.5-1.5s1.5.669 1.5 1.5h.5V3c0-.554-.946-1.5-1.5-1.5h-1.5V2c0 .277-.223.5-.5.5H6a.499.499 0 0 1-.5-.5v-.5Z" fill="context-fill"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/new-user-list.svg b/comm/mail/themes/shared/mail/icons/new/compact/new-user-list.svg
new file mode 100644
index 0000000000..532ac2c51f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/new-user-list.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4 1.5A2.495 2.495 0 0 0 1.5 4v8c0 .82.5 2 2 2.5v-2.998C3.5 10 4 10 4.5 9.5V7.992a2.5 2.5 0 0 1-1-1.993 2.5 2.5 0 0 1 4.844-.869A2.5 2.5 0 0 1 10 4.5 2.5 2.5 0 0 1 12.5 7c.831 0 1.5.668 1.5 1.5V10h.5V4c0-1.386-1.115-2.5-2.5-2.5Z" fill="context-fill"/>
+ <path d="M4 1C2.347 1 1 2.346 1 4v8c0 .953.45 1.803 1.146 2.353l.004.004a.504.504 0 0 0 .096.072c.494.358 1.1.57 1.754.57h7.086a1.5 1.5 0 0 1-.086-.5v-.5H8v-2.5c0-.598.347-1.112.852-1.353A.5.5 0 0 0 8.5 10c-.822 0-1.5.677-1.5 1.5V14H3.992A.5.5 0 0 0 4 13.935V10.5c0-.286.214-.5.5-.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5C3.678 9 3 9.677 3 10.5v3.234a1.97 1.97 0 0 1-1-1.715V4c0-1.117.883-2 2-2h8c1.117 0 2 .883 2 2v6h1V4c0-1.654-1.347-3-3-3Zm2 2C4.35 3 3 4.349 3 6c0 1.65 1.35 3 3 3 .178 0 .352-.017.521-.047-.17-.301-.3-.623-.388-.957A1.992 1.992 0 0 1 4 6c0-1.11.89-2 2-2 .39 0 .752.108 1.059.298a4 4 0 0 1 .779-.664A2.98 2.98 0 0 0 6 3Zm4 1C8.35 4 7 5.349 7 7c0 1.65 1.35 3 3 3 .35 0 .687-.064 1-.176V8.732c-.294.17-.634.268-1 .268-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2 0 .03-.003.058-.004.088a1.5 1.5 0 0 1 1-.004c0-.028.004-.056.004-.084 0-1.651-1.35-3-3-3Zm2.5 4a.5.5 0 0 0-.5.5V11H9.5a.5.5 0 0 0 0 1H12v2.5a.5.5 0 0 0 1 0V12h2.5a.5.5 0 0 0 0-1H13V8.5a.5.5 0 0 0-.5-.5Zm1.5 5v1.224A2.99 2.99 0 0 0 14.826 13Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/newsletter.svg b/comm/mail/themes/shared/mail/icons/new/compact/newsletter.svg
new file mode 100644
index 0000000000..0fedaa67d5
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/newsletter.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M7 1.996c-1.1 0-2 .9-2 2V6H3c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3.996c0-1.1-.9-2-2-2zm0 1h6c.563 0 1 .437 1 1V12c0 .563-.437 1-1 1H5.613c.206-.33.387-.667.387-1V3.996c0-.563.437-1 1-1zM8 4c-.545 0-1 .455-1 1v1c0 .545.455 1 1 1h1c.545 0 1-.455 1-1V5c0-.545-.455-1-1-1Zm3.5 0a.5.5 0 0 0-.492.5.5.5 0 0 0 .492.5h1a.5.5 0 0 0 0-1zM8 5h1v1H8Zm3.5 1a.5.5 0 0 0-.492.5.5.5 0 0 0 .492.5h1a.5.5 0 0 0 0-1zM3 7h2v5c0 .083-.087.401-.266.625-.179.224-.4.375-.734.375H3c-.563 0-1-.437-1-1V8c0-.563.437-1 1-1Zm4.5 1a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .428-.748A.5.5 0 0 0 12.5 8Zm0 2a.5.5 0 0 0-.492.5.5.5 0 0 0 .492.5h5a.5.5 0 0 0 0-1z" fill="context-stroke"/>
+ <path d="M3 7c-.554 0-1 .446-1 1v4c0 .554.446 1 1 1h1c.554 0 1-.446 1-1V7Z" fill="context-fill"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/offline.svg b/comm/mail/themes/shared/mail/icons/new/compact/offline.svg
new file mode 100644
index 0000000000..bcf757e208
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/offline.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M7.875 6.004a2.01 2.01 0 0 0-1.871 1.871zm2.121 2.121L8.125 9.996a2.01 2.01 0 0 0 1.871-1.871z" fill="context-stroke"/>
+ <path d="M2.582 2.227a.5.5 0 0 0-.225.128A8.002 8.002 0 0 0 0 7.998a.5.5 0 0 0 0 .004 8.003 8.003 0 0 0 1.396 4.484l.043-.047.678-.677A6.996 6.996 0 0 1 1 8.002v-.004a6.998 6.998 0 0 1 2.064-4.932.5.5 0 0 0 .002-.709.5.5 0 0 0-.484-.13Zm12.03 1.277c-.018.019-.033.039-.051.057l-.668.668A7 7 0 0 1 15 7.998a6.998 6.998 0 0 1-2.064 4.936.5.5 0 0 0-.002.709.5.5 0 0 0 .709.002A8.002 8.002 0 0 0 16 8.002.5.5 0 0 0 16 8a8 8 0 0 0-1.389-4.496Zm-9.794.814a.5.5 0 0 0-.353.147A5 5 0 0 0 3 8c0 .812.2 1.603.568 2.31l.75-.75a4 4 0 0 1 .854-4.389.5.5 0 0 0 0-.706.5.5 0 0 0-.354-.147zm7.614 1.371-.75.75a4 4 0 0 1-.854 4.389.5.5 0 0 0 0 .707.5.5 0 0 0 .707 0A5 5 0 0 0 13 8c0-.812-.2-1.603-.568-2.31Z" fill="context-fill"/>
+ <path d="m13.146 2.146-11 11a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l11-11a.5.5 0 0 0 0-.707.5.5 0 0 0-.708 0z" fill="#ff555f"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/online.svg b/comm/mail/themes/shared/mail/icons/new/compact/online.svg
new file mode 100644
index 0000000000..ec7bcb0010
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/online.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M9.5 8A1.5 1.5 0 0 1 8 9.5 1.5 1.5 0 0 1 6.5 8 1.5 1.5 0 0 1 8 6.5 1.5 1.5 0 0 1 9.5 8Z" fill="context-fill"/>
+ <path d="M13.3 2.199a.5.5 0 0 0-.353.146.5.5 0 0 0 0 .707A7 7 0 0 1 15 7.998a6.998 6.998 0 0 1-2.064 4.935.5.5 0 0 0-.002.71.5.5 0 0 0 .709.001A8.002 8.002 0 0 0 16 8.002.5.5 0 0 0 16 8a8 8 0 0 0-2.346-5.655.5.5 0 0 0-.353-.146Zm-10.718.027a.5.5 0 0 0-.225.13A8.002 8.002 0 0 0 0 7.997a.5.5 0 0 0 0 .004 8.002 8.002 0 0 0 2.357 5.642.5.5 0 0 0 .71-.002.5.5 0 0 0-.003-.709A6.998 6.998 0 0 1 1 8.002v-.004a6.998 6.998 0 0 1 2.064-4.932.5.5 0 0 0 .002-.709.5.5 0 0 0-.484-.13Zm2.236 2.092a.5.5 0 0 0-.353.146 5 5 0 0 0 0 7.07.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.706 4 4 0 0 1 0-5.656.5.5 0 0 0 0-.708.5.5 0 0 0-.354-.146zm6.364 0a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .708 4 4 0 0 1 0 5.656.5.5 0 0 0 0 .707.5.5 0 0 0 .707 0 5 5 0 0 0 0-7.07.5.5 0 0 0-.353-.147zM8 6c-1.099 0-2 .901-2 2 0 1.098.901 2 2 2s2-.902 2-2c0-1.099-.901-2-2-2Zm0 1c.558 0 1 .441 1 1 0 .558-.442 1-1 1s-1-.442-1-1c0-.559.442-1 1-1Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/outbox.svg b/comm/mail/themes/shared/mail/icons/new/compact/outbox.svg
new file mode 100644
index 0000000000..704ce67e24
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/outbox.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M4 2c-1.108 0-2 .892-2 2v8c0 1.108.892 2 2 2h5.98l-.162-.607-1.824-.178a1.694 1.694 0 0 1-.133-.02c-.951-.18-1.746-.835-1.85-1.947-.377-.334-.596-.762-.767-1.248H4V7h7.688l1.462-.652.051-.022c.231-.093.497-.201.799-.281V4c0-1.108-.892-2-2-2Zm1 3h6v1H5Z" fill="context-fill"/>
+ <path d="M4 1C2.347 1 1 2.347 1 4v8c0 1.653 1.347 3 3 3h6.248l-.268-1H4c-1.117 0-2-.883-2-2v-1.998c1.123.004 2.362-.001 3.244-.002.13.475.392.918.77 1.266A2.661 2.661 0 0 1 6 11c0-.33.066-.631.182-.9A1.184 1.184 0 0 1 6 9.5a.5.5 0 0 0-.5-.5c-.399 0-.951 0-1.5.002V7h7.688l1.162-.518A1.004 1.004 0 0 0 12 6V5c0-.545-.455-1-1-1H5c-.545 0-1 .455-1 1v1c-.545 0-1 .455-1 1v2.002c-.342 0-.673 0-1-.002V4c0-1.117.883-2 2-2h8c1.117 0 2 .883 2 2v2.045a3.24 3.24 0 0 1 .834-.113c.056 0 .111.005.166.01V4c0-1.653-1.347-3-3-3Zm1 4h6v1H5Zm9.834 1.932c-.471 0-.834.15-1.26.322a.5.5 0 0 0-.015.008l-5.58 2.484C7.437 9.915 7 10.388 7 11c0 .666.5 1.11 1.047 1.213a.5.5 0 0 0 .045.006l2.513.246.668 2.502c.062.265.2.5.403.691.203.192.489.342.824.342.629 0 1.043-.484 1.242-.924a.5.5 0 0 0 .018-.049l1.941-5.83a.5.5 0 0 0 .002-.004c.097-.296.297-.605.297-1.095 0-.639-.528-1.166-1.166-1.166Zm0 1c.098 0 .166.068.166.166 0 .176-.112.37-.248.787l-1.928 5.785c-.108.235-.219.33-.324.33-.033 0-.08-.015-.137-.068a.472.472 0 0 1-.117-.194.5.5 0 0 0-.004-.013l-.685-2.575 1.297-1.296a.5.5 0 0 0 0-.708.5.5 0 0 0-.708 0l-1.332 1.333-2.584-.25C8.156 11.213 8 11.069 8 11c0-.102.12-.259.297-.307a.5.5 0 0 0 .074-.025l5.576-2.486c.43-.173.622-.25.887-.25z" fill="context-stroke"/>
+</svg>
+
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/overflow.svg b/comm/mail/themes/shared/mail/icons/new/compact/overflow.svg
new file mode 100644
index 0000000000..a044b5689e
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/overflow.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M3.53 3.002a.5.5 0 0 0-.362.125.5.5 0 0 0-.041.705L6.83 8l-3.703 4.168a.5.5 0 0 0 .041.705.5.5 0 0 0 .705-.041l4-4.5a.5.5 0 0 0 0-.664l-4-4.5a.5.5 0 0 0-.344-.166Zm5 0a.5.5 0 0 0-.362.125.5.5 0 0 0-.041.705L11.83 8l-3.703 4.168a.5.5 0 0 0 .041.705.5.5 0 0 0 .705-.041l4-4.5a.5.5 0 0 0 0-.664l-4-4.5a.5.5 0 0 0-.344-.166Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/paint-brush.svg b/comm/mail/themes/shared/mail/icons/new/compact/paint-brush.svg
new file mode 100644
index 0000000000..a5144c06a7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/paint-brush.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M14.5 1.5c-.426-.02-.974.305-.974.305C8.372 6.95 6.5 6.5 6.5 8.5a1826.084 1826.084 0 0 0 2 2c2 0 1.81-2.545 6.963-7.692 0 0 .024-.379-.008-.75-.044-.507-.568-.472-.955-.558Zm-10 9c-.628 0-1.176.426-1.275.727L1.5 14.5c2.616 0 4.5 0 4.987-1.804.016-.062.013-.13.013-.195 0-2-1.239-2.007-2-2z" fill="context-fill"/>
+ <path d="M14.523 1c-.35-.017-.637.09-.86.183-.225.093-.392.192-.392.192a.5.5 0 0 0-.1.076c-2.55 2.547-4.256 3.685-5.378 4.473-.561.393-.99.698-1.31 1.097a2.25 2.25 0 0 0-.477 1.266l-1.73 1.73a2.104 2.104 0 0 0-.88.31c-.297.19-.533.4-.646.743l.031-.076-1.724 3.271A.5.5 0 0 0 1.5 15c1.308 0 2.455.01 3.418-.243.963-.252 1.765-.873 2.05-1.931.012-.043.013-.072.018-.108l1.73-1.728a2.245 2.245 0 0 0 1.33-.602c.413-.382.746-.887 1.17-1.529.85-1.284 2.055-3.155 4.6-5.697a.5.5 0 0 0 .147-.323s.027-.403-.01-.824a1.016 1.016 0 0 0-.236-.576 1.05 1.05 0 0 0-.444-.289c-.287-.102-.531-.107-.664-.137A.5.5 0 0 0 14.523 1Zm-.056 1.002c.208.04.402.066.472.091l.018.008c.021.247.01.41.006.52-2.483 2.512-3.76 4.444-4.582 5.687-.422.638-.738 1.092-1.014 1.348-.228.212-.442.258-.719.285l-.795-.795-.804-.804c.023-.283.058-.5.215-.696.192-.24.552-.52 1.103-.906 1.091-.766 2.885-1.975 5.445-4.52.022-.012.095-.056.233-.113.153-.063.342-.107.422-.105ZM6.5 9.207l.646.646.647.647-.94.94c-.162-.524-.448-.896-.804-1.116a1.99 1.99 0 0 0-.457-.21ZM4.5 11a.5.5 0 0 0 .004 0c.377-.003.77.018 1.017.172.248.153.479.43.479 1.328 0 .083-.007.106.004.066-.201.746-.585 1.027-1.34 1.225-.55.144-1.44.138-2.305.152l1.309-2.484a.5.5 0 0 0 .031-.077c-.014.042.075-.109.233-.209.157-.1.367-.173.568-.173Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/paste.svg b/comm/mail/themes/shared/mail/icons/new/compact/paste.svg
new file mode 100644
index 0000000000..29a73020c6
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/paste.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4 1.5c-.554 0-1.5.446-1.5 1v11c0 .554.946 1 1.5 1h8c.554 0 1.5-.446 1.5-1v-11c0-.554-.946-1-1.5-1h-1.5s-.5 1-1 1h-3c-.5 0-1-1-1-1zm1 3h6c.277 0 .5.223.5.5v7c0 .277-.223.5-.5.5H5a.499.499 0 0 1-.5-.5V5c0-.277.223-.5.5-.5Z" fill="context-fill"/>
+ <path d="M6.5 0c-.647 0-1.204.42-1.412 1H4c-1.1 0-2 .9-2 2v10c0 1.099.9 2 2 2h8c1.1 0 2-.901 2-2V3c0-1.1-.9-2-2-2h-1.088c-.208-.58-.765-1-1.412-1Zm0 1h3c.286 0 .5.214.5.5v.004c0 .285-.214.5-.5.5h-3a.488.488 0 0 1-.5-.5V1.5c0-.286.214-.5.5-.5ZM4 2h1.086c.196.55.708.958 1.312 1h3.204a1.512 1.512 0 0 0 1.312-1H12c.563 0 1 .437 1 1v10c0 .562-.437 1-1 1H4c-.563 0-1-.438-1-1V3c0-.563.437-1 1-1Zm1.5 2C4.678 4 4 4.677 4 5.5v6c0 .822.678 1.5 1.5 1.5h5c.822 0 1.5-.678 1.5-1.5v-6c0-.823-.678-1.5-1.5-1.5Zm0 1h5c.286 0 .5.214.5.5v6c0 .285-.214.5-.5.5h-5a.488.488 0 0 1-.5-.5v-6c0-.286.214-.5.5-.5Zm1 1a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/pencil.svg b/comm/mail/themes/shared/mail/icons/new/compact/pencil.svg
new file mode 100644
index 0000000000..306fcbb2a1
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/pencil.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M10 4.707 11.293 6 5.5 11.793 4.207 10.5Z" fill="context-fill"/>
+ <path d="M11.5 2a.5.5 0 0 0-.354.146l-8 8a.5.5 0 0 0-.12.195l-1 3a.5.5 0 0 0 .632.633l3-1a.5.5 0 0 0 .196-.12l8-8A.5.5 0 0 0 14 4.5s0-.298-.072-.66c-.073-.363-.207-.826-.574-1.194-.368-.368-.831-.502-1.194-.574C11.797 1.999 11.5 2 11.5 2Zm.186 1.021c.083.005.121 0 .279.031.262.053.55.169.681.301.133.132.249.42.301.682.032.157.026.196.032.28L12 5.293 10.707 4ZM10 4.707 11.293 6 6 11.293 4.707 10Zm-6 6L5.293 12l-.063.062-1.939.647.647-1.94Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/photo-ban.svg b/comm/mail/themes/shared/mail/icons/new/compact/photo-ban.svg
new file mode 100644
index 0000000000..856555d1d7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/photo-ban.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4.5 3.5c-.554 0-1 .446-1 1v6c0 .554.446 1 1 1h3.623A4.5 4.5 0 0 1 12.5 8V4.5c0-.554-.446-1-1-1z" fill="context-fill"/>
+ <path d="M4 1C2.347 1 1 2.346 1 4v8c0 1.653 1.347 3 3 3h4.764a4.5 4.5 0 0 1-.496-1H4c-1.117 0-2-.884-2-2V4c0-1.117.883-2 2-2h8c1.117 0 2 .883 2 2v4.258a4.5 4.5 0 0 1 1 .5V4c0-1.654-1.347-3-3-3H4zm.5 1.998V3C3.678 3 3 3.677 3 4.5v6c0 .822.678 1.5 1.5 1.5h3.535a4.5 4.5 0 0 1 .233-1H4.5a.488.488 0 0 1-.459-.293L6.062 9.09l1.715.857a.5.5 0 0 0 .577-.093L9.967 8.24l.303.364a4.5 4.5 0 0 1 .953-.418l-.838-1.006a.5.5 0 0 0-.362-.182.5.5 0 0 0-.377.148L7.9 8.893l-1.677-.84a.5.5 0 0 0-.535.056L4 9.46V4.498c0-.285.214-.5.5-.5h7c.286 0 .5.215.5.5v3.537A4.5 4.5 0 0 1 12.5 8a4.5 4.5 0 0 1 .5.03V4.497c0-.822-.678-1.5-1.5-1.5h-7zM7 5a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1zm5.5 4A3.508 3.508 0 0 0 9 12.5c0 1.927 1.573 3.5 3.5 3.5s3.5-1.573 3.5-3.5S14.427 9 12.5 9zm0 1c1.387 0 2.5 1.113 2.5 2.5 0 .511-.151.987-.412 1.38l-3.469-3.468c.395-.26.87-.412 1.381-.412zm-2.088 1.12 3.469 3.468c-.395.26-.87.412-1.381.412a2.492 2.492 0 0 1-2.5-2.5c0-.512.151-.986.412-1.38z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/pin.svg b/comm/mail/themes/shared/mail/icons/new/compact/pin.svg
new file mode 100644
index 0000000000..206d63a6e4
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/pin.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M8.156 12.5a.99.99 0 0 0 .707-.294l.523-2.574L10.5 8.499l1.058-1.04 2.65-.601a.996.996 0 0 0 0-1.414l-3.657-3.658a.996.996 0 0 0-1.414 0l-.523 2.576L7.5 5.499 6.442 6.535l-2.65.6a.996.996 0 0 0 0 1.413l3.657 3.658a.999.999 0 0 0 .707.295z" fill="context-fill"/>
+ <path d="M9.842.996c-.386 0-.77.146-1.06.44a.5.5 0 0 0-.136.251l-.492 2.43-1.008 1.03-.953.933-2.511.566a.5.5 0 0 0-.243.133 1.505 1.505 0 0 0-.002 2.123l1.477 1.477-2.768 2.767a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l2.767-2.767 1.475 1.474a1.494 1.494 0 0 0 2.123-.002.5.5 0 0 0 .135-.254l.492-2.427 1.008-1.024.953-.937 2.511-.57a.5.5 0 0 0 .243-.132c.586-.58.583-1.543.002-2.125l-3.659-3.656A1.501 1.501 0 0 0 9.842.996Zm.05 1.025a.394.394 0 0 1 .305.12l3.658 3.657c.18.18.141.432.002.627l-2.41.545a.5.5 0 0 0-.24.131L10.15 8.142a.5.5 0 0 0-.007.006L9.029 9.283a.5.5 0 0 0-.133.25l-.48 2.36c-.082.053-.165.109-.26.109a.492.492 0 0 1-.353-.149L4.145 8.195c-.18-.18-.141-.432-.002-.627l2.41-.545a.5.5 0 0 0 .238-.13L7.85 5.857a.5.5 0 0 0 .007-.008l1.114-1.138a.5.5 0 0 0 .133-.25l.472-2.323a.619.619 0 0 1 .317-.117Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/print.svg b/comm/mail/themes/shared/mail/icons/new/compact/print.svg
new file mode 100644
index 0000000000..6db6926930
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/print.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M3 5.5c-.831 0-1.5.669-1.5 1.5v5c0 .83.669 1.5 1.5 1.5h.5v-4h9v4h.5c.831 0 1.5-.67 1.5-1.5V7c0-.831-.669-1.5-1.5-1.5h-.5v2h-9v-2z" fill="context-fill"/>
+ <path d="M4.5 1C3.678 1 3 1.677 3 2.5V5c-1.1 0-2 .9-2 2v5c0 1.099.9 2 2 2v.5c0 .822.678 1.5 1.5 1.5h7c.822 0 1.5-.678 1.5-1.5V14c1.1 0 2-.901 2-2V7c0-1.1-.9-2-2-2V2.5c0-.823-.678-1.5-1.5-1.5Zm0 1h7c.286 0 .5.214.5.5V7H4V2.5c0-.286.214-.5.5-.5ZM3 6v1.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V6c.563 0 1 .437 1 1v5c0 .562-.437 1-1 1V9.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5V13c-.563 0-1-.438-1-1V7c0-.563.437-1 1-1Zm1 4h8v4.5c0 .285-.214.5-.5.5h-7a.488.488 0 0 1-.5-.5Zm3.5 1a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm-2 2a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/priority.svg b/comm/mail/themes/shared/mail/icons/new/compact/priority.svg
new file mode 100644
index 0000000000..4b189948b2
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/priority.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M7.5 3a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5zm0 9a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/question.svg b/comm/mail/themes/shared/mail/icons/new/compact/question.svg
new file mode 100644
index 0000000000..6b99c277e5
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/question.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M14.5 7.5a7 7 0 0 1-7 7 7 7 0 0 1-7-7 7 7 0 0 1 7-7 7 7 0 0 1 7 7z" fill="context-fill"/>
+ <path d="M7.5 0C3.364 0 0 3.363 0 7.5 0 11.636 3.364 15 7.5 15S15 11.636 15 7.5C15 3.363 11.636 0 7.5 0Zm0 1C11.096 1 14 3.904 14 7.5c0 3.595-2.904 6.5-6.5 6.5A6.492 6.492 0 0 1 1 7.5C1 3.904 3.904 1 7.5 1Zm0 2A2.508 2.508 0 0 0 5 5.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5C6 4.665 6.666 4 7.5 4S9 4.665 9 5.5C9 6.334 8.334 7 7.5 7a.5.5 0 0 0-.137.021.5.5 0 0 0-.037.012.5.5 0 0 0-.107.056.5.5 0 0 0-.016.01.5.5 0 0 0-.101.1.5.5 0 0 0-.016.025.5.5 0 0 0-.055.112.5.5 0 0 0-.008.017A.5.5 0 0 0 7 7.5v2a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V7.949h.002A2.51 2.51 0 0 0 10 5.499c0-1.374-1.125-2.5-2.5-2.5zm0 8a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/quit.svg b/comm/mail/themes/shared/mail/icons/new/compact/quit.svg
new file mode 100644
index 0000000000..8dde690c87
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/quit.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M7.5 0a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5zm2.34 1.472a.5.5 0 0 0-.192.035.5.5 0 0 0-.273.27.5.5 0 0 0 .266.654c.657.278 1.25.682 1.748 1.18A5.476 5.476 0 0 1 13 7.5c0 3.043-2.457 5.5-5.5 5.5A5.492 5.492 0 0 1 2 7.5c0-1.522.615-2.893 1.611-3.889a5.51 5.51 0 0 1 1.748-1.18.5.5 0 0 0 .266-.654.5.5 0 0 0-.654-.266A6.51 6.51 0 0 0 1 7.5C1 11.084 3.916 14 7.5 14S14 11.084 14 7.5a6.51 6.51 0 0 0-3.97-5.988.5.5 0 0 0-.19-.04z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/quote.svg b/comm/mail/themes/shared/mail/icons/new/compact/quote.svg
new file mode 100644
index 0000000000..f3c9e7fcd9
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/quote.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4 3.5a2.5 2.5 0 0 0 0 5 2.5 2.5 0 0 0 .5-.057V9c0 1-1 1.5-2 1.5.25.5.648.988 1.5 1A2.518 2.518 0 0 0 6.5 9V6.5c-.013-.08-.002-.33 0-.5A2.5 2.5 0 0 0 4 3.5Zm7 0a2.5 2.5 0 0 0 0 5 2.5 2.5 0 0 0 .5-.057V9c0 1-1 1.5-2 1.5.25.5.648.988 1.5 1A2.518 2.518 0 0 0 13.5 9V6.5c-.013-.08-.002-.33 0-.5A2.5 2.5 0 0 0 11 3.5Z" fill="context-fill"/>
+ <path d="M14 9a3.019 3.019 0 0 1-3 3 .5.5 0 0 1-.008 0c-.52-.007-.957-.173-1.277-.424-.32-.25-.519-.567-.662-.853A.5.5 0 0 1 9.5 10c.417 0 .83-.112 1.098-.291C10.866 9.53 11 9.333 11 9 9.35 9 8 7.65 8 6s1.35-3 3-3c1.651 0 3 1.35 3 3a.5.5 0 0 1 0 .006c0 .093-.005.197-.006.285 0 .088.01.191 0 .129A.5.5 0 0 1 14 6.5Zm-.994-2.42c-.023-.142-.013-.203-.011-.303 0-.097.005-.2.006-.277 0-1.11-.89-2-2-2-1.11 0-2 .89-2 2a1.992 1.992 0 0 0 1.998 2h.002c.132-.002.265-.017.394-.045a.5.5 0 0 1 .605.488V9c0 .667-.366 1.22-.847 1.541-.243.162-.55.156-.832.23.005.005.007.014.011.018.154.12.344.203.672.209A2.016 2.016 0 0 0 13 9V6.5ZM7 9a3.019 3.019 0 0 1-3 3 .5.5 0 0 1-.008 0c-.52-.007-.957-.173-1.277-.424-.32-.25-.519-.567-.662-.853A.5.5 0 0 1 2.5 10c.417 0 .83-.112 1.098-.291C3.866 9.53 4 9.333 4 9 2.35 9 1 7.65 1 6s1.35-3 3-3c1.651 0 3 1.35 3 3a.5.5 0 0 1 0 .006c0 .093-.005.197-.006.285 0 .088.01.191 0 .129A.5.5 0 0 1 7 6.5Zm-.994-2.42c-.023-.142-.013-.203-.011-.303 0-.097.005-.2.006-.277 0-1.11-.89-2-2-2-1.11 0-2 .89-2 2a1.992 1.992 0 0 0 1.998 2h.002c.132-.002.265-.017.394-.045A.5.5 0 0 1 5 8.443V9c0 .667-.366 1.22-.847 1.541-.243.162-.55.156-.832.23.005.005.007.014.011.018.154.12.344.203.672.209A2.016 2.016 0 0 0 6 9V6.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/receipt.svg b/comm/mail/themes/shared/mail/icons/new/compact/receipt.svg
new file mode 100644
index 0000000000..b86b340cae
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/receipt.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M13.43 2.006a.5.5 0 0 0-.33.193L7.445 9.738 3.854 6.146a.5.5 0 0 0-.708 0 .5.5 0 0 0 0 .707l4 4A.5.5 0 0 0 7.9 10.8l6-8a.5.5 0 0 0-.1-.7.5.5 0 0 0-.37-.094zm0 3a.5.5 0 0 0-.33.193l-5.655 7.539-3.591-3.592a.5.5 0 0 0-.708 0 .5.5 0 0 0 0 .707l4 4A.5.5 0 0 0 7.9 13.8l6-8a.5.5 0 0 0-.1-.7.5.5 0 0 0-.37-.094z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/redirect-col.svg b/comm/mail/themes/shared/mail/icons/new/compact/redirect-col.svg
new file mode 100644
index 0000000000..54ef23f80c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/redirect-col.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path fill="context-fill" d="M4.5 1a.5.5 0 0 0-.354.146l-3 3a.5.5 0 0 0-.097.145.5.5 0 0 0-.02.062.5.5 0 0 0-.023.117A.5.5 0 0 0 1 4.5a.5.5 0 0 0 .006.029.5.5 0 0 0 .023.117.5.5 0 0 0 .02.063.5.5 0 0 0 .097.144l3 3a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.707L2.707 5H8c.563 0 1 .437 1 1v1.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V6c0-1.1-.9-2-2-2H2.707l2.147-2.147a.5.5 0 0 0 0-.707A.5.5 0 0 0 4.5 1Zm2 7a.5.5 0 0 0-.5.5V10c0 1.099.9 2 2 2h5.293l-2.147 2.146a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 .109-.162.5.5 0 0 0 .002-.006.5.5 0 0 0 .031-.25.5.5 0 0 0-.004-.015.5.5 0 0 0-.03-.112.5.5 0 0 0-.01-.025.5.5 0 0 0-.018-.033.5.5 0 0 0-.01-.016.5.5 0 0 0-.028-.039.5.5 0 0 0-.001-.002.5.5 0 0 0-.004-.006.5.5 0 0 0-.037-.04l-3-3a.5.5 0 0 0-.708 0 .5.5 0 0 0 0 .706L13.293 11H8c-.563 0-1-.438-1-1V8.5a.5.5 0 0 0-.5-.5Z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/redirect.svg b/comm/mail/themes/shared/mail/icons/new/compact/redirect.svg
new file mode 100644
index 0000000000..bcbdf515b0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/redirect.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4.5.5a1 1 0 0 0-.707.293l-3 3a1 1 0 0 0 0 1.414l3 3a1 1 0 0 0 1.414-1.414L3.914 5.5H7c1 0 1.5 1 1.5 2 .5-.25.988-.648 1-1.5 0-1.368-1.132-2.5-2.5-2.5H3.914l1.293-1.293A1 1 0 0 0 4.5.5Zm7 6.996a1 1 0 0 0-.707 1.707l1.293 1.293H9c-1.5.003-1.5-1.246-1.5-2.043-.5.047-.988.668-1 1.543 0 1.367 1.132 2.5 2.5 2.5h3.086l-1.293 1.293a1 1 0 0 0 1.414 1.414l3-3a1 1 0 0 0 0-1.414l-3-3a.997.997 0 0 0-.707-.293Z" fill="context-fill"/>
+ <path d="M4.5 0a1.5 1.5 0 0 0-1.06.44l-3 3a1.504 1.504 0 0 0-.239.31h.002A1.501 1.501 0 0 0 0 4.5c0 .263.071.522.203.75H.201c.065.113.146.217.238.31l3 3c.582.582 1.54.582 2.122 0a1.508 1.508 0 0 0 0-2.12L5.121 6H7c.333 0 .53.134.709.402C7.888 6.67 8 7.083 8 7.5a.5.5 0 0 0 .723.447c.286-.143.603-.343.853-.662.25-.32.417-.757.424-1.278a.5.5 0 0 1 0-.002.5.5 0 0 1 0-.002.5.5 0 0 1 0-.002.5.5 0 0 1 0-.002c0-1.643-1.356-3-3-3H5.121l.44-.439a1.508 1.508 0 0 0 0-2.121A1.5 1.5 0 0 0 4.5-.001zm0 1a.5.5 0 0 1 .354.146c.199.2.199.508 0 .707L3.561 3.146A.5.5 0 0 0 3.914 4H7c1.09 0 1.995.906 1.998 1.996-.006.328-.088.518-.209.672-.004.005-.013.007-.018.011-.074-.282-.068-.59-.23-.832C8.22 5.366 7.667 5 7 5H3.914a.5.5 0 0 0-.353.853l1.293 1.293c.199.2.199.508 0 .707-.2.2-.508.2-.708 0l-3-3a.497.497 0 0 1-.078-.103.5.5 0 0 1-.002 0 .5.5 0 0 1 0-.5.5.5 0 0 1 .002 0 .497.497 0 0 1 .078-.104l3-3A.5.5 0 0 1 4.5 1Zm7 6c-.385 0-.77.144-1.06.435a1.508 1.508 0 0 0 0 2.121l.439.44H9a.5.5 0 0 1-.002 0c-.25 0-.483-.2-.687-.56C8.107 9.074 8 8.573 8 8.453a.5.5 0 0 0-.547-.498c-.88.081-1.439.976-1.453 2.033a.5.5 0 0 0 0 .008c0 1.644 1.356 3 3 3h1.879l-.44.44a1.508 1.508 0 0 0 0 2.12 1.5 1.5 0 0 0 2.122 0l3-3c.092-.093.173-.197.238-.31h-.002a1.5 1.5 0 0 0 .203-.75c0-.264-.071-.522-.203-.75h.002a1.506 1.506 0 0 0-.238-.31l-3-3A1.495 1.495 0 0 0 11.5 7Zm0 .994c.127 0 .254.048.354.148l3 3c.03.031.056.066.078.104a.5.5 0 0 1 .002 0 .5.5 0 0 1 0 .5.5.5 0 0 1-.002 0 .497.497 0 0 1-.078.103l-3 3a.5.5 0 0 1-.708 0 .493.493 0 0 1 0-.707l1.293-1.293a.5.5 0 0 0-.353-.853H9A2.016 2.016 0 0 1 7.002 10c.006-.37.16-.389.291-.563.065.17.048.315.146.488.296.524.812 1.072 1.561 1.07h3.086a.5.5 0 0 0 .353-.853l-1.293-1.293a.493.493 0 0 1 0-.707c.1-.1.227-.148.354-.148z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/remove.svg b/comm/mail/themes/shared/mail/icons/new/compact/remove.svg
new file mode 100644
index 0000000000..3337f2873d
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/remove.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M3.5 7a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/reply-all.svg b/comm/mail/themes/shared/mail/icons/new/compact/reply-all.svg
new file mode 100644
index 0000000000..9431f02eca
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/reply-all.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M11.502 1.5a1 1 0 0 0-.709.293l-3 3a1.002 1.002 0 0 0-.147.191 1.015 1.015 0 0 0-.04.086.996.996 0 0 0-.057.133.998.998 0 0 0-.024.105 1 1 0 0 0-.02.147.996.996 0 0 0-.005.045l.006.045a1 1 0 0 0 .02.148 1 1 0 0 0 .023.1 1 1 0 0 0 .058.14.996.996 0 0 0 .04.082 1 1 0 0 0 .146.192.999.999 0 0 0 .191.146.98.98 0 0 0 .079.037.854.854 0 0 0 .23.082.996.996 0 0 0 .164.022L8.5 6.5h2.25c.75 0 1.75 1.25 1.75 2v1a1 1 0 0 0 2 0v-1c0-1.25-2-4-3-4h-.586l1.293-1.293a1 1 0 0 0-.705-1.707ZM4.5 5.5a1 1 0 0 0-.707.293l-3 3A1 1 0 0 0 .635 9a1 1 0 0 0-.135.5 1 1 0 0 0 .135.5 1 1 0 0 0 .158.207l3 3a1 1 0 0 0 1.414 0 1 1 0 0 0 0-1.414L3.914 10.5H8c.294 0 .5.205.5.5v2.5a1 1 0 0 0 1 1 1 1 0 0 0 1-1V11c0-1.368-1.132-2.5-2.5-2.5H3.914l1.293-1.293a1 1 0 0 0 0-1.414A1 1 0 0 0 4.5 5.5Z" fill="context-fill"/>
+ <path d="M11.504 1a1.51 1.51 0 0 0-.17.01.5.5 0 0 0-.002 0 1.497 1.497 0 0 0-.893.43l-3 3a.5.5 0 0 0-.003.003c-.085.086-.16.183-.221.287a.5.5 0 0 0-.01.018c-.016.03-.03.062-.045.093l-.008.018-.007.018a1.32 1.32 0 0 0-.069.164.5.5 0 0 0-.01.027 1.496 1.496 0 0 0-.03.139v.006a1.37 1.37 0 0 0-.03.212l-.004.022a.5.5 0 0 0 0 .105c.002.023.006.046.01.069a1.5 1.5 0 0 0 .021.162v.004l.002.008c.009.046.02.091.033.136a.5.5 0 0 0 .006.018c.024.072.054.143.088.21.014.032.027.063.043.093a.5.5 0 0 0 .01.017c.061.104.136.2.22.287a.5.5 0 0 0 .008.008c.087.085.183.16.287.22a.5.5 0 0 0 .02.01c.027.015.056.029.084.042l.02.01c.005.001.01.005.015.007.062.03.124.057.19.078a.5.5 0 0 0 .01.002 1.517 1.517 0 0 0 .318.059l.045.006A.5.5 0 0 0 8.5 7h2c.334 0 .725.18 1.021.476.297.296.479.686.479 1.024v1c0 .822.677 1.5 1.5 1.5s1.5-.678 1.5-1.5v-1c0-1.105-.34-2.211-1.027-3.065-.496-.615-1.238-.996-2.075-1.213l.663-.662a1.508 1.508 0 0 0 0-2.12A1.497 1.497 0 0 0 11.504 1Zm-.06 1v.002h.001a.502.502 0 0 1 .409.851l-1.293 1.293a.5.5 0 0 0 .353.854c1.025 0 1.758.418 2.28 1.064.52.647.806 1.54.806 2.436v1c0 .282-.218.5-.5.5a.493.493 0 0 1-.5-.5v-1c0-.669-.318-1.278-.771-1.73C11.775 6.316 11.166 6 10.5 6H8.537l-.01-.002a.5.5 0 0 0-.047-.004.454.454 0 0 1-.082-.01.5.5 0 0 0-.007-.002l-.024-.006a.48.48 0 0 1-.076-.031.5.5 0 0 0-.035-.016l-.018-.007-.002-.002a.495.495 0 0 1-.09-.067.495.495 0 0 1-.066-.088l-.002-.004a.35.35 0 0 1-.01-.021.5.5 0 0 0-.015-.033.505.505 0 0 1-.026-.06.516.516 0 0 1-.01-.044.5.5 0 0 0-.001-.012.5.5 0 0 1-.01-.074.5.5 0 0 0-.002-.017.5.5 0 0 0 .002-.016.484.484 0 0 1 .01-.072.5.5 0 0 0 .004-.022.5.5 0 0 1 .01-.043.496.496 0 0 1 .02-.049.5.5 0 0 0 .016-.037l.012-.025.002-.004a.493.493 0 0 1 .066-.088l.004-.004 2.996-2.996A.503.503 0 0 1 11.443 2ZM4.5 5a1.5 1.5 0 0 0-1.06.44l-3 3a1.504 1.504 0 0 0-.239.31h.002A1.501 1.501 0 0 0 0 9.5c0 .263.071.522.203.75H.201c.065.113.146.217.238.31l3 3c.582.582 1.54.582 2.122 0a1.508 1.508 0 0 0 0-2.12l-.44-.44H8v2.5c0 .822.677 1.5 1.5 1.5s1.5-.678 1.5-1.5V11c0-1.644-1.356-3-3-3H5.121l.44-.44a1.508 1.508 0 0 0 0-2.12A1.5 1.5 0 0 0 4.5 5Zm0 1a.5.5 0 0 1 .354.146c.199.2.199.508 0 .707L3.561 8.146A.5.5 0 0 0 3.914 9H8c1.092 0 2 .908 2 2v2.5c0 .282-.218.5-.5.5a.493.493 0 0 1-.5-.5V11c0-.528-.473-1-1-1H3.914a.5.5 0 0 0-.353.853l1.293 1.293c.199.2.199.508 0 .707-.2.2-.508.2-.708 0l-3-3a.495.495 0 0 1-.078-.103.5.5 0 0 0-.002 0 .499.499 0 0 1 0-.5.5.5 0 0 0 .002 0 .496.496 0 0 1 .078-.104l3-3A.5.5 0 0 1 4.5 6Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/reply-col.svg b/comm/mail/themes/shared/mail/icons/new/compact/reply-col.svg
new file mode 100644
index 0000000000..da2513d26d
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/reply-col.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path fill="context-fill" d="M7.422 4.006a.5.5 0 0 0-.276.14l-3 3a.5.5 0 0 0-.097.145.5.5 0 0 0-.02.062.5.5 0 0 0-.023.117A.5.5 0 0 0 4 7.5a.5.5 0 0 0 .006.029.5.5 0 0 0 .023.117.5.5 0 0 0 .02.063.5.5 0 0 0 .097.144l3 3a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.707L5.707 8H11c.563 0 1 .437 1 1v2.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V9c0-1.1-.9-2-2-2H5.707l2.147-2.147a.5.5 0 0 0 0-.707.5.5 0 0 0-.432-.14z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/reply-forward-col.svg b/comm/mail/themes/shared/mail/icons/new/compact/reply-forward-col.svg
new file mode 100644
index 0000000000..6a3faebe25
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/reply-forward-col.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path fill="context-stroke" d="M11.422 1.006a.5.5 0 0 0-.276.14.5.5 0 0 0 0 .707L13.293 4H8c-1.1 0-2 .9-2 2v1.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V6c0-.563.437-1 1-1h5.293l-2.147 2.146a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 .105-.156.5.5 0 0 0 .004-.006.5.5 0 0 0 .002-.006A.5.5 0 0 0 15 4.5a.5.5 0 0 0-.004-.065.5.5 0 0 0-.004-.015.5.5 0 0 0-.01-.05.5.5 0 0 0-.017-.052.5.5 0 0 0-.002-.01.5.5 0 0 0-.012-.025.5.5 0 0 0-.017-.033.5.5 0 0 0-.01-.016.5.5 0 0 0-.028-.039.5.5 0 0 0-.005-.008.5.5 0 0 0-.037-.04l-3-3a.5.5 0 0 0-.432-.141Z"/>
+ <path fill="context-fill" d="M4.422 7.006a.5.5 0 0 0-.276.14l-3 3a.5.5 0 0 0-.097.145.5.5 0 0 0-.02.062.5.5 0 0 0-.023.117.5.5 0 0 0-.006.03.5.5 0 0 0 .006.029.5.5 0 0 0 .023.117.5.5 0 0 0 .02.063.5.5 0 0 0 .097.144l3 3a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.707L2.707 11H8c.563 0 1 .437 1 1v2.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V12c0-1.1-.9-2-2-2H2.707l2.147-2.147a.5.5 0 0 0 0-.707.5.5 0 0 0-.432-.14z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/reply-forward-redirect-col.svg b/comm/mail/themes/shared/mail/icons/new/compact/reply-forward-redirect-col.svg
new file mode 100644
index 0000000000..113ce0d938
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/reply-forward-redirect-col.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path fill="context-fill" d="M3.422.006a.5.5 0 0 0-.276.14l-3 3a.5.5 0 0 0-.021.03.5.5 0 0 0-.049.066.5.5 0 0 0-.035.07.5.5 0 0 0-.021.067.5.5 0 0 0-.014.085A.5.5 0 0 0 0 3.5a.5.5 0 0 0 .006.035.5.5 0 0 0 .014.086.5.5 0 0 0 .021.064.5.5 0 0 0 .04.074.5.5 0 0 0 .04.059.5.5 0 0 0 .025.035l3 3a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.707L1.707 4H6c.563 0 1 .437 1 1v2.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V5c0-1.1-.9-2-2-2H1.707L3.854.853a.5.5 0 0 0 0-.707.5.5 0 0 0-.432-.14z"/>
+ <path fill="#ff9400" d="M5.5 9a.5.5 0 0 0-.5.5V11c0 1.099.9 2 2 2h4.293l-2.147 2.146a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 .05-.06.5.5 0 0 0 .07-.139A.5.5 0 0 0 13 12.5a.5.5 0 0 0-.004-.06.5.5 0 0 0-.008-.052.5.5 0 0 0-.002-.007.5.5 0 0 0-.002-.006.5.5 0 0 0-.017-.053.5.5 0 0 0-.016-.04.5.5 0 0 0-.008-.015.5.5 0 0 0-.02-.033.5.5 0 0 0-.01-.018.5.5 0 0 0-.022-.029.5.5 0 0 0-.004-.006.5.5 0 0 0-.033-.035l-.022-.021-2.978-2.979a.5.5 0 0 0-.708 0 .5.5 0 0 0 0 .707L11.293 12H7c-.563 0-1-.438-1-1V9.5a.5.5 0 0 0-.5-.5Zm6.922.006a.5.5 0 0 0-.276.14.5.5 0 0 0 0 .707l2.647 2.647-2.647 2.646a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.707l-3-3a.5.5 0 0 0-.432-.14z"/>
+ <path fill="context-stroke" d="M12.422.006a.5.5 0 0 0-.276.14.5.5 0 0 0 0 .707L14.293 3H11c-1.1 0-2 .9-2 2v1.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V5c0-.563.437-1 1-1h3.293l-2.147 2.146a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 .05-.06.5.5 0 0 0 .07-.139A.5.5 0 0 0 16 3.5a.5.5 0 0 0-.146-.354l-3-3a.5.5 0 0 0-.432-.14z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/reply-list.svg b/comm/mail/themes/shared/mail/icons/new/compact/reply-list.svg
new file mode 100644
index 0000000000..aadb673ffb
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/reply-list.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M3.5 2.5c-.554 0-1 .446-1 1v9c0 .554.446 1 1 1h4.879l-1.94-1.94a1.516 1.516 0 0 1 0-2.12l3-3a1.501 1.501 0 0 1 2.122 0 1.515 1.515 0 0 1 0 2.12l-.44.44H12.5V3.5c0-.554-.446-1-1-1z" fill="context-fill"/>
+ <path d="M4 2c-1.1 0-2 .9-2 2v8c0 1.099.9 2 2 2h5l-1-1H4c-.563 0-1-.438-1-1V4c0-.563.437-1 1-1h7c.563 0 1 .437 1 1v5h1V4c0-1.1-.9-2-2-2Zm1.5 3a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1zm5 0a.5.5 0 0 0-.354.146l-3 3a.5.5 0 0 0 0 .707l3 3a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.707L8.707 11H13c.563 0 1 .437 1 1v2.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V12c0-1.1-.9-2-2-2H8.707l2.147-2.147a.5.5 0 0 0 0-.707A.5.5 0 0 0 10.5 7Zm-5 2a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1zm6.5 3v1.728c.596-.347 1-.993 1-1.728Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/reply-redirect-col.svg b/comm/mail/themes/shared/mail/icons/new/compact/reply-redirect-col.svg
new file mode 100644
index 0000000000..135009e5f0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/reply-redirect-col.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path fill="context-fill" d="M4.422 7.006a.5.5 0 0 0-.276.14l-3 3a.5.5 0 0 0-.097.145.5.5 0 0 0-.02.062.5.5 0 0 0-.023.117.5.5 0 0 0-.006.03.5.5 0 0 0 .006.029.5.5 0 0 0 .023.117.5.5 0 0 0 .02.063.5.5 0 0 0 .097.144l3 3a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.707L2.707 11H8c.563 0 1 .437 1 1v2.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V12c0-1.1-.9-2-2-2H2.707l2.147-2.147a.5.5 0 0 0 0-.707.5.5 0 0 0-.432-.14z"/>
+ <path fill="context-stroke" d="M4.5 1a.5.5 0 0 0-.5.5V3c0 1.099.9 2 2 2h4.293L8.146 7.146a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 .05-.06.5.5 0 0 0 .07-.139A.5.5 0 0 0 12 4.5a.5.5 0 0 0-.004-.06.5.5 0 0 0-.008-.052.5.5 0 0 0-.002-.007.5.5 0 0 0-.002-.006.5.5 0 0 0-.017-.053.5.5 0 0 0-.016-.04.5.5 0 0 0-.008-.015.5.5 0 0 0-.02-.033.5.5 0 0 0-.01-.018.5.5 0 0 0-.022-.029.5.5 0 0 0-.004-.006.5.5 0 0 0-.033-.035l-.022-.021-2.978-2.979a.5.5 0 0 0-.708 0 .5.5 0 0 0 0 .707L10.293 4H6c-.563 0-1-.438-1-1V1.5a.5.5 0 0 0-.5-.5Zm6.922.006a.5.5 0 0 0-.276.14.5.5 0 0 0 0 .707L13.793 4.5l-2.647 2.646a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.707l-3-3a.5.5 0 0 0-.432-.14z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/reply.svg b/comm/mail/themes/shared/mail/icons/new/compact/reply.svg
new file mode 100644
index 0000000000..d4f1d0c63a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/reply.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M7.5 3.5a1 1 0 0 0-.707.293l-3 3A1 1 0 0 0 3.635 7a1 1 0 0 0-.135.5 1 1 0 0 0 .135.5 1 1 0 0 0 .158.207l3 3a1 1 0 0 0 1.414 0 1 1 0 0 0 0-1.414L6.914 8.5H11c.294 0 .5.205.5.5v2.5a1 1 0 0 0 1 1 1 1 0 0 0 1-1V9c0-1.368-1.132-2.5-2.5-2.5H6.914l1.293-1.293a1 1 0 0 0 0-1.414A1 1 0 0 0 7.5 3.5Z" fill="context-fill"/>
+ <path d="M7.5 3a1.5 1.5 0 0 0-1.06.439l-3 3a1.504 1.504 0 0 0-.239.31h.002a1.501 1.501 0 0 0-.203.75c0 .264.071.523.203.75h-.002c.065.114.146.218.238.311l3 3c.582.582 1.54.582 2.122 0a1.508 1.508 0 0 0 0-2.121l-.44-.44H11v2.5c0 .823.677 1.5 1.5 1.5s1.5-.677 1.5-1.5v-2.5c0-1.643-1.356-3-3-3H8.121l.44-.439a1.508 1.508 0 0 0 0-2.121 1.5 1.5 0 0 0-1.061-.44Zm0 1a.5.5 0 0 1 .354.146c.199.2.199.508 0 .707L6.561 6.146A.5.5 0 0 0 6.914 7H11c1.092 0 2 .908 2 2v2.5c0 .282-.218.5-.5.5a.493.493 0 0 1-.5-.5V9c0-.528-.473-1-1-1H6.914a.5.5 0 0 0-.353.853l1.293 1.293c.199.2.199.508 0 .707-.2.2-.508.2-.708 0l-3-3a.495.495 0 0 1-.078-.103.5.5 0 0 0-.002 0 .499.499 0 0 1 0-.5.5.5 0 0 0 .002 0 .496.496 0 0 1 .078-.104l3-3A.5.5 0 0 1 7.5 4Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/restore.svg b/comm/mail/themes/shared/mail/icons/new/compact/restore.svg
new file mode 100644
index 0000000000..2b170e1b58
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/restore.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M7.85 2a6.013 6.013 0 0 0-5.623 4.363c-.778 2.742.524 5.39 2.925 6.637H3.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5.5.5 0 0 0-.5.5v1.797c-2.287-.946-3.506-3.209-2.81-5.66a4.992 4.992 0 0 1 6.173-3.448 4.992 4.992 0 0 1 3.448 6.174c-.352 1.241-1.617 2.231-2.534 2.69a.5.5 0 0 0-.224.671.5.5 0 0 0 .67.223c1.083-.542 2.574-1.63 3.05-3.31A6.007 6.007 0 0 0 7.85 2z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/ribbon.svg b/comm/mail/themes/shared/mail/icons/new/compact/ribbon.svg
new file mode 100644
index 0000000000..3f387d8c2f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/ribbon.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="m4.035 8.5-2.5 4.33 2.733-.733L5 14.83l2.5-4.33Zm7.447 0-3.464 2 2.5 4.33.732-2.733 2.732.733z" fill="context-fill"/>
+ <path d="M8 1c-.518 0-.878.313-1.129.554-.25.242-.45.435-.566.485-.118.05-.369.052-.696.052-.327 0-.788.017-1.144.373-.356.357-.373.818-.373 1.145 0 .327-.003.578-.053.695-.05.118-.243.318-.484.569C3.313 5.123 3 5.482 3 6c0 .517.313.878.555 1.129.241.25.434.449.484.566.027.065.04.174.047.31a.5.5 0 0 0-.482.245l-2.5 4.33a.5.5 0 0 0 .562.732l2.248-.601.604 2.248a.5.5 0 0 0 .916.12l2.365-4.097a1.245 1.245 0 0 0 .31.012l2.36 4.086a.5.5 0 0 0 .916-.121l.603-2.248 2.248.601a.5.5 0 0 0 .563-.732l-2.5-4.33a.5.5 0 0 0-.385-.239c.006-.14.02-.25.047-.316.05-.117.243-.316.484-.566.242-.251.555-.612.555-1.13 0-.517-.313-.875-.555-1.126-.241-.251-.434-.451-.484-.569-.05-.117-.053-.368-.053-.695 0-.327-.017-.788-.373-1.145-.356-.355-.817-.372-1.144-.373-.327 0-.578-.003-.696-.052-.117-.05-.315-.243-.566-.485C8.879 1.313 8.518 1 8 1Zm0 1c.103 0 .224.074.434.275.209.202.45.507.87.686.422.178.81.13 1.087.13.277 0 .386.03.437.08.051.052.08.16.08.438s-.047.665.131 1.086c.178.421.484.662.686.871.201.21.275.33.275.434 0 .103-.074.224-.275.433-.202.21-.508.45-.686.871-.178.421-.13.809-.13 1.086 0 .278-.03.387-.08.438-.052.051-.16.08-.438.08s-.665-.047-1.086.13c-.421.179-.662.485-.871.686-.21.202-.33.276-.434.276-.103 0-.224-.074-.434-.276-.209-.201-.45-.507-.87-.685-.422-.178-.81-.131-1.087-.131-.277 0-.386-.029-.437-.08-.051-.051-.08-.16-.08-.438 0-.277.047-.665-.131-1.086-.178-.42-.484-.662-.686-.87C4.074 6.224 4 6.104 4 6c0-.104.074-.225.275-.434.202-.21.508-.45.686-.871.178-.421.13-.808.13-1.086s.03-.386.08-.437c.052-.052.16-.08.438-.08s.665.047 1.086-.131c.421-.179.662-.484.871-.686C7.776 2.074 7.896 2 8 2Zm0 1C6.35 3 5 4.349 5 6c0 1.65 1.35 3 3 3s3-1.35 3-3c0-1.651-1.35-3-3-3Zm0 1c1.11 0 2 .89 2 2 0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2ZM4.223 9.177c.055.125.13.247.242.358.356.356.817.373 1.144.373.327 0 .578.003.696.053.117.05.315.242.566.484.016.016.037.033.055.049l-1.756 3.04-.42-1.566a.5.5 0 0 0-.611-.353l-1.567.42 1.65-2.858zm7.51.092 1.597 2.766-1.566-.42a.5.5 0 0 0-.614.353l-.42 1.569-1.72-2.985c.04-.036.083-.073.119-.107.25-.242.45-.435.566-.484.118-.05.369-.053.696-.053.327 0 .788-.017 1.144-.373.084-.084.147-.174.197-.266z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/rss.svg b/comm/mail/themes/shared/mail/icons/new/compact/rss.svg
new file mode 100644
index 0000000000..655453e5d1
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/rss.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M4 1.5c-.5 0-1.5 0-1.5 1s1 1 1.5 1c4.5 0 8.5 3 8.5 8.5 0 .5 0 1.5 1 1.5s.992-1 .992-1.5C14.492 4.5 9.5 1.5 4 1.5Zm0 4c-.5 0-1.5 0-1.5 1s1 1 1.5 1c2.5.035 4.5 2 4.5 4.5 0 .5 0 1.5 1 1.5s1.007-1 1-1.5C10.5 8 7 5.5 4 5.5Zm0 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z" fill="context-fill"/>
+ <path d="M4 1c-.25 0-.682-.016-1.123.16C2.437 1.336 2 1.833 2 2.5s.436 1.164.877 1.34C3.317 4.016 3.75 4 4 4c2.139 0 4.14.711 5.6 2.055C11.06 7.398 12 9.37 12 12c0 .25-.016.682.16 1.123.176.44.673.877 1.34.877s1.162-.438 1.336-.879c.174-.441.156-.874.156-1.121 0-3.86-1.306-6.653-3.355-8.44C9.587 1.775 6.84 1 4 1Zm0 1c2.66 0 5.158.726 6.98 2.314 1.823 1.59 3.012 4.047 3.012 7.686 0 .253-.013.57-.086.754-.072.184-.073.246-.406.246s-.336-.064-.41-.248c-.074-.184-.09-.502-.09-.752 0-2.871-1.06-5.148-2.725-6.68C8.61 3.79 6.361 3 4 3c-.25 0-.568-.016-.752-.09C3.064 2.836 3 2.833 3 2.5c0-.333.064-.336.248-.41C3.432 2.016 3.75 2 4 2Zm0 3c-.25 0-.682-.016-1.123.16C2.437 5.336 2 5.833 2 6.5s.436 1.164.877 1.34c.438.175.864.16 1.115.16C6.234 8.031 8 9.767 8 12c0 .25-.016.682.16 1.123.176.44.673.877 1.34.877s1.164-.434 1.342-.875c.177-.44.162-.871.158-1.129C10.998 7.706 7.277 5 4 5Zm0 1c2.722 0 6 2.292 6 6a.5.5 0 0 0 0 .008c.004.242-.012.558-.086.742-.074.184-.08.25-.414.25-.333 0-.336-.064-.41-.248C9.016 12.568 9 12.25 9 12c0-2.767-2.234-4.961-4.992-5A.5.5 0 0 0 4 7c-.25 0-.568-.016-.752-.09C3.064 6.836 3 6.833 3 6.5c0-.333.064-.336.248-.41C3.432 6.016 3.75 6 4 6Zm0 3c-1.65 0-3 1.35-3 3s1.35 3 3 3 3-1.35 3-3-1.35-3-3-3Zm0 1c1.11 0 2 .89 2 2 0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/search.svg b/comm/mail/themes/shared/mail/icons/new/compact/search.svg
new file mode 100644
index 0000000000..cb1a815f57
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/search.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-opacity="context-fill-opacity" height="16" width="16">
+ <!-- Use both context-fill and context-stroke path to account for the styling coming from toolkit for those sections we can't override. -->
+ <path d="M6.5 2C4.02 2 2 4.02 2 6.5S4.02 11 6.5 11c1.06 0 2.034-.371 2.805-.988l3.841 3.842a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.708l-3.842-3.841C10.629 8.535 11 7.56 11 6.5 11 4.02 8.98 2 6.5 2zm0 1C8.439 3 10 4.561 10 6.5S8.439 10 6.5 10A3.492 3.492 0 0 1 3 6.5C3 4.561 4.561 3 6.5 3z" fill="context-fill transparent"/>
+ <path d="M6.5 2C4.02 2 2 4.02 2 6.5S4.02 11 6.5 11c1.06 0 2.034-.371 2.805-.988l3.841 3.842a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.708l-3.842-3.841C10.629 8.535 11 7.56 11 6.5 11 4.02 8.98 2 6.5 2zm0 1C8.439 3 10 4.561 10 6.5S8.439 10 6.5 10A3.492 3.492 0 0 1 3 6.5C3 4.561 4.561 3 6.5 3z" fill="context-stroke transparent"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/sent.svg b/comm/mail/themes/shared/mail/icons/new/compact/sent.svg
new file mode 100644
index 0000000000..8807e5246c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/sent.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M8.39 13.529c.073.544.558.971 1.11.971s.946-.432 1.178-.945L14.09 3.91c.175-.535.41-.91.41-1.41a1 1 0 0 0-1-1c-.552 0-.967.17-1.608.43L2.5 5.321c-.559.15-1 .632-1 1.184 0 .552.422 1.009.96 1.082L6.5 9.5Z" fill="context-fill"/>
+ <path d="M13.5 1c-.654 0-1.153.206-1.791.463l-.004.002L2.33 4.852C1.595 5.066 1 5.702 1 6.506c0 .824.625 1.405 1.303 1.56l-.057-.027.121.041a1.688 1.688 0 0 1-.064-.014l3.82 1.809 1.795 3.822-.016-.054.035.097-.019-.043c.087.322.264.618.518.858A1.56 1.56 0 0 0 9.5 15c.813 0 1.359-.63 1.635-1.24a.5.5 0 0 0 .015-.04l3.412-9.642a.5.5 0 0 0 .004-.014C14.721 3.59 15 3.157 15 2.5c0-.823-.677-1.5-1.5-1.5Zm0 1c.282 0 .5.218.5.5 0 .343-.19.66-.385 1.256l-3.394 9.596c-.188.413-.43.648-.721.648a.556.556 0 0 1-.377-.172.918.918 0 0 1-.246-.414.5.5 0 0 0-.035-.098l-1.74-3.71 2.752-2.752a.5.5 0 0 0 0-.708.5.5 0 0 0-.708 0L6.395 8.898 2.674 7.137a.5.5 0 0 0-.121-.04C2.324 7.055 2 6.76 2 6.507c0-.286.265-.604.629-.701a.5.5 0 0 0 .04-.012L12.063 2.4a.5.5 0 0 0 .016-.007c.643-.26.973-.393 1.422-.393Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/settings.svg b/comm/mail/themes/shared/mail/icons/new/compact/settings.svg
new file mode 100644
index 0000000000..e10ee5a77e
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/settings.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M7.5.5c-.554 0-1 .446-1 1v1.213A5.5 5.5 0 0 0 4.182 4.06l-1.057-.612a.999.999 0 0 0-1.367.365l-.5.868a.997.997 0 0 0 .367 1.365l1.053.607A5.5 5.5 0 0 0 2.5 8a5.5 5.5 0 0 0 .178 1.338l-1.053.607a.997.997 0 0 0-.367 1.366l.5.867a.999.999 0 0 0 1.367.365l1.053-.607A5.5 5.5 0 0 0 6.5 13.287v1.205c0 .554.446 1 1 1h1c.554 0 1-.446 1-1v-1.205a5.5 5.5 0 0 0 2.322-1.351l1.053.607a.999.999 0 0 0 1.367-.365l.5-.867a.997.997 0 0 0-.367-1.366l-1.053-.607A5.5 5.5 0 0 0 13.5 8a5.5 5.5 0 0 0-.168-1.352l1.043-.601a.997.997 0 0 0 .367-1.365l-.5-.868a.999.999 0 0 0-1.367-.365l-1.047.604A5.5 5.5 0 0 0 9.5 2.709V1.5c0-.554-.446-1-1-1zm.5 6A1.5 1.5 0 0 1 9.5 8 1.5 1.5 0 0 1 8 9.5 1.5 1.5 0 0 1 6.5 8 1.5 1.5 0 0 1 8 6.5Z" fill="context-fill"/>
+ <path d="M7.5 0C6.678 0 6 .678 6 1.5v.943A5.957 5.957 0 0 0 4.197 3.49l-.822-.474a1.51 1.51 0 0 0-2.05.548l-.5.868a1.508 1.508 0 0 0 .55 2.048l.766.442c-.068.355-.138.712-.141 1.074a.5.5 0 0 0 0 .008c.003.36.073.714.14 1.066l-.765.442a1.508 1.508 0 0 0-.55 2.049l.5.867a1.51 1.51 0 0 0 2.05.549l.816-.471A5.955 5.955 0 0 0 6 13.556v.936c0 .823.678 1.5 1.5 1.5h1c.822 0 1.5-.677 1.5-1.5v-.935a5.955 5.955 0 0 0 1.809-1.051l.816.47a1.51 1.51 0 0 0 2.05-.548l.5-.867a1.508 1.508 0 0 0-.55-2.05l-.766-.44c.068-.353.138-.708.141-1.067A.5.5 0 0 0 14 8c0-.365-.069-.724-.135-1.082l.76-.438c.712-.41.962-1.336.55-2.048l-.5-.868a1.51 1.51 0 0 0-2.05-.548l-.813.468A5.95 5.95 0 0 0 10 2.438V1.5C10 .678 9.322 0 8.5 0Zm0 1h1c.286 0 .5.214.5.5v1.209a.5.5 0 0 0 .363.48 5.005 5.005 0 0 1 2.117 1.223.5.5 0 0 0 .598.074l1.047-.603a.489.489 0 0 1 .684.181l.5.868a.487.487 0 0 1-.184.681l-1.043.602a.5.5 0 0 0-.234.556c.101.402.152.813.152 1.227a4.99 4.99 0 0 1-.162 1.213.5.5 0 0 0 .234.56l1.053.608a.487.487 0 0 1 .184.682l-.5.867a.489.489 0 0 1-.684.181l-1.053-.607a.5.5 0 0 0-.6.076 5 5 0 0 1-2.11 1.229.5.5 0 0 0-.362.48v1.205c0 .286-.214.5-.5.5h-1a.488.488 0 0 1-.5-.5v-1.205a.5.5 0 0 0-.361-.48 5 5 0 0 1-2.112-1.229.5.5 0 0 0-.6-.076l-1.052.607a.489.489 0 0 1-.684-.181l-.5-.867a.487.487 0 0 1 .184-.682l1.053-.608a.5.5 0 0 0 .234-.56A4.989 4.989 0 0 1 3 8.004v-.008c.004-.41.059-.818.162-1.215a.5.5 0 0 0-.234-.56l-1.053-.608a.487.487 0 0 1-.184-.681l.5-.868a.489.489 0 0 1 .684-.181l1.057.611a.5.5 0 0 0 .6-.076 4.998 4.998 0 0 1 2.107-1.225.5.5 0 0 0 .361-.48V1.5c0-.286.214-.5.5-.5ZM8 6c-1.099 0-2 .901-2 2s.901 2 2 2 2-.901 2-2-.901-2-2-2Zm0 1c.558 0 1 .442 1 1s-.442 1-1 1-1-.442-1-1 .442-1 1-1Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/shield.svg b/comm/mail/themes/shared/mail/icons/new/compact/shield.svg
new file mode 100644
index 0000000000..0edf1e1e7a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/shield.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M8 .498a1 1 0 0 0-.48.123l-5.5 3c-.32.176-.52.514-.52.879 0 7 1 8.478 6.02 10.879a.998.998 0 0 0 .96 0C13.5 12.979 14.5 11.5 14.5 4.5c0-.365-.2-.703-.52-.879l-5.5-3A1 1 0 0 0 8 .498ZM7.5 3v10c-3.45-1.65-3.969-2.595-3.969-7.406 0-.251.138-.483.358-.604Z" fill="context-fill"/>
+ <path d="M8-.002c-.248 0-.496.06-.72.184l-5.5 3A1.5 1.5 0 0 0 1 4.5c0 3.524.239 5.732 1.193 7.412.951 1.674 2.57 2.7 5.09 3.906a1.5 1.5 0 0 0 1.434 0c2.52-1.206 4.139-2.232 5.09-3.906C14.76 10.232 15 8.024 15 4.5a1.502 1.502 0 0 0-.78-1.318l-5.5-3A1.499 1.499 0 0 0 8-.002ZM8 1a.5.5 0 0 1 .24.06l5.5 3c.16.088.26.258.26.44 0 3.476-.262 5.509-1.063 6.918-.8 1.41-2.186 2.321-4.671 3.51a.5.5 0 0 0-.026.011.502.502 0 0 1-.48 0 .5.5 0 0 0-.026-.011c-2.485-1.189-3.87-2.1-4.671-3.51C2.261 10.008 2 7.976 2 4.5c0-.182.1-.352.26-.44l5.5-3A.5.5 0 0 1 8 1Zm-.545 1.502a.5.5 0 0 0-.197.06l-3.61 1.99a1.19 1.19 0 0 0-.617 1.042c0 2.423.114 3.94.75 5.125.636 1.184 1.754 1.895 3.504 2.732A.5.5 0 0 0 8 13V3a.5.5 0 0 0-.545-.498ZM7 3.846v8.3c-1.16-.613-1.94-1.16-2.338-1.9-.485-.903-.63-2.264-.63-4.652 0-.068.038-.132.097-.164a.5.5 0 0 0 .002-.002Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/shortcut.svg b/comm/mail/themes/shared/mail/icons/new/compact/shortcut.svg
new file mode 100644
index 0000000000..a31a815e2c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/shortcut.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4 1.5A2.495 2.495 0 0 0 1.5 4v8c0 1.385 1.115 2.5 2.5 2.5h8c1.385 0 2.5-1.115 2.5-2.5V4c0-1.385-1.115-2.5-2.5-2.5Z" fill="context-fill"/>
+ <path d="M4 1C2.347 1 1 2.346 1 4v8c0 1.653 1.347 3 3 3h8c1.653 0 3-1.347 3-3V4c0-1.654-1.347-3-3-3Zm0 1h8c1.117 0 2 .883 2 2v8c0 1.116-.883 2-2 2H4c-1.117 0-2-.884-2-2V4c0-1.117.883-2 2-2Zm1 1c-1.099 0-2 .901-2 2 0 1.098.901 2 2 2h1v2H5c-1.099 0-2 .901-2 2 0 1.098.901 2 2 2s2-.902 2-2v-1h2v1c0 1.098.901 2 2 2s2-.902 2-2c0-1.099-.901-2-2-2h-1V7h1c1.099 0 2-.902 2-2 0-1.099-.901-2-2-2s-2 .901-2 2v1H7V5c0-1.099-.901-2-2-2Zm0 1c.558 0 1 .441 1 1v1H5c-.558 0-1-.442-1-1 0-.559.442-1 1-1Zm6 0c.558 0 1 .441 1 1 0 .558-.442 1-1 1h-1V5c0-.559.442-1 1-1ZM7 7h2v2H7Zm-2 3h1v1c0 .558-.442 1-1 1s-1-.442-1-1c0-.559.442-1 1-1Zm5 0h1c.558 0 1 .441 1 1 0 .558-.442 1-1 1s-1-.442-1-1z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/sort.svg b/comm/mail/themes/shared/mail/icons/new/compact/sort.svg
new file mode 100644
index 0000000000..f735ba446a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/sort.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M3.5 3A1.5 1.5 0 0 0 2 4.5 1.5 1.5 0 0 0 3.5 6 1.5 1.5 0 0 0 5 4.5 1.5 1.5 0 0 0 3.5 3Zm0 1a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5Zm3 0a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm-3 3A1.5 1.5 0 0 0 2 8.5 1.5 1.5 0 0 0 3.5 10 1.5 1.5 0 0 0 5 8.5 1.5 1.5 0 0 0 3.5 7Zm0 1a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5Zm3 0a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm-3 3A1.5 1.5 0 0 0 2 12.5 1.5 1.5 0 0 0 3.5 14 1.5 1.5 0 0 0 5 12.5 1.5 1.5 0 0 0 3.5 11Zm0 1a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5Zm3 0a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/spaces-menu.svg b/comm/mail/themes/shared/mail/icons/new/compact/spaces-menu.svg
new file mode 100644
index 0000000000..a4fa781a81
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/spaces-menu.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4 1.5A2.495 2.495 0 0 0 1.5 4v8c0 1.385 1.115 2.5 2.5 2.5h1.502v-13z" fill="context-fill"/>
+ <path d="M4 1C2.347 1 1 2.346 1 4v8c0 1.653 1.347 3 3 3h8c1.653 0 3-1.347 3-3V4c0-1.654-1.347-3-3-3Zm0 1h1v12H4c-1.117 0-2-.884-2-2V4c0-1.117.883-2 2-2Zm2 0h6c1.117 0 2 .883 2 2v8c0 1.116-.883 2-2 2H6ZM3.5 4a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm4 0c-.277 0-.5.196-.5.44v.12c0 .243.223.44.5.44h4c.277 0 .5-.197.5-.44v-.12c0-.244-.223-.44-.5-.44Zm-4 3a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm4 0c-.277 0-.5.205-.5.459v.082c0 .254.223.459.5.459h4c.277 0 .5-.205.5-.46v-.081c0-.254-.223-.46-.5-.46h-4zm-4 3a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm4 0a.5.5 0 1 0 0 1h4a.5.5 0 1 0 0-1z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/spam.svg b/comm/mail/themes/shared/mail/icons/new/compact/spam.svg
new file mode 100644
index 0000000000..1c7f5d78d7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/spam.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M7 1.5c.146.5.5 1.912.5 2.5 0 .89-.187 1.374-.5 2-.298.596-.294 1-1 1-.553 0-.707-.082-1-.5-.157-.223-.393-1.21-.5-1.5-1 .5-2 3.109-2 4.5 0 1.749 1 4.5 3 5a3.674 3.674 0 0 1-.003-.16c0-1.547.524-3.34 2.003-3.34 1.48 0 2.003 1.793 2.003 3.34 0 .054 0 .107-.003.16 2-.5 3-3.251 3-5 0-.115-.004-.228-.01-.341a.5.5 0 0 1 .01-.143C12.145 4.868 10 2.5 7 1.5Z" fill="context-fill"/>
+ <path d="M6.432 1.234a.5.5 0 0 1 .51-.227c1.658.289 5.577 2.165 6.056 7.916a6.695 6.695 0 0 1 .002.542c0 2.533-1.444 4.73-3.527 5.602a.5.5 0 0 1-.656-.651c.116-.281.183-.604.183-.952 0-1.214-.77-2-1.5-2s-1.5.786-1.5 2c0 .348.067.67.183.952a.5.5 0 0 1-.656.65C3.444 14.195 2 11.999 2 9.465c0-1.992.891-3.77 2.28-4.865a.5.5 0 0 1 .802.303c.096.526.265.946.458 1.22.197.282.365.342.46.342.123 0 .369-.112.613-.602.23-.46.387-1.13.387-1.898 0-.954-.241-1.742-.55-2.172a.5.5 0 0 1-.018-.558ZM7.775 2.31c.146.5.225 1.067.225 1.654 0 .89-.18 1.72-.492 2.345C7.21 6.905 6.706 7.464 6 7.464c-.553 0-.986-.35-1.279-.767a3.414 3.414 0 0 1-.396-.775C3.511 6.823 3 8.073 3 9.464c0 1.75.805 3.27 2.003 4.16a3.674 3.674 0 0 1-.003-.16c0-1.546 1.02-3 2.5-3s2.5 1.454 2.5 3c0 .054-.001.107-.003.16 1.198-.89 2.003-2.41 2.003-4.16a6.37 6.37 0 0 0-.01-.34.5.5 0 0 1 .01-.144c-.355-4.149-2.653-5.985-4.225-6.671Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/spelling.svg b/comm/mail/themes/shared/mail/icons/new/compact/spelling.svg
new file mode 100644
index 0000000000..393d40b734
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/spelling.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="m6.5 2.5-4 12h3l1-3h.535a5 5 0 0 1 .647-2H6.5l1-4h1l.61 2.434a5 5 0 0 1 1.925-.829L9.5 2.5h-3z" fill="context-fill"/>
+ <path d="M6.5 2a.5.5 0 0 0-.475.342l-4 12A.5.5 0 0 0 2.5 15h3a.5.5 0 0 0 .475-.342L6.86 12H7a5 5 0 0 1 .113-1H6.5a.5.5 0 0 0-.475.342L5.14 14H3.193L6.861 3H9.14l1.406 4.22a5 5 0 0 1 .994-.187L9.975 2.342A.5.5 0 0 0 9.5 2h-3zm1 3a.5.5 0 0 0-.484.379l-1 4A.5.5 0 0 0 6.5 10h.924a5 5 0 0 1 .592-1H7.14l.75-3h.218l.569 2.27a5 5 0 0 1 .875-.616L8.984 5.38A.5.5 0 0 0 8.5 5h-1zM12 8c-2.203 0-4 1.797-4 4 0 2.203 1.797 4 4 4 2.203 0 4-1.797 4-4 0-2-1.58-3.965-4-4zm0 1c.692 0 1.328.232 1.834.623l-1.871 2.992L10.9 11.2a.5.5 0 1 0-.8.602l1.5 2a.5.5 0 0 0 .824-.035l2.11-3.375c.294.464.466 1.016.466 1.609 0 1.663-1.337 3-3 3s-3-1.337-3-3 1.337-3 3-3z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/star.svg b/comm/mail/themes/shared/mail/icons/new/compact/star.svg
new file mode 100644
index 0000000000..895566f4e0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/star.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M8 1.5a.869.869 0 0 0-.787.499L5.5 5.499l-3.272.344a.867.867 0 0 0-.486 1.475L4.019 9.49l-.779 3.972a.868.868 0 0 0 1.204.967L8 12.851l3.556 1.578a.868.868 0 0 0 1.204-.967l-.779-3.972 2.277-2.172a.867.867 0 0 0-.486-1.475L10.5 5.5 8.787 1.999a.869.869 0 0 0-.787-.5Z" fill="context-fill"/>
+ <path d="M8 1a1.37 1.37 0 0 0-1.24.787L5.172 5.031l-2.996.314a.5.5 0 0 0-.02.002C1.07 5.505.609 6.903 1.391 7.673a.5.5 0 0 0 .005.006l2.079 1.983-.725 3.699v.002c-.216 1.06.907 1.961 1.896 1.523L8 13.398l3.354 1.488c.989.438 2.112-.464 1.896-1.523l-.725-3.701 2.079-1.983a.5.5 0 0 0 .005-.006c.782-.77.321-2.168-.765-2.326a.5.5 0 0 0-.02-.002l-2.996-.314L9.24 1.786A1.373 1.373 0 0 0 8 1Zm0 1c.145 0 .273.08.334.21a.5.5 0 0 0 .004.008l1.713 3.502a.5.5 0 0 0 .396.278l3.254.34c.334.048.444.39.205.625l-2.27 2.166a.5.5 0 0 0-.146.457l.78 3.972a.5.5 0 0 0 0 .006c.065.32-.21.54-.51.409l-3.557-1.579a.5.5 0 0 0-.406 0l-3.555 1.579c-.302.133-.578-.088-.512-.409a.5.5 0 0 0 0-.006l.78-3.972a.5.5 0 0 0-.147-.458l-2.27-2.166c-.238-.235-.128-.576.206-.625l3.254-.34a.5.5 0 0 0 .396-.277l1.713-3.502a.5.5 0 0 0 .004-.008C7.727 2.08 7.856 2 8 2Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/subthread-ignored.svg b/comm/mail/themes/shared/mail/icons/new/compact/subthread-ignored.svg
new file mode 100644
index 0000000000..a327060d3c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/subthread-ignored.svg
@@ -0,0 +1,9 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path fill="#ff0039" d="M15.5 12.5a3 3 0 0 1-3 3 3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3z" opacity="0.2"/>
+ <path fill="#ff0039" d="M12.5 9A3.508 3.508 0 0 0 9 12.5c0 1.927 1.573 3.5 3.5 3.5s3.5-1.573 3.5-3.5S14.427 9 12.5 9zm0 1c1.387 0 2.5 1.113 2.5 2.5S13.887 15 12.5 15a2.492 2.492 0 0 1-2.5-2.5c0-1.387 1.113-2.5 2.5-2.5zm-1 2a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5h-2z"/>
+ <path d="M4.5 1.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm6 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" fill="context-fill"/>
+ <path d="M4.5 1C3.677 1 3 1.677 3 2.5c0 .648.42 1.204 1 1.412V11c0 1.1.9 2 2 2h3.91a3 3 0 0 1-.363-1H6c-.563 0-1-.437-1-1V6.729c.295.171.636.183 1 .183h3.088c.208.58.764 1 1.412 1 .823 0 1.5-.677 1.5-1.5 0-.822-.677-1.5-1.5-1.5-.648 0-1.204.42-1.412 1H6c-.563 0-1-.35-1-.912V3.912c.58-.208 1-.764 1-1.412C6 1.677 5.323 1 4.5 1Zm0 1c.282 0 .5.218.5.5 0 .282-.218.5-.5.5a.493.493 0 0 1-.5-.5c0-.282.218-.5.5-.5Zm6 3.912c.282 0 .5.218.5.5 0 .282-.218.5-.5.5a.493.493 0 0 1-.5-.5c0-.282.218-.5.5-.5z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/subtract-circle.svg b/comm/mail/themes/shared/mail/icons/new/compact/subtract-circle.svg
new file mode 100644
index 0000000000..6001409c5e
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/subtract-circle.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M7.5.47A7.03 7.03 0 0 0 .47 7.5a7.03 7.03 0 0 0 7.03 7.03 7.03 7.03 0 0 0 7.03-7.03A7.03 7.03 0 0 0 7.5.47Z" stroke-opacity="0.2" stroke="context-stroke" fill="context-fill"/>
+ <path fill-opacity="1" d="M4.5 7a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/sync.svg b/comm/mail/themes/shared/mail/icons/new/compact/sync.svg
new file mode 100644
index 0000000000..706ad9df26
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/sync.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M3.757 3.757a6.008 6.008 0 0 1 8.486 0l.001.001a6.001 6.001 0 0 1 1.733 4.628l1.17-1.24a.5.5 0 1 1 .707.707l-2 2.047a.5.5 0 0 1-.708 0l-2-2.047a.5.5 0 1 1 .708-.707L13 8.5c.22-1.538-.345-2.912-1.464-4.036a4.992 4.992 0 0 0-7.377.335.5.5 0 1 1-.77-.638c.116-.14.24-.275.368-.404zM2.147 6.1a.5.5 0 0 1 .707 0l2 2.046a.5.5 0 1 1-.708.707L3 7.5c-.22 1.537.347 2.912 1.466 4.037a4.993 4.993 0 0 0 7.375-.337.5.5 0 1 1 .77.638 6.008 6.008 0 0 1-8.854.405l-.001-.001a6.004 6.004 0 0 1-1.733-4.63L.853 8.853a.5.5 0 1 1-.707-.707z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/tag.svg b/comm/mail/themes/shared/mail/icons/new/compact/tag.svg
new file mode 100644
index 0000000000..e0dbbfe5e9
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/tag.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M6.502 2.5.79 8.139a.996.996 0 0 0 0 1.414l5.658 5.658a.996.996 0 0 0 1.414 0L13.501 9.5v-7zm3.5 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z" fill="context-fill"/>
+ <path d="M6.502 2a.5.5 0 0 0-.352.144L.44 7.783a1.505 1.505 0 0 0-.002 2.123l5.658 5.658a1.505 1.505 0 0 0 2.123-.002l5.638-5.711a.5.5 0 0 0 .145-.352v-7a.5.5 0 0 0-.5-.5zm.205 1h6.295v6.294l-5.494 5.565c-.199.2-.503.2-.705-.002L1.145 9.199a.487.487 0 0 1-.002-.705Zm3.295 1c-1.099 0-2 .9-2 2 0 1.098.901 2 2 2s2-.902 2-2c0-1.1-.901-2-2-2zm0 1c.558 0 1 .441 1 1 0 .558-.442 1-1 1s-1-.442-1-1c0-.559.442-1 1-1z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/tasks.svg b/comm/mail/themes/shared/mail/icons/new/compact/tasks.svg
new file mode 100644
index 0000000000..9f83908935
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/tasks.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M4 2a.98.98 0 0 0-.477.121 1.004 1.004 0 0 0-.478.578v.002c-.01.031-.02.062-.025.094v.004c-.007.032-.01.065-.014.097v.002A1.056 1.056 0 0 0 3 3v10a.86.86 0 0 0 .006.102v.002a.781.781 0 0 0 .014.097v.004c.006.031.016.064.025.094v.002a1.004 1.004 0 0 0 .654.654h.002a.77.77 0 0 0 .094.026h.004c.032.006.065.01.097.013h.002c.034.003.067.006.102.006h8a.98.98 0 0 0 .477-.121 1.004 1.004 0 0 0 .478-.578A.997.997 0 0 0 13 13V3a.983.983 0 0 0-.02-.201v-.004c-.006-.032-.016-.063-.025-.094V2.7a1.005 1.005 0 0 0-.654-.654h-.002a1.031 1.031 0 0 0-.094-.025h-.004a1.005 1.005 0 0 0-.098-.014h-.002A.996.996 0 0 0 12 2h-1.086A1.51 1.51 0 0 1 9.5 3.004h-3A1.51 1.51 0 0 1 5.086 2Z" fill="context-fill"/>
+ <path d="M6.5 0c-.647 0-1.204.42-1.412 1H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2h-1.088c-.208-.58-.765-1-1.412-1Zm0 1h3c.286 0 .5.214.5.5v.004c0 .286-.214.5-.5.5h-3a.488.488 0 0 1-.5-.5V1.5c0-.286.214-.5.5-.5ZM4 2h1.086A1.51 1.51 0 0 0 6.5 3.004h3A1.51 1.51 0 0 0 10.914 2H12c.563 0 1 .437 1 1v10c0 .563-.437 1-1 1H4c-.563 0-1-.437-1-1V3c0-.563.437-1 1-1Zm6.56 4.004a.5.5 0 0 0-.13.002.5.5 0 0 0-.33.193L7.445 9.74 5.854 8.145a.5.5 0 0 0-.708 0 .5.5 0 0 0 0 .708l2 2A.5.5 0 0 0 7.9 10.8l3-4a.5.5 0 0 0-.1-.701.5.5 0 0 0-.24-.096Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/template.svg b/comm/mail/themes/shared/mail/icons/new/compact/template.svg
new file mode 100644
index 0000000000..3c50a5d335
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/template.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M4 2h8c.554 0 1 .446 1 1v10c0 .554-.446 1-1 1H4c-.554 0-1-.446-1-1V3c0-.554.446-1 1-1Z" fill="context-fill"/>
+ <path d="M4 1c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2Zm0 1h8c.563 0 1 .437 1 1v10c0 .563-.437 1-1 1H4c-.563 0-1-.437-1-1V3c0-.563.437-1 1-1Zm4 1a.5.5 0 0 0-.5.5v.563A2.011 2.011 0 0 0 6 6c0 .692.358 1.304.896 1.664L5.961 10H5.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h.06l-.525 1.314a.5.5 0 0 0 .28.65.5.5 0 0 0 .65-.278L6.639 11H9.36l.674 1.686a.5.5 0 0 0 .65.279.5.5 0 0 0 .28-.65L10.439 11h.061a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5h-.46l-.936-2.336C9.642 7.304 10 6.692 10 6c0-.926-.64-1.714-1.5-1.938V3.5A.5.5 0 0 0 8 3Zm0 2c.558 0 1 .442 1 1s-.442 1-1 1-1-.442-1-1 .442-1 1-1Zm-.158 2.994a1.979 1.979 0 0 0 .316 0L8.961 10H7.039Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/tentative.svg b/comm/mail/themes/shared/mail/icons/new/compact/tentative.svg
new file mode 100644
index 0000000000..ee9fff177a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/tentative.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M8.5 2c-1.35 0-2.29.435-2.832 1.13C5.127 3.828 5 4.695 5 5.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5c0-.694.123-1.327.457-1.756C6.791 3.315 7.35 3 8.5 3c.892 0 1.466.264 1.865.742.4.478.635 1.229.635 2.258 0 .78-.202 1.204-.494 1.523-.293.32-.718.538-1.201.745-.484.206-1.019.39-1.483.742A2.095 2.095 0 0 0 7 10.705v.795a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-.795c0-.492.142-.68.428-.898.286-.218.751-.4 1.267-.62.517-.22 1.092-.49 1.55-.99C11.701 7.697 12 6.97 12 6c0-1.18-.264-2.179-.865-2.898C10.534 2.382 9.608 2 8.5 2zm-1 11a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/thread-ignored.svg b/comm/mail/themes/shared/mail/icons/new/compact/thread-ignored.svg
new file mode 100644
index 0000000000..3b6a5d308a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/thread-ignored.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path fill="#ff0039" d="M14.5 7.5a7 7 0 0 1-7 7 7 7 0 0 1-7-7 7 7 0 0 1 7-7 7 7 0 0 1 7 7z" opacity="0.2"/>
+ <path fill="#ff0039" d="M7.5 0C3.364 0 0 3.363 0 7.5 0 11.636 3.364 15 7.5 15S15 11.636 15 7.5C15 3.363 11.636 0 7.5 0Zm0 1C11.096 1 14 3.904 14 7.5c0 3.595-2.904 6.5-6.5 6.5A6.492 6.492 0 0 1 1 7.5C1 3.904 3.904 1 7.5 1Zm-4 6a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/thread.svg b/comm/mail/themes/shared/mail/icons/new/compact/thread.svg
new file mode 100644
index 0000000000..731e7af137
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/thread.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4.5 1.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm6 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm1 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" fill="context-fill"/>
+ <path d="M4.5 1C3.677 1 3 1.677 3 2.5c0 .648.42 1.204 1 1.412V12c0 1.1.9 2 2 2h4.088c.208.58.764 1 1.412 1 .823 0 1.5-.677 1.5-1.5s-.677-1.5-1.5-1.5c-.648 0-1.204.42-1.412 1H6c-.563 0-1-.437-1-1V7.816c.295.172.636.184 1 .184h3.088c.208.58.764 1 1.412 1 .823 0 1.5-.677 1.5-1.5S11.323 6 10.5 6c-.648 0-1.204.42-1.412 1H6c-.563 0-1-.35-1-.912V3.912c.58-.208 1-.764 1-1.412C6 1.677 5.323 1 4.5 1Zm0 1c.282 0 .5.218.5.5 0 .282-.218.5-.5.5a.493.493 0 0 1-.5-.5c0-.282.218-.5.5-.5Zm6 5c.282 0 .5.218.5.5 0 .282-.218.5-.5.5a.493.493 0 0 1-.5-.5c0-.282.218-.5.5-.5Zm1 6c.282 0 .5.218.5.5 0 .282-.218.5-.5.5a.493.493 0 0 1-.5-.5c0-.282.218-.5.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/tools.svg b/comm/mail/themes/shared/mail/icons/new/compact/tools.svg
new file mode 100644
index 0000000000..2f68413f08
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/tools.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M6 2.5A3.5 3.5 0 0 1 9.5 6a3.5 3.5 0 0 1-.246 1.264l.243.239L14 12s1 1 0 2-2 0-2 0c-1.575-1.58-3.18-3.168-4.736-4.746A3.5 3.5 0 0 1 6 9.5 3.5 3.5 0 0 1 2.5 6V4.5L5 7s1 0 1.5-.5C7.5 5.5 7 5 7 5L4.5 2.5Z" fill="context-fill"/>
+ <path d="M4.5 2a.5.5 0 0 0-.354.853l2.47 2.469c.001.004.009.014.009.053 0 .083-.037.33-.479.771-.132.132-.419.248-.681.3-.158.032-.196.027-.28.032L2.854 4.146A.5.5 0 0 0 2 4.5V6c0 2.203 1.797 4 4 4a.5.5 0 0 0 .004 0c.372-.003.73-.107 1.086-.211 1.513 1.53 3.041 3.044 4.556 4.564 0 0 .32.329.82.496.502.167 1.27.122 1.888-.496.617-.618.663-1.385.496-1.887a2.232 2.232 0 0 0-.496-.82c-1.519-1.518-3.033-3.043-4.565-4.555.105-.356.208-.715.211-1.088a.5.5 0 0 0 0-.004c0-2.203-1.797-4-4-4zm1.207 1H6a2.992 2.992 0 0 1 3 2.998V6c-.003.37-.075.736-.21 1.08a.5.5 0 0 0 .112.54c1.59 1.566 3.163 3.152 4.744 4.733 0 0 .172.181.254.43.083.248.129.48-.254.863-.382.382-.614.337-.863.254a1.297 1.297 0 0 1-.43-.254c-1.579-1.585-3.167-3.156-4.734-4.744a.5.5 0 0 0-.539-.113c-.344.136-.71.207-1.08.21h-.002a2.992 2.992 0 0 1-2.998-3v-.292l1.646 1.646A.5.5 0 0 0 5 7.5s.297 0 .66-.073c.363-.072.826-.206 1.194-.574.558-.559.771-1.062.771-1.478 0-.209-.054-.382-.115-.504a1.118 1.118 0 0 0-.156-.225Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/trash.svg b/comm/mail/themes/shared/mail/icons/new/compact/trash.svg
new file mode 100644
index 0000000000..4b8747b30f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/trash.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" width="16" height="16">
+ <path d="M4 3c-.554 0-1 .446-1 1v1h10V4c0-.554-.446-1-1-1Zm0 3v7c0 .554.446 1 1 1h6c.554 0 1-.446 1-1V6Z" fill="context-fill"/>
+ <path d="M7 1c-.545 0-1 .455-1 1H4c-1.1 0-2 .9-2 2v1c0 .545.455 1 1 1v7c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2V6c.545 0 1-.455 1-1V4c0-1.1-.9-2-2-2h-2c0-.545-.455-1-1-1ZM4 3h8c.563 0 1 .437 1 1v1H3V4c0-.563.437-1 1-1Zm0 3h8v7c0 .563-.437 1-1 1H5c-.563 0-1-.437-1-1Zm2.5 1a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-5a.5.5 0 0 0-.5-.5Zm3 0a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-5a.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/unread.svg b/comm/mail/themes/shared/mail/icons/new/compact/unread.svg
new file mode 100644
index 0000000000..6814ac1d68
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/unread.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M5.854 3.5c.094.317.146.653.146 1C6 6.427 4.427 8 2.5 8a3.48 3.48 0 0 1-1-.147V12c0 .83.669 1.5 1.5 1.5h10c.831 0 1.5-.67 1.5-1.5V5c0-.831-.669-1.5-1.5-1.5Z" fill="context-fill"/>
+ <path d="M2.5 2A2.508 2.508 0 0 0 0 4.5C0 5.874 1.125 7 2.5 7S5 5.874 5 4.5C5 3.125 3.875 2 2.5 2Zm0 1C3.334 3 4 3.665 4 4.5 4 5.334 3.334 6 2.5 6S1 5.334 1 4.5C1 3.665 1.666 3 2.5 3Zm3.162 0c.148.31.25.647.3 1H13c.563 0 1 .437 1 1v7c0 .562-.437 1-1 1H3c-.563 0-1-.438-1-1V7.963a3.473 3.473 0 0 1-1-.301V12c0 1.099.9 2 2 2h10c1.1 0 2-.901 2-2V5c0-1.1-.9-2-2-2Zm6.736 2.011a.5.5 0 0 0-.23.116L8 8.832 5.371 6.496c-.191.274-.42.52-.68.73l1.258 1.117-2.803 2.803a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l2.843-2.844.971.864a.5.5 0 0 0 .664 0l.97-.864 2.844 2.844a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.707l-2.803-2.803 2.781-2.47a.5.5 0 0 0 .041-.705.5.5 0 0 0-.475-.157Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/user-list-alt.svg b/comm/mail/themes/shared/mail/icons/new/compact/user-list-alt.svg
new file mode 100644
index 0000000000..7e0990a3b9
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/user-list-alt.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M5.996 1.998A3.008 3.008 0 0 0 3 5a.5.5 0 0 0 0 .002c.003.782.368 1.482.904 2.035C2.856 7.095 2 7.935 2 8.997v2.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-2.5c0-.562.437-1 1-1h.5a.5.5 0 0 0 .5-.5V6.99a.5.5 0 0 0-.2-.4A1.999 1.999 0 0 1 4 5v-.002c0-1.11.887-1.999 1.996-2a1.993 1.993 0 0 1 1.992 1.779A2.994 2.994 0 0 0 7 7.002a.5.5 0 0 0 0 .002c.003.782.368 1.482.904 2.035C6.856 9.097 6 9.937 6 10.999v2.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-2.5c0-.562.437-1 1-1h.5a.5.5 0 0 0 .5-.5v-.507a.5.5 0 0 0-.2-.4 1.999 1.999 0 0 1-.8-1.59V7c0-1.11.887-1.999 1.996-2A1.994 1.994 0 0 1 12 6.996v.002a2 2 0 0 1-.8 1.593.5.5 0 0 0-.2.4V9.5a.5.5 0 0 0 .5.5h.5c.563 0 1 .437 1 1v2.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V11c0-1.063-.856-1.903-1.904-1.961.537-.553.902-1.254.904-2.037A.5.5 0 0 0 13 7v-.006a.5.5 0 0 0 0-.002A3.006 3.006 0 0 0 9.996 4c-.388 0-.759.077-1.1.213a3.01 3.01 0 0 0-2.9-2.215z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/user-list.svg b/comm/mail/themes/shared/mail/icons/new/compact/user-list.svg
new file mode 100644
index 0000000000..1de4ec47aa
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/user-list.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M4 1.5A2.495 2.495 0 0 0 1.5 4v8c0 .82.5 2 2 2.5v-2.998C3.5 10 4 10 4.5 9.5V7.992a2.5 2.5 0 0 1-1-1.993 2.5 2.5 0 0 1 4.844-.869A2.5 2.5 0 0 1 10 4.5 2.5 2.5 0 0 1 12.5 7a2.5 2.5 0 0 1-1 1.992V10.5c.5 0 1 1 1 1.5v2.5c1-.5 2-1.68 2-2.5V4c0-1.385-1.115-2.5-2.5-2.5Z" fill="context-fill"/>
+ <path d="M4 1C2.347 1 1 2.346 1 4v8c0 .953.45 1.803 1.146 2.353l.004.004a.504.504 0 0 0 .096.072c.494.358 1.1.57 1.754.57h8a2.98 2.98 0 0 0 1.754-.57.5.5 0 0 0 .096-.072l.004-.004A2.995 2.995 0 0 0 15 12V4c0-1.654-1.347-3-3-3Zm0 1h8c1.117 0 2 .883 2 2v8.02a1.97 1.97 0 0 1-.988 1.706V11.5c0-.823-.678-1.5-1.5-1.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5c.285 0 .5.214.5.5V14H8v-2.5c0-.286.214-.5.5-.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5c-.822 0-1.5.677-1.5 1.5V14H3.992A.5.5 0 0 0 4 13.935V10.5c0-.286.214-.5.5-.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5C3.678 9 3 9.677 3 10.5v3.234a1.97 1.97 0 0 1-1-1.715V4c0-1.117.883-2 2-2Zm2 1C4.35 3 3 4.349 3 6c0 1.65 1.35 3 3 3 .178 0 .352-.017.521-.047a4 4 0 0 1-.388-.957A1.992 1.992 0 0 1 4 6c0-1.11.89-2 2-2 .39 0 .752.108 1.059.298a4 4 0 0 1 .779-.664A2.98 2.98 0 0 0 6 3Zm4 1C8.35 4 7 5.349 7 7c0 1.65 1.35 3 3 3s3-1.35 3-3c0-1.651-1.35-3-3-3zm0 1c1.11 0 2 .89 2 2 0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/user.svg b/comm/mail/themes/shared/mail/icons/new/compact/user.svg
new file mode 100644
index 0000000000..af4a1ee718
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/user.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M7.996 3.007A3.008 3.008 0 0 0 5 6.01a.5.5 0 0 0 0 .002c.003.782.368 1.483.904 2.035C4.856 8.105 4 8.947 4 10.008v2.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-2.5c0-.562.437-1 1-1h.5a.5.5 0 0 0 .5-.5v-.507a.5.5 0 0 0-.2-.4 1.999 1.999 0 0 1-.8-1.59v-.003c0-1.109.887-1.998 1.996-2A1.994 1.994 0 0 1 10 6.003v.002a2 2 0 0 1-.8 1.594.5.5 0 0 0-.2.4v.508a.5.5 0 0 0 .5.5h.5c.563 0 1 .438 1 1v2.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-2.5c0-1.062-.856-1.903-1.904-1.96.537-.554.902-1.255.904-2.038a.5.5 0 0 0 0-.002v-.006a.5.5 0 0 0 0-.002 3.006 3.006 0 0 0-3.004-2.992Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/compact/warning.svg b/comm/mail/themes/shared/mail/icons/new/compact/warning.svg
new file mode 100644
index 0000000000..2bc5c04ce6
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/compact/warning.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M7.5 1.5c-.653 0-1.222.453-1.5 1L.824 11.96C.5 12.5.502 12.611.5 13A1.5 1.5 0 0 0 2 14.5h11a1.5 1.5 0 0 0 1.5-1.5c0-.394 0-.5-.332-1.053L9 2.5c-.282-.553-.844-1-1.5-1Z" fill="context-fill"/>
+ <path d="M7.5 1c-.883 0-1.593.58-1.945 1.273l.006-.014-5.166 9.444c-.34.566-.393.908-.395 1.295A.5.5 0 0 0 0 13c0 1.098.901 2 2 2h11c1.099 0 2-.902 2-2 0-.394-.058-.734-.404-1.31l.011.017-5.168-9.448.006.014C9.091 1.578 8.383 1 7.5 1Zm0 1c.429 0 .845.316 1.055.726a.5.5 0 0 0 .006.014l5.168 9.447a.5.5 0 0 0 .011.018c.318.528.26.4.26.795 0 .558-.442 1-1 1H2a.993.993 0 0 1-1-.998V13c.001-.387-.055-.27.252-.782a.5.5 0 0 0 .01-.017L6.439 2.74a.5.5 0 0 0 .006-.014C6.649 2.326 7.077 2 7.5 2Zm0 3a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5Zm0 6a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/event-continue.svg b/comm/mail/themes/shared/mail/icons/new/event-continue.svg
new file mode 100644
index 0000000000..d52808a151
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/event-continue.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 11 11" height="11" width="11">
+ <path d="M5.5 1a.5.5 0 0 0-.035.006.5.5 0 0 0-.086.014.5.5 0 0 0-.065.021.5.5 0 0 0-.074.04.5.5 0 0 0-.058.04.5.5 0 0 0-.036.025l-3 3a.5.5 0 0 0 0 .708.5.5 0 0 0 .708 0L5 2.707v5.586L2.854 6.146A.5.5 0 0 0 2.5 6a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .036.025.5.5 0 0 0 .058.04.5.5 0 0 0 .074.04.5.5 0 0 0 .065.021.5.5 0 0 0 .086.014A.5.5 0 0 0 5.5 10a.5.5 0 0 0 .035-.006.5.5 0 0 0 .086-.014.5.5 0 0 0 .065-.021.5.5 0 0 0 .074-.04.5.5 0 0 0 .058-.04.5.5 0 0 0 .036-.025l3-3a.5.5 0 0 0 0-.708.5.5 0 0 0-.708 0L6 8.293V2.707l2.146 2.147a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.708L5.875 1.168A.5.5 0 0 0 5.5 1z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/event-end.svg b/comm/mail/themes/shared/mail/icons/new/event-end.svg
new file mode 100644
index 0000000000..b016d88934
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/event-end.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 11 11" height="11" width="11">
+ <path d="M5.5 1a.5.5 0 0 0-.5.5v5.793L2.854 5.146A.5.5 0 0 0 2.5 5a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .036.025.5.5 0 0 0 .058.04.5.5 0 0 0 .074.04.5.5 0 0 0 .065.021.5.5 0 0 0 .086.014A.5.5 0 0 0 5.5 9a.5.5 0 0 0 .035-.006.5.5 0 0 0 .086-.014.5.5 0 0 0 .065-.021.5.5 0 0 0 .074-.04.5.5 0 0 0 .058-.04.5.5 0 0 0 .036-.025l3-3a.5.5 0 0 0 0-.708.5.5 0 0 0-.708 0L6 7.293V1.5a.5.5 0 0 0-.5-.5zm0 8h-3a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h6a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5h-3z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/event-start.svg b/comm/mail/themes/shared/mail/icons/new/event-start.svg
new file mode 100644
index 0000000000..9bd0c0b5c9
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/event-start.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 11 11" height="11" width="11">
+ <path d="M2.5 1a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5H5v6.293L2.854 6.146A.5.5 0 0 0 2.5 6a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .036.025.5.5 0 0 0 .058.04.5.5 0 0 0 .074.04.5.5 0 0 0 .065.021.5.5 0 0 0 .086.014A.5.5 0 0 0 5.5 10a.5.5 0 0 0 .035-.006.5.5 0 0 0 .086-.014.5.5 0 0 0 .065-.021.5.5 0 0 0 .074-.04.5.5 0 0 0 .058-.04.5.5 0 0 0 .036-.025l3-3a.5.5 0 0 0 0-.708.5.5 0 0 0-.708 0L6 8.293V2h2.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5h-6z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/loading.svg b/comm/mail/themes/shared/mail/icons/new/loading.svg
new file mode 100644
index 0000000000..4020946bb4
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/loading.svg
@@ -0,0 +1,98 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="480" height="16" fill="context-stroke">
+ <svg>
+ <path d="M2.062 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="16">
+ <path d="M3.613 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="32">
+ <path d="M6.352 6.057c1.214 0 2.2 0.87 2.2 1.943 0 1.072 -0.986 1.943 -2.2 1.943 -1.214 0 -2.2 -0.87 -2.2 -1.943 0 -1.072 0.986 -1.943 2.2 -1.943z"/>
+ </svg>
+ <svg x="48">
+ <path d="M8.338 6.171c1.435 0 2.6 0.82 2.6 1.829 0 1.01 -1.165 1.829 -2.6 1.829s-2.6 -0.82 -2.6 -1.829c0 -1.01 1.165 -1.829 2.6 -1.829z"/>
+ </svg>
+ <svg x="64">
+ <path d="M9.762 6.286c1.655 0 3 0.768 3 1.714s-1.345 1.714 -3 1.714c-1.656 0 -3 -0.768 -3 -1.714s1.344 -1.714 3 -1.714z"/>
+ </svg>
+ <svg x="80">
+ <path d="M10.828 6.4c1.877 0 3.4 0.717 3.4 1.6 0 0.883 -1.523 1.6 -3.4 1.6 -1.876 0 -3.4 -0.717 -3.4 -1.6 0 -0.883 1.524 -1.6 3.4 -1.6z"/>
+ </svg>
+ <svg x="96">
+ <path d="M11.648 6.3c1.683 0 3.05 0.762 3.05 1.7s-1.367 1.7 -3.05 1.7c-1.683 0 -3.05 -0.762 -3.05 -1.7s1.367 -1.7 3.05 -1.7z"/>
+ </svg>
+ <svg x="112">
+ <path d="M12.287 6.2c1.49 0 2.7 0.807 2.7 1.8s-1.21 1.8 -2.7 1.8c-1.49 0 -2.7 -0.807 -2.7 -1.8s1.21 -1.8 2.7 -1.8z"/>
+ </svg>
+ <svg x="128">
+ <path d="M12.785 6.1c1.297 0 2.35 0.851 2.35 1.9s-1.053 1.9 -2.35 1.9c-1.297 0 -2.35 -0.851 -2.35 -1.9s1.053 -1.9 2.35 -1.9z"/>
+ </svg>
+ <svg x="144">
+ <path d="M13.17 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2c0 -1.104 0.897 -2 2 -2z"/>
+ </svg>
+ <svg x="160">
+ <path d="M13.463 6c1.103 0 2 0.896 2 2s-0.897 2 -2 2a2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="176">
+ <path d="M13.677 6c1.103 0 2 0.896 2 2s-0.897 2 -2 2a2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="192">
+ <path d="M13.823 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="208">
+ <path d="M13.911 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="224">
+ <path d="M13.947 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="240">
+ <path d="M13.937 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="256">
+ <path d="M13.27 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2c0 -1.104 0.897 -2 2 -2z"/>
+ </svg>
+ <svg x="272">
+ <path d="M10.65 6.057c1.182 0 2.142 0.87 2.142 1.943 0 1.072 -0.96 1.943 -2.143 1.943 -1.182 0 -2.142 -0.87 -2.142 -1.943 0 -1.072 0.96 -1.943 2.142 -1.943z"/>
+ </svg>
+ <svg x="288">
+ <path d="M7.911 6.171c1.34 0 2.429 0.82 2.429 1.829 0 1.01 -1.088 1.829 -2.429 1.829 -1.34 0 -2.428 -0.82 -2.428 -1.829 0 -1.01 1.088 -1.829 2.428 -1.829z"/>
+ </svg>
+ <svg x="304">
+ <path d="M6.18 6.286c1.498 0 2.715 0.768 2.715 1.714s-1.217 1.714 -2.715 1.714c-1.498 0 -2.714 -0.768 -2.714 -1.714s1.216 -1.714 2.714 -1.714z"/>
+ </svg>
+ <svg x="320">
+ <path d="M5.01 6.4c1.655 0 3 0.717 3 1.6 0 0.883 -1.345 1.6 -3 1.6 -1.656 0 -3 -0.717 -3 -1.6 0 -0.883 1.344 -1.6 3 -1.6z"/>
+ </svg>
+ <svg x="336">
+ <path d="M4.167 6.3c1.518 0 2.75 0.762 2.75 1.7s-1.232 1.7 -2.75 1.7 -2.75 -0.762 -2.75 -1.7 1.232 -1.7 2.75 -1.7z"/>
+ </svg>
+ <svg x="352">
+ <path d="M3.54 6.2c1.38 0 2.5 0.807 2.5 1.8s-1.12 1.8 -2.5 1.8 -2.5 -0.807 -2.5 -1.8 1.12 -1.8 2.5 -1.8z"/>
+ </svg>
+ <svg x="368">
+ <path d="M3.069 6.1c1.241 0 2.25 0.851 2.25 1.9s-1.009 1.9 -2.25 1.9c-1.242 0 -2.25 -0.851 -2.25 -1.9s1.008 -1.9 2.25 -1.9z"/>
+ </svg>
+ <svg x="384">
+ <path d="M2.714 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="400">
+ <path d="M2.452 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="416">
+ <path d="M2.266 6c1.103 0 2 0.896 2 2s-0.897 2 -2 2a2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="432">
+ <path d="M2.142 6c1.103 0 2 0.896 2 2s-0.897 2 -2 2a2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="448">
+ <path d="M2.071 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+ <svg x="464">
+ <path d="M2.046 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2c0 -1.104 0.897 -2 2 -2z"/>
+ </svg>
+ <svg x="480">
+ <path d="M2.062 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+ </svg>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/mail-sm.svg b/comm/mail/themes/shared/mail/icons/new/mail-sm.svg
new file mode 100644
index 0000000000..26a103fc84
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/mail-sm.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <path d="M3 2.5h6c.831 0 1.5.669 1.5 1.5v4c0 .83-.669 1.5-1.5 1.5H3c-.831 0-1.5-.67-1.5-1.5V4c0-.831.669-1.5 1.5-1.5Z" fill="context-fill"/>
+ <path d="M3 2c-1.1 0-2 .9-2 2v4c0 1.099.9 2 2 2h6c1.1 0 2-.901 2-2V4c0-1.1-.9-2-2-2Zm0 1h6c.563 0 1 .437 1 1v4c0 .562-.437 1-1 1H3c-.563 0-1-.438-1-1V4c0-.563.437-1 1-1Zm5.477 1a.5.5 0 0 0-.29.109L6 5.859l-2.188-1.75a.5.5 0 0 0-.367-.105.5.5 0 0 0-.336.183.5.5 0 0 0 .079.703l1.23.985-1.272 1.271a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l1.35-1.35.484.387a.5.5 0 0 0 .625 0l.484-.386 1.35 1.35a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.708L7.582 5.875l1.23-.985a.5.5 0 0 0 .079-.703A.5.5 0 0 0 8.477 4Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/nav-down-sm.svg b/comm/mail/themes/shared/mail/icons/new/nav-down-sm.svg
new file mode 100644
index 0000000000..523d59f17d
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/nav-down-sm.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <!-- Use both context-fill and context-stroke path to account for the styling coming from toolkit for those sections we can't override. -->
+ <path d="M1.166 3.128a.5.5 0 0 0-.037.706l4.5 5a.5.5 0 0 0 .742 0l4.5-5a.5.5 0 0 0-.037-.706.5.5 0 0 0-.705.038L6 7.753 1.871 3.166a.5.5 0 0 0-.705-.038Z" fill="context-fill transparent"/>
+ <path d="M1.166 3.128a.5.5 0 0 0-.037.706l4.5 5a.5.5 0 0 0 .742 0l4.5-5a.5.5 0 0 0-.037-.706.5.5 0 0 0-.705.038L6 7.753 1.871 3.166a.5.5 0 0 0-.705-.038Z" fill="context-stroke transparent"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/nav-left-sm.svg b/comm/mail/themes/shared/mail/icons/new/nav-left-sm.svg
new file mode 100644
index 0000000000..58b55d608b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/nav-left-sm.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <!-- Use both context-fill and context-stroke path to account for the styling coming from toolkit for those sections we can't override. -->
+ <path d="m8.166 1.128-5 4.5a.5.5 0 0 0 0 .743l5 4.5a.5.5 0 0 0 .705-.037.5.5 0 0 0-.037-.706L4.246 6l4.588-4.13a.5.5 0 0 0 .037-.704.5.5 0 0 0-.705-.038Z" fill="context-fill transparent"/>
+ <path d="m8.166 1.128-5 4.5a.5.5 0 0 0 0 .743l5 4.5a.5.5 0 0 0 .705-.037.5.5 0 0 0-.037-.706L4.246 6l4.588-4.13a.5.5 0 0 0 .037-.704.5.5 0 0 0-.705-.038Z" fill="context-stroke transparent"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/nav-right-sm.svg b/comm/mail/themes/shared/mail/icons/new/nav-right-sm.svg
new file mode 100644
index 0000000000..6549c5826d
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/nav-right-sm.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <!-- Use both context-fill and context-stroke path to account for the styling coming from toolkit for those sections we can't override. -->
+ <path d="M3.834 1.128a.5.5 0 0 0-.705.038.5.5 0 0 0 .037.705L7.754 6l-4.588 4.128a.5.5 0 0 0-.037.706.5.5 0 0 0 .705.037l5-4.5a.5.5 0 0 0 0-.743z" fill="context-fill transparent"/>
+ <path d="M3.834 1.128a.5.5 0 0 0-.705.038.5.5 0 0 0 .037.705L7.754 6l-4.588 4.128a.5.5 0 0 0-.037.706.5.5 0 0 0 .705.037l5-4.5a.5.5 0 0 0 0-.743z" fill="context-stroke transparent"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/nav-today.svg b/comm/mail/themes/shared/mail/icons/new/nav-today.svg
new file mode 100644
index 0000000000..1604ef4b55
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/nav-today.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <path d="M6 1C3.244 1 1 3.244 1 6c0 2.755 2.244 5 5 5s5-2.245 5-5c0-2.756-2.244-5-5-5zm0 1c2.215 0 4 1.784 4 4 0 2.215-1.785 4-4 4S2 8.215 2 6c0-2.216 1.785-4 4-4z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/nav-up-sm.svg b/comm/mail/themes/shared/mail/icons/new/nav-up-sm.svg
new file mode 100644
index 0000000000..a3ac411e84
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/nav-up-sm.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <!-- Use both context-fill and context-stroke path to account for the styling coming from toolkit for those sections we can't override. -->
+ <path d="M6 3a.5.5 0 0 0-.371.166l-4.5 5a.5.5 0 0 0 .037.705.5.5 0 0 0 .705-.037L6 4.246l4.129 4.588a.5.5 0 0 0 .705.037.5.5 0 0 0 .037-.705l-4.5-5A.5.5 0 0 0 6 3Z" fill="context-fill transparent"/>
+ <path d="M6 3a.5.5 0 0 0-.371.166l-4.5 5a.5.5 0 0 0 .037.705.5.5 0 0 0 .705-.037L6 4.246l4.129 4.588a.5.5 0 0 0 .705.037.5.5 0 0 0 .037-.705l-4.5-5A.5.5 0 0 0 6 3Z" fill="context-stroke transparent"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/add-circle.svg b/comm/mail/themes/shared/mail/icons/new/normal/add-circle.svg
new file mode 100644
index 0000000000..ee88865b27
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/add-circle.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20">
+ <path d="M17.5 9.5a8 8 0 0 1-8 8 8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8Z" stroke-opacity="0.2" stroke="context-stroke" fill="context-fill"/>
+ <path d="M9.5 5a.5.5 0 0 0-.5.5V9H5.5a.5.5 0 0 0 0 1H9v3.5a.5.5 0 0 0 1 0V10h3.5a.5.5 0 0 0 0-1H10V5.5a.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/add.svg b/comm/mail/themes/shared/mail/icons/new/normal/add.svg
new file mode 100644
index 0000000000..c7ff0dcf9e
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/add.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" width="20" height="20" fill-opacity="context-fill-opacity">
+ <path d="M10.5 4c-.277 0-.5.223-.5.5V9H5.5c-.277 0-.5.219-.5.49v.02c0 .271.223.49.5.49H10v4.5a.499.499 0 1 0 1 0V10h4.5c.277 0 .5-.219.5-.49v-.02a.494.494 0 0 0-.5-.49H11V4.5c0-.277-.223-.5-.5-.5z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/address-book.svg b/comm/mail/themes/shared/mail/icons/new/normal/address-book.svg
new file mode 100644
index 0000000000..f308e614db
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/address-book.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20">
+ <path d="M5.5 2h9c.831 0 1.5.669 1.5 1.5v13c0 .831-.669 1.5-1.5 1.5h-9c-.831 0-1.5-.669-1.5-1.5v-13C4 2.669 4.669 2 5.5 2Z" fill="context-fill"/>
+ <path d="M5.5 1a2.508 2.508 0 0 0-2.45 2H2.5a.499.499 0 1 0 0 1H3v2h-.5a.499.499 0 1 0 0 1H3v2h-.5a.499.499 0 1 0 0 1H3v2h-.5a.499.499 0 1 0 0 1H3v2h-.5a.499.499 0 1 0 0 1H3v.5C3 17.876 4.124 19 5.5 19h9c1.376 0 2.5-1.124 2.5-2.5v-13C17 2.124 15.876 1 14.5 1h-9zm0 1h9c.84 0 1.5.66 1.5 1.5v13c0 .84-.66 1.5-1.5 1.5h-9c-.84 0-1.5-.66-1.5-1.5V16h.5a.499.499 0 1 0 0-1H4v-2h.5a.499.499 0 1 0 0-1H4v-2h.5a.499.499 0 1 0 0-1H4V7h.5a.499.499 0 1 0 0-1H4V4h.5a.499.499 0 1 0 0-1h-.416c.202-.587.752-1 1.416-1zm4.496 3A3.008 3.008 0 0 0 7 8.002a.5.5 0 0 0 0 .002c.004.765.358 1.448.873 1.996H7.5c-.822 0-1.5.678-1.5 1.5v2a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-2c0-.286.214-.5.5-.5h1a.5.5 0 0 0 .5-.5v-.51a.5.5 0 0 0-.2-.4A1.998 1.998 0 0 1 8 8.002V8c0-1.109.887-1.998 1.996-2A1.994 1.994 0 0 1 12 7.996v.002a1.999 1.999 0 0 1-.8 1.592.5.5 0 0 0-.2.4v.51a.5.5 0 0 0 .5.5h1c.286 0 .5.214.5.5v2a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-2c0-.822-.678-1.5-1.5-1.5h-.373c.516-.549.87-1.233.873-1.998A.5.5 0 0 0 13 8v-.006a.5.5 0 0 0 0-.002A3.006 3.006 0 0 0 9.996 5z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/archive.svg b/comm/mail/themes/shared/mail/icons/new/normal/archive.svg
new file mode 100644
index 0000000000..a40b9f18a3
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/archive.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20" height="20" width="20">
+ <path d="M5.5 3A2.495 2.495 0 0 0 3 5.5v9C3 15.885 4.115 17 5.5 17h9c1.385 0 2.5-1.115 2.5-2.5v-9C17 4.115 15.885 3 14.5 3ZM14 5h.5c.277 0 .5.223.5.5V7h-1.473c0 1.657-1.87 3-3.527 3S6.479 8.657 6.479 7H5V5.5c0-.277.223-.5.5-.5H6Z" fill="context-fill"/>
+ <path d="M5.5 2C3.57 2 2 3.57 2 5.5v9C2 16.43 3.57 18 5.5 18h9c1.93 0 3.5-1.57 3.5-3.5v-9C18 3.57 16.43 2 14.5 2Zm0 1h9C15.894 3 17 4.106 17 5.5V7h-1V5.5c0-.822-.678-1.5-1.5-1.5h-9C4.678 4 4 4.678 4 5.5V7H3V5.5C3 4.106 4.106 3 5.5 3Zm0 2h9c.286 0 .5.214.5.5V7h-1.496a.5.5 0 0 0-.5.502c.003 1.15-1.327 2.514-3.004 2.514S6.993 8.652 6.996 7.502a.5.5 0 0 0-.5-.502H5V5.5c0-.286.214-.5.5-.5ZM3 8h3.115C6.41 9.632 8.01 11.016 10 11.016V12h1v-1h-.63c1.816-.158 3.239-1.47 3.515-3H17v6.5c0 1.394-1.106 2.5-2.5 2.5H10v-1H9v1H5.5A2.484 2.484 0 0 1 3 14.5Zm7 8h1v-1h-1zm0-1v-1H9v1zm0-1h1v-1h-1zm0-1v-1H9v1z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/calendar-invite.svg b/comm/mail/themes/shared/mail/icons/new/normal/calendar-invite.svg
new file mode 100644
index 0000000000..e178e1d08e
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/calendar-invite.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20" height="20" width="20">
+ <path d="M5.5 2.5c-1.394 0-3 1.606-3 3v1h15v-1c0-1.394-1.606-3-3-3zm.467 7c-.259 0-.467.223-.467.5v2c0 .277.208.5.467.5h2.066c.259 0 .467-.223.467-.5v-2c0-.277-.208-.5-.467-.5Zm6 2c-.259 0-.467.223-.467.5v2c0 .277.208.5.467.5h2.066c.259 0 .467-.223.467-.5v-2c0-.277-.208-.5-.467-.5z" fill="context-fill"/>
+ <path d="M5.5 2C3.57 2 2 3.57 2 5.5v9C2 16.43 3.57 18 5.5 18h9c1.93 0 3.5-1.57 3.5-3.5v-9C18 3.57 16.43 2 14.5 2Zm0 1h9C15.894 3 17 4.106 17 5.5V6h-3v-.5a.5.5 0 0 0-.5-.5.5.5 0 0 0-.5.5V6H7v-.5a.5.5 0 0 0-.5-.5.5.5 0 0 0-.5.5V6H3v-.5C3 4.106 4.106 3 5.5 3ZM3 7h3v.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V7h6v.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V7h3v7.5c0 1.393-1.106 2.5-2.5 2.5h-9A2.484 2.484 0 0 1 3 14.5Zm2.967 2C5.421 9 5 9.472 5 10v2c0 .527.42 1 .967 1h2.066c.546 0 .967-.473.967-1v-2c0-.528-.42-1-.967-1ZM10.5 9a.5.5 0 1 0 0 1h4a.5.5 0 1 0 0-1zM6 10h2v2H6Zm5.967 1c-.546 0-.967.472-.967 1v2c0 .527.42 1 .967 1h2.066c.546 0 .967-.473.967-1v-2c0-.528-.42-1-.967-1zM12 12h2v2h-2zm-6.5 2a.5.5 0 1 0 0 1h4a.5.5 0 1 0 0-1z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/calendar.svg b/comm/mail/themes/shared/mail/icons/new/normal/calendar.svg
new file mode 100644
index 0000000000..39da9f7a90
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/calendar.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20">
+ <path d="M5.5 2C3.57 2 2 3.57 2 5.5v9C2 16.43 3.57 18 5.5 18h9c1.93 0 3.5-1.57 3.5-3.5v-9C18 3.57 16.43 2 14.5 2h-9zm0 1h9C15.894 3 17 4.106 17 5.5V6h-3v-.5a.5.5 0 0 0-.5-.5.5.5 0 0 0-.5.5V6H7v-.5a.5.5 0 0 0-.5-.5.5.5 0 0 0-.5.5V6H3v-.5C3 4.106 4.106 3 5.5 3zM3 7h3v.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V7h6v.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V7h3v7.5c0 1.394-1.106 2.5-2.5 2.5h-9A2.484 2.484 0 0 1 3 14.5V7zm2.5 2a.5.5 0 1 0 0 1h1a.5.5 0 1 0 0-1h-1zm4 0a.5.5 0 1 0 0 1h1a.5.5 0 0 0 0-1h-1zm4 0a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1zm-8 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1zm4 0a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1zm4 0a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1zm-8 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1zm4 0a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1zm4 0a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z" fill="context-stroke"/>
+ <path d="M5.5 3A2.484 2.484 0 0 0 3 5.5V6h14v-.5C17 4.106 15.894 3 14.5 3Z" fill="context-fill"/>
+</svg>
+
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/chat.svg b/comm/mail/themes/shared/mail/icons/new/normal/chat.svg
new file mode 100644
index 0000000000..4966b39fc2
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/chat.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20">
+ <path d="M4.5 1C2.57 1 1 2.57 1 4.5v4C1 10.43 2.57 12 4.5 12H5v3.5a.5.5 0 0 0 .854.354L6.707 15h3.586l3.853 3.854A.5.5 0 0 0 15 18.5V15h.5c1.93 0 3.5-1.57 3.5-3.5v-4a3.503 3.503 0 0 0-3.033-3.467A3.503 3.503 0 0 0 12.5 1Zm0 1h8C13.894 2 15 3.106 15 4.5v4c0 1.394-1.106 2.5-2.5 2.5h-3a.5.5 0 0 0-.354.146L6 14.293V11.5a.5.5 0 0 0-.5-.5h-1A2.484 2.484 0 0 1 2 8.5v-4C2 3.106 3.106 2 4.5 2ZM16 5.049A2.48 2.48 0 0 1 18 7.5v4c0 1.394-1.106 2.5-2.5 2.5h-1a.5.5 0 0 0-.5.5v2.793l-3.146-3.147A.5.5 0 0 0 10.5 14H7.707l2-2H12.5c1.93 0 3.5-1.57 3.5-3.5ZM5.5 6a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm2 0a.5.5 0 1 0 0 1h2a.5.5 0 1 0 0-1zm4 0a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+ <path d="M16 5.049A2.48 2.48 0 0 1 18 7.5v4c0 1.394-1.106 2.5-2.5 2.5h-1a.5.5 0 0 0-.5.5v2.793l-3.146-3.147A.5.5 0 0 0 10.5 14H7.707l2-2H12.5c1.93 0 3.5-1.57 3.5-3.5Z" fill="context-fill"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/cloud-download.svg b/comm/mail/themes/shared/mail/icons/new/normal/cloud-download.svg
new file mode 100644
index 0000000000..b02e2252e2
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/cloud-download.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20" width="20" height="20">
+ <path d="M12.5 2.527A3.987 3.987 0 0 0 9.396 4 3.997 3.997 0 0 0 7.5 3.527a3.992 3.992 0 0 0-3.908 3.137A2.964 2.964 0 0 0 1.5 9.494v.067c0 1.643 1.338 2.966 3 2.966H9V10.5c0-.831.669-1.5 1.5-1.5s1.5.669 1.5 1.5v2.027h3.5c1.662 0 3-1.323 3-2.966v-.067a2.96 2.96 0 0 0-2-2.795v-.172c0-2.216-1.784-4-4-4z" fill="context-fill"/>
+ <path d="M12.5 2.027c-1.284 0-2.404.582-3.223 1.444-.554-.242-1.136-.444-1.777-.444-2.082 0-3.81 1.423-4.322 3.348C1.925 6.902 1 8.062 1 9.495v.066c0 1.915 1.573 3.466 3.5 3.466h4a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5h-4c-1.397 0-2.5-1.094-2.5-2.466v-.067a2.46 2.46 0 0 1 1.74-2.353.5.5 0 0 0 .34-.37A3.487 3.487 0 0 1 7.5 4.027c.604 0 1.168.15 1.66.414a.5.5 0 0 0 .625-.125A3.48 3.48 0 0 1 12.5 3.027c1.948 0 3.5 1.553 3.5 3.5V6.7a.5.5 0 0 0 .336.473A2.452 2.452 0 0 1 18 9.494v.067c0 1.372-1.103 2.466-2.5 2.466h-3a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h3c1.927 0 3.5-1.551 3.5-3.466v-.067c0-1.364-.855-2.463-2.012-3.027a4.495 4.495 0 0 0-4.488-4.44zM10.5 10a.5.5 0 0 0-.5.5v6.793l-3.146-3.147a.5.5 0 1 0-.708.708l4 4 .03.019c.03.026.064.048.1.066a.5.5 0 0 0 .225.06.5.5 0 0 0 .323-.126.438.438 0 0 0 .03-.02l4-4a.5.5 0 1 0-.708-.707L11 17.293V10.5a.5.5 0 0 0-.5-.5z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/collapse.svg b/comm/mail/themes/shared/mail/icons/new/normal/collapse.svg
new file mode 100644
index 0000000000..76055a11c5
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/collapse.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20">
+ <path d="M2.5 2a.5.5 0 0 0-.5.5v14a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-14a.5.5 0 0 0-.5-.5zm8 2a.5.5 0 0 0-.354.146l-5 5A.5.5 0 0 0 5 9.5a.5.5 0 0 0 .146.354l5 5a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.708L6.707 10H17.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H6.707l4.147-4.146a.5.5 0 0 0 0-.708A.5.5 0 0 0 10.5 4z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/download.svg b/comm/mail/themes/shared/mail/icons/new/normal/download.svg
new file mode 100644
index 0000000000..20e34d6056
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/download.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" width="20" height="20" fill-opacity="context-fill-opacity">
+ <path d="M10.5 3a.5.5 0 0 0-.5.5v7.793L6.854 8.146A.5.5 0 0 0 6.5 8a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .708l4 4A.5.5 0 0 0 10.5 13a.5.5 0 0 0 .354-.146l4-4a.5.5 0 0 0 0-.708.5.5 0 0 0-.708 0L11 11.293V3.5a.5.5 0 0 0-.5-.5zm-6 9a.5.5 0 0 0-.5.5V14c0 1.1.9 2 2 2h9c1.1 0 2-.9 2-2v-1.5a.5.5 0 0 0-.5-.5.5.5 0 0 0-.5.5V14c0 .563-.437 1-1 1H6c-.563 0-1-.437-1-1v-1.5a.5.5 0 0 0-.5-.5z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/draft.svg b/comm/mail/themes/shared/mail/icons/new/normal/draft.svg
new file mode 100644
index 0000000000..0814caa9bf
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/draft.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20" height="20" width="20">
+ <path d="M5.5 2h9c.831 0 1.5.669 1.5 1.5v13c0 .83-.669 1.5-1.5 1.5h-9c-.831 0-1.5-.67-1.5-1.5v-13C4 2.669 4.669 2 5.5 2Z" fill="context-fill"/>
+ <path d="M5.5 1A2.506 2.506 0 0 0 3 3.5v13C3 17.876 4.124 19 5.5 19h9c1.376 0 2.5-1.124 2.5-2.5v-13C17 2.124 15.876 1 14.5 1Zm0 1h9c.84 0 1.5.66 1.5 1.5v13c0 .84-.66 1.5-1.5 1.5h-9c-.84 0-1.5-.66-1.5-1.5v-13C4 2.66 4.66 2 5.5 2Zm1 3a.5.5 0 1 0 0 1h7a.5.5 0 1 0 0-1zm0 3a.5.5 0 1 0 0 1h7a.5.5 0 1 0 0-1zm0 3a.5.5 0 1 0 0 1h5a.5.5 0 1 0 0-1zm4 3a.5.5 0 1 0 0 1h3a.5.5 0 1 0 0-1z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/folder-filter.svg b/comm/mail/themes/shared/mail/icons/new/normal/folder-filter.svg
new file mode 100644
index 0000000000..46b46b45e0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/folder-filter.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20" height="20" width="20">
+ <path d="M3 3.5C2 3.5 1.5 4 1.5 5v9.5c0 1.108.892 2 2 2H11v-.857A4 4 0 0 1 14 9c2.21 0 4 1.5 4 3.5l.5.5V8.5c0-1.108-.892-2-2-2h-6l-2-3z" fill="context-fill"/>
+ <path d="M3 3c-.583 0-1.11.154-1.479.521C1.154 3.89 1 4.417 1 5v9.5C1 15.876 2.124 17 3.5 17h7a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5h-7c-.84 0-1.5-.66-1.5-1.5V7h3.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H2V5c0-.417.096-.64.229-.771C2.36 4.096 2.583 4 3 4h5.232l1.852 2.777A.5.5 0 0 0 10.5 7h6c.84 0 1.5.66 1.5 1.5v4a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-6C19 5.124 17.876 4 16.5 4h-7a.5.5 0 0 0-.059.012l-.525-.79A.5.5 0 0 0 8.5 3Zm7.102 2H16.5c.84 0 1.5.66 1.5 1.5v.006A2.482 2.482 0 0 0 16.5 6h-5.732ZM14 10c-1.65 0-3 1.35-3 3s1.35 3 3 3a2.98 2.98 0 0 0 1.736-.557l2.41 2.41a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.707l-2.41-2.41c.35-.49.556-1.09.556-1.736 0-1.65-1.35-3-3-3Zm0 1c1.11 0 2 .89 2 2 0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/folder-rss.svg b/comm/mail/themes/shared/mail/icons/new/normal/folder-rss.svg
new file mode 100644
index 0000000000..49e8085d7a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/folder-rss.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20" height="20" width="20">
+ <path d="M3 3.5C2 3.5 1.5 4 1.5 5v9.5c0 1.108.892 2 2 2H10V11c0-1.108.892-2 2-2h5c.6 0 1.134.263 1.5.678V8.5c0-1.108-.892-2-2-2h-6l-2-3zm10 11a1.5 1.5 0 0 0-1.5 1.5 1.5 1.5 0 0 0 1.5 1.5 1.5 1.5 0 0 0 1.5-1.5 1.5 1.5 0 0 0-1.5-1.5Z" fill="context-fill"/>
+ <path d="M3 3c-.583 0-1.11.154-1.479.521C1.154 3.89 1 4.417 1 5v9.5C1 15.876 2.124 17 3.5 17h6a.5.5 0 0 0 0-1h-6c-.84 0-1.5-.66-1.5-1.5V7h3.5a.5.5 0 1 0 0-1H2V5c0-.417.096-.64.229-.771C2.36 4.096 2.583 4 3 4h5.232l1.852 2.777A.5.5 0 0 0 10.5 7h6c.84 0 1.5.66 1.5 1.5v1.004a.5.5 0 0 0 1 0V6.5C19 5.124 17.876 4 16.5 4h-7a.5.5 0 0 0-.059.012l-.525-.79A.5.5 0 0 0 8.5 3Zm7.102 2H16.5c.84 0 1.5.66 1.5 1.5v.006A2.482 2.482 0 0 0 16.5 6h-5.732Zm1.398 5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5H13c2.767 0 5 2.233 5 5v1.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V16c0-3.308-2.692-6-6-6zm0 2a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5H13c1.674 0 3 1.261 3 3v1.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V16c0-2.261-1.808-4-4-4zm1.5 2c-1.099 0-2 .901-2 2s.901 2 2 2 2-.901 2-2-.901-2-2-2zm0 1c.558 0 1 .442 1 1s-.442 1-1 1-1-.442-1-1 .442-1 1-1z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/folder.svg b/comm/mail/themes/shared/mail/icons/new/normal/folder.svg
new file mode 100644
index 0000000000..8fbc7571ba
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/folder.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20" height="20" width="20">
+ <path d="M3 3.5h5.5l2 3h6c1.108 0 2 .892 2 2v6c0 1.108-.892 2-2 2h-13c-1.108 0-2-.892-2-2V5C1.5 4 2 3.5 3 3.5Z" fill="context-fill"/>
+ <path d="M3 3c-.583 0-1.11.153-1.479.521C1.154 3.889 1 4.416 1 5v9.5C1 15.876 2.124 17 3.5 17h13c1.376 0 2.5-1.124 2.5-2.5v-8C19 5.123 17.876 4 16.5 4h-7a.5.5 0 0 0-.059.011l-.525-.789A.5.5 0 0 0 8.5 3Zm0 1h5.232l1.852 2.777A.5.5 0 0 0 10.5 7h6c.84 0 1.5.66 1.5 1.5v6c0 .84-.66 1.5-1.5 1.5h-13c-.84 0-1.5-.66-1.5-1.5V7h3.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H2V5c0-.417.096-.64.229-.772C2.361 4.096 2.583 4 3 4Zm7.102 1H16.5c.84 0 1.5.66 1.5 1.5v.006A2.482 2.482 0 0 0 16.5 6h-5.732z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/globe-secure.svg b/comm/mail/themes/shared/mail/icons/new/normal/globe-secure.svg
new file mode 100644
index 0000000000..b64b797123
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/globe-secure.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20" height="20" width="20">
+ <path d="M9.5 1.5a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 .5-.035V14.5c0-.78.434-1.393 1-1.852V12.5c0-2.472 2.028-4.5 4.5-4.5.689 0 1.342.157 1.928.438A8 8 0 0 0 9.5 1.5Zm3 12.5c-.277 0-.5.223-.5.5v3c0 .277.223.5.5.5h6c.277 0 .5-.223.5-.5v-3c0-.277-.223-.5-.5-.5Z" fill="context-fill"/>
+ <path d="M9.5 1c-.432 0-.855.033-1.27.096l-.007-.012-.02.014a8.52 8.52 0 0 0-7.105 7.105l-.014.02.012.007a8.535 8.535 0 0 0 0 2.54l-.012.007.014.02a8.52 8.52 0 0 0 7.105 7.105l.02.014.007-.012a8.533 8.533 0 0 0 1.817.076A2.478 2.478 0 0 1 10 17.5v-.518a7.353 7.353 0 0 1-1.4-.037c-.238-.202-.687-.647-1.17-1.453a8.951 8.951 0 0 1-.795-1.744c.843.156 1.793.252 2.865.252.194 0 .38-.008.566-.014.104-.396.325-.739.606-1.033A15.91 15.91 0 0 1 9.5 13c-1.23 0-2.277-.13-3.168-.332A14.277 14.277 0 0 1 6 9.5c0-1.23.13-2.278.332-3.168C7.222 6.13 8.27 6 9.5 6c1.23 0 2.277.13 3.168.332.161.71.274 1.522.314 2.445.3-.204.625-.374.971-.502a15.02 15.02 0 0 0-.203-1.64c.704.238 1.28.518 1.742.795.4.239.707.469.944.67a4.477 4.477 0 0 1 1.525.64 8.728 8.728 0 0 0-.057-.51l.012-.007-.014-.02a8.52 8.52 0 0 0-7.105-7.105 24.73 24.73 0 0 1-.02-.014l-.007.012A8.533 8.533 0 0 0 9.5 1Zm0 1c.305 0 .605.02.9.055.238.202.687.647 1.17 1.453.278.462.557 1.039.795 1.744A15.706 15.706 0 0 0 9.5 5c-1.072 0-2.022.096-2.865.252a8.951 8.951 0 0 1 .795-1.744c.483-.806.932-1.25 1.17-1.453.295-.036.595-.055.9-.055Zm-2.572.451a7.864 7.864 0 0 0-.358.541c-.388.647-.771 1.48-1.062 2.52a10.25 10.25 0 0 0-2.516 1.06c-.198.12-.375.239-.54.358a7.502 7.502 0 0 1 4.475-4.48Zm5.144 0A7.502 7.502 0 0 1 16.55 6.93a7.891 7.891 0 0 0-.541-.358 10.269 10.269 0 0 0-2.516-1.06 10.237 10.237 0 0 0-1.062-2.52 7.865 7.865 0 0 0-.358-.54ZM5.25 6.635A15.71 15.71 0 0 0 5 9.5c0 1.073.094 2.024.25 2.867a8.923 8.923 0 0 1-1.742-.795c-.806-.483-1.25-.933-1.453-1.172a7.588 7.588 0 0 1 0-1.798c.202-.238.645-.688 1.453-1.172a8.947 8.947 0 0 1 1.742-.795ZM15.5 9c-1.93 0-3.5 1.57-3.5 3.5v.59c-.58.208-1 .763-1 1.41v3c0 .822.678 1.5 1.5 1.5h6c.822 0 1.5-.678 1.5-1.5v-3c0-.647-.42-1.202-1-1.41v-.59c0-1.93-1.57-3.5-3.5-3.5Zm0 1c1.394 0 2.5 1.106 2.5 2.5v.5h-5v-.5c0-1.394 1.106-2.5 2.5-2.5ZM2.453 12.074c.165.118.342.237.54.356.646.388 1.478.77 2.517 1.06.29 1.039.672 1.871 1.06 2.518.12.198.239.375.358.54a7.505 7.505 0 0 1-4.475-4.474ZM12.5 14h6c.286 0 .5.214.5.5v3c0 .286-.214.5-.5.5h-6a.488.488 0 0 1-.5-.5v-3c0-.286.214-.5.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/globe.svg b/comm/mail/themes/shared/mail/icons/new/normal/globe.svg
new file mode 100644
index 0000000000..1fc85ec75d
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/globe.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20" height="20" width="20">
+ <path d="M17.5 9.5a8 8 0 0 1-8 8 8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8z" fill="context-fill"/>
+ <path d="M9.5 1c-.432 0-.855.033-1.27.096l-.007-.012-.02.014a8.52 8.52 0 0 0-7.105 7.105l-.014.02.012.007a8.535 8.535 0 0 0 0 2.54l-.012.007.014.02a8.52 8.52 0 0 0 7.105 7.105l.02.014.007-.012a8.533 8.533 0 0 0 2.54 0l.007.012.02-.014a8.52 8.52 0 0 0 7.105-7.105l.014-.02-.012-.007a8.533 8.533 0 0 0 0-2.54l.012-.007-.014-.02a8.52 8.52 0 0 0-7.105-7.105 24.73 24.73 0 0 1-.02-.014l-.007.012A8.533 8.533 0 0 0 9.5 1Zm0 1c.305 0 .605.02.9.055.238.202.687.647 1.17 1.453.278.462.557 1.039.795 1.744A15.706 15.706 0 0 0 9.5 5c-1.072 0-2.022.096-2.865.252a8.951 8.951 0 0 1 .795-1.744c.483-.806.932-1.25 1.17-1.453.295-.036.595-.055.9-.055Zm-2.572.451a7.864 7.864 0 0 0-.358.541c-.388.647-.771 1.48-1.062 2.52a10.25 10.25 0 0 0-2.516 1.06c-.198.12-.375.239-.54.358a7.502 7.502 0 0 1 4.475-4.48Zm5.144 0A7.502 7.502 0 0 1 16.55 6.93a7.891 7.891 0 0 0-.541-.358 10.269 10.269 0 0 0-2.516-1.06 10.237 10.237 0 0 0-1.062-2.52 7.864 7.864 0 0 0-.358-.54ZM9.5 6c1.23 0 2.277.13 3.168.332.202.89.332 1.938.332 3.168 0 1.23-.13 2.277-.332 3.168-.89.202-1.938.332-3.168.332-1.23 0-2.277-.13-3.168-.332A14.277 14.277 0 0 1 6 9.5c0-1.23.13-2.278.332-3.168C7.222 6.13 8.27 6 9.5 6Zm-4.25.635A15.71 15.71 0 0 0 5 9.5c0 1.073.094 2.024.25 2.867a8.923 8.923 0 0 1-1.742-.795c-.806-.483-1.25-.933-1.453-1.172a7.588 7.588 0 0 1 0-1.798c.202-.238.645-.688 1.453-1.172a8.947 8.947 0 0 1 1.742-.795Zm8.5 0c.704.238 1.28.518 1.742.795.808.484 1.251.934 1.453 1.172.035.294.055.594.055.898 0 .305-.02.605-.055.9-.202.239-.647.689-1.453 1.172a8.923 8.923 0 0 1-1.742.795c.156-.843.25-1.794.25-2.867a15.71 15.71 0 0 0-.25-2.865Zm-11.297 5.44c.165.117.342.236.54.355.646.388 1.478.77 2.517 1.06.29 1.039.672 1.871 1.06 2.518.12.198.239.375.358.54a7.505 7.505 0 0 1-4.475-4.474Zm14.094 0a7.505 7.505 0 0 1-4.475 4.474c.12-.166.239-.343.358-.541.388-.647.77-1.48 1.06-2.518a10.253 10.253 0 0 0 2.518-1.06c.197-.119.374-.238.539-.356zm-9.912 1.673c.843.156 1.793.252 2.865.252 1.072 0 2.022-.096 2.865-.252a8.951 8.951 0 0 1-.795 1.744c-.483.806-.932 1.25-1.17 1.453a7.588 7.588 0 0 1-1.8 0c-.238-.202-.687-.647-1.17-1.453a8.951 8.951 0 0 1-.795-1.744Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/inbox.svg b/comm/mail/themes/shared/mail/icons/new/normal/inbox.svg
new file mode 100644
index 0000000000..8a2153c19a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/inbox.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20" height="20" width="20">
+ <path d="M5.5 3A2.495 2.495 0 0 0 3 5.5v9C3 15.885 4.115 17 5.5 17h9c1.385 0 2.5-1.115 2.5-2.5v-9C17 4.115 15.885 3 14.5 3Zm1 3h7c.277 0 .5.223.5.5V9h.5c.277 0 .5.223.5.5V11h-1.473c0 1.657-1.87 3-3.527 3s-3.521-1.343-3.521-3H5V9.5c0-.277.223-.5.5-.5H6V6.5c0-.277.223-.5.5-.5Z" fill="context-fill"/>
+ <path d="M5.5 2C3.57 2 2 3.57 2 5.5v9C2 16.43 3.57 18 5.5 18h9c1.93 0 3.5-1.57 3.5-3.5v-9C18 3.57 16.43 2 14.5 2Zm0 1h9C15.894 3 17 4.106 17 5.5V11h-1V9.5c0-.647-.42-1.202-1-1.41V6.5c0-.822-.678-1.5-1.5-1.5h-7C5.678 5 5 5.678 5 6.5v1.59c-.58.208-1 .763-1 1.41V11H3V5.5C3 4.106 4.106 3 5.5 3Zm1 3h7c.286 0 .5.214.5.5V8H6V6.5c0-.286.214-.5.5-.5Zm-1 3h9c.286 0 .5.214.5.5V11h-1.496a.5.5 0 0 0-.5.502c.003 1.15-1.327 2.514-3.004 2.514s-3.007-1.364-3.004-2.514a.5.5 0 0 0-.5-.502H5V9.5c0-.286.214-.5.5-.5ZM3 12h3.115C6.41 13.632 8.01 15.016 10 15.016c1.99 0 3.59-1.384 3.885-3.016H17v2.5c0 1.394-1.106 2.5-2.5 2.5h-9A2.484 2.484 0 0 1 3 14.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/link.svg b/comm/mail/themes/shared/mail/icons/new/normal/link.svg
new file mode 100644
index 0000000000..dd03bdf405
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/link.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20" height="20" width="20">
+ <path d="M14.488 1.001a2.559 2.559 0 0 0-1.814.751L9.751 4.676c-1 .999-1 2.629-.001 3.628l.62.619-1.448 1.449-.62-.62c-1-1-2.63-1-3.63 0l-2.921 2.922c-1 1-1 2.631-.001 3.63l1.949 1.948c1 .999 2.63.999 3.63 0l2.921-2.922c1-1 1-2.63 0-3.63l-.62-.62 1.449-1.449.62.62c.998.999 2.63 1 3.63 0l2.923-2.921c1-1 1-2.632 0-3.632l-1.949-1.947c-.5-.499-1.156-.75-1.815-.75Zm-.001.993c.399 0 .8.155 1.109.465l1.947 1.948c.62.62.62 1.593 0 2.214L14.62 9.544a1.55 1.55 0 0 1-2.214 0l-.62-.62 2.068-2.068a.5.5 0 0 0 0-.708.5.5 0 0 0-.352-.148.5.5 0 0 0-.355.148l-2.068 2.069-.622-.622a1.552 1.552 0 0 1-.002-2.215l2.924-2.923c.31-.31.709-.464 1.108-.464Zm-8 8c.399 0 .8.155 1.109.465l.618.62-2.068 2.068a.5.5 0 0 0 0 .708.5.5 0 0 0 .708 0l2.069-2.068.62.619c.62.62.621 1.597 0 2.218l-2.92 2.921c-.62.62-1.598.621-2.219.001l-1.948-1.948a1.556 1.556 0 0 1 .001-2.218L5.38 10.46a1.56 1.56 0 0 1 1.107-.465Z" fill="context-stroke"/>
+</svg>
+
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/mail-secure.svg b/comm/mail/themes/shared/mail/icons/new/normal/mail-secure.svg
new file mode 100644
index 0000000000..7fe4750e9a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/mail-secure.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20" height="20" width="20">
+ <path fill-opacity="1" d="M3.5 4C2.669 4 2 4.669 2 5.5v9c0 .831.669 1.5 1.5 1.5H10v-1.5c0-.78.434-1.393 1-1.852V12.5c0-2.472 2.028-4.5 4.5-4.5a4.46 4.46 0 0 1 2.5.766V5.5c0-.831-.669-1.5-1.5-1.5Zm9 10c-.277 0-.5.223-.5.5v3c0 .277.223.5.5.5h6c.277 0 .5-.223.5-.5v-3c0-.277-.223-.5-.5-.5Z" fill="context-fill"/>
+ <path d="M3.5 3A2.506 2.506 0 0 0 1 5.5v9C1 15.876 2.124 17 3.5 17H10v-1H3.5c-.84 0-1.5-.66-1.5-1.5v-9C2 4.66 2.66 4 3.5 4h13c.84 0 1.5.66 1.5 1.5v3.266c.377.254.715.563 1 .916V5.5C19 4.124 17.876 3 16.5 3Zm.977 3.002a.5.5 0 0 0-.346.162.5.5 0 0 0 .033.705l3.28 2.98-3.298 3.297a.5.5 0 0 0 0 .708.5.5 0 0 0 .708 0l3.33-3.33 1.48 1.345a.5.5 0 0 0 .672 0l.91-.828a4.536 4.536 0 0 1 3.207-2.916l1.383-1.256a.5.5 0 0 0 .033-.705.5.5 0 0 0-.705-.033L10 10.824 4.836 6.131a.5.5 0 0 0-.36-.129ZM15.5 9c-1.93 0-3.5 1.57-3.5 3.5v.59c-.58.208-1 .763-1 1.41v3c0 .822.678 1.5 1.5 1.5h6c.822 0 1.5-.678 1.5-1.5v-3c0-.647-.42-1.202-1-1.41v-.59c0-1.93-1.57-3.5-3.5-3.5Zm0 1c1.394 0 2.5 1.106 2.5 2.5v.5h-5v-.5c0-1.394 1.106-2.5 2.5-2.5Zm-3 4h6c.286 0 .5.214.5.5v3c0 .286-.214.5-.5.5h-6a.488.488 0 0 1-.5-.5v-3c0-.286.214-.5.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/mail.svg b/comm/mail/themes/shared/mail/icons/new/normal/mail.svg
new file mode 100644
index 0000000000..ddc100a26a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/mail.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20">
+ <path d="M3.5 3.5h13c1.108 0 2 .892 2 2v9c0 1.108-.892 2-2 2h-13c-1.108 0-2-.892-2-2v-9c0-1.108.892-2 2-2z" fill="context-fill"/>
+ <path d="M3.5 3A2.506 2.506 0 0 0 1 5.5v9C1 15.876 2.124 17 3.5 17h13c1.376 0 2.5-1.124 2.5-2.5v-9C19 4.123 17.876 3 16.5 3Zm0 1h13c.84 0 1.5.66 1.5 1.5v9c0 .84-.66 1.5-1.5 1.5h-13c-.84 0-1.5-.66-1.5-1.5v-9C2 4.66 2.66 4 3.5 4Zm.977 2.002a.5.5 0 0 0-.346.162.5.5 0 0 0 .033.705l3.28 2.98-3.298 3.297a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l3.33-3.33 1.48 1.346a.5.5 0 0 0 .672 0l1.48-1.346 3.33 3.33a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.707l-3.297-3.297 3.279-2.98a.5.5 0 0 0 .033-.705.5.5 0 0 0-.705-.033L10 10.824 4.836 6.131a.5.5 0 0 0-.36-.13z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/more.svg b/comm/mail/themes/shared/mail/icons/new/normal/more.svg
new file mode 100644
index 0000000000..6dc269cb3d
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/more.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" width="20" height="20" fill-opacity="context-fill-opacity">
+ <path d="M5 9a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm5 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm5 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/newsletter.svg b/comm/mail/themes/shared/mail/icons/new/normal/newsletter.svg
new file mode 100644
index 0000000000..bbc88dfbf7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/newsletter.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20" height="20" width="20">
+ <path d="M8 2c-1.1 0-2 .9-2 2v3H3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h2.445c.062.007.124.013.192.016C6.065 17.033 6.758 17 8 17h9c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2Zm0 1h9c.563 0 1 .437 1 1v11c0 .563-.437 1-1 1H8c-.766 0-1.069.006-1.414.01A.5.5 0 0 0 6.5 16h-.367c.125-.174.207-.25.347-.537.28-.574.52-1.372.52-2.44V4c0-.563.437-1 1-1Zm1 2c-.545 0-1 .455-1 1v3c0 .545.455 1 1 1h3c.545 0 1-.455 1-1V6c0-.545-.455-1-1-1Zm5.5 0a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5ZM9 6h3v3H9Zm5.5 1a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5ZM3 8h3v5.023c0 .921-.198 1.551-.418 2.002-.22.452-.448.689-.623.95L4.943 16H3c-.563 0-1-.437-1-1V9c0-.563.437-1 1-1Zm11.5 1a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm-6 2a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm0 2a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+ <path d="M3 8h3v5.023c0 .921-.198 1.551-.418 2.002-.22.452-.448.689-.623.95L4.943 16H3c-.563 0-1-.437-1-1V9c0-.563.437-1 1-1Z" fill="context-fill"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/outbox.svg b/comm/mail/themes/shared/mail/icons/new/normal/outbox.svg
new file mode 100644
index 0000000000..5ef8c6b366
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/outbox.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20" height="20" width="20">
+ <path d="M5.5 3A2.495 2.495 0 0 0 3 5.5v9C3 15.885 4.115 17 5.5 17h6.59l-1.455-.688C9.72 16.058 9 15.338 9 14.17c0-.11.01-.214.023-.316-1.335-.39-2.544-1.52-2.544-2.854H5V9.5c0-.277.223-.5.5-.5H6V6.5c0-.277.223-.5.5-.5h7c.277 0 .5.223.5.5V9h.5c.277 0 .5.223.5.5v.762l2-.787V5.5C17 4.115 15.885 3 14.5 3Zm5.135 13.313c.074.02.15.038.226.052l-.363-.117.137.064z" fill="context-fill"/>
+ <path d="M5.5 2C3.57 2 2 3.57 2 5.5v9C2 16.43 3.57 18 5.5 18h7.537l-.332-.709L12.09 17H5.5A2.484 2.484 0 0 1 3 14.5V12h3.115c.25 1.38 1.434 2.58 2.998 2.918a2.424 2.424 0 0 1-.09-1.063c-1.187-.391-2.03-1.438-2.027-2.353a.5.5 0 0 0-.5-.502H5V9.5c0-.286.214-.5.5-.5h9c.286 0 .5.214.5.5v.762l1-.395V9.5c0-.647-.42-1.202-1-1.41V6.5c0-.822-.678-1.5-1.5-1.5h-7C5.678 5 5 5.678 5 6.5v1.59c-.58.208-1 .763-1 1.41V11H3V5.5C3 4.106 4.106 3 5.5 3h9C15.894 3 17 4.106 17 5.5v3.975l.201-.08.004-.002c.23-.093.494-.2.795-.28V5.5C18 3.57 16.43 2 14.5 2Zm1 4h7c.286 0 .5.214.5.5V8H6V6.5c0-.286.214-.5.5-.5Zm12.334 4c-.47 0-.832.151-1.256.322l-6.596 2.594c-.542.168-.982.64-.982 1.254 0 .629.447 1.054.957 1.187l-.031-.013.12.039c-.03-.006-.059-.018-.089-.026l2.5 1.184 1.176 2.508c-.008-.028-.019-.054-.026-.082l.034.097-.008-.015c.07.23.196.438.377.61.203.19.489.341.824.341.629 0 1.041-.484 1.24-.924a.5.5 0 0 0 .012-.027l2.607-6.762a.5.5 0 0 0 .008-.025c.097-.297.299-.606.299-1.096 0-.638-.528-1.166-1.166-1.166Zm0 1c.098 0 .166.068.166.166 0 .175-.112.369-.246.78l-.002.005-2.59 6.713c-.11.244-.22.336-.328.336-.033 0-.08-.015-.137-.068a.472.472 0 0 1-.117-.194.5.5 0 0 0-.035-.097l-1.11-2.368 1.752-1.752a.5.5 0 0 0 0-.707.5.5 0 0 0-.353-.148.5.5 0 0 0-.355.148l-1.75 1.75-2.375-1.125a.5.5 0 0 0-.122-.039c-.073-.013-.232-.16-.232-.23 0-.102.117-.257.295-.305a.5.5 0 0 0 .055-.02l6.593-2.593a.5.5 0 0 0 .004-.002c.43-.173.622-.25.887-.25Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/overflow.svg b/comm/mail/themes/shared/mail/icons/new/normal/overflow.svg
new file mode 100644
index 0000000000..b35b9955b1
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/overflow.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20">
+ <path d="M4.5 4a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .708L8.793 9.5l-4.647 4.646a.5.5 0 0 0 0 .708.5.5 0 0 0 .708 0l5-5a.5.5 0 0 0 0-.708l-5-5A.5.5 0 0 0 4.5 4zm6 0a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .708L14.793 9.5l-4.647 4.646a.5.5 0 0 0 0 .708.5.5 0 0 0 .708 0l5-5a.5.5 0 0 0 0-.708l-5-5A.5.5 0 0 0 10.5 4z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/rss.svg b/comm/mail/themes/shared/mail/icons/new/normal/rss.svg
new file mode 100644
index 0000000000..ab5c7c902f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/rss.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20" height="20" width="20">
+ <path d="M4 2.5a1.5 1.5 0 1 0 0 3h1a9.5 9.5 0 0 1 9.422 8.5l.078 2a1.5 1.5 0 1 0 2.984-.221v-.002L17.428 14A12.5 12.5 0 0 0 5 2.5Zm0 5a1.5 1.5 0 1 0 0 3h1A4.5 4.5 0 0 1 9.373 14l.127 2a1.5 1.5 0 1 0 2.984-.221v-.002L12.428 14A7.5 7.5 0 0 0 5 7.5Zm1 5A2.5 2.5 0 0 0 2.5 15 2.5 2.5 0 0 0 5 17.5 2.5 2.5 0 0 0 7.5 15 2.5 2.5 0 0 0 5 12.5Z" fill="context-fill"/>
+ <path d="M4 2c-1.099 0-2 .9-2 2 0 1.098.901 2 2 2h1a8.994 8.994 0 0 1 8.924 8.05v.002L14 16c0 1.098.901 2 2 2 1.098 0 1.999-.9 2-1.999v-.002c0-.074-.007-.148-.016-.222a.5.5 0 0 0 0-.016l-.056-1.777a.5.5 0 0 0-.002-.024C17.386 7.223 11.761 2.017 5.002 2A.5.5 0 0 0 5 2Zm0 1h1a11.994 11.994 0 0 1 11.928 11.037l.056 1.748a.5.5 0 0 0 .006.066c.007.049.01.097.01.147A.5.5 0 0 0 17 16c0 .558-.442 1-1 1s-1-.442-1-1a.5.5 0 0 0 0-.02l-.078-2a.5.5 0 0 0-.002-.033A10.006 10.006 0 0 0 5.002 5 .5.5 0 0 0 5 5H4c-.558 0-1-.442-1-1 0-.559.442-1 1-1Zm0 4c-1.099 0-2 .9-2 2 0 1.098.901 2 2 2h1a3.993 3.993 0 0 1 3.879 3.103L9 16c0 1.098.901 2 2 2 1.098 0 1.999-.9 2-1.999v-.002c0-.074-.007-.148-.016-.222a.5.5 0 0 0 0-.016l-.056-1.777a.5.5 0 0 0-.004-.05A8.007 8.007 0 0 0 5 7Zm0 1h1a6.992 6.992 0 0 1 6.93 6.058l.054 1.727a.5.5 0 0 0 .006.066c.007.049.01.097.01.147A.5.5 0 0 0 12 16c0 .558-.442 1-1 1s-1-.442-1-1a.5.5 0 0 0-.002-.032l-.127-2a.5.5 0 0 0-.01-.08A5.005 5.005 0 0 0 5.002 10 .5.5 0 0 0 5 10H4c-.558 0-1-.442-1-1 0-.559.442-1 1-1Zm1 4c-1.65 0-3 1.349-3 3 0 1.65 1.35 3 3 3s3-1.35 3-3c0-1.651-1.35-3-3-3zm0 1c1.11 0 2 .889 2 2 0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.111.89-2 2-2z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/sent.svg b/comm/mail/themes/shared/mail/icons/new/normal/sent.svg
new file mode 100644
index 0000000000..dd16150659
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/sent.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20" height="20" width="20">
+ <path fill-rule="evenodd" d="M10.387 16.528c.073.544.558.972 1.11.972s.947-.432 1.178-.946L17.087 4.91c.175-.536.41-.858.41-1.41a1 1 0 0 0-1-1c-.552 0-.967.17-1.608.429L3.503 7.322c-.56.15-1 .631-1 1.184 0 .552.422 1.008.96 1.082L8.497 11.5Z" fill="context-fill"/>
+ <path fill-rule="evenodd" d="M16.496 2c-.655 0-1.155.207-1.795.465L3.322 6.855l.051-.015c-.754.202-1.37.847-1.37 1.666 0 .826.627 1.404 1.306 1.558l-.024-.01.084.026a.665.665 0 0 1-.06-.016l4.8 1.823 1.81 4.818c.088.32.263.612.515.85.267.253.635.445 1.062.445.813 0 1.359-.63 1.635-1.24a.5.5 0 0 0 .012-.028l4.412-11.644a.5.5 0 0 0 .008-.022c.151-.466.433-.872.433-1.566 0-.822-.677-1.5-1.5-1.5Zm0 1c.282 0 .5.218.5.5 0 .41-.187.65-.385 1.256l-4.396 11.598c-.187.41-.43.646-.719.646a.556.556 0 0 1-.377-.172.913.913 0 0 1-.246-.412.5.5 0 0 0-.018-.062l-1.777-4.727 2.774-2.773a.5.5 0 0 0 0-.708.5.5 0 0 0-.71 0l-2.77 2.772L3.64 9.121a.5.5 0 0 0-.086-.023c-.229-.044-.551-.338-.551-.592 0-.286.265-.604.629-.701a.5.5 0 0 0 .05-.016l11.385-4.393a.5.5 0 0 0 .008-.003c.643-.26.97-.393 1.42-.393Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/settings.svg b/comm/mail/themes/shared/mail/icons/new/normal/settings.svg
new file mode 100644
index 0000000000..4801da3d2b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/settings.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20">
+ <path d="M9.5 1.5c-.554 0-1 .446-1 1v1.191a6.5 6.5 0 0 0-3.21 1.852l-1.032-.594a.997.997 0 0 0-1.365.365l-.5.868a.997.997 0 0 0 .365 1.365l1.017.588A6.5 6.5 0 0 0 3.5 10a6.5 6.5 0 0 0 .273 1.86l-1.015.585a.997.997 0 0 0-.365 1.366l.5.865a.997.997 0 0 0 1.365.367l1.025-.592A6.5 6.5 0 0 0 8.5 16.31v1.183c0 .554.446 1 1 1h1c.554 0 1-.446 1-1V16.31a6.5 6.5 0 0 0 3.217-1.858l1.025.592a.997.997 0 0 0 1.365-.367l.5-.865a.997.997 0 0 0-.365-1.366l-1.015-.586A6.5 6.5 0 0 0 16.5 10a6.5 6.5 0 0 0-.273-1.867l1.015-.586a.997.997 0 0 0 .365-1.365l-.5-.868a.997.997 0 0 0-1.365-.365l-1.02.588a6.5 6.5 0 0 0-3.222-1.86V2.5c0-.554-.446-1-1-1zm.5 6a2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5A2.5 2.5 0 0 1 7.5 10 2.5 2.5 0 0 1 10 7.5Z" fill="context-fill"/>
+ <path d="M9.5 1C8.678 1 8 1.678 8 2.5v.857a6.95 6.95 0 0 0-2.75 1.586l-.742-.427a1.508 1.508 0 0 0-2.049.548l-.5.868a1.508 1.508 0 0 0 .549 2.048l.728.42C3.112 8.926 3.001 9.458 3 10c0 .54.11 1.068.234 1.592l-.726.42a1.508 1.508 0 0 0-.549 2.049l.5.865c.41.711 1.336.962 2.049.55l.736-.425A6.948 6.948 0 0 0 8 16.643v.85c0 .822.678 1.5 1.5 1.5h1c.822 0 1.5-.678 1.5-1.5v-.85a6.948 6.948 0 0 0 2.756-1.592l.736.426a1.51 1.51 0 0 0 2.049-.551l.5-.865a1.508 1.508 0 0 0-.549-2.05l-.726-.42c.123-.523.233-1.052.234-1.591 0-.542-.11-1.073-.234-1.6l.726-.42c.712-.41.96-1.337.549-2.048l-.5-.868a1.508 1.508 0 0 0-2.049-.548l-.73.421A6.946 6.946 0 0 0 12 3.345V2.5c0-.822-.678-1.5-1.5-1.5Zm0 1h1c.286 0 .5.214.5.5v1.178a.5.5 0 0 0 .385.486 6 6 0 0 1 2.974 1.717.5.5 0 0 0 .614.09l1.02-.588a.486.486 0 0 1 .68.181l.5.868a.486.486 0 0 1-.18.681l-1.016.586a.5.5 0 0 0-.229.576 6.007 6.007 0 0 1 0 3.442.5.5 0 0 0 .229.576l1.015.586a.486.486 0 0 1 .182.682l-.5.865a.487.487 0 0 1-.682.183l-1.025-.591a.5.5 0 0 0-.613.09 5.999 5.999 0 0 1-2.97 1.714.5.5 0 0 0-.384.487v1.183c0 .286-.214.5-.5.5h-1a.488.488 0 0 1-.5-.5V16.31a.5.5 0 0 0-.385-.487 5.999 5.999 0 0 1-2.969-1.715.5.5 0 0 0-.613-.09l-1.025.592a.487.487 0 0 1-.682-.183l-.5-.865a.486.486 0 0 1 .182-.682l1.015-.586a.5.5 0 0 0 .229-.576 5.993 5.993 0 0 1 .002-3.438.5.5 0 0 0-.229-.578l-1.017-.588a.486.486 0 0 1-.182-.681l.5-.868a.486.486 0 0 1 .682-.181l1.031.594a.5.5 0 0 0 .613-.09 5.996 5.996 0 0 1 2.963-1.71A.5.5 0 0 0 9 3.692V2.5c0-.286.214-.5.5-.5Zm.5 5c-1.65 0-3 1.35-3 3s1.35 3 3 3 3-1.35 3-3-1.35-3-3-3zm0 1c1.11 0 2 .89 2 2 0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/spam.svg b/comm/mail/themes/shared/mail/icons/new/normal/spam.svg
new file mode 100644
index 0000000000..b15e1534ea
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/spam.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20" height="20" width="20">
+ <path d="M8.5.5c11.91 4.927 8.427 16.652 3 18 1.5-2.598 0-5-2-5s-3.5 2.402-2 5c-4-.5-8-8-2-14C5 8 7 9 8 8.5c2-1 1.906-5.263.5-8z" fill="context-fill"/>
+ <path d="M8.691.037a.5.5 0 0 0-.636.692c.656 1.278 1.02 2.967.972 4.406-.047 1.439-.507 2.546-1.25 2.918-.261.13-.782.098-1.218-.387-.437-.485-.8-1.445-.565-3.096a.5.5 0 0 0-.848-.424C2.034 7.26 1.473 10.85 2.268 13.697c.794 2.848 2.885 5.013 5.17 5.3a.5.5 0 0 0 .496-.747c-.681-1.179-.658-2.242-.295-3.01C8.002 14.472 8.7 14 9.5 14s1.498.472 1.861 1.24.386 1.831-.295 3.01a.5.5 0 0 0 .555.734c6.037-1.5 9.27-13.9-2.93-18.947Zm.717 1.545c9.382 4.699 7.029 13.754 2.91 15.955.27-.993.31-1.955-.054-2.724C11.752 13.73 10.7 13 9.5 13c-1.2 0-2.252.73-2.764 1.813-.36.761-.325 1.712-.064 2.695-1.436-.621-2.858-1.995-3.44-4.08-.621-2.228-.246-4.939 1.803-7.53.074 1.037.307 1.91.781 2.436.689.765 1.668.983 2.407.613 1.257-.628 1.75-2.152 1.804-3.779.04-1.18-.224-2.417-.619-3.586Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/subtract-circle.svg b/comm/mail/themes/shared/mail/icons/new/normal/subtract-circle.svg
new file mode 100644
index 0000000000..fbc0ecd1dc
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/subtract-circle.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20">
+ <path d="M17.5 9.5a8 8 0 0 1-8 8 8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8Z" stroke-opacity="0.2" stroke="context-stroke" fill="context-fill"/>
+ <path d="M5.5 9a.5.5 0 0 0 0 1h8a.5.5 0 0 0 0-1z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/tasks.svg b/comm/mail/themes/shared/mail/icons/new/normal/tasks.svg
new file mode 100644
index 0000000000..772133faaf
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/tasks.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20">
+ <path d="M5.5 2C4.66 2 4 2.66 4 3.5v13c0 .84.66 1.5 1.5 1.5h9c.84 0 1.5-.66 1.5-1.5v-13c0-.84-.66-1.5-1.5-1.5h-1.588c-.208.58-.765 1-1.412 1h-3c-.647 0-1.204-.42-1.412-1Z" fill="context-fill"/>
+ <path d="M8.5 0c-.647 0-1.204.42-1.412 1H5.5A2.506 2.506 0 0 0 3 3.5v13C3 17.876 4.124 19 5.5 19h9c1.376 0 2.5-1.124 2.5-2.5v-13C17 2.124 15.876 1 14.5 1h-1.588c-.208-.58-.765-1-1.412-1Zm0 1h3c.286 0 .5.214.5.5 0 .286-.214.5-.5.5h-3a.488.488 0 0 1-.5-.5c0-.286.214-.5.5-.5Zm-3 1h1.588c.208.58.765 1 1.412 1h3c.647 0 1.204-.42 1.412-1H14.5c.84 0 1.5.66 1.5 1.5v13c0 .84-.66 1.5-1.5 1.5h-9c-.84 0-1.5-.66-1.5-1.5v-13C4 2.66 4.66 2 5.5 2Zm7.902 5.01a.5.5 0 0 0-.318.213l-3.662 5.492-2.568-2.569a.5.5 0 0 0-.708 0 .5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .77-.077l4-6a.5.5 0 0 0-.139-.693.5.5 0 0 0-.375-.074Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/template.svg b/comm/mail/themes/shared/mail/icons/new/normal/template.svg
new file mode 100644
index 0000000000..0d2b3ccf7a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/template.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20" height="20" width="20">
+ <path d="M5.5 2h9c.831 0 1.5.669 1.5 1.5v13c0 .83-.669 1.5-1.5 1.5h-9c-.831 0-1.5-.67-1.5-1.5v-13C4 2.669 4.669 2 5.5 2Z" fill="context-fill"/>
+ <path d="M5.5 1A2.506 2.506 0 0 0 3 3.5v13C3 17.876 4.124 19 5.5 19h9c1.376 0 2.5-1.124 2.5-2.5v-13C17 2.124 15.876 1 14.5 1Zm0 1h9c.84 0 1.5.66 1.5 1.5v13c0 .84-.66 1.5-1.5 1.5h-9c-.84 0-1.5-.66-1.5-1.5v-13C4 2.66 4.66 2 5.5 2ZM10 4a.5.5 0 0 0-.5.5v.563A2.011 2.011 0 0 0 8 7c0 .705.372 1.327.928 1.684L7.98 12H6.5a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5h1.195l-.675 2.363a.5.5 0 0 0 .343.617.5.5 0 0 0 .617-.343L8.734 13h2.532l.754 2.637a.5.5 0 0 0 .617.343.5.5 0 0 0 .343-.617L12.305 13H13.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5h-1.48l-.948-3.316C11.628 8.327 12 7.704 12 7c0-.926-.64-1.714-1.5-1.938V4.5A.5.5 0 0 0 10 4Zm0 2c.558 0 1 .442 1 1s-.442 1-1 1-1-.442-1-1 .442-1 1-1Zm-.123 2.996a1.97 1.97 0 0 0 .246 0L10.98 12H9.02Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/normal/trash.svg b/comm/mail/themes/shared/mail/icons/new/normal/trash.svg
new file mode 100644
index 0000000000..a82f19a871
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/normal/trash.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 20 20" height="20" width="20">
+ <path d="M4.5 3C3.669 3 3 3.669 3 4.5V6h14V4.5c0-.831-.669-1.5-1.5-1.5ZM4 7v9.5c0 .831.669 1.5 1.5 1.5h9c.831 0 1.5-.669 1.5-1.5V7Z" fill="context-fill"/>
+ <path d="M8 1c-.545 0-1 .455-1 1H4.5A2.506 2.506 0 0 0 2 4.5V6c0 .545.455 1 1 1v9.5C3 17.876 4.124 19 5.5 19h9c1.376 0 2.5-1.124 2.5-2.5V7c.545 0 1-.455 1-1V4.5C18 3.124 16.876 2 15.5 2H13c0-.545-.455-1-1-1ZM4.5 3h11c.84 0 1.5.66 1.5 1.5V6H3V4.5C3 3.66 3.66 3 4.5 3ZM4 7h12v9.5c0 .84-.66 1.5-1.5 1.5h-9c-.84 0-1.5-.66-1.5-1.5Zm2.5 2c-.277 0-.5.223-.5.5v6a.5.5 0 1 0 1 0v-6c0-.277-.223-.5-.5-.5Zm2 0c-.277 0-.5.223-.5.5v6a.5.5 0 1 0 1 0v-6c0-.277-.223-.5-.5-.5Zm3 0c-.277 0-.5.223-.5.5v6a.5.5 0 1 0 1 0v-6c0-.277-.223-.5-.5-.5Zm2 0c-.277 0-.5.223-.5.5v6a.5.5 0 1 0 1 0v-6c0-.277-.223-.5-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/notify.svg b/comm/mail/themes/shared/mail/icons/new/notify.svg
new file mode 100644
index 0000000000..04b0e3901b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/notify.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path d="M8.023 3.5C7.504 3.5 7.323 4.836 7 6c-1.05-.594-1.5-.5-1.5-.5s-.094.45.5 1.5c-1.163.323-2.5.504-2.5 1.023 0 .52 1.337.654 2.5.977-.594 1.049-.5 1.5-.5 1.5s.45.094 1.5-.5c.323 1.163.504 2.5 1.023 2.5.52 0 .654-1.337.977-2.5 1.05.594 1.5.5 1.5.5s.094-.451-.5-1.5c1.163-.323 2.72-.317 2.72-.836 0-.52-1.557-.841-2.72-1.164.594-1.05.5-1.5.5-1.5s-.45-.094-1.5.5c-.323-1.164-.457-2.5-.977-2.5Z" fill="context-fill"/>
+ <path d="M8.023 3c-.344 0-.607.235-.75.45-.142.216-.23.453-.312.714-.112.355-.206.763-.303 1.16-.238-.098-.534-.253-.699-.287a1.909 1.909 0 0 0-.37-.043c-.092-.001-.19.015-.19.015a.5.5 0 0 0-.39.389s-.016.1-.015.193c0 .094.011.215.043.367.034.166.19.461.287.7-.396.097-.804.19-1.16.302-.26.082-.498.17-.713.313-.215.143-.451.406-.451.75s.243.612.46.75c.219.138.454.218.714.293.352.102.755.19 1.146.281-.096.236-.249.53-.283.694a1.9 1.9 0 0 0-.043.369c0 .093.016.191.016.191a.5.5 0 0 0 .388.389s.099.016.192.015c.093 0 .217-.01.369-.043.165-.034.46-.19.7-.287.096.397.19.804.302 1.16.082.261.17.498.312.713.143.216.406.451.75.451.345 0 .61-.24.748-.458.138-.218.22-.455.295-.715.103-.353.19-.755.282-1.147.235.096.53.25.693.283.152.032.276.043.37.043.092.001.19-.015.19-.015a.5.5 0 0 0 .39-.389s.016-.098.015-.191a1.9 1.9 0 0 0-.043-.37c-.033-.157-.184-.442-.274-.665.404-.078.817-.154 1.204-.229.283-.055.538-.113.779-.227.12-.056.242-.127.351-.25a.799.799 0 0 0 .198-.505c0-.38-.26-.624-.487-.774a3.434 3.434 0 0 0-.773-.353c-.405-.141-.854-.253-1.29-.368.101-.243.257-.543.292-.71.032-.153.042-.274.043-.368 0-.093-.016-.193-.016-.193a.5.5 0 0 0-.388-.389s-.099-.016-.192-.015a1.82 1.82 0 0 0-.369.043c-.164.034-.458.187-.693.283-.092-.391-.18-.792-.282-1.145a2.716 2.716 0 0 0-.295-.714C8.634 3.243 8.368 3 8.023 3Zm-.007 1.222c.03.079.058.12.09.23.126.44.242 1.07.412 1.682a.5.5 0 0 0 .728.301c.267-.151.373-.163.547-.228-.065.173-.077.28-.229.546a.5.5 0 0 0 .303.729c.596.165 1.27.326 1.766.498.126.044.186.082.281.125-.08.02-.114.04-.213.059-.503.097-1.196.176-1.834.353a.5.5 0 0 0-.303.729c.152.267.164.373.229.547-.174-.066-.28-.078-.547-.229a.5.5 0 0 0-.728.303c-.17.612-.286 1.24-.413 1.68-.031.11-.058.151-.09.23-.034-.08-.063-.126-.099-.24-.137-.438-.265-1.064-.434-1.67a.5.5 0 0 0-.728-.303c-.267.151-.373.163-.547.229.065-.174.077-.28.229-.547a.5.5 0 0 0-.303-.729c-.612-.17-1.241-.285-1.68-.412-.11-.032-.151-.059-.23-.09.08-.034.126-.063.24-.1.437-.137 1.064-.265 1.67-.433a.5.5 0 0 0 .303-.728c-.152-.267-.164-.374-.229-.547.174.065.28.077.547.228a.5.5 0 0 0 .728-.3c.169-.607.297-1.235.434-1.673.036-.114.065-.16.1-.24Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/recurrence-exception.svg b/comm/mail/themes/shared/mail/icons/new/recurrence-exception.svg
new file mode 100644
index 0000000000..308a3ad823
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/recurrence-exception.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <path d="M10.5 1a.5.5 0 0 0-.354.146l-9 9a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l9-9a.5.5 0 0 0 0-.707A.5.5 0 0 0 10.5 1zM3 2c-1.1 0-2 .9-2 2v4c0 .26.051.508.143.736L2 7.879v-3.88c0-.562.437-1 1-1h3.879l1-1H3zm7.857 1.263L10 4.121V8c0 .562-.437 1-1 1H7.707l1.147-1.147a.5.5 0 0 0 0-.707.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .707l2 2a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.707L7.707 10H9c1.1 0 2-.901 2-2V4c0-.26-.051-.508-.143-.737z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/recurrence.svg b/comm/mail/themes/shared/mail/icons/new/recurrence.svg
new file mode 100644
index 0000000000..d1d0d0ff6c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/recurrence.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <path d="M3 2c-1.1 0-2 .9-2 2v4c0 1.099.9 2 2 2h.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H3c-.563 0-1-.438-1-1V4c0-.563.437-1 1-1h6c.563 0 1 .437 1 1v4c0 .562-.437 1-1 1H7.707l1.147-1.147a.5.5 0 0 0 0-.707.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .707l2 2a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.707L7.707 10H9c1.1 0 2-.901 2-2V4c0-1.1-.9-2-2-2H3z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/spam-sm.svg b/comm/mail/themes/shared/mail/icons/new/spam-sm.svg
new file mode 100644
index 0000000000..9b444c8eb0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/spam-sm.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <path d="M5 5.5c-1.5 0-1.5-2-1.5-2-.592.639-1 2-1 3.5 0 2 1.128 2.868 2 3.5 0-1 .5-2 1.5-2s1.5 1 1.5 2c.872-.632 2-2 2-4.5s-2-4.5-4-4.5c1.34 1.538 1.5 4-.5 4z" fill="context-fill"/>
+ <path d="M5.5 1a.5.5 0 0 0-.377.828c.59.677.914 1.59.88 2.222-.016.316-.11.545-.253.694C5.607 4.892 5.397 5 5 5c-.264 0-.407-.072-.535-.186a1.247 1.247 0 0 1-.309-.49C4.007 3.926 4 3.5 4 3.5a.5.5 0 0 0-.867-.34C2.378 3.974 2 5.409 2 7c0 2.188 1.325 3.265 2.207 3.904A.5.5 0 0 0 5 10.5c0-.417.112-.83.291-1.098C5.47 9.134 5.667 9 6 9c.333 0 .53.134.709.402.179.268.291.68.291 1.098a.5.5 0 0 0 .793.404C8.777 10.19 10 8.65 10 6c0-2.767-2.167-5-4.5-5Zm1.037 1.257C7.845 2.794 9 4.23 9 6c0 1.838-.64 2.829-1.28 3.498-.072-.216-.053-.461-.179-.65C7.22 8.366 6.667 8 6 8c-.667 0-1.22.366-1.541.847-.147.22-.136.502-.211.756C3.594 9.063 3 8.407 3 7c0-.807.154-1.519.357-2.114.111.234.22.475.444.674.293.26.713.44 1.199.44.603 0 1.123-.202 1.47-.563.348-.36.506-.842.532-1.334.032-.607-.168-1.237-.465-1.846Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/star-sm.svg b/comm/mail/themes/shared/mail/icons/new/star-sm.svg
new file mode 100644
index 0000000000..9a7e1bd1a0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/star-sm.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <path d="M6 1.5a.602.602 0 0 0-.546.345L4.267 4.269l-2.268.238a.6.6 0 0 0-.336 1.021l1.578 1.504-.733 2.751a.602.602 0 0 0 .834.67L6 9.36l2.633 1.093a.602.602 0 0 0 .834-.67l-.708-2.75 1.579-1.505a.6.6 0 0 0-.337-1.021l-2.268-.238-1.187-2.424A.602.602 0 0 0 6 1.5Z" fill="context-fill"/>
+ <path d="M6 1c-.426 0-.817.247-.998.632L3.939 3.8l-1.992.21a.5.5 0 0 0-.02.001c-.867.126-1.24 1.258-.615 1.873a.5.5 0 0 0 .006.006l1.364 1.3-.657 2.464a.5.5 0 0 0-.007.03c-.175.848.735 1.576 1.527 1.226L6 9.9l2.432 1.01c.79.348 1.7-.38 1.525-1.227a.5.5 0 0 0-.006-.025l-.635-2.467 1.366-1.3a.5.5 0 0 0 .006-.007c.625-.616.253-1.747-.616-1.873a.5.5 0 0 0-.02-.002L8.061 3.8 6.998 1.632A1.105 1.105 0 0 0 6 1Zm0 1c.041 0 .077.022.094.058a.5.5 0 0 0 .002.008L7.283 4.49a.5.5 0 0 0 .399.277l2.248.235c.116.016.139.089.056.17L8.414 6.67a.5.5 0 0 0-.139.488l.702 2.726c.022.109-.037.158-.141.112a.5.5 0 0 0-.012-.004L6.191 8.898a.5.5 0 0 0-.38 0L3.152 9.99a.5.5 0 0 0-.011.006c-.104.046-.165-.003-.143-.111l.727-2.723a.5.5 0 0 0-.14-.492L2.014 5.172c-.083-.081-.06-.153.056-.17l2.248-.235a.5.5 0 0 0 .399-.277l1.187-2.424a.5.5 0 0 0 .002-.008A.102.102 0 0 1 6 2Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/status-away-sm.svg b/comm/mail/themes/shared/mail/icons/new/status-away-sm.svg
new file mode 100644
index 0000000000..127dcaadde
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/status-away-sm.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 10 10" height="10" width="10">
+ <path fill="#FF555F" d="M5 .5A4.5 4.5 0 0 0 .5 5 4.5 4.5 0 0 0 5 9.5 4.5 4.5 0 0 0 9.5 5 4.5 4.5 0 0 0 5 .5ZM5.5 2c.667 0 1.275.318 1.729.771C7.682 3.225 8 3.833 8 4.5a.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5c0-.334-.182-.725-.479-1.022C6.225 3.182 5.833 3 5.5 3a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5Z"/>
+ <path fill="#FF0039" d="M5 0C2.244 0 0 2.244 0 5c0 2.755 2.244 5 5 5s5-2.245 5-5c0-2.756-2.244-5-5-5Zm0 1c2.215 0 4 1.784 4 4 0 2.215-1.785 4-4 4S1 7.215 1 5c0-2.216 1.785-4 4-4Z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/status-away.svg b/comm/mail/themes/shared/mail/icons/new/status-away.svg
new file mode 100644
index 0000000000..53d5fe7548
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/status-away.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path fill="#FF555F" d="M8 .5A7.5 7.5 0 0 0 .5 8 7.5 7.5 0 0 0 8 15.5 7.5 7.5 0 0 0 15.5 8 7.5 7.5 0 0 0 8 .5ZM6.5 2a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5Zm2 0c1.417 0 2.775.693 3.791 1.709S14 6.083 14 7.499a.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5c0-1.083-.557-2.224-1.416-3.083C10.725 3.556 9.584 3 8.5 3a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5Z"/>
+ <path fill="#FF0039" d="M8 0C3.588 0 0 3.587 0 8c0 4.412 3.588 8 8 8s8-3.588 8-8c0-4.413-3.588-8-8-8Zm0 1c3.872 0 7 3.128 7 7 0 3.871-3.128 7-7 7s-7-3.129-7-7c0-3.872 3.128-7 7-7Z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/status-idle-sm.svg b/comm/mail/themes/shared/mail/icons/new/status-idle-sm.svg
new file mode 100644
index 0000000000..541935c950
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/status-idle-sm.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 10 10" height="10" width="10">
+ <path fill="#ffe900" d="M5 .5A4.5 4.5 0 0 0 .5 5 4.5 4.5 0 0 0 5 9.5 4.5 4.5 0 0 0 9.5 5 4.5 4.5 0 0 0 5 .5ZM5.5 2c.667 0 1.275.318 1.729.771C7.682 3.225 8 3.833 8 4.5a.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5c0-.334-.182-.725-.479-1.022C6.225 3.182 5.833 3 5.5 3a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5Z"/>
+ <path fill="#d7b600" d="M5 0C2.244 0 0 2.244 0 5c0 2.755 2.244 5 5 5s5-2.245 5-5c0-2.756-2.244-5-5-5Zm0 1c2.215 0 4 1.784 4 4 0 2.215-1.785 4-4 4S1 7.215 1 5c0-2.216 1.785-4 4-4Z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/status-idle.svg b/comm/mail/themes/shared/mail/icons/new/status-idle.svg
new file mode 100644
index 0000000000..7bfe8f5788
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/status-idle.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path fill="#ffe900" d="M8 .5A7.5 7.5 0 0 0 .5 8 7.5 7.5 0 0 0 8 15.5 7.5 7.5 0 0 0 15.5 8 7.5 7.5 0 0 0 8 .5ZM6.5 2a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5Zm2 0c1.417 0 2.775.693 3.791 1.709S14 6.083 14 7.499a.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5c0-1.083-.557-2.224-1.416-3.083C10.725 3.556 9.584 3 8.5 3a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5Z"/>
+ <path fill="#d7b600" d="M8 0C3.588 0 0 3.587 0 8c0 4.412 3.588 8 8 8s8-3.588 8-8c0-4.413-3.588-8-8-8Zm0 1c3.872 0 7 3.128 7 7 0 3.871-3.128 7-7 7s-7-3.129-7-7c0-3.872 3.128-7 7-7Z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/status-offline-sm.svg b/comm/mail/themes/shared/mail/icons/new/status-offline-sm.svg
new file mode 100644
index 0000000000..86e5de067a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/status-offline-sm.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 10 10" height="10" width="10">
+ <path fill="#8a8ca0" d="M5 .5A4.5 4.5 0 0 0 .5 5 4.5 4.5 0 0 0 5 9.5 4.5 4.5 0 0 0 9.5 5 4.5 4.5 0 0 0 5 .5ZM5.5 2c.667 0 1.275.318 1.729.771C7.682 3.225 8 3.833 8 4.5a.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5c0-.334-.182-.725-.479-1.022C6.225 3.182 5.833 3 5.5 3a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5Z"/>
+ <path fill="#575a77" d="M5 0C2.244 0 0 2.244 0 5c0 2.755 2.244 5 5 5s5-2.245 5-5c0-2.756-2.244-5-5-5Zm0 1c2.215 0 4 1.784 4 4 0 2.215-1.785 4-4 4S1 7.215 1 5c0-2.216 1.785-4 4-4Z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/status-offline.svg b/comm/mail/themes/shared/mail/icons/new/status-offline.svg
new file mode 100644
index 0000000000..0ce53d16d6
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/status-offline.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path fill="#8a8ca0" d="M8 .5A7.5 7.5 0 0 0 .5 8 7.5 7.5 0 0 0 8 15.5 7.5 7.5 0 0 0 15.5 8 7.5 7.5 0 0 0 8 .5ZM6.5 2a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5Zm2 0c1.417 0 2.775.693 3.791 1.709S14 6.083 14 7.499a.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5c0-1.083-.557-2.224-1.416-3.083C10.725 3.556 9.584 3 8.5 3a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5Z"/>
+ <path fill="#575a77" d="M8 0C3.588 0 0 3.587 0 8c0 4.412 3.588 8 8 8s8-3.588 8-8c0-4.413-3.588-8-8-8Zm0 1c3.872 0 7 3.128 7 7 0 3.871-3.128 7-7 7s-7-3.129-7-7c0-3.872 3.128-7 7-7Z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/status-online-sm.svg b/comm/mail/themes/shared/mail/icons/new/status-online-sm.svg
new file mode 100644
index 0000000000..95fccfc1a1
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/status-online-sm.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 10 10" height="10" width="10">
+ <path fill="#30E60B" d="M5 .5A4.5 4.5 0 0 0 .5 5 4.5 4.5 0 0 0 5 9.5 4.5 4.5 0 0 0 9.5 5 4.5 4.5 0 0 0 5 .5ZM5.5 2c.667 0 1.275.318 1.729.771C7.682 3.225 8 3.833 8 4.5a.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5c0-.334-.182-.725-.479-1.022C6.225 3.182 5.833 3 5.5 3a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5Z"/>
+ <path fill="#12BC00" d="M5 0C2.244 0 0 2.244 0 5c0 2.755 2.244 5 5 5s5-2.245 5-5c0-2.756-2.244-5-5-5Zm0 1c2.215 0 4 1.784 4 4 0 2.215-1.785 4-4 4S1 7.215 1 5c0-2.216 1.785-4 4-4Z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/status-online.svg b/comm/mail/themes/shared/mail/icons/new/status-online.svg
new file mode 100644
index 0000000000..25ed227231
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/status-online.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path fill="#30E60B" d="M8 .5A7.5 7.5 0 0 0 .5 8 7.5 7.5 0 0 0 8 15.5 7.5 7.5 0 0 0 15.5 8 7.5 7.5 0 0 0 8 .5ZM6.5 2a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5Zm2 0c1.417 0 2.775.693 3.791 1.709S14 6.083 14 7.499a.5.5 0 0 1-.5.5.5.5 0 0 1-.5-.5c0-1.083-.557-2.224-1.416-3.083C10.725 3.556 9.584 3 8.5 3a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5Z"/>
+ <path fill="#12BC00" d="M8 0C3.588 0 0 3.587 0 8c0 4.412 3.588 8 8 8s8-3.588 8-8c0-4.413-3.588-8-8-8Zm0 1c3.872 0 7 3.128 7 7 0 3.871-3.128 7-7 7s-7-3.129-7-7c0-3.872 3.128-7 7-7Z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/subtract-circle-sm.svg b/comm/mail/themes/shared/mail/icons/new/subtract-circle-sm.svg
new file mode 100644
index 0000000000..839f229de5
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/subtract-circle-sm.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <path d="M10.5 5.5a5 5 0 1 1-10 0 5 5 0 0 1 10 0z" fill="context-fill"/>
+ <path d="M5.5 0A5.508 5.508 0 0 0 0 5.5a5.496 5.496 0 0 0 2.207 4.404A5.473 5.473 0 0 0 5.5 11a5.473 5.473 0 0 0 3.29-1.094l.009-.008A5.496 5.496 0 0 0 11 5.5C11 2.468 8.532 0 5.5 0Zm0 1c.074 0 .147.002.22.006h.012l.21.015.019.002a4.5 4.5 0 0 1 .412.063h.004l.031.006a4.496 4.496 0 0 1 3.506 3.531v.004c.027.135.048.273.063.412a4.545 4.545 0 0 1-.021 1.094v.008l-.003.01a4.477 4.477 0 0 1-.96 2.193l-.003-.015a4.613 4.613 0 0 1-.99.907v.008l-.066.041a4.696 4.696 0 0 1-.553.303l-.031.013a4.453 4.453 0 0 1-.575.215l-.023.006a4.471 4.471 0 0 1-.6.131l-.045.004A4.556 4.556 0 0 1 5.5 10a4.54 4.54 0 0 1-.607-.043c-.015 0-.03-.003-.045-.004a4.477 4.477 0 0 1-1.198-.352l-.03-.013a4.498 4.498 0 0 1-.554-.303L3 9.244v-.008a4.5 4.5 0 0 1-.99-.908l-.002.015a4.477 4.477 0 0 1-.961-2.193l-.002-.018a4.562 4.562 0 0 1 0-1.27v-.005a4.473 4.473 0 0 1 .361-1.227 4.496 4.496 0 0 1 2.15-2.19c.025-.01.05-.023.075-.034a4.472 4.472 0 0 1 1.226-.362h.006c.208-.029.42-.045.637-.045Zm-2 4a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/supernova-logo.webp b/comm/mail/themes/shared/mail/icons/new/supernova-logo.webp
new file mode 100644
index 0000000000..fd539dbf18
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/supernova-logo.webp
Binary files differ
diff --git a/comm/mail/themes/shared/mail/icons/new/tag-sm.svg b/comm/mail/themes/shared/mail/icons/new/tag-sm.svg
new file mode 100644
index 0000000000..0d0e0bee69
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/tag-sm.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" width="12" height="12">
+ <path d="M6 .496A.691.691 0 0 0 5.51.7L.699 5.51a.692.692 0 0 0 0 .981l4.81 4.811c.272.271.71.271.981 0l4.81-4.81c.23-.205.203-.491.2-.682V1.192A.69.69 0 0 0 10.808.5C9.553.501 7.237.501 6 .496Z" fill="context-fill"/>
+ <path d="M6-.004a1.2 1.2 0 0 0-.844.35l-4.81 4.81a1.202 1.202 0 0 0 0 1.688l4.81 4.81a1.202 1.202 0 0 0 1.688 0l4.789-4.79c.416-.372.37-.911.367-1.063V1.19A1.2 1.2 0 0 0 10.808 0 1272.319 1272.319 0 0 1 6-.005zm-.002 1H6c1.238.005 3.553.005 4.808.004.116 0 .192.076.192.192v4.624c.003.231.01.264-.032.301a.53.53 0 0 0-.021.02l-4.81 4.81c-.082.082-.21.097-.274 0l-4.81-4.81a.184.184 0 0 1 0-.274l4.81-4.81a.216.216 0 0 1 .135-.057zM9 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/thread-sm.svg b/comm/mail/themes/shared/mail/icons/new/thread-sm.svg
new file mode 100644
index 0000000000..47963bcf40
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/thread-sm.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <path d="M2.5.5a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1zm5 5a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1zm0 4a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1z" fill="context-fill"/>
+ <path d="M3.5 0C2.677 0 2 .677 2 1.5c0 .648.42 1.204 1 1.412V9c0 1.1.9 2 2 2h2.088c.208.58.764 1 1.412 1 .823 0 1.5-.677 1.5-1.5S9.323 9 8.5 9c-.648 0-1.204.42-1.412 1H5c-.563 0-1-.437-1-1V6.729C4.295 6.9 4.636 7 5 7h2.088c.208.58.764 1 1.412 1 .823 0 1.5-.677 1.5-1.5S9.323 5 8.5 5c-.648 0-1.204.42-1.412 1H5c-.563 0-1-.437-1-1V2.912c.58-.208 1-.764 1-1.412C5 .677 4.323 0 3.5 0zm0 1c.282 0 .5.218.5.5 0 .282-.218.5-.5.5a.493.493 0 0 1-.5-.5c0-.282.218-.5.5-.5zm5 5c.282 0 .5.218.5.5 0 .282-.218.5-.5.5a.493.493 0 0 1-.5-.5c0-.282.218-.5.5-.5zm0 4c.282 0 .5.218.5.5 0 .282-.218.5-.5.5a.493.493 0 0 1-.5-.5c0-.282.218-.5.5-.5z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/add-circle.svg b/comm/mail/themes/shared/mail/icons/new/touch/add-circle.svg
new file mode 100644
index 0000000000..91d1e322c8
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/add-circle.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24">
+ <path d="M11.5 1.5a10 10 0 0 0-10 10 10 10 0 0 0 10 10 10 10 0 0 0 10-10 10 10 0 0 0-10-10z" stroke-opacity="0.2" stroke="context-stroke" fill="context-fill"/>
+ <path d="M11.5 5a.5.5 0 0 0-.5.5V11H5.5a.5.5 0 0 0 0 1H11v5.5a.5.5 0 0 0 1 0V12h5.5a.5.5 0 0 0 0-1H12V5.5a.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/address-book.svg b/comm/mail/themes/shared/mail/icons/new/touch/address-book.svg
new file mode 100644
index 0000000000..d80d7c7de4
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/address-book.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24">
+ <path d="M6 1C4.347 1 3 2.347 3 4v1h-.5a.5.5 0 1 0 0 1H3v2h-.5a.5.5 0 1 0 0 1H3v2h-.5a.5.5 0 1 0 0 1H3v2h-.5a.5.5 0 1 0 0 1H3v2h-.5a.5.5 0 1 0 0 1H3v2c0 1.653 1.347 3 3 3h12c1.653 0 3-1.347 3-3V4c0-1.653-1.347-3-3-3Zm0 1h12c1.117 0 2 .883 2 2v16c0 1.117-.883 2-2 2H6c-1.117 0-2-.883-2-2v-2h.5a.5.5 0 1 0 0-1H4v-2h.5a.5.5 0 1 0 0-1H4v-2h.5a.5.5 0 1 0 0-1H4V9h.5a.5.5 0 1 0 0-1H4V6h.5a.5.5 0 1 0 0-1H4V4c0-1.117.883-2 2-2Zm6 3C9.797 5 8 6.797 8 9c0 .827.128 1.682.488 2.418.3.613.836 1.088 1.512 1.371V13H8.5c-.822 0-1.5.678-1.5 1.5v3a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-3c0-.286.214-.5.5-.5h2a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.387-.486c-.597-.14-.962-.496-1.226-1.035C9.123 10.439 9 9.719 9 9c0-1.663 1.337-3 3-3s3 1.337 3 3c0 .695-.123 1.416-.389 1.963-.265.547-.631.912-1.224 1.05A.5.5 0 0 0 13 12.5v1a.5.5 0 0 0 .5.5h2c.286 0 .5.214.5.5v3a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-3c0-.822-.678-1.5-1.5-1.5H14v-.213c.678-.287 1.212-.772 1.512-1.389.36-.74.487-1.593.488-2.398 0-2.203-1.797-4-4-4Z" fill="context-stroke"/>
+ <path d="M6 2h12c1.108 0 2 .892 2 2v16c0 1.108-.892 2-2 2H6c-1.108 0-2-.892-2-2V4c0-1.108.892-2 2-2Z" fill="context-fill"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/calendar.svg b/comm/mail/themes/shared/mail/icons/new/touch/calendar.svg
new file mode 100644
index 0000000000..1171142e24
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/calendar.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24">
+ <path d="M6 2C3.793 2 2 3.793 2 6v12c0 2.207 1.793 4 4 4h12c2.207 0 4-1.793 4-4V6c0-2.207-1.793-4-4-4Zm0 1h12c1.67 0 3 1.33 3 3v1h-3v-.5a.5.5 0 0 0-.5-.5.5.5 0 0 0-.5.5V7H7v-.5a.5.5 0 0 0-.5-.5.5.5 0 0 0-.5.5V7H3V6c0-1.67 1.33-3 3-3ZM3 8h3v.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V8h10v.5a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5V8h3v10c0 1.67-1.33 3-3 3H6c-1.67 0-3-1.33-3-3Zm2.5 3a.5.5 0 1 0 0 1h2a.5.5 0 1 0 0-1zm5 0a.5.5 0 1 0 0 1h3a.5.5 0 1 0 0-1zm6 0a.5.5 0 1 0 0 1h2a.5.5 0 1 0 0-1zm-11 3a.5.5 0 1 0 0 1h2a.5.5 0 1 0 0-1zm5 0a.5.5 0 1 0 0 1h3a.5.5 0 1 0 0-1zm6 0a.5.5 0 1 0 0 1h2a.5.5 0 1 0 0-1zm-11 3a.5.5 0 1 0 0 1h2a.5.5 0 1 0 0-1zm5 0a.5.5 0 1 0 0 1h3a.5.5 0 1 0 0-1zm6 0a.5.5 0 1 0 0 1h2a.5.5 0 1 0 0-1z" fill="context-stroke"/>
+ <path d="M6 2.5A3.492 3.492 0 0 0 2.5 6v1.5h19V6c0-1.939-1.561-3.5-3.5-3.5Z" fill="context-fill"/>
+</svg>
+
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/chat.svg b/comm/mail/themes/shared/mail/icons/new/touch/chat.svg
new file mode 100644
index 0000000000..785432ee03
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/chat.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24">
+ <path d="M5 2C2.793 2 1 3.793 1 6v6c0 2.207 1.793 4 4 4h1v3.5a.5.5 0 0 0 .854.354L8.707 18h4.586l3.853 3.854A.5.5 0 0 0 18 21.5V18h1c2.207 0 4-1.793 4-4V8c0-2.207-1.793-4-4-4h-.5a.5.5 0 0 0-.033.01A3.998 3.998 0 0 0 15 2Zm0 1h10c1.67 0 3 1.33 3 3v6c0 1.67-1.33 3-3 3h-4.5a.5.5 0 0 0-.354.146L7 18.293V15.5a.5.5 0 0 0-.5-.5H5c-1.67 0-3-1.33-3-3V6c0-1.67 1.33-3 3-3Zm13.87 2H19c1.67 0 3 1.33 3 3v6c0 1.67-1.33 3-3 3h-1.5a.5.5 0 0 0-.5.5v2.793l-3.146-3.147A.5.5 0 0 0 13.5 17H9.707l1-1H15c2.207 0 4-1.793 4-4V6c0-.346-.048-.68-.13-1ZM5.5 8a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Zm3 0a.5.5 0 1 0 0 1h3a.5.5 0 1 0 0-1zm6 0a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+ <path d="M18.87 5H19c1.67 0 3 1.33 3 3v6c0 1.67-1.33 3-3 3h-1.5a.5.5 0 0 0-.5.5v2.793l-3.146-3.147A.5.5 0 0 0 13.5 17H9.707l1-1H15c2.207 0 4-1.793 4-4V6c0-.346-.048-.68-.13-1Z" fill="context-fill"/>
+</svg>
+
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/collapse.svg b/comm/mail/themes/shared/mail/icons/new/touch/collapse.svg
new file mode 100644
index 0000000000..b87ed62cfe
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/collapse.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24">
+ <path d="M4.5 4a.5.5 0 0 0-.5.5v14a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-14a.5.5 0 0 0-.5-.5zm8 2a.5.5 0 0 0-.354.146l-5 5A.5.5 0 0 0 7 11.5a.5.5 0 0 0 .146.354l5 5a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.708L8.707 12H19.5a.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5H8.707l4.147-4.146a.5.5 0 0 0 0-.708A.5.5 0 0 0 12.5 6z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/dictionary.svg b/comm/mail/themes/shared/mail/icons/new/touch/dictionary.svg
new file mode 100644
index 0000000000..4ae575d184
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/dictionary.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24" height="24" width="24">
+ <path d="M6 1.5A2.495 2.495 0 0 0 3.5 4v16c0 1.385 1.115 2.5 2.5 2.5h1.5v-2H7c-.831 0-1.5-.67-1.5-1.5 0-.831.669-1.5 1.5-1.5h.5v-16z" fill="context-fill"/>
+ <path d="M6 1C4.347 1 3 2.346 3 4v16c0 1.653 1.347 3 3 3h12c1.653 0 3-1.347 3-3V4c0-1.654-1.347-3-3-3Zm0 1h1v15c-1.1 0-2 .9-2 2 0 1.099.9 2 2 2v1H6c-1.117 0-2-.884-2-2V4c0-1.117.883-2 2-2Zm2 0h10c1.117 0 2 .883 2 2v13H8Zm6 3a.5.5 0 0 0-.459.298l-3.5 8a.5.5 0 0 0 .258.66.5.5 0 0 0 .66-.257L12.141 11h3.718l1.182 2.7a.5.5 0 0 0 .66.259.5.5 0 0 0 .258-.66l-3.5-8a.5.5 0 0 0-.459-.3Zm0 1.75L15.422 10h-2.844ZM7 18h13v2H7c-.563 0-1-.438-1-1 0-.563.437-1 1-1Zm1 3h11.736c-.342.6-.986 1-1.736 1H8Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/export.svg b/comm/mail/themes/shared/mail/icons/new/touch/export.svg
new file mode 100644
index 0000000000..54d69b8ee5
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/export.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24" height="24" width="24">
+ <path d="M17.5 5.5V16c0 1.385-1.115 2.5-2.5 2.5H6.5v.5c0 1.385 1.115 2.5 2.5 2.5h9c1.385 0 2.5-1.115 2.5-2.5V8c0-1.385-1.115-2.5-2.5-2.5Z" fill="context-fill"/>
+ <path d="M6 2C4.347 2 3 3.346 3 5v11c0 1.653 1.347 3 3 3 0 1.653 1.347 3 3 3h9c1.653 0 3-1.347 3-3V8c0-1.654-1.347-3-3-3 0-1.654-1.347-3-3-3H6zm0 1h9c1.117 0 2 .883 2 2v11c0 1.116-.883 2-2 2H6c-1.117 0-2-.884-2-2V5c0-1.117.883-2 2-2zm4.5 2a.522.522 0 0 0-.035.006.495.495 0 0 0-.283.115.476.476 0 0 0-.036.025l-3 3a.5.5 0 0 0 .708.708L10 6.707V12.5a.5.5 0 0 0 1 0V6.707l2.146 2.147a.499.499 0 1 0 .708-.708l-3-3a.467.467 0 0 0-.036-.025.515.515 0 0 0-.132-.08.494.494 0 0 0-.15-.035A.522.522 0 0 0 10.5 5zM18 6c1.117 0 2 .883 2 2v11c0 1.116-.883 2-2 2H9c-1.117 0-2-.884-2-2h8c1.653 0 3-1.347 3-3V6zM6.5 13a.5.5 0 0 0-.5.5v.5c0 1.099.9 2 2 2h5c1.1 0 2-.901 2-2v-.5a.5.5 0 0 0-1 0v.5c0 .562-.437 1-1 1H8c-.563 0-1-.438-1-1v-.5a.5.5 0 0 0-.5-.5z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/extension-update-available.svg b/comm/mail/themes/shared/mail/icons/new/touch/extension-update-available.svg
new file mode 100644
index 0000000000..81e65dbe1e
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/extension-update-available.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24" height="24" width="24">
+ <path fill-opacity="1" d="M11.6.5c-1.54 0-3.1.896-3.1 2.1 0 1.358 1 1.4 1 2.45 0 .952-.476 1.435-1.05 1.45H3.9a1.4 1.4 0 0 0-1.4 1.4V9.45a1.077 1.077 0 0 0 1.05 1.05c1.05 0 .592-.998 1.95-.998 1.218 0 2 1.458 2 2.998 0 1.54-.796 3-2 3-1.358 0-.899-.999-1.949-.999A1.079 1.079 0 0 0 2.5 15.55v4.55a1.4 1.4 0 0 0 1.4 1.4h4.55a1.077 1.077 0 0 0 1.05-1.05c0-1.05-1-1.092-1-2.45 0-1.204 1.56-2.5 3.1-2.5.43 0 .844.103 1.22.275A5 5 0 0 1 17.5 12.5a5 5 0 0 1 4.531 2.89c.9-.378 1.469-1.688 1.469-2.989 0-1.54-.797-2.9-2-2.9-1.359 0-1.899 1-2.949 1-.574-.014-1.036-.676-1.05-1.25V7.9A1.4 1.4 0 0 0 16.1 6.5h-1.35c-.574-.014-1.225-.5-1.25-1.449 0-1.05 1-1.093 1-2.451 0-1.204-1.36-2.1-2.9-2.1zm2.184 20.336a1.075 1.075 0 0 0 .66.608 5 5 0 0 1-.661-.608z" fill="context-fill"/>
+ <path d="M11.6 0c-.868 0-1.722.244-2.398.678-.676.434-1.204 1.103-1.204 1.922 0 .8.35 1.327.613 1.653.263.328.39.432.39.798 0 .392-.099.633-.204.765a.428.428 0 0 1-.361.182H3.9c-1.043 0-1.9.857-1.9 1.901v1.564A1.585 1.585 0 0 0 3.54 11h.011c.342 0 .644-.097.854-.253.213-.159.322-.335.406-.446.083-.112.13-.168.206-.211.077-.043.205-.09.483-.09.409 0 .748.23 1.033.686.286.46.467 1.13.467 1.816 0 .683-.185 1.35-.472 1.809-.289.458-.629.689-1.028.689-.278 0-.406-.046-.483-.09a.657.657 0 0 1-.207-.207c-.084-.112-.192-.291-.403-.448A1.44 1.44 0 0 0 3.55 14h-.014A1.585 1.585 0 0 0 2 15.536V20.1c0 1.043.857 1.9 1.9 1.9h4.564a1.585 1.585 0 0 0 1.537-1.537v-.014c0-.684-.372-1.126-.609-1.421C9.154 18.732 9 18.556 9 18c0-.386.289-.904.788-1.313.502-.406 1.183-.686 1.813-.686.2 0 .397.03.588.08a5.485 5.485 0 0 0 1.176 5.037c.17.341.46.616.814.763A5.472 5.472 0 0 0 17.5 23a5.508 5.508 0 0 0 5.5-5.502c0-.67-.121-1.31-.341-1.904.287-.214.532-.494.721-.81.406-.678.62-1.528.62-2.385 0-.855-.214-1.669-.63-2.303-.417-.633-1.078-1.095-1.867-1.095-.803 0-1.395.308-1.843.564-.445.255-.739.429-1.103.43-.098-.004-.23-.068-.35-.221a1.012 1.012 0 0 1-.204-.539V7.899a1.908 1.908 0 0 0-1.902-1.901h-1.338c-.3-.007-.735-.242-.759-.956.003-.357.123-.465.384-.789a2.548 2.548 0 0 0 .609-1.653c0-.791-.451-1.467-1.082-1.911C13.286.248 12.468 0 11.6 0Zm0 1c.672 0 1.305.2 1.74.505.434.307.66.68.66 1.095 0 .556-.154.734-.391 1.029-.238.295-.609.738-.609 1.421v.014c.03 1.175.89 1.914 1.736 1.936h1.366c.503 0 .898.395.898.899v1.365c.011.416.168.81.424 1.133.255.322.637.59 1.113.603h.014c.683 0 1.182-.322 1.607-.567.426-.244.787-.434 1.344-.434.413 0 .75.216 1.033.647.283.432.465 1.07.465 1.754 0 .685-.185 1.383-.476 1.869a2.034 2.034 0 0 1-.31.4A5.505 5.505 0 0 0 17.5 12a5.508 5.508 0 0 0-4.966 3.142 3.32 3.32 0 0 0-.934-.14c-.91 0-1.778.368-2.444.91-.664.54-1.158 1.271-1.158 2.089 0 .802.35 1.327.613 1.655.26.322.38.43.384.787a.571.571 0 0 1-.56.558H3.9a.893.893 0 0 1-.9-.9v-4.536a.571.571 0 0 1 .56-.56c.164.003.208.027.246.055a1.382 1.382 0 0 1 .203.24c.104.138.262.335.514.478.252.144.577.224.977.224.804 0 1.463-.504 1.876-1.16.41-.656.622-1.483.622-2.339 0-.854-.207-1.687-.616-2.343C6.972 9.5 6.309 9.002 5.5 9.002c-.4 0-.724.077-.977.22-.252.144-.41.342-.514.479a1.382 1.382 0 0 1-.203.24c-.038.029-.08.054-.248.055A.566.566 0 0 1 3 9.44v-1.54C3 7.395 3.397 7 3.9 7h4.564a1.484 1.484 0 0 0 1.12-.564c.276-.351.417-.826.417-1.386 0-.683-.372-1.126-.609-1.421C9.154 3.334 9 3.156 9 2.6c0-.386.256-.766.745-1.08.49-.314 1.183-.519 1.856-.519zm5.9 12a4.493 4.493 0 0 1 4.5 4.5 4.493 4.493 0 0 1-4.5 4.5 4.493 4.493 0 0 1-4.5-4.5 4.493 4.493 0 0 1 4.5-4.5Zm0 2a.5.5 0 0 0-.353.147l-2 1.999a.5.5 0 0 0 0 .707.5.5 0 0 0 .706 0l1.148-1.147V19.5a.5.5 0 0 0 .499.502.5.5 0 0 0 .5-.502v-2.793l1.147 1.148a.5.5 0 0 0 .706 0 .5.5 0 0 0 0-.708l-1.984-1.982a.5.5 0 0 0-.024-.023.5.5 0 0 0-.093-.073.5.5 0 0 0-.007-.004.5.5 0 0 0-.108-.045.5.5 0 0 0-.009-.001A.5.5 0 0 0 17.5 15z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/extension-update-recent.svg b/comm/mail/themes/shared/mail/icons/new/touch/extension-update-recent.svg
new file mode 100644
index 0000000000..3a31a2f6d2
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/extension-update-recent.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24" height="24" width="24">
+ <path fill-opacity="1" d="M11.6.5c-1.54 0-3.1.896-3.1 2.1 0 1.358 1 1.4 1 2.45 0 .952-.476 1.435-1.05 1.45H3.9a1.4 1.4 0 0 0-1.4 1.4V9.45a1.077 1.077 0 0 0 1.05 1.05c1.05 0 .592-.998 1.95-.998 1.218 0 2 1.458 2 2.998 0 1.54-.796 3-2 3-1.358 0-.899-.999-1.949-.999A1.079 1.079 0 0 0 2.5 15.55v4.55a1.4 1.4 0 0 0 1.4 1.4h4.55a1.077 1.077 0 0 0 1.05-1.05c0-1.05-1-1.092-1-2.45 0-1.204 1.56-2.5 3.1-2.5.43 0 .844.103 1.22.275A5 5 0 0 1 17.5 12.5a5 5 0 0 1 4.531 2.89c.9-.378 1.469-1.688 1.469-2.989 0-1.54-.797-2.9-2-2.9-1.359 0-1.899 1-2.949 1-.574-.014-1.036-.676-1.05-1.25V7.9A1.4 1.4 0 0 0 16.1 6.5h-1.35c-.574-.014-1.225-.5-1.25-1.449 0-1.05 1-1.093 1-2.451 0-1.204-1.36-2.1-2.9-2.1zm2.184 20.336a1.075 1.075 0 0 0 .66.608 5 5 0 0 1-.661-.608z" fill="context-fill"/>
+ <path d="M11.6 0c-.868 0-1.722.244-2.398.678-.676.434-1.204 1.103-1.204 1.922 0 .8.35 1.327.613 1.653.263.328.39.432.39.798 0 .392-.099.633-.204.765a.428.428 0 0 1-.361.182H3.9c-1.043 0-1.9.857-1.9 1.901v1.564A1.585 1.585 0 0 0 3.54 11h.011c.342 0 .644-.097.854-.253.213-.159.322-.335.406-.446.083-.112.13-.168.206-.211.077-.043.205-.09.483-.09.409 0 .748.23 1.033.686.286.46.467 1.13.467 1.816 0 .683-.185 1.35-.472 1.809-.289.458-.629.689-1.028.689-.278 0-.406-.046-.483-.09a.657.657 0 0 1-.207-.207c-.084-.112-.192-.291-.403-.448A1.44 1.44 0 0 0 3.55 14h-.014A1.585 1.585 0 0 0 2 15.536V20.1c0 1.043.857 1.9 1.9 1.9h4.564a1.585 1.585 0 0 0 1.537-1.537v-.014c0-.684-.372-1.126-.609-1.421C9.154 18.732 9 18.556 9 18c0-.386.289-.904.788-1.313.502-.406 1.183-.686 1.813-.686.2 0 .397.03.588.08a5.485 5.485 0 0 0 1.176 5.037c.17.341.46.616.814.763A5.472 5.472 0 0 0 17.5 23a5.508 5.508 0 0 0 5.5-5.502c0-.67-.121-1.31-.341-1.904.287-.214.532-.494.721-.81.406-.678.62-1.528.62-2.385 0-.855-.214-1.669-.63-2.303-.417-.633-1.078-1.095-1.867-1.095-.803 0-1.395.308-1.843.564-.445.255-.739.429-1.103.43-.098-.004-.23-.068-.35-.221a1.012 1.012 0 0 1-.204-.539V7.899a1.908 1.908 0 0 0-1.902-1.901h-1.338c-.3-.007-.735-.242-.759-.956.003-.357.123-.465.384-.789a2.548 2.548 0 0 0 .609-1.653c0-.791-.451-1.467-1.082-1.911C13.286.248 12.468 0 11.6 0zm0 1c.672 0 1.305.2 1.74.505.434.307.66.68.66 1.095 0 .556-.154.734-.391 1.029-.238.295-.609.738-.609 1.421v.014c.03 1.175.89 1.914 1.736 1.936h1.366c.503 0 .898.395.898.899v1.365c.011.416.168.81.424 1.133.255.322.637.59 1.113.603h.014c.683 0 1.182-.322 1.607-.567.426-.244.787-.434 1.344-.434.413 0 .75.216 1.033.647.283.432.465 1.07.465 1.754 0 .685-.185 1.383-.476 1.869a2.034 2.034 0 0 1-.31.4A5.505 5.505 0 0 0 17.5 12a5.508 5.508 0 0 0-4.966 3.142 3.32 3.32 0 0 0-.934-.14c-.91 0-1.778.368-2.444.91-.664.54-1.158 1.271-1.158 2.089 0 .802.35 1.327.613 1.655.26.322.38.43.384.787a.571.571 0 0 1-.56.558H3.9a.893.893 0 0 1-.9-.9v-4.536a.571.571 0 0 1 .56-.56c.164.003.208.027.246.055a1.382 1.382 0 0 1 .203.24c.104.138.262.335.514.478.252.144.577.224.977.224.804 0 1.463-.504 1.876-1.16.41-.656.622-1.483.622-2.339 0-.854-.207-1.687-.616-2.343C6.972 9.5 6.309 9.002 5.5 9.002c-.4 0-.724.077-.977.22-.252.144-.41.342-.514.479a1.382 1.382 0 0 1-.203.24c-.038.029-.08.054-.248.055A.566.566 0 0 1 3 9.44v-1.54C3 7.395 3.397 7 3.9 7h4.564a1.484 1.484 0 0 0 1.12-.564c.276-.351.417-.826.417-1.386 0-.683-.372-1.126-.609-1.421C9.154 3.334 9 3.156 9 2.6c0-.386.256-.766.745-1.08.49-.314 1.183-.519 1.856-.519zm5.9 12a4.493 4.493 0 0 1 4.5 4.5 4.493 4.493 0 0 1-4.5 4.5 4.493 4.493 0 0 1-4.5-4.5 4.493 4.493 0 0 1 4.5-4.5zm0 2a.5.5 0 0 0-.5.5v2.793l-1.147-1.147a.5.5 0 0 0-.707 0 .5.5 0 0 0 0 .707l2 2a.5.5 0 0 0 .354.148.5.5 0 0 0 .128-.019.5.5 0 0 0 .009-.001.5.5 0 0 0 .108-.045.5.5 0 0 0 .007-.004.5.5 0 0 0 .093-.073.5.5 0 0 0 .024-.024l1.984-1.982a.5.5 0 0 0 0-.707.5.5 0 0 0-.707 0l-1.147 1.148V15.5a.5.5 0 0 0-.5-.5z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/extension.svg b/comm/mail/themes/shared/mail/icons/new/touch/extension.svg
new file mode 100644
index 0000000000..7525d56ce2
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/extension.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24" height="24" width="24">
+ <path fill-opacity="1" d="M21.5 9.5c-1.358 0-1.9 1-2.95 1-.574-.015-1.035-.676-1.05-1.25V7.9a1.4 1.4 0 0 0-1.4-1.4h-1.35c-.574-.015-1.226-.5-1.25-1.45 0-1.05 1-1.092 1-2.45 0-1.204-1.36-2.1-2.9-2.1-1.54 0-3.1.896-3.1 2.1 0 1.358 1 1.4 1 2.45 0 .95-.476 1.435-1.05 1.45H3.9a1.4 1.4 0 0 0-1.4 1.4v1.55a1.077 1.077 0 0 0 1.05 1.05c1.05 0 .592-1 1.95-1 1.218 0 2 1.46 2 3s-.796 3-2 3c-1.358 0-.9-1-1.95-1a1.078 1.078 0 0 0-1.05 1.05v4.55a1.4 1.4 0 0 0 1.4 1.4h4.55a1.078 1.078 0 0 0 1.05-1.05c0-1.05-1-1.092-1-2.45 0-1.204 1.56-2.5 3.1-2.5s2.9 1.296 2.9 2.5c0 1.358-.8 1.4-.8 2.45a1.077 1.077 0 0 0 1.05 1.05h1.35a1.4 1.4 0 0 0 1.4-1.4v-4.55a1.078 1.078 0 0 1 1.05-1.05c1.05 0 1.592 1 2.95 1 1.204 0 2-1.56 2-3.1s-.796-2.9-2-2.9z" fill="context-fill"/>
+ <path d="M11.6 0c-.867 0-1.723.243-2.4.678C8.525 1.112 8 1.782 8 2.6c0 .801.347 1.327.61 1.654.262.327.39.43.39.797 0 .391-.099.633-.203.765a.427.427 0 0 1-.36.184H3.9C2.857 6 2 6.857 2 7.9v1.563c.02.835.702 1.517 1.537 1.537h.014c.342 0 .642-.098.853-.256.212-.157.323-.333.407-.445.083-.112.13-.166.207-.21.076-.043.204-.089.482-.089.41 0 .747.23 1.033.688.286.458.467 1.127.467 1.812 0 .684-.185 1.354-.473 1.813C6.24 14.77 5.9 15 5.5 15c-.278 0-.406-.046-.482-.09-.077-.043-.124-.097-.207-.209-.084-.112-.195-.288-.407-.445A1.435 1.435 0 0 0 3.551 14h-.014A1.585 1.585 0 0 0 2 15.537V20.1c0 1.043.857 1.9 1.9 1.9h4.563A1.585 1.585 0 0 0 10 20.463v-.014c0-.684-.372-1.126-.61-1.422C9.154 18.732 9 18.557 9 18c0-.386.289-.907.79-1.314.5-.408 1.18-.686 1.81-.686.63 0 1.246.272 1.695.672.449.4.705.914.705 1.328 0 .58-.13.775-.32 1.07-.19.296-.48.727-.48 1.38v.012c.02.835.703 1.517 1.538 1.537H16.1c1.043 0 1.9-.857 1.9-1.9v-4.538a.57.57 0 0 1 .559-.558c.362.003.657.175 1.101.43.448.256 1.038.566 1.84.566.818 0 1.474-.536 1.88-1.215.408-.678.62-1.528.62-2.385 0-.856-.215-1.669-.63-2.302C22.952 9.464 22.29 9 21.5 9c-.802 0-1.392.31-1.84.566-.444.255-.739.43-1.101.432-.098-.004-.23-.07-.352-.223A1.015 1.015 0 0 1 18 9.236V7.9c0-1.043-.857-1.9-1.9-1.9h-1.336c-.3-.008-.74-.238-.762-.955.002-.36.128-.466.389-.791C14.653 3.927 15 3.4 15 2.6c0-.79-.454-1.467-1.084-1.91C13.286.245 12.466 0 11.6 0Zm0 1c.673 0 1.305.202 1.74.508.434.305.66.678.66 1.092 0 .556-.153.731-.39 1.027-.238.296-.61.74-.61 1.424v.012c.03 1.174.89 1.915 1.736 1.937H16.1c.503 0 .9.397.9.9v1.364c.01.416.168.807.424 1.13.255.324.638.594 1.113.606h.014c.684 0 1.182-.323 1.607-.566.426-.244.786-.434 1.342-.434.414 0 .75.215 1.033.646.283.432.467 1.07.467 1.754 0 .684-.185 1.383-.477 1.87-.291.486-.637.73-1.023.73-.556 0-.916-.19-1.342-.434-.425-.243-.923-.566-1.607-.566h-.014A1.585 1.585 0 0 0 17 15.537V20.1c0 .503-.397.9-.9.9h-1.338a.569.569 0 0 1-.559-.559c.002-.388.11-.506.318-.83.21-.327.479-.834.479-1.611 0-.79-.423-1.525-1.04-2.074-.615-.55-1.45-.926-2.36-.926-.91 0-1.78.369-2.444.91C8.492 16.451 8 17.182 8 18c0 .802.347 1.327.61 1.654.26.324.384.43.386.787a.57.57 0 0 1-.559.559H3.9a.893.893 0 0 1-.9-.9v-4.538a.57.57 0 0 1 .56-.56c.166.002.21.026.249.055.04.03.096.104.199.242.103.138.26.334.513.478.253.144.578.223.979.223.804 0 1.464-.5 1.875-1.156.411-.656.625-1.488.625-2.344 0-.855-.21-1.685-.62-2.342C6.972 9.501 6.31 9 5.5 9c-.4 0-.726.079-.979.223a1.68 1.68 0 0 0-.513.478c-.103.138-.16.212-.2.242-.038.03-.082.053-.247.055A.57.57 0 0 1 3 9.438V7.9c0-.503.397-.9.9-.9h4.563c.424-.01.842-.213 1.119-.564.277-.352.418-.827.418-1.385 0-.684-.372-1.128-.61-1.424C9.154 3.331 9 3.156 9 2.6c0-.386.253-.766.742-1.08.49-.315 1.185-.52 1.858-.52Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/features.svg b/comm/mail/themes/shared/mail/icons/new/touch/features.svg
new file mode 100644
index 0000000000..6113ea44c1
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/features.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24" height="24" width="24">
+ <path d="M6.003 2.25c-.506 0-.858 2.176-1.216 2.534-.358.358-2.536.71-2.536 1.216s2.178.858 2.536 1.215c.358.358.71 2.535 1.216 2.535s.858-2.177 1.216-2.535c.358-.357 2.536-.71 2.536-1.215 0-.506-2.178-.858-2.536-1.216-.358-.358-.71-2.534-1.216-2.534Zm9.004 1.464c-1.14 0-1.644 5.031-2.45 5.836-.806.806-5.839 1.31-5.839 2.45 0 1.139 5.033 1.643 5.839 2.449.806.805 1.31 5.836 2.45 5.836 1.14 0 1.645-5.03 2.45-5.836.807-.806 5.84-1.31 5.84-2.45 0-1.138-5.033-1.643-5.84-2.449-.805-.805-1.31-5.836-2.45-5.836zM6.003 14.25c-.506 0-.858 2.176-1.216 2.534-.358.358-2.536.71-2.536 1.216s2.178.858 2.536 1.215c.358.358.71 2.535 1.216 2.535s.858-2.177 1.216-2.535c.358-.357 2.536-.71 2.536-1.215 0-.506-2.178-.858-2.536-1.216-.358-.358-.71-2.534-1.216-2.534Z" fill="context-fill"/>
+ <path d="M6.002 2c-.222 0-.4.106-.518.212-.116.106-.195.22-.265.34-.141.239-.246.51-.348.782-.101.272-.195.544-.28.757-.084.214-.198.378-.157.338.04-.04-.127.076-.34.16-.214.085-.487.176-.76.278a4.93 4.93 0 0 0-.781.35c-.12.07-.234.146-.34.263A.782.782 0 0 0 2 6c0 .222.107.402.213.52.106.116.22.192.34.263.239.14.508.248.781.35.273.1.546.194.76.279.213.084.38.198.34.158-.04-.04.073.124.158.338.084.213.178.485.28.758.1.272.206.542.347.78.07.12.149.235.265.34a.778.778 0 0 0 .518.214.784.784 0 0 0 .52-.213c.116-.106.195-.22.265-.34.14-.239.246-.51.348-.781.101-.273.195-.545.28-.758.083-.214.197-.378.157-.338-.04.04.125-.076.338-.16.213-.085.486-.176.758-.278.272-.101.54-.208.78-.35a1.41 1.41 0 0 0 .34-.263.785.785 0 0 0 .212-.52.785.785 0 0 0-.213-.519 1.375 1.375 0 0 0-.338-.264 4.93 4.93 0 0 0-.781-.35c-.272-.1-.545-.192-.758-.277-.213-.084-.378-.2-.338-.16.04.04-.074-.124-.158-.338-.084-.213-.178-.485-.28-.757a4.922 4.922 0 0 0-.347-.782 1.393 1.393 0 0 0-.266-.34A.784.784 0 0 0 6.002 2Zm9.006 1c-.334 0-.601.194-.78.402a2.842 2.842 0 0 0-.43.73c-.242.557-.438 1.252-.624 1.965-.187.713-.36 1.443-.533 2.028-.173.584-.41 1.044-.438 1.072-.028.028-.489.263-1.074.435-.586.173-1.315.347-2.03.534-.713.186-1.41.382-1.966.625a2.842 2.842 0 0 0-.73.43C6.195 11.398 6 11.665 6 12c0 .334.195.6.402.779.208.178.452.308.73.43.558.242 1.254.438 1.968.625.714.186 1.443.36 2.029.533.585.172 1.046.407 1.074.435.028.028.265.49.438 1.074.172.585.346 1.315.533 2.028.186.713.382 1.406.625 1.963.121.278.251.525.43.732.178.208.445.4.779.4s.601-.192.78-.4c.177-.207.307-.454.429-.732.243-.557.438-1.25.625-1.963.186-.713.36-1.443.533-2.028.173-.584.408-1.046.436-1.074.028-.028.488-.263 1.072-.435.584-.173 1.313-.347 2.025-.533.712-.187 1.406-.383 1.961-.625.278-.122.523-.252.73-.43.208-.178.401-.446.401-.78 0-.333-.193-.6-.4-.779a2.844 2.844 0 0 0-.73-.43c-.556-.242-1.25-.438-1.962-.624-.712-.187-1.441-.361-2.025-.534-.584-.172-1.044-.407-1.072-.435-.028-.028-.263-.488-.436-1.072-.173-.585-.347-1.315-.533-2.028-.187-.713-.382-1.408-.625-1.965a2.842 2.842 0 0 0-.43-.73c-.178-.208-.445-.402-.78-.402Zm-9.004.236c.063.132.125.263.193.445.095.254.19.531.287.78.099.248.162.458.381.677.219.219.43.283.678.381.248.098.522.19.775.285.181.068.312.132.444.196-.132.063-.263.127-.444.195-.253.094-.527.187-.775.285-.248.098-.459.162-.678.38-.219.22-.282.43-.38.679-.099.248-.193.525-.288.779-.068.182-.13.313-.193.445-.063-.132-.128-.263-.195-.445-.095-.254-.19-.531-.288-.78-.098-.248-.161-.458-.38-.677-.22-.22-.431-.283-.68-.381-.249-.098-.523-.19-.777-.285-.182-.068-.314-.132-.446-.195.132-.064.264-.128.446-.196.254-.094.528-.187.777-.285.249-.098.46-.162.68-.38.219-.22.282-.43.38-.679.099-.248.193-.525.288-.779.067-.182.132-.313.195-.445ZM15.008 4c-.05 0-.051-.03.02.052.07.083.172.254.27.48.198.453.392 1.118.575 1.817.183.699.359 1.432.543 2.057.184.625.313 1.123.688 1.498.374.374.871.503 1.496.687.624.185 1.357.36 2.054.543.698.183 1.363.377 1.815.574.226.1.396.201.478.272.083.07.053.069.053.02 0-.05.03-.052-.053.019-.082.07-.252.173-.478.271-.452.198-1.117.392-1.815.575-.697.182-1.43.358-2.054.543-.625.184-1.122.313-1.496.687-.375.375-.504.873-.688 1.498-.184.625-.36 1.358-.543 2.057-.183.699-.377 1.366-.574 1.818a2.08 2.08 0 0 1-.272.479c-.07.082-.068.052-.02.052.05 0 .05.03-.02-.052a2.096 2.096 0 0 1-.272-.479c-.198-.452-.392-1.12-.574-1.818-.183-.699-.357-1.432-.541-2.057-.185-.625-.315-1.123-.69-1.498-.375-.375-.872-.503-1.498-.687-.626-.185-1.359-.36-2.058-.543-.7-.183-1.368-.377-1.82-.574a2.116 2.116 0 0 1-.481-.272c-.083-.07-.053-.07-.053-.02s-.03.052.053-.019c.082-.07.254-.173.48-.271.453-.198 1.121-.392 1.82-.575.7-.182 1.433-.356 2.06-.54.625-.185 1.122-.315 1.497-.69.375-.375.505-.873.69-1.498.184-.625.358-1.358.54-2.057.183-.699.377-1.364.575-1.816.099-.226.2-.398.271-.48.071-.083.071-.053.022-.053ZM6.002 14c-.222 0-.4.106-.518.212-.116.106-.195.22-.265.34-.141.239-.246.51-.348.782-.101.272-.195.544-.28.757-.084.214-.198.378-.157.338.04-.04-.127.076-.34.16-.214.085-.487.176-.76.278a4.93 4.93 0 0 0-.781.35c-.12.07-.234.146-.34.263A.782.782 0 0 0 2 18c0 .222.107.402.213.52.106.116.22.192.34.263.239.14.508.248.781.35.273.1.546.194.76.279.213.084.38.198.34.158-.04-.04.073.124.158.338.084.213.178.485.28.758.1.272.206.542.347.78.07.12.149.235.265.34a.778.778 0 0 0 .518.214.784.784 0 0 0 .52-.213c.116-.106.195-.22.265-.34.14-.239.246-.51.348-.781.101-.273.195-.545.28-.758.083-.214.197-.378.157-.338-.04.04.125-.076.338-.16.213-.085.486-.176.758-.278.272-.101.54-.208.78-.35a1.41 1.41 0 0 0 .34-.263.785.785 0 0 0 .212-.52.785.785 0 0 0-.213-.519 1.375 1.375 0 0 0-.338-.264 4.93 4.93 0 0 0-.781-.35c-.272-.1-.545-.192-.758-.277-.213-.084-.378-.2-.338-.16.04.04-.074-.124-.158-.338-.084-.213-.178-.485-.28-.757a4.922 4.922 0 0 0-.347-.782 1.393 1.393 0 0 0-.266-.34.784.784 0 0 0-.519-.212Zm.002 1.236c.063.132.125.263.193.445.095.254.19.531.287.78.099.248.162.458.381.677.219.219.43.283.678.381.248.098.522.19.775.285.181.068.312.132.444.196-.132.063-.263.127-.444.195-.253.094-.527.187-.775.285-.248.098-.459.162-.678.38-.219.22-.282.43-.38.679-.099.248-.193.525-.288.779-.068.182-.13.313-.193.445-.063-.132-.128-.263-.195-.445-.095-.254-.19-.531-.288-.78-.098-.248-.161-.458-.38-.677-.22-.22-.431-.283-.68-.381-.249-.098-.523-.19-.777-.285-.182-.068-.314-.132-.446-.195.132-.064.264-.128.446-.196.254-.094.528-.187.777-.285.249-.098.46-.162.68-.38.219-.22.282-.43.38-.679.099-.248.193-.525.288-.779.067-.182.132-.313.195-.445z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/globe.svg b/comm/mail/themes/shared/mail/icons/new/touch/globe.svg
new file mode 100644
index 0000000000..9e4a1a18ec
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/globe.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24" height="24" width="24">
+ <path d="M21.5 11.5a10 10 0 0 1-10 10 10 10 0 0 1-10-10 10 10 0 0 1 10-10 10 10 0 0 1 10 10z" fill="context-fill"/>
+ <path d="M11.5 1C5.707 1 1 5.707 1 11.5S5.707 22 11.5 22 22 17.293 22 11.5 17.293 1 11.5 1zm0 1c.283 0 .563.015.84.04.47.464 1.818 1.937 2.74 4.358a15.348 15.348 0 0 0-3.605-.423c-1.301 0-2.484.158-3.55.412.923-2.414 2.265-3.884 2.735-4.348.277-.024.557-.039.84-.039zm-2.393.303A14.59 14.59 0 0 0 6.76 6.715 14.376 14.376 0 0 0 2.309 9.09a9.5 9.5 0 0 1 6.798-6.787zm4.786 0a9.5 9.5 0 0 1 6.802 6.8 14.588 14.588 0 0 0-4.45-2.373 14.596 14.596 0 0 0-2.352-4.427zm-2.418 4.672c1.496 0 2.822.217 3.978.546A14.44 14.44 0 0 1 16 11.5a14.38 14.38 0 0 1-.533 3.924c-1.16.332-2.49.55-3.992.55-1.482 0-2.794-.212-3.938-.537A14.375 14.375 0 0 1 7 11.5c0-1.502.219-2.833.55-3.992a14.378 14.378 0 0 1 3.925-.533zm-5.047.9A15.354 15.354 0 0 0 6 11.5c0 1.309.16 2.498.416 3.568-2.513-.954-3.978-2.357-4.38-2.779A9.647 9.647 0 0 1 2 11.5c0-.284.015-.566.04-.844.412-.431 1.881-1.832 4.388-2.781zm10.148.02c2.494.949 3.967 2.335 4.385 2.765.024.277.039.557.039.84 0 .265-.014.527-.035.787-.408.42-1.878 1.808-4.377 2.762C16.84 13.984 17 12.8 17 11.5c0-1.322-.164-2.524-.424-3.605zm4.135 5.94a9.5 9.5 0 0 1-6.857 6.872 14.382 14.382 0 0 0 2.406-4.492 14.588 14.588 0 0 0 4.45-2.38zm-18.418.013a14.374 14.374 0 0 0 4.451 2.382 14.377 14.377 0 0 0 2.402 4.477 9.5 9.5 0 0 1-6.853-6.86zM15.1 16.547c-.989 2.611-2.451 4.08-2.813 4.418-.26.021-.522.035-.787.035s-.527-.014-.787-.035c-.36-.337-1.818-1.803-2.807-4.406 1.07.256 2.26.416 3.569.416 1.33 0 2.538-.165 3.625-.428z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/import.svg b/comm/mail/themes/shared/mail/icons/new/touch/import.svg
new file mode 100644
index 0000000000..ac4ed0757b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/import.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24" height="24" width="24">
+ <path d="M17.5 5.5V16c0 1.385-1.115 2.5-2.5 2.5H6.5v.5c0 1.385 1.115 2.5 2.5 2.5h9c1.385 0 2.5-1.115 2.5-2.5V8c0-1.385-1.115-2.5-2.5-2.5Z" fill="context-fill"/>
+ <path d="M6 2C4.347 2 3 3.346 3 5v11c0 1.653 1.347 3 3 3 0 1.653 1.347 3 3 3h9c1.653 0 3-1.347 3-3V8c0-1.654-1.347-3-3-3 0-1.654-1.347-3-3-3Zm0 1h9c1.117 0 2 .883 2 2v11c0 1.116-.883 2-2 2H6c-1.117 0-2-.884-2-2V5c0-1.117.883-2 2-2Zm4.5 2a.5.5 0 0 0-.5.5v5.793L7.854 9.146A.5.5 0 0 0 7.5 9a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .707l3 3a.5.5 0 0 0 .036.026.5.5 0 0 0 .058.04.5.5 0 0 0 .074.04.5.5 0 0 0 .065.021.5.5 0 0 0 .086.014.5.5 0 0 0 .035.006.5.5 0 0 0 .035-.006.5.5 0 0 0 .086-.014.5.5 0 0 0 .065-.021.5.5 0 0 0 .074-.04.5.5 0 0 0 .058-.04.5.5 0 0 0 .036-.026l3-3a.5.5 0 0 0 0-.707.5.5 0 0 0-.708 0L11 11.293V5.5a.5.5 0 0 0-.5-.5ZM18 6c1.117 0 2 .883 2 2v11c0 1.116-.883 2-2 2H9c-1.117 0-2-.884-2-2h8c1.653 0 3-1.347 3-3zM6.5 13a.5.5 0 0 0-.5.5v.5c0 1.099.9 2 2 2h5c1.1 0 2-.901 2-2v-.5a.5.5 0 0 0-.5-.5.5.5 0 0 0-.5.5v.5c0 .562-.437 1-1 1H8c-.563 0-1-.438-1-1v-.5a.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/language.svg b/comm/mail/themes/shared/mail/icons/new/touch/language.svg
new file mode 100644
index 0000000000..73a0a48d33
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/language.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24" height="24" width="24">
+ <path d="M11.5 1.5a10 10 0 0 0-10 10 10 10 0 0 0 10 10 10 10 0 0 0 3.893-.807A.497.497 0 0 0 15 20.5h-.5c-.5 0-2-1.383-2-2.5v-3c0-1.117 1.383-2.5 2.5-2.5h6c.138 0 .28.023.424.063A10 10 0 0 0 21.5 11.5a10 10 0 0 0-10-10z" fill="context-fill"/>
+ <path d="M11.5 1C5.707 1 1 5.707 1 11.5S5.707 22 11.5 22c1.228 0 2.405-.215 3.5-.604V23.5a.5.5 0 0 0 .854.354l.853-.854 1-1 1-1H21c1.653 0 3-1.347 3-3v-2.736c0-.264-.095-.936-.129-1.135a3.017 3.017 0 0 0-1.894-1.965c.014-.22.023-.44.023-.664C22 5.707 17.293 1 11.5 1zm0 1c.283 0 .563.015.84.04.472.466 1.826 1.946 2.748 4.38A15.356 15.356 0 0 0 11.5 6c-1.315 0-2.511.162-3.588.42.922-2.434 2.276-3.914 2.748-4.38.277-.025.557-.04.84-.04zm-2.393.303A14.6 14.6 0 0 0 6.75 6.75a14.6 14.6 0 0 0-4.447 2.357 9.5 9.5 0 0 1 6.804-6.804zm4.786 0a9.5 9.5 0 0 1 6.804 6.804A14.6 14.6 0 0 0 16.25 6.75a14.6 14.6 0 0 0-2.357-4.447zM11.5 7c1.487 0 2.808.214 3.959.541A14.444 14.444 0 0 1 15.99 12H15c-1.653 0-3 1.347-3 3v.99a14.444 14.444 0 0 1-4.459-.531A14.444 14.444 0 0 1 7 11.5c0-1.487.214-2.808.541-3.959A14.444 14.444 0 0 1 11.5 7zm-5.08.912A15.356 15.356 0 0 0 6 11.5c0 1.315.162 2.511.42 3.588-2.434-.922-3.914-2.276-4.38-2.748A9.575 9.575 0 0 1 2 11.5c0-.283.015-.563.04-.84.466-.472 1.946-1.826 4.38-2.748zm10.16 0c2.434.922 3.914 2.276 4.38 2.748a8.295 8.295 0 0 1 .024 1.34H16.99a15.356 15.356 0 0 0-.41-4.088zM15 13h6c1.117 0 2 .883 2 2v3c0 1.117-.883 2-2 2h-2.5a.5.5 0 0 0-.354.146L16 22.293V20.5a.5.5 0 0 0-.5-.5H15c-1.117 0-2-.883-2-2v-3c0-1.117.883-2 2-2zm-12.7.89c.942.74 2.436 1.7 4.45 2.36a14.598 14.598 0 0 0 2.36 4.45 9.511 9.511 0 0 1-6.81-6.81zM15.5 16a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5zm1.975 0a.5.5 0 0 0 .025 1h1a.499.499 0 1 0 0-1h-1.025zm3.025 0a.5.5 0 0 0-.5.5.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5zm-12.588.58a15.356 15.356 0 0 0 4.088.41V18c0 .884.388 1.677.998 2.227-.276.339-.512.59-.658.734a9.723 9.723 0 0 1-.84.039 9.32 9.32 0 0 1-.84-.04c-.472-.466-1.826-1.946-2.748-4.38z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/lock.svg b/comm/mail/themes/shared/mail/icons/new/touch/lock.svg
new file mode 100644
index 0000000000..1dd16c6fa7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/lock.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24" height="24" width="24">
+ <path d="M6 8.5h12c1.385 0 2.5 1.115 2.5 2.5v8c0 1.385-1.115 2.5-2.5 2.5H6A2.495 2.495 0 0 1 3.5 19v-8c0-1.385 1.115-2.5 2.5-2.5Z" fill="context-fill"/>
+ <path d="M12 0C9.828 0 8.054.621 6.838 1.838 5.622 3.054 5 4.828 5 7v1.175A3.004 3.004 0 0 0 3 11v8c0 1.653 1.347 3 3 3h12c1.653 0 3-1.347 3-3v-8a3.004 3.004 0 0 0-2-2.825V7c0-2.172-.622-3.946-1.838-5.162C15.946.621 14.172 0 12 0Zm0 1c1.983 0 3.46.55 4.455 1.545C17.45 3.539 18 5.016 18 7v1H6V7c0-1.984.55-3.46 1.545-4.455C8.54 1.55 10.017 1 12 1ZM6 9h12c1.117 0 2 .883 2 2v8c0 1.116-.883 2-2 2H6c-1.117 0-2-.884-2-2v-8c0-1.117.883-2 2-2Zm6 4a1 1 0 0 0-1 1 1 1 0 0 0 .684.947L11 17h2l-.684-2.053A1 1 0 0 0 13 14a1 1 0 0 0-1-1Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/mail.svg b/comm/mail/themes/shared/mail/icons/new/touch/mail.svg
new file mode 100644
index 0000000000..7c703819dc
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/mail.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24">
+ <path d="M4 3C2.347 3 1 4.347 1 6v12c0 1.653 1.347 3 3 3h16c1.653 0 3-1.347 3-3V6c0-1.653-1.347-3-3-3Zm0 1h16c1.117 0 2 .883 2 2v12c0 1.117-.883 2-2 2H4c-1.117 0-2-.883-2-2V6c0-1.117.883-2 2-2Zm1.48 3a.5.5 0 0 0-.347.16.5.5 0 0 0 .027.707l4.299 3.967-4.313 4.312a.5.5 0 0 0 0 .708.5.5 0 0 0 .708 0l4.34-4.34 1.466 1.353a.5.5 0 0 0 .68 0l1.467-1.353 4.34 4.34a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.708l-4.313-4.312 4.299-3.967a.5.5 0 0 0 .027-.707.5.5 0 0 0-.347-.16.5.5 0 0 0-.36.133L12 12.82 5.84 7.133A.5.5 0 0 0 5.48 7Z" fill="context-stroke"/>
+ <path d="M4 4h16c1.108 0 2 .892 2 2v12c0 1.108-.892 2-2 2H4c-1.108 0-2-.892-2-2V6c0-1.108.892-2 2-2Z" fill="context-fill"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/overflow.svg b/comm/mail/themes/shared/mail/icons/new/touch/overflow.svg
new file mode 100644
index 0000000000..5a1bd9c22a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/overflow.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24">
+ <path d="M6.5 6a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .708l4.647 4.646-4.647 4.646a.5.5 0 0 0 0 .708.5.5 0 0 0 .708 0l5-5a.5.5 0 0 0 0-.708l-5-5A.5.5 0 0 0 6.5 6zm6 0a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .708l4.647 4.646-4.647 4.646a.5.5 0 0 0 0 .708.5.5 0 0 0 .708 0l5-5a.5.5 0 0 0 0-.708l-5-5A.5.5 0 0 0 12.5 6z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/paint-brush.svg b/comm/mail/themes/shared/mail/icons/new/touch/paint-brush.svg
new file mode 100644
index 0000000000..b42a86f835
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/paint-brush.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24" height="24" width="24">
+ <path d="M21.094 2.556C20.474 2.526 20 3 20 3c-7.5 7.5-10.5 7-10.5 10.5 0 0 1 0 1.5.5s.5 1.5.5 1.5c3.5 0 3-3 10.5-10.5 0 0 1-1 0-2-.313-.313-.624-.43-.906-.444ZM7 16c-.914 0-1.71.621-1.855 1.06L2.5 21.5c3.807 0 6.253-1.36 6.48-3.215A2 2 0 0 0 7 16Z" fill="context-fill"/>
+ <path d="M21.033 1.923a1.73 1.73 0 0 0-.42.08c-.501.168-.82.497-.82.497-3.723 3.722-6.816 5.954-8.398 7.093-.792.57-1.388 1.035-1.801 1.641-.382.56-.564 1.222-.59 2.055l-2.219 2.218a2.84 2.84 0 0 0-1.27.436c-.377.24-.67.515-.818.889L2.07 21.244A.5.5 0 0 0 2.5 22c1.963 0 3.598-.346 4.81-.967 1.213-.622 2.028-1.56 2.167-2.688a3.67 3.67 0 0 0 .013-.129l2.22-2.22c.833-.026 1.496-.209 2.056-.59.606-.413 1.07-1.01 1.64-1.8 1.14-1.583 3.372-4.677 7.094-8.4 0 0 .329-.318.496-.82.167-.501.122-1.268-.496-1.886a1.934 1.934 0 0 0-.986-.543 1.828 1.828 0 0 0-.48-.033Zm.178.973c.162 0 .343.072.582.31.382.383.337.615.254.864-.083.248-.254.43-.254.43a66.178 66.178 0 0 0-7.2 8.52c-.555.77-.965 1.27-1.39 1.56-.317.216-.78.261-1.27.312-.004-.028 0-.023-.005-.052-.073-.363-.207-.826-.575-1.194-.367-.368-.83-.501-1.193-.574-.029-.006-.025 0-.053-.006.051-.49.099-.953.315-1.27.29-.425.787-.835 1.558-1.39a66.18 66.18 0 0 0 8.52-7.2s.181-.17.43-.253a.882.882 0 0 1 .28-.057ZM9.695 14.011c.077.008.166.02.27.041.262.053.55.169.681.301.133.132.249.42.301.682.021.104.034.193.041.27l-1.697 1.697a2.525 2.525 0 0 0-1.293-1.293ZM7 16.5a1.492 1.492 0 0 1 1.484 1.724c-.089.728-.61 1.396-1.629 1.918-.827.424-2.035.672-3.423.77l2.142-3.596a.502.502 0 0 0 .045-.1c.009-.026.17-.261.432-.427.261-.166.605-.289.949-.29Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/pencil.svg b/comm/mail/themes/shared/mail/icons/new/touch/pencil.svg
new file mode 100644
index 0000000000..d85fbce409
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/pencil.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24" height="24" width="24">
+ <path d="m14.5 5.5-11 11s1.5-.5 3 1 1 3 1 3l11-11s.5-1.5-1-3-3-1-3-1" fill="context-fill"/>
+ <path d="M18.018 1.923c-.42.014-.7.102-.7.102a.5.5 0 0 0-.197.121l-13.5 13.5a.5.5 0 0 0-.13.225l-1.473 5.5a.5.5 0 0 0 .613.611l5.5-1.5a.5.5 0 0 0 .223-.129l13.5-13.5a.5.5 0 0 0 .12-.195s.158-.491.085-1.15c-.074-.66-.377-1.533-1.205-2.362-.83-.83-1.71-1.132-2.375-1.205a3.27 3.27 0 0 0-.461-.018Zm.078.997c.077 0 .168.004.273.015.473.052 1.107.248 1.777.918.672.672.869 1.298.92 1.764.047.415-.022.597-.037.646l-2.006 2.006c-.115-.624-.437-1.39-1.17-2.123-.74-.74-1.517-1.062-2.144-1.174l2.002-2.002c.039-.011.153-.05.385-.05Zm-3.024 2.998c.09-.001.194.003.31.015.466.052 1.093.249 1.764.92.672.672.869 1.298.92 1.764.034.298.008.51-.015.625L7.938 19.355c-.102-.596-.37-1.494-1.084-2.209-.724-.723-1.635-.99-2.231-1.088L14.725 5.957c.067-.016.182-.037.347-.04zm-10.853 11.1c.41.046 1.31.218 1.927.835.609.609.784 1.488.834 1.906l-1.865.51a1.603 1.603 0 0 0-.449-.935 1.597 1.597 0 0 0-.861-.438l-.086-.012Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/settings.svg b/comm/mail/themes/shared/mail/icons/new/touch/settings.svg
new file mode 100644
index 0000000000..d682abccca
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/settings.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24">
+ <path d="M11 1c-1.1 0-2 .9-2 2v1.668c-.67.272-1.3.63-1.873 1.072l-1.438-.83a2.007 2.007 0 0 0-2.732.733l-1 1.732c-.55.952-.22 2.183.732 2.732l1.42.82c-.052.357-.105.714-.109 1.075a.5.5 0 0 0 0 .012c.005.366.06.73.115 1.091l-1.426.823a2.007 2.007 0 0 0-.732 2.732l1 1.733a2.007 2.007 0 0 0 2.732.732l1.461-.844A7.975 7.975 0 0 0 9 19.334v1.701c0 1.1.9 2 2 2h2c1.1 0 2-.9 2-2v-1.703c.66-.268 1.28-.62 1.848-1.053l1.463.846c.952.55 2.182.22 2.732-.732l1-1.733c.55-.952.22-2.183-.732-2.732l-1.424-.824c.054-.365.109-.73.113-1.098A.5.5 0 0 0 20 12v-.016a.5.5 0 0 0 0-.006c-.005-.352-.058-.702-.11-1.05l1.42-.82a2.007 2.007 0 0 0 .733-2.733l-1-1.732a2.007 2.007 0 0 0-2.732-.733l-1.436.828A7.977 7.977 0 0 0 15 4.666V3c0-1.1-.9-2-2-2Zm0 1h2c.563 0 1 .437 1 1v1.947a.5.5 0 0 0 .336.473 6.992 6.992 0 0 1 2.224 1.27.5.5 0 0 0 .574.053l1.676-.967a.986.986 0 0 1 1.365.366l1 1.732a.986.986 0 0 1-.365 1.365l-1.698.98a.5.5 0 0 0-.24.53c.08.41.121.823.127 1.24v.004a6.996 6.996 0 0 1-.133 1.285.5.5 0 0 0 .24.532l1.704.984a.986.986 0 0 1 .365 1.365l-1 1.733a.986.986 0 0 1-1.365.365l-1.704-.985a.5.5 0 0 0-.572.051 6.994 6.994 0 0 1-2.2 1.254.5.5 0 0 0-.335.473v1.984c0 .563-.437 1-1 1h-2c-.563 0-1-.437-1-1v-1.982a.5.5 0 0 0-.336-.473 6.995 6.995 0 0 1-2.201-1.254.5.5 0 0 0-.572-.05l-1.702.982a.986.986 0 0 1-1.365-.365l-1-1.733a.986.986 0 0 1 .365-1.365l1.706-.984a.5.5 0 0 0 .24-.532A6.994 6.994 0 0 1 5 12.008a7.08 7.08 0 0 1 .127-1.258.5.5 0 0 0-.24-.53l-1.698-.98a.986.986 0 0 1-.365-1.365l1-1.732a.986.986 0 0 1 1.365-.366l1.678.97a.5.5 0 0 0 .574-.054A6.992 6.992 0 0 1 9.664 5.42.5.5 0 0 0 10 4.947V3c0-.563.437-1 1-1zm1 7c-1.65 0-3 1.35-3 3s1.35 3 3 3 3-1.35 3-3-1.35-3-3-3zm0 1c1.11 0 2 .89 2 2 0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2z" fill="context-stroke"/>
+ <path fill-opacity=".997" d="M11 1.5c-.831 0-1.5.669-1.5 1.5v1.947a7.5 7.5 0 0 0-2.383 1.365L5.44 5.345a1.496 1.496 0 0 0-2.048.549l-1 1.732a1.497 1.497 0 0 0 .548 2.049l1.698.98a7.5 7.5 0 0 0-.137 1.354 7.5 7.5 0 0 0 .145 1.369l-1.706.984a1.496 1.496 0 0 0-.548 2.05l1 1.732c.415.72 1.329.964 2.048.548l1.702-.982A7.5 7.5 0 0 0 9.5 19.053v1.982c0 .831.669 1.5 1.5 1.5h2c.831 0 1.5-.669 1.5-1.5v-1.984a7.5 7.5 0 0 0 2.357-1.344l1.704.984c.72.416 1.633.171 2.048-.548l1-1.733a1.497 1.497 0 0 0-.548-2.049l-1.704-.984A7.5 7.5 0 0 0 19.5 12v-.016a7.502 7.502 0 0 0-.137-1.33l1.698-.98c.72-.416.964-1.33.548-2.049l-1-1.732a1.496 1.496 0 0 0-2.048-.55l-1.676.968A7.5 7.5 0 0 0 14.5 4.947V3c0-.831-.669-1.5-1.5-1.5Zm1 8a2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5A2.5 2.5 0 0 1 9.5 12 2.5 2.5 0 0 1 12 9.5Z" fill="context-fill"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/subtract-circle.svg b/comm/mail/themes/shared/mail/icons/new/touch/subtract-circle.svg
new file mode 100644
index 0000000000..6c58a4e7c4
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/subtract-circle.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill-opacity="context-fill-opacity" height="24" width="24">
+ <path d="M11.5 1.5a10 10 0 0 0-10 10 10 10 0 0 0 10 10 10 10 0 0 0 10-10 10 10 0 0 0-10-10z" stroke-opacity="0.2" stroke="context-stroke" fill="context-fill"/>
+ <path d="M5.5 11a.5.5 0 0 0 0 1h12a.5.5 0 0 0 0-1h-12z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/sync.svg b/comm/mail/themes/shared/mail/icons/new/touch/sync.svg
new file mode 100644
index 0000000000..d7fe781c69
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/sync.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" version="1.1" viewBox="0 0 24 24" height="24" width="24">
+ <path d="M12 3a8.972 8.972 0 0 0-5.803 2.12.5.5 0 0 0-.058.704.5.5 0 0 0 .703.06A7.962 7.962 0 0 1 12 4c4.424 0 8 3.575 8 8v.293l-2.146-2.147a.5.5 0 0 0-.708 0 .5.5 0 0 0 0 .707l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.707.5.5 0 0 0-.708 0L21 12.293V12c0-4.965-4.035-9-9-9Zm-8.578 7.006a.5.5 0 0 0-.276.14l-3 3a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0L3 11.707v.3C3.004 16.969 7.038 21 12 21a8.972 8.972 0 0 0 5.816-2.131.5.5 0 0 0 .059-.705.5.5 0 0 0-.705-.059A7.963 7.963 0 0 1 12 20c-4.424 0-8-3.576-8-8v-.293l2.146 2.146a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.707l-3-3a.5.5 0 0 0-.432-.14z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/touch/tasks.svg b/comm/mail/themes/shared/mail/icons/new/touch/tasks.svg
new file mode 100644
index 0000000000..00945d1ffb
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/touch/tasks.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24">
+ <path d="M6 2c-1.108 0-2 .892-2 2v16c0 1.108.892 2 2 2h12c1.108 0 2-.892 2-2V4c0-1.108-.892-2-2-2h-1c0 1.108-.892 2-2 2H9c-1.108 0-2-.892-2-2Z" fill="context-fill"/>
+ <path d="M9 0c-.736 0-1.381.404-1.729 1H6C4.347 1 3 2.347 3 4v16c0 1.653 1.347 3 3 3h12c1.653 0 3-1.347 3-3V4c0-1.653-1.347-3-3-3h-1.271C16.38.404 15.736 0 15 0Zm0 1h6c.563 0 1 .437 1 1s-.437 1-1 1H9c-.563 0-1-.437-1-1s.437-1 1-1ZM6 2h1c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2h1c1.117 0 2 .883 2 2v16c0 1.117-.883 2-2 2H6c-1.117 0-2-.883-2-2V4c0-1.117.883-2 2-2Zm9.563 6.004a.5.5 0 0 0-.497.248l-3.675 6.432-2.537-2.538a.5.5 0 0 0-.708 0 .5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .788-.106l4-7a.5.5 0 0 0-.186-.682.5.5 0 0 0-.185-.062Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/trash-sm.svg b/comm/mail/themes/shared/mail/icons/new/trash-sm.svg
new file mode 100644
index 0000000000..2838bba881
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/trash-sm.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <path d="M2.531 2.42c-.572 0-1.033.461-1.033 1.037v.693c0 .192.153.346.344.346h.626l.032 5c.003.575.428 1 1 1h4c.572 0 1-.425 1-1v-5h.718a.344.346 0 0 0 .347-.346v-.693c0-.576-.462-1.037-1.034-1.037z" fill="context-fill"/>
+ <path d="M5.031 1c-.352 0-.703.158-.863.416a.914.914 0 0 0-.139.507H2.531c-.842 0-1.533.695-1.533 1.538v.693c0 .459.383.846.844.846h.13L2 9.504A1.51 1.51 0 0 0 3.5 11h4c.82 0 1.5-.677 1.5-1.5V5h.219c.46 0 .845-.387.845-.846v-.693c0-.843-.69-1.538-1.533-1.538H7.033a.914.914 0 0 0-.138-.507C6.735 1.158 6.384 1 6.031 1Zm-2.5 1.923h6c.302 0 .533.23.533.538V4H1.998v-.54c0-.308.231-.537.533-.537zM2.973 5H8v4.5c0 .327-.176.5-.5.5h-4c-.324 0-.498-.173-.5-.504ZM4.5 6a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5Zm2 0a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/unread-dot.svg b/comm/mail/themes/shared/mail/icons/new/unread-dot.svg
new file mode 100644
index 0000000000..09d4e5d622
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/unread-dot.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 16 16" height="16" width="16">
+ <path fill-opacity="1" d="M8 4.5A3.5 3.5 0 0 0 4.5 8 3.5 3.5 0 0 0 8 11.5 3.5 3.5 0 0 0 11.5 8 3.5 3.5 0 0 0 8 4.5Zm.518 1.552a.5.5 0 0 1 .11.016 2.007 2.007 0 0 1 1.415 2.45.5.5 0 0 1-.611.353.5.5 0 0 1-.354-.612.992.992 0 0 0-.707-1.224.5.5 0 0 1-.353-.614.5.5 0 0 1 .5-.369Z" fill="context-fill"/>
+ <path d="M8 4C5.797 4 4 5.796 4 8c0 2.203 1.797 4 4 4 2.203 0 4-1.797 4-4 0-2.204-1.797-4-4-4Zm0 1c1.663 0 3 1.337 3 3 0 1.662-1.337 3-3 3S5 9.662 5 8c0-1.663 1.337-3 3-3Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/new/unread-sm.svg b/comm/mail/themes/shared/mail/icons/new/unread-sm.svg
new file mode 100644
index 0000000000..0b3b12d3fb
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/new/unread-sm.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 12 12" height="12" width="12">
+ <path d="M4.957 2.5a3 3 0 0 1 .008.955l-.002.013-.002.006a3 3 0 0 1-.106.442l-.011.033a3 3 0 0 1-.158.383l-.03.058a3 3 0 0 1-.197.323c-.019.026-.037.054-.057.08l-.004.004a3 3 0 0 1-.601.601l-.004.004c-.026.02-.054.039-.08.057-.103.073-.21.138-.322.197l-.059.03a2.998 2.998 0 0 1-.383.158l-.033.011a3.008 3.008 0 0 1-.441.106l-.006.002-.014.002C2.305 5.988 2.152 6 2 6a3.037 3.037 0 0 1-.5-.047V8.5c0 .554.446 1 1 1h7c.554 0 1-.446 1-1v-5c0-.554-.446-1-1-1z" fill="context-fill"/>
+ <path d="M2 1C.901 1 0 1.901 0 3c0 1.098.901 2 2 2s2-.902 2-2c0-1.099-.901-2-2-2Zm0 1c.558 0 1 .441 1 1 0 .558-.442 1-1 1s-1-.442-1-1c0-.559.442-1 1-1Zm2.826 0c.112.313.174.65.174 1h4c.563 0 1 .437 1 1v4c0 .562-.437 1-1 1H3c-.563 0-1-.438-1-1V6a2.99 2.99 0 0 1-1-.174V8c0 1.099.9 2 2 2h6c1.1 0 2-.901 2-2V4c0-1.1-.9-2-2-2Zm3.729 2.002a.5.5 0 0 0-.367.107L6 5.859 4.498 4.656c-.187.28-.42.529-.687.732l.607.487-1.272 1.271a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0l1.35-1.35.484.387a.5.5 0 0 0 .625 0l.484-.386 1.35 1.35a.5.5 0 0 0 .707 0 .5.5 0 0 0 0-.708L7.582 5.875l1.23-.985a.5.5 0 0 0 .079-.703.5.5 0 0 0-.336-.185Z" fill="context-stroke"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/newmail.svg b/comm/mail/themes/shared/mail/icons/newmail.svg
new file mode 100644
index 0000000000..76fec41cdb
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/newmail.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" stroke="context-stroke" stroke-opacity="context-stroke-opacity" viewBox="0 0 16 16">
+ <path d="M8 1l1 4 4-2-2 4 4 1-4 1 2 4-4-2-1 4-1-4-4 2 2-4-4-1 4-1-2-4 4 2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/newmsg.svg b/comm/mail/themes/shared/mail/icons/newmsg.svg
new file mode 100644
index 0000000000..b77b63d3ca
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/newmsg.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M14.35 2.35l-.7-.7a2 2 0 0 0-2.83 0l-.38.38a.5.5 0 0 0 0 .7l2.83 2.83a.5.5 0 0 0 .7 0l.38-.38a2 2 0 0 0 0-2.83zM9.73 3.44a.5.5 0 0 0-.7 0L3.24 9.22a1.99 1.99 0 0 0-.46.71l-1.75 4.39a.5.5 0 0 0 .46.68.5.5 0 0 0 .19-.04l4.38-1.75a1.97 1.97 0 0 0 .72-.45l5.77-5.78a.5.5 0 0 0 0-.7zM5.16 12.5l-2.55 1.02a.1.1 0 0 1-.13-.13l1.02-2.56a.1.1 0 0 1 .16-.03l1.54 1.53a.1.1 0 0 1-.04.17z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/newsgroup.svg b/comm/mail/themes/shared/mail/icons/newsgroup.svg
new file mode 100644
index 0000000000..be8154de7a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/newsgroup.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"><path d="M3 16h10a3 3 0 003-3V3a3 3 0 00-3-3H7a3 3 0 00-3 3v10c0 1.08-1.03 1-1.03 1M3 16s3 0 3-3V3a1 1 0 011-1h6a1 1 0 011 1v10a1 1 0 01-1 1H3"/><path d="M11.75 4.88h-3.5c-.55 0-.55-1 0-1h3.5c.54 0 .54 1 0 1zm0 2h-3.5c-.55 0-.55-1 0-1h3.5c.54 0 .54 1 0 1zm0 2h-3.5c-.55 0-.55-1 0-1h3.5c.54 0 .54 1 0 1zm-2.02 2H8.24c-.55 0-.55-1 0-1h1.48c.54 0 .54 1 0 1zM5 4H3a3 3 0 00-3 3v6a3 3 0 003 3h2m0-2H3a1 1 0 01-1-1V7a1 1 0 011-1h2"/></svg>
diff --git a/comm/mail/themes/shared/mail/icons/nextmsg.svg b/comm/mail/themes/shared/mail/icons/nextmsg.svg
new file mode 100644
index 0000000000..a2e9eb6b19
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/nextmsg.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M8 12a1 1 0 0 1-.707-.293l-5-5a1 1 0 0 1 1.414-1.414L8 9.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-5 5A1 1 0 0 1 8 12z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/nextunread.svg b/comm/mail/themes/shared/mail/icons/nextunread.svg
new file mode 100644
index 0000000000..0da22e4256
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/nextunread.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M13 4a1 1 0 0 0-.707.293L8 8.586 3.707 4.293a1 1 0 0 0-1.414 1.414l5 5a1 1 0 0 0 1.414 0l5-5A1 1 0 0 0 13 4z"/>
+ <circle cx="13" cy="11" r="2"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/notification-fill-12.svg b/comm/mail/themes/shared/mail/icons/notification-fill-12.svg
new file mode 100644
index 0000000000..6af8d91526
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/notification-fill-12.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12" fill-opacity="context-fill-opacity">
+ <circle fill="context-fill" cx="6" cy="6" r="3"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/notloading.png b/comm/mail/themes/shared/mail/icons/notloading.png
new file mode 100644
index 0000000000..0a4dc149e3
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/notloading.png
Binary files differ
diff --git a/comm/mail/themes/shared/mail/icons/notloading@2x.png b/comm/mail/themes/shared/mail/icons/notloading@2x.png
new file mode 100644
index 0000000000..a073eaf8e8
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/notloading@2x.png
Binary files differ
diff --git a/comm/mail/themes/shared/mail/icons/number-list.svg b/comm/mail/themes/shared/mail/icons/number-list.svg
new file mode 100644
index 0000000000..4b4744f255
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/number-list.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M7 5h7c1.33 0 1.33-2 0-2H7C5.67 3 5.67 5 7 5zm7 6H7c-1.33 0-1.33 2 0 2h7c1.33 0 1.33-2 0-2zM2.25 6.37V2.8c-.38.28-.75.6-1.2.75C.72 3.66.4 3.3.51 3c.08-.23.35-.3.55-.4.54-.24 1-.63 1.33-1.13.12-.2.3-.42.56-.33.3.07.38.4.36.67v4.49c0 .27-.1.62-.41.68-.27.07-.58-.1-.63-.38a.96.96 0 0 1-.03-.24zm-.4 7.61h2.14c.27 0 .56.21.52.51-.01.27-.29.44-.54.41H1.05c-.33 0-.63-.33-.54-.66.08-.32.27-.6.52-.82.5-.49 1-.99 1.57-1.4.4-.32.78-.78.74-1.32-.04-.45-.48-.8-.92-.77-.4.01-.76.28-.86.67-.11.24-.19.58-.49.63-.3.08-.6-.2-.55-.5.02-.67.5-1.26 1.13-1.46a2.77 2.77 0 0 1 1.7 0 1.6 1.6 0 0 1 1.04 1.77c-.07.47-.35.87-.68 1.2-.55.52-1.2.94-1.7 1.51-.06.1-.11.15-.17.23z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/offline.svg b/comm/mail/themes/shared/mail/icons/offline.svg
new file mode 100644
index 0000000000..aa52393be2
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/offline.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill">
+ <path d="M3.08 2.04a.93.93 0 00-.74.3 8 8 0 000 11.32c.83.82 2.34-.5 1.42-1.42a6 6 0 010-8.48c.68-.69.06-1.66-.68-1.71zM13.7 6.56c.88 1.86-.1 4.79-1.47 5.68-1.03.8.5 2.34 1.42 1.42 2.4-1.96 3.06-5.79 1.58-8.92M5.2 4.17a.93.93 0 00-.74.3 5 5 0 000 7.07c.93.92 2.34-.5 1.42-1.42a3 3 0 010-4.24c.7-.69.06-1.66-.68-1.71zm4.92 5.95c-.92.92.5 2.34 1.42 1.42 1.4-1.66 1.42-2.43 1.31-4.27M7.95 6A2 2 0 006 8c0 1.1 1.62 1.58 2.4.8l.5-.5C9.68 7.52 9.1 6 8 6"/>
+ <path fill="#f60e0e" d="M13.3 1.278L1.304 13.27c-.976.95.471 2.39 1.415 1.42L14.72 2.692c.92-.921-.51-2.321-1.42-1.414z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/online.svg b/comm/mail/themes/shared/mail/icons/online.svg
new file mode 100644
index 0000000000..18041fbacf
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/online.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M3.08 2.04a.93.93 0 00-.74.3 8 8 0 000 11.32c.83.82 2.34-.5 1.42-1.42a6 6 0 010-8.48c.68-.69.06-1.66-.68-1.71zm9.84 0c-.74.06-1.37 1.03-.68 1.72a5.98 5.98 0 010 8.48c-.92.92.5 2.34 1.42 1.42a8 8 0 000-11.32.93.93 0 00-.74-.3zM5.2 4.18a.93.93 0 00-.74.3 5 5 0 000 7.07c.93.92 2.34-.5 1.42-1.42a3 3 0 010-4.24c.7-.69.06-1.66-.68-1.71zm5.6 0c-.74.05-1.37 1.02-.68 1.7a3.01 3.01 0 010 4.25c-.92.92.5 2.34 1.42 1.42a5 5 0 000-7.07.93.93 0 00-.74-.3zM7.95 6A2 2 0 006 8a2 2 0 002 2 2 2 0 002-2 2 2 0 00-2-2 2 2 0 00-.05 0z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/operator.png b/comm/mail/themes/shared/mail/icons/operator.png
new file mode 100644
index 0000000000..1853d3a019
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/operator.png
Binary files differ
diff --git a/comm/mail/themes/shared/mail/icons/outbox.svg b/comm/mail/themes/shared/mail/icons/outbox.svg
new file mode 100644
index 0000000000..124a54c2e8
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/outbox.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" width="16" height="16"><path d="M13.5 1H11c-1.33 0-1.33 2 0 2h2.5c.28 0 .5.23.5.5v9.12a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5V3.5c0-.27.22-.5.5-.5H5c1.33 0 1.33-2 0-2H2.5A2.5 2.5 0 000 3.5v9.12a2.5 2.5 0 002.5 2.5h11a2.5 2.5 0 002.5-2.5V3.5A2.5 2.5 0 0013.5 1z"/><path d="M14.67 9.01L10.98 9c-.13 1.89-1.04 3-2.48 3h-1c-1.44 0-2.35-1.11-2.48-3l-3.64-.01v-.96L5.5 8c.27 0 .5.22.5.5 0 .75.14 2.5 1.5 2.5h1C9.85 11 10 9.25 10 8.5c0-.28.22-.5.5-.5l4.17.01"/><path d="M12.02 5.74a.97.97 0 00-.4-.72L8 2 4.38 5.02c-.98.85.25 2.33 1.27 1.53L7 5.43v2.64c0 1.25 2 1.23 2 0V5.43l1.35 1.12c.77.67 1.7-.05 1.67-.81z"/></svg>
diff --git a/comm/mail/themes/shared/mail/icons/outdent.svg b/comm/mail/themes/shared/mail/icons/outdent.svg
new file mode 100644
index 0000000000..1049e27100
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/outdent.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M2 1C.667 1 .667 3 2 3h12c1.33 0 1.33-2 0-2H2zm2.756 2.965c-.254.01-.514.127-.727.394L1 8l3.029 3.64c.859.98 2.348-.26 1.539-1.28L4.449 9h2.352c1.258 0 1.241-2 0-2H4.449l1.119-1.359c.675-.771-.049-1.708-.812-1.676zM10 5c-1.333 0-1.333 2 0 2h4c1.33 0 1.33-2 0-2h-4zm0 4c-1.333 0-1.333 2 0 2h4c1.33 0 1.33-2 0-2h-4zm-8 4c-1.333 0-1.333 2 0 2h12c1.33 0 1.33-2 0-2H2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/overflow-indicator.png b/comm/mail/themes/shared/mail/icons/overflow-indicator.png
new file mode 100644
index 0000000000..f87112df5d
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/overflow-indicator.png
Binary files differ
diff --git a/comm/mail/themes/shared/mail/icons/overflow.svg b/comm/mail/themes/shared/mail/icons/overflow.svg
new file mode 100644
index 0000000000..478e3ea906
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/overflow.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M8.707 7.293l-5-5a1 1 0 0 0-1.414 1.414L6.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414l5-5a1 1 0 0 0 0-1.414zm6 0l-5-5a1 1 0 0 0-1.414 1.414L12.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414l5-5a1 1 0 0 0 0-1.414z"></path></svg>
diff --git a/comm/mail/themes/shared/mail/icons/paragraph.svg b/comm/mail/themes/shared/mail/icons/paragraph.svg
new file mode 100644
index 0000000000..d9cac2c35a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/paragraph.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M5 1C0 1 0 8 5 8h1v6c0 1.5 2 1.5 2 0V3h2v11c0 1.5 2 1.5 2 0V3h2c1.5 0 1.5-2 0-2zm0 2h1v3H5C3 6 3 3 5 3z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/paste.svg b/comm/mail/themes/shared/mail/icons/paste.svg
new file mode 100644
index 0000000000..64b77646c8
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/paste.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M11 2H9.95a2.5 2.5 0 0 0-4.9 0H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm0 7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5h7zm0-5H4V3h1.05a1 1 0 0 0 .98-.8 1.5 1.5 0 0 1 2.939 0 1 1 0 0 0 .98.8H11zM7.5 2a.5.5 0 1 0 .5.5.5.5 0 0 0-.5-.5zm-2 5h4a.5.5 0 0 0 0-1h-4a.5.5 0 0 0 0 1zm0 2h2a.5.5 0 0 0 0-1h-2a.5.5 0 0 0 0 1z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/phishing.svg b/comm/mail/themes/shared/mail/icons/phishing.svg
new file mode 100644
index 0000000000..33206944f4
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/phishing.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M8 .98l-4.47.77C2.64 1.91 2 2.68 2 3.57c0 1.03 0 2.87.08 3.71.04 1.9.67 3.75 1.8 5.29a6.31 6.31 0 004 2.44H8l.09-.02a6.2 6.2 0 004.01-2.42 8.99 8.99 0 001.8-5.29c.1-.84.1-2.68.1-3.7 0-.9-.64-1.67-1.53-1.83zm0 2.04l4 .68c0 1.62.05 2.76 0 3.3a7.6 7.6 0 01-1.49 4.38A4.2 4.2 0 018 12.99c-1-.21-1.9-.79-2.51-1.61A7.56 7.56 0 014 7c-.05-.54 0-1.68 0-3.3zM8 4a1 1 0 00-1 1v3c0 1.33 2 1.33 2 0V5a1 1 0 00-1-1zm1 7a1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1 1 1 0 011 1z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/pill-indicator.svg b/comm/mail/themes/shared/mail/icons/pill-indicator.svg
new file mode 100644
index 0000000000..fefd655d5b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/pill-indicator.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill="context-fill" stroke="context-stroke" width="8" height="6" viewBox="0 0 8 6">
+ <circle stroke-width="2" cx="4" cy="2" r="3"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/pluginBlocked.svg b/comm/mail/themes/shared/mail/icons/pluginBlocked.svg
new file mode 100644
index 0000000000..5aafbcea90
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/pluginBlocked.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+ <path d="M6 7h6a2 2 0 0 0 0-4H6a2 2 0 0 0 0 4zm14 0h6a2 2 0 0 0 0-4h-6a2 2 0 0 0 0 4zm8 2H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h11.349A9.987 9.987 0 0 1 30 16.014V11a2 2 0 0 0-2-2z" fill="#ff0039"/>
+ <circle cx="24" cy="24" r="8" fill="#a4000f"/>
+ <rect x="18" y="22" width="12" height="4" rx="1" ry="1" fill="#fff"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/popular.svg b/comm/mail/themes/shared/mail/icons/popular.svg
new file mode 100644
index 0000000000..5496a888f1
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/popular.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M15.207 2.793a1 1 0 0 0-.932-.268l-6.5 1.5a1 1 0 1 0 .45 1.949l3.1-.716L6.5 10.086 5.207 8.793a1 1 0 0 0-1.414 0l-3 3a1 1 0 1 0 1.414 1.414L4.5 10.914l1.293 1.293a1 1 0 0 0 1.414 0l5.535-5.535-.716 3.1a1 1 0 0 0 .75 1.2A1.025 1.025 0 0 0 13 11a1 1 0 0 0 .974-.775l1.5-6.5a1 1 0 0 0-.267-.932z"></path></svg> \ No newline at end of file
diff --git a/comm/mail/themes/shared/mail/icons/previousmsg.svg b/comm/mail/themes/shared/mail/icons/previousmsg.svg
new file mode 100644
index 0000000000..b5995f3162
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/previousmsg.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M13 11a1 1 0 0 1-.707-.293L8 6.414l-4.293 4.293a1 1 0 0 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5 5A1 1 0 0 1 13 11z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/previousunread.svg b/comm/mail/themes/shared/mail/icons/previousunread.svg
new file mode 100644
index 0000000000..ef2fdde046
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/previousunread.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M13 12a1 1 0 0 1-.707-.293L8 7.414l-4.293 4.293a1 1 0 0 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5 5A1 1 0 0 1 13 12z"/>
+ <circle cx="12" cy="4" r="2"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/print.svg b/comm/mail/themes/shared/mail/icons/print.svg
new file mode 100644
index 0000000000..16c12fade0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/print.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M14 5h-1V1a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v4H2a2 2 0 0 0-2 2v5h3v3a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-3h3V7a2 2 0 0 0-2-2zM2.5 8a.5.5 0 1 1 .5-.5.5.5 0 0 1-.5.5zm9.5 7H4v-5h8zm0-10H4V1h8zm-6.5 7h4a.5.5 0 0 0 0-1h-4a.5.5 0 1 0 0 1zm0 2h5a.5.5 0 0 0 0-1h-5a.5.5 0 1 0 0 1z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/privacy-security.svg b/comm/mail/themes/shared/mail/icons/privacy-security.svg
new file mode 100644
index 0000000000..45e70a78ae
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/privacy-security.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M12 7c1 0 2 1 2 2v4c0 1-1 2-2 2H4c-1 0-2-1-2-2V9c0-1 1-2 2-2V5c0-5.33 8-5.33 8 0zm-2 0V5c0-2.67-4-2.67-4 0v2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/quit.svg b/comm/mail/themes/shared/mail/icons/quit.svg
new file mode 100644
index 0000000000..cdc1c3e321
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/quit.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M8 6a1 1 0 0 0 1-1V1a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1zm3.5-4.032a1 1 0 0 0-1 1.732A4.95 4.95 0 0 1 13 8 5 5 0 0 1 3 8a4.95 4.95 0 0 1 2.5-4.3 1 1 0 0 0-1-1.73 7 7 0 1 0 7 0z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/quote.svg b/comm/mail/themes/shared/mail/icons/quote.svg
new file mode 100644
index 0000000000..b0f1d1c056
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/quote.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M7 5.959c.107 1.46-.084 2.775-.58 3.935-.532 1.238-1.529 2.235-2.952 2.99a1 1 0 1 1-.936-1.768c1.041-.552 1.71-1.221 2.049-2.01a4.67 4.67 0 0 0 .072-.177A3 3 0 1 1 7 5.959zm7 0c.107 1.46-.084 2.775-.58 3.935-.532 1.238-1.529 2.235-2.952 2.99a1 1 0 1 1-.936-1.768c1.041-.552 1.71-1.221 2.049-2.01a4.67 4.67 0 0 0 .072-.177A3 3 0 1 1 14 5.959z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/read.svg b/comm/mail/themes/shared/mail/icons/read.svg
new file mode 100644
index 0000000000..3f71111ca8
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/read.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" stroke="context-stroke" stroke-opacity="context-stroke-opacity" viewBox="0 0 16 16">
+ <circle stroke-width="2" cx="8" cy="8" r="3"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/readcol.svg b/comm/mail/themes/shared/mail/icons/readcol.svg
new file mode 100644
index 0000000000..52069242fb
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/readcol.svg
@@ -0,0 +1,9 @@
+<!-- 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/. -->
+
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="context-fill">
+ <circle cx="3.5" cy="6.3" r="2" fill-opacity=".5" />
+ <circle cx="9" cy="6.3" r="2" fill-opacity=".5" />
+ <path d="M2.94 4.02a2.5 2.5 0 0 0-2.5 2.5 2.48 2.48 0 1 0 4.94-.38c.14-.05.37-.16.53-.16.25 0 .41.1.56.2a2.5 2.5 0 0 0 2.47 2.84 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5c-.9 0-1.69.5-2.13 1.21a2.38 2.38 0 0 0-.97-.25c-.29 0-.59.13-.8.22a2.48 2.48 0 0 0-2.1-1.18zm0 1.03c.83 0 1.47.63 1.47 1.47a1.5 1.5 0 0 1-1.47 1.53c-.84 0-1.5-.7-1.5-1.53 0-.84.66-1.47 1.5-1.47zm6 0c.83 0 1.5.63 1.5 1.47 0 .83-.67 1.53-1.5 1.53-.84 0-1.5-.7-1.5-1.53 0-.84.66-1.47 1.5-1.47z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/reader-mode.svg b/comm/mail/themes/shared/mail/icons/reader-mode.svg
new file mode 100644
index 0000000000..462ef7dfbb
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/reader-mode.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M12 0H4a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3zm1 13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1z"></path><path fill="context-fill" d="M10.5 5h-5a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1zm0 2h-5a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1zm0 2h-5a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1zm-3 2h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 0 1z"></path></svg> \ No newline at end of file
diff --git a/comm/mail/themes/shared/mail/icons/redirect.svg b/comm/mail/themes/shared/mail/icons/redirect.svg
new file mode 100644
index 0000000000..2cf3630e47
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/redirect.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M12.24 3.96c-.76-.03-1.48.91-.81 1.68L13.36 8l-1.93 2.36c-.8 1.02.68 2.26 1.53 1.28L16 8l-3.04-3.64a.97.97 0 00-.72-.4zM8.05 4c-.74-.01-1.42.88-.82 1.64l1.12 1.34H6.19a3.96 3.96 0 01-2.65-.9 6 6 0 01-.45-.4l-.38-.39c-.95-.97-2.4.47-1.42 1.42l.4.4c.2.19.39.36.6.53A5.94 5.94 0 006.2 8.99h2.17l-1.15 1.37c-.9 1.03.69 2.35 1.54 1.28L11.8 8 8.77 4.36A.97.97 0 008.05 4z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/remote-blocked.svg b/comm/mail/themes/shared/mail/icons/remote-blocked.svg
new file mode 100644
index 0000000000..32a41b70a3
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/remote-blocked.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill">
+ <path d="M13 5c0 1.33 2 1.33 2 0V4c-.15-1.65-1.34-3-3-3H3C1.34 1 0 2.34 0 4v8c0 1.66 1.34 3 3 3h2c1.28 0 1.3-2 0-2H3c-.55 0-1.47-.73-1-1l3.5-2c.97-.4.36-1.14 0-1L2 11V8.5L5 6l2 1.6 2-2.1 1.6.5V5L9 4.5 7 6.6 5 5 2 7.5V4c0-.55.45-1 1-1h9c.55 0 1 .45 1 1z"/>
+ <path d="M11.5 7a4.5 4.5 0 0 1 4.5 4.5 4.5 4.5 0 0 1-4.5 4.5A4.5 4.5 0 0 1 7 11.5 4.5 4.5 0 0 1 11.5 7zm0 1.28a3.22 3.22 0 0 0-1.74.53l4.4 4.5a3.22 3.22 0 0 0 .57-1.8 3.22 3.22 0 0 0-3.23-3.2zM8.83 9.7a3.22 3.22 0 0 0-.56 1.8 3.22 3.22 0 0 0 3.23 3.23 3.22 3.22 0 0 0 1.74-.53z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/remove-text-styling.svg b/comm/mail/themes/shared/mail/icons/remove-text-styling.svg
new file mode 100644
index 0000000000..49a29a4691
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/remove-text-styling.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+ <path d="M6.04 1a.8.8 0 00-.55.22c-.1.08-.17.2-.22.33l-.06.13L1.07 12c-.42.87 1.12 1.62 1.55.63l1.3-3h1.81L7.36 7.9H4.58l1.46-3.4 1.45 3.24 1.31-1.4-1.94-4.66-.05-.13a.86.86 0 00-.32-.41.8.8 0 00-.1-.06l-.12-.05a.78.78 0 00-.11-.02L6.04 1zM6.4 10.86a1.5 1.5 0 00.07 2.12l2.2 2.04c.6.57 1.55.53 2.11-.06l4.1-4.39c.56-.6.53-1.56-.07-2.12L12.6 6.4a1.5 1.5 0 00-2.11.07l-3.08 3.3zm.73.68l1.03-1.1 2.92 2.73-1.03 1.1c-.2.2-.5.22-.7.02l-2.2-2.04a.49.49 0 01-.02-.71zm1.7-1.83l2.4-2.55c.2-.21.5-.22.7-.03l2.2 2.05c.2.2.21.5.02.7l-2.4 2.56z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/reply-forward-redirect.svg b/comm/mail/themes/shared/mail/icons/reply-forward-redirect.svg
new file mode 100644
index 0000000000..4cab92e0db
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/reply-forward-redirect.svg
@@ -0,0 +1,8 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M12.55 5c-1 0-1.38.14-1.81.48-.32.25-.34.24-.63.53-.95.96-2.38-.48-1.41-1.42.3-.33.49-.4.79-.67A4.52 4.52 0 0112.58 3l-.94-1.16c-1-1.03.69-2.44 1.53-1.28L16 4l-2.83 3.44c-.86.9-2.26-.27-1.53-1.28z"/>
+ <path fill="context-stroke" fill-opacity="context-fill-opacity" d="M3.46 5.03l.9 1.13c.9 1.03-.68 2.35-1.53 1.28L0 4 2.83.56c.86-.98 2.35.26 1.54 1.28L3.4 3.03c5.18-.57 5.7 3.62 3.17 5.35-1.11.85-2.28-.68-1.3-1.56 2.38-2.01-1.2-1.79-1.82-1.79z"/>
+ <path fill="#f68a16" fill-opacity="context-fill-opacity" d="M12.44 8.16c-.76-.03-1.48.91-.81 1.68L13.36 12l-1.73 2.16c-.8 1.02.68 2.26 1.53 1.28L16 12l-2.84-3.44a.97.97 0 00-.72-.4zm-4.19.04c-.74-.01-1.42.88-.82 1.64L8.35 11H6.19c-.96.03-1.9-.3-2.65-.92-.32-.25-.54-.5-.83-.8-.95-.96-2.4.48-1.42 1.43.3.33.7.66 1 .93 1.1.9 2.49 1.4 3.91 1.36h2.17l-.95 1.16c-.9 1.03.69 2.35 1.54 1.28L11.8 12 8.97 8.56a.97.97 0 00-.72-.36z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/reply-forward.svg b/comm/mail/themes/shared/mail/icons/reply-forward.svg
new file mode 100644
index 0000000000..19ee508fb0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/reply-forward.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M12.21 6.02h-1.15c-1.1 0-1.92-.13-2.66.46-.32.25-.34.24-.63.53-.95.96-2.38-.48-1.41-1.42.3-.33.49-.4.79-.67 1.07-.86 2.34-.92 3.93-.9h1.16l-.94-1.18c-1-1.03.69-2.44 1.53-1.28L15.66 5l-2.83 3.44c-.86.9-2.26-.27-1.53-1.28z"/>
+ <path fill="context-stroke" fill-opacity="context-fill-opacity" d="M3.66 11.03l.9 1.13c.9 1.03-.68 2.35-1.53 1.28L.2 10l2.83-3.44c.86-.98 2.35.26 1.54 1.28L3.6 9.03c4.07 0 5.8.05 6.6 1.67.67 1.73.3 2.61-2.03 4.18-1.11.85-2.28-.68-1.3-1.56.95-.74 1.78-1.16 1.55-1.73-.3-.56-1.54-.56-4.77-.56z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/reply-redirect.svg b/comm/mail/themes/shared/mail/icons/reply-redirect.svg
new file mode 100644
index 0000000000..cf271db85f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/reply-redirect.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M12.44.16c-.76-.03-1.48.91-.81 1.68L13.36 4l-1.73 2.16c-.8 1.02.68 2.26 1.53 1.28L16 4 13.16.56a.97.97 0 00-.72-.4zM8.25.2c-.74-.01-1.42.88-.82 1.64L8.35 3H6.19c-.96.03-1.9-.3-2.65-.92-.32-.25-.54-.5-.83-.8-.95-.96-2.4.48-1.42 1.43.3.33.7.66 1 .93 1.1.9 2.49 1.4 3.91 1.36h2.17l-.95 1.16c-.9 1.03.69 2.35 1.54 1.28L11.8 4 8.97.56A.97.97 0 008.25.2z"/>
+ <path fill="context-stroke" fill-opacity="context-fill-opacity" d="M3.66 11.03l.9 1.13c.9 1.03-.68 2.35-1.53 1.28L.2 10l2.83-3.44c.86-.98 2.35.26 1.54 1.28L3.6 9.03c4.07 0 5.8.05 6.6 1.67.67 1.73.3 2.61-2.03 4.18-1.11.85-2.28-.68-1.3-1.56.95-.74 1.78-1.16 1.55-1.73-.3-.56-1.54-.56-4.77-.56z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/reply.svg b/comm/mail/themes/shared/mail/icons/reply.svg
new file mode 100644
index 0000000000..e19b2a9b8f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/reply.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M6.663 6.033L7.768 7.36a1 1 0 1 1-1.536 1.28L3.198 5l3.034-3.64a1 1 0 0 1 1.536 1.28L6.612 4.028c4.068.15 6.474.909 7.282 2.525.933 1.864-.237 4.204-3.187 7.154a1 1 0 1 1-1.414-1.414c2.384-2.384 3.214-4.044 2.813-4.846-.366-.73-2.2-1.277-5.443-1.414z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/replyall.svg b/comm/mail/themes/shared/mail/icons/replyall.svg
new file mode 100644
index 0000000000..40166471ad
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/replyall.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M7.963 6.033L9.068 7.36c.899 1.028-.687 2.35-1.536 1.28L4.498 5l3.034-3.64c.857-.98 2.345.26 1.536 1.28L7.912 4.028c4.068.15 5.178.909 5.978 2.525.94 1.864-.23 4.207-3.18 7.157-.946.97-2.393-.47-1.417-1.42 2.387-2.381 3.217-4.041 2.817-4.843-.37-.73-.9-1.277-4.147-1.414zM3.498 5l1.985 2.36c.899 1.028-.687 2.35-1.536 1.28L.913 5l3.034-3.64c.857-.98 2.345.26 1.536 1.28z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/replylist.svg b/comm/mail/themes/shared/mail/icons/replylist.svg
new file mode 100644
index 0000000000..58423a5cb4
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/replylist.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M15 8.758a4.474 4.474 0 0 0-2-.73V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h4.256a4.51 4.51 0 0 0 1.415 2H4a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v5.758zM9.671 9H5.5a.5.5 0 0 1 0-1h5a.5.5 0 0 1 .447.275A4.494 4.494 0 0 0 9.67 9zm-1.415 2H5.5a.5.5 0 1 1 0-1h3.258a4.484 4.484 0 0 0-.502 1zM10.5 5h-5a.5.5 0 0 1 0-1h5a.5.5 0 1 1 0 1zm0 2h-5a.5.5 0 0 1 0-1h5a.5.5 0 1 1 0 1z"/>
+ <path d="M12.5 16a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm-.793-3H14.5a.5.5 0 1 0 0-1h-2.793l1.147-1.146a.5.5 0 0 0-.708-.708l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L11.707 13z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/restore.svg b/comm/mail/themes/shared/mail/icons/restore.svg
new file mode 100644
index 0000000000..dce3219ef7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/restore.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path transform="scale(-1,1) translate(-16,0)" fill="context-fill" d="M15 1a1 1 0 0 0-1 1v2.418A6.995 6.995 0 1 0 8 15a6.954 6.954 0 0 0 4.95-2.05 1 1 0 0 0-1.414-1.414A5.019 5.019 0 1 1 12.549 6H10a1 1 0 0 0 0 2h5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"></path></svg>
diff --git a/comm/mail/themes/shared/mail/icons/return-receipt.svg b/comm/mail/themes/shared/mail/icons/return-receipt.svg
new file mode 100644
index 0000000000..e6d38e097a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/return-receipt.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M6 16a.99.99 0 01-.7-.29l-3-3c-.95-.94.46-2.36 1.4-1.42l2.16 2.16 5.32-7.62c.76-1.1 2.4.05 1.64 1.14l-6 8.6c-.17.24-.44.4-.73.43H6z"/>
+ <path d="M5.6 11.01a.99.99 0 01-.71-.29l-3-3c-.94-.95.46-2.35 1.41-1.43l2.16 2.17L10.77.83c.76-1.1 2.41.05 1.65 1.15l-6 8.6c-.17.24-.44.4-.74.43H5.6z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/right-align.svg b/comm/mail/themes/shared/mail/icons/right-align.svg
new file mode 100644
index 0000000000..36406efefe
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/right-align.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M2 1C.667 1 .667 3 2 3h12c1.33 0 1.33-2 0-2zm2 4C2.667 5 2.667 7 4 7h10c1.33 0 1.33-2 0-2zM2 9C.667 9 .667 11 2 11h12c1.33 0 1.33-2 0-2zm1 4c-1.333 0-1.333 2 0 2h11c1.33 0 1.33-2 0-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/save-as.svg b/comm/mail/themes/shared/mail/icons/save-as.svg
new file mode 100644
index 0000000000..0207fb6045
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/save-as.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M14 3h-2v2h2v8H2V5h7V3h-.849L6.584 1.538A2 2 0 0 0 5.219 1H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM2 3h3.219l1.072 1H2z"/>
+ <path d="M8.146 6.146a.5.5 0 0 0 0 .707l2 2a.5.5 0 0 0 .707 0l2-2a.5.5 0 1 0-.707-.707L11 7.293V.5a.5.5 0 0 0-1 0v6.793L8.854 6.146a.5.5 0 0 0-.708 0z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/save.svg b/comm/mail/themes/shared/mail/icons/save.svg
new file mode 100644
index 0000000000..f37a6c703d
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/save.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M9 3H3v10h10V5.828L10.172 3H3v3h5a1 1 0 0 0 1-1V3zM3 1h7.172a2 2 0 0 1 1.414.586l2.828 2.828A2 2 0 0 1 15 5.828V13a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm5 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/search-folder.svg b/comm/mail/themes/shared/mail/icons/search-folder.svg
new file mode 100644
index 0000000000..71bad4fa05
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/search-folder.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" width="16" height="16" viewBox="0 0 16 16">
+ <path d="M14 3H8.15L6.58 1.54A2 2 0 005.22 1H2a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2zM5.22 3l1.07 1H2V3zM14 13H2V5h6v-.01l.15.01H14z"/>
+ <path d="M10.9 11.37L9.08 9.56a2.25 2.25 0 10-.53.53l1.8 1.8a.37.37 0 00.53-.52zM7.25 9.76a1.5 1.5 0 111.5-1.5 1.5 1.5 0 01-1.5 1.5z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/search-not-found.svg b/comm/mail/themes/shared/mail/icons/search-not-found.svg
new file mode 100644
index 0000000000..eed3e08712
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/search-not-found.svg
@@ -0,0 +1,11 @@
+<!-- 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/. -->
+<!DOCTYPE svg [
+ <!ENTITY % quickFilterBarDTD SYSTEM "chrome://messenger/locale/quickFilterBar.dtd">
+ %quickFilterBarDTD;
+]>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 120" width="400px" height="120px">
+ <text x="200" y="112" text-anchor="middle" style="font: 14px sans-serif;" fill="GrayText">&quickFilterBar.resultsLabel.none;</text>
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M192.9 3.24a35.8 35.8 0 00-30.5 15.19c-4 6.01-6.4 13.63-6.4 21.25a36.17 36.17 0 0036.1 36.08c7.2 0 14.4-2.41 20.8-6.42l24.9 24.86c2.4 2.4 6 2.4 8.4 0a5.82 5.82 0 000-8.42l-24.9-25.26a36.08 36.08 0 00-8.4-50.51 36.72 36.72 0 00-20-6.81zm-.8 12.39c13.2 0 24 10.82 24 24.05a24.1 24.1 0 01-24 24.05A24.12 24.12 0 01168 39.68a24.12 24.12 0 0124.1-24.05zm-11.2 16.51l7.6 7.74-7.6 7.69c-2.5 2.41 1.2 6.02 3.6 3.61l7.6-7.73 7.2 7.69c2.4 2.37 6-1.24 3.6-3.61l-7.2-7.69 7.6-7.7c2-2.36-1.2-5.57-3.6-3.57l-7.6 7.7-7.6-7.7c-2.8-1.88-5.2 1.09-3.6 3.57z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/search-spinner.svg b/comm/mail/themes/shared/mail/icons/search-spinner.svg
new file mode 100644
index 0000000000..75ce764939
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/search-spinner.svg
@@ -0,0 +1,9 @@
+<!-- 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/. -->
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 120" width="100px" height="120px">
+ <circle fill="none" stroke="context-fill" stroke-opacity="context-fill-opacity" stroke-width="10" stroke-dasharray="36" cx="50" cy="70" r="45">
+ <animateTransform attributeName="transform" type="rotate" from="0 50 70" to="360 50 70" dur="6s" repeatCount="indefinite"/>
+ </circle>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/send.svg b/comm/mail/themes/shared/mail/icons/send.svg
new file mode 100644
index 0000000000..6e2e0c86eb
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/send.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M9.985 12.511C8.299 14.171 7.304 15 7 15c-.295 0-.59-1.045-.885-3.134l-2.28-.38a1 1 0 0 1-.519-1.716l8-7.5a1 1 0 0 1 1.678.62l1 9a1 1 0 0 1-1.158 1.096l-2.851-.475zM12 3l-5 8 .5 3L9 11l3-8z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/sent.svg b/comm/mail/themes/shared/mail/icons/sent.svg
new file mode 100644
index 0000000000..a78e54ae8c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/sent.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M12 14.12s.14.03.22.03a1 1 0 00.95-.8L14.98 2.2a1 1 0 00-1.23-1.17L1.4 8s-.5.3-.41 1c.09.65.82.9.82.9L5 11.18v3.4s0 .33.3.41c.3.08.48-.1.7-.35.56-.65 2-2.21 2-2.21zM4 8.57l9-5.12-1.61 8.23-2.69-1.11L10 7 6.15 9.48z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/shield.svg b/comm/mail/themes/shared/mail/icons/shield.svg
new file mode 100644
index 0000000000..30b74c905c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/shield.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" d="M8 15.006l-.112-.012a6.244 6.244 0 0 1-4.012-2.427 9.26 9.26 0 0 1-1.8-5.286C2 6.442 2 4.6 2 3.575a1.845 1.845 0 0 1 1.527-1.822L8 .985l4.471.768A1.845 1.845 0 0 1 14 3.576c0 1.023 0 2.866-.08 3.705a9.26 9.26 0 0 1-1.8 5.286 6.244 6.244 0 0 1-4.012 2.427zM4 3.7C4 5.325 3.951 6.46 4 7a7.572 7.572 0 0 0 1.487 4.382A4.223 4.223 0 0 0 8 12.987a4.221 4.221 0 0 0 2.512-1.605A7.572 7.572 0 0 0 12 7c.049-.54 0-1.675 0-3.3l-4-.685z"></path><path fill="context-fill" d="M8 4.537l-2.5.428c.009.942.03 1.655.062 2a5.765 5.765 0 0 0 1.13 3.53 2.685 2.685 0 0 0 1.3.943H8z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/sidebar-left.svg b/comm/mail/themes/shared/mail/icons/sidebar-left.svg
new file mode 100644
index 0000000000..034778d738
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/sidebar-left.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity"><path d="M3 1h10a3.008 3.008 0 0 1 3 3v8a3.009 3.009 0 0 1-3 3H3a3.005 3.005 0 0 1-3-3V4a3.013 3.013 0 0 1 3-3zm11 11V4a1 1 0 0 0-1-1H8v10h5a1 1 0 0 0 1-1zM2 12a1 1 0 0 0 1 1h4V3H3a1 1 0 0 0-1 1v8z"></path><path d="M3.5 5h2a.5.5 0 0 0 0-1h-2a.5.5 0 0 0 0 1zm0 2h2a.5.5 0 0 0 0-1h-2a.5.5 0 0 0 0 1zm1 2h1a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1z"></path></svg> \ No newline at end of file
diff --git a/comm/mail/themes/shared/mail/icons/size.svg b/comm/mail/themes/shared/mail/icons/size.svg
new file mode 100644
index 0000000000..8f56292f12
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/size.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M5 2a1 1 0 100 2h4v10a1 1 0 102 0V4h4a1 1 0 100-2zM1 7a1 1 0 100 2h2v5a1 1 0 102 0V9h2a1 1 0 100-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/smiley.svg b/comm/mail/themes/shared/mail/icons/smiley.svg
new file mode 100644
index 0000000000..cfc4127446
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/smiley.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M8 1.33a6.67 6.67 0 1 1 0 13.35A6.67 6.67 0 0 1 8 1.33zM8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.17 8.99c-1.01.8-1.62 1.59-3.17 1.59-1.55 0-2.16-.79-3.17-1.59L4 9.62A4.91 4.91 0 0 0 8 12a4.9 4.9 0 0 0 4-2.38zm-5.5-3.66a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm4.66 0a1 1 0 0 0 0 2c.56 0 1-.44 1-1a1 1 0 0 0-1-1z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/sort.svg b/comm/mail/themes/shared/mail/icons/sort.svg
new file mode 100644
index 0000000000..b07e847709
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/sort.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M13 13c1.33 0 1.33-2 0-2H3c-1.33 0-1.33 2 0 2zm-2-4c1.33 0 1.33-2 0-2H5C3.67 7 3.67 9 5 9zM9 5c1.33 0 1.33-2 0-2H7C5.67 3 5.67 5 7 5z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/spaces.svg b/comm/mail/themes/shared/mail/icons/spaces.svg
new file mode 100644
index 0000000000..bcf498fc4f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/spaces.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M5.3 7H1.7A1.7 1.7 0 0 1 0 5.3V2.7A1.7 1.7 0 0 1 1.7 1h3.6A1.7 1.7 0 0 1 7 2.7v2.6A1.7 1.7 0 0 1 5.3 7zM2 5h3V3H2zm12.3 2h-3.6A1.7 1.7 0 0 1 9 5.3V2.7A1.7 1.7 0 0 1 10.7 1h3.6A1.7 1.7 0 0 1 16 2.7v2.6A1.7 1.7 0 0 1 14.3 7zM11 5h3V3h-3zM5.3 15H1.7A1.7 1.7 0 0 1 0 13.3v-2.6A1.7 1.7 0 0 1 1.7 9h3.6A1.7 1.7 0 0 1 7 10.7v2.6A1.7 1.7 0 0 1 5.3 15zM2 13h3v-2H2zm12.3 2h-3.6A1.7 1.7 0 0 1 9 13.3v-2.6A1.7 1.7 0 0 1 10.7 9h3.6a1.7 1.7 0 0 1 1.7 1.7v2.6a1.7 1.7 0 0 1-1.7 1.7zM11 13h3v-2h-3z"></path></svg>
diff --git a/comm/mail/themes/shared/mail/icons/spelling.svg b/comm/mail/themes/shared/mail/icons/spelling.svg
new file mode 100644
index 0000000000..6317920804
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/spelling.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M11.5 8.994C9.75 8.994 8 10.16 8 12.5c0 4.67 7 4.67 7 0 0-2.34-1.75-3.5-3.5-3.5zm2.38 2.826l-2.5 3c-.16.2-.44.24-.66.1l-1.5-1c-.579-.37 0-1.23.558-.84l1.12.75 2.22-2.65c.47-.47 1.14.17.76.64zm-3.42-4L7.93 1.643c-.333-.844-1.527-.844-1.86 0L1 13.64c-.51 1 1.35 1.86 1.871.72l1.58-3.43H7c.177-.77.679-1.421 1.21-2H5.239l1.76-3.91L8.61 8.6a3.711 3.711 0 0 1 1.85-.879z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/spring.svg b/comm/mail/themes/shared/mail/icons/spring.svg
new file mode 100644
index 0000000000..de16af74a7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/spring.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+ <path fill="context-fill" d="M0 9v14h1v-6.17L6 21V11l-5 4.17V9zm31 6.17L26 11v10l5-4.17V23h1V9h-1zM8 14v4h4v-4zm6 0v4h4v-4zm6 0v4h4v-4z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/star.svg b/comm/mail/themes/shared/mail/icons/star.svg
new file mode 100644
index 0000000000..66e03e708b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/star.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M3.8 15.922a1.1 1.1 0 0 1-1.09-1.253l.609-4.36L.392 7.163a1.1 1.1 0 0 1 .616-1.833l4.081-.73L7.015.734a1.1 1.1 0 0 1 1.969 0L10.911 4.6l4.084.729a1.1 1.1 0 0 1 .611 1.833L12.68 10.31l.609 4.359a1.1 1.1 0 0 1-1.6 1.127L8 13.873 4.307 15.8a1.093 1.093 0 0 1-.507.122zm-.415-1.9zm9.228 0zM2.981 7.01l2.451 2.635-.5 3.572L8 11.618l3.067 1.6-.5-3.572 2.451-2.636-3.45-.616L8 3.244l-1.569 3.15zm11.659.29zm-13.278 0zm12.78-1.5zm-12.286 0z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/starred.svg b/comm/mail/themes/shared/mail/icons/starred.svg
new file mode 100644
index 0000000000..7a33d7461b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/starred.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M15.845 6.064A1.1 1.1 0 0 0 15 5.331L10.911 4.6 8.985.735a1.1 1.1 0 0 0-1.969 0L5.089 4.6l-4.081.729a1.1 1.1 0 0 0-.615 1.834L3.32 10.31l-.609 4.36a1.1 1.1 0 0 0 1.6 1.127L8 13.873l3.69 1.927a1.1 1.1 0 0 0 1.6-1.127l-.61-4.363 2.926-3.146a1.1 1.1 0 0 0 .239-1.1z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/status-away.svg b/comm/mail/themes/shared/mail/icons/status-away.svg
new file mode 100644
index 0000000000..5884f84776
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/status-away.svg
@@ -0,0 +1,14 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+ <defs>
+ <linearGradient id="a">
+ <stop offset="0" stop-color="#ff7878"/>
+ <stop offset="1" stop-color="#be0000"/>
+ </linearGradient>
+ <radialGradient id="b" xlink:href="#a" r="4" fy="7.6" fx="8.5" cy="7.6" cx="8.5" gradientTransform="matrix(3.6 -.02 .02 3.1 -25.4 -19.3)" gradientUnits="userSpaceOnUse"/>
+ </defs>
+ <circle fill="#a60000" r="8" cy="8" cx="8"/>
+ <circle fill="url(#b)" r="7" cy="8" cx="8"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/status-idle.svg b/comm/mail/themes/shared/mail/icons/status-idle.svg
new file mode 100644
index 0000000000..4a7aba7a0c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/status-idle.svg
@@ -0,0 +1,14 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+ <defs>
+ <linearGradient id="a">
+ <stop offset="0" stop-color="#ffd08e"/>
+ <stop offset="1" stop-color="#fa5100"/>
+ </linearGradient>
+ <radialGradient id="b" xlink:href="#a" r="4" fy="7.6" fx="8.5" cy="7.6" cx="8.5" gradientTransform="matrix(3.6 -.02 .02 3.1 -25.4 -19.3)" gradientUnits="userSpaceOnUse"/>
+ </defs>
+ <circle fill="#ab4a09" r="8" cy="8" cx="8"/>
+ <circle fill="url(#b)" r="7" cy="8" cx="8"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/status-offline.svg b/comm/mail/themes/shared/mail/icons/status-offline.svg
new file mode 100644
index 0000000000..ea3ae8bb84
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/status-offline.svg
@@ -0,0 +1,14 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+ <defs>
+ <linearGradient id="a">
+ <stop offset="0" stop-color="#f5f5f5"/>
+ <stop offset="1" stop-color="#b2b2b2"/>
+ </linearGradient>
+ <radialGradient id="b" xlink:href="#a" r="4" fy="7.6" fx="8.5" cy="7.6" cx="8.5" gradientTransform="matrix(3.6 -.02 .02 3.1 -25.4 -19.3)" gradientUnits="userSpaceOnUse"/>
+ </defs>
+ <circle fill="#797979" r="8" cy="8" cx="8"/>
+ <circle fill="url(#b)" r="7" cy="8" cx="8"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/status-online.svg b/comm/mail/themes/shared/mail/icons/status-online.svg
new file mode 100644
index 0000000000..6209d78934
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/status-online.svg
@@ -0,0 +1,14 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+ <defs>
+ <linearGradient id="a">
+ <stop offset="0" stop-color="#3cff13"/>
+ <stop offset="1" stop-color="#058200"/>
+ </linearGradient>
+ <radialGradient id="b" xlink:href="#a" r="4" fy="7.6" fx="8.5" cy="7.6" cx="8.5" gradientTransform="matrix(3.6 -.02 .02 3.1 -25.4 -19.3)" gradientUnits="userSpaceOnUse"/>
+ </defs>
+ <circle fill="#007600" r="8" cy="8" cx="8"/>
+ <circle fill="url(#b)" r="7" cy="8" cx="8"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/sticky.svg b/comm/mail/themes/shared/mail/icons/sticky.svg
new file mode 100644
index 0000000000..e52fa6aca7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/sticky.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M14.707 13.293L11.414 10l2.293-2.293a1 1 0 0 0 0-1.414A4.384 4.384 0 0 0 10.586 5h-.172A2.415 2.415 0 0 1 8 2.586V2a1 1 0 0 0-1.707-.707l-5 5A1 1 0 0 0 2 8h.586A2.415 2.415 0 0 1 5 10.414v.169a4.036 4.036 0 0 0 1.337 3.166 1 1 0 0 0 1.37-.042L10 11.414l3.293 3.293a1 1 0 0 0 1.414-1.414zm-7.578-1.837A2.684 2.684 0 0 1 7 10.583v-.169a4.386 4.386 0 0 0-1.292-3.121 4.414 4.414 0 0 0-1.572-1.015l2.143-2.142a4.4 4.4 0 0 0 1.013 1.571A4.384 4.384 0 0 0 10.414 7h.172a2.4 2.4 0 0 1 .848.152z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/stop.svg b/comm/mail/themes/shared/mail/icons/stop.svg
new file mode 100644
index 0000000000..464a26489f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/stop.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M9.414 8l5.293-5.293a1 1 0 0 0-1.414-1.414L8 6.586 2.707 1.293a1 1 0 0 0-1.414 1.414L6.586 8l-5.293 5.293a1 1 0 1 0 1.414 1.414L8 9.414l5.293 5.293a1 1 0 0 0 1.414-1.414z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/subthread-ignored.svg b/comm/mail/themes/shared/mail/icons/subthread-ignored.svg
new file mode 100644
index 0000000000..d3a497b7a4
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/subthread-ignored.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+ <path stroke="context-fill" stroke-opacity="context-fill-opacity" fill="none" d="M2.5 2v3.5h3v7H9m-3.5-4H9"/>
+ <path fill="red" d="M10.5 10A2.5 2.5 0 008 12.5a2.5 2.5 0 002.5 2.5 2.5 2.5 0 002.5-2.5 2.5 2.5 0 00-2.5-2.5zM9 12h3v1H9v-1z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/subtract-circle-fill.svg b/comm/mail/themes/shared/mail/icons/subtract-circle-fill.svg
new file mode 100644
index 0000000000..63a30033f8
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/subtract-circle-fill.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill-opacity="context-fill-opacity">
+ <circle fill="context-stroke" cx="7.6" cy="7.6" r="7.5"/>
+ <path fill="context-fill" d="M11 8.2H4.2c-.3 0-.6-.2-.6-.6s.3-.6.6-.6H11c.3 0 .6.3.6.6s-.3.6-.6.6z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/tab-drag-indicator.svg b/comm/mail/themes/shared/mail/icons/tab-drag-indicator.svg
new file mode 100644
index 0000000000..d195802641
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/tab-drag-indicator.svg
@@ -0,0 +1,4 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="29"><path d="M6 0a5 5 0 015 5 4.85 4.85 0 01-3 4.48V26a1 1 0 01-1 1H5a1 1 0 01-1-1V9.48C2.02 8.81 1.2 6.93 1 5a5 5 0 015-5z" fill="#fff" filter="drop-shadow(0 1px 0.5px rgba(0,0,0,0.496))"/><path d="M6 1a4 4 0 014 4c-.17 2.25-1.05 3.02-3 3.84V26H5V8.84C3.12 8.28 2.19 6.89 2 5a4 4 0 014-4zm0 2a2 2 0 100 4 2 2 0 000-4z" fill="#0a84ff"/></svg> \ No newline at end of file
diff --git a/comm/mail/themes/shared/mail/icons/table.svg b/comm/mail/themes/shared/mail/icons/table.svg
new file mode 100644
index 0000000000..0c9643ae01
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/table.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M3 1a3 3 0 0 0-3 3v8c0 1.66 1.343 3 3 3h10c1.66 0 3-1.34 3-3V4c0-1.665-1.34-3-3-3zm0 2h2v3H2V4a1 1 0 0 1 1-1zm3 0h4v3H6zm5 0h2c.55 0 1 .448 1 1v2h-3zM2 7h3v2H2zm4 0h4v2H6zm5 0h3v2h-3zm-9 3h3v3H3c-.552 0-1-.45-1-1zm4 0h4v3H6zm5 0h3v2c0 .55-.45 1-1 1h-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/tag.svg b/comm/mail/themes/shared/mail/icons/tag.svg
new file mode 100644
index 0000000000..c57b73a5d4
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/tag.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M7.379 14.207l-5.5-5.5A3 3 0 0 1 1 6.586V1h5.586a3 3 0 0 1 2.121.879l5.5 5.5a3 3 0 0 1 0 4.242l-2.586 2.586a3 3 0 0 1-4.242 0zm1.414-1.414a1 1 0 0 0 1.414 0l2.586-2.586a1 1 0 0 0 0-1.414l-5.5-5.5A1 1 0 0 0 6.586 3H3v3.586a1 1 0 0 0 .293.707l5.5 5.5zM5 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/template.svg b/comm/mail/themes/shared/mail/icons/template.svg
new file mode 100644
index 0000000000..c6f7597626
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/template.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M3 0a2 2 0 00-2 2v12c0 1.1.9 2 2 2h10a2 2 0 002-2V2a2 2 0 00-2-2H3zm1 2h8a1 1 0 011 1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V3a1 1 0 011-1zm1.5 2c-.24 0-.5.26-.5.5v2c0 .24.26.5.5.5h2c.24 0 .5-.26.5-.5v-2c0-.24-.26-.5-.5-.5h-2zm4 0c-.67 0-.67 1 0 1h1c.67 0 .67-1 0-1h-1zM6 5h1v1H6V5zm3.5 1c-.67 0-.67 1 0 1h1c.67 0 .67-1 0-1h-1zm-4 2c-.67 0-.67 1 0 1h5c.67 0 .67-1 0-1h-5zm0 2c-.67 0-.67 1 0 1h2c.67 0 .67-1 0-1h-2zm3 2c-.66 0-.66 1 0 1h2c.67 0 .67-1 0-1h-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/thread-col.svg b/comm/mail/themes/shared/mail/icons/thread-col.svg
new file mode 100644
index 0000000000..0ce88728f8
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/thread-col.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="context-fill">
+ <path d="M3 1v3h2v6h3V9H6V7h2V6H6V3H4V1H3z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/thread-ignored.svg b/comm/mail/themes/shared/mail/icons/thread-ignored.svg
new file mode 100644
index 0000000000..c4f3f297b3
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/thread-ignored.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+ <path fill="red" d="M7 2a6 6 0 00-6 6 6 6 0 006 6 6 6 0 006-6 6 6 0 00-6-6zM3 7h8v2H3V7z"/>
+</svg> \ No newline at end of file
diff --git a/comm/mail/themes/shared/mail/icons/thread.svg b/comm/mail/themes/shared/mail/icons/thread.svg
new file mode 100644
index 0000000000..b2003cead8
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/thread.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+ <path stroke="context-fill" stroke-opacity="context-fill-opacity" fill="none" d="M3.5 2v3.5h3v7H10M6.5 8.5H10"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/timeline.svg b/comm/mail/themes/shared/mail/icons/timeline.svg
new file mode 100644
index 0000000000..dca29dbdef
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/timeline.svg
@@ -0,0 +1,12 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" height="17" width="43" fill="context-fill">
+ <rect y="11" x="1" height="5" width="5"/>
+ <rect y="6" x="7" height="10" width="5"/>
+ <rect y="2" x="13" height="14" width="5"/>
+ <rect y="1" x="19" height="15" width="5"/>
+ <rect y="7" x="25" height="9" width="5"/>
+ <rect y="4" x="31" height="12" width="5"/>
+ <rect y="7" x="37" height="9" width="5"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/toolbarbutton-arrow.svg b/comm/mail/themes/shared/mail/icons/toolbarbutton-arrow.svg
new file mode 100644
index 0000000000..be51912a6b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/toolbarbutton-arrow.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 7" fill="context-fill" fill-opacity="context-stroke-opacity">
+ <path d="M4.5 6.2A.9.9 0 0 1 3.8 6L.2 2.3A.9.9 0 0 1 1.5 1l3 3L7.5 1a.9.9 0 0 1 1.2 1.3L5.1 6a.9.9 0 0 1-.6.2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/underline.svg b/comm/mail/themes/shared/mail/icons/underline.svg
new file mode 100644
index 0000000000..794653d608
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/underline.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M4 1a1 1 0 00-1 1v5a5 5 0 0010 0V2a1 1 0 00-2 0v5a3 3 0 11-6 0V2a1 1 0 00-1-1zM3 13a1 1 0 000 2h10a1 1 0 000-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/userIcon.svg b/comm/mail/themes/shared/mail/icons/userIcon.svg
new file mode 100644
index 0000000000..407c208b84
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/userIcon.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M0 43.57c0-7.53 1.87-10.19 8.27-13.29 9.12-3.55 11.08-3.55 7.94-10.19-2.98-3.1-2.1-13.3.33-16.4C17.73 1.92 20.29.6 22.98.15c3.73-.44 5 0 7.56 2.66 2.57 2.21 3.08 3.99 3.08 8.86 0 3.1-.33 6.2-.89 6.2-.54.45-1.32 2.22-1.61 3.55-2.09 4.87 1.76 6.64 8.31 8.86 5.51 1.77 7.35 3.99 8.16 11.52L48 48H0z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/visible.svg b/comm/mail/themes/shared/mail/icons/visible.svg
new file mode 100644
index 0000000000..e774139205
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/visible.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M15.955 7.7A8.325 8.325 0 0 0 8 2 8.325 8.325 0 0 0 .045 7.7a1 1 0 0 0 0 .594A8.325 8.325 0 0 0 8 14a8.325 8.325 0 0 0 7.955-5.7 1 1 0 0 0 0-.6zM8.5 5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zM8 12a6.331 6.331 0 0 1-5.943-4 6.061 6.061 0 0 1 2.5-3A3.955 3.955 0 0 0 4 7a4 4 0 0 0 8 0 3.955 3.955 0 0 0-.555-2 6.061 6.061 0 0 1 2.5 3A6.331 6.331 0 0 1 8 12z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/voice.png b/comm/mail/themes/shared/mail/icons/voice.png
new file mode 100644
index 0000000000..43cc90eea0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/voice.png
Binary files differ
diff --git a/comm/mail/themes/shared/mail/icons/waiting.svg b/comm/mail/themes/shared/mail/icons/waiting.svg
new file mode 100644
index 0000000000..284f50aeef
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/waiting.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="#f0cd2f" d="M8 0C3.5 0 0 3.5 0 8s3.5 8 8 8 8-3.25 8-8c0-4.5-3.5-8-8-8zM7 3c0-1.5 2-1.5 2 0v5c0 1.5-2 1.5-2 0zm3.5 4H13c1.5 0 1.5 2 0 2h-2.5C9 9 9 7 10.5 7z"/>
+</svg> \ No newline at end of file
diff --git a/comm/mail/themes/shared/mail/icons/warning-12.svg b/comm/mail/themes/shared/mail/icons/warning-12.svg
new file mode 100644
index 0000000000..c300212835
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/warning-12.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12" fill-opacity="context-fill-opacity">
+ <path fill="context-stroke" d="M5.87 0C4.94 0 4.14.57 3.6 1.43L.3 7.86c-.4.85-.4 1.85 0 2.71.4.86 1.32 1.43 2.25 1.43h6.9c.93 0 1.72-.57 2.25-1.43.4-.86.4-1.86 0-2.71L8.12 1.43C7.6.57 6.8 0 5.87 0z"/>
+ <path fill="context-fill" d="M5.95 1.5c-.41 0-.81.21-1.01.64L1.49 8.57c-.4.86.13 1.86 1.06 1.86h6.9c.93 0 1.46-1 1.06-1.86L7.06 2.14c-.27-.43-.7-.64-1.1-.64zM5 3h2v3H5zm1 4c1.33 0 1.33 2 0 2S4.67 7 6 7z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/icons/zoomout.svg b/comm/mail/themes/shared/mail/icons/zoomout.svg
new file mode 100644
index 0000000000..d2020ee31d
--- /dev/null
+++ b/comm/mail/themes/shared/mail/icons/zoomout.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M5.96-.04a6.02 6.02 0 103.51 10.92l4.82 4.83a1 1 0 001.42-1.42l-4.83-4.82a6.02 6.02 0 00-4.93-9.5zM6.04 2A4 4 0 0110 6a4 4 0 01-4 4 4 4 0 11.05-8zM3 5v2h6V5H3z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/illustrations/accounts.svg b/comm/mail/themes/shared/mail/illustrations/accounts.svg
new file mode 100644
index 0000000000..accbd3b979
--- /dev/null
+++ b/comm/mail/themes/shared/mail/illustrations/accounts.svg
@@ -0,0 +1,62 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="209" viewBox="0 0 300 209">
+ <defs>
+ <linearGradient id="lockwise-a" x1="70.127%" x2="70.127%" y1="96.836%" y2="-15.705%">
+ <stop offset="0%" stop-color="#CDCDD4" stop-opacity="0"/>
+ <stop offset="58%" stop-color="#CDCDD4" stop-opacity=".02"/>
+ <stop offset="77%" stop-color="#CDCDD4" stop-opacity=".08"/>
+ <stop offset="96%" stop-color="#CDCDD4" stop-opacity=".18"/>
+ <stop offset="100%" stop-color="#CDCDD4" stop-opacity=".2"/>
+ </linearGradient>
+ <radialGradient id="lockwise-b" cx="126.893%" cy="255.606%" r="325.015%" fx="126.893%" fy="255.606%" gradientTransform="matrix(.5786 0 0 1 .535 0)">
+ <stop offset="26%" stop-color="#CDCDD4" stop-opacity="0"/>
+ <stop offset="40%" stop-color="#CDCDD4" stop-opacity=".02"/>
+ <stop offset="55%" stop-color="#CDCDD4" stop-opacity=".08"/>
+ <stop offset="69%" stop-color="#CDCDD4" stop-opacity=".18"/>
+ <stop offset="72%" stop-color="#CDCDD4" stop-opacity=".2"/>
+ </radialGradient>
+ <radialGradient id="lockwise-c" cx="-55.742%" cy="260.74%" r="317.936%" fx="-55.742%" fy="260.74%" gradientTransform="matrix(.57221 0 0 1 -.238 0)">
+ <stop offset="27%" stop-color="#CDCDD4" stop-opacity="0"/>
+ <stop offset="46%" stop-color="#CDCDD4" stop-opacity=".02"/>
+ <stop offset="66%" stop-color="#CDCDD4" stop-opacity=".08"/>
+ <stop offset="86%" stop-color="#CDCDD4" stop-opacity=".18"/>
+ <stop offset="90%" stop-color="#CDCDD4" stop-opacity=".2"/>
+ </radialGradient>
+ <linearGradient id="lockwise-d" x1="7.536%" x2="68.583%" y1="65.726%" y2="43.12%">
+ <stop offset="0%" stop-color="#B833E1"/>
+ <stop offset="91%" stop-color="#FF4F5E"/>
+ </linearGradient>
+ <linearGradient id="lockwise-e" x1="-68.282%" x2="131.387%" y1="139.888%" y2="-11.036%">
+ <stop offset="28%" stop-color="#7542E5"/>
+ <stop offset="42%" stop-color="#824DEB"/>
+ <stop offset="79%" stop-color="#A067FA"/>
+ <stop offset="100%" stop-color="#AB71FF"/>
+ </linearGradient>
+ <linearGradient id="lockwise-f" x1="-43.795%" x2="124.252%" y1="84.765%" y2="22.502%">
+ <stop offset="40%" stop-color="#0090ED"/>
+ <stop offset="56%" stop-color="#2A88F1"/>
+ <stop offset="92%" stop-color="#9275FC"/>
+ <stop offset="100%" stop-color="#AB71FF"/>
+ </linearGradient>
+ <linearGradient id="lockwise-g" x1="-17.372%" x2="109.306%" y1="151.599%" y2="-39.422%">
+ <stop offset="43%" stop-color="#00B3F4"/>
+ <stop offset="61%" stop-color="#00BBF6"/>
+ <stop offset="89%" stop-color="#00D2FC"/>
+ <stop offset="100%" stop-color="#0DF"/>
+ </linearGradient>
+ </defs>
+ <circle cx="154.306" cy="109.889" r="107.444" fill="url(#lockwise-a)"/>
+ <path fill="url(#lockwise-b)" d="M85.5416667,80.8472222 C85.5416667,89.0277438 78.9304323,95.6701066 70.75,95.7083333 L11.2916667,95.7083333 C5.17541993,95.4943857 0.327726784,90.4741542 0.327726784,84.3541667 C0.327726784,78.2341791 5.17541993,73.2139476 11.2916667,73 C12.2285282,72.99817 13.1618599,73.1148364 14.0694444,73.3472222 C13.8641906,72.4823819 13.7570332,71.5971688 13.75,70.7083333 C13.7942051,66.3953789 16.2033401,62.4551064 20.0221021,60.4499661 C23.840864,58.4448259 28.4522835,58.6987739 32.0277778,61.1111111 C34.528326,51.5379538 43.7475818,45.3095965 53.5622385,46.562831 C63.3768953,47.8160655 70.7352578,56.1612205 70.75,66.0555556 C78.9065601,66.0860192 85.511203,72.6906621 85.5416667,80.8472222 L85.5416667,80.8472222 Z"/>
+ <path fill="url(#lockwise-c)" d="M281.944444,40.1527778 C280.56777,40.1478647 279.195927,40.3158455 277.861111,40.6527778 C279.459938,33.5659175 276.55372,26.223224 270.537855,22.1502383 C264.521991,18.0772526 256.625128,18.1058193 250.638889,22.2222222 C246.813608,7.86060669 232.951542,-1.45416361 218.209226,0.430746832 C203.46691,2.31565727 192.394381,14.8184936 192.305556,29.6805556 C184.346472,29.6805554 176.991976,33.9266759 173.012434,40.8194443 C169.032892,47.7122128 169.032892,56.2044538 173.012434,63.0972223 C176.991976,69.9899908 184.346472,74.2361112 192.305556,74.2361111 L281.944444,74.2361111 C288.136326,74.4130762 293.935121,71.2108318 297.083278,65.8760561 C300.231434,60.5412805 300.231434,53.9170528 297.083278,48.5822772 C293.935121,43.2475016 288.136326,40.0452571 281.944444,40.2222222 L281.944444,40.1527778 Z"/>
+ <path fill="url(#lockwise-d)" d="M104.458333,73.4861111 L45.9444444,73.4861111 C40.4279303,73.5013713 35.9597046,77.9695969 35.9444444,83.4861111 L35.9444444,92.5694444 C35.9597046,98.0859586 40.4279303,102.554184 45.9444444,102.569444 L104.458333,102.569444 C109.974848,102.554184 114.443073,98.0859586 114.458333,92.5694444 L114.458333,83.4861111 C114.443073,77.9695969 109.974848,73.5013713 104.458333,73.4861111 L104.458333,73.4861111 Z M62.9166667,89.3333333 C63.0662911,89.4003249 63.1817989,89.5258768 63.2361111,89.6805556 C63.3039323,89.8258065 63.3039323,89.9936379 63.2361111,90.1388889 L62,92.2361111 C61.9188249,92.3739635 61.7821642,92.4701321 61.625,92.5 C61.4654217,92.5408987 61.2958989,92.5049393 61.1666667,92.4027778 L58.5138889,90.3472222 L58.9305556,93.75 C58.955548,93.9074535 58.9039566,94.0673867 58.7916667,94.1805556 C58.6993523,94.3464174 58.5231234,94.4478826 58.3333333,94.4445291 L55.9027778,94.4445291 C55.737875,94.4450288 55.5808164,94.3740991 55.4722222,94.25 C55.3686393,94.1321904 55.3228314,93.9744078 55.3472222,93.8194444 L55.7638889,90.3888889 L52.9861111,92.4722222 C52.8568789,92.5743837 52.6873561,92.6103431 52.5277778,92.5694444 C52.3695719,92.5330645 52.2336813,92.4324047 52.1527778,92.2916667 L50.9861111,90.2083333 C50.9163117,90.0635278 50.9163117,89.8948055 50.9861111,89.75 C51.0357662,89.5970999 51.1463206,89.4714698 51.2916667,89.4027778 L54.4583333,88.0833333 L51.2916667,86.6944444 C51.1420422,86.6274529 51.0265345,86.501901 50.9722222,86.3472222 C50.9096885,86.2008434 50.9096885,86.0352677 50.9722222,85.8888889 L52.1805556,83.8333333 C52.2650018,83.6957958 52.399379,83.5962572 52.5555556,83.5555556 C52.7171068,83.5281479 52.8828231,83.5683215 53.0138889,83.6666667 L55.7916667,85.7361111 L55.375,82.3472222 C55.3537717,82.1881879 55.3989845,82.0274311 55.5,81.9027778 C55.6139657,81.7879807 55.7687969,81.7230515 55.9305556,81.7221814 L58.3333333,81.7221814 C58.4916013,81.7203046 58.6431729,81.7859857 58.75,81.9027778 C58.8608604,82.022453 58.9118807,82.1857182 58.8888889,82.3472222 L58.4722222,85.7361111 L61.25,83.6944444 C61.3809719,83.5960482 61.5486937,83.5604708 61.7083333,83.5972222 C61.870593,83.6244458 62.0100075,83.7277158 62.0833333,83.875 L63.2638889,85.9583333 C63.3336883,86.1031388 63.3336883,86.2718612 63.2638889,86.4166667 C63.2095767,86.5713454 63.0940689,86.6968974 62.9444444,86.7638889 L59.7222222,88.0277778 L62.9166667,89.3333333 Z M80.9722222,89.3333333 C81.1218467,89.4003249 81.2373544,89.5258768 81.2916667,89.6805556 C81.3542004,89.8269344 81.3542004,89.9925101 81.2916667,90.1388889 L80.0555556,92.2361111 C79.9713468,92.3772725 79.8289514,92.473898 79.6666667,92.5 C79.5114611,92.5385087 79.3471742,92.5025709 79.2222222,92.4027778 L76.5694444,90.3472222 L76.9861111,93.75 C77.0262601,93.9261394 76.9804471,94.1108808 76.8626515,94.2478525 C76.7448558,94.3848241 76.5690536,94.4577748 76.3888889,94.4444444 L74.0138889,94.4444444 C73.8489861,94.4450288 73.6919275,94.3740991 73.5833333,94.25 C73.4764505,94.133611 73.4257216,93.9763514 73.4444444,93.8194444 L73.875,90.2777778 L71.0972222,92.3611111 C70.96799,92.4632726 70.7984672,92.499232 70.6388889,92.4583333 C70.480683,92.4219533 70.3447924,92.3212936 70.2638889,92.1805556 L69.0833333,90.0972222 C69.0279356,89.9494663 69.0279356,89.7866448 69.0833333,89.6388889 C69.1376456,89.4842101 69.2531533,89.3586582 69.4027778,89.2916667 L72.5694444,87.9722222 L69.4027778,86.5833333 C69.2531533,86.5163418 69.1376456,86.3907899 69.0833333,86.2361111 C69.0207996,86.0897323 69.0207996,85.9241566 69.0833333,85.7777778 L70.2916667,83.7222222 C70.3761129,83.5846847 70.5104901,83.4851461 70.6666667,83.4444444 C70.8239003,83.4158311 70.9858407,83.4563162 71.1111111,83.5555556 L73.8888889,85.625 L73.4583333,82.2361111 C73.4409303,82.0751066 73.4912407,81.9141134 73.5972222,81.7916667 C73.7111879,81.6768696 73.8660191,81.6119404 74.0277778,81.6111111 L76.3888889,81.6111111 C76.5464642,81.6125465 76.6967556,81.6776728 76.8055556,81.7916667 C76.9164159,81.9113419 76.9674363,82.074607 76.9444444,82.2361111 L76.5277778,85.625 L79.3055556,83.5833333 C79.437033,83.4869248 79.6035278,83.4514952 79.7628672,83.4860188 C79.9222066,83.5205423 80.059106,83.6217073 80.1388889,83.7638889 L81.3194444,85.8472222 C81.3748422,85.9949781 81.3748422,86.1577996 81.3194444,86.3055556 C81.2651322,86.4602343 81.1496244,86.5857862 81,86.6527778 L77.8333333,87.9583333 L80.9722222,89.3333333 Z M99.0277778,89.3333333 C99.1738255,89.405199 99.2877552,89.5290357 99.3472222,89.6805556 C99.4097559,89.8269344 99.4097559,89.9925101 99.3472222,90.1388889 L98.0972222,92.2361111 C98.0223028,92.3795857 97.8825665,92.4779186 97.7222222,92.5 C97.5670167,92.5385087 97.4027298,92.5025709 97.2777778,92.4027778 L94.6111111,90.3472222 L95.0416667,93.75 C95.0603895,93.906907 95.0096606,94.0641666 94.9027778,94.1805556 C94.7973939,94.3010555 94.6461569,94.3716327 94.4861111,94.375 L92.1111111,94.375 C91.9510653,94.3716327 91.7998284,94.3010555 91.6944444,94.1805556 C91.5875616,94.0641666 91.5368327,93.906907 91.5555556,93.75 L91.9861111,90.2777778 L89.2083333,92.3611111 C89.0781988,92.4613349 88.9096163,92.4970948 88.75,92.4583333 C88.5917942,92.4219533 88.4559035,92.3212936 88.375,92.1805556 L87.1944444,90.0972222 C87.1319107,89.9508434 87.1319107,89.7852677 87.1944444,89.6388889 C87.2487567,89.4842101 87.3642644,89.3586582 87.5138889,89.2916667 L90.6666667,87.9722222 L87.5,86.5833333 C87.3574937,86.5109248 87.2481469,86.386667 87.1944444,86.2361111 C87.1266233,86.0908601 87.1266233,85.9230288 87.1944444,85.7777778 L88.4027778,83.7222222 C88.4849309,83.5826024 88.6202775,83.4823456 88.7777778,83.4444444 C88.9349481,83.417627 89.0961625,83.4579306 89.2222222,83.5555556 L92,85.625 L91.5694444,82.2361111 C91.5520414,82.0751066 91.6023518,81.9141134 91.7083333,81.7916667 C91.8180306,81.6789665 91.9677551,81.6140859 92.125,81.6111111 L94.5555556,81.6111111 C94.7128004,81.6140859 94.862525,81.6789665 94.9722222,81.7916667 C95.0782038,81.9141134 95.1285142,82.0751066 95.1111111,82.2361111 L94.6805556,85.625 L97.4583333,83.5833333 C97.5898108,83.4869248 97.7563056,83.4514952 97.915645,83.4860188 C98.0749844,83.5205423 98.2118837,83.6217073 98.2916667,83.7638889 L99.4583333,85.8472222 C99.5281327,85.9920277 99.5281327,86.1607501 99.4583333,86.3055556 C99.4086783,86.4584557 99.2981238,86.5840857 99.1527778,86.6527778 L95.9861111,87.9583333 L99.0277778,89.3333333 Z"/>
+ <path fill="#AB71FF" d="M214.25,43.875 L93.8888889,43.875 C88.9029849,43.875 84.8611111,47.9168738 84.8611111,52.9027778 L84.8611111,139.472222 C84.8611111,144.458126 88.9029849,148.5 93.8888889,148.5 L217.263889,148.5 C220.585268,148.5 223.277778,145.80749 223.277778,142.486111 L223.277778,52.9027778 C223.277778,47.9168738 219.235904,43.875 214.25,43.875 Z"/>
+ <path fill="url(#lockwise-e)" d="M213.777778,43.875 L93.4166667,43.875 C88.4307627,43.875 84.3888889,47.9168738 84.3888889,52.9027778 L84.3888889,139.472222 C84.3888889,141.866538 85.340027,144.162788 87.0330638,145.855825 C88.7261005,147.548862 91.0223511,148.5 93.4166667,148.5 L216.791667,148.5 C220.113046,148.5 222.805556,145.80749 222.805556,142.486111 L222.805556,52.9027778 C222.805556,50.5084622 221.854417,48.2122116 220.161381,46.5191749 C218.468344,44.8261381 216.172093,43.875 213.777778,43.875 Z M216.791667,55.9166667 L90.4027778,55.9166667 L90.4027778,52.9027778 C90.4104235,51.2436794 91.7575507,49.9027778 93.4166667,49.9027778 L213.777778,49.9027778 C215.436894,49.9027778 216.784021,51.2436794 216.791667,52.9027778 L216.791667,55.9166667 Z"/>
+ <rect width="69.153" height="23.403" x="64.889" y="143.014" fill="#F9F9FA" rx="5.4"/>
+ <path fill="url(#lockwise-f)" d="M129.166667,140.541667 L70.7083333,140.541667 C65.1918192,140.556927 60.7235935,145.025152 60.7083333,150.541667 L60.7083333,159.611111 C60.7235935,165.127625 65.1918192,169.595851 70.7083333,169.611111 L129.166667,169.611111 C134.683181,169.595851 139.151407,165.127625 139.166667,159.611111 L139.166667,150.541667 C139.151407,145.025152 134.683181,140.556927 129.166667,140.541667 L129.166667,140.541667 Z M87.6805556,156.388889 C87.8322323,156.452998 87.948731,156.579627 88,156.736111 C88.0625337,156.88249 88.0625337,157.048066 88,157.194444 L86.75,159.291667 C86.6750806,159.435141 86.5353443,159.533474 86.375,159.555556 C86.2178297,159.582373 86.0566153,159.542069 85.9305556,159.444444 L83.2638889,157.402778 L83.6944444,160.791667 C83.7136028,160.952838 83.6630753,161.114526 83.5555556,161.236111 C83.4501716,161.356611 83.2989347,161.427188 83.1388889,161.430556 L80.6527778,161.430556 C80.492732,161.427188 80.341495,161.356611 80.2361111,161.236111 C80.1285914,161.114526 80.0780639,160.952838 80.0972222,160.791667 L80.5277778,157.375 L77.75,159.444444 C77.6213033,159.547708 77.453364,159.58842 77.2916667,159.555556 C77.1354901,159.514854 77.0011129,159.415315 76.9166667,159.277778 L75.7361111,157.180556 C75.6735774,157.034177 75.6735774,156.868601 75.7361111,156.722222 C75.787538,156.569022 75.9046818,156.446785 76.0555556,156.388889 L79.2083333,155.069444 L76.0416667,153.680556 C75.8971578,153.617797 75.7860909,153.496633 75.7361111,153.347222 C75.6677688,153.197233 75.6677688,153.024989 75.7361111,152.875 L76.9444444,150.819444 C77.022707,150.678939 77.1607659,150.581786 77.3194444,150.555556 C77.4746659,150.524804 77.6356838,150.560026 77.7638889,150.652778 L80.5555556,152.777778 L80.125,149.402778 C80.1058416,149.241606 80.1563692,149.079918 80.2638889,148.958333 C80.3692728,148.837833 80.5205097,148.767256 80.6805556,148.763889 L83.1111111,148.763889 C83.2711569,148.767256 83.4223939,148.837833 83.5277778,148.958333 C83.6352975,149.079918 83.685825,149.241606 83.6666667,149.402778 L83.2083333,152.777778 L85.9861111,150.736111 C86.1164398,150.636214 86.2828376,150.595875 86.4444444,150.625 C86.600621,150.665702 86.7349982,150.76524 86.8194444,150.902778 L87.9861111,153 C88.0559105,153.144805 88.0559105,153.313528 87.9861111,153.458333 C87.939427,153.609659 87.8272587,153.732025 87.6805556,153.791667 L84.5138889,155.180556 L87.6805556,156.388889 Z M105.736111,156.388889 C105.893939,156.443955 106.01381,156.574249 106.055556,156.736111 C106.125355,156.880917 106.125355,157.049639 106.055556,157.194444 L104.805556,159.291667 C104.72438,159.429519 104.58772,159.525688 104.430556,159.555556 C104.273385,159.582373 104.112171,159.542069 103.986111,159.444444 L101.388889,157.402778 L101.819444,160.791667 C101.830706,160.952012 101.781113,161.11071 101.680556,161.236111 C101.571961,161.36021 101.414903,161.43114 101.25,161.430559 L98.7638889,161.430559 C98.60245,161.427825 98.4497595,161.35669 98.3438116,161.23485 C98.2378637,161.11301 98.1886198,160.951921 98.2083333,160.791667 L98.625,157.375 L95.8472222,159.444444 C95.7191348,159.546637 95.552467,159.587072 95.3917905,159.554937 C95.2311139,159.522801 95.0928187,159.421373 95.0138889,159.277778 L93.8333333,157.180556 C93.763534,157.03575 93.763534,156.867028 93.8333333,156.722222 C93.8847603,156.569022 94.001904,156.446785 94.1527778,156.388889 L97.3055556,155.069444 L94.1388889,153.680556 C93.9921857,153.620914 93.8800175,153.498548 93.8333333,153.347222 C93.764991,153.197233 93.764991,153.024989 93.8333333,152.875 L95.0416667,150.819444 C95.1258754,150.678283 95.2682709,150.581658 95.4305556,150.555556 C95.585777,150.524804 95.7467949,150.560026 95.875,150.652778 L98.6111111,152.777778 L98.1944444,149.402778 C98.1747309,149.242524 98.2239748,149.081435 98.3299227,148.959595 C98.4358706,148.837755 98.5885611,148.766619 98.75,148.763885 L101.166667,148.763885 C101.331569,148.763305 101.488628,148.834234 101.597222,148.958333 C101.69778,149.083735 101.747373,149.242433 101.736111,149.402778 L101.388889,152.777778 L104.166667,150.736111 C104.292726,150.638486 104.453941,150.598183 104.611111,150.625 C104.770826,150.658057 104.907946,150.759628 104.986111,150.902778 L106.166667,153 C106.236466,153.144805 106.236466,153.313528 106.166667,153.458333 C106.11524,153.611533 105.998096,153.73377 105.847222,153.791667 L102.694444,155.180556 L105.736111,156.388889 Z M123.791667,156.388889 C123.942901,156.450423 124.05941,156.57537 124.110239,156.73053 C124.161067,156.885691 124.141068,157.055355 124.055556,157.194444 L122.819444,159.291667 C122.738269,159.429519 122.601609,159.525688 122.444444,159.555556 C122.282893,159.582963 122.117177,159.54279 121.986111,159.444444 L119.444444,157.402778 L119.861111,160.791667 C119.885571,160.952818 119.838027,161.116581 119.731072,161.239579 C119.624117,161.362578 119.468542,161.432401 119.305556,161.430591 L116.875,161.430591 C116.713561,161.427825 116.560871,161.35669 116.454923,161.23485 C116.348975,161.11301 116.299731,160.951921 116.319444,160.791667 L116.736111,157.375 L113.958333,159.444444 C113.83482,159.547201 113.671227,159.588099 113.513889,159.555556 C113.354174,159.522498 113.217054,159.420928 113.138889,159.277778 L111.958333,157.180556 C111.888534,157.03575 111.888534,156.867028 111.958333,156.722222 C112.008313,156.572812 112.11938,156.451648 112.263889,156.388889 L115.430556,155.069444 L112.263889,153.680556 C112.113412,153.626463 111.999162,153.501826 111.958333,153.347222 C111.889991,153.197233 111.889991,153.024989 111.958333,152.875 L113.166667,150.819444 C113.247842,150.681592 113.384502,150.585423 113.541667,150.555556 C113.701318,150.522488 113.867522,150.557743 114,150.652778 L116.777778,152.722222 L116.361111,149.347222 C116.336651,149.186071 116.384195,149.022308 116.49115,148.89931 C116.598106,148.776311 116.75368,148.706488 116.916667,148.708298 L119.333333,148.708298 C119.49632,148.706488 119.651894,148.776311 119.75885,148.89931 C119.865805,149.022308 119.913349,149.186071 119.888889,149.347222 L119.444444,152.777778 L122.222222,150.736111 C122.353979,150.63924 122.519065,150.599219 122.680556,150.625 C122.838056,150.662901 122.973402,150.763158 123.055556,150.902778 L124.236111,153 C124.30591,153.144805 124.30591,153.313528 124.236111,153.458333 C124.184684,153.611533 124.06754,153.73377 123.916667,153.791667 L120.763889,155.180556 L123.791667,156.388889 Z"/>
+ <path fill="#FFF" d="M51.64,20.7666667 C46.0864858,14.4998219 40.1601781,8.57351416 33.8933333,3.02 C30.082543,-0.123985623 24.577457,-0.123985623 20.7666667,3.02 C14.4996228,8.57566521 8.573311,14.5042033 3.02,20.7733333 C-0.123985623,24.5841237 -0.123985623,30.0892096 3.02,33.9 C8.57566521,40.1670439 14.5042033,46.0933557 20.7733333,51.6466667 C22.6030951,53.1992337 24.9339084,54.0353892 27.3333333,54 C29.7438562,54.0326548 32.0843096,53.1893335 33.92,51.6266667 C37.1866667,48.68 40.1666667,45.8333333 43.04,42.9133333 C44.0581483,41.7108072 43.9586152,39.9221388 42.8133333,38.84 L34,30.62 C36.274261,28.5981416 37.5179816,25.6602189 37.3866667,22.62 C37.1392566,17.3965683 33.0052958,13.1937081 27.7866667,12.86 C24.9872333,12.6967419 22.2453042,13.7008286 20.2133333,15.6333333 C18.1443724,17.5899155 16.9888257,20.3231815 17.026824,23.1705258 C17.0648224,26.01787 18.2928965,28.7193262 20.4133333,30.62 L17.2266667,33.5066667 C16.2045489,34.4642307 16.1359367,36.0633963 17.0722806,37.1049882 C18.0086245,38.1465801 19.6060411,38.2480612 20.6666667,37.3333333 L24.1933333,34.1333333 L24.2866667,34.0466667 C25.2417489,33.0901939 25.7520065,31.7770665 25.6933333,30.4266667 C25.6438002,29.0668006 25.03025,27.7889736 24,26.9 C22.3771375,25.5322057 21.7818989,23.2961006 22.5099768,21.3024992 C23.2380547,19.3088978 25.1342756,17.982692 27.2566667,17.982692 C29.3790578,17.982692 31.2752786,19.3088978 32.0033565,21.3024992 C32.7314345,23.2961006 32.1361959,25.5322057 30.5133333,26.9 C29.4615006,27.7865292 28.8282135,29.0724403 28.7666667,30.4466667 C28.7144664,31.7900781 29.2241686,33.0945293 30.1733333,34.0466667 L30.2333333,34.1066667 L37.6333333,41.04 C35.3666667,43.2866667 33.0066667,45.5133333 30.4933333,47.7933333 C28.6241984,49.1933351 26.0558016,49.1933351 24.1866667,47.7933333 C18.0681361,42.3666642 12.2800024,36.5785306 6.85333333,30.46 C5.45774974,28.5893962 5.45774974,26.0239371 6.85333333,24.1533333 C12.2766966,18.03169 18.0650233,12.2433633 24.1866667,6.82 C26.0544402,5.42332443 28.6188932,5.42332443 30.4866667,6.82 C36.60831,12.2433633 42.3966367,18.03169 47.82,24.1533333 C49.2166756,26.0211068 49.2166756,28.5855598 47.82,30.4533333 C46.9333333,31.4533333 46.0466667,32.4533333 45.1533333,33.3666667 C44.1923579,34.4104848 44.2595152,36.0356912 45.3033333,36.9966667 C46.3471515,37.9576421 47.9723579,37.8904848 48.9333333,36.8466667 C49.8133333,35.8933333 50.72,34.8933333 51.6,33.8666667 C54.7409838,30.0702181 54.7577411,24.5822259 51.64,20.7666667 Z" transform="translate(126.347 68.5)"/>
+ <rect width="63.083" height="95.125" x="186.611" y="79.222" fill="url(#lockwise-g)" rx="5.4"/>
+ <rect width="11.75" height="5.875" x="212.181" y="158.847" fill="#0DF"/>
+ <path fill="#FFF" d="M33.3508333,13.4118056 C29.7641888,9.3644683 25.9367817,5.53706123 21.8894444,1.95041667 C19.428309,-0.0800740485 15.872941,-0.0800740485 13.4118056,1.95041667 C9.36433971,5.53845045 5.53693002,9.36729793 1.95041667,13.4161111 C-0.0800740485,15.8772466 -0.0800740485,19.4326145 1.95041667,21.89375 C5.53845045,25.9412158 9.36729793,29.7686255 13.4161111,33.3551389 C14.5978323,34.3578384 16.1031492,34.8978556 17.6527778,34.875 C19.2095738,34.8960895 20.7211166,34.3514445 21.9066667,33.3422222 C24.0163889,31.4391667 25.9409722,29.6006944 27.7966667,27.7148611 C28.4542208,26.9382297 28.389939,25.783048 27.6502778,25.0841667 L21.9583333,19.7754167 C23.4271269,18.4696331 24.2303631,16.5722247 24.1455556,14.60875 C23.9857699,11.2352837 21.3159202,8.52093647 17.9455556,8.30541667 C16.1375882,8.19997912 14.366759,8.84845178 13.0544444,10.0965278 C11.7182405,11.3601537 10.9719499,13.1253881 10.9964905,14.9642979 C11.0210311,16.8032077 11.8141623,18.5478982 13.1836111,19.7754167 L11.1255556,21.6397222 C10.4654378,22.258149 10.4211258,23.2909435 11.0258479,23.9636382 C11.63057,24.636333 12.6622349,24.7018729 13.3472222,24.1111111 L15.6248611,22.0444444 L15.6851389,21.9884722 C16.3019629,21.3707502 16.6315042,20.5226888 16.5936111,19.6505556 C16.561621,18.7723087 16.1653698,17.9470455 15.5,17.3729167 C14.4519013,16.4895495 14.0674763,15.0453983 14.5376933,13.7578641 C15.0079103,12.4703298 16.232553,11.6138219 17.6032639,11.6138219 C18.9739748,11.6138219 20.1986174,12.4703298 20.6688344,13.7578641 C21.1390514,15.0453983 20.7546265,16.4895495 19.7065278,17.3729167 C19.0272191,17.9454668 18.6182212,18.775951 18.5784722,19.6634722 C18.5447595,20.5310921 18.8739422,21.3735502 19.4869444,21.9884722 L19.5256944,22.0272222 L24.3048611,26.505 C22.8409722,27.9559722 21.3168056,29.3940278 19.6936111,30.8665278 C18.4864615,31.7706956 16.8277052,31.7706956 15.6205556,30.8665278 C11.6690046,27.361804 7.93083491,23.6236343 4.42611111,19.6720833 C3.52479671,18.463985 3.52479671,16.8071261 4.42611111,15.5990278 C7.9286999,11.6454665 11.6669942,7.90717212 15.6205556,4.40458333 C16.8268259,3.5025637 18.4830352,3.5025637 19.6893056,4.40458333 C23.6428669,7.90717212 27.3811612,11.6454665 30.88375,15.5990278 C31.7857696,16.8052982 31.7857696,18.4615074 30.88375,19.6677778 C30.3111111,20.3136111 29.7384722,20.9594444 29.1615278,21.5493056 C28.5408978,22.2234381 28.5842702,23.2730506 29.2584028,23.8936806 C29.9325354,24.5143105 30.9821478,24.4709381 31.6027778,23.7968056 C32.1711111,23.1811111 32.7566667,22.5352778 33.325,21.8722222 C35.3535521,19.4203492 35.3643744,15.8760209 33.3508333,13.4118056 Z" transform="translate(199.472 103.222)"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/illustrations/connection-error.svg b/comm/mail/themes/shared/mail/illustrations/connection-error.svg
new file mode 100644
index 0000000000..99c8d0082b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/illustrations/connection-error.svg
@@ -0,0 +1,51 @@
+<!-- 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/. -->
+<svg version="1.1" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <linearGradient id="a" x1="-300.02" x2="547.14" y1="-272.74" y2="574.42" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#ccfbff" offset="0"/>
+ <stop stop-color="#c9e4ff" offset="1"/>
+ </linearGradient>
+ <linearGradient id="b" x1="-18.672" x2="279.8" y1="23.78" y2="322.26" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#00c8d7" offset="0"/>
+ <stop stop-color="#0a84ff" offset="1"/>
+ </linearGradient>
+ </defs>
+ <path d="M224.245 144.067h-10.733c.136.343.274.674.41 1h10.323a.5.5 0 0 0 0-1zm2.454-11.821a.5.5 0 0 0-.5-.5h-20.26c.373.357.727.688 1.065 1h19.2a.5.5 0 0 0 .496-.5zm8.546 11.821h-3a.5.5 0 1 0 0 1h3a.5.5 0 0 0 0-1zm5 0h-1a.5.5 0 1 0 0 1h1a.5.5 0 0 0 0-1zm-3.3-6.66h-25.78a12.767 12.767 0 0 1 .862 2h24.918a1 1 0 0 0 0-2zm20.422 6.66h-8.122a.5.5 0 1 0 0 1h8.122a.5.5 0 0 0 0-1z" fill="#eaeaee" fill-opacity=".4"/>
+ <path d="M269.53 87.757h-24.236c-2.108-3.9-7.559-12.718-14.4-14.023-8.952-1.707-10.737 7.217-10.737 7.217s-5.949-15.468-21-13.419c-16.878 2.3-8.928 20.065-8.928 20.065h-25.408l8.181.159h-8.184a1 1 0 0 0 0 2H269.53a1 1 0 0 0 0-2z" fill="#fff" fill-opacity=".70196"/>
+ <path d="M118.373 63.908h-13.69c-1.129-2.112-4.19-7.156-8.057-7.894-4.978-.949-5.971 4.013-5.971 4.013s-3.309-8.6-11.68-7.462c-9.386 1.278-4.965 11.158-4.965 11.158H59.88l9.471.185h-9.212a1 1 0 0 0 0 2h58.233a1 1 0 1 0 0-2z" fill="#fff" fill-opacity=".70196"/>
+ <ellipse cx="143.57" cy="245.47" rx="55.042" ry="8.362" fill="#fefeff" fill-opacity=".47843"/>
+ <path d="M102.31 121.507H60.818a1 1 0 0 0 0 2h41.492a1 1 0 1 0 0-2zM70.336 117.6H82.1a.5.5 0 0 0 0-1H70.336a.5.5 0 0 0 0 1z" fill="#eaeaee" fill-opacity=".4"/>
+ <path d="M111.457 174.8h-78.3a1 1 0 0 0 0 2h78.3a1 1 0 1 0 0-2zm-26.742-3.793h1a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1zm10 0h3.1a.5.5 0 0 0 0-1h-3.1a.5.5 0 0 0 0 1zm-17 0h3a.5.5 0 0 0 0-1h-3a.5.5 0 0 0 0 1zm-20 0h12a.5.5 0 0 0 0-1h-12a.5.5 0 0 0 0 1z" fill="#eaeaee" fill-opacity=".4"/>
+ <path d="M206.885 62.973l.045-.1c-.058.027-.063.059-.045.1z" fill="#fff"/>
+ <g fill="#eaeaee">
+ <path d="M77.937 214.941H39.95a1 1 0 1 1 0-2h37.987a1 1 0 1 1 0 2z" fill-opacity=".4"/>
+ <path d="m258.93 214.94h-61.813a1 1 0 0 1 0-2h61.813a1 1 0 0 1 0 2z" fill-opacity=".4"/>
+ <path d="M265.745 85.333h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm-11 0h-8.07a.5.5 0 0 1-.447-.277c-.007-.014-.724-1.425-1.979-3.342a.5.5 0 1 1 .837-.548c.393.6 1.444 2.293 1.888 3.167h7.772a.5.5 0 0 1 0 1zm-66.489-.712h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm-11 0h-12a.5.5 0 0 1 0-1h12a.5.5 0 0 1 0 1zM190.1 83.13a.5.5 0 0 1-.474-.339c-.1-.29-.2-.615-.31-.971a.5.5 0 1 1 .958-.287c.1.343.2.657.3.937a.5.5 0 0 1-.474.661zm30.5-5.156a.5.5 0 0 1-.467-.32 23.7 23.7 0 0 0-2.182-4.039.5.5 0 0 1 .834-.552 27.291 27.291 0 0 1 1.719 2.982 10.522 10.522 0 0 1 3.679-5.015.5.5 0 0 1 .571.82 10.181 10.181 0 0 0-3.665 5.721.5.5 0 0 1-.448.4zm18.345-2.964a.5.5 0 0 1-.339-.132q-.361-.333-.735-.651a.5.5 0 0 1 .647-.762q.39.331.765.678a.5.5 0 0 1-.339.868zm-49.923-1.725a.47.47 0 0 1-.09-.008.5.5 0 0 1-.4-.581c.792-4.351 3.544-7.229 8.18-8.556a.5.5 0 0 1 .275.962c-4.24 1.212-6.753 3.828-7.472 7.773a.5.5 0 0 1-.499.411zm45.893-1.218a.5.5 0 0 1-.237-.06 12.545 12.545 0 0 0-2.666-1.081.5.5 0 1 1 .261-.966 13.559 13.559 0 0 1 2.88 1.167.5.5 0 0 1-.238.94zM212.146 67.4a.5.5 0 0 1-.28-.086q-.4-.27-.82-.524a.5.5 0 1 1 .516-.856q.444.267.865.552a.5.5 0 0 1-.281.914zm-4.47-2.2a.5.5 0 0 1-.154-.024 16.724 16.724 0 0 0-2.832-.647.5.5 0 0 1 .137-.99 17.6 17.6 0 0 1 3 .686.5.5 0 0 1-.154.976z" fill-opacity=".43529"/>
+ <path d="M72.315 62.052h-12a.5.5 0 0 1 0-1h12a.5.5 0 0 1 0 1zm45.582-.184h-1.8a.5.5 0 0 1 0-1h1.8a.5.5 0 0 1 0 1zm-10.8 0h-1a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1zm-3.491-2.881a.5.5 0 0 1-.39-.186 18.484 18.484 0 0 0-2-2.129.5.5 0 0 1 .668-.744A19.433 19.433 0 0 1 104 58.174a.5.5 0 0 1-.389.814zm-12.521-.631a.5.5 0 0 1-.466-.319 13.8 13.8 0 0 0-3.857-5.165.5.5 0 0 1 .623-.782 14.47 14.47 0 0 1 3.624 4.438A5.414 5.414 0 0 1 94.12 53.5a.5.5 0 1 1 .326.945 4.994 4.994 0 0 0-2.867 3.51.5.5 0 0 1-.49.401zm-17.637-2.037h-.051a.5.5 0 0 1-.447-.548 6.454 6.454 0 0 1 1.057-3.036.5.5 0 1 1 .824.566 5.46 5.46 0 0 0-.886 2.571.5.5 0 0 1-.497.447zm4.193-5.039a.5.5 0 0 1-.151-.977 10.27 10.27 0 0 1 1.017-.264.5.5 0 0 1 .2.979 9.033 9.033 0 0 0-.917.237.5.5 0 0 1-.148.025z" fill-opacity=".43529"/>
+ </g>
+ <path d="M216.326 144.72c-1.079-4.2-3.73-8.616-7.88-13.117a84.471 84.471 0 0 0-8.921-9.988 5.558 5.558 0 0 0-2.261-1.3c-7.177-6.885-21.972-19.819-32.5-20.546a27.625 27.625 0 0 0-1.889-.063 47.155 47.155 0 0 0-15.147 2.913l-5.114-1.4a5 5 0 0 0-6.142 3.5l-.969 3.545a68.668 68.668 0 0 0-7.844 5.3l-2.052-.048h-.116a5 5 0 0 0-5 4.884l-.042 1.829a45.575 45.575 0 0 0-5.648 7.656 5 5 0 0 0-2.515 5.326c-1.882 5.474-2.848 13.743-2.875 24.633a100.416 100.416 0 0 1-1.646 7.791l-4.279 2.594a6.312 6.312 0 0 0-2.125 8.657l1.516 2.5q-.375.778-.761 1.518l-4.037 1.24a6.312 6.312 0 0 0-4.176 7.877l.6 1.953q-.516.587-1.038 1.143l-1.616-.127a5.926 5.926 0 0 0-.5-.02 6.334 6.334 0 0 0-6.277 5.8l-.115 1.456c-2.741 2.043-5.415 4.547-5.415 9.117 0 6.528 10.272 10.568 13.648 11.9a68.955 68.955 0 0 0 24.224 4.781q.566 0 1.127-.012c.607 2.411 1.208 4.468 1.8 6.144a54.956 54.956 0 0 0 4.745 10.264c1.748 2.839 4.22 6.1 7.845 6.1a5.673 5.673 0 0 0 3.572-1.268c1.746-1.421 2.429-3.072 2.482-10.087a86.865 86.865 0 0 0 16.862 1.533 80.987 80.987 0 0 0 14.53-1.463c-.215 6.82.472 8.55 2.275 10.017a5.672 5.672 0 0 0 3.571 1.268c5.645 0 9.953-8.9 12.573-16.361a52.867 52.867 0 0 0 1.069-3.467c1.432-3.724 4.539-13.353 4.892-27.476.161-6.428 0-12.95-.488-19.419a7.56 7.56 0 0 0 1.131-4.949c6.461-1.2 10.808-3.919 15.1-9.34 3.4-4.308 8-14.308 5.826-22.788z" fill="#fff" fill-opacity=".80392"/>
+ <path d="M211.476 145.947c-1.092-4.252-4.261-8.341-6.9-11.168a78.846 78.846 0 0 0-8.482-9.533.649.649 0 0 0-.907.018c-10.173-10.009-23.029-19.987-30.783-20.521-4.534-.313-10.392.808-16.48 3.1l-6.645-1.817-1.521 5.561a63.823 63.823 0 0 0-10.4 7l-3.884-.09-.087 3.744a40.534 40.534 0 0 0-7.123 9.675l-1.083.338.36 1.153c-2.227 5.146-3.144 14.255-3.147 24.842a104.047 104.047 0 0 1-2.33 10.6l-6 3.638a1.452 1.452 0 0 0-.685 1.835l3.021 4.978a54.736 54.736 0 0 1-2.883 5.777l-5.979 1.836a1.305 1.305 0 0 0-.864 1.63l1.394 4.541a51.394 51.394 0 0 1-4.691 5.189l-3.93-.31a1.3 1.3 0 0 0-1.4 1.2l-.3 3.752c-3.258 2.357-5.218 3.541-5.218 6.422 0 4.144 20.8 13.416 37.9 11.39a88.878 88.878 0 0 0 2.615 9.761c2.852 8.125 6.861 14.032 8.287 12.871.675-.549.711-6.554.562-12.73.446.174 8.025 3.054 21.939 3.054a88.332 88.332 0 0 0 19.876-2.718c-.4 5.844-.626 11.816.085 12.394 1.426 1.161 5.418-4.745 8.269-12.871.357-1.018.7-2.159 1.031-3.377 1.276-3.253 4.307-12.338 4.649-26.035a191.885 191.885 0 0 0-.651-21.1 2.592 2.592 0 0 0-.475-4.743 128.961 128.961 0 0 0-.36-2.871 28.465 28.465 0 0 0 4.578-.19c6.147-.82 9.835-2.869 13.728-7.786 2.797-3.536 6.551-12.06 4.914-18.439z" fill="url(#a)"/>
+ <path d="M193.99 124.155c.033.013.067.031.1.045-9.986-9.641-22.2-18.942-29.683-19.457-4.534-.313-10.392.808-16.48 3.1l-6.645-1.817-1.521 5.561a63.823 63.823 0 0 0-10.4 7l-3.884-.09-.087 3.744a40.534 40.534 0 0 0-7.123 9.675l-1.083.338.36 1.153c-2.227 5.146-3.144 14.255-3.147 24.842a109.944 109.944 0 0 1-.921 4.824c.168-.72.327-1.43.475-2.127.061 3.039.177 6.023.332 8.836-1.014 1.2-4.408 5.548-2.546 8.155a10.876 10.876 0 0 0 3.445 2.858c.069.589.138 1.155.209 1.681 1.015 7.544 4.11 29 6.408 38.3.207-.021.417-.036.623-.061a88.878 88.878 0 0 0 2.615 9.761c2.852 8.125 6.861 14.032 8.287 12.871.675-.549.711-6.554.562-12.73.038.015.145.054.283.1V222.3a46 46 0 0 0 27.634 3.451c15.651-3.043 21.467-14.705 22.172-22.607 1.194-13.372-1.415-19.893-1.415-19.893l6.558-2.852c-.011-.135-.022-.284-.034-.417a2.592 2.592 0 0 0-.475-4.743l-11.158 4.316s-.109-1.739-2.5-4.348c-3.174-3.462-10.521-6.355-11.428-6.7a84.091 84.091 0 0 0 24.884 5.065l-.109-.839c-10.706-.609-24.216-5.348-24.216-5.348s23.783 4.316 33.476-.761c6.847-3.587 11.086-13.369 9.456-21.846-1.731-9.023-13.024-20.623-13.024-20.623z" fill="#f9f9fa"/>
+ <path d="M149.523 146.54l-5.537-1.957a1 1 0 0 0-1.219 1.406l1.99 3.81a1 1 0 0 0 1.349.423l3.547-1.853a1 1 0 0 0-.13-1.829z" fill="#fff"/>
+ <g fill="url(#b)">
+ <path d="M268.754 200.7h-.768c-17.152 0-33.29 0-42.937.322-8.333.277-16.774 1.994-16.787 4.736-.008 1.811 4.646 3.3 13.565 5.982 7.387 2.225 17.5 5.271 17.736 7.75a2.9 2.9 0 0 1-1.2 2.046c-2.984 2.772-11.281 5.909-19.089 4.588a25.1 25.1 0 0 1-12.468-6.4c-4.383-3.888-6.191-7.86-7.786-11.364-.619-1.359-1.2-2.643-1.9-3.837a22.145 22.145 0 0 0-5.357-6.126 194.068 194.068 0 0 0-.6-17.308 4.6 4.6 0 0 0-.2-6.523c.75-.036 1.463-.1 2.13-.188 6.749-.9 10.823-3.211 15.032-8.527 3.282-4.146 7.092-13.147 5.287-20.18-1.2-4.662-4.606-9.055-7.29-11.947a80.769 80.769 0 0 0-8.657-9.724 2.62 2.62 0 0 0-1.653-.713 133.306 133.306 0 0 0-15.775-13.264c-6.315-4.414-11.527-6.79-15.492-7.064a24.782 24.782 0 0 0-1.683-.056 45.119 45.119 0 0 0-15.027 3.055l-6.025-1.648a2 2 0 0 0-2.457 1.4l-1.3 4.745a65.633 65.633 0 0 0-9.391 6.332l-3.141-.073h-.047a2 2 0 0 0-2 1.953l-.069 2.965a42.572 42.572 0 0 0-6.522 8.837l-.3.093a2 2 0 0 0-1.312 2.506l.145.465c-1.993 5.12-3.01 13.443-3.023 24.766a102.594 102.594 0 0 1-2.05 9.47L105.03 171a3.309 3.309 0 0 0-1.114 4.538l2.345 3.87a56.333 56.333 0 0 1-2.1 4.209l-5.216 1.6a3.309 3.309 0 0 0-2.189 4.129l1.082 3.524a49.795 49.795 0 0 1-3.217 3.554l-3.023-.238a3.177 3.177 0 0 0-.267-.011 3.318 3.318 0 0 0-3.287 3.043l-.223 2.83c-2.965 2.13-5.3 3.833-5.3 7.5 0 2.65 3.4 5.1 6.95 6.946a89.372 89.372 0 0 0-1.57 3.365c-1.866 4.156-3.1 6.9-7.448 8.232-8.459 2.584-20.437.244-26.315-3.564-1.825-1.182-2.9-2.432-3.041-3.519-.264-2.111 5.188-4.187 9.167-5.7 3.919-1.492 6.152-2.394 6.47-3.56a1.66 1.66 0 0 0-.295-1.493C64.48 207.69 53.977 207.22 34 207.22a.5.5 0 0 0 0 1c12.5 0 29.627 0 31.645 2.642a.661.661 0 0 1 .125.623c-.2.732-3.339 1.928-5.861 2.888-5 1.9-10.165 3.871-9.8 6.761.176 1.405 1.382 2.869 3.489 4.234 4.275 2.77 11.581 4.841 18.68 4.841a29.2 29.2 0 0 0 8.471-1.16c4.784-1.462 6.161-4.531 8.068-8.778a89.007 89.007 0 0 1 1.552-3.326 54.676 54.676 0 0 0 3.9 1.709 65.842 65.842 0 0 0 23.126 4.572c1.177 0 2.336-.042 3.462-.126a80.823 80.823 0 0 0 2.292 8.265c.516 1.469 5.171 14.354 9.759 14.354a2.629 2.629 0 0 0 1.678-.595c.831-.677 1.5-1.223 1.353-11.536a76.69 76.69 0 0 0 19.885 2.308 86.392 86.392 0 0 0 17.71-2.167c-.585 10.114.149 10.711.989 11.395a2.628 2.628 0 0 0 1.677.595c4.572 0 9.226-12.885 9.742-14.354.347-.989.7-2.137 1.046-3.412 1.345-3.458 4.4-12.766 4.747-26.612.014-.552.01-1.108.019-1.662a20.857 20.857 0 0 1 4.507 5.34c.668 1.152 1.242 2.415 1.851 3.751 1.636 3.595 3.491 7.669 8.032 11.7a26.054 26.054 0 0 0 12.965 6.641 24.08 24.08 0 0 0 4.006.325c6.5 0 12.949-2.4 15.93-5.166a3.735 3.735 0 0 0 1.514-2.872c-.274-2.93-7.481-5.313-18.444-8.614-5.427-1.634-12.859-3.872-12.854-5.02.006-1.314 5.643-3.4 15.82-3.742 9.631-.321 25.785-.326 42.9-.321h.768a.5.5 0 0 0 0-1zM204.579 135c2.636 2.827 5.805 6.916 6.9 11.168 1.637 6.379-2.117 14.9-4.918 18.441-3.893 4.918-7.581 6.967-13.728 7.786-.7.093-1.432.142-2.179.172a.988.988 0 0 0-.354-.077 73.652 73.652 0 0 1-26.1-5.54 1 1 0 0 0-.826 1.821 74.46 74.46 0 0 0 25.115 5.664c.039.323.08.659.121 1.021a2.579 2.579 0 0 1 1.39 3.874.484.484 0 0 0-.243.11c-1.838 1.634-8.407 3.132-8.474 3.146a.5.5 0 0 0-.113.041l-2.2 1.1a.5.5 0 0 0-.274.5c.006.061.561 6.134-2.275 8.973a5.1 5.1 0 0 1-3.97 1.438l.82-4.449a.5.5 0 0 0-.383-.579l-2.605-.579c-.139-1-.37-4.182 1.943-5.917.976-.731 8.157-3.579 10.842-4.614a.5.5 0 0 0-.359-.933c-1 .386-9.818 3.8-11.082 4.747-3.262 2.447-2.312 7.043-2.27 7.237a.492.492 0 0 0 .107.2q-1.276-.217-2.6-.406c-.048-1.62-.626-3.782-2.151-4.88a3.922 3.922 0 0 0-3.715-.379.507.507 0 0 0-.086.039 5.413 5.413 0 0 0-2.65 4.454c0 2.46 1.4 5.3 3.473 5.614a5.187 5.187 0 0 0 .772.059 4.147 4.147 0 0 0 2.763-1 4.691 4.691 0 0 0 1.526-2.9q2.748.39 5.267.9l-.694 3.765a.5.5 0 0 0 .444.588q.446.043.87.043a6.04 6.04 0 0 0 4.449-1.735 6.78 6.78 0 0 0 .928-1.172 40.237 40.237 0 0 1 11.732 5.419q-.012 1.546-.051 3.143c-.342 13.7-3.374 22.782-4.649 26.035a48.73 48.73 0 0 1-1.031 3.377c-2.611 7.438-6.177 13.017-7.855 13.017a.639.639 0 0 1-.415-.146c-.669-.545-.51-5.868-.153-11.366a19.327 19.327 0 0 0 5.9-3.617.5.5 0 0 0-.717-.7 18.885 18.885 0 0 1-5.594 3.4 87.371 87.371 0 0 1-19.4 2.607c-11.281 0-18.4-1.892-20.923-2.7l-.26-6.109a.5.5 0 1 0-1 .043l.243 5.714c.149 6.176.113 12.181-.562 12.73a.639.639 0 0 1-.415.146c-1.681 0-5.261-5.579-7.872-13.017a88.882 88.882 0 0 1-2.615-9.761h-.005c-2.551-10.248-4.636-21.971-4.657-22.089a.5.5 0 1 0-.984.175c.021.118 2.091 11.756 4.633 22-1.324.122-2.662.2-4.013.2a63.607 63.607 0 0 1-26.1-6.059 44.608 44.608 0 0 1 6.949-9.4c9.072-9.555 18.343-13.569 25.331-15.21a6.619 6.619 0 0 0 2.526 3.172 5.232 5.232 0 0 0 2.774.9 4.77 4.77 0 0 0 3.579-1.983.5.5 0 0 0 .052-.57l-1.467-2.574q2.151-.118 4.317-.032c1.077 3.689 5.807 4.056 5.858 4.06h.033a.5.5 0 0 0 .464-.314 8.392 8.392 0 0 0 .432-1.968h2.691a.5.5 0 1 0 0-1h-2.606a18.073 18.073 0 0 0-.152-3.239h2.437a.5.5 0 0 0 0-1h-2.593a24.74 24.74 0 0 0-.512-2.243.5.5 0 0 0-.564-.359 11.053 11.053 0 0 0-3 1.03c-1.867.989-2.77 2.376-2.658 4.025a46.151 46.151 0 0 0-4.689.068l-.048-.084 2.933-.3a.5.5 0 0 0 .449-.484c.005-.2.1-4.931-2.952-6.689-1.677-.968-11.4-4.872-11.818-5.037a.5.5 0 0 0-.372.928c.1.041 10.074 4.043 11.69 4.976 2.05 1.183 2.388 4.223 2.442 5.359l-3.237.333a.5.5 0 0 0-.383.745l2.271 3.988c-1.076 1.186-2.506 2.067-4.831.615-3.425-2.138-3.069-8.563-3.019-9.262 0-.022.005-.044 0-.066v-.007a.5.5 0 0 0-.052-.266.985.985 0 0 0-.548-.63c-.037-.016-3.859-1.7-7.521-3.205-3.062-1.261-3.5-3.464-3.524-3.584a1 1 0 0 0-1.975.313c.021.138.568 3.4 4.738 5.121 3.645 1.5 7.452 3.176 7.488 3.191.056.024.2.091.35.158a17.069 17.069 0 0 0 .664 4.966c-7.122 1.693-16.53 5.791-25.719 15.47a45.518 45.518 0 0 0-7.118 9.64c-3.625-1.887-5.88-3.8-5.88-5.166 0-2.882 1.96-4.065 5.218-6.422l.3-3.752a1.306 1.306 0 0 1 1.293-1.2h.11l2.534.2a15.544 15.544 0 0 1-1.922 1.463.5.5 0 0 0 .545.839 15.693 15.693 0 0 0 2.715-2.2h.058a51.394 51.394 0 0 0 4.691-5.189l-1.394-4.541a1.305 1.305 0 0 1 .864-1.63l4.352-1.336-1.57 2.34a.5.5 0 1 0 .83.558l2.256-3.363.111-.034a59.576 59.576 0 0 0 3-6.032l-2.884-4.76a1.305 1.305 0 0 1 .439-1.792l4.593-2.784-.9 2.5a.5.5 0 0 0 .941.338l1.316-3.665.051-.031c.038-.137.069-.27.106-.406l.078-.218a.5.5 0 0 0 .027-.185 105.18 105.18 0 0 0 2.119-9.789c0-9.717.779-18.179 2.627-23.484l.683 1.709a.5.5 0 0 0 .929-.371l-1.144-2.862-.308-.986 1.083-.338a39.766 39.766 0 0 1 6.223-8.725 12.852 12.852 0 0 0 .241 1.72.5.5 0 0 0 .629.315.5.5 0 0 0 .32-.631 24.71 24.71 0 0 1-.287-2.484l.084-3.613 3.884.09a63.833 63.833 0 0 1 10.4-7l1.521-5.561 5.138 1.405-2.527 1.118a.5.5 0 1 0 .409.912l3.7-1.659a44.04 44.04 0 0 1 14.851-3.124q.8 0 1.545.052c7.754.535 20.609 10.512 30.783 20.521a.655.655 0 0 1 .465-.193.639.639 0 0 1 .442.176m0 0a78.848 78.848 0 0 1 8.484 9.535m-14.79 61.935a42.035 42.035 0 0 0-11.248-5.1 15.357 15.357 0 0 0 1.207-6.3.955.955 0 0 0 .1.016.989.989 0 0 0 .292-.044l9.149-2.784c.288 4.005.511 8.839.5 14.208z"/>
+ <path d="m193.22 139.67a1.412 1.412 0 0 0 1.41-1.41v-3.159a1.41 1.41 0 0 0-2.821 0v3.162a1.412 1.412 0 0 0 1.411 1.407z"/>
+ <path d="m193.22 144.48a5.736 5.736 0 0 0 4.644-2.413 1 1 0 1 0-1.679-1.088 3.76 3.76 0 0 1-2.965 1.5 3.71 3.71 0 0 1-2.969-1.506 1 1 0 0 0-1.675 1.094 5.736 5.736 0 0 0 4.644 2.413z"/>
+ <path d="m163.85 142.72a1 1 0 0 0 1.674-1.094 5.674 5.674 0 0 0-9.286 0 1 1 0 0 0 1.674 1.095 3.679 3.679 0 0 1 5.938 0z"/>
+ <path d="M159.473 135.1v3.162c0 .036.008.07.011.106a6.569 6.569 0 0 1 2.8 0c0-.036.011-.07.011-.106V135.1a1.41 1.41 0 1 0-2.821 0z"/>
+ <path d="m160.91 130.09a5.733 5.733 0 0 0 4.643-2.412 1 1 0 0 0-1.674-1.095 3.679 3.679 0 0 1-5.937 0 1 1 0 0 0-1.674 1.094 5.733 5.733 0 0 0 4.642 2.413z"/>
+ <path d="M155.934 155.646a18.515 18.515 0 0 0-4.51-8.323c-5.144-5.145-12.507-4.867-12.817-4.857a1 1 0 0 0 .089 2 16.68 16.68 0 0 1 3.159.279 18.431 18.431 0 0 0 1.1 3.47 6.118 6.118 0 0 0-1.562.513 7.174 7.174 0 0 0-2.41 2.27.5.5 0 1 0 .84.542 6.254 6.254 0 0 1 2.014-1.917 5.319 5.319 0 0 1 1.6-.478 4.113 4.113 0 0 0 .928 1.091 6.669 6.669 0 0 0-.955 2.347 7.171 7.171 0 0 0 .372 3.29.5.5 0 0 0 .469.326.494.494 0 0 0 .174-.031.5.5 0 0 0 .295-.643 6.214 6.214 0 0 1-.326-2.76 5.734 5.734 0 0 1 .894-2.1 2.673 2.673 0 0 0 .474.054 9.686 9.686 0 0 0 4.458-1.746 16.947 16.947 0 0 1 3.75 7.1 1 1 0 0 0 1.956-.42zm-10.821-6.082c-1.027-.642-1.8-3.029-2.178-4.592a15.045 15.045 0 0 1 6.547 3.285c-1.517.943-3.507 1.843-4.37 1.307z"/>
+ <path d="M193.839 116.06a1 1 0 0 0 .71-.3l2.533-2.554a1 1 0 1 0-1.42-1.408l-2.533 2.554a1 1 0 0 0 .71 1.7z"/>
+ <path d="M199.708 117.691a1 1 0 0 0 .409-.088l3.512-1.576a1 1 0 0 0-.818-1.825l-3.512 1.576a1 1 0 0 0 .41 1.913z"/>
+ <path d="M193.882 183.558a.5.5 0 0 0 .106.988.487.487 0 0 0 .105-.011 5.176 5.176 0 0 0 3-7.9.5.5 0 0 0-.807.591 4.178 4.178 0 0 1-2.41 6.327z"/>
+ <path d="M195.435 187.387a.487.487 0 0 0 .105-.011 7.781 7.781 0 0 0 4.512-11.856.5.5 0 1 0-.807.591 6.884 6.884 0 0 1 .676 6.146 6.8 6.8 0 0 1-4.593 4.142.5.5 0 0 0 .105.989z"/>
+ <path d="M127.087 198.745a5.134 5.134 0 0 0 1.54.239 5.254 5.254 0 0 0 3.143-1.063.5.5 0 0 0-.637-.771 4.178 4.178 0 0 1-6.463-2.021.5.5 0 0 0-.962.271 5.206 5.206 0 0 0 3.379 3.345z"/>
+ <path d="M132.43 200.03a6.783 6.783 0 0 1-10.508-3.284.5.5 0 0 0-.963.27 7.773 7.773 0 0 0 12.108 3.785.5.5 0 0 0-.638-.771z"/>
+ </g>
+ <g fill="#f9f9fa">
+ <path d="M160.366 188.859a.5.5 0 0 1-.43-.754l1.345-2.283a.5.5 0 1 1 .861.508l-1.345 2.283a.5.5 0 0 1-.431.246z"/>
+ <path d="M161.086 192.527a.5.5 0 0 1-.43-.754l1.344-2.282a.5.5 0 1 1 .861.508l-1.345 2.282a.5.5 0 0 1-.43.246z"/>
+ </g>
+</svg>
diff --git a/comm/mail/themes/shared/mail/illustrations/form.svg b/comm/mail/themes/shared/mail/illustrations/form.svg
new file mode 100644
index 0000000000..3207b0f0da
--- /dev/null
+++ b/comm/mail/themes/shared/mail/illustrations/form.svg
@@ -0,0 +1,56 @@
+<!-- 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/. -->
+<svg version="1.1" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <linearGradient id="a" x1="-300.02" x2="547.14" y1="-272.74" y2="574.42" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#ccfbff" offset="0"/>
+ <stop stop-color="#c9e4ff" offset="1"/>
+ </linearGradient>
+ <linearGradient id="b" x1="-18.672" x2="279.8" y1="23.78" y2="322.26" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#00c8d7" offset="0"/>
+ <stop stop-color="#0a84ff" offset="1"/>
+ </linearGradient>
+ </defs>
+ <path d="m267.46 87.073h-27.583c-2.347-4.377-8.617-14.64-16.509-16.145-10.217-1.948-12.254 8.237-12.254 8.237s-6.79-17.654-23.97-15.315c-19.262 2.623-10.189 22.9-10.189 22.9h-29l16.568 0.323h-16.569a1 1 0 0 0 0 2h119.51a1 1 0 0 0 0-2z" fill="#fff" fill-opacity=".70196"/>
+ <path d="M100.384 63.259H84.836c-1.212-2.3-4.758-8.29-9.271-9.15-5.682-1.083-6.814 4.58-6.814 4.58s-3.776-9.817-13.33-8.517c-10.712 1.458-5.666 12.735-5.666 12.735H33.629l18.049.352H33.924a1 1 0 1 0 0 2h66.46a1 1 0 0 0 0-2z" fill="#fff" fill-opacity=".70196"/>
+ <g fill="#eaeaee" fill-opacity=".4">
+ <path d="M122.246 134H26.93a1 1 0 1 1 0-2h95.316a1 1 0 1 1 0 2z"/>
+ <path d="M106.678 127.455H60.912a.5.5 0 1 1 0-1h45.766a.5.5 0 0 1 0 1z"/>
+ <path d="m245.16 186.75h-90.336a1 1 0 0 1 0-2h90.336a1 1 0 0 1 0 2z"/>
+ </g>
+ <g fill="none" stroke="#eaeaee" stroke-dasharray="12 8 3 4 1 9" stroke-linecap="round" stroke-linejoin="round">
+ <path d="m132.52 192.78h135.95" stroke-opacity=".4"/>
+ <path d="m148.46 82.782h29s-9.074-20.277 10.189-22.9c17.18-2.339 23.97 15.315 23.97 15.315s2.037-10.185 12.254-8.237c10.074 1.921 17.511 16.634 17.511 16.634h25.25" stroke-opacity=".43529"/>
+ <path d="M34.125 60.429H50.25s-5.05-11.276 5.667-12.735c9.554-1.3 13.33 8.517 13.33 8.517s1.133-5.664 6.814-4.58c5.6 1.068 9.738 8.589 9.738 8.589h14.042" stroke-opacity=".43529"/>
+ </g>
+ <ellipse cx="149.78" cy="243.18" rx="77.947" ry="6.445" fill="#fefeff" fill-opacity=".47843"/>
+ <path d="m221.88 77.056h-143.87a10.312 10.312 0 0 0-10.3 10.3v134.03a9.824 9.824 0 0 0 9.95 9.669h144.57a9.824 9.824 0 0 0 9.95-9.669v-134.03a10.313 10.313 0 0 0-10.3-10.3z" fill="#fff" fill-opacity=".80392"/>
+ <path d="M221.876 81.89H78.01a5.306 5.306 0 0 0-5.3 5.3v134.027a4.821 4.821 0 0 0 4.95 4.669h144.566a4.821 4.821 0 0 0 4.95-4.669V87.19a5.307 5.307 0 0 0-5.3-5.3z" fill="#f9f9fa"/>
+ <g fill="url(#a)">
+ <path d="M76.368 105.543V219c0 2.28.84 3.13 3.12 3.13H220.4c2.28 0 3.12-.85 3.12-3.13V105.543zM185 200.6a3.693 3.693 0 0 1-3.693 3.693h-60.762a3.693 3.693 0 0 1-3.693-3.693v-78.762a3.693 3.693 0 0 1 3.693-3.693h44.971L185 137.421z"/>
+ <path d="M187.187 193.93h-16.773a2.625 2.625 0 0 1-1.924-.89l-5.326-5.759a2.924 2.924 0 0 1 0-3.894l5.326-5.759a2.625 2.625 0 0 1 1.924-.89h16.773c1.6 0 2.9 1.582 2.9 3.534V190.4c-.001 1.948-1.299 3.53-2.9 3.53z"/>
+ <path d="m187.19 166.02h-16.773a2.625 2.625 0 0 1-1.924-0.89l-5.326-5.759a2.924 2.924 0 0 1 0-3.894l5.326-5.759a2.625 2.625 0 0 1 1.924-0.89h16.773c1.6 0 2.9 1.582 2.9 3.534v10.126c-1e-3 1.949-1.299 3.532-2.9 3.532z"/>
+ </g>
+ <g fill="url(#b)">
+ <path d="M221.876 81.891a5.307 5.307 0 0 1 5.3 5.3v134.026a4.821 4.821 0 0 1-4.95 4.669H77.66a4.821 4.821 0 0 1-4.95-4.669V87.19a5.306 5.306 0 0 1 5.3-5.3h143.866m0-2H78.01a7.308 7.308 0 0 0-7.3 7.3v134.027a6.822 6.822 0 0 0 6.95 6.669h144.566a6.822 6.822 0 0 0 6.95-6.669V87.19a7.309 7.309 0 0 0-7.3-7.3z"/>
+ <circle cx="85.771" cy="93.32" r="3.241"/>
+ <circle cx="96.226" cy="93.32" r="3.241"/>
+ <path d="M186.093 96.986h-72.3a3.509 3.509 0 0 1-3.509-3.509v-.313a3.509 3.509 0 0 1 3.509-3.509h72.3a3.509 3.509 0 0 1 3.509 3.509v.313a3.509 3.509 0 0 1-3.509 3.509z"/>
+ <circle cx="203.66" cy="93.32" r="3.241"/>
+ <circle cx="214.12" cy="93.32" r="3.241"/>
+ <path d="m157.13 131.14h-31.754a1.351 1.351 0 1 1 0-2.7h31.755a1.351 1.351 0 1 1 0 2.7z"/>
+ <path d="m153.61 139.09a1.351 1.351 0 0 0-1.351-1.351h-26.882a1.351 1.351 0 0 0 0 2.7h26.882a1.351 1.351 0 0 0 1.351-1.349z"/>
+ <path d="m164.68 148.39a1.351 1.351 0 0 0-1.351-1.351h-37.949a1.351 1.351 0 0 0 0 2.7h37.949a1.351 1.351 0 0 0 1.351-1.349z"/>
+ <path d="m159.66 157.69a1.351 1.351 0 0 0-1.351-1.351h-32.938a1.351 1.351 0 0 0 0 2.7h32.938a1.351 1.351 0 0 0 1.351-1.349z"/>
+ <path d="m153.61 166.99a1.351 1.351 0 0 0-1.351-1.351h-26.882a1.351 1.351 0 1 0 0 2.7h26.882a1.351 1.351 0 0 0 1.351-1.349z"/>
+ <path d="m164.68 176.29a1.351 1.351 0 0 0-1.351-1.351h-37.949a1.351 1.351 0 1 0 0 2.7h37.949a1.351 1.351 0 0 0 1.351-1.349z"/>
+ <path d="m159.67 185.59a1.351 1.351 0 0 0-1.351-1.351h-32.945a1.351 1.351 0 1 0 0 2.7h32.944a1.351 1.351 0 0 0 1.352-1.349z"/>
+ <path d="m164.68 194.89a1.351 1.351 0 0 0-1.351-1.351h-37.949a1.351 1.351 0 1 0 0 2.7h37.949a1.351 1.351 0 0 0 1.351-1.349z"/>
+ <path d="M165.517 118.145l19.276 19.276h-15.179a4.1 4.1 0 0 1-4.1-4.1v-15.176m0-1a1 1 0 0 0-1 1v15.179a5.1 5.1 0 0 0 5.1 5.1h15.179a1 1 0 0 0 .707-1.707l-19.276-19.276a1 1 0 0 0-.707-.293z"/>
+ <path d="M187.187 178.737c.367 0 .9.6.9 1.534V190.4c0 .936-.532 1.534-.9 1.534h-16.773a.689.689 0 0 1-.455-.248l-5.326-5.759a.932.932 0 0 1 0-1.178l5.326-5.759a.688.688 0 0 1 .455-.248h16.773m0-2h-16.773a2.625 2.625 0 0 0-1.924.89l-5.326 5.759a2.924 2.924 0 0 0 0 3.894l5.326 5.759a2.626 2.626 0 0 0 1.924.89h16.773c1.6 0 2.9-1.582 2.9-3.534v-10.129c0-1.952-1.3-3.534-2.9-3.534z"/>
+ <path d="M187.187 150.827c.367 0 .9.6.9 1.534v10.126c0 .936-.532 1.534-.9 1.534h-16.773a.689.689 0 0 1-.455-.248l-5.326-5.759a.932.932 0 0 1 0-1.178l5.326-5.76a.687.687 0 0 1 .455-.248h16.773m0-2h-16.773a2.624 2.624 0 0 0-1.924.89l-5.326 5.759a2.924 2.924 0 0 0 0 3.894l5.326 5.759a2.626 2.626 0 0 0 1.924.89h16.773c1.6 0 2.9-1.582 2.9-3.534v-10.125c0-1.952-1.3-3.534-2.9-3.534z"/>
+ <path d="M186.408 136l-19.485-19.276a2 2 0 0 0-1.407-.578h-44.971a5.7 5.7 0 0 0-5.693 5.693V200.6a5.7 5.7 0 0 0 5.693 5.693h60.763A5.693 5.693 0 0 0 187 200.6v-8.67h-2v8.67a3.693 3.693 0 0 1-3.693 3.693h-60.762a3.693 3.693 0 0 1-3.693-3.693v-78.762a3.693 3.693 0 0 1 3.693-3.693h44.971L185 137.421v13.406h2v-13.406a2 2 0 0 0-.592-1.421zM185 178.737h2v-14.716h-2z"/>
+ <path d="m180.31 205.81h-58.763a5.7 5.7 0 0 1-5.693-5.693v4.667a5.7 5.7 0 0 0 5.693 5.693h58.763a5.693 5.693 0 0 0 5.692-5.694v-4.667a5.693 5.693 0 0 1-5.693 5.693z"/>
+ </g>
+</svg>
diff --git a/comm/mail/themes/shared/mail/illustrations/octopus-setup.svg b/comm/mail/themes/shared/mail/illustrations/octopus-setup.svg
new file mode 100644
index 0000000000..6a533c2f92
--- /dev/null
+++ b/comm/mail/themes/shared/mail/illustrations/octopus-setup.svg
@@ -0,0 +1,75 @@
+<!-- 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/. -->
+<svg width="300" height="300" version="1.1" viewBox="0 0 79.375 79.375" xmlns="http://www.w3.org/2000/svg">
+ <ellipse cx="35.963" cy="60.548" rx="15.196" ry="2.3841" fill="#fefeff" fill-opacity=".48001" stroke-width=".29234"/>
+ <path d="m36.047 19.41c-4.4982-1.7e-5 -8.1447 3.4697-8.1447 7.7499 1.51e-4 0.24727 0.01274 0.4944 0.03772 0.74052-0.99194 0.81304-1.558 1.9688-1.558 3.1812 4.7e-5 1.5603 0.93476 2.9976 2.4407 3.7527 0.02085 0.13742 0.30639 2.0565 0.30282 3.5404-0.18418 0.41388-0.89123 1.6677-2.7032 1.5239-2.1625-0.17163-3.3905-2.7554-3.3905-2.7554s-0.60994-1.9455-1.6434-2.0236c-0.96743-0.07306-0.67426 1.7409-0.67426 1.7409s0.18192 4.9179 4.1186 6.2797c0.42378 0.1466 0.83195 0.25504 1.2278 0.3421-0.9343 0.97235-2.1668 2.2657-2.8763 3.0882-1.0793 1.2511-1.3811 1.6822-2.0304 1.7978-0.64927 0.11561-3.5976-1.027-4.2478-1.0811-4.0779-0.33944-1.9858 1.4504-1.9858 1.4504s2.6731 2.4946 4.2048 2.8935c1.5317 0.39887 1.697 0.3256 2.2608 0.26975 0.56382-0.05585 1.7077-0.06807 3.1946-1.0227 1.0458-0.6714 3.1716-2.2181 4.6245-3.1807 0.0816 0.72176 0.02405 1.4594 0.0863 2.7549 0.10088 2.099 0.17194 3.9611-1.1746 5.4131-1.1433 1.2328-1.8636 1.5117-2.0655 1.572-0.52537 0.0845-0.90908 0.50858-0.90899 1.0046 3.26e-4 0.55464 0.47727 1.0072 1.0733 1.0185l5.3e-4 0.0036s2.5185 0.42481 4.1672-0.71107c1.6487-1.1359 3.5453-3.7658 3.9656-5.656 0.4204-1.8901 0.95442-5.2651 1.5756-5.5904 0.46896-0.24551 1.3174 4.6147 1.7012 5.7914 0.38379 1.1766 1.5944 3.8405 3.0634 4.8044 1.4485 0.95039 3.4636 1.3532 4.5837 1.2795 0.01722 6.09e-4 0.03445 9.76e-4 0.05168 0.0011 0.79347 6e-5 1.4367-0.50366 1.4366-1.125-7e-6 -0.36954-0.23181-0.71551-0.62012-0.92552-0.05145-0.0382-0.34598-0.25401-1.1694-0.75344-0.90125-0.54662-2.4485-1.8997-2.5321-4.1858-0.06164-1.6837 0.04596-3.4773 0.15555-5.2503 0.36244-0.04441 0.87024-0.0055 1.5694 0.23978 1.8317 0.64258 2.44 1.6458 3.1414 2.4169 0.7014 0.77113 2.2625 1.8248 4.0013 1.9771 1.7388 0.15239 2.282-0.64379 3.0954-1.064 0.81343-0.42023 0.50544-0.99596 0.82682-2.0479 0.32139-1.052-0.67861-0.26114-2.2252-0.45579-1.5466-0.19464-2.059-0.83252-2.7471-1.3586-0.68809-0.52605-1.2902-1.8953-2.3167-2.975-0.20753-0.21828-0.43582-0.39526-0.66766-0.54105 0.44637-0.02011 0.86425-0.06243 1.1839-0.14263 1.3367-0.33539 2.3263-1.6463 3.2432-2.8122 0.91694-1.1659 1.2291-2.805 1.1152-4.9036-0.11394-2.0986 0.06614-3.4129 0.6258-4.4111 0.55966-0.99821 1.9466-1.9845 2.434-2.4856 0.4874-0.50118-0.16216-2.7965-1.525-2.1983-1.3628 0.59816-2.2172 1.2577-4.1501 3.0019-1.9329 1.7442-1.697 3.678-1.8118 4.6555-0.11475 0.97749 0.48506 2.8561-1.2501 4.2034-1.7351 1.3472-2.8484 0.22178-3.6758-0.852-0.82744-1.0738-0.62366-2.5437-0.62366-2.5437 1.7322-0.63297 2.8537-2.076 2.8536-3.6716-1.5e-5 -1.1369-0.57221-2.22-1.5735-2.9786 0.04878-0.34342 0.07329-0.68957 0.07338-1.0361 1.2e-5 -4.2802-3.6465-7.7499-8.1447-7.7499z" fill="none" stroke="#05a7eb" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="1.0583"/>
+ <path d="m36.047 19.41c-4.4982-1.7e-5 -8.1447 3.4697-8.1447 7.7499 1.51e-4 0.24727 0.01274 0.4944 0.03772 0.74052-0.99194 0.81304-1.558 1.9688-1.558 3.1812 4.7e-5 1.5603 0.93476 2.9976 2.4407 3.7527 0.02085 0.13742 0.30639 2.0565 0.30282 3.5404-0.18418 0.41388-0.89123 1.6677-2.7032 1.5239-2.1625-0.17163-3.3905-2.7554-3.3905-2.7554s-0.51096-1.1628-1.3544-1.2263c-0.84348-0.06347-0.96325 0.94361-0.96325 0.94361s0.18192 4.9179 4.1186 6.2797c0.42378 0.1466 0.83195 0.25504 1.2278 0.3421-0.9343 0.97235-2.1668 2.2657-2.8763 3.0882-1.0793 1.2511-1.3811 1.6822-2.0304 1.7978-0.64927 0.11561-3.6093-0.94673-4.2478-1.0811-0.63847-0.13434-0.28009 3.1037-0.28009 3.1037s0.96735 0.84136 2.4991 1.2402c1.5317 0.39887 1.697 0.3256 2.2608 0.26975 0.56382-0.05585 1.7077-0.06807 3.1946-1.0227 1.0458-0.6714 3.1716-2.2181 4.6245-3.1807-3e-3 0.79829 0.02405 1.4594 0.0863 2.7549 0.10088 2.099 0.17194 3.9611-1.1746 5.4131-1.1433 1.2328-1.8636 1.5117-2.0655 1.572-0.52537 0.0845-0.90908 0.50858-0.90899 1.0046 3.26e-4 0.55464 0.47727 1.0072 1.0733 1.0185l5.3e-4 0.0036s2.5185 0.42481 4.1672-0.71107c1.6487-1.1359 3.5453-3.7658 3.9656-5.656 0.4204-1.8901 0.95442-5.2651 1.5756-5.5904 0.46896-0.24551 1.3174 4.6147 1.7012 5.7914 0.38379 1.1766 1.5944 3.8405 3.0634 4.8044 1.4485 0.95039 3.4636 1.3532 4.5837 1.2795 0.01722 6.09e-4 0.03445 9.76e-4 0.05168 0.0011 0.79347 6e-5 1.4367-0.50366 1.4366-1.125-7e-6 -0.36954-0.23181-0.71551-0.62012-0.92552-0.05145-0.0382-0.34598-0.25401-1.1694-0.75344-0.90125-0.54662-2.4485-1.8997-2.5321-4.1858-0.06164-1.6837 0.04596-3.4773 0.15555-5.2503 0.36244-0.04441 0.87024-0.0055 1.5694 0.23978 1.8317 0.64258 2.44 1.6458 3.1414 2.4169 0.7014 0.77113 2.2625 1.8248 4.0013 1.9771 1.7388 0.15239 2.282-0.64379 3.0954-1.064 0.81343-0.42023 0.50544-0.99596 0.82682-2.0479 0.32139-1.052-0.67861-0.26114-2.2252-0.45579-1.5466-0.19464-2.059-0.83252-2.7471-1.3586-0.68809-0.52605-1.2902-1.8953-2.3167-2.975-0.20753-0.21828-0.43582-0.39526-0.66766-0.54105 0.44637-0.02011 0.86425-0.06243 1.1839-0.14263 1.3367-0.33539 2.3263-1.6463 3.2432-2.8122 0.91694-1.1659 1.2291-2.805 1.1152-4.9036-0.11394-2.0986 0.06614-3.4129 0.6258-4.4111 0.55966-0.99821 1.9466-1.9845 2.434-2.4856 0.4874-0.50118-0.16216-2.7965-1.525-2.1983-1.3628 0.59816-2.2172 1.2577-4.1501 3.0019-1.9329 1.7442-1.697 3.678-1.8118 4.6555-0.11475 0.97749 0.48506 2.8561-1.2501 4.2034-1.7351 1.3472-2.6707 0.3177-3.5832-0.66921s-0.71624-2.7264-0.71624-2.7264c1.7322-0.63297 2.8537-2.076 2.8536-3.6716-1.5e-5 -1.1369-0.57221-2.22-1.5735-2.9786 0.04878-0.34342 0.07329-0.68957 0.07338-1.0361 1.2e-5 -4.2802-3.6465-7.7499-8.1447-7.7499z" fill="#cde7f8"/>
+ <path d="m27.463 31.113c0.10843 2.0072 1.4842 3.2036 2.9901 3.9588 0.02085 0.13742-0.34457 2.0939-1.3445 3.8164-0.18418 0.41388-0.87356 1.1549-2.6855 1.0111-2.1625-0.17163-3.3905-2.7554-3.3905-2.7554s-0.51096-1.1628-1.3544-1.2263c-0.84348-0.06347-0.96325 0.94361-0.96325 0.94361s0.84366 4.3044 4.7769 5.6761c1.1707 0.40829 2.7731 0.64002 4.9686 0.10294 1.4589-0.35689 2.4778-1.6704 2.5176-1.5153 0 0-0.39255 1.9048-4.04 2.4379-1.6072 0.23488-2.3208-0.05807-2.8767-0.07974-0.97615 1.0359-1.8544 1.902-2.564 2.7245-1.0793 1.2511-1.6934 2.0459-2.3427 2.1615-0.64927 0.11561-3.6093-0.94673-4.2478-1.0811-0.63847-0.13434-0.3114 1.4571-0.3114 1.4571s0.7516 0.31849 2.2833 0.71736c1.5317 0.39887 2.0294 0.35416 2.6493 0.27466 0.53243-0.06829 1.7323-0.23885 3.0515-1.1704 0.92331-0.65194 3.6615-3.4164 3.8602-4.8147 0.89061-0.12684 1.4681-0.26323 2.018-0.3301-0.72619 0.84958-1.2278 5.7358-1.1655 7.0313 0.10088 2.099 0.17194 3.9611-1.1746 5.4131-1.1433 1.2328-1.8636 1.5117-2.0655 1.572-0.52537 0.0845-0.90908 0.50858-0.90899 1.0046 0.01078 0.44749 0.8264 0.53037 1.1244 0.53602 0 0 2.1315 0.09148 3.6604-0.91215 1.6737-1.0986 2.829-3.3513 3.2494-5.2414 0.4204-1.8901 0.18272-8.4143 2.7135-8.401 1.9578 0.01032 2.6608 6.7452 3.0446 7.9218 0.38379 1.1766 1.0058 3.8896 2.4748 4.8534 1.4485 0.95039 2.924 1.6184 3.9066 1.5821 0.98262-0.03629 1.4451 0.0986 1.445-0.52274-7e-6 -0.36954-0.23181-0.71551-0.62012-0.92552-0.05145-0.0382-0.34598-0.25401-1.1694-0.75344-0.90125-0.54662-2.4485-1.8997-2.5321-4.1858-0.06164-1.6837 0.11458-5.3871 0.05743-6.8071-0.05715-1.42 0.03417-2.0048-0.15563-2.861-0.18979-0.85626-1.5052-1.0956-1.6393-1.4892-0.10859-0.31884 0.40471-0.26233 0.6135-0.14178 3.0132 1.9435 5.7632 1.0343 6.4306 0.67316s1.5964-0.71236 2.5134-1.8782c0.91694-1.1659 1.7272-2.7075 1.6132-4.8061-0.11394-2.0986 0.11275-3.6508 0.75828-4.5958 0.6556-0.95968 2.2193-1.9506 2.7067-2.4517 0.4874-0.50118 0.37496-2.2527-0.98786-1.6546-1.3628 0.59816-2.2172 1.2577-4.1501 3.0019-1.9329 1.7442-1.697 3.678-1.8118 4.6555-0.11475 0.97749 0.48506 2.8561-1.2501 4.2034-1.7351 1.3472-3.3851 0.47519-4.1637-0.31079-0.77782-0.67288-1.3536-2.8358-1.3536-2.8358 2.2479-0.53373 4.7541-4.5353 1.7042-7.571 0.35888-3.7899-2.7156-7.7632-7.2138-7.7632-4.4982-1e-6 -7.7969 3.4128-7.3356 8.1071-0.97102 0.90875-1.4369 1.9453-1.3133 3.2442z" fill="#fefefe"/>
+ <g fill="#05a7eb">
+ <ellipse cx="32.002" cy="30.363" rx=".44608" ry=".83815"/>
+ <ellipse cx="40.609" cy="30.362" rx=".428" ry=".79574"/>
+ <path d="m31.985 28.01c-0.45481-0.0087-0.76903 0.16497-0.94797 0.3547s-0.23559 0.40761-0.23559 0.40761a0.25329 0.26547 0 0 0 0.18324 0.32334 0.25329 0.26547 0 0 0 0.30851-0.19009s0.01465-0.07304 0.10471-0.16853c0.09006-0.09549 0.24296-0.20239 0.57963-0.19597 0.3364 0.0064 0.4816 0.11898 0.56654 0.21752 0.08494 0.09854 0.09536 0.17049 0.09536 0.17049a0.25329 0.26547 0 0 0 0.29916 0.20772 0.25329 0.26547 0 0 0 0.19819-0.31355s-0.04621-0.22136-0.21689-0.41937-0.4798-0.3852-0.93488-0.39389z" color="#000000" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" shape-rendering="auto" solid-color="#000000" stop-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;font-variation-settings:normal;inline-size:0;isolation:auto;mix-blend-mode:normal;shape-margin:0;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+ <path d="m40.618 26.395c-0.45481-0.0087-0.76903 0.16497-0.94797 0.3547s-0.23559 0.40761-0.23559 0.40761a0.25329 0.26547 0 0 0 0.18324 0.32334 0.25329 0.26547 0 0 0 0.30851-0.19009s0.01465-0.07304 0.10471-0.16853c0.09006-0.09549 0.24296-0.20239 0.57963-0.19597 0.3364 0.0064 0.4816 0.11898 0.56654 0.21752 0.08494 0.09854 0.09536 0.17049 0.09536 0.17049a0.25329 0.26547 0 0 0 0.29916 0.20772 0.25329 0.26547 0 0 0 0.19819-0.31355s-0.04621-0.22136-0.21689-0.41937-0.4798-0.3852-0.93488-0.39389z" color="#000000" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" shape-rendering="auto" solid-color="#000000" stop-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;font-variation-settings:normal;inline-size:0;isolation:auto;mix-blend-mode:normal;shape-margin:0;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+ <ellipse transform="matrix(.72124 -.69268 .8781 .47847 0 0)" cx="-32.027" cy="56.393" rx="1.1306" ry=".77014"/>
+ <ellipse transform="matrix(.92091 -.38978 .58448 .81141 0 0)" cx="-11.852" cy="57.528" rx="1.1243" ry=".74805"/>
+ <ellipse transform="matrix(.97875 .20507 -.074049 .99725 0 0)" cx="22.546" cy="46.529" rx="1.1193" ry=".75073"/>
+ <ellipse transform="matrix(.097116 -.99527 .99187 -.12723 0 0)" cx="-57.41" cy="40.148" rx="1.1354" ry=".69786"/>
+ <ellipse transform="matrix(-.80948 -.58714 .43784 -.89905 0 0)" cx="-64.145" cy="-12.145" rx="1.0832" ry=".68138"/>
+ <ellipse transform="matrix(-.99443 -.10544 -.10859 -.99409 0 0)" cx="-44.986" cy="-46.612" rx="1.1357" ry=".78417"/>
+ <ellipse transform="matrix(-.80167 .59777 -.74752 -.66424 0 0)" cx="2.4445" cy="-74.384" rx=".93657" ry=".66803"/>
+ <ellipse transform="matrix(-.046119 .99894 -.99355 .11338 0 0)" cx="43.498" cy="-54.915" rx=".99775" ry=".62706"/>
+ <ellipse transform="matrix(-.40189 .91569 -.9924 -.12306 0 0)" cx="36.781" cy="-65.363" rx="1.0533" ry=".85796"/>
+ <ellipse transform="matrix(.61614 .78764 -.70808 .70613 0 0)" cx="44.88" cy="7.5031" rx="1.0451" ry=".8136"/>
+ <ellipse transform="matrix(.50005 -.86599 .97794 .20887 0 0)" cx="-51.788" cy="58.762" rx="1.1631" ry=".7855"/>
+ </g>
+ <g fill="none" stroke="#05a7eb" stroke-linecap="round" stroke-linejoin="bevel" stroke-width=".26458">
+ <path d="m42.696 47.621s0.09037-1.2769 0.06182-2.3845"/>
+ <path d="m29.066 48.629s-0.05091-1.5364 0.26637-2.7173"/>
+ <path d="m44.235 34.449c-1.2853 0.65114-2.0591 0.69564-3.0024 0.54304"/>
+ <path d="m27.801 34.453c0.59055 0.49319 1.7085 0.77054 2.6518 0.61794"/>
+ <path d="m25.214 43.425c2.2061 0.59323 6.357 0.24288 7.466-1.5559"/>
+ <path d="m44.428 43.116c1.2929 0.54053 3.7053 0.3924 4.4862 0.07204"/>
+ </g>
+ <path transform="scale(.26458)" d="m66.607 93.844c-3.9581-0.02916-9.1155 5.2526-12.557 12.859-4.1829 9.2465-4.433 18.744-0.55859 21.213 1.0906 0.69539 2.4408 0.7743 3.9434 0.23046 22.916-2.7796 37.433 5.0142 37.433 5.0142l6.2701 1.482s2.8639-1.0364 4.6749-4.6337c1.7916-3.5589 0.55753-7.6261 0.55753-7.6261s-5.4819-3.3939-13.766-7.5508c-7.4173-3.7221-19.747-15.961-22.365-18.598-0.42787-0.79282-0.96596-1.3992-1.5996-1.8027-0.6021-0.38426-1.2855-0.58185-2.0332-0.58789z" fill="#fcfdfe" stroke="#04afe6" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <ellipse transform="matrix(.83974 .54299 -.40726 .91331 0 0)" cx="27.223" cy="15.972" rx="1.8106" ry="4.0309" fill="#04aee6"/>
+ <path transform="scale(.26458)" d="m68.852 106.29a3.4758 7.251 22.642 0 0-5.2207 5.2676 3.4758 7.251 22.642 0 0 0.2207 8.2012 3.4758 7.251 22.642 0 0 0.77734 0.17969 6.7418 15.28 21.86 0 0 2.9336-5.2188 6.7418 15.28 21.86 0 0 2.4277-8.0176 3.4758 7.251 22.642 0 0-0.34961-0.23242 3.4758 7.251 22.642 0 0-0.78906-0.17969z" fill="#fff" fill-opacity=".55006"/>
+ <path transform="scale(.26458)" d="m93.077 113.9c-1e-6 0 0.17995 5.9905-2.1042 9.9634-1.1977 2.0832-3.3816 4.2923-4.2522 5.2334 0 0-0.45584 0.87601-1.1199 1.8435l-7.7609 11.344c-1.2546 1.8296-0.79249 4.3118 1.0371 5.5664s4.3137 0.79249 5.5684-1.0371l9.0395-12.793c1.1512 0.25212 2.8681 0.66637 2.8681 0.66637s3.5241-2.32 5.5319-6.4635c1.915-3.9521 1.8197-8.561 1.8197-8.561l-4.8138-2.8256z" fill="#05a3ed"/>
+ <g fill="#cde7f8">
+ <path transform="scale(.26458)" d="m63.938 154.93 0.35352 8.2656c0.036374 0.85103-0.61968 1.5652-1.4707 1.6016l-3.7031 0.1582c-0.85103 0.03638-1.5652-0.61967-1.6016-1.4707l-0.35156-8.2383a10.144 10.24 0 0 0-6.3145 9.4824 10.144 10.24 0 0 0 8.0059 10.01l0.50391 16.9a10.144 10.24 0 0 0-5.0723 8.8672 10.144 10.24 0 0 0 7.8613 9.9785l-0.19531-8.1523c-0.0205-0.85156 0.64844-1.5537 1.5-1.5742l3.7051-0.08984c0.85156-0.0205 1.5537 0.65039 1.5742 1.502l0.17969 7.5215a10.144 10.24 0 0 0 5.6621-9.1855 10.144 10.24 0 0 0-8.2832-10.066l-0.49609-16.689a10.144 10.24 0 0 0 5.3438-9.0215 10.144 10.24 0 0 0-7.2012-9.7988z" stroke="#04afe6" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" style="paint-order:stroke fill markers"/>
+ <path transform="scale(.26458)" d="m63.938 154.93 0.35352 8.2656c0.036374 0.85103-0.61968 1.5652-1.4707 1.6016l-3.7031 0.1582c-0.85103 0.03638-1.5652-0.61967-1.6016-1.4707l-0.35156-8.2383a10.144 10.24 0 0 0-6.3145 9.4824 10.144 10.24 0 0 0 8.0059 10.01l0.50391 16.9a10.144 10.24 0 0 0-5.0723 8.8672 10.144 10.24 0 0 0 7.8613 9.9785l-0.19531-8.1523c-0.0205-0.85156 0.64844-1.5537 1.5-1.5742l3.7051-0.08984c0.85156-0.0205 1.5537 0.65039 1.5742 1.502l0.17969 7.5215a10.144 10.24 0 0 0 5.6621-9.1855 10.144 10.24 0 0 0-8.2832-10.066l-0.49609-16.689a10.144 10.24 0 0 0 5.3438-9.0215 10.144 10.24 0 0 0-7.2012-9.7988z" style="paint-order:stroke fill markers"/>
+ </g>
+ <g>
+ <path d="m24.31 36.014a1.9191 1.4973 0 0 1-1.9191 1.4973 1.9191 1.4973 0 0 1-1.9191-1.4973 1.9191 1.4973 0 0 1 1.9191-1.4973 1.9191 1.4973 0 0 1 1.9191 1.4973z" fill="#cde7f8" style="paint-order:stroke fill markers"/>
+ <path d="m23.378 35.659a1.324 1.0843 0 0 1-1.323 1.0843 1.324 1.0843 0 0 1-1.3251-1.0825 1.324 1.0843 0 0 1 1.3208-1.0861 1.324 1.0843 0 0 1 1.3273 1.0807l-1.324 0.0035z" fill="#fefefe" style="paint-order:stroke fill markers"/>
+ <path d="m18.107 47.617a1.9191 1.4973 0 0 1-1.9191 1.4973 1.9191 1.4973 0 0 1-1.9191-1.4973 1.9191 1.4973 0 0 1 1.9191-1.4973 1.9191 1.4973 0 0 1 1.9191 1.4973z" fill="#cde7f8" style="paint-order:stroke fill markers"/>
+ <path d="m17.24 47.295a1.4041 1.0572 0 0 1-1.403 1.0572 1.4041 1.0572 0 0 1-1.4053-1.0555 1.4041 1.0572 0 0 1 1.4006-1.059 1.4041 1.0572 0 0 1 1.4076 1.0538l-1.4041 0.0034z" fill="#fefefe" style="paint-order:stroke fill markers"/>
+ <path transform="rotate(-4.8837)" d="m56.653 44.587 0.947-0.90064c0.13528-0.12866 0.33286 0.15034 0.33699 0.33699l0.19304 8.7247c0.0041 0.18665-0.15032 0.3339-0.33699 0.33699l-0.88448 0.01464c-0.18667 0.0031-0.33439-0.15032-0.33699-0.33699l-0.1068-7.6597c-0.0026-0.18667 0.05296-0.38737 0.18824-0.51603z" fill="#e5e5ec" style="paint-order:stroke fill markers"/>
+ </g>
+ <g>
+ <path d="m65.46 41.311-0.07279-1.3049c-0.01044-0.1864-0.34547-0.11853-0.47635 0.01462l-6.118 6.2232c-0.13086 0.13315-0.11926 0.34621 0.01462 0.47635l0.63426 0.61664c0.13385 0.13014 0.34656 0.1196 0.47635-0.01462l5.3255-5.5064c0.12978-0.1342 0.22682-0.31846 0.21642-0.50486z" fill="#dedede" style="paint-order:stroke fill markers"/>
+ <path transform="scale(.26458)" d="m235.26 178.56c-0.10056-0.00499-0.20368-6.6e-4 -0.30859 0.01562l-4.0254 0.625c-0.83929 0.13026-1.4543 0.91784-1.3809 1.7656l1.0644 12.311c0.02158 0.2492 0.10679 0.47071 0.22851 0.66211a8.1676 9.1168 0 0 0 8.1289 8.2266 8.1676 9.1168 0 0 0 8.166-9.1172 8.1676 9.1168 0 0 0-8.166-9.1172 8.1676 9.1168 0 0 0-1.9922 0.27734l-0.37695-4.3379c-0.06425-0.74181-0.63399-1.2756-1.3379-1.3105zm3.9102 8.9297a4.5123 5.6293 0 0 1 0.0332 0 4.5123 5.6293 0 0 1 4.5117 5.6289 4.5123 5.6293 0 0 1-4.5117 5.6289 4.5123 5.6293 0 0 1-4.5137-5.6289 4.5123 5.6293 0 0 1 4.4805-5.6289z" fill="#05a7eb" style="paint-order:stroke fill markers"/>
+ <path transform="scale(.26458)" d="m222.1 174.17c-0.38555 0.01465-0.76502 0.18278-1.0488 0.5l-2.5078 2.8027a8.1676 9.1168 51.609 0 0-11.713-0.16797 8.1676 9.1168 51.609 0 0-2.0723 12.064 8.1676 9.1168 51.609 0 0 12.217 0.73829 8.1676 9.1168 51.609 0 0 1.4512-1.4062c0.16943-0.08289 0.3274-0.19817 0.46289-0.34961l7.584-8.4766c0.56761-0.63443 0.53013-1.6195-0.08399-2.209l-3.2051-3.0781c-0.30706-0.29476-0.69843-0.43262-1.084-0.41796zm-8.9844 4.793a4.5123 5.6293 51.609 0 1 3.2715 1.4531 4.5123 5.6293 51.609 0 1 0.01953 0.02539 4.5123 5.6293 51.609 0 1-1.6094 7.0312 4.5123 5.6293 51.609 0 1-7.2129-0.04102 4.5123 5.6293 51.609 0 1 1.6074-7.0332 4.5123 5.6293 51.609 0 1 3.9238-1.4356z" fill="#05a7eb" style="paint-order:stroke fill markers"/>
+ <path d="m61.67 44.8a0.36193 0.38909 0 0 1-0.36193 0.38909 0.36193 0.38909 0 0 1-0.36193-0.38909 0.36193 0.38909 0 0 1 0.36193-0.38909 0.36193 0.38909 0 0 1 0.36193 0.38909z" fill="#a8a8a8" style="paint-order:stroke fill markers"/>
+ </g>
+ <path d="m56.881 48.495a1.5865 1.323 0 0 1-1.5865 1.323 1.5865 1.323 0 0 1-1.5865-1.323 1.5865 1.323 0 0 1 1.5865-1.323 1.5865 1.323 0 0 1 1.5865 1.323z" fill="#cde7f8" style="paint-order:stroke fill markers"/>
+ <g>
+ <path transform="rotate(72.564)" d="m41.039-44.44v2.2149c0 0.31879-0.25664 0.57543-0.57543 0.57543h-1.7258c-0.31879 0-0.57543-0.25664-0.57543-0.57543v-2.1754z" fill="#05a7eb" style="paint-order:stroke fill markers"/>
+ <path transform="rotate(72.564)" d="m36.214-44.333v2.1763c0 0.31879-0.25664 0.57543-0.57543 0.57543h-1.7258c-0.31879 0-0.57543-0.25664-0.57543-0.57543v-2.149z" fill="#05a7eb" style="paint-order:stroke fill markers"/>
+ <path transform="rotate(-17.849)" d="m43.149 33.577h2.1349c0.32407 0 0.58496 0.26089 0.58496 0.58496v11.035c0 0.32407-0.26089 0.58496-0.58496 0.58496h-2.1349c-0.32407 0-0.58496-0.26089-0.58496-0.58496v-11.035c0-0.32407 0.26089-0.58496 0.58496-0.58496z" fill="#cde7f8" stroke="#05a7eb" stroke-linecap="round" stroke-linejoin="round" stroke-width=".52917" style="paint-order:stroke fill markers"/>
+ <g fill="#05a7eb">
+ <path transform="matrix(.65811 -.75292 0 1 0 0)" d="m82.18 90.865 3.8351-0.02109 0.4358 1.251-3.8898-0.12535z" style="paint-order:stroke fill markers"/>
+ <path d="m53.527 27.31 2.5239-2.9086 0.28681 0.92283-2.5599 2.8033z" style="paint-order:stroke fill markers"/>
+ <path d="m52.93 25.495 2.5239-2.9086 0.28681 0.92283-2.5599 2.8033z" style="paint-order:stroke fill markers"/>
+ <path d="m52.295 23.339 2.5239-2.9086 0.28681 0.92283-2.5599 2.8033z" style="paint-order:stroke fill markers"/>
+ <path d="m51.57 21.294 2.5239-2.9086 0.28681 0.92283-2.5599 2.8033z" style="paint-order:stroke fill markers"/>
+ </g>
+ <path transform="rotate(72.564)" d="m38.737-47.529h1.7258c0.31879 0 0.57543 0.25664 0.57543 0.57543v4.1004l-2.8767 0.06131v-4.1617c0-0.31879 0.25664-0.57543 0.57543-0.57543z" fill="#fefefe" stroke="#05a7eb" stroke-linecap="round" stroke-linejoin="round" stroke-width=".52917" style="paint-order:stroke fill markers"/>
+ <path transform="rotate(72.564)" d="m33.913-47.46h1.7258c0.31879 0 0.57543 0.25664 0.57543 0.57543v4.0481l-2.8767 0.04595v-4.094c0-0.31879 0.25664-0.57543 0.57543-0.57543z" fill="#fefefe" stroke="#05a7eb" stroke-linecap="round" stroke-linejoin="round" stroke-width=".52917" style="paint-order:stroke fill markers"/>
+ </g>
+ <g>
+ <path d="m58.887 27.243a1.5865 1.323 0 0 1-1.5865 1.323 1.5865 1.323 0 0 1-1.5865-1.323 1.5865 1.323 0 0 1 1.5865-1.323 1.5865 1.323 0 0 1 1.5865 1.323z" fill="#cde7f8" style="paint-order:stroke fill markers"/>
+ <path d="m58.243 27.035a1.2343 0.96157 0 0 1-1.2343 0.96157 1.2343 0.96157 0 0 1-1.2343-0.96157 1.2343 0.96157 0 0 1 1.2343-0.96157 1.2343 0.96157 0 0 1 1.2343 0.96157z" fill="#fefefe" style="paint-order:stroke fill markers"/>
+ <path d="m56.264 48.179a1.1964 0.93291 0 0 1-1.1964 0.93291 1.1964 0.93291 0 0 1-1.1964-0.93291 1.1964 0.93291 0 0 1 1.1964-0.93291 1.1964 0.93291 0 0 1 1.1964 0.93291z" fill="#fefefe" style="paint-order:stroke fill markers"/>
+ </g>
+</svg>
diff --git a/comm/mail/themes/shared/mail/illustrations/sloth.svg b/comm/mail/themes/shared/mail/illustrations/sloth.svg
new file mode 100644
index 0000000000..c5567d4025
--- /dev/null
+++ b/comm/mail/themes/shared/mail/illustrations/sloth.svg
@@ -0,0 +1,88 @@
+<!-- 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/. -->
+<svg version="1.1" width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <linearGradient id="a" x1="-300.02" x2="547.14" y1="-272.74" y2="574.42" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#ccfbff" offset="0"/>
+ <stop stop-color="#c9e4ff" offset="1"/>
+ </linearGradient>
+ <linearGradient id="b" x1="-18.672" x2="279.8" y1="23.78" y2="322.26" gradientUnits="userSpaceOnUse">
+ <stop stop-color="#00c8d7" offset="0"/>
+ <stop stop-color="#0a84ff" offset="1"/>
+ </linearGradient>
+ </defs>
+ <path d="m265.34 100.32h-23.336c-2.043-3.774-7.272-12.2-13.831-13.453-8.612-1.642-10.329 6.943-10.329 6.943s-5.724-14.88-20.206-12.906c-16.237 2.211-8.589 19.3-8.589 19.3h-24.443l5.931 0.115h-5.939a1 1 0 0 0 0 2h100.74a1 1 0 0 0 0-2z" fill="#fff" fill-opacity=".70321"/>
+ <path d="M111.942 71.45h-13.19c-1.1-2.054-4.033-6.851-7.731-7.556-4.789-.913-5.744 3.861-5.744 3.861s-3.183-8.276-11.236-7.179c-9.03 1.229-4.776 10.735-4.776 10.735H55.671l7.159.139h-6.91a1 1 0 0 0 0 2h56.022a1 1 0 0 0 0-2z" fill="#fff" fill-opacity=".56654"/>
+ <g fill="#eaeaee">
+ <g fill-opacity=".40078">
+ <path d="m235.97 169.58h-69.687a1 1 0 0 1 0-2h69.687a1 1 0 0 1 0 2z"/>
+ <path d="M226.512 163.154h-30.853a.5.5 0 0 1 0-1h30.854a.5.5 0 0 1 0 1z"/>
+ <path d="M251.077 175.007h-1a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1zm-5 0h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm-11 0h-12a.5.5 0 0 1 0-1h12a.5.5 0 0 1 0 1zm-21 0h-1a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1zm-5 0h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm-11 0h-12a.5.5 0 0 1 0-1h12a.5.5 0 0 1 0 1zm-21 0h-1a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1zm-5 0h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm-11 0h-12a.5.5 0 0 1 0-1h12a.5.5 0 0 1 0 1z"/>
+ </g>
+ <path d="m240.91 210.47h-148.28a1 1 0 0 1 0-2h148.28a1 1 0 1 1 0 2z" fill-opacity=".35787"/>
+ </g>
+ <ellipse cx="81.399" cy="227.48" rx="15.603" ry="4.632" fill="#dedede" fill-opacity=".58413"/>
+ <g fill="#eaeaee" fill-opacity=".4">
+ <path d="M68.86 210.47H41.206a1 1 0 0 1 0-2H68.86a1 1 0 0 1 0 2z"/>
+ <path d="m95.206 125.27h-49.919a1 1 0 0 1 0-2h49.919a1 1 0 0 1 0 2z"/>
+ <path d="M86.084 119.993h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm-11 0h-12a.5.5 0 0 1 0-1h12a.5.5 0 0 1 0 1z"/>
+ </g>
+ <path d="m165.03 96.856h24.444s-7.649-17.093 8.589-19.3c14.482-1.972 20.205 12.91 20.205 12.91s1.717-8.585 10.329-6.943c8.492 1.619 14.761 14.022 14.761 14.022h21.285" fill="none" stroke="#eaeaee" stroke-dasharray="12 8 3 4 1 9" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".43393"/>
+ <path d="M56.089 69.222h13.593s-4.253-9.505 4.776-10.735c8.053-1.1 11.236 7.179 11.236 7.179s.955-4.774 5.744-3.861c4.722.9 8.209 7.24 8.209 7.24h11.837" fill="none" stroke="#eaeaee" stroke-dasharray="12 8 3 4 1 9" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".69501"/>
+ <ellipse cx="149.14" cy="242.9" rx="45.72" ry="9.272" fill="#fefeff" fill-opacity=".48001"/>
+ <path d="M209.9 164.086c3.013-9.515 1.374-19.8-4.615-28.958a45.642 45.642 0 0 0-13.924-13.5 6.243 6.243 0 0 0-4.588-4.872 6.223 6.223 0 0 0-4.553-3.595 6.212 6.212 0 0 0-5.383-3.988 6.522 6.522 0 0 0-.436-.016 6.252 6.252 0 0 0-3.955 1.389 6.211 6.211 0 0 0-.867-.061 6.242 6.242 0 0 0-5.513 3.311q-.946-.037-1.882-.037a45.681 45.681 0 0 0-12.117 1.6c-.062-8.393 1.088-19.17 5.862-29.058a12.031 12.031 0 0 0-10.82-17.255 12.046 12.046 0 0 0-10.836 6.8c-9.762 20.224-9.2 41.788-6.872 56.692a31.125 31.125 0 0 0-3.714 14.724 15.666 15.666 0 0 0-.636 1.638l-.814.521c-1.485.29-2.917.638-4.281 1.039a14.748 14.748 0 0 1-2.456-5.59l-.239-4.606a5.728 5.728 0 0 0-3.769-5.1q-.092-.035-.188-.067a5.749 5.749 0 0 0-1.627-6.85 12.379 12.379 0 0 0-2.9-1.732 15.685 15.685 0 0 0-6.68-1.57 12.767 12.767 0 0 0-4.5.8c-5.209 1.954-8.633 6.666-10.178 14.005-1.818 8.637 2.748 27.443 18.278 40.566 5.772 7.177 17.305 12.187 30.22 13.106 1.437.1 2.885.154 4.307.154a53.486 53.486 0 0 0 13.294-1.619 43.673 43.673 0 0 1-.329 11.819 11.877 11.877 0 0 0 .371 5.606 15.988 15.988 0 0 1-3.391 5.385 6.39 6.39 0 0 0-.307 9.009 6.459 6.459 0 0 0 .909.8 6.359 6.359 0 0 0 6.21 4.88 6.416 6.416 0 0 0 2.374-.452 6.376 6.376 0 0 0 7.382-1.615c3.211-3.7 4.993-8.546 5.964-12.321a12.025 12.025 0 0 0 4.18-7.179 68.453 68.453 0 0 0 .4-19.879 43.989 43.989 0 0 0 11.457-2.63c.49.046.981.068 1.469.068q.652 0 1.3-.054a6.244 6.244 0 0 0 8.974-1.6 6.251 6.251 0 0 0 5.171-8.579l-.383-.937a15.7 15.7 0 0 0 .415-1.681 31.279 31.279 0 0 0 4.216-8.511z" fill="#fff" fill-opacity=".80233"/>
+ <g fill="url(#a)">
+ <path d="m201.45 136.98a45.33 45.33 0 0 0-52.633-16.478c-8.95 3.593-15.307 10.133-17.9 18.415-5.317 16.983 7.121 36.049 27.725 42.5a46.43 46.43 0 0 0 13.856 2.148c15.476 0 29.041-8.1 33.157-21.25 2.591-8.282 1.098-17.28-4.205-25.335z"/>
+ <path d="m161.54 205.62a2.514 2.514 0 0 0-0.771-0.121 2.524 2.524 0 0 0-2.41 1.758 47.907 47.907 0 0 1-2.917 7.05 9.367 9.367 0 0 1-2.409 3.035 2.53 2.53 0 0 0 2.66 4.3 13.056 13.056 0 0 0 4.165-4.868 52.016 52.016 0 0 0 3.318-7.97 2.535 2.535 0 0 0-1.636-3.184z"/>
+ <path d="m164.2 209.06a2.528 2.528 0 0 0-3.182 1.638 48.521 48.521 0 0 1-2.917 7.05 9.375 9.375 0 0 1-2.412 3.035 2.53 2.53 0 0 0 2.662 4.3 13.063 13.063 0 0 0 4.165-4.866 52.056 52.056 0 0 0 3.319-7.971 2.535 2.535 0 0 0-1.635-3.186z"/>
+ <path d="M169.179 209.558a2.513 2.513 0 0 0-1.611-1.075 2.542 2.542 0 0 0-.489-.048 2.537 2.537 0 0 0-2.484 2.037 47.923 47.923 0 0 1-2.094 7.336 9.379 9.379 0 0 1-2.048 3.291 2.529 2.529 0 0 0 3.133 3.971 13.016 13.016 0 0 0 3.584-5.312 51.568 51.568 0 0 0 2.389-8.3 2.513 2.513 0 0 0-.38-1.9z"/>
+ <path d="m190.9 181.29a10.39 10.39 0 0 1-6.11-1.989l-6.7-4.847a10.947 10.947 0 0 1-2.518-15.06 10.448 10.448 0 0 1 14.756-2.57l6.7 4.847a10.947 10.947 0 0 1 2.518 15.06 10.507 10.507 0 0 1-8.646 4.559z"/>
+ <path d="M185.675 122.091a1 1 0 0 0-1.058-.317l-3.187.962.318-3.422a1 1 0 0 0-1.683-.819l-1.856 1.754-1.17-5.146a1 1 0 0 0-1.909-.137l-1.625 4.225-1.34-2.95a1 1 0 0 0-1.9.29c-.216 1.727-.876 7.053-.985 8.508l-.848 1.462a1 1 0 0 0 .58 1.46l11.626 3.462a1 1 0 0 0 1.174-.5l3.984-7.732a1 1 0 0 0-.121-1.1z"/>
+ <path d="M135.176 158.7l-2.414-6.577a1.5 1.5 0 0 0-2.216-.745l-4.127 2.642a1.5 1.5 0 0 0 .3 2.673l2.768 1-1.276 1.617a1.5 1.5 0 0 0 1.178 2.429 1.455 1.455 0 0 0 .341-.039l4.381-1.025a1.5 1.5 0 0 0 1.068-1.978z"/>
+ <path d="M200.937 176.924l-1.854-4.537a1.491 1.491 0 0 0-.96-.868 1.511 1.511 0 0 0-1.282.2l-5.761 3.989a1.5 1.5 0 0 0-.267 2.231l2.995 3.361a1.5 1.5 0 0 0 1.12.5 1.5 1.5 0 0 0 1.5-1.583l-.113-2.056 2.84.771a1.5 1.5 0 0 0 1.785-2.014z"/>
+ <path d="M159.611 159.487c-5.6-3.72-13.21-6.09-21.425-6.675a54.688 54.688 0 0 0-3.871-.138c-15.618 0-27.884 6.871-28.532 15.982-.351 4.933 2.636 9.762 8.411 13.6 5.6 3.72 13.21 6.09 21.425 6.675 1.291.092 2.594.138 3.873.138 15.617 0 27.883-6.871 28.532-15.982.349-4.936-2.638-9.765-8.413-13.6z"/>
+ <path d="M124.666 177.47a4.742 4.742 0 0 0-2.313-2.828c-18.9-10.14-22.139-28.077-21.316-31.987.505-2.4 1.184-2.936 1.32-3.021a.589.589 0 0 0 .175-.055 1.012 1.012 0 0 0 .424-.317c.641-.579 2-2.067 5.575-5.963a1.009 1.009 0 0 0-.136-1.488 12.481 12.481 0 0 0-6.611-2.174 8.2 8.2 0 0 0-2.887.51c-3.59 1.346-6.013 4.893-7.2 10.542-1.374 6.526 2.394 29.625 26.144 42.367a4.774 4.774 0 0 0 6.827-5.585z"/>
+ <path d="M155.655 145.652a7.9 7.9 0 0 0-6.32-3.121 7.941 7.941 0 0 0-4.518 1.4 7.444 7.444 0 0 0-3.174 4.94 7.292 7.292 0 0 0 1.363 5.588c.189.255 18.886 25.834 14.472 50.251a7.288 7.288 0 0 0 1.232 5.528 7.762 7.762 0 0 0 5.12 3.188 8.12 8.12 0 0 0 1.335.111 7.706 7.706 0 0 0 7.671-6.235c5.564-30.792-16.25-60.402-17.181-61.65z"/>
+ <path d="M122.878 156.521q-.132 0-.265.007c-.21.014-.4.021-.589.021-7.346 0-9.405-10.133-9.584-11.093l-.261-4.963a1.009 1.009 0 0 0-1.74-.642l-6.672 7.018a1.009 1.009 0 0 0-.264.863c1.427 8.49 7.125 18.4 18.49 18.4.4 0 .809-.013 1.22-.039a4.8 4.8 0 0 0 3.327-1.629 4.744 4.744 0 0 0 1.183-3.461 4.837 4.837 0 0 0-4.845-4.482z"/>
+ <path d="M154.67 78.331a7.593 7.593 0 0 0-4.039-4.394 7.972 7.972 0 0 0-10.422 3.537c-15.809 31.64-3.755 67.22-3.234 68.719a7.8 7.8 0 0 0 7.418 5.159 8.1 8.1 0 0 0 2.466-.387 7.688 7.688 0 0 0 4.584-3.892 7.291 7.291 0 0 0 .372-5.691c-.106-.308-10.519-31.3 2.489-57.333a7.288 7.288 0 0 0 .366-5.718z"/>
+ </g>
+ <g fill="#f9f9fa">
+ <path d="M144.51 178c-8.129-4.344-13.41-12.143-13.455-19.869a1 1 0 0 0-1.107-.988c-10.364 1.124-17.6 6.019-17.6 11.905 0 6.8 9.618 12.135 21.9 12.135a37.451 37.451 0 0 0 10.069-1.34 1 1 0 0 0 .2-1.844z"/>
+ <path d="M178.859 150.443l.9-1.739a1 1 0 0 0-1.178-1.415l-4.394 1.327.438-4.705a1 1 0 0 0-1.683-.82l-2.677 2.529-1.578-6.942a1 1 0 0 0-.9-.776 1.011 1.011 0 0 0-1 .639l-2.274 5.915-1.949-4.292a1 1 0 0 0-1.9.29 964.54 964.54 0 0 0-.505 4.108c-11.4-4.874-19.225-9.7-21.771-1.659-.125.395-.235.8-.337 1.215a9.531 9.531 0 0 1 1.743-.172l7.761-.024h.03a9.492 9.492 0 0 1 5.762 17.04c-4.371-1.722-7.326-2.554-8.124-.037a6.264 6.264 0 0 0-.276 2l-2.441.008a24.511 24.511 0 0 1-1.91-2.542.5.5 0 0 0-.851.525 28.4 28.4 0 0 0 5.095 5.823q.628.63 1.318 1.241c.624.607 1.3 1.221 2.028 1.827 2.317 2.521 6.1 4.97 11.886 6.8 6.258 1.982 10.941 2.077 14.3 1.2a27.867 27.867 0 0 0 7.433-1.248 13.317 13.317 0 0 0 2.518-.96c.122-.06.209-.1.264-.124a.5.5 0 0 0-.316-.948 3.916 3.916 0 0 0-.386.173 12.409 12.409 0 0 1-2.354.9l-2.384-1.689a6.64 6.64 0 0 0 1.011-1.926c.769-2.428-1.889-3.463-6.173-4.527a10 10 0 0 1 15.415-10.781l6.333 4.487a10.027 10.027 0 0 1 1.221 1.035c.079-.224.168-.448.239-.671 2.515-7.943-6.418-8.584-18.334-11.085z"/>
+ </g>
+ <g fill="url(#b)">
+ <path d="M147.105 74.29a6.777 6.777 0 0 1 6.093 9.723c-6.372 13.2-7 27.638-6.034 38.767a35.29 35.29 0 0 1 2.353-1.046 39.658 39.658 0 0 1 14.664-2.727 44.406 44.406 0 0 1 6.055.419c.142-1.165.272-2.213.347-2.817a1 1 0 0 1 1.9-.29l1.34 2.95 1.625-4.225a1 1 0 0 1 .94-.641h.065a1 1 0 0 1 .9.776l1.17 5.146 1.856-1.754a1 1 0 0 1 1.683.819l-.295 3.169c.113.047.223.1.335.144l2.828-.854a.991.991 0 0 1 .288-.043 1 1 0 0 1 .89 1.458l-.553 1.073A40.9 40.9 0 0 1 200.89 138c5.11 7.816 6.531 16.517 4 24.5a26.118 26.118 0 0 1-4.221 8.054 10.53 10.53 0 0 1-1.05 3.772l1.17 2.864a1 1 0 0 1-.926 1.379.966.966 0 0 1-.261-.036l-2.713-.736c-.244.2-.495.394-.755.571l.108 1.959a1 1 0 0 1-1.745.72l-1.178-1.322a10.589 10.589 0 0 1-5.228.258 39.5 39.5 0 0 1-15.265 2.981q-.832 0-1.668-.033a65.709 65.709 0 0 1 .545 24.057 6.753 6.753 0 0 1-3.656 4.88c-.621 3.04-2.1 8.412-5.255 12.047a1.128 1.128 0 1 1-1.7-1.479c2.39-2.752 3.742-6.752 4.482-9.855a6.238 6.238 0 0 1-.544.024 6.756 6.756 0 0 1-.834-.053c-.958 3.015-2.981 8.111-6.453 11.36a1.116 1.116 0 0 1-.766.291 1.135 1.135 0 0 1-.83-.346 1.128 1.128 0 0 1 .055-1.592c3.065-2.867 4.928-7.565 5.827-10.372a6.769 6.769 0 0 1-1.105-.681 25.01 25.01 0 0 1-5.63 9.032 1.128 1.128 0 0 1-1.542-1.647c2.683-2.509 4.445-6.409 5.471-9.322a6.73 6.73 0 0 1-.864-4.6 52.712 52.712 0 0 0-.623-19.714 43.539 43.539 0 0 1-17.515 3.365c-1.3 0-2.611-.047-3.934-.14-11.783-.838-22.043-5.258-26.8-11.541-14.73-12.177-18.3-29.328-16.935-35.812 1.151-5.468 3.467-8.889 6.883-10.17a7.522 7.522 0 0 1 2.655-.471 11.751 11.751 0 0 1 6.272 2.129.5.5 0 0 1 .067.737c-4.039 4.409-5.322 5.786-5.815 6.224a.486.486 0 0 1-.047.058 10.287 10.287 0 0 0-1.689 3.318c-.794 2.193.414 11.566 7.831 21.016a14.5 14.5 0 0 1 2.117-2.5c-3.636-3.525-5.712-9.427-6.395-13.521a.5.5 0 0 1 .129-.424l6.588-7.006a.5.5 0 0 1 .364-.159.485.485 0 0 1 .172.032.5.5 0 0 1 .327.443l.26 5c.054.286 1.512 8.332 6.76 10.759a40.21 40.21 0 0 1 7.643-1.982.993.993 0 0 1 .382-.47l2.582-1.653a10.523 10.523 0 0 1 1.317-3.71 25.958 25.958 0 0 1 3.924-14.945c-2.288-13.3-3.642-35.193 6.117-55.411a6.8 6.8 0 0 1 6.107-3.833m0-2a8.8 8.8 0 0 0-7.909 4.964c-9.6 19.9-8.838 41.235-6.411 55.882a27.923 27.923 0 0 0-3.845 14.857 12.418 12.418 0 0 0-1.1 2.974l-1.862 1.192a2.936 2.936 0 0 0-.409.315 42.5 42.5 0 0 0-6.374 1.636c-3.467-2.2-4.749-7.91-4.933-8.818l-.252-4.861a2.491 2.491 0 0 0-1.638-2.218 2.44 2.44 0 0 0-.859-.153 2.509 2.509 0 0 0-1.821.789l-6.588 7.005a2.475 2.475 0 0 0-.273.348 8.137 8.137 0 0 1-.072-2.866 9.7 9.7 0 0 1 1.295-2.661l.011-.012c.6-.561 1.842-1.893 5.839-6.256a2.5 2.5 0 0 0-.347-3.691 13.627 13.627 0 0 0-7.468-2.525 9.532 9.532 0 0 0-3.357.6c-4.1 1.537-6.837 5.451-8.138 11.631-1.445 6.865 2.2 24.905 17.441 37.62 5.151 6.627 15.889 11.271 28.107 12.14a55.8 55.8 0 0 0 4.076.145 47.332 47.332 0 0 0 16-2.6 49.245 49.245 0 0 1 .167 16.607 8.721 8.721 0 0 0 .655 5.085 21.128 21.128 0 0 1-4.657 7.723 3.112 3.112 0 0 0 1.519 5.338 3.166 3.166 0 0 0-.058.511 3.137 3.137 0 0 0 5.264 2.385q.167-.157.331-.318a3.13 3.13 0 0 0 4.854.185c3.18-3.667 4.781-8.834 5.522-12.08a8.779 8.779 0 0 0 3.859-5.826 66.713 66.713 0 0 0-.114-22.372 41.259 41.259 0 0 0 14.755-2.906 12.588 12.588 0 0 0 4.315-.094l.373.419a3 3 0 0 0 5.236-2.142l.839.228a2.93 2.93 0 0 0 .785.106 3 3 0 0 0 2.778-4.134l-.849-2.077a12.43 12.43 0 0 0 .805-3.043 28.07 28.07 0 0 0 4.2-8.213c2.712-8.567 1.208-17.871-4.237-26.2a42.593 42.593 0 0 0-14.413-13.424 3 3 0 0 0-3.8-3.544l-.337.1.043-.463a3 3 0 0 0-4.324-2.965l-.426-1.875a2.984 2.984 0 0 0-2.709-2.327 3.298 3.298 0 0 0-.208-.007 2.986 2.986 0 0 0-2.809 1.921l-.052.135a3 3 0 0 0-4.934 1.9l-.106.851a45.995 45.995 0 0 0-4.312-.2 41.52 41.52 0 0 0-15.224 2.8c-.551-9.739.237-22.9 6.043-34.923a8.781 8.781 0 0 0-7.894-12.592z"/>
+ <path d="M201.082 171.875h-.028a.5.5 0 0 1-.472-.526 13.519 13.519 0 0 0-1.958-7 .5.5 0 1 1 .841-.541 14.3 14.3 0 0 1 2.116 7.6.5.5 0 0 1-.499.467z"/>
+ <path d="M130.643 148.528a.5.5 0 0 1-.406-.791c1.734-2.425 5.456-3.655 5.613-3.706a.5.5 0 0 1 .309.951c-.036.012-3.568 1.182-5.109 3.337a.5.5 0 0 1-.407.209z"/>
+ <path d="M184.377 126.738a.5.5 0 0 1-.372-.834c.572-.639 2.077-2.676 1.5-3.632-.484-.8-2.621.081-3.58.636a.5.5 0 0 1-.742-.528c.257-1.324.354-3.466-.258-3.857a.264.264 0 0 0-.235-.03c-.555.153-1.336 1.295-1.714 2.058a.5.5 0 0 1-.942-.151c-.392-2.705-1.323-5.791-2.031-5.892-.021 0-.076-.012-.177.065-.738.565-1.315 3.218-1.5 4.757a.5.5 0 0 1-.431.435.515.515 0 0 1-.529-.309c-.7-1.729-1.931-3.588-2.5-3.544-.009 0-.046.028-.093.107-.611 1.019-.2 4.857.018 5.394a.512.512 0 0 1-.252.655.486.486 0 0 1-.647-.219c-.278-.557-.808-4.824-.012-6.282a1.129 1.129 0 0 1 .879-.649c1.124-.127 2.166 1.38 2.848 2.674.28-1.367.793-3.18 1.62-3.812a1.223 1.223 0 0 1 .927-.262c1.425.2 2.259 3.345 2.654 5.4a3.488 3.488 0 0 1 1.625-1.392 1.247 1.247 0 0 1 1.042.152c1.032.661.993 2.647.849 3.909 1.2-.539 3.233-1.185 4.047.167 1.06 1.757-1.336 4.508-1.613 4.815a.5.5 0 0 1-.381.169z"/>
+ <path d="M130.109 161.852a3.206 3.206 0 0 1-1.385-.28 1.435 1.435 0 0 1-.863-1.084 3.969 3.969 0 0 1 1.2-2.733c-1.424-.448-3.732-1.375-3.751-2.663-.022-1.481 3.985-3.6 5.71-4.441a.5.5 0 1 1 .438.9c-2.727 1.332-5.133 2.98-5.148 3.528.008.539 2.012 1.47 3.8 1.94a.5.5 0 0 1 .221.842c-.674.656-1.578 1.856-1.477 2.468.016.1.066.228.308.343 1.108.53 3.093-.221 3.765-.554a.5.5 0 0 1 .447.895 8.44 8.44 0 0 1-3.265.839z"/>
+ <path d="M195.266 182.317c-1.464 0-3.507-2.879-4.366-4.2a.5.5 0 1 1 .838-.545c1.5 2.3 3.13 3.9 3.528 3.745.514-.2.617-1.951.387-3.4a.5.5 0 0 1 .667-.547c1.947.723 3.724.963 3.957.693.2-.487-.784-3.2-2.154-5.923a.5.5 0 0 1 .894-.449c.845 1.678 2.744 5.7 2.142 6.842-.57 1.077-2.9.534-4.423.04.1 1.208.075 3.222-1.111 3.679a1 1 0 0 1-.359.065z"/>
+ <path d="M153.084 218.985a.5.5 0 0 1-.342-.865c4.939-4.621 6.88-13.587 6.9-13.677a.5.5 0 1 1 .979.207c-.081.38-2.027 9.366-7.194 14.2a.5.5 0 0 1-.343.135z"/>
+ <path d="M155.771 221.9a.5.5 0 0 1-.342-.865c4.935-4.616 6.88-13.588 6.9-13.678a.5.5 0 0 1 .979.207c-.081.38-2.027 9.367-7.194 14.2a.5.5 0 0 1-.343.136z"/>
+ <path d="M160.647 222.024a.5.5 0 0 1-.377-.828c4.433-5.107 5.434-14.227 5.443-14.317a.487.487 0 0 1 .549-.445.5.5 0 0 1 .445.549c-.04.387-1.044 9.526-5.683 14.87a.5.5 0 0 1-.377.171z"/>
+ <path d="M110.254 161.469a.5.5 0 0 1-.369-.837 23.915 23.915 0 0 1 9.942-5.786.5.5 0 1 1 .3.953 23.391 23.391 0 0 0-9.507 5.508.5.5 0 0 1-.366.162z"/>
+ <path d="M107.264 169.781a.5.5 0 0 1-.472-.335c-.049-.139-1.155-3.438 1.8-7.218a.5.5 0 0 1 .787.617c-2.624 3.353-1.657 6.241-1.647 6.271a.5.5 0 0 1-.307.637.489.489 0 0 1-.161.028z"/>
+ <path d="M155.876 186.7a.5.5 0 0 1-.2-.96 22.264 22.264 0 0 0 3.824-2.14.5.5 0 1 1 .588.809 22.934 22.934 0 0 1-4.018 2.251.5.5 0 0 1-.194.04z"/>
+ <path d="M143.722 96.658a.494.494 0 0 1-.223-.053.5.5 0 0 1-.224-.671c2.965-5.928 1.7-14.842 1.683-14.931a.5.5 0 0 1 .989-.146c.056.378 1.329 9.313-1.778 15.524a.5.5 0 0 1-.447.277z"/>
+ <path d="M147.293 99.246a.494.494 0 0 1-.223-.053.5.5 0 0 1-.224-.671c2.965-5.928 1.7-14.841 1.684-14.93a.5.5 0 0 1 .989-.146c.056.378 1.329 9.312-1.778 15.523a.5.5 0 0 1-.448.277z"/>
+ <path d="M151.985 97.6a.487.487 0 0 1-.176-.032.5.5 0 0 1-.292-.644c2.334-6.2.148-14.938.126-15.025a.5.5 0 1 1 .969-.248c.095.369 2.287 9.124-.159 15.625a.5.5 0 0 1-.468.324z"/>
+ <path d="M188.641 167.773a1 1 0 0 1-.962-.729 3.532 3.532 0 0 0-2.26-2.218 3.574 3.574 0 0 0-3.12.508 1 1 0 1 1-1.271-1.543 5.5 5.5 0 0 1 8.578 2.717 1 1 0 0 1-.965 1.265z"/>
+ <path d="M149.323 155.323a1 1 0 0 1-.962-.729 3.532 3.532 0 0 0-2.26-2.218 3.575 3.575 0 0 0-3.12.508 1 1 0 1 1-1.271-1.543 5.5 5.5 0 0 1 8.578 2.717 1 1 0 0 1-.965 1.265z"/>
+ <path d="M169.2 174.119c-12.839 0-21.089-9.653-21.187-9.771a1 1 0 0 1 1.534-1.284c.108.13 11.038 12.862 27.056 7.905a1 1 0 1 1 .592 1.91 26.9 26.9 0 0 1-7.995 1.24z"/>
+ <path d="M148.308 88.455a5.777 5.777 0 0 1-1.881-.312c-4.221-1.443-5.695-7.407-5.756-7.66a1 1 0 0 1 1.945-.468c.013.052 1.282 5.153 4.462 6.237 1.662.566 3.658-.077 5.939-1.908a1 1 0 0 1 1.252 1.561 9.8 9.8 0 0 1-5.961 2.55z"/>
+ <path d="M143.018 98.25a.987.987 0 0 1-.416-.092 1 1 0 0 1-.493-1.325 29.886 29.886 0 0 0 2.285-9.877 1.016 1.016 0 0 1 1.044-.956 1 1 0 0 1 .955 1.043 31.384 31.384 0 0 1-2.465 10.624 1 1 0 0 1-.91.583z"/>
+ <path d="M146.893 100.375a1 1 0 0 1-.893-1.457c.031-.062 1.778-3.614 2.015-11.323a.987.987 0 0 1 1.03-.97 1 1 0 0 1 .969 1.03c-.254 8.258-2.155 12.022-2.236 12.179a1 1 0 0 1-.885.541z"/>
+ <path d="M151.643 99.5a1 1 0 0 1-.889-1.455 22.246 22.246 0 0 0 1.522-11.677 1 1 0 0 1 1.986-.236 23.772 23.772 0 0 1-1.729 12.824 1 1 0 0 1-.89.544z"/>
+ <path d="M175.977 184c-16.543 0-27.147-5.563-33.13-10.23-6.5-5.074-9.045-10.086-9.15-10.3a.5.5 0 0 1 .9-.446c.1.2 10.341 19.974 41.386 19.974a.5.5 0 0 1 0 1z"/>
+ <path d="M136.393 131.5a.5.5 0 0 1-.424-.764c.178-.285 4.463-7.025 14.763-10.543a.5.5 0 0 1 .323.947c-9.966 3.4-14.2 10.057-14.237 10.123a.5.5 0 0 1-.425.237z"/>
+ <path d="M146.4 151.423a1.358 1.358 0 0 1 .884 1.7l-.918 2.9a1.358 1.358 0 0 1-1.7.884 1.358 1.358 0 0 1-.884-1.7l.918-2.9a1.351 1.351 0 0 1 1.7-.884z"/>
+ <path d="M185.721 163.873a1.358 1.358 0 0 1 .884 1.7l-.918 2.9a1.358 1.358 0 0 1-1.7.884 1.358 1.358 0 0 1-.884-1.7l.918-2.9a1.355 1.355 0 0 1 1.7-.884z"/>
+ <path d="M171.819 164.988c-2.257-2.156-9.975-5.389-15.3-3.991a2.079 2.079 0 0 0-1.469 2.1c-.055 2.165 2 5.019 6.72 6.512a18.025 18.025 0 0 0 5.313.982 6.476 6.476 0 0 0 3.311-.779 4.566 4.566 0 0 0 2.166-3.1 1.965 1.965 0 0 0-.741-1.724z"/>
+ <path d="M121.965 96.833a1 1 0 0 1-1-1v-12.55a1 1 0 0 1 .421-.815L167.6 49.634a1 1 0 0 1 1.158 1.631L122.965 83.8v12.033a1 1 0 0 1-1 1z"/>
+ <path d="M116.318 124.646a1 1 0 0 1-.562-.174l-9.2-6.273a1 1 0 0 1-.437-.826v-15.058a1 1 0 1 1 2 0v14.529l8.765 5.976a1 1 0 0 1-.564 1.826z"/>
+ <path d="m80.489 227.78a2.5 2.5 0 0 1-2.5-2.5v-74.444a2.5 2.5 0 0 1 5 0v74.444a2.5 2.5 0 0 1-2.5 2.5z"/>
+ <path d="M80.492 161.79a2.5 2.5 0 0 0 3.477 3.594l10.508-10.168a42.319 42.319 0 0 1-1.528-5.479zm29.467-25.034a2.5 2.5 0 0 0-3.535-.059l-5.171 5c-.121.289-.245.6-.374.954-.332.917-.3 3.1.371 6.007l8.65-8.37a2.5 2.5 0 0 0 .059-3.532z"/>
+ <path d="M141.381 80.325c-18.7 13.4-25.152 18.462-25.416 18.99-.478.955-.552 2.013-.412 13.112.062 4.906.154 12.212-.093 13.978-1.161 1.589-7.3 8.162-12.858 13.906a2.5 2.5 0 1 0 3.593 3.477c4.786-4.944 12.946-13.5 13.824-15.258.605-1.211.69-3.779.534-16.166-.051-4.016-.112-8.893-.007-10.7 1.871-1.531 15.38-11.247 23.162-16.83.027-.094.058-.2.089-.3-.3-.4-.621-.848-.964-1.366a17.248 17.248 0 0 1-1.452-2.843zm24.034-13.956a2.5 2.5 0 0 0-3.483-.6c-4.667 3.287-8.85 6.24-12.611 8.9a6.883 6.883 0 0 1 .722.3 6.719 6.719 0 0 1 3.129 3.111c4.122-2.923 8.12-5.747 11.639-8.226a2.5 2.5 0 0 0 .605-3.485z"/>
+ </g>
+</svg>
diff --git a/comm/mail/themes/shared/mail/illustrations/sync-devices.svg b/comm/mail/themes/shared/mail/illustrations/sync-devices.svg
new file mode 100644
index 0000000000..9d4f3fb97d
--- /dev/null
+++ b/comm/mail/themes/shared/mail/illustrations/sync-devices.svg
@@ -0,0 +1,49 @@
+<!-- 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/. -->
+<svg height="2in" viewBox="0 0 315.96 144" width="4.39in" xmlns="http://www.w3.org/2000/svg">
+ <radialGradient id="a" cx="101.36" cy="70.18" gradientUnits="userSpaceOnUse" r="58.29">
+ <stop offset=".27" stop-color="#cdcdd4" stop-opacity="0"/>
+ <stop offset=".46" stop-color="#cdcdd4" stop-opacity=".02"/>
+ <stop offset=".66" stop-color="#cdcdd4" stop-opacity=".08"/>
+ <stop offset=".86" stop-color="#cdcdd4" stop-opacity=".18"/>
+ <stop offset=".9" stop-color="#cdcdd4" stop-opacity=".2"/>
+ </radialGradient>
+ <radialGradient id="b" cx="225.08" cy="70.18" r="58.29" href="#a"/>
+ <linearGradient id="c" gradientUnits="userSpaceOnUse" x1="28.25" x2="93.99" y1="99.19" y2="33.44">
+ <stop offset="0" stop-color="#c689ff"/>
+ <stop offset="1" stop-color="#d74cf0"/>
+ </linearGradient>
+ <linearGradient id="d" gradientUnits="userSpaceOnUse" x1="-5.18" x2="106.41" y1="139.25" y2="27.66">
+ <stop offset=".16" stop-color="#b833e1"/>
+ <stop offset=".96" stop-color="#ff4f5e"/>
+ </linearGradient>
+ <linearGradient id="e" gradientUnits="userSpaceOnUse" x1="96.11" x2="225.52" y1="139" y2="9.59">
+ <stop offset=".28" stop-color="#7542e5"/>
+ <stop offset=".42" stop-color="#824deb"/>
+ <stop offset=".79" stop-color="#a067fa"/>
+ <stop offset="1" stop-color="#ab71ff"/>
+ </linearGradient>
+ <linearGradient id="f" gradientUnits="userSpaceOnUse" x1="221.49" x2="303.29" y1="111.6" y2="29.8">
+ <stop offset=".43" stop-color="#00b3f4"/>
+ <stop offset=".61" stop-color="#00bbf6"/>
+ <stop offset=".89" stop-color="#00d2fc"/>
+ <stop offset="1" stop-color="#0df"/>
+ </linearGradient>
+ <path d="m101.41 128.46a58.3 58.3 0 0 1 -29.09-7.76 3.75 3.75 0 0 1 3.68-6.49 50.75 50.75 0 0 0 25.36 6.79 3.76 3.76 0 0 1 3.77 3.74 3.72 3.72 0 0 1 -3.72 3.72zm14.11-1.85a3.75 3.75 0 0 1 -1-7.36 50.81 50.81 0 0 0 22.75-13.17 3.74 3.74 0 0 1 5.29 5.29 58.22 58.22 0 0 1 -26.1 15.11 3.6 3.6 0 0 1 -.94.13zm-52.67-14.07a3.73 3.73 0 0 1 -2.65-1.09 58.32 58.32 0 0 1 -15.13-26.09 3.74 3.74 0 0 1 7.23-1.94 50.83 50.83 0 0 0 13.19 22.73 3.74 3.74 0 0 1 -2.64 6.39zm85.76-11.36a3.74 3.74 0 0 1 -3.24-5.62 50.78 50.78 0 0 0 6.79-25.38v-.18a3.74 3.74 0 1 1 7.48 0v.14a58.31 58.31 0 0 1 -7.79 29.2 3.73 3.73 0 0 1 -3.24 1.84zm-101.79-27.18a3.7 3.7 0 0 1 -3.75-3.69v-.1a58.33 58.33 0 0 1 7.74-29 3.75 3.75 0 0 1 6.49 3.74 50.77 50.77 0 0 0 -6.74 25.3 3.78 3.78 0 0 1 -3.74 3.75zm107.18-14.39a3.74 3.74 0 0 1 -3.61-2.77 50.73 50.73 0 0 0 -13.24-22.7 3.75 3.75 0 0 1 5.28-5.32 58.23 58.23 0 0 1 15.18 26.06 3.77 3.77 0 0 1 -3.61 4.73zm-91.3-24.16a3.75 3.75 0 0 1 -2.7-6.39 58.26 58.26 0 0 1 26.11-15.15 3.74 3.74 0 1 1 2 7.22 50.92 50.92 0 0 0 -22.76 13.21 3.71 3.71 0 0 1 -2.65 1.11zm65.78-8.86a3.72 3.72 0 0 1 -1.87-.5 50.77 50.77 0 0 0 -25.25-6.71h-.16a3.75 3.75 0 1 1 0-7.49h.08a58.37 58.37 0 0 1 29.06 7.71 3.74 3.74 0 0 1 -1.86 7z" fill="url(#a)"/>
+ <path d="m225.13 128.46a58.24 58.24 0 0 1 -29.13-7.76 3.75 3.75 0 0 1 3.74-6.49 50.71 50.71 0 0 0 25.34 6.79 3.76 3.76 0 0 1 3.77 3.74 3.72 3.72 0 0 1 -3.72 3.72zm14.11-1.85a3.74 3.74 0 0 1 -1-7.36 50.78 50.78 0 0 0 22.76-13.17 3.74 3.74 0 0 1 5.3 5.29 58.33 58.33 0 0 1 -26.1 15.11 3.72 3.72 0 0 1 -.96.13zm-52.67-14.07a3.71 3.71 0 0 1 -2.64-1.09 58.14 58.14 0 0 1 -15.13-26.09 3.74 3.74 0 1 1 7.2-1.94 50.83 50.83 0 0 0 13.19 22.73 3.74 3.74 0 0 1 -2.64 6.39zm85.76-11.36a3.74 3.74 0 0 1 -3.24-5.62 50.78 50.78 0 0 0 6.79-25.38v-.18a3.75 3.75 0 1 1 7.49 0v.14a58.32 58.32 0 0 1 -7.8 29.2 3.73 3.73 0 0 1 -3.24 1.84zm-101.79-27.18a3.69 3.69 0 0 1 -3.74-3.69v-.1a58.32 58.32 0 0 1 7.73-29 3.75 3.75 0 0 1 6.47 3.67 50.77 50.77 0 0 0 -6.74 25.3 3.78 3.78 0 0 1 -3.72 3.82zm107.18-14.39a3.74 3.74 0 0 1 -3.61-2.77 50.81 50.81 0 0 0 -13.23-22.7 3.74 3.74 0 0 1 5.27-5.32 58.34 58.34 0 0 1 15.19 26.06 3.74 3.74 0 0 1 -2.64 4.59 3.63 3.63 0 0 1 -.98.14zm-91.3-24.16a3.74 3.74 0 0 1 -2.65-6.39 58.2 58.2 0 0 1 26.07-15.15 3.74 3.74 0 1 1 1.95 7.22 51 51 0 0 0 -22.72 13.21 3.71 3.71 0 0 1 -2.65 1.11zm65.78-8.86a3.71 3.71 0 0 1 -1.86-.5 50.8 50.8 0 0 0 -25.26-6.71h-.16a3.75 3.75 0 0 1 0-7.49h.08a58.37 58.37 0 0 1 29.07 7.71 3.74 3.74 0 0 1 -1.87 7z" fill="url(#b)"/>
+ <path d="m44.62 94.89h33v9.57h-33z" fill="#ff848b"/>
+ <path d="m21.52 40.17h79.19v52.3h-79.19z" fill="url(#c)"/>
+ <path d="m109.28 97.75h-2.15v-59.43a4.28 4.28 0 0 0 -4.28-4.32h-83.46a4.28 4.28 0 0 0 -4.28 4.28v59.47h-2.11a2.12 2.12 0 0 0 -2.13 2.12v4.31a2.13 2.13 0 0 0 2.13 2.13h96.32a2.13 2.13 0 0 0 2.13-2.13v-4.31a2.12 2.12 0 0 0 -2.17-2.12zm-39.6 4.25h-17.13v-4.25h17.13z" fill="url(#d)"/>
+ <path d="m82 62a.83.83 0 0 0 -.83.83v1a5.77 5.77 0 0 0 -9.76 2.62.83.83 0 0 0 .6 1h.2a.84.84 0 0 0 .81-.63 4.11 4.11 0 0 1 4-3.14 4.06 4.06 0 0 1 3.28 1.62h-1.63a.83.83 0 0 0 -.08 1.7h3.41a.84.84 0 0 0 .83-.83v-3.37a.83.83 0 0 0 -.83-.8zm0 6.17a.83.83 0 0 0 -1 .6 4.11 4.11 0 0 1 -7.3 1.49h1.63a.83.83 0 0 0 0-1.66h-3.33a.83.83 0 0 0 -.83.83v3.32a.83.83 0 1 0 1.66.08v-1a5.75 5.75 0 0 0 9.75-2.62.83.83 0 0 0 -.58-1.07zm-36.25-6.72a6.33 6.33 0 1 0 6.33 6.33 6.33 6.33 0 0 0 -6.33-6.33zm0 11.07a4.75 4.75 0 1 1 4.74-4.74 4.75 4.75 0 0 1 -4.74 4.74zm2.77-4.74h-2.77v-2.78a.4.4 0 0 0 -.75 0v3.17a.4.4 0 0 0 .39.39h3.17a.4.4 0 0 0 0-.79zm9.62 6.1a.85.85 0 0 1 -.85-.85.49.49 0 0 1 0-.12l.47-3.37-2.26-2.42a.85.85 0 0 1 .5-1.42l3.15-.56 1.49-3a.85.85 0 0 1 1.14-.38.87.87 0 0 1 .38.38l1.49 3 3.15.56a.85.85 0 0 1 .69 1 .78.78 0 0 1 -.22.43l-2.27 2.42.48 3.36a.85.85 0 0 1 -.73 1 .83.83 0 0 1 -.51-.09l-2.86-1.52-2.85 1.49a.89.89 0 0 1 -.39.09zm-.64-6.88 1.9 2-.4 2.79 2.37-1.23 2.37 1.23-.38-2.79 1.9-2-2.67-.48-1.21-2.43-1.21 2.43z" fill="#f9f9fa"/>
+ <rect fill="url(#e)" height="69.38" rx="7.65" width="46" x="141.93" y="35.49"/>
+ <path d="m160.58 93.56h8.57v4.28h-8.57z" fill="#ab71ff"/>
+ <path d="m169.91 74a.83.83 0 0 0 -.83.83v1a5.75 5.75 0 0 0 -9.75 2.62.83.83 0 0 0 .6 1 .65.65 0 0 0 .2 0 .83.83 0 0 0 .8-.62 4.11 4.11 0 0 1 7.3-1.48h-1.63a.83.83 0 1 0 -.08 1.66h3.39a.83.83 0 0 0 .83-.83v-3.37a.83.83 0 0 0 -.83-.83zm0 6.17a.84.84 0 0 0 -1 .6 4.13 4.13 0 0 1 -4 3.14 4.06 4.06 0 0 1 -3.28-1.66h1.63a.83.83 0 0 0 0-1.65h-3.26a.83.83 0 0 0 -.83.82v3.31a.83.83 0 1 0 1.66.08v-1a5.76 5.76 0 0 0 9.76-2.62.83.83 0 0 0 -.59-1.04zm-5-36.65a6.33 6.33 0 1 0 6.32 6.32 6.32 6.32 0 0 0 -6.29-6.34zm0 11.07a4.75 4.75 0 1 1 4.74-4.75 4.75 4.75 0 0 1 -4.71 4.73zm2.76-4.75h-2.76v-2.79a.4.4 0 0 0 -.4-.39.39.39 0 0 0 -.39.39v3.17a.38.38 0 0 0 .39.39h3.16a.39.39 0 0 0 .4-.39.4.4 0 0 0 -.37-.4zm-6 21.08a.85.85 0 0 1 -.85-.85s0-.07 0-.11l.47-3.37-2.26-2.43a.85.85 0 0 1 0-1.2 1 1 0 0 1 .44-.22l3.15-.56 1.49-3a.85.85 0 0 1 1.14-.38 1 1 0 0 1 .38.38l1.49 3 3.15.56a.86.86 0 0 1 .69 1 .89.89 0 0 1 -.22.43l-2.26 2.43.47 3.37a.85.85 0 0 1 -.72 1 .88.88 0 0 1 -.51-.09l-2.85-1.49-2.85 1.49a.93.93 0 0 1 -.33.02zm-.61-6.92 1.89 2-.38 2.75 2.37-1.23 2.37 1.24-.39-2.76 1.89-2-2.66-.47-1.21-2.44-1.21 2.44z" fill="#f9f9fa"/>
+ <rect fill="url(#f)" height="65.56" rx="5.76" width="80.89" x="222.47" y="37.4"/>
+ <path d="m292.6 64.85h5.33v10.66h-5.33z" fill="#0df"/>
+ <g fill="#f9f9fa">
+ <path d="m282.65 64.37a.83.83 0 0 0 -.83.83v1a5.75 5.75 0 0 0 -9.75 2.62.83.83 0 0 0 .6 1 .64.64 0 0 0 .2 0 .82.82 0 0 0 .8-.63 4.13 4.13 0 0 1 4-3.14 4.08 4.08 0 0 1 3.33 1.65h-1.63a.82.82 0 0 0 -.87.79.84.84 0 0 0 .79.87h3.39a.83.83 0 0 0 .83-.83v-3.33a.83.83 0 0 0 -.83-.83zm0 6.17a.84.84 0 0 0 -1 .6 4.11 4.11 0 0 1 -7.29 1.49h1.64a.83.83 0 0 0 0-1.63h-3.3a.83.83 0 0 0 -.82.83v3.32a.83.83 0 0 0 1.65.08v-1a5.76 5.76 0 0 0 9.76-2.61.83.83 0 0 0 -.6-1.08z"/>
+ <path d="m246.41 63.85a6.33 6.33 0 1 0 6.33 6.33 6.32 6.32 0 0 0 -6.33-6.33zm0 11.07a4.75 4.75 0 1 1 4.75-4.74 4.74 4.74 0 0 1 -4.75 4.74zm2.77-4.74h-2.77v-2.77a.38.38 0 0 0 -.41-.41.39.39 0 0 0 -.4.39v3.16a.4.4 0 0 0 .4.4h3.16a.4.4 0 1 0 0-.79z"/>
+ <path d="m258.8 76.28a.85.85 0 0 1 -.85-.85s0-.08 0-.12l.47-3.37-2.26-2.43a.85.85 0 0 1 0-1.2.9.9 0 0 1 .44-.21l3.15-.56 1.49-3a.85.85 0 0 1 1.14-.38.87.87 0 0 1 .38.38l1.48 3 3.16.56a.85.85 0 0 1 .69 1 .89.89 0 0 1 -.22.43l-2.26 2.43.47 3.37a.85.85 0 0 1 -.72 1 .88.88 0 0 1 -.51-.09l-2.85-1.48-2.86 1.48a.76.76 0 0 1 -.34.04zm-.63-6.88 1.89 2-.38 2.76 2.37-1.16 2.37 1.24-.42-2.81 1.89-2-2.66-.48-1.21-2.43-1.22 2.43z"/>
+ </g>
+</svg>
diff --git a/comm/mail/themes/shared/mail/imAccounts.css b/comm/mail/themes/shared/mail/imAccounts.css
new file mode 100644
index 0000000000..03b12954be
--- /dev/null
+++ b/comm/mail/themes/shared/mail/imAccounts.css
@@ -0,0 +1,203 @@
+/* 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/. */
+
+/* large parts copied from the addon manager */
+
+#accountManager {
+ padding: 0;
+ margin: 0;
+}
+
+#accountsNotificationBox {
+ margin: 0;
+ appearance: none;
+}
+
+#noAccountScreen {
+ color: FieldText;
+ background-color: Field;
+ overflow: auto;
+ border-block: 1px solid var(--splitter-color);
+}
+
+:root[lwt-tree] #noAccountScreen {
+ color: var(--sidebar-text-color);
+ background-color: var(--sidebar-background-color);
+}
+
+#noAccountBox {
+ max-width: 30em;
+ background: url("chrome://global/skin/icons/info.svg") left 5px no-repeat;
+ background-size: 2.5em;
+ -moz-context-properties: fill;
+ fill: currentColor;
+ margin-inline: 1.5em;
+ padding-inline: 3.5em;
+}
+
+#noAccountInnerBox {
+ opacity: 0.9;
+}
+
+#noAccountTitle {
+ font-size: 2em;
+ font-weight: lighter;
+ line-height: 1.2;
+ margin: 0 0 .3em;
+ padding-bottom: .2em;
+ border-bottom: 1px solid var(--splitter-color);
+}
+
+#noAccountDesc {
+ font-size: 110%;
+ margin-inline: 0;
+}
+
+#accountlist {
+ margin: 0;
+ appearance: none;
+ border-block: 1px solid var(--splitter-color);
+ border-inline-style: none;
+ text-shadow: none;
+}
+
+#bottombuttons {
+ padding: 4px;
+}
+
+/* List Items */
+richlistitem:not([selected="true"]) .account-buttons {
+ display: none;
+}
+
+richlistitem:not([state="connected"]) .connected,
+richlistitem:not([state="connecting"]) .connecting,
+richlistitem:not([state="disconnected"]) .disconnected,
+richlistitem:not([state="disconnecting"]) .disconnecting,
+richlistitem:not([error="true"]) .error,
+richlistitem:not([state="disconnected"]) .error,
+richlistitem[error="true"] .disconnected,
+richlistitem[selected="true"]:not([state="disconnected"]) .connectButton,
+richlistitem[selected="true"][state="disconnected"] .disconnectButton,
+richlistitem[selected="true"][state="disconnecting"] .disconnectButton,
+richlistitem:not([selected="true"]) .addException,
+richlistitem:not([selected="true"]) .autoSignOn,
+richlistitem:not([reconnectPending="true"]) description[anonid="reconnect"]
+{
+ display: none;
+}
+
+richlistitem[state="disconnected"] .accountIcon {
+ opacity: 0.3;
+}
+richlistitem[state="connecting"] .accountIcon,
+richlistitem[state="disconnected"][selected="true"] .accountIcon {
+ opacity: 0.7;
+}
+richlistitem[state="disconnected"]:not([selected="true"]) {
+ color: #999;
+}
+
+richlistitem[error="true"] .accountName {
+ color: rgb(150, 0, 0);
+}
+
+/* When the error message was too long, the buttons were too small */
+richlistitem .account-buttons button {
+ min-height: 1.8em;
+ color: var(--lwt-text-color) !important;
+}
+
+richlistitem .account-buttons {
+ margin-top: 2px;
+}
+
+richlistitem[dragover="down"] {
+ border-bottom: 3px solid var(--selected-item-color);
+}
+
+richlistitem[dragover="up"] {
+ border-top: 3px solid var(--selected-item-color);
+}
+
+:root:not([lwt-tree]) #bottombuttons button,
+:root:not([lwt-tree]) richlistbox > richlistitem button {
+ border: 1px solid var(--toolbarbutton-hover-bordercolor);
+}
+
+:root:not([lwt-tree]) #bottombuttons button:hover,
+:root:not([lwt-tree]) richlistbox > richlistitem button:hover {
+ border: 1px solid var(--toolbarbutton-active-bordercolor);
+}
+
+:root:not([lwt-tree]) #bottombuttons button:hover:active,
+:root:not([lwt-tree]) richlistbox > richlistitem button:hover:active {
+ box-shadow: var(--toolbarbutton-active-boxshadow);
+}
+
+.error {
+ color: #c80000;
+ margin-inline-start: 6px;
+}
+
+.accountName {
+ font-weight: bold;
+}
+
+.accountIcon {
+ width: 32px;
+ height: 32px;
+}
+
+#displayNameAndstatusMessageGrid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 4px;
+ flex: 1 1 auto;
+}
+
+#displayNameAndstatusMessageGrid > * {
+ margin: 0;
+}
+
+#displayNameAndstatusMessageGrid > hr {
+ height: 0;
+ border-block-start: 1px solid hsla(0, 0%, 50%, 0.5);
+ border-block-end: none;
+ border-inline: none;
+}
+
+#displayName[usingDefault]:not([editing]) {
+ color: #999;
+}
+
+/* Add styling same as #statusMessageLabel in chat.css */
+#displayName,
+#statusMessageLabel:not([statusType="offline"]) {
+ cursor: text;
+}
+
+#userIcon {
+ border-color: hsla(0, 0%, 50%, 0.3);
+}
+
+#userIcon:hover {
+ border-color: hsla(0, 0%, 50%, 0.5);
+ background-color: hsla(0, 0%, 50%, 0.3);
+ opacity: .4;
+}
+
+#statusImageStack > #statusTypeIcon {
+ /* Need min-width since #statusTypeIcon overlaps with rule in chat.css. */
+ min-width: 16px;
+ padding-inline: 0;
+ appearance: none;
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+#statusTypeIcon dropmarker {
+ display: none;
+}
diff --git a/comm/mail/themes/shared/mail/imMenulist.css b/comm/mail/themes/shared/mail/imMenulist.css
new file mode 100644
index 0000000000..5506c64bf1
--- /dev/null
+++ b/comm/mail/themes/shared/mail/imMenulist.css
@@ -0,0 +1,13 @@
+/* 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/. */
+
+
+/* Fix the icons in the menulist by undoing things from menu.css */
+menulist > menupopup > .menuitem-iconic > .menu-iconic-left {
+ display: flex !important;
+}
+
+menulist > menupopup > .menuitem-iconic > .menu-iconic-text {
+ margin-left: 2px !important;
+}
diff --git a/comm/mail/themes/shared/mail/imRichlistbox.css b/comm/mail/themes/shared/mail/imRichlistbox.css
new file mode 100644
index 0000000000..9d41490b2c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/imRichlistbox.css
@@ -0,0 +1,15 @@
+/* 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/. */
+
+/* Mostly copied from the download manager */
+
+/* List Items */
+richlistitem {
+ padding-top: 6px;
+ padding-bottom: 6px;
+ padding-inline-start: 4px;
+ padding-inline-end: 4px;
+ min-height: 25px;
+ border-bottom: 1px solid var(--splitter-color);
+}
diff --git a/comm/mail/themes/shared/mail/images/account-watermark-light.png b/comm/mail/themes/shared/mail/images/account-watermark-light.png
new file mode 100644
index 0000000000..2d72178a55
--- /dev/null
+++ b/comm/mail/themes/shared/mail/images/account-watermark-light.png
Binary files differ
diff --git a/comm/mail/themes/shared/mail/images/account-watermark.png b/comm/mail/themes/shared/mail/images/account-watermark.png
new file mode 100644
index 0000000000..28192849d1
--- /dev/null
+++ b/comm/mail/themes/shared/mail/images/account-watermark.png
Binary files differ
diff --git a/comm/mail/themes/shared/mail/images/pendingpaint.png b/comm/mail/themes/shared/mail/images/pendingpaint.png
new file mode 100644
index 0000000000..1a97feeeb3
--- /dev/null
+++ b/comm/mail/themes/shared/mail/images/pendingpaint.png
Binary files differ
diff --git a/comm/mail/themes/shared/mail/inContentDialog.css b/comm/mail/themes/shared/mail/inContentDialog.css
new file mode 100644
index 0000000000..de2dd459aa
--- /dev/null
+++ b/comm/mail/themes/shared/mail/inContentDialog.css
@@ -0,0 +1,335 @@
+/* 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/colors.css");
+
+dialog {
+ --dialog-text-color: var(--arrowpanel-color);
+ --dialog-background-color: var(--arrowpanel-background);
+ --dialog-box-text-color: #181920;
+ --dialog-box-background-color: #fff;
+ --dialog-box-border-color: rgba(0, 0, 0, 0.3);
+ --dialog-box-border-hover-color: rgba(128, 128, 128, 0.8);
+ --dialog-button-text-color-hover: currentColor;
+ --dialog-button-background-color: color-mix(in srgb, currentColor 13%, transparent);
+ --dialog-button-background-color-hover: color-mix(in srgb, currentColor 17%, transparent);
+ --dialog-button-background-color-active: color-mix(in srgb, currentColor 30%, transparent);
+ --dialog-highlight-color: var(--in-content-primary-button-background, var(--selected-item-color));
+ --dialog-highlight-text-color: var(--in-content-primary-button-text-color, var(--selected-item-text-color));
+ --dialog-primary-background-hover: color-mix(in srgb, var(--dialog-highlight-color) 85%, black);
+ --dialog-primary-background-active: color-mix(in srgb, var(--dialog-highlight-color) 78%, black);
+}
+
+@media (prefers-color-scheme: dark) {
+ dialog {
+ --dialog-text-color: rgb(251, 251, 254);
+ --dialog-background-color: #2a2a2e;
+ --dialog-box-text-color: #f9f9fa;
+ --dialog-box-background-color: #353537;
+ --dialog-box-border-color: hsla(0, 0%, 70%, 0.4);
+ --dialog-box-border-hover-color: hsla(0, 0%, 70%, 0.5);
+ --dialog-highlight-color: #45a1ff;
+ --dialog-highlight-text-color: rgb(43, 42, 51);
+ }
+}
+
+@media (prefers-contrast) {
+ dialog {
+ --dialog-box-text-color: color-mix(in srgb, currentColor 41%, transparent);
+ --dialog-box-background-color: color-mix(in srgb, currentColor 41%, transparent);
+ --dialog-box-border-color: -moz-DialogText;
+ --dialog-box-border-hover-color: SelectedItemText;
+ --dialog-button-text-color-hover: SelectedItemText;
+ --dialog-button-background-color-hover: SelectedItem;
+ --dialog-button-background-color-active: SelectedItem;
+ border-color: WindowText !important;
+ }
+}
+
+/* Global overrides */
+
+dialog *[hidden] {
+ display: none !important;
+}
+
+.reset-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+/* General UI */
+
+dialog {
+ border: 1px solid transparent;
+ border-radius: var(--arrowpanel-border-radius);
+ background-color: var(--dialog-background-color);
+ color: var(--dialog-text-color);
+ padding: 15px;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
+}
+
+dialog::backdrop {
+ background: rgba(0, 0, 0, 0.5);
+}
+
+dialog :focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: 1px;
+}
+
+.dialog-title {
+ display: flex;
+ align-items: center;
+ margin-block: 0 15px;
+ margin-inline: 15px;
+ font-size: 1.4em;
+ font-weight: 500;
+}
+
+.dialog-container {
+ display: flex;
+ align-items: center;
+ margin-bottom: 12px;
+}
+
+.dialog-container.vertical {
+ flex-direction: column;
+ align-items: stretch;
+}
+
+.dialog-header-image {
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, var(--dialog-highlight-color) 20%, transparent);
+ stroke: var(--dialog-highlight-color);
+ margin-inline-end: 12px;
+ height: 32px;
+}
+
+.dialog-header-image.small {
+ height: 16px;
+}
+
+.dialog-description {
+ margin-block: 0.2em;
+ line-height: 1.4em;
+}
+
+/* Warning dialog */
+
+dialog.dialog-critical {
+ box-shadow: 0 2px 20px -8px var(--red-70);
+}
+
+.warning-title {
+ display: flex;
+ align-items: center;
+ margin-top: 0;
+ background-color: var(--red-60);
+ color: var(--color-white);
+ border-radius: var(--button-border-radius);
+ padding: 6px;
+}
+
+.warning-icon {
+ fill: color-mix(in srgb, var(--color-white) 20%, transparent);
+ stroke: var(--color-white);
+}
+
+.insecure-section h3 {
+ margin-top: 0;
+}
+
+.insecure-section-description {
+ font-size: 1.05rem;
+ line-height: 1.5em;
+}
+
+.dialog-footnote {
+ margin-inline: 6px;
+ font-size: 1.05rem;
+ line-height: 1.4em;
+}
+
+/* Typography */
+
+dialog h1 {
+ margin-block-start: 0;
+ font-size: 1.17em;
+}
+
+dialog p {
+ margin-block-end: 6px;
+ font-size: 1.1em;
+ line-height: 1.4em;
+}
+
+dialog .tip-caption {
+ opacity: 0.8;
+ font-size: 1em;
+}
+
+/* Lists */
+
+dialog .radio-list {
+ margin-block: 12px;
+}
+
+dialog .radio-list li {
+ margin-block-end: 12px;
+}
+
+/* Radio button */
+
+dialog input[type="radio"] {
+ appearance: none;
+ width: 16px;
+ height: 16px;
+ padding: 0;
+ border: 1px solid var(--dialog-box-border-color);
+ border-radius: 100%;
+ margin-block: 2px;
+ margin-inline: 0 6px;
+ background-color: var(--dialog-box-background-color);
+ background-position: center;
+}
+
+dialog input[type="radio"]:enabled:hover {
+ background-color: var(--dialog-button-background-color-hover);
+}
+
+dialog input[type="radio"]:enabled:hover:active {
+ background-color: var(--dialog-button-background-color-active);
+}
+
+dialog input[type="radio"]:checked {
+ -moz-context-properties: fill;
+ fill: currentColor;
+ color: var(--dialog-highlight-text-color);
+ background-color: var(--dialog-highlight-color);
+ background-image: url("chrome://global/skin/icons/radio.svg");
+ border-color: var(--dialog-primary-background-active);
+ color-adjust: exact;
+}
+
+dialog input[type="radio"]:enabled:checked:hover {
+ background-color: var(--dialog-primary-background-hover);
+ border-color: var(--dialog-primary-background-active);
+}
+
+/* Buttons area */
+
+.vertical-buttons-container {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 3px;
+ margin-block-end: 9px;
+ padding: 0;
+}
+
+.dialog-menu-container {
+ list-style-type: none;
+ display: flex;
+ align-items: center;
+ margin-block-end: 0;
+ margin-inline: 0;
+ padding: 2px 10px;
+ justify-content: end;
+ background-color: var(--dialog-background-color);
+ position: sticky;
+ bottom: 0;
+}
+
+.dialog-menu-container.two-columns {
+ justify-content: space-between;
+}
+
+.dialog-menu-container.menu-in-body {
+ margin-inline: -10px;
+}
+
+/* Buttons */
+
+dialog .button-link {
+ appearance: none;
+ background-color: transparent !important;
+ color: LinkText;
+ border-style: none;
+ padding: 0 3px;
+ margin: 0;
+ font-weight: 600;
+ cursor: pointer;
+ min-height: auto;
+}
+
+dialog .button-link:hover {
+ text-decoration: underline;
+}
+
+dialog button:not([disabled]):hover {
+ background-color: var(--dialog-button-background-color-hover);
+ color: var(--dialog-button-text-color-hover);
+}
+
+dialog button:not([disabled]):hover:active {
+ background-color: var(--dialog-button-background-color-active);
+}
+
+dialog button.primary {
+ background-color: var(--dialog-highlight-color);
+ color: var(--dialog-highlight-text-color) !important;
+}
+
+dialog button.primary:not([disabled]):hover {
+ background-color: var(--dialog-primary-background-hover);
+}
+
+dialog button.primary:not([disabled]):hover:active {
+ background-color: var(--dialog-primary-background-active);
+}
+
+dialog button[disabled] {
+ opacity: 0.4;
+}
+
+/* Loading states */
+
+@keyframes loading-animation {
+ 0% { transform: translateX(0); }
+ 100% { transform: translateX(-100%); }
+}
+
+@keyframes loading-animation-rtl {
+ 0% { transform: translateX(0); }
+ 100% { transform: translateX(100%); }
+}
+
+span.loading-inline {
+ -moz-context-properties: fill;
+ fill: currentColor;
+ display: inline-block;
+ position: relative;
+ overflow: hidden;
+ height: 16px;
+ width: 16px;
+ color: var(--selected-item-color);
+ vertical-align: sub;
+}
+
+span.loading-inline::after {
+ position: absolute;
+ content: '';
+ background-image: url("chrome://messenger/skin/icons/loading.svg");
+ background-position: right center;
+ background-repeat: no-repeat;
+ width: 480px;
+ height: 100%;
+ animation: loading-animation 1.05s steps(30) infinite;
+}
+
+span.loading-inline:dir(rtl)::after {
+ background-position-x: left;
+ animation: loading-animation-rtl 1.05s steps(30) infinite;
+}
diff --git a/comm/mail/themes/shared/mail/input-fields.css b/comm/mail/themes/shared/mail/input-fields.css
new file mode 100644
index 0000000000..9a0cb04217
--- /dev/null
+++ b/comm/mail/themes/shared/mail/input-fields.css
@@ -0,0 +1,51 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+html|input.plain {
+ background-color: transparent;
+}
+
+html|input.input-filefield {
+ padding-inline-start: 20px !important;
+}
+
+html|input.input-filefield:-moz-locale-dir(rtl) {
+ background-position-x: right 2px;
+}
+
+html|input.input-inline-color {
+ margin: 2px 4px;
+}
+
+.input-container {
+ display: flex;
+ align-items: center;
+ flex-wrap: nowrap;
+}
+
+.input-container.items-stretch {
+ align-items: stretch;
+}
+
+.input-container.wrap-container {
+ flex-wrap: wrap;
+}
+
+.input-container html|input:not([type="number"],[type="color"]),
+.input-container .label-inline,
+.input-container .spacer-inline {
+ flex: 1;
+}
+
+html|input[type="number"].input-number-inline {
+ flex: 1 !important;
+ padding: 2px 2px 3px;
+ margin-inline-start: 2px;
+}
+
+html|input[type="number"]::-moz-number-spin-box {
+ padding-inline-start: 4px;
+}
diff --git a/comm/mail/themes/shared/mail/joinchat.css b/comm/mail/themes/shared/mail/joinchat.css
new file mode 100644
index 0000000000..c2073c4c68
--- /dev/null
+++ b/comm/mail/themes/shared/mail/joinchat.css
@@ -0,0 +1,25 @@
+/* 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/. */
+
+#joinChatGrid {
+ display: inline-grid;
+ grid-template-columns: auto auto auto;
+}
+
+#joinChatGrid textbox, menulist {
+ width: 100%;
+}
+
+#joinChatGrid div {
+ display: flex;
+ align-items: center;
+}
+
+#joinChatGrid input:not([type="number"],[type="color"]) {
+ flex: 1;
+}
+
+.required {
+ visibility: hidden;
+}
diff --git a/comm/mail/themes/shared/mail/layout.css b/comm/mail/themes/shared/mail/layout.css
new file mode 100644
index 0000000000..cac83df115
--- /dev/null
+++ b/comm/mail/themes/shared/mail/layout.css
@@ -0,0 +1,81 @@
+/* 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/colors.css");
+
+/* This file defines the colors used for the main layout of the application.
+ * Colors that define a containers for content or thier text color should go
+ * here. Colors that define widgets or content should not */
+
+/* Background 0 should be used for the main content or page background */
+/* Background 1 should be used for center panes and secondary sidebars */
+/* Background 2 should be used for primary sidebars */
+/* Background 3 should be used for blocks of content inside the main content */
+/* Background 4 should be used for elements inside the main content */
+
+/* Color 0 should be used when the text needs more emphasis */
+/* Color 1 should be used for the main text color */
+/* Color 2 should be used when the text needs less emphasis */
+/* Color 2 should be used when the text need even less emphasis */
+
+/* Border 0 should be used for separation from main layout sections */
+/* Border 1 should be used when the separation is part of the element */
+
+:host,
+:root {
+ --layout-background-0: var(--color-white);
+ --layout-background-1: var(--color-gray-05);
+ --layout-background-2: var(--color-gray-10);
+ --layout-background-3: var(--color-gray-20);
+ --layout-background-4: var(--color-gray-30);
+
+ --layout-color-0: var(--color-black);
+ --layout-color-1: var(--color-gray-90);
+ --layout-color-2: var(--color-gray-70);
+ --layout-color-3: var(--color-gray-50);
+
+ --layout-border-0: var(--color-gray-30);
+ --layout-border-1: var(--color-gray-40);
+ --layout-border-2: var(--color-gray-50);
+}
+
+@media (prefers-color-scheme: dark) {
+ :host,
+ :root {
+ --layout-background-0: var(--color-gray-90);
+ --layout-background-1: var(--color-gray-80);
+ --layout-background-2: var(--color-gray-70);
+ --layout-background-3: var(--color-gray-60);
+ --layout-background-4: var(--color-gray-50);
+
+ --layout-color-0: var(--color-white);
+ --layout-color-1: var(--color-gray-10);
+ --layout-color-2: var(--color-gray-30);
+ --layout-color-3: var(--color-gray-50);
+
+ --layout-border-0: var(--color-gray-70);
+ --layout-border-1: var(--color-gray-60);
+ --layout-border-2: var(--color-gray-50);
+ }
+}
+
+@media (prefers-contrast) {
+ :host,
+ :root:not(:-moz-lwtheme) {
+ --layout-background-0: Window;
+ --layout-background-1: -moz-Dialog;
+ --layout-background-2: transparent;
+ --layout-background-3: transparent;
+ --layout-background-4: transparent;
+
+ --layout-color-0: WindowText;
+ --layout-color-1: -moz-DialogText;
+ --layout-color-2: currentColor;
+ --layout-color-3: currentColor;
+
+ --layout-border-0: currentColor;
+ --layout-border-1: currentColor;
+ --layout-border-2: currentColor;
+ }
+}
diff --git a/comm/mail/themes/shared/mail/mailWindow1.css b/comm/mail/themes/shared/mail/mailWindow1.css
new file mode 100644
index 0000000000..22306ae1b7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/mailWindow1.css
@@ -0,0 +1,200 @@
+/* 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/. */
+
+#messengerBody {
+ flex: 1;
+}
+
+:root:not([tabsintitlebar]) .titlebar-buttonbox-container {
+ visibility: collapse;
+}
+
+#tabmail:-moz-lwtheme {
+ text-shadow: none;
+}
+
+#messengerBox {
+ color: -moz-DialogText;
+}
+
+#messagepaneboxwrapper {
+ overflow: hidden;
+}
+
+#folderUnreadCol,
+#folderTotalCol,
+#folderSizeCol {
+ text-align: end;
+}
+
+#folderNameCol {
+ flex: 5 5;
+}
+
+/* ::::: thread decoration ::::: */
+
+treechildren::-moz-tree-cell-text(read) {
+ font-weight: normal;
+}
+
+treechildren::-moz-tree-cell-text(unread) {
+ font-weight: bold;
+}
+
+:root[lwt-tree-brighttext] treechildren::-moz-tree-cell-text(untagged, unread) {
+ color: #fff !important;
+}
+
+/* on a collapsed thread, if the top level message is read, but the thread has
+ * unread children, underline the text. 4.x mac did this, very slick
+ */
+treechildren::-moz-tree-cell-text(container, closed, hasUnread, read) {
+ text-decoration: underline;
+}
+
+/* ..... grouped by sort header rows ..... */
+
+treechildren::-moz-tree-row(dummy) {
+ background-color: var(--row-grouped-header-bg-color) !important;
+ border-color: transparent !important;
+ padding-inline-start: 2px;
+ margin-bottom: 1px;
+}
+
+treechildren::-moz-tree-row(dummy, selected, focus) {
+ background-color: var(--row-grouped-header-bg-color-selected) !important;
+}
+
+treechildren::-moz-tree-cell-text(dummy) {
+ font-weight: bold;
+}
+
+:root[lwt-tree] treechildren::-moz-tree-cell-text(dummy, selected) {
+ color: var(--sidebar-highlight-text-color);
+}
+
+/* ..... message pane adjustments ..... */
+
+/* We need to hide overflow in messagepanebox, so that resizing doesn't spill
+ header content over the statusbar. */
+
+#messagepanebox {
+ flex: 2 2;
+ overflow: hidden;
+ background-color: var(--layout-background-1);
+}
+
+/* splitter adjustments */
+
+#folderpane_splitter,
+#threadpane-splitter:not([orient="vertical"]) {
+ appearance: none;
+ border-width: 0;
+ min-width: 0;
+ width: 5px;
+ background-color: transparent;
+ margin-top: 0;
+ position: relative;
+ z-index: 10;
+ transition: border-width .3s ease-in;
+}
+
+#folderpane_splitter {
+ border-inline-start: 1px solid var(--splitter-color);
+ /* make only the splitter border visible */
+ margin-inline-end: -4px;
+}
+
+#folderpane_splitter[state="collapsed"]:hover {
+ border-inline-start: 4px solid var(--selected-item-color);
+}
+
+#threadpane-splitter:not([orient="vertical"]) {
+ border-inline-end: 1px solid var(--splitter-color);
+ /* make only the splitter border visible */
+ margin-inline-start: -4px;
+}
+
+#threadpane-splitter[state="collapsed"]:not([orient="vertical"]):hover {
+ border-inline-end: 4px solid var(--selected-item-color);
+}
+
+#threadpane-splitter {
+ appearance: none;
+ border-width: 0;
+ border-bottom: 1px solid var(--splitter-color);
+ min-height: 0;
+ height: 5px;
+ background-color: transparent;
+ margin-top: -5px;
+ position: relative;
+ z-index: 10;
+ transition: border-width .3s ease-in;
+}
+
+#threadpane-splitter[state="collapsed"] {
+ transition: border-color .3s;
+}
+
+#threadpane-splitter[state="collapsed"]:hover {
+ border-bottom: 4px solid var(--selected-item-color);
+}
+
+/* Quick-Filter-Bar */
+:root[lwt-tree] #quick-filter-bar:-moz-lwtheme {
+ background-color: var(--toolbar-bgcolor);
+ color: var(--lwt-text-color);
+}
+
+/* virtual folder list dialog */
+#virtualFolderList:not(:-moz-lwtheme) {
+ background-color: -moz-dialog;
+}
+
+#folderPickerTree > treechildren::-moz-tree-image(folderNameCol) {
+ -moz-context-properties: fill, fill-opacity, stroke;
+ fill: color-mix(in srgb, var(--default) 20%, transparent);
+ stroke: var(--default);
+}
+
+#folderPickerTree > treechildren::-moz-tree-image(folderNameCol, isServer-true) {
+ fill: color-mix(in srgb, var(--primary) 20%, transparent);
+ stroke: var(--primary);
+}
+
+#folderPickerTree > treechildren::-moz-tree-image(selectedColumn) {
+ width: 14px;
+ height: 14px;
+ list-style-image: url("chrome://messenger/skin/icons/checkbox.svg");
+ -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
+ fill: currentColor;
+ stroke: currentColor;
+ fill-opacity: 0;
+ stroke-opacity: 0;
+}
+
+#folderPickerTree > treechildren::-moz-tree-image(selectedColumn, selected-true) {
+ fill-opacity: 1;
+}
+
+#folderPickerTree > treechildren::-moz-tree-image(selectedColumn, selected, focus) {
+ fill: var(--select-focus-text-color);
+ stroke: var(--select-focus-text-color);
+}
+
+/* Global notification popup */
+
+#notification-popup {
+ --panel-background: var(--arrowpanel-background);
+ --panel-color: var(--arrowpanel-color);
+ --panel-border-color: var(--arrowpanel-border-color);
+ --panel-border-radius: var(--arrowpanel-border-radius);
+ --panel-padding: var(--arrowpanel-padding);
+ margin-block: 0;
+}
+
+#notification-popup::part(content) {
+ padding: 0;
+ overflow: hidden; /* Don't let panel content overflow the border */
+}
diff --git a/comm/mail/themes/shared/mail/menulist.css b/comm/mail/themes/shared/mail/menulist.css
new file mode 100644
index 0000000000..72a4fb1763
--- /dev/null
+++ b/comm/mail/themes/shared/mail/menulist.css
@@ -0,0 +1,24 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+menulist[is="menulist-editable"]:not([editable="true"])::part(text-input),
+menulist[is="menulist-editable"][editable="true"]::part(label-box) {
+ display: none;
+}
+
+menulist > html|input {
+ margin: 0;
+}
+
+menulist::part(text-input) {
+ appearance: none;
+ background: transparent;
+ flex: 1;
+ margin: 0;
+ border: none;
+ padding: 0;
+ font: inherit;
+}
diff --git a/comm/mail/themes/shared/mail/message-bar.css b/comm/mail/themes/shared/mail/message-bar.css
new file mode 100644
index 0000000000..a4a7a02e10
--- /dev/null
+++ b/comm/mail/themes/shared/mail/message-bar.css
@@ -0,0 +1,432 @@
+/* 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/contextMenu.css");
+
+:host {
+ --icon-size: 16px;
+ --close-icon-size: 32px;
+ --in-content-button-color: #0c0c0d;
+ --in-content-button-border: #c2c2c3;
+ --in-content-button-background: #e2e2e3;
+ --in-content-button-text-color-hover: #0c0c0d;
+ --in-content-button-background-hover: #d2d2d3;
+ --in-content-button-border-active: #a2a2a3;
+ --in-content-button-text-color-active: #0c0c0d;
+ --in-content-button-background-active: #c2c2c3;
+ --panel-border-radius: 3px;
+}
+
+@media (prefers-contrast) {
+ :host {
+ --in-content-box-info-background: -moz-Dialog;
+ --in-content-button-color: ButtonText;
+ --in-content-button-border: ThreeDLightShadow;
+ --in-content-button-background: ButtonFace;
+ --in-content-button-text-color-hover: SelectedItemText;
+ --in-content-button-background-hover: SelectedItem;
+ --in-content-button-border-active: ThreeDFace;
+ --in-content-button-text-color-active: SelectedItemText;
+ --in-content-button-background-active: SelectedItem;
+ }
+}
+
+:host([message-bar-type=infobar]) {
+ --close-icon-size: 24px;
+}
+
+/* MessageBar colors by message type */
+/* Colors from: https://design.firefox.com/photon/components/message-bars.html#type-specific-style */
+
+:host {
+ --message-bar-background-color: var(--in-content-page-background);
+ --message-bar-text-color: var(--in-content-text-color);
+ --message-bar-icon-url: var(--icon-info);
+ /* The default values of --in-content-button* are sufficient, even for dark themes */
+}
+
+:host([type=warning]) {
+ --message-bar-background-color: #fff160;
+ --message-bar-text-color: #000;
+ --message-bar-icon-url: var(--icon-warning);
+}
+
+@media (prefers-color-scheme: dark) {
+ :host {
+ --in-content-box-info-background: var(--color-gray-60);
+ }
+
+ :host([type=warning]) {
+ --message-bar-background-color: #ffe900;
+ }
+}
+
+:host([type=success]) {
+ --message-bar-background-color: var(--green-60);
+ --message-bar-text-color: #ffffff;
+ --message-bar-icon-url: var(--icon-check);
+}
+
+:host([type=error]),
+:host([type=critical]) {
+ --message-bar-background-color: var(--red-60);
+ --message-bar-text-color: #fff;
+}
+:host([type=error]),
+:host([type=critical]) {
+ --message-bar-icon-url: var(--icon-error-circle);
+}
+
+:host([value=attachmentReminder]) {
+ --message-bar-icon-url: var(--icon-attachment);
+}
+
+:host([value=draftMsgContent]) {
+ --message-bar-icon-url: var(--icon-pencil);
+}
+
+:host([value=junkContent]) {
+ --message-bar-icon-url: var(--icon-spam);
+}
+
+:host([value=remoteContent]) {
+ --message-bar-icon-url: var(--icon-photo-ban);
+}
+
+:host {
+ border-radius: 4px;
+}
+
+/* Make the host to behave as a block by default, but allow hidden to hide it. */
+:host(:not([hidden])) {
+ display: block;
+}
+
+::slotted(button) {
+ /* Enforce micro-button width. */
+ min-width: -moz-fit-content !important;
+}
+
+/* MessageBar Grid Layout */
+
+.container {
+ background: var(--message-bar-background-color);
+ color: var(--message-bar-text-color);
+ padding: 4px 8px;
+ position: relative;
+ border-radius: 4px;
+ display: flex;
+ /* Ensure that the message bar shadow dom elements are vertically aligned. */
+ align-items: center;
+}
+
+:host([align="center"]) .container {
+ justify-content: center;
+}
+
+.content {
+ margin: 0 4px;
+ display: inline-block;
+ /* Ensure that the message bar content is vertically aligned. */
+ align-items: center;
+ /* Ensure that the message bar content is wrapped. */
+ word-break: break-word;
+}
+
+/* MessageBar icon style */
+
+.icon {
+ padding: 4px;
+ width: var(--icon-size);
+ height: var(--icon-size);
+ flex-shrink: 0;
+}
+
+.icon::after {
+ appearance: none;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb ,currentColor 20%, transparent);
+ stroke: currentColor;
+ content: var(--message-bar-icon-url);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ :host([value=accountSetupLoading]) .icon {
+ position: relative;
+ overflow: hidden;
+ }
+
+ :host([value=accountSetupLoading]) .icon::after {
+ position: absolute;
+ content: '';
+ background-image: url("chrome://messenger/skin/icons/loading.svg");
+ background-position: left center;
+ background-repeat: no-repeat;
+ width: 480px;
+ height: 100%;
+ animation: loading-animation 1.05s steps(30) infinite;
+ }
+
+ :host([value=accountSetupLoading]) .icon:-moz-locale-dir(rtl)::after {
+ background-position-x: right;
+ animation: loading-animation-rtl 1.05s steps(30) infinite;
+ }
+
+ @keyframes loading-animation {
+ 0% { transform: translateX(0); }
+ 100% { transform: translateX(-100%); }
+ }
+
+ @keyframes loading-animation-rtl {
+ 0% { transform: translateX(0); }
+ 100% { transform: translateX(100%); }
+ }
+}
+
+/* Close icon styles */
+
+:host(:not([dismissable])) .close {
+ display: none;
+}
+
+.close {
+ color: inherit !important; /* Override common.css */
+ background-image: var(--icon-close);
+ background-repeat: no-repeat;
+ background-position: center center;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb ,currentColor 20%, transparent);
+ stroke: currentColor;
+ min-width: auto;
+ min-height: auto;
+ width: var(--close-icon-size);
+ height: var(--close-icon-size);
+ margin: 0;
+ padding: 0;
+ flex-shrink: 0;
+}
+
+button.ghost-button:not(.semi-transparent):enabled:hover {
+ background-color: color-mix(in srgb, currentColor 15%, transparent);
+}
+
+button.ghost-button:not(.semi-transparent):enabled:hover:active {
+ background-color: color-mix(in srgb, currentColor 25%, transparent);
+}
+
+@media not (prefers-contrast) {
+ .container.infobar {
+ box-shadow: 0 1px 2px rgba(58, 57, 68, 0.3);
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :host([type="info"]) .container.infobar {
+ --message-bar-background-color: var(--in-content-box-info-background);
+ }
+}
+
+:host([message-bar-type=infobar]:first-of-type) {
+ margin-top: 4px;
+}
+
+:host([message-bar-type=infobar]) {
+ margin: 0 4px 4px;
+}
+
+.container.infobar {
+ /* Don't let lwthemes set a text-shadow. */
+ text-shadow: none;
+ padding: 0;
+}
+
+.container.infobar {
+ align-items: center;
+}
+
+/* Infobars styling. */
+.notification-content {
+ flex-grow: 1;
+ flex-wrap: wrap;
+ display: flex;
+ margin: 0;
+ margin-inline-start: 8px;
+}
+
+:host([value=accountSetupLoading]) .notification-content {
+ flex-grow: unset;
+}
+
+.notification-message {
+ flex-grow: 1;
+ min-height: 16px;
+ margin-inline-end: 20px;
+ margin-block: 6px;
+}
+
+.notification-button-container,
+.notification-message {
+ display: flex;
+}
+
+:host(:not([dismissable])) .notification-message {
+ margin-inline-end: 6px;
+}
+
+:host([type=success]) .notification-message {
+ font-weight: 500;
+}
+
+.notification-message > hbox {
+ flex: 100 100;
+}
+
+.notification-button {
+ border: 1px solid var(--in-content-button-border);
+ border-radius: 3px;
+ color: var(--in-content-button-color);
+}
+
+.notification-button:hover:active {
+ border-color: var(--in-content-button-border-active);
+}
+
+/* Button variations */
+
+button.button-menu-list {
+ appearance: none;
+ padding-inline-end: 18px;
+ background-repeat: no-repeat;
+ background-position: right 4px center;
+ background-size: 12px;
+ background-image: var(--icon-nav-down-sm);
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+button:-moz-locale-dir(rtl).button-menu-list {
+ background-position-x: left 4px;
+}
+
+toolbarbutton.notification-button[is="toolbarbutton-menu-button"] {
+ align-items: center;
+ margin: 4px 6px;
+ padding-block: 0;
+ padding-inline: 0 11px;
+ background-color: var(--in-content-button-background);
+}
+
+toolbarbutton[is="toolbarbutton-menu-button"] > toolbarbutton {
+ margin-block: 0;
+ margin-inline: 0 2px;
+ min-height: 22px;
+ border-start-start-radius: 2px;
+ border-start-end-radius: 2px;
+ border-start-end-radius: 0;
+ border-end-end-radius: 0;
+ padding: 2px 15px;
+ font-weight: inherit;
+ background-color: var(--in-content-button-background);
+ border-width: 0;
+ border-inline-end: 1px solid var(--in-content-button-border);
+}
+
+toolbarbutton.notification-button[is="toolbarbutton-menu-button"]:hover,
+toolbarbutton.notification-button[is="toolbarbutton-menu-button"] > toolbarbutton:hover {
+ background-color: var(--in-content-button-background-hover);
+ color: var(--in-content-button-text-color-hover);
+ border-color: var(--in-content-button-border-color-hover);
+}
+
+toolbarbutton.notification-button[is="toolbarbutton-menu-button"]:hover:active,
+toolbarbutton.notification-button[is="toolbarbutton-menu-button"] > toolbarbutton:hover:active {
+ background-color: var(--in-content-button-background-active);
+ color: var(--in-content-button-text-color-active);
+ border-color: var(--in-content-button-border-color-active);
+}
+
+toolbarbutton.notification-button[is="toolbarbutton-menu-button"] > dropmarker {
+ appearance: none;
+ list-style-image: var(--icon-nav-down-sm);
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+ margin-inline-end: -5px;
+ padding-inline-start: 5px;
+ border-start-start-radius: 0;
+ border-start-end-radius: 0;
+ pointer-events: none;
+ display: inline-flex;
+}
+
+.close {
+ margin: 4px 8px;
+ background-size: 16px;
+}
+
+.notification-button.small-button {
+ font-size: inherit;
+ font-weight: 400;
+}
+
+.notification-button:first-of-type {
+ /* When the buttons wrap to their own line we want to match the 8px on the message. */
+ margin-inline-start: 0;
+}
+
+strong {
+ font-weight: 600;
+}
+
+.text-link:hover {
+ cursor: pointer;
+}
+
+.infobar > .icon {
+ padding: 0;
+ margin: 8px 0;
+}
+
+.infobar > .icon,
+:host([type=system]) .notification-content {
+ margin-inline-start: 12px;
+}
+
+:host([type=system]) .icon {
+ display: none;
+}
+
+:host([type=info]) .icon {
+ color: #0090ed;
+}
+
+@media (prefers-color-scheme: dark) {
+ :host {
+ --in-content-button-color: #f9f9fa;
+ --in-content-button-border: #828283;
+ --in-content-button-background: #636364;
+ --in-content-button-text-color-hover: #f9f9fa;
+ --in-content-button-background-hover: #777778;
+ --in-content-button-text-color-active: #f9f9fa;
+ --in-content-button-border-active: #878788;
+ --in-content-button-background-active: #878788;
+ --in-content-focus-outline-color: #45a1ff;
+ }
+
+ :host([type=info]) .icon {
+ color: #45a1ff;
+ }
+}
+
+:host([value=draftMsgContent]) .icon {
+ color: inherit;
+}
+
+/* Attachment reminder variations */
+
+#attachmentKeywords {
+ font-weight: bold;
+ margin-inline-start: 3px;
+ text-decoration: underline;
+ cursor: pointer;
+}
diff --git a/comm/mail/themes/shared/mail/messageBody.css b/comm/mail/themes/shared/mail/messageBody.css
new file mode 100644
index 0000000000..f38ee53fa9
--- /dev/null
+++ b/comm/mail/themes/shared/mail/messageBody.css
@@ -0,0 +1,201 @@
+/* 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/. */
+
+/* ===== messageBody.css =================================================
+ == Styles for the body of a mail message.
+ ======================================================================= */
+@import url(chrome://messenger/skin/messageQuotes.css);
+
+@namespace url("http://www.w3.org/1999/xhtml");
+
+mailattachcount {
+ display: none;
+}
+
+/* :::: message header ::::: */
+
+@media screen {
+ .moz-main-header,
+ .moz-main-header + br,
+ .moz-print-only {
+ display: none;
+ }
+}
+
+.moz-header-part1 {
+ background-color: #EFEFEF;
+}
+
+.moz-header-part2,
+.moz-header-part3 {
+ background-color: #DEDEDE;
+}
+
+.moz-header-display-name {
+ display: inline;
+ font-weight: bold;
+ white-space: pre;
+}
+
+/* ::::: message text, incl. quotes ::::: */
+
+.moz-text-flowed blockquote,
+.moz-text-plain blockquote {
+ margin: 0;
+}
+
+.moz-text-plain pre {
+ margin: 0;
+ font-family: inherit;
+}
+
+.moz-text-plain[wrap="true"] {
+ white-space: pre-wrap;
+}
+
+.moz-text-plain[wrap="false"] {
+ white-space: pre;
+}
+
+.moz-text-plain[wrap="flow"] .moz-txt-sig {
+ white-space: pre-wrap;
+}
+
+.moz-text-plain[graphical-quote="false"] blockquote {
+ border-style: none;
+ padding: 0;
+}
+
+.moz-text-plain[graphical-quote="true"] .moz-txt-citetags {
+ display: none;
+}
+
+.moz-txt-underscore {
+ text-decoration: underline;
+}
+
+/* Ignore named pages when printing. */
+@media print {
+ * { page: auto !important; }
+}
+
+/* ::::: images ::::: */
+
+img[overflowing]:not([shrinktofit]) {
+ cursor: zoom-out;
+ width: auto !important;
+}
+
+img[overflowing][shrinktofit] {
+ cursor: zoom-in;
+ max-width: 100% !important;
+ height: auto !important;
+}
+
+@media print {
+ img[shrinktofit] {
+ max-width: 100% !important;
+ height: auto !important;
+ }
+}
+
+.moz-attached-image-container {
+ text-align: center;
+}
+
+/* ::::: vcard ::::: */
+
+.moz-vcard-table {
+ margin-top: 10px;
+ border-radius: 3px;
+ box-shadow: 0 1px 3px hsla(0, 0%, 50%, 0.6);
+}
+
+.moz-vcard-property {
+ font-size: 80%;
+ color: gray;
+}
+
+.moz-vcard-badge {
+ margin-top: 2px;
+ height: 32px;
+ width: 32px;
+ background-image: url("chrome://messenger/skin/addressbook/icons/contact-generic.svg");
+ background-size: 100% 100%;
+ background-color: transparent;
+ display: block;
+ opacity: .7;
+ cursor: pointer;
+}
+
+.moz-vcard-badge:hover {
+ opacity: .8;
+}
+
+.moz-vcard-badge:active {
+ opacity: 1;
+}
+
+.moz-vcard-badge:focus {
+ outline: none;
+}
+
+/* Old style feeds, pre Tb3.0 */
+#_mailrssiframe {
+ position: fixed;
+ display: block;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border: none;
+}
+
+/* Attachment display styling (for inline attachments and printing) */
+.moz-mime-attachment-header {
+ border-style: none;
+ border-top: 1px solid GrayText;
+ padding-block-start: 0.625em;
+ padding-block-end: 0.2em;
+}
+
+.moz-mime-attachment-header.moz-print-only {
+ margin-top: 1em;
+}
+
+.moz-mime-attachment-header-name {
+ color: GrayText;
+ font-size: 80%;
+ font-family: Arial, sans-serif;
+}
+
+.moz-mime-attachment-wrap {
+ padding: 0 1em;
+}
+
+.moz-mime-attachment-table {
+ width: 100%;
+ border-collapse: collapse;
+ table-layout: fixed;
+}
+
+.moz-mime-attachment-table tr + tr > td {
+ border-top: 1px solid GrayText;
+ padding-top: 0.25em;
+}
+
+.moz-mime-attachment-file {
+ word-wrap: break-word;
+}
+
+.moz-mime-attachment-size {
+ vertical-align: top;
+ width: 10ch;
+ text-align: right;
+}
+
+.moz-mime-attachment-file,
+.moz-mime-attachment-size {
+ padding: 0 0 0.25em;
+}
diff --git a/comm/mail/themes/shared/mail/messageHeader.css b/comm/mail/themes/shared/mail/messageHeader.css
new file mode 100644
index 0000000000..588c618545
--- /dev/null
+++ b/comm/mail/themes/shared/mail/messageHeader.css
@@ -0,0 +1,1002 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+ /* This variable is used for both inline and block spacing in order to keep
+ a visual consistency for recipients and simple fields alignment. */
+ --message-header-field-offset: 2px;
+ --recipient-avatar-size: 26px;
+ --recipient-avatar-placeholder-size: 16px;
+ --recipient-avatar-margin-block-start: -1px;
+
+ --recipient-avatar-color: var(--color-gray-50);
+ --recipient-avatar-background-color: var(--color-gray-30);
+
+ --recipient-multi-line-gap: 2px;
+ --message-header-label-opacity: 0.7;
+}
+
+:root[uidensity="compact"] {
+ --recipient-avatar-size: 20px;
+ --recipient-avatar-placeholder-size: contain;
+ --recipient-avatar-margin-block-start: -2px;
+ --recipient-multi-line-gap: 0;
+}
+
+:root[uidensity="touch"] {
+ --recipient-avatar-size: 32px;
+ --recipient-avatar-placeholder-size: 16px;
+ --recipient-multi-line-gap: 3px;
+}
+
+:root .message-header-show-big-avatar {
+ --recipient-avatar-size: 40px;
+}
+
+:root[uidensity="compact"] .message-header-show-big-avatar {
+ --recipient-avatar-size: 36px;
+}
+
+:root[uidensity="touch"] .message-header-show-big-avatar {
+ --recipient-avatar-size: 44px;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --recipient-avatar-color: var(--color-gray-40);
+ --recipient-avatar-background-color: var(--color-gray-60);
+ }
+}
+
+#messagepanebox {
+ color: var(--layout-color-1);
+ background-color: var(--layout-background-1);
+ min-width: 0;
+}
+
+.main-header-area {
+ border-bottom-style: none;
+ display: block;
+}
+
+.message-header-container,
+.message-header-extra-container {
+ display: grid;
+ row-gap: 6px;
+}
+
+.message-header-container {
+ padding: 3px;
+}
+
+.message-header-row:not([hidden]) {
+ display: flex;
+}
+
+#headerSubjectSecurityContainer {
+ align-items: center; /* Needed for when the encryption button is visible. */
+}
+
+.message-header-wrap {
+ flex-wrap: wrap;
+}
+
+.message-header-row.header-row-reverse {
+ flex-direction: row-reverse;
+}
+
+.message-header-row.items-center {
+ /* Variation for those rows that include buttons. */
+ align-items: center;
+}
+
+.header-buttons-container {
+ display: flex;
+ justify-content: end;
+ flex-wrap: wrap;
+ gap: 3px;
+}
+
+.message-header-buttons-only-icons .header-buttons-container {
+ gap: 5px;
+}
+
+.header-row-grow:not([hidden]) {
+ flex: 1 1 auto;
+ display: flex;
+ align-items: center;
+}
+
+#mail-notification-top {
+ border-bottom: 1px solid var(--splitter-color);
+}
+
+#mail-notification-top > .notificationbox-stack[notificationside="top"] {
+ background-color: var(--layout-background-1);
+}
+
+/* ::::: msg header toolbars ::::: */
+
+#messageHeader[show_header_mode="all"],
+#messageHeader.scrollable {
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 14em;
+}
+
+#expandedBoxSpacer {
+ display: block;
+ height: 4px;
+}
+
+mail-tagfield[collapsed="true"] {
+ display: none;
+}
+
+/* ::::: msg header buttons ::::: */
+
+#otherActionsButton > .toolbarbutton-icon {
+ display: none;
+}
+
+.message-header-view-button {
+ flex-direction: row;
+ min-width: 1em;
+ margin: 0;
+ padding-inline: 3px !important;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+.message-header-view-button[is="toolbarbutton-menu-button"] {
+ padding: 0 !important;
+}
+
+.message-header-view-button[is="toolbarbutton-menu-button"] > .toolbarbutton-menubutton-button {
+ flex-direction: row;
+ padding-inline: 3px !important;
+}
+
+#messageHeader:not(.message-header-buttons-only-icons)
+ .toolbarbutton-1.message-header-view-button:not([is="toolbarbutton-menu-button"]),
+#messageHeader:not(.message-header-buttons-only-icons)
+ .toolbarbutton-1.message-header-view-button > .toolbarbutton-menubutton-button,
+#messageHeader:not(.message-header-buttons-only-icons)
+ .toolbarbutton-1.message-header-view-button > .toolbarbutton-menubutton-dropmarker,
+#headingWrapper .toolbarbutton-1.message-header-view-button {
+ border-color: var(--toolbarbutton-header-bordercolor);
+}
+
+#messageHeader:not(.message-header-buttons-only-icons)
+ .toolbarbutton-1.message-header-view-button:not([disabled=true]):is(:hover,[open]) >
+ .toolbarbutton-menubutton-button,
+#messageHeader:not(.message-header-buttons-only-icons)
+ .toolbarbutton-1.message-header-view-button:not([disabled=true]):is(:hover,[open]) >
+ .toolbarbutton-menubutton-dropmarker,
+#messageHeader:not(.message-header-buttons-only-icons)
+ .toolbarbutton-1.message-header-view-button:not([is="toolbarbutton-menu-button"],[disabled=true],[checked=true],[open],:active):hover,
+#messageHeader:not(.message-header-buttons-only-icons)
+ .toolbarbutton-1.message-header-view-button:not([buttonover],[open],:active):hover >
+ .toolbarbutton-menubutton-dropmarker:not([disabled]),
+#headingWrapper .toolbarbutton-1.message-header-view-button:hover {
+ border-color: var(--toolbarbutton-active-bordercolor);
+}
+
+/* Separator between menu and split type buttons */
+#messageHeader:not(.message-header-buttons-only-icons)
+ .toolbarbutton-1.message-header-view-button:not(:hover,:active,[open],[checked]) >
+ .toolbarbutton-menubutton-dropmarker::before,
+#messageHeader:not(.message-header-buttons-only-icons)
+ .toolbarbutton-1.message-header-view-button[disabled="true"] >
+ .toolbarbutton-menubutton-dropmarker::before {
+ background-image: none;
+}
+
+.message-header-view-button .toolbarbutton-text {
+ padding-inline-start: 2px;
+}
+
+#msgHeaderView[shrink] .message-header-view-button .toolbarbutton-text {
+ display: none;
+}
+
+#msgHeaderView[shrink] .toolbarbutton-1 .toolbarbutton-menu-dropmarker {
+ margin-inline: 3px;
+}
+
+.hdrReplyToSenderButton,
+.hdrDummyReplyButton,
+.hdrReplyButton {
+ list-style-image: var(--icon-reply);
+}
+
+.hdrReplyAllButton {
+ list-style-image: var(--icon-reply-all);
+}
+
+.hdrReplyListButton,
+.hdrFollowupButton {
+ list-style-image: var(--icon-reply-list);
+}
+
+.hdrForwardButton {
+ list-style-image: var(--icon-forward);
+}
+
+.hdrArchiveButton {
+ list-style-image: var(--icon-archive);
+}
+
+.hdrJunkButton {
+ list-style-image: var(--icon-spam);
+}
+
+.hdrTrashButton {
+ list-style-image: var(--icon-trash);
+}
+
+.header-buttons-container *:focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-offset);
+}
+
+#attachmentSaveAllSingle,
+#attachmentSaveAllMultiple {
+ list-style-image: var(--icon-download);
+}
+
+/* ::::: msg header toolbars ::::: */
+
+#expandedHeadersTopBox {
+ /* Use the HTML layout model to allow the message header toolbar to float to
+ the right of the From field. */
+ display: block;
+}
+
+/* ::::: expanded header pane ::::: */
+
+#expandedsubjectBox {
+ font-weight: 700;
+ flex: 1;
+ margin-inline-start: calc(var(--message-header-field-offset) * -1);
+ padding-inline: var(--message-header-field-offset);
+ /* IMPORTANT! Keep these to avoid issues with very long subjects. Bug 77806 */
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ overflow-y: auto;
+}
+
+/* ::::: attachment view ::::: */
+
+#attachmentBar {
+ color: var(--layout-color-1);
+ background-color: var(--layout-background-1);
+ padding: 3px 0;
+ overflow: hidden;
+}
+
+#attachmentToggle {
+ /* Override button appearance */
+ appearance: none;
+ min-width: 20px;
+ margin-block: 0;
+ margin-inline: 1px 0;
+ border: 0;
+ background-color: transparent;
+ color: inherit;
+ -moz-user-focus: normal;
+ list-style-image: var(--icon-nav-down-sm);
+ -moz-context-properties: stroke, fill-opacity;
+ stroke: currentColor;
+ fill-opacity: 1;
+}
+
+#attachmentToggle:not([checked="true"]) > .button-box > .button-icon {
+ transform: rotate(-90deg);
+}
+
+#attachmentToggle:not([checked="true"]):-moz-locale-dir(rtl) >
+ .button-box > .button-icon {
+ transform: rotate(90deg);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ #attachmentToggle > .button-box > .button-icon {
+ transition: transform 200ms ease;
+ }
+}
+
+#attachmentToggle > .button-box > .button-text {
+ display: none;
+}
+
+#attachmentToggle:focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: -2px;
+}
+
+#attachmentInfo {
+ overflow: hidden;
+ flex-shrink: 1;
+}
+
+#attachmentName:hover,
+#attachmentName[selected="true"] {
+ cursor: pointer;
+ color: var(--selected-item-text-color);
+ background-color: var(--selected-item-color);
+}
+
+#attachmentSize {
+ margin: 0;
+ margin-inline-start: 8px;
+}
+
+#attachmentIcon {
+ margin-inline-start: 5px;
+ -moz-context-properties: fill, fill-opacity;
+ fill: currentColor;
+ fill-opacity: var(--toolbarbutton-icon-fill-opacity);
+}
+
+#attachmentCount {
+ margin: 0;
+ padding: 2px 0;
+ margin-inline: 2px 1px;
+}
+
+#attachmentName {
+ -moz-user-focus: normal;
+ margin: 0;
+ margin-inline-end: -3px;
+ padding: 2px 3px;
+ border-radius: 2px;
+}
+
+#attachmentName:focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: -1px;
+}
+
+#attachment-splitter {
+ appearance: none;
+ background-color: transparent;
+ border-width: 0;
+ border-bottom: 1px solid var(--color-gray-30);
+ /* splitter grip area */
+ height: 5px;
+ /* make only the splitter border visible */
+ margin-top: -5px;
+ /* because of the negative margin needed to make the splitter visible */
+ position: relative;
+ z-index: 10;
+ transition: border-width .3s ease-in;
+}
+
+#attachment-splitter:not([state="collapsed"]) {
+ border-bottom: 1px solid transparent;
+}
+
+#attachment-splitter {
+ transition: border-color .3s;
+}
+
+#attachment-splitter[state="collapsed"]:hover {
+ border-bottom: 4px solid var(--selected-item-color);
+}
+
+/* ::::: msg header captions ::::: */
+
+.message-header-label {
+ padding: 0;
+ margin-block: 0;
+ margin-inline: 6px 8px;
+ text-align: end;
+ flex-shrink: 0;
+ align-self: baseline;
+}
+
+.message-header-label.header-pill-label {
+ padding-block-start: var(--message-header-field-offset);
+}
+
+.message-header-label,
+#attachmentSize {
+ opacity: var(--message-header-label-opacity);
+}
+
+.headerValue {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ margin: 0;
+}
+
+.header-row:focus-visible,
+.header-recipient:focus-visible,
+.header-newsgroup:focus-visible {
+ outline: var(--focus-outline);
+}
+
+.header-row[is="simple-header-row"],
+.header-row[is="url-header-row"] {
+ /* Match the visual alignment of the rows with clickable elements. */
+ margin-inline-start: calc(var(--message-header-field-offset) * -1);
+ padding-inline: var(--message-header-field-offset);
+}
+
+.tag {
+ padding: 1px 3px;
+ margin-inline-start: 0;
+ border-radius: var(--button-border-radius);
+ border: 1px solid transparent;
+}
+
+.tag:not([style]) {
+ border-color: color-mix(in srgb, currentColor 50%, transparent);
+}
+
+.message-header-datetime {
+ user-select: text;
+ -moz-user-focus: normal;
+ cursor: text;
+ margin: 0 6px;
+ white-space: nowrap;
+}
+
+#expandedtoRow .message-header-datetime {
+ align-self: flex-start;
+ margin-block: 2px;
+}
+
+/* ::::: msg header email addresses ::::: */
+
+button.email-action-button {
+ margin: 0;
+ padding: 0;
+ border-radius: 0;
+}
+
+button.email-action-button:hover,
+button.email-action-button:hover:active {
+ background-color: transparent;
+}
+
+button.email-action-button:focus-visible {
+ outline: var(--focus-outline);
+}
+
+.header-row {
+ -moz-user-focus: normal;
+ user-select: text;
+ word-wrap: anywhere;
+ display: inherit;
+ line-height: 1.3;
+}
+
+.screen-reader-only {
+ position: absolute;
+ clip-path: inset(50%);
+}
+
+#attachmentView {
+ display: flex;
+ flex-direction: column;
+ justify-content: stretch;
+ /* Allow the area to shrink. */
+ min-width: 0;
+}
+
+#attachmentView,
+#attachmentList {
+ border-top: 1px solid var(--splitter-color); /* The same color as the splitters */
+}
+
+:root[lwt-tree] #singleMessage,
+:root[lwt-tree] #attachmentView {
+ background-color: var(--toolbar-bgcolor) !important;
+ background-image: none !important;
+ color: var(--lwt-text-color);
+}
+
+:root[lwt-tree] .headerValue {
+ color: inherit;
+}
+
+:root[lwt-tree] #attachmentBar {
+ background-color: hsla(0, 0%, 50%, .15);
+ color: inherit;
+}
+
+/* OpenPGP and S/MIME encryption and signature status icons */
+
+#cryptoBox:not([hidden]) {
+ display: contents;
+}
+
+.crypto-label {
+ font-weight: 600;
+}
+
+.crypto-button {
+ display: inline-block;
+ margin-block: 0;
+ margin-inline-end: 3px;
+ fill: currentColor;
+ background-color: transparent;
+}
+
+.crypto-button[hidden] {
+ display: none;
+}
+
+.crypto-button > * {
+ vertical-align: middle;
+}
+
+/* Encryption security pane */
+#messageSecurityPanel {
+ --panel-width: 37rem;
+}
+
+#messageSecurityPanel .security-panel-body {
+ overflow-x: hidden;
+ flex: 1;
+ padding-inline: 6px;
+}
+
+html|header.message-security-header {
+ display: flex;
+ flex-wrap: nowrap;
+ text-align: center;
+ align-items: center;
+ margin-bottom: 6px;
+}
+
+html|header.message-security-header html|h3 {
+ flex: 1;
+ margin-block: 0;
+}
+
+.message-security-body {
+ overflow-y: auto;
+ flex: 1;
+}
+
+.message-security-body > description {
+ margin-bottom: 18px;
+}
+
+.message-security-label {
+ font-weight: 600;
+ font-size: 1.1em;
+ padding-inline-start: 21px;
+ background-position: left center;
+ background-repeat: no-repeat;
+ background-size: 16px;
+ margin-bottom: 6px;
+ fill: currentColor;
+ -moz-context-properties: fill;
+}
+
+.message-security-label.none,
+#encryptionLabel.none,
+#signatureLabel.none {
+ padding-inline-start: 0;
+}
+
+#signatureLabel.ok {
+ background-image: url("chrome://messenger/skin/icons/message-signed-ok.svg");
+}
+
+#signatureLabel.verified {
+ background-image: url("chrome://messenger/skin/icons/message-signed-verified.svg");
+}
+
+#signatureLabel.unverified {
+ background-image: url("chrome://messenger/skin/icons/message-signed-unverified.svg");
+}
+
+#signatureLabel.unknown {
+ background-image: url("chrome://messenger/skin/icons/message-signed-unknown.svg");
+}
+
+#signatureLabel.mismatch,
+#signatureLabel.notok {
+ background-image: url("chrome://messenger/skin/icons/message-signed-mismatch.svg");
+}
+
+#encryptionLabel.ok {
+ background-image: url("chrome://messenger/skin/icons/message-encrypted-ok.svg");
+}
+
+#encryptionLabel.notok {
+ background-image: url("chrome://messenger/skin/icons/message-encrypted-notok.svg");
+}
+
+#openpgpImportButton {
+ list-style-image: url("chrome://messenger/skin/icons/encryption-key.svg");
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+#openpgpImportButton .button-icon {
+ margin-inline-end: 2px;
+}
+
+.message-security-container {
+ margin-bottom: 21px;
+}
+
+#signatureKeyId,
+#encryptionKeyId,
+.cert-label {
+ font-weight: 600;
+}
+
+#signatureKey {
+ flex-wrap: wrap;
+}
+
+#otherEncryptionKeysList {
+ margin: 9px 6px;
+}
+
+.other-key-row {
+ border-radius: 2px;
+ padding: 3px 2px;
+ border: 1px solid var(--button-border-color);
+ background-color: rgba(215, 215, 219, 0.2);
+ margin-bottom: 3px;
+}
+
+.openpgp-key-id {
+ font-weight: bold;
+}
+
+.openpgp-key-name {
+ font-size: 0.9em;
+}
+
+#signatureKeyId,
+#encryptionKeyId,
+.openpgp-key-id,
+.openpgp-key-name {
+ user-select: text;
+ cursor: text;
+}
+
+.button-focusable {
+ -moz-user-focus: normal;
+}
+
+.button-focusable:focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-offset);
+}
+
+.button-focusable:focus:not(:focus-visible) {
+ outline: none;
+}
+
+button.email-action-flagged {
+ margin-inline: 6px;
+ cursor: pointer;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 10%, transparent);
+ stroke: color-mix(in srgb, currentColor 30%, transparent);
+ align-self: center;
+ border-radius: var(--button-border-radius);
+}
+
+button.email-action-flagged.flagged {
+ fill: var(--color-orange-30) !important;
+ stroke: var(--color-orange-60);
+}
+
+.email-action-flagged:not(.flagged):hover {
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+/* Responsive style */
+@media (max-width: 768px) {
+ .message-header-row.items-center {
+ align-items: baseline;
+ }
+
+ .message-header-container {
+ padding: 6px;
+ }
+
+ .message-header-wrap:not([hidden]) {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .header-buttons-container {
+ align-self: end;
+ }
+
+ .message-header-label {
+ min-width: 0 !important;
+ margin-inline-start: 0;
+ text-align: start;
+ }
+}
+
+
+/* Customization options */
+
+.message-header-hide-label-column {
+ padding-inline-start: 9px;
+}
+
+.message-header-hide-label-column .message-header-label {
+ display: none;
+}
+
+.message-header-hide-label-column .multi-recipient-row:not(#expandedfromBox),
+.message-header-hide-label-column .multi-message-ids-row,
+.message-header-hide-label-column .header-newsgroups-row {
+ display: flex;
+}
+
+.message-header-hide-label-column .multi-recipient-row:not(#expandedfromBox) ol,
+.message-header-hide-label-column .multi-message-ids-row ol,
+.message-header-hide-label-column .header-newsgroups-row ol {
+ flex: 1 1 auto;
+}
+
+.message-header-hide-label-column .row-heading:not(#subjectHeading, #fromHeading, #tagsHeading) {
+ display: flow-root;
+ margin-inline-end: 1ch;
+ font-weight: 600;
+ align-self: baseline;
+ word-break: keep-all;
+ white-space: nowrap;
+ opacity: var(--message-header-label-opacity);
+}
+
+.message-header-hide-label-column .multi-recipient-row
+ .row-heading:not(#fromHeading),
+.message-header-hide-label-column
+ .row-heading:is(#newsgroupsHeading, #followup-toHeading, #message-idHeading, #referencesHeading, #in-reply-toHeading) {
+ padding-block: var(--message-header-field-offset);
+}
+
+.message-header-large-subject #expandedsubjectBox {
+ font-weight: 500;
+ font-size: 1.35em;
+ line-height: 1.35em;
+}
+
+.message-header-large-subject #expandedsubjectLabel {
+ margin-top: 5px;
+}
+
+.message-header-buttons-only-icons .toolbarbutton-text,
+.message-header-buttons-only-text .toolbarbutton-icon {
+ display: none !important;
+}
+
+.message-header-buttons-only-text .toolbarbutton-text {
+ margin: 0 !important;
+ padding-inline: 2px !important;
+}
+
+.message-header-buttons-only-icons .toolbarbutton-menu-dropmarker {
+ margin-inline: 3px;
+}
+
+/* Header row widgets */
+
+.multi-recipient-row {
+ flex: 1 1 auto;
+}
+
+.row-heading {
+ display: none;
+}
+
+.header-recipient:not(:last-child, .last-before-button):after,
+.header-message-id:not(:last-child, .last-before-button):after,
+.header-newsgroup:not(:last-child):after {
+ content: ",";
+}
+
+.header-recipient,
+.header-newsgroup,
+.header-message-id {
+ display: flow-root;
+ padding: var(--message-header-field-offset);
+ border-radius: var(--button-border-radius);
+}
+
+.header-recipient {
+ white-space: nowrap;
+}
+
+.header-recipient:hover,
+.header-newsgroup:hover {
+ color: var(--selected-item-text-color);
+ background-color: var(--selected-item-color);
+ cursor: pointer;
+}
+
+.header-recipient img {
+ pointer-events: none;
+}
+
+.header-recipient span,
+.header-message-id {
+ word-break: break-word;
+ white-space: break-spaces;
+}
+
+.recipients-list,
+.newsgroups-list,
+.tags-list,
+.ids-list {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ row-gap: 2px;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ margin-inline-start: calc(var(--message-header-field-offset) * -1);
+ min-width: 100px;
+}
+
+.tags-list {
+ column-gap: 3px;
+ min-width: fit-content;
+}
+
+.recipient-address-book-button {
+ margin: 0;
+ margin-inline-start: 3px;
+ margin-block-start: -2px;
+ padding: 1px;
+ border-radius: var(--button-border-radius);
+ cursor: pointer;
+ vertical-align: middle;
+ background-color: transparent;
+}
+
+.recipient-address-book-button:not([disabled]):hover {
+ background-color: transparent;
+}
+
+.recipient-address-book-button img {
+ display: block;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+.recipient-address-book-button.in-address-book img {
+ fill: color-mix(in srgb, var(--toolbarbutton-icon-fill-attention) 20%, transparent);
+ stroke: var(--toolbarbutton-icon-fill-attention);
+}
+
+.header-recipient:hover .recipient-address-book-button.in-address-book img {
+ fill: var(--selected-item-text-color);
+ stroke: var(--selected-item-text-color);
+}
+
+.header-recipient:hover .recipient-address-book-button img {
+ opacity: var(--message-header-label-opacity);
+}
+
+.header-recipient:hover .recipient-address-book-button:not([disabled]):hover img {
+ opacity: 1;
+}
+
+.show-more-recipients,
+.show-more-ids {
+ min-height: auto;
+ min-width: auto;
+ border-radius: 12px;
+ line-height: 1;
+ text-transform: uppercase;
+ font-weight: 600;
+ background-color: var(--selected-item-color);
+ color: var(--selected-item-text-color);
+}
+
+.show-more-recipients {
+ padding: 3px 9px;
+ margin-inline-start: 6px !important;
+ font-size: 0.9rem;
+}
+
+.show-more-ids {
+ padding: 2px 6px;
+ font-size: 0.8rem;
+}
+
+button.show-more-recipients:hover,
+button.show-more-ids:hover {
+ background-color: var(--selected-item-text-color);
+ color: var(--selected-item-color);
+}
+
+.show-more-recipients:focus-visible,
+.show-more-ids:focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-offset);
+}
+
+/* Avatar */
+
+.recipient-avatar {
+ display: none;
+ height: var(--recipient-avatar-size);
+ width: var(--recipient-avatar-size);
+ border-radius: 50%;
+ margin-block-start: var(--recipient-avatar-margin-block-start);
+ margin-inline-end: 6px;
+ text-align: center;
+ overflow: hidden;
+ color: var(--recipient-avatar-color);
+ background-color: var(--recipient-avatar-background-color);
+ align-items: center;
+ justify-content: center;
+}
+
+.recipient-avatar img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.message-header-show-recipient-avatar #expandedfromBox .recipient-avatar {
+ display: inline-flex;
+}
+
+.message-header-show-recipient-avatar .recipient-avatar.has-avatar,
+.message-header-show-sender-full-address .recipient-avatar {
+ vertical-align: middle;
+}
+
+.message-header-show-sender-full-address #expandedfromLabel,
+.message-header-show-recipient-avatar #expandedfromLabel {
+ padding-block-start: var(--recipient-avatar-margin-block-start);
+ align-self: center;
+}
+
+.message-header-show-recipient-avatar:not(.message-header-show-sender-full-address ) #expandedfromLabel {
+ padding-block-start: 0;
+}
+
+.recipient-multi-line {
+ display: none;
+ flex-direction: column;
+ gap: var(--recipient-multi-line-gap);
+ vertical-align: middle;
+ margin-inline-end: 3px;
+}
+
+.recipient-multi-line-name {
+ font-weight: 500;
+ font-size: 105%;
+}
+
+.recipient-multi-line-address {
+ opacity: 0.9;
+}
+
+
+.message-header-show-sender-full-address #expandedfromBox .recipient-multi-line {
+ display: inline-flex;
+}
+
+.message-header-show-sender-full-address #expandedfromBox .recipient-single-line {
+ display: none;
+}
diff --git a/comm/mail/themes/shared/mail/messageIcons.css b/comm/mail/themes/shared/mail/messageIcons.css
new file mode 100644
index 0000000000..9f15cdf261
--- /dev/null
+++ b/comm/mail/themes/shared/mail/messageIcons.css
@@ -0,0 +1,360 @@
+/* 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/. */
+
+#sizeCol,
+#unreadCol,
+#totalCol {
+ text-align: end;
+}
+
+#subjectCol {
+ flex: 7 7;
+}
+
+#senderCol {
+ flex: 4 4;
+}
+
+#recipientCol {
+ flex: 4 4;
+}
+
+#correspondentCol {
+ flex: 4 4;
+}
+
+#receivedCol {
+ flex: 2 2;
+}
+
+#dateCol {
+ flex: 2 2;
+}
+
+/* ..... select column ..... */
+
+.selectColumnHeader {
+ cursor: pointer;
+ min-width: 28px;
+}
+
+.selectColumnHeader > .treecol-icon,
+treechildren::-moz-tree-image(selectCol) {
+ width: 16px;
+ height: 16px;
+ -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
+ fill: currentColor;
+ stroke: currentColor;
+ fill-opacity: 0;
+ stroke-opacity: 0;
+}
+
+treechildren::-moz-tree-image(selectCol) {
+ cursor: pointer;
+ list-style-image: var(--icon-checkbox);
+}
+
+.selectColumnHeader.someselected > .treecol-icon {
+ stroke-opacity: 1;
+}
+
+.selectColumnHeader.allselected > .treecol-icon,
+treechildren::-moz-tree-image(selectCol, selected) {
+ fill-opacity: 1;
+}
+
+treechildren::-moz-tree-image(selectCol, selected, focus) {
+ fill: var(--select-focus-text-color);
+ stroke: var(--select-focus-text-color);
+}
+
+/* ..... delete column ..... */
+
+treechildren::-moz-tree-image(deleteCol) {
+ list-style-image: var(--icon-trash);
+ -moz-context-properties: stroke, fill;
+ fill: color-mix(in srgb, currentColor 10%, transparent);
+ stroke: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+treechildren::-moz-tree-image(deleteCol, imapdeleted) {
+ list-style-image: var(--icon-restore);
+}
+
+treechildren::-moz-tree-image(deleteCol, selected, focus) {
+ fill: color-mix(in srgb, var(--select-focus-text-color) 20%, transparent);
+ stroke: var(--select-focus-text-color);
+}
+
+/* ..... thread column ..... */
+
+.threadColumnHeader {
+ padding-inline-end: 1px;
+ width: 20px;
+}
+
+treechildren::-moz-tree-image(threadCol, container) {
+ list-style-image: var(--icon-thread);
+ -moz-context-properties: stroke, fill;
+ fill: color-mix(in srgb, currentColor 10%, transparent);
+ stroke: color-mix(in srgb, currentColor 50%, transparent);
+}
+
+treechildren::-moz-tree-image(threadCol, watch) {
+ list-style-image: var(--icon-eye);
+}
+
+treechildren::-moz-tree-image(threadCol, ignore) {
+ list-style-image: var(--icon-thread-ignored);
+}
+
+treechildren::-moz-tree-image(threadCol, ignoreSubthread) {
+ list-style-image: var(--icon-subthread-ignored);
+}
+
+treechildren::-moz-tree-image(threadCol, selected, focus) {
+ fill: color-mix(in srgb, var(--select-focus-text-color) 20%, transparent);
+ stroke: var(--select-focus-text-color);
+}
+
+/* ..... read column ..... */
+
+treechildren::-moz-tree-image(unreadButtonColHeader) {
+ list-style-image: var(--icon-unread-dot);
+ -moz-context-properties: stroke, fill, fill-opacity;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ fill-opacity: .25;
+}
+
+treechildren::-moz-tree-image(unreadButtonColHeader, unread) {
+ fill: color-mix(in srgb, var(--color-green-60) 50%, transparent);
+ stroke: var(--color-green-60);
+ fill-opacity: 1;
+}
+
+treechildren::-moz-tree-image(unreadButtonColHeader, selected, focus) {
+ fill: color-mix(in srgb, var(--select-focus-text-color) 20%, transparent);
+ stroke: var(--select-focus-text-color);
+}
+
+treechildren::-moz-tree-image(unreadButtonColHeader, unread, selected, focus) {
+ fill: var(--select-focus-text-color);
+}
+
+/* ..... attachment column ..... */
+
+treechildren::-moz-tree-image(attachmentCol, attach) {
+ list-style-image: var(--icon-attachment);
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+treechildren::-moz-tree-image(attachmentCol, attach, selected, focus) {
+ stroke: var(--select-focus-text-color);
+}
+
+/* ..... flag column ..... */
+
+treechildren::-moz-tree-image(flaggedCol) {
+ margin-inline-start: -2px;
+ list-style-image: var(--icon-star);
+ -moz-context-properties: stroke, fill;
+ fill: color-mix(in srgb, currentColor 10%, transparent);
+ stroke: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+treechildren::-moz-tree-image(flaggedCol, flagged) {
+ fill: var(--color-orange-30) !important; /* override the selected, focus rule */
+ stroke: var(--color-orange-60) !important; /* override the selected, focus rule */
+}
+
+treechildren::-moz-tree-image(flaggedCol, selected, focus) {
+ fill: color-mix(in srgb, var(--select-focus-text-color) 20%, transparent);
+ stroke: var(--select-focus-text-color);
+}
+
+/* ..... junkStatus column ..... */
+
+/* "unknown" now looks like "not junk". see bug #182386 */
+treechildren::-moz-tree-image(junkStatusCol) {
+ margin-inline-start: -3px;
+ padding-inline-start: 0;
+ list-style-image: var(--icon-spam);
+ -moz-context-properties: stroke, fill;
+ fill: color-mix(in srgb, currentColor 10%, transparent);
+ stroke: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+treechildren::-moz-tree-image(junkStatusCol, junk) {
+ fill: var(--color-red-50) !important; /* override the selected, focus rule */
+ stroke: var(--color-red-70) !important; /* override the selected, focus rule */
+}
+
+treechildren::-moz-tree-image(junkStatusCol, notjunk) {
+ fill: color-mix(in srgb, currentColor 10%, transparent);
+ stroke: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+treechildren::-moz-tree-image(junkStatusCol, selected, focus) {
+ fill: color-mix(in srgb, var(--select-focus-text-color) 20%, transparent);
+ stroke: var(--select-focus-text-color);
+}
+
+/* ..... correspondent column ..... */
+
+treechildren::-moz-tree-cell-text(subjectCol) {
+ padding-inline-start: 0;
+}
+
+treechildren::-moz-tree-image(correspondentCol) {
+ list-style-image: var(--icon-nav-forward);
+ -moz-context-properties: stroke, fill-opacity;
+ stroke: currentColor;
+ fill-opacity: 0;
+}
+
+treechildren::-moz-tree-image(correspondentCol, outgoing) {
+ fill-opacity: 0.3;
+}
+
+#threadTree:-moz-locale-dir(rtl) > treechildren::-moz-tree-image(correspondentCol, outgoing) {
+ list-style-image: var(--icon-nav-back);
+}
+
+treechildren::-moz-tree-image(correspondentCol, outgoing, focus, selected) {
+ stroke: var(--select-focus-text-color);
+ fill-opacity: 0.5;
+}
+
+/* ..... subject column ..... */
+
+treechildren::-moz-tree-image(subjectCol) {
+ margin-inline-end: 2px;
+ -moz-context-properties: fill, stroke;
+ width: 16px;
+ height: 16px;
+}
+
+treechildren::-moz-tree-image(subjectCol, replied) {
+ list-style-image: var(--icon-reply-col);
+ fill: var(--color-purple-50);
+}
+
+treechildren::-moz-tree-image(subjectCol, forwarded) {
+ list-style-image: var(--icon-forward-col);
+ fill: var(--color-blue-50);
+}
+
+treechildren::-moz-tree-image(subjectCol, redirected) {
+ list-style-image: var(--icon-redirect-col);
+ fill: var(--color-orange-50);
+}
+
+treechildren::-moz-tree-image(subjectCol, replied, forwarded) {
+ list-style-image: var(--icon-reply-forward-col);
+ fill: var(--color-blue-50);
+ stroke: var(--color-purple-50);
+}
+
+treechildren::-moz-tree-image(subjectCol, replied, redirected) {
+ list-style-image: var(--icon-reply-redirect-col);
+ fill: var(--color-orange-50);
+ stroke: var(--color-purple-50);
+}
+
+treechildren::-moz-tree-image(subjectCol, forwarded, redirected) {
+ list-style-image: var(--icon-forward-redirect-col);
+ fill: var(--color-blue-50);
+ stroke: var(--color-orange-50);
+}
+
+treechildren::-moz-tree-image(subjectCol, replied, forwarded, redirected) {
+ list-style-image: var(--icon-reply-forward-redirect-col);
+ fill: var(--color-blue-50);
+ stroke: var(--color-purple-50);
+}
+
+treechildren::-moz-tree-image(subjectCol, new) {
+ list-style-image: var(--icon-notify);
+ fill: var(--color-yellow-50) !important; /* override the selected, focus rule */
+ stroke: var(--color-orange-50) !important; /* override the selected, focus rule */
+}
+
+treechildren::-moz-tree-image(subjectCol, selected, focus) {
+ fill: var(--select-focus-text-color);
+ stroke: var(--select-focus-text-color);
+}
+
+@media (prefers-color-scheme: dark) {
+ treechildren::-moz-tree-image(unreadButtonColHeader, unread) {
+ fill: color-mix(in srgb, var(--color-green-50) 50%, transparent) !important; /* override the selected, focus rule */
+ stroke: var(--color-green-50) !important; /* override the selected, focus rule */
+ }
+
+ treechildren::-moz-tree-image(flaggedCol, flagged) {
+ fill: var(--color-orange-40) !important; /* override the selected, focus rule */
+ stroke: var(--color-orange-50) !important; /* override the selected, focus rule */
+ }
+
+ treechildren::-moz-tree-image(junkStatusCol, junk) {
+ fill: var(--color-red-40) !important; /* override the selected, focus rule */
+ stroke: var(--color-red-50) !important; /* override the selected, focus rule */
+ }
+
+ /* ..... subject column, dark color scheme ..... */
+
+ treechildren::-moz-tree-image(subjectCol, replied) {
+ fill: var(--color-purple-40);
+ stroke: var(--color-purple-40);
+ }
+
+ treechildren::-moz-tree-image(subjectCol, forwarded) {
+ fill: var(--color-blue-40);
+ }
+
+ treechildren::-moz-tree-image(subjectCol, redirected) {
+ fill: var(--color-orange-40);
+ }
+
+ treechildren::-moz-tree-image(subjectCol, replied, forwarded) {
+ fill: var(--color-blue-40);
+ stroke: var(--color-purple-40);
+ }
+
+ treechildren::-moz-tree-image(subjectCol, replied, redirected) {
+ fill: var(--color-orange-40);
+ stroke: var(--color-purple-40);
+ }
+
+ treechildren::-moz-tree-image(subjectCol, forwarded, redirected) {
+ fill: var(--color-blue-40);
+ stroke: var(--color-orange-40);
+ }
+
+ treechildren::-moz-tree-image(subjectCol, replied, forwarded, redirected) {
+ fill: var(--color-blue-40);
+ stroke: var(--color-purple-40);
+ }
+
+ treechildren::-moz-tree-image(subjectCol, selected, focus) {
+ fill: var(--select-focus-text-color);
+ stroke: var(--select-focus-text-color);
+ }
+
+ treechildren::-moz-tree-image(subjectCol, new) {
+ fill: var(--color-yellow-40) !important; /* override the selected, focus rule */
+ stroke: var(--color-orange-30) !important; /* override the selected, focus rule */
+ }
+}
+
+/* ..... do not show icons ..... */
+
+treechildren::-moz-tree-image(subjectCol, dummy),
+treechildren::-moz-tree-image(flaggedCol, dummy),
+treechildren::-moz-tree-image(junkStatusCol, dummy) ,
+treechildren::-moz-tree-image(correspondentCol, dummy),
+treechildren::-moz-tree-image(unreadButtonColHeader, dummy) {
+ list-style-image: none !important;
+}
diff --git a/comm/mail/themes/shared/mail/messageQuotes.css b/comm/mail/themes/shared/mail/messageQuotes.css
new file mode 100644
index 0000000000..f930c599bd
--- /dev/null
+++ b/comm/mail/themes/shared/mail/messageQuotes.css
@@ -0,0 +1,67 @@
+/* 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/. */
+
+/* Because this sheet is loaded synchronously while the user is waiting for the
+ compose window to appear, it must not @import a ton of other things, and
+ especially must not trigger network access. */
+
+/* ===== messageQuotes.css =================================================
+ == Shared styles such as block quote colors and signature style
+ == between the message body during
+ == message display and the mail editor instance for mail compose.
+ ======================================================================= */
+
+/* workaround for MS Outlook mails where the line-height is set to 0 */
+body {
+ line-height: initial !important;
+}
+
+/* ::::: signature ::::: */
+
+@media not print {
+ div.moz-text-flowed > div.moz-txt-sig,
+ div.moz-text-plain > pre > div.moz-txt-sig,
+ pre.moz-signature {
+ opacity: 0.6;
+ }
+}
+
+/* ::::: Turn on borders and padding for quotes. ::::: */
+/* ::::: Colorize block quote borders. We only go 5 levels deep. ::::: */
+
+body blockquote[type=cite] {
+ margin-block: 1ex;
+ margin-inline: 0;
+ padding: 0.4ex 1ex;
+ border-inline-start: 2px solid rgb(114, 159, 207); /* Sky Blue 1 */
+}
+
+blockquote[type=cite] blockquote[type=cite] {
+ border-inline-start-color: rgb(173, 127, 168); /* Plum 1 */
+}
+
+blockquote[type=cite] blockquote[type=cite] blockquote[type=cite] {
+ border-inline-start-color: rgb(138, 226, 52); /* Chameleon 1 */
+}
+
+blockquote[type=cite] blockquote[type=cite] blockquote[type=cite] blockquote[type=cite] {
+ border-inline-start-color: rgb(252, 175, 62); /* Orange 1 */
+}
+
+blockquote[type=cite] blockquote[type=cite] blockquote[type=cite] blockquote[type=cite] blockquote[type=cite] {
+ border-inline-start-color: rgb(233, 185, 110); /* Chocolate 1 */
+}
+
+/* Styles for the dark mode */
+/* Disabled in bug 1639249. See also editorContent.css.
+@media (prefers-color-scheme: dark) {
+ body {
+ color: #f9f9fa;
+ background-color: #2a2a2e;
+ }
+
+ span[_moz_quote="true"] {
+ color: #009fff;
+ }
+} */
diff --git a/comm/mail/themes/shared/mail/messenger.css b/comm/mail/themes/shared/mail/messenger.css
new file mode 100644
index 0000000000..1f568a4b1c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/messenger.css
@@ -0,0 +1,1506 @@
+/* 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://global/skin/global.css");
+@import url("chrome://messenger/content/webextensions.css");
+@import url("chrome://messenger/skin/autocomplete.css");
+@import url("chrome://messenger/skin/variables.css");
+@import url("chrome://messenger/skin/splitter.css");
+@import url("chrome://messenger/skin/widgets.css");
+
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+ user-select: none;
+}
+
+:root,
+body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ width: 100%;
+ overflow: clip;
+}
+
+#messengerWindow {
+ text-rendering: optimizeLegibility;
+ min-height: 95px;
+ min-width: 95px;
+}
+
+:root:-moz-locale-dir(rtl) {
+ direction: rtl;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+
+p {
+ margin: 2px 4px;
+}
+
+hr {
+ width: 100%;
+ border-top: 1px solid var(--field-border-color);
+ border-bottom: 0;
+}
+
+:root:not([sizemode=maximized]) .titlebar-restore,
+:root:is([sizemode=maximized]) .titlebar-max {
+ display: none;
+}
+
+#toolbar-menubar[autohide="true"] {
+ overflow: hidden;
+}
+
+#toolbar-menubar[autohide="true"][inactive="true"]:not([customizing="true"]) {
+ min-height: 0 !important;
+ height: 0 !important;
+ padding: 0 !important;
+ appearance: none !important;
+}
+
+#titlebar-spacer {
+ pointer-events: none;
+}
+
+#navigation-toolbox:-moz-lwtheme,
+#compose-toolbox:-moz-lwtheme {
+ background-color: var(--lwt-accent-color);
+ background-image: var(--lwt-additional-images);
+ background-repeat: var(--lwt-background-tiling);
+ background-position: var(--lwt-background-alignment);
+}
+
+:root:not([tabsintitlebar]) #navigation-toolbox:-moz-lwtheme {
+ color: var(--toolbar-color, inherit);
+ background-color: var(--toolbar-bgcolor);
+}
+
+/* When a theme defines both theme_frame and additional_backgrounds, show
+ the latter atop the former. */
+:root[lwtheme-image] #navigation-toolbox,
+:root[lwtheme-image] #compose-toolbox {
+ background-image: var(--lwt-header-image), var(--lwt-additional-images);
+ background-repeat: no-repeat, var(--lwt-background-tiling);
+ background-position: right top, var(--lwt-background-alignment);
+}
+
+:root[tabsintitlebar] #navigation-toolbox:-moz-window-inactive:-moz-lwtheme,
+#compose-toolbox:-moz-window-inactive:-moz-lwtheme {
+ background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
+}
+
+#titlebar > #toolbar-menubar:-moz-window-inactive,
+#titlebar > #tabs-toolbar:-moz-window-inactive {
+ color: color-mix(in srgb, currentColor 70%, transparent);
+}
+
+.tree-columnpicker-button {
+ list-style-image: var(--icon-column-menu);
+ padding-inline: 4px;
+ border-style: none;
+ border-radius: 0;
+ -moz-context-properties: stroke, fill;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+.thread-tree-col-picker > image,
+.thread-tree-icon-header img {
+ -moz-context-properties: stroke, fill;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+treechildren::-moz-tree-row(selected, current, focus) {
+ outline: 1px solid color-mix(in srgb, var(--selected-item-color), black 10%);
+ outline-offset: -1px;
+}
+
+tree > treechildren::-moz-tree-row(hover) {
+ background-color: hsla(0, 0%, 50%, 0.15);
+}
+
+tree > treechildren::-moz-tree-row(selected) {
+ background-color: -moz-cellhighlight;
+}
+
+tree > treechildren::-moz-tree-row(selected, focus) {
+ background-color: var(--selected-item-color);
+}
+
+treechildren::-moz-tree-twisty {
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+ color: #505050;
+}
+
+@media (prefers-color-scheme: dark) {
+ treechildren::-moz-tree-twisty {
+ color: #d4d4d4;
+ }
+}
+
+treechildren::-moz-tree-twisty(selected, focus) {
+ stroke: var(--select-focus-text-color);
+}
+
+/* LW theme tree styling */
+:root[lwt-tree] #threadTree treechildren::-moz-tree-row(untagged, selected),
+:root[lwt-tree]:-moz-window-inactive #threadTree treechildren::-moz-tree-row(selected),
+:root[lwt-tree] tree:not(#threadTree) treechildren::-moz-tree-row(selected) {
+ border-color: var(--sidebar-highlight-background-color, hsla(0, 0%, 80%, .3));
+ background: var(--sidebar-highlight-background-color, hsla(0, 0%, 80%, .3));
+ outline: none;
+}
+
+:root[lwt-tree] treechildren::-moz-tree-row(current, focus) {
+ border-color: var(--sidebar-highlight-background-color, hsla(0,0%,80%,.6));
+}
+
+/* Dark theme adaptions */
+:root[lwt-tree-brighttext] #threadTree treechildren::-moz-tree-row(untagged, selected),
+:root[lwt-tree-brighttext]:-moz-window-inactive #threadTree treechildren::-moz-tree-row(selected),
+:root[lwt-tree-brighttext] tree:not(#threadTree) treechildren::-moz-tree-row(selected) {
+ border-color: var(--sidebar-highlight-background-color, rgba(249, 249, 250, .1));
+ background: var(--sidebar-highlight-background-color, rgba(249, 249, 250, .1));
+}
+
+:root[lwt-tree-brighttext] treechildren::-moz-tree-row(current, focus) {
+ border-color: var(--sidebar-highlight-background-color, rgba(249,249,250,.3));
+}
+
+:root[lwt-tree] #threadTree treechildren::-moz-tree-row(untagged, selected, focus, current),
+:root[lwt-tree] tree:not(#threadTree) treechildren::-moz-tree-row(selected, focus, current) {
+ border-color: var(--sidebar-highlight-border-color, var(--item-focus-selected-border-color));
+}
+
+/* toolbar */
+
+toolbar[type="menubar"][autohide="true"] {
+ overflow: hidden;
+}
+
+toolbar[type="menubar"][autohide="true"][inactive="true"]:not([customizing="true"]) {
+ min-height: 0 !important;
+ height: 0 !important;
+ appearance: none !important;
+}
+
+/* Show hidden toolbars in customize mode */
+toolbar[customizing="true"][collapsed="true"] {
+ visibility: visible;
+}
+
+/* toolbarbutton */
+
+.toolbarbutton-1 {
+ flex-direction: column;
+ margin: 4px 1px;
+ padding: 1px 5px !important;
+ -moz-context-properties: fill, stroke, fill-opacity;
+ fill: color-mix(in srgb, var(--toolbarbutton-icon-fill, currentColor) 20%, transparent);
+ stroke: var(--toolbarbutton-icon-fill, currentColor);
+ fill-opacity: var(--toolbarbutton-icon-fill-opacity);
+}
+
+.toolbarbutton-1,
+.toolbarbutton-menubutton-button {
+ min-height: 24px;
+ min-width: 32px;
+ margin: 4px 1px;
+ padding: 1px 5px !important;
+}
+
+:root[uidensity="touch"] .toolbarbutton-1:not([is="toolbarbutton-menu-button"]),
+:root[uidensity="touch"] .toolbarbutton-1 > .toolbarbutton-menubutton-button,
+:root[uidensity="touch"] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
+ padding: 5px !important;
+}
+
+.toolbarbutton-menubutton-button {
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+}
+
+toolbox[labelalign="end"] .toolbarbutton-1,
+toolbox[labelalign="end"] .toolbarbutton-menubutton-button,
+toolbox:not([mode="full"]) .toolbarbutton-1,
+toolbox:not([mode="full"]) .toolbarbutton-menubutton-button {
+ flex-direction: row;
+}
+
+/* Replicate the xul.css rule for when toolbar button icons are html:img instead
+ * of xul:image. */
+toolbar[mode="text"] .toolbarbutton-icon {
+ display: none;
+}
+
+toolbar[mode="full"] .toolbarbutton-1:not([hideWebExtensionLabel="true"]) {
+ min-width: 55px;
+}
+
+toolbar:not([mode="text"]) .toolbarbutton-1[hideWebExtensionLabel="true"] .toolbarbutton-text {
+ display: none;
+}
+
+#header-view-toolbar .toolbarbutton-1[hideWebExtensionLabel="true"] .toolbarbutton-text {
+ display: none;
+}
+
+.toolbarbutton-menubutton-dropmarker {
+ pointer-events: none;
+}
+
+.toolbarbutton-1:not([is="toolbarbutton-menu-button"]),
+.toolbarbutton-1 > .toolbarbutton-menubutton-button,
+.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
+ border: 1px solid transparent;
+ border-radius: var(--button-border-radius);
+ transition: background-color .15s, border-color .15s;
+}
+
+.toolbarbutton-1:not([disabled="true"]):is(:hover,[open="true"]) >
+.toolbarbutton-menubutton-button,
+.toolbarbutton-1:not([disabled="true"]):hover >
+.toolbarbutton-menubutton-dropmarker,
+.toolbarbutton-1:not([is="toolbarbutton-menu-button"],[disabled="true"],[checked="true"],[open="true"],:active):hover {
+ background-color: var(--toolbarbutton-hover-background);
+ border-color: var(--toolbarbutton-hover-bordercolor);
+ box-shadow: var(--toolbarbutton-hover-boxshadow);
+}
+
+.toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled="true"]):hover:active,
+.toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]),
+.toolbarbutton-1:not([is="toolbarbutton-menu-button"],[disabled="true"]):is([open="true"],[checked="true"],:hover:active) {
+ background-color: var(--toolbarbutton-checked-background);
+ border-color: var(--toolbarbutton-active-bordercolor);
+ box-shadow: var(--toolbarbutton-active-boxshadow);
+ transition-duration: 10ms;
+}
+
+.toolbarbutton-1:not([is="toolbarbutton-menu-button"],[disabled="true"]):hover:active,
+.toolbarbutton-1:not([is="toolbarbutton-menu-button"],[disabled="true"])[open="true"],
+.toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled="true"]):hover:active,
+.toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]) {
+ background-color: var(--toolbarbutton-active-background) !important;
+}
+
+.toolbarbutton-1[is="toolbarbutton-menu-button"] > .toolbarbutton-menubutton-button {
+ border-inline-end: none;
+ margin: 0;
+}
+
+.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
+ height: auto;
+ width: auto;
+ padding: 1px 5px;
+}
+
+.toolbarbutton-1 .toolbarbutton-menu-dropmarker,
+.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
+ list-style-image: var(--icon-nav-down-sm);
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+.toolbarbutton-1 .toolbarbutton-menu-dropmarker::part(icon),
+.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker::part(icon) {
+ width: 12px;
+}
+
+/* Separator between menu and split type buttons */
+.toolbarbutton-1:not(:hover,:active,[open],[checked]) >
+.toolbarbutton-menubutton-dropmarker::before,
+.toolbarbutton-1[disabled="true"] >
+.toolbarbutton-menubutton-dropmarker::before {
+ margin-inline: -6px 5px;
+}
+
+.toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(ltr),
+.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+.toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(rtl),
+.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(ltr) {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+toolbox[labelalign="end"] > toolbar[mode="full"] .toolbarbutton-1 .toolbarbutton-text {
+ padding-inline-start: 2px;
+}
+
+.toolbarbutton-1 .toolbarbutton-icon {
+ /* NOTE: At the moment, these rule can be applied to either xul:image elements
+ * (the plain toolbarbutton elements, defined in mozilla) or html:img
+ * elements (custom extensions in comm).
+ * The icon content is meant to be 16px by 16px, but xul:image sizing is
+ * essentially always border-box, and a content-box value would be ignored. We
+ * include this explicit border-box value for buttons that use a html:img
+ * icon.
+ * If all such icons become html:img elements, then it will be safe to use the
+ * default content-box sizing. */
+ box-sizing: border-box;
+ padding: 1px;
+ width: 18px;
+ height: 18px;
+}
+
+.toolbarbutton-menubutton-button > .toolbarbutton-icon {
+ padding: 1px;
+}
+
+/* Separator between menu and split type buttons */
+.toolbarbutton-1:not(:hover,:active,[open],[checked]) >
+.toolbarbutton-menubutton-dropmarker::before,
+.toolbarbutton-1[disabled="true"] >
+.toolbarbutton-menubutton-dropmarker::before {
+ content: "";
+ display: flex;
+ width: 1px;
+ height: 18px;
+ background-image: linear-gradient(currentColor 0, currentColor 100%);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 1px 18px;
+ opacity: .2;
+}
+
+toolbox:not([labelalign="end"]) > toolbar[mode="full"]
+ .toolbarbutton-1:not(.button-appmenu,[is="toolbarbutton-menu-button"])[type="menu"] {
+ padding-inline-end: 15px !important;
+ background-image: var(--icon-nav-down-sm);
+ background-size: 12px;
+ background-repeat: no-repeat;
+ background-position: calc(100% - 4px) center;
+}
+
+toolbox:not([labelalign="end"]) > toolbar[mode="full"]
+ .toolbarbutton-1:not(.button-appmenu,[is="toolbarbutton-menu-button"])[type="menu"]:-moz-locale-dir(rtl) {
+ background-position: 4px center;
+}
+
+toolbox:not([labelalign="end"]) > toolbar[mode="full"]
+ .toolbarbutton-1:not(.button-appmenu,[is="toolbarbutton-menu-button"])[type="menu"][disabled="true"] {
+ opacity: 0.4;
+}
+
+/* Don't set a reduced opacity because we set it on the whole button. */
+toolbox:not([labelalign="end"]) > toolbar[mode="full"]
+ .toolbarbutton-1:not(.button-appmenu,[is="toolbarbutton-menu-button"])[type="menu"][disabled="true"]
+ .toolbarbutton-icon,
+toolbox:not([labelalign="end"]) > toolbar[mode="full"]
+ .toolbarbutton-1:not(.button-appmenu,[is="toolbarbutton-menu-button"])[type="menu"][disabled="true"]
+ .toolbarbutton-text {
+ opacity: 1;
+}
+
+toolbox:not([labelalign="end"]) > toolbar[mode="full"]
+ .toolbarbutton-1:not(.button-appmenu,[is="toolbarbutton-menu-button"])[type="menu"] >
+ .toolbarbutton-menu-dropmarker {
+ display: none;
+}
+
+toolbar[brighttext] .toolbarbutton-1:not(:hover,:active,[open]) >
+ .toolbarbutton-menubutton-dropmarker::before {
+ opacity: .3;
+}
+
+#alltabs-button {
+ margin-block: 3px;
+}
+
+#palette-box .toolbarbutton-1 {
+ flex-direction: row;
+}
+
+description.error {
+ color: #f00;
+}
+
+.sidebar-header {
+ min-height: 25px;
+ text-shadow: none;
+}
+
+.sidebar-header > xul|label {
+ padding-inline-start: 4px;
+}
+
+menupopup,
+menubar {
+ font-size: inherit;
+}
+
+menulist {
+ min-height: 24px;
+ margin-block: 4px;
+ color: var(--button-text-color);
+ border: 1px solid var(--toolbarbutton-hover-bordercolor);
+ border-radius: var(--button-border-radius);
+ background-color: var(--toolbarbutton-hover-background);
+ box-shadow: var(--toolbarbutton-hover-boxshadow);
+ transition-property: background-color, border-color, box-shadow;
+ transition-duration: 150ms;
+}
+
+menulist:-moz-lwtheme {
+ color: inherit;
+}
+
+/* Override the not existing rule in menu.css */
+menulist[disabled="true"]:hover,
+menulist[open="true"]:hover {
+ background-color: var(--toolbarbutton-hover-background);
+}
+
+menulist:not([disabled="true"],[open="true"]):hover {
+ background-color: var(--toolbarbutton-active-background);
+ border-color: var(--toolbarbutton-active-bordercolor);
+}
+
+menulist[open="true"] {
+ background-color: var(--toolbarbutton-active-background);
+ border-color: var(--toolbarbutton-active-bordercolor);
+ box-shadow: var(--toolbarbutton-active-boxshadow);
+}
+
+menulist[disabled="true"] {
+ opacity: 0.6;
+}
+
+menulist::part(label-box) {
+ font-weight: inherit;
+}
+
+menulist::part(dropmarker-icon) {
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+ width: 16px;
+}
+
+menupopup.no-accel-menupopup > :is(menu, menuitem) > .menu-accel-container {
+ display: none;
+}
+
+/* NOTE: the menuitem children must be constructed with the menuitem-iconic
+ * class so that this rule can hide the icon container. */
+menupopup.no-icon-menupopup > :is(menu, menuitem) > .menu-iconic-left {
+ display: none;
+}
+
+/* Buttons */
+
+button,
+html|input[type="color"] {
+ appearance: none;
+ min-height: 24px;
+ min-width: 5.5em;
+ color: inherit;
+ border: 1px solid var(--button-border-color);
+ border-radius: var(--button-border-radius);
+ background: var(--button-background-color);
+ margin: 1px 5px;
+ padding: 0 4px;
+ box-shadow: none;
+}
+
+xul|button:is(:not([disabled="true"])):hover,
+html|button:is(:not([disabled])):hover {
+ border-color: var(--button-border-color);
+ background-color: var(--button-hover-background-color);
+}
+
+xul|button:is(:not([disabled="true"])):hover:active,
+html|button:is(:not([disabled])):hover:active,
+xul|button:is(:not([disabled="true"]))[open="true"],
+html|input[type="color"]:not([disabled="true"]):hover,
+html|input[type="color"]:not([disabled="true"]):hover:active {
+ border-color: var(--button-border-color);
+ background-color: var(--button-active-background-color);
+}
+
+html|input[type="color"] {
+ padding: 4px;
+}
+
+/* For buttons that wraps its content with no outline or background.
+ * NOTE: the hover background will still appear on hover. */
+button.plain-button {
+ /* grid display ensures the button only takes up the same room as its
+ * content. */
+ display: inline grid;
+ height: -moz-fit-content;
+ min-height: auto;
+ min-width: -moz-fit-content;
+ border: none;
+ background: none;
+}
+
+button.plain-button[hidden] {
+ display: none;
+}
+
+button[is="toolbarbutton-menu-button"] {
+ appearance: none;
+}
+
+button[is="toolbarbutton-menu-button"] > .button-box > button {
+ appearance: none;
+ min-width: 5.5em;
+ background: transparent;
+ border-color: transparent;
+ border-inline-end-color: var(--toolbarbutton-active-bordercolor);
+ margin-inline: -4px 5px;
+ padding: 0 4px;
+}
+
+button > .button-box > dropmarker {
+ appearance: none;
+ list-style-image: var(--icon-nav-down-sm);
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+img.invisible-on-broken:-moz-broken {
+ visibility: hidden;
+}
+
+.popup-notification-button {
+ height: auto;
+ border-style: none;
+ border-radius: 0;
+}
+
+#notification-popup-box {
+ display: flex;
+ align-items: center;
+ gap: 9px;
+}
+
+#notification-popup-box > .notification-anchor-icon {
+ width: 16px;
+ height: 16px;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, var(--toolbarbutton-icon-fill, currentColor) 20%, transparent);
+ stroke: var(--toolbarbutton-icon-fill, currentColor);
+ opacity: var(--toolbarbutton-icon-fill-opacity);
+}
+
+/* notification anchors should only be visible when their associated
+ notifications are */
+.notification-anchor-icon {
+ -moz-user-focus: normal;
+}
+
+.notification-anchor-icon:not([showing]) {
+ display: none;
+}
+
+.popup-notification-icon {
+ width: 32px;
+ height: 32px;
+ margin-inline-end: 12px;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+.popup-notification-icon[popupid="xpinstall-disabled"],
+.popup-notification-icon[popupid="addon-install-blocked"],
+.popup-notification-icon[popupid="addon-install-origin-blocked"] {
+ list-style-image: url(chrome://messenger/skin/icons/addon-install-blocked.svg);
+}
+
+.popup-notification-icon[popupid="addon-progress"] {
+ list-style-image: url(chrome://messenger/skin/icons/addon-install-downloading.svg);
+}
+
+.popup-notification-icon[popupid="addon-install-failed"] {
+ list-style-image: url(chrome://messenger/skin/icons/addon-install-error.svg);
+}
+
+.popup-notification-icon[popupid="addon-install-confirmation"] {
+ list-style-image: url(chrome://messenger/skin/icons/addon-install-confirm.svg);
+}
+
+#addon-install-confirmation-notification[warning]
+ .popup-notification-icon[popupid="addon-install-confirmation"] {
+ list-style-image: url(chrome://messenger/skin/icons/addon-install-warning.svg);
+}
+
+.popup-notification-icon[popupid="addon-install-complete"] {
+ list-style-image: url(chrome://messenger/skin/icons/addon-install-installed.svg);
+}
+
+.popup-notification-body[popupid="addon-progress"],
+.popup-notification-body[popupid="addon-install-confirmation"] {
+ width: 28em;
+ max-width: 28em;
+}
+
+.addon-install-confirmation-name {
+ font-weight: bold;
+}
+
+html|*.addon-webext-perm-list {
+ margin-block-end: 0;
+ padding-inline-start: 10px;
+}
+
+.addon-webext-perm-single-entry {
+ margin-top: 11px;
+}
+
+.addon-webext-perm-text,
+.addon-webext-perm-single-entry {
+ margin-inline-start: 0;
+}
+
+.popup-notification-description[popupid="addon-webext-permissions"],
+.popup-notification-description[popupid="addon-webext-permissions-notification"] {
+ margin-inline-start: -1px;
+}
+
+.addon-webext-perm-notification-content,
+.addon-installed-notification-content {
+ margin-top: 0;
+}
+
+#addon-webext-experiment-warning {
+ margin-top: 11px;
+ margin-inline-start: 0;
+}
+
+#addon-webext-perm-info {
+ margin-inline-start: 0;
+}
+
+#addon-progress-notification-progressmeter {
+ margin: 2px 4px;
+}
+
+.addon-webext-name {
+ display: inline;
+ font-weight: bold;
+ margin: 0;
+}
+
+html|ul.addon-installed-list {
+ margin-top: 0;
+}
+
+.chromeclass-toolbar {
+ overflow-x: hidden;
+}
+
+.chromeclass-toolbar toolbarseparator {
+ appearance: none;
+ min-width: 1px;
+ background-image: linear-gradient(
+ transparent 4px,
+ var(--toolbarseparator-color) 4px,
+ var(--toolbarseparator-color) calc(100% - 4px),
+ transparent calc(100% - 4px));
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+#tabpanelcontainer {
+ /* While mail tab browsers load, the window goes transparent. Stop that. */
+ background-color: -moz-Dialog;
+}
+
+.button-more {
+ list-style-image: var(--icon-more);
+}
+
+:root[lwt-tree] tree,
+:root[lwt-tree] #folderPaneHeader {
+ background-color: var(--sidebar-background-color);
+ color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree-brighttext] treechildren::-moz-tree-twisty {
+ color: #d4d4d4;
+}
+
+:root[lwt-tree] treechildren::-moz-tree-image,
+:root[lwt-tree] #threadTree treechildren::-moz-tree-cell-text(untagged),
+:root[lwt-tree] tree:not(#threadTree) treechildren::-moz-tree-cell-text {
+ color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] treechildren::-moz-tree-image(selected),
+:root[lwt-tree] #threadTree treechildren::-moz-tree-cell-text(untagged, selected),
+:root[lwt-tree] tree:not(#threadTree) treechildren::-moz-tree-cell-text(selected) {
+ color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
+}
+
+tree:-moz-lwtheme:not(:focus)
+ treechildren::-moz-tree-row(selected) {
+ --sidebar-highlight-background-color: hsla(0, 0%, 50%, 0.2);
+}
+
+:root[lwt-tree] tree:not(:focus) treechildren::-moz-tree-image(selected),
+:root[lwt-tree] #threadTree:not(:focus) treechildren::-moz-tree-cell-text(untagged, selected),
+:root[lwt-tree] tree:not(#threadTree,:focus) treechildren::-moz-tree-cell-text(selected) {
+ color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] treechildren::-moz-tree-line {
+ border-color: var(--sidebar-text-color);
+}
+
+:root[lwt-tree] treechildren::-moz-tree-line(selected, focus) {
+ border-color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
+}
+
+tree > treechildren::-moz-tree-row(dropOn) {
+ border-color: var(--selected-item-text-color);
+ background-color: var(--selected-item-color) !important;
+}
+
+tree > treechildren::-moz-tree-cell-text(primary, dropOn) {
+ color: var(--selected-item-text-color);
+}
+
+tree > treechildren::-moz-tree-image(primary, dropOn) {
+ fill: color-mix(in srgb, var(--selected-item-text-color) 20%, transparent);
+ stroke: var(--selected-item-text-color) !important;
+}
+
+:root:-moz-lwtheme treecol:not([hideheader="true"]),
+:root:-moz-lwtheme .tree-columnpicker-button:not([hideheader="true"]) {
+ appearance: none;
+ color: inherit;
+ background-color: transparent;
+ padding-block: 2px;
+ border-bottom: 1px solid color-mix(in srgb, var(--splitter-color,
+ hsla(0, 0%, 60%, 0.4)) 50%, transparent);
+}
+
+:root:-moz-lwtheme treecol {
+ border-inline-end: 1px solid color-mix(in srgb, var(--splitter-color,
+ hsla(0, 0%, 60%, 0.4)) 50%, transparent);
+}
+
+@media (prefers-color-scheme: dark) {
+ :root:-moz-lwtheme treecol,
+ :root:-moz-lwtheme .tree-columnpicker-button {
+ border-color: var(--splitter-color, rgba(249, 249, 250, 0.2));
+ }
+
+ :root:-moz-lwtheme treecol {
+ border-inline-end-color: var(--splitter-color, rgba(249, 249, 250, 0.2));
+ }
+}
+
+:root:-moz-lwtheme treecol:hover,
+:root:-moz-lwtheme .tree-columnpicker-button:hover {
+ background-color: hsla(0, 0%, 60%, 0.4);
+}
+
+@media (prefers-color-scheme: dark) {
+ :root:-moz-lwtheme treecol:hover,
+ :root:-moz-lwtheme .tree-columnpicker-button:hover {
+ background-color: rgba(249, 249, 250, 0.2);
+ }
+}
+
+.treecol-sortdirection {
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+.toolbarbutton-1:not(.qfb-tag-button),
+.toolbarbutton-menubutton-button {
+ color: inherit !important;
+}
+
+/* Don't show a menupopup in customize mode */
+toolbarpaletteitem menulist,
+toolbarpaletteitem toolbarbutton {
+ pointer-events: none;
+}
+
+/* throbber */
+
+#throbber-box {
+ margin: 0 3px;
+ /* Allow image to be center aligned vertically (when in the toolbar) or
+ * horizontally (when in the customize toolbar dialog). */
+ display: grid;
+}
+
+#throbber-box img {
+ width: 16px;
+ height: 16px;
+ align-self: center;
+ justify-self: center;
+}
+
+#throbber-box:not([busy="true"]) .animated-throbber-icon {
+ /* Hide the icon, but still occupy space in the toolbar. */
+ visibility: hidden;
+}
+
+/* When the throbber-box is wrapped by the customizeToolbar dialog, we show the
+ * static image. */
+#wrapper-throbber-box > #throbber-box .animated-throbber-icon {
+ display: none;
+}
+/* Else, we hide the static image. */
+:not(#wrapper-throbber-box) > #throbber-box .static-throbber-icon {
+ display: none;
+}
+
+/* Panels. */
+
+panelmultiview[transitioning] {
+ pointer-events: none;
+}
+
+.panel-viewcontainer {
+ overflow: hidden;
+}
+
+.panel-viewcontainer[panelopen] {
+ transition-property: height;
+ transition-timing-function: var(--animation-easing-function);
+ transition-duration: var(--panelui-subview-transition-duration);
+ will-change: height;
+}
+
+.panel-viewcontainer.offscreen {
+ display: block;
+}
+
+.panel-viewstack {
+ overflow: visible;
+ transition: height var(--panelui-subview-transition-duration);
+}
+
+/* Status panel */
+
+statuspanel {
+ position: fixed;
+ display: block;
+ left: 0;
+ bottom: 0;
+ z-index: 20;
+ max-width: 50%;
+ transition: opacity 120ms ease-out, visibility 120ms;
+}
+
+statuspanel:-moz-locale-dir(ltr)[mirror],
+statuspanel:-moz-locale-dir(rtl):not([mirror]) {
+ left: auto;
+ right: 0;
+}
+
+statuspanel[label=""],
+statuspanel:not([label]) {
+ opacity: 0;
+ pointer-events: none;
+ visibility: hidden;
+}
+
+.statuspanel-inner {
+ height: 3em;
+ align-items: flex-end;
+}
+
+.statuspanel-label {
+ display: inline-block;
+}
+
+:root[lwt-tree] .statuspanel-label {
+ background-color: var(--toolbar-field-background-color);
+ color: var(--toolbar-field-color);
+ border-color: var(--toolbar-field-border-color);
+}
+
+/* Status bar */
+
+.statusbar {
+ background-color: var(--layout-background-1);
+ border-top: 1px solid var(--splitter-color);
+ min-height: 22px;
+}
+
+#status-bar:-moz-lwtheme {
+ appearance: none;
+ background-repeat: no-repeat, var(--lwt-background-tiling);
+ background-position: bottom right, var(--lwt-background-alignment);
+ background-color: var(--lwt-accent-color);
+ background-image: var(--lwt-header-image), var(--lwt-additional-images);
+ color: var(--lwt-text-color);
+ border-top-color: var(--lwt-tabs-border-color);
+}
+
+@media (prefers-color-scheme: dark) {
+ .statusbar:-moz-lwtheme {
+ border-top-color: var(--lwt-accent-color);
+ }
+}
+
+#status-bar:-moz-lwtheme toolbarbutton {
+ color: var(--lwt-text-color, inherit);
+}
+
+.statusbarpanel {
+ padding: 0 4px;
+}
+
+label.statusbarpanel {
+ margin-block: 3px;
+ display: inline-block;
+}
+
+.statusbarpanel-progress {
+ align-items: center;
+}
+
+#dialog\.progress,
+#shutdown_progressmeter,
+.progressmeter-statusbar {
+ appearance: none;
+ height: 4px;
+ background-color: hsla(0, 0%, 60%, 0.2);
+ border-style: none;
+ border-radius: 2px;
+}
+
+#dialog\.progress::-moz-progress-bar,
+#shutdown_progressmeter::-moz-progress-bar,
+.progressmeter-statusbar::-moz-progress-bar {
+ appearance: none;
+ background-color: var(--primary);
+ border-radius: 2px;
+}
+
+#dialog\.progress:indeterminate::-moz-progress-bar,
+#shutdown_progressmeter:indeterminate::-moz-progress-bar,
+.progressmeter-statusbar:indeterminate::-moz-progress-bar {
+ /* Make a white reflecting animation.
+ Create a gradient with 2 identical pattern, and enlarge the size to 200%.
+ This allows us to animate background-position with percentage. */
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%,
+ rgba(255, 255, 255, 0.2) 25%,
+ rgba(255, 255, 255, 0.8) 50%,
+ rgba(255, 255, 255, 0.2) 75%,
+ rgba(255, 255, 255, 0.8) 100%);
+ background-size: 200% 100%;
+}
+
+@media (prefers-color-scheme: dark) {
+ #dialog\.progress:indeterminate::-moz-progress-bar,
+ #shutdown_progressmeter:indeterminate::-moz-progress-bar,
+ .progressmeter-statusbar:indeterminate::-moz-progress-bar {
+ background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%,
+ rgba(0, 0, 0, 0.1) 25%,
+ rgba(0, 0, 0, 0.5) 50%,
+ rgba(0, 0, 0, 0.1) 75%,
+ rgba(0, 0, 0, 0.5) 100%);
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ #dialog\.progress:indeterminate::-moz-progress-bar,
+ #shutdown_progressmeter:indeterminate::-moz-progress-bar,
+ .progressmeter-statusbar:indeterminate::-moz-progress-bar {
+ animation: progressSlideX 1.5s linear infinite;
+ }
+
+ @keyframes progressSlideX {
+ 0% {
+ background-position: 0 0;
+ }
+ 100% {
+ background-position: -100% 0;
+ }
+ }
+}
+
+/* online/offline icons */
+
+#offline-status {
+ padding: 0 2px;
+ list-style-image: var(--icon-online);
+ appearance: none;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+#offline-status[offline="true"] {
+ list-style-image: var(--icon-offline);
+}
+
+/* status bar adjustments */
+
+#quotaMeter {
+ min-width: 8em;
+ max-width: 8em;
+ height: 10px;
+ border: 1px solid var(--chrome-content-separator-color);
+}
+
+#quotaPercentageBar {
+ border-color: ThreeDShadow;
+}
+
+#quotaPanel ::-moz-progress-bar {
+ appearance: none;
+ background-color: #45a1ff;
+ opacity: .75;
+ border-radius: 0;
+}
+
+#quotaPanel.alert-warning ::-moz-progress-bar {
+ background-color: orange;
+}
+
+#quotaPanel.alert-critical ::-moz-progress-bar {
+ background-color: red;
+ opacity: .6;
+}
+
+#quotaLabel {
+ text-align: center;
+ font-size: 0.8rem;
+ text-decoration: none;
+ margin-top: -1px;
+}
+
+/* searchTermOverlay */
+@media (prefers-reduced-motion: no-preference) {
+ #searchTermList > richlistitem[highlight = "true"] {
+ animation: highlight .4s ease-in;
+ }
+
+ @keyframes highlight {
+ from { background-color: Highlight; }
+ to { background-color: transparent; }
+ }
+}
+
+#findbar-beforeReplaceSeparator {
+ height: 16px;
+}
+
+findbar {
+ background-color: var(--toolbar-bgcolor);
+ color: var(--toolbar-color);
+ border-top-color: var(--chrome-content-separator-color, ThreeDShadow);
+}
+
+findbar:-moz-lwtheme {
+ background-color: var(--lwt-accent-color);
+ background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images);
+ background-repeat: no-repeat, var(--lwt-background-tiling);
+ background-position: right bottom, var(--lwt-background-alignment);
+ background-position-y: bottom;
+}
+
+:root[lwtheme-image] findbar {
+ background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
+ var(--lwt-header-image), var(--lwt-additional-images);
+ background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling);
+ background-position: center, right bottom, var(--lwt-background-alignment);
+}
+
+/* Workaround until bug 1828322 is fixed */
+#messagepanebox > findbar {
+ color: var(--layout-color-1);
+ background-color: var(--layout-background-1);
+ border-top-color: var(--splitter-color);
+}
+
+#messagepanebox > findbar > .findbar-container {
+ min-width: 100px;
+}
+
+/* menupopup/panel */
+:is(panel, menupopup)::part(content) {
+ --panel-color: var(--layout-color-1);
+ --panel-background: var(--layout-background-1);
+ --panel-border-color: var(--layout-border-1);
+}
+
+/* Panel toolbarbuttons */
+
+.panelTitle {
+ margin-top: 8px;
+ margin-inline-start: 7px;
+ margin-bottom: 6px;
+}
+
+.panelButton {
+ appearance: none;
+ min-height: 24px;
+ padding: 4px 6px;
+ background-color: transparent;
+ -moz-context-properties: fill, fill-opacity;
+ fill: currentColor;
+ fill-opacity: var(--toolbarbutton-icon-fill-opacity);
+}
+
+.panelButton:focus {
+ outline: 0;
+}
+
+.panelButton:not([disabled],[open],:active):is(:hover,:focus-visible) {
+ background-color: var(--arrowpanel-dimmed);
+}
+
+.panelButton:not([disabled]):is([open],:hover:active) {
+ background-color: var(--arrowpanel-dimmed-further);
+ box-shadow: 0 1px 0 hsla(210, 4%, 10%, .03) inset;
+}
+
+.panelButton > .toolbarbutton-text {
+ text-align: start;
+ padding-inline-start: 6px;
+ padding-inline-end: 6px;
+}
+
+.panelButton[prettykey]::after {
+ content: attr(prettykey);
+ float: inline-end;
+ color: GrayText;
+}
+
+toolbarpaletteitem toolbarspacer,
+toolbarpaletteitem toolbarspring {
+ -moz-window-dragging: no-drag;
+}
+
+/* MailExtension panels */
+
+.mail-extension-panel {
+ font: menu;
+}
+
+/* Autocomplete labels
+ * These styles match those in chrome://calendar/content/calendar-event-dialog-attendees.css. */
+
+html|span.ac-emphasize-text {
+ font-weight: bold;
+}
+
+.autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) > .ac-url,
+.autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) > .ac-separator {
+ display: flex;
+}
+
+.autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) > .ac-url {
+ order: 1;
+}
+
+.autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) > .ac-separator {
+ order: 2;
+}
+
+.autocomplete-richlistitem[type$="-abook"]:not([ac-comment=""]) > .ac-title {
+ order: 3;
+}
+
+.ac-url-text {
+ max-width: unset !important;
+}
+
+/* Date/time picker anchor */
+.popup-anchor {
+ /* should occupy space but not be visible */
+ opacity: 0;
+ pointer-events: none;
+ position: absolute;
+}
+
+html|input[type="number"] {
+ margin: 2px 4px;
+}
+/* sizes: chars + 8px padding + 1px borders + spin buttons 14+0+10px */
+html|input[type="number"].size2 {
+ width: calc(2ch + 44px);
+}
+html|input[type="number"].size3 {
+ width: calc(3ch + 44px);
+}
+html|input[type="number"].size4 {
+ width: calc(4ch + 44px);
+}
+html|input[type="number"].size5 {
+ width: calc(5ch + 44px);
+}
+
+/* Fix the height of the print preview toolbar */
+#print-preview-toolbar {
+ max-height: 2.5em;
+}
+
+/* Toolbar customization */
+
+toolbar[customizing="true"] {
+ outline: 2px dashed var(--focus-outline-color);
+ outline-offset: -3px;
+ border-radius: 3px;
+}
+
+toolbarpaletteitem[type="spacer"][place="toolbar"],
+toolbarpaletteitem[type="spring"][place="toolbar"] {
+ align-items: center;
+}
+
+toolbarpaletteitem[type="spring"][place="toolbar"] {
+ flex: 1000 1000;
+}
+
+toolbarpaletteitem[type="spacer"][place="toolbar"] toolbarspacer,
+toolbarpaletteitem[type="spring"][place="toolbar"] toolbarspring {
+ height: 16px;
+ margin-inline: 6px;
+ opacity: 0.5;
+ border-inline: 2px solid currentColor;
+ background-image: linear-gradient(transparent calc(50% - 1px), currentColor calc(50% - 1px),
+ currentColor calc(50% + 1px), transparent calc(50% + 1px));
+}
+
+toolbarpaletteitem[type="separator"][place="palette"] toolbarseparator {
+ appearance: none;
+ width: 1px;
+ height: 50px;
+ background-color: currentColor;
+}
+
+toolbarpaletteitem[type="spacer"][place="palette"] toolbarspacer,
+toolbarpaletteitem[type="spring"][place="palette"] toolbarspring {
+ margin-bottom: 2px;
+ border: 1px solid currentColor;
+ background-color: hsla(0, 0%, 100%, .3) !important;
+}
+
+toolbarpaletteitem[type="spring"][place="palette"] toolbarspring {
+ background: url("chrome://messenger/skin/icons/spring.svg") no-repeat center;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+panel[type="arrow"].panel-block-padding::part(content) {
+ padding-block: 6px;
+}
+
+/* Used by the import dialog */
+.wizard-box {
+ padding: 20px 44px 10px;
+}
+
+.image-container > html|img {
+ width: 32px;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+.text-container description {
+ margin-block-end: 1em;
+}
+
+#viewSource-toolbox {
+ appearance: none;
+}
+
+/* Print UI, mostly from browser.css */
+
+.browserContainer,
+.browserStack {
+ flex: 10000 10000;
+}
+
+.printPreviewStack {
+ position: relative;
+}
+
+:is(browser, hbox, tabbox, vbox)[tabDialogShowing],
+:is(browser, hbox, tabbox, vbox)[tabDialogShowing] * {
+ -moz-user-focus: none !important;
+}
+
+.printSettingsBrowser {
+ width: 250px !important;
+}
+
+.previewStack {
+ background-color: #f9f9fa;
+ color: #0c0c0d;
+}
+
+.previewRendering {
+ background-repeat: no-repeat;
+ background-size: 60px 60px;
+ background-position: center center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ visibility: hidden;
+}
+
+.printPreviewBrowser {
+ visibility: collapse;
+ opacity: 1;
+}
+
+.previewStack[rendering=true] > .previewRendering,
+.previewStack[previewtype="source"] > .printPreviewBrowser[previewtype="source"],
+.previewStack[previewtype="selection"] > .printPreviewBrowser[previewtype="selection"],
+.previewStack[previewtype="simplified"] > .printPreviewBrowser[previewtype="simplified"] {
+ visibility: inherit;
+}
+
+.previewStack[rendering=true] > .printPreviewBrowser {
+ opacity: 0;
+}
+
+.print-pending-label {
+ margin-top: 110px;
+ font-size: large;
+}
+
+printpreview-pagination {
+ opacity: 0;
+}
+printpreview-pagination:focus-within,
+.previewStack:hover printpreview-pagination {
+ opacity: 1;
+}
+.previewStack[rendering=true] printpreview-pagination {
+ opacity: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+ .previewStack {
+ background-color: #2A2A2E;
+ color: rgb(249, 249, 250);
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .previewRendering {
+ background-image: url("chrome://messenger/skin/images/pendingpaint.png");
+ }
+
+ .printPreviewBrowser {
+ transition: opacity 60ms;
+ }
+
+ .previewStack[rendering=true] > .printPreviewBrowser {
+ transition: opacity 1ms 250ms;
+ }
+
+ printpreview-pagination {
+ transition: opacity 100ms 500ms;
+ }
+
+ printpreview-pagination:focus-within,
+ .previewStack:hover printpreview-pagination {
+ transition: opacity 100ms;
+ }
+}
+
+.dialogStack {
+ /* Should outrank the z-index values of other UI elements, particularly the devtools
+ splitter element. */
+ z-index: 11;
+ position: absolute;
+ inset: 0 0 0 0;
+}
+
+.dialogStack.temporarilyHidden {
+ /* For some printing use cases we need to visually hide the dialog before
+ * actually closing it / make it disappear from the frame tree. */
+ visibility: hidden;
+}
+
+.dialogOverlay {
+ visibility: hidden;
+}
+
+.dialogOverlay[topmost="true"] {
+ z-index: 1;
+}
+
+.dialogBox {
+ background-clip: content-box;
+ box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
+ display: flex;
+ margin: 0;
+ padding: 0;
+ overflow-x: auto;
+ border-radius: 8px;
+}
+
+.dialogBox[resizable="true"] {
+ resize: both;
+ overflow: hidden;
+ min-height: 20em;
+}
+
+.dialogBox[sizeto="available"] {
+ --box-inline-margin: 4px;
+ --box-block-margin: 4px;
+ --box-ideal-width: 1000;
+ --box-ideal-height: 650;
+ --box-max-width-margin: calc(100vw - 2 * var(--box-inline-margin));
+ --box-max-height-margin: calc(100vh - var(--box-top-px) - var(--box-block-margin));
+ --box-max-width-ratio: 70vw;
+ --box-max-height-ratio: calc(var(--box-ideal-height) / var(--box-ideal-width) * var(--box-max-width-ratio));
+ max-width: min(max(var(--box-ideal-width) * 1px, var(--box-max-width-ratio)), var(--box-max-width-margin));
+ max-height: min(max(var(--box-ideal-height) * 1px, var(--box-max-height-ratio)), var(--box-max-height-margin));
+ width: 100vw;
+ height: 85vh; /* This is 100vh in Firefox but we have less space to work with. */
+}
+
+@media (min-width: 550px) {
+ .dialogBox[sizeto="available"] {
+ --box-inline-margin: min(calc(4px + (100vw - 550px) / 4), 16px);
+ }
+}
+
+@media (min-width: 800px) {
+ .dialogBox[sizeto="available"] {
+ --box-inline-margin: min(calc(16px + (100vw - 800px) / 4), 32px);
+ }
+}
+
+@media (min-height: 350px) {
+ .dialogBox[sizeto="available"] {
+ --box-block-margin: min(calc(4px + (100vh - 350px) / 4), 16px);
+ }
+}
+
+@media (min-height: 550px) {
+ .dialogBox[sizeto="available"] {
+ --box-block-margin: min(calc(16px + (100vh - 550px) / 4), 32px);
+ }
+}
+
+:not(.content-prompt-dialog) > .dialogOverlay > .dialogBox {
+ /* Make dialogs overlap with upper chrome UI. */
+ margin-top: 5px;
+}
+
+.dialogOverlay[topmost="true"] {
+ background-color: rgba(28, 27, 34, 0.45);
+}
diff --git a/comm/mail/themes/shared/mail/messengercompose.css b/comm/mail/themes/shared/mail/messengercompose.css
new file mode 100644
index 0000000000..1c599c1d06
--- /dev/null
+++ b/comm/mail/themes/shared/mail/messengercompose.css
@@ -0,0 +1,1485 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+ --lwt-additional-images: none;
+ --lwt-background-alignment: right top;
+ --lwt-background-tiling: no-repeat;
+ --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
+ --toolbar-color: var(--toolbar-non-lwt-textcolor);
+ --autocomplete-box-padding: 3px;
+ --autocomplete-item-padding: 3px;
+ --autocomplete-item-radius: var(--button-border-radius);
+}
+
+:root[uidensity="compact"] {
+ --autocomplete-box-padding: 0;
+ --autocomplete-item-padding: 0;
+ --autocomplete-item-radius: 0;
+}
+
+:root[uidensity="touch"] {
+ --autocomplete-item-padding: 8px 3px;
+}
+
+#contactsSidebar .sidebar-header {
+ appearance: none;
+ height: 30px;
+ text-shadow: none;
+ background-color: -moz-Dialog;
+ background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
+ color: -moz-dialogText;
+ border-bottom: 1px solid var(--lwt-tabs-border-color);
+}
+
+:root[lwt-tree] #contactsSidebar .sidebar-header {
+ background-color: var(--toolbar-bgcolor);
+ color: var(--lwt-text-color);
+ border-bottom: 1px solid var(--lwt-tabs-border-color);
+}
+
+:root[lwt-tree-brighttext] #contactsSidebar .sidebar-header {
+ background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
+}
+
+#contactsSidebar toolbarbutton.close-icon {
+ margin-inline-end: 3px;
+}
+
+/* Styles for the default system dark theme */
+
+:root[lwt-tree] :is(#MsgHeadersToolbar, #FormatToolbox) {
+ background-color: var(--toolbar-bgcolor) !important;
+ color: var(--lwt-text-color);
+}
+
+:root[lwt-tree] panel[type="autocomplete-richlistbox"] {
+ margin-top: -1px;
+ padding: 2px 0;
+ --panel-background: var(--arrowpanel-background);
+ --panel-color: var(--arrowpanel-color);
+ --panel-border-color: var(--arrowpanel-border-color);
+}
+
+:root[lwt-tree] .autocomplete-richlistbox {
+ color: inherit;
+ background-color: inherit;
+}
+
+:root[lwt-tree] .autocomplete-richlistitem[selected] {
+ background-color: var(--autocomplete-popup-highlight-background);
+ color: var(--autocomplete-popup-highlight-color);
+}
+
+.autocomplete-richlistbox {
+ padding: var(--autocomplete-box-padding);
+}
+
+.autocomplete-richlistitem {
+ padding: var(--autocomplete-item-padding);
+ border-radius: var(--autocomplete-item-radius);
+}
+
+#attachmentBucket {
+ grid-area: attachment-list;
+ border-block: 1px solid var(--splitter-color); /* The same color as the splitters */
+ padding: 1px;
+}
+
+:root[lwt-tree] #attachmentArea > summary {
+ background-color: var(--toolbar-bgcolor);
+ color: var(--toolbar-color);
+}
+
+#attachmentArea > summary {
+ grid-area: attachment-header;
+ padding: 6px;
+ /* Position self for the #newAttachmentIndicator. */
+ position: relative;
+ display: flex;
+ gap: 6px;
+ align-items: baseline;
+}
+
+#attachmentArea > summary > * {
+ flex: 0 0 auto;
+}
+
+#attachmentArea > summary:focus-visible {
+ outline-style: auto;
+ outline-offset: -1px;
+}
+
+#newAttachmentIndicator {
+ color: var(--selected-item-text-color);
+ background-color: var(--selected-item-color);
+ font-size: 0.85em;
+ padding: 2px 5px;
+ border-radius: 10px;
+ font-weight: 600;
+ position: absolute;
+ inset-inline-start: 3px;
+ z-index: 9;
+ opacity: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .is_animating {
+ animation: new-attachment 1s steps(30) 1;
+ }
+
+ @keyframes new-attachment {
+ 0% {
+ opacity: 0;
+ margin-block-start: 0;
+ }
+ 50% {
+ opacity: 1;
+ margin-block-start: -50px;
+ }
+ 100% {
+ opacity: 0;
+ margin-block-start: -100px;
+ }
+ }
+
+ #attachmentToggle {
+ transition: transform 200ms ease;
+ }
+}
+
+#attachmentToggle {
+ align-self: center;
+ color: inherit;
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+ fill-opacity: 1;
+}
+
+#attachmentArea:not([open]) #attachmentToggle {
+ transform: rotate(-90deg);
+}
+
+#attachmentArea:-moz-locale-dir(rtl):not([open]) #attachmentToggle {
+ transform: rotate(90deg);
+}
+
+#attachmentBucketCount {
+ text-overflow: ellipsis;
+ /* Required for text-overflow to do anything */
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+#attachmentBucketSize {
+ color: var(--selected-item-text-color);
+ background-color: var(--selected-item-color);
+ font-size: 0.85em;
+ line-height: 1em;
+ padding: 3px 5px;
+ border-radius: 10px;
+ font-weight: 500;
+}
+
+.drop-attachment-overlay {
+ --overlay-color: #fff;
+ --overlay-backround: rgba(0, 0, 0, 0.5);
+ --drop-attachment-box-color: #222;
+ --drop-attachment-box-border-color: rgba(255, 255, 255, 0.85);
+ --drop-attachment-box-background-hover: rgba(255, 255, 255, 0.5);
+ --drop-attachment-box-border-color-hover: #fff;
+ --drop-attachment-title-background: rgba(255, 255, 255, 0.85);
+}
+
+:root[lwt-tree-brighttext] .drop-attachment-overlay {
+ --drop-attachment-box-color: #cbcbcb;
+ --drop-attachment-box-border-color: #999;
+ --drop-attachment-box-background-hover: rgba(0, 0, 0, 0.5);
+ --drop-attachment-box-border-color-hover: #fff;
+ --drop-attachment-title-background: rgba(0, 0, 0, 0.85);
+}
+
+.drop-attachment-overlay {
+ pointer-events: none;
+ position: fixed;
+ z-index: 12; /* above the attachment bucket splitter */
+ background-color: var(--overlay-backround);
+ color: var(--overlay-color);
+ inset: 0;
+ padding: 30px;
+ display: none;
+ justify-content: space-around;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ @keyframes hiding-animation {
+ 0% { opacity: 1; }
+ 100% { opacity: 0; }
+ }
+ @keyframes showing-animation {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+ }
+
+ .drop-attachment-box {
+ transition: color 120ms ease, background-color 120ms ease, border 120ms ease;
+ }
+
+ .drop-attachment-box span {
+ transition: background-color 120ms ease;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ /*
+ * Redefine these animations but without any visible transition as we still
+ * need the timing for the animationend JavaScript event.
+ */
+ @keyframes hiding-animation {
+ 0% { opacity: 1; }
+ 100% { opacity: 1; }
+ }
+ @keyframes showing-animation {
+ 0% { opacity: 1; }
+ 100% { opacity: 1; }
+ }
+}
+
+.drop-attachment-overlay.hiding {
+ animation: hiding-animation 120ms ease 1;
+}
+
+.drop-attachment-overlay.showing {
+ display: flex;
+ animation: showing-animation 120ms ease 1;
+}
+
+.drop-attachment-overlay.show {
+ display: flex;
+}
+
+.drop-attachment-box {
+ pointer-events: auto;
+ font-size: 1.4rem;
+ font-weight: 600;
+ color: var(--drop-attachment-box-color);
+ border-radius: 15px;
+ border: 4px dashed var(--drop-attachment-box-border-color);
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.drop-attachment-box:not(.hidden) + .drop-attachment-box {
+ margin-inline-start: 30px;
+}
+
+.drop-attachment-box span {
+ pointer-events: none;
+ -moz-context-properties: fill;
+ fill: currentColor;
+ padding-inline: 25px 6px;
+ border-radius: 3px;
+ background-color: var(--drop-attachment-title-background);
+ background-position: 6px center;
+ background-repeat: no-repeat;
+ background-size: 16px;
+}
+
+.drop-attachment-box span:-moz-locale-dir(rtl) {
+ background-position-x: right 6px;
+}
+
+.drop-attachment-box .drop-as-attachment {
+ background-image: url("chrome://messenger/skin/icons/attach.svg");
+}
+
+.drop-attachment-box .drop-inline {
+ background-image: url("chrome://messenger/skin/icons/image.svg");
+}
+
+.drop-attachment-box.hidden {
+ display: none;
+}
+
+.drop-attachment-box.hover {
+ border-color: var(--drop-attachment-box-border-color-hover);
+ border-style: solid;
+ background-color: var(--drop-attachment-box-background-hover);
+}
+
+.drop-attachment-box.hover span {
+ background-color: transparent;
+}
+
+.add-attachment-label {
+ -moz-context-properties: fill;
+ fill: currentColor;
+ background: url("chrome://messenger/skin/icons/attach.svg") left center no-repeat;
+ background-size: contain;
+ padding-inline-start: 25px;
+}
+
+#compose-toolbox > toolbar {
+ /* force iconsize="small" on these toolbars */
+ counter-reset: smallicons;
+ background-color: var(--toolbar-bgcolor);
+}
+
+#compose-toolbox:-moz-lwtheme {
+ appearance: none;
+ position: relative;
+ color: var(--toolbar-color, inherit);
+}
+
+#compose-toolbox:-moz-lwtheme::after {
+ content: "";
+ display: block;
+ position: absolute;
+ pointer-events: none;
+ top: -1px;
+ width: -moz-available;
+ height: 1px;
+ border-bottom: 1px solid var(--lwt-tabs-border-color, transparent);
+}
+
+#composeToolbar2 {
+ padding-inline: 3px;
+}
+
+#composeContentBox {
+ /* In order to remove the shadow border on left/right edges elegantly, use
+ * left/right margins of -3px. We make up for this by adding 3px of padding
+ * instead. */
+ margin-inline: -3px;
+ padding-inline: 3px;
+ display: grid;
+ grid-template: "contacts contacts-splitter headers" minmax(auto, var(--headersSplitter-height))
+ "contacts contacts-splitter format-toolbar" min-content
+ "contacts contacts-splitter headers-splitter" min-content
+ "contacts contacts-splitter message" minmax(33%, 1fr)
+ "contacts contacts-splitter attachment-splitter" min-content
+ "contacts contacts-splitter attachment-header" min-content
+ "contacts contacts-splitter attachment-list" var(--attachment-list-track-size)
+ / minmax(auto, var(--contactsSplitter-width)) min-content minmax(auto, 1fr);
+ /* If the splitter is not used, the header and attachment areas will try and
+ * grow to their content size. */
+ --headersSplitter-height: min-content;
+ --attachmentSplitter-height: min-content;
+ --contactsSplitter-width: 200px;
+ /* NOTE: We specify the sizing of the attachment list using a variable because
+ * when the attachment area is hidden or the attachment list is closed, we
+ * want to adjust the sizing so that we can ignore the splitter height. */
+ --attachment-list-track-size: minmax(auto, var(--attachmentSplitter-height));
+ /* The parent body uses the -moz-box display, which does not take into account
+ * the natural minimum height this element can take due to its grid display.
+ * So we need to explicitly set the minimum height so that the body's layout
+ * will properly resize this element to the available space.
+ * TODO: Remove these rules when the body uses a standard CSS display. */
+ min-height: 0;
+ flex: 1;
+ overflow: clip;
+}
+
+#contactsSidebar {
+ grid-area: contacts;
+ box-sizing: border-box;
+ min-width: 150px;
+ max-width: 400px;
+ display: flex;
+ flex-direction: column;
+}
+
+#contactsSidebar .sidebar-header {
+ flex: 0 0 auto;
+}
+
+#contactsBrowser {
+ flex: 1 1 auto;
+}
+
+#contactsSidebar.collapsed-by-splitter {
+ display: none;
+}
+
+#contactsSplitter {
+ grid-area: contacts-splitter;
+}
+
+#contactsSplitter.splitter-collapsed {
+ /* The splitter cannot be un-collapsed using a mouse drag. */
+ display: none;
+}
+
+#MsgHeadersToolbar {
+ grid-area: headers;
+}
+
+#FormatToolbox {
+ appearance: none;
+ grid-area: format-toolbar;
+}
+
+#headersSplitter {
+ grid-area: headers-splitter;
+}
+
+#messageArea {
+ grid-area: message;
+ display: flex;
+ flex-direction: column;
+}
+
+#messageEditor {
+ flex: 1 1 0;
+ min-height: 0;
+}
+
+#FindToolbar {
+ flex: 0 0 auto;
+}
+
+@media (prefers-color-scheme: dark) {
+ #messageArea {
+ background-color: #2a2a2e;
+ }
+}
+
+#attachmentSplitter {
+ grid-area: attachment-splitter;
+}
+
+#attachmentArea {
+ /* Children are grid items. */
+ display: contents;
+}
+
+/* When the attachment area is hidden, or the visibility of the attachmentBucket
+ * is toggled by the summary element. */
+#composeContentBox:is(.attachment-area-hidden, .attachment-bucket-closed) {
+ /* We adjust the track sizing so it no longer takes up any grid space. */
+ --attachment-list-track-size: 0;
+}
+
+#composeContentBox.attachment-bucket-closed #attachmentSplitter {
+ /* NOTE: When the bucket is closed, we do not consider it "collapsed" by the
+ * splitter. It was closed by the attachmentArea's summary, not the splitter.
+ * Moreover, it cannot be un-collapsed by the splitter either.
+ * Instead, we want to simply stop the splitter from resizing by making it
+ * non-interactive. We keep the splitter visible though as it still acts as a
+ * barrier between the message body and the attachment area. */
+ pointer-events: none;
+}
+
+#composeContentBox.attachment-area-hidden #attachmentSplitter {
+ /* We completely hide the splitter when the attachment area is hidden. */
+ display: none;
+}
+
+#composeContentBox.attachment-area-hidden #attachmentArea {
+ display: none;
+}
+
+#composeContentBox.attachment-bucket-closed #attachmentBucket {
+ display: none;
+}
+
+/* :::: primary toolbar buttons :::: */
+
+#button-send {
+ list-style-image: var(--icon-sent);
+}
+
+#button-contacts {
+ list-style-image: var(--icon-address-book);
+}
+
+#spellingButton {
+ list-style-image: var(--icon-spelling);
+}
+
+#button-attach {
+ list-style-image: var(--icon-attachment);
+}
+
+#button-encryption {
+ list-style-image: var(--icon-lock-disabled);
+}
+
+#button-encryption[checked] {
+ list-style-image: var(--icon-lock);
+}
+
+#button-encryption-options {
+ list-style-image: var(--icon-shield);
+}
+
+#button-signing {
+ list-style-image: var(--icon-ribbon);
+}
+
+#button-save {
+ list-style-image: var(--icon-download);
+}
+
+#quoteButton {
+ list-style-image: var(--icon-quote);
+}
+
+#button-returnReceipt {
+ list-style-image: var(--icon-receipt);
+}
+
+#cut-button {
+ list-style-image: var(--icon-cut);
+}
+
+#copy-button {
+ list-style-image: var(--icon-copy);
+}
+
+#paste-button {
+ list-style-image: var(--icon-paste);
+}
+
+#button-print {
+ list-style-image: var(--icon-print);
+}
+
+.menu-description,
+menulist::part(description) {
+ font-style: italic;
+ opacity: 0.55;
+ margin-inline: 1ex !important;
+}
+
+.aw-firstColBox {
+ /* aw-firstColBox inline padding (4px + 4px) + remove-field-button inline
+ * padding (2px + 2px) + img width (16px) */
+ padding: 0 4px;
+ width: 28px;
+}
+
+.aw-firstColBox,
+#identityLabel-box {
+ flex-shrink: 0;
+}
+
+/* :::: Format toolbar :::: */
+
+#FormatToolbar:not([hidden="true"]) {
+ display: flex;
+}
+
+/*
+ * Removed from global.css in bug 1484949. It's needed so the formatting
+ * toolbar is not disabled while a dropdown (paragraph format or font) is active.
+ */
+.toolbar-focustarget {
+ -moz-user-focus: ignore !important;
+}
+
+#ParagraphSelect {
+ flex-shrink: 0.1;
+ min-width: 7em;
+}
+
+#FontFaceSelect {
+ flex-shrink: 2;
+ min-width: 7em;
+}
+
+#FormatToolbar > menulist {
+ margin-block: 1px;
+}
+
+#FormatToolbar > menulist:not(:hover) {
+ background: transparent;
+}
+
+#FormatToolbar > menulist::part(label-box) {
+ text-shadow: none;
+}
+
+#FormatToolbar > menulist:not([disabled="true"],[open="true"]):hover {
+ background: var(--toolbarbutton-hover-background);
+}
+
+#FormatToolbar > menulist[open="true"] {
+ background: var(--toolbarbutton-active-background);
+ border-color: var(--toolbarbutton-active-bordercolor);
+}
+
+#FormatToolbar > toolbarbutton > .toolbarbutton-text {
+ display: none;
+}
+
+toolbarbutton.formatting-button {
+ appearance: none;
+ border: 1px solid transparent;
+ border-radius: var(--button-border-radius);
+ color: inherit;
+ -moz-context-properties: fill;
+ fill: currentColor;
+ transition-property: background-color, border-color, box-shadow;
+ transition-duration: 150ms;
+}
+
+toolbarbutton.formatting-button:not([disabled="true"]):hover {
+ background: var(--toolbarbutton-hover-background);
+ border-color: var(--toolbarbutton-hover-bordercolor);
+ box-shadow: var(--toolbarbutton-hover-boxshadow);
+}
+
+toolbarbutton.formatting-button:not([disabled="true"]):is([open="true"],[checked="true"],:hover:active) {
+ background: var(--toolbarbutton-checked-background);
+ border-color: var(--toolbarbutton-active-bordercolor);
+ box-shadow: var(--toolbarbutton-active-boxshadow);
+}
+
+toolbarbutton.formatting-button:not([disabled="true"]):is([open="true"],:hover:active) {
+ background: var(--toolbarbutton-active-background) !important;
+}
+
+.formatting-button > .toolbarbutton-menu-dropmarker {
+ list-style-image: url("chrome://messenger/skin/messengercompose/format-dropmarker.svg");
+ -moz-context-properties: fill;
+ fill: currentColor;
+ display: inline-flex;
+}
+
+toolbarbutton.formatting-button[disabled="true"] > .toolbarbutton-icon,
+.formatting-button[disabled="true"] > .toolbarbutton-menu-dropmarker {
+ opacity: 0.4;
+}
+
+#FontFaceSelect {
+ max-width: 35ch;
+}
+
+/* ..... fg/bg color picker ..... */
+
+#ColorButtons {
+ margin-inline: 3px 4px;
+}
+
+.color-button {
+ border: 1px solid var(--toolbarbutton-active-bordercolor);
+ padding: 0;
+ width: 18px;
+ height: 15px;
+ margin: 2px;
+}
+
+.color-button[disabled="true"] {
+ opacity: 0.5;
+}
+
+.ColorPickerLabel {
+ border: 1px inset ThreeDFace;
+ margin: 0;
+ padding: 2px;
+}
+
+#TextColorButton {
+ margin-block: 2px 9px;
+ margin-inline: 2px 9px;
+}
+
+#TextColorButton[color="mixed"] {
+ background-image: url("chrome://messenger/skin/icons/multicolor.png");
+ background-size: cover;
+}
+
+#BackgroundColorButton {
+ margin-block: 9px 2px;
+ margin-inline: 9px 2px;
+}
+
+/* :::: Reorder Attachments Panel :::: */
+
+#reorderAttachmentsPanel::part(content) {
+ --panel-padding: 4px;
+}
+
+#btn_moveAttachmentFirst {
+ list-style-image: url("chrome://messenger/skin/icons/move-first.svg");
+}
+
+#btn_moveAttachmentLeft {
+ list-style-image: url("chrome://messenger/skin/icons/move-left.svg");
+}
+
+#btn_moveAttachmentRight {
+ list-style-image: url("chrome://messenger/skin/icons/move-right.svg");
+}
+
+#btn_moveAttachmentLast {
+ list-style-image: url("chrome://messenger/skin/icons/move-last.svg");
+}
+
+#btn_moveAttachmentBundleUp {
+ list-style-image: url("chrome://messenger/skin/icons/move-together.svg");
+}
+
+#btn_sortAttachmentsToggle {
+ list-style-image: url("chrome://messenger/skin/icons/sort.svg");
+}
+
+#btn_sortAttachmentsToggle[sortdirection="descending"] > .toolbarbutton-icon {
+ transform: scaleY(-1);
+}
+
+.autocomplete-richlistitem:hover {
+ background-color: var(--arrowpanel-dimmed);
+}
+
+.autocomplete-richlistitem[selected] {
+ background-color: var(--selected-item-color);
+ color: var(--selected-item-text-color);
+}
+
+/* :::: autocomplete icons :::: */
+
+.autocomplete-richlistitem > .ac-site-icon {
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+.autocomplete-richlistitem[type="local-abook"] > .ac-site-icon {
+ list-style-image: var(--icon-address-book);
+}
+
+.autocomplete-richlistitem[type="remote-abook"] > .ac-site-icon {
+ list-style-image: var(--icon-globe);
+}
+
+.autocomplete-richlistitem[type="remote-err"] > .ac-site-icon {
+ list-style-image: var(--icon-error-circle);
+}
+
+.autocomplete-richlistitem[type="subscribed-news-abook"] > .ac-site-icon {
+ list-style-image: var(--icon-newsletter);
+}
+
+/* :::: attachment notification :::: */
+
+#compose-notification-bottom > .notificationbox-stack {
+ background-color: var(--toolbar-field-focus-background-color);
+}
+
+#attachmentReminderText {
+ margin-inline-start: 0;
+ cursor: pointer;
+}
+
+#attachmentKeywords {
+ font-weight: bold;
+ margin-inline-start: 0;
+ text-decoration: underline;
+ cursor: pointer;
+}
+
+#identityLabel,
+.address-label-container label {
+ margin-inline-end: 6px;
+ text-align: right;
+}
+
+#top-gradient-box.address-identity-recipient {
+ overflow: hidden;
+}
+
+#msgIdentity {
+ flex: 0 1 auto;
+ overflow: hidden;
+ appearance: none;
+ align-items: center;
+ font: inherit;
+ margin-inline: 4px 10px;
+ border: 1px solid transparent;
+ border-radius: var(--button-border-radius);
+ background-color: transparent;
+ transition: border .2s, box-shadow .2s, background-color .2s;
+}
+
+/* XUL element needs the full [disabled="true"] attribute. */
+#msgIdentity[disabled="true"] {
+ opacity: 0.6;
+}
+
+#msgIdentity:-moz-locale-dir(rtl) {
+ background-position: 5px;
+}
+
+#extraAddressRowsArea {
+ /* Contains the main recipient buttons, plus the button to reveal the
+ * overflow. */
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-inline-end: 6px;
+}
+
+#extraAddressRowsArea > * {
+ flex: 0 0 auto;
+}
+
+#extraAddressRowsArea.addressingWidget-separator::before {
+ display: block;
+ content: '';
+ width: 1px;
+ border-inline-start: 1px solid var(--toolbarbutton-hover-bordercolor);
+ height: 14px;
+}
+
+#msgIdentity::part(text-input) {
+ border-style: none;
+ outline-style: none;
+ margin-inline: 1px;
+}
+
+#msgIdentityPopup > menuitem[selected="true"] {
+ background-color: var(--autocomplete-popup-highlight-background);
+ color: var(--autocomplete-popup-highlight-color);
+}
+
+#msgSubjectContainer {
+ position: relative;
+}
+
+#msgEncryptedSubjectIcon {
+ position: absolute;
+ top: 8px;
+ inset-inline-start: 10px;
+}
+
+#msgSubject {
+ appearance: none;
+ margin-top: 0;
+ margin-inline: 4px 8px;
+ background-color: Field;
+ border: 1px solid var(--toolbarbutton-hover-bordercolor);
+ border-radius: var(--button-border-radius);
+ padding-block: 0;
+ padding-inline: 4px 2px;
+ transition: border .2s, box-shadow .2s;
+}
+
+#msgSubject.with-icon {
+ padding-inline-start: 25px;
+}
+
+.recipients-container {
+ display: block;
+ overflow-y: auto;
+}
+
+:root[lwt-tree] #msgSubject,
+:root[lwt-tree] .address-container {
+ background-color: var(--toolbar-field-background-color);
+ color: var(--lwt-text-color);
+}
+
+.address-row {
+ display: flex;
+ flex: 1;
+ margin-block: 6px;
+ margin-inline-end: 8px;
+ align-items: self-start;
+}
+
+.address-row > .aw-firstColBox {
+ transition: opacity .2s ease;
+ opacity: 0;
+ flex: 0 0 auto;
+ align-self: center;
+}
+
+.address-row:hover > .aw-firstColBox,
+.address-row:focus > .aw-firstColBox,
+.address-row:focus-within > .aw-firstColBox {
+ opacity: 1;
+}
+
+.address-row > .address-label-container {
+ flex: 0 0 auto;
+}
+
+.address-row > .address-container {
+ flex: 1 1 auto;
+}
+
+.address-row.hidden {
+ display: none;
+}
+
+.address-container {
+ margin-inline-start: 4px;
+ margin-inline-end: 0;
+ border: solid 1px var(--toolbarbutton-hover-bordercolor);
+ border-radius: var(--button-border-radius);
+ background-color: Field;
+ transition: border .2s, box-shadow .2s;
+ cursor: text;
+}
+
+.address-container.disable-container {
+ opacity: 0.9;
+}
+
+.address-input {
+ color: inherit;
+ outline: none;
+}
+
+.address-container > .address-input {
+ padding-block: 4px;
+}
+
+.address-container > .address-input:focus {
+ outline: none;
+}
+
+.address-pill {
+ display: flex;
+ align-items: center;
+ border-radius: var(--button-border-radius);
+ margin-inline-end: 3px;
+ margin-block: 2px;
+ padding-inline: 7px;
+ background-color: rgba(0,0,0,0.1);
+ transition: color .2s ease, background-color .2s ease, box-shadow .2s ease,
+ text-shadow .2s ease;
+ -moz-user-focus: normal;
+ cursor: default;
+ box-shadow: inset 0 0 0 1px transparent;
+}
+
+.address-pill label {
+ -moz-user-focus: none;
+ cursor: default;
+ margin-inline: 0;
+}
+
+.address-pill label,
+.address-pill hbox {
+ pointer-events: none;
+}
+
+.address-pill hbox:not([hidden="true"]) {
+ display: flex;
+}
+
+.address-pill:hover:not(.editing),
+.address-pill:focus:not(.editing) {
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3),
+ inset 0 0 0 2em rgba(0, 0, 0, 0.1);
+}
+
+.address-pill[selected]:hover:not(.editing),
+.address-pill[selected]:focus:not(.editing) {
+ box-shadow: 0 1px 5px -2px var(--focus-outline-color),
+ inset 0 0 0 1px rgba(0, 0, 0, 0.3),
+ inset 0 0 0 2em rgba(0, 0, 0, 0.15);
+ text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.address-pill.editing {
+ flex: 1;
+ background-color: transparent;
+ box-shadow: inset 0 0 0 1px var(--focus-outline-color);
+ min-height: calc(1.25em + 4px); /* needed to not shrink in edit mode */
+}
+
+.pill-indicator {
+ -moz-context-properties: fill, stroke;
+ fill: currentColor;
+ stroke: Field;
+ margin-inline-end: -8px;
+ margin-bottom: 1em;
+ transition: fill .2s ease, stroke .2s ease;
+}
+
+:root[lwt-tree] .pill-indicator {
+ stroke: var(--toolbar-field-background-color);
+}
+
+#MsgHeadersToolbar[brighttext] .address-pill:not(.editing) {
+ background-color: rgba(0,0,0,0.3);
+}
+
+#MsgHeadersToolbar[brighttext] .address-pill:hover:not(.editing),
+#MsgHeadersToolbar[brighttext] .address-pill:focus:not(.editing) {
+ box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3),
+ inset 0 0 0 2em rgba(255, 255, 255, 0.1);
+}
+
+#MsgHeadersToolbar[brighttext] .address-pill[selected]:hover:not(.editing),
+#MsgHeadersToolbar[brighttext] .address-pill[selected]:focus:not(.editing) {
+ box-shadow: 0 1px 5px -2px var(--focus-outline-color),
+ inset 0 0 0 1px rgba(255,255,255,0.3),
+ inset 0 0 0 2em rgba(0, 0, 0, 0.2);
+ text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.address-pill.invalid-address:not(.editing),
+#MsgHeadersToolbar[brighttext] .address-pill.invalid-address:not(.editing) {
+ color: #fff;
+ background-color: #d70022;
+ background-image: url("chrome://global/skin/icons/warning.svg");
+ background-size: 12px;
+ background-repeat: no-repeat;
+ background-position: calc(100% - 5px);
+ padding-inline-end: 21px;
+ fill: currentColor;
+ -moz-context-properties: fill;
+}
+
+.address-pill.key-issue:not(.editing),
+#MsgHeadersToolbar[brighttext] .address-pill.key-issue:not(.editing) {
+ color: #000;
+ background-color: #ffe900;
+ background-image: url("chrome://global/skin/icons/warning.svg");
+ background-size: 12px;
+ background-repeat: no-repeat;
+ background-position: calc(100% - 5px);
+ padding-inline-end: 21px;
+ fill: currentcolor;
+ -moz-context-properties: fill;
+}
+
+/* RTL variation for background position */
+.address-pill.invalid-address:not(.editing):-moz-locale-dir(rtl),
+.address-pill.key-issue:not(.editing):-moz-locale-dir(rtl),
+#MsgHeadersToolbar[brighttext] .address-pill.invalid-address:not(.editing):-moz-locale-dir(rtl),
+#MsgHeadersToolbar[brighttext] .address-pill.key-issue:not(.editing):-moz-locale-dir(rtl) {
+ background-position: 5px;
+}
+
+.address-pill.invalid-address:hover:not(.editing),
+.address-pill.invalid-address:focus:not(.editing),
+#MsgHeadersToolbar[brighttext] .address-pill.invalid-address:hover:not(.editing),
+#MsgHeadersToolbar[brighttext] .address-pill.invalid-address:focus:not(.editing) {
+ background-color: #a4000f;
+}
+
+.address-pill.key-issue:hover:not(.editing),
+.address-pill.key-issue:focus:not(.editing),
+#MsgHeadersToolbar[brighttext] .address-pill.key-issue:hover:not(.editing),
+#MsgHeadersToolbar[brighttext] .address-pill.key-issue:focus:not(.editing) {
+ background-color: #d7b600;
+}
+
+.address-pill[selected]:not(.editing),
+.address-pill.invalid-address[selected]:not(.editing),
+.address-pill.key-issue[selected]:not(.editing),
+#MsgHeadersToolbar[brighttext] .address-pill[selected]:not(.editing),
+#MsgHeadersToolbar[brighttext] .address-pill.invalid-address[selected]:not(.editing),
+#MsgHeadersToolbar[brighttext] .address-pill.key-issue[selected]:not(.editing) {
+ color: var(--selected-item-text-color);
+ background-color: var(--selected-item-color);
+}
+
+.address-pill[selected]:not(.editing) .pill-indicator {
+ fill: var(--selected-item-color);
+}
+
+#MsgHeadersToolbar {
+ display: grid;
+ grid-template-rows: min-content minmax(0, min-content) min-content;
+ grid-template-columns: auto;
+}
+
+.address-identity-recipient {
+ margin-inline-end: 8px;
+ display: flex;
+}
+
+.recipient-button {
+ white-space: nowrap;
+ text-align: start;
+}
+
+#extraAddressRowsMenu {
+ min-width: 160px;
+}
+
+.overflow-icon {
+ width: 16px;
+ height: 16px;
+ color: inherit;
+ -moz-context-properties: stroke, fill-opacity;
+ stroke: currentColor;
+ fill-opacity: 1;
+}
+
+.overflow-icon:-moz-locale-dir(rtl) {
+ transform: scaleX(-1);
+}
+
+button#extraAddressRowsMenuButton[aria-expanded="true"] {
+ /* Show as toggled on when the overflow is expanded. */
+ background: var(--toolbarbutton-active-background);
+ box-shadow: var(--toolbarbutton-active-boxshadow);
+}
+
+button:is(#extraAddressRowsMenuButton, .remove-field-button) {
+ padding: 2px;
+ margin: 0;
+}
+
+button.recipient-button {
+ padding: 2px 4px;
+ margin: 0;
+}
+
+button:is(
+ #extraAddressRowsMenuButton,
+ .remove-field-button,
+ .recipient-button
+):focus-visible {
+ outline: 2px solid var(--focus-outline-color);
+}
+
+.remove-field-button > img {
+ -moz-context-properties: fill;
+ fill: currentColor;
+ width: 16px;
+ height: 16px;
+}
+
+#msgIdentity:hover {
+ border-color: var(--toolbarbutton-hover-bordercolor);
+ background-color: Field;
+}
+
+:root[lwt-tree] #msgIdentity:hover {
+ background-color: var(--toolbar-field-background-color);
+}
+
+#msgIdentity:focus,
+#msgIdentity:focus-within,
+#msgIdentity[focused="true"],
+#msgSubject:focus,
+.drag-address-container,
+.address-container[focused="true"] {
+ border-color: var(--toolbar-field-focus-border-color);
+ background-color: Field;
+ outline: 1px solid var(--toolbar-field-focus-border-color);
+ outline-offset: 0;
+}
+
+:root[lwt-tree] #msgIdentity:focus-within,
+:root[lwt-tree] #msgIdentity[focused="true"],
+:root[lwt-tree] #msgSubject:focus,
+:root[lwt-tree] .address-container[focused="true"] {
+ color: var(--toolbar-field-focus-color);
+ background-color: var(--toolbar-field-focus-background-color);
+}
+
+:root[lwt-tree-brighttext] #msgIdentity:focus,
+:root[lwt-tree-brighttext] #msgIdentity:focus-within,
+:root[lwt-tree-brighttext] #msgIdentity[focused="true"],
+:root[lwt-tree-brighttext] #msgSubject:focus,
+:root[lwt-tree-brighttext] .address-container[focused="true"] {
+ background-color: var(--toolbar-field-background-color);
+}
+
+.address-pill::before {
+ display: block;
+ content: '';
+ position: relative;
+ width: 3px;
+ background-color: var(--focus-outline-color);
+ height: 15px;
+ border-radius: 2px;
+ margin-inline: -10px 5px;
+ transition: all .2s ease;
+ transform: scaleY(0);
+}
+
+.drop-indicator::before {
+ transform: scaleY(1);
+}
+
+/* ..... format buttons ..... */
+
+#AbsoluteFontSizeButton {
+ list-style-image: url("chrome://messenger/skin/icons/size.svg");
+}
+
+#DecreaseFontSizeButton {
+ list-style-image: url("chrome://messenger/skin/icons/decrease.svg");
+}
+
+#IncreaseFontSizeButton {
+ list-style-image: url("chrome://messenger/skin/icons/increase.svg");
+}
+
+#boldButton {
+ list-style-image: url("chrome://messenger/skin/icons/bold.svg");
+}
+
+#italicButton {
+ list-style-image: url("chrome://messenger/skin/icons/italics.svg");
+}
+
+#underlineButton {
+ list-style-image: url("chrome://messenger/skin/icons/underline.svg");
+}
+
+#ulButton {
+ list-style-image: url("chrome://messenger/skin/icons/bullet-list.svg");
+}
+
+#removeStylingButton {
+ list-style-image: url("chrome://messenger/skin/icons/remove-text-styling.svg");
+}
+
+#olButton {
+ list-style-image: url("chrome://messenger/skin/icons/number-list.svg");
+}
+
+#outdentButton {
+ list-style-image: url("chrome://messenger/skin/icons/outdent.svg");
+}
+
+#indentButton {
+ list-style-image: url("chrome://messenger/skin/icons/indent.svg");
+}
+
+#InsertPopupButton {
+ list-style-image: url("chrome://messenger/skin/icons/image.svg");
+}
+
+#AlignPopupButton {
+ list-style-image: url("chrome://messenger/skin/icons/left-align.svg");
+}
+
+#smileButtonMenu {
+ list-style-image: url("chrome://messenger/skin/icons/smiley.svg");
+}
+
+/* ..... align menu ..... */
+
+#AlignPopup > menuitem {
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+#AlignLeftItem, #AlignPopupButton[state="left"] {
+ list-style-image: url("chrome://messenger/skin/icons/left-align.svg");
+}
+
+#AlignCenterItem, #AlignPopupButton[state="center"] {
+ list-style-image: url("chrome://messenger/skin/icons/center-align.svg");
+}
+
+#AlignRightItem, #AlignPopupButton[state="right"] {
+ list-style-image: url("chrome://messenger/skin/icons/right-align.svg");
+}
+
+#AlignJustifyItem, #AlignPopupButton[state="justify"] {
+ list-style-image: url("chrome://messenger/skin/icons/justify.svg");
+}
+
+/* ..... insert menu ..... */
+
+#InsertPopup > menuitem {
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+#InsertLinkItem {
+ list-style-image: url("chrome://global/skin/icons/link.svg");
+}
+
+#InsertAnchorItem {
+ list-style-image: url("chrome://messenger/skin/icons/anchor.svg");
+}
+
+#InsertImageItem {
+ list-style-image: url("chrome://messenger/skin/icons/image.svg");
+}
+
+#InsertHRuleItem {
+ list-style-image: url("chrome://messenger/skin/icons/hline.svg");
+}
+
+#InsertTableItem {
+ list-style-image: url("chrome://messenger/skin/icons/table.svg");
+}
+
+#findbar-replaceButton {
+ margin-block: 0;
+}
+
+#findbar-replaceButton > .toolbarbutton-icon {
+ display: none;
+}
+
+#linkPreviewSettings {
+ border: 1px solid silver;
+ border-radius: 5px;
+ padding: 10px 20px;
+ width: 500px;
+}
+#linkPreviewSettings h2 {
+ color: blue;
+ font-size: 1em;
+}
+#linkPreviewSettings p {
+ margin: 0.5em 0.2em;
+}
+#linkPreviewSettings .bottom {
+ padding: 1em 0;
+}
+#linkPreviewSettings button {
+ background-color: navy;
+ color: white;
+ padding: 0.2em 2em;
+}
+#linkPreviewSettings .close {
+ font-size: 1.4em;
+ float: inline-end;
+ font-weight: 600;
+ display: inline-block;
+ transform: rotate(45deg);
+ margin-block: -0.2em 0.2em;
+ margin-inline: 0.2em -0.2em;
+}
+
+.statusbar:not([hidden="true"]) {
+ display: flex;
+ align-items: center;
+ min-width: 0;
+}
+
+.statusbar > :not(#statusText) {
+ flex: 0 0 auto;
+}
+
+.statusbar > #statusText {
+ flex: 1 1 auto;
+}
+
+#statusText {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ margin-inline: 4px;
+}
+
+#compose-progressmeter {
+ margin-inline: 4px;
+}
+
+/* Language selector */
+#languageStatusButton {
+ margin-block: 0;
+ margin-inline: 4px 0;
+ padding: 2px 4px;
+ border-radius: 0;
+}
+
+#languageStatusButton:focus-visible {
+ /* Provide some inset for the outline. */
+ outline-offset: -1px;
+}
+
+#toggleRecipientsButton {
+ margin-top: 3px;
+}
+
+.font-bold {
+ font-weight: bold;
+}
+
+.flex-center {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+}
+
+.margin-top-1em {
+ margin-top: 1em;
+}
+
+dialog.modal-dialog[open] {
+ display: flex;
+ flex-direction: column;
+ width: 580px;
+ color: inherit;
+ padding-inline: 0;
+ max-height: 90vh;
+ overflow-x: hidden;
+}
+
+dialog .modal-dialog-body {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ overflow-y: auto;
+ padding-inline: 15px;
+}
+
+dialog .container-with-link {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ align-items: baseline;
+}
+
+dialog .radio-container-with-text {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ align-items: baseline;
+ column-gap: 12px;
+}
+
+dialog .display-block {
+ display: block;
+ margin-block: 1px;
+}
+
+dialog .key-list {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ border: 1px solid var(--dialog-box-border-color);
+ border-radius: 3px;
+ margin-block: 12px 6px;
+}
+
+dialog .key-list > li:nth-child(even) {
+ background-color: rgba(0, 0, 0, 0.05);
+}
+
+dialog .key-row {
+ display: flex;
+ align-items: center;
+ gap: 3px 6px;
+ padding: 3px 6px;
+}
+
+dialog .key-info {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+}
+
+dialog .key-info-block {
+ margin-block-start: 6px;
+ margin-inline-start: 28px;
+}
+
+.comma-separated a:not(:last-child):after {
+ content: ", ";
+}
diff --git a/comm/mail/themes/shared/mail/migrationProgress.css b/comm/mail/themes/shared/mail/migrationProgress.css
new file mode 100644
index 0000000000..4ad549ab20
--- /dev/null
+++ b/comm/mail/themes/shared/mail/migrationProgress.css
@@ -0,0 +1,111 @@
+/* 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/. */
+
+:root {
+ /* Override "dialog" as it results in a transparent background om macOS. */
+ -moz-default-appearance: none;
+}
+
+body {
+ margin: 0;
+ padding: 1em;
+ padding-inline-end: calc(256px - 2em);
+
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+
+ font: message-box;
+ font-size: 15px;
+}
+
+img {
+ position: absolute;
+ inset-inline-end: -3em;
+ bottom: -3em;
+ opacity: .66;
+}
+
+h1 {
+ font-weight: normal;
+ font-size: 1.5em;
+ margin-block: 0;
+}
+
+ol {
+ width: 25em;
+ line-height: 24px;
+ list-style: none;
+ padding-inline: 8px;
+}
+
+li {
+ display: flex;
+ align-items: center;
+}
+
+.task-icon {
+ margin-inline-end: 8px;
+ width: 16px;
+ height: 16px;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+.running {
+ font-weight: bold;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .running .task-icon {
+ position: relative;
+ overflow: hidden;
+ }
+
+ .running .task-icon::before {
+ content: "";
+ position: absolute;
+ background-image: url("chrome://messenger/skin/icons/loading.svg");
+ width: 480px;
+ height: 100%;
+ animation: tab-throbber-animation 1.05s steps(30) infinite;
+ }
+
+ .running .task-icon:dir(rtl)::before {
+ animation-name: tab-throbber-animation-rtl;
+ }
+
+ @keyframes tab-throbber-animation {
+ 0% { transform: translateX(0); }
+ 100% { transform: translateX(-100%); }
+ }
+
+ @keyframes tab-throbber-animation-rtl {
+ 0% { transform: translateX(0); }
+ 100% { transform: translateX(100%); }
+ }
+}
+
+.finished .task-icon {
+ background-image: url("chrome://global/skin/icons/check.svg");
+}
+
+progress {
+ appearance: none;
+ height: 4px;
+ background-color: hsla(0, 0%, 60%, 0.2);
+ border-style: none;
+ border-radius: 2px;
+}
+
+::-moz-progress-bar {
+ background: linear-gradient(90deg, #2094d2, #236ac2, #393c96, #236ac2, #2094d2, #236ac2, #393c96, #236ac2, #2094d2);
+ background-size: 1200px 100%;
+ animation: progress-animation 5s linear infinite;
+}
+
+@keyframes progress-animation {
+ 0% { background-position: 0; }
+ 100% { background-position: 1200px; }
+}
diff --git a/comm/mail/themes/shared/mail/msgSelectOffline.css b/comm/mail/themes/shared/mail/msgSelectOffline.css
new file mode 100644
index 0000000000..1d3558d4e5
--- /dev/null
+++ b/comm/mail/themes/shared/mail/msgSelectOffline.css
@@ -0,0 +1,56 @@
+/* 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/. */
+
+/* ===== msgSelectOffline.css =================================================
+ == Styles for the Offline Use dialog.
+ ======================================================================= */
+
+@import url("chrome://messenger/skin/messenger.css");
+@import url("chrome://messenger/skin/folderPane.css");
+
+treechildren::-moz-tree-image(folderNameCol) {
+ -moz-context-properties: fill, fill-opacity, stroke;
+ fill: color-mix(in srgb, var(--default) 20%, transparent);
+ stroke: var(--default);
+}
+
+treechildren::-moz-tree-image(folderNameCol, isServer-true) {
+ fill: color-mix(in srgb, var(--primary) 20%, transparent);
+ stroke: var(--primary);
+}
+
+treechildren::-moz-tree-cell-text(folderNameCol, noSelect-true) {
+ opacity: 0.6;
+ font-style: italic;
+}
+
+/* ::::: Download Icons ::::: */
+
+treechildren::-moz-tree-image(syncCol) {
+ width: 14px;
+ height: 14px;
+ list-style-image: url("chrome://messenger/skin/icons/checkbox.svg");
+ -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
+ fill: currentColor;
+ stroke: currentColor;
+ fill-opacity: 0;
+ stroke-opacity: 0;
+}
+
+treechildren::-moz-tree-image(syncCol, synchronize-true) {
+ fill-opacity: 1;
+}
+
+treechildren::-moz-tree-image(selectedColumn, selected, focus) {
+ fill: var(--select-focus-text-color);
+ stroke: var(--select-focus-text-color);
+}
+
+treechildren::-moz-tree-image(syncCol, isServer-true) {
+ list-style-image: none;
+}
+
+#folderNameCol {
+ flex: 5 5;
+}
diff --git a/comm/mail/themes/shared/mail/multimessageview.css b/comm/mail/themes/shared/mail/multimessageview.css
new file mode 100644
index 0000000000..131f13f11c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/multimessageview.css
@@ -0,0 +1,211 @@
+/* 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/icons.css");
+
+/* Generic (cross-platform) multimessage view CSS. Some bits will be overridden
+ by theme specific files */
+
+:root {
+ --body-background-color: Field;
+ --body-text-color: FieldText;
+ --info-text-color: GrayText;
+ background-color: var(--body-background-color);
+ color: var(--body-text-color);
+ appearance: none;
+ user-select: auto; /* Overrides messenger.css. */
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --body-background-color: #2a2a2e;
+ --body-text-color: rgb(249, 249, 250);
+ --info-text-color: #b1b1b3;
+ }
+
+ #headingWrapper {
+ --toolbarbutton-hover-background: rgba(179, 179, 179, 0.4);
+ --toolbarbutton-hover-bordercolor: rgba(179, 179, 179, 0.4);
+ --toolbarbutton-header-bordercolor: rgba(179, 179, 179, 0.4);
+ --toolbarbutton-active-background: rgba(179, 179, 179, 0.6);
+ --toolbarbutton-active-bordercolor: rgba(179, 179, 179, 0.6);
+ --toolbarbutton-active-boxshadow: none;
+ }
+}
+
+body {
+ font-family: sans-serif;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+}
+
+/* The heading area */
+
+#headingWrapper {
+ display: flex;
+ flex-direction: row-reverse;
+ gap: 6px;
+ flex-wrap: wrap;
+ padding: 9px 6px;
+ color: var(--layout-color-1);
+ background-color: var(--layout-background-1);
+ border-bottom: 1px solid var(--splitter-color);
+}
+
+#heading {
+ flex: 1;
+ font-size: large;
+ font-weight: normal;
+ margin: 0;
+ padding: 0;
+}
+
+#summary_subtitle {
+ margin-inline-start: 1em;
+ font-size: small;
+ white-space: nowrap;
+}
+
+/* The main content area */
+
+#content {
+ flex: 1 1 0;
+ overflow: auto;
+ padding: 1ex 1em;
+ font-size: initial;
+}
+
+#message_list {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+
+#footer {
+ margin-top: 1em;
+ padding-inline-start: 1em;
+}
+
+.info {
+ font-size: small;
+}
+
+/* The message/thread summary rows */
+
+#message_list > li {
+ position: relative;
+ margin-bottom: 1ex;
+ border-width: 2px;
+ border-radius: 2px;
+ border: 1px solid transparent;
+ border-bottom-color: lightgrey;
+}
+
+#message_list > li.thread {
+ border-color: lightgrey;
+}
+
+.star {
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ background-repeat: no-repeat;
+}
+
+.starred .star {
+ background-image: url("chrome://messenger/skin/icons/flagged.svg");
+ background-size: contain;
+ -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
+ fill: #f4bc44;
+ fill-opacity: 1;
+ stroke: #f4bc44;
+ stroke-opacity: 1;
+}
+
+.item_summary {
+ margin-inline-start: 19px;
+ padding: 0.3ex 0;
+}
+
+.item_header {
+ padding-inline-end: 18px;
+ padding-top: 6px;
+ padding-bottom: 6px;
+}
+
+.unread .primary_header {
+ font-weight: bold;
+}
+
+.right {
+ float: inline-end;
+}
+
+.count {
+ white-space: nowrap;
+ margin-inline-start: 1ch;
+}
+
+.tags {
+ padding-top: 4px;
+ margin-inline-start: 1ch;
+}
+
+.tag {
+ display: inline-block; /* to avoid splitting 'To' and 'Do' e.g. */
+ margin-inline-start: 0;
+ margin-inline-end: 3px;
+ padding: 0 0.5ex;
+ border-radius: 3px;
+ border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
+}
+
+.snippet {
+ opacity: .65;
+ padding-inline-end: 1.5em;
+ padding-bottom: 1ex;
+}
+
+.count, .info, .date,
+.message > .header > .snippet,
+.message > .header > .senders {
+ color: var(--info-text-color);
+}
+
+a {
+ color: -moz-nativehyperlinktext;
+ font-weight: bold;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+.link:hover {
+ text-decoration: underline;
+ cursor: pointer;
+}
+
+#header-view-toolbox {
+ font: message-box;
+}
+
+#header-view-toolbar {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ user-select: none;
+}
+
+@media print {
+ #header-view-toolbox {
+ display: none;
+ }
+
+ #headingWrapper {
+ position: static;
+ }
+}
diff --git a/comm/mail/themes/shared/mail/newmailalert.css b/comm/mail/themes/shared/mail/newmailalert.css
new file mode 100644
index 0000000000..3438b48140
--- /dev/null
+++ b/comm/mail/themes/shared/mail/newmailalert.css
@@ -0,0 +1,140 @@
+/* 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/. */
+
+/* ===== alert.css =====================================================
+ == Styles specific to the alerts dialog.
+ ======================================================================= */
+
+@import url("chrome://messenger/skin/messenger.css");
+
+#alertContainer {
+ border: 1px solid threedshadow;
+ background-color: -moz-Dialog;
+ color: -moz-DialogText;
+ opacity: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+ #alertContainer {
+ background-color: #2a2a2e;
+ color: #f9f9fa;
+ }
+}
+
+#alertContainer[noanimation] {
+ opacity: 1;
+}
+
+#alertContainer[fade-in] {
+ animation-timing-function: ease-out;
+ animation-duration: 2s;
+ animation-fill-mode: both;
+ animation-name: fade-in;
+}
+
+@keyframes fade-in {
+ from {opacity: 0;}
+ to {opacity: 1;}
+}
+
+#alertContainer[fade-out] {
+ animation-timing-function: ease-in;
+ animation-duration: 2s;
+ animation-fill-mode: both;
+ animation-name: fade-out;
+}
+
+@keyframes fade-out {
+ from {opacity: 1;}
+ to {opacity: 0;}
+}
+
+#alertImageBox {
+ display: block;
+ padding: 4px;
+ background-image: linear-gradient(rgba(255, 255, 255, .6),
+ rgba(255, 255, 255, .6));
+ border-inline-end: 1px solid rgba(0, 0, 0, .1);
+}
+
+#alertImage {
+ width: 64px;
+ height: 64px;
+}
+
+#alertTextBox {
+ padding: 4px;
+ padding-inline-end: 0;
+}
+
+#alertTitle {
+ font-weight: bold;
+ font-size: 110%;
+ padding-inline: 5px;
+}
+
+#alertSeparator {
+ margin-inline-start: 11px;
+ border-top: 1px solid -moz-DialogText;
+ height: 0;
+ margin-block: 0.4em;
+}
+
+@media (prefers-color-scheme: dark) {
+ #alertSeparator {
+ border-top-color: #f9f9fa;
+ }
+}
+
+folder-summary {
+ flex-direction: column;
+}
+
+.folderSummary-message-row {
+ /* This max width ends up dictating the overall width of the alert window
+ because it controls how large the preview, subject and sender text can be
+ before cropping kicks in */
+ max-width: 450px;
+ padding: 0 5px;
+}
+
+.folderSummary-subject {
+ font-weight: bold;
+}
+
+.folderSummary-sender, .folderSummary-subject {
+ cursor: inherit;
+}
+
+.folderSummary-sender {
+ width: 150px;
+}
+
+.folderSummary-subject {
+ width: 300px;
+ overflow-wrap: anywhere;
+}
+
+.folderSummary-previewText {
+ color: grey;
+ overflow-wrap: anywhere;
+}
+
+.folderSummaryMessage:hover > .folderSummary-message-row {
+ cursor: pointer;
+ color: -moz-hyperlinktext;
+}
+
+.folderSummaryMessage:hover:active > .folderSummary-message-row {
+ color: -moz-activehyperlinktext;
+}
+
+#closeButton {
+ align-items: flex-start;
+ width: auto;
+}
+
+#closeButton > .toolbarbutton-icon {
+ padding: 5px;
+}
diff --git a/comm/mail/themes/shared/mail/overrides/add.svg b/comm/mail/themes/shared/mail/overrides/add.svg
new file mode 100644
index 0000000000..8fac1d7d17
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/add.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M14 7H9V2a1 1 0 00-2 0v5H2a1 1 0 100 2h5v5a1 1 0 002 0V9h5a1 1 0 000-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/arrow-down-12.svg b/comm/mail/themes/shared/mail/overrides/arrow-down-12.svg
new file mode 100644
index 0000000000..c426b93ee5
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/arrow-down-12.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="context-fill">
+ <path d="M6 6.75l3.22-3.22c.71-.7 1.77.36 1.06 1.07L6.53 8.34c-.3.3-.77.3-1.06 0L1.72 4.59c-.66-.7.35-1.72 1.06-1.06z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/arrow-down.svg b/comm/mail/themes/shared/mail/overrides/arrow-down.svg
new file mode 100644
index 0000000000..86c7116066
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/arrow-down.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M8 12a1 1 0 01-.7-.3l-5-5a1 1 0 011.4-1.4L8 9.58l4.3-4.3a1 1 0 011.4 1.42l-5 5A1 1 0 018 12z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/arrow-left-12.svg b/comm/mail/themes/shared/mail/overrides/arrow-left-12.svg
new file mode 100644
index 0000000000..d2a966c8c0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/arrow-left-12.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="context-fill">
+ <path d="M4.75 6l3.22-3.22A.75.75 0 006.9 1.72L3.16 5.47c-.3.3-.3.77 0 1.06l3.75 3.75a.75.75 0 001.06-1.06z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/arrow-left.svg b/comm/mail/themes/shared/mail/overrides/arrow-left.svg
new file mode 100644
index 0000000000..f69288906b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/arrow-left.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M6.41 8l4.3-4.3a1 1 0 00-1.42-1.4l-5 5a1 1 0 000 1.4l5 5a1 1 0 001.42-1.4z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/arrow-right-12.svg b/comm/mail/themes/shared/mail/overrides/arrow-right-12.svg
new file mode 100644
index 0000000000..ae22ec7193
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/arrow-right-12.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="context-fill">
+ <path d="M7.25 6L4.03 2.78A.75.75 0 015.1 1.72l3.74 3.75c.3.3.3.77 0 1.06l-3.75 3.75a.75.75 0 01-1.06-1.06z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/arrow-right.svg b/comm/mail/themes/shared/mail/overrides/arrow-right.svg
new file mode 100644
index 0000000000..1e6b979066
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/arrow-right.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M9.59 8l-4.3-4.3a-1 1 0 011.42-1.4l5 5a-1 1 0 010 1.4l-5 5a-1 1 0 01-1.42-1.4z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/arrow-up-12.svg b/comm/mail/themes/shared/mail/overrides/arrow-up-12.svg
new file mode 100644
index 0000000000..40e19e9d1c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/arrow-up-12.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M6 5.12l3.22 3.22c.71.7 1.77-.36 1.06-1.07L6.53 3.53a.74.74 0 00-1.06 0L1.72 7.28c-.66.7.35 1.72 1.06 1.06z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/arrow-up.svg b/comm/mail/themes/shared/mail/overrides/arrow-up.svg
new file mode 100644
index 0000000000..e9ab68ce05
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/arrow-up.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M8 5.04a1-1 0 00-.7.3l-5 5a1-1 0 001.4 1.4L8 7.46l4.3 4.3a1-1 0 001.4-1.42l-5-5a1-1 0 00-.7-.3z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/blocked.svg b/comm/mail/themes/shared/mail/overrides/blocked.svg
new file mode 100644
index 0000000000..d0d28c0b57
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/blocked.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-rule="evenodd">
+ <path d="M3 9h10V7H3v2zm5-8a7 7 0 100 14A7 7 0 008 1z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/category-available.svg b/comm/mail/themes/shared/mail/overrides/category-available.svg
new file mode 100644
index 0000000000..6fe4b0c002
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/category-available.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" width="32" height="32">
+ <path d="M12 8a4 4 0 104 4 4 4 0 00-4-4zm-2.2 3.54l1.92-1.92a.38.38 0 01.54 0l1.92 1.92a.38.38 0 01-.54.54l-1.27-1.27v3.3a.38.38 0 01-.77 0v-3.3l-1.27 1.27a.38.38 0 01-.54-.54z"/>
+ <path d="M6 12a2.56 2.56 0 011 .21V12a5 5 0 015-5V5a1 1 0 00-1-1H7.75A.77.77 0 017 3.25c0-.75 1-.78 1-1.75S7.1 0 6 0 4 .64 4 1.5s1 1 1 1.75a.77.77 0 01-.75.75H1a1 1 0 00-1 1v2.25A.77.77 0 00.75 8c.75 0 .78-1 1.75-1S4 7.9 4 9s-.64 2-1.5 2-1-1-1.75-1a.77.77 0 00-.75.75V15a1 1 0 001 1h3.25a.77.77 0 00.75-.75c0-.75-1-.78-1-1.75S4.9 12 6 12z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/category-discover.svg b/comm/mail/themes/shared/mail/overrides/category-discover.svg
new file mode 100644
index 0000000000..88f4fabe50
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/category-discover.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" width="32" height="32">
+ <path d="M9.5 3s.43 2.43 1.25 3.25S14 7.5 14 7.5s-2.43.39-3.25 1.21S9.5 12 9.5 12s-.39-2.46-1.21-3.29S5 7.5 5 7.5s2.46-.43 3.29-1.25S9.5 3 9.5 3m0-2a2 2 0 00-2 1.68 7.54 7.54 0 01-.66 2.15 7.9 7.9 0 01-2.21.7 2 2 0 000 3.95 7.73 7.73 0 012.18.66 7.74 7.74 0 01.66 2.19 2 2 0 002 1.68 2 2 0 002-1.66 7.89 7.89 0 01.7-2.21 7.57 7.57 0 012.15-.66 2 2 0 000-3.94 7.69 7.69 0 01-2.18-.7 7.73 7.73 0 01-.7-2.18A2 2 0 009.5 1zM5.09 12.51a3.13 3.13 0 01-1.18-.42 3.11 3.11 0 01-.42-1.18.5.5 0 00-.49-.41.5.5 0 00-.49.42 3 3 0 01-.4 1.17 3.14 3.14 0 01-1.19.42.5.5 0 000 1 3 3 0 011.19.4 3 3 0 01.4 1.19.5.5 0 00.49.4.5.5 0 00.49-.41 3.2 3.2 0 01.42-1.19 3 3 0 011.17-.4.5.5 0 000-1zM4.09 2a2.36 2.36 0 01-.82-.28A2.37 2.37 0 013 .91.5.5 0 002.5.5a.5.5 0 00-.5.42 2.28 2.28 0 01-.27.81A2.4 2.4 0 01.91 2a.5.5 0 000 1 2.32 2.32 0 01.82.26 2.34 2.34 0 01.27.82.5.5 0 00.49.42.5.5 0 00.51-.41 2.42 2.42 0 01.28-.83 2.3 2.3 0 01.8-.26.5.5 0 000-1z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/category-extensions.svg b/comm/mail/themes/shared/mail/overrides/category-extensions.svg
new file mode 100644
index 0000000000..c2f04d02c2
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/category-extensions.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" width="32" height="32">
+ <path d="M14.53 8c-1 0-1 1-1.75 1a.77.77 0 01-.78-.75V5a1 1 0 00-1-1H7.78A.77.77 0 017 3.25c0-.75 1-.78 1-1.75S7.13 0 6 0 4 .64 4 1.5s1 1 1 1.75a.77.77 0 01-.72.75H1a1 1 0 00-1 1v2.25A.77.77 0 00.78 8c.75 0 .78-1 1.75-1S4 7.9 4 9s-.64 2-1.5 2-1-1-1.75-1a.77.77 0 00-.75.75V15a1 1 0 001 1h3.28a.77.77 0 00.72-.75c0-.75-1-.78-1-1.75S4.92 12 6 12s2 .64 2 1.5-1 1-1 1.75a.77.77 0 00.75.75H11a1 1 0 001-1v-3.25a.77.77 0 01.75-.75c.75 0 .78 1 1.75 1s1.5-.9 1.5-2-.61-2-1.47-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/category-recent.svg b/comm/mail/themes/shared/mail/overrides/category-recent.svg
new file mode 100644
index 0000000000..eaabb09837
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/category-recent.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" width="32" height="32">
+ <path d="M12 16a4 4 0 10-4-4 4 4 0 004 4zm2.2-3.54l-1.92 1.92a.38.38 0 01-.54 0L9.8 12.46a.38.38 0 11.54-.54l1.27 1.27V9.88a.38.38 0 01.77 0v3.3l1.27-1.27a.38.38 0 01.54.54z"/>
+ <path d="M6 12a2.56 2.56 0 011 .21V12a5 5 0 015-5V5a1 1 0 00-1-1H7.75A.77.77 0 017 3.25c0-.75 1-.78 1-1.75S7.1 0 6 0 4 .64 4 1.5s1 1 1 1.75a.77.77 0 01-.75.75H1a1 1 0 00-1 1v2.25A.77.77 0 00.75 8c.75 0 .78-1 1.75-1S4 7.9 4 9s-.64 2-1.5 2-1-1-1.75-1a.77.77 0 00-.75.75V15a1 1 0 001 1h3.25a.77.77 0 00.75-.75c0-.75-1-.78-1-1.75S4.9 12 6 12z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/category-themes.svg b/comm/mail/themes/shared/mail/overrides/category-themes.svg
new file mode 100644
index 0000000000..e58a9701fd
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/category-themes.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" width="32" height="32">
+ <path d="M4 11a2 2 0 00-1.91 1.44C1.71 13.59 1.37 14.56.31 15a.49.49 0 00-.27.43.5.5 0 00.5.5 7 7 0 004.83-1.5A2 2 0 004 11zm11.69-9.71a1 1 0 00-1.34 0l-8 7a1 1 0 000 1.43l1 1A1 1 0 008 11a1 1 0 00.71-.33l7-8a1 1 0 00-.02-1.38z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/check.svg b/comm/mail/themes/shared/mail/overrides/check.svg
new file mode 100644
index 0000000000..a85c33b6c7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/check.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M6.52 12.5a1 1 0 01-.7-.3L2.28 8.7A1 1 0 113.7 7.3l2.82 2.8 5.77-5.8a1 1 0 011.42 1.41l-6.48 6.5a1 1 0 01-.71.29z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/chevron.svg b/comm/mail/themes/shared/mail/overrides/chevron.svg
new file mode 100644
index 0000000000..e4b7b44aa0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/chevron.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M8.7 7.3l-5-5a1 1 0 00-1.4 1.4L6.58 8l-4.3 4.3a1 1 0 101.42 1.4l5-5a1 1 0 000-1.4zm6 0l-5-5a1 1 0 00-1.4 1.4L12.58 8l-4.3 4.3a1 1 0 101.42 1.4l5-5a1 1 0 000-1.4z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/close.svg b/comm/mail/themes/shared/mail/overrides/close.svg
new file mode 100644
index 0000000000..08e3832568
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/close.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M9.06 8l3.47-3.47a.75.75 0 00-1.06-1.06L8 6.94 4.53 3.47a.75.75 0 10-1.06 1.06L6.94 8l-3.47 3.47a.75.75 0 101.06 1.06L8 9.06l3.47 3.47a.75.75 0 001.06-1.06z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/defaultFavicon.svg b/comm/mail/themes/shared/mail/overrides/defaultFavicon.svg
new file mode 100644
index 0000000000..f087cb3a4b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/defaultFavicon.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M8 0a8 8 0 108 8 8 8 0 00-8-8zm5.16 4.96h-1.55a7.7 7.7 0 00-1.05-2.38 6.03 6.03 0 012.6 2.38zM14 8a5.96 5.96 0 01-.34 1.96h-1.82A12.33 12.33 0 0012 8a12.33 12.33 0 00-.16-1.96h1.82A5.96 5.96 0 0114 8zm-6 6c-1.07 0-2.04-1.2-2.57-2.96h5.14C10.04 12.8 9.07 14 8 14zM5.17 9.96a11.08 11.08 0 010-3.92h5.66A11.11 11.11 0 0111 8a11.11 11.11 0 01-.17 1.96zM2 8a5.96 5.96 0 01.34-1.96h1.82a12.36 12.36 0 000 3.92H2.33A5.96 5.96 0 012 8zm6-6c1.07 0 2.04 1.2 2.57 2.96H5.43C5.96 3.2 6.93 2 8 2zm-2.56.58a7.7 7.7 0 00-1.05 2.38H2.84a6.03 6.03 0 012.6-2.38zm-2.6 8.46h1.55a7.7 7.7 0 001.05 2.38 6.03 6.03 0 01-2.6-2.38zm7.72 2.38a7.7 7.7 0 001.05-2.38h1.56a6.03 6.03 0 01-2.61 2.38z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/delete.svg b/comm/mail/themes/shared/mail/overrides/delete.svg
new file mode 100644
index 0000000000..09ea81760a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/delete.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M6.5 12a.5.5 0 00.5-.5v-6a.5.5 0 00-1 0v6a.5.5 0 00.5.5zm2 0a.5.5 0 00.5-.5v-6a.5.5 0 00-1 0v6a.5.5 0 00.5.5zm2 0a.5.5 0 00.5-.5v-6a.5.5 0 00-1 0v6a.5.5 0 00.5.5z"/>
+ <path d="M14 2h-3.05a2.5 2.5 0 00-4.9 0H3a1 1 0 000 2v9a3 3 0 003 3h5a3 3 0 003-3V4a1 1 0 000-2zM8.5 1a1.49 1.49 0 011.4 1H7.1a1.49 1.49 0 011.4-1zM12 13a1 1 0 01-1 1H6a1 1 0 01-1-1V4h7z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/error.svg b/comm/mail/themes/shared/mail/overrides/error.svg
new file mode 100644
index 0000000000..0bc4f2c06e
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/error.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity" fill-rule="evenodd">
+ <path d="M8 15a7 7 0 10-7-7 7 7 0 007 7zm0-3a1 1 0 10-1-1 1 1 0 001 1zm0-3a1 1 0 001-1V5a1 1 0 00-2 0v3a1 1 0 001 1z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/extension.svg b/comm/mail/themes/shared/mail/overrides/extension.svg
new file mode 100644
index 0000000000..6a7a852247
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/extension.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M14.5 8c-.97 0-1 1-1.75 1a.77.77 0 01-.75-.75V5a1 1 0 00-1-1H7.75A.77.77 0 017 3.25c0-.75 1-.78 1-1.75C8 .64 7.1 0 6 0S4 .64 4 1.5c0 .97 1 1 1 1.75a.77.77 0 01-.75.75H1a1 1 0 00-1 1v2.25A.77.77 0 00.75 8c.75 0 .78-1 1.75-1C3.37 7 4 7.9 4 9s-.64 2-1.5 2c-.97 0-1-1-1.75-1a.77.77 0 00-.75.75V15a1 1 0 001 1h3.25a.77.77 0 00.75-.75c0-.75-1-.78-1-1.75 0-.86.9-1.5 2-1.5s2 .64 2 1.5c0 .97-1 1-1 1.75a.77.77 0 00.75.75H11a1 1 0 001-1v-3.25a.77.77 0 01.75-.75c.75 0 .78 1 1.75 1 .86 0 1.5-.9 1.5-2s-.64-2-1.5-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/find-next-arrow.svg b/comm/mail/themes/shared/mail/overrides/find-next-arrow.svg
new file mode 100644
index 0000000000..64dd9fc701
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/find-next-arrow.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill">
+ <path d="M8 12a1 1 0 01-.7-.3l-5-5a1 1 0 011.4-1.4L8 9.58l4.3-4.3a1 1 0 011.4 1.42l-5 5A1 1 0 018 12z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/find-previous-arrow.svg b/comm/mail/themes/shared/mail/overrides/find-previous-arrow.svg
new file mode 100644
index 0000000000..64001cd41a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/find-previous-arrow.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill">
+ <path d="M13 11a1 1 0 01-.7-.3L8 6.42l-4.3 4.3a1 1 0 01-1.4-1.42l5-5a1 1 0 011.4 0l5 5A1 1 0 0113 11z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/folder.svg b/comm/mail/themes/shared/mail/overrides/folder.svg
new file mode 100644
index 0000000000..f169d4f051
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/folder.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M14 3H8.15L6.58 1.54A2 2 0 005.22 1H2a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2zM5.22 3l1.07 1H2V3zM14 13H2V5h6v-.01l.15.01H14z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/help.svg b/comm/mail/themes/shared/mail/overrides/help.svg
new file mode 100644
index 0000000000..4226bdaca4
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/help.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M8 1a7 7 0 107 7 7 7 0 00-7-7zm0 13a6 6 0 116-6 6 6 0 01-6 6zM8 3.12A2.7 2.7 0 005.12 6a.88.88 0 001.75 0c0-1 .6-1.13 1.13-1.13a1.1 1.1 0 011.13.75.9.9 0 01-.53 1.01A2.74 2.74 0 007.13 9v.34a.88.88 0 001.75 0v-.37a1.04 1.04 0 01.6-.83 2.64 2.64 0 001.34-2.98A2.84 2.84 0 008 3.12zm0 7.63A1.25 1.25 0 109.25 12 1.25 1.25 0 008 10.75z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/info-filled.svg b/comm/mail/themes/shared/mail/overrides/info-filled.svg
new file mode 100644
index 0000000000..95ea208beb
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/info-filled.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path fill-rule="evenodd" d="M8 1a7 7 0 11-7 7 7 7 0 017-7zm0 3a1 1 0 11-1 1 1 1 0 011-1zm0 3a1 1 0 011 1v3a1 1 0 01-2 0V8a1 1 0 011-1z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/info.svg b/comm/mail/themes/shared/mail/overrides/info.svg
new file mode 100644
index 0000000000..f5ed872b3f
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/info.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M8 1a7 7 0 107 7 7 7 0 00-7-7zm0 13a6 6 0 116-6 6 6 0 01-6 6zm0-7a1 1 0 00-1 1v3a1 1 0 102 0V8a1 1 0 00-1-1zm0-3.19A1.19 1.19 0 109.19 5 1.19 1.19 0 008 3.81z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/more.svg b/comm/mail/themes/shared/mail/overrides/more.svg
new file mode 100644
index 0000000000..447e5330ad
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/more.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M2 6a2 2 0 102 2 2 2 0 00-2-2zm6 0a2 2 0 102 2 2 2 0 00-2-2zm6 0a2 2 0 102 2 2 2 0 00-2-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/open-in-new.svg b/comm/mail/themes/shared/mail/overrides/open-in-new.svg
new file mode 100644
index 0000000000..5a1fe65b64
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/open-in-new.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M4 0c.6 0 1 .4 1 1s-.5 1-1 1H3c-.6 0-1 .4-1 1v6c0 .6.4 1 1 1h6c.6 0 1-.4 1-1V8c0-.6.4-1 1-1s1 .4 1 1v1c0 1.7-1.3 3-3 3H3c-1.7 0-3-1.3-3-3V3c0-1.7 1.3-3 3-3zm7 0c.4 0 .8.2.9.6.1.1.1.3.1.4v3c0 .6-.4 1-1 1s-1-.4-1-1v-.6L8.7 4.7c-.2.3-.6.4-1 .3-.3-.1-.6-.4-.7-.7s0-.7.3-1L8.6 2H8c-.5 0-1-.4-1-1s.4-1 1-1z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/plugin-blocked.svg b/comm/mail/themes/shared/mail/overrides/plugin-blocked.svg
new file mode 100644
index 0000000000..6e391761df
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/plugin-blocked.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M3 3h3a1 1 0 000-2H3a1 1 0 000 2zm11.7 1.3L5 14h9a1 1 0 001-1V5a1 1 0 00-.3-.7z"/>
+ <path d="M14.7 1.3a.99.99 0 00-1.2-.15A.97.97 0 0013 1h-3a1 1 0 000 2h1.59l-1 1H2a1 1 0 00-1 1v8a.97.97 0 00.15.5.99.99 0 00.14 1.2 1 1 0 001.42 0l12-12a1 1 0 000-1.4z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/plugin.svg b/comm/mail/themes/shared/mail/overrides/plugin.svg
new file mode 100644
index 0000000000..f1ef119cba
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/plugin.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <rect x="1" y="4" width="14" height="10" rx="1" ry="1"/>
+ <path d="M6 1H3a1 1 0 000 2h3a1 1 0 000-2zm7 0h-3a1 1 0 000 2h3a1 1 0 000-2z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/print.svg b/comm/mail/themes/shared/mail/overrides/print.svg
new file mode 100644
index 0000000000..c7bc548b14
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/print.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M14 5h-1V1a1 1 0 00-1-1H4a1 1 0 00-1 1v4H2a2 2 0 00-2 2v5h3v3a1 1 0 001 1h8a1 1 0 001-1v-3h3V7a2 2 0 00-2-2zM2.5 8a.5.5 0 11.5-.5.5.5 0 01-.5.5zm9.5 7H4v-5h8zm0-10H4V1h8zm-6.5 7h4a.5.5 0 000-1h-4a.5.5 0 100 1zm0 2h5a.5.5 0 000-1h-5a.5.5 0 100 1z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/search-glass.svg b/comm/mail/themes/shared/mail/overrides/search-glass.svg
new file mode 100644
index 0000000000..6e6dc883f9
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/search-glass.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M15.7 14.3L10.9 9.46a6.02 6.02 0 10-1.42 1.41l4.82 4.83a1 1 0 001.42-1.42zM6 10a4 4 0 114-4 4 4 0 01-4 4z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/security-broken.svg b/comm/mail/themes/shared/mail/overrides/security-broken.svg
new file mode 100644
index 0000000000..1b7d21974d
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/security-broken.svg
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path d="M12.5 6.98h-.48L4 15h8.5a1.5 1.5 0 001.5-1.5V8.48a1.5 1.5 0 00-1.5-1.5zm-6.5 0V5a2 2 0 014 0v1l1.9-1.9A4 4 0 004 5v1.98h-.5A1.5 1.5 0 002 8.48v5.02a1.48 1.48 0 00.07.43l6.95-6.95z" fill="context-fill" fill-opacity="context-fill-opacity"/>
+ <path d="M2 15a1 1 0 01-.7-1.7l12-12a1 1 0 011.4 1.4l-12 12a1 1 0 01-.7.3z" fill="#ff0039"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/security-warning.svg b/comm/mail/themes/shared/mail/overrides/security-warning.svg
new file mode 100644
index 0000000000..f72c5588d7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/security-warning.svg
@@ -0,0 +1,9 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path d="M8 1a4 4 0 00-4 4v1.98h-.5A1.5 1.5 0 002 8.48v5.02A1.5 1.5 0 003.5 15h2.54a2.27 2.27 0 01.2-1.32l3.19-6.41a2.27 2.27 0 01.2-.29H6V5a2 2 0 014 0v1.57A2.25 2.25 0 0111.48 6a2.28 2.28 0 01.52.07V5a4 4 0 00-4-4z" fill="context-fill" fill-opacity="context-fill-opacity"/>
+ <path d="M15.82 14.13l-3.2-6.41a1.28 1.28 0 00-2.3 0l-3.18 6.4A1.3 1.3 0 008.29 16h6.38a1.3 1.3 0 001.15-1.87z" fill="#ffbf00"/>
+ <path d="M11.48 8a.27.27 0 01.25.16l3.2 6.41a.3.3 0 01-.02.3.28.28 0 01-.24.13H8.29a.28.28 0 01-.24-.14.29.29 0 01-.02-.29l3.2-6.4a.27.27 0 01.25-.17m0-1a1.27 1.27 0 00-1.15.72l-3.2 6.4A1.3 1.3 0 008.3 16h6.38a1.3 1.3 0 001.15-1.87l-3.2-6.41A1.27 1.27 0 0011.49 7z" fill="#d76e00" opacity=".35"/>
+ <path d="M11.5 12a.5.5 0 00.5-.5v-2a.5.5 0 00-1 0v2a.5.5 0 00.5.5zm0 .8a.7.7 0 10.7.7.7.7 0 00-.7-.7z" fill="#fff"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/security.svg b/comm/mail/themes/shared/mail/overrides/security.svg
new file mode 100644
index 0000000000..b4e35ba4cc
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/security.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M12 7h1a1 1 0 011 1v6a1 1 0 01-1 1H3a1 1 0 01-1-1V8a1 1 0 011-1h1V5a4 4 0 018 0v2zm-2 0V5a2 2 0 00-4 0v2h4z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/settings.svg b/comm/mail/themes/shared/mail/overrides/settings.svg
new file mode 100644
index 0000000000..4ccf1a00ea
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/settings.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+ <path d="M15 7h-2.1a4.97 4.97 0 00-.73-1.75l1.49-1.5a1 1 0 00-1.42-1.4l-1.49 1.48A4.97 4.97 0 009 3.1V1a1 1 0 00-2 0v2.1a4.97 4.97 0 00-1.75.73l-1.5-1.49a1 1 0 00-1.4 1.42l1.48 1.49A4.97 4.97 0 003.1 7H1a1 1 0 000 2h2.1a4.97 4.97 0 00.74 1.76l-.05.03-1.45 1.45a1 1 0 101.42 1.42L5.2 12.2c0-.02.01-.03.03-.05A4.97 4.97 0 007 12.9V15a1 1 0 002 0v-2.1a4.97 4.97 0 001.75-.73l1.5 1.49a1 1 0 001.4-1.42l-1.48-1.49A4.97 4.97 0 0012.9 9H15a1 1 0 000-2zM5 8a3 3 0 113 3 3 3 0 01-3-3z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/update-icon.svg b/comm/mail/themes/shared/mail/overrides/update-icon.svg
new file mode 100644
index 0000000000..6bf4fbfaea
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/update-icon.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill">
+ <path d="M8 0a8 8 0 100 16A8 8 0 008 0zm3.7 6.7a1 1 0 01-1.4 0L9 5.42V13a1 1 0 11-2 0V5.41l-1.3 1.3a1 1 0 01-1.4-1.42l3-3a1 1 0 011.4 0l3 3a1 1 0 010 1.42z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/overrides/warning.svg b/comm/mail/themes/shared/mail/overrides/warning.svg
new file mode 100644
index 0000000000..d86a9ee432
--- /dev/null
+++ b/comm/mail/themes/shared/mail/overrides/warning.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #FFBF00">
+ <path d="M14.74 12.1L9.8 2.2a2 2 0 00-3.58 0l-4.95 9.91A2 2 0 003.05 15h9.9a2 2 0 001.8-2.9zM7 5a1 1 0 012 0v4a1 1 0 01-2 0zm1 8.25A1.25 1.25 0 119.25 12 1.25 1.25 0 018 13.25z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/panelUI.css b/comm/mail/themes/shared/mail/panelUI.css
new file mode 100644
index 0000000000..932c70177b
--- /dev/null
+++ b/comm/mail/themes/shared/mail/panelUI.css
@@ -0,0 +1,1199 @@
+/* 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/. */
+
+:root .cui-widget-panel {
+ --menu-panel-width: 22.35em;
+ --wide-menu-panel-width: 29em;
+ --panel-palette-icon-size: 16px;
+ --panel-separator-margin: 4px 8px;
+
+ /* XXX This is the ugliest bit of code I think I've ever written for Mozilla.
+ Basically, the [extra 0.1px in the 1.1px] is there to avoid CSS rounding errors
+ causing buttons to wrap. For gory details, refer to
+ https://bugzilla.mozilla.org/show_bug.cgi?id=963365#c11 */
+ /* stylelint-disable-next-line */
+ --menu-panel-button-width: calc(--menu-panel-width / 3 - 1.1px);
+ /* Complement the .subviewbutton margin. */
+ --arrowpanel-padding: 8px 0;
+ --arrowpanel-menuitem-border-radius: 3px;
+ --appmenu-button-border-color: hsla(210, 4%, 10%, 0.14);
+ --appmenu-button-margin: 0 8px;
+ --appmenu-button-padding: 6px;
+ --appmenu-combined-radio-button-padding: 4px 8px;
+ --appmenu-fontsize-icon-size: 20px;
+ --appmenu-fontsize-reset-button-width: 47px;
+ --appmenu-warning-background-color: #ffefbf;
+ --appmenu-warning-background-color-hover: #ffe8a2;
+ --appmenu-warning-background-color-active: #ffe38f;
+ --appmenu-warning-color: black;
+ --appmenu-warning-border-color: hsl(45, 100%, 77%);
+ --appmenu-icons-fill: color-mix(in srgb, var(--color-ink-70) 20%, transparent);
+ --appmenu-icons-stroke: var(--color-ink-70);
+}
+
+@media (prefers-color-scheme: dark) {
+ :root .cui-widget-panel {
+ --appmenu-icons-fill: color-mix(in srgb, var(--color-ink-10) 20%, transparent);
+ --appmenu-icons-stroke: var(--color-ink-10);
+ }
+}
+
+@media (prefers-contrast) {
+ :root .cui-widget-panel {
+ --appmenu-icons-fill: color-mix(in srgb, currentColor 20%, transparent);
+ --appmenu-icons-stroke: currentColor;
+ }
+}
+
+/* UI Density customization */
+
+:root[uidensity="compact"] .cui-widget-panel {
+ --arrowpanel-padding: 4px 0;
+ --appmenu-button-margin: 0 4px;
+ --appmenu-button-padding: 3px;
+ --appmenu-combined-radio-button-padding: 2px 6px;
+ --appmenu-fontsize-icon-size: 16px;
+ --appmenu-fontsize-reset-button-width: 41px;
+}
+
+:root[uidensity="touch"] .cui-widget-panel {
+ --appmenu-button-padding: 9px;
+ --appmenu-combined-radio-button-padding: 6px 10px;
+ --appmenu-fontsize-icon-size: 24px;
+ --appmenu-fontsize-reset-button-width: 51px;
+}
+
+:root[lwt-popup-brighttext] .cui-widget-panel {
+ --appmenu-button-border-color: rgba(249, 249, 250, 0.2);
+ --appmenu-warning-background-color: hsla(55, 100%, 50%, .1);
+ --appmenu-warning-background-color-hover: hsla(55, 100%, 50%, .2);
+ --appmenu-warning-background-color-active: hsla(55, 100%, 50%, .3);
+ --appmenu-warning-color: #f9f9fa;
+ --appmenu-warning-border-color: hsla(55, 100%, 50%, .3);
+}
+
+panelview:not([visible]) {
+ visibility: collapse;
+}
+
+.cui-widget-panel,
+#widget-overflow {
+ font: menu;
+ font-size: inherit;
+}
+
+panelview {
+ flex-direction: column;
+ background: var(--arrowpanel-background);
+ padding: 0;
+}
+
+/* Prevent a scrollbar from appearing while the animation for transitioning from
+ one view to another runs, which would otherwise happen if the new view has
+ more height than the old one because that would mean that during the
+ animation the height of the multiview will be too short for the new view. */
+panelmultiview[transitioning] > .panel-viewcontainer > .panel-viewstack > panelview > .panel-subview-body {
+ overflow-y: hidden;
+}
+
+.panel-subview-body {
+ overflow-y: auto;
+ overflow-x: hidden;
+ flex: 1;
+ padding: var(--arrowpanel-padding);
+}
+
+.panel-view-body-unscrollable {
+ overflow: hidden;
+ flex: 1;
+}
+
+.subviewbutton.panel-subview-footer {
+ box-sizing: border-box;
+ min-height: 41px;
+}
+
+.cui-widget-panelview menuitem.subviewbutton.panel-subview-footer {
+ margin: 4px 0 0;
+}
+
+.cui-widget-panelview .subviewbutton.panel-subview-footer > .menu-text {
+ flex: 1;
+}
+
+#wrapper-edit-controls:is([place="palette"],[place="menu-panel"]) > #edit-controls {
+ margin-inline-start: 0;
+}
+
+#appmenu-edit-button {
+ margin-inline: 0 3px;
+ padding-inline: 7px;
+}
+
+#appmenu-edit-button::after {
+ margin-inline-start: 0;
+}
+
+panelview[id^=PanelUI-webext-] {
+ overflow: hidden;
+}
+
+panelview:not([mainview]) .toolbarbutton-text,
+.cui-widget-panel .toolbarbutton-text,
+#overflowMenu-customize-button > .toolbarbutton-text {
+ text-align: start;
+ display: flex;
+}
+
+#appMenu-popup panelview,
+#customizationui-widget-multiview panelview:not([extension]) {
+ min-width: var(--menu-panel-width);
+ max-width: 35em;
+}
+
+#customizationui-widget-multiview #appMenu-libraryView,
+#widget-overflow panelview {
+ min-width: var(--wide-menu-panel-width);
+ max-width: var(--wide-menu-panel-width);
+}
+
+/* Add 2 * 16px extra width for touch mode button padding. */
+#appMenu-popup[touchmode] panelview {
+ min-width: calc(var(--menu-panel-width) + 32px);
+}
+
+.cui-widget-panel.cui-widget-panelWithFooter::part(content) {
+ padding-bottom: 0;
+}
+
+.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
+ min-width: 0;
+ min-height: 0;
+ margin: 0;
+}
+
+.animate-out {
+ animation-name: widget-animate-out;
+ animation-fill-mode: forwards;
+ animation-duration: 500ms;
+ animation-timing-function: var(--animation-easing-function);
+}
+
+@keyframes widget-animate-out {
+ 0% {
+ opacity: 1;
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0 ;
+ transform: scale(.5);
+ }
+}
+
+toolbarpaletteitem[place="menu-panel"] > .toolbarbutton-1 {
+ flex: 1;
+}
+
+/* Help webextension buttons fit in. */
+toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
+toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
+toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
+toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+ height: var(--panel-palette-icon-size);
+ width: var(--panel-palette-icon-size);
+}
+
+#customization-palette .toolbarbutton-1 {
+ appearance: none;
+ flex-direction: column;
+ padding: 12px 0 9px;
+ margin: 0;
+}
+
+/* above we treat the container as the icon for the margins, that is so the
+/* badge itself is positioned correctly. Here we make sure that the icon itself
+/* has the minimum size we want, but no padding/margin. */
+.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+ width: var(--panel-palette-icon-size);
+ height: var(--panel-palette-icon-size);
+ min-width: var(--panel-palette-icon-size);
+ min-height: var(--panel-palette-icon-size);
+ margin: 0;
+ padding: 0;
+}
+
+#zoom-in-button > .toolbarbutton-text,
+#zoom-out-button > .toolbarbutton-text,
+#zoom-reset-button > .toolbarbutton-icon {
+ display: none;
+}
+
+#customization-palette .toolbarbutton-text {
+ display: none;
+}
+
+menuitem.subviewbutton {
+ appearance: none !important;
+}
+
+.subviewbutton > .menu-text {
+ appearance: none;
+ margin-inline-start: 0 !important;
+}
+
+.subview-subheader,
+panelview .toolbarbutton-1,
+.subviewbutton,
+menu.subviewbutton,
+.widget-overflow-list .toolbarbutton-1 {
+ appearance: none;
+ margin: var(--appmenu-button-margin);
+ min-height: 24px;
+ padding-inline: 8px;
+ padding-block: var(--appmenu-button-padding);
+ border-radius: var(--arrowpanel-menuitem-border-radius);
+ background-color: transparent;
+}
+
+.subviewbutton:focus {
+ outline: 0;
+}
+
+.subviewbutton[disabled="true"],
+.subviewbutton[disabled="true"]:hover,
+.subviewbutton[checked="true"][disabled="true"],
+.subviewbutton[checked="true"][disabled="true"]:hover {
+ color: var(--text-color-deemphasized);
+ background-color: transparent;
+}
+
+.subviewbutton > .toolbarbutton-text {
+ padding: 0;
+ padding-inline-start: 24px; /* This is 16px for the icon + 8px for the padding as defined below. */
+}
+
+.addon-banner-item > .toolbarbutton-text,
+.subviewbutton-iconic > .toolbarbutton-text,
+.subviewbutton[image] > .toolbarbutton-text,
+.subviewbutton[targetURI] > .toolbarbutton-text,
+.subviewbutton.restoreallitem > .toolbarbutton-text,
+.subviewbutton.bookmark-item > .toolbarbutton-text,
+.subviewbutton[checked="true"] > .toolbarbutton-text {
+ padding-inline-start: 8px; /* See '.subviewbutton-iconic > .toolbarbutton-text' rule above. */
+}
+
+.addon-banner-item > .toolbarbutton-icon,
+.subviewbutton-iconic > .toolbarbutton-icon {
+ width: 16px;
+ height: 16px;
+ -moz-context-properties: fill, stroke;
+}
+
+.addon-banner-item > .toolbarbutton-icon {
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+.subviewbutton-iconic > .toolbarbutton-icon {
+ fill: var(--appmenu-icons-fill);
+ stroke: var(--appmenu-icons-stroke);
+}
+
+/* We don't always display: none this item, and if it has forced width (like above)
+ * or margin, that impacts the position of the label. Fix:
+ */
+.subviewbutton > .toolbarbutton-icon {
+ margin: 0;
+}
+
+.subviewbutton.panel-subview-footer > .menu-text {
+ appearance: none;
+ padding-inline-start: 0 !important; /* to override menu.css on Windows */
+ padding-inline-end: 6px;
+ flex: 0 0;
+}
+
+.subviewbutton.panel-subview-footer > .toolbarbutton-text {
+ padding-inline-start: 0;
+}
+
+.subviewbutton[shortcut]::after {
+ content: attr(shortcut);
+ float: inline-end;
+}
+
+.PanelUI-subView .subviewbutton-nav::after {
+ -moz-context-properties: stroke, fill-opacity;
+ content: var(--icon-nav-right-sm);
+ stroke: currentColor;
+ fill-opacity: 0.6;
+ float: inline-end;
+}
+
+.PanelUI-subView .subviewbutton-nav:-moz-locale-dir(rtl)::after {
+ content: var(--icon-nav-left-sm);
+}
+
+.subviewbutton[shortcut]::after,
+.subviewbutton[shortcut]::after,
+.PanelUI-subView .subviewbutton-nav::after {
+ margin-inline-start: 10px;
+}
+
+.subviewbutton[checked="true"] {
+ list-style-image: var(--icon-check);
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+ color: inherit;
+}
+
+#appMenu-popup .toolbaritem-combined-buttons {
+ align-items: center;
+ flex-direction: row;
+ border: 0;
+ border-radius: 0;
+ margin-inline-end: 6px;
+ padding-block: 0;
+}
+
+panelmultiview .toolbaritem-combined-buttons > label {
+ flex: 1;
+ margin: 0;
+ padding-inline-start: 4px;
+}
+
+panelmultiview .toolbaritem-combined-buttons > spacer.before-label {
+ width: 36px; /* 12px toolbarbutton padding + 16px icon + 8px label padding start */
+}
+
+panelmultiview .toolbaritem-combined-buttons > spacer.after-label {
+ flex: 1;
+ width: 20px; /* a little bigger than the width of the scrollbar */
+}
+
+.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton {
+ flex: 0 0;
+ height: auto;
+ margin-inline-start: 18px;
+ min-width: auto;
+ padding-inline: 5px;
+ padding-block: var(--appmenu-button-padding);
+ --focus-outline-offset: 1px;
+}
+
+.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton-iconic {
+ padding-inline: var(--appmenu-button-padding);
+}
+
+.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton-iconic > .toolbarbutton-text,
+.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) >
+ .toolbarbutton-icon {
+ display: none;
+}
+
+.toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
+ padding-inline-start: 0;
+}
+
+.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton[type="radio"] {
+ margin-inline-start: 0;
+ margin-block: 1px;
+ padding: var(--appmenu-combined-radio-button-padding);
+ min-height: 22px;
+ border: 1px solid var(--appmenu-button-border-color);
+ border-radius: 0;
+}
+
+.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton[type="radio"]:focus {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-offset);
+}
+
+.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton[type="radio"]:first-of-type {
+ border-inline-end: none;
+ border-start-start-radius: var(--arrowpanel-menuitem-border-radius);
+ border-end-start-radius: var(--arrowpanel-menuitem-border-radius);
+}
+
+.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton[type="radio"]:last-of-type {
+ border-inline-start: none;
+ border-start-end-radius: var(--arrowpanel-menuitem-border-radius);
+ border-end-end-radius: var(--arrowpanel-menuitem-border-radius);
+}
+
+.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton[type="radio"][checked="true"] {
+ --appmenu-icons-fill: color-mix(in srgb, currentColor 20%, transparent);
+ --appmenu-icons-stroke: currentColor;
+ background-color: var(--select-focus-background-color);
+ color: var(--select-focus-text-color);
+}
+
+.subview-subheader {
+ font-size: inherit;
+ font-weight: inherit;
+ color: var(--text-color-deemphasized);
+}
+
+panelview .toolbarbutton-1 {
+ margin-top: 6px;
+}
+
+panelview .toolbarbutton-1:not([disabled],[open],:active):is(:hover,:focus-visible),
+toolbarbutton.subviewbutton:not([disabled],[open],:active):is(:hover,:focus-visible),
+menu.subviewbutton:not([disabled],:active)[_moz-menuactive],
+menuitem.subviewbutton:not([disabled],:active)[_moz-menuactive],
+.widget-overflow-list .toolbarbutton-1:not([disabled],[open],:active):is(:hover,:focus-visible),
+.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]) >
+ toolbarbutton:not([disabled],[open],:active):is(:hover,:focus-visible) {
+ color: inherit;
+ background-color: var(--arrowpanel-dimmed);
+}
+
+panelview .toolbarbutton-1:not([disabled]):is([open],:hover:active),
+toolbarbutton.subviewbutton:not([disabled]):is([open],:hover:active),
+menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
+menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
+.widget-overflow-list .toolbarbutton-1:not([disabled]):is([open],:hover:active),
+.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]) >
+ toolbarbutton:not([disabled]):is([open],:hover:active) {
+ color: inherit;
+ background-color: var(--arrowpanel-dimmed-further);
+ box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
+}
+
+.subviewbutton.panel-subview-footer {
+ margin: 0;
+ background-color: var(--arrowpanel-dimmed);
+ border-top: 1px solid var(--panel-separator-color);
+ border-radius: 0;
+}
+
+menuitem.panel-subview-footer:not([disabled],:active)[_moz-menuactive],
+.subviewbutton.panel-subview-footer:not([disabled],[open],:active):is(:hover,:focus-visible) {
+ background-color: var(--arrowpanel-dimmed-further);
+}
+
+menuitem.panel-subview-footer:not([disabled])[_moz-menuactive]:active,
+.subviewbutton.panel-subview-footer:not([disabled]):is([open],:hover:active) {
+ background-color: var(--arrowpanel-dimmed-even-further);
+ box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
+}
+
+#widget-overflow-mainView > .panel-subview-body > toolbarseparator,
+.PanelUI-subView menuseparator,
+.PanelUI-subView toolbarseparator,
+.cui-widget-panelview menuseparator,
+.cui-widget-panel toolbarseparator {
+ appearance: none;
+ min-height: 0;
+ border-top: 1px solid var(--panel-separator-color);
+ border-bottom: none;
+ margin: var(--panel-separator-margin);
+ padding: 0;
+}
+
+.PanelUI-subView toolbarseparator[orient="vertical"] {
+ height: 24px;
+ border-inline-start: 1px solid var(--panel-separator-color);
+ border-top: none;
+ margin: 0;
+ margin-inline: 6px 7px;
+}
+
+#search-container[cui-areatype="menu-panel"] {
+ padding-block: 6px;
+}
+
+toolbarpaletteitem[place="palette"] > #search-container {
+ min-width: 7em;
+ width: 7em;
+ min-height: 37px;
+ max-height: 37px;
+}
+
+.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]) > toolbarbutton {
+ border: 0;
+ margin: 0;
+ flex: 1;
+ padding-block: 4px;
+ flex-direction: row;
+}
+
+/* In customize mode, extend the buttons *only* in the panel, just to make them not look stupid */
+toolbarpaletteitem[place="menu-panel"] > .toolbaritem-combined-buttons > toolbarbutton {
+ min-width: var(--menu-panel-button-width);
+ max-width: var(--menu-panel-button-width);
+}
+
+.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]) > toolbarbutton:not(.toolbarbutton-1)[disabled] {
+ opacity: 0.4;
+ /* Override toolbarbutton.css which sets the color to GrayText */
+ color: inherit;
+}
+
+.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]) > separator {
+ appearance: none;
+ align-items: stretch;
+ margin: .5em 0;
+ width: 1px;
+ height: auto;
+ background: var(--panel-separator-color);
+ transition-property: margin;
+ transition-duration: 10ms;
+ transition-timing-function: ease;
+}
+
+.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]):hover > separator {
+ margin: 0;
+}
+
+#widget-overflow-mainView .panel-subview-body {
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.widget-overflow-list {
+ width: var(--wide-menu-panel-width);
+}
+
+/* In customize mode, the overflow list is constrained by its container,
+ * so we set width: auto to avoid the scrollbar not fitting.
+ */
+#customization-panelHolder > .widget-overflow-list {
+ width: auto;
+}
+
+toolbaritem[overflowedItem=true],
+.widget-overflow-list .toolbarbutton-1 {
+ width: 100%;
+ max-width: var(--wide-menu-panel-width);
+ background-repeat: no-repeat;
+ background-position: 0 center;
+}
+
+.widget-overflow-list .toolbarbutton-1 {
+ align-items: center;
+ flex-direction: row;
+}
+
+.widget-overflow-list .subviewbutton-nav::after {
+ margin-inline-start: 10px;
+ -moz-context-properties: stroke, fill-opacity;
+ content: var(--icon-nav-right-sm);
+ stroke: currentColor;
+ fill-opacity: 0.6;
+ float: inline-end;
+}
+
+.widget-overflow-list .subviewbutton-nav:-moz-locale-dir(rtl)::after {
+ content: var(--icon-nav-left-sm);
+}
+
+toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
+ opacity: 0.5;
+}
+
+.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text {
+ text-align: start;
+ padding-inline-start: .5em;
+}
+
+.subviewradio {
+ appearance: none;
+ align-items: center;
+ padding: 1px;
+ margin: 0 0 2px;
+ background-color: transparent;
+ border-radius: 2px;
+ border: 1px solid transparent;
+}
+
+.subviewradio:not([disabled],[open],:active):is(:hover,:focus-visible) {
+ background-color: var(--arrowpanel-dimmed);
+ border-color: var(--panel-separator-color);
+}
+
+.subviewradio[selected],
+.subviewradio[selected]:hover,
+.subviewradio:not([disabled]):is([open],:hover:active) {
+ background-color: var(--arrowpanel-dimmed-further);
+ border-color: var(--panel-separator-color);
+ box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
+}
+
+.subviewradio > .radio-check {
+ appearance: none;
+ width: 16px;
+ height: 16px;
+ border: 1px solid #e7e7e7;
+ border-radius: 50%;
+ margin: 1px 5px;
+ background-color: #f1f1f1;
+}
+
+.subviewradio > .radio-check[selected] {
+ background-color: #fff;
+ border: 4px solid #177ee6;
+}
+
+.panel-header {
+ align-items: center;
+ border-bottom: 1px solid var(--panel-separator-color);
+ display: flex;
+ height: 40px; /* fixed item height to prevent flex sizing; height + 2*4px padding */
+ padding: 4px;
+}
+
+.panel-header > h1 {
+ display: inline;
+ flex: auto;
+ font-size: inherit;
+ font-weight: 600;
+ margin: 0;
+ text-align: center;
+}
+
+.panel-header > h1 > span {
+ display: inline-block;
+ white-space: pre-wrap;
+}
+
+.panel-header > .subviewbutton-back + h1 {
+ /* Add the size of the back button to center properly. */
+ margin-inline-end: 32px;
+}
+
+.panel-header > .subviewbutton-back {
+ -moz-context-properties: stroke;
+ stroke: var(--arrowpanel-color);
+ list-style-image: var(--icon-nav-left-sm);
+ padding: 10px;
+}
+
+.subviewbutton-back {
+ transform: translateY(1px);
+ margin: 0 4px;
+}
+
+.subviewbutton-back:-moz-locale-dir(rtl) {
+ list-style-image: var(--icon-nav-right-sm);
+}
+
+.panel-header > .subviewbutton-back > .toolbarbutton-icon {
+ width: 12px;
+ height: 12px;
+}
+
+.subviewbutton-back > .toolbarbutton-text {
+ /* !important to override .cui-widget-panel .toolbarbutton-text
+ * selector further down. */
+ display: none !important;
+}
+
+.subviewbutton.download {
+ align-items: flex-start;
+ min-height: 48px;
+ padding-inline-start: 8px;
+}
+
+.subviewbutton.download > .toolbarbutton-icon,
+.subviewbutton.download > .toolbarbutton-text > label {
+ margin: 4px 0 0;
+}
+
+.subviewbutton.download > .toolbarbutton-icon {
+ width: 32px;
+ height: 32px;
+}
+
+.subviewbutton.download > .toolbarbutton-text > .status-text {
+ color: var(--text-color-deemphasized);
+ font-size: .9em;
+}
+
+.button-appmenu[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+ display: flex;
+ background: center no-repeat transparent;
+ background-size: contain;
+ border: none;
+ box-shadow: none;
+}
+
+.button-appmenu[badge-status="update-available"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+.button-appmenu[badge-status="update-downloading"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+.button-appmenu[badge-status="update-manual"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+.button-appmenu[badge-status="update-other-instance"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
+.button-appmenu[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+ margin-top: -3px !important;
+ margin-inline-end: -2px !important;
+ min-width: 12px;
+ min-height: 12px;
+ -moz-context-properties: fill;
+ fill: var(--color-green-60);
+ background-image: var(--icon-notification-sm);
+ background-size: 12px;
+}
+
+.button-appmenu[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+ height: 12px;
+ margin-inline-end: -5px !important;
+ background-image: var(--icon-warning-sm);
+ box-shadow: none;
+ border-radius: 0;
+ -moz-context-properties: fill, stroke;
+ fill: var(--color-amber-30);
+ stroke: var(--color-amber-60);
+}
+
+.button-appmenu:focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-offset);
+}
+
+/* Main menu banner menuitems */
+
+.panel-banner-item {
+ appearance: none;
+ align-items: flex-start;
+ margin: var(--appmenu-button-margin);
+ padding-inline: 8px;
+ padding-block: calc(var(--appmenu-button-padding) + 3px);
+ border-radius: var(--arrowpanel-menuitem-border-radius);
+ color: var(--button-color);
+ background-color: color-mix(in srgb, currentColor 7%, transparent);;
+ margin-bottom: 4px;
+ font-weight: 600;
+}
+
+.panel-banner-item:not([disabled]):hover {
+ background-color: var(--arrowpanel-dimmed);
+}
+
+.panel-banner-item:not([disabled]):hover:active {
+ background-color: var(--arrowpanel-dimmed-further);
+}
+
+.panel-banner-item > .toolbarbutton-text {
+ display: inline-block;
+ padding: 0;
+}
+
+.panel-banner-item > .toolbarbutton-icon {
+ width: 16px;
+ height: 16px;
+ /* Move the icon to appear after the text label. */
+ order: 2;
+}
+
+.panel-banner-item[notificationid="update-available"] > .toolbarbutton-icon,
+.panel-banner-item[notificationid="update-downloading"] > .toolbarbutton-icon,
+.panel-banner-item[notificationid="update-manual"] > .toolbarbutton-icon,
+.panel-banner-item[notificationid="update-other-instance"] > .toolbarbutton-icon,
+.panel-banner-item[notificationid="update-restart"] > .toolbarbutton-icon {
+ background-image: url(chrome://messenger/skin/icons/app-update-badge.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ margin-inline-start: 6px;
+ -moz-context-properties: fill;
+ fill: var(--color-green-60);
+}
+
+.addon-banner-item {
+ appearance: none;
+ font-weight: 600;
+ margin: 0 8px 4px;
+ padding-inline: 8px;
+ padding-block: var(--appmenu-button-padding);
+ box-sizing: border-box;
+ box-shadow: none;
+ color: var(--appmenu-warning-color);
+ background-color: var(--appmenu-warning-background-color);
+ border-top: 1px solid var(--appmenu-warning-border-color);
+ border-inline: 1px solid var(--appmenu-warning-border-color);
+ border-radius: var(--arrowpanel-menuitem-border-radius);
+ transition: background-color;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, var(--appmenu-warning-color) 20%, transparent);
+ stroke: var(--appmenu-warning-color);
+}
+
+.addon-banner-item::after {
+ content: "";
+ width: 16px;
+ height: 16px;
+ margin-inline: 10px 0;
+ display: flex;
+ background: var(--icon-warning) no-repeat center;
+}
+
+:root[lwt-popup-brighttext] .addon-banner-item::after {
+ -moz-context-properties: fill;
+ fill: var(--color-amber-30);
+}
+
+.addon-banner-item:last-child {
+ border-bottom: 1px solid var(--appmenu-warning-border-color);
+}
+
+.addon-banner-item:focus,
+.addon-banner-item:hover {
+ background-color: var(--appmenu-warning-background-color-hover);
+}
+
+.addon-banner-item:hover:active {
+ background-color: var(--appmenu-warning-background-color-active);
+}
+
+menulist {
+ border: 1px solid var(--button-border-color);
+ background-color: var(--button-background-color);
+}
+
+menulist:not([disabled="true"],[open="true"]):hover,
+menulist[open="true"]:not([disabled="true"]) {
+ background-color: var(--button-hover-background-color);
+ border-color: var(--button-border-color);
+}
+
+/* App Menu items icons */
+
+/* Sync */
+
+#appmenu_signin {
+ list-style-image: var(--icon-sync);
+}
+
+#appmenu-submenu-sync-now{
+ list-style-image: var(--icon-sync);
+}
+
+#appmenu-submenu-sync-settings {
+ list-style-image: var(--icon-settings);
+}
+
+#appmenu-submenu-sync-sign-out{
+ list-style-image: var(--icon-quit);
+}
+
+#syncSeparator {
+ background-color: var(--color-blue-50);
+ background-image: linear-gradient(to right, var(--color-teal-40), var(--color-magenta-60));
+ height: 1px;
+ border: none;
+ border-radius: 2px;
+}
+
+#appmenu-manage-sync-icon {
+ content: var(--icon-contact);
+}
+
+.appmenu-sync-account-email {
+ font-weight: 600;
+}
+
+@keyframes syncRotate {
+ from { transform: rotate(0); }
+ to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ #appmenu-submenu-sync-now[syncstatus="active"] > .toolbarbutton-icon {
+ animation: syncRotate 0.8s linear infinite;
+ }
+}
+
+/* New Account and Create */
+
+#appmenu_new {
+ list-style-image: var(--icon-new-contact);
+}
+
+#appmenu_create {
+ list-style-image: var(--icon-add);
+}
+
+#appmenu_newNewMsgCmd,
+#appmenu_newCreateEmailAccountMenuItem {
+ list-style-image: var(--icon-new-mail);
+}
+
+#appmenu_newMailAccountMenuItem {
+ list-style-image: var(--icon-mail);
+}
+
+#appmenu_calendar-new-calendar-menu-item {
+ list-style-image: var(--icon-calendar);
+}
+
+#appmenu_newAB {
+ list-style-image: var(--icon-address-book);
+}
+
+#appmenu_newABMenuItem,
+#appmenu_newCardDAVMenuItem,
+#appmenu_newLdapMenuItem {
+ list-style-image: var(--icon-new-address-book);
+}
+
+#appmenu_newIMAccountMenuItem {
+ list-style-image: var(--icon-chat);
+}
+
+#appmenu_newFeedAccountMenuItem {
+ list-style-image: var(--icon-rss);
+}
+
+#appmenu_newNewsgroupAccountMenuItem {
+ list-style-image: var(--icon-newsletter);
+}
+
+#appmenu_calendar-new-event-menu-item {
+ list-style-image: var(--icon-new-event);
+}
+
+#appmenu_calendar-new-task-menu-item {
+ list-style-image: var(--icon-new-task);
+}
+
+#appmenu_open {
+ list-style-image: var(--icon-draft);
+}
+
+#appmenu_OpenMessageFileMenuitem {
+ list-style-image: var(--icon-mail);
+}
+
+#appmenu_OpenCalendarFileMenuitem {
+ list-style-image: var(--icon-calendar);
+}
+
+#appmenu_View {
+ list-style-image: var(--icon-eye);
+}
+
+#appmenu_Toolbars {
+ list-style-image: var(--icon-spaces-menu);
+}
+
+#appmenu_MessagePaneLayout {
+ list-style-image: var(--icon-layout);
+}
+
+#appmenu_FolderViews {
+ list-style-image: var(--icon-folder);
+}
+
+#appMenu-uiDensity-controls .toolbarbutton-icon {
+ content: var(--icon-spaces-menu);
+}
+
+#appMenu-fontSize-controls .toolbarbutton-icon {
+ content: var(--icon-font);
+}
+
+#appmenu_newCard {
+ list-style-image: var(--icon-new-contact);
+}
+
+/* Settings */
+
+#appmenu_addons {
+ list-style-image: var(--icon-extension);
+}
+
+#appmenu_accountmgr {
+ list-style-image: var(--icon-account-settings);
+}
+
+#appmenu_preferences {
+ list-style-image: var(--icon-settings);
+}
+
+/* Density Settings */
+
+#appmenu_uiDensityCompact {
+ list-style-image: var(--icon-density-compact);
+}
+
+#appmenu_uiDensityNormal {
+ list-style-image: var(--icon-density-default);
+}
+
+#appmenu_uiDensityTouch {
+ list-style-image: var(--icon-density-relaxed);
+}
+
+/* Font scaling */
+
+#appMenu-fontSizeReduce-button {
+ list-style-image: var(--font-size-decrease);
+}
+#appMenu-fontSizeEnlarge-button {
+ list-style-image: var(--font-size-increase);
+}
+
+#appMenu-fontSizeReduce-button:hover,
+#appMenu-fontSizeReduce-button:focus,
+#appMenu-fontSizeReduce-button:active,
+#appMenu-fontSizeReset-button:hover,
+#appMenu-fontSizeReset-button:focus,
+#appMenu-fontSizeReset-button:active,
+#appMenu-fontSizeEnlarge-button:hover,
+#appMenu-fontSizeEnlarge-button:focus,
+#appMenu-fontSizeEnlarge-button:active,
+#appMenu-fullscreen-button:hover,
+#appMenu-fullscreen-button:focus,
+#appMenu-fullscreen-button:active {
+ color: unset;
+ background-color: unset;
+ box-shadow: unset;
+}
+
+#appMenu-fontSizeReduce-button > .toolbarbutton-icon,
+#appMenu-fontSizeEnlarge-button > .toolbarbutton-icon {
+ width: var(--appmenu-fontsize-icon-size);
+ height: var(--appmenu-fontsize-icon-size);
+ -moz-context-properties: fill, stroke;
+ fill: var(--button-background-color, ButtonFace);
+ stroke: var(--button-color);
+ border-radius: 50%;
+ margin-block-start: 1px;
+ padding: 0;
+}
+
+/* Compensate the smaller icon. */
+#appMenu-fontSizeEnlarge-button > .toolbarbutton-icon {
+ margin-inline-end: -2px;
+}
+
+:root[uidensity="compact"] #appMenu-fontSizeEnlarge-button > .toolbarbutton-icon {
+ margin-inline-end: -1px;
+}
+
+#appMenu-fontSizeReset-button > .toolbarbutton-text {
+ display: flex;
+ justify-content: center;
+ border: 1px solid var(--appmenu-button-border-color);
+ border-radius: 2px;
+ min-width: var(--appmenu-fontsize-reset-button-width);
+ text-align: center;
+ padding: 2px;
+}
+
+#appMenu-fontSizeReset-button:hover > .toolbarbutton-text {
+ background-color: var(--button-hover-background-color);
+}
+#appMenu-fontSizeReduce-button:hover > .toolbarbutton-icon,
+#appMenu-fontSizeEnlarge-button:hover > .toolbarbutton-icon {
+ fill: var(--button-hover-background-color);
+}
+
+#appMenu-fontSizeReset-button:active > .toolbarbutton-text {
+ background-color: var(--button-active-background-color);
+}
+#appMenu-fontSizeReduce-button:active > .toolbarbutton-icon,
+#appMenu-fontSizeEnlarge-button:active > .toolbarbutton-icon {
+ fill: var(--button-active-background-color);
+}
+
+#appMenu-fontSizeReset-button:focus > .toolbarbutton-text,
+#appMenu-fontSizeReduce-button:focus > .toolbarbutton-icon,
+#appMenu-fontSizeEnlarge-button:focus > .toolbarbutton-icon {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-offset);
+}
+
+#appMenu-fontSize-controls > .subviewbutton {
+ margin-inline-start: 2px;
+ padding: 3px;
+}
+
+#appMenu-fontSize-controls > #appMenu-fontSizeEnlarge-button {
+ padding-inline-end: 0;
+}
+
+:root[uidensity="compact"] #appMenu-fontSizeReduce-button > .toolbarbutton-icon,
+:root[uidensity="compact"] #appMenu-fontSizeEnlarge-button > .toolbarbutton-icon {
+ margin-block-start: 2px;
+}
+
+/* Tools */
+
+#appmenu_import {
+ list-style-image: var(--icon-import);
+}
+
+#appmenu_export {
+ list-style-image: var(--icon-export);
+}
+
+#appmenu_searchCmd {
+ list-style-image: var(--icon-search);
+}
+
+#appmenu_filtersCmd {
+ list-style-image: var(--icon-filter);
+}
+
+#appmenu_openSavedFilesWnd {
+ list-style-image: var(--icon-download);
+}
+
+#appmenu_manageKeysOpenPGP {
+ list-style-image: var(--icon-key);
+}
+
+#appmenu_activityManager {
+ list-style-image: var(--icon-paste);
+}
+
+#appmenu_toolsMenu,
+#appmenu_devtoolsToolbox {
+ list-style-image: var(--icon-tools);
+}
+
+/* Help */
+
+#appmenu_help,
+#appmenu_openHelp {
+ list-style-image: var(--icon-question);
+}
+
+#appmenu_openTour {
+ list-style-image: var(--icon-features);
+}
+
+#appmenu_keyboardShortcuts {
+ list-style-image: var(--icon-shortcut);
+}
+
+#appmenu_getInvolved {
+ list-style-image: var(--icon-handshake);
+}
+
+#appmenu_makeDonation {
+ list-style-image: var(--icon-heart);
+}
+
+#appmenu_submitFeedback {
+ list-style-image: var(--icon-chat);
+}
+
+#appmenu_troubleshootMode {
+ list-style-image: var(--icon-tools);
+}
+
+#appmenu_troubleshootingInfo {
+ list-style-image: var(--icon-draft);
+}
+
+#appmenu_about {
+ list-style-image: var(--icon-info);
+}
+
+/* Quit */
+
+#appmenu-quit {
+ list-style-image: var(--icon-quit);
+}
diff --git a/comm/mail/themes/shared/mail/popupPanel.css b/comm/mail/themes/shared/mail/popupPanel.css
new file mode 100644
index 0000000000..c46d4457e5
--- /dev/null
+++ b/comm/mail/themes/shared/mail/popupPanel.css
@@ -0,0 +1,213 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+.editContactPanel_rowLabel {
+ text-align: end;
+}
+
+#editContactHeader {
+ display: flex;
+ margin-bottom: 15px;
+}
+
+#editContactPanelIcon {
+ -moz-context-properties: fill, stroke, stroke-opacity;
+ fill: color-mix(in srgb, var(--toolbarbutton-icon-fill-attention) 20%, transparent);
+ stroke: var(--toolbarbutton-icon-fill-attention);
+ width: 20px;
+ height: 20px;
+ margin-block: auto;
+ margin-inline: 3px 12px;
+}
+
+#editContactPanelTitle {
+ font-size: 130%;
+ font-weight: bold;
+ margin-block: auto;
+}
+
+#editContactContent {
+ margin-block: 6px 15px;
+ display: grid;
+ grid-template-columns: auto 1fr;
+ align-items: center;
+}
+
+#editContactEmail {
+ min-width: 20em;
+}
+
+html|input.editContactTextbox {
+ appearance: none;
+ cursor: text;
+ color: var(--toolbar-field-color);
+ background-color: var(--toolbar-field-background-color);
+ border: 1px solid var(--toolbar-field-border-color);
+ border-radius: var(--button-border-radius);
+ padding: 3px 8px;
+ width: 20em;
+}
+
+html|input.editContactTextbox:focus {
+ border-color: var(--focus-outline-color);
+ outline: 1px solid var(--focus-outline-color);
+}
+
+html|input.editContactTextbox[readonly] {
+ border-color: transparent !important;
+ background-color: inherit !important;
+ box-shadow: none;
+ color: inherit;
+ outline: none !important;
+}
+
+#contactMoveDisabledText {
+ width: 20em;
+}
+
+#editContactAddressBookList {
+ appearance: none;
+ background-color: var(--arrowpanel-dimmed);
+ background-image: none;
+ border: 1px solid;
+ border-color: var(--panel-separator-color) !important;
+ box-shadow: none;
+ color: inherit;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+#editContactAddressBookList:not([disabled="true"],[open="true"]):hover {
+ background-image: linear-gradient(var(--arrowpanel-dimmed),
+ var(--arrowpanel-dimmed));
+ background-color: var(--arrowpanel-dimmed);
+}
+
+#editContactAddressBookList[open="true"] {
+ background-image: linear-gradient(var(--arrowpanel-dimmed-further),
+ var(--arrowpanel-dimmed-further));
+ box-shadow: 0 1px 0 hsla(210, 4%, 10%, .05) inset;
+}
+
+#spacesToolbarCustomizationPanel {
+ margin-block-end: 0;
+}
+
+.popup-panel {
+ margin-block: 0;
+}
+
+.popup-panel-body {
+ padding: 9px 15px;
+ min-width: 300px;
+}
+
+.popup-panel-body h3 {
+ margin-block: 0 15px;
+ font-size: 1.4em;
+ font-weight: 500;
+}
+
+.popup-panel-options-grid {
+ display: grid;
+ margin-block: 6px 15px;
+ grid-template-columns: 1fr auto;
+ align-items: center;
+ gap: 6px;
+}
+
+.popup-panel-options-grid input {
+ margin-inline-end: 0;
+}
+
+.popup-panel-column-container {
+ grid-column: 1 / 3;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+
+.popup-panel button:focus-visible,
+.popup-panel input[type="color"]:focus-visible {
+ outline: 2px solid var(--focus-outline-color);
+ outline-offset: -1px;
+}
+
+.popup-panel label,
+.popup-panel checkbox {
+ margin-inline-start: 0;
+}
+
+.popup-panel label.indent,
+.popup-panel checkbox.indent {
+ margin-inline-start: 23px;
+}
+
+.popup-panel-buttons-container {
+ display: flex;
+ align-items: center;
+ margin: 0;
+ justify-content: end;
+}
+
+.popup-panel-buttons-container > button {
+ appearance: none;
+ border: 0;
+ border-radius: 4px;
+ color: var(--button-color, inherit);
+ background-color: var(--button-background-color, color-mix(in srgb, currentColor 13%, transparent));
+ padding: 8px 16px;
+ font-weight: 600;
+ min-width: 0;
+ margin-inline: 8px 0;
+ margin-bottom: 0;
+}
+
+@media (prefers-contrast) {
+ .popup-panel-buttons-container > button {
+ outline: 1px solid var(--button-border-color);
+ }
+}
+
+.popup-panel-buttons-container > button[disabled] {
+ opacity: 0.4;
+}
+
+.popup-panel-buttons-container > button:focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-offset);
+}
+
+.popup-panel-buttons-container > button:not([disabled]):hover {
+ background-color: var(--button-hover-background-color, color-mix(in srgb, currentColor 17%, transparent));
+ color: var(--button-hover-text-color);
+}
+
+
+.popup-panel-buttons-container > button:not([disabled]):hover:active {
+ background-color: var(--button-active-background-color, color-mix(in srgb, currentColor 30%, transparent));
+}
+
+.popup-panel-buttons-container > button.primary:not([disabled]) {
+ color: var(--button-primary-color);
+ background-color: var(--button-primary-background-color);
+}
+
+.popup-panel-buttons-container > button.primary:not([disabled]):hover {
+ background-color: var(--button-primary-hover-background-color);
+}
+
+.popup-panel-buttons-container > button.primary:not([disabled]):hover:active {
+ background-color: var(--button-primary-active-background-color);
+}
+
+.checkbox-description {
+ margin-inline-start: 23px;
+ font-size: 0.95rem;
+ opacity: 0.8;
+ margin-block: -5px 6px;
+}
diff --git a/comm/mail/themes/shared/mail/preferences/applications.css b/comm/mail/themes/shared/mail/preferences/applications.css
new file mode 100644
index 0000000000..d68855d258
--- /dev/null
+++ b/comm/mail/themes/shared/mail/preferences/applications.css
@@ -0,0 +1,234 @@
+/* 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/. */
+
+/**
+ * Line up the actions menu with action labels above and below it.
+ * Equalize the distance from the left side of the action box to the left side
+ * of the icon for both the menu and the non-menu versions of the action box.
+ * Also make sure the labels are the same distance away from the icons.
+ */
+
+.shortDetails {
+ text-align: end;
+ opacity: 0.5;
+}
+
+#filter {
+ width: 100%;
+}
+
+#handlersSortSelect {
+ padding-block: 0;
+}
+
+#handlersView {
+ height: 210px;
+ overflow-y: auto;
+ border: 1px solid var(--in-content-box-border-color);
+ border-radius: 4px;
+}
+
+#handlersTable {
+ width: 100%;
+ border-spacing: 0;
+}
+
+#handlersTable thead > tr {
+ position: sticky;
+ top: 0;
+ /* Background color is needed for sticky headers. */
+ background-color: var(--in-content-page-background);
+}
+
+#handlersTable thead > tr > th:not(:first-child) {
+ border-inline-start: 1px solid var(--in-content-box-border-color);
+}
+
+#handlersTable thead > tr > th {
+ border-block-end: 1px solid var(--in-content-box-border-color);
+}
+
+#handlersTable tbody > tr:hover .typeCell {
+ background-color: var(--in-content-item-hover);
+}
+
+#handlersTable tbody > tr:hover .actionCell menulist {
+ /* Get hover effect if anywhere in the row is hovered. */
+ background-color: var(--in-content-button-background-hover);
+}
+
+#handlersTable tbody > tr:focus-within .typeCell {
+ background-color: var(--in-content-item-selected);
+ color: var(--in-content-item-selected-text);
+}
+
+#handlersTable :is(th, td) {
+ padding: 0;
+ width: 50%;
+}
+
+.handlerHeaderButton {
+ /* Align with .typeIcon. */
+ padding-inline: 10px;
+ border: none;
+ border-radius: 0;
+ margin: 0;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.handlerHeaderButton:focus-visible {
+ /* The focus outline is drawn on the inside of the element (it has width 2px),
+ * rather than on the outside as usual. This is needed because otherwise the
+ * outline is not visible on the sides that are cut off by the scroll
+ * container #handlersView's edges. */
+ outline-offset: -2px;
+}
+
+.handlerSortHeaderIcon {
+ display: inline-block;
+ width: 12px;
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+.handlerSortHeaderIcon[descending] {
+ transform: scaleY(-1);
+}
+
+.handlerSortHeaderIcon:not([src]) {
+ /* Still want to take up space. */
+ visibility: hidden;
+}
+
+.typeLabel {
+ display: flex;
+ align-items: center;
+}
+
+.typeLabel > .typeIcon {
+ flex: 0 0 auto;
+}
+
+.typeLabel > .typeDescription {
+ flex: 1 1 auto;
+}
+
+.typeIcon {
+ width: 16px;
+ height: 16px;
+ margin-inline: 10px 9px;
+}
+
+.typeIcon:not([src]) {
+ visibility: hidden;
+}
+
+.actionsMenu {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ border-radius: 0;
+ margin: 0;
+ padding-block: 0;
+}
+
+#handlersTable tbody > tr:not(:focus-within) .actionsMenu {
+ background-color: transparent;
+ --in-content-button-border-color: transparent;
+}
+
+#handlersTable tbody > tr:not(:is(:hover,:focus-within)) .actionsMenu::part(dropmarker) {
+ display: none;
+}
+
+.actionsMenu:focus-visible {
+ outline-offset: -2px;
+}
+
+.actionsMenu::part(icon) {
+ margin-inline: 5px !important;
+ height: 16px;
+ width: 16px;
+}
+
+.actionsMenu > menupopup > menuitem > .menu-iconic-left {
+ margin-inline-end: 8px !important;
+ /** Make the icons appear.
+ * Note: we display the icon box for every item whether or not it has an icon
+ * so the labels of all the items align vertically. */
+ display: flex;
+ min-width: 16px;
+}
+
+/**
+ * Used by the cloudFile manager
+ */
+
+#provider-listing {
+ width: 200px;
+}
+
+#cloudFileDefaultPanel {
+ text-align: center;
+ padding-top: 150px;
+}
+
+#addCloudFileAccountButtons button,
+#addCloudFileAccount,
+#removeCloudFileAccount,
+#moreProvidersLink {
+ margin: 4px 0 0;
+ text-align: center;
+}
+
+#addCloudFileAccountButtons button .button-icon {
+ width: 16px;
+ height: 16px;
+ margin-inline-end: 8px;
+}
+
+#addCloudFileAccountListItems {
+ text-align: start;
+}
+
+#addCloudFileAccountListItems > menuitem > .menu-iconic-left {
+ display: flex;
+}
+
+#moreProvidersLink {
+ padding: 4px;
+}
+
+#cloudFileView,
+#cloudFileBox {
+ flex: 1 auto;
+}
+
+#cloudFileView > richlistitem {
+ min-height: 35px;
+}
+
+.cloudfileAccount {
+ padding: 4px;
+}
+
+.cloudfileAccount > label {
+ flex: 1;
+}
+
+.cloudfileAccount > input {
+ min-width: 10ch !important;
+ width: 10ch;
+}
+
+.cloudfileAccount:not([selected]) > label {
+ pointer-events: none;
+}
+
+#cloudFileToggleAndThreshold {
+ padding-bottom: 6px;
+}
diff --git a/comm/mail/themes/shared/mail/preferences/calendar.svg b/comm/mail/themes/shared/mail/preferences/calendar.svg
new file mode 100644
index 0000000000..e660539db8
--- /dev/null
+++ b/comm/mail/themes/shared/mail/preferences/calendar.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M3 5h10V2.17c1.165.413 2 1.524 2 2.83v7a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V5c0-1.306.835-2.417 2-2.83V5zm0 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6H3zm3-4h4v2H6V2zM4.5 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5zm7 0a.5.5 0 0 1 .5.5v3a.5.5 0 1 1-1 0v-3a.5.5 0 0 1 .5-.5zM4 7h2v2H4V7zm6 0h2v2h-2V7zm-6 3h2v2H4v-2zm3 0h2v2H7v-2zm0-3h2v2H7V7z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/preferences/chat.svg b/comm/mail/themes/shared/mail/preferences/chat.svg
new file mode 100644
index 0000000000..c1c9f5dfed
--- /dev/null
+++ b/comm/mail/themes/shared/mail/preferences/chat.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity" viewBox="0 0 16 16">
+ <path d="M12 16a1 1 0 0 1-.77-.37L8.26 12H2.42A2.43 2.43 0 0 1 0 9.58V3.42A2.43 2.43 0 0 1 2.42 1h11.16A2.43 2.43 0 0 1 16 3.42v6.16A2.43 2.43 0 0 1 13.58 12H13v3a1 1 0 0 1-1 1zM2.42 3a.42.42 0 0 0-.42.42v6.16c0 .232.188.42.42.42h6.31a1 1 0 0 1 .77.37l1.5 1.82V11a1 1 0 0 1 1-1h1.58a.42.42 0 0 0 .42-.42V3.42a.42.42 0 0 0-.42-.42H2.42z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/preferences/dialog.css b/comm/mail/themes/shared/mail/preferences/dialog.css
new file mode 100644
index 0000000000..737f3c6f73
--- /dev/null
+++ b/comm/mail/themes/shared/mail/preferences/dialog.css
@@ -0,0 +1,174 @@
+/* - 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+@media not (prefers-contrast) {
+ @media not (prefers-color-scheme: dark) {
+ :root > * {
+ --in-content-button-background: var(--grey-90-a10);
+ --in-content-button-background-hover: var(--grey-90-a20);
+ --in-content-button-background-active: var(--grey-90-a30);
+ }
+ }
+
+ @media (prefers-color-scheme: dark) {
+ :root > * {
+ --in-content-page-background: #2a2a2e;
+ --in-content-button-background: rgba(249, 249, 250, 0.1);
+ --in-content-button-background-hover: rgba(249, 249, 250, 0.15);
+ --in-content-button-background-active: rgba(249, 249, 250, 0.2);
+ --in-content-primary-button-background: #45a1ff;
+ --in-content-primary-button-background-hover: #65c1ff;
+ --in-content-primary-button-background-active: #85e1ff;
+ --in-content-focus-outline-color: #45a1ff;
+ }
+ }
+}
+
+dialog,
+window,
+.windowDialog {
+ appearance: none;
+ background-color: var(--in-content-page-background);
+ color: var(--in-content-page-color);
+ margin: 0;
+ padding: 0;
+}
+
+body > dialog {
+ background-color: unset;
+}
+
+.contentPane,
+dialog::part(content-box) {
+ flex: 1;
+}
+
+.contentPane.doScroll,
+dialog.doScroll::part(content-box) {
+ overflow-y: auto;
+ contain: size;
+}
+
+dialog.doScroll {
+ margin-inline: -4px;
+}
+
+dialog.doScroll::part(content-box) {
+ padding-inline: 4px;
+}
+
+tabbox {
+ /* override the rule in certManager.xhtml */
+ margin: 0 0 5px !important;
+}
+
+tabpanels {
+ font-size: 1em;
+}
+
+tabs,
+label,
+description,
+#useDocumentColors {
+ margin-inline: 4px;
+}
+
+/* This element (in passwordManager.xhtml) has no height until Fluent fills
+ it, but we need to calculate the document height before then. The value is
+ the same as the line-height for a label in preferences.css. */
+label#signonsIntro {
+ height: 1.8em;
+}
+
+tree {
+ min-height: 150px;
+}
+
+caption {
+ padding-inline-start: 0;
+}
+
+groupbox {
+ margin-top: 0;
+ margin-inline: 4px;
+ padding-block: 0 5px;
+}
+
+groupbox description {
+ margin-inline: 0;
+}
+
+menulist label {
+ font-weight: unset;
+}
+
+.actionButtons + resizer {
+ display: none;
+}
+
+menulist,
+button,
+html|input[type="number"] {
+ margin-inline-end: 0;
+}
+
+button,
+menulist {
+ padding: 0 8px;
+}
+
+/* Create a separate rule to unset these styles on .tree-input instead of
+ using :not(.tree-input) so the selector specifity doesn't change. */
+textbox.tree-input {
+ font-size: unset;
+}
+
+/* Give some space in front of elements that follows a menulist, button or an
+ input in dialogs */
+.startSpacing {
+ margin-inline-start: 8px;
+}
+
+#siteCol {
+ flex: 3 auto;
+}
+
+#statusCol {
+ flex: 1 auto;
+}
+
+#domainCol {
+ flex: 2 auto;
+}
+
+#nameCol {
+ flex: 1 auto;
+}
+
+/* Adjust the Lightning Edit Category dialog */
+#colorSelectRow {
+ margin-top: 10px;
+ margin-inline-start: 4px;
+}
+
+#totalOpenTime {
+ min-width: calc(3ch + 55px);
+}
+
+#logView {
+ border: 1px solid var(--in-content-box-border-color);
+ margin: 0 4px 5px;
+}
+
+#cookieInfoSettings {
+ margin-top: 8px;
+ margin-inline-end: -4px;
+}
+
+/* Edit SMTP Server dialog */
+#smtpUsername {
+ margin-inline: 8px 0;
+}
diff --git a/comm/mail/themes/shared/mail/preferences/general.svg b/comm/mail/themes/shared/mail/preferences/general.svg
new file mode 100644
index 0000000000..d20eaa97d3
--- /dev/null
+++ b/comm/mail/themes/shared/mail/preferences/general.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M7 11.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0M21.48 10h-2.65a7.45 7.45 0 0 0-1.1-2.64L19.6 5.5a1.5 1.5 0 1 0-2.1-2.13l-1.9 1.87c-.8-.52-1.7-.9-2.65-1.1V1.5a1.5 1.5 0 1 0-3 0V4l.03.14c-.96.2-1.86.58-2.65 1.1L5.5 3.37A1.5 1.5 0 1 0 3.38 5.5l1.87 1.86c-.52.8-.9 1.68-1.1 2.63H1.5a1.5 1.5 0 1 0 0 3h2.64c.2.9.58 1.8 1.1 2.6l-1.87 1.9a1.5 1.5 0 1 0 2.12 2.1l1.8-1.9c.8.52 1.7.9 2.62 1.1v2.64a1.5 1.5 0 1 0 3 0V18.8c.95-.2 1.84-.57 2.63-1.1l1.87 1.88a1.5 1.5 0 0 0 2.12 0 1.5 1.5 0 0 0 0-2.1L17.7 15.6c.52-.8.9-1.68 1.1-2.64h2.64a1.5 1.5 0 1 0 0-3"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/preferences/passwordmgr.css b/comm/mail/themes/shared/mail/preferences/passwordmgr.css
new file mode 100644
index 0000000000..7496dc44af
--- /dev/null
+++ b/comm/mail/themes/shared/mail/preferences/passwordmgr.css
@@ -0,0 +1,44 @@
+/* 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/. */
+
+#providerCol {
+ flex: 40 40;
+}
+
+#userCol {
+ flex: 25 25;
+}
+
+#passwordCol {
+ flex: 15 15;
+}
+
+#timeCreatedCol {
+ flex: 10 10;
+}
+
+#timeLastUsedCol {
+ flex: 20 20;
+}
+
+#timePasswordChangedCol {
+ flex: 10 10;
+}
+
+#timesUsedCol {
+ flex: 1;
+}
+
+treechildren::-moz-tree-image(providerCol) {
+ list-style-image: url(chrome://global/skin/icons/defaultFavicon.svg);
+ -moz-context-properties: fill;
+ fill: currentColor;
+ width: 16px;
+ height: 16px;
+ margin-inline-end: 5px;
+}
+
+treechildren::-moz-tree-cell-text(passwordCol) {
+ font-family: monospace;
+}
diff --git a/comm/mail/themes/shared/mail/preferences/preferences.css b/comm/mail/themes/shared/mail/preferences/preferences.css
new file mode 100644
index 0000000000..9f19ef5dc1
--- /dev/null
+++ b/comm/mail/themes/shared/mail/preferences/preferences.css
@@ -0,0 +1,1098 @@
+/* - 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/preferences/subdialog.css");
+@import url("chrome://messenger/skin/colors.css");
+@import url("chrome://messenger/skin/icons.css");
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+body {
+ font-size: 1.1rem;
+}
+
+button,
+menulist,
+html|select,
+html|input[type="color"] {
+ min-height: var(--in-content-button-height);
+}
+
+search-textbox {
+ min-height: var(--in-content-button-height);
+}
+
+button {
+ padding: 0 12px;
+}
+
+menulist {
+ padding: 0 6px;
+}
+
+button[open="true"],
+menulist[open="true"] {
+ color: var(--in-content-button-text-color-hover);
+}
+
+button,
+menulist,
+html|select,
+html|input:is([type="email"],[type="number"],[type="color"],[type="text"],[type="password"],[type="url"]),
+html|textarea,
+search-textbox {
+ border-radius: var(--in-content-button-border-radius);
+}
+
+#MailPreferences {
+ text-rendering: optimizeLegibility;
+}
+
+#prefBox {
+ position: relative;
+}
+
+#pref-category-box {
+ background-color: var(--in-content-categories-background);
+ border-inline-end: 1px solid var(--in-content-categories-border);
+ width: 18em;
+}
+
+/* Temporary styles for the supernova icons */
+.sidebar-footer-icon,
+.category-icon {
+ -moz-context-properties: fill, stroke, stroke-opacity;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+/*
+ The stack has some very tall content but it shouldn't be taller than the
+ viewport (and we know the tall content will still be accessible via scrollbars
+ regardless if the stack has a shorter height). So we use min-height: 0 to allow
+ the stack to be smaller than its content height so it can fit the viewport size.
+*/
+#preferences-stack {
+ min-height: 0;
+}
+
+.main-content {
+ padding: 0;
+ height: 100vh;
+}
+
+/**
+ * The first subcategory title for each category should not have margin-top.
+ */
+
+.subcategory:not([hidden]) ~ .subcategory {
+ margin-top: 16px;
+ padding-top: 16px;
+ border-top: 1px solid var(--in-content-border-color);
+ /* Avoid being hidden under the sticky container. This value is the height
+ of that container minus this element's border and padding. */
+ scroll-margin-top: calc(var(--in-content-button-height) + 33px);
+}
+
+fieldset {
+ margin: 0 0 32px;
+ padding: 0;
+ border-style: none !important;
+}
+
+fieldset > hbox,
+fieldset > vbox,
+fieldset > radiogroup {
+ width: -moz-available;
+}
+
+html|h1 {
+ margin: 0 0 8px;
+ font-size: 1.46em;
+ font-weight: 300;
+ line-height: 1.3em;
+}
+
+html|legend {
+ margin: 16px 0 4px;
+ font-size: 1.1em;
+ font-weight: 600;
+ line-height: 1.4em;
+}
+
+html|th {
+ font-weight: normal;
+ text-align: start;
+}
+
+description,
+label {
+ line-height: 1.8em;
+ margin: 0;
+}
+
+button,
+menulist::part(label-box) {
+ font-weight: 400;
+}
+
+menulist::part(icon),
+.abMenuItem > .menu-iconic-left > .menu-iconic-icon {
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+menulist::part(label),
+menuitem > label,
+button > hbox > label {
+ line-height: unset;
+}
+
+menulist::part(dropmarker-icon) {
+ width: 16px;
+ height: 16px;
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+.abMenuItem > .menu-iconic-left {
+ display: block;
+}
+
+#preferencesContainer {
+ padding: 0 28px 40px;
+ overflow: auto;
+}
+
+.paneDeckContainer {
+ display: block;
+ width: min(100%, 800px);
+ min-width: min-content;
+}
+
+.sticky-container {
+ width: 100%;
+ position: sticky;
+ background-color: var(--in-content-page-background);
+ top: 0;
+ z-index: 1;
+ padding-inline: 4px;
+}
+
+#searchInput {
+ /* If these sizes change, update the scroll margin of .subcategory. */
+ min-height: var(--in-content-button-height);
+ margin: 20px 0 30px;
+}
+
+#paneDeck {
+ width: 100%;
+}
+
+.search-tooltip {
+ max-width: 150px;
+ font-size: 1.25rem;
+ position: absolute;
+ padding: 0 10px;
+ background-color: #ffe900;
+ color: #000;
+ border: 1px solid #d7b600;
+ bottom: 36px;
+ opacity: 0.85;
+}
+
+.search-tooltip:hover {
+ opacity: 0.1;
+}
+
+.search-tooltip::before {
+ position: absolute;
+ content: "";
+ border: 7px solid transparent;
+ border-top-color: #d7b600;
+ top: 100%;
+ inset-inline-start: calc(50% - 7px);
+ forced-color-adjust: none;
+}
+
+.search-tooltip::after {
+ position: absolute;
+ content: "";
+ border: 6px solid transparent;
+ border-top-color: #ffe900;
+ top: 100%;
+ inset-inline-start: calc(50% - 6px);
+ forced-color-adjust: none;
+}
+
+@media (forced-colors: active) {
+ .search-tooltip::before {
+ border-top-color: CanvasText;
+ }
+
+ .search-tooltip::after {
+ border-top-color: Canvas;
+ }
+}
+
+.search-tooltip-parent {
+ position: relative;
+}
+
+.search-tooltip > span {
+ user-select: none;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.tip-caption {
+ font-size: .9em;
+ color: var(--in-content-deemphasized-text);
+}
+
+.visually-hidden {
+ visibility: collapse;
+}
+
+tabpanel > label,
+tabpanel > description,
+tabpanel > hbox > description {
+ margin-inline-start: 0;
+}
+
+/* Web search menulist */
+#defaultWebSearch::part(icon) {
+ margin-inline: 5px 8px;
+ width: 16px;
+ height: 16px;
+}
+
+/* Category List */
+
+#categories {
+ overflow: visible;
+ min-height: auto;
+}
+
+.sidebar-footer-link {
+ margin-inline: 6px;
+ border-radius: var(--in-content-button-border-radius);
+}
+
+@media (max-width: 830px) {
+ #pref-category-box,
+ #categories {
+ width: auto;
+ }
+
+ #categories > .category {
+ padding-inline: 12px;
+ }
+
+ .sidebar-footer-link {
+ margin-inline: 12px;
+ }
+
+ #preferencesContainer {
+ padding-inline: 15px;
+ }
+}
+
+html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"]) {
+ padding-block: initial;
+ /* it should be --in-content-button-height but input doesn't include the border */
+ min-height: calc(var(--in-content-button-height) - 2px);
+}
+
+html|input[type="number"] {
+ margin-inline-start: 4px;
+ padding: 1px;
+ min-height: calc(var(--in-content-button-height) - 4px);
+}
+/* sizes: chars + 8px padding + 1px borders + spin buttons 25+2+10px */
+html|input[type="number"].size2 {
+ width: calc(2ch + 55px);
+}
+html|input[type="number"].size3 {
+ width: calc(3ch + 55px);
+}
+html|input[type="number"].size4 {
+ width: calc(4ch + 55px);
+}
+html|input[type="number"].size5 {
+ width: calc(5ch + 55px);
+}
+
+html|input[type="number"]::-moz-number-spin-box {
+ padding-inline-start: 10px;
+}
+
+html|input[type="number"]::-moz-number-spin-up,
+html|input[type="number"]::-moz-number-spin-down {
+ appearance: none;
+ min-width: 25px;
+ border: 1px solid var(--in-content-box-border-color);
+ background-color: var(--in-content-button-background);
+ background-position: center;
+ background-repeat: no-repeat;
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+html|input[type="number"]::-moz-number-spin-up:hover,
+html|input[type="number"]::-moz-number-spin-down:hover {
+ background-color: var(--in-content-button-background-hover);
+}
+
+html|input[type="number"]::-moz-number-spin-up {
+ min-height: calc(var(--in-content-button-height) * 0.5 - 3px);
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ border-radius: 1px 1px 0 0;
+ background-image: url("chrome://messenger/skin/icons/new/nav-up-sm.svg");
+}
+
+html|input[type="number"]::-moz-number-spin-down {
+ min-height: calc(var(--in-content-button-height) * 0.5 - 4px);
+ border-radius: 0 0 1px 1px;
+ background-image: url("chrome://messenger/skin/icons/new/nav-down-sm.svg");
+}
+
+separator.groove:not([orient="vertical"]) {
+ border-top-color: #c1c1c1;
+ border-bottom-width: 0;
+}
+
+tab:not([selected="true"]):hover {
+ border-bottom-color: transparent;
+}
+
+tab:-moz-focusring > .tab-middle {
+ outline: none;
+}
+
+tab:focus-visible {
+ background-color: var(--in-content-button-background);
+}
+
+tab:focus-visible > .tab-middle > .tab-text {
+ outline: none;
+}
+
+#defaultWebSearchPopup > menuitem > .menu-iconic-left {
+ display: flex;
+}
+
+/* Applications Pane Styles */
+
+#filter {
+ margin-inline: 0;
+}
+
+/* XXX This style is for bug 740213 and should be removed once that
+ bug has a solution. */
+description > html|a {
+ cursor: pointer;
+}
+#previewBox {
+ height: 220px;
+}
+
+.indent,
+html|input.indent {
+ /* This should match the checkboxes/radiobuttons' width and inline margin,
+ such that when we have a toggle with a label followed by another element
+ with this class, the other element's text aligns with the toggle label. */
+ margin-inline-start: 22px;
+}
+
+checkbox {
+ margin-inline: 0;
+}
+
+.align-no-label {
+ margin-inline-start: 4px;
+}
+
+.tail-with-learn-more {
+ margin-inline-end: 10px;
+}
+
+.learnMore {
+ margin-inline-start: 0;
+ font-weight: normal;
+ white-space: nowrap;
+}
+
+#tagList {
+ height: 180px;
+}
+
+#keywordList {
+ height: 250px;
+}
+
+#signonsTree {
+ height: 20em;
+}
+
+.update-deck-container {
+ display: flex;
+ align-items: center;
+}
+
+.update-deck-container > * {
+ flex: 0 0 auto;
+}
+
+.update-deck-container.deck-selected {
+ visibility: visible;
+}
+
+.update-deck-container > button {
+ /* Align the button at the end. */
+ margin-inline-start: auto;
+}
+
+.update-throbber {
+ width: 16px;
+ height: 16px;
+ margin-inline: 6px 4px;
+ content: image-set(url("chrome://global/skin/icons/loading.png"),
+ url("chrome://global/skin/icons/loading@2x.png") 2x);
+}
+
+/* Work around bug 560067 - animated images in visibility: hidden
+ * still eat CPU. */
+#updateDeck > *:not(.deck-selected) > .update-throbber {
+ display: none;
+}
+
+.updateSettingCrossUserWarningContainer {
+ background: var(--in-content-box-info-background);
+ border: 1px solid var(--in-content-box-info-border);
+ border-radius: 5px;
+ padding: 2px 8px 8px;
+ margin-block-end: 17px;
+}
+
+#updateSettingCrossUserWarning {
+ padding-inline-start: 30px;
+ margin-block-start: 20px;
+ line-height: 20px;
+ background-image: url("chrome://messenger/skin/icons/info.svg");
+ background-position-x: left 2px;
+ background-position-y: top 2px;
+ background-size: 16px 16px;
+ background-repeat: no-repeat;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+#updateSettingCrossUserWarning:-moz-locale-dir(rtl) {
+ background-position-x: right 2px;
+}
+
+#releasenotes {
+ margin-inline-start: 6px !important;
+}
+
+#telemetry-container {
+ border-radius: 4px;
+ background-color: rgba(12, 12, 13, 0.2);
+ font-size: 85%;
+ padding: 3px;
+ margin-block: 4px;
+ width: 100%;
+ display: flex;
+}
+
+#telemetry-container[hidden] {
+ display: none;
+}
+
+#telemetryInfoIcon {
+ flex: 0 0 auto;
+ align-self: start;
+ width: 16px;
+ height: 16px;
+ padding: 2px;
+}
+
+#telemetryDisabledDescription {
+ flex: 1 1 auto;
+ align-self: start;
+ line-height: 1.3;
+ margin-inline-start: 6px;
+}
+
+#telemetryDataDeletionLearnMore {
+ flex: 0 0 auto;
+ align-self: center;
+}
+
+#submitHealthReportBox {
+ display: inline-flex;
+}
+
+/* Remove the start margin to align these elements */
+#addCloudFileAccount,
+#chatStartupAction,
+#defaults-itemtype-menulist,
+#manageCertificatesButton {
+ margin-inline-start: 0;
+}
+
+#dictionaryList {
+ list-style-type: none;
+ padding: 0;
+ margin-block: 0.5em;
+}
+
+#dictionaryList label {
+ display: flex;
+ align-items: center;
+}
+
+/**
+ * Font dialog menulist fixes
+ */
+
+#font-chooser-group {
+ display: grid;
+ grid-template-columns: max-content 1fr max-content max-content;
+}
+
+#fontsTitle {
+ margin-block: 4px;
+}
+
+#defaultFontType,
+#serif,
+#sans-serif,
+#monospace {
+ min-width: 30ch;
+}
+
+/**
+ * toolkit element overrides
+ */
+
+#preferencesContainer richlistbox {
+ appearance: none;
+ background-color: var(--in-content-box-background);
+ color: var(--in-content-text-color);
+}
+
+#preferencesContainer richlistbox richlistitem {
+ padding: 0.3em;
+ margin: 0;
+ border: none;
+ border-radius: 0;
+ background-image: none;
+}
+
+#containerBox richlistbox richlistitem:hover,
+#identitiesList richlistbox richlistitem:hover,
+#preferencesContainer richlistbox richlistitem:hover {
+ background-color: var(--in-content-item-hover);
+}
+
+#containerBox richlistitem[selected="true"],
+#identitiesList richlistitem[selected="true"],
+#preferencesContainer richlistitem[selected="true"] {
+ background-color: var(--in-content-item-selected-unfocused);
+ color: inherit;
+}
+
+#containerBox richlistbox:focus > richlistitem[selected="true"],
+#identitiesList:focus > richlistitem[selected="true"],
+#preferencesContainer richlistbox:focus > richlistitem[selected="true"] {
+ background-color: var(--in-content-item-selected);
+ color: var(--in-content-item-selected-text) !important;
+}
+
+#defaultWebSearch {
+ margin-inline: 0 4px;
+}
+
+#defaultFontSize,
+#directoriesList,
+#localDirectoriesList,
+#defaultStartupDirList {
+ margin-inline-end: 4px;
+}
+
+#messengerLanguagesDialogPane {
+ min-height: 360px;
+}
+
+#primaryMessengerLocale {
+ margin-inline: 0 4px;
+ min-width: 20em;
+}
+
+#availableLocales {
+ margin-inline: 0;
+}
+
+#warning-message {
+ margin-top: 8px;
+}
+
+#warning-message > .message-bar-description {
+ width: 32em;
+}
+
+.action-button {
+ margin-inline-start: 8px;
+}
+
+#tagList,
+#categorieslist {
+ margin-inline-end: 4px;
+}
+
+#new-tag-button,
+#newCButton {
+ margin-top: 0;
+}
+
+/* Menulist styles */
+.label-item {
+ font-size: .8em;
+}
+
+#datePrefsBox {
+ display: grid;
+ grid-template-columns: auto 1fr 1fr;
+}
+
+#PopupAutoComplete > richlistbox {
+ margin: unset;
+ border: unset;
+ border-radius: unset;
+}
+
+/**
+ * Connection dialog
+ */
+
+#proxyExtensionContent:not([hidden]) {
+ display: flex;
+ align-items: center;
+}
+
+#proxyExtensionDescription {
+ margin-block: 0;
+ flex: 1 1 auto;
+}
+
+#proxyExtensionDescription > img {
+ height: 20px;
+ width: 20px;
+ vertical-align: text-bottom;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+#proxyExtensionDisable {
+ flex: 0 0 auto;
+}
+
+#proxy-grid,
+#dnsOverHttps-grid {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ align-items: center;
+}
+
+.proxy-grid-row:not([hidden]),
+.dnsOverHttps-grid-row:not([hidden]) {
+ display: contents;
+}
+
+#proxy-grid > .thin {
+ grid-column: span 2;
+ height: 20px;
+}
+
+calendar-notifications-setting {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 9px;
+}
+
+calendar-notifications-setting .add-button {
+ list-style-image: var(--icon-add);
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+calendar-notifications-setting .add-button .button-icon {
+ margin-inline-end: 6px;
+}
+
+calendar-notifications-setting .remove-button {
+ width: 32px;
+ min-width: 0;
+ padding: 0;
+ list-style-image: var(--icon-trash);
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ background: none;
+ --in-content-button-horizontal-padding: 0;
+}
+
+/**
+ * End connection dialog
+ */
+
+/**
+ * Sync Settings Page
+ */
+
+#noFxaAccount:not([hidden]) {
+ display: flex;
+ gap: 24px;
+}
+
+#noFxaInfo {
+ display: flex;
+ flex-direction: column;
+ align-self: center;
+ flex: 3;
+}
+
+#noFxaCaption {
+ margin-block: 0 4px;
+}
+
+#noFxaDescription {
+ padding-inline-end: 52px;
+ padding-bottom: 52px;
+}
+
+#noFxaSignIn {
+ margin-inline-start: 8px;
+ max-width: 151px;
+ margin: 4px 0;
+}
+
+#noFxaSyncIllustration {
+ width: 169px;
+ flex-grow: 2;
+}
+
+.sync-account-section:not([hidden]) {
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ gap: 24px;
+ margin: 24px 0;
+}
+
+#fxaLoginUnverified:not([hidden]),
+#fxaLoginRejected:not([hidden]) {
+ display: flex;
+ align-items: center;
+}
+
+#photoInput {
+ display: contents;
+ place-self: center;
+}
+
+.contact-photo,
+#photoButton {
+ border-radius: 100%;
+ padding: 0;
+ margin: 0;
+}
+
+.contact-photo {
+ width: 78px;
+ height: 78px;
+ object-fit: cover;
+ object-position: center;
+ border: 1px solid var(--in-content-button-background);
+}
+
+.contact-photo[src=""] {
+ background-color: var(--in-content-button-background);
+ background-image: var(--icon-user);
+ background-size: 48px;
+ background-position: calc(50% - 1px) calc(50% - 1px);
+ background-repeat: no-repeat;
+ -moz-context-properties: stroke;
+ stroke: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+#photoButton {
+ position: relative;
+ width: 80px;
+ height: 80px;
+ min-width: 80px;
+ overflow: hidden;
+ background-color: transparent;
+ border: none;
+}
+
+#photoButton:hover {
+ background: none;
+}
+
+#photoOverlay {
+ position: absolute;
+ inset: 0;
+ border-radius: 100%;
+}
+
+#photoButton:focus-visible {
+ outline: 2px solid var(--in-content-focus-outline-color);
+ outline-offset: 2px;
+}
+
+#photoButton:is(:focus-visible, :hover) #photoOverlay {
+ background-color: color-mix(in srgb, var(--color-gray-90) 75%, transparent);
+ background-image: var(--icon-more);
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: 48px;
+ -moz-context-properties: stroke;
+ stroke: var(--color-white);
+ cursor: pointer;
+}
+
+@media (prefers-contrast) {
+ #photoButton:is(:focus-visible, :hover) #photoOverlay {
+ background-color: var(--color-black);
+ }
+}
+
+#fxaAccountInfo {
+ display: flex;
+ flex-direction: column;
+ align-self: center;
+ align-items: flex-start;
+}
+
+#fxaDisplayName {
+ font-weight: bold;
+ font-size: 1.3rem;
+}
+
+#fxaEmailAddress {
+ margin-bottom: 6px
+}
+
+.place-self-start {
+ place-self: start;
+}
+
+.place-self-center {
+ place-self: center;
+}
+
+.place-self-end {
+ place-self: end;
+}
+
+#fxaDeviceInfo {
+ display: flex;
+ gap: 6px;
+ margin: 24px 0;
+}
+
+#fxaDeviceNameInput {
+ flex-grow: 1;
+ align-self: center;
+}
+
+.sync-section {
+ margin-bottom: 24px;
+}
+
+#showSyncedHeader,
+#showSyncedListHeader {
+ display: flex;
+ justify-content: space-between;
+ gap: 24px;
+}
+
+/*
+* We usually use rem for font size but this header needs to match perfectly
+* the styling of the HTML legend coming from toolkit.
+*/
+.sync-header {
+ margin: 16px 0 4px;
+ font-size: 1.1em;
+ font-weight: 600;
+ line-height: 1.4em;
+}
+
+.sync-panel {
+ display: grid;
+ margin-block-start: 15px;
+ padding: 15px;
+ background-color: var(--in-content-box-info-background);
+ border-radius: 6px;
+}
+
+#syncDisconnected .sync-panel {
+ grid-template-columns: 1fr auto;
+ align-items: center;
+}
+
+#syncDisconnected p {
+ margin: 0;
+}
+
+#showSyncedListHeading {
+ font-size: 1.1rem;
+ font-weight: bold;
+ margin: 0;
+}
+
+.synced-list {
+ display: grid;
+ gap: 24px;
+ padding-inline-start: 12px;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+.synced-item:not([hidden]) {
+ display: inline-flex;
+ align-items: center;
+}
+
+.synced-item::before,
+.synced-item-label::before {
+ height: 16px;
+ width: 16px;
+ margin-inline-end: 6px;
+}
+
+ #showSyncedList,
+ #configSyncList {
+ grid-template-columns: 1fr 1fr;
+}
+
+/* For when we get per-account controls:
+#showSyncAccount,
+#configAccountsContainer {
+ display: grid;
+ gap: 12px;
+ grid-column: 1 / span 2;
+}
+
+#syncedAccounts,
+#configAccounts {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 24px;
+}
+
+#syncedAccounts .synced-list {
+ gap: 9px;
+}
+
+#showSyncAccountLabel::before,*/
+#showSyncAccount::before,
+#configSyncAccountLabel::before {
+ content: var(--icon-mail);
+}
+
+#showSyncAddress::before,
+#configSyncAddressLabel::before {
+ content: var(--icon-address-book);
+}
+
+#showSyncCalendar::before,
+#configSyncCalendarLabel::before {
+ content: var(--icon-calendar);
+}
+
+#showSyncIdentity::before,
+#configSyncIdentityLabel::before {
+ content: var(--icon-id);
+}
+
+#showSyncPasswords::before,
+#configSyncPasswordsLabel::before {
+ content: var(--icon-key);
+}
+
+.synced-account {
+ padding-inline-start: 21px;
+}
+
+.synced-account-name {
+ font-size: 1rem;
+ font-weight: bold;
+ margin: 0;
+ margin-block-end: 9px;
+}
+
+.synced-account-server-config::before {
+ content: var(--icon-globe);
+}
+
+.synced-account-filters::before {
+ content: var(--icon-filter);
+}
+
+.synced-account-keys::before {
+ content: var(--icon-lock);
+}
+
+#configSyncDialogHeading {
+ place-self: center;
+ margin: 0;
+}
+
+#configSyncList {
+ margin-block: 12px 24px;
+ margin-inline: 6px;
+}
+
+#configAccountsContainer {
+ gap: 9px;
+}
+
+.config-list {
+ display: grid;
+ gap: 24px;
+ padding-inline-start: 0;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+.config-list li {
+ list-style: none;
+}
+
+.synced-account .config-list {
+ gap: 0;
+ margin-inline-start: 21px;
+}
+
+.config-item {
+ display: inline-flex;
+ align-items: center;
+ line-height: 1;
+}
+
+.config-item label::before {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ margin-inline-end: 6px;
+ vertical-align: sub;
+}
diff --git a/comm/mail/themes/shared/mail/preferences/privacy-security.svg b/comm/mail/themes/shared/mail/preferences/privacy-security.svg
new file mode 100644
index 0000000000..e0c2e8e9b9
--- /dev/null
+++ b/comm/mail/themes/shared/mail/preferences/privacy-security.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="M8 6a3 3 0 0 1 6 0v4H8V6zm9 4V6A6 6 0 0 0 5 6v4h-.75C3.01 10 2 11 2 12.25v7.52c0 1.24 1 2.25 2.25 2.25h13.5c1.24 0 2.25-1 2.25-2.25v-7.52C20 11 19 10 17.75 10H17z"/>
+</svg>
diff --git a/comm/mail/themes/shared/mail/preferences/subdialog.css b/comm/mail/themes/shared/mail/preferences/subdialog.css
new file mode 100644
index 0000000000..d1e13f24a4
--- /dev/null
+++ b/comm/mail/themes/shared/mail/preferences/subdialog.css
@@ -0,0 +1,78 @@
+/* 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/. */
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+body > xul|dialog,
+xul|window > :is(xul|dialog, xul|hbox, xul|vbox) {
+ /* This allows the focus ring to display fully when scrolling is enabled. */
+ padding: 0 4px 4px;
+ font-size: 1.1rem;
+ background-color: var(--in-content-page-background) !important;
+}
+
+.dialogOverlay {
+ visibility: hidden;
+}
+
+.dialogOverlay[topmost="true"] {
+ background-color: rgba(0,0,0,0.5);
+}
+
+.dialogBox {
+ appearance: none;
+ background-color: var(--in-content-page-background);
+ color: var(--in-content-page-color);
+ /* `transparent` will use the dialogText color in high-contrast themes and
+ when page colors are disabled */
+ border: 1px solid transparent;
+ border-radius: var(--arrowpanel-border-radius);
+ box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
+ display: flex;
+ margin: 0;
+ padding: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root[dialogroot],
+ body > xul|dialog,
+ .dialogBox {
+ --in-content-page-background: #2a2a2e !important;
+ }
+}
+
+.dialogBox[resizable="true"] {
+ resize: both;
+ overflow: hidden;
+ min-height: 20em;
+ min-width: 66ch;
+}
+
+.dialogTitleBar {
+ padding-block: 6px 0;
+}
+
+.dialogTitle {
+ line-height: 26px;
+ font-weight: 600;
+ text-align: center;
+}
+
+.close-icon {
+ display: none;
+}
+
+.dialogFrame {
+ margin: 10px;
+ flex: 1;
+ /* Default dialog dimensions */
+ height: 12em;
+ min-width: 40ch;
+}
+
+.largeDialogContainer.doScroll {
+ overflow-y: auto;
+ flex: 1;
+}
diff --git a/comm/mail/themes/shared/mail/primaryToolbar.css b/comm/mail/themes/shared/mail/primaryToolbar.css
new file mode 100644
index 0000000000..f5a384de2a
--- /dev/null
+++ b/comm/mail/themes/shared/mail/primaryToolbar.css
@@ -0,0 +1,238 @@
+/* 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/. */
+
+/* ::::: Mail Toolbars and Menubars ::::: */
+
+.mail-toolbox,
+.contentTabToolbox {
+ appearance: none;
+ background-color: var(--toolbar-bgcolor);
+}
+
+.mail-toolbox:-moz-lwtheme,
+.contentTabToolbox:-moz-lwtheme {
+ color: var(--toolbar-color, inherit);
+ background-color: var(--lwt-accent-color);
+ background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent),
+ var(--lwt-selected-tab-background-color, transparent)),
+ linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
+ var(--lwt-header-image, none);
+ background-position: right top, var(--lwt-background-alignment);
+}
+
+.mail-toolbox > toolbar {
+ /* force iconsize="small" on these toolbars */
+ counter-reset: smallicons;
+}
+
+#button-getmsg {
+ list-style-image: var(--icon-cloud-download);
+}
+
+#button-newmsg {
+ list-style-image: var(--icon-pencil);
+}
+
+#button-address {
+ list-style-image: var(--icon-address-book);
+}
+
+#button-reply {
+ list-style-image: var(--icon-reply);
+}
+
+#button-replyall {
+ list-style-image: var(--icon-reply-all);
+}
+
+#button-replylist {
+ list-style-image: var(--icon-reply-list);
+}
+
+#button-forward {
+ list-style-image: var(--icon-forward);
+}
+
+#button-redirect {
+ list-style-image: var(--icon-redirect);
+}
+
+.delete-button {
+ list-style-image: var(--icon-trash);
+}
+
+.junk-button {
+ list-style-image: var(--icon-spam);
+}
+
+#button-print {
+ list-style-image: var(--icon-print);
+}
+
+#button-stop {
+ list-style-image: var(--icon-close);
+}
+
+#button-file {
+ list-style-image: var(--icon-file);
+}
+
+#button-nextUnread {
+ list-style-image: var(--icon-nav-down-unread);
+}
+
+#button-previousUnread {
+ list-style-image: var(--icon-nav-up-unread);
+}
+
+#button-mark {
+ list-style-image: var(--icon-unread);
+}
+
+#button-tag {
+ list-style-image: var(--icon-tag);
+}
+
+#button-goback {
+ list-style-image: var(--icon-nav-back);
+}
+
+#button-goforward {
+ list-style-image: var(--icon-nav-forward);
+}
+
+#button-compact {
+ list-style-image: var(--icon-compress);
+}
+
+#button-archive {
+ list-style-image: var(--icon-archive);
+}
+
+#button-chat {
+ -moz-context-properties: fill, stroke, fill-opacity;
+}
+
+#button-nextMsg {
+ list-style-image: var(--icon-nav-down);
+}
+
+#button-previousMsg {
+ list-style-image: var(--icon-nav-up);
+}
+
+#qfb-show-filter-bar {
+ list-style-image: var(--icon-filter);
+}
+
+#button-showconversation {
+ list-style-image: var(--icon-conversation);
+}
+
+#button-addons {
+ list-style-image: var(--icon-extension);
+}
+
+.button-appmenu {
+ list-style-image: var(--icon-app-menu);
+ min-width: 35px !important;
+ margin-inline: 4px;
+}
+
+.button-appmenu[badge-status] {
+ list-style-image: var(--icon-app-menu-badged);
+}
+
+#button-chat[unreadMessages="true"] {
+ fill: color-mix(in srgb, var(--toolbarbutton-icon-fill-attention) 20%, transparent);
+ stroke: var(--toolbarbutton-icon-fill-attention);
+}
+
+toolbar[mode="text"] > #button-chat[unreadMessages="true"] {
+ color: var(--toolbarbutton-icon-fill-attention);
+}
+
+#button-newMsgPopup .menuitem-iconic {
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+/* remove the small icons checkbox in Customize window */
+#smallicons {
+ display: none;
+}
+
+.button-appmenu .toolbarbutton-text {
+ display: none;
+}
+
+toolbar[mode="text"] .button-appmenu .toolbarbutton-icon {
+ display: flex;
+}
+
+#folder-location-container {
+ flex: 2 2;
+}
+
+/* Force the folder location and mail view items to fit in the available width
+ in the Customize Toolbar dialog. */
+#palette-box #locationFolders,
+#palette-box #folder-location-container,
+#palette-box #folderpane-mode-selector,
+#palette-box #viewPicker {
+ flex: 1;
+}
+
+#palette-box #button-chat {
+ background: var(--icon-chat) no-repeat center;
+}
+
+/* Hide the toolbarbutton-icon when the button is removed from the toolbar */
+#palette-box #button-chat > stack > .toolbarbutton-icon {
+ display: none;
+}
+
+/* ::::: message notification bar style rules ::::: */
+
+.msgNotificationBarText {
+ font-weight: bold;
+ margin-bottom: 0;
+}
+
+.msgNotificaton-smallText {
+ padding-inline-start: 10px;
+ font-size: 90%;
+}
+
+.subviewbutton-iconic {
+ -moz-context-properties: fill, stroke, fill-opacity;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ fill-opacity: var(--toolbarbutton-icon-fill-opacity);
+}
+
+#button-getAllNewMsg,
+#menu_getnewmsgs_all_accounts {
+ list-style-image: var(--icon-download);
+}
+
+#spacesButtonMail {
+ list-style-image: var(--icon-mail);
+}
+
+#spacesButtonAddressBook {
+ list-style-image: var(--icon-address-book);
+}
+
+#spacesButtonCalendar {
+ list-style-image: var(--icon-calendar);
+}
+
+#spacesButtonTasks {
+ list-style-image: var(--icon-tasks);
+}
+
+#spacesButtonChat {
+ list-style-image: var(--icon-chat);
+}
diff --git a/comm/mail/themes/shared/mail/profileDowngrade.css b/comm/mail/themes/shared/mail/profileDowngrade.css
new file mode 100644
index 0000000000..9e47b272b3
--- /dev/null
+++ b/comm/mail/themes/shared/mail/profileDowngrade.css
@@ -0,0 +1,18 @@
+/* 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/. */
+
+body {
+ width: 600px;
+}
+
+#contentWrapper {
+ display: flex;
+}
+
+#contentWrapper img {
+ width: 48px;
+ height: 48px;
+ margin: 1em;
+ margin-inline-start: 0;
+}
diff --git a/comm/mail/themes/shared/mail/quickFilterBar.css b/comm/mail/themes/shared/mail/quickFilterBar.css
new file mode 100644
index 0000000000..ccdbdca2a7
--- /dev/null
+++ b/comm/mail/themes/shared/mail/quickFilterBar.css
@@ -0,0 +1,197 @@
+/* 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/. */
+
+:root {
+ --qfb-padding: 3px;
+}
+
+:root[uidensity="compact"] {
+ --qfb-padding: 0 3px;
+}
+
+#quick-filter-bar {
+ --button-margin: 3px;
+ background-color: var(--layout-background-1);
+ padding: var(--qfb-padding);
+ border-bottom: 1px solid
+ var(--sidebar-border-color, var(--tree-view-header-border-color));
+}
+
+:root[lwt-tree] #quick-filter-bar:-moz-lwtheme {
+ background-color: color-mix(in srgb, var(--toolbar-bgcolor) 50%, transparent);
+ color: var(--lwt-text-color);
+}
+
+#qfb-sticky {
+ background-image: var(--icon-pin);
+ height: auto;
+}
+
+#qfb-unread {
+ background-image: var(--icon-unread);
+}
+
+#qfb-starred {
+ background-image: var(--icon-star);
+}
+
+#qfb-inaddrbook {
+ background-image: var(--icon-address-book);
+}
+
+#qfb-tags {
+ background-image: var(--icon-tag);
+}
+
+#qfb-attachment {
+ background-image: var(--icon-attachment);
+}
+
+#qfd-dropdown {
+ background-image: var(--icon-filter);
+ display: none;
+}
+
+#qfb-results-label {
+ margin: 3px;
+ text-align: end;
+ align-self: center;
+}
+
+#qfb-qs-textbox {
+ flex: 1;
+ height: unset;
+ margin: 3px;
+ padding-block: 3px;
+ max-width: 450px;
+}
+
+@media (-moz-platform: windows-win7) {
+ #qfb-qs-textbox {
+ margin-block: 4px;
+ }
+}
+
+@container threadPane (max-width: 499px) {
+ #qfb-qs-textbox {
+ min-width: 200px;
+ }
+
+ #qfd-dropdown {
+ display: inline-block;
+ min-width: 22px;
+ }
+
+ .button-group.quickFilterButtons{
+ display: none;
+ }
+}
+
+#quickFilterBarTagsContainer:not([hidden]) {
+ display: flex;
+ align-items: center;
+ margin-inline-start: -3px;
+ flex-wrap: wrap;
+}
+
+#qfb-boolean-mode {
+ line-height: unset;
+ min-height: 0;
+ margin: 3px;
+ padding-block: 3px;
+}
+
+.qfb-tag-button {
+ --tag-color: currentColor;
+ --tag-contrast-color: currentColor;
+ --button-padding: 3px;
+ --button-margin: 3px;
+ background-color: transparent;
+ color: var(--tag-color);
+ border-color: var(--tag-color);
+ border-radius: 100px;
+ padding-inline: 9px;
+ min-height: 0;
+ min-width: 0;
+ line-height: 1;
+}
+
+.qfb-tag-button:enabled:hover:not([aria-pressed="true"]) {
+ color: var(--tag-color);
+ background-color: color-mix(in srgb, var(--tag-color) 20%, transparent);
+ border-color: var(--tag-color);
+}
+
+.qfb-tag-button[aria-pressed="true"]:enabled:hover {
+ color: var(--tag-contrast-color);
+ background-color: color-mix(in srgb, var(--tag-color) 70%, white);
+ border-color: color-mix(in srgb, var(--tag-color) 60%, black);
+}
+
+.qfb-tag-button[aria-pressed="true"] {
+ --tag-color: currentColor;
+ color: var(--tag-contrast-color);
+ background-color: var(--tag-color);
+ border-color: color-mix(in srgb, var(--tag-color) 60%, black);
+ border-radius: 100px;
+ box-shadow: none;
+}
+
+.qfb-tag-button:enabled:hover:active {
+ background-color: color-mix(in srgb, var(--tag-color) 80%, black);
+ border-color: color-mix(in srgb, var(--tag-color) 60%, black);
+}
+
+.qfb-tag-button[inverted] {
+ background-color: transparent;
+ color: var(--tag-color);
+ border-color: var(--tag-color);
+ text-decoration: line-through;
+}
+
+.qfb-tag-button[inverted]:enabled:hover {
+ color: var(--tag-color);
+ background-color: color-mix(in srgb, var(--tag-color) 20%, transparent);
+ border-color: var(--tag-color);
+}
+
+#quickFilterBarContainer {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+#quickFilterBarSecondFilters {
+ display: flex;
+ align-items: center;
+ padding-inline-start: var(--button-margin);
+ flex-wrap: wrap;
+ column-gap: 12px;
+}
+
+#quick-filter-bar-filter-text-bar:not([hidden]) {
+ --button-padding: 3px;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+#quick-filter-bar-filter-text-bar > .button-group > .button {
+ min-width: 0;
+}
+
+#qfb-upsell-line-one {
+ font-weight: bold;
+}
+
+/*#threadTree[filterActive] {
+ background-repeat: no-repeat;
+ background-position: center;
+ -moz-context-properties: fill, fill-opacity;
+ fill: currentColor;
+ fill-opacity: .3;
+}
+
+#threadTree[filterActive="searching"] {
+ background-image: url("chrome://messenger/skin/icons/search-spinner.svg");
+}*/
diff --git a/comm/mail/themes/shared/mail/sanitizeDialog.css b/comm/mail/themes/shared/mail/sanitizeDialog.css
new file mode 100644
index 0000000000..70e9014501
--- /dev/null
+++ b/comm/mail/themes/shared/mail/sanitizeDialog.css
@@ -0,0 +1,49 @@
+/* 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/. */
+
+/* Hide the duration dropdown suffix label if it's empty. Otherwise it
+ takes up a little space, causing the end of the dropdown to not be aligned
+ with the warning box. */
+#sanitizeDurationSuffixLabel[value=""] {
+ display: none;
+}
+
+/* Sanitize everything warnings */
+
+#sanitizeEverythingWarning,
+#sanitizeEverythingUndoWarning {
+ white-space: pre-wrap;
+}
+
+#sanitizeEverythingWarningBox {
+ background-color: hsla(0, 0%, 50%, 0.2);
+ border: 1px solid hsl(0, 0%, 50%);
+ border-radius: 4px;
+ margin-top: 8px;
+ margin-inline: 4px;
+ padding: 16px;
+}
+
+#sanitizeEverythingWarningIcon {
+ list-style-image: var(--icon-warning-dialog);
+ width: 48px;
+ height: 48px;
+}
+
+#sanitizeEverythingWarningDescBox {
+ padding: 0 16px;
+ margin: 0;
+}
+
+#historyGroupLabel {
+ margin-block: 16px 4px;
+ margin-inline-start: 4px;
+ font-size: 1.14em;
+ font-weight: 600;
+}
+
+checkbox {
+ margin-block: 4px;
+ margin-inline-start: 10px;
+}
diff --git a/comm/mail/themes/shared/mail/search-bar.css b/comm/mail/themes/shared/mail/search-bar.css
new file mode 100644
index 0000000000..001be77aa0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/search-bar.css
@@ -0,0 +1,89 @@
+/* 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/. */
+
+/* Primary CSS file inside the search-bar shadowRoot */
+
+@import url("chrome://messenger/skin/widgets.css");
+
+form {
+ --padding-block: 6px;
+ --search-icon-clearance: 30px;
+ position: relative;
+ min-height: max(1.2em, calc(1.2em + 2 * var(--padding-block)));
+ height: 100%;
+ max-height: 2em;
+}
+
+input {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ font-size: 1rem;
+ border: 1px solid var(--color-gray-40);
+ border-radius: var(--button-border-radius);
+ padding-inline: var(--padding-block) var(--search-icon-clearance);
+ background-color: var(--layout-background-0);
+}
+
+input:-moz-lwtheme {
+ color: var(--toolbar-field-color);
+ background-color: var(--toolbar-field-background-color);
+ border-color: var(--toolbar-field-border-color);
+}
+
+input:focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: -1px;
+}
+
+@media (-moz-windows-accent-color-in-titlebar) {
+ input:not(:-moz-lwtheme):focus-visible {
+ outline-offset: var(--focus-outline-offset);
+ outline-color: var(--windows-accent-outline-color);
+ }
+}
+
+input:-moz-lwtheme:focus-visible {
+ color: var(--toolbar-field-focus-color);
+ background-color: var(--toolbar-field-focus-background-color);
+}
+
+.button {
+ position: absolute;
+ inset-inline-end: 0;
+ inset-block: 0;
+ color: inherit;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+}
+
+.button.button-flat.icon-button {
+ padding: 4px;
+ margin: 0;
+}
+
+.button.button-flat.icon-button:focus-visible {
+ outline-offset: -1px;
+}
+
+div {
+ display: none;
+ position: absolute;
+ pointer-events: none;
+ color: var(--search-field-placeholder);
+ inset-inline-start: 1ch;
+ inset-inline-end: var(--search-icon-clearance);
+ flex-direction: column;
+ justify-content: space-around;
+ text-overflow: clip;
+ overflow: hidden;
+ white-space: nowrap;
+ inset-block: 0;
+}
+
+input:placeholder-shown + div {
+ display: flex;
+}
diff --git a/comm/mail/themes/shared/mail/searchBox.css b/comm/mail/themes/shared/mail/searchBox.css
new file mode 100644
index 0000000000..1b32694fc8
--- /dev/null
+++ b/comm/mail/themes/shared/mail/searchBox.css
@@ -0,0 +1,129 @@
+/* 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/. */
+
+.gloda-search {
+ padding-inline-start: 21px !important;
+ flex: 1;
+}
+
+.search-icon {
+ margin-inline-end: -21px;
+ height: 16px;
+ width: 16px;
+ z-index: 2;
+}
+
+.search-icon:-moz-locale-dir(rtl) {
+ transform: scaleX(-1);
+}
+
+.searchBox,
+.themeableSearchBox {
+ appearance: none;
+ color: FieldText;
+ background-color: Field;
+ border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
+ border-radius: var(--button-border-radius);
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+ outline: none;
+ min-height: 24px;
+ height: 1.2em;
+}
+
+.textbox-search-clear {
+ opacity: 0.8;
+}
+
+.textbox-search-clear:not([disabled]):hover {
+ opacity: 1;
+}
+
+.themeableSearchBox[disabled] {
+ border-color: hsla(240, 5%, 5%, 0.1) !important;
+}
+
+.searchBox:hover,
+.themeableSearchBox:not([disabled]):hover {
+ box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
+}
+
+@media (prefers-color-scheme: dark) {
+ .searchBox:hover {
+ box-shadow: 0 1px 3px rgba(255, 255, 255, 0.25);
+ }
+}
+
+/* special treatment because these boxes are on themable toolbars */
+.gloda-search:-moz-lwtheme,
+.remote-gloda-search:-moz-lwtheme,
+:root[lwt-tree] .themeableSearchBox,
+:root[lwt-tree] #peopleSearchInput:not([focused="true"]) {
+ color: var(--toolbar-field-color);
+ background-color: var(--toolbar-field-background-color);
+ border-color: var(--toolbar-field-border-color);
+}
+
+.gloda-search:focus,
+.searchBox[focused="true"],
+.themeableSearchBox:not([disabled="true"]):focus,
+.themeableSearchBox:not([disabled="true"])[focused="true"] {
+ border-color: var(--toolbar-field-focus-border-color);
+ outline: 1px solid var(--toolbar-field-focus-border-color);
+}
+
+.gloda-search:-moz-lwtheme:focus,
+:root[lwt-tree] .themeableSearchBox:focus,
+:root[lwt-tree] .themeableSearchBox[focused="true"],
+:root[lwt-tree] #peopleSearchInput[focused="true"],
+.remote-gloda-search:-moz-lwtheme[focused="true"] {
+ color: var(--toolbar-field-focus-color);
+ background-color: var(--toolbar-field-focus-background-color);
+}
+
+.gloda-search:-moz-lwtheme::selection,
+.themeableSearchBox:-moz-lwtheme::selection {
+ background-color: var(--lwt-toolbar-field-highlight, Highlight);
+ color: var(--lwt-toolbar-field-highlight-text, HighlightText);
+}
+
+.gloda-search:not(:focus)::selection,
+.themeableSearchBox:not(:focus)::selection,
+.themeableSearchBox:not([focused="true"])::selection {
+ background-color: var(--lwt-toolbar-field-highlight, text-select-disabled-background);
+}
+
+#PopupGlodaAutocomplete > .autocomplete-richlistbox {
+ padding: 0;
+ color: inherit;
+ background-color: inherit;
+}
+
+#PopupGlodaAutocomplete .ac-url {
+ display: flex;
+ margin-bottom: 2px;
+}
+
+.ac-url:not([selected=true]) > .ac-url-text {
+ color: var(--autocomplete-popup-url-color);
+}
+
+.autocomplete-richlistitem[type^="gloda-"] {
+ margin-inline: 2px;
+ padding-inline-start: 12px;
+ border-radius: 2px;
+}
+
+.autocomplete-richlistitem[type^="gloda-"]:hover {
+ background-color: hsla(0, 0%, 80%, 0.3);
+}
+
+.autocomplete-richlistitem[type^="gloda-"][selected] {
+ background: var(--autocomplete-popup-highlight-background);
+ color: var(--autocomplete-popup-highlight-color);
+}
+
+.remote-gloda-search-container {
+ min-width: 10em;
+ align-items: center;
+}
diff --git a/comm/mail/themes/shared/mail/searchDialog.css b/comm/mail/themes/shared/mail/searchDialog.css
new file mode 100644
index 0000000000..25bfa1a12c
--- /dev/null
+++ b/comm/mail/themes/shared/mail/searchDialog.css
@@ -0,0 +1,126 @@
+/* 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/messenger.css");
+@import url("chrome://messenger/skin/messageIcons.css");
+
+#threadTree {
+ flex: 1;
+}
+
+#searchTerms {
+ flex: 1 auto;
+ min-height: 12em;
+ margin-top: 8px;
+}
+
+#searchTermListBox > #booleanAndGroup,
+#searchTermListBox > #searchTermBox,
+#searchTerms > vbox > hbox {
+ padding-left: 6px;
+ padding-right: 6px;
+}
+
+#searchTermBox {
+ min-height: 0;
+ padding-top: 2px;
+ padding-bottom: 2px;
+}
+
+#searchResults {
+ flex: 1 auto;
+ min-height: 8em;
+ padding: 0 6px 6px;
+ text-shadow: none;
+}
+
+#searchableFolders {
+ flex: 2 2;
+}
+
+#searchResultListBox {
+ margin: 4px;
+ min-height: 50px;
+}
+
+.search-value-menulist {
+ flex: 1;
+}
+
+.search-value-input {
+ width: -moz-available;
+}
+
+.search-menulist[unavailable="true"] {
+ color: GrayText;
+}
+
+radio[value="and"] {
+ margin-inline-end: 18px;
+}
+
+/* ::::: box sizes ::::: */
+
+#virtualFolderSearchTerms {
+ flex: 1 1 0;
+ overflow: hidden;
+}
+
+#virtualFolderSearchTermListBoxWrapper {
+ flex: 1;
+ min-height: 0;
+}
+
+#virtualFolderSearchTermListBox {
+ flex: 1;
+}
+
+#searchTermTree {
+ min-height: 50px;
+}
+
+/* ::::: thread decoration ::::: */
+
+treechildren::-moz-tree-cell-text(read) {
+ font-weight: normal;
+}
+
+treechildren::-moz-tree-cell-text(unread) {
+ font-weight: bold;
+}
+
+/* on a collapsed thread, if the top level message is read, but the thread has
+ * unread children, underline the text. 4.x mac did this, very slick
+ */
+treechildren::-moz-tree-cell-text(container, closed, hasUnread, read) {
+ text-decoration: underline;
+}
+
+#gray_horizontal_splitter {
+ min-height: 4px;
+ background-color: -moz-Dialog;
+ border-top: 1px solid ThreeDHighlight;
+ border-bottom: 1px solid ThreeDShadow;
+}
+
+/* ::::: theme support ::::: */
+
+:root:not([lwt-tree]) #searchTermBox:-moz-lwtheme,
+:root:not([lwt-tree]) #searchResults:-moz-lwtheme {
+ background-color: -moz-Dialog;
+}
+
+:root[lwt-tree] #searchTermBox,
+:root[lwt-tree] #searchResults {
+ background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
+}
+
+:root:not(:-moz-lwtheme) #searchTermList:focus > richlistitem[selected="true"] {
+ color: inherit;
+}
+
+:root:-moz-lwtheme #gray_horizontal_splitter {
+ background-color: var(--toolbar-bgcolor);
+ border-color: hsla(0, 0%, 50%, .3);
+}
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;
+}
diff --git a/comm/mail/themes/shared/mail/splitter.css b/comm/mail/themes/shared/mail/splitter.css
new file mode 100644
index 0000000000..efc1902691
--- /dev/null
+++ b/comm/mail/themes/shared/mail/splitter.css
@@ -0,0 +1,162 @@
+/* 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/. */
+
+/* PaneSplitter / pane-splitter elements */
+
+hr[is="pane-splitter"] {
+ margin: 0;
+ --splitter-z-index: 1;
+ z-index: var(--splitter-z-index);
+ /* Make sure border-box's height and width remain the same when we grow or
+ * shrink the border width. */
+ box-sizing: border-box;
+ /* We use a default border-style of none so we can set a border width and
+ * color without it producing a border on all sides. */
+ border-style: none;
+ /* The defining sizes of the splitter:
+ * + content-size: The dimension for the clickable area of the splitter.
+ * + occupy-size: The amount of space the splitter should occupy in the
+ * layout.
+ */
+ --splitter-content-size: 5px;
+ --splitter-occupy-size: 1px;
+ --splitter-margin-size: calc(var(--splitter-occupy-size) - var(--splitter-content-size));
+ border-width: var(--splitter-occupy-size);
+ border-color: var(--splitter-color);
+}
+
+hr[is="pane-splitter"]:not([resize-direction="horizontal"]):not(.splitter-before) {
+ height: var(--splitter-content-size);
+ border-block-start-style: solid;
+ margin-block-end: var(--splitter-margin-size);
+}
+
+hr[is="pane-splitter"]:not([resize-direction="horizontal"]).splitter-before {
+ height: var(--splitter-content-size);
+ border-block-end-style: solid;
+ margin-block-start: var(--splitter-margin-size);
+}
+
+hr[is="pane-splitter"][resize-direction="horizontal"]:not(.splitter-before) {
+ width: var(--splitter-content-size);
+ border-inline-start-style: solid;
+ margin-inline-end: var(--splitter-margin-size);
+}
+
+hr[is="pane-splitter"][resize-direction="horizontal"].splitter-before {
+ width: var(--splitter-content-size);
+ border-inline-end-style: solid;
+ margin-inline-start: var(--splitter-margin-size);
+}
+
+/* Collapsed splitters. */
+
+hr[is="pane-splitter"].splitter-collapsed {
+ /* Occupy zero space. */
+ --splitter-occupy-size: 0px;
+ /* Make sure we appear above other splitters. */
+ z-index: calc(var(--splitter-z-index) + 1);
+}
+
+hr[is="pane-splitter"]::after {
+ /* We create a pseudo-element that occupies the splitter content. We will only
+ * show this when the splitter is collapsed and being resized or hovered. */
+ background-color: var(--selected-item-color);
+ content: "";
+ display: block;
+ width: 100%;
+ height: 100%;
+ /* We hide this element with scaleY(0) or scaleX(0) so we can smoothly
+ * grow the element between the hidden and full-height or full-width
+ * states. */
+ transform: scaleY(0);
+}
+
+hr[is="pane-splitter"]:not(.splitter-before)::after {
+ /* Grow top-to-bottom. */
+ transform-origin: top;
+}
+
+hr[is="pane-splitter"].splitter-before::after {
+ transform-origin: bottom;
+}
+
+hr[is="pane-splitter"][resize-direction="horizontal"]::after {
+ /* Grow left-to-right or right-to-left instead. */
+ transform: scaleX(0);
+}
+
+hr[is="pane-splitter"][resize-direction="horizontal"]:is(
+ :not(.splitter-before):dir(ltr),
+ .splitter-before:dir(rtl)
+)::after {
+ transform-origin: left;
+}
+
+hr[is="pane-splitter"][resize-direction="horizontal"]:is(
+ .splitter-before:dir(ltr),
+ :not(.splitter-before):dir(rtl)
+)::after {
+ transform-origin: right;
+}
+
+hr[is="pane-splitter"]:not([disabled]).splitter-collapsed:is(
+ :hover,
+ .splitter-resizing
+)::after {
+ /* Grow to full height. */
+ transform: scaleY(1);
+}
+
+hr[is="pane-splitter"][resize-direction="horizontal"]:not([disabled]).splitter-collapsed:is(
+ :hover,
+ .splitter-resizing
+)::after {
+ /* Grow to full width. */
+ transform: scaleX(1);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ /* NOTE: We only show a smooth transition from scale 0 to scale 1, or
+ * vice versa, whilst the splitter is collapsed. In particular, we do *not*
+ * want a smooth transition when we switch from collapsed to not collapsed: in
+ * this case we want to immediately shrink back to zero size. In contrast, the
+ * switch from not collapsed to collapsed whilst dragging *is* a smooth
+ * transition. */
+ hr[is="pane-splitter"].splitter-collapsed::after {
+ transition: transform 200ms ease;
+ }
+}
+
+/* Splitter cursors. */
+
+hr[is="pane-splitter"]:not([disabled]) {
+ cursor: ns-resize;
+}
+
+hr[is="pane-splitter"]:not([disabled]).splitter-collapsed:not(.splitter-before) {
+ cursor: s-resize;
+}
+
+hr[is="pane-splitter"]:not([disabled]).splitter-collapsed.splitter-before {
+ cursor: n-resize;
+}
+
+hr[is="pane-splitter"][resize-direction="horizontal"]:not([disabled]) {
+ cursor: ew-resize;
+}
+
+hr[is="pane-splitter"][resize-direction="horizontal"]:not([disabled]).splitter-collapsed:is(
+ .splitter-before:dir(ltr),
+ :not(.splitter-before):dir(rtl)
+) {
+ cursor: w-resize;
+}
+
+hr[is="pane-splitter"][resize-direction="horizontal"]:not([disabled]).splitter-collapsed:is(
+ :not(.splitter-before):dir(ltr),
+ .splitter-before:dir(rtl)
+) {
+ cursor: e-resize;
+}
diff --git a/comm/mail/themes/shared/mail/subscribe.css b/comm/mail/themes/shared/mail/subscribe.css
new file mode 100644
index 0000000000..349fb552dd
--- /dev/null
+++ b/comm/mail/themes/shared/mail/subscribe.css
@@ -0,0 +1,80 @@
+/* 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/. */
+
+/* ===== subscribe.css ==================================================
+ == Styles for the Subscribe dialog.
+ ======================================================================= */
+
+@import url("chrome://messenger/skin/messenger.css");
+
+#subscribeWindow {
+ min-width: 40em;
+ min-height: 30em;
+}
+
+#nameColumn,
+#nameColumn2 {
+ flex: 10 10;
+}
+
+/* ::::: Subscription Icons :::::: */
+
+treechildren::-moz-tree-image(subscribedColumn),
+treechildren::-moz-tree-image(subscribedColumn2) {
+ width: 14px;
+ height: 14px;
+ list-style-image: url("chrome://messenger/skin/icons/checkbox.svg");
+ -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
+ fill: currentColor;
+ stroke: currentColor;
+ fill-opacity: 0;
+ stroke-opacity: 0;
+}
+
+treechildren::-moz-tree-image(subscribedColumn, subscribed-true),
+treechildren::-moz-tree-image(subscribedColumn2, subscribed-true) {
+ fill-opacity: 1;
+}
+
+treechildren::-moz-tree-image(subscribedColumn, selected, focus),
+treechildren::-moz-tree-image(subscribedColumn2, selected, focus) {
+ fill: var(--select-focus-text-color);
+ stroke: var(--select-focus-text-color);
+}
+
+treechildren::-moz-tree-image(subscribedColumn, subscribable-false) {
+ list-style-image: none;
+}
+
+treechildren::-moz-tree-cell-text(nameColumn, subscribable-false) {
+ opacity: 0.6;
+ font-style: italic;
+}
+
+/* ::::: Folders :::::: */
+
+treechildren::-moz-tree-image(nameColumn) {
+ margin-inline-end: 2px;
+ list-style-image: url("chrome://messenger/skin/icons/folder.svg");
+}
+
+treechildren::-moz-tree-image(nameColumn, serverType-nntp),
+treechildren::-moz-tree-image(nameColumn2, serverType-nntp) {
+ margin-inline-end: 2px;
+ list-style-image: url("chrome://messenger/skin/icons/globe.svg");
+}
+
+/* ::::: Servers :::::: */
+
+.subscribeMenuItem {
+ list-style-image: url("chrome://messenger/skin/icons/message.svg");
+}
+
+.subscribeMenuItem[ServerType="imap"][IsSecure="true"] {
+ list-style-image: url("chrome://messenger/skin/icons/message-secure.svg");
+}
+
+.subscribeMenuItem[ServerType="nntp"] {
+ list-style-image: url("chrome://messenger/skin/icons/globe.svg");
+}
diff --git a/comm/mail/themes/shared/mail/tabmail.css b/comm/mail/themes/shared/mail/tabmail.css
new file mode 100644
index 0000000000..e179394919
--- /dev/null
+++ b/comm/mail/themes/shared/mail/tabmail.css
@@ -0,0 +1,484 @@
+/* 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/. */
+
+:root {
+ --tabs-toolbar-background-color: rgba(0, 0, 0, 0.075);
+ --tabs-toolbar-box-shadow: inset 0 3px 9px -6px rgba(0, 0, 0, 0.5);
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --tabs-toolbar-background-color: rgba(0, 0, 0, 0.15);
+ }
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ --tabs-toolbar-background-color: rgba(255, 255, 255, 0.15);
+ }
+}
+
+@media (prefers-contrast) {
+ :root {
+ --tabs-toolbar-background-color: transparent;
+ --tabs-toolbar-box-shadow: none;
+ }
+}
+
+#tabmail {
+ overflow: hidden;
+}
+
+#tabmail-tabs .tabmail-tab:first-child .tab-close-button,
+#tabmail-tabs[closebuttons="activetab"] .tabmail-tab:not([selected="true"]) .tab-close-button {
+ display: none;
+}
+
+.tabmail-tab[selected="true"] {
+ box-shadow: 0 2px 8px -5px var(--color-black);
+}
+
+.tab-drop-indicator {
+ position: absolute;
+ top: 0;
+ /* The z-index needs to be big enough to trump other positioned UI pieces
+ that we want to overlay. The selected tab uses 2. */
+ z-index: 3;
+}
+
+#tabs-toolbar {
+ appearance: none;
+ --tabs-top-border-width: 1px;
+ background-image: linear-gradient(to top, var(--chrome-content-separator-color) 0,
+ var(--tabs-toolbar-background-color) 1px);
+ box-shadow: var(--tabs-toolbar-box-shadow);
+ padding-top: 3px;
+ padding-inline: 3px;
+}
+
+#tabs-toolbar:-moz-lwtheme {
+ --tabline-color: var(--lwt-tab-line-color, currentColor);
+}
+
+#tabmail-arrowscrollbox {
+ min-height: var(--tab-min-height);
+}
+
+#tabmail-arrowscrollbox::part(scrollbox-clip) {
+ contain: inline-size;
+}
+
+#tabpanelcontainer {
+ min-height: 0;
+}
+
+.tab-stack {
+ min-height: inherit;
+}
+
+.tabmail-tab {
+ appearance: none;
+ align-items: stretch;
+ flex: 100 100;
+ background-color: transparent;
+ border-radius: 4px 4px 0 0;
+ border-width: 0;
+ margin: 0;
+ margin-inline-end: 1px;
+ padding: 0;
+ max-width: var(--tab-max-width);
+ min-width: var(--tab-min-width);
+ width: 0;
+ overflow: hidden;
+}
+
+/* The selected tab should appear above adjacent tabs and the highlight
+ of #tabs-toolbar */
+.tabmail-tab[selected=true] {
+ position: relative;
+ z-index: 2;
+}
+
+.tab-content {
+ padding-inline: 9px;
+ display: flex;
+ align-items: center;
+ min-width: 0;
+}
+
+.tab-content > :is(.tab-throbber, .tab-icon-image, .tab-close-button) {
+ flex: 0 0 auto;
+}
+
+.tab-content > .tab-label-container {
+ flex: 1 1 auto;
+}
+
+.tab-label-container {
+ overflow: hidden;
+}
+
+.tab-label-container[textoverflow] {
+ mask-image: linear-gradient(to left, transparent, black 2em);
+}
+
+.tab-label-container[textoverflow]:-moz-locale-dir(rtl) {
+ mask-image: linear-gradient(to right, transparent, black 2em);
+}
+
+.tab-throbber,
+.tab-icon-image,
+button.tab-close-button {
+ margin-block: 1px 0;
+}
+
+.tab-throbber,
+.tab-icon-image {
+ height: 16px;
+ width: 16px;
+ margin-inline-end: 6px;
+ -moz-context-properties: fill, stroke, stroke-opacity;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+.tab-icon-image:not([src]) {
+ visibility: hidden;
+}
+
+.tab-throbber:not([busy]):not([thinking]),
+.tab-throbber[busy] + .tab-icon-image,
+.tab-throbber[thinking] + .tab-icon-image,
+.tab-throbber[busy][thinking] + .tab-icon-image {
+ display: none;
+}
+
+.tab-label {
+ white-space: nowrap;
+ margin-inline-end: 0;
+ margin-inline-start: 0;
+}
+
+button.tab-close-button {
+ margin-inline: 1px -2px;
+ padding: 2px;
+}
+
+.tab-close-icon {
+ width: 16px;
+ height: 16px;
+ -moz-context-properties: fill, fill-opacity;
+ fill: currentColor;
+ fill-opacity: var(--toolbarbutton-icon-fill-opacity);
+}
+
+.tabmail-tab:not([selected],:-moz-lwtheme) {
+ color: inherit;
+}
+
+.tabmail-tab:-moz-lwtheme {
+ color: inherit;
+}
+
+.tabmail-tab[visuallyselected=true]:-moz-lwtheme {
+ color: var(--lwt-tab-text, var(--toolbar-color, inherit));
+}
+
+.tab-line {
+ height: 2px;
+ margin-top: 3px;
+ margin-inline: 3px;
+ border-radius: 3px;
+}
+
+/* Selected tab */
+
+.tab-background {
+ background-clip: padding-box;
+}
+
+.tab-background[selected=true] {
+ background-color: var(--toolbar-bgcolor);
+ background-repeat: repeat-x;
+}
+
+.tab-line[selected=true] {
+ background-color: var(--tabline-color);
+}
+
+/*
+ * LightweightThemeConsumer will set the current lightweight theme's header
+ * image to the lwt-header-image variable, used in each of the following rulesets.
+ */
+
+/* Lightweight theme on tabs */
+.tabmail-tab .tab-background[selected=true]:-moz-lwtheme {
+ background-attachment: scroll, scroll, fixed;
+ background-color: transparent;
+ background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent),
+ var(--lwt-selected-tab-background-color, transparent)),
+ linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
+ var(--lwt-header-image, none);
+ background-position: 0 0, 0 0, right top;
+ background-repeat: repeat-x, repeat-x, no-repeat;
+ background-size: auto 100%, auto 100%, auto auto;
+}
+
+/* Tab hover */
+
+.tabmail-tab:hover .tab-background:not([selected=true]) {
+ background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Adjust button hover color relative to the darker background. */
+#tabs-toolbar:not([brighttext]) button.tab-close-button:hover {
+ background-color: color-mix(in srgb, transparent 80%, CurrentColor);
+}
+
+#tabs-toolbar:not([brighttext]) button.tab-close-button:hover:active {
+ background-color: color-mix(in srgb, transparent 70%, CurrentColor);
+}
+
+#tabs-toolbar[brighttext] .tabmail-tab:hover .tab-background:not([selected=true]) {
+ background-color: rgba(255, 255, 255, 0.05);
+}
+
+.tab-line:not([selected=true]) {
+ opacity: 0;
+ transform: scaleX(0);
+ transition: transform 250ms var(--animation-easing-function),
+ opacity 250ms var(--animation-easing-function);
+}
+
+.tabmail-tab:hover .tab-line:not([selected=true]) {
+ background-color: rgba(0, 0, 0, 0.2);
+ opacity: 1;
+ transform: none;
+}
+
+#tabs-toolbar[brighttext] .tabmail-tab:hover .tab-line:not([selected=true]) {
+ background-color: rgba(255, 255, 255, 0.2);
+}
+
+.tab-throbber {
+ list-style-image: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .tab-throbber[busy] {
+ background-image: url("chrome://messenger/skin/icons/hourglass.svg");
+ background-position: center;
+ background-repeat: no-repeat;
+ opacity: 0.8;
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .tab-throbber[busy] {
+ position: relative;
+ overflow: hidden;
+ }
+
+ .tab-throbber[busy]::before {
+ content: "";
+ position: absolute;
+ background-image: var(--icon-loading);
+ background-position: left center;
+ background-repeat: no-repeat;
+ width: 480px;
+ height: 100%;
+ animation: tab-throbber-animation 1.05s steps(30) infinite;
+ opacity: 0.7;
+ }
+
+ .tab-throbber[busy]:-moz-locale-dir(rtl)::before {
+ animation-name: tab-throbber-animation-rtl;
+ }
+
+ @keyframes tab-throbber-animation {
+ 0% { transform: translateX(0); }
+ 100% { transform: translateX(-100%); }
+ }
+
+ @keyframes tab-throbber-animation-rtl {
+ 0% { transform: translateX(0); }
+ 100% { transform: translateX(100%); }
+ }
+}
+
+/**
+ * Tab Scrollbox Arrow Buttons
+ */
+
+#tabmail-arrowscrollbox::part(scrollbutton-up),
+#tabmail-arrowscrollbox::part(scrollbutton-down) {
+ fill: var(--toolbarbutton-icon-fill, currentColor);
+ fill-opacity: var(--toolbarbutton-icon-fill-opacity);
+}
+
+/* Tab Overflow */
+#tabmail-arrowscrollbox:not([scrolledtostart])::part(overflow-start-indicator),
+#tabmail-arrowscrollbox:not([scrolledtoend])::part(overflow-end-indicator) {
+ width: 18px;
+ background-image: url("chrome://messenger/skin/icons/overflow-indicator.png");
+ background-size: 17px 100%;
+ background-repeat: no-repeat;
+ border-left: 1px solid;
+ border-image: linear-gradient(rgba(255,255,255,.2),
+ rgba(255,255,255,.2) calc(100% - var(--tabs-tabbar-border-size)),
+ transparent calc(100% - var(--tabs-tabbar-border-size)));
+ border-image-slice: 1;
+ margin-bottom: var(--tabs-tabbar-border-size);
+ pointer-events: none;
+ position: relative;
+ z-index: 3; /* the selected tab's z-index + 1 */
+}
+
+#tabmail-arrowscrollbox:-moz-locale-dir(rtl)::part(overflow-start-indicator),
+#tabmail-arrowscrollbox:-moz-locale-dir(ltr)::part(overflow-end-indicator) {
+ transform: scaleX(-1);
+}
+
+#tabmail-arrowscrollbox:not([scrolledtostart])::part(overflow-start-indicator) {
+ margin-inline-start: -1px;
+ margin-inline-end: -17px;
+}
+
+#tabmail-arrowscrollbox:not([scrolledtoend])::part(overflow-end-indicator) {
+ margin-inline-start: -17px;
+ margin-inline-end: -1px;
+}
+
+#tabmail-arrowscrollbox[scrolledtostart]::part(overflow-start-indicator),
+#tabmail-arrowscrollbox[scrolledtoend]::part(overflow-end-indicator) {
+ opacity: 0;
+}
+
+#tabmail-arrowscrollbox::part(overflow-start-indicator),
+#tabmail-arrowscrollbox::part(overflow-end-indicator) {
+ transition: opacity 150ms ease;
+}
+
+/**
+ * All Tabs Button
+ */
+
+#alltabs-button {
+ list-style-image: url("chrome://messenger/skin/icons/arrow-dropdown.svg");
+}
+
+#alltabs-button .toolbarbutton-icon {
+ width: 16px;
+ height: 16px;
+}
+
+#alltabs-button > .toolbarbutton-text,
+#alltabs-button > .toolbarbutton-menu-dropmarker {
+ display: none;
+}
+
+/* All Tabs Menupopup */
+
+.alltabs-item {
+ list-style-image: var(--icon-draft);
+}
+
+.alltabs-item[selected] {
+ font-weight: bold;
+}
+
+.alltabs-item[busy] {
+ list-style-image: url("chrome://global/skin/icons/loading.png") !important;
+}
+
+.alltabs-item > .menu-iconic-left {
+ fill: MenuText;
+}
+
+.alltabs-item[_moz-menuactive="true"] > .menu-iconic-left {
+ fill: -moz-menuhovertext;
+}
+
+/* Content Tabs */
+.chromeTabInstance[collapsed="false"] .contentTabToolbox,
+.contentTabInstance[collapsed="false"] .contentTabToolbox {
+ display: none;
+}
+
+.contentTabAddress {
+ display: flex;
+ align-items: center;
+}
+
+.contentTabAddress > .contentTabSecurity {
+ flex: 0 0 auto;
+}
+
+.contentTabAddress > .contentTabUrlInput {
+ flex: 1 1 auto;
+}
+
+.contentTabSecurity {
+ height: 16px;
+ width: 16px;
+ -moz-context-properties: fill;
+ fill: currentColor;
+ /* Position within the input. */
+ position: relative;
+ /* Make sure we take up no width in the flow. */
+ margin-inline-end: -16px;
+ /* Move within the input. Input has a margin of 3px and border of 1px, so this
+ * is 5px within. */
+ inset-inline-start: 9px;
+}
+
+.contentTabSecurity.secure-connection-icon {
+ fill: #12bc00;
+}
+
+.contentTabSecurity:not([src]) {
+ display: none;
+}
+
+.contentTabSecurity[src] + .contentTabUrlInput {
+ /* 5px before the icon + 16px width + 4px after. */
+ padding-inline-start: 25px;
+}
+
+.contentTabSecurity:not([src]) + .contentTabUrlInput {
+ padding-inline-start: 4px;
+}
+
+.nav-button {
+ appearance: none;
+ list-style-image: var(--icon-nav-back);
+ border: 1px solid transparent;
+ border-radius: 2px;
+ margin: 5px 2px;
+ margin-inline-start: 2px;
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+.nav-button[disabled="true"] {
+ color: inherit;
+}
+
+.nav-button[disabled="true"] > .toolbarbutton-icon {
+ opacity: 0.4;
+}
+
+.nav-button:not([disabled="true"]):hover {
+ background-color: var(--toolbarbutton-hover-background);
+ cursor: pointer;
+}
+
+.nav-button > .toolbarbutton-text {
+ display: none;
+}
+
+.back-btn:-moz-locale-dir(rtl),
+.forward-btn:-moz-locale-dir(ltr) {
+ list-style-image: var(--icon-nav-forward);
+}
diff --git a/comm/mail/themes/shared/mail/tagColors.css b/comm/mail/themes/shared/mail/tagColors.css
new file mode 100644
index 0000000000..ad932f3141
--- /dev/null
+++ b/comm/mail/themes/shared/mail/tagColors.css
@@ -0,0 +1,13 @@
+/* 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/. */
+
+/* ::::: thread labels decoration ::::: */
+
+/*
+ * This style sheet is empty and will be dynamically populated.
+ * To populate it, typically TagUtils.loadTagsIntoCSS(document)
+ * is called from the document's onload() handler.
+ * There is also TagUtils.addTagToAllDocumentSheets() which inserts
+ * CSS into this sheet on all open messenger and search windows.
+ */
diff --git a/comm/mail/themes/shared/mail/themeableDialog.css b/comm/mail/themes/shared/mail/themeableDialog.css
new file mode 100644
index 0000000000..9d1c35ffe9
--- /dev/null
+++ b/comm/mail/themes/shared/mail/themeableDialog.css
@@ -0,0 +1,608 @@
+/* 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/icons.css");
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:host,
+:root {
+ --button-background-color: color-mix(in srgb, currentColor 13%, transparent);
+ --button-hover-background-color: color-mix(in srgb, currentColor 17%, transparent);
+ --button-active-background-color: color-mix(in srgb, currentColor 30%, transparent);
+ --button-border-color: color-mix(in srgb, currentColor 17%, transparent);
+ --button-border-radius: 3px;
+ --box-text-color: MenuText;
+ --box-background-color: Menu;
+ --box-border-color: ThreeDShadow;
+ --checkbox-border-color: var(--field-border-color);
+ --checkbox-unchecked-bgcolor: var(--field-background-color);
+ --checkbox-unchecked-hover-bgcolor: var(--field-background-color);
+ --field-text-color: FieldText;
+ --field-background-color: Field;
+ --field-border-color: rgba(128, 128, 128, .6);
+ --field-border-hover-color: rgba(128, 128, 128, .8);
+ --selected-item-color: var(--color-blue-60);
+ --primary-text-color: var(--selected-item-text-color);
+ --primary-background-hover: color-mix(in srgb, var(--selected-item-color) 85%, black);
+ --primary-background-active: color-mix(in srgb, var(--selected-item-color) 78%, black);
+ --primary-focus-border: -moz-Dialog;
+ --richlist-button-background: -moz-Dialog;
+ --tab-hover-background: hsla(0, 0%, 50%, 0.15);
+ --tab-selected-background: hsla(0, 0%, 50%, 0.25);
+}
+
+:root:-moz-lwtheme {
+ --box-text-color: var(--color-ink-90);
+ --box-background-color: var(--color-white);
+ --box-border-color: var(--color-gray-40);
+ --field-text-color: var(--color-gray-90);
+ --field-background-color: var(--color-white);
+ --field-border-color: rgba(0, 0, 0, 0.3);
+ --field-border-hover-color: rgba(0, 0, 0, 0.4);
+ --primary-focus-border: var(--lwt-accent-color);
+ background-color: var(--lwt-accent-color);
+ color: var(--lwt-text-color);
+}
+
+:root[lwt-tree] {
+ --richlist-button-background: var(--sidebar-background-color);
+}
+
+:root:not([lwt-tree]):-moz-lwtheme[lwtheme-image] {
+ background-image: var(--lwt-header-image) !important;
+ background-repeat: no-repeat;
+ background-position: right top !important;
+}
+
+:root:not([lwt-tree]):-moz-lwtheme:-moz-window-inactive {
+ background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
+}
+
+:root:not([lwt-tree]):-moz-lwtheme dialog,
+#calendar-event-dialog-inner:not([lwt-tree]):-moz-lwtheme,
+#calendar-task-dialog-inner:not([lwt-tree]):-moz-lwtheme {
+ background-color: -moz-Dialog;
+ color: -moz-DialogText;
+ text-shadow: none !important;
+
+ --box-text-color: MenuText;
+ --box-background-color: Menu;
+ --box-border-color: ThreeDShadow;
+ --checkbox-border-color: rgba(128, 128, 128, .6);
+ --checkbox-unchecked-bgcolor: Field;
+ --checkbox-unchecked-hover-bgcolor: Field;
+ --field-text-color: FieldText;
+ --field-background-color: Field;
+ --field-border-color: rgba(128, 128, 128, .6);
+ --field-border-hover-color: rgba(128, 128, 128, .8);
+ --selected-item-color: var(--color-blue-60);
+ --lwt-accent-color: -moz-Dialog;
+ --richlist-button-background: -moz-Dialog;
+ --tab-hover-background: hsla(0, 0%, 50%, 0.15);
+ --tab-selected-background: hsla(0, 0%, 50%, 0.25);
+}
+
+@media (prefers-color-scheme: dark) {
+ :host,
+ :root:-moz-lwtheme,
+ :root:not([lwt-tree]):-moz-lwtheme dialog {
+ --box-text-color: var(--color-ink-10);
+ --box-background-color: var(--color-ink-80);
+ --box-border-color: rgba(249, 249, 250, 0.3);
+ --field-text-color: var(--color-ink-10);
+ --field-background-color: var(--color-gray-70);
+ --field-border-color: hsla(0, 0%, 70%, 0.4);
+ --field-border-hover-color: hsla(0, 0%, 70%, 0.5);
+ --selected-item-color: var(--color-blue-50);
+ --highlight-background: var(--color-white);
+ --primary-text-color: var(--color-ink-10);
+ --tab-hover-background: hsla(0, 0%, 50%, 0.3);
+ --tab-selected-background: hsla(0, 0%, 50%, 0.5);
+ }
+}
+
+@media (prefers-contrast) {
+ :host,
+ :root:not(:-moz-lwtheme) {
+ --button-background-color: ButtonFace;
+ --button-hover-background-color: SelectedItem;
+ --button-active-background-color: SelectedItem;
+ --button-text-active: SelectedItemText;
+ --button-border-color: ThreeDShadow;
+ --field-border-color: ThreeDShadow;
+ --field-border-hover-color: SelectedItemText;
+ --primary-text-color: SelectedItemText;
+ --selected-item-color: SelectedItem;
+ --tab-hover-background: SelectedItem;
+ --tab-selected-background: SelectedItem;
+ }
+
+ button[open],
+ button:not([disabled="true"]):hover,
+ button:not([disabled="true"]):hover:active,
+ menulist:not([disabled="true"],[open="true"]):hover,
+ menulist[open="true"]:not([disabled="true"]),
+ tab:hover,
+ tab[visuallyselected="true"] {
+ color: var(--button-text-active) !important;
+ }
+}
+
+dialog::part(content-box) {
+ flex: 1;
+}
+
+dialog.scrollable {
+ width: 100vw;
+ height: 100vh;
+}
+
+dialog.scrollable::part(content-box) {
+ overflow: scroll;
+}
+
+html|input,
+html|textarea {
+ appearance: none;
+ background-color: var(--field-background-color);
+ border: 1px solid var(--field-border-color);
+ border-radius: var(--button-border-radius);
+ color: var(--field-text-color);
+ margin: 2px 4px;
+}
+
+html|input:not(:focus):hover,
+html|textarea:not(:focus):hover {
+ border-color: var(--field-border-hover-color);
+}
+
+html|input:focus,
+html|textarea:focus {
+ border-color: var(--selected-item-color);
+ outline: 1px solid var(--selected-item-color);
+}
+
+:root[lwt-tree-brighttext] html|input::selection,
+:root[lwt-tree-brighttext] html|textarea::selection,
+:root[lwt-default-theme-in-dark-mode] html|input::selection,
+:root[lwt-default-theme-in-dark-mode] html|textarea::selection {
+ background-color: var(--highlight-background);
+ color: var(--selected-item-color);
+}
+
+html|input:is([type="email"],[type="tel"],[type="text"],[type="password"],
+ [type="url"],[type="number"]):disabled {
+ opacity: 0.4;
+}
+
+html|input[type="number"] {
+ padding-inline-end: 1px;
+}
+
+html|input[type="number"]::-moz-number-spin-up,
+html|input[type="number"]::-moz-number-spin-down {
+ appearance: none;
+ width: 16px;
+ background-position: center;
+ background-color: var(--button-background-color);
+ background-repeat: no-repeat;
+ border: 1px solid var(--field-border-color);
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+html|input[type="number"]::-moz-number-spin-up {
+ background-image: var(--icon-nav-up-sm);
+ border-bottom-style: none;
+ border-radius: 2px 2px 0 0;
+}
+html|input[type="number"]::-moz-number-spin-down {
+ background-image: var(--icon-nav-down-sm);
+ border-radius: 0 0 2px 2px;
+}
+
+button,
+menulist,
+html|input[type="color"] {
+ appearance: none;
+ min-height: 24px;
+ /* !important overrides button.css for disabled and default XUL buttons: */
+ color: inherit !important;
+ border: 1px solid var(--button-border-color); /* needed for high-contrast mode, where it'll show up */
+ border-radius: var(--button-border-radius);
+ background-color: var(--button-background-color);
+ padding: 0 8px;
+ text-decoration: none;
+ margin: 4px;
+ /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */
+ font-size: 1em;
+}
+
+menulist {
+ padding-inline: 4px;
+}
+
+html|input[type="color"] {
+ padding: 4px;
+}
+
+#folderCompactDialog {
+ width: 50em;
+}
+
+#resetColor {
+ list-style-image: url("chrome://messenger/skin/icons/forget.svg");
+ -moz-context-properties: fill;
+ fill: currentColor;
+ min-width: 16px;
+ min-height: 16px;
+ padding: 2px !important;
+ margin-inline-end: 4px;
+ --toolbarbutton-hover-background: var(--button-hover-background-color);
+ --toolbarbutton-hover-bordercolor: var(--button-border-color);
+ --toolbarbutton-active-background: var(--button-active-background-color);
+ --toolbarbutton-active-bordercolor: var(--button-border-color);
+}
+
+#resetColor:not(:hover) {
+ background-color: transparent;
+}
+
+#resetColor .button-icon {
+ margin-inline-end: 0;
+}
+
+button:-moz-focusring {
+ outline: 2px solid var(--selected-item-color);
+ outline-offset: -1px;
+}
+
+button:not([disabled="true"]):hover,
+menulist:not([disabled="true"],[open="true"]):hover,
+menulist[open="true"]:not([disabled="true"]),
+html|input[type="color"]:not([disabled="true"]):hover {
+ background-color: var(--button-hover-background-color);
+}
+
+button[open],
+button[open]:hover,
+button:not([disabled="true"]):hover:active,
+html|input[type="color"]:not([disabled="true"]):hover:active {
+ background-color: var(--button-active-background-color);
+}
+
+button[default] {
+ background-color: var(--selected-item-color);
+ color: var(--primary-text-color) !important;
+}
+
+button[default]:-moz-focusring {
+ border-color: var(--primary-focus-border);
+ outline-offset: 0;
+}
+
+button[default]:not([disabled="true"]):hover {
+ background-color: var(--primary-background-hover);
+}
+
+button[default]:not([disabled="true"]):hover:active {
+ background-color: var(--primary-background-active);
+}
+
+button[is="toolbarbutton-menu-button"] > .button-box > button {
+ border-inline-end-color: var(--button-border-color);
+}
+
+button > .button-box > dropmarker {
+ padding-inline-start: 3px;
+}
+
+button[disabled="true"],
+menulist[disabled="true"] {
+ opacity: 0.4;
+}
+
+menulist::part(label-box) {
+ font-weight: inherit;
+ text-shadow: none;
+}
+
+menulist:-moz-focusring::part(label-box),
+menulist:-moz-focusring:not([open="true"])::part(label-box) {
+ outline: none;
+}
+
+menulist::part(icon) {
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+menulist[is="menulist-addrbooks"]::part(icon) {
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+menulist::part(dropmarker) {
+ appearance: none;
+ width: 16px;
+ padding: 0;
+ border: none;
+ background-color: transparent;
+}
+
+menulist::part(dropmarker-icon) {
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+ width: 16px;
+}
+
+menulist[is="menulist-editable"][editable="true"]::part(text-input) {
+ background-color: var(--field-background-color);
+ color: var(--field-text-color);
+ border: 1px solid var(--field-border-color);
+ border-start-start-radius: 3px;
+ border-end-start-radius: 3px;
+ border-start-end-radius: 0;
+ border-end-end-radius: 0;
+}
+
+menulist[is="menulist-editable"][editable="true"]::part(text-input):focus {
+ border-color: var(--selected-item-color);
+ outline: 1px solid var(--selected-item-color);
+}
+
+.menu-iconic-left {
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+.abMenuItem > .menu-iconic-left {
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+.menu-right {
+ appearance: none;
+ -moz-context-properties: fill;
+ list-style-image: var(--icon-nav-right-sm);
+ fill: currentColor;
+}
+
+.menu-right:-moz-locale-dir(rtl) {
+ list-style-image: var(--icon-nav-left-sm);
+}
+
+button menupopup menuseparator,
+menulist menupopup menuseparator {
+ appearance: none;
+ margin: 2px 0;
+ padding: 0;
+ border-top: 1px solid var(--box-border-color);
+ border-bottom: none;
+}
+
+:root[lwt-tree] .autocomplete-richlistbox {
+ border-style: none;
+ background-color: var(--box-background-color);
+}
+
+label {
+ margin-inline-start: 4px;
+}
+
+radio,
+checkbox {
+ appearance: none;
+}
+
+checkbox {
+ margin: 2px 4px;
+ padding-inline: 4px 2px;
+}
+
+radio[disabled="true"],
+checkbox[disabled="true"] {
+ color: #999;
+}
+
+.radio-check {
+ appearance: none;
+ width: 16px;
+ height: 16px;
+ border: 1px solid var(--field-border-color);
+ margin: 0;
+ margin-inline-end: 6px;
+ background-color: var(--field-background-color);
+}
+
+.radio-check {
+ border-radius: 50%;
+}
+
+radio:not([disabled="true"]):hover > .radio-check,
+checkbox:not([disabled="true"]):hover > .checkbox-check {
+ border-color: var(--selected-item-color);
+}
+
+.radio-check[selected] {
+ list-style-image: url("chrome://global/skin/icons/radio.svg");
+ -moz-context-properties: fill;
+ color: var(--checkbox-checked-border-color, currentColor);
+ fill: var(--checkbox-checked-color, AccentColorText);
+ background-color: var(--checkbox-checked-bgcolor, AccentColor);
+}
+
+:root[lwt-tree] richlistbox {
+ appearance: none;
+ background-color: var(--field-background-color);
+ color: var(--field-text-color);
+ border: 1px solid var(--field-border-color);
+}
+
+:root[lwt-tree] richlistitem[selected="true"] {
+ background-color: hsla(0,0%,50%,.15);
+ color: inherit;
+}
+
+:root[lwt-tree] richlistbox:focus > richlistitem[selected="true"] {
+ background-color: var(--sidebar-highlight-background-color, hsla(0, 0%, 50%, 0.35));
+ color: var(--sidebar-highlight-text-color, inherit);
+ outline: 1px solid var(--selected-item-color) !important;
+ outline-offset: -1px;
+}
+
+:root[lwt-tree] richlistbox:focus > richlistitem[selected="true"] button,
+:root[lwt-tree] richlistbox:focus > richlistitem[selected="true"] menulist {
+ color: var(--sidebar-text-color) !important;
+}
+
+richlistitem[selected="true"] {
+ background-color: var(--tab-selected-background);
+ color: inherit;
+}
+
+richlistbox:where(:focus) > richlistitem[selected="true"] {
+ background-color: var(--selected-item-color);
+ color: var(--selected-item-text-color);
+}
+
+richlistbox[seltype="multiple"]:focus > richlistitem[current="true"] {
+ outline-color: var(--selected-item-color);
+}
+
+richlistbox > richlistitem {
+ padding-block: 1px;
+}
+
+richlistbox > richlistitem menulist {
+ margin-block: 2px;
+}
+
+richlistitem button,
+richlistitem menulist {
+ background-color: var(--richlist-button-background);
+ background-image: linear-gradient(var(--button-background-color),
+ var(--button-background-color));
+ color: var(--field-text-color) !important;
+}
+
+richlistitem button:not([disabled="true"]):hover,
+richlistitem menulist:not([disabled="true"]):hover,
+richlistitem menulist[open="true"]:not([disabled="true"]) {
+ background-color: var(--richlist-button-background);
+ background-image: linear-gradient(var(--button-hover-background-color),
+ var(--button-hover-background-color));
+}
+
+richlistitem button[open],
+richlistitem button[open]:hover,
+richlistitem button:not([disabled="true"]):hover:active {
+ background-color: var(--richlist-button-background);
+ background-image: linear-gradient(var(--button-active-background-color),
+ var(--button-active-background-color));
+}
+
+menulist[open="true"],
+menulist:not([disabled="true"], [open="true"]):hover {
+ border-color: var(--button-border-color);
+}
+
+:root[lwt-tree] tree {
+ appearance: none;
+ border: 1px solid var(--sidebar-border-color);
+}
+
+tabbox {
+ color: inherit;
+ text-shadow: none;
+}
+
+tabs {
+ margin-block: 8px 10px;
+ margin-inline: 4px;
+ border-bottom: 1px solid var(--box-border-color);
+}
+
+tab {
+ appearance: none;
+ margin-top: 0;
+ padding: 6px 10px !important;
+ border-bottom: 2px solid transparent;
+ color: inherit !important;
+}
+
+tab:hover {
+ background-color: var(--tab-hover-background);
+}
+
+tab[visuallyselected="true"] {
+ margin-block: 0;
+ background-color: var(--tab-selected-background);
+ border-bottom-color: var(--lwt-tab-line-color, var(--selected-item-color));
+}
+
+tabpanels {
+ appearance: none;
+ border: none;
+ padding: 0;
+ background-color: transparent;
+ color: inherit;
+}
+
+.dialog-button-box {
+ padding-top: 6px;
+}
+
+fieldset:-moz-lwtheme {
+ border: 1px solid var(--field-border-color);
+}
+
+legend:-moz-lwtheme {
+ background-color: var(--lwt-accent-color);
+}
+
+separator.groove:not([orient="vertical"]) {
+ border-top-color: var(--field-border-color);
+ border-bottom-style: none;
+}
+
+.tip-caption {
+ opacity: 0.7;
+ font-size: .9em;
+}
+
+:root[lwt-tree-brighttext] .text-link {
+ color: #0aa5ff;
+}
+
+.text-link:focus-visible {
+ outline: 2px solid var(--selected-item-color);
+ outline-offset: 1px;
+ border-radius: 1px;
+}
+
+.alert-icon {
+ content: var(--icon-warning-dialog);
+ height: 48px;
+ width: 48px;
+}
+
+.question-icon {
+ content: var(--icon-question-dialog);
+ height: 48px;
+ width: 48px;
+}
+
+p {
+ margin: 2px 4px;
+}
+
+hr {
+ width: 100%;
+ border-top: 1px solid var(--field-border-color);
+ border-bottom: 0;
+}
diff --git a/comm/mail/themes/shared/mail/threadPane.css b/comm/mail/themes/shared/mail/threadPane.css
new file mode 100644
index 0000000000..c93565fa30
--- /dev/null
+++ b/comm/mail/themes/shared/mail/threadPane.css
@@ -0,0 +1,822 @@
+/* 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/. */
+
+:root {
+ --thread-pane-container-gap: 3px;
+ --thread-pane-header-padding: 3px;
+}
+
+:root[uidensity="compact"] {
+ --thread-pane-container-gap: 0;
+}
+
+:root[uidensity="touch"] {
+ --thread-pane-header-padding: 6px;
+}
+
+@media not (prefers-contrast) {
+ :root {
+ --thread-pane-flag-fill: var(--color-orange-30);
+ --thread-pane-flag-stroke: var(--color-orange-60);
+ --thread-pane-unread-fill: var(--color-green-60);
+ --thread-pane-unread-stroke: var(--color-green-60);
+ --thread-pane-spam-fill: var(--color-red-50);
+ --thread-pane-spam-stroke: var(--color-red-70);
+ --thread-pane-unread-color: currentColor;
+ }
+
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --thread-pane-flag-fill: var(--color-orange-40);
+ --thread-pane-flag-stroke: var(--color-orange-50);
+ --thread-pane-unread-fill: var(--color-green-50);
+ --thread-pane-unread-stroke: var(--color-green-50);
+ --thread-pane-spam-fill: var(--color-red-40);
+ --thread-pane-spam-stroke: var(--color-red-50);
+ --thread-pane-unread-color: var(--color-white);
+ }
+ }
+}
+
+@media (prefers-contrast) {
+ :root {
+ --thread-pane-unread-color: currentColor;
+ }
+}
+
+#threadPane > tree-view {
+ -moz-context-properties: fill;
+ fill: currentColor;
+ background-color: var(--tree-view-bg);
+ color: var(--tree-view-color);
+ overflow-anchor: none;
+}
+
+#threadTree tbody [data-properties~="dummy"]:not(:hover, .selected) {
+ background-color: var(--layout-background-2);
+}
+
+#threadTree tbody [data-properties~="dummy"] .subject-line {
+ margin-inline-start: 6px;
+}
+
+#threadTree tbody [data-properties~="dummy"] :is(button:not(.twisty), .subject-line > img) {
+ display: none;
+}
+
+#threadTree tbody [data-properties~="unread"] {
+ font-weight: bold;
+}
+
+#threadTree tbody [data-properties~="imapdeleted"] :is(td, .subject-line) {
+ text-decoration: line-through;
+}
+
+.tree-button-delete img {
+ content: var(--icon-trash-sm);
+}
+
+.tree-button-restore img {
+ content: var(--icon-restore);
+}
+
+#threadTree tbody button.tree-button-restore {
+ display: none;
+}
+
+#threadTree tbody [data-properties~="imapdeleted"] .tree-button-delete {
+ display: none;
+}
+
+#threadTree tbody [data-properties~="imapdeleted"] .tree-button-restore {
+ display: block;
+}
+
+#threadTree tbody .children.collapsed[data-properties~="hasUnread"][data-properties~="read"]
+ :where(td, .subject-line) {
+ text-decoration: underline;
+}
+
+#threadTree thead[is="tree-view-table-header"] th::before {
+ display: none;
+}
+
+#threadTree tbody button {
+ min-height: auto;
+ min-width: auto;
+ padding: 0;
+ margin: 0;
+ background-color: transparent;
+ border: none;
+}
+
+#sizeCol,
+#unreadCol,
+#totalCol {
+ min-width: 4ch;
+}
+
+#sizeColButton,
+.sizecol-column,
+#unreadColButton,
+.unreadcol-column,
+#totalColButton,
+.totalcol-column {
+ text-align: end;
+}
+
+/* Add on the end aligned columns a padding when they are at the end of the row. */
+.sizecol-column[colspan="2"],
+.unreadcol-column[colspan="2"],
+.totalcol-column[colspan="2"] {
+ /* 25px is the width of the column picker. */
+ padding-inline-end: 25px;
+}
+
+@media (-moz-overlay-scrollbars) {
+ .sizecol-column[colspan="2"],
+ .unreadcol-column[colspan="2"],
+ .totalcol-column[colspan="2"] {
+ padding-inline-end: calc(25px + env(scrollbar-inline-size));
+ }
+}
+
+[is="tree-view-table-body"]:focus > .selected button,
+[is="tree-view-table-body"]:focus-within > .selected button,
+[is="tree-view-table-body"] > .selected:focus-within button {
+ color: currentColor;
+}
+
+#threadTree button:not(.twisty, .button-column-picker),
+#threadTree button:not(.button-column-picker) img {
+ display: block;
+ margin-inline: auto;
+}
+
+#threadTree[rows="thread-card"] button {
+ min-height: 16px;
+ min-width: 16px;
+ opacity: 0.7;
+}
+
+#threadTree[rows="thread-card"] button:hover {
+ opacity: 1;
+ color: currentColor;
+}
+
+tr[data-properties~="untagged"][data-properties~="unread"] {
+ color: var(--thread-pane-unread-color);
+}
+
+tr[is="thread-row"],
+tr[is="thread-card"] .subject {
+ color: var(--tag-color, currentColor);
+}
+
+.tag-icon {
+ content: var(--icon-tag-sm);
+}
+
+tr[data-properties~="tagged"] .tag-icon {
+ display: unset;
+ color: var(--tag-color, currentColor);
+}
+
+[is="tree-view-table-body"]:focus > .selected[data-properties~="tagged"] :is(.tag-icon, .subject),
+[is="tree-view-table-body"]:focus-within > .selected[data-properties~="tagged"] :is(.tag-icon, .subject),
+[is="tree-view-table-body"] > .selected[data-properties~="tagged"]:focus-within :is(.tag-icon, .subject) {
+ color: currentColor;
+}
+
+[is="tree-view-table-body"]:focus tr[is="thread-row"].selected,
+[is="tree-view-table-body"]:focus-within tr[is="thread-row"].selected,
+[is="tree-view-table-body"] tr[is="thread-row"].selected:focus-within {
+ background-color: var(--tag-color, var(--listbox-focused-selected-bg));
+ color: var(--tag-contrast-color, var(--listbox-selected-color));
+}
+
+[is="tree-view-table-body"] tr.context-menu-target {
+ background-color: color-mix(in srgb, var(--treeitem-background-active) 10%, transparent);
+ outline: 1px var(--listbox-border-type) var(--listbox-focused-selected-bg);
+ outline-offset: -1px;
+}
+
+/* Thread column */
+
+.tree-view-header-thread img {
+ content: var(--icon-thread-sm);
+ pointer-events: none;
+}
+
+.tree-view-row-thread img {
+ content: var(--icon-thread-sm);
+ color: var(--tree-view-color);
+ opacity: 0.7;
+ pointer-events: none;
+}
+
+#threadTree tbody [data-properties~="ignore"] .tree-view-row-thread img {
+ content: var(--icon-thread-ignored);
+}
+
+#threadTree tbody [data-properties~="ignoreSubthread"] .tree-view-row-thread img {
+ content: var(--icon-subthread-ignored);
+}
+
+#threadTree tbody [data-properties~="watch"] .tree-view-row-thread img {
+ content: var(--icon-eye);
+}
+
+[is="tree-view-table-body"]:focus > .selected .tree-view-row-thread img,
+[is="tree-view-table-body"]:focus-within > .selected .tree-view-row-thread img,
+[is="tree-view-table-body"] > .selected:focus-within .tree-view-row-thread img {
+ color: currentColor;
+}
+
+#threadTree tr:not(.children, [data-properties~="ignoreSubthread"]) .tree-view-row-thread > button {
+ display: none;
+}
+
+/* Starred column */
+
+#flaggedColButton img {
+ content: var(--icon-star-sm);
+}
+
+.tree-view-row-flag button {
+ color: var(--tree-view-color);
+ opacity: 0.8;
+}
+
+.tree-view-row-flag img {
+ content: var(--icon-star);
+ pointer-events: none;
+ fill: color-mix(in srgb, currentColor 10%, transparent);
+ stroke: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+@media (prefers-color-scheme: dark) {
+ .tree-view-row-flag img {
+ stroke: color-mix(in srgb, currentColor 40%, transparent);
+ }
+}
+
+.button-star {
+ -moz-context-properties: fill, stroke;
+ background-image: var(--icon-star);
+ fill: color-mix(in srgb, currentColor 10%, transparent);
+ stroke: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+[is="tree-view-table-body"]:focus > .selected:not([data-properties~="flagged"]) .button-star,
+[is="tree-view-table-body"]:focus-within > .selected:not([data-properties~="flagged"]) .button-star {
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: color-mix(in srgb, currentColor 70%, transparent);
+}
+
+tr[data-properties~="flagged"] .tree-view-row-flag > .tree-button-flag > img,
+tr[data-properties~="flagged"] .button-star {
+ fill: var(--thread-pane-flag-fill);
+ stroke: var(--thread-pane-flag-stroke);
+}
+
+.tree-view-row-flag button:hover {
+ opacity: 1;
+}
+
+/* Attachment column variations */
+
+#attachmentColButton img {
+ content: var(--icon-attachment-sm);
+}
+
+:is(.attachmentcol-column img, .attachment-icon) {
+ content: var(--icon-attachment-sm);
+ color: var(--tree-view-color);
+ margin-top: 1px;
+ opacity: 0.7;
+}
+
+[is="tree-view-table-body"]:focus >
+ .selected :is(.attachmentcol-column img, .attachment-icon),
+[is="tree-view-table-body"]:focus-within >
+ .selected :is(.attachmentcol-column img, .attachment-icon),
+[is="tree-view-table-body"] >
+ .selected:focus-within :is(.attachmentcol-column img, .attachment-icon) {
+ color: currentColor;
+}
+
+tr:not([data-properties~="attach"]) :is(.attachmentcol-column img, .attachment-icon) {
+ display: none;
+}
+
+/* Unread column variations */
+
+#unreadButtonColHeader img {
+ content: var(--icon-unread-sm);
+}
+
+.tree-view-row-unread button {
+ color: var(--tree-view-color);
+ opacity: 0.8;
+}
+
+.tree-view-row-unread img {
+ content: var(--icon-unread-dot);
+ pointer-events: none;
+ fill: color-mix(in srgb, currentColor 10%, transparent);
+ stroke: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+tr[data-properties~="unread"] .tree-view-row-unread > .tree-button-unread > img {
+ fill: color-mix(in srgb, var(--thread-pane-unread-fill) 50%, transparent);
+ stroke: var(--thread-pane-unread-stroke);
+}
+
+[is="tree-view-table-body"]:focus > .selected > .tree-view-row-unread > .tree-button-unread > img,
+[is="tree-view-table-body"]:focus-within > .selected > .tree-view-row-unread > .tree-button-unread > img,
+[is="tree-view-table-body"] > .selected:focus-within > .tree-view-row-unread > .tree-button-unread > img {
+ fill: transparent;
+ stroke: currentColor;
+}
+
+[is="tree-view-table-body"]:focus > tr[data-properties~="unread"].selected >
+ .tree-view-row-unread > .tree-button-unread > img,
+[is="tree-view-table-body"]:focus-within > tr[data-properties~="unread"].selected >
+ .tree-view-row-unread > .tree-button-unread > img,
+[is="tree-view-table-body"] > tr[data-properties~="unread"].selected:focus-within >
+ .tree-view-row-unread > .tree-button-unread > img {
+ fill: currentColor;
+}
+
+tr[data-properties~="unread"].selected .tree-view-row-unread button {
+ opacity: 1;
+}
+
+.tree-view-row-unread button:hover {
+ opacity: 1;
+}
+
+/* Subject column variations */
+
+#subjectColButton {
+ /* TODO: make this density aware. */
+ padding-inline-start: 19px;
+ text-indent: 0;
+}
+
+.threaded #subjectColButton {
+ /* TODO: make this density aware. */
+ padding-inline-start: 41px;
+}
+
+tr[is="thread-row"] td > .thread-container {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ max-height: inherit;
+ box-sizing: border-box;
+}
+
+tr[is="thread-row"] .subject-line {
+ margin-inline-start: calc(16px * var(--thread-level));
+ pointer-events: none;
+ /* Line height px exception to avoid vertical cut off of characters. This
+ should follow and match the density variation height of the row. */
+ line-height: 22px;
+}
+
+[is="tree-view-table-body"][role="tree"] tr[is="thread-row"]:not(.children) .subject-line {
+ padding-inline-start: 22px;
+}
+
+tr[is="thread-row"] .subject-line img {
+ visibility: hidden;
+ width: 16px;
+ height: 16px;
+ vertical-align: sub;
+ margin-inline-end: 3px;
+}
+
+tr[is="thread-card"] .state {
+ display: none;
+}
+
+/* Icons variations for message state in subject column */
+
+tr[data-properties~="new"] .subject-line img {
+ visibility: initial;
+ content: var(--icon-notify);
+ fill: var(--color-yellow-40) !important; /* override the selected, focus rule */
+ stroke: var(--color-orange-50) !important; /* override the selected, focus rule */
+}
+
+tr[data-properties~="replied"] :is(.subject-line img, .replied) {
+ visibility: initial;
+ display: initial;
+ content: var(--icon-reply-col);
+ fill: var(--color-purple-50);
+}
+
+tr[data-properties~="redirected"] :is(.subject-line img, .redirected) {
+ visibility: initial;
+ display: initial;
+ content: var(--icon-redirect-col);
+ fill: var(--color-orange-50);
+}
+
+tr[data-properties~="forwarded"] :is(.subject-line img, .forwarded) {
+ visibility: initial;
+ display: initial;
+ content: var(--icon-forward-col);
+ fill: var(--color-blue-50);
+}
+
+tr[data-properties~="replied"][data-properties~="forwarded"] .subject-line img {
+ visibility: initial;
+ content: var(--icon-reply-forward-col);
+ fill: var(--color-blue-50);
+ stroke: var(--color-purple-50);
+}
+
+tr[data-properties~="replied"][data-properties~="redirected"] .subject-line img {
+ visibility: initial;
+ content: var(--icon-reply-redirect-col);
+ fill: var(--color-orange-50);
+ stroke: var(--color-purple-50);
+}
+
+tr[data-properties~="forwarded"][data-properties~="redirected"] .subject-line img {
+ visibility: initial;
+ content: var(--icon-forward-redirect-col);
+ fill: var(--color-blue-50);
+ stroke: var(--color-orange-50);
+}
+
+tr[data-properties~="replied"][data-properties~="forwarded"][data-properties~="redirected"]
+ .subject-line img {
+ visibility: initial;
+ content: var(--icon-reply-forward-redirect-col);
+ fill: var(--color-blue-50);
+ stroke: var(--color-purple-50);
+}
+
+[is="tree-view-table-body"]:focus > .selected :is(.subject-line img, .state),
+[is="tree-view-table-body"]:focus-within > .selected :is(.subject-line img, .state),
+[is="tree-view-table-body"] > .selected:focus-within :is(.subject-line img, .state) {
+ fill: currentColor !important;
+ stroke: currentColor !important;
+}
+
+tr:is([is="thread-row"], [is="thread-card"]) .twisty {
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+ color: var(--tree-view-color);
+}
+
+#threadTree tr[is="thread-card"] button.twisty {
+ width: 12px;
+ height: 13px;
+ min-width: 12px;
+ min-height: 13px;
+}
+
+tr:is([is="thread-row"], [is="thread-card"]):not(.children) .twisty {
+ display: none;
+}
+
+tr:is([is="thread-row"], [is="thread-card"]) .twisty-icon {
+ width: 12px;
+ height: 12px;
+ content: var(--icon-nav-down-sm);
+ margin: 1px;
+}
+
+tr:is([is="thread-row"], [is="thread-card"]).children.collapsed .twisty-icon {
+ transform: rotate(-90deg);
+}
+
+tr:is([is="thread-row"], [is="thread-card"]).children.collapsed:dir(rtl) .twisty-icon {
+ transform: rotate(90deg);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ tr:is([is="thread-row"], [is="thread-card"]) .twisty-icon {
+ transition: transform 200ms ease;
+ }
+}
+
+/* Spam column variations */
+
+#junkStatusCol img {
+ content: var(--icon-spam-sm);
+}
+
+:is(.tree-view-row-spam button, .button-spam) {
+ color: var(--tree-view-color);
+ opacity: 0.8;
+}
+
+.tree-view-row-spam img {
+ content: var(--icon-spam);
+ pointer-events: none;
+}
+
+.button-spam {
+ background-image: var(--icon-spam);
+ -moz-context-properties: fill, stroke;
+}
+
+#threadTree tr:is(:not([data-properties~="junk"]), [data-properties~="notjunk"]) .button-spam {
+ display: none;
+}
+
+:is(.tree-view-row-spam img, .button-spam) {
+ fill: color-mix(in srgb, currentColor 10%, transparent);
+ stroke: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+@media (prefers-color-scheme: dark) {
+ :is(.tree-view-row-spam img, .button-spam) {
+ stroke: color-mix(in srgb, currentColor 40%, transparent);
+ }
+}
+
+tr[data-properties~="junk"] :is(.tree-view-row-spam > .tree-button-spam > img, .button-spam) {
+ fill: var(--thread-pane-spam-fill);
+ stroke: var(--thread-pane-spam-stroke);
+}
+
+:is(.tree-view-row-spam button, .button-spam):hover {
+ opacity: 1;
+}
+
+/* Vertical view variations */
+#threadTree tr[data-properties~="junk"] :is(.state, .attachment-icon, .button-star) {
+ display: none;
+}
+
+#threadTree tr[data-properties~="junk"] :is(.date, .subject) {
+ color: var(--color-red-60);
+ font-weight: 600;
+}
+
+@media (prefers-color-scheme: dark) {
+ #threadTree tr[data-properties~="junk"] :is(.date, .subject) {
+ color: var(--color-red-40);
+ }
+}
+
+#threadTree [is="tree-view-table-body"]:focus >
+ .selected[data-properties~="junk"] :is(.date, .subject),
+#threadTree [is="tree-view-table-body"]:focus-within >
+ .selected[data-properties~="junk"] :is(.date, .subject),
+#threadTree [is="tree-view-table-body"] >
+ .selected[data-properties~="junk"]:focus-within :is(.date, .subject) {
+ color: inherit;
+}
+
+/* Delete column variations */
+/* TODO: Handle delete button color variations for tagged messages */
+
+/* Correspondent column variations */
+
+#correspondentColButton,
+.correspondentcol-column {
+ text-indent: 18px;
+}
+
+.correspondentcol-column {
+ background-repeat: no-repeat;
+ background-position-x: 1px;
+ background-position-y: center;
+ padding-inline-start: var(--tree-header-cell-padding) !important;
+ -moz-context-properties: stroke, fill-opacity;
+ stroke: currentColor;
+ fill-opacity: 0.3;
+}
+
+.correspondentcol-column:dir(rtl) {
+ background-position-x: right 1px;
+}
+
+tr[data-properties~="outgoing"] .correspondentcol-column {
+ background-image: var(--icon-nav-forward);
+}
+
+tr[data-properties~="outgoing"] .correspondentcol-column:dir(rtl) {
+ background-image: var(--icon-nav-back);
+}
+
+tr[data-properties~="outgoing"].selected .correspondentcol-column {
+ fill-opacity: 0.6;
+}
+
+/* Vertical layout cards */
+
+#threadTree[rows="thread-card"] {
+ background-color: var(--layout-background-1);
+}
+
+tr[is="thread-card"] td {
+ padding: 0;
+}
+
+tr[is="thread-card"][data-properties~="unread"]:not(.selected, :hover) {
+ background-color: var(--tree-view-bg);
+}
+
+tr[is="thread-card"][data-properties~="new"] {
+ position: relative;
+ box-shadow: 0 6px 5px -5px rgba(0, 0, 0, 0.1);
+}
+
+.thread-card-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: var(--thread-pane-container-gap);
+ height: 100%;
+ padding-inline: 12px;
+ box-sizing: border-box;
+}
+
+tr[is="thread-card"] + tr[is="thread-card"]:not(.context-menu-target) .thread-card-container::before {
+ display: block;
+ content: "";
+ position: absolute;
+ height: 1px;
+ background-color: var(--layout-background-3);
+ inset: 0;
+}
+
+@media (-moz-overlay-scrollbars) {
+ .thread-card-container {
+ padding-inline-end: env(scrollbar-inline-size);
+ }
+}
+
+tr[data-properties~="new"] .thread-card-container::after {
+ position: absolute;
+ content: var(--icon-new-indicator);
+ inset-inline-start: 3px;
+ inset-block-start: 3px;
+}
+
+tr[data-properties~="thread-children"] .thread-card-container {
+ margin-inline-start: 24px;
+ border-bottom: none;
+}
+
+tr[data-properties~="thread-children"] + tr[data-properties~="thread-children"] .thread-card-container {
+ border-top: 1px solid var(--layout-background-3);
+}
+
+tr[data-properties~="thread-children"] + tr:not([data-properties~="thread-children"]) .thread-card-container {
+ border-top: 1px solid var(--layout-background-3);
+}
+
+.thread-card-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 6px;
+ padding: 0;
+ margin: 0;
+ line-height: 1.3;
+}
+
+.thread-card-row > :is(.sender, .subject) {
+ flex: 1 1 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.is-outgoing [data-properties~="outgoing"] .thread-card-row > .sender {
+ background-position-x: 0;
+ background-position-y: center;
+ background-repeat: no-repeat;
+ background-image: var(--icon-nav-forward);
+ -moz-context-properties: stroke, fill-opacity;
+ stroke: currentColor;
+ fill-opacity: 0.3;
+ padding-inline-start: 18px;
+}
+
+.is-outgoing [data-properties~="outgoing"] .thread-card-row > .sender:dir(rtl)::before {
+ background-image: var(--icon-nav-back);
+}
+
+[data-properties~="dummy"] > td > .thread-card-container > .thread-card-row:first-child {
+ display: none;
+}
+
+.thread-card-subject-container .sender {
+ font-weight: 400;
+}
+
+.thread-card-subject-container {
+ display: flex;
+ align-items: center;
+ gap: 3px;
+ flex: 1 1 0;
+}
+
+.thread-card-subject-container .subject {
+ font-size: 1.1rem;
+ font-weight: 500;
+ flex: 1 1 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+[data-properties~="dummy"] .thread-card-subject-container .subject {
+ padding-inline-start: 9px;
+}
+
+.thread-card-container .date {
+ flex: 0 0 auto;
+ white-space: nowrap;
+ font-size: 0.95rem;
+ opacity: 0.85;
+}
+
+#threadTree [data-properties~="unread"] .thread-card-container :is(.sender, .subject) {
+ font-weight: bold;
+}
+
+#threadTree [data-properties~="new"]:not(.selected) .thread-card-container :is(.subject, .date) {
+ color: var(--new-folder-color);
+}
+
+/* Header bar */
+
+.list-header-bar:not([hidden]) {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 3px;
+ color: var(--layout-color-1);
+ padding-inline: var(--thread-pane-header-padding);
+ background-color: var(--layout-background-1);
+ border-bottom: 1px solid var(--layout-border-0);
+}
+
+:root[lwt-tree] .list-header-bar:-moz-lwtheme {
+ background-color: color-mix(in srgb, var(--toolbar-bgcolor) 50%, transparent);
+ color: var(--toolbar-color, inherit);
+}
+
+#threadPaneFolderCountContainer {
+ flex-wrap: wrap;
+}
+
+.list-header-bar-container-start,
+.list-header-bar-container-end {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ overflow: hidden;
+ padding: var(--thread-pane-header-padding) 3px;
+}
+
+.list-header-bar-container-start {
+ flex-shrink: 1;
+}
+
+.list-header-bar-container-end .button:focus-visible {
+ outline-offset: 1px;
+}
+
+.list-header-title {
+ font-size: 1.2rem;
+ font-weight: 600;
+ margin-block: 0;
+ overflow: hidden;
+ white-space: nowrap;
+ flex-shrink: 1;
+ text-overflow: ellipsis;
+}
+
+.thread-pane-count-info {
+ white-space: nowrap;
+ font-size: 1rem;
+ font-weight: normal;
+ padding-inline-start: 9px;
+}
+
+#threadPaneQuickFilterButton {
+ background-image: var(--icon-filter);
+ margin: 0;
+}
+
+#threadPaneDisplayButton {
+ background-image: var(--icon-display-options);
+ margin: 0;
+ flex-shrink: 0;
+}
diff --git a/comm/mail/themes/shared/mail/tree-listbox.css b/comm/mail/themes/shared/mail/tree-listbox.css
new file mode 100644
index 0000000000..73cf0cf4ba
--- /dev/null
+++ b/comm/mail/themes/shared/mail/tree-listbox.css
@@ -0,0 +1,528 @@
+/* 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/. */
+
+:root {
+ --listbox-selected-outline: none;
+ --tree-header-table-height: 30px;
+ --tree-header-cell-padding: 6px;
+ --tree-header-cell-indent: 0;
+ --list-item-min-height: 26px;
+ --list-item-buttons-size: 22px;
+ --table-header-cell-icon-width: 24px;
+ --table-header-cell-icon-min-width: 24px;
+ --table-row-cell-img-margin-inline-start: 6px;
+ --table-row-cell-button-margin-inline-start: 4px;
+}
+
+:root[uidensity="compact"] {
+ --tree-header-table-height: 27px;
+ --tree-header-cell-padding: 3px;
+ --tree-header-cell-indent: 3px;
+ --list-item-min-height: 18px;
+ --list-item-buttons-size: 18px;
+ --table-header-cell-icon-width: 18px;
+ --table-header-cell-icon-min-width: 18px;
+ --table-header-cell-icon-button-padding: 0;
+ --table-row-cell-img-margin-inline-start: 3px;
+ --table-row-cell-button-margin-inline-start: 1px;
+}
+
+:root[uidensity="touch"] {
+ --tree-header-table-height: 36px;
+ --tree-header-cell-padding: 9px;
+ --tree-header-cell-indent: -3px;
+ --list-item-min-height: 32px;
+ --table-header-cell-icon-width: 33px;
+ --table-header-cell-icon-min-width: 33px;
+ --table-row-cell-img-margin-inline-start: 11px;
+ --table-row-cell-button-margin-inline-start: 9px;
+}
+
+@media not (prefers-contrast) {
+ :root {
+ --listbox-color: var(--color-gray-80);
+ --listbox-selected-bg: var(--color-gray-20);
+ --listbox-focused-selected-bg: var(--selected-item-color);
+ --listbox-selected-color: var(--selected-item-text-color);
+ --listbox-focused-selected-color: var(--selected-item-text-color);
+ --listbox-hover: color-mix(in srgb, transparent 80%, var(--listbox-focused-selected-bg));
+ --listbox-border-type: dashed;
+ --tree-view-bg: var(--color-white);
+ --tree-view-color: var(--color-ink-90);
+ --tree-view-header-hover-bg: var(--color-gray-20);
+ --tree-view-header-hover-active-bg: var(--color-gray-30);
+ --tree-view-header-border-color: var(--color-gray-30);
+ --tree-row-delete-button-color: var(--color-red-60);
+ }
+
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --listbox-color: var(--color-gray-05);
+ --listbox-selected-bg: var(--color-gray-70);
+ --listbox-focused-selected-bg: var(--color-blue-60);
+ --tree-view-bg: var(--color-gray-90);
+ --tree-view-color: var(--color-gray-30);
+ --tree-view-header-hover-bg: var(--color-gray-70);
+ --tree-view-header-hover-active-bg: var(--color-gray-90);
+ --tree-view-header-border-color: var(--splitter-color);
+ --tree-row-delete-button-color: var(--color-red-40);
+ }
+ }
+}
+
+@media (prefers-contrast) {
+ :root {
+ --listbox-color: currentColor;
+ --listbox-selected-color: SelectedItemText;
+ --listbox-focused-selected-bg: SelectedItem;
+ --listbox-selected-bg: color-mix(in srgb, transparent 80%, var(--listbox-focused-selected-bg));
+ --listbox-selected-outline: 2px solid SelectedItem;
+ --listbox-border-type: solid;
+ --tree-view-bg: Field;
+ --tree-view-color: FieldText;
+ --tree-view-header-hover-bg: color-mix(in srgb, Field 70%, hsl(0, 0%, 50%));
+ --tree-view-header-border-color: ThreeDShadow;
+ }
+}
+
+:root[lwt-tree] {
+ --listbox-selected-bg: color-mix(in srgb, transparent 70%, var(--sidebar-highlight-background-color));
+ --listbox-hover: color-mix(in srgb, transparent 80%, var(--sidebar-highlight-background-color));
+ --listbox-focused-selected-bg: var(--sidebar-highlight-background-color, var(--selected-item-color));
+ --listbox-selected-color: var(--sidebar-highlight-text-color, var(--selected-item-text-color));
+}
+
+.tree-view-scrollable-container {
+ display: flex;
+ align-items: start;
+ overflow-y: scroll;
+ overscroll-behavior-y: none;
+ height: 100%;
+}
+
+[is="tree-view-table"] img {
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+}
+
+[is="tree-view-table-body"]:focus {
+ outline: none;
+}
+
+[is="tree-view-table-body"] > * {
+ cursor: default;
+}
+
+[is="tree-view-table-body"] > *:hover {
+ background-color: var(--listbox-hover);
+}
+
+@media (prefers-contrast) {
+ [is="tree-view-table-body"] > *:hover {
+ outline: var(--listbox-selected-outline);
+ outline-offset: -2px;
+ }
+}
+
+[is="tree-view-table-body"] > .selected {
+ background-color: var(--listbox-selected-bg);
+}
+
+[is="tree-view-table-body"]:focus > .selected,
+[is="tree-view-table-body"]:focus-within > .selected {
+ color: var(--listbox-selected-color);
+}
+
+[is="tree-view-table-body"]:focus > .current:not(.selected),
+[is="tree-view-table-body"]:focus-within > .current:not(.selected) {
+ outline: 1px var(--listbox-border-type) var(--listbox-focused-selected-bg);
+ outline-offset: -1px;
+}
+
+[is="tree-view-table-body"]:focus > .selected,
+[is="tree-view-table-body"]:focus-within > .selected,
+[is="tree-view-table-body"] > .selected:focus-within {
+ color: var(--listbox-selected-color);
+ background-color: var(--listbox-focused-selected-bg);
+}
+
+.multi-selected [is="tree-view-table-body"] > .selected.current,
+.multi-selected [is="tree-view-table-body"]:focus > .selected.current {
+ outline: 1px var(--listbox-border-type) var(--listbox-selected-color);
+ outline-offset: -1px;
+}
+
+[is="tree-view-table-body"]:focus > .selected img,
+[is="tree-view-table-body"]:focus-within > .selected img,
+[is="tree-view-table-body"] > .selected:focus-within img {
+ fill: color-mix(in srgb, currentColor 40%, transparent);
+ stroke: currentColor;
+}
+
+[is="tree-view-table-body"]:focus > .selected .tree-view-row-thread img,
+[is="tree-view-table-body"]:focus-within > .selected .tree-view-row-thread img {
+ stroke: var(--listbox-selected-color);
+}
+
+tr:is([is="thread-row"], [is="thread-card"]).selected .twisty {
+ color: currentColor;
+}
+
+/* Resizable table columns */
+
+table[is="tree-view-table"] {
+ table-layout: fixed;
+ flex: 1 0 100%;
+ border-spacing: 0;
+ line-height: 1;
+ font-size: 1rem;
+ background-color: var(--tree-view-bg);
+ color: var(--tree-view-color);
+}
+
+body:not(.layout-table) thead[is="tree-view-table-header"] {
+ display: none;
+}
+
+thead[is="tree-view-table-header"] {
+ height: var(--tree-header-table-height);
+ position: sticky;
+ inset-inline: 0;
+ inset-block-start: 0;
+ z-index: 1;
+}
+
+thead[is="tree-view-table-header"]::after {
+ content: '';
+ position: absolute;
+ inset-inline: 0;
+ height: 0;
+ z-index: 1;
+ border-bottom: 1px solid var(--sidebar-border-color, var(--tree-view-header-border-color));
+}
+
+thead[is="tree-view-table-header"] hr[is="pane-splitter"] {
+ position: absolute;
+ inset-inline-end: 4px;
+ inset-block: 3px;
+}
+
+thead[is="tree-view-table-header"] hr[is="pane-splitter"]:hover:not(:active,[disabled]) {
+ background-color: var(--selected-item-color);
+}
+
+th[is="tree-view-table-header-cell"] {
+ height: var(--tree-header-table-height);
+ min-width: 7ch;
+ padding: 0;
+ position: relative;
+ overflow: hidden;
+ background-color: var(--tree-view-bg);
+}
+
+th[is="tree-view-table-header-cell"][data-type="icon"] {
+ width: var(--table-header-cell-icon-width);
+ min-width: var(--table-header-cell-icon-min-width);
+}
+
+th[is="tree-view-table-header-cell"][data-type="icon"] button {
+ padding: var(--table-header-cell-icon-button-padding, var(--tree-header-cell-padding));
+}
+
+th[is="tree-view-table-header-cell"][data-type="icon"] img {
+ display: block;
+ margin-inline: auto;
+}
+
+th[is="tree-view-table-header-cell"] hr[is="pane-splitter"] {
+ border-inline-start-style: none !important;
+ border-inline-end-style: solid;
+}
+
+/* Select column */
+
+#selectColButton {
+ padding-inline: 0;
+}
+
+:is(.tree-view-header-select, .tree-view-row-select) img {
+ color: var(--tree-view-color);
+ content: var(--icon-checkbox);
+ -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
+ fill: currentColor;
+ fill-opacity: 0;
+ stroke-opacity: 0;
+}
+
+[is="tree-view-table-body"]:focus >
+ .selected :is(.tree-view-header-select, .tree-view-row-select) img,
+[is="tree-view-table-body"]:focus-within >
+ .selected :is(.tree-view-header-select, .tree-view-row-select) img,
+[is="tree-view-table-body"] > .selected:focus-within
+ :is(.tree-view-header-select, .tree-view-row-select) img {
+ color: currentColor;
+}
+
+.tree-view-row-select img {
+ display: block;
+ margin-inline: auto;
+}
+
+.some-selected .tree-view-header-select img {
+ stroke-opacity: 1;
+}
+
+:is(.all-selected, .selected) :is(.tree-view-header-select, .tree-view-row-select) img {
+ fill-opacity: 1;
+}
+
+[is="tree-view-table-body"]:focus .selected > .tree-view-row-select img,
+[is="tree-view-table-body"]:focus-within .selected > .tree-view-row-select img,
+[is="tree-view-table-body"] .selected:focus-within > .tree-view-row-select img {
+ fill: currentColor;
+}
+
+/* Delete column */
+
+.tree-table-cell-container button.tree-view-header-delete {
+ text-align: center;
+}
+
+.tree-view-row-delete button {
+ color: var(--tree-view-color);
+ opacity: 0.8;
+}
+
+.tree-view-row-delete button:hover {
+ opacity: 1;
+ color: var(--tree-row-delete-button-color);
+}
+
+[is="tree-view-table-body"]:focus .selected .tree-view-row-delete button,
+[is="tree-view-table-body"]:focus-within .selected .tree-view-row-delete button,
+[is="tree-view-table-body"] .selected:focus-within .tree-view-row-delete button {
+ color: currentColor;
+}
+
+.tree-view-header-delete img,
+.tree-view-row-delete img {
+ content: var(--icon-trash-sm);
+ pointer-events: none;
+}
+
+.tree-table-cell {
+ position: absolute;
+ inset-block: 0;
+ inset-inline: 0 1px;
+}
+
+th[data-resizable="false"] .tree-table-cell {
+ inset-inline: 0;
+}
+
+.tree-table-cell-container button {
+ font-size: 1rem;
+ font-weight: normal;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ text-indent: var(--tree-header-cell-indent);
+ white-space: nowrap;
+ text-align: start;
+ padding: var(--tree-header-cell-padding);
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ min-width: auto;
+ min-height: auto;
+ color: inherit;
+ border: none;
+ border-radius: 0;
+ background-color: transparent;
+ background-position: right 6px center;
+ background-repeat: no-repeat;
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+}
+
+.tree-table-cell-container button:hover {
+ background-color: var(--tree-view-header-hover-bg);
+}
+
+.tree-table-cell-container button:hover:active {
+ background-color: var(--tree-view-header-hover-active-bg);
+}
+
+.tree-table-cell-container button:focus-visible {
+ outline: 2px solid var(--selected-item-color);
+ outline-offset: -2px;
+ border-radius: var(--button-border-radius);
+}
+
+.tree-table-cell-container button.sorting {
+ background-image: var(--icon-nav-up-sm);
+ padding-inline-end: 18px;
+}
+
+.tree-table-cell-container button.sorting.descending {
+ background-image: var(--icon-nav-down-sm);
+}
+
+@media (-moz-platform: linux) {
+ .tree-table-cell-container button.sorting {
+ background-image: var(--icon-nav-down-sm);
+ }
+
+ .tree-table-cell-container button.sorting.descending {
+ background-image: var(--icon-nav-up-sm);
+ }
+}
+
+th[data-type="icon"] .tree-table-cell-container button.sorting {
+ background-image: none;
+ padding-inline-end: var(--tree-header-cell-padding);
+}
+
+th[is="tree-view-table-column-picker"] {
+ position: relative;
+ width: 25px;
+ min-width: 25px;
+ padding: 0;
+ background-color: var(--tree-view-bg);
+}
+
+@media (-moz-overlay-scrollbars) {
+ th[is="tree-view-table-column-picker"] {
+ padding-inline-end: env(scrollbar-inline-size);
+ }
+}
+
+.button-column-picker {
+ position: absolute;
+ inset: 0;
+}
+
+.button-column-picker img {
+ content: var(--icon-column-menu);
+ margin-inline: 0;
+}
+
+/* Table body */
+
+table[is="tree-view-table"] td {
+ max-width: 0;
+ height: inherit;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ padding: 0 6px;
+ position: relative;
+ user-select: none;
+ box-sizing: border-box;
+}
+
+table[is="tree-view-table"] td:is(.button-column, .tree-view-row-select) {
+ padding: 0;
+ text-align: center;
+}
+
+table[is="tree-view-table"] td.button-column[colspan="2"] {
+ text-align: start;
+}
+
+table[is="tree-view-table"] td.button-column[colspan="2"] img {
+ margin-inline-start: var(--table-row-cell-img-margin-inline-start);
+}
+
+#threadTree table[is="tree-view-table"] td.button-column[colspan="2"] button {
+ margin-inline-start: var(--table-row-cell-button-margin-inline-start);
+}
+
+#threadTree table[is="tree-view-table"] td.button-column[colspan="2"] button.tree-button-delete {
+ margin-inline-start: calc(var(--table-row-cell-button-margin-inline-start) + 2px);
+}
+
+table[is="tree-view-table"] td div:not(.recipient-avatar) {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+/* Placeholder */
+
+slot[name="placeholders"] {
+ position: absolute;
+ display: none;
+ box-sizing: border-box;
+ inset: 120px 0 auto;
+ padding: 0 40px;
+ opacity: 0.5;
+ text-align: center;
+}
+
+slot[name="placeholders"].show {
+ display: block;
+}
+
+slot[name="placeholders"] > div {
+ font-size: 1.5rem;
+ line-height: 1.2;
+ font-weight: 600;
+ margin-block-end: 12px;
+ text-shadow: 0 1px 0 var(--sidebar-background-color, var(--tree-view-bg));
+}
+
+slot[name="placeholders"] div::before {
+ content: "";
+ display: block;
+ height: 32px;
+ margin-block-end: 9px;
+ background-position: center top;
+ background-size: contain;
+ background-repeat: no-repeat;
+ -moz-context-properties: fill, stroke, fill-opacity;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ fill-opacity: var(--toolbarbutton-icon-fill-opacity);
+}
+
+/* Transitions and animations */
+
+@media (prefers-reduced-motion: no-preference) {
+ .tree-view-scrollable-container {
+ scroll-behavior: smooth;
+ }
+
+ thead[is="tree-view-table-header"] hr[is="pane-splitter"] {
+ transition: background-color var(--transition-duration) var(--transition-timing);
+ }
+
+ table[is="tree-view-table"] tbody tr {
+ transition:
+ color var(--transition-duration) var(--transition-timing),
+ background-color var(--transition-duration) var(--transition-timing);
+ }
+
+ table[is="tree-view-table"] tbody tr img {
+ transition:
+ color var(--transition-duration) var(--transition-timing),
+ fill var(--transition-duration) var(--transition-timing),
+ stroke var(--transition-duration) var(--transition-timing);
+ }
+}
+
+:is(ul, ol):is([role="tree"],
+[role="group"]) li > div {
+ min-height: var(--list-item-min-height);
+}
+
+.no-overscroll {
+ overscroll-behavior-y: none;
+}
+
+/* Drag and Drop */
+
+th.column-dragging {
+ opacity: 0.7;
+ z-index: 2;
+}
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;
+}
diff --git a/comm/mail/themes/shared/mail/unifiedToolbarCustomizableItems.css b/comm/mail/themes/shared/mail/unifiedToolbarCustomizableItems.css
new file mode 100644
index 0000000000..5cc472abeb
--- /dev/null
+++ b/comm/mail/themes/shared/mail/unifiedToolbarCustomizableItems.css
@@ -0,0 +1,197 @@
+/* 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/. */
+
+/* Icon definitions for customizable item previews.
+ * CustomizableItemsDetails.mjs contains the definitions for the root class
+ * names. */
+
+[is="customizable-element"] .preview-icon {
+ content: var(--icon-extension);
+}
+
+.spacer .preview-icon {
+ content: var(--icon-flexible-space);
+}
+
+.search-bar .preview-icon {
+ content: var(--icon-search);
+}
+
+.write-message .preview-icon {
+ content: var(--icon-new-mail);
+}
+
+.move-to .preview-icon {
+ content: var(--icon-file);
+}
+
+.unifinder .preview-icon {
+ content: var(--icon-search);
+}
+
+.folder-location .preview-icon {
+ content: var(--icon-folder);
+}
+
+.edit-event .preview-icon {
+ content: var(--icon-pencil);
+}
+
+.get-messages .preview-icon {
+ content: var(--icon-cloud-download);
+}
+
+.reply .preview-icon {
+ content: var(--icon-reply);
+}
+
+.reply-all .preview-icon {
+ content: var(--icon-reply-all);
+}
+
+.reply-to-list .preview-icon {
+ content: var(--icon-reply-list);
+}
+
+.redirect .preview-icon {
+ content: var(--icon-redirect);
+}
+
+.archive .preview-icon {
+ content: var(--icon-archive);
+}
+
+.conversation .preview-icon {
+ content: var(--icon-conversation);
+}
+
+.previous-unread .preview-icon {
+ content: var(--icon-nav-up-unread);
+}
+
+.previous .preview-icon {
+ content: var(--icon-nav-up);
+}
+
+.next-unread .preview-icon {
+ content: var(--icon-nav-down-unread);
+}
+
+.next .preview-icon {
+ content: var(--icon-nav-down);
+}
+
+.junk .preview-icon {
+ content: var(--icon-spam);
+}
+
+.delete .preview-icon {
+ content: var(--icon-trash);
+}
+
+.compact .preview-icon {
+ content: var(--icon-compress);
+}
+
+.add-as-event .preview-icon {
+ content: var(--icon-new-event);
+}
+
+.add-as-task .preview-icon {
+ content: var(--icon-new-task);
+}
+
+.tag-message .preview-icon {
+ content: var(--icon-tag);
+}
+
+.forward-inline .preview-icon {
+ content: var(--icon-forward);
+}
+
+.forward-attachment .preview-icon {
+ /* TODO separate icon for forwarding as attachment */
+ content: var(--icon-forward);
+}
+
+.mark-as .preview-icon {
+ content: var(--icon-unread);
+}
+
+.view-picker .preview-icon {
+ content: var(--icon-eye);
+}
+
+.address-book .preview-icon {
+ content: var(--icon-address-book);
+}
+
+.chat .preview-icon {
+ content: var(--icon-chat)
+}
+
+.add-ons-and-themes .preview-icon {
+ content: var(--icon-extension);
+}
+
+.calendar .preview-icon {
+ content: var(--icon-calendar);
+}
+
+.tasks .preview-icon {
+ content: var(--icon-tasks)
+}
+
+.mail .preview-icon {
+ content: var(--icon-mail);
+}
+
+.print .preview-icon {
+ content: var(--icon-print);
+}
+
+.quick-filter-bar .preview-icon {
+ content: var(--icon-filter);
+}
+
+.synchronize .preview-icon {
+ content: var(--icon-sync);
+}
+
+.new-event .preview-icon {
+ content: var(--icon-new-event);
+}
+
+.new-task .preview-icon {
+ content: var(--icon-new-task);
+}
+
+.delete-event .preview-icon {
+ content: var(--icon-trash);
+}
+
+.print-event .preview-icon {
+ content: var(--icon-print);
+}
+
+.go-to-today .preview-icon {
+ content: var(--icon-calendar-today);
+}
+
+.go-back .preview-icon {
+ content: var(--icon-nav-back);
+}
+
+.go-forward .preview-icon {
+ content: var(--icon-nav-forward);
+}
+
+.stop .preview-icon {
+ content: var(--icon-close);
+}
+
+.throbber .preview-icon {
+ content: var(--icon-loading);
+ object-fit: cover;
+}
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;
+}
diff --git a/comm/mail/themes/shared/mail/unifiedToolbarShared.css b/comm/mail/themes/shared/mail/unifiedToolbarShared.css
new file mode 100644
index 0000000000..7f304fa944
--- /dev/null
+++ b/comm/mail/themes/shared/mail/unifiedToolbarShared.css
@@ -0,0 +1,408 @@
+/* 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/content/unifiedtoolbar/unifiedToolbarWebextensions.css");
+
+/* Styles shared between the actual unfied toolbar and the replica in the
+ * customization overlay */
+
+:root {
+ --toolbar-button-badge-text-color: var(--color-white);
+ --toolbar-button-badge-bg-color: var(--color-red-70);
+ --toolbar-button-badge-padding: 1px 3px;
+ --toolbar-button-badge-font: 0.8rem;
+ --badge-inset-block-start: 1px;
+ --badge-inset-inline-nudge: 0px;
+ --badge-inset-inline-end: 2px;
+}
+
+/* UI Density customization */
+:root[uidensity="compact"] {
+ --badge-inset-block-start: 0px;
+ --badge-inset-inline-nudge: 4px;
+ --badge-inset-inline-end: 0px;
+}
+
+:root[uidensity="touch"] {
+ --badge-inset-block-start: 4px;
+ --badge-inset-inline-nudge: -3px;
+ --badge-inset-inline-end: 3px;
+}
+
+@media (-moz-windows-accent-color-in-titlebar) {
+ /* Apply everywhere */
+ :root {
+ --windows-accent-outline-color: var(--focus-outline-color);
+ }
+ /* Apply only in unified toolbar */
+ .search-bar {
+ --windows-accent-outline-color: accentColorText;
+ }
+}
+
+.unified-toolbar {
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ list-style-type: none;
+ overflow: hidden;
+ flex-wrap: nowrap;
+ min-width: 0;
+}
+
+.unified-toolbar li {
+ padding: 0;
+ margin: 0;
+ border-radius: 1px;
+}
+
+.unified-toolbar [is="customizable-element"] .preview {
+ display: none;
+}
+
+.unified-toolbar-button {
+ display: flex;
+ gap: 3px;
+ align-items: center;
+ flex-wrap: nowrap;
+ min-width: initial;
+ fill-opacity: var(--toolbarbutton-icon-fill-opacity);
+}
+
+.icons-above-text .unified-toolbar-button {
+ flex-direction: column;
+ justify-content: space-around;
+}
+
+.icons-only .unified-toolbar-button .button-label {
+ display: none;
+}
+
+.text-only .unified-toolbar-button .button-icon {
+ display: none;
+}
+
+.unified-toolbar-button[popup] {
+ padding-inline-end: 20px;
+ background-image: var(--icon-nav-down-sm);
+ background-position: calc(100% - 4px) center;
+ background-repeat: no-repeat;
+}
+
+.unified-toolbar-button[popup]:dir(rtl) {
+ background-position-x: 4px;
+}
+
+.unified-toolbar-button[badge] {
+ position: relative;
+}
+
+.unified-toolbar-button[badge]::after {
+ content: attr(badge);
+ background-color: var(--toolbar-button-badge-bg-color);
+ border-radius: 12px;
+ padding: var(--toolbar-button-badge-padding);
+ font-weight: 600;
+ font-size: var(--toolbar-button-badge-font);
+ color: var(--toolbar-button-badge-text-color);
+ line-height: 1em;
+ position: absolute;
+ inset-inline-end: var(--badge-inset-inline-end);
+ inset-block-start: var(--badge-inset-block-start);
+ max-width: 3ch;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ text-overflow: clip;
+}
+
+.unified-toolbar-button[popup][badge]::after {
+ inset-inline-end: 14px;
+}
+
+.unified-toolbar-button[badge]:-moz-window-inactive::after {
+ background-color: color-mix(in srgb, var(--toolbar-button-badge-bg-color) 50%, black);
+}
+
+/* If the text is shown after the icon, move the badge to be over the icon */
+.icons-beside-text .unified-toolbar-button[badge]::after {
+ inset-inline-end: unset;
+ inset-inline-start: calc(var(--icon-size) - var(--badge-inset-inline-nudge));
+ inset-block-start: var(--badge-inset-block-start);
+}
+
+/* With text only, just show the badge after the label */
+.text-only .unified-toolbar-button[badge]::after {
+ position: static;
+}
+
+/* If we are showing the text below the icon, move the badge in toward the
+ * center of the button. */
+.icons-above-text .unified-toolbar-button[badge]::after {
+ inset-inline-end: unset;
+ inset-inline-start: 51%;
+}
+
+.icons-above-text .unified-toolbar-button[popup][badge]::after {
+ inset-inline-start: unset;
+ inset-inline-end: 38%;
+}
+
+.unified-toolbar-button .button-label {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ flex-shrink: 1;
+ max-width: 50ch;
+ pointer-events: none;
+}
+
+global-search-bar:not([hidden]) {
+ display: block;
+ color: var(--layout-color-0);
+}
+
+global-search-bar:not([hidden]):-moz-lwtheme {
+ color: var(--toolbar-field-color);
+ text-shadow: none;
+}
+
+kbd {
+ background-color: var(--layout-background-3);
+ color: var(--layout-color-2);
+ text-transform: uppercase;
+ font-size: 0.8rem;
+ line-height: 1;
+ font-weight: bold;
+ box-shadow: inset 0px -1px 0px var(--layout-border-2);
+ border-radius: 3px;
+ display: inline-block;
+ padding: 2px 4px;
+}
+
+kbd:first-of-type {
+ margin-inline-start: 6px;
+}
+
+span[slot="placeholder"] {
+ display: flex;
+ align-items: center;
+ gap: 3px;
+}
+
+.unified-toolbar .spacer {
+ flex: 1 1 auto;
+}
+
+.unified-toolbar .search-bar {
+ flex: 1 1 33%;
+ min-width: 5em;
+}
+
+.unified-toolbar .button-icon {
+ content: var(--icon-extension);
+}
+
+.unified-toolbar .search-button-icon {
+ content: var(--icon-search);
+}
+
+.unified-toolbar .write-message .button-icon {
+ content: var(--icon-new-mail);
+}
+
+.unified-toolbar .move-to .button-icon {
+ content: var(--icon-file);
+}
+
+.unified-toolbar .unifinder .button-icon {
+ content: var(--icon-search);
+}
+
+.unified-toolbar .folder-location .button-icon {
+ content: var(--icon-folder);
+}
+
+.unified-toolbar .edit-event .button-icon {
+ content: var(--icon-pencil);
+}
+
+.unified-toolbar .get-messages .button-icon {
+ content: var(--icon-cloud-download);
+}
+
+.unified-toolbar .reply .button-icon {
+ content: var(--icon-reply);
+}
+
+.unified-toolbar .reply-all .button-icon {
+ content: var(--icon-reply-all);
+}
+
+.unified-toolbar .reply-to-list .button-icon {
+ content: var(--icon-reply-list);
+}
+
+.unified-toolbar .redirect .button-icon {
+ content: var(--icon-redirect);
+}
+
+.unified-toolbar .archive .button-icon {
+ content: var(--icon-archive);
+}
+
+.unified-toolbar .conversation .button-icon {
+ content: var(--icon-conversation);
+}
+
+.unified-toolbar .previous-unread .button-icon {
+ content: var(--icon-nav-up-unread);
+}
+
+.unified-toolbar .previous .button-icon {
+ content: var(--icon-nav-up);
+}
+
+.unified-toolbar .next-unread .button-icon {
+ content: var(--icon-nav-down-unread);
+}
+
+.unified-toolbar .next .button-icon {
+ content: var(--icon-nav-down);
+}
+
+.unified-toolbar .junk .button-icon {
+ content: var(--icon-spam);
+}
+
+.unified-toolbar .delete .button-icon {
+ content: var(--icon-trash);
+}
+
+.unified-toolbar .compact .button-icon {
+ content: var(--icon-compress);
+}
+
+.unified-toolbar .add-as-event .button-icon {
+ content: var(--icon-new-event);
+}
+
+.unified-toolbar .add-as-task .button-icon {
+ content: var(--icon-new-task);
+}
+
+.unified-toolbar .tag-message .button-icon {
+ content: var(--icon-tag);
+}
+
+.unified-toolbar .forward-inline .button-icon {
+ content: var(--icon-forward);
+}
+
+.unified-toolbar .forward-attachment .button-icon {
+ /* TODO separate icon for forwarding as attachment */
+ content: var(--icon-forward);
+}
+
+.unified-toolbar .mark-as .button-icon {
+ content: var(--icon-unread);
+}
+
+.unified-toolbar .view-picker .button-icon {
+ content: var(--icon-eye);
+}
+
+.unified-toolbar .address-book .button-icon {
+ content: var(--icon-address-book);
+}
+
+.unified-toolbar .chat .button-icon {
+ content: var(--icon-chat)
+}
+
+.unified-toolbar .add-ons-and-themes .button-icon {
+ content: var(--icon-extension);
+}
+
+.unified-toolbar .calendar .button-icon {
+ content: var(--icon-calendar);
+}
+
+.unified-toolbar .tasks .button-icon {
+ content: var(--icon-tasks)
+}
+
+.unified-toolbar .mail .button-icon {
+ content: var(--icon-mail);
+}
+
+.unified-toolbar .print .button-icon {
+ content: var(--icon-print);
+}
+
+.unified-toolbar .quick-filter-bar .button-icon {
+ content: var(--icon-filter);
+}
+
+.unified-toolbar .synchronize .button-icon {
+ content: var(--icon-sync);
+}
+
+.unified-toolbar .new-event .button-icon {
+ content: var(--icon-new-event);
+}
+
+.unified-toolbar .new-task .button-icon {
+ content: var(--icon-new-task);
+}
+
+.unified-toolbar .delete-event .button-icon {
+ content: var(--icon-trash);
+}
+
+.unified-toolbar .print-event .button-icon {
+ content: var(--icon-print);
+}
+
+.unified-toolbar .go-to-today .button-icon {
+ content: var(--icon-calendar-today);
+}
+
+.unified-toolbar .go-back .button-icon {
+ content: var(--icon-nav-back);
+}
+
+.unified-toolbar .go-forward .button-icon {
+ content: var(--icon-nav-forward);
+}
+
+.unified-toolbar .stop .button-icon {
+ content: var(--icon-close);
+}
+
+.unified-toolbar .throbber .throbber-icon {
+ stroke: var(--button-primary-background-color);
+ -moz-context-properties: stroke, fill;
+ width: 16px;
+ height: 16px;
+ visibility: hidden;
+ margin: var(--button-margin);
+ vertical-align: middle;
+ content: var(--icon-loading);
+ object-fit: cover;
+}
+
+.unified-toolbar .throbber.busy .throbber-icon {
+ visibility: visible;
+ object-position: 0px 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .unified-toolbar .throbber.busy .throbber-icon {
+ animation: activity-indicator-throbber 1.05s steps(30) infinite;
+ }
+
+ @keyframes activity-indicator-throbber {
+ 100% { object-position: -480px 0; }
+ }
+}
diff --git a/comm/mail/themes/shared/mail/unifiedToolbarTab.css b/comm/mail/themes/shared/mail/unifiedToolbarTab.css
new file mode 100644
index 0000000000..51004ed49e
--- /dev/null
+++ b/comm/mail/themes/shared/mail/unifiedToolbarTab.css
@@ -0,0 +1,62 @@
+/* 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/. */
+
+button {
+ padding-inline: 9px;
+ padding-block: 10px 6px;
+ box-sizing: border-box;
+ border-radius: 4px 4px 0 0;
+ cursor: default;
+ user-select: none;
+ appearance: none;
+ background: none;
+ border: 2px solid transparent;
+ border-bottom: none;
+ display: flex;
+ align-content: center;
+ gap: 6px;
+ width: 100%;
+ font-size: inherit;
+ position: relative;
+}
+
+button[aria-selected="true"] {
+ background-color: var(--layout-background-1);
+ box-shadow: 0 2px 8px -5px var(--color-black);
+}
+
+button::before {
+ content: '';
+ height: 2px;
+ margin-top: 3px;
+ margin-inline: 3px;
+ border-radius: 3px;
+ position: absolute;
+ inset-inline: 2px;
+ top: 0;
+}
+
+button[aria-selected="true"]::before {
+ background-color: var(--primary);
+}
+
+button:not([aria-selected="true"]):hover {
+ background-color: color-mix(in srgb, var(--layout-background-1) 50%, transparent);
+}
+
+button:not([aria-selected="true"]):hover::before {
+ background-color: color-mix(in srgb, var(--layout-color-1) 15%, transparent);
+}
+
+button:focus-visible {
+ outline: 2px solid transparent;
+ border-color: var(--primary);
+}
+
+span {
+ flex-shrink: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
diff --git a/comm/mail/themes/shared/mail/variables.css b/comm/mail/themes/shared/mail/variables.css
new file mode 100644
index 0000000000..f1443d1b3e
--- /dev/null
+++ b/comm/mail/themes/shared/mail/variables.css
@@ -0,0 +1,291 @@
+/* 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/layout.css");
+
+/* Default variables */
+
+:host,
+:root {
+ --transition-duration: 120ms;
+ --transition-timing: ease;
+ --arrowpanel-background: var(--layout-background-1);
+ --arrowpanel-color: var(--layout-color-1);
+ --arrowpanel-border-color: var(--layout-border-1);
+ --lwt-additional-images: none;
+ --lwt-background-alignment: right top;
+ --lwt-background-tiling: no-repeat;
+ --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
+ --toolbar-color: var(--toolbar-non-lwt-textcolor);
+ --panelui-subview-transition-duration: 150ms;
+ --autocomplete-popup-highlight-background: var(--selected-item-color);
+ --autocomplete-popup-highlight-color: var(--selected-item-text-color);
+ --button-background-color: var(--layout-background-3);
+ --button-hover-text-color: inherit;
+ --button-hover-background-color: var(--layout-background-2);
+ --button-active-background-color: var(--layout-background-4);
+ --button-border-color: var(--layout-border-1);
+ --button-border-radius: 3px;
+ --button-border-size: 1px;
+ --button-text-color: var(--layout-color-1);
+ --button-margin: 6px;
+ --button-padding: 6px;
+ --button-primary-background-color: var(--color-blue-60);
+ --button-primary-hover-background-color: color-mix(in srgb, var(--color-blue-50) 50%, var(--color-blue-60));
+ --button-primary-active-background-color: var(--color-blue-70);
+ --button-primary-text-color: var(--color-white);
+ --button-primary-border-color: var(--color-blue-80);
+ --button-destructive-background-color: var(--color-red-60);
+ --button-destructive-hover-background-color: color-mix(in srgb, var(--color-red-50) 50%, var(--color-red-60));
+ --button-destructive-active-background-color: var(--color-red-70);
+ --button-destructive-text-color: var(--color-white);
+ --button-destructive-border-color: var(--color-red-80);
+ --button-link-text-color: var(--color-blue-60);
+ --button-link-active-text-color: var(--color-blue-70);
+ --button-pressed-shadow: inset 0 1px 3px color-mix(in srgb, var(--color-gray-90) 30%, transparent);
+ --button-pressed-indicator-background-color: var(--color-blue-50);
+ --button-pressed-indicator-border-color: var(--color-blue-60);
+ --button-pressed-indicator-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ --button-pressed-indicator-padding: 6px;
+ --checkbox-border-color: var(--toolbar-field-border-color);
+ --checkbox-unchecked-bgcolor: var(--toolbar-field-background-color);
+ --checkbox-unchecked-hover-bgcolor: color-mix(in srgb, AccentColor 4%, var(--checkbox-unchecked-bgcolor));
+ --checkbox-unchecked-active-bgcolor: var(--button-active-background-color);
+ --checkbox-checked-border-color: transparent;
+ --checkbox-checked-color: var(--button-primary-color);
+ --checkbox-checked-bgcolor: var(--selected-item-color);
+ --checkbox-checked-hover-bgcolor: color-mix(in srgb, black 10%, var(--selected-item-color));
+ --checkbox-checked-active-bgcolor: color-mix(in srgb, black 20%, var(--selected-item-color));
+ --focus-outline-color: var(--toolbar-field-focus-border-color);
+ --focus-outline-offset: 2px;
+ --focus-outline: 2px solid var(--focus-outline-color);
+ --input-border-color: color-mix(in srgb, currentColor 41%, transparent);
+ --new-folder-color: var(--color-blue-60);
+ --lwt-header-image: none;
+ --search-field-placeholder: color-mix(in srgb, currentColor 50%, transparent);
+ --selected-item-color: var(--color-blue-60);
+ --selected-item-text-color: var(--color-white);
+ --splitter-color: var(--sidebar-border-color, var(--layout-border-0));
+ --sidebar-border-color: var(--layout-border-0);
+
+ --tab-min-height: 33px;
+ --lwt-tabs-border-color: var(--sidebar-border-color);
+ --tabs-tabbar-border-size: 1px;
+ --toolbar-button-hover-background-color: color-mix(in srgb, currentColor 10%, transparent);
+ --toolbar-button-hover-border-color: color-mix(in srgb, currentColor 30%, transparent);
+ --toolbar-button-hover-checked-color: color-mix(in srgb, currentColor 20%, transparent);
+ --toolbar-button-active-background-color: color-mix(in srgb, currentColor 20%, transparent);
+ --toolbar-button-active-border-color: color-mix(in srgb, currentColor 40%, transparent);
+ --toolbarbutton-icon-fill-opacity: .85;
+ --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background,
+ rgba(0, 0, 0, .05));
+ --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background,
+ rgba(0, 0, 0, .25));
+ --toolbarbutton-header-bordercolor: var(--lwt-toolbarbutton-hover-background,
+ rgba(0, 0, 0, .25));
+ --toolbarbutton-hover-boxshadow: none;
+ --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background,
+ rgba(0, 0, 0, .1));
+ --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background,
+ rgba(0, 0, 0, .3));
+ --toolbarbutton-default-active-boxshadow: rgba(0, 0, 0, .1) inset, 0 0 1px rgba(0, 0, 0, .3);
+ --toolbarbutton-active-boxshadow: 0 1px 1px var(--lwt-toolbarbutton-active-background,
+ var(--toolbarbutton-default-active-boxshadow)) inset;
+ --toolbarbutton-checked-background: var(--lwt-toolbarbutton-hover-background,
+ rgba(200, 200, 200, .5));
+ --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #0a84ff);
+ --toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent);
+ --toolbar-field-color: var(--layout-color-1);
+ --toolbar-field-background-color: var(--layout-background-1);
+ --toolbar-field-border-color: var(--layout-border-1);
+ --toolbar-field-focus-border-color: AccentColor;
+ --toolbar-field-highlight: var(--selected-item-color);
+ --toolbar-field-highlight-color: var(--selected-item-text-color);
+ --item-focus-selected-border-color: #0060df;
+ --default: #4f526d;
+ --primary: #0a84ff;
+ --select-focus-text-color: var(--selected-item-text-color);
+ --select-focus-background-color: var(--selected-item-color);
+ /* Wrapper for toolkit variables */
+ --button-primary-bgcolor: var(--button-primary-background-color);
+ --button-primary-hover-bgcolor: var(--button-primary-hover-background-color);
+ --button-primary-active-bgcolor: var(--button-primary-active-background-color);
+ --button-primary-color: var(--button-primary-text-color);
+}
+
+/* LW-themes enabled */
+
+:root:-moz-lwtheme {
+ color: var(--lwt-text-color);
+ --button-background: #d2d2d3;
+ --button-background-hover: #c2c2c3;
+ --button-background-active: #b2b2b3;
+ --panel-separator-color: hsla(210, 4%, 10%, 0.14);
+ --toolbar-color: var(--lwt-text-color, inherit);
+ --toolbar-bgcolor: rgba(255, 255, 255, .4);
+ --toolbar-field-border-color: hsla(240, 5%, 5%, 0.25);
+ --toolbarbutton-icon-fill-opacity: 1;
+ --autocomplete-popup-url-color: hsl(210, 77%, 47%);
+}
+
+:root[lwt-tree] {
+ --select-focus-background-color: var(--sidebar-highlight-background-color, var(--selected-item-color));
+ --select-focus-text-color: var(--sidebar-highlight-text-color,
+ var(--sidebar-text-color));
+ --new-focused-folder-color: var(--sidebar-highlight-text-color, var(--sidebar-text-color));
+ --row-grouped-header-bg-color: hsla(0, 0%, 50%, 0.15);
+ --row-grouped-header-bg-color-selected: var(--sidebar-highlight-background-color,
+ hsla(0, 0%, 80%, 0.6));
+}
+
+/* Dark themes enabled */
+
+:root[lwt-tree-brighttext] {
+ --default: #dcdcdc;
+ --primary: #45b1ff;
+ --item-focus-selected-border-color: #bebebf;
+ --row-grouped-header-bg-color-selected: var(--sidebar-highlight-background-color,
+ rgba(249, 249, 250, 0.3));
+ --button-sidebar-bottom-hover-color: var(--color-blue-40);
+}
+
+:root[lwt-popup-brighttext] {
+ --autocomplete-popup-url-color: #0a84ff;
+ --panel-separator-color: rgba(249, 249, 250, 0.1);
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --button-background-color: var(--layout-background-3);
+ --button-hover-background-color: var(--layout-background-4);
+ --button-border-color: var(--layout-border-2);
+ --button-active-background-color: var(--layout-background-2);
+ --button-primary-border-color: var(--color-blue-50);
+ --button-destructive-border-color: var(--color-red-50);
+ --button-link-text-color: var(--color-blue-40);
+ --button-link-active-text-color: var(--color-blue-50);
+ --button-pressed-shadow: inset 0 1px 3px color-mix(in srgb, var(--color-black) 50%, transparent);
+ --button-pressed-indicator-background-color: var(--color-blue-30);
+ --button-pressed-indicator-border-color: var(--color-blue-40);
+ --button-pressed-indicator-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+ --lwt-accent-color: rgb(24, 24, 26);
+ --new-folder-color: var(--color-blue-40);
+ --autocomplete-popup-highlight-background: #0060df;
+ --selected-item-color: var(--color-blue-50);
+ --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background,
+ rgba(255, 255, 255, .25));
+ --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background,
+ rgba(255, 255, 255, .5));
+ --toolbarbutton-header-bordercolor: var(--lwt-toolbarbutton-hover-background,
+ rgba(255, 255, 255, .25));
+ --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background,
+ rgba(255, 255, 255, .4));
+ --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background,
+ rgba(255, 255, 255, .7));
+ --toolbarbutton-active-boxshadow: none;
+ --toolbarbutton-checked-background: rgba(0, 0, 0, .25);
+ --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #45a1ff);
+ }
+
+ :root:not([lwt-tree]):-moz-lwtheme {
+ --button-background-color: var(--layout-background-3);
+ --button-hover-background-color: var(--layout-background-4);
+ --button-active-background-color: var(--layout-background-2);
+ --button-link-text-color: var(--color-blue-40);
+ --button-link-active-text-color: var(--color-blue-50);
+ --arrowpanel-border-color: #52525e;
+ --chrome-content-separator-color: #52525e;
+ --item-focus-selected-border-color: #bebebf;
+ --default: #dcdcdc;
+ --primary: var(--color-blue-40);
+ }
+
+ /* Overwrite the toolkit default theme. */
+ :root[lwt-default-theme-in-dark-mode] {
+ --lwt-selected-tab-background-color: var(--color-gray-70) !important;
+ --lwt-tab-line-color: var(--color-blue-50) !important;
+ --sidebar-background-color: var(--layout-background-1) !important;
+ --sidebar-highlight-background-color: var(--color-blue-50);
+ --sidebar-border-color: var(--layout-border-0) !important;
+ --toolbar-field-border-color: var(--color-gray-50) !important;
+ --button-link-text-color: var(--color-blue-40);
+ --button-link-active-text-color: var(--color-blue-50);
+ }
+}
+
+/* Special High contrast setting */
+
+@media (prefers-contrast) {
+ :root:not(:-moz-lwtheme) {
+ --button-color: ButtonText;
+ --button-background-color: ButtonFace;
+ --button-border-color: ButtonText;
+ --button-hover-text-color: SelectedItemText;
+ --button-hover-background-color: SelectedItem;
+ --button-active-background-color: SelectedItem;
+ --button-primary-background-color: SelectedItem;
+ --button-primary-hover-background-color: SelectedItem;
+ --button-primary-active-background-color: SelectedItem;
+ --button-primary-text-color: SelectedItemText;
+ --button-primary-border-color: SelectedItem;
+ --button-primary-hover-border-color: -moz-DialogText;
+ --button-link-text-color: LinkText;
+ --button-link-active-text-color: ActiveText;
+ --button-pressed-shadow: none;
+ --button-pressed-indicator-background-color: SelectedItem;
+ --button-pressed-indicator-border-color: SelectedItem;
+ --search-field-placeholder: GrayText;
+ --selected-item-color: SelectedItem;
+ --selected-item-text-color: SelectedItemText;
+ --toolbar-button-hover-background-color: SelectedItem;
+ --toolbar-button-hover-border-color: SelectedItem;
+ --toolbar-button-hover-checked-color: SelectedItem;
+ --toolbar-button-active-background-color: SelectedItem;
+ --toolbar-button-active-border-color: SelectedItemText;
+ --toolbar-field-background-color: Field;
+ --toolbar-field-color: FieldText;
+ --toolbar-field-border-color: ThreeDShadow;
+ }
+}
+
+@media not (prefers-contrast) {
+ :root:not(:-moz-lwtheme) {
+ --buttons-secondary-bgcolor: rgb(240, 240, 244);
+ --buttons-secondary-hover-bgcolor: rgb(224, 224, 230);
+ --buttons-secondary-active-bgcolor: rgb(207, 207, 216);
+ --buttons-secondary-color: rgb(21, 20, 26);
+ --arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent);
+ --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent);
+ --arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent);
+ --error-text-color: #c50042;
+ }
+}
+
+/* DPI variations */
+
+@media (min-resolution: 1.5dppx) {
+ :root {
+ --tabs-tabbar-border-size: 0.5px;
+ }
+}
+
+@media (min-resolution: 3dppx) {
+ :root {
+ --tabs-tabbar-border-size: 0.33px;
+ }
+}
+
+/* UI Density customization */
+
+:root[uidensity="compact"] {
+ --tab-min-height: 30px;
+ --button-margin: 3px;
+ --button-padding: 3px;
+ --button-pressed-indicator-padding: 9px;
+}
+
+:root[uidensity="touch"] {
+ --tab-min-height: 39px;
+ --button-pressed-indicator-padding: 3px;
+}
diff --git a/comm/mail/themes/shared/mail/vcard.css b/comm/mail/themes/shared/mail/vcard.css
new file mode 100644
index 0000000000..5ce01ac8a0
--- /dev/null
+++ b/comm/mail/themes/shared/mail/vcard.css
@@ -0,0 +1,476 @@
+/* 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/. */
+
+:root {
+ --vcard-delete-button-color: var(--color-red-60);
+ --vcard-remove-color: var(--color-red-60);
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --vcard-delete-button-color: var(--color-red-40);
+ --vcard-remove-color: var(--color-red-40);
+ }
+}
+
+vcard-edit {
+ color: var(--sidebar-text-color);
+ --input-border-density: 1px;
+}
+
+vcard-edit,
+.addr-book-edit-display-nickname {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(30em, 1fr));
+ column-gap: 2em;
+}
+
+vcard-edit {
+ grid-template-rows: masonry;
+ row-gap: 30px;
+}
+
+vcard-edit label[for] {
+ margin-block-end: 6px;
+ font-weight: 600;
+}
+
+vcard-edit input[type="text"],
+vcard-edit input[type="email"],
+vcard-edit input[type="url"],
+vcard-edit input[type="tel"],
+vcard-edit input[type="number"],
+vcard-edit input[type="date"],
+vcard-edit .vcard-type-selection,
+vcard-tz select:not([size], [multiple]),
+vcard-special-date select:not([size], [multiple]) {
+ line-height: 1;
+ padding-inline: 6px;
+ margin: 0;
+ border: var(--input-border-density) solid var(--toolbar-field-border-color);
+ min-height: initial;
+ height: var(--in-content-button-height);
+ color: inherit;
+ margin-block-end: 3px;
+ margin-inline-end: 3px;
+ font-weight: normal;
+}
+
+vcard-edit input[type="text"],
+vcard-edit input[type="email"],
+vcard-edit input[type="url"],
+vcard-edit input[type="tel"],
+vcard-edit input[type="date"] {
+ /* it should be 2em but input doesn't include the border */
+ height: calc(var(--in-content-button-height) - 2px);
+}
+
+vcard-edit vcard-impp input[type="text"] {
+ flex: 1;
+}
+
+vcard-edit input[type="email"] {
+ width: -moz-available;
+}
+
+vcard-edit input[type="url"],
+vcard-edit input[type="tel"] {
+ flex: 1;
+}
+
+vcard-edit input[type="number"] {
+ padding-inline-end: 0;
+}
+
+vcard-edit select:not([size]) {
+ border-color: var(--in-content-button-border-color);
+ -moz-context-properties: stroke;
+ stroke: currentColor;
+ background-position-x: right 6px;
+ padding-inline-end: 15px;
+}
+
+vcard-edit select:not([size]):dir(rtl) {
+ background-position-x: left 6px;
+}
+
+vcard-edit select:not([size], [multiple]) {
+ padding-inline: 6px 22px;
+ padding-block: 0;
+ margin-block-end: 0;
+}
+
+vcard-edit select:user-invalid {
+ outline: 2px solid var(--in-content-border-invalid);
+ outline-offset: -1px;
+}
+
+vcard-edit textarea {
+ /* 3px is for the margin-end. */
+ width: calc(100% - 3px);
+ box-sizing: border-box;
+ border: var(--input-border-density) solid var(--toolbar-field-border-color);
+ margin-block: 0 3px;
+ margin-inline: 0 3px;
+ resize: vertical;
+}
+
+#addr-book-edit-n {
+ grid-column: 1 / -1;
+}
+
+/* N field styles */
+vcard-n {
+ display: flex;
+ align-items: end;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+ gap: 6px;
+ --button-dimension: 24px;
+}
+
+.n-list-component {
+ display: inline-flex;
+ flex-direction: column;
+}
+
+.n-list-component button {
+ min-width: auto;
+ min-height: auto;
+ display: inline-flex;
+ margin: 0;
+ padding: 3px;
+ border: none;
+ z-index: 2;
+ margin-block-end: 9px;
+ border-radius: 8px;
+}
+
+.n-list-component button img {
+ -moz-context-properties: fill;
+ fill: currentColor;
+ width: 9px;
+ height: 9px;
+}
+
+.n-list-component button[hidden] {
+ display: none;
+}
+
+#n-list-component-prefix input,
+#n-list-component-suffix input {
+ width: 10ch;
+ box-sizing: border-box;
+}
+
+#n-list-component-prefix,
+#n-list-component-suffix {
+ flex: 0 0 0%;
+}
+
+#n-list-component-firstname,
+#n-list-component-middlename,
+#n-list-component-lastname {
+ flex: 1 0 0%;
+}
+
+#n-list-component-firstname input,
+#n-list-component-middlename input,
+#n-list-component-lastname input {
+ min-width: 20ch;
+ box-sizing: border-box;
+ width: 100%;
+}
+
+#n-list-component-middlename.hasButton {
+ flex: 0 0 auto;
+}
+
+/* Display name / Full name / Nick name styles */
+vcard-fn,
+vcard-nickname {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ margin-block-start: 12px;
+}
+
+vcard-fn label[for],
+vcard-nickname label[for] {
+ margin-block-end: 0;
+}
+
+.vcard-checkbox {
+ display: flex;
+ align-items: center;
+}
+
+/* Email fieldset styles */
+#addr-book-edit-email table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+/**
+ * Shows the "Default" table header for emails.
+ */
+.default-table-header {
+ position: relative;
+}
+
+.default-table-header legend {
+ /* The legend is positioned absolute over the table headers. */
+ position: absolute;
+}
+
+/* Email field styles */
+#addr-book-edit-email :is(th, td) {
+ padding: 0;
+}
+
+#addr-book-edit-email td.email-column {
+ width: 100%;
+}
+
+.default-column {
+ text-align: center;
+}
+
+#vcard-email input[type="checkbox"]:not([hidden]) {
+ border-radius: 50%;
+ width: 16px;
+ height: 16px;
+ margin-inline: 0;
+ margin-block: 0 3px;
+ display: inline-grid;
+}
+
+#vcard-email input[type="checkbox"]:checked {
+ background-image: none;
+ background-color: transparent;
+ border-color: var(--in-content-primary-button-background);
+ position: relative;
+}
+
+#vcard-email input[type="checkbox"]:enabled:checked:hover {
+ background-color: transparent;
+ border-color: var(--in-content-primary-button-background-hover);
+}
+
+#vcard-email input[type="checkbox"]:checked:active {
+ border-color: var(--in-content-primary-button-background-active);
+}
+
+#vcard-email input[type="checkbox"]:checked::before {
+ content: "";
+ display: block;
+ height: 8px;
+ width: 8px;
+ background-color: var(--in-content-primary-button-background);
+ border-radius: 50%;
+ position: absolute;
+ inset: 3px;
+}
+
+#vcard-email input[type="checkbox"]:enabled:checked:hover::before {
+ background-color: var(--in-content-primary-button-background-hover);
+}
+
+#vcard-email input[type="checkbox"]:checked:active::before {
+ background-color: var(--in-content-primary-button-background-active);
+}
+
+#addr-book-edit-address {
+ display: flex;
+ flex-direction: column;
+}
+
+.screen-reader-only {
+ position: absolute;
+ clip-path: inset(50%);
+}
+
+vcard-url,
+vcard-tel,
+vcard-impp,
+vcard-special-date {
+ display: flex;
+}
+
+vcard-special-date {
+ margin-block-end: 6px;
+}
+
+.fieldset-reset {
+ margin: 0;
+ padding: 0;
+ border-style: none;
+}
+
+.fieldset-grid {
+ display: grid;
+ grid-template-columns: min-content auto;
+}
+
+.addr-book-edit-fieldset legend,
+#addr-book-edit-email-default {
+ margin-block: 0 6px;
+ font-size: 1.1rem;
+ line-height: 1.2;
+ background-color: transparent;
+ font-weight: 600;
+ margin-inline-start: 0;
+ padding-inline: 0;
+}
+
+/* Imitates the legend element. */
+.default-table-header #addr-book-edit-email-default {
+ font-weight: 400;
+ /* This is a th so instead of a margin a padding is used. */
+ padding-block: 0 6px;
+}
+
+.default-table-header #addr-book-edit-email-default span {
+ /* The box height of the th has to fully imitate the legend element. */
+ /* That's why the font size get adjusted directly on the span. */
+ font-size: 1rem;
+}
+
+.vcard-year-month-day-container {
+ display: flex;
+ align-items: center;
+}
+
+.vcard-year-month-day-container select:not([size], [multiple]),
+.vcard-year-month-day-container input[type="number"] {
+ margin-block-end: 0;
+ margin-inline: 0;
+ background-color: var(--in-content-box-background);
+ border-color: var(--toolbar-field-border-color);
+}
+
+.vcard-year-month-day-container select.vcard-month-select {
+ border-radius: 0;
+ border-inline-end-width: 0;
+}
+
+.vcard-year-month-day-container select.vcard-day-select {
+ border-start-start-radius: 0;
+ border-end-start-radius: 0;
+}
+
+.vcard-year-month-day-container input[type="number"] {
+ box-sizing: border-box;
+ border-start-end-radius: 0;
+ border-end-end-radius: 0;
+ border-inline-end-width: 0;
+}
+
+.vcard-year-month-day-container input[type="number"]::-moz-number-spin-box {
+ padding-inline-end: 2px;
+}
+
+vcard-adr select {
+ grid-column: 1 / 2;
+}
+
+.vcard-adr-inputs:not([hidden]) {
+ display: flex;
+ flex-direction: column;
+ grid-column: 2 / 3;
+}
+
+.addr-book-edit-fieldset-button {
+ background-color: transparent;
+ padding: 3px;
+ border: none;
+ font-size: 1rem;
+ font-weight: 500;
+ border-radius: 3px;
+ min-height: auto;
+ width: fit-content;
+}
+
+.addr-book-edit-fieldset-button:enabled:hover,
+.addr-book-edit-fieldset-button:enabled:active,
+.addr-book-edit-fieldset-button:enabled:active:hover {
+ background-color: var(--in-content-button-background);
+}
+
+.add-property-button:enabled:hover,
+.add-property-button:enabled:active,
+.add-property-button:enabled:active:hover {
+ color: var(--in-content-primary-button-background);
+}
+
+.add-property-button::before {
+ position: relative;
+ display: block;
+ content: "";
+ border-radius: 8px;
+ background-color: var(--in-content-primary-button-background);
+ width: 13px;
+ height: 13px;
+ background-image: url("chrome://global/skin/icons/add.svg");
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 9px;
+ fill: unset;
+ stroke: unset;
+ fill-opacity: unset;
+}
+
+.add-property-button {
+ -moz-context-properties: fill;
+ color: var(--in-content-primary-button-background);
+ fill: var(--in-content-primary-button-text-color);
+}
+
+.remove-property-button {
+ color: var(--vcard-remove-color);
+ margin-block-end: 3px;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ align-self: center;
+}
+
+.remove-property-button::before {
+ width: 12px;
+ height: 12px;
+ background-image: var(--icon-subtract-circle-sm);
+ background-repeat: no-repeat;
+ background-position: center;
+}
+
+.remove-property-button:enabled:hover,
+.remove-property-button:enabled:active,
+.remove-property-button:enabled:active:hover {
+ color: var(--color-white);
+ background-color: var(--vcard-delete-button-color);
+}
+
+/* Remove button special cases. */
+#vcard-email .remove-property-button {
+ padding: 2px;
+}
+
+vcard-special-date .remove-property-button {
+ margin-inline-start: 3px;
+ margin-block-end: 0;
+}
+
+.add-property-button + .remove-property-button {
+ margin-inline-start: 0;
+}
+
+vcard-tz {
+ display: inline-flex;
+ flex-direction: column;
+}
+
+vcard-tz .remove-property-button {
+ margin-block-start: 3px;
+ align-self: auto;
+}
diff --git a/comm/mail/themes/shared/mail/verifychat.css b/comm/mail/themes/shared/mail/verifychat.css
new file mode 100644
index 0000000000..1354ab2ea6
--- /dev/null
+++ b/comm/mail/themes/shared/mail/verifychat.css
@@ -0,0 +1,17 @@
+/* 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/. */
+
+p {
+ margin-block-start: 0;
+}
+
+#challengePresentation {
+ text-align: center;
+ font-weight: bold;
+}
+
+#challengePresentation span:not([hidden]) {
+ /* Make each span start on a newline. */
+ display: block;
+}
diff --git a/comm/mail/themes/shared/mail/widgets.css b/comm/mail/themes/shared/mail/widgets.css
new file mode 100644
index 0000000000..e2e20bec85
--- /dev/null
+++ b/comm/mail/themes/shared/mail/widgets.css
@@ -0,0 +1,370 @@
+/* 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 file defines the various widgets used across the application. */
+
+/* Default Button Styles */
+
+.button {
+ --icon-size: 16px;
+ appearance: none;
+ background-color: var(--button-background-color);
+ color: var(--button-text-color);
+ border: var(--button-border-size) solid var(--button-border-color);
+ border-radius: var(--button-border-radius);
+ padding: var( --button-padding);
+ margin: var(--button-margin);
+ min-width: 6em;
+ -moz-context-properties: fill, stroke;
+ fill: color-mix(in srgb, currentColor 20%, transparent);
+ stroke: currentColor;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: inherit;
+}
+
+.button:enabled:hover,
+.select:enabled:hover {
+ color: var(--button-hover-text-color);
+ background-color: var(--button-hover-background-color);
+ border-color: var(--button-border-color);
+}
+
+.button:focus-visible,
+.select:focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-offset);
+}
+
+.button[aria-pressed="true"] {
+ box-shadow: var(--button-pressed-shadow);
+}
+
+.button:enabled:hover:active,
+.select:enabled:hover:active {
+ background-color: var(--button-active-background-color);
+ border-color: var(--button-border-color);
+}
+
+.button:disabled,
+.select:disabled {
+ opacity: 0.4;
+ pointer-events: none;
+}
+
+.button[hidden],
+.select[hidden] {
+ display: none;
+}
+
+.button:dir(rtl),
+.button:-moz-locale-dir(rtl) {
+ background-position-x: right var(--button-padding);
+}
+
+.button > img {
+ pointer-events: none;
+}
+
+.button.icon-button {
+ background-image: none;
+ background-size: var(--icon-size);
+ background-position: var(--button-padding) center;
+ background-repeat: no-repeat;
+ padding-inline-start: calc(var(--button-padding) * 2 + var(--icon-size));
+ padding-inline-end: calc(var(--button-padding) * 2);
+ min-width: 0;
+}
+
+.button.icon-only {
+ background-position: center;
+ /* 2px at the end for the border. */
+ height: calc(var(--button-padding) * 2 + var(--icon-size) + 2px);
+ padding: 0;
+ aspect-ratio: 1;
+}
+
+.button.toolbar-button,
+.button.unified-toolbar-button {
+ background-color: transparent;
+ color: currentColor;
+ border-color: transparent;
+ margin-block: 4px;
+}
+
+.button.toolbar-button[open="true"],
+.button.toolbar-button:not([disabled="true"]):hover,
+.button.unified-toolbar-button:enabled:is([aria-pressed="true"], :hover) {
+ color: var(--button-hover-text-color);
+ background-color: var(--toolbar-button-hover-background-color);
+ border-color: var(--toolbar-button-hover-border-color);
+}
+
+.button.toolbar-button[open="true"] {
+ color: var(--button-hover-text-color);
+}
+
+.button.unified-toolbar-button[aria-pressed="true"]:enabled {
+ color: var(--button-hover-text-color);
+ box-shadow: var(--button-pressed-shadow);
+}
+
+.button.unified-toolbar-button[aria-pressed="true"]:enabled:hover {
+ background-color: var(--toolbar-button-hover-checked-color);
+}
+
+.button.toolbar-button:not([disabled="true"]):hover:active,
+.button.unified-toolbar-button:enabled:hover:active {
+ background-color: var(--toolbar-button-active-background-color);
+ border-color: var(--toolbar-button-active-border-color);
+}
+
+@media (-moz-windows-accent-color-in-titlebar) {
+ #navigation-toolbox :is(.unified-toolbar-button, .toolbar-button):not(:-moz-lwtheme):focus-visible {
+ outline-color: accentColorText;
+ }
+}
+
+/* Primary Button Styles */
+
+.button.button-primary {
+ background-color: var(--button-primary-background-color);
+ color: var(--button-primary-text-color);
+ border-color: var(--button-primary-border-color);
+}
+
+.button.button-primary:hover {
+ background-color: var(--button-primary-hover-background-color);
+ color: var(--button-primary-text-color);
+ border-color: var(--button-primary-border-color);
+}
+
+@media (prefers-contrast) {
+ .button.button-primary:not(:-moz-lwtheme):hover {
+ border-color: var(--button-primary-hover-border-color);
+ }
+}
+
+.button.button-primary:hover:active {
+ background-color: var(--button-primary-active-background-color);
+ border-color: var(--button-primary-border-color);
+}
+
+/* Destructive Button Styles */
+
+.button.button-destructive {
+ background-color: var(--button-destructive-background-color);
+ color: var(--button-destructive-text-color);
+ border-color: var(--button-destructive-border-color);
+}
+
+.button.button-destructive:hover {
+ background-color: var(--button-destructive-hover-background-color);
+ border-color: var(--button-destructive-border-color);
+}
+
+.button.button-destructive:hover:active {
+ background-color: var(--button-destructive-active-background-color);
+ border-color: var(--button-destructive-border-color);
+}
+
+/* Flat Button Styles */
+
+.button.button-flat {
+ background-color: transparent;
+ color: currentColor;
+ border-color: transparent;
+}
+
+.button.button-flat:hover {
+ background-color: color-mix(in srgb, currentColor 10%, transparent);
+ border-color: transparent;
+}
+
+.button.button-flat:focus-visible {
+ color: currentColor;
+}
+
+.button.button-flat:hover:active {
+ background-color: color-mix(in srgb, currentColor 30%, transparent);
+ border-color: transparent;
+}
+
+@media (prefers-contrast) {
+ .button.button-flat:hover,
+ .button.button-flat:hover:active {
+ background-color: SelectedItem;
+ }
+}
+
+/* Link Button Styles */
+
+.button.link-button {
+ background-color: transparent;
+ color: var(--button-link-text-color);
+ border-color: transparent;
+}
+
+.button.link-button:hover {
+ background-color: transparent;
+ color: var(--button-link-text-color);
+ border-color: transparent;
+ text-decoration: underline;
+}
+
+.button.link-button:hover:active {
+ background-color: transparent;
+ color: var(--button-link-active-text-color);
+ border-color: transparent;
+}
+
+/* Check Button Styles */
+
+.button.check-button {
+ position: relative;
+}
+
+.button.check-button:not(.icon-button) {
+ padding-inline-start: calc(var(--button-padding) * 2 + 9px);
+ padding-inline-end: calc(var(--button-padding) * 2);
+}
+
+.button.check-button.icon-button {
+ background-position: calc(var(--button-padding) * 1.2 + var(--button-pressed-indicator-padding)) center;
+ padding-inline-start: calc(var(--button-padding) * 2 + var(--icon-size) + var(--button-pressed-indicator-padding));
+}
+
+.button.check-button.icon-button:dir(rtl),
+.button.check-button.icon-button:-moz-locale-dir(rtl) {
+ background-position-x: right calc(var(--button-padding) * 1.2 + var(--button-pressed-indicator-padding));
+}
+
+.button.check-button.icon-only {
+ background-position: calc(var(--button-padding) + var(--button-pressed-indicator-padding)) center;
+ aspect-ratio: auto;
+}
+
+.button.check-button.icon-only:dir(rtl),
+.button.check-button.icon-only:-moz-locale-dir(rtl) {
+ background-position-x: right calc(var(--button-padding) + var(--button-pressed-indicator-padding));
+}
+
+.button.check-button::before {
+ content: '';
+ box-sizing: border-box;
+ background-color: color-mix(in srgb, currentColor 10%, transparent);
+ border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+ border-radius: 4px;
+ width: 4px;
+ height: 12px;
+ margin: auto 3px;
+ position: absolute;
+ inset-block: 0;
+ inset-inline-start: 2px;
+}
+
+.button.check-button[aria-pressed="true"]::before {
+ background-color: var(--button-pressed-indicator-background-color);
+ border-color: var(--button-pressed-indicator-border-color);
+ box-shadow: var(--button-pressed-indicator-shadow);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .button {
+ transition: background-color .15s, border-color .15s;
+ }
+}
+
+/* Button Group Styles */
+
+.button-group {
+ display: inline-flex;
+ color: var(--button-text-color);
+ border: var(--button-border-size) solid var(--button-border-color);
+ border-radius: var(--button-border-radius);
+ margin: var(--button-margin);
+ position: relative;
+ isolation: isolate;
+ z-index: 1;
+}
+
+.button-group .button + .button:not(:last-child) {
+ border-inline-end: var(--button-border-size) solid var(--button-border-color);
+}
+
+.button-group :is(.button, input) {
+ --button-margin: 0;
+ border: none;
+ border-radius: 0;
+ z-index: 2;
+}
+
+.button-group .button:focus-visible {
+ outline-offset: 0;
+ z-index: 3;
+}
+
+.button-group .button:first-child {
+ border-inline-end: var(--button-border-size) solid var(--button-border-color);
+ border-start-start-radius: calc(var(--button-border-radius) - 1px);
+ border-end-start-radius: calc(var(--button-border-radius) - 1px);
+}
+
+.button-group .button:last-child {
+ border-start-end-radius: calc(var(--button-border-radius) - 1px);
+ border-end-end-radius: calc(var(--button-border-radius) - 1px);
+}
+
+@container threadPane (max-width: 999px) {
+ .button.collapsible-button {
+ padding-inline-end: 0;
+ }
+
+ .button.collapsible-button span {
+ display: inline-block;
+ visibility: hidden;
+ width: 0;
+ }
+}
+
+/* Select element */
+
+.select {
+ appearance: none;
+ text-decoration: none;
+ background-color: var(--button-background-color);
+ color: var(--button-text-color);
+ border: var(--button-border-size) solid var(--button-border-color);
+ border-radius: var(--button-border-radius);
+ padding: var(--button-padding);
+ margin: var(--button-margin);
+ font-size: 1em;
+}
+
+.select:not([size], [multiple]) {
+ --logical-padding: 3px;
+ --start-padding: calc(var(--logical-padding) + 3px);
+ --end-padding: calc(var(--logical-padding) + 9px);
+ --background-image-width: 12px;
+ background-image: var(--icon-nav-down-sm);
+ background-position: right calc(var(--end-padding) / 2) center;
+ background-repeat: no-repeat;
+ background-size: auto var(--background-image-width);
+ -moz-context-properties: fill;
+ fill: currentColor;
+ font: inherit;
+ padding-inline-start: var(--start-padding);
+ padding-inline-end: calc(var(--background-image-width) + var(--end-padding));
+ text-overflow: ellipsis;
+}
+
+.select:not([size], [multiple]):dir(rtl) {
+ background-position-x: left calc(var(--end-padding) / 2);
+}
+
+.select:not([size], [multiple]) > option {
+ background-color: var(--in-content-box-background);
+ color: var(--in-content-text-color);
+}
diff --git a/comm/mail/themes/shared/mail/wizard.css b/comm/mail/themes/shared/mail/wizard.css
new file mode 100644
index 0000000000..93372c79f4
--- /dev/null
+++ b/comm/mail/themes/shared/mail/wizard.css
@@ -0,0 +1,52 @@
+/* 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/variables.css");
+@import url("chrome://messenger/skin/themeableDialog.css");
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:host {
+ padding: 14px 24px;
+}
+
+.wizard-header-box-text {
+ padding: 6px 0;
+ font: menu;
+ font-weight: bold;
+}
+
+.wizard-header-label {
+ font-size: 1.2em;
+ font-weight: bold;
+}
+
+.wizard-header-box-icon {
+ margin-block: 3px 0;
+ margin-inline: 3px 20px;
+}
+
+:host([data-branded="true"]) .wizard-header-icon {
+ list-style-image: url("chrome://branding/content/icon128.png");
+ width: 48px;
+ height: 48px;
+}
+
+html|*.wizard-page-box {
+ padding: 10px 0;
+}
+
+.wizard-buttons-btm {
+ padding: 3px 6px 6px;
+}
+
+.wizard-button[dlgtype="finish"],
+.wizard-button[dlgtype="next"] {
+ margin-inline-start: 0 !important;
+}
+
+.wizard-button[dlgtype="back"] {
+ margin-inline-end: 0 !important;
+}