Something went wrong. Try again.
A Bsky-like frontend using the atprotocol natively.
Something went wrong. Try again.
1.7 kB · 92 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293.post-modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: flex-start; padding: 40px 20px; overflow-y: auto; animation: modal-fade-in 0.15s ease-out;}
@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; }}
.post-modal-content { background: var(--bg); border-radius: 16px; width: 100%; max-width: 600px; max-height: calc(100vh - 80px); display: flex; flex-direction: column; box-shadow: var(--shadow); animation: modal-slide-in 0.2s ease-out; overflow: hidden;}
@keyframes modal-slide-in { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; }}
.post-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 1;}
.post-modal-title { font-size: 17px; font-weight: 700; color: var(--text-h);}
.post-modal-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: none; color: var(--text-h); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s;}
.post-modal-close:hover { background: var(--hover-bg);}
.post-modal-body { overflow-y: auto; flex: 1;}
[data-theme="dark"] .post-modal-overlay { background: rgba(0, 0, 0, 0.7);}
@media (max-width: 768px) { .post-modal-overlay { padding: 0; }
.post-modal-content { max-height: 100vh; border-radius: 0; }}