Add apply button to scheme swap, make it easier to read

This commit is contained in:
floppydiskette 2024-07-12 16:58:31 +01:00
parent 79ba947148
commit 1f9dde81d4
Signed by: fwoppydwisk
SSH key fingerprint: SHA256:Hqn452XQ1ETzUt/FthJu6+OFkS4NBxCv5VQSEvuk7CE
3 changed files with 13 additions and 3 deletions

View file

@ -296,6 +296,7 @@ input.file {
table.form tr td textarea, table.form tr td textarea,
table.form tr td input, table.form tr td input,
table.form tr td button, table.form tr td button,
button,
form.import input::file-selector-button, form.import input::file-selector-button,
form.import button { form.import button {
background-color: var(--background); background-color: var(--background);
@ -314,6 +315,7 @@ table.form tr td button {
} }
form.import button:hover, form.import button:hover,
button:hover,
form.import input::file-selector-button:hover, form.import input::file-selector-button:hover,
table.form tr td button:hover { table.form tr td button:hover {
color: var(--background); color: var(--background);
@ -671,6 +673,12 @@ a:hover img.navbar-icon {
} }
.footer p { .footer p {
vertical-align: middle;
margin: 0; margin: 0;
line-height: 1.2; line-height: 1.2;
} }
.footer button,
.footer select{
padding: 5px 10px;
}

View file

@ -46,7 +46,8 @@ function cookieExists(cname) {
* Swaps the colorscheme * Swaps the colorscheme
* @param {string} scheme Color scheme ID * @param {string} scheme Color scheme ID
*/ */
function swapScheme(scheme) { function swapScheme() {
let scheme = document.getElementById('scheme-selector').value ;
setCookie("colorscheme", scheme, 90); setCookie("colorscheme", scheme, 90);
document.getElementById("css-colorscheme").href = `/css/colorschemes/${scheme}.css`; document.getElementById("css-colorscheme").href = `/css/colorschemes/${scheme}.css`;
console.log(`Set colorscheme to ${getCookie("colorscheme")}`) console.log(`Set colorscheme to ${getCookie("colorscheme")}`)

View file

@ -62,7 +62,7 @@ class="pixel" alt="Wiby - Search Engine for the Classic Web">
href="https://github.com/floppydisk05/diskfloppy.me">Source</a>, href="https://github.com/floppydisk05/diskfloppy.me">Source</a>,
Served by {{ gethostname() }}<br> Served by {{ gethostname() }}<br>
<label for="scheme-selector">Color Scheme:</label> <label for="scheme-selector">Color Scheme:</label>
<select onchange="swapScheme(this.value)" id="scheme-selector"> <select id="scheme-selector">
<optgroup label="Misc"> <optgroup label="Misc">
<option value="c64">C64</option> <option value="c64">C64</option>
</optgroup> </optgroup>
@ -95,7 +95,8 @@ class="pixel" alt="Wiby - Search Engine for the Classic Web">
<option value="slate">Slate</option> <option value="slate">Slate</option>
<option value="solarized-dark">Solarized Dark</option> <option value="solarized-dark">Solarized Dark</option>
</optgroup> </optgroup>
</select></p> </select>
<button onclick="swapScheme()">Apply</button></p>
</div> </div>
</div> <!-- footer --> </div> <!-- footer -->
</div> <!-- page --> </div> <!-- page -->