connect-four/gameStyle.css at master · ld9/connect-four · 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
*{ font-family: 'Inconsolata';}
#x{ background-color: #FAE5D3; width: 259px; z-index: 2;}
#c{ text-align: center; width: 100%}
#go{ width: 259px; height: 64px; color: #F7F9F9; background-color: #D35400; text-align: center; line-height: 64px; animation: go 2s ease; z-index: 1;}

#go:after{ content: "Game Over!" }

@keyframes go{
  0%{
    opacity: 0;
    transform: translateY(-64px);
  }
  100%{
    opacity: 1;
    transform: none;
  }
}
@keyframes gon{
  0%{
    opacity: 1;
    overflow: hidden;
  }
  100%{
    opacity: 0;
    transform: translateY(-64px);
    display: none;
  }
}

div{display: inline-block}

.row{
  display: flex;
  overflow-y: hidden;
}
.col{
  padding: 2 12;
  font-size: 22px;
  border: 0.5px solid black;

  transition: 0.25s ease;
}
.col.team{
  -webkit-user-select: none;
  opacity: 0.8;
}
.col.team.a{
  background-color: #3498DB;
}
.col.team.b{
  background-color: #E74C3C;
}
.col.team.n{
  background-color: #FAE5D3;
  opacity: 0.5;
}
.col.inf{
  background-color: #D7BDE2;
}
.col.team:hover{
  cursor: pointer;
  opacity: 1;
}

.col.team#new{
  animation: col 0.5s ease;
}

@keyframes col{
  0%{
    opacity: 0;
    transform: translateY(24px);
  }
  100%{
    opacity: 0.8;
    transform: none;
  }
}
.hidden{animation: gon 2s ease; animation-fill-mode: forwards;}
.hidden.i{display: none;}

#cb{display: inline-table; }