9Anime / AniWave by whatsu

Details

Authorwhatsu

LicenseAGPLv3

Categoryaniwave

Created2 years, 3 months ago

Updated1 year, 3 months ago

Size14 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Tweaks for 9anime:

episode list bellow player & different styles
hide/show different parts of page
background color change

Notes

Changelog 2.1.0

Added new domain
Hides "x" on a new domain
Added userCss options
- Theme - changes the theme of the site
- Background - set the color of background if theme is custom
- Darker background - reverses color multiplier effect for most colors
- Color multiplier - brighten/darken the different sections of UI, e.g. 0% will make the colors unified, 10% will make 2nd section 10% brighter/darker and 3rd section 20% brighter/darker from the set color

Changelog 2.0.4

Fixed an issue with the style being applied to all websites due to syntax error

Changelog 2.0.3

Added userCss option for player page
- Episodes - Display only numbers, numbers with episode names, list or leave it on default
- Hide DISQUS
Changed default option for Server from "Subbed only" to "Default"

Changelog 2.0.2

Added userCss options for main page:
- Display top anime toggle
- Display slideshow toggle
- Display recently updated toggle
- Display schedule toggle

Changelog 2.0.1

Renamed some options.

Changelog 2.0.0

Switched style over to UserCss. This means there is a gear next to the style with user changable options:

Main page:
- Display top tables toggle
Player page:
- Side episode list toggle
- Server choice
- Dark DISQUS toggle
- Switch server tip toggle
Website:
- UI stretch slider
- Display alerts toggle

Changelog 1.1.0

Small improvements on profile page

Changelog 1.0.0 - 1.1.0

UI is stretched to 90% of screen width
display episode list bellow the player
hidden top tables on the home page
episode list is always bellow the player
series ranking is bellow the description
removed ads on 9anime page (cannot remove ads on video player so ad-blocker is still recommended)
dark DISQUS (comments input, it will affect all sites that uses DISQUS comments)
clearer images on watch together banners
other small UI changes

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.

/* ==UserStyle==
@name           9Anime
@namespace      github.com/openstyles/stylus
@version        2.1.0
@description    A new userstyle
@author         Whatsu
@preprocessor   stylus
@supportURL     https://userstyles.world/style/5927/9anime

@var checkbox cTop "Display top anime" 1
@var checkbox cTop5 "Display top tables" 0
@var checkbox cEpisodeList "Side episode list" 0
@var select sServer "Server" {
  "Default":"none",
  "Subbed Only":"sub",
  "Dubbed Only":"dub"
}
@var select sEpisodes "Episodes" {
  "Default":"none",
  "Numbers only":"number",
  "With titles": "title",
  "List only": "list"
}

@var select sTheme "Theme" {
  "Default":"none",
  "Custom":"custom",

}
@var color coBackground "Background" #0e0e0e

@var checkbox cBackground "Darker background" 0
@var range rMultiplier "Color multiplier" [10, 0, 25, 0.1, '%']

@var checkbox cAlert "Display alerts" 1
@var range rStretch "UI stretch" [90, 50, 100, 1, '%']
@var checkbox cDisqus "Display comments" 1
@var checkbox cSlideshow "Display slideshow" 1
@var checkbox cRecent "Display recently updated" 1
@var checkbox cSchedule "Display schedule" 1
@var select sSchedule "Schedule" {
  "Default":"none",
  "Switch highlited":"highlited",
  "Highlit everything":"everything",
  "Show released only":"released",
  "Show unreleased only": "unreleased",
}
@var checkbox cAlert "Display alerts" 1
@var checkbox cSwitchTip "Switch server tip" 0
@var checkbox cTrending "Display Trending/Related" 1
@var range rImages "Image intensity" [90, 10, 100, 1, '%']
==/UserStyle== */
@-moz-document domain("9anime.me"), domain("9anime.to"), domain("9anime.pl"), domain("9anime.gs"), domain("9anime.id"), domain("9anime.ph"), domain("aniwave.to"), url-prefix("https://disqus.com/embed/comments/?base=default&f=9anime")

    $bg1 = #0e0e0e
    $bg2 = #292929
    $bg3 = #9d9d9d
    $c1 = #eee
    $c2 = #777
    $c3 = #222
    $h0 = #8c5ece
    $h1 = #5a2e98
    $h2 = #1f1232 
    if sTheme == "custom"
        $bg1 = coBackground
        
        if(cBackground)
            if(lightness($bg1)> 2 * rMultiplier)
                $bg2 = darken($bg1,rMultiplier)
                $bg3 = darken($bg2,rMultiplier)
            else
                $bg2 = lighten($bg1,rMultiplier)
                $bg3 = lighten($bg2,rMultiplier)
        else if(lightness($bg1)>=80 - 2 * rMultiplier)
            $bg2 = darken($bg1,rMultiplier)
            $bg3 = darken($bg2,rMultiplier)
        else
            $bg2 = lighten($bg1,rMultiplier)
            $bg3 = lighten($bg2,rMultiplier)
        if(lightness($bg1)>50)
            $c1 = coText
            $c2 = darken($c1,rMultiplier)
            $c3 = darken($c2,rMultiplier)
        else
            $c3 = coText
            $c2 = lighten($c1,rMultiplier)
            $c1 = lighten($c2,rMultiplier)
            
            
    body
        color: $c1
@-moz-document domain("9anime.me"), domain("9anime.to"), domain("9anime.pl"), domain("9anime.gs"), domain("9anime.id"), domain("9anime.ph"), domain("aniwave.to")
    .remove
        display: none
    .switch
        background: $bg2
        color: $c2
        border-radius: 5px
        padding:2px
        display: flex
    .switch>span.active
        color: $c3
    .switch>span+span   
        margin-left: 2px
    .switch>span
        padding: 0 8px
        border: none
        border-radius: 5px !important
    .switch>span:hover:not(.active)
        background: $bg3
        color: $c1
    img, .image, #player
        filter: brightness(rImages)
        -webkit-filter: brightness(rImages)
    header, section#schedule .head
        border-bottom: 1px solid $bg1
    if sTheme != "none"
        body
            background: url(tBackgroundImage)
            background-color: $bg1           
        footer, section#schedule .head, section#schedule .body, header.fixed, header,
        .ani.items .item .poster .meta, .side.items .item .inner, .tabs, .alert.notice, .switch>span:hover:not(.active) .switch, section#schedule .body .more, #w-player #controls, #w-player #w-servers .servers, #w-player .alert.next-episode, #w-episodes .head, #w-media #w-episodes, #malp, .bsharing
            background: $bg2 
            //filter: hue-rotate(- $hue) 
        footer .container
             background: transparent 
        section#schedule .body .items a.item:hover, .side.items .item:hover .inner, .tabs .tab:hover:not(.active),
        #search .search-popup, #search .search-popup .foot, header #search form, section#schedule .body .items a.item .ep,
        section#schedule .body .items a.item.old .ep, section#schedule .body .items a.item:hover .ep, 
        footer .azlist ul li a, footer .socials, #w-episodes .body .episodes.name ul li a, #w-player #w-servers .servers .type ul li, .btn-secondary, .form-control, #flash-div-top > div > div
            background: $bg3 !important
        .switch>span.active
            background-color: coHighlight

        .switch>span 
            border-color: $bg3 
            background-color: $bg3
        
        section#schedule .body .more, section#schedule .head, .btn-secondary, .form-control, #w-episodes .head
            border-color: $bg1
        #w-episodes .body .episodes.name ul li a:visited     
            background-color: $h2 !important
        #w-episodes .body .episodes.name ul li a.active, #w-episodes .body .episodes.name ul li a.active:visited
            background-color: $h1 !important
             
    if sSchedule == "highlited"
        section#schedule .body .items a.item
            color: #515151
        section#schedule .body .items a.item.old 
            color: #aaa
    else if sSchedule == "everything"
        section#schedule .body .items a.item.old 
            color: #aaa
    else if sSchedule == "unreleased"
        section#schedule .body .items a.item.old 
            display: none
    else if sSchedule == "released"
        section#schedule .body .items a.item
            display: none
        section#schedule .body .items a.item.old 
            color: #aaa
            display: flex
      
    .head-box .tabs-sm .tab.active:after, .head-box .tabs-sm .tab:hover:after
        background:none
    .alert.notice
        border: none
            
    .ep-status.sub >span:before
        content: "\f20a " !important
        background: none
        vertical-align: 0
         
    if sServer == "sub"
        .type[data-type="dub"] 
            display: none !important
    else if sServer == "dub"
        .type[data-type="sub"] 
            display: none !important

    if !cTop
        .sidebar
            display: none

    if !cTop5
        .top-tables.mb-3 
            display: none
    if !cRecent
        #recent-update 
            display: none
    if !cSchedule
        #schedule
            display: none

    if !cSwitchTip
        #w-servers .tip 
            display: none !important
    if !cAlert
        .alert
            display: none
    if !cSlideshow
        .hotest
            display: none
    if !cTrending
        .watch-container .sidebar
            display: none !important

    .container, .profile-container, .w2g-list-container 
        width: rStretch


    if !cEpisodeList
        #w-media 
            flex-direction: column

        #w-media #w-episodes 
            order: 3
            max-width: unset
            margin-top: 10px

        #w-media #w-episodes .body .episodes 
            position: static
            max-height: 300px
            overflow-y: auto

        #w-media #w-episodes .body .episodes.number ul li 
            min-width: 5%

        #w-info 
            display: inherit


        #w-media #w-player 
            margin: 0px
            
    #w-episodes .body .episodes.name ul li a 
        display: block
        margin: 3px
        background: #171717
        border-radius: 3px
        line-height: 2.15rem;
        height: 2.15rem
        color: #777
        font-weight: 600
        transition: all .2s
        position: relative
        overflow: hidden
        padding: 0 5px
    #w-episodes .body .episodes.name ul li a span
        display: initial
            
    if sEpisodes == "number"
        #w-episodes .body .episodes.name ul li a 
            text-align: center
            padding: 0 
        #w-episodes .body .episodes.name ul li span.d-title
            display: none
        #w-media #w-episodes .body .episodes.name ul li 
            min-width: 5%
            float: left
        #w-episodes .body .episodes.name ul li:nth-child(2n) a 
            background: #171717
        #w-episodes .body .episodes.name ul li a b 
            min-width: 0 

    else if sEpisodes == "title"
        #w-episodes .body .episodes.name ul li a 
            text-align: center
        #w-media #w-episodes .body .episodes.name ul li 
            min-width: 5%
            float: left
        #w-episodes .body .episodes.name ul li:nth-child(2n) a 
            background: #171717
        #w-episodes .body .episodes.name ul li a b 
            min-width: 0 
    else if  sEpisodes == "list"
        #w-episodes .body .episodes.number ul 
            margin: 0
            padding: 0
            list-style: none
        #w-media #w-episodes .body .episodes.number ul li 
            min-width: 100%
            float: none
        #w-episodes .body .episodes.number ul li a 
            text-align: left
            padding-left: 15px

    header #quick-menu > *
        padding: 0 10px !important
        
    header #quick-menu
        width: auto
    header #quick-menu > a
        display: flex;
        align-items: center;
    header #quick-menu > a i
        margin-right: 5px;
        
    @media (max-width: 650px)
        header #quick-menu > a
      ...

Reviews

No reviews yet.