add some styling to the preference page

This commit is contained in:
orenom
2021-05-13 17:52:58 +02:00
parent df046c5335
commit 220136bae6
2 changed files with 38 additions and 24 deletions
+21 -9
View File
@@ -409,18 +409,30 @@ module.exports = function(redis) {
<h4>Preferences</h4>
<form method="POST" action="/preferences?back=${back}">
<div class="setting">
<label for="theme">Theme:</label>
<select id="theme" name="theme">
<option value="" ${(!user_preferences.theme || user_preferences.theme == '' ? 'selected' : '')}>White</option>
<option value="dark" ${(user_preferences.theme == 'dark' ? 'selected' : '')}>Dark (experimental)</option>
</select>
<div class="label">
<label for="theme">Theme:</label>
</div>
<div class="option">
<select id="theme" name="theme">
<option value="" ${(!user_preferences.theme || user_preferences.theme == '' ? 'selected' : '')}>White</option>
<option value="dark" ${(user_preferences.theme == 'dark' ? 'selected' : '')}>Dark (experimental)</option>
</select>
</div>
</div>
<div class="setting">
<label for="default_lang">Default language:</label>
${lang_select}
<div class="label">
<label for="default_lang">Default language:</label>
<br>
<small>When you change the default language and visit the Wikiless without the lang parameter in the URL, the page will load with a language from this setting.</small>
</div>
<div class="option">
${lang_select}
</div>
</div>
<div class="bottom">
<small class="notice">Preferences are stored client-side using cookies without any personal information.</small>
<input type="submit" value="Save preferences">
</div>
<small class="notice">Preferences are stored client-side using cookies without any personal information.</small>
<input type="submit" value="Save preferences">
</form>
</div>
</body>
+17 -15
View File
@@ -7,13 +7,6 @@
transition: 0.2113s all;
cursor: default;
}
details[open] {
width: 100%;
}
details[open] #preferences {
opacity: 1;
box-shadow: 0px 0px 6px 2px #3e1900;
}
#preferences h4 {
color: var(--light-white);
padding: 31px 0px 0px 0px;
@@ -28,8 +21,13 @@ details[open] #preferences {
padding: 0px 0px 15px 0px;
font-size: 1rem;
}
#preferences form #pageReload.setting.disabled {
color: gray;
#preferences form .setting .label {
float: left;
width: 70%;
}
#preferences form .setting .option {
float: right;
width: 30%;
}
#preferences form select {
padding: 3px;
@@ -46,11 +44,14 @@ details[open] #preferences {
#preferences form .setting select {
float: right;
}
#preferences form .setting #price_size,
#preferences form .setting #auto_update {
max-width: 60px;
margin: -20px 0px;
padding: 4px;
#preferences form .bottom {
float: left;
width: 100%;
}
#preferences form .bottom input {
float: left;
width: 100%;
}
#preferences form small {
font-size: x-small;
@@ -67,7 +68,8 @@ details[open] #preferences {
border: 1px solid white;
font-size: 1rem;
}
#preferences form input[type="submit"]:hover, #preferences form input[type="submit"]:focus {
#preferences form input[type="submit"]:hover,
#preferences form input[type="submit"]:focus {
background: white;
color: black;
cursor: pointer;