revite/src/components/common/messaging/attachments/Attachment.module.scss
bree 02bbf78dcd
Fix: attachment scaling and better image scaling
- attachment scaling now works for all forms of attachments
- switched to grid based action bar
- added onLoad class so image proportions are "trimmed" once the image has loaded to avoid moving the view around before loading
  - this may be possible to remove at some point
2021-07-05 04:32:05 -04:00

156 lines
3 KiB
SCSS

.attachment {
display: grid;
grid-auto-columns: min(100%, 480px);
grid-auto-flow: row dense;
width: max-content;
border-radius: 6px;
margin: .125rem 0 .125rem;
&[data-spoiler="true"] {
filter: blur(30px);
pointer-events: none;
}
&[data-has-content="true"] {
margin-top: 4px;
}
&.image {
cursor: pointer;
max-height: 640px;
max-width: min(480px, 100%);
object-fit: contain;
&.loaded {
width: auto;
height: auto;
}
}
&.video {
.actions {
padding: 10px 12px;
border-radius: 6px 6px 0 0;
}
video {
border-radius: 0 0 6px 6px;
max-height: 640px;
max-width: min(480px, 100%);
}
video.loaded {
width: auto;
height: auto;
}
}
&.audio {
gap: 4px;
padding: 6px;
display: flex;
border-radius: 6px;
flex-direction: column;
background: var(--secondary-background);
max-width: 400px;
> audio {
width: 100%;
}
}
&.file {
> div {
width: 400px;
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 download" auto
"size icon download" auto
/ minmax(20px, 1fr) min-content min-content;
}
.actions {
display: grid;
grid-template:
"icon name download" auto
"icon size download" auto
/ min-content minmax(20px, 1fr) min-content;
align-items: center;
column-gap: 8px;
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;
}
.iconType {
grid-area: icon;
}
}