Migrate all remaining inline styles to CSS classes for CSP compliance
- Remove ALL inline style= attributes from 22 templates (except email/pdf) - Add admin CSS classes in admin.scss (admin-card, admin-table, admin-btn, admin-badge, admin-tab, admin-form, admin-nav, admin-pagination) - Add .bg-instagram, .detail-table, .section-header to app.scss - Templates migrated: base, account/index, account/edit_subaccount, security/register, security/change_password, home/tarifs, home/index, all 7 legal pages, all 8 admin pages - Total: ~1000 inline style= replaced with CSS classes and Tailwind utilities - Fixes Content Security Policy violations blocking inline styles in production Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Serreau Jovann
@@ -1,2 +1,81 @@
|
||||
@import "tailwindcss";
|
||||
@source "../templates";
|
||||
|
||||
/* ===== Admin Layout ===== */
|
||||
.admin-body { background: #fbfbfb; color: #111827; }
|
||||
.admin-header { border-bottom: 4px solid #111827; }
|
||||
.admin-badge { border: 2px solid #111827; box-shadow: 3px 3px 0 rgba(0,0,0,1); background: #fabf04; }
|
||||
.admin-main { max-width: 70rem; margin: 0 auto; padding: 2rem 1rem; width: 100%; }
|
||||
|
||||
/* ===== Admin Nav ===== */
|
||||
.admin-nav-active { background: #fabf04; border: 2px solid #111827; box-shadow: 2px 2px 0 rgba(0,0,0,1); }
|
||||
.admin-nav-link { border: 2px solid #111827; }
|
||||
.admin-nav-dark { border: 2px solid #111827; background: #111827; }
|
||||
|
||||
/* ===== Admin Cards ===== */
|
||||
.admin-card { border: 4px solid #111827; box-shadow: 6px 6px 0 rgba(0,0,0,1); background: white; padding: 1.5rem; }
|
||||
.admin-card-yellow { border: 4px solid #111827; box-shadow: 6px 6px 0 rgba(0,0,0,1); background: #fabf04; padding: 1.5rem; }
|
||||
.admin-card-reject { border: 4px solid #991b1b; box-shadow: 6px 6px 0 rgba(0,0,0,1); background: white; padding: 1.5rem; }
|
||||
|
||||
/* ===== Admin Stats ===== */
|
||||
.admin-stat-label { font-size: 10px; letter-spacing: 0.1em; }
|
||||
|
||||
/* ===== Admin Tables ===== */
|
||||
.admin-table { width: 100%; border-collapse: collapse; }
|
||||
.admin-table thead tr { background: #111827; }
|
||||
.admin-table thead th { padding: 0.75rem 1.5rem; text-align: left; }
|
||||
.admin-table thead th.text-center { text-align: center; }
|
||||
.admin-table thead th.text-right { text-align: right; }
|
||||
.admin-table tbody tr { border-bottom: 1px solid #e5e7eb; }
|
||||
.admin-table tbody td { padding: 0.75rem 1.5rem; }
|
||||
|
||||
/* ===== Admin Detail Tables ===== */
|
||||
.admin-detail-table { width: 100%; border-collapse: collapse; }
|
||||
.admin-detail-table thead tr { border-bottom: 2px solid #e5e7eb; }
|
||||
.admin-detail-table thead th { padding: 0.5rem 0; text-align: left; }
|
||||
.admin-detail-table tbody tr { border-bottom: 1px solid #e5e7eb; }
|
||||
.admin-detail-table tbody tr:last-child { border-bottom: none; }
|
||||
.admin-detail-table tbody td { padding: 0.5rem 0; }
|
||||
|
||||
/* ===== Admin Forms ===== */
|
||||
.admin-form-label { font-size: 10px; letter-spacing: 0.1em; display: block; margin-bottom: 0.25rem; }
|
||||
.admin-form-label-lg { font-size: 10px; letter-spacing: 0.1em; display: block; margin-bottom: 0.5rem; }
|
||||
.admin-form-input { width: 100%; padding: 0.5rem 0.75rem; border: 2px solid #111827; font-weight: 700; outline: none; }
|
||||
.admin-form-input-lg { width: 100%; padding: 0.75rem 1rem; border: 3px solid #111827; font-weight: 700; outline: none; }
|
||||
.admin-form-select { width: 100%; padding: 0.5rem 0.75rem; border: 3px solid #111827; font-weight: 700; outline: none; cursor: pointer; background: white; }
|
||||
.admin-form-textarea { width: 100%; padding: 0.75rem 1rem; border: 3px solid #111827; font-weight: 700; outline: none; resize: vertical; }
|
||||
.admin-form-checkbox { width: 1.25rem; height: 1.25rem; border: 2px solid #111827; cursor: pointer; }
|
||||
|
||||
/* ===== Admin Buttons ===== */
|
||||
.admin-btn { padding: 0.5rem 1rem; border: 3px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #fabf04; cursor: pointer; }
|
||||
.admin-btn-sm { padding: 0.4rem 0.75rem; border: 2px solid #111827; cursor: pointer; }
|
||||
.admin-btn-sm-yellow { padding: 0.4rem 0.75rem; border: 2px solid #111827; background: #fabf04; cursor: pointer; }
|
||||
.admin-btn-sm-white { padding: 0.4rem 0.75rem; border: 2px solid #111827; background: white; cursor: pointer; }
|
||||
.admin-btn-sm-danger { padding: 0.4rem 0.75rem; border: 2px solid #991b1b; background: #dc2626; color: white; cursor: pointer; }
|
||||
.admin-btn-danger { padding: 0.5rem 1rem; border: 3px solid #991b1b; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #dc2626; color: white; cursor: pointer; }
|
||||
.admin-btn-outline { padding: 0.5rem 1rem; border: 3px solid #111827; background: white; cursor: pointer; }
|
||||
.admin-btn-search { padding: 0.5rem 1rem; border: 2px solid #111827; background: #fabf04; cursor: pointer; white-space: nowrap; }
|
||||
.admin-btn-clear { padding: 0.5rem 1rem; border: 2px solid #111827; background: white; white-space: nowrap; }
|
||||
.admin-btn-lg { padding: 0.75rem 1.5rem; border: 3px solid #111827; box-shadow: 4px 4px 0 rgba(0,0,0,1); background: #fabf04; cursor: pointer; }
|
||||
.admin-btn-lg-outline { padding: 0.75rem 1.5rem; border: 3px solid #111827; }
|
||||
|
||||
/* ===== Admin Badges ===== */
|
||||
.admin-badge-green { background: #d1fae5; border: 2px solid #111827; padding: 0.15rem 0.5rem; }
|
||||
.admin-badge-red { background: #fee2e2; border: 2px solid #111827; padding: 0.15rem 0.5rem; }
|
||||
.admin-badge-blue { background: #dbeafe; border: 2px solid #111827; padding: 0.15rem 0.75rem; }
|
||||
.admin-badge-yellow { background: #fef3c7; border: 2px solid #111827; padding: 0.15rem 0.75rem; }
|
||||
.admin-badge-indigo { background: #e0e7ff; border: 2px solid #111827; padding: 0.15rem 0.5rem; }
|
||||
.admin-badge-indigo-lg { background: #e0e7ff; border: 2px solid #111827; padding: 0.15rem 0.75rem; }
|
||||
|
||||
/* ===== Admin Tabs ===== */
|
||||
.admin-tab { flex: 1; text-align: center; padding: 0.75rem; border: 3px solid #111827; }
|
||||
.admin-tab-active { background: #fabf04; }
|
||||
.admin-tab-inactive { background: white; }
|
||||
.admin-tab-first { border-right: none; }
|
||||
|
||||
/* ===== Admin Pagination ===== */
|
||||
.admin-page-active { border: 2px solid #111827; padding: 0.4rem 0.75rem; background: #fabf04; }
|
||||
.admin-page-link { border: 2px solid #111827; padding: 0.4rem 0.75rem; background: white; }
|
||||
|
||||
/* ===== Admin Download Link ===== */
|
||||
.admin-download { border: 2px solid #111827; padding: 0.15rem 0.5rem; background: #fabf04; display: inline-block; }
|
||||
|
||||
Reference in New Issue
Block a user