a Dark Theme for Demon's Souls Wikidot
/* ==UserStyle==
@name Dark Theme for Demon's Souls Wikidot
@version 0.0.4
@description a Dark Theme for Demon's Souls Wikidot
@include http://demonssouls.wikidot.com/*
@author wowyesokay / dogboydog https://github.com/dogboydog/
@namespace dogboydog-demon
==/UserStyle== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
/*
Demon's souls Wikidot
Original by: Bunny (Gwyndolin-chan)
https://github.com/gwyndolin-chan
[email protected]
Modified by dogboydog https://github.com/dogboydog/
*/
@document url-prefix("http://demonssouls.wikidot.com") {
:root {
--link-color: #6094AA;
--link-hover-color: #D9E0E0;
--bg-color: #202321;
--bg-color-lighter: #4d4f4d;
--table-tab-bg: #304a55;
--table-cell-bg: #202020;
--main-text-color: #ffffff;
}
blockquote {
background-color: var(--table-cell-bg);
}
td {
color: var(--main-text-color) !important;
}
a {
color: var(--link-color);
}
a:hover {
color: var(--link-hover-color);
}
/**
* TODO: Doesn't work for ESRB banner...
* But some images look better with white background
*/
img[src*="wiki-forum"],
img[src*="esrb"],
.esrc-banner {
background-color: white !important;
border-radius: 10px 10px 10px 10px;
}
#header {
height: 10em;
}
#top-bar {
width: 75%;
}
#top-bar ul {
padding: 5px;
}
#top-bar ul li {
border-color: var(--link-color) !important;
padding-top: 7px;
/* Don't know why right padding needs to be bigger... */
padding-right: 14px;
padding-bottom: 7px;
padding-left: 7px;
background-image: none;
background-color: var(--bg-color);
color: var(--link-color);
}
#top-bar a {
background-image: none;
color: var(--link-color);
}
/**
* Dropdowns from the top bar
*/
#top-bar li ul li a {
background-image: none;
color: var(--link-color);
background-color: var(--bg-color) !important;
padding-top: 5px;
padding-bottom: 5px;
}
/**
* Hovering over an item in dropdowns from the top bar
*/
#top-bar ul li ul li.sfhover a {
background-image: none;
color: var(--link-hover-color);
background-color: var(--bg-color);
padding-top: 5px;
padding-bottom: 5px;
}
#search-top-box-input {
background-color: #252726;
padding: 4px;
color: var(--link-color)
}
#search-top-box input.empty {
color: #BCCAA0;
}
input.button,
#account-topbutton,
#account-options {
background-color: var(--bg-color);
padding: 4px;
color: var(--link-color);
}
#account-options li a:hover {
color: var(--link-hover-color);
}
/**
* This fixes a little bar of color to the right of
* items in the top dropdown that aren't being hovered over
*/
#top-bar ul li ul li {
background-color: var(--bg-color);
}
#top-bar a:hover {
background-image: none;
background-color: var(--bg-color-lighter);
color: var(--link-hover-color);
padding-left: 8px;
}
body,
h1 a,
h2,
#container,
#header,
#side-bar,
#header-extra-div-1,
#header-extra-div-2,
#header-extra-div-3 {
font-family: 'Open Sans', sans-serif;
background-color: #202321 !important;
}
iframe.html-block-iframe {
background: none;
background-color: #404040;
}
.tr {
background: none !important;
}
body,
#toc {
color: #FFFFFF;
}
a,
#login-status a,
#toc-list a,
#toc #toc-action-bar a {
padding-top: 5px;
padding-bottom: 5px;
color: var(--link-color);
}
a:hover,
.table a:hover,
#login-status a:hover,
#toc-list a:hover,
#toc #toc-action-bar a:hover {
color: var(--link-hover-color);
}
table.wiki-content-table {
font-size: 0.9em;
color: #a0a0a0;
background-color: #202020;
}
table.wiki-content-table th,
th.table {
font-size: 1.0em;
color: #101010;
background-color: #606060;
}
input.text {
background-color: #C0C0C0;
}
#toc #toc-action-bar::before,
#toc #toc-action-bar a::before,
#toc #toc-action-bar a::after {
color: inherit;
}
#top-bar ul li,
#top-bar ul li ul li {
margin-left: 3px;
border-color: #F0F0F0;
}
table.wiki-content-table th {
background: var(--table-tab-bg);
color: var(--link-hover-color);
}
.table th {
background: var(--table-tab-bg);
font-family: 'Open Sans', sans-serif;
}
table.wiki-content-table,
table {
border: none;
}
}