fix dark theme styling and button widths

This commit is contained in:
2022-03-07 12:02:03 +02:00
parent 5ab47cf742
commit 67c727716c
6 changed files with 25 additions and 21 deletions

View File

@ -170,6 +170,7 @@
--background: var(--moon-gray);
--button-background: var(--light-gray);
--button-border: var(--near-black);
--circle-background: var(--light-gray);
--circle-small-hover-background: var(--white);
@ -180,6 +181,8 @@
--capsule-background: var(--light-gray);
--list-background: var(--light-gray);
--text-color-normal: var(--near-black);
--text-color-gray: var(--mid-gray);
--text-color-light-gray: var(--moon-gray);
@ -191,20 +194,15 @@
/* DARK THEME VARIABLES */
/*--background-dark: var(--dark-gray);*/
--background-dark: #222;
--button-background-dark: var(--mid-gray);
/*--capsule-background-dark: var(--light-gray);*/
--button-border-dark: var(--silver);
--capsule-background-dark: #333;
--circle-background-dark: var(--silver);
--circle-small-hover-background-dark: var(--moon-gray);
--list-background-dark: #333;
}
/* we need to add shades for each accent colour
*
* --info-100
* --info-200
* --info-300 -> var(--blue)
* --info-400
* --info-500
*/

View File

@ -186,7 +186,7 @@ body {
*/
.button {
border: 1px solid var(--near-black);
border: 1px solid var(--button-border);
border-radius: var(--border-radius-2);
/* Needed to render inputs & buttons of equal width */
-moz-box-sizing: border-box;
@ -199,7 +199,8 @@ body {
text-decoration: none;
font-size: var(--font-size-5);
font-family: var(--sans-serif);
width: 80%;
/* width: 80%; */
width: 16rem;
margin-top: 5px;
margin-bottom: 5px;
}
@ -344,7 +345,7 @@ body {
color: var(--text-color);
margin: 0;
font-size: var(--font-size-5);
padding-bottom: 0.3rem;
padding-bottom: 0.5rem;
}
.container {
@ -613,11 +614,13 @@ html {
--background: var(--background);
--button-background: var(--button-background);
--button-border: var(--button-border);
--button-text-color: var(--text-color-normal);
--button-text-hover-color: var(--text-color-normal);
--circle-background: var(--circle-background);
--circle-small-hover-background: var(--circle-small-hover-background);
--icon-color: var(--icon-normal);
--list-background: var(--list-background);
--nav-icon-color: var(--nav-icon-color);
--text-color: var(--text-color-normal);
}
@ -625,12 +628,14 @@ html {
html[data-theme='dark'] {
--background: var(--background-dark);
--button-background: var(--button-background-dark);
--button-border: var(--button-border-dark);
--button-text-color: var(--text-color-light);
--button-text-hover-color: var(--text-color-normal);
--capsule-background: var(--capsule-background-dark);
--circle-background: var(--circle-background-dark);
--circle-small-hover-background: var(--circle-small-hover-background-dark);
--icon-color: var(--icon-light);
--list-background: var(--list-background-dark);
--nav-icon-color: var(--nav-icon-color-light);
--text-color: var(--text-color-light);
--text-color-gray: var(--text-color-light-gray);
@ -802,7 +807,7 @@ form {
.link {
text-decoration: none;
/* color: var(--font-near-black); */
color: var(--text-color);
}
.link:hover {
@ -841,6 +846,7 @@ form {
}
.list-item {
background-color: var(--list-background);
display: grid;
padding: 1rem;
border-bottom-color: var(--light-silver);

View File

@ -4,8 +4,8 @@
<div class="card center">
<div class="capsule capsule-container border-warning center-text">
<p class="card-text" style="font-size: var(--font-size-4);">Sbot Inactive</p>
<p>{{ unavailable_msg }}</p>
<p class="card-text">Visit the <strong><a href="/settings/scuttlebutt" class="link font-near-black">Scuttlebutt settings menu</a></strong> to start the Sbot and then try again.</p>
<p class="card-text">{{ unavailable_msg }}</p>
<p class="card-text">Visit the <strong><a href="/settings/scuttlebutt" class="link">Scuttlebutt settings menu</a></strong> to start the Sbot and then try again.</p>
</div>
</div>
{%- endblock card -%}

View File

@ -11,11 +11,11 @@
{%- set name = peer['name'] %}
{%- endif %}
<li>
<a class="list-item link light-bg" href="/scuttlebutt/profile?public_key={{ peer['id'] }}">
<a class="list-item link" href="/scuttlebutt/profile?public_key={{ peer['id'] }}">
{%- if peer['blob_path'] and peer['blob_exists'] == "true" %}
<img id="peerImage" class="icon list-icon" src="/blob/{{ peer['blob_path'] }}" alt="{{ name }}'s profile image">
{%- else %}
<img id="peerImage" class="icon list-icon" src="/icons/user.svg" alt="Placeholder profile image">
<img id="peerImage" class="icon icon-active list-icon" src="/icons/user.svg" alt="Placeholder profile image">
{%- endif %}
<p id="peerName" class="font-normal list-text">{{ name }}</p>
<label class="label-small label-ellipsis list-label font-gray" for="peerName" title="{{ name }}'s Public Key">{{ peer['id'] }}</label>

View File

@ -19,7 +19,7 @@
<img id="profilePicture" class="icon-large" src="/blob/{{ blob_path }}" title="Profile picture" alt="Profile picture">
{% else %}
{# render a placeholder profile picture (icon) #}
<img id="profilePicture" class="icon" src="/icons/user.svg" title="Profile picture" alt="Profile picture">
<img id="profilePicture" class="icon icon-active" src="/icons/user.svg" title="Profile picture" alt="Profile picture">
{% endif %}
<!-- name, public key & description -->
<p id="profileName" class="card-text" title="Name">{{ name }}</p>

View File

@ -3,7 +3,7 @@
{# ASSIGN VARIABLES #}
{# ---------------- #}
<!-- SSB PROFILE UPDATE FORM -->
<div class="card center">
<div class="card card-wide center">
<form id="profileInfo" class="center" enctype="multipart/form-data" action="/scuttlebutt/profile/update" method="post">
<div style="display: flex; flex-direction: column">
<label for="name" class="label-small font-gray">NAME</label>
@ -11,7 +11,7 @@
<label for="description" class="label-small font-gray">DESCRIPTION</label>
<textarea id="description" class="message-input" style="margin-bottom: 1rem;" name="new_description" placeholder="Write a description for your profile...">{{ description }}</textarea>
<label for="image" class="label-small font-gray">IMAGE</label>
<input type="file" id="fileInput" name="image">
<input type="file" id="fileInput" class="font-normal" name="image">
</div>
<input type="hidden" name="id" value="{{ id }}">
<input type="hidden" name="current_name" value="{{ name }}">