Took 1 hour 33 minutes
This commit is contained in:
2023-02-06 11:03:39 +01:00
parent f4da186fb7
commit 1240809384
20 changed files with 158 additions and 40 deletions

View File

@ -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);
*/

View File

@ -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+ */
}

View File

@ -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;
}

View File

@ -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%;
}

View File

@ -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;
}