summaryrefslogtreecommitdiffstats
path: root/browser/themes/shared/preferences/preferences.css
diff options
context:
space:
mode:
Diffstat (limited to 'browser/themes/shared/preferences/preferences.css')
-rw-r--r--browser/themes/shared/preferences/preferences.css1548
1 files changed, 1548 insertions, 0 deletions
diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css
new file mode 100644
index 0000000000..668fa2ee4f
--- /dev/null
+++ b/browser/themes/shared/preferences/preferences.css
@@ -0,0 +1,1548 @@
+/* - 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 "http://www.w3.org/1999/xhtml";
+
+/* Global rules */
+:root {
+ user-select: text;
+}
+
+#preferences-root {
+ text-rendering: optimizeLegibility;
+}
+
+@media not print {
+ #preferences-root,
+ #preferences-body {
+ height: 100%;
+ overflow: hidden;
+ }
+}
+
+#preferences-root,
+#preferences-body {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+}
+
+#preferences-body {
+ vertical-align: top; /* See bug 1606130 */
+ display: flex;
+ flex-direction: column;
+
+ --main-pane-width: 664px;
+}
+
+/*
+ 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-top: 0;
+ /* the 32px min-height, plus 20+30px margin below, plus some leeway: */
+ scroll-padding-top: 90px;
+ contain: inline-size;
+}
+
+.pane-container {
+ /* A workaround to keep the container always float on the `top: 0` (Bug 1377009) */
+ display: block;
+ width: min(100%, var(--main-pane-width));
+ min-width: min-content;
+}
+
+#mainPrefPane {
+ width: 100%;
+ padding: 0;
+}
+
+groupbox[data-category] {
+ margin: 0 0 32px;
+}
+
+html|h1 {
+ margin: 0 0 8px;
+ font-size: 1.46em;
+ font-weight: 300;
+ line-height: 1.3em;
+}
+
+html|h2 {
+ margin: 16px 0 4px;
+ font-size: 1.14em;
+ line-height: normal;
+}
+
+description.indent,
+.indent:not(#browserPrivateEngineSelection) > description {
+ color: var(--text-color-deemphasized);
+}
+
+button,
+treecol,
+menulist,
+html|select {
+ /* override the root rule */
+ user-select: none;
+}
+
+/* Buttons get a default min-width in XUL. When they also have flex, they will
+ * be large enough anyway, and we don't want them to become smaller than their inner
+ * text which would then overflow the button. Set min-width back to auto for that:
+ */
+button[flex] {
+ min-width: auto;
+}
+
+description,
+label {
+ line-height: 1.8em;
+ margin: 0;
+}
+
+.tip-caption {
+ font-size: .9em;
+ color: var(--text-color-deemphasized);
+}
+
+menulist::part(label),
+menuitem > label,
+button > hbox > label {
+ line-height: unset;
+}
+
+.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 !important;
+}
+
+checkbox {
+ margin-inline: 0;
+}
+
+.tail-with-learn-more {
+ margin-inline: 0 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;
+}
+
+.learnMore {
+ margin-inline-start: 0;
+ font-weight: normal;
+ white-space: nowrap;
+}
+
+.accessory-button {
+ min-width: 150px;
+ margin: 4px 0;
+}
+
+.spotlight {
+ background-color: color-mix(in srgb, var(--in-content-accent-color) 15%, transparent);
+ outline: var(--in-content-accent-color) 1px dotted;
+ animation: fade-out 0.5s ease-out 2s forwards;
+ /* Show the border to spotlight the components in high-contrast mode. */
+ border: 1px solid transparent;
+ border-radius: 2px;
+}
+
+@keyframes fade-out {
+ 100% {
+ background-color: transparent;
+ outline-color: transparent;
+ }
+}
+
+[data-subcategory] {
+ margin-inline: -4px;
+ padding-inline: 4px;
+}
+
+.ac-site-icon {
+ display: flex;
+}
+
+/* Subcategory title */
+
+/**
+ * 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);
+}
+
+/* Category List */
+
+#categories {
+ overflow: visible;
+ min-height: auto;
+ padding: 1px; /* Adding padding around richlistitem in order to make entire keyboard focusing outline visible */
+}
+
+#category-general > .category-icon {
+ list-style-image: url("chrome://browser/skin/preferences/category-general.svg");
+}
+
+#category-home > .category-icon {
+ list-style-image: url("chrome://browser/skin/home.svg");
+}
+
+#category-search > .category-icon {
+ list-style-image: url("chrome://browser/skin/preferences/category-search.svg");
+}
+
+#category-privacy > .category-icon {
+ list-style-image: url("chrome://browser/skin/preferences/category-privacy-security.svg");
+}
+
+#category-sync > .category-icon {
+ list-style-image: url("chrome://browser/skin/preferences/category-sync.svg");
+}
+
+#category-experimental > .category-icon {
+ list-style-image: url("chrome://global/skin/icons/experiments.svg");
+}
+
+#category-more-from-mozilla > .category-icon {
+ list-style-image: url("chrome://browser/skin/preferences/mozilla-logo.svg");
+}
+
+/* All panes */
+
+.info-icon,
+.androidIcon,
+.iOSIcon {
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+/* General Pane */
+
+.is-default > #isNotDefaultPane,
+:not(.is-default) > #isDefaultPane {
+ visibility: hidden;
+}
+
+#isDefaultLabel,
+#isNotDefaultLabel {
+ font-weight: 600;
+}
+
+@supports not -moz-bool-pref("browser.migrate.preferences-entrypoint.enabled") {
+ #dataMigrationGroup {
+ display: none;
+ }
+}
+
+#dataMigration {
+ /* This should really be using baseline, but that doesn't work properly with
+ * the <description> and XUL <button> markup. */
+ align-items: center;
+}
+
+#browserContainersExtensionContent {
+ padding-block: 5px;
+}
+
+.extension-controlled {
+ margin-block: 18px;
+}
+
+.extension-controlled-icon {
+ height: 20px;
+ margin: 2px 0 6px;
+ vertical-align: middle;
+ width: 20px;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+.extension-controlled-disabled {
+ -moz-context-properties: fill;
+ color: GrayText;
+ fill: currentColor;
+}
+
+.extension-controlled-disabled > .extension-controlled-button {
+ display: none;
+}
+
+.extension-controlled-icon.close-icon {
+ height: 30px;
+ width: 30px;
+ margin-inline-start: 5px;
+}
+
+#getStarted {
+ font-size: 90%;
+}
+
+#colors {
+ margin-inline-start: 5px;
+}
+
+#FontsDialog menulist:empty {
+ /* When there's no menupopup, while the font builder is running,
+ * the height of the menulist would otherwise shrink. This throws
+ * off the height determination SubDialog.sys.mjs does, which then
+ * leads to content being cut off. Fix by enforcing a minimum height
+ * when there's no content: */
+ min-height: max(32px, calc(1.4em + 16px));
+}
+
+#useDocumentColors {
+ margin: 4px 0;
+}
+
+#translationAttributionImage {
+ width: 70px;
+ cursor: pointer;
+}
+
+#activeLanguages > richlistitem {
+ padding: 0.3em;
+}
+
+#saveWhere {
+ align-items: center;
+}
+
+#saveTo {
+ margin-inline-end: 1em;
+}
+
+#downloadFolder {
+ flex: 1;
+ margin-block: 4px;
+ margin-inline-start: 0;
+ padding-inline-start: 30px;
+ background-repeat: no-repeat;
+ background-size: 16px;
+ background-position: center left 8px;
+}
+
+#downloadFolder:-moz-locale-dir(rtl) {
+ background-position-x: right 8px;
+}
+
+#updateBox {
+ margin-block: 4px 32px;
+}
+
+/* Work around bug 560067 - animated images in visibility: hidden
+ * still eat CPU. */
+#updateDeck > *:not(.deck-selected) > .update-throbber {
+ display: none;
+}
+
+#updateDeck > hbox > button {
+ margin-block: 0;
+ margin-inline-end: 0;
+}
+
+#updateDeck > hbox > label {
+ flex: 1;
+}
+
+.manualLink {
+ margin-inline-start: 6px !important;
+}
+
+#updateRadioGroup > radio {
+ min-height: 30px;
+ margin: 2px 0;
+}
+
+#filter {
+ margin: 4px 0 8px;
+}
+
+#handlersView {
+ height: 25em;
+ margin-inline-end: 0;
+}
+
+#handlersView > richlistitem {
+ min-height: 30px;
+}
+
+#handlersView .actionsMenu {
+ margin: 0;
+ min-height: 0;
+ padding: 0;
+ border: none;
+ padding-inline-end: 8px;
+}
+
+#handlersView .actionsMenu::part(label) {
+ margin: 0;
+}
+
+.typeIcon,
+.actionIcon,
+.actionsMenu::part(icon) {
+ height: 16px;
+ width: 16px;
+}
+
+.typeIcon {
+ margin-inline: 10px 9px !important;
+}
+
+#handlersView .actionsMenu::part(icon),
+.actionIcon {
+ margin-inline: 11px 8px !important;
+}
+
+.actionsMenu > menupopup > menuitem {
+ padding-inline-start: 10px !important;
+}
+
+.actionsMenu > menupopup > menuitem > .menu-iconic-left {
+ margin-inline-end: 8px !important;
+}
+
+/* Increase the specifity to override common.inc.css */
+richlistitem[selected] .actionsMenu:focus-visible {
+ outline-offset: -3px;
+}
+
+/* Home Pane */
+
+#homepageGroup menulist,
+#homepageGroup html|input {
+ margin: 5px 0;
+}
+
+#homepageGroup html|input {
+ text-align: match-parent;
+}
+
+#homepageGroup:-moz-locale-dir(rtl) html|input {
+ unicode-bidi: plaintext;
+}
+
+#homepageAndNewWindowsOption {
+ margin-top: 20px;
+}
+
+#homepageGroup:-moz-locale-dir(rtl) panel[type="autocomplete-richlistbox"] {
+ direction: rtl;
+}
+
+.homepage-buttons > .homepage-button {
+ flex: 1 auto;
+}
+
+.homepage-button:first-of-type {
+ margin-inline-start: 0;
+}
+
+.homepage-button:last-of-type {
+ margin-inline-end: 0;
+}
+
+#homeContentsGroup .checkbox-icon[src] {
+ -moz-context-properties: fill;
+ fill: currentColor;
+ margin-inline: 2px 8px;
+ width: 16px;
+}
+
+#homeContentsGroup [data-subcategory] {
+ margin-top: 14px;
+}
+
+#homeContentsGroup [data-subcategory] .section-checkbox {
+ font-weight: 600;
+}
+
+#homeContentsGroup [data-subcategory] > vbox menulist {
+ margin-block: 0;
+}
+
+.addon-with-favicon .menu-iconic-icon {
+ margin-inline-start: 0;
+}
+
+a[is="moz-support-link"]:not(.sidebar-footer-link) {
+ display: inline-block;
+ white-space: initial;
+}
+
+/* Search Pane */
+
+#engineList {
+ margin: 2px 0 5px;
+}
+
+#engineList > treechildren::-moz-tree-image(engineShown, checked),
+#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked) {
+ list-style-image: url("chrome://global/skin/icons/check.svg");
+ -moz-context-properties: fill, stroke;
+ fill: var(--in-content-accent-color);
+}
+
+#engineList > treechildren::-moz-tree-image(engineShown, checked, selected),
+#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked, selected) {
+ fill: var(--in-content-item-selected-text);
+ stroke: var(--in-content-item-selected);
+}
+
+@media (prefers-contrast) {
+ #engineList > treechildren::-moz-tree-image(hover),
+ #blocklistsTree > treechildren::-moz-tree-image(hover) {
+ fill: var(--in-content-item-hover-text);
+ stroke: var(--in-content-item-hover);
+ }
+}
+
+#engineList > treechildren::-moz-tree-row,
+#blocklistsTree > treechildren::-moz-tree-row {
+ min-height: 36px;
+}
+
+#selectionCol {
+ min-width: 26px;
+}
+
+#addEnginesBox {
+ margin: 4px 0 0;
+}
+
+/* Privacy Pane */
+
+#allowSmartSize {
+ margin-block: 0 4px;
+}
+
+#doNotTrackLearnMoreBox {
+ margin-top: 32px;
+}
+
+#historyPane {
+ margin-top: 4px;
+}
+
+#historyButtons {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+#blockCookies,
+#keepRow {
+ margin-top: 1.5em;
+}
+
+/* Collapse the non-active vboxes in decks to use only the height the
+ active vbox needs */
+#historyPane:not([selectedIndex="1"]) > #historyDontRememberPane,
+#historyPane:not([selectedIndex="2"]) > #historyCustomPane,
+#weavePrefsDeck:not([selectedIndex="1"]) > #hasFxaAccount,
+#fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified,
+#fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected,
+#syncStatus:not([selectedIndex="1"]) > #syncConfigured {
+ visibility: collapse;
+}
+
+#tabsElement {
+ margin-inline-end: 4px; /* add the 4px end-margin of other elements */
+}
+
+.text-link {
+ margin-bottom: 0;
+}
+
+.text-link[disabled="true"] {
+ pointer-events: none;
+}
+
+#showUpdateHistory {
+ margin-inline-start: 0;
+}
+
+@media (-moz-platform: windows-win7),
+ (-moz-platform: windows-win8) {
+ #windows-sso,
+ #windows-sso-caption {
+ display: none;
+ }
+}
+
+/**
+ * Dialog
+ */
+
+.dialogOverlay {
+ visibility: hidden;
+}
+
+html|dialog {
+ padding: 24px;
+}
+
+html|dialog::backdrop,
+.dialogOverlay[topmost="true"] {
+ background-color: rgba(0,0,0,0.5);
+}
+
+html|dialog,
+.dialogBox {
+ border: 1px solid transparent;
+ border-radius: 8px;
+ box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3);
+}
+
+.dialogBox {
+ background-color: var(--in-content-page-background);
+ background-clip: content-box;
+ color: var(--in-content-page-color);
+ /* `transparent` will use the dialogText color in high-contrast themes and
+ when page colors are disabled */
+ display: flex;
+ margin: 0;
+ padding: 0;
+ overflow-x: auto;
+}
+
+@media (prefers-color-scheme: dark) {
+ @media not (prefers-contrast) {
+ html|dialog,
+ .dialogBox {
+ --in-content-page-background: #42414d;
+ }
+ }
+}
+
+.dialogBox[resizable="true"] {
+ resize: both;
+ overflow: hidden;
+ min-height: 20em;
+ min-width: 66ch;
+}
+
+.dialogTitleBar {
+ padding: .4em .2em;
+ border-bottom: 1px solid var(--in-content-border-color);
+}
+
+.dialogTitle {
+ font-weight: 600;
+ text-align: center;
+ user-select: none;
+}
+
+.fxaPairDeviceIcon {
+ background-image: url("chrome://browser/content/logos/fxa-logo.svg");
+ background-position: center center;
+ background-repeat: no-repeat;
+ position: relative;
+ height: 80px;
+ padding-top: 42px;
+ margin-top: -40px;
+}
+
+.fxaPairDeviceIcon .close-icon {
+ margin-top: 10px;
+}
+
+.close-icon {
+ border: none;
+ background-color: transparent; /* override common.css, but keep hover/active states */
+ min-width: 0;
+ min-height: auto;
+ width: 20px;
+ height: 20px;
+ padding: 0;
+ margin-inline: 0 8px;
+}
+
+.dialogFrame {
+ margin: 10px;
+ flex: 1;
+ /* Default dialog dimensions */
+ min-width: 66ch;
+}
+
+/**
+ * End Dialog
+ */
+
+/**
+ * Font group and font dialog menulist fixes
+ */
+
+#font-chooser-group {
+ display: grid;
+ grid-template-columns: max-content 1fr max-content max-content;
+}
+
+#defaultFont {
+ flex: 1 25ch;
+}
+
+#defaultFontType,
+#serif,
+#sans-serif,
+#monospace {
+ width: 0; /* Might be able to be removed */
+ min-width: 30ch;
+}
+
+/**
+ * Sync
+ */
+
+.fxaProfileImage {
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ border: 1px solid transparent;
+ list-style-image: url(chrome://browser/skin/fxa/avatar-color.svg);
+ margin-inline-end: 24px;
+ -moz-user-focus: normal;
+}
+
+.fxaProfileImage.actionable {
+ cursor: pointer;
+}
+
+.fxaProfileImage.actionable:hover {
+ border-color: #0095DD;
+}
+
+.fxaProfileImage.actionable:hover:active {
+ border-color: #ff9500;
+}
+
+#useFirefoxSync {
+ font-size: 90%;
+ margin-inline-end: 8px !important;
+}
+
+#fxaNoLoginStatus {
+ margin-block: 46px 64px;
+}
+
+#fxaSyncComputerName {
+ flex: 1;
+ margin-block: 4px;
+ margin-inline-start: 0;
+}
+
+#fxaChangeDeviceName {
+ margin-block: 4px;
+ margin-inline-end: 0;
+}
+
+#noFxaAccount {
+ line-height: 1.2em;
+}
+
+#noFxaAccount > label:first-child {
+ margin-bottom: 0.6em;
+}
+
+#noFxaCaption {
+ line-height: 30px;
+ margin-block: 0 4px;
+}
+
+#noFxaSignIn {
+ margin-inline-start: 8px;
+}
+
+.fxaSyncIllustration {
+ list-style-image: url(chrome://browser/skin/fxa/sync-devices.svg);
+ width: 312px;
+ height: 136px;
+}
+
+#noFxaDescription {
+ padding-inline-end: 52px;
+}
+
+.separator {
+ border-bottom: 1px solid var(--in-content-box-border-color);
+}
+
+#fxaGroup {
+ margin-bottom: 32px;
+}
+
+.openLink {
+ line-height: 30px;
+ cursor: pointer;
+}
+
+.openLink:visited {
+ color: var(--in-content-link-color);
+}
+
+#fxaDisplayName {
+ margin-inline-end: 10px !important;
+}
+
+.fxaLoginRejectedWarning {
+ list-style-image: url(chrome://global/skin/icons/warning.svg);
+ -moz-context-properties: fill;
+ fill: #FFBF00;
+ margin-inline: 4px 8px;
+}
+
+#syncStatus {
+ margin-top: 32px;
+}
+
+.sync-group {
+ margin-block: 16px;
+ border: 1px solid var(--in-content-border-color);
+}
+
+.sync-configured {
+ display: block;
+}
+
+.sync-choose-dialog-description {
+ margin-block-end: 10px;
+}
+
+.sync-engines-list > div,
+.sync-engines-list + hbox {
+ margin-top: 0;
+ padding-top: 16px;
+ max-width: 300px;
+ height: auto;
+}
+
+dialog > .sync-engines-list > div,
+dialog > .sync-engines-list + hbox {
+ padding-top: 0;
+}
+
+.sync-engines-list checkbox .checkbox-icon,
+.sync-engine-image {
+ margin-inline: 2px 8px;
+ width: 16px;
+ height: 16px;
+ -moz-context-properties: fill;
+ fill: currentColor;
+ align-self: center;
+}
+
+.sync-engines-list checkbox {
+ min-width: max-content;
+ max-width: calc(50vw - 10px);
+}
+
+.sync-engines-list .checkbox-label-box {
+ align-items: center;
+}
+
+.sync-engines-list {
+ column-count: 2;
+ column-fill: balance;
+ margin-block-end: 10px;
+}
+
+.sync-engines-list > div:not([hidden]) {
+ display: flex;
+ break-inside: avoid;
+}
+
+.sync-engine-bookmarks .checkbox-icon,
+.sync-engine-bookmarks.sync-engine-image {
+ list-style-image: url("chrome://browser/skin/bookmark.svg");
+}
+
+.sync-engine-history .checkbox-icon,
+.sync-engine-history.sync-engine-image {
+ list-style-image: url("chrome://browser/skin/history.svg");
+}
+
+.sync-engine-tabs .checkbox-icon,
+.sync-engine-tabs.sync-engine-image {
+ list-style-image: url("chrome://browser/skin/synced-tabs.svg");
+}
+
+.sync-engine-passwords .checkbox-icon,
+.sync-engine-passwords.sync-engine-image {
+ list-style-image: url("chrome://browser/skin/login.svg");
+}
+
+.sync-engine-addons .checkbox-icon,
+.sync-engine-addons.sync-engine-image {
+ list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
+}
+
+.sync-engine-prefs .checkbox-icon,
+.sync-engine-prefs.sync-engine-image {
+ list-style-image: url("chrome://global/skin/icons/settings.svg");
+}
+
+.sync-engine-addresses .checkbox-icon,
+.sync-engine-addresses.sync-engine-image {
+ list-style-image: url("chrome://formautofill/content/formfill-anchor.svg");
+}
+
+.sync-engine-creditcards .checkbox-icon,
+.sync-engine-creditcards.sync-engine-image {
+ list-style-image: url("chrome://formautofill/content/icon-credit-card-generic.svg");
+}
+
+.fxaMobilePromo {
+ margin-top: 2px !important;
+}
+
+.androidIcon,
+.iOSIcon {
+ margin-inline: 2px 4px;
+ width: 20px;
+ height: 20px;
+ vertical-align: text-bottom;
+}
+
+#updateDeck > hbox > label {
+ margin-inline-end: 5px ! important;
+}
+
+.update-throbber {
+ width: 16px;
+ min-height: 16px;
+ margin-block: 7px;
+ margin-inline-end: 8px;
+ vertical-align: middle;
+}
+
+.update-throbber {
+ content: image-set(url("chrome://global/skin/icons/loading.png"), url("chrome://global/skin/icons/loading@2x.png") 2x);
+}
+
+.navigation {
+ overflow-x: hidden;
+ overflow-y: auto;
+ position: relative;
+}
+
+@media (prefers-reduced-motion) {
+ /* Setting border-inline-end on .navigation makes it a focusable element */
+ .navigation::after {
+ content: "";
+ width: 1px;
+ height: 100%;
+ background-color: var(--in-content-border-color);
+ top: 0;
+ inset-inline-end: 0;
+ position: absolute;
+ }
+}
+
+.face-sad::before {
+ content: "\01F641";
+ font-size: 1.3em;
+ margin-inline-end: 8px;
+}
+
+.face-smile::before {
+ content: "\01F600";
+ font-size: 1.3em;
+ margin-inline-end: 8px;
+}
+
+#policies-container,
+#searchInput {
+ min-height: 32px;
+ margin: 20px 0 30px;
+}
+
+#policies-container {
+ margin-inline-end: 16px;
+ /* Make sure the container is at least the same height as the searchbox.
+ This is needed in addition to the min-height above to make the info icon
+ the same height as the first line in the policies label.
+ Searchbox's height - line-height - border top and bottom */
+ padding-block: max(0px, calc((32px - 1.8em - 2px) / 2));
+}
+
+.info-box-container {
+ background-color: var(--in-content-box-info-background);
+ padding: 9px;
+ border: 1px solid transparent;
+ border-radius: 4px;
+}
+
+.info-box-container.smaller-font-size {
+ font-size: 85%;
+}
+
+.info-icon-container {
+ display: flex;
+}
+
+.info-icon {
+ content: url("chrome://global/skin/icons/info.svg");
+ width: 16px;
+ height: 16px;
+ margin-inline-end: 6px;
+ align-self: start;
+ margin-top: 0.4em;
+ flex-shrink: 0;
+}
+
+.info-box-container.smaller-font-size .info-icon {
+ margin-top: 0.3em;
+}
+
+.sticky-container {
+ position: sticky;
+ background-color: var(--in-content-page-background);
+ top: 0;
+ z-index: 1;
+ /* The sticky-container should have the capability to cover all spotlight area. */
+ width: calc(100% + 8px);
+ margin-inline: -4px;
+ padding-inline: 4px;
+}
+
+.sticky-inner-container {
+ flex: 1;
+ max-width: var(--main-pane-width);
+}
+
+.search-tooltip {
+ max-width: 10em;
+ font-size: 1rem;
+ position: absolute;
+ padding: 0 .7em;
+ background-color: #ffe900;
+ color: #000;
+ border: 1px solid #d7b600;
+ margin-top: -18px;
+ opacity: .85;
+}
+
+.search-tooltip:hover {
+ opacity: .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 {
+ display: block;
+ user-select: none;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.visually-hidden {
+ visibility: collapse;
+}
+
+menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left {
+ display: flex;
+ min-width: auto; /* Override the min-width defined in menu.css */
+ margin-inline-end: 6px;
+}
+
+menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left > .menu-iconic-icon {
+ width: 8px;
+ height: 10px;
+ margin: 0;
+}
+
+menulist[indicator=true] > menupopup menuitem[indicator=true]:not([image]) > .menu-iconic-left > .menu-iconic-icon {
+ list-style-image: url(chrome://browser/skin/preferences/search-arrow-indicator.svg);
+}
+
+menulist[indicator=true] > menupopup menuitem[indicator=true]:not([image]) > .menu-iconic-left > .menu-iconic-icon:-moz-locale-dir(rtl) {
+ transform: scaleX(-1);
+}
+
+.menu-iconic-highlightable-text {
+ margin: 0; /* Align with the margin of xul:label.menu-iconic-text */
+}
+
+#no-results-message > label {
+ margin: 2px 0;
+ line-height: 30px;
+}
+
+/* Proxy port input */
+
+.proxy-port-input {
+ width: calc(5ch + 18px); /* 5 chars + (8px padding + 1px border) on both sides */
+ margin-inline-start: 4px;
+}
+
+#primaryBrowserLocale {
+ margin-inline-start: 0;
+ min-width: 20em;
+}
+
+#availableLanguages,
+#availableLocales {
+ margin-inline-start: 0;
+}
+
+#availableLanguages,
+#availableLocales,
+#activeLanguages,
+#selectedLocales {
+ margin-inline-end: 4px;
+}
+
+#activeLanguages,
+#selectedLocales {
+ min-height: 15em;
+ contain: size;
+}
+
+#selectedLocales > richlistitem {
+ padding-inline-start: 13px;
+}
+
+#warning-message > .message-bar-description {
+ width: 32em;
+}
+
+#warning-message {
+ margin-top: 8px;
+}
+
+.action-button {
+ margin-inline-end: 0;
+}
+
+.languages-grid {
+ flex: 1;
+ display: grid;
+ grid-template-rows: 1fr auto;
+ grid-template-columns: 1fr auto;
+}
+
+/* Menulist styles */
+.label-item {
+ font-size: 0.8em;
+}
+
+.updateSettingCrossUserWarningContainer {
+ margin-block-end: 17px;
+}
+
+#updateSettingCrossUserWarningDesc {
+ padding-inline-start: calc(16px + 6px); /* radio-check's width + margin-inline-end */
+ margin-block-start: 20px;
+}
+
+richlistitem .text-link {
+ color: inherit;
+ text-decoration: underline;
+}
+
+richlistitem .text-link:hover {
+ color: inherit;
+}
+
+#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;
+}
+
+#pane-experimental-search-results-header,
+#pane-experimental-subtitle {
+ background-image: url("chrome://global/skin/icons/warning.svg");
+ background-repeat: no-repeat;
+ background-position: 0 center;
+ background-size: contain;
+ min-height: 30px;
+ padding-inline-start: 38px;
+ display: flex;
+ align-items: center;
+ -moz-context-properties: fill;
+ fill: #FFBF00;
+}
+
+#pane-experimental-search-results-header:-moz-locale-dir(rtl),
+#pane-experimental-subtitle:-moz-locale-dir(rtl) {
+ background-position-x: right;
+}
+
+#pane-experimental-featureGates {
+ margin-top: 16px;
+}
+
+.featureGate {
+ margin-bottom: 16px;
+}
+
+.featureGateCheckbox {
+ font-size: 1.14em;
+ align-items: center;
+}
+
+.featureGateCheckbox > .checkbox-label-box {
+ align-items: center;
+}
+
+.featureGateDescription {
+ margin-inline-start: 28px;
+}
+
+.checkbox-row {
+ display: flex;
+ align-items: baseline;
+}
+
+.checkbox-row input[type=checkbox] {
+ translate: 0 2px
+}
+
+.checkbox-row a {
+ margin-inline-start: 6px;
+}
+
+#moreFromMozillaCategory-header .title {
+ margin-block-end: 4px;
+}
+
+#moreFromMozillaCategory-header .subtitle {
+ color: var(--in-content-text-color);
+ margin-block-end: 24px;
+ line-height: 1.4em;
+}
+
+#moreFromMozillaCategory:not([hidden]) {
+ display: flex;
+ flex-direction: column;
+}
+
+#moreFromMozillaCategory .mozilla-product-item {
+ margin-top: 30px;
+}
+
+#moreFromMozillaCategory .product-title {
+ margin: 4px 0 3px;
+ background-repeat: no-repeat;
+ background-size: contain;
+ padding-inline-start: 30px;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+#moreFromMozillaCategory .product-title:-moz-locale-dir(rtl) {
+ background-position-x: right;
+}
+
+#moreFromMozillaCategory .product-description-box {
+ padding-inline-start: 30px;
+ margin: 2px 0;
+ line-height: 1.4em;
+}
+
+#moreFromMozillaCategory .description {
+ display: inline;
+}
+
+#moreFromMozillaCategory .small-button {
+ margin-block: 14px 2px;
+ margin-inline: 30px 0;
+}
+
+#firefox-mobile {
+ background-image: url("chrome://browser/skin/device-phone.svg");
+}
+
+#mozilla-vpn {
+ background-image: url("chrome://browser/skin/preferences/vpn-logo.svg");
+}
+
+#firefox-relay {
+ background-image: url("chrome://browser/skin/preferences/relay-logo.svg");
+}
+
+/*
+ * The :not clause is required because hiding an element with `display: flex` only
+ * partially hides it.
+ */
+.qr-code-box:not([hidden="true"]) {
+ max-width: 320px; /* a unit better than px for this & next? */
+ min-height: 204px;
+ margin-block: 10px 0;
+ margin-inline-start: 30px;
+ background-color: var(--in-content-box-info-background);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-evenly;
+ border-radius: 4px;
+}
+
+@media (prefers-contrast) {
+ .qr-code-box:not([hidden="true"]) {
+ border: 1px solid currentColor;
+ }
+}
+
+.qr-code-box-image {
+ border-radius: 4px;
+ padding: 2px;
+ width: 80px;
+ flex: 0 0 auto;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+.qr-code-title-label {
+ flex: 1 1 auto;
+}
+
+.qr-code-box-title {
+ font-size: .87em;
+ font-weight: normal;
+ line-height: 1.42em;
+
+ text-align: center;
+
+ margin-block: 20px 0;
+ margin-inline: 40px;
+}
+
+.simple .qr-code-box-title {
+ margin-block: 0;
+ width: 296px;
+}
+
+.simple .qr-code-box {
+ padding-inline: 24px;
+ padding-block: 20px
+}
+
+.simple .qr-code-box-image {
+ padding: 10px;
+}
+
+#moreFromMozillaCategory .qr-code-link {
+ font-size: .87em;
+ line-height: 1.42em;
+}
+
+@media (prefers-color-scheme: dark) {
+ .qr-code-box:not([hidden="true"]) {
+ background-color: rgba(91,91,102,0.45);
+ }
+
+ .qr-code-box-title {
+ color: #fbfbfe;
+ }
+}
+
+#websiteAppearanceGroup {
+ display: block;
+}
+
+#web-appearance-chooser {
+ display: flex;
+ justify-content: space-between;
+ gap: 16px;
+}
+
+#web-appearance-chooser,
+#web-appearance-override-warning {
+ margin: 12px 0;
+}
+
+#web-appearance-override-warning:not([hidden]) {
+ display: flex;
+}
+
+.web-appearance-choice {
+ width: 100%;
+ border: 1px solid var(--in-content-box-border-color);
+ background-color: var(--in-content-box-background-color);
+ color: var(--in-content-text-color);
+ border-radius: 4px;
+ overflow: clip;
+}
+
+.web-appearance-choice-image-container {
+ background-color: var(--in-content-button-background);
+ padding: 12px 0;
+}
+
+.web-appearance-choice:hover > .web-appearance-choice-image-container {
+ background-color: var(--in-content-button-background-hover);
+}
+
+.web-appearance-choice:hover:active > .web-appearance-choice-image-container {
+ background-color: var(--in-content-button-background-active);
+}
+
+.web-appearance-choice img {
+ display: block;
+ margin: 0 auto;
+
+ border: 1px solid var(--in-content-box-border-color);
+ border-radius: 4px;
+ box-shadow: 0 0 2px 0 rgba(0,0,0,0.2);
+
+ transform: scaleX(1);
+ content: url("chrome://browser/content/preferences/web-appearance-light.svg")
+}
+
+.web-appearance-choice.dark img {
+ content: url("chrome://browser/content/preferences/web-appearance-dark.svg")
+}
+
+.web-appearance-choice img:-moz-locale-dir(rtl) {
+ transform: scaleX(-1);
+}
+
+.web-appearance-choice-footer {
+ border-top: 1px solid var(--in-content-box-border-color);
+ padding: 4px 8px;
+ overflow-wrap: anywhere;
+ display: flex;
+}
+
+.web-appearance-choice input {
+ margin-top: 0.4em;
+}
+
+#translations-manage-install-list {
+ height: 220px;
+ overflow: scroll;
+ background-color: var(--in-content-box-background);
+ border: 1px solid var(--in-content-box-border-color);
+ border-radius: 4px;
+ resize: vertical;
+ margin: 4px 0;
+}
+
+.translations-manage-language:first-child {
+ border-bottom: 1px solid var(--in-content-box-border-color);
+ padding: 8px;
+ margin-bottom: 8px;
+}
+
+.translations-manage-language {
+ align-items: center;
+ padding: 0 8px;
+}
+
+.translations-manage-language label {
+ flex: 1;
+ margin: 0 15px;
+}
+
+#translations-manage-error {
+ color: var(--in-content-error-text-color);
+ margin: 16px 0;
+}
+
+/* Platform-specific tweaks & overrides */
+
+@media (-moz-platform: macos) {
+ tabpanels {
+ padding: 20px 7px 7px;
+ }
+
+ #browserUseCurrent,
+ #browserUseBookmark,
+ #browserUseBlank {
+ margin-top: 10px;
+ }
+
+ #privacyPrefs {
+ padding: 0 4px;
+ }
+
+ #privacyPrefs > tabpanels {
+ padding: 18px 10px 10px;
+ }
+
+ #OCSPDialogPane {
+ font: message-box !important;
+ }
+
+ /**
+ * Update Preferences
+ */
+ #autoInstallOptions {
+ margin-inline-start: 20px;
+ }
+
+ .updateControls {
+ margin-inline-start: 10px;
+ }
+}
+
+@media (-moz-platform: linux) {
+ .treecol-sortdirection {
+ /* override the Linux only toolkit rule */
+ appearance: none;
+ }
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-05-11 10:27:53 +0000