Refactoring AI candidate analysis: UI improvements, data normalization, provider management and real-time score clamping
This commit is contained in:
jeremy bayse
@@ -1,3 +1,4 @@
|
||||
@import './tokens.css';
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@tailwind utilities;
|
||||
271
resources/css/tokens.css
Normal file
271
resources/css/tokens.css
Normal file
@@ -0,0 +1,271 @@
|
||||
/**
|
||||
* design-tokens/tokens.css
|
||||
* Variables CSS globales — RecruitQuizz / CABM
|
||||
* À importer dans resources/css/app.css :
|
||||
* @import '../../../design-tokens/tokens.css';
|
||||
*/
|
||||
|
||||
/* ─── COULEURS ────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* Primaires */
|
||||
--color-primary: #1a4b8c;
|
||||
--color-primary-dark: #122f5a;
|
||||
--color-primary-light: #3a7abf;
|
||||
--color-primary-soft: rgba(26, 75, 140, 0.08);
|
||||
|
||||
/* Accent */
|
||||
--color-accent: #c8102e;
|
||||
--color-accent-soft: rgba(200, 16, 46, 0.10);
|
||||
|
||||
/* Or (highlight) */
|
||||
--color-gold: #f5a800;
|
||||
--color-gold-soft: rgba(245, 168, 0, 0.12);
|
||||
--color-gold-on: #3a2800; /* texte sur fond or */
|
||||
|
||||
/* Neutres warm */
|
||||
--color-bg: #f0ece4; /* fond global */
|
||||
--color-surface: #faf9f7; /* cartes */
|
||||
--color-sand: #e8e0d0; /* sable */
|
||||
--color-border: rgba(45, 45, 45, 0.07);
|
||||
|
||||
/* Texte */
|
||||
--color-text: #2d2d2d;
|
||||
--color-text-muted: rgba(45, 45, 45, 0.50);
|
||||
--color-text-faint: rgba(45, 45, 45, 0.28);
|
||||
|
||||
/* Sémantiques */
|
||||
--color-success: #10b981;
|
||||
--color-success-soft: rgba(16, 185, 129, 0.10);
|
||||
--color-warning: #f5a800;
|
||||
--color-danger: #c8102e;
|
||||
--color-info: #3a7abf;
|
||||
|
||||
/* Sidebar */
|
||||
--sidebar-bg: #1a4b8c;
|
||||
--sidebar-text: rgba(255, 255, 255, 0.72);
|
||||
--sidebar-active-bg: #f5a800;
|
||||
--sidebar-active-text: #3a2800;
|
||||
--sidebar-border: rgba(255, 255, 255, 0.07);
|
||||
--sidebar-width: 220px;
|
||||
--sidebar-width-sm: 64px;
|
||||
|
||||
/* Layout */
|
||||
--header-height: 60px;
|
||||
--navbar-height: 40px;
|
||||
}
|
||||
|
||||
/* ─── DARK MODE ───────────────────────────────────────────────────────────── */
|
||||
.dark {
|
||||
--color-primary: #4a8fd4;
|
||||
--color-primary-soft: rgba(74, 143, 212, 0.12);
|
||||
|
||||
--color-bg: #0f1923;
|
||||
--color-surface: #162130;
|
||||
--color-border: rgba(255, 255, 255, 0.06);
|
||||
|
||||
--color-text: #e8e8e8;
|
||||
--color-text-muted: rgba(232, 232, 232, 0.50);
|
||||
--color-text-faint: rgba(232, 232, 232, 0.25);
|
||||
|
||||
--color-success: #34d399;
|
||||
--color-success-soft: rgba(16, 185, 129, 0.12);
|
||||
--color-accent: #ff4d6a;
|
||||
|
||||
--sidebar-bg: #0a111a;
|
||||
--sidebar-border: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* ─── TYPOGRAPHIE ─────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
--font-sans: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-serif: 'Merriweather', Georgia, serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
|
||||
/* Échelle */
|
||||
--text-2xs: 0.625rem; /* 10px — labels uppercase */
|
||||
--text-xs: 0.75rem; /* 12px */
|
||||
--text-sm: 0.8125rem; /* 13px */
|
||||
--text-base: 0.875rem; /* 14px */
|
||||
--text-md: 1rem; /* 16px */
|
||||
--text-lg: 1.0625rem; /* 17px */
|
||||
--text-xl: 1.125rem; /* 18px */
|
||||
--text-2xl: 1.25rem; /* 20px */
|
||||
--text-3xl: 1.5rem; /* 24px */
|
||||
--text-4xl: 2rem; /* 32px */
|
||||
}
|
||||
|
||||
/* ─── ESPACEMENT ──────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-7: 28px;
|
||||
--space-8: 32px;
|
||||
--space-10: 40px;
|
||||
--space-12: 48px;
|
||||
--space-16: 64px;
|
||||
}
|
||||
|
||||
/* ─── RAYONS ──────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
--radius-sm: 6px;
|
||||
--radius: 8px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 14px;
|
||||
--radius-2xl: 16px;
|
||||
--radius-3xl: 20px;
|
||||
--radius-full: 9999px;
|
||||
/* Tokens sémantiques */
|
||||
--radius-card: 16px;
|
||||
--radius-btn: 10px;
|
||||
--radius-badge: 20px;
|
||||
--radius-input: 10px;
|
||||
}
|
||||
|
||||
/* ─── OMBRES ──────────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
--shadow-xs: 0 1px 3px rgba(0,0,0,0.05);
|
||||
--shadow-sm: 0 1px 4px rgba(0,0,0,0.07);
|
||||
--shadow: 0 2px 8px rgba(0,0,0,0.09);
|
||||
--shadow-md: 0 4px 16px rgba(0,0,0,0.10);
|
||||
--shadow-lg: 0 8px 28px rgba(0,0,0,0.12);
|
||||
--shadow-primary: 0 4px 16px rgba(26,75,140,0.20);
|
||||
--shadow-gold: 0 4px 16px rgba(245,168,0,0.30);
|
||||
--shadow-accent: 0 4px 16px rgba(200,16,46,0.18);
|
||||
}
|
||||
|
||||
/* ─── TRANSITIONS ─────────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
--transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
/* ─── COMPOSANTS DE BASE ──────────────────────────────────────────────────── */
|
||||
|
||||
/* --- Carte --- */
|
||||
.rq-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-card);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* --- Bouton primaire (or) --- */
|
||||
.rq-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: var(--radius-btn);
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 800;
|
||||
font-size: var(--text-sm);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
.rq-btn-primary {
|
||||
background: var(--color-gold);
|
||||
color: var(--color-gold-on);
|
||||
box-shadow: var(--shadow-gold);
|
||||
}
|
||||
.rq-btn-primary:hover {
|
||||
filter: brightness(1.06);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 20px rgba(245,168,0,0.40);
|
||||
}
|
||||
.rq-btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
border: 1.5px solid var(--color-border);
|
||||
}
|
||||
.rq-btn-ghost:hover {
|
||||
background: var(--color-primary-soft);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* --- Input --- */
|
||||
.rq-input {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
border-radius: var(--radius-input);
|
||||
border: 1.5px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
outline: none;
|
||||
transition: border-color var(--transition);
|
||||
}
|
||||
.rq-input:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px var(--color-primary-soft);
|
||||
}
|
||||
|
||||
/* --- Badge statut --- */
|
||||
.rq-badge {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
border-radius: var(--radius-badge);
|
||||
font-size: var(--text-2xs);
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.rq-badge--pending { background: rgba(45,45,45,0.06); color: rgba(45,45,45,0.55); }
|
||||
.rq-badge--ongoing { background: rgba(58,122,191,0.10); color: #1a4b8c; }
|
||||
.rq-badge--done { background: rgba(16,185,129,0.10); color: #059669; }
|
||||
.rq-badge--rejected { background: rgba(200,16,46,0.10); color: #c8102e; }
|
||||
|
||||
.dark .rq-badge--pending { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.45); }
|
||||
.dark .rq-badge--ongoing { background: rgba(58,122,191,0.20); color: #7ab8f5; }
|
||||
.dark .rq-badge--done { background: rgba(16,185,129,0.15); color: #34d399; }
|
||||
.dark .rq-badge--rejected { background: rgba(255,77,106,0.15); color: #ff8099; }
|
||||
|
||||
/* --- Label section uppercase --- */
|
||||
.rq-label {
|
||||
font-size: var(--text-2xs);
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.16em;
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
|
||||
/* --- Score bar --- */
|
||||
.rq-score-bar {
|
||||
height: 5px;
|
||||
background: rgba(45,45,45,0.08);
|
||||
border-radius: 99px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.rq-score-bar__fill {
|
||||
height: 100%;
|
||||
border-radius: 99px;
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
.rq-score-bar__fill--high { background: var(--color-success); }
|
||||
.rq-score-bar__fill--mid { background: var(--color-gold); }
|
||||
.rq-score-bar__fill--low { background: var(--color-accent); }
|
||||
|
||||
/* --- Animations utilitaires --- */
|
||||
@keyframes rq-fade-in {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes rq-slide-in {
|
||||
from { opacity: 0; transform: translateX(-8px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
.rq-animate-fade { animation: rq-fade-in 0.2s ease-out; }
|
||||
.rq-animate-slide { animation: rq-slide-in 0.2s ease-out; }
|
||||
Reference in New Issue
Block a user