Something went wrong. Try again.
A Bsky-like frontend using the atprotocol natively.
Something went wrong. Try again.
3.1 kB · 183 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184.feed-viewer-page { display: flex; flex-direction: column; min-height: 100%;}
.feed-viewer-header { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 10;}
.feed-viewer-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--accent); font-size: 14px; cursor: pointer; padding: 4px 8px; border-radius: 999px; font-family: inherit; transition: background 0.15s;}
.feed-viewer-back:hover { background: var(--hover-bg);}
.feed-viewer-title { font-size: 18px; font-weight: 700; color: var(--text-h);}
.feed-viewer-info { padding: 20px; border-bottom: 1px solid var(--border);}
.feed-viewer-info-top { display: flex; gap: 16px; align-items: center;}
.feed-viewer-avatar { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; background: var(--border); flex-shrink: 0;}
.feed-viewer-avatar-placeholder { width: 64px; height: 64px; border-radius: 16px; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; color: var(--accent); flex-shrink: 0;}
.feed-viewer-info-text { display: flex; flex-direction: column; gap: 2px; min-width: 0;}
.feed-viewer-name { font-size: 20px; font-weight: 700; color: var(--text-h); margin: 0;}
.feed-viewer-creator { font-size: 14px; color: var(--text);}
.feed-viewer-likes { font-size: 13px; color: var(--text); display: inline-flex; align-items: center; gap: 4px;}
.feed-viewer-likes svg { color: #ef4444; font-size: 12px;}
.feed-viewer-description { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-h); white-space: pre-wrap; word-break: break-word;}
.feed-viewer-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap;}
.feed-viewer-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: none; color: var(--text-h); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.15s; white-space: nowrap;}
.feed-viewer-action-btn:hover:not(:disabled) { background: var(--hover-bg); border-color: var(--accent-border);}
.feed-viewer-action-btn:disabled { opacity: 0.5; cursor: not-allowed;}
.feed-viewer-action-btn.active { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent);}
.feed-viewer-feed { display: flex; flex-direction: column;}
.feed-viewer-loading { padding: 32px 20px; text-align: center; color: var(--text); font-size: 14px;}
.feed-viewer-error { padding: 32px 20px; text-align: center; color: #ef4444; font-size: 14px;}
.feed-viewer-empty { padding: 32px 20px; text-align: center; color: var(--text); font-size: 14px;}