spinning keymap
Apollo v2 by sh0qr
Details
Authorsh0qr
LicenseNo License
Categorymonkeytype
Created
Updated
Size4.1 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name Apollo v2
@version 20220611.11.34
@namespace userstyles.world/user/sh0qr
@description spinning keymap
@author sh0qr
@license No License
==/UserStyle== */
@-moz-document domain("monkeytype.com") {
/*by SH0QR. Inspiration from (https://www.youtube.com/watch?v=OUeZUTuV85M) youtube video but the code was taken down so i made it myself*/
body {
--bg-color: #dddddc!important;
--main-color: #B3B4B6!important;
--caret-color: #B7BAB8!important;
--sub-color: #FFF!important;
--sub-alt-color: #afb3bb!important;
--text-color: #5F5E62!important;
--error-color: #CD310D!important;
--error-extra-color: #D81828!important;
--colorful-error-color: #f6c9b4!important;
--colorful-error-extra-color: #f59a71!important;
background: url(https://i.ibb.co/G091svB/Lol-i-got-this-for-free.png)!important;
background-attachment: fixed!important;
background-size: cover!important;
background-position: center!important;
}
/* typing test */
@keyframes fade {
50% {
color: var(--sub-alt-color)
}
70% {
color: var(--bg-color)
}
100% {
color: transparent
}
}
#keymap {
left: 55rem!important;
position: absolute;
width: 450px;
top: 0rem;
background-color: #282828c9;
border-radius: 10px;
padding: 10px 0px 10px 15px;
opacity; .5;
border: 1px solid black;
outline-style: solid;
outline-color: white;
outline-width: 2px;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
@-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
div#typingTest {
left: -16rem!important;
position: absolute;
width: 650px;
top: -5rem;
}
#typingTest,
#result .stats .group .bottom,
.pageSettings .section > .text {
font-weight: 300!important
}
letter {
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}
@keyframes fade {
50% {
color: var(--sub-alt-color)
}
70% {
color: var(--bg-color)
}
100% {
color: transparent
}
#result,
.content {
backdrop-filter: blur(3px)
}
.pageSettings .section h1 {
font-weight: 600!important;
color: var(--sub-color)
}
.pageSettings .sectionGroupTitle {
color: var(--sub-color)
}
/* top */
#top {
grid-template-columns: 1fr auto 1fr;
}
#top.focus .logo,
#top.focus .icon {
filter: blur(1.25px);
transition: all 2s ease-out!important;
opacity: 0.5!important;
}
#top.focus .config {
transition: all 2s ease-out!important;
}
/* logo */
#top .logo .icon,
#top .logo .icon svg path {
fill: var(--main-color)!important;
filter: drop-shadow(2px 2px 2px var(--main-color))
}
#top .logo .text .top:after {
content: "SH0QR's";
visibility: visible;
display: block;
position: relative;
font-size: 0.8rem;
margin-top: -.8rem;
margin-left: -.15rem;
font-weight: 600;
color: var(--main-color)!important
}
#top .logo .text:after {
content: 'Apollo';
visibility: visible;
display: block;
position: relative;
margin-top: -2rem;
color: var(--text-color)!important
}
#top .logo .bottom {
visibility: hidden;
text-shadow: none!important;
}
#top .logo .text {
visibility: hidden;
}
/* caret */
#caret {
animation: caretbg 5s infinite forwards linear!important
}
/*@keyframes caretbg {
0% {
background: #3f7c5a;
}
50% {
background: #d4ebda;
}
80% {
background: #c5decb;
}
100% {
background: #3f7c5a;
}
}*/
/* bottom */
#bottom {
visibility: hidden
}
/* quick command */
#commandLineWrapper #commandLine .suggestions .entry.activeMouse {
background: var(--main-color)!important
}
#commandLineWrapper #commandLine .suggestions .entry.activeKeyboard {
background: var(--sub-color)!important
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
}