nucleo000/planilla
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): apply table and accent colors to empleado form

Browse Source
This commit is contained in:
josedario87
2025-06-03 14:31:14 -06:00
parent 1d95fbc416
commit e305afeb29
2 changed files with 21 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
ui/src/style.css
View File

@@ -29,6 +29,15 @@
--accent-color-planillas: #FF9800; --accent-color-planillas: #FF9800;
--accent-color-tareas: #9C27B0; --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) */ /* Fondos de tabla (light) */
--table-container-bg-color-asistencias: #fdebee; --table-container-bg-color-asistencias: #fdebee;
--table-container-bg-color-empleados: #e3f2fd; --table-container-bg-color-empleados: #e3f2fd;
@@ -44,6 +53,13 @@ html.theme-dark {
--background-color: #303030; /* Dark theme background */ --background-color: #303030; /* Dark theme background */
--text-color: #FFFFFF; /* Text color for dark theme */ --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) */ /* NEW: Module-specific table container background colors (Dark Theme) */
--table-container-bg-color-asistencias: #4a1f28; --table-container-bg-color-asistencias: #4a1f28;
--table-container-bg-color-empleados: #193a50; --table-container-bg-color-empleados: #193a50;

15
ui/src/views/empleados/EmpleadoForm.vue
View File

@@ -243,16 +243,11 @@ input:required:invalid {
/* --- Look & feel extra (opcional, podés ajustar) --- */ /* --- Look & feel extra (opcional, podés ajustar) --- */
.empleado-form-page-container { .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 { .empleado-actual-form {
background-color: #ffffff; /* Default white for light theme */ background-color: var(--table-bg-color-empleados);
}
/* 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 */
} }
.form-container { background-color: var(--background-color); } /* Use theme background */ .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-label { color: var(--text-color); font-weight: 600; } /* Use theme text color */
.form-input { .form-input {
border-color: var(--secondary-color); /* Use secondary for border */ border-color: var(--accent-color-empleados);
background-color: var(--background-color); /* Ensure inputs match theme background */ background-color: var(--input-field-bg-color);
color: var(--text-color); /* Ensure input text matches theme text */ color: var(--text-color);
transition: border-color .2s, box-shadow .2s; transition: border-color .2s, box-shadow .2s;
} }
.form-input:focus { .form-input:focus {