Branding

authentik/branding/background.svg

@@ -0,0 +1,13 @@
+<svg width="1920" height="1080" viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#2563eb" />
+      <stop offset="100%" stop-color="#60a5fa" />
+    </linearGradient>
+  </defs>
+  <rect width="1920" height="1080" fill="url(#bg-gradient)" />
+  
+  <!-- Subtle decorative elements -->
+  <circle cx="200" cy="200" r="400" fill="white" fill-opacity="0.03" />
+  <circle cx="1700" cy="900" r="500" fill="white" fill-opacity="0.03" />
+</svg>

authentik/branding/custom-css.yaml

@@ -0,0 +1,115 @@
+settings:
+  theme:
+    base: light
+  css: |
+    /* Kaboot Theme for Authentik */
+    
+    :root {
+      --ak-accent: #2563eb;
+      --ak-primary: #2563eb;
+      --ak-primary-dark: #1e40af;
+      --ak-primary-light: #60a5fa;
+      --ak-error: #ef4444;
+      --ak-success: #22c55e;
+      --pf-global--FontFamily--sans-serif: "Inter", system-ui, -apple-system, sans-serif;
+    }
+
+    /* Background color fallback (image set via Brand settings) */
+    body {
+      background-color: #2563eb !important;
+    }
+
+    /* Login Card */
+    .pf-c-login__main {
+      background-color: #ffffff !important;
+      border-radius: 2rem !important;
+      box-shadow: 0 10px 0 rgba(0,0,0,0.1) !important;
+      padding: 3rem !important;
+      max-width: 500px !important;
+      margin: 0 auto;
+    }
+
+    /* Inputs */
+    .pf-c-form-control {
+      border: 2px solid #e5e7eb !important;
+      border-radius: 1rem !important;
+      padding: 0.75rem 1rem !important;
+      font-weight: 600 !important;
+      color: #333 !important;
+      font-size: 1rem !important;
+      box-shadow: none !important;
+      transition: all 0.2s ease !important;
+    }
+
+    .pf-c-form-control:focus {
+      border-color: #2563eb !important;
+      outline: none !important;
+    }
+
+    /* Primary Button - Kaboot Signature 3D Style */
+    .pf-c-button.pf-m-primary {
+      background-color: #333333 !important;
+      color: #ffffff !important;
+      border: none !important;
+      border-radius: 1rem !important;
+      padding: 0.75rem 1.5rem !important;
+      font-weight: 800 !important;
+      font-size: 1.1rem !important;
+      box-shadow: 0 6px 0 #000000 !important;
+      transform: translateY(0) !important;
+      transition: all 0.1s ease !important;
+      text-transform: uppercase !important;
+      letter-spacing: 0.05em !important;
+    }
+
+    .pf-c-button.pf-m-primary:hover {
+      background-color: #1a1a1a !important;
+    }
+
+    .pf-c-button.pf-m-primary:active {
+      transform: translateY(6px) !important;
+      box-shadow: none !important;
+    }
+    
+    /* Secondary/Link Buttons */
+    .pf-c-button.pf-m-secondary, .pf-c-button.pf-m-link {
+      color: #2563eb !important;
+      font-weight: 600 !important;
+    }
+
+    /* Titles */
+    .pf-c-title {
+      font-weight: 900 !important;
+      color: #111827 !important;
+      text-align: center !important;
+      margin-bottom: 1.5rem !important;
+    }
+    
+    /* Logo styling if present in header */
+    .pf-c-brand {
+      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
+    }
+
+    /* Alert/Notification boxes */
+    .pf-c-alert {
+      border-radius: 1rem !important;
+      border: 2px solid transparent !important;
+      box-shadow: 0 4px 0 rgba(0,0,0,0.05) !important;
+    }
+    
+    .pf-c-alert.pf-m-danger {
+      background-color: #fef2f2 !important;
+      border-color: #fca5a5 !important;
+      color: #991b1b !important;
+    }
+    
+    /* Footer links */
+    .pf-c-login__main-footer-links-item-link {
+        color: #6b7280 !important;
+        font-weight: 500 !important;
+    }
+    
+    /* Hide the default background image if any */
+    .pf-c-background-image {
+      display: none !important;
+    }

authentik/branding/logo.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
+  <path d="M9 13a4.5 4.5 0 0 0 3-4" />
+  <path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" />
+  <path d="M3.477 10.896a4 4 0 0 1 .585-.396" />
+  <path d="M6 18a4 4 0 0 1-1.967-.516" />
+  <path d="M12 13h4" />
+  <path d="M12 18h6a2 2 0 0 1 2 2v1" />
+  <path d="M12 8h8" />
+  <path d="M16 8V5a2 2 0 0 1 2-2" />
+  <circle cx="16" cy="13" r=".5" />
+  <circle cx="18" cy="3" r=".5" />
+  <circle cx="20" cy="21" r=".5" />
+  <circle cx="20" cy="8" r=".5" />
+</svg>