3hentai.net by xiggi

/* ==UserStyle==
@name         3hentai.net
@version      20240903.08.36
@namespace    ?
==/UserStyle== */

@-moz-document domain("3hentai.net") {
@import url('https://fonts.cdnfonts.com/css/nunito');

:root {
        --dark: #0d0d0d;
        --gray: #121111;
        --gray-button: #333;
        
        --purple: rgb(214, 50, 179);;
        --white: #fff;
    }

::selection {
    background: var(--purple);
    color: #fff;
}

    /** Scrollbar **/
    /* width */
    ::-webkit-scrollbar {
        width: 5px;
    }

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

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: var(--gray-button);
    }

body {
    font-family: Nunito,sans-serif;
}

.doujin.blacklisted, #main-content .doujin.blacklisted, div#thumbnail-gallery, div#doujin-page-footer-ban-agsy, #footer-ban-agsy, #header-ban-agsy, #middle-ban-agsy, #main-content .index-special, footer, .container-xl.text-secondary.text-center.content-bottom, button.btn.btn-secondary.dropdown-toggle.flag.flag-en, h3.js-clipboard, a.affil.afill-also-in-content, .affil {
    display: none;
}

.tagify {
    background: #222;
    border-color: transparent;
}

.tagify__input {
    color: #ccc;
}

.tagify__input:before, .tagify__input:after {
    color: #ccc;
}

body, #reader .reader-nav {
    background: var(--dark);
}

.page-header .bottom-menu, .page-header {
    background: var(--gray);
}

#main-content .bg-container {
    background: linear-gradient(to bottom, var(--gray), transparent)
}

.btn-secondary {
    background-color: transparent;
    border-color: transparent;
    color: #ccc;
    border-radius: 10px;
    font-weight: 500 !important;
}

.btn-secondary.focus, .btn-secondary:focus, .btn-secondary:hover, .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
    background-color: var(--gray-button);
    border-color: transparent;
    color: #fff;
}

.btn-primary {
    background-color:#272626;
    border-color: transparent;
    color: #ddd5d5;
    border-radius: 10px;
    font-weight: 500 !important;
}

button.btn.btn-primary.font-weight-bold.btn-with-svg.btn-with-text.js-toggle-favorite {
    background-color:#201e1e;
}

button.btn.btn-primary.font-weight-bold.btn-with-svg.btn-with-text.js-toggle-favorite:hover {
    background: #9c1f82;
}
    
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    border-color: transparent;
    }

.page-header .bottom-menu a {
    border-bottom: 1px solid transparent;
    border-radius: 10px;
}

.page-header .top-menu a.menu-link {
    border-radius: 10px;
}

.page-header .bottom-menu a:hover, .page-header .top-menu a.menu-link:hover {
    background-color: var(--gray-button);
    border-color: transparent;
    color: #fff;
    transition: 0.2s;
}

button.btn.btn-primary.font-weight-bold.btn-with-svg.btn-with-text.js-toggle-favorite:hover {
    transition: 0.2s;
}

.btn-with-svg.btn-svg-left svg {
    fill: currentColor;
}

#main-content .doujin .title, #main-content .filter-elem .name {
    background: transparent;
}

#main-content .doujin-col:hover, #main-content .doujin-col:active {
    opacity: 70%;
    transition: 0.2s;
}

#main-content .doujin a:visited, #main-content .doujin-col:visited {
    opacity: 50%;
}

#main-content .filter-elem .name[data-qty]:after {
    color: #ccc;
    border-radius: 5px;
    background: var(--dark);
    font-size: .9em;
    padding: 2px 10px;
    line-height: 20px;
}

#main-content .filter-elem:hover .name[data-qty]:after {
    background: transparent;
    box-shadow: none;
    color: #fff;
    transition: 0.2s;
}

#main-content .doujin a {
    background-color: transparent;
    display: block;
    text-decoration: none;
}

.page-header .bottom-menu a {
    border-bottom: 1px solid transparent;
}

.page-header .top-menu form .input-search, #main-content #search-favorites input {
    background:#272626;
    color: #ccc;
}

.page-header .top-menu form .input-search::placeholder,  .page-header .top-menu form .input-search:focus::placeholder,
#main-content #search-favorites input::placeholder {
    color: #ddd;
}

.page-header .top-menu form .input-search:focus,  .page-header .top-menu form .input-search:focus {
    background: #201e1e;
    color: #fff;
    transition: 0.2s;
}

#main-content .filter-elem .name {
    font-weight: 500;
    border: 1px solid transparent;
    background: #201e1e;
    padding: 5px 10px;
    border-radius: 5px;
}

#main-content #main-cover img {
    background-color: transparent;
}

#main-content #main-cover img:hover {
    opacity: 50%;
    transition: 0.2s;
}

#main-content .filter-elem:hover .name{
    background: var(--gray-button);
    transition: 0.2s;
}

#main-content .doujin {
    background: transparent;
}

#main-content .tag-container {
    min-height: 30px;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-right: 10px;
    display: inline-block;
    color: #fff;
}

span.filter-elem {
    display: inline-flex;
    margin: 4px 0;
}

#main-content .filter-elem:hover {
    transition: 0.2s;
}

#main-content .sorts .sort-by {
    background: #201e1e;
    border-radius: 10px;
}

#main-content .sorts .sort-by>a.current {
    background: var(--purple);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
}

#main-content .sorts .sort-by>a.current:hover, #main-content .page-item.active .page-link:hover  {
    background: #9c1f82;
    color: #ccc;
    transition: 0.2s;
}

#main-content .sorts .sort-by>a:hover {
    background: var(--gray-button);
    color: #fff;
    transition: 0.2s;
    border-radius: 10px;
}

.alert-info {
    background-color: var(--gray);
    border-color: transparent;
    color: #d6d6d6;
}

.alert-info .alert-link {
    color: currentColor;
}

.alert-info .alert-link:hover {
    color: #fff;
    transition: 0.2s;
    text-decoration: none;
}

.alert {
    border-radius: 10px;
}

.page-link {
    background-color: #201e1e;
    border: 1px solid transparent;
    color: #ccc;
}

.page-link:hover {
    background-color: var(--gray-button);
    border-color: transparent;
    color: #fff;
    transition: 0.2s;
}

.page-link:focus {
    box-shadow: 0 0 0 0.2rem rgb(214 50 179 / 25%);
    background: #9c1f82;
}

li.page-item.disabled {
    background-color: var(--gray);
    border: 1px solid transparent;
    color: #ccc;
    opacity: 50%;
}

#reader .reader-nav, #reader .reader-nav .reader-pages .btn-page, #reader .reader-nav .reader-settings .btn-settings, #reader .reader-nav .reader-settings .btn-zoom {
    color: #ccc;
}

#reader .reader-nav .reader-pages .btn-page:hover, #reader .reader-nav .reader-settings .btn-settings:hover, #reader .reader-nav .reader-settings .btn-zoom:hover, #reader .reader-nav .reader-back .reader-go-back:hover {
    background: var(--gray-button);
    text-decoration: none;
    color: #fff;
    border-radius: 10px;
    transition: 0.2s;
}

#main-content .filter-elem .name[data-qty] {
    font-weight: 400;
}

path, polygon {
    fill: currentColor;
}

#reader .reader-nav {
    margin-top: 5px;
    margin-bottom: 5px;
}

.modal-content, .modal-footer {
    background-color: var(--gray);
}

.modal-header {
    background: var(--gray-button);
}

.form-control {
    background-color: var(--gray-button);
    border: 1px solid transparent;
    color: #ccc;
}

.form-control:focus {
    background-color: var(--gray-button);
    border-color: transparent;
    box-shadow: 0 0 0 0.2rem rgb(214 50 179 / 25%);
    color: #fff;
}

code {
    background: var(--gray-button);
    color: #fff;
    padding: 0 10px;
}

a.text-primary {
    color: #ccc !important;
}

a.text-primary:focus, a.text-primary:hover {
    color: #fff !important;
}

h1.text-center.font-weight-bold {
    color: #fff;
}

.tagify {
    --tags-disabled-bg: #f1f1f1;
    --tags-border-color: var(--gray-button);
    --tags-hover-border-color: transparent;
    --tags-focus-border-color: #d632b3;
    --tag-bg: var(--dark);
    --tag-hover: var(--gray-button);
    --tag-text-color: #ccc;
    --tag-text-color--edit: #ccc;
    --tag-pad: 0.3em 0.5em;
    --tag-inset-shadow-size: 1.1em;
    --tag-invalid-color: #d39494;
    --tag-invalid-bg: hsla(0,42%,70%,.5);
    --tag-remove-bg: rgba(181, 2, 2, .7);
    --tag-remove-btn-color: #fff;
    --tag-remove-btn-bg: none;
    --tag-remove-btn-bg--hover: red;
    --input-color: #ccc;
    --tag--min-width: 1ch;
    --tag--max-width: auto;
    --tag-hide-transition: 0.3s;
    --placeholder-color: rgba(0,0,0,.4);
    --placeholder-color-focus: rgba(0,0,0,.25);
    --loader-size: .8em;
}

.tagify__tag__removeBtn:hover+div>span {
    opacity:1;
    color: #fff;
}

strong {
    margin-right: 5px;
    color: #fff;
}

time, span.field-light-text {
    color: #ccc;
}

#main-content .avatar-wrapper-square img {
    border-radius: 10px;
}

#main-content .filter-elem .name[data-qty] {
    padding: 2px 10px;
}

.btn-primary.focus, .btn-primary:focus, .btn-primary:hover {
    border-color: transparent;
    color: #fff;
    transition: 0.2s;
}

#main-content .doujin .title.flag:before {
    height: 30px;
    margin-top: 4%;
    width: 20px;
    z-index: 2;
}

#main-content #similar-content {
    margin-bottom: 25px;
    padding-bottom: 20px;
    padding-top: 20px;
}

h2.text-center.font-weight-bold {
    color: #fff;
}

#main-content #main-cover img, img.lazy.small-bg-load.entered.loaded {
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%,var(--gray) 10%);
}

#main-content #main-info h1 {
    font-weight: 500 !important;
}

#main-content #main-info .middle-title {
    font-weight: bold;
    margin-left: 5px;
    margin-right: 5px;
}

#main-content .avatar-wrapper-square.empty, .affil-in-content {
    display: none;
}

#main-content .simple-form a {
    color: #ccc;
}

#main-content .simple-form a:hover, #main-content .simple-form a:active {
    ...