Something went wrong. Try again.
A Bsky-like frontend using the atprotocol natively.
Something went wrong. Try again.
1.4 kB · 81 lines
CSS
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182.post-side-panel { display: none;}
.post-side-panel.open { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; width: 480px; height: 100vh; background: var(--bg); border-left: 1px solid var(--border); z-index: 900; box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08); animation: side-slide-in 0.2s ease-out;}
@keyframes side-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); }}
.post-side-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-side-title { font-size: 17px; font-weight: 700; color: var(--text-h);}
.post-side-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-side-close:hover { background: var(--hover-bg);}
.post-side-body { overflow-y: auto; flex: 1;}
@media (max-width: 1100px) { .post-side-panel.open { width: 400px; }}
@media (max-width: 768px) { .post-side-panel.open { width: 100%; }}
[data-theme="dark"] .post-side-panel.open { box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3);}