531 lines
9.9 KiB
CSS
531 lines
9.9 KiB
CSS
html {
|
|
font-size: 16px;
|
|
height: 100%;
|
|
}
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
font-family: Ubuntu, Source Sans Pro, DejaVu Sans, sans-serif;
|
|
line-height: 1.25;
|
|
background: #101214;
|
|
color: white;
|
|
}
|
|
|
|
/* Generic element styling */
|
|
main[hidden] {
|
|
display: none !important;
|
|
}
|
|
input[type=radio],
|
|
input[type=checkbox] {
|
|
margin: 0.125em;
|
|
vertical-align: middle;
|
|
}
|
|
button {
|
|
font-size: inherit;
|
|
padding: 0.25em 0.5em;
|
|
border: 1px solid black;
|
|
font-family: inherit;
|
|
background: #909090;
|
|
border-image: url(button.png) 33.333% fill / auto repeat;
|
|
text-transform: lowercase;
|
|
}
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-weight: normal;
|
|
margin: 0;
|
|
}
|
|
ul, ol {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
p {
|
|
margin: 0.5em 0;
|
|
}
|
|
p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Overlay styling */
|
|
.overlay {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: #fff4;
|
|
}
|
|
.dialog {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
min-width: 33%;
|
|
max-width: 80%;
|
|
max-height: 80%;
|
|
border: 1px solid black;
|
|
color: black;
|
|
background: #f4f4f4;
|
|
box-shadow: 0 1px 3px #000c;
|
|
}
|
|
.dialog > header {
|
|
padding: 0.5em;
|
|
line-height: 1;
|
|
background: hsl(225, 20%, 40%);
|
|
color: white;
|
|
}
|
|
.dialog > header h1 {
|
|
font-size: 1em;
|
|
}
|
|
.dialog > footer {
|
|
display: flex;
|
|
justify-content: end;
|
|
gap: 0.5em;
|
|
|
|
padding: 0.5em;
|
|
background: #d0d0d0;
|
|
}
|
|
.dialog > header:empty,
|
|
.dialog > footer:empty {
|
|
display: none;
|
|
}
|
|
.dialog > section {
|
|
overflow: auto;
|
|
padding: 1em;
|
|
}
|
|
|
|
/* Individual overlays */
|
|
table.level-browser {
|
|
width: 100%;
|
|
/* for some reason the table ignores the bottom padding when it overflows */
|
|
margin-bottom: 1em;
|
|
line-height: 1.25;
|
|
border-spacing: 0;
|
|
cursor: pointer;
|
|
}
|
|
table.level-browser td {
|
|
padding: 0 0.25em;
|
|
}
|
|
table.level-browser tr:hover {
|
|
background: hsl(225, 60%, 90%);
|
|
}
|
|
|
|
/* Options dialog */
|
|
.dialog-options {
|
|
height: 60%;
|
|
width: 75%;
|
|
}
|
|
.dialog-options > section {
|
|
flex: 1;
|
|
}
|
|
nav.tabstrip {
|
|
display: flex;
|
|
border-bottom: 1px solid #d0d0d0;
|
|
}
|
|
nav.tabstrip > a {
|
|
margin: 0 0.5em;
|
|
padding: 0.5em 1em;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
border-top-left-radius: 0.5em;
|
|
border-top-right-radius: 0.5em;
|
|
}
|
|
nav.tabstrip > a:hover {
|
|
background: #e8e8e8;
|
|
}
|
|
nav.tabstrip > a.--selected {
|
|
background: #d0d0d0;
|
|
}
|
|
.dialog section.tabblock {
|
|
display: none;
|
|
overflow: auto;
|
|
margin: 0.25em 0.5em;
|
|
}
|
|
.dialog section.tabblock.--selected {
|
|
display: initial;
|
|
}
|
|
label.option {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.25em;
|
|
}
|
|
label.option:hover {
|
|
outline: 2px solid #d0d0d0;
|
|
outline-radius: 2px;
|
|
}
|
|
label.option .option-label {
|
|
flex: 1;
|
|
}
|
|
.option-help {
|
|
display: none;
|
|
background: #e8e8e8;
|
|
padding: 0.5em 0.75em;
|
|
border-radius: 0.5em;
|
|
}
|
|
.option-help.--visible {
|
|
/* TODO */
|
|
}
|
|
|
|
/* Bits and pieces */
|
|
img.compat-icon {
|
|
margin: 0 0.25em 0.125em;
|
|
vertical-align: middle;
|
|
}
|
|
.compat-lynx,
|
|
.compat-ms {
|
|
font-size: 0.75em;
|
|
display: inline-block;
|
|
margin: 0 0.25em;
|
|
padding: 0.25em;
|
|
line-height: 1;
|
|
vertical-align: middle;
|
|
color: white;
|
|
background: gray;
|
|
border-radius: 0.25em;
|
|
}
|
|
|
|
|
|
/**************************************************************************************************/
|
|
/* Main page structure */
|
|
|
|
body > header {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #00080c;
|
|
}
|
|
body > header h1,
|
|
body > header h2,
|
|
body > header h3 {
|
|
margin: 0.25rem 0.5rem;
|
|
line-height: 1.125;
|
|
}
|
|
body > header h1 {
|
|
font-size: 1.66rem;
|
|
}
|
|
body > header h2 {
|
|
font-size: 1.33rem;
|
|
}
|
|
body > header h3 {
|
|
font-size: 1.25rem;
|
|
}
|
|
body > header > nav {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: end;
|
|
gap: 0.5em;
|
|
margin: 0.25rem 0.5rem;
|
|
}
|
|
body > header button {
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
body[data-mode=splash] #header-pack,
|
|
body[data-mode=splash] #header-level {
|
|
display: none;
|
|
}
|
|
body[data-mode=editor] #player-edit,
|
|
body[data-mode=player] #editor-play {
|
|
display: none;
|
|
}
|
|
|
|
#header-main {
|
|
border-bottom: 1px solid #404040;
|
|
box-shadow: 0 0 3px #0009;
|
|
}
|
|
|
|
/**************************************************************************************************/
|
|
/* Splash (intro part) */
|
|
|
|
#splash {
|
|
margin: auto;
|
|
overflow: auto;
|
|
}
|
|
|
|
#splash h2 {
|
|
border-bottom: 1px solid #404040;
|
|
color: #909090;
|
|
text-shadow: 0 1px #0004;
|
|
}
|
|
#splash * + h2 {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
#level-pack-list {
|
|
margin: 1em 0;
|
|
}
|
|
#level-pack-list > li {
|
|
margin: 1em 0;
|
|
padding: 0.5em 1em;
|
|
background: #ececec;
|
|
color: black;
|
|
border: 2px solid black;
|
|
border-radius: 0.5em;
|
|
box-shadow: inset 0 0 2px 2px #0006, 0 2px 0.25em #0006;
|
|
cursor: pointer;
|
|
}
|
|
#level-pack-list > li:hover {
|
|
background: hsl(45, 60%, 90%);
|
|
border-color: hsl(45, 80%, 50%);
|
|
}
|
|
#level-pack-list > li p {
|
|
font-size: 0.833em;
|
|
font-style: italic;
|
|
color: #606060;
|
|
}
|
|
|
|
/**************************************************************************************************/
|
|
/* Player */
|
|
|
|
#player {
|
|
flex: 0;
|
|
margin: auto; /* center in both directions baby */
|
|
isolation: isolate;
|
|
display: grid;
|
|
align-items: center;
|
|
grid:
|
|
"level chips" min-content
|
|
"level time" min-content
|
|
"level bonus" min-content
|
|
"level message" 1fr
|
|
"level inventory" min-content
|
|
"controls controls"
|
|
/* Need explicit min-content to force the hint to wrap */
|
|
/ min-content min-content
|
|
;
|
|
column-gap: 1em;
|
|
row-gap: 0.5em;
|
|
|
|
image-rendering: optimizeSpeed;
|
|
|
|
--tile-width: 32px;
|
|
--tile-height: 32px;
|
|
--scale: 1;
|
|
}
|
|
|
|
.level {
|
|
grid-area: level;
|
|
|
|
position: relative;
|
|
border: 0.125em solid black;
|
|
}
|
|
.level canvas {
|
|
display: block;
|
|
width: calc(var(--viewport-width) * var(--tile-width) * var(--scale));
|
|
--viewport-width: 9;
|
|
--viewport-height: 9;
|
|
}
|
|
.bummer {
|
|
grid-area: level;
|
|
place-self: stretch;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
z-index: 1;
|
|
font-size: 48px;
|
|
padding: 10%;
|
|
background: #0009;
|
|
color: white;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
text-shadow: 0 2px 1px black;
|
|
}
|
|
.bummer:empty {
|
|
display: none;
|
|
}
|
|
.bummer p {
|
|
margin: 0;
|
|
}
|
|
dl.score-chart {
|
|
display: grid;
|
|
grid-auto-columns: 1fr 1fr;
|
|
font-size: 1.25rem;
|
|
font-weight: normal;
|
|
}
|
|
dl.score-chart dt {
|
|
grid-column: 1;
|
|
text-align: left;
|
|
}
|
|
dl.score-chart dd {
|
|
grid-column: 2;
|
|
margin: 0;
|
|
text-align: right;
|
|
}
|
|
dl.score-chart .-sum {
|
|
margin-bottom: 0.5em;
|
|
border-top: 1px solid white;
|
|
color: hsl(40, 75%, 80%);
|
|
}
|
|
|
|
.meta {
|
|
grid-area: meta;
|
|
|
|
color: yellow;
|
|
background: black;
|
|
text-align: center;
|
|
}
|
|
.chips {
|
|
grid-area: chips;
|
|
}
|
|
.time {
|
|
grid-area: time;
|
|
}
|
|
.bonus {
|
|
grid-area: bonus;
|
|
}
|
|
.chips,
|
|
.time,
|
|
.bonus {
|
|
font-size: calc(var(--tile-height) * var(--scale) / 3);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.chips h3,
|
|
.time h3,
|
|
.bonus h3 {
|
|
flex: 1;
|
|
font-size: 1.25em;
|
|
line-height: 1;
|
|
}
|
|
.chips output,
|
|
.time output,
|
|
.bonus output {
|
|
flex: 1;
|
|
font-size: 2em;
|
|
padding: 0.125em;
|
|
min-width: 2em;
|
|
min-height: 1em;
|
|
line-height: 1;
|
|
text-align: right;
|
|
font-family: monospace;
|
|
color: hsl(45, 100%, 60%);
|
|
background: #080808;
|
|
border: 1px inset #202020;
|
|
}
|
|
|
|
.message {
|
|
grid-area: message;
|
|
align-self: stretch;
|
|
|
|
font-size: calc(var(--tile-height) * var(--scale) / 3);
|
|
padding: 0.25em 0.5em;
|
|
font-family: serif;
|
|
font-style: italic;
|
|
color: hsl(45, 100%, 60%);
|
|
background: #080808;
|
|
border: 1px inset #202020;
|
|
|
|
/* FIXME find a way to enforce that the message never makes the grid get bigger */
|
|
overflow: auto;
|
|
}
|
|
.message:empty {
|
|
display: none;
|
|
}
|
|
|
|
.inventory {
|
|
grid-area: inventory;
|
|
justify-self: center;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: start;
|
|
|
|
background-size: calc(var(--tile-width) * var(--scale)) calc(var(--tile-height) * var(--scale));
|
|
width: calc(4 * var(--tile-width) * var(--scale));
|
|
min-height: calc(2 * var(--tile-height) * var(--scale));
|
|
}
|
|
.inventory img {
|
|
width: calc(var(--tile-width) * var(--scale));
|
|
}
|
|
.controls {
|
|
grid-area: controls;
|
|
display: flex;
|
|
}
|
|
.play-controls,
|
|
.demo-controls {
|
|
display: flex;
|
|
gap: 0.25em;
|
|
}
|
|
.play-controls {
|
|
align-self: start;
|
|
}
|
|
.demo-controls {
|
|
display: none;
|
|
flex: 1;
|
|
justify-content: end;
|
|
}
|
|
main.--has-demo .demo-controls {
|
|
display: flex;
|
|
}
|
|
|
|
/* Debug stuff */
|
|
.input {
|
|
display: grid;
|
|
display: none;
|
|
grid:
|
|
"drop up cycle" 1.5em
|
|
"left swap right" 1.5em
|
|
". down . " 1.5em
|
|
/ 1.5em 1.5em 1.5em
|
|
;
|
|
gap: 0.5em;
|
|
}
|
|
.input-action {
|
|
padding: 0.25em;
|
|
line-height: 1;
|
|
color: #fff4;
|
|
background: #202020;
|
|
}
|
|
.input-action[data-action=up] { grid-area: up; }
|
|
.input-action[data-action=down] { grid-area: down; }
|
|
.input-action[data-action=left] { grid-area: left; }
|
|
.input-action[data-action=right] { grid-area: right; }
|
|
.input-action[data-action=swap] { grid-area: swap; }
|
|
.input-action[data-action=cycle] { grid-area: cycle; }
|
|
.input-action[data-action=drop] { grid-area: drop; }
|
|
.input-action.--pressed {
|
|
color: white;
|
|
background: hsl(225, 75%, 25%);
|
|
}
|
|
|
|
|
|
/**************************************************************************************************/
|
|
/* Editor */
|
|
|
|
#editor {
|
|
flex: 1 1 auto;
|
|
display: grid;
|
|
grid:
|
|
"level palette"
|
|
;
|
|
|
|
min-height: 0;
|
|
margin: auto;
|
|
padding: 1em;
|
|
}
|
|
|
|
#editor .level {
|
|
grid-area: level;
|
|
overflow: auto;
|
|
}
|
|
|
|
#editor .palette {
|
|
grid-area: palette;
|
|
}
|
|
.palette-entry {
|
|
margin: 0.25em;
|
|
}
|
|
.palette-entry.--selected {
|
|
outline: 2px solid gold;
|
|
}
|