denis/gremiumhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add new design closer to gremiumhub landing

Browse Source
This commit is contained in:
Denis Lugowski
2026-02-15 09:59:15 +01:00
parent 454321dad2
commit 05b89778cf
10 changed files with 358 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
deployment/keycloak-theme/legalconsenthub/login/resources/css/styles.css
View File

@@ -1,20 +1,46 @@
/* LegalConsentHub Keycloak Theme - Matching Nuxt UI 4 Styling */
/* Compatible with Keycloak 26+ PatternFly-based themes */
/* CSS Variables matching Nuxt UI green/zinc theme */
/* CSS Variables matching Nuxt UI teal/cyan/violet theme */
:root {
/* Green palette (primary) */
--lch-green-50: #effdf5;
--lch-green-100: #d9fbe8;
--lch-green-200: #b3f5d1;
--lch-green-300: #75edae;
--lch-green-400: #00dc82;
--lch-green-500: #00c16a;
--lch-green-600: #00a155;
--lch-green-700: #007f45;
--lch-green-800: #016538;
--lch-green-900: #0a5331;
--lch-green-950: #052e16;
/* Teal palette (primary) */
--lch-teal-50: #f0fdfa;
--lch-teal-100: #ccfbf1;
--lch-teal-200: #99f6e4;
--lch-teal-300: #5eead4;
--lch-teal-400: #2dd4bf;
--lch-teal-500: #14b8a6;
--lch-teal-600: #0d9488;
--lch-teal-700: #0f766e;
--lch-teal-800: #115e59;
--lch-teal-900: #134e4a;
--lch-teal-950: #042f2e;
/* Cyan palette (accent) */
--lch-cyan-50: #ecfeff;
--lch-cyan-100: #cffafe;
--lch-cyan-200: #a5f3fc;
--lch-cyan-300: #67e8f9;
--lch-cyan-400: #22d3ee;
--lch-cyan-500: #06b6d4;
--lch-cyan-600: #0891b2;
--lch-cyan-700: #0e7490;
--lch-cyan-800: #155e75;
--lch-cyan-900: #164e63;
--lch-cyan-950: #083344;
/* Violet palette (highlight accent) */
--lch-violet-50: #f5f3ff;
--lch-violet-100: #ede9fe;
--lch-violet-200: #ddd6fe;
--lch-violet-300: #c4b5fd;
--lch-violet-400: #a78bfa;
--lch-violet-500: #8b5cf6;
--lch-violet-600: #7c3aed;
--lch-violet-700: #6d28d9;
--lch-violet-800: #5b21b6;
--lch-violet-900: #4c1d95;
--lch-violet-950: #2e1065;
/* Zinc palette (neutral) */
--lch-zinc-50: #fafafa;
@@ -40,8 +66,56 @@ html.login-pf body {
height: 100%;
margin: 0;
padding: 0;
background: linear-gradient(135deg, var(--lch-zinc-100) 0%, var(--lch-zinc-200) 100%) !important;
background: linear-gradient(180deg, #ffffff 0%, var(--lch-teal-50) 50%, var(--lch-cyan-50) 100%) !important;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
position: relative !important;
overflow: hidden !important;
}
/* Decorative gradient orbs - matching auth layout */
html.login-pf::before,
html.login-pf::after {
content: "" !important;
position: fixed !important;
border-radius: 50% !important;
filter: blur(80px) !important;
opacity: 0.4 !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* Teal/cyan orb - top right */
html.login-pf::before {
width: 400px !important;
height: 400px !important;
top: -100px !important;
right: -100px !important;
background: linear-gradient(135deg, var(--lch-teal-500), var(--lch-cyan-400)) !important;
}
/* Cyan/teal orb - bottom left */
html.login-pf::after {
width: 300px !important;
height: 300px !important;
bottom: -50px !important;
left: -50px !important;
background: linear-gradient(135deg, var(--lch-cyan-400), var(--lch-teal-500)) !important;
}
/* Violet orb via body pseudo-element - bottom right */
html.login-pf body::before {
content: "" !important;
position: fixed !important;
width: 200px !important;
height: 200px !important;
bottom: -50px !important;
right: 20% !important;
border-radius: 50% !important;
filter: blur(80px) !important;
opacity: 0.3 !important;
background: linear-gradient(135deg, var(--lch-violet-400), var(--lch-violet-600)) !important;
pointer-events: none !important;
z-index: 0 !important;
}
.login-pf-page {
@@ -52,6 +126,8 @@ html.login-pf body {
min-height: 100vh !important;
padding: 1rem !important;
box-sizing: border-box !important;
position: relative !important;
z-index: 1 !important;
}
/* Hide the default header with realm name */
@@ -139,8 +215,8 @@ input[type="email"] {
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
border-color: var(--lch-green-400) !important;
box-shadow: 0 0 0 3px rgba(0, 220, 130, 0.2) !important;
border-color: var(--lch-teal-400) !important;
box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2) !important;
}
.pf-c-form-control:hover,
@@ -159,28 +235,29 @@ input[type="email"]:hover {
font-weight: 500 !important;
line-height: 1.5 !important;
color: white !important;
background-color: var(--lch-green-500) !important;
background: linear-gradient(135deg, var(--lch-teal-500) 0%, var(--lch-cyan-500) 100%) !important;
border: none !important;
border-radius: 0.5rem !important;
border-radius: 0.75rem !important;
cursor: pointer !important;
transition: background-color 0.15s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.15s ease-in-out !important;
transition: all 0.2s ease-in-out !important;
text-align: center !important;
box-sizing: border-box !important;
box-shadow: 0 4px 14px -2px rgba(20, 184, 166, 0.4) !important;
}
#kc-login:hover {
background-color: var(--lch-green-400) !important;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
background: linear-gradient(135deg, var(--lch-cyan-500) 0%, var(--lch-violet-500) 100%) !important;
box-shadow: 0 6px 20px -2px rgba(139, 92, 246, 0.4) !important;
}
#kc-login:active {
background-color: var(--lch-green-700) !important;
background: linear-gradient(135deg, var(--lch-teal-600) 0%, var(--lch-cyan-600) 100%) !important;
transform: scale(0.98) !important;
}
#kc-login:focus {
outline: none !important;
box-shadow: 0 0 0 3px rgba(0, 220, 130, 0.3) !important;
box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.3) !important;
}
/* Secondary/link buttons */
@@ -191,7 +268,7 @@ input[type="email"]:hover {
padding: 0.5rem 1rem !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
color: var(--lch-green-600) !important;
color: var(--lch-teal-600) !important;
background-color: transparent !important;
border: none !important;
cursor: pointer !important;
@@ -199,19 +276,19 @@ input[type="email"]:hover {
}
.pf-c-button.pf-m-link:hover {
color: var(--lch-green-700) !important;
color: var(--lch-teal-700) !important;
text-decoration: underline !important;
}
/* Links */
a {
color: var(--lch-green-600) !important;
color: var(--lch-teal-600) !important;
text-decoration: none !important;
transition: color 0.15s ease-in-out !important;
}
a:hover {
color: var(--lch-green-700) !important;
color: var(--lch-teal-700) !important;
text-decoration: underline !important;
}
@@ -241,9 +318,9 @@ a:hover {
.alert-success,
.pf-m-success {
background-color: var(--lch-green-50) !important;
border: 1px solid var(--lch-green-200) !important;
color: var(--lch-green-700) !important;
background-color: var(--lch-teal-50) !important;
border: 1px solid var(--lch-teal-200) !important;
color: var(--lch-teal-700) !important;
}
.alert-info,
@@ -257,7 +334,7 @@ a:hover {
input[type="checkbox"] {
width: 1rem !important;
height: 1rem !important;
accent-color: var(--lch-green-500) !important;
accent-color: var(--lch-teal-500) !important;
border-radius: 0.25rem !important;
margin-right: 0.5rem !important;
}
@@ -372,7 +449,7 @@ input[type="checkbox"] {
}
.change-username-link:hover {
color: var(--lch-green-600) !important;
color: var(--lch-teal-600) !important;
text-decoration: none !important;
}
@@ -419,7 +496,17 @@ input[readonly]:hover {
@media (prefers-color-scheme: dark) {
html.login-pf,
html.login-pf body {
background: linear-gradient(135deg, var(--lch-zinc-900) 0%, var(--lch-zinc-950) 100%) !important;
background: linear-gradient(180deg, #0a0a0a 0%, var(--lch-teal-950) 50%, var(--lch-cyan-950) 100%) !important;
}
/* Dark mode orbs - reduced opacity */
html.login-pf::before,
html.login-pf::after {
opacity: 0.2 !important;
}
html.login-pf body::before {
opacity: 0.15 !important;
}
.card-pf {
@@ -458,16 +545,16 @@ input[readonly]:hover {
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
border-color: var(--lch-green-400) !important;
box-shadow: 0 0 0 3px rgba(0, 220, 130, 0.25) !important;
border-color: var(--lch-teal-400) !important;
box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.25) !important;
}
a {
color: var(--lch-green-400) !important;
color: var(--lch-teal-400) !important;
}
a:hover {
color: var(--lch-green-300) !important;
color: var(--lch-teal-300) !important;
}
#kc-form-options label,
@@ -496,9 +583,9 @@ input[readonly]:hover {
.alert-success,
.pf-m-success {
background-color: var(--lch-green-950) !important;
border-color: var(--lch-green-800) !important;
color: var(--lch-green-300) !important;
background-color: var(--lch-teal-950) !important;
border-color: var(--lch-teal-800) !important;
color: var(--lch-teal-300) !important;
}
.alert-info,
@@ -549,7 +636,7 @@ input[readonly]:hover {
}
.change-username-link:hover {
color: var(--lch-green-400) !important;
color: var(--lch-teal-400) !important;
}
.input-error {