|
115 | 115 | } |
116 | 116 | </style> |
117 | 117 |
|
118 | | - <!-- Immediate execution to prevent FOUC --> |
| 118 | + <!-- Immediate execution to prevent FOUC + apply persisted dark mode --> |
119 | 119 | <script> |
120 | | - document.documentElement.className = "preload"; |
| 120 | + (function () { |
| 121 | + const root = document.documentElement; |
| 122 | + root.classList.add("preload"); |
| 123 | + try { |
| 124 | + const storedDarkMode = localStorage.getItem("settings.darkMode"); |
| 125 | + if (storedDarkMode === "true") { |
| 126 | + root.classList.add("dark"); |
| 127 | + } else if (storedDarkMode === "false") { |
| 128 | + root.classList.remove("dark"); |
| 129 | + } |
| 130 | + } catch (error) { |
| 131 | + // Ignore storage access errors. |
| 132 | + } |
| 133 | + })(); |
121 | 134 | </script> |
122 | 135 |
|
123 | 136 | <!-- CrazyGames SDK --> |
|
178 | 191 | </head> |
179 | 192 |
|
180 | 193 | <body |
181 | | - class="h-full select-none font-sans min-h-screen bg-opacity-0 bg-cover bg-center bg-fixed transition-opacity duration-300 ease-in-out flex flex-col" |
| 194 | + class="h-full select-none font-sans min-h-screen bg-black/0 bg-cover bg-center bg-fixed transition-opacity duration-300 ease-in-out flex flex-col" |
182 | 195 | > |
183 | 196 | <header class="l-header"> |
184 | 197 | <div class="l-header__content"> |
|
246 | 259 | <div class="bg-image"></div> |
247 | 260 | <div |
248 | 261 | id="turnstile-container" |
249 | | - class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[99999]" |
| 262 | + class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-99999" |
250 | 263 | ></div> |
251 | 264 | <gutter-ads></gutter-ads> |
252 | 265 |
|
|
260 | 273 | <territory-patterns-modal class="w-[20%] md:w-[15%]"> |
261 | 274 | <button |
262 | 275 | id="territory-patterns-input-preview-button" |
263 | | - class="w-full border p-[4px] rounded-lg flex cursor-pointer border-black/30 dark:border-gray-300/60 bg-white/70 dark:bg-[rgba(55,65,81,0.7)] justify-center" |
| 276 | + class="w-full border p-1 rounded-lg flex cursor-pointer border-black/30 dark:border-gray-300/60 bg-white/70 dark:bg-[rgba(55,65,81,0.7)] justify-center" |
264 | 277 | title="Pick a pattern!" |
265 | 278 | ></button> |
266 | 279 | </territory-patterns-modal> |
|
318 | 331 | <button |
319 | 332 | id="settings-button" |
320 | 333 | title="Settings" |
321 | | - class="fixed bottom-4 right-4 z-50 rounded-full p-2 shadow-lg transition-colors duration-300 flex items-center justify-center" |
322 | | - style="width: 60px; height: 60px; background-color: #0075ff" |
| 334 | + class="fixed bottom-4 right-4 z-50 rounded-full p-2 shadow-lg transition-colors duration-300 flex items-center justify-center size-15 bg-(--primaryColor)" |
| 335 | + style="--primaryColor: #0075ff" |
323 | 336 | > |
324 | | - <img |
325 | | - src="/images/SettingIconWhite.svg" |
326 | | - alt="Settings" |
327 | | - style="width: 52px; height: 52px" |
328 | | - /> |
| 337 | + <img src="/images/SettingIconWhite.svg" alt="Settings" class="size-18" /> |
329 | 338 | </button> |
330 | 339 |
|
331 | 340 | <!-- Game components --> |
|
334 | 343 | </div> |
335 | 344 | <div id="app"></div> |
336 | 345 | <div id="radialMenu" class="radial-menu"></div> |
337 | | - <div class="flex gap-2 fixed right-[10px] top-[10px] z-50 flex-col"> |
| 346 | + <div class="flex gap-2 fixed right-2.5 top-2.5 z-50 flex-col"> |
338 | 347 | <player-info-overlay></player-info-overlay> |
339 | 348 | </div> |
340 | 349 | <div |
341 | | - class="fixed bottom-[30px] sm:bottom-auto sm:top-[20px] z-50 mx-auto max-w-max inset-x-0 items-center" |
| 350 | + class="fixed bottom-7.5 sm:bottom-auto sm:top-5 z-50 mx-auto max-w-max inset-x-0 items-center" |
342 | 351 | > |
343 | 352 | <heads-up-message></heads-up-message> |
344 | 353 | </div> |
345 | 354 |
|
346 | 355 | <div |
347 | | - class="left-0 bottom-0 sm:left-4 sm:bottom-4 w-full flex-col-reverse sm:flex-row z-50 md:w-[320px]" |
348 | | - style="position: fixed; pointer-events: none" |
| 356 | + class="left-0 bottom-0 sm:left-4 sm:bottom-4 w-full flex-col-reverse sm:flex-row z-50 md:w-[320px] fixed pointer-events-none" |
349 | 357 | > |
350 | 358 | <div |
351 | | - class="w-full md:w-2/3 md:fixed sm:right-0 md:bottom-0 md:flex flex-col items-end" |
352 | | - style="pointer-events: none" |
| 359 | + class="w-full md:w-2/3 md:fixed sm:right-0 md:bottom-0 md:flex flex-col items-end pointer-events-none" |
353 | 360 | > |
354 | 361 | <chat-display></chat-display> |
355 | 362 | <events-display></events-display> |
|
361 | 368 |
|
362 | 369 | <!-- Footer section --> |
363 | 370 | <footer |
364 | | - class="flex justify-center px-3 py-3 md:px-6 md:py-3 bg-[var(--boxBackgroundColor)] backdrop-blur-sm" |
| 371 | + class="flex justify-center px-3 py-3 md:px-6 md:py-3 bg-(--boxBackgroundColor) backdrop-blur-xs" |
365 | 372 | > |
366 | 373 | <div |
367 | | - class="flex flex-col md:flex-row flex-nowrap justify-between items-center gap-4 md:gap-0 w-full max-w-[860px] flex-1" |
| 374 | + class="flex flex-col md:flex-row flex-nowrap justify-between items-center gap-4 md:gap-0 w-full max-w-215 flex-1" |
368 | 375 | > |
369 | 376 | <div |
370 | | - class="flex flex-col sm:flex-row gap-4 sm:gap-5 text-white/70 justify-center md:justify-start flex-shrink-0" |
| 377 | + class="flex flex-col sm:flex-row gap-4 sm:gap-5 text-white/70 justify-center md:justify-start shrink-0" |
371 | 378 | > |
372 | 379 | <a |
373 | 380 | href="https://openfront.wiki/Main_Page" |
|
392 | 399 | <span data-i18n="main.join_discord"> Discord </span> |
393 | 400 | </a> |
394 | 401 | </div> |
395 | | - <div class="flex justify-center text-white/70 flex-shrink-0"> |
| 402 | + <div class="flex justify-center text-white/70 shrink-0"> |
396 | 403 | <a |
397 | 404 | href="https://github.com/openfrontio/OpenFrontIO" |
398 | 405 | class="text-white/70 hover:text-white transition-colors duration-300 ease-in-out inline-flex items-center gap-2 whitespace-nowrap" |
|
409 | 416 | </a> |
410 | 417 | </div> |
411 | 418 | <div |
412 | | - class="flex flex-col sm:flex-row gap-4 sm:gap-4 text-white/70 justify-center md:justify-end flex-shrink-0" |
| 419 | + class="flex flex-col sm:flex-row gap-4 sm:gap-4 text-white/70 justify-center md:justify-end shrink-0" |
413 | 420 | > |
414 | 421 | <a |
415 | 422 | href="/privacy-policy.html" |
|
441 | 448 | <game-starting-modal></game-starting-modal> |
442 | 449 | <game-top-bar></game-top-bar> |
443 | 450 | <unit-display></unit-display> |
444 | | - <div class="flex flex-col items-end fixed top-4 right-4 z-[1000] gap-2"> |
| 451 | + <div class="flex flex-col items-end fixed top-4 right-4 z-1000 gap-2"> |
445 | 452 | <game-right-sidebar></game-right-sidebar> |
446 | 453 | <replay-panel></replay-panel> |
447 | 454 | </div> |
|
463 | 470 | <performance-overlay></performance-overlay> |
464 | 471 | <div |
465 | 472 | id="language-modal" |
466 | | - class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex justify-center items-center" |
| 473 | + class="fixed inset-0 bg-black/50 z-50 hidden flex justify-center items-center" |
467 | 474 | > |
468 | 475 | <div class="bg-white rounded-lg shadow-lg p-6 w-96 max-w-full"> |
469 | 476 | <h2 class="text-xl font-semibold mb-4">Select Language</h2> |
470 | 477 | <div |
471 | 478 | id="language-list" |
472 | | - class="space-y-2 max-h-80 overflow-y-auto" |
| 479 | + class="flex flex-col gap-2 max-h-80 overflow-y-auto" |
473 | 480 | ></div> |
474 | 481 | <button |
475 | | - class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded" |
| 482 | + class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-sm" |
476 | 483 | onclick=" |
477 | 484 | document.getElementById('language-modal').classList.add('hidden') |
478 | 485 | " |
|
0 commit comments