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/
9 src: url
('../../ext/fontstandard.woff') format
('woff');
16 src: url
('../../ext/FiraSans-UltraLight.woff');
23 src: url
('../../ext/FiraSans-UltraLightItalic.woff');
30 src: url
('../../ext/FiraSans-Regular.woff');
37 src: url
('../../ext/FiraSans-Italic.woff');
44 src: url
('../../ext/FiraSans-Bold.woff');
51 src: url
('../../ext/FiraSans-BoldItalic.woff');
58 src: url
('../../ext/FiraMono-Regular.woff');
65 src: url
('../../ext/FiraMono-Bold.woff');
71 font-family: Mono
, Icons
, monospace
;
78 font-family: Sans
, Icons
, 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 noscript
.yuu-overlay
{
203 /* Overlays are focusable but should not show it - they are always
204 somewhere in the event tree when visible. */
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;
231 div
[data-yuu-command
=dismiss
] {
236 margin-left: -1.3333em;
241 div
[data-yuu-command
=dismiss
]:after
{
245 /* Table layout for options screens. In general, two or three columns,
246 the leftmost is a simple control, the middle/last is a label, and
247 the last is a more complicated control like a range or select
251 border-collapse: separate
;
252 border-spacing: 0.25em;
255 .yuu-options td:first-child {
260 .yuu-options td:last-child {
264 /* De/re-style checkboxes. This means hiding the actual
265 checkbox and making it tiny, and instead filling in the
266 label immediately after it. */
267 input
[type
=checkbox
][data-yuu-command
] {
272 input
[type
=checkbox
][data-yuu-command
] + label
[for
] {
274 display: inline-block
;
280 input
[type
=checkbox
][data-yuu-command
] + label
[for
]:before
{
281 display: inline-block
;
285 input
[type
=checkbox
][data-yuu-command
] + label
[for
]:before
{
289 input
[type
=checkbox
][data-yuu-command
]:checked
+ label
[for
]:before
{
293 input
[type
=checkbox
][data-yuu-command
]:focus
+ label
[for
] {
294 outline: solid grey
1px;
297 /* De/re-style ranges. */
298 input
[type
=range
][data-yuu-command
] {
299 -webkit-appearance: none
;
300 background-color: gray
;
304 input
[type
=range
][data-yuu-command
]::-moz-range-track
{
310 input
[type
=range
][data-yuu-command
]::-webkit-slider-thumb
{
311 -webkit-appearance: none
;
312 background-color: #444;
317 input
[type
=range
][data-yuu-command
]::-moz-range-thumb
{
319 background-color: #444;
324 /* Special-case icons for the mute checkbox. */
326 input
[type
=checkbox
][data-yuu-command
=mute
]:checked
+ label
[for
]:before
{
330 input
[type
=checkbox
][data-yuu-command
=mute
] + label
[for
]:before
{
334 @-moz-keyframes spin
{
335 from
{ -moz-transform: rotate
(0deg); }
336 to
{ -moz-transform: rotate
(360deg); }
339 @-webkit-keyframes spin
{
340 from
{ -webkit-transform: rotate
(0deg); }
341 to
{ -webkit-transform: rotate
(360deg); }
345 from
{ transform: rotate
(0deg); }
346 to
{ transform: rotate
(360deg); }
351 -webkit-animation: spin
1s linear infinite
;
352 -moz-animation: spin
1s linear infinite
;
353 animation: spin
1s linear infinite
;
354 display: inline-block
;
363 margin-bottom: 0.25em;
372 body
.standalone
.browser
, body
.browser
.standalone
{