Customisations

/*Hide "Please sign in" 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: 10px} 
 /*Change login page background*/
#loginPage {
 background: url(https://i.imgur.com/Ewk3Pqw.png) !important;
 background-size: cover !important;
} 
 /*Hide the top bar when the login page is visible*/
body:has(#loginPage:not(.hide)) .skinHeader {
 display: none !important;
}

/*Show the top bar when the login page is hidden or absent*/
body:not(:has(#loginPage:not(.hide))) .skinHeader {
 display: flex !important;
} 
 
 /*Custom login page of awesome NMetflix Logon*/
#loginPage {

 background-image: url('/Branding/Splashscreen?format=jpg&foregroundLayer=20.0');
 background-position: top left;
 background-size: 200%;
 background-attachment: fixed;
 animation: backgroundAnimation 150s infinite alternate;
 z-index: 2;
}

@keyframes backgroundAnimation {
 0% {
 background-position: top left;
 }
 25% {
 background-position: bottom right;
 }
 50% {
 background-position: bottom left;
 }
 100% {
 background-position: top left;
 }
}

.skinHeader.semiTransparent.noHeaderRight {
 background: transparent !important;
}

div#loginPage {
 margin-top: 0 !important;
 overflow: hidden scroll;
}

#loginPage h1::after {
 content: "Sign In";
 font-size: 32px;
}

#loginPage h1 {
 font-weight: 700;
 font-size: 0;
 margin-bottom: 21.44px;
 margin-top: 32px !important;
 text-align: left;
}

.inputContainer {
 margin-bottom: 1.8em;
 margin-top: 1.8em;
}

#loginPage .padded-left.padded-right.padded-bottom-page {
 background: #000000bf;
 transform: translate(-50%, -50%);
 top: 50%;
 left: 50%;
 margin: 21px;
 position: absolute;
 border-radius: 10px;
 width: 100vw;
 display: flex;
 flex-direction: column;
 flex-wrap: nowrap;
 align-content: center;
 justify-content: center;
 align-items: center;
 padding: 3em !important;
}

#loginPage .readOnlyContent {
 padding: 0 !important;
 width: 100% !important;
 height: -webkit-fit-content;
 height: -moz-fit-content;
 height: fit-content;
}

.manualLoginForm {
 height: 100%;
 width: 100%;
}

#loginPage .inputContainer {
 background: #333;
 border-radius: var(--rounding);
 height: 4em;
 position: relative;
}

#loginPage .inputLabel.inputLabelFocused,
#loginPage .inputLabel:not(.inputLabel-float) {
 font-size: 0.8em;
 left: 4%;
 top: 4%;
 transform: none;
}

.visualLoginForm {
 width: 100%;
 position: relative;
 overflow: hidden;
}

#divUsers {
 flex-flow: revert;
 overflow: scroll visible;
 justify-content: flex-start;
}

#loginPage .emby-input {
 height: 100%;
 border: none;
 background: transparent !important;
 -webkit-backdrop-filter: none;
 backdrop-filter: none;
 box-shadow: none !important;
 padding: 4% !important;
 font-size: 1.1em;
 border: none !important;
}

#loginPage .inputLabel {
 position: absolute;
 top: 50%;
 left: 4%;
 transform: translateY(-50%);
 font-size: 1.5em;
 font-weight: 300;
 transition: 0.2s ease;
 color: #8c8c8c;
}

#loginPage .inputContainer:focus,
#loginPage .inputContainer:focus-within {
 background: #454545;
} 
 Jellfin Custom HTML Code 
 removed buttons 
 <div class="row" style="display:none">
 <div class="column" style="">
<a href="https://example.com" class="raised cancel block emby-button">
 <span class="material-icons login" aria-hidden="true"></span>
 <span>SSO Login</span>
</a>
 </div>
 <div class="column" style=";">
<a href="https://example.com" class="raised cancel block emby-button">
 <span class="material-icons login" aria-hidden="true"></span>
 <span>SSO Logout</span>
</a>
 </div>
 <div class="column" style="">
<a href="https://example.com" class="raised cancel block emby-button">
 <span class="material-icons login" aria-hidden="true"></span>
 <span>SSO Home</span>
</a>
 </div>