132 lines
2.6 KiB
CSS
132 lines
2.6 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--page-padding: clamp(12px, 3vw, 32px);
|
|
--map-padding: clamp(12px, 2.5vw, 20px);
|
|
--map-radius: clamp(20px, 4vw, 50px);
|
|
--cell-size: clamp(20px, 5vw, 60px);
|
|
--laser-width: clamp(14px, 3vw, 35px);
|
|
--laser-height: clamp(3px, 0.7vw, 7px);
|
|
}
|
|
|
|
html, body {
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
background: #f7f7f7;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Arial', sans-serif;
|
|
padding: var(--page-padding);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
#map {
|
|
background-color: #DADEEF;
|
|
padding: var(--map-padding);
|
|
margin: 0;
|
|
border-radius: var(--map-radius);
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.lign {
|
|
display: flex;
|
|
gap: 0px;
|
|
margin: 0;
|
|
}
|
|
|
|
.cell {
|
|
width: var(--cell-size);
|
|
min-width: var(--cell-size);
|
|
height: var(--cell-size);
|
|
min-height: var(--cell-size);
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
position: relative;
|
|
background-color: #2a2a2a;
|
|
}
|
|
|
|
.empty {
|
|
background-color: #DADEEF;
|
|
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 {
|
|
margin-top: calc(var(--cell-size) * 0.23);
|
|
height: var(--laser-height);
|
|
width: var(--laser-width);
|
|
background-color: red;
|
|
display: flex;
|
|
}
|
|
|
|
.btn-mirror {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
background: linear-gradient(135deg, transparent 46%, #f0f0f0 46%, #f0f0f0 54%, transparent 54%);
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
body {
|
|
align-items: flex-start;
|
|
}
|
|
}
|