/* * app.css — Styles globaux de Buckett-List * * Ambiance : minimaliste épuré, inspiré de Notion et Apple Notes. * Police titres : Georgia (sérif classique, intégrée dans tous les navigateurs). * Cartes : flat total — pas d'ombre, uniquement des bordures fines. * * Ce fichier est chargé sur TOUTES les pages. * Il contient : * 1. Import des polices Google (Playfair Display pour les titres) * 2. Variables CSS (couleurs, espacements, polices) * 3. Reset de base * 4. Composants réutilisables (boutons, formulaires, flash) * 5. Layout principal (sidebar + contenu) * 6. Composants de page (notes, checklists, profil…) * 7. Responsive (mobile) */ /* ========================================================================= 1. POLICE — Playfair Display (sérif classique, Google Fonts) Utilisée uniquement pour les titres h1, h2, h3. Le corps du texte reste en sans-serif pour la lisibilité. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&display=swap'); /* ========================================================================= 2. VARIABLES CSS — Thème clair (défaut) ========================================================================= */ :root { /* --- Couleurs de fond --- */ --bg-page: #f9f9f8; /* fond global de la page (légèrement crème) */ --bg-surface: #ffffff; /* fond des zones de contenu, cartes */ --bg-sidebar: #f3f3f0; /* fond de la sidebar (légèrement plus foncé) */ --bg-hover: #eeeeeb; /* fond au survol des éléments de liste */ --bg-active: #e8e8e4; /* fond de l'élément actif dans la sidebar */ /* --- Couleurs de texte --- */ --text-primary: #1a1a1a; /* texte principal (presque noir) */ --text-secondary: #6b6b6b; /* texte secondaire (libellés, métadonnées) */ --text-muted: #9e9e9e; /* texte discret (placeholders, hints) */ --text-inverse: #ffffff; /* texte sur fond sombre */ /* --- Couleur d'accent (bouton principal, liens actifs) --- */ /* Noir sobre pour rester dans l'esprit minimaliste */ --accent: #1a1a1a; --accent-hover: #333333; --accent-light: #f0f0ee; /* fond très léger pour les états focus/hover */ /* --- Bordures --- */ --border: #e0e0dc; /* bordure standard */ --border-strong: #c8c8c4; /* bordure accentuée (séparateurs, inputs focus) */ /* --- Couleurs sémantiques (messages flash) --- */ --success-bg: #f4faf4; --success-text: #2d6a2d; --danger-bg: #fdf4f4; --danger-text: #8b2020; --info-bg: #f4f7fd; --info-text: #1e3a6e; /* --- Dimensions --- */ --sidebar-width: 260px; /* --- Rayons de bordure --- */ /* Flat total : rayons très petits pour rester sobre */ --radius: 4px; --radius-sm: 2px; /* --- Polices --- */ --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-titre: 'Playfair Display', Georgia, 'Times New Roman', serif; /* --- Taille et interligne --- */ --font-size: 15px; --line-height: 1.65; } /* ========================================================================= Thème sombre — redéfinition des variables uniquement Activé quand a la classe "theme-dark" ========================================================================= */ .theme-dark { --bg-page: #111110; --bg-surface: #1a1a19; --bg-sidebar: #161615; --bg-hover: #242422; --bg-active: #2e2e2c; --text-primary: #e8e8e4; --text-secondary: #9a9a94; --text-muted: #606058; --text-inverse: #111110; --accent: #e8e8e4; --accent-hover: #ffffff; --accent-light: #252523; --border: #2a2a28; --border-strong: #3a3a38; --success-bg: #0f1f0f; --success-text: #6dbd6d; --danger-bg: #1f0f0f; --danger-text: #e08080; --info-bg: #0f1526; --info-text: #7aa0d4; } /* ========================================================================= 3. RESET DE BASE ========================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: var(--font-size); line-height: var(--line-height); /* Améliore le rendu des polices sur macOS */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); background-color: var(--bg-page); color: var(--text-primary); min-height: 100vh; /* Transition douce lors du changement de thème */ transition: background-color 0.15s ease, color 0.15s ease; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: none; } ul, ol { list-style: none; } /* ========================================================================= 4. COMPOSANTS RÉUTILISABLES ========================================================================= */ /* ----- Titres (police sérif) ----- */ /* * Les balises h1, h2, h3 utilisent Playfair Display. * Cette règle s'applique globalement — les titres de page, * les titres de notes, les en-têtes de sections. */ h1, h2, h3 { font-family: var(--font-titre); font-weight: 500; /* Playfair est déjà assez gras en 500 */ line-height: 1.3; color: var(--text-primary); letter-spacing: -0.01em; } /* ----- Boutons ----- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--radius); background-color: transparent; color: var(--text-primary); font-family: var(--font-body); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; /* Transition uniquement sur background et border — pas de transform */ transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease; } /* Bouton principal : fond noir, texte blanc */ .btn-primary { background-color: var(--accent); border-color: var(--accent); color: var(--text-inverse); } .btn-primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-inverse); } /* Bouton secondaire : fond transparent, bordure visible */ .btn-secondary { background-color: transparent; border-color: var(--border-strong); color: var(--text-primary); } .btn-secondary:hover { background-color: var(--bg-hover); } /* Bouton fantôme : très discret, fond transparent */ .btn-ghost { background-color: transparent; border-color: transparent; color: var(--text-secondary); } .btn-ghost:hover { background-color: var(--bg-hover); border-color: var(--border); color: var(--text-primary); } /* Bouton danger : pour les actions destructives */ .btn-danger { background-color: transparent; border-color: var(--danger-text); color: var(--danger-text); } .btn-danger:hover { background-color: var(--danger-bg); } /* Modificateurs de taille */ .btn-full { width: 100%; } .btn-large { padding: 10px 24px; font-size: 15px; } .btn-small { padding: 4px 10px; font-size: 12px; } /* ----- Messages flash ----- */ .flash { padding: 10px 14px; border-radius: var(--radius); border: 1px solid transparent; font-size: 13px; margin-bottom: 20px; line-height: 1.5; } .flash-success { background-color: var(--success-bg); border-color: var(--success-text); color: var(--success-text); } .flash-danger { background-color: var(--danger-bg); border-color: var(--danger-text); color: var(--danger-text); } .flash-info { background-color: var(--info-bg); border-color: var(--info-text); color: var(--info-text); } /* ----- Formulaires ----- */ .form-group { margin-bottom: 18px; } .form-label { display: block; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px; } .form-input, .form-textarea, .form-select { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--bg-surface); color: var(--text-primary); font-family: var(--font-body); font-size: 14px; transition: border-color 0.1s ease; /* Pas d'ombre au focus — flat total */ outline: none; } .form-input:hover, .form-textarea:hover, .form-select:hover { border-color: var(--border-strong); } .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--text-primary); } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); } .form-textarea { resize: vertical; min-height: 240px; line-height: 1.7; } .form-select { /* Apparence native pour rester dans l'esprit flat */ appearance: auto; cursor: pointer; } .form-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; } .form-separator { border: none; border-top: 1px solid var(--border); margin: 28px 0; } .form-section-title { font-family: var(--font-titre); font-size: 17px; font-weight: 500; color: var(--text-primary); margin-bottom: 16px; } /* Erreurs de validation Symfony */ .form-error, ul.form-error li { font-size: 12px; color: var(--danger-text); margin-top: 4px; list-style: none; } /* ========================================================================= 5. LAYOUT PRINCIPAL (sidebar + contenu) ========================================================================= */ /* Conteneur principal : deux colonnes côte à côte */ .app-layout { display: flex; min-height: 100vh; } /* ----- SIDEBAR (colonne gauche) ----- */ .sidebar { width: var(--sidebar-width); min-width: var(--sidebar-width); background-color: var(--bg-sidebar); /* Bordure droite fine — flat total, pas d'ombre */ border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; /* La sidebar reste fixe quand on scrolle le contenu */ position: sticky; top: 0; height: 100vh; overflow-y: auto; /* Masque la scrollbar mais garde le scroll fonctionnel */ scrollbar-width: thin; scrollbar-color: var(--border) transparent; } /* Avatar + pseudo : cliquable → profil */ .sidebar-user { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--radius); text-decoration: none; color: var(--text-primary); transition: background-color 0.1s; margin-bottom: 4px; } .sidebar-user:hover { background-color: var(--bg-hover); } .sidebar-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); } /* Cercle avec initiale si pas de photo */ .sidebar-avatar--initiale { background-color: var(--accent); color: var(--text-inverse); display: flex; align-items: center; justify-content: center; font-family: var(--font-titre); font-size: 14px; font-weight: 500; } /* Thème sombre : initiale sur fond clair */ .theme-dark .sidebar-avatar--initiale { background-color: var(--bg-active); color: var(--text-primary); } .sidebar-pseudo { font-size: 13px; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Boutons Créer */ .sidebar-actions { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; } /* Barre de recherche */ .sidebar-search { display: flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--bg-surface); padding: 0 8px; margin: 4px 0; transition: border-color 0.1s; } .sidebar-search:focus-within { border-color: var(--border-strong); } .search-input { flex: 1; padding: 7px 6px; border: none; background: transparent; color: var(--text-primary); font-family: var(--font-body); font-size: 13px; outline: none; } .search-input::placeholder { color: var(--text-muted); } .search-btn { background: transparent; border: none; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; padding: 4px 0; transition: color 0.1s; } .search-btn:hover { color: var(--text-primary); } /* Séparateur horizontal */ .sidebar-separator { border: none; border-top: 1px solid var(--border); margin: 6px 0; } /* Section (Vos notes / Vos checklists) */ .sidebar-section { display: flex; flex-direction: column; gap: 1px; } /* Titre de section : tout en petites majuscules, très discret */ .sidebar-section-title { font-family: var(--font-body); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 4px 8px 2px; } .sidebar-list { display: flex; flex-direction: column; gap: 1px; } /* Lien vers une note / checklist dans la sidebar */ .sidebar-link { display: block; padding: 5px 8px; border-radius: var(--radius); font-size: 13px; color: var(--text-secondary); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color 0.1s, color 0.1s; border: 1px solid transparent; } .sidebar-link:hover { background-color: var(--bg-hover); color: var(--text-primary); } /* Élément actuellement ouvert dans la zone de contenu */ .sidebar-link--active { background-color: var(--bg-active); color: var(--text-primary); font-weight: 500; border-color: var(--border); } /* Archives : légèrement atténuées */ .sidebar-link--archived { opacity: 0.55; font-style: italic; } /* Message "Aucune note créée" */ .sidebar-empty { font-size: 12px; color: var(--text-muted); padding: 4px 8px; font-style: italic; } /* Menu déroulant archives (balise HTML5 native

) */ .archives-dropdown { margin-top: 4px; } .archives-summary { font-size: 12px; color: var(--text-muted); padding: 4px 8px; cursor: pointer; user-select: none; border-radius: var(--radius); list-style: none; transition: background-color 0.1s; } .archives-summary:hover { background-color: var(--bg-hover); color: var(--text-secondary); } /* Pied de sidebar : bouton Paramètres ancré en bas */ .sidebar-footer { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); } /* ----- ZONE DE CONTENU (colonne droite) ----- */ .main-content { flex: 1; min-width: 0; /* évite le débordement sur les longs mots */ padding: 40px 48px; background-color: var(--bg-surface); overflow-y: auto; } /* Layout public (sans sidebar : accueil, login, register) */ .public-layout { min-height: 100vh; background-color: var(--bg-page); } /* ========================================================================= 6. COMPOSANTS DE PAGE ========================================================================= */ /* ----- En-tête d'une page de contenu ----- */ .content-page { max-width: 720px; } .content-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } /* Titre principal de la page — police sérif */ .content-title { font-family: var(--font-titre); font-size: 28px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.25; } .content-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; } /* Formulaire de contenu (note, checklist) */ .content-form { width: 100%; } .content-form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 20px; border-top: 1px solid var(--border); margin-top: 8px; } /* ----- Note en lecture seule ----- */ .note-content { /* Pas de carte à fond différent — on laisse respirer le contenu */ border-top: 1px solid var(--border); padding-top: 24px; min-height: 160px; } .note-text { font-size: 15px; line-height: 1.8; color: var(--text-primary); white-space: pre-wrap; } .note-empty { color: var(--text-muted); font-style: italic; font-size: 14px; } /* Métadonnées (dates) */ .note-meta { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); letter-spacing: 0.01em; } /* ----- Checklist en lecture ----- */ .checklist-progress { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 16px; } .checklist-items { display: flex; flex-direction: column; /* Pas de gap — les séparateurs entre items sont des border-bottom */ } /* Un item de checklist */ .checklist-item { border-bottom: 1px solid var(--border); transition: background-color 0.1s; } .checklist-item:first-child { border-top: 1px solid var(--border); } /* Item coché : texte barré et atténué */ .checklist-item--checked .checklist-item-text { text-decoration: line-through; color: var(--text-muted); } .checklist-item-form { display: flex; align-items: center; gap: 12px; padding: 11px 4px; } /* Case à cocher flat : juste un carré avec bordure */ .checklist-checkbox { width: 18px; height: 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background-color: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.1s, background-color 0.1s; color: var(--text-inverse); } .checklist-checkbox:hover { border-color: var(--text-primary); } /* Case cochée : fond noir */ .checklist-item--checked .checklist-checkbox { background-color: var(--accent); border-color: var(--accent); } .checklist-item-text { font-size: 14px; color: var(--text-primary); line-height: 1.5; } /* Formulaire d'édition : ligne avec champ + bouton supprimer */ .checklist-item-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .checklist-item-row .form-input { flex: 1; } /* ----- Profil ----- */ .profile-avatar-section { display: flex; align-items: flex-start; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--border); margin-bottom: 24px; } .profile-avatar-preview { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; } /* Placeholder initiale pour le profil */ .profile-avatar-placeholder { width: 72px; height: 72px; border-radius: 50%; background-color: var(--bg-active); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-titre); font-size: 28px; font-weight: 500; color: var(--text-primary); flex-shrink: 0; } /* ----- Recherche ----- */ .search-section { margin-bottom: 32px; } .search-section-title { font-family: var(--font-body); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 10px; } .search-results { display: flex; flex-direction: column; } .search-result-item { border-bottom: 1px solid var(--border); } .search-result-item:first-child { border-top: 1px solid var(--border); } .search-result-link { display: flex; align-items: center; gap: 10px; padding: 10px 4px; text-decoration: none; color: var(--text-primary); font-size: 14px; transition: background-color 0.1s; } .search-result-link:hover { background-color: var(--bg-hover); } .search-result-icon { font-size: 14px; flex-shrink: 0; } .search-empty { color: var(--text-muted); font-style: italic; font-size: 14px; padding: 12px 0; } /* ----- Tableau de bord (page d'accueil après connexion) ----- */ .dashboard-welcome { display: flex; flex-direction: column; align-items: flex-start; padding: 0; gap: 14px; max-width: 480px; } .welcome-icon { font-size: 40px; margin-bottom: 4px; } .welcome-title { font-family: var(--font-titre); font-size: 32px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.2; } .welcome-subtitle { font-size: 15px; color: var(--text-secondary); line-height: 1.7; } .welcome-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; } /* ========================================================================= 7. RESPONSIVE — Mobile (< 768px) ========================================================================= */ @media (max-width: 768px) { .app-layout { flex-direction: column; } .sidebar { width: 100%; min-width: unset; height: auto; position: relative; border-right: none; border-bottom: 1px solid var(--border); /* Sur mobile, on limite la hauteur et on laisse scroller */ max-height: 50vh; } .main-content { padding: 20px 20px; } .content-title { font-size: 22px; } .content-header { flex-direction: column; gap: 12px; } .dashboard-welcome { padding: 4px 0; } .welcome-title { font-size: 24px; } } @media (max-width: 480px) { .main-content { padding: 16px; } .content-form-actions { flex-direction: column-reverse; } .content-form-actions .btn { width: 100%; } }