Lines Matching +full:star +full:- +full:light
1 /* Compact Calendar Plugin - Sleek Design */
4 .calendar-compact-container {
7 max-width: 1200px;
8 min-width: 320px;
10 max-height: 90vh;
11 background-color: var(--background-site, #ffffff);
12 border: 1px solid var(--border-color, #d0d0d0);
13 border-radius: 4px;
14 box-shadow: 0 2px 4px rgba(0,0,0,0.06);
16 …font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-…
17 font-size: 12px;
20 /* Dark theme borders - match sidebar widget style */
21 .calendar-theme-matrix.calendar-compact-container {
22 border: 2px solid var(--border-main, #00cc07);
23 box-shadow: 0 0 10px var(--shadow-color, rgba(0, 204, 7, 0.3));
26 .calendar-theme-purple.calendar-compact-container {
27 border: 2px solid var(--border-main, #9b59b6);
28 box-shadow: 0 0 10px var(--shadow-color, rgba(155, 89, 182, 0.3));
31 .calendar-theme-pink.calendar-compact-container {
32 border: 2px solid var(--border-main, #ff1493);
33 box-shadow: 0 0 10px var(--shadow-color, rgba(255, 20, 147, 0.4));
37 @media (max-width: 768px) {
38 .calendar-compact-container {
39 flex-direction: column;
41 min-height: 400px;
42 max-height: none;
45 .calendar-compact-left {
47 min-width: 100% !important;
48 border-right: none !important;
49 border-bottom: 1px solid var(--border-color, #e0e0e0);
51 min-height: 300px;
54 .calendar-compact-right {
56 min-width: 100% !important;
57 max-height: 400px;
62 @media (max-width: 1024px) and (min-width: 769px) {
63 .calendar-compact-container {
64 max-width: 100%;
67 .calendar-compact-left {
69 min-width: 400px;
72 .calendar-compact-right {
74 min-width: 250px;
79 @media (max-width: 600px) {
80 .calendar-compact-container {
81 font-size: 11px;
83 max-height: none;
87 /* Left side: Calendar - FLEXIBLE */
88 .calendar-compact-left {
90 min-width: 400px;
91 border-right: 1px solid var(--border-color, #e0e0e0);
93 flex-direction: column;
94 background: var(--background-site);
98 /* Right side: Event list - FLEXIBLE */
99 .calendar-compact-right {
101 min-width: 250px;
102 max-width: 400px;
104 flex-direction: column;
105 background: var(--background-site);
109 /* Calendar header - COMPACT */
110 .calendar-compact-header {
112 align-items: center;
115 background: var(--background-header);
116 color: var(--text-primary);
117 border-bottom: 1px solid var(--border-color, #e0e0e0);
121 .calendar-namespace-filter {
123 align-items: center;
126 background: var(--cell-today-bg, #e8f5e9);
127 border: 1px solid var(--border-main, #81c784);
128 border-radius: 4px;
130 font-size: 11px;
133 .namespace-filter-label {
134 color: var(--text-bright, #2e7d32);
135 font-weight: 600;
138 .namespace-filter-name {
139 background: var(--text-bright, #00cc07);
140 color: var(--background-site, white);
142 border-radius: 3px;
143 font-weight: 500;
144 font-family: monospace;
145 font-size: 10px;
148 .namespace-filter-clear {
151 color: var(--text-bright, #00cc07);
153 font-size: 16px;
158 align-items: center;
159 justify-content: center;
160 border-radius: 3px;
161 margin-left: auto;
165 .namespace-filter-clear:hover {
166 background: var(--cell-today-bg, rgba(0, 204, 7, 0.1));
169 .namespace-filter-badge {
171 padding-right: 24px !important;
174 .filter-clear-inline {
178 transform: translateY(-50%);
181 color: var(--text-dim, #999);
183 font-size: 12px;
187 border-radius: 50%;
189 align-items: center;
190 justify-content: center;
192 line-height: 1;
195 .filter-clear-inline:hover {
196 background: var(--cell-bg, rgba(211, 47, 47, 0.1));
197 color: var(--text-bright, #d32f2f);
200 .calendar-compact-header h3 {
202 font-size: 14px;
203 font-weight: 600;
204 color: var(--text-primary, #2c3e50);
206 text-align: center;
209 .calendar-month-picker {
211 user-select: none;
214 border-radius: 4px;
217 .calendar-month-picker:hover {
218 background: var(--cell-today-bg, #f0f0f0);
219 color: var(--text-bright, #008800);
220 box-shadow: 0 0 3px var(--shadow-color, rgba(0,0,0,0.1));
223 .month-picker-overlay {
231 align-items: center;
232 justify-content: center;
233 z-index: 10000;
236 .month-picker-dialog {
237 background: var(--background-site, white);
238 border-radius: 8px;
240 box-shadow: 0 4px 20px var(--shadow-color, rgba(0, 0, 0, 0.3));
241 min-width: 300px;
242 border: 1px solid var(--border-main, transparent);
245 .month-picker-dialog h4 {
247 font-size: 16px;
248 font-weight: 600;
249 color: var(--text-primary, #2c3e50);
252 .month-picker-selects {
255 margin-bottom: 16px;
258 .month-picker-select {
261 border: 1px solid var(--border-color, #d0d0d0);
262 border-radius: 4px;
263 font-size: 14px;
264 background: var(--cell-bg, white);
265 color: var(--text-primary, #333);
269 .month-picker-select:focus {
271 border-color: var(--text-bright, #008800);
272 box-shadow: 0 0 0 2px var(--shadow-color, rgba(0, 136, 0, 0.1));
275 .month-picker-actions {
278 justify-content: flex-end;
281 .cal-nav-btn {
282 background: var(--border-main);
283 border: 1px solid var(--border-color);
284 color: var(--background-site);
287 border-radius: 4px;
289 font-size: 16px;
293 align-items: center;
294 justify-content: center;
297 .cal-nav-btn:hover {
299 box-shadow: 0 0 6px var(--shadow-color, rgba(0,0,0,0.3));
303 .cal-nav-btn:active {
306 box-shadow: none;
309 .cal-today-btn {
310 background: var(--border-main);
311 border: 1px solid var(--border-color);
312 color: var(--background-site);
313 font-size: 11px;
314 font-weight: 600;
316 border-radius: 4px;
321 .cal-today-btn:hover {
323 box-shadow: 0 0 6px var(--shadow-color, rgba(0,0,0,0.3));
327 .cal-today-btn:active {
330 box-shadow: none;
333 /* Calendar grid - Excel-like sizing - RESPONSIVE */
334 .calendar-compact-grid {
336 border-collapse: collapse;
337 table-layout: fixed;
343 /* Day name headers (SMTWTFS) - rendered as a separate grid div above the table
344 to avoid Firefox table-cell height issues where th matches td height */
345 .calendar-day-headers {
347 grid-template-columns: repeat(7, 1fr);
348 background: var(--background-header);
349 border-bottom: 1px solid var(--border-color, #d0d0d0);
354 .calendar-day-headers span {
356 line-height: 22px;
357 font-size: 10px;
358 font-weight: 600;
359 text-align: center;
360 color: var(--text-primary);
361 border-right: 1px solid var(--border-color, #e8e8e8);
362 box-sizing: border-box;
365 .calendar-day-headers span:last-child {
366 border-right: none;
369 .calendar-compact-grid tbody td {
371 min-height: 40px;
372 border: 1px solid var(--border-color, #e8e8e8);
373 border-top: none;
374 border-left: none;
375 background-color: var(--background-site); /* Use scoped CSS var from PHP */
376 color: var(--text-primary);
380 vertical-align: top;
385 @media (max-width: 600px) {
386 .calendar-compact-grid tbody td {
388 min-height: 35px;
392 .calendar-day-headers span {
394 line-height: 18px;
395 font-size: 9px;
399 .calendar-compact-grid tbody td:first-child {
400 border-left: 1px solid var(--border-color, #e8e8e8);
403 .calendar-compact-grid tbody td:hover {
404 background-color: var(--background-alt); /* Hover state uses scoped var */
407 .cal-empty {
408 background: var(--background-site);
412 .cal-empty:hover {
413 background: var(--background-site);
416 .cal-day {
418 transition: background 0.15s, box-shadow 0.15s;
421 .cal-day:hover {
422 background: var(--cell-today-bg) !important;
423 box-shadow: inset 0 0 0 1px var(--border-main, rgba(0,0,0,0.1));
426 .cal-day:focus {
427 outline: 2px solid var(--text-bright, #00cc07);
428 outline-offset: -2px;
429 background: var(--cell-today-bg) !important;
432 .cal-day:focus-visible {
433 outline: 2px solid var(--text-bright, #00cc07);
434 outline-offset: -2px;
437 .cal-today {
438 background: var(--cell-today-bg);
441 .cal-today:hover {
442 box-shadow: inset 0 0 0 2px var(--border-main, rgba(0,0,0,0.15));
445 .cal-has-events {
446 /* background removed - set via inline style with template colors */
449 .cal-has-events:hover {
450 /* background removed - inline style handles this */
453 .day-num {
454 display: inline-block;
455 font-size: 11px;
456 font-weight: 500;
457 color: var(--text-primary, #333);
461 .cal-today .day-num,
462 .day-num-today {
463 background: var(--border-main, #008800);
464 color: var(--background-site, white) !important;
465 border-radius: 50%;
466 font-weight: 700;
469 line-height: 20px;
470 text-align: center;
472 display: inline-block;
475 .event-indicators {
482 flex-direction: column;
484 pointer-events: none;
488 .event-bar {
490 min-height: 6px;
492 border-radius: 2px;
494 pointer-events: auto;
496 box-shadow: 0 1px 2px rgba(0,0,0,0.1);
501 .event-bar:hover {
503 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
504 z-index: 10;
507 .event-bar-no-time {
509 order: -1;
513 .event-bar-timed {
518 /* Multi-day event styling - creates visual continuity */
519 .event-bar-continues {
520 /* Event continues from previous day - extend left to cell edge */
521 border-top-left-radius: 0;
522 border-bottom-left-radius: 0;
523 margin-left: -20px;
524 padding-left: 20px;
527 .event-bar-continuing {
528 /* Event continues to next day - extend right to cell edge */
529 border-top-right-radius: 0;
530 border-bottom-right-radius: 0;
531 margin-right: -2px;
532 padding-right: 2px;
535 .event-bar-continues.event-bar-continuing {
536 /* Event continues both ways (middle of span) - no border radius, extends both sides */
537 border-radius: 0;
541 .event-bar-important {
542 box-shadow: 0 1px 3px rgba(255, 215, 0, 0.4);
545 /* Star is rendered via ::before pseudo-element */
546 .event-bar-important.event-bar-has-star::before {
549 left: -12px;
551 transform: translateY(-50%);
552 font-size: 7px;
553 line-height: 1;
554 filter: drop-shadow(0 0 1px rgba(0,0,0,0.3));
555 pointer-events: none;
558 /* Hide the inline star span - we use ::before instead */
559 .event-bar-star {
563 /* Old event dot - removing */
564 .event-dot {
568 /* Event list header - COMPACT */
569 .event-list-header {
571 align-items: center;
572 justify-content: space-between;
574 border-bottom: 1px solid var(--border-color, #e0e0e0);
575 background: var(--background-header);
577 flex-wrap: nowrap;
581 .event-list-header-content {
583 align-items: center;
586 min-width: 0;
589 .event-list-header h4 {
591 font-size: 12px;
592 font-weight: 600;
593 color: var(--text-primary);
594 white-space: nowrap;
597 .namespace-badge {
598 background: var(--cell-today-bg, #e8f5e9);
599 color: var(--text-bright, #388e3c);
601 border-radius: 10px;
602 font-size: 9px;
603 font-weight: 600;
604 text-transform: uppercase;
605 letter-spacing: 0.3px;
606 border: 1px solid var(--border-color, transparent);
609 /* Event search bar - inline in header */
610 .event-search-container-inline {
613 min-width: 60px;
614 max-width: 160px;
620 .event-search-input-inline {
623 border: 1px solid var(--border-color, #d0d0d0);
624 border-radius: 3px 0 0 3px;
625 font-size: 11px;
627 transition: border-color 0.2s, box-shadow 0.2s;
628 background: var(--cell-bg);
629 color: var(--text-primary);
630 min-width: 0;
633 .event-search-input-inline:focus {
634 border-color: var(--text-bright, #00cc07);
635 box-shadow: 0 0 0 2px var(--shadow-color, rgba(0, 204, 7, 0.1));
638 .event-search-input-inline::placeholder {
639 color: var(--text-dim);
640 font-size: 10px;
643 .event-search-clear-inline {
647 transform: translateY(-50%);
650 color: var(--text-dim);
653 font-size: 12px;
654 line-height: 1;
658 .event-search-clear-inline:hover {
659 color: var(--text-primary);
662 .event-search-mode-inline {
663 background: var(--cell-bg, #f0f0f0);
664 border: 1px solid var(--border-color, #d0d0d0);
665 border-left: none;
666 border-radius: 0 3px 3px 0;
669 font-size: 10px;
671 color: var(--text-dim, #666);
673 align-items: center;
674 flex-shrink: 0;
677 .event-search-mode-inline:hover {
678 background: var(--cell-today-bg, #e8f5e9);
679 color: var(--text-bright, #00cc07);
682 .event-search-mode-inline.all-dates {
683 background: var(--text-bright, #00cc07);
684 color: var(--background-site, white);
685 border-color: var(--text-bright, #00cc07);
688 .event-search-mode-inline.all-dates:hover {
692 .no-search-results {
693 text-align: center;
694 color: var(--text-dim);
695 font-size: 12px;
697 font-style: italic;
700 .add-event-compact {
701 background: var(--border-main);
702 color: var(--background-site);
705 border-radius: 3px;
706 font-size: 11px;
707 font-weight: 500;
710 flex-shrink: 0;
711 white-space: nowrap;
714 .add-event-compact:hover {
716 box-shadow: 0 0 6px var(--shadow-color, rgba(0,0,0,0.3));
720 .add-event-compact:active {
725 /* Event list scrollable area - COMPACT */
726 .event-list-compact {
728 overflow-y: auto;
730 background: var(--background-site);
733 .event-list-compact::-webkit-scrollbar {
737 .event-list-compact::-webkit-scrollbar-track {
738 background: var(--cell-bg, #f5f5f5);
741 .event-list-compact::-webkit-scrollbar-thumb {
742 background: var(--border-color, #ccc);
743 border-radius: 3px;
746 .event-list-compact::-webkit-scrollbar-thumb:hover {
747 background: var(--text-dim, #aaa);
750 /* Event items in list - SUPER COMPACT with checkbox on right */
751 .event-compact-item {
753 align-items: flex-start;
754 margin-bottom: 4px;
755 background-color: var(--background-site);
756 color: var(--text-primary);
757 border: 1px solid var(--border-color, #e0e0e0);
758 border-left: 3px solid var(--text-bright, #3498db);
759 border-radius: 3px;
761 transition: box-shadow 0.15s, background 0.15s, transform 0.15s;
766 .event-compact-item:hover {
767 box-shadow: 0 1px 3px rgba(0,0,0,0.08);
768 background-color: var(--background-alt); /* Slightly different on hover */
771 .event-highlighted {
772 animation: highlightPulse 0.6s ease-in-out;
773 background: var(--tomorrow-bg, #fff9e6) !important;
774 box-shadow: 0 2px 8px var(--shadow-color, rgba(255, 193, 7, 0.4)) !important;
779 background: var(--background-site, #ffffff);
780 box-shadow: 0 0 0 rgba(255, 193, 7, 0);
784 box-shadow: 0 4px 12px rgba(255, 193, 7, 0.6);
789 box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4);
795 .event-important {
796 background: var(--important-bg, rgba(0, 204, 7, 0.06)) !important;
797 border-right: 2px solid var(--important-border, rgba(0, 204, 7, 0.3));
800 .event-important:hover {
801 background: var(--important-bg-hover, rgba(0, 204, 7, 0.1)) !important;
804 .event-important-star {
805 font-size: 10px;
806 flex-shrink: 0;
809 /* Theme-specific important event colors */
810 .calendar-theme-matrix .event-important,
811 .sidebar-matrix .event-important {
812 --important-bg: rgba(0, 204, 7, 0.08);
813 --important-bg-hover: rgba(0, 204, 7, 0.12);
814 --important-border: rgba(0, 204, 7, 0.4);
817 .calendar-theme-purple .event-important,
818 .sidebar-purple .event-important {
819 --important-bg: rgba(156, 39, 176, 0.08);
820 --important-bg-hover: rgba(156, 39, 176, 0.12);
821 --important-border: rgba(156, 39, 176, 0.4);
824 .calendar-theme-pink .event-important,
825 .sidebar-pink .event-important {
826 --important-bg: rgba(255, 105, 180, 0.1);
827 --important-bg-hover: rgba(255, 105, 180, 0.15);
828 --important-border: rgba(255, 105, 180, 0.5);
831 .calendar-theme-professional .event-important {
832 --important-bg: rgba(33, 150, 243, 0.08);
833 --important-bg-hover: rgba(33, 150, 243, 0.12);
834 --important-border: rgba(33, 150, 243, 0.4);
837 .calendar-theme-wiki .event-important {
838 --important-bg: rgba(0, 102, 204, 0.06);
839 --important-bg-hover: rgba(0, 102, 204, 0.1);
840 --important-border: rgba(0, 102, 204, 0.3);
843 .event-completed {
845 background: var(--cell-bg, #f5f5f5);
848 .event-completed .event-title-compact {
849 text-decoration: line-through;
850 color: var(--text-dim, #999);
853 .event-past {
855 background: var(--cell-bg, #fafafa);
856 font-size: 10px;
858 margin-bottom: 2px;
863 .event-past:hover {
865 background: var(--cell-today-bg, #f5f5f5);
868 .event-past-expanded {
870 background: var(--cell-bg, #f9f9f9) !important;
872 font-size: 12px !important;
875 .event-past-expanded .event-title-compact {
876 font-size: 12px !important;
877 color: var(--text-dim, #666) !important;
880 .event-past-expanded .event-date-time {
881 font-size: 11px !important;
882 color: var(--text-dim, #888) !important;
885 .event-past .event-title-compact {
886 font-size: 10px;
887 color: var(--text-dim, #aaa);
888 font-weight: 400;
891 .event-past .event-date-time {
892 font-size: 9px;
893 color: var(--text-dim, #bbb);
896 .event-past .event-action-btn {
897 font-size: 11px;
901 .event-past .event-action-btn:hover {
905 .event-today-badge {
906 background: var(--border-main, #9b59b6);
907 color: var(--background-site, white);
909 border-radius: 3px;
910 font-size: 9px;
911 font-weight: 600;
912 letter-spacing: 0.5px;
913 display: inline-block;
914 vertical-align: middle;
915 margin-left: auto; /* Right-align */
919 .event-pastdue-badge {
920 background: var(--pastdue-color, #e74c3c);
923 border-radius: 3px;
924 font-size: 9px;
925 font-weight: 600;
926 letter-spacing: 0.5px;
927 display: inline-block;
928 vertical-align: middle;
929 margin-left: auto; /* Right-align */
933 .event-pastdue {
934 border: 2px solid var(--pastdue-color, #e74c3c) !important;
935 border-radius: 4px;
939 .event-namespace-badge {
940 background: var(--text-bright, #008800);
941 color: var(--background-site, white);
943 border-radius: 3px;
944 font-size: 9px;
945 font-weight: 500;
946 display: inline-block;
947 vertical-align: middle;
948 margin-left: 4px;
953 .event-namespace-badge:hover {
957 .event-conflict-badge {
958 background: var(--border-main, #ff9800);
959 color: var(--background-site, white);
961 border-radius: 2px;
962 font-size: 9px;
963 display: inline-block;
964 vertical-align: middle;
965 margin-left: 3px;
967 animation: pulse-warning 2s infinite;
968 line-height: 14px;
969 border: 1px solid var(--text-bright, #ff9800);
972 @keyframes pulse-warning {
981 .event-conflict-badge:hover {
982 background: var(--text-bright, #f57c00);
986 /* Custom conflict tooltip - SMALLER FOR MAIN CALENDAR */
987 .conflict-tooltip {
989 z-index: 10000;
990 background: var(--background-site, white);
991 border: 1px solid var(--border-main, #ff9800);
992 border-radius: 3px;
993 box-shadow: 0 2px 6px var(--shadow-color, rgba(0,0,0,0.2));
995 min-width: 120px;
996 max-width: 200px;
999 pointer-events: none;
1002 /* Custom tooltip that appears above and to the left - FIXED POSITION */
1003 [data-tooltip] {
1008 [data-tooltip]:before {
1009 content: attr(data-tooltip);
1013 color: var(--background-site, #fff);
1014 font-size: 9px;
1015 line-height: 1.3;
1016 white-space: pre-line;
1017 border-radius: 3px;
1019 pointer-events: none;
1021 min-width: 120px;
1022 max-width: 200px;
1023 z-index: 10000;
1024 text-align: left;
1025 box-shadow: 0 2px 8px rgba(0,0,0,0.3);
1028 [data-tooltip]:hover:before {
1032 /* Pink theme tooltips - with hearts! */
1033 .sidebar-pink [data-tooltip]:before {
1034 background: linear-gradient(135deg, #ff1493 0%, #ff69b4 100%);
1037 box-shadow: 0 0 15px rgba(255, 20, 147, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
1038 font-weight: 600;
1041 .sidebar-pink [data-tooltip]:after {
1044 font-size: 12px;
1046 pointer-events: none;
1048 z-index: 10001;
1049 filter: drop-shadow(0 0 3px rgba(255, 20, 147, 0.8));
1052 .sidebar-pink [data-tooltip]:hover:after {
1056 /* Position data-tooltip with JavaScript for no cutoff */
1057 .data-tooltip-positioned:before {
1062 .sidebar-widget,
1063 .sidebar-matrix {
1067 .conflict-tooltip-header {
1068 background: var(--border-main, #ff9800);
1069 color: var(--background-site, white);
1071 font-weight: 600;
1072 font-size: 10px;
1073 border-radius: 2px 2px 0 0;
1076 .conflict-tooltip-body {
1078 font-size: 9px;
1079 line-height: 1.4;
1082 .conflict-item {
1084 color: var(--text-primary, #333);
1085 border-bottom: 1px solid var(--border-color, #f0f0f0);
1086 font-size: 9px;
1089 .conflict-item:last-child {
1090 border-bottom: none;
1093 .event-info {
1095 min-width: 0;
1096 padding-right: 60px;
1097 text-align: left;
1100 .event-title-row {
1102 align-items: center;
1106 .event-title-compact {
1107 font-size: 12px;
1108 font-weight: 600;
1109 color: var(--text-primary, #2c3e50);
1111 text-overflow: ellipsis;
1112 white-space: nowrap;
1113 text-align: left;
1116 .event-meta-compact {
1117 font-size: 10px;
1118 color: var(--text-dim, #666);
1119 margin-top: 1px;
1120 text-align: left;
1123 .event-date-time {
1124 font-weight: 500;
1127 .event-desc-compact {
1128 font-size: 10px;
1129 color: var(--text-dim, #666);
1130 line-height: 1.4;
1131 margin-top: 2px;
1132 text-align: left;
1133 word-wrap: break-word;
1134 overflow-wrap: break-word;
1137 .event-desc-compact img.event-image {
1138 max-width: 100%;
1141 border-radius: 3px;
1145 .event-desc-compact a {
1146 color: var(--text-bright, #008800);
1147 text-decoration: none;
1148 border-bottom: 1px dotted var(--text-bright, #008800);
1151 .event-desc-compact a:hover {
1152 color: var(--text-primary, #388e3c);
1153 border-bottom-style: solid;
1156 .event-desc-compact strong,
1157 .event-desc-compact b {
1158 font-weight: 600;
1159 color: var(--text-primary, #333);
1162 .event-desc-compact em,
1163 .event-desc-compact i {
1164 font-style: italic;
1167 .event-desc-compact code {
1168 background: var(--cell-bg, #f5f5f5);
1170 border-radius: 2px;
1171 font-family: monospace;
1172 font-size: 9px;
1173 color: var(--text-primary, inherit);
1176 .event-actions-compact {
1182 flex-shrink: 0;
1185 .event-action-btn {
1188 font-size: 14px;
1195 .event-action-btn:hover {
1200 .task-checkbox {
1208 flex-shrink: 0;
1209 accent-color: var(--text-bright, #008800);
1210 /* Custom checkbox - bright border for all themes */
1212 -webkit-appearance: none;
1213 border: 2px solid var(--text-bright, #008800);
1214 border-radius: 3px;
1215 background: var(--cell-bg, #fff);
1217 box-shadow: 0 0 3px var(--shadow-color, rgba(0,0,0,0.1));
1220 .task-checkbox:hover {
1221 border-color: var(--text-bright, #008800);
1222 box-shadow: 0 0 8px var(--shadow-color, rgba(0,0,0,0.25));
1226 .task-checkbox:checked {
1227 background: var(--text-bright, #008800);
1228 border-color: var(--text-bright, #008800);
1229 box-shadow: 0 0 6px var(--shadow-color, rgba(0,0,0,0.2));
1232 .task-checkbox:checked::after {
1235 text-align: center;
1236 color: var(--background-site, white);
1237 font-size: 11px;
1238 font-weight: 700;
1239 line-height: 12px;
1242 .no-events-msg {
1243 text-align: center;
1244 color: var(--text-dim, #999);
1245 font-size: 12px;
1246 font-style: italic;
1250 /* Sleek Event Dialog - FULLY RESPONSIVE */
1251 .event-dialog-compact {
1257 z-index: 9999;
1259 align-items: center;
1260 justify-content: center;
1263 box-sizing: border-box;
1264 overflow-y: auto;
1272 .dialog-content-sleek {
1274 background: var(--background-site, #ffffff);
1276 max-width: 450px;
1277 max-height: calc(100vh - 40px);
1278 border-radius: 8px;
1279 box-shadow: 0 8px 32px var(--shadow-color, rgba(0,0,0,0.2));
1280 z-index: 10000;
1284 flex-direction: column;
1286 border: 1px solid var(--border-main, transparent);
1290 @media (max-width: 768px) {
1291 .event-dialog-compact {
1295 .dialog-content-sleek {
1296 max-width: 100%;
1297 width: calc(100% - 20px);
1298 max-height: calc(100vh - 20px);
1302 @media (max-width: 480px) {
1303 .event-dialog-compact {
1305 align-items: flex-start;
1308 .dialog-content-sleek {
1310 max-width: 100%;
1311 max-height: 100vh;
1312 border-radius: 0;
1328 .dialog-header-sleek {
1330 align-items: center;
1331 justify-content: space-between;
1333 background: var(--background-header, #2c3e50);
1334 color: var(--text-bright, white);
1336 flex-shrink: 0;
1337 border-bottom: 1px solid var(--border-main, transparent);
1340 .dialog-drag-handle {
1344 .dialog-header-sleek h3 {
1346 font-size: 15px;
1347 font-weight: 600;
1350 .dialog-close-btn {
1351 background: var(--cell-today-bg, rgba(255,255,255,0.2));
1354 font-size: 22px;
1357 border-radius: 50%;
1360 align-items: center;
1361 justify-content: center;
1363 line-height: 1;
1365 flex-shrink: 0;
1368 .dialog-close-btn:hover {
1369 background: var(--cell-today-bg, rgba(255,255,255,0.3));
1373 .sleek-form {
1375 overflow-y: auto;
1376 overflow-x: hidden;
1378 max-height: calc(100vh - 160px);
1379 background: var(--background-site, #ffffff);
1383 @media (max-height: 600px) {
1384 .sleek-form {
1385 max-height: calc(100vh - 120px);
1389 @media (max-height: 500px) {
1390 .sleek-form {
1391 max-height: calc(100vh - 100px);
1396 @media (max-width: 480px) {
1397 .sleek-form {
1401 .sleek-form .form-field {
1402 margin-bottom: 8px;
1405 .sleek-form .input-sleek,
1406 .sleek-form .textarea-sleek,
1407 .sleek-form textarea,
1408 .sleek-form select {
1410 max-width: 100% !important;
1411 box-sizing: border-box !important;
1414 .sleek-form .form-row-group {
1419 .form-field {
1420 margin-bottom: 6px;
1424 .input-compact {
1427 font-size: 11px !important;
1430 .textarea-compact {
1431 min-height: 28px !important;
1433 font-size: 11px !important;
1434 line-height: 1.3 !important;
1437 .field-label-compact {
1438 font-size: 10px !important;
1439 margin-bottom: 2px !important;
1440 font-weight: 500;
1441 color: var(--text-dim, #555);
1444 .form-field-checkbox-compact {
1446 margin-bottom: 6px !important;
1449 .checkbox-label-compact {
1450 font-size: 10px !important;
1454 .checkbox-label-compact input[type="checkbox"] {
1457 accent-color: var(--text-bright, #008800);
1460 .color-picker-compact {
1465 @media (max-width: 480px) {
1466 .form-field {
1467 margin-bottom: 8px;
1471 .form-field-checkbox {
1472 background: var(--cell-bg, #f1f8f4);
1474 border-radius: 4px;
1475 border: 1px solid var(--border-main, #008800);
1478 .checkbox-label {
1480 align-items: center;
1483 font-size: 11px;
1484 font-weight: 500;
1485 color: var(--text-primary, #388e3c);
1488 .checkbox-label input[type="checkbox"] {
1492 accent-color: var(--text-bright, #008800);
1495 .recurring-options {
1496 background: var(--cell-bg, #f1f8f4);
1498 border-radius: 4px;
1499 border: 1px solid var(--border-main, #81c784);
1500 margin-top: 8px;
1503 .form-row-group {
1505 grid-template-columns: 1fr 1fr;
1507 margin-bottom: 10px;
1510 @media (max-width: 768px) {
1511 .form-row-group {
1512 grid-template-columns: 1fr;
1517 .field-label {
1519 font-size: 11px;
1520 font-weight: 600;
1521 color: var(--text-primary, #2c3e50);
1522 margin-bottom: 5px;
1523 text-transform: uppercase;
1524 letter-spacing: 0.3px;
1527 @media (max-width: 480px) {
1528 .field-label {
1529 font-size: 10px;
1533 .input-sleek {
1535 color: var(--text-primary, #333);
1537 border: 2px solid var(--border-color, #e0e0e0);
1538 border-radius: 4px;
1539 font-size: 13px;
1540 font-family: inherit;
1542 transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
1543 background: var(--cell-bg, #fafafa);
1544 box-sizing: border-box;
1547 .input-sleek:focus {
1549 border-color: var(--text-bright, #008800);
1550 background: var(--background-site, white);
1551 box-shadow: 0 0 0 3px var(--shadow-color, rgba(33, 150, 243, 0.1));
1554 .input-sleek::placeholder,
1555 .textarea-sleek::placeholder {
1556 color: var(--text-dim, #999);
1559 .textarea-sleek {
1562 min-height: 60px;
1563 line-height: 1.4;
1564 box-sizing: border-box;
1567 .color-picker-container {
1569 align-items: center;
1573 .color-picker-wrapper {
1575 align-items: center;
1579 .color-picker-wrapper .color-select {
1584 .custom-time-picker,
1585 .custom-date-picker {
1587 justify-content: space-between;
1588 align-items: center;
1590 text-align: left;
1591 background: var(--cell-bg, #fafafa);
1592 min-width: 120px;
1596 .custom-time-picker:disabled,
1597 .custom-date-picker:disabled {
1599 cursor: not-allowed;
1602 .custom-time-picker:focus,
1603 .custom-date-picker:focus {
1604 outline: 2px solid var(--text-bright, #00cc07);
1605 outline-offset: -2px;
1608 .custom-time-picker:focus-visible,
1609 .custom-date-picker:focus-visible {
1610 outline: 2px solid var(--text-bright, #00cc07);
1611 outline-offset: -2px;
1614 .custom-time-picker .time-display,
1615 .custom-date-picker .date-display {
1619 .custom-time-picker .time-arrow,
1620 .custom-date-picker .date-arrow {
1621 font-size: 10px;
1622 margin-left: 8px;
1626 .custom-time-picker.open .time-arrow,
1627 .custom-date-picker.open .date-arrow {
1631 .time-picker-wrapper,
1632 .date-picker-wrapper {
1636 .time-dropdown,
1637 .date-dropdown {
1643 max-height: 280px;
1644 overflow-y: auto;
1645 background: var(--background-site, white);
1646 border: 2px solid var(--border-color, #e0e0e0);
1647 border-top: none;
1648 border-radius: 0 0 6px 6px;
1649 z-index: 10000;
1650 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
1653 .date-dropdown {
1654 min-width: 280px;
1655 max-height: none;
1660 .form-field-half:first-child .date-dropdown {
1666 .form-field-half:last-child .date-dropdown,
1667 .form-field-half:nth-child(2) .date-dropdown {
1672 .time-dropdown.open,
1673 .date-dropdown.open {
1678 .date-picker-calendar {
1682 .date-picker-header {
1684 justify-content: space-between;
1685 align-items: center;
1687 margin-bottom: 8px;
1688 border-bottom: 1px solid var(--border-color, #e0e0e0);
1691 .date-picker-title {
1692 font-weight: 600;
1693 font-size: 14px;
1694 color: var(--text-primary, #333);
1697 .date-picker-nav {
1702 font-size: 16px;
1703 color: var(--text-dim, #666);
1704 border-radius: 4px;
1707 .date-picker-nav:hover {
1708 background: var(--cell-today-bg, rgba(0, 200, 0, 0.1));
1709 color: var(--text-bright, #00cc07);
1712 .date-picker-weekdays {
1714 grid-template-columns: repeat(7, 1fr);
1716 margin-bottom: 4px;
1719 .date-picker-weekday {
1720 text-align: center;
1721 font-size: 11px;
1722 font-weight: 600;
1723 color: var(--text-dim, #666);
1727 .date-picker-days {
1729 grid-template-columns: repeat(7, 1fr);
1733 .date-picker-day {
1734 text-align: center;
1737 border-radius: 4px;
1738 font-size: 13px;
1739 color: var(--text-primary, #333);
1744 .date-picker-day:hover {
1745 background: var(--cell-today-bg, rgba(0, 200, 0, 0.1));
1748 .date-picker-day.other-month {
1749 color: var(--text-dim, #999);
1753 .date-picker-day.today {
1754 font-weight: bold;
1755 color: var(--text-bright, #00cc07);
1758 .date-picker-day.selected {
1759 background: var(--text-bright, #00cc07);
1763 .date-picker-day.disabled {
1765 cursor: not-allowed;
1768 .date-picker-clear {
1772 margin-top: 8px;
1774 background: var(--background-alt, #f5f5f5);
1775 color: var(--text-dim, #666);
1777 border-radius: 4px;
1778 font-size: 12px;
1781 .date-picker-clear:hover {
1782 background: var(--cell-today-bg, rgba(0, 200, 0, 0.1));
1783 color: var(--text-bright, #00cc07);
1786 .time-dropdown-section {
1788 border-bottom: 1px solid var(--border-color, #e0e0e0);
1791 .time-dropdown-section:last-child {
1792 border-bottom: none;
1795 .time-dropdown-header {
1797 font-size: 11px;
1798 font-weight: 600;
1799 color: var(--text-dim, #666);
1800 background: var(--background-alt, #f5f5f5);
1801 text-transform: uppercase;
1802 letter-spacing: 0.5px;
1805 .time-option {
1808 font-size: 13px;
1809 color: var(--text-primary, #333);
1813 .time-option:hover {
1814 background: var(--cell-today-bg, rgba(0, 200, 0, 0.1));
1817 .time-option.selected {
1818 background: var(--text-bright, #00cc07);
1822 .time-option.disabled {
1824 cursor: not-allowed;
1825 pointer-events: none;
1828 .color-picker-input {
1831 border: 2px solid var(--border-color, #e0e0e0);
1832 border-radius: 6px;
1838 .color-picker-input:hover {
1839 border-color: var(--text-bright, #4CAF50);
1842 .input-color-sleek {
1845 border: 2px solid var(--border-color, #e0e0e0);
1846 border-radius: 6px;
1851 .input-color-sleek:hover {
1852 border-color: var(--text-bright, #008800);
1856 .color-label {
1857 font-size: 11px;
1858 color: var(--text-dim, #666);
1861 .form-row-group {
1863 grid-template-columns: 2fr 1fr;
1865 margin-bottom: 20px;
1868 .field-label {
1870 font-size: 13px;
1871 font-weight: 600;
1872 color: var(--text-primary, #2c3e50);
1873 margin-bottom: 8px;
1874 text-transform: uppercase;
1875 letter-spacing: 0.5px;
1878 .input-sleek {
1880 color: var(--text-primary, #333);
1882 border: 2px solid var(--border-color, #e0e0e0);
1883 border-radius: 8px;
1884 font-size: 15px;
1885 font-family: inherit;
1887 transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
1888 background: var(--cell-bg, #fafafa);
1889 box-sizing: border-box;
1892 .input-sleek:focus {
1894 border-color: var(--text-bright, #667eea);
1895 background: var(--background-site, white);
1896 box-shadow: 0 0 0 3px var(--shadow-color, rgba(102, 126, 234, 0.1));
1899 .textarea-sleek {
1901 min-height: 80px;
1902 line-height: 1.5;
1905 .color-picker-container {
1907 align-items: center;
1911 .input-color-sleek {
1914 border: 2px solid var(--border-color, #e0e0e0);
1915 border-radius: 8px;
1920 .input-color-sleek:hover {
1921 border-color: var(--text-bright, #667eea);
1925 .color-label {
1926 font-size: 13px;
1927 color: var(--text-dim, #666);
1930 .form-field-checkbox {
1931 background: var(--cell-bg, #f1f8f4);
1933 border-radius: 6px;
1934 border: 1px solid var(--border-main, #008800);
1937 .checkbox-label {
1939 align-items: center;
1942 font-size: 13px;
1943 font-weight: 500;
1944 color: var(--text-primary, #388e3c);
1947 .checkbox-label input[type="checkbox"] {
1951 accent-color: var(--text-bright, #008800);
1954 .form-row-group {
1956 grid-template-columns: 1fr 1fr;
1958 margin-bottom: 16px;
1961 @media (max-width: 768px) {
1962 .form-row-group {
1963 grid-template-columns: 1fr;
1967 .dialog-actions-sleek {
1971 background: var(--cell-bg, #f8f9fa);
1972 border-top: 1px solid var(--border-color, #e0e0e0);
1973 justify-content: flex-end;
1974 flex-shrink: 0;
1978 @media (max-width: 480px) {
1979 .dialog-actions-sleek {
1983 .btn-sleek {
1985 justify-content: center;
1989 .btn-sleek {
1992 border-radius: 4px;
1993 font-size: 12px;
1994 font-weight: 600;
1997 display: inline-flex;
1998 align-items: center;
2002 .btn-cancel-sleek {
2003 background: var(--border-color, #e0e0e0);
2004 color: var(--text-dim, #555);
2007 .btn-cancel-sleek:hover {
2009 box-shadow: 0 0 4px var(--shadow-color, rgba(0,0,0,0.15));
2012 .btn-save-sleek {
2013 background: var(--text-bright, #008800);
2014 color: var(--background-site, white);
2015 box-shadow: 0 2px 4px var(--shadow-color, rgba(0,0,0,0.2));
2018 .btn-save-sleek:hover {
2020 box-shadow: 0 4px 8px var(--shadow-color, rgba(0,0,0,0.3));
2023 .btn-save-sleek:active {
2029 .day-popup {
2035 z-index: 10000;
2037 align-items: center;
2038 justify-content: center;
2040 box-sizing: border-box;
2043 .day-popup-overlay {
2052 .day-popup-content {
2054 background: var(--background-site, white);
2056 max-width: 450px;
2057 max-height: calc(100vh - 40px);
2058 border-radius: 8px;
2059 box-shadow: 0 4px 20px var(--shadow-color, rgba(0,0,0,0.3));
2060 z-index: 10001;
2062 flex-direction: column;
2063 border: 1px solid var(--border-main, transparent);
2067 @media (max-width: 768px) {
2068 .day-popup {
2072 .day-popup-content {
2073 max-width: 100%;
2074 max-height: calc(100vh - 20px);
2078 @media (max-width: 480px) {
2079 .day-popup {
2083 .day-popup-content {
2085 max-width: 100%;
2086 max-height: 100vh;
2087 border-radius: 0;
2091 .day-popup-header {
2093 align-items: center;
2094 justify-content: space-between;
2096 border-bottom: 2px solid var(--border-main, #e0e0e0);
2097 background: var(--background-header, #fafafa);
2098 border-radius: 8px 8px 0 0;
2100 user-select: none;
2103 .day-popup-header h4 {
2105 font-size: 15px;
2106 font-weight: 600;
2107 color: var(--text-primary, #2c3e50);
2108 pointer-events: none;
2111 .popup-close {
2114 font-size: 24px;
2115 color: var(--text-dim, #999);
2120 align-items: center;
2121 justify-content: center;
2122 border-radius: 4px;
2124 line-height: 1;
2128 .popup-close:hover {
2129 background: var(--cell-bg, #f0f0f0);
2130 color: var(--text-primary, #333);
2133 .day-popup-body {
2135 overflow-y: auto;
2137 max-height: 400px;
2140 .popup-events-list {
2142 flex-direction: column;
2146 .popup-continuation-notice {
2147 font-size: 10px;
2148 color: var(--text-dim, #666);
2149 background: var(--cell-bg, #f0f0f0);
2151 border-radius: 3px;
2152 margin-bottom: 4px;
2153 border-left: 3px solid var(--text-bright, #00cc07);
2154 font-weight: 500;
2157 .popup-event-item {
2159 background: var(--cell-bg, #f8f9fa);
2160 border: 1px solid var(--border-color, #e0e0e0);
2161 border-radius: 4px;
2163 transition: box-shadow 0.15s;
2166 .popup-event-item:hover {
2167 box-shadow: 0 2px 6px var(--shadow-color, rgba(0,0,0,0.1));
2170 .popup-event-item:focus {
2171 outline: 2px solid var(--text-bright, #00cc07);
2172 outline-offset: 1px;
2175 .popup-event-item:focus-visible {
2176 outline: 2px solid var(--text-bright, #00cc07);
2177 outline-offset: 1px;
2181 .popup-event-item.popup-event-important {
2182 background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 193, 7, 0.08));
2183 border-color: rgba(255, 193, 7, 0.5);
2184 box-shadow: 0 0 8px rgba(255, 193, 7, 0.3);
2187 .popup-event-item.popup-event-important:hover {
2188 box-shadow: 0 2px 12px rgba(255, 193, 7, 0.4);
2191 .popup-event-content {
2194 min-width: 0;
2197 .popup-event-main-row {
2199 align-items: flex-start;
2200 justify-content: space-between;
2202 flex-wrap: wrap;
2205 .popup-event-info-inline {
2207 align-items: center;
2210 min-width: 0;
2211 flex-wrap: wrap;
2214 .popup-event-star {
2215 font-size: 12px;
2216 flex-shrink: 0;
2217 line-height: 1;
2220 .popup-event-title {
2221 font-size: 13px;
2222 font-weight: 600;
2223 color: var(--text-primary, #2c3e50);
2224 word-break: break-word;
2226 min-width: 100px;
2229 /* When star is present, keep star and title together */
2230 .popup-event-star + .popup-event-title {
2234 .popup-event-time {
2235 font-size: 11px;
2236 color: var(--text-bright, #008800);
2237 font-weight: 500;
2238 white-space: nowrap;
2239 flex-shrink: 0;
2242 .popup-event-multiday {
2243 font-size: 11px;
2244 color: var(--text-dim, #666);
2245 font-weight: 500;
2246 white-space: nowrap;
2247 flex-shrink: 0;
2250 .popup-event-namespace {
2251 font-size: 10px;
2252 color: var(--background-site, #fff);
2253 background: var(--text-bright, #008800);
2255 border-radius: 3px;
2256 font-weight: 500;
2257 white-space: nowrap;
2258 flex-shrink: 0;
2261 .popup-event-desc {
2262 font-size: 11px;
2263 color: var(--text-dim, #666);
2264 line-height: 1.4;
2265 margin-top: 4px;
2266 padding-left: 0;
2269 .popup-event-actions {
2272 flex-shrink: 0;
2273 align-self: flex-start;
2276 .event-edit-btn,
2277 .event-delete-btn {
2280 font-size: 16px;
2283 border-radius: 3px;
2285 line-height: 1;
2288 min-width: 32px;
2289 min-height: 32px;
2291 align-items: center;
2292 justify-content: center;
2293 -webkit-tap-highlight-color: rgba(0,0,0,0.1);
2294 touch-action: manipulation;
2298 @media (max-width: 768px) {
2299 .event-edit-btn,
2300 .event-delete-btn {
2303 min-width: 40px;
2304 min-height: 40px;
2305 font-size: 18px;
2309 .event-edit-btn:hover {
2310 background: var(--cell-today-bg, #e8f5e9);
2313 .event-delete-btn:hover {
2314 background: var(--cell-today-bg, #ffebee);
2317 .day-popup-footer {
2319 border-top: 1px solid var(--border-color, #e0e0e0);
2320 background: var(--cell-bg, #fafafa);
2321 border-radius: 0 0 8px 8px;
2324 .btn-add-event {
2326 background: var(--text-bright, #008800);
2327 color: var(--background-site, white);
2330 border-radius: 6px;
2331 font-size: 14px;
2332 font-weight: 500;
2337 .btn-add-event:hover {
2339 box-shadow: 0 2px 6px var(--shadow-color, rgba(0,0,0,0.2));
2342 .btn-add-event:active {
2347 .dialog-overlay {
2356 .dialog-content-compact {
2360 border-radius: 6px;
2361 box-shadow: 0 4px 12px rgba(0,0,0,0.2);
2363 z-index: 10000;
2366 .dialog-content-compact h4 {
2368 font-size: 16px;
2369 font-weight: 600;
2370 color: var(--text-primary, #2c3e50);
2373 .form-row {
2374 margin-bottom: 14px;
2377 .form-row-date {
2378 background: var(--cell-bg, #f1f8f4);
2380 border-radius: 6px;
2381 border: 2px solid var(--border-main, #008800);
2382 margin-bottom: 18px;
2385 .form-row-date label {
2386 color: var(--text-bright, #388e3c);
2387 font-size: 13px;
2390 .form-row label {
2392 font-size: 12px;
2393 font-weight: 600;
2394 color: var(--text-dim, #555);
2395 margin-bottom: 4px;
2398 .form-row input[type="text"],
2399 .form-row input[type="time"],
2400 .form-row input[type="date"],
2401 .form-row input[type="color"],
2402 .form-row textarea {
2405 border: 1px solid var(--border-color, #d0d0d0);
2406 border-radius: 4px;
2407 font-size: 13px;
2408 box-sizing: border-box;
2409 font-family: inherit;
2412 .form-row input[type="color"] {
2417 .form-row textarea {
2421 .dialog-actions {
2424 justify-content: flex-end;
2425 margin-top: 16px;
2428 .btn-save,
2429 .btn-cancel {
2432 border-radius: 4px;
2433 font-size: 13px;
2434 font-weight: 500;
2439 .btn-save {
2440 background: var(--text-bright, #008800);
2441 color: var(--background-site, white);
2444 .btn-save:hover {
2446 box-shadow: 0 2px 6px var(--shadow-color, rgba(0,0,0,0.2));
2449 .btn-cancel {
2450 background: var(--cell-bg, #f5f5f5);
2451 color: var(--text-dim, #555);
2452 border: 1px solid var(--border-color, #d0d0d0);
2455 .btn-cancel:hover {
2457 box-shadow: 0 0 4px var(--shadow-color, rgba(0,0,0,0.15));
2461 .eventlist-standalone {
2462 max-width: 700px;
2465 border: 1px solid var(--border-color, #d0d0d0);
2466 border-radius: 6px;
2470 .eventlist-standalone h3 {
2472 font-size: 18px;
2473 font-weight: 600;
2474 color: var(--text-primary, #2c3e50);
2475 border-bottom: 2px solid var(--border-main, #008800);
2476 padding-bottom: 10px;
2480 .eventlist-compact-widget {
2481 background: var(--background-site, #ffffff);
2482 border: 1px solid var(--border-color, #d0d0d0);
2483 border-radius: 6px;
2484 box-shadow: 0 2px 6px rgba(0,0,0,0.08);
2487 flex-direction: column;
2488 …font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-…
2491 /* Simple 2-Line Event List (New Design) */
2492 .eventlist-simple {
2494 …font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-…
2495 font-size: 11px;
2496 line-height: 1.4;
2500 /* Compact pastel header for {{eventlist today}} - Single line */
2501 .eventlist-today-header {
2503 flex-direction: column;
2504 align-items: center;
2506 background: var(--cell-bg, #1a1a1a);
2507 color: var(--text-bright, #00cc07);
2508 border: 2px solid var(--text-bright, #00cc07);
2509 border-radius: 4px;
2510 margin-bottom: 8px;
2511 box-shadow: 0 0 8px var(--shadow-color, rgba(0, 204, 7, 0.2));
2517 .sidebar-purple .eventlist-today-header {
2518 border-color: var(--text-bright, #9b59b6);
2519 box-shadow: 0 0 8px var(--shadow-color, rgba(155, 89, 182, 0.2));
2523 .sidebar-professional .eventlist-today-header {
2524 border-color: var(--text-bright, #4a90e2);
2525 box-shadow: 0 2px 4px var(--shadow-color, rgba(0, 0, 0, 0.1));
2529 .sidebar-pink .eventlist-today-header {
2530 border-color: var(--text-bright, #ff1493);
2531 box-shadow: 0 0 6px var(--shadow-color, rgba(255, 20, 147, 0.25));
2534 .eventlist-bottom-info {
2536 justify-content: space-between;
2537 align-items: center;
2543 .eventlist-weather {
2544 font-size: 13px;
2545 font-weight: 700;
2546 font-family: 'Courier New', monospace;
2547 letter-spacing: 0.3px;
2548 text-shadow: 0 0 1px var(--text-primary, rgba(0, 204, 7, 0.4));
2549 color: var(--text-primary, #00cc07);
2550 white-space: nowrap;
2553 .eventlist-today-date {
2554 font-size: 10px;
2555 font-weight: 700;
2556 color: var(--text-primary, #00cc07);
2557 letter-spacing: 0.5px;
2558 white-space: nowrap;
2559 text-transform: uppercase;
2560 text-align: center;
2564 .eventlist-today-clock {
2565 font-size: 16px;
2566 font-weight: 700;
2567 font-family: 'Courier New', monospace;
2568 letter-spacing: 1px;
2569 text-shadow: 0 0 2px var(--text-primary, rgba(0, 204, 7, 0.5));
2570 color: var(--text-primary, #00cc07);
2573 .eventlist-stats-container {
2576 flex-direction: column;
2582 .eventlist-cpu-bar {
2585 background: var(--cell-today-bg, rgba(0, 204, 7, 0.1)) !important;
2586 border-radius: 1px;
2592 .system-tooltip {
2594 background: var(--cell-bg, rgba(0, 0, 0, 0.95)) !important;
2596 border-radius: 4px;
2597 font-size: 9px;
2598 line-height: 1.3;
2599 white-space: normal;
2600 min-width: 150px;
2601 max-width: 250px;
2602 z-index: 999999;
2604 box-shadow: 0 3px 8px rgba(0,0,0,0.5);
2605 pointer-events: none;
2609 .system-tooltip div {
2610 font-size: 9px !important;
2611 line-height: 1.3 !important;
2615 .system-tooltip .tooltip-title {
2616 font-weight: bold;
2617 margin-bottom: 2px;
2620 .eventlist-cpu-fill {
2622 background: var(--text-bright, #00cc07) !important;
2624 box-shadow: 0 0 4px var(--shadow-color, rgba(0, 204, 7, 0.6)) !important;
2627 .eventlist-cpu-fill-purple {
2628 background: var(--border-main, #9b59b6) !important;
2629 box-shadow: 0 0 4px var(--shadow-color, rgba(155, 89, 182, 0.6)) !important;
2632 .eventlist-cpu-fill-orange {
2633 background: var(--text-primary, #ff8c00) !important;
2634 box-shadow: 0 0 4px var(--shadow-color, rgba(255, 140, 0, 0.6)) !important;
2637 /* Pink theme system bars - different shades of pink */
2638 .sidebar-pink .eventlist-cpu-fill {
2639 background: var(--text-bright, #ff1493) !important;
2640 box-shadow: 0 0 5px var(--shadow-color, rgba(255, 20, 147, 0.7)) !important;
2643 .sidebar-pink .eventlist-cpu-fill-purple {
2644 background: var(--border-main, #ff69b4) !important;
2645 box-shadow: 0 0 5px var(--shadow-color, rgba(255, 105, 180, 0.7)) !important;
2648 .sidebar-pink .eventlist-cpu-fill-orange {
2649 background: var(--text-primary, #ff85c1) !important;
2650 box-shadow: 0 0 5px var(--shadow-color, rgba(255, 133, 193, 0.7)) !important;
2653 .sidebar-pink .eventlist-cpu-realtime {
2654 background: var(--cell-today-bg, rgba(255, 20, 147, 0.1)) !important;
2657 .sidebar-pink .eventlist-mem-realtime {
2658 background: var(--cell-today-bg, rgba(255, 133, 193, 0.1)) !important;
2661 .eventlist-cpu-realtime {
2662 background: var(--cell-today-bg, rgba(155, 89, 182, 0.1)) !important;
2665 .eventlist-mem-realtime {
2666 background: var(--cell-today-bg, rgba(255, 140, 0, 0.1)) !important;
2669 .eventlist-simple-item {
2670 border-bottom: 1px solid var(--border-color, #e0e0e0);
2674 .eventlist-simple-item:last-child {
2675 border-bottom: none;
2678 .eventlist-simple-today {
2679 background: var(--cell-today-bg, #f3eeff) !important;
2680 border-left: 3px solid var(--border-main, #9b59b6) !important;
2683 .eventlist-simple-today .eventlist-simple-header {
2684 background: var(--cell-today-bg, #e8d9ff) !important;
2687 .eventlist-simple-today .eventlist-simple-body {
2688 background: var(--cell-bg, #f9f5ff) !important;
2691 .eventlist-simple-today-badge {
2692 background: var(--border-main, #9b59b6);
2693 color: var(--background-site, white);
2695 border-radius: 3px;
2696 font-size: 9px;
2697 font-weight: 600;
2698 letter-spacing: 0.5px;
2699 display: inline-block;
2700 vertical-align: middle;
2701 float: right; /* Right-align */
2702 margin-left: auto;
2705 .eventlist-simple-pastdue {
2706 background: var(--pastdue-bg, #ffe6e6) !important;
2707 border-left: 3px solid var(--pastdue-color, #e74c3c) !important;
2710 .eventlist-simple-pastdue .eventlist-simple-header {
2711 background: var(--pastdue-bg-strong, #ffd9d9) !important;
2714 .eventlist-simple-pastdue .eventlist-simple-body {
2715 background: var(--pastdue-bg-light, #fff2f2) !important;
2718 .eventlist-simple-pastdue-badge {
2719 background: var(--pastdue-color, #e74c3c);
2722 border-radius: 3px;
2723 font-size: 9px;
2724 font-weight: 600;
2725 letter-spacing: 0.5px;
2726 display: inline-block;
2727 vertical-align: middle;
2728 float: right; /* Right-align */
2729 margin-left: auto;
2732 .eventlist-simple-tomorrow {
2733 background: var(--tomorrow-bg, #fff9e6) !important;
2736 .eventlist-simple-tomorrow .eventlist-simple-header {
2737 background: var(--tomorrow-bg-strong, #fff4cc) !important;
2740 .eventlist-simple-tomorrow .eventlist-simple-body {
2741 background: var(--tomorrow-bg-light, #fffbf0) !important;
2744 .eventlist-simple-header {
2745 font-weight: 500;
2746 color: var(--text-primary, #2c3e50);
2748 line-height: 1.5;
2749 background: var(--cell-bg, #f5fcf5);
2750 font-size: 11px;
2753 .eventlist-simple-title {
2754 font-weight: 700;
2755 color: var(--text-bright, #ff6600);
2756 font-size: 12px;
2759 .eventlist-simple-time {
2760 color: var(--text-dim, #666);
2761 font-size: 10px;
2764 .eventlist-simple-date {
2765 color: var(--text-dim, #888);
2766 font-size: 10px;
2769 .eventlist-simple-namespace {
2770 background: var(--cell-today-bg, #e8f5e9);
2771 color: var(--text-bright, #388e3c);
2773 border-radius: 3px;
2774 font-size: 9px;
2775 font-weight: 500;
2776 margin-left: 4px;
2779 .eventlist-simple-body {
2780 color: var(--text-dim, #555);
2781 font-size: 11px;
2782 line-height: 1.5;
2784 background: var(--background-site, #fff);
2787 .eventlist-simple-body a {
2788 color: var(--text-bright, #008800);
2789 text-decoration: none;
2792 .eventlist-simple-body a:hover {
2793 text-decoration: underline;
2796 .eventlist-simple-body strong {
2797 font-weight: 600;
2798 color: var(--text-primary, #2c3e50);
2801 .eventlist-simple-body code {
2802 background: var(--cell-bg, #f5f5f5);
2804 border-radius: 3px;
2805 font-family: 'Courier New', monospace;
2806 font-size: 10px;
2807 color: var(--text-primary, inherit);
2810 .eventlist-simple-no-desc {
2814 .eventlist-simple-empty {
2816 color: var(--text-dim, #999);
2819 .eventlist-simple-empty .eventlist-simple-header {
2820 margin-bottom: 4px;
2821 background: var(--cell-bg, #f5fcf5);
2824 .eventlist-simple-empty .eventlist-simple-body {
2825 color: var(--text-dim, #999);
2826 font-style: italic;
2828 font-size: 11px;
2831 .eventlist-widget-header {
2832 background: var(--text-bright, #008800);
2835 flex-shrink: 0;
2838 .eventlist-widget-header h4 {
2840 font-size: 13px;
2841 font-weight: 600;
2844 .eventlist-widget-content {
2845 overflow-y: auto;
2850 .eventlist-widget-date {
2851 font-size: 11px;
2852 font-weight: 600;
2853 color: var(--text-dim, #666);
2855 padding-bottom: 2px;
2856 border-bottom: 1px solid var(--border-color, #e0e0e0);
2859 .eventlist-widget-item {
2860 background: var(--cell-bg, #fafafa);
2861 border: 1px solid var(--border-color, #e0e0e0);
2862 border-left: 3px solid var(--text-bright, #3498db);
2863 border-radius: 3px;
2865 margin-bottom: 6px;
2869 .eventlist-widget-item:hover {
2870 background: var(--cell-bg, #f0f0f0);
2871 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
2874 .eventlist-widget-title {
2875 font-size: 12px;
2876 font-weight: 600;
2877 color: var(--text-primary, #2c3e50);
2878 margin-bottom: 2px;
2881 .eventlist-widget-time {
2882 font-size: 11px;
2883 color: var(--text-dim, #666);
2884 margin-bottom: 4px;
2887 .eventlist-widget-desc {
2888 font-size: 11px;
2889 color: var(--text-dim, #555);
2890 margin-top: 4px;
2891 line-height: 1.4;
2894 .eventlist-widget-desc img {
2895 max-width: 100%;
2897 border-radius: 3px;
2901 .eventlist-widget-desc a {
2902 color: var(--text-bright, #008800);
2903 text-decoration: none;
2904 border-bottom: 1px dotted var(--text-bright, #008800);
2907 .eventlist-widget-desc a:hover {
2908 border-bottom-style: solid;
2911 .eventlist-widget-empty {
2912 text-align: center;
2913 color: var(--text-dim, #999);
2914 font-size: 12px;
2920 .cal-link {
2921 color: var(--text-bright, #008800) !important;
2922 text-decoration: none;
2923 border-bottom: 1px dotted var(--text-bright, #008800);
2927 .cal-link:hover {
2928 border-bottom-style: solid;
2932 /* Sidebar widget links - inherit theme colors */
2933 .sidebar-widget a.cal-link {
2934 color: var(--text-bright, #00cc07) !important;
2935 border-bottom-color: var(--text-bright, #00cc07);
2939 .event-panel-standalone {
2941 background: var(--background-site, #ffffff);
2942 border: 1px solid var(--border-color, #d0d0d0);
2943 border-radius: 6px;
2944 box-shadow: 0 2px 6px rgba(0,0,0,0.08);
2946 flex-direction: column;
2947 max-height: 600px;
2948 …font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-…
2949 font-size: 13px;
2952 /* Dark theme borders for event panel - match sidebar widget style */
2953 .event-panel-standalone[data-theme="matrix"] {
2954 border: 2px solid var(--border-main, #00cc07);
2955 box-shadow: 0 0 10px var(--shadow-color, rgba(0, 204, 7, 0.3));
2958 .event-panel-standalone[data-theme="purple"] {
2959 border: 2px solid var(--border-main, #9b59b6);
2960 box-shadow: 0 0 10px var(--shadow-color, rgba(155, 89, 182, 0.3));
2963 .event-panel-standalone[data-theme="pink"] {
2964 border: 2px solid var(--border-main, #ff1493);
2965 box-shadow: 0 0 10px var(--shadow-color, rgba(255, 20, 147, 0.4));
2968 .event-panel-standalone .event-list-compact {
2969 overflow-y: auto;
2974 /* Event panel - Compact two-row header for ~500px width (10% smaller) */
2975 .panel-header-compact {
2976 background: var(--cell-bg, #f5f5f5);
2977 border-bottom: 2px solid var(--border-color, #ddd);
2980 .panel-header-row-1 {
2982 align-items: center;
2985 background: var(--cell-bg, #fafafa);
2986 border-bottom: 1px solid var(--border-color, #e8e8e8);
2989 .panel-header-row-2 {
2991 align-items: center;
2994 background: var(--background-site, #ffffff);
2997 .panel-nav-btn {
2998 background: var(--cell-bg, #ffffff);
2999 border: 1px solid var(--border-color, #ccc);
3000 color: var(--text-primary, #333);
3003 border-radius: 4px;
3005 font-size: 16px;
3006 font-weight: bold;
3009 align-items: center;
3010 justify-content: center;
3012 flex-shrink: 0;
3015 .panel-nav-btn:hover {
3016 background: var(--text-bright, #00cc07);
3017 color: var(--background-site, white);
3018 border-color: var(--text-bright, #00cc07);
3020 box-shadow: 0 0 6px var(--shadow-color, rgba(0,0,0,0.3));
3023 .panel-month-title {
3025 font-size: 13px;
3026 font-weight: 600;
3027 color: var(--text-primary, #2c3e50);
3030 border-radius: 4px;
3032 white-space: nowrap;
3033 user-select: none;
3035 text-align: center;
3036 background: var(--cell-bg, #ffffff);
3037 border: 1px solid var(--border-color, #e0e0e0);
3040 .panel-month-title:hover {
3041 background: var(--cell-today-bg, #e8f5e9);
3042 border-color: var(--text-bright, #00cc07);
3045 .panel-ns-badge {
3046 background: var(--cell-today-bg, #e3f2fd);
3047 color: var(--text-bright, #1976d2);
3049 border-radius: 11px;
3050 font-size: 9px;
3051 font-weight: 600;
3052 text-transform: uppercase;
3053 letter-spacing: 0.3px;
3054 white-space: nowrap;
3055 border: 1px solid var(--border-color, #bbdefb);
3056 flex-shrink: 0;
3059 .panel-ns-badge.filter-on {
3060 background: var(--text-bright, #ff9800);
3061 color: var(--background-site, white);
3062 border-color: var(--border-main, #f57c00);
3067 .panel-ns-badge.filter-on:hover {
3071 .panel-today-btn {
3072 background: var(--cell-bg, #ffffff);
3073 border: 1px solid var(--border-color, #ccc);
3074 color: var(--text-primary, #333);
3076 border-radius: 4px;
3078 font-size: 10px;
3079 font-weight: 600;
3081 white-space: nowrap;
3082 flex-shrink: 0;
3085 .panel-today-btn:hover {
3086 background: var(--text-bright, #00cc07);
3087 color: var(--background-site, white);
3088 border-color: var(--text-bright, #00cc07);
3090 box-shadow: 0 0 6px var(--shadow-color, rgba(0,0,0,0.3));
3093 .panel-search-box {
3100 .panel-search-input {
3103 border: 1px solid var(--border-color, #d0d0d0);
3104 border-radius: 4px 0 0 4px;
3105 font-size: 11px;
3107 transition: border-color 0.2s, box-shadow 0.2s;
3108 background: var(--cell-bg, #fafafa);
3109 color: var(--text-primary, #333);
3112 .panel-search-input:focus {
3113 border-color: var(--text-bright, #00cc07);
3114 box-shadow: 0 0 0 2px var(--shadow-color, rgba(0, 204, 7, 0.1));
3115 background: var(--background-site, white);
3118 .panel-search-input::placeholder {
3119 color: var(--text-dim, #999);
3122 .panel-search-clear {
3126 transform: translateY(-50%);
3129 color: var(--text-dim, #999);
3132 font-size: 13px;
3133 line-height: 1;
3137 .panel-search-clear:hover {
3138 color: var(--text-primary, #333);
3141 .panel-search-mode {
3142 background: var(--cell-bg, #f0f0f0);
3143 border: 1px solid var(--border-color, #d0d0d0);
3144 border-left: none;
3145 border-radius: 0 4px 4px 0;
3148 font-size: 11px;
3150 color: var(--text-dim, #666);
3152 align-items: center;
3155 .panel-search-mode:hover {
3156 background: var(--cell-today-bg, #e8f5e9);
3157 color: var(--text-bright, #00cc07);
3160 .panel-search-mode.all-dates {
3161 background: var(--text-bright, #00cc07);
3162 color: var(--background-site, white);
3163 border-color: var(--text-bright, #00cc07);
3166 .panel-search-mode.all-dates:hover {
3170 .panel-add-btn {
3171 background: var(--text-bright, #00cc07);
3172 border: 1px solid var(--border-main, #00a806);
3173 color: var(--background-site, white);
3175 border-radius: 4px;
3177 font-size: 11px;
3178 font-weight: 600;
3180 white-space: nowrap;
3181 flex-shrink: 0;
3184 .panel-add-btn:hover {
3186 transform: translateY(-1px);
3187 box-shadow: 0 2px 6px var(--shadow-color, rgba(0,0,0,0.2));
3190 .panel-standalone-header {
3192 align-items: center;
3195 background: var(--cell-bg, #fafafa);
3196 border-bottom: 1px solid var(--border-color, #e0e0e0);
3197 flex-shrink: 0;
3200 .panel-header-content {
3203 flex-direction: column;
3204 align-items: center;
3208 .panel-standalone-header h3 {
3210 font-size: 12px;
3211 font-weight: 600;
3212 color: var(--text-primary, #2c3e50);
3213 white-space: nowrap;
3216 .panel-standalone-header .calendar-month-picker {
3218 user-select: none;
3221 border-radius: 4px;
3222 white-space: nowrap;
3225 .panel-standalone-header .calendar-month-picker:hover {
3226 background: var(--cell-today-bg, #e8e8e8);
3227 color: var(--text-bright, #008800);
3230 .panel-standalone-header .namespace-badge {
3231 font-size: 11px;
3232 font-weight: 500;
3233 color: var(--text-bright, #388e3c);
3234 background: var(--cell-today-bg, #e8f5e9);
3236 border-radius: 3px;
3237 text-decoration: none;
3239 display: inline-block;
3242 .panel-standalone-header .namespace-badge:hover {
3243 background: var(--cell-bg, #c8e6c9);
3244 color: var(--text-primary, #2e7d32);
3247 .panel-standalone-actions {
3249 background: var(--background-site, #ffffff);
3250 border-bottom: 1px solid var(--border-color, #e0e0e0);
3251 flex-shrink: 0;
3253 align-items: center;
3257 .panel-standalone-actions .add-event-compact {
3258 flex-shrink: 0;
3261 .eventlist-day-group {
3262 margin-bottom: 24px;
3265 .eventlist-date {
3267 font-size: 14px;
3268 font-weight: 600;
3269 color: var(--text-primary, #2c3e50);
3270 background: var(--cell-bg, #f8f8f8);
3272 border-left: 4px solid var(--border-main, #008800);
3275 .eventlist-item {
3277 margin-bottom: 10px;
3279 border: 1px solid var(--border-color, #e0e0e0);
3280 border-radius: 4px;
3284 .eventlist-content {
3288 align-items: center;
3292 .eventlist-time {
3293 font-size: 12px;
3294 font-weight: 600;
3295 color: var(--text-bright, #008800);
3296 min-width: 50px;
3299 .eventlist-title {
3300 font-size: 14px;
3301 font-weight: 500;
3302 color: var(--text-primary, #2c3e50);
3305 .eventlist-desc {
3306 font-size: 12px;
3307 color: var(--text-dim, #666);
3308 margin-top: 6px;
3309 line-height: 1.4;
3313 MOBILE RESPONSIVE - EVENTLIST & EVENTPANEL
3317 @media (max-width: 768px) {
3319 .event-panel-standalone {
3321 max-width: 100%;
3322 border-radius: 0;
3323 max-height: none;
3324 min-height: 400px;
3328 .eventlist-compact-widget {
3330 max-width: 100%;
3331 border-radius: 0;
3334 .eventlist-widget-header h4 {
3335 font-size: 14px;
3338 .eventlist-widget-title {
3339 font-size: 13px;
3342 .eventlist-widget-time {
3343 font-size: 12px;
3347 .eventlist-standalone {
3348 max-width: 100%;
3351 border-radius: 0;
3354 .eventlist-standalone h3 {
3355 font-size: 16px;
3360 @media (max-width: 480px) {
3362 .event-panel-standalone {
3363 font-size: 12px;
3364 min-height: 300px;
3367 .panel-standalone-header {
3371 .panel-standalone-header h3 {
3372 font-size: 12px;
3375 .panel-standalone-actions {
3379 .event-panel-standalone .event-list-compact {
3384 .eventlist-compact-widget {
3385 min-width: 280px;
3388 .eventlist-widget-header {
3392 .eventlist-widget-header h4 {
3393 font-size: 13px;
3396 .eventlist-widget-content {
3400 .eventlist-widget-item {
3402 margin-bottom: 5px;
3405 .eventlist-widget-title {
3406 font-size: 12px;
3409 .eventlist-widget-time {
3410 font-size: 11px;
3413 .eventlist-widget-desc {
3414 font-size: 11px;
3418 .eventlist-standalone {
3423 .eventlist-standalone h3 {
3424 font-size: 14px;
3425 margin-bottom: 15px;
3428 .eventlist-day-group {
3429 margin-bottom: 18px;
3432 .eventlist-date {
3433 font-size: 13px;
3437 .eventlist-title {
3438 font-size: 13px;
3441 .eventlist-time {
3442 font-size: 11px;
3445 .eventlist-desc {
3446 font-size: 11px;
3451 @media (max-width: 320px) {
3452 .eventlist-compact-widget {
3453 min-width: 100%;
3456 .event-panel-standalone {
3457 min-height: 250px;
3460 .eventlist-widget-header h4 {
3461 font-size: 12px;
3464 .eventlist-widget-title {
3465 font-size: 11px;
3468 .panel-standalone-header h3 {
3469 font-size: 12px;
3474 .past-events-section {
3475 margin-bottom: 10px;
3476 border-bottom: 1px solid var(--border-color, #e0e0e0);
3479 .past-events-toggle {
3481 background: var(--cell-bg);
3482 color: var(--text-dim);
3484 user-select: none;
3485 font-size: 11px;
3486 font-weight: 600;
3488 align-items: center;
3489 border-radius: 3px;
3493 .past-events-toggle:hover {
3494 background: var(--background-alt);
3497 .past-events-arrow {
3498 font-size: 9px;
3499 margin-right: 5px;
3501 display: inline-block;
3503 color: var(--text-dim);
3506 .past-events-label {
3507 color: var(--text-dim);
3510 .past-events-content {
3511 margin-top: 5px;
3515 .namespace-search-wrapper {
3519 .namespace-search-input {
3523 .namespace-dropdown {
3528 max-height: 200px;
3529 overflow-y: auto;
3531 border: 1px solid var(--border-color, #ddd);
3532 border-top: none;
3533 border-radius: 0 0 4px 4px;
3534 box-shadow: 0 4px 8px rgba(0,0,0,0.1);
3535 z-index: 1000;
3536 margin-top: -1px;
3539 .namespace-option {
3542 font-size: 12px;
3543 border-bottom: 1px solid var(--border-color, #f0f0f0);
3544 transition: background-color 0.15s;
3547 .namespace-option:hover {
3548 background-color: var(--cell-bg, #f5f5f5);
3551 .namespace-option.selected {
3552 background-color: var(--cell-today-bg, #e3f2fd);
3553 color: var(--text-bright, #1976d2);
3556 .namespace-option:last-child {
3557 border-bottom: none;
3560 /* Matrix-themed Sidebar Widget */
3561 .sidebar-matrix {
3562 font-family: system-ui, sans-serif !important;
3563 background: linear-gradient(180deg, #242424 0%, #2a2a2a 100%) !important;
3565 box-shadow: 0 0 15px rgba(0, 204, 7, 0.4), inset 0 0 20px rgba(0, 204, 7, 0.05) !important;
3568 .sidebar-matrix-header {
3569 background: linear-gradient(180deg, #2a2a2a 0%, #242424 100%) !important;
3570 border-bottom: 2px solid #00cc07 !important;
3571 box-shadow: 0 2px 8px rgba(0, 204, 7, 0.3) !important;
3574 .sidebar-matrix-clock {
3575 animation: matrix-pulse 2s ease-in-out infinite;
3578 .sidebar-matrix-date {
3582 @keyframes matrix-pulse {
3584 text-shadow: 0 0 2px rgba(0, 204, 7, 0.4);
3587 text-shadow: 0 0 4px rgba(0, 255, 0, 0.5), 0 0 6px rgba(0, 204, 7, 0.3);
3592 .sidebar-widget.sidebar-matrix::before {
3595 top: -2px;
3596 left: -2px;
3597 right: -2px;
3598 bottom: -2px;
3599 background: linear-gradient(45deg, #00cc07, #00ff00, #00cc07);
3600 border-radius: 4px;
3602 z-index: -1;
3603 animation: matrix-border-glow 3s ease-in-out infinite;
3606 @keyframes matrix-border-glow {
3616 .sidebar-matrix ::-webkit-scrollbar {
3620 .sidebar-matrix ::-webkit-scrollbar-track {
3624 .sidebar-matrix ::-webkit-scrollbar-thumb {
3626 border-radius: 3px;
3627 box-shadow: 0 0 5px rgba(0, 204, 7, 0.5);
3630 .sidebar-matrix ::-webkit-scrollbar-thumb:hover {
3632 box-shadow: 0 0 8px rgba(0, 255, 0, 0.8);
3636 PINK BLING THEME - SPECIAL EFFECTS
3639 /* Shimmer animation for today's cell - BARELY NOTICEABLE */
3640 @keyframes pink-shimmer {
3642 box-shadow: 0 0 2px rgba(255, 20, 147, 0.15),
3646 box-shadow: 0 0 4px rgba(255, 20, 147, 0.25),
3650 box-shadow: 0 0 2px rgba(255, 20, 147, 0.15),
3655 /* Sparkle animation for today's day number - BARELY NOTICEABLE */
3656 @keyframes pink-sparkle {
3658 text-shadow: 0 0 2px rgba(255, 20, 147, 0.3);
3662 text-shadow: 0 0 3px rgba(255, 20, 147, 0.5);
3667 /* Glow pulse for event bars - BARELY NOTICEABLE */
3668 @keyframes pink-glow-pulse {
3670 box-shadow: 0 0 1px currentColor;
3673 box-shadow: 0 0 2px currentColor,
3679 @keyframes pink-gradient-shimmer {
3681 background-position: 0% 50%;
3684 background-position: 100% 50%;
3687 background-position: 0% 50%;
3692 @keyframes particle-explode {
3699 transform: translate(var(--tx), var(--ty)) scale(0);
3704 @keyframes cursor-trail-fade {
3716 .pink-particle {
3720 background: radial-gradient(circle, #ff1493, #ff69b4);
3721 border-radius: 50%;
3722 pointer-events: none;
3723 z-index: 9999999; /* Above everything including dialogs */
3724 box-shadow: 0 0 8px #ff1493,
3729 .pink-cursor-trail {
3733 background: radial-gradient(circle, rgba(255, 20, 147, 0.8), rgba(255, 105, 180, 0.4));
3734 border-radius: 50%;
3735 pointer-events: none;
3736 z-index: 9999998; /* Just below particles */
3737 box-shadow: 0 0 10px rgba(255, 20, 147, 0.6),
3742 .pink-pixel-sparkle {
3746 background: var(--background-site, #fff);
3747 border-radius: 50%;
3748 pointer-events: none;
3749 z-index: 9999997; /* Just below trail */
3750 box-shadow: 0 0 2px #ff1493,
3756 @keyframes pixel-twinkle {
3768 @keyframes pixel-float-away {
3775 transform: translateY(-30px) scale(0);
3779 /* Pink theme specific styles - TONED DOWN */
3780 .calendar-theme-pink .cal-today {
3781 animation: pink-shimmer 2s ease-in-out infinite;
3787 .calendar-theme-pink .cal-today .day-num,
3788 .calendar-theme-pink .day-num-today {
3792 z-index: 1;
3793 font-weight: 700;
3797 line-height: 22px;
3798 text-align: center;
3799 font-size: 10px;
3801 display: inline-flex;
3802 align-items: center;
3803 justify-content: center;
3808 .calendar-theme-pink .cal-today .day-num::before,
3809 .calendar-theme-pink .day-num-today::before {
3814 transform: translate(-50%, -48%);
3815 font-size: 26px;
3817 z-index: -1;
3818 text-shadow: 0 0 8px rgba(255, 20, 147, 0.7),
3821 animation: pink-heart-beat 1.2s ease-in-out infinite;
3822 line-height: 1;
3826 @keyframes pink-heart-beat {
3828 transform: translate(-50%, -48%) scale(1);
3829 text-shadow: 0 0 8px rgba(255, 20, 147, 0.7),
3833 transform: translate(-50%, -48%) scale(1.15);
3834 text-shadow: 0 0 12px rgba(255, 20, 147, 0.9),
3839 transform: translate(-50%, -48%) scale(0.95);
3842 transform: translate(-50%, -48%) scale(1.1);
3843 text-shadow: 0 0 10px rgba(255, 20, 147, 0.8),
3847 transform: translate(-50%, -48%) scale(1);
3851 .calendar-theme-pink .event-bar {
3852 animation: pink-glow-pulse 2s ease-in-out infinite;
3855 .calendar-theme-pink .calendar-compact-header {
3856 background: linear-gradient(90deg, #2d1a24, #3d2030, #2d1a24, #1a0d14);
3857 background-size: 300% 300%;
3858 animation: pink-gradient-shimmer 3s ease infinite;
3861 .calendar-theme-pink .event-list-header {
3862 background: linear-gradient(90deg, #2d1a24, #3d2030, #2d1a24);
3863 background-size: 300% 300%;
3864 animation: pink-gradient-shimmer 3s ease infinite;
3867 /* Subtle hover glow - BARELY NOTICEABLE */
3868 .calendar-theme-pink .cal-today:hover {
3869 box-shadow: 0 0 5px rgba(255, 20, 147, 0.25),
3874 .calendar-theme-pink .event-compact-item {
3875 box-shadow: 0 0 1px rgba(255, 20, 147, 0.08);
3879 .calendar-theme-pink .event-compact-item:hover {
3880 box-shadow: 0 0 3px rgba(255, 20, 147, 0.15);
3885 .calendar-theme-pink.calendar-compact-container {
3886 box-shadow: 0 0 5px rgba(255, 20, 147, 0.12),
3892 .calendar-theme-pink .event-today-badge {
3893 animation: pink-sparkle 1.5s ease-in-out infinite;
3896 /* Consistent subtle text glow for dark themes - main calendar event list */
3897 .calendar-theme-matrix .event-title-compact,
3898 .calendar-theme-matrix .event-meta-compact,
3899 .calendar-theme-matrix .event-desc-compact {
3900 text-shadow: 0 0 1px var(--text-primary, #00cc07);
3903 .calendar-theme-purple .event-title-compact,
3904 .calendar-theme-purple .event-meta-compact,
3905 .calendar-theme-purple .event-desc-compact {
3906 text-shadow: 0 0 1px var(--text-primary, #b19cd9);
3909 .calendar-theme-pink .event-title-compact,
3910 .calendar-theme-pink .event-meta-compact,
3911 .calendar-theme-pink .event-desc-compact {
3912 text-shadow: 0 0 2px var(--text-primary, #ff69b4);
3916 .calendar-theme-matrix .event-desc-compact a,
3917 .calendar-theme-matrix .cal-link {
3918 text-shadow: 0 0 1px var(--text-bright, #00ff00);
3921 .calendar-theme-purple .event-desc-compact a,
3922 .calendar-theme-purple .cal-link {
3923 text-shadow: 0 0 1px var(--text-bright, #d4a5ff);
3926 .calendar-theme-pink .event-desc-compact a,
3927 .calendar-theme-pink .cal-link {
3928 text-shadow: 0 0 2px var(--text-bright, #ff1493);
3932 .event-panel-standalone[data-theme="matrix"] .event-title-compact,
3933 .event-panel-standalone[data-theme="matrix"] .event-meta-compact,
3934 .event-panel-standalone[data-theme="matrix"] .event-desc-compact {
3935 text-shadow: 0 0 1px var(--text-primary, #00cc07);
3938 .event-panel-standalone[data-theme="purple"] .event-title-compact,
3939 .event-panel-standalone[data-theme="purple"] .event-meta-compact,
3940 .event-panel-standalone[data-theme="purple"] .event-desc-compact {
3941 text-shadow: 0 0 1px var(--text-primary, #b19cd9);
3944 .event-panel-standalone[data-theme="pink"] .event-title-compact,
3945 .event-panel-standalone[data-theme="pink"] .event-meta-compact,
3946 .event-panel-standalone[data-theme="pink"] .event-desc-compact {
3947 text-shadow: 0 0 2px var(--text-primary, #ff69b4);
3950 /* Past due badge pulsing effect - SUBTLE */
3951 @keyframes pink-pulse-urgent {
3953 box-shadow: 0 0 3px rgba(255, 140, 0, 0.4);
3956 box-shadow: 0 0 8px rgba(255, 140, 0, 0.6);
3960 .calendar-theme-pink .event-pastdue-badge {
3961 animation: pink-pulse-urgent 1s ease-in-out infinite;
3967 .calendar-theme-matrix .task-checkbox,
3968 .sidebar-matrix .task-checkbox {
3971 box-shadow: 0 0 6px rgba(0, 255, 0, 0.3), inset 0 0 4px rgba(0, 204, 7, 0.1);
3974 .calendar-theme-matrix .task-checkbox:hover,
3975 .sidebar-matrix .task-checkbox:hover {
3976 border-color: #00ff00;
3977 box-shadow: 0 0 10px rgba(0, 255, 0, 0.5), inset 0 0 6px rgba(0, 204, 7, 0.2);
3980 .calendar-theme-matrix .task-checkbox:checked,
3981 .sidebar-matrix .task-checkbox:checked {
3983 border-color: #00ff00;
3984 box-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
3990 .calendar-theme-purple .task-checkbox,
3991 .sidebar-purple .task-checkbox {
3994 box-shadow: 0 0 6px rgba(212, 165, 255, 0.3), inset 0 0 4px rgba(155, 89, 182, 0.1);
3997 .calendar-theme-purple .task-checkbox:hover,
3998 .sidebar-purple .task-checkbox:hover {
3999 border-color: #d4a5ff;
4000 box-shadow: 0 0 10px rgba(212, 165, 255, 0.5), inset 0 0 6px rgba(155, 89, 182, 0.2);
4003 .calendar-theme-purple .task-checkbox:checked,
4004 .sidebar-purple .task-checkbox:checked {
4006 border-color: #d4a5ff;
4007 box-shadow: 0 0 8px rgba(212, 165, 255, 0.6);
4013 .calendar-theme-pink .task-checkbox,
4014 .sidebar-pink .task-checkbox {
4017 box-shadow: 0 0 6px rgba(255, 20, 147, 0.35), inset 0 0 4px rgba(255, 20, 147, 0.1);
4020 .calendar-theme-pink .task-checkbox:hover,
4021 .sidebar-pink .task-checkbox:hover {
4022 border-color: #ff69b4;
4023 box-shadow: 0 0 10px rgba(255, 20, 147, 0.6), inset 0 0 6px rgba(255, 20, 147, 0.2);
4026 .calendar-theme-pink .task-checkbox:checked,
4027 .sidebar-pink .task-checkbox:checked {
4029 border-color: #ff69b4;
4030 box-shadow: 0 0 8px rgba(255, 20, 147, 0.7);
4034 .calendar-theme-pink .checkbox-label input[type="checkbox"],
4035 .calendar-theme-pink .checkbox-label-compact input[type="checkbox"] {
4036 accent-color: #ff1493;
4039 /* Wiki theme checkboxes - use border color */
4040 .calendar-theme-wiki .task-checkbox,
4041 .sidebar-wiki .task-checkbox,
4042 .eventlist-theme-wiki .task-checkbox {
4043 border: 2px solid var(--border-main, #ccc);
4044 accent-color: var(--border-main, #ccc);
4047 .calendar-theme-wiki .task-checkbox:hover,
4048 .sidebar-wiki .task-checkbox:hover,
4049 .eventlist-theme-wiki .task-checkbox:hover {
4050 border: 2px solid var(--border-main, #ccc);
4051 box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
4054 .calendar-theme-wiki .task-checkbox:checked,
4055 .sidebar-wiki .task-checkbox:checked,
4056 .eventlist-theme-wiki .task-checkbox:checked {
4057 background: var(--border-main, #ccc);
4058 border: 2px solid var(--border-main, #ccc);
4061 /* Wiki theme buttons - use __link__ color */
4062 .calendar-theme-wiki .cal-nav-btn,
4063 .calendar-theme-wiki .cal-today-btn {
4064 background: var(--text-bright, #2b73b7);
4068 /* Wiki theme day headers - use __background_neu__ */
4069 .calendar-theme-wiki .calendar-day-headers {
4070 background: var(--cell-today-bg, #eee);
4073 /* Wiki theme past events toggle - use __background_neu__ */
4074 .calendar-theme-wiki .past-events-toggle {
4075 background: var(--cell-today-bg, #eee);
4078 .calendar-theme-wiki .calendar-day-headers span {
4079 color: var(--text-primary, #333);
4082 .sidebar-wiki .panel-nav-btn,
4083 .sidebar-wiki .panel-today-btn {
4084 background: var(--text-bright, #2b73b7);
4088 .event-panel-standalone[data-theme="wiki"] .panel-nav-btn,
4089 .event-panel-standalone[data-theme="wiki"] .panel-today-btn {
4090 background: var(--text-bright, #2b73b7);
4094 /* Wiki theme clock - no glow */
4095 .sidebar-wiki .eventlist-today-clock,
4096 .eventlist-theme-wiki .eventlist-today-clock {
4097 text-shadow: none;
4100 /* Wiki theme clock - no glow, slightly larger */
4101 .sidebar-wiki .eventlist-today-clock,
4102 .eventlist-theme-wiki .eventlist-today-clock {
4103 text-shadow: none;
4104 font-size: 20px;
4110 @keyframes pink-firework-burst {
4112 box-shadow: 0 0 4px rgba(255, 20, 147, 0.4);
4115 box-shadow: 0 0 15px rgba(255, 20, 147, 0.8),
4117 5px -5px 8px rgba(255, 20, 147, 0.6),
4118 -5px -5px 8px rgba(255, 105, 180, 0.5),
4120 -5px 5px 8px rgba(255, 20, 147, 0.5);
4123 box-shadow: 0 0 20px rgba(255, 20, 147, 0.9),
4125 8px -8px 12px rgba(255, 20, 147, 0.5),
4126 -8px -8px 12px rgba(255, 105, 180, 0.4),
4128 -8px 8px 12px rgba(255, 20, 147, 0.4),
4129 0 -10px 15px rgba(255, 20, 147, 0.3),
4133 box-shadow: 0 0 12px rgba(255, 20, 147, 0.6),
4135 12px -12px 8px rgba(255, 20, 147, 0.2),
4136 -12px -12px 8px rgba(255, 105, 180, 0.15),
4138 -12px 12px 8px rgba(255, 20, 147, 0.15);
4141 box-shadow: 0 0 6px rgba(255, 20, 147, 0.5),
4147 .calendar-theme-pink .cal-nav-btn:hover,
4148 .calendar-theme-pink .cal-today-btn:hover,
4149 .calendar-theme-pink .btn-save-sleek:hover,
4150 .calendar-theme-pink .btn-cancel-sleek:hover,
4151 .calendar-theme-pink .btn-add-event:hover,
4152 .calendar-theme-pink .event-edit-btn:hover,
4153 .calendar-theme-pink .event-delete-btn:hover,
4154 .calendar-theme-pink .event-action-btn:hover {
4157 border-color: #ff69b4 !important;
4158 animation: pink-firework-burst 0.6s ease-out forwards;
4163 .calendar-theme-pink .cal-nav-btn:active,
4164 .calendar-theme-pink .cal-today-btn:active,
4165 .calendar-theme-pink .btn-save-sleek:active,
4166 .calendar-theme-pink .btn-cancel-sleek:active,
4167 .calendar-theme-pink .btn-add-event:active {
4171 box-shadow: 0 0 25px rgba(255, 20, 147, 1), 0 0 50px rgba(255, 105, 180, 0.6);
4175 .sidebar-pink .event-edit-btn:hover,
4176 .sidebar-pink .event-delete-btn:hover {
4179 animation: pink-firework-burst 0.6s ease-out forwards;
4184 .event-panel-standalone[data-theme="pink"] .panel-nav-btn:hover,
4185 .event-panel-standalone[data-theme="pink"] .panel-today-btn:hover,
4186 .event-panel-standalone[data-theme="pink"] .panel-add-btn:hover {
4189 animation: pink-firework-burst 0.6s ease-out forwards;
4198 color-scheme, no variable resets.
4202 .calendar-theme-matrix .event-title-compact,
4203 .calendar-theme-matrix .event-list-header,
4204 .calendar-theme-matrix .calendar-day-headers,
4205 .sidebar-matrix .event-title-compact {
4206 color: var(--text-bright, #00ff00) !important;
4207 -webkit-text-fill-color: var(--text-bright, #00ff00) !important;
4210 .calendar-theme-matrix .event-meta-compact,
4211 .calendar-theme-matrix .event-desc-compact,
4212 .calendar-theme-matrix .no-events-msg,
4213 .sidebar-matrix .event-meta-compact,
4214 .sidebar-matrix .event-desc-compact {
4215 color: var(--text-dim, #00aa00) !important;
4216 -webkit-text-fill-color: var(--text-dim, #00aa00) !important;
4219 .calendar-theme-matrix .day-num,
4220 .calendar-theme-matrix .cal-nav-btn,
4221 .calendar-theme-matrix .cal-today-btn,
4222 .sidebar-matrix .eventlist-today-date {
4223 color: var(--text-primary, #00cc07) !important;
4224 -webkit-text-fill-color: var(--text-primary, #00cc07) !important;
4228 .calendar-theme-purple .event-title-compact,
4229 .calendar-theme-purple .event-list-header,
4230 .calendar-theme-purple .calendar-day-headers,
4231 .sidebar-purple .event-title-compact {
4232 color: var(--text-bright, #d4a5ff) !important;
4233 -webkit-text-fill-color: var(--text-bright, #d4a5ff) !important;
4236 .calendar-theme-purple .event-meta-compact,
4237 .calendar-theme-purple .event-desc-compact,
4238 .calendar-theme-purple .no-events-msg,
4239 .sidebar-purple .event-meta-compact,
4240 .sidebar-purple .event-desc-compact {
4241 color: var(--text-dim, #8e7ab8) !important;
4242 -webkit-text-fill-color: var(--text-dim, #8e7ab8) !important;
4245 .calendar-theme-purple .day-num,
4246 .calendar-theme-purple .cal-nav-btn,
4247 .calendar-theme-purple .cal-today-btn,
4248 .sidebar-purple .eventlist-today-date {
4249 color: var(--text-primary, #b19cd9) !important;
4250 -webkit-text-fill-color: var(--text-primary, #b19cd9) !important;
4254 .calendar-theme-pink .event-title-compact,
4255 .calendar-theme-pink .event-list-header,
4256 .calendar-theme-pink .calendar-day-headers,
4257 .sidebar-pink .event-title-compact {
4258 color: var(--text-bright, #ff1493) !important;
4259 -webkit-text-fill-color: var(--text-bright, #ff1493) !important;
4262 .calendar-theme-pink .event-meta-compact,
4263 .calendar-theme-pink .event-desc-compact,
4264 .calendar-theme-pink .no-events-msg,
4265 .sidebar-pink .event-meta-compact,
4266 .sidebar-pink .event-desc-compact {
4267 color: var(--text-dim, #ff85c1) !important;
4268 -webkit-text-fill-color: var(--text-dim, #ff85c1) !important;
4271 .calendar-theme-pink .day-num,
4272 .calendar-theme-pink .cal-nav-btn,
4273 .calendar-theme-pink .cal-today-btn,
4274 .sidebar-pink .eventlist-today-date {
4275 color: var(--text-primary, #ff69b4) !important;
4276 -webkit-text-fill-color: var(--text-primary, #ff69b4) !important;
4279 /* Badge text AND background protection - all dark themes */
4280 .calendar-theme-matrix .event-today-badge,
4281 .calendar-theme-matrix .event-pastdue-badge,
4282 .calendar-theme-matrix .event-namespace-badge,
4283 .calendar-theme-matrix .eventlist-simple-today-badge,
4284 .calendar-theme-matrix .eventlist-simple-pastdue-badge,
4285 .calendar-theme-matrix .panel-ns-badge,
4286 .sidebar-matrix .event-today-badge,
4287 .sidebar-matrix .event-pastdue-badge,
4288 .sidebar-matrix .event-namespace-badge,
4289 .calendar-theme-purple .event-today-badge,
4290 .calendar-theme-purple .event-pastdue-badge,
4291 .calendar-theme-purple .event-namespace-badge,
4292 .calendar-theme-purple .eventlist-simple-today-badge,
4293 .calendar-theme-purple .eventlist-simple-pastdue-badge,
4294 .calendar-theme-purple .panel-ns-badge,
4295 .sidebar-purple .event-today-badge,
4296 .sidebar-purple .event-pastdue-badge,
4297 .sidebar-purple .event-namespace-badge,
4298 .calendar-theme-pink .event-today-badge,
4299 .calendar-theme-pink .event-pastdue-badge,
4300 .calendar-theme-pink .event-namespace-badge,
4301 .calendar-theme-pink .eventlist-simple-today-badge,
4302 .calendar-theme-pink .eventlist-simple-pastdue-badge,
4303 .calendar-theme-pink .panel-ns-badge,
4304 .sidebar-pink .event-today-badge,
4305 .sidebar-pink .event-pastdue-badge,
4306 .sidebar-pink .event-namespace-badge {
4307 color: var(--background-site, white) !important;
4308 -webkit-text-fill-color: var(--background-site, white) !important;
4309 background: var(--text-bright) !important;
4312 .calendar-theme-matrix .event-pastdue-badge,
4313 .calendar-theme-purple .event-pastdue-badge,
4314 .calendar-theme-pink .event-pastdue-badge,
4315 .calendar-theme-matrix .eventlist-simple-pastdue-badge,
4316 .calendar-theme-purple .eventlist-simple-pastdue-badge,
4317 .calendar-theme-pink .eventlist-simple-pastdue-badge,
4318 .sidebar-matrix .event-pastdue-badge,
4319 .sidebar-purple .event-pastdue-badge,
4320 .sidebar-pink .event-pastdue-badge {
4321 background: var(--pastdue-color, #e74c3c) !important;
4325 .sidebar-purple .event-title-compact,
4326 .sidebar-purple .event-meta-compact,
4327 .sidebar-purple .event-desc-compact {
4328 color: var(--text-primary, #b19cd9) !important;
4329 -webkit-text-fill-color: var(--text-primary, #b19cd9) !important;
4332 .sidebar-purple .eventlist-today-clock {
4333 color: var(--text-bright, #d4a5ff) !important;
4334 -webkit-text-fill-color: var(--text-bright, #d4a5ff) !important;
4337 .sidebar-purple .eventlist-today-date {
4338 color: var(--text-dim, #8e7ab8) !important;
4339 -webkit-text-fill-color: var(--text-dim, #8e7ab8) !important;
4343 .sidebar-pink .event-title-compact {
4344 color: var(--text-bright, #ff1493) !important;
4345 -webkit-text-fill-color: var(--text-bright, #ff1493) !important;
4348 .sidebar-pink .eventlist-today-clock {
4349 color: var(--text-bright, #ff1493) !important;
4350 -webkit-text-fill-color: var(--text-bright, #ff1493) !important;
4353 .sidebar-pink .eventlist-today-date {
4354 color: var(--text-dim, #ff85c1) !important;
4355 -webkit-text-fill-color: var(--text-dim, #ff85c1) !important;
4364 .eventlist-theme-matrix .eventlist-simple-title {
4365 color: var(--text-bright, #00ff00) !important;
4366 -webkit-text-fill-color: var(--text-bright, #00ff00) !important;
4369 .eventlist-theme-matrix .eventlist-simple-header {
4370 color: var(--text-primary, #00cc07) !important;
4371 -webkit-text-fill-color: var(--text-primary, #00cc07) !important;
4372 background: var(--cell-bg, #242424) !important;
4375 .eventlist-theme-matrix .eventlist-simple-time,
4376 .eventlist-theme-matrix .eventlist-simple-date,
4377 .eventlist-theme-matrix .eventlist-simple-body {
4378 color: var(--text-dim, #00aa00) !important;
4379 -webkit-text-fill-color: var(--text-dim, #00aa00) !important;
4380 background: var(--background-site, #242424) !important;
4383 .eventlist-theme-matrix .eventlist-simple-body a {
4384 color: var(--text-bright, #00ff00) !important;
4385 -webkit-text-fill-color: var(--text-bright, #00ff00) !important;
4388 .eventlist-theme-matrix .eventlist-simple-body strong {
4389 color: var(--text-primary, #00cc07) !important;
4390 -webkit-text-fill-color: var(--text-primary, #00cc07) !important;
4393 .eventlist-theme-matrix .eventlist-simple-body code {
4394 background: var(--cell-bg, #1a3d1a) !important;
4395 color: var(--text-primary, #00cc07) !important;
4396 -webkit-text-fill-color: var(--text-primary, #00cc07) !important;
4399 .eventlist-theme-matrix .eventlist-simple-namespace {
4400 background: var(--cell-today-bg, #2a4d2a) !important;
4401 color: var(--text-bright, #00ff00) !important;
4402 -webkit-text-fill-color: var(--text-bright, #00ff00) !important;
4405 .eventlist-theme-matrix .eventlist-simple-empty,
4406 .eventlist-theme-matrix .eventlist-simple-empty .eventlist-simple-body {
4407 color: var(--text-dim, #00aa00) !important;
4408 -webkit-text-fill-color: var(--text-dim, #00aa00) !important;
4411 .eventlist-theme-matrix .eventlist-simple-item {
4412 border-bottom-color: var(--border-color, #00cc07) !important;
4415 .eventlist-theme-matrix .eventlist-today-header {
4416 background: var(--cell-bg, #242424) !important;
4417 color: var(--text-bright, #00ff00) !important;
4418 -webkit-text-fill-color: var(--text-bright, #00ff00) !important;
4419 border-color: var(--text-bright, #00ff00) !important;
4422 .eventlist-theme-matrix .eventlist-today-clock {
4423 color: var(--text-bright, #00ff00) !important;
4424 -webkit-text-fill-color: var(--text-bright, #00ff00) !important;
4427 .eventlist-theme-matrix .eventlist-today-date {
4428 color: var(--text-dim, #00aa00) !important;
4429 -webkit-text-fill-color: var(--text-dim, #00aa00) !important;
4433 .eventlist-theme-purple .eventlist-simple-title {
4434 color: var(--text-bright, #d4a5ff) !important;
4435 -webkit-text-fill-color: var(--text-bright, #d4a5ff) !important;
4438 .eventlist-theme-purple .eventlist-simple-header {
4439 color: var(--text-primary, #b19cd9) !important;
4440 -webkit-text-fill-color: var(--text-primary, #b19cd9) !important;
4441 background: var(--cell-bg, #2a2030) !important;
4444 .eventlist-theme-purple .eventlist-simple-time,
4445 .eventlist-theme-purple .eventlist-simple-date,
4446 .eventlist-theme-purple .eventlist-simple-body {
4447 color: var(--text-dim, #8e7ab8) !important;
4448 -webkit-text-fill-color: var(--text-dim, #8e7ab8) !important;
4449 background: var(--background-site, #2a2030) !important;
4452 .eventlist-theme-purple .eventlist-simple-body a {
4453 color: var(--text-bright, #d4a5ff) !important;
4454 -webkit-text-fill-color: var(--text-bright, #d4a5ff) !important;
4457 .eventlist-theme-purple .eventlist-simple-body strong {
4458 color: var(--text-primary, #b19cd9) !important;
4459 -webkit-text-fill-color: var(--text-primary, #b19cd9) !important;
4462 .eventlist-theme-purple .eventlist-simple-body code {
4463 background: var(--cell-bg, #3d2b4d) !important;
4464 color: var(--text-primary, #b19cd9) !important;
4465 -webkit-text-fill-color: var(--text-primary, #b19cd9) !important;
4468 .eventlist-theme-purple .eventlist-simple-namespace {
4469 background: var(--cell-today-bg, #3d2b4d) !important;
4470 color: var(--text-bright, #d4a5ff) !important;
4471 -webkit-text-fill-color: var(--text-bright, #d4a5ff) !important;
4474 .eventlist-theme-purple .eventlist-simple-empty,
4475 .eventlist-theme-purple .eventlist-simple-empty .eventlist-simple-body {
4476 color: var(--text-dim, #8e7ab8) !important;
4477 -webkit-text-fill-color: var(--text-dim, #8e7ab8) !important;
4480 .eventlist-theme-purple .eventlist-simple-item {
4481 border-bottom-color: var(--border-color, #9b59b6) !important;
4484 .eventlist-theme-purple .eventlist-today-header {
4485 background: var(--cell-bg, #2a2030) !important;
4486 color: var(--text-bright, #d4a5ff) !important;
4487 -webkit-text-fill-color: var(--text-bright, #d4a5ff) !important;
4488 border-color: var(--text-bright, #d4a5ff) !important;
4491 .eventlist-theme-purple .eventlist-today-clock {
4492 color: var(--text-bright, #d4a5ff) !important;
4493 -webkit-text-fill-color: var(--text-bright, #d4a5ff) !important;
4496 .eventlist-theme-purple .eventlist-today-date {
4497 color: var(--text-dim, #8e7ab8) !important;
4498 -webkit-text-fill-color: var(--text-dim, #8e7ab8) !important;
4502 .eventlist-theme-pink .eventlist-simple-title {
4503 color: var(--text-bright, #ff1493) !important;
4504 -webkit-text-fill-color: var(--text-bright, #ff1493) !important;
4507 .eventlist-theme-pink .eventlist-simple-header {
4508 color: var(--text-primary, #ff69b4) !important;
4509 -webkit-text-fill-color: var(--text-primary, #ff69b4) !important;
4510 background: var(--cell-bg, #1a0d14) !important;
4513 .eventlist-theme-pink .eventlist-simple-time,
4514 .eventlist-theme-pink .eventlist-simple-date,
4515 .eventlist-theme-pink .eventlist-simple-body {
4516 color: var(--text-dim, #ff85c1) !important;
4517 -webkit-text-fill-color: var(--text-dim, #ff85c1) !important;
4518 background: var(--background-site, #1a0d14) !important;
4521 .eventlist-theme-pink .eventlist-simple-body a {
4522 color: var(--text-bright, #ff1493) !important;
4523 -webkit-text-fill-color: var(--text-bright, #ff1493) !important;
4526 .eventlist-theme-pink .eventlist-simple-body strong {
4527 color: var(--text-primary, #ff69b4) !important;
4528 -webkit-text-fill-color: var(--text-primary, #ff69b4) !important;
4531 .eventlist-theme-pink .eventlist-simple-body code {
4532 background: var(--cell-bg, #2d1020) !important;
4533 color: var(--text-primary, #ff69b4) !important;
4534 -webkit-text-fill-color: var(--text-primary, #ff69b4) !important;
4537 .eventlist-theme-pink .eventlist-simple-namespace {
4538 background: var(--cell-today-bg, #2d1020) !important;
4539 color: var(--text-bright, #ff1493) !important;
4540 -webkit-text-fill-color: var(--text-bright, #ff1493) !important;
4543 .eventlist-theme-pink .eventlist-simple-empty,
4544 .eventlist-theme-pink .eventlist-simple-empty .eventlist-simple-body {
4545 color: var(--text-dim, #ff85c1) !important;
4546 -webkit-text-fill-color: var(--text-dim, #ff85c1) !important;
4549 .eventlist-theme-pink .eventlist-simple-item {
4550 border-bottom-color: var(--border-color, #ff1493) !important;
4553 .eventlist-theme-pink .eventlist-today-header {
4554 background: var(--cell-bg, #1a0d14) !important;
4555 color: var(--text-bright, #ff1493) !important;
4556 -webkit-text-fill-color: var(--text-bright, #ff1493) !important;
4557 border-color: var(--text-bright, #ff1493) !important;
4560 .eventlist-theme-pink .eventlist-today-clock {
4561 color: var(--text-bright, #ff1493) !important;
4562 -webkit-text-fill-color: var(--text-bright, #ff1493) !important;
4565 .eventlist-theme-pink .eventlist-today-date {
4566 color: var(--text-dim, #ff85c1) !important;
4567 -webkit-text-fill-color: var(--text-dim, #ff85c1) !important;
4571 STATIC CALENDAR - Read-only Presentation Mode
4574 .calendar-static {
4575 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
4577 max-width: 100%;
4579 box-sizing: border-box;
4580 overflow-x: auto;
4584 .static-header {
4586 align-items: center;
4587 justify-content: center;
4592 border-radius: 8px 8px 0 0;
4595 .static-month-title {
4597 font-size: 1.3em;
4598 font-weight: 600;
4599 min-width: 180px;
4600 text-align: center;
4603 .static-nav-btn {
4607 font-size: 16px;
4610 border-radius: 50%;
4613 flex-shrink: 0;
4616 .static-nav-btn:hover {
4620 .static-print-btn {
4624 font-size: 16px;
4627 border-radius: 50%;
4630 flex-shrink: 0;
4631 margin-left: 10px;
4633 align-items: center;
4634 justify-content: center;
4636 line-height: 1;
4639 .static-print-btn:hover {
4644 .static-calendar-grid {
4646 border-collapse: collapse;
4649 table-layout: fixed;
4652 .static-calendar-grid th {
4655 text-align: center;
4656 font-weight: 600;
4658 border-bottom: 2px solid #ddd;
4659 font-size: 12px;
4662 .static-calendar-grid td {
4664 vertical-align: top;
4671 .static-day {
4676 .static-day-empty {
4680 .static-day-number {
4684 font-size: 14px;
4685 font-weight: 500;
4689 .static-day-today .static-day-number {
4694 border-radius: 50%;
4696 align-items: center;
4697 justify-content: center;
4701 .static-day-weekend {
4705 .static-day-events {
4708 flex-direction: column;
4710 max-height: 80px;
4711 overflow-y: auto;
4715 .static-event {
4716 font-size: 11px;
4719 border-left: 3px solid #3498db;
4720 border-radius: 2px;
4721 white-space: nowrap;
4723 text-overflow: ellipsis;
4727 .static-event:hover {
4731 .static-event-important {
4732 background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 193, 7, 0.1));
4733 border-left-color: #ffc107;
4736 .static-event-important:hover {
4737 background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 193, 7, 0.2));
4740 .static-event-star {
4741 font-size: 10px;
4742 margin-right: 2px;
4745 .static-event-time {
4746 font-weight: 600;
4750 .static-event-title {
4754 /* Print view - hidden on screen */
4755 .static-print-view {
4760 .static-itinerary {
4762 border-collapse: collapse;
4763 margin-top: 20px;
4766 .static-itinerary th {
4770 text-align: left;
4771 font-weight: 600;
4774 .static-itinerary td {
4776 border-bottom: 1px solid #ddd;
4777 vertical-align: top;
4780 .static-itinerary-date {
4781 font-weight: 600;
4782 white-space: nowrap;
4786 .static-itinerary-time {
4787 white-space: nowrap;
4792 .static-itinerary-title {
4793 font-weight: 500;
4796 .static-itinerary-desc {
4798 font-size: 0.9em;
4801 .static-itinerary-important {
4805 .static-print-title {
4807 font-size: 1.5em;
4811 .static-print-namespace {
4814 font-style: italic;
4817 .static-print-empty {
4819 font-style: italic;
4824 .calendar-static {
4825 max-width: 100%;
4829 min-height: 0 !important;
4830 max-height: none !important;
4834 .static-screen-view,
4835 .static-screen-view *,
4836 .static-header,
4837 .static-calendar-grid,
4838 .static-day,
4839 .static-day-events,
4840 .static-event,
4841 .static-nav-btn {
4845 max-height: 0 !important;
4847 max-width: 0 !important;
4850 left: -9999px !important;
4857 .static-print-view {
4866 .static-print-view * {
4872 .static-itinerary {
4873 page-break-inside: auto;
4878 .static-itinerary tr {
4879 page-break-inside: avoid;
4880 page-break-after: auto;
4881 display: table-row !important;
4884 .static-itinerary td,
4885 .static-itinerary th {
4886 display: table-cell !important;
4891 .static-itinerary th {
4893 -webkit-print-color-adjust: exact;
4894 print-color-adjust: exact;
4897 .static-itinerary-important {
4899 -webkit-print-color-adjust: exact;
4900 print-color-adjust: exact;
4903 .static-print-title,
4904 .static-print-namespace,
4905 .static-print-empty {
4906 page-break-after: avoid;
4914 @media (max-width: 768px) {
4915 .static-header {
4920 .static-month-title {
4921 font-size: 1.1em;
4922 min-width: 120px;
4925 .static-nav-btn {
4928 font-size: 14px;
4931 .static-calendar-grid th {
4933 font-size: 10px;
4936 .static-calendar-grid td {
4940 .static-day-number {
4941 font-size: 11px;
4946 .static-day-today .static-day-number {
4952 .static-day-events {
4954 max-height: 40px;
4958 .static-event {
4959 font-size: 9px;
4963 .static-event-time {
4968 @media (max-width: 480px) {
4969 .static-calendar-grid th {
4970 font-size: 9px;
4974 .static-calendar-grid td {
4978 .static-day-events {
4979 max-height: 30px;
4982 .static-event {
4983 font-size: 8px;
4988 .static-theme-matrix .static-header {
4990 border-bottom: 1px solid #00ff00;
4993 .static-theme-matrix .static-calendar-grid {
4995 border-color: #00ff00;
4998 .static-theme-matrix .static-calendar-grid th {
5001 border-color: #004400;
5004 .static-theme-matrix .static-calendar-grid td {
5005 border-color: #003300;
5009 .static-theme-matrix .static-day-empty {
5013 .static-theme-matrix .static-day-weekend {
5017 .static-theme-matrix .static-day-number {
5021 .static-theme-matrix .static-day-today .static-day-number {
5026 .static-theme-matrix .static-event {
5031 .static-theme-matrix .static-event:hover {
5036 .static-theme-pink .static-header {
5037 background: linear-gradient(135deg, #ff1493, #ff69b4);
5040 .static-theme-pink .static-calendar-grid {
5042 border-color: #ff1493;
5045 .static-theme-pink .static-calendar-grid th {
5048 border-color: #ff1493;
5051 .static-theme-pink .static-calendar-grid td {
5052 border-color: #440020;
5056 .static-theme-pink .static-day-empty {
5060 .static-theme-pink .static-day-weekend {
5064 .static-theme-pink .static-day-number {
5068 .static-theme-pink .static-day-today .static-day-number {
5073 .static-theme-pink .static-event {
5079 .static-theme-dark .static-header {
5083 .static-theme-dark .static-calendar-grid {
5085 border-color: #1a1a2e;
5088 .static-theme-dark .static-calendar-grid th {
5093 .static-theme-dark .static-calendar-grid td {
5094 border-color: #2a2a4e;
5098 .static-theme-dark .static-day-empty {
5102 .static-theme-dark .static-day-weekend {
5106 .static-theme-dark .static-day-number {
5110 .static-theme-dark .static-day-today .static-day-number {
5115 .static-theme-dark .static-event {
5122 .static-theme-purple .static-header {
5123 background: linear-gradient(180deg, #2f2438 0%, #2a2030 100%);
5124 border-bottom: 1px solid #9b59b6;
5127 .static-theme-purple .static-calendar-grid {
5129 border-color: #9b59b6;
5132 .static-theme-purple .static-calendar-grid th {
5135 border-color: #9b59b6;
5138 .static-theme-purple .static-calendar-grid td {
5139 border-color: #4d3860;
5143 .static-theme-purple .static-day-empty {
5147 .static-theme-purple .static-day-weekend {
5151 .static-theme-purple .static-day-number {
5155 .static-theme-purple .static-day-today .static-day-number {
5160 .static-theme-purple .static-event {
5163 border-left-color: #9b59b6;
5166 .static-theme-purple .static-event:hover {
5171 .static-theme-professional .static-header {
5172 background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
5173 border-bottom: 2px solid #4a90e2;
5177 .static-theme-professional .static-header h2 {
5181 .static-theme-professional .static-nav-btn,
5182 .static-theme-professional .static-print-btn {
5187 .static-theme-professional .static-nav-btn:hover,
5188 .static-theme-professional .static-print-btn:hover {
5192 .static-theme-professional .static-calendar-grid {
5194 border-color: #d0d7de;
5197 .static-theme-professional .static-calendar-grid th {
5200 border-color: #d0d7de;
5203 .static-theme-professional .static-calendar-grid td {
5204 border-color: #e8ecf1;
5208 .static-theme-professional .static-day-empty {
5212 .static-theme-professional .static-day-weekend {
5216 .static-theme-professional .static-day-number {
5220 .static-theme-professional .static-day-today .static-day-number {
5225 .static-theme-professional .static-event {
5228 border-left-color: #4a90e2;
5231 .static-theme-professional .static-event:hover {
5236 .static-theme-wiki .static-header {
5238 border-bottom: 1px solid #ccc;
5242 .static-theme-wiki .static-header h2 {
5246 .static-theme-wiki .static-nav-btn,
5247 .static-theme-wiki .static-print-btn {
5252 .static-theme-wiki .static-nav-btn:hover,
5253 .static-theme-wiki .static-print-btn:hover {
5257 .static-theme-wiki .static-calendar-grid {
5259 border-color: #ccc;
5262 .static-theme-wiki .static-calendar-grid th {
5265 border-color: #ccc;
5268 .static-theme-wiki .static-calendar-grid td {
5269 border-color: #ddd;
5273 .static-theme-wiki .static-day-empty {
5277 .static-theme-wiki .static-day-weekend {
5281 .static-theme-wiki .static-day-number {
5285 .static-theme-wiki .static-day-today .static-day-number {
5290 .static-theme-wiki .static-event {
5293 border-left-color: #2196f3;
5296 .static-theme-wiki .static-event:hover {
5300 /* Light theme (clean white) */
5301 .static-theme-light .static-header {
5303 border-bottom: 2px solid #e0e0e0;
5307 .static-theme-light .static-header h2 {
5311 .static-theme-light .static-nav-btn,
5312 .static-theme-light .static-print-btn {
5317 .static-theme-light .static-nav-btn:hover,
5318 .static-theme-light .static-print-btn:hover {
5322 .static-theme-light .static-calendar-grid {
5324 border-color: #e0e0e0;
5327 .static-theme-light .static-calendar-grid th {
5330 border-color: #e0e0e0;
5333 .static-theme-light .static-calendar-grid td {
5334 border-color: #f0f0f0;
5338 .static-theme-light .static-day-empty {
5342 .static-theme-light .static-day-weekend {
5346 .static-theme-light .static-day-number {
5350 .static-theme-light .static-day-today .static-day-number {
5355 .static-theme-light .static-event {
5360 .static-theme-light .static-event:hover {
5365 .static-tooltip {
5370 border-radius: 6px;
5371 font-size: 12px;
5372 max-width: 300px;
5373 z-index: 10000;
5374 box-shadow: 0 4px 12px rgba(0,0,0,0.3);
5375 pointer-events: none;
5376 line-height: 1.4;
5379 .static-tooltip strong {
5381 margin-bottom: 4px;
5382 font-size: 13px;
5385 .static-tooltip .tooltip-time {
5387 font-weight: 500;
5390 .static-tooltip .tooltip-desc {
5392 margin-top: 6px;
5394 border-top: 1px solid rgba(255,255,255,0.2);
5395 padding-top: 6px;
5398 .static-tooltip .tooltip-desc strong {
5401 font-size: inherit;
5404 .static-tooltip .tooltip-desc em {
5405 font-style: italic;
5408 .static-tooltip a {
5410 text-decoration: underline;
5414 .static-itinerary-desc strong {
5415 font-weight: 600;
5418 .static-itinerary-desc em {
5419 font-style: italic;
5422 .static-itinerary-desc a {
5424 text-decoration: underline;
5427 .static-itinerary-desc br {
5430 margin-top: 4px;