aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/app/css/popups.css14
-rw-r--r--src/app/index.html234
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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-24 10:24:14 +0000