182 lines
3.5 KiB
CSS
182 lines
3.5 KiB
CSS
.pathfinder-page * {
|
|
margin: 0;
|
|
padding: 0;
|
|
outline: none;
|
|
border: none;
|
|
text-decoration: none;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root{
|
|
--start: #9faf20;
|
|
--end: #207094;
|
|
--open-path: #885771;
|
|
--closed-path: #a6819b;
|
|
--path: #ff6be6;
|
|
--wall: #001834;
|
|
}
|
|
|
|
.pathfinder-page {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-flow:column nowrap;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
}
|
|
.navbar{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: center;
|
|
align-items: stretch;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
padding: 15px 0;
|
|
}
|
|
.navbar-item{
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 10px;
|
|
}
|
|
.navbar-item-caption{
|
|
text-align: center;
|
|
background-color: var(--closed-path);
|
|
}
|
|
.general-button{
|
|
color: #fff;
|
|
font-weight: inherit;
|
|
font-size: inherit;
|
|
padding: 0.5em 1em;
|
|
background-color: transparent;
|
|
transition: background-color 0.3s linear, transform 0.15s ease-out;
|
|
}
|
|
.general-button:hover{
|
|
cursor: pointer;
|
|
}
|
|
.general-button:active{
|
|
transform: scale(1.1);
|
|
}
|
|
.options-button:hover{
|
|
color: var(--path);
|
|
}
|
|
.start-button{
|
|
background-color: var(--start);
|
|
border-radius: 50px;
|
|
color: #fff;
|
|
padding: 20px 40px;
|
|
}
|
|
.start-button:hover{
|
|
background-color: var(--end);
|
|
}
|
|
|
|
.speed-container{
|
|
margin-top: 0.2em;
|
|
padding: 0.2em 0.5em;
|
|
}
|
|
|
|
.range-caption{
|
|
font-size: 1em;
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
.custom-select {
|
|
position: relative;
|
|
font-size: 1em;
|
|
background-color: transparent;
|
|
height: 100%;
|
|
}
|
|
.custom-select:hover{
|
|
}
|
|
.custom-select select {
|
|
font-size: inherit;
|
|
}
|
|
|
|
.select-selected:after {
|
|
position: absolute;
|
|
content: "";
|
|
top: 40%;
|
|
right: 5px;
|
|
width: 0;
|
|
height: 0;
|
|
border: 6px solid transparent;
|
|
border-color: #fff transparent transparent transparent;
|
|
}
|
|
|
|
.select-selected.select-arrow-active:after {
|
|
border-color: transparent transparent #fff transparent;
|
|
top: 30%;
|
|
}
|
|
|
|
.select-items div,.select-selected {
|
|
padding: 0.5em 0 0.5em 0.3em;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Style items (options): */
|
|
.select-items {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
text-align:left;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
width: 220px;
|
|
}
|
|
.select-items div{
|
|
background-color: var(--open-path);
|
|
transition: background-color 0.3s linear;
|
|
padding: 12px 20px;
|
|
}
|
|
/* Hide the items when the select box is closed: */
|
|
.select-hide {
|
|
display: none;
|
|
}
|
|
|
|
.select-items div:hover, .same-as-selected {
|
|
background-color: var(--closed-path);
|
|
}
|
|
|
|
.select-selected {
|
|
background-color: transparent;
|
|
border: none;
|
|
height: 100%;
|
|
padding: 1em 1em 1em 0.3em;
|
|
}
|
|
|
|
.slidecontainer {
|
|
width: 100%;
|
|
}
|
|
.slider {
|
|
-webkit-appearance: none;
|
|
overflow: hidden;
|
|
appearance: none;
|
|
width: 100%;
|
|
height: 18px;
|
|
margin-top: 5px;
|
|
outline: none;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 15px;
|
|
cursor: pointer;
|
|
background: var(--wall);
|
|
box-shadow: -85px 0 0 80px var(--path);
|
|
}
|
|
.slider::-moz-range-thumb {
|
|
width: 1em;
|
|
height: 1em;
|
|
background: #000;
|
|
cursor: pointer;
|
|
}
|