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
|
$animation-type: linear;
$animation-speed: 175ms;
Game {
align: center middle;
layers: gameplay messages;
}
GameGrid {
layout: grid;
grid-size: 5 5;
layer: gameplay;
}
GameHeader {
background: $primary-background;
color: $text;
height: 1;
dock: top;
layer: gameplay;
}
GameHeader #app-title {
width: 60%;
}
GameHeader #moves {
width: 20%;
}
GameHeader #progress {
width: 20%;
}
Footer {
height: 1;
dock: bottom;
layer: gameplay;
}
GameCell {
width: 100%;
height: 100%;
background: $surface;
border: round $surface-darken-1;
transition: background $animation-speed $animation-type, color $animation-speed $animation-type;
}
GameCell:hover {
background: $panel-lighten-1;
border: round $panel;
}
GameCell.filled {
background: $secondary;
border: round $secondary-darken-1;
}
GameCell.filled:hover {
background: $secondary-lighten-1;
border: round $secondary;
}
WinnerMessage {
width: 50%;
height: 25%;
layer: messages;
visibility: hidden;
content-align: center middle;
text-align: center;
background: $success;
color: $text;
border: round;
padding: 2;
}
.visible {
visibility: visible;
}
Help {
border: round $primary-lighten-3;
}
/* five_by_five.tcss ends here */
|
