Something went wrong. Try again.
A Bsky-like frontend using the atprotocol natively.
Something went wrong. Try again.
14 kB · 833 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834.compose-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: flex-start; padding: 60px 20px; overflow-y: auto; animation: compose-fade 0.15s ease-out;}
@keyframes compose-fade { from { opacity: 0; } to { opacity: 1; }}
[data-theme="dark"] .compose-overlay { background: rgba(0, 0, 0, 0.7);}
.compose-content { background: var(--bg); border-radius: 16px; width: 100%; max-width: 580px; display: flex; flex-direction: column; box-shadow: var(--shadow); animation: compose-slide 0.2s ease-out;}
@keyframes compose-slide { from { transform: translateY(-16px); opacity: 0; } to { transform: translateY(0); opacity: 1; }}
.compose-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border);}
.compose-title { font-size: 17px; font-weight: 700; color: var(--text-h);}
.compose-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: none; color: var(--text-h); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s;}
.compose-close:hover { background: var(--hover-bg);}
.compose-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; position: relative;}
.compose-textarea { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text-h); font-size: 16px; font-family: inherit; resize: vertical; min-height: 120px; outline: none; transition: border-color 0.15s; line-height: 1.5;}
.compose-textarea:focus { border-color: var(--accent);}
.compose-charcount { text-align: right; font-size: 12px; color: var(--text); opacity: 0.5;}
.compose-charcount.warn { opacity: 1; color: #f59e0b;}
.compose-charcount.over { opacity: 1; color: #ef4444; font-weight: 600;}
.compose-mention-popup { position: absolute; left: 16px; right: 16px; top: 100%; background: var(--card-bg, var(--bg)); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); z-index: 10; overflow: hidden; animation: compose-fade 0.12s ease-out;}
.compose-mention-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; width: 100%; background: none; border: none; cursor: pointer; text-align: left; color: inherit; transition: background 0.1s;}
.compose-mention-item:hover,.compose-mention-item.active { background: var(--hover-bg);}
.compose-mention-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0;}
.compose-mention-avatar-ph { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--accent); flex-shrink: 0;}
.compose-mention-info { display: flex; flex-direction: column; min-width: 0;}
.compose-mention-name { font-size: 14px; font-weight: 600; color: var(--text-h); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.compose-mention-handle { font-size: 12px; color: var(--text);}
.compose-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px;}
.compose-image-item { position: relative; border-radius: 10px; overflow: hidden; background: var(--hover-bg); aspect-ratio: 1;}
.compose-image-item img { width: 100%; height: 100%; object-fit: cover;}
.compose-image-remove { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s;}
.compose-image-item:hover .compose-image-remove { opacity: 1;}
.compose-image-alt { position: absolute; bottom: 0; left: 0; right: 0; padding: 4px 8px; border: none; border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 11px; font-family: inherit; outline: none;}
.compose-image-alt::placeholder { color: rgba(255, 255, 255, 0.6);}
.compose-video-preview { position: relative; border-radius: 10px; overflow: hidden; background: #000;}
.compose-video-preview video { width: 100%; max-height: 300px; object-fit: contain; display: block;}
.compose-video-remove { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 12px; border-radius: 8px; border: none; background: rgba(239, 68, 68, 0.1); color: #ef4444; font-size: 12px; cursor: pointer;}
.compose-video-remove:hover { background: rgba(239, 68, 68, 0.2);}
.compose-gif-preview { position: relative; border-radius: 10px; overflow: hidden;}
.compose-gif-preview img { width: 100%; max-height: 250px; object-fit: contain; display: block; border-radius: 10px;}
.compose-gif-remove { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; border: none; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11px; cursor: pointer;}
.compose-gif-picker { border: 1px solid var(--border); border-radius: 12px; overflow: hidden;}
.compose-gif-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border);}
.compose-gif-search-icon { color: var(--text); font-size: 13px; flex-shrink: 0;}
.compose-gif-search input { flex: 1; border: none; background: none; color: var(--text-h); font-size: 14px; font-family: inherit; outline: none;}
.compose-gif-search input::placeholder { color: var(--text); opacity: 0.5;}
.compose-gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px; max-height: 280px; overflow-y: auto;}
.compose-gif-item { border-radius: 6px; overflow: hidden; border: none; padding: 0; cursor: pointer; background: var(--hover-bg); transition: opacity 0.15s;}
.compose-gif-item:hover { opacity: 0.85;}
.compose-gif-item img { width: 100%; height: 90px; object-fit: cover; display: block;}
.compose-gif-loading,.compose-gif-empty { grid-column: 1 / -1; text-align: center; padding: 24px; color: var(--text); font-size: 13px;}
.compose-edit-embeds { border: 1px solid var(--border); border-radius: 12px; overflow: hidden;}
.compose-edit-embeds-label { font-size: 11px; font-weight: 600; color: var(--text); opacity: 0.6; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 12px 0;}
.compose-error { padding: 8px 16px; color: #ef4444; font-size: 13px; background: rgba(239, 68, 68, 0.08);}
.compose-reply-context { display: flex; gap: 10px; padding: 10px 12px; background: var(--hover-bg); border-radius: 10px;}
.compose-reply-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0;}
.compose-reply-avatar-ph { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--accent); flex-shrink: 0;}
.compose-reply-context-info { display: flex; flex-direction: column; min-width: 0; gap: 2px;}
.compose-reply-context-name { font-size: 13px; font-weight: 600; color: var(--accent);}
.compose-reply-pronouns { font-weight: 400; color: var(--text); opacity: 0.7;}
.compose-reply-context-text { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.compose-quote-preview { padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--hover-bg);}
.compose-quote-preview-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px;}
.compose-quote-preview-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0;}
.compose-quote-preview-avatar-ph { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--accent); flex-shrink: 0;}
.compose-quote-preview-author { display: flex; align-items: baseline; gap: 4px; min-width: 0;}
.compose-quote-preview-name { font-size: 13px; font-weight: 600; color: var(--text-h); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.compose-quote-preview-handle { font-size: 12px; color: var(--text);}
.compose-quote-preview-text { font-size: 14px; color: var(--text-h); line-height: 1.45; white-space: pre-wrap; word-break: break-word;}
.compose-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--border);}
.compose-actions { display: flex; gap: 4px; align-items: center;}
.compose-format-group { display: flex; gap: 2px;}
.compose-format-btn.active { background: var(--accent-bg); color: var(--accent);}
.compose-format-btn.active:hover { background: var(--accent-bg);}
/* Font family dropdown */.compose-font-dropdown-wrap { position: relative;}
.compose-font-caret { font-size: 10px; margin-left: 2px; opacity: 0.6;}
.compose-font-dropdown { position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 190px; background: var(--card-bg, var(--bg)); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); z-index: 20; overflow: hidden; animation: compose-fade 0.12s ease-out;}
.compose-font-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 12px; border: none; background: none; color: var(--text-h); font-size: 13px; font-family: inherit; cursor: pointer; text-align: left; transition: background 0.1s;}
.compose-font-option:hover { background: var(--hover-bg);}
.compose-font-option.active { background: var(--accent-bg); color: var(--accent);}
.compose-font-label { flex-shrink: 0;}
.compose-font-preview { opacity: 0.5; font-size: 12px;}
.compose-action-separator { width: 1px; height: 20px; background: var(--border); margin: 0 4px; flex-shrink: 0;}
.compose-action-btn { width: 36px; height: 36px; border-radius: 50%; border: none; background: none; color: var(--accent); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s;}
.compose-action-btn:hover:not(:disabled) { background: var(--accent-bg);}
.compose-action-btn:disabled { opacity: 0.3; cursor: not-allowed;}
.compose-submit { padding: 8px 24px; border-radius: 999px; border: none; background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.15s;}
.compose-submit:hover:not(:disabled) { opacity: 0.9;}
.compose-submit:disabled { opacity: 0.5; cursor: not-allowed;}
/* ── Thread stacked blocks ────────────────────────────────────── */
.compose-thread-blocks { display: flex; flex-direction: column; gap: 6px;}
.compose-thread-block { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color 0.15s;}
.compose-thread-block.active { border-color: var(--accent);}
.compose-thread-block-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; background: var(--hover-bg);}
.compose-thread-block-label { font-size: 11px; font-weight: 600; color: var(--text); opacity: 0.6; text-transform: uppercase; letter-spacing: 0.04em;}
.compose-thread-block-remove { width: 22px; height: 22px; border-radius: 50%; border: none; background: none; color: var(--text); font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.4; transition: all 0.15s;}
.compose-thread-block-remove:hover { opacity: 1; color: #ef4444; background: rgba(239, 68, 68, 0.1);}
.compose-thread-block.active .compose-textarea { border: none; border-radius: 0; min-height: 60px;}
.compose-thread-block-preview { padding: 10px 12px; font-size: 15px; color: var(--text-h); line-height: 1.45; cursor: pointer; white-space: pre-wrap; word-break: break-word; max-height: 80px; overflow: hidden; position: relative; transition: background 0.15s;}
.compose-thread-block-preview:hover { background: var(--hover-bg);}
.compose-thread-block-preview.empty { color: var(--text); opacity: 0.4; font-style: italic;}
.compose-thread-block-preview::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 24px; background: linear-gradient(transparent, var(--bg)); pointer-events: none;}
/* ── Thread add button ─────────────────────────────────────────── */
.compose-thread-add-btn { position: relative;}
.compose-thread-add-btn::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px dashed var(--accent); opacity: 0; transition: opacity 0.15s;}
.compose-thread-add-btn:hover::after { opacity: 0.3;}
/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) { .compose-overlay { padding: 0; } .compose-content { max-width: 100%; min-height: 100vh; border-radius: 0; }}