From de33aa514b18745b9e102d969940989309231fbc Mon Sep 17 00:00:00 2001 From: Tobias Hopp Date: Mon, 5 May 2025 11:17:19 +0200 Subject: [PATCH] Move of assets Took 57 minutes --- web/public/stylesheets/style.css | 322 ------------------ web/src/{ => assets/stylesheets}/App.css | 0 .../assets}/stylesheets/colors.css | 0 .../assets}/stylesheets/containers.css | 0 .../assets}/stylesheets/fonts.css | 0 .../assets}/stylesheets/inputs.css | 0 .../assets}/stylesheets/main.css | 105 +++--- .../assets}/stylesheets/menu.css | 0 .../assets}/stylesheets/modal.css | 0 .../assets}/stylesheets/reset.css | 0 .../assets}/stylesheets/settings.css | 0 .../assets}/stylesheets/setup.css | 0 web/src/assets/stylesheets/style.css | 318 +++++++++++++++++ 13 files changed, 368 insertions(+), 377 deletions(-) delete mode 100644 web/public/stylesheets/style.css rename web/src/{ => assets/stylesheets}/App.css (100%) rename web/{public => src/assets}/stylesheets/colors.css (100%) rename web/{public => src/assets}/stylesheets/containers.css (100%) rename web/{public => src/assets}/stylesheets/fonts.css (100%) rename web/{public => src/assets}/stylesheets/inputs.css (100%) rename web/{public => src/assets}/stylesheets/main.css (58%) rename web/{public => src/assets}/stylesheets/menu.css (100%) rename web/{public => src/assets}/stylesheets/modal.css (100%) rename web/{public => src/assets}/stylesheets/reset.css (100%) rename web/{public => src/assets}/stylesheets/settings.css (100%) rename web/{public => src/assets}/stylesheets/setup.css (100%) create mode 100644 web/src/assets/stylesheets/style.css diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css deleted file mode 100644 index fb39635..0000000 --- a/web/public/stylesheets/style.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/web/src/App.css b/web/src/assets/stylesheets/App.css similarity index 100% rename from web/src/App.css rename to web/src/assets/stylesheets/App.css diff --git a/web/public/stylesheets/colors.css b/web/src/assets/stylesheets/colors.css similarity index 100% rename from web/public/stylesheets/colors.css rename to web/src/assets/stylesheets/colors.css diff --git a/web/public/stylesheets/containers.css b/web/src/assets/stylesheets/containers.css similarity index 100% rename from web/public/stylesheets/containers.css rename to web/src/assets/stylesheets/containers.css diff --git a/web/public/stylesheets/fonts.css b/web/src/assets/stylesheets/fonts.css similarity index 100% rename from web/public/stylesheets/fonts.css rename to web/src/assets/stylesheets/fonts.css diff --git a/web/public/stylesheets/inputs.css b/web/src/assets/stylesheets/inputs.css similarity index 100% rename from web/public/stylesheets/inputs.css rename to web/src/assets/stylesheets/inputs.css diff --git a/web/public/stylesheets/main.css b/web/src/assets/stylesheets/main.css similarity index 58% rename from web/public/stylesheets/main.css rename to web/src/assets/stylesheets/main.css index f425faa..150d648 100644 --- a/web/public/stylesheets/main.css +++ b/web/src/assets/stylesheets/main.css @@ -2,67 +2,62 @@ 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 { + grid-row: span 1; + grid-column: span 1; + background-color: rgba(57, 57, 57, 0.6); + width: 95%; + height: 97%; + display: grid; + grid-template-columns: 100%; + grid-template-rows: repeat(3, calc(100% / 3)); + grid-row-gap: 3%; + text-align: center; + border-radius: 30px 10px 30px; + color: white; + /*box-shadow: 3px 3px 3px;*/ + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.29); + transition: 0.4s; + overflow: hidden; + padding-bottom: 1%; + + .thumbnail { + grid-column: span 1; + grid-row: span 2; + margin-left: auto; + margin-right: auto; + max-height: 99%; + overflow: hidden; + transition: 0.5s; + margin-top: 1%; + } + + .drinkName { + font-family: Raleway, sans-serif; + grid-column: span 1; + grid-row: span 1; + font-size: 150%; + margin-top: 1%; + } + + } + + .drink:hover { + background-color: rgba(22, 67, 113, 0.8); + /*width: 100%; + height: 100%;*/ + } + + } - -#main .drink { - grid-row: span 1; - grid-column: span 1; - background-color: rgba(57, 57, 57, 0.6); - width: 95%; - height: 97%; - display: grid; - grid-template-columns: 100%; - grid-template-rows: repeat(3, calc(100% / 3)); - grid-row-gap: 3%; - text-align: center; - border-radius: 30px 10px 30px; - color: white; - /*box-shadow: 3px 3px 3px;*/ - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.29); - transition: 0.4s; - overflow: hidden; - padding-bottom: 1%; -} - - -#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; - margin-right: auto; - max-height: 99%; - overflow: hidden; - transition: 0.5s; - margin-top: 1%; -} - - -.drink .drinkName { - font-family: Raleway, sans-serif; - grid-column: span 1; - grid-row: span 1; - font-size: 150%; - margin-top: 1%; -} - - - - /* Water animation */ body { margin: 50px; @@ -80,7 +75,7 @@ body { background-position: center; background-size: auto 83%; margin: auto auto 2%; - color:white; + color: white; font-size: 1.5em; } @@ -139,5 +134,5 @@ body { #main_fillTxt { margin-bottom: 1.3%; - margin-top:1.2%; + margin-top: 1.2%; } \ No newline at end of file diff --git a/web/public/stylesheets/menu.css b/web/src/assets/stylesheets/menu.css similarity index 100% rename from web/public/stylesheets/menu.css rename to web/src/assets/stylesheets/menu.css diff --git a/web/public/stylesheets/modal.css b/web/src/assets/stylesheets/modal.css similarity index 100% rename from web/public/stylesheets/modal.css rename to web/src/assets/stylesheets/modal.css diff --git a/web/public/stylesheets/reset.css b/web/src/assets/stylesheets/reset.css similarity index 100% rename from web/public/stylesheets/reset.css rename to web/src/assets/stylesheets/reset.css diff --git a/web/public/stylesheets/settings.css b/web/src/assets/stylesheets/settings.css similarity index 100% rename from web/public/stylesheets/settings.css rename to web/src/assets/stylesheets/settings.css diff --git a/web/public/stylesheets/setup.css b/web/src/assets/stylesheets/setup.css similarity index 100% rename from web/public/stylesheets/setup.css rename to web/src/assets/stylesheets/setup.css diff --git a/web/src/assets/stylesheets/style.css b/web/src/assets/stylesheets/style.css new file mode 100644 index 0000000..392e7c3 --- /dev/null +++ b/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; +} \ No newline at end of file