392 lines
12 KiB
JavaScript
392 lines
12 KiB
JavaScript
"use strict";
|
|
|
|
/** @type {Dictionary.<string, any|null>} */
|
|
const SCSS = {
|
|
...{
|
|
"body,html" : {
|
|
height : "100%",
|
|
margin : "0em",
|
|
"background-color" : "#05070d",
|
|
color : "#e2e8f0",
|
|
"font-family" : "monospace, 'Courier New', sans-serif",
|
|
overflow : "hidden"
|
|
}
|
|
},
|
|
...{
|
|
".xgravity" : {
|
|
position : "relative",
|
|
top : "0em",
|
|
left : "0em",
|
|
width : "100%",
|
|
height : "100%",
|
|
display : "flex",
|
|
"justify-content" : "center",
|
|
"align-items" : "center"
|
|
},
|
|
".xg-view" : {
|
|
position : "absolute",
|
|
top : "0em",
|
|
left : "0em",
|
|
width : "100%",
|
|
height : "100%",
|
|
display : "flex",
|
|
"flex-direction" : "column",
|
|
"justify-content" : "center",
|
|
"align-items" : "center",
|
|
"box-sizing" : "border-box",
|
|
padding : "2em",
|
|
"text-align" : "center",
|
|
"background-color" : "rgba(5, 7, 13, 0.9)"
|
|
},
|
|
".xg-game-container" : {
|
|
position : "absolute",
|
|
top : "0em",
|
|
left : "0em",
|
|
width : "100%",
|
|
height : "100%",
|
|
overflow : "hidden",
|
|
"background-color" : "#020408"
|
|
},
|
|
".xg-canvas" : {
|
|
position : "absolute",
|
|
top : "0em",
|
|
left : "0em",
|
|
width : "100%",
|
|
height : "100%",
|
|
display : "block"
|
|
},
|
|
".xg-hud" : {
|
|
position : "absolute",
|
|
top : "0em",
|
|
left : "0em",
|
|
width : "100%",
|
|
height : "100%",
|
|
"pointer-events" : "none",
|
|
"box-sizing" : "border-box",
|
|
padding : "1em",
|
|
display : "flex",
|
|
"flex-direction" : "column",
|
|
"justify-content" : "space-between"
|
|
},
|
|
".xg-hud-top" : {
|
|
display : "flex",
|
|
"justify-content" : "space-between",
|
|
"align-items" : "flex-end",
|
|
"font-size" : "1.1em",
|
|
"font-weight" : "bold",
|
|
"text-shadow" : "0 0 0.4em #38bdf8"
|
|
},
|
|
".xg-hud-shield-container" : {
|
|
display : "flex",
|
|
"align-items" : "center",
|
|
gap : "0.5em"
|
|
},
|
|
".xg-shield-bar-bg" : {
|
|
width : "8em",
|
|
height : "0.8em",
|
|
background : "rgba(15, 23, 42, 0.8)",
|
|
border : "0.1em solid #0284c7",
|
|
"border-radius" : "0.2em",
|
|
overflow : "hidden"
|
|
},
|
|
".xg-shield-bar-fill" : {
|
|
width : "100%",
|
|
height : "100%",
|
|
background : "linear-gradient(90deg, #0284c7, #38bdf8)",
|
|
transition : "width 0.1s linear"
|
|
},
|
|
".xg-hud-bottom" : {
|
|
display : "flex",
|
|
"justify-content" : "flex-end",
|
|
"align-items" : "flex-end",
|
|
"pointer-events" : "none"
|
|
},
|
|
".xg-hud-pause-btn" : {
|
|
display : "flex",
|
|
"pointer-events" : "auto",
|
|
"font-size" : "0.85em",
|
|
padding : "0.5em 1em",
|
|
cursor : "pointer",
|
|
"z-index" : "20"
|
|
},
|
|
".xg-pause-modal" : {
|
|
position : "absolute",
|
|
top : "0em",
|
|
left : "0em",
|
|
width : "100%",
|
|
height : "100%",
|
|
background : "rgba(5, 7, 13, 0.75)",
|
|
display : "flex",
|
|
"flex-direction" : "column",
|
|
"justify-content" : "center",
|
|
"align-items" : "center",
|
|
gap : "1em",
|
|
"z-index" : "10"
|
|
},
|
|
".xg-title" : {
|
|
"font-size" : "2.5em",
|
|
"font-weight" : "bold",
|
|
"margin-bottom" : "1.2em",
|
|
color : "#38bdf8",
|
|
"text-shadow" : "0 0 0.5em #0284c7",
|
|
"letter-spacing" : "0.1em"
|
|
},
|
|
".xg-subtitle" : {
|
|
"font-size" : "1.5em",
|
|
"font-weight" : "bold",
|
|
"margin-bottom" : "0.8em",
|
|
color : "#7dd3fc"
|
|
},
|
|
".xg-menu-list" : {
|
|
display : "flex",
|
|
"flex-direction" : "column",
|
|
gap : "0.8em",
|
|
width : "14em"
|
|
},
|
|
".xg-btn" : {
|
|
background : "#0f172a",
|
|
color : "#38bdf8",
|
|
border : "0.1em solid #0284c7",
|
|
padding : "0.6em 1em",
|
|
"font-size" : "1em",
|
|
"font-family" : "inherit",
|
|
cursor : "pointer",
|
|
"border-radius" : "0.3em",
|
|
transition : "all 0.2s ease-in-out"
|
|
},
|
|
".xg-btn:hover" : {
|
|
background : "#0284c7",
|
|
color : "#ffffff",
|
|
"box-shadow" : "0 0 0.8em #38bdf8"
|
|
},
|
|
".xg-panel" : {
|
|
width : "26em",
|
|
"max-width" : "90%",
|
|
"max-height" : "28em",
|
|
"overflow-y" : "auto",
|
|
background : "rgba(15, 23, 42, 0.7)",
|
|
border : "0.1em solid #1e293b",
|
|
"border-radius" : "0.5em",
|
|
padding : "1.5em",
|
|
"box-sizing" : "border-box",
|
|
display : "flex",
|
|
"flex-direction" : "column",
|
|
gap : "1em"
|
|
},
|
|
".xg-panel::-webkit-scrollbar" : {
|
|
width : "0.4em"
|
|
},
|
|
".xg-panel::-webkit-scrollbar-track" : {
|
|
background : "rgba(15, 23, 42, 0.5)"
|
|
},
|
|
".xg-panel::-webkit-scrollbar-thumb" : {
|
|
background : "#0284c7",
|
|
"border-radius" : "0.2em"
|
|
},
|
|
".xg-panel::-webkit-scrollbar-thumb:hover" : {
|
|
background : "#38bdf8"
|
|
},
|
|
".xg-field-row" : {
|
|
display : "flex",
|
|
"justify-content" : "space-between",
|
|
"align-items" : "center",
|
|
"font-size" : "0.9em"
|
|
},
|
|
".xg-range" : {
|
|
cursor : "pointer",
|
|
width : "10em"
|
|
},
|
|
".xg-select" : {
|
|
background : "#0f172a",
|
|
color : "#38bdf8",
|
|
border : "0.1em solid #0284c7",
|
|
padding : "0.4em 0.6em",
|
|
"font-family" : "inherit",
|
|
"border-radius" : "0.3em",
|
|
cursor : "pointer"
|
|
},
|
|
".xg-credits-text" : {
|
|
"font-size" : "0.8em",
|
|
"line-height" : "1.5",
|
|
color : "#94a3b8",
|
|
"text-align" : "left"
|
|
},
|
|
".xg-link" : {
|
|
color : "#38bdf8",
|
|
"text-decoration" : "none",
|
|
"word-break" : "break-all"
|
|
},
|
|
".xg-link:hover" : {
|
|
"text-decoration" : "underline"
|
|
},
|
|
".xg-btn-selected" : {
|
|
"border-color": "#38bdf8 !important",
|
|
"box-shadow": "0 0 12px rgba(56, 189, 248, 0.4)",
|
|
color: "#e0f2fe !important"
|
|
},
|
|
".xg-btn-back" : {
|
|
"margin-top": "10px",
|
|
opacity: 0.85
|
|
},
|
|
".xg-checkbox" : {
|
|
cursor : "pointer",
|
|
width : "1.2em",
|
|
height : "1.2em",
|
|
"accent-color" : "#0284c7"
|
|
},
|
|
".xg-fps-overlay" : {
|
|
position : "absolute",
|
|
top : "0.5em",
|
|
right : "0.5em", // <-- Cambiado a la esquina superior derecha
|
|
background : "rgba(15, 23, 42, 0.75)",
|
|
border : "0.08em solid #0284c7",
|
|
"border-radius" : "0.25em",
|
|
padding : "0.2em 0.5em",
|
|
"font-size" : "0.85em",
|
|
"font-weight" : "bold",
|
|
color : "#38bdf8",
|
|
"text-shadow" : "0 0 0.3em #0284c7",
|
|
"pointer-events" : "none",
|
|
"z-index" : "9999",
|
|
"user-select" : "none"
|
|
},
|
|
},
|
|
// Capa completa superpuesta que cubre el juego y el HUD
|
|
".xg-game-over-view": {
|
|
"position": "absolute",
|
|
"inset": "0",
|
|
"display": "flex",
|
|
"flex-direction": "column",
|
|
"align-items": "center",
|
|
"justify-content": "center",
|
|
"background": "rgba(2, 6, 23, 0.78)",
|
|
"backdrop-filter": "blur(8px)",
|
|
"z-index": "100",
|
|
"padding": "20px",
|
|
"box-sizing": "border-box",
|
|
|
|
"& .xg-title": {
|
|
"font-family": "'Courier New', monospace",
|
|
"font-size": "2.8rem",
|
|
"color": "#38bdf8",
|
|
"text-shadow": "0 0 20px rgba(56, 189, 248, 0.6)",
|
|
"letter-spacing": "4px",
|
|
"margin": "0 0 10px 0"
|
|
},
|
|
|
|
// Insignia de motivo de derrota
|
|
"& .xg-game-over-reason": {
|
|
"margin-bottom": "22px",
|
|
|
|
"& .xg-badge-danger": {
|
|
"display": "inline-block",
|
|
"padding": "6px 14px",
|
|
"background": "rgba(239, 68, 68, 0.15)",
|
|
"border": "1px solid rgba(239, 68, 68, 0.5)",
|
|
"color": "#f87171",
|
|
"font-family": "monospace",
|
|
"font-size": "0.9rem",
|
|
"letter-spacing": "2px",
|
|
"border-radius": "4px",
|
|
"text-transform": "uppercase"
|
|
}
|
|
},
|
|
|
|
// Tarjeta central de estadísticas
|
|
"& .xg-stats-card": {
|
|
"width": "100%",
|
|
"max-width": "460px",
|
|
"background": "rgba(15, 23, 42, 0.85)",
|
|
"border": "1px solid rgba(56, 189, 248, 0.35)",
|
|
"box-shadow": "0 0 25px rgba(2, 6, 23, 0.9), inset 0 0 15px rgba(56, 189, 248, 0.08)",
|
|
"border-radius": "6px",
|
|
"padding": "16px 20px",
|
|
"margin-bottom": "24px",
|
|
"display": "flex",
|
|
"flex-direction": "column",
|
|
"gap": "10px",
|
|
"box-sizing": "border-box"
|
|
},
|
|
|
|
// Filas de estadísticas: aquí se resuelve la separación del texto
|
|
"& .xg-stat-row": {
|
|
"display": "flex",
|
|
"justify-content": "space-between",
|
|
"align-items": "center",
|
|
"width": "100%",
|
|
"padding": "6px 0",
|
|
"border-bottom": "1px dashed rgba(56, 189, 248, 0.15)",
|
|
"font-family": "monospace",
|
|
"font-size": "1rem",
|
|
|
|
"&:last-child": {
|
|
"border-bottom": "none"
|
|
},
|
|
|
|
"& .xg-stat-label": {
|
|
"color": "#94a3b8",
|
|
"letter-spacing": "1px",
|
|
"text-align": "left"
|
|
},
|
|
|
|
"& .xg-stat-value": {
|
|
"color": "#f1f5f9",
|
|
"font-weight": "bold",
|
|
"text-align": "right",
|
|
"letter-spacing": "1px"
|
|
},
|
|
|
|
// Fila destacada de la puntuación
|
|
"&.xg-stat-score": {
|
|
"border-bottom": "1px solid rgba(56, 189, 248, 0.4)",
|
|
"padding-bottom": "10px",
|
|
"margin-bottom": "4px",
|
|
|
|
"& .xg-val-score": {
|
|
"color": "#38bdf8",
|
|
"font-size": "1.25rem",
|
|
"text-shadow": "0 0 10px rgba(56, 189, 248, 0.5)"
|
|
}
|
|
}
|
|
},
|
|
|
|
// Botonera inferior
|
|
"& .xg-menu-list": {
|
|
"display": "flex",
|
|
"flex-direction": "column",
|
|
"gap": "12px",
|
|
"width": "100%",
|
|
"max-width": "280px",
|
|
|
|
"& .xg-btn": {
|
|
"width": "100%",
|
|
"padding": "12px 0",
|
|
"font-family": "monospace",
|
|
"font-size": "1.05rem",
|
|
"letter-spacing": "2px"
|
|
}
|
|
}
|
|
},
|
|
".xg-main-menu": {
|
|
// ... tus estilos actuales del menú ...
|
|
|
|
"& .xg-menu-header": {
|
|
"display": "flex",
|
|
"flex-direction": "column",
|
|
"align-items": "center",
|
|
"justify-content": "center",
|
|
"margin-bottom": "24px"
|
|
},
|
|
|
|
"& .xg-main-logo": {
|
|
"width": "120px",
|
|
"height": "120px",
|
|
"margin-bottom": "14px",
|
|
"filter": "drop-shadow(0 0 16px rgba(56, 189, 248, 0.45))",
|
|
"transition": "transform 0.3s ease, filter 0.3s ease",
|
|
"user-select": "none",
|
|
"pointer-events": "none"
|
|
}
|
|
},
|
|
...(typeof custom_styles == "undefined" ? {} : custom_styles)
|
|
}; |