connor/calendar
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Add theme-aware styling for 15-minute time grid lines
All checks were successful
Build and Push Docker Image / docker (push) Successful in 30s
Details

Browse Source 
Add --calendar-border-light CSS variables to all 8 color themes for proper
15-minute grid line styling. Previously used hard-coded fallback (#f8f8f8)
which was too bright for dark mode and inconsistent with theme colors.

- Dark mode: Use subtle #2a2a2a instead of bright #f8f8f8
- All themes: Theme-appropriate very light border colors
- Better visual integration with each color scheme
- Consistent dotted 15-minute grid lines across all themes

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-09-03 15:42:29 -04:00
parent 2b98c4d229
commit c0bdd3d8c2
1 changed files with 8 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/styles.css
View File

@@ -3267,6 +3267,7 @@ body {
--accent-color: #667eea; --accent-color: #667eea;
--calendar-bg: white; --calendar-bg: white;
--calendar-border: #f0f0f0; --calendar-border: #f0f0f0;
--calendar-border-light: #f8f8f8;
--calendar-day-bg: white; --calendar-day-bg: white;
--calendar-day-hover: #f8f9ff; --calendar-day-hover: #f8f9ff;
--calendar-day-prev-next: #fafafa; --calendar-day-prev-next: #fafafa;
@@ -3300,6 +3301,7 @@ body {
--accent-color: #2196F3; --accent-color: #2196F3;
--calendar-bg: #ffffff; --calendar-bg: #ffffff;
--calendar-border: #bbdefb; --calendar-border: #bbdefb;
--calendar-border-light: #e3f2fd;
--calendar-day-bg: #ffffff; --calendar-day-bg: #ffffff;
--calendar-day-hover: #e1f5fe; --calendar-day-hover: #e1f5fe;
--calendar-day-prev-next: #f3f8ff; --calendar-day-prev-next: #f3f8ff;
@@ -3342,6 +3344,7 @@ body {
--accent-color: #4CAF50; --accent-color: #4CAF50;
--calendar-bg: #ffffff; --calendar-bg: #ffffff;
--calendar-border: #c8e6c9; --calendar-border: #c8e6c9;
--calendar-border-light: #e8f5e8;
--calendar-day-bg: #ffffff; --calendar-day-bg: #ffffff;
--calendar-day-hover: #f1f8e9; --calendar-day-hover: #f1f8e9;
--calendar-day-prev-next: #f9fbe7; --calendar-day-prev-next: #f9fbe7;
@@ -3384,6 +3387,7 @@ body {
--accent-color: #FF9800; --accent-color: #FF9800;
--calendar-bg: #ffffff; --calendar-bg: #ffffff;
--calendar-border: #ffe0b2; --calendar-border: #ffe0b2;
--calendar-border-light: #fff3e0;
--calendar-day-bg: #ffffff; --calendar-day-bg: #ffffff;
--calendar-day-hover: #fff8e1; --calendar-day-hover: #fff8e1;
--calendar-day-prev-next: #fffde7; --calendar-day-prev-next: #fffde7;
@@ -3426,6 +3430,7 @@ body {
--accent-color: #9C27B0; --accent-color: #9C27B0;
--calendar-bg: #ffffff; --calendar-bg: #ffffff;
--calendar-border: #ce93d8; --calendar-border: #ce93d8;
--calendar-border-light: #f3e5f5;
--calendar-day-bg: #ffffff; --calendar-day-bg: #ffffff;
--calendar-day-hover: #f8e9fc; --calendar-day-hover: #f8e9fc;
--calendar-day-prev-next: #fce4ec; --calendar-day-prev-next: #fce4ec;
@@ -3468,6 +3473,7 @@ body {
--accent-color: #666666; --accent-color: #666666;
--calendar-bg: #1f1f1f; --calendar-bg: #1f1f1f;
--calendar-border: #333333; --calendar-border: #333333;
--calendar-border-light: #2a2a2a;
--calendar-day-bg: #1f1f1f; --calendar-day-bg: #1f1f1f;
--calendar-day-hover: #2a2a2a; --calendar-day-hover: #2a2a2a;
--calendar-day-prev-next: #1a1a1a; --calendar-day-prev-next: #1a1a1a;
@@ -3520,6 +3526,7 @@ body {
--accent-color: #E91E63; --accent-color: #E91E63;
--calendar-bg: #ffffff; --calendar-bg: #ffffff;
--calendar-border: #f8bbd9; --calendar-border: #f8bbd9;
--calendar-border-light: #fce4ec;
--calendar-day-bg: #ffffff; --calendar-day-bg: #ffffff;
--calendar-day-hover: #fdf2f8; --calendar-day-hover: #fdf2f8;
--calendar-day-prev-next: #fef7ff; --calendar-day-prev-next: #fef7ff;
@@ -3562,6 +3569,7 @@ body {
--accent-color: #26A69A; --accent-color: #26A69A;
--calendar-bg: #ffffff; --calendar-bg: #ffffff;
--calendar-border: #b2dfdb; --calendar-border: #b2dfdb;
--calendar-border-light: #e0f2f1;
--calendar-day-bg: #ffffff; --calendar-day-bg: #ffffff;
--calendar-day-hover: #f0fdfc; --calendar-day-hover: #f0fdfc;
--calendar-day-prev-next: #f7ffff; --calendar-day-prev-next: #f7ffff;