ari/arimelody-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improve blog editor dark theme

Browse source
This commit is contained in:
ari melody 2025-11-08 15:26:56 +00:00
parent 84e40b837a
commit 0a75216aaf
Signed by: ari
GPG key ID: CF99829C92678188
2 changed files with 26 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

32
admin/static/edit-blog.css
View file

@ -6,8 +6,10 @@ input[type="text"] {
border-radius: 4px; border-radius: 4px;
outline: none; outline: none;
color: var(--fg-3); color: var(--fg-3);
background-color: var(--bg-1); background-color: var(--bg-2);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transition: background-color .1s ease-out, color .1s ease-out;
} }
#blogpost { #blogpost {
@ -15,10 +17,10 @@ input[type="text"] {
padding: 1.5em; padding: 1.5em;
border-radius: 8px; border-radius: 8px;
background-color: var(--bg-2); background-color: var(--bg-1);
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
transition: background .1s ease-out, color .1s ease-out; transition: background-color .1s ease-out, color .1s ease-out;
} }
#blogpost label { #blogpost label {
@ -56,7 +58,8 @@ input[type="text"] {
color: var(--fg-3); color: var(--fg-3);
outline: none; outline: none;
cursor: pointer; cursor: pointer;
transition: background .1s ease-out, border-color .1s ease-out;
transition: background-color .1s ease-out, color .1s ease-out, border-color .1s ease-out;
/*position: relative; outline: none;*/ /*position: relative; outline: none;*/
white-space: pre-wrap; overflow-wrap: break-word; white-space: pre-wrap; overflow-wrap: break-word;
@ -78,9 +81,11 @@ input[type="text"] {
font-size: inherit; font-size: inherit;
border-radius: 4px; border-radius: 4px;
border: none; border: none;
background-color: var(--bg-1); background-color: var(--bg-2);
color: var(--fg-3); color: var(--fg-3);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transition: background-color .1s ease-out, color .1s ease-out;
} }
#blogpost textarea { #blogpost textarea {
@ -90,11 +95,13 @@ input[type="text"] {
display: block; display: block;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
background-color: var(--bg-1); background-color: var(--bg-2);
color: var(--fg-3); color: var(--fg-3);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
resize: vertical; resize: vertical;
outline: none; outline: none;
transition: background-color .1s ease-out, color .1s ease-out;
} }
#blogpost #description { #blogpost #description {
@ -107,8 +114,10 @@ input[type="text"] {
border: none; border: none;
border-radius: 10em; border-radius: 10em;
color: var(--fg-3); color: var(--fg-3);
background-color: var(--bg-1); background-color: var(--bg-2);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transition: background-color .1s ease-out, color .1s ease-out;
} }
#blogpost .social-post-details { #blogpost .social-post-details {
@ -120,3 +129,12 @@ input[type="text"] {
#blogpost .blog-actions { #blogpost .blog-actions {
margin-top: 1em; margin-top: 1em;
} }
@media (prefers-color-scheme: dark) {
input[type="text"],
#blogpost #publish-date,
#blogpost textarea,
#blogpost select {
background-color: var(--bg-0);
}
}

2
admin/templates/html/edit-blog.html
View file

@ -110,7 +110,7 @@
This action is <strong>irreversible</strong>. This action is <strong>irreversible</strong>.
You will be prompted to confirm this decision. You will be prompted to confirm this decision.
</p> </p>
<button class="delete" id="delete">Delete Release</button> <button class="delete" id="delete">Delete Post</button>
</div> </div>
</main> </main>