You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
2.0 KiB
110 lines
2.0 KiB
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0; }
|
|
|
|
body {
|
|
font-family: sans-serif; }
|
|
.outerContainer {
|
|
height: 500px;
|
|
margin: 10px 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 100%; }
|
|
|
|
.controlsContainer {
|
|
background: #e7e7e7;
|
|
border-bottom: 5px solid #aaa;
|
|
display: flex;
|
|
height: 50px;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 1; }
|
|
|
|
.animationContainer {
|
|
background: rgba(102, 51, 153, 0.05);
|
|
height: 450px;
|
|
margin-top: 50px;
|
|
position: relative;
|
|
width: 100%;
|
|
z-index: 0; }
|
|
.particle-container {
|
|
position: absolute;
|
|
z-index: 1; }
|
|
|
|
.particle-body {
|
|
background-color: #555;
|
|
background-size: 20px 20px;
|
|
border-radius: 0 10px 10px 10px;
|
|
height: 20px;
|
|
margin: -10px 0 0 -10px;
|
|
position: relative;
|
|
width: 20px;
|
|
z-index: 2; }
|
|
|
|
.particle-movement-circle {
|
|
border: 3px dotted darkturquoise;
|
|
position: absolute;
|
|
z-index: 0; }
|
|
|
|
.particle-vision {
|
|
height: 100px;
|
|
left: -50px;
|
|
position: absolute;
|
|
top: -50px;
|
|
width: 100px;
|
|
z-index: 1; }
|
|
|
|
.particle-vision-dot {
|
|
background: red;
|
|
height: 2px;
|
|
position: absolute;
|
|
width: 2px; }
|
|
.particle-vision-dot.removed {
|
|
background: green; }
|
|
.particle-vision-dot.touching {
|
|
outline: 2px solid yellow; }
|
|
.controls-checkbox {
|
|
cursor: pointer;
|
|
line-height: 45px;
|
|
padding: 0 10px; }
|
|
.controls-checkbox:hover {
|
|
background: #d7d7d7; }
|
|
|
|
.controls-checkbox-text {
|
|
font-size: 11px; }
|
|
|
|
.controls-checkbox-input {
|
|
margin-right: 5px; }
|
|
|
|
.controls-range {
|
|
cursor: pointer;
|
|
line-height: 20px;
|
|
padding: 0 10px; }
|
|
.controls-range:hover {
|
|
background: #d7d7d7; }
|
|
|
|
.controls-range-text {
|
|
cursor: pointer;
|
|
font-size: 11px; }
|
|
|
|
.controls-range-input {
|
|
cursor: pointer;
|
|
display: block;
|
|
width: 100px; }
|
|
|
|
.controls-animating {
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
line-height: 45px;
|
|
margin-left: auto;
|
|
padding: 0 10px;
|
|
user-select: none; }
|
|
.controls-animating [type=checkbox] {
|
|
display: none; }
|
|
.controls-animating:hover {
|
|
background: #d7d7d7; }
|
|
.controls-animating:focus {
|
|
outline: 0; }
|
|
|