mirror of
https://github.com/R0m1k3/LogiFlow.git
synced 2026-10-11 17:27:31 +02:00
michaelschal
d7de31ac2a
Adjust CSS to prevent horizontal scrolling issues, simplify task data fetching by enabling it when a user is logged in, and add critical responsive utility classes to Tailwind CSS configuration for the Tasks module. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 95e8aab4-f39f-4b48-aa57-a759ec15ba3d Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/95e8aab4-f39f-4b48-aa57-a759ec15ba3d/0iFumsU
486 lines
11 KiB
CSS
486 lines
11 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--background: hsl(0, 0%, 100%);
|
|
--foreground: hsl(20, 14.3%, 4.1%);
|
|
--muted: hsl(60, 4.8%, 95.9%);
|
|
--muted-foreground: hsl(25, 5.3%, 44.7%);
|
|
--popover: hsl(0, 0%, 100%);
|
|
--popover-foreground: hsl(20, 14.3%, 4.1%);
|
|
--card: hsl(0, 0%, 100%);
|
|
--card-foreground: hsl(20, 14.3%, 4.1%);
|
|
--border: hsl(20, 5.9%, 90%);
|
|
--input: hsl(20, 5.9%, 90%);
|
|
--primary: hsl(207, 90%, 54%);
|
|
--primary-foreground: hsl(211, 100%, 99%);
|
|
--secondary: hsl(120, 61%, 34%);
|
|
--secondary-foreground: hsl(0, 0%, 100%);
|
|
--accent: hsl(35, 100%, 47%);
|
|
--accent-foreground: hsl(0, 0%, 100%);
|
|
--destructive: hsl(0, 84.2%, 60.2%);
|
|
--destructive-foreground: hsl(60, 9.1%, 97.8%);
|
|
--ring: hsl(20, 14.3%, 4.1%);
|
|
--radius: 0.5rem;
|
|
|
|
/* Custom La Foir'Fouille colors */
|
|
--surface: hsl(0, 0%, 98%);
|
|
--delivered: hsl(0, 0%, 46%);
|
|
}
|
|
|
|
.dark {
|
|
--background: hsl(240, 10%, 3.9%);
|
|
--foreground: hsl(0, 0%, 98%);
|
|
--muted: hsl(240, 3.7%, 15.9%);
|
|
--muted-foreground: hsl(240, 5%, 64.9%);
|
|
--popover: hsl(240, 10%, 3.9%);
|
|
--popover-foreground: hsl(0, 0%, 98%);
|
|
--card: hsl(240, 10%, 3.9%);
|
|
--card-foreground: hsl(0, 0%, 98%);
|
|
--border: hsl(240, 3.7%, 15.9%);
|
|
--input: hsl(240, 3.7%, 15.9%);
|
|
--primary: hsl(207, 90%, 54%);
|
|
--primary-foreground: hsl(211, 100%, 99%);
|
|
--secondary: hsl(120, 61%, 34%);
|
|
--secondary-foreground: hsl(0, 0%, 100%);
|
|
--accent: hsl(35, 100%, 47%);
|
|
--accent-foreground: hsl(0, 0%, 100%);
|
|
--destructive: hsl(0, 62.8%, 30.6%);
|
|
--destructive-foreground: hsl(0, 0%, 98%);
|
|
--ring: hsl(240, 4.9%, 83.9%);
|
|
--radius: 0.5rem;
|
|
|
|
--surface: hsl(240, 10%, 8%);
|
|
--delivered: hsl(0, 0%, 46%);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
html, body {
|
|
@apply font-sans antialiased bg-surface text-foreground;
|
|
max-width: 100vw;
|
|
height: 100%;
|
|
}
|
|
|
|
#root {
|
|
max-width: 100vw;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Forcer la cohérence des largeurs de sidebar */
|
|
.sidebar-collapsed {
|
|
width: 4rem !important;
|
|
min-width: 4rem !important;
|
|
max-width: 4rem !important;
|
|
}
|
|
|
|
.sidebar-tablet {
|
|
width: 12rem !important;
|
|
min-width: 12rem !important;
|
|
max-width: 12rem !important;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 30;
|
|
}
|
|
|
|
.sidebar-expanded {
|
|
width: 16rem !important;
|
|
min-width: 16rem !important;
|
|
max-width: 16rem !important;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.bg-surface {
|
|
background-color: var(--surface);
|
|
}
|
|
|
|
.bg-primary {
|
|
background-color: var(--primary);
|
|
}
|
|
|
|
/* Optimisation des ascenseurs pour les tableaux */
|
|
.table-container {
|
|
overflow-x: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: hsl(20, 5.9%, 80%) transparent;
|
|
}
|
|
|
|
.table-container::-webkit-scrollbar {
|
|
height: 6px;
|
|
}
|
|
|
|
.table-container::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.table-container::-webkit-scrollbar-thumb {
|
|
background: hsl(20, 5.9%, 80%);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.table-container::-webkit-scrollbar-thumb:hover {
|
|
background: hsl(20, 5.9%, 70%);
|
|
}
|
|
|
|
/* Masquer l'ascenseur horizontal sauf si nécessaire */
|
|
.no-scrollbar {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Solution pour masquer l'ascenseur vertical de droite */
|
|
html, body {
|
|
height: 100%;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
#root {
|
|
height: 100%;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.layout-container {
|
|
height: 100vh;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.bg-secondary {
|
|
background-color: var(--secondary);
|
|
}
|
|
|
|
.bg-accent {
|
|
background-color: var(--accent);
|
|
}
|
|
|
|
.bg-delivered {
|
|
background-color: var(--delivered);
|
|
}
|
|
|
|
.text-primary {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.text-secondary {
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.text-accent {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.text-delivered {
|
|
color: var(--delivered);
|
|
}
|
|
|
|
.border-primary {
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.border-secondary {
|
|
border-color: var(--secondary);
|
|
}
|
|
|
|
.border-accent {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.hover\:bg-primary:hover {
|
|
background-color: var(--primary);
|
|
}
|
|
|
|
.hover\:bg-secondary:hover {
|
|
background-color: var(--secondary);
|
|
}
|
|
|
|
.hover\:bg-accent:hover {
|
|
background-color: var(--accent);
|
|
}
|
|
}
|
|
|
|
/* Supprimer le contour orange de la date du jour dans le calendrier */
|
|
button[aria-selected="true"][aria-current="date"],
|
|
button[aria-current="date"],
|
|
.rdp-day_today,
|
|
.rdp-day_selected,
|
|
[data-today="true"] {
|
|
border: none !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
ring: 0 !important;
|
|
--tw-ring-shadow: none !important;
|
|
--tw-ring-offset-shadow: none !important;
|
|
}
|
|
|
|
button[aria-selected="true"][aria-current="date"]:focus,
|
|
button[aria-current="date"]:focus,
|
|
.rdp-day_today:focus,
|
|
.rdp-day_selected:focus,
|
|
[data-today="true"]:focus {
|
|
border: none !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
ring: 0 !important;
|
|
--tw-ring-shadow: none !important;
|
|
--tw-ring-offset-shadow: none !important;
|
|
}
|
|
|
|
/* Cibler spécifiquement le calendrier dans Tasks */
|
|
.rounded-md.border button[aria-current="date"],
|
|
.rounded-md.border button[data-today],
|
|
.rounded-md.border .rdp-day_today {
|
|
border: none !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
ring: 0 !important;
|
|
}
|
|
|
|
/* Suppression spécifique du contour orange sur la date du jour */
|
|
.rdp button,
|
|
.rdp-day,
|
|
.rdp-day_today,
|
|
.rdp-day_selected {
|
|
border: none !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Cibler spécifiquement les pseudo-éléments qui créent le contour orange */
|
|
.rdp-day_today::before,
|
|
.rdp-day_today::after,
|
|
.rdp-day_selected::before,
|
|
.rdp-day_selected::after {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Suppression de la bordure orange Tailwind */
|
|
.bg-blue-600 {
|
|
border: none !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
--tw-ring-color: transparent !important;
|
|
--tw-ring-shadow: none !important;
|
|
}
|
|
|
|
/* Cibler toutes les variantes possibles du contour orange */
|
|
button[aria-current="date"],
|
|
button[data-today="true"],
|
|
.rdp-day[aria-current="date"],
|
|
.rdp-day_today,
|
|
.rdp-button[aria-current="date"] {
|
|
border: none !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
--tw-ring-width: 0px !important;
|
|
--tw-ring-color: transparent !important;
|
|
--tw-ring-offset-width: 0px !important;
|
|
}
|
|
|
|
/* Force suppression avec sélecteurs très spécifiques */
|
|
.rounded-md button[aria-current="date"],
|
|
.rounded-md .rdp-day_today,
|
|
[role="gridcell"] button[aria-current="date"] {
|
|
border-color: transparent !important;
|
|
outline-color: transparent !important;
|
|
}
|
|
|
|
/* Force suppression contour sur focus */
|
|
.rdp-day_today:focus-visible,
|
|
.rdp-day_today:focus {
|
|
outline: none !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
--tw-ring-shadow: none !important;
|
|
}
|
|
|
|
/* REMPLACEMENT COULEUR ORANGE PAR BLEU POUR SÉLECTION */
|
|
*:focus-visible {
|
|
outline: 2px solid #2563eb !important; /* Bleu au lieu d'orange */
|
|
outline-offset: 2px !important;
|
|
}
|
|
|
|
/* Couleur de sélection bleue pour le calendrier */
|
|
button[aria-current="date"]:focus,
|
|
button[aria-current="date"]:focus-visible,
|
|
.rdp-day:focus,
|
|
.rdp-day:focus-visible {
|
|
outline: 2px solid #2563eb !important; /* Bleu comme la date du jour */
|
|
outline-offset: 2px !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Variables CSS pour forcer le bleu sur tous les focus */
|
|
:root {
|
|
--focus-color: #2563eb !important; /* Bleu */
|
|
}
|
|
|
|
/* Override focus sur tous les éléments pour utiliser le bleu */
|
|
* {
|
|
--tw-ring-color: #2563eb !important;
|
|
}
|
|
|
|
/* Focus bleu spécifique pour les boutons du calendrier */
|
|
.rdp button:focus-visible {
|
|
outline: 2px solid #2563eb !important;
|
|
outline-offset: 2px !important;
|
|
}
|
|
|
|
/* Style pour les weekends dans le calendrier - FOND GRIS CLAIR */
|
|
.weekend-day,
|
|
.rdp-day.weekend-day,
|
|
.rdp-button.weekend-day {
|
|
background-color: #f3f4f6 !important; /* bg-gray-100 */
|
|
}
|
|
|
|
.dark .weekend-day,
|
|
.dark .rdp-day.weekend-day,
|
|
.dark .rdp-button.weekend-day {
|
|
background-color: #1f2937 !important; /* bg-gray-800 */
|
|
}
|
|
|
|
/* Forcer le style weekend sur tous les samedis et dimanches */
|
|
[data-day-weekend="true"],
|
|
button[data-day-weekend="true"],
|
|
.rdp-day[data-day-weekend="true"] {
|
|
background-color: #f3f4f6 !important;
|
|
}
|
|
|
|
.dark [data-day-weekend="true"],
|
|
.dark button[data-day-weekend="true"],
|
|
.dark .rdp-day[data-day-weekend="true"] {
|
|
background-color: #1f2937 !important;
|
|
}
|
|
|
|
/* Nouvelles couleurs pour le calendrier moderne */
|
|
.bg-gray-25 {
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
.bg-slate-25 {
|
|
background-color: #f8fafc;
|
|
}
|
|
|
|
.hover\:from-gray-25:hover {
|
|
--tw-gradient-from: #fafafa var(--tw-gradient-from-position);
|
|
--tw-gradient-to: rgb(250 250 250 / 0) var(--tw-gradient-to-position);
|
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
}
|
|
|
|
.hover\:to-slate-25:hover {
|
|
--tw-gradient-to: #f8fafc var(--tw-gradient-to-position);
|
|
}
|
|
|
|
.hover\:from-slate-50:hover {
|
|
--tw-gradient-from: #f8fafc var(--tw-gradient-from-position);
|
|
--tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
|
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
}
|
|
|
|
.hover\:to-gray-50:hover {
|
|
--tw-gradient-to: #f9fafb var(--tw-gradient-to-position);
|
|
}
|
|
|
|
/* Couleur grise personnalisée pour les jours hors mois */
|
|
.bg-gray-150 {
|
|
background-color: #f1f3f4;
|
|
}
|
|
|
|
/* Styles pour le mode téléphone */
|
|
.phone-mode {
|
|
/* Classe principale pour le mode téléphone */
|
|
}
|
|
|
|
/* Safe area pour la bottom navigation */
|
|
.safe-area-pb {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
/* Optimisations pour le mode téléphone */
|
|
.layout-container.phone-mode {
|
|
/* Assurer que le layout prend toute la hauteur */
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.phone-mode main {
|
|
/* Optimisation pour le scroll sur téléphone */
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.phone-mode .main-content {
|
|
/* Padding bottom pour éviter que le contenu soit caché par la bottom nav */
|
|
padding-bottom: calc(80px + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
/* Animation de transition pour le basculement de mode */
|
|
.layout-container {
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Styles spécifiques pour la bottom navigation */
|
|
.bottom-nav {
|
|
backdrop-filter: blur(10px);
|
|
background-color: rgba(255, 255, 255, 0.95);
|
|
}
|
|
|
|
/* Dark mode pour la bottom navigation */
|
|
.dark .bottom-nav {
|
|
background-color: rgba(26, 26, 26, 0.95);
|
|
}
|
|
|
|
/* Optimisation des cartes pour le mode téléphone */
|
|
.phone-mode .card {
|
|
border-radius: 12px;
|
|
margin-bottom: 16px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Optimisation des boutons pour le mode téléphone */
|
|
.phone-mode button {
|
|
min-height: 48px;
|
|
}
|
|
|
|
/* Style pour les éléments interactifs en mode téléphone */
|
|
.phone-mode .interactive-element {
|
|
min-height: 48px;
|
|
min-width: 48px;
|
|
padding: 12px;
|
|
}
|
|
|
|
/* Adaptation des formulaires pour téléphone */
|
|
.phone-mode .form-container {
|
|
padding: 16px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.phone-mode input,
|
|
.phone-mode select,
|
|
.phone-mode textarea {
|
|
min-height: 48px;
|
|
font-size: 16px; /* Évite le zoom automatique sur iOS */
|
|
}
|
|
|
|
/* Optimisation des modals pour téléphone */
|
|
.phone-mode .modal-content {
|
|
margin: 8px;
|
|
max-height: calc(100vh - 16px);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
/* Style pour les alertes en mode téléphone */
|
|
.phone-mode .alert {
|
|
margin: 8px;
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
}
|