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

View file

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

View file

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

View file

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

View file

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