Bring back the WATCHED overlay to the videos you have already watched on youtube.
/* ==UserStyle==
@name Return WATCHED badge on Youtube (with custom text)
@namespace q1k
@type uso
@description Bring back the WATCHED overlay to the videos you have already watched on youtube.
@version 1.3.0
@advanced text watched_text "Watched video text: " "WATCHED"
@advanced dropdown watched_badge_style "Watched badge style: " {
1 "Small (default)" <<<EOT
/* white overlay *\/
.resume-playback-background,
ytd-thumbnail-overlay-resume-playback-renderer,
.ytThumbnailOverlayProgressBarHostWatchedProgressBar {
background: rgba(255, 255, 255, /*[[opacity0]]*\/) !important;
position: absolute;
left: 0;
top: 0;
display: block !important;
height: 100%;
width: 100%;
pointer-events: none;
opacity: 1;
z-index: 11;
text-align: left;
font-size: 12px;
transition: background 0.2s;
}
/* watched tag - default *\/
.resume-playback-background::before,
ytd-thumbnail-overlay-resume-playback-renderer::before,
.ytThumbnailOverlayProgressBarHostWatchedProgressBar::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: 12;
opacity: 0.9;
pointer-events: none;
font-size: 100%;
}
#thumbnail:hover ytd-thumbnail-overlay-resume-playback-renderer,
yt-thumbnail-view-model:hover .ytThumbnailOverlayProgressBarHostWatchedProgressBar {
background: rgba(0, 0, 0, 0) !important;
transition: background 0.2s;
}
EOT;
2 "Alternative (old style)" <<<EOT
/* white overlay *\/
.resume-playback-background,
ytd-thumbnail-overlay-resume-playback-renderer,
.ytThumbnailOverlayProgressBarHostWatchedProgressBar {
background: rgba(255, 255, 255, /*[[opacity0]]*\/) !important;
position: absolute;
left: 0;
top: 0;
display: block !important;
height: 100%;
width: 100%;
pointer-events: none;
opacity: 1;
z-index: 11;
text-align: left;
font-size: 12px;
}
/* watched tag - alternative *\/
.resume-playback-background::before,
ytd-thumbnail-overlay-resume-playback-renderer::before,
.ytThumbnailOverlayProgressBarHostWatchedProgressBar::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: 12;
opacity: 0.9;
pointer-events: none;
font-size: 93%;
}
EOT;
3 "Full cover" <<<EOT
/* overlay *\/
.resume-playback-background,
ytd-thumbnail-overlay-resume-playback-renderer,
.ytThumbnailOverlayProgressBarHostWatchedProgressBar {
background: rgba(0, 0, 0, /*[[opacity1]]*\/) !important;
position: absolute;
left: 0;
top: 0;
display: block !important;
height: 100%;
width: 100%;
pointer-events: none;
opacity: 1;
z-index: 11;
font-size: 12px;
text-align: center;
transition: background 0.2s;
}
/* watched tag - full *\/
.resume-playback-background::before,
ytd-thumbnail-overlay-resume-playback-renderer::before,
.ytThumbnailOverlayProgressBarHostWatchedProgressBar::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;
position: relative;
z-index: 14;
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,
yt-thumbnail-view-model:hover .ytThumbnailOverlayProgressBarHostWatchedProgressBar::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,
yt-thumbnail-view-model:hover .ytThumbnailOverlayProgressBarHostWatchedProgressBar {
background: rgba(0, 0, 0, 0) !important;
transition: background 0.2s;
}
EOT;
4 "Full (with progressive hide)" <<<EOT
/* overlay *\/
.resume-playback-background,
ytd-thumbnail-overlay-resume-playback-renderer,
.ytThumbnailOverlayProgressBarHostWatchedProgressBar {
background: rgba(0, 0, 0, /*[[opacity1]]*\/) !important;
position: absolute;
left: 0;
top: 0;
display: block !important;
height: 100%;
width: 100%;
pointer-events: none;
opacity: 1;
z-index: 11;
font-size: 12px;
text-align: center;
transition: background 0.2s;
}
/* watched tag - full *\/
.resume-playback-background::before,
ytd-thumbnail-overlay-resume-playback-renderer::before,
.ytThumbnailOverlayProgressBarHostWatchedProgressBar::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;
position: relative;
z-index: 14;
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,
yt-thumbnail-view-model:hover .ytThumbnailOverlayProgressBarHostWatchedProgressBar::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,
yt-thumbnail-view-model:hover .ytThumbnailOverlayProgressBarHostWatchedProgressBar,
#thumbnail:hover #progress.ytd-thumbnail-overlay-resume-playback-renderer::after,
yt-thumbnail-view-model:hover .ytThumbnailOverlayProgressBarHostWatchedProgressBarSegment::after {
background: rgba(0, 0, 0, 0) !important;
transition: background 0.2s;
}
#progress.ytd-thumbnail-overlay-resume-playback-renderer,
.ytThumbnailOverlayProgressBarHostWatchedProgressBar .ytThumbnailOverlayProgressBarHostWatchedProgressBarSegment {
background: none !important;
height: 100% !important;
bottom: 0px !important;
position: absolute !important;
}
#progress.ytd-thumbnail-overlay-resume-playback-renderer::before,
.ytThumbnailOverlayProgressBarHostWatchedProgressBarSegment::before {
content: "";
position: absolute;
bottom: 0px;
left: 0;
height: 3px;
width: 100%;
background: red;
}
#progress.ytd-thumbnail-overlay-resume-playback-renderer::after,
.ytThumbnailOverlayProgressBarHostWatchedProgressBarSegment::after {
content: "";
background-color: rgba(0,0,0,/*[[opacity2]]*\/);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
EOT;
}
@advanced number opacity0 "Small and Alternative opacity" [0.35, 0 , 1, 0.05]
@advanced number opacity1 "Full cover opacity" [0.70, 0, 1, 0.05]
@advanced number opacity2 "Full cover progressive hide opacity" [0.50, 0, 1, 0.05]
@advanced dropdown remove_red_bar "Remove red bar?" {
1 "No" <<<EOT
/* remove red bar - NO *\/
/* fix the other tags/badges *\/
.resume-playback-progress-bar,
.ytd-thumbnail-overlay-resume-playback-renderer,
.ytThumbnailOverlayProgressBarHostWatchedProgressBarSegment {
z-index: 13 !important;
height: 3px !important;
}
.video-time,
ytd-thumbnail-overlay-time-status-renderer,
.ytThumbnailBottomOverlayViewModelBadgeContainer .ytThumbnailBadgeViewModelHost {
z-index: 13 !important;
pointer-events: none;
} EOT;
2 "Yes" <<<EOT
/* remove red bar - YES *\/
.resume-playback-progress-bar, .resume-playback-background::after,
.ytd-thumbnail-overlay-resume-playback-renderer,
.ytThumbnailOverlayProgressBarHostWatchedProgressBarSegment,
ytd-thumbnail-overlay-resume-playback-renderer::after,
.ytThumbnailOverlayProgressBarHostWatchedProgressBar::after,
#progress.ytd-thumbnail-overlay-resume-playback-renderer::before,
.ytThumbnailOverlayProgressBarHostWatchedProgressBarSegment::before {
background: none !important;
}
/* fix the video time tag *\/
.video-time,
ytd-thumbnail-overlay-time-status-renderer,
.ytThumbnailBottomOverlayViewModelBadgeContainer .ytThumbnailBadgeViewModelHost {
z-index: 13 !important;
pointer-events: none;
/*margin-bottom: 2px !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,
.ytThumbnailOverlayProgressBarHostWatchedProgressBarSegment {
height: 3px !important;
bottom: 0px !important;
position: absolute !important;
background: red;
}
#overlays > *, .ytThumbnailBottomOverlayViewModelBadgeContainer { z-index: 13; }
#hover-overlays ytd-thumbnail-overlay-toggle-button-renderer {
z-index: 13;
}
.ytThumbnailBottomOverlayViewModelHost {
position:absolute; top: 0; bottom: 0; left: 0; right: 0;
}
/*[[watched_badge_style]]*/
/* return the progressbar background */
.resume-playback-background::after,
ytd-thumbnail-overlay-resume-playback-renderer::after,
.ytThumbnailOverlayProgressBarHostWatchedProgressBar::after {
background: rgba(255, 255, 255, 0.5);
content: "";
position: absolute;
display: block;
right: 0;
bottom: 0;
height: 3px;
width: 100%;
z-index: 12;
}
/*[[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;
}
}