monkeytype-themes/iceland.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
/* ==UserStyle==
@name           monkeytype iceland
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Iceland theme for monkeytype
@author         refact0r
@homepageURL    https://github.com/refact0r/monkeytype-themes
@updateURL      https://github.com/refact0r/monkeytype-themes/raw/main/iceland.user.css
==/UserStyle== */
@-moz-document domain("monkeytype.com") {

    /* theme colors */
    * {
        --bg-color: #161821;
        --caret-color: #d2d4de;
        --main-color: #7da1e8;
        --sub-color: #b8c5e0;
        --sub-alt-color: #232531;
        --text-color: #e3e5e8;
        --error-color: #e27878;
        --error-extra-color: #e2a478;
        --colorful-error-color: #e27878;
        --colorful-error-extra-color: #e2a478;
    }

    /* background and effects */
    .customBackground {
        background-image: url("https://data.1freewallpapers.com/download/bridge-aerial-view-river-ice-iceland.jpg") !important;
        background-size: cover;
        background-position: center !important;
        background-repeat: no-repeat;
        transition: filter 1s ease !important;
        filter: blur(0px) brightness(0.6);
    }

    body[style*="cursor: none"] .customBackground {
        filter: blur(5px) brightness(0.4);
    }

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

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

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

    /* position timer bar and transition */
    #timerWrapper #timer {
        top: 50%;
        bottom: 50%;
        transform: translate(0, -40%);
        transition: height 0.5s ease;
    }

    /* position words */
    #wordsWrapper {
        height: 6rem !important;
        margin-bottom: 8rem;
    }

    #typingTest {
        margin-top: 2rem;
    }
}