97f388b4c3
This commit addresses UI feedback regarding the EmpleadoForm background
and color variable usage in the Chat module.
Corrections:
1. **`EmpleadoForm.vue` Background:**
* Removed the explicit `bg-gray-100` from the outer container of
`EmpleadoForm.vue`.
* Applied a new class `.empleado-form-page-container` to the outer
container, styled for consistency with index page containers (padding,
max-width, margin, default font, no explicit background).
* The form itself retains its `bg-white` card appearance, which now sits
on a page background consistent with other views.
2. **Chat Module Color Management (`CanvasChat.vue` & `useUi.js`):**
* **`useUi.js` Store:**
* Added `accentColorChat` (defaulting to teal `rgb(13, 148, 136)`)
and `bgColorChat` (defaulting to light gray `rgb(249, 250, 251)`)
to the store's state.
* Included these new keys in `appearanceSettingKeys` for persistence.
* **`CanvasChat.vue` Component:**
* Now imports and uses the `useUi` store.
* The main chat container's background is dynamically bound to
`ui.bgColorChat`.
* The background color for user-sent messages and the send button
is dynamically bound to `ui.accentColorChat`.
* Input field focus and scrollbar styling continue to leverage the
globally defined CSS variables (`--accent-color-chat` and
`--accent-color-chat-rgb`), which use the same default teal color,
ensuring consistency.
These changes ensure the `EmpleadoForm.vue` background is visually consistent
with other application forms/pages and that the Chat module's theming is
correctly managed through the central UI store and established CSS variables.
88 lines
2.6 KiB
CSS
88 lines
2.6 KiB
CSS
@import "tailwindcss";
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
/* Colores base */
|
|
--primary-color: #1976D2;
|
|
--secondary-color: #424242;
|
|
--warning-color: #dc3545; /* rojo para acciones peligrosas */
|
|
--background-color:#FFFFFF;
|
|
|
|
/* Tipografía */
|
|
--font-family: 'Roboto', sans-serif;
|
|
--font-size: 16px;
|
|
|
|
/* Texto y bordes */
|
|
--text-color: #333333;
|
|
--muted-text-color: #555555;
|
|
--border-color: #e0e0e0;
|
|
|
|
/* Sombras */
|
|
--card-shadow: 0 2px 5px rgba(0,0,0,0.05);
|
|
--card-hover-shadow: 0 4px 10px rgba(0,0,0,0.10);
|
|
|
|
/* Colores de módulo */
|
|
/* Empleados - Blue 500 (Tailwind) */
|
|
--accent-color-empleados-rgb: 59, 130, 246;
|
|
--accent-color-empleados: rgb(var(--accent-color-empleados-rgb));
|
|
|
|
/* Chat - Teal 600 (Tailwind) */
|
|
--accent-color-chat-rgb: 13, 148, 136;
|
|
--accent-color-chat: rgb(var(--accent-color-chat-rgb));
|
|
|
|
/* Planillas - Emerald 500 (Tailwind) */
|
|
--accent-color-planillas-rgb: 16, 185, 129;
|
|
--accent-color-planillas: rgb(var(--accent-color-planillas-rgb));
|
|
|
|
/* Asistencias - Green 500 (#4CAF50) */
|
|
--accent-color-asistencias-rgb: 76, 175, 80;
|
|
--accent-color-asistencias: rgb(var(--accent-color-asistencias-rgb));
|
|
|
|
/* Tareas - Purple 500 (#9C27B0) */
|
|
--accent-color-tareas-rgb: 156, 39, 176;
|
|
--accent-color-tareas: rgb(var(--accent-color-tareas-rgb));
|
|
|
|
/* Fondos de tabla (light) */
|
|
--table-container-bg-color-asistencias: #fdebee;
|
|
--table-container-bg-color-empleados: #e3f2fd;
|
|
--table-container-bg-color-planillas: #fff8e1;
|
|
--table-container-bg-color-tareas: #e6f4ea;
|
|
}
|
|
|
|
|
|
html.theme-dark {
|
|
--primary-color: #2196F3; /* Example dark theme primary */
|
|
--secondary-color: #757575; /* Example dark theme secondary */
|
|
--warning-color: #FFA000; /* Example dark theme warning */
|
|
--background-color: #303030; /* Dark theme background */
|
|
--text-color: #FFFFFF; /* Text color for dark theme */
|
|
|
|
/* NEW: Module-specific table container background colors (Dark Theme) */
|
|
--table-container-bg-color-asistencias: #4a1f28;
|
|
--table-container-bg-color-empleados: #193a50;
|
|
--table-container-bg-color-planillas: #503f1b;
|
|
--table-container-bg-color-tareas: #1e4028;
|
|
}
|
|
|
|
/* Apply background and text color to the body for theme changes */
|
|
body {
|
|
background-color: var(--background-color);
|
|
color: var(--text-color);
|
|
font-family: var(--font-family);
|
|
font-size: var(--font-size);
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
.animations-disabled * {
|
|
transition: none !important;
|
|
animation: none !important;
|
|
}
|
|
|
|
/* Example of using a CSS variable */
|
|
.some-component {
|
|
background-color: var(--primary-color);
|
|
font-family: var(--font-family);
|
|
}
|