WIP

raw/scss/_controls.scss

@@ -0,0 +1,24 @@
+.controls {
+  right: 0;
+  display: flex;
+}
+
+.controls button, .menu-icon {
+  background-color: rgba(33, 33, 33, .6);
+  border: none;
+  font-size: 1.4em;
+  border-top: 4px solid #089bec;
+  padding: 1.5rem;
+  cursor: pointer;
+  color: #fff;
+  transition: .5s;
+
+  &.active {
+    border-color: #ff066a;
+  }
+
+  &:hover {
+    background-color: rgba(21, 21, 21, .7);
+    border-color: #aaef22;
+  }
+}

raw/scss/_gui.scss

@@ -0,0 +1,108 @@
+#c {
+  width: 100%;
+  height: 100%;
+}
+
+group {
+  display: block;
+  padding-bottom: 10px;
+  user-select: none;
+}
+
+group-label {
+  display: block;
+  border-bottom: 1px solid #fff;
+  font-size: 21px;
+  font-weight: 500;
+  user-select: none;
+}
+
+group-input {
+  display: flex;
+  align-items: center;
+  margin-top: 5px;
+  user-select: none;
+
+  label {
+    padding-right: 10px;
+    user-select: none;
+    width: 150px;
+  }
+
+  input {
+    flex-grow: 1;
+    user-select: none;
+    max-width: 150px;
+  }
+
+  button {
+    border: 1px solid #dcdcdc;
+    background-color: transparent;
+    color: #fff;
+    margin-left: 5px;
+  }
+}
+
+.closed {
+  transform: translateX(-350px);
+  transition: all .5s;
+}
+
+.top-menu-left {
+  display: flex;
+  div {
+    position: relative;
+  }
+}
+
+.loading-screen {
+  z-index: 100;
+  background-color: #000;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  span {
+    font-family: monospace;
+    font-size: 4vw;
+    z-index: 2;
+  }
+
+  loader {
+    position: absolute;
+    top: calc(6vw + 10px);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    display: block;
+    width: 30vw;
+    height: 6px;
+    transform: scaleX(0);
+    transform-origin: left;
+    background-color: #006ea8;
+    animation: loadingBar 2s infinite;
+
+    &.delay {
+      background-color: rgba(0, 110, 168, 0.24);
+      filter: blur(1px);
+      animation-delay: .05s;
+    }
+  }
+}
+
+@keyframes loadingBar {
+  0%, 100% {
+    transform: scaleX(0) scaleY(0);
+  }
+  50% {
+    transform: scaleX(1) scaleY(1);
+    transform-origin: left;
+  }
+  51%, 100% {
+    transform-origin: right;
+  }
+}

raw/scss/_input.scss

@@ -0,0 +1,79 @@
+input[type=range] {
+  width: 100%;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus::-webkit-slider-runnable-track {
+    background: #545454;
+  }
+
+  &:focus::-ms-fill-lower {
+    background: #424242;
+  }
+
+  &:focus::-ms-fill-upper {
+    background: #545454;
+  }
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 25.6px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+  background: #424242;
+  border-radius: 0;
+  border: 0 solid #010101;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  height: 25px;
+  width: 15px;
+  border-radius: 0;
+  cursor: pointer;
+  margin-top: 0.3px;
+}
+
+switch {
+  input {
+    position: absolute;
+    appearance: none;
+    opacity: 0;
+
+    &:checked + label:after {
+      transform: translateX(20px);
+    }
+  }
+
+  label {
+    display: block;
+    border-radius: 10px;
+    width: 40px;
+    height: 20px;
+    background-color: #dcdcdc;
+    position: relative;
+    cursor: pointer;
+    padding: 0;
+
+    &:after {
+      content: '';
+      background-color: #ff3232;
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      height: 16px;
+      width: 16px;
+      border-radius: 10px;
+      transition: .5s;
+    }
+  }
+}
+
+input[type="file"] {
+  position: fixed;
+  left: -100000vw;
+  height: 1px;
+  width: 1px;
+}

raw/scss/style.scss

@@ -0,0 +1,43 @@
+* {
+  box-sizing: border-box;
+}
+
+*:focus {
+  outline: none;
+}
+
+html, body {
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  font-size: 16px;
+  font-family: sans-serif;
+  background-color: #000000;
+}
+
+div {
+  position: fixed;
+  color: #fff;
+  padding: 1em;
+}
+
+.hide {
+  display: none !important;
+}
+
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+  font-size: 1em;
+  shape-rendering: geometricPrecision;
+  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
+  stroke-width: 5px;
+  text-align: center;
+  display: block;
+}
+
+
+@import "gui";
+@import "input";
+@import "controls";