102 lines
1.9 KiB
SCSS
102 lines
1.9 KiB
SCSS
.attachment {
|
|
display: grid;
|
|
grid-auto-flow: row dense;
|
|
grid-auto-columns: min(100%, var(--attachment-max-width));
|
|
|
|
margin: 0.125rem 0 0.125rem;
|
|
width: max-content;
|
|
max-width: 100%;
|
|
|
|
&[data-spoiler="true"] {
|
|
filter: blur(30px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
&.audio {
|
|
gap: 4px;
|
|
padding: 6px;
|
|
display: flex;
|
|
max-width: 100%;
|
|
flex-direction: column;
|
|
width: var(--attachment-default-width);
|
|
background: var(--secondary-background);
|
|
|
|
> audio {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&.file {
|
|
> div {
|
|
padding: 12px;
|
|
max-width: 100%;
|
|
user-select: none;
|
|
width: fit-content;
|
|
border-radius: var(--border-radius);
|
|
width: var(--attachment-default-width);
|
|
}
|
|
}
|
|
|
|
&.text {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
grid-auto-columns: unset;
|
|
max-width: var(--attachment-max-text-width);
|
|
|
|
.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(--monospace-font), sans-serif;
|
|
}
|
|
|
|
&[data-loading="true"] {
|
|
display: flex;
|
|
|
|
> * {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.margin {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
width: fit-content;
|
|
|
|
> :first-child {
|
|
width: min(var(--attachment-max-width), 100%, var(--width));
|
|
}
|
|
}
|
|
|
|
.container,
|
|
.attachment,
|
|
.image {
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.image {
|
|
cursor: pointer;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
&.loading {
|
|
background: var(--background);
|
|
}
|
|
}
|