2024-11-12 19:12:49 +08:00
|
|
|
.MediaAttachmentGrid {
|
|
|
|
|
/* Note: MeidaAttachmentGrid has hard-coded layout calcalation */
|
|
|
|
|
margin-top: 1em;
|
|
|
|
|
margin-left: calc(var(--card-pad, 0) + var(--toot-avatar-size, 0) + 8px);
|
|
|
|
|
margin-right: var(--card-pad, 0);
|
|
|
|
|
gap: 4px;
|
2024-11-18 22:14:59 +08:00
|
|
|
contain: layout style;
|
2024-11-12 19:12:49 +08:00
|
|
|
|
|
|
|
|
> :where(img, video) {
|
|
|
|
|
max-height: 35vh;
|
|
|
|
|
min-height: 40px;
|
|
|
|
|
min-width: 40px;
|
|
|
|
|
object-fit: contain;
|
|
|
|
|
max-width: 100%;
|
2024-11-18 23:31:47 +08:00
|
|
|
background-color: var(--media-color-accent, var(--tutu-color-surface-d));
|
2024-11-12 19:12:49 +08:00
|
|
|
border-radius: 2px;
|
|
|
|
|
border: 1px solid var(--tutu-color-surface-d);
|
|
|
|
|
transition: outline-width 60ms var(--tutu-anim-curve-std), border-color 60ms var(--tutu-anim-curve-std);
|
|
|
|
|
contain: strict;
|
|
|
|
|
content-visibility: auto;
|
|
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
|
&:focus-visible {
|
|
|
|
|
outline: 8px solid var(--media-color-accent, var(--tutu-color-surface-d));
|
|
|
|
|
border-color: var(--media-color-accent, var(--tutu-color-surface-d));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
