138 lines
2.5 KiB
CSS
138 lines
2.5 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
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;
|
|
width: 30px;
|
|
height: 30px;
|
|
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;
|
|
}
|
|
|
|
.mirror::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 60%;
|
|
background: linear-gradient(45deg, transparent 48%, #CCCCCC 48%, #CCCCCC 52%, transparent 52%);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.door {
|
|
background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
|
|
border-color: #654321;
|
|
}
|
|
|
|
.door::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 60%;
|
|
height: 60%;
|
|
border: 2px solid #FFD700;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.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 {
|
|
margin-top: 14px;
|
|
height: 7px;
|
|
width: 35px;
|
|
background-color: red;
|
|
display: flex;
|
|
} |