abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-06 17:11:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add more internal CSS variables.

Browse Source
This commit is contained in:
Paul
2021-07-10 15:42:13 +01:00
parent e717cb415e
commit 0e43dadbe9
28 changed files with 110 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/common/messaging/attachments/Attachment.module.scss
View File

@@ -1,7 +1,7 @@
.attachment {
display: grid;
grid-auto-columns: min(100%, 480px);
grid-auto-flow: row dense;
grid-auto-columns: min(100%, var(--attachment-max-width));
margin: .125rem 0 .125rem;
width: max-content;
@@ -16,11 +16,10 @@
gap: 4px;
padding: 6px;
display: flex;
border-radius: 6px;
flex-direction: column;
background: var(--secondary-background);
width: 400px;
max-width: 100%;
flex-direction: column;
width: var(--attachment-default-width);
background: var(--secondary-background);
> audio {
width: 100%;
@@ -29,22 +28,20 @@
&.file {
> div {
width: 400px;
max-width: 100%;
padding: 12px;
max-width: 100%;
user-select: none;
width: fit-content;
border-radius: 6px;
border-radius: var(--border-radius);
width: var(--attachment-default-width);
}
}
&.text {
width: 100%;
max-width: 800px;
overflow: hidden;
grid-auto-columns: unset;
border-radius: 6px;
max-width: var(--attachment-max-text-width);
.textContent {
height: 140px;
@@ -83,10 +80,10 @@
width: fit-content;
> :first-child {
width: min(480px, 100%, var(--width));
width: min(var(--attachment-max-width), 100%, var(--width));
}
}
.container, .attachment, .image {
border-radius: 6px;
border-radius: var(--border-radius);
}

4
src/components/common/messaging/attachments/Grid.tsx
View File

@@ -3,8 +3,8 @@ import { Children } from "../../../../types/Preact";
const Grid = styled.div`
display: grid;
max-width: min(480px, 100%, var(--width));
max-height: min(640px, var(--height));
max-width: min(var(--attachment-max-width), 100%, var(--width));
max-height: min(var(--attachment-max-height), var(--height));
aspect-ratio: var(--aspect-ratio);
img, video {