make settings categories toggleable

2 files changed, 142 insertions, 106 deletions

diff --git a/src/app/css/popups.css b/src/app/css/popups.css
index b56749e..b63bb1d 100644
--- a/src/app/css/popups.css
+++ b/src/app/css/popups.css
@@ -87,6 +87,20 @@
 
 /* settings popup { */
 
+.popup .options details {
+	opacity: 1.0;
+	transition: 0.15s opacity ease-in-out;
+}
+
+.popup .options details:not([open]) {
+	opacity: 0.5;
+}
+
+.popup .options details summary {
+	cursor: pointer;
+	list-style-type: none;
+}
+
 .popup .options {
 	color: white;
 	margin: calc(var(--padding) / 2);
diff --git a/src/app/index.html b/src/app/index.html
index 4bd4d92..810c205 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -44,130 +44,152 @@
 				</button>
 			</div>
 			<div class="options">
-				<div class="title">
-					<img src="icons/game.png">
-					<h2>%%gui.settings.title.ns%%</h2>
-				</div>
-				<div class="option" name="nsargs">
-					<div class="text">
-						%%gui.settings.nsargs.title%%
-						<div class="desc">
-							%%gui.settings.nsargs.desc%%
+				<details open>
+					<summary>
+						<div class="title">
+							<img src="icons/game.png">
+							<h2>%%gui.settings.title.ns%%</h2>
 						</div>
-					</div>
-					<div class="actions">
-						<input>
-					</div>
-				</div>
-				<div class="title">
-					<img src="icons/language.png">
-					<h2>%%gui.settings.title.language%%</h2>
-				</div>
-				<div class="option" name="autolang">
-					<div class="text">
-						%%gui.settings.autolang.title%%
-						<div class="desc">
-							%%gui.settings.autolang.desc%%
+					</summary>
+					<div class="option" name="nsargs">
+						<div class="text">
+							%%gui.settings.nsargs.title%%
+							<div class="desc">
+								%%gui.settings.nsargs.desc%%
+							</div>
 						</div>
-					</div>
-					<div class="actions">
-						<button class="switch off"></button>
-					</div>
-				</div>
-				<div class="option" name="forcedlang">
-					<div class="text">
-						%%gui.settings.forcedlang.title%%
-						<div class="desc">
-							%%gui.settings.forcedlang.desc%%
+						<div class="actions">
+							<input>
 						</div>
 					</div>
-					<div class="actions">
-						<select onchange="Settings.switch(document.querySelector(`.option[name='autolang'] button`), false)">
-							<option></option>
-						</select>
-					</div>
-				</div>
-				<div class="title">
-					<img src="icons/updates.png">
-					<h2>%%gui.settings.title.updates%%</h2>
-				</div>
-				<div class="option" name="autoupdate">
-					<div class="text">
-						%%gui.settings.autoupdate.title%%
-						<div class="desc">
-							%%gui.settings.autoupdate.desc%%
+				</details>
+
+				<details open>
+					<summary>
+						<div class="title">
+							<img src="icons/language.png">
+							<h2>%%gui.settings.title.language%%</h2>
 						</div>
-					</div>
-					<div class="actions">
-						<button class="switch on"></button>
-					</div>
-				</div>
-				<div class="option" name="nsupdate">
-					<div class="text">
-						%%gui.settings.nsupdate.title%%
-						<div class="desc">
-							%%gui.settings.nsupdate.desc%%
+					</summary>
+
+					<div class="option" name="autolang">
+						<div class="text">
+							%%gui.settings.autolang.title%%
+							<div class="desc">
+								%%gui.settings.autolang.desc%%
+							</div>
 						</div>
-					</div>
-					<div class="actions">
-						<button class="switch on"></button>
-					</div>
-				</div>
-				<div class="option" name="excludes" type="array">
-					<div class="text">
-						%%gui.settings.excludes.title%%
-						<div class="desc">
-							%%gui.settings.excludes.desc%%
+						<div class="actions">
+							<button class="switch off"></button>
 						</div>
 					</div>
-					<div class="actions">
-						<input type="text" class="disable-when-installing">
+					<div class="option" name="forcedlang">
+						<div class="text">
+							%%gui.settings.forcedlang.title%%
+							<div class="desc">
+								%%gui.settings.forcedlang.desc%%
+							</div>
+						</div>
+						<div class="actions">
+							<select onchange="Settings.switch(document.querySelector(`.option[name='autolang'] button`), false)">
+								<option></option>
+							</select>
+						</div>
 					</div>
-				</div>
-				<div class="buttons">
-					<div class="text">
-						%%gui.settings.updatebuttons.title%%
-						<div class="desc">
-							%%gui.settings.updatebuttons.desc%%
+				</details>
+
+				<details open>
+					<summary>
+						<div class="title">
+							<img src="icons/updates.png">
+							<h2>%%gui.settings.title.updates%%</h2>
+						</div>
+					</summary>
+
+					<div class="option" name="autoupdate">
+						<div class="text">
+							%%gui.settings.autoupdate.title%%
+							<div class="desc">
+								%%gui.settings.autoupdate.desc%%
+							</div>
+						</div>
+						<div class="actions">
+							<button class="switch on"></button>
 						</div>
 					</div>
-					<div class="actions">
-						<button onclick="delete_request_cache()">%%gui.settings.updatebuttons.buttons.reset_cached_api_requests%%</button>
-						<button onclick="force_update_ns()" class="disable-when-installing">%%gui.settings.updatebuttons.buttons.force_northstar_reinstall%%</button>
-						<button onclick="delete_install_cache()" class="disable-when-installing">%%gui.settings.updatebuttons.buttons.force_delete_install_cache%%</button>
+					<div class="option" name="nsupdate">
+						<div class="text">
+							%%gui.settings.nsupdate.title%%
+							<div class="desc">
+								%%gui.settings.nsupdate.desc%%
+							</div>
+						</div>
+						<div class="actions">
+							<button class="switch on"></button>
+						</div>
 					</div>
-				</div>
-				<div class="title">
-					<img src="icons/settings.png">
-					<h2>%%gui.settings.title.misc%%</h2>
-				</div>
-				<div class="option" name="originkill">
-					<div class="text">
-						%%gui.settings.originkill.title%%
-						<div class="desc">
-							%%gui.settings.originkill.desc%%
+					<div class="option" name="excludes" type="array">
+						<div class="text">
+							%%gui.settings.excludes.title%%
+							<div class="desc">
+								%%gui.settings.excludes.desc%%
+							</div>
+						</div>
+						<div class="actions">
+							<input type="text" class="disable-when-installing">
 						</div>
 					</div>
-					<div class="actions">
-						<button class="switch off"></button>
+					<div class="buttons">
+						<div class="text">
+							%%gui.settings.updatebuttons.title%%
+							<div class="desc">
+								%%gui.settings.updatebuttons.desc%%
+							</div>
+						</div>
+						<div class="actions">
+							<button onclick="delete_request_cache()">%%gui.settings.updatebuttons.buttons.reset_cached_api_requests%%</button>
+							<button onclick="force_update_ns()" class="disable-when-installing">%%gui.settings.updatebuttons.buttons.force_northstar_reinstall%%</button>
+							<button onclick="delete_install_cache()" class="disable-when-installing">%%gui.settings.updatebuttons.buttons.force_delete_install_cache%%</button>
+						</div>
 					</div>
-				</div>
-				<div class="buttons">
-					<div class="text">
-						%%gui.settings.miscbuttons.title%%
-						<div class="desc">
-							%%gui.settings.miscbuttons.desc%%
+				</details>
+
+				<details open>
+					<summary>
+						<div class="title">
+							<img src="icons/settings.png">
+							<h2>%%gui.settings.title.misc%%</h2>
+						</div>
+					</summary>
+
+					<div class="option" name="originkill">
+						<div class="text">
+							%%gui.settings.originkill.title%%
+							<div class="desc">
+								%%gui.settings.originkill.desc%%
+							</div>
+						</div>
+						<div class="actions">
+							<button class="switch off"></button>
 						</div>
 					</div>
-					<div class="actions">
-						<button onclick="relaunch()">%%gui.settings.miscbuttons.buttons.restart_viper%%</button>
-						<button onclick="reset_config()">%%gui.settings.miscbuttons.buttons.reset_config%%</button>
-						<button onclick="open_gamepath()">%%gui.settings.miscbuttons.buttons.open_gamepath%%</button>
-						<button onclick="kill_game()">%%gui.settings.miscbuttons.buttons.force_quit_game%%</button>
-						<button onclick="kill_origin()">%%gui.settings.miscbuttons.buttons.force_quit_origin%%</button>
-						<button onclick="setpath()" class="disable-when-installing">%%gui.settings.miscbuttons.buttons.change_gamepath%%</button>
+					<div class="buttons">
+						<div class="text">
+							%%gui.settings.miscbuttons.title%%
+							<div class="desc">
+								%%gui.settings.miscbuttons.desc%%
+							</div>
+						</div>
+						<div class="actions">
+							<button onclick="relaunch()">%%gui.settings.miscbuttons.buttons.restart_viper%%</button>
+							<button onclick="reset_config()">%%gui.settings.miscbuttons.buttons.reset_config%%</button>
+							<button onclick="open_gamepath()">%%gui.settings.miscbuttons.buttons.open_gamepath%%</button>
+							<button onclick="kill_game()">%%gui.settings.miscbuttons.buttons.force_quit_game%%</button>
+							<button onclick="kill_origin()">%%gui.settings.miscbuttons.buttons.force_quit_origin%%</button>
+							<button onclick="setpath()" class="disable-when-installing">%%gui.settings.miscbuttons.buttons.change_gamepath%%</button>
+						</div>
 					</div>
-				</div>
+				</details>
 			</div>
 		</div>