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
:root {
--addon-bg: #f8f8f8;
--addon-border: #ccc;
@media (prefers-color-scheme: dark) {
--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;
&.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);
&:dir(rtl) {
background-position-x: right;
}
}
}
.description {
line-height: 1.45em;
margin-block-end: 0;
& + & {
margin-block: 0 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) {
max-width: 425px;
margin-top: 2rem;
& img {
display: none;
}
}
@media (prefers-reduced-motion: no-preference) {
& article {
transition: opacity .3s ease, transform .3s ease;
&.hide {
opacity: 0;
transform: scale(0.9);
}
}
}
& article p {
max-width: 40rem;
padding-inline: 4rem;
}
}
#form {
display: flex;
flex-direction: column;
& .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 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;
&.vertical {
flex-direction: column;
align-items: stretch;
}
}
.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;
&:is(:hover, :active) {
background-color: transparent !important;
}
& .form-icon {
margin-inline: 0;
}
}
input:user-invalid ~ .form-icon {
display: none;
}
.icon-warning {
display: none;
color: var(--orange-50);
fill-opacity: 1;
input:user-invalid ~ & {
display: inline-block;
}
}
.btn-link {
appearance: none;
background-color: transparent !important;
color: var(--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);
&:hover {
color: var(--link-color-hover) !important;
text-decoration: underline;
}
&:focus-visible {
outline-offset: 1px;
}
&[hidden] {
margin: 0;
}
}
.btn-link-new-email {
margin: -18px 0 2px;
}
.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;
& aside {
display: flex;
align-items: center;
}
& button {
border-radius: var(--in-content-button-border-radius);
}
}
.account-setup-notifications {
display: flex;
flex-direction: column;
margin-inline: -4px;
& .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);
&.selected {
border: 1px solid #45A1FF;
background-color: rgba(69, 161, 255, 0.2);
& .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;
& 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;
& 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 */
&.dialog-critical {
max-width: 700px;
}
}
/* Manual config area */
#manualConfigArea {
margin-block-end: 15px;
& select,
& input:not([type="radio"],[type="checkbox"]) {
margin: 0;
width: 4em;
flex: 1;
}
& select {
padding-inline-start: 6px;
padding-block: 0;
@media (-moz-platform: linux),
(-moz-platform: windows) {
line-height: 1.7;
}
@media (-moz-platform: macos) {
line-height: 2;
}
&:not([size], [multiple]) {
background-position-x: right 10px;
&:dir(rtl) {
background-position-x: left 10px;
}
}
& > option {
padding-inline-start: 11px;
}
}
& 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);
}
& input[type="number"] {
width: calc(2ch + 60px);
text-align: end;
}
}
.manual-config-grid {
display: grid;
row-gap: 12px;
& ~ & {
margin-top: 15px;
}
& aside {
display: grid;
grid-template-columns: 40% 1fr;
column-gap: 6px;
align-items: center;
}
& .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;
& > span {
margin-inline: 0;
}
& > .domain {
font-weight: bold;
}
}
.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);
&.insecure {
background-color: var(--red-70);
color: var(--in-content-primary-button-text-color);
}
}
.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(--link-color);
}
button.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;
&:hover {
background-color: transparent;
color: var(--in-content-accent-color);
cursor: pointer;
&:active {
background-color: transparent;
border-color: transparent;
}
}
& > 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(--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;
&:dir(rtl) {
background-position-x: right 3px;
}
@media (prefers-reduced-motion: no-preference) {
transition: color .2s ease;
}
.quick-link:is(:hover, :hover:active) {
background-color: transparent;
color: var(--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;
}
& p.tip-caption {
margin-block: 9px 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;
& li {
display: flex;
align-items: center;
justify-content: space-between;
padding-inline-start: 4px;
border-radius: var(--in-content-button-border-radius);
}
& 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;
}
.linked-service-dropdown {
@media (prefers-reduced-motion: no-preference) {
transition: transform .2s ease;
}
&:dir(rtl) {
transform: rotate(180deg);
}
.opened & {
transform: rotate(90deg);
}
& 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;
&:dir(rtl) {
background-position-x: right;
}
}
#calendarDialog {
width: 100%;
}
.input-grow {
flex: 1;
}
.calendar-dialog-form {
display: grid;
grid-template-columns: max-content auto;
align-items: center;
row-gap: 3px;
column-gap: 3px;
margin-block-end: 21px;
#calendarDialog & label,
& .input-control {
margin-block-end: 0;
}
& select,
& input[type="color"] {
margin-inline: 4px;
}
& select {
padding-inline-start: 9px;
padding-block: 0;
line-height: var(--in-content-button-height);
&:not([size], [multiple]) {
background-position-x: right 10px;
&:dir(rtl) {
background-position-x: left 10px;
}
}
& > option {
padding-inline-start: 11px;
}
}
}