Rock-Paper-Scissors/styles.css at master · JavascriptLearner815/Rock-Paper-Scissors · 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
body {
  background-color: #CCC;
  font-family: Arial, Helvetica, sans-serif;
}

.selections {
  display: flex;
  justify-content: center;
}

.selection {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 2rem;
  transition: 100ms;
}

.selection:hover {
  transform: scale(1.2);
}

.selection.locked {
  content: '🔒';
}

.selection.unlocked {
  content: attr(data-emoji, '🤷');
}

.results {
  margin-top: 1rem;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  align-items: center;
}

.result-score,
.result-prestige {
  margin-left: .1rem;
  font-size: .5rem;
  color: #333;
}

.result-selection {
  opacity: .5;
}

.result-selection.winner {
  opacity: 1;
  font-size: 1.5rem;
}

/* .result-level {

} */

.buttons * {
  background: #69C;
  border: 1px dashed white;
}