Plex-Meta-Manager/docs/stylesheets/cards.css
2023-12-31 11:45:00 -05:00

121 lines
2.1 KiB
CSS

.nt-cards {
&.nt-grid {
display: grid;
grid-auto-columns: 1fr;
gap: 0.5rem;
// the following 3 rules are for mobile devices, to avoid
// the grid forcing the width of the page
max-width: 100vw;
overflow-x: auto;
padding: 1px;
&.cols-1 {
grid-template-columns: repeat(1, 1fr);
}
&.cols-2 {
grid-template-columns: repeat(2, 1fr);
}
&.cols-3 {
grid-template-columns: repeat(3, 1fr);
}
&.cols-4 {
grid-template-columns: repeat(4, 1fr);
}
&.cols-5 {
grid-template-columns: repeat(5, 1fr);
}
&.cols-6 {
grid-template-columns: repeat(6, 1fr);
}
}
}
// for small devices
@media only screen and (max-width: 400px) {
// force one card per line
.nt-cards.nt-grid {
grid-template-columns: repeat(1, 1fr) !important;
}
}
.nt-card {
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 12%);
&:hover {
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 24%), 0 3px 1px -2px rgb(0 0 0 / 30%), 0 1px 5px 0 rgb(0 0 0 / 22%);
}
}
[data-md-color-scheme="slate"] {
.nt-card {
border: 0.05rem solid var(--md-typeset-table-color);
}
}
.nt-card>a {
color: var(--md-default-fg-color);
}
.nt-card>a>div {
cursor: pointer;
}
.nt-card {
padding: 5px;
margin-bottom: .5rem;
}
.nt-card-title {
font-size: 1rem;
font-weight: bold;
margin: 4px 0 8px 0;
line-height: 22px;
}
.nt-card-content {
padding: .4rem .8rem .8rem .8rem;
}
.nt-card-text {
font-size: 14px;
padding: 0;
margin: 0;
}
.nt-card .nt-card-image {
text-align: center;
border-radius: 2px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
min-height: 120px;
}
.nt-card .nt-card-image.tags img {
margin-top: 12px
}
.nt-card .nt-card-image img {
height: 105px;
margin-top: 5px;
}
.nt-card a:hover,
.nt-card a:focus {
color: var(--md-accent-fg-color);
}
.nt-card h2 {
margin: 0;
}