jyapayne/kaboot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Branding

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-15 11:52:29 -07:00
commit 7c03c594c1
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
5 changed files with 305 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

161
authentik/blueprints/kaboot-setup.yaml
View file

@ -25,6 +25,166 @@ metadata:
blueprints.goauthentik.io/description: "Complete Kaboot OAuth2/OIDC setup with enrollment flow"
entries:
# ═══════════════════════════════════════════════════════════════════════════════
# BRANDING
# ═══════════════════════════════════════════════════════════════════════════════
- id: kaboot-brand
model: authentik_brands.brand
identifiers:
domain: localhost
attrs:
domain: localhost
default: true
branding_title: Kaboot
branding_logo: /media/branding/logo.svg
branding_favicon: /media/branding/logo.svg
flow_authentication: !Find [authentik_flows.flow, [slug, default-authentication-flow]]
flow_invalidation: !Find [authentik_flows.flow, [slug, default-invalidation-flow]]
flow_user_settings: !Find [authentik_flows.flow, [slug, default-user-settings-flow]]
attributes:
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 Flow 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;
}
# ═══════════════════════════════════════════════════════════════════════════════
# FLOW BACKGROUNDS
# ═══════════════════════════════════════════════════════════════════════════════
- id: update-authentication-flow-background
model: authentik_flows.flow
identifiers:
slug: default-authentication-flow
attrs:
title: Welcome to Kaboot!
background: /media/branding/background.svg
- id: update-invalidation-flow-background
model: authentik_flows.flow
identifiers:
slug: default-invalidation-flow
attrs:
background: /media/branding/background.svg
- id: update-authorization-flow-background
model: authentik_flows.flow
identifiers:
slug: default-provider-authorization-implicit-consent
attrs:
background: /media/branding/background.svg
# ═══════════════════════════════════════════════════════════════════════════════
# GROUPS
# ═══════════════════════════════════════════════════════════════════════════════
@ -173,6 +333,7 @@ entries:
slug: enrollment-flow
designation: enrollment
authentication: none
background: /media/branding/background.svg
- id: enrollment-flow-prompt-binding
model: authentik_flows.flowstagebinding

13
authentik/branding/background.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 573 B

115
authentik/branding/custom-css.yaml Normal file
View file

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

15
authentik/branding/logo.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 730 B

2
components/AuthButton.tsx
View file

@ -75,7 +75,7 @@ export const AuthButton: React.FC<AuthButtonProps> = ({ onAccountSettingsClick }
<button
onClick={() => {
setDropdownOpen(false);
auth.signoutRedirect();
auth.signoutRedirect({ post_logout_redirect_uri: window.location.origin });
}}
className="w-full px-4 py-2 text-left text-gray-700 hover:bg-gray-100 flex items-center gap-2 font-medium transition"
>