revite/src/components/common/messaging/attachments/Attachment.module.scss

171 lines
3.3 KiB
SCSS

.attachment {
display: grid;
grid-auto-columns: min(100%, 480px);
grid-auto-flow: row dense;
width: max-content;
max-width: 100%;
border-radius: 6px;
margin: .125rem 0 .125rem;
&[data-spoiler="true"] {
filter: blur(30px);
pointer-events: none;
}
&[data-has-content="true"] {
margin-top: 4px;
}
&.image, &.video > video {
cursor: pointer;
aspect-ratio: var(--width) / var(--height);
max-height: min(640px, var(--height-px));
max-width: min(480px, 100%, var(--width-px));
object-fit: contain;
}
&.image {
&.long {
width: min(100%, var(--width-px));
height: auto;
}
&.tall {
height: min(100%, var(--height-px));
width: auto;
}
}
&.video {
.actions {
padding: 10px 12px;
border-radius: 6px 6px 0 0;
}
video {
border-radius: 0 0 6px 6px;
&.long {
height: auto;
}
&.tall {
width: auto;
}
}
}
&.audio {
gap: 4px;
padding: 6px;
display: flex;
border-radius: 6px;
flex-direction: column;
background: var(--secondary-background);
width: 400px;
max-width: 100%;
> audio {
width: 100%;
}
}
&.file {
> div {
width: 400px;
max-width: 100%;
padding: 12px;
user-select: none;
width: fit-content;
border-radius: 6px;
}
}
&.text {
width: 100%;
max-width: 800px;
overflow: hidden;
grid-auto-columns: unset;
border-radius: 6px;
.textContent {
height: 140px;
padding: 12px;
overflow-x: auto;
overflow-y: auto;
border-radius: 0 !important;
background: var(--secondary-header);
pre {
margin: 0;
}
pre code {
font-family: var(--monoscape-font), sans-serif;
}
&[data-loading="true"] {
display: flex;
> * {
flex-grow: 1;
}
}
}
}
}
.actions.imageAction {
grid-template:
"name icon external download" auto
"size icon external download" auto
/ minmax(20px, 1fr) min-content min-content;
}
.actions {
display: grid;
grid-template:
"icon name external download" auto
"icon size external download" auto
/ min-content minmax(20px, 1fr) min-content;
align-items: center;
column-gap: 12px;
width: 100%;
padding: 8px;
overflow: none;
color: var(--foreground);
background: var(--secondary-background);
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.filesize {
grid-area: size;
font-size: 10px;
color: var(--secondary-foreground);
}
.downloadIcon {
grid-area: download;
}
.externalType {
grid-area: external;
}
.iconType {
grid-area: icon;
}
}