Improve visibility of input fields and section borders throughout the app

Enhance UI/UX by increasing border thicknesses and darkening colors of input fields and sections in index.css.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: dec54137-d5a2-4406-8ad4-5f2f9fb110bf
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/9ba8b033-161d-4888-81d6-a484ee533451.jpg
This commit is contained in:
michaelschal committed 2025-07-10 08:39:53 +00:00
1 parent 79b179f0ee
commit a5d20db747
1 file changed
+13 -12
+13 -12
View File
@@ -151,28 +151,28 @@ body {
color: hsl(var(--identity-accent));
}
/* Inputs modernes */
/* Inputs modernes avec bordures très visibles */
.modern-input {
width: 100%;
padding: 12px 16px;
border: 1.5px solid hsl(var(--border));
border: 3px solid #374151 !important; /* Bordure grise foncée très visible */
border-radius: 8px;
background: hsl(var(--background));
color: hsl(var(--foreground));
font-size: 14px;
font-weight: 400;
transition: all 0.2s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.modern-input:focus {
outline: none;
border-color: hsl(var(--primary));
box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
border-color: #2563eb !important; /* Bleu vif pour le focus */
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
.modern-input:hover:not(:focus) {
border-color: hsl(var(--border));
border-color: #4b5563 !important; /* Bordure encore plus foncée au survol */
}
.modern-input::placeholder {
@@ -266,18 +266,19 @@ body {
.search-input {
width: 100%;
padding: 12px 16px;
border: 1.5px solid hsl(var(--border));
border: 3px solid #374151 !important; /* Bordure très visible */
border-radius: 8px;
background: hsl(var(--background));
color: hsl(var(--foreground));
font-size: 14px;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.search-input:focus {
outline: none;
border-color: hsl(var(--primary));
box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
border-color: #2563eb !important; /* Bleu vif pour le focus */
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
/* Filtres élégants */
@@ -422,17 +423,17 @@ body {
animation: slideIn 0.3s ease-out;
}
/* Sections avec cadres visibles */
/* Sections avec cadres très visibles */
.section-vendor,
.section-product,
.section-client,
.section-identity {
border: 2px solid hsl(var(--border));
border: 4px solid #374151 !important; /* Bordure très épaisse et foncée */
border-radius: 12px;
padding: 20px;
margin-bottom: 24px;
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Responsive design */