changed structure for docker usage
This commit is contained in:
Marcel Gansfusz
321
app/static/style.css
Normal file
321
app/static/style.css
Normal file
@@ -0,0 +1,321 @@
|
||||
html,
|
||||
body {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
background-color: #2f3957;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.right {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
width: 75vw;
|
||||
float: right;
|
||||
/* background-color: navy; */
|
||||
}
|
||||
|
||||
.left {
|
||||
/* background-color: blueviolet; */
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
span {
|
||||
color: lightgray;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.fullsize {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #0872a9;
|
||||
/* border-radius: 20px; */
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
|
||||
.main {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#cnvdiv {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
/*display: flex;*/
|
||||
/*text-align: center;*/
|
||||
/*justify-content: center;*/
|
||||
}
|
||||
|
||||
.stack {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
/*text-align: center;*/
|
||||
/*float: right;*/
|
||||
/*margin-right: 0;*/
|
||||
/*margin-left: auto;*/
|
||||
/*display: block;*/
|
||||
}
|
||||
|
||||
.stack>canvas {
|
||||
position: absolute;
|
||||
/*display: block;*/
|
||||
/*display: inline;*/
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#submitdiv {
|
||||
/*position: relative;*/
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
label {
|
||||
/* color: white; */
|
||||
background-color: grey;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
/* margin: 10px; */
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/*Things I've stolen from https://www.w3schools.com/howto/howto_js_autocomplete.asp*/
|
||||
.autocomplete {
|
||||
/*the container must be positioned relative:*/
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
/* width: 400px; */
|
||||
width: 100%;
|
||||
padding: none;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#name {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid #818181;
|
||||
background-color: #a1a1a1;
|
||||
padding: 10px;
|
||||
/* height: 50px; */
|
||||
font-size: 12pt;
|
||||
border-radius: 20px;
|
||||
margin-top: 10px;
|
||||
/* margin-bottom: 10px; */
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
background-color: #b1b1b1;
|
||||
/* width: 100%; */
|
||||
width: 478px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/* input[type="text"]:focus { */
|
||||
/* border-bottom-right-radius: 0px; */
|
||||
/* border-bottom-left-radius: 0px; */
|
||||
/* outline: none; */
|
||||
/* } */
|
||||
|
||||
div>input[type="text"]:focus {
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
background-color: #0872a9;
|
||||
/* color: #fff; */
|
||||
border-radius: 20px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.autocomplete-items {
|
||||
position: absolute;
|
||||
/* border: 1px solid #d4d4d4; */
|
||||
border: 1px solid #818181;
|
||||
background-color: #b1b1b1;
|
||||
/* background-color: #b1b1b1; */
|
||||
border-bottom: none;
|
||||
border-top: none;
|
||||
z-index: 99;
|
||||
/*position the autocomplete items to be the same width as the container:*/
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-bottom-left-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
/* padding: 20px; */
|
||||
/* padding-top: 10px; */
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.autocomplete-items div {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
/* border-radius: 20px; */
|
||||
background-color: #b1b1b1;
|
||||
border-bottom: 1px solid #d4d4d4;
|
||||
}
|
||||
|
||||
.autocomplete-items div:hover {
|
||||
/*when hovering an item:*/
|
||||
background-color: #0872a9;
|
||||
}
|
||||
|
||||
.autocomplete-active {
|
||||
/*when navigating through the items using the arrow keys:*/
|
||||
background-color: #0872a9 !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* filedrop */
|
||||
input[type="file"] {
|
||||
/* flex: 1; */
|
||||
display: flex;
|
||||
background-color: #b1b1b1;
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
/* margin-bottom: auto; */
|
||||
}
|
||||
|
||||
input[type="file"]::file-selector-button {
|
||||
background-color: #d1d1d1;
|
||||
border-radius: 20px;
|
||||
border-color: #a1a1a1;
|
||||
}
|
||||
|
||||
#fileupload {
|
||||
/* display: inline-flex; */
|
||||
width: 500px;
|
||||
border-radius: 20px;
|
||||
background-color: #4f5977;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.fileupload {
|
||||
margin-left: auto;
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
width: 25%;
|
||||
/* align-self: right; */
|
||||
/* float: right; */
|
||||
}
|
||||
|
||||
#uploadform {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filetop {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
/* background-color: purple; */
|
||||
}
|
||||
|
||||
/* The Modal (background) */
|
||||
.modal {
|
||||
display: none;
|
||||
/* Hidden by default */
|
||||
position: fixed;
|
||||
/* Stay in place */
|
||||
z-index: 1;
|
||||
/* Sit on top */
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
/* Full width */
|
||||
height: 100%;
|
||||
/* Full height */
|
||||
overflow: auto;
|
||||
/* Enable scroll if needed */
|
||||
background-color: #4f5977;
|
||||
/* Fallback color */
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
/* Black w/ opacity */
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Modal Content/Box */
|
||||
.loading-content {
|
||||
background-color: #4f5977;
|
||||
margin: auto;
|
||||
/* 15% from the top and centered */
|
||||
padding: 20px;
|
||||
/* border: 1px solid #888; */
|
||||
/* width: 80%; */
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* Could be more or less, depending on screen size */
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* The Close Button */
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload_status_text {
|
||||
color: #ffffff;
|
||||
font-size: 16pt;
|
||||
}
|
||||
|
||||
.loader {
|
||||
margin: auto;
|
||||
border: 16px solid #f3f3f3;
|
||||
/* Light grey */
|
||||
border-top: 16px solid #3498db;
|
||||
/* Blue */
|
||||
border-radius: 50%;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user