I updated the code for the "Thumbnail" mode, as of now it's working again, the buttons part was scrapped. There are some things that I didn't care to do, as they are too much trouble.
Also, anyone is welcome to see what lines I added and try to make the other modes compatible.
If the dark mode of the now defunct e-hentai is made available, this style won't be needed anymore.
(IMG:[
i.imgur.com]
https://i.imgur.com/6JNiY2H.jpg)
CODE
/* ==UserStyle==
@name e-******.org Dark Theme
@namespace LadyChocolatine
@version 1.0.17
@homepageURL https://forums.e-hentai.org/index.php?showtopic=193181
@author LadyChocolatine
@preprocessor stylus
==/UserStyle== */
@-moz-document regexp("^https?://(?!forums.)(.*)?e-hentai.org.*") {
/**** For Dark Theme ****/
@font-face {
font-family: 'font-awesome';
src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2);
}
/*------ Lines added by me ------*/
.gl1t:nth-child(2n+1){background:#191919 !important} /*background color for the thumbnails alternated*/
.gl1t:nth-child(2n+2){background:#1c1c1c !important}
div.itg.gld{ /*correct border colors*/
border-left-color: #0a0a0a;
border-top-color: #0a0a0a;
}
div.gl1t{
border-right-color: #0a0a0a !important;
border-bottom-color: #0a0a0a !important;
font-weight: bold !important; /*add bold to titles*/
}
.lc span, .lc span:hover, .lc span:active{ /*fix color of checkboxes*/
background: #444444 !important;
border-color: #323232 !important;
}
.lr span, .lr span:hover, .lr span:active{ /*fix color of radios*/
background: #444444 !important;
border-color: #323232 !important;
}
.lc:hover input:enabled ~ span,.lr:hover input:enabled ~ span,.lc input:enabled:focus ~ span,.lr input:enabled:focus ~ span{background-color:#444444 !important;border-color:#323232 !important} /*hover of checkbox*/
.lc span::after{ /*check of checkbox*/
border-color: black !important;
bakground: black !important;
}
.lr>span:after{content:"";position:absolute;display:none;top:5px;left:5px;width:10px;height:10px;border-radius:50%;background:black !important;} /*dot inside radio*/
a { /*link colors*/
color: #879DAA;
}
a:hover {
color: #597382 !important;
}
a:hover .glink{color: #597382 !important;} /*needed for hover of items in thumbnail list*/
a:visited .glink,a:active .glink{color:#597382 !important;} /*set color of visited items*/
div.gl3t{ /*border of images*/
border-color: #0a0a0a !important;
}
input[type="text"], textarea { /*input text and textarea*/
background: #444444 !important;
border-color: #323232 !important;
color: #c5c5c5 !important;
}
input::placeholder,textarea::placeholder { /*placeholder text of inputs*/
color:#FFFFFF;-webkit-text-fill-color:#FFFFFF
}
input[type="button"], input[type="submit"], select { /*buttons*/
background: #2e2e2e !important;
border-color: #333333 !important;
color: #c5c5c5 !important;
}
input[type="button"]:enabled:hover, input[type="submit"]:enabled:hover { /*buttons hover*/
background: #444444 !important;
border-color: #333333 !important;
color: #c5c5c5 !important;
}
div.gtl a{ /*tags*/
color: black !important;
text-shadow: -1px 0 #b0b0b0, 0 1px #b0b0b0, 1px 0 #b0b0b0, 0 -1px #b0b0b0;
}
div.gtl a:hover{ /*tags hover*/
color: #a0b9c8 !important;
text-shadow: -1px 0 #818181, 0 1px #818181, 1px 0 #818181, 0 -1px #818181;
}
/*------ End of lines added by me ------*/
div.tod {
display: none;
}
p#nb {
width: calc(100% + 4px);
min-width: calc(100% + 4px);
position: relative;
top: -4px;
left: -2px;
background: #242424;
box-shadow: 0px 1px 1px 2px rgba(0, 0, 0, 0.3);
padding: 10px 0;
}
p#nb a {
padding: 10px 10px;
color: #C5C5C5;
}
p#nb a:hover {
color: #e7e7e7;
background-color: #1a1a1a;
}
p#nb img {
display: none;
}
body {
background: #161616;
background-color: #161616;
color: #C5C5C5;
}
div.dp {
width: calc(100% + 4px);
position: relative;
bottom: -4px;
left: -2px;
background: #1a1a1a;
padding: 10px 0;
color: #E5E5E5;
}
div.ido,
div.gm,
div#gdt,
.stuffbox,
div.sni {
border: none;
background-color: #242424;
border-right: 8px solid #1A1A1A;
border-left: 8px solid #1A1A1A;
border-radius: 0px;
}
h1.ih {
width: calc(100% + 22px);
position: relative;
top: -7px;
left: -11px;
padding: 10px 0;
background: #1d1d1d;
color: #bbb;
}
div.idi,
div#torrentinfo table#ett,
div#torrentinfo div#etd,
div#x {
background-color: rgb(30, 30, 30);
border-radius: 2px;
border: 1px solid rgb(42, 42, 42);
color: rgb(134, 134, 134);
}
div.id1 {
background-color: rgb(30, 30, 30);
border-radius: 2px;
border: 1px solid rgb(42, 42, 42);
font-weight: 500;
color: rgb(134, 134, 134);
}
.stdinput {
font-size: 8pt;
border: 1px solid #5C0D11;
margin: 4px 1px 0px 1px;
padding: 2px 3px 2px 3px;
background: #202020!important;
border-color: #323232!important;
color: #acacac!important;
}
.stdbtn {
border: 0.0625rem solid #333333!important;
background: #2E2E2E!important;
color: #d4d4d4!important;
margin-left: 3px;
height: 1.675rem;
line-height: 1.675rem;
outline: none;
border-radius: 0;
-webkit-appearance: none;
box-sizing: border-box;
}
.stdbtn:hover {
background: #272727!important;
color: #e7e7e7!important;
border: 0.0625rem solid #2E2E2E!important;
}
div.itg {
border-top: 1px solid #262626;
border-bottom: 1px solid #262626;
}
table.ptt,
table.ptb {
border-collapse: separate;
}
table.ptt td,
table.ptb td {
border: 0px solid #5C0D12;
text-align: center;
vertical-align: middle;
background: #424242;
font-size: 12px;
padding: 4px 6px;
border-radius: 2px;
height: 0px;
width: 0px;
}
table.ptt td[onclick*='Jump to page: '],
table.ptb td[onclick*='Jump to page: '] {
background: transparent!important;
}
table.ptt td[onclick*='Jump to page: ']:hover,
table.ptb td[onclick*='Jump to page: ']:hover {
background-color: #1d1d1d!important;
}
td.ptds {
border: none;
font-weight: 500;
background: #8d8d8d!important;
font-size: 12px!important;
}
td.ptds a {
color: #161616!important;
}
table.ptt a,
table.ptt td,
table.ptt td:hover,
table.ptb a,
table.ptb td,
table.ptb td:hover {
color: #e9e9e9;
}
td.ptdd,
td.ptdd:hover {
color: #e9e9e9!important;
}
table.ptt td:hover,
table.ptb td:hover,
td.ptdd:hover {
background: #565656!important;
}
table.ptt {
margin-bottom: 10px!important;
}
table.ptb {
margin-top: 10px!important;
}
.id2 a:visited,
.it5 a:visited {
color: #a588ab;
}
div#pt {
border-color: #393939;
padding: 6px 0;
background: #393939;
color: #9c9c9c;
margin-bottom: 15px;
font-size: 12px;
word-wrap: break-word;
text-transform: uppercase;
border-radius: 2px;
}
table.itg th {
background: #434343 !important;
color: #E7E7E7;
}
table.itg {
border: 2px solid #434343;
}
tr.gtr0 {
background: #2A2A2A;
}
tr.gtr1 {
background: #2E2E2E;
}
td.itd,
td.itdc,
table.itg td,
#t.stuffbox .d3 .d4,
#t.stuffbox .d3 .d5 {
border-color: #434343;
}
#eventpane {
background: #222!important;
border: 0px solid #5C0D12!important;
}
div#gd2,
div#gmid,
div#gright {
background: transparent;
}
div#gd1 img,
div#gdt img {
border: 1px solid #262626;
}
div#gd4 {
border-left: 1px solid #262626;
border-right: 1px solid #262626;
}
img.ygm {
-webkit-filter: invert(70%);
filter: invert(70%);
}
div.gt,
div.gtl,
div.gtw {
background-color: rgb(124, 135, 156) !important;
border-color: #5a6f7d;
}
div#taglist a {
color: #f2f2f2;
}
#torrentinfo > div:nth-child(1) > form > div,
#torrentinfo > div:nth-child(2),
div.homebox {
border-color: #262626!important;
}
h1#gj {
border-bottom: 1px solid #262626;
}
div#db {
border: 0px solid rgba(92, 13, 18, 0);
background: #1C1C1C;
}
div.ths {
background: #272727!important;
color: #e7e7e7!important;
border: 0.0625rem solid #2E2E2E!important;
}
div.thd,
div.tha {
border: 1px solid rgba(194, 168, 164, 0);
color: #b7b7b7;
}
div.thd {
opacity: .2;
}
div.c2 {
background: #434343;
border-color: transparent;
}
div.fps {
border: 0.0625rem solid #333333!important;
background: #2E2E2E!important;
color: #d4d4d4!important;
}
div.fps:hover {
background: #272727!important;
color: #e7e7e7!important;
border: 0.0625rem solid #2E2E2E!important;
}
input.fs {
background: #202020!important;
border: 1px solid #323232!important;
color: #acacac!important;
}
div.sn img,
div.sb img {
-webkit-filter: invert(100%);
filter: invert(100%);
}
div.fp:hover {
background: #232323;
border: 1px solid #232323;
border-radius: 0px;
}
table.mt {
border: 1px solid #232323;
background: #434343;
}
tr.gtr {
background: #434343;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
opacity: 1;
-webkit-backface-visibility: hidden;
background: rgba(85, 85, 85, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .25);
}
::-webkit-scrollbar-thumb {
background: rgba(85, 85, 85, 0.5);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
#searchbox > form > p:nth-child(2) > input.stdinput {
height: 1.675rem;
line-height: 1.675rem;
outline: none;
box-shadow: inset 0 0 0 50px #444, 0 1px 8px 1px rgba(0, 0, 0, 0.1);
font-weight: 300;
background: transparent;
font-size: 12px;
padding: 0 2.5rem 0 0.9375rem;
border: 0.0625rem solid #D5D5D5;
border-radius: 0;
-webkit-appearance: none;
box-sizing: border-box;
-moz-transition: all 0.3s cubic-bezier(.25, .5, .25, 1);
-o-transition: all 0.3s cubic-bezier(.25, .5, .25, 1);
-webkit-transition: all 0.3s cubic-bezier(.25, .5, .25, 1);
transition: all 0.3s cubic-bezier(.25, .5, .25, 1)
}
#searchbox > form > p:nth-child(2) > input.stdinput:focus {
box-shadow: inset 0 0 0 1px #444;
background: #222!important
}
#searchbox > form > p:nth-child(2) > input.stdinput::-webkit-input-placeholder {
color: #999;
transition: all 0.3s cubic-bezier(.25, .5, .25, 1)
}
#searchbox > form > p:nth-child(2) > input.stdinput:-ms-input-placeholder {
color: #999;
transition: all 0.3s cubic-bezier(.25, .5, .25, 1)
}
#searchbox > form > p:nth-child(2) > input.stdinput::-moz-placeholder {
color: #999;
transition: all 0.3s cubic-bezier(.25, .5, .25, 1)
}
#searchbox > form > p:nth-child(2) > input.stdinput:focus::-webkit-input-placeholder {
color: #555;
filter: blur(2px)
}
#searchbox > form > p:nth-child(2) > input.stdinput:focus:-ms-input-placeholder {
color: #555;
filter: blur(2px)
}
#searchbox > form > p:nth-child(2) > input.stdinput:focus::-moz-placeholder {
color: #555;
filter: blur(2px)
}
#searchbox > form > p:nth-child(2) {
margin: 5px 0 10px 0;
}
tr.gtr0:hover,
tr.gtr1:hover {
background: #242424;
}
div.d {
border: 0px solid rgba(92, 13, 18, 0);
background: #1E1E1E;
}
div.tha:hover {
background: #4f4f4f;
color: #ffffff;
}
div#taglist a.tup {
background: #3cdc74!important;
color: #ffffff!important;
padding: 2px 6px;
margin: 0 -6px;
border-radius: 6px;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}
div#taglist a.tdn {
background: #ef4b4b!important;
color: #ffffff!important;
padding: 2px 6px;
margin: 0 -6px;
border-radius: 6px;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}
div#taglist a[style="color: blue;"] {
background: #fff!important;
color: #161616!important;
padding: 2px 6px;
margin: 0 -6px;
border-radius: 6px;
}
div#tagpopup {
background: #262626;
border-color: #272727;
}
div#gd1 div {
border-color: #4f4f4f;
}
a[href^="https://e-hentai.org/gallerytorrents.php?gid="] img {
opacity: 0;
}
.id44 a[href^="https://e-hentai.org/gallerytorrents.php?gid="]:before,
.it3 a[href^="https://e-hentai.org/gallerytorrents.php?gid="]:before {
content: "\f019";
font-family: 'font-awesome';
color: #4e4e4e;
font-size: 16px;
position: absolute;
right: 5px;
top: 5px;
transition: color .5s;
}
a[href^="https://e-hentai.org/gallerytorrents.php?gid="]:hover:before {
color: #d9d9d9;
}
.it3 a[href^="https://e-hentai.org/gallerytorrents.php?gid="]:before {
position: relative;
left: 1px;
top: -2px;
}
.stuffbox table[style="margin:auto; border-collapse:collapse; background:#F2F0E4; border:1px solid #C2C1C1; border-bottom:0"] {
background: #1e1e1e!important;
border-color: #1e1e1e!important;
}
td.stdk,
td.stdv {
border-color: #383838;
background-color: #161616;
}
div[id^="cell_"] {
background: #323232;
border-color: #383838;
}
body > div[style="text-align:center; width:800px; padding:5px 20px 10px 20px; margin:10px auto 5px auto; background:#EDEBDF; border:1px solid #5C0D12; font-size:9pt"],
body > div[style="text-align:center; width:800px; padding:10px 20px 10px 20px; margin:10px auto 5px auto; background:#EDEBDF; border:1px solid #5C0D12; font-size:9pt"],
body > div[style="text-align:center; width:400px; height:154px; padding:1px 20px 10px 20px; margin:8px auto auto auto; background:#EDEBDF; border:1px solid #5C0D12"] {
background: #1e1e1e!important;
border-color: #101010!important;
}
p#lb > a[style="font-weight:bold"] {
color: #fff;
}
tr#dlvl {
border-color: #212121;
background: #161616;
}
body > div[style="text-align:center; width:400px; height:154px; padding:1px 20px 10px 20px; margin:8px auto auto auto; background:#EDEBDF; border:1px solid #5C0D12"] span#as {
color: #101010!important;
}
input#newtagfield {
padding-top: 0;
padding-bottom: 0;
line-height: 25px;
}
input[type="checkbox"]:before,
input[type="radio"]:before {
content: "";
display: block;
width: 13px;
height: 13px;
background: #191919;
-moz-box-shadow: inset 0px 0px 0px 1px #505050;
-webkit-box-shadow: inset 0px 0px 0px 1px #505050;
-o-box-shadow: inset 0px 0px 0px 1px #505050;
box-shadow: inset 0px 0px 0px 1px #505050;
transition: all 250ms cubic-bezier(.4, .0, .23, 1);
}
input[type="checkbox"]:disabled:before,
input[type="radio"]:disabled:before {
background: #1b1b1b;
-moz-box-shadow: inset 0px 0px 0px 1px #2d2d2d;
-webkit-box-shadow: inset 0px 0px 0px 1px #2d2d2d;
-o-box-shadow: inset 0px 0px 0px 1px #2d2d2d;
box-shadow: inset 0px 0px 0px 1px #2d2d2d;
}
input[type="checkbox"]:checked:before,
input[type="radio"]:checked:before {
content: "";
display: block;
background: #191919;
box-shadow: inset 0px 0px 0px 1px #505050;
animation: shrink-bounce 200ms cubic-bezier(.4, .0, .23, 1);
}
input[type="checkbox"]:checked:after,
input[type="radio"]:checked:after {
content: "\f00c";
font-family: 'font-awesome';
display: block;
color: #40c355;
text-align: center;
position: relative;
bottom: 13px;
animation: shrink-bounce 200ms cubic-bezier(.4, .0, .23, 1);
}
input[type="radio"]:before {
border-radius: 50%;
}
input[type="radio"]:checked:after {
content: "";
width: 7px;
height: 7px;
background-color: rgba(64, 195, 85, .8);
border-radius: 50%;
bottom: 10px;
left: 3px;
}
div.sni h1 {
font-size: 11pt;
font-weight: normal;
width: calc(100% - 50px);
margin: 8px auto 0px auto;
padding: 10px 0px;
border-radius: 2px;
background: rgb(29, 29, 29) none repeat scroll 0% 0%;
display: inline-block;
position: inherit;
top: -4px;
}
#gd5 .g2 img,
#gd5 .g3 img,
div#tagmenu_act img {
display: none;
}
#gd5 .g2 a,
#gd5 .g3 a {
display: inline-block;
padding: 7px 10px;
background: #212121;
border: 1px solid #2b2b2b;
color: #656565;
border-radius: 1px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.14);
margin: 5px 0px;
float: right;
width: 140px;
text-align: center;
}
#gd5 .g2 a:hover {
background: #262626;
}
#gd5 .g3 a {
background-color: #751a1a;
border: 1px solid #952828;
color: #dbdada;
}
div#tagmenu_act a {
-webkit-box-shadow: inset 0 -4px 0 rgba(35, 39, 42, .6);
background-color: #4f545c;
box-shadow: inset 0 -4px 0 rgba(35, 39, 42, .6);
color: #95989d;
border: 1px solid #202225;
border-radius: 2px;
height: 23px;
margin-right: 3px;
min-height: 14px;
min-width: 14px;
padding: 3px 6px 4px;
text-align: center;
}
div#tagmenu_act a:active {
-webkit-transform: translateY(2px);
height: 21px;
padding-bottom: 2px;
transform: translateY(2px);
-webkit-box-shadow: inset 0 -2px 0 #242629;
box-shadow: inset 0 -2px 0 #242629;
color: #777a7e;
}
.id1 .id2:hover {
overflow: visible;
}
.id1 .id2 a:hover {
display: block;
background-color: rgba(30, 30, 30, .7);
position: relative;
z-index: 1;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}
span.scb {
color: #0095ff;
}
#b.stuffbox div#b2 {
background-image: none;
}
div.ir {
background-image: url(https://github.com/eXo-Necro/Files/blob/master/zone-telechargement/rt.png?raw=true);
}
}
This post has been edited by Zero_G: Jul 27 2019, 10:10
[CSS Stylish] Dark Theme + Better category buttons
Nov 26 2017, 18:00
