HTML/CSS cleanups

.gitignore

@@ -2,4 +2,5 @@
 /eslintrc.json
 node_modules
 build
+.vscode
 .idea

Styles/controls.css

@@ -1,68 +1,93 @@
-.controls {
+.controlsWrapper {
   display: grid;
   grid-template-columns: repeat(5, auto);
   width: fit-content;
   gap: min(2vw, 2rem);
 }
-.controls ~ .controls {
+.extraControlsWrapper {
   margin-top: 1.5rem;
 }
-.controls input,
-.controls select {
+.controlsWrapper input,
+.controlsWrapper select {
   font-size: 0.75rem;
   background-color: var(--input-bg);
   color: var(--input-f-clr);
   border-color: var(--btn-border-clr);
 }
 
-.controls input[type="text"] {
+.controlsWrapper input[type="text"] {
   border: none;
   outline: 1px solid var(--btn-border-clr);
 }
 
-.button-wrapper {
-  display: grid;
-  grid-template-columns: repeat(6, auto);
-  gap: 1rem;
-  width: fit-content;
-  margin-block: 2rem 1rem;
+.sigmaInput {
+  width: 3.5rem
 }
-.button-wrapper button {
-  font-size: 0.8rem;
-  padding: 0.1em 0.2em;
-  cursor: pointer;
+
+.capInputWrapper {
+  display: inline;
 }
-.button-wrapper button:hover {
-  transform: scale(1.1);
+
+.currencyInput, .capInput {
+  width: 5rem
+}
+
+.hardCapToggle {
+  position: relative; 
+  width: min(1rem, 5vw); 
+  outline: none;
+}
+
+.extraInputWrapper {
+  display: flex;
+}
+
+.extraInputDescription {
+  display: inline;
+  margin-right: 0.8rem;
 }
 
 .timeDiffWrapper {
+  display: grid;
   flex-direction: column;
   gap: 0.3rem;
 }
 .timeDiffWrapper input {
   width: 20rem;
 }
 
-.simAllInputs {
+/* Action bar */
+
+.actionBar {
+  display: grid;
+  grid-template-columns: repeat(6, auto);
+  gap: 1rem;
+  width: fit-content;
+  margin-block: 2rem 1rem;
+}
+.actionBar button {
+  font-size: 0.8rem;
+  padding: 0.1em 0.2em;
+}
+
+/* Sim all inputs */
+
+.simAllInputWrapper {
   display: grid;
   grid-template-columns: 1fr auto auto;
   gap: 1rem 0.5rem;
   margin-right: 2rem;
   place-items: center;
 }
-.simAllInputs button:hover {
-  cursor: pointer;
-  transform: scale(1.1);
+.simAllInputWrapper .simAllCheckboxLabel {
+  font-size: 0.75rem;
 }
-.simAllInputs input[type="checkbox"] {
+.simAllInputWrapper input[type="checkbox"] {
   width: 0.8rem;
   height: 0.8rem;
 }
 
-.saveDist {
-  position: relative;
-}
+/* Sim all input & extra input */
 
 textarea {
   resize: none;
@@ -76,7 +101,7 @@ textarea.simAllInputArea {
   width: 20rem;
   height: 4rem;
 }
-textarea.modeInput {
+textarea.extraInput {
   width: 6rem;
   height: 1.8em;
 }

Styles/dialogs.css

@@ -0,0 +1,56 @@
+dialog {
+    --inline-padding: min(10vw, 3.5rem);
+    padding: 2rem var(--inline-padding);
+    background-color: var(--dialog-bg);
+    color: var(--dialog-f-clr);
+    border: 0.1rem solid var(--dialog-f-clr);
+    border-radius: 0.5rem;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+    overflow: hidden;
+}
+
+dialog::backdrop {
+    background-color: var(--dialog-backdrop-clr);
+    opacity: 0.6;
+}
+
+.dialogTitle {
+    margin-bottom: 1.5rem;
+}
+
+.dialogCloseBtn {
+  border-radius: 50%;
+  width: 1.5rem;
+  aspect-ratio: 1;
+  background-color: var(--close-btn-bg);
+  color: var(--close-btn-fg);
+  font-weight: bold;
+  font-size: 0.8rem;
+  font-style: italic;
+  font-family: "Luicida Handwriting";
+  cursor: pointer;
+  transition: scale 100ms;
+  position: absolute;
+  right: 1.5rem;
+  top: 1.5rem;
+  outline: 0.1em solid var(--close-btn-fg);
+}
+
+.dialogCloseBtn:hover {
+    scale: 1.2;
+}
+
+dialog > div::-webkit-scrollbar {
+    width: 1rem;
+}
+dialog > div::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb-bg);
+    border: 1px solid var(--scrollbar-thumb-border);
+    border-radius: 0.5rem;
+}
+dialog > div::-webkit-scrollbar-track {
+    background-color: var(--scrollbar-track-bg);
+    border-radius: 0.5rem;
+}

Styles/main.css

@@ -11,6 +11,7 @@
 
   width: 100vw;
   overflow-x: hidden;
+  overscroll-behavior: none;
 }
 
 body {
@@ -36,10 +37,18 @@ button {
   transition: background-color 100ms ease-in-out, color 100ms ease-in-out, transform 0.1s;
 }
 
+button:hover {
+  transform: scale(1.1);
+}
+
 button.buttongreen {
   background-color: var(--button-green-bg);
 }
 
 .content-wrapper {
   padding: min(3vw, 1.5rem * 0.85);
 }
+
+.hidden {
+  display: none !important;
+}

Styles/narrow.css

@@ -2,76 +2,52 @@
   :root {
     font-size: calc(0.5vw + 0.8rem + 0.5vh);
   }
-  .controls:nth-of-type(1) {
-    display: grid;
-    grid-template-columns: repeat(3, auto);
-    gap: 0.5rem 1rem;
-  }
-  .button-wrapper {
-    display: grid;
-    grid-template-columns: repeat(2, auto);
-    gap: 0.5rem 1rem;
-  }
-  .settings {
-    width: 95%;
-    --inline-padding: 1.2rem;
+  .content-wrapper {
+    padding: 1rem;
   }
-  .settingsButtons {
+  /* Nav */
+  .navBtns {
     font-size: 0.8rem;
   }
-  .settings input[type="range"] {
-    appearance: none;
-    width: 5rem;
-  }
-  .settings input[type="range"]::-webkit-slider-runnable-track {
-    height: 0.4rem;
-  }
-  .settings input[type="range"]::-webkit-slider-thumb {
-    appearance: none;
-    height: 0.8rem;
-    width: 0.45rem;
-    margin-top: -0.2rem;
-    background-color: red;
-    outline: 1px solid green;
-  }
-  .content-wrapper {
-    padding: 1rem;
+
+  /* Controls */
+  .baseControlsWrapper {
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+    gap: 0.5rem 1rem;
   }
-  .controls:nth-of-type(2) {
+  .extraControlsWrapper {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     white-space: nowrap;
   }
-  .description {
+  .inputLabel {
     display: block;
   }
-  .simAllInputs button {
+  .simAllInputWrapper {
+    width: max-content;
+  }
+  .simAllInputWrapper button {
     font-size: 0.6rem;
   }
-  .simAllInputs input {
+  .simAllInputWrapper input {
     width: 0.7rem;
     height: 0.7rem;
   }
-  .output {
-    min-width: 80vw;
-  }
-  .saveDist::before {
-    content: "Saved!";
-    position: absolute;
-    inset: 0;
-    transition: opacity 500ms;
-    color: var(--font-clr);
-    font-size: 0.7rem;
-    opacity: 0;
-    top: -90%;
-  }
-  .extraInputs {
+  .extraInputWrapper {
     flex-direction: column;
     gap: 1rem;
   }
-  .simAllInputs {
-    width: max-content;
+  .actionBar {
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    gap: 0.5rem 1rem;
+  }
+
+  /* Outputs */
+  .log {
+    min-width: 80vw;
   }
   .boughtVars table,
   .boughtVars tr,
@@ -81,4 +57,25 @@
     text-align: center;
     font-size: 0.63rem;
   }
+
+  /* Settings dialog */
+  .settings {
+    width: 95%;
+    --inline-padding: 1.2rem;
+  }
+  .settings input[type="range"] {
+    appearance: none;
+    width: 5rem;
+  }
+  .settings input[type="range"]::-webkit-slider-runnable-track {
+    height: 0.4rem;
+  }
+  .settings input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    height: 0.8rem;
+    width: 0.45rem;
+    margin-top: -0.2rem;
+    background-color: red;
+    outline: 1px solid green;
+  }
 }