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 {
--theme-card-border-radius: 10px;
--preview-image-border-radius: 9px;
--theme-card-border-width: 2px;
}
moz-card {
--card-padding: 0;
}
.theme-card {
width: 120px;
border-radius: var(--theme-card-border-radius);
border-color: var(--border-color-interactive);
box-shadow: none;
&:hover {
background-color: var(--button-background-color-hover);
}
&:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
}
.theme-content {
display: flex;
flex-direction: column;
}
.img-holder {
width: 100%;
height: 40px;
border-top-left-radius: var(--preview-image-border-radius);
border-top-right-radius: var(--preview-image-border-radius);
> img {
-moz-context-properties: fill, stroke, fill-opacity;
width: 100%;
border-top-left-radius: var(--preview-image-border-radius);
border-top-right-radius: var(--preview-image-border-radius);
}
}
.theme-name {
display: flex;
align-items: center;
padding-inline-start: var(--space-medium);
padding-block: var(--space-small);
border-inline-width: var(--theme-card-border-width);
border-block-end-width: var(--theme-card-border-width);
border-block-start: var(--card-border);
}
:host([selected]) .theme-card {
border-color: var(--focus-outline-color);
}