Something went wrong. Try again.
A Bsky-like frontend using the atprotocol natively.
Something went wrong. Try again.
2.7 kB · 149 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150.profile-actions { position: relative; display: inline-flex; align-items: center;}
.profile-actions--sm {
}
.profile-actions__btn-group { display: flex; align-items: stretch; border-radius: 999px; overflow: hidden; border: 1px solid var(--border);}
.profile-actions__btn-group .follow-btn { border: none; border-radius: 999px 0 0 999px; min-width: 80px;}
.profile-actions--sm .profile-actions__btn-group .follow-btn { min-width: 62px;}
.profile-actions__menu-trigger { display: flex; align-items: center; justify-content: center; width: 34px; border: none; border-left: 1px solid var(--border); background: none; color: var(--text-h); cursor: pointer; font-size: 13px; transition: background 0.15s, color 0.15s; border-radius: 0 999px 999px 0;}
.profile-actions--sm .profile-actions__menu-trigger { width: 28px; font-size: 11px;}
.profile-actions__menu-trigger:hover { background: var(--accent); color: #fff;}
.profile-actions__menu-trigger.active { background: var(--accent); color: #fff;}
.profile-actions__blocked-btn { padding: 6px 18px; border-radius: 999px; border: 1px solid var(--border); background: none; color: var(--text-muted, #888); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.15s;}
.profile-actions--sm .profile-actions__blocked-btn { padding: 4px 14px; font-size: 12px;}
.profile-actions__blocked-btn:hover { color: #ef4444; border-color: #ef4444; background: rgba(239, 68, 68, 0.08);}
.profile-actions__menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 150px; background: var(--bg, #fff); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); z-index: 100; overflow: hidden; animation: profile-actions-menu-in 0.12s ease-out;}
@keyframes profile-actions-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); }}
.profile-actions__menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; border: none; background: none; color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer; transition: background 0.12s; text-align: left;}
.profile-actions__menu-item:hover { background: var(--hover-bg, rgba(0, 0, 0, 0.04));}
.profile-actions__menu-item--danger { color: #ef4444;}
.profile-actions__menu-item--danger:hover { background: rgba(239, 68, 68, 0.08);}
@media (prefers-color-scheme: dark) { .profile-actions__menu { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }}