Skip to content

YouTube reAnimated by ivaniku

Details

Authorivaniku

LicenseMIT

Categoryyoutube

Created

Updated

Size2.5 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Adds a bit more animations to YouTube, and some minor look imporvements too

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name         youtube.com
@version      20220325.16.58
@namespace    userstyles.world/user/ivaniku
@description  Adds a bit more animations to YouTube, and some minor look imporvements too
@author       ivaniku
@license      MIT
==/UserStyle== */

@-moz-document domain("youtube.com") {
@keyframes inboxanim {
    from {
        transform: scale(0.9, 0.9);
        opacity: 0%;
    }
    to {
        transform: scale(1, 1);
        opacity: 100%;
    }
}

@keyframes elementanim {
    from {
        transform: scale(0.9, 0.9);
        opacity: 0%;
    }
    to {
        transform: scale(1, 1);
        opacity: 100%;
    }
}

#logo {
    transform: scale(1, 1);
    transition: 0.5s;
}

#logo:hover {
    transform: scale(1.1, 1.1);
    transition: 0.5s;
}

#img,
#movie_player {
    border-radius: 5px
}

#sections {
    overflow-x: hidden;
}

ytd-simple-menu-header-renderer,
ytd-toggle-theme-compact-link-renderer {
    animation-name: elementanim;
    animation-duration: 0.25s;
    background-color: rgba(244, 244, 244, .03);
    transition: 0.5s;
}

ytd-rich-grid-media {
    animation-name: elementanim;
    animation-duration: 0.5s;
}

ytd-multi-page-menu-renderer,
ytd-notification-renderer {
    border-radius: 5px;
    animation-name: inboxanim;
    animation-duration: 0.5s;
    transition: 0.5s;
}

yt-icon-button {
    transform: scale(1, 1);
    transition: 0.15s;
}

yt-icon-button:hover {
    transform: scale(1.25, 1.25);
    transition: 0.15s;
}

ytd-thumbnail-overlay-hover-text-renderer {
    border-radius: 5px !important;
}

ytd-thumbnail-overlay-bottom-panel-renderer {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px
}

ytd-toggle-theme-compact-link-renderer {
    width: 60px;
    height: 60px;
    border-radius: 5px;
    margin: 5px;
}

tp-yt-paper-item {
    transform: translate(0px);
    transition: 0.25s;
    animation-name: inboxanim;
    animation-duration: 0.5s;
}

tp-yt-paper-item:hover {
    transform: translate(5px);
    transition: 0.25s;
}

ytd-compact-radio-renderer,
ytd-compact-video-renderer,
ytd-compact-playlist-renderer {
    border-radius: 5px;
    transform: translate(0px);
    transform: scale(1, 1);
    transition: 0.3s;
    margin: 10px;
}

ytd-compact-radio-renderer:hover,
ytd-compact-video-renderer:hover,
ytd-compact-playlist-renderer:hover {
    transform: scale(1.1, 1.1);
    transition: 0.2s;
}
}

Reviews

No reviews yet.