Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
/* ===== accountManage.css ==============================================
== Styles for the Mail Account Manager.
======================================================================= */
@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;
&: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: 3px 0;
& > menuitem {
appearance: none;
color: var(--in-content-text-color);
padding-block: 0.2em;
padding-inline: 10px 30px;
&[_moz-menuactive="true"] {
color: var(--in-content-item-hover-text);
background-color: var(--in-content-item-hover);
}
&[selected="true"] {
color: var(--in-content-item-selected-text);
background-color: var(--in-content-item-selected);
}
}
& > menuseparator {
padding-inline: 8px;
}
}
#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-inline {
flex: 1;
}
}
menulist.input-inline {
margin: 2px 4px;
}
menupopup[is="folder-menupopup"] {
appearance: none;
}
menulist > menupopup {
& :is(menu, menuitem) {
padding-inline-end: 5px;
}
/* Needed for additional menupopup levels */
& menupopup {
font: inherit;
& > :is(menu, menuitem) {
border: 1px solid transparent;
&:not([disabled="true"])[_moz-menuactive="true"] {
color: var(--in-content-text-color);
background-color: var(--in-content-item-hover);
}
&[disabled="true"] {
color: #999;
/* override the [_moz-menuactive="true"] background color from
global/menu.css */
background-color: transparent;
}
}
& menuseparator {
appearance: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--in-content-box-border-color);
border-bottom: none;
}
}
& .menu-right {
appearance: none;
margin-inline-end: 5px;
-moz-context-properties: fill;
fill: currentColor;
&:-moz-locale-dir(ltr) {
transform: scaleX(-1);
}
}
}
.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;
}
& checkbox {
-moz-user-focus: none;
}
}
#identitiesList richlistitem {
align-items: center;
padding-inline-start: 10px;
height: 34px;
}
#identityDialog.doScroll {
margin-inline: 0;
&::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;
& div:not([hidden]) {
/* Do not override display: none when hidden. */
display: flex;
align-items: center;
}
& .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);
& th {
height: 1.7em;
padding: 0;
text-align: end;
width: 10%;
white-space: nowrap;
}
& 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 {
margin-inline-end: -4px;
& th {
font-weight: normal;
text-align: start;
}
& td {
padding-inline-end: 10px;
& 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;
&.status-success {
fill: color-mix(in srgb, var(--color-green-50) 20%, transparent);
stroke: var(--color-green-50);
}
&.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);
&.selected {
border: 1px solid #45A1FF;
background-color: rgba(69, 161, 255, 0.2);
}
&.disabled {
opacity: 0.5;
& .radio-check {
opacity: 1;
}
}
&.expanded {
& .content-blocking-extra-information {
visibility: visible;
display: flex;
flex-direction: column;
align-content: stretch;
margin-bottom: 10px;
}
&:not(.selected) .content-blocking-warning {
background-color: var(--grey-90-a10);
}
}
/* 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. */
& > .indent {
display: block;
}
}
.content-blocking-warning > .indent,
.content-blocking-category > .indent {
margin-inline: 28px 30px;
}
.arrowhead {
appearance: none;
border: none;
border-radius: 2px;
min-height: 20px;
min-width: 20px;
max-height: 20px;
max-width: 20px;
background-color: transparent;
padding: 3px;
-moz-context-properties: stroke;
stroke: currentColor;
&:not([disabled]):hover {
cursor: pointer;
background-color: var(--grey-90-a10);
&:active {
background-color: var(--grey-90-a20);
}
}
&.up {
}
}
.content-blocking-warning-title,
.content-blocking-category .radio-label-box {
font-weight: bold;
}
.content-blocking-extra-information {
visibility: collapse;
& > .custom-option {
margin: 10px 0;
}
}
.extra-information-label {
display: grid;
grid-template-columns: auto max-content 1fr;
row-gap: 10px;
align-items: center;
margin-block: 18px;
/* Key info icons */
& > img {
margin-inline-end: 5px;
}
}
.content-blocking-warning {
background-color: rgba(69, 161, 255, 0.2);
border-radius: 4px;
padding: 10px 0;
margin: 10px 0;
&:not([hidden]) + & {
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;
&:not([src]) {
display: none;
}
}
.expiration-date-container.key-expired {
& description {
color: var(--color-red-50);
font-weight: 600;
}
& .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;
}
.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);
& tabs {
border-top: none;
}
& 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 {
-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;
& li {
display: flex;
justify-content: space-between;
align-items: baseline;
}
}
.chat-current-session > span {
font-weight: bold;
}