Quelle  aboutaddons.css   Sprache: unbekannt

/* 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/. */

:root {
  --addon-icon-size: 32px;
  --main-margin-start: 28px;
  --sidebar-width: var(--size-sidebar);
  --z-index-sticky-container: 5;
  --z-index-popup: 10;
}

@media (max-width: 950px) {
  :root {
    --main-margin-start: 16px;
    /* Maintain a main margin so card shadows don't overlap the sidebar. */
    --sidebar-width: calc(var(--size-sidebar-narrow) - var(--main-margin-start));
  }
}

*|*[hidden] {
  display: none !important;
}

body {
  cursor: default;
  /* The page starts to look really bad lower than this. */
  min-width: var(--size-layout-xlarge);
}

h1 {
  font-size: var(--font-size-xlarge);
}

h2 {
  font-size: var(--font-size-large);
}

#full {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
}

#sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden auto;
}

.category-badge {
  min-width: var(--dimension-20);
  background-color: var(--color-accent-primary);
  color: var(--button-text-color-primary);
  font-weight: var(--font-weight-bold);
  /* Use a large border-radius to get semi-circles on the sides. */
  border-radius: var(--border-radius-circle);
  padding: var(--space-xxsmall) var(--space-small);
  text-align: center;
  margin-inline-start: auto;
}

.sticky-container {
  background: var(--background-color-canvas);
  width: 100%;
  position: sticky;
  top: 0;
  z-index: var(--z-index-sticky-container);
}

.main-search {
  background: var(--background-color-canvas);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-inline-start: 28px;
  padding-top: 20px;
  padding-bottom: var(--space-small);
  max-width: var(--page-main-content-width);
}

search-addons {
  display: inline-flex;

  > moz-input-search {
    width: 20em;
  }

  > moz-button {
    margin-inline-start: var(--space-xsmall);
  }
}

.search-label {
  margin-inline-end: 8px;
}

.main-heading {
  background: var(--background-color-canvas);
  display: flex;
  margin-inline-start: var(--main-margin-start);
  padding-bottom: 16px;
  max-width: var(--page-main-content-width);
}

.spacer {
  flex-grow: 1;
}

#updates-message {
  display: flex;
  align-items: center;
  margin-inline-end: 8px;
}

.back-button {
  margin-inline-end: 16px;
}

/* Plugins aren't yet disabled by safemode (bug 342333),
   so don't show that warning when viewing plugins. */
#page-header[current-param="plugin"] moz-message-bar[warning-type="safe-mode"] {
  display: none;
}

#main {
  margin-inline-start: var(--main-margin-start);
  margin-bottom: 28px;
  max-width: var(--page-main-content-width);
}

global-warnings {
  margin-inline-start: var(--main-margin-start);
  max-width: var(--page-main-content-width);
}

/* The margin between message bars. */
message-bar-stack > * {
  margin-bottom: 8px;
}

/* List sections */

.list-section-heading {
  margin-bottom: 16px;
}

.list-section-subheading {
  font-size: 0.9em;
  font-weight: normal;
  margin-block-start: 0.5em;
}

.section {
  margin-bottom: 32px;
}

/* Add-on cards */

.addon.card {
  margin-bottom: 16px;
  transition:
    opacity 150ms,
    box-shadow 150ms;
  overflow: hidden;

  & .addon-name-link {
    transition: color 150ms;
  }
}

addon-list:not([type="theme"]) addon-card:not([expanded]):not([panelopen]) > .addon.card[active="false"]:not(:focus-within):not(:hover) {
  opacity: 0.6;
}

.addon.card:hover {
  box-shadow: var(--card-box-shadow);
}

addon-card:not([expanded]) > .addon.card:hover {
  box-shadow: var(--card-box-shadow-hover);
  cursor: pointer;

  & .addon-name-link {
    color: var(--link-color);
  }
}

addon-card[expanded] .addon.card {
  padding-bottom: 0;
}

.addon-card-collapsed {
  display: flex;
}

addon-list addon-card > .addon.card {
  user-select: none;
}

.addon-card-message,
.update-postponed-bar {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin: 8px calc(var(--card-padding) * -1) calc(var(--card-padding) * -1);
}

addon-card[expanded] .addon-card-message,
addon-card[expanded] .update-postponed-bar,
.update-postponed-bar:has(+ .addon-card-message:not([hidden])) {
  border-radius: 0;
  margin-bottom: 0;
}

.update-postponed-bar:has(+ .addon-card-message:not([hidden])) {
  border-bottom: none;
}

.update-postponed-bar:not([hidden]) + .addon-card-message {
  /* Remove margin between the two message bars when they are both
   * visible at the same time. */
  margin-top: 0;
}

/* Theme preview image. */
.card-heading-image {
  /* If the width, height or aspect ratio changes, don't forget to update the
   * getScreenshotUrlForAddon function in aboutaddons.js */
  width: var(--page-main-content-width);
  /* Adjust height so that the image preserves the aspect ratio from AMO.
   * For details, see https://bugzilla.mozilla.org/show_bug.cgi?id=1546123 */
  height: calc(var(--page-main-content-width) * 92 / 680);
  object-fit: cover;
}

.card-heading-icon {
  flex-shrink: 0;
  width: var(--addon-icon-size);
  height: var(--addon-icon-size);
  margin-inline-end: 16px;
  -moz-context-properties: fill;
  fill: currentColor;
}

.card-contents {
  word-break: break-word;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.addon-name-container {
  /* Subtract the top line-height so the text and icon align at the top. */
  margin-top: -3px;
  display: flex;
  align-items: center;
}

.addon-name {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: 22px;
  margin: 0;
  margin-inline-end: 8px;
}

.addon-name-link,
.addon-name-link:hover {
  color: var(--text-color);
  text-decoration: none;
}

.addon-name-link:-moz-focusring {
  /* Since the parent is overflow:hidden to ellipsize the regular outline is hidden. */
  outline-offset: -1px;
  outline-width: 1px;
}

.addon-badge {
  display: inline-block;
  margin-inline-end: 8px;
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  border-radius: 11px;
  -moz-context-properties: fill;
}

.addon-badge-private-browsing-allowed {
  background-image: url("chrome://global/skin/icons/indicator-private-browsing.svg");
  /* This unusual value makes the badge the same size as the other badges. */
  background-size: 23px;
}

.addon-badge-recommended,
.addon-badge-line {
  border: 1px solid #cfcfd8;
  width: 20px;
  height: 20px;

  @media (prefers-color-scheme: dark) {
    border-color: #3a3944;
  }
}

.addon-badge-recommended {
  background-image: url("chrome://global/skin/icons/trophy.svg");
  background-size: 14px;
  /* This color will be removed once the icons are updated for Nova. */
  /* stylelint-disable-next-line stylelint-plugin-mozilla/no-base-design-tokens */
  fill: #ff9400;
}

.addon-badge-line {
  background-image: url("chrome://mozapps/skin/extensions/line.svg");
  background-size: 16px;
}

.addon-badge-verified {
  background-color: var(--icon-color-success);
  background-image: url("chrome://global/skin/icons/check.svg");
  fill: var(--background-color-canvas);
}

.theme-enable-button {
  padding-inline: var(--space-small);
}

.addon-description {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-color-deemphasized);
  font-weight: normal;
}

/* Prevent the content from wrapping unless expanded. */
addon-card:not([expanded]) .card-contents {
  /* We're hiding the content when it's too long, so we need to define the
   * width. As long as this is less than the width of its parent it works. */
  width: 1px;
  white-space: nowrap;
}

/* Ellipsize if the content is too long. */
addon-card:not([expanded]) .addon-name,
addon-card:not([expanded]) .addon-description {
  text-overflow: ellipsis;
  overflow-x: hidden;
}

.page-options-menu {
  align-self: center;
}

/* Recommended add-ons on list views */
.recommended-heading {
  margin-bottom: 24px;
  margin-top: 48px;
}

/* Discopane extensions to the add-on card */

recommended-addon-card .addon-description:not(:empty) {
  margin-top: 0.5em;
}

.disco-card-head {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.disco-addon-name {
  font-size: inherit;
  font-weight: normal;
  line-height: normal;
  margin: 0;
}

.disco-addon-author {
  font-size: 12px;
  font-weight: normal;
}

.disco-description-statistics {
  margin-top: 1em;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  grid-column-gap: 2em;
  align-items: center;
}

.disco-cta-button {
  font-size: 14px;
  flex-shrink: 0;
  flex-grow: 0;
  align-self: baseline;
  margin-inline-end: 0;
}

.discopane-notice {
  margin: 24px 0;
}

.view-footer {
  text-align: center;
}

.view-footer-item {
  margin-top: 30px;
}

.privacy-policy-link {
  font-size: small;
}

.theme-recommendation {
  text-align: start;
}

addon-details {
  color: var(--text-color-deemphasized);
}

.addon-detail-description-wrapper {
  margin: 16px 0;
  overflow-wrap: break-word;
}

.addon-detail-description-collapse .addon-detail-description {
  max-height: 20rem;
  overflow: hidden;
}

/* Include button to beat out .button-link which is below this */
button.addon-detail-description-toggle {
  display: flex;
  align-items: center;
  margin-top: 8px;
  font-weight: normal;
  gap: 4px;
}

.addon-detail-description-toggle::after {
  content: "";
  display: block;
  background-image: url("chrome://global/skin/icons/arrow-up-12.svg");
  background-repeat: no-repeat;
  background-position: center;
  -moz-context-properties: fill;
  fill: currentColor;
  width: 12px;
  height: 12px;
}

.addon-detail-description-collapse .addon-detail-description-toggle::after {
  transform: scaleY(-1);
}

.addon-detail-contribute {
  display: flex;
  padding: var(--card-padding);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-small);
  margin-bottom: var(--card-padding);
  flex-direction: column;
}

.addon-detail-contribute > label {
  font-style: italic;
}

.addon-detail-contribute-button {
  -moz-context-properties: fill;
  fill: currentColor;
  background-image: url("chrome://global/skin/icons/heart.svg");
  background-repeat: no-repeat;
  background-position: 8px;
  padding-inline-start: 28px;
  margin-top: var(--card-padding);
  margin-bottom: 0;
  align-self: flex-end;
}

.addon-detail-contribute-button:dir(rtl) {
  background-position-x: right 8px;
}

.addon-detail-sitepermissions,
.addon-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-color);
  margin: 0 calc(var(--card-padding) * -1);
  padding: var(--card-padding);
  color: var(--text-color);
}

.addon-detail-row.addon-detail-help-row {
  display: block;
  color: var(--text-color-deemphasized);
  padding-top: 4px;
  padding-bottom: var(--card-padding);
  border: none;
}

.addon-detail-row-has-help {
  padding-bottom: 0;
}

.addon-detail-row input[type="checkbox"] {
  margin: 0;
}

.addon-detail-actions,
.addon-detail-rating {
  display: flex;
}

.addon-detail-actions {
  gap: 20px;
}

.addon-detail-actions > label {
  flex-wrap: wrap;
}

.addon-detail-rating > a {
  margin-inline-start: 8px;
}

addon-card .more-options-button {
  margin-inline-start: var(--space-small);
  /* Override the attention badge color to match the one used by the
   * "Available Updates" badge shown in the sidebar. */
  --button-attention-dot-color: var(--color-accent-primary);
}

panel-item[action="remove"]::part(button) {
  background-image: url("chrome://global/skin/icons/delete.svg");
}

panel-item[action="install-update"]::part(button) {
  background-image: url("chrome://global/skin/icons/update-icon.svg");
}

panel-item[action="report"]::part(button) {
  background-image: url(chrome://global/skin/icons/warning.svg);
}

.hide-amo-link .amo-link-container {
  display: none;
}

.button-link {
  min-height: auto;
  background: none !important;
  padding: 0;
  margin: 0;
  color: var(--link-color) !important;
  cursor: pointer;
  border: none;
}

.button-link:hover {
  color: var(--link-color-hover) !important;
  text-decoration: underline;
}

.button-link:active {
  color: var(--link-color-active) !important;
  text-decoration: none;
}

.addon-inline-options {
  width: 100%;
  background-color: Canvas;
  margin-block: 4px;
  /*
   * Makes sure the browser minimal height is going to be the same as when
   * this browser element was wrapper in a stack and a min-height was necessary
   * for the prompts to fit inside the browser element.
   * That stack element has been removed as part of Bug 1881055, but keeping
   * the min-height unchanged to avoid potential regressions in the short term.
   */
  min-height: 250px;

  /* Setting display to grid to prevent the inline options page browser element
   * from hitting the regression tracked by Bug 1939206. */
  display: grid;
}

addon-permissions-list > .addon-detail-row {
  border-top: none;
}

.addon-permissions-list {
  list-style-type: none;
  margin: 0;
  padding-inline-start: var(--space-small);
}

.addon-permissions-list > li {
  border: none;
  padding-block: var(--space-xsmall);
  background-image: none;
  background-repeat: no-repeat;
  word-break: break-all;

  .addon-permissions-required &.permission-checked {
    list-style-type: disc;
    /* Align the list with the rest of the page, and use `list-style-position:
     * outside` to keep long string correctly wrapped. */
    margin-inline-start: 1em;
  }

  .addon-permissions-optional &,
  .addon-data-collection-permissions-optional & {
    padding-inline-start: 0;

    moz-toggle > moz-message-bar {
      /* decrease from default --space-large to appear closer to the permission
       * message. Otherwise it is closer to the next permission than the
       * permission associated with the toggle. */
      margin-block-start: var(--space-small);
    }
  }
}

.permission-header,
.permission-subheader {
  font-size: 1em;
  margin: 0;
}

.addon-permissions-list-wrapper {
  color: var(--text-color);
  padding: var(--space-large) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-small);
}

.permission-subsection {
  padding-bottom: var(--space-xsmall);
}

addon-permissions-list .addon-permissions-list-wrapper:not(:first-child) {
  border-top: 1px solid var(--border-color);
}

.tab-group {
  display: block;
  margin-top: 8px;
  /* Pull the buttons flush with the side of the card */
  margin-inline: calc(var(--card-padding) * -1);
  border-bottom: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color);
  font-size: 0;
  line-height: 0;
}

button.tab-button {
  appearance: none;
  border-inline: none;
  border-block: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  padding: 4px 16px;
}

button.tab-button:hover {
  border-top-color: var(--border-color);
}

button.tab-button[selected],
button.tab-button[selected]:hover {
  border-top-color: currentColor;
  color: var(--color-accent-primary);
}

@media (prefers-contrast) {
  button.tab-button[selected],
  button.tab-button[selected]:hover {
    color: var(--button-text-color-primary);
    background-color: var(--button-background-color-primary);
  }
}

button.tab-button:-moz-focusring {
  outline-offset: -2px;
}

.tab-group[last-input-type="mouse"] > button.tab-button:-moz-focusring {
  outline: none;
  box-shadow: none;
}

section:not(:empty) ~ #empty-addons-message {
  display: none;
}

.permission-header > .addon-sitepermissions-host {
  font-weight: var(--font-weight-bold);
}

/* Position the badged dot in the top-end (right in ltr, left in rtl)
 * corner of the badged category icon. */
@media (max-width: 950px) {
  moz-page-nav-button {
    position: relative;
  }

  moz-page-nav-button[badged-category]::after {
    content: "";
    position: absolute;
    top: var(--space-xsmall);
    inset-inline-end: var(--space-xsmall);
    display: block;
    width: 5px;
    height: 5px;
    border-radius: var(--border-radius-circle);
    background-color: var(--color-accent-primary);
  }
}