player2.0youtube by mason20121981

/* ==UserStyle==
@name           Minimal YouTube Player
@description    A minimalist YouTube player inspired by the modern, clean design shown in the example image.
@namespace      https://userstyles.world/user/yourusername
@homepageURL    https://github.com/yourusername/MinimalYouTubePlayer
@supportURL     https://github.com/yourusername/MinimalYouTubePlayer/issues
@version        1.0.0
@license        MIT
@preprocessor   stylus

@var color    primaryColor       "🎨 Play Button Border Color" #ffffff
@var color    progressColor      "🎨 Progress Bar Color" #e53935
@var checkbox hideLogo           "❌ Hide YouTube Logo" 1
==/UserStyle== */

@-moz-document domain("youtube.com") {
    /* Main player background and border */
    #movie_player.html5-video-player {
        background-color: #111;
        box-shadow: none;
        border-radius: 8px;
        overflow: hidden;
    }

    /* Styling for large play button */
    .ytp-large-play-button, .ytp-play-button {
        border: 3px solid primaryColor;
        background-color: transparent;
        border-radius: 50%;
        width: 80px;
        height: 80px;
        transition: transform 0.2s ease-in-out;
    }

    .ytp-large-play-button:hover {
        transform: scale(1.1);
    }

    /* Center play icon styling */
    .ytp-large-play-button svg {
        fill: #fff;
        opacity: 0.8;
    }

    /* Progress bar style */
    .ytp-progress-bar-container {
        background-color: #333;
    }

    .ytp-play-progress {
        background-color: progressColor;
        height: 4px;
    }

    /* Control bar background */
    .ytp-chrome-bottom {
        background: rgba(0, 0, 0, 0.6);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Volume, settings, and other buttons styling */
    .ytp-button {
        color: rgba(255, 255, 255, 0.8);
    }

    .ytp-button:hover {
        color: #fff;
    }

    /* Hide YouTube logo if hideLogo is set to true (1) */
    .ytp-youtube-button {
        display: hideLogo ? none : initial;
    }

    /* Time display styling */
    .ytp-time-current, .ytp-time-duration {
        color: #ccc;
        font-weight: 500;
    }
}