175 lines
2.6 KiB
CSS
175 lines
2.6 KiB
CSS
body {
|
|
background-color: black;
|
|
margin: 0px;
|
|
}
|
|
|
|
.select {
|
|
color: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 500px;
|
|
}
|
|
|
|
.inputResolution {
|
|
width: 100px;
|
|
}
|
|
|
|
select {
|
|
color: black;
|
|
}
|
|
|
|
button {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
#canvas {
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.canvas-container {
|
|
position: relative;
|
|
width: 640px;
|
|
height: 480px;
|
|
}
|
|
|
|
.output_canvas {
|
|
position: absolute;
|
|
object-fit: contain;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#video {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
#camera {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.valueDisplay {
|
|
position: relative;
|
|
margin-left: 665px;
|
|
color: #f7bd8f;
|
|
font-size: 10pt;
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
font-weight: 100;
|
|
display: none;
|
|
}
|
|
|
|
.Slider {
|
|
-webkit-appearance: none;
|
|
position: relative;
|
|
margin-top: 5px;
|
|
margin-left: 665px;
|
|
margin-bottom: 10px;
|
|
|
|
background: none;
|
|
height: 12px;
|
|
width: 200px;
|
|
border-radius: 6px;
|
|
border: 1px solid #f7bd8f;
|
|
display: none;
|
|
}
|
|
|
|
.Slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 5px;
|
|
background: #bf794e;
|
|
outline: none;
|
|
display: none;
|
|
}
|
|
|
|
.imageButtons {
|
|
position: relative;
|
|
margin-top: 10px;
|
|
width: 30px;
|
|
height: 30px;
|
|
border: none;
|
|
cursor: pointer;
|
|
display: none;
|
|
}
|
|
|
|
#screenshot_button {
|
|
margin-left: 1320px; /*Or 675px*/
|
|
/* background: url('/images/screenshot.png'); */
|
|
display: none;
|
|
}
|
|
|
|
#save_drawing_button {
|
|
margin-left: 20px;
|
|
/* background: url('/images/savejson.png'); */
|
|
display: none;
|
|
}
|
|
|
|
#index_UP_button {
|
|
margin-left: 20px;
|
|
/* background: url('/images/shapeindex_up.png'); */
|
|
display: none;
|
|
}
|
|
|
|
#index_DOWN_button {
|
|
margin-left: 20px;
|
|
/* background: url('/images/shapeindex_down.png'); */
|
|
display: none;
|
|
}
|
|
|
|
.Buttons {
|
|
position: relative;
|
|
-webkit-appearance: none;
|
|
margin-top: 10px;
|
|
|
|
height: 36px;
|
|
border: 2px solid #fff;
|
|
border-radius: 18px;
|
|
|
|
background: none;
|
|
font-size: 10pt;
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
font-weight: 100;
|
|
cursor: pointer;
|
|
display: none;
|
|
}
|
|
|
|
#edit_button {
|
|
margin-top: 5px;
|
|
margin-left: 1310px; /*Or 665px*/
|
|
margin-bottom: 15px;
|
|
width: 200px;
|
|
border-color: #fff;
|
|
font-size: 14pt;
|
|
color: #fff;
|
|
display: none;
|
|
}
|
|
|
|
#complete_button {
|
|
margin-left: 1310px; /*Or 665px*/
|
|
border-color: #89c3eb;
|
|
color: #89c3eb;
|
|
width: 80px;
|
|
display: none;
|
|
}
|
|
|
|
#undo_button {
|
|
margin-left: 5px;
|
|
border-color: #fff;
|
|
color: #fff;
|
|
width: 50px;
|
|
display: none;
|
|
}
|
|
|
|
#delete_button {
|
|
margin-left: 5px;
|
|
border-color: #ee827c;
|
|
color: #ee827c;
|
|
width: 60px;
|
|
display: none;
|
|
}
|