Make full-width elements narrower on large screens.
Piped large screen optimizations by shrugal
Details
Authorshrugal
LicenseNo License
Categorypiped
Created
Updated
Size1.9 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name Piped Player
@version 20231118.12.48
@namespace userstyles.world/user/shrugal
@description Make the elements below the video narrower on large screens.
@author shrugal
@license No License
==/UserStyle== */
@-moz-document regexp("https?://piped\\..+") {
.suggestions-container {
padding: 0;
}
.suggestions-container ul li {
padding: 5px 10px;
}
}
@-moz-document regexp("https?://piped\\..+\\/(watch|shorts|live\\/).+") {
#app > div > div > div.w-full > div:first-child > :first-child {
margin-block: 10px 20px;
}
@media (min-width: 1760px) {
#app > div > div > div.w-full > div:first-child > :not(:first-child):not(button),
#app > div > div > div.w-full > div:last-child,
#app > div > div > div.w-full > hr {
max-width: 1720px;
margin-inline: auto;
}
#app > div > div > div.w-full > label,
#app > div > div > div.w-full > div:first-child > button {
margin-left: calc((100vw - 1720px - 40px) / 2);
}
}
}
@-moz-document regexp("https?://piped\\..+\\/(@|c\\/|channel\\/|user\\/).+") {
@media (min-width: 1760px) {
#app > div > div > div:last-child {
max-width: 1720px;
margin-inline: auto;
}
}
}
@-moz-document regexp("https?://piped\\..+\\/(feed|trending|history|playlists|playlist\\?.+|results\\?.+)") {
@media (min-width: 1760px) {
#app > div > div > h1,
#app > div > div > h2,
#app > div > div > hr,
#app > div > div > div:not(.mobile-search, .suggestions-container) {
max-width: 1720px;
margin-inline: auto;
}
#app > div > div > button,
#app > div > div > span:not(button + span),
#app > div > div > h1 + label {
margin-left: calc((100vw - 1720px - 40px) / 2);
}
#app > div > div > span:last-of-type {
margin-right: calc((100vw - 1720px - 40px) / 2);
}
}
}