/* ==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.0.1
@advanced text watched_text "Watched video text: " "WATCHED"
@advanced dropdown watched_badge_style "Watched badge style: " {
0 "Small (default)" <<<EOT
/* white overlay *\/
.r###me-playback-background,
ytd-thumbnail-overlay-r###me-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: 11;
text-align: left;
font-size: 12px;
transition: background 0.2s;
}
/* watched tag - default *\/
.r###me-playback-background::before,
ytd-thumbnail-overlay-r###me-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: 12;
opacity: 0.9;
pointer-events: none;
font-size: 100%;
}
#thumbnail:hover ytd-thumbnail-overlay-r###me-playback-renderer {
background: rgba(0, 0, 0, 0) !important;
transition: background 0.2s;
}
EOT;
1 "Alternative (old style)" <<<EOT
/* white overlay *\/
.r###me-playback-background,
ytd-thumbnail-overlay-r###me-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: 11;
text-align: left;
font-size: 12px;
}
/* watched tag - alternative *\/
.r###me-playback-background::before,
ytd-thumbnail-overlay-r###me-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: 12;
opacity: 0.9;
pointer-events: none;
font-size: 93%;
} EOT;
2 "Full (completely covered)" <<<EOT
/* overlay *\/
.r###me-playback-background,
ytd-thumbnail-overlay-r###me-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: 11;
font-size: 12px;
text-align: center;
transition: background 0.2s;
}
/* watched tag - full *\/
.r###me-playback-background::before,
ytd-thumbnail-overlay-r###me-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: 12;
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 .r###me-playback-background::before,
.thumb-wrapper:hover .r###me-playback-background::before,
#thumbnail:hover ytd-thumbnail-overlay-r###me-playback-renderer::before {
opacity: 0;
transition: opacity 0.2s;
}
.yt-lockup-thumbnail:hover .r###me-playback-background,
.thumb-wrapper:hover .r###me-playback-background,
#thumbnail:hover ytd-thumbnail-overlay-r###me-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 *\/
.r###me-playback-progress-bar,
.ytd-thumbnail-overlay-r###me-playback-renderer {
z-index: 13 !important;
height: 4px !important;
}
.video-time,
ytd-thumbnail-overlay-time-status-renderer {
z-index: 13 !important;
pointer-events: none;
} EOT;
1 "Yes" <<<EOT
/* remove red bar - YES *\/
.r###me-playback-progress-bar, .r###me-playback-background::after,
.ytd-thumbnail-overlay-r###me-playback-renderer,
ytd-thumbnail-overlay-r###me-playback-renderer::after {
display: none !important;
}
/* fix the video time tag *\/
.video-time,
ytd-thumbnail-overlay-time-status-renderer {
z-index: 13 !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-r###me-playback-renderer { height: 4px !important; bottom: 0px !important; position: absolute !important; }
#overlays > * { z-index: 13; }
#hover-overlays ytd-thumbnail-overlay-toggle-button-renderer {
z-index: 13;
}
/*[[watched_badge_style]]*/
/* return the progressbar background */
.r###me-playback-background::after,
ytd-thumbnail-overlay-r###me-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: 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;
}
}