1
1
Fork 0

added color-schemes to main page and wiki

This commit is contained in:
Vrifox 2021-02-21 11:40:01 +01:00
parent 52d576a06a
commit 7b2f89ac94
Signed by: vrifox
GPG key ID: D40098E5B60B2197
6 changed files with 76 additions and 26 deletions

View file

@ -8,3 +8,19 @@ $nom-blue-light: rgb(110, 176, 255); // #6db0ff
$grey: rgb(155, 155, 170); $grey: rgb(155, 155, 170);
$grey-light: rgb(175, 175, 190); $grey-light: rgb(175, 175, 190);
$white: rgb(255, 255, 255); $white: rgb(255, 255, 255);
:root {
--background: rgb(33, 39, 48);
--background-contrast: rgb(37, 45, 57);
--text: rgb(255, 255, 255);
--nom-blue: rgb(70, 136, 222); // #4588de
}
@media (prefers-color-scheme: light) {
:root {
--background: rgb(255, 255, 255);
--background-contrast: rgb(245, 245, 245);
--text: rgb(0, 0, 0);
}
}

View file

@ -1,6 +1,6 @@
body { body {
background: $blog_body-bg; background: var(--background);
color: $white; color: var(--text);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
@ -17,11 +17,11 @@ body {
thead { thead {
tr { tr {
th { th {
background: $nom_blue; background: var(--background);
border-bottom: 0; border-bottom: 2px solid var(--text);
padding: 5px 10px; padding: 5px 10px;
a { a {
color: $white; color: var(--text);
text-decoration: none; text-decoration: none;
} }
} }
@ -29,14 +29,14 @@ body {
} }
tbody { tbody {
tr { tr {
background: $blog_body-bg-light; background: var(--background);
&:nth-child(2n) { &:nth-child(2n) {
background: $blog_body-bg-light; background: var(--background-contrast);
} }
td { td {
padding: 5px 10px; padding: 5px 10px;
a { a {
color: $white; color: var(--text);
text-decoration: none; text-decoration: none;
} }
} }

View file

@ -1,10 +1,10 @@
body { body {
background: $blog_body-bg; background: var(--background);
color: $white; color: var(--text);
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
margin: 0; margin: 0;
a { a {
color: $nom_blue-light; color: var(--nom-blue);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }

View file

@ -32,7 +32,7 @@ $ngtb_height: 32px; // ngtb == nom_globaltopbar
@if $type == blog { @if $type == blog {
background: var(--global--color-background); background: var(--global--color-background);
} @else { } @else {
background: $blog_body-bg; background: var(--background);
} }
@if $type == wiki { @if $type == wiki {
position: absolute; position: absolute;
@ -61,7 +61,7 @@ $ngtb_height: 32px; // ngtb == nom_globaltopbar
@if $type == blog { @if $type == blog {
color: var(--global--color-primary); color: var(--global--color-primary);
} @else { } @else {
color: $grey-light; color: var(--text);
} }
&:hover, &:hover,
&:active, &:active,

View file

@ -2,7 +2,9 @@
@media screen { @media screen {
body { body {
background: rgb(245, 245, 245); background: var(--background);
color: var(--text);
text-decoration-thickness: 1px !important;
#dokuwiki__site { #dokuwiki__site {
.site { .site {
.topbar { // _old_ topbar (pre ~2015; plugin) .topbar { // _old_ topbar (pre ~2015; plugin)
@ -16,7 +18,7 @@
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
border-width: 0 1px 1px; border-width: 0 1px 1px;
border: solid __border__; border: solid __border__;
box-shadow: 0 1px 3px #999; box-shadow: none;
list-style: none; list-style: none;
margin: 0 auto; margin: 0 auto;
max-width: 530px; /* change accordingly */ max-width: 530px; /* change accordingly */
@ -38,6 +40,14 @@
} }
#dokuwiki__header { #dokuwiki__header {
padding-top: 3.5em; padding-top: 3.5em;
a {
color: var(--text) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
&:hover {
text-decoration-style: dotted !important;
}
}
.group { .group {
.tools { .tools {
#dokuwiki__usertools { #dokuwiki__usertools {
@ -45,8 +55,19 @@
} }
} }
} }
.breadcrumbs, .youarehere {
border: none !important;
}
} }
.wrapper { .wrapper {
a {
color: var(--text) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
&:hover {
text-decoration-style: dotted !important;
}
}
#dokuwiki__aside { #dokuwiki__aside {
.aside { .aside {
.content { .content {
@ -107,11 +128,12 @@
.pad { .pad {
.pageId { .pageId {
span { span {
box-shadow: 0 0 5px $grey-light; box-shadow: none;
} }
} }
.page { .page {
box-shadow: 0 0 5px $grey-light; background: var(--background-contrast);
box-shadow: none;
counter-reset: level1; // content only counter-reset: level1; // content only
h1 { h1 {
counter-reset: level2; counter-reset: level2;
@ -219,8 +241,6 @@
} }
} }
} }
} }
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {

View file

@ -1,10 +1,10 @@
body { body {
background: $blog_body-bg; background: var(--background);
color: $white; color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
margin: 0; margin: 0;
a { a {
color: $white; color: var(--text);
text-underline-offset: 3px; text-underline-offset: 3px;
&:hover { &:hover {
text-decoration-style: dotted; text-decoration-style: dotted;
@ -37,7 +37,7 @@ body {
main.ueber { main.ueber {
.container { .container {
.contact.kagube.container { .contact.kagube.container {
background: $blog_body-bg-light; background: var(--background-contrast);
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
padding: 15px; padding: 15px;
@ -61,12 +61,26 @@ main.ueber {
} }
} }
@media (prefers-color-scheme: light) {
main.ueber {
.container {
.contact.kagube.container {
img.kagube {
filter: invert(100%);
}
}
}
}
}
// //
// impressum // impressum
// //
main.impressum { @media (prefers-color-scheme: dark) {
main.impressum {
img { img {
filter: invert(100%); filter: invert(100%);
} }
}
} }