c0dba3730c2fc52d1a7273335a9d5bfb2f3f4a38
[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 .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
109 piece {
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 }