Styles refactor

src/game.less

@@ -0,0 +1,329 @@
+* {
+  font-family: Courier New,
+  Courier,
+  Lucida Sans Typewriter,
+  Lucida Typewriter,
+  monospace;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
+  color: white;
+  background-size: 120px 120px;
+  background-color: var(--background1);
+  --background1: #030c23;
+  --background2: #03112a;
+}
+
+#game {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
+  width: 100vw;
+}
+
+#score,
+#menu {
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  padding: 10px;
+  appearance: none;
+  background: none;
+  border: none;
+  font: inherit;
+  color: white;
+  min-width: 40px;
+  min-height: 40px;
+  line-height: 20px;
+
+  &:hover,
+  &:focus {
+    background: rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+  }
+
+}
+
+#score {
+  right: 0;
+}
+
+#menu {
+  left: 0;
+  @media screen and (orientation: portrait) {
+    & > span {
+      display: none;
+    }
+  }
+}
+
+
+.popup {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.9);
+  z-index: 10;
+  display: flex;
+  overflow: auto;
+
+  & > div {
+    margin: auto;
+    padding: 20px 10px;
+    transform-origin: center;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    max-width: 450px;
+
+    & > * {
+      padding: 0;
+      margin: 0;
+    }
+
+    & > h2,
+    & > p {
+      margin-bottom: 20px;
+    }
+
+    & > section {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      margin-top: 20px;
+
+      button {
+        font: inherit;
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 10px;
+        cursor: pointer;
+        border: 1px solid white;
+        text-align: left;
+        display: flex;
+        gap: 10px;
+        margin-top: -1px;
+
+        &:not([disabled]):hover,
+        &:not([disabled]):focus {
+          border-color: #f1d33b;
+          position: relative;
+          z-index: 1;
+        }
+
+        &[disabled] {
+          opacity: 0.5;
+          filter: saturate(0);
+          pointer-events: none;
+        }
+
+        & > div {
+          flex-grow: 1;
+        }
+
+        & > div > em {
+          display: block;
+          opacity: 0.8;
+        }
+
+        &.grey-out-unless-hovered {
+          &:not(:hover) {
+            opacity: 0.6;
+
+            img {
+              filter: saturate(0);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.actionsAsGrid > div {
+    max-width: 800px;
+
+    section {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    }
+  }
+
+  button.close-modale {
+    color: white;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 60px;
+    height: 60px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    overflow: hidden;
+
+    &:before {
+      content: "+";
+      position: absolute;
+      transform: translate(-50%, -50%) rotate(45deg);
+      font-size: 80px;
+      display: inline-block;
+      top: 34px;
+      left: 26px;
+    }
+
+    &:hover {
+      font-weight: bold;
+      background: black;
+    }
+  }
+
+  .textAfterButtons {
+    color: rgba(255, 255, 255, 0.58);
+  }
+
+  a[href] {
+    color: inherit;
+
+    &:hover,
+    &:focus {
+      color: white;
+    }
+  }
+}
+
+
+/*Unlocks progress bar*/
+.progress {
+  display: block;
+  padding: 5px 10px;
+  background: #1c1c2f;
+  color: #fff;
+  box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.5);
+  border-radius: 5px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+
+  & > .progress_bar_part {
+    display: block;
+    background: #4049ca;
+    box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.5);
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    transform-origin: top left;
+    animation: grow 1s both ease-out;
+    z-index: 1;
+  }
+
+  & > span {
+    display: block;
+    position: relative;
+    z-index: 2;
+  }
+
+  @keyframes grow {
+    0% {
+      transform: scale(0, 1);
+    }
+  }
+}
+
+
+#level-recording-container {
+  max-width: 400px;
+  text-align: center;
+  margin: 40px;
+
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  a {
+    display: block;
+
+    video {
+      border-radius: 10px;
+      display: block;
+      outline: 1px solid white;
+      box-shadow: 2px 2px 5px black;
+      margin: 20px auto;
+    }
+  }
+
+  @media (min-width: 1200px) {
+    position: absolute;
+    top: 40px;
+    left: 40px;
+    max-width: calc((100vw - 450px) / 2 - 80px);
+  }
+}
+
+
+.histogram {
+  display: flex;
+  gap: 10px;
+  align-items: stretch;
+  margin: 10px 0 40px 0;
+
+  & > span {
+    /*    Hover zone */
+    flex-grow: 1;
+    width: 10px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+
+    &.active > span {
+      background: #4049ca;
+    }
+
+    & > span {
+      /*Visible bar*/
+      background: #1c1c2f;
+      width: 100%;
+      display: block;
+      border-radius: 5px;
+      min-height: 1px;
+
+      & > span {
+        /*label */
+        position: absolute;
+        bottom: -20px;
+        pointer-events: none;
+        white-space: nowrap;
+        transform-origin: bottom left;
+        font-size: 13px;
+        text-align: center;
+        display: block;
+        left: 50%;
+        transform: translate(-50%, 0);
+      }
+
+    }
+  }
+  &> span:not(:hover):not(.active) > span > span {
+    opacity: 0;
+  } 
+}
+
+h2.histogram-title {
+  color: #3b3f75;
+  font-size: 18px;
+}
+
+h2.histogram-title strong {
+  color: #4049ca;
+}