API tools faq
paste
difool2nice

youtube progress bar laser

difool2nice
May 9th, 2020
178
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 8.62 KB | None | 0 0
raw download clone embed print report
  1.  
  2. @-moz-document url("https://www.youtube.com") {
  3. .html5-play-progress, .ytp-play-progress {
  4.    background: #1e90ff;
  5.    background: -moz-linear-gradient(top, #1e90ff 0%, #1e90ff 35%, #ffffff 65%, #1e90ff 100%);
  6.    background: -webkit-linear-gradient(top, #1e90ff 0%,#ffffff 35%,#ffffff 65%,#1e90ff 100%);
  7.    background: linear-gradient(to bottom, #1e90ff 0%,#ffffff 24%,#ffffff 65%,#1e90ff 100%);
  8.    box-shadow: 0px 0px 20px #1e90ff, 0px 0px 20px #1e90ff, 0px 0px 20px #1e90ff !important;
  9. }
  10.    
  11. /* Barre de chargement */    /* Video load bar */
  12. .html5-load-progress, .ytp-load-progress {
  13.    background: #70B9FF;
  14.    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%);
  15.    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%);
  16.    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%);
  17.    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;
  18. }
  19.    
  20. /* Bouton de scroll */    /* Scrubber button */
  21. .html5-scrubber-button, .ytp-scrubber-button {
  22.    background: rgba(255, 255, 255, 0)  !important;
  23.    border-color: rgba(255, 255, 255, 0)  !important;
  24.    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;
  25.    transition: box-shadow 0.0s, background 0.0s !important;
  26.  
  27.      
  28. }
  29. /* Boutton de scroll — hover */    /* Scrubber button — hover */
  30. .html5-scrubber-button:hover, .ytp-scrubber-button:hover {
  31.    background: #FFFFFF !important;
  32.    background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 20%, #1e90ff 100%) !important;
  33.    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 20%,#1e90ff 100%) !important;
  34.    background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 20%,#1e90ff 100%) !important;
  35.    border-color: #ffffff !important;
  36.    box-shadow: 0px 0px 10px #1e90ff, 0px 0px 12px #1e90ff, 0px 0px 14px #1e90ff !important;
  37. }
  38.  
  39.  
  40.    
  41. /* Réglage volume /    / Volume control bar */
  42. .ytp-volume-slider-handle {
  43.     position:absolute;
  44.     top:50%;
  45.     width:3px;
  46.     height:14px;
  47.     margin-top:-7px;
  48.    margin-left:0px;
  49.    background: #161925 !important;
  50.    background: -moz-linear-gradient(left, #161925  0%, #161925  35%, #ffffff 65%, #161925  100%) !important;
  51.    background: -webkit-linear-gradient(left, #161925  0%,#ffffff 35%,#ffffff 65%,#161925  100%) !important;
  52.    background: linear-gradient(to right, #161925 0%,#ffffff 24%,#ffffff 65%,#161925 100%) !important;
  53.    box-shadow: 0px 0px 10px #161925, 0px 0px 10px #161925, 0px 0px 10px #161925 !important;
  54. }
  55. .ytp-big-mode .ytp-volume-slider-handle {
  56.     width:4px;
  57.     height:22px;
  58.     margin-top:-11px
  59. }
  60.  
  61.  
  62. .ytp-volume-slider-handle:before,.ytp-volume-slider-handle:after {
  63.    background: #ffffff !important;
  64.    background: -moz-linear-gradient(top, #161925 0%, #161925 35%, #ffffff 65%, #161925 100%) !important;
  65.    background: -webkit-linear-gradient(top, #161925 0%,#ffffff 35%,#ffffff 65%,#161925 100%) !important;
  66.    background: linear-gradient(to bottom, #161925 0%,#ffffff 24%,#ffffff 65%,#161925 100%) !important;
  67. /*   box-shadow: 0px 0px 5px #ED0000, 0px 0px 5px #ED0000, 0px 0px 5px #ED0000 !important;*/
  68.     width:50px;
  69.    margin-left:-50px;
  70. }
  71. .ytp-volume-slider-handle:after {
  72.     left:0px;
  73.     background:rgba(255,255,255,.2)
  74. }
  75. .ytp-big-mode .ytp-volume-slider-handle:before,.ytp-volume-slider-handle:after {
  76.     width:50px;
  77.     height:2.5px;
  78. }
  79. .ytp-big-mode .ytp-volume-slider-handle:after {
  80.     left:-46px;
  81.     background:rgba(255,255,255,.2)
  82. }
  83.    
  84. /* Badge HD-4k-5k-8k-3D */
  85. .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 {
  86.    width:3px;
  87.    height:20px;
  88.      top:8px;
  89.      right:17px;
  90.    background: #161925 !important;
  91.    background: -moz-linear-gradient(left, #161925 0%, #161925 35%, #ffffff 65%, #161925 100%) !important;
  92.    background: -webkit-linear-gradient(left, #161925 0%,#ffffff 35%,#ffffff 65%,#161925 100%) !important;
  93.    background: linear-gradient(to right, #161925 0%,#ffffff 24%,#ffffff 65%,#161925 100%) !important;
  94.    box-shadow: 0px 0px 10px #161925, 0px 0px 10px #161925, 0px 0px 10px #161925 !important;
  95.    content:''
  96. }
  97. .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 {
  98.    width:3px;
  99.    height: calc(20px*1.4) ;
  100.      top:10px;
  101.      right:23px;
  102.    content:'';
  103.    background-image:none;
  104.  
  105. }
  106. .ytp-settings-button.ytp-3d-badge::after {
  107.    width:4px;
  108.    height:20px;
  109.      top:8px;
  110.      right:16px;
  111.    background: #00ED00 !important;
  112.    background: -moz-linear-gradient(left, #00ED00 0%, #00ED00 35%, #ffffff 65%, #00ED00 100%) !important;
  113.    background: -webkit-linear-gradient(left, #00ED00 0%,#ffffff 35%,#ffffff 65%,#00ED00 100%) !important;
  114.    background: linear-gradient(to right, #00ED00 0%,#ffffff 24%,#ffffff 65%,#00ED00 100%) !important;
  115.    box-shadow: 0px 0px 10px #00ED00, 0px 0px 10px #00ED00, 0px 0px 10px #00ED00 !important;
  116.    content:''
  117. }
  118. .ytp-big-mode .ytp-settings-button.ytp-3d-badge::after {
  119.    width:3px;
  120.    height: calc(20px*1.4) ;
  121.      top:10px;
  122.      right:23px;
  123.    content:''
  124. }
  125.  
  126.    
  127.    
  128. /* Lettres HD dans menu */    /* HD letters in menu */
  129. .ytp-swatch-color {
  130.    color: #1e90ff !important;
  131. }
  132.    
  133. /* Item coché */    /* Checked item */
  134. .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox {
  135.    background: #FFFFFF !important;
  136.    background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 20%, #5099FF 100%) !important;
  137.    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 20%,#5099FF 100%) !important;
  138.    background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 20%,#5099FF 100%) !important;
  139.    border-color: #ffffff !important;
  140.    box-shadow: 0px 0px 10px #5099FF, 0px 0px 12px #5099FF, 0px 0px 14px #5099FF !important;
  141.    content:''
  142. }
  143. .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox:before {
  144.     -moz-transform:translateX(-50px);
  145.     -ms-transform:translateX(-50px);
  146.     -webkit-transform:translateX(-50px);
  147.     transform:translateX(-50px)
  148. }
  149. .ytp-big-mode .ytp-menuitem[aria-checked="true"] .ytp-menuitem-toggle-checkbox:before {
  150.     -moz-transform:translateX(-50px);
  151.     -ms-transform:translateX(-50px);
  152.     -webkit-transform:translateX(-50px);
  153.     transform:translateX(-50px)
  154. }
  155.  
  156.    
  157. /* Item décoché */    /* Unchecked item */
  158. .ytp-menuitem[aria-checked="false"] .ytp-menuitem-toggle-checkbox {
  159.    background: #FFFFFF !important;
  160.    background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 20%, #ED0000 100%) !important;
  161.    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 20%,#ED0000 100%) !important;
  162.    background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 20%,#ED0000 100%) !important;
  163.    box-shadow: 0px 0px 10px #ED0000, 0px 0px 12px #5099FF, 0px 0px 14px #ED0000 !important;
  164.    content:'';
  165.    background-image:none;
  166.  
  167. }
  168.    
  169. /* Logo 'Visionner sur YouTube' pour autres sites */    /* 'Watch on YouTube' logo for other websites */
  170. .ytp-chrome-controls .ytp-button.ytp-youtube-button:hover:not([aria-disabled="true"]):not([disabled]) .ytp-svg-fill-logo-tube-lozenge {
  171.    fill: #5099FF !important;
  172. }
  173.    
  174. /* Roue réglages */     /* Settings gear */
  175. .ytp-settings-button svg {
  176.     -moz-transition:-moz-transform .4s cubic-bezier(.58,.24,.47,2.3);
  177.     -webkit-transition:-webkit-transform .4s cubic-bezier(.58,.24,.47,1);
  178.     -ms-transition:-ms-transform .4s cubic-bezier(.58,.24,.47,2.3);
  179.    transition:transform .4s cubic-bezier(.58,.24,.47,2.3)
  180. }
  181. .ytp-settings-button[aria-expanded=true] svg {
  182.     -moz-transform:rotateY(180deg) translateY(-5px);
  183.     -ms-transform:rotateY(180deg) translateY(-5px);
  184.     -webkit-transform:rotateY(180deg) translateY(-5px);
  185.     transform:rotateY(180deg) translateY(-5px);
  186. }
  187. .ytp-big-mode .ytp-settings-button[aria-expanded=true] svg {
  188.     -moz-transform:rotateY(180deg) translateY(-9px);
  189.     -ms-transform:rotateY(180deg) translateY(-9px);
  190.     -webkit-transform:rotateY(180deg) translateY(-9px);
  191.     transform:rotateY(180deg) translateY(-9px);
  192. }
  193. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!