-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
152 lines (135 loc) · 4.2 KB
/
style.css
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
/* CSS Normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:700;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em;}pre{white-space:pre-wrap;word-wrap:break-word;}q{quotes:\201C \201D \2018 \2019;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}img{border:0;}svg:not(:root){overflow:hidden;}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,html input[type=button],/* 1 */
input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],input[disabled]{cursor:default;}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}body,figure{margin:0;}legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
body{
display:flex;
padding:0;
margin:0;
background-color:#4472CA;
justify-content:center;
flex-direction:column;
min-height:100vh;
}
.title{
font-size:60px;
color:white;
font-family:Georgia, serif;
font-weight:bold;
margin:0 auto 1em auto;
display:block;
text-align:center;
}
.subtitle{
font-size:32px;
color:white;
font-family:Georgia, serif;
font-weight:bold;
margin: 0 auto 10px auto;
text-align:center;
display:block;
text-decoration:underline;
}
.buttons{
margin: 0 auto;
display:flex;
justify-content:center;
}
.btn{
background: white;
color:black;
font-size:16px;
font-weight:bold;
text-align:center;
width:6vh;
min-width:70px;
padding:10px;
margin: 0 5px;
border: 1px solid black;
cursor:hand;
cursor:pointer;
}
.btn:hover{
opacity:.8;
}
.btn-selected{
background:lightgray;
color:black;
}
.btn-start{
position:absolute;
bottom:1vh;
left:calc(50% - 90px);
background:green;
color:white;
font-size:30px;
text-align:center;
padding:10px 20px;
margin:auto;
cursor:hand;
cursor:pointer;
width:180px;
border:none;
transition:all 1s;
}
.btn-start:hover{
background:darkgreen;
}
.btn-start:disabled{
color:black;
background:darkgray;
}
.panel-container{
display:flex;
width:50%;
max-width:40vh;
min-height:20vh;
margin:auto;
border-radius:20vh;
overflow:hidden;
flex-wrap:wrap;
background:white;
transition: all 1s;
}
.panel{
color:white;
font-size:100px;
text-align:center;
text-shadow:4px 4px 0 rgba(0,0,0,0.1);
width:50%;
max-width:20vh;
min-height:20vh;
margin:0;
cursor:hand;
cursor:pointer;
transition: all 1s;
overflow: !important hidden;
}
.simon-playing1, .simon-playing2, .simon-playing3, .simon-playing4{
opacity:.5;
overflow:hidden;
transition: opacity .2s;
}
.simon-playing1{border-top-left-radius: 20vh;}
.simon-playing2{border-top-right-radius: 20vh;}
.simon-playing3{border-bottom-left-radius: 20vh;}
.simon-playing4{border-bottom-right-radius: 20vh;}
.active:after{
content:"";
display:block;
height:100%;
width:100%;
opacity:0;
background:rgba(0,0,0,.5);
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
.active:hover:after{opacity:1;}
.panel1:after{border-top-left-radius: 20vh;}
.panel2:after{border-top-right-radius: 20vh;}
.panel3:after{border-bottom-left-radius:20vh;}
.panel4:after{border-bottom-right-radius:20vh;}
.panel1{background:red;border-top-left-radius: 20vh;}
.panel2{background:blue;border-top-right-radius: 20vh;}
.panel3{background:green;border-bottom-left-radius:20vh;}
.panel4{background:yellow;border-bottom-right-radius:20vh;}