pentatonicVisuals/style.css at master · superLimitBreak/pentatonicVisuals · 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
body {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background-color: black;
}

#pent {
    position: relative;
    left: 40%;
    width: 20%;
    height: 100%;
    transform-origin: 0 0;
}

.fret {
    width: 100%;
    position: absolute;
}

.topBlur {
    width: 100%;
    top: -10%;
    position: absolute;
    height: 30%;
    z-index: 4;
    background-image: -webkit-gradient(
        linear, left top, left bottom,
        from(rgba(0,0,0,1)),
        to(rgba(0,0,0,0))
    );
}

.topBlock {
    width: 100%;
    top: -30%;
    position: absolute;
    height: 20%;
    z-index: 4;
    background-color: black;
}

@keyframes fromwhite {
    0% {
        background-color: #fff;
        border-color: #fff;
        box-shadow: 0 0 65px 35px #fff;
        border-width: 1px;
    }
    100% {}
}

.note {
    animation: fromwhite 0.4s;
    width: 1%;
    position: absolute;
    height: 0%;
    z-index: 2;
    outline: none;
    border-style: solid;
    border-width: 2px;
    border-radius: 10px;
}

.note.green {
    background-color: #dfd;
    border-color: #5f5;
    box-shadow: 0 0 50px 5px #3f3;
}

.note.red {
    background-color: #faa;
    border-color: #f55;
    border-width: 3px;
    box-shadow: 0 0 50px 8px #f33;
}

.note.yellow {
    background-color: #ffc;
    border-color: #cc3;
    box-shadow: 0 0 50px 4px #cc1;
}

.note.blue {
    background-color: #acf;
    border-color: #3af;
    box-shadow: 0 0 50px 6px #18f;
}

.note.orange {
    background-color: #eec;
    border-color: #f95;
    box-shadow: 0 0 50px 5px #f93;
}


@keyframes flyfadein {
    0% { opacity: 0; top: 0%;}
    40% { opacity: 0.5; top: 95%;}
    50% { opacity: 0.5; top: 95%;}
    55% { opacity: 0.7; top: 97.5%;}
    60% { opacity: 1; top: 95%;}
    100% { opacity: 1; top: 95%;}
}

.fretButton {
    width: 17%;
    top: 95%;
    position: absolute;
    z-index: 3;
    animation: flyfadein 2.5s;
}