diff options
Diffstat (limited to 'css/microblog.css')
| -rw-r--r-- | css/microblog.css | 107 |
1 files changed, 106 insertions, 1 deletions
diff --git a/css/microblog.css b/css/microblog.css index 1bc41be..e6a657a 100644 --- a/css/microblog.css +++ b/css/microblog.css @@ -14,6 +14,12 @@ html { color: var(--text-color); } +img { + display: block; + max-width: 100%; + height: auto; +} + .wrap { width: min(95%, 40rem); margin: 2rem auto; @@ -37,6 +43,10 @@ html { background: coral; } +.hidden { + display: none !important; +} + nav.main ul { display: flex; margin-bottom: 2rem; @@ -191,6 +201,13 @@ form.edit, outline: none; } +:is(.postform, .edit) .post-nav { + width: 100%; + display: flex; + gap: 1rem; + align-items: center; +} + :is(.postform, .edit) input[type="submit"], .login input[type="submit"] { -webkit-appearance: none; @@ -209,10 +226,86 @@ form.edit, } :is(.postform, .edit) #count { - float: left; color: var(--background-color); } +:is(.postform, .edit) #post-droparea { + border: 0.15rem dashed rgba(0,0,0,0.2); + color: rgba(0,0,0,0.35); + padding: 0.25rem; + cursor: pointer; +} + +:is(.postform, .edit) #post-droparea.drag, +:is(.postform, .edit) #post-droparea:is(:hover, :focus) { + background-color: var(--primary-color); + color: #fff; + border: 0.15rem solid var(--primary-color); +} + +:is(.postform, .edit) #post-attachments-label { + display: flex; + border: 0.15rem dashed rgba(0,0,0,0.4); + color: rgba(0,0,0,0.4); + padding: 0.25rem; + cursor: pointer; + position: relative; + align-self: stretch; + align-items: center; +} + +:is(.postform, .edit) #post-attachments { + /* cover the entire label, for drag and drop */ + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; +} + +:is(.postform, .edit) #post-attachments-list { + flex: 1; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + padding-inline-end: 1rem; + align-self: stretch; + justify-content: center; +} + +:is(.postform, .edit) #post-attachments-list li + li { + margin-block-start: 0.25em; + border-top: 1px solid rgba(0,0,0,0.2); + padding-block-start: 0.25em; +} + +:is(.postform, .edit) #post-attachments-list img.file-preview { + display: inline-block; + vertical-align: middle; + margin-right: 1ch; + width: 1.75rem; + height: 1.75rem; + outline: 0px solid #f0f; + object-fit: cover; + background: #fff; +} + +:is(.postform, .edit) #post-attachments-list input[type="checkbox"] { + -webkit-appearance: checkbox; + appearance: checkbox; +} + +:is(.timeline, .single) .post-attachments { + grid-column-start: span 6; + margin-block-start: 1rem; +} + +:is(.timeline, .single) .post-attachments li + li { + margin-block-start: 0.5rem; +} + :is(.postform, .edit) .message, .login .message { background-color: #87b26c; @@ -264,3 +357,15 @@ footer li a { font-weight: bold; margin-bottom: 0.5rem; } + +/* +@supports (background: paint(id)) { + input[type="submit"] { + background: paint(squircle) !important; + --squircle-radius: 8px; + --squircle-fill: var(--primary-color); + + border-radius: 0; + } +} +*/ |