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;
box-sizing: border-box;
border-radius: var(--theme-card-border-radius);
}
moz-card {
--card-padding: 0;
}
.theme-card {
width: 120px;
border-radius: var(--theme-card-border-radius);
border: none;
box-shadow: none;
&:hover {
background-color: var(--button-background-color-hover);
}
@media (forced-colors) {
&:hover {
border-color: SelectedItem;
.theme-name {
color: SelectedItem;
}
}
:host([checked]) & {
background-color: SelectedItem;
border-color: SelectedItemText;
color: SelectedItemText;
.theme-name {
color: SelectedItemText;
}
}
}
}
.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: block;
padding: var(--space-small) var(--space-medium);
border-inline-width: var(--theme-card-border-width);
border-block-end-width: var(--theme-card-border-width);
border-block-start: var(--card-border);
font-size: var(--font-size-small);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@media (forced-colors) {
color: ButtonText;
}
}