diff options
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 23 |
1 files changed, 21 insertions, 2 deletions
diff --git a/src/style.css b/src/style.css index dad0520..2ed97a1 100644 --- a/src/style.css +++ b/src/style.css @@ -236,7 +236,7 @@ button:disabled { opacity: .5; cursor: not-allowed; } /* ---- inputs ---- */ label.field { display: block; } .field .lab { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; display: block; } -input[type=text], input[type=password], input[type=number], textarea, select { +input[type=text], input[type=search], input[type=password], input[type=number], textarea, select { width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 11px; padding: 11px 13px; } @@ -1241,7 +1241,7 @@ button, .btn { transition: filter .12s, background .15s, border-color .15s, box- .chat-avatar.clickable:hover { transform: scale(1.07); } .header-avatar .chat-avatar { transition: transform .15s ease; } .header-avatar:hover .chat-avatar { transform: scale(1.08); } -input[type=text], input[type=password], input[type=number], textarea, select { transition: border-color .15s, box-shadow .15s; } +input[type=text], input[type=search], input[type=password], input[type=number], textarea, select { transition: border-color .15s, box-shadow .15s; } .settings-nav::after { transition: transform .18s ease, color .18s; } .settings-nav:hover::after { transform: translateX(3px); color: var(--ink); } @@ -1632,3 +1632,22 @@ body::after { .mention-ac .item { cursor: pointer; padding: 6px 10px; } /* `code` in a post */ .md-code { font-family: var(--mono, ui-monospace, monospace); font-size: .9em; background: color-mix(in srgb, currentColor 9%, transparent); border-radius: 4px; padding: 0 .3em; } + +/* GIF picker (gifs.nostr.build) */ +.gif-btn { font-weight: 700; font-size: 12px; letter-spacing: .04em; } +.chat-gif { font-weight: 700; font-size: 11px; letter-spacing: .04em; padding: 0 8px; } +.gif-backdrop { align-items: flex-end; padding: 0; } +.gif-sheet { width: 100%; max-width: 560px; height: min(78vh, 640px); gap: 8px; border-radius: 16px 16px 0 0; padding: 12px; } +@media (min-width: 640px) { .gif-backdrop { align-items: center; padding: 24px; } .gif-sheet { border-radius: 16px; } } +.gif-head { align-items: center; } +.gif-head a { color: inherit; text-decoration: underline; } +.gif-search { width: 100%; } +.gif-chips { gap: 6px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; flex-shrink: 0; } +.gif-chips::-webkit-scrollbar { display: none; } +.gif-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } +.gif-grid { columns: 2; column-gap: 6px; } +@media (min-width: 640px) { .gif-grid { columns: 3; } } +.gif-tile { padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #000 center / cover no-repeat; width: 100%; cursor: pointer; display: block; margin: 0 0 6px; break-inside: avoid; } +.gif-search::-webkit-search-cancel-button { cursor: pointer; } +.gif-tile video, .gif-tile img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } +.gif-note { display: flex; justify-content: center; padding: 32px 0; } |