94 lines
2.7 KiB
CSS
94 lines
2.7 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 */
|
|
--accent-color-asistencias: #4CAF50;
|
|
--accent-color-empleados: #2196F3;
|
|
--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;
|
|
--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 */
|
|
|
|
/* 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;
|
|
--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);
|
|
}
|
|
|
|
.realtime-dot{width:0.6rem;height:0.6rem;border-radius:50%;display:inline-block;}
|
|
.dot-insert{background-color:#22c55e;}
|
|
.dot-update{background-color:#a855f7;}
|
|
.dot-delete{background-color:#ef4444;}
|