Tabview Youtube Design Customization

Change some designs in Tabview Youtube

目前为 2024-04-24 提交的版本。查看 最新版本

  1. /* ==UserStyle==
  2. @name Tabview Youtube Design Customization
  3. @version 0.2.5
  4. @namespace github.com/cyfung1031
  5. @license MIT
  6. @description Change some designs in Tabview Youtube
  7. @author CY Fung
  8. @supportURL https://github.com/cyfung1031/Tabview-Youtube/
  9. @preprocessor stylus
  10. @var select default-tab "Default Tab" {
  11. "dt0:Default / Local Setting": "0",
  12. "dt1:Info Tab": "1",
  13. "dt2:Comments Tab": "2",
  14. "dt3:Videos Tab": "3"
  15. }
  16. @var checkbox no-rounded-button "No Rounded Button" 0
  17. @var checkbox no-tab-btn-text "No Tab Button Text" 0
  18. @var checkbox round-tab-container "Round Tab Container" 0
  19. @var checkbox round-live-chat-frame "Round Live Chat Frame" 0
  20. @var checkbox use-custom-rounding "Use Custom Rounding" 0
  21. @var range custom-rounding-value "Custom Rounding Value" [12, 1, 50, 1, 'px']
  22. @var checkbox split-tabs "Split Tabs" 0
  23. @var checkbox hide-tab-info "Hide Tab - Info" 0
  24. @var checkbox hide-tab-comments "Hide Tab - Comments" 0
  25. @var checkbox hide-tab-videos "Hide Tab - Videos" 0
  26. @var checkbox no-red-line-for-single-tab "No Red Line For Single Tab" 0
  27. @var checkbox move-tabs-to-top-side-when-chat-expanded "Move Tabs To Top Side When Chat Expanded" 0
  28. ==/UserStyle== */
  29.  
  30. keyFrameForTabviewTabsHideController(a, x)
  31. $keyframe-name = s('%s-%s',a, x);
  32. @keyframes {$keyframe-name}
  33. for i in 0..1
  34. {100% * i}
  35. background-position-x (i+1)px
  36.  
  37.  
  38. @-moz-document url-prefix("https://www.youtube.com/watch?v=") {
  39.  
  40. if no-rounded-button {
  41. html .yt-spec-button-shape-next--size-m,
  42. html .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start,
  43. // html .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-button.yt-spec-button-shape-next--segmented-end,
  44. html .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-end {
  45. border-radius: 0;
  46. }
  47. }
  48.  
  49. if no-tab-btn-text {
  50. .tab-btn[tyt-tab-content="#tab-info"] span,
  51. .tab-btn[tyt-tab-content="#tab-videos"] span,
  52. .tab-btn[tyt-tab-content="#tab-playlist"] span {
  53. display: none;
  54. }
  55. }
  56. if round-tab-container {
  57. html body ytd-watch-flexy[class] #right-tabs {
  58. border-radius: var(--tyt-rounding-value);
  59. outline: 1px solid var(--yt-spec-10-percent-layer);
  60. contain: paint;
  61. #material-tabs {
  62. border: 0;
  63. }
  64. .tab-content {
  65. border: 0;
  66. border-top: 1px solid var(--yt-spec-10-percent-layer);
  67. }
  68. }
  69. }
  70. if round-live-chat-frame {
  71. ytd-live-chat-frame#chat.ytd-watch-flexy{
  72. border-radius: var(--tyt-rounding-value);
  73. }
  74. }
  75.  
  76. :root {
  77. if use-custom-rounding {
  78. --tyt-rounding-value: custom-rounding-value;
  79. } else {
  80. --tyt-rounding-value: 12px;
  81. }
  82. }
  83. if split-tabs {
  84. html body ytd-watch-flexy #right-tabs {
  85. .tab-btn:nth-child(n+2)::before {
  86. content: "";
  87. background: var(--yt-spec-10-percent-layer);
  88. position: absolute;
  89. left: 0;
  90. top: 8px;
  91. height: 30px;
  92. width: 1px;
  93. }
  94. }
  95. }
  96. tyt-tabs-hide-config = 0
  97. if hide-tab-info + hide-tab-comments + hide-tab-videos < 3 {
  98.  
  99. tki = 0
  100. if hide-tab-info {
  101. tyt-tabs-hide-config += 1
  102. tki += 1
  103. }
  104. if hide-tab-comments {
  105. tyt-tabs-hide-config += 2
  106. tki += 1
  107. }
  108. if hide-tab-videos {
  109. tyt-tabs-hide-config += 4
  110. tki += 1
  111. }
  112.  
  113. if tki == 2 && no-red-line-for-single-tab {
  114. body ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content].active {
  115. border-bottom-color: transparent;
  116. }
  117. }
  118. }
  119.  
  120. controllerId = unquote('tabviewTabsHideController')
  121. keyFrameForTabviewTabsHideController(controllerId, tyt-tabs-hide-config)
  122.  
  123. #tabview-tabs-hide-controller{
  124. animation: s('%s-%s 0ms linear 0ms 1 normal forwards', controllerId, tyt-tabs-hide-config);
  125. }
  126. tyt-default-tab-config = default-tab - 0;
  127. controllerId = unquote('tabviewDefaultTabController')
  128. keyFrameForTabviewTabsHideController(controllerId, tyt-default-tab-config)
  129.  
  130. #tabview-default-tab-controller{
  131. animation: s('%s-%s 0ms linear 0ms 1 normal forwards', controllerId, tyt-default-tab-config);
  132. }
  133. if move-tabs-to-top-side-when-chat-expanded {
  134.  
  135. ytd-watch-flexy[tyt-chat^="+"] #secondary-inner.style-scope.ytd-watch-flexy {
  136. display:flex;
  137. flex-direction: column;
  138. }
  139.  
  140. ytd-watch-flexy[tyt-chat^="+"] #chat-container, ytd-watch-flexy[tyt-chat^="+"] ytd-live-chat-frame#chat {
  141. order: 99;
  142. }
  143.  
  144. ytd-watch-flexy[is-two-columns_][tyt-chat][tyt-chat^="+"] #secondary-inner.style-scope.ytd-watch-flexy #right-tabs {
  145. --tyt-right-tabs-margin-top: 0;
  146. --tyt-right-tabs-margin-bottom: var(--tyt-right-tabs-margin-size);
  147. }
  148.  
  149. }
  150. }

QingJ © 2025

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