Something went wrong. Try again.
Browser extension for personal naming on Bluesky
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207/* Petname badge injected next to handles */.petname-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #4a1a6b, #2d1b4e); color: #e8d5f7; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 12px; margin-left: 6px; border: 1px solid rgba(232, 213, 247, 0.2); cursor: pointer; transition: all 0.15s ease; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;}
.petname-badge:hover { background: linear-gradient(135deg, #5c2280, #3d2666); border-color: rgba(232, 213, 247, 0.4); transform: translateY(-1px);}
.petname-badge::before { content: '~'; opacity: 0.6; font-weight: 400;}
/* Warning badge for handle takeover detection */.petname-badge-warning { background: linear-gradient(135deg, #6b4a1a, #4e3b2d); border-color: rgba(247, 200, 100, 0.3); animation: petname-warning-pulse 2s ease-in-out infinite;}
.petname-badge-warning::before { content: '⚠️ ~';}
.petname-badge-warning:hover { background: linear-gradient(135deg, #805c20, #5c4636);}
@keyframes petname-warning-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(247, 200, 100, 0.3); } 50% { box-shadow: 0 0 0 4px rgba(247, 200, 100, 0); }}
/* Context menu for assigning petnames */.petname-menu { position: fixed; background: #1a1a2e; border: 1px solid #4a1a6b; border-radius: 8px; padding: 12px; z-index: 10000; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); min-width: 240px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;}
.petname-menu-header { color: #888; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;}
.petname-menu-handle { color: #0085ff; font-size: 13px; margin-bottom: 12px; word-break: break-all;}
.petname-menu-did { color: #666; font-size: 10px; margin-bottom: 12px; word-break: break-all; font-family: monospace;}
.petname-menu-input { width: 100%; padding: 8px 10px; background: #0d0d1a; border: 1px solid #333; border-radius: 6px; color: #fff; font-size: 14px; outline: none; box-sizing: border-box;}
.petname-menu-input:focus { border-color: #4a1a6b;}
.petname-menu-input::placeholder { color: #666;}
.petname-menu-actions { display: flex; gap: 8px; margin-top: 12px;}
.petname-menu-btn { flex: 1; padding: 8px 12px; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s ease;}
.petname-menu-btn-save { background: #4a1a6b; color: #fff;}
.petname-menu-btn-save:hover { background: #5c2280;}
.petname-menu-btn-cancel { background: #333; color: #999;}
.petname-menu-btn-cancel:hover { background: #444; color: #ccc;}
.petname-menu-btn-remove { background: transparent; color: #ff6b6b; border: 1px solid #ff6b6b33; margin-top: 8px; width: 100%;}
.petname-menu-btn-remove:hover { background: #ff6b6b22;}
/* Tooltip showing original handle */.petname-badge[data-original]::after { content: attr(data-original); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #000; color: #888; font-size: 10px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; margin-top: 4px;}
.petname-badge:hover::after { opacity: 1;}
/* Add petname button (shown on hover) */.petname-add-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: rgba(74, 26, 107, 0.3); color: #8b5cf6; font-size: 14px; font-weight: 600; border-radius: 50%; margin-left: 4px; cursor: pointer; opacity: 0; transition: all 0.15s ease; border: 1px solid transparent;}
.petname-add-btn:hover { background: rgba(74, 26, 107, 0.6); border-color: rgba(139, 92, 246, 0.4); opacity: 1 !important;}
/* Show add button on parent hover */[data-petname-target]:hover .petname-add-btn { opacity: 0.6;}