765 lines
16 KiB
CSS
765 lines
16 KiB
CSS
/* 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;
|
|
--section-width: 664px;
|
|
--sidebar-width: var(--in-content-sidebar-width);
|
|
--z-index-sticky-container: 5;
|
|
--z-index-popup: 10;
|
|
}
|
|
|
|
@media (max-width: 830px) {
|
|
:root {
|
|
--main-margin-start: 16px;
|
|
/* Maintain a main margin so card shadows don't overlap the sidebar. */
|
|
--sidebar-width: calc(var(--in-content-sidebar-width) - var(--main-margin-start));
|
|
}
|
|
}
|
|
|
|
*|*[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
body {
|
|
cursor: default;
|
|
/* The page starts to look really bad lower than this. */
|
|
min-width: 500px;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
@media (prefers-reduced-motion) {
|
|
/* Setting border-inline-end on #sidebar makes it a focusable element */
|
|
#sidebar::after {
|
|
content: "";
|
|
width: 1px;
|
|
height: 100%;
|
|
background-color: var(--in-content-border-color);
|
|
top: 0;
|
|
inset-inline-end: 0;
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
#categories {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-inline-end: 4px; /* Leave space for the button focus styles. */
|
|
}
|
|
|
|
.category {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
margin-block: 0;
|
|
align-items: center;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.category[badge-count]::after {
|
|
display: inline-block;
|
|
min-width: 20px;
|
|
background-color: var(--in-content-accent-color);
|
|
color: var(--in-content-primary-button-text-color);
|
|
font-weight: bold;
|
|
/* Use a large border-radius to get semi-circles on the sides. */
|
|
border-radius: 1000px;
|
|
padding: 2px 6px;
|
|
content: attr(badge-count);
|
|
text-align: center;
|
|
margin-inline-start: 8px;
|
|
grid-column: 2;
|
|
}
|
|
|
|
.category[name="discover"] {
|
|
background-image: url("chrome://mozapps/skin/extensions/category-discover.svg");
|
|
}
|
|
.category[name="locale"] {
|
|
background-image: url("chrome://mozapps/skin/extensions/category-languages.svg");
|
|
}
|
|
.category[name="extension"] {
|
|
background-image: url("chrome://mozapps/skin/extensions/category-extensions.svg");
|
|
}
|
|
.category[name="theme"] {
|
|
background-image: url("chrome://mozapps/skin/extensions/category-themes.svg");
|
|
}
|
|
.category[name="plugin"] {
|
|
background-image: url("chrome://mozapps/skin/extensions/category-plugins.svg");
|
|
}
|
|
.category[name="dictionary"] {
|
|
background-image: url("chrome://mozapps/skin/extensions/category-dictionaries.svg");
|
|
}
|
|
.category[name="available-updates"] {
|
|
background-image: url("chrome://mozapps/skin/extensions/category-available.svg");
|
|
}
|
|
.category[name="recent-updates"] {
|
|
background-image: url("chrome://mozapps/skin/extensions/category-recent.svg");
|
|
}
|
|
.category[name="sitepermission"] {
|
|
background-image: url("chrome://mozapps/skin/extensions/category-sitepermission.svg");
|
|
}
|
|
|
|
.sticky-container {
|
|
background: var(--in-content-page-background);
|
|
width: 100%;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: var(--z-index-sticky-container);
|
|
}
|
|
|
|
.main-search {
|
|
background: var(--in-content-page-background);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding-inline-start: 28px;
|
|
padding-top: 20px;
|
|
padding-bottom: 30px;
|
|
max-width: var(--section-width);
|
|
}
|
|
|
|
search-addons > search-textbox {
|
|
margin: 0;
|
|
width: 20em;
|
|
min-height: 32px;
|
|
}
|
|
|
|
.search-label {
|
|
margin-inline-end: 8px;
|
|
}
|
|
|
|
.main-heading {
|
|
background: var(--in-content-page-background);
|
|
display: flex;
|
|
margin-inline-start: var(--main-margin-start);
|
|
padding-bottom: 16px;
|
|
max-width: var(--section-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(--section-width);
|
|
}
|
|
|
|
global-warnings {
|
|
margin-inline-start: var(--main-margin-start);
|
|
max-width: var(--section-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: 400;
|
|
margin-block-start: 0.5em;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
/* Add-on cards */
|
|
|
|
.addon.card {
|
|
margin-bottom: 16px;
|
|
transition: opacity 150ms, box-shadow 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-shadow);
|
|
}
|
|
|
|
addon-card:not([expanded]) > .addon.card:hover {
|
|
box-shadow: var(--card-shadow-hover);
|
|
cursor: pointer;
|
|
}
|
|
|
|
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 {
|
|
border-radius: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
addon-card[expanded] .update-postponed-bar + .addon-card-message {
|
|
/* Remove margin between the two message bars when they are both
|
|
* visible in the detail view */
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.update-postponed-bar + .addon-card-message:not([hidden]) {
|
|
/* Prevent the small overlapping between the two message bars
|
|
* when they are both visible at the same time one after the
|
|
* other on the same addon card */
|
|
margin-top: 12px;
|
|
}
|
|
|
|
/* 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(--section-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(--section-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-bold);
|
|
line-height: 22px;
|
|
margin: 0;
|
|
margin-inline-end: 8px;
|
|
}
|
|
|
|
.addon-name-link,
|
|
.addon-name-link:hover {
|
|
color: var(--in-content-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;
|
|
fill: #fff;
|
|
}
|
|
|
|
.addon-badge-private-browsing-allowed {
|
|
background-image: url("chrome://global/skin/icons/indicator-private-browsing.svg");
|
|
}
|
|
|
|
.addon-badge-recommended {
|
|
background-color: var(--orange-50);
|
|
background-image: url("chrome://mozapps/skin/extensions/recommended.svg");
|
|
}
|
|
|
|
.addon-badge-line {
|
|
background-color: #fff;
|
|
background-image: url("chrome://mozapps/skin/extensions/line.svg");
|
|
background-size: 16px;
|
|
border-radius: 10px;
|
|
border: 1px solid #CFCFD8;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.addon-badge-verified {
|
|
background-color: var(--green-70);
|
|
background-image: url("chrome://global/skin/icons/check.svg");
|
|
}
|
|
|
|
.theme-enable-button {
|
|
min-width: auto;
|
|
font-size: var(--font-size-small);
|
|
min-height: auto;
|
|
height: 24px;
|
|
margin: 0;
|
|
padding: 0 8px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.addon-description {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: var(--text-color-deemphasized);
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.page-options-menu > .more-options-button {
|
|
background-image: url("chrome://global/skin/icons/settings.svg");
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.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(--in-content-box-border-color);
|
|
border-radius: 4px;
|
|
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(--in-content-border-color);
|
|
margin: 0 calc(var(--card-padding) * -1);
|
|
padding: var(--card-padding);
|
|
color: var(--in-content-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;
|
|
}
|
|
|
|
.more-options-button {
|
|
min-width: auto;
|
|
min-height: auto;
|
|
width: 24px;
|
|
height: 24px;
|
|
margin: 0;
|
|
margin-inline-start: 8px;
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
background-image: url("chrome://global/skin/icons/more.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
/* Get the -badged ::after element in the right spot. */
|
|
padding: 1px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.more-options-button-badged::after {
|
|
content: "";
|
|
display: block;
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background-color: var(--in-content-accent-color);;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
addon-permissions-list > .addon-detail-row {
|
|
border-top: none;
|
|
}
|
|
|
|
.addon-permissions-list {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding-inline-start: 8px;
|
|
}
|
|
|
|
.addon-permissions-list > li {
|
|
border: none;
|
|
padding-block: 4px;
|
|
padding-inline-start: 2rem;
|
|
background-image: none;
|
|
background-position: 0 center;
|
|
background-size: 1.6rem 1.6rem;
|
|
background-repeat: no-repeat;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.addon-permissions-list > li:dir(rtl) {
|
|
background-position-x: right 0;
|
|
}
|
|
|
|
/* using a list-style-image prevents aligning the image */
|
|
.addon-permissions-list > li.permission-checked {
|
|
background-image: url("chrome://global/skin/icons/check.svg");
|
|
-moz-context-properties: fill;
|
|
fill: var(--green-60);
|
|
}
|
|
|
|
.permission-header {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.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(--in-content-border-color);
|
|
border-top: 1px solid var(--in-content-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(--in-content-box-border-color);
|
|
}
|
|
|
|
button.tab-button[selected],
|
|
button.tab-button[selected]:hover {
|
|
border-top-color: currentColor;
|
|
color: var(--in-content-accent-color);
|
|
}
|
|
|
|
@media (prefers-contrast) {
|
|
button.tab-button[selected],
|
|
button.tab-button[selected]:hover {
|
|
color: var(--in-content-primary-button-text-color);
|
|
background-color: var(--in-content-primary-button-background);
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
@media (max-width: 830px) {
|
|
.category[badge-count]::after {
|
|
content: "";
|
|
display: block;
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
min-width: auto;
|
|
padding: 0;
|
|
/* move the badged dot into the top-end (right in ltr, left in rtl) corner. */
|
|
margin-top: -20px;
|
|
}
|
|
}
|
|
|
|
.permission-header > .addon-sitepermissions-host {
|
|
font-weight: bolder;
|
|
}
|