345 lines
11 KiB
JavaScript
345 lines
11 KiB
JavaScript
"use strict";
|
|
|
|
/** @type {Dictionary.<string, any|null>} */
|
|
const SCSS = {
|
|
...{
|
|
"body,html" : {
|
|
height : "100%",
|
|
margin : "0em",
|
|
background_color : "#050505",
|
|
overflow : "hidden",
|
|
user_select : "none"
|
|
}
|
|
},
|
|
...{
|
|
".hollow-bond" : {
|
|
position : "relative",
|
|
top : "0em",
|
|
left : "0em",
|
|
width : "100%",
|
|
height : "100%",
|
|
font_family : "monospace",
|
|
color : "#e0e0e0"
|
|
}
|
|
},
|
|
...{
|
|
".menu-view" : {
|
|
position : "absolute",
|
|
top : "0em",
|
|
left : "0em",
|
|
width : "100%",
|
|
height : "100%",
|
|
display : "flex",
|
|
flex_direction : "column",
|
|
align_items : "center",
|
|
justify_content : "center",
|
|
background_color : "rgba(8, 8, 10, 0.92)",
|
|
z_index : "10"
|
|
},
|
|
".menu-header" : {
|
|
text_align : "center",
|
|
margin_bottom : "3em"
|
|
},
|
|
".menu-title" : {
|
|
font_size : "2.6em",
|
|
font_weight : "bold",
|
|
letter_spacing : "0.3em",
|
|
color : "#d6d0ba",
|
|
text_shadow : "0 0 0.4em rgba(214, 208, 186, 0.3)"
|
|
},
|
|
".menu-subtitle" : {
|
|
font_size : "0.8em",
|
|
letter_spacing : "0.15em",
|
|
color : "#6e6c62",
|
|
margin_top : "0.6em"
|
|
},
|
|
".menu-actions" : {
|
|
display : "flex",
|
|
flex_direction : "column",
|
|
gap : "1em",
|
|
width : "14em"
|
|
},
|
|
".menu-button" : {
|
|
display : "block",
|
|
width : "100%",
|
|
box_sizing : "border-box",
|
|
padding : "0.7em 1.2em",
|
|
font_family : "monospace",
|
|
font_size : "0.9em",
|
|
color : "#b0aba0",
|
|
background_color : "rgba(25, 25, 28, 0.7)",
|
|
border : "0.05em solid #383733",
|
|
text_align : "center",
|
|
cursor : "pointer",
|
|
letter_spacing : "0.1em",
|
|
transition : "all 0.2s ease",
|
|
"&:hover" : {
|
|
color : "#ffffff",
|
|
background_color : "rgba(45, 45, 52, 0.9)",
|
|
border_color : "#8c8777"
|
|
}
|
|
},
|
|
".credits-modal" : {
|
|
position : "absolute",
|
|
top : "0em",
|
|
left : "0em",
|
|
width : "100%",
|
|
height : "100%",
|
|
background_color : "rgba(0, 0, 0, 0.85)",
|
|
display : "flex",
|
|
flex_direction : "column",
|
|
align_items : "center",
|
|
justify_content : "center",
|
|
gap : "1.2em",
|
|
z_index : "20"
|
|
},
|
|
".credits-box" : {
|
|
padding : "2em",
|
|
border : "0.05em solid #42403b",
|
|
background_color : "#0f0f12",
|
|
text_align : "center",
|
|
min_width : "16em",
|
|
h2 : {
|
|
margin : "0 0 1em 0",
|
|
font_size : "1.4em",
|
|
color : "#d6d0ba",
|
|
letter_spacing : "0.15em"
|
|
},
|
|
p : {
|
|
margin : "0.6em 0",
|
|
font_size : "0.85em",
|
|
color : "#9c988d"
|
|
}
|
|
},
|
|
".new-game-modal" : {
|
|
position : "absolute",
|
|
top : "0em",
|
|
left : "0em",
|
|
width : "100%",
|
|
height : "100%",
|
|
background_color : "rgba(0, 0, 0, 0.85)",
|
|
display : "flex",
|
|
flex_direction : "column",
|
|
align_items : "center",
|
|
justify_content : "center",
|
|
z_index : "20"
|
|
},
|
|
".new-game-box" : {
|
|
box_sizing : "border-box",
|
|
padding : "2.2em 2.5em",
|
|
border : "0.05em solid #42403b",
|
|
background_color : "#0f0f12",
|
|
width : "22em",
|
|
display : "flex",
|
|
flex_direction : "column",
|
|
gap : "1.5em",
|
|
h2 : {
|
|
margin : "0 0 0.5em 0",
|
|
font_size : "1.2em",
|
|
color : "#d6d0ba",
|
|
letter_spacing : "0.15em",
|
|
text_align : "center"
|
|
}
|
|
},
|
|
".field-group" : {
|
|
display : "flex",
|
|
flex_direction : "column",
|
|
gap : "0.6em",
|
|
label : {
|
|
font_size : "0.85em",
|
|
color : "#a8a499",
|
|
letter_spacing : "0.05em"
|
|
},
|
|
".height-value" : {
|
|
color : "#ffffff",
|
|
font_weight : "bold"
|
|
}
|
|
},
|
|
".range-input" : {
|
|
width : "100%",
|
|
box_sizing : "border-box",
|
|
accent_color : "#8c8777",
|
|
cursor : "pointer",
|
|
background : "transparent"
|
|
},
|
|
".text-input,.number-input" : {
|
|
box_sizing : "border-box",
|
|
width : "100%",
|
|
padding : "0.6em 0.8em",
|
|
background_color : "#17171c",
|
|
border : "0.05em solid #383733",
|
|
color : "#ffffff",
|
|
font_family : "monospace",
|
|
font_size : "0.9em",
|
|
letter_spacing : "0.05em",
|
|
outline : "none",
|
|
"&:focus" : {
|
|
border_color : "#8c8777",
|
|
background_color : "#1c1c22"
|
|
}
|
|
},
|
|
".modal-actions" : {
|
|
display : "flex",
|
|
flex_direction : "column",
|
|
gap : "0.8em",
|
|
margin_top : "0.8em"
|
|
},
|
|
".options-modal" : {
|
|
position : "absolute",
|
|
top : "0em",
|
|
left : "0em",
|
|
width : "100%",
|
|
height : "100%",
|
|
background_color : "rgba(0, 0, 0, 0.85)",
|
|
display : "flex",
|
|
flex_direction : "column",
|
|
align_items : "center",
|
|
justify_content : "center",
|
|
z_index : "20"
|
|
},
|
|
".options-box" : {
|
|
box_sizing : "border-box",
|
|
padding : "2.2em 2.5em",
|
|
border : "0.05em solid #42403b",
|
|
background_color : "#0f0f12",
|
|
width : "22em",
|
|
display : "flex",
|
|
flex_direction : "column",
|
|
gap : "1.5em",
|
|
h2 : {
|
|
margin : "0 0 0.5em 0",
|
|
font_size : "1.2em",
|
|
color : "#d6d0ba",
|
|
letter_spacing : "0.15em",
|
|
text_align : "center"
|
|
}
|
|
},
|
|
".field-group-checkbox" : {
|
|
display : "flex",
|
|
align_items : "center",
|
|
label : {
|
|
display : "flex",
|
|
align_items : "center",
|
|
gap : "0.6em",
|
|
font_size : "0.85em",
|
|
color : "#a8a499",
|
|
cursor : "pointer"
|
|
}
|
|
},
|
|
".checkbox-input" : {
|
|
accent_color : "#8c8777",
|
|
cursor : "pointer",
|
|
width : "1.1em",
|
|
height : "1.1em"
|
|
},
|
|
".fps-hud" : {
|
|
position : "absolute",
|
|
top : "0.8em",
|
|
right : "1em",
|
|
padding : "0.4em 0.8em",
|
|
background_color : "rgba(15, 15, 18, 0.8)",
|
|
border : "0.05em solid #383733",
|
|
color : "#8c8777",
|
|
font_size : "0.85em",
|
|
letter_spacing : "0.1em",
|
|
z_index : "5",
|
|
pointer_events : "none",
|
|
".fps-value" : {
|
|
color : "#ffffff",
|
|
font_weight : "bold"
|
|
}
|
|
},
|
|
".hb-canvas-view" : {
|
|
display : "block",
|
|
width : "100%",
|
|
height : "100%",
|
|
outline : "none",
|
|
cursor : "crosshair"
|
|
},
|
|
|
|
".select-input" : {
|
|
"width" : "100%",
|
|
"box-sizing" : "border-box",
|
|
"background-color" : "#13141a",
|
|
"color" : "#e0ded3",
|
|
"border" : "1px solid #3d4450",
|
|
"border-radius" : "4px",
|
|
"padding" : "8px 32px 8px 12px",
|
|
"font-family" : "inherit",
|
|
"font-size" : "0.95rem",
|
|
"outline" : "none",
|
|
"cursor" : "pointer",
|
|
"transition" : "border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease",
|
|
|
|
/* Quitar flecha nativa del navegador */
|
|
"appearance" : "none",
|
|
"-webkit-appearance" : "none",
|
|
"-moz-appearance" : "none",
|
|
|
|
/* Flecha personalizada en SVG limpia y sutil */
|
|
"background-image" : "url(\"data:image/svg+xml;utf8,<svg fill='%238c92a4' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>\")",
|
|
"background-repeat" : "no-repeat",
|
|
"background-position" : "right 8px center",
|
|
"background-size" : "18px",
|
|
|
|
"&:hover" : {
|
|
"border-color" : "#606b7d",
|
|
"background-color" : "#181a22"
|
|
},
|
|
"&:focus" : {
|
|
"border-color" : "#8ca0ba",
|
|
"box-shadow" : "0 0 0 2px rgba(140, 160, 186, 0.25)"
|
|
},
|
|
/* Opciones dentro del desplegable */
|
|
option : {
|
|
"background-color" : "#13141a",
|
|
"color" : "#e0ded3",
|
|
"padding" : "8px"
|
|
}
|
|
|
|
},
|
|
|
|
".inspector-hud" : {
|
|
"position" : "fixed",
|
|
"top" : "20px",
|
|
"left" : "20px",
|
|
"background-color" : "rgba(19, 20, 26, 0.85)",
|
|
"backdrop-filter" : "blur(6px)",
|
|
"border" : "1px solid #3d4450",
|
|
"border-radius" : "6px",
|
|
"padding" : "12px 16px",
|
|
"color" : "#e0ded3",
|
|
"font-family" : "monospace",
|
|
"font-size" : "0.85rem",
|
|
"pointer-events" : "none",
|
|
"z-index" : "100",
|
|
"display" : "flex",
|
|
"flex-direction" : "column",
|
|
"gap" : "6px",
|
|
|
|
".hud-title" : {
|
|
"color" : "#00bcd4",
|
|
"font-weight" : "bold",
|
|
"letter-spacing" : "1px",
|
|
"margin-bottom" : "4px"
|
|
},
|
|
".hud-row" : {
|
|
"display" : "flex",
|
|
"justify-content" : "space-between",
|
|
"gap" : "12px",
|
|
"b" : {
|
|
"color" : "#ffeb3b"
|
|
}
|
|
},
|
|
".hud-controls-hint" : {
|
|
"color" : "#8c92a4",
|
|
"font-size" : "0.75rem",
|
|
"margin-top" : "6px",
|
|
"border-top" : "1px solid #2d333f",
|
|
"padding-top" : "6px"
|
|
}
|
|
}
|
|
|
|
},
|
|
...(typeof custom_styles == "undefined" ? {} : custom_styles)
|
|
}; |