improve blog editor dark theme
This commit is contained in:
parent
84e40b837a
commit
0a75216aaf
2 changed files with 26 additions and 8 deletions
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue