Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
1.8 kB · 88 lines
CSS
at develop
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889[anchor] { bottom: anchor(bottom); position: absolute; left: anchor(left); position-try-options: flip-block, flip-inline, flip-block flip-inline;}
.training { position: fixed; inset: 0; anchor-name: --parent; pointer-events: none; &:has(.training-infobox .training-ghost-button:hover) { .training-overlay { backdrop-filter: brightness(1); } .training-highlight { backdrop-filter: brightness(1); } .training-infobox .panel { opacity: 0; } }}.training-overlay { position: fixed; inset: 0; transition: backdrop-filter 0.3s ease; backdrop-filter: brightness(0.5); pointer-events: none;}
.training-highlight { position: fixed; width: 1px; height: 1px; transition: backdrop-filter 0.3s ease; backdrop-filter: brightness(3); pointer-events: none; transition-property: transform, top, bottom, left, right; transition-duration: 0.3s; transition-timing-function: ease; transform-origin: top left; padding: 1rem; border-radius: 10px; will-change: height, width, transform; position-anchor: --training-highlight; position-area: center;}.highlight-target { anchor-name: --highlight;}.training-infobox { position: fixed; position-anchor: --parent; position-area: center; position-try-fallbacks: flip-inline; white-space: pre-line; min-width: fit-content; .panel { transition: opacity 0.3s ease; margin: 0 0.5rem; background: white; color: black; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); border-radius: 0.5rem; padding: 0.5rem 1rem; }}.training-highlight ~ .training-infobox { position-area: right; position-anchor: --highlight;}.training-ghost-button { pointer-events: all;}.training-infobox ul { list-style-type: disc; margin-left: 2rem; margin-block: 0.5rem; white-space: normal;}.training-infobox li { margin-block: 0.5rem;}