-
Notifications
You must be signed in to change notification settings - Fork 59
/
Copy pathstyle.css
89 lines (75 loc) · 3.95 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
html {
text-align: center; font-family: "Open Sans", sans-serif;
color: #444; background-color: #EEE; }
body { width: 500px; margin: 0px auto; }
h1, #score, #grid { font-family: "Comfortaa"; }
header, #grid, #level, footer {
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
header a, nav a {
display: inline-block; padding: 2px 4px; font-size: 12px;
background-color: white; border-radius: 3px; color: #444;
text-decoration: none; box-shadow: 0px 3px 0px #CCC; cursor: pointer; }
header a:active, nav a:active {
box-shadow: 0px 0px 0px #CCC; position: relative; top: 3px; }
header { position: relative; height: 100px; margin-top: 50px; }
h1 {
position: absolute; top: 0px; left: 30px;
display: inline-block; width: 190px;
font-size: 80px; line-height: 100px; margin: 0px; }
header div {
position: absolute; top: 0px; right: 0px;
display: inline-block; width: 250px; }
header p { margin: 0px; }
#score { font-size: 40px; line-height: 70px; height: 65px; }
#game { position: relative; width: 500px; height: 500px; margin: 10px 0px; }
#game > div { position: absolute; top: 0px; left: 0px; }
#grid {
width: 480px; height: 480px; padding: 10px;
background-color: #DDD; border-radius: 8px;
box-shadow: 0px 3px 0px #BBB inset; }
#grid div {
display: inline-block; width: 110px; height: 110px;
margin: 5px; border-radius: 5px; float: left;
line-height: 110px; font-size: 60px;
box-shadow: 0px 3px 0px #CCC; background-color: white; }
#grid div.bv { background-color: white; box-shadow: 0px 0px 15px #DDD inset, 0px 3px 0px #CCC; }
#grid div.b2 { background-color: #EAF4F9; box-shadow: 0px 0px 15px #CAE9F7 inset, 0px 3px 0px #CCC; }
#grid div.b4 { background-color: #E0F5FF; box-shadow: 0px 0px 15px #C1EBFF inset, 0px 3px 0px #CCC; }
#grid div.b8 { background-color: #C9EDFF; box-shadow: 0px 0px 15px #96DDFF inset, 0px 3px 0px #CCC; }
#grid div.b16 { background-color: #CCF3F3; box-shadow: 0px 0px 15px #93F2F2 inset, 0px 3px 0px #CCC; }
#grid div.b32 { background-color: #D5EEBC; box-shadow: 0px 0px 15px #C0ED93 inset, 0px 3px 0px #CCC; }
#grid div.b64 { background-color: #E8DBFF; box-shadow: 0px 0px 15px #CDB2FF inset, 0px 3px 0px #CCC; }
#grid div.b128 { background-color: #FBCDDA; box-shadow: 0px 0px 15px #F99FB9 inset, 0px 3px 0px #CCC; font-size: 50px; }
#grid div.b256 { background-color: #FFE5CA; box-shadow: 0px 0px 15px #FFC993 inset, 0px 3px 0px #CCC; font-size: 50px; }
#grid div.b512 { background-color: #FFA200; box-shadow: 0px 0px 15px #FFCD77 inset, 0px 3px 0px #CCC; color: white; font-size: 50px; }
#grid div.b1024 { background-color: #FFFA87; box-shadow: 0px 0px 15px #FFF547 inset, 0px 3px 0px #CCC; font-size: 40px;}
#grid div.b2048 { background-color: #333; box-shadow: 0px 0px 15px #555 inset, 0px 3px 0px #CCC; color: white; font-size: 40px; }
#grid.over div {
background-color: #CCC; box-shadow: 0px 0px 15px #AAA inset, 0px 3px 0px #CCC; }
#touch { width: 500px; height: 500px; }
#touch div { position: absolute; }
#touch div:nth-child(1) { top: 15px; left: 135px; width: 230px; height: 110px; }
#touch div:nth-child(2) { top: 135px; left: 15px; width: 110px; height: 230px; }
#touch div:nth-child(3) { bottom: 135px; right: 15px; width: 110px; height: 230px; }
#touch div:nth-child(4) { bottom: 15px; right: 135px; width: 230px; height: 110px; }
#text { color: #999; position: relative; height: 16px; }
#text p { position: absolute; top: 0px; margin-bottom: 0px; }
#text p:first-child { left: 0px; }
#text p:last-child { right: 0px; }
#bar {
position: relative; height: 5px; margin-top: 16px;
border-radius: 2.5px; background-color: #DDD; }
#bar div {
height: 5px; width: 0%; background-color: white; }
nav { margin: 50px 0px 20px; }
nav a { font-size: 20px; margin: 0px 10px; padding: 2px 8px; }
footer { font-size: 12px; color: #777; }
footer a { color: #26F; text-decoration: none; }
footer a:hover { color: #38F; text-decoration: underline; }