Star Wars | Youtube Lightsaber by plumkator

/* ==UserStyle==
@name         Star Wars | Youtube Lightsaber Player
@namespace    Plumkator
@author       Amavir
@description  If you've always dreamt of mastering The Force, well this will not help you. However, if you want to have some discrete but beautiful style modifications for your YouTube player, to watch Star Wars: The Last Jedi trailers, you're on the right side of the Internet!   Wait, do you prefer Mace Windu's fancy purple lightsaber? No problem! Just use the settings below to customise your style!
@version      20161217.22.38
@license      CC-BY-SA-4.0
@preprocessor uso
@advanced color color_progbar "Video progress bar color" #5099FF
@advanced color color_vol "Volume slider" #ED0000
@advanced color color_true "Checked item" #5099FF
@advanced color color_false "Unchecked item" #ED0000
@advanced color color_hd "HD settings gear display" #ED0000
@advanced dropdown cog_badge "HD settings gear display size" {
    cog_badge_long "Long*" <<<EOT 40 EOT;
    cog_badge_short "Short" <<<EOT 20 EOT;

}
==/UserStyle== */
@-moz-document domain("youtube.com") {
/*Def: color_progbar:#5099FF - color_vol:#ED0000 - color_hd:#ED0000 - color_true:#5099FF - color_false:#ED0000*/  
/* Barre de lecture */    /* Video progress bar */
.html5-play-progress, .ytp-play-progress {
   background: /*[[color_progbar]]*/;
   background: -moz-linear-gradient(top, /*[[color_progbar]]*/ 0%, /*[[color_progbar]]*/ 35%, #ffffff 65%, /*[[color_progbar]]*/ 100%);
   background: -webkit-linear-gradient(top, /*[[color_progbar]]*/ 0%,#ffffff 35%,#ffffff 65%,/*[[color_progbar]]*/ 100%);
   background: linear-gradient(to bottom, /*[[color_progbar]]*/ 0%,#ffffff 24%,#ffffff 65%,/*[[color_progbar]]*/ 100%);
   box-shadow: 0px 0px 20px /*[[color_progbar]]*/, 0px 0px 20px /*[[color_progbar]]*/, 0px 0px 20px /*[[color_progbar]]*/ !important;
}
   
/* Barre de chargement */    /* Video load bar */
.html5-load-progress, .ytp-load-progress {
   background: #70B9FF;
   background: -moz-linear-gradient(top, rgba(120, 120, 120, 0.3) 0%, rgba(120, 120, 120, 0.3) 45%,  rgba(255, 255, 255, 0.3) 55%, rgba(120, 120, 120, 0.3) 100%);
   background: -webkit-linear-gradient(top, rgba(120, 120, 120, 0.3) 0%, rgba(255, 255, 255, 0.3) 45%, rgba(255, 255, 255, 0.3) 55%,rgba(120, 120, 120, 0.3) 100%);
   background: linear-gradient(to bottom, rgba(120, 120, 120, 0.3) 0%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 55%,rgba(120, 120, 120, 0.3) 100%);
   box-shadow: 0px 0px 12px rgba(120, 120, 120, 0.3), 0px 0px 12px rgba(120, 120, 120, 0.3), 0px 0px 12px rgba(120, 120, 120, 0.3) !important;
}
   
/* Bouton de scroll */    /* Scrubber button */
.html5-scrubber-button, .ytp-scrubber-button {
   background: rgba(255, 255, 255, 0)  !important;
   border-color: rgba(255, 255, 255, 0)  !important;
   box-shadow: 0px 0px 0px rgba(255, 255, 255, 0), 0px 0px 0px rgba(255, 255, 255, 0), 0px 0px 0px rgba(255, 255, 255, 0) !important;
   transition: box-shadow 0.0s, background 0.0s !important;

      
}
/* Boutton de scroll — hover */    /* Scrubber button — hover */
.html5-scrubber-button:hover, .ytp-scrubber-button:hover {
   background: #FFFFFF !important;
   background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 20%, /*[[color_progbar]]*/ 100%) !important;
   background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 20%,/*[[color_progbar]]*/ 100%) !important;
   background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 20%,/*[[color_progbar]]*/ 100%) !important;
   border-color: #ffffff !important;
   box-shadow: 0px 0px 10px /*[[color_progbar]]*/, 0px 0px 12px /*[[color_progbar]]*/, 0px 0px 14px /*[[color_progbar]]*/ !important; 
}

 
   
/* Réglage volume /    / Volume control bar */
.ytp-volume-slider-handle {
	position:absolute;
	top:50%;
	width:3px;
	height:14px;
	margin-top:-7px;
   margin-left:0px;
   background: /*[[color_vol]]*/ !important;
   background: -moz-linear-gradient(left, /*[[color_vol]]*/  0%, /*[[color_vol]]*/  35%, #ffffff 65%, /*[[color_vol]]*/  100%) !important;
   background: -webkit-linear-gradient(left, /*[[color_vol]]*/  0%,#ffffff 35%,#ffffff 65%,/*[[color_vol]]*/  100%) !important;
   background: linear-gradient(to right, /*[[color_vol]]*/ 0%,#ffffff 24%,#ffffff 65%,/*[[color_vol]]*/ 100%) !important;
   box-shadow: 0px 0px 10px /*[[color_vol]]*/, 0px 0px 10px /*[[color_vol]]*/, 0px 0px 10px /*[[color_vol]]*/ !important;
}
.ytp-big-mode .ytp-volume-slider-handle {
	width:4px;
	height:22px;
	margin-top:-11px
}


.ytp-volume-slider-handle:before,.ytp-volume-slider-handle:after {
   background: #ffffff !important;
   background: -moz-linear-gradient(top, /*[[color_vol]]*/ 0%, /*[[color_vol]]*/ 35%, #ffffff 65%, /*[[color_vol]]*/ 100%) !important;
   background: -webkit-linear-gradient(top, /*[[color_vol]]*/ 0%,#ffffff 35%,#ffffff 65%,/*[[color_vol]]*/ 100%) !important;
   background: linear-gradient(to bottom, /*[[color_vol]]*/ 0%,#ffffff 24%,#ffffff 65%,/*[[color_vol]]*/ 100%) !important;
/*   box-shadow: 0px 0px 5px #ED0000, 0px 0px 5px #ED0000, 0px 0px 5px #ED0000 !important;*/
	width:50px;
   margin-left:-50px;
}
.ytp-volume-slider-handle:after {
	left:0px;
	background:rgba(255,255,255,.2)
}
.ytp-big-mode .ytp-volume-slider-handle:before,.ytp-volume-slider-handle:after {
	width:50px;
	height:2.5px;
}
.ytp-big-mode .ytp-volume-slider-handle:after {
	left:-46px;
	background:rgba(255,255,255,.2)
}
   
/* Badge HD-4k-5k-8k-3D */
.ytp-settings-button.ytp-hd-quality-badge::after, .ytp-settings-button.ytp-4k-quality-badge::after, .ytp-settings-button.ytp-5k-quality-badge::after, .ytp-settings-button.ytp-8k-quality-badge::after {
   width:3px;
   height:/*[[cog_badge]]*/px;
 	 top:8px;
 	 right:17px;
   background: /*[[color_hd]]*/ !important;
   background: -moz-linear-gradient(left, /*[[color_hd]]*/ 0%, /*[[color_hd]]*/ 35%, #ffffff 65%, /*[[color_hd]]*/ 100%) !important;
   background: -webkit-linear-gradient(left, /*[[color_hd]]*/ 0%,#ffffff 35%,#ffffff 65%,/*[[color_hd]]*/ 100%) !important;
   background: linear-gradient(to right, /*[[color_hd]]*/ 0%,#ffffff 24%,#ffffff 65%,/*[[color_hd]]*/ 100%) !important;
   box-shadow: 0px 0px 10px /*[[color_hd]]*/, 0px 0px 10px /*[[color_hd]]*/, 0px 0px 10px /*[[color_hd]]*/ !important;
   content:''
}
.ytp-big-mode .ytp-settings-button.ytp-hd-quality-badge:after,.ytp-big-mode .ytp-settings-button.ytp-4k-quality-badge:after,.ytp-big-mode .ytp-settings-button.ytp-5k-quality-badge:after,.ytp-big-mode .ytp-settings-button.ytp-8k-quality-badge:after,.ytp-big-mode .ytp-settings-button.ytp-3d-badge-grey:after,.ytp-big-mode .ytp-settings-button.ytp-3d-badge:after {
   width:3px;
   height: calc(/*[[cog_badge]]*/px*1.4) ;
 	 top:10px;
 	 right:23px;
   content:'';
   background-image:none;

}
.ytp-settings-button.ytp-3d-badge::after {
   width:4px;
   height:/*[[cog_badge]]*/px;
 	 top:8px;
 	 right:16px;
   background: #00ED00 !important;
   background: -moz-linear-gradient(left, #00ED00 0%, #00ED00 35%, #ffffff 65%, #00ED00 100%) !important;
   background: -webkit-linear-gradient(left, #00ED00 0%,#ffffff 35%,#ffffff 65%,#00ED00 100%) !important;
   background: linear-gradient(to right, #00ED00 0%,#ffffff 24%,#ffffff 65%,#00ED00 100%) !important;
   box-shadow: 0px 0px 10px #00ED00, 0px 0px 10px #00ED00, 0px 0px 10px #00ED00 !important;
   content:''
}
.ytp-big-mode .ytp-settings-button.ytp-3d-badge::after {
   width:3px;
   height: calc(/*[[cog_badge]]*/px*1.4) ;
 	 top:10px;
 	 right:23px;
   content:''
}

   
   
/* Lettres HD dans menu */    /* HD letters in menu */
.ytp-swatch-color {
   color: /*[[color_progbar]]*/ !important;
}
   
/* Item coché */    /* Checked item */
.ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox {
   background: #FFFFFF !important;
   background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 20%, /*[[color_true]]*/ 100%) !important;
   background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 20%,/*[[color_true]]*/ 100%) !important;
   background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 20%,/*[[color_true]]*/ 100%) !important;
   border-color: #ffffff !important;
   box-shadow: 0px 0px 10px /*[[color_true]]*/, 0px 0px 12px /*[[color_true]]*/, 0px 0px 14px /*[[color_true]]*/ !important;
   content:''
}
.ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox:before {
	-moz-transform:translateX(-50px);
	-ms-transform:translateX(-50px);
	-webkit-transform:translateX(-50px);
	transform:translateX(-50px)
}
.ytp-big-mode .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox:before {
	-moz-transform:translateX(-50px);
	-ms-transform:translateX(-50px);
	-webkit-transform:translateX(-50px);
	transform:translateX(-50px)
}

   
/* Item décoché */    /* Unchecked item */
.ytp-menuitem[aria-checked="false"] .ytp-menuitem-toggle-checkbox {
   background: #FFFFFF !important;
   background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 20%, /*[[color_false]]*/ 100%) !important;
   background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 20%,/*[[color_false]]*/ 100%) !important;
   background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 20%,/*[[color_false]]*/ 100%) !important;
   box-shadow: 0px 0px 10px /*[[color_false]]*/, 0px 0px 12px /*[[color_true]]*/, 0px 0px 14px /*[[color_false]]*/ !important;
   content:'';
   background-image:none;

}
   
/* Logo 'Visionner sur YouTube' pour autres sites */    /* 'Watch on YouTube' logo for other websites */
.ytp-chrome-controls .ytp-button.ytp-youtube-button:hover:not([aria-disabled="true"]):not([disabled]) .ytp-svg-fill-logo-tube-lozenge {
   fill: #5099FF !important;
}
   
/* Roue réglages */     /* Settings gear */
.ytp-settings-button svg {
	-moz-transition:-moz-transf...