/* ========================================================================== MAIN-SPECIFIC OVERRIDES ========================================================================== Fixes that apply to MAIN on top of the ported beta theme. Kept in a separate file on purpose: assets/css/beta-theme.css stays a pristine copy of new_css/assets/css/beta-theme.css, so it can be re-synced from the beta at any time without losing these fixes. Loaded after beta-theme.css. ========================================================================== */ /* -------------------------------------------------------------------------- Floating buttons vs. the social widget The widget sits at z-index 9999 while the language switcher (10012), the tickets FAB (10011) and the Patreon FAB (10001) sit above it, so they used to overlap the friends list. This is most visible on mobile, where the widget spans nearly the full width. Two independent guards, so the fix holds even if the script fails: 1. the widget is lifted above the floating controls 2. when the widget is open, those controls fade out and stop receiving clicks -------------------------------------------------------------------------- */ .social-widget { z-index: 10020; } /* The launcher stays reachable so the widget can always be closed. */ .social-fab { z-index: 10021; } body.social-widget-open .tickets-floating-fab, body.social-widget-open .language-switcher, body.social-widget-open .patreon-fab { opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease; } /* Returning: fade back in slightly slower so it does not snap. */ .tickets-floating-fab, .language-switcher, .patreon-fab { transition: opacity 0.26s ease, transform 0.26s ease; } /* If the language switcher was left expanded, collapse it too. */ body.social-widget-open .language-switcher.open button[data-lang-button] { opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { body.social-widget-open .tickets-floating-fab, body.social-widget-open .language-switcher, body.social-widget-open .patreon-fab { transform: none; } .tickets-floating-fab, .language-switcher, .patreon-fab { transition-duration: 0.01ms; } } /* -------------------------------------------------------------------------- ANCHO ESTÁNDAR DE PÁGINA — calibrado para 1920x1080 Antes de esto cada página traía su propio ancho: 1180 (my-punishments), 1400 (leaderboards), 1440 (dashboard), 1500 (battlepass/cemetery), 1540 (market/trading/dinosaurus), 1600 (spawn/tickets) y varias sin ningún tope (arcade, lootboxes, inventory, skins, population, live-dino), que en pantallas anchas se estiraban de borde a borde. El número sale de la aritmética de 1920x1080 al 100% de zoom: 1920 − 15 (scrollbar) − 304 (riel de actividad) = 1601 de área útil 1601 − 1540 = 61 → ~30px de aire a cada lado Es decir: a 1920 la página usa todo el ancho disponible con un respiro parejo, y de 1920 para arriba el contenido deja de estirarse y se centra. 1540 además ya era el valor más repetido del proyecto, así que tres páginas no cambian nada. -------------------------------------------------------------------------- */ :root { --latam-page-max: 1540px; } /* Tope global. Va en .main-content y no en .layout-wrapper porque los porcentajes de padding se resuelven contra el bloque contenedor: el de .main-content es .layout-wrapper (1601 en 1920), mientras que el de .layout-wrapper es el body (1905), que daría un ancho equivocado. Los fondos absolutos (.inventory-bg-container, .skins-bg-container, .main-content::before) se posicionan contra la caja de padding, así que siguen cubriendo de borde a borde. */ .latam-beta-theme .main-content { padding-inline: max(0px, calc((100% - var(--latam-page-max)) / 2)) !important; } /* Las páginas que ya traían contenedor propio se igualan al estándar. Al coincidir con el tope de arriba, el contenedor llena exactamente la caja ya recortada: no se suman dos márgenes. */ .latam-beta-theme .dashboard-profile-page, .latam-beta-theme .bp-shell, .latam-beta-theme .store-shell, .latam-beta-theme .ex-shell, .latam-beta-theme .tr-shell, .latam-beta-theme .leaderboard-shell, .latam-beta-theme .punishment-shell, .latam-beta-theme .tickets-shell, .latam-beta-theme .lootbox-wrap, .latam-beta-theme .arcade-page, .latam-beta-theme .population-page { width: 100% !important; max-width: var(--latam-page-max) !important; margin-inline: auto !important; } /* live-dino.php no tiene .main-content ni contenedor propio: sus secciones cuelgan directo de .layout-wrapper. Se les da el mismo ancho, con un mínimo de 20px de aire para cuando la pantalla es más angosta que el tope. */ .latam-beta-theme .layout-wrapper > .store-title-panel, .latam-beta-theme .layout-wrapper > .dino-storage-panel, .latam-beta-theme .layout-wrapper > .dino-grid { width: min(var(--latam-page-max), 100% - 40px) !important; margin-inline: auto !important; } /* map.php cuelga .lm-wrapper directo de .layout-wrapper, así que el tope no lo toca: el mapa sigue a pantalla completa, que es como debe verse. */ /* Sin el riel el cálculo da 0 solo, pero a 640px hay que devolver el padding móvil que traía style.css (esta regla tiene más especificidad y lo pisaba). */ @media (max-width: 640px) { .latam-beta-theme .main-content { padding-inline: 12px !important; } } /* -------------------------------------------------------------------------- spawn.php: .layout-wrapper duplicado spawn.php abre su propio
con un segundo