/*! * form-fix.css * Correctif de visibilité des formulaires — mode clair & mode sombre * Basé sur le design system Hope UI (hope-ui.css + dark.css) * * PROBLÈMES CORRIGÉS : * Mode clair : body bg #F5F6FA, card bg #fff → input bg #fff → invisible * Mode sombre : body bg #151824, card bg #222738 → input bg #222738 → invisible * * STRATÉGIE : * - Mode clair : inputs reçoivent un fond légèrement grisé (#F5F6FA) * + bordure visible + placeholder contrasté * - Mode sombre : inputs reçoivent le fond page (#151824) * + bordure visible + texte clair * - Focus : anneau coloré primary dans les deux modes * - Labels : couleur distincte du fond dans les deux modes * - input-group : harmonisation avec les corrections * - select : flèche SVG adaptée au mode sombre */ /* ============================================================ MODE CLAIR — fond body #F5F6FA, card #fff Les inputs passent de #fff → #F5F6FA pour se démarquer de la carte blanche qui les contient. ============================================================ */ /* Fond légèrement décalé par rapport à la carte (#fff) */ .form-control, .form-select { background-color: #F5F6FA; border: 1px solid #d1d5e0; color: #232d42; } /* Placeholder plus lisible */ .form-control::-webkit-input-placeholder { color: #9ba4b5; opacity: 1; } .form-control::-moz-placeholder { color: #9ba4b5; opacity: 1; } .form-control:-ms-input-placeholder { color: #9ba4b5; opacity: 1; } .form-control::placeholder { color: #9ba4b5; opacity: 1; } /* Focus — anneau primary Hope UI */ .form-control:focus, .form-select:focus { background-color: #fff; border-color: #9dabf4; color: #232d42; box-shadow: 0 0 0 0.063rem rgba(58, 87, 232, 0.35), 0 0.125rem 0.25rem 0 rgba(58, 87, 232, 0.15); } /* État désactivé */ .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: #e9ecef; border-color: #ced4da; color: #6c757d; cursor: not-allowed; opacity: 1; } /* Textarea */ textarea.form-control { min-height: 7rem; resize: vertical; } /* input-group-text : fond cohérent avec l'input */ .input-group-text { background-color: #eaecf3; border-color: #d1d5e0; color: #6c757d; } /* Labels */ .form-label, .col-form-label { color: #232d42; font-weight: 500; margin-bottom: 0.4rem; } /* Texte d'aide sous le champ */ .form-text { color: #7c839a; } /* Checkbox / Radio */ .form-check-input { background-color: #F5F6FA; border-color: #b0b8cc; } .form-check-input:checked { background-color: #3a57e8; border-color: #3a57e8; } .form-check-label { color: #232d42; } /* Select : flèche mode clair (chevron gris) */ .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); } /* Validation — états valide / invalide */ .form-control.is-valid { border-color: #1aa053; background-color: #f0faf4; } .form-control.is-invalid { border-color: #c03221; background-color: #fdf3f2; } .valid-feedback { color: #1aa053; } .invalid-feedback { color: #c03221; } /* form-floating : label visible sur fond #F5F6FA */ .form-floating>.form-control, .form-floating>.form-select { background-color: #F5F6FA; } .form-floating>label { color: #9ba4b5; } /* custom-form-floating (Hope UI) */ .custom-form-floating>.form-control:focus~label, .custom-form-floating>.form-control:not(:placeholder-shown)~label, .custom-form-floating>.form-select~label { background-color: #F5F6FA; color: #3a57e8; padding: 0 0.25rem; } /* ============================================================ MODE SOMBRE — .dark (classe sur ou ) card bg #222738 → inputs passent à #151824 (fond page) pour être clairement distincts de leur conteneur ============================================================ */ /* Base inputs */ .dark .form-control, .dark .form-select { background-color: #151824; border-color: #3d4666; color: #dee2e6; } /* Placeholders */ .dark .form-control::-webkit-input-placeholder { color: #5b6585; opacity: 1; } .dark .form-control::-moz-placeholder { color: #5b6585; opacity: 1; } .dark .form-control:-ms-input-placeholder { color: #5b6585; opacity: 1; } .dark .form-control::placeholder { color: #5b6585; opacity: 1; } /* Focus */ .dark .form-control:focus, .dark .form-select:focus { background-color: #0f1220; border-color: #6179ed; color: #fff; box-shadow: 0 0 0 0.063rem rgba(97, 121, 237, 0.45), 0 0.125rem 0.25rem 0 rgba(58, 87, 232, 0.2); } /* État désactivé */ .dark .form-control:disabled, .dark .form-control[readonly], .dark .form-select:disabled { background-color: #1a1f30; border-color: #2a3149; color: #4a5270; } /* input-group-text */ .dark .input-group-text { background-color: #1a2035; border-color: #3d4666; color: #8A92A6; } /* Labels */ .dark .form-label, .dark .col-form-label { color: #c8cdd8; font-weight: 500; } /* Texte d'aide */ .dark .form-text { color: #6a7494; } /* Checkbox / Radio */ .dark .form-check-input { background-color: #151824; border-color: #3d4666; } .dark .form-check-input:checked { background-color: #3a57e8; border-color: #3a57e8; } .dark .form-check-label { color: #c8cdd8; } /* Select : flèche mode sombre (chevron clair) */ .dark .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238A92A6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); } /* Validation */ .dark .form-control.is-valid { border-color: #1aa053; background-color: #0e1f16; } .dark .form-control.is-invalid { border-color: #c03221; background-color: #1f0e0b; } .dark .valid-feedback { color: #48b375; } .dark .invalid-feedback { color: #e06456; } /* form-floating en dark */ .dark .form-floating>.form-control, .dark .form-floating>.form-select { background-color: #151824; } .dark .form-floating>label { color: #5b6585; } /* custom-form-floating (Hope UI) en dark */ .dark .custom-form-floating>.form-control:focus~label, .dark .custom-form-floating>.form-control:not(:placeholder-shown)~label, .dark .custom-form-floating>.form-select~label { background-color: #151824; color: #6179ed; padding: 0 0.25rem; } /* Range input */ .dark .form-range::-webkit-slider-runnable-track { background-color: #30384f; } .dark .form-range::-moz-range-track { background-color: #30384f; } .dark .form-range::-webkit-slider-thumb { background-color: #3a57e8; } .dark .form-range::-moz-range-thumb { background-color: #3a57e8; } /* ============================================================ UTILITAIRE — carte contenant un formulaire Légère bordure pour mieux délimiter la zone en mode clair ============================================================ */ .card:has(.form-control), .card:has(.form-select) { border: 1px solid #e4e6ef; } .dark .card:has(.form-control), .dark .card:has(.form-select) { border: 1px solid #2c3350; }