|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181 |
- .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;
- }
|