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 file,
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;
&[open="true"] {
color: var(--in-content-button-text-color-hover);
}
}
menulist {
padding: 0 6px;
&[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;
& > :where(hbox, vbox, 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;
&:hover {
opacity: 0.1;
}
&::before {
position: absolute;
content: "";
border: 7px solid transparent;
border-top-color: #d7b600;
top: 100%;
inset-inline-start: calc(50% - 7px);
forced-color-adjust: none;
}
&::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) {
&::before {
border-top-color: CanvasText;
}
&::after {
border-top-color: Canvas;
}
}
& > span {
user-select: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.search-tooltip-parent {
position: relative;
}
.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 */
&.size2 {
width: calc(2ch + 55px);
}
&.size3 {
width: calc(3ch + 55px);
}
&.size4 {
width: calc(4ch + 55px);
}
&.size5 {
width: calc(5ch + 55px);
}
&::-moz-number-spin-box {
padding-inline-start: 10px;
}
&::-moz-number-spin-up,
&::-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;
}
&::-moz-number-spin-up:hover,
&::-moz-number-spin-down:hover {
background-color: var(--in-content-button-background-hover);
}
&::-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;
}
&::-moz-number-spin-down {
min-height: calc(var(--in-content-button-height) * 0.5 - 4px);
border-radius: 0 0 1px 1px;
}
}
separator.groove:not([orient="vertical"]) {
border-top-color: #c1c1c1;
border-bottom-width: 0;
}
tab {
&:not([selected="true"]):hover {
border-bottom-color: transparent;
}
&:focus-visible {
background-color: var(--in-content-button-background);
& > .tab-middle {
outline: none;
& > .tab-text {
outline: none;
}
}
}
}
#defaultWebSearchPopup > menuitem > .menu-iconic-left {
display: flex;
}
/* Applications Pane Styles */
#filter {
margin-inline: 0;
}
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;
& > * {
flex: 0 0 auto;
}
&.deck-selected {
visibility: visible;
}
& > button {
/* Align the button at the end. */
margin-inline-start: auto;
}
}
.update-throbber {
width: 16px;
height: 16px;
margin-inline: 6px 4px;
* still eat CPU. */
#updateDeck > *:not(.deck-selected) > & {
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-position-x: left 2px;
background-position-y: top 2px;
background-size: 16px 16px;
background-repeat: no-repeat;
-moz-context-properties: fill;
fill: currentColor;
&:-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;
&[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;
& 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);
& richlistitem {
padding: 0.3em;
margin: 0;
border: none;
border-radius: 0;
background-image: none;
}
}
#containerBox richlistbox,
#identitiesList richlistbox,
#preferencesContainer richlistbox {
& richlistitem {
&:hover {
background-color: var(--in-content-item-hover);
}
&[selected="true"] {
background-color: var(--in-content-item-selected-unfocused);
color: inherit;
}
}
&: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;
& > .message-bar-description {
width: 32em;
}
}
.action-button {
margin-inline-start: 8px;
}
#tagList,
#categorieslist {
margin-inline-end: 4px;
}
#new-tag-button,
#newCButton {
margin-top: 0;
}
#PermissionsDialog > body {
min-height: 100vh;
display: flex;
}
#permissionsTree {
flex: 1 1 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;
& > 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;
& .add-button {
list-style-image: var(--icon-add);
-moz-context-properties: stroke;
stroke: currentColor;
& .button-icon {
margin-inline-end: 6px;
}
}
& .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);
&[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;
&:hover {
background: none;
}
&:focus-visible {
outline: 2px solid var(--in-content-focus-outline-color);
outline-offset: 2px;
}
& #photoOverlay {
position: absolute;
inset: 0;
border-radius: 100%;
}
&: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) {
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;
}
& 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;
& 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;
& label::before {
display: inline-block;
height: 16px;
width: 16px;
margin-inline-end: 6px;
vertical-align: sub;
}
}