First commit
[xogo.git] / common.css
... / ...
CommitLineData
1body {
2 margin: 0;
3 text-align: center;
4 background-color: #f8f8f8;
5 font-family: Arial, Verdana, Tahoma, sans-serif;
6}
7
8#gameInfos, #boardContainer, #gameStopped, #pendingSeek, #pendingRematch, #newGameForm {
9 display: none;
10}
11
12#gameStopped > h1 {
13 margin-bottom: 10px;
14}
15
16/* Sticky footer */
17footer {
18 position: absolute;
19 bottom: 0;
20 left: 0;
21 right: 0;
22 height: 50px;
23}
24
25button {
26 background-color: green;
27 border: none;
28 color: white;
29 padding: 10px 15px;
30 text-align: center;
31 text-decoration: none;
32 display: inline-block;
33 font-size: 1em;
34 cursor: pointer;
35 border-radius: 20%;
36 margin: 15px 0;
37}
38
39button:hover {
40 background-color: darkblue;
41}
42
43button.block-btn {
44 display: block;
45 margin: 30px auto 20px auto;
46 font-size: 1.5em;
47 padding: 15px 32px;
48}
49
50#upLeftInfos {
51 position: absolute;
52 left: 0;
53 top: 0;
54}
55
56#upRightStop {
57 position: absolute;
58 left: calc(100% - 25px);
59 top: 0;
60}
61
62#upLeftInfos > img, #upRightStop > img {
63 width: 25px;
64 cursor: pointer;
65}
66
67#ng-select {
68 margin-bottom: 20px;
69}
70
71#ng-name {
72 /* TODO */
73}
74
75/* Options when starting custom game */
76.word {
77 cursor: pointer;
78 padding: 3px;
79}
80.highlight-word {
81 background-color: lightblue;
82}
83
84/* Game link div + custom game "button" */
85#gameLink span, #gameLink a, #playCustom {
86 text-decoration: underline;
87 color: blue;
88 cursor: pointer;
89}
90
91#selectVariant {
92 margin-right: 15px;
93}
94
95/* Board container (without reserves) */
96#chessboard {
97 position: absolute;
98 cursor: pointer;
99}
100
101/* Board container can be resized */
102.resizeable {
103 resize: both;
104 overflow: hidden;
105 min-width: 200px;
106 min-height: 200px;
107}
108
109piece {
110 position: absolute;
111 top: 0;
112 left: 0;
113 background-size: cover;
114 z-index: 2;
115 will-change: transform;
116 pointer-events: none;
117}
118
119/* Drawing of the board */
120#chessboard_SVG {
121 width: 100%;
122 height: 100%;
123}
124
125.reserves {
126 position: absolute;
127 display: block;
128 cursor: pointer;
129}
130
131.reserve-cell {
132 position: relative;
133 display: block;
134 float: left;
135}
136
137/* Pieces' counter for reserves */
138.reserve-num {
139 color: red;
140 position: absolute;
141 display: block;
142 font-weight: bold;
143 /*z-index: 10;*/
144}
145
146/* Choices div after a promotion (TODO: do not hide board) */
147#choices, .choice {
148 position: absolute;
149 cursor: pointer;
150}
151
152/* https://theanam.github.io/css-only-loaders/ ("hour-glass") */
153:root{
154 --loader-width: 70px;
155 --loader-height: 70px;
156 --loader-color-primary: #141D58;
157 --loader-color-secondary: #EEE;
158 --line-width: 3px;
159 --animation-duration: 3s;
160 --loader-initial-scale: 0.1;
161}
162.loader,.loader:before,.loader:after{
163 box-sizing: border-box;
164 flex-grow: 0;
165 flex-shrink: 0;
166}
167
168@keyframes slide {
169 0% {
170 transform: translateY(0%);
171 }
172 25% {
173 transform: translateY(100%);
174 }
175 50% {
176 transform: translateY(100%);
177 }
178 75% {
179 transform: translateY(0%);
180 }
181 100% {
182 transform: translateY(0%);
183 }
184}
185
186@keyframes spin {
187 0% {
188 transform: rotate(0deg);
189 }
190 25% {
191 transform: rotate(0deg);
192 }
193 50% {
194 transform: rotate(180deg);
195 }
196 75% {
197 transform: rotate(180deg);
198 }
199 100% {
200 transform: rotate(360deg);
201 }
202}
203
204.loader.hour-glass {
205 position: relative;
206 width: var(--loader-width, 100px);
207 height: var(--loader-height, 100px);
208 background-color: var(--loader-color-primary, #00f);
209 -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
210 clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
211 overflow: hidden;
212 animation: spin var(--animation-duration, 4s) infinite ease-in-out;
213 margin: 20px auto;
214}
215
216.hour-glass:before {
217 content: "";
218 position: absolute;
219 top: 0px;
220 left: 0px;
221 width: var(--loader-width, 100px);
222 height: 50%;
223 background-color: var(--loader-color-secondary, #eee);
224 animation: slide var(--animation-duration, 4s) infinite ease-in-out;
225}