-
Notifications
You must be signed in to change notification settings - Fork 19
/
style.css
145 lines (126 loc) · 3.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
.board {
font-size: 0px;
white-space: nowrap;
}
.cell {
font-size: 18px;
display: inline-block;
text-align: center;
width: 30px;
height: 30px;
border: 1px solid #999;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
position: relative;
}
.cell.known {
background: #ccc;
border-top-color: #ccc;
border-left-color: #ccc;
font-weight: bold;
}
.cell.label--7 { color: #ff0000; }
.cell.label--6 { color: #ff0000; }
.cell.label--5 { color: #ff0000; }
.cell.label--4 { color: #ff0000; }
.cell.label--3 { color: #ff0000; }
.cell.label--2 { color: #ff0000; }
.cell.label--1 { color: #ff0000; }
.cell.label-0 {
background: #aaa;
border-top-color: #aaa;
border-left-color: #aaa;
color: #070707;
}
.cell.label-1 { color: #0000ff; }
.cell.label-2 { color: #008100; }
.cell.label-3 { color: #ee1300; }
.cell.label-4 { color: #000083; }
.cell.label-5 { color: #810500; }
.cell.label-6 { color: #2a9494; }
.cell.label-7 { color: #000000; }
.cell.label-8 { color: #808080; }
.cell.unknown {
background: #e0e0e0;
border-top-color: #fff;
border-left-color: #fff;
border-right-color: #999;
border-bottom-color: #999;
}
.cell.hint::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
bottom: 3px;
right: 3px;
border: 2px solid;
line-height: 18px;
}
.cell.hint-safe::before { color: #9c9; border-color: #9c9; }
.cell.hint-unknown::before { color: #da0; border-color: #da0; }
.cell.hint-mine::before { color: #e77; border-color: #e77; }
.cell.hint-safe::before { content: "."} /* bullet */
.cell.hint-unknown::before { content: "?"} /* bullet */
.cell.hint-mine::before { content: "!"} /* multiplication X */
.cell.bomb::before, .cell.bomb-win::before, .cell.flag::before { content: ""; }
.cell::after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
line-height: 28px;
/* Force load SVG */
background: url(sprites.svg) -1px -31px;
}
.cell.label--7::after { content: "-7"; }
.cell.label--6::after { content: "-6"; }
.cell.label--5::after { content: "-5"; }
.cell.label--4::after { content: "-4"; }
.cell.label--3::after { content: "-3"; }
.cell.label--2::after { content: "-2"; }
.cell.label--1::after { content: "-1"; }
.cell.label-0::after { content: "0"; }
.cell.label-1::after { content: "1"; }
.cell.label-2::after { content: "2"; }
.cell.label-3::after { content: "3"; }
.cell.label-4::after { content: "4"; }
.cell.label-5::after { content: "5"; }
.cell.label-6::after { content: "6"; }
.cell.label-7::after { content: "7"; }
.cell.label-8::after { content: "8"; }
.cell.bomb-win::after {
background: url(sprites.svg) -61px -1px;
}
.cell.flag::after {
content: "";
background: url(sprites.svg) -31px -1px;
}
.cell.unsure::after {
content: "?";
font-weight: bold;
}
.cell.bomb::after {
content: "";
background: url(sprites.svg) -1px -1px;
}
.cell.clickable {
cursor: pointer;
}
.cell.clickable:hover {
background: #eee;
}
.buttons {
margin-top: 1em;
}
h2 {
margin-top: 1em;
}
#hint.hidden {
opacity: 0;
transition-property: opacity;
transition-duration: 1s;
}