GPCodeRewrites.css

/*--------change main color-----------*/
.backgroundContainer,
.dialog,
html {
  background-color: #000000;
}











/*----------------------------------------------MY CODE */
@import url("https://tywentghxst.github.io/goatsplusconfigs/ICONS4goatsplus.css");


/*------------------------SERVER ANNOUNCEMENTS------------------------*/
/*Server Under Maintenance*/
/**/
.emby-tabs-slider::before {
    content: "URL CHANGE (watch.fatgoats.xyz)";
    color: red;
    font-weight: bold;
    position: absolute;
    top: 0.5em;
    left: 0;
    width: 100%;
    text-align: center;
}

/**/








/*----------------------------------------------remove My Media title */
.section0 .sectionTitle {display: none}


/*----------------------------------------------removes my media titles below cards */
.section0 .cardText>.textActionButton {
    display: none;
}
.layout-tv .section0 .cardText {
    display: none;
}



/*-----------------------------------------------removes empty space on home page-----------------------------------------------*/
.sectionTitleContainer-cards {
    margin: 0;
    padding-top: 0;
}



/*----------------------------------------------Changes top my media cards (movies/shows/collections) */

.layout-desktop
.section0 .itemsContainer {
    align-items: center;
 justify-content: center;
    margin-top: 0px;
}

.layout-tv
.section0 .itemsContainer {
    align-items: center;
 justify-content: center;
    margin-top: 0px;
}

.layout-mobile
.section0 .itemsContainer {
    align-items: center;
 justify-content: center;
    margin-top: 0px;
}

.layout-tv
.section0 .overflowBackdropCard,
.section0 .overflowSmallBackdropCard {
    max-width: 21vw
}

.layout-mobile
.section0 .overflowBackdropCard,
.section0 .overflowSmallBackdropCard {
    max-width: 32vw
}

.layout-desktop
.section0 .overflowBackdropCard,
.section0 .overflowSmallBackdropCard {
    max-width: 8vw
}

.section0 .emby-scroller {
    margin-right: 0
}

.section0 .section0 .itemsContainer {
    flex-wrap: wrap
}

@media (max-width:75em) and (orientation:auto) {
    .section0 {
        display: none
    }
}





/*---------------------------DISABLED-------------------LOGIN PAGE*/

/*Narrow the login form, size according to display size (bigger on mobile)*/
#loginPage .readOnlyContent,
#loginPage form {
  max-width: 22em;
}

/*Hide "please login" text, margin is to prevent login form moving too far up*/
#loginPage h1 {
  display: none
}
#loginPage .padded-left.padded-right.padded-bottom-page {
  margin-top: 50px
}

/*Hide "manual" and "forgot" buttons}*/
#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
  display: none
}

/*Login background----DISABLED*/
/*
#loginPage {
  background: url(https://i.imgur.com/xAZT1qd.jpg) !important; 
  background-size: cover !important;
}
*/




/*----------------------------------------------APP LOGO*/
.adminDrawerLogo img { content: url(https://i.postimg.cc/5NfgYpv3/Picsart-23-02-07-13-32-51-156.png) !important; } imgLogoIcon { content: url(https://i.postimg.cc/5NfgYpv3/Picsart-23-02-07-13-32-51-156.png) !important; } .pageTitleWithLogo { background-image: url(https://i.postimg.cc/5NfgYpv3/Picsart-23-02-07-13-32-51-156.png) !important; }



/*----------------------------------------------Banner transparency and larger font, adjust both "size-adjust" and "size" to modify font size*/
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred {background:none; background-color:rgba(0, 0, 0, 0);}
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {background:none; background-color: rgba(0, 0, 0, 0);}
.headerTabs.sectionTabs {text-size-adjust: 110%;  font-size: 110%;}
.pageTitle {margin-top: auto; margin-bottom: auto;}
.emby-tab-button {padding: 1.75em 1.7em;}






/*----------------------------------------------Center the play and pause rewind and fast forward button (MOBILE)*/
div.videoOsdBottom.videoOsdBottom-maincontrols {
      
  /* ----- If you want bigger or smaller buttons, change these -----*/
  /* ----- please use vw values so they will scale with the window autoamtically -----*/
  /* ----- as you increase the sizes, decreaes the offset -----*/
  /* ----- and as you decrease the sizes, increase the offset -----*/
  --btn-size: 5vw;
  --font-size: 6vw;
  --ff-rw-offset: 28%;
  
  /* ----- set this to 1 if you want your buttons the same size ----- */
  /* ----- The larger the value, the bigger the play button relative to the ff/rw buttons ----- */
  --play-btn-multiplier: 2;
  
  /* ----- opacity of the buton's background, default 0 -----*/
  /* ----- change this if you want the buttons to have a faint background for better accessibility (recommended value 0.1) -----*/
  --button-background-opacity: 0;
  
}
div.videoOsdBottom.videoOsdBottom-maincontrols .btnPause {
  position: fixed;
  top: 50%;
  left: 50%;
  width: calc(var(--btn-size) * var(--play-btn-multiplier));
  height: calc(var(--btn-size) * var(--play-btn-multiplier));
  transform: translate(-50%, -50%);
}
div.videoOsdBottom.videoOsdBottom-maincontrols .btnFastForward {
  position: fixed;
  top: 50%;
  right: var(--ff-rw-offset);
  width: var(--btn-size);
  height: var(--btn-size);
  transform: translateY(-50%);
}
div.videoOsdBottom.videoOsdBottom-maincontrols .btnRewind {
  position: fixed;
  top: 50%;
  left: var(--ff-rw-offset);
  width: var(--btn-size);
  height: var(--btn-size);
  transform: translateY(-50%);
}
@media (max-width:50em) {
  div.videoOsdBottom.videoOsdBottom-maincontrols .btnFastForward,
  div.videoOsdBottom.videoOsdBottom-maincontrols .btnRewind {
   display: inline-flex !important;
  }
 }
div.videoOsdBottom.videoOsdBottom-maincontrols .btnPause > span {
  font-size: calc(var(--font-size) * var(--play-btn-multiplier));
}

div.videoOsdBottom.videoOsdBottom-maincontrols .btnRewind > span,
div.videoOsdBottom.videoOsdBottom-maincontrols .btnFastForward > span {
  font-size: var(--font-size);
}

div.videoOsdBottom.videoOsdBottom-maincontrols .btnRewind:not(:hover),
div.videoOsdBottom.videoOsdBottom-maincontrols .btnPause:not(:hover),
div.videoOsdBottom.videoOsdBottom-maincontrols .btnFastForward:not(:hover)
{
  background-color: rgba(0,0,0, var(--button-background-opacity));
}







/*---------------------DISABLED-------------------------Tv background wallpaper*/
/*
.layout-tv
.backgroundContainer {
  background-color: rgba(0, 0, 0, 0);
  background-image: url("https://i.postimg.cc/bvY9YSSN/imageonline-gifspeed-7675635-1.gif");
  filter: blur(1px);
  background-size: cover;
}*/


/*----------------------------------------------Remove Alphabet column for Tv*/
.layout-tv
.alphaPicker {display: none;}


/*----------------------------------------------center aligning posters on Tv*/
.layout-tv
.padded-right-withalphapicker {padding-right:4% !important;}


/*----------------------------------------------Item Page for TV - resize episode preview images in a more compact way*/
.layout-tv
.listItemImage.listItemImage-large.itemAction.lazy {height: 110px;}
.layout-tv
.listItem-content {height: 115px;}
.layout-tv
.secondary.listItem-overview.listItemBodyText {height: 61px; margin: 0;}


/*-----------------------------------------------Remove Underline on Hover-------------------------------*/
.itemAction:hover { text-decoration: none; }




/*-----------------------------------------------Removes 3 Dots from cards Mobile------------------------*/
button.listItemButton.itemAction.paper-icon-button-light {display: none;}



/*-----------------------------------------------Remove My Media Arrows----------------------------------*/
#homeTab > div > div.verticalSection.section0.emby-scroller-container > div.emby-scrollbuttons.padded-right {display: none;}






/*-----------------------------------------------Narrow the login form */
#loginPage .readOnlyContent, #loginPage form {max-width: 22em;}



/*-----------------------------------------------takes mobile posters from 3 to 2---------------------*/
.layout-mobile
.portraitCard {width: 50%;
}






/*-----------------------------------------------moves my media section up higher on tv*/
.layout-tv .section0 .itemsContainer {
    margin-top: -20px;
}



/*-----------------------------------------------moves home-favorites section up higher on tv*/
.layout-tv  .headerTabs.sectionTabs {
margin-top: -40px;
}



/*-----------------------------------------------moves movies and shows section page padding higher on tv*/
.layout-tv
.padded-top {
    padding-top: 0em;
}
.layout-tv
.padded-bottom {
    padding-bottom: 0em;
}




/*-----------------------------------------------fixes height on music player/remote control on mobile*/
.layout-mobile
.nowPlayingPageImageContainer {
    margin: 0px auto 2.5em;
}
.layout-mobile
.nowPlayingInfoButtons {
    margin-bottom: 78px;
}
.layout-mobile .playlistSectionButton {
    height: 8.2em;
}
.layout-mobile .playlistSection .playlist {
    bottom: 7.2em;
}
.nowPlayingBar .nowPlayingImage {
 height: 100%;
    width: 5.2em;
}
.layout-mobile .nowPlayingBarTop {
    height: 5.2em;
}



/*-----------------------------------------------Replace "Latest Movies" text with Custom Text such as "Recently Added Movies"-----------------------------------------------*/
#homeTab > div > div.section6 > div:nth-child(1) > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left > a > h2 {display: none;}
#homeTab > div > div.section6 > div:nth-child(1) > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left > a > span {display: none;}
#homeTab > div > div.section6 > div:nth-child(1) > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left > a:after {
content: 'Recently Added Movies ›';
font-size: 24px;
font-weight: normal;
}


/*-----------------------------------------------Replace Latest TV Shows text with Custom Text such as "Recently Added TV Shows"-----------------------------------------------*/
#homeTab > div > div.section6 > div:nth-child(2) > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left > a > h2 {display: none;}
#homeTab > div > div.section6 > div:nth-child(2) > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left > a > span {display: none;}
#homeTab > div > div.section6 > div:nth-child(2) > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left > a:after {
content: 'Recently Added TV Shows ›';
font-size: 24px;
font-weight: normal;
}


/*-----------------------------------------------Replace Latest music text with Custom Text such as "Recently Added anime"-----------------------------------------------*/
#homeTab > div > div.section6 > div:nth-child(3) > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left > a > h2 {display: none;}
#homeTab > div > div.section6 > div:nth-child(3) > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left > a > span {display: none;}
#homeTab > div > div.section6 > div:nth-child(3) > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left > a:after {
content: 'Recently Added Anime ›';
font-size: 24px;
font-weight: normal;
}


/*-----------------------------------------------Replace Latest books and comics text with Custom Text such as "Recently Added Books and Comics"-----------------------------------------------*/
#homeTab > div > div.section6 > div:nth-child(4) > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left > a > h2 {display: none;}
#homeTab > div > div.section6 > div:nth-child(4) > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left > a > span {display: none;}
#homeTab > div > div.section6 > div:nth-child(4) > div.sectionTitleContainer.sectionTitleContainer-cards.padded-left > a:after {
content: 'Recently Added Books/Comics ›';
font-size: 24px;
font-weight: normal;
}

/*-----------------------------------------------introskip button-----------------------------------------------*/
.skipIntro {
    border: 5px solid;
    border-radius: 20px;
    padding: 0 4px;
}
.layout-mobile
.skipIntro {
  bottom: 7em;
}
.layout-tv 
.skipIntro {
 bottom: 6em;
}


/*-----------------------------------------------upnext-----------------------------------------------*/
.upNextContainer {
        background-color: #0c0c0cb0;
    border-radius: 47px;
    width: 30em;
}
.emby-button {
    border-radius: 1.2em;
}


/*---------------------------DISABLED--------------------Card padder overflow (removes background for transparent png my medias) -----------------------------------------------*/
/*
.cardBox-bottompadded .cardScalable .cardPadder-overflowBackdrop{

visibility:hidden;

}
*/


/*-----------------------------------------------fixes the favorites/home tab on TV-----------------------------------------------*/

.layout-tv .sectionTabs {
    width: 58%;
    margin: auto;
}
.layout-tv .headerTabs.sectionTabs {
    margin-top: -92px;
}
.layout-tv .libraryPage:not(.noSecondaryNavPage) {
    padding-top: 4.5em!important;
}
.emby-button-foreground {
    position: initial;
}



/*-----------------------------------------------Display external links in mobile layout*/
.layout-mobile .itemExternalLinks {
    display: block !important;
}





/*-----------------------------------------------RESIZE THE UPNEXT SCREEN-----------------------------------------------*/ 

.layout-mobile
.upNextContainer {
    background-color: rgb(52 52 52 / 55%);
    border-radius: 20px;
    width: 30em;
    font-size: 70%;
}
.layout-tv
.upNextContainer {
    background-color: rgb(52 52 52 / 55%);
    border-radius: 20px;
    width: 30em;
    font-size: 50%;
}
.upNextDialog-nextVideoText, .upNextDialog-title {
    font-weight: bolder;
}

.upNextDialog-buttons {
    width: 25.75em;
}



/*-----------------------------------------------(TV-MODE) changes the movies and shows poster to bigger---------------*/
.itemsContainer-tv > .overflowPortraitCard{ 
width:25%;} 










/*#####################################################################################################################
          the badass code https://www.reddit.com/r/jellyfin/comments/12wpxry/my_custom_css_for_moviestv_show_sections/

######################################################################################################################*/



/* Color de fondo general */
/* definicion de variables */
:root {
    --margin-page: 7%;
}

/* LOGIN Section */
/* Narrow the login form */
#loginPage .readOnlyContent,
#loginPage form {
  max-width: 22em;
}

/* Hide "please login" text, margin is to prevent login form moving too far up */
#loginPage h1 {
  display: none;
}

#loginPage .padded-left.padded-right.padded-bottom-page {
  margin-top: 50px;
}

/* Hide "manual" and "forgot" buttons */
#loginPage .raised.cancel.block.btnManual.emby-button {
  display: none;
}
#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
  display: none;
}



/****************************************************************
                        LAYOUT DESKTOP 
****************************************************************/
/* header section */
.skinHeader.semiTransparent {
    background-color: rgba(0, 0, 0, 0.0);
}

.skinHeader-withBackground {
    background-color: transparent;
}

/* removemos info innecesaria */
.layout-desktop .detailImageContainer .card,
.layout-desktop .itemTags,
.layout-desktop .itemExternalLinks,
.layout-desktop form.trackSelections,
.layout-desktop .itemName.originalTitle {
  display: none;
}

/* reposicionando elementos */
.layout-desktop .detailLogo {
    left: var(--margin-page);
    background-position: top left;
    top: 38vh;
}



.layout-desktop .detailRibbon {
    background: none;
}

.layout-desktop .detailPagePrimaryContainer,
.layout-desktop .detailPageContent {
    padding-left: var(--margin-page);
}

.detailPageSecondaryContainer {
    margin: 0;
}

.backgroundContainer.withBackdrop {
    background-color: rgba(0, 0, 0, 0.62);
}

.withSectionTabs .backgroundContainer.withBackdrop {
    background-color: #181818!important;
}

.layout-desktop .detailPageWrapperContainer {
    background: linear-gradient(0deg, black, transparent);
    margin-top: -22.0em;
}

.layout-desktop .itemBackdrop {
    height: 100vh;
}

.layout-desktop .detailPagePrimaryContent {
    width: 60%;
}

.layout-desktop .detailButton {
    /*border: 2px solid #cecece;*/
    border-radius: 2em;
    font-weight: bold;
    /*width: 7vw;*/
    background-color: rgba(255, 255, 255, 0.20);
    padding: 1em 2em!important;
    margin-right: 3%!important;
    color: rgb(255, 255, 255);
}

.layout-desktop .detailButton:hover {
    background-color: #ffffff; 
    color: #181818;
}

/* btns remove icons */
.layout-desktop .material-icons.detailButton-icon.play_arrow,
.layout-desktop .material-icons.detailButton-icon.replay {
    display: none;
}

/* btns adding text */
.layout-desktop .btnPlay::after {
    content : attr(title);
    /*margin: 0 10px 0 2px;*/
}

/*material-icons detailButton-icon replay*/
.layout-desktop .btnReplay::after {
    content : attr(title);
    /*margin: 0 10px 0 2px;*/
}

.layout-desktop .btntheaters::after {
    content : attr(title);
    /*margin: 0 10px 0 2px;*/
}

.layout-desktop .detailButton {
    flex-direction: row;
}

.layout-desktop .detailRibbon {
    height: unset!important;
}

.layout-desktop .detailPagePrimaryContainer {
    /*-webkit-align-content: center;*/
    align-content: flex-start;
    /*-webkit-align-items: center;*/
    /*display: -webkit-flex;*/
    display: flex;
    z-index: 2;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: flex-start;
}

.layout-desktop h3.itemName {
    font-size: 2em;
    font-weight: normal;
}

.layout-desktop .itemMiscInfo, .nameContainer {
    margin-bottom: 0.5em;
}

.layout-desktop .tagline,
.layout-desktop #seriesAirTime {
    display: none;
}

.layout-desktop .detail-clamp-text {
    -webkit-line-clamp: 4;
}

/*  season section  */
.layout-desktop .vertical-list {
    flex-direction: row;
    flex-wrap: wrap;
}
  
.layout-desktop .listItem-withContentWrapper {
    align-items: flex-start;
    flex-direction: column;
    width: 32%;
}
  
.layout-desktop .listItem-content {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
}
  
.layout-desktop .listItemImage-large {
    height: 16vw;
    width: 100%;
}

.layout-desktop .listItem-withContentWrapper:hover {
    background-color: rgba(255, 255, 255, 0.10);
}

/****************************************************************
                        LAYOUT MOBILE 
****************************************************************/
.layout-mobile .headerHomeButton,
.layout-mobile .headerCastButton {
    display: none;
}

.layout-mobile .mainDrawerButton {
  display: block!important;
}

.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred {
  background: none;
  background-color: rgba(0, 0, 0, 0);
}
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {
  background: none;
  background-color: rgba(0, 0, 0, 0);
}

.headerTabs.sectionTabs {
  text-size-adjust: 110%;
  font-size: 110%;
}
.pageTitle {
  margin-top: auto;
  margin-bottom: auto;
}
.emby-tab-button {
  padding: 1.75em 1.7em;
}

/* Seccion Peliculas/Series */

.layout-mobile .itemTags,
.layout-mobile .itemExternalLinks,
.layout-mobile .trackSelections,
.layout-mobile .itemName.originalTitle,
.layout-mobile .directorsGroup,
.layout-mobile .writersGroup,
#seriesAirTime {
    display: none;
}

/* Quitamos imagen de poster */
.layout-mobile .detailImageContainer .card,
.layout-mobile .detailImageContainer .card.backdropCard,
.layout-mobile .detailImageContainer .card.squareCard {
    top: auto;
    display: none;
}

/* Mostrando Logo y posicionandolo */
.layout-mobile .detailLogo {
    display: block;
    width: 15em;
    left: 5%;
    top: 17vh;
}

/* Mismo color de fondo a franja gris */
.detailRibbon {
    background: rgba(32, 32, 32, 0);
}

/* Sipnosis tamano de 5 lineas */
.detail-clamp-text {
    -webkit-line-clamp: 4;
}


.layout-mobile .infoWrapper {
    padding-left: 0;
    margin-top: 6em;
}

.layout-mobile .itemMiscInfo,
.layout-mobile .itemName,
.layout-mobile .mainDetailButtons,
.layout-mobile .parentName {
    text-align: left;
}

.layout-mobile .itemMiscInfo, 
.layout-mobile .itemName, 
.layout-mobile .mainDetailButtons, 
.layout-mobile .parentName {
    justify-content: left;
    text-align: left;
}

/* Titulo Original y removiendo el titulo actual */
.layout-mobile .itemName.parentNameLast.withOriginalTitle {
    margin: 0.6em 0;
}

/* moviendo a la Izq Contenedor de botones de pelicula*/
.layout-mobile .mainDetailButtons {
    padding-left: 0;
}

/* arregalndo padding y margin y aumentando tamano de fanart y agregando degradado */
.layout-mobile .itemBackdrop {
    height: 40vh;/*30*/
    margin-top: 0;
}

.layout-mobile .itemBackdrop::before {
    content: '';
    right: 0;
    left: 0;
    /*top: 0;*/
    bottom: 0;
    height: 25vh;
    position: absolute;
    z-index: -1;
    /*background: linear-gradient(0deg, #181818 15%, #18181800 65%);*/
    background: linear-gradient(0deg, #181818 10%, #18181800 65%);
}

.layout-mobile .detailPageWrapperContainer {
  top: -5em;
}

.layout-mobile .infoWrapper {
    margin-top: 0;
}

.layout-mobile .itemName.parentNameLast.withOriginalTitle {
    margin: 0 0 0.6em 0;
}

.layout-mobile .detailPageSecondaryContainer {
    margin: 0 0 1em 0;
}

.layout-mobile .overview-expand {
    padding: 0 1em 0.3em 1em;
}

/* play boton */
.layout-mobile .mainDetailButtons {
  margin-top: 1.5em;
}

.layout-mobile .btnPlay {
  border-radius: 2em;
  /*width: 7vw;*/
  background-color: white;
  /*padding: 0.4em!important;*/
  /*margin-right: 30%!important;*/
}

.layout-mobile .btnPlay::after {
  content : attr(title);
  margin: 0 10px 0 2px;
  color: black;
}

.layout-mobile .btnPlay.detailButton {
  flex-direction: row;
}

.layout-mobile .btnShuffle,
.layout-desktop .btnShuffle {
  display: none;
}

.layout-mobile .material-icons.detailButton-icon.play_arrow {
  color: black;
}

.layout-mobile .listViewUserDataButtons {
  display: none;
}

.layout-mobile .listItem-content {
  display: block;
}

.layout-mobile .listItem-content .listItemBody {
  padding: 0.85em 0;
}

.layout-mobile .listItem-content .listItemImage-large {
  height: 30vw;
  width: 86vw;
}

.layout-mobile .listItem-content .listItemImage-large .listItemImageButton, .listItemIndicators {
  font-size: 1em!important;
}

.layout-mobile .listItem-bottomoverview {
  font-size: 100%;
}

.layout-mobile .detailPagePrimaryContent {
  position: relative;
  margin-top: 1em;
}

/****************************************************************
                        LAYOUT general 
****************************************************************/
  /* cast & crew circular */
#castContent .cardImageContainer.coveredImage.cardContent.itemAction.lazy.non-blurhashable,
#castContent .cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground1.cardContent.itemAction {
  border-radius: 50%;
}

#castContent .cardPadder.cardPadder-overflowPortrait,
#castContent .cardPadder-mixedPortrait, 
#castContent .cardPadder-overflowPortrait, 
#castContent .cardPadder-portrait, 
#castContent .overflowPortraitCard-textCardPadder {
  border-radius: 50%;
  padding-bottom: 100%;
}

#castContent .cardOverlayContainer {
  border-radius: 50%;
}

#castContent .cardOverlayButton-br {
  bottom: 0;
  position: absolute;
  left: 38%;
}