diff options
Diffstat (limited to 'comm/mail/themes/shared/mail/accountManager.css')
-rw-r--r-- | comm/mail/themes/shared/mail/accountManager.css | 305 |
1 files changed, 305 insertions, 0 deletions
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; + } +} |