Customize media markers

This commit is contained in:
2026-04-23 00:15:16 +02:00
parent ef88e600e3
commit 9e4fbe7ad4
4 changed files with 92 additions and 54 deletions

View File

@@ -38,7 +38,7 @@ $thumbnail-max-size: 60px;
font-weight: normal;
font-size: calc(1em / 1.4);
margin-left: 0.5em;
vertical-align: text-bottom;
vertical-align: middle;
}
p {
@@ -50,43 +50,62 @@ $thumbnail-max-size: 60px;
}
}
.medias {
line-height: 0;
display: grid;
gap: var.$elem-spacing;
grid-template-columns: repeat(auto-fill, minmax($thumbnail-max-size, 1fr));
place-items: center;
a.media-link {
img {
width: auto;
height: auto;
image-orientation: from-image;
transition: All 0.2s;
border-radius: var.$block-radius;
}
a {
&:last-child {
margin-right: 0;
&.drill {
font-size: 2em;
.fa-drill-image {
color: transparent;
}
.fa-drill-video {
color: color.$over-img-bg;
}
&.drill {
font-size: 2em;
.fa-drill-image {
color: transparent;
}
.fa-drill-video {
color: color.$over-img-bg;
}
&:hover {
.fa-drill-video, .fa-drill-image {
color: color.$default-bg;
}
&:hover {
.fa-drill-video, .fa-drill-image {
color: color.$default-bg;
}
}
}
}
img {
width: auto;
height: auto;
max-width: $thumbnail-max-size;
max-height: calc($thumbnail-max-size * 2/3);
border-radius: var.$block-radius;
image-orientation: from-image;
transition: All 0.2s;
&.message {
.medias {
line-height: 0;
display: grid;
gap: var.$elem-spacing;
grid-template-columns: repeat(auto-fill, minmax($thumbnail-max-size, 1fr));
place-items: center;
a.media-link {
&:last-child {
margin-right: 0;
}
img {
max-width: $thumbnail-max-size;
max-height: calc($thumbnail-max-size * 2/3);
}
}
}
}
&.media {
.coordinates {
margin: 0;
}
.medias {
a.media-link img {
width: 100%;
}
}
}