mirror of
https://github.com/R0m1k3/LogiFlow.git
synced 2026-10-12 01:37:40 +02:00
michaelschal
c0a7b06c34
Refactors Layout and Tasks components, removing the smartphone icon, disabling phone mode logic, and applying global CSS to prevent horizontal overflow across the application, particularly on mobile viewports. 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/GEw2Z4s
499 lines
12 KiB
CSS
499 lines
12 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%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
#root {
|
|
max-width: 100vw;
|
|
min-height: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Éviter le débordement horizontal sur mobile */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Forcer les conteneurs à ne pas déborder */
|
|
.container, .main-content, [data-testid*="task"] {
|
|
max-width: 100vw;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* 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;
|
|
}
|