Javtiful by xiggi

/* ==UserStyle==
@name         Javtiful
@version      20241003.15.47
@namespace    ?
==/UserStyle== */

@-moz-document domain("javtiful.com") {
    :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);
    }

[use-theme=dark], [use-theme=light] {
    --navbar-background-color: var(--main-bg);
    --navbar-border-color: transparent;
    --bg-hover-secondary: var(--third-bg);
    --bs-black-rgb: 255, 255, 255;
    --bs-btn-color: #ffffff;
    --bs-card-bg: var(--second-bg);
    --card-link-color: rgb(209 209 209 / 90%);
    --sidebar-svg-color: rgb(209 209 209 / 53%);
    --video-views-color: rgb(179 179 179 / 85%);
    --splide-pagination-bg-color: #ed1f1f;
    --accordion-active-bg-color: #343434;
    --accordion-active-color: #fff;
    --video-title-color: rgb(255 255 255);
    --video-details-label-color: rgb(255 255 255 / 72%);
    --video-details-item-links-bg-color: rgb(76 76 76 / 10%);
    --video-details-item-links-color: rgb(229 229 229 / 77%);
    --video-details-item-links-border: 1px solid rgb(106 106 106 / 46%);
    --bs-btn-bg: transparent;
    --bs-btn-hover-light-bg: #4a4a4a;
    --border-dashed-border-color: 2px dashed #424242;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-radius: 0.375rem;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-danger: #dc3545;
    --bs-form-control-bg: var(--bs-body-bg);
    --bs-border-radius-lg: 0.5rem;
    --bs-success-rgb: 25, 135, 84;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-2xl: 2rem;
    --bs-border-radius-pill: 50rem;
    --bs-white-rgb: 24, 25, 26;
    --bs-body-color: #ccc;
    --bs-body-color-rgb: 173, 181, 189;
    --bs-body-bg: var(--main-bg);
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-emphasis-color: #f8f9fa;
    --bs-emphasis-color-rgb: 248, 249, 250;
    --bs-secondary-color: #ccc;
    --bs-secondary-color-rgb: 173, 181, 189;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;
    --bs-tertiary-color: rgba(173, 181, 189, 0.5);
    --bs-tertiary-color-rgb: 173, 181, 189;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;
    --bs-primary-text: #6ea8fe;
    --bs-secondary-text: #dee2e6;
    --bs-success-text: #75b798;
    --bs-info-text: #6edff6;
    --bs-warning-text: #ffda6a;
    --bs-danger-text: #ea868f;
    --bs-light-text: #f8f9fa;
    --bs-dark-text: #dee2e6;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: var(--second-bg);
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #740d16d1;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #495057;
    --bs-success-border-subtle: #0f5132;
    --bs-info-border-subtle: #055160;
    --bs-warning-border-subtle: #664d03;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;
    --bs-heading-color: #fff;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #9ec5fe;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color-rgb: 158, 197, 254;
    --bs-code-color: #e685b5;
}

a.cam.navlist-link.p-2.text-decoration-none.text-black.d-none.d-xl-block, a.javhd.navlist-link.p-2.text-decoration-none.text-black.d-none.d-xl-block, div#header-info, .sidebar-another-links, a#withdrawal-menu, a.dropdown-item.ps-1.pe-1.pt-2.pb-2.fw-semibold.d-flex.align-items-center.text-success.fw-bolder.border.border-success-subtle.rounded-2, a.dropdown-item.border.border-secondary.rounded.border-opacity-50.mb-2.ps-1.pe-1.pt-2.pb-2.fw-semibold.d-flex.align-items-center, .root--QkmnQ.center--5SZFg, button.share-btn.btn.p-0.pb-1.fw-bold, a.d-block.text-success.text-decoration-none.p-2.hover-secondary.text-truncate, .offcanvas-header.border-bottom.border-secondary-subtle.border-opacity-10, section#livecams, .video-comments.mt-5.ps-2.pe-2.ps-lg-0.pe-lg-0, #related-section, a.navlist-link.p-2.text-decoration-none.text-black.d-flex.align-items-center, div.flex-grow-1.mb-2.mt-2.ms-3.me-3.text-center:nth-of-type(7), div.flex-grow-1.mb-2.mt-2.ms-3.me-3.text-center:nth-of-type(6), .fw-bold.pb-1.p-0.btn.report-btn, a.fs-6.d-block.text-decoration-none.text-black.pb-2.pt-2.pe-4.ps-4.sidebar-link:nth-of-type(12), a.fs-6.d-block.text-decoration-none.text-black.pb-2.pt-2.pe-4.ps-4.sidebar-link:nth-of-type(11), a.fs-6.d-block.text-decoration-none.text-black.pb-2.pt-2.pe-4.ps-4.sidebar-link:nth-of-type(10), .theeffect > .justify-content-center.align-items-center.d-flex, .fw-bold.pb-1.p-0.btn.download-btn {
    display: none !important;
}

.channel-items .channel-items__details .channel-items__details__name a:hover {
    color: #fff;
    transition: 0.2s;
}

.splide__slide img:hover, .site-title a img:hover, .site-title a img:active {
    opacity: 50%;
    transition: 0.2s;
}

.label-count {
    background-color: var(--navbar-background-color);
    color: #fff;
}

.overlay-label {
    background: rgb(21 21 21 / 80%);
}

#categories-list .category-tmb::after {
    background: var(--bs-body-bg);
    filter: opacity(0.7) brightness(0.5);
}

button.btn.w-100.fw-semibold.hover-secondary.navlist-link.p-2.text-decoration-none.text-black.d-block.text-center, .text-black {
    color: #ccc !important;
}

.hover-secondary:active, .hover-secondary:focus, .playlist-items-select .form-check-input:checked + .hover-secondary, .navlist-link:hover, .hover-secondary:hover, button.btn.w-100.fw-semibold.hover-secondary.navlist-link.p-2.text-decoration-none.text-black.d-block.text-center:hover, a.navlist-link.p-2.text-decoration-none.text-black.d-block.text-center:hover {
    color: #fff !important;
}

.btn {
    color: #ccc;
}

.btn.active {
    color: #fff;
}

.hover-secondary:active, .hover-secondary:focus, .playlist-items-select .form-check-input:checked + .hover-secondary, .navlist-link:hover, .hover-secondary:hover,
.dropdown-item:hover, .dropdown-item:focus, .sidebar-link:hover {
    color: #fff !important;
}

.text-danger {
    color: inherit;
}

a.category-tmb:hover {
    opacity: 70%;
    transition: 0.2s;
}

.card {
    --bs-card-cap-bg: #000;
}

.card img.lazyloaded, img.card-img-top.lazyloaded, img.border.rounded-circle.lazyloaded {
    background: var(--second-bg);
    background-image: none;
}

.position-relative.overflow-hidden.bg-white {
    background-color: transparent !important;
}

.video-action .btn:hover {
    box-shadow: var(--bs-danger)0 2px 0 0;
    color: var(--bs-danger);
}

.video-details .video-details__item .video-details__item_links a {
    background-color: transparent;
    border: transparent;
}

.video-details .video-details__item .video-details__label {
    color: #fff;
}

.video-details .video-details__item .video-details__item_links a:hover {
    transition: 0.2s;
}

.hover-secondary:active, .hover-secondary:focus, .playlist-items-select .form-check-input:checked+.hover-secondary, .navlist-link:hover, .hover-secondary:hover {
    background-color: var(--third-bg);
    border-radius: 5px;
    color: #fff;
}

.video-action.d-flex.align-items-center.border-bottom.border-secondary-subtle.border-opacity-10.mt-3.mb-3.ps-2.pe-2.ps-lg-0.pe-lg-0 {
    border-color: transparent !important;
    justify-content: center;
    text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}

svg.bi.bi-download, svg.bi.bi-plus-lg, svg.bi.bi-eye, svg.bi.bi-plus-circle-fill, svg.bi.bi-hand-thumbs-up, svg.bi.bi-hand-thumbs-down, svg.bi.bi-heart {
    margin-right: 5px;
}

svg.bi.bi-chevron-double-right {
    margin-left: 5px;
}

.main-nav, .mobile-nav, .fly-menus {
    background-color: rgba(12, 12, 12, .8);
    backdrop-filter: blur(5px);
}
    
    #sidebarCanvas, .accordion-button, .accordion-item {
        background-color: var(--second-bg);
    }

.mobile-nav {
    border-top: none;
}

.reaction-container.border.border-secondary.border-opacity-50.d-flex.align-items-center.rounded-pill, .playlist-reaction button.btn:last-child, .reaction-container button.btn:last-child, .playlist-reaction button.btn:first-child, .reaction-container button.btn:first-child {
    border-color: transparent !important;
    border-radius: 5px !important;
}

.vr.pt-1.pb-1 {
    background: transparent;
}

button.btn.text-danger.position-absolute.top-50.start-50.translate-middle.x-video-btn:hover {
    color: #fff !important;
    transition: 0.2s;
}

.video-details.bg-secondary-subtle.mt-4.ms-2.me-2.ms-lg-0.me-lg-0.rounded-3.p-3 {
    margin-top: 0 !important;
}

.plyr__video-wrapper {
    background: var(--main-bg);
    margin-top: 1rem;
}

.plyr--video .plyr__controls {
    background: linear-gradient(to top, #0c0c0c, transparent);
    padding-bottom: 0;
}

.plyr--full-ui input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
   background-color: #dc3545; 
    box-shadow: 1px 1px 10px #dc3545;
}

a.btn.border.hover-secondary, .form-control, button.btn.border.hover-secondary.favorite-collection, .form-select {
    border-color: transparent !important;
}

.form-control {
    background-color: var(--third-bg);
}

.form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 0.25rem rgb(255 3 3 / 30%);
    border-color: rgb(255 255 255/36%);
    background-color: var(--third-bg-hover);
}

.form-select {
    background-color: var(--third-bg);
}

.plyr--video .plyr__progress__buffer, progress.plyr__progress__buffer {
    background: var(--third-bg);
}

button.plyr__controls__item.plyr__control, bu...