117 lines
2.2 KiB
CSS
117 lines
2.2 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
border-radius: 15px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(4px);
|
|
min-width: fit-content;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.map {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: 15px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 10px;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
}
|
|
|
|
.lign {
|
|
display: flex;
|
|
margin: 2px 2px;
|
|
}
|
|
|
|
.cell {
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 5px;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 2px 2px;
|
|
}
|
|
|
|
.empty {
|
|
background-color: rgba(200, 200, 200, 0.3);
|
|
}
|
|
|
|
.empty:hover {
|
|
background-color: rgba(200, 200, 200, 0.5);
|
|
}
|
|
|
|
.laser {
|
|
background-color: #FFD700;
|
|
border-color: #FFA500;
|
|
}
|
|
|
|
.colored-laser {
|
|
background: linear-gradient(45deg, #FF1493, #00CED1);
|
|
box-shadow: inset 0 0 10px rgba(255, 20, 147, 0.6);
|
|
border-color: #FF1493;
|
|
}
|
|
|
|
.mirror {
|
|
background: linear-gradient(45deg, #C0C0C0 25%, transparent 25%, transparent 75%, #C0C0C0 75%) / 10px 10px;
|
|
background-color: #E8E8E8;
|
|
border-color: #A9A9A9;
|
|
}
|
|
|
|
.door {
|
|
background-color: #8B4513;
|
|
border-color: #654321;
|
|
position: relative;
|
|
}
|
|
|
|
.door::after {
|
|
content: '🚪';
|
|
font-size: 24px;
|
|
}
|
|
|
|
.button {
|
|
background-color: #FF6347;
|
|
border-color: #DC143C;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.wall {
|
|
background-color: #2F4F4F;
|
|
border-color: #000000;
|
|
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.demi-wall {
|
|
background: linear-gradient(to right, #2F4F4F 50%, rgba(200, 200, 200, 0.3) 50%);
|
|
border-color: #444444;
|
|
}
|
|
|
|
.target {
|
|
background: radial-gradient(circle, #00FF00 30%, rgba(0, 255, 0, 0.3) 70%);
|
|
border-color: #00CC00;
|
|
} |