MangoPig
106 lines
2.1 KiB
SCSS
106 lines
2.1 KiB
SCSS
.userButton {
|
|
position: relative;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 2.75rem;
|
|
height: 2.75rem;
|
|
margin-left: var(--space-1);
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--color-text-muted);
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
transition:
|
|
transform 180ms var(--easing-standard),
|
|
color 220ms var(--easing-standard);
|
|
}
|
|
|
|
.userButton:hover {
|
|
transform: scale(1.05);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.userButtonOpen {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.userButton:hover .spinContainer,
|
|
.userButtonOpen .spinContainer {
|
|
animation-play-state: running;
|
|
opacity: 1;
|
|
}
|
|
|
|
.userButton:focus-visible {
|
|
outline: none;
|
|
color: var(--color-text);
|
|
box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-strong) 28%, transparent);
|
|
}
|
|
|
|
.spinContainer {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0.72;
|
|
transition: opacity 220ms var(--easing-standard);
|
|
animation: spin-reverse 1.5s ease-in-out infinite reverse;
|
|
animation-play-state: paused;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.spinRing {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 999px;
|
|
background:
|
|
conic-gradient(
|
|
from 0deg,
|
|
transparent 0deg 28deg,
|
|
var(--color-primary-1) 28deg 118deg,
|
|
transparent 118deg 148deg,
|
|
var(--color-primary-2) 148deg 238deg,
|
|
transparent 238deg 268deg,
|
|
var(--color-primary-3) 268deg 358deg,
|
|
transparent 358deg 360deg
|
|
);
|
|
mask: radial-gradient(circle, transparent 63%, black 66%);
|
|
-webkit-mask: radial-gradient(circle, transparent 63%, black 66%);
|
|
animation: spin-forward 14s linear infinite;
|
|
}
|
|
|
|
.userCore {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 78%;
|
|
height: 78%;
|
|
border-radius: 999px;
|
|
background: var(--color-surface-muted);
|
|
}
|
|
|
|
@keyframes spin-forward {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes spin-reverse {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(-360deg);
|
|
}
|
|
}
|