Simple Dark Theme for Fakku

1
IIShana Flame-Haired Hunter
(Last Update: 01.02.2018)

I had some freetime and got the idea to create a dark theme.

0 risks cause I created it in pure CSS!

Previews:
Spoiler:

Forum Image: https://i.imgbox.com/Vwyravst.png
Forum Image: https://i.imgbox.com/G3dDZExW.png
(captured in Google Chrome, other browsers are not tested yet)


If you like it, here is the CSS-code:
Spoiler:

/* ------------------------------------------------------------------------ */
/* Created by IIShana >> www.fakku.net/users/iishana-8964941 */
/* for fakku.net */
/* ------------------------------------------------------------------------ */

/* --- Import ------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
/* ------------------------------------------------------------------------ */
/* BASE */

.main,
html {
background: rgb(32, 32, 32);
color: white;
font-family: 'Open Sans', sans-serif !important;
}
.main a {
color: rgb(200, 200, 200) !important;
}
.main a:hover {
color: rgb(170, 170, 170) !important;
font-weight: bold;
text-decoration: none;
}
/* HEADER */

.header a:hover {
color: rgb(32, 32, 32) !important;
}
.header-logo img {
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.header-logo img:hover {
-webkit-filter: brightness(0.11);
filter: brightness(0.11);
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
/* MAIN */

.content-wrap,
.content-left,
.content-right,
.content-row,
.forum,
.left-navigation,
.chapters,
.chapters .chapter,
.message {
background: rgb(52, 52, 52);
background-color: rgb(52, 52, 52);
border: none;
border-radius: 5px;
}
.message p {
color: rgb(200, 200, 200);
}
/* DROP DOWN MENU / MENU */

.header-drop-down ul,
.header-drop-down ul li {
background: rgb(52, 52, 52);
color: rgb(200, 200, 200) !important;
}
.row-divider-small {
border-top: 1px solid rgb(92, 92, 92);
}
.mobile-menu {
background: rgb(72, 72, 72);
font-family: 'Open Sans', sans-serif !important;
}
.bt-bars:hover {
color: rgb(52, 52, 52);
}
.mobile-menu a {
color: white !important;
background: rgb(72, 72, 72);
}
.mobile-menu a:hover {
color: white !important;
background: rgb(52, 52, 52);
font-weight: bold;
text-decoration: none;
}
/* CHAPTERS */

.chapters .chapter {
border-bottom: thin solid rgb(100, 100, 100);
}
.chapters .chapter:last-child {
border-bottom: none;
}
/* TAGS */

.tags a {
background: rgb(157, 10, 10);
text-transform: uppercase;
margin-bottom: 10px;
line-height: 2.2rem;
}
.tags a:hover {
color: rgb(200, 200, 200) !important;
background: rgb(137, 10, 10) !important;
}
/* POSTS */

.post {
background: rgb(72, 72, 72);
border: none;
border-radius: 5px;
}
.post-row-top {
background: rgb(62, 62, 62);
border: none;
}
.post-message,
.post-comment-text {
background: rgb(72, 72, 72);
border: none !important;
color: rgb(200, 200, 200);
}
.post-signature {
background: rgb(52, 52, 52);
}
.bbcode-quote {
background: rgb(92, 92, 92);
color: rgb(180, 180, 180);
}
.bbcode-spoil-hidden {
background: rgb(92, 92, 92);
color: white !important;
border: none;
}
/* FILM STRIP */

.film-strip::-webkit-scrollbar-thumb {
background: rgb(157, 10, 10);
border: none;
}
.film-strip::-webkit-scrollbar-track {
background: rgb(32, 32, 32);
border-left: thick solid rgb(72, 72, 72);
border-right: thick solid rgb(72, 72, 72);
}
.film-strip img,
.book-cover img {
border: thin solid rgb(72, 72, 72);
}
/* FORUM */

.forum a:hover {
color: rgb(127, 127, 127)!important;
text-shadow: none;
}
.forum-search {
background: rgb(72, 72, 72);
border: none;
border-radius: 5px 0px 0px 5px;
color: rgb(200, 200, 200);
}
.forum-header-title * {
color: rgb(157, 10, 10) !important;
}
/* INPUT */

.button.small,
#post-comment {
background: rgb(157, 10, 10) !important;
color: rgb(60, 60, 60);
}
.button.small:hover {
color: rgb(200, 200, 200) !important;
}
.button:hover {
-webkit-box-shadow: none;
box-shadow: none;
background: rgb(137, 10, 10) !important;
color: white !important;
}
select,
input {
background: rgb(72, 72, 72);
border: none;
color: rgb(200, 200, 200);
}
/* SELECTION */

::-moz-selection {
background: rgb(137, 10, 10) !important;
color: white;
}

::selection {
background: rgb(137, 10, 10) !important;
color: white;
}
::-moz-selection {
background: rgb(137, 10, 10) !important;
color: white;
}
/* PAGINATION */

.pagination a {
background: rgb(92, 92, 92);
border: none;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.pagination-text {
border-radius: 4px;
}
.pagination .pagination-selected {
color: rgb(137, 10, 10) !important;
font-weight: bolder;
border: none;
}
/* SCROLLBAR */

::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: rgb(150, 150, 150);
border: none;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(137, 10, 10);
}
::-webkit-scrollbar-thumb:active {
background: rgb(117, 10, 10);
}
::-webkit-scrollbar-track {
background: #333333;
}
::-webkit-scrollbar-track:hover {
background: #333333;
}
::-webkit-scrollbar-track:active {
background: #333333;
}
::-webkit-scrollbar-corner {
background: transparent;
}


I am using "Stylish" but you can surely use every program/plugin that can import css code into websites.
In stylish you will also have to set the url the css applies to, to "URL on domain fakku.net"

Feel free to modify and improve this code!
1
Gravity cat the adequately amused
Off-topic but Shana is a QT.

Just throwing that out there.
0
IIShana Flame-Haired Hunter
Gravity cat wrote...
Off-topic but Shana is a QT.

Just throwing that out there.


Couldn't agree more ;)
0
FinalBoss #levelupyourgrind
Good job, I'm really liking this. My eyes thank you as well.
0
IIShana Flame-Haired Hunter
Fixed some bugs!
Feel free to tell me any that you discover!