Enhance styling system with new themes and fix modal theming consistency
- Add 4 new dark themes: Midnight, Charcoal, Nord, Dracula with complete CSS variable definitions - Create Apple Calendar style with glassmorphism effects and theme-aware design - Fix Google Calendar style to be theme-aware instead of using hardcoded colors - Replace hardcoded colors in modal CSS with theme variables for consistent theming - Add data-style attribute support to document root for style-specific CSS selectors - Update sidebar dropdowns to include all new theme and style options 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
@@ -196,6 +196,26 @@ input, select, textarea, button {
|
||||
[data-theme="mint"] {
|
||||
--primary-color: #10b981;
|
||||
--primary-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
}
|
||||
|
||||
[data-theme="midnight"] {
|
||||
--primary-color: #4c9aff;
|
||||
--primary-gradient: linear-gradient(135deg, #0f1419 0%, #151b26 100%);
|
||||
}
|
||||
|
||||
[data-theme="charcoal"] {
|
||||
--primary-color: #4ade80;
|
||||
--primary-gradient: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
|
||||
}
|
||||
|
||||
[data-theme="nord"] {
|
||||
--primary-color: #88c0d0;
|
||||
--primary-gradient: linear-gradient(135deg, #2e3440 0%, #3b4252 100%);
|
||||
}
|
||||
|
||||
[data-theme="dracula"] {
|
||||
--primary-color: #bd93f9;
|
||||
--primary-gradient: linear-gradient(135deg, #282a36 0%, #44475a 100%);
|
||||
}* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -469,13 +489,13 @@ body {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: var(--control-padding);
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.2s;
|
||||
@@ -483,12 +503,12 @@ body {
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
border-color: var(--input-border-focus);
|
||||
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
.form-group input:disabled {
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--background-tertiary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -594,8 +614,8 @@ body {
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
background-color: var(--error-color);
|
||||
color: var(--text-inverse);
|
||||
padding: var(--control-padding);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
@@ -1384,7 +1404,7 @@ body {
|
||||
.calendar-management-modal .modal-header {
|
||||
padding: 2rem 2.5rem 0;
|
||||
border-bottom: none;
|
||||
background: white;
|
||||
background: var(--modal-header-background);
|
||||
}
|
||||
|
||||
.calendar-management-modal .modal-body {
|
||||
@@ -1425,9 +1445,9 @@ body {
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background: white;
|
||||
color: #2563eb;
|
||||
box-shadow: inset 0 -2px 0 #2563eb,
|
||||
background: var(--modal-background);
|
||||
color: var(--primary-color);
|
||||
box-shadow: inset 0 -2px 0 var(--primary-color),
|
||||
0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
@@ -1666,7 +1686,8 @@ body {
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
background: var(--modal-background);
|
||||
color: var(--modal-text);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12),
|
||||
0 8px 16px rgba(0, 0, 0, 0.08),
|
||||
@@ -1695,13 +1716,13 @@ body {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 2rem 2.5rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid var(--modal-header-border);
|
||||
background: var(--modal-header-background);
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
color: var(--modal-text);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -1710,7 +1731,7 @@ body {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.8rem;
|
||||
color: #999;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
@@ -1724,8 +1745,8 @@ body {
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
background: #f8f9fa;
|
||||
color: #666;
|
||||
background: var(--background-tertiary);
|
||||
color: var(--text-primary);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@@ -1742,7 +1763,7 @@ body {
|
||||
}
|
||||
|
||||
.event-detail strong {
|
||||
color: #555;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
@@ -1750,7 +1771,7 @@ body {
|
||||
}
|
||||
|
||||
.event-detail span {
|
||||
color: #333;
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
word-break: break-word;
|
||||
@@ -1839,7 +1860,7 @@ body {
|
||||
}
|
||||
|
||||
.create-calendar-modal {
|
||||
background: white;
|
||||
background: var(--modal-background);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
max-width: 500px;
|
||||
@@ -1865,12 +1886,12 @@ body {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 2rem 2rem 1rem;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
border-bottom: 1px solid var(--modal-header-border);
|
||||
}
|
||||
|
||||
.create-calendar-modal .modal-header h2 {
|
||||
margin: 0;
|
||||
color: #495057;
|
||||
color: var(--modal-text);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -1879,7 +1900,7 @@ body {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: #6c757d;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
line-height: 1;
|
||||
@@ -1888,8 +1909,8 @@ body {
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
color: #495057;
|
||||
background: #f8f9fa;
|
||||
color: var(--text-primary);
|
||||
background: var(--background-tertiary);
|
||||
}
|
||||
|
||||
.create-calendar-modal .modal-body {
|
||||
@@ -1903,7 +1924,7 @@ body {
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.4rem;
|
||||
color: #374151;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
@@ -1912,9 +1933,11 @@ body {
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: 4px;
|
||||
font-size: 0.95rem;
|
||||
background: var(--input-background);
|
||||
color: var(--input-text);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
font-family: inherit;
|
||||
line-height: 1.5;
|
||||
@@ -1923,14 +1946,14 @@ body {
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: #2563eb;
|
||||
border-color: var(--input-border-focus);
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.form-group input:disabled,
|
||||
.form-group textarea:disabled {
|
||||
background-color: #f8f9fa;
|
||||
color: #6c757d;
|
||||
background-color: var(--background-tertiary);
|
||||
color: var(--text-secondary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -1975,7 +1998,7 @@ body {
|
||||
|
||||
.color-help-text {
|
||||
font-size: 0.8rem;
|
||||
color: #6c757d;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -1986,7 +2009,7 @@ body {
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid #e9ecef;
|
||||
border-top: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.cancel-button,
|
||||
@@ -2003,27 +2026,28 @@ body {
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
background: #f8f9fa;
|
||||
color: #374151;
|
||||
border: 1px solid #d1d5db;
|
||||
background: var(--background-secondary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.cancel-button:hover:not(:disabled) {
|
||||
background: #f3f4f6;
|
||||
color: #111827;
|
||||
border-color: #9ca3af;
|
||||
background: var(--background-tertiary);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-secondary);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.create-button {
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
background: var(--button-primary-bg);
|
||||
color: var(--button-primary-text);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.create-button:hover:not(:disabled) {
|
||||
background: #1d4ed8;
|
||||
background: var(--button-primary-bg);
|
||||
filter: brightness(0.9);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2),
|
||||
0 4px 8px rgba(0, 0, 0, 0.08);
|
||||
@@ -2037,20 +2061,21 @@ body {
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
background: var(--error-color);
|
||||
color: var(--text-inverse);
|
||||
padding: var(--control-padding) 1rem;
|
||||
border: 1px solid #f5c6cb;
|
||||
border: 1px solid var(--error-color);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
|
||||
/* Context Menu */
|
||||
.context-menu {
|
||||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
background: var(--modal-background);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
|
||||
0 4px 8px rgba(0, 0, 0, 0.08),
|
||||
@@ -2150,7 +2175,7 @@ body {
|
||||
.create-event-modal .form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #495057;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
@@ -2218,20 +2243,20 @@ body {
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #f8f9fa;
|
||||
color: #6c757d;
|
||||
border: 1px solid #ced4da;
|
||||
background: var(--button-secondary-bg);
|
||||
color: var(--button-secondary-text);
|
||||
border: 1px solid var(--input-border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: #e9ecef;
|
||||
color: #495057;
|
||||
border-color: #adb5bd;
|
||||
background: var(--background-tertiary);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-secondary);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
background: var(--button-primary-bg);
|
||||
color: var(--button-primary-text);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
@@ -2303,9 +2328,9 @@ body {
|
||||
}
|
||||
|
||||
.recurring-option {
|
||||
background: white;
|
||||
border: 2px solid #e9ecef;
|
||||
color: #495057;
|
||||
background: var(--input-background);
|
||||
border: 2px solid var(--border-primary);
|
||||
color: var(--text-secondary);
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border-radius: var(--border-radius-medium);
|
||||
@@ -2404,7 +2429,7 @@ body {
|
||||
/* Form Help Text and Advanced Info Styles */
|
||||
.form-help-text {
|
||||
font-size: 0.8rem;
|
||||
color: #6c757d;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.4;
|
||||
@@ -2463,7 +2488,7 @@ body {
|
||||
}
|
||||
|
||||
[data-theme="dark"] .advanced-info .form-help-text {
|
||||
border-color: #444444;
|
||||
border-color: var(--border-primary);
|
||||
}
|
||||
|
||||
/* People Tab Styles */
|
||||
@@ -2602,9 +2627,9 @@ body {
|
||||
}
|
||||
|
||||
.category-tag {
|
||||
background: white;
|
||||
border: 1px solid #667eea;
|
||||
color: #667eea;
|
||||
background: var(--input-background);
|
||||
border: 1px solid var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
@@ -2793,9 +2818,9 @@ body {
|
||||
}
|
||||
|
||||
.location-tag {
|
||||
background: white;
|
||||
border: 1px solid #28a745;
|
||||
color: #28a745;
|
||||
background: var(--input-background);
|
||||
border: 1px solid var(--success-color);
|
||||
color: var(--success-color);
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
@@ -2898,9 +2923,9 @@ body {
|
||||
|
||||
.type-category {
|
||||
padding: var(--control-padding);
|
||||
background: white;
|
||||
background: var(--input-background);
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e9ecef;
|
||||
border: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.type-category strong {
|
||||
@@ -3017,9 +3042,9 @@ body {
|
||||
|
||||
.alarm-type {
|
||||
padding: var(--control-padding);
|
||||
background: white;
|
||||
background: var(--input-background);
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e9ecef;
|
||||
border: 1px solid var(--border-primary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -3678,6 +3703,302 @@ body {
|
||||
background: var(--sidebar-bg);
|
||||
}
|
||||
|
||||
/* Midnight Theme - Deep blue-black with blue accents */
|
||||
[data-theme="midnight"] {
|
||||
--primary-gradient: linear-gradient(180deg, #0f1419 0%, #151b26 100%);
|
||||
--primary-bg: #0a0e13;
|
||||
--primary-text: #e6e6e6;
|
||||
--sidebar-bg: linear-gradient(180deg, #1a1f2e 0%, #252b3a 100%);
|
||||
--sidebar-text: #e6e6e6;
|
||||
--header-bg: linear-gradient(135deg, #1a1f2e 0%, #252b3a 100%);
|
||||
--header-text: #e6e6e6;
|
||||
--card-bg: #151b26;
|
||||
--border-color: #2d3648;
|
||||
--accent-color: #4c9aff;
|
||||
--calendar-bg: #151b26;
|
||||
--calendar-border: #2d3648;
|
||||
--calendar-border-light: #1f2937;
|
||||
--calendar-day-bg: #151b26;
|
||||
--calendar-day-hover: #1f2937;
|
||||
--calendar-day-prev-next: #0f1419;
|
||||
--calendar-day-prev-next-text: #4a5568;
|
||||
--calendar-today-bg: #1e3a8a;
|
||||
--calendar-today-border: #4c9aff;
|
||||
--calendar-today-text: #93c5fd;
|
||||
--calendar-selected-bg: #1f2937;
|
||||
--calendar-selected-border: #4c9aff;
|
||||
--calendar-selected-text: #93c5fd;
|
||||
--calendar-has-events-bg: #1a202c;
|
||||
--weekday-header-bg: #0f1419;
|
||||
--weekday-header-text: #a0aec0;
|
||||
--time-label-bg: #0f1419;
|
||||
--time-label-text: #a0aec0;
|
||||
--time-label-border: #2d3648;
|
||||
--event-colors: #4c9aff, #00d4aa, #ffa726, #ff5722, #ab47bc, #26c6da, #66bb6a, #ef5350, #ec407a, #7e57c2, #42a5f5, #ffca28, #78909c, #8d6e63, #ff7043, #5c6bc0;
|
||||
|
||||
/* Dark Theme CSS Variables */
|
||||
--background-primary: #0a0e13;
|
||||
--background-secondary: #151b26;
|
||||
--background-tertiary: #1f2937;
|
||||
--text-primary: #e6e6e6;
|
||||
--text-secondary: #a0aec0;
|
||||
--text-inverse: #0a0e13;
|
||||
--border-primary: #2d3648;
|
||||
--border-secondary: #374151;
|
||||
--border-light: #4a5568;
|
||||
--modal-background: #151b26;
|
||||
--modal-text: #e6e6e6;
|
||||
--modal-header-background: #151b26;
|
||||
--modal-header-border: #2d3648;
|
||||
--button-primary-bg: #4c9aff;
|
||||
--button-primary-text: #ffffff;
|
||||
--input-background: #1f2937;
|
||||
--input-border: #374151;
|
||||
--input-border-focus: #4c9aff;
|
||||
--input-text: #e6e6e6;
|
||||
}
|
||||
|
||||
[data-theme="midnight"] body {
|
||||
background-color: var(--primary-bg);
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
[data-theme="midnight"] .app-sidebar {
|
||||
background: var(--sidebar-bg);
|
||||
}
|
||||
|
||||
[data-theme="midnight"] .app-main {
|
||||
background-color: var(--primary-bg);
|
||||
}
|
||||
|
||||
[data-theme="midnight"] .calendar-day {
|
||||
background: var(--card-bg);
|
||||
border-color: var(--border-color);
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
/* Charcoal Theme - Pure dark grays with subtle colored accents */
|
||||
[data-theme="charcoal"] {
|
||||
--primary-gradient: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%);
|
||||
--primary-bg: #0d0d0d;
|
||||
--primary-text: #f0f0f0;
|
||||
--sidebar-bg: linear-gradient(180deg, #262626 0%, #333333 100%);
|
||||
--sidebar-text: #f0f0f0;
|
||||
--header-bg: linear-gradient(135deg, #262626 0%, #333333 100%);
|
||||
--header-text: #f0f0f0;
|
||||
--card-bg: #1a1a1a;
|
||||
--border-color: #404040;
|
||||
--accent-color: #4ade80;
|
||||
--calendar-bg: #1a1a1a;
|
||||
--calendar-border: #404040;
|
||||
--calendar-border-light: #262626;
|
||||
--calendar-day-bg: #1a1a1a;
|
||||
--calendar-day-hover: #262626;
|
||||
--calendar-day-prev-next: #0d0d0d;
|
||||
--calendar-day-prev-next-text: #595959;
|
||||
--calendar-today-bg: #166534;
|
||||
--calendar-today-border: #4ade80;
|
||||
--calendar-today-text: #86efac;
|
||||
--calendar-selected-bg: #262626;
|
||||
--calendar-selected-border: #4ade80;
|
||||
--calendar-selected-text: #86efac;
|
||||
--calendar-has-events-bg: #1f1f1f;
|
||||
--weekday-header-bg: #0d0d0d;
|
||||
--weekday-header-text: #a6a6a6;
|
||||
--time-label-bg: #0d0d0d;
|
||||
--time-label-text: #a6a6a6;
|
||||
--time-label-border: #404040;
|
||||
--event-colors: #4ade80, #06b6d4, #a855f7, #f59e0b, #ef4444, #ec4899, #8b5cf6, #10b981, #3b82f6, #f97316, #84cc16, #6366f1, #14b8a6, #f43f5e, #64748b, #71717a;
|
||||
|
||||
/* Dark Theme CSS Variables */
|
||||
--background-primary: #0d0d0d;
|
||||
--background-secondary: #1a1a1a;
|
||||
--background-tertiary: #262626;
|
||||
--text-primary: #f0f0f0;
|
||||
--text-secondary: #a6a6a6;
|
||||
--text-inverse: #0d0d0d;
|
||||
--border-primary: #404040;
|
||||
--border-secondary: #525252;
|
||||
--border-light: #595959;
|
||||
--modal-background: #1a1a1a;
|
||||
--modal-text: #f0f0f0;
|
||||
--modal-header-background: #1a1a1a;
|
||||
--modal-header-border: #404040;
|
||||
--button-primary-bg: #4ade80;
|
||||
--button-primary-text: #0d0d0d;
|
||||
--input-background: #262626;
|
||||
--input-border: #404040;
|
||||
--input-border-focus: #4ade80;
|
||||
--input-text: #f0f0f0;
|
||||
}
|
||||
|
||||
[data-theme="charcoal"] body {
|
||||
background-color: var(--primary-bg);
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
[data-theme="charcoal"] .app-sidebar {
|
||||
background: var(--sidebar-bg);
|
||||
}
|
||||
|
||||
[data-theme="charcoal"] .app-main {
|
||||
background-color: var(--primary-bg);
|
||||
}
|
||||
|
||||
[data-theme="charcoal"] .calendar-day {
|
||||
background: var(--card-bg);
|
||||
border-color: var(--border-color);
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
/* Nord Theme - Nordic-inspired dark theme */
|
||||
[data-theme="nord"] {
|
||||
--primary-gradient: linear-gradient(180deg, #2e3440 0%, #3b4252 100%);
|
||||
--primary-bg: #2e3440;
|
||||
--primary-text: #eceff4;
|
||||
--sidebar-bg: linear-gradient(180deg, #434c5e 0%, #4c566a 100%);
|
||||
--sidebar-text: #eceff4;
|
||||
--header-bg: linear-gradient(135deg, #434c5e 0%, #4c566a 100%);
|
||||
--header-text: #eceff4;
|
||||
--card-bg: #3b4252;
|
||||
--border-color: #4c566a;
|
||||
--accent-color: #88c0d0;
|
||||
--calendar-bg: #3b4252;
|
||||
--calendar-border: #4c566a;
|
||||
--calendar-border-light: #434c5e;
|
||||
--calendar-day-bg: #3b4252;
|
||||
--calendar-day-hover: #434c5e;
|
||||
--calendar-day-prev-next: #2e3440;
|
||||
--calendar-day-prev-next-text: #5e81ac;
|
||||
--calendar-today-bg: #5e81ac;
|
||||
--calendar-today-border: #88c0d0;
|
||||
--calendar-today-text: #d8dee9;
|
||||
--calendar-selected-bg: #434c5e;
|
||||
--calendar-selected-border: #88c0d0;
|
||||
--calendar-selected-text: #d8dee9;
|
||||
--calendar-has-events-bg: #3b4252;
|
||||
--weekday-header-bg: #2e3440;
|
||||
--weekday-header-text: #d8dee9;
|
||||
--time-label-bg: #2e3440;
|
||||
--time-label-text: #d8dee9;
|
||||
--time-label-border: #4c566a;
|
||||
--event-colors: #88c0d0, #81a1c1, #5e81ac, #bf616a, #d08770, #ebcb8b, #a3be8c, #b48ead, #8fbcbb, #5e81ac, #88c0d0, #81a1c1, #bf616a, #d08770, #ebcb8b, #a3be8c;
|
||||
|
||||
/* Dark Theme CSS Variables */
|
||||
--background-primary: #2e3440;
|
||||
--background-secondary: #3b4252;
|
||||
--background-tertiary: #434c5e;
|
||||
--text-primary: #eceff4;
|
||||
--text-secondary: #d8dee9;
|
||||
--text-inverse: #2e3440;
|
||||
--border-primary: #4c566a;
|
||||
--border-secondary: #5e81ac;
|
||||
--border-light: #81a1c1;
|
||||
--modal-background: #3b4252;
|
||||
--modal-text: #eceff4;
|
||||
--modal-header-background: #3b4252;
|
||||
--modal-header-border: #4c566a;
|
||||
--button-primary-bg: #88c0d0;
|
||||
--button-primary-text: #2e3440;
|
||||
--input-background: #434c5e;
|
||||
--input-border: #4c566a;
|
||||
--input-border-focus: #88c0d0;
|
||||
--input-text: #eceff4;
|
||||
}
|
||||
|
||||
[data-theme="nord"] body {
|
||||
background-color: var(--primary-bg);
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
[data-theme="nord"] .app-sidebar {
|
||||
background: var(--sidebar-bg);
|
||||
}
|
||||
|
||||
[data-theme="nord"] .app-main {
|
||||
background-color: var(--primary-bg);
|
||||
}
|
||||
|
||||
[data-theme="nord"] .calendar-day {
|
||||
background: var(--card-bg);
|
||||
border-color: var(--border-color);
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
/* Dracula Theme - Popular developer dark theme */
|
||||
[data-theme="dracula"] {
|
||||
--primary-gradient: linear-gradient(180deg, #282a36 0%, #44475a 100%);
|
||||
--primary-bg: #282a36;
|
||||
--primary-text: #f8f8f2;
|
||||
--sidebar-bg: linear-gradient(180deg, #44475a 0%, #6272a4 100%);
|
||||
--sidebar-text: #f8f8f2;
|
||||
--header-bg: linear-gradient(135deg, #44475a 0%, #6272a4 100%);
|
||||
--header-text: #f8f8f2;
|
||||
--card-bg: #44475a;
|
||||
--border-color: #6272a4;
|
||||
--accent-color: #bd93f9;
|
||||
--calendar-bg: #44475a;
|
||||
--calendar-border: #6272a4;
|
||||
--calendar-border-light: #6272a4;
|
||||
--calendar-day-bg: #44475a;
|
||||
--calendar-day-hover: #6272a4;
|
||||
--calendar-day-prev-next: #282a36;
|
||||
--calendar-day-prev-next-text: #6272a4;
|
||||
--calendar-today-bg: #bd93f9;
|
||||
--calendar-today-border: #ff79c6;
|
||||
--calendar-today-text: #282a36;
|
||||
--calendar-selected-bg: #6272a4;
|
||||
--calendar-selected-border: #bd93f9;
|
||||
--calendar-selected-text: #f8f8f2;
|
||||
--calendar-has-events-bg: #44475a;
|
||||
--weekday-header-bg: #282a36;
|
||||
--weekday-header-text: #f8f8f2;
|
||||
--time-label-bg: #282a36;
|
||||
--time-label-text: #f8f8f2;
|
||||
--time-label-border: #6272a4;
|
||||
--event-colors: #bd93f9, #ff79c6, #8be9fd, #50fa7b, #ffb86c, #ff5555, #f1fa8c, #6272a4, #ff79c6, #bd93f9, #8be9fd, #50fa7b, #ffb86c, #ff5555, #f1fa8c, #6272a4;
|
||||
|
||||
/* Dark Theme CSS Variables */
|
||||
--background-primary: #282a36;
|
||||
--background-secondary: #44475a;
|
||||
--background-tertiary: #6272a4;
|
||||
--text-primary: #f8f8f2;
|
||||
--text-secondary: #f8f8f2;
|
||||
--text-inverse: #282a36;
|
||||
--border-primary: #6272a4;
|
||||
--border-secondary: #bd93f9;
|
||||
--border-light: #ff79c6;
|
||||
--modal-background: #44475a;
|
||||
--modal-text: #f8f8f2;
|
||||
--modal-header-background: #44475a;
|
||||
--modal-header-border: #6272a4;
|
||||
--button-primary-bg: #bd93f9;
|
||||
--button-primary-text: #282a36;
|
||||
--input-background: #6272a4;
|
||||
--input-border: #bd93f9;
|
||||
--input-border-focus: #ff79c6;
|
||||
--input-text: #f8f8f2;
|
||||
}
|
||||
|
||||
[data-theme="dracula"] body {
|
||||
background-color: var(--primary-bg);
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
[data-theme="dracula"] .app-sidebar {
|
||||
background: var(--sidebar-bg);
|
||||
}
|
||||
|
||||
[data-theme="dracula"] .app-main {
|
||||
background-color: var(--primary-bg);
|
||||
}
|
||||
|
||||
[data-theme="dracula"] .calendar-day {
|
||||
background: var(--card-bg);
|
||||
border-color: var(--border-color);
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
/* Recurrence Options Styling */
|
||||
.recurrence-options {
|
||||
margin-top: 1.5rem;
|
||||
@@ -3812,7 +4133,7 @@ body {
|
||||
}
|
||||
|
||||
.external-calendar-list h3 {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
@@ -4029,7 +4350,7 @@ body {
|
||||
|
||||
/* External Calendar Modal */
|
||||
.external-calendar-modal {
|
||||
background: white;
|
||||
background: var(--modal-background);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
max-width: 500px;
|
||||
@@ -4044,12 +4365,12 @@ body {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 2rem 2rem 1rem;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
border-bottom: 1px solid var(--modal-header-border);
|
||||
}
|
||||
|
||||
.external-calendar-modal .modal-header h3 {
|
||||
margin: 0;
|
||||
color: #495057;
|
||||
color: var(--modal-text);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
@@ -4080,8 +4401,8 @@ body {
|
||||
}
|
||||
|
||||
.external-calendar-modal .modal-close:hover {
|
||||
background: #f8f9fa;
|
||||
color: #495057;
|
||||
background: var(--background-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.external-calendar-modal .modal-body {
|
||||
@@ -4096,7 +4417,7 @@ body {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
color: var(--modal-text);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@@ -4104,11 +4425,12 @@ body {
|
||||
.external-calendar-modal .form-group input[type="url"] {
|
||||
width: 100%;
|
||||
padding: var(--control-padding);
|
||||
border: 1px solid #ced4da;
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: var(--border-radius-medium);
|
||||
font-size: 0.9rem;
|
||||
transition: var(--standard-transition);
|
||||
background: white;
|
||||
background: var(--input-background);
|
||||
color: var(--input-text);
|
||||
}
|
||||
|
||||
.external-calendar-modal .form-group input[type="text"]:focus,
|
||||
@@ -4122,7 +4444,7 @@ body {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
border: 1px solid #ced4da;
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: var(--border-radius-medium);
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
@@ -4132,7 +4454,7 @@ body {
|
||||
display: block;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
color: #6c757d;
|
||||
color: var(--text-secondary);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@@ -4141,8 +4463,8 @@ body {
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
padding: 1.5rem 2rem;
|
||||
border-top: 1px solid #e9ecef;
|
||||
background: #f8f9fa;
|
||||
border-top: 1px solid var(--modal-header-border);
|
||||
background: var(--modal-header-background);
|
||||
border-radius: 0 0 12px 12px;
|
||||
}
|
||||
|
||||
@@ -4158,12 +4480,13 @@ body {
|
||||
}
|
||||
|
||||
.external-calendar-modal .btn-secondary {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
background: var(--button-secondary-bg);
|
||||
color: var(--button-secondary-text);
|
||||
}
|
||||
|
||||
.external-calendar-modal .btn-secondary:hover:not(:disabled) {
|
||||
background: #5a6268;
|
||||
background: var(--button-secondary-bg);
|
||||
filter: brightness(0.9);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@@ -4183,8 +4506,8 @@ body {
|
||||
}
|
||||
|
||||
.external-calendar-modal .error-message {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
background: var(--error-color);
|
||||
color: var(--text-inverse);
|
||||
padding: var(--control-padding) 1rem;
|
||||
border-radius: var(--border-radius-medium);
|
||||
margin-bottom: 1rem;
|
||||
|
||||
Reference in New Issue
Block a user