fune/browser/themes/shared/incontentprefs/preferences.inc.css

%if 0
/* - 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/. */
%endif
@namespace html "http://www.w3.org/1999/xhtml";

* {
  -moz-user-select: text;
}

.main-content {
  padding-top: 0;
}

.pane-container {
  /* A workaround to keep the container always float on the `top: 0` (Bug 1377009) */
  display: block;
  width: 664px;
}

#mainPrefPane {
  width: 100%;
  padding: 0;
}

.prefpane > groupbox + groupbox {
  margin-top: 16px;
}

groupbox + groupbox > .groupbox-body,
groupbox + vbox groupbox > .groupbox-body {
  margin-top: 4px;
}

.groupbox-title {
  margin-top: 16px;
}

description.indent,
.indent > description {
  color: #737373;
}

button,
treecol,
html|option {
  /* override the * rule */
  -moz-user-select: none;
}

description,
label {
  line-height: 1.8em;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.tip-caption {
  font-size: .9em;
}

menulist > hbox > label,
menuitem > label,
button > hbox > label {
  line-height: unset;
}

.indent {
  margin-inline-start: 28px !important;
}

.checkbox-check {
  margin-inline-end: 8px;
  width: 20px;
  height: 20px;
}

.tail-with-learn-more {
  margin-inline-start: 0px;
  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;
}

.learnMore {
  margin-inline-start: 0px;
  font-weight: normal;
  white-space: nowrap;
}

.accessory-button {
  height: 30px;
  min-width: 150px;
  margin: 4px 0;
}

.spotlight {
  background-color: rgba(0,200,215,0.3);
  /* Show the border to spotlight the components in high-contrast mode. */
  border: 1px solid transparent;
  border-radius: 2px;
}

[data-subcategory] {
  margin-left: -4px;
  margin-right: -4px;
  padding-left: 4px;
  padding-right: 4px;
}

[data-subcategory] > .groupbox-title {
  padding-inline-start: 4px;
}

.ac-site-icon {
  display: -moz-box;
}

/* 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 rgba(12, 12, 13, 0.15);
}

/* Category List */

#categories > scrollbox {
  overflow: visible !important; /* Cancel scrollbar and do not clip overflow content when window size goes very small */
}

#categories > scrollbox > box {
  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/in-content/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/in-content/search.svg");
}

#category-privacy > .category-icon {
  list-style-image: url("chrome://browser/skin/preferences/in-content/privacy-security.svg");
}

#category-sync > .category-icon {
  list-style-image: url("chrome://browser/skin/preferences/in-content/sync.svg");
}

/* header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header[hidden=true] {
  display: none;
}

/* General Pane */

#isDefaultLabel {
  font-weight: 600;
}

.extension-controlled-icon {
  height: 20px;
  margin: 2px 0 6px;
  vertical-align: middle;
  width: 20px;
}

.extension-controlled-disabled {
  -moz-context-properties: fill, fill-opacity, stroke-opacity;
  color: GrayText;
  fill: currentColor;
  fill-opacity: 1;
  stroke-opacity: 1;
}

.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%;
}

#activeLanguages {
  height: 16em;
}

#activeLanguages > richlistitem {
  padding: 0.3em;
}

#downloadFolder {
  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;
}

#updateApp > .groupbox-body > label {
  margin: 0 0 4px;
}

#updateApp > .groupbox-body > description {
  margin: 0;
}

#updateBox {
  margin-top: 4px;
  margin-bottom: 32px;
}

#updateDeck > hbox > button {
  margin-top: 0;
  margin-bottom: 0;
  margin-inline-end: 0;
}

#updateDeck > hbox > label {
  -moz-box-flex: 1;
}

#manualLink {
  margin-inline-start: 6px !important;
}

#updateRadioGroup > radio {
  height: 30px;
  margin: 2px 0;
}

#filter {
  margin: 4px 0 8px;
}

#handlersView {
  height: 25em;
  margin-inline-end: 0;
}

#handlersView > richlistitem {
  min-height: 30px !important;
}

#handlersView > richlistitem > hbox > hbox > menulist {
  margin-top: 0;
  margin-bottom: 0;
  margin-inline-end: 0;
  min-height: 0;
}

.typeIcon {
  margin-inline-start: 10px !important;
  margin-inline-end: 9px !important;
}

.actionIcon {
  margin-inline-start: 11px !important;
  margin-inline-end: 8px !important;
}

.actionsMenu {
  min-height: 36px;
}

.actionsMenu > menupopup > menuitem {
  padding-inline-start: 10px !important;
}

.actionsMenu > menupopup > menuitem > .menu-iconic-left {
  margin-inline-end: 8px !important;
}

/* Home Pane */
#homepageGroup > .groupbox-title {
  /* The Restore Defaults button will make this heading taller than the other
   * sections, so lower the top margin to account for it. */
  margin-top: 6px;
}
#homepageGroup menulist,
#homepageGroup textbox {
  margin: 5px 0;
}
#homepageAndNewWindowsOption {
  margin-top: 20px;
}
#homepageGroup:-moz-locale-dir(rtl) input {
  unicode-bidi: plaintext;
  direction: rtl;
}
.homepage-button:first-of-type {
  margin-inline-start: 0;
}
.homepage-button:last-of-type {
  margin-inline-end: 0;
}

/* 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/in-content/check.svg");
  -moz-context-properties: fill, stroke;
  fill: #2292d0;
  stroke: none;
  width: 21px;
  height: 21px;
}

#engineList > treechildren::-moz-tree-image(engineShown, checked, selected),
#blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked, selected) {
  fill: white;
  stroke: #0095dd;
}

#engineList > treechildren::-moz-tree-row,
#blocklistsTree > treechildren::-moz-tree-row {
  min-height: 36px;
}

#selectionCol {
  min-width: 26px;
}

#addEnginesBox {
  margin: 4px 0 0;
}

/* Privacy Pane */

#formAutofillGroup {
  margin-top: 28px;
}

.doNotTrackLearnMore {
  margin-inline-start: calc(1em + 30px);
  margin-bottom: 1em;
  font-weight: normal;
}

.doNotTrackLearnMore > label {
  font-size: 1em !important;
  margin-left: 0;
}

#locationBarGroup > .text-link {
  margin-top: 6px;
  line-height: 30px;
}

#allowSmartSize {
  margin-top: 0;
  margin-bottom: 4px;
}

#trackingProtectionBox {
  margin-top: 16px;
}

#doNotTrackLearnMoreBox {
  margin-top: 32px;
}

#trackingProtectionAdvancedSettings {
  margin-inline-start: 15px;
}

#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 {
  visibility: collapse;
}

#weavePrefsDeck > vbox > label,
#weavePrefsDeck > vbox > groupbox,
#weavePrefsDeck > vbox > description,
#weavePrefsDeck > #hasFxaAccount > vbox > label,
#weavePrefsDeck > #hasFxaAccount > hbox > label {
  /* no margin-inline-start for elements at the beginning of a line */
  margin-inline-start: 0;
}

#weavePrefsDeck > vbox > groupbox {
  margin-top: 16px;
}

#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;
}

/**
 * Dialog
 */

.dialogOverlay {
  visibility: hidden;
}

.dialogOverlay[topmost="true"] {
  background-color: rgba(0,0,0,0.5);
}

.dialogBox {
  background-color: #fbfbfb;
  background-clip: content-box;
  color: #424e5a;
  /* `transparent` will use the dialogText color in high-contrast themes and
     when page colors are disabled */
  border: 1px solid transparent;
  border-radius: 3.5px;
  box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3);
  display: -moz-box;
  margin: 0;
  padding: 0;
}

.dialogBox[resizable="true"] {
  resize: both;
  overflow: hidden;
  min-height: 20em;
  min-width: 66ch;
}

.dialogBox > .groupbox-title {
  margin-top: 0;
  padding: 3.5px 0;
  background-color: #F1F1F1;
  border-bottom: 1px solid #C1C1C1;
}

.dialogTitle {
  font-size: .9em;
  text-align: center;
  -moz-user-select: none;
}

.close-icon {
  border: none;
  background: none !important;
  min-width: 0;
  min-height: auto;
}

.dialogBox > .groupbox-body {
  -moz-appearance: none;
  padding: 20px;
}

.dialogFrame {
  -moz-box-flex: 1;
  /* Default dialog dimensions */
  width: 66ch;
}

.largeDialogContainer.doScroll {
  overflow-y: auto;
  -moz-box-flex: 1;
}

/**
 * End Dialog
 */

/**
 * Font group and font dialog menulist fixes
 */

#defaultFont {
  width: 25ch;
}

#defaultFontType,
#serif,
#sans-serif,
#monospace {
  min-width: 30ch;
}

/**
 * Sync
 */

.fxaProfileImage {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid transparent;
  list-style-image: url("chrome://browser/skin/preferences/in-content/fxa-avatar.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-top: 46px;
  margin-bottom: 64px;
}

#fxaSyncComputerName {
  margin-inline-start: 0;
  margin-bottom: 4px;
}

#fxaChangeDeviceName {
  margin-top: 4px;
  margin-bottom: 4px;
}

#tosPP-small {
  margin-top: 32px;
}

#tosPP-small-ToS {
  margin-bottom: 14px;
}

#noFxaCaption {
  line-height: 30px;
  margin-top: 0;
  margin-bottom: 4px;
}

#noFxaSignIn {
  margin-inline-start: 8px;
}

.fxaSyncIllustration {
  list-style-image: url("chrome://browser/skin/preferences/in-content/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://browser/skin/warning.svg);
  margin-inline-start: 4px;
  margin-inline-end: 8px;
}

#fxaSyncEngines > vbox > checkbox {
  max-width: 224px;
}

.fxaMobilePromo {
  margin-top: 2px !important;
}

.androidIcon,
.iOSIcon {
  margin-inline-start: 2px;
  margin-inline-end: 4px;
  width: 20px;
  height: 20px;
  vertical-align: text-bottom;
  -moz-context-properties: fill;
  fill: currentColor;
}

#updateDeck > hbox > label {
  margin-inline-end: 5px ! important;
}

.update-throbber {
  width: 16px;
  min-height: 16px;
  margin-inline-end: 8px;
  margin-top: 7px;
  margin-bottom: 7px;
  list-style-image: url("chrome://global/skin/icons/loading.png");
}

@media (min-resolution: 1.1dppx) {
  .update-throbber {
    list-style-image: url("chrome://global/skin/icons/loading@2x.png");
  }
}

.navigation {
  overflow-x: hidden;
  overflow-y: auto;
}

.navigation > .help-button {
  margin-bottom: 36px;
  padding: 1px; /* Adding padding around help label in order to make entire keyboard focusing outline visible */
}

.help-button > .text-link {
  -moz-box-flex: 1;
  margin-inline-start: 34px;
  margin-inline-end: 0;
  text-decoration: none;
  color: currentColor;
  width: 36px;
  height: 36px;
  cursor: default;
}

.help-button > .text-link:hover {
  background-color: var(--in-content-category-background-hover);
  border-radius: 2px;
}

.help-button > .text-link:hover:active:not([disabled]) {
  background-color: var(--in-content-category-background-active);
}

.help-button > .text-link:-moz-focusring {
  outline: var(--in-content-category-outline-focus);
}

.help-icon {
  list-style-image: url("chrome://global/skin/icons/help.svg");
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  width: 16px;
  height: 16px;
  margin: 10px;
  margin-inline-start: 13px;
  vertical-align: middle;
}

.help-icon:hover {
  fill: currentColor !important;
}

.help-label {
  margin: 0 4px;
  font-size: .9em;
  -moz-user-select: none;
}

@media (max-width: 830px) {
  .help-button > .text-link {
    -moz-box-flex: 0;
    width: 36px;
    height: 36px;
    margin-inline-start: 0;
  }

  .help-icon {
    margin: 10px;
  }

  .help-label {
    display: none;
  }
}

.face-sad {
  list-style-image: url("chrome://browser/skin/preferences/in-content/face-sad.svg");
  width: 20px;
  height: 20px;
  margin-inline-end: 8px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.face-smile {
  list-style-image: url("chrome://browser/skin/preferences/in-content/face-smile.svg");
  width: 20px;
  height: 20px;
  margin-inline-end: 8px;
  margin-top: 5px;
  margin-bottom: 5px;
}

#policies-container,
#searchInput {
  min-height: 32px;
  margin: 20px 0 30px 0px;
}

#policies-container {
  background-color: #ededf0;
  padding: 0px 8px;
  margin-inline-end: 16px;
  border-radius: 2px;
}

.info-icon {
  list-style-image: url("chrome://browser/skin/identity-icon.svg");
  fill: currentColor;
  -moz-context-properties: fill;
  width: 16px;
  height: 16px;
  margin-top: calc((32px - 16px) / 2);
}

.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-left: -4px;
  margin-right: -4px;
  padding-left: 4px;
  padding-right: 4px;
  font-size: 85%;
}

#searchInput .textbox-search-icons:not([selectedIndex="1"]) {
  display: none;
}

.search-tooltip {
  max-width: 150px;
  font-size: 1.25rem;
  position: absolute;
  padding: 0 10px;
  background-color: #ffe900;
  border: 1px solid #d7b600;
  bottom: 36px;
  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);
}

.search-tooltip::after {
  position: absolute;
  content: "";
  border: 6px solid transparent;
  border-top-color: #ffe900;
  top: 100%;
  inset-inline-start: calc(50% - 6px);
}

.search-tooltip-parent {
  position: relative;
}

.search-tooltip > span {
  -moz-user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.visually-hidden {
  visibility: collapse;
}

menulist {
  height: 30px;
  margin-top: 4px;
  margin-bottom: 4px;
}

menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left {
  display: -moz-box;
  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/in-content/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;
}

.no-results-image-container {
  margin-top: 64px;
}

.no-results-image {
  list-style-image: url("chrome://browser/skin/preferences/in-content/no-search-results.svg");
  width: 380px;
  height: 293px;
}

#no-results-message[query*=🔥🦊] {
  background-image: url("chrome://browser/skin/preferences/in-content/critters-postcard.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#no-results-message[query*=🔥🦊] > .no-results-container {
  visibility: hidden;
}

/* Proxy port input */

.proxy-port-input {
  width: calc(5ch + 22px); /* 5 chars + 11px padding on both sides */
}

#defaultBrowserLanguage {
  min-width: 20em;
}