Ashe by ashiryun

/* ==UserStyle==
@name         Ashe
@version      20220613.23.44
@namespace    userstyles.world/user/ashiryun
@description  a
@author       ashiryun
@license      No License
==/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;
  }

    /* 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;
  }
}

@-moz-document domain("twitter.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://pbs.twimg.com/media/DxCTexnV4AAA4Qs.jpg:orig);
    --prichan-logo: url(https://pbs.twimg.com/media/DxCRtnUVAAU9jml.png:orig);
    --mirai-chan: url(https://pbs.twimg.com/media/DxCTT2LVAAAx_K6.png:orig);
    --emo-chan: url(https://pbs.twimg.com/media/DxCTakbU0AA9jxc.png:orig);
    --prichan-star: url(https://pbs.twimg.com/media/DxCngiyUYAASHAR.png:orig);
    --button-color: #065fd4;
    --button-color-light: #2c6dc4;
  }

    /* animation */
  .spinner-centered
  {
    display: none;
  }

  .sign-in:after
  {
    top: -50%;
    margin-right: -110px;
    position: absolute;
    animation: loading01 1.4s ease-out 0.7s infinite;
    content: "";
    width: 158px;
    height: 178px;
    background: var(--emo-chan);
    z-index: 10000;
    display: table;
  }

  .js-signin-ui:after
  {
    top: -50%;
    margin-left: -110px;
    position: absolute;
    animation: loading01 1.4s ease-out 0s infinite;
    content: "";
    width: 124px;
    height: 178px;
    background: var(--mirai-chan);
    z-index: 10000;
    display: block;
  }

    @  keyframes loading01
  {
    0% {
            top: calc(50%);
  }

  8%
  {
    top: calc(50% - 10px);
  }

  16%
  {
    top: calc(50%);
  }

  24%
  {
    top: calc(50% - 10px);
  }

  32%
  {
    top: calc(50%);
  }

  40%
  {
    top: calc(50% - 10px);
  }

  48%
  {
    top: calc(50%);
  }

  100%
  {
    top: calc(50%);
  }
}

    /* button */
.EdgeButton--primary
{
  background-color: var(--button-color);
}

.EdgeButton--primary:active,
    .EdgeButton--primary:hover,
    .EdgeButton--primary:focus
{
  background-color: var(--button-color-light);
}

    /* top navbar */
.global-nav-inner
{
  background: var(--primary);
}

.SearchNavigation-canopy
{
  background-color: var(--primary-light);
}

    /* color in navbar */
.nav > li
{
  color: var(--white);
}

#global-actions > li:hover > a,
    #global-actions > li > a:focus,
    #global-actions > li.active .text,
    .DashUserDropdown.dropdown-menu .nightmode-toggle .Icon,
    .nav.right-actions > li > a:hover,
    .nav.right-actions > li > a:focus,
    #global-actions > li.active > a .u-textUserColor
{
  color: white !important;
}

    /* background */
body
{
  background-image: var(--background) !important;
}

    /* logo */
.bird-topbar-etched:before
{
  display: none;
}

.bird-topbar-etched,
    .compose-title-text
{
  background: var(--prichan-logo);
  background-size: contain;
  display: inline-block;
  height: calc(100% - 6px) !important;
  width: 150px !important;
  margin-top: 3px;
  color: transparent;
}

@media screen and (min-width: 1236px)
{
  .bird-topbar-etched
  {
    margin-left: -104px;
  }
}

    /**
     * tweetdeck.twitter.com
     */
body
{
  background: var(--primary-light);
}

::selection
{
  background: var(--primary-light);
}

    /* columns container */
.app-columns-container,
    .app-content
{
  background-color: var(--white);
}

    /* column header */
.column-header,
    .column-header-temp,
    .column-header .txt-mute,
    .column-header-title .txt-mute,
    .column-header .icon,
    .compose-text-title,
    .column-title-back
{
  background-color: var(--primary);
  color: var(--white);
}

.column-title-edit-box
{
  background-color: var(--white);
}

    /* column body *...