update

Took 1 hour 33 minutes

public/stylesheets/colors.css

@@ -8,17 +8,28 @@
 
     --hover: grey;
 
-    --disabled: #A4A4A4;
+    --disabled: #626265;
 
-    --success: #31B600;
+    --success: #419822;
     --success-bright: #6DC946;
 
     --warning: #ED6D05;
     --warning-bright: #E28433;
 
-    --danger: #FF1818;
+    --danger: #B20000ED;
     --danger-bright: #DC4040;
 
     --dark: #911010;
     --dark-bright: #A22F2F;
-}
+
+    --error: rgba(255, 0, 0, 0.73);
+
+
+    --container-bg: #4f6aaa;
+    --select-bg: rgba(55, 73, 144, 0.8);
+}
+
+/**
+background-color: #080732;
+box-shadow: inset 50px -22px 50px 10px rgba(128, 15, 15, 0.5);
+ */

public/stylesheets/fonts.css

@@ -117,3 +117,44 @@
     url('/fonts/Roboto/roboto-v30-latin-900italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
     url('/fonts/Roboto/roboto-v30-latin-900italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
+
+
+/* raleway-300 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Raleway';
+    font-style: normal;
+    font-weight: 300;
+    src: url('/fonts/Raleway/raleway-v28-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+    url('/fonts/Raleway/raleway-v28-latin-300.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* raleway-regular - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Raleway';
+    font-style: normal;
+    font-weight: 400;
+    src: url('/fonts/Raleway/raleway-v28-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+    url('/fonts/Raleway/raleway-v28-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* raleway-500 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Raleway';
+    font-style: normal;
+    font-weight: 500;
+    src: url('/fonts/Raleway/raleway-v28-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+    url('/fonts/Raleway/raleway-v28-latin-500.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* raleway-600 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Raleway';
+    font-style: normal;
+    font-weight: 600;
+    src: url('/fonts/Raleway/raleway-v28-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+    url('/fonts/Raleway/raleway-v28-latin-600.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

public/stylesheets/inputs.css

@@ -3,7 +3,7 @@
     border: none;
     color: white;
     font-size: 0.96em;
-    border-radius: 2px;
+    border-radius: 3px;
     cursor: none !important;
     font-weight: 500;
     margin-right: 1%;
@@ -135,5 +135,6 @@ label {
     -o-transform: scale(1.6); /* Opera */
     transform: scale(1.6);
     padding: 12px;
+    background-color: white;
 }
 

public/stylesheets/main.css

@@ -7,7 +7,7 @@
     display: grid;
     grid-template-columns: repeat(3, calc(90% / 3));
     grid-template-rows: repeat(2, calc(90% / 2));
-    grid-gap: 10% 5%;
+    grid-gap: 9% 5.5%;
 }
 
 
@@ -15,12 +15,12 @@
     grid-row: span 1;
     grid-column: span 1;
     background-color: rgba(57, 57, 57, 0.6);
-    width: 90%;
+    width: 95%;
     height: 97%;
     display: grid;
     grid-template-columns: 100%;
     grid-template-rows: repeat(3, calc(100% / 3));
-    grid-row-gap: 4%;
+    grid-row-gap: 3%;
     text-align: center;
     border-radius: 30px 10px 30px;
     color: white;
@@ -44,17 +44,19 @@
     grid-row: span 2;
     margin-left: auto;
     margin-right: auto;
-    max-height: 100%;
+    max-height: 99%;
     overflow: hidden;
     transition: 0.5s;
+    margin-top: 1%;
 }
 
 
 .drink .drinkName {
-    font-family: Ubuntu, sans-serif;
+    font-family: Raleway, sans-serif;
     grid-column: span 1;
     grid-row: span 1;
     font-size: 150%;
+    margin-top: 1%;
 }
 
 

public/stylesheets/setup.css

@@ -16,37 +16,41 @@
     width: 100%;
     height: 100%;
     text-align: center;
-    border: 1px solid white;
+    border: 1px solid #818181;
     border-radius: 5px;
     padding: 0.45% 10px;
     overflow: auto;
+    overflow-x: hidden;
 }
 
+
 #setup #setupContainersDiv #containerAddBtn {
     position: relative;
     left: 46%;
     bottom: 8%;
 }
 
+
 #setup #setupLEDDiv {
     grid-row: span 3;
     grid-column: span 1;
     height: 100%;
     text-align: center;
-    border: 1px solid white;
+    border: 1px solid #818181;
     border-radius: 5px;
     padding: 1% 10px;
     margin-right: 10%;
 
 }
 
+
 #setup #setupExtraDiv {
     grid-row: span 3;
     grid-column: span 1;
     width: 100%;
     height: 100%;
     text-align: center;
-    border: 1px solid white;
+    border: 1px solid #818181;
     border-radius: 5px;
     padding: 1% 10px;
 
@@ -55,25 +59,28 @@
 
 
 #setupContainers .setupContainer {
-    color: black;
+    color: white;
     text-align: left;
     width: calc(100% / 2.3);
     height: 12%;
     display: inline-block;
     margin-bottom: 3%;
-    border: 1px solid gray;
+    border: 2px solid #142F44;
     margin-left: 2%;
     margin-right: 2%;
     border-radius: 10px;
     padding: 3% 10px;
     transition: 0.5s;
-    background-color: rgb(135, 133, 133);
+    background-color: #4f6aaa;
     overflow: hidden;
 }
 
+
 .removeSlowly {
     animation: removeSlowlyWidth 0.8s forwards;
 }
+
+
 @keyframes removeSlowlyWidth {
 
     100% {
@@ -81,18 +88,21 @@
     }
 }
 
+
 .error {
-    background-color: rgba(255,0,0,0.5) !important;
+    background-color: var(--error) !important;
 }
 
+
 #setupContainers .setupContainer p {
-    margin-bottom: 3%;
+    margin-bottom: 4.5%;
     font-weight: 600;
     font-size: 1.2em;
 }
 
 
 #setupContainers .setupContainer select {
-    margin-bottom: 2%;
-
+    margin-bottom: 2.1%;
+    background-color: var(--select-bg);
+    color: white;
 }