638a588c8f88c50945e251392e0ac110c65fc753
[xogo.git] / common.css
1 body {
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 */
17 footer {
18 position: absolute;
19 bottom: 0;
20 left: 0;
21 right: 0;
22 height: 50px;
23 }
24
25 button {
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
39 button:hover {
40 background-color: darkblue;
41 }
42
43 button.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 p.words {
77 line-height: 0.9em;
78 }
79 .word {
80 cursor: pointer;
81 padding: 3px;
82 display: inline-block;
83 margin: 2px;
84 }
85 .highlight-word {
86 background-color: lightblue;
87 }
88
89 /* Game link div + custom game "button" */
90 #gameLink span, #gameLink a, #playCustom {
91 text-decoration: underline;
92 color: blue;
93 cursor: pointer;
94 }
95
96 #selectVariant {
97 margin-right: 15px;
98 }
99
100 /* Board container (without reserves) */
101 #chessboard {
102 position: absolute;
103 cursor: pointer;
104 }
105
106 /* Board container can be resized */
107 .resizeable {
108 resize: both;
109 overflow: hidden;
110 min-width: 200px;
111 min-height: 200px;
112 }
113
114 piece {
115 position: absolute;
116 top: 0;
117 left: 0;
118 background-size: cover;
119 z-index: 2;
120 will-change: transform;
121 pointer-events: none;
122 }
123
124 /* Drawing of the board */
125 #chessboard_SVG {
126 width: 100%;
127 height: 100%;
128 }
129
130 .dark-square {
131 fill: #b58863;
132 }
133 .light-square {
134 fill: #f0d9b5;
135 }
136 .in-shadow {
137 filter: brightness(50%);
138 }
139
140 .reserves {
141 position: absolute;
142 display: block;
143 cursor: pointer;
144 }
145
146 .reserve-cell {
147 position: relative;
148 display: block;
149 float: left;
150 }
151
152 /* Pieces' counter for reserves */
153 .reserve-num {
154 color: red;
155 position: absolute;
156 display: block;
157 font-weight: bold;
158 /*z-index: 10;*/
159 }
160
161 /* Choices div after a promotion (TODO: do not hide board) */
162 #choices, .choice {
163 position: absolute;
164 cursor: pointer;
165 }
166
167 /* https://theanam.github.io/css-only-loaders/ ("hour-glass") */
168 :root{
169 --loader-width: 70px;
170 --loader-height: 70px;
171 --loader-color-primary: #141D58;
172 --loader-color-secondary: #EEE;
173 --line-width: 3px;
174 --animation-duration: 3s;
175 --loader-initial-scale: 0.1;
176 }
177 .loader,.loader:before,.loader:after{
178 box-sizing: border-box;
179 flex-grow: 0;
180 flex-shrink: 0;
181 }
182
183 @keyframes slide {
184 0% {
185 transform: translateY(0%);
186 }
187 25% {
188 transform: translateY(100%);
189 }
190 50% {
191 transform: translateY(100%);
192 }
193 75% {
194 transform: translateY(0%);
195 }
196 100% {
197 transform: translateY(0%);
198 }
199 }
200
201 @keyframes spin {
202 0% {
203 transform: rotate(0deg);
204 }
205 25% {
206 transform: rotate(0deg);
207 }
208 50% {
209 transform: rotate(180deg);
210 }
211 75% {
212 transform: rotate(180deg);
213 }
214 100% {
215 transform: rotate(360deg);
216 }
217 }
218
219 .loader.hour-glass {
220 position: relative;
221 width: var(--loader-width, 100px);
222 height: var(--loader-height, 100px);
223 background-color: var(--loader-color-primary, #00f);
224 -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
225 clip-path: polygon(0% 0%, 100% 0%, 50% 50%, 100% 100%, 0% 100%, 50% 50%);
226 overflow: hidden;
227 animation: spin var(--animation-duration, 4s) infinite ease-in-out;
228 margin: 20px auto;
229 }
230
231 .hour-glass:before {
232 content: "";
233 position: absolute;
234 top: 0px;
235 left: 0px;
236 width: var(--loader-width, 100px);
237 height: 50%;
238 background-color: var(--loader-color-secondary, #eee);
239 animation: slide var(--animation-duration, 4s) infinite ease-in-out;
240 }