97 lines
1.6 KiB
SCSS
97 lines
1.6 KiB
SCSS
@keyframes yup-pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(1.2);
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes yup-pulse-down {
|
|
0% {
|
|
transform: scale(1) rotate(180deg);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(1.2) rotate(180deg);
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
transform: scale(1) rotate(180deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.yup-rotate {
|
|
animation: rotate 1s linear infinite;
|
|
}
|
|
|
|
.yup-overlay {
|
|
position: fixed;
|
|
z-index: 2147483647;
|
|
top: 92vh;
|
|
left: 8px;
|
|
display: flex;
|
|
opacity: 0.7;
|
|
padding: 0.3rem;
|
|
gap: 0.4rem;
|
|
background: #121212d9;
|
|
|
|
.yup-logo {
|
|
opacity: 0.75;
|
|
width: 30px;
|
|
color: #eee;
|
|
}
|
|
|
|
.yup-btn {
|
|
width: 30px;
|
|
height: 30px;
|
|
background: transparent;
|
|
border: 1px solid #3344;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.yup-btn:hover {
|
|
background: rgba(62, 62, 99, 0.267);
|
|
}
|
|
|
|
.yup-btn.disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.yup-btn.up:hover {
|
|
animation: yup-pulse 0.5s ease-in-out infinite;
|
|
}
|
|
|
|
.yup-btn.down:hover {
|
|
animation: yup-pulse-down 0.5s ease-in-out infinite;
|
|
}
|
|
|
|
.yup-rate-svg {
|
|
display: inline;
|
|
width: 30px;
|
|
color: aliceblue;
|
|
margin-left: -0.9rem;
|
|
}
|
|
|
|
.yup-btn-down {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
} |