jav.guru - dark by xiggi

/* ==UserStyle==
@name           jav.guru 
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Deep dark theme for jav.guru
@author         Me
==/UserStyle== */

@-moz-document url-prefix("https://jav.guru/") {
@import url('https://fonts.cdnfonts.com/css/nunito');
    :root {
        /** Backgrounds **/
        --main-bg: rgb(12, 12, 12);
        
        --second-bg: rgb(21, 21, 21);
        --second-bg-opacity: rgba(21, 21, 21, .5);
        
        --third-bg: rgb(31, 31, 31);
        --third-bg-hover: rgb(31 31 31 / 80%);;
        
        /** Colors **/
        --white: #fff;
        --gray: #8b8888;
        --pink: #eb0c92;
        --pink-hover: rgba(235, 12, 146, .5);
    }
    
/** Scrollbar **/
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--main-bg);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--gray);
}
    
/** placeholder text **/
    
::-webkit-input-placeholder { /* Edge */
  color: #ccc;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #ccc;
}

::placeholder {
  color: #ccc;
}
    
::selected {
        background: var(--third-bg);
    }
    
    body {
        background-color: var(--main-bg);
        color: var(--gray);
    }
    
    .site-content {
        background: var(--main-bg);
    }
    
    .site-footer {
        display: none;
    }
    
.sidebar .widget-title {
    background: var(--main-bg);
    border-top: none;
}
    
    .widget-area .widget {
        background: var(--second-bg);
        color: var(--gray);
    }
    
    h2 a {
        color: #fff;
    }
    
    h2 a:hover, h2 a:active {
        color: #ccc;
    transition: 0.2s;
    }
    
    a {
        color: #ccc;
    }
    
a:hover, a:focus, a:active {
    color: #fff;
    transition: 0.2s;
}
    
.wp-pagenavi a, .wp-pagenavi a:link {
    color: #ccc;
    background-color: var(--second-bg);
    border: none;
    margin-left: 5px;
    border-radius: 10px;
}
    
.wp-pagenavi span.current {
    color: #ffffff;
    background-color: var(--pink);
    border: 1px solid transparent;
    border-radius: 10px;
}
    
.wp-pagenavi a:hover {
    border: none;
    background: var(--third-bg);
    color: #fff;
    transition: 0.2s;
}

.tags:before {
    color: inherit;
}
    
.jav777 .fa-heart:before {
    color: inherit;
    }
    
.jav777 .fa-comment:before {
    color:inherit;
}
    
.sidebar .cat-item:before, .sidebar .textwidget li:before {
    color: #ccc;
    margin-right: 10px;
    }
    
    li::marker {
    color: var(--white); 
    }
    
.home .inside-article {
        border-radius: 10px;
    }
    
    .imgg img, .wpp-thumbnail {
        border-radius: 5px;;
}
    
    .imgg img:hover, .actress-info img:hover, .page .inside-article .wpp-list li a img:hover, .wpp-thumbnail:hover {
    opacity: 50%;
    transition: 0.2s;
    }
    
    aside#recent-comments-5 {
        display: none;
    }
    
.jav777 {
    color: var(--gray);
    margin-top: 5px;
}
    
    p:last-child {
    color: var(--gray);
    margin-top: 5px;
    }
    
    .site-header {
        background-color: var(--main-bg);
        margin-bottom: 1em;
    }

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select {
    color: var(--white);
    background-color: var(--third-bg);
    border-color: transparent;
}
    
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
    color: var(--white);
    background-color: var(--third-bg-hover);
    border-color: transparent;
}
    
input.search-field:focus {
    box-shadow: none;
    outline: 2px solid var(--pink);
}
    
    .infoleft {
        color: var(--white);
    }
    
.infoleft li{
        color: var(--white);   
    }
    
.infoleft li {
    letter-spacing: normal;
}
    
 .infoleft li a {
    color: #ccc;
        margin-left: 5px;
    }
    
    .infoleft li a:hover, .infoleft li:active {
        color:#fff;
        transition: 0.2s;
    }
    
    .infoleft li a:before {
        margin-left: 5px;
        content: "";
    }
    
    .post .inside-article {
        color: var(--white);   
    }
    
#wpdcom .wpd-thread-head .wpd-thread-info {
    border-bottom: 2px solid var(--pink);
}
    
#wpdcom .wpd-thread-head {
    border-bottom: 2px solid var(--gray);
}
    
#wpdcom .wpd-thread-head .wpd-thread-info {
    color: var(--pink);
    }
    
.wpd-comment-right {
    background: var(--second-bg);
    margin: 5px;
    position: relative;
    border-bottom: 3px solid #66666647;
    padding: 10px 20px 10px 20px;
    color: var(--gray);
    border-radius: 2px;
}
    
#wpdcom .wpd-comment-text p {
    color: var(--gray);
    margin-top: 12px;
}
    
    #wpdcom .wpd-blog-guest .wpd-comment-author, #wpdcom .wpd-blog-guest .wpd-comment-author a {
        color: var(--pink);
    }
    
    #text-95 .wpp-post-title {
        color: #ccc;
    }
    
    #text-95 .wpp-post-title:hover, #text-95 .wpp-post-title:active {
        color: #fff;
        transition: 0.2s;
    }
    
.wpp-views:before {
    content: '\f06e';
    color: var(--gray);
    margin-right: 4px;
    font-weight: 600;
    font-family: Font Awesome\ 5 Free;
}
    
#section-li a {
    border-radius: 5px;
    background: var(--second-bg);
    border: 2px solid transparent;
    color: #ccc;
    letter-spacing: -.8px;
    padding:5px 5px;
    line-height: inherit;
    font-weight: 500;
}
    
#section-li a:hover {
    background: rgb(235 12 146 / 50%);
    color: #fff;
}
    
    #section-li a:active, a#wp-btn-iframe:active, a#wp-btn-iframe:focus, #section-li a:focus, #section-li a:target {
    background: var(--pink);
    color: #fff;
    }
    
li#dl_jav_free a {
    background: var(--third-bg);
}
    
li#dl_jav_free a:hover {
    background: var(--pink);
}
    
.wpulike-updown-voting button.wp_ulike_btn {
    background: var(--third-bg);
    padding: 20px;
    border-radius: 5px;
}
    
.wpulike-updown-voting button.wp_ulike_btn:hover {
    background: var(--pink);
    padding: 20px;
    border-radius: 5px;
    transition: 0.2s;
}
    
    h1 {
        color: var(--white);
    }
    
h1.titl {
    margin-bottom: 20px;
}
    
.main-navigation .main-nav ul li a {
    background: transparent;;
}
    
.main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li:focus > a, .main-navigation .main-nav ul li.sfHover > a, .main-navigation .menu-bar-item:hover > a, .main-navigation .menu-bar-item.sfHover > a {
    background-color: var(--third-bg);
}
.main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li:focus > a, .main-navigation .main-nav ul li.sfHover > a, .main-navigation .menu-bar-item:hover > a, .main-navigation .menu-bar-item.sfHover > a {
    color: #fff;
    transition: 0.2s;
}
    
.main-navigation .main-nav ul ul li > a, .main-navigation .main-nav ul ul li:focus > a, .main-navigation .main-nav ul ul li.sfHover > a {
    background: var(--second-bg);
    }
    
.main-navigation .main-nav ul ul li:hover > a, .main-navigation .main-nav ul ul li:focus > a, .main-navigation .main-nav ul ul li.sfHover > a {
    color: var(--pink);
    background-color: var(--third-bg);
}
    
.main-navigation:not(.toggled) ul li.sfHover>ul, .main-navigation:not(.toggled) ul li:hover>ul {
    border: 1px solid var(--third-bg);
    box-shadow: 1px 1px 20px var(--third-bg);
}
    
.widget .search-form button:before {
    color: currentColor;
}
    
.sidebar .widget {
    margin-bottom: 20px;
}
    
.thumbs {
    margin-top: 10px;
}
    
.wpulike-updown-voting .count-box {
    margin-left: 10px;
}
    
.wpulike {
    margin-left: 20px;
}
    
ul.smenu {
    margin-top: 10px;
}
    
#comments {
    display: none;
}
    
    #text-95 .wpp-taxonomy.actress {
        color: #ccc;
    }
    
.inside-navigation .navigation-search input[type="search"] {
    border: 4px solid transparent;
    border-radius: 5px;
}
    
.has-inline-mobile-toggle #site-navigation.has-active-search .navigation-search input {
    background: var(--third-bg);
    opacity: inherit;
}
    
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    background-color: var(--pink);
    color: var(--white) !important;
}
    
.main-navigation .main-nav ul li[class*="current-menu-"] > a:hover, .main-navigation .main-nav ul li[class*="current-menu-"].sfHover > a {
    background-color: var(--third-bg);
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a:hover, .main-navigation .main-nav ul li[class*="current-menu-"].sfHover > a {
    color: var(--pink);
    background-color: var(--third-bg);
}
    
    .descriptionn {
        color: #ccc;
    }
    
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a{
    background-color: var(--pink);
    color: var(--white);
}
    
.main-navigation .main-nav ul ul li a:before {
    color: currentColor;
    margin-right: 5px;
}
    
.main-navigation .main-nav ul ul li a {
    color: #ccc;
}
    
.tag h1.page-title:before {
    margin-right: 10px;
}
    
    #text-95 .wpp-views {
        color: var(--gray);
        margin-top: 5px;
    }
    
span.wpptax {
    margin-top: 5px;
}
    
span.wpp-views {
    margin-top: 5px;
}
    
    .grid1 h2 {
        text-align: center;
    }
    
.content-area input[type="search"] {
    border: 1px solid var(--third-bg);
    border-radius: 10px;
    background-color: var(--second-bg);
    }
    
.content-area .search-form button:before {
    color: var(--pink);
    }
    
    span#sortyb {
        color: var(--gray);
        margin-right: 5px;
    }
    
option {
    background: var(--second-bg);
}
    
option:hover {
    background-color: var(--third-bg);
    }
    
#sortyb textarea, select {
    color: #fff;
    background-color: var(--second-bg);
    border: 0px solid white;
 ...