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
146
|
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
@font-face {
font-family: "shashki";
src:url("/static/fonts/shashki.eot");
src:url("/static/fonts/shashki.eot?#iefix") format("embedded-opentype"),
url("/static/fonts/shashki.woff") format("woff"),
url("/static/fonts/shashki.ttf") format("truetype"),
url("/static/fonts/shashki.svg#shashki") format("svg");
font-weight: normal;
font-style: normal;
}
.navbar, .nav-container{
border-radius: 0 !important;
}
@keyframes coloranim{
0% {color: #ffffff;}
20% {color: #1678c4;}
40% {color: #13c055;}
60% {color: #bea516;}
80% {color: #cc1313;}
100% {color: #ffffff;}
}
.navbar-brand{
font-family: "Permanent Marker", cursive;
font-size: 28px;
color: #fff !important;
}
.navbar-brand:hover{
animation-name: coloranim;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.btn{
margin-top: 10px;
}
.alert .btn, .panel-heading .btn{
margin: 0;
}
.panel-heading{
font-weight: 700;
}
.player-name.active{
font-weight: 700;
color: rgb(0, 158, 0);
}
#board{
table-layout: fixed;
width: 416px;
height: 416px;
margin: 0 auto;
border: 3px solid #000;
background:#FFECCA;
}
#board .square{
width: 52px !important;
height: 52px !important;
font-size: 42px;
line-height: 45px;
text-align: center;
vertical-align: middle;
overflow: hidden;
}
#b1, #d1, #f1, #h1, #a2, #c2, #e2, #g2, #b3, #d3, #f3, #h3, #a4, #c4, #e4, #g4,
#b5, #d5, #f5, #h5, #a6, #c6, #e6, #g6, #b7, #d7, #f7, #h7, #a8, #c8, #e8, #g8 {
background:#FFECCA;
}
#a1, #c1, #e1, #g1, #b2, #d2, #f2, #h2, #a3, #c3, #e3, #g3, #b4, #d4, #f4, #h4,
#a5, #c5, #e5, #g5, #b6, #d6, #f6, #h6, #a7, #c7, #e7, #g7, #b8, #d8, #f8, #h8 {
background:#684B33;
}
.piece:before{
font-family: "shashki" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
font-size: 42px;
line-height: 45px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
vertical-align: middle;
}
.piece.white{
color: #992E2E;
}
.piece.black{
color: #000;
}
.white.pawn:before {
content: "\63";
}
.white.dame:before {
content: "\64";
}
.black.pawn:before {
content: "\63";
}
.black.dame:before {
content: "\64";
}
@keyframes move-anim{
0% {background-color: #FFECCA;}
50% {background-color: #adffad;}
100% {background-color: #FFECCA;}
}
.square.selected{
background-color: #adffad !important;
}
.square.move{
animation-name: move-anim;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.square.last-move{
box-sizing: border-box;
border: 3px solid #00cc00;
}
|
