.test { display: flex; flex-direction: column; justify-content: center; font-weight: 700; height: 99.8%; width: 50%;}.timer { font-size: 21pt; margin: 5px; color: var(--hl-color);}.box { font-size: 21pt; overflow: hidden; height: 93px; display: flex; flex-wrap: wrap; align-items: center; user-select: none; .word { position: relative; margin: 0 5px 2px; &.wrong { text-decoration: 2px underline var(--hl-color); animation: shake 0.1s ease; @keyframes shake { 0% { transform: translateX(5px); } 50% { transform: translateX(-5px); } 100% { transform: translateX(0); } } } } .typedWord { position: absolute; top: 0; left: 0; } .right { color: var(--fg-color); } #active { position: relative; width: max-content; } span.wrong { color: var(--hl-color) !important; } .extra { opacity: 0.6; } #caret { transition: left 0.1s ease; margin-left: -7.29165px; position: absolute; color: var(--hl-color); &.blink { animation: blink 1.5s infinite 1s; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }}
.test {
display: flex;
flex-direction: column;
justify-content: center;
font-weight: 700;
height: 99.8%;
width: 50%;
}
.timer {
font-size: 21pt;
margin: 5px;
color: var(--hl-color);
}
.box {
font-size: 21pt;
overflow: hidden;
height: 93px;
display: flex;
flex-wrap: wrap;
align-items: center;
user-select: none;
.word {
position: relative;
margin: 0 5px 2px;
&.wrong {
text-decoration: 2px underline var(--hl-color);
animation: shake 0.1s ease;
@keyframes shake {
0% {
transform: translateX(5px);
}
50% {
transform: translateX(-5px);
}
100% {
transform: translateX(0);
}
}
}
}
.typedWord {
position: absolute;
top: 0;
left: 0;
}
.right {
color: var(--fg-color);
}
#active {
position: relative;
width: max-content;
}
span.wrong {
color: var(--hl-color) !important;
}
.extra {
opacity: 0.6;
}
#caret {
transition: left 0.1s ease;
margin-left: -7.29165px;
position: absolute;
color: var(--hl-color);
&.blink {
animation: blink 1.5s infinite 1s;
}
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
}