Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
6.6 kB · 261 lines
CSS
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262.tri-switch { display: flex; justify-content: space-between; align-items: center; width: 23em; --dur: 0.3s; --dur2: 0.15s; font-size: 6px;
label { background-color: #f00; background-image: radial-gradient(0.3em 0.25em at 50% 25%, rgb(255, 255, 255) 25%, rgba(255, 255, 255, 0)), radial-gradient(0.25em 0.25em at 30% 75%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)), radial-gradient(0.3em 0.3em at 60% 80%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)), radial-gradient( 100% 100%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.3) 40%, rgba(0, 0, 0, 0.5) 50% ); border-radius: 50%; box-shadow: 0 0 0.75em #f00, 0 0.5em 0.75em rgba(0, 0, 0, 0.3); display: inline-block; transition: all var(--dur2) var(--dur2) linear; width: 1.5em; height: 1.5em; } label:first-of-type { background-color: #050; box-shadow: 0 0.5em 0.75em rgba(0, 0, 0, 0.3); order: -1; } label span { display: inline-block; overflow: hidden; width: 0; } /* Lever */ input:not([type="range"]).lever, input:not([type="range"]).lever:hover:not([disabled]) { background-image: radial-gradient( 1em 1.5em at 50% 50%, rgb(204, 204, 204) 25%, rgb(170, 170, 170) 49%, rgba(170, 170, 170, 0) 50% ), radial-gradient(0.65em 1em at 50% 53%, rgb(68, 68, 68), rgba(68, 68, 68, 0)), radial-gradient(0.75em 0.75em at 55% 45%, rgb(255, 255, 255), rgba(255, 255, 255, 0)), radial-gradient(0.5em 0.4em at 43% 56%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)), radial-gradient(0.5em 0.4em at 55% 57%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)), radial-gradient(0.5em 0.4em at 50% 60%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)), radial-gradient( 100% 100% at 50% 50%, rgb(238, 238, 238), rgb(170, 170, 170) 10%, rgb(0, 0, 0) 18%, rgb(0, 0, 0) 21%, rgb(153, 153, 153) 21.5%, rgb(153, 153, 153) 24%, rgba(153, 153, 153, 0) 24.5%, rgba(221, 221, 221, 0) 30%, rgb(221, 221, 221) 30.5%, rgb(221, 221, 221) 33%, rgb(68, 68, 68) 33.5%, rgb(68, 68, 68) 35%, rgba(68, 68, 68, 0) 35.5%, rgba(221, 221, 221, 0) 41%, rgb(221, 221, 221) 41.5%, rgb(238, 238, 238) 45%, rgb(68, 68, 85) 45.5%, rgb(68, 68, 85) 49%, rgba(68, 68, 85, 0) 50% ), radial-gradient(2em 2em at 35% 20%, rgb(255, 255, 255), rgba(255, 255, 255, 0) 2em), radial-gradient(2em 2em at 65% 80%, rgb(255, 255, 255), rgba(255, 255, 255, 0) 2em), radial-gradient(2em 2em at 80% 35%, rgb(255, 255, 255), rgba(255, 255, 255, 0) 2em), radial-gradient(2em 2em at 20% 65%, rgb(255, 255, 255), rgba(255, 255, 255, 0) 2em), radial-gradient(100% 100% at center, rgb(170, 170, 170) 49%, rgba(170, 170, 170, 0) 50%); background-position: 0.5em 0, 0.5em 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; border-radius: 50%; box-shadow: 0 2em 2em rgba(0, 0, 0, 0.3); cursor: pointer; font-size: 1em; display: block; outline: 0; position: relative; width: 12em; height: 12em; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: background-position var(--dur) linear; } .lever:before, .lever:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; } .lever:before { animation: leverAOff var(--dur) linear forwards; background: radial-gradient(35% 25% at 50% 25%, rgb(136, 136, 153) 20%, rgba(136, 136, 153, 0)), radial-gradient(1em 0.75em at 32% 75%, rgb(102, 102, 102), rgba(102, 102, 102, 0)), radial-gradient(1em 0.75em at 65% 78%, rgb(102, 102, 102), rgba(102, 102, 102, 0)), radial-gradient(100% 100% at center, rgb(68, 68, 68) 49.5%, rgba(68, 68, 68, 0) 50%); box-shadow: -2em 4em 2em rgba(0, 0, 0, 0.3), -2em 5em 4em rgba(0, 0, 0, 0.2), -2em 7em 4em rgba(0, 0, 0, 0.2), -2em 9em 4em rgba(0, 0, 0, 0.2), -2em 11em 4em rgba(0, 0, 0, 0.2); border-radius: 50%; width: 4em; height: 4em; transform: translate(100%, -50%); z-index: 1; } .lever:checked { background-position: -0.5em 0, -0.5em 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } .lever:checked:before { animation: leverAOn var(--dur) linear forwards; } .lever:after { animation: leverBOff var(--dur) linear forwards; background-color: #333; border-radius: 15em; box-shadow: 0 0 1em #667 inset; width: 7.5em; height: 4em; transform: translate(0.5em, -50%); } .lever:checked:after { animation: leverBOn var(--dur) linear forwards; } .lever:checked + label { background-color: #0d0; box-shadow: 0 0 0.75em #0f0, 0 0.5em 0.75em rgba(0, 0, 0, 0.3); } .lever:checked + label + label { background-color: #500; box-shadow: 0 0.5em 0.75em rgba(0, 0, 0, 0.3); }}@keyframes leverAOn { from { box-shadow: -2em 4em 2em rgba(0, 0, 0, 0.3), -2em 5em 4em rgba(0, 0, 0, 0.2), -2em 7em 4em rgba(0, 0, 0, 0.2), -2em 9em 4em rgba(0, 0, 0, 0.2), -2em 11em 4em rgba(0, 0, 0, 0.2); transform: translate(100%, -50%); } 50% { box-shadow: 0 6em 2em rgba(0, 0, 0, 0.3), 0 5em 4em rgba(0, 0, 0, 0.2), 0 7em 4em rgba(0, 0, 0, 0.2), 0 9em 4em rgba(0, 0, 0, 0.2), 0 11em 4em rgba(0, 0, 0, 0.2); } to { box-shadow: 2em 4em 2em rgba(0, 0, 0, 0.3), 2em 5em 4em rgba(0, 0, 0, 0.2), 2em 7em 4em rgba(0, 0, 0, 0.2), 2em 9em 4em rgba(0, 0, 0, 0.2), 2em 11em 4em rgba(0, 0, 0, 0.2); transform: translate(-200%, -50%); }}@keyframes leverAOff { from { box-shadow: 2em 4em 2em rgba(0, 0, 0, 0.3), 2em 5em 4em rgba(0, 0, 0, 0.2), 2em 7em 4em rgba(0, 0, 0, 0.2), 2em 9em 4em rgba(0, 0, 0, 0.2), 2em 11em 4em rgba(0, 0, 0, 0.2); transform: translate(-200%, -50%); } 50% { box-shadow: 0 6em 2em rgba(0, 0, 0, 0.3), 0 5em 4em rgba(0, 0, 0, 0.2), 0 7em 4em rgba(0, 0, 0, 0.2), 0 9em 4em rgba(0, 0, 0, 0.2), 0 11em 4em rgba(0, 0, 0, 0.2); } to { box-shadow: -2em 4em 2em rgba(0, 0, 0, 0.3), -2em 5em 4em rgba(0, 0, 0, 0.2), -2em 7em 4em rgba(0, 0, 0, 0.2), -2em 9em 4em rgba(0, 0, 0, 0.2), -2em 11em 4em rgba(0, 0, 0, 0.2); transform: translate(100%, -50%); }}@keyframes leverBOn { from { width: 7.5em; transform: translate(0.5em, -50%); } 50% { width: 4em; transform: translate(-50%, -50%); } to { width: 7.5em; transform: translate(-8em, -50%); }}@keyframes leverBOff { from { width: 7.5em; transform: translate(-8em, -50%); } 50% { width: 4em; transform: translate(-50%, -50%); } to { width: 7.5em; transform: translate(0.5em, -50%); }}