☰

Return WATCHED badge on Youtube (with custom text)

Bring back the WATCHED overlay to the videos you have already watched on youtube.

  1. /* ==UserStyle==
  2. @name Return WATCHED badge on Youtube (with custom text)
  3. @namespace q1k
  4. @type uso
  5. @description Bring back the WATCHED overlay to the videos you have already watched on youtube.
  6. @version 1.0.1
  7. @advanced text watched_text "Watched video text: " "WATCHED"
  8. @advanced dropdown watched_badge_style "Watched badge style: " {
  9. 	0 "Small (default)" <<<EOT
  10.   /* white overlay *\/
  11.   .resume-playback-background,
  12.   ytd-thumbnail-overlay-resume-playback-renderer {
  13.     background: rgba(255, 255, 255, 0.37) !important;
  14.     position: absolute;
  15.     left: 0;
  16.     top: 0;
  17.     display: block !important;
  18.     height: 100%;
  19.     width: 100%;
  20.     pointer-events: none;
  21.     opacity: 1;
  22.     z-index: 11;
  23.     text-align: left;
  24.     font-size: 12px;
  25.     transition: background 0.2s;
  26.   }
  27.   
  28.   /* watched tag - default *\/
  29.   .resume-playback-background::before,
  30.   ytd-thumbnail-overlay-resume-playback-renderer::before {
  31.     background: black;
  32.     content: "/*[[watched_text]]*\/";
  33.     color: white;
  34.     font-weight: 500;
  35.     box-sizing: border-box;
  36.     width: auto;
  37.     height: 17px;
  38.     line-height: 17px;
  39.     padding-left: 5px;
  40.     padding-right: 5px;
  41.     
  42.     display: block;
  43.     position: absolute;
  44.     left: 1px;
  45.     top: 1px;
  46.     z-index: 12;
  47.     opacity: 0.9;
  48.     pointer-events: none;
  49.     font-size: 100%;
  50.   }
  51.  
  52.   #thumbnail:hover ytd-thumbnail-overlay-resume-playback-renderer {
  53.     background: rgba(0, 0, 0, 0) !important;
  54.     transition: background 0.2s;
  55.   }
  56.  EOT;
  57. 	1 "Alternative (old style)" <<<EOT
  58.   /* white overlay *\/
  59.   .resume-playback-background,
  60.   ytd-thumbnail-overlay-resume-playback-renderer {
  61.     background: rgba(255, 255, 255, 0.37) !important;
  62.     position: absolute;
  63.     left: 0;
  64.     top: 0;
  65.     display: block !important;
  66.     height: 100%;
  67.     width: 100%;
  68.     pointer-events: none;
  69.     opacity: 1;
  70.     z-index: 11;
  71.     text-align: left;
  72.     font-size: 12px;
  73.   }
  74.   
  75.   /* watched tag - alternative *\/
  76.   .resume-playback-background::before,
  77.   ytd-thumbnail-overlay-resume-playback-renderer::before {
  78.     background: #444;
  79.     content: "/*[[watched_text]]*\/";
  80.     color: white;
  81.     font-weight: 500;
  82.     box-sizing: border-box;
  83.     width: 100%;
  84.     height: 18px;
  85.     line-height: 18px;
  86.     padding-left: 5px;
  87.     padding-right: 5px;
  88.     
  89.     display: block;
  90.     position: absolute;
  91.     left: 0;
  92.     top: 0;
  93.     z-index: 12;
  94.     opacity: 0.9;
  95.     pointer-events: none;
  96.     font-size: 93%;
  97.   } EOT;
  98. 	2 "Full (completely covered)" <<<EOT
  99.   /* overlay *\/
  100.   .resume-playback-background,
  101.   ytd-thumbnail-overlay-resume-playback-renderer {
  102.     background: rgba(0, 0, 0, 0.7) !important;
  103.     position: absolute;
  104.     left: 0;
  105.     top: 0;
  106.     display: block !important;
  107.     height: 100%;
  108.     width: 100%;
  109.     pointer-events: none;
  110.     opacity: 1;
  111.     z-index: 11;
  112.     font-size: 12px;
  113.     text-align: center;
  114.     transition: background 0.2s;
  115.   }
  116.   
  117.   /* watched tag - full *\/
  118.   .resume-playback-background::before,
  119.   ytd-thumbnail-overlay-resume-playback-renderer::before {
  120.     /*background: rgba(0, 0, 0, 0.85);*\/
  121.     content: "/*[[watched_text]]*\/";
  122.     color: white;
  123.     font-weight: 400;
  124.     box-sizing: border-box;
  125.     width: auto;
  126.     height: 100%;
  127.     line-height: normal;
  128.     padding: 1px 5px;
  129.     
  130.     display: flex;
  131.     z-index: 12;
  132.     opacity: 0.9;
  133.     pointer-events: none;
  134.     font-size: 140%;
  135.     transition: opacity 0.2s;
  136.     flex-direction: row;
  137.     align-items: center;
  138.     justify-content: center;
  139.   }
  140.   
  141.   .yt-lockup-thumbnail:hover .resume-playback-background::before,
  142.   .thumb-wrapper:hover .resume-playback-background::before,
  143.   #thumbnail:hover ytd-thumbnail-overlay-resume-playback-renderer::before {
  144.     opacity: 0;
  145.     transition: opacity 0.2s;
  146.   }
  147.   
  148.   .yt-lockup-thumbnail:hover .resume-playback-background,
  149.   .thumb-wrapper:hover .resume-playback-background,
  150.   #thumbnail:hover ytd-thumbnail-overlay-resume-playback-renderer {
  151.     background: rgba(0, 0, 0, 0) !important;
  152.     transition: background 0.2s;
  153.   } EOT;
  154. }
  155. @advanced dropdown remove_red_bar "Remove red bar?" {
  156. 	0 "No" <<<EOT
  157. /* remove red bar - NO *\/
  158.   /* fix the other tags/badges *\/
  159.   .resume-playback-progress-bar,
  160.   .ytd-thumbnail-overlay-resume-playback-renderer {
  161.     z-index: 13 !important;
  162.     height: 4px !important;
  163.   }
  164.   
  165.   .video-time,
  166.   ytd-thumbnail-overlay-time-status-renderer {
  167.     z-index: 13 !important;
  168.     pointer-events: none;
  169.   } EOT;
  170. 	1 "Yes" <<<EOT
  171. /* remove red bar - YES *\/
  172.   .resume-playback-progress-bar, .resume-playback-background::after,
  173.   .ytd-thumbnail-overlay-resume-playback-renderer,
  174.   ytd-thumbnail-overlay-resume-playback-renderer::after {
  175.     display: none !important;
  176.   }
  177.   
  178.   /* fix the video time tag *\/
  179.   .video-time,
  180.   ytd-thumbnail-overlay-time-status-renderer {
  181.     z-index: 13 !important;
  182.     pointer-events: none;
  183.     margin-bottom: 0 !important;
  184.     bottom: 2px;
  185.   } EOT;
  186. }
  187. ==/UserStyle== */
  188.  
  189. @namespace url(http://www.w3.org/1999/xhtml);
  190. @-moz-document domain("youtube.com") {
  191.   
  192. /*
  193. Bring back the WATCHED badge to the videos you have already watched on youtube.
  194. In a recent update youtube removed the watched tag, and added a red progression bar on the bottom that doesn't function properly.
  195. With this style you will get the WATCHED tag back.
  196. */
  197.   #progress.ytd-thumbnail-overlay-resume-playback-renderer { height: 4px !important; bottom: 0px !important; position: absolute !important; }
  198.   #overlays > * { z-index: 13; }
  199.   #hover-overlays ytd-thumbnail-overlay-toggle-button-renderer {
  200.     z-index: 13;
  201.   }
  202.   
  203. /*[[watched_badge_style]]*/
  204.   
  205.   /* return the progressbar background */
  206.   .resume-playback-background::after,
  207.   ytd-thumbnail-overlay-resume-playback-renderer::after {
  208.     background: rgba(255, 255, 255, 0.5);
  209.     content: "";
  210.     position: absolute;
  211.     display: block;
  212.     right: 0;
  213.     bottom: 0;
  214.     height: 4px;
  215.     width: 100%;
  216.     z-index: 12;
  217.   }
  218.   
  219.   /*[[remove_red_bar]]*/
  220.   
  221.   /* */
  222.   .watched-badge,
  223.   .ytd-thumbnail-overlay-playback-status-renderer {
  224.     display: none !important;
  225.   }
  226.   .watched .video-thumb, .watch-sidebar-body .yt-uix-simple-thumb-wrap.watched > img {
  227.     opacity: 1 !important;
  228.   }
  229.   
  230. }