nucleo000/authentikNucleo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9431ddc6da5aa274188cb2dba7521f633692e5dc
authentikNucleo/media/nucleo-custom.css
josedario87 d51ad0191e
All checks were successful
deploy-authentik / deploy (push) Successful in 22s
Details
agregando archivos de customization
2025-10-05 19:35:48 -06:00

505 lines
16 KiB
CSS
Raw Blame History

/**
* 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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><path d="M18 8h1a4 4 0 0 1 0 8h-1M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8zM6 1v3M10 1v3M14 1v3"/></svg>');
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);
}
Reference in New Issue View Git Blame Copy Permalink