Redgifs video immersive

video full height in redgifs

  1. // ==UserScript==
  2. // @name Redgifs video immersive
  3. // @namespace https://greasyfork.org/users/821661
  4. // @match https://www.redgifs.com/*
  5. // @grant none
  6. // @version 0.2
  7. // @author hdyzen
  8. // @description video full height in redgifs
  9. // @license MIT
  10. // ==/UserScript==
  11. 'use strict';
  12.  
  13. function addCSS(text) {
  14. document.documentElement.insertAdjacentHTML('beforeend', `<style rel='stylesheet'>${text}</style>`);
  15. }
  16. addCSS(`
  17. :root {
  18. --sidebar-width: 80px !important;
  19. --tabs-height: 46px !important;
  20. --top-nav-height: 68px !important;
  21. }
  22. .desktop {
  23. .topNav {
  24. display: flex !important;
  25. justify-content: space-between !important;
  26. height: var(--top-nav-height) !important;
  27. max-height: var(--top-nav-height) !important;
  28. }
  29. .topNav-wrap {
  30. display: contents !important;
  31. > div:not([class]) {
  32. display: none !important;
  33. }
  34. > [class*='burgerButton'] {
  35. position: unset !important;
  36. width: 36px !important;
  37. transform: unset !important;
  38. }
  39. > .SearchInput {
  40. margin-left: 50px !important;
  41. }
  42. }
  43. .ApplicationFooter {
  44. width: var(--sidebar-width) !important;
  45. }
  46. .nav .routeWrapper {
  47. margin-left: var(--sidebar-width) !important;
  48. }
  49. .mainLogo {
  50. margin: unset !important;
  51. }
  52. .nav .routeWrapper {
  53. max-width: unset !important;
  54. }
  55. .page.wide {
  56. width: 100% !important;
  57. max-width: 100% !important;
  58. }
  59. .previewFeed,
  60. .page.feed,
  61. .middle,
  62. .watchPage .center {
  63. width: 100% !important;
  64. max-width: 100% !important;
  65. }
  66. .skyWrapper {
  67. > .left.side,
  68. > .right.side {
  69. display: none !important;
  70. }
  71. .watchPage {
  72. margin-top: 0 !important;
  73. --tabs-height: 0px !important;
  74. }
  75. .Player {
  76. height: 100vh !important;
  77. max-height: 100vh !important;
  78. margin-block: 6px !important;
  79.  
  80. &:first-child {
  81. height: calc(100vh - (var(--top-nav-height) + var(--tabs-height))) !important;
  82. margin-top: 0 !important;
  83. }
  84.  
  85. .Video-ProgressBar {
  86. bottom: 18px !important;
  87. }
  88. }
  89. .previewFeed > :not(.Player) {
  90. display: none !important;
  91. }
  92. .tabs {
  93. margin-block: 0 !important;
  94. height: var(--tabs-height) !important;
  95. }
  96. .Player-SideBarWrap {
  97. background-color: rgba(255, 255, 255, 0.05) !important;
  98. padding: 10px 0 !important;
  99. border-radius: 10px !important;
  100. right: -52px !important;
  101. }
  102. }
  103. .Player-SideBarWrap {
  104. top: 0 !important;
  105. }
  106. }
  107. `);