84 lines
1.2 KiB
CSS
84 lines
1.2 KiB
CSS
div.container{
|
|
background-color: indigo;
|
|
width: fit-content;
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: sans-serif;
|
|
gap: 1rem;
|
|
}
|
|
|
|
div.controls{
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 1rem;
|
|
}
|
|
|
|
div.controls button{
|
|
flex: 1;
|
|
padding: 1rem;
|
|
font-size: large;
|
|
}
|
|
|
|
div.info{
|
|
color: white;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-evenly;
|
|
font-size: x-large;
|
|
}
|
|
|
|
div.info output{
|
|
color: gold;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
table.dungeon{
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
table.dungeon td{
|
|
background-color: lightgray;
|
|
height: 4rem;
|
|
width: 4rem;
|
|
font-size: 200%;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
table.dungeon td.wall{
|
|
background-color: gray;
|
|
}
|
|
|
|
table.dungeon td.water{
|
|
background-color: royalblue;
|
|
}
|
|
|
|
table.dungeon td.floor{
|
|
background-color: white;
|
|
}
|
|
|
|
table.dungeon td.enemy1::before{
|
|
content: "\1F430";
|
|
}
|
|
|
|
table.dungeon td.enemy2::before{
|
|
content: "\1F433";
|
|
}
|
|
|
|
table.dungeon td.object1::before{
|
|
content: "\1F3A9";
|
|
}
|
|
|
|
table.dungeon td.object2::before{
|
|
content: "\1F3B9";
|
|
}
|
|
|
|
table.dungeon td.hero::before{
|
|
content: "\1F9CD";
|
|
}
|
|
|
|
table.dungeon td:hover{
|
|
background-color: cornsilk;
|
|
} |