Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
3.4 kB · 159 lines
CSS
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160/* Slider */input[type="range"].slider { -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ appearance: none; width: 100%; /* Specific width is required for Firefox. */ background: transparent; /* Otherwise white in Chrome */ pointer-events: auto;}input[type="range"].slider::-webkit-slider-thumb { -webkit-appearance: none;}
input[type="range"].slider:focus { outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */}
input[type="range"].slider::-webkit-slider-thumb { -webkit-appearance: none; height: 1rem; width: 1rem; border-radius: 9999px; background-color: #fff; @apply cursor-pointer; margin-top: -5px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */}input[type="range"].slider::-webkit-slider-runnable-track { width: 100%; height: 0.5rem; @apply cursor-pointer; background-color: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 9999px;}
input[type="range"].slider:focus::-webkit-slider-runnable-track { background: #367ebd;}
input[type="range"].slider.zoom::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; height: 1.5rem; width: 1.5rem; border-radius: 9999px; border: 2px solid rgba(0, 0, 0, 0.36); --tw-bg-opacity: 1; background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
margin-top: 0px; cursor: pointer; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);}input[type="range"].slider.zoom::-webkit-slider-runnable-track { width: 100%; height: calc(1.5rem + 4px); @apply cursor-pointer; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; background: rgba(0, 0, 0, 0.36); border-radius: 9999px; border: 2px rgba(255, 255, 255, 0.36) solid;}
input[type="range"].slider.zoom:focus::-webkit-slider-runnable-track { background: rgba(255, 255, 255, 0.05);}
.slider { display: flex;}
.slider.horizontal { flex-direction: column;}
.slider.vertical { height: 150px;}
.label-container { display: flex; justify-content: space-between;}.label { display: block;}
.slider.horizontal .track { height: 30px; width: calc(100% - 2rem); padding-left: 1rem; margin-left: 1rem;}
/* track line */.track:before { content: attr(x); display: block; position: absolute; background: gray;}
.slider.horizontal .track:before { width: calc(100% + 2rem); margin-left: -2rem; top: 50%; transform: translateY(-50%); height: calc(1.5rem + 4px); @apply cursor-pointer; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; background: rgba(0, 0, 0, 0.36); border-radius: 9999px; border: 2px rgba(255, 255, 255, 0.36) solid;}
.slider.vertical .track { width: 30px; height: 100%;}
.slider.vertical .track:before { width: 3px; height: 100%; left: 50%; transform: translateX(-50%);}
.thumb { width: 20px; height: 20px; border-radius: 50%; background: gray;}
.thumb.dragging { background: dimgray;}
.thumb.focus { background: orange;}
.slider.horizontal .thumb { top: 50%;}
.slider.vertical .thumb { left: 50%;}
.track.disabled { opacity: 0.4;}