diff --git a/ui/src/style.css b/ui/src/style.css index fb4740a..befcd01 100644 --- a/ui/src/style.css +++ b/ui/src/style.css @@ -29,6 +29,15 @@ --accent-color-planillas: #FF9800; --accent-color-tareas: #9C27B0; + /* Table background colors */ + --table-bg-color-asistencias: #fdebee; + --table-bg-color-empleados: #e3f2fd; + --table-bg-color-planillas: #fff8e1; + --table-bg-color-tareas: #e6f4ea; + + /* Input background color */ + --input-field-bg-color: #FFFFFF; + /* Fondos de tabla (light) */ --table-container-bg-color-asistencias: #fdebee; --table-container-bg-color-empleados: #e3f2fd; @@ -44,6 +53,13 @@ html.theme-dark { --background-color: #303030; /* Dark theme background */ --text-color: #FFFFFF; /* Text color for dark theme */ + /* Table background colors (dark theme) */ + --table-bg-color-asistencias: #4a1f28; + --table-bg-color-empleados: #193a50; + --table-bg-color-planillas: #503f1b; + --table-bg-color-tareas: #1e4028; + --input-field-bg-color: #000000; + /* NEW: Module-specific table container background colors (Dark Theme) */ --table-container-bg-color-asistencias: #4a1f28; --table-container-bg-color-empleados: #193a50; diff --git a/ui/src/views/empleados/EmpleadoForm.vue b/ui/src/views/empleados/EmpleadoForm.vue index 72b86c9..472316a 100644 --- a/ui/src/views/empleados/EmpleadoForm.vue +++ b/ui/src/views/empleados/EmpleadoForm.vue @@ -243,16 +243,11 @@ input:required:invalid { /* --- Look & feel extra (opcional, podés ajustar) --- */ .empleado-form-page-container { - background-color: var(--background-color, #f3f4f6); /* Fallback to a light gray */ + background-color: var(--table-bg-color-empleados); } .empleado-actual-form { - background-color: #ffffff; /* Default white for light theme */ -} - -/* Example for dark theme (assuming a parent class .dark or data attribute) */ -.dark .empleado-actual-form { - background-color: #2d3748; /* A dark gray for dark theme */ + background-color: var(--table-bg-color-empleados); } .form-container { background-color: var(--background-color); } /* Use theme background */ @@ -263,9 +258,9 @@ input:required:invalid { .form-label { color: var(--text-color); font-weight: 600; } /* Use theme text color */ .form-input { - border-color: var(--secondary-color); /* Use secondary for border */ - background-color: var(--background-color); /* Ensure inputs match theme background */ - color: var(--text-color); /* Ensure input text matches theme text */ + border-color: var(--accent-color-empleados); + background-color: var(--input-field-bg-color); + color: var(--text-color); transition: border-color .2s, box-shadow .2s; } .form-input:focus {