Tweak settings page design

This commit is contained in:
spikecodes 2021-12-27 13:43:44 -08:00
parent 90fa0b5496
commit 3188f9d8e7
No known key found for this signature in database
GPG Key ID: 004CECFF9B463BCB
2 changed files with 19 additions and 12 deletions

View File

@ -488,7 +488,7 @@ aside {
/* Sorting and Search */
select, #search, #sort_options, #inside, #searchbox > *, #sort_submit {
height: 40px;
height: 38px;
}
.search_label {
@ -505,7 +505,7 @@ select {
select, #search {
border: none;
padding: 0 15px;
padding: 0 10px;
appearance: none;
-webkit-appearance: none;
@ -593,6 +593,7 @@ button.submit:hover > svg { stroke: var(--accent); }
#sort_options, footer > a {
border-radius: 5px;
align-items: center;
box-shadow: var(--shadow);
background: var(--outside);
display: flex;
@ -719,7 +720,7 @@ a.search_subreddit:hover {
}
.post_score {
padding-top: 16px;
padding-top: 19px;
padding-left: 12px;
font-size: 13px;
font-weight: bold;
@ -1180,12 +1181,10 @@ summary.comment_data {
color: var(--accent);
}
.prefs {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 20px;
background: var(--post);
border-radius: 5px;
@ -1198,11 +1197,19 @@ summary.comment_data {
width: 100%;
height: 35px;
align-items: center;
margin-top: 10px;
margin-top: 7px;
}
.prefs > p {
.prefs legend {
font-weight: 500;
border-bottom: 1px solid var(--highlighted);
font-size: 18px;
padding-bottom: 10px;
}
.prefs legend:not(:first-child) {
padding-top: 10px;
margin-top: 15px;
}
.prefs select {

View File

@ -11,14 +11,14 @@
<div id="settings">
<form action="/settings" method="POST">
<div class="prefs">
<p>Appearance</p>
<legend>Appearance</legend>
<div id="theme">
<label for="theme">Theme:</label>
<select name="theme">
{% call utils::options(prefs.theme, ["system", "light", "dark", "black", "dracula", "nord", "laserwave", "violet", "gold", "rosebox"], "system") %}
</select>
</div>
<p>Interface</p>
<legend>Interface</legend>
<div id="front_page">
<label for="front_page">Front page:</label>
<select name="front_page">
@ -36,7 +36,7 @@
<input type="hidden" value="off" name="wide">
<input type="checkbox" name="wide" {% if prefs.wide == "on" %}checked{% endif %}>
</div>
<p>Content</p>
<legend>Content</legend>
<div id="post_sort">
<label for="post_sort" title="Applies only to subreddit feeds">Default subreddit post sort:</label>
<select name="post_sort">
@ -79,7 +79,7 @@
</form>
{% if prefs.subscriptions.len() > 0 %}
<div class="prefs" id="settings_subs">
<p>Subscribed Feeds</p>
<legend>Subscribed Feeds</legend>
{% for sub in prefs.subscriptions %}
<div>
{% let feed -%}
@ -94,7 +94,7 @@
{% endif %}
{% if !prefs.filters.is_empty() %}
<div class="prefs" id="settings_filters">
<p>Filtered Feeds</p>
<legend>Filtered Feeds</legend>
{% for sub in prefs.filters %}
<div>
{% let feed -%}