Thanks for the great work!
I see something like this:
https://ibb.co/XVtJ8jP
https://ibb.co/yPxf1NB
https://ibb.co/nrKL4DD
"Enhanced Textures" is to let the choice to the user if he want to install the new "planetTexture" files or keep the vanilla textures for the default planets.
I like this very simple and dark design which is matching with the SFS global design.
I imagined the tree to be able to accommodate others objects like stars and galaxies. (We never know how the both pack and game will evolve in the future.)
Get the HTML file below to try the tree box menu. I wrote this example in HTML for illustration purposes, but may be this language is not adapted to make functional trees.
ACSS-features-selection-demo.html
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root {
--padding-value: 19.85px;
}
body {
background-color: black;
color: white;
font-family: "Arial";
}
ul, #list {
list-style-type: none;
}
#list {
margin: 0;
padding: 0;
}
.caret::before {
content: "\25B6";
color: white;
display: inline-block;
margin-right: 4px;
}
.caret-down::before {
transform: rotate(90deg);
}
.box {
cursor: pointer;
user-select: none;
}
.box::before {
content: "\2610";
color: white;
display: inline-block;
margin-right: 6px;
}
.check-box::before {
content: "\2611";
color: white;
}
.grey-box::before {
content: "\2611";
color: grey;
display: inline-block;
margin-right: 6px;
}
.nested {
display: none;
padding-left: 20px;
}
.active {
display: block;
}
</style>
</head>
<body>
<h1><center>ACSS</center></h1>
<h2><center>SFS Planet Pack</center></h2>
<h3><center>Version 1.2.3 (SFS 1.5.6+)</center></h3>
<p>Features selection:</p>
<ul id="list">
<li><span class="caret"></span><span class="box">Objects</span>
<ul class="nested">
<li><span class="caret"></span><span class="box">Milky Way (Sagittarius A)</span>
<ul class="nested">
<li><span class="caret"></span><span class="grey-box">Solar System (Sun)</span>
<ul class="nested">
<li><span class="caret"></span><span class="box">Planets</span>
<ul class="nested">
<li><span class="box" style="padding-left: var(--padding-value)">Mercury</span><li>
<li><span class="box" style="padding-left: var(--padding-value)">Venus</span><li>
<li><span class="caret"></span><span class="grey-box">Earth</span>
<ul class="nested">
<li><span class="box" style="padding-left: var(--padding-value)">Moon</span><li>
</ul>
</li>
<li><span class="caret"></span><span class="box">Mars</span>
<ul class="nested">
<li><span class="box" style="padding-left: var(--padding-value)">Phobos</span><li>
<li><span class="box" style="padding-left: var(--padding-value)">Deimos</span><li>
</ul>
</li>
<li><span class="caret"></span><span class="box">Jupiter</span>
<ul class="nested">
<li><span class="box" style="padding-left: var(--padding-value)">Io</span><li>
<li><span class="box" style="padding-left: var(--padding-value)">Europa</span><li>
<li><span class="box" style="padding-left: var(--padding-value)">Ganymede</span><li>
<li><span class="box" style="padding-left: var(--padding-value)">Callisto</span><li>
<li><span class="box" style="padding-left: var(--padding-value)">etc...</span><li>
</ul>
</li>
<li><span class="box" style="padding-left: var(--padding-value)">etc...</span><li>
</ul>
</li>
<li><span class="caret"></span><span class="box">Dwarf Planets</span>
<ul class="nested">
<li><span class="caret"></span><span class="box">Pluton</span>
<ul class="nested">
<li><span class="box" style="padding-left: var(--padding-value)">Charon</span><li>
<li><span class="box" style="padding-left: var(--padding-value)">Nix</span><li>
<li><span class="box" style="padding-left: var(--padding-value)">Hydra</span><li>
</ul>
</li>
<li><span class="box" style="padding-left: var(--padding-value)">Ceres</span><li>
<li><span class="box" style="padding-left: var(--padding-value)">Eris</span><li>
<li><span class="box" style="padding-left: var(--padding-value)">Haumea</span><li>
<li><span class="box" style="padding-left: var(--padding-value)">etc...</span><li>
</ul>
</li>
<li><span class="caret"></span><span class="box">Asteroids</span>
<ul class="nested">
<li><span class="box" style="padding-left: var(--padding-value)">10 Hygiea</span><li>
<li><span class="box" style="padding-left: var(--padding-value)">101955 Bennu</span><li>
<li><span class="box" style="padding-left: var(--padding-value)">107 Camilla</span><li>
<li><span class="box" style="padding-left: var(--padding-value)">etc...</span><li>
</ul>
</li>
<li><span class="caret"></span><span class="box">Comets</span>
<ul class="nested">
<li><span class="box" style="padding-left: var(--padding-value)">C/1995 O1 (Hale–Bopp)</span><li>
<li><span class="box" style="padding-left: var(--padding-value)">19P/Borrelly</span><li>
<li><span class="box" style="padding-left: var(--padding-value)">1P/Halley</span><li>
<li><span class="box" style="padding-left: var(--padding-value)">etc...</span><li>
</ul>
</li>
<li><span class="box" style="padding-left: var(--padding-value)">etc...</span><li>
</ul>
</li>
<li><span class="caret"></span><span class="box">Alpha Centauri (A)</span>
<ul class="nested">
<li><span class="box" style="padding-left: var(--padding-value)">Alpha Centauri B</span><li>
<li><span class="caret"></span><span class="box">Proxima Centauri</span>
<ul class="nested">
<li><span class="box" style="padding-left: var(--padding-value)">Proxima b</span><li>
<li><span class="box" style="padding-left: var(--padding-value)">Proxima c</span><li>
</ul>
</li>
</ul>
</li>
<li><span class="caret"></span><span class="box">1SWASP J1407</span>
<ul class="nested">
<li><span class="box" style="padding-left: var(--padding-value)">1SWASP J1407 b</span><li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><span class="box" style="padding-left: var(--padding-value)">Day/Night Cycle</span><li>
<li><span class="box" style="padding-left: var(--padding-value)">Enhanced Textures</span><li>
</ul>
<!--
<li><span class="caret"></span><span class="box">Object</span>
<ul class="nested">
<li>Subobject<li>
</ul>
</li>
<li><span class="box" style="padding-left: var(--padding-value)">Object</span><li>
-->
<script>
var carets = document.getElementsByClassName("caret");
var boxes = document.getElementsByClassName("box");
var i;
for (i = 0; i < carets.length; i++) {
carets[i].addEventListener("click", function() {
this.classList.toggle("caret-down");
this.parentElement.querySelector(".nested").classList.toggle("active");
});
}
for (i = 0; i < boxes.length; i++) {
boxes[i].addEventListener("click", function() {
this.classList.toggle("check-box");
});
}
</script>
</body>
</html>
Also, I suggest to rename the comets by their real names, e.g. "1P/Halley" instead of "Halley's comet", "C/1995 O1 (Hale-Bopp)" instead of "Comet Hale-Bopp", etc...
Thanks for paying attention.