☰

YT Theater Chat

YouTube Livestreams Theater Mode擴充的CSS修正

  1. /* ==UserStyle==
  2. @name           YT Theater Chat
  3. @namespace      https://greasyfork.org/zh-TW/users/4839
  4. @homepageURL    https://greasyfork.org/zh-TW/scripts/478850
  5. @version        1.3.1
  6. @description    YouTube Livestreams Theater Mode擴充的CSS修正
  7. @author         Leadra
  8. @license        MIT
  9. @preprocessor   stylus
  10. @var range      text_pr                "聊天行距"        [-2, -10, 10, 1, "px"]
  11. @var checkbox   hide_ctrl         "永久顯示控制列"           1
  12. @var checkbox   search_hide       "隱藏式搜尋"           1
  13. @var number     hide_se           "顯示偵測高度px"       [10, 0, 50, 2, "px"]
  14. @var number     player_top           "影片靠上px"       [-20, -30, 0, 5, "px"]
  15. @var checkbox   related_vi         "隱藏建議影片"           0
  16. @var checkbox	theater_chat	"劇場模式chat邊界"			1
  17. @var checkbox	user_pic		"劇場模式大頭貼顯示"			1
  18. @var checkbox	input_set		"input打字區調整"			0
  19. @var checkbox	hide_user_name	"name隱藏"				0
  20. ==/UserStyle== */
  21. @-moz-document url-prefix("https://www.youtube.com/live_chat"), url-prefix("https://www.youtube.com/watch"), url-prefix("https://www.youtube.com/live/") {
  22.     /* --------------------------------------------------------------- */
  23. /*YouTube Livestreams Theater Mode 邊界調整*/
  24. if theater_chat {
  25. [data-ytlstm-theater-mode] yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer {
  26.         margin: 10px -0px -0px -0px ;
  27. }
  28. /*
  29.  #items {
  30.     padding: 0px 0px 0px -0px !important;
  31.     margin: -0px -0px -0px -0px !important;
  32. }*/
  33. /*聊天行距*/
  34.  #items > * {padding: 0px 0px 0px 10px !important;margin: text_pr -0px text_pr -15px !important;}
  35. yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer .yt-live-chat-text-message-renderer{
  36.         margin: text_pr -0px text_pr -0px ;
  37. }
  38. /*相容tabview後規則失效-使用上面的items全面更改
  39. [data-ytlstm-theater-mode] yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer
  40. #chat #items .yt-live-chat-text-message-renderer {padding: 0px 0px 0px 0px;margin: 0px 0px -0px -0px ;}*/
  41. [data-ytlstm-theater-mode] yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer
  42. #message.yt-live-chat-text-message-renderer {
  43.     padding: 0px 0px 0px 0px;
  44.     margin: 10px 0px -0px -0px ;}
  45.  
  46.     [data-ytlstm-chat-over-video] yt-live-chat-text-message-renderer #content {
  47.     padding: 0px;
  48.     margin: 0px 0px -0px -0px ;
  49.     border-radius: 10px;
  50. }
  51.  /* 大頭貼profile picture */
  52.     //#avatar.yt-live-chat-message-input-renderer,
  53.     //#avatar.yt-live-chat-message-input-renderer > img,
  54.      #author-photo.yt-live-chat-text-message-renderer,
  55.     #author-photo.yt-live-chat-text-message-renderer > img {
  56.         margin: 0px;
  57.         /*強制顯示大頭貼*/
  58.     if user_pic {display: block!important;}
  59.     }
  60. /*chat聊天室框架恢復原設定*/
  61. html:not(:hover)[data-ytlstm-chat-over-video] yt-live-chat-message-input-renderer,
  62. [data-ytlstm-chat-over-video] yt-live-chat-banner-manager,
  63. [data-ytlstm-chat-over-video] yt-live-chat-restricted-participation-renderer,   
  64. html:not(:hover)[data-ytlstm-chat-over-video] #contents #ticker,
  65. html:not(:hover)[data-ytlstm-chat-over-video] #contents #separator ,
  66. html:hover[data-ytlstm-chat-over-video] #contents #ticker,
  67. html:hover[data-ytlstm-chat-over-video] #contents #separator ,
  68. html:hover[data-ytlstm-chat-over-video] yt-live-chat-message-input-renderer,
  69. //html:hover[data-ytlstm-chat-over-video] yt-live-chat-header-renderer,
  70. //html:not(:hover)[data-ytlstm-chat-over-video] yt-live-chat-header-renderer,
  71. {
  72.     display: block!important;
  73.     margin:  -0px;
  74. }
  75. html:hover[data-ytlstm-chat-over-video] yt-live-chat-header-renderer{display: block;}//position: absolute;z-index:1;
  76. html:not(:hover)[data-ytlstm-chat-over-video] yt-live-chat-header-renderer{display: none;}
  77. html:not(:hover)[data-ytlstm-chat-over-video] yt-live-chat-ticker-renderer{display: none!important;}
  78. html:hover[data-ytlstm-chat-over-video] yt-live-chat-ticker-renderer{display: block!important;}
  79.  
  80. /*chatheader聊天頂部欄位調整*/
  81. yt-live-chat-header-renderer {
  82.     margin:-0px 0px -0px 0px!important;
  83.     padding: unset;
  84. }
  85.     yt-dropdown-menu.yt-sort-filter-sub-menu-renderer {
  86. margin: 0px 0px 0px 0px;
  87.     }
  88. }
  89.  
  90. if input_set{
  91. /*input頭像*/
  92.     //#avatar.yt-live-chat-message-input-renderer {margin:0px 0px -0px 0px !important;visibility:hidden!important;display:block;}
  93. /* input打字輸入區 */
  94.     yt-live-chat-message-input-renderer {
  95.         padding: 0px 0px 0px 0px!important;
  96.         margin:0px 0px 0px -0px!important;
  97.         //overflow: unset;//隱藏元素不消除佔位
  98.     }
  99.     /*input總區塊*/
  100. #input-panel.yt-live-chat-renderer.iron-selected {
  101.             background-color:rgba(0, 0, 0,0.1);
  102.     }
  103.     }
  104.  
  105.     /*name隱藏*/
  106.     if hide_user_name {
  107.         yt-live-chat-text-message-renderer > #content > yt-live-chat-author-chip > #author-name {
  108.             display: none;
  109.         }
  110.     }
  111.     
  112. }
  113. @-moz-document url-prefix("https://www.youtube.com/watch"), url-prefix("https://www.youtube.com/live/") {
  114.  
  115. 	/*永久顯示控制列*/
  116. if hide_ctrl{
  117. 	[data-ytlstm-theater-mode]{
  118. .ytp-chrome-bottom {opacity:1 !important;}}
  119. //.ytp-chrome-bottom:hover  {opacity:1;background:rgba(0, 0, 0, .4) !important;}
  120.         }
  121. 		[data-ytlstm-theater-mode]{
  122. 		ytd-watch-flexy[flexy] #player-container.ytd-watch-flexy{
  123. 			top:player_top;
  124. 		}}
  125. 	/*隱藏式搜尋*/
  126. if search_hide{
  127. 		
  128. 	:root {
  129. 	[data-ytlstm-theater-mode]{
  130.   --ytd-toolbar-height: 0px;
  131. 		--ytd-masthead-height: 0px;
  132. 	}
  133. 	}
  134. #masthead-container #masthead{
  135. 	opacity:0;
  136. 	width:100% !important;
  137. 	hide_se = hide_se - 56px;
  138. 	margin-top:hide_se !important;
  139. 	padding:0px!important;
  140. 	//display:none!important;
  141. 	}
  142. #masthead-container:not([data-open=true]) #masthead:hover{
  143. 	opacity:1;
  144.   	margin-top:-0px!important;
  145. 	background:#000
  146. 	}
  147.  #related{display:none;if related_vi}
  148. }
  149.  
  150. }