Skip to content

kissanime - remove excess elements and a popup ad that adblock misses (for while playing, to minimize scrolling) by osirisgothra

Screenshot of kissanime - remove excess elements and a popup ad that adblock misses (for while playing, to minimize scrolling)

Details

Authorosirisgothra

LicenseShare Alike, Creative Commons

Categorykissanime.com.ru

Created

Updated

Size28 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Just removes excess screen elements, intended for while you are playing an episode and don't want that other junk. The vote bar is now self-expanding, move the mouse over the expander on the bottom and it will appear. The rest should be toggled. Bind stylus to a key like Alt+Shift+S, and then use the keyboard/mouse to turn it on off. I recommend you turn it off when searching anime (or use advanced search) and turn it back on while watching a series of episodes, this way you don't have to keep scrolling up/down/etc to get back to the video/selector. As always, I recommend AdBlock as it will get rid of most any ads. This style does block the one AD-popup that adblock misses, however.

Notes

Keep in mind that:

  • Ad removal may stop working at any time because Ad miners are very dynamic and can change their class/ids automatically, if I notice a new one, I'll definitely "add" it. (bad pun).
  • It is only tested in Edge, Chrome
  • Most likely works in any css override environment.
  • Subject to kissanime's stylesheets as they were Feb 2023
  • Updates are welcome

Tested under flags, and possibly affected by flags:

  • dark mode with some non-image elements inversions
  • dark mode with complete inversion
  • default with OS-independant dark mode

Flags affectedness scale (flags set above 0=don't matter at all....10=really, really matter)

  • scale factor for this style: 1 (one element is slightly changed, the vote bar)

Updated Feb 9 2023

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         kissanime - remove excess elements and a popup ad that adblock misses (for while playing, to minimize scrolling)
@version      20230405.23.11
@namespace    userstyles.world/user/osirisgothra
@description  Just removes excess screen elements, intended for while you are playing an episode and don't want that other junk. The vote bar is now self-expanding, move the mouse over the expander on the bottom and it will appear. The rest should be toggled. Bind stylus to a key like Alt+Shift+S, and then use the keyboard/mouse to turn it on off. I recommend you turn it off when searching anime (or use advanced search) and turn it back on while watching a series of episodes, this way you don't have to keep scrolling up/down/etc to get back to the video/selector. As always, I recommend AdBlock as it will get rid of most any ads. This style does block the one AD-popup that adblock misses, however.
@author       osirisgothra
@license      Share Alike, Creative Commons
==/UserStyle== */

@-moz-document regexp("http.*kissanime.*(Episode|Movie|[Oo][Vv][Aa]).*") {
/*

	kissanime - remove excess elements (for while playing, to minimize scrolling)

  by Gabriel T. Sharp <osirisgothra@hotmail.com>

	file version 1.0.040523 @revision #3.11 - stage = final beta

	Initial Release: 2023, Feb 9
  License: Share Alike/Creative Commons 
  Contact: osirisgothra@hotmail.com, osirisgothra@zohomail.com (relayed)  

	See the end of this file for more information including disclaimers.
	By using this style you agree that you read all disclaimers.

  This style is made available from userstyles.world and github.
  
	USW ID: #8522

	----------------------------------------------------------------

	Recent Update Information 

		Apr 5, 20223:

			#1 Added Show Name Caption (top) assigned the same color values for modecaption, which you can change in the settings just after the start of this file.
			#2 Changed scale of server select, moved it back into view instead of tucking it just behind player (it was kind of hard to see it)
			#3 Clicking the caption will show info on the show
			
	(see end of file for complete update history)

*/

:root
{	
		
	/* 
		 Global Variables
	
	   User customizable variables
	
		 In stylish, just click the color you want to change and the UI will guide you, most
	   settings have an explanation and a brief explanation on possible values. The constants
		 are something you shouldn't change unless you know you need it.
	
	*/	
	
	/*
	     setting: constants
	
			 purpose: these are shorthands used by other settings, you won't need to change these
	
	     possible values: n/a	                     	
	
	*/	
	--enabled: block;
	--disabled: none;
	
	/*
	     setting: main background				
	
			 purpose: image shown behind all page elements, spanning the entire page
	
	     possible values: one or more image url or css-supported image (linear gradients, radial, conic, etc)	                     	
	
	*/
	--fancybgmain: radial-gradient(#6f736a14, #5454541f), linear-gradient(45deg, #28282818, #3f3f3f2b), conic-gradient(from -165deg, #75c8100a, #1414142e);	
	/*
	     setting: controls background
	
			 purpose: image shown behind selected control elements
	
	     possible values: one or more image url or css-supported image (linear gradients, radial, conic, etc)                     	
	
	*/	
	--fancybg: radial-gradient(26em, #22241733, #1a1a1a2b, #4a4a4435, #8080800f, #33333322), linear-gradient(33deg, #131a1173, #43463d4a, #3133304d, #1717173b, #102d1c29, #090d0127);

	/*
	     setting: server select, episode select text color
	
			 purpose: combo-box text color for the server and episode selectors
	
	     possible values: any color (RGB, HSB, HSL, #HEX #HHEEXX #HEXA, #HHEEXXAA, etc)
	
	*/	
	--episodeservertext: #74966e;
	
	/*
	     setting: mode caption text
	
			 purpose: color for mode caption shown when switching window size ranges
	
	     possible values: any color (RGB, HSB, HSL, #HEX #HHEEXX #HEXA, #HHEEXXAA, etc)
	                     	
	*/		
	--modecaptions: chartreuse;
	
	/*
	     setting: server caption text
	
			 purpose: color for server caption shown before server-select combo box
	
	     possible values: any color (RGB, HSB, HSL, #HEX #HHEEXX #HEXA, #HHEEXXAA, etc)
	                     	
	*/		
	--servercaption: #779966;
	
	/* 
	
				setting: 				--arrowsat    saturation % of prev/next arrows
												--arrowhue	  amount of hue rotation (in degrees) away from sepia	(0deg=sepia)
												--arrowbrt		idle brightness of the arrow (0% - 100%)
												--arrowopa		idle opacity (alpha) of the arrow (0% - 100%)
	
		 		purpose: sets the colors for the arrows, The arrows are actual image resources, 
	               not text, so they are recolored using re-colored using variables that
                 follow the HSBA (hue/saturation/brightness/alpha) color model. Where "Alpha" means
	               the transparency amount. "Hue" is the degrees away from sepia, be sure that hue 
	               is in degrees valid values are any number, but wrap after 359deg (i.e, 360deg equals 0deg )	
	
        possible values: 	arrowsat: 0%   - 200%   (0% = grayscale), 110% default
  												arrowhue: 0deg - 359deg (0deg = sepia), 120deg default
													arrowbrt: 0% - 200%			(0% = black), 40% default
													arrowopa: 0% - 100%			(0% = invisible), 40% default
	
	*/
	--arrowsat: 110%;
	--arrowhue: 120deg;
	--arrowbrt: 40%;
	--arrowopa: 40%;
	
	
	/*
	     setting: 				--enable-vote-message
	
			 purpose:		      show/hide the voting message text (caption) with the expander
	
	     possible values:  					--enabled 		show vote message text
	                       					--disabled  	hide vote message text	
	
	*/
	--enable-vote-message: var(--enabled);
	
	/*
	     setting: 				--enable-vote-block
	
			 purpose:         show/hide the kissanime 'voting' block entirely
	
	     possible values: 					--enabled  	show vote box, on mouseover
	                     						--disabled 	hide voting area altogether
	
	*/
	--enable-vote-block: var(--enabled);
	
	/*
	     setting: 				--messagetimeout
	
			 purpose: 				controls the unit of time that must pass before the 'disable me for normal operation' message disappears completely
												the message will show each time the page is loaded or reloaded, or the style is enabled, setting this to 0s will disable 
	                      it entirely, and a large number will show it indefinitely.
	
	     possible values: 				<number>s			or any other <unit of time> as outlined in the 
	                     					<number>ms    w3 specification for css3 (s=seconds, ms=milliseconds (1000ms == 1s)
	
	  */
		--messagetimeout: 5s
	
}

/* Animations */

@keyframes swell
{
	0%		{		scale: 125%;	}
	50%		{		scale: 145%;	}
	100%	{		scale: 125%;	}
}
@keyframes swellout
{
	0%		{		scale: 145%;		opacity: 100%;						}
	50%		{		scale: 125%;															}
	100%	{		scale: 100%;		opacity: var(--arrowopa);	}
}
@keyframes fader
{
	0%		{		opacity: 100%;	}
	22%		{		opacity: 5%;		}
	44%		{		opacity: 100%;	}
	77%		{		opacity: 5%;		}
	100%	{		opacity: 100%;	}
}
@keyframes fadeout
{
	0% 		{ opacity: 100%; 	filter: blur(0px); }
	50% 	{ opacity: 50%; 	filter: blur(0px); }
	100% 	{ opacity: 0%; 		filter: blur(1px); } 
}
@keyframes fadeoutsuperslow
{
	0% 		{ opacity: 100%; 	filter: blur(0px); }
	70% 	{ opacity: 100%; 	filter: blur(0px); }
	100% 	{ opacity: 0%; 		filter: blur(1px); } 
}
@keyframes fadein
{
	0% 		{ opacity: 0%; }
	100% 	{ opacity: 1%; } 
}
@keyframes disappearblk
{
	0%		{			opacity: 50%;		}
	99%		{			opacity: 50%;		}
  100%	{			opacity: 0%;		}
}

/* Full Mode */

@media (min-width: 1024px) and (min-height: 710px)
{	
	
	
	div#navsubbar strong
	{
			color: var(--modecaptions) !important;
			
	}
	div#navsubbar :not(strong):hover
	{
		color: var(--modecaptions) !important;
	}
	
	div#navsubbar, div#navsubbar :not(strong)
	{
		color: transparent !important;
		position: absolute !important;
		display: block !important;
		top: 0px !important;
		left: 0px !important;
		text-align: center !important;
		width: 100vw !important;
		
		height: 100px !important;
		background: transparent !important;
	}
	body:after
	{
		text-align: center;
		display: block !important;
		position: fixed !important;
		background: transparent !important;
		color: var(--modecaptions);
		width: 200px !important;
		height: auto !important;
		z-index: 99999 !important;
		opacity: 0%;
		content: "Mode: Full";
		font-family: "Tahoma";
		letter-spacing: -0.4px;
		font-size: 16px;
		top: 0px;
		left: 0px;
		animation: fadeout 3s ease-out;
		animation-iteration-count: 1;
		
	}
	
	:root
	{
		
	}
	/* overqualify #adsIfrme * div.* to (try) to force override on items already marked !important on server - not all browsers will do this but it works on chromium-based browsers so far */
	#adsIfrme > div > div > div > div.full.mb30, #adsIfrme > div > div > div > div.full.footer_watching_link, #adsIfrme > div > div > div > div:nth-child(3), #bar-player, #bar-control, #centerDivVideo > div:nth-child(1), .clear2, #divBookmark, #footer, #info_player > p, .logo, #popular_animes, #topHolderBox, .btn, .watch_title, #info_player > div:nth-of-type(4), .text
	{
		display: none !important;
		width: 0px !important;
		height: 0px !important;
		z-index: -999999 !important;
	}
	/* vote block, and text showing where it is */
	.vote_block::before
	{
		font-size: xx-small;
		content: "expand vote";
		color: #91919117;
		text-align: center;
		width: 400px !important;
		height: 1em !important;
		display: var(--enable-vote-message) !important;
		position: absolute !important;
		margin-top: -2em;
		margin-left: -10%;
		z-index: -9 !important;
	}
	.vote_block
	{
		z-index: -9 !important;
		height: 4px !important;
		background: rgba(0, 0, 0, 30%);
		overflow: hidden !important;
		display: var(--enable-vote-block) !important;
	}
	.vote_block:hover
	{
		height: auto !important;
		background: none !important;
	}
	.next_ep
	{
		display: block !important;
		posit...

Reviews

No reviews yet.