init

2026-03-19 14:36:35 +07:00
parent 6d7d86befd
commit 96635dbcf2
28 changed files with 4332 additions and 1683 deletions
--- a/public/styles/theme.css
+++ b/public/styles/theme.css
@@ -0,0 +1,192 @@
+/* Theme Support - Light/Dark Mode */
+
+:root {
+    --bg-primary: #ffffff;
+    --bg-secondary: #f8fafc;
+    --bg-tertiary: #f1f5f9;
+    --text-primary: #1e293b;
+    --text-secondary: #64748b;
+    --text-tertiary: #94a3b8;
+    --border-color: #e2e8f0;
+    --shadow-color: rgba(0, 0, 0, 0.1);
+}
+
+:root.dark {
+    --bg-primary: #0f172a;
+    --bg-secondary: #1e293b;
+    --bg-tertiary: #334155;
+    --text-primary: #f1f5f9;
+    --text-secondary: #cbd5e1;
+    --text-tertiary: #94a3b8;
+    --border-color: #475569;
+    --shadow-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Smooth transitions for theme switching */
+
+html {
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+body {
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+}
+
+.dark body {
+    background-color: var(--bg-secondary);
+    color: var(--text-primary);
+}
+
+/* Background gradients for different themes */
+
+.bg-gradient-light {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.bg-gradient-dark {
+    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
+}
+
+/* Text colors that change with theme */
+
+.text-muted {
+    color: var(--text-secondary);
+}
+
+.text-muted-dark {
+    color: var(--text-tertiary);
+}
+
+/* Shadow adjustments */
+
+.shadow-light {
+    box-shadow: 0 4px 6px -1px var(--shadow-color);
+}
+
+.shadow-dark {
+    box-shadow: 0 10px 15px -3px var(--shadow-color);
+}
+
+/* Input field styling for dark mode */
+
+.input-field {
+    background-color: var(--bg-primary);
+    border-color: var(--border-color);
+    color: var(--text-primary);
+}
+
+.input-field::placeholder {
+    color: var(--text-tertiary);
+}
+
+/* Card styling for dark mode */
+
+.card {
+    background-color: var(--bg-primary);
+    border-color: var(--border-color);
+}
+
+.dark .card {
+    background-color: var(--bg-secondary);
+    border-color: var(--border-color);
+}
+
+/* Header and navigation */
+
+header {
+    background-color: var(--bg-primary);
+    border-color: var(--border-color);
+}
+
+.sidebar {
+    background-color: var(--bg-primary);
+    border-color: var(--border-color);
+}
+
+/* Table styling */
+
+thead {
+    background-color: var(--bg-secondary);
+    border-color: var(--border-color);
+}
+
+tbody {
+    color: var(--text-primary);
+}
+
+.glass-panel {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+.dark .glass-panel {
+    background: rgba(15, 23, 42, 0.95);
+    backdrop-filter: blur(10px);
+    border-color: rgba(148, 163, 184, 0.1);
+}
+
+/* Hover states */
+
+.hover-light:hover {
+    background-color: var(--bg-tertiary);
+}
+
+.dark .hover-light:hover {
+    background-color: var(--bg-tertiary);
+}
+
+/* Color overlays */
+
+.color-overlay-blue {
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
+}
+
+.dark .color-overlay-blue {
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
+}
+
+/* Auth screen theme */
+
+#authModule {
+    background: linear-gradient(to bottom right, #1e3a8a, #1e40af);
+}
+
+.dark #authModule {
+    background: linear-gradient(to bottom right, #0f172a, #1e293b);
+}
+
+/* Status colors */
+
+.status-success {
+    color: #10b981;
+}
+
+.dark .status-success {
+    color: #6ee7b7;
+}
+
+.status-warning {
+    color: #f59e0b;
+}
+
+.dark .status-warning {
+    color: #fbbf24;
+}
+
+.status-error {
+    color: #ef4444;
+}
+
+.dark .status-error {
+    color: #f87171;
+}
+
+.status-info {
+    color: #3b82f6;
+}
+
+.dark .status-info {
+    color: #60a5fa;
+}