A small tweak that adds a shadow to the timeline, and anything under it so that it is easier to see it on a light background.
Небольшой твик, добавляющий тень к линии времени и всему, что ниже, чтобы было проще увидеть их на светлом фоне
Before:
After:
Youtube: Better timeline and text visibility by tutah1
Details
Authortutah1
LicenseNo License
CategoryYouTube
Created
Updated
Size1.9 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
16.05.2022 update: made buttons and section name shadow stringer, added a gradient to timeline, so it's easy to see it both on the light and black backgrounds
17.02.2023 update: now the chapters have borders, so it's much easier to distinguish them
20230217.16.48: added text-shadow to chapter description pop-up on mouse hover
Source code
/* ==UserStyle==
@name Youtube тень времени
@version 20230409.18.05
@namespace userstyles.world/user/tutah1
@description Небольшой твик, добавляющий тень к времени, чтобы её было проще увидеть на светлом фоне.
Before:
After:
@author tutah1
@license No License
==/UserStyle== */
/* ==UserStyle==
@name Youtube: Better timeline and text visibility
@version 20230217.16.48
@namespace userstyles.world/user/tutah1
@description Небольшой твик, добавляющий тень ко времени и другим элементам проигрывателя, чтобы их было проще увидеть на светлом фоне.
Before:
After:
@author tutah1
@license No License
==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com/watch") {
.ytp-time-current, .ytp-time-separator, .ytp-time-duration, /*time below*/
.ytp-chapter-title-content, /*chapter description text below*/
.ytp-tooltip-title > span /*chapter description pop-up (on mouse hover)*/
{text-shadow: 1px 1px 2px black, 0 0 5px black;
}
.ytp-chapter-hover-container {
background: linear-gradient(180deg, #00000073, transparent);
}
.ytp-svg-shadow {
stroke-opacity: 0.55;
}
.ytp-chapter-hover-container {
background: linear-gradient(180deg, #00000073, transparent);
box-sizing: border-box;
border-right: solid #e1e3e4 2px;
border-left: solid #fff 2px
}
.ytp-chapter-hover-container:hover {
border-right: solid #f1f1f1 5px;
border-left: solid #fff 5px
}
}