Something went wrong. Try again.
A Bsky-like frontend using the atprotocol natively.
Something went wrong. Try again.
1.6 kB · 67 lines
CSS
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768.user-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px;}
.user-label { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 4px; border-radius: 9999px; background: color-mix(in srgb, var(--accent-color, #1185fe) 12%, transparent); color: var(--accent-color, #1185fe); font-size: 11px; font-weight: 500; line-height: 1.4; border: 1px solid color-mix(in srgb, var(--accent-color, #1185fe) 20%, transparent); max-width: 200px; cursor: default; transition: background 0.15s ease;}
.user-label:hover { background: color-mix(in srgb, var(--accent-color, #1185fe) 20%, transparent);}
.user-label-icon { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; flex-shrink: 0;}
.user-label-icon-placeholder { width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--accent-color, #1185fe) 20%, transparent); font-size: 10px; flex-shrink: 0;}
.user-label-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
[data-theme="dark"] .user-label { background: color-mix(in srgb, var(--accent-color, #1185fe) 18%, transparent); border-color: color-mix(in srgb, var(--accent-color, #1185fe) 30%, transparent);}
[data-theme="dark"] .user-label:hover { background: color-mix(in srgb, var(--accent-color, #1185fe) 28%, transparent);}
[data-theme="dark"] .user-label-icon-placeholder { background: color-mix(in srgb, var(--accent-color, #1185fe) 30%, transparent);}