improve blog editor dark theme

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

View file

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