From e591374bb4b7d231fadf99d2e278806e53971919 Mon Sep 17 00:00:00 2001 From: winter Date: Tue, 28 Jan 2025 20:34:49 +0000 Subject: display attachments on notes --- static/note.css | 63 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) (limited to 'static/note.css') diff --git a/static/note.css b/static/note.css index 9b9eb65..0400b21 100644 --- a/static/note.css +++ b/static/note.css @@ -128,6 +128,69 @@ article.note { } } + .attachments { + padding: var(--spacing-single) 0; + display: grid; + grid-template-columns: auto; + grid-template-rows: auto; + grid-auto-flow: row; + width: 100%; + box-sizing: border-box; + gap: var(--spacing-single); + + &:has(:nth-child(2)) { + grid-template-columns: auto auto; + } + &:has(:nth-child(3)) { + grid-template-columns: auto auto auto; + } + &:has(:nth-child(4)) { + grid-template-columns: auto auto; + grid-template-rows: auto auto; + } + &:has(:nth-child(5)) { + grid-template-columns: unset; + grid-template-rows: auto; + grid-auto-flow: column; + } + + > * { + border-radius: var(--border-radius); + overflow: hidden; + display: flex; + &:has(img) { + background: black; + } + } + + img { + width: 100%; + max-height: 16lh; + object-fit: contain; + object-position: center; + } + + a.file { + border: var(--border); + border-radius: var(--border-radius); + background: var(--clr-panel-background); + color: var(--clr-foreground); + text-decoration: none; + padding: var(--spacing-single); + display: grid; + width: 100%; + box-sizing: border-box; + grid-auto-flow: column; + align-items: center; + justify-content: start; + gap: var(--spacing-half); + span { + text-overflow: ellipsis; + overflow: hidden; + } + } + } + .buttons { margin-top: var(--spacing-single); padding: 0; -- cgit v1.3