Tweaks for 9anime:
- episode list bellow player & different styles
- hide/show different parts of page
- background color change
9Anime / AniWave by whatsu
Details
Authorwhatsu
LicenseAGPLv3
Categoryaniwave
Created
Updated
Size14 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
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
...