diff options
Diffstat (limited to 'comm/mail/themes/shared/mail/preferences')
9 files changed, 1652 insertions, 0 deletions
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; +} |
