Leilukin
/
leilukin-tumbleblog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use custom properties for stylesheet

This commit is contained in:
Helen Chong 2024-06-20 23:19:47 +08:00
parent 4f167f0177
commit 88be453ada
1 changed files with 90 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
themes/leilukin/stylesheets/all.css
View File

@ -19,20 +19,37 @@
font-weight: 700; font-weight: 700;
src: url('../../../fonts/lexend-v19-latin-700.woff2') format('woff2'); src: url('../../../fonts/lexend-v19-latin-700.woff2') format('woff2');
} }
:root {
--clr-body-bg: #f7f5ed;
--clr-body-txt: #1f1f23;
--clr-content-bg: #fbfbf7;
--clr-pinned-bg: #fffddd;
--clr-highlight: #ffdd00;
--clr-border-main: #c6ccc8;
--clr-link-hover: #d94c7b;
--clr-tag: #208448;
--clr-tag-hover: #006428;
--clr-edit-btn: #39434d;
--clr-edit-btn-hover: #000;
--clr-delete-btn: #c04b4b;
--clr-delete-btn-hover: #af2d2d;
--clr-input-err: #ffdede;
--clr-white: #fff;
}
html { html {
font-size: 16px; font-size: 16px;
} }
*::selection { *::selection {
color: #1f1f23; color: var(--clr-body-txt);
background-color: #ffdd00; background-color: var(--clr-highlight);
} }
body { body {
font-family: "Lexend", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family: "Lexend", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 1rem; font-size: 1rem;
color: #1f1f23; color: var(--clr-body-txt);
line-height: 1.5; line-height: 1.5;
tab-size: 4; tab-size: 4;
background-color: #f7f5ed; background-color: var(--clr-body-bg);
margin: 2rem; margin: 2rem;
margin-inline-start: 16rem; margin-inline-start: 16rem;
min-width: 280px; min-width: 280px;
@ -108,8 +125,8 @@ small {
font-size: 0.75em; font-size: 0.75em;
} }
mark { mark {
color: #1f1f23; color: var(--clr-body-txt);
background-color: #ffdd00; background-color: var(--clr-highlight);
} }
del { del {
font: inherit; font: inherit;
@ -138,7 +155,7 @@ aside {
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 1rem; padding: 1rem;
background-color: #e5e2dc; background-color: #e5e2dc;
border-left: 2px solid #1f1f23; border-left: 2px solid var(--clr-body-txt);
} }
blockquote em, blockquote em,
aside em { aside em {
@ -228,15 +245,15 @@ dl dd {
ul.navigation { ul.navigation {
list-style: none; list-style: none;
box-sizing: border-box; box-sizing: border-box;
background-color: #fbfbf7; background-color: var(--clr-content-bg);
margin: 0rem 0rem 2rem 0rem; margin: 0rem 0rem 2rem 0rem;
padding: 0em; padding: 0em;
border: 1px solid #c6ccc8; border: 1px solid var(--clr-border-main);
border-radius: 0.5rem; border-radius: 0.5rem;
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
#ffffff 0em, var(--clr-white) 0em,
#fbfbf7 10em var(--clr-content-bg) 10em
); );
box-shadow: 0px 2px 4px 2px rgba(57,67,77,0.05); box-shadow: 0px 2px 4px 2px rgba(57,67,77,0.05);
} }
@ -283,7 +300,7 @@ ol.comments > li {
width: 100%; width: 100%;
margin: 0em; margin: 0em;
padding: 2rem 2rem 0rem 2rem; padding: 2rem 2rem 0rem 2rem;
border-bottom: 1px solid #c6ccc8; border-bottom: 1px solid var(--clr-border-main);
} }
ol.comments > li:last-child { ol.comments > li:last-child {
border-bottom: none; border-bottom: none;
@ -297,15 +314,15 @@ ol.comments > li.comment_form {
div#main > details { div#main > details {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
background-color: #fbfbf7; background-color: var(--clr-content-bg);
margin: 0rem 0rem 2rem 0rem; margin: 0rem 0rem 2rem 0rem;
padding: 0em; padding: 0em;
border: 1px solid #c6ccc8; border: 1px solid var(--clr-border-main);
border-radius: 0.5rem; border-radius: 0.5rem;
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
#ffffff 0em, var(--clr-white) 0em,
#fbfbf7 10em var(--clr-content-bg) 10em
); );
box-shadow: 0px 2px 4px 2px rgba(57,67,77,0.05); box-shadow: 0px 2px 4px 2px rgba(57,67,77,0.05);
} }
@ -333,16 +350,16 @@ table th {
padding: 0.5em; padding: 0.5em;
font: inherit; font: inherit;
font-weight: bold; font-weight: bold;
background-color: #39434d; background-color: var(--clr-edit-btn);
color: #ffffff; color: var(--clr-white);
border: 1px solid #39434d; border: 1px solid var(--clr-edit-btn);
vertical-align: middle; vertical-align: middle;
} }
table td { table td {
text-align: start; text-align: start;
padding: 0.5em; padding: 0.5em;
font: inherit; font: inherit;
border: 1px solid #39434d; border: 1px solid var(--clr-edit-btn);
vertical-align: middle; vertical-align: middle;
} }
form, fieldset { form, fieldset {
@ -377,9 +394,9 @@ select, input {
text-align: start; text-align: start;
font: inherit; font: inherit;
font-size: inherit; font-size: inherit;
color: #1f1f23; color: var(--clr-body-txt);
background-color: #ffffff; background-color: var(--clr-white);
border: 1px solid #c6ccc8; border: 1px solid var(--clr-border-main);
border-radius: 0em; border-radius: 0em;
} }
html[dir="ltr"] select { html[dir="ltr"] select {
@ -421,18 +438,18 @@ input[type="radio"]:checked {
background-repeat: no-repeat; background-repeat: no-repeat;
} }
select:focus, input:focus { select:focus, input:focus {
background-color: #ffffff; background-color: var(--clr-white);
border: 1px solid #d94c7b; border: 1px solid var(--clr-link-hover);
outline: #d94c7b solid 1px; outline: var(--clr-link-hover) solid 1px;
outline-offset: 0px; outline-offset: 0px;
} }
input::placeholder { input::placeholder {
color: #1f1f23; color: var(--clr-body-txt);
opacity: 1; opacity: 1;
} }
input.error, input.error,
input:invalid { input:invalid {
background-color: #ffdede; background-color: var(--clr-input-err);
} }
input#sidebar_search_field { input#sidebar_search_field {
display: inline; display: inline;
@ -447,17 +464,17 @@ textarea {
height: 20ex; height: 20ex;
font: inherit; font: inherit;
font-size: inherit; font-size: inherit;
color: #1f1f23; color: var(--clr-body-txt);
margin: 0.5em 0em; margin: 0.5em 0em;
padding: 0.5em; padding: 0.5em;
background-color: #ffffff; background-color: var(--clr-white);
border: 1px solid #c6ccc8; border: 1px solid var(--clr-border-main);
border-radius: 0em; border-radius: 0em;
resize: vertical; resize: vertical;
} }
textarea:focus { textarea:focus {
border: 1px solid #d94c7b; border: 1px solid var(--clr-link-hover);
outline: #d94c7b solid 1px; outline: var(--clr-link-hover) solid 1px;
outline-offset: 0px; outline-offset: 0px;
} }
button { button {
@ -485,7 +502,7 @@ button#sidebar_search_submit {
color: transparent; color: transparent;
} }
button#sidebar_search_submit:focus { button#sidebar_search_submit:focus {
background-color: #c6ccc8; background-color: var(--clr-border-main);
} }
button#sidebar_search_submit:hover { button#sidebar_search_submit:hover {
background-size: 60%; background-size: 60%;
@ -521,14 +538,14 @@ div.ribbon {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #ffffff; color: var(--clr-white);
background-color: #426aa6; background-color: #426aa6;
padding: 0.5em; padding: 0.5em;
margin-bottom: 2rem; margin-bottom: 2rem;
border-radius: 0.25em; border-radius: 0.25em;
} }
div.flash { div.flash {
background-color: #d94c7b; background-color: var(--clr-link-hover);
} }
div.metadata { div.metadata {
font-weight: normal; font-weight: normal;
@ -541,13 +558,13 @@ div.metadata {
width: 100%; width: 100%;
padding: 0.25rem 2rem; padding: 0.25rem 2rem;
margin-top: 2rem; margin-top: 2rem;
background-color: #ffffff; background-color: var(--clr-white);
border-top: 1px solid #c6ccc8; border-top: 1px solid var(--clr-border-main);
border-bottom-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
} }
article.post.pinned div.metadata { article.post.pinned div.metadata {
background-color: #fffddd; background-color: var(--clr-pinned-bg);
} }
div.comments_pagination { div.comments_pagination {
width: 100%; width: 100%;
@ -569,15 +586,15 @@ div#main > article, div.standalone {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
background-color: #fbfbf7; background-color: var(--clr-content-bg);
margin: 0rem auto 2rem 0rem; margin: 0rem auto 2rem 0rem;
padding: 2rem 2rem 0rem 2rem; padding: 2rem 2rem 0rem 2rem;
border: 1px solid #c6ccc8; border: 1px solid var(--clr-border-main);
border-radius: 0.5rem; border-radius: 0.5rem;
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
#ffffff 0em, var(--clr-white) 0em,
#fbfbf7 10em var(--clr-content-bg) 10em
); );
box-shadow: 0px 2px 4px 2px rgba(57,67,77,0.05); box-shadow: 0px 2px 4px 2px rgba(57,67,77,0.05);
} }
@ -605,14 +622,14 @@ ul.archive article.post.archive {
position: relative; position: relative;
height: 196px; height: 196px;
font-size: 0.75em; font-size: 0.75em;
background-color: #fbfbf7; background-color: var(--clr-content-bg);
padding: 8px; padding: 8px;
border: 1px solid #c6ccc8; border: 1px solid var(--clr-border-main);
border-radius: 0.5rem; border-radius: 0.5rem;
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
#ffffff 0em, var(--clr-white) 0em,
#fbfbf7 10em var(--clr-content-bg) 10em
); );
} }
section.post_archive_container { section.post_archive_container {
@ -644,20 +661,20 @@ article.audio audio {
} }
a:link, a:link,
a:visited { a:visited {
color: #1f1f23; color: var(--clr-body-txt);
text-decoration: none; text-decoration: none;
} }
a:hover, a:hover,
a:focus, a:focus,
a:active { a:active {
outline: none; outline: none;
color: #d94c7b; color: var(--clr-link-hover);
text-decoration: underline; text-decoration: underline;
text-underline-offset: 0.125em; text-underline-offset: 0.125em;
text-decoration-thickness: 0.0625em; text-decoration-thickness: 0.0625em;
} }
div.ribbon a { div.ribbon a {
color: #ffffff; color: var(--clr-white);
font-weight: bold; font-weight: bold;
} }
div.traversal a { div.traversal a {
@ -665,21 +682,21 @@ div.traversal a {
padding: 0.5em 1em; padding: 0.5em 1em;
min-width: 8em; min-width: 8em;
border-radius: 0.25em; border-radius: 0.25em;
color: #ffffff; color: var(--clr-white);
text-decoration: none; text-decoration: none;
background-color: #208448; background-color: var(--clr-tag);
} }
div.traversal a:hover, div.traversal a:hover,
div.traversal a:focus, div.traversal a:focus,
div.traversal a:active { div.traversal a:active {
color: #ffffff; color: var(--clr-white);
background-color: #006428; background-color: var(--clr-tag-hover);
} }
section a:link, section a:link,
p a:link, p a:link,
section a:visited, section a:visited,
p a:visited { p a:visited {
color: #1f1f23; color: var(--clr-body-txt);
text-decoration: underline; text-decoration: underline;
text-underline-offset: 0.125em; text-underline-offset: 0.125em;
text-decoration-thickness: 0.0625em; text-decoration-thickness: 0.0625em;
@ -690,7 +707,7 @@ section a:focus,
p a:focus, p a:focus,
section a:active, section a:active,
p a:active { p a:active {
color: #d94c7b; color: var(--clr-link-hover);
} }
div.tags a, div.tags a,
div.tag_cloud a { div.tag_cloud a {
@ -698,9 +715,9 @@ div.tag_cloud a {
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
margin-bottom: 4px; margin-bottom: 4px;
border-radius: 0.25em; border-radius: 0.25em;
color: #ffffff; color: var(--clr-white);
text-decoration: none; text-decoration: none;
background-color: #208448; background-color: var(--clr-tag);
} }
div.tags a:hover, div.tags a:hover,
div.tags a:focus, div.tags a:focus,
@ -708,8 +725,8 @@ div.tags a:active,
div.tag_cloud a:hover, div.tag_cloud a:hover,
div.tag_cloud a:focus, div.tag_cloud a:focus,
div.tag_cloud a:active { div.tag_cloud a:active {
color: #ffffff; color: var(--clr-white);
background-color: #006428; background-color: var(--clr-tag-hover);
} }
div.doaction a, button { div.doaction a, button {
display: inline-block; display: inline-block;
@ -717,9 +734,9 @@ div.doaction a, button {
padding: 0.5em 1em; padding: 0.5em 1em;
border: none; border: none;
border-radius: 0.25em; border-radius: 0.25em;
color: #ffffff; color: var(--clr-white);
text-decoration: none; text-decoration: none;
background-color: #39434d; background-color: var(--clr-edit-btn);
} }
div.doaction a:hover, div.doaction a:hover,
button:hover, button:hover,
@ -727,11 +744,11 @@ div.doaction a:focus,
button:focus, button:focus,
div.doaction a:active, div.doaction a:active,
button:active { button:active {
background-color: #000000; background-color: var(--clr-edit-btn-hover);
} }
div.doaction a.post_delete_link, div.doaction a.post_delete_link,
div.doaction a.delete_link { div.doaction a.delete_link {
background-color: #c04b4b; background-color: var(--clr-delete-btn);
} }
div.doaction a.post_delete_link:hover, div.doaction a.post_delete_link:hover,
div.doaction a.delete_link:hover, div.doaction a.delete_link:hover,
@ -739,10 +756,10 @@ div.doaction a.post_delete_link:focus,
div.doaction a.delete_link:focus, div.doaction a.delete_link:focus,
div.doaction a.post_delete_link:active, div.doaction a.post_delete_link:active,
div.doaction a.delete_link:active { div.doaction a.delete_link:active {
background-color: #af2d2d; background-color: var(--clr-delete-btn-hover);
} }
section.photo > a:focus { section.photo > a:focus {
outline: #d94c7b solid 4px; outline: var(--clr-link-hover) solid 4px;
} }
a.likes > img { a.likes > img {
display: inline-block; display: inline-block;
@ -770,7 +787,7 @@ a.archive_post_link {
a.archive_post_link:hover, a.archive_post_link:hover,
a.archive_post_link:focus, a.archive_post_link:focus,
a.archive_post_link:active { a.archive_post_link:active {
outline: #d94c7b solid 4px; outline: var(--clr-link-hover) solid 4px;
} }
iframe { iframe {
max-width: 100%; max-width: 100%;
@ -843,17 +860,17 @@ div.standalone > *:last-child {
font-size: 4.2mm; font-size: 4.2mm;
} }
body { body {
background-color: #ffffff; background-color: var(--clr-white);
} }
div#main > article, div#main > article,
div.standalone { div.standalone {
background-color: #ffffff; background-color: var(--clr-white);
background-image: none; background-image: none;
page-break-inside: avoid; page-break-inside: avoid;
box-shadow: none; box-shadow: none;
} }
ul.navigation { ul.navigation {
background-color: #ffffff; background-color: var(--clr-white);
background-image: none; background-image: none;
} }
} }
@ -934,15 +951,15 @@ div.standalone > *:last-child {
} }
@media (prefers-contrast: more) { @media (prefers-contrast: more) {
body { body {
background-color: #ffffff; background-color: var(--clr-white);
} }
div#main > article, div#main > article,
div.standalone { div.standalone {
background-color: #ffffff; background-color: var(--clr-white);
background-image: none; background-image: none;
} }
ul.navigation { ul.navigation {
background-color: #ffffff; background-color: var(--clr-white);
background-image: none; background-image: none;
} }
} }