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