From d51ad0191eae0ad71077e8ee7187958b33b73226 Mon Sep 17 00:00:00 2001 From: josedario87 Date: Sun, 5 Oct 2025 19:35:48 -0600 Subject: [PATCH] agregando archivos de customization --- .gitignore | 6 +- CUSTOMIZATION.md | 191 +++++++++++++++ media/favicon.svg | 25 ++ media/nucleo-custom.css | 504 ++++++++++++++++++++++++++++++++++++++++ media/nucleo-icon.svg | 37 +++ media/nucleo-logo.svg | 40 ++++ 6 files changed, 802 insertions(+), 1 deletion(-) create mode 100644 CUSTOMIZATION.md create mode 100644 media/favicon.svg create mode 100644 media/nucleo-custom.css create mode 100644 media/nucleo-icon.svg create mode 100644 media/nucleo-logo.svg diff --git a/.gitignore b/.gitignore index a632bbe..37a6963 100644 --- a/.gitignore +++ b/.gitignore @@ -2,9 +2,13 @@ .env # Authentik data directories -media/ +# media/ - NOT ignored, contains branding assets certs/ +# But ignore uploaded user media (if any) +media/public/ +media/private/ + # Docker volumes data (if using local binding) postgresql-data/ redis-data/ diff --git a/CUSTOMIZATION.md b/CUSTOMIZATION.md new file mode 100644 index 0000000..e76f588 --- /dev/null +++ b/CUSTOMIZATION.md @@ -0,0 +1,191 @@ +# Personalización de Authentik - Nucleo V3 + +## 🎨 Estética de Nucleo V3 + +Este sistema de autenticación ha sido personalizado para reflejar la identidad visual de **Nucleo V3**, el sistema nervioso digital de **Beneficio Rio Frio**. + +### Paleta de Colores + +#### 🌙 Modo Oscuro (Dark Mode) +- **Background**: Azul royal profundo (#0f1729 → #1e3a8a) +- **Iluminación**: Dorado (#f59e0b, #fbbf24) +- **Cards**: Efecto obsidiana con brillo dorado +- **Patrón**: Puntos dorados sutiles sobre fondo azul + +#### ☀️ Modo Claro (Light Mode) +- **Background**: Dorado intenso (#fef3c7 → #fcd34d) +- **Acentos**: Azul royal fuerte (#1e3a8a, #2563eb) +- **Cards**: Efecto porcelana con sombras azules +- **Patrón**: Puntos azules sobre fondo dorado + +### 🎭 Efectos Especiales + +#### Obsidiana (Dark Mode) +- Superficie negra brillante con gradientes sutiles +- Borde dorado luminoso que brilla al hover +- Sombras profundas con resplandor dorado +- Reflejo de cristal en la parte superior + +#### Porcelana (Light Mode) +- Superficie blanca cremosa con brillo sutil +- Bordes azul royal delicados +- Múltiples capas de sombras suaves +- Efecto de brillo deslizante al hover + +## 📁 Archivos Creados + +### 1. **nucleo-custom.css** +Archivo CSS completo con toda la personalización: +- Variables de color para ambos modos +- Efectos de porcelana y obsidiana +- Patrón de puntos en backgrounds +- Estilos para botones, inputs y navegación +- Scrollbars personalizados +- Easter egg con tema de café ☕ + +### 2. **nucleo-logo.svg** +Logo principal de Nucleo V3: +- Letra "N" estilizada con grano de café integrado +- Gradientes azul royal y dorado +- Badge "V3" en dorado +- Efecto de vapor de café sutil + +### 3. **nucleo-icon.svg** +Ícono cuadrado para el sidebar: +- Grano de café con letra "N" superpuesta +- Tres puntos representando las etapas del café +- Diseño circular con gradientes + +### 4. **favicon.svg** +Favicon para el navegador: +- Versión simplificada del ícono +- Optimizado para tamaños pequeños (32x32) +- Grano de café con "N" + +## 🚀 Cómo Aplicar la Personalización + +### Paso 1: Acceder a Authentik Admin +1. Ve a `http://localhost:9000/if/admin/` (o tu puerto configurado) +2. Inicia sesión como administrador + +### Paso 2: Configurar el Brand +1. Navega a **System > Brands** +2. Edita el brand "Default" o crea uno nuevo +3. Configura los siguientes campos: + +#### Branding Básico +- **Title**: `Nucleo V3 - Beneficio Rio Frio` +- **Logo**: Sube `/media/nucleo-logo.svg` +- **Favicon**: Sube `/media/favicon.svg` + +#### Custom CSS +En el campo **Attributes**, agrega: +```json +{ + "settings": { + "theme": { + "base": "automatic" + } + } +} +``` + +En **Other global settings > Custom CSS**, copia y pega el contenido de `nucleo-custom.css` o referencia el archivo: + +```css +@import url('/media/nucleo-custom.css'); +``` + +### Paso 3: Configurar Flows +1. Ve a **Flows & Stages > Flows** +2. Edita el flow de autenticación +3. En **Appearance settings**: + - **Background**: Deja en blanco (usa el CSS) + - **Layout**: `stacked` (recomendado) + +### Paso 4: Reiniciar (si es necesario) +Si los cambios no se aplican inmediatamente: +```bash +docker compose restart server +``` + +## 🎨 Personalización Adicional + +### Cambiar el Esquema de Color Base +Edita las variables CSS en `nucleo-custom.css`: + +```css +:root { + /* Ajusta estos valores según prefieras */ + --royal-blue-800: #1e3a8a; + --gold-500: #f59e0b; +} +``` + +### Modo Oscuro/Claro Forzado +En Brand > Attributes: +```json +{ + "settings": { + "theme": { + "base": "dark" // o "light" o "automatic" + } + } +} +``` + +### Cambiar Patrón de Puntos +En el CSS, busca `background-image: radial-gradient` y ajusta: +- Tamaño de puntos: `1px` (primer valor) +- Espaciado: `20px 20px` (background-size) +- Opacidad: `rgba(..., 0.15)` (último valor) + +## ☕ Easter Egg - Tema de Café + +El diseño incluye referencias sutiles al procesamiento de café: +- Grano de café en el logo +- Vapor de café en el logo principal +- Ícono de taza de café en la esquina de las cards de login +- Tres puntos en el ícono representando las etapas de producción + +## 🔧 Solución de Problemas + +### El CSS no se aplica +1. Verifica que el archivo esté en `/media/nucleo-custom.css` +2. Asegúrate de que el volumen esté montado en docker-compose.yml +3. Limpia la caché del navegador (Ctrl+Shift+R) + +### Los logos no aparecen +1. Verifica permisos de archivos: `chmod 644 media/*.svg` +2. Sube los archivos directamente en la interfaz de Authentik +3. Verifica la ruta en Brand settings + +### Los colores se ven diferentes +- El navegador puede estar forzando modo oscuro/claro +- Verifica la configuración del theme en Brand > Attributes +- Algunos navegadores no soportan todas las propiedades CSS modernas + +## 📝 Notas Técnicas + +### Compatibilidad +- ✅ Chrome/Edge (Chromium) 90+ +- ✅ Firefox 88+ +- ✅ Safari 14+ +- ⚠️ Algunos efectos pueden degradarse en navegadores antiguos + +### Rendimiento +- Patrones CSS optimizados (sin imágenes pesadas) +- SVGs vectoriales para escalabilidad +- Transiciones GPU-aceleradas +- Lazy loading de efectos complejos + +### Mantenimiento +- Los archivos CSS están documentados con comentarios +- Variables centralizadas para fácil modificación +- Separación clara entre modos dark/light +- Compatible con futuras versiones de Authentik (2025.8.x) + +--- + +**Creado para Nucleo V3 - Sistema de Gestión Integral** +*Beneficio Rio Frio - Excelencia en Café desde el Grano hasta la Taza* diff --git a/media/favicon.svg b/media/favicon.svg new file mode 100644 index 0000000..b6d8a6e --- /dev/null +++ b/media/favicon.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/media/nucleo-custom.css b/media/nucleo-custom.css new file mode 100644 index 0000000..b3248f4 --- /dev/null +++ b/media/nucleo-custom.css @@ -0,0 +1,504 @@ +/** + * Nucleo V3 Custom Theme for Authentik + * Beneficio Rio Frio - Coffee Production System + * + * Color Palette: + * - Royal Blue: #1e3a8a (deep), #2563eb (standard), #3b82f6 (light) + * - Gold: #d97706 (dark), #f59e0b (standard), #fbbf24 (light) + * - Dark Mode: Deep royal blue background with gold illumination + * - Light Mode: Intense gold with strong royal blue accents + */ + +:root { + /* Royal Blue Palette */ + --royal-blue-900: #0f1729; + --royal-blue-800: #1e3a8a; + --royal-blue-700: #1d4ed8; + --royal-blue-600: #2563eb; + --royal-blue-500: #3b82f6; + --royal-blue-400: #60a5fa; + --royal-blue-300: #93c5fd; + + /* Gold Palette */ + --gold-900: #78350f; + --gold-800: #92400e; + --gold-700: #b45309; + --gold-600: #d97706; + --gold-500: #f59e0b; + --gold-400: #fbbf24; + --gold-300: #fcd34d; + --gold-200: #fde68a; + + /* Obsidian (Dark Mode Cards) */ + --obsidian-base: #0a0e1a; + --obsidian-light: #151b2e; + --obsidian-glow: rgba(245, 158, 11, 0.1); + + /* Porcelain (Light Mode Cards) */ + --porcelain-base: #fefefe; + --porcelain-shadow: rgba(30, 58, 138, 0.08); + --porcelain-border: rgba(30, 58, 138, 0.12); +} + +/* ======================================== + LIGHT MODE - Golden Elegance + ======================================== */ +[data-theme="light"], +:root:not([data-theme="dark"]) { + /* Background with dot pattern */ + --pf-v5-global-BackgroundColor--100: #fef3c7; + --pf-v5-global-BackgroundColor--200: #fde68a; + + /* Primary colors - Gold dominant */ + --pf-v5-global-primary-color--100: var(--gold-600); + --pf-v5-global-primary-color--200: var(--gold-700); + --pf-v5-global-link-Color: var(--royal-blue-700); + --pf-v5-global-link-Color--hover: var(--royal-blue-800); + + /* Accent - Royal Blue */ + --pf-v5-global-active-color--100: var(--royal-blue-700); + --pf-v5-global-active-color--200: var(--royal-blue-800); + + /* Text colors */ + --pf-v5-global-Color--100: var(--royal-blue-900); + --pf-v5-global-Color--200: var(--royal-blue-800); + + /* Border colors */ + --pf-v5-global-BorderColor--100: var(--royal-blue-300); + --pf-v5-global-BorderColor--200: var(--royal-blue-400); +} + +[data-theme="light"] body, +:root:not([data-theme="dark"]) body { + background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%); + position: relative; +} + +/* Dot pattern for light mode */ +[data-theme="light"] body::before, +:root:not([data-theme="dark"]) body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: radial-gradient(circle, rgba(30, 58, 138, 0.15) 1px, transparent 1px); + background-size: 20px 20px; + pointer-events: none; + z-index: 0; +} + +/* Porcelain effect for cards in light mode */ +[data-theme="light"] .pf-v5-c-card, +[data-theme="light"] .pf-v5-c-login__main, +[data-theme="light"] .pf-v5-c-modal-box, +[data-theme="light"] .ak-flow-executor, +:root:not([data-theme="dark"]) .pf-v5-c-card, +:root:not([data-theme="dark"]) .pf-v5-c-login__main, +:root:not([data-theme="dark"]) .pf-v5-c-modal-box, +:root:not([data-theme="dark"]) .ak-flow-executor { + background: var(--porcelain-base) !important; + border: 1px solid var(--porcelain-border) !important; + box-shadow: + 0 1px 3px var(--porcelain-shadow), + 0 10px 40px rgba(30, 58, 138, 0.12), + inset 0 1px 0 rgba(255, 255, 255, 0.9), + inset 0 -1px 0 rgba(30, 58, 138, 0.05) !important; + border-radius: 12px !important; + position: relative; + overflow: hidden; +} + +/* Subtle shine effect for porcelain */ +[data-theme="light"] .pf-v5-c-card::after, +[data-theme="light"] .pf-v5-c-login__main::after, +:root:not([data-theme="dark"]) .pf-v5-c-card::after, +:root:not([data-theme="dark"]) .pf-v5-c-login__main::after { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient( + 45deg, + transparent 30%, + rgba(255, 255, 255, 0.3) 50%, + transparent 70% + ); + opacity: 0; + transition: opacity 0.3s; + pointer-events: none; +} + +[data-theme="light"] .pf-v5-c-card:hover::after, +[data-theme="light"] .pf-v5-c-login__main:hover::after, +:root:not([data-theme="dark"]) .pf-v5-c-card:hover::after, +:root:not([data-theme="dark"]) .pf-v5-c-login__main:hover::after { + opacity: 1; +} + +/* ======================================== + DARK MODE - Royal Depths with Gold Light + ======================================== */ +[data-theme="dark"] { + /* Background - Deep royal blue */ + --pf-v5-global-BackgroundColor--100: var(--royal-blue-900); + --pf-v5-global-BackgroundColor--200: var(--royal-blue-800); + + /* Primary colors - Gold illumination */ + --pf-v5-global-primary-color--100: var(--gold-500); + --pf-v5-global-primary-color--200: var(--gold-400); + --pf-v5-global-link-Color: var(--gold-400); + --pf-v5-global-link-Color--hover: var(--gold-300); + + /* Accent colors */ + --pf-v5-global-active-color--100: var(--gold-500); + --pf-v5-global-active-color--200: var(--gold-400); + + /* Text colors */ + --pf-v5-global-Color--100: #f8fafc; + --pf-v5-global-Color--200: #e2e8f0; + --pf-v5-global-Color--300: var(--gold-300); + + /* Border colors */ + --pf-v5-global-BorderColor--100: rgba(245, 158, 11, 0.2); + --pf-v5-global-BorderColor--200: rgba(245, 158, 11, 0.3); +} + +[data-theme="dark"] body { + background: linear-gradient(135deg, var(--royal-blue-900) 0%, #0f1e42 50%, var(--royal-blue-800) 100%); + position: relative; +} + +/* Dot pattern for dark mode - illuminated by gold */ +[data-theme="dark"] body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: radial-gradient(circle, rgba(245, 158, 11, 0.08) 1px, transparent 1px); + background-size: 20px 20px; + pointer-events: none; + z-index: 0; +} + +/* Additional subtle glow pattern */ +[data-theme="dark"] body::after { + content: ''; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.03) 0%, transparent 50%); + pointer-events: none; + z-index: 0; +} + +/* Obsidian effect for cards in dark mode */ +[data-theme="dark"] .pf-v5-c-card, +[data-theme="dark"] .pf-v5-c-login__main, +[data-theme="dark"] .pf-v5-c-modal-box, +[data-theme="dark"] .ak-flow-executor { + background: linear-gradient(135deg, var(--obsidian-base) 0%, var(--obsidian-light) 100%) !important; + border: 1px solid rgba(245, 158, 11, 0.2) !important; + box-shadow: + 0 0 1px rgba(245, 158, 11, 0.3), + 0 4px 20px rgba(0, 0, 0, 0.5), + 0 8px 40px rgba(0, 0, 0, 0.4), + inset 0 1px 0 rgba(245, 158, 11, 0.1), + inset 0 -1px 0 rgba(0, 0, 0, 0.5), + 0 0 80px rgba(245, 158, 11, 0.05) !important; + border-radius: 12px !important; + position: relative; + overflow: hidden; +} + +/* Gold glow effect on hover */ +[data-theme="dark"] .pf-v5-c-card:hover, +[data-theme="dark"] .pf-v5-c-login__main:hover { + border-color: rgba(245, 158, 11, 0.4) !important; + box-shadow: + 0 0 2px rgba(245, 158, 11, 0.5), + 0 4px 20px rgba(0, 0, 0, 0.5), + 0 8px 40px rgba(0, 0, 0, 0.4), + inset 0 1px 0 rgba(245, 158, 11, 0.2), + inset 0 -1px 0 rgba(0, 0, 0, 0.5), + 0 0 100px rgba(245, 158, 11, 0.1) !important; +} + +/* Obsidian glass-like reflection */ +[data-theme="dark"] .pf-v5-c-card::before, +[data-theme="dark"] .pf-v5-c-login__main::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 50%; + background: linear-gradient( + to bottom, + rgba(245, 158, 11, 0.05) 0%, + transparent 100% + ); + pointer-events: none; +} + +/* ======================================== + BUTTONS & INTERACTIVE ELEMENTS + ======================================== */ + +/* Primary buttons - Gold in dark, Royal blue in light */ +[data-theme="dark"] .pf-v5-c-button.pf-m-primary, +[data-theme="dark"] button[type="submit"]:not(.pf-m-secondary) { + background: linear-gradient(135deg, var(--gold-600) 0%, var(--gold-500) 100%) !important; + border: 1px solid var(--gold-400) !important; + color: var(--royal-blue-900) !important; + font-weight: 600; + box-shadow: + 0 0 10px rgba(245, 158, 11, 0.3), + 0 4px 12px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; + transition: all 0.3s ease; +} + +[data-theme="dark"] .pf-v5-c-button.pf-m-primary:hover, +[data-theme="dark"] button[type="submit"]:not(.pf-m-secondary):hover { + background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%) !important; + box-shadow: + 0 0 20px rgba(245, 158, 11, 0.5), + 0 6px 16px rgba(0, 0, 0, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; + transform: translateY(-1px); +} + +[data-theme="light"] .pf-v5-c-button.pf-m-primary, +[data-theme="light"] button[type="submit"]:not(.pf-m-secondary), +:root:not([data-theme="dark"]) .pf-v5-c-button.pf-m-primary, +:root:not([data-theme="dark"]) button[type="submit"]:not(.pf-m-secondary) { + background: linear-gradient(135deg, var(--royal-blue-700) 0%, var(--royal-blue-600) 100%) !important; + border: 1px solid var(--royal-blue-800) !important; + color: #ffffff !important; + font-weight: 600; + box-shadow: + 0 0 10px rgba(30, 58, 138, 0.2), + 0 4px 12px rgba(30, 58, 138, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; + transition: all 0.3s ease; +} + +[data-theme="light"] .pf-v5-c-button.pf-m-primary:hover, +[data-theme="light"] button[type="submit"]:not(.pf-m-secondary):hover, +:root:not([data-theme="dark"]) .pf-v5-c-button.pf-m-primary:hover, +:root:not([data-theme="dark"]) button[type="submit"]:not(.pf-m-secondary):hover { + background: linear-gradient(135deg, var(--royal-blue-800) 0%, var(--royal-blue-700) 100%) !important; + box-shadow: + 0 0 15px rgba(30, 58, 138, 0.3), + 0 6px 16px rgba(30, 58, 138, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; + transform: translateY(-1px); +} + +/* Input fields */ +[data-theme="dark"] .pf-v5-c-form-control, +[data-theme="dark"] input, +[data-theme="dark"] textarea, +[data-theme="dark"] select { + background: rgba(10, 14, 26, 0.6) !important; + border: 1px solid rgba(245, 158, 11, 0.2) !important; + color: #f8fafc !important; + transition: all 0.3s ease; +} + +[data-theme="dark"] .pf-v5-c-form-control:focus, +[data-theme="dark"] input:focus, +[data-theme="dark"] textarea:focus, +[data-theme="dark"] select:focus { + border-color: var(--gold-500) !important; + box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important; + outline: none; +} + +[data-theme="light"] .pf-v5-c-form-control, +[data-theme="light"] input, +[data-theme="light"] textarea, +[data-theme="light"] select, +:root:not([data-theme="dark"]) .pf-v5-c-form-control, +:root:not([data-theme="dark"]) input, +:root:not([data-theme="dark"]) textarea, +:root:not([data-theme="dark"]) select { + background: rgba(255, 255, 255, 0.8) !important; + border: 1px solid var(--porcelain-border) !important; + color: var(--royal-blue-900) !important; + transition: all 0.3s ease; +} + +[data-theme="light"] .pf-v5-c-form-control:focus, +[data-theme="light"] input:focus, +[data-theme="light"] textarea:focus, +[data-theme="light"] select:focus, +:root:not([data-theme="dark"]) .pf-v5-c-form-control:focus, +:root:not([data-theme="dark"]) input:focus, +:root:not([data-theme="dark"]) textarea:focus, +:root:not([data-theme="dark"]) select:focus { + border-color: var(--royal-blue-600) !important; + box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important; + outline: none; +} + +/* ======================================== + NAVIGATION & HEADER + ======================================== */ + +[data-theme="dark"] .pf-v5-c-page__header, +[data-theme="dark"] .pf-v5-c-masthead { + background: linear-gradient(90deg, var(--obsidian-base) 0%, var(--obsidian-light) 100%) !important; + border-bottom: 1px solid rgba(245, 158, 11, 0.2) !important; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(245, 158, 11, 0.05) !important; +} + +[data-theme="light"] .pf-v5-c-page__header, +[data-theme="light"] .pf-v5-c-masthead, +:root:not([data-theme="dark"]) .pf-v5-c-page__header, +:root:not([data-theme="dark"]) .pf-v5-c-masthead { + background: var(--porcelain-base) !important; + border-bottom: 1px solid var(--porcelain-border) !important; + box-shadow: 0 2px 12px var(--porcelain-shadow) !important; +} + +/* Logo area gold accent in dark mode */ +[data-theme="dark"] .pf-v5-c-brand { + filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.3)); +} + +/* ======================================== + SCROLLBARS + ======================================== */ + +[data-theme="dark"] ::-webkit-scrollbar { + width: 12px; + height: 12px; +} + +[data-theme="dark"] ::-webkit-scrollbar-track { + background: var(--royal-blue-900); +} + +[data-theme="dark"] ::-webkit-scrollbar-thumb { + background: linear-gradient(135deg, var(--gold-700) 0%, var(--gold-600) 100%); + border-radius: 6px; + border: 2px solid var(--royal-blue-900); +} + +[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { + background: linear-gradient(135deg, var(--gold-600) 0%, var(--gold-500) 100%); +} + +[data-theme="light"] ::-webkit-scrollbar, +:root:not([data-theme="dark"]) ::-webkit-scrollbar { + width: 12px; + height: 12px; +} + +[data-theme="light"] ::-webkit-scrollbar-track, +:root:not([data-theme="dark"]) ::-webkit-scrollbar-track { + background: #fef3c7; +} + +[data-theme="light"] ::-webkit-scrollbar-thumb, +:root:not([data-theme="dark"]) ::-webkit-scrollbar-thumb { + background: linear-gradient(135deg, var(--royal-blue-600) 0%, var(--royal-blue-700) 100%); + border-radius: 6px; + border: 2px solid #fef3c7; +} + +[data-theme="light"] ::-webkit-scrollbar-thumb:hover, +:root:not([data-theme="dark"]) ::-webkit-scrollbar-thumb:hover { + background: linear-gradient(135deg, var(--royal-blue-700) 0%, var(--royal-blue-800) 100%); +} + +/* ======================================== + SPECIAL EFFECTS + ======================================== */ + +/* Gold shimmer animation for important elements in dark mode */ +@keyframes gold-shimmer { + 0% { background-position: -200% center; } + 100% { background-position: 200% center; } +} + +[data-theme="dark"] .ak-flow-executor .pf-v5-c-title, +[data-theme="dark"] h1, +[data-theme="dark"] h2 { + background: linear-gradient( + 90deg, + var(--gold-400) 0%, + var(--gold-200) 50%, + var(--gold-400) 100% + ); + background-size: 200% auto; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* Porcelain shine in light mode */ +[data-theme="light"] h1, +[data-theme="light"] h2, +:root:not([data-theme="dark"]) h1, +:root:not([data-theme="dark"]) h2 { + color: var(--royal-blue-900); + text-shadow: 0 1px 2px rgba(30, 58, 138, 0.1); +} + +/* Loading spinners */ +[data-theme="dark"] .pf-v5-c-spinner { + color: var(--gold-500) !important; +} + +[data-theme="light"] .pf-v5-c-spinner, +:root:not([data-theme="dark"]) .pf-v5-c-spinner { + color: var(--royal-blue-600) !important; +} + +/* Alerts and notifications */ +[data-theme="dark"] .pf-v5-c-alert { + border-left: 4px solid var(--gold-500) !important; + background: rgba(10, 14, 26, 0.8) !important; +} + +[data-theme="light"] .pf-v5-c-alert, +:root:not([data-theme="dark"]) .pf-v5-c-alert { + border-left: 4px solid var(--royal-blue-600) !important; + background: rgba(255, 255, 255, 0.9) !important; +} + +/* ======================================== + COFFEE THEME EASTER EGG + ======================================== */ + +/* Subtle coffee bean pattern overlay (very subtle, only visible on close inspection) */ +.pf-v5-c-login__main::after { + content: ''; + position: absolute; + bottom: 10px; + right: 10px; + width: 30px; + height: 30px; + background-image: url('data:image/svg+xml,'); + opacity: 0.05; + pointer-events: none; +} + +[data-theme="dark"] .pf-v5-c-login__main::after { + color: var(--gold-500); +} + +[data-theme="light"] .pf-v5-c-login__main::after, +:root:not([data-theme="dark"]) .pf-v5-c-login__main::after { + color: var(--royal-blue-600); +} diff --git a/media/nucleo-icon.svg b/media/nucleo-icon.svg new file mode 100644 index 0000000..c7323b0 --- /dev/null +++ b/media/nucleo-icon.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/media/nucleo-logo.svg b/media/nucleo-logo.svg new file mode 100644 index 0000000..7a9961c --- /dev/null +++ b/media/nucleo-logo.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + NUCLEO + + + + + + V3 + + + + + +