feat: redesign entire CRM theme from brutalist to glassmorphism
Templates modified: - templates/base.html.twig: header frosted glass (glass-heavy, backdrop-blur-24px), footer dark glass (glass-dark-heavy), cookie banner floating glass panel with rounded corners, all buttons converted to btn-glass/btn-gold/btn-dark classes, body background with radial gradient mesh (gold + indigo orbs), removed all border-4/border-8 thick borders, added rounded-lg corners on nav items - templates/admin/_layout.html.twig: sidebar dark glass (glass-dark-heavy), nav items with sidebar-nav-item class (rounded-lg, hover glow), active items with gold glow shadow, avatar rounded-lg, dropdown borders changed to border-white/10, mobile overlay with backdrop-blur-4px - templates/home/index.html.twig: login card with glass-heavy + glass-gold header, inputs with input-glass class (frosted blur, gold focus ring), buttons btn-gold with hover lift effect - templates/security/login.html.twig: same glass treatment as home - templates/security/2fa_*.html.twig: glass cards and inputs - templates/security/forgot_password.html.twig: glass treatment - templates/security/set_password*.html.twig: glass treatment - templates/legal/_layout.html.twig: glass header - templates/legal/tarif.html.twig: tabs converted to glass/glass-dark, all pricing cards glass/glass-gold, tables glass with rounded overflow - templates/external_redirect.html.twig: glass card SCSS (assets/app.scss): - Added CSS custom properties: --glass-bg, --glass-border, --glass-blur, --gold, --gold-glow, --radius, --shadow-glass, etc. - Added glass classes: .glass, .glass-heavy, .glass-dark, .glass-dark-heavy, .glass-gold (each with backdrop-filter, semi-transparent bg, subtle borders) - Added button classes: .btn-glass, .btn-gold, .btn-dark (with hover lift, glow shadows, smooth cubic-bezier transitions) - Added .input-glass (frosted input with gold focus ring) - Added .sidebar-nav-item with .active/.active-danger states - Added .glass-bg body class with radial gradient background - Added custom scrollbar for sidebar - Moved admin layout styles from inline <style> to SCSS JavaScript (assets/app.js): - Updated tarif tab classes from brutalist to glass Config: - .env.local: OAUTH_KEYCLOAK_REALM changed from siteconseil to master Design direction: frosted glass panels over gradient mesh background, semi-transparent surfaces, subtle 1px borders with white/20 opacity, soft box-shadows, rounded-16px corners, smooth hover transitions with translateY(-1px) lift effect, gold (#fabf04) accent glow shadows Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Serreau Jovann
@@ -142,8 +142,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// Tarif tabs
|
||||
const tarifTabs = document.getElementById('tarif-tabs');
|
||||
if (tarifTabs) {
|
||||
const active = 'px-6 py-3 font-black uppercase text-sm tracking-widest bg-gray-900 text-white border-2 border-gray-900 border-b-0 cursor-pointer';
|
||||
const inactive = 'px-6 py-3 font-black uppercase text-sm tracking-widest bg-white text-gray-900 border-2 border-gray-900 border-b-0 cursor-pointer hover:bg-gray-100 transition-all';
|
||||
const active = 'px-6 py-3 font-bold uppercase text-sm tracking-wider glass-dark text-white border border-white/20 border-b-0 cursor-pointer';
|
||||
const inactive = 'px-6 py-3 font-bold uppercase text-sm tracking-wider glass text-gray-700 border border-gray-200 border-b-0 cursor-pointer hover:bg-white/80 transition-all';
|
||||
|
||||
tarifTabs.querySelectorAll('[data-tab]').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
|
||||
243
assets/app.scss
243
assets/app.scss
@@ -1,5 +1,152 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* ─── Glass Design System ─── */
|
||||
|
||||
:root {
|
||||
--glass-bg: rgba(255, 255, 255, 0.65);
|
||||
--glass-bg-heavy: rgba(255, 255, 255, 0.85);
|
||||
--glass-border: rgba(255, 255, 255, 0.3);
|
||||
--glass-border-strong: rgba(255, 255, 255, 0.5);
|
||||
--glass-dark: rgba(17, 24, 39, 0.85);
|
||||
--glass-dark-heavy: rgba(17, 24, 39, 0.92);
|
||||
--glass-blur: 16px;
|
||||
--glass-blur-heavy: 24px;
|
||||
--gold: #fabf04;
|
||||
--gold-light: rgba(250, 191, 4, 0.15);
|
||||
--gold-glow: rgba(250, 191, 4, 0.4);
|
||||
--radius: 16px;
|
||||
--radius-sm: 10px;
|
||||
--radius-xs: 6px;
|
||||
--shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
--shadow-glass-hover: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
--shadow-gold: 0 4px 24px rgba(250, 191, 4, 0.25);
|
||||
}
|
||||
|
||||
/* ─── Animated background ─── */
|
||||
|
||||
body.glass-bg {
|
||||
background: #f0f0f5;
|
||||
background-image:
|
||||
radial-gradient(ellipse at 20% 50%, rgba(250, 191, 4, 0.08) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 80% 20%, rgba(99, 102, 241, 0.06) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 50% 80%, rgba(250, 191, 4, 0.05) 0%, transparent 50%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* ─── Glass panel ─── */
|
||||
|
||||
.glass {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-glass);
|
||||
}
|
||||
|
||||
.glass-heavy {
|
||||
background: var(--glass-bg-heavy);
|
||||
backdrop-filter: blur(var(--glass-blur-heavy));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-heavy));
|
||||
border: 1px solid var(--glass-border-strong);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-glass);
|
||||
}
|
||||
|
||||
.glass-dark {
|
||||
background: var(--glass-dark);
|
||||
backdrop-filter: blur(var(--glass-blur-heavy));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-heavy));
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.glass-dark-heavy {
|
||||
background: var(--glass-dark-heavy);
|
||||
backdrop-filter: blur(var(--glass-blur-heavy));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-heavy));
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.glass-gold {
|
||||
background: rgba(250, 191, 4, 0.12);
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
border: 1px solid rgba(250, 191, 4, 0.3);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-gold);
|
||||
}
|
||||
|
||||
/* ─── Glass buttons ─── */
|
||||
|
||||
.btn-glass {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-xs);
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--glass-bg-heavy);
|
||||
box-shadow: var(--shadow-glass-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-gold {
|
||||
background: var(--gold);
|
||||
border: 1px solid rgba(250, 191, 4, 0.6);
|
||||
border-radius: var(--radius-xs);
|
||||
box-shadow: var(--shadow-gold);
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 6px 28px rgba(250, 191, 4, 0.4);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
background: var(--glass-dark-heavy);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--radius-xs);
|
||||
color: white;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: rgba(99, 102, 241, 0.85);
|
||||
border-color: rgba(99, 102, 241, 0.4);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Glass input ─── */
|
||||
|
||||
.input-glass {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: var(--radius-xs);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-color: var(--gold);
|
||||
box-shadow: 0 0 0 3px var(--gold-light), var(--shadow-glass);
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Page containers ─── */
|
||||
|
||||
.page-container {
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
@@ -13,9 +160,9 @@
|
||||
}
|
||||
|
||||
.heading-page {
|
||||
border-bottom: 4px solid #111827;
|
||||
border-bottom: 2px solid var(--gold);
|
||||
display: inline-block;
|
||||
padding-bottom: 0.25rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.admin-content .page-container {
|
||||
@@ -26,3 +173,95 @@
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Admin layout ─── */
|
||||
|
||||
.admin-wrapper {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.admin-sidebar {
|
||||
width: 260px;
|
||||
flex-shrink: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.admin-sidebar {
|
||||
position: fixed;
|
||||
left: -260px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 50;
|
||||
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.admin-sidebar.open { left: 0; }
|
||||
.admin-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 40;
|
||||
}
|
||||
.admin-sidebar.open + .admin-overlay { display: block; }
|
||||
}
|
||||
|
||||
/* ─── Sidebar nav items ─── */
|
||||
|
||||
.sidebar-nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.625rem 0.875rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: all 0.2s ease;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--gold);
|
||||
color: #111827;
|
||||
box-shadow: 0 2px 12px rgba(250, 191, 4, 0.3);
|
||||
}
|
||||
|
||||
&.active-danger {
|
||||
background: rgba(220, 38, 38, 0.8);
|
||||
color: white;
|
||||
box-shadow: 0 2px 12px rgba(220, 38, 38, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Scrollbar styling ─── */
|
||||
|
||||
.admin-sidebar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.admin-sidebar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.admin-sidebar::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ─── Smooth transitions ─── */
|
||||
|
||||
* {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user