Stylus/Stylish CSS
Added:
Category: tech
These are the CSS modifications I use for the Stylus/Stylish user CSS extension. Forgive the poor styling, as most of the ones I did were made piece-wise.
youtube.com
Make the "theater mode" take up the maximum screen real estate.
ytd-watch-flexy[theater] #player-theater-container.ytd-watch-flexy{
max-height: calc(100vh - 56px)
}
ytd-watch-flexy[fullscreen] #player-theater-container.ytd-watch-flexy{
max-height: calc(100vh)
}
watch2gether.com/w2g.tv
Make the video and chat/playlist/history function take up as much space as possible. Remove profile pictures from user list so it doesn't block the video.
.w2g-until-mobile {
display: none;
}
.w2g-center-plus {
display: none;
}
.w2g-search-show {
display: block;
}
.w2g-player-search {
max-width: initial;
margin-top: 0;
}
.w2g-video-container, .w2g-npa-player{
max-height: calc(100vh - 10vh)
}
.w2g-userbar {
padding: 0;
min-height: initial;
max-height: initial;
height: initial;
}
.w2g-user-avatar {
display: none
}
.w2g-userctrl {
display: none;
}
.w2g-main-lower {
padding: 0;
}
.w2g-main-right {
margin: 0;
}
proko.com
Make the lesson videos easier to see on high res screens.
.container {
max-width: 92vw;
padding-left: 5vw;
padding-right: 3vw;
}
[class*="ng-tns"] {
grid-template-columns: minmax(152px, 60vw) minmax(152px, 400px) minmax(328px, 1fr) !important;
}
.__lesson-wrapper {
grid-template-columns: minmax(152px, 60vw) minmax(152px, 400px) minmax(328px, 1fr) !important;
}
.lesson-info-container {
max-width: 20vw;
}
.__lesson-wrapper-description {
max-width: 40vw;
}