Konosuba background by SpaceDuck13

/* ==UserStyle==
@name       Konosuba background
@version    20240924.16.02
@namespace  ?
==/UserStyle== */

@-moz-document domain("youtube.com") {
/* the following bellow will change the wallpaper */
ytd-app {
    background-color: white;
    background-image: url(https://i.imgur.com/gzT1ibM.png) !important;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


/* the following bellow will get rid of the mini guide renderer.*/
ytd-mini-guide-renderer {
    display: none;
}

/* this will change some variables*/
:root {
    /* the text bellow is for making the background of the menu transparent*/
    --yt-spec-base-background: transparent !important;
    
    /* And the bellow is to change some variables associated with dark mode to make it more bright*/
    --yt-spec-text-primary: black !important; 
    --yt-spec-brand-icon-active: black !important;
    --yt-spec-brand-icon-inactive: black !important;
    --yt-spec-text-primary-inverse: white !important;

}

/* This will make the masthead transparent*/
[dark] {
  --yt-spec-base-background: transparent !important; 
  --ytd-searchbox-background: white !important;
}

/* The text bellow is to make the icons more consistent with the bright theme I'm going for */
svg {
    color: black;
}


/* The text bellow will make the masthead transparent unless you hover your mouse over it */
/* After revision, i decided to comment it out */

/*ytd-masthead {
    opacity: 0
}

ytd-masthead:hover {
    opacity: 1;
}*/
}

@-moz-document url-prefix("https://www.youtube.com/watch") {
/*
The bellow will give a background to #guide content when you're in a video.
The intention is making it easier to read
*/

#guide-content.ytd-app {
    --yt-spec-base-background: white !important;
}

/* This will make the masthead be aways visiable when watching a video */
ytd-masthead{
    opacity: 1;
}

/* the code bellow is to make the masthead be always visible when watching a video */
ytd-masthead[theater]{
    opacity: 1;
  --yt-spec-base-background: black!important; 
  --ytd-searchbox-background: black !important;
  --yt-spec-text-primary: white !important; 
}

/* the code bellow is to enter the masthead into dark mode when the video is in theater mode */
ytd-masthead[theater] svg {
    color: white;
}
}