Last active
December 31, 2020 20:14
-
-
Save acropup/a726c1841336bf9c71f485d71526ea09 to your computer and use it in GitHub Desktop.
Show 4 lines of title text for videos on youtube homepage. See the following repo where this and other YouTube UI improvements is made into a UserStyle CSS script: https://github.com/acropup/acropup-UserStyle-CSS-Scripts#YouTube-UI-Refinements
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Set height of video's text info */ | |
div#details { | |
height: 11rem; | |
} | |
ytd-rich-item-renderer.ytd-rich-grid-renderer { | |
margin-bottom: 24px; | |
} | |
/* Move ellipsis menu to bottom left corner */ | |
ytd-menu-renderer.ytd-rich-grid-video-renderer { | |
margin-top: 9rem; | |
} | |
/* No vertical margin on video titles */ | |
h3.ytd-rich-grid-video-renderer { | |
margin: 0; | |
} | |
/* Let content overlap with ellipsis menu column */ | |
#meta.ytd-rich-grid-video-renderer { | |
padding-right: 0px; | |
} | |
/* Chanel name and view count, bottom right */ | |
ytd-video-meta-block.grid.ytd-rich-grid-video-renderer { | |
position: absolute; | |
left: 42px; | |
right: 0; | |
bottom: 0; | |
} | |
/* Channel icon, bottom left */ | |
a#avatar-link { | |
position: absolute; | |
bottom: 0px; | |
left: 0px; | |
} | |
/* Show up to 4 lines of title text before truncating with ellipsis */ | |
#video-title.yt-simple-endpoint.style-scope.ytd-rich-grid-video-renderer { | |
font-size: 1.4rem; | |
line-height: 1.8rem; | |
max-height: 7rem; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: normal; | |
-webkit-line-clamp: 4; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment