Spaces:
Sleeping
Sleeping
fix(ui): restore minimap base styles
Browse files- Add missing base styles for #minimap-container
- Ensure minimap is visible with proper positioning
- Add hover effects and proper z-index
- Set default dimensions and styling
- static/styles.css +99 -0
static/styles.css
CHANGED
|
@@ -1192,6 +1192,105 @@ body {
|
|
| 1192 |
50% { opacity: 0.8; }
|
| 1193 |
}
|
| 1194 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1195 |
/* Responsive Design - Optimized for Desktop Gaming */
|
| 1196 |
|
| 1197 |
/* Large Desktop (>1600px) - Optimal gaming experience */
|
|
|
|
| 1192 |
50% { opacity: 0.8; }
|
| 1193 |
}
|
| 1194 |
|
| 1195 |
+
/* Modern Minimap - Base Styles */
|
| 1196 |
+
#minimap-container {
|
| 1197 |
+
position: absolute;
|
| 1198 |
+
bottom: var(--space-lg);
|
| 1199 |
+
right: var(--space-lg);
|
| 1200 |
+
width: 240px;
|
| 1201 |
+
height: 180px;
|
| 1202 |
+
background: rgba(15, 23, 42, 0.9);
|
| 1203 |
+
border: 1px solid var(--primary);
|
| 1204 |
+
border-radius: var(--radius-lg);
|
| 1205 |
+
overflow: hidden;
|
| 1206 |
+
box-shadow: var(--shadow-xl);
|
| 1207 |
+
backdrop-filter: blur(10px);
|
| 1208 |
+
transition: all var(--transition-fast);
|
| 1209 |
+
z-index: var(--z-fixed);
|
| 1210 |
+
}
|
| 1211 |
+
|
| 1212 |
+
#minimap-container:hover {
|
| 1213 |
+
transform: scale(1.05);
|
| 1214 |
+
box-shadow: var(--shadow-glow);
|
| 1215 |
+
}
|
| 1216 |
+
|
| 1217 |
+
#minimap {
|
| 1218 |
+
width: 100%;
|
| 1219 |
+
height: 100%;
|
| 1220 |
+
display: block;
|
| 1221 |
+
cursor: pointer;
|
| 1222 |
+
}
|
| 1223 |
+
|
| 1224 |
+
#minimap-viewport {
|
| 1225 |
+
position: absolute;
|
| 1226 |
+
border: 2px solid rgba(255, 255, 255, 0.8);
|
| 1227 |
+
background: rgba(255, 255, 255, 0.1);
|
| 1228 |
+
pointer-events: none;
|
| 1229 |
+
border-radius: var(--radius-sm);
|
| 1230 |
+
}
|
| 1231 |
+
|
| 1232 |
+
/* Modern Camera Controls */
|
| 1233 |
+
#camera-controls {
|
| 1234 |
+
position: absolute;
|
| 1235 |
+
top: var(--space-md);
|
| 1236 |
+
right: var(--space-md);
|
| 1237 |
+
display: flex;
|
| 1238 |
+
gap: var(--space-sm);
|
| 1239 |
+
z-index: var(--z-fixed);
|
| 1240 |
+
}
|
| 1241 |
+
|
| 1242 |
+
.camera-btn {
|
| 1243 |
+
background: var(--bg-tertiary);
|
| 1244 |
+
border: 1px solid var(--border-light);
|
| 1245 |
+
padding: var(--space-sm);
|
| 1246 |
+
border-radius: var(--radius-lg);
|
| 1247 |
+
cursor: pointer;
|
| 1248 |
+
transition: all var(--transition-fast);
|
| 1249 |
+
color: var(--text-primary);
|
| 1250 |
+
font-size: 1rem;
|
| 1251 |
+
display: flex;
|
| 1252 |
+
align-items: center;
|
| 1253 |
+
justify-content: center;
|
| 1254 |
+
min-width: 44px;
|
| 1255 |
+
min-height: 44px;
|
| 1256 |
+
position: relative;
|
| 1257 |
+
overflow: hidden;
|
| 1258 |
+
}
|
| 1259 |
+
|
| 1260 |
+
.camera-btn::before {
|
| 1261 |
+
content: '';
|
| 1262 |
+
position: absolute;
|
| 1263 |
+
top: 50%;
|
| 1264 |
+
left: 50%;
|
| 1265 |
+
width: 0;
|
| 1266 |
+
height: 0;
|
| 1267 |
+
background: rgba(59, 130, 246, 0.2);
|
| 1268 |
+
border-radius: 50%;
|
| 1269 |
+
transform: translate(-50%, -50%);
|
| 1270 |
+
transition: width var(--transition-normal), height var(--transition-normal);
|
| 1271 |
+
}
|
| 1272 |
+
|
| 1273 |
+
.camera-btn:hover {
|
| 1274 |
+
background: var(--bg-hover);
|
| 1275 |
+
border-color: var(--primary);
|
| 1276 |
+
transform: scale(1.05);
|
| 1277 |
+
box-shadow: var(--shadow-md);
|
| 1278 |
+
}
|
| 1279 |
+
|
| 1280 |
+
.camera-btn:hover::before {
|
| 1281 |
+
width: 100%;
|
| 1282 |
+
height: 100%;
|
| 1283 |
+
}
|
| 1284 |
+
|
| 1285 |
+
.camera-btn:active {
|
| 1286 |
+
transform: scale(0.95);
|
| 1287 |
+
}
|
| 1288 |
+
|
| 1289 |
+
.camera-icon {
|
| 1290 |
+
font-size: 1.25rem;
|
| 1291 |
+
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
|
| 1292 |
+
}
|
| 1293 |
+
|
| 1294 |
/* Responsive Design - Optimized for Desktop Gaming */
|
| 1295 |
|
| 1296 |
/* Large Desktop (>1600px) - Optimal gaming experience */
|