Something went wrong. Try again.
A Bsky-like frontend using the atprotocol natively.
Something went wrong. Try again.
9.5 kB · 579 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580.post-card { padding: 16px 20px; border-bottom: 1px solid var(--border); transition: background 0.15s; cursor: pointer; position: relative;}
.post-card-link-overlay { position: absolute; inset: 0; z-index: 1; color: inherit; text-decoration: none;}
.post-card > *:not(.post-card-link-overlay):not(.lightbox-backdrop) { position: relative; z-index: 2;}
.post-card:hover { background: var(--hover-bg);}
.post-card--thread { cursor: default;}
.post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px;}
.post-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--border); flex-shrink: 0; object-fit: cover;}
.post-avatar-btn { padding: 0; border: none; background: none; cursor: pointer; display: flex; flex-shrink: 0; border-radius: 50%; transition: opacity 0.15s;}
.post-avatar-btn:hover { opacity: 0.8;}
.post-avatar-placeholder { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--accent); flex-shrink: 0;}
.post-author-info { display: flex; flex-direction: column; min-width: 0;}
.post-display-name { font-size: 15px; font-weight: 600; color: var(--text-h); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.post-pronouns { font-size: 12px; color: var(--text); opacity: 0.6; font-weight: 400; white-space: nowrap; flex-shrink: 0;}
.post-display-name-btn { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 0; border: none; background: none; cursor: pointer; font-family: inherit; text-align: left;}
.post-name-row { display: flex; align-items: baseline; gap: 4px; min-width: 0;}
.post-display-name-btn:hover .post-display-name { text-decoration: underline;}
.post-handle { font-size: 13px; color: var(--text);}
.post-handle-row { display: flex; align-items: center; gap: 6px; min-width: 0;}
.post-repost-label { font-size: 12px; color: var(--text); margin-bottom: 4px; padding-left: 50px; display: flex; align-items: center; gap: 4px;}
.post-repost-label svg { font-size: 12px; width: 12px; height: 12px;}
.post-repost-label span { font-weight: 600; color: var(--text-h);}
.post-reply-context { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding-left: 20px; position: relative; cursor: pointer; color: var(--text); font-size: 13px; line-height: 1.4; min-height: 24px; text-decoration: none;}
.post-reply-context:hover { color: var(--accent);}
.post-reply-context__line { position: absolute; left: 39px; top: 0; bottom: 0; width: 2px; background: var(--border); border-radius: 1px;}
.post-reply-context:hover .post-reply-context__line { background: var(--accent);}
.post-reply-context__avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--border); flex-shrink: 0; object-fit: cover;}
.post-reply-context__avatar--placeholder { display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--accent); background: var(--accent-bg);}
.post-reply-context__text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.post-reply-context__text strong { color: var(--text-h); font-weight: 600;}
.post-reply-context:hover .post-reply-context__text strong { color: var(--accent);}
.post-reply-context__preview { color: var(--text); opacity: 0.7;}
.post-card:hover .post-reply-context__line { background: var(--border);}
.post-card:hover .post-reply-context:hover .post-reply-context__line { background: var(--accent);}
.post-body { font-size: 15px; line-height: 1.45; color: var(--text-h); white-space: pre-wrap; word-break: break-word;}
.post-body-link { color: var(--accent); text-decoration: none; cursor: pointer;}
.post-body-link:hover { text-decoration: underline;}
.post-body-url { word-break: break-all;}
.post-body-mention-hover { display: inline;}
.post-body-mention-hover .handle-hover-card { z-index: 1001;}
.post-footer { display: flex; gap: 4px; margin-top: 10px; position: relative;}
.post-action { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; border: none; background: none; color: var(--text); font-size: 13px; cursor: pointer; transition: color 0.15s, background 0.15s; font-family: inherit; min-width: 60px;}
.post-action svg { font-size: 16px; width: 16px; height: 16px;}
.post-action:hover { background: var(--hover-bg);}
.post-action--reply:hover { color: var(--accent);}
.post-action--repost:hover { color: #22c55e;}
.post-action--repost.active { color: #22c55e;}
.post-action--like:hover { color: #ef4444;}
.post-action--like.active { color: #ef4444;}
.post-action--edit:hover { color: var(--accent);}
.post-action--bookmark:hover { color: var(--accent);}
.post-action--bookmark.active { color: var(--accent);}
.post-action--mute-thread:hover { color: var(--accent);}
.post-action--mute-thread.active { color: var(--text); opacity: 0.6;}
.post-action--quote:hover { color: var(--accent);}
.post-action--share:hover { color: var(--accent);}
.post-more-menu-wrapper { position: relative; margin-left: auto;}
.post-action--more:hover { color: var(--accent);}
.post-action--more.active { color: var(--accent);}
.post-more-menu { position: absolute; bottom: calc(100% + 4px); right: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); z-index: 100; overflow: hidden; min-width: 180px; animation: more-menu-fade 0.12s ease-out;}
@keyframes more-menu-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); }}
.share-button-wrapper { position: relative;}
.share-menu { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); z-index: 100; overflow: hidden; min-width: 190px; animation: share-menu-fade 0.12s ease-out;}
@keyframes share-menu-fade { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); }}
.share-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: none; background: none; color: var(--text-h); font-size: 14px; font-family: inherit; cursor: pointer; transition: background 0.1s; white-space: nowrap;}
.share-menu-item:hover { background: var(--hover-bg);}
.share-menu-item svg { font-size: 15px; width: 15px; height: 15px; color: var(--text);}
.share-menu-item:hover svg { color: var(--text-h);}
.post-repost-menu { position: absolute; bottom: calc(100% + 4px); left: 60px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); z-index: 100; overflow: hidden; min-width: 160px; animation: repost-menu-fade 0.12s ease-out;}
@keyframes repost-menu-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); }}
.post-repost-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: none; background: none; color: var(--text-h); font-size: 14px; font-family: inherit; cursor: pointer; transition: background 0.1s;}
.post-repost-menu-item:hover { background: var(--hover-bg);}
.post-repost-menu-item svg { font-size: 15px; width: 15px; height: 15px; color: var(--text);}
.post-repost-menu-item:hover svg { color: var(--text-h);}
.post-repost-menu-item--danger { color: #ef4444;}
.post-repost-menu-item--danger svg { color: #ef4444;}
.post-repost-menu-item--danger:hover { background: rgba(239, 68, 68, 0.1);}
.post-action:disabled { opacity: 0.5; cursor: not-allowed;}
.post-header-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0;}
.post-follow-btn { flex-shrink: 0;}
.post-time { font-size: 12px; color: var(--text);}
[data-theme="dark"] .post-action--repost.active { color: #4ade80;}
[data-theme="dark"] .post-action--like.active { color: #f87171;}
.post-card--hidden { cursor: default;}
.post-card--hidden:hover { background: transparent;}
.post-hidden-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; color: var(--text); font-size: 13px; opacity: 0.6;}
.post-hidden-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.post-hidden-show-btn { flex-shrink: 0; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: none; color: var(--accent); font-size: 12px; font-family: inherit; cursor: pointer; transition: background 0.15s;}
.post-hidden-show-btn:hover { background: var(--hover-bg);}