apiVersion: v1
kind: ConfigMap
metadata:
  name: authentik-custom-css
  namespace: authentik
data:
  custom.css: |
    /* Custom CSS for Authentik Login Page and Admin Interface */

    :root {
      --ak-accent: #3a3a40;
      --pf-global--primary-color--100: #3a3a40;
      --pf-global--primary-color--200: #3a3a40;
      --pf-global--primary-color--400: var(--ak-accent);
    }

    /*** Main login page ***/
    .pf-c-login__main {
      background-color: transparent !important;
      backdrop-filter: blur(8px);
      border: 2px solid #807e82;
      border-radius: 25px;
      animation: pulse-border 3s infinite;
    }

    /* Glowing border animation */
    @keyframes pulse-border {
      0%, 100% {
        box-shadow: 0 0 10px #807e82, 0 0 15px #807e82;
      }
      50% {
        box-shadow: 0 0 15px #807e82, 0 0 25px #807e82;
      }
    }

    /* Sidebar and footer transparency */
    .pf-c-page__sidebar,
    .pf-c-login__main-footer-band,
    .pf-c-login__footer .pf-c-list {
      background-color: transparent !important;
      backdrop-filter: blur(10px);
    }

    /* Pseudo-elements for background effects */
    .pf-c-login__main::before,
    .pf-c-login__main-footer-band::before,
    .pf-c-login__footer .pf-c-list::before,
    .pf-c-page__sidebar::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      opacity: 0.1;
      background-color: var(--ak-dark-background);
      border-radius: 25px;
    }

    /* Login button styling */
    .pf-c-button.pf-m-block {
      --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-link--disabled--BackgroundColor);
      color: white;
      background-color: #3a3a40;
      border-radius: 20px;
      opacity: 0.785;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
      width: 50%;
      margin: 0 auto;
    }

    /* Form input styling */
    .pf-c-form-control,
    .pf-c-input-group {
      border-radius: 20px;
      border: 2px solid #3a3a40 !important;
    }

    /* Text color for various elements */
    a,
    body,
    h1,
    h2,
    .pf-c-expandable-section__toggle,
    .pf-c-page__header-tools,
    .pf-c-button {
      color: #b7b7b7 !important;
    }

    .pf-c-button.pf-m-secondary.pf-m-block::after {
    content: none; /* Removes the content from the ::after pseudo-element */
    box-shadow: none; /* Removes any shadow that may create a square effect */
    border: none; /* If there's any border being applied, remove it */
    }

    /* Light mode adjustments */
    :host([theme="light"]) .pf-c-page__header-tools-item .fas,
    :host([theme="light"]) .pf-c-notification-badge__count,
    :host([theme="light"]) .pf-c-page__header-tools-group .pf-c-button {
      color: #b7b7b7 !important;
    }

    /* App card styling */
    .pf-c-card.pf-m-compact,
    .pf-c-expandable-section.pf-m-display-lg {
      border-radius: 20px;
      background: rgba(18, 18, 18, 0.4);
      backdrop-filter: blur(7px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: box-shadow 0.3s ease-in-out;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
      background: linear-gradient(135deg, rgba(30, 30, 30, 0.3) 0%, rgba(15, 15, 15, 0.3) 100%);
    }

    /* App card hover effect */
    .pf-c-card.pf-m-compact:hover,
    .pf-c-expandable-section.pf-m-display-lg:hover {
      box-shadow: 0 0 15px 3px #d6d6d6;
    }

    /* App icon rounded corners */
    .icon.pf-c-avatar {
      border-radius: 15px;
    }

    /*** Admin interface ***/
    .pf-c-page__sidebar {
      backdrop-filter: blur(10px);
    }

    .pf-c-page,
    .pf-c-tabs__item {
      background-color: transparent !important;
    }