← back to Sdcc Mockups
extension-v0/content/badge.css
77 lines
#sdcc-helper-badge {
all: initial;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 2147483647;
background: #0f172a;
color: #e2e8f0;
border: 1px solid rgba(34, 211, 238, 0.35);
border-radius: 12px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
padding: 12px 14px;
display: flex;
align-items: center;
gap: 10px;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
font-size: 12px;
line-height: 1.4;
max-width: 320px;
pointer-events: auto;
}
#sdcc-helper-badge .sdcc-pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22d3ee;
animation: sdcc-pulse 2s infinite;
flex-shrink: 0;
}
#sdcc-helper-badge.sdcc-active .sdcc-pulse {
background: #22c55e;
}
@keyframes sdcc-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
#sdcc-helper-badge .sdcc-text { flex: 1; min-width: 0; }
#sdcc-helper-badge .sdcc-eyebrow {
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #22d3ee;
margin-bottom: 2px;
font-weight: 700;
}
#sdcc-helper-badge .sdcc-msg {
color: #e2e8f0;
font-weight: 500;
}
#sdcc-helper-badge .sdcc-close {
all: initial;
cursor: pointer;
color: #64748b;
font-size: 18px;
line-height: 1;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
flex-shrink: 0;
font-family: -apple-system, sans-serif;
}
#sdcc-helper-badge .sdcc-close:hover {
color: #e2e8f0;
background: rgba(255, 255, 255, 0.08);
}