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
  
      1.0.2 - beyond final  update
      1.0.2.1 - xmas present for you, EPISODE HUD
  
  + Added Episode HUD and auto-retract
    shows episode # in lower left of video
              (this is the best that can be done, since there are so many protections)
  
      (unfortunate that much of the code is obfuscated and cockblocked
       with items such as these:
  if ((9/5*20)/(9*5/20)*sym+fakesym/fakefunc(v)*0.5) where fakefunc(v) { return v*2; }
  you get the idea, the obfuscators they are using these days to cockblock adblock
  and prevent stylers like me from making sites bearable are getting stupid rediculous
  
  + Added "hide the annoying anime girl!" style to this one
  - Removed some annoyances in formatting
  - Tweaked a few things
  * This may be beyond the final release, but I might update it if it still gets used
    feel free to request any features as gitlab issues or comment in userstyles.world
  
  NOTE: this is a brute-force style**
  
  **what is a brute force style? It is a style that imposes itself on a styled
  page designed to prevent restyling. It also employs tactics to cover elements
  that are normally unreachable such as iframes and ad barriers. The biggest feature
  of brute-force is taking full advantage of selector wildcarding to deliver 
  style overrides faster than even the original styles by applying simmilar rules
  as one single rule where ever possible.
  
  limitations: html-inlined !important styles (eg; "<tag style="property: val !important;") can NOT normally be changed, you may need to turn on INJECT mode
  in stylus for this. In other cases they cannot be changed at all (such is the
  case in require-no-important situations)
  
  animation keyframes are of a require-no-important property situation, they can
  only be used where !important is not needed and cannot pass on that state to the
   keyframes. eg, div { prop: item !important; animation: ani; } @keyframes { some% { prop: newitem; }} < newitem will never be overwritten because the original style already imposed !important.
  
  require-no-important situations: classes that cannot be overriden with !important 
  because !important cannot be used in a @keyframe animation. The only workaround
  (but hardly workable) is to use layered transitions instead but unlike keyframes
  you cannot control elements during the flow of time, just the start and end so
  many layers would be required which undermines the idea of bruteforcing styles.
  
  These situations are imposed along with anti-brute-force-styling which creates code
  pockets that cause a debugger break event, and in that event a redirect is executed
  which causes the current page to change, preventing interaction with the page.
  
  Normally we can get around this by pausing the debugger before the abf code is
  executed BUT, there are now more of these pockets that check for overriding styles
  being reinjected into the original html, which is done by caching a copy of the
  code after it is sent to the client in the form of client-side code saving such
  a copy, and then comparing it after the page is shown to see if it bears any extra
  content it sees as a dealbreaker, if it does find a dealbreaker, it executes the
  code pocket that halts the debugger and also triggers the redirect.
  
  For these reasons, this site cannot be fully styled, even by modding the original
  css styles (because stylus has to reinject the code). The only workaround is to
  avoid using items that trigger the analyzer, one such thing is the use of !important
  on styles that are inlined through forced injection, including  but not limited to
  the above  mentioned 'require-no-important' situations.
  
  Yes, we could work around this by giving companion scripts and basically forcing
  you to add a scriptlus extension, but I am only one person and I am not paid for
  doing stylus styles--I only make them out of the kindness in my heart. As such
  I haven't the time or resources to fully style abs sites, sorry bout that but if
  you wanna buy me a new machine, I'd definitely be able to fight fire with fire.
  
  But alas that will never happen unless I do it:
    
  If I ever get a good computer that has more computing power than an abbacus I might
  be able to combat this but Im a stuck in the mud poor person who has no resources
  and my carpal tunnel syndrome can't keep up with combatting obfuscation AND the shitstorm
  of new technologies and APIs raining down on me. I hope someday you coders will come to know
  the agony of being done in by the next generation of coders, you guys didn't learn
  that pain from history class because we're the first generation to experience it
  as it simply didnt exist before now, but you will, and let me tell you, your gonna
  hate it, so enjoy it while you can!
  
  ANOTHER
     NOTE: aniwatchtv is about to shut down, so i'll catch you on the next one MAYBE
           even though this is the case I may put out more releases to keep you going
           and will keep up with any site changes though I doubt it will change 
           much now that it is.
        
  feel free to check out my other projects:
  
  https://www.reddit.com/r/trueoffmychess
  https://www.reddit.com/r/beyondvoxels
  https://www.reddit.com/r/donewithlife
  
  if you are bored
    visit:
  
  https://gitlab.com/azuresea
  
  or
  
  https://github.com/osirisgothra
  
  or just search for osirisgothra or azuresea 
  if you want to track me down for some whatever reason:
  
  https://www.google.com/search?q=osirisgothra
  
  worry not, this style will work for any website using 
  the aniplay api (read on for how)
              
    STYLE TECHNICAL NOTES
  
      * this style does not change metrics
         * few font size, style, borders or layouts are changed
         * few padding or margin changes         
         * few background images or texts are changed
         * 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
    KNOWN ISSUES
      * lights out doesn't work unfortunately, but that is because of the styling and
        such, and would have to abandon many features for this ---which id do if the
        site wasnt shutting down! If you NEED this feature, shoot me a request in 
        userstyles.world comments
      * Episode# bottom-left isnt always right on point, this is because there is
        no way to move that information without modifying the site's code which
        I have no access to! 
      * Search box....yeah
  
    
  */
  
  
  :has(div#servers-content)
  {
    overflow: visible !important;
    
  }
  div#servers-content b:hover
  {
    font-size: 20pt;
    -webkit-text-stroke: 3px #fff;
    text-stroke: 3px #ffffffc4;
    background: linear-gradient(#fff,#ffeeab);
    
    -webkit-background-clip: text;
    background-clip: text;
    
  }
  @keyframes fadeout
  {
    0%,55% {
      top: -165px;
    color: #bdffbd00;
    position: fixed;
    display: block;
    
    font-size: 20pt;
    text-transform: uppercase;
    letter-spacing: 5px;    
    
    -webkit-text-stroke: 1px #ffffff78;
    text-stroke: 1px #ffffffc4;
    left: -0px;
    background: linear-gradient(#fff,#ffeeab);
    
    -webkit-background-clip: text;
    background-clip: text;
    
    text-shadow: 0px 0px 5px #000;
    
      opacity: 1;
      
    }
    80%,90% { opacity: 0.1; }
    
    99% {
      
      position: absolute;
      display: block;
      
    }
    100% 
    {
      opacity: 1;
      top: 0px;      
    color: #000;
    position: revert;
    display: revert;
    
    font-size: revert;
    text-transform: uppercase;
    letter-spacing: 5px;    
    
    -webkit-text-stroke: 1px #ffffff78;
    text-stroke: 1px #ffffffc4;
    left: 51px;
    background: linear-gradient(#fff,#ffeeab);
    
    -webkit-background-clip: text;
    background-clip: text;
    
    text-shadow: 0px 0px 5px #000;
    
      
    }
  }
  
  div#servers-content b
  {
    
    animation: fadeout 4s running linear;
      opacity: 1;
    
    
    color: #000;
    
    position: revert;
    display: revert;
    
    font-size: revert;
    text-transform: uppercase;
    letter-spacing: 5px;    
    
    -webkit-text-stroke: 1px #ffffff78;
    text-stroke: 1px #ffffffc4;
    left: 51px;
    background: linear-gradient(#fff,#ffeeab);
    
    -webkit-background-clip: text;
    background-clip: text;
    
    text-shadow: 0px 0px 5px #000;
    
    
    
    
    overflow: visible !important;
    
    z-index: 9999999 !important;
    
    
  }
  div#ani_detail div.film-stats > div 
  {
    padding: 0px 8px;
    background: rgba(86, 86, 177, .07) !important;
    
    
  }
  div#main-wrapper div.share-icon
  {
    /* hide the annoying anime girl! */
    display: none;
  }
  div#ani_detail div.film-stats > div  *
  {
    color: white !important;
  }
  
  
  div#ani_detail div.film-stats > div > *
  {
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 4px;
    margin-right: 4px;
    --pri: #b1b1b130;
    --sec: #595959...