Fix dark mode : formulaires et composant lieu-picker
- app.css : règle @layer base globale pour tous les <input>, <select>, <textarea> en mode sombre (bg-gray-700, border-gray-600, text-gray-100) sans toucher checkboxes, radios ni boutons - lieu-picker : bouton déclencheur, fenêtre modale, champ de recherche, liste de résultats et badges entièrement adaptés au thème sombre Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -3,3 +3,30 @@
|
||||
@tailwind utilities;
|
||||
|
||||
[x-cloak] { display: none !important; }
|
||||
|
||||
@layer base {
|
||||
/*
|
||||
* Dark mode — champs de formulaire
|
||||
* Appliqué globalement pour couvrir tous les <input>, <select>, <textarea>
|
||||
* bruts qui n'utilisent pas le composant <x-text-input>.
|
||||
* La spécificité (.dark + élément) surpasse les resets de @tailwindcss/forms.
|
||||
*/
|
||||
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]),
|
||||
.dark select,
|
||||
.dark textarea {
|
||||
background-color: theme('colors.gray.700');
|
||||
border-color: theme('colors.gray.600');
|
||||
color: theme('colors.gray.100');
|
||||
}
|
||||
|
||||
.dark input::placeholder,
|
||||
.dark textarea::placeholder {
|
||||
color: theme('colors.gray.400');
|
||||
}
|
||||
|
||||
/* Options du <select> natif (fond navigateur) */
|
||||
.dark select option {
|
||||
background-color: theme('colors.gray.700');
|
||||
color: theme('colors.gray.100');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
}"
|
||||
@keydown.escape.window="open = false"
|
||||
>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
{{ $label }}
|
||||
@if($required) <span class="text-red-500">*</span> @endif
|
||||
</label>
|
||||
@@ -82,12 +82,17 @@
|
||||
<button
|
||||
type="button"
|
||||
@click="openModal()"
|
||||
class="flex-1 text-left px-3 py-2 border border-gray-300 rounded-md bg-white text-sm shadow-sm
|
||||
hover:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors
|
||||
class="flex-1 text-left px-3 py-2 border border-gray-300 dark:border-gray-600
|
||||
rounded-md bg-white dark:bg-gray-700 text-sm shadow-sm
|
||||
hover:border-indigo-400 dark:hover:border-indigo-500
|
||||
focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors
|
||||
@error($name) border-red-500 @enderror"
|
||||
>
|
||||
<span x-show="selected.id" class="text-gray-900" x-text="selected.name"></span>
|
||||
<span x-show="!selected.id" class="text-gray-400">{{ $placeholder }}</span>
|
||||
<span x-show="selected.id"
|
||||
class="text-gray-900 dark:text-gray-100"
|
||||
x-text="selected.name"></span>
|
||||
<span x-show="!selected.id"
|
||||
class="text-gray-400 dark:text-gray-500">{{ $placeholder }}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@@ -95,7 +100,7 @@
|
||||
x-show="selected.id"
|
||||
@click="clear()"
|
||||
title="Effacer"
|
||||
class="px-2 py-2 text-gray-400 hover:text-red-500 transition-colors"
|
||||
class="px-2 py-2 text-gray-400 dark:text-gray-500 hover:text-red-500 dark:hover:text-red-400 transition-colors"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
@@ -104,7 +109,7 @@
|
||||
</div>
|
||||
|
||||
@error($name)
|
||||
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
||||
<p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
|
||||
@enderror
|
||||
|
||||
{{-- Modale de recherche --}}
|
||||
@@ -115,13 +120,15 @@
|
||||
@click.self="open = false"
|
||||
>
|
||||
{{-- Fond semi-transparent --}}
|
||||
<div class="absolute inset-0 bg-black/40" @click="open = false"></div>
|
||||
<div class="absolute inset-0 bg-black/40 dark:bg-black/60" @click="open = false"></div>
|
||||
|
||||
{{-- Panneau --}}
|
||||
<div class="relative bg-white rounded-xl shadow-2xl w-full max-w-lg z-10 overflow-hidden">
|
||||
{{-- En-tête --}}
|
||||
<div class="px-4 py-3 border-b border-gray-100 flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl dark:shadow-gray-900/50
|
||||
w-full max-w-lg z-10 overflow-hidden">
|
||||
|
||||
{{-- En-tête avec champ de recherche --}}
|
||||
<div class="px-4 py-3 border-b border-gray-100 dark:border-gray-700 flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-gray-400 dark:text-gray-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
|
||||
</svg>
|
||||
@@ -131,10 +138,13 @@
|
||||
x-model="search"
|
||||
@input="onSearchInput()"
|
||||
placeholder="Nom, code INSEE…"
|
||||
class="flex-1 text-sm outline-none placeholder-gray-400"
|
||||
class="flex-1 text-sm outline-none bg-transparent
|
||||
text-gray-900 dark:text-gray-100
|
||||
placeholder-gray-400 dark:placeholder-gray-500
|
||||
focus:ring-0 border-none p-0"
|
||||
>
|
||||
<button type="button" @click="open = false"
|
||||
class="text-gray-400 hover:text-gray-600">
|
||||
class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
@@ -144,39 +154,44 @@
|
||||
{{-- Résultats --}}
|
||||
<div class="max-h-80 overflow-y-auto">
|
||||
{{-- Chargement --}}
|
||||
<div x-show="loading" class="px-4 py-6 text-center text-sm text-gray-400">
|
||||
<div x-show="loading"
|
||||
class="px-4 py-6 text-center text-sm text-gray-400 dark:text-gray-500">
|
||||
Recherche…
|
||||
</div>
|
||||
|
||||
{{-- Aucun résultat --}}
|
||||
<div x-show="!loading && search.length > 0 && results.length === 0"
|
||||
class="px-4 py-6 text-center text-sm text-gray-400">
|
||||
class="px-4 py-6 text-center text-sm text-gray-400 dark:text-gray-500">
|
||||
Aucun lieu trouvé pour « <span x-text="search"></span> »
|
||||
</div>
|
||||
|
||||
{{-- Invite initiale --}}
|
||||
<div x-show="!loading && search.length === 0"
|
||||
class="px-4 py-6 text-center text-sm text-gray-400">
|
||||
class="px-4 py-6 text-center text-sm text-gray-400 dark:text-gray-500">
|
||||
Saisissez au moins une lettre pour rechercher
|
||||
</div>
|
||||
|
||||
{{-- Liste --}}
|
||||
{{-- Liste des résultats --}}
|
||||
<ul x-show="results.length > 0">
|
||||
<template x-for="lieu in results" :key="lieu.id">
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
@click="select(lieu)"
|
||||
class="w-full text-left px-4 py-3 hover:bg-indigo-50 flex items-center justify-between gap-3 transition-colors"
|
||||
class="w-full text-left px-4 py-3 flex items-center justify-between gap-3 transition-colors
|
||||
hover:bg-indigo-50 dark:hover:bg-indigo-900/30"
|
||||
>
|
||||
<div>
|
||||
<span class="text-sm font-medium text-gray-900" x-text="lieu.nom_long"></span>
|
||||
<span class="text-sm font-medium text-gray-900 dark:text-gray-100"
|
||||
x-text="lieu.nom_long"></span>
|
||||
<span x-show="lieu.code"
|
||||
class="ml-2 text-xs text-gray-400"
|
||||
class="ml-2 text-xs text-gray-400 dark:text-gray-500"
|
||||
x-text="lieu.code"></span>
|
||||
</div>
|
||||
<span x-show="lieu.type"
|
||||
class="shrink-0 text-xs px-2 py-0.5 bg-gray-100 text-gray-500 rounded-full"
|
||||
class="shrink-0 text-xs px-2 py-0.5 rounded-full
|
||||
bg-gray-100 dark:bg-gray-700
|
||||
text-gray-500 dark:text-gray-400"
|
||||
x-text="lieu.type"></span>
|
||||
</button>
|
||||
</li>
|
||||
@@ -186,9 +201,9 @@
|
||||
|
||||
@can('create', App\Models\Lieu::class)
|
||||
{{-- Pied : créer un nouveau lieu --}}
|
||||
<div class="border-t border-gray-100 px-4 py-2.5">
|
||||
<div class="border-t border-gray-100 dark:border-gray-700 px-4 py-2.5">
|
||||
<a href="{{ route('lieux.create') }}" target="_blank"
|
||||
class="text-xs text-indigo-600 hover:underline">
|
||||
class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline">
|
||||
+ Créer un nouveau lieu
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user