sendou.ink/app/components/NotificationDot.module.css

43 lines
688 B
CSS

.dotWrapper {
position: absolute;
top: var(--dot-top, -2px);
right: var(--dot-right, -2px);
width: 8px;
height: 8px;
pointer-events: none;
}
.dot {
display: block;
width: 100%;
height: 100%;
position: absolute;
background-color: var(--color-text-accent);
border-radius: 100%;
outline: 2px solid var(--color-bg);
}
.pulse {
display: block;
width: calc(100% + 20px);
height: calc(100% + 20px);
position: absolute;
top: -10px;
left: -10px;
border-radius: 100%;
background-color: var(--color-text-accent);
animation: pulse 2s infinite;
opacity: 0;
}
@keyframes pulse {
from {
transform: scale(0);
opacity: 1;
}
70% {
transform: scale(1);
opacity: 0;
}
}