HiAnime - Configurable by whatsu

/* ==UserStyle==
@name           HiAnime - configurable
@namespace      github.com/openstyles/stylus
@version        1.5.0
@description    Style for hianime with custom theme and other tweaks
@author         Whatsu
@preprocessor   stylus
@supportURL     https://userstyles.world/style/18044/hianime    

@var checkbox cTop "Display Trending" 1
@var checkbox cTop5 "Display top tables" 0
@var checkbox cEpisodesBellow "Episodes always bellow player" 0
@var select sServer "Server" {
  "Default":"none",
  "Subbed Only":"sub",
  "Dubbed Only":"dub"
}
@var select sEpisodes "Episodes" {
  "Default":"none",
  "Numbers only":"number",
  "List only": "list"
}

@var select sTheme "Theme" {
  "Default":"none",
  "Custom":"custom",
}
@var color coPrimary "Primary" #0e0e0e
@var color coSecondary "Secondary" #26262666
@var color coHighlitght "Highlight" #f00
@var color coText "Text color" #f1f1f1

@var range rStretch "UI stretch" [90, 50, 100, 1, '%']
@var checkbox cTheather "Theater mode" 0
@var checkbox cDisqus "Display comments" 1
@var checkbox cDisqusMain "Display home page comments" 0
@var checkbox cNewOnSite "Display 'New On ..' section" 0
@var checkbox cSlideshow "Display slideshow" 1
@var checkbox cSchedule "Display schedule" 1
@var checkbox cTrending "Display trending anime" 1
@var checkbox cTrendingPost "Display trending post" 1
@var checkbox cWatchPopular "Display popular on watch page" 1
@var checkbox cHeader "Header always on top" 1
@var checkbox cTogether "Watch2gether" 1
@var checkbox cLogo "Hide Logo" 0
@var checkbox cScroll "Hide scrollbar" 0
@var checkbox cSeason "Hide season images" 0

@var range rImages "Image intensity" [90, 10, 100, 1, '%']
==/UserStyle== */
@-moz-document domain("hianime.to") 

    $bg1 = #201f31
    $bg2 = rgba(78, 78, 109, .34)
    $c1 = #eee
    $c2 = #c0c0c0
    $h1 = #ffbade
    $ch1 = #000

    if sTheme == "custom"
        $bg1 = coPrimary
        $bg2 = coSecondary
        $h1 = coHighlitght
        $c1 = coText
        $ch1 = coText

    if (sTheme != "none")
        $c2 = rgba($c1, 0.6)

    body, #slider .swiper-slide
        background: $bg1
        color: $c1
        
    .pizza
        display: none

    .deslide-item .deslide-cover .deslide-cover-img:after
        background: -moz-linear-gradient(0deg, $bg1 0, #201f3100 50%, $bg1 100%)
        background: -webkit-linear-gradient(0deg, $bg1 0, #201f3100 50%, $bg1 100%)
        background: linear-gradient(0deg, $bg1 0, #201f3100 50%, $bg1 100%)
    .hs-toggles .hst-item .hst-icon i, .deslide-item .desi-sub-text, .hr-community .btn i
        color: $h1
    .zicon.zicon-live, .st0, .st1
        fill: $h1 !important
        color: $h1 !important
    .toggle-lang>span.en,
    .toggle-lang.off>span.jp
        background: $h1 
    @media screen and (max-width: 1299px) 
        #header.header-home
            background: $bg1 !important

    span#AddMalDiv #AddMal, .table_schedule .btn-showmore:hover, .pre-pagination .pagination .page-item .page-link:hover
        color: $h1 !important
    .search-content .filter-icon:hover, .table_schedule .table_schedule-list li:hover .film-detail .fd-play .btn-play
        background: $h1 !important
    .search-content input.search-input
        background: $bg2
        border-radius: 6px
        color: $c1
    .tsd-item
        border: 1px solid $bg1
    .tsd-item:hover
        border: 1px solid $h1
    .ts-navigation .btn:hover
        border: 2px solid $h1 
    .fa, .fas
        color: $c1
        
    .screen-items .item:hover .icon-play i
        color: $c1
    .screen-items .item .icon-play i
    .screen-items .item .icon-play 
        color: $c1 !important
        border-color: $c1 !important

    #xsearch.home-search .search-content .search-submit .search-icon i
        color: $ch1

    .btn-primary, .pre-qtip-button .btn.btn-play, .pre-qtip-detail .pqd-li.badge-quality, .tick-item.tick-quality, #action-button .btn, #xsearch.home-search .search-content .search-submit, .table_schedule .table_schedule-date .tsd-item.active, .search-content .search-result-pop .nav-bottom, .schedule-alert .alert,   .screen-items .item:hover .icon-play
        background: $h1 !important
        border-color: $h1 !important
        color: $ch1 !important
    .table_schedule .table_schedule-date .tsd-item.active:hover
        border: 1px solid $h1 !important
        background: $bg1 !important
    .btn-primary:hover > i, .pre-qtip-button .btn.btn-play:hover > i, .share-buttons .share-buttons-block .sbb-title span, #xsearch.home-search .search-content .search-submit .search-icon:hover i
        color: $h1
    .btn-primary:hover, .pre-qtip-button .btn.btn-play:hover, #action-button .btn:hover, #xsearch.home-search .search-content .search-submit:hover
        background: #0000 !important

    .preform.preform-dark .form-control, .search-content .search-result-pop
       background: $bg1

    a:hover, .block_area .block_area-header .cat-heading
        color: $h1
        
    .os-list .os-item:before
        background: none
    .os-list .os-item .season-poster
        filter: none
        
    .os-list .os-item:hover
         background: rgba($bg1, 0.8)
        
    .os-list .os-item.active
        border: 3px solid $h1 !important
        background: rgba($bg1, 0.8)
    
  
        
    .os-list .os-item.active .title
        color: $h1 !important

    .btn-focus:hover, .btn-primary:hover, .btn-tab.active:hover, .pre-qtip-button .btn.btn-play:hover, #action-button .btn:hover, #xsearch.home-search .search-content .search-submit:hover, #btn-login:hover
        color: $h1 !important
        border: 1px solid $h1 !important
    #sidebar_menu_bg, #header.fixed, #header
        background: rgba($bg1, 0.8) !important
    .hr-community .btn,  .qtip-default, .btn-secondary, .btn-tab, .anis-content .anisc-info-wrap, #MalData>span, .bac-list-wrap .bac-item, .cbox.cbox-list, .cbox.cbox-genres, .table_schedule .table_schedule-date .tsd-item, .show-comments, .share-buttons.share-buttons-detail, .player-controls, .player-servers, .ss-choice, #episodes-content, .player-servers #servers-content
        background: $bg2 !important
    .btn-secondary, .btn-tab
        border-color: $bg2 !important
    .btn-secondary:hover, .btn-tab:hover
        background: $bg2 !important
        border-color: $c1 !important
    .anis-content .anisc-info-wrap, #MalData>span, .bac-list-wrap .bac-item, .cbox.cbox-list, .other-season, .schedule-alert 
        background: $bg2

      a, .table_schedule .table_schedule-list li .film-detail .fd-play .btn-play, .btn-secondary, .btn-tab, .toggle-lang.off>span.en, .cbox.cbox-list .anif-block-chart li.item-top .film-number span, .swiper-button, #sidebar_menu .toggle-sidebar, #sidebar_menu, #sidebar_menu .sidebar_menu-list>.nav-item .nav>.nav-item.nav-more .nav-link, .hr-community .btn, .pre-qtip-title, .pre-qtip-content, .stick-text, .breadcrumb-item+.breadcrumb-item:before, .breadcrumb-item.active, .cw_l-line .ibody
        color: $c1

    .btn-showmore, .text-white, .mw-heading, .mw-body .mwb-left h2, .xhashtag .item, .xhashtag span.title, .heading-news, .connecting-list .item .item-name a
        color: $c1 !important

    .film_list .film_list-wrap .flw-item .film-detail, .table_schedule .table_schedule-date .tsd-item .date, .table_schedule .table_schedule-list li .time, .table_schedule .table_schedule-list li .film-detail .fd-play .btn-play i, .block_area .block_area-header .viewmore .btn, .detail_page .detail_page-watch .detail_page-infor .description .btn-default, .cbox.cbox-list .anif-block-chart li .film-number span, .pre-qtip-detail .pqd-li, .user-name, .cw_l-line .ibottom .ib-li, .connecting-list .item .subject, .connecting-list .item .time, .cd-article .cda-content
        color: $c2 !important

    .pre-qtip-content .btn-fav:hover > i
        border: 1px solid $c1

    .tick-item.tick-sub, .tick-item.tick-dub,           
    .tick-item.tick-sub > i, .tick-item.tick-dub > i
        color: $c1

    .ts-navigation .btn, .anw-tabs .nav-item .nav-link.active, #slider .sc-detail .scd-item .quality, .ps__-list .item .btn.active, .nc-list .item.item-pin .is-pin, .pre-pagination .pagination .page-item.active .page-link, ul.az-list li a:hover, ul.az-list li.active a, .btn-sm.btn-filter-item:hover, .btn-sm.nl-item-btn:hover
        background: $h1
        color: $ch1

    .toggle-basic.off .tb-result:before
        color: $c2

    .link-highlight, .toggle-basic .tb-result, .player-servers .ps_-block .ps__-title i, #sidebar_menu .sidebar_menu-list>.nav-item>a.nav-link:hover
        color: $h1 !important   

    .button-rate > *, .block-rating
        background: $bg2 !important

    .nli-select .custom-select
        color: $h1
        background: inherit
        border-bottom: 1px solid $h1

    .anif-block-ul li .film-fav.active, .anif-block-ul li .film-fav:hover, .rep-more .btn
        color: $h1 !important

    .pre-qtip-content .btn-fav, .button-rate .btn
        color: $c1 !important
    
@-moz-document domain("hianime.to")
    .tick-item.tick-sub
        background:rgba(69, 145, 68, .7)
    .tick-item.tick-dub
        background: rgba(0, 145, 255, .7)
    .tick-item.tick-eps
        background: rgba(hsl(0, 0%, 48%), 0.7)
    .pre-qtip-content .btn-fav, .pre-qtip-content .btn-fav:hover
        background: none
    .pre-qtip-content .btn-fav > i
        border: 1px solid #0000
        margin: -5px
        padding: 10px
        border-radius: 30px
    .dt-comment, .award-bg, .anis-cover
        display: none
    .pre-qtip-button .btn.btn-play, #action-button .btn, #xsearch.home-search .search-content .search-submit 
         border: 1px solid #0000 !important
    .ps_-status 
        display: none
    .player-servers
        padding-left: 15px
    .player-servers #servers-content
        border-radius: 6px
        min-height: 50px
    
    .anis-watch-wrap .anis-watch-tv .player-frame 
        padding-bottom: 56.25%
        
    .anis-watch-wrap.extend .anis-watch-detail
        display: block !importan...