fix dark theme styling and button widths
This commit is contained in:
@ -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
|
||||
*/
|
||||
|
@ -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);
|
||||
|
@ -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 -%}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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 }}">
|
||||
|
Reference in New Issue
Block a user