/* EO branding for AFFiNE self-hosted. Served by Nginx, no AFFiNE files modified. */

:root {
  --eo-logo: url("/affine-branding/LogoEO.png");
  --eo-login-bg: url("/affine-branding/SuperHaussmann1080_Taupe_Flou.png");
}

@supports selector(body:has(input)) {
  body:has(input[placeholder*="email" i]),
  body:has(input[type="password"]),
  body:has(input[placeholder*="email" i]) #app,
  body:has(input[type="password"]) #app,
  body:has(input[placeholder*="email" i]) main,
  body:has(input[type="password"]) main {
    background-color: #f4f1ed !important;
    background-image: var(--eo-login-bg) !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
  }

  body:has(input[placeholder*="email" i]) [style*="dot-bg"],
  body:has(input[type="password"]) [style*="dot-bg"] {
    background-image: none !important;
    background-color: transparent !important;
  }

  body:has(input[placeholder*="email" i]) [src*="dot-bg"],
  body:has(input[placeholder*="email" i]) [src*="art-light"],
  body:has(input[placeholder*="email" i]) [src*="art-dark"],
  body:has(input[type="password"]) [src*="dot-bg"],
  body:has(input[type="password"]) [src*="art-light"],
  body:has(input[type="password"]) [src*="art-dark"] {
    display: none !important;
  }

  body:has(input[placeholder*="email" i]) a[href="/"]:has(> svg),
  body:has(input[type="password"]) a[href="/"]:has(> svg) {
    align-items: center !important;
    background-image: var(--eo-logo) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    display: flex !important;
    height: 36px !important;
    justify-content: center !important;
    width: 36px !important;
  }

  body:has(input[placeholder*="email" i]) a[href="/"]:has(> svg) > svg,
  body:has(input[type="password"]) a[href="/"]:has(> svg) > svg {
    display: none !important;
  }

  body:has(input[placeholder*="email" i]) p:has(> svg),
  body:has(input[type="password"]) p:has(> svg) {
    align-items: center !important;
    display: flex !important;
    gap: 8px !important;
  }

  body:has(input[placeholder*="email" i]) p:has(> svg)::before,
  body:has(input[type="password"]) p:has(> svg)::before {
    background-image: var(--eo-logo) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    content: "" !important;
    display: inline-block !important;
    flex: 0 0 24px !important;
    height: 24px !important;
    width: 24px !important;
  }

  body:has(input[placeholder*="email" i]) p:has(> svg) > svg,
  body:has(input[type="password"]) p:has(> svg) > svg {
    display: none !important;
  }

  body:has(input[placeholder*="email" i]) a,
  body:has(input[type="password"]) a,
  body:has(input[placeholder*="email" i]) p,
  body:has(input[type="password"]) p,
  body:has(input[placeholder*="email" i]) label,
  body:has(input[type="password"]) label,
  body:has(input[placeholder*="email" i]) button.trarl2e:not(.p1amre):not(.gy8ffm6) span,
  body:has(input[type="password"]) button.trarl2e:not(.p1amre):not(.gy8ffm6) span {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55) !important;
  }

  body:has(input[placeholder*="email" i]) input,
  body:has(input[type="password"]) input {
    color: #141414 !important;
    text-shadow: none !important;
  }

  body:has(input[placeholder*="email" i]) button.gy8ffm6 span,
  body:has(input[type="password"]) button.gy8ffm6 span {
    color: #141414 !important;
    text-shadow: none !important;
  }

  body:has(input[placeholder*="email" i]) button.gy8ffm8,
  body:has(input[type="password"]) button.gy8ffm8 {
    color: #141414 !important;
    text-shadow: none !important;
  }

  body:has(input[placeholder*="email" i]) .gy8ffm2 button[class*="gy8ffm"],
  body:has(input[type="password"]) .gy8ffm2 button[class*="gy8ffm"] {
    display: none !important;
  }
}