Webleb - UI Elements - Fruit Ninja

HTML

<!DOCTYPE html>

<title>Fruit Ninja</title>
  <style>
    @font-face {
      font-family: gangofchinese;
      src: url('assets/font/gangofchinese.ttf');
    }

html,
    body {
      height: 100%;
      width: 100% !important;
      margin: 0;
      background-color: #000000 !important;
    }

.fontLoader {
      position: absolute;
      left: -1000px;
      visibility: hidden;
    }

#phaser-canvas {
      margin: 0 auto;
      background-color: #000000;
    }

body,
    #content {
      height: 100vh !important;
      max-height: 100vh !important;
    }

#divAds,
    #tempads {
      display: none;
    }

/* canvas{
          width: 100%;
          height: 100%;
          display: grid !important;
          grid-area: 1/1;
          margin-top: 0 !important;
          margin-bottom: 0 !important;
          padding: 0 !important;
          max-width: 100% !important;
          max-height: 100vh !important;
      } */

#enable3d-three-canvas,
    #enable3d-phaser-canvas {
      min-width: 100%;
      max-width: 100%;
      max-width: -webkit-fill-available;
      max-width: -moz-available;
      max-width: -webkit-fill-available;
      max-width: fill-available;
      margin: 0 auto;
    }

/* @media screen and (max-width: 768px) {
        #enable3d-three-canvas, #enable3d-phaser-canvas {
          min-width: auto !important;
          max-width: auto;
          width: 960px;
          height: auto;
          margin: 0 auto;
        }
      } */

@media (min-aspect-ratio: 1.85) {

#enable3d-three-canvas,
      #enable3d-phaser-canvas {
        width: 960px;
        min-width: 640px;
      }
    }

@media (min-aspect-ratio: 8/4) {

#enable3d-three-canvas,
      #enable3d-phaser-canvas {
        min-width: 640px;
        /* background-color: aquamarine; */
      }
    }
  </style>

</head>

<body>
  <div class="fontLoader" style="font-family: gangofchinese;">-</div>
  <div class="fontLoader" style="font-family: gangofchinese;">-</div>
  <div id="content">
    <div id="phaser-canvas"></div>
  </div>
  
  <style id="injectStyles">
    html,
    body {
      background: none !important;
    }
  </style>
  <script type="text/javascript" src="vendors.bundle.js"></script>
  <script type="text/javascript" src="main.bundle.js"></script>
</body>

</html>

CSS

JS

Fruit Ninja

Recommended