Netflix/HBO böngésző usercss a feliratokhoz

Hátha vkinek jó lesz.

Ez tesz egy pici körvonalat és/is árnyékot a szövegre, leszedi  a hátteret, a fontméret meg reszponzív az ablak szélességnek megfelelően.

Az HBO-nál jobban eltolja képernyő aljához az eredeti helyett.

A :root-ban elég át írni a változókat, 4k-nál lehet érdemes változtatni a fontméretet (*2|*4).

FF/Chrome alól vagy a Stylus extensiont ajánlom a kezeléshez a Stylish helyett.

Klikku a részletekért.

 

 NETFLIX

/*
***********************************************************
*   VARIABLES
***********************************************************
*/
:root{
	--sub-font-family: "Calibri";
	--sub-font-width: calc(100vw / 41);
	--sub-drop-shadow: drop-shadow( 0 0 12px rgba(0, 0, 0, .85));
	--sub-shadow: -2px -2px 1px rgba(0, 0, 0, .5), 2px -2px 1px rgba(0, 0, 0, .5), -2px 2px 1px rgba(0, 0, 0, .5), 2px 2px 1px rgba(0, 0, 0, .5);
    --sub-stroke: 1.5px rgba(0, 0, 0, .2);
}
/*
***********************************************************
*   SUBTITLE CSS
***********************************************************
*/

.watch-video--player-view .player-timedtext span{
	font-family: var(--sub-font-family)     !important;
	font-size: var(--sub-font-width)        !important;
	-webkit-text-stroke: var(--sub-stroke)  !important;
	filter: var(--sub-drop-shadow)          !important;
	text-shadow: var(--sub-shadow)          !important;
}

.billboard .player-timedtext span, 
.previewModal--player_container .player-timedtext span{
	font-family: var(--sub-font-family)     !important;
	filter: var(--sub-drop-shadow)          !important;
	text-shadow: var(--sub-shadow)          !important;
}

HBO

/*
***********************************************************
*   VARIABLES
***********************************************************
*/

:root {
	--sub-font-family: "Calibri";
	--sub-font-weight: 600;
	--sub-font-width: calc(100vw / 41);
	--sub-drop-shadow: drop-shadow( 0 0 12px rgba(0, 0, 0, .85));
	--sub-shadow: -2px -2px 1px rgba(0, 0, 0, .5), 2px -2px 1px rgba(0, 0, 0, .5), -2px 2px 1px rgba(0, 0, 0, .5), 2px 2px 1px rgba(0, 0, 0, .5);
	--sub-stroke: 1.5px rgba(0, 0, 0, .2);
	--sub-offset: 60px;
}
/*
***********************************************************
*   SUBTITLE CSS
***********************************************************
*/
/* HBO - SUBTITLE */

#Viewport > .default > .default > .default.class1 > .default:nth-child(1) > 
.default:nth-child(3) > .default > .default > .default > .default > 
.default > div > span > span {
	font-family: var(--sub-font-family)      !important;
	font-weight: var(--sub-font-weight)      !important;
	font-size: var(--sub-font-width)         !important;
	-webkit-text-stroke: var(--sub-stroke)   !important;
	filter: var(--sub-drop-shadow)           !important;
	text-shadow: var(--sub-shadow)           !important;
}
/* HBO - SUBTITLE POSITION - OVERRIDE*/

#Viewport > .default > .default > .default.class1 > .default:nth-child(1) > 
.default:nth-child(3) > .default > .default > .default > .default > 
.default > .default:nth-child(1)[style^="background-color: rgb(0, 0, 0)"],
#Viewport > .default > .default > .default.class1 > .default:nth-child(1) > 
.default:nth-child(3) > .default > .default > .default > .default > 
.default > div > span {
	transform: translateY(var(--sub-offset)) !important;
}
/*
***********************************************************
*   FIXES
***********************************************************
*/
/* HBO - SUBTITLE BACKGROUND FIX */

#Viewport > .default > .default > .default.class1 > .default:nth-child(1) > 
.default:nth-child(3) > .default > .default > .default > .default > 
.default > .default:nth-child(1)[style^="background-color: rgb(0, 0, 0)"] {
	background: none                        !important;
	opacity: 0                              !important;
}
/* HBO - WINDOWED OVERFLOW FIX */

#Viewport > .default > .default > .default.class1 > .default:nth-child(1) > 
.default:nth-child(3) > .default {
	overflow: hidden                        !important;
}