Tabview Youtube Design Customization

Change some designs in Tabview Youtube

目前為 2023-10-10 提交的版本,檢視 最新版本

  1. /* ==UserStyle==
  2. @name Tabview Youtube Design Customization
  3. @version 0.2.1
  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. ==/UserStyle== */
  28.  
  29. keyFrameForTabviewTabsHideController(a, x)
  30. $keyframe-name = s('%s-%s',a, x);
  31. @keyframes {$keyframe-name}
  32. for i in 0..1
  33. {100% * i}
  34. background-position-x (i+1)px
  35.  
  36.  
  37. @-moz-document url-prefix("https://www.youtube.com/watch?v=") {
  38.  
  39. if no-rounded-button {
  40. html .yt-spec-button-shape-next--size-m,
  41. html .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start,
  42. // html .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-button.yt-spec-button-shape-next--segmented-end,
  43. html .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-end {
  44. border-radius: 0;
  45. }
  46. }
  47.  
  48. if no-tab-btn-text {
  49. .tab-btn[tyt-tab-content="#tab-info"] span,
  50. .tab-btn[tyt-tab-content="#tab-videos"] span,
  51. .tab-btn[tyt-tab-content="#tab-playlist"] span {
  52. display: none;
  53. }
  54. }
  55. if round-tab-container {
  56. html body ytd-watch-flexy[class] #right-tabs {
  57. border-radius: var(--tyt-rounding-value);
  58. outline: 1px solid var(--yt-spec-10-percent-layer);
  59. contain: paint;
  60. #material-tabs {
  61. border: 0;
  62. }
  63. .tab-content {
  64. border: 0;
  65. border-top: 1px solid var(--yt-spec-10-percent-layer);
  66. }
  67. }
  68. }
  69. if round-live-chat-frame {
  70. ytd-live-chat-frame#chat.ytd-watch-flexy{
  71. border-radius: var(--tyt-rounding-value);
  72. }
  73. }
  74.  
  75. :root {
  76. if use-custom-rounding {
  77. --tyt-rounding-value: custom-rounding-value;
  78. } else {
  79. --tyt-rounding-value: 12px;
  80. }
  81. }
  82. if split-tabs {
  83. html body ytd-watch-flexy #right-tabs {
  84. .tab-btn:nth-child(n+2)::before {
  85. content: "";
  86. background: var(--yt-spec-10-percent-layer);
  87. position: absolute;
  88. left: 0;
  89. top: 8px;
  90. height: 30px;
  91. width: 1px;
  92. }
  93. }
  94. }
  95. tyt-tabs-hide-config = 0
  96. if hide-tab-info + hide-tab-comments + hide-tab-videos < 3 {
  97.  
  98. tki = 0
  99. if hide-tab-info {
  100. tyt-tabs-hide-config += 1
  101. tki += 1
  102. }
  103. if hide-tab-comments {
  104. tyt-tabs-hide-config += 2
  105. tki += 1
  106. }
  107. if hide-tab-videos {
  108. tyt-tabs-hide-config += 4
  109. tki += 1
  110. }
  111.  
  112. if tki == 2 && no-red-line-for-single-tab {
  113. body ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content].active {
  114. border-bottom-color: transparent;
  115. }
  116. }
  117. }
  118.  
  119. controllerId = unquote('tabviewTabsHideController')
  120. keyFrameForTabviewTabsHideController(controllerId, tyt-tabs-hide-config)
  121.  
  122. #tabview-tabs-hide-controller{
  123. animation: s('%s-%s 0ms linear 0ms 1 normal forwards', controllerId, tyt-tabs-hide-config);
  124. }
  125. tyt-default-tab-config = default-tab - 0;
  126. controllerId = unquote('tabviewDefaultTabController')
  127. keyFrameForTabviewTabsHideController(controllerId, tyt-default-tab-config)
  128.  
  129. #tabview-default-tab-controller{
  130. animation: s('%s-%s 0ms linear 0ms 1 normal forwards', controllerId, tyt-default-tab-config);
  131. }
  132. }

QingJ © 2025

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