monkeytype-themes/base.user.css at main · refact0r/monkeytype-themes · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
/* ==UserStyle==
@name           monkeytype base
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    small tweaks for monkeytype
@author         refact0r
@homepageURL    https://github.com/refact0r/monkeytype-themes
@updateURL      https://github.com/refact0r/monkeytype-themes/raw/main/base.user.css
==/UserStyle== */

@-moz-document domain("monkeytype.com") {

    /* force font on logo */
    *:not(i) {
        font-family: var(--font) !important;
    }

    /* hide bottom */
    #bottom {
        display: none;
    }

    /* center menu */
    #top {
        grid-template-columns: 1fr auto 1fr;
    }

    /* increase menu gap */
    #menu {
        gap: 1rem;
    }

    /* hide account name */
    .icon-button .text {
        display: none;
    }

    /* typing test margins */
    #middle {
        margin-left: 10%;
        margin-right: 10%;
    }

    /* change logo text */
    #top .logo .text {
        visibility: hidden;
    }

    #top .logo .text .top:after {
        content: 'reject humanity';
        visibility: visible;
        display: block;
        position: relative;
        margin-top: -.7rem;
        margin-left: -.15rem;
    }

    #top .logo .text:after {
        content: 'become monke';
        visibility: visible;
        display: block;
        position: relative;
        margin-top: -2rem;
    }

    /* caret width */
    #caret.default {
        width: 1px;
    }

    /* change live wpm and acc text size */
    #liveWpm,
    #liveAcc {
        font-size: 7rem;
    }

    /* letter fading */
    #words letter.correct {
        animation: fadeOut 3s ease forwards;
    }

    @keyframes fadeOut {
        100% {
            opacity: 0;
        }
    }

    /* text shadow */
    body {
        text-shadow: 1px 1px 3px #00000050 !important;
    }

    /* remove shadow when test starts */
    #top.focus #menu,
    #top.focus #menu .text-button {
        text-shadow: none;
    }
}