sbrl-github/Pepperminty-Wiki
sbrl-github
/
Pepperminty-Wiki
mirror of https://github.com/sbrl/Pepperminty-Wiki.git
1
0
Fork 0
Code

Finish (almost) moving the rest of the colours over to css variables 

prefers-color-scheme dark mode, here we come! :D
This commit is contained in:
Starbeamrainbowlabs 2019-08-28 01:03:07 +01:00
parent f3d9dff632
commit 6324a5b2fa
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
1 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
themes/default/theme.css
View File

@ -11,7 +11,16 @@
--bg-back: #eee8f2;
--bg-page: #faf8fb;
--bg-comments-1: hsl(31, 64%, 85%);
--bg-comments-2: hsla(27, 92%, 68%, 0.64);
--bg-comments-3: hsla(30, 84%, 72%, 0.54);
--bg-comments-4: hsla(32, 82%, 62%, 0.3);
--text-dark: #111111;
--text-light: hsl(0, 0%, 96%);
--text-placeholder-light: hsla(0, 0%, 100%, 0.9);
--text-os-button: #514C4C;
--text-soft: rgba(33, 33, 33, 0.3);
--text-ultrasoft: rgba(50, 50, 50, 0.3);
--shadow: rgba(50, 50, 50, 0.5);
@ -37,6 +46,8 @@
--addition: #09b400;
--deletion: #cf1c11;
--nochange: #847bc7;
/* #ffdb6d #36962c hsl(36, 78%, 80%) hsla(262, 92%, 68%, 0.42) */
}
body { margin: 2rem 0 0 0; background: var(--bg-back); line-height: 1.45em; color: var(--text-dark); font-family: sans-serif; }
@ -58,8 +69,9 @@ input[type=checkbox]:checked ~ .nav-more-menu { display: block; box-shadow: 0.4r
.inflexible { flex: none; }
.off-screen { position: absolute; top: -1000px; left: -1000px;}
input[type=search] { width: 14rem; padding: 0.3rem 0.4rem; font-size: 1rem; color: white; background: hsla(var(--accent-a0), 0.4); border: 0; border-radius: 0.3rem; }
input[type=search]::-webkit-input-placeholder { color : rgba(255, 255, 255, 0.75); }
input[type=search] { width: 14rem; padding: 0.3rem 0.4rem; font-size: 1rem; color: var(--text-light); background: hsla(var(--accent-a0), 0.4); border: 0; border-radius: 0.3rem; }
input[type=search]::-webkit-input-placeholder { color: var(--text-placeholder-light); }
input[type=search]::-moz-placeholder { color: var(--text-placeholder-light); }
input[type=button], input[type=submit] { cursor: pointer; }
.sidebar + .main-container nav.bottom { position: relative; }
@ -77,7 +89,7 @@ input[type=button], input[type=submit] { cursor: pointer; }
.image-controls ul { list-style-type: none; margin: 5px; padding: 5px; }
.image-controls li { display: inline-block; margin: 5px; padding: 5px; }
.link-display { margin-left: 0.5rem; }
.button { appearance: button; -moz-appearance: button; -webkit-appearance: button; text-decoration: none; }
.button { appearance: button; -moz-appearance: button; -webkit-appearance: button; text-decoration: none; font-size: 0.9em; }
audio, video, img { max-width: 100%; }
object { width: 100%; height: 90vh; }
@ -145,7 +157,7 @@ input[type=submit].large { width: 100%; box-sizing: border-box; padding: 0.5em;
.page-tags-display { margin: 0.5rem 0 0 0; padding: 0; list-style-type: none; }
.page-tags-display li { display: inline-block; margin: 0.5rem; padding: 0.5rem; background: var(--tag); white-space: nowrap; }
.page-tags-display li a { color: var(--accebt-b2); text-decoration: none; }
.page-tags-display li a { color: var(--accent-b2); text-decoration: none; }
.page-tags-display li::before { content: "\\A"; position: relative; top: 0.03rem; left: -0.9rem; width: 0; height: 0; border-top: 0.6rem solid transparent; border-bottom: 0.6rem solid transparent; border-right: 0.5rem solid var(--tag); }
.page-list { list-style-type: none; margin: 0.3rem; padding: 0.3rem; }
@ -162,7 +174,7 @@ input[type=submit].large { width: 100%; box-sizing: border-box; padding: 0.5em;
.theme-item { justify-self: center; text-align: center; }
.theme-item label { min-width: auto; }
.help-section-header::after { content: "#" attr(id); float: right; color: rgba(0, 0, 0, 0.4); font-size: 0.8rem; font-weight: normal; }
.help-section-header::after { content: "#" attr(id); float: right; color: var(--text-soft); font-size: 0.8rem; font-weight: normal; }
.stacked-bar { display: flex; }
.stacked-bar-part { break-inside: avoid; white-space: pre; padding: 0.2em 0.3em; }
@ -187,22 +199,20 @@ summary { cursor: pointer; }
.new-comment::before { content: "\\1f4ac"; margin: 0 0.1em 0 -1.1em; }
.reversion::before { content: "\\231b"; margin: 0 0.1em 0 -1.1em; }
.comments { padding: 1em 2em; background: hsl(31, 64%, 85%); box-shadow: 0 0.1rem 1rem 0.3rem var(--shadow); }
.comments textarea { background: hsl(270, 60%, 86%); }
.comments ::-webkit-input-placeholder { color: hsla(240, 61%, 67%, 0.61); }
.comments .not-logged-in { padding: 0.3em 0.65em; background: hsla(27, 92%, 68%, 0.64); border-radius: 0.2em; font-style: italic; }
.comments { padding: 1em 2em; background: var(--bg-comments-1); box-shadow: 0 0.1rem 1rem 0.3rem var(--shadow); }
.comments .not-logged-in { padding: 0.3em 0.65em; background: var(--bg-comments-2); border-radius: 0.2em; font-style: italic; }
.comments textarea { resize: vertical; }
.comment { margin: 1em 0; padding: 0.01em 0; background: hsla(30, 84%, 72%, 0.54); }
.comment { margin: 1em 0; padding: 0.01em 0; background: var(--bg-comments-3); }
.comment-header { padding: 0 1em; }
.comment .name { font-weight: bold; }
.comment-body { padding: 0 1em; }
.comment-footer { padding-left: 1em; }
.comment-footer-item { padding: 0 0.3em; }
.comment-footer .delete-button { -moz-appearance: button; -webkit-appearance: button; text-decoration: none; color: #514C4C; }
.comment-footer .delete-button { appearance: button; -moz-appearance: button; -webkit-appearance: button; text-decoration: none; color: var(--text-os-button); }
.permalink-button { text-decoration: none; }
.comments-list .comments-list .comment { margin: 1em; }
.reply-box-container.active { padding: 1em; background: hsla(32, 82%, 62%, 0.3); }
.reply-box-container.active { padding: 1em; background: var(--bg-comments-4); }
footer { padding: 2rem; }
/* #ffdb6d #36962c hsl(36, 78%, 80%) hsl(262, 92%, 68%, 0.42) */