☰

Invidious (All Instances) Player And Tabs v.3

Invidious (yewtu.be) player with Tabs for Description / Comments / Videos Related

  1. /* ==UserStyle==
  2. @name        Invidious (All Instances) Player And Tabs v.3
  3. @namespace   https://yewtu.be/
  4. @version     03.0.0
  5. @author      decembre
  6. @description Invidious (yewtu.be) player with Tabs for Description / Comments / Videos Related
  7. @license     unlicense
  8. ==/UserStyle== */
  9.  
  10.  
  11. @-moz-document url-prefix("https://yewtu.be/watch?"), url-prefix("https://vid.puffyan.us/watch?"), url-prefix("https://invidious.snopyta.org/watch?"), url-prefix("https://inv.riverside.rocks/watch?"), url-prefix("https://invidio.xamh.de/watch?"),url-prefix("https://y.com.sb/watch?"), url-prefix("https://invidious.sethforprivacy.com/watch?"), url-prefix("https://yt.artemislena.eu/watch?"), url-prefix("https://invidious.tiekoetter/watch?"), url-prefix("https://invidious.flokinet.to/watch?"), url-prefix("https://inv.bp.projectsegfau.lt/watch?"), url-prefix("https://yewtu.be/watch?"), url-prefix("https://inv.vern.cc/watch?"), url-prefix("https://yewtu.be/watch?"), url-prefix("https://yewtu.be/watch?"), url-prefix("https://invidious.nerdvpn.de/watch?"), url-prefix("https://invidious.projectsegfau.lt/watch?"), url-prefix("https://invidious.rhyshl.live/watch?"), url-prefix("https://yewtu.be/watch?"), url-prefix("https://inv.privacy.com.de/watch?"), url-prefix("https://invidious.slipfox.xyz/watch?"), url-prefix("https://youtube.076.ne.jp/watch?"), url-prefix("https://invidious.esmailelbob.xyz/watch?"), url-prefix("https://invidious.namazso.eu/watch?"), url-prefix("https://invidious.kavin.rocks/watch?"), url-prefix("https://yt.funami.tech/watch?"), url-prefix("https://invidious.0011.lt/watch?"), url-prefix("https://watch.thekitty.zone/watch?"), url-prefix("https://iv.melmac.space/watch?"), url-prefix("https://iv.ggtyler.dev/watch?"), url-prefix("https://invidious.tiekoetter.com/watch?"), url-prefix("https://invidious.vpsburti.com/watch?"), url-prefix("https://inv.odyssey346.dev/watch?"), url-prefix("https://invidious.lunar.icu/watch?"), url-prefix("https://invidious.baczek.me/watch?"), url-prefix("https://inv.zzls.xyz/watch?"), url-prefix("https://vid.priv.au/watch?"), url-prefix("https://invidious.privacydev.net/watch?") {
  12.  
  13. /* ====   Invidious (All Instances) Player And Tabs v.3  ==== */
  14.  
  15. /* WIDESREEN */
  16.  
  17.  
  18. /* TOP NAV */
  19. .pure-g.navbar.h-box .pure-u-1.pure-u-md-4-24 {
  20.     max-width: 5.6667% !important;
  21.     margin-top: -19px !important;
  22. }
  23. .pure-u-1.pure-u-md-12-24.searchbar{
  24.     margin-top: -19px !important;
  25. }
  26. .pure-u-1.pure-u-md-8-24.user-field{
  27.     margin-top: -20px !important;
  28. }
  29.  
  30. .pure-u-md-20-24, 
  31. .pure-u-md-5-6 {
  32.     width: 83.3333%;
  33. }
  34.  
  35.  
  36. #contents {
  37.     display: flex;
  38.     flex-direction: column;
  39.     min-height: 100vh;
  40.     width: 100% !important;
  41. }
  42. /* (new3) TOP NAV - CONTACT/INFOS MESSAGES */
  43. .pure-g.navbar.h-box + .h-box {
  44.     position: fixed !important;
  45.     display: inline-block !important;
  46.     max-width: 40vw !important;
  47.     left: 8vw !important;
  48.     bottom: -6.5vh !important;
  49.     padding: 0  !important;
  50.     font-size: 15px  !important;
  51. border: 1px solid aqua  !important;
  52. }
  53. .pure-g.navbar.h-box + .h-box:hover {
  54.     position: fixed !important;
  55.     display: inline-block !important;
  56.     max-width: 40vw !important;
  57.     left: 5.4vw !important;
  58.     bottom: 0 !important;
  59.     padding: 5px 20px 5px 15px!important;
  60.     border-radius: 5px  5px 0 0 !important;
  61.     font-size: 15px  !important;
  62.     z-index: 500000 !important;
  63. background: #111 !important;
  64. border: 1px solid red  !important;
  65. }
  66.  
  67. .pure-g.navbar.h-box + .h-box:not(:hover)::before {
  68.     position: fixed !important;
  69.     display: inline-block;
  70.     content: "⚠";
  71.     width: 20px;
  72.     height: 15px;
  73.     line-height: 15px;
  74.     bottom: 0vh !important;
  75.     left: 5.5vw;
  76.     border-radius: 5px 5px 0 0;
  77.     text-align: center;
  78.     font-size: 15px;
  79.     z-index: 500;
  80. color: gold !important;
  81. background-color: rgb(21, 21, 21);
  82. border: 1px solid red;
  83. }
  84. .pure-g.navbar.h-box + .h-box h3{
  85.     display: inline-block !important;
  86.     margin: 0 !important;
  87.     padding: 0  !important;
  88.     font-size: 15px !important;
  89.     font-weight: normal !important;
  90.     font-family: Arial, sans-serif !important;
  91. color: gray !important;
  92. /* border: 1px solid aqua  !important; */
  93. }
  94.  
  95. /* (new3) TOP NAV FEED MENU:
  96. FOR: https://watch.thekitty.zone/
  97. ==== */
  98. .feed-menu {
  99.     position: fixed !important;
  100.     display: inline-block !important;
  101.     right: 16vw !important;
  102.     top: 0.5vh !important;
  103.     padding: 0  !important;
  104.     font-size: 15px  !important;
  105. border-bottom: 1px solid red  !important;
  106. }
  107. .feed-menu-item {
  108.     float: left !important;
  109.     padding: 0 0.5rem !important;
  110.     text-align: center;
  111. }
  112. /* VID PLAYER */
  113. .player-dimensions.vjs-fluid {
  114.     padding-top: 82vh;
  115. }
  116. .vjs-poster {
  117.     position: absolute;
  118.     display: inline-block;
  119.     vertical-align: middle;
  120.     height: 100%;
  121.     bottom: 0;
  122.     left: 0;
  123.     right: 0;
  124.     top: 0;
  125.     margin: 0;
  126.     padding: 0;
  127.     background-position: 50% 50%;
  128.     background-repeat: no-repeat;
  129.     background-size: contain !important;
  130.     object-fit: contain !important;
  131. /* background-color: #000000; */
  132. }
  133.  
  134. #player-container.h-box {
  135.     position: relative;
  136.     width: 55% !important;
  137.     height: 0 !important;
  138.     top: 8vh !important;
  139.     margin: 0 1em 0 1em;
  140.     padding: 0 0 82vh 0 !important;
  141. /* border: 1px solid red !important; */
  142. }
  143. /* (new3) */
  144. /* #player-container.h-box #player.on-video_player.video-js.player-style-invidious {
  145.     width: 100%;
  146.     padding-top: 590px !important;
  147. } */
  148.  
  149.  
  150. /* TITLE */
  151. #player-container.h-box + .h-box {
  152.     position: absolute !important;
  153.     display: inline-block !important;
  154.     width: 53.35% !important;
  155.     min-height: 8.1vh !important;
  156.     top: 5.5vh !important;
  157.     margin: 0 1em 0 1em !important;
  158.     padding: 0 1em 0 1em !important;
  159. /* border: 1px solid green !important; */
  160. }
  161. #player-container.h-box + .h-box h1  {
  162.     font-size: 1.5em !important;
  163.     margin: 0.27em 0 0 0 !important;
  164. }
  165.  
  166.  
  167. /* INFOS + COMMENTS */
  168.  
  169. .h-box + .pure-g {
  170.     position: absolute !important;
  171.     display: flex;
  172.     float: right !important;
  173.     clear: both !important;
  174.     width: 42% !important;
  175.     top: 5.8vh !important;
  176.     right: 0 !important;
  177.     margin: 0 1em 0 1em;
  178.     padding: 1em 0 0 0 !important;
  179.     -moz-box-direction: normal;
  180.     -moz-box-orient: horizontal;
  181.     align-content: flex-start;
  182.     flex-flow: row wrap;
  183.     font-family: FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;
  184.     letter-spacing: -0.31em;
  185.     text-rendering: optimizespeed;
  186. border-top: 1px solid red !important;
  187. }
  188. .h-box + .pure-g > div {
  189.     height: 90vh !important;
  190.     overflow: hidden !important;
  191. }
  192. .pure-u-lg-3-5 {
  193.     width: 60%;
  194. }
  195. .pure-u-lg-3-5 .h-box {
  196.     padding-left: 1em;
  197.     padding-right: 1em;
  198. }
  199. .pure-u-lg-3-5 .h-box > a ,
  200. .pure-u-lg-3-5 .h-box > p ,
  201. .pure-u-lg-3-5 .h-box > #description-box ,
  202. .pure-u-lg-3-5 .h-box > hr {
  203.     display: block;
  204.     width: 100%;
  205. }
  206.  
  207. /* TAB - DESCRIPTION TAB */
  208. /* .pure-u-lg-3-5 .h-box > #description-box , */
  209. .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:first-of-type + .pure-u-1 {
  210.     position: absolute !important;
  211.     width: 98% !important;
  212.     height: 92vh !important;
  213.     top: 0 !important;
  214.     padding: 0.4em 1em 0 1em !important;
  215.     overflow-wrap: break-word;
  216.     overflow: hidden !important;
  217.     overflow-y: auto !important;
  218.     visibility: hidden !important;
  219. /* background: aqua !important; */
  220. }
  221. .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:first-of-type + .pure-u-1:hover  {
  222.     z-index: 500 !important;
  223.     visibility: visible !important;
  224. /* background: #111 !important; */
  225. }
  226. .pure-u-lg-3-5 .h-box > #description-box#description-box:before  {
  227.     content: "Description" !important;
  228.     position: fixed !important;
  229.     max-width: 57% !important;
  230.     top: 3.5vh !important;
  231.     right: 35vw !important;
  232.     padding: 0.1em 1em 0 1em !important;
  233.     border-radius: 5px 5px 0 0 !important;
  234.     visibility: visible !important;
  235. /* background: aqua !important; */
  236. }
  237.  
  238.  
  239. /* TAB - COMMENTS TABS */
  240. .pure-u-lg-3-5 .h-box > #comments  {
  241.     position: absolute !important;
  242.     width: 100% !important;
  243.     height: 92vh !important;
  244.     top: 0 !important;
  245.     overflow-wrap: break-word;
  246.     overflow: hidden !important;
  247.     overflow-y: auto !important;
  248.     visibility: hidden !important;
  249. /* background: red !important; */
  250. }
  251. .pure-u-lg-3-5 .h-box > #comments:hover  {
  252.     visibility: visible !important;
  253.     z-index: 100 !important;
  254. /* background: red !important; */
  255. }
  256. .pure-u-lg-3-5 .h-box > #comments:before  {
  257.     content: "Comments" !important;
  258.     position: fixed !important;
  259.     max-width: 57% !important;
  260.     top: 3.5vh !important;
  261.     right: 25vw !important;
  262.     padding: 0.1em 1em 0 1em !important;
  263.     border-radius: 5px 5px 0 0 !important;
  264.     visibility: visible !important;
  265. /* background: red !important; */
  266. }
  267.  
  268. /* TAB - RELATED VIDEO */
  269. .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type  {
  270.     position: absolute !important;
  271.     width: 100% !important;
  272.     height: 92vh !important;
  273.     top: 0 !important;
  274.     overflow-wrap: break-word;
  275.     overflow: hidden !important;
  276.     overflow-y: auto !important;
  277.     opacity: 1 !important;
  278.     visibility: visible !important;
  279. /* visibility: hidden !important; */
  280. /* background: #333 !important; */
  281. }
  282.  
  283. .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type:hover  {
  284. opacity: 1 !important;
  285. visibility: visible !important;
  286. /* background: green !important; */
  287. }
  288. .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type:before  {
  289.     content: "Videos" !important;
  290.     position: fixed !important;
  291.     max-width: 57% !important;
  292.     top: 3.5vh !important;
  293.     right: 16vw !important;
  294.     padding: 0.1em 1em 0 1em !important;
  295.     border-radius: 5px 5px 0 0 !important;
  296.     opacity: 1 !important;
  297.     visibility: visible !important;
  298. /* background: green !important; */
  299. }
  300.  
  301.  
  302. .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type:not(:hover) .h-box > h5.pure-g ,
  303. .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type:not(:hover) .h-box > a {
  304. opacity: 0.1 !important;
  305. transition: opacity ease 0.7s !important;
  306. }
  307. .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type .h-box > a{
  308.     position: relative  !important;
  309.     display: inline-flex !important;
  310.     width: 45% !important;
  311.     height: 100% !important;
  312.     min-height: 25vh !important;
  313.     max-height: 25vh !important;
  314.     margin: 0 0 10px 0  !important;
  315.     padding: 0.3em !important;
  316. /* background: #222 !important; */
  317. /* border: 1px solid green !important; */
  318. }
  319. .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type .h-box > h5.pure-g {
  320.     position: absolute !important;
  321.     display: inline-block !important;
  322.     width: 100% !important;
  323.     max-width: 17.4vw !important;
  324.     margin: 0.1vh 0 0 -18.4vw  !important;
  325.     padding: 0 0.5em !important;
  326. /* background: red !important; */
  327. }
  328. .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type div.thumbnail {
  329.     position: relative;
  330.     width: 100% !important;
  331.     box-sizing: border-box;
  332.     padding: 0 !important;
  333. }
  334. .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type div.thumbnail img.thumbnail {
  335.     position: absolute;
  336.     height: 68%;
  337.     width: 100%;
  338.     left: 0vw !important;
  339.     top: 2vh !important;
  340.     object-fit: contain !important;
  341. }
  342.  
  343. .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type div.thumbnail .length {
  344.     position: absolute !important;
  345.     display: inline-block !important;
  346.     bottom: 2.75em;
  347.     right: 0.25em;
  348.     padding: 2px;
  349.     border-radius: 2px;
  350.     font-size: 16px;
  351.     z-index: 100;
  352. }
  353.  
  354. .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type a > p {
  355.     position: absolute !important;
  356.     display: inline-block !important;
  357.     width: 99% !important;
  358.     bottom: -1.3vh !important;
  359. }
  360.  
  361. /* (new3) ALTERNATE - RELATED VIDEO:
  362. FOR:  https://watch.thekitty.zone
  363. === */
  364. .feed-menu ~ .pure-g #related-videos {
  365.   height: 92vh;
  366.   opacity: 1;
  367.   overflow-wrap: break-word;
  368.   overflow-x: hidden;
  369.   overflow-y: auto;
  370.   position: absolute;
  371.   top: 0;
  372.   visibility: visible;
  373.   width: 100%;
  374. }
  375.  
  376. .feed-menu ~ .pure-g #related-videos .h-box > div:not(#autoplay-controls) {
  377.     position: relative  !important;
  378.     float: left !important;
  379.     width: 45% !important;
  380.     height: 100% !important;
  381.     min-height: 32vh !important;
  382.     max-height: 32vh !important;
  383.     margin: 0 8px 10px 0  !important;
  384.     padding: 0.3em !important;
  385.     border-radius: 5px  !important;
  386. /* background: #222 !important; */
  387. /* background: red !important; */
  388. border: 1px solid #222 !important;
  389. }
  390. .feed-menu ~ .pure-g #related-videos .h-box > div:not(#autoplay-controls)  > a[href^="/watch?"] {
  391.     position: relative  !important;
  392.     display: inline-block !important;
  393.     width: 100% !important;
  394.     height: 100% !important;
  395.     min-height: 27vh !important;
  396.     max-height: 27vh !important;
  397.     margin: 0 0 0px 0  !important;
  398.     padding: 0 !important;
  399.     opacity: 0.1 !important;
  400.     transition: opacity 0.7s ease 0s !important;
  401. /* background: #222 !important; */
  402. }
  403.  
  404. .feed-menu ~ .pure-g #related-videos .h-box > div:not(#autoplay-controls)  > a[href^="/watch?"] div.thumbnail  {
  405.     position: relative;
  406.     display: inline-block !important;
  407.     width: 100% !important;
  408.     height: 100% !important;
  409.     min-height: 27vh !important;
  410.     max-height: 27vh !important;
  411.     box-sizing: border-box;
  412.     padding: 0 !important;
  413. }
  414. .feed-menu ~ .pure-g #related-videos .h-box > div:not(#autoplay-controls)  > a[href^="/watch?"] div.thumbnail img.thumbnail {
  415.     position: absolute;
  416.     display: inline-block !important;
  417.     height: 68% !important;
  418.     width: 100%;
  419.     left: 0vw !important;
  420.     top: 0.5vh !important;
  421.     object-fit: contain !important;
  422. }
  423. .feed-menu ~ .pure-g #related-videos .h-box > div:not(#autoplay-controls)  > a[href^="/watch?"] + h5.pure-g {
  424.     position: relative;
  425.     display: inline-block !important;
  426.     width: 100% !important;
  427.     left: -4px !important;
  428.     top: -5px  !important;
  429.     margin: 0 0 0 0 !important;
  430.     padding: 0 3px !important;
  431.     opacity: 0.1 !important;
  432. /* border: 1px solid violet !important; */
  433. }
  434. .feed-menu ~ .pure-g #related-videos .h-box > div:not(#autoplay-controls)  > a[href^="/watch?"] + h5.pure-g  > div:first-of-type {
  435.     width: 80%;
  436. }
  437. .feed-menu ~ .pure-g #related-videos .h-box > div:not(#autoplay-controls)  > a[href^="/watch?"] + h5.pure-g  > div:last-of-type {
  438.     width: 20%;
  439. }
  440.  
  441.  
  442. .feed-menu ~ .pure-g #related-videos .h-box > div:not(#autoplay-controls)  > a[href^="/watch?"] + .pure-g  + .pure-button{
  443.     display: inline-block !important;
  444.     width: 100% !important;
  445.     margin: 0 !important;
  446.     padding: 1px 3px !important;
  447.     opacity: 0.1 !important;
  448. /* border: 1px solid violet !important; */
  449. }
  450.  
  451. .feed-menu ~ .pure-g #related-videos .h-box > div:not(#autoplay-controls)  > a[href^="/watch?"] > p {
  452.     position: absolute;
  453.     display: inline-block;
  454.     bottom: -1.3vh;
  455.     left: -3px !important;
  456.     padding: 0 3px !important;
  457. /* border-bottom: 1px solid aqua !important; */
  458. }
  459.  
  460. /* (new3) ALTERNATE RELATED - HOVER */
  461. .feed-menu ~ .pure-g #related-videos:hover .h-box > div:not(#autoplay-controls)  > a[href^="/watch?"] + h5.pure-g  ,
  462. .feed-menu ~ .pure-g #related-videos:hover .h-box > div:not(#autoplay-controls)  > a[href^="/watch?"] + .pure-g  + .pure-button ,
  463. .feed-menu ~ .pure-g #related-videos:hover  .h-box > div:not(#autoplay-controls) > a[href^="/watch?"] + h5.pure-g , 
  464. .feed-menu ~ .pure-g #related-videos:hover  .h-box > div:not(#autoplay-controls) > a[href^="/watch?"] {
  465.     opacity: 1 !important;
  466.     transition: opacity 0.7s ease 0s !important;
  467. }
  468.  
  469. /* (new3) INFOS STATS ETC  - BOTTOM */
  470. .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:first-of-type {
  471.     position: fixed !important;
  472.     display: inline-block !important;
  473.     width: 18% !important;
  474.     margin: 0 0 0 -1em !important;
  475.     max-height: 30vh !important;
  476.     padding: 0.5em 0 !important;
  477.     text-align: center;
  478.     bottom: -32vh !important;
  479.     z-index: 50000 !important;
  480.     transition: all ease 0.7s !important;
  481. /* border: 1px solid aqua !important; */
  482. }
  483. .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:first-of-type:hover {
  484.     position: fixed !important;
  485.     display: inline-block !important;
  486.     width: 18% !important;
  487.     margin: 0 0 0 1em;
  488.     max-height: 30vh !important;
  489.     padding: 0.5em 0 !important;
  490.     text-align: center;
  491.     bottom: 0vh !important;
  492.     transition: all ease 0s !important;
  493. /* border: 1px solid aqua !important; */
  494. }
  495. .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:first-of-type:before {
  496.     content: "⚙️" !important;
  497.     position: fixed !important;
  498.     display: inline-block !important;
  499.     width: 40px !important;
  500.     height: 25px !important;
  501.     line-height: 25px !important;
  502.     left: 56.5vw !important;
  503.     bottom: 0vh !important;
  504.     border-radius: 5px  5px  0 0 !important;
  505.     font-size: 15px !important;
  506.     text-align: center !important;
  507.     z-index: 500 !important;
  508. /* color: red !important; */
  509. }
  510. .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:first-of-type:hover:before {
  511.     content: "⚙️" !important;
  512.     position: fixed !important;
  513.     display: inline-block !important;
  514.     left: 56.35vw !important;
  515.     bottom: 31.8vh !important;
  516.     font-size: 15px !important;
  517.     z-index: 500 !important;
  518. /* color: red !important; */
  519. }
  520. #watch-on-youtube{
  521.     display: inline-block !important;
  522.     width: 100% !important;
  523.     text-align: left !important;
  524. }
  525. #watch-on-youtube:before{
  526.     content: "." !important;
  527.     display: inline-block !important;
  528.     width: 20px !important;
  529.     height: 15px !important;
  530.     font-size: 15px !important;
  531.     color: transparent !important;
  532.     background-image: url("https://duckduckgo.com/assets/icons/favicons/youtube.png") !important;
  533.     background-repeat: no-repeat !important;
  534. }
  535. /* FOOTER */
  536. footer {
  537.     position: fixed !important;
  538.     width: 55% !important;
  539.     margin: 0 0 0 1em;
  540.     max-height: 30vh;
  541.     padding: 0.5em 0 !important;
  542.     text-align: center;
  543.     bottom: -12.3vh !important;
  544.     transition: all ease 0.7s !important;
  545. /* border: 1px solid aqua !important; */
  546. }
  547. footer:hover {
  548.     position: fixed !important;
  549.     width: 55% !important;
  550.     margin: 0 0 0 1em;
  551.     max-height: 30vh;
  552.     padding: 0.5em 0 !important;
  553.     text-align: center;
  554.     bottom: 0vh !important;
  555.     transition: all ease 0.7s !important;
  556. /* border: 1px solid aqua !important; */
  557. }
  558. footer::before {
  559.     content: "GhitHub";
  560.     position: relative !important;
  561.     width: 10vw !important;
  562.     left: -25.5vw !important;
  563.     top: -3vh !important;
  564.     padding-left: 20px !important;
  565. /* background: red !important; */
  566. }
  567. footer:not(:hover) .ion-logo-github::before {
  568.     content: "";
  569.     position: absolute;
  570.     top: -2vh;
  571.     left: 0;
  572. }
  573.  
  574. /* ==== COLOR == LIGHT ==== */
  575. /* COLOR == LIGHT = VID PLAYER */
  576. .light-theme .vjs-poster {
  577.     background-color: #000000;
  578. }
  579. .light-theme #player-container.h-box #player.on-video_player.video-js.player-style-invidious {
  580.     background-color: #000;
  581. }
  582. /* COLOR == LIGHT = TITLE */
  583. .light-theme #player-container.h-box + .h-box {
  584. border: 1px solid green !important;
  585. }
  586. .light-theme #player-container.h-box + .h-box h1  {
  587. }
  588.  
  589.  
  590. /* COLOR == LIGHT = INFOS + COMMENTS */
  591.  
  592. .light-theme .h-box + .pure-g {
  593. /* border: 1px dotted green !important; */
  594. }
  595. .light-theme .h-box + .pure-g > div {
  596.  
  597. }
  598. .light-theme .light-theme .pure-u-lg-3-5 {
  599. }
  600. .light-theme .pure-u-lg-3-5 .h-box {
  601. }
  602. .light-theme .pure-u-lg-3-5 .h-box > a ,
  603. .light-theme .pure-u-lg-3-5 .h-box > p ,
  604. .light-theme .pure-u-lg-3-5 .h-box > #description-box ,
  605. .light-theme .pure-u-lg-3-5 .h-box > hr {
  606.  
  607. }
  608.  
  609. /* COLOR == LIGHT = TAB - DESCRIPTION TAB */
  610. .light-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:first-of-type + .pure-u-1 {
  611.     background: white !important;
  612. }
  613. .light-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:first-of-type + .pure-u-1:hover  {
  614.     background: white !important;
  615. }
  616. .light-theme .pure-u-lg-3-5 .h-box > #description-box#description-box:before  {
  617. background: #C6C3C3 !important;
  618. }
  619. .light-theme .pure-u-lg-3-5 .h-box > #description-box#description-box:hover:before  {
  620.     color: white !important;
  621.     background: red !important;
  622. }
  623.  
  624. /* COLOR == LIGHT = TAB - COMMENTS TABS */
  625. .light-theme .pure-u-lg-3-5 .h-box > #comments  {
  626.     background: white !important;
  627. }
  628. .light-theme .pure-u-lg-3-5 .h-box > #comments:hover  {
  629.     background: white !important;
  630. }
  631. .light-theme .pure-u-lg-3-5 .h-box > #comments:before  {
  632.     background: #C6C3C3 !important;
  633. }
  634. .light-theme .pure-u-lg-3-5 .h-box > #comments:hover:before  {
  635. color: white !important;
  636.     background: red !important;
  637. }
  638.  
  639.  
  640. /* COLOR == LIGHT = TAB - RELATED VIDEO */
  641. .light-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type  {
  642.     background: white !important;
  643. }
  644. .light-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type:hover  {
  645.     background: white !important;
  646. }
  647. .light-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type:before  {
  648.     background: #C6C3C3 !important;
  649. }
  650. .light-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type:hover:before  {
  651.     color: white !important;
  652.     background: red !important;
  653. }
  654.  
  655. .light-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type:not(:hover) .h-box > h5.pure-g ,
  656. .light-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type:not(:hover) .h-box > a {
  657.  
  658. }
  659.  
  660.  
  661. .light-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type .h-box > a{
  662.     border: 1px solid #222 !important;
  663. }
  664. .light-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type .h-box > h5.pure-g {
  665.     background: #C6C3C3 !important;
  666. }
  667. .light-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type div.thumbnail {
  668. }
  669. .light-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type div.thumbnail img.thumbnail {
  670. }
  671.  
  672. .light-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type div.thumbnail .length {
  673. }
  674.  
  675. .light-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type a > p {
  676. }
  677. /* COLOR == LIGHT = INFOS STATS ETC  - BOTTOM */
  678. .light-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:first-of-type {
  679.     border: 1px solid #333 !important;
  680.     background: white !important;
  681. }
  682. .light-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:first-of-type:hover {
  683.     border: 1px solid #333 !important;
  684. }
  685. .light-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:first-of-type:not(:hover):before {
  686.     content: "⚙️" !important;
  687.     background: #C6C3C3 !important;
  688. }
  689. .light-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:first-of-type:hover:before {
  690.     content: "⚙️" !important;
  691.     background: #C6C3C3 !important;
  692. }
  693. .light-theme #watch-on-youtube{
  694.     background: #C6C3C3 !important;
  695. }
  696. .light-theme #watch-on-youtube:before{
  697.     content: "." !important;
  698.     color: transparent !important;
  699.     background-image: url("https://duckduckgo.com/assets/icons/favicons/youtube.png") !important;
  700.     background-repeat: no-repeat !important;
  701. }
  702. /* COLOR == LIGHT = FOOTER */
  703. .light-theme footer {
  704.     background: #111 !important;
  705.     border: 1px solid #333 !important;
  706. }
  707. .light-theme footer:hover {
  708.     background: #111 !important;
  709.     border: 1px solid #333 !important;
  710. }
  711. .light-theme footer::before {
  712.     content: "GhitHub";
  713.     color: white !important;
  714.     background: #111 !important;
  715. }
  716. .light-theme footer:not(:hover) .ion-logo-github::before {
  717.     content: "";
  718. }
  719.  
  720. /* == END - COLOR == LIGHT === */
  721.  
  722. /* ==== COLOR == DARK ==== */
  723. /* COLOR == DARK = VID PLAYER */
  724. .dark-theme .vjs-poster {
  725.     background-color: #000000;
  726. }
  727. .dark-theme #player-container.h-box #player.on-video_player.video-js.player-style-invidious {
  728.     background-color: #000;
  729. }
  730. /* COLOR == DARK = TITLE */
  731. .dark-theme #player-container.h-box + .h-box {
  732.     background-color: rgba(21, 21, 21, 1) !important;
  733. }
  734. .dark-theme #player-container.h-box + .h-box h1  {
  735. }
  736.  
  737. /* COLOR == DARK = INFOS + COMMENTS */
  738.  
  739. .dark-theme .h-box + .pure-g {
  740. /* border: 1px dotted green !important; */
  741. }
  742. .dark-theme .h-box + .pure-g > div {
  743.  
  744. }
  745. .dark-theme .dark-theme .pure-u-lg-3-5 {
  746. }
  747. .dark-theme .pure-u-lg-3-5 .h-box {
  748. }
  749. .dark-theme .pure-u-lg-3-5 .h-box > a ,
  750. .dark-theme .pure-u-lg-3-5 .h-box > p ,
  751. .dark-theme .pure-u-lg-3-5 .h-box > #description-box ,
  752. .dark-theme .pure-u-lg-3-5 .h-box > hr {
  753.  
  754. }
  755.  
  756. /* COLOR == DARK = TAB - DESCRIPTION TAB */
  757. .dark-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:first-of-type + .pure-u-1 {
  758.     background-color: rgba(21, 21, 21, 1) !important;
  759. }
  760. .dark-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:first-of-type + .pure-u-1:hover  {
  761. /* background: white !important; */
  762. }
  763. .dark-theme .pure-u-lg-3-5 .h-box > #description-box#description-box:before  {
  764.     background-color: rgba(21, 21, 21, 1) !important;
  765. }
  766. .dark-theme .pure-u-lg-3-5 .h-box > #description-box#description-box:hover:before  {
  767. color: white !important;
  768.     background-color: red !important
  769. }
  770.  
  771. /* COLOR == DARK = TAB - COMMENTS TABS */
  772. .dark-theme .pure-u-lg-3-5 .h-box > #comments  {
  773.     background-color: rgba(21, 21, 21, 1) !important;
  774. }
  775. .dark-theme .pure-u-lg-3-5 .h-box > #comments:hover  {
  776.     background-color: rgba(21, 21, 21, 1) !important;
  777. }
  778. .dark-theme .pure-u-lg-3-5 .h-box > #comments:before  {
  779.     background-color: rgba(21, 21, 21, 1) !important;
  780. }
  781. .dark-theme .pure-u-lg-3-5 .h-box > #comments:hover:before  {
  782. color: white !important;
  783.     background-color: red !important
  784. }
  785.  
  786.  
  787. /* COLOR == DARK = TAB - RELATED VIDEO */
  788. .dark-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type  {
  789.     background-color: rgba(21, 21, 21, 1) !important;
  790. }
  791. .dark-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type:hover  {
  792.     background-color: rgba(21, 21, 21, 1) !important;
  793. }
  794. .dark-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type:before  {
  795.     background-color: rgba(21, 21, 21, 1) !important;
  796. }
  797. .dark-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type:hover:before  {
  798. color: white !important;
  799.     background-color: red !important;
  800. }
  801.  
  802. .dark-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type:not(:hover) .h-box > h5.pure-g ,
  803. .dark-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type:not(:hover) .h-box > a {
  804.  
  805. }
  806.  
  807.  
  808. .dark-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type .h-box > a{
  809.     border: 1px solid #222 !important;
  810. }
  811. .dark-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type .h-box > h5.pure-g {
  812.     background-color: rgba(21, 21, 21, 1) !important;
  813. }
  814. .dark-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type div.thumbnail {
  815. }
  816. .dark-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type div.thumbnail img.thumbnail {
  817. }
  818.  
  819. .dark-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type div.thumbnail .length {
  820. }
  821.  
  822. .dark-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type a > p {
  823. }
  824. /* COLOR == DARK = INFOS STATS ETC  - BOTTOM */
  825. .dark-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:first-of-type {
  826.     border: 1px solid #333 !important;
  827.     background-color: rgba(21, 21, 21, 1) !important;
  828. /* border: 1px solid red !important; */
  829. }
  830. .dark-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:first-of-type:hover {
  831. /*     border: 1px solid #333 !important; */
  832.     border: 1px solid green !important;
  833. }
  834. .dark-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:first-of-type:not(:hover):before {
  835. content: "⚙️" !important;
  836.     background-color: rgba(21, 21, 21, 1) !important;
  837.     border: 1px solid red !important;
  838. }
  839. .dark-theme .h-box + .pure-g .pure-u-1.pure-u-lg-1-5:first-of-type:hover:before {
  840. content: "⚙️" !important;
  841.     background-color: rgba(21, 21, 21, 1) !important;
  842.     border: 1px solid green !important;
  843. }
  844. .dark-theme #watch-on-youtube{
  845.     background-color: rgba(21, 21, 21, 1) !important;
  846. }
  847. .dark-theme #watch-on-youtube:before{
  848.     content: "." !important;
  849.     color: transparent !important;
  850.     background-image: url("https://duckduckgo.com/assets/icons/favicons/youtube.png") !important;
  851.     background-repeat: no-repeat !important;
  852. }
  853. /* COLOR == DARK = FOOTER */
  854. .dark-theme footer {
  855.     background-color: rgba(21, 21, 21, 1) !important;
  856.     border: 1px solid #333 !important;
  857. }
  858. .dark-theme footer:hover {
  859.     background-color: rgba(21, 21, 21, 1) !important;
  860.     border: 1px solid #333 !important;
  861. }
  862. .dark-theme footer::before {
  863.     content: "GhitHub";
  864.     color: white !important;
  865.     background: #111 !important;
  866. }
  867. .dark-theme footer:not(:hover) .ion-logo-github::before {
  868.     content: "";
  869. }
  870.  
  871.  
  872. /* === END == COLOR = DARK ==== */
  873. }
  874.  
  875. @-moz-document url-prefix("https://redirect.invidious.io/watch?") {
  876. /* START - URL-PREF - INVIDOUS REDIRECT LIST */
  877.  
  878. /* TEST LINK:
  879. https://redirect.invidious.io/watch?v=l19MJbo7a3Y&listen=false 
  880. ==== */
  881. .story {
  882. float: left !important;
  883.     margin: 0  -20vw 0 0 !important;
  884.     padding: 20px  !important;
  885.     text-align: center;
  886. border: 1px solid #333 !important;
  887. }
  888. /* INSTANCES GO */
  889. #instances-tbody .column-center>a:visited {
  890.     color: red !important;
  891. }
  892.  
  893.  
  894. /* END - URL-PREF - INVIDOUS REDIRECT LIST */
  895. }
  896.  
  897.  
  898. /* ===  END  ===   ALL ==== */