☰

Return WATCHED badge on Youtube (with custom text)

While video is playing the page will turn dark automatically, giving focus to the video.

Fra og med 05.01.2021. Se den nyeste version.

/* ==UserStyle==
@name Return WATCHED badge on Youtube (with custom text)
@namespace q1k
@type less
@description While video is playing the page will turn dark automatically, giving focus to the video.
@version 1.0.0
@advanced text watched_text "Watched video text: " "WATCHED"
@advanced dropdown watched_badge_style "Watched badge style: " {
	0 "Small (default)" <<<EOT
  /* white overlay *\/
  .resume-playback-background,
  ytd-thumbnail-overlay-resume-playback-renderer {
    background: rgba(255, 255, 255, 0.37) !important;
    position: absolute;
    left: 0;
    top: 0;
    display: block !important;
    height: 100%;
    width: 100%;
    pointer-events: none;
    opacity: 1;
    z-index: 1001;
    text-align: left;
    font-size: 12px;
    transition: background 0.2s;
  }
  
  /* watched tag - default *\/
  .resume-playback-background::before,
  ytd-thumbnail-overlay-resume-playback-renderer::before {
    background: black;
    content: "/*[[watched_text]]*\/";
    color: white;
    font-weight: 500;
    box-sizing: border-box;
    width: auto;
    height: 17px;
    line-height: 17px;
    padding-left: 5px;
    padding-right: 5px;
    
    display: block;
    position: absolute;
    left: 1px;
    top: 1px;
    z-index: 1002;
    opacity: 0.9;
    pointer-events: none;
    font-size: 100%;
  }

  #thumbnail:hover ytd-thumbnail-overlay-resume-playback-renderer {
    background: rgba(0, 0, 0, 0) !important;
    transition: background 0.2s;
  }
 EOT;
	1 "Alternative (old style)" <<<EOT
  /* white overlay *\/
  .resume-playback-background,
  ytd-thumbnail-overlay-resume-playback-renderer {
    background: rgba(255, 255, 255, 0.37) !important;
    position: absolute;
    left: 0;
    top: 0;
    display: block !important;
    height: 100%;
    width: 100%;
    pointer-events: none;
    opacity: 1;
    z-index: 1001;
    text-align: left;
    font-size: 12px;
  }
  
  /* watched tag - alternative *\/
  .resume-playback-background::before,
  ytd-thumbnail-overlay-resume-playback-renderer::before {
    background: #444;
    content: "/*[[watched_text]]*\/";
    color: white;
    font-weight: 500;
    box-sizing: border-box;
    width: 100%;
    height: 18px;
    line-height: 18px;
    padding-left: 5px;
    padding-right: 5px;
    
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1002;
    opacity: 0.9;
    pointer-events: none;
    font-size: 93%;
  } EOT;
	2 "Full (completely covered)" <<<EOT
  /* overlay *\/
  .resume-playback-background,
  ytd-thumbnail-overlay-resume-playback-renderer {
    background: rgba(0, 0, 0, 0.7) !important;
    position: absolute;
    left: 0;
    top: 0;
    display: block !important;
    height: 100%;
    width: 100%;
    pointer-events: none;
    opacity: 1;
    z-index: 1001;
    font-size: 12px;
    text-align: center;
    transition: background 0.2s;
  }
  
  /* watched tag - full *\/
  .resume-playback-background::before,
  ytd-thumbnail-overlay-resume-playback-renderer::before {
    /*background: rgba(0, 0, 0, 0.85);*\/
    content: "/*[[watched_text]]*\/";
    color: white;
    font-weight: 400;
    box-sizing: border-box;
    width: auto;
    height: 100%;
    line-height: normal;
    padding: 1px 5px;
    
    display: flex;
    z-index: 1002;
    opacity: 0.9;
    pointer-events: none;
    font-size: 140%;
    transition: opacity 0.2s;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  
  .yt-lockup-thumbnail:hover .resume-playback-background::before,
  .thumb-wrapper:hover .resume-playback-background::before,
  #thumbnail:hover ytd-thumbnail-overlay-resume-playback-renderer::before {
    opacity: 0;
    transition: opacity 0.2s;
  }
  
  .yt-lockup-thumbnail:hover .resume-playback-background,
  .thumb-wrapper:hover .resume-playback-background,
  #thumbnail:hover ytd-thumbnail-overlay-resume-playback-renderer {
    background: rgba(0, 0, 0, 0) !important;
    transition: background 0.2s;
  } EOT;
}
@advanced dropdown remove_red_bar "Remove red bar?" {
	0 "No" <<<EOT
/* remove red bar - NO *\/
  /* fix the other tags/badges *\/
  .resume-playback-progress-bar,
  .ytd-thumbnail-overlay-resume-playback-renderer {
    z-index: 1003 !important;
    height: 4px !important;
  }
  
  .video-time,
  ytd-thumbnail-overlay-time-status-renderer {
    z-index: 1003 !important;
    pointer-events: none;
  } EOT;
	1 "Yes" <<<EOT
/* remove red bar - YES *\/
  .resume-playback-progress-bar, .resume-playback-background::after,
  .ytd-thumbnail-overlay-resume-playback-renderer,
  ytd-thumbnail-overlay-resume-playback-renderer::after {
    display: none !important;
  }
  
  /* fix the video time tag *\/
  .video-time,
  ytd-thumbnail-overlay-time-status-renderer {
    z-index: 1003 !important;
    pointer-events: none;
    margin-bottom: 0 !important;
    bottom: 2px;
  } EOT;
}
==/UserStyle== */

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("youtube.com") {
  
/*
Bring back the WATCHED badge to the videos you have already watched on youtube.
In a recent update youtube removed the watched tag, and added a red progression bar on the bottom that doesn't function properly.
With this style you will get the WATCHED tag back.
*/
  #progress.ytd-thumbnail-overlay-resume-playback-renderer { height: 4px !important; bottom: 0px !important; position: absolute !important; }
  #overlays > * { z-index: 1003; }
  #hover-overlays ytd-thumbnail-overlay-toggle-button-renderer {
    z-index: 1003;
  }
  
/*[[watched_badge_style]]*/
  
  /* return the progressbar background */
  .resume-playback-background::after,
  ytd-thumbnail-overlay-resume-playback-renderer::after {
    background: rgba(255, 255, 255, 0.5);
    content: "";
    position: absolute;
    display: block;
    right: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    z-index: 1002;
  }
  
  /*[[remove_red_bar]]*/
  
  /* */
  .watched-badge,
  .ytd-thumbnail-overlay-playback-status-renderer {
    display: none !important;
  }
  .watched .video-thumb, .watch-sidebar-body .yt-uix-simple-thumb-wrap.watched > img {
    opacity: 1 !important;
  }
  
}