CSS generated from Sass source in https://github.com/nhoizey/esviji

esviji.css

/* ********************************************************************
 * Some variables
 * ********************************************************************/
/* ********************************************************************
 * Mandatory font face
 * ********************************************************************/
@font-face {
  font-family: "SansitaOneRegular";
  src: url("font/sansitaone-webfont.woff2") format("woff2"), url("font/sansitaone-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
/* ********************************************************************
 * Box sizing
 * ********************************************************************/
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

/* ********************************************************************
 * Body
 * ********************************************************************/
html, body {
  font-family: SansitaOneRegular;
  /* http://maximilianhoffmann.com/posts/better-font-rendering-on-osx */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #444;
  color: #fff;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ********************************************************************
 * Modules
 * ********************************************************************/
.ball1 {
  fill: #f39c12;
  stroke: #e67e22;
}

.ball2 {
  fill: #2ecc71;
  stroke: #27ae60;
}

.ball3 {
  fill: #3498db;
  stroke: #2980b9;
}

.ball4 {
  fill: #9b59b6;
  stroke: #8e44ad;
}

.ball5 {
  fill: #aa8866;
  stroke: #776655;
}

.ball6 {
  fill: #e74c3c;
  stroke: #c0392b;
}

/* ********************************************************************
 * For all screens
 * ********************************************************************/
section {
  max-width: 150vh;
  margin: 0 auto;
  padding: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
section h2 {
  font-size: 10vmin;
  text-align: center;
  margin: 3vmin 0;
}
section .controls {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  font-size: calc(3vh - 3vw);
  line-height: 2;
}
section .controls li {
  text-align: center;
  width: 99vw;
  padding-bottom: 3vw;
}
section .controls li a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  color: #ccc;
  text-decoration: none;
  outline: none;
}
section .controls li a:focus, section .controls li a:hover {
  color: #3498db;
}
section .controls li a:focus svg *, section .controls li a:hover svg * {
  fill: #3498db;
}
section .controls li svg {
  width: calc(15vh - 20vw);
  height: calc(15vh - 20vw);
  max-width: 100px;
  max-height: 100px;
  margin: 0 auto;
}
@media (min-aspect-ratio: 7 / 24) {
  section .controls {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    font-size: 3vh;
  }
  section .controls li {
    width: 49vw;
  }
  section .controls li svg {
    width: calc(14vh - 10vw);
    height: calc(14vh - 10vw);
  }
}
@media (min-aspect-ratio: 14 / 24) {
  section .controls li {
    width: 24vw;
  }
  section .controls li svg {
    width: 18vw;
    height: 18vw;
  }
}
@media (min-aspect-ratio: 17 / 24) {
  section .controls li {
    width: 49vw;
  }
  section .controls li svg {
    width: 25vw;
    height: 25vw;
  }
}
@media (min-aspect-ratio: 20 / 24) {
  section .controls {
    font-size: 3vw;
  }
  section .controls li {
    width: 22vw;
  }
  section .controls li svg {
    width: 16vw;
    height: 16vw;
  }
}
@media (min-aspect-ratio: 36 / 24) {
  section .controls li {
    width: 30vh;
  }
  section .controls li svg {
    width: 24vh;
    height: 24vh;
  }
}
@media (min-aspect-ratio: 42 / 24) {
  section .controls {
    font-size: 5.5vh;
  }
}

/* ********************************************************************
 * Home screen
 * ********************************************************************/
section#home header {
  margin: 0;
  padding: 0;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
section#home header h1 {
  font-size: 25vmin;
  text-align: center;
  margin: 3vmin 0;
}
section#home header .logo {
  display: block;
  width: 45vmin;
  height: auto;
  margin: 10vmin auto;
  padding: 0;
}
@media (min-aspect-ratio: 17 / 24) {
  section#home header {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
  }
  section#home header h1 {
    font-size: 20vw;
  }
  section#home header .logo {
    width: 20vw;
    height: 20vw;
    margin: 3vw 0;
  }
}
@media (min-aspect-ratio: 20 / 24) {
  section#home header {
    margin-top: calc(90vh - 70vw);
  }
}
@media (min-aspect-ratio: 30 / 24) {
  section#home header {
    margin-top: 0;
  }
}
@media (min-aspect-ratio: 36 / 24) {
  section#home header h1 {
    font-size: 30vh;
  }
  section#home header .logo {
    width: 30vh;
    height: auto;
    margin: 4.5vh 0;
  }
}
section#home .controls .play img {
  -webkit-animation-name: pulse;
          animation-name: pulse;
  -webkit-animation-duration: .5s;
          animation-duration: .5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}
section#home .controls .sound {
  display: none;
}
.soundeffectsloaded section#home .controls .sound, .ambiancesoundloaded section#home .controls .sound {
  display: block;
}
section#home .controls .sound .on {
  display: none;
}
section#home .controls .sound .off {
  display: block;
}
section#home .controls .sound.on .on {
  display: block;
}
section#home .controls .sound.on .off {
  display: none;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
/* ********************************************************************
 * Play screen
 * ********************************************************************/
section#play {
  font-size: 15vmin;
  line-height: 1.5;
}
section#play h1, section#play ul, section#play .score, section#play .level, section#play .lives {
  margin: 0;
  padding: 0;
}
section#play h1 {
  font-size: 20vmin;
  color: #ccc;
  padding: 0 3vmin;
  height: 30vmin;
}
section#play .progress {
  position: absolute;
  top: 30vmin;
  left: 0;
  width: 100vw;
  height: calc(100vh - 30vmin - 134.375vw);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}
section#play .progress .score {
  padding: 0 3vmin;
  font-size: 1.5em;
  text-align: center;
}
section#play .progress ul {
  width: 100%;
  list-style-type: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  color: #ccc;
}
section#play .progress ul li {
  text-align: center;
}
section#play .progress ul span {
  color: #eee;
}
section#play .progress .icon {
  margin-right: 3vmin;
  width: .75em;
  height: .75em;
}
section#play .score, section#play .lives, section#play .level {
  display: inline-block;
  -webkit-transition-property: color, -webkit-transform;
          transition-property: color, transform;
  -webkit-transition-duration: .5s;
          transition-duration: .5s;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}
section#play .score.changeDown, section#play .lives.changeDown, section#play .level.changeDown {
  color: #c0392b;
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
}
section#play .score.changeUp, section#play .lives.changeUp, section#play .level.changeUp {
  color: #27ae60;
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
}
section#play svg#board {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 134.375vw;
  pointer-events: none;
}
section#play svg#board path {
  pointer-events: visibleFill;
}
section#play svg#board .playzone {
  stroke-width: 0;
  fill: #777;
}
section#play svg#board .ball text {
  font-size: 16px;
  text-anchor: middle;
  fill: #fff;
  stroke-width: 0;
}
section#play svg#board #playable, section#play svg#board #playableSpring {
  pointer-events: none;
}
section#play svg#board #playable:hover, section#play svg#board #playableSpring:hover {
  cursor: pointer;
}
section#play svg#board #playable.throwable, section#play svg#board #playableSpring.throwable {
  -webkit-animation-delay: 0;
          animation-delay: 0;
  -webkit-animation-duration: .7s;
          animation-duration: .7s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
section#play svg#board #playable {
  -webkit-transform-origin: 294px center;
      -ms-transform-origin: 294px center;
          transform-origin: 294px center;
}
section#play svg#board #playable.throwable {
  -webkit-animation-name: ballAnimation;
          animation-name: ballAnimation;
}
section#play svg#board #playableSpring {
  stroke-width: 2;
  stroke: #cee;
  fill: none;
  -webkit-transform-origin: 308px center;
      -ms-transform-origin: 308px center;
          transform-origin: 308px center;
  -webkit-transform: scaleX(0.5);
      -ms-transform: scaleX(0.5);
          transform: scaleX(0.5);
}
section#play svg#board #playableSpring.throwable {
  -webkit-animation-name: springAnimation;
          animation-name: springAnimation;
}
section#play .controls {
  position: static;
}
section#play .controls .pause {
  position: absolute;
  top: 3vmin;
  bottom: auto;
  left: auto;
  right: 3vmin;
  width: 20vmin;
  height: 20vmin;
}
section#play .controls .pause svg {
  width: 100%;
  height: 100%;
}
@media (min-aspect-ratio: 8 / 24) {
  section#play .progress ul {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
@media (min-aspect-ratio: 11 / 24) {
  section#play {
    font-size: 10vmin;
  }
  section#play .progress ul {
    position: absolute;
    left: 3vmin;
    width: 25vw;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  section#play .progress ul li {
    text-align: left;
  }
}
@media (min-aspect-ratio: 13 / 24) {
  section#play {
    font-size: calc(13 / 24 * 10vh - 2vw);
  }
  section#play .progress {
    position: absolute;
    left: 3vmin;
    height: auto !important;
  }
  section#play .progress .score {
    padding: 0;
    text-align: left;
  }
  section#play .progress ul {
    position: static;
    line-height: 1.2;
  }
  section#play .progress ul li {
    text-align: left;
  }
}
@media (min-aspect-ratio: 15 / 24) {
  section#play h1 {
    font-size: 12.5vh;
    height: 18.75vh;
  }
  section#play svg#board {
    width: 62.5vh;
    height: 83.98438vh;
    left: auto;
    right: 0;
  }
  section#play .progress {
    font-size: 6vw;
  }
  section#play .controls .pause {
    width: 12.5vh;
    height: 12.5vh;
  }
}
@media (min-aspect-ratio: 19 / 24) {
  section#play svg#board {
    width: 79.16667vw;
    max-width: 74.4186vh;
    height: 106.38021vw;
    max-height: 100vh;
  }
  section#play .progress {
    top: calc(18.75vh + 3vmin);
    width: calc(100vw - 3vmin - 19 / 24 * 100vw);
  }
  section#play .progress ul {
    width: 100%;
  }
  section#play .controls .pause {
    top: auto !important;
    left: 3vmin;
    right: auto;
    bottom: 3vmin;
  }
}
@media (min-aspect-ratio: 24 / 24) {
  section#play .progress {
    width: calc(100vw - 2 * 3vmin - 74.4186vh);
    height: calc(100vh - 18.75vh - 3 * 3vmin - 12.5vh);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-orientation: column;
  }
  section#play .progress ul li {
    text-align: center;
  }
  section#play .progress .score {
    text-align: center;
  }
}
@media (min-aspect-ratio: 36 / 24) {
  section#play {
    max-width: 150vh;
  }
  section#play svg#board {
    width: 74.4186vh;
    height: 100vh;
  }
  section#play .progress {
    width: calc(150vh - 2 * 3vmin - 74.4186vh);
    font-size: 9vh;
  }
}

@-webkit-keyframes ballAnimation {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(-16px);
            transform: translateX(-16px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes ballAnimation {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(-16px);
            transform: translateX(-16px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes springAnimation {
  0% {
    -webkit-transform: scaleX(0.5);
            transform: scaleX(0.5);
  }
  50% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    -webkit-transform: scaleX(0.5);
            transform: scaleX(0.5);
  }
}
@keyframes springAnimation {
  0% {
    -webkit-transform: scaleX(0.5);
            transform: scaleX(0.5);
  }
  50% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    -webkit-transform: scaleX(0.5);
            transform: scaleX(0.5);
  }
}
/* ********************************************************************
 * Pause screen
 * ********************************************************************/
section#pause .sound {
  display: none;
}
.soundeffectsloaded section#pause .sound, .ambiancesoundloaded section#pause .sound {
  display: block;
}
section#pause .sound .on {
  display: none;
}
section#pause .sound .off {
  display: block;
}
section#pause .sound.on .on {
  display: block;
}
section#pause .sound.on .off {
  display: none;
}

/* ********************************************************************
 * Scores screen
 * ********************************************************************/
.highscores {
  list-style-type: none;
  margin: 5vmin;
  font-size: 5vh;
  text-align: right;
}
.highscores .thisone {
  color: #27ae60;
  font-size: 1.3em;
}
.highscores .tryagain {
  color: #c0392b;
  font-size: 1.3em;
}
@media (min-aspect-ratio: 12 / 24) {
  .highscores {
    -webkit-columns: 2;
       -moz-columns: 2;
            columns: 2;
  }
}
@media (min-aspect-ratio: 18 / 24) {
  .highscores {
    -webkit-columns: 3;
       -moz-columns: 3;
            columns: 3;
  }
}
@media (min-aspect-ratio: 24 / 24) {
  .highscores {
    -webkit-columns: 4;
       -moz-columns: 4;
            columns: 4;
  }
}

/* ********************************************************************
 * About screen
 * ********************************************************************/
#about .about {
  margin: 5vmin;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-aspect-ratio: 20 / 24) {
  #about .about {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
#about .description a:link, #about .description a:visited {
  color: #3498db;
  text-decoration: underline;
}
@media (min-aspect-ratio: 20 / 24) {
  #about .description {
    -webkit-box-flex: 3;
    -webkit-flex: 3;
        -ms-flex: 3;
            flex: 3;
  }
}
#about .social {
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#about .social a {
  margin: 1em;
}
#about .social a, #about .social a svg {
  width: 15vmin;
  height: 15vmin;
}
@media (min-aspect-ratio: 20 / 24) {
  #about .social {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

/* ********************************************************************
 * Description for browsers lacking some support for SVG, flexbox, etc.
 * ********************************************************************/
#description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 1em;
  overflow-y: scroll;
}
#description h1 {
  font-size: 3em;
  text-align: center;
}
#description h2, #description p {
  font-family: sans-serif;
}
#description p.icon {
  text-align: center;
}
#description a:link, #description a:visited {
  color: #ccc;
}
#description a:hover, #description a:active {
  color: #fdd;
}
#description .error {
  padding: .2em .5em;
  border: 1px solid #962d22;
  background-color: #f2c9c5;
  color: #c0392b;
}
#description .error a:link, #description .error a:visited {
  color: #c0392b;
}
#description .error a:hover, #description .error a:active {
  color: #962d22;
}

/* no delay on focusable elements in (future) iOS: https://adactio.com/journal/10019 */
a, button, input, select, textarea, label, summary {
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}