Move of assets

Took 57 minutes

web/public/stylesheets/style.css

@@ -1,322 +0,0 @@
-@import url("/stylesheets/colors.css");
-@import url("/stylesheets/fonts.css");
-@import url("/stylesheets/inputs.css");
-@import url("/stylesheets/modal.css");
-@import url("/stylesheets/menu.css");
-@import url("/stylesheets/main.css");
-@import url("/stylesheets/setup.css");
-@import url("/stylesheets/settings.css");
-@import url("/stylesheets/containers.css");
-
-
-:root {
-    /*cursor: none !important;*/
-}
-
-
-ul {
-    list-style: circle;
-}
-
-
-html * {
-    /*cursor: none !important*/
-    -webkit-user-select: none; /* Safari */
-    -ms-user-select: none; /* IE 10 and IE 11 */
-    user-select: none; /* Standard syntax */
-
-}
-
-
-html *::-webkit-scrollbar {
-    display: none;
-}
-
-
-body::-webkit-scrollbar {
-    display: none;
-}
-
-
-body {
-    color: white;
-    scroll-behavior: smooth;
-    font-family: "Roboto", serif;
-    /*cursor: none !important;*/
-    -webkit-user-select: none; /* Safari */
-    -ms-user-select: none; /* IE 10 and IE 11 */
-    user-select: none; /* Standard syntax */
-}
-
-
-#blockPanel {
-    z-index: 999;
-    position: fixed;
-    top: 0;
-    left: 0;
-    background-color: rgba(0, 0, 0, 0.9);
-    width: 100vw;
-    height: 100vh;;
-    transition: opacity 0.4s;;
-}
-
-
-.opacityOutDisplayNone {
-    animation: opacityOutDisplayNone 0.4s linear forwards;
-
-}
-
-
-@keyframes opacityOutDisplayNone {
-    0% {
-        opacity: 1;
-    }
-    100% {
-        opacity: 0;
-        height: 0;
-    }
-}
-
-
-h1 {
-    font-size: 1.74em;
-    font-weight: 500;
-    margin-bottom: 2%;
-
-}
-
-
-h2 {
-    font-size: 1.45em;
-    font-weight: 500;
-    margin-bottom: 2%;
-
-}
-
-
-#overlay {
-    color: white;
-}
-
-
-#overlay #top {
-    display: block;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 9%;
-    color: white;
-    font-size: 2em;
-    padding-right: 3px;
-    padding-left: 3px;
-    background-color: #167FCC;
-    box-shadow: inset 11px 45px 50px 3px rgba(181, 15, 15, 0.66);
-
-}
-
-
-#title {
-    text-align: center;
-    float: left;
-    margin-top: 0.6%;
-    width: calc(100% / 3);
-}
-
-
-#left {
-    font-size: 0.5em;
-    float: left;
-    width: calc(100% / 3);
-    text-align: left;
-    padding-top: 1.6%;
-    padding-left: 10px;
-}
-
-
-#right {
-    float: left;
-    width: calc(100% / 3);
-    text-align: right;
-    font-size: 0.8em;
-    padding-top: 1.2%;
-    padding-right: 10px;
-}
-
-
-#overlay #bottom {
-    display: grid;
-    grid-template-rows: 100%;
-    grid-template-columns: 20% 80%;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 9%;
-    background-color: #167FCC;
-    box-shadow: inset 11px -45px 50px 3px rgba(223, 12, 42, 0.66);
-    overflow: hidden;
-}
-
-
-#overlay #bottom #menuBtn {
-    height: 100%;
-    width: 60%;
-    background-color: #21212D;
-    padding: 1px;
-    font-size: 1.5em;
-    border: 0;
-    border-radius: 0 12px 0 0;
-    color: white;
-    transition: all 0.4s;
-    margin-left: 0;
-
-}
-
-
-#menuBtn:hover {
-    background-color: #313147 !important;
-}
-
-
-#menuBtn:disabled {
-    background-color: #777777 !important;
-    color: #C1C1C1 !important;
-}
-
-
-#overlay #bottom #menuContainers {
-    height: 100%;
-    display: grid;
-    grid-template-columns: repeat(14, 1fr);
-    grid-auto-flow: column;
-    direction: rtl;
-    grid-template-rows: 100%;
-    grid-column-gap: 1.5%;
-    padding: 1% 2% 0.2%;
-    overflow: auto;
-}
-
-
-#menuContainers .container {
-    text-align: center;
-    border-radius: 0 0 30% 30%;
-    border: 1px solid black;
-    border-top-color: transparent;
-    padding-top: 18%;
-    background-color: #5B5B9B;
-    transition: all 1s;
-    transition: background-color 9s;
-    direction: ltr;
-
-}
-
-
-#container {
-    position: absolute;
-    top: 9%;
-    left: 0;
-    right: 0;
-    height: 82%;
-    color: white;
-    background-color: #0E1F31;
-}
-
-
-.pane {
-    height: 100%;
-    padding: 1% 2%;
-    overflow: auto;
-    scrollbar-width: none; /* Firefox */
-    scroll-behavior: smooth;
-    color: white;
-    /*animation: showPane 0.3s forwards;*/
-    -ms-overflow-style: none; /* IE and Edge */
-}
-
-
-.pane::-webkit-scrollbar {
-    display: none;
-}
-
-
-@keyframes showPane {
-    0% {
-        display: none;
-        opacity: 0;
-    }
-    1% {
-        display: block;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-
-
-.hiddenPane {
-    transition: 0.4s;
-    display: none !important;
-    /*animation: hidePane 0.4s forwards;*/
-}
-
-
-@keyframes hidePane {
-    0% {
-        opacity: 1;
-        display: block !important;
-    }
-    99% {
-        display: block !important;
-    }
-    100% {
-        display: none !important;
-        opacity: 0;
-    }
-}
-
-
-.hide {
-    visibility: hidden;
-    transition: visibility 0.8s;
-}
-
-
-.tooltip {
-    position: relative;
-    display: inline-block;
-    overflow: visible;
-}
-
-
-.tooltip .tooltiptext {
-    opacity: 0;
-
-    background-color: #214B74;
-    color: #FFFFFF;
-    text-align: center;
-    border-radius: 9px;
-    padding: 5px 0;
-    /* Position the tooltip */
-    position: absolute;
-    z-index: 1;
-    bottom: -55%;
-    left: 50%;
-    margin-left: -80px;
-
-}
-
-
-@keyframes blendIn {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 100%;
-    }
-}
-
-
-.tooltip:hover .tooltiptext {
-    animation: blendIn 0.5s ease forwards;
-}

web/src/assets/stylesheets/main.css

@@ -2,17 +2,14 @@
     display: none;
 }
 
-
 #main {
     display: grid;
     grid-template-columns: repeat(3, calc(90% / 3));
     grid-template-rows: repeat(2, calc(90% / 2));
     grid-gap: 9% 5.5%;
     overflow-x: hidden;
-}
 
-
+    .drink {
-#main .drink {
         grid-row: span 1;
         grid-column: span 1;
         background-color: rgba(57, 57, 57, 0.6);
@@ -30,17 +27,8 @@
         transition: 0.4s;
         overflow: hidden;
         padding-bottom: 1%;
-}
 
-
+        .thumbnail {
-#main .drink:hover {
-    background-color: rgba(22, 67, 113, 0.8);
-    /*width: 100%;
-    height: 100%;*/
-}
-
-
-.drink .thumbnail {
             grid-column: span 1;
             grid-row: span 2;
             margin-left: auto;
@@ -51,8 +39,7 @@
             margin-top: 1%;
         }
 
-
+        .drinkName {
-.drink .drinkName {
             font-family: Raleway, sans-serif;
             grid-column: span 1;
             grid-row: span 1;
@@ -60,8 +47,16 @@
             margin-top: 1%;
         }
 
+    }
+
+    .drink:hover {
+        background-color: rgba(22, 67, 113, 0.8);
+        /*width: 100%;
+        height: 100%;*/
+    }
 
 
+}
 
 /* Water animation */
 body {

web/src/assets/stylesheets/style.css

@@ -0,0 +1,318 @@
+@import url("./colors.css");
+@import url("./fonts.css");
+@import url("./inputs.css");
+@import url("./modal.css");
+@import url("./menu.css");
+@import url("./main.css");
+@import url("./setup.css");
+@import url("./settings.css");
+@import url("./containers.css");
+
+:root {
+    /*cursor: none !important;*/
+}
+
+
+ul {
+    list-style: circle;
+}
+
+
+html * {
+    /*cursor: none !important*/
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+
+}
+
+
+html *::-webkit-scrollbar {
+    display: none;
+}
+
+
+body::-webkit-scrollbar {
+    display: none;
+}
+
+
+body {
+    color: white;
+    scroll-behavior: smooth;
+    font-family: "Roboto", serif;
+    /*cursor: none !important;*/
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+}
+
+
+#blockPanel {
+    z-index: 999;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.9);
+    width: 100vw;
+    height: 100vh;;
+    transition: opacity 0.4s;;
+}
+
+
+.opacityOutDisplayNone {
+    animation: opacityOutDisplayNone 0.4s linear forwards;
+
+}
+
+
+@keyframes opacityOutDisplayNone {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+        height: 0;
+    }
+}
+
+
+h1 {
+    font-size: 1.74em;
+    font-weight: 500;
+    margin-bottom: 2%;
+
+}
+
+
+h2 {
+    font-size: 1.45em;
+    font-weight: 500;
+    margin-bottom: 2%;
+
+}
+
+
+#overlay {
+    color: white;
+}
+
+
+#overlay {
+    #top {
+        display: grid;
+        grid-gap: 0;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 50px;
+        color: white;
+        font-size: 2em;
+        padding-right: 3px;
+        padding-left: 3px;
+        padding-top: 5px;
+        background-color: #167FCC;
+        box-shadow: inset 11px 45px 50px 3px rgba(181, 15, 15, 0.66);
+
+        #title {
+            text-align: center;
+            margin-top: 0.6%;
+            grid-row: 4;
+        }
+
+        #left {
+            font-size: 0.5em;
+            grid-row: 4;
+            text-align: left;
+            padding-top: 1.6%;
+            padding-left: 10px;
+        }
+
+        #right {
+            grid-row: 4;
+            text-align: right;
+            font-size: 0.8em;
+            padding-top: 1.2%;
+            padding-right: 10px;
+        }
+    }
+
+
+    #bottom {
+        display: grid;
+        grid-template-rows: 100%;
+        grid-template-columns: 20% 80%;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 50px;
+        background-color: #167FCC;
+        box-shadow: inset 11px -45px 50px 3px rgba(223, 12, 42, 0.66);
+        overflow: hidden;
+
+        #menuBtn {
+            height: 100%;
+            width: 60%;
+            background-color: #21212D;
+            padding: 1px;
+            font-size: 1.5em;
+            border: 0;
+            border-radius: 0 12px 0 0;
+            color: white;
+            transition: all 0.4s;
+            margin-left: 0;
+
+        }
+
+
+        #menuBtn:hover {
+            background-color: #313147 !important;
+        }
+
+        #menuBtn:disabled {
+            background-color: #777777 !important;
+            color: #C1C1C1 !important;
+        }
+
+
+        #menuContainers {
+            height: 100%;
+            display: grid;
+            grid-template-columns: repeat(14, 1fr);
+            grid-auto-flow: column;
+            direction: rtl;
+            grid-template-rows: 100%;
+            grid-column-gap: 1.5%;
+            padding: 0.5% 2% 0 1%;
+            overflow: auto;
+
+            .container {
+                text-align: center;
+                border-radius: 0 0 30% 30%;
+                border: 1px solid black;
+                border-top-color: transparent;
+                padding-top: 18%;
+                background-color: #5B5B9B;
+                transition: all 1s;
+                transition: background-color 9s;
+                direction: ltr;
+                margin-bottom: 8px;
+
+            }
+        }
+
+
+    }
+}
+
+
+#pane_container {
+    position: absolute;
+    top: 50px;
+    left: 0;
+    right: 0;
+    height:calc(100vh - 100px);
+    color: white;
+    background-color: #0E1F31;
+
+
+    .pane {
+        height: 100%;
+        padding: 1% 2%;
+        overflow: auto;
+        scrollbar-width: none; /* Firefox */
+        scroll-behavior: smooth;
+        color: white;
+        /*animation: showPane 0.3s forwards;*/
+        -ms-overflow-style: none; /* IE and Edge */
+    }
+
+    .pane::-webkit-scrollbar {
+        display: none;
+    }
+
+}
+
+
+@keyframes showPane {
+    0% {
+        display: none;
+        opacity: 0;
+    }
+    1% {
+        display: block;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+
+.hiddenPane {
+    transition: 0.4s;
+    display: none !important;
+    /*animation: hidePane 0.4s forwards;*/
+}
+
+
+@keyframes hidePane {
+    0% {
+        opacity: 1;
+        display: block !important;
+    }
+    99% {
+        display: block !important;
+    }
+    100% {
+        display: none !important;
+        opacity: 0;
+    }
+}
+
+
+.hide {
+    visibility: hidden;
+    transition: visibility 0.8s;
+}
+
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+    overflow: visible;
+}
+
+
+.tooltip .tooltiptext {
+    opacity: 0;
+
+    background-color: #214B74;
+    color: #FFFFFF;
+    text-align: center;
+    border-radius: 9px;
+    padding: 5px 0;
+    /* Position the tooltip */
+    position: absolute;
+    z-index: 1;
+    bottom: -55%;
+    left: 50%;
+    margin-left: -80px;
+
+}
+
+
+@keyframes blendIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 100%;
+    }
+}
+
+
+.tooltip:hover .tooltiptext {
+    animation: blendIn 0.5s ease forwards;
+}