☰

Redgifs video immersive

video full height in redgifs

// ==UserScript==
// @name               Redgifs video immersive
// @namespace          https://greasyfork.org/users/821661
// @match              https://www.redgifs.com/*
// @grant              none
// @version            0.2
// @author             hdyzen
// @description        video full height in redgifs
// @license            MIT
// ==/UserScript==
'use strict';

function addCSS(text) {
    document.documentElement.insertAdjacentHTML('beforeend', `<style rel='stylesheet'>${text}</style>`);
}
addCSS(`
:root {
    --sidebar-width: 80px !important;
    --tabs-height: 46px !important;
    --top-nav-height: 68px !important;
}
.desktop {
    .topNav {
        display: flex !important;
        justify-content: space-between !important;
        height: var(--top-nav-height) !important;
        max-height: var(--top-nav-height) !important;
    }
    .topNav-wrap {
        display: contents !important;
        > div:not([class]) {
            display: none !important;
        }
        > [class*='burgerButton'] {
            position: unset !important;
            width: 36px !important;
            transform: unset !important;
        }
        > .SearchInput {
            margin-left: 50px !important;
        }
    }
    .ApplicationFooter {
        width: var(--sidebar-width) !important;
    }
    .nav .routeWrapper {
        margin-left: var(--sidebar-width) !important;
    }
    .mainLogo {
        margin: unset !important;
    }
    .nav .routeWrapper {
        max-width: unset !important;
    }
    .page.wide {
        width: 100% !important;
        max-width: 100% !important;
    }
    .previewFeed,
    .page.feed,
    .middle,
    .watchPage .center {
        width: 100% !important;
        max-width: 100% !important;
    }
    .skyWrapper {
        > .left.side,
        > .right.side {
            display: none !important;
        }
        .watchPage {
            margin-top: 0 !important;
            --tabs-height: 0px !important;
        }
        .Player {
            height: 100vh !important;
            max-height: 100vh !important;
            margin-block: 6px !important;

            &:first-child {
                height: calc(100vh - (var(--top-nav-height) + var(--tabs-height))) !important;
                margin-top: 0 !important;
            }

            .Video-ProgressBar {
                bottom: 18px !important;
            }
        }
        .previewFeed > :not(.Player) {
            display: none !important;
        }
        .tabs {
            margin-block: 0 !important;
            height: var(--tabs-height) !important;
        }
        .Player-SideBarWrap {
            background-color: rgba(255, 255, 255, 0.05) !important;
            padding: 10px 0 !important;
            border-radius: 10px !important;
            right: -52px !important;
        }
    }
    .Player-SideBarWrap {
        top: 0 !important;
    }
}
`);