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     position: sticky;
 238     top: 0;
 239 }
 240
 241 div[data-yuu-command=dismiss]:after {
 242     content: "\274c";
 243 }
 244
 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
 248    dropdown. */
 249
 250 .yuu-options {
 251     border-collapse: separate;
 252     border-spacing: 0.25em;
 253 }
 254
 255 .yuu-options td:first-child {
 256     min-width: 2em;
 257     white-space: nowrap;
 258 }
 259
 260 .yuu-options td:last-child {
 261     width: 100%;
 262 }
 263
 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] {
 268     max-width: 0;
 269     opacity: 0;
 270 }
 271
 272 input[type=checkbox][data-yuu-command] + label[for] {
 273     cursor: pointer;
 274     display: inline-block;
 275     text-align: center;
 276     width: 1.3333em;
 277     font-size: 1.25em;
 278 }
 279
 280 input[type=checkbox][data-yuu-command] + label[for]:before {
 281     display: inline-block;
 282     padding-top: 0.2em;
 283 }
 284
 285 input[type=checkbox][data-yuu-command] + label[for]:before {
 286     content: "\2610";
 287 }
 288
 289 input[type=checkbox][data-yuu-command]:checked + label[for]:before {
 290     content: "\2611";
 291 }
 292
 293 input[type=checkbox][data-yuu-command]:focus + label[for] {
 294     outline: solid grey 1px;
 295 }
 296
 297 /* De/re-style ranges. */
 298 input[type=range][data-yuu-command] {
 299     -webkit-appearance: none;
 300     background-color: gray;
 301     width: 95%;
 302 }
 303
 304 input[type=range][data-yuu-command]::-moz-range-track {
 305     background: gray;
 306     border: none;
 307     outline: none;
 308 }
 309
 310 input[type=range][data-yuu-command]::-webkit-slider-thumb {
 311     -webkit-appearance: none;
 312     background-color: #444;
 313     width: 1.5em;
 314     height: 1em;
 315 }
 316
 317 input[type=range][data-yuu-command]::-moz-range-thumb {
 318     border: none;
 319     background-color: #444;
 320     width: 1.5em;
 321     height: 1em;
 322 }
 323
 324 /* Special-case icons for the mute checkbox. */
 325
 326 input[type=checkbox][data-yuu-command=mute]:checked + label[for]:before {
 327     content: "\1f508";
 328 }
 329
 330 input[type=checkbox][data-yuu-command=mute] + label[for]:before {
 331     content: "\1f50a";
 332 }
 333
 334 @-moz-keyframes spin {
 335     from { -moz-transform: rotate(0deg); }
 336     to { -moz-transform: rotate(360deg); }
 337 }
 338
 339 @-webkit-keyframes spin {
 340     from { -webkit-transform: rotate(0deg); }
 341     to { -webkit-transform: rotate(360deg); }
 342 }
 343
 344 @keyframes spin {
 345    from { transform: rotate(0deg); }
 346    to { transform: rotate(360deg); }
 347 }
 348
 349 .yuu-spinner:after {
 350     content: "\1f501";
 351     -webkit-animation: spin 1s linear infinite;
 352     -moz-animation: spin 1s linear infinite;
 353     animation: spin 1s linear infinite;
 354     display: inline-block;
 355 }
 356
 357 dl {
 358     text-align: center;
 359 }
 360
 361 dt {
 362     margin-top: 1em;
 363     margin-bottom: 0.25em;
 364     font-size: 0.8em;
 365     font-weight: 200;
 366 }
 367
 368 dd {
 369     margin-left: 0;
 370 }
 371
 372 body.standalone .browser, body.browser .standalone {
 373     display: none;
 374 }