src/yuu/data/yuu.css

   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/
   5 */
   6
   7 @font-face {
   8   font-family: 'FontAwesome';
   9   src: url('../../ext/font-awesome.woff') format('woff');
  10   font-weight: normal;
  11   font-style: normal;
  12 }
  13
  14 @font-face {
  15     font-family: 'Fira Sans';
  16     src: url('../../ext/FiraSans-UltraLight.woff');
  17     font-weight: 200;
  18     font-style: normal;
  19 }
  20
  21 @font-face {
  22     font-family: 'Fira Sans';
  23     src: url('../../ext/FiraSans-UltraLightItalic.woff');
  24     font-weight: 200;
  25     font-style: italic;
  26 }
  27
  28 @font-face {
  29     font-family: 'Fira Sans';
  30     src: url('../../ext/FiraSans-Regular.woff');
  31     font-weight: 400;
  32     font-style: normal;
  33 }
  34
  35 @font-face {
  36     font-family: 'Fira Sans';
  37     src: url('../../ext/FiraSans-Italic.woff');
  38     font-weight: 400;
  39     font-style: italic;
  40 }
  41
  42 @font-face {
  43     font-family: 'Fira Sans';
  44     src: url('../../ext/FiraSans-Bold.woff');
  45     font-weight: 700;
  46     font-style: normal;
  47 }
  48
  49 @font-face {
  50     font-family: 'Fira Sans';
  51     src: url('../../ext/FiraSans-BoldItalic.woff');
  52     font-weight: 700;
  53     font-style: italic;
  54 }
  55
  56 @font-face {
  57     font-family: 'Fira Mono';
  58     src: url('../../ext/FiraMono-Regular.woff');
  59     font-weight: 400;
  60     font-style: normal;
  61 }
  62
  63 @font-face {
  64     font-family: 'Fira 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: 'Fira Mono', FontAwesome, monospace;
  72 }
  73
  74 body {
  75     overflow: hidden;
  76     margin: 0;
  77     padding: 0;
  78     font-family: 'Fira Sans', FontAwesome, 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 /* Overlays are focusable but should not show it - they are always
 200    somewhere in the event tree when visible. */
 201 .yuu-overlay:focus {
 202     outline: inherit;
 203 }
 204
 205 .yuu-overlay h1 {
 206     font-size: 1.2em;
 207     font-weight: normal;
 208     text-align: center;
 209 }
 210
 211 .yuu-overlay h2 {
 212     font-size: 1.1em;
 213     font-weight: normal;
 214 }
 215
 216 .yuu-overlay hr {
 217     margin-bottom: 1em;
 218     margin-top: 0.5em;
 219 }
 220
 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;
 225 }
 226
 227 div[data-yuu-command=dismiss] {
 228     font-size: 1.5em;
 229     width: 1.25em;
 230     height: 1.25em;
 231     text-align: center;
 232     margin-left: -1.3333em;
 233     position: sticky;
 234     top: 0;
 235 }
 236
 237 div[data-yuu-command=dismiss]:after {
 238     content: "\f00d";
 239 }
 240
 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
 244    dropdown. */
 245
 246 .yuu-options {
 247     border-collapse: separate;
 248     border-spacing: 0.25em;
 249 }
 250
 251 .yuu-options td:first-child {
 252     min-width: 2em;
 253     white-space: nowrap;
 254 }
 255
 256 .yuu-options td:last-child {
 257     width: 100%;
 258 }
 259
 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] {
 264     max-width: 0;
 265     opacity: 0;
 266 }
 267
 268 input[type=checkbox][data-yuu-command] + label[for] {
 269     cursor: pointer;
 270     display: inline-block;
 271     text-align: center;
 272     width: 1.3333em;
 273     font-size: 1.25em;
 274 }
 275
 276 input[type=checkbox][data-yuu-command] + label[for]:before {
 277     display: inline-block;
 278     padding-top: 0.2em;
 279 }
 280
 281 input[type=checkbox][data-yuu-command] + label[for]:before {
 282     content: "\f096";
 283 }
 284
 285 input[type=checkbox][data-yuu-command]:checked + label[for]:before {
 286     content: "\f046";
 287 }
 288
 289 input[type=checkbox][data-yuu-command]:focus + label[for] {
 290     outline: solid grey 1px;
 291 }
 292
 293 /* De/re-style ranges. */
 294 input[type=range][data-yuu-command] {
 295     -webkit-appearance: none;
 296     background-color: gray;
 297 }
 298
 299 input[type=range][data-yuu-command]::-moz-range-track {
 300     background: gray;
 301     border: none;
 302     outline: none;
 303 }
 304
 305 input[type=range][data-yuu-command]::-webkit-slider-thumb {
 306     -webkit-appearance: none;
 307     background-color: #444;
 308     width: 1.5em;
 309     height: 1em;
 310 }
 311
 312 input[type=range][data-yuu-command]::-moz-range-thumb {
 313     border: none;
 314     background-color: #444;
 315     width: 1.5em;
 316     height: 1em;
 317 }
 318
 319 /* Special-case icons for the mute checkbox. */
 320
 321 input[type=checkbox][data-yuu-command=mute]:checked + label[for]:before {
 322     content: "\f026";
 323 }
 324
 325 input[type=checkbox][data-yuu-command=mute] + label[for]:before {
 326     content: "\f028";
 327 }
 328
 329 @-moz-keyframes spin {
 330     from { -moz-transform: rotate(0deg); }
 331     to { -moz-transform: rotate(360deg); }
 332 }
 333
 334 @-webkit-keyframes spin {
 335     from { -webkit-transform: rotate(0deg); }
 336     to { -webkit-transform: rotate(360deg); }
 337 }
 338
 339 @keyframes spin {
 340    from { transform: rotate(0deg); }
 341    to { transform: rotate(360deg); }
 342 }
 343
 344 .yuu-spinner:after {
 345     content: "◔";
 346     -webkit-animation: spin 1s linear infinite;
 347     -moz-animation: spin 1s linear infinite;
 348     animation: spin 1s linear infinite;
 349     display: inline-block;
 350 }
 351
 352 dl {
 353     text-align: center;
 354 }
 355
 356 dt {
 357     margin-top: 1em;
 358     margin-bottom: 0.25em;
 359     font-size: 0.8em;
 360     font-weight: 200;
 361 }
 362
 363 dd {
 364     margin-left: 0;
 365 }