YouTube Live Borderless

Make YouTube Live Borderless

当前为 2023-01-28 提交的版本,查看 最新版本

  1. /* ==UserStyle==
  2. @name YouTube Live Borderless
  3. @version 0.4.31
  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 select mode-for-two-col "Mode ##TwoColumns" {
  16. "Expanded Panel Only #Recommended": "expanded-panel",
  17. "Expanded Live Chat Only": "expanded-live",
  18. "Expandable Live Chat Only": "expandable-live",
  19. "Always": "always"
  20. }
  21. @var select mode-for-single-col "Mode ##SingleColumn" {
  22. "YT Mobile #Recommended": "mobile",
  23. "Normal": "normal",
  24. "Disabled": "disabled"
  25. }
  26. @var checkbox no-masthead "Top.MastheadBar ::Hide" 0
  27. @var number masthead-hoverable-h "Top.MastheadBar ::Hoverable >>>1_alwaysHide" [4, 1, 8, 1]
  28. @var checkbox disable-cinematics "CinematicsEffect ::Disable" 0
  29. @var range video-enlarging "Video.Enlarging >>>Video.Border.Fine.Tune" [0, 0, 8, 2]
  30. @var range video-padding-left-right "Video.Padding.LeftRight (Experimental)" [0, 0, 18, 2, 'px']
  31. @var range video-padding-top-bottom "Video.Padding.TopBottom (Experimental)" [0, 0, 18, 2, 'px']
  32. @var range primary-content-margin "PrimaryContent ::Margin" [24, 6, 48, 6, "px"]
  33. @var range video-title-size "VideoTitle ::Size" [2.0, 1.0, 3.0, 0.2, "rem"]
  34. @var checkbox no-bottom-row "Bottom.PrimaryMetaInfoRow ::Hide" 0
  35. @var range min-below-area "BelowArea ::Minimum >>>10px_disable" [120, 10, 240, 10, 'px']
  36. @var range min-below-area-for-theater "WideTheater.BelowArea ::Minimum >>>10px_disable" [120, 10, 240, 10, 'px']
  37. @var number side-panel-width "SidePanel ::Width" [440, 320, 640, 20, "px"]
  38. @var checkbox no-round-border "RoundBorder ::Disable" 1
  39. @var number chat-zoom-for-right-col "RightCol.Chat ::Zoom" [1.0, 0.4, 1.2, 0.05]
  40. @var range chat-btn-height "RightCol.Chat ::SpaceAbove@Zoom >>>4px_disable" [36, 4, 60, 4, 'px']
  41. @var number chat-zoom-for-mobile "YTMobile.Chat ::Zoom" [1.0, 0.4, 1.2, 0.05]
  42. @var range chat-min-height "YTMobile.Chat ::Min.Height" [400, 20, 900, 10, 'px']
  43. @var checkbox t34 "Disable Some CSS Rules for laggy page" 0
  44. ==/UserStyle== */
  45. /*
  46.  
  47. @var range chrome-bottom-bar-margin "Chrome Bottom Bar Margin" [12, 6, 48, 6, "px"]
  48.  
  49. Chrome Bottom Bar Margin is 12px only due to
  50.  
  51. MU = function(a) {
  52. var b = a.u.ag()
  53. , c = a.G.getVideoData().D
  54. , d = 0;
  55. a.u.ag() && a.u.Me() && (d = (a.G.fb().getPlayerSize().width - a.G.getVideoContentRect().width) / 2);
  56. return 12 * (c ? 0 : b ? 2 : 1) + d
  57. }
  58.  
  59. */
  60. // d
  61. t33 = t34
  62. @-moz-document url-prefix("https://www.youtube.com/watch?v=") {
  63.  
  64. dummy() {
  65. // dummy
  66. border: 0;
  67. }
  68. buildL4(type, args...) {
  69. st1 = join('', ':', type, '(', join('\, ', args), ')')
  70. selector(st1)
  71. }
  72.  
  73. if min-below-area <= 10px {
  74. min-below-area = 0px
  75. }
  76. if min-below-area-for-theater <= 10px {
  77. min-below-area-for-theater = 0px
  78. }
  79. chat-btn-height = chat-btn-height + 1px
  80. if chat-btn-height == 4px + 1px {
  81. chat-btn-height = 0px
  82. }
  83. masthead-hoverable-height = (masthead-hoverable-h - 1) * 2px
  84.  
  85. no-masthead-w = no-masthead //
  86. chrome-bottom-bar-margin = 12px // this cannot be changed
  87.  
  88. single-col-mobile = (mode-for-single-col == "mobile" ? 1 : 0) //
  89. if single-col-mobile == 1 and no-masthead-w == 0 {
  90. no-masthead-w = 2 //
  91. }
  92. chat-zoom-for-mobile-enable = ((chat-zoom-for-mobile < 1) or (chat-zoom-for-mobile > 1))
  93.  
  94. content361(){
  95. html {
  96. --ylb-min-below-area: min-below-area;
  97. }
  98. // general fix
  99. ytd-watch-flexy[theater] #player-theater-container.ytd-watch-flexy {
  100. min-height: unset;
  101. }
  102. #movie_player .ytp-cued-thumbnail-overlay-image {
  103. /* background-size: contain !important; */
  104. background-size: auto 100% !important;
  105. }
  106. ytd-watch-flexy:not([is-two-columns_]) ytd-watch-metadata {
  107. padding-top: var(--ytd-margin-3x);
  108. }
  109. ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]) #primary.ytd-watch-flexy {
  110. padding-top: 0;
  111. margin-top: 0;
  112. }
  113. html:not([tabview-loaded]):has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe) {buildL4('is',
  114. '#primary-inner.ytd-watch-flexy ytd-comments#comments.ytd-watch-flexy',
  115. '#secondary-inner.ytd-watch-flexy > #related.ytd-watch-flexy')} {
  116. display: none !important;
  117. }
  118. html:not([tabview-loaded]) #cinematics {
  119. // contain: layout;
  120. contain: layout size style;
  121. user-select: none;
  122. touch-action: none;
  123. pointer-events: none;
  124. }
  125.  
  126.  
  127. }
  128.  
  129. //
  130. contentNoMasthead() {
  131.  
  132. // root = html
  133. & {
  134. /* 0px not 0 */
  135. --ytd-masthead-height: 0px;
  136. --ytd-toolbar-height: 0px;
  137. --ytd-watch-flexy-masthead-height: 0px;
  138. }
  139.  
  140. #masthead-container {
  141. height: 0;
  142. --masthead-opacity: 0;
  143. opacity: var(--masthead-opacity) !important;
  144. transition: opacity 300ms;
  145. min-height: masthead-hoverable-height;
  146. contain: layout size style;
  147. }
  148.  
  149. #masthead-container > ytd-masthead {
  150. transform: translateY(-100%);
  151. transition: transform 300ms;
  152. }
  153.  
  154.  
  155. if masthead-hoverable-height > 0 {
  156.  
  157.  
  158. #masthead-container:hover {
  159. --masthead-opacity: 1;
  160. }
  161.  
  162. #masthead-container:hover > ytd-masthead {
  163. transform: translateY(0%);
  164. }
  165.  
  166. #masthead-container::after {
  167. content: '';
  168. display: flex;
  169. width: 100%;
  170. height: masthead-hoverable-height;
  171. top: 0;
  172. z-index: 77;
  173. cursor: default;
  174. user-select: none !important;
  175. touch-action: none !important;
  176. box-sizing: border-box;
  177. padding: 0;
  178. margin: 0;
  179. }
  180. }
  181. if t33 == 0 {
  182.  
  183. ytd-watch-flexy.style-scope[is-two-columns_]:not([fullscreen]):not([theater]) {
  184.  
  185. #columns.style-scope.ytd-watch-flexy,
  186. #primary.style-scope.ytd-watch-flexy,
  187. #primary-inner.style-scope.ytd-watch-flexy,
  188. #secondary.style-scope.ytd-watch-flexy,
  189. #secondary-inner.style-scope.ytd-watch-flexy {
  190. height: 100vh;
  191. max-height: 100%;
  192. }
  193. }
  194.  
  195. ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) {
  196.  
  197. height: 100vh;
  198. #player-theater-container.ytd-watch-flexy {
  199. flex: 77;
  200. max-height: unset;
  201. }
  202.  
  203.  
  204. }
  205.  
  206.  
  207.  
  208. &:not([tabview-loaded]) ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) {
  209.  
  210.  
  211. #player-theater-container.ytd-watch-flexy ~ #columns.style-scope.ytd-watch-flexy {
  212. overflow: visible;
  213. }
  214. }
  215.  
  216. }
  217.  
  218. } //
  219. #microformat.ytd-watch-flexy {
  220. position: fixed;
  221. top:-200vh;
  222. left:-200vw;
  223. }
  224. contentSingleColMobile(){
  225.  
  226. // html:has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]))
  227.  
  228. #chat:not([collapsed]) {
  229. --ytd-margin-2x: 0;
  230. --ytd-margin-4x: 0;
  231. --ytd-margin-6x: 0;
  232. --ytd-margin-8x: 0;
  233.  
  234. height: 100% !important;
  235. min-height: unset !important;
  236. max-height: 100vh !important;
  237.  
  238. // position:relative;
  239. // top:auto;
  240. // bottom:0;
  241.  
  242. iframe#chatframe{
  243.  
  244.  
  245. min-height: 0px;
  246.  
  247. }
  248.  
  249.  
  250.  
  251. if chat-zoom-for-mobile-enable {
  252.  
  253.  
  254. iframe-transform = 'scale(%s)' % chat-zoom-for-mobile
  255. iframe-ratio = 100% / chat-zoom-for-mobile
  256.  
  257. iframe#chatframe {
  258. position:absolute;
  259.  
  260. transform: iframe-transform;
  261. height: s('calc((100% - %s) / %s) !important', chat-btn-height, chat-zoom-for-mobile);
  262. max-height: unset !important;
  263. min-height: unset !important;
  264. transform-origin: 0 0;
  265. width: iframe-ratio !important;
  266. margin-top: chat-btn-height;
  267.  
  268.  
  269. }
  270.  
  271.  
  272. }
  273.  
  274.  
  275. }
  276.  
  277.  
  278.  
  279. &:has(#chat:not([collapsed])) {
  280. // html:has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen])):has(#chat:not([collapsed]))
  281.  
  282. #contentContainer.tp-yt-app-drawer[swipe-open].tp-yt-app-drawer::after {
  283.  
  284. content: unset;
  285.  
  286. }
  287.  
  288.  
  289. if t33 == 0 {
  290.  
  291. #primary-inner.ytd-watch-flexy ytd-comments#comments.ytd-watch-flexy,
  292. #below.ytd-watch-flexy > .ytd-watch-flexy{buildL4('is', '#related', 'ytd-watch-metadata')} {
  293. /* display:none !important; */
  294. position: fixed !important;
  295. transform: scale(0.01) !important;
  296. transform-origin: 0 0 !important;
  297. left: -100vw !important;
  298. top: -100vh !important;
  299. visibility: collaspe !important;
  300. pointer-events: none !important;
  301. user-select: none !important;
  302. touch-action: none !important;
  303. }
  304.  
  305. }
  306.  
  307. #secondary.ytd-watch-flexy {
  308. display:none !important;
  309. }
  310.  
  311.  
  312.  
  313.  
  314. .efyt-control-bar {
  315. position: relative;
  316. display: inline-flex;
  317. top: auto;
  318. left: auto;
  319. z-index: 99999;
  320. opacity: 0.8;
  321. transform: translate(calc(-100% + 32px), 0) !important;
  322. }
  323.  
  324. .efyt-control-bar:hover {
  325. opacity: 1.0;
  326. background: var(--yt-spec-general-background-a);
  327. transform: translate(0px, 0) !important;
  328. }
  329.  
  330. #player {
  331. margin-bottom: 0;
  332. }
  333.  
  334.  
  335.  
  336. {buildL4('is', '#columns', '#primary')} {
  337. padding: 0;
  338. }
  339.  
  340. --ylb-min-below-area: chat-min-height;
  341.  
  342.  
  343.  
  344.  
  345. {buildL4('is', '#player', '#player-theater-container', '#player-container-outer', '#player-container-inner', '#player-container', '#movie_player', '#movie_player video')} {
  346. object-fit: contain;
  347. max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;
  348.  
  349. }
  350.  
  351.  
  352. if t33 == 0 {
  353.  
  354. #primary-inner.ytd-watch-flexy > :not(.style-scope) {
  355. display: none !important;
  356. }
  357.  
  358. #below > *:not(#chat) {
  359. /* display:none !important; */
  360. position: fixed !important;
  361. transform: scale(0.01) !important;
  362. transform-origin: 0 0 !important;
  363. left: -100vw !important;
  364. top: -100vh !important;
  365. visibility: collaspe !important;
  366. pointer-events: none !important;
  367. user-select: none !important;
  368. touch-action: none !important;
  369.  
  370. }
  371. }
  372.  
  373. #below:not(:has(#chat)) {
  374. display: none;
  375. }
  376.  
  377.  
  378.  
  379. {buildL4('is', 'ytd-watch-flexy', '#columns.ytd-watch-flexy', '#primary.ytd-watch-flexy', '#primary-inner.ytd-watch-flexy')} {
  380. display: flex;
  381. flex-direction: column;
  382. margin: 0;
  383. flex: 1;
  384. }
  385.  
  386. #below {
  387. flex: 1;
  388. }
  389.  
  390. ytd-watch-flexy {
  391. height: 100vh !important;
  392. max-height: 100vh !important;
  393. }
  394.  
  395. ytd-watch-flexy{buildL4('is', '[theater]', '[fullscreen]')} #player-theater-container.ytd-watch-flexy {
  396.  
  397. min-height: unset !important;
  398. }
  399. }
  400.  
  401.  
  402. }
  403.  
  404. content2c() {
  405.  
  406. if t33 == 0 {
  407. if chat-zoom-for-right-col >1 or chat-zoom-for-right-col < 1 {
  408.  
  409. ytd-watch-flexy[is-two-columns_]:not([fullscreen]) iframe#chatframe {
  410.  
  411. position:absolute;
  412. margin-top:chat-btn-height;
  413.  
  414. transform: 'scale(%s)' % chat-zoom-for-right-col;
  415. transform-origin: 0 0;
  416. width: '%s !important' % (100% / chat-zoom-for-right-col);
  417. max-width: unset !important;
  418. height: s('calc( (100% - %s) / %s ) !important', chat-btn-height, chat-zoom-for-right-col);
  419. z-index: 1; /* for normal youtube */
  420.  
  421. }
  422.  
  423. }
  424.  
  425.  
  426. if no-masthead-w==0 {
  427.  
  428. ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) {
  429.  
  430. .style-scope.ytd-watch-flexy{buildL4('is', '#secondary', '#secondary-inner')} {
  431. height: calc(100vh - var(--ytd-toolbar-height));
  432. max-height: 100%;
  433. }
  434. }
  435. }
  436.  
  437.  
  438. ytd-watch-flexy[is-two-columns_]:not([fullscreen]) #movie_player {
  439.  
  440. .ytp-chrome-bottom[style*="width"] {
  441. width: unset !important;
  442. left: chrome-bottom-bar-margin !important;
  443. right: chrome-bottom-bar-margin !important;
  444. }
  445.  
  446. }
  447.  
  448.  
  449. /*
  450.  
  451. // originally this is to avoid sizing issue; however, as userscript "YouTube Video Resize Fix" is a must, this is no longer required.
  452. // this css rule not compatible with YouTubeLiveClock
  453.  
  454. ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]) #movie_player {
  455.  
  456. .ytp-chrome-bottom[style*="width"] {
  457. left: 50% !important;
  458. transform: translateX(-50%);
  459. }
  460.  
  461. }
  462.  
  463. */
  464.  
  465.  
  466. ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) ytd-live-chat-frame#chat:not([collapsed]) {
  467. min-height: unset;
  468. }
  469.  
  470.  
  471.  
  472. ytd-watch-flexy.style-scope[is-two-columns_]:not([fullscreen]) #primary-inner.ytd-watch-flexy > *:not(#player) {
  473. padding: 0 primary-content-margin 0;
  474. }
  475.  
  476.  
  477. 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')}{
  478.  
  479. // layout outside
  480. // no effect
  481. // layout inside
  482. max-height: calc(100vh - var(--ytd-toolbar-height, 0px) - var(--ylb-min-below-area, 0px)); // for very wide screen
  483. }
  484.  
  485. ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) #player-theater-container.ytd-watch-flexy {
  486. max-height: calc(100vh - var(--ytd-toolbar-height, 0px) - var(--ylb-min-below-area, 0px)); // for 4:3 video
  487.  
  488. }
  489.  
  490.  
  491.  
  492. body.lock-scrollbar[style*="overflow"][style*="hidden"]:has(ytd-watch-flexy[is-two-columns_]:not([hidden])):has(#movie_player) {
  493. overflow-y: unset !important;
  494. }
  495.  
  496.  
  497. ytd-watch-flexy.style-scope[is-two-columns_] #columns.ytd-watch-flexy > #secondary.ytd-watch-flexy {
  498. width: side-panel-width;
  499. }
  500.  
  501. }
  502.  
  503.  
  504. }
  505. ytd-watch-flexy {
  506.  
  507. --ytd-margin-2y: var(--ytd-margin-2x);
  508. --ytd-margin-4y: var(--ytd-margin-4x);
  509. --ytd-margin-6y: var(--ytd-margin-6x);
  510. --ytd-margin-8y: var(--ytd-margin-8x);
  511.  
  512. }
  513.  
  514. contentf() {
  515. // html
  516.  
  517.  
  518. if (video-padding-left-right + video-padding-top-bottom) > 0 {
  519.  
  520. #player-container-outer.ytd-watch-flexy {
  521. padding-left: video-padding-left-right;
  522. padding-right: video-padding-left-right;
  523. padding-top: video-padding-top-bottom;
  524. padding-bottom: video-padding-top-bottom;
  525. }
  526.  
  527. }
  528.  
  529.  
  530. body ytd-watch-flexy[flexy] #player-container-outer.ytd-watch-flexy {
  531. max-width: unset; // override var(--ytd-watch-flexy-max-player-width);
  532. }
  533.  
  534. &:not([tabview-loaded]) {
  535.  
  536. 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 {
  537.  
  538. max-width: unset; // override var(--ytd-watch-flexy-max-player-width);
  539.  
  540. }
  541.  
  542.  
  543. ytd-watch-flexy:not([fullscreen]) #player-theater-container {
  544. max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;
  545. }
  546.  
  547.  
  548. ytd-watch-flexy[is-two-columns_]:not([theater]):not([fullscreen]) {buildL4('is', '#columns', '#primary', '#primary-inner', '#secondary', '#secondary-inner')} {
  549. height: calc(100vh - var(--ytd-toolbar-height));
  550. }
  551.  
  552. }
  553.  
  554. if video-enlarging > 0 {
  555.  
  556. ytd-watch-flexy:not([theater]):not([fullscreen]) #movie_player video[src] {
  557. transform: 'scale(%s)' % (video-enlarging / 1000 + 1) ;
  558. transform-origin: 50% 50%;
  559. }
  560.  
  561. }
  562.  
  563.  
  564.  
  565.  
  566.  
  567.  
  568.  
  569. ytd-watch-flexy[flexy][is-two-columns_][theater]:not([fullscreen]) {
  570.  
  571. --ylb-min-below-area: min-below-area-for-theater;
  572.  
  573.  
  574. {buildL4('is', '#player', '#player-theater-container', '#player-container-outer', '#player-container-inner', '#player-container', '#movie_player', '#movie_player video')} {
  575. object-fit: contain;
  576. max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;
  577. }
  578. }
  579.  
  580.  
  581.  
  582. if no-bottom-row {
  583.  
  584. #bottom-row.ytd-watch-metadata {
  585. display: none !important;
  586. }
  587. }
  588.  
  589. h1.ytd-watch-metadata {
  590. font-size: video-title-size;
  591. --font-size: video-title-size;
  592. line-height: 140%;
  593. margin-bottom: -2px;
  594. }
  595.  
  596.  
  597.  
  598.  
  599.  
  600. ytd-watch-flexy.style-scope:not([fullscreen]) {
  601.  
  602. #columns.ytd-watch-flexy {
  603. --ytd-margin-2x: 0;
  604. --ytd-margin-4x: 0;
  605. --ytd-margin-6x: 0;
  606. --ytd-margin-8x: 0;
  607. }
  608. blockm = @block {
  609. --ytd-margin-2x: var(--ytd-margin-2y);
  610. --ytd-margin-4x: var(--ytd-margin-4y);
  611. --ytd-margin-6x: var(--ytd-margin-6y);
  612. --ytd-margin-8x: var(--ytd-margin-8y);
  613. }
  614.  
  615. #secondary-inner.style-scope.ytd-watch-flexy {
  616. display: flex;
  617. flex-direction: column;
  618. height: 100%;
  619. }
  620.  
  621. {buildL4('is', '#below', '#player', '#right-tabs')} {
  622. {blockm}
  623. }
  624. if t33 == 0 {
  625. .style-scope.ytd-watch-flexy > .style-scope:not(.ytd-watch-flexy) {
  626. {blockm}
  627. }
  628.  
  629.  
  630. #movie_player {
  631. position: relative;
  632. > .html5-video-container:has(video) {
  633. top: 0;
  634. bottom: 0;
  635. left: 0;
  636. right: 0;
  637. position: absolute;
  638. }
  639.  
  640. .html5-video-container > video {
  641. width: unset !important;
  642. height: 100% !important;
  643. left: 0 !important;
  644. right: 0 !important;
  645. max-height: 100%;
  646. max-width: 100%;
  647. margin: 0 auto;
  648. }
  649.  
  650. /*
  651. .ytp-iv-video-content {
  652. width: 100% !important;
  653. height: 100% !important;
  654. }
  655. */
  656.  
  657. /*
  658. // this is buggy; eg multiple chapter hover container; can be fixed by YouTube Video Resize Fix Only
  659. .ytp-chapter-hover-container[style*="width"] {
  660. width: 100% !important;
  661. }
  662. */
  663.  
  664. .html5-video-container > video[style*="top:"]:not(video[style*="top: -"]):not(video[style*="top:-"]) {
  665. top: 0 !important;
  666. }
  667.  
  668. }
  669.  
  670.  
  671.  
  672. &:not([is-two-columns_]) #primary-inner > *:not(#player) {
  673. padding: 0;
  674. }
  675.  
  676. &:not([is-two-columns_]) #primary-inner #below > *:not(ytd-live-chat-frame#chat) {
  677. padding: 0 primary-content-margin 0;
  678. }
  679.  
  680. /*
  681. #player-container-outer.ytd-watch-flexy {
  682. max-width: unset;
  683. }
  684. */
  685. }
  686. #chat:not([collapsed]) {
  687. flex: 77;
  688. }
  689.  
  690. #right-tabs {
  691. display: flex;
  692. margin: 0 !important;
  693. flex: 1;
  694. flex-direction: column;
  695.  
  696. {buildL4('is', '#material-tabs', '.tab-content')} {
  697. outline: 0;
  698. }
  699.  
  700.  
  701. .tab-content {
  702. flex: 77;
  703. }
  704. }
  705. }
  706.  
  707.  
  708.  
  709.  
  710. if no-round-border {
  711.  
  712. ytd-live-chat-frame[rounded-container],
  713. ytd-live-chat-frame[rounded-container] #show-hide-button.ytd-live-chat-frame ytd-toggle-button-renderer.ytd-live-chat-frame,
  714. ytd-live-chat-frame[rounded-container] iframe.ytd-live-chat-frame,
  715. 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,
  716. 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 {
  717. border-radius: unset;
  718. }
  719. }
  720.  
  721.  
  722. if disable-cinematics {
  723. #cinematics.ytd-watch-flexy {
  724. display: none;
  725. }
  726. }
  727. } //
  728. contentg() {
  729.  
  730. content2c() //
  731. selector-g = '&' //
  732. if mode-for-single-col=="disabled" { //
  733. selector-g = '&:has(ytd-watch-flexy[is-two-columns_])' //
  734. } //
  735. {s(selector-g)} { //
  736. // html
  737. contentf() //
  738. } //
  739. }
  740. content361() //
  741. selectors-2col = { //
  742. "expanded-panel": join(', ',
  743. "html:not([tabview-loaded]):has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe)",
  744. "html[tabview-loaded]:has(ytd-watch-flexy[is-two-columns_]:not([fullscreen]):not([theater]))"
  745. ),
  746. "expanded-live": "html:has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe)",
  747. "expandable-live": "html:has(ytd-live-chat-frame#chat):has(iframe#chatframe)",
  748. "always": "html"
  749. } //
  750. selector-2col = selectors-2col[mode-for-two-col]
  751. selectors-k = split(', ', selector-2col)
  752. for selector-k in selectors-k {
  753. {s(selector-k)} {
  754. if no-masthead-w==1 {
  755. contentNoMasthead()
  756. }
  757. contentg() //
  758. }
  759. }
  760.  
  761. if single-col-mobile {
  762. &:has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen])) {
  763.  
  764. if no-masthead-w==2 {
  765. contentNoMasthead()
  766. }
  767. contentSingleColMobile()
  768. }
  769. }
  770. }