aniwatchtv.to - Annhiliation Grape by azuresea

/* ==UserStyle==
@name           aniwatchtv.to - Annhiliation Grape  
@namespace      github.com/openstyles/stylus
@version        1.0.1
@description    For those who want to grape everyone and everything
@author         Gabriel T. Sharp
==/UserStyle== */

@-moz-document domain("aniwatchtv.to") {
  
  /*  1.0.0 - initial release - see notes
              its a purple filter style, for now until I decide do port all content
      1.0.1 - updated graphics a bit, finalizing before shutdown
  
      1.0.1 is FINAL
      OK! ive covered all the important elements that i could find, this is it, its done! :3
  
  
  NOTE: aniwatchtv is about to shut down, so i'll catch you on the next one
  
  worry not, this style will work for any website using the aniplay api (read on for how)
              
    notes
      * this style does not change metrics
         * no font size, style, borders or layouts are changed
         * no padding or margin changes         
         * no background images or texts are altered
         * except for intrusive ads or the dreaded "invisible barrier of redirect"
      * this style is for the aniplay framework so it will work on any site that uses it
      * some items are global to support easily moving this style to support other websites
      * some sites that this style works on: aniwatch, aniwave 
      * to port the style, just change the -moz-document domain name above
  */
  @keyframes playin
  {
    0% , 100% {  filter: saturate(50%); }
    50% { filter: saturate(10%) hue-rotate(160deg); }
  }
  
  div#detail-ss-list a.ssl-item.ep-item.active  *
  {
    
    animation: playin 1.5s infinite steps(3);   
    
  }
  
  div#detail-ss-list a.ssl-item.ep-item.active > div.ssli-detail,
  div#ani_detail div.schedule-alert > div
  {
      
      background: #250e24;
    
    font-weight: bold;
  }
  div#content-comments div > div > div.ihead > a > i,
  div#xheader_menu li > a,
  div#user-top-day div > div.item-inner > a,
  div#user-top-week div > div.item-inner > a,
  div#main-wrapper div.rlw-point.rlw-02 > div.rlw-icon > img,
  div#main-wrapper div.rlw-point.rlw-03 > div.rlw-icon > img,
div#main-wrapper div.rlw-point.rlw-04 > div.rlw-icon > img,
  div#main-wrapper div.rlw-point.rlw-05 > div.rlw-icon > img,
  div#main-wrapper div.aa-title > a,
  div#main-wrapper div.ai_-welcome.text-center > div > div,
  div#main-wrapper div.role-line-load > div,
  div#im-latest div > div.item-inner > div.subject > div > a,
  div#user-top-month div > div.item-inner > a,
  div#comments-top div > div.item-inner > a,
  div#comments-top div > div.item-inner > div.cn-owner.mb-2 > a,
  div#postComments-top div > div.item-inner > div.cn-owner.mb-2 > a,
  div#movie-top-day div > div.item-inner > h4 > a,
  div#movie-top-week div > div.item-inner > h4 > a,
  div#movie-top-month div > div.item-inner > h4 > a,
  div#main-wrapper div.ai_-tabs > a.active,
  div#main-wrapper div.wv.wv-item > div > div > ul > li > a,
  div#main-wrapper div > div.is-head > div.is-pin,
  div#ani_detail div.pc-item.pc-live > a > i,  
  div#header_right a, div#header span.en, div#header span.jp,
  div#header a:nth-child(2) > div.hst-icon > i,
  div#header a:nth-child(1) > div.hst-icon > i,
  div#header a:nth-child(4) > div.hst-icon > i,
  a#logo > img,
  div#detail-ss-list a.ssl-item.ep-item.active ,
  div#servers-content div.ps_-status,
  div#servers-content div > a,
  div#servers-content i,
  div#ani_detail div > div > span,
  div#main-wrapper div.sbb-title.mr-3 > span,
  div#ani_detail div.tick-item.tick-quality,
  div#ani_detail div.icon > i,
  div#footer-about img,
  div#ani_detail div.tick-item.tick-sub,
  div#vote-info div.rating-result i,  
  div#search-suggest a.nav-item.nav-bottom,
  div#detail-ss-list a:hover > div.ssli-detail > div,
  div#mw-top a > img,
  form#search-form *,  
  div#slider div.swiper-slide.swiper-slide-active > div > div.deslide-item-content > div.desi-sub-text,
  div#content-comments div > div.replies > div.rep-more.rep-in > button[type="button"] > span,
  div span.pqd-li.mr-3 > i
 
  
  {
    filter: hue-rotate(210deg) saturate(640%) brightness(60%);
  }
  
  div#slider div.swiper-slide.swiper-slide-active > div > div.deslide-item-content > div.desi-buttons *
  {
    background-color: #1c1536 !important;
    backdrop-filter: brightness(22%) sepia(999%) saturate(999%) hue-rotate(220deg);
    color: #ffb7ff !important;
    border-color: purple !important;
  }
  div#slider div.swiper-slide.swiper-slide-active > div
  {
      padding: 20px;
      margin: 20px;
  }
  
  div#main-wrapper > div.share-buttons.share-buttons-detail,
  div#header,
  div#detail-ss-list div.ss-list,
  div#detail-ss-list div.ss-choice,
  div#servers-content > div.ps_-block,    
  div#vote-info button[type="button"].btn.btn-emo.btn-vote,

  body, main
  {
    background-color: #1c1536;
    backdrop-filter: brightness(22%) sepia(999%) saturate(999%) hue-rotate(220deg);
    color: #ffb7ff;
  }
  
  div#slider div.swiper-slide.swiper-slide-active > div > div.deslide-item-content div div *,    
  
  div.tick, div.tick *,  div.pre-qtip-button a,   
  div span.pqd-li.badge.badge-quality.float-right.ml-2
  {
    background: rgba(86, 86, 177, .26) !important;
    border-radius: 8px;
    
  }
  
  
  h1,h2,h3,h4,h5
  section#comment-block *  
  {
    color: #ffb7ff !important;
  }
  div#content-comments div.ci-form > div > span
  {
    color: #ff5fff !important;
    font-weight: bold;
  }
  
  button#cm-view-more > span,
  div#content-comments div > div > div.ihead > a,
  div#content-comments div.ci-form > div,
  button#cm-view-more > i,
  div#content-comments div > div.replies > div.rep-more.rep-in > button[type="button"] > i
  {
    color: #d38aff !important;
    font-weight: bolder;
  }
  
  
  div#main-wrapper > div.pizza.pizza-x,
  div#main-sidebar div
  
  {
      display: none;
  }
  :root
  {
    pointer-events: initial;  
  }
  form#filter-form div > div.nl-item > div 
  {
    margin-left: 5px;
  }
  div#main-wrapper li.page-item.active > a,
  div#footer-about li > a:hover
  {
    border-image: radial-gradient(#00f7ff40,#f000) !important;
    
    border-image-repeat: repeat !important;
    border-image-width: 100% !important;
    color: #ffbbff !important;
    scale: 1.5;
    cursor:  cell!important;
    transition: all 0.25s;
  }
  div#main-wrapper li.page-item > a,
  div#footer-about li > a,
  form#filter-form button,
  div#action-button,
  
  form#filter-form div > div.nl-item > div select
  {
    transition: all 0.75s;
    color: #ffb7ff !important;
    
    background:linear-gradient(-4deg,transparent 12px,transparent 19px,#ffffffa3), linear-gradient( rgba(86, 86, 177, .79) 13px, rgba(27, 15, 71, .83) 18px) !important;
    
    border-image: radial-gradient(#00f7ff00,#f000);
    border-image-outset: 50px  !important;
    
    border-image-repeat: repeat !important;
    border-image-width: 100% !important;
  }
  
  form#filter-form button:hover,
  form#filter-form div > div.nl-item > div select:hover
  {
    border-image: radial-gradient(#00f7ff40,#f000) !important;
    border-image-outset: 50px  !important;
    
    border-image-repeat: repeat !important;
    border-image-width: 100% !important;
    animation: funky 4s ease infinite; 
  }
  @keyframes funky
  {
    0%,100% { text-shadow: 21px 12px 12px red; }
    50% { text-shadow: 12px 21px 12px #00ff91; }
  }
  
  div#mw-top div.mwt-icon > img
  {
    filter: saturate(20%);
  }
  
  
  form#filter-form div > div.nl-item
  {
    color: #d1bedd !important;
    
    
    margin-bottom: 4px !important;
    
  }
  div#main-wrapper div.cd-article
  {
    /* technically not able to blur the background because we are on the same 
       layer (sibling elements are technically not considered "above" each other even if they ARE visibly above) 
        example: <a name="item-with-image"></a> <div> some thing beside but over wont blur </div>
                 <a name="item-with-image"><div> but this would </div></a>
      we could put <div> at the same location as <a> with zindex of div=999 and a=0, but that still wont make it above
      as far as the renderer is concerned, this becomes an issue with things like inline tables used as menus.
    
    */
    background: #3e3e3e00 !important;
    backdrop-filter: blur(124px);
  }
  
}
@-moz-document url-prefix("https://")
  {
    div#ani_detail div.anis-watch-wrap
    {
       filter: hue-rotate(0deg);
    }
    
    div#megacloud-player div.jw-reset.jw-old-rail
    {
      filter: hue-rotate(70deg) saturate(60%);
    }
    
}