1 /* Copyright 2014 Yukkuri Games
2 Licensed under the terms of the GNU GPL v2 or later
3 @license http://www.gnu.org/licenses/gpl-2.0.html
4 @source: http://yukkurigames.com/yuu/
8 font-family: 'FontAwesome';
9 src: url
('../../ext/font-awesome.woff') format
('woff');
15 font-family: 'Fira Sans';
16 src: url
('../../ext/FiraSans-UltraLight.woff');
22 font-family: 'Fira Sans';
23 src: url
('../../ext/FiraSans-UltraLightItalic.woff');
29 font-family: 'Fira Sans';
30 src: url
('../../ext/FiraSans-Regular.woff');
36 font-family: 'Fira Sans';
37 src: url
('../../ext/FiraSans-Italic.woff');
43 font-family: 'Fira Sans';
44 src: url
('../../ext/FiraSans-Bold.woff');
50 font-family: 'Fira Sans';
51 src: url
('../../ext/FiraSans-BoldItalic.woff');
57 font-family: 'Fira Mono';
58 src: url
('../../ext/FiraMono-Regular.woff');
64 font-family: 'Fira Mono';
65 src: url
('../../ext/FiraMono-Bold.woff');
71 font-family: 'Fira Mono', FontAwesome
, monospace
;
78 font-family: 'Fira Sans', FontAwesome
, sans-serif
;
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.
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
92 Specifying all six attributes makes it work as desired. */
123 .yuu-from-top-right {
124 transform: translate
(50vw, -110%) !important
;
125 -webkit-transform: translate
(50vw, -110%) !important
;
129 transform: translate
(-50%, -110%) !important
;
130 -webkit-transform: translate
(-50%, -110%) !important
;
134 opacity: 0 !important
;
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
;
147 /* Toasts are short-lived feedback to user actions. */
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;
157 margin-left: 0.125em;
158 margin-right: 0.125em;
161 /* Minimum size is a square: 1.25 + 0.125 * 2 for padding = 1.5em,
162 same as the line height. */
168 transition: all
0.5s;
169 -webkit-transition: all
0.5s;
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,
178 background-color: rgba
(50, 50, 50, 0.9);
179 border-radius: 0.2em;
180 border: solid rgba
(255, 255, 255, 0.9) 1px;
191 padding: 0 2em 1em 2em;
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;
199 /* Overlays are focusable but should not show it - they are always
200 somewhere in the event tree when visible. */
221 /* For consistency overlays use custom CSS for controls, which
222 means we need a default focused behavior. */
223 .yuu-overlay *:focus {
224 outline: solid grey
1px;
227 div
[data-yuu-command
=dismiss
] {
232 margin-left: -1.3333em;
237 div
[data-yuu-command
=dismiss
]:after
{
241 /* Table layout for options screens. In general, two or three columns,
242 the leftmost is a simple control, the middle/last is a label, and
243 the last is a more complicated control like a range or select
247 border-collapse: separate
;
248 border-spacing: 0.25em;
251 .yuu-options td:first-child {
256 .yuu-options td:last-child {
260 /* De/re-style checkboxes. This means hiding the actual
261 checkbox and making it tiny, and instead filling in the
262 label immediately after it. */
263 input
[type
=checkbox
][data-yuu-command
] {
268 input
[type
=checkbox
][data-yuu-command
] + label
[for
] {
270 display: inline-block
;
276 input
[type
=checkbox
][data-yuu-command
] + label
[for
]:before
{
277 display: inline-block
;
281 input
[type
=checkbox
][data-yuu-command
] + label
[for
]:before
{
285 input
[type
=checkbox
][data-yuu-command
]:checked
+ label
[for
]:before
{
289 input
[type
=checkbox
][data-yuu-command
]:focus
+ label
[for
] {
290 outline: solid grey
1px;
293 /* De/re-style ranges. */
294 input
[type
=range
][data-yuu-command
] {
295 -webkit-appearance: none
;
296 background-color: gray
;
299 input
[type
=range
][data-yuu-command
]::-moz-range-track
{
305 input
[type
=range
][data-yuu-command
]::-webkit-slider-thumb
{
306 -webkit-appearance: none
;
307 background-color: #444;
312 input
[type
=range
][data-yuu-command
]::-moz-range-thumb
{
314 background-color: #444;
319 /* Special-case icons for the mute checkbox. */
321 input
[type
=checkbox
][data-yuu-command
=mute
]:checked
+ label
[for
]:before
{
325 input
[type
=checkbox
][data-yuu-command
=mute
] + label
[for
]:before
{
329 @-moz-keyframes spin
{
330 from
{ -moz-transform: rotate
(0deg); }
331 to
{ -moz-transform: rotate
(360deg); }
334 @-webkit-keyframes spin
{
335 from
{ -webkit-transform: rotate
(0deg); }
336 to
{ -webkit-transform: rotate
(360deg); }
340 from
{ transform: rotate
(0deg); }
341 to
{ transform: rotate
(360deg); }
346 -webkit-animation: spin
1s linear infinite
;
347 -moz-animation: spin
1s linear infinite
;
348 animation: spin
1s linear infinite
;
349 display: inline-block
;
358 margin-bottom: 0.25em;
367 body
.standalone
.browser
, body
.browser
.standalone
{