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

Merge pull request #30 from josedario87/codex/update-empleados-form-styling

Browse Source 
Adjust Empleado form theming
This commit is contained in:
josedario87
2025-06-03 14:41:18 -06:00
committed by GitHub
parent 273d37f983 3d3756f3a7
commit 71e15de201
2 changed files with 21 additions and 16 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-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;

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

@@ -1,5 +1,5 @@
<template>
<div class="p-6 min-h-screen empleado-form-page-container">
<div class="p-6 min-h-screen">
<h1 class="text-3xl font-bold mb-8 text-center text-gray-700">
{{ isEditMode ? 'Editar Empleado' : 'Crear Empleado' }}
</h1>
@@ -240,19 +240,8 @@ input:required:invalid {
}
/* Removing generic input:focus, button:focus as they are too broad */
/* --- Look & feel extra (opcional, podés ajustar) --- */
.empleado-form-page-container {
background-color: var(--background-color, #f3f4f6); /* Fallback to a light gray */
}
.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 +252,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 {