キラッとプリチャン (Kiratto PriChan) v2 by sodra

/* ==UserStyle==
@name           キラッとプリチャン (Kiratto PriChan)v2
@namespace      USO Archive
@author         さくらもち（sakuramochi）
@description    `<em>Japanese:</em>いろいろなウェブサイトをプリ☆チャンにプリティーリメイクするスタイルシートです。※テーマカラーはみらいちゃんのリボンの色です。🎀✨■スタイルのインストール方法1. Stylus というブラウザの拡張機能をインストールします。(stylish ではなく Stylus を使用してください)- <a href="https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne">Stylus - Chrome Web Store</a>- <a href="https://addons.mozilla.org/ja/firefox/addon/styl-us/">Stylus – Get this Extension for 🦊 Firefox (ja)</a>2. このページをリロードすると「Install Style (スタイルをインストールする)」というボタンが現れるので、クリックしてインストールします。3. <a href="https://www.youtube.com/">YouTube</a> などを開くと、プリ☆チャンになっているはずです！<em>English:</em>This stylesheet changes several websites to Pri☆Chan.Hint: The primary color is the one of Mirai's ribbon.🎀✨■How to install1. Install the browser extension, Stylus. (You must use Stylus not stylish.)2. Reload this page, then you will see the button "Install Style". So click it to install this style.3. You will be able to go to Pri☆Chan here: <a href="https://www.youtube.com/">YouTube</a>!`
@version        20210516.6.49
@license        CC-BY-4.0
@preprocessor   uso
==/UserStyle== */
/* ==UserStyle==
@name           キラッとプリチャン (Kiratto PriChan)
@namespace      github.com/sakuramochi0/prichan-stylesheet
@version        2.0.5
@description    いろいろなウェブサイトをプリ☆チャンに変身させるスタイルです。(Style to change websites to Pri☆Chan.)
@author         sakuramochi <sakuramochi.mochi.0@gmail.com>

changelog:
v2.0.6 - 2021-05-16 - Fix the issue where YouTube logo is above the Prichan logo.
v2.0.5 - 2021-01-17 - Fix the regression of logo images and change the image host to Google Cloud Storage.
v2.0.4 - 2020-08-02 - Fix the same problem, the background, and sidebar. (Thank you for reporting bugs. @r4ymond2 @jdramirez165)
v2.0.3 - 2020-07-12 - Fix the problem where extra padding is appended to normal icon.
v2.0.2 - 2019-02-23 - Fix the header color and the sidebar icon padding.
v2.0.1 - 2019-01-17 - Fix some URLs.
v2.0.0 - 2019-01-17 - Support twitter.com & tweetdeck.twitter.com.
v1.2.1 - 2019-01-06 - Fix search box background color.
v1.2.0 - 2019-01-06 - Support music.youtube.com.
v1.1.1 - 2019-01-04 - Fix the transparent sidebar text problem on the desktop version.
v1.1.0 - 2019-01-04 - Support m.youtube.com.
v1.0.0 - 2019-01-04 - Initial release.
==/UserStyle== */

@-moz-document domain("youtube.com") {
    /* define variables */
    :root {
        --primary: #ff508c;
        --primary-light: #ffabc8;
        --white: rgba(255, 255, 255, 0.8);
        --background: linear-gradient(var(--white), var(--white)), url(https://storage.googleapis.com/sakuramochi-prichan/prichan-background.jpg);
        --prichan-logo: url(https://storage.googleapis.com/sakuramochi-prichan/prichan-logo.png);
        --button-color: #065fd4;
        --button-color-light: #2c6dc4;
        --altpink: #C23C6B;
        --yt-spec-base-background: #FFE0F2;
        --yt-lightsource-primary-title-color: #B32557;
    }

    /* main style */
    body,
    ytd-masthead {
        --yt-swatch-primary: var(--primary) !important;
        --yt-swatch-primary-darker: var(--primary) !important;
        --yt-main-app-background: var(--background);
        --yt-main-app-background-tmp: var(--background);
        --yt-app-background: var(--background);
        --yt-sidebar-background: var(--background);
        --yt-swatch-icon-color: var(--white) !important;
        --yt-guide-background: var(--primary-light);
    }

    /* background */
    ytd-app,
    #guide-content {
        background-image: var(--background) !important;
    }

    /* button */
    paper-button {
        padding-right: 20px !important;
        padding-left: 20px !important;
        border-radius: 1.5em !important;
        --yt-spec-brand-button-background: var(--yt-spec-icon-active-button-link) !important;
    }

    /* logo */
    #logo {
        width: 140px !important;
        height: 35px !important;
        background-image: var(--prichan-logo);
        background-size: cover;
    }

    #logo-icon {
        display: none;
    }

    #country-code {
        color: var(--white) !important;
    }

    /* header */
    #masthead {
        background: var(--primary);
    }

    #masthead yt-icon {
        color: var(--white);
    }

    /* search box */
    ytd-searchbox {
        --yt-searchbox-background: var(--white);
        --yt-searchbox-text-color: var(--yt-searchbox-primary-color);
        --ytd-searchbox-legacy-border-color: var(--ytd-searchbox-border-color);
        --ytd-searchbox-legacy-button-border-color: var(--ytd-searchbox-border-color);
        --ytd-searchbox-legacy-button-color: var(--primary-light);
        --ytd-searchbox-legacy-button-icon-color: #333;
    }

    /* side bar icon */
    .guide-icon,
    .yt-img-shadow {
        margin-left: -5px;
        color: var(--white) !important;
        background-color: var(--primary);
        border-radius: 5px;
    }

    app-drawer[opened]  {
        margin-right: 20px !important;
    }

    yt-icon.guide-icon.style-scope.ytd-guide-entry-renderer,
    ytd-mini-guide-renderer yt-icon {
        padding: 0.5rem;
    }

    #guide-icon {
        --yt-swatch-text: var(--white);
    }

    /* button */
    paper-button.ytd-subscribe-button-renderer {
        background: var(--button-color);
    }

    /**
     * for m.youtube.com
     */
    .header-bar,
    .scbrr-tabs,
    ytm-header-fab-renderer,
    .playlist-play-all-button {
        background-color: var(--primary) !important;
    }

    .header-bar h1.title {
        color: transparent;
    }

    /**
     * for music.youtube.com
     */
    html {
        /* bottom bar */
        --ytmusic-player-bar-background-color: var(--primary-light) !important;
        --ytmusic-title-2_-_color: var(--ytmusic-color-text-1) !important;

        /* context menu */
        --ytmusic-menu-item-text_-_color: var(--ytmusic-color-white) !important;

        /* text color */
        --ytmusic-color-grey-5: var(--ytmusic-color-grey-2) !important;
        --ytmusic-color-grey-6: var(--ytmusic-color-grey-3) !important;
        --ytmusic-color-text-1: var(--ytmusic-color-black) !important;
        --ytmusic-color-text-2: var(--ytmusic-color-grey-10) !important;
        --ytmusic-color-text-3: var(--ytmusic-color-grey-11) !important;
        --ytmusic-subtitle-2_-_color: var(--ytmusic-color-text-1) !important;

        /* icon color */
        --ytmusic-color-icon-inactive: var(--ytmusic-color-white);
    }

    /* background image */
    ytmusic-player-page,
    .ytmusic-entity-browse-page,
    .ytmusic-data-bound-detail-page-renderer,
    #header.ytmusic-data-bound-detail-page-renderer {
        background-image: var(--background);
    }

    /* header */
    ytmusic-nav-bar,
    #header.ytmusic-item-section-renderer {
        background-color: var(--primary) !important;
    }

    .ytmusic-nav-bar picture {
        display: none;
    }

    .ytmusic-nav-bar a {
        width: 140px !important;
        height: 35px !important;
        background-image: var(--prichan-logo);
        background-size: cover;
    }

    /* logo */
    #home-icon {
        width: 140px !important;
        height: 40px !important;
        background-image: var(--prichan-logo);
        background-size: cover;
    }

    #home-icon svg {
        display: none;
    }

    /* text color */
    ytmusic-player-bar,
    .ytmusic-player-bar {
        color: var(--ytmusic-color-white) !important;
    }

    .ytmusic-player-bar .yt-formatted-string,
    .yt-simple-endpoint.yt-formatted-string {
        color: var(--ytmusic-color-text-6) !important;
    }

    /* context menu */
    .ytmusic-menu-popup-renderer {
        --paper-listbox-background-color: var(--primary-light) !important;
    }

    /* search box */
    .ytmusic-search-suggestions-section,
    .ytmusic-nav-bar[opened] .search-box.ytmusic-search-box {
        background-color: var(--primary-light) !important;
    }
    
    /*Soda Tuning*/
    
    #voice-search-button.ytd-masthead{
        background-color: #ff508c;
    }
    
    #container.ytd-searchbox{
        background-color: #ffffff;
    }
    
    ytd-searchbox[system-icons] #search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox
    {
        color: #FFFFFF;
    }
    
    #guide-icon.ytd-masthead
    {
        color: #FFFFFF;
    }
    
    #left-arrow-button.yt-chip-cloud-renderer, #right-arrow-button.yt-chip-cloud-renderer
    {
        background-color: #FFABC8;
    }
    
    #right-arrow.yt-chip-cloud-renderer::before
    {
        background: linear-gradient(to left,#FFABC8 10%,rgba(249,249,249,0) 90%);
    }
    
    ytd-button-renderer #button.ytd-button-renderer
    {
        color: #ff508c;
    }
    
    ytd-rich-metadata-renderer
    {
        color: #ff508c;
    }
    
    #title.ytd-rich-metadata-renderer
    {
        color: #FFFFFF;
    }
    
    #subtitle.ytd-rich-metadata-renderer
    {
        color: #FFFFFF;
    }
    
    #call-to-action.ytd-rich-metadata-renderer
    {
        color: #FFFFFF;
    }
    
    ytd-browse[page-subtype="channels"]
    {
        background: #FFE8F5;
    }
    
    #tabs-inner-container.ytd-c4-tabbed-header-renderer
    {
        background-color: #FFE0F2;
    }
    
    #channel-header.ytd-c4-tabbed-header-renderer
    {
        background-color: #FFE0F2;
    }
    
    yt-chip-cloud-chip-renderer[chip-style="STYLE_DEFAULT"][selected], yt-chip-cloud-chip-renderer[chip-style="STYLE_HOME_FILTER"][selected]:hover, yt-chip-cloud-chip-renderer[chip-style="STYLE_DEFAULT"][selected]:focus, yt-chip-cloud-chip-renderer[chip-style="STYLE_HOME_FILTER"][selected]:focus
    {
        background-color: #FFFFFF;
        color: #000000;
    }
    
    /*New Yt Update*/

    /*Playlist banner*/
    .header.ytd-playlist-panel-renderer
    {
        background-color: #FFE0F2;
    }
    
    /*Color when hu*/
    ytd-playlist-panel-video-renderer[watch-color-update][can-reorder]:hover.dragging, ytd-...