From 4cbc495c48a80b57ee78754b5495c0ce40b536d0 Mon Sep 17 00:00:00 2001 From: Connor Johnstone Date: Mon, 8 Sep 2025 14:55:18 -0400 Subject: [PATCH 1/8] Add print preview modal with hour range selection MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implements comprehensive print functionality for calendar views: - Print preview modal with live preview and zoom controls - Hour range selection for week view (start/end hours) - Print-specific CSS to hide UI elements and optimize layout - Event repositioning to align with visible time labels - Support for both 30-minute and 15-minute time increments - Mouse wheel zoom functionality in preview 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- frontend/Trunk.toml | 2 +- frontend/index.html | 2 + frontend/print-preview.css | 1174 +++++++++++++++++ frontend/print.css | 302 +++++ frontend/src/components/calendar.rs | 38 +- frontend/src/components/calendar_header.rs | 13 + frontend/src/components/mod.rs | 2 + .../src/components/print_preview_modal.rs | 243 ++++ frontend/src/components/week_view.rs | 8 +- 9 files changed, 1778 insertions(+), 6 deletions(-) create mode 100644 frontend/print-preview.css create mode 100644 frontend/print.css create mode 100644 frontend/src/components/print_preview_modal.rs diff --git a/frontend/Trunk.toml b/frontend/Trunk.toml index 4a5cc48..d1cd971 100644 --- a/frontend/Trunk.toml +++ b/frontend/Trunk.toml @@ -6,7 +6,7 @@ dist = "dist" BACKEND_API_URL = "http://localhost:3000/api" [watch] -watch = ["src", "Cargo.toml", "../calendar-models/src", "styles.css", "index.html"] +watch = ["src", "Cargo.toml", "../calendar-models/src", "styles.css", "print.css", "print-preview.css", "index.html"] ignore = ["../backend/", "../target/"] [serve] diff --git a/frontend/index.html b/frontend/index.html index 2ee499d..9f8c75e 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -6,6 +6,8 @@ + + diff --git a/frontend/print-preview.css b/frontend/print-preview.css new file mode 100644 index 0000000..38136b2 --- /dev/null +++ b/frontend/print-preview.css @@ -0,0 +1,1174 @@ +/* Print Preview Modal Styles */ +.print-preview-modal-backdrop { + z-index: 1100; +} + +.print-preview-modal { + width: 90vw; + max-width: 1200px; + height: 80vh; + max-height: none; + margin: 5vh auto; +} + +.print-preview-body { + display: flex; + gap: 2rem; + height: calc(100% - 60px); /* Account for header */ + padding: 1rem; +} + +.print-preview-controls { + flex: 0 0 250px; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.control-group { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.control-group label { + font-weight: 600; + color: var(--text-color); + font-size: 0.9rem; +} + +.control-group select { + padding: 0.5rem; + border: 1px solid var(--border-color); + border-radius: 4px; + background: var(--input-background); + color: var(--text-color); + font-size: 0.9rem; +} + +.hour-range-info { + padding: 0.75rem; + background: var(--background-secondary); + border: 1px solid var(--border-color); + border-radius: 4px; + font-size: 0.85rem; + color: var(--text-secondary); +} + +.month-info { + padding: 0.75rem; + background: var(--background-secondary); + border: 1px solid var(--border-color); + border-radius: 4px; + font-size: 0.85rem; + color: var(--text-secondary); +} + +.zoom-display-info { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem; + background: var(--background-secondary); + border: 1px solid var(--border-color); + border-radius: 4px; + font-size: 0.85rem; +} + +.zoom-display-info label { + font-weight: 600; + color: var(--text-color); +} + +.zoom-display-info span { + font-weight: 600; + color: var(--text-color); +} + +.zoom-hint { + color: var(--text-secondary) !important; + font-weight: normal !important; + font-style: italic; +} + +.preview-actions { + display: flex; + gap: 0.5rem; + margin-top: auto; +} + +.preview-actions button { + padding: 0.75rem 1.25rem; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 0.9rem; + font-weight: 600; + transition: all 0.2s ease; +} + +.preview-actions .btn-primary { + background: #3B82F6; + color: white; +} + +.preview-actions .btn-primary:hover { + background: #2563EB; +} + +.preview-actions .btn-secondary { + background: var(--background-secondary); + color: var(--text-color); + border: 1px solid var(--border-color); +} + +.preview-actions .btn-secondary:hover { + background: var(--background-tertiary); +} + +.print-preview-display { + flex: 1; + display: flex; + justify-content: center; + align-items: flex-start; + overflow: hidden; + background: #f5f5f5; + border-radius: 8px; + padding: 2rem; + cursor: grab; +} + +.print-preview-display:active { + cursor: grabbing; +} + +.print-preview-paper { + background: white; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + border-radius: 2px; + /* transform: scale() is now applied dynamically via inline style */ + width: 11in; /* Actual letter width */ + min-height: 8.5in; /* Letter height */ + overflow: hidden; + position: relative; + margin: 0 auto; +} + +.print-preview-content { + padding: 1rem; + height: 100%; + overflow: hidden; +} + +/* Hide UI elements in preview */ +.print-preview-paper .app-sidebar, +.print-preview-paper .print-button, +.print-preview-paper .nav-button, +.print-preview-paper .today-button, +.print-preview-paper .time-increment-button, +.print-preview-paper .current-time-indicator-container, +.print-preview-paper .current-time-indicator { + display: none !important; +} + +/* Remove today highlighting in preview */ +.print-preview-paper .calendar-day.today, +.print-preview-paper .week-day-header.today, +.print-preview-paper .week-day-column.today { + background-color: transparent !important; + border-color: #ddd !important; + color: #333 !important; + font-weight: normal !important; +} + +/* Week view hour range filtering in preview - target all possible selector paths */ +/* Hide hours before start hour (0-23) - trying multiple selector paths */ +.print-preview-paper[data-start-hour="1"] .time-grid .time-slot:nth-child(1), +.print-preview-paper[data-start-hour="1"] .week-content .time-slot:nth-child(1), +.print-preview-paper[data-start-hour="1"] .time-slot:nth-child(1) { + display: none !important; +} + +.print-preview-paper[data-start-hour="2"] .time-grid .time-slot:nth-child(-n+2), +.print-preview-paper[data-start-hour="2"] .week-content .time-slot:nth-child(-n+2), +.print-preview-paper[data-start-hour="2"] .time-slot:nth-child(-n+2) { + display: none !important; +} + +.print-preview-paper[data-start-hour="3"] .time-grid .time-slot:nth-child(-n+3), +.print-preview-paper[data-start-hour="3"] .week-content .time-slot:nth-child(-n+3), +.print-preview-paper[data-start-hour="3"] .time-slot:nth-child(-n+3) { + display: none !important; +} + +.print-preview-paper[data-start-hour="4"] .time-grid .time-slot:nth-child(-n+4), +.print-preview-paper[data-start-hour="4"] .week-content .time-slot:nth-child(-n+4), +.print-preview-paper[data-start-hour="4"] .time-slot:nth-child(-n+4) { + display: none !important; +} + +.print-preview-paper[data-start-hour="5"] .time-grid .time-slot:nth-child(-n+5), +.print-preview-paper[data-start-hour="5"] .week-content .time-slot:nth-child(-n+5), +.print-preview-paper[data-start-hour="5"] .time-slot:nth-child(-n+5) { + display: none !important; +} + +.print-preview-paper[data-start-hour="6"] .time-grid .time-slot:nth-child(-n+6), +.print-preview-paper[data-start-hour="6"] .week-content .time-slot:nth-child(-n+6), +.print-preview-paper[data-start-hour="6"] .time-slot:nth-child(-n+6) { + display: none !important; +} + +.print-preview-paper[data-start-hour="7"] .time-grid .time-slot:nth-child(-n+7), +.print-preview-paper[data-start-hour="7"] .week-content .time-slot:nth-child(-n+7), +.print-preview-paper[data-start-hour="7"] .time-slot:nth-child(-n+7) { + display: none !important; +} + +.print-preview-paper[data-start-hour="8"] .time-grid .time-slot:nth-child(-n+8), +.print-preview-paper[data-start-hour="8"] .week-content .time-slot:nth-child(-n+8), +.print-preview-paper[data-start-hour="8"] .time-slot:nth-child(-n+8) { + display: none !important; +} + +.print-preview-paper[data-start-hour="9"] .time-grid .time-slot:nth-child(-n+9), +.print-preview-paper[data-start-hour="9"] .week-content .time-slot:nth-child(-n+9), +.print-preview-paper[data-start-hour="9"] .time-slot:nth-child(-n+9) { + display: none !important; +} + +.print-preview-paper[data-start-hour="10"] .time-grid .time-slot:nth-child(-n+10), +.print-preview-paper[data-start-hour="10"] .week-content .time-slot:nth-child(-n+10), +.print-preview-paper[data-start-hour="10"] .time-slot:nth-child(-n+10) { + display: none !important; +} + +.print-preview-paper[data-start-hour="11"] .time-grid .time-slot:nth-child(-n+11), +.print-preview-paper[data-start-hour="11"] .week-content .time-slot:nth-child(-n+11), +.print-preview-paper[data-start-hour="11"] .time-slot:nth-child(-n+11) { + display: none !important; +} + +.print-preview-paper[data-start-hour="12"] .time-grid .time-slot:nth-child(-n+12), +.print-preview-paper[data-start-hour="12"] .week-content .time-slot:nth-child(-n+12), +.print-preview-paper[data-start-hour="12"] .time-slot:nth-child(-n+12) { + display: none !important; +} + +/* Adding more for brevity - showing pattern for remaining hours */ +.print-preview-paper[data-start-hour="13"] .time-slot:nth-child(-n+13), +.print-preview-paper[data-start-hour="14"] .time-slot:nth-child(-n+14), +.print-preview-paper[data-start-hour="15"] .time-slot:nth-child(-n+15), +.print-preview-paper[data-start-hour="16"] .time-slot:nth-child(-n+16), +.print-preview-paper[data-start-hour="17"] .time-slot:nth-child(-n+17), +.print-preview-paper[data-start-hour="18"] .time-slot:nth-child(-n+18), +.print-preview-paper[data-start-hour="19"] .time-slot:nth-child(-n+19), +.print-preview-paper[data-start-hour="20"] .time-slot:nth-child(-n+20), +.print-preview-paper[data-start-hour="21"] .time-slot:nth-child(-n+21), +.print-preview-paper[data-start-hour="22"] .time-slot:nth-child(-n+22), +.print-preview-paper[data-start-hour="23"] .time-slot:nth-child(-n+23) { + display: none !important; +} + +/* Hide hours after end hour (1-24) */ +.print-preview-paper[data-end-hour="1"] .time-slot:nth-child(n+2), +.print-preview-paper[data-end-hour="2"] .time-slot:nth-child(n+3), +.print-preview-paper[data-end-hour="3"] .time-slot:nth-child(n+4), +.print-preview-paper[data-end-hour="4"] .time-slot:nth-child(n+5), +.print-preview-paper[data-end-hour="5"] .time-slot:nth-child(n+6), +.print-preview-paper[data-end-hour="6"] .time-slot:nth-child(n+7), +.print-preview-paper[data-end-hour="7"] .time-slot:nth-child(n+8), +.print-preview-paper[data-end-hour="8"] .time-slot:nth-child(n+9), +.print-preview-paper[data-end-hour="9"] .time-slot:nth-child(n+10), +.print-preview-paper[data-end-hour="10"] .time-slot:nth-child(n+11), +.print-preview-paper[data-end-hour="11"] .time-slot:nth-child(n+12), +.print-preview-paper[data-end-hour="12"] .time-slot:nth-child(n+13), +.print-preview-paper[data-end-hour="13"] .time-slot:nth-child(n+14), +.print-preview-paper[data-end-hour="14"] .time-slot:nth-child(n+15), +.print-preview-paper[data-end-hour="15"] .time-slot:nth-child(n+16), +.print-preview-paper[data-end-hour="16"] .time-slot:nth-child(n+17), +.print-preview-paper[data-end-hour="17"] .time-slot:nth-child(n+18), +.print-preview-paper[data-end-hour="18"] .time-slot:nth-child(n+19), +.print-preview-paper[data-end-hour="19"] .time-slot:nth-child(n+20), +.print-preview-paper[data-end-hour="20"] .time-slot:nth-child(n+21), +.print-preview-paper[data-end-hour="21"] .time-slot:nth-child(n+22), +.print-preview-paper[data-end-hour="22"] .time-slot:nth-child(n+23), +.print-preview-paper[data-end-hour="23"] .time-slot:nth-child(n+24) { + display: none !important; +} + +/* Ensure the visible hours fit properly */ +.print-preview-paper .week-view-container { + height: auto !important; + overflow: visible !important; +} + +.print-preview-paper .week-content { + height: auto !important; + overflow: visible !important; +} + +.print-preview-paper .time-grid { + height: auto !important; + overflow: visible !important; +} + +/* Scale time slots appropriately in preview */ +.print-preview-paper .time-slot { + height: 60px !important; /* Default for 30-minute mode: 2 × 30px = 60px */ + min-height: 60px !important; + max-height: 60px !important; + border-bottom: 1px solid #ddd !important; + overflow: visible !important; +} + +/* 15-minute mode (quarter-mode) gets more height */ +.print-preview-paper .time-slot.quarter-mode { + height: 120px !important; /* 15-minute mode: 4 slots × 30px = 120px */ + min-height: 120px !important; + max-height: 120px !important; +} + +/* Sub-hour time slot styling */ +.print-preview-paper .time-slot-half { + height: 30px !important; + min-height: 30px !important; + max-height: 30px !important; + border-bottom: 1px dotted #ddd !important; + overflow: visible !important; +} + +.print-preview-paper .time-slot-half:last-child { + border-bottom: none !important; +} + +.print-preview-paper .time-slot-quarter { + height: 30px !important; + min-height: 30px !important; + max-height: 30px !important; + border-bottom: 1px dotted #eee !important; + overflow: visible !important; +} + +.print-preview-paper .time-slot-quarter:last-child { + border-bottom: none !important; +} + +/* Debug: Test if data attributes are working at all */ +.print-preview-paper .time-slot[data-hour] { + border-left: 3px solid blue !important; +} + +.print-preview-paper .time-label[data-hour] { + background-color: yellow !important; +} + +/* Test specific hour targeting */ +.print-preview-paper .time-slot[data-hour="0"] { + border-left: 3px solid red !important; +} + +.print-preview-paper .time-label[data-hour="0"] { + background-color: red !important; +} + +/* Use data attributes for precise hour targeting */ +/* Hide hours before start hour - both time slots AND time labels */ +.print-preview-paper[data-start-hour="1"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="1"] .time-label[data-hour="0"] { display: none !important; } + +.print-preview-paper[data-start-hour="2"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="2"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="2"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="2"] .time-label[data-hour="1"] { display: none !important; } + +.print-preview-paper[data-start-hour="3"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="3"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="3"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="3"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="3"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="3"] .time-label[data-hour="2"] { display: none !important; } + +.print-preview-paper[data-start-hour="4"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="4"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="4"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="4"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="4"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="4"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="4"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="4"] .time-label[data-hour="3"] { display: none !important; } + +.print-preview-paper[data-start-hour="5"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="5"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="5"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="5"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="5"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="5"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="5"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="5"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="5"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="5"] .time-label[data-hour="4"] { display: none !important; } + +.print-preview-paper[data-start-hour="6"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="6"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="6"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="6"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="6"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="6"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="6"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="6"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="6"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="6"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="6"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="6"] .time-label[data-hour="5"] { display: none !important; } + +.print-preview-paper[data-start-hour="7"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="7"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="7"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="7"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="7"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="7"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="7"] .time-slot[data-hour="6"] { display: none !important; } + +.print-preview-paper[data-start-hour="8"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="8"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="8"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="8"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="8"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="8"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="8"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="8"] .time-slot[data-hour="7"] { display: none !important; } + +.print-preview-paper[data-start-hour="9"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="9"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="9"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="9"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="9"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="9"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="9"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="9"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="9"] .time-slot[data-hour="8"] { display: none !important; } + +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="9"] { display: none !important; } + +/* Continue for remaining start hours 11-23 with similar patterns */ +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="11"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="11"] .time-label[data-hour="10"] { display: none !important; } + +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="12"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="12"] .time-label[data-hour="11"] { display: none !important; } + +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="13"] .time-label[data-hour="12"] { display: none !important; } + +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="13"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="12"], +.print-preview-paper[data-start-hour="14"] .time-label[data-hour="13"] { display: none !important; } + +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="13"], +.print-preview-paper[data-start-hour="15"] .time-slot[data-hour="14"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="12"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="13"], +.print-preview-paper[data-start-hour="15"] .time-label[data-hour="14"] { display: none !important; } + +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="13"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="14"], +.print-preview-paper[data-start-hour="16"] .time-slot[data-hour="15"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="12"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="13"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="14"], +.print-preview-paper[data-start-hour="16"] .time-label[data-hour="15"] { display: none !important; } + +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="13"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="14"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="15"], +.print-preview-paper[data-start-hour="17"] .time-slot[data-hour="16"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="12"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="13"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="14"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="15"], +.print-preview-paper[data-start-hour="17"] .time-label[data-hour="16"] { display: none !important; } + +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="13"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="14"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="15"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="16"], +.print-preview-paper[data-start-hour="18"] .time-slot[data-hour="17"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="12"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="13"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="14"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="15"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="16"], +.print-preview-paper[data-start-hour="18"] .time-label[data-hour="17"] { display: none !important; } + +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="13"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="14"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="15"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="16"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="17"], +.print-preview-paper[data-start-hour="19"] .time-slot[data-hour="18"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="12"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="13"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="14"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="15"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="16"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="17"], +.print-preview-paper[data-start-hour="19"] .time-label[data-hour="18"] { display: none !important; } + +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="13"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="14"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="15"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="16"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="17"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="18"], +.print-preview-paper[data-start-hour="20"] .time-slot[data-hour="19"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="12"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="13"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="14"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="15"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="16"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="17"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="18"], +.print-preview-paper[data-start-hour="20"] .time-label[data-hour="19"] { display: none !important; } + +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="13"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="14"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="15"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="16"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="17"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="18"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="19"], +.print-preview-paper[data-start-hour="21"] .time-slot[data-hour="20"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="12"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="13"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="14"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="15"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="16"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="17"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="18"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="19"], +.print-preview-paper[data-start-hour="21"] .time-label[data-hour="20"] { display: none !important; } + +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="13"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="14"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="15"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="16"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="17"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="18"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="19"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="20"], +.print-preview-paper[data-start-hour="22"] .time-slot[data-hour="21"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="12"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="13"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="14"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="15"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="16"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="17"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="18"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="19"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="20"], +.print-preview-paper[data-start-hour="22"] .time-label[data-hour="21"] { display: none !important; } + +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="0"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="1"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="2"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="3"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="4"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="5"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="10"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="11"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="12"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="13"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="14"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="15"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="16"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="17"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="18"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="19"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="20"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="21"], +.print-preview-paper[data-start-hour="23"] .time-slot[data-hour="22"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="0"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="1"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="2"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="3"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="4"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="5"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="6"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="7"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="8"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="9"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="10"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="11"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="12"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="13"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="14"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="15"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="16"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="17"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="18"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="19"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="20"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="21"], +.print-preview-paper[data-start-hour="23"] .time-label[data-hour="22"] { display: none !important; } + +/* Complete missing start hours 7, 8, 9, 10, 11, 12 */ +.print-preview-paper[data-start-hour="7"] .time-slot[data-hour="0"], .print-preview-paper[data-start-hour="7"] .time-slot[data-hour="1"], .print-preview-paper[data-start-hour="7"] .time-slot[data-hour="2"], .print-preview-paper[data-start-hour="7"] .time-slot[data-hour="3"], .print-preview-paper[data-start-hour="7"] .time-slot[data-hour="4"], .print-preview-paper[data-start-hour="7"] .time-slot[data-hour="5"], .print-preview-paper[data-start-hour="7"] .time-slot[data-hour="6"], +.print-preview-paper[data-start-hour="7"] .time-label[data-hour="0"], .print-preview-paper[data-start-hour="7"] .time-label[data-hour="1"], .print-preview-paper[data-start-hour="7"] .time-label[data-hour="2"], .print-preview-paper[data-start-hour="7"] .time-label[data-hour="3"], .print-preview-paper[data-start-hour="7"] .time-label[data-hour="4"], .print-preview-paper[data-start-hour="7"] .time-label[data-hour="5"], .print-preview-paper[data-start-hour="7"] .time-label[data-hour="6"] { display: none !important; } + +.print-preview-paper[data-start-hour="8"] .time-slot[data-hour="0"], .print-preview-paper[data-start-hour="8"] .time-slot[data-hour="1"], .print-preview-paper[data-start-hour="8"] .time-slot[data-hour="2"], .print-preview-paper[data-start-hour="8"] .time-slot[data-hour="3"], .print-preview-paper[data-start-hour="8"] .time-slot[data-hour="4"], .print-preview-paper[data-start-hour="8"] .time-slot[data-hour="5"], .print-preview-paper[data-start-hour="8"] .time-slot[data-hour="6"], .print-preview-paper[data-start-hour="8"] .time-slot[data-hour="7"], +.print-preview-paper[data-start-hour="8"] .time-label[data-hour="0"], .print-preview-paper[data-start-hour="8"] .time-label[data-hour="1"], .print-preview-paper[data-start-hour="8"] .time-label[data-hour="2"], .print-preview-paper[data-start-hour="8"] .time-label[data-hour="3"], .print-preview-paper[data-start-hour="8"] .time-label[data-hour="4"], .print-preview-paper[data-start-hour="8"] .time-label[data-hour="5"], .print-preview-paper[data-start-hour="8"] .time-label[data-hour="6"], .print-preview-paper[data-start-hour="8"] .time-label[data-hour="7"] { display: none !important; } + +.print-preview-paper[data-start-hour="9"] .time-slot[data-hour="0"], .print-preview-paper[data-start-hour="9"] .time-slot[data-hour="1"], .print-preview-paper[data-start-hour="9"] .time-slot[data-hour="2"], .print-preview-paper[data-start-hour="9"] .time-slot[data-hour="3"], .print-preview-paper[data-start-hour="9"] .time-slot[data-hour="4"], .print-preview-paper[data-start-hour="9"] .time-slot[data-hour="5"], .print-preview-paper[data-start-hour="9"] .time-slot[data-hour="6"], .print-preview-paper[data-start-hour="9"] .time-slot[data-hour="7"], .print-preview-paper[data-start-hour="9"] .time-slot[data-hour="8"], +.print-preview-paper[data-start-hour="9"] .time-label[data-hour="0"], .print-preview-paper[data-start-hour="9"] .time-label[data-hour="1"], .print-preview-paper[data-start-hour="9"] .time-label[data-hour="2"], .print-preview-paper[data-start-hour="9"] .time-label[data-hour="3"], .print-preview-paper[data-start-hour="9"] .time-label[data-hour="4"], .print-preview-paper[data-start-hour="9"] .time-label[data-hour="5"], .print-preview-paper[data-start-hour="9"] .time-label[data-hour="6"], .print-preview-paper[data-start-hour="9"] .time-label[data-hour="7"], .print-preview-paper[data-start-hour="9"] .time-label[data-hour="8"] { display: none !important; } + +.print-preview-paper[data-start-hour="10"] .time-slot[data-hour="0"], .print-preview-paper[data-start-hour="10"] .time-slot[data-hour="1"], .print-preview-paper[data-start-hour="10"] .time-slot[data-hour="2"], .print-preview-paper[data-start-hour="10"] .time-slot[data-hour="3"], .print-preview-paper[data-start-hour="10"] .time-slot[data-hour="4"], .print-preview-paper[data-start-hour="10"] .time-slot[data-hour="5"], .print-preview-paper[data-start-hour="10"] .time-slot[data-hour="6"], .print-preview-paper[data-start-hour="10"] .time-slot[data-hour="7"], .print-preview-paper[data-start-hour="10"] .time-slot[data-hour="8"], .print-preview-paper[data-start-hour="10"] .time-slot[data-hour="9"], +.print-preview-paper[data-start-hour="10"] .time-label[data-hour="0"], .print-preview-paper[data-start-hour="10"] .time-label[data-hour="1"], .print-preview-paper[data-start-hour="10"] .time-label[data-hour="2"], .print-preview-paper[data-start-hour="10"] .time-label[data-hour="3"], .print-preview-paper[data-start-hour="10"] .time-label[data-hour="4"], .print-preview-paper[data-start-hour="10"] .time-label[data-hour="5"], .print-preview-paper[data-start-hour="10"] .time-label[data-hour="6"], .print-preview-paper[data-start-hour="10"] .time-label[data-hour="7"], .print-preview-paper[data-start-hour="10"] .time-label[data-hour="8"], .print-preview-paper[data-start-hour="10"] .time-label[data-hour="9"] { display: none !important; } + +/* Add remaining start hours (13-23) using a more compact format */ +.print-preview-paper[data-start-hour="13"] .time-slot[data-hour="0"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="1"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="2"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="3"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="4"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="5"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="6"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="7"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="8"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="9"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="10"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="11"], .print-preview-paper[data-start-hour="13"] .time-slot[data-hour="12"] { display: none !important; } + +.print-preview-paper[data-start-hour="14"] .time-slot[data-hour="0"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="1"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="2"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="3"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="4"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="5"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="6"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="7"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="8"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="9"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="10"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="11"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="12"], .print-preview-paper[data-start-hour="14"] .time-slot[data-hour="13"] { display: none !important; } + +/* Hide hours after end hour - both time slots AND time labels */ +/* End hour rules for common times */ +.print-preview-paper[data-end-hour="8"] .time-slot[data-hour="8"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="9"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="10"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="8"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="8"] .time-label[data-hour="8"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="9"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="10"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="8"] .time-label[data-hour="23"] { display: none !important; } + +/* Add missing end hour rules */ +.print-preview-paper[data-end-hour="17"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="17"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="17"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="17"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="17"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="17"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="17"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="17"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="17"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="17"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="17"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="17"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="17"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="17"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="19"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="19"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="19"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="19"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="19"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="19"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="19"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="19"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="19"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="19"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="20"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="20"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="20"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="20"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="20"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="20"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="20"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="20"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="18"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="18"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="18"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="18"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="18"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="18"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="18"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="18"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="18"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="18"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="18"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="18"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="21"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="21"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="21"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="21"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="21"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="21"] .time-label[data-hour="23"] { display: none !important; } + +/* Add more end hour rules for hours 9-16, 23, 24 */ +.print-preview-paper[data-end-hour="9"] .time-slot[data-hour="9"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="10"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="9"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="9"] .time-label[data-hour="9"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="10"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="9"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="12"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="12"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="12"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="12"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="22"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="22"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="22"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="22"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="23"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="23"] .time-label[data-hour="23"] { display: none !important; } + +/* Complete all missing end hour rules */ +.print-preview-paper[data-end-hour="1"] .time-slot[data-hour="1"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="2"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="3"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="4"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="5"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="6"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="7"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="8"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="9"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="10"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="1"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="1"] .time-label[data-hour="1"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="2"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="3"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="4"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="5"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="6"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="7"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="8"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="9"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="10"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="1"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="2"] .time-slot[data-hour="2"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="3"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="4"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="5"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="6"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="7"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="8"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="9"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="10"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="2"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="2"] .time-label[data-hour="2"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="3"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="4"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="5"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="6"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="7"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="8"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="9"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="10"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="2"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="3"] .time-slot[data-hour="3"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="4"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="5"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="6"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="7"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="8"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="9"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="10"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="3"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="3"] .time-label[data-hour="3"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="4"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="5"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="6"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="7"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="8"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="9"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="10"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="3"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="4"] .time-slot[data-hour="4"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="5"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="6"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="7"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="8"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="9"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="10"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="4"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="4"] .time-label[data-hour="4"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="5"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="6"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="7"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="8"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="9"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="10"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="4"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="5"] .time-slot[data-hour="5"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="6"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="7"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="8"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="9"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="10"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="5"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="5"] .time-label[data-hour="5"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="6"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="7"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="8"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="9"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="10"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="5"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="6"] .time-slot[data-hour="6"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="7"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="8"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="9"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="10"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="6"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="6"] .time-label[data-hour="6"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="7"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="8"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="9"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="10"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="6"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="7"] .time-slot[data-hour="7"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="8"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="9"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="10"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="7"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="7"] .time-label[data-hour="7"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="8"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="9"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="10"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="7"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="10"] .time-slot[data-hour="10"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="10"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="10"] .time-label[data-hour="10"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="10"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="11"] .time-slot[data-hour="11"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="12"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="11"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="11"] .time-label[data-hour="11"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="12"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="11"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="13"] .time-slot[data-hour="13"], .print-preview-paper[data-end-hour="13"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="13"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="13"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="13"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="13"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="13"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="13"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="13"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="13"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="13"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="13"] .time-label[data-hour="13"], .print-preview-paper[data-end-hour="13"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="13"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="13"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="13"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="13"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="13"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="13"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="13"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="13"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="13"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="14"] .time-slot[data-hour="14"], .print-preview-paper[data-end-hour="14"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="14"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="14"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="14"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="14"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="14"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="14"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="14"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="14"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="14"] .time-label[data-hour="14"], .print-preview-paper[data-end-hour="14"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="14"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="14"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="14"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="14"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="14"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="14"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="14"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="14"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="15"] .time-slot[data-hour="15"], .print-preview-paper[data-end-hour="15"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="15"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="15"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="15"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="15"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="15"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="15"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="15"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="15"] .time-label[data-hour="15"], .print-preview-paper[data-end-hour="15"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="15"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="15"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="15"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="15"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="15"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="15"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="15"] .time-label[data-hour="23"] { display: none !important; } + +.print-preview-paper[data-end-hour="16"] .time-slot[data-hour="16"], .print-preview-paper[data-end-hour="16"] .time-slot[data-hour="17"], .print-preview-paper[data-end-hour="16"] .time-slot[data-hour="18"], .print-preview-paper[data-end-hour="16"] .time-slot[data-hour="19"], .print-preview-paper[data-end-hour="16"] .time-slot[data-hour="20"], .print-preview-paper[data-end-hour="16"] .time-slot[data-hour="21"], .print-preview-paper[data-end-hour="16"] .time-slot[data-hour="22"], .print-preview-paper[data-end-hour="16"] .time-slot[data-hour="23"], +.print-preview-paper[data-end-hour="16"] .time-label[data-hour="16"], .print-preview-paper[data-end-hour="16"] .time-label[data-hour="17"], .print-preview-paper[data-end-hour="16"] .time-label[data-hour="18"], .print-preview-paper[data-end-hour="16"] .time-label[data-hour="19"], .print-preview-paper[data-end-hour="16"] .time-label[data-hour="20"], .print-preview-paper[data-end-hour="16"] .time-label[data-hour="21"], .print-preview-paper[data-end-hour="16"] .time-label[data-hour="22"], .print-preview-paper[data-end-hour="16"] .time-label[data-hour="23"] { display: none !important; } + +/* End hour 24 (midnight next day) hides no hours since it includes the full day */ +.print-preview-paper[data-end-hour="24"] { /* Shows all hours - no additional hiding needed */ } + +/* Event positioning adjustments - shift events up when start hours are hidden */ +/* Each hidden hour = 60px in 30-min mode, 120px in 15-min mode */ + +/* Reposition events to align with visible time labels */ +/* 30-minute mode: Each hidden hour = 60px to shift up */ +.print-preview-paper[data-start-hour="1"] .week-event { transform: translateY(-60px); } +.print-preview-paper[data-start-hour="2"] .week-event { transform: translateY(-120px); } +.print-preview-paper[data-start-hour="3"] .week-event { transform: translateY(-180px); } +.print-preview-paper[data-start-hour="4"] .week-event { transform: translateY(-240px); } +.print-preview-paper[data-start-hour="5"] .week-event { transform: translateY(-300px); } +.print-preview-paper[data-start-hour="6"] .week-event { transform: translateY(-360px); } +.print-preview-paper[data-start-hour="7"] .week-event { transform: translateY(-420px); } +.print-preview-paper[data-start-hour="8"] .week-event { transform: translateY(-480px); } +.print-preview-paper[data-start-hour="9"] .week-event { transform: translateY(-540px); } +.print-preview-paper[data-start-hour="10"] .week-event { transform: translateY(-600px); } +.print-preview-paper[data-start-hour="11"] .week-event { transform: translateY(-660px); } +.print-preview-paper[data-start-hour="12"] .week-event { transform: translateY(-720px); } +.print-preview-paper[data-start-hour="13"] .week-event { transform: translateY(-780px); } +.print-preview-paper[data-start-hour="14"] .week-event { transform: translateY(-840px); } +.print-preview-paper[data-start-hour="15"] .week-event { transform: translateY(-900px); } +.print-preview-paper[data-start-hour="16"] .week-event { transform: translateY(-960px); } +.print-preview-paper[data-start-hour="17"] .week-event { transform: translateY(-1020px); } +.print-preview-paper[data-start-hour="18"] .week-event { transform: translateY(-1080px); } +.print-preview-paper[data-start-hour="19"] .week-event { transform: translateY(-1140px); } +.print-preview-paper[data-start-hour="20"] .week-event { transform: translateY(-1200px); } +.print-preview-paper[data-start-hour="21"] .week-event { transform: translateY(-1260px); } +.print-preview-paper[data-start-hour="22"] .week-event { transform: translateY(-1320px); } +.print-preview-paper[data-start-hour="23"] .week-event { transform: translateY(-1380px); } + +/* 15-minute mode: Each hidden hour = 120px to shift up */ +.print-preview-paper[data-start-hour="1"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-120px); } +.print-preview-paper[data-start-hour="2"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-240px); } +.print-preview-paper[data-start-hour="3"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-360px); } +.print-preview-paper[data-start-hour="4"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-480px); } +.print-preview-paper[data-start-hour="5"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-600px); } +.print-preview-paper[data-start-hour="6"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-720px); } +.print-preview-paper[data-start-hour="7"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-840px); } +.print-preview-paper[data-start-hour="8"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-960px); } +.print-preview-paper[data-start-hour="9"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1080px); } +.print-preview-paper[data-start-hour="10"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1200px); } +.print-preview-paper[data-start-hour="11"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1320px); } +.print-preview-paper[data-start-hour="12"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1440px); } +.print-preview-paper[data-start-hour="13"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1560px); } +.print-preview-paper[data-start-hour="14"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1680px); } +.print-preview-paper[data-start-hour="15"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1800px); } +.print-preview-paper[data-start-hour="16"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1920px); } +.print-preview-paper[data-start-hour="17"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2040px); } +.print-preview-paper[data-start-hour="18"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2160px); } +.print-preview-paper[data-start-hour="19"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2280px); } +.print-preview-paper[data-start-hour="20"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2400px); } +.print-preview-paper[data-start-hour="21"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2520px); } +.print-preview-paper[data-start-hour="22"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2640px); } +.print-preview-paper[data-start-hour="23"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2760px); } + +/* Hide events that are completely outside the visible time range */ +/* Clip events outside the visible hour range using overflow: hidden */ + +/* Allow events to be repositioned without being clipped */ +.print-preview-paper[data-start-hour][data-end-hour] .week-day-column { + overflow: visible !important; + position: relative !important; +} + +/* For events that start before the visible range but extend into it, we need to clip the top */ +/* This is complex to do with pure CSS, so the overflow: hidden on containers should handle most cases */ + +/* Dynamic height adjustments for time-labels and week-days-grid based on visible hours */ +/* Formula: (pixels_per_hour × visible_hours) + 90px extra */ +/* 30-minute mode: 60px per hour, 15-minute mode: 120px per hour */ + +/* Test: Force a specific height override for any data-start-hour/data-end-hour combination */ +.print-preview-paper[data-start-hour][data-end-hour] .time-labels, +.print-preview-paper[data-start-hour][data-end-hour] .week-days-grid, +.print-preview-paper[data-start-hour][data-end-hour] .time-grid, +.print-preview-paper[data-start-hour][data-end-hour] .week-day-column { + min-height: 400px !important; + border: 2px solid red !important; /* Debug border to see if this rule applies */ +} + +/* Height adjustments based on visible hours = end_hour - start_hour */ +/* We'll use CSS custom properties to calculate this dynamically, but for now use specific combinations */ + +/* Common hour ranges - 30-minute mode (60px per hour + 90px extra) */ + +/* 1 hour visible */ +.print-preview-paper[data-start-hour="0"][data-end-hour="1"] .time-labels, +.print-preview-paper[data-start-hour="0"][data-end-hour="1"] .week-days-grid, +.print-preview-paper[data-start-hour="0"][data-end-hour="1"] .time-grid, +.print-preview-paper[data-start-hour="0"][data-end-hour="1"] .week-day-column, +.print-preview-paper[data-start-hour="6"][data-end-hour="7"] .time-labels, +.print-preview-paper[data-start-hour="6"][data-end-hour="7"] .week-days-grid, +.print-preview-paper[data-start-hour="6"][data-end-hour="7"] .time-grid, +.print-preview-paper[data-start-hour="6"][data-end-hour="7"] .week-day-column, +.print-preview-paper[data-start-hour="11"][data-end-hour="12"] .time-labels, +.print-preview-paper[data-start-hour="11"][data-end-hour="12"] .week-days-grid, +.print-preview-paper[data-start-hour="11"][data-end-hour="12"] .time-grid, +.print-preview-paper[data-start-hour="11"][data-end-hour="12"] .week-day-column { min-height: 150px !important; } + +/* 8 hours visible (common work day) - target all height elements */ +.print-preview-paper[data-start-hour="9"][data-end-hour="17"] .time-labels, +.print-preview-paper[data-start-hour="9"][data-end-hour="17"] .week-days-grid, +.print-preview-paper[data-start-hour="9"][data-end-hour="17"] .time-grid, +.print-preview-paper[data-start-hour="9"][data-end-hour="17"] .week-day-column, +.print-preview-paper[data-start-hour="8"][data-end-hour="16"] .time-labels, +.print-preview-paper[data-start-hour="8"][data-end-hour="16"] .week-days-grid, +.print-preview-paper[data-start-hour="8"][data-end-hour="16"] .time-grid, +.print-preview-paper[data-start-hour="8"][data-end-hour="16"] .week-day-column, +.print-preview-paper[data-start-hour="7"][data-end-hour="15"] .time-labels, +.print-preview-paper[data-start-hour="7"][data-end-hour="15"] .week-days-grid, +.print-preview-paper[data-start-hour="7"][data-end-hour="15"] .time-grid, +.print-preview-paper[data-start-hour="7"][data-end-hour="15"] .week-day-column { min-height: 570px !important; } + +/* 10 hours visible */ +.print-preview-paper[data-start-hour="8"][data-end-hour="18"] .time-labels, +.print-preview-paper[data-start-hour="8"][data-end-hour="18"] .week-days-grid, +.print-preview-paper[data-start-hour="7"][data-end-hour="17"] .time-labels, +.print-preview-paper[data-start-hour="7"][data-end-hour="17"] .week-days-grid, +.print-preview-paper[data-start-hour="9"][data-end-hour="19"] .time-labels, +.print-preview-paper[data-start-hour="9"][data-end-hour="19"] .week-days-grid { min-height: 690px !important; } + +/* 12 hours visible */ +.print-preview-paper[data-start-hour="6"][data-end-hour="18"] .time-labels, +.print-preview-paper[data-start-hour="6"][data-end-hour="18"] .week-days-grid, +.print-preview-paper[data-start-hour="8"][data-end-hour="20"] .time-labels, +.print-preview-paper[data-start-hour="8"][data-end-hour="20"] .week-days-grid, +.print-preview-paper[data-start-hour="7"][data-end-hour="19"] .time-labels, +.print-preview-paper[data-start-hour="7"][data-end-hour="19"] .week-days-grid { min-height: 810px !important; } + +/* 15-minute mode (120px per hour + 90px extra) */ + +/* 1 hour visible */ +.print-preview-paper[data-start-hour="0"][data-end-hour="1"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="0"][data-end-hour="1"]:has(.time-slot.quarter-mode) .week-days-grid, +.print-preview-paper[data-start-hour="6"][data-end-hour="7"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="6"][data-end-hour="7"]:has(.time-slot.quarter-mode) .week-days-grid, +.print-preview-paper[data-start-hour="11"][data-end-hour="12"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="11"][data-end-hour="12"]:has(.time-slot.quarter-mode) .week-days-grid { min-height: 210px !important; } + +/* 8 hours visible (common work day) */ +.print-preview-paper[data-start-hour="9"][data-end-hour="17"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="9"][data-end-hour="17"]:has(.time-slot.quarter-mode) .week-days-grid, +.print-preview-paper[data-start-hour="8"][data-end-hour="16"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="8"][data-end-hour="16"]:has(.time-slot.quarter-mode) .week-days-grid, +.print-preview-paper[data-start-hour="7"][data-end-hour="15"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="7"][data-end-hour="15"]:has(.time-slot.quarter-mode) .week-days-grid { min-height: 1050px !important; } + +/* 10 hours visible */ +.print-preview-paper[data-start-hour="8"][data-end-hour="18"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="8"][data-end-hour="18"]:has(.time-slot.quarter-mode) .week-days-grid, +.print-preview-paper[data-start-hour="7"][data-end-hour="17"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="7"][data-end-hour="17"]:has(.time-slot.quarter-mode) .week-days-grid, +.print-preview-paper[data-start-hour="9"][data-end-hour="19"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="9"][data-end-hour="19"]:has(.time-slot.quarter-mode) .week-days-grid { min-height: 1290px !important; } + +/* 12 hours visible */ +.print-preview-paper[data-start-hour="6"][data-end-hour="18"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="6"][data-end-hour="18"]:has(.time-slot.quarter-mode) .week-days-grid, +.print-preview-paper[data-start-hour="8"][data-end-hour="20"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="8"][data-end-hour="20"]:has(.time-slot.quarter-mode) .week-days-grid, +.print-preview-paper[data-start-hour="7"][data-end-hour="19"]:has(.time-slot.quarter-mode) .time-labels, +.print-preview-paper[data-start-hour="7"][data-end-hour="19"]:has(.time-slot.quarter-mode) .week-days-grid { min-height: 1530px !important; } \ No newline at end of file diff --git a/frontend/print.css b/frontend/print.css new file mode 100644 index 0000000..37d29b3 --- /dev/null +++ b/frontend/print.css @@ -0,0 +1,302 @@ +/* Print-specific styles for calendar printing */ +@media print { + /* Hide UI elements that shouldn't be printed */ + .app-sidebar, + .current-time-indicator-container, + .current-time-indicator, + .print-button, + .nav-button, + .today-button, + .time-increment-button, + .modal-backdrop, + .create-event-modal, + .event-modal, + .calendar-management-modal, + .context-menu { + display: none !important; + } + + /* Remove today highlighting from calendar elements */ + .calendar-day.today, + .week-day-header.today, + .week-day-column.today { + background-color: transparent !important; + border-color: var(--border-color) !important; + color: var(--text-color) !important; + } + + /* Remove today-specific styling from day numbers */ + .calendar-day.today .day-number { + background-color: transparent !important; + color: var(--text-color) !important; + font-weight: normal !important; + } + + /* Remove today indicator from week day headers */ + .week-day-header.today .weekday-name { + color: var(--text-color) !important; + font-weight: normal !important; + } + + /* Page setup */ + @page { + size: letter landscape; + margin: 0.5in; + } + + /* Make app and main container fill full page width */ + .app, + .app-main, + .calendar-view { + width: 100% !important; + max-width: none !important; + margin: 0 !important; + padding: 0 !important; + display: block !important; + } + + /* Remove any flexbox constraints that might limit width */ + .app { + display: block !important; + } + + .app-main { + margin-left: 0 !important; /* Remove sidebar margin */ + width: 100% !important; + max-width: none !important; + } + + /* Ensure calendar uses full available width */ + .calendar-container, + .calendar { + width: 100% !important; + max-width: none !important; + margin: 0 !important; + padding: 0 !important; + } + + /* Adjust calendar header for printing */ + .calendar-header { + margin-bottom: 0.5rem !important; + padding-bottom: 0.5rem !important; + border-bottom: 1px solid var(--border-color) !important; + } + + /* Ensure text is readable in print */ + body, html { + color: black !important; + background: white !important; + } + + /* Make sure event text is readable */ + .week-event, + .calendar-event, + .month-event { + border: 1px solid #333 !important; + color: black !important; + font-size: 0.8rem !important; + line-height: 1.2 !important; + } + + /* Ensure month view events are visible */ + .calendar-day .event-list .event-item { + background-color: #f5f5f5 !important; + border: 1px solid #333 !important; + color: black !important; + } + + /* Week view specific adjustments - force full day view */ + .week-view-container { + width: 100% !important; + height: auto !important; + overflow: visible !important; + } + + .week-day-column { + border-right: 1px solid #333 !important; + height: auto !important; + overflow: visible !important; + } + + .time-column { + border-right: 2px solid #333 !important; + width: 60px !important; + min-width: 60px !important; + height: auto !important; + overflow: visible !important; + } + + /* Default time slot sizes - will be adjusted by hour range */ + .time-slot { + height: 20px !important; + min-height: 20px !important; + max-height: 20px !important; + border-bottom: 1px solid #ddd !important; + overflow: visible !important; + } + + /* Time slot quarters for 15-minute mode */ + .time-slot.quarter-mode .time-slot-quarter { + height: 5px !important; + min-height: 5px !important; + max-height: 5px !important; + border-bottom: 1px solid #eee !important; + } + + /* Time slot halves for 30-minute mode */ + .time-slot .time-slot-half { + height: 10px !important; + min-height: 10px !important; + max-height: 10px !important; + border-bottom: 1px solid #eee !important; + } + + /* Make hour boundaries more visible */ + .time-slot:nth-child(4n) { + border-bottom: 1px solid #333 !important; + height: 20px !important; + } + + /* Dynamic hour range hiding for print mode */ + body[data-print-mode="true"][data-print-start-hour="1"] .week-view .time-slot:nth-child(1) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="2"] .week-view .time-slot:nth-child(-n+2) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="3"] .week-view .time-slot:nth-child(-n+3) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="4"] .week-view .time-slot:nth-child(-n+4) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="5"] .week-view .time-slot:nth-child(-n+5) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="6"] .week-view .time-slot:nth-child(-n+6) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="7"] .week-view .time-slot:nth-child(-n+7) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="8"] .week-view .time-slot:nth-child(-n+8) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="9"] .week-view .time-slot:nth-child(-n+9) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="10"] .week-view .time-slot:nth-child(-n+10) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="11"] .week-view .time-slot:nth-child(-n+11) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="12"] .week-view .time-slot:nth-child(-n+12) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="13"] .week-view .time-slot:nth-child(-n+13) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="14"] .week-view .time-slot:nth-child(-n+14) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="15"] .week-view .time-slot:nth-child(-n+15) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="16"] .week-view .time-slot:nth-child(-n+16) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="17"] .week-view .time-slot:nth-child(-n+17) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="18"] .week-view .time-slot:nth-child(-n+18) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="19"] .week-view .time-slot:nth-child(-n+19) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="20"] .week-view .time-slot:nth-child(-n+20) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="21"] .week-view .time-slot:nth-child(-n+21) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="22"] .week-view .time-slot:nth-child(-n+22) { display: none !important; } + body[data-print-mode="true"][data-print-start-hour="23"] .week-view .time-slot:nth-child(-n+23) { display: none !important; } + + /* Hide hours after end-hour */ + body[data-print-mode="true"][data-print-end-hour="1"] .week-view .time-slot:nth-child(n+2) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="2"] .week-view .time-slot:nth-child(n+3) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="3"] .week-view .time-slot:nth-child(n+4) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="4"] .week-view .time-slot:nth-child(n+5) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="5"] .week-view .time-slot:nth-child(n+6) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="6"] .week-view .time-slot:nth-child(n+7) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="7"] .week-view .time-slot:nth-child(n+8) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="8"] .week-view .time-slot:nth-child(n+9) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="9"] .week-view .time-slot:nth-child(n+10) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="10"] .week-view .time-slot:nth-child(n+11) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="11"] .week-view .time-slot:nth-child(n+12) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="12"] .week-view .time-slot:nth-child(n+13) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="13"] .week-view .time-slot:nth-child(n+14) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="14"] .week-view .time-slot:nth-child(n+15) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="15"] .week-view .time-slot:nth-child(n+16) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="16"] .week-view .time-slot:nth-child(n+17) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="17"] .week-view .time-slot:nth-child(n+18) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="18"] .week-view .time-slot:nth-child(n+19) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="19"] .week-view .time-slot:nth-child(n+20) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="20"] .week-view .time-slot:nth-child(n+21) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="21"] .week-view .time-slot:nth-child(n+22) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="22"] .week-view .time-slot:nth-child(n+23) { display: none !important; } + body[data-print-mode="true"][data-print-end-hour="23"] .week-view .time-slot:nth-child(n+24) { display: none !important; } + + /* Force the week grid to show full height */ + .week-grid, + .week-content, + .time-grid { + height: auto !important; + max-height: none !important; + overflow: visible !important; + } + + /* Ensure all hours are visible by removing any height constraints */ + .week-view-container, + .week-view-container > div { + height: auto !important; + max-height: none !important; + overflow: visible !important; + } + + /* Month view specific adjustments */ + .calendar-grid { + border: 1px solid #333 !important; + } + + .calendar-day { + border: 1px solid #333 !important; + min-height: 80px !important; + } + + /* Ensure grid lines are visible - handled above in main time-slot rules */ + + /* Make sure header text is visible */ + .calendar-header h2, + .calendar-header .month-year { + color: black !important; + font-size: 1.5rem !important; + } + + .week-day-header .weekday-name, + .week-day-header .date-number { + color: black !important; + } + + /* Time labels in week view */ + .time-label { + color: #666 !important; + font-size: 0.75rem !important; + } + + /* Remove any shadows or fancy effects */ + * { + box-shadow: none !important; + text-shadow: none !important; + } + + /* Ensure proper spacing */ + .calendar-day .day-number { + margin-bottom: 0.25rem !important; + } + + /* Make sure events don't overlap text in month view */ + .calendar-day .event-list { + margin-top: 0.25rem !important; + } + + /* Force page break before calendar if needed */ + .calendar { + page-break-inside: avoid !important; + } +} + +/* Additional print button styling for screen display */ +.print-button { + background: rgba(255,255,255,0.2); + border: none; + color: white; + font-size: 1.2rem; + width: 40px; + height: 40px; + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: background-color 0.2s; + margin-left: 0.5rem; +} + +.print-button:hover { + background: rgba(255,255,255,0.3); +} + +.print-button:active { + transform: scale(0.95); +} \ No newline at end of file diff --git a/frontend/src/components/calendar.rs b/frontend/src/components/calendar.rs index 8608e00..02629c4 100644 --- a/frontend/src/components/calendar.rs +++ b/frontend/src/components/calendar.rs @@ -1,5 +1,5 @@ use crate::components::{ - CalendarHeader, CreateEventModal, EventCreationData, EventModal, MonthView, ViewMode, WeekView, + CalendarHeader, CreateEventModal, EventCreationData, EventModal, MonthView, PrintPreviewModal, ViewMode, WeekView, }; use crate::models::ical::VEvent; use crate::services::{calendar_service::{UserInfo, ExternalCalendar}, CalendarService}; @@ -389,6 +389,15 @@ pub fn Calendar(props: &CalendarProps) -> Html { }) }; + // Handle print calendar preview + let show_print_preview = use_state(|| false); + let on_print = { + let show_print_preview = show_print_preview.clone(); + Callback::from(move |_: MouseEvent| { + show_print_preview.set(true); + }) + }; + // Handle drag-to-create event let on_create_event = { let show_create_modal = show_create_modal.clone(); @@ -457,6 +466,7 @@ pub fn Calendar(props: &CalendarProps) -> Html { on_today={on_today} time_increment={Some(*time_increment)} on_time_increment_toggle={Some(on_time_increment_toggle)} + on_print={Some(on_print)} /> { @@ -563,6 +573,32 @@ pub fn Calendar(props: &CalendarProps) -> Html { }) }} /> + + // Print preview modal + { + if *show_print_preview { + html! { + + } + } else { + html! {} + } + } } } diff --git a/frontend/src/components/calendar_header.rs b/frontend/src/components/calendar_header.rs index a81c6e4..d92543e 100644 --- a/frontend/src/components/calendar_header.rs +++ b/frontend/src/components/calendar_header.rs @@ -14,6 +14,8 @@ pub struct CalendarHeaderProps { pub time_increment: Option, #[prop_or_default] pub on_time_increment_toggle: Option>, + #[prop_or_default] + pub on_print: Option>, } #[function_component(CalendarHeader)] @@ -39,6 +41,17 @@ pub fn calendar_header(props: &CalendarHeaderProps) -> Html { html! {} } } + { + if let Some(print_callback) = &props.on_print { + html! { + + } + } else { + html! {} + } + }

{title}

diff --git a/frontend/src/components/mod.rs b/frontend/src/components/mod.rs index 460b866..f0078e3 100644 --- a/frontend/src/components/mod.rs +++ b/frontend/src/components/mod.rs @@ -13,6 +13,7 @@ pub mod external_calendar_modal; pub mod login; pub mod mobile_warning_modal; pub mod month_view; +pub mod print_preview_modal; pub mod recurring_edit_modal; pub mod route_handler; pub mod sidebar; @@ -32,6 +33,7 @@ pub use event_modal::EventModal; pub use login::Login; pub use mobile_warning_modal::MobileWarningModal; pub use month_view::MonthView; +pub use print_preview_modal::PrintPreviewModal; pub use recurring_edit_modal::{RecurringEditAction, RecurringEditModal}; pub use route_handler::RouteHandler; pub use sidebar::{Sidebar, Theme, ViewMode}; diff --git a/frontend/src/components/print_preview_modal.rs b/frontend/src/components/print_preview_modal.rs new file mode 100644 index 0000000..23c921f --- /dev/null +++ b/frontend/src/components/print_preview_modal.rs @@ -0,0 +1,243 @@ +use crate::components::{ViewMode, WeekView, MonthView}; +use crate::models::ical::VEvent; +use crate::services::calendar_service::{UserInfo, ExternalCalendar}; +use chrono::NaiveDate; +use std::collections::HashMap; +use wasm_bindgen::{closure::Closure, JsCast}; +use yew::prelude::*; + +#[derive(Properties, PartialEq)] +pub struct PrintPreviewModalProps { + pub on_close: Callback<()>, + pub view_mode: ViewMode, + pub current_date: NaiveDate, + pub selected_date: NaiveDate, + pub events: HashMap>, + pub user_info: Option, + pub external_calendars: Vec, + pub time_increment: u32, + pub today: NaiveDate, +} + +#[function_component] +pub fn PrintPreviewModal(props: &PrintPreviewModalProps) -> Html { + let start_hour = use_state(|| 6u32); + let end_hour = use_state(|| 22u32); + let zoom_level = use_state(|| 0.4f64); // Default 40% zoom + + let close_modal = { + let on_close = props.on_close.clone(); + Callback::from(move |_| { + on_close.emit(()); + }) + }; + + let backdrop_click = { + let on_close = props.on_close.clone(); + Callback::from(move |e: MouseEvent| { + if e.target() == e.current_target() { + on_close.emit(()); + } + }) + }; + + let on_start_hour_change = { + let start_hour = start_hour.clone(); + let end_hour = end_hour.clone(); + Callback::from(move |e: Event| { + let target = e.target_dyn_into::(); + if let Some(select) = target { + if let Ok(hour) = select.value().parse::() { + if hour < *end_hour { + start_hour.set(hour); + } + } + } + }) + }; + + let on_end_hour_change = { + let start_hour = start_hour.clone(); + let end_hour = end_hour.clone(); + Callback::from(move |e: Event| { + let target = e.target_dyn_into::(); + if let Some(select) = target { + if let Ok(hour) = select.value().parse::() { + if hour > *start_hour && hour <= 24 { + end_hour.set(hour); + } + } + } + }) + }; + + let on_print = { + let start_hour = *start_hour; + let end_hour = *end_hour; + let view_mode = props.view_mode.clone(); + Callback::from(move |_: MouseEvent| { + if let Some(window) = web_sys::window() { + if let Some(document) = window.document() { + if let Some(body) = document.body() { + // Add print attributes to body for CSS targeting + if view_mode == ViewMode::Week { + let _ = body.set_attribute("data-print-start-hour", &start_hour.to_string()); + let _ = body.set_attribute("data-print-end-hour", &end_hour.to_string()); + } + let _ = body.set_attribute("data-print-mode", "true"); + + // Trigger print + if let Err(e) = window.print() { + web_sys::console::log_1(&format!("Print failed: {:?}", e).into()); + } + + // Clean up attributes after a short delay + let cleanup_body = body.clone(); + let cleanup_callback = Closure::wrap(Box::new(move || { + let _ = cleanup_body.remove_attribute("data-print-start-hour"); + let _ = cleanup_body.remove_attribute("data-print-end-hour"); + let _ = cleanup_body.remove_attribute("data-print-mode"); + }) as Box); + + let _ = window.set_timeout_with_callback_and_timeout_and_arguments_0( + cleanup_callback.as_ref().unchecked_ref(), + 1000 + ); + cleanup_callback.forget(); + } + } + } + }) + }; + + let format_hour = |hour: u32| -> String { + if hour == 0 { + "12 AM".to_string() + } else if hour < 12 { + format!("{} AM", hour) + } else if hour == 12 { + "12 PM".to_string() + } else { + format!("{} PM", hour - 12) + } + }; + + html! { +
+
+
+

{"Print Preview"}

+ +
+
+
+ { + if props.view_mode == ViewMode::Week { + html! { + <> +
+ + +
+
+ + +
+
+ {format!("Will print from {} to {}", + format_hour(*start_hour), + if *end_hour == 24 { "12 AM".to_string() } else { format_hour(*end_hour) } + )} +
+ + } + } else { + html! { +
+ {"Will print entire month view"} +
+ } + } + } +
+ + {format!("{}%", (*zoom_level * 100.0) as i32)} + {"(scroll to zoom)"} +
+
+ + +
+
+
+
+
+ { + match props.view_mode { + ViewMode::Week => html! { + + }, + ViewMode::Month => html! { + >} + on_event_click={Callback::noop()} + user_info={props.user_info.clone()} + external_calendars={props.external_calendars.clone()} + /> + }, + } + } +
+
+
+
+
+
+ } +} \ No newline at end of file diff --git a/frontend/src/components/week_view.rs b/frontend/src/components/week_view.rs index 314801c..ff58762 100644 --- a/frontend/src/components/week_view.rs +++ b/frontend/src/components/week_view.rs @@ -438,13 +438,13 @@ pub fn week_view(props: &WeekViewProps) -> Html { // Time labels
{ - time_labels.iter().map(|time| { + time_labels.iter().enumerate().map(|(hour, time)| { let is_quarter_mode = props.time_increment == 15; html! {
+ )} data-hour={hour.to_string()}> {time}
} @@ -701,10 +701,10 @@ pub fn week_view(props: &WeekViewProps) -> Html { > // Time slot backgrounds - 24 hour slots to represent full day { - (0..24).map(|_hour| { + (0..24).map(|hour| { let slots_per_hour = 60 / props.time_increment; html! { -
+
{ (0..slots_per_hour).map(|_slot| { let slot_class = if props.time_increment == 15 { From 78db2cc00f57af9a154af182cc21d3c4ce416b34 Mon Sep 17 00:00:00 2001 From: Connor Johnstone Date: Thu, 11 Sep 2025 18:53:40 -0400 Subject: [PATCH 2/8] Fix print preview paper dimensions and cleanup redundant CSS files MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Change print preview to landscape orientation (11" x 8.5") - Fix paper div to render at exact 1056x816 pixels - Add 48px padding (0.5 inches) directly to paper div - Remove CSS file redundancy: deleted styles.css.backup, styles/base.css, styles/default.css - Improve modal sizing to accommodate paper dimensions 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- frontend/print-preview.css | 16 +- frontend/styles.css.backup | 3501 ---------------------------------- frontend/styles/base.css | 51 - frontend/styles/default.css | 3511 ----------------------------------- 4 files changed, 9 insertions(+), 7070 deletions(-) delete mode 100644 frontend/styles.css.backup delete mode 100644 frontend/styles/base.css delete mode 100644 frontend/styles/default.css diff --git a/frontend/print-preview.css b/frontend/print-preview.css index 38136b2..59932a9 100644 --- a/frontend/print-preview.css +++ b/frontend/print-preview.css @@ -6,8 +6,8 @@ .print-preview-modal { width: 90vw; max-width: 1200px; - height: 80vh; - max-height: none; + height: auto; /* Let modal size itself based on content */ + max-height: 90vh; /* But don't exceed viewport */ margin: 5vh auto; } @@ -131,7 +131,7 @@ display: flex; justify-content: center; align-items: flex-start; - overflow: hidden; + overflow: auto; /* Allow scrolling if paper is larger than container */ background: #f5f5f5; border-radius: 8px; padding: 2rem; @@ -147,15 +147,17 @@ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-radius: 2px; /* transform: scale() is now applied dynamically via inline style */ - width: 11in; /* Actual letter width */ - min-height: 8.5in; /* Letter height */ + width: 1056px; /* 11in at 96 DPI - LANDSCAPE width */ + height: 816px; /* 8.5in at 96 DPI - LANDSCAPE height */ + padding: 48px; /* 0.5 inches at 96 DPI */ + box-sizing: border-box; /* Include padding in dimensions */ overflow: hidden; position: relative; margin: 0 auto; + flex-shrink: 0; /* Don't shrink in flex container */ } .print-preview-content { - padding: 1rem; height: 100%; overflow: hidden; } @@ -1171,4 +1173,4 @@ .print-preview-paper[data-start-hour="8"][data-end-hour="20"]:has(.time-slot.quarter-mode) .time-labels, .print-preview-paper[data-start-hour="8"][data-end-hour="20"]:has(.time-slot.quarter-mode) .week-days-grid, .print-preview-paper[data-start-hour="7"][data-end-hour="19"]:has(.time-slot.quarter-mode) .time-labels, -.print-preview-paper[data-start-hour="7"][data-end-hour="19"]:has(.time-slot.quarter-mode) .week-days-grid { min-height: 1530px !important; } \ No newline at end of file +.print-preview-paper[data-start-hour="7"][data-end-hour="19"]:has(.time-slot.quarter-mode) .week-days-grid { min-height: 1530px !important; } diff --git a/frontend/styles.css.backup b/frontend/styles.css.backup deleted file mode 100644 index c4f437a..0000000 --- a/frontend/styles.css.backup +++ /dev/null @@ -1,3501 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background-color: #f8f9fa; - color: #333; - line-height: 1.6; -} - -.app { - min-height: 100vh; - display: flex; - flex-direction: row; -} - -.login-layout { - min-height: 100vh; - display: flex; - flex-direction: column; - width: 100%; -} - -/* Sidebar Styles */ -.app-sidebar { - width: 280px; - min-height: 100vh; - background: linear-gradient(180deg, #667eea 0%, #764ba2 100%); - color: white; - display: flex; - flex-direction: column; - box-shadow: 2px 0 8px rgba(0,0,0,0.1); - position: fixed; - left: 0; - top: 0; - z-index: 100; -} - -.sidebar-header { - padding: 2rem 1.5rem 1.5rem; - border-bottom: 1px solid rgba(255,255,255,0.2); -} - -.sidebar-header h1 { - margin: 0 0 1rem 0; - font-size: 1.8rem; - font-weight: 600; - text-align: center; -} - -.user-info { - text-align: center; - margin-bottom: 0.5rem; -} - -.user-info .username { - font-size: 1.1rem; - font-weight: 600; - color: white; - margin-bottom: 0.25rem; -} - -.user-info .server-url { - font-size: 0.8rem; - color: rgba(255,255,255,0.7); - word-break: break-all; - line-height: 1.2; -} - -.user-info.loading { - font-size: 0.9rem; - color: rgba(255,255,255,0.6); - font-style: italic; -} - -.sidebar-nav { - padding: 1rem; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.sidebar-nav .nav-link { - color: white; - text-decoration: none; - padding: 0.75rem 1rem; - border-radius: 8px; - transition: all 0.2s; - font-weight: 500; - display: flex; - align-items: center; -} - -.sidebar-nav .nav-link:hover { - background-color: rgba(255,255,255,0.15); - transform: translateX(4px); -} - -.sidebar-nav .nav-link.active { - background-color: rgba(255,255,255,0.2); - box-shadow: 0 2px 4px rgba(0,0,0,0.1); -} - -.calendar-list { - flex: 1; - padding: 1rem; - border-top: 1px solid rgba(255,255,255,0.1); -} - -.calendar-list h3 { - color: white; - font-size: 1rem; - font-weight: 600; - margin: 0 0 1rem 0; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.calendar-list ul { - list-style: none; - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.calendar-list li { - display: flex; - align-items: center; - padding: 0.5rem 0.75rem; - background: rgba(255,255,255,0.1); - border-radius: 6px; - transition: all 0.2s; - cursor: pointer; - gap: 0.75rem; -} - -.calendar-list li:hover { - background: rgba(255,255,255,0.15); - transform: translateX(2px); -} - -.calendar-color { - width: 16px; - height: 16px; - border-radius: 50%; - flex-shrink: 0; - border: 2px solid rgba(255,255,255,0.3); - transition: all 0.2s; - cursor: pointer; - position: relative; -} - -.calendar-list li:hover .calendar-color { - border-color: rgba(255,255,255,0.6); - transform: scale(1.1); -} - -.color-picker { - position: absolute; - top: 100%; - left: 0; - background: white; - border-radius: 8px; - padding: 8px; - box-shadow: 0 4px 12px rgba(0,0,0,0.15); - z-index: 1000; - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 6px; - min-width: 120px; - border: 1px solid rgba(0,0,0,0.1); -} - -.color-option { - width: 20px; - height: 20px; - border-radius: 50%; - border: 2px solid rgba(0,0,0,0.1); - cursor: pointer; - transition: all 0.2s; -} - -.color-option:hover { - transform: scale(1.2); - border-color: rgba(0,0,0,0.3); -} - -.color-option.selected { - border-color: #333; - border-width: 3px; - transform: scale(1.1); -} - -.color-picker-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 999; -} - -.calendar-name { - color: white; - font-size: 0.9rem; - font-weight: 500; - flex: 1; -} - -.no-calendars { - padding: 1rem; - text-align: center; - color: rgba(255,255,255,0.6); - font-size: 0.9rem; - font-style: italic; - border-top: 1px solid rgba(255,255,255,0.1); -} - -.sidebar-footer { - padding: 1rem; - border-top: 1px solid rgba(255,255,255,0.1); -} - -.app-main { - flex: 1; - margin-left: 280px; - padding: 2rem; - max-width: calc(100% - 280px); - width: calc(100% - 280px); - box-sizing: border-box; -} - -/* Authentication Forms */ -.login-container, .register-container { - display: flex; - justify-content: center; - align-items: center; - min-height: 60vh; -} - -.login-form, .register-form { - background: white; - padding: 2rem; - border-radius: 8px; - box-shadow: 0 4px 6px rgba(0,0,0,0.1); - width: 100%; - max-width: 400px; -} - -.login-form h2, .register-form h2 { - text-align: center; - margin-bottom: 2rem; - color: #333; -} - -.form-group { - margin-bottom: 1.5rem; -} - -.form-group label { - display: block; - margin-bottom: 0.5rem; - font-weight: 500; - color: #555; -} - -.form-group input { - width: 100%; - padding: 0.75rem; - border: 1px solid #ddd; - border-radius: 4px; - font-size: 1rem; - transition: border-color 0.2s; -} - -.form-group input:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2); -} - -.form-group input:disabled { - background-color: #f5f5f5; - cursor: not-allowed; -} - -.remember-checkbox { - display: flex; - align-items: center; - gap: 0.375rem; - margin-top: 0.375rem; - opacity: 0.7; -} - -.remember-checkbox input[type="checkbox"] { - width: auto; - margin: 0; - cursor: pointer; - transform: scale(0.85); -} - -.remember-checkbox label { - margin: 0; - font-size: 0.75rem; - color: #888; - cursor: pointer; - user-select: none; - font-weight: 400; -} - -.login-button, .register-button { - width: 100%; - padding: 0.75rem; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border: none; - border-radius: 4px; - font-size: 1rem; - font-weight: 500; - cursor: pointer; - transition: transform 0.2s, box-shadow 0.2s; -} - -.login-button:hover, .register-button:hover { - transform: translateY(-1px); - box-shadow: 0 4px 8px rgba(0,0,0,0.2); -} - -.login-button:disabled, .register-button:disabled { - background: #ccc; - transform: none; - cursor: not-allowed; -} - -.error-message { - background-color: #f8d7da; - color: #721c24; - padding: 0.75rem; - border-radius: 4px; - margin-bottom: 1rem; - border: 1px solid #f5c6cb; -} - -.auth-links { - text-align: center; - margin-top: 2rem; - color: #666; -} - -.auth-links a { - color: #667eea; - text-decoration: none; -} - -.auth-links a:hover { - text-decoration: underline; -} - -.logout-button { - background: rgba(255,255,255,0.1); - border: 1px solid rgba(255,255,255,0.2); - color: white; - padding: 0.75rem 1rem; - border-radius: 8px; - cursor: pointer; - transition: all 0.2s; - font-weight: 500; - width: 100%; -} - -.logout-button:hover { - background: rgba(255,255,255,0.2); - transform: translateY(-1px); -} - -/* Calendar View */ -.calendar-view { - height: calc(100vh - 4rem); /* Full height minus main padding */ - display: flex; - flex-direction: column; -} - -.calendar-loading, .calendar-error { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - background: white; - border-radius: 12px; - box-shadow: 0 4px 16px rgba(0,0,0,0.1); -} - -.calendar-loading p { - font-size: 1.2rem; - color: #666; -} - -.calendar-error p { - font-size: 1.2rem; - color: #d32f2f; -} - -/* Calendar Component */ -.calendar { - background: var(--calendar-bg, white); - border-radius: 12px; - box-shadow: 0 4px 16px rgba(0,0,0,0.1); - overflow: hidden; - flex: 1; - display: flex; - flex-direction: column; -} - -.calendar-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1.5rem 2rem; - background: var(--header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%)); - color: var(--header-text, white); -} - -.month-year { - font-size: 1.8rem; - font-weight: 600; - margin: 0; - position: absolute; - left: 50%; - transform: translateX(-50%); -} - -.header-left { - display: flex; - align-items: center; - gap: 8px; -} - -.header-right { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.time-increment-button { - background: rgba(255,255,255,0.2); - border: none; - color: white; - font-size: 14px; - font-weight: bold; - width: 40px; - height: 40px; - border-radius: 50%; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: background-color 0.2s; -} - -.time-increment-button:hover { - background: rgba(255,255,255,0.3); -} - -.nav-button { - background: rgba(255,255,255,0.2); - border: none; - color: white; - font-size: 1.5rem; - font-weight: bold; - width: 40px; - height: 40px; - border-radius: 50%; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: background-color 0.2s; -} - -.nav-button:hover { - background: rgba(255,255,255,0.3); -} - -.today-button { - background: rgba(255,255,255,0.2); - border: none; - color: white; - font-size: 0.9rem; - font-weight: 500; - padding: 0.5rem 1rem; - border-radius: 20px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: background-color 0.2s; -} - -.today-button:hover { - background: rgba(255,255,255,0.3); -} - -.calendar-grid { - display: grid; - grid-template-columns: repeat(7, 1fr); - grid-template-rows: auto repeat(6, 1fr); - flex: 1; - background: var(--calendar-bg, white); - gap: 0; -} - -/* Week View Container */ -.week-view-container { - display: flex; - flex-direction: column; - height: 100%; - background: var(--calendar-bg, white); -} - -/* Week Header */ -.week-header { - display: grid; - grid-template-columns: 80px repeat(7, 1fr); - background: var(--weekday-header-bg, #f8f9fa); - border-bottom: 2px solid var(--time-label-border, #e9ecef); - position: sticky; - top: 0; - z-index: 10; -} - -.time-gutter { - background: var(--time-label-bg, #f8f9fa); - border-right: 1px solid var(--time-label-border, #e9ecef); -} - -.week-day-header { - padding: 1rem; - text-align: center; - border-right: 1px solid var(--time-label-border, #e9ecef); - background: var(--weekday-header-bg, #f8f9fa); - color: var(--weekday-header-text, inherit); -} - -.week-day-header.today { - background: var(--calendar-today-bg, #e3f2fd); - color: var(--calendar-today-text, #1976d2); -} - -.weekday-name { - font-size: 0.9rem; - font-weight: 600; - color: var(--weekday-header-text, #666); - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; -} - -.week-day-header .day-number { - font-size: 1.5rem; - font-weight: 700; -} - -.week-day-header.today .weekday-name { - color: var(--calendar-today-text, #1976d2); -} - -/* Week Content */ -.week-content { - flex: 1; - overflow-y: auto; - overflow-x: hidden; -} - -.time-grid { - display: grid; - grid-template-columns: 80px 1fr; - min-height: 100%; -} - -/* Time Labels */ -.time-labels { - background: var(--time-label-bg, #f8f9fa); - border-right: 1px solid var(--time-label-border, #e9ecef); - position: sticky; - left: 0; - z-index: 5; -} - -.time-label { - height: 60px; - display: flex; - align-items: flex-start; - justify-content: center; - padding-top: 0.5rem; - font-size: 0.75rem; - color: var(--time-label-text, #666); - border-bottom: 1px solid var(--calendar-border, #f0f0f0); - font-weight: 500; -} - -.time-label.final-boundary { - height: 60px; /* Keep same height but this marks the end boundary */ - border-bottom: 2px solid #e9ecef; /* Stronger border to show day end */ - color: #999; /* Lighter color to indicate it's the boundary */ - font-size: 0.7rem; -} - -/* Week Days Grid */ -.week-days-grid { - display: grid; - grid-template-columns: repeat(7, 1fr); -} - -.week-day-column { - position: relative; - border-right: 1px solid var(--time-label-border, #e9ecef); - min-height: 1500px; /* 25 time labels × 60px = 1500px total */ -} - -.week-day-column:last-child { - border-right: none; -} - -.week-day-column.today { - background: var(--calendar-day-hover, #fafffe); -} - -/* Time Slots */ -.time-slot { - height: 60px; - border-bottom: 1px solid var(--calendar-border, #f0f0f0); - position: relative; - pointer-events: none; /* Don't capture mouse events */ -} - -.time-slot-half { - height: 30px; - border-bottom: 1px dotted var(--calendar-border, #f5f5f5); - pointer-events: none; /* Don't capture mouse events */ -} - -.time-slot-half:last-child { - border-bottom: none; -} - -.time-slot.boundary-slot { - height: 60px; /* Match the final time label height */ - border-bottom: 2px solid #e9ecef; /* Strong border to match final boundary */ - background: rgba(0,0,0,0.02); /* Slightly different background to indicate boundary */ - pointer-events: none; /* Don't capture mouse events */ -} - -/* Events Container */ -.events-container { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - pointer-events: none; /* Container doesn't capture, but children (events) do */ -} - -/* Week Events */ -.week-event { - position: absolute !important; - left: 4px; - right: 4px; - min-height: 20px; - background: #3B82F6; - color: white; - padding: 2px 6px; - border-radius: 4px; - font-size: 0.75rem; - line-height: 1.3; - cursor: pointer; - pointer-events: auto; - z-index: 3; - border: 1px solid rgba(255,255,255,0.2); - text-shadow: 0 1px 1px rgba(0,0,0,0.3); - font-weight: 500; - box-shadow: 0 1px 3px rgba(0,0,0,0.1); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.week-event:hover { - filter: brightness(1.1); - z-index: 4; - box-shadow: 0 2px 6px rgba(0,0,0,0.15); -} - -.week-event.refreshing { - animation: pulse 1.5s ease-in-out infinite alternate; - border-color: #ff9800; -} - -/* Temporary event box during drag creation */ -.temp-event-box { - position: absolute; - left: 4px; - right: 4px; - background: rgba(59, 130, 246, 0.3); - border: 2px dashed rgba(59, 130, 246, 0.8); - border-radius: 4px; - color: rgba(59, 130, 246, 0.9); - font-size: 0.75rem; - font-weight: 600; - padding: 4px 6px; - display: flex; - align-items: center; - justify-content: center; - pointer-events: none; - z-index: 6; /* Higher than events */ - text-align: center; - user-select: none; -} - -/* Moving event during drag */ -.temp-event-box.moving-event { - background: inherit; /* Use the event's actual color */ - border: 2px solid rgba(255, 255, 255, 0.8); - color: white; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - text-align: left; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); - transform: scale(1.02); -} - -.temp-event-box.moving-event .event-title { - font-weight: 600; - margin-bottom: 2px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; -} - -.temp-event-box.moving-event .event-time { - font-size: 0.65rem; - opacity: 0.9; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; -} - -/* Resizing event during drag */ -.temp-event-box.resizing-event { - background: inherit; - border: 2px solid rgba(255, 255, 255, 0.9); - color: white; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - text-align: left; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); - transform: scale(1.01); -} - -.temp-event-box.resizing-event .event-title { - font-weight: 600; - margin-bottom: 2px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; -} - -.temp-event-box.resizing-event .event-time { - font-size: 0.65rem; - opacity: 0.9; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; -} - -/* Event resize zones and handles */ -/* Remove position: relative to allow absolute positioning for correct event placement */ - -.week-event .event-content { - padding: 2px; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - pointer-events: auto; - z-index: 5; - position: relative; -} - -/* Left-click drag handles */ -.resize-handle { - position: absolute; - left: 0; - right: 0; - height: 4px; - background: transparent; - cursor: ns-resize; - z-index: 10; - transition: background-color 0.2s; -} - -.resize-handle-top { - top: 0; - border-top: 2px solid transparent; -} - -.resize-handle-bottom { - bottom: 0; - border-bottom: 2px solid transparent; -} - -.week-event:hover .resize-handle { - background: rgba(255, 255, 255, 0.3); -} - -.week-event:hover .resize-handle-top { - border-top-color: rgba(255, 255, 255, 0.8); -} - -.week-event:hover .resize-handle-bottom { - border-bottom-color: rgba(255, 255, 255, 0.8); -} - -.resize-handle:hover { - background: rgba(255, 255, 255, 0.5) !important; - border-color: rgba(255, 255, 255, 1) !important; -} - - -.week-event .event-title { - font-weight: 600; - margin-bottom: 2px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.week-event .event-time { - font-size: 0.65rem; - opacity: 0.9; - font-weight: 400; -} - -.week-event.all-day { - opacity: 0.9; - border-left: 4px solid rgba(255,255,255,0.5); - font-style: italic; - background: linear-gradient(135deg, var(--event-color, #3B82F6), rgba(255,255,255,0.1)) !important; -} - -/* Legacy Week Grid (for backward compatibility) */ -.week-grid { - display: grid; - grid-template-columns: repeat(7, 1fr); - grid-template-rows: auto 1fr; - flex: 1; - background: var(--calendar-bg, white); -} - -.week-view .calendar-day { - height: 100%; /* Make week view days stretch to full height of their grid cell */ -} - -.weekday-header { - background: #f8f9fa; - padding: 1rem; - text-align: center; - font-weight: 600; - color: #666; - border-bottom: 1px solid #e9ecef; - font-size: 0.9rem; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.calendar-day { - border: 1px solid var(--calendar-border, #f0f0f0); - padding: 0.75rem; - display: flex; - flex-direction: column; - cursor: pointer; - transition: background-color 0.2s; - position: relative; - overflow: hidden; - background: var(--calendar-day-bg, white); -} - -.calendar-day:hover { - background-color: var(--calendar-day-hover, #f8f9ff); -} - -.calendar-day.current-month { - background: var(--calendar-day-bg, white); -} - -.calendar-day.prev-month, -.calendar-day.next-month { - background: var(--calendar-day-prev-next, #fafafa); - color: var(--calendar-day-prev-next-text, #ccc); -} - -.calendar-day.today { - background: var(--calendar-today-bg, #e3f2fd); - border: 2px solid var(--calendar-today-border, #2196f3); -} - -.calendar-day.has-events { - background: var(--calendar-has-events-bg, #fff3e0); -} - -.calendar-day.today.has-events { - background: var(--calendar-today-bg, #e1f5fe); -} - -.calendar-day.selected { - background: var(--calendar-selected-bg, #e8f5e8); - border: 2px solid var(--calendar-selected-border, #4caf50); - box-shadow: 0 0 8px rgba(76, 175, 80, 0.3); -} - -.calendar-day.selected.has-events { - background: var(--calendar-selected-bg, #f1f8e9); -} - -.calendar-day.selected.today { - background: var(--calendar-selected-bg, #e0f2f1); - border: 2px solid var(--calendar-selected-border, #4caf50); -} - -.calendar-day.selected .day-number { - color: var(--calendar-selected-text, #2e7d32); - font-weight: 700; -} - -.day-number { - font-weight: 600; - font-size: 1.1rem; - margin-bottom: 0.5rem; -} - -.calendar-day.today .day-number { - color: var(--calendar-today-text, #1976d2); -} - -.day-events { - flex: 1; - display: flex; - flex-direction: column; - gap: 2px; - overflow: hidden; -} - -.event-indicators { - flex: 1; - display: flex; - flex-direction: column; - gap: 2px; -} - -.more-events-indicator { - font-size: 0.7rem; - color: #666; - font-weight: 500; - padding: 2px 4px; - text-align: center; - background: #f5f5f5; - border-radius: 3px; - cursor: pointer; - transition: background-color 0.2s; -} - -.more-events-indicator:hover { - background: #e0e0e0; -} - -.event-box { - /* Background color will be set inline via style attribute */ - color: white; - padding: 2px 4px; - border-radius: 3px; - font-size: 0.7rem; - line-height: 1.2; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - cursor: pointer; - transition: all 0.2s ease; - border: 1px solid rgba(255,255,255,0.2); - text-shadow: 0 1px 1px rgba(0,0,0,0.3); - font-weight: 500; - box-shadow: 0 1px 2px rgba(0,0,0,0.1); - position: relative; -} - -.event-box:hover { - filter: brightness(1.15); - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(0,0,0,0.15); -} - -.event-box.refreshing { - animation: pulse 1.5s ease-in-out infinite alternate; - border-color: #ff9800; -} - -.event-box.refreshing::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(255, 152, 0, 0.3); - pointer-events: none; -} - -@keyframes pulse { - 0% { - opacity: 0.7; - } - 100% { - opacity: 1; - } -} - -.event-dot { - background: #ff9800; - height: 6px; - border-radius: 3px; - margin-bottom: 1px; -} - -.more-events { - font-size: 0.7rem; - color: #666; - margin-top: 2px; - font-weight: 500; -} - -/* Event Modal Styles */ -.modal-backdrop { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; - backdrop-filter: blur(2px); -} - -.modal-content { - background: white; - border-radius: 12px; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); - max-width: 900px; - width: 95%; - max-height: 85vh; - overflow-y: auto; - position: relative; - animation: modalAppear 0.2s ease-out; -} - -@keyframes modalAppear { - from { - opacity: 0; - transform: scale(0.9) translateY(-20px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -.modal-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 2rem 3rem 1.5rem; - border-bottom: 1px solid #e9ecef; -} - -.modal-header h3 { - margin: 0; - color: #333; - font-size: 1.4rem; - font-weight: 600; -} - -.modal-close { - background: none; - border: none; - font-size: 1.8rem; - color: #999; - cursor: pointer; - padding: 0; - width: 30px; - height: 30px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.2s; - line-height: 1; -} - -.modal-close:hover { - background: #f8f9fa; - color: #666; - transform: scale(1.1); -} - -.modal-body { - padding: 0.25rem 1.0rem 0rem; -} - -.event-detail { - display: grid; - grid-template-columns: 100px 1fr; - gap: 1rem; - margin-bottom: 1rem; - align-items: start; -} - -.event-detail strong { - color: #555; - font-weight: 600; - font-size: 0.9rem; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.event-detail span { - color: #333; - font-size: 1rem; - line-height: 1.5; - word-break: break-word; -} - -/* Responsive Design */ -@media (max-width: 768px) { - .app-sidebar { - width: 100%; - height: auto; - min-height: unset; - position: relative; - flex-direction: row; - padding: 1rem; - } - - .sidebar-header { - padding: 0; - border-bottom: none; - border-right: 1px solid rgba(255,255,255,0.2); - margin-right: 1rem; - } - - .sidebar-header h1 { - font-size: 1.4rem; - text-align: left; - margin: 0; - } - - .user-info { - display: none; /* Hide user info on mobile to save space */ - } - - .sidebar-nav { - flex-direction: row; - padding: 0; - align-items: center; - gap: 1rem; - flex: 1; - } - - .sidebar-nav .nav-link { - padding: 0.5rem 0.75rem; - font-size: 0.9rem; - } - - .logout-button { - margin: 0; - padding: 0.5rem 0.75rem; - font-size: 0.9rem; - width: auto; - } - - .calendar-list { - display: none; /* Hide calendar list on mobile */ - } - - .sidebar-footer { - padding: 0; - border-top: none; - } - - .view-selector { - margin-bottom: 0.5rem; - } - - .view-selector-dropdown { - padding: 0.5rem 0.75rem; - font-size: 0.8rem; - } - - .app-main { - margin-left: 0; - max-width: 100%; - width: 100%; - padding: 1rem; - } - - .calendar-header { - padding: 1rem; - } - - .month-year { - font-size: 1.4rem; - } - - .nav-button { - width: 35px; - height: 35px; - font-size: 1.2rem; - } - - .today-button { - font-size: 0.8rem; - padding: 0.4rem 0.8rem; - } - - .weekday-header { - padding: 0.5rem; - font-size: 0.8rem; - } - - .calendar-day { - min-height: 70px; - padding: 0.5rem; - } - - .day-number { - font-size: 1rem; - } - - .calendar-view { - height: calc(100vh - 8rem); - } -} - -@media (max-width: 480px) { - .calendar-day { - min-height: 60px; - padding: 0.25rem; - } - - .weekday-header { - padding: 0.5rem 0.25rem; - } - - .day-number { - font-size: 0.9rem; - } -} - -/* Mobile adjustments for modal */ -@media (max-width: 768px) { - .modal-content { - margin: 1rem; - width: calc(100% - 2rem); - } - - .modal-header, .modal-body { - padding: 1.5rem 2rem; - } - - .event-detail { - grid-template-columns: 80px 1fr; - gap: 0.75rem; - margin-bottom: 0.75rem; - } - - .event-detail strong { - font-size: 0.8rem; - } - - .event-detail span { - font-size: 0.9rem; - } - - .login-form, .register-form { - padding: 1.5rem; - } -} - -/* Create Calendar Button */ -.create-calendar-button { - background: rgba(255, 255, 255, 0.2); - border: 1px solid rgba(255, 255, 255, 0.3); - color: white; - padding: 0.75rem 1rem; - border-radius: 8px; - cursor: pointer; - transition: all 0.2s ease; - margin-bottom: 1rem; - font-size: 0.9rem; - font-weight: 500; - backdrop-filter: blur(10px); - width: 100%; -} - -.create-calendar-button:hover { - background: rgba(255, 255, 255, 0.3); - border-color: rgba(255, 255, 255, 0.5); - transform: translateY(-1px); -} - -.create-calendar-button:active { - transform: translateY(0); -} - -/* View Selector */ -.view-selector { - margin-bottom: 1rem; -} - -.view-selector-dropdown { - width: 100%; - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - color: white; - padding: 0.75rem 1rem; - border-radius: 8px; - font-size: 0.9rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - backdrop-filter: blur(10px); -} - -.view-selector-dropdown:hover { - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.3); -} - -.view-selector-dropdown:focus { - outline: none; - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.4); - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); -} - -.view-selector-dropdown option { - background: #2a2a2a; - color: white; - padding: 0.5rem; -} - -/* Create Calendar Modal */ -.modal-backdrop { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - backdrop-filter: blur(4px); - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; - padding: 2rem; -} - -.create-calendar-modal { - background: white; - border-radius: 12px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); - max-width: 500px; - width: 100%; - max-height: 90vh; - overflow-y: auto; - animation: modalSlideIn 0.3s ease; -} - -@keyframes modalSlideIn { - from { - opacity: 0; - transform: scale(0.9) translateY(-20px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -.create-calendar-modal .modal-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 2rem 2rem 1rem; - border-bottom: 1px solid #e9ecef; -} - -.create-calendar-modal .modal-header h2 { - margin: 0; - color: #495057; - font-size: 1.5rem; - font-weight: 600; -} - -.close-button { - background: none; - border: none; - font-size: 1.5rem; - color: #6c757d; - cursor: pointer; - padding: 0.25rem; - line-height: 1; - border-radius: 4px; - transition: all 0.2s ease; -} - -.close-button:hover { - color: #495057; - background: #f8f9fa; -} - -.create-calendar-modal .modal-body { - padding: 1.5rem 2rem 2rem; -} - -.form-group { - margin-bottom: 1.5rem; -} - -.form-group label { - display: block; - margin-bottom: 0.5rem; - color: #495057; - font-weight: 500; - font-size: 0.9rem; -} - -.form-group input, -.form-group textarea { - width: 100%; - padding: 0.75rem; - border: 1px solid #ced4da; - border-radius: 8px; - font-size: 1rem; - transition: border-color 0.2s ease, box-shadow 0.2s ease; - font-family: inherit; -} - -.form-group input:focus, -.form-group textarea:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -.form-group input:disabled, -.form-group textarea:disabled { - background-color: #f8f9fa; - color: #6c757d; - cursor: not-allowed; -} - -.color-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 0.75rem; - margin: 0.75rem 0; -} - -.color-option { - width: 40px; - height: 40px; - border: 3px solid transparent; - border-radius: 8px; - cursor: pointer; - transition: all 0.2s ease; - position: relative; -} - -.color-option:hover { - transform: scale(1.1); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); -} - -.color-option.selected { - border-color: #495057; - transform: scale(1.1); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); -} - -.color-option.selected::after { - content: '✓'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; - font-weight: bold; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); -} - -.color-help-text { - font-size: 0.8rem; - color: #6c757d; - margin-top: 0.5rem; - margin-bottom: 0; -} - -.modal-actions { - display: flex; - justify-content: flex-end; - gap: 1rem; - margin-top: 2rem; - padding-top: 1.5rem; - border-top: 1px solid #e9ecef; -} - -.cancel-button, -.create-button { - padding: 0.75rem 1.5rem; - border-radius: 8px; - font-size: 1rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - border: none; -} - -.cancel-button { - background: #f8f9fa; - color: #6c757d; - border: 1px solid #ced4da; -} - -.cancel-button:hover:not(:disabled) { - background: #e9ecef; - color: #495057; -} - -.create-button { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; -} - -.create-button:hover:not(:disabled) { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); -} - -.cancel-button:disabled, -.create-button:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none !important; -} - -.error-message { - background: #f8d7da; - color: #721c24; - padding: 0.75rem 1rem; - border: 1px solid #f5c6cb; - border-radius: 6px; - margin-bottom: 1rem; - font-size: 0.9rem; -} - -/* Mobile adjustments for create calendar modal */ -@media (max-width: 768px) { - .modal-backdrop { - padding: 1rem; - } - - .create-calendar-modal { - max-height: 95vh; - } - - .create-calendar-modal .modal-header, - .create-calendar-modal .modal-body { - padding-left: 1.5rem; - padding-right: 1.5rem; - } - - .color-grid { - grid-template-columns: repeat(4, 1fr); - gap: 0.5rem; - } - - .color-option { - width: 35px; - height: 35px; - } - - .modal-actions { - flex-direction: column; - gap: 0.75rem; - } - - .cancel-button, - .create-button { - width: 100%; - text-align: center; - } -} - -/* Context Menu */ -.context-menu { - background: white; - border: 1px solid #e9ecef; - border-radius: 8px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - min-width: 160px; - overflow: hidden; - animation: contextMenuSlideIn 0.15s ease; -} - -@keyframes contextMenuSlideIn { - from { - opacity: 0; - transform: scale(0.95) translateY(-5px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -.context-menu-item { - display: flex; - align-items: center; - padding: 0.75rem 1rem; - color: #495057; - cursor: pointer; - transition: background-color 0.2s ease; - font-size: 0.9rem; - border: none; - background: none; - width: 100%; - text-align: left; -} - -.context-menu-item:hover { - background-color: #f8f9fa; -} - -.context-menu-delete { - color: #dc3545; -} - -.context-menu-delete:hover { - background-color: #f8f9fa; - color: #dc3545; -} - -.context-menu-icon { - margin-right: 0.5rem; - font-size: 1rem; -} - -/* Prevent text selection on context menu items */ -.context-menu-item { - user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; -} - -/* Event Creation Modal Styles */ -.create-event-modal { - min-width: 750px; - max-width: 900px; - width: 95%; -} - -.create-event-modal .modal-body { - max-height: 60vh; - overflow-y: auto; -} - -.create-event-modal .form-group { - margin-bottom: 1.5rem; -} - -.create-event-modal .form-group label { - display: block; - margin-bottom: 0.5rem; - color: #495057; - font-weight: 500; - font-size: 0.9rem; -} - -.create-event-modal .form-input { - width: 100%; - padding: 0.75rem; - border: 1px solid #ced4da; - border-radius: 8px; - font-size: 1rem; - transition: border-color 0.2s ease, box-shadow 0.2s ease; - font-family: inherit; - box-sizing: border-box; -} - -.create-event-modal .form-input:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -/* Checkbox specific styling override */ -.create-event-modal input[type="checkbox"] { - width: auto; - display: inline-block; - margin-right: 0.5rem; - vertical-align: middle; -} - -.create-event-modal .form-row { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; -} - -.create-event-modal .modal-footer { - display: flex; - justify-content: flex-end; - gap: 1rem; - padding: 1.5rem 2rem; - border-top: 1px solid #e9ecef; - background: #f8f9fa; -} - -/* Button Styles */ -.btn { - padding: 0.75rem 1.5rem; - border-radius: 8px; - font-size: 1rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - border: none; - text-align: center; - text-decoration: none; - display: inline-block; - line-height: 1.5; - user-select: none; -} - -.btn:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none !important; -} - -.btn-secondary { - background: #f8f9fa; - color: #6c757d; - border: 1px solid #ced4da; -} - -.btn-secondary:hover:not(:disabled) { - background: #e9ecef; - color: #495057; - border-color: #adb5bd; -} - -.btn-primary { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border: 1px solid transparent; -} - -.btn-primary:hover:not(:disabled) { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); -} - -/* Weekday selection styles */ -.weekday-selection { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; - margin-top: 0.5rem; -} - -.weekday-checkbox { - display: flex; - align-items: center; - cursor: pointer; - padding: 0.5rem 0.75rem; - border: 1px solid #ced4da; - border-radius: 6px; - background: white; - transition: all 0.2s ease; - user-select: none; - min-width: 3rem; - justify-content: center; -} - -.weekday-checkbox:hover { - border-color: #667eea; - background: #f8f9ff; -} - -.weekday-checkbox input[type="checkbox"] { - display: none; -} - -.weekday-checkbox input[type="checkbox"]:checked + .weekday-label { - color: white; -} - -.weekday-checkbox:has(input[type="checkbox"]:checked) { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-color: #667eea; - color: white; -} - -.weekday-label { - font-size: 0.85rem; - font-weight: 500; - color: #495057; - transition: color 0.2s ease; -} - -/* Mobile adjustments for event creation modal */ -@media (max-width: 768px) { - .create-event-modal .form-row { - grid-template-columns: 1fr; - gap: 1rem; - } - - .create-event-modal .modal-footer { - flex-direction: column; - gap: 0.75rem; - padding: 1rem 1.5rem; - } - - .create-event-modal .btn { - width: 100%; - } - - .weekday-selection { - gap: 0.25rem; - } - - .weekday-checkbox { - min-width: 2.5rem; - padding: 0.4rem 0.6rem; - } -} - -/* Recurring Edit Modal */ -.recurring-edit-modal { - max-width: 500px; - width: 95%; -} - -.recurring-edit-options { - display: flex; - flex-direction: column; - gap: 1rem; - margin: 1.5rem 0; -} - -.recurring-option { - background: white; - border: 2px solid #e9ecef; - color: #495057; - padding: 1rem; - text-align: left; - border-radius: 8px; - cursor: pointer; - transition: all 0.2s ease; -} - -.recurring-option:hover { - border-color: #667eea; - background: #f8f9ff; - color: #495057; - transform: none; - box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15); -} - -.recurring-option .option-title { - font-size: 1rem; - font-weight: 600; - margin-bottom: 0.5rem; - color: #333; -} - -.recurring-option .option-description { - font-size: 0.9rem; - color: #666; - line-height: 1.4; -} - -/* Mobile adjustments for recurring edit modal */ -@media (max-width: 768px) { - .recurring-edit-modal { - margin: 1rem; - width: calc(100% - 2rem); - } - - .recurring-option { - padding: 0.75rem; - } - - .recurring-option .option-title { - font-size: 0.9rem; - } - - .recurring-option .option-description { - font-size: 0.8rem; - } -} - -/* Tabbed Modal Interface Styles */ -.tab-navigation { - display: flex; - border-bottom: 2px solid #e9ecef; - margin-bottom: 1.5rem; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - scrollbar-width: none; - -ms-overflow-style: none; -} - -.tab-navigation::-webkit-scrollbar { - display: none; -} - -.tab-button { - background: none; - border: none; - padding: 0.75rem 1rem; - cursor: pointer; - font-size: 0.85rem; - font-weight: 500; - color: #6c757d; - transition: all 0.2s ease; - border-bottom: 3px solid transparent; - white-space: nowrap; - display: flex; - align-items: center; - gap: 0.5rem; - min-width: max-content; -} - -.tab-button:hover { - color: #495057; - background: #f8f9fa; -} - -.tab-button.active { - color: #667eea; - border-bottom-color: #667eea; - background: #f8f9ff; -} - -.tab-content { - min-height: 300px; - max-height: 50vh; - overflow-y: auto; - padding: 1rem 2rem 2rem 2rem; -} - -.tab-panel { - animation: fadeIn 0.2s ease-in-out; -} - -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Mobile adjustments for tabbed interface */ -@media (max-width: 768px) { - .tab-navigation { - gap: 0; - margin-bottom: 1rem; - } - - .tab-button { - padding: 0.5rem 0.75rem; - font-size: 0.8rem; - flex: 1; - justify-content: center; - min-width: unset; - } - - .tab-content { - min-height: 250px; - max-height: 45vh; - padding: 1rem 1.5rem 1.5rem 1.5rem; - } -} - -/* Form Help Text and Advanced Info Styles */ -.form-help-text { - font-size: 0.8rem; - color: #6c757d; - margin-top: 0.25rem; - margin-bottom: 0; - line-height: 1.4; - font-style: italic; -} - -.advanced-info { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1.5rem; -} - -.advanced-info h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.advanced-info ul { - margin: 0 0 0.75rem 0; - padding-left: 1.2rem; - list-style-type: disc; -} - -.advanced-info li { - font-size: 0.85rem; - color: #6c757d; - line-height: 1.4; - margin-bottom: 0.25rem; -} - -.advanced-info .form-help-text { - margin-top: 0.5rem; - margin-bottom: 0; - border-top: 1px solid #e9ecef; - padding-top: 0.5rem; -} - -/* Theme compatibility for advanced info */ -[data-theme="dark"] .advanced-info { - background: #2a2a2a; - border-color: #444444; -} - -[data-theme="dark"] .advanced-info h5 { - color: #e0e0e0; -} - -[data-theme="dark"] .advanced-info li { - color: #b0b0b0; -} - -[data-theme="dark"] .advanced-info .form-help-text { - border-color: #444444; -} - -/* People Tab Styles */ -.people-info { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1.5rem; -} - -.people-info h5, -.people-info h6 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.people-info h6 { - font-size: 0.8rem; - margin-top: 1rem; - margin-bottom: 0.5rem; -} - -.people-validation { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid #e9ecef; -} - -.attendee-roles-preview { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.attendee-roles-preview h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.role-examples { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-bottom: 1rem; -} - -.role-item { - display: flex; - align-items: flex-start; - gap: 0.5rem; - padding: 0.5rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.role-item strong { - color: #495057; - font-size: 0.85rem; - font-weight: 600; - min-width: 140px; - flex-shrink: 0; -} - -.role-item span { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.3; -} - -/* Theme compatibility for people info */ -[data-theme="dark"] .people-info, -[data-theme="dark"] .attendee-roles-preview { - background: #2a2a2a; - border-color: #444444; -} - -[data-theme="dark"] .people-info h5, -[data-theme="dark"] .people-info h6, -[data-theme="dark"] .attendee-roles-preview h5 { - color: #e0e0e0; -} - -[data-theme="dark"] .people-validation { - border-color: #444444; -} - -[data-theme="dark"] .role-item { - background: #1f1f1f; - border-color: #444444; -} - -[data-theme="dark"] .role-item strong { - color: #e0e0e0; -} - -[data-theme="dark"] .role-item span { - color: #b0b0b0; -} - -/* Mobile adjustments for people tab */ -@media (max-width: 768px) { - .role-item { - flex-direction: column; - gap: 0.25rem; - } - - .role-item strong { - min-width: unset; - } -} - -/* Categories Tab Styles */ -.categories-suggestions { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1.5rem; -} - -.categories-suggestions h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.category-tags { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-bottom: 0.75rem; -} - -.category-tag { - background: white; - border: 1px solid #667eea; - color: #667eea; - padding: 0.4rem 0.8rem; - border-radius: 20px; - font-size: 0.8rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; -} - -.category-tag:hover { - background: #667eea; - color: white; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2); -} - -.categories-info { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.categories-info h5, -.categories-info h6 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.categories-info h6 { - font-size: 0.8rem; - margin-top: 1rem; - margin-bottom: 0.5rem; -} - -.resources-section { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid #e9ecef; -} - -.resource-features { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-top: 0.75rem; -} - -.feature-item { - display: flex; - align-items: flex-start; - gap: 0.5rem; - padding: 0.5rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.feature-item strong { - color: #495057; - font-size: 0.85rem; - font-weight: 600; - min-width: 140px; - flex-shrink: 0; -} - -.feature-item span { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.3; -} - -.quick-actions { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.quick-actions h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.action-buttons { - display: flex; - gap: 0.5rem; - margin-bottom: 0.5rem; -} - -.action-btn { - background: #dc3545; - border: 1px solid #dc3545; - color: white; - padding: 0.5rem 1rem; - border-radius: 6px; - font-size: 0.85rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; -} - -.action-btn:hover { - background: #c82333; - border-color: #bd2130; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2); -} - -/* Theme compatibility for categories */ -[data-theme="dark"] .categories-suggestions, -[data-theme="dark"] .categories-info, -[data-theme="dark"] .quick-actions { - background: #2a2a2a; - border-color: #444444; -} - -[data-theme="dark"] .categories-suggestions h5, -[data-theme="dark"] .categories-info h5, -[data-theme="dark"] .categories-info h6, -[data-theme="dark"] .quick-actions h5 { - color: #e0e0e0; -} - -[data-theme="dark"] .category-tag { - background: #1f1f1f; - border-color: #667eea; - color: #667eea; -} - -[data-theme="dark"] .category-tag:hover { - background: #667eea; - color: white; -} - -[data-theme="dark"] .feature-item { - background: #1f1f1f; - border-color: #444444; -} - -[data-theme="dark"] .feature-item strong { - color: #e0e0e0; -} - -[data-theme="dark"] .feature-item span { - color: #b0b0b0; -} - -[data-theme="dark"] .resources-section { - border-color: #444444; -} - -/* Mobile adjustments for categories tab */ -@media (max-width: 768px) { - .category-tags { - gap: 0.25rem; - } - - .category-tag { - padding: 0.3rem 0.6rem; - font-size: 0.75rem; - } - - .feature-item { - flex-direction: column; - gap: 0.25rem; - } - - .feature-item strong { - min-width: unset; - } - - .action-buttons { - flex-direction: column; - } -} - -/* Location Tab Styles */ -.location-suggestions { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1.5rem; -} - -.location-suggestions h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.location-tags { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-bottom: 0.75rem; -} - -.location-tag { - background: white; - border: 1px solid #28a745; - color: #28a745; - padding: 0.4rem 0.8rem; - border-radius: 20px; - font-size: 0.8rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; -} - -.location-tag:hover { - background: #28a745; - color: white; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2); -} - -.location-info { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.location-info h5, -.location-info h6 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.location-info h6 { - font-size: 0.8rem; - margin-top: 1rem; - margin-bottom: 0.5rem; -} - -.geo-section { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid #e9ecef; -} - -.geo-features { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-top: 0.75rem; -} - -.geo-item { - display: flex; - align-items: flex-start; - gap: 0.5rem; - padding: 0.5rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.geo-item strong { - color: #495057; - font-size: 0.85rem; - font-weight: 600; - min-width: 120px; - flex-shrink: 0; -} - -.geo-item span { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.3; -} - -.location-types { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.location-types h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.type-examples { - display: flex; - flex-direction: column; - gap: 1rem; - margin-bottom: 1rem; -} - -.type-category { - padding: 0.75rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.type-category strong { - display: block; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - margin-bottom: 0.5rem; -} - -.type-category ul { - margin: 0; - padding-left: 1.2rem; - list-style-type: disc; -} - -.type-category li { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.4; - margin-bottom: 0.25rem; - font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; - background: #f8f9fa; - padding: 0.2rem 0.4rem; - border-radius: 3px; -} - -.action-btn.secondary { - background: #6c757d; - border-color: #6c757d; -} - -.action-btn.secondary:hover { - background: #5a6268; - border-color: #545b62; - box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2); -} - -/* Theme compatibility for location */ -[data-theme="dark"] .location-suggestions, -[data-theme="dark"] .location-info, -[data-theme="dark"] .location-types { - background: #2a2a2a; - border-color: #444444; -} - -[data-theme="dark"] .location-suggestions h5, -[data-theme="dark"] .location-info h5, -[data-theme="dark"] .location-info h6, -[data-theme="dark"] .location-types h5 { - color: #e0e0e0; -} - -[data-theme="dark"] .location-tag { - background: #1f1f1f; - border-color: #28a745; - color: #28a745; -} - -[data-theme="dark"] .location-tag:hover { - background: #28a745; - color: white; -} - -[data-theme="dark"] .geo-item, -[data-theme="dark"] .type-category { - background: #1f1f1f; - border-color: #444444; -} - -[data-theme="dark"] .geo-item strong, -[data-theme="dark"] .type-category strong { - color: #e0e0e0; -} - -[data-theme="dark"] .geo-item span { - color: #b0b0b0; -} - -[data-theme="dark"] .type-category li { - color: #b0b0b0; - background: #2a2a2a; -} - -[data-theme="dark"] .geo-section { - border-color: #444444; -} - -/* Mobile adjustments for location tab */ -@media (max-width: 768px) { - .location-tags { - gap: 0.25rem; - } - - .location-tag { - padding: 0.3rem 0.6rem; - font-size: 0.75rem; - } - - .geo-item { - flex-direction: column; - gap: 0.25rem; - } - - .geo-item strong { - min-width: unset; - } - - .type-examples { - gap: 0.75rem; - } - - .type-category { - padding: 0.5rem; - } - - .type-category li { - font-size: 0.8rem; - } -} - -/* Reminders & Attachments Tab Styles */ -.reminder-types { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1.5rem; -} - -.reminder-types h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.alarm-examples { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 0.75rem; - margin-bottom: 0.75rem; -} - -.alarm-type { - padding: 0.75rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; - text-align: center; -} - -.alarm-type strong { - display: block; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - margin-bottom: 0.5rem; -} - -.alarm-type p { - color: #6c757d; - font-size: 0.8rem; - margin: 0; - line-height: 1.3; -} - -.reminder-info { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.reminder-info h5, -.reminder-info h6 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.reminder-info h6 { - font-size: 0.8rem; - margin-top: 1rem; - margin-bottom: 0.5rem; -} - -.attachments-section { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid #e9ecef; -} - -.attachment-features { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-top: 0.75rem; -} - -.attachment-type { - display: flex; - align-items: flex-start; - gap: 0.5rem; - padding: 0.5rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.attachment-type strong { - color: #495057; - font-size: 0.85rem; - font-weight: 600; - min-width: 120px; - flex-shrink: 0; -} - -.attachment-type span { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.3; -} - -.reminder-patterns { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.reminder-patterns h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.pattern-examples { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-bottom: 0.75rem; -} - -.pattern-item { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.pattern-item strong { - color: #495057; - font-size: 0.85rem; - font-weight: 600; - min-width: 100px; - flex-shrink: 0; -} - -.pattern-item span { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.3; -} - -.action-btn.tertiary { - background: #17a2b8; - border-color: #17a2b8; - color: white; -} - -.action-btn.tertiary:hover { - background: #138496; - border-color: #117a8b; - box-shadow: 0 2px 4px rgba(23, 162, 184, 0.2); -} - -.completion-status { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border-radius: 8px; - padding: 1.5rem; - margin-top: 2rem; - text-align: center; -} - -.completion-status h5 { - margin: 0 0 0.75rem 0; - font-size: 1.1rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.completion-status p { - margin: 0 0 1rem 0; - opacity: 0.9; - line-height: 1.5; -} - -.feature-summary { - background: rgba(255, 255, 255, 0.1); - border-radius: 6px; - padding: 1rem; - margin-top: 1rem; -} - -.summary-row { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); -} - -.summary-row:last-child { - border-bottom: none; -} - -.tab-name { - font-weight: 600; - font-size: 0.9rem; -} - -.tab-desc { - font-size: 0.8rem; - opacity: 0.8; - text-align: right; - max-width: 60%; -} - -/* Theme compatibility for reminders */ -[data-theme="dark"] .reminder-types, -[data-theme="dark"] .reminder-info, -[data-theme="dark"] .reminder-patterns { - background: #2a2a2a; - border-color: #444444; -} - -[data-theme="dark"] .reminder-types h5, -[data-theme="dark"] .reminder-info h5, -[data-theme="dark"] .reminder-info h6, -[data-theme="dark"] .reminder-patterns h5 { - color: #e0e0e0; -} - -[data-theme="dark"] .alarm-type, -[data-theme="dark"] .attachment-type, -[data-theme="dark"] .pattern-item { - background: #1f1f1f; - border-color: #444444; -} - -[data-theme="dark"] .alarm-type strong, -[data-theme="dark"] .attachment-type strong, -[data-theme="dark"] .pattern-item strong { - color: #e0e0e0; -} - -[data-theme="dark"] .alarm-type p, -[data-theme="dark"] .attachment-type span, -[data-theme="dark"] .pattern-item span { - color: #b0b0b0; -} - -[data-theme="dark"] .attachments-section { - border-color: #444444; -} - -/* Mobile adjustments for reminders tab */ -@media (max-width: 768px) { - .alarm-examples { - grid-template-columns: 1fr; - gap: 0.5rem; - } - - .alarm-type { - padding: 0.5rem; - } - - .attachment-type, - .pattern-item { - flex-direction: column; - gap: 0.25rem; - align-items: flex-start; - } - - .attachment-type strong, - .pattern-item strong { - min-width: unset; - } - - .summary-row { - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - } - - .tab-desc { - text-align: left; - max-width: 100%; - } - - .completion-status { - padding: 1rem; - } - - .completion-status h5 { - font-size: 1rem; - } -} - -/* Theme Selector Styles */ -.theme-selector { - margin-bottom: 1rem; -} - -.theme-selector-dropdown { - width: 100%; - padding: 0.5rem; - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 6px; - color: white; - font-size: 0.85rem; - cursor: pointer; - transition: all 0.2s ease; -} - -.theme-selector-dropdown:hover { - background: rgba(255, 255, 255, 0.15); - border-color: rgba(255, 255, 255, 0.3); -} - -.theme-selector-dropdown:focus { - outline: none; - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.4); -} - -.theme-selector-dropdown option { - background: #333; - color: white; - padding: 0.5rem; -} - -/* Theme Definitions */ -:root { - /* Default Theme */ - --primary-gradient: linear-gradient(180deg, #667eea 0%, #764ba2 100%); - --primary-bg: #f8f9fa; - --primary-text: #333; - --sidebar-bg: linear-gradient(180deg, #667eea 0%, #764ba2 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - --header-text: white; - --card-bg: white; - --border-color: #e9ecef; - --accent-color: #667eea; - --calendar-bg: white; - --calendar-border: #f0f0f0; - --calendar-day-bg: white; - --calendar-day-hover: #f8f9ff; - --calendar-day-prev-next: #fafafa; - --calendar-day-prev-next-text: #ccc; - --calendar-today-bg: #e3f2fd; - --calendar-today-border: #2196f3; - --calendar-today-text: #1976d2; - --calendar-selected-bg: #e8f5e8; - --calendar-selected-border: #4caf50; - --calendar-selected-text: #2e7d32; - --calendar-has-events-bg: #fff3e0; - --weekday-header-bg: #f8f9fa; - --weekday-header-text: #666; - --time-label-bg: #f8f9fa; - --time-label-text: #666; - --time-label-border: #e9ecef; - --event-colors: #3B82F6, #10B981, #F59E0B, #EF4444, #8B5CF6, #06B6D4, #84CC16, #F97316, #EC4899, #6366F1, #14B8A6, #F3B806, #8B5A2B, #6B7280, #DC2626, #7C3AED; -} - -/* Ocean Theme */ -[data-theme="ocean"] { - --primary-gradient: linear-gradient(180deg, #2196F3 0%, #0277BD 100%); - --primary-bg: #e3f2fd; - --primary-text: #0d47a1; - --sidebar-bg: linear-gradient(180deg, #2196F3 0%, #0277BD 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #2196F3 0%, #0277BD 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #bbdefb; - --accent-color: #2196F3; - --calendar-bg: #ffffff; - --calendar-border: #bbdefb; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #e1f5fe; - --calendar-day-prev-next: #f3f8ff; - --calendar-day-prev-next-text: #90caf9; - --calendar-today-bg: #b3e5fc; - --calendar-today-border: #0277BD; - --calendar-today-text: #01579b; - --calendar-selected-bg: #e0f7fa; - --calendar-selected-border: #00acc1; - --calendar-selected-text: #00695c; - --calendar-has-events-bg: #fff8e1; - --weekday-header-bg: #e3f2fd; - --weekday-header-text: #0d47a1; - --time-label-bg: #e3f2fd; - --time-label-text: #0d47a1; - --time-label-border: #bbdefb; - --event-colors: #2196F3, #03DAC6, #FF9800, #F44336, #9C27B0, #00BCD4, #8BC34A, #FF5722, #E91E63, #3F51B5, #009688, #FFC107, #607D8B, #795548, #E53935, #673AB7; -} - -[data-theme="ocean"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="ocean"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Forest Theme */ -[data-theme="forest"] { - --primary-gradient: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%); - --primary-bg: #e8f5e8; - --primary-text: #1b5e20; - --sidebar-bg: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #c8e6c9; - --accent-color: #4CAF50; - --calendar-bg: #ffffff; - --calendar-border: #c8e6c9; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #f1f8e9; - --calendar-day-prev-next: #f9fbe7; - --calendar-day-prev-next-text: #a5d6a7; - --calendar-today-bg: #c8e6c9; - --calendar-today-border: #2E7D32; - --calendar-today-text: #1b5e20; - --calendar-selected-bg: #e8f5e8; - --calendar-selected-border: #388e3c; - --calendar-selected-text: #2e7d32; - --calendar-has-events-bg: #fff3e0; - --weekday-header-bg: #e8f5e8; - --weekday-header-text: #1b5e20; - --time-label-bg: #e8f5e8; - --time-label-text: #1b5e20; - --time-label-border: #c8e6c9; - --event-colors: #4CAF50, #8BC34A, #FF9800, #FF5722, #9C27B0, #03DAC6, #CDDC39, #FF6F00, #E91E63, #3F51B5, #009688, #FFC107, #795548, #607D8B, #F44336, #673AB7; -} - -[data-theme="forest"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="forest"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Sunset Theme */ -[data-theme="sunset"] { - --primary-gradient: linear-gradient(180deg, #FF9800 0%, #F57C00 100%); - --primary-bg: #fff3e0; - --primary-text: #e65100; - --sidebar-bg: linear-gradient(180deg, #FF9800 0%, #F57C00 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #FF9800 0%, #F57C00 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #ffcc02; - --accent-color: #FF9800; - --calendar-bg: #ffffff; - --calendar-border: #ffe0b2; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #fff8e1; - --calendar-day-prev-next: #fffde7; - --calendar-day-prev-next-text: #ffcc02; - --calendar-today-bg: #ffe0b2; - --calendar-today-border: #F57C00; - --calendar-today-text: #e65100; - --calendar-selected-bg: #fff3e0; - --calendar-selected-border: #ff8f00; - --calendar-selected-text: #ff6f00; - --calendar-has-events-bg: #f3e5f5; - --weekday-header-bg: #fff3e0; - --weekday-header-text: #e65100; - --time-label-bg: #fff3e0; - --time-label-text: #e65100; - --time-label-border: #ffe0b2; - --event-colors: #FF9800, #FF5722, #F44336, #E91E63, #9C27B0, #673AB7, #3F51B5, #2196F3, #03DAC6, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF6F00, #795548; -} - -[data-theme="sunset"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="sunset"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Purple Theme */ -[data-theme="purple"] { - --primary-gradient: linear-gradient(180deg, #9C27B0 0%, #6A1B9A 100%); - --primary-bg: #f3e5f5; - --primary-text: #4a148c; - --sidebar-bg: linear-gradient(180deg, #9C27B0 0%, #6A1B9A 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #9C27B0 0%, #6A1B9A 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #ce93d8; - --accent-color: #9C27B0; - --calendar-bg: #ffffff; - --calendar-border: #ce93d8; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #f8e9fc; - --calendar-day-prev-next: #fce4ec; - --calendar-day-prev-next-text: #ce93d8; - --calendar-today-bg: #e1bee7; - --calendar-today-border: #6A1B9A; - --calendar-today-text: #4a148c; - --calendar-selected-bg: #f3e5f5; - --calendar-selected-border: #8e24aa; - --calendar-selected-text: #6a1b9a; - --calendar-has-events-bg: #fff3e0; - --weekday-header-bg: #f3e5f5; - --weekday-header-text: #4a148c; - --time-label-bg: #f3e5f5; - --time-label-text: #4a148c; - --time-label-border: #ce93d8; - --event-colors: #9C27B0, #673AB7, #3F51B5, #2196F3, #03DAC6, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF9800, #FF5722, #F44336, #E91E63, #795548, #607D8B; -} - -[data-theme="purple"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="purple"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Dark Theme */ -[data-theme="dark"] { - --primary-gradient: linear-gradient(180deg, #424242 0%, #212121 100%); - --primary-bg: #121212; - --primary-text: #ffffff; - --sidebar-bg: linear-gradient(180deg, #424242 0%, #212121 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #424242 0%, #212121 100%); - --header-text: white; - --card-bg: #1e1e1e; - --border-color: #333333; - --accent-color: #666666; - --calendar-bg: #1f1f1f; - --calendar-border: #333333; - --calendar-day-bg: #1f1f1f; - --calendar-day-hover: #2a2a2a; - --calendar-day-prev-next: #1a1a1a; - --calendar-day-prev-next-text: #555; - --calendar-today-bg: #2d2d2d; - --calendar-today-border: #bb86fc; - --calendar-today-text: #bb86fc; - --calendar-selected-bg: #2a2a2a; - --calendar-selected-border: #bb86fc; - --calendar-selected-text: #bb86fc; - --calendar-has-events-bg: #272727; - --weekday-header-bg: #1a1a1a; - --weekday-header-text: #e0e0e0; - --time-label-bg: #1a1a1a; - --time-label-text: #e0e0e0; - --time-label-border: #333333; - --event-colors: #bb86fc, #03dac6, #cf6679, #ff9800, #4caf50, #2196f3, #9c27b0, #f44336, #795548, #607d8b, #e91e63, #3f51b5, #009688, #8bc34a, #ffc107, #ff5722; -} - -[data-theme="dark"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="dark"] .app-sidebar { - background: var(--sidebar-bg); -} - -[data-theme="dark"] .app-main { - background-color: var(--primary-bg); -} - -[data-theme="dark"] .calendar-day { - background: var(--card-bg); - border-color: var(--border-color); - color: var(--primary-text); -} - -/* Rose Theme */ -[data-theme="rose"] { - --primary-gradient: linear-gradient(180deg, #E91E63 0%, #AD1457 100%); - --primary-bg: #fce4ec; - --primary-text: #880e4f; - --sidebar-bg: linear-gradient(180deg, #E91E63 0%, #AD1457 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #E91E63 0%, #AD1457 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #f8bbd9; - --accent-color: #E91E63; - --calendar-bg: #ffffff; - --calendar-border: #f8bbd9; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #fdf2f8; - --calendar-day-prev-next: #fef7ff; - --calendar-day-prev-next-text: #f8bbd9; - --calendar-today-bg: #f48fb1; - --calendar-today-border: #AD1457; - --calendar-today-text: #880e4f; - --calendar-selected-bg: #fce4ec; - --calendar-selected-border: #c2185b; - --calendar-selected-text: #ad1457; - --calendar-has-events-bg: #fff3e0; - --weekday-header-bg: #fce4ec; - --weekday-header-text: #880e4f; - --time-label-bg: #fce4ec; - --time-label-text: #880e4f; - --time-label-border: #f8bbd9; - --event-colors: #E91E63, #9C27B0, #673AB7, #3F51B5, #2196F3, #03DAC6, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF9800, #FF5722, #F44336, #795548, #607D8B; -} - -[data-theme="rose"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="rose"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Mint Theme */ -[data-theme="mint"] { - --primary-gradient: linear-gradient(180deg, #26A69A 0%, #00695C 100%); - --primary-bg: #e0f2f1; - --primary-text: #004d40; - --sidebar-bg: linear-gradient(180deg, #26A69A 0%, #00695C 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #26A69A 0%, #00695C 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #b2dfdb; - --accent-color: #26A69A; - --calendar-bg: #ffffff; - --calendar-border: #b2dfdb; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #f0fdfc; - --calendar-day-prev-next: #f7ffff; - --calendar-day-prev-next-text: #b2dfdb; - --calendar-today-bg: #b2dfdb; - --calendar-today-border: #00695C; - --calendar-today-text: #004d40; - --calendar-selected-bg: #e0f2f1; - --calendar-selected-border: #00897b; - --calendar-selected-text: #00695c; - --calendar-has-events-bg: #fff3e0; - --weekday-header-bg: #e0f2f1; - --weekday-header-text: #004d40; - --time-label-bg: #e0f2f1; - --time-label-text: #004d40; - --time-label-border: #b2dfdb; - --event-colors: #26A69A, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF9800, #FF5722, #F44336, #E91E63, #9C27B0, #673AB7, #3F51B5, #2196F3, #795548, #607D8B; -} - -[data-theme="mint"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="mint"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Recurrence Options Styling */ -.recurrence-options { - margin-top: 1.5rem; - padding: 1rem; - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; -} - -.interval-input { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.interval-input input { - width: 80px; - flex-shrink: 0; -} - -.interval-unit { - color: #6c757d; - font-size: 0.9rem; -} - -.end-options { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.end-option { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.end-option .radio-label { - display: flex; - align-items: center; - gap: 0.25rem; - margin-right: 0.5rem; - white-space: nowrap; - cursor: pointer; -} - -.end-option input[type="date"], -.end-option input[type="number"] { - width: 120px; -} - -.count-input { - width: 80px !important; -} - -.count-unit { - color: #6c757d; - font-size: 0.9rem; -} - -.monthly-options { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.monthly-option { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.monthly-option .radio-label { - display: flex; - align-items: center; - gap: 0.25rem; - margin-right: 0.5rem; - white-space: nowrap; - cursor: pointer; -} - -.day-input { - width: 80px !important; -} - -.yearly-months { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 0.5rem; - margin-top: 0.5rem; -} - -.month-checkbox { - display: flex; - align-items: center; - gap: 0.25rem; - padding: 0.25rem 0.5rem; - border: 1px solid #e9ecef; - border-radius: 4px; - cursor: pointer; - transition: all 0.2s ease; -} - -.month-checkbox:hover { - background-color: #f8f9fa; - border-color: #ced4da; -} - -.month-checkbox input[type="checkbox"] { - width: auto !important; - margin: 0 !important; -} - -.month-label { - font-size: 0.9rem; - user-select: none; -} - -/* Radio button styling */ -.radio-label input[type="radio"] { - width: auto !important; - margin: 0 !important; - margin-right: 0.25rem !important; -} - -/* Mobile responsive adjustments */ -@media (max-width: 768px) { - .end-options { - gap: 0.5rem; - } - - .end-option { - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - } - - .monthly-option { - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - } - - .yearly-months { - grid-template-columns: repeat(2, 1fr); - } -} diff --git a/frontend/styles/base.css b/frontend/styles/base.css deleted file mode 100644 index 9652909..0000000 --- a/frontend/styles/base.css +++ /dev/null @@ -1,51 +0,0 @@ -/* Base Styles - Always Loaded */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background-color: #f8f9fa; - color: #333; - line-height: 1.6; -} - -.app { - min-height: 100vh; - display: flex; - flex-direction: row; -} - -.login-layout { - min-height: 100vh; - display: flex; - flex-direction: column; - width: 100%; -} - -/* Base Layout */ -.main-content { - flex: 1; - margin-left: 280px; - overflow-x: hidden; -} - -/* Basic Form Elements */ -input, select, textarea, button { - font-family: inherit; -} - -/* Utility Classes */ -.loading { - opacity: 0.7; -} - -.error { - color: #dc3545; -} - -.success { - color: #28a745; -} \ No newline at end of file diff --git a/frontend/styles/default.css b/frontend/styles/default.css deleted file mode 100644 index 00fea31..0000000 --- a/frontend/styles/default.css +++ /dev/null @@ -1,3511 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background-color: #f8f9fa; - color: #333; - line-height: 1.6; -} - -.app { - min-height: 100vh; - display: flex; - flex-direction: row; -} - -.login-layout { - min-height: 100vh; - display: flex; - flex-direction: column; - width: 100%; -} - -/* Sidebar Styles */ -.app-sidebar { - width: 280px; - min-height: 100vh; - background: linear-gradient(180deg, #667eea 0%, #764ba2 100%); - color: white; - display: flex; - flex-direction: column; - box-shadow: 2px 0 8px rgba(0,0,0,0.1); - position: fixed; - left: 0; - top: 0; - z-index: 100; -} - -.sidebar-header { - padding: 2rem 1.5rem 1.5rem; - border-bottom: 1px solid rgba(255,255,255,0.2); -} - -.sidebar-header h1 { - margin: 0 0 1rem 0; - font-size: 1.8rem; - font-weight: 600; - text-align: center; -} - -.user-info { - text-align: center; - margin-bottom: 0.5rem; -} - -.user-info .username { - font-size: 1.1rem; - font-weight: 600; - color: white; - margin-bottom: 0.25rem; -} - -.user-info .server-url { - font-size: 0.8rem; - color: rgba(255,255,255,0.7); - word-break: break-all; - line-height: 1.2; -} - -.user-info.loading { - font-size: 0.9rem; - color: rgba(255,255,255,0.6); - font-style: italic; -} - -.sidebar-nav { - padding: 1rem; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.sidebar-nav .nav-link { - color: white; - text-decoration: none; - padding: 0.75rem 1rem; - border-radius: 8px; - transition: all 0.2s; - font-weight: 500; - display: flex; - align-items: center; -} - -.sidebar-nav .nav-link:hover { - background-color: rgba(255,255,255,0.15); - transform: translateX(4px); -} - -.sidebar-nav .nav-link.active { - background-color: rgba(255,255,255,0.2); - box-shadow: 0 2px 4px rgba(0,0,0,0.1); -} - -.calendar-list { - flex: 1; - padding: 1rem; - border-top: 1px solid rgba(255,255,255,0.1); -} - -.calendar-list h3 { - color: white; - font-size: 1rem; - font-weight: 600; - margin: 0 0 1rem 0; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.calendar-list ul { - list-style: none; - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.calendar-list li { - display: flex; - align-items: center; - padding: 0.5rem 0.75rem; - background: rgba(255,255,255,0.1); - border-radius: 6px; - transition: all 0.2s; - cursor: pointer; - gap: 0.75rem; -} - -.calendar-list li:hover { - background: rgba(255,255,255,0.15); - transform: translateX(2px); -} - -.calendar-color { - width: 16px; - height: 16px; - border-radius: 50%; - flex-shrink: 0; - border: 2px solid rgba(255,255,255,0.3); - transition: all 0.2s; - cursor: pointer; - position: relative; -} - -.calendar-list li:hover .calendar-color { - border-color: rgba(255,255,255,0.6); - transform: scale(1.1); -} - -.color-picker { - position: absolute; - top: 100%; - left: 0; - background: white; - border-radius: 8px; - padding: 8px; - box-shadow: 0 4px 12px rgba(0,0,0,0.15); - z-index: 1000; - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 6px; - min-width: 120px; - border: 1px solid rgba(0,0,0,0.1); -} - -.color-option { - width: 20px; - height: 20px; - border-radius: 50%; - border: 2px solid rgba(0,0,0,0.1); - cursor: pointer; - transition: all 0.2s; -} - -.color-option:hover { - transform: scale(1.2); - border-color: rgba(0,0,0,0.3); -} - -.color-option.selected { - border-color: #333; - border-width: 3px; - transform: scale(1.1); -} - -.color-picker-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 999; -} - -.calendar-name { - color: white; - font-size: 0.9rem; - font-weight: 500; - flex: 1; -} - -.no-calendars { - padding: 1rem; - text-align: center; - color: rgba(255,255,255,0.6); - font-size: 0.9rem; - font-style: italic; - border-top: 1px solid rgba(255,255,255,0.1); -} - -.sidebar-footer { - padding: 1rem; - border-top: 1px solid rgba(255,255,255,0.1); -} - -.app-main { - flex: 1; - margin-left: 280px; - padding: 2rem; - max-width: calc(100% - 280px); - width: calc(100% - 280px); - box-sizing: border-box; -} - -/* Authentication Forms */ -.login-container, .register-container { - display: flex; - justify-content: center; - align-items: center; - min-height: 60vh; -} - -.login-form, .register-form { - background: white; - padding: 2rem; - border-radius: 8px; - box-shadow: 0 4px 6px rgba(0,0,0,0.1); - width: 100%; - max-width: 400px; -} - -.login-form h2, .register-form h2 { - text-align: center; - margin-bottom: 2rem; - color: #333; -} - -.form-group { - margin-bottom: 1.5rem; -} - -.form-group label { - display: block; - margin-bottom: 0.5rem; - font-weight: 500; - color: #555; -} - -.form-group input { - width: 100%; - padding: 0.75rem; - border: 1px solid #ddd; - border-radius: 4px; - font-size: 1rem; - transition: border-color 0.2s; -} - -.form-group input:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2); -} - -.form-group input:disabled { - background-color: #f5f5f5; - cursor: not-allowed; -} - -.remember-checkbox { - display: flex; - align-items: center; - gap: 0.375rem; - margin-top: 0.375rem; - opacity: 0.7; -} - -.remember-checkbox input[type="checkbox"] { - width: auto; - margin: 0; - cursor: pointer; - transform: scale(0.85); -} - -.remember-checkbox label { - margin: 0; - font-size: 0.75rem; - color: #888; - cursor: pointer; - user-select: none; - font-weight: 400; -} - -.login-button, .register-button { - width: 100%; - padding: 0.75rem; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border: none; - border-radius: 4px; - font-size: 1rem; - font-weight: 500; - cursor: pointer; - transition: transform 0.2s, box-shadow 0.2s; -} - -.login-button:hover, .register-button:hover { - transform: translateY(-1px); - box-shadow: 0 4px 8px rgba(0,0,0,0.2); -} - -.login-button:disabled, .register-button:disabled { - background: #ccc; - transform: none; - cursor: not-allowed; -} - -.error-message { - background-color: #f8d7da; - color: #721c24; - padding: 0.75rem; - border-radius: 4px; - margin-bottom: 1rem; - border: 1px solid #f5c6cb; -} - -.auth-links { - text-align: center; - margin-top: 2rem; - color: #666; -} - -.auth-links a { - color: #667eea; - text-decoration: none; -} - -.auth-links a:hover { - text-decoration: underline; -} - -.logout-button { - background: rgba(255,255,255,0.1); - border: 1px solid rgba(255,255,255,0.2); - color: white; - padding: 0.75rem 1rem; - border-radius: 8px; - cursor: pointer; - transition: all 0.2s; - font-weight: 500; - width: 100%; -} - -.logout-button:hover { - background: rgba(255,255,255,0.2); - transform: translateY(-1px); -} - -/* Calendar View */ -.calendar-view { - height: calc(100vh - 4rem); /* Full height minus main padding */ - display: flex; - flex-direction: column; -} - -.calendar-loading, .calendar-error { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - background: white; - border-radius: 12px; - box-shadow: 0 4px 16px rgba(0,0,0,0.1); -} - -.calendar-loading p { - font-size: 1.2rem; - color: #666; -} - -.calendar-error p { - font-size: 1.2rem; - color: #d32f2f; -} - -/* Calendar Component */ -.calendar { - background: var(--calendar-bg, white); - border-radius: 12px; - box-shadow: 0 4px 16px rgba(0,0,0,0.1); - overflow: hidden; - flex: 1; - display: flex; - flex-direction: column; -} - -.calendar-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1.5rem 2rem; - background: var(--header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%)); - color: var(--header-text, white); -} - -.month-year { - font-size: 1.8rem; - font-weight: 600; - margin: 0; - position: absolute; - left: 50%; - transform: translateX(-50%); -} - -.header-left { - display: flex; - align-items: center; - gap: 8px; -} - -.header-right { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.time-increment-button { - background: rgba(255,255,255,0.2); - border: none; - color: white; - font-size: 14px; - font-weight: bold; - width: 40px; - height: 40px; - border-radius: 50%; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: background-color 0.2s; -} - -.time-increment-button:hover { - background: rgba(255,255,255,0.3); -} - -.nav-button { - background: rgba(255,255,255,0.2); - border: none; - color: white; - font-size: 1.5rem; - font-weight: bold; - width: 40px; - height: 40px; - border-radius: 50%; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: background-color 0.2s; -} - -.nav-button:hover { - background: rgba(255,255,255,0.3); -} - -.today-button { - background: rgba(255,255,255,0.2); - border: none; - color: white; - font-size: 0.9rem; - font-weight: 500; - padding: 0.5rem 1rem; - border-radius: 20px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: background-color 0.2s; -} - -.today-button:hover { - background: rgba(255,255,255,0.3); -} - -.calendar-grid { - display: grid; - grid-template-columns: repeat(7, 1fr); - grid-template-rows: auto repeat(6, 1fr); - flex: 1; - background: var(--calendar-bg, white); - gap: 0; -} - -/* Week View Container */ -.week-view-container { - display: flex; - flex-direction: column; - height: 100%; - background: var(--calendar-bg, white); -} - -/* Week Header */ -.week-header { - display: grid; - grid-template-columns: 80px repeat(7, 1fr); - background: var(--weekday-header-bg, #f8f9fa); - border-bottom: 2px solid var(--time-label-border, #e9ecef); - position: sticky; - top: 0; - z-index: 10; -} - -.time-gutter { - background: var(--time-label-bg, #f8f9fa); - border-right: 1px solid var(--time-label-border, #e9ecef); -} - -.week-day-header { - padding: 1rem; - text-align: center; - border-right: 1px solid var(--time-label-border, #e9ecef); - background: var(--weekday-header-bg, #f8f9fa); - color: var(--weekday-header-text, inherit); -} - -.week-day-header.today { - background: var(--calendar-today-bg, #e3f2fd); - color: var(--calendar-today-text, #1976d2); -} - -.weekday-name { - font-size: 0.9rem; - font-weight: 600; - color: var(--weekday-header-text, #666); - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; -} - -.week-day-header .day-number { - font-size: 1.5rem; - font-weight: 700; -} - -.week-day-header.today .weekday-name { - color: var(--calendar-today-text, #1976d2); -} - -/* Week Content */ -.week-content { - flex: 1; - overflow-y: auto; - overflow-x: hidden; -} - -.time-grid { - display: grid; - grid-template-columns: 80px 1fr; - min-height: 100%; -} - -/* Time Labels */ -.time-labels { - background: var(--time-label-bg, #f8f9fa); - border-right: 1px solid var(--time-label-border, #e9ecef); - position: sticky; - left: 0; - z-index: 5; -} - -.time-label { - height: 60px; - display: flex; - align-items: flex-start; - justify-content: center; - padding-top: 0.5rem; - font-size: 0.75rem; - color: var(--time-label-text, #666); - border-bottom: 1px solid var(--calendar-border, #f0f0f0); - font-weight: 500; -} - -.time-label.final-boundary { - height: 60px; /* Keep same height but this marks the end boundary */ - border-bottom: 2px solid #e9ecef; /* Stronger border to show day end */ - color: #999; /* Lighter color to indicate it's the boundary */ - font-size: 0.7rem; -} - -/* Week Days Grid */ -.week-days-grid { - display: grid; - grid-template-columns: repeat(7, 1fr); -} - -.week-day-column { - position: relative; - border-right: 1px solid var(--time-label-border, #e9ecef); - min-height: 1500px; /* 25 time labels × 60px = 1500px total */ -} - -.week-day-column:last-child { - border-right: none; -} - -.week-day-column.today { - background: var(--calendar-day-hover, #fafffe); -} - -/* Time Slots */ -.time-slot { - height: 60px; - border-bottom: 1px solid var(--calendar-border, #f0f0f0); - position: relative; - pointer-events: none; /* Don't capture mouse events */ -} - -.time-slot-half { - height: 30px; - border-bottom: 1px dotted var(--calendar-border, #f5f5f5); - pointer-events: none; /* Don't capture mouse events */ -} - -.time-slot-half:last-child { - border-bottom: none; -} - -.time-slot-quarter { - height: 30px; - border-bottom: 1px dotted var(--calendar-border-light, #f8f8f8); - pointer-events: none; /* Don't capture mouse events */ -} - -.time-slot-quarter:last-child { - border-bottom: none; -} - -.time-slot.boundary-slot { - height: 60px; /* Match the final time label height */ - border-bottom: 2px solid #e9ecef; /* Strong border to match final boundary */ - background: rgba(0,0,0,0.02); /* Slightly different background to indicate boundary */ - pointer-events: none; /* Don't capture mouse events */ -} - -/* Events Container */ -.events-container { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - pointer-events: none; /* Container doesn't capture, but children (events) do */ -} - -/* Week Events */ -.week-event { - position: absolute !important; - left: 4px; - right: 4px; - min-height: 20px; - background: #3B82F6; - color: white; - padding: 2px 6px; - border-radius: 4px; - font-size: 0.75rem; - line-height: 1.3; - cursor: pointer; - pointer-events: auto; - z-index: 3; - border: 1px solid rgba(255,255,255,0.2); - text-shadow: 0 1px 1px rgba(0,0,0,0.3); - font-weight: 500; - box-shadow: 0 1px 3px rgba(0,0,0,0.1); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.week-event:hover { - filter: brightness(1.1); - z-index: 4; - box-shadow: 0 2px 6px rgba(0,0,0,0.15); -} - -.week-event.refreshing { - animation: pulse 1.5s ease-in-out infinite alternate; - border-color: #ff9800; -} - -/* Temporary event box during drag creation */ -.temp-event-box { - position: absolute; - left: 4px; - right: 4px; - background: rgba(59, 130, 246, 0.3); - border: 2px dashed rgba(59, 130, 246, 0.8); - border-radius: 4px; - color: rgba(59, 130, 246, 0.9); - font-size: 0.75rem; - font-weight: 600; - padding: 4px 6px; - display: flex; - align-items: center; - justify-content: center; - pointer-events: none; - z-index: 6; /* Higher than events */ - text-align: center; - user-select: none; -} - -/* Moving event during drag */ -.temp-event-box.moving-event { - background: inherit; /* Use the event's actual color */ - border: 2px solid rgba(255, 255, 255, 0.8); - color: white; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - text-align: left; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); - transform: scale(1.02); -} - -.temp-event-box.moving-event .event-title { - font-weight: 600; - margin-bottom: 2px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; -} - -.temp-event-box.moving-event .event-time { - font-size: 0.65rem; - opacity: 0.9; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; -} - -/* Resizing event during drag */ -.temp-event-box.resizing-event { - background: inherit; - border: 2px solid rgba(255, 255, 255, 0.9); - color: white; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - text-align: left; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); - transform: scale(1.01); -} - -.temp-event-box.resizing-event .event-title { - font-weight: 600; - margin-bottom: 2px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; -} - -.temp-event-box.resizing-event .event-time { - font-size: 0.65rem; - opacity: 0.9; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; -} - -/* Event resize zones and handles */ -/* Remove position: relative to allow absolute positioning for correct event placement */ - -.week-event .event-content { - padding: 2px; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - pointer-events: auto; - z-index: 5; - position: relative; -} - -/* Left-click drag handles */ -.resize-handle { - position: absolute; - left: 0; - right: 0; - height: 4px; - background: transparent; - cursor: ns-resize; - z-index: 10; - transition: background-color 0.2s; -} - -.resize-handle-top { - top: 0; - border-top: 2px solid transparent; -} - -.resize-handle-bottom { - bottom: 0; - border-bottom: 2px solid transparent; -} - -.week-event:hover .resize-handle { - background: rgba(255, 255, 255, 0.3); -} - -.week-event:hover .resize-handle-top { - border-top-color: rgba(255, 255, 255, 0.8); -} - -.week-event:hover .resize-handle-bottom { - border-bottom-color: rgba(255, 255, 255, 0.8); -} - -.resize-handle:hover { - background: rgba(255, 255, 255, 0.5) !important; - border-color: rgba(255, 255, 255, 1) !important; -} - - -.week-event .event-title { - font-weight: 600; - margin-bottom: 2px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.week-event .event-time { - font-size: 0.65rem; - opacity: 0.9; - font-weight: 400; -} - -.week-event.all-day { - opacity: 0.9; - border-left: 4px solid rgba(255,255,255,0.5); - font-style: italic; - background: linear-gradient(135deg, var(--event-color, #3B82F6), rgba(255,255,255,0.1)) !important; -} - -/* Legacy Week Grid (for backward compatibility) */ -.week-grid { - display: grid; - grid-template-columns: repeat(7, 1fr); - grid-template-rows: auto 1fr; - flex: 1; - background: var(--calendar-bg, white); -} - -.week-view .calendar-day { - height: 100%; /* Make week view days stretch to full height of their grid cell */ -} - -.weekday-header { - background: #f8f9fa; - padding: 1rem; - text-align: center; - font-weight: 600; - color: #666; - border-bottom: 1px solid #e9ecef; - font-size: 0.9rem; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.calendar-day { - border: 1px solid var(--calendar-border, #f0f0f0); - padding: 0.75rem; - display: flex; - flex-direction: column; - cursor: pointer; - transition: background-color 0.2s; - position: relative; - overflow: hidden; - background: var(--calendar-day-bg, white); -} - -.calendar-day:hover { - background-color: var(--calendar-day-hover, #f8f9ff); -} - -.calendar-day.current-month { - background: var(--calendar-day-bg, white); -} - -.calendar-day.prev-month, -.calendar-day.next-month { - background: var(--calendar-day-prev-next, #fafafa); - color: var(--calendar-day-prev-next-text, #ccc); -} - -.calendar-day.today { - background: var(--calendar-today-bg, #e3f2fd); - border: 2px solid var(--calendar-today-border, #2196f3); -} - -.calendar-day.has-events { - background: var(--calendar-has-events-bg, #fff3e0); -} - -.calendar-day.today.has-events { - background: var(--calendar-today-bg, #e1f5fe); -} - -.calendar-day.selected { - background: var(--calendar-selected-bg, #e8f5e8); - border: 2px solid var(--calendar-selected-border, #4caf50); - box-shadow: 0 0 8px rgba(76, 175, 80, 0.3); -} - -.calendar-day.selected.has-events { - background: var(--calendar-selected-bg, #f1f8e9); -} - -.calendar-day.selected.today { - background: var(--calendar-selected-bg, #e0f2f1); - border: 2px solid var(--calendar-selected-border, #4caf50); -} - -.calendar-day.selected .day-number { - color: var(--calendar-selected-text, #2e7d32); - font-weight: 700; -} - -.day-number { - font-weight: 600; - font-size: 1.1rem; - margin-bottom: 0.5rem; -} - -.calendar-day.today .day-number { - color: var(--calendar-today-text, #1976d2); -} - -.day-events { - flex: 1; - display: flex; - flex-direction: column; - gap: 2px; - overflow: hidden; -} - -.event-indicators { - flex: 1; - display: flex; - flex-direction: column; - gap: 2px; -} - -.more-events-indicator { - font-size: 0.7rem; - color: #666; - font-weight: 500; - padding: 2px 4px; - text-align: center; - background: #f5f5f5; - border-radius: 3px; - cursor: pointer; - transition: background-color 0.2s; -} - -.more-events-indicator:hover { - background: #e0e0e0; -} - -.event-box { - /* Background color will be set inline via style attribute */ - color: white; - padding: 2px 4px; - border-radius: 3px; - font-size: 0.7rem; - line-height: 1.2; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - cursor: pointer; - transition: all 0.2s ease; - border: 1px solid rgba(255,255,255,0.2); - text-shadow: 0 1px 1px rgba(0,0,0,0.3); - font-weight: 500; - box-shadow: 0 1px 2px rgba(0,0,0,0.1); - position: relative; -} - -.event-box:hover { - filter: brightness(1.15); - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(0,0,0,0.15); -} - -.event-box.refreshing { - animation: pulse 1.5s ease-in-out infinite alternate; - border-color: #ff9800; -} - -.event-box.refreshing::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(255, 152, 0, 0.3); - pointer-events: none; -} - -@keyframes pulse { - 0% { - opacity: 0.7; - } - 100% { - opacity: 1; - } -} - -.event-dot { - background: #ff9800; - height: 6px; - border-radius: 3px; - margin-bottom: 1px; -} - -.more-events { - font-size: 0.7rem; - color: #666; - margin-top: 2px; - font-weight: 500; -} - -/* Event Modal Styles */ -.modal-backdrop { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; - backdrop-filter: blur(2px); -} - -.modal-content { - background: white; - border-radius: 12px; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); - max-width: 900px; - width: 95%; - max-height: 85vh; - overflow-y: auto; - position: relative; - animation: modalAppear 0.2s ease-out; -} - -@keyframes modalAppear { - from { - opacity: 0; - transform: scale(0.9) translateY(-20px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -.modal-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 2rem 3rem 1.5rem; - border-bottom: 1px solid #e9ecef; -} - -.modal-header h3 { - margin: 0; - color: #333; - font-size: 1.4rem; - font-weight: 600; -} - -.modal-close { - background: none; - border: none; - font-size: 1.8rem; - color: #999; - cursor: pointer; - padding: 0; - width: 30px; - height: 30px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.2s; - line-height: 1; -} - -.modal-close:hover { - background: #f8f9fa; - color: #666; - transform: scale(1.1); -} - -.modal-body { - padding: 0.25rem 1.0rem 0rem; -} - -.event-detail { - display: grid; - grid-template-columns: 100px 1fr; - gap: 1rem; - margin-bottom: 1rem; - align-items: start; -} - -.event-detail strong { - color: #555; - font-weight: 600; - font-size: 0.9rem; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.event-detail span { - color: #333; - font-size: 1rem; - line-height: 1.5; - word-break: break-word; -} - -/* Responsive Design */ -@media (max-width: 768px) { - .app-sidebar { - width: 100%; - height: auto; - min-height: unset; - position: relative; - flex-direction: row; - padding: 1rem; - } - - .sidebar-header { - padding: 0; - border-bottom: none; - border-right: 1px solid rgba(255,255,255,0.2); - margin-right: 1rem; - } - - .sidebar-header h1 { - font-size: 1.4rem; - text-align: left; - margin: 0; - } - - .user-info { - display: none; /* Hide user info on mobile to save space */ - } - - .sidebar-nav { - flex-direction: row; - padding: 0; - align-items: center; - gap: 1rem; - flex: 1; - } - - .sidebar-nav .nav-link { - padding: 0.5rem 0.75rem; - font-size: 0.9rem; - } - - .logout-button { - margin: 0; - padding: 0.5rem 0.75rem; - font-size: 0.9rem; - width: auto; - } - - .calendar-list { - display: none; /* Hide calendar list on mobile */ - } - - .sidebar-footer { - padding: 0; - border-top: none; - } - - .view-selector { - margin-bottom: 0.5rem; - } - - .view-selector-dropdown { - padding: 0.5rem 0.75rem; - font-size: 0.8rem; - } - - .app-main { - margin-left: 0; - max-width: 100%; - width: 100%; - padding: 1rem; - } - - .calendar-header { - padding: 1rem; - } - - .month-year { - font-size: 1.4rem; - } - - .nav-button { - width: 35px; - height: 35px; - font-size: 1.2rem; - } - - .today-button { - font-size: 0.8rem; - padding: 0.4rem 0.8rem; - } - - .weekday-header { - padding: 0.5rem; - font-size: 0.8rem; - } - - .calendar-day { - min-height: 70px; - padding: 0.5rem; - } - - .day-number { - font-size: 1rem; - } - - .calendar-view { - height: calc(100vh - 8rem); - } -} - -@media (max-width: 480px) { - .calendar-day { - min-height: 60px; - padding: 0.25rem; - } - - .weekday-header { - padding: 0.5rem 0.25rem; - } - - .day-number { - font-size: 0.9rem; - } -} - -/* Mobile adjustments for modal */ -@media (max-width: 768px) { - .modal-content { - margin: 1rem; - width: calc(100% - 2rem); - } - - .modal-header, .modal-body { - padding: 1.5rem 2rem; - } - - .event-detail { - grid-template-columns: 80px 1fr; - gap: 0.75rem; - margin-bottom: 0.75rem; - } - - .event-detail strong { - font-size: 0.8rem; - } - - .event-detail span { - font-size: 0.9rem; - } - - .login-form, .register-form { - padding: 1.5rem; - } -} - -/* Create Calendar Button */ -.create-calendar-button { - background: rgba(255, 255, 255, 0.2); - border: 1px solid rgba(255, 255, 255, 0.3); - color: white; - padding: 0.75rem 1rem; - border-radius: 8px; - cursor: pointer; - transition: all 0.2s ease; - margin-bottom: 1rem; - font-size: 0.9rem; - font-weight: 500; - backdrop-filter: blur(10px); - width: 100%; -} - -.create-calendar-button:hover { - background: rgba(255, 255, 255, 0.3); - border-color: rgba(255, 255, 255, 0.5); - transform: translateY(-1px); -} - -.create-calendar-button:active { - transform: translateY(0); -} - -/* View Selector */ -.view-selector { - margin-bottom: 1rem; -} - -.view-selector-dropdown { - width: 100%; - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - color: white; - padding: 0.75rem 1rem; - border-radius: 8px; - font-size: 0.9rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - backdrop-filter: blur(10px); -} - -.view-selector-dropdown:hover { - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.3); -} - -.view-selector-dropdown:focus { - outline: none; - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.4); - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); -} - -.view-selector-dropdown option { - background: #2a2a2a; - color: white; - padding: 0.5rem; -} - -/* Create Calendar Modal */ -.modal-backdrop { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - backdrop-filter: blur(4px); - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; - padding: 2rem; -} - -.create-calendar-modal { - background: white; - border-radius: 12px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); - max-width: 500px; - width: 100%; - max-height: 90vh; - overflow-y: auto; - animation: modalSlideIn 0.3s ease; -} - -@keyframes modalSlideIn { - from { - opacity: 0; - transform: scale(0.9) translateY(-20px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -.create-calendar-modal .modal-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 2rem 2rem 1rem; - border-bottom: 1px solid #e9ecef; -} - -.create-calendar-modal .modal-header h2 { - margin: 0; - color: #495057; - font-size: 1.5rem; - font-weight: 600; -} - -.close-button { - background: none; - border: none; - font-size: 1.5rem; - color: #6c757d; - cursor: pointer; - padding: 0.25rem; - line-height: 1; - border-radius: 4px; - transition: all 0.2s ease; -} - -.close-button:hover { - color: #495057; - background: #f8f9fa; -} - -.create-calendar-modal .modal-body { - padding: 1.5rem 2rem 2rem; -} - -.form-group { - margin-bottom: 1.5rem; -} - -.form-group label { - display: block; - margin-bottom: 0.5rem; - color: #495057; - font-weight: 500; - font-size: 0.9rem; -} - -.form-group input, -.form-group textarea { - width: 100%; - padding: 0.75rem; - border: 1px solid #ced4da; - border-radius: 8px; - font-size: 1rem; - transition: border-color 0.2s ease, box-shadow 0.2s ease; - font-family: inherit; -} - -.form-group input:focus, -.form-group textarea:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -.form-group input:disabled, -.form-group textarea:disabled { - background-color: #f8f9fa; - color: #6c757d; - cursor: not-allowed; -} - -.color-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 0.75rem; - margin: 0.75rem 0; -} - -.color-option { - width: 40px; - height: 40px; - border: 3px solid transparent; - border-radius: 8px; - cursor: pointer; - transition: all 0.2s ease; - position: relative; -} - -.color-option:hover { - transform: scale(1.1); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); -} - -.color-option.selected { - border-color: #495057; - transform: scale(1.1); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); -} - -.color-option.selected::after { - content: '✓'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; - font-weight: bold; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); -} - -.color-help-text { - font-size: 0.8rem; - color: #6c757d; - margin-top: 0.5rem; - margin-bottom: 0; -} - -.modal-actions { - display: flex; - justify-content: flex-end; - gap: 1rem; - margin-top: 2rem; - padding-top: 1.5rem; - border-top: 1px solid #e9ecef; -} - -.cancel-button, -.create-button { - padding: 0.75rem 1.5rem; - border-radius: 8px; - font-size: 1rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - border: none; -} - -.cancel-button { - background: #f8f9fa; - color: #6c757d; - border: 1px solid #ced4da; -} - -.cancel-button:hover:not(:disabled) { - background: #e9ecef; - color: #495057; -} - -.create-button { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; -} - -.create-button:hover:not(:disabled) { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); -} - -.cancel-button:disabled, -.create-button:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none !important; -} - -.error-message { - background: #f8d7da; - color: #721c24; - padding: 0.75rem 1rem; - border: 1px solid #f5c6cb; - border-radius: 6px; - margin-bottom: 1rem; - font-size: 0.9rem; -} - -/* Mobile adjustments for create calendar modal */ -@media (max-width: 768px) { - .modal-backdrop { - padding: 1rem; - } - - .create-calendar-modal { - max-height: 95vh; - } - - .create-calendar-modal .modal-header, - .create-calendar-modal .modal-body { - padding-left: 1.5rem; - padding-right: 1.5rem; - } - - .color-grid { - grid-template-columns: repeat(4, 1fr); - gap: 0.5rem; - } - - .color-option { - width: 35px; - height: 35px; - } - - .modal-actions { - flex-direction: column; - gap: 0.75rem; - } - - .cancel-button, - .create-button { - width: 100%; - text-align: center; - } -} - -/* Context Menu */ -.context-menu { - background: white; - border: 1px solid #e9ecef; - border-radius: 8px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - min-width: 160px; - overflow: hidden; - animation: contextMenuSlideIn 0.15s ease; -} - -@keyframes contextMenuSlideIn { - from { - opacity: 0; - transform: scale(0.95) translateY(-5px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -.context-menu-item { - display: flex; - align-items: center; - padding: 0.75rem 1rem; - color: #495057; - cursor: pointer; - transition: background-color 0.2s ease; - font-size: 0.9rem; - border: none; - background: none; - width: 100%; - text-align: left; -} - -.context-menu-item:hover { - background-color: #f8f9fa; -} - -.context-menu-delete { - color: #dc3545; -} - -.context-menu-delete:hover { - background-color: #f8f9fa; - color: #dc3545; -} - -.context-menu-icon { - margin-right: 0.5rem; - font-size: 1rem; -} - -/* Prevent text selection on context menu items */ -.context-menu-item { - user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; -} - -/* Event Creation Modal Styles */ -.create-event-modal { - min-width: 750px; - max-width: 900px; - width: 95%; -} - -.create-event-modal .modal-body { - max-height: 60vh; - overflow-y: auto; -} - -.create-event-modal .form-group { - margin-bottom: 1.5rem; -} - -.create-event-modal .form-group label { - display: block; - margin-bottom: 0.5rem; - color: #495057; - font-weight: 500; - font-size: 0.9rem; -} - -.create-event-modal .form-input { - width: 100%; - padding: 0.75rem; - border: 1px solid #ced4da; - border-radius: 8px; - font-size: 1rem; - transition: border-color 0.2s ease, box-shadow 0.2s ease; - font-family: inherit; - box-sizing: border-box; -} - -.create-event-modal .form-input:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -/* Checkbox specific styling override */ -.create-event-modal input[type="checkbox"] { - width: auto; - display: inline-block; - margin-right: 0.5rem; - vertical-align: middle; -} - -.create-event-modal .form-row { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; -} - -.create-event-modal .modal-footer { - display: flex; - justify-content: flex-end; - gap: 1rem; - padding: 1.5rem 2rem; - border-top: 1px solid #e9ecef; - background: #f8f9fa; -} - -/* Button Styles */ -.btn { - padding: 0.75rem 1.5rem; - border-radius: 8px; - font-size: 1rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - border: none; - text-align: center; - text-decoration: none; - display: inline-block; - line-height: 1.5; - user-select: none; -} - -.btn:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none !important; -} - -.btn-secondary { - background: #f8f9fa; - color: #6c757d; - border: 1px solid #ced4da; -} - -.btn-secondary:hover:not(:disabled) { - background: #e9ecef; - color: #495057; - border-color: #adb5bd; -} - -.btn-primary { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border: 1px solid transparent; -} - -.btn-primary:hover:not(:disabled) { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); -} - -/* Weekday selection styles */ -.weekday-selection { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; - margin-top: 0.5rem; -} - -.weekday-checkbox { - display: flex; - align-items: center; - cursor: pointer; - padding: 0.5rem 0.75rem; - border: 1px solid #ced4da; - border-radius: 6px; - background: white; - transition: all 0.2s ease; - user-select: none; - min-width: 3rem; - justify-content: center; -} - -.weekday-checkbox:hover { - border-color: #667eea; - background: #f8f9ff; -} - -.weekday-checkbox input[type="checkbox"] { - display: none; -} - -.weekday-checkbox input[type="checkbox"]:checked + .weekday-label { - color: white; -} - -.weekday-checkbox:has(input[type="checkbox"]:checked) { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-color: #667eea; - color: white; -} - -.weekday-label { - font-size: 0.85rem; - font-weight: 500; - color: #495057; - transition: color 0.2s ease; -} - -/* Mobile adjustments for event creation modal */ -@media (max-width: 768px) { - .create-event-modal .form-row { - grid-template-columns: 1fr; - gap: 1rem; - } - - .create-event-modal .modal-footer { - flex-direction: column; - gap: 0.75rem; - padding: 1rem 1.5rem; - } - - .create-event-modal .btn { - width: 100%; - } - - .weekday-selection { - gap: 0.25rem; - } - - .weekday-checkbox { - min-width: 2.5rem; - padding: 0.4rem 0.6rem; - } -} - -/* Recurring Edit Modal */ -.recurring-edit-modal { - max-width: 500px; - width: 95%; -} - -.recurring-edit-options { - display: flex; - flex-direction: column; - gap: 1rem; - margin: 1.5rem 0; -} - -.recurring-option { - background: white; - border: 2px solid #e9ecef; - color: #495057; - padding: 1rem; - text-align: left; - border-radius: 8px; - cursor: pointer; - transition: all 0.2s ease; -} - -.recurring-option:hover { - border-color: #667eea; - background: #f8f9ff; - color: #495057; - transform: none; - box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15); -} - -.recurring-option .option-title { - font-size: 1rem; - font-weight: 600; - margin-bottom: 0.5rem; - color: #333; -} - -.recurring-option .option-description { - font-size: 0.9rem; - color: #666; - line-height: 1.4; -} - -/* Mobile adjustments for recurring edit modal */ -@media (max-width: 768px) { - .recurring-edit-modal { - margin: 1rem; - width: calc(100% - 2rem); - } - - .recurring-option { - padding: 0.75rem; - } - - .recurring-option .option-title { - font-size: 0.9rem; - } - - .recurring-option .option-description { - font-size: 0.8rem; - } -} - -/* Tabbed Modal Interface Styles */ -.tab-navigation { - display: flex; - border-bottom: 2px solid #e9ecef; - margin-bottom: 1.5rem; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - scrollbar-width: none; - -ms-overflow-style: none; -} - -.tab-navigation::-webkit-scrollbar { - display: none; -} - -.tab-button { - background: none; - border: none; - padding: 0.75rem 1rem; - cursor: pointer; - font-size: 0.85rem; - font-weight: 500; - color: #6c757d; - transition: all 0.2s ease; - border-bottom: 3px solid transparent; - white-space: nowrap; - display: flex; - align-items: center; - gap: 0.5rem; - min-width: max-content; -} - -.tab-button:hover { - color: #495057; - background: #f8f9fa; -} - -.tab-button.active { - color: #667eea; - border-bottom-color: #667eea; - background: #f8f9ff; -} - -.tab-content { - min-height: 300px; - max-height: 50vh; - overflow-y: auto; - padding: 1rem 2rem 2rem 2rem; -} - -.tab-panel { - animation: fadeIn 0.2s ease-in-out; -} - -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Mobile adjustments for tabbed interface */ -@media (max-width: 768px) { - .tab-navigation { - gap: 0; - margin-bottom: 1rem; - } - - .tab-button { - padding: 0.5rem 0.75rem; - font-size: 0.8rem; - flex: 1; - justify-content: center; - min-width: unset; - } - - .tab-content { - min-height: 250px; - max-height: 45vh; - padding: 1rem 1.5rem 1.5rem 1.5rem; - } -} - -/* Form Help Text and Advanced Info Styles */ -.form-help-text { - font-size: 0.8rem; - color: #6c757d; - margin-top: 0.25rem; - margin-bottom: 0; - line-height: 1.4; - font-style: italic; -} - -.advanced-info { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1.5rem; -} - -.advanced-info h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.advanced-info ul { - margin: 0 0 0.75rem 0; - padding-left: 1.2rem; - list-style-type: disc; -} - -.advanced-info li { - font-size: 0.85rem; - color: #6c757d; - line-height: 1.4; - margin-bottom: 0.25rem; -} - -.advanced-info .form-help-text { - margin-top: 0.5rem; - margin-bottom: 0; - border-top: 1px solid #e9ecef; - padding-top: 0.5rem; -} - -/* Theme compatibility for advanced info */ -[data-theme="dark"] .advanced-info { - background: #2a2a2a; - border-color: #444444; -} - -[data-theme="dark"] .advanced-info h5 { - color: #e0e0e0; -} - -[data-theme="dark"] .advanced-info li { - color: #b0b0b0; -} - -[data-theme="dark"] .advanced-info .form-help-text { - border-color: #444444; -} - -/* People Tab Styles */ -.people-info { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1.5rem; -} - -.people-info h5, -.people-info h6 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.people-info h6 { - font-size: 0.8rem; - margin-top: 1rem; - margin-bottom: 0.5rem; -} - -.people-validation { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid #e9ecef; -} - -.attendee-roles-preview { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.attendee-roles-preview h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.role-examples { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-bottom: 1rem; -} - -.role-item { - display: flex; - align-items: flex-start; - gap: 0.5rem; - padding: 0.5rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.role-item strong { - color: #495057; - font-size: 0.85rem; - font-weight: 600; - min-width: 140px; - flex-shrink: 0; -} - -.role-item span { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.3; -} - -/* Theme compatibility for people info */ -[data-theme="dark"] .people-info, -[data-theme="dark"] .attendee-roles-preview { - background: #2a2a2a; - border-color: #444444; -} - -[data-theme="dark"] .people-info h5, -[data-theme="dark"] .people-info h6, -[data-theme="dark"] .attendee-roles-preview h5 { - color: #e0e0e0; -} - -[data-theme="dark"] .people-validation { - border-color: #444444; -} - -[data-theme="dark"] .role-item { - background: #1f1f1f; - border-color: #444444; -} - -[data-theme="dark"] .role-item strong { - color: #e0e0e0; -} - -[data-theme="dark"] .role-item span { - color: #b0b0b0; -} - -/* Mobile adjustments for people tab */ -@media (max-width: 768px) { - .role-item { - flex-direction: column; - gap: 0.25rem; - } - - .role-item strong { - min-width: unset; - } -} - -/* Categories Tab Styles */ -.categories-suggestions { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1.5rem; -} - -.categories-suggestions h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.category-tags { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-bottom: 0.75rem; -} - -.category-tag { - background: white; - border: 1px solid #667eea; - color: #667eea; - padding: 0.4rem 0.8rem; - border-radius: 20px; - font-size: 0.8rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; -} - -.category-tag:hover { - background: #667eea; - color: white; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2); -} - -.categories-info { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.categories-info h5, -.categories-info h6 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.categories-info h6 { - font-size: 0.8rem; - margin-top: 1rem; - margin-bottom: 0.5rem; -} - -.resources-section { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid #e9ecef; -} - -.resource-features { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-top: 0.75rem; -} - -.feature-item { - display: flex; - align-items: flex-start; - gap: 0.5rem; - padding: 0.5rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.feature-item strong { - color: #495057; - font-size: 0.85rem; - font-weight: 600; - min-width: 140px; - flex-shrink: 0; -} - -.feature-item span { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.3; -} - -.quick-actions { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.quick-actions h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.action-buttons { - display: flex; - gap: 0.5rem; - margin-bottom: 0.5rem; -} - -.action-btn { - background: #dc3545; - border: 1px solid #dc3545; - color: white; - padding: 0.5rem 1rem; - border-radius: 6px; - font-size: 0.85rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; -} - -.action-btn:hover { - background: #c82333; - border-color: #bd2130; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2); -} - -/* Theme compatibility for categories */ -[data-theme="dark"] .categories-suggestions, -[data-theme="dark"] .categories-info, -[data-theme="dark"] .quick-actions { - background: #2a2a2a; - border-color: #444444; -} - -[data-theme="dark"] .categories-suggestions h5, -[data-theme="dark"] .categories-info h5, -[data-theme="dark"] .categories-info h6, -[data-theme="dark"] .quick-actions h5 { - color: #e0e0e0; -} - -[data-theme="dark"] .category-tag { - background: #1f1f1f; - border-color: #667eea; - color: #667eea; -} - -[data-theme="dark"] .category-tag:hover { - background: #667eea; - color: white; -} - -[data-theme="dark"] .feature-item { - background: #1f1f1f; - border-color: #444444; -} - -[data-theme="dark"] .feature-item strong { - color: #e0e0e0; -} - -[data-theme="dark"] .feature-item span { - color: #b0b0b0; -} - -[data-theme="dark"] .resources-section { - border-color: #444444; -} - -/* Mobile adjustments for categories tab */ -@media (max-width: 768px) { - .category-tags { - gap: 0.25rem; - } - - .category-tag { - padding: 0.3rem 0.6rem; - font-size: 0.75rem; - } - - .feature-item { - flex-direction: column; - gap: 0.25rem; - } - - .feature-item strong { - min-width: unset; - } - - .action-buttons { - flex-direction: column; - } -} - -/* Location Tab Styles */ -.location-suggestions { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1.5rem; -} - -.location-suggestions h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.location-tags { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-bottom: 0.75rem; -} - -.location-tag { - background: white; - border: 1px solid #28a745; - color: #28a745; - padding: 0.4rem 0.8rem; - border-radius: 20px; - font-size: 0.8rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; -} - -.location-tag:hover { - background: #28a745; - color: white; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2); -} - -.location-info { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.location-info h5, -.location-info h6 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.location-info h6 { - font-size: 0.8rem; - margin-top: 1rem; - margin-bottom: 0.5rem; -} - -.geo-section { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid #e9ecef; -} - -.geo-features { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-top: 0.75rem; -} - -.geo-item { - display: flex; - align-items: flex-start; - gap: 0.5rem; - padding: 0.5rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.geo-item strong { - color: #495057; - font-size: 0.85rem; - font-weight: 600; - min-width: 120px; - flex-shrink: 0; -} - -.geo-item span { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.3; -} - -.location-types { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.location-types h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.type-examples { - display: flex; - flex-direction: column; - gap: 1rem; - margin-bottom: 1rem; -} - -.type-category { - padding: 0.75rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.type-category strong { - display: block; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - margin-bottom: 0.5rem; -} - -.type-category ul { - margin: 0; - padding-left: 1.2rem; - list-style-type: disc; -} - -.type-category li { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.4; - margin-bottom: 0.25rem; - font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; - background: #f8f9fa; - padding: 0.2rem 0.4rem; - border-radius: 3px; -} - -.action-btn.secondary { - background: #6c757d; - border-color: #6c757d; -} - -.action-btn.secondary:hover { - background: #5a6268; - border-color: #545b62; - box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2); -} - -/* Theme compatibility for location */ -[data-theme="dark"] .location-suggestions, -[data-theme="dark"] .location-info, -[data-theme="dark"] .location-types { - background: #2a2a2a; - border-color: #444444; -} - -[data-theme="dark"] .location-suggestions h5, -[data-theme="dark"] .location-info h5, -[data-theme="dark"] .location-info h6, -[data-theme="dark"] .location-types h5 { - color: #e0e0e0; -} - -[data-theme="dark"] .location-tag { - background: #1f1f1f; - border-color: #28a745; - color: #28a745; -} - -[data-theme="dark"] .location-tag:hover { - background: #28a745; - color: white; -} - -[data-theme="dark"] .geo-item, -[data-theme="dark"] .type-category { - background: #1f1f1f; - border-color: #444444; -} - -[data-theme="dark"] .geo-item strong, -[data-theme="dark"] .type-category strong { - color: #e0e0e0; -} - -[data-theme="dark"] .geo-item span { - color: #b0b0b0; -} - -[data-theme="dark"] .type-category li { - color: #b0b0b0; - background: #2a2a2a; -} - -[data-theme="dark"] .geo-section { - border-color: #444444; -} - -/* Mobile adjustments for location tab */ -@media (max-width: 768px) { - .location-tags { - gap: 0.25rem; - } - - .location-tag { - padding: 0.3rem 0.6rem; - font-size: 0.75rem; - } - - .geo-item { - flex-direction: column; - gap: 0.25rem; - } - - .geo-item strong { - min-width: unset; - } - - .type-examples { - gap: 0.75rem; - } - - .type-category { - padding: 0.5rem; - } - - .type-category li { - font-size: 0.8rem; - } -} - -/* Reminders & Attachments Tab Styles */ -.reminder-types { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1.5rem; -} - -.reminder-types h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.alarm-examples { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 0.75rem; - margin-bottom: 0.75rem; -} - -.alarm-type { - padding: 0.75rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; - text-align: center; -} - -.alarm-type strong { - display: block; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - margin-bottom: 0.5rem; -} - -.alarm-type p { - color: #6c757d; - font-size: 0.8rem; - margin: 0; - line-height: 1.3; -} - -.reminder-info { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.reminder-info h5, -.reminder-info h6 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.reminder-info h6 { - font-size: 0.8rem; - margin-top: 1rem; - margin-bottom: 0.5rem; -} - -.attachments-section { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid #e9ecef; -} - -.attachment-features { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-top: 0.75rem; -} - -.attachment-type { - display: flex; - align-items: flex-start; - gap: 0.5rem; - padding: 0.5rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.attachment-type strong { - color: #495057; - font-size: 0.85rem; - font-weight: 600; - min-width: 120px; - flex-shrink: 0; -} - -.attachment-type span { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.3; -} - -.reminder-patterns { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.reminder-patterns h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.pattern-examples { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-bottom: 0.75rem; -} - -.pattern-item { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.pattern-item strong { - color: #495057; - font-size: 0.85rem; - font-weight: 600; - min-width: 100px; - flex-shrink: 0; -} - -.pattern-item span { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.3; -} - -.action-btn.tertiary { - background: #17a2b8; - border-color: #17a2b8; - color: white; -} - -.action-btn.tertiary:hover { - background: #138496; - border-color: #117a8b; - box-shadow: 0 2px 4px rgba(23, 162, 184, 0.2); -} - -.completion-status { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border-radius: 8px; - padding: 1.5rem; - margin-top: 2rem; - text-align: center; -} - -.completion-status h5 { - margin: 0 0 0.75rem 0; - font-size: 1.1rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.completion-status p { - margin: 0 0 1rem 0; - opacity: 0.9; - line-height: 1.5; -} - -.feature-summary { - background: rgba(255, 255, 255, 0.1); - border-radius: 6px; - padding: 1rem; - margin-top: 1rem; -} - -.summary-row { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); -} - -.summary-row:last-child { - border-bottom: none; -} - -.tab-name { - font-weight: 600; - font-size: 0.9rem; -} - -.tab-desc { - font-size: 0.8rem; - opacity: 0.8; - text-align: right; - max-width: 60%; -} - -/* Theme compatibility for reminders */ -[data-theme="dark"] .reminder-types, -[data-theme="dark"] .reminder-info, -[data-theme="dark"] .reminder-patterns { - background: #2a2a2a; - border-color: #444444; -} - -[data-theme="dark"] .reminder-types h5, -[data-theme="dark"] .reminder-info h5, -[data-theme="dark"] .reminder-info h6, -[data-theme="dark"] .reminder-patterns h5 { - color: #e0e0e0; -} - -[data-theme="dark"] .alarm-type, -[data-theme="dark"] .attachment-type, -[data-theme="dark"] .pattern-item { - background: #1f1f1f; - border-color: #444444; -} - -[data-theme="dark"] .alarm-type strong, -[data-theme="dark"] .attachment-type strong, -[data-theme="dark"] .pattern-item strong { - color: #e0e0e0; -} - -[data-theme="dark"] .alarm-type p, -[data-theme="dark"] .attachment-type span, -[data-theme="dark"] .pattern-item span { - color: #b0b0b0; -} - -[data-theme="dark"] .attachments-section { - border-color: #444444; -} - -/* Mobile adjustments for reminders tab */ -@media (max-width: 768px) { - .alarm-examples { - grid-template-columns: 1fr; - gap: 0.5rem; - } - - .alarm-type { - padding: 0.5rem; - } - - .attachment-type, - .pattern-item { - flex-direction: column; - gap: 0.25rem; - align-items: flex-start; - } - - .attachment-type strong, - .pattern-item strong { - min-width: unset; - } - - .summary-row { - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - } - - .tab-desc { - text-align: left; - max-width: 100%; - } - - .completion-status { - padding: 1rem; - } - - .completion-status h5 { - font-size: 1rem; - } -} - -/* Theme Selector Styles */ -.theme-selector { - margin-bottom: 1rem; -} - -.theme-selector-dropdown { - width: 100%; - padding: 0.5rem; - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 6px; - color: white; - font-size: 0.85rem; - cursor: pointer; - transition: all 0.2s ease; -} - -.theme-selector-dropdown:hover { - background: rgba(255, 255, 255, 0.15); - border-color: rgba(255, 255, 255, 0.3); -} - -.theme-selector-dropdown:focus { - outline: none; - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.4); -} - -.theme-selector-dropdown option { - background: #333; - color: white; - padding: 0.5rem; -} - -/* Theme Definitions */ -:root { - /* Default Theme */ - --primary-gradient: linear-gradient(180deg, #667eea 0%, #764ba2 100%); - --primary-bg: #f8f9fa; - --primary-text: #333; - --sidebar-bg: linear-gradient(180deg, #667eea 0%, #764ba2 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - --header-text: white; - --card-bg: white; - --border-color: #e9ecef; - --accent-color: #667eea; - --calendar-bg: white; - --calendar-border: #f0f0f0; - --calendar-day-bg: white; - --calendar-day-hover: #f8f9ff; - --calendar-day-prev-next: #fafafa; - --calendar-day-prev-next-text: #ccc; - --calendar-today-bg: #e3f2fd; - --calendar-today-border: #2196f3; - --calendar-today-text: #1976d2; - --calendar-selected-bg: #e8f5e8; - --calendar-selected-border: #4caf50; - --calendar-selected-text: #2e7d32; - --calendar-has-events-bg: #fff3e0; - --weekday-header-bg: #f8f9fa; - --weekday-header-text: #666; - --time-label-bg: #f8f9fa; - --time-label-text: #666; - --time-label-border: #e9ecef; - --event-colors: #3B82F6, #10B981, #F59E0B, #EF4444, #8B5CF6, #06B6D4, #84CC16, #F97316, #EC4899, #6366F1, #14B8A6, #F3B806, #8B5A2B, #6B7280, #DC2626, #7C3AED; -} - -/* Ocean Theme */ -[data-theme="ocean"] { - --primary-gradient: linear-gradient(180deg, #2196F3 0%, #0277BD 100%); - --primary-bg: #e3f2fd; - --primary-text: #0d47a1; - --sidebar-bg: linear-gradient(180deg, #2196F3 0%, #0277BD 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #2196F3 0%, #0277BD 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #bbdefb; - --accent-color: #2196F3; - --calendar-bg: #ffffff; - --calendar-border: #bbdefb; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #e1f5fe; - --calendar-day-prev-next: #f3f8ff; - --calendar-day-prev-next-text: #90caf9; - --calendar-today-bg: #b3e5fc; - --calendar-today-border: #0277BD; - --calendar-today-text: #01579b; - --calendar-selected-bg: #e0f7fa; - --calendar-selected-border: #00acc1; - --calendar-selected-text: #00695c; - --calendar-has-events-bg: #fff8e1; - --weekday-header-bg: #e3f2fd; - --weekday-header-text: #0d47a1; - --time-label-bg: #e3f2fd; - --time-label-text: #0d47a1; - --time-label-border: #bbdefb; - --event-colors: #2196F3, #03DAC6, #FF9800, #F44336, #9C27B0, #00BCD4, #8BC34A, #FF5722, #E91E63, #3F51B5, #009688, #FFC107, #607D8B, #795548, #E53935, #673AB7; -} - -[data-theme="ocean"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="ocean"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Forest Theme */ -[data-theme="forest"] { - --primary-gradient: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%); - --primary-bg: #e8f5e8; - --primary-text: #1b5e20; - --sidebar-bg: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #c8e6c9; - --accent-color: #4CAF50; - --calendar-bg: #ffffff; - --calendar-border: #c8e6c9; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #f1f8e9; - --calendar-day-prev-next: #f9fbe7; - --calendar-day-prev-next-text: #a5d6a7; - --calendar-today-bg: #c8e6c9; - --calendar-today-border: #2E7D32; - --calendar-today-text: #1b5e20; - --calendar-selected-bg: #e8f5e8; - --calendar-selected-border: #388e3c; - --calendar-selected-text: #2e7d32; - --calendar-has-events-bg: #fff3e0; - --weekday-header-bg: #e8f5e8; - --weekday-header-text: #1b5e20; - --time-label-bg: #e8f5e8; - --time-label-text: #1b5e20; - --time-label-border: #c8e6c9; - --event-colors: #4CAF50, #8BC34A, #FF9800, #FF5722, #9C27B0, #03DAC6, #CDDC39, #FF6F00, #E91E63, #3F51B5, #009688, #FFC107, #795548, #607D8B, #F44336, #673AB7; -} - -[data-theme="forest"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="forest"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Sunset Theme */ -[data-theme="sunset"] { - --primary-gradient: linear-gradient(180deg, #FF9800 0%, #F57C00 100%); - --primary-bg: #fff3e0; - --primary-text: #e65100; - --sidebar-bg: linear-gradient(180deg, #FF9800 0%, #F57C00 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #FF9800 0%, #F57C00 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #ffcc02; - --accent-color: #FF9800; - --calendar-bg: #ffffff; - --calendar-border: #ffe0b2; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #fff8e1; - --calendar-day-prev-next: #fffde7; - --calendar-day-prev-next-text: #ffcc02; - --calendar-today-bg: #ffe0b2; - --calendar-today-border: #F57C00; - --calendar-today-text: #e65100; - --calendar-selected-bg: #fff3e0; - --calendar-selected-border: #ff8f00; - --calendar-selected-text: #ff6f00; - --calendar-has-events-bg: #f3e5f5; - --weekday-header-bg: #fff3e0; - --weekday-header-text: #e65100; - --time-label-bg: #fff3e0; - --time-label-text: #e65100; - --time-label-border: #ffe0b2; - --event-colors: #FF9800, #FF5722, #F44336, #E91E63, #9C27B0, #673AB7, #3F51B5, #2196F3, #03DAC6, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF6F00, #795548; -} - -[data-theme="sunset"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="sunset"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Purple Theme */ -[data-theme="purple"] { - --primary-gradient: linear-gradient(180deg, #9C27B0 0%, #6A1B9A 100%); - --primary-bg: #f3e5f5; - --primary-text: #4a148c; - --sidebar-bg: linear-gradient(180deg, #9C27B0 0%, #6A1B9A 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #9C27B0 0%, #6A1B9A 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #ce93d8; - --accent-color: #9C27B0; - --calendar-bg: #ffffff; - --calendar-border: #ce93d8; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #f8e9fc; - --calendar-day-prev-next: #fce4ec; - --calendar-day-prev-next-text: #ce93d8; - --calendar-today-bg: #e1bee7; - --calendar-today-border: #6A1B9A; - --calendar-today-text: #4a148c; - --calendar-selected-bg: #f3e5f5; - --calendar-selected-border: #8e24aa; - --calendar-selected-text: #6a1b9a; - --calendar-has-events-bg: #fff3e0; - --weekday-header-bg: #f3e5f5; - --weekday-header-text: #4a148c; - --time-label-bg: #f3e5f5; - --time-label-text: #4a148c; - --time-label-border: #ce93d8; - --event-colors: #9C27B0, #673AB7, #3F51B5, #2196F3, #03DAC6, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF9800, #FF5722, #F44336, #E91E63, #795548, #607D8B; -} - -[data-theme="purple"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="purple"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Dark Theme */ -[data-theme="dark"] { - --primary-gradient: linear-gradient(180deg, #424242 0%, #212121 100%); - --primary-bg: #121212; - --primary-text: #ffffff; - --sidebar-bg: linear-gradient(180deg, #424242 0%, #212121 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #424242 0%, #212121 100%); - --header-text: white; - --card-bg: #1e1e1e; - --border-color: #333333; - --accent-color: #666666; - --calendar-bg: #1f1f1f; - --calendar-border: #333333; - --calendar-day-bg: #1f1f1f; - --calendar-day-hover: #2a2a2a; - --calendar-day-prev-next: #1a1a1a; - --calendar-day-prev-next-text: #555; - --calendar-today-bg: #2d2d2d; - --calendar-today-border: #bb86fc; - --calendar-today-text: #bb86fc; - --calendar-selected-bg: #2a2a2a; - --calendar-selected-border: #bb86fc; - --calendar-selected-text: #bb86fc; - --calendar-has-events-bg: #272727; - --weekday-header-bg: #1a1a1a; - --weekday-header-text: #e0e0e0; - --time-label-bg: #1a1a1a; - --time-label-text: #e0e0e0; - --time-label-border: #333333; - --event-colors: #bb86fc, #03dac6, #cf6679, #ff9800, #4caf50, #2196f3, #9c27b0, #f44336, #795548, #607d8b, #e91e63, #3f51b5, #009688, #8bc34a, #ffc107, #ff5722; -} - -[data-theme="dark"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="dark"] .app-sidebar { - background: var(--sidebar-bg); -} - -[data-theme="dark"] .app-main { - background-color: var(--primary-bg); -} - -[data-theme="dark"] .calendar-day { - background: var(--card-bg); - border-color: var(--border-color); - color: var(--primary-text); -} - -/* Rose Theme */ -[data-theme="rose"] { - --primary-gradient: linear-gradient(180deg, #E91E63 0%, #AD1457 100%); - --primary-bg: #fce4ec; - --primary-text: #880e4f; - --sidebar-bg: linear-gradient(180deg, #E91E63 0%, #AD1457 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #E91E63 0%, #AD1457 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #f8bbd9; - --accent-color: #E91E63; - --calendar-bg: #ffffff; - --calendar-border: #f8bbd9; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #fdf2f8; - --calendar-day-prev-next: #fef7ff; - --calendar-day-prev-next-text: #f8bbd9; - --calendar-today-bg: #f48fb1; - --calendar-today-border: #AD1457; - --calendar-today-text: #880e4f; - --calendar-selected-bg: #fce4ec; - --calendar-selected-border: #c2185b; - --calendar-selected-text: #ad1457; - --calendar-has-events-bg: #fff3e0; - --weekday-header-bg: #fce4ec; - --weekday-header-text: #880e4f; - --time-label-bg: #fce4ec; - --time-label-text: #880e4f; - --time-label-border: #f8bbd9; - --event-colors: #E91E63, #9C27B0, #673AB7, #3F51B5, #2196F3, #03DAC6, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF9800, #FF5722, #F44336, #795548, #607D8B; -} - -[data-theme="rose"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="rose"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Mint Theme */ -[data-theme="mint"] { - --primary-gradient: linear-gradient(180deg, #26A69A 0%, #00695C 100%); - --primary-bg: #e0f2f1; - --primary-text: #004d40; - --sidebar-bg: linear-gradient(180deg, #26A69A 0%, #00695C 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #26A69A 0%, #00695C 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #b2dfdb; - --accent-color: #26A69A; - --calendar-bg: #ffffff; - --calendar-border: #b2dfdb; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #f0fdfc; - --calendar-day-prev-next: #f7ffff; - --calendar-day-prev-next-text: #b2dfdb; - --calendar-today-bg: #b2dfdb; - --calendar-today-border: #00695C; - --calendar-today-text: #004d40; - --calendar-selected-bg: #e0f2f1; - --calendar-selected-border: #00897b; - --calendar-selected-text: #00695c; - --calendar-has-events-bg: #fff3e0; - --weekday-header-bg: #e0f2f1; - --weekday-header-text: #004d40; - --time-label-bg: #e0f2f1; - --time-label-text: #004d40; - --time-label-border: #b2dfdb; - --event-colors: #26A69A, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF9800, #FF5722, #F44336, #E91E63, #9C27B0, #673AB7, #3F51B5, #2196F3, #795548, #607D8B; -} - -[data-theme="mint"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="mint"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Recurrence Options Styling */ -.recurrence-options { - margin-top: 1.5rem; - padding: 1rem; - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; -} - -.interval-input { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.interval-input input { - width: 80px; - flex-shrink: 0; -} - -.interval-unit { - color: #6c757d; - font-size: 0.9rem; -} - -.end-options { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.end-option { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.end-option .radio-label { - display: flex; - align-items: center; - gap: 0.25rem; - margin-right: 0.5rem; - white-space: nowrap; - cursor: pointer; -} - -.end-option input[type="date"], -.end-option input[type="number"] { - width: 120px; -} - -.count-input { - width: 80px !important; -} - -.count-unit { - color: #6c757d; - font-size: 0.9rem; -} - -.monthly-options { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.monthly-option { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.monthly-option .radio-label { - display: flex; - align-items: center; - gap: 0.25rem; - margin-right: 0.5rem; - white-space: nowrap; - cursor: pointer; -} - -.day-input { - width: 80px !important; -} - -.yearly-months { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 0.5rem; - margin-top: 0.5rem; -} - -.month-checkbox { - display: flex; - align-items: center; - gap: 0.25rem; - padding: 0.25rem 0.5rem; - border: 1px solid #e9ecef; - border-radius: 4px; - cursor: pointer; - transition: all 0.2s ease; -} - -.month-checkbox:hover { - background-color: #f8f9fa; - border-color: #ced4da; -} - -.month-checkbox input[type="checkbox"] { - width: auto !important; - margin: 0 !important; -} - -.month-label { - font-size: 0.9rem; - user-select: none; -} - -/* Radio button styling */ -.radio-label input[type="radio"] { - width: auto !important; - margin: 0 !important; - margin-right: 0.25rem !important; -} - -/* Mobile responsive adjustments */ -@media (max-width: 768px) { - .end-options { - gap: 0.5rem; - } - - .end-option { - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - } - - .monthly-option { - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - } - - .yearly-months { - grid-template-columns: repeat(2, 1fr); - } -} From c6c7b38bef7337162ef5ef9ab4e246d6e9b43de7 Mon Sep 17 00:00:00 2001 From: Connor Johnstone Date: Thu, 11 Sep 2025 19:26:53 -0400 Subject: [PATCH 3/8] Implement dynamic base unit calculation for print preview scaling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add dynamic height calculation system based on selected hour range and time increment - Replace hardcoded CSS heights with CSS variables (--print-base-unit, --print-pixels-per-hour) - Update WeekView component with print mode support and dynamic event positioning - Optimize week header for print: reduced to 50px height with smaller fonts - Account for all borders and spacing in calculation (660px available content height) - Remove debug styling (blue borders, yellow backgrounds) - Ensure time slots, time labels, and events scale together proportionally - Perfect fit within 720px content area regardless of hour selection 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- frontend/print-preview.css | 75 ++++++++++--------- .../src/components/print_preview_modal.rs | 29 ++++++- frontend/src/components/week_view.rs | 23 ++++-- 3 files changed, 83 insertions(+), 44 deletions(-) diff --git a/frontend/print-preview.css b/frontend/print-preview.css index 59932a9..2a3e6a1 100644 --- a/frontend/print-preview.css +++ b/frontend/print-preview.css @@ -315,27 +315,51 @@ overflow: visible !important; } -/* Scale time slots appropriately in preview */ +/* Dynamic time slot heights based on calculated base unit */ .print-preview-paper .time-slot { - height: 60px !important; /* Default for 30-minute mode: 2 × 30px = 60px */ - min-height: 60px !important; - max-height: 60px !important; + height: calc(var(--print-pixels-per-hour) * 1px) !important; + min-height: calc(var(--print-pixels-per-hour) * 1px) !important; + max-height: calc(var(--print-pixels-per-hour) * 1px) !important; border-bottom: 1px solid #ddd !important; overflow: visible !important; } -/* 15-minute mode (quarter-mode) gets more height */ -.print-preview-paper .time-slot.quarter-mode { - height: 120px !important; /* 15-minute mode: 4 slots × 30px = 120px */ - min-height: 120px !important; - max-height: 120px !important; +/* Dynamic time label heights - should match time slots */ +.print-preview-paper .time-label { + height: calc(var(--print-pixels-per-hour) * 1px) !important; + min-height: calc(var(--print-pixels-per-hour) * 1px) !important; + max-height: calc(var(--print-pixels-per-hour) * 1px) !important; } -/* Sub-hour time slot styling */ +/* Fixed week header height for print - smaller to maximize content */ +.print-preview-paper .week-day-header { + height: 50px !important; + min-height: 50px !important; + max-height: 50px !important; + padding: 0.25rem !important; /* Reduce padding to fit content */ +} + +.print-preview-paper .weekday-name { + font-size: 0.75rem !important; /* Slightly smaller font */ + margin-bottom: 0.125rem !important; +} + +.print-preview-paper .week-day-header .day-number { + font-size: 1.25rem !important; /* Slightly smaller day number */ +} + +/* 15-minute and 30-minute modes use the same calculated height */ +.print-preview-paper .time-slot.quarter-mode { + height: calc(var(--print-pixels-per-hour) * 1px) !important; + min-height: calc(var(--print-pixels-per-hour) * 1px) !important; + max-height: calc(var(--print-pixels-per-hour) * 1px) !important; +} + +/* Sub-hour time slot styling - use dynamic base unit */ .print-preview-paper .time-slot-half { - height: 30px !important; - min-height: 30px !important; - max-height: 30px !important; + height: calc(var(--print-base-unit) * 1px) !important; + min-height: calc(var(--print-base-unit) * 1px) !important; + max-height: calc(var(--print-base-unit) * 1px) !important; border-bottom: 1px dotted #ddd !important; overflow: visible !important; } @@ -345,9 +369,9 @@ } .print-preview-paper .time-slot-quarter { - height: 30px !important; - min-height: 30px !important; - max-height: 30px !important; + height: calc(var(--print-base-unit) * 1px) !important; + min-height: calc(var(--print-base-unit) * 1px) !important; + max-height: calc(var(--print-base-unit) * 1px) !important; border-bottom: 1px dotted #eee !important; overflow: visible !important; } @@ -356,23 +380,7 @@ border-bottom: none !important; } -/* Debug: Test if data attributes are working at all */ -.print-preview-paper .time-slot[data-hour] { - border-left: 3px solid blue !important; -} - -.print-preview-paper .time-label[data-hour] { - background-color: yellow !important; -} - -/* Test specific hour targeting */ -.print-preview-paper .time-slot[data-hour="0"] { - border-left: 3px solid red !important; -} - -.print-preview-paper .time-label[data-hour="0"] { - background-color: red !important; -} +/* Debug styles removed */ /* Use data attributes for precise hour targeting */ /* Hide hours before start hour - both time slots AND time labels */ @@ -1089,7 +1097,6 @@ .print-preview-paper[data-start-hour][data-end-hour] .time-grid, .print-preview-paper[data-start-hour][data-end-hour] .week-day-column { min-height: 400px !important; - border: 2px solid red !important; /* Debug border to see if this rule applies */ } /* Height adjustments based on visible hours = end_hour - start_hour */ diff --git a/frontend/src/components/print_preview_modal.rs b/frontend/src/components/print_preview_modal.rs index 23c921f..64b8dba 100644 --- a/frontend/src/components/print_preview_modal.rs +++ b/frontend/src/components/print_preview_modal.rs @@ -122,6 +122,24 @@ pub fn PrintPreviewModal(props: &PrintPreviewModalProps) -> Html { } }; + // Calculate dynamic base unit for print preview + let calculate_print_dimensions = |start_hour: u32, end_hour: u32, time_increment: u32| -> (f64, f64, f64) { + let visible_hours = (end_hour - start_hour) as f64; + let slots_per_hour = if time_increment == 15 { 4.0 } else { 2.0 }; + let header_height = 50.0; // Fixed week header height in print preview + let header_border = 2.0; // Week header bottom border (2px solid) + let container_spacing = 8.0; // Additional container spacing/margins + let total_overhead = header_height + header_border + container_spacing; + let available_height = 720.0 - total_overhead; // Available for time content + let base_unit = available_height / (visible_hours * slots_per_hour); + let pixels_per_hour = base_unit * slots_per_hour; + + (base_unit, pixels_per_hour, available_height) + }; + + // Calculate print dimensions for the current hour range + let (base_unit, pixels_per_hour, _available_height) = calculate_print_dimensions(*start_hour, *end_hour, props.time_increment); + html! {
@@ -200,9 +218,12 @@ pub fn PrintPreviewModal(props: &PrintPreviewModalProps) -> Html { }) }}>
+ data-start-hour={start_hour.to_string()} + data-end-hour={end_hour.to_string()} + style={format!( + "--print-start-hour: {}; --print-end-hour: {}; --print-base-unit: {:.2}; --print-pixels-per-hour: {:.2}; transform: scale({}); transform-origin: top center;", + *start_hour, *end_hour, base_unit, pixels_per_hour, *zoom_level + )}>
{ match props.view_mode { @@ -216,6 +237,8 @@ pub fn PrintPreviewModal(props: &PrintPreviewModalProps) -> Html { user_info={props.user_info.clone()} external_calendars={props.external_calendars.clone()} time_increment={props.time_increment} + print_mode={true} + print_pixels_per_hour={Some(pixels_per_hour)} /> }, ViewMode::Month => html! { diff --git a/frontend/src/components/week_view.rs b/frontend/src/components/week_view.rs index ff58762..1dfd9db 100644 --- a/frontend/src/components/week_view.rs +++ b/frontend/src/components/week_view.rs @@ -42,6 +42,10 @@ pub struct WeekViewProps { pub context_menus_open: bool, #[prop_or_default] pub time_increment: u32, + #[prop_or_default] + pub print_mode: bool, + #[prop_or_default] + pub print_pixels_per_hour: Option, } #[derive(Clone, PartialEq)] @@ -726,7 +730,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
{ day_events.iter().enumerate().filter_map(|(event_idx, event)| { - let (start_pixels, duration_pixels, is_all_day) = calculate_event_position(event, *date, props.time_increment); + let (start_pixels, duration_pixels, is_all_day) = calculate_event_position(event, *date, props.time_increment, props.print_pixels_per_hour); // Skip all-day events (they're rendered in the header) if is_all_day { @@ -755,6 +759,7 @@ pub fn week_view(props: &WeekViewProps) -> Html { let event_for_drag = event.clone(); let date_for_drag = *date; let time_increment = props.time_increment; + let print_pixels_per_hour = props.print_pixels_per_hour; Callback::from(move |e: MouseEvent| { e.stop_propagation(); // Prevent drag-to-create from starting on event clicks @@ -768,7 +773,7 @@ pub fn week_view(props: &WeekViewProps) -> Html { let click_y_relative = if click_y_relative > 0.0 { click_y_relative } else { e.offset_y() as f64 }; // Get event's current position in day column coordinates - let (event_start_pixels, _, _) = calculate_event_position(&event_for_drag, date_for_drag, time_increment); + let (event_start_pixels, _, _) = calculate_event_position(&event_for_drag, date_for_drag, time_increment, print_pixels_per_hour); let event_start_pixels = event_start_pixels as f64; // Convert click position to day column coordinates @@ -1054,7 +1059,7 @@ pub fn week_view(props: &WeekViewProps) -> Html { }; // Calculate positions for the preview - let (original_start_pixels, _, _) = calculate_event_position(event, drag.start_date, props.time_increment); + let (original_start_pixels, _, _) = calculate_event_position(event, drag.start_date, props.time_increment, props.print_pixels_per_hour); let original_duration = original_end.signed_duration_since(event.dtstart.with_timezone(&chrono::Local).naive_local()); let original_end_pixels = original_start_pixels + (original_duration.num_minutes() as f32); @@ -1084,7 +1089,7 @@ pub fn week_view(props: &WeekViewProps) -> Html { let original_start = event.dtstart.with_timezone(&chrono::Local).naive_local(); // Calculate positions for the preview - let (original_start_pixels, _, _) = calculate_event_position(event, drag.start_date, props.time_increment); + let (original_start_pixels, _, _) = calculate_event_position(event, drag.start_date, props.time_increment, props.print_pixels_per_hour); let new_end_pixels = drag.current_y; let new_height = (new_end_pixels - original_start_pixels as f64).max(20.0); @@ -1218,7 +1223,7 @@ fn pixels_to_time(pixels: f64, time_increment: u32) -> NaiveTime { NaiveTime::from_hms_opt(hours, minutes, 0).unwrap_or(NaiveTime::from_hms_opt(0, 0, 0).unwrap()) } -fn calculate_event_position(event: &VEvent, date: NaiveDate, time_increment: u32) -> (f32, f32, bool) { +fn calculate_event_position(event: &VEvent, date: NaiveDate, time_increment: u32, print_pixels_per_hour: Option) -> (f32, f32, bool) { // Convert UTC times to local time for display let local_start = event.dtstart.with_timezone(&Local); let event_date = local_start.date_naive(); @@ -1241,7 +1246,11 @@ fn calculate_event_position(event: &VEvent, date: NaiveDate, time_increment: u32 // Calculate start position in pixels from midnight let start_hour = local_start.hour() as f32; let start_minute = local_start.minute() as f32; - let pixels_per_hour = if time_increment == 15 { 120.0 } else { 60.0 }; + let pixels_per_hour = if let Some(print_pph) = print_pixels_per_hour { + print_pph as f32 // Use print mode calculation + } else { + if time_increment == 15 { 120.0 } else { 60.0 } // Default values + }; let start_pixels = (start_hour + start_minute / 60.0) * pixels_per_hour; // Calculate duration and height @@ -1304,7 +1313,7 @@ fn calculate_event_layout(events: &[VEvent], date: NaiveDate, time_increment: u3 return None; } - let (_, _, _) = calculate_event_position(event, date, time_increment); + let (_, _, _) = calculate_event_position(event, date, time_increment, None); let local_start = event.dtstart.with_timezone(&Local); let event_date = local_start.date_naive(); if event_date == date || From 4fdaa9931d54ad4d0b43dd6d04f961075c7f331e Mon Sep 17 00:00:00 2001 From: Connor Johnstone Date: Thu, 11 Sep 2025 20:38:56 -0400 Subject: [PATCH 4/8] Fix print preview event positioning to respond to hour range changes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add print_start_hour parameter to calculate_event_position function - Implement proper hour offset calculation for events in print mode - Remove CSS transform hacks for event positioning - Use dynamic pixels_per_hour for proper scaling with hour ranges - Increase modal max-width to 1600px for better visibility - Events now correctly reposition when start/end hours change 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- frontend/print-preview.css | 56 +------------------ .../src/components/print_preview_modal.rs | 2 + frontend/src/components/week_view.rs | 39 ++++++++----- 3 files changed, 28 insertions(+), 69 deletions(-) diff --git a/frontend/print-preview.css b/frontend/print-preview.css index 2a3e6a1..c360475 100644 --- a/frontend/print-preview.css +++ b/frontend/print-preview.css @@ -5,7 +5,7 @@ .print-preview-modal { width: 90vw; - max-width: 1200px; + max-width: 1600px; height: auto; /* Let modal size itself based on content */ max-height: 90vh; /* But don't exceed viewport */ margin: 5vh auto; @@ -1021,60 +1021,6 @@ /* End hour 24 (midnight next day) hides no hours since it includes the full day */ .print-preview-paper[data-end-hour="24"] { /* Shows all hours - no additional hiding needed */ } -/* Event positioning adjustments - shift events up when start hours are hidden */ -/* Each hidden hour = 60px in 30-min mode, 120px in 15-min mode */ - -/* Reposition events to align with visible time labels */ -/* 30-minute mode: Each hidden hour = 60px to shift up */ -.print-preview-paper[data-start-hour="1"] .week-event { transform: translateY(-60px); } -.print-preview-paper[data-start-hour="2"] .week-event { transform: translateY(-120px); } -.print-preview-paper[data-start-hour="3"] .week-event { transform: translateY(-180px); } -.print-preview-paper[data-start-hour="4"] .week-event { transform: translateY(-240px); } -.print-preview-paper[data-start-hour="5"] .week-event { transform: translateY(-300px); } -.print-preview-paper[data-start-hour="6"] .week-event { transform: translateY(-360px); } -.print-preview-paper[data-start-hour="7"] .week-event { transform: translateY(-420px); } -.print-preview-paper[data-start-hour="8"] .week-event { transform: translateY(-480px); } -.print-preview-paper[data-start-hour="9"] .week-event { transform: translateY(-540px); } -.print-preview-paper[data-start-hour="10"] .week-event { transform: translateY(-600px); } -.print-preview-paper[data-start-hour="11"] .week-event { transform: translateY(-660px); } -.print-preview-paper[data-start-hour="12"] .week-event { transform: translateY(-720px); } -.print-preview-paper[data-start-hour="13"] .week-event { transform: translateY(-780px); } -.print-preview-paper[data-start-hour="14"] .week-event { transform: translateY(-840px); } -.print-preview-paper[data-start-hour="15"] .week-event { transform: translateY(-900px); } -.print-preview-paper[data-start-hour="16"] .week-event { transform: translateY(-960px); } -.print-preview-paper[data-start-hour="17"] .week-event { transform: translateY(-1020px); } -.print-preview-paper[data-start-hour="18"] .week-event { transform: translateY(-1080px); } -.print-preview-paper[data-start-hour="19"] .week-event { transform: translateY(-1140px); } -.print-preview-paper[data-start-hour="20"] .week-event { transform: translateY(-1200px); } -.print-preview-paper[data-start-hour="21"] .week-event { transform: translateY(-1260px); } -.print-preview-paper[data-start-hour="22"] .week-event { transform: translateY(-1320px); } -.print-preview-paper[data-start-hour="23"] .week-event { transform: translateY(-1380px); } - -/* 15-minute mode: Each hidden hour = 120px to shift up */ -.print-preview-paper[data-start-hour="1"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-120px); } -.print-preview-paper[data-start-hour="2"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-240px); } -.print-preview-paper[data-start-hour="3"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-360px); } -.print-preview-paper[data-start-hour="4"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-480px); } -.print-preview-paper[data-start-hour="5"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-600px); } -.print-preview-paper[data-start-hour="6"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-720px); } -.print-preview-paper[data-start-hour="7"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-840px); } -.print-preview-paper[data-start-hour="8"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-960px); } -.print-preview-paper[data-start-hour="9"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1080px); } -.print-preview-paper[data-start-hour="10"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1200px); } -.print-preview-paper[data-start-hour="11"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1320px); } -.print-preview-paper[data-start-hour="12"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1440px); } -.print-preview-paper[data-start-hour="13"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1560px); } -.print-preview-paper[data-start-hour="14"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1680px); } -.print-preview-paper[data-start-hour="15"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1800px); } -.print-preview-paper[data-start-hour="16"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-1920px); } -.print-preview-paper[data-start-hour="17"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2040px); } -.print-preview-paper[data-start-hour="18"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2160px); } -.print-preview-paper[data-start-hour="19"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2280px); } -.print-preview-paper[data-start-hour="20"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2400px); } -.print-preview-paper[data-start-hour="21"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2520px); } -.print-preview-paper[data-start-hour="22"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2640px); } -.print-preview-paper[data-start-hour="23"]:has(.time-slot.quarter-mode) .week-event { transform: translateY(-2760px); } - /* Hide events that are completely outside the visible time range */ /* Clip events outside the visible hour range using overflow: hidden */ diff --git a/frontend/src/components/print_preview_modal.rs b/frontend/src/components/print_preview_modal.rs index 64b8dba..7ccd413 100644 --- a/frontend/src/components/print_preview_modal.rs +++ b/frontend/src/components/print_preview_modal.rs @@ -139,6 +139,7 @@ pub fn PrintPreviewModal(props: &PrintPreviewModalProps) -> Html { // Calculate print dimensions for the current hour range let (base_unit, pixels_per_hour, _available_height) = calculate_print_dimensions(*start_hour, *end_hour, props.time_increment); + html! {
@@ -239,6 +240,7 @@ pub fn PrintPreviewModal(props: &PrintPreviewModalProps) -> Html { time_increment={props.time_increment} print_mode={true} print_pixels_per_hour={Some(pixels_per_hour)} + print_start_hour={Some(*start_hour)} /> }, ViewMode::Month => html! { diff --git a/frontend/src/components/week_view.rs b/frontend/src/components/week_view.rs index 1dfd9db..3bb1ad4 100644 --- a/frontend/src/components/week_view.rs +++ b/frontend/src/components/week_view.rs @@ -46,6 +46,8 @@ pub struct WeekViewProps { pub print_mode: bool, #[prop_or_default] pub print_pixels_per_hour: Option, + #[prop_or_default] + pub print_start_hour: Option, } #[derive(Clone, PartialEq)] @@ -730,7 +732,7 @@ pub fn week_view(props: &WeekViewProps) -> Html {
{ day_events.iter().enumerate().filter_map(|(event_idx, event)| { - let (start_pixels, duration_pixels, is_all_day) = calculate_event_position(event, *date, props.time_increment, props.print_pixels_per_hour); + let (start_pixels, duration_pixels, is_all_day) = calculate_event_position(event, *date, props.time_increment, props.print_pixels_per_hour, props.print_start_hour); // Skip all-day events (they're rendered in the header) if is_all_day { @@ -760,6 +762,7 @@ pub fn week_view(props: &WeekViewProps) -> Html { let date_for_drag = *date; let time_increment = props.time_increment; let print_pixels_per_hour = props.print_pixels_per_hour; + let print_start_hour = props.print_start_hour; Callback::from(move |e: MouseEvent| { e.stop_propagation(); // Prevent drag-to-create from starting on event clicks @@ -773,7 +776,7 @@ pub fn week_view(props: &WeekViewProps) -> Html { let click_y_relative = if click_y_relative > 0.0 { click_y_relative } else { e.offset_y() as f64 }; // Get event's current position in day column coordinates - let (event_start_pixels, _, _) = calculate_event_position(&event_for_drag, date_for_drag, time_increment, print_pixels_per_hour); + let (event_start_pixels, _, _) = calculate_event_position(&event_for_drag, date_for_drag, time_increment, print_pixels_per_hour, print_start_hour); let event_start_pixels = event_start_pixels as f64; // Convert click position to day column coordinates @@ -1059,7 +1062,7 @@ pub fn week_view(props: &WeekViewProps) -> Html { }; // Calculate positions for the preview - let (original_start_pixels, _, _) = calculate_event_position(event, drag.start_date, props.time_increment, props.print_pixels_per_hour); + let (original_start_pixels, _, _) = calculate_event_position(event, drag.start_date, props.time_increment, props.print_pixels_per_hour, props.print_start_hour); let original_duration = original_end.signed_duration_since(event.dtstart.with_timezone(&chrono::Local).naive_local()); let original_end_pixels = original_start_pixels + (original_duration.num_minutes() as f32); @@ -1089,7 +1092,7 @@ pub fn week_view(props: &WeekViewProps) -> Html { let original_start = event.dtstart.with_timezone(&chrono::Local).naive_local(); // Calculate positions for the preview - let (original_start_pixels, _, _) = calculate_event_position(event, drag.start_date, props.time_increment, props.print_pixels_per_hour); + let (original_start_pixels, _, _) = calculate_event_position(event, drag.start_date, props.time_increment, props.print_pixels_per_hour, props.print_start_hour); let new_end_pixels = drag.current_y; let new_height = (new_end_pixels - original_start_pixels as f64).max(20.0); @@ -1223,7 +1226,7 @@ fn pixels_to_time(pixels: f64, time_increment: u32) -> NaiveTime { NaiveTime::from_hms_opt(hours, minutes, 0).unwrap_or(NaiveTime::from_hms_opt(0, 0, 0).unwrap()) } -fn calculate_event_position(event: &VEvent, date: NaiveDate, time_increment: u32, print_pixels_per_hour: Option) -> (f32, f32, bool) { +fn calculate_event_position(event: &VEvent, date: NaiveDate, time_increment: u32, print_pixels_per_hour: Option, print_start_hour: Option) -> (f32, f32, bool) { // Convert UTC times to local time for display let local_start = event.dtstart.with_timezone(&Local); let event_date = local_start.date_naive(); @@ -1243,15 +1246,23 @@ fn calculate_event_position(event: &VEvent, date: NaiveDate, time_increment: u32 return (0.0, 30.0, true); // Position at top, 30px height, is_all_day = true } - // Calculate start position in pixels from midnight + // Calculate start position in pixels let start_hour = local_start.hour() as f32; let start_minute = local_start.minute() as f32; let pixels_per_hour = if let Some(print_pph) = print_pixels_per_hour { - print_pph as f32 // Use print mode calculation + print_pph as f32 // Use the dynamic print mode calculation } else { if time_increment == 15 { 120.0 } else { 60.0 } // Default values }; - let start_pixels = (start_hour + start_minute / 60.0) * pixels_per_hour; + + // In print mode, offset by the start hour to show relative position within visible range + let hour_offset = if let Some(print_start) = print_start_hour { + print_start as f32 + } else { + 0.0 // No offset for normal view (starts at midnight) + }; + + let start_pixels = ((start_hour + start_minute / 60.0) - hour_offset) * pixels_per_hour; // Calculate duration and height let duration_pixels = if let Some(end) = event.dtend { @@ -1260,19 +1271,19 @@ fn calculate_event_position(event: &VEvent, date: NaiveDate, time_increment: u32 // Handle events that span multiple days by capping at midnight if end_date > date { - // Event continues past midnight, cap at 24:00 - let max_pixels = 24.0 * pixels_per_hour; - max_pixels - start_pixels + // Event continues past midnight, cap at end of visible range + let max_hour = if let Some(_print_start) = print_start_hour { 24.0 } else { 24.0 }; + let max_pixels = (max_hour - hour_offset) * pixels_per_hour; + (max_pixels - start_pixels).max(20.0) } else { let end_hour = local_end.hour() as f32; let end_minute = local_end.minute() as f32; - let end_pixels = (end_hour + end_minute / 60.0) * pixels_per_hour; + let end_pixels = ((end_hour + end_minute / 60.0) - hour_offset) * pixels_per_hour; (end_pixels - start_pixels).max(20.0) // Minimum 20px height } } else { pixels_per_hour // Default 1 hour if no end time }; - (start_pixels, duration_pixels, false) // is_all_day = false } @@ -1313,7 +1324,7 @@ fn calculate_event_layout(events: &[VEvent], date: NaiveDate, time_increment: u3 return None; } - let (_, _, _) = calculate_event_position(event, date, time_increment, None); + let (_, _, _) = calculate_event_position(event, date, time_increment, None, None); let local_start = event.dtstart.with_timezone(&Local); let event_date = local_start.date_naive(); if event_date == date || From a297d38276b806e2f9c1d9b372e95875fa191751 Mon Sep 17 00:00:00 2001 From: Connor Johnstone Date: Fri, 12 Sep 2025 10:59:42 -0400 Subject: [PATCH 5/8] Implement selective print preview content printing with dynamic restoration MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Replace page body with only .print-preview-content div during printing - Use visibilitychange and focus events to restore original content when print dialog closes - Add 100ms delay before print dialog to show content replacement briefly - Remove debug logging for clean production code - Ensure print output matches preview exactly by sending only preview content to system print dialog 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- frontend/print.css | 776 +++++++++++------- .../src/components/print_preview_modal.rs | 180 +++- 2 files changed, 616 insertions(+), 340 deletions(-) diff --git a/frontend/print.css b/frontend/print.css index 37d29b3..cd0c272 100644 --- a/frontend/print.css +++ b/frontend/print.css @@ -1,302 +1,474 @@ -/* Print-specific styles for calendar printing */ -@media print { - /* Hide UI elements that shouldn't be printed */ - .app-sidebar, - .current-time-indicator-container, - .current-time-indicator, - .print-button, - .nav-button, - .today-button, - .time-increment-button, - .modal-backdrop, - .create-event-modal, - .event-modal, - .calendar-management-modal, - .context-menu { - display: none !important; - } - - /* Remove today highlighting from calendar elements */ - .calendar-day.today, - .week-day-header.today, - .week-day-column.today { - background-color: transparent !important; - border-color: var(--border-color) !important; - color: var(--text-color) !important; - } - - /* Remove today-specific styling from day numbers */ - .calendar-day.today .day-number { - background-color: transparent !important; - color: var(--text-color) !important; - font-weight: normal !important; - } - - /* Remove today indicator from week day headers */ - .week-day-header.today .weekday-name { - color: var(--text-color) !important; - font-weight: normal !important; - } - - /* Page setup */ - @page { - size: letter landscape; - margin: 0.5in; - } - - /* Make app and main container fill full page width */ - .app, - .app-main, - .calendar-view { - width: 100% !important; - max-width: none !important; - margin: 0 !important; - padding: 0 !important; - display: block !important; - } - - /* Remove any flexbox constraints that might limit width */ - .app { - display: block !important; - } - - .app-main { - margin-left: 0 !important; /* Remove sidebar margin */ - width: 100% !important; - max-width: none !important; - } - - /* Ensure calendar uses full available width */ - .calendar-container, - .calendar { - width: 100% !important; - max-width: none !important; - margin: 0 !important; - padding: 0 !important; - } - - /* Adjust calendar header for printing */ - .calendar-header { - margin-bottom: 0.5rem !important; - padding-bottom: 0.5rem !important; - border-bottom: 1px solid var(--border-color) !important; - } - - /* Ensure text is readable in print */ - body, html { - color: black !important; - background: white !important; - } - - /* Make sure event text is readable */ - .week-event, - .calendar-event, - .month-event { - border: 1px solid #333 !important; - color: black !important; - font-size: 0.8rem !important; - line-height: 1.2 !important; - } - - /* Ensure month view events are visible */ - .calendar-day .event-list .event-item { - background-color: #f5f5f5 !important; - border: 1px solid #333 !important; - color: black !important; - } - - /* Week view specific adjustments - force full day view */ - .week-view-container { - width: 100% !important; - height: auto !important; - overflow: visible !important; - } - - .week-day-column { - border-right: 1px solid #333 !important; - height: auto !important; - overflow: visible !important; - } - - .time-column { - border-right: 2px solid #333 !important; - width: 60px !important; - min-width: 60px !important; - height: auto !important; - overflow: visible !important; - } - - /* Default time slot sizes - will be adjusted by hour range */ - .time-slot { - height: 20px !important; - min-height: 20px !important; - max-height: 20px !important; - border-bottom: 1px solid #ddd !important; - overflow: visible !important; - } - - /* Time slot quarters for 15-minute mode */ - .time-slot.quarter-mode .time-slot-quarter { - height: 5px !important; - min-height: 5px !important; - max-height: 5px !important; - border-bottom: 1px solid #eee !important; - } - - /* Time slot halves for 30-minute mode */ - .time-slot .time-slot-half { - height: 10px !important; - min-height: 10px !important; - max-height: 10px !important; - border-bottom: 1px solid #eee !important; - } - - /* Make hour boundaries more visible */ - .time-slot:nth-child(4n) { - border-bottom: 1px solid #333 !important; - height: 20px !important; - } - - /* Dynamic hour range hiding for print mode */ - body[data-print-mode="true"][data-print-start-hour="1"] .week-view .time-slot:nth-child(1) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="2"] .week-view .time-slot:nth-child(-n+2) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="3"] .week-view .time-slot:nth-child(-n+3) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="4"] .week-view .time-slot:nth-child(-n+4) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="5"] .week-view .time-slot:nth-child(-n+5) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="6"] .week-view .time-slot:nth-child(-n+6) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="7"] .week-view .time-slot:nth-child(-n+7) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="8"] .week-view .time-slot:nth-child(-n+8) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="9"] .week-view .time-slot:nth-child(-n+9) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="10"] .week-view .time-slot:nth-child(-n+10) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="11"] .week-view .time-slot:nth-child(-n+11) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="12"] .week-view .time-slot:nth-child(-n+12) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="13"] .week-view .time-slot:nth-child(-n+13) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="14"] .week-view .time-slot:nth-child(-n+14) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="15"] .week-view .time-slot:nth-child(-n+15) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="16"] .week-view .time-slot:nth-child(-n+16) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="17"] .week-view .time-slot:nth-child(-n+17) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="18"] .week-view .time-slot:nth-child(-n+18) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="19"] .week-view .time-slot:nth-child(-n+19) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="20"] .week-view .time-slot:nth-child(-n+20) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="21"] .week-view .time-slot:nth-child(-n+21) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="22"] .week-view .time-slot:nth-child(-n+22) { display: none !important; } - body[data-print-mode="true"][data-print-start-hour="23"] .week-view .time-slot:nth-child(-n+23) { display: none !important; } - - /* Hide hours after end-hour */ - body[data-print-mode="true"][data-print-end-hour="1"] .week-view .time-slot:nth-child(n+2) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="2"] .week-view .time-slot:nth-child(n+3) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="3"] .week-view .time-slot:nth-child(n+4) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="4"] .week-view .time-slot:nth-child(n+5) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="5"] .week-view .time-slot:nth-child(n+6) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="6"] .week-view .time-slot:nth-child(n+7) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="7"] .week-view .time-slot:nth-child(n+8) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="8"] .week-view .time-slot:nth-child(n+9) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="9"] .week-view .time-slot:nth-child(n+10) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="10"] .week-view .time-slot:nth-child(n+11) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="11"] .week-view .time-slot:nth-child(n+12) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="12"] .week-view .time-slot:nth-child(n+13) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="13"] .week-view .time-slot:nth-child(n+14) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="14"] .week-view .time-slot:nth-child(n+15) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="15"] .week-view .time-slot:nth-child(n+16) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="16"] .week-view .time-slot:nth-child(n+17) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="17"] .week-view .time-slot:nth-child(n+18) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="18"] .week-view .time-slot:nth-child(n+19) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="19"] .week-view .time-slot:nth-child(n+20) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="20"] .week-view .time-slot:nth-child(n+21) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="21"] .week-view .time-slot:nth-child(n+22) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="22"] .week-view .time-slot:nth-child(n+23) { display: none !important; } - body[data-print-mode="true"][data-print-end-hour="23"] .week-view .time-slot:nth-child(n+24) { display: none !important; } - - /* Force the week grid to show full height */ - .week-grid, - .week-content, - .time-grid { - height: auto !important; - max-height: none !important; - overflow: visible !important; - } - - /* Ensure all hours are visible by removing any height constraints */ - .week-view-container, - .week-view-container > div { - height: auto !important; - max-height: none !important; - overflow: visible !important; - } - - /* Month view specific adjustments */ - .calendar-grid { - border: 1px solid #333 !important; - } - - .calendar-day { - border: 1px solid #333 !important; - min-height: 80px !important; - } - - /* Ensure grid lines are visible - handled above in main time-slot rules */ - - /* Make sure header text is visible */ - .calendar-header h2, - .calendar-header .month-year { - color: black !important; - font-size: 1.5rem !important; - } - - .week-day-header .weekday-name, - .week-day-header .date-number { - color: black !important; - } - - /* Time labels in week view */ - .time-label { - color: #666 !important; - font-size: 0.75rem !important; - } - - /* Remove any shadows or fancy effects */ - * { - box-shadow: none !important; - text-shadow: none !important; - } - - /* Ensure proper spacing */ - .calendar-day .day-number { - margin-bottom: 0.25rem !important; - } - - /* Make sure events don't overlap text in month view */ - .calendar-day .event-list { - margin-top: 0.25rem !important; - } - - /* Force page break before calendar if needed */ - .calendar { - page-break-inside: avoid !important; - } -} - -/* Additional print button styling for screen display */ -.print-button { - background: rgba(255,255,255,0.2); - border: none; - color: white; - font-size: 1.2rem; - width: 40px; - height: 40px; - border-radius: 50%; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: background-color 0.2s; - margin-left: 0.5rem; -} - -.print-button:hover { - background: rgba(255,255,255,0.3); -} - -.print-button:active { - transform: scale(0.95); -} \ No newline at end of file +/* /* Print-specific styles for calendar printing */ */ +/* @media print { */ +/* /* Hide UI elements that shouldn't be printed */ */ +/* .app-sidebar, */ +/* .current-time-indicator-container, */ +/* .current-time-indicator, */ +/* .print-button, */ +/* .nav-button, */ +/* .today-button, */ +/* .time-increment-button, */ +/* .modal-backdrop, */ +/* .create-event-modal, */ +/* .event-modal, */ +/* .calendar-management-modal, */ +/* .context-menu { */ +/* display: none !important; */ +/* } */ +/**/ +/* /* Remove today highlighting from calendar elements */ */ +/* .calendar-day.today, */ +/* .week-day-header.today, */ +/* .week-day-column.today { */ +/* background-color: transparent !important; */ +/* border-color: var(--border-color) !important; */ +/* color: var(--text-color) !important; */ +/* } */ +/**/ +/* /* Remove today-specific styling from day numbers */ */ +/* .calendar-day.today .day-number { */ +/* background-color: transparent !important; */ +/* color: var(--text-color) !important; */ +/* font-weight: normal !important; */ +/* } */ +/**/ +/* /* Remove today indicator from week day headers */ */ +/* .week-day-header.today .weekday-name { */ +/* color: var(--text-color) !important; */ +/* font-weight: normal !important; */ +/* } */ +/**/ +/* /* Page setup */ */ +/* @page { */ +/* size: letter landscape; */ +/* margin: 0.5in; */ +/* } */ +/**/ +/* /* Make app and main container fill full page width */ */ +/* .app, */ +/* .app-main, */ +/* .calendar-view { */ +/* width: 100% !important; */ +/* max-width: none !important; */ +/* margin: 0 !important; */ +/* padding: 0 !important; */ +/* display: block !important; */ +/* } */ +/**/ +/* /* Remove any flexbox constraints that might limit width */ */ +/* .app { */ +/* display: block !important; */ +/* } */ +/**/ +/* .app-main { */ +/* margin-left: 0 !important; /* Remove sidebar margin */ */ +/* width: 100% !important; */ +/* max-width: none !important; */ +/* } */ +/**/ +/* /* Ensure calendar uses full available width */ */ +/* .calendar-container, */ +/* .calendar { */ +/* width: 100% !important; */ +/* max-width: none !important; */ +/* margin: 0 !important; */ +/* padding: 0 !important; */ +/* } */ +/**/ +/* /* Adjust calendar header for printing */ */ +/* .calendar-header { */ +/* margin-bottom: 0.5rem !important; */ +/* padding-bottom: 0.5rem !important; */ +/* border-bottom: 1px solid var(--border-color) !important; */ +/* } */ +/**/ +/* /* Ensure text is readable in print */ */ +/* body, html { */ +/* color: black !important; */ +/* background: white !important; */ +/* } */ +/**/ +/* /* Make sure event text is readable */ */ +/* .week-event, */ +/* .calendar-event, */ +/* .month-event { */ +/* border: 1px solid #333 !important; */ +/* color: black !important; */ +/* font-size: 0.8rem !important; */ +/* line-height: 1.2 !important; */ +/* } */ +/**/ +/* /* Ensure month view events are visible */ */ +/* .calendar-day .event-list .event-item { */ +/* background-color: #f5f5f5 !important; */ +/* border: 1px solid #333 !important; */ +/* color: black !important; */ +/* } */ +/**/ +/* /* Week view specific adjustments - force full day view */ */ +/* .week-view-container { */ +/* width: 100% !important; */ +/* height: auto !important; */ +/* overflow: visible !important; */ +/* } */ +/**/ +/* .week-day-column { */ +/* border-right: 1px solid #333 !important; */ +/* height: auto !important; */ +/* overflow: visible !important; */ +/* } */ +/**/ +/* .time-column { */ +/* border-right: 2px solid #333 !important; */ +/* width: 60px !important; */ +/* min-width: 60px !important; */ +/* height: auto !important; */ +/* overflow: visible !important; */ +/* } */ +/**/ +/* /* Dynamic time slot sizes based on hour range */ */ +/* .time-slot { */ +/* height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */ +/* min-height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */ +/* max-height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */ +/* border-bottom: 1px solid #ddd !important; */ +/* overflow: visible !important; */ +/* } */ +/**/ +/* /* Time slot quarters for 15-minute mode - use dynamic base unit */ */ +/* .time-slot.quarter-mode .time-slot-quarter { */ +/* height: calc(var(--print-base-unit, 30) * 1px) !important; */ +/* min-height: calc(var(--print-base-unit, 30) * 1px) !important; */ +/* max-height: calc(var(--print-base-unit, 30) * 1px) !important; */ +/* border-bottom: 1px solid #eee !important; */ +/* } */ +/**/ +/* /* Time slot halves for 30-minute mode - use dynamic base unit */ */ +/* .time-slot .time-slot-half { */ +/* height: calc(var(--print-base-unit, 30) * 1px) !important; */ +/* min-height: calc(var(--print-base-unit, 30) * 1px) !important; */ +/* max-height: calc(var(--print-base-unit, 30) * 1px) !important; */ +/* border-bottom: 1px solid #eee !important; */ +/* } */ +/**/ +/* /* Make hour boundaries more visible */ */ +/* .time-slot:nth-child(4n) { */ +/* border-bottom: 1px solid #333 !important; */ +/* height: 20px !important; */ +/* } */ +/**/ +/* /* Dynamic hour range hiding for print mode */ */ +/* body[data-print-mode="true"][data-print-start-hour="1"] .week-view .time-slot:nth-child(1) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="2"] .week-view .time-slot:nth-child(-n+2) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="3"] .week-view .time-slot:nth-child(-n+3) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="4"] .week-view .time-slot:nth-child(-n+4) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="5"] .week-view .time-slot:nth-child(-n+5) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="6"] .week-view .time-slot:nth-child(-n+6) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="7"] .week-view .time-slot:nth-child(-n+7) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="8"] .week-view .time-slot:nth-child(-n+8) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="9"] .week-view .time-slot:nth-child(-n+9) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="10"] .week-view .time-slot:nth-child(-n+10) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="11"] .week-view .time-slot:nth-child(-n+11) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="12"] .week-view .time-slot:nth-child(-n+12) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="13"] .week-view .time-slot:nth-child(-n+13) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="14"] .week-view .time-slot:nth-child(-n+14) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="15"] .week-view .time-slot:nth-child(-n+15) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="16"] .week-view .time-slot:nth-child(-n+16) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="17"] .week-view .time-slot:nth-child(-n+17) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="18"] .week-view .time-slot:nth-child(-n+18) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="19"] .week-view .time-slot:nth-child(-n+19) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="20"] .week-view .time-slot:nth-child(-n+20) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="21"] .week-view .time-slot:nth-child(-n+21) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="22"] .week-view .time-slot:nth-child(-n+22) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="23"] .week-view .time-slot:nth-child(-n+23) { display: none !important; } */ +/**/ +/* /* Hide hours after end-hour */ */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .week-view .time-slot:nth-child(n+2) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="2"] .week-view .time-slot:nth-child(n+3) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="3"] .week-view .time-slot:nth-child(n+4) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="4"] .week-view .time-slot:nth-child(n+5) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="5"] .week-view .time-slot:nth-child(n+6) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="6"] .week-view .time-slot:nth-child(n+7) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="7"] .week-view .time-slot:nth-child(n+8) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="8"] .week-view .time-slot:nth-child(n+9) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="9"] .week-view .time-slot:nth-child(n+10) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="10"] .week-view .time-slot:nth-child(n+11) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="11"] .week-view .time-slot:nth-child(n+12) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="12"] .week-view .time-slot:nth-child(n+13) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="13"] .week-view .time-slot:nth-child(n+14) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="14"] .week-view .time-slot:nth-child(n+15) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="15"] .week-view .time-slot:nth-child(n+16) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="16"] .week-view .time-slot:nth-child(n+17) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="17"] .week-view .time-slot:nth-child(n+18) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="18"] .week-view .time-slot:nth-child(n+19) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="19"] .week-view .time-slot:nth-child(n+20) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="20"] .week-view .time-slot:nth-child(n+21) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="21"] .week-view .time-slot:nth-child(n+22) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="22"] .week-view .time-slot:nth-child(n+23) { display: none !important; } */ +/* body[data-print-mode="true"][data-print-end-hour="23"] .week-view .time-slot:nth-child(n+24) { display: none !important; } */ +/**/ +/* /* Hide time labels for hours before start hour using data attributes */ */ +/* body[data-print-mode="true"][data-print-start-hour="1"] .time-label[data-hour="0"] { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="2"] .time-label[data-hour="0"], */ +/* body[data-print-mode="true"][data-print-start-hour="2"] .time-label[data-hour="1"] { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="3"] .time-label[data-hour="0"], */ +/* body[data-print-mode="true"][data-print-start-hour="3"] .time-label[data-hour="1"], */ +/* body[data-print-mode="true"][data-print-start-hour="3"] .time-label[data-hour="2"] { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="4"] .time-label[data-hour="0"], */ +/* body[data-print-mode="true"][data-print-start-hour="4"] .time-label[data-hour="1"], */ +/* body[data-print-mode="true"][data-print-start-hour="4"] .time-label[data-hour="2"], */ +/* body[data-print-mode="true"][data-print-start-hour="4"] .time-label[data-hour="3"] { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="5"] .time-label[data-hour="0"], */ +/* body[data-print-mode="true"][data-print-start-hour="5"] .time-label[data-hour="1"], */ +/* body[data-print-mode="true"][data-print-start-hour="5"] .time-label[data-hour="2"], */ +/* body[data-print-mode="true"][data-print-start-hour="5"] .time-label[data-hour="3"], */ +/* body[data-print-mode="true"][data-print-start-hour="5"] .time-label[data-hour="4"] { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="0"], */ +/* body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="1"], */ +/* body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="2"], */ +/* body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="3"], */ +/* body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="4"], */ +/* body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="5"] { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="0"], */ +/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="1"], */ +/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="2"], */ +/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="3"], */ +/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="4"], */ +/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="5"], */ +/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="6"] { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="0"], */ +/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="1"], */ +/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="2"], */ +/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="3"], */ +/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="4"], */ +/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="5"], */ +/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="6"], */ +/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="7"] { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="0"], */ +/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="1"], */ +/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="2"], */ +/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="3"], */ +/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="4"], */ +/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="5"], */ +/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="6"], */ +/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="7"], */ +/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="8"] { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="0"], */ +/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="1"], */ +/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="2"], */ +/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="3"], */ +/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="4"], */ +/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="5"], */ +/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="6"], */ +/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="7"], */ +/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="8"], */ +/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="9"] { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="0"], */ +/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="1"], */ +/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="2"], */ +/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="3"], */ +/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="4"], */ +/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="5"], */ +/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="6"], */ +/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="7"], */ +/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="8"], */ +/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="9"], */ +/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="10"] { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="0"], */ +/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="1"], */ +/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="2"], */ +/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="3"], */ +/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="4"], */ +/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="5"], */ +/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="6"], */ +/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="7"], */ +/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="8"], */ +/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="9"], */ +/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="10"], */ +/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="11"] { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="0"], */ +/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="1"], */ +/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="2"], */ +/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="3"], */ +/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="4"], */ +/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="5"], */ +/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="6"], */ +/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="7"], */ +/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="8"], */ +/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="9"], */ +/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="10"], */ +/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="11"], */ +/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="12"] { display: none !important; } */ +/**/ +/* /* Hide time labels for remaining start hours (14-23) */ */ +/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="0"], */ +/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="1"], */ +/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="2"], */ +/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="3"], */ +/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="4"], */ +/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="5"], */ +/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="6"], */ +/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="7"], */ +/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="8"], */ +/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="9"], */ +/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="10"], */ +/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="11"], */ +/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="12"], */ +/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="13"] { display: none !important; } */ +/**/ +/* /* Additional start hours 15-23 with similar patterns */ */ +/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="0"], */ +/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="1"], */ +/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="2"], */ +/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="3"], */ +/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="4"], */ +/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="5"], */ +/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="6"], */ +/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="7"], */ +/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="8"], */ +/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="9"], */ +/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="10"], */ +/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="11"], */ +/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="12"], */ +/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="13"], */ +/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="14"] { display: none !important; } */ +/**/ +/* /* Continue pattern for hours 16-23 (abbreviated for brevity) */ */ +/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="0"] { display: none !important; } */ +/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="1"], */ +/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="2"], */ +/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="3"], */ +/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="4"], */ +/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="5"], */ +/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="6"], */ +/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="7"], */ +/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="8"], */ +/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="9"], */ +/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="10"], */ +/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="11"], */ +/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="12"], */ +/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="13"], */ +/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="14"], */ +/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="15"] { display: none !important; } */ +/**/ +/* /* Hide time labels for hours after end hour */ */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="1"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="2"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="3"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="4"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="5"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="6"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="7"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="8"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="9"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="10"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="11"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="12"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="13"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="14"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="15"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="16"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="17"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="18"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="19"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="20"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="21"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="22"], */ +/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="23"] { display: none !important; } */ +/**/ +/* /* Force the week grid to show full height */ */ +/* .week-grid, */ +/* .week-content, */ +/* .time-grid { */ +/* height: auto !important; */ +/* max-height: none !important; */ +/* overflow: visible !important; */ +/* } */ +/**/ +/* /* Ensure all hours are visible by removing any height constraints */ */ +/* .week-view-container, */ +/* .week-view-container > div { */ +/* height: auto !important; */ +/* max-height: none !important; */ +/* overflow: visible !important; */ +/* } */ +/**/ +/* /* Month view specific adjustments */ */ +/* .calendar-grid { */ +/* border: 1px solid #333 !important; */ +/* } */ +/**/ +/* .calendar-day { */ +/* border: 1px solid #333 !important; */ +/* min-height: 80px !important; */ +/* } */ +/**/ +/* /* Ensure grid lines are visible - handled above in main time-slot rules */ */ +/**/ +/* /* Make sure header text is visible */ */ +/* .calendar-header h2, */ +/* .calendar-header .month-year { */ +/* color: black !important; */ +/* font-size: 1.5rem !important; */ +/* } */ +/**/ +/* .week-day-header .weekday-name, */ +/* .week-day-header .date-number { */ +/* color: black !important; */ +/* } */ +/**/ +/* /* Time labels in week view - use dynamic heights to match time slots */ */ +/* .time-label { */ +/* color: #666 !important; */ +/* font-size: 0.75rem !important; */ +/* height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */ +/* min-height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */ +/* max-height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */ +/* } */ +/**/ +/* /* Remove any shadows or fancy effects */ */ +/* * { */ +/* box-shadow: none !important; */ +/* text-shadow: none !important; */ +/* } */ +/**/ +/* /* Ensure proper spacing */ */ +/* .calendar-day .day-number { */ +/* margin-bottom: 0.25rem !important; */ +/* } */ +/**/ +/* /* Make sure events don't overlap text in month view */ */ +/* .calendar-day .event-list { */ +/* margin-top: 0.25rem !important; */ +/* } */ +/**/ +/* /* Force page break before calendar if needed */ */ +/* .calendar { */ +/* page-break-inside: avoid !important; */ +/* } */ +/* } */ +/**/ +/* /* Additional print button styling for screen display */ */ +/* .print-button { */ +/* background: rgba(255,255,255,0.2); */ +/* border: none; */ +/* color: white; */ +/* font-size: 1.2rem; */ +/* width: 40px; */ +/* height: 40px; */ +/* border-radius: 50%; */ +/* cursor: pointer; */ +/* display: flex; */ +/* align-items: center; */ +/* justify-content: center; */ +/* transition: background-color 0.2s; */ +/* margin-left: 0.5rem; */ +/* } */ +/**/ +/* .print-button:hover { */ +/* background: rgba(255,255,255,0.3); */ +/* } */ +/**/ +/* .print-button:active { */ +/* transform: scale(0.95); */ +/* } */ diff --git a/frontend/src/components/print_preview_modal.rs b/frontend/src/components/print_preview_modal.rs index 7ccd413..fc65525 100644 --- a/frontend/src/components/print_preview_modal.rs +++ b/frontend/src/components/print_preview_modal.rs @@ -71,44 +71,6 @@ pub fn PrintPreviewModal(props: &PrintPreviewModalProps) -> Html { }) }; - let on_print = { - let start_hour = *start_hour; - let end_hour = *end_hour; - let view_mode = props.view_mode.clone(); - Callback::from(move |_: MouseEvent| { - if let Some(window) = web_sys::window() { - if let Some(document) = window.document() { - if let Some(body) = document.body() { - // Add print attributes to body for CSS targeting - if view_mode == ViewMode::Week { - let _ = body.set_attribute("data-print-start-hour", &start_hour.to_string()); - let _ = body.set_attribute("data-print-end-hour", &end_hour.to_string()); - } - let _ = body.set_attribute("data-print-mode", "true"); - - // Trigger print - if let Err(e) = window.print() { - web_sys::console::log_1(&format!("Print failed: {:?}", e).into()); - } - - // Clean up attributes after a short delay - let cleanup_body = body.clone(); - let cleanup_callback = Closure::wrap(Box::new(move || { - let _ = cleanup_body.remove_attribute("data-print-start-hour"); - let _ = cleanup_body.remove_attribute("data-print-end-hour"); - let _ = cleanup_body.remove_attribute("data-print-mode"); - }) as Box); - - let _ = window.set_timeout_with_callback_and_timeout_and_arguments_0( - cleanup_callback.as_ref().unchecked_ref(), - 1000 - ); - cleanup_callback.forget(); - } - } - } - }) - }; let format_hour = |hour: u32| -> String { if hour == 0 { @@ -140,6 +102,148 @@ pub fn PrintPreviewModal(props: &PrintPreviewModalProps) -> Html { // Calculate print dimensions for the current hour range let (base_unit, pixels_per_hour, _available_height) = calculate_print_dimensions(*start_hour, *end_hour, props.time_increment); + let on_print = { + let start_hour = *start_hour; + let end_hour = *end_hour; + let view_mode = props.view_mode.clone(); + let base_unit_value = base_unit; + let pixels_per_hour_value = pixels_per_hour; + Callback::from(move |_: MouseEvent| { + if let Some(window) = web_sys::window() { + if let Some(document) = window.document() { + // Find the print preview content element + if let Some(preview_content) = document.query_selector(".print-preview-content").ok().flatten() { + // Clone the content to print + if let Some(content_clone) = preview_content.clone_node_with_deep(true).ok() { + if let Some(body) = document.body() { + // Store original body content and styling + let original_body_html = body.inner_html(); + let original_body_style = body.get_attribute("style").unwrap_or_default(); + + // Set CSS variables on document root for print + if let Some(document_element) = document.document_element() { + if let Some(html_element) = document_element.dyn_ref::() { + let style = html_element.style(); + let _ = style.set_property("--print-base-unit", &format!("{:.2}", base_unit_value)); + let _ = style.set_property("--print-pixels-per-hour", &format!("{:.2}", pixels_per_hour_value)); + let _ = style.set_property("--print-start-hour", &start_hour.to_string()); + let _ = style.set_property("--print-end-hour", &end_hour.to_string()); + } + } + + // Clear body and add only the preview content + body.set_inner_html(""); + let _ = body.set_attribute("style", "margin: 0; padding: 0; background: white;"); + let _ = body.append_child(&content_clone); + + // Set up restore content variables for later use + use std::rc::Rc; + let restore_body = Rc::new(body.clone()); + let restore_document = Rc::new(document.clone()); + let original_html = Rc::new(original_body_html.clone()); + let original_style = Rc::new(original_body_style.clone()); + let setup_window = Rc::new(window.clone()); + + // Add a small delay before printing to make the change visible + let print_window = window.clone(); + let print_callback = Closure::wrap(Box::new(move || { + + // Use visibility change event to detect when user returns to page + let restore_body = restore_body.clone(); + let restore_document = restore_document.clone(); + let original_html = original_html.clone(); + let original_style = original_style.clone(); + let setup_document1 = document.clone(); + let setup_document2 = document.clone(); + + // Create restore function for both visibility and focus events + let restore_body_vis = restore_body.clone(); + let restore_document_vis = restore_document.clone(); + let original_html_vis = original_html.clone(); + let original_style_vis = original_style.clone(); + let setup_document_vis = setup_document1.clone(); + + let restore_body_focus = restore_body.clone(); + let restore_document_focus = restore_document.clone(); + let original_html_focus = original_html.clone(); + let original_style_focus = original_style.clone(); + + // Try multiple approaches - visibility change + let visibility_callback = Closure::wrap(Box::new(move || { + if !setup_document_vis.hidden() { + // Restore original body content and style + restore_body_vis.set_inner_html(&original_html_vis); + if original_style_vis.is_empty() { + let _ = restore_body_vis.remove_attribute("style"); + } else { + let _ = restore_body_vis.set_attribute("style", &original_style_vis); + } + + // Clean up CSS variables + if let Some(document_element) = restore_document_vis.document_element() { + if let Some(html_element) = document_element.dyn_ref::() { + let style = html_element.style(); + let _ = style.remove_property("--print-base-unit"); + let _ = style.remove_property("--print-pixels-per-hour"); + let _ = style.remove_property("--print-start-hour"); + let _ = style.remove_property("--print-end-hour"); + } + } + } + }) as Box); + + // And also try focus event as backup + let focus_callback = Closure::wrap(Box::new(move || { + // Restore original body content and style + restore_body_focus.set_inner_html(&original_html_focus); + if original_style_focus.is_empty() { + let _ = restore_body_focus.remove_attribute("style"); + } else { + let _ = restore_body_focus.set_attribute("style", &original_style_focus); + } + + // Clean up CSS variables + if let Some(document_element) = restore_document_focus.document_element() { + if let Some(html_element) = document_element.dyn_ref::() { + let style = html_element.style(); + let _ = style.remove_property("--print-base-unit"); + let _ = style.remove_property("--print-pixels-per-hour"); + let _ = style.remove_property("--print-start-hour"); + let _ = style.remove_property("--print-end-hour"); + } + } + }) as Box); + + // Set up both listeners + let _ = setup_document2.add_event_listener_with_callback( + "visibilitychange", + visibility_callback.as_ref().unchecked_ref() + ); + + let _ = print_window.add_event_listener_with_callback( + "focus", + focus_callback.as_ref().unchecked_ref() + ); + + visibility_callback.forget(); + focus_callback.forget(); + + // Now trigger the print dialog + let _ = print_window.print(); + }) as Box); + + let _ = window.set_timeout_with_callback_and_timeout_and_arguments_0( + print_callback.as_ref().unchecked_ref(), + 100 // 100ms delay to see the content change + ); + print_callback.forget(); + } + } + } + } + } + }) + }; html! {
From 96585440d1241d107462cdd4514931584e285e5a Mon Sep 17 00:00:00 2001 From: Connor Johnstone Date: Fri, 12 Sep 2025 13:17:21 -0400 Subject: [PATCH 6/8] Implement hybrid print preview with CSS-based approach MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add hidden print-preview-copy div at app level for clean print isolation - Use @media print rules to show only print copy (960x720) in landscape - Auto-sync print copy with preview content on modal render via use_effect - Copy CSS variables and data attributes for proper hour filtering - Set explicit dimensions matching print-preview-paper content area - Force landscape orientation with @page rule for better calendar printing 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- frontend/Cargo.toml | 2 + frontend/Trunk.toml | 2 +- frontend/index.html | 1 - frontend/print-preview.css | 34 ++ frontend/print.css | 474 ------------------ frontend/src/app.rs | 3 + .../src/components/print_preview_modal.rs | 196 +++----- 7 files changed, 105 insertions(+), 607 deletions(-) delete mode 100644 frontend/print.css diff --git a/frontend/Cargo.toml b/frontend/Cargo.toml index f957bc5..5fce158 100644 --- a/frontend/Cargo.toml +++ b/frontend/Cargo.toml @@ -30,6 +30,8 @@ web-sys = { version = "0.3", features = [ "RequestMode", "Response", "CssStyleDeclaration", + "MediaQueryList", + "MediaQueryListEvent", ] } wasm-bindgen = "0.2" js-sys = "0.3" diff --git a/frontend/Trunk.toml b/frontend/Trunk.toml index d1cd971..9862b85 100644 --- a/frontend/Trunk.toml +++ b/frontend/Trunk.toml @@ -6,7 +6,7 @@ dist = "dist" BACKEND_API_URL = "http://localhost:3000/api" [watch] -watch = ["src", "Cargo.toml", "../calendar-models/src", "styles.css", "print.css", "print-preview.css", "index.html"] +watch = ["src", "Cargo.toml", "../calendar-models/src", "styles.css", "print-preview.css", "index.html"] ignore = ["../backend/", "../target/"] [serve] diff --git a/frontend/index.html b/frontend/index.html index 9f8c75e..8d162e3 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -6,7 +6,6 @@ - diff --git a/frontend/print-preview.css b/frontend/print-preview.css index c360475..1884695 100644 --- a/frontend/print-preview.css +++ b/frontend/print-preview.css @@ -1127,3 +1127,37 @@ .print-preview-paper[data-start-hour="8"][data-end-hour="20"]:has(.time-slot.quarter-mode) .week-days-grid, .print-preview-paper[data-start-hour="7"][data-end-hour="19"]:has(.time-slot.quarter-mode) .time-labels, .print-preview-paper[data-start-hour="7"][data-end-hour="19"]:has(.time-slot.quarter-mode) .week-days-grid { min-height: 1530px !important; } + +/* Print Page Setup - Force landscape orientation */ +@page { + size: landscape; + margin: 0.5in; +} + +/* Print Media Rules - Show only the print-preview-copy when printing */ +@media print { + /* Hide all top-level app content */ + .app { + display: none !important; + } + + /* Show only the print copy div */ + #print-preview-copy { + display: block !important; + position: absolute !important; + left: 0 !important; + top: 0 !important; + width: 960px !important; + height: 720px !important; + margin: 0 !important; + padding: 0 !important; + box-sizing: border-box !important; + } + + /* Ensure print content uses the full page */ + body { + margin: 0 !important; + padding: 0 !important; + background: white !important; + } +} diff --git a/frontend/print.css b/frontend/print.css deleted file mode 100644 index cd0c272..0000000 --- a/frontend/print.css +++ /dev/null @@ -1,474 +0,0 @@ -/* /* Print-specific styles for calendar printing */ */ -/* @media print { */ -/* /* Hide UI elements that shouldn't be printed */ */ -/* .app-sidebar, */ -/* .current-time-indicator-container, */ -/* .current-time-indicator, */ -/* .print-button, */ -/* .nav-button, */ -/* .today-button, */ -/* .time-increment-button, */ -/* .modal-backdrop, */ -/* .create-event-modal, */ -/* .event-modal, */ -/* .calendar-management-modal, */ -/* .context-menu { */ -/* display: none !important; */ -/* } */ -/**/ -/* /* Remove today highlighting from calendar elements */ */ -/* .calendar-day.today, */ -/* .week-day-header.today, */ -/* .week-day-column.today { */ -/* background-color: transparent !important; */ -/* border-color: var(--border-color) !important; */ -/* color: var(--text-color) !important; */ -/* } */ -/**/ -/* /* Remove today-specific styling from day numbers */ */ -/* .calendar-day.today .day-number { */ -/* background-color: transparent !important; */ -/* color: var(--text-color) !important; */ -/* font-weight: normal !important; */ -/* } */ -/**/ -/* /* Remove today indicator from week day headers */ */ -/* .week-day-header.today .weekday-name { */ -/* color: var(--text-color) !important; */ -/* font-weight: normal !important; */ -/* } */ -/**/ -/* /* Page setup */ */ -/* @page { */ -/* size: letter landscape; */ -/* margin: 0.5in; */ -/* } */ -/**/ -/* /* Make app and main container fill full page width */ */ -/* .app, */ -/* .app-main, */ -/* .calendar-view { */ -/* width: 100% !important; */ -/* max-width: none !important; */ -/* margin: 0 !important; */ -/* padding: 0 !important; */ -/* display: block !important; */ -/* } */ -/**/ -/* /* Remove any flexbox constraints that might limit width */ */ -/* .app { */ -/* display: block !important; */ -/* } */ -/**/ -/* .app-main { */ -/* margin-left: 0 !important; /* Remove sidebar margin */ */ -/* width: 100% !important; */ -/* max-width: none !important; */ -/* } */ -/**/ -/* /* Ensure calendar uses full available width */ */ -/* .calendar-container, */ -/* .calendar { */ -/* width: 100% !important; */ -/* max-width: none !important; */ -/* margin: 0 !important; */ -/* padding: 0 !important; */ -/* } */ -/**/ -/* /* Adjust calendar header for printing */ */ -/* .calendar-header { */ -/* margin-bottom: 0.5rem !important; */ -/* padding-bottom: 0.5rem !important; */ -/* border-bottom: 1px solid var(--border-color) !important; */ -/* } */ -/**/ -/* /* Ensure text is readable in print */ */ -/* body, html { */ -/* color: black !important; */ -/* background: white !important; */ -/* } */ -/**/ -/* /* Make sure event text is readable */ */ -/* .week-event, */ -/* .calendar-event, */ -/* .month-event { */ -/* border: 1px solid #333 !important; */ -/* color: black !important; */ -/* font-size: 0.8rem !important; */ -/* line-height: 1.2 !important; */ -/* } */ -/**/ -/* /* Ensure month view events are visible */ */ -/* .calendar-day .event-list .event-item { */ -/* background-color: #f5f5f5 !important; */ -/* border: 1px solid #333 !important; */ -/* color: black !important; */ -/* } */ -/**/ -/* /* Week view specific adjustments - force full day view */ */ -/* .week-view-container { */ -/* width: 100% !important; */ -/* height: auto !important; */ -/* overflow: visible !important; */ -/* } */ -/**/ -/* .week-day-column { */ -/* border-right: 1px solid #333 !important; */ -/* height: auto !important; */ -/* overflow: visible !important; */ -/* } */ -/**/ -/* .time-column { */ -/* border-right: 2px solid #333 !important; */ -/* width: 60px !important; */ -/* min-width: 60px !important; */ -/* height: auto !important; */ -/* overflow: visible !important; */ -/* } */ -/**/ -/* /* Dynamic time slot sizes based on hour range */ */ -/* .time-slot { */ -/* height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */ -/* min-height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */ -/* max-height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */ -/* border-bottom: 1px solid #ddd !important; */ -/* overflow: visible !important; */ -/* } */ -/**/ -/* /* Time slot quarters for 15-minute mode - use dynamic base unit */ */ -/* .time-slot.quarter-mode .time-slot-quarter { */ -/* height: calc(var(--print-base-unit, 30) * 1px) !important; */ -/* min-height: calc(var(--print-base-unit, 30) * 1px) !important; */ -/* max-height: calc(var(--print-base-unit, 30) * 1px) !important; */ -/* border-bottom: 1px solid #eee !important; */ -/* } */ -/**/ -/* /* Time slot halves for 30-minute mode - use dynamic base unit */ */ -/* .time-slot .time-slot-half { */ -/* height: calc(var(--print-base-unit, 30) * 1px) !important; */ -/* min-height: calc(var(--print-base-unit, 30) * 1px) !important; */ -/* max-height: calc(var(--print-base-unit, 30) * 1px) !important; */ -/* border-bottom: 1px solid #eee !important; */ -/* } */ -/**/ -/* /* Make hour boundaries more visible */ */ -/* .time-slot:nth-child(4n) { */ -/* border-bottom: 1px solid #333 !important; */ -/* height: 20px !important; */ -/* } */ -/**/ -/* /* Dynamic hour range hiding for print mode */ */ -/* body[data-print-mode="true"][data-print-start-hour="1"] .week-view .time-slot:nth-child(1) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="2"] .week-view .time-slot:nth-child(-n+2) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="3"] .week-view .time-slot:nth-child(-n+3) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="4"] .week-view .time-slot:nth-child(-n+4) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="5"] .week-view .time-slot:nth-child(-n+5) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="6"] .week-view .time-slot:nth-child(-n+6) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="7"] .week-view .time-slot:nth-child(-n+7) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="8"] .week-view .time-slot:nth-child(-n+8) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="9"] .week-view .time-slot:nth-child(-n+9) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="10"] .week-view .time-slot:nth-child(-n+10) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="11"] .week-view .time-slot:nth-child(-n+11) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="12"] .week-view .time-slot:nth-child(-n+12) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="13"] .week-view .time-slot:nth-child(-n+13) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="14"] .week-view .time-slot:nth-child(-n+14) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="15"] .week-view .time-slot:nth-child(-n+15) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="16"] .week-view .time-slot:nth-child(-n+16) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="17"] .week-view .time-slot:nth-child(-n+17) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="18"] .week-view .time-slot:nth-child(-n+18) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="19"] .week-view .time-slot:nth-child(-n+19) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="20"] .week-view .time-slot:nth-child(-n+20) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="21"] .week-view .time-slot:nth-child(-n+21) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="22"] .week-view .time-slot:nth-child(-n+22) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="23"] .week-view .time-slot:nth-child(-n+23) { display: none !important; } */ -/**/ -/* /* Hide hours after end-hour */ */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .week-view .time-slot:nth-child(n+2) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="2"] .week-view .time-slot:nth-child(n+3) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="3"] .week-view .time-slot:nth-child(n+4) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="4"] .week-view .time-slot:nth-child(n+5) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="5"] .week-view .time-slot:nth-child(n+6) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="6"] .week-view .time-slot:nth-child(n+7) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="7"] .week-view .time-slot:nth-child(n+8) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="8"] .week-view .time-slot:nth-child(n+9) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="9"] .week-view .time-slot:nth-child(n+10) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="10"] .week-view .time-slot:nth-child(n+11) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="11"] .week-view .time-slot:nth-child(n+12) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="12"] .week-view .time-slot:nth-child(n+13) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="13"] .week-view .time-slot:nth-child(n+14) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="14"] .week-view .time-slot:nth-child(n+15) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="15"] .week-view .time-slot:nth-child(n+16) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="16"] .week-view .time-slot:nth-child(n+17) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="17"] .week-view .time-slot:nth-child(n+18) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="18"] .week-view .time-slot:nth-child(n+19) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="19"] .week-view .time-slot:nth-child(n+20) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="20"] .week-view .time-slot:nth-child(n+21) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="21"] .week-view .time-slot:nth-child(n+22) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="22"] .week-view .time-slot:nth-child(n+23) { display: none !important; } */ -/* body[data-print-mode="true"][data-print-end-hour="23"] .week-view .time-slot:nth-child(n+24) { display: none !important; } */ -/**/ -/* /* Hide time labels for hours before start hour using data attributes */ */ -/* body[data-print-mode="true"][data-print-start-hour="1"] .time-label[data-hour="0"] { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="2"] .time-label[data-hour="0"], */ -/* body[data-print-mode="true"][data-print-start-hour="2"] .time-label[data-hour="1"] { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="3"] .time-label[data-hour="0"], */ -/* body[data-print-mode="true"][data-print-start-hour="3"] .time-label[data-hour="1"], */ -/* body[data-print-mode="true"][data-print-start-hour="3"] .time-label[data-hour="2"] { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="4"] .time-label[data-hour="0"], */ -/* body[data-print-mode="true"][data-print-start-hour="4"] .time-label[data-hour="1"], */ -/* body[data-print-mode="true"][data-print-start-hour="4"] .time-label[data-hour="2"], */ -/* body[data-print-mode="true"][data-print-start-hour="4"] .time-label[data-hour="3"] { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="5"] .time-label[data-hour="0"], */ -/* body[data-print-mode="true"][data-print-start-hour="5"] .time-label[data-hour="1"], */ -/* body[data-print-mode="true"][data-print-start-hour="5"] .time-label[data-hour="2"], */ -/* body[data-print-mode="true"][data-print-start-hour="5"] .time-label[data-hour="3"], */ -/* body[data-print-mode="true"][data-print-start-hour="5"] .time-label[data-hour="4"] { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="0"], */ -/* body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="1"], */ -/* body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="2"], */ -/* body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="3"], */ -/* body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="4"], */ -/* body[data-print-mode="true"][data-print-start-hour="6"] .time-label[data-hour="5"] { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="0"], */ -/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="1"], */ -/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="2"], */ -/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="3"], */ -/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="4"], */ -/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="5"], */ -/* body[data-print-mode="true"][data-print-start-hour="7"] .time-label[data-hour="6"] { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="0"], */ -/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="1"], */ -/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="2"], */ -/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="3"], */ -/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="4"], */ -/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="5"], */ -/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="6"], */ -/* body[data-print-mode="true"][data-print-start-hour="8"] .time-label[data-hour="7"] { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="0"], */ -/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="1"], */ -/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="2"], */ -/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="3"], */ -/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="4"], */ -/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="5"], */ -/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="6"], */ -/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="7"], */ -/* body[data-print-mode="true"][data-print-start-hour="9"] .time-label[data-hour="8"] { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="0"], */ -/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="1"], */ -/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="2"], */ -/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="3"], */ -/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="4"], */ -/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="5"], */ -/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="6"], */ -/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="7"], */ -/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="8"], */ -/* body[data-print-mode="true"][data-print-start-hour="10"] .time-label[data-hour="9"] { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="0"], */ -/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="1"], */ -/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="2"], */ -/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="3"], */ -/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="4"], */ -/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="5"], */ -/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="6"], */ -/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="7"], */ -/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="8"], */ -/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="9"], */ -/* body[data-print-mode="true"][data-print-start-hour="11"] .time-label[data-hour="10"] { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="0"], */ -/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="1"], */ -/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="2"], */ -/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="3"], */ -/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="4"], */ -/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="5"], */ -/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="6"], */ -/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="7"], */ -/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="8"], */ -/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="9"], */ -/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="10"], */ -/* body[data-print-mode="true"][data-print-start-hour="12"] .time-label[data-hour="11"] { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="0"], */ -/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="1"], */ -/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="2"], */ -/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="3"], */ -/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="4"], */ -/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="5"], */ -/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="6"], */ -/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="7"], */ -/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="8"], */ -/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="9"], */ -/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="10"], */ -/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="11"], */ -/* body[data-print-mode="true"][data-print-start-hour="13"] .time-label[data-hour="12"] { display: none !important; } */ -/**/ -/* /* Hide time labels for remaining start hours (14-23) */ */ -/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="0"], */ -/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="1"], */ -/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="2"], */ -/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="3"], */ -/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="4"], */ -/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="5"], */ -/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="6"], */ -/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="7"], */ -/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="8"], */ -/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="9"], */ -/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="10"], */ -/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="11"], */ -/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="12"], */ -/* body[data-print-mode="true"][data-print-start-hour="14"] .time-label[data-hour="13"] { display: none !important; } */ -/**/ -/* /* Additional start hours 15-23 with similar patterns */ */ -/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="0"], */ -/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="1"], */ -/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="2"], */ -/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="3"], */ -/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="4"], */ -/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="5"], */ -/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="6"], */ -/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="7"], */ -/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="8"], */ -/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="9"], */ -/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="10"], */ -/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="11"], */ -/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="12"], */ -/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="13"], */ -/* body[data-print-mode="true"][data-print-start-hour="15"] .time-label[data-hour="14"] { display: none !important; } */ -/**/ -/* /* Continue pattern for hours 16-23 (abbreviated for brevity) */ */ -/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="0"] { display: none !important; } */ -/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="1"], */ -/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="2"], */ -/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="3"], */ -/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="4"], */ -/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="5"], */ -/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="6"], */ -/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="7"], */ -/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="8"], */ -/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="9"], */ -/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="10"], */ -/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="11"], */ -/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="12"], */ -/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="13"], */ -/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="14"], */ -/* body[data-print-mode="true"][data-print-start-hour="16"] .time-label[data-hour="15"] { display: none !important; } */ -/**/ -/* /* Hide time labels for hours after end hour */ */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="1"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="2"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="3"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="4"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="5"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="6"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="7"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="8"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="9"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="10"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="11"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="12"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="13"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="14"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="15"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="16"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="17"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="18"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="19"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="20"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="21"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="22"], */ -/* body[data-print-mode="true"][data-print-end-hour="1"] .time-label[data-hour="23"] { display: none !important; } */ -/**/ -/* /* Force the week grid to show full height */ */ -/* .week-grid, */ -/* .week-content, */ -/* .time-grid { */ -/* height: auto !important; */ -/* max-height: none !important; */ -/* overflow: visible !important; */ -/* } */ -/**/ -/* /* Ensure all hours are visible by removing any height constraints */ */ -/* .week-view-container, */ -/* .week-view-container > div { */ -/* height: auto !important; */ -/* max-height: none !important; */ -/* overflow: visible !important; */ -/* } */ -/**/ -/* /* Month view specific adjustments */ */ -/* .calendar-grid { */ -/* border: 1px solid #333 !important; */ -/* } */ -/**/ -/* .calendar-day { */ -/* border: 1px solid #333 !important; */ -/* min-height: 80px !important; */ -/* } */ -/**/ -/* /* Ensure grid lines are visible - handled above in main time-slot rules */ */ -/**/ -/* /* Make sure header text is visible */ */ -/* .calendar-header h2, */ -/* .calendar-header .month-year { */ -/* color: black !important; */ -/* font-size: 1.5rem !important; */ -/* } */ -/**/ -/* .week-day-header .weekday-name, */ -/* .week-day-header .date-number { */ -/* color: black !important; */ -/* } */ -/**/ -/* /* Time labels in week view - use dynamic heights to match time slots */ */ -/* .time-label { */ -/* color: #666 !important; */ -/* font-size: 0.75rem !important; */ -/* height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */ -/* min-height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */ -/* max-height: calc(var(--print-pixels-per-hour, 60) * 1px) !important; */ -/* } */ -/**/ -/* /* Remove any shadows or fancy effects */ */ -/* * { */ -/* box-shadow: none !important; */ -/* text-shadow: none !important; */ -/* } */ -/**/ -/* /* Ensure proper spacing */ */ -/* .calendar-day .day-number { */ -/* margin-bottom: 0.25rem !important; */ -/* } */ -/**/ -/* /* Make sure events don't overlap text in month view */ */ -/* .calendar-day .event-list { */ -/* margin-top: 0.25rem !important; */ -/* } */ -/**/ -/* /* Force page break before calendar if needed */ */ -/* .calendar { */ -/* page-break-inside: avoid !important; */ -/* } */ -/* } */ -/**/ -/* /* Additional print button styling for screen display */ */ -/* .print-button { */ -/* background: rgba(255,255,255,0.2); */ -/* border: none; */ -/* color: white; */ -/* font-size: 1.2rem; */ -/* width: 40px; */ -/* height: 40px; */ -/* border-radius: 50%; */ -/* cursor: pointer; */ -/* display: flex; */ -/* align-items: center; */ -/* justify-content: center; */ -/* transition: background-color 0.2s; */ -/* margin-left: 0.5rem; */ -/* } */ -/**/ -/* .print-button:hover { */ -/* background: rgba(255,255,255,0.3); */ -/* } */ -/**/ -/* .print-button:active { */ -/* transform: scale(0.95); */ -/* } */ diff --git a/frontend/src/app.rs b/frontend/src/app.rs index 2110575..2f20503 100644 --- a/frontend/src/app.rs +++ b/frontend/src/app.rs @@ -1702,6 +1702,9 @@ pub fn App() -> Html { on_close={on_mobile_warning_close} />
+ + // Hidden print copy that gets shown only during printing + } } diff --git a/frontend/src/components/print_preview_modal.rs b/frontend/src/components/print_preview_modal.rs index fc65525..b5255c1 100644 --- a/frontend/src/components/print_preview_modal.rs +++ b/frontend/src/components/print_preview_modal.rs @@ -101,147 +101,81 @@ pub fn PrintPreviewModal(props: &PrintPreviewModalProps) -> Html { // Calculate print dimensions for the current hour range let (base_unit, pixels_per_hour, _available_height) = calculate_print_dimensions(*start_hour, *end_hour, props.time_increment); - - let on_print = { + + // Effect to update print copy whenever modal renders or content changes + { let start_hour = *start_hour; let end_hour = *end_hour; - let view_mode = props.view_mode.clone(); let base_unit_value = base_unit; let pixels_per_hour_value = pixels_per_hour; - Callback::from(move |_: MouseEvent| { + use_effect(move || { if let Some(window) = web_sys::window() { if let Some(document) = window.document() { - // Find the print preview content element - if let Some(preview_content) = document.query_selector(".print-preview-content").ok().flatten() { - // Clone the content to print - if let Some(content_clone) = preview_content.clone_node_with_deep(true).ok() { - if let Some(body) = document.body() { - // Store original body content and styling - let original_body_html = body.inner_html(); - let original_body_style = body.get_attribute("style").unwrap_or_default(); - - // Set CSS variables on document root for print - if let Some(document_element) = document.document_element() { - if let Some(html_element) = document_element.dyn_ref::() { - let style = html_element.style(); - let _ = style.set_property("--print-base-unit", &format!("{:.2}", base_unit_value)); - let _ = style.set_property("--print-pixels-per-hour", &format!("{:.2}", pixels_per_hour_value)); - let _ = style.set_property("--print-start-hour", &start_hour.to_string()); - let _ = style.set_property("--print-end-hour", &end_hour.to_string()); - } - } - - // Clear body and add only the preview content - body.set_inner_html(""); - let _ = body.set_attribute("style", "margin: 0; padding: 0; background: white;"); - let _ = body.append_child(&content_clone); - - // Set up restore content variables for later use - use std::rc::Rc; - let restore_body = Rc::new(body.clone()); - let restore_document = Rc::new(document.clone()); - let original_html = Rc::new(original_body_html.clone()); - let original_style = Rc::new(original_body_style.clone()); - let setup_window = Rc::new(window.clone()); - - // Add a small delay before printing to make the change visible - let print_window = window.clone(); - let print_callback = Closure::wrap(Box::new(move || { - - // Use visibility change event to detect when user returns to page - let restore_body = restore_body.clone(); - let restore_document = restore_document.clone(); - let original_html = original_html.clone(); - let original_style = original_style.clone(); - let setup_document1 = document.clone(); - let setup_document2 = document.clone(); - - // Create restore function for both visibility and focus events - let restore_body_vis = restore_body.clone(); - let restore_document_vis = restore_document.clone(); - let original_html_vis = original_html.clone(); - let original_style_vis = original_style.clone(); - let setup_document_vis = setup_document1.clone(); - - let restore_body_focus = restore_body.clone(); - let restore_document_focus = restore_document.clone(); - let original_html_focus = original_html.clone(); - let original_style_focus = original_style.clone(); - - // Try multiple approaches - visibility change - let visibility_callback = Closure::wrap(Box::new(move || { - if !setup_document_vis.hidden() { - // Restore original body content and style - restore_body_vis.set_inner_html(&original_html_vis); - if original_style_vis.is_empty() { - let _ = restore_body_vis.remove_attribute("style"); - } else { - let _ = restore_body_vis.set_attribute("style", &original_style_vis); - } - - // Clean up CSS variables - if let Some(document_element) = restore_document_vis.document_element() { - if let Some(html_element) = document_element.dyn_ref::() { - let style = html_element.style(); - let _ = style.remove_property("--print-base-unit"); - let _ = style.remove_property("--print-pixels-per-hour"); - let _ = style.remove_property("--print-start-hour"); - let _ = style.remove_property("--print-end-hour"); - } - } - } - }) as Box); - - // And also try focus event as backup - let focus_callback = Closure::wrap(Box::new(move || { - // Restore original body content and style - restore_body_focus.set_inner_html(&original_html_focus); - if original_style_focus.is_empty() { - let _ = restore_body_focus.remove_attribute("style"); - } else { - let _ = restore_body_focus.set_attribute("style", &original_style_focus); - } - - // Clean up CSS variables - if let Some(document_element) = restore_document_focus.document_element() { - if let Some(html_element) = document_element.dyn_ref::() { - let style = html_element.style(); - let _ = style.remove_property("--print-base-unit"); - let _ = style.remove_property("--print-pixels-per-hour"); - let _ = style.remove_property("--print-start-hour"); - let _ = style.remove_property("--print-end-hour"); - } - } - }) as Box); - - // Set up both listeners - let _ = setup_document2.add_event_listener_with_callback( - "visibilitychange", - visibility_callback.as_ref().unchecked_ref() - ); - - let _ = print_window.add_event_listener_with_callback( - "focus", - focus_callback.as_ref().unchecked_ref() - ); - - visibility_callback.forget(); - focus_callback.forget(); - - // Now trigger the print dialog - let _ = print_window.print(); - }) as Box); - - let _ = window.set_timeout_with_callback_and_timeout_and_arguments_0( - print_callback.as_ref().unchecked_ref(), - 100 // 100ms delay to see the content change - ); - print_callback.forget(); - } + // Set CSS variables on document root + if let Some(document_element) = document.document_element() { + if let Some(html_element) = document_element.dyn_ref::() { + let style = html_element.style(); + let _ = style.set_property("--print-base-unit", &format!("{:.2}", base_unit_value)); + let _ = style.set_property("--print-pixels-per-hour", &format!("{:.2}", pixels_per_hour_value)); + let _ = style.set_property("--print-start-hour", &start_hour.to_string()); + let _ = style.set_property("--print-end-hour", &end_hour.to_string()); } } + + // Copy content from print-preview-content to the hidden print-preview-copy div + let copy_content = move || { + if let Some(preview_content) = document.query_selector(".print-preview-content").ok().flatten() { + if let Some(print_copy) = document.get_element_by_id("print-preview-copy") { + // Clone the preview content + if let Some(content_clone) = preview_content.clone_node_with_deep(true).ok() { + // Clear the print copy div and add the cloned content + print_copy.set_inner_html(""); + let _ = print_copy.append_child(&content_clone); + + // Copy the CSS variables and data attributes from the print-preview-paper + if let Some(preview_paper) = document.query_selector(".print-preview-paper").ok().flatten() { + if let Some(_paper_element) = preview_paper.dyn_ref::() { + // Copy CSS custom properties (variables) + if let Some(print_copy_html) = print_copy.dyn_ref::() { + let style = print_copy_html.style(); + let _ = style.set_property("--print-start-hour", &start_hour.to_string()); + let _ = style.set_property("--print-end-hour", &end_hour.to_string()); + let _ = style.set_property("--print-base-unit", &format!("{:.2}", base_unit_value)); + let _ = style.set_property("--print-pixels-per-hour", &format!("{:.2}", pixels_per_hour_value)); + } + + // Copy data attributes + let _ = print_copy.set_attribute("data-start-hour", &start_hour.to_string()); + let _ = print_copy.set_attribute("data-end-hour", &end_hour.to_string()); + } + } + } + } + } + }; + + // Copy content immediately + copy_content(); + + // Also set up a small delay to catch any async rendering + let copy_callback = Closure::wrap(Box::new(copy_content) as Box); + let _ = window.set_timeout_with_callback_and_timeout_and_arguments_0( + copy_callback.as_ref().unchecked_ref(), + 100 + ); + copy_callback.forget(); } } + || () + }); + } + + let on_print = { + Callback::from(move |_: MouseEvent| { + if let Some(window) = web_sys::window() { + // Print copy is already updated by the use_effect, just trigger print + let _ = window.print(); + } }) }; From 64dbf65bebb2865d3daf5b3ed47e487c1b6868b1 Mon Sep 17 00:00:00 2001 From: Connor Johnstone Date: Fri, 12 Sep 2025 14:10:43 -0400 Subject: [PATCH 7/8] Fix event positioning in print copy with dynamic base-unit recalculation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Measure actual print copy div height after aspect-ratio scaling - Recalculate base-unit based on measured height vs original 720px assumption - Apply position scaling to .week-event elements in print copy only - Parse and recalculate top/height pixel values using scale factor - Add landscape orientation and fit-to-page CSS hints for better printing - Preserve hour filtering with proper data attributes and CSS variables This ensures events display correctly when print copy is scaled to fit page while maintaining proper aspect ratio and hour range filtering. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- frontend/print-preview.css | 19 +++- .../src/components/print_preview_modal.rs | 92 +++++++++++++++---- 2 files changed, 90 insertions(+), 21 deletions(-) diff --git a/frontend/print-preview.css b/frontend/print-preview.css index 1884695..5da387d 100644 --- a/frontend/print-preview.css +++ b/frontend/print-preview.css @@ -1128,7 +1128,7 @@ .print-preview-paper[data-start-hour="7"][data-end-hour="19"]:has(.time-slot.quarter-mode) .time-labels, .print-preview-paper[data-start-hour="7"][data-end-hour="19"]:has(.time-slot.quarter-mode) .week-days-grid { min-height: 1530px !important; } -/* Print Page Setup - Force landscape orientation */ +/* Print Page Setup - Force landscape orientation and fit to page */ @page { size: landscape; margin: 0.5in; @@ -1136,6 +1136,11 @@ /* Print Media Rules - Show only the print-preview-copy when printing */ @media print { + html { + print-color-adjust: exact; /* Preserve colors when printing */ + -webkit-print-color-adjust: exact; + } + /* Hide all top-level app content */ .app { display: none !important; @@ -1147,11 +1152,19 @@ position: absolute !important; left: 0 !important; top: 0 !important; - width: 960px !important; - height: 720px !important; + /* width: 960px !important; */ + /* height: 720px !important; */ + aspect-ratio: 1.2941176470588236 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; + /* Properties to help browsers scale to fit page */ + max-width: 100vw; + max-height: 100vh; + object-fit: contain; + page-break-inside: avoid; + orphans: 1; + widows: 1; } /* Ensure print content uses the full page */ diff --git a/frontend/src/components/print_preview_modal.rs b/frontend/src/components/print_preview_modal.rs index b5255c1..2e72988 100644 --- a/frontend/src/components/print_preview_modal.rs +++ b/frontend/src/components/print_preview_modal.rs @@ -106,8 +106,8 @@ pub fn PrintPreviewModal(props: &PrintPreviewModalProps) -> Html { { let start_hour = *start_hour; let end_hour = *end_hour; - let base_unit_value = base_unit; - let pixels_per_hour_value = pixels_per_hour; + let time_increment = props.time_increment; + let original_base_unit = base_unit; use_effect(move || { if let Some(window) = web_sys::window() { if let Some(document) = window.document() { @@ -115,8 +115,6 @@ pub fn PrintPreviewModal(props: &PrintPreviewModalProps) -> Html { if let Some(document_element) = document.document_element() { if let Some(html_element) = document_element.dyn_ref::() { let style = html_element.style(); - let _ = style.set_property("--print-base-unit", &format!("{:.2}", base_unit_value)); - let _ = style.set_property("--print-pixels-per-hour", &format!("{:.2}", pixels_per_hour_value)); let _ = style.set_property("--print-start-hour", &start_hour.to_string()); let _ = style.set_property("--print-end-hour", &end_hour.to_string()); } @@ -132,22 +130,80 @@ pub fn PrintPreviewModal(props: &PrintPreviewModalProps) -> Html { print_copy.set_inner_html(""); let _ = print_copy.append_child(&content_clone); - // Copy the CSS variables and data attributes from the print-preview-paper - if let Some(preview_paper) = document.query_selector(".print-preview-paper").ok().flatten() { - if let Some(_paper_element) = preview_paper.dyn_ref::() { - // Copy CSS custom properties (variables) - if let Some(print_copy_html) = print_copy.dyn_ref::() { - let style = print_copy_html.style(); - let _ = style.set_property("--print-start-hour", &start_hour.to_string()); - let _ = style.set_property("--print-end-hour", &end_hour.to_string()); - let _ = style.set_property("--print-base-unit", &format!("{:.2}", base_unit_value)); - let _ = style.set_property("--print-pixels-per-hour", &format!("{:.2}", pixels_per_hour_value)); + // Get the actual rendered height of the print copy div and recalculate base-unit + if let Some(print_copy_html) = print_copy.dyn_ref::() { + // Temporarily make visible to measure height, then hide again + let original_display = print_copy_html.style().get_property_value("display").unwrap_or_default(); + let _ = print_copy_html.style().set_property("display", "block"); + let _ = print_copy_html.style().set_property("visibility", "hidden"); + let _ = print_copy_html.style().set_property("position", "absolute"); + let _ = print_copy_html.style().set_property("top", "-9999px"); + + // Now measure the height + let actual_height = print_copy_html.client_height() as f64; + + // Restore original display + let _ = print_copy_html.style().set_property("display", &original_display); + let _ = print_copy_html.style().remove_property("visibility"); + let _ = print_copy_html.style().remove_property("position"); + let _ = print_copy_html.style().remove_property("top"); + + // Recalculate base-unit and pixels-per-hour based on actual height + let visible_hours = (end_hour - start_hour) as f64; + let slots_per_hour = if time_increment == 15 { 4.0 } else { 2.0 }; + let header_height = 50.0; + let header_border = 2.0; + let container_spacing = 8.0; + let total_overhead = header_height + header_border + container_spacing; + let available_height = actual_height - total_overhead; + let actual_base_unit = available_height / (visible_hours * slots_per_hour); + let actual_pixels_per_hour = actual_base_unit * slots_per_hour; + + + // Set CSS variables with recalculated values + let style = print_copy_html.style(); + let _ = style.set_property("--print-base-unit", &format!("{:.2}", actual_base_unit)); + let _ = style.set_property("--print-pixels-per-hour", &format!("{:.2}", actual_pixels_per_hour)); + let _ = style.set_property("--print-start-hour", &start_hour.to_string()); + let _ = style.set_property("--print-end-hour", &end_hour.to_string()); + + // Copy data attributes + let _ = print_copy.set_attribute("data-start-hour", &start_hour.to_string()); + let _ = print_copy.set_attribute("data-end-hour", &end_hour.to_string()); + + // Recalculate event positions using the new base-unit + let events = print_copy.query_selector_all(".week-event").unwrap(); + let scale_factor = actual_base_unit / original_base_unit; + + for i in 0..events.length() { + if let Some(event_element) = events.get(i) { + if let Some(event_html) = event_element.dyn_ref::() { + let event_style = event_html.style(); + + // Get current positioning values and recalculate + if let Ok(current_top) = event_style.get_property_value("top") { + if current_top.ends_with("px") { + if let Ok(top_px) = current_top[..current_top.len()-2].parse::() { + let new_top = top_px * scale_factor; + let _ = event_style.set_property("top", &format!("{:.2}px", new_top)); + } + } + } + + if let Ok(current_height) = event_style.get_property_value("height") { + if current_height.ends_with("px") { + if let Ok(height_px) = current_height[..current_height.len()-2].parse::() { + let new_height = height_px * scale_factor; + let _ = event_style.set_property("height", &format!("{:.2}px", new_height)); + } + } + } + } } - - // Copy data attributes - let _ = print_copy.set_attribute("data-start-hour", &start_hour.to_string()); - let _ = print_copy.set_attribute("data-end-hour", &end_hour.to_string()); } + + web_sys::console::log_1(&format!("Height: {:.2}, Original base-unit: {:.2}, New base-unit: {:.2}, Scale factor: {:.2}", + actual_height, original_base_unit, actual_base_unit, scale_factor).into()); } } } From ca1ca0c3b1740f6042214c73b9ebb8505449c2a9 Mon Sep 17 00:00:00 2001 From: Connor Johnstone Date: Fri, 12 Sep 2025 14:55:07 -0400 Subject: [PATCH 8/8] Implement comprehensive theme system with FontAwesome icons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- frontend/index.html | 1 + frontend/print-preview.css | 61 ++++++-- frontend/src/components/calendar_header.rs | 2 +- frontend/src/components/sidebar.rs | 4 +- frontend/styles.css | 174 +++++++++++++++++++-- 5 files changed, 213 insertions(+), 29 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 8d162e3..16d07dc 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -9,6 +9,7 @@ +