Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
2.7 kB · 130 lines
CSS
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131@utility progress { @apply rounded-box text-base-content relative h-2 w-full appearance-none overflow-hidden bg-current/20; &:indeterminate { background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% ); background-size: 200%; background-position-x: 15%; @media (prefers-reduced-motion: no-preference) { animation: progress 5s ease-in-out infinite; }
@supports (-moz-appearance: none) { &::-moz-progress-bar { @apply bg-transparent; @media (prefers-reduced-motion: no-preference) { animation: progress 5s ease-in-out infinite; background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% ); background-size: 200%; background-position-x: 15%; } } } }
@supports (-moz-appearance: none) { &::-moz-progress-bar { @apply rounded-box bg-current; } }
@supports (-webkit-appearance: none) { &::-webkit-progress-bar { @apply rounded-box bg-transparent; }
&::-webkit-progress-value { @apply rounded-box; background-color: currentColor; } }}
@utility progress-primary { @apply text-primary;}
@utility progress-secondary { @apply text-secondary;}
@utility progress-accent { @apply text-accent;}
@utility progress-neutral { @apply text-neutral;}
@utility progress-info { @apply text-info;}
@utility progress-success { @apply text-success;}
@utility progress-warning { @apply text-warning;}
@utility progress-error { @apply text-error;}@utility progress-notice { @apply text-notice;}@utility progress-alert { @apply text-alert-color;}
@keyframes progress { 50% { background-position-x: -115%; }}
.radial-dial { @apply flex flex-col items-center; --radial-radius: 25px; --radial-border-width: 6px; --radial-background: transparent;}.radial-indicator { position: relative; background: conic-gradient( var(--radial-color, #fff000) 0%, var(--radial-color, #fff000) var(--end-angle, 0%), var(--radial-background) var(--end-angle, 0%), var(--radial-background) 100% ); width: var(--radial-radius); height: var(--radial-radius); border-radius: 50%; display: flex; justify-content: center; align-items: center;}.radial-indicator .radial-inner { display: flex; justify-content: center; align-items: center; width: calc(var(--radial-radius) - var(--radial-border-width)); height: calc(var(--radial-radius) - var(--radial-border-width)); left: calc(var(--radial-border-width) / 2); top: calc(var(--radial-border-width) / 2); position: absolute; background-color: #333; border-radius: 50%;}