Implement comprehensive theme system with FontAwesome icons
- Add comprehensive CSS custom properties for all theme colors - Include modal, button, input, text, and background color variables - Enhance dark theme with complete variable overrides for proper contrast - Replace hardcoded colors in print-preview.css with theme variables - Add FontAwesome CDN integration and replace emoji icons - Create minimalistic glass-effect checkbox styling with transparency - Fix white-on-white text issue in dark theme across all modals 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
@@ -18,19 +18,10 @@
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
|
||||
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
|
||||
--shadow-lg: 0 8px 25px rgba(0,0,0,0.15);
|
||||
--border-light: 1px solid #e9ecef;
|
||||
--border-medium: 1px solid #dee2e6;
|
||||
--transition-fast: 0.15s ease;
|
||||
--transition-normal: 0.2s ease;
|
||||
--transition-slow: 0.3s ease;
|
||||
|
||||
/* Common Glass/Glassmorphism Effects */
|
||||
--glass-bg: var(--glass-bg);
|
||||
--glass-bg-light: var(--glass-bg-light);
|
||||
--glass-bg-lighter: var(--glass-bg-lighter);
|
||||
--glass-border: 1px solid var(--glass-bg-light);
|
||||
--glass-border-light: 1px solid var(--glass-bg-lighter);
|
||||
|
||||
/* Standard Control Dimensions */
|
||||
--control-height: 40px;
|
||||
--control-padding: 0.875rem;
|
||||
@@ -39,12 +30,54 @@
|
||||
|
||||
/* Common Transition */
|
||||
--standard-transition: all 0.2s ease;
|
||||
|
||||
/* Default Light Theme Colors */
|
||||
--background-primary: #f8f9fa;
|
||||
--background-secondary: #ffffff;
|
||||
--background-tertiary: #f1f3f4;
|
||||
--text-primary: #333333;
|
||||
--text-secondary: #6c757d;
|
||||
--text-inverse: #ffffff;
|
||||
--border-primary: #e9ecef;
|
||||
--border-secondary: #dee2e6;
|
||||
--border-light: #f8f9fa;
|
||||
--error-color: #dc3545;
|
||||
--success-color: #28a745;
|
||||
--warning-color: #ffc107;
|
||||
--info-color: #17a2b8;
|
||||
|
||||
/* Modal Colors */
|
||||
--modal-background: #ffffff;
|
||||
--modal-text: #333333;
|
||||
--modal-header-background: #ffffff;
|
||||
--modal-header-border: #e5e7eb;
|
||||
|
||||
/* Button Colors */
|
||||
--button-primary-bg: #667eea;
|
||||
--button-primary-text: #ffffff;
|
||||
--button-secondary-bg: #6c757d;
|
||||
--button-secondary-text: #ffffff;
|
||||
--button-danger-bg: #dc3545;
|
||||
--button-danger-text: #ffffff;
|
||||
|
||||
/* Input Colors */
|
||||
--input-background: #ffffff;
|
||||
--input-border: #ced4da;
|
||||
--input-border-focus: #80bdff;
|
||||
--input-text: #495057;
|
||||
|
||||
/* Glass/Glassmorphism Effects */
|
||||
--glass-bg: rgba(255, 255, 255, 0.1);
|
||||
--glass-bg-light: rgba(255, 255, 255, 0.2);
|
||||
--glass-bg-lighter: rgba(255, 255, 255, 0.3);
|
||||
--glass-border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
--glass-border-light: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: #f8f9fa;
|
||||
color: #333;
|
||||
background-color: var(--background-primary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -115,6 +148,44 @@ input, select, textarea, button {
|
||||
[data-theme="dark"] {
|
||||
--primary-color: #374151;
|
||||
--primary-gradient: linear-gradient(135deg, #374151 0%, #1f2937 100%);
|
||||
|
||||
/* Dark Theme Overrides */
|
||||
--background-primary: #111827;
|
||||
--background-secondary: #1f2937;
|
||||
--background-tertiary: #374151;
|
||||
--text-primary: #f9fafb;
|
||||
--text-secondary: #d1d5db;
|
||||
--text-inverse: #111827;
|
||||
--border-primary: #374151;
|
||||
--border-secondary: #4b5563;
|
||||
--border-light: #6b7280;
|
||||
|
||||
/* Modal Colors - Dark */
|
||||
--modal-background: #1f2937;
|
||||
--modal-text: #f3f4f6;
|
||||
--modal-header-background: #1f2937;
|
||||
--modal-header-border: #374151;
|
||||
|
||||
/* Button Colors - Dark */
|
||||
--button-primary-bg: #4f46e5;
|
||||
--button-primary-text: #ffffff;
|
||||
--button-secondary-bg: #4b5563;
|
||||
--button-secondary-text: #ffffff;
|
||||
--button-danger-bg: #dc2626;
|
||||
--button-danger-text: #ffffff;
|
||||
|
||||
/* Input Colors - Dark */
|
||||
--input-background: #374151;
|
||||
--input-border: #4b5563;
|
||||
--input-border-focus: #6366f1;
|
||||
--input-text: #f9fafb;
|
||||
|
||||
/* Glass Effects - Dark */
|
||||
--glass-bg: rgba(0, 0, 0, 0.2);
|
||||
--glass-bg-light: rgba(0, 0, 0, 0.3);
|
||||
--glass-bg-lighter: rgba(0, 0, 0, 0.4);
|
||||
--glass-border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
--glass-border-light: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
[data-theme="rose"] {
|
||||
@@ -133,8 +204,8 @@ input, select, textarea, button {
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: #f8f9fa;
|
||||
color: #333;
|
||||
background-color: var(--background-primary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -637,6 +708,25 @@ body {
|
||||
background: rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.print-button {
|
||||
background: rgba(255,255,255,0.2);
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.print-button:hover {
|
||||
background: rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.calendar-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
@@ -3684,10 +3774,37 @@ body {
|
||||
}
|
||||
|
||||
.external-calendar-info input[type="checkbox"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: rgba(255, 255, 255, 0.8);
|
||||
background: transparent;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.external-calendar-info input[type="checkbox"]:hover {
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.external-calendar-info input[type="checkbox"]:checked {
|
||||
border-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.external-calendar-info input[type="checkbox"]:checked::after {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.external-calendar-color {
|
||||
@@ -3762,10 +3879,37 @@ body {
|
||||
}
|
||||
|
||||
.calendar-info input[type="checkbox"] {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: rgba(255, 255, 255, 0.8);
|
||||
background: transparent;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.calendar-info input[type="checkbox"]:hover {
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.calendar-info input[type="checkbox"]:checked {
|
||||
border-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.calendar-info input[type="checkbox"]:checked::after {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Create External Calendar Button */
|
||||
|
||||
Reference in New Issue
Block a user