☰

YouTube - Compact Thumbnails on Subscriptions Page

This style reverts back to compact-styled thumbnails from the subscriptions feed. (but this also removes the 'Shorts' feed from this page to have a cleaner page)

  1. /* ==UserStyle==
  2. @name         YouTube - Compact Thumbnails on Subscriptions Page
  3. @version      20240813.00.36
  4. @namespace    userstyles.world/user/magma_craft
  5. @description  This style reverts back to compact-styled thumbnails from the subscriptions feed. (but this also removes the 'Shorts' feed from this page to have a cleaner page)
  6. @author       magma_craft
  7. @license      CC Zero
  8. ==/UserStyle== */
  9. @-moz-document domain("youtube.com") {
  10. [page-subtype="subscriptions"] #avatar-link.ytd-rich-grid-media, [page-subtype="subscriptions"] #avatar-container.ytd-rich-grid-media {
  11. display: none !important;
  12. margin-right: 0 !important
  13. }
  14.  
  15. [page-subtype="subscriptions"] #video-title.ytd-rich-grid-media {
  16. font-size: 1.4rem !important;
  17. line-height: 1.8rem !important
  18. }
  19.  
  20. [page-subtype="subscriptions"] ytd-video-meta-block[rich-meta] #channel-name.ytd-video-meta-block, [page-subtype="subscriptions"] ytd-video-meta-block[rich-meta] #metadata-line.ytd-video-meta-block {
  21. font-size: 1.2rem !important
  22. }
  23.  
  24. [page-subtype="subscriptions"] ytd-rich-shelf-renderer {
  25. display: none !important
  26. }
  27.  
  28. [page-subtype="subscriptions"] ytd-rich-item-renderer {
  29. margin-left: 0px !important;
  30. margin-right: 0px !important;
  31. margin-bottom: 24px;
  32. width: calc(100% / var(--ytd-rich-grid-items-per-row) - 4px - 0.01px)
  33. }
  34.  
  35. [page-subtype="subscriptions"] h3.ytd-rich-grid-video-renderer {
  36. margin: 8px 0 8px !important
  37. }
  38.  
  39. [page-subtype="subscriptions"] ytd-primetime-promo-renderer.ytd-rich-section-renderer, [page-subtype="subscriptions"] ytd-inline-survey-renderer.ytd-rich-section-renderer {
  40. border-top: 1px solid var(--yt-spec-10-percent-layer);
  41. border-bottom: 1px solid var(--yt-spec-10-percent-layer)
  42. }
  43.  
  44. [page-subtype="subscriptions"] ytd-thumbnail[size=large] a.ytd-thumbnail, [page-subtype="subscriptions"] ytd-thumbnail[size=large]:before {
  45. border-radius: 8px !important
  46. }
  47.  
  48. ytd-thumbnail[size=large] ytd-thumbnail-overlay-time-status-renderer.ytd-thumbnail, ytd-thumbnail[size=large] ytd-thumbnail-overlay-button-renderer.ytd-thumbnail, ytd-thumbnail[size=large] ytd-thumbnail-overlay-toggle-button-renderer.ytd-thumbnail {
  49. margin: 4px !important
  50. }
  51.  
  52. [page-subtype="subscriptions"] div.ghost-grid.style-scope.ytd-ghost-grid-renderer {
  53. display: none !important
  54. }
  55.  
  56. [page-subtype="subscriptions"] html:not(.style-scope) {
  57. --ytd-rich-grid-item-max-width: 210px !important;
  58. --ytd-rich-grid-item-margin: 4px !important
  59. }
  60.  
  61. [page-subtype="subscriptions"] #contents.ytd-rich-grid-renderer, [page-subtype="subscriptions"] #grid-header.ytd-rich-grid-renderer {
  62. width: calc(100% + 4px + 0.01px) !important;
  63. max-width: calc( var(--ytd-rich-grid-items-per-row) * (var(--ytd-rich-grid-item-max-width) + var(--ytd-rich-grid-item-margin))) !important
  64. }
  65.  
  66. @media (max-width: 456px) {ytd-rich-grid-renderer {--ytd-rich-grid-items-per-row: 1 !important;--ytd-rich-grid-posts-per-row: 1 !important;}}
  67.  
  68. [page-subtype="subscriptions"] ytd-rich-grid-renderer, [page-subtype="subscriptions"] ytd-rich-grid-renderer.style-scope.ytd-two-column-browse-results-renderer {
  69. --ytd-rich-grid-items-per-row: var(--grid-items-videos--per-row) !important;
  70. --ytd-rich-grid-posts-per-row: var(--grid-posts-videos-per-row) !important
  71. }
  72.  
  73. @media (max-width: 456px) {html:not(.style-scope) {--grid-items-videos--per-row: 1;--grid-posts-videos-per-row: 1;}}
  74.  
  75. @media (min-width: 457px) {html:not(.style-scope) {--load-videos-items-per-row: 903px;--grid-items-videos--per-row: 2;--grid-posts-videos-per-row: 2;}}@media (min-width: 647px) {html:not(.style-scope) {--load-videos-items-per-row: 1300px;--grid-items-videos--per-row: 3;--grid-posts-videos-per-row: 3;}}
  76.  
  77. @media (min-width: 957px) {html:not(.style-scope) {--load-videos-items-per-row: 1680px;--grid-items-videos--per-row: 4;--grid-posts-videos-per-row: 3;}}
  78.  
  79. @media (min-width: 1171px) {html:not(.style-scope) {--load-videos-items-per-row: 2013px;--grid-items-videos--per-row: 5;--grid-posts-videos-per-row: 3;}}
  80.  
  81. @media (min-width: 1600px) {html:not(.style-scope) {--load-videos-items-per-row: 2348px;--grid-items-videos--per-row: 6;--grid-posts-videos-per-row: 3;}}
  82.  
  83. [page-subtype="subscriptions"] ytd-rich-grid-renderer #contents ytd-rich-grid-row, 
  84. [page-subtype="subscriptions"] ytd-rich-grid-renderer #contents ytd-rich-grid-row #contents {
  85. display: contents !important
  86. }
  87.  
  88. [page-subtype="subscriptions"] #contents.ytd-rich-grid-renderer, [page-subtype="subscriptions"] #grid-header.ytd-rich-grid-renderer {
  89. --ytd-rich-grid-item-max-width: 210px !important
  90. }
  91. }