4765449953a4d13313efdac1c72b68f72d3d5e05
[pwl6.git] / src / yuu / data / yuu.css
1 /* Copyright 2014 Yukkuri Games
2 Licensed under the terms of the GNU GPL v2 or later
3 @license https://www.gnu.org/licenses/gpl-2.0.html
4 @source: https://yukkurigames.com/yuu/
5 */
6
7 @font-face {
8 font-family: 'Icons';
9 src: url('../../ext/fontstandard.woff') format('woff');
10 font-weight: normal;
11 font-style: normal;
12 }
13
14 @font-face {
15 font-family: 'Sans';
16 src: url('../../ext/FiraSans-UltraLight.woff');
17 font-weight: 200;
18 font-style: normal;
19 }
20
21 @font-face {
22 font-family: 'Sans';
23 src: url('../../ext/FiraSans-UltraLightItalic.woff');
24 font-weight: 200;
25 font-style: italic;
26 }
27
28 @font-face {
29 font-family: 'Sans';
30 src: url('../../ext/FiraSans-Regular.woff');
31 font-weight: 400;
32 font-style: normal;
33 }
34
35 @font-face {
36 font-family: 'Sans';
37 src: url('../../ext/FiraSans-Italic.woff');
38 font-weight: 400;
39 font-style: italic;
40 }
41
42 @font-face {
43 font-family: 'Sans';
44 src: url('../../ext/FiraSans-Bold.woff');
45 font-weight: 700;
46 font-style: normal;
47 }
48
49 @font-face {
50 font-family: 'Sans';
51 src: url('../../ext/FiraSans-BoldItalic.woff');
52 font-weight: 700;
53 font-style: italic;
54 }
55
56 @font-face {
57 font-family: 'Mono';
58 src: url('../../ext/FiraMono-Regular.woff');
59 font-weight: 400;
60 font-style: normal;
61 }
62
63 @font-face {
64 font-family: 'Mono';
65 src: url('../../ext/FiraMono-Bold.woff');
66 font-weight: 700;
67 font-style: normal;
68 }
69
70 pre, tt, code, kbd {
71 font-family: Mono, Icons, monospace;
72 }
73
74 body {
75 overflow: hidden;
76 margin: 0;
77 padding: 0;
78 font-family: Sans, Icons, sans-serif;
79 }
80
81 #yuu-canvas {
82 /* Specifying only width/height gives incorrect results on Chrome
83 33.0.1750.152 when fullscreen on > 1 devicePixelRatio. The
84 canvas takes on the correct size, but is centered in a page of
85 e.g. 2x for 2 DPR so you only see the top-left quadrant.
86
87 Specifying only top/bottom/left/right 0 also breaks, because in the
88 absence of a CSS size the browser tries to set the client size to
89 the canvas buffer size, which means it grows/shrinks by the DPR
90 every resize event.
91
92 Specifying all six attributes makes it work as desired. */
93 position: absolute;
94 width: 100%;
95 height: 100%;
96 bottom: 0;
97 left: 0;
98 right: 0;
99 top: 0;
100 }
101
102 #yuu-canvas:focus {
103 outline: inherit;
104 }
105
106 #yuu-licensing {
107 padding-left: 2em;
108 padding-right: 2em;
109 text-align: center;
110 font-size: 0.7em;
111 }
112
113 pre#yuu-licensing {
114 text-align: left;
115 }
116
117 [data-yuu-command] {
118 cursor: pointer;
119 }
120
121 /* Animations */
122
123 .yuu-from-top-right {
124 transform: translate(50vw, -110%) !important;
125 -webkit-transform: translate(50vw, -110%) !important;
126 }
127
128 .yuu-from-top {
129 transform: translate(-50%, -110%) !important;
130 -webkit-transform: translate(-50%, -110%) !important;
131 }
132
133 .yuu-fade {
134 opacity: 0 !important;
135 }
136
137 .yuu-squish {
138 margin-left: 0 !important;
139 margin-right: 0 !important;
140 max-width: 0 !important;
141 min-width: 0 !important;
142 overflow: hidden !important;
143 padding-left: 0em !important;
144 padding-right: 0em !important;
145 }
146
147 /* Toasts are short-lived feedback to user actions. */
148 .yuu-toast {
149 pointer-events: none;
150 background-color: rgba(50, 50, 50, 0.5);
151 border-radius: 0.2em;
152 border: solid rgba(255, 255, 255, 0.5) 1px;
153 color: #eee;
154 display: table-cell;
155 float: right;
156 font-size: 3em;
157 margin-left: 0.125em;
158 margin-right: 0.125em;
159 margin-top: 0.25em;
160 max-width: 60%;
161 /* Minimum size is a square: 1.25 + 0.125 * 2 for padding = 1.5em,
162 same as the line height. */
163 min-width: 1.4em;
164 padding: 0 0.125em;
165 padding-top: 0.15em;
166 position: relative;
167 text-align: center;
168 transition: all 0.5s;
169 -webkit-transition: all 0.5s;
170 }
171
172 /* Overlays are hidden HTML-based scenes that the director can load.
173 These appear over the game, and are modal. The primary use case is
174 configuration menus, copyright information, error feedback,
175 etc. */
176
177 .yuu-overlay {
178 background-color: rgba(50, 50, 50, 0.9);
179 border-radius: 0.2em;
180 border: solid rgba(255, 255, 255, 0.9) 1px;
181 color: #eee;
182 display: none;
183 width: 60%;
184 max-width: 600px;
185 min-width: 300px;
186 margin-left: auto;
187 margin-right: auto;
188 left: 50%;
189 max-height: 80%;
190 overflow: auto;
191 padding: 0 2em 1em 2em;
192 position: fixed;
193 transform: translate(-50%, 10vh) scale(1, 1);
194 -webkit-transform: translate(-50%, 10vh) scale(1, 1);
195 transition: transform 0.3s, opacity 0.3s;
196 -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
197 }
198
199 noscript .yuu-overlay {
200 display: block;
201 }
202
203 /* Overlays are focusable but should not show it - they are always
204 somewhere in the event tree when visible. */
205 .yuu-overlay:focus {
206 outline: inherit;
207 }
208
209 .yuu-overlay h1 {
210 font-size: 1.2em;
211 font-weight: normal;
212 text-align: center;
213 }
214
215 .yuu-overlay h2 {
216 font-size: 1.1em;
217 font-weight: normal;
218 }
219
220 .yuu-overlay hr {
221 margin-bottom: 1em;
222 margin-top: 0.5em;
223 }
224
225 /* For consistency overlays use custom CSS for controls, which
226 means we need a default focused behavior. */
227 .yuu-overlay *:focus {
228 outline: solid grey 1px;
229 }
230
231 div[data-yuu-command=dismiss] {
232 font-size: 1.5em;
233 width: 1.25em;
234 height: 1.25em;
235 text-align: center;
236 margin-left: -1.3333em;
237 top: 0;
238 position: sticky;
239 /* What's really wanted here is 'position: fixed within within the
240 parent' but that's not a thing. position: sticky is close
241 except it leaves it in normal layout flow, which requires
242 another hack... */
243 margin-bottom: -1em;
244 /* Don't take up so much vertical space during layout */
245 }
246
247 div[data-yuu-command=dismiss]:after {
248 content: "\274c";
249 }
250
251 /* Table layout for options screens. In general, two or three columns,
252 the leftmost is a simple control, the middle/last is a label, and
253 the last is a more complicated control like a range or select
254 dropdown. */
255
256 .yuu-options {
257 border-collapse: separate;
258 border-spacing: 0.25em;
259 }
260
261 .yuu-options td:first-child {
262 min-width: 2em;
263 white-space: nowrap;
264 }
265
266 .yuu-options td:last-child {
267 width: 100%;
268 }
269
270 /* De/re-style checkboxes. This means hiding the actual
271 checkbox and making it tiny, and instead filling in the
272 label immediately after it. */
273 input[type=checkbox][data-yuu-command] {
274 max-width: 0;
275 opacity: 0;
276 }
277
278 input[type=checkbox][data-yuu-command] + label[for] {
279 cursor: pointer;
280 display: inline-block;
281 text-align: center;
282 width: 1.3333em;
283 font-size: 1.25em;
284 }
285
286 input[type=checkbox][data-yuu-command] + label[for]:before {
287 display: inline-block;
288 padding-top: 0.2em;
289 }
290
291 input[type=checkbox][data-yuu-command] + label[for]:before {
292 content: "\2610";
293 }
294
295 input[type=checkbox][data-yuu-command]:checked + label[for]:before {
296 content: "\2611";
297 }
298
299 input[type=checkbox][data-yuu-command]:focus + label[for] {
300 outline: solid grey 1px;
301 }
302
303 /* De/re-style ranges. */
304 input[type=range][data-yuu-command] {
305 -webkit-appearance: none;
306 background-color: gray;
307 width: 95%;
308 }
309
310 input[type=range][data-yuu-command]::-moz-range-track {
311 background: gray;
312 border: none;
313 outline: none;
314 }
315
316 input[type=range][data-yuu-command]::-webkit-slider-thumb {
317 -webkit-appearance: none;
318 background-color: #444;
319 width: 1.5em;
320 height: 1em;
321 }
322
323 input[type=range][data-yuu-command]::-moz-range-thumb {
324 border: none;
325 background-color: #444;
326 width: 1.5em;
327 height: 1em;
328 }
329
330 /* Special-case icons for the mute checkbox. */
331
332 input[type=checkbox][data-yuu-command=mute]:checked + label[for]:before {
333 content: "\1f508";
334 }
335
336 input[type=checkbox][data-yuu-command=mute] + label[for]:before {
337 content: "\1f50a";
338 }
339
340 @-moz-keyframes spin {
341 from { -moz-transform: rotate(0deg); }
342 to { -moz-transform: rotate(360deg); }
343 }
344
345 @-webkit-keyframes spin {
346 from { -webkit-transform: rotate(0deg); }
347 to { -webkit-transform: rotate(360deg); }
348 }
349
350 @keyframes spin {
351 from { transform: rotate(0deg); }
352 to { transform: rotate(360deg); }
353 }
354
355 .yuu-spinner:after {
356 content: "\1f501";
357 -webkit-animation: spin 1s linear infinite;
358 -moz-animation: spin 1s linear infinite;
359 animation: spin 1s linear infinite;
360 display: inline-block;
361 }
362
363 dl {
364 text-align: center;
365 }
366
367 dt {
368 margin-top: 1em;
369 margin-bottom: 0.25em;
370 font-size: 0.8em;
371 font-weight: 200;
372 }
373
374 dd {
375 margin-left: 0;
376 }
377
378 body.standalone .browser, body.browser .standalone {
379 display: none;
380 }
381
382 #preferences {
383 -webkit-touch-callout: none;
384 -webkit-user-select: none;
385 -moz-user-select: none;
386 -ms-user-select: none;
387 user-select: none;
388 }