Youtube: Adjust Video Thumbnail

A new userstyle

  1. /* ==UserStyle==
  2. @name Youtube: Adjust Video Thumbnail
  3. @namespace github.com/openstyles/stylus
  4. @version 0.0.3
  5. @description A new userstyle
  6. @author CY Fung
  7. @license MIT
  8. @preprocessor stylus
  9. @var range v-outer-bottom "outer-bottom" [16, 0, 32, 2, 'px']
  10. @var select v-object-fit "object-fit" {
  11. "contain": "contain",
  12. "cover": "cover",
  13. "none": "none"
  14. }
  15. @var select v-object-position "object-position" {
  16. "top": "top",
  17. "center": "center",
  18. "bottom": "bottom"
  19. }
  20. @var range v-inner-bottom "inner-bottom" [-0, -16, -0, 2, 'px']
  21. @var range v-font-size "font-size" [8, 6, 12, 0.5, 'pt']
  22. @var range v-line-height "line-height" [1.25, 1.00, 1.85, 0.05, '']
  23. @var checkbox v-border-mode "border-mode" 1
  24. @var range v-progressbar-bottom "progressbar-bottom" [17, -8, 26, 1, 'px']
  25. ==/UserStyle== */
  26.  
  27. @-moz-document domain("youtube.com") {
  28. :root {
  29. --vt-outer-bottom: v-outer-bottom;
  30. --vt-object-fit: v-object-fit;
  31. --vt-object-position: v-object-position;
  32. --vt-inner-bottom: v-inner-bottom;
  33. --vt-font-size: v-font-size;
  34. --vt-line-height: v-line-height;
  35. }
  36. ytd-watch-next-secondary-results-renderer yt-thumbnail-view-model:not([class*="-collection-thumbnail"]){
  37. overflow: visible !important;
  38. padding-bottom: var(--vt-outer-bottom) !important;
  39. img[src] {
  40. object-fit: var(--vt-object-fit);
  41. object-position: var(--vt-object-position);
  42. }
  43. if v-border-mode {
  44. border: 4px solid transparent;
  45. background-color: var(--vt-thumbnail-bgcolor);
  46. }
  47.  
  48. yt-thumbnail-overlay-badge-view-model, yt-thumbnail-bottom-overlay-view-model {
  49. margin: 0 !important;
  50. padding: 0 !important;
  51. margin-bottom: var(--vt-inner-bottom) !important;
  52. * {
  53. font-size: var(--vt-font-size) !important;
  54. }
  55. badge-shape {
  56. margin: 0 !important;
  57. line-height: var(--vt-line-height) !important;
  58. }
  59. }
  60. yt-thumbnail-badge-view-model {
  61. margin: 0 !important;
  62. padding: 0 !important;
  63. }
  64. .ytThumbnailBottomOverlayViewModelHostContainer[class] {
  65. right: 0px;
  66. left: 0px;
  67. }
  68. yt-thumbnail-overlay-progress-bar-view-model[class] {
  69. margin-top: 2px;
  70. }
  71. .ytThumbnailOverlayProgressBarHostWatchedProgressBar[class],
  72. .ytThumbnailOverlayProgressBarHostUseLegacyBar[class] {
  73. margin-bottom: v-progressbar-bottom;
  74. box-sizing: border-box;
  75. }
  76. }
  77. if v-border-mode {
  78. yt-thumbnail-view-model {
  79. --vt-thumbnail-bgcolor: rgba(127, 127, 127, 0.33);
  80. }
  81. yt-thumbnail-view-model:has([class*="-live"]) {
  82. --vt-thumbnail-bgcolor: rgba(225,0,45,0.9);
  83. }
  84. ytd-watch-next-secondary-results-renderer yt-thumbnail-view-model:has(yt-thumbnail-hover-overlay-toggle-actions-view-model) {
  85. --vt-thumbnail-bgcolor: transparent;
  86. }
  87. /*
  88. ytd-watch-next-secondary-results-renderer yt-thumbnail-view-model:has([class*="-live"]) {
  89. border-color: rgba(225,0,45,0.9);
  90. --vt-outer-bottom: 0;
  91. --vt-inner-bottom: 0;
  92. --vt-object-position: center;
  93. }
  94. */
  95. /*
  96. ytd-watch-next-secondary-results-renderer yt-thumbnail-view-model [class*="-live"] {
  97. display: none;
  98. }
  99. */
  100. }
  101. }

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址