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