120 lines
2.1 KiB
CSS
120 lines
2.1 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
background: #1a1a1a;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Arial', sans-serif;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
min-width: fit-content;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.map {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0px;
|
|
padding: 10px;
|
|
background: #222222;
|
|
border-radius: 5px;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
}
|
|
|
|
.lign {
|
|
display: flex;
|
|
gap: 0px;
|
|
margin: 0;
|
|
}
|
|
|
|
.cell {
|
|
border: 1px solid #333333;
|
|
min-width: 60px;
|
|
width: auto;
|
|
min-height: 60px;
|
|
height: auto;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
position: relative;
|
|
background-color: #2a2a2a;
|
|
}
|
|
|
|
.empty {
|
|
background-color: #2a2a2a;
|
|
border-color: #333333;
|
|
}
|
|
|
|
.empty:hover {
|
|
background-color: #333333;
|
|
}
|
|
|
|
.laser {
|
|
background-color: #FFD700;
|
|
border-color: #FFA500;
|
|
}
|
|
|
|
.colored-laser {
|
|
background: linear-gradient(135deg, #FF1493 0%, #00CED1 100%);
|
|
border-color: #FF1493;
|
|
}
|
|
|
|
.mirror {
|
|
background-color: #1a1a1a;
|
|
border-color: #444444;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.door {
|
|
background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
|
|
border-color: #654321;
|
|
}
|
|
|
|
.button {
|
|
background: radial-gradient(circle at 35% 35%, #FF4444 0%, #CC0000 100%);
|
|
border-color: #990000;
|
|
}
|
|
|
|
.wall {
|
|
background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
|
|
border-color: #000000;
|
|
}
|
|
|
|
.demi-wall {
|
|
background: linear-gradient(90deg, #0f0f0f 0%, #0f0f0f 50%, #2a2a2a 50%, #2a2a2a 100%);
|
|
border-color: #333333;
|
|
}
|
|
|
|
.target {
|
|
background: radial-gradient(circle at 35% 35%, #00FF00 0%, #00CC00 50%, rgba(0, 255, 0, 0.2) 100%);
|
|
border-color: #00FF00;
|
|
}
|
|
|
|
.light-laser {
|
|
height: 2px;
|
|
width: 35px;
|
|
background-color: red;
|
|
background-size: 2px 35px;
|
|
} |