forked from Simnation/Main
19 lines
5 KiB
CSS
19 lines
5 KiB
CSS
|
*{
|
||
|
|
--variable-main-color: #ffffff;
|
||
|
|
--variable-zonename-color: #ffffff;
|
||
|
|
--variable-streetname-color: #ffffff;
|
||
|
|
--variable-direction-color: #ffffff;
|
||
|
|
--variable-zipcode-color: #ffffff;
|
||
|
|
--variable-distance-color: #ffffff;
|
||
|
|
|
||
|
|
--variable-health-color: #ffffff;
|
||
|
|
--variable-hunger-color: #ffffff;
|
||
|
|
--variable-thirst-color: #ffffff;
|
||
|
|
--variable-armor-color: #ffffff;
|
||
|
|
--variable-oxygen-color: #ffffff;
|
||
|
|
|
||
|
|
--variable-speed-color: #ffffff;
|
||
|
|
--variable-fuel-color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {--size: 0px;-webkit-user-drag: none;user-select: none;}body {overflow: hidden;}#location {display: flex;position: absolute;bottom: 30px;left: 310px;padding: 10px 20px;opacity: 0;transition: .2s;width: 300px;}#location > img {width: 40px;height: 40px;}#location > #zone {font-family: 'Hanken Grotesk';font-weight: 200;font-style: italic;font-size: 12px;color: var(--variable-zonename-color);position: absolute;left: 70px;top: 0px;}#location > #streetname {font-family: 'Hanken Grotesk';font-weight: 600;color: var(--variable-streetname-color);position: absolute;padding-bottom: 2px;left: 70px;top: 15px;border-bottom: 1px solid rgba(255, 255, 255, 0.425);}.bottom {position: absolute;top: 40px;left: 70px;}.bottom > #direction {font-family: 'Hanken Grotesk';font-weight: 200;font-size: 12px;color: var(--variable-direction-color);}.bottom > #zipcode {font-family: 'Hanken Grotesk';font-weight: 200;font-size: 12px;color: var(--variable-zipcode-color);margin-left: 10px;}.bottom > #distance {font-family: 'Hanken Grotesk';font-weight: 300;font-size: 12px;color: var(--variable-distance-color);margin-left: 10px;}#status {width: 300px;height: 150px;border-radius: 10px;position: absolute;bottom: 30px;right: 20px;overflow: hidden;display: flex;justify-content: flex-end;flex-direction: column;opacity: 0;}#status img {height: 20px;width: 20px;}#status > .health, #status > .thirst, #status > .food, #status > .armor, #status > .oxygen {position: relative;height: 30px;}.health > img, .armor > img, .thirst > img, .food > img, .oxygen > img {position: absolute;right: 10px;top: 4px;}.health > hr, .armor > hr, .thirst > hr, .food > hr, .oxygen > hr {position: absolute;transition: .2s;right: 40px;top: 13px;width: 150px;height: 2px;border-radius: 10px;outline: none;border: none;overflow: visible;background-color: var(--variable-main-color);}.health > hr::before, .armor > hr::before, .thirst > hr::before, .food > hr::before, .oxygen > hr::before {content: "";position: absolute;left: calc(-1 * var(--size));transition: .2s;width: var(--size);height: 2px;border-radius: 10px;outline: none;border: none;background-color: #6b6b6bbe;}.health > span, .armor > span, .thirst > span, .food > span, .oxygen > span {position: absolute;font-family: 'Hanken Grotesk';font-weight: 400;font-size: 12px;color: var(--variable-main-color);right: 40px;top: 3px;}.health > .title, .armor > .title, .thirst > .title, .food > .title, .oxygen > .title {position: absolute;font-family: 'Hanken Grotesk';font-weight: 200;font-size: 12px;color: var(--variable-main-color);left: 110px;top: 3px;}.health > hr {background-color: var(--variable-health-color);}.armor > hr {background-color: var(--variable-armor-color);}.food > hr {background-color: var(--variable-hunger-color);}.thirst > hr {background-color: var(--variable-thirst-color);}.oxygen > hr {background-color: var(--variable-oxygen-color);}#speedometer {position: absolute;bottom: -50px;left: calc(50% - 125px);width: 250px;transform: scale(0.5);transition: .2s;opacity: 0;}#speedometer #speed {height: 200px;margin: 20px auto;display: block;}#speedometer .fuel {position: absolute;bottom: 77px;right: 25px;height: 30px;width: 30px;}#speedometer .beam {position: absolute;bottom: 30px;right: 90px;height: 30px;width: 30px;}#speedometer .engine {position: absolute;bottom: 30px;right: 180px;height: 30px;width: 30px;}#speedometer .seatbelt {position: absolute;bottom: 20px;right: 135px;height: 30px;width: 30px;}.disabled {opacity: 0.4;}#speedometer .speedpath {stroke: #6b6b6bbe;stroke-width: 4;stroke-linecap: round;}#speedometer .fuelpath {stroke: #6b6b6bbe;stroke-width: 3;stroke-linecap: round;}#speedometer .fuelvalue {stroke-width: 4;stroke: var(--variable-fuel-color);stroke-dasharray: 126 500;stroke-dashoffset: 126;animation: dash 3s 0.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;stroke-linecap: round;}#speedometer .speedvalue {stroke-width: 5;stroke: var(--variable-speed-color);stroke-dasharray: 126 500;stroke-dashoffset: 126;animation: dash 3s 0.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;stroke-linecap: round;}#speedometer span {position: absolut
|