Sliding Bar YouTube by Chichau777

/* ==UserStyle==
@name         Minimize youtube header
@version      20211226.07.29
@namespace    userstyles.world/user/pushback
@description  [en]Minimize the YouTube header and display it with the mouse hover.

[jp]YouTubeのヘッダーを最小化し、マウスホバーで表示する。
@author       pushback
@license      No License
==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com/watch") {
    #masthead-container {
        height: 7px;
        overflow: hidden;
        position: relative; /* Asegura que el contenedor tenga un posicionamiento relativo */
        transform: translateY(-20%); /* Posición inicial mucho más baja para una mejor visibilidad */
        transition: transform 0.5s ease; /* Transición suave al restablecer la posición */
    }

    /* Aplica la animación cuando se pasa el cursor por encima */
    #masthead-container:hover {
        animation: slideDown 0.5s ease forwards;
        transform: translateY(0); /* Desliza hacia abajo */
        height: auto;
    }

    #page-manager {
        margin-top: 0 !important;
    }

    #primary {
        margin-top: 0 !important;
        padding-top: 7px !important;
    }

    /* Definición de la animación */
    @keyframes slideDown {
        from {
            transform: translateY(-20%);
        }
        to {
            transform: translateY(0);
        }
    }

    /* Restablece la posición cuando se deja de hacer hover */
    #masthead-container:not(:hover) {
        transform: translateY(-20%); /* Vuelve a la posición inicial más baja */
    }
}