218 lines
3.3 KiB
CSS
218 lines
3.3 KiB
CSS
body {
|
|
background: #223;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
*:focus {
|
|
outline: none;
|
|
}
|
|
|
|
h1 {
|
|
margin-top: 5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "iosevka";
|
|
src: url('/assets/iosevka-regular.ttf') format('woff2');
|
|
}
|
|
|
|
/* GameScreen Styles */
|
|
.game {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.levelname {
|
|
margin-top: 1rem;
|
|
margin-bottom: 0.4rem;
|
|
margin-left: 2rem;
|
|
color: #666;
|
|
user-select: none;
|
|
}
|
|
|
|
.titlebar {
|
|
background: #122;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.editor {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 100vh;
|
|
font-family: iosevka;
|
|
color: #fff;
|
|
border-left: solid #112 0.4rem;
|
|
}
|
|
|
|
.controlbuttons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-right: 2rem;
|
|
margin-top: 0.4rem;
|
|
height: 2.4rem;
|
|
}
|
|
|
|
.controlbutton {
|
|
padding: 0.5rem;
|
|
display: block;
|
|
border: solid #112 0.05rem;
|
|
border-radius: 0.3rem;
|
|
background: #221;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.controlbutton:hover {
|
|
background: #332;
|
|
}
|
|
|
|
/* Operation Blocks (Drag & Drop) */
|
|
.op {
|
|
list-style-type: none;
|
|
background: #444;
|
|
border: 0.1rem solid black;
|
|
border-radius: 0.2rem;
|
|
width: 3.8rem;
|
|
height: 3.8rem;
|
|
user-select: none;
|
|
cursor: grab;
|
|
}
|
|
|
|
.op img {
|
|
width: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.opspalette {
|
|
background: #122;
|
|
display: flex;
|
|
flex-flow: row;
|
|
padding-top: 1.6rem;
|
|
padding-bottom: 1rem;
|
|
width: 100%;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.opindicators {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
position: absolute;
|
|
z-index: -2;
|
|
width: 16rem;
|
|
}
|
|
|
|
.opindicator {
|
|
width: 4rem;
|
|
height: 4rem;
|
|
background: #555;
|
|
}
|
|
|
|
.opdropzones {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
width: 16rem;
|
|
}
|
|
|
|
.opdropzone {
|
|
width: 4rem;
|
|
height: 4rem;
|
|
background: #1119;
|
|
}
|
|
|
|
.frontdropper {
|
|
width: 1rem;
|
|
height: 4rem;
|
|
}
|
|
|
|
.levelSelectCaption {
|
|
font-family: iosevka;
|
|
color: #9bf;
|
|
text-align: left;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.levelItems {
|
|
max-width: 25rem;
|
|
width: 100%;
|
|
margin: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.levelItem {
|
|
width: 100%;
|
|
max-width: 25rem;
|
|
height: 96px;
|
|
user-select: none;
|
|
border: 0.1rem solid #112;
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
font-family: iosevka;
|
|
}
|
|
|
|
.levelItems a {
|
|
margin-top: 1rem;
|
|
display: block;
|
|
background: #555;
|
|
border-radius: 0.5rem;
|
|
color: #3da;
|
|
font-family: iosevka;
|
|
font-size: 2em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.levelItems a:hover {
|
|
color: #3c0;
|
|
background: #363;
|
|
}
|
|
|
|
.levelItem p {
|
|
margin: auto;
|
|
}
|
|
|
|
.startContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 850px;
|
|
height: 600px;
|
|
margin: auto;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.startContainer a {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.gameName {
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.startButton {
|
|
display: block;
|
|
background: #555;
|
|
border-radius: 0.5rem;
|
|
color: #3da;
|
|
font-family: iosevka;
|
|
font-size: 2em;
|
|
text-decoration: none;
|
|
padding: 0.5rem 1rem;
|
|
margin-top: 2rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.startButton:hover {
|
|
color: #3c0;
|
|
background: #363;
|
|
} |