4765449953a4d13313efdac1c72b68f72d3d5e05
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/
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;
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
244 /* Don't take up so much vertical space during layout */
247 div
[data-yuu-command
=dismiss
]:after
{
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
257 border-collapse: separate
;
258 border-spacing: 0.25em;
261 .yuu-options td:first-child {
266 .yuu-options td:last-child {
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
] {
278 input
[type
=checkbox
][data-yuu-command
] + label
[for
] {
280 display: inline-block
;
286 input
[type
=checkbox
][data-yuu-command
] + label
[for
]:before
{
287 display: inline-block
;
291 input
[type
=checkbox
][data-yuu-command
] + label
[for
]:before
{
295 input
[type
=checkbox
][data-yuu-command
]:checked
+ label
[for
]:before
{
299 input
[type
=checkbox
][data-yuu-command
]:focus
+ label
[for
] {
300 outline: solid grey
1px;
303 /* De/re-style ranges. */
304 input
[type
=range
][data-yuu-command
] {
305 -webkit-appearance: none
;
306 background-color: gray
;
310 input
[type
=range
][data-yuu-command
]::-moz-range-track
{
316 input
[type
=range
][data-yuu-command
]::-webkit-slider-thumb
{
317 -webkit-appearance: none
;
318 background-color: #444;
323 input
[type
=range
][data-yuu-command
]::-moz-range-thumb
{
325 background-color: #444;
330 /* Special-case icons for the mute checkbox. */
332 input
[type
=checkbox
][data-yuu-command
=mute
]:checked
+ label
[for
]:before
{
336 input
[type
=checkbox
][data-yuu-command
=mute
] + label
[for
]:before
{
340 @-moz-keyframes spin
{
341 from
{ -moz-transform: rotate
(0deg); }
342 to
{ -moz-transform: rotate
(360deg); }
345 @-webkit-keyframes spin
{
346 from
{ -webkit-transform: rotate
(0deg); }
347 to
{ -webkit-transform: rotate
(360deg); }
351 from
{ transform: rotate
(0deg); }
352 to
{ transform: rotate
(360deg); }
357 -webkit-animation: spin
1s linear infinite
;
358 -moz-animation: spin
1s linear infinite
;
359 animation: spin
1s linear infinite
;
360 display: inline-block
;
369 margin-bottom: 0.25em;
378 body
.standalone
.browser
, body
.browser
.standalone
{
383 -webkit-touch-callout: none
;
384 -webkit-user-select: none
;
385 -moz-user-select: none
;
386 -ms-user-select: none
;