"a few changes"
Took 6 hours 57 minutes
This commit is contained in:
35
server/public/stylesheets/colors.css
Normal file
35
server/public/stylesheets/colors.css
Normal file
@ -0,0 +1,35 @@
|
||||
:root {
|
||||
--primary-dark: #1E66B2;
|
||||
--primary: #0086FD;
|
||||
--primary-bright: #409DFC;
|
||||
|
||||
--secondary: #555555;
|
||||
--secondary-bright: #A3A3A3;
|
||||
|
||||
--hover: grey;
|
||||
|
||||
--disabled: #626265;
|
||||
|
||||
--success: #419822;
|
||||
--success-bright: #6DC946;
|
||||
|
||||
--warning: #ED6D05;
|
||||
--warning-bright: #E28433;
|
||||
|
||||
--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);
|
||||
*/
|
||||
14
server/public/stylesheets/containers.css
Normal file
14
server/public/stylesheets/containers.css
Normal file
@ -0,0 +1,14 @@
|
||||
#containers_volume {
|
||||
min-width: 10%;
|
||||
max-width: 10%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#containers_volumeSlider {
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
#containers_templates {
|
||||
margin-top: 2.5%;
|
||||
margin-bottom: 1%;
|
||||
}
|
||||
160
server/public/stylesheets/fonts.css
Normal file
160
server/public/stylesheets/fonts.css
Normal file
@ -0,0 +1,160 @@
|
||||
/* roboto-100 - latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
src: local(''),
|
||||
url('/fonts/Roboto/roboto-v30-latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/fonts/Roboto/roboto-v30-latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
/* roboto-100italic - latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 100;
|
||||
src: local(''),
|
||||
url('/fonts/Roboto/roboto-v30-latin-100italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/fonts/Roboto/roboto-v30-latin-100italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
/* roboto-300 - latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local(''),
|
||||
url('/fonts/Roboto/roboto-v30-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/fonts/Roboto/roboto-v30-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
/* roboto-300italic - latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
src: local(''),
|
||||
url('/fonts/Roboto/roboto-v30-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/fonts/Roboto/roboto-v30-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
/* roboto-regular - latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local(''),
|
||||
url('/fonts/Roboto/roboto-v30-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/fonts/Roboto/roboto-v30-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
/* roboto-italic - latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local(''),
|
||||
url('/fonts/Roboto/roboto-v30-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/fonts/Roboto/roboto-v30-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
/* roboto-500 - latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local(''),
|
||||
url('/fonts/Roboto/roboto-v30-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/fonts/Roboto/roboto-v30-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
/* roboto-500italic - latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
src: local(''),
|
||||
url('/fonts/Roboto/roboto-v30-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/fonts/Roboto/roboto-v30-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
/* roboto-700 - latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local(''),
|
||||
url('/fonts/Roboto/roboto-v30-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/fonts/Roboto/roboto-v30-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
/* roboto-700italic - latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: local(''),
|
||||
url('/fonts/Roboto/roboto-v30-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/fonts/Roboto/roboto-v30-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
/* roboto-900 - latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: local(''),
|
||||
url('/fonts/Roboto/roboto-v30-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/fonts/Roboto/roboto-v30-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
/* roboto-900italic - latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
src: local(''),
|
||||
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+ */
|
||||
}
|
||||
141
server/public/stylesheets/inputs.css
Normal file
141
server/public/stylesheets/inputs.css
Normal file
@ -0,0 +1,141 @@
|
||||
.btn {
|
||||
padding: 11px 15px;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 0.96em;
|
||||
border-radius: 3px;
|
||||
cursor: none !important;
|
||||
font-weight: 500;
|
||||
margin-right: 1%;
|
||||
margin-left: 1%;
|
||||
transition: 0.2s all;
|
||||
|
||||
}
|
||||
|
||||
.btn-blendout {
|
||||
animation: 1s blendOut forwards;
|
||||
}
|
||||
|
||||
@keyframes blendOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.inputGroup {
|
||||
margin-bottom: 1.5%;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
|
||||
.btn:disabled {
|
||||
background-color: var(--disabled) !important;
|
||||
color: #FFFFFF;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
.btn:hover {
|
||||
background-color: var(--hover);
|
||||
}
|
||||
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--primary-bright);
|
||||
}
|
||||
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--secondary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--secondary-bright);
|
||||
}
|
||||
|
||||
|
||||
.btn-success {
|
||||
background-color: var(--success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.btn-success:hover {
|
||||
background-color: var(--success-bright);
|
||||
}
|
||||
|
||||
|
||||
.btn-warning {
|
||||
background-color: var(--warning);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.btn-warning:hover {
|
||||
background-color: var(--warning-bright);
|
||||
}
|
||||
|
||||
|
||||
.btn-danger {
|
||||
background-color: var(--danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.btn-danger:hover {
|
||||
background-color: var(--danger-bright);
|
||||
}
|
||||
|
||||
|
||||
.btn-dark {
|
||||
color: white;
|
||||
background-color: var(--dark);
|
||||
}
|
||||
|
||||
|
||||
.btn-dark:hover {
|
||||
background-color: var(--dark-bright);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.input {
|
||||
padding: 6px;
|
||||
font-size: 1.12em;
|
||||
margin-left: 1%;
|
||||
margin-right: 1%;
|
||||
margin-bottom: 2%;
|
||||
border: 0;
|
||||
background-color: #e9e9ed;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
min-width: 45%;
|
||||
}
|
||||
|
||||
|
||||
.input[type=checkbox] {
|
||||
margin-bottom: 2px;
|
||||
/* Double-sized Checkboxes */
|
||||
-ms-transform: scale(1.6); /* IE */
|
||||
-moz-transform: scale(1.6); /* FF */
|
||||
-webkit-transform: scale(1.6); /* Safari and Chrome */
|
||||
-o-transform: scale(1.6); /* Opera */
|
||||
transform: scale(1.6);
|
||||
padding: 12px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
143
server/public/stylesheets/main.css
Normal file
143
server/public/stylesheets/main.css
Normal file
@ -0,0 +1,143 @@
|
||||
#main::-webkit-scrollbar {
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
.water {
|
||||
position: relative;
|
||||
width: 130px;
|
||||
height: 150px;
|
||||
background-color: #23417B;
|
||||
box-shadow: inset 0 0 80px #18566D;
|
||||
clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
|
||||
--fillTime: 45s;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: auto 83%;
|
||||
margin: auto auto 2%;
|
||||
color:white;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.water::before {
|
||||
content: "";
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background-color: #ececec;
|
||||
position: absolute;
|
||||
top: -90%;
|
||||
left: -50%;
|
||||
border-radius: 40%;
|
||||
animation: animWater 7s linear infinite, animFillIn var(--fillTime) linear forwards;
|
||||
}
|
||||
|
||||
.water::after {
|
||||
content: "";
|
||||
width: 204%;
|
||||
height: 204%;
|
||||
background-color: #ececec80;
|
||||
position: absolute;
|
||||
top: -100%;
|
||||
left: -52%;
|
||||
border-radius: 40%;
|
||||
animation: animWater 7s linear infinite, animFillIn var(--fillTime) linear forwards;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.waterCancel {
|
||||
background-color: red;
|
||||
transition: background-color 1s;
|
||||
}
|
||||
|
||||
.waterFinished {
|
||||
background-color: green;
|
||||
transition: background-color 2s;
|
||||
}
|
||||
|
||||
@keyframes animFillIn {
|
||||
0% {
|
||||
top: -100%;
|
||||
}
|
||||
100% {
|
||||
top: -188%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animWater {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#main_fillTxt {
|
||||
margin-bottom: 1.3%;
|
||||
margin-top:1.2%;
|
||||
}
|
||||
17
server/public/stylesheets/menu.css
Normal file
17
server/public/stylesheets/menu.css
Normal file
@ -0,0 +1,17 @@
|
||||
#menu {
|
||||
padding-left: 5%;
|
||||
padding-top: 10%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, calc(95% / 2));
|
||||
grid-template-rows: repeat(2, calc(95% / 2));
|
||||
grid-gap: 2% 2%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
#menu > button {
|
||||
grid-row: span 1;
|
||||
grid-column: span 1;
|
||||
font-size: 1.8em;
|
||||
height: 50%;
|
||||
}
|
||||
148
server/public/stylesheets/modal.css
Normal file
148
server/public/stylesheets/modal.css
Normal file
@ -0,0 +1,148 @@
|
||||
/* The Modal (background) */
|
||||
.modal {
|
||||
display: none; /* Hidden by default */
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 1; /* Sit on top */
|
||||
padding-top: 8%; /* Location of the box */
|
||||
padding-bottom: 1%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
color: black;
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
background-color: rgb(0, 0, 0); /* Fallback color */
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Black w/ opacity */
|
||||
}
|
||||
|
||||
|
||||
/* Modal Content */
|
||||
.modal-content {
|
||||
margin: auto;
|
||||
padding: 23px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #888888;
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
background-color: #FEFEFE;
|
||||
margin-bottom: 5px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
|
||||
#modalInnerContent {
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
#modalTitle {
|
||||
font-size: 1.9em;
|
||||
font-weight: 500;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
|
||||
@keyframes modalBlendOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes modalBlendIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.modalBlendIn {
|
||||
animation: modalBlendIn 0.4s forwards;
|
||||
}
|
||||
|
||||
|
||||
.modalBlendOut {
|
||||
animation: modalBlendOut 0.4s forwards;
|
||||
}
|
||||
|
||||
|
||||
/* The Close Button */
|
||||
.close {
|
||||
color: #AAAAAA;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.lds-ellipsis {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 44.9%;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
.lds-ellipsis div {
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 50%;
|
||||
background: #00303F;
|
||||
animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
||||
}
|
||||
.lds-ellipsis div:nth-child(1) {
|
||||
left: 6px;
|
||||
animation: lds-ellipsis1 0.6s infinite;
|
||||
}
|
||||
.lds-ellipsis div:nth-child(2) {
|
||||
left: 6px;
|
||||
animation: lds-ellipsis2 0.6s infinite;
|
||||
}
|
||||
.lds-ellipsis div:nth-child(3) {
|
||||
left: 26px;
|
||||
animation: lds-ellipsis2 0.6s infinite;
|
||||
}
|
||||
.lds-ellipsis div:nth-child(4) {
|
||||
left: 45px;
|
||||
animation: lds-ellipsis3 0.6s infinite;
|
||||
}
|
||||
@keyframes lds-ellipsis1 {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes lds-ellipsis3 {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
@keyframes lds-ellipsis2 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(19px, 0);
|
||||
}
|
||||
}
|
||||
141
server/public/stylesheets/reset.css
Normal file
141
server/public/stylesheets/reset.css
Normal file
@ -0,0 +1,141 @@
|
||||
/*
|
||||
HTML5 Reset :: style.css
|
||||
----------------------------------------------------------
|
||||
We have learned much from/been inspired by/taken code where offered from:
|
||||
|
||||
Eric Meyer :: http://meyerweb.com
|
||||
HTML5 Doctor :: http://html5doctor.com
|
||||
and the HTML5 Boilerplate :: http://html5boilerplate.com
|
||||
|
||||
-------------------------------------------------------------------------------*/
|
||||
|
||||
/* Let's default this puppy out
|
||||
-------------------------------------------------------------------------------*/
|
||||
|
||||
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
vertical-align: baseline;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
main, article, aside, figure, footer, header, nav, section, details, summary {display: block;}
|
||||
|
||||
/* Handle box-sizing while better addressing child elements:
|
||||
http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
|
||||
|
||||
/* Responsive images and other embedded objects */
|
||||
/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */
|
||||
img,
|
||||
object,
|
||||
embed {max-width: 100%;}
|
||||
|
||||
/*
|
||||
Note: keeping IMG here will cause problems if you're using foreground images as sprites.
|
||||
In fact, it *will* cause problems with Google Maps' controls at small size.
|
||||
If this is the case for you, try uncommenting the following:
|
||||
|
||||
#map img {
|
||||
max-width: none;
|
||||
}
|
||||
*/
|
||||
|
||||
/* force a vertical scrollbar to prevent a jumpy page */
|
||||
html {overflow-y: scroll;}
|
||||
|
||||
/* we use a lot of ULs that aren't bulleted.
|
||||
you'll have to restore the bullets within content,
|
||||
which is fine because they're probably customized anyway */
|
||||
ul {list-style: none;}
|
||||
|
||||
blockquote, q {quotes: none;}
|
||||
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {content: ''; content: none;}
|
||||
|
||||
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
|
||||
|
||||
del {text-decoration: line-through;}
|
||||
|
||||
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
|
||||
|
||||
/* tables still need cellspacing="0" in the markup */
|
||||
table {border-collapse: separate; border-spacing: 0;}
|
||||
th {font-weight: bold; vertical-align: bottom;}
|
||||
td {font-weight: normal; vertical-align: top;}
|
||||
|
||||
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
|
||||
|
||||
input, select {vertical-align: middle;}
|
||||
|
||||
pre {
|
||||
white-space: pre; /* CSS2 */
|
||||
white-space: pre-wrap; /* CSS 2.1 */
|
||||
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
|
||||
word-wrap: break-word; /* IE */
|
||||
}
|
||||
|
||||
input[type="radio"] {vertical-align: text-bottom;}
|
||||
input[type="checkbox"] {vertical-align: bottom;}
|
||||
.ie7 input[type="checkbox"] {vertical-align: baseline;}
|
||||
.ie6 input {vertical-align: text-bottom;}
|
||||
|
||||
select, input, textarea {font: 99% sans-serif;}
|
||||
|
||||
table {font-size: inherit; font: 100%;}
|
||||
|
||||
small {font-size: 85%;}
|
||||
|
||||
strong {font-weight: bold;}
|
||||
|
||||
td, td img {vertical-align: top;}
|
||||
|
||||
/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
|
||||
sub, sup {font-size: 75%; line-height: 0; position: relative;}
|
||||
sup {top: -0.5em;}
|
||||
sub {bottom: -0.25em;}
|
||||
|
||||
/* standardize any monospaced elements */
|
||||
pre, code, kbd, samp {font-family: monospace, sans-serif;}
|
||||
|
||||
/* hand cursor on clickable elements */
|
||||
.clickable,
|
||||
label,
|
||||
input[type=button],
|
||||
input[type=submit],
|
||||
input[type=file],
|
||||
button {cursor: pointer;}
|
||||
|
||||
/* Webkit browsers add a 2px margin outside the chrome of form elements */
|
||||
button, input, select, textarea {margin: 0;}
|
||||
|
||||
/* make buttons play nice in IE */
|
||||
button,
|
||||
input[type=button] {width: auto; overflow: visible;}
|
||||
|
||||
/* scale images in IE7 more attractively */
|
||||
.ie7 img {-ms-interpolation-mode: bicubic;}
|
||||
|
||||
/* prevent BG image flicker upon hover
|
||||
(commented out as usage is rare, and the filter syntax messes with some pre-processors)
|
||||
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
|
||||
*/
|
||||
|
||||
/* let's clear some floats */
|
||||
.clearfix:after { content: " "; display: block; clear: both; }
|
||||
7
server/public/stylesheets/settings.css
Normal file
7
server/public/stylesheets/settings.css
Normal file
@ -0,0 +1,7 @@
|
||||
#settings {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, calc(85% / 4));
|
||||
grid-template-rows: repeat(4, calc(85% / 4));
|
||||
grid-gap: 5% 5%;
|
||||
width: 100%;
|
||||
}
|
||||
108
server/public/stylesheets/setup.css
Normal file
108
server/public/stylesheets/setup.css
Normal file
@ -0,0 +1,108 @@
|
||||
#setup {
|
||||
padding-left: 5%;
|
||||
padding-right: 5%;
|
||||
padding-top: 1%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, calc(95% / 2));
|
||||
grid-template-rows: repeat(9, calc(100% / 9));
|
||||
grid-gap: 2% 2%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
#setup #setupContainersDiv {
|
||||
grid-row: span 18;
|
||||
grid-column: span 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
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 #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 #818181;
|
||||
border-radius: 5px;
|
||||
padding: 1% 10px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
#setupContainers .setupContainer {
|
||||
color: white;
|
||||
text-align: left;
|
||||
width: calc(100% / 2.3);
|
||||
height: 12%;
|
||||
display: inline-block;
|
||||
margin-bottom: 3%;
|
||||
border: 2px solid #142F44;
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
border-radius: 10px;
|
||||
padding: 3% 10px;
|
||||
transition: 0.5s;
|
||||
background-color: #4f6aaa;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.removeSlowly {
|
||||
animation: removeSlowlyWidth 0.8s forwards;
|
||||
}
|
||||
|
||||
|
||||
@keyframes removeSlowlyWidth {
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.error {
|
||||
background-color: var(--error) !important;
|
||||
}
|
||||
|
||||
|
||||
#setupContainers .setupContainer p {
|
||||
margin-bottom: 4.5%;
|
||||
font-weight: 600;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
|
||||
#setupContainers .setupContainer select {
|
||||
margin-bottom: 2.1%;
|
||||
background-color: var(--select-bg);
|
||||
color: white;
|
||||
}
|
||||
322
server/public/stylesheets/style.css
Normal file
322
server/public/stylesheets/style.css
Normal file
@ -0,0 +1,322 @@
|
||||
@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;
|
||||
}
|
||||
Reference in New Issue
Block a user