| @@ -0,0 +1,133 @@ | |||
| html, body { | |||
| min-height: 100%; | |||
| height: 100%; | |||
| color: #eee; | |||
| background-color: #333; | |||
| } | |||
| #info-area { | |||
| position: relative; | |||
| display: flex; | |||
| height: 60%; | |||
| } | |||
| #log { | |||
| background: #000000; | |||
| flex: 4; | |||
| padding: 25px; | |||
| font-size: 24px; | |||
| max-width: 50%; | |||
| } | |||
| .sidebar { | |||
| background: #111111; | |||
| padding: 25px; | |||
| flex: 1; | |||
| display: flex; | |||
| flex-direction: column; | |||
| font-size: 24px; | |||
| } | |||
| #menu { | |||
| margin: 10px; | |||
| background: #222; | |||
| flex: 2; | |||
| } | |||
| #self-info { | |||
| margin: 10px; | |||
| background: #222; | |||
| flex: 5; | |||
| } | |||
| #control-area { | |||
| display: flex; | |||
| min-height: 40%; | |||
| } | |||
| #actions { | |||
| padding: 25px; | |||
| font-size: 24px; | |||
| background: #111; | |||
| flex: 1; | |||
| } | |||
| #desc { | |||
| padding: 25px; | |||
| font-size: 18px; | |||
| background: #222; | |||
| flex: 1; | |||
| } | |||
| #moves { | |||
| padding: 25px; | |||
| position: relative; | |||
| background: #111; | |||
| flex: 1; | |||
| } | |||
| #move-holder { | |||
| position: absolute; | |||
| left: 50%; | |||
| top: 15%; | |||
| } | |||
| .move-button { | |||
| width: 50px; | |||
| height: 50px; | |||
| background-color: #888; | |||
| color: #eee; | |||
| } | |||
| .disabled { | |||
| background-color: gray; | |||
| background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px); | |||
| } | |||
| #move-up-left { | |||
| position: absolute; | |||
| left: -70px; | |||
| top: 30px; | |||
| } | |||
| #move-up { | |||
| position: absolute; | |||
| left: 0px; | |||
| top: 0px; | |||
| } | |||
| #move-up-right { | |||
| position: absolute; | |||
| left: 70px; | |||
| top: 30px; | |||
| } | |||
| #move-left { | |||
| position: absolute; | |||
| left: -100px; | |||
| top: 100px; | |||
| } | |||
| #move-right { | |||
| position: absolute; | |||
| left: 100px; | |||
| top: 100px; | |||
| } | |||
| #move-down-left { | |||
| position: absolute; | |||
| left: -70px; | |||
| top: 170px; | |||
| } | |||
| #move-down { | |||
| position: absolute; | |||
| left: 0px; | |||
| top: 200px; | |||
| } | |||
| #move-down-right { | |||
| position: absolute; | |||
| left: 70px; | |||
| top: 170px; | |||
| } | |||