1/* Compact Calendar Plugin - Sleek Design */ 2 3/* Main container: Responsive with flexible sizing */ 4.calendar-compact-container { 5 display: flex; 6 width: 100%; 7 max-width: 1200px; 8 min-width: 320px; 9 height: 600px; 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); 15 overflow: hidden; 16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 17 font-size: 12px; 18} 19 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)); 24} 25 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)); 29} 30 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)); 34} 35 36/* Mobile responsive */ 37@media (max-width: 768px) { 38 .calendar-compact-container { 39 flex-direction: column; 40 height: auto; 41 min-height: 400px; 42 max-height: none; 43 } 44 45 .calendar-compact-left { 46 width: 100% !important; 47 min-width: 100% !important; 48 border-right: none !important; 49 border-bottom: 1px solid var(--border-color, #e0e0e0); 50 height: auto; 51 min-height: 300px; 52 } 53 54 .calendar-compact-right { 55 width: 100% !important; 56 min-width: 100% !important; 57 max-height: 400px; 58 } 59} 60 61/* Tablet responsive */ 62@media (max-width: 1024px) and (min-width: 769px) { 63 .calendar-compact-container { 64 max-width: 100%; 65 } 66 67 .calendar-compact-left { 68 width: 60% !important; 69 min-width: 400px; 70 } 71 72 .calendar-compact-right { 73 width: 40% !important; 74 min-width: 250px; 75 } 76} 77 78/* Small screens */ 79@media (max-width: 600px) { 80 .calendar-compact-container { 81 font-size: 11px; 82 height: auto; 83 max-height: none; 84 } 85} 86 87/* Left side: Calendar - FLEXIBLE */ 88.calendar-compact-left { 89 flex: 1; 90 min-width: 400px; 91 border-right: 1px solid var(--border-color, #e0e0e0); 92 display: flex; 93 flex-direction: column; 94 background: var(--background-site); 95 overflow: hidden; 96} 97 98/* Right side: Event list - FLEXIBLE */ 99.calendar-compact-right { 100 flex: 0 0 300px; 101 min-width: 250px; 102 max-width: 400px; 103 display: flex; 104 flex-direction: column; 105 background: var(--background-site); 106 overflow: hidden; 107} 108 109/* Calendar header - COMPACT */ 110.calendar-compact-header { 111 display: flex; 112 align-items: center; 113 gap: 12px; 114 padding: 8px 12px; 115 background: var(--background-header); 116 color: var(--text-primary); 117 border-bottom: 1px solid var(--border-color, #e0e0e0); 118} 119 120/* Namespace filter indicator at top of calendar */ 121.calendar-namespace-filter { 122 display: flex; 123 align-items: center; 124 gap: 6px; 125 padding: 6px 10px; 126 background: var(--cell-today-bg, #e8f5e9); 127 border: 1px solid var(--border-main, #81c784); 128 border-radius: 4px; 129 margin: 8px 12px 0 12px; 130 font-size: 11px; 131} 132 133.namespace-filter-label { 134 color: var(--text-bright, #2e7d32); 135 font-weight: 600; 136} 137 138.namespace-filter-name { 139 background: var(--text-bright, #00cc07); 140 color: var(--background-site, white); 141 padding: 2px 6px; 142 border-radius: 3px; 143 font-weight: 500; 144 font-family: monospace; 145 font-size: 10px; 146} 147 148.namespace-filter-clear { 149 background: none; 150 border: none; 151 color: var(--text-bright, #00cc07); 152 cursor: pointer; 153 font-size: 16px; 154 padding: 0; 155 width: 20px; 156 height: 20px; 157 display: flex; 158 align-items: center; 159 justify-content: center; 160 border-radius: 3px; 161 margin-left: auto; 162 transition: background 0.2s; 163} 164 165.namespace-filter-clear:hover { 166 background: var(--cell-today-bg, rgba(0, 204, 7, 0.1)); 167} 168 169.namespace-filter-badge { 170 position: relative; 171 padding-right: 24px !important; 172} 173 174.filter-clear-inline { 175 position: absolute; 176 right: 4px; 177 top: 50%; 178 transform: translateY(-50%); 179 background: none; 180 border: none; 181 color: var(--text-dim, #999); 182 cursor: pointer; 183 font-size: 12px; 184 padding: 0; 185 width: 16px; 186 height: 16px; 187 border-radius: 50%; 188 display: flex; 189 align-items: center; 190 justify-content: center; 191 transition: all 0.15s; 192 line-height: 1; 193} 194 195.filter-clear-inline:hover { 196 background: var(--cell-bg, rgba(211, 47, 47, 0.1)); 197 color: var(--text-bright, #d32f2f); 198} 199 200.calendar-compact-header h3 { 201 margin: 0; 202 font-size: 14px; 203 font-weight: 600; 204 color: var(--text-primary, #2c3e50); 205 flex: 1; 206 text-align: center; 207} 208 209.calendar-month-picker { 210 cursor: pointer; 211 user-select: none; 212 transition: all 0.15s; 213 padding: 4px 8px; 214 border-radius: 4px; 215} 216 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)); 221} 222 223.month-picker-overlay { 224 position: fixed; 225 top: 0; 226 left: 0; 227 right: 0; 228 bottom: 0; 229 background: rgba(0, 0, 0, 0.5); 230 display: flex; 231 align-items: center; 232 justify-content: center; 233 z-index: 10000; 234} 235 236.month-picker-dialog { 237 background: var(--background-site, white); 238 border-radius: 8px; 239 padding: 20px; 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); 243} 244 245.month-picker-dialog h4 { 246 margin: 0 0 16px 0; 247 font-size: 16px; 248 font-weight: 600; 249 color: var(--text-primary, #2c3e50); 250} 251 252.month-picker-selects { 253 display: flex; 254 gap: 12px; 255 margin-bottom: 16px; 256} 257 258.month-picker-select { 259 flex: 1; 260 padding: 8px 12px; 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); 266 cursor: pointer; 267} 268 269.month-picker-select:focus { 270 outline: none; 271 border-color: var(--text-bright, #008800); 272 box-shadow: 0 0 0 2px var(--shadow-color, rgba(0, 136, 0, 0.1)); 273} 274 275.month-picker-actions { 276 display: flex; 277 gap: 8px; 278 justify-content: flex-end; 279} 280 281.cal-nav-btn { 282 background: var(--border-main); 283 border: 1px solid var(--border-color); 284 color: var(--background-site); 285 width: 28px; 286 height: 28px; 287 border-radius: 4px; 288 cursor: pointer; 289 font-size: 16px; 290 transition: all 0.15s; 291 padding: 0; 292 display: flex; 293 align-items: center; 294 justify-content: center; 295} 296 297.cal-nav-btn:hover { 298 filter: brightness(1.3); 299 box-shadow: 0 0 6px var(--shadow-color, rgba(0,0,0,0.3)); 300 transform: scale(1.08); 301} 302 303.cal-nav-btn:active { 304 filter: brightness(0.85); 305 transform: scale(0.95); 306 box-shadow: none; 307} 308 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; 315 padding: 4px 10px; 316 border-radius: 4px; 317 cursor: pointer; 318 transition: all 0.15s; 319} 320 321.cal-today-btn:hover { 322 filter: brightness(1.3); 323 box-shadow: 0 0 6px var(--shadow-color, rgba(0,0,0,0.3)); 324 transform: scale(1.08); 325} 326 327.cal-today-btn:active { 328 filter: brightness(0.85); 329 transform: scale(0.95); 330 box-shadow: none; 331} 332 333/* Calendar grid - Excel-like sizing - RESPONSIVE */ 334.calendar-compact-grid { 335 width: 100%; 336 border-collapse: collapse; 337 table-layout: fixed; 338 flex: 1; 339 margin: 0 !important; 340 padding: 0; 341} 342 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 { 346 display: grid; 347 grid-template-columns: repeat(7, 1fr); 348 background: var(--background-header); 349 border-bottom: 1px solid var(--border-color, #d0d0d0); 350 margin: 0; 351 padding: 0; 352} 353 354.calendar-day-headers span { 355 height: 22px; 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; 363} 364 365.calendar-day-headers span:last-child { 366 border-right: none; 367} 368 369.calendar-compact-grid tbody td { 370 height: 58px; 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); 377 cursor: pointer; 378 padding: 3px; 379 position: relative; 380 vertical-align: top; 381 transition: background 0.1s; 382} 383 384/* Smaller cells on mobile */ 385@media (max-width: 600px) { 386 .calendar-compact-grid tbody td { 387 height: 45px; 388 min-height: 35px; 389 padding: 2px; 390 } 391 392 .calendar-day-headers span { 393 height: 18px; 394 line-height: 18px; 395 font-size: 9px; 396 } 397} 398 399.calendar-compact-grid tbody td:first-child { 400 border-left: 1px solid var(--border-color, #e8e8e8); 401} 402 403.calendar-compact-grid tbody td:hover { 404 background-color: var(--background-alt); /* Hover state uses scoped var */ 405} 406 407.cal-empty { 408 background: var(--background-site); 409 cursor: default !important; 410} 411 412.cal-empty:hover { 413 background: var(--background-site); 414} 415 416.cal-day { 417 cursor: pointer; 418 transition: background 0.15s, box-shadow 0.15s; 419} 420 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)); 424} 425 426.cal-today { 427 background: var(--cell-today-bg); 428} 429 430.cal-today:hover { 431 box-shadow: inset 0 0 0 2px var(--border-main, rgba(0,0,0,0.15)); 432} 433 434.cal-has-events { 435 /* background removed - set via inline style with template colors */ 436} 437 438.cal-has-events:hover { 439 /* background removed - inline style handles this */ 440} 441 442.day-num { 443 display: inline-block; 444 font-size: 11px; 445 font-weight: 500; 446 color: var(--text-primary, #333); 447 padding: 1px 3px; 448} 449 450.cal-today .day-num, 451.day-num-today { 452 background: var(--border-main, #008800); 453 color: var(--background-site, white) !important; 454 border-radius: 50%; 455 font-weight: 700; 456 width: 20px; 457 height: 20px; 458 line-height: 20px; 459 text-align: center; 460 padding: 0; 461 display: inline-block; 462} 463 464.event-indicators { 465 position: absolute; 466 left: 20px; 467 right: 0; 468 top: 20px; 469 bottom: 2px; 470 display: flex; 471 flex-direction: column; 472 gap: 2px; 473 pointer-events: none; 474} 475 476.event-bar { 477 width: 100%; 478 min-height: 6px; 479 height: 6px; 480 border-radius: 2px; 481 cursor: pointer; 482 pointer-events: auto; 483 transition: all 0.2s; 484 box-shadow: 0 1px 2px rgba(0,0,0,0.1); 485 position: relative; 486} 487 488.event-bar:hover { 489 transform: scaleY(1.3); 490 box-shadow: 0 2px 4px rgba(0,0,0,0.2); 491 z-index: 10; 492} 493 494.event-bar-no-time { 495 /* Events without time appear at top */ 496 order: -1; 497 opacity: 0.9; 498} 499 500.event-bar-timed { 501 /* Events with time are sorted by time */ 502 opacity: 0.95; 503} 504 505/* Multi-day event styling - creates visual continuity */ 506.event-bar-continues { 507 /* Event continues from previous day - extend left to cell edge */ 508 border-top-left-radius: 0; 509 border-bottom-left-radius: 0; 510 margin-left: -20px; 511 padding-left: 20px; 512} 513 514.event-bar-continuing { 515 /* Event continues to next day - extend right to cell edge */ 516 border-top-right-radius: 0; 517 border-bottom-right-radius: 0; 518 margin-right: -2px; 519 padding-right: 2px; 520} 521 522.event-bar-continues.event-bar-continuing { 523 /* Event continues both ways (middle of span) - no border radius, extends both sides */ 524 border-radius: 0; 525} 526 527/* Old event dot - removing */ 528.event-dot { 529 display: none; 530} 531 532/* Event list header - COMPACT */ 533.event-list-header { 534 display: flex; 535 align-items: center; 536 justify-content: space-between; 537 padding: 8px 10px; 538 border-bottom: 1px solid var(--border-color, #e0e0e0); 539 background: var(--background-header); 540} 541 542.event-list-header-content { 543 display: flex; 544 align-items: center; 545 gap: 6px; 546 flex: 1; 547} 548 549.event-list-header h4 { 550 margin: 0; 551 font-size: 12px; 552 font-weight: 600; 553 color: var(--text-primary); 554} 555 556.namespace-badge { 557 background: var(--cell-today-bg, #e8f5e9); 558 color: var(--text-bright, #388e3c); 559 padding: 2px 6px; 560 border-radius: 10px; 561 font-size: 9px; 562 font-weight: 600; 563 text-transform: uppercase; 564 letter-spacing: 0.3px; 565 border: 1px solid var(--border-color, transparent); 566} 567 568/* Event search bar - inline in header */ 569.event-search-container-inline { 570 position: relative; 571 flex: 1; 572 max-width: 200px; 573 margin: 0 8px; 574} 575 576.event-search-input-inline { 577 width: 100%; 578 padding: 4px 24px 4px 8px; 579 border: 1px solid var(--border-color, #d0d0d0); 580 border-radius: 3px; 581 font-size: 11px; 582 outline: none; 583 transition: border-color 0.2s, box-shadow 0.2s; 584 background: var(--cell-bg); 585 color: var(--text-primary); 586} 587 588.event-search-input-inline:focus { 589 border-color: var(--text-bright, #00cc07); 590 box-shadow: 0 0 0 2px var(--shadow-color, rgba(0, 204, 7, 0.1)); 591} 592 593.event-search-input-inline::placeholder { 594 color: var(--text-dim); 595 font-size: 10px; 596} 597 598.event-search-clear-inline { 599 position: absolute; 600 right: 4px; 601 top: 50%; 602 transform: translateY(-50%); 603 background: none; 604 border: none; 605 color: var(--text-dim); 606 cursor: pointer; 607 padding: 2px 4px; 608 font-size: 12px; 609 line-height: 1; 610 transition: color 0.2s; 611} 612 613.event-search-clear-inline:hover { 614 color: var(--text-primary); 615} 616 617.no-search-results { 618 text-align: center; 619 color: var(--text-dim); 620 font-size: 12px; 621 padding: 20px; 622 font-style: italic; 623} 624 625.add-event-compact { 626 background: var(--border-main); 627 color: var(--background-site); 628 border: none; 629 padding: 4px 8px; 630 border-radius: 3px; 631 font-size: 11px; 632 font-weight: 500; 633 cursor: pointer; 634 transition: all 0.15s; 635} 636 637.add-event-compact:hover { 638 filter: brightness(1.3); 639 box-shadow: 0 0 6px var(--shadow-color, rgba(0,0,0,0.3)); 640 transform: scale(1.05); 641} 642 643.add-event-compact:active { 644 filter: brightness(0.85); 645 transform: scale(0.95); 646} 647 648/* Event list scrollable area - COMPACT */ 649.event-list-compact { 650 flex: 1; 651 overflow-y: auto; 652 padding: 6px; 653 background: var(--background-site); 654} 655 656.event-list-compact::-webkit-scrollbar { 657 width: 6px; 658} 659 660.event-list-compact::-webkit-scrollbar-track { 661 background: var(--cell-bg, #f5f5f5); 662} 663 664.event-list-compact::-webkit-scrollbar-thumb { 665 background: var(--border-color, #ccc); 666 border-radius: 3px; 667} 668 669.event-list-compact::-webkit-scrollbar-thumb:hover { 670 background: var(--text-dim, #aaa); 671} 672 673/* Event items in list - SUPER COMPACT with checkbox on right */ 674.event-compact-item { 675 display: flex; 676 align-items: flex-start; 677 margin-bottom: 4px; 678 background-color: var(--background-site); 679 color: var(--text-primary); 680 border: 1px solid var(--border-color, #e0e0e0); 681 border-left: 3px solid var(--text-bright, #3498db); 682 border-radius: 3px; 683 padding: 5px 6px; 684 transition: box-shadow 0.15s, background 0.15s, transform 0.15s; 685 gap: 6px; 686 position: relative; 687} 688 689.event-compact-item:hover { 690 box-shadow: 0 1px 3px rgba(0,0,0,0.08); 691 background-color: var(--background-alt); /* Slightly different on hover */ 692} 693 694.event-highlighted { 695 animation: highlightPulse 0.6s ease-in-out; 696 background: var(--tomorrow-bg, #fff9e6) !important; 697 box-shadow: 0 2px 8px var(--shadow-color, rgba(255, 193, 7, 0.4)) !important; 698} 699 700@keyframes highlightPulse { 701 0% { 702 background: var(--background-site, #ffffff); 703 box-shadow: 0 0 0 rgba(255, 193, 7, 0); 704 } 705 50% { 706 background: #fffbea; 707 box-shadow: 0 4px 12px rgba(255, 193, 7, 0.6); 708 transform: scale(1.02); 709 } 710 100% { 711 background: #fff9e6; 712 box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4); 713 transform: scale(1); 714 } 715} 716 717.event-completed { 718 opacity: 0.55; 719 background: var(--cell-bg, #f5f5f5); 720} 721 722.event-completed .event-title-compact { 723 text-decoration: line-through; 724 color: var(--text-dim, #999); 725} 726 727.event-past { 728 opacity: 0.35; 729 background: var(--cell-bg, #fafafa); 730 font-size: 10px; 731 padding: 3px 6px; 732 margin-bottom: 2px; 733 cursor: pointer; 734 transition: all 0.2s ease; 735} 736 737.event-past:hover { 738 opacity: 0.6; 739 background: var(--cell-today-bg, #f5f5f5); 740} 741 742.event-past-expanded { 743 opacity: 0.8 !important; 744 background: var(--cell-bg, #f9f9f9) !important; 745 padding: 5px 6px !important; 746 font-size: 12px !important; 747} 748 749.event-past-expanded .event-title-compact { 750 font-size: 12px !important; 751 color: var(--text-dim, #666) !important; 752} 753 754.event-past-expanded .event-date-time { 755 font-size: 11px !important; 756 color: var(--text-dim, #888) !important; 757} 758 759.event-past .event-title-compact { 760 font-size: 10px; 761 color: var(--text-dim, #aaa); 762 font-weight: 400; 763} 764 765.event-past .event-date-time { 766 font-size: 9px; 767 color: var(--text-dim, #bbb); 768} 769 770.event-past .event-action-btn { 771 font-size: 11px; 772 opacity: 0.3; 773} 774 775.event-past .event-action-btn:hover { 776 opacity: 0.7; 777} 778 779.event-today-badge { 780 background: var(--border-main, #9b59b6); 781 color: var(--background-site, white); 782 padding: 1px 4px; 783 border-radius: 3px; 784 font-size: 9px; 785 font-weight: 600; 786 letter-spacing: 0.5px; 787 display: inline-block; 788 vertical-align: middle; 789 margin-left: auto; /* Right-align */ 790 float: right; /* Force to right side */ 791} 792 793.event-pastdue-badge { 794 background: var(--pastdue-color, #e74c3c); 795 color: white; 796 padding: 1px 4px; 797 border-radius: 3px; 798 font-size: 9px; 799 font-weight: 600; 800 letter-spacing: 0.5px; 801 display: inline-block; 802 vertical-align: middle; 803 margin-left: auto; /* Right-align */ 804 float: right; /* Force to right side */ 805} 806 807.event-pastdue { 808 border: 2px solid var(--pastdue-color, #e74c3c) !important; 809 border-radius: 4px; 810 opacity: 1 !important; 811} 812 813.event-namespace-badge { 814 background: var(--text-bright, #008800); 815 color: var(--background-site, white); 816 padding: 1px 4px; 817 border-radius: 3px; 818 font-size: 9px; 819 font-weight: 500; 820 display: inline-block; 821 vertical-align: middle; 822 margin-left: 4px; 823 cursor: pointer; 824 transition: all 0.15s; 825} 826 827.event-namespace-badge:hover { 828 filter: brightness(1.3); 829} 830 831.event-conflict-badge { 832 background: var(--border-main, #ff9800); 833 color: var(--background-site, white); 834 padding: 0px 4px; 835 border-radius: 2px; 836 font-size: 9px; 837 display: inline-block; 838 vertical-align: middle; 839 margin-left: 3px; 840 cursor: help; 841 animation: pulse-warning 2s infinite; 842 line-height: 14px; 843 border: 1px solid var(--text-bright, #ff9800); 844} 845 846@keyframes pulse-warning { 847 0%, 100% { 848 opacity: 1; 849 } 850 50% { 851 opacity: 0.7; 852 } 853} 854 855.event-conflict-badge:hover { 856 background: var(--text-bright, #f57c00); 857 animation: none; 858} 859 860/* Custom conflict tooltip - SMALLER FOR MAIN CALENDAR */ 861.conflict-tooltip { 862 position: fixed; 863 z-index: 10000; 864 background: var(--background-site, white); 865 border: 1px solid var(--border-main, #ff9800); 866 border-radius: 3px; 867 box-shadow: 0 2px 6px var(--shadow-color, rgba(0,0,0,0.2)); 868 padding: 0; 869 min-width: 120px; 870 max-width: 200px; 871 opacity: 0; 872 transition: opacity 0.2s; 873 pointer-events: none; 874} 875 876/* Custom tooltip that appears above and to the left - FIXED POSITION */ 877[data-tooltip] { 878 position: relative; 879 cursor: help; 880} 881 882[data-tooltip]:before { 883 content: attr(data-tooltip); 884 position: fixed; 885 padding: 3px 6px; 886 background: rgba(0, 0, 0, 0.95); 887 color: var(--background-site, #fff); 888 font-size: 9px; 889 line-height: 1.3; 890 white-space: pre-line; 891 border-radius: 3px; 892 opacity: 0; 893 pointer-events: none; 894 transition: opacity 0.2s; 895 min-width: 120px; 896 max-width: 200px; 897 z-index: 10000; 898 text-align: left; 899 box-shadow: 0 2px 8px rgba(0,0,0,0.3); 900} 901 902[data-tooltip]:hover:before { 903 opacity: 1; 904} 905 906/* Pink theme tooltips - with hearts! */ 907.sidebar-pink [data-tooltip]:before { 908 background: linear-gradient(135deg, #ff1493 0%, #ff69b4 100%); 909 color: #fff; 910 border: 2px solid #ff85c1; 911 box-shadow: 0 0 15px rgba(255, 20, 147, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4); 912 font-weight: 600; 913} 914 915.sidebar-pink [data-tooltip]:after { 916 content: '��'; 917 position: fixed; 918 font-size: 12px; 919 opacity: 0; 920 pointer-events: none; 921 transition: opacity 0.2s; 922 z-index: 10001; 923 filter: drop-shadow(0 0 3px rgba(255, 20, 147, 0.8)); 924} 925 926.sidebar-pink [data-tooltip]:hover:after { 927 opacity: 1; 928} 929 930/* Position data-tooltip with JavaScript for no cutoff */ 931.data-tooltip-positioned:before { 932 /* Position set by JavaScript */ 933} 934 935/* Allow sidebar to overflow for tooltips */ 936.sidebar-widget, 937.sidebar-matrix { 938 overflow: visible !important; 939} 940 941.conflict-tooltip-header { 942 background: var(--border-main, #ff9800); 943 color: var(--background-site, white); 944 padding: 4px 8px; 945 font-weight: 600; 946 font-size: 10px; 947 border-radius: 2px 2px 0 0; 948} 949 950.conflict-tooltip-body { 951 padding: 6px 8px; 952 font-size: 9px; 953 line-height: 1.4; 954} 955 956.conflict-item { 957 padding: 2px 0; 958 color: var(--text-primary, #333); 959 border-bottom: 1px solid var(--border-color, #f0f0f0); 960 font-size: 9px; 961} 962 963.conflict-item:last-child { 964 border-bottom: none; 965} 966 967.event-info { 968 flex: 1; 969 min-width: 0; 970 padding-right: 60px; 971 text-align: left; 972} 973 974.event-title-row { 975 display: flex; 976 align-items: center; 977 gap: 4px; 978} 979 980.event-title-compact { 981 font-size: 12px; 982 font-weight: 600; 983 color: var(--text-primary, #2c3e50); 984 overflow: hidden; 985 text-overflow: ellipsis; 986 white-space: nowrap; 987 text-align: left; 988} 989 990.event-meta-compact { 991 font-size: 10px; 992 color: var(--text-dim, #666); 993 margin-top: 1px; 994 text-align: left; 995} 996 997.event-date-time { 998 font-weight: 500; 999} 1000 1001.event-desc-compact { 1002 font-size: 10px; 1003 color: var(--text-dim, #666); 1004 line-height: 1.4; 1005 margin-top: 2px; 1006 text-align: left; 1007 word-wrap: break-word; 1008 overflow-wrap: break-word; 1009} 1010 1011.event-desc-compact img.event-image { 1012 max-width: 100%; 1013 height: auto; 1014 margin: 4px 0; 1015 border-radius: 3px; 1016 display: block; 1017} 1018 1019.event-desc-compact a { 1020 color: var(--text-bright, #008800); 1021 text-decoration: none; 1022 border-bottom: 1px dotted var(--text-bright, #008800); 1023} 1024 1025.event-desc-compact a:hover { 1026 color: var(--text-primary, #388e3c); 1027 border-bottom-style: solid; 1028} 1029 1030.event-desc-compact strong, 1031.event-desc-compact b { 1032 font-weight: 600; 1033 color: var(--text-primary, #333); 1034} 1035 1036.event-desc-compact em, 1037.event-desc-compact i { 1038 font-style: italic; 1039} 1040 1041.event-desc-compact code { 1042 background: var(--cell-bg, #f5f5f5); 1043 padding: 1px 3px; 1044 border-radius: 2px; 1045 font-family: monospace; 1046 font-size: 9px; 1047 color: var(--text-primary, inherit); 1048} 1049 1050.event-actions-compact { 1051 position: absolute; 1052 top: 5px; 1053 right: 24px; 1054 display: flex; 1055 gap: 2px; 1056 flex-shrink: 0; 1057} 1058 1059.event-action-btn { 1060 background: none; 1061 border: none; 1062 font-size: 14px; 1063 cursor: pointer; 1064 padding: 2px; 1065 opacity: 0.5; 1066 transition: opacity 0.15s, transform 0.15s; 1067} 1068 1069.event-action-btn:hover { 1070 opacity: 1; 1071 transform: scale(1.15); 1072} 1073 1074.task-checkbox { 1075 position: absolute; 1076 top: 5px; 1077 right: 6px; 1078 width: 16px; 1079 height: 16px; 1080 margin: 0; 1081 cursor: pointer; 1082 flex-shrink: 0; 1083 accent-color: var(--text-bright, #008800); 1084 /* Custom checkbox - bright border for all themes */ 1085 appearance: none; 1086 -webkit-appearance: none; 1087 border: 2px solid var(--text-bright, #008800); 1088 border-radius: 3px; 1089 background: var(--cell-bg, #fff); 1090 transition: all 0.15s; 1091 box-shadow: 0 0 3px var(--shadow-color, rgba(0,0,0,0.1)); 1092} 1093 1094.task-checkbox:hover { 1095 border-color: var(--text-bright, #008800); 1096 box-shadow: 0 0 8px var(--shadow-color, rgba(0,0,0,0.25)); 1097 transform: scale(1.1); 1098} 1099 1100.task-checkbox:checked { 1101 background: var(--text-bright, #008800); 1102 border-color: var(--text-bright, #008800); 1103 box-shadow: 0 0 6px var(--shadow-color, rgba(0,0,0,0.2)); 1104} 1105 1106.task-checkbox:checked::after { 1107 content: '✓'; 1108 display: block; 1109 text-align: center; 1110 color: var(--background-site, white); 1111 font-size: 11px; 1112 font-weight: 700; 1113 line-height: 12px; 1114} 1115 1116.no-events-msg { 1117 text-align: center; 1118 color: var(--text-dim, #999); 1119 font-size: 12px; 1120 font-style: italic; 1121 padding: 40px 20px; 1122} 1123 1124/* Sleek Event Dialog - FULLY RESPONSIVE */ 1125.event-dialog-compact { 1126 position: fixed; 1127 top: 0; 1128 left: 0; 1129 width: 100%; 1130 height: 100%; 1131 z-index: 9999; 1132 display: flex; 1133 align-items: center; 1134 justify-content: center; 1135 animation: fadeIn 0.2s ease; 1136 padding: 20px; 1137 box-sizing: border-box; 1138 overflow-y: auto; 1139} 1140 1141@keyframes fadeIn { 1142 from { opacity: 0; } 1143 to { opacity: 1; } 1144} 1145 1146.dialog-content-sleek { 1147 position: relative; 1148 background: var(--background-site, #ffffff); 1149 width: 100%; 1150 max-width: 450px; 1151 max-height: calc(100vh - 40px); 1152 border-radius: 8px; 1153 box-shadow: 0 8px 32px var(--shadow-color, rgba(0,0,0,0.2)); 1154 z-index: 10000; 1155 animation: slideUp 0.3s ease; 1156 overflow: hidden; 1157 display: flex; 1158 flex-direction: column; 1159 margin: auto; 1160 border: 1px solid var(--border-main, transparent); 1161} 1162 1163/* Mobile responsive dialog */ 1164@media (max-width: 768px) { 1165 .event-dialog-compact { 1166 padding: 10px; 1167 } 1168 1169 .dialog-content-sleek { 1170 max-width: 100%; 1171 width: calc(100% - 20px); 1172 max-height: calc(100vh - 20px); 1173 } 1174} 1175 1176@media (max-width: 480px) { 1177 .event-dialog-compact { 1178 padding: 0; 1179 align-items: flex-start; 1180 } 1181 1182 .dialog-content-sleek { 1183 width: 100%; 1184 max-width: 100%; 1185 max-height: 100vh; 1186 border-radius: 0; 1187 margin: 0; 1188 } 1189} 1190 1191@keyframes slideUp { 1192 from { 1193 transform: translateY(20px); 1194 opacity: 0; 1195 } 1196 to { 1197 transform: translateY(0); 1198 opacity: 1; 1199 } 1200} 1201 1202.dialog-header-sleek { 1203 display: flex; 1204 align-items: center; 1205 justify-content: space-between; 1206 padding: 10px 14px; 1207 background: var(--background-header, #2c3e50); 1208 color: var(--text-bright, white); 1209 cursor: move; 1210 flex-shrink: 0; 1211 border-bottom: 1px solid var(--border-main, transparent); 1212} 1213 1214.dialog-drag-handle { 1215 cursor: move; 1216} 1217 1218.dialog-header-sleek h3 { 1219 margin: 0; 1220 font-size: 15px; 1221 font-weight: 600; 1222} 1223 1224.dialog-close-btn { 1225 background: var(--cell-today-bg, rgba(255,255,255,0.2)); 1226 border: none; 1227 color: white; 1228 font-size: 22px; 1229 width: 28px; 1230 height: 28px; 1231 border-radius: 50%; 1232 cursor: pointer; 1233 display: flex; 1234 align-items: center; 1235 justify-content: center; 1236 transition: all 0.2s; 1237 line-height: 1; 1238 padding: 0; 1239 flex-shrink: 0; 1240} 1241 1242.dialog-close-btn:hover { 1243 background: var(--cell-today-bg, rgba(255,255,255,0.3)); 1244 transform: scale(1.1); 1245} 1246 1247.sleek-form { 1248 padding: 10px 12px; 1249 overflow-y: auto; 1250 overflow-x: hidden; 1251 flex: 1; 1252 max-height: calc(100vh - 160px); 1253 background: var(--background-site, #ffffff); 1254} 1255 1256/* Ensure form is scrollable on small screens */ 1257@media (max-height: 600px) { 1258 .sleek-form { 1259 max-height: calc(100vh - 120px); 1260 } 1261} 1262 1263@media (max-height: 500px) { 1264 .sleek-form { 1265 max-height: calc(100vh - 100px); 1266 } 1267} 1268 1269.form-field { 1270 margin-bottom: 6px; 1271} 1272 1273/* Compact form elements */ 1274.input-compact { 1275 height: 30px !important; 1276 padding: 4px 8px !important; 1277 font-size: 11px !important; 1278} 1279 1280.textarea-compact { 1281 min-height: 28px !important; 1282 padding: 4px 8px !important; 1283 font-size: 11px !important; 1284 line-height: 1.3 !important; 1285} 1286 1287.field-label-compact { 1288 font-size: 10px !important; 1289 margin-bottom: 2px !important; 1290 font-weight: 500; 1291 color: var(--text-dim, #555); 1292} 1293 1294.form-field-checkbox-compact { 1295 padding: 4px 8px !important; 1296 margin-bottom: 6px !important; 1297} 1298 1299.checkbox-label-compact { 1300 font-size: 10px !important; 1301 gap: 4px !important; 1302} 1303 1304.checkbox-label-compact input[type="checkbox"] { 1305 width: 13px !important; 1306 height: 13px !important; 1307 accent-color: var(--text-bright, #008800); 1308} 1309 1310.color-picker-compact { 1311 height: 30px !important; 1312} 1313 1314/* Responsive form fields */ 1315@media (max-width: 480px) { 1316 .form-field { 1317 margin-bottom: 8px; 1318 } 1319} 1320 1321.form-field-checkbox { 1322 background: var(--cell-bg, #f1f8f4); 1323 padding: 8px; 1324 border-radius: 4px; 1325 border: 1px solid var(--border-main, #008800); 1326} 1327 1328.checkbox-label { 1329 display: flex; 1330 align-items: center; 1331 gap: 6px; 1332 cursor: pointer; 1333 font-size: 11px; 1334 font-weight: 500; 1335 color: var(--text-primary, #388e3c); 1336} 1337 1338.checkbox-label input[type="checkbox"] { 1339 width: 15px; 1340 height: 15px; 1341 cursor: pointer; 1342 accent-color: var(--text-bright, #008800); 1343} 1344 1345.recurring-options { 1346 background: var(--cell-bg, #f1f8f4); 1347 padding: 12px; 1348 border-radius: 4px; 1349 border: 1px solid var(--border-main, #81c784); 1350 margin-top: 8px; 1351} 1352 1353.form-row-group { 1354 display: grid; 1355 grid-template-columns: 1fr 1fr; 1356 gap: 10px; 1357 margin-bottom: 10px; 1358} 1359 1360@media (max-width: 768px) { 1361 .form-row-group { 1362 grid-template-columns: 1fr; 1363 gap: 8px; 1364 } 1365} 1366 1367.field-label { 1368 display: block; 1369 font-size: 11px; 1370 font-weight: 600; 1371 color: var(--text-primary, #2c3e50); 1372 margin-bottom: 5px; 1373 text-transform: uppercase; 1374 letter-spacing: 0.3px; 1375} 1376 1377@media (max-width: 480px) { 1378 .field-label { 1379 font-size: 10px; 1380 } 1381} 1382 1383.input-sleek { 1384 width: 100%; 1385 color: var(--text-primary, #333); 1386 padding: 8px 10px; 1387 border: 2px solid var(--border-color, #e0e0e0); 1388 border-radius: 4px; 1389 font-size: 13px; 1390 font-family: inherit; 1391 transition: all 0.2s; 1392 background: var(--cell-bg, #fafafa); 1393 box-sizing: border-box; 1394} 1395 1396.input-sleek:focus { 1397 outline: none; 1398 border-color: var(--text-bright, #008800); 1399 background: var(--background-site, white); 1400 box-shadow: 0 0 0 3px var(--shadow-color, rgba(33, 150, 243, 0.1)); 1401} 1402 1403.input-sleek::placeholder, 1404.textarea-sleek::placeholder { 1405 color: var(--text-dim, #999); 1406} 1407 1408.input-date { 1409 font-weight: 500; 1410 color: var(--text-primary, #2c3e50); 1411 cursor: pointer; 1412} 1413 1414.input-date::-webkit-calendar-picker-indicator { 1415 cursor: pointer; 1416 font-size: 14px; 1417 padding: 2px; 1418} 1419 1420.textarea-sleek { 1421 resize: vertical; 1422 min-height: 60px; 1423 line-height: 1.4; 1424} 1425 1426.color-picker-container { 1427 display: flex; 1428 align-items: center; 1429 gap: 10px; 1430} 1431 1432.color-picker-wrapper { 1433 display: flex; 1434 align-items: center; 1435 gap: 8px; 1436} 1437 1438.color-picker-wrapper .color-select { 1439 flex: 1; 1440} 1441 1442.color-picker-input { 1443 width: 45px; 1444 height: 38px; 1445 border: 2px solid var(--border-color, #e0e0e0); 1446 border-radius: 6px; 1447 cursor: pointer; 1448 padding: 2px; 1449 display: none; 1450} 1451 1452.color-picker-input:hover { 1453 border-color: var(--text-bright, #4CAF50); 1454} 1455 1456.input-color-sleek { 1457 width: 50px; 1458 height: 38px; 1459 border: 2px solid var(--border-color, #e0e0e0); 1460 border-radius: 6px; 1461 cursor: pointer; 1462 transition: all 0.2s; 1463} 1464 1465.input-color-sleek:hover { 1466 border-color: var(--text-bright, #008800); 1467 transform: scale(1.05); 1468} 1469 1470.color-label { 1471 font-size: 11px; 1472 color: var(--text-dim, #666); 1473} 1474 1475.form-row-group { 1476 display: grid; 1477 grid-template-columns: 2fr 1fr; 1478 gap: 16px; 1479 margin-bottom: 20px; 1480} 1481 1482.field-label { 1483 display: block; 1484 font-size: 13px; 1485 font-weight: 600; 1486 color: var(--text-primary, #2c3e50); 1487 margin-bottom: 8px; 1488 text-transform: uppercase; 1489 letter-spacing: 0.5px; 1490} 1491 1492.input-sleek { 1493 width: 100%; 1494 color: var(--text-primary, #333); 1495 padding: 12px 16px; 1496 border: 2px solid var(--border-color, #e0e0e0); 1497 border-radius: 8px; 1498 font-size: 15px; 1499 font-family: inherit; 1500 transition: all 0.2s; 1501 background: var(--cell-bg, #fafafa); 1502 box-sizing: border-box; 1503} 1504 1505.input-sleek:focus { 1506 outline: none; 1507 border-color: var(--text-bright, #667eea); 1508 background: var(--background-site, white); 1509 box-shadow: 0 0 0 3px var(--shadow-color, rgba(102, 126, 234, 0.1)); 1510} 1511 1512.input-date { 1513 font-weight: 500; 1514 color: var(--text-primary, #2c3e50); 1515 cursor: pointer; 1516} 1517 1518.input-date::-webkit-calendar-picker-indicator { 1519 cursor: pointer; 1520 font-size: 18px; 1521 padding: 4px; 1522} 1523 1524.textarea-sleek { 1525 resize: vertical; 1526 min-height: 80px; 1527 line-height: 1.5; 1528} 1529 1530.color-picker-container { 1531 display: flex; 1532 align-items: center; 1533 gap: 12px; 1534} 1535 1536.input-color-sleek { 1537 width: 60px; 1538 height: 44px; 1539 border: 2px solid var(--border-color, #e0e0e0); 1540 border-radius: 8px; 1541 cursor: pointer; 1542 transition: all 0.2s; 1543} 1544 1545.input-color-sleek:hover { 1546 border-color: var(--text-bright, #667eea); 1547 transform: scale(1.05); 1548} 1549 1550.color-label { 1551 font-size: 13px; 1552 color: var(--text-dim, #666); 1553} 1554 1555.form-field-checkbox { 1556 background: var(--cell-bg, #f1f8f4); 1557 padding: 12px; 1558 border-radius: 6px; 1559 border: 1px solid var(--border-main, #008800); 1560} 1561 1562.checkbox-label { 1563 display: flex; 1564 align-items: center; 1565 gap: 8px; 1566 cursor: pointer; 1567 font-size: 13px; 1568 font-weight: 500; 1569 color: var(--text-primary, #388e3c); 1570} 1571 1572.checkbox-label input[type="checkbox"] { 1573 width: 18px; 1574 height: 18px; 1575 cursor: pointer; 1576 accent-color: var(--text-bright, #008800); 1577} 1578 1579.form-row-group { 1580 display: grid; 1581 grid-template-columns: 1fr 1fr; 1582 gap: 12px; 1583 margin-bottom: 16px; 1584} 1585 1586@media (max-width: 768px) { 1587 .form-row-group { 1588 grid-template-columns: 1fr; 1589 } 1590} 1591 1592.dialog-actions-sleek { 1593 display: flex; 1594 gap: 8px; 1595 padding: 12px 14px; 1596 background: var(--cell-bg, #f8f9fa); 1597 border-top: 1px solid var(--border-color, #e0e0e0); 1598 justify-content: flex-end; 1599 flex-shrink: 0; 1600} 1601 1602/* Ensure buttons are visible on small screens */ 1603@media (max-width: 480px) { 1604 .dialog-actions-sleek { 1605 padding: 10px; 1606 } 1607 1608 .btn-sleek { 1609 flex: 1; 1610 justify-content: center; 1611 } 1612} 1613 1614.btn-sleek { 1615 padding: 7px 14px; 1616 border: none; 1617 border-radius: 4px; 1618 font-size: 12px; 1619 font-weight: 600; 1620 cursor: pointer; 1621 transition: all 0.2s; 1622 display: inline-flex; 1623 align-items: center; 1624 gap: 4px; 1625} 1626 1627.btn-cancel-sleek { 1628 background: var(--border-color, #e0e0e0); 1629 color: var(--text-dim, #555); 1630} 1631 1632.btn-cancel-sleek:hover { 1633 filter: brightness(1.2); 1634 box-shadow: 0 0 4px var(--shadow-color, rgba(0,0,0,0.15)); 1635} 1636 1637.btn-save-sleek { 1638 background: var(--text-bright, #008800); 1639 color: var(--background-site, white); 1640 box-shadow: 0 2px 4px var(--shadow-color, rgba(0,0,0,0.2)); 1641} 1642 1643.btn-save-sleek:hover { 1644 filter: brightness(1.3); 1645 box-shadow: 0 4px 8px var(--shadow-color, rgba(0,0,0,0.3)); 1646} 1647 1648.btn-save-sleek:active { 1649 transform: translateY(1px); 1650 filter: brightness(0.9); 1651} 1652 1653/* Day popup */ 1654.day-popup { 1655 position: fixed; 1656 top: 0; 1657 left: 0; 1658 width: 100%; 1659 height: 100%; 1660 z-index: 10000; 1661 display: flex; 1662 align-items: center; 1663 justify-content: center; 1664 padding: 20px; 1665 box-sizing: border-box; 1666} 1667 1668.day-popup-overlay { 1669 position: absolute; 1670 top: 0; 1671 left: 0; 1672 width: 100%; 1673 height: 100%; 1674 background: rgba(0,0,0,0.5); 1675} 1676 1677.day-popup-content { 1678 position: relative; 1679 background: var(--background-site, white); 1680 width: 100%; 1681 max-width: 450px; 1682 max-height: calc(100vh - 40px); 1683 border-radius: 8px; 1684 box-shadow: 0 4px 20px var(--shadow-color, rgba(0,0,0,0.3)); 1685 z-index: 10001; 1686 display: flex; 1687 flex-direction: column; 1688 border: 1px solid var(--border-main, transparent); 1689} 1690 1691/* Responsive day popup */ 1692@media (max-width: 768px) { 1693 .day-popup { 1694 padding: 10px; 1695 } 1696 1697 .day-popup-content { 1698 max-width: 100%; 1699 max-height: calc(100vh - 20px); 1700 } 1701} 1702 1703@media (max-width: 480px) { 1704 .day-popup { 1705 padding: 0; 1706 } 1707 1708 .day-popup-content { 1709 width: 100%; 1710 max-width: 100%; 1711 max-height: 100vh; 1712 border-radius: 0; 1713 } 1714} 1715 1716.day-popup-header { 1717 display: flex; 1718 align-items: center; 1719 justify-content: space-between; 1720 padding: 10px 14px; 1721 border-bottom: 2px solid var(--border-main, #e0e0e0); 1722 background: var(--background-header, #fafafa); 1723 border-radius: 8px 8px 0 0; 1724} 1725 1726.day-popup-header h4 { 1727 margin: 0; 1728 font-size: 15px; 1729 font-weight: 600; 1730 color: var(--text-primary, #2c3e50); 1731} 1732 1733.popup-close { 1734 background: none; 1735 border: none; 1736 font-size: 24px; 1737 color: var(--text-dim, #999); 1738 cursor: pointer; 1739 width: 28px; 1740 height: 28px; 1741 display: flex; 1742 align-items: center; 1743 justify-content: center; 1744 border-radius: 4px; 1745 transition: all 0.15s; 1746 line-height: 1; 1747 padding: 0; 1748} 1749 1750.popup-close:hover { 1751 background: var(--cell-bg, #f0f0f0); 1752 color: var(--text-primary, #333); 1753} 1754 1755.day-popup-body { 1756 flex: 1; 1757 overflow-y: auto; 1758 padding: 10px 14px; 1759 max-height: 400px; 1760} 1761 1762.popup-events-list { 1763 display: flex; 1764 flex-direction: column; 1765 gap: 6px; 1766} 1767 1768.popup-continuation-notice { 1769 font-size: 10px; 1770 color: var(--text-dim, #666); 1771 background: var(--cell-bg, #f0f0f0); 1772 padding: 3px 8px; 1773 border-radius: 3px; 1774 margin-bottom: 4px; 1775 border-left: 3px solid var(--text-bright, #00cc07); 1776 font-weight: 500; 1777} 1778 1779.popup-event-item { 1780 display: flex; 1781 background: var(--cell-bg, #f8f9fa); 1782 border: 1px solid var(--border-color, #e0e0e0); 1783 border-radius: 4px; 1784 overflow: hidden; 1785 transition: box-shadow 0.15s; 1786} 1787 1788.popup-event-item:hover { 1789 box-shadow: 0 2px 6px var(--shadow-color, rgba(0,0,0,0.1)); 1790} 1791 1792.popup-event-content { 1793 flex: 1; 1794 padding: 6px 10px; 1795} 1796 1797.popup-event-main-row { 1798 display: flex; 1799 align-items: center; 1800 justify-content: space-between; 1801 gap: 8px; 1802} 1803 1804.popup-event-info-inline { 1805 display: flex; 1806 align-items: center; 1807 gap: 8px; 1808 flex: 1; 1809 min-width: 0; 1810} 1811 1812.popup-event-title { 1813 font-size: 13px; 1814 font-weight: 600; 1815 color: var(--text-primary, #2c3e50); 1816 white-space: nowrap; 1817 overflow: hidden; 1818 text-overflow: ellipsis; 1819 flex-shrink: 1; 1820} 1821 1822.popup-event-time { 1823 font-size: 11px; 1824 color: var(--text-bright, #008800); 1825 font-weight: 500; 1826 white-space: nowrap; 1827 flex-shrink: 0; 1828} 1829 1830.popup-event-multiday { 1831 font-size: 11px; 1832 color: var(--text-dim, #666); 1833 font-weight: 500; 1834 white-space: nowrap; 1835 flex-shrink: 0; 1836} 1837 1838.popup-event-namespace { 1839 font-size: 10px; 1840 color: var(--background-site, #fff); 1841 background: var(--text-bright, #008800); 1842 padding: 2px 6px; 1843 border-radius: 3px; 1844 font-weight: 500; 1845 white-space: nowrap; 1846 flex-shrink: 0; 1847} 1848 1849.popup-event-desc { 1850 font-size: 11px; 1851 color: var(--text-dim, #666); 1852 line-height: 1.4; 1853 margin-top: 4px; 1854 padding-left: 0; 1855} 1856 1857.popup-event-actions { 1858 display: flex; 1859 gap: 4px; 1860 flex-shrink: 0; 1861} 1862 1863.event-edit-btn, 1864.event-delete-btn { 1865 background: none; 1866 border: none; 1867 font-size: 16px; 1868 cursor: pointer; 1869 padding: 4px; 1870 border-radius: 3px; 1871 transition: background 0.15s; 1872 line-height: 1; 1873 width: 24px; 1874 height: 24px; 1875 display: flex; 1876 align-items: center; 1877 justify-content: center; 1878} 1879 1880.event-edit-btn:hover { 1881 background: var(--cell-today-bg, #e8f5e9); 1882} 1883 1884.event-delete-btn:hover { 1885 background: var(--cell-today-bg, #ffebee); 1886} 1887 1888.day-popup-footer { 1889 padding: 10px 14px; 1890 border-top: 1px solid var(--border-color, #e0e0e0); 1891 background: var(--cell-bg, #fafafa); 1892 border-radius: 0 0 8px 8px; 1893} 1894 1895.btn-add-event { 1896 width: 100%; 1897 background: var(--text-bright, #008800); 1898 color: var(--background-site, white); 1899 border: none; 1900 padding: 10px 16px; 1901 border-radius: 6px; 1902 font-size: 14px; 1903 font-weight: 500; 1904 cursor: pointer; 1905 transition: background 0.15s; 1906} 1907 1908.btn-add-event:hover { 1909 filter: brightness(1.3); 1910 box-shadow: 0 2px 6px var(--shadow-color, rgba(0,0,0,0.2)); 1911} 1912 1913.btn-add-event:active { 1914 filter: brightness(0.85); 1915 transform: translateY(1px); 1916} 1917 1918.dialog-overlay { 1919 position: absolute; 1920 top: 0; 1921 left: 0; 1922 width: 100%; 1923 height: 100%; 1924 background: rgba(0,0,0,0.4); 1925} 1926 1927.dialog-content-compact { 1928 position: relative; 1929 background: white; 1930 width: 400px; 1931 border-radius: 6px; 1932 box-shadow: 0 4px 12px rgba(0,0,0,0.2); 1933 padding: 20px; 1934 z-index: 10000; 1935} 1936 1937.dialog-content-compact h4 { 1938 margin: 0 0 16px 0; 1939 font-size: 16px; 1940 font-weight: 600; 1941 color: var(--text-primary, #2c3e50); 1942} 1943 1944.form-row { 1945 margin-bottom: 14px; 1946} 1947 1948.form-row-date { 1949 background: var(--cell-bg, #f1f8f4); 1950 padding: 10px; 1951 border-radius: 6px; 1952 border: 2px solid var(--border-main, #008800); 1953 margin-bottom: 18px; 1954} 1955 1956.form-row-date label { 1957 color: var(--text-bright, #388e3c); 1958 font-size: 13px; 1959} 1960 1961.form-row label { 1962 display: block; 1963 font-size: 12px; 1964 font-weight: 600; 1965 color: var(--text-dim, #555); 1966 margin-bottom: 4px; 1967} 1968 1969.form-row input[type="text"], 1970.form-row input[type="time"], 1971.form-row input[type="date"], 1972.form-row input[type="color"], 1973.form-row textarea { 1974 width: 100%; 1975 padding: 8px; 1976 border: 1px solid var(--border-color, #d0d0d0); 1977 border-radius: 4px; 1978 font-size: 13px; 1979 box-sizing: border-box; 1980 font-family: inherit; 1981} 1982 1983.form-row input[type="color"] { 1984 height: 36px; 1985 padding: 2px; 1986} 1987 1988.form-row textarea { 1989 resize: vertical; 1990} 1991 1992.dialog-actions { 1993 display: flex; 1994 gap: 8px; 1995 justify-content: flex-end; 1996 margin-top: 16px; 1997} 1998 1999.btn-save, 2000.btn-cancel { 2001 padding: 8px 16px; 2002 border: none; 2003 border-radius: 4px; 2004 font-size: 13px; 2005 font-weight: 500; 2006 cursor: pointer; 2007 transition: all 0.15s; 2008} 2009 2010.btn-save { 2011 background: var(--text-bright, #008800); 2012 color: var(--background-site, white); 2013} 2014 2015.btn-save:hover { 2016 filter: brightness(1.3); 2017 box-shadow: 0 2px 6px var(--shadow-color, rgba(0,0,0,0.2)); 2018} 2019 2020.btn-cancel { 2021 background: var(--cell-bg, #f5f5f5); 2022 color: var(--text-dim, #555); 2023 border: 1px solid var(--border-color, #d0d0d0); 2024} 2025 2026.btn-cancel:hover { 2027 filter: brightness(1.2); 2028 box-shadow: 0 0 4px var(--shadow-color, rgba(0,0,0,0.15)); 2029} 2030 2031/* Standalone event list */ 2032.eventlist-standalone { 2033 max-width: 700px; 2034 margin: 20px auto; 2035 background: white; 2036 border: 1px solid var(--border-color, #d0d0d0); 2037 border-radius: 6px; 2038 padding: 20px; 2039} 2040 2041.eventlist-standalone h3 { 2042 margin: 0 0 20px 0; 2043 font-size: 18px; 2044 font-weight: 600; 2045 color: var(--text-primary, #2c3e50); 2046 border-bottom: 2px solid var(--border-main, #008800); 2047 padding-bottom: 10px; 2048} 2049 2050/* Compact Event List Widget */ 2051.eventlist-compact-widget { 2052 background: var(--background-site, #ffffff); 2053 border: 1px solid var(--border-color, #d0d0d0); 2054 border-radius: 6px; 2055 box-shadow: 0 2px 6px rgba(0,0,0,0.08); 2056 overflow: visible; 2057 display: flex; 2058 flex-direction: column; 2059 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 2060} 2061 2062/* Simple 2-Line Event List (New Design) */ 2063.eventlist-simple { 2064 width: 100%; 2065 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 2066 font-size: 11px; 2067 line-height: 1.4; 2068 overflow: visible; 2069} 2070 2071/* Compact pastel header for {{eventlist today}} - Single line */ 2072.eventlist-today-header { 2073 display: flex; 2074 flex-direction: column; 2075 align-items: center; 2076 padding: 6px 10px 2px 10px; 2077 background: var(--cell-bg, #1a1a1a); 2078 color: var(--text-bright, #00cc07); 2079 border: 2px solid var(--text-bright, #00cc07); 2080 border-radius: 4px; 2081 margin-bottom: 8px; 2082 box-shadow: 0 0 8px var(--shadow-color, rgba(0, 204, 7, 0.2)); 2083 gap: 3px; 2084 overflow: visible; 2085} 2086 2087/* Purple theme overrides */ 2088.sidebar-purple .eventlist-today-header { 2089 border-color: var(--text-bright, #9b59b6); 2090 box-shadow: 0 0 8px var(--shadow-color, rgba(155, 89, 182, 0.2)); 2091} 2092 2093/* Professional theme overrides */ 2094.sidebar-professional .eventlist-today-header { 2095 border-color: var(--text-bright, #4a90e2); 2096 box-shadow: 0 2px 4px var(--shadow-color, rgba(0, 0, 0, 0.1)); 2097} 2098 2099/* Pink theme overrides */ 2100.sidebar-pink .eventlist-today-header { 2101 border-color: var(--text-bright, #ff1493); 2102 box-shadow: 0 0 6px var(--shadow-color, rgba(255, 20, 147, 0.25)); 2103} 2104 2105.eventlist-bottom-info { 2106 display: flex; 2107 justify-content: space-between; 2108 align-items: center; 2109 width: 100%; 2110 gap: 10px; 2111 overflow: visible; 2112} 2113 2114.eventlist-weather { 2115 font-size: 13px; 2116 font-weight: 700; 2117 font-family: 'Courier New', monospace; 2118 letter-spacing: 0.3px; 2119 text-shadow: 0 0 1px var(--text-primary, rgba(0, 204, 7, 0.4)); 2120 color: var(--text-primary, #00cc07); 2121 white-space: nowrap; 2122} 2123 2124.eventlist-today-date { 2125 font-size: 10px; 2126 font-weight: 700; 2127 color: var(--text-primary, #00cc07); 2128 letter-spacing: 0.5px; 2129 white-space: nowrap; 2130 text-transform: uppercase; 2131 text-align: center; 2132 flex: 1; 2133} 2134 2135.eventlist-today-clock { 2136 font-size: 16px; 2137 font-weight: 700; 2138 font-family: 'Courier New', monospace; 2139 letter-spacing: 1px; 2140 text-shadow: 0 0 2px var(--text-primary, rgba(0, 204, 7, 0.5)); 2141 color: var(--text-primary, #00cc07); 2142} 2143 2144.eventlist-stats-container { 2145 width: 100%; 2146 display: flex; 2147 flex-direction: column; 2148 gap: 2px; 2149 margin: 0; 2150 overflow: visible; 2151} 2152 2153.eventlist-cpu-bar { 2154 width: 100%; 2155 height: 3px; 2156 background: var(--cell-today-bg, rgba(0, 204, 7, 0.1)) !important; 2157 border-radius: 1px; 2158 overflow: visible; 2159 position: relative; 2160 cursor: help; 2161} 2162 2163.system-tooltip { 2164 position: fixed; 2165 background: var(--cell-bg, rgba(0, 0, 0, 0.95)) !important; 2166 padding: 6px 8px; 2167 border-radius: 4px; 2168 font-size: 9px; 2169 line-height: 1.3; 2170 white-space: normal; 2171 min-width: 150px; 2172 max-width: 250px; 2173 z-index: 999999; 2174 border: 1px solid; 2175 box-shadow: 0 3px 8px rgba(0,0,0,0.5); 2176 pointer-events: none; 2177 /* Position will be set by JavaScript */ 2178} 2179 2180.system-tooltip div { 2181 font-size: 9px !important; 2182 line-height: 1.3 !important; 2183 margin: 0; 2184} 2185 2186.system-tooltip .tooltip-title { 2187 font-weight: bold; 2188 margin-bottom: 2px; 2189} 2190 2191.eventlist-cpu-fill { 2192 height: 100%; 2193 background: var(--text-bright, #00cc07) !important; 2194 transition: width 0.3s ease; 2195 box-shadow: 0 0 4px var(--shadow-color, rgba(0, 204, 7, 0.6)) !important; 2196} 2197 2198.eventlist-cpu-fill-purple { 2199 background: var(--border-main, #9b59b6) !important; 2200 box-shadow: 0 0 4px var(--shadow-color, rgba(155, 89, 182, 0.6)) !important; 2201} 2202 2203.eventlist-cpu-fill-orange { 2204 background: var(--text-primary, #ff8c00) !important; 2205 box-shadow: 0 0 4px var(--shadow-color, rgba(255, 140, 0, 0.6)) !important; 2206} 2207 2208/* Pink theme system bars - different shades of pink */ 2209.sidebar-pink .eventlist-cpu-fill { 2210 background: var(--text-bright, #ff1493) !important; 2211 box-shadow: 0 0 5px var(--shadow-color, rgba(255, 20, 147, 0.7)) !important; 2212} 2213 2214.sidebar-pink .eventlist-cpu-fill-purple { 2215 background: var(--border-main, #ff69b4) !important; 2216 box-shadow: 0 0 5px var(--shadow-color, rgba(255, 105, 180, 0.7)) !important; 2217} 2218 2219.sidebar-pink .eventlist-cpu-fill-orange { 2220 background: var(--text-primary, #ff85c1) !important; 2221 box-shadow: 0 0 5px var(--shadow-color, rgba(255, 133, 193, 0.7)) !important; 2222} 2223 2224.sidebar-pink .eventlist-cpu-realtime { 2225 background: var(--cell-today-bg, rgba(255, 20, 147, 0.1)) !important; 2226} 2227 2228.sidebar-pink .eventlist-mem-realtime { 2229 background: var(--cell-today-bg, rgba(255, 133, 193, 0.1)) !important; 2230} 2231 2232.eventlist-cpu-realtime { 2233 background: var(--cell-today-bg, rgba(155, 89, 182, 0.1)) !important; 2234} 2235 2236.eventlist-mem-realtime { 2237 background: var(--cell-today-bg, rgba(255, 140, 0, 0.1)) !important; 2238} 2239 2240.eventlist-simple-item { 2241 border-bottom: 1px solid var(--border-color, #e0e0e0); 2242 padding: 0; 2243} 2244 2245.eventlist-simple-item:last-child { 2246 border-bottom: none; 2247} 2248 2249.eventlist-simple-today { 2250 background: var(--cell-today-bg, #f3eeff) !important; 2251 border-left: 3px solid var(--border-main, #9b59b6) !important; 2252} 2253 2254.eventlist-simple-today .eventlist-simple-header { 2255 background: var(--cell-today-bg, #e8d9ff) !important; 2256} 2257 2258.eventlist-simple-today .eventlist-simple-body { 2259 background: var(--cell-bg, #f9f5ff) !important; 2260} 2261 2262.eventlist-simple-today-badge { 2263 background: var(--border-main, #9b59b6); 2264 color: var(--background-site, white); 2265 padding: 1px 4px; 2266 border-radius: 3px; 2267 font-size: 9px; 2268 font-weight: 600; 2269 letter-spacing: 0.5px; 2270 display: inline-block; 2271 vertical-align: middle; 2272 float: right; /* Right-align */ 2273 margin-left: auto; 2274} 2275 2276.eventlist-simple-pastdue { 2277 background: var(--pastdue-bg, #ffe6e6) !important; 2278 border-left: 3px solid var(--pastdue-color, #e74c3c) !important; 2279} 2280 2281.eventlist-simple-pastdue .eventlist-simple-header { 2282 background: var(--pastdue-bg-strong, #ffd9d9) !important; 2283} 2284 2285.eventlist-simple-pastdue .eventlist-simple-body { 2286 background: var(--pastdue-bg-light, #fff2f2) !important; 2287} 2288 2289.eventlist-simple-pastdue-badge { 2290 background: var(--pastdue-color, #e74c3c); 2291 color: white; 2292 padding: 1px 4px; 2293 border-radius: 3px; 2294 font-size: 9px; 2295 font-weight: 600; 2296 letter-spacing: 0.5px; 2297 display: inline-block; 2298 vertical-align: middle; 2299 float: right; /* Right-align */ 2300 margin-left: auto; 2301} 2302 2303.eventlist-simple-tomorrow { 2304 background: var(--tomorrow-bg, #fff9e6) !important; 2305} 2306 2307.eventlist-simple-tomorrow .eventlist-simple-header { 2308 background: var(--tomorrow-bg-strong, #fff4cc) !important; 2309} 2310 2311.eventlist-simple-tomorrow .eventlist-simple-body { 2312 background: var(--tomorrow-bg-light, #fffbf0) !important; 2313} 2314 2315.eventlist-simple-header { 2316 font-weight: 500; 2317 color: var(--text-primary, #2c3e50); 2318 padding: 4px 6px; 2319 line-height: 1.5; 2320 background: var(--cell-bg, #f5fcf5); 2321 font-size: 11px; 2322} 2323 2324.eventlist-simple-title { 2325 font-weight: 700; 2326 color: var(--text-bright, #ff6600); 2327 font-size: 12px; 2328} 2329 2330.eventlist-simple-time { 2331 color: var(--text-dim, #666); 2332 font-size: 10px; 2333} 2334 2335.eventlist-simple-date { 2336 color: var(--text-dim, #888); 2337 font-size: 10px; 2338} 2339 2340.eventlist-simple-namespace { 2341 background: var(--cell-today-bg, #e8f5e9); 2342 color: var(--text-bright, #388e3c); 2343 padding: 1px 4px; 2344 border-radius: 3px; 2345 font-size: 9px; 2346 font-weight: 500; 2347 margin-left: 4px; 2348} 2349 2350.eventlist-simple-body { 2351 color: var(--text-dim, #555); 2352 font-size: 11px; 2353 line-height: 1.5; 2354 padding: 4px 6px; 2355 background: var(--background-site, #fff); 2356} 2357 2358.eventlist-simple-body a { 2359 color: var(--text-bright, #008800); 2360 text-decoration: none; 2361} 2362 2363.eventlist-simple-body a:hover { 2364 text-decoration: underline; 2365} 2366 2367.eventlist-simple-body strong { 2368 font-weight: 600; 2369 color: var(--text-primary, #2c3e50); 2370} 2371 2372.eventlist-simple-body code { 2373 background: var(--cell-bg, #f5f5f5); 2374 padding: 1px 3px; 2375 border-radius: 3px; 2376 font-family: 'Courier New', monospace; 2377 font-size: 10px; 2378 color: var(--text-primary, inherit); 2379} 2380 2381.eventlist-simple-no-desc { 2382 display: none; 2383} 2384 2385.eventlist-simple-empty { 2386 padding: 10px 0; 2387 color: var(--text-dim, #999); 2388} 2389 2390.eventlist-simple-empty .eventlist-simple-header { 2391 margin-bottom: 4px; 2392 background: var(--cell-bg, #f5fcf5); 2393} 2394 2395.eventlist-simple-empty .eventlist-simple-body { 2396 color: var(--text-dim, #999); 2397 font-style: italic; 2398 padding: 4px 6px; 2399 font-size: 11px; 2400} 2401 2402.eventlist-widget-header { 2403 background: var(--text-bright, #008800); 2404 color: white; 2405 padding: 8px 12px; 2406 flex-shrink: 0; 2407} 2408 2409.eventlist-widget-header h4 { 2410 margin: 0; 2411 font-size: 13px; 2412 font-weight: 600; 2413} 2414 2415.eventlist-widget-content { 2416 overflow-y: auto; 2417 padding: 8px; 2418 flex: 1; 2419} 2420 2421.eventlist-widget-date { 2422 font-size: 11px; 2423 font-weight: 600; 2424 color: var(--text-dim, #666); 2425 margin: 8px 0 4px 0; 2426 padding-bottom: 2px; 2427 border-bottom: 1px solid var(--border-color, #e0e0e0); 2428} 2429 2430.eventlist-widget-item { 2431 background: var(--cell-bg, #fafafa); 2432 border: 1px solid var(--border-color, #e0e0e0); 2433 border-left: 3px solid var(--text-bright, #3498db); 2434 border-radius: 3px; 2435 padding: 6px 8px; 2436 margin-bottom: 6px; 2437 transition: all 0.15s; 2438} 2439 2440.eventlist-widget-item:hover { 2441 background: var(--cell-bg, #f0f0f0); 2442 box-shadow: 0 1px 3px rgba(0,0,0,0.1); 2443} 2444 2445.eventlist-widget-title { 2446 font-size: 12px; 2447 font-weight: 600; 2448 color: var(--text-primary, #2c3e50); 2449 margin-bottom: 2px; 2450} 2451 2452.eventlist-widget-time { 2453 font-size: 11px; 2454 color: var(--text-dim, #666); 2455 margin-bottom: 4px; 2456} 2457 2458.eventlist-widget-desc { 2459 font-size: 11px; 2460 color: var(--text-dim, #555); 2461 margin-top: 4px; 2462 line-height: 1.4; 2463} 2464 2465.eventlist-widget-desc img { 2466 max-width: 100%; 2467 height: auto; 2468 border-radius: 3px; 2469 margin: 4px 0; 2470} 2471 2472.eventlist-widget-desc a { 2473 color: var(--text-bright, #008800); 2474 text-decoration: none; 2475 border-bottom: 1px dotted var(--text-bright, #008800); 2476} 2477 2478.eventlist-widget-desc a:hover { 2479 border-bottom-style: solid; 2480} 2481 2482.eventlist-widget-empty { 2483 text-align: center; 2484 color: var(--text-dim, #999); 2485 font-size: 12px; 2486 padding: 20px; 2487 margin: 0; 2488} 2489 2490/* Global themed link class (used in renderDescription) */ 2491.cal-link { 2492 color: var(--text-bright, #008800) !important; 2493 text-decoration: none; 2494 border-bottom: 1px dotted var(--text-bright, #008800); 2495 transition: all 0.15s; 2496} 2497 2498.cal-link:hover { 2499 border-bottom-style: solid; 2500 opacity: 0.85; 2501} 2502 2503/* Sidebar widget links - inherit theme colors */ 2504.sidebar-widget a.cal-link { 2505 color: var(--text-bright, #00cc07) !important; 2506 border-bottom-color: var(--text-bright, #00cc07); 2507} 2508 2509/* Standalone event panel (right panel only) */ 2510.event-panel-standalone { 2511 width: 320px; 2512 background: var(--background-site, #ffffff); 2513 border: 1px solid var(--border-color, #d0d0d0); 2514 border-radius: 6px; 2515 box-shadow: 0 2px 6px rgba(0,0,0,0.08); 2516 display: flex; 2517 flex-direction: column; 2518 max-height: 600px; 2519 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 2520 font-size: 13px; 2521} 2522 2523/* Dark theme borders for event panel - match sidebar widget style */ 2524.event-panel-standalone[data-theme="matrix"] { 2525 border: 2px solid var(--border-main, #00cc07); 2526 box-shadow: 0 0 10px var(--shadow-color, rgba(0, 204, 7, 0.3)); 2527} 2528 2529.event-panel-standalone[data-theme="purple"] { 2530 border: 2px solid var(--border-main, #9b59b6); 2531 box-shadow: 0 0 10px var(--shadow-color, rgba(155, 89, 182, 0.3)); 2532} 2533 2534.event-panel-standalone[data-theme="pink"] { 2535 border: 2px solid var(--border-main, #ff1493); 2536 box-shadow: 0 0 10px var(--shadow-color, rgba(255, 20, 147, 0.4)); 2537} 2538 2539.event-panel-standalone .event-list-compact { 2540 overflow-y: auto; 2541 flex: 1; 2542 padding: 10px; 2543} 2544 2545/* Event panel - Compact two-row header for ~500px width (10% smaller) */ 2546.panel-header-compact { 2547 background: var(--cell-bg, #f5f5f5); 2548 border-bottom: 2px solid var(--border-color, #ddd); 2549} 2550 2551.panel-header-row-1 { 2552 display: flex; 2553 align-items: center; 2554 gap: 7px; 2555 padding: 7px 11px; 2556 background: var(--cell-bg, #fafafa); 2557 border-bottom: 1px solid var(--border-color, #e8e8e8); 2558} 2559 2560.panel-header-row-2 { 2561 display: flex; 2562 align-items: center; 2563 gap: 7px; 2564 padding: 7px 11px; 2565 background: var(--background-site, #ffffff); 2566} 2567 2568.panel-nav-btn { 2569 background: var(--cell-bg, #ffffff); 2570 border: 1px solid var(--border-color, #ccc); 2571 color: var(--text-primary, #333); 2572 width: 29px; 2573 height: 29px; 2574 border-radius: 4px; 2575 cursor: pointer; 2576 font-size: 16px; 2577 font-weight: bold; 2578 transition: all 0.2s; 2579 display: flex; 2580 align-items: center; 2581 justify-content: center; 2582 padding: 0; 2583 flex-shrink: 0; 2584} 2585 2586.panel-nav-btn:hover { 2587 background: var(--text-bright, #00cc07); 2588 color: var(--background-site, white); 2589 border-color: var(--text-bright, #00cc07); 2590 filter: brightness(1.2); 2591 box-shadow: 0 0 6px var(--shadow-color, rgba(0,0,0,0.3)); 2592} 2593 2594.panel-month-title { 2595 margin: 0; 2596 font-size: 13px; 2597 font-weight: 600; 2598 color: var(--text-primary, #2c3e50); 2599 cursor: pointer; 2600 padding: 5px 9px; 2601 border-radius: 4px; 2602 transition: background 0.2s; 2603 white-space: nowrap; 2604 user-select: none; 2605 flex: 1; 2606 text-align: center; 2607 background: var(--cell-bg, #ffffff); 2608 border: 1px solid var(--border-color, #e0e0e0); 2609} 2610 2611.panel-month-title:hover { 2612 background: var(--cell-today-bg, #e8f5e9); 2613 border-color: var(--text-bright, #00cc07); 2614} 2615 2616.panel-ns-badge { 2617 background: var(--cell-today-bg, #e3f2fd); 2618 color: var(--text-bright, #1976d2); 2619 padding: 3px 7px; 2620 border-radius: 11px; 2621 font-size: 9px; 2622 font-weight: 600; 2623 text-transform: uppercase; 2624 letter-spacing: 0.3px; 2625 white-space: nowrap; 2626 border: 1px solid var(--border-color, #bbdefb); 2627 flex-shrink: 0; 2628} 2629 2630.panel-ns-badge.filter-on { 2631 background: var(--text-bright, #ff9800); 2632 color: var(--background-site, white); 2633 border-color: var(--border-main, #f57c00); 2634 cursor: pointer; 2635 transition: all 0.2s; 2636} 2637 2638.panel-ns-badge.filter-on:hover { 2639 filter: brightness(1.2); 2640} 2641 2642.panel-today-btn { 2643 background: var(--cell-bg, #ffffff); 2644 border: 1px solid var(--border-color, #ccc); 2645 color: var(--text-primary, #333); 2646 padding: 5px 11px; 2647 border-radius: 4px; 2648 cursor: pointer; 2649 font-size: 10px; 2650 font-weight: 600; 2651 transition: all 0.2s; 2652 white-space: nowrap; 2653 flex-shrink: 0; 2654} 2655 2656.panel-today-btn:hover { 2657 background: var(--text-bright, #00cc07); 2658 color: var(--background-site, white); 2659 border-color: var(--text-bright, #00cc07); 2660 filter: brightness(1.2); 2661 box-shadow: 0 0 6px var(--shadow-color, rgba(0,0,0,0.3)); 2662} 2663 2664.panel-search-box { 2665 position: relative; 2666 flex: 1; 2667} 2668 2669.panel-search-input { 2670 width: 100%; 2671 padding: 5px 25px 5px 9px; 2672 border: 1px solid var(--border-color, #d0d0d0); 2673 border-radius: 4px; 2674 font-size: 11px; 2675 outline: none; 2676 transition: border-color 0.2s, box-shadow 0.2s; 2677 background: var(--cell-bg, #fafafa); 2678 color: var(--text-primary, #333); 2679} 2680 2681.panel-search-input:focus { 2682 border-color: var(--text-bright, #00cc07); 2683 box-shadow: 0 0 0 2px var(--shadow-color, rgba(0, 204, 7, 0.1)); 2684 background: var(--background-site, white); 2685} 2686 2687.panel-search-input::placeholder { 2688 color: var(--text-dim, #999); 2689} 2690 2691.panel-search-clear { 2692 position: absolute; 2693 right: 5px; 2694 top: 50%; 2695 transform: translateY(-50%); 2696 background: none; 2697 border: none; 2698 color: var(--text-dim, #999); 2699 cursor: pointer; 2700 padding: 3px; 2701 font-size: 13px; 2702 line-height: 1; 2703 transition: color 0.2s; 2704} 2705 2706.panel-search-clear:hover { 2707 color: var(--text-primary, #333); 2708} 2709 2710.panel-add-btn { 2711 background: var(--text-bright, #00cc07); 2712 border: 1px solid var(--border-main, #00a806); 2713 color: var(--background-site, white); 2714 padding: 5px 13px; 2715 border-radius: 4px; 2716 cursor: pointer; 2717 font-size: 11px; 2718 font-weight: 600; 2719 transition: all 0.2s; 2720 white-space: nowrap; 2721 flex-shrink: 0; 2722} 2723 2724.panel-add-btn:hover { 2725 filter: brightness(1.3); 2726 transform: translateY(-1px); 2727 box-shadow: 0 2px 6px var(--shadow-color, rgba(0,0,0,0.2)); 2728} 2729 2730.panel-standalone-header { 2731 display: flex; 2732 align-items: center; 2733 gap: 8px; 2734 padding: 12px 12px; 2735 background: var(--cell-bg, #fafafa); 2736 border-bottom: 1px solid var(--border-color, #e0e0e0); 2737 flex-shrink: 0; 2738} 2739 2740.panel-header-content { 2741 flex: 1; 2742 display: flex; 2743 flex-direction: column; 2744 align-items: center; 2745 gap: 4px; 2746} 2747 2748.panel-standalone-header h3 { 2749 margin: 0; 2750 font-size: 12px; 2751 font-weight: 600; 2752 color: var(--text-primary, #2c3e50); 2753 white-space: nowrap; 2754} 2755 2756.panel-standalone-header .calendar-month-picker { 2757 cursor: pointer; 2758 user-select: none; 2759 transition: all 0.15s; 2760 padding: 4px 8px; 2761 border-radius: 4px; 2762 white-space: nowrap; 2763} 2764 2765.panel-standalone-header .calendar-month-picker:hover { 2766 background: var(--cell-today-bg, #e8e8e8); 2767 color: var(--text-bright, #008800); 2768} 2769 2770.panel-standalone-header .namespace-badge { 2771 font-size: 11px; 2772 font-weight: 500; 2773 color: var(--text-bright, #388e3c); 2774 background: var(--cell-today-bg, #e8f5e9); 2775 padding: 2px 8px; 2776 border-radius: 3px; 2777 text-decoration: none; 2778 transition: all 0.15s; 2779 display: inline-block; 2780} 2781 2782.panel-standalone-header .namespace-badge:hover { 2783 background: var(--cell-bg, #c8e6c9); 2784 color: var(--text-primary, #2e7d32); 2785} 2786 2787.panel-standalone-actions { 2788 padding: 10px 16px; 2789 background: var(--background-site, #ffffff); 2790 border-bottom: 1px solid var(--border-color, #e0e0e0); 2791 flex-shrink: 0; 2792 display: flex; 2793 align-items: center; 2794 gap: 8px; 2795} 2796 2797.panel-standalone-actions .add-event-compact { 2798 flex-shrink: 0; 2799} 2800 2801.eventlist-day-group { 2802 margin-bottom: 24px; 2803} 2804 2805.eventlist-date { 2806 margin: 0 0 12px 0; 2807 font-size: 14px; 2808 font-weight: 600; 2809 color: var(--text-primary, #2c3e50); 2810 background: var(--cell-bg, #f8f8f8); 2811 padding: 8px 12px; 2812 border-left: 4px solid var(--border-main, #008800); 2813} 2814 2815.eventlist-item { 2816 display: flex; 2817 margin-bottom: 10px; 2818 background: white; 2819 border: 1px solid var(--border-color, #e0e0e0); 2820 border-radius: 4px; 2821 overflow: hidden; 2822} 2823 2824.eventlist-content { 2825 flex: 1; 2826 padding: 12px; 2827 display: flex; 2828 align-items: center; 2829 gap: 12px; 2830} 2831 2832.eventlist-time { 2833 font-size: 12px; 2834 font-weight: 600; 2835 color: var(--text-bright, #008800); 2836 min-width: 50px; 2837} 2838 2839.eventlist-title { 2840 font-size: 14px; 2841 font-weight: 500; 2842 color: var(--text-primary, #2c3e50); 2843} 2844 2845.eventlist-desc { 2846 font-size: 12px; 2847 color: var(--text-dim, #666); 2848 margin-top: 6px; 2849 line-height: 1.4; 2850} 2851 2852/* =================================== 2853 MOBILE RESPONSIVE - EVENTLIST & EVENTPANEL 2854 =================================== */ 2855 2856/* Tablet and below (768px) */ 2857@media (max-width: 768px) { 2858 /* Event Panel Standalone */ 2859 .event-panel-standalone { 2860 width: 100%; 2861 max-width: 100%; 2862 border-radius: 0; 2863 max-height: none; 2864 min-height: 400px; 2865 } 2866 2867 /* Compact Event List Widget */ 2868 .eventlist-compact-widget { 2869 width: 100% !important; 2870 max-width: 100%; 2871 border-radius: 0; 2872 } 2873 2874 .eventlist-widget-header h4 { 2875 font-size: 14px; 2876 } 2877 2878 .eventlist-widget-title { 2879 font-size: 13px; 2880 } 2881 2882 .eventlist-widget-time { 2883 font-size: 12px; 2884 } 2885 2886 /* Standalone event list (old style) */ 2887 .eventlist-standalone { 2888 max-width: 100%; 2889 margin: 10px; 2890 padding: 15px; 2891 border-radius: 0; 2892 } 2893 2894 .eventlist-standalone h3 { 2895 font-size: 16px; 2896 } 2897} 2898 2899/* Mobile (480px and below) */ 2900@media (max-width: 480px) { 2901 /* Event Panel Standalone */ 2902 .event-panel-standalone { 2903 font-size: 12px; 2904 min-height: 300px; 2905 } 2906 2907 .panel-standalone-header { 2908 padding: 10px 12px; 2909 } 2910 2911 .panel-standalone-header h3 { 2912 font-size: 12px; 2913 } 2914 2915 .panel-standalone-actions { 2916 padding: 8px 12px; 2917 } 2918 2919 .event-panel-standalone .event-list-compact { 2920 padding: 8px; 2921 } 2922 2923 /* Compact Event List Widget */ 2924 .eventlist-compact-widget { 2925 min-width: 280px; 2926 } 2927 2928 .eventlist-widget-header { 2929 padding: 6px 10px; 2930 } 2931 2932 .eventlist-widget-header h4 { 2933 font-size: 13px; 2934 } 2935 2936 .eventlist-widget-content { 2937 padding: 6px; 2938 } 2939 2940 .eventlist-widget-item { 2941 padding: 5px 6px; 2942 margin-bottom: 5px; 2943 } 2944 2945 .eventlist-widget-title { 2946 font-size: 12px; 2947 } 2948 2949 .eventlist-widget-time { 2950 font-size: 11px; 2951 } 2952 2953 .eventlist-widget-desc { 2954 font-size: 11px; 2955 } 2956 2957 /* Standalone event list */ 2958 .eventlist-standalone { 2959 margin: 5px; 2960 padding: 10px; 2961 } 2962 2963 .eventlist-standalone h3 { 2964 font-size: 14px; 2965 margin-bottom: 15px; 2966 } 2967 2968 .eventlist-day-group { 2969 margin-bottom: 18px; 2970 } 2971 2972 .eventlist-date { 2973 font-size: 13px; 2974 padding: 6px 10px; 2975 } 2976 2977 .eventlist-title { 2978 font-size: 13px; 2979 } 2980 2981 .eventlist-time { 2982 font-size: 11px; 2983 } 2984 2985 .eventlist-desc { 2986 font-size: 11px; 2987 } 2988} 2989 2990/* Very small mobile (320px) */ 2991@media (max-width: 320px) { 2992 .eventlist-compact-widget { 2993 min-width: 100%; 2994 } 2995 2996 .event-panel-standalone { 2997 min-height: 250px; 2998 } 2999 3000 .eventlist-widget-header h4 { 3001 font-size: 12px; 3002 } 3003 3004 .eventlist-widget-title { 3005 font-size: 11px; 3006 } 3007 3008 .panel-standalone-header h3 { 3009 font-size: 12px; 3010 } 3011} 3012 3013/* Past Events Collapsible Section */ 3014.past-events-section { 3015 margin-bottom: 10px; 3016 border-bottom: 1px solid var(--border-color, #e0e0e0); 3017} 3018 3019.past-events-toggle { 3020 padding: 6px 10px; 3021 background: var(--cell-bg); 3022 color: var(--text-dim); 3023 cursor: pointer; 3024 user-select: none; 3025 font-size: 11px; 3026 font-weight: 600; 3027 display: flex; 3028 align-items: center; 3029 border-radius: 3px; 3030 transition: background 0.2s; 3031} 3032 3033.past-events-toggle:hover { 3034 background: var(--background-alt); 3035} 3036 3037.past-events-arrow { 3038 font-size: 9px; 3039 margin-right: 5px; 3040 transition: transform 0.2s; 3041 display: inline-block; 3042 width: 10px; 3043 color: var(--text-dim); 3044} 3045 3046.past-events-label { 3047 color: var(--text-dim); 3048} 3049 3050.past-events-content { 3051 margin-top: 5px; 3052} 3053 3054/* Namespace Search Dropdown */ 3055.namespace-search-wrapper { 3056 position: relative; 3057} 3058 3059.namespace-search-input { 3060 width: 100%; 3061} 3062 3063.namespace-dropdown { 3064 position: absolute; 3065 top: 100%; 3066 left: 0; 3067 right: 0; 3068 max-height: 200px; 3069 overflow-y: auto; 3070 background: white; 3071 border: 1px solid var(--border-color, #ddd); 3072 border-top: none; 3073 border-radius: 0 0 4px 4px; 3074 box-shadow: 0 4px 8px rgba(0,0,0,0.1); 3075 z-index: 1000; 3076 margin-top: -1px; 3077} 3078 3079.namespace-option { 3080 padding: 8px 12px; 3081 cursor: pointer; 3082 font-size: 12px; 3083 border-bottom: 1px solid var(--border-color, #f0f0f0); 3084 transition: background-color 0.15s; 3085} 3086 3087.namespace-option:hover { 3088 background-color: var(--cell-bg, #f5f5f5); 3089} 3090 3091.namespace-option.selected { 3092 background-color: var(--cell-today-bg, #e3f2fd); 3093 color: var(--text-bright, #1976d2); 3094} 3095 3096.namespace-option:last-child { 3097 border-bottom: none; 3098} 3099 3100/* Matrix-themed Sidebar Widget */ 3101.sidebar-matrix { 3102 font-family: system-ui, sans-serif !important; 3103 background: linear-gradient(180deg, #242424 0%, #2a2a2a 100%) !important; 3104 border: 2px solid #00cc07 !important; 3105 box-shadow: 0 0 15px rgba(0, 204, 7, 0.4), inset 0 0 20px rgba(0, 204, 7, 0.05) !important; 3106} 3107 3108.sidebar-matrix-header { 3109 background: linear-gradient(180deg, #2a2a2a 0%, #242424 100%) !important; 3110 border-bottom: 2px solid #00cc07 !important; 3111 box-shadow: 0 2px 8px rgba(0, 204, 7, 0.3) !important; 3112} 3113 3114.sidebar-matrix-clock { 3115 animation: matrix-pulse 2s ease-in-out infinite; 3116} 3117 3118.sidebar-matrix-date { 3119 opacity: 0.9; 3120} 3121 3122@keyframes matrix-pulse { 3123 0%, 100% { 3124 text-shadow: 0 0 2px rgba(0, 204, 7, 0.4); 3125 } 3126 50% { 3127 text-shadow: 0 0 4px rgba(0, 255, 0, 0.5), 0 0 6px rgba(0, 204, 7, 0.3); 3128 } 3129} 3130 3131/* Matrix glow effect for sidebar */ 3132.sidebar-widget.sidebar-matrix::before { 3133 content: ''; 3134 position: absolute; 3135 top: -2px; 3136 left: -2px; 3137 right: -2px; 3138 bottom: -2px; 3139 background: linear-gradient(45deg, #00cc07, #00ff00, #00cc07); 3140 border-radius: 4px; 3141 opacity: 0; 3142 z-index: -1; 3143 animation: matrix-border-glow 3s ease-in-out infinite; 3144} 3145 3146@keyframes matrix-border-glow { 3147 0%, 100% { 3148 opacity: 0; 3149 } 3150 50% { 3151 opacity: 0.3; 3152 } 3153} 3154 3155/* Scrollbar styling for matrix theme */ 3156.sidebar-matrix ::-webkit-scrollbar { 3157 width: 6px; 3158} 3159 3160.sidebar-matrix ::-webkit-scrollbar-track { 3161 background: #242424; 3162} 3163 3164.sidebar-matrix ::-webkit-scrollbar-thumb { 3165 background: #00cc07; 3166 border-radius: 3px; 3167 box-shadow: 0 0 5px rgba(0, 204, 7, 0.5); 3168} 3169 3170.sidebar-matrix ::-webkit-scrollbar-thumb:hover { 3171 background: #00ff00; 3172 box-shadow: 0 0 8px rgba(0, 255, 0, 0.8); 3173} 3174 3175/* ==================================== 3176 PINK BLING THEME - SPECIAL EFFECTS 3177 ==================================== */ 3178 3179/* Shimmer animation for today's cell - BARELY NOTICEABLE */ 3180@keyframes pink-shimmer { 3181 0% { 3182 box-shadow: 0 0 2px rgba(255, 20, 147, 0.15), 3183 0 0 3px rgba(255, 20, 147, 0.08); 3184 } 3185 50% { 3186 box-shadow: 0 0 4px rgba(255, 20, 147, 0.25), 3187 0 0 6px rgba(255, 20, 147, 0.12); 3188 } 3189 100% { 3190 box-shadow: 0 0 2px rgba(255, 20, 147, 0.15), 3191 0 0 3px rgba(255, 20, 147, 0.08); 3192 } 3193} 3194 3195/* Sparkle animation for today's day number - BARELY NOTICEABLE */ 3196@keyframes pink-sparkle { 3197 0%, 100% { 3198 text-shadow: 0 0 2px rgba(255, 20, 147, 0.3); 3199 transform: scale(1); 3200 } 3201 50% { 3202 text-shadow: 0 0 3px rgba(255, 20, 147, 0.5); 3203 transform: scale(1.01); 3204 } 3205} 3206 3207/* Glow pulse for event bars - BARELY NOTICEABLE */ 3208@keyframes pink-glow-pulse { 3209 0%, 100% { 3210 box-shadow: 0 0 1px currentColor; 3211 } 3212 50% { 3213 box-shadow: 0 0 2px currentColor, 3214 0 0 3px rgba(255, 105, 180, 0.15); 3215 } 3216} 3217 3218/* Gradient shimmer for headers */ 3219@keyframes pink-gradient-shimmer { 3220 0% { 3221 background-position: 0% 50%; 3222 } 3223 50% { 3224 background-position: 100% 50%; 3225 } 3226 100% { 3227 background-position: 0% 50%; 3228 } 3229} 3230 3231/* Pink particle explosion on click */ 3232@keyframes particle-explode { 3233 0% { 3234 opacity: 1; 3235 transform: translate(0, 0) scale(1); 3236 } 3237 100% { 3238 opacity: 0; 3239 transform: translate(var(--tx), var(--ty)) scale(0); 3240 } 3241} 3242 3243/* Cursor trail glow */ 3244@keyframes cursor-trail-fade { 3245 0% { 3246 opacity: 1; 3247 transform: scale(1); 3248 } 3249 100% { 3250 opacity: 0; 3251 transform: scale(0.5); 3252 } 3253} 3254 3255/* Pink particle styles */ 3256.pink-particle { 3257 position: fixed; /* Changed to fixed so it works anywhere on screen */ 3258 width: 6px; 3259 height: 6px; 3260 background: radial-gradient(circle, #ff1493, #ff69b4); 3261 border-radius: 50%; 3262 pointer-events: none; 3263 z-index: 9999999; /* Above everything including dialogs */ 3264 box-shadow: 0 0 8px #ff1493, 3265 0 0 15px #ff69b4; 3266} 3267 3268/* Cursor trail glow */ 3269.pink-cursor-trail { 3270 position: fixed; /* Changed to fixed so it works anywhere on screen */ 3271 width: 8px; 3272 height: 8px; 3273 background: radial-gradient(circle, rgba(255, 20, 147, 0.8), rgba(255, 105, 180, 0.4)); 3274 border-radius: 50%; 3275 pointer-events: none; 3276 z-index: 9999998; /* Just below particles */ 3277 box-shadow: 0 0 10px rgba(255, 20, 147, 0.6), 3278 0 0 20px rgba(255, 105, 180, 0.3); 3279} 3280 3281/* Tiny neon pixel sparkles */ 3282.pink-pixel-sparkle { 3283 position: fixed; 3284 width: 2px; 3285 height: 2px; 3286 background: var(--background-site, #fff); 3287 border-radius: 50%; 3288 pointer-events: none; 3289 z-index: 9999997; /* Just below trail */ 3290 box-shadow: 0 0 2px #ff1493, 3291 0 0 4px #ff69b4, 3292 0 0 6px #fff; 3293} 3294 3295/* Pixel sparkle twinkle animation */ 3296@keyframes pixel-twinkle { 3297 0%, 100% { 3298 opacity: 0; 3299 transform: scale(0); 3300 } 3301 50% { 3302 opacity: 1; 3303 transform: scale(1.5); 3304 } 3305} 3306 3307/* Pixel sparkle float away */ 3308@keyframes pixel-float-away { 3309 0% { 3310 opacity: 1; 3311 transform: translateY(0) scale(1); 3312 } 3313 100% { 3314 opacity: 0; 3315 transform: translateY(-30px) scale(0); 3316 } 3317} 3318 3319/* Pink theme specific styles - TONED DOWN */ 3320.calendar-theme-pink .cal-today { 3321 animation: pink-shimmer 2s ease-in-out infinite; 3322 border: 2px solid #ff1493 !important; 3323 position: relative; 3324 overflow: visible; 3325} 3326 3327.calendar-theme-pink .cal-today .day-num, 3328.calendar-theme-pink .day-num-today { 3329 background: transparent !important; 3330 color: #fff !important; 3331 position: relative; 3332 z-index: 1; 3333 font-weight: 700; 3334 filter: none; 3335 width: 22px; 3336 height: 22px; 3337 line-height: 22px; 3338 text-align: center; 3339 font-size: 10px; 3340 padding: 0; 3341 display: inline-flex; 3342 align-items: center; 3343 justify-content: center; 3344 overflow: visible; 3345} 3346 3347/* Heart shape behind the day number */ 3348.calendar-theme-pink .cal-today .day-num::before, 3349.calendar-theme-pink .day-num-today::before { 3350 content: '♥'; 3351 position: absolute; 3352 top: 50%; 3353 left: 50%; 3354 transform: translate(-50%, -48%); 3355 font-size: 26px; 3356 color: #ff1493; 3357 z-index: -1; 3358 text-shadow: 0 0 8px rgba(255, 20, 147, 0.7), 3359 0 0 16px rgba(255, 20, 147, 0.4), 3360 0 0 24px rgba(255, 105, 180, 0.2); 3361 animation: pink-heart-beat 1.2s ease-in-out infinite; 3362 line-height: 1; 3363} 3364 3365/* Heart beat animation */ 3366@keyframes pink-heart-beat { 3367 0%, 100% { 3368 transform: translate(-50%, -48%) scale(1); 3369 text-shadow: 0 0 8px rgba(255, 20, 147, 0.7), 3370 0 0 16px rgba(255, 20, 147, 0.4); 3371 } 3372 15% { 3373 transform: translate(-50%, -48%) scale(1.15); 3374 text-shadow: 0 0 12px rgba(255, 20, 147, 0.9), 3375 0 0 24px rgba(255, 20, 147, 0.5), 3376 0 0 36px rgba(255, 105, 180, 0.3); 3377 } 3378 30% { 3379 transform: translate(-50%, -48%) scale(0.95); 3380 } 3381 45% { 3382 transform: translate(-50%, -48%) scale(1.1); 3383 text-shadow: 0 0 10px rgba(255, 20, 147, 0.8), 3384 0 0 20px rgba(255, 20, 147, 0.4); 3385 } 3386 60% { 3387 transform: translate(-50%, -48%) scale(1); 3388 } 3389} 3390 3391.calendar-theme-pink .event-bar { 3392 animation: pink-glow-pulse 2s ease-in-out infinite; 3393} 3394 3395.calendar-theme-pink .calendar-compact-header { 3396 background: linear-gradient(90deg, #2d1a24, #3d2030, #2d1a24, #1a0d14); 3397 background-size: 300% 300%; 3398 animation: pink-gradient-shimmer 3s ease infinite; 3399} 3400 3401.calendar-theme-pink .event-list-header { 3402 background: linear-gradient(90deg, #2d1a24, #3d2030, #2d1a24); 3403 background-size: 300% 300%; 3404 animation: pink-gradient-shimmer 3s ease infinite; 3405} 3406 3407/* Subtle hover glow - BARELY NOTICEABLE */ 3408.calendar-theme-pink .cal-today:hover { 3409 box-shadow: 0 0 5px rgba(255, 20, 147, 0.25), 3410 0 0 8px rgba(255, 20, 147, 0.12) !important; 3411} 3412 3413/* Pink theme event items get subtle glow */ 3414.calendar-theme-pink .event-compact-item { 3415 box-shadow: 0 0 1px rgba(255, 20, 147, 0.08); 3416 transition: all 0.3s ease; 3417} 3418 3419.calendar-theme-pink .event-compact-item:hover { 3420 box-shadow: 0 0 3px rgba(255, 20, 147, 0.15); 3421 transform: translateX(2px); 3422} 3423 3424/* Calendar borders get subtle glow */ 3425.calendar-theme-pink.calendar-compact-container { 3426 box-shadow: 0 0 5px rgba(255, 20, 147, 0.12), 3427 0 2px 4px rgba(0,0,0,0.06); 3428 position: relative; 3429} 3430 3431/* Today badge extra sparkle */ 3432.calendar-theme-pink .event-today-badge { 3433 animation: pink-sparkle 1.5s ease-in-out infinite; 3434} 3435 3436/* Consistent subtle text glow for dark themes - main calendar event list */ 3437.calendar-theme-matrix .event-title-compact, 3438.calendar-theme-matrix .event-meta-compact, 3439.calendar-theme-matrix .event-desc-compact { 3440 text-shadow: 0 0 1px var(--text-primary, #00cc07); 3441} 3442 3443.calendar-theme-purple .event-title-compact, 3444.calendar-theme-purple .event-meta-compact, 3445.calendar-theme-purple .event-desc-compact { 3446 text-shadow: 0 0 1px var(--text-primary, #b19cd9); 3447} 3448 3449.calendar-theme-pink .event-title-compact, 3450.calendar-theme-pink .event-meta-compact, 3451.calendar-theme-pink .event-desc-compact { 3452 text-shadow: 0 0 2px var(--text-primary, #ff69b4); 3453} 3454 3455/* Dark theme link glow */ 3456.calendar-theme-matrix .event-desc-compact a, 3457.calendar-theme-matrix .cal-link { 3458 text-shadow: 0 0 1px var(--text-bright, #00ff00); 3459} 3460 3461.calendar-theme-purple .event-desc-compact a, 3462.calendar-theme-purple .cal-link { 3463 text-shadow: 0 0 1px var(--text-bright, #d4a5ff); 3464} 3465 3466.calendar-theme-pink .event-desc-compact a, 3467.calendar-theme-pink .cal-link { 3468 text-shadow: 0 0 2px var(--text-bright, #ff1493); 3469} 3470 3471/* Dark theme event panel text glow */ 3472.event-panel-standalone[data-theme="matrix"] .event-title-compact, 3473.event-panel-standalone[data-theme="matrix"] .event-meta-compact, 3474.event-panel-standalone[data-theme="matrix"] .event-desc-compact { 3475 text-shadow: 0 0 1px var(--text-primary, #00cc07); 3476} 3477 3478.event-panel-standalone[data-theme="purple"] .event-title-compact, 3479.event-panel-standalone[data-theme="purple"] .event-meta-compact, 3480.event-panel-standalone[data-theme="purple"] .event-desc-compact { 3481 text-shadow: 0 0 1px var(--text-primary, #b19cd9); 3482} 3483 3484.event-panel-standalone[data-theme="pink"] .event-title-compact, 3485.event-panel-standalone[data-theme="pink"] .event-meta-compact, 3486.event-panel-standalone[data-theme="pink"] .event-desc-compact { 3487 text-shadow: 0 0 2px var(--text-primary, #ff69b4); 3488} 3489 3490/* Past due badge pulsing effect - SUBTLE */ 3491@keyframes pink-pulse-urgent { 3492 0%, 100% { 3493 box-shadow: 0 0 3px rgba(255, 140, 0, 0.4); 3494 } 3495 50% { 3496 box-shadow: 0 0 8px rgba(255, 140, 0, 0.6); 3497 } 3498} 3499 3500.calendar-theme-pink .event-pastdue-badge { 3501 animation: pink-pulse-urgent 1s ease-in-out infinite; 3502} 3503 3504/* ======================================== 3505 MATRIX THEME: CHECKBOX GLOW 3506 ======================================== */ 3507.calendar-theme-matrix .task-checkbox, 3508.sidebar-matrix .task-checkbox { 3509 border: 2px solid #00ff00; 3510 background: rgba(0, 204, 7, 0.08); 3511 box-shadow: 0 0 6px rgba(0, 255, 0, 0.3), inset 0 0 4px rgba(0, 204, 7, 0.1); 3512} 3513 3514.calendar-theme-matrix .task-checkbox:hover, 3515.sidebar-matrix .task-checkbox:hover { 3516 border-color: #00ff00; 3517 box-shadow: 0 0 10px rgba(0, 255, 0, 0.5), inset 0 0 6px rgba(0, 204, 7, 0.2); 3518} 3519 3520.calendar-theme-matrix .task-checkbox:checked, 3521.sidebar-matrix .task-checkbox:checked { 3522 background: #00cc07; 3523 border-color: #00ff00; 3524 box-shadow: 0 0 8px rgba(0, 255, 0, 0.6); 3525} 3526 3527/* ======================================== 3528 PURPLE THEME: CHECKBOX GLOW 3529 ======================================== */ 3530.calendar-theme-purple .task-checkbox, 3531.sidebar-purple .task-checkbox { 3532 border: 2px solid #d4a5ff; 3533 background: rgba(155, 89, 182, 0.08); 3534 box-shadow: 0 0 6px rgba(212, 165, 255, 0.3), inset 0 0 4px rgba(155, 89, 182, 0.1); 3535} 3536 3537.calendar-theme-purple .task-checkbox:hover, 3538.sidebar-purple .task-checkbox:hover { 3539 border-color: #d4a5ff; 3540 box-shadow: 0 0 10px rgba(212, 165, 255, 0.5), inset 0 0 6px rgba(155, 89, 182, 0.2); 3541} 3542 3543.calendar-theme-purple .task-checkbox:checked, 3544.sidebar-purple .task-checkbox:checked { 3545 background: #9b59b6; 3546 border-color: #d4a5ff; 3547 box-shadow: 0 0 8px rgba(212, 165, 255, 0.6); 3548} 3549 3550/* ======================================== 3551 PINK THEME: CHECKBOX GLOW 3552 ======================================== */ 3553.calendar-theme-pink .task-checkbox, 3554.sidebar-pink .task-checkbox { 3555 border: 2px solid #ff1493; 3556 background: rgba(255, 20, 147, 0.08); 3557 box-shadow: 0 0 6px rgba(255, 20, 147, 0.35), inset 0 0 4px rgba(255, 20, 147, 0.1); 3558} 3559 3560.calendar-theme-pink .task-checkbox:hover, 3561.sidebar-pink .task-checkbox:hover { 3562 border-color: #ff69b4; 3563 box-shadow: 0 0 10px rgba(255, 20, 147, 0.6), inset 0 0 6px rgba(255, 20, 147, 0.2); 3564} 3565 3566.calendar-theme-pink .task-checkbox:checked, 3567.sidebar-pink .task-checkbox:checked { 3568 background: #ff1493; 3569 border-color: #ff69b4; 3570 box-shadow: 0 0 8px rgba(255, 20, 147, 0.7); 3571} 3572 3573/* Pink checkbox in dialog forms */ 3574.calendar-theme-pink .checkbox-label input[type="checkbox"], 3575.calendar-theme-pink .checkbox-label-compact input[type="checkbox"] { 3576 accent-color: #ff1493; 3577} 3578 3579/* Wiki theme checkboxes - use border color */ 3580.calendar-theme-wiki .task-checkbox, 3581.sidebar-wiki .task-checkbox, 3582.eventlist-theme-wiki .task-checkbox { 3583 border: 2px solid var(--border-main, #ccc); 3584 accent-color: var(--border-main, #ccc); 3585} 3586 3587.calendar-theme-wiki .task-checkbox:hover, 3588.sidebar-wiki .task-checkbox:hover, 3589.eventlist-theme-wiki .task-checkbox:hover { 3590 border: 2px solid var(--border-main, #ccc); 3591 box-shadow: 0 0 8px rgba(0, 0, 0, 0.15); 3592} 3593 3594.calendar-theme-wiki .task-checkbox:checked, 3595.sidebar-wiki .task-checkbox:checked, 3596.eventlist-theme-wiki .task-checkbox:checked { 3597 background: var(--border-main, #ccc); 3598 border: 2px solid var(--border-main, #ccc); 3599} 3600 3601/* Wiki theme buttons - use __link__ color */ 3602.calendar-theme-wiki .cal-nav-btn, 3603.calendar-theme-wiki .cal-today-btn { 3604 background: var(--text-bright, #2b73b7); 3605 color: #fff; 3606} 3607 3608/* Wiki theme day headers - use __background_neu__ */ 3609.calendar-theme-wiki .calendar-day-headers { 3610 background: var(--cell-today-bg, #eee); 3611} 3612 3613/* Wiki theme past events toggle - use __background_neu__ */ 3614.calendar-theme-wiki .past-events-toggle { 3615 background: var(--cell-today-bg, #eee); 3616} 3617 3618.calendar-theme-wiki .calendar-day-headers span { 3619 color: var(--text-primary, #333); 3620} 3621 3622.sidebar-wiki .panel-nav-btn, 3623.sidebar-wiki .panel-today-btn { 3624 background: var(--text-bright, #2b73b7); 3625 color: #fff; 3626} 3627 3628.event-panel-standalone[data-theme="wiki"] .panel-nav-btn, 3629.event-panel-standalone[data-theme="wiki"] .panel-today-btn { 3630 background: var(--text-bright, #2b73b7); 3631 color: #fff; 3632} 3633 3634/* Wiki theme clock - no glow */ 3635.sidebar-wiki .eventlist-today-clock, 3636.eventlist-theme-wiki .eventlist-today-clock { 3637 text-shadow: none; 3638} 3639 3640/* Wiki theme clock - no glow, slightly larger */ 3641.sidebar-wiki .eventlist-today-clock, 3642.eventlist-theme-wiki .eventlist-today-clock { 3643 text-shadow: none; 3644 font-size: 20px; 3645} 3646 3647/* ======================================== 3648 PINK THEME: BUTTON FIREWORK BURST HOVER 3649 ======================================== */ 3650@keyframes pink-firework-burst { 3651 0% { 3652 box-shadow: 0 0 4px rgba(255, 20, 147, 0.4); 3653 } 3654 25% { 3655 box-shadow: 0 0 15px rgba(255, 20, 147, 0.8), 3656 0 0 30px rgba(255, 105, 180, 0.4), 3657 5px -5px 8px rgba(255, 20, 147, 0.6), 3658 -5px -5px 8px rgba(255, 105, 180, 0.5), 3659 5px 5px 8px rgba(255, 133, 193, 0.4), 3660 -5px 5px 8px rgba(255, 20, 147, 0.5); 3661 } 3662 50% { 3663 box-shadow: 0 0 20px rgba(255, 20, 147, 0.9), 3664 0 0 40px rgba(255, 105, 180, 0.5), 3665 8px -8px 12px rgba(255, 20, 147, 0.5), 3666 -8px -8px 12px rgba(255, 105, 180, 0.4), 3667 8px 8px 12px rgba(255, 133, 193, 0.3), 3668 -8px 8px 12px rgba(255, 20, 147, 0.4), 3669 0 -10px 15px rgba(255, 20, 147, 0.3), 3670 10px 0 15px rgba(255, 105, 180, 0.3); 3671 } 3672 75% { 3673 box-shadow: 0 0 12px rgba(255, 20, 147, 0.6), 3674 0 0 25px rgba(255, 105, 180, 0.3), 3675 12px -12px 8px rgba(255, 20, 147, 0.2), 3676 -12px -12px 8px rgba(255, 105, 180, 0.15), 3677 12px 12px 8px rgba(255, 133, 193, 0.1), 3678 -12px 12px 8px rgba(255, 20, 147, 0.15); 3679 } 3680 100% { 3681 box-shadow: 0 0 6px rgba(255, 20, 147, 0.5), 3682 0 0 15px rgba(255, 105, 180, 0.3); 3683 } 3684} 3685 3686/* Apply firework burst to all pink theme buttons on hover */ 3687.calendar-theme-pink .cal-nav-btn:hover, 3688.calendar-theme-pink .cal-today-btn:hover, 3689.calendar-theme-pink .btn-save-sleek:hover, 3690.calendar-theme-pink .btn-cancel-sleek:hover, 3691.calendar-theme-pink .btn-add-event:hover, 3692.calendar-theme-pink .event-edit-btn:hover, 3693.calendar-theme-pink .event-delete-btn:hover, 3694.calendar-theme-pink .event-action-btn:hover { 3695 background: #ff1493 !important; 3696 color: #1a0d14 !important; 3697 border-color: #ff69b4 !important; 3698 animation: pink-firework-burst 0.6s ease-out forwards; 3699 transform: scale(1.1); 3700 filter: brightness(1.4); 3701} 3702 3703.calendar-theme-pink .cal-nav-btn:active, 3704.calendar-theme-pink .cal-today-btn:active, 3705.calendar-theme-pink .btn-save-sleek:active, 3706.calendar-theme-pink .btn-cancel-sleek:active, 3707.calendar-theme-pink .btn-add-event:active { 3708 transform: scale(0.92); 3709 filter: brightness(1.6); 3710 animation: none; 3711 box-shadow: 0 0 25px rgba(255, 20, 147, 1), 0 0 50px rgba(255, 105, 180, 0.6); 3712} 3713 3714/* Sidebar pink button firework */ 3715.sidebar-pink .event-edit-btn:hover, 3716.sidebar-pink .event-delete-btn:hover { 3717 background: #ff1493 !important; 3718 color: #1a0d14 !important; 3719 animation: pink-firework-burst 0.6s ease-out forwards; 3720 transform: scale(1.1); 3721} 3722 3723/* Panel standalone pink buttons */ 3724.event-panel-standalone[data-theme="pink"] .panel-nav-btn:hover, 3725.event-panel-standalone[data-theme="pink"] .panel-today-btn:hover, 3726.event-panel-standalone[data-theme="pink"] .panel-add-btn:hover { 3727 background: #ff1493 !important; 3728 color: #1a0d14 !important; 3729 animation: pink-firework-burst 0.6s ease-out forwards; 3730 transform: scale(1.1); 3731} 3732 3733/* ======================================== 3734 TEXT COLOR PROTECTION 3735 Forces text to stay readable on dark themes 3736 when browser extensions modify page colors. 3737 Only uses color !important — no filter, no 3738 color-scheme, no variable resets. 3739 ======================================== */ 3740 3741/* Matrix: green text on dark background */ 3742.calendar-theme-matrix .event-title-compact, 3743.calendar-theme-matrix .event-list-header, 3744.calendar-theme-matrix .calendar-day-headers, 3745.sidebar-matrix .event-title-compact { 3746 color: var(--text-bright, #00ff00) !important; 3747 -webkit-text-fill-color: var(--text-bright, #00ff00) !important; 3748} 3749 3750.calendar-theme-matrix .event-meta-compact, 3751.calendar-theme-matrix .event-desc-compact, 3752.calendar-theme-matrix .no-events-msg, 3753.sidebar-matrix .event-meta-compact, 3754.sidebar-matrix .event-desc-compact { 3755 color: var(--text-dim, #00aa00) !important; 3756 -webkit-text-fill-color: var(--text-dim, #00aa00) !important; 3757} 3758 3759.calendar-theme-matrix .day-num, 3760.calendar-theme-matrix .cal-nav-btn, 3761.calendar-theme-matrix .cal-today-btn, 3762.sidebar-matrix .eventlist-today-date { 3763 color: var(--text-primary, #00cc07) !important; 3764 -webkit-text-fill-color: var(--text-primary, #00cc07) !important; 3765} 3766 3767/* Purple: purple text on dark background */ 3768.calendar-theme-purple .event-title-compact, 3769.calendar-theme-purple .event-list-header, 3770.calendar-theme-purple .calendar-day-headers, 3771.sidebar-purple .event-title-compact { 3772 color: var(--text-bright, #d4a5ff) !important; 3773 -webkit-text-fill-color: var(--text-bright, #d4a5ff) !important; 3774} 3775 3776.calendar-theme-purple .event-meta-compact, 3777.calendar-theme-purple .event-desc-compact, 3778.calendar-theme-purple .no-events-msg, 3779.sidebar-purple .event-meta-compact, 3780.sidebar-purple .event-desc-compact { 3781 color: var(--text-dim, #8e7ab8) !important; 3782 -webkit-text-fill-color: var(--text-dim, #8e7ab8) !important; 3783} 3784 3785.calendar-theme-purple .day-num, 3786.calendar-theme-purple .cal-nav-btn, 3787.calendar-theme-purple .cal-today-btn, 3788.sidebar-purple .eventlist-today-date { 3789 color: var(--text-primary, #b19cd9) !important; 3790 -webkit-text-fill-color: var(--text-primary, #b19cd9) !important; 3791} 3792 3793/* Pink: pink text on dark background */ 3794.calendar-theme-pink .event-title-compact, 3795.calendar-theme-pink .event-list-header, 3796.calendar-theme-pink .calendar-day-headers, 3797.sidebar-pink .event-title-compact { 3798 color: var(--text-bright, #ff1493) !important; 3799 -webkit-text-fill-color: var(--text-bright, #ff1493) !important; 3800} 3801 3802.calendar-theme-pink .event-meta-compact, 3803.calendar-theme-pink .event-desc-compact, 3804.calendar-theme-pink .no-events-msg, 3805.sidebar-pink .event-meta-compact, 3806.sidebar-pink .event-desc-compact { 3807 color: var(--text-dim, #ff85c1) !important; 3808 -webkit-text-fill-color: var(--text-dim, #ff85c1) !important; 3809} 3810 3811.calendar-theme-pink .day-num, 3812.calendar-theme-pink .cal-nav-btn, 3813.calendar-theme-pink .cal-today-btn, 3814.sidebar-pink .eventlist-today-date { 3815 color: var(--text-primary, #ff69b4) !important; 3816 -webkit-text-fill-color: var(--text-primary, #ff69b4) !important; 3817} 3818 3819/* Badge text AND background protection - all dark themes */ 3820.calendar-theme-matrix .event-today-badge, 3821.calendar-theme-matrix .event-pastdue-badge, 3822.calendar-theme-matrix .event-namespace-badge, 3823.calendar-theme-matrix .eventlist-simple-today-badge, 3824.calendar-theme-matrix .eventlist-simple-pastdue-badge, 3825.calendar-theme-matrix .panel-ns-badge, 3826.sidebar-matrix .event-today-badge, 3827.sidebar-matrix .event-pastdue-badge, 3828.sidebar-matrix .event-namespace-badge, 3829.calendar-theme-purple .event-today-badge, 3830.calendar-theme-purple .event-pastdue-badge, 3831.calendar-theme-purple .event-namespace-badge, 3832.calendar-theme-purple .eventlist-simple-today-badge, 3833.calendar-theme-purple .eventlist-simple-pastdue-badge, 3834.calendar-theme-purple .panel-ns-badge, 3835.sidebar-purple .event-today-badge, 3836.sidebar-purple .event-pastdue-badge, 3837.sidebar-purple .event-namespace-badge, 3838.calendar-theme-pink .event-today-badge, 3839.calendar-theme-pink .event-pastdue-badge, 3840.calendar-theme-pink .event-namespace-badge, 3841.calendar-theme-pink .eventlist-simple-today-badge, 3842.calendar-theme-pink .eventlist-simple-pastdue-badge, 3843.calendar-theme-pink .panel-ns-badge, 3844.sidebar-pink .event-today-badge, 3845.sidebar-pink .event-pastdue-badge, 3846.sidebar-pink .event-namespace-badge { 3847 color: var(--background-site, white) !important; 3848 -webkit-text-fill-color: var(--background-site, white) !important; 3849 background: var(--text-bright) !important; 3850} 3851 3852.calendar-theme-matrix .event-pastdue-badge, 3853.calendar-theme-purple .event-pastdue-badge, 3854.calendar-theme-pink .event-pastdue-badge, 3855.calendar-theme-matrix .eventlist-simple-pastdue-badge, 3856.calendar-theme-purple .eventlist-simple-pastdue-badge, 3857.calendar-theme-pink .eventlist-simple-pastdue-badge, 3858.sidebar-matrix .event-pastdue-badge, 3859.sidebar-purple .event-pastdue-badge, 3860.sidebar-pink .event-pastdue-badge { 3861 background: var(--pastdue-color, #e74c3c) !important; 3862} 3863 3864/* Purple: sidebar section event text and section headers */ 3865.sidebar-purple .event-title-compact, 3866.sidebar-purple .event-meta-compact, 3867.sidebar-purple .event-desc-compact { 3868 color: var(--text-primary, #b19cd9) !important; 3869 -webkit-text-fill-color: var(--text-primary, #b19cd9) !important; 3870} 3871 3872.sidebar-purple .eventlist-today-clock { 3873 color: var(--text-bright, #d4a5ff) !important; 3874 -webkit-text-fill-color: var(--text-bright, #d4a5ff) !important; 3875} 3876 3877.sidebar-purple .eventlist-today-date { 3878 color: var(--text-dim, #8e7ab8) !important; 3879 -webkit-text-fill-color: var(--text-dim, #8e7ab8) !important; 3880} 3881 3882/* Pink: sidebar section event text */ 3883.sidebar-pink .event-title-compact { 3884 color: var(--text-bright, #ff1493) !important; 3885 -webkit-text-fill-color: var(--text-bright, #ff1493) !important; 3886} 3887 3888.sidebar-pink .eventlist-today-clock { 3889 color: var(--text-bright, #ff1493) !important; 3890 -webkit-text-fill-color: var(--text-bright, #ff1493) !important; 3891} 3892 3893.sidebar-pink .eventlist-today-date { 3894 color: var(--text-dim, #ff85c1) !important; 3895 -webkit-text-fill-color: var(--text-dim, #ff85c1) !important; 3896} 3897 3898/* ======================================== 3899 EVENTLIST THEMING 3900 Applies theme colors to {{eventlist}} output 3901 ======================================== */ 3902 3903/* Matrix eventlist */ 3904.eventlist-theme-matrix .eventlist-simple-title { 3905 color: var(--text-bright, #00ff00) !important; 3906 -webkit-text-fill-color: var(--text-bright, #00ff00) !important; 3907} 3908 3909.eventlist-theme-matrix .eventlist-simple-header { 3910 color: var(--text-primary, #00cc07) !important; 3911 -webkit-text-fill-color: var(--text-primary, #00cc07) !important; 3912 background: var(--cell-bg, #242424) !important; 3913} 3914 3915.eventlist-theme-matrix .eventlist-simple-time, 3916.eventlist-theme-matrix .eventlist-simple-date, 3917.eventlist-theme-matrix .eventlist-simple-body { 3918 color: var(--text-dim, #00aa00) !important; 3919 -webkit-text-fill-color: var(--text-dim, #00aa00) !important; 3920 background: var(--background-site, #242424) !important; 3921} 3922 3923.eventlist-theme-matrix .eventlist-simple-body a { 3924 color: var(--text-bright, #00ff00) !important; 3925 -webkit-text-fill-color: var(--text-bright, #00ff00) !important; 3926} 3927 3928.eventlist-theme-matrix .eventlist-simple-body strong { 3929 color: var(--text-primary, #00cc07) !important; 3930 -webkit-text-fill-color: var(--text-primary, #00cc07) !important; 3931} 3932 3933.eventlist-theme-matrix .eventlist-simple-body code { 3934 background: var(--cell-bg, #1a3d1a) !important; 3935 color: var(--text-primary, #00cc07) !important; 3936 -webkit-text-fill-color: var(--text-primary, #00cc07) !important; 3937} 3938 3939.eventlist-theme-matrix .eventlist-simple-namespace { 3940 background: var(--cell-today-bg, #2a4d2a) !important; 3941 color: var(--text-bright, #00ff00) !important; 3942 -webkit-text-fill-color: var(--text-bright, #00ff00) !important; 3943} 3944 3945.eventlist-theme-matrix .eventlist-simple-empty, 3946.eventlist-theme-matrix .eventlist-simple-empty .eventlist-simple-body { 3947 color: var(--text-dim, #00aa00) !important; 3948 -webkit-text-fill-color: var(--text-dim, #00aa00) !important; 3949} 3950 3951.eventlist-theme-matrix .eventlist-simple-item { 3952 border-bottom-color: var(--border-color, #00cc07) !important; 3953} 3954 3955.eventlist-theme-matrix .eventlist-today-header { 3956 background: var(--cell-bg, #242424) !important; 3957 color: var(--text-bright, #00ff00) !important; 3958 -webkit-text-fill-color: var(--text-bright, #00ff00) !important; 3959 border-color: var(--text-bright, #00ff00) !important; 3960} 3961 3962.eventlist-theme-matrix .eventlist-today-clock { 3963 color: var(--text-bright, #00ff00) !important; 3964 -webkit-text-fill-color: var(--text-bright, #00ff00) !important; 3965} 3966 3967.eventlist-theme-matrix .eventlist-today-date { 3968 color: var(--text-dim, #00aa00) !important; 3969 -webkit-text-fill-color: var(--text-dim, #00aa00) !important; 3970} 3971 3972/* Purple eventlist */ 3973.eventlist-theme-purple .eventlist-simple-title { 3974 color: var(--text-bright, #d4a5ff) !important; 3975 -webkit-text-fill-color: var(--text-bright, #d4a5ff) !important; 3976} 3977 3978.eventlist-theme-purple .eventlist-simple-header { 3979 color: var(--text-primary, #b19cd9) !important; 3980 -webkit-text-fill-color: var(--text-primary, #b19cd9) !important; 3981 background: var(--cell-bg, #2a2030) !important; 3982} 3983 3984.eventlist-theme-purple .eventlist-simple-time, 3985.eventlist-theme-purple .eventlist-simple-date, 3986.eventlist-theme-purple .eventlist-simple-body { 3987 color: var(--text-dim, #8e7ab8) !important; 3988 -webkit-text-fill-color: var(--text-dim, #8e7ab8) !important; 3989 background: var(--background-site, #2a2030) !important; 3990} 3991 3992.eventlist-theme-purple .eventlist-simple-body a { 3993 color: var(--text-bright, #d4a5ff) !important; 3994 -webkit-text-fill-color: var(--text-bright, #d4a5ff) !important; 3995} 3996 3997.eventlist-theme-purple .eventlist-simple-body strong { 3998 color: var(--text-primary, #b19cd9) !important; 3999 -webkit-text-fill-color: var(--text-primary, #b19cd9) !important; 4000} 4001 4002.eventlist-theme-purple .eventlist-simple-body code { 4003 background: var(--cell-bg, #3d2b4d) !important; 4004 color: var(--text-primary, #b19cd9) !important; 4005 -webkit-text-fill-color: var(--text-primary, #b19cd9) !important; 4006} 4007 4008.eventlist-theme-purple .eventlist-simple-namespace { 4009 background: var(--cell-today-bg, #3d2b4d) !important; 4010 color: var(--text-bright, #d4a5ff) !important; 4011 -webkit-text-fill-color: var(--text-bright, #d4a5ff) !important; 4012} 4013 4014.eventlist-theme-purple .eventlist-simple-empty, 4015.eventlist-theme-purple .eventlist-simple-empty .eventlist-simple-body { 4016 color: var(--text-dim, #8e7ab8) !important; 4017 -webkit-text-fill-color: var(--text-dim, #8e7ab8) !important; 4018} 4019 4020.eventlist-theme-purple .eventlist-simple-item { 4021 border-bottom-color: var(--border-color, #9b59b6) !important; 4022} 4023 4024.eventlist-theme-purple .eventlist-today-header { 4025 background: var(--cell-bg, #2a2030) !important; 4026 color: var(--text-bright, #d4a5ff) !important; 4027 -webkit-text-fill-color: var(--text-bright, #d4a5ff) !important; 4028 border-color: var(--text-bright, #d4a5ff) !important; 4029} 4030 4031.eventlist-theme-purple .eventlist-today-clock { 4032 color: var(--text-bright, #d4a5ff) !important; 4033 -webkit-text-fill-color: var(--text-bright, #d4a5ff) !important; 4034} 4035 4036.eventlist-theme-purple .eventlist-today-date { 4037 color: var(--text-dim, #8e7ab8) !important; 4038 -webkit-text-fill-color: var(--text-dim, #8e7ab8) !important; 4039} 4040 4041/* Pink eventlist */ 4042.eventlist-theme-pink .eventlist-simple-title { 4043 color: var(--text-bright, #ff1493) !important; 4044 -webkit-text-fill-color: var(--text-bright, #ff1493) !important; 4045} 4046 4047.eventlist-theme-pink .eventlist-simple-header { 4048 color: var(--text-primary, #ff69b4) !important; 4049 -webkit-text-fill-color: var(--text-primary, #ff69b4) !important; 4050 background: var(--cell-bg, #1a0d14) !important; 4051} 4052 4053.eventlist-theme-pink .eventlist-simple-time, 4054.eventlist-theme-pink .eventlist-simple-date, 4055.eventlist-theme-pink .eventlist-simple-body { 4056 color: var(--text-dim, #ff85c1) !important; 4057 -webkit-text-fill-color: var(--text-dim, #ff85c1) !important; 4058 background: var(--background-site, #1a0d14) !important; 4059} 4060 4061.eventlist-theme-pink .eventlist-simple-body a { 4062 color: var(--text-bright, #ff1493) !important; 4063 -webkit-text-fill-color: var(--text-bright, #ff1493) !important; 4064} 4065 4066.eventlist-theme-pink .eventlist-simple-body strong { 4067 color: var(--text-primary, #ff69b4) !important; 4068 -webkit-text-fill-color: var(--text-primary, #ff69b4) !important; 4069} 4070 4071.eventlist-theme-pink .eventlist-simple-body code { 4072 background: var(--cell-bg, #2d1020) !important; 4073 color: var(--text-primary, #ff69b4) !important; 4074 -webkit-text-fill-color: var(--text-primary, #ff69b4) !important; 4075} 4076 4077.eventlist-theme-pink .eventlist-simple-namespace { 4078 background: var(--cell-today-bg, #2d1020) !important; 4079 color: var(--text-bright, #ff1493) !important; 4080 -webkit-text-fill-color: var(--text-bright, #ff1493) !important; 4081} 4082 4083.eventlist-theme-pink .eventlist-simple-empty, 4084.eventlist-theme-pink .eventlist-simple-empty .eventlist-simple-body { 4085 color: var(--text-dim, #ff85c1) !important; 4086 -webkit-text-fill-color: var(--text-dim, #ff85c1) !important; 4087} 4088 4089.eventlist-theme-pink .eventlist-simple-item { 4090 border-bottom-color: var(--border-color, #ff1493) !important; 4091} 4092 4093.eventlist-theme-pink .eventlist-today-header { 4094 background: var(--cell-bg, #1a0d14) !important; 4095 color: var(--text-bright, #ff1493) !important; 4096 -webkit-text-fill-color: var(--text-bright, #ff1493) !important; 4097 border-color: var(--text-bright, #ff1493) !important; 4098} 4099 4100.eventlist-theme-pink .eventlist-today-clock { 4101 color: var(--text-bright, #ff1493) !important; 4102 -webkit-text-fill-color: var(--text-bright, #ff1493) !important; 4103} 4104 4105.eventlist-theme-pink .eventlist-today-date { 4106 color: var(--text-dim, #ff85c1) !important; 4107 -webkit-text-fill-color: var(--text-dim, #ff85c1) !important; 4108} 4109