Skip to content

Commit 2f1e16b

Browse files
Azure9733Azure9733
authored
Update styles.css
Signed-off-by: Azure <[email protected]>
1 parent 377cb4c commit 2f1e16b

File tree

1 file changed

+111
-54
lines changed

1 file changed

+111
-54
lines changed

‎styles.css‎

Lines changed: 111 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
--white: #ffffff;
55
--transition-speed: 0.3s;
66
--light-gray: #f0f0f0;
7+
--nav-height: 60px;
78
}
89

910
* {
@@ -13,67 +14,131 @@
1314
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
1415
}
1516

17+
html, body {
18+
width: 100%;
19+
height: 100%;
20+
overflow-x: hidden;
21+
}
22+
1623
.game-container {
17-
width: 100vw;
18-
height: 100vh;
24+
width: 100%;
25+
height: calc(100vh - var(--nav-height));
26+
margin-top: var(--nav-height);
1927
overflow: hidden;
2028
position: relative;
2129
background: var(--white);
2230
}
2331

2432
/* Top Navigation */
2533
.top-nav {
26-
position: absolute;
34+
position: fixed;
2735
top: 0;
2836
left: 0;
2937
right: 0;
38+
height: var(--nav-height);
3039
background: var(--black);
31-
padding: 10px 20px;
40+
padding: 8px 12px;
3241
z-index: 1000;
42+
width: 100%;
3343
}
3444

3545
.nav-content {
3646
display: flex;
3747
justify-content: space-between;
3848
align-items: center;
49+
gap: 10px;
3950
max-width: 1200px;
4051
margin: 0 auto;
52+
height: 100%;
53+
width: 100%;
4154
}
4255

4356
.nav-title {
44-
font-size: 1.5em;
57+
font-size: 1.3em;
4558
font-weight: bold;
4659
color: var(--green);
60+
white-space: nowrap;
4761
}
4862

4963
.nav-controls {
5064
display: flex;
51-
gap: 10px;
65+
flex-wrap: nowrap;
66+
gap: 8px;
67+
align-items: center;
68+
overflow-x: auto;
69+
-ms-overflow-style: none;
70+
scrollbar-width: none;
71+
padding-bottom: 4px;
72+
}
73+
74+
.nav-controls::-webkit-scrollbar {
75+
display: none;
5276
}
5377

5478
.nav-button {
5579
display: flex;
5680
align-items: center;
5781
gap: 5px;
58-
padding: 10px 20px;
82+
padding: 6px 10px;
5983
border: 1px solid var(--green);
6084
border-radius: 4px;
6185
background: var(--green);
6286
color: var(--black);
6387
cursor: pointer;
6488
transition: var(--transition-speed);
89+
font-size: 0.85em;
90+
white-space: nowrap;
91+
min-width: auto;
92+
flex-shrink: 0;
6593
}
6694

6795
.nav-button:hover {
6896
background: #7cc337;
6997
color: var(--black);
7098
}
7199

100+
@media screen and (max-width: 768px) {
101+
.nav-content {
102+
gap: 8px;
103+
}
104+
105+
.nav-title {
106+
font-size: 1.1em;
107+
}
108+
109+
.nav-button {
110+
padding: 6px 8px;
111+
font-size: 0.8em;
112+
}
113+
114+
.nav-button i {
115+
margin-right: 4px;
116+
}
117+
}
118+
119+
@media screen and (max-width: 480px) {
120+
.nav-button span {
121+
display: none;
122+
}
123+
124+
.nav-button i {
125+
margin: 0;
126+
font-size: 1.1em;
127+
}
128+
129+
.nav-button {
130+
padding: 6px;
131+
min-width: 32px;
132+
justify-content: center;
133+
}
134+
}
135+
72136
/* Map Container */
73137
.map-container {
74138
width: 100%;
75139
height: 100%;
76140
position: relative;
141+
overflow: hidden;
77142
}
78143

79144
.map {
@@ -85,9 +150,9 @@
85150
/* Search Panel */
86151
.search-panel {
87152
position: absolute;
88-
top: 80px;
153+
top: calc(var(--nav-height) + 20px);
89154
right: 20px;
90-
width: 300px;
155+
width: min(300px, calc(100% - 40px));
91156
background: var(--white);
92157
border: 1px solid var(--black);
93158
border-radius: 4px;
@@ -127,33 +192,33 @@
127192
/* Legend Panel */
128193
.legend-panel {
129194
position: absolute;
130-
top: 150px;
195+
top: calc(var(--nav-height) + 20px);
131196
left: 20px;
132-
width: 250px;
197+
width: min(250px, calc(100% - 40px));
133198
background: var(--white);
134-
border-radius: 8px; /* Softer corners */
135-
padding: 20px; /* Plush padding */
136-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Material UI elevation */
199+
border-radius: 8px;
200+
padding: 20px;
201+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
137202
transform: translateX(-120%);
138-
transition: transform var(--transition-speed), box-shadow 0.3s; /* Smooth transitions */
203+
transition: transform var(--transition-speed), box-shadow 0.3s;
139204
z-index: 1000;
140205
}
141206

142207
.legend-panel.active {
143208
transform: translateX(0);
144-
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); /* Elevated when active */
209+
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
145210
}
146211

147212
.legend-header {
148213
display: flex;
149214
justify-content: space-between;
150215
align-items: center;
151-
padding: 15px 0; /* Adjusted padding */
152-
border-bottom: none; /* Remove border */
216+
padding: 15px 0;
217+
border-bottom: none;
153218
}
154219

155220
.legend-content {
156-
padding: 20px 0; /* Plush padding */
221+
padding: 20px 0;
157222
max-height: 70vh;
158223
overflow-y: auto;
159224
}
@@ -180,45 +245,46 @@
180245
/* Location Info Sidebar */
181246
.location-sidebar {
182247
position: absolute;
183-
top: 80px;
248+
top: calc(var(--nav-height) + 20px);
184249
right: 20px;
185-
width: 300px;
250+
width: min(300px, calc(100% - 40px));
186251
background: var(--white);
187-
border-radius: 8px; /* Softer corners */
188-
padding: 20px; /* Plush padding */
189-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Material UI elevation */
252+
border-radius: 8px;
253+
padding: 20px;
254+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
190255
transform: translateX(120%);
191-
transition: transform var(--transition-speed), box-shadow 0.3s; /* Smooth transitions */
256+
transition: transform var(--transition-speed), box-shadow 0.3s;
192257
z-index: 1000;
193258
}
194259

195260
.location-sidebar.active {
196261
transform: translateX(0);
197-
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); /* Elevated when active */
262+
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
198263
}
199264

200265
.sidebar-header {
201266
display: flex;
202267
justify-content: space-between;
203268
align-items: center;
204-
padding: 15px 0; /* Adjusted padding */
205-
border-bottom: none; /* Remove border */
269+
padding: 15px 0;
270+
border-bottom: none;
206271
background: var(--white);
207272
color: var(--black);
208273
}
209274

210275
.sidebar-content {
211-
padding: 20px 0; /* Plush padding */
276+
padding: 20px 0;
212277
color: var(--black);
213278
}
214279

215280
.sidebar-footer {
216-
padding: 15px 0; /* Adjusted padding */
217-
background: rgba(149, 226, 70, 0.15); /* Slightly stronger tint */
218-
border-radius: 0 0 8px 8px; /* Match container */
281+
padding: 15px 0;
282+
background: rgba(149, 226, 70, 0.15);
283+
border-radius: 0 0 8px 8px;
219284
font-size: 0.9em;
220285
color: var(--black);
221286
}
287+
222288
/* Mini Stats */
223289
.mini-stats {
224290
position: absolute;
@@ -239,17 +305,6 @@
239305
color: var(--black);
240306
}
241307

242-
/* Map Labels */
243-
.map-label {
244-
background-color: var(--white);
245-
padding: 2px 6px;
246-
border-radius: 3px;
247-
font-size: 12px;
248-
white-space: nowrap;
249-
pointer-events: none;
250-
border: 1px solid var(--black);
251-
}
252-
253308
/* Close Button */
254309
.close-button {
255310
background: var(--green);
@@ -272,6 +327,7 @@
272327
.legend-color.mess { background-color: rgba(255, 0, 0, 0.2); }
273328
.legend-color.parking { background-color: rgba(128, 128, 128, 0.2); }
274329
.legend-color.sports { background-color: rgba(147, 112, 219, 0.2); }
330+
.legend-color.shops { background-color: rgba(255, 140, 0, 0.2); }
275331
.legend-color.temple { background-color: rgba(139, 69, 19, 0.2); }
276332
.legend-color.tree { background-color: rgba(34, 139, 34, 0.8); }
277333
.legend-color.walkways { background-color: #8B4513; }
@@ -302,33 +358,34 @@
302358
border-top: none;
303359
color: var(--black);
304360
}
361+
305362
/* North Arrow */
306363
.north-arrow {
307364
position: absolute;
308-
top: 80px; /* Below the header (60px height + 20px gap) */
309-
left: 20px; /* Bottom-left corner */
310-
width: 50px; /* Slightly larger for clarity */
365+
top: calc(var(--nav-height) - 30px);
366+
left: 20px;
367+
width: 50px;
311368
height: 50px;
312369
background: var(--white);
313370
border-radius: 50%;
314371
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
315372
display: flex;
316-
flex-direction: column; /* Stack arrow and "N" vertically */
373+
flex-direction: column;
317374
align-items: center;
318375
justify-content: center;
319-
font-size: 18px; /* Arrow size */
376+
font-size: 18px;
320377
color: var(--green);
321378
z-index: 1000;
322379
transition: box-shadow 0.3s;
323380
}
324381

325382
.north-arrow::after {
326-
content: "N"; /* Add "N" label */
383+
content: "N";
327384
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
328-
font-size: 14px; /* Smaller "N" */
385+
font-size: 14px;
329386
font-weight: bold;
330387
color: var(--green);
331-
margin-top: 2px; /* Space between arrow and "N" */
388+
margin-top: 2px;
332389
}
333390

334391
.north-arrow:hover {
@@ -338,11 +395,11 @@
338395
/* Zoom Controls */
339396
.zoom-controls {
340397
position: absolute;
341-
bottom: 20px; /* Bottom-right corner */
398+
bottom: 20px;
342399
right: 20px;
343400
display: flex;
344-
flex-direction: column; /* Stack buttons vertically */
345-
gap: 10px; /* Space between buttons */
401+
flex-direction: column;
402+
gap: 10px;
346403
z-index: 1000;
347404
}
348405

0 commit comments

Comments
 (0)