diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/form.css | 14 | ||||
| -rw-r--r-- | static/icons.css | 3 | ||||
| -rw-r--r-- | static/note.css | 63 |
3 files changed, 80 insertions, 0 deletions
diff --git a/static/form.css b/static/form.css index c14b0b7..b309f33 100644 --- a/static/form.css +++ b/static/form.css @@ -63,6 +63,20 @@ form:not(.nopanel):not([hidden]) { &#writeNoteForm { max-width: 100%; + .summaryAndContent { + input:has(+ textarea) { + margin-bottom: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border-bottom: none; + + textarea { + margin-top: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; + } + } + } + .miniProfile { display: grid; grid-template-columns: max-content 1fr; diff --git a/static/icons.css b/static/icons.css index efbf8ca..8d6b7b5 100644 --- a/static/icons.css +++ b/static/icons.css @@ -99,4 +99,7 @@ &.delete-outline { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zM9 17h2V8H9zm4 0h2V8h-2zM7 6v13z'/%3E%3C/svg%3E"); } + &.attach-file { + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 15.75q0 2.6-1.825 4.425T11.75 22t-4.425-1.825T5.5 15.75V6.5q0-1.875 1.313-3.187T10 2t3.188 1.313T14.5 6.5v8.75q0 1.15-.8 1.95t-1.95.8t-1.95-.8t-.8-1.95V6h2v9.25q0 .325.213.538t.537.212t.538-.213t.212-.537V6.5q-.025-1.05-.737-1.775T10 4t-1.775.725T7.5 6.5v9.25q-.025 1.775 1.225 3.013T11.75 20q1.75 0 2.975-1.237T16 15.75V6h2z'/%3E%3C/svg%3E"); + } } 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; |