Source code
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
:host {
display: block;
}
moz-card::part(heading) {
margin: 0;
font-size: var(--font-size-large);
font-weight: var(--font-weight-bold);
}
.theme-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-medium);
padding: var(--space-small);
}
.theme-card {
--box-padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
theme-preview img {
display: block;
aspect-ratio: 680 / 92;
object-fit: cover;
/* Increasing the image width a bit over the full card size to avoid
* the preview image to leave a small white space between the theme
* preview image and the card border */
width: 101%;
/* Border bottom box to show more clearly where the preview images ends
* as shown in the UX specs (especially needed for Nova themes for which
* the toolbar color is exactly the same as the theme card background
* color). */
border-bottom: var(--border-width) solid var(--border-color-deemphasized);
}
.theme-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-small);
padding: var(--space-small) var(--space-medium);
/* Keep the card footer height unchanged on the theme card without a moz-button
* (the default theme when enabled doesn't have a Disable button because it can't
* be disabled, another theme should be enabled instead) */
flex: 1;
}
.theme-name {
font-size: var(--font-size-root);
}
.expand-toggle {
align-self: center;
}