Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/excaliburjs/excalibur-playground. Excalibur Playground Source Code excaliburjs.com/excalibur-playground
Something went wrong. Try again.
excalibur-playground styles.css
3.1 kB · 213 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214:root { --background: #1e1e1e; --button-color: #fffffe; --button-hover-color: #fffffe; --button-hover-border: #176baa; --button-hover-background: #176baa;}
@media (prefers-color-scheme: light) { :root { --background: #fffffe; --button-color: #176baa; --button-hover-color: #fffffe; --button-hover-border: #176baa; --button-hover-background: #176baa; }}
html, body { margin: 0; padding: 0; height: 100%; background-color: var(--background); font: 16px sans-serif;}
header { padding: 5px;}
h1 { font-size: .5em; display: flex; justify-content: center;}
h1 img { height: 100px;}
button, label { cursor: pointer; font-size: 1em; color: var(--button-color); background-color: transparent; padding: 10px; border: solid var(--button-color) 2px; border-radius: 5px;}
button:hover { color: var(--button-hover-color); background-color: var(--button-hover-background); padding: 10px; border: solid var(--button-hover-border) 2px; border-radius: 5px;}
button:focus-visible { border-color: black; outline: white solid 4px;}
@keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}
.loading { display: none; color: white; position: absolute;}
.loading img { animation: 4s linear 0s infinite rotation;}
.sr-only { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}
#container { flex: 1 1 auto; max-width: 800px; width: 100%; resize: vertical; overflow: auto; min-height: 400px;}
#preview { min-width: 400px; width: 100%; display: flex; flex-direction: column;}
#preview > #canvas-container { position: relative; min-height: 400px; background-color: var(--background); display: flex; justify-content: center; align-items: center;}
.toolbar { padding: 20px; display: flex; flex-direction: column; gap: 24px; flex-wrap: wrap;}
.controls { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 8px;}
.templates { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 8px;}
.templates h2 { color: var(--button-color); font-size: 1.2rem; line-height: 1.1; margin: 0;}
.templates a { text-decoration: none; color: var(--button-color); display: flex; gap: 12px; border: solid var(--button-color) 2px; padding: 8px; border-radius: 5px; min-width: 260px;}
.icon { transition: transform 250ms ease-out;}
.templates a:hover { color: var(--button-hover-color); background-color: var(--button-hover-background); border: solid var(--button-hover-border) 2px;}
.templates a:hover .icon { transform: scale(1.5) rotate(10deg);}
main { height: 100%; display: flex;}
body.embedded main { flex-direction: column-reverse; align-items: center;}
body.embedded .templates { display: none;}
body.embedded header { display: none;}
body.embedded #preview { display: flex; flex-direction: column; max-width: 800px; width: 100%;}
@media screen and (max-width: 800px) {
h1 img { height: 50px; } main { height: auto; flex-wrap: wrap-reverse; }
#preview { min-width: auto; }}