YouTube Live Borderless

Make YouTube Live Borderless

当前为 2024-01-22 提交的版本,查看 最新版本

  1. /* ==UserStyle==
  2. @name YouTube Live Borderless
  3. @version 0.5.26
  4. @namespace github.com/cyfung1031
  5. @license MIT
  6. @description Make YouTube Live Borderless
  7. @author CY Fung
  8. @supportURL https://github.com/cyfung1031/YouTube-Live-Borderless/
  9. @compatible edge Edge [Blink] >= 105; Stylus (Beta)
  10. @compatible chrome Chrome >= 105; Stylus (Beta); Chrome 101-104 requires "enable-experimental-web-platform-features"
  11. @compatible firefox FireFox >= 103; Stylus; layout.css.has-selector.enabled = true; note: some features might not be very stable!!
  12. @compatible opera Opera >= 91; Stylus (Beta)
  13. @compatible safari Safari >= 15.4; Stylus
  14. @preprocessor stylus
  15. @var checkbox youtube-wpr "YouTube WPR" 0
  16. @var select mode-for-two-col "Mode ##TwoColumns" {
  17. "Expanded Panel Only #Recommended": "expanded-panel",
  18. "Expanded Live Chat Only": "expanded-live",
  19. "Expandable Live Chat Only": "expandable-live",
  20. "Always": "always"
  21. }
  22. @var select mode-for-single-col "Mode ##SingleColumn" {
  23. "YT Mobile #Recommended": "mobile",
  24. "Normal": "normal",
  25. "Disabled": "disabled"
  26. }
  27. @var checkbox no-masthead "Top.MastheadBar ::Hide" 0
  28. @var range masthead-hoverable-height "Top.MastheadBar ::Hoverable" [12, 0, 36, 2, 'px']
  29. @var range masthead-hoverable-delay-in "Top.MastheadBar ::Hoverable.DelayIn" [300, 0, 800, 100, 'ms']
  30. @var checkbox disable-cinematics "CinematicsEffect ::Disable" 0
  31. @var range video-enlarging "Video.Enlarging >>>Video.Border.Fine.Tune" [0, 0, 8, 2]
  32. @var range video-padding-left-right "Video.Padding.LeftRight (Experimental)" [0, 0, 18, 2, 'px']
  33. @var range video-padding-top-bottom "Video.Padding.TopBottom (Experimental)" [0, 0, 18, 2, 'px']
  34. @var range primary-content-margin "PrimaryContent ::Margin" [24, 6, 48, 6, "px"]
  35. @var range video-title-size "VideoTitle ::Size" [2.0, 1.0, 3.0, 0.2, "rem"]
  36. @var checkbox no-bottom-row "Bottom.PrimaryMetaInfoRow ::Hide" 0
  37. @var range min-below-area "BelowArea ::Minimum" [120, 0, 240, 10, 'px']
  38. @var range min-below-area-for-theater "WideTheater.BelowArea ::Minimum" [120, 0, 240, 10, 'px']
  39. @var number side-panel-width "SidePanel ::Width" [440, 320, 640, 20, "px"]
  40. @var checkbox no-round-border "RoundBorder ::Disable" 1
  41. @var number chat-zoom-for-right-col "RightCol.Chat ::Zoom" [1.0, 0.4, 1.2, 0.05]
  42. @var range chat-btn-height "RightCol.Chat ::SpaceAbove@Zoom" [36, 0, 60, 4, 'px']
  43. @var number chat-zoom-for-mobile "YTMobile.Chat ::Zoom" [1.0, 0.4, 1.2, 0.05]
  44. @var range chat-min-height "YTMobile.Chat ::Min.Height" [400, 20, 900, 10, 'px']
  45. @var checkbox unlimit-player-max-width "Unlimit Player Max Width" 0
  46. @var checkbox fix-player-height-overflow "Fix Player Height Overflow" 1
  47. @var checkbox video-no-round-angle "Video No Round Angle" 0
  48. @var checkbox compatible-ytlstm "Compatible with ytlstm-theater-mode" 0
  49. @var checkbox fix-for-ytlc "Fix for YouTubeLiveClock" 0
  50. ==/UserStyle== */
  51. /*
  52.  
  53. @var range chrome-bottom-bar-margin "Chrome Bottom Bar Margin" [12, 6, 48, 6, "px"]
  54.  
  55. Chrome Bottom Bar Margin is 12px only due to
  56.  
  57. MU = function(a) {
  58. var b = a.u.ag()
  59. , c = a.G.getVideoData().D
  60. , d = 0;
  61. a.u.ag() && a.u.Me() && (d = (a.G.fb().getPlayerSize().width - a.G.getVideoContentRect().width) / 2);
  62. return 12 * (c ? 0 : b ? 2 : 1) + d
  63. }
  64.  
  65. */
  66. // d
  67. @-moz-document url-prefix("https://www.youtube.com/watch?v=") {
  68.  
  69. dummy() {
  70. // dummy
  71. border: 0;
  72. }
  73.  
  74. buildL4(type, args...) {
  75. st1 = join('', ':', type, '(', join('\, ', args), ')')
  76. selector(st1)
  77. }
  78.  
  79. /*
  80. if min-below-area <= 10px {
  81. min-below-area = 0px
  82. }
  83. if min-below-area-for-theater <= 10px {
  84. min-below-area-for-theater = 0px
  85. }
  86. */
  87. chat-btn-height = chat-btn-height + 1px
  88. if chat-btn-height == 0px + 1px {
  89. chat-btn-height = 0px
  90. }
  91.  
  92. // masthead-hoverable-height = (masthead-hoverable-h - 1) * 2px
  93.  
  94. no-masthead-w = no-masthead //
  95. chrome-bottom-bar-margin = 12px // this cannot be changed
  96.  
  97. single-col-mobile = (mode-for-single-col == "mobile" ? 1 : 0) //
  98. if single-col-mobile == 1 and no-masthead-w == 0 {
  99. no-masthead-w = 2 //
  100. }
  101.  
  102. chat-zoom-for-mobile-enable = ((chat-zoom-for-mobile < 1) or (chat-zoom-for-mobile > 1))
  103.  
  104. contentBase() {
  105. html {
  106. --ylb-min-below-area: min-below-area;
  107. }
  108. #microformat.ytd-watch-flexy {
  109. position: fixed;
  110. top:-200vh;
  111. left:-200vw;
  112. }
  113.  
  114. if fix-player-height-overflow { // 縦配信
  115. html:not([tabview-loaded]) #player > #player-container-outer.style-scope.ytd-watch-flexy {
  116. contain: layout;
  117. }
  118. }
  119.  
  120. if fix-for-ytlc {
  121.  
  122. @supports (color: var(--compatibile-with-chrome-plugin-youtube-live-clock-20221107)) and (selector(:has(style#id))) {
  123.  
  124. /* 2022/11/07 - specific fix for YouTubeLiveClock - chrome only */
  125. html:has(style#ytlctn-style-for-native-control) #columns.ytd-watch-flexy #player::after {
  126. content: "";
  127. background-color: transparent;
  128. border-color: transparent;
  129. color: transparent;
  130. box-sizing: border-box;
  131. border-style: dotted;
  132. display: flex;
  133. height: 0px;
  134. margin: 0;
  135. border: 0;
  136. margin-top: 51px;
  137. width: calc(100% - 4px);
  138. position: relative;
  139. pointer-events: none;
  140. }
  141.  
  142. html:has(style#ytlctn-style-for-native-control) #columns.ytd-watch-flexy #below {
  143. transform: initial;
  144. }
  145.  
  146. html:has(style#ytlctn-style-for-native-control) ytd-watch-flexy[flexy][is-two-columns_][theater] #columns.ytd-watch-flexy {
  147. margin-top: 51px;
  148. }
  149. html:has(style#ytlctn-style-for-native-control) #columns {
  150. overflow: revert;
  151. }
  152. }
  153.  
  154. @supports (color: var(--compatibile-with-chrome-plugin-youtube-live-clock-20240123)) and (selector(:has(style#id))) {
  155.  
  156. /* 2024/01/23 - specific fix for YouTubeLiveClock - chrome only */
  157. html:has(style#ytlc-style-for-native-control) #columns.ytd-watch-flexy #player::after {
  158. content: "";
  159. background-color: transparent;
  160. border-color: transparent;
  161. color: transparent;
  162. box-sizing: border-box;
  163. border-style: dotted;
  164. display: flex;
  165. height: 0px;
  166. margin: 0;
  167. border: 0;
  168. margin-top: 51px;
  169. width: calc(100% - 4px);
  170. position: relative;
  171. pointer-events: none;
  172. }
  173.  
  174. html:has(style#ytlc-style-for-native-control) #columns.ytd-watch-flexy #below {
  175. transform: initial;
  176. }
  177.  
  178. html:has(style#ytlc-style-for-native-control) ytd-watch-flexy[flexy][is-two-columns_][theater] #columns.ytd-watch-flexy {
  179. margin-top: 51px;
  180. }
  181. html:has(style#ytlc-style-for-native-control) #columns {
  182. overflow: revert;
  183. }
  184. }
  185.  
  186.  
  187.  
  188. }
  189.  
  190. ytd-watch-flexy[flexy] #player-container-outer.ytd-watch-flexy,
  191. ytd-watch-flexy[flexy] #player-container-inner.ytd-watch-flexy {
  192. pointer-events: none;
  193. }
  194.  
  195. ytd-watch-flexy[flexy] #player-container.ytd-watch-flexy,
  196. ytd-watch-flexy[flexy] #ytd-player.ytd-watch-flexy {
  197. pointer-events: initial;
  198. }
  199.  
  200. // general fix
  201. ytd-watch-flexy[theater] .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} {
  202. min-height: unset;
  203. }
  204. #movie_player .ytp-cued-thumbnail-overlay-image {
  205. /* background-size: contain !important; */
  206. background-size: auto 100% !important;
  207. }
  208. ytd-watch-flexy:not([is-two-columns_]) ytd-watch-metadata {
  209. padding-top: var(--ytd-margin-3x);
  210. }
  211. ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]) #primary.ytd-watch-flexy {
  212. padding-top: 0;
  213. margin-top: 0;
  214. }
  215.  
  216. m = youtube-wpr ? ':not([tabview-loaded])[youtube-wpr*="h2"]': ":not([tabview-loaded]):has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe)"
  217.  
  218. html{selector(m)} {buildL4('is',
  219. '#primary-inner.ytd-watch-flexy ytd-comments#comments.ytd-watch-flexy',
  220. '#secondary-inner.ytd-watch-flexy > #related.ytd-watch-flexy')} {
  221. display: none !important;
  222. }
  223.  
  224.  
  225. html:not([tabview-loaded]) #cinematics {
  226. // contain: layout;
  227. contain: layout size style;
  228. user-select: none;
  229. touch-action: none;
  230. pointer-events: none;
  231. }
  232.  
  233. if video-no-round-angle {
  234. ytd-watch-flexy[rounded-player-large][default-layout] #ytd-player.ytd-watch-flexy.ytd-watch-flexy {
  235. border-radius: 0;
  236. }
  237. }
  238.  
  239. }
  240.  
  241. //
  242. contentNoMasthead() {
  243.  
  244. // root = html
  245. & {
  246. /* 0px not 0 */
  247. --ytd-masthead-height: 0px;
  248. --ytd-toolbar-height: 0px;
  249. --ytd-watch-flexy-masthead-height: 0px;
  250. }
  251. ytd-app[style] { /* YouTube set the masthead-height in style */
  252. --ytd-masthead-height: 0px !important;
  253. --ytd-toolbar-height: 0px !important;
  254. --ytd-watch-flexy-masthead-height: 0px !important;
  255. }
  256. & .style-scope{buildL4('is', '#page-manager', 'ytd-watch-flexy', 'ytd-page-manager')} {
  257. --ytd-masthead-height: 0px;
  258. --ytd-toolbar-height: 0px;
  259. --ytd-watch-flexy-masthead-height: 0px;
  260. }
  261.  
  262. #masthead-container {
  263. height: 0;
  264. --masthead-opacity: 0;
  265. opacity: var(--masthead-opacity) !important;
  266. transition: opacity 300ms;
  267. min-height: masthead-hoverable-height;
  268. contain: layout size style;
  269. }
  270.  
  271. #masthead-container > ytd-masthead {
  272. transform: translateY(-100%);
  273. transition: transform 300ms;
  274. }
  275.  
  276.  
  277. if masthead-hoverable-height > 0 {
  278.  
  279. ytd-app {
  280. --ut-masthead-background: rgba(15,15,15,0.8);
  281. }
  282. ytd-app[darker-dark-theme] {
  283. --ut-masthead-background: rgba(240,240,240,0.8);
  284. }
  285. ytd-masthead#masthead:hover {
  286. background-color: color(--ut-masthead-background);
  287. z-index: 9999 !important;
  288. }
  289.  
  290. ytd-masthead#masthead {
  291. background-color: rgba(15,15,15,0.8);
  292. z-index: 9999 !important;
  293. }
  294.  
  295. #masthead-container:hover {
  296. --masthead-opacity: 1;
  297. }
  298.  
  299. #masthead-container:hover > ytd-masthead {
  300. transform: translateY(0%);
  301. transition-delay: masthead-hoverable-delay-in;
  302. }
  303.  
  304. #masthead-container::after {
  305. content: '';
  306. display: flex;
  307. width: 100%;
  308. height: masthead-hoverable-height;
  309. top: 0;
  310. z-index: 77;
  311. cursor: default;
  312. user-select: none !important;
  313. touch-action: none !important;
  314. box-sizing: border-box;
  315. padding: 0;
  316. margin: 0;
  317. }
  318. }
  319.  
  320. ytd-watch-flexy.style-scope[is-two-columns_]:not([fullscreen]):not([theater]) {
  321.  
  322. #columns.style-scope.ytd-watch-flexy,
  323. #primary.style-scope.ytd-watch-flexy,
  324. #primary-inner.style-scope.ytd-watch-flexy,
  325. #secondary.style-scope.ytd-watch-flexy,
  326. #secondary-inner.style-scope.ytd-watch-flexy {
  327. height: 100vh;
  328. max-height: 100%;
  329. }
  330. }
  331.  
  332. ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) {
  333.  
  334. height: 100vh;
  335. .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} {
  336. flex: 77;
  337. max-height: unset;
  338. }
  339.  
  340.  
  341. }
  342.  
  343.  
  344.  
  345. &:not([tabview-loaded]) ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) {
  346.  
  347. .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} ~ #columns.style-scope.ytd-watch-flexy {
  348. overflow: visible;
  349. }
  350. }
  351.  
  352.  
  353. } //
  354. contentSingleColMobile() {
  355.  
  356. // html:has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]))
  357.  
  358. if no-masthead-w>=1 {
  359.  
  360.  
  361. if youtube-wpr {
  362.  
  363.  
  364. &[youtube-wpr*="h2"] ytd-watch-flexy:not([theater]):not([fullscreen]):not([no-top-margin]):not([reduced-top-margin]) .ytd-watch-flexy{buildL4('is', '#primary', '#secondary')} {
  365. padding-top: 0px;
  366. }
  367. &[youtube-wpr*="h2"] ytd-watch-flexy[tyt-tab^="#tab-"]:not([is-two-columns_]) #primary-inner.ytd-watch-flexy {
  368. padding-bottom: 0px;
  369. }
  370.  
  371.  
  372. } else {
  373.  
  374.  
  375. &:has(#chat:not([collapsed])) ytd-watch-flexy:not([theater]):not([fullscreen]):not([no-top-margin]):not([reduced-top-margin]) .ytd-watch-flexy{buildL4('is', '#primary', '#secondary')} {
  376. padding-top: 0px;
  377. }
  378. &:has(#chat:not([collapsed])) ytd-watch-flexy[tyt-tab^="#tab-"]:not([is-two-columns_]) #primary-inner.ytd-watch-flexy {
  379. padding-bottom: 0px;
  380. }
  381.  
  382. }
  383.  
  384. }
  385.  
  386. #chat:not([collapsed]) {
  387. --ytd-margin-2x: 0;
  388. --ytd-margin-4x: 0;
  389. --ytd-margin-6x: 0;
  390. --ytd-margin-8x: 0;
  391.  
  392. height: 100% !important;
  393. min-height: unset !important;
  394. max-height: 100vh !important;
  395.  
  396. // position:relative;
  397. // top:auto;
  398. // bottom:0;
  399.  
  400. iframe#chatframe{
  401.  
  402. min-height: 0px;
  403.  
  404. }
  405.  
  406.  
  407.  
  408. if chat-zoom-for-mobile-enable {
  409.  
  410.  
  411. iframe-transform = 'scale(%s)' % chat-zoom-for-mobile
  412. iframe-ratio = 100% / chat-zoom-for-mobile
  413.  
  414. iframe#chatframe {
  415. position:absolute;
  416.  
  417. transform: iframe-transform;
  418. height: s('calc((100% - %s) / %s) !important', chat-btn-height, chat-zoom-for-mobile);
  419. max-height: unset !important;
  420. min-height: unset !important;
  421. transform-origin: 0 0;
  422. width: iframe-ratio !important;
  423. margin-top: chat-btn-height;
  424.  
  425.  
  426. }
  427.  
  428.  
  429. }
  430.  
  431.  
  432. }
  433.  
  434.  
  435. m = youtube-wpr ? '[youtube-wpr*="h2"]': ":has(#chat:not([collapsed]))"
  436.  
  437. &{selector(m)} {
  438. // html:has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen])):has(#chat:not([collapsed]))
  439.  
  440. --ylb-min-below-area: chat-min-height;
  441.  
  442. #contentContainer.tp-yt-app-drawer[swipe-open].tp-yt-app-drawer::after {
  443.  
  444. content: unset;
  445.  
  446. }
  447.  
  448. #primary-inner.ytd-watch-flexy ytd-comments#comments.ytd-watch-flexy,
  449. #below.ytd-watch-flexy > .ytd-watch-flexy{buildL4('is', '#related', 'ytd-watch-metadata')} {
  450. /* display:none !important; */
  451. position: fixed !important;
  452. transform: scale(0.01) !important;
  453. transform-origin: 0 0 !important;
  454. left: -100vw !important;
  455. top: -100vh !important;
  456. visibility: collaspe !important;
  457. pointer-events: none !important;
  458. user-select: none !important;
  459. touch-action: none !important;
  460. }
  461.  
  462. #secondary.ytd-watch-flexy {
  463. display:none !important;
  464. }
  465.  
  466.  
  467. .efyt-control-bar {
  468. position: relative;
  469. display: inline-flex;
  470. top: auto;
  471. left: auto;
  472. z-index: 99999;
  473. opacity: 0.8;
  474. transform: translate(calc(-100% + 32px), 0) !important;
  475. }
  476.  
  477. .efyt-control-bar:hover {
  478. opacity: 1.0;
  479. background: var(--yt-spec-general-background-a);
  480. transform: translate(0px, 0) !important;
  481. }
  482.  
  483. #player {
  484. margin-bottom: 0;
  485. }
  486.  
  487. {buildL4('is', '#columns', '#primary')} {
  488. padding: 0;
  489. }
  490.  
  491. {buildL4('is', '#player', '#player-theater-container', '#player-container-outer', '#player-container-inner', '#player-container', '#movie_player', '#movie_player video')} {
  492. object-fit: contain;
  493. max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;
  494.  
  495. }
  496.  
  497. #primary-inner.ytd-watch-flexy > :not(.style-scope) {
  498. display: none !important;
  499. }
  500.  
  501. #below {
  502. display: flex;
  503. flex-direction: column;
  504. flex: 1;
  505. }
  506. #below > *:not([id|="chat"]) {
  507. position: fixed !important;
  508. transform: scale(0.01) !important;
  509. transform-origin: 0 0 !important;
  510. left: -100vw !important;
  511. top: -100vh !important;
  512. visibility: collaspe !important;
  513. pointer-events: none !important;
  514. user-select: none !important;
  515. touch-action: none !important;
  516. }
  517. #below ~ [id|="chat"],
  518. #primary-inner.ytd-watch-flexy ~ [id|="chat"],
  519. #primary.ytd-watch-flexy ~ [id|="chat"] {
  520. flex: 1;
  521. }
  522.  
  523. #below:not(:has(#chat)) {
  524. display: none;
  525. }
  526.  
  527. {buildL4('is', 'ytd-watch-flexy', '#columns.ytd-watch-flexy', '#primary.ytd-watch-flexy', '#primary-inner.ytd-watch-flexy')} {
  528. display: flex;
  529. flex-direction: column;
  530. margin: 0;
  531. flex: 1;
  532. }
  533.  
  534. ytd-watch-flexy {
  535. height: 100vh !important;
  536. max-height: 100vh !important;
  537. }
  538.  
  539. ytd-watch-flexy{buildL4('is', '[theater]', '[fullscreen]')} .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} {
  540.  
  541. min-height: unset !important;
  542. }
  543. }
  544. }
  545. content2cHTML() {
  546. // html
  547. body.lock-scrollbar {
  548. overflow-y: auto;
  549. }
  550. }
  551.  
  552. content2cMAIN() {
  553. // body or html
  554. if chat-zoom-for-right-col >1 or chat-zoom-for-right-col < 1 {
  555.  
  556. ytd-watch-flexy[is-two-columns_]:not([fullscreen]) iframe#chatframe {
  557.  
  558. position:absolute;
  559. margin-top:chat-btn-height;
  560.  
  561. transform: 'scale(%s)' % chat-zoom-for-right-col;
  562. transform-origin: 0 0;
  563. width: '%s !important' % (100% / chat-zoom-for-right-col);
  564. max-width: unset !important;
  565. height: s('calc( (100% - %s) / %s ) !important', chat-btn-height, chat-zoom-for-right-col);
  566. z-index: 1; /* for normal youtube */
  567.  
  568. }
  569.  
  570. }
  571.  
  572.  
  573. if no-masthead-w==0 {
  574.  
  575. ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) {
  576.  
  577. .style-scope.ytd-watch-flexy{buildL4('is', '#secondary', '#secondary-inner')} {
  578. height: calc(100vh - var(--ytd-toolbar-height));
  579. max-height: 100%;
  580. }
  581. }
  582. }
  583.  
  584.  
  585. ytd-watch-flexy[is-two-columns_]:not([fullscreen]) #movie_player {
  586.  
  587. .ytp-chrome-bottom[style*="width"] {
  588. width: unset !important;
  589. left: chrome-bottom-bar-margin !important;
  590. right: chrome-bottom-bar-margin !important;
  591. }
  592.  
  593. }
  594.  
  595.  
  596. ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) ytd-live-chat-frame#chat:not([collapsed]) {
  597. min-height: unset;
  598. }
  599.  
  600.  
  601.  
  602. ytd-watch-flexy.style-scope[is-two-columns_]:not([fullscreen]) #primary-inner.ytd-watch-flexy > *:not(#player) {
  603. padding: 0 primary-content-margin 0;
  604. }
  605.  
  606.  
  607. ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) #player .ytd-watch-flexy{buildL4('is', '#player-container-outer', '#player-container-inner', '#player-container')}{
  608.  
  609. // layout outside
  610. // no effect
  611. // layout inside
  612. max-height: calc(100vh - var(--ytd-toolbar-height, 0px) - var(--ylb-min-below-area, 0px)); // for very wide screen
  613. }
  614.  
  615. ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} {
  616. max-height: calc(100vh - var(--ytd-toolbar-height, 0px) - var(--ylb-min-below-area, 0px)); // for 4:3 video
  617.  
  618. }
  619.  
  620. ytd-watch-flexy.style-scope[is-two-columns_] #columns.ytd-watch-flexy > #secondary.ytd-watch-flexy {
  621. width: side-panel-width;
  622. }
  623. }
  624. contentfHTML(){
  625. // html
  626.  
  627. body ytd-watch-flexy[flexy] #player-container-outer.ytd-watch-flexy {
  628. max-width: unset; // override var(--ytd-watch-flexy-max-player-width);
  629. }
  630.  
  631. &:not([tabview-loaded]) {
  632.  
  633. body ytd-watch-flexy[flexy][is-two-columns_]{buildL4('is', '[is-extra-wide-video_]', '[is-four-three-to-sixteen-nine-video_]')} #primary.ytd-watch-flexy {
  634.  
  635. max-width: unset; // override var(--ytd-watch-flexy-max-player-width);
  636.  
  637. }
  638. }
  639. chat-selector = youtube-wpr ? '[youtube-wpr*="h2"]': ":has(#chat:not([collapsed]))"
  640.  
  641. &{selector(chat-selector)} {
  642. ytd-watch-flexy.style-scope:not([fullscreen]) {
  643. .style-scope{buildL4('is', '#chat', '#chat-container')}{
  644. flex: 77;
  645. }
  646. }
  647. }
  648. }
  649.  
  650. contentfMAIN() {
  651. // body or html
  652.  
  653. if (video-padding-left-right + video-padding-top-bottom) > 0 {
  654.  
  655. #player-container-outer.ytd-watch-flexy {
  656. padding-left: video-padding-left-right;
  657. padding-right: video-padding-left-right;
  658. padding-top: video-padding-top-bottom;
  659. padding-bottom: video-padding-top-bottom;
  660. }
  661.  
  662. }
  663.  
  664.  
  665. &:not([tabview-loaded]) {
  666.  
  667. ytd-watch-flexy:not([fullscreen]) .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} {
  668. max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;
  669. }
  670.  
  671.  
  672. ytd-watch-flexy[is-two-columns_]:not([theater]):not([fullscreen]) {buildL4('is', '#columns', '#primary', '#primary-inner', '#secondary', '#secondary-inner')} {
  673. height: calc(100vh - var(--ytd-toolbar-height));
  674. }
  675.  
  676. }
  677.  
  678. if video-enlarging > 0 {
  679.  
  680. ytd-watch-flexy:not([theater]):not([fullscreen]) #movie_player video[src] {
  681. transform: 'scale(%s)' % (video-enlarging / 1000 + 1) ;
  682. transform-origin: 50% 50%;
  683. }
  684.  
  685. }
  686.  
  687.  
  688.  
  689.  
  690.  
  691.  
  692.  
  693. ytd-watch-flexy[flexy][is-two-columns_][theater]:not([fullscreen]) {
  694.  
  695. --ylb-min-below-area: min-below-area-for-theater;
  696.  
  697. {buildL4('is', '#player', '#player-theater-container', '#player-wide-container', '#player-container-outer', '#player-container-inner', '#player-container', '#movie_player', '#movie_player video')} {
  698. object-fit: contain;
  699. max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;
  700. }
  701. }
  702.  
  703.  
  704.  
  705. if no-bottom-row {
  706.  
  707. #bottom-row.ytd-watch-metadata {
  708. display: none !important;
  709. }
  710. }
  711.  
  712. h1.ytd-watch-metadata {
  713. font-size: video-title-size;
  714. --font-size: video-title-size;
  715. line-height: 140%;
  716. margin-bottom: -2px;
  717. }
  718.  
  719. chat-selector = youtube-wpr ? '[youtube-wpr*="h2"]': ":has(#chat:not([collapsed]))"
  720.  
  721.  
  722. ytd-watch-flexy.style-scope:not([fullscreen]) {
  723.  
  724. & {
  725. --ytd-margin-2y: var(--ytd-margin-2x);
  726. --ytd-margin-4y: var(--ytd-margin-4x);
  727. --ytd-margin-6y: var(--ytd-margin-6x);
  728. --ytd-margin-8y: var(--ytd-margin-8x);
  729. }
  730.  
  731. #columns.style-scope.ytd-watch-flexy {
  732. --ytd-margin-2x: 0;
  733. --ytd-margin-4x: 0;
  734. --ytd-margin-6x: 0;
  735. --ytd-margin-8x: 0;
  736. }
  737.  
  738. .style-scope.ytd-watch-flexy > :not(.ytd-watch-flexy),
  739. #below,
  740. #player {
  741. --ytd-margin-2x: var(--ytd-margin-2y);
  742. --ytd-margin-4x: var(--ytd-margin-4y);
  743. --ytd-margin-6x: var(--ytd-margin-6y);
  744. --ytd-margin-8x: var(--ytd-margin-8y);
  745. }
  746. if unlimit-player-max-width {
  747. html body ytd-watch-flexy.style-scope[class][flexy]:not([attr1][attr2]) #columns.ytd-watch-flexy.style-scope[class] {
  748. max-width: initial;
  749. }
  750. #columns {
  751. --ytd-watch-flexy-max-player-width: initial;
  752. }
  753. }
  754.  
  755. #secondary-inner.style-scope.ytd-watch-flexy {
  756. display: flex;
  757. flex-direction: column;
  758. height: 100%;
  759. }
  760.  
  761. #secondary-inner.style-scope.ytd-watch-flexy > * {
  762. flex-shrink: 0;
  763. }
  764.  
  765. #movie_player {
  766. position: relative;
  767. > .html5-video-container:has(video) {
  768. top: 0;
  769. bottom: 0;
  770. left: 0;
  771. right: 0;
  772. position: absolute;
  773. }
  774.  
  775. .html5-video-container > video {
  776. width: unset !important;
  777. height: 100% !important;
  778. left: 0 !important;
  779. right: 0 !important;
  780. max-height: 100%;
  781. max-width: 100%;
  782. margin: 0 auto;
  783. }
  784.  
  785. .html5-video-container > video[style*="top:"]:not(video[style*="top: -"]):not(video[style*="top:-"]) {
  786. top: 0 !important;
  787. }
  788.  
  789. }
  790.  
  791. #chat-container {
  792. display: flex;
  793. flex-direction: column;
  794. }
  795.  
  796. #right-tabs {
  797. display: flex;
  798. margin: 0 !important;
  799. flex: 1;
  800. flex-direction: column;
  801.  
  802. {buildL4('is', '#material-tabs', '.tab-content')} {
  803. outline: 0;
  804. }
  805.  
  806. .tab-content {
  807. flex: 77;
  808. }
  809. }
  810.  
  811. &:not([is-two-columns_]) #primary-inner > *:not(#player) {
  812. padding: 0;
  813. }
  814.  
  815. &:not([is-two-columns_]) #primary-inner #below > *:not([id|="chat"]) {
  816. padding: 0 primary-content-margin 0;
  817. }
  818.  
  819. }
  820.  
  821. if no-round-border {
  822.  
  823. ytd-live-chat-frame[rounded-container],
  824. ytd-live-chat-frame[rounded-container] #show-hide-button.ytd-live-chat-frame ytd-toggle-button-renderer.ytd-live-chat-frame,
  825. ytd-live-chat-frame[rounded-container] iframe.ytd-live-chat-frame,
  826. ytd-live-chat-frame[rounded-container] #show-hide-button.ytd-live-chat-frame ytd-toggle-button-renderer.ytd-live-chat-frame button.yt-spec-button-shape-next,
  827. ytd-live-chat-frame[rounded-container] #show-hide-button.ytd-live-chat-frame ytd-toggle-button-renderer.ytd-live-chat-frame button.yt-spec-button-shape-next:hover {
  828. border-radius: unset;
  829. }
  830. }
  831.  
  832.  
  833. if disable-cinematics {
  834. #cinematics.ytd-watch-flexy {
  835. display: none;
  836. }
  837. }
  838. } //
  839. contentgHTML() {
  840. // html
  841.  
  842. content2cHTML() //
  843. selector-g = '' //
  844. if mode-for-single-col=="disabled" { //
  845. selector-g = youtube-wpr ? '[youtube-wpr*="s"]': ":has(ytd-watch-flexy[is-two-columns_])" //
  846. } //
  847. &{s(selector-g)} { //
  848. // html
  849. contentfHTML() //
  850. } //
  851. }
  852. contentgMAIN() {
  853. // body or html
  854.  
  855. content2cMAIN() //
  856. selector-g = '' //
  857. if mode-for-single-col=="disabled" { //
  858. selector-g = youtube-wpr ? '[youtube-wpr*="s"]': ":has(ytd-watch-flexy[is-two-columns_])" //
  859. } //
  860. &{s(selector-g)} { //
  861. // html
  862. contentfMAIN() //
  863. } //
  864. }
  865. contentBase() //
  866. selectors-2col = { //
  867. "expanded-panel": join(', ',
  868. "html:not([tabview-loaded]):has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe)",
  869. "html[tabview-loaded]:has(ytd-watch-flexy[is-two-columns_]:not([fullscreen]))"
  870. ),
  871. "expanded-live": "html:has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe)",
  872. "expandable-live": "html:has(ytd-live-chat-frame#chat):has(iframe#chatframe)",
  873. "always": "html"
  874. } //
  875. if youtube-wpr {
  876. selectors-2col = { //
  877. "expanded-panel": join(', ',
  878. 'html:not([tabview-loaded])[youtube-wpr*="h2"][youtube-wpr*="f"]',
  879. 'html[tabview-loaded][youtube-wpr*="s"][youtube-wpr*="f"]'
  880. ),
  881. "expanded-live": 'html[youtube-wpr*="h2"][youtube-wpr*="f"]',
  882. "expandable-live": 'html:not([youtube-wpr*="h0"])[youtube-wpr*="f"]',
  883. "always": 'html[youtube-wpr*="f"]'
  884. } //
  885. }
  886. selector-2col = selectors-2col[mode-for-two-col]
  887. selectors-k = split(', ', selector-2col)
  888. for selector-k in selectors-k {
  889. {s(selector-k)} {
  890. if no-masthead-w==1 {
  891. contentNoMasthead()
  892. }
  893. if compatible-ytlstm {
  894. contentgHTML()
  895. body:not([data-ytlstm-theater-mode]) {
  896. contentgMAIN() //
  897. }
  898. } else {
  899. contentgHTML()
  900. contentgMAIN() //
  901. }
  902. }
  903. }
  904.  
  905. if single-col-mobile {
  906. m = youtube-wpr ? '[youtube-wpr*="S"][youtube-wpr*="f"]': ":has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]))"
  907. html{selector(m)} {
  908.  
  909. if no-masthead-w==1 {
  910. contentNoMasthead()
  911. }
  912. if no-masthead-w==2 {
  913. if youtube-wpr {
  914. &[youtube-wpr*="h2"] {
  915. contentNoMasthead()
  916. }
  917. } else {
  918. &:has(#chat:not([collapsed])) {
  919. contentNoMasthead()
  920. }
  921. }
  922. }
  923. contentSingleColMobile()
  924. }
  925. }
  926.  
  927. @css {
  928.  
  929. @supports not selector(:has(body)) {
  930.  
  931.  
  932. html::after {
  933. display: block;
  934. content: 'Your browser does not support "has-selector". Please update to latest version and enable it via configuration.';
  935. width: 60vh;
  936. padding: 12px;
  937. height: auto;
  938. position: fixed;
  939. left: 50%;
  940. top: 50%;
  941. transform: translate(-50%, -50%);
  942. transform-origin: 0 0;
  943. background: #71210f;
  944. color: #d2dadb;
  945. font-size: 14pt;
  946. text-shadow: 1px 1px 2px #605262;
  947. }
  948.  
  949. }
  950. }
  951.  
  952.  
  953. if youtube-wpr {
  954.  
  955. @css {
  956. @supports selector(:has(body)) {
  957.  
  958. @keyframes wpr-message-appear {
  959. 0% {
  960. top: -300vh;
  961. }
  962. 1% {
  963. top: 50%;
  964. }
  965. 100% {
  966. top: 50%;
  967. }
  968. }
  969. html:not([youtube-wpr]) ytd-watch-flexy::after {
  970. display: block;
  971. content: 'YouTube Live Borderless: YouTube WPR is not yet installed. Please install the userscript https://greasyfork.org/scripts/457319 in order to use YouTube WPR';
  972. width: 60vh;
  973. padding: 12px;
  974. height: auto;
  975. position: fixed;
  976. left: 50%;
  977. top: -300vh;
  978. transform: translate(-50%, -50%);
  979. transform-origin: 0 0;
  980. background: #71210f;
  981. color: #d2dadb;
  982. font-size: 14pt;
  983. text-shadow: 1px 1px 2px #605262;
  984. animation: wpr-message-appear 1ms 2s forwards;
  985. z-index: 9999;
  986. }
  987. }
  988.  
  989. }
  990.  
  991. }
  992. }