chessy/styles.css at master · hookdump/chessy · 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
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
body {
  font-family: verdana, tahoma, arial;
}

.board {
  border: 1px solid black;
  display: inline-block;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.row {

}

.square {
  background-color: green;
  width: 64px;
  height: 64px;
  display: inline-block;
  text-align: center;
  line-height: 64px;
  position: relative;
}

.identifier {
  line-height: 8px;
  top: 3px;
  left: 3px;
  position: absolute;
  font-size: 8px;
  opacity: 0.5;
}

/* standard colors */
.row:nth-child(odd)   .square:nth-child(even)  { background: #87A569; }
.row:nth-child(odd)   .square:nth-child(odd)   { background: #FFFEDE; }
.row:nth-child(even)   .square:nth-child(odd)  { background: #87A569; }
.row:nth-child(even)   .square:nth-child(even) { background: #FFFEDE; }

/* dark colors */
.row:nth-child(odd)   .square:nth-child(even)  { background: #202020; }
.row:nth-child(odd)   .square:nth-child(odd)   { background: #404040; }
.row:nth-child(even)   .square:nth-child(odd)  { background: #202020; }
.row:nth-child(even)   .square:nth-child(even) { background: #404040; }

.identifier {
  color: white;
}
.heat-1 .identifier,
.heat-2 .identifier,
.heat-3 .identifier,
.heat-4 .identifier,
.heat-5 .identifier,
.heat-6 .identifier {
  color: black;
}


.piece {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url('img/sprites_04.png');
  background-size: cover;
  opacity: 1;
}

.heat-6 { background-color: rgb(150, 0, 0) !important; }
.heat-5 { background-color: rgb(255, 50, 0) !important; }
.heat-4 { background-color: rgb(255, 150, 0) !important; }
.heat-3 { background-color: rgb(255, 255, 0) !important; }
.heat-2 { background-color: rgb(200, 255, 0) !important; }
.heat-1 { background-color: rgb(0, 255, 0) !important; }


/* BORDER MODE */
/*
.heat-6 { border: 4px solid rgb(150, 0, 0) !important; }
.heat-5 { border: 4px solid rgb(255, 50, 0) !important; }
.heat-4 { border: 4px solid rgb(255, 150, 0) !important; }
.heat-3 { border: 4px solid rgb(255, 255, 0) !important; }
.heat-2 { border: 4px solid rgb(200, 255, 0) !important; }
.heat-1 { border: 4px solid rgb(0, 255, 0) !important; }
*/

/* DISPLAY SQUARE COLORS */
/*
.txt {
  background-color: rgba(0,0,0,0.75);
  padding: 3px 7px;
  border-radius: 4px;
}

.heat-6 .txt { color: rgb(150, 0, 0) !important; }
.heat-5 .txt { color: rgb(255, 50, 0) !important; }
.heat-4 .txt { color: rgb(255, 150, 0) !important; }
.heat-3 .txt { color: rgb(255, 255, 0) !important; }
.heat-2 .txt { color: rgb(200, 255, 0) !important; }
.heat-1 .txt { color: rgb(0, 255, 0) !important; }

.txt.hide {
  background-color: transparent;
}
*/