1/* Calendar Plugin - Matrix Edition v5.5.0 2 * 3 * CSS VARIABLE REFERENCE 4 * ====================== 5 * All theming is driven by CSS custom properties injected per-calendar instance. 6 * The wiki theme maps these from the DokuWiki template's style.ini file. 7 * 8 * Variable | Description | Wiki Template Mapping (style.ini) 9 * ------------------------|----------------------------|------------------------------------ 10 * --background-site | Main container bg | __background_site__ 11 * --background-alt | Hover/alt bg | __background_alt__ 12 * --background-header | Header backgrounds | __background_alt__ 13 * --text-primary | Main text color | __text__ 14 * --text-bright | Accent text | __link__ 15 * --text-dim | Secondary/muted text | __text_neu__ 16 * --border-color | Grid lines, subtle borders | __border__ 17 * --border-main | Accent border, buttons | __link__ 18 * --cell-bg | Cell/input backgrounds | __background__ 19 * --cell-today-bg | Today cell highlight | __background_neu__ 20 * --grid-bg | Calendar grid bg | __background_site__ 21 * --shadow-color | Box shadow color | rgba(0,0,0,0.1) 22 * --header-border | Header bottom border | __border__ 23 * --header-shadow | Header box-shadow | 0 2px 4px rgba(0,0,0,0.1) 24 * --btn-text | Button text color | computed (contrast against --border-main) 25 * 26 * To customize for a specific DokuWiki template, edit the template's 27 * conf/style.ini [replacements] section. The calendar will automatically 28 * pick up the template colors. 29 */ 30 31/* Main container: Responsive with flexible sizing */ 32.calendar-compact-container { 33 display: flex; 34 width: 100%; 35 max-width: 1200px; 36 min-width: 320px; 37 height: 600px; 38 max-height: 90vh; 39 background-color: var(--background-site, #ffffff); 40 border: 2px solid var(--border-main, #d0d0d0); 41 border-radius: 4px; 42 box-shadow: 0 0 10px var(--shadow-color, rgba(0,0,0,0.06)); 43 overflow: hidden; 44 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 45 font-size: 12px; 46} 47 48/* Mobile responsive */ 49@media (max-width: 768px) { 50 .calendar-compact-container { 51 flex-direction: column; 52 height: auto; 53 min-height: 400px; 54 max-height: none; 55 } 56 57 .calendar-compact-left { 58 width: 100% !important; 59 min-width: 100% !important; 60 border-right: none !important; 61 border-bottom: 1px solid var(--border-main, #e0e0e0); 62 height: auto; 63 min-height: 300px; 64 } 65 66 .calendar-compact-right { 67 width: 100% !important; 68 min-width: 100% !important; 69 max-height: 400px; 70 } 71} 72 73/* Tablet responsive */ 74@media (max-width: 1024px) and (min-width: 769px) { 75 .calendar-compact-container { 76 max-width: 100%; 77 } 78 79 .calendar-compact-left { 80 width: 60% !important; 81 min-width: 400px; 82 } 83 84 .calendar-compact-right { 85 width: 40% !important; 86 min-width: 250px; 87 } 88} 89 90/* Small screens */ 91@media (max-width: 600px) { 92 .calendar-compact-container { 93 font-size: 11px; 94 height: auto; 95 max-height: none; 96 } 97} 98 99/* Left side: Calendar - FLEXIBLE */ 100.calendar-compact-left { 101 flex: 1; 102 min-width: 400px; 103 border-right: 1px solid var(--border-main, #e0e0e0); 104 display: flex; 105 flex-direction: column; 106 background: var(--background-site); 107 overflow: hidden; 108} 109 110/* Right side: Event list - FLEXIBLE */ 111.calendar-compact-right { 112 flex: 0 0 300px; 113 min-width: 250px; 114 max-width: 400px; 115 display: flex; 116 flex-direction: column; 117 background: var(--background-site); 118 overflow: hidden; 119} 120 121/* Calendar header - COMPACT */ 122.calendar-compact-header { 123 display: flex; 124 align-items: center; 125 gap: 12px; 126 padding: 8px 12px; 127 background: var(--background-header); 128 color: var(--text-primary); 129 border-bottom: 1px solid var(--header-border, var(--border-main)); 130 box-shadow: var(--header-shadow, none); 131} 132 133/* Namespace filter indicator at top of calendar */ 134.calendar-namespace-filter { 135 display: flex; 136 align-items: center; 137 gap: 6px; 138 padding: 6px 10px; 139 background: var(--cell-bg, #e8f5e9); 140 border: 1px solid var(--border-color, #81c784); 141 border-radius: 4px; 142 margin: 8px 12px 0 12px; 143 font-size: 11px; 144} 145 146.namespace-filter-label { 147 color: var(--text-primary, #2e7d32); 148 font-weight: 600; 149} 150 151.namespace-filter-name { 152 background: var(--border-main, #00cc07); 153 color: var(--btn-text, white); 154 padding: 2px 6px; 155 border-radius: 3px; 156 font-weight: 500; 157 font-family: monospace; 158 font-size: 10px; 159} 160 161.namespace-filter-clear { 162 background: none; 163 border: none; 164 color: var(--border-main, #00cc07); 165 cursor: pointer; 166 font-size: 16px; 167 padding: 0; 168 width: 20px; 169 height: 20px; 170 display: flex; 171 align-items: center; 172 justify-content: center; 173 border-radius: 3px; 174 margin-left: auto; 175 transition: background 0.2s; 176} 177 178.namespace-filter-clear:hover { 179 background: var(--shadow-color, rgba(0, 204, 7, 0.1)); 180} 181 182.namespace-filter-badge { 183 position: relative; 184 padding-right: 24px !important; 185} 186 187.filter-clear-inline { 188 position: absolute; 189 right: 4px; 190 top: 50%; 191 transform: translateY(-50%); 192 background: none; 193 border: none; 194 color: var(--text-dim, #999); 195 padding: 0; 196 width: 16px; 197 height: 16px; 198 border-radius: 50%; 199 display: flex; 200 align-items: center; 201 justify-content: center; 202 transition: all 0.15s; 203 line-height: 1; 204} 205 206.filter-clear-inline:hover { 207 background: rgba(211, 47, 47, 0.1); 208 color: #d32f2f; 209} 210 211.calendar-compact-header h3 { 212 margin: 0; 213 font-size: 14px; 214 font-weight: 600; 215 color: var(--text-primary, #2c3e50); 216 flex: 1; 217 text-align: center; 218} 219 220.calendar-month-picker { 221 cursor: pointer; 222 user-select: none; 223 transition: all 0.15s; 224 padding: 4px 8px; 225 border-radius: 4px; 226} 227 228.calendar-month-picker:hover { 229 background: var(--background-alt, #f0f0f0); 230 color: var(--text-bright, #008800); 231} 232 233.month-picker-overlay { 234 position: fixed; 235 top: 0; 236 left: 0; 237 right: 0; 238 bottom: 0; 239 background: rgba(0, 0, 0, 0.5); 240 display: flex; 241 align-items: center; 242 justify-content: center; 243 z-index: 10000; 244} 245 246.month-picker-dialog { 247 background: var(--background-site, white); 248 border: 2px solid var(--border-main, #d0d0d0); 249 border-radius: 8px; 250 padding: 20px; 251 box-shadow: 0 0 20px var(--shadow-color, rgba(0, 0, 0, 0.3)); 252 min-width: 300px; 253} 254 255.month-picker-dialog h4 { 256 margin: 0 0 16px 0; 257 font-size: 16px; 258 font-weight: 600; 259 color: var(--text-primary, #2c3e50); 260} 261 262.month-picker-selects { 263 display: flex; 264 gap: 12px; 265 margin-bottom: 16px; 266} 267 268.month-picker-select { 269 flex: 1; 270 padding: 8px 12px; 271 border: 1px solid var(--border-main, #d0d0d0); 272 border-radius: 4px; 273 font-size: 14px; 274 background: var(--cell-bg, white); 275 color: var(--text-primary, #333); 276 cursor: pointer; 277} 278 279.month-picker-select:focus { 280 outline: none; 281 border-color: var(--border-main, #008800); 282 box-shadow: 0 0 0 2px var(--shadow-color, rgba(0, 136, 0, 0.1)); 283} 284 285.month-picker-actions { 286 display: flex; 287 gap: 8px; 288 justify-content: flex-end; 289} 290 291.cal-nav-btn { 292 background: var(--border-main); 293 border: 1px solid var(--border-color); 294 color: var(--btn-text, var(--background-site)); 295 width: 28px; 296 height: 28px; 297 border-radius: 4px; 298 cursor: pointer; 299 font-size: 16px; 300 transition: all 0.15s; 301 padding: 0; 302 display: flex; 303 align-items: center; 304 justify-content: center; 305} 306 307.cal-nav-btn:hover { 308 opacity: 0.9; 309} 310 311.cal-today-btn { 312 background: var(--border-main); 313 border: 1px solid var(--border-color); 314 color: var(--btn-text, var(--background-site)); 315 font-size: 11px; 316 font-weight: 600; 317 padding: 4px 10px; 318 border-radius: 4px; 319 cursor: pointer; 320 transition: all 0.15s; 321} 322 323.cal-today-btn:hover { 324 opacity: 0.9; 325} 326 327/* Calendar grid - Excel-like sizing - RESPONSIVE */ 328.calendar-compact-grid { 329 width: 100%; 330 border-collapse: collapse; 331 table-layout: fixed; 332 flex: 1; 333 background: var(--grid-bg, var(--background-site)); 334} 335 336.calendar-compact-grid thead th { 337 height: 22px; 338 background: var(--background-header); 339 color: var(--text-primary); 340 border-bottom: 1px solid var(--border-color, #d0d0d0); 341 border-right: 1px solid var(--border-color, #e8e8e8); 342 font-size: 10px; 343 font-weight: 600; 344 text-align: center; 345 padding: 0; 346} 347 348.calendar-compact-grid thead th:last-child { 349 border-right: none; 350} 351 352.calendar-compact-grid tbody td { 353 height: 58px; 354 min-height: 40px; 355 border: 1px solid var(--border-color, #e8e8e8); 356 border-top: none; 357 border-left: none; 358 background-color: var(--cell-bg, var(--background-site)); 359 color: var(--text-primary); 360 cursor: pointer; 361 padding: 3px; 362 position: relative; 363 vertical-align: top; 364 transition: background 0.1s; 365} 366 367/* Smaller cells on mobile */ 368@media (max-width: 600px) { 369 .calendar-compact-grid tbody td { 370 height: 45px; 371 min-height: 35px; 372 padding: 2px; 373 } 374 375 .calendar-compact-grid thead th { 376 height: 18px; 377 font-size: 9px; 378 } 379} 380 381.calendar-compact-grid tbody td:first-child { 382 border-left: 1px solid var(--border-color, #e8e8e8); 383} 384 385.calendar-compact-grid tbody td:hover { 386 background-color: var(--background-alt); 387} 388 389.cal-empty { 390 background: var(--background-site) !important; 391 cursor: default !important; 392} 393 394.cal-empty:hover { 395 background: var(--background-site) !important; 396} 397 398.cal-today { 399 background: var(--cell-today-bg) !important; 400 border: 2px solid var(--border-main) !important; 401} 402 403.cal-today:hover { 404 background: var(--cell-today-bg) !important; 405} 406 407.cal-has-events { 408} 409 410.cal-has-events:hover { 411} 412 413.day-num { 414 display: inline-block; 415 font-size: 11px; 416 font-weight: 500; 417 color: var(--text-primary); 418 padding: 1px 3px; 419} 420 421.day-num-today { 422 background: var(--border-main); 423 color: var(--btn-text, var(--background-site)); 424 border-radius: 2px; 425 font-weight: 600; 426} 427 428.cal-today .day-num { 429 border-radius: 2px; 430 font-weight: 600; 431} 432 433.event-indicators { 434 position: absolute; 435 left: 20px; 436 right: 0; 437 top: 20px; 438 bottom: 2px; 439 display: flex; 440 flex-direction: column; 441 gap: 2px; 442 pointer-events: none; 443} 444 445.event-bar { 446 width: 100%; 447 min-height: 6px; 448 height: 6px; 449 border-radius: 2px; 450 cursor: pointer; 451 pointer-events: auto; 452 transition: all 0.2s; 453 box-shadow: 0 1px 2px rgba(0,0,0,0.1); 454 position: relative; 455} 456 457.event-bar:hover { 458 transform: scaleY(1.3); 459 box-shadow: 0 2px 4px rgba(0,0,0,0.2); 460 z-index: 10; 461} 462 463.event-bar-no-time { 464 /* Events without time appear at top */ 465 order: -1; 466 opacity: 0.9; 467} 468 469.event-bar-timed { 470 /* Events with time are sorted by time */ 471 opacity: 0.95; 472} 473 474/* Multi-day event styling - creates visual continuity */ 475.event-bar-continues { 476 /* Event continues from previous day - extend left to cell edge */ 477 border-top-left-radius: 0; 478 border-bottom-left-radius: 0; 479 margin-left: -20px; 480 padding-left: 20px; 481} 482 483.event-bar-continuing { 484 /* Event continues to next day - extend right to cell edge */ 485 border-top-right-radius: 0; 486 border-bottom-right-radius: 0; 487 margin-right: -2px; 488 padding-right: 2px; 489} 490 491.event-bar-continues.event-bar-continuing { 492 /* Event continues both ways (middle of span) - no border radius, extends both sides */ 493 border-radius: 0; 494} 495 496/* Old event dot - removing */ 497.event-dot { 498 display: none; 499} 500 501/* Event list header - COMPACT */ 502.event-list-header { 503 display: flex; 504 align-items: center; 505 justify-content: space-between; 506 padding: 8px 10px; 507 border-bottom: 1px solid var(--header-border, var(--border-main, #e0e0e0)); 508 background: var(--background-header); 509} 510 511.event-list-header-content { 512 display: flex; 513 align-items: center; 514 gap: 6px; 515 flex: 1; 516} 517 518.event-list-header h4 { 519 margin: 0; 520 font-size: 12px; 521 font-weight: 600; 522 color: var(--text-primary); 523} 524 525.namespace-badge { 526 background: var(--border-main, #e8f5e9); 527 color: var(--btn-text, var(--background-site)); 528 padding: 2px 6px; 529 border-radius: 10px; 530 font-size: 9px; 531 font-weight: 600; 532 text-transform: uppercase; 533 letter-spacing: 0.3px; 534} 535 536/* Event search bar - inline in header */ 537.event-search-container-inline { 538 position: relative; 539 flex: 1; 540 max-width: 200px; 541 margin: 0 8px; 542} 543 544.event-search-input-inline { 545 width: 100%; 546 padding: 4px 24px 4px 8px; 547 border: 1px solid var(--border-color, #d0d0d0); 548 border-radius: 3px; 549 font-size: 11px; 550 outline: none; 551 transition: border-color 0.2s, box-shadow 0.2s; 552 background: var(--cell-bg); 553 color: var(--text-primary); 554} 555 556.event-search-input-inline:focus { 557 border-color: var(--border-main, #00cc07); 558 box-shadow: 0 0 0 2px var(--shadow-color, rgba(0, 204, 7, 0.1)); 559} 560 561.event-search-input-inline::placeholder { 562 color: var(--text-dim); 563 font-size: 10px; 564} 565 566.event-search-clear-inline { 567 position: absolute; 568 right: 4px; 569 top: 50%; 570 transform: translateY(-50%); 571 background: none; 572 border: none; 573 color: var(--text-dim); 574 cursor: pointer; 575 padding: 2px 4px; 576 font-size: 12px; 577 line-height: 1; 578 transition: color 0.2s; 579} 580 581.event-search-clear-inline:hover { 582 color: var(--text-primary); 583} 584 585.no-search-results { 586 text-align: center; 587 color: var(--text-dim); 588 font-size: 12px; 589 padding: 20px; 590 font-style: italic; 591} 592 593.add-event-compact { 594 background: var(--border-main); 595 color: var(--btn-text, var(--background-site)); 596 border: none; 597 padding: 4px 8px; 598 border-radius: 3px; 599 font-size: 11px; 600 font-weight: 500; 601 cursor: pointer; 602 transition: background 0.15s; 603} 604 605.add-event-compact:hover { 606 opacity: 0.9; 607} 608 609/* Event list scrollable area - COMPACT */ 610.event-list-compact { 611 flex: 1; 612 overflow-y: auto; 613 padding: 6px; 614 background: var(--background-site); 615} 616 617.event-list-compact::-webkit-scrollbar { 618 width: 6px; 619} 620 621.event-list-compact::-webkit-scrollbar-track { 622 background: var(--background-site, #f5f5f5); 623} 624 625.event-list-compact::-webkit-scrollbar-thumb { 626 background: var(--border-color, #ccc); 627 border-radius: 3px; 628} 629 630.event-list-compact::-webkit-scrollbar-thumb:hover { 631 background: var(--text-dim, #aaa); 632} 633 634/* Event items in list - SUPER COMPACT with checkbox on right */ 635.event-compact-item { 636 display: flex; 637 align-items: flex-start; 638 margin-bottom: 4px; 639 background-color: var(--cell-bg, var(--background-site)); 640 color: var(--text-primary); 641 border: 1px solid var(--border-color, #e0e0e0); 642 border-left: 3px solid #3498db; 643 border-radius: 3px; 644 padding: 5px 6px; 645 transition: box-shadow 0.15s, background 0.15s, transform 0.15s; 646 gap: 6px; 647 position: relative; 648} 649 650.event-compact-item:hover { 651 box-shadow: 0 1px 3px var(--shadow-color, rgba(0,0,0,0.08)); 652 background-color: var(--background-alt); 653} 654 655.event-highlighted { 656 animation: highlightPulse 0.6s ease-in-out; 657 background: #fff9e6 !important; 658 box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4) !important; 659} 660 661@keyframes highlightPulse { 662 0% { 663 background: #ffffff; 664 box-shadow: 0 0 0 rgba(255, 193, 7, 0); 665 } 666 50% { 667 background: #fffbea; 668 box-shadow: 0 4px 12px rgba(255, 193, 7, 0.6); 669 transform: scale(1.02); 670 } 671 100% { 672 background: #fff9e6; 673 box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4); 674 transform: scale(1); 675 } 676} 677 678.event-completed { 679 opacity: 0.55; 680 background: var(--background-alt, #f5f5f5); 681} 682 683.event-completed .event-title-compact { 684 text-decoration: line-through; 685 color: var(--text-dim, #999); 686} 687 688.event-past { 689 opacity: 0.35; 690 background: var(--background-site, #fafafa); 691 font-size: 10px; 692 padding: 3px 6px; 693 margin-bottom: 2px; 694 cursor: pointer; 695 transition: all 0.2s ease; 696} 697 698.event-past:hover { 699 opacity: 0.6; 700 background: var(--background-alt, #f5f5f5); 701} 702 703.event-past-expanded { 704 opacity: 0.8 !important; 705 background: var(--cell-bg, #f9f9f9) !important; 706 padding: 5px 6px !important; 707 font-size: 12px !important; 708} 709 710.event-past-expanded .event-title-compact { 711 font-size: 12px !important; 712 color: var(--text-dim, #666) !important; 713} 714 715.event-past-expanded .event-date-time { 716 font-size: 11px !important; 717 color: var(--text-dim, #888) !important; 718} 719 720.event-past .event-title-compact { 721 font-size: 10px; 722 color: var(--text-dim, #aaa); 723 font-weight: 400; 724} 725 726.event-past .event-date-time { 727 font-size: 9px; 728 color: var(--text-dim, #bbb); 729} 730 731.event-past .event-action-btn { 732 font-size: 11px; 733 opacity: 0.3; 734} 735 736.event-past .event-action-btn:hover { 737 opacity: 0.7; 738} 739 740.event-today-badge { 741 background: var(--border-main, #9b59b6); 742 color: var(--btn-text, white); 743 padding: 1px 4px; 744 border-radius: 3px; 745 font-size: 9px; 746 font-weight: 600; 747 letter-spacing: 0.5px; 748 display: inline-block; 749 vertical-align: middle; 750 margin-left: auto; /* Right-align */ 751 float: right; /* Force to right side */ 752} 753 754.event-pastdue-badge { 755 background: #ff9800; 756 color: #fff; 757 padding: 1px 4px; 758 border-radius: 3px; 759 font-size: 9px; 760 font-weight: 600; 761 letter-spacing: 0.5px; 762 display: inline-block; 763 vertical-align: middle; 764 margin-left: auto; /* Right-align */ 765 float: right; /* Force to right side */ 766} 767 768.event-pastdue { 769 border: 2px solid #e74c3c !important; 770 border-radius: 4px; 771 opacity: 1 !important; 772} 773 774.event-namespace-badge { 775 background: var(--border-main, #008800); 776 color: var(--btn-text, white); 777 padding: 1px 4px; 778 border-radius: 3px; 779 font-size: 9px; 780 font-weight: 500; 781 display: inline-block; 782 vertical-align: middle; 783 margin-left: 4px; 784 cursor: pointer; 785 transition: background 0.2s; 786} 787 788.event-namespace-badge:hover { 789 opacity: 0.85; 790} 791 792.event-conflict-badge { 793 background: #ff9800; 794 color: white; 795 padding: 0px 4px; 796 border-radius: 2px; 797 font-size: 9px; 798 display: inline-block; 799 vertical-align: middle; 800 margin-left: 3px; 801 cursor: help; 802 animation: pulse-warning 2s infinite; 803 line-height: 14px; 804} 805 806@keyframes pulse-warning { 807 0%, 100% { 808 opacity: 1; 809 } 810 50% { 811 opacity: 0.7; 812 } 813} 814 815.event-conflict-badge:hover { 816 background: #f57c00; 817 animation: none; 818} 819 820/* Custom conflict tooltip - SMALLER FOR MAIN CALENDAR */ 821.conflict-tooltip { 822 position: fixed; 823 z-index: 10000; 824 background: white; 825 border: 1px solid #ff9800; 826 border-radius: 3px; 827 box-shadow: 0 2px 6px rgba(0,0,0,0.2); 828 padding: 0; 829 min-width: 120px; 830 max-width: 200px; 831 opacity: 0; 832 transition: opacity 0.2s; 833 pointer-events: none; 834} 835 836/* Custom tooltip that appears above and to the left - FIXED POSITION */ 837[data-tooltip] { 838 position: relative; 839 cursor: help; 840} 841 842[data-tooltip]:before { 843 content: attr(data-tooltip); 844 position: fixed; 845 padding: 3px 6px; 846 background: rgba(0, 0, 0, 0.95); 847 color: #fff; 848 font-size: 9px; 849 line-height: 1.3; 850 white-space: pre-line; 851 border-radius: 3px; 852 opacity: 0; 853 pointer-events: none; 854 transition: opacity 0.2s; 855 min-width: 120px; 856 max-width: 200px; 857 z-index: 10000; 858 text-align: left; 859 box-shadow: 0 2px 8px rgba(0,0,0,0.3); 860} 861 862[data-tooltip]:hover:before { 863 opacity: 1; 864} 865 866/* Pink theme tooltips - with hearts! */ 867.sidebar-pink [data-tooltip]:before { 868 background: linear-gradient(135deg, #ff1493 0%, #ff69b4 100%); 869 color: #fff; 870 border: 2px solid #ff85c1; 871 box-shadow: 0 0 15px rgba(255, 20, 147, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4); 872 font-weight: 600; 873} 874 875.sidebar-pink [data-tooltip]:after { 876 content: '��'; 877 position: fixed; 878 font-size: 12px; 879 opacity: 0; 880 pointer-events: none; 881 transition: opacity 0.2s; 882 z-index: 10001; 883 filter: drop-shadow(0 0 3px rgba(255, 20, 147, 0.8)); 884} 885 886.sidebar-pink [data-tooltip]:hover:after { 887 opacity: 1; 888} 889 890/* Position data-tooltip with JavaScript for no cutoff */ 891.data-tooltip-positioned:before { 892 /* Position set by JavaScript */ 893} 894 895/* Allow sidebar to overflow for tooltips */ 896.sidebar-widget, 897.sidebar-matrix { 898 overflow: visible !important; 899} 900 901.conflict-tooltip-header { 902 background: #ff9800; 903 color: white; 904 padding: 4px 8px; 905 font-weight: 600; 906 font-size: 10px; 907 border-radius: 2px 2px 0 0; 908} 909 910.conflict-tooltip-body { 911 padding: 6px 8px; 912 font-size: 9px; 913 line-height: 1.4; 914} 915 916.conflict-item { 917 padding: 2px 0; 918 color: var(--text-primary, #333); 919 border-bottom: 1px solid var(--border-color, #f0f0f0); 920 font-size: 9px; 921} 922 923.conflict-item:last-child { 924 border-bottom: none; 925} 926 927.event-info { 928 flex: 1; 929 min-width: 0; 930 padding-right: 60px; 931 text-align: left; 932} 933 934.event-title-row { 935 display: flex; 936 align-items: center; 937 gap: 4px; 938} 939 940.event-title-compact { 941 font-size: 12px; 942 font-weight: 600; 943 color: var(--text-primary, #2c3e50); 944 overflow: hidden; 945 text-overflow: ellipsis; 946 white-space: nowrap; 947 text-align: left; 948} 949 950.event-meta-compact { 951 font-size: 10px; 952 color: var(--text-dim, #666); 953 margin-top: 1px; 954 text-align: left; 955} 956 957.event-date-time { 958 font-weight: 500; 959} 960 961.event-desc-compact { 962 font-size: 10px; 963 color: var(--text-dim, #666); 964 line-height: 1.4; 965 margin-top: 2px; 966 text-align: left; 967 word-wrap: break-word; 968 overflow-wrap: break-word; 969} 970 971.event-desc-compact img.event-image { 972 max-width: 100%; 973 height: auto; 974 margin: 4px 0; 975 border-radius: 3px; 976 display: block; 977} 978 979.event-desc-compact a { 980 color: var(--border-main, #008800); 981 text-decoration: none; 982 border-bottom: 1px dotted var(--border-main, #008800); 983} 984 985.event-desc-compact a:hover { 986 opacity: 0.8; 987 border-bottom-style: solid; 988} 989 990.event-desc-compact strong, 991.event-desc-compact b { 992 font-weight: 600; 993 color: var(--text-primary, #333); 994} 995 996.event-desc-compact em, 997.event-desc-compact i { 998 font-style: italic; 999} 1000 1001.event-desc-compact code { 1002 background: var(--background-alt, #f5f5f5); 1003 padding: 1px 3px; 1004 border-radius: 2px; 1005 font-family: monospace; 1006 font-size: 9px; 1007} 1008 1009.event-actions-compact { 1010 position: absolute; 1011 top: 5px; 1012 right: 24px; 1013 display: flex; 1014 gap: 2px; 1015 flex-shrink: 0; 1016} 1017 1018.event-action-btn { 1019 background: none; 1020 border: none; 1021 font-size: 14px; 1022 cursor: pointer; 1023 padding: 2px; 1024 opacity: 0.5; 1025 transition: opacity 0.15s, transform 0.15s; 1026} 1027 1028.event-action-btn:hover { 1029 opacity: 1; 1030 transform: scale(1.15); 1031} 1032 1033.task-checkbox { 1034 position: absolute; 1035 top: 5px; 1036 right: 6px; 1037 width: 16px; 1038 height: 16px; 1039 margin: 0; 1040 cursor: pointer; 1041 flex-shrink: 0; 1042} 1043 1044.no-events-msg { 1045 text-align: center; 1046 color: var(--text-dim, #999); 1047 font-size: 12px; 1048 font-style: italic; 1049 padding: 40px 20px; 1050} 1051 1052/* Sleek Event Dialog - FULLY RESPONSIVE */ 1053.event-dialog-compact { 1054 position: fixed; 1055 top: 0; 1056 left: 0; 1057 width: 100%; 1058 height: 100%; 1059 z-index: 9999; 1060 display: flex; 1061 align-items: center; 1062 justify-content: center; 1063 animation: fadeIn 0.2s ease; 1064 padding: 20px; 1065 box-sizing: border-box; 1066 overflow-y: auto; 1067} 1068 1069@keyframes fadeIn { 1070 from { opacity: 0; } 1071 to { opacity: 1; } 1072} 1073 1074.dialog-content-sleek { 1075 position: relative; 1076 background: var(--background-site, #ffffff); 1077 border: 2px solid var(--border-main, #d0d0d0); 1078 box-shadow: 0 0 20px var(--shadow-color, rgba(0,0,0,0.2)); 1079 width: 100%; 1080 max-width: 450px; 1081 max-height: calc(100vh - 40px); 1082 border-radius: 8px; 1083 z-index: 10000; 1084 animation: slideUp 0.3s ease; 1085 overflow: hidden; 1086 display: flex; 1087 flex-direction: column; 1088 margin: auto; 1089} 1090 1091/* Mobile responsive dialog */ 1092@media (max-width: 768px) { 1093 .event-dialog-compact { 1094 padding: 10px; 1095 } 1096 1097 .dialog-content-sleek { 1098 max-width: 100%; 1099 width: calc(100% - 20px); 1100 max-height: calc(100vh - 20px); 1101 } 1102} 1103 1104@media (max-width: 480px) { 1105 .event-dialog-compact { 1106 padding: 0; 1107 align-items: flex-start; 1108 } 1109 1110 .dialog-content-sleek { 1111 width: 100%; 1112 max-width: 100%; 1113 max-height: 100vh; 1114 border-radius: 0; 1115 margin: 0; 1116 } 1117} 1118 1119@keyframes slideUp { 1120 from { 1121 transform: translateY(20px); 1122 opacity: 0; 1123 } 1124 to { 1125 transform: translateY(0); 1126 opacity: 1; 1127 } 1128} 1129 1130.dialog-header-sleek { 1131 display: flex; 1132 align-items: center; 1133 justify-content: space-between; 1134 padding: 10px 14px; 1135 background: var(--background-header, #2c3e50); 1136 color: var(--text-primary, white); 1137 border-bottom: 1px solid var(--border-main, transparent); 1138 cursor: move; 1139 flex-shrink: 0; 1140} 1141 1142.dialog-drag-handle { 1143 cursor: move; 1144} 1145 1146.dialog-header-sleek h3 { 1147 margin: 0; 1148 font-size: 15px; 1149 font-weight: 600; 1150 color: var(--text-primary, white); 1151} 1152 1153.dialog-close-btn { 1154 background: rgba(255,255,255,0.2); 1155 border: none; 1156 color: var(--text-primary, white); 1157 font-size: 22px; 1158 width: 28px; 1159 height: 28px; 1160 border-radius: 50%; 1161 cursor: pointer; 1162 display: flex; 1163 align-items: center; 1164 justify-content: center; 1165 transition: all 0.2s; 1166 line-height: 1; 1167 padding: 0; 1168 flex-shrink: 0; 1169} 1170 1171.dialog-close-btn:hover { 1172 background: rgba(255,255,255,0.3); 1173 transform: scale(1.1); 1174} 1175 1176.sleek-form { 1177 padding: 10px 12px; 1178 overflow-y: auto; 1179 overflow-x: hidden; 1180 flex: 1; 1181 max-height: calc(100vh - 160px); 1182 background: var(--background-site, #fff); 1183} 1184 1185/* Ensure form is scrollable on small screens */ 1186@media (max-height: 600px) { 1187 .sleek-form { 1188 max-height: calc(100vh - 120px); 1189 } 1190} 1191 1192@media (max-height: 500px) { 1193 .sleek-form { 1194 max-height: calc(100vh - 100px); 1195 } 1196} 1197 1198.form-field { 1199 margin-bottom: 6px; 1200} 1201 1202/* Compact form elements */ 1203.input-compact { 1204 height: 30px !important; 1205 padding: 4px 8px !important; 1206 font-size: 11px !important; 1207} 1208 1209.textarea-compact { 1210 min-height: 28px !important; 1211 padding: 4px 8px !important; 1212 font-size: 11px !important; 1213 line-height: 1.3 !important; 1214} 1215 1216.field-label-compact { 1217 font-size: 10px !important; 1218 margin-bottom: 2px !important; 1219 font-weight: 500; 1220 color: var(--text-primary, #555); 1221} 1222 1223.form-field-checkbox-compact { 1224 padding: 4px 8px !important; 1225 margin-bottom: 6px !important; 1226} 1227 1228.checkbox-label-compact { 1229 font-size: 10px !important; 1230 gap: 4px !important; 1231} 1232 1233.checkbox-label-compact input[type="checkbox"] { 1234 width: 13px !important; 1235 height: 13px !important; 1236} 1237 1238.color-picker-compact { 1239 height: 30px !important; 1240} 1241 1242/* Responsive form fields */ 1243@media (max-width: 480px) { 1244 .form-field { 1245 margin-bottom: 8px; 1246 } 1247} 1248 1249.form-field-checkbox { 1250 background: var(--background-site, #f1f8f4); 1251 padding: 8px; 1252 border-radius: 4px; 1253 border: 1px solid var(--border-color, #008800); 1254} 1255 1256.checkbox-label { 1257 display: flex; 1258 align-items: center; 1259 gap: 6px; 1260 cursor: pointer; 1261 font-size: 11px; 1262 font-weight: 500; 1263 color: var(--text-primary, #388e3c); 1264} 1265 1266.checkbox-label input[type="checkbox"] { 1267 width: 15px; 1268 height: 15px; 1269 cursor: pointer; 1270 accent-color: var(--border-main); 1271} 1272 1273.recurring-options { 1274 background: var(--background-site, #f1f8f4); 1275 padding: 8px; 1276 border-radius: 4px; 1277 border: 1px solid var(--border-color, #81c784); 1278 border-left: 2px solid var(--border-main, #008800); 1279 margin-left: 4px; 1280 margin-top: 8px; 1281} 1282 1283.form-row-group { 1284 display: grid; 1285 grid-template-columns: 1fr 1fr; 1286 gap: 10px; 1287 margin-bottom: 10px; 1288} 1289 1290@media (max-width: 768px) { 1291 .form-row-group { 1292 grid-template-columns: 1fr; 1293 gap: 8px; 1294 } 1295} 1296 1297.field-label { 1298 display: block; 1299 font-size: 11px; 1300 font-weight: 600; 1301 color: var(--text-primary, #2c3e50); 1302 margin-bottom: 5px; 1303 text-transform: uppercase; 1304 letter-spacing: 0.3px; 1305} 1306 1307@media (max-width: 480px) { 1308 .field-label { 1309 font-size: 10px; 1310 } 1311} 1312 1313.input-sleek { 1314 width: 100%; 1315 padding: 8px 10px; 1316 border: 2px solid var(--border-color, #e0e0e0); 1317 border-radius: 4px; 1318 font-size: 13px; 1319 font-family: inherit; 1320 transition: all 0.2s; 1321 background: var(--cell-bg, #fafafa); 1322 color: var(--text-primary, #333); 1323 box-sizing: border-box; 1324} 1325 1326.input-sleek:focus { 1327 outline: none; 1328 border-color: var(--border-main, #008800); 1329 background: var(--cell-bg, white); 1330 box-shadow: 0 0 0 3px var(--shadow-color, rgba(33, 150, 243, 0.1)); 1331} 1332 1333.input-date { 1334 font-weight: 500; 1335 color: var(--text-primary, #2c3e50); 1336 cursor: pointer; 1337} 1338 1339.input-date::-webkit-calendar-picker-indicator { 1340 cursor: pointer; 1341 font-size: 14px; 1342 padding: 2px; 1343} 1344 1345.textarea-sleek { 1346 resize: vertical; 1347 min-height: 60px; 1348 line-height: 1.4; 1349} 1350 1351.color-picker-container { 1352 display: flex; 1353 align-items: center; 1354 gap: 10px; 1355} 1356 1357.color-picker-wrapper { 1358 display: flex; 1359 align-items: center; 1360 gap: 8px; 1361} 1362 1363.color-picker-wrapper .color-select { 1364 flex: 1; 1365} 1366 1367.color-picker-input { 1368 width: 45px; 1369 height: 38px; 1370 border: 2px solid var(--border-color, #e0e0e0); 1371 border-radius: 6px; 1372 cursor: pointer; 1373 padding: 2px; 1374 display: none; 1375} 1376 1377.color-picker-input:hover { 1378 border-color: var(--border-main, #4CAF50); 1379} 1380 1381.input-color-sleek { 1382 width: 50px; 1383 height: 38px; 1384 border: 2px solid var(--border-color, #e0e0e0); 1385 border-radius: 6px; 1386 cursor: pointer; 1387 transition: all 0.2s; 1388} 1389 1390.input-color-sleek:hover { 1391 border-color: var(--border-main, #008800); 1392 transform: scale(1.05); 1393} 1394 1395.color-label { 1396 font-size: 11px; 1397 color: var(--text-dim, #666); 1398} 1399 1400.form-row-group { 1401 display: grid; 1402 grid-template-columns: 2fr 1fr; 1403 gap: 16px; 1404 margin-bottom: 20px; 1405} 1406 1407.field-label { 1408 display: block; 1409 font-size: 13px; 1410 font-weight: 600; 1411 color: var(--text-primary, #2c3e50); 1412 margin-bottom: 8px; 1413 text-transform: uppercase; 1414 letter-spacing: 0.5px; 1415} 1416 1417.input-sleek { 1418 width: 100%; 1419 padding: 12px 16px; 1420 border: 2px solid var(--border-color, #e0e0e0); 1421 border-radius: 8px; 1422 font-size: 15px; 1423 font-family: inherit; 1424 transition: all 0.2s; 1425 background: var(--cell-bg, #fafafa); 1426 color: var(--text-primary, #333); 1427 box-sizing: border-box; 1428} 1429 1430.input-sleek:focus { 1431 outline: none; 1432 border-color: var(--border-main, #667eea); 1433 background: var(--cell-bg, white); 1434 box-shadow: 0 0 0 3px var(--shadow-color, rgba(102, 126, 234, 0.1)); 1435} 1436 1437.input-date { 1438 font-weight: 500; 1439 color: var(--text-primary, #2c3e50); 1440 cursor: pointer; 1441} 1442 1443.input-date::-webkit-calendar-picker-indicator { 1444 cursor: pointer; 1445 font-size: 18px; 1446 padding: 4px; 1447} 1448 1449.textarea-sleek { 1450 resize: vertical; 1451 min-height: 80px; 1452 line-height: 1.5; 1453} 1454 1455.color-picker-container { 1456 display: flex; 1457 align-items: center; 1458 gap: 12px; 1459} 1460 1461.input-color-sleek { 1462 width: 60px; 1463 height: 44px; 1464 border: 2px solid var(--border-color, #e0e0e0); 1465 border-radius: 8px; 1466 cursor: pointer; 1467 transition: all 0.2s; 1468} 1469 1470.input-color-sleek:hover { 1471 border-color: var(--border-main, #667eea); 1472 transform: scale(1.05); 1473} 1474 1475.color-label { 1476 font-size: 13px; 1477 color: var(--text-dim, #666); 1478} 1479 1480.form-field-checkbox { 1481 background: var(--background-site, #f1f8f4); 1482 padding: 12px; 1483 border-radius: 6px; 1484 border: 1px solid var(--border-color, #008800); 1485} 1486 1487.checkbox-label { 1488 display: flex; 1489 align-items: center; 1490 gap: 8px; 1491 cursor: pointer; 1492 font-size: 13px; 1493 font-weight: 500; 1494 color: var(--text-primary, #388e3c); 1495} 1496 1497.checkbox-label input[type="checkbox"] { 1498 width: 18px; 1499 height: 18px; 1500 cursor: pointer; 1501} 1502 1503.form-row-group { 1504 display: grid; 1505 grid-template-columns: 1fr 1fr; 1506 gap: 12px; 1507 margin-bottom: 16px; 1508} 1509 1510@media (max-width: 768px) { 1511 .form-row-group { 1512 grid-template-columns: 1fr; 1513 } 1514} 1515 1516.dialog-actions-sleek { 1517 display: flex; 1518 gap: 8px; 1519 padding: 12px 14px; 1520 background: var(--background-site, #f8f9fa); 1521 border-top: 1px solid var(--border-color, #e0e0e0); 1522 justify-content: flex-end; 1523 flex-shrink: 0; 1524} 1525 1526/* Ensure buttons are visible on small screens */ 1527@media (max-width: 480px) { 1528 .dialog-actions-sleek { 1529 padding: 10px; 1530 } 1531 1532 .btn-sleek { 1533 flex: 1; 1534 justify-content: center; 1535 } 1536} 1537 1538.btn-sleek { 1539 padding: 7px 14px; 1540 border: none; 1541 border-radius: 4px; 1542 font-size: 12px; 1543 font-weight: 600; 1544 cursor: pointer; 1545 transition: all 0.2s; 1546 display: inline-flex; 1547 align-items: center; 1548 gap: 4px; 1549} 1550 1551.btn-cancel-sleek { 1552 background: var(--cell-bg, #e0e0e0); 1553 color: var(--text-primary, #555); 1554 border: 1px solid var(--border-color, #d0d0d0); 1555} 1556 1557.btn-cancel-sleek:hover { 1558 opacity: 0.85; 1559} 1560 1561.btn-save-sleek { 1562 background: var(--border-main, #008800); 1563 color: var(--btn-text, white); 1564 border: 1px solid var(--border-main, #008800); 1565 box-shadow: 0 2px 4px var(--shadow-color, rgba(33, 150, 243, 0.3)); 1566} 1567 1568.btn-save-sleek:hover { 1569 opacity: 0.9; 1570 box-shadow: 0 4px 8px var(--shadow-color, rgba(33, 150, 243, 0.4)); 1571} 1572 1573.btn-save-sleek:active { 1574 transform: translateY(1px); 1575} 1576 1577/* Day popup */ 1578.day-popup { 1579 position: fixed; 1580 top: 0; 1581 left: 0; 1582 width: 100%; 1583 height: 100%; 1584 z-index: 10000; 1585 display: flex; 1586 align-items: center; 1587 justify-content: center; 1588 padding: 20px; 1589 box-sizing: border-box; 1590} 1591 1592.day-popup-overlay { 1593 position: absolute; 1594 top: 0; 1595 left: 0; 1596 width: 100%; 1597 height: 100%; 1598 background: rgba(0,0,0,0.5); 1599} 1600 1601.day-popup-content { 1602 position: relative; 1603 background: var(--background-site, white); 1604 border: 2px solid var(--border-main, #d0d0d0); 1605 box-shadow: 0 0 20px var(--shadow-color, rgba(0,0,0,0.3)); 1606 width: 100%; 1607 max-width: 450px; 1608 max-height: calc(100vh - 40px); 1609 border-radius: 8px; 1610 z-index: 10001; 1611 display: flex; 1612 flex-direction: column; 1613} 1614 1615/* Responsive day popup */ 1616@media (max-width: 768px) { 1617 .day-popup { 1618 padding: 10px; 1619 } 1620 1621 .day-popup-content { 1622 max-width: 100%; 1623 max-height: calc(100vh - 20px); 1624 } 1625} 1626 1627@media (max-width: 480px) { 1628 .day-popup { 1629 padding: 0; 1630 } 1631 1632 .day-popup-content { 1633 width: 100%; 1634 max-width: 100%; 1635 max-height: 100vh; 1636 border-radius: 0; 1637 } 1638} 1639 1640.day-popup-header { 1641 display: flex; 1642 align-items: center; 1643 justify-content: space-between; 1644 padding: 10px 14px; 1645 border-bottom: 1px solid var(--border-main, #e0e0e0); 1646 background: var(--background-header, #fafafa); 1647 border-radius: 8px 8px 0 0; 1648} 1649 1650.day-popup-header h4 { 1651 margin: 0; 1652 font-size: 15px; 1653 font-weight: 600; 1654 color: var(--text-primary, #2c3e50); 1655} 1656 1657.popup-close { 1658 background: none; 1659 border: none; 1660 font-size: 24px; 1661 color: var(--text-primary, #999); 1662 cursor: pointer; 1663 width: 28px; 1664 height: 28px; 1665 display: flex; 1666 align-items: center; 1667 justify-content: center; 1668 border-radius: 4px; 1669 transition: all 0.15s; 1670 line-height: 1; 1671 padding: 0; 1672} 1673 1674.popup-close:hover { 1675 opacity: 0.7; 1676} 1677 1678.day-popup-body { 1679 flex: 1; 1680 overflow-y: auto; 1681 padding: 10px 14px; 1682 max-height: 400px; 1683 background: var(--background-site); 1684} 1685 1686.popup-events-list { 1687 display: flex; 1688 flex-direction: column; 1689 gap: 6px; 1690} 1691 1692.popup-continuation-notice { 1693 font-size: 10px; 1694 color: var(--text-dim, #666); 1695 background: var(--background-alt, #f0f0f0); 1696 padding: 3px 8px; 1697 border-radius: 3px; 1698 margin-bottom: 4px; 1699 border-left: 3px solid var(--border-main, #00cc07); 1700 font-weight: 500; 1701} 1702 1703.popup-event-item { 1704 display: flex; 1705 background: var(--cell-bg, #f8f9fa); 1706 border: 1px solid var(--border-color, #e0e0e0); 1707 border-radius: 4px; 1708 overflow: hidden; 1709 transition: box-shadow 0.15s; 1710} 1711 1712.popup-event-item:hover { 1713 box-shadow: 0 2px 6px rgba(0,0,0,0.1); 1714} 1715 1716.popup-event-content { 1717 flex: 1; 1718 padding: 6px 10px; 1719} 1720 1721.popup-event-main-row { 1722 display: flex; 1723 align-items: center; 1724 justify-content: space-between; 1725 gap: 8px; 1726} 1727 1728.popup-event-info-inline { 1729 display: flex; 1730 align-items: center; 1731 gap: 8px; 1732 flex: 1; 1733 min-width: 0; 1734} 1735 1736.popup-event-title { 1737 font-size: 13px; 1738 font-weight: 600; 1739 color: var(--text-primary, #2c3e50); 1740 white-space: nowrap; 1741 overflow: hidden; 1742 text-overflow: ellipsis; 1743 flex-shrink: 1; 1744} 1745 1746.popup-event-time { 1747 font-size: 11px; 1748 color: var(--text-dim, #008800); 1749 font-weight: 500; 1750 white-space: nowrap; 1751 flex-shrink: 0; 1752} 1753 1754.popup-event-multiday { 1755 font-size: 11px; 1756 color: var(--text-dim, #666); 1757 font-weight: 500; 1758 white-space: nowrap; 1759 flex-shrink: 0; 1760} 1761 1762.popup-event-namespace { 1763 font-size: 10px; 1764 color: var(--btn-text, #fff); 1765 background: var(--border-main, #008800); 1766 padding: 2px 6px; 1767 border-radius: 3px; 1768 font-weight: 500; 1769 white-space: nowrap; 1770 flex-shrink: 0; 1771} 1772 1773.popup-event-desc { 1774 font-size: 11px; 1775 color: var(--text-dim, #666); 1776 line-height: 1.4; 1777 margin-top: 4px; 1778 padding-left: 0; 1779} 1780 1781.popup-event-actions { 1782 display: flex; 1783 gap: 4px; 1784 flex-shrink: 0; 1785} 1786 1787.event-edit-btn, 1788.event-delete-btn { 1789 background: none; 1790 border: none; 1791 font-size: 16px; 1792 cursor: pointer; 1793 padding: 4px; 1794 border-radius: 3px; 1795 transition: background 0.15s; 1796 line-height: 1; 1797 width: 24px; 1798 height: 24px; 1799 display: flex; 1800 align-items: center; 1801 justify-content: center; 1802} 1803 1804.event-edit-btn:hover { 1805 background: var(--background-alt, #e8f5e9); 1806} 1807 1808.event-delete-btn:hover { 1809 background: var(--background-alt, #ffebee); 1810} 1811 1812.day-popup-footer { 1813 padding: 10px 14px; 1814 border-top: 1px solid var(--border-color, #e0e0e0); 1815 background: var(--background-site, #fafafa); 1816 border-radius: 0 0 8px 8px; 1817} 1818 1819.btn-add-event { 1820 width: 100%; 1821 background: var(--border-main, #008800); 1822 color: var(--btn-text, white); 1823 border: 1px solid var(--border-main, #008800); 1824 padding: 10px 16px; 1825 border-radius: 6px; 1826 font-size: 14px; 1827 font-weight: 500; 1828 cursor: pointer; 1829 transition: opacity 0.15s; 1830} 1831 1832.btn-add-event:hover { 1833 opacity: 0.9; 1834} 1835 1836.dialog-overlay { 1837 position: absolute; 1838 top: 0; 1839 left: 0; 1840 width: 100%; 1841 height: 100%; 1842 background: rgba(0,0,0,0.4); 1843} 1844 1845.dialog-content-compact { 1846 position: relative; 1847 background: var(--background-site, white); 1848 width: 400px; 1849 border-radius: 6px; 1850 box-shadow: 0 4px 12px var(--shadow-color, rgba(0,0,0,0.2)); 1851 padding: 20px; 1852 z-index: 10000; 1853} 1854 1855.dialog-content-compact h4 { 1856 margin: 0 0 16px 0; 1857 font-size: 16px; 1858 font-weight: 600; 1859 color: var(--text-primary, #2c3e50); 1860} 1861 1862.form-row { 1863 margin-bottom: 14px; 1864} 1865 1866.form-row-date { 1867 background: var(--background-site, #f1f8f4); 1868 padding: 10px; 1869 border-radius: 6px; 1870 border: 2px solid var(--border-main, #008800); 1871 margin-bottom: 18px; 1872} 1873 1874.form-row-date label { 1875 color: var(--text-primary, #388e3c); 1876 font-size: 13px; 1877} 1878 1879.form-row label { 1880 display: block; 1881 font-size: 12px; 1882 font-weight: 600; 1883 color: var(--text-primary, #555); 1884 margin-bottom: 4px; 1885} 1886 1887.form-row input[type="text"], 1888.form-row input[type="time"], 1889.form-row input[type="date"], 1890.form-row input[type="color"], 1891.form-row textarea { 1892 width: 100%; 1893 padding: 8px; 1894 border: 1px solid var(--border-color, #d0d0d0); 1895 border-radius: 4px; 1896 font-size: 13px; 1897 box-sizing: border-box; 1898 font-family: inherit; 1899 background: var(--cell-bg, #fff); 1900 color: var(--text-primary, #333); 1901} 1902 1903.form-row input[type="color"] { 1904 height: 36px; 1905 padding: 2px; 1906} 1907 1908.form-row textarea { 1909 resize: vertical; 1910} 1911 1912.dialog-actions { 1913 display: flex; 1914 gap: 8px; 1915 justify-content: flex-end; 1916 margin-top: 16px; 1917} 1918 1919.btn-save, 1920.btn-cancel { 1921 padding: 8px 16px; 1922 border: none; 1923 border-radius: 4px; 1924 font-size: 13px; 1925 font-weight: 500; 1926 cursor: pointer; 1927 transition: all 0.15s; 1928} 1929 1930.btn-save { 1931 background: var(--border-main, #008800); 1932 color: var(--btn-text, white); 1933} 1934 1935.btn-save:hover { 1936 opacity: 0.9; 1937} 1938 1939.btn-cancel { 1940 background: var(--cell-bg, #f5f5f5); 1941 color: var(--text-primary, #555); 1942 border: 1px solid var(--border-color, #d0d0d0); 1943} 1944 1945.btn-cancel:hover { 1946 opacity: 0.85; 1947} 1948 1949/* Standalone event list */ 1950.eventlist-standalone { 1951 max-width: 700px; 1952 margin: 20px auto; 1953 background: white; 1954 border: 1px solid #d0d0d0; 1955 border-radius: 6px; 1956 padding: 20px; 1957} 1958 1959.eventlist-standalone h3 { 1960 margin: 0 0 20px 0; 1961 font-size: 18px; 1962 font-weight: 600; 1963 color: #2c3e50; 1964 border-bottom: 2px solid #008800; 1965 padding-bottom: 10px; 1966} 1967 1968/* Compact Event List Widget */ 1969.eventlist-compact-widget { 1970 background: #ffffff; 1971 border: 1px solid #d0d0d0; 1972 border-radius: 6px; 1973 box-shadow: 0 2px 6px rgba(0,0,0,0.08); 1974 overflow: visible; 1975 display: flex; 1976 flex-direction: column; 1977 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 1978} 1979 1980/* Simple 2-Line Event List (New Design) */ 1981.eventlist-simple { 1982 width: 100%; 1983 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 1984 font-size: 11px; 1985 line-height: 1.4; 1986 overflow: visible; 1987} 1988 1989/* Compact pastel header for {{eventlist today}} - Single line */ 1990.eventlist-today-header { 1991 display: flex; 1992 flex-direction: column; 1993 align-items: center; 1994 padding: 6px 10px 2px 10px; 1995 background: #1a1a1a; 1996 color: #00cc07; 1997 border: 2px solid #00cc07; 1998 border-radius: 4px; 1999 margin-bottom: 8px; 2000 box-shadow: 0 0 8px rgba(0, 204, 7, 0.2); 2001 gap: 3px; 2002 overflow: visible; 2003} 2004 2005/* Purple theme overrides */ 2006.sidebar-purple .eventlist-today-header { 2007 border-color: #9b59b6; 2008 box-shadow: 0 0 8px rgba(155, 89, 182, 0.2); 2009} 2010 2011/* Professional theme overrides */ 2012.sidebar-professional .eventlist-today-header { 2013 border-color: #4a90e2; 2014 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 2015} 2016 2017/* Pink theme overrides */ 2018.sidebar-pink .eventlist-today-header { 2019 border-color: #ff1493; 2020 box-shadow: 0 0 10px rgba(255, 20, 147, 0.4); 2021} 2022 2023.eventlist-bottom-info { 2024 display: flex; 2025 justify-content: space-between; 2026 align-items: center; 2027 width: 100%; 2028 gap: 10px; 2029 overflow: visible; 2030} 2031 2032.eventlist-weather { 2033 font-size: 13px; 2034 font-weight: 700; 2035 font-family: 'Courier New', monospace; 2036 letter-spacing: 0.3px; 2037 text-shadow: 0 0 4px rgba(0, 204, 7, 0.4); 2038 color: #00cc07; 2039 white-space: nowrap; 2040} 2041 2042.eventlist-today-date { 2043 font-size: 10px; 2044 font-weight: 700; 2045 color: #00cc07; 2046 letter-spacing: 0.5px; 2047 white-space: nowrap; 2048 text-transform: uppercase; 2049 text-align: center; 2050 flex: 1; 2051} 2052 2053.eventlist-today-clock { 2054 font-size: 16px; 2055 font-weight: 700; 2056 font-family: 'Courier New', monospace; 2057 letter-spacing: 1px; 2058 text-shadow: 0 0 6px rgba(0, 204, 7, 0.5); 2059 color: #00cc07; 2060} 2061 2062.eventlist-stats-container { 2063 width: 100%; 2064 display: flex; 2065 flex-direction: column; 2066 gap: 2px; 2067 margin: 0; 2068 overflow: visible; 2069} 2070 2071.eventlist-cpu-bar { 2072 width: 100%; 2073 height: 3px; 2074 background: rgba(0, 204, 7, 0.1); 2075 border-radius: 1px; 2076 overflow: visible; 2077 position: relative; 2078 cursor: help; 2079} 2080 2081.system-tooltip { 2082 position: fixed; 2083 background: rgba(0, 0, 0, 0.95); 2084 padding: 6px 8px; 2085 border-radius: 4px; 2086 font-size: 9px; 2087 line-height: 1.3; 2088 white-space: normal; 2089 min-width: 150px; 2090 max-width: 250px; 2091 z-index: 999999; 2092 border: 1px solid; 2093 box-shadow: 0 3px 8px rgba(0,0,0,0.5); 2094 pointer-events: none; 2095 /* Position will be set by JavaScript */ 2096} 2097 2098.system-tooltip div { 2099 font-size: 9px !important; 2100 line-height: 1.3 !important; 2101 margin: 0; 2102} 2103 2104.system-tooltip .tooltip-title { 2105 font-weight: bold; 2106 margin-bottom: 2px; 2107} 2108 2109.eventlist-cpu-fill { 2110 height: 100%; 2111 background: #00cc07; 2112 transition: width 0.3s ease; 2113 box-shadow: 0 0 4px rgba(0, 204, 7, 0.6); 2114} 2115 2116.eventlist-cpu-fill-purple { 2117 background: #9b59b6; 2118 box-shadow: 0 0 4px rgba(155, 89, 182, 0.6); 2119} 2120 2121.eventlist-cpu-fill-orange { 2122 background: #ff8c00; 2123 box-shadow: 0 0 4px rgba(255, 140, 0, 0.6); 2124} 2125 2126/* Pink theme system bars - different shades of pink */ 2127.sidebar-pink .eventlist-cpu-fill { 2128 background: #ff1493; /* Hot pink for 5-min load */ 2129 box-shadow: 0 0 5px rgba(255, 20, 147, 0.7); 2130} 2131 2132.sidebar-pink .eventlist-cpu-fill-purple { 2133 background: #ff69b4; /* Pink for realtime CPU */ 2134 box-shadow: 0 0 5px rgba(255, 105, 180, 0.7); 2135} 2136 2137.sidebar-pink .eventlist-cpu-fill-orange { 2138 background: #ff85c1; /* Light pink for memory */ 2139 box-shadow: 0 0 5px rgba(255, 133, 193, 0.7); 2140} 2141 2142.sidebar-pink .eventlist-cpu-realtime { 2143 background: rgba(255, 20, 147, 0.1); 2144} 2145 2146.sidebar-pink .eventlist-mem-realtime { 2147 background: rgba(255, 133, 193, 0.1); 2148} 2149 2150.eventlist-cpu-realtime { 2151 background: rgba(155, 89, 182, 0.1); 2152} 2153 2154.eventlist-mem-realtime { 2155 background: rgba(255, 140, 0, 0.1); 2156} 2157 2158.eventlist-simple-item { 2159 border-bottom: 1px solid #e0e0e0; 2160 padding: 0; 2161} 2162 2163.eventlist-simple-item:last-child { 2164 border-bottom: none; 2165} 2166 2167.eventlist-simple-today { 2168 background: #f3eeff !important; 2169 border-left: 3px solid #9b59b6 !important; 2170} 2171 2172.eventlist-simple-today .eventlist-simple-header { 2173 background: #e8d9ff !important; 2174} 2175 2176.eventlist-simple-today .eventlist-simple-body { 2177 background: #f9f5ff !important; 2178} 2179 2180.eventlist-simple-today-badge { 2181 background: #9b59b6; 2182 color: white; 2183 padding: 1px 4px; 2184 border-radius: 3px; 2185 font-size: 9px; 2186 font-weight: 600; 2187 letter-spacing: 0.5px; 2188 display: inline-block; 2189 vertical-align: middle; 2190 float: right; /* Right-align */ 2191 margin-left: auto; 2192} 2193 2194.eventlist-simple-pastdue { 2195 background: #ffe6e6 !important; 2196 border-left: 3px solid #e74c3c !important; 2197} 2198 2199.eventlist-simple-pastdue .eventlist-simple-header { 2200 background: #ffd9d9 !important; 2201} 2202 2203.eventlist-simple-pastdue .eventlist-simple-body { 2204 background: #fff2f2 !important; 2205} 2206 2207.eventlist-simple-pastdue-badge { 2208 background: #e74c3c; 2209 color: white; 2210 padding: 1px 4px; 2211 border-radius: 3px; 2212 font-size: 9px; 2213 font-weight: 600; 2214 letter-spacing: 0.5px; 2215 display: inline-block; 2216 vertical-align: middle; 2217 float: right; /* Right-align */ 2218 margin-left: auto; 2219} 2220 2221.eventlist-simple-tomorrow { 2222 background: #fff9e6 !important; 2223} 2224 2225.eventlist-simple-tomorrow .eventlist-simple-header { 2226 background: #fff4cc !important; 2227} 2228 2229.eventlist-simple-tomorrow .eventlist-simple-body { 2230 background: #fffbf0 !important; 2231} 2232 2233.eventlist-simple-header { 2234 font-weight: 500; 2235 color: #2c3e50; 2236 padding: 4px 6px; 2237 line-height: 1.5; 2238 background: #f5fcf5; 2239 font-size: 11px; 2240} 2241 2242.eventlist-simple-title { 2243 font-weight: 700; 2244 color: #ff6600; 2245 font-size: 12px; 2246} 2247 2248.eventlist-simple-time { 2249 color: #666; 2250 font-size: 10px; 2251} 2252 2253.eventlist-simple-date { 2254 color: #888; 2255 font-size: 10px; 2256} 2257 2258.eventlist-simple-namespace { 2259 background: #e8f5e9; 2260 color: #388e3c; 2261 padding: 1px 4px; 2262 border-radius: 3px; 2263 font-size: 9px; 2264 font-weight: 500; 2265 margin-left: 4px; 2266} 2267 2268.eventlist-simple-body { 2269 color: #555; 2270 font-size: 11px; 2271 line-height: 1.5; 2272 padding: 4px 6px; 2273 background: #fff; 2274} 2275 2276.eventlist-simple-body a { 2277 color: #008800; 2278 text-decoration: none; 2279} 2280 2281.eventlist-simple-body a:hover { 2282 text-decoration: underline; 2283} 2284 2285.eventlist-simple-body strong { 2286 font-weight: 600; 2287 color: #2c3e50; 2288} 2289 2290.eventlist-simple-body code { 2291 background: #f5f5f5; 2292 padding: 1px 3px; 2293 border-radius: 3px; 2294 font-family: 'Courier New', monospace; 2295 font-size: 10px; 2296} 2297 2298.eventlist-simple-no-desc { 2299 display: none; 2300} 2301 2302.eventlist-simple-empty { 2303 padding: 10px 0; 2304 color: #999; 2305} 2306 2307.eventlist-simple-empty .eventlist-simple-header { 2308 margin-bottom: 4px; 2309 background: #f5fcf5; 2310} 2311 2312.eventlist-simple-empty .eventlist-simple-body { 2313 color: #999; 2314 font-style: italic; 2315 padding: 4px 6px; 2316 font-size: 11px; 2317} 2318 2319.eventlist-widget-header { 2320 background: #008800; 2321 color: white; 2322 padding: 8px 12px; 2323 flex-shrink: 0; 2324} 2325 2326.eventlist-widget-header h4 { 2327 margin: 0; 2328 font-size: 13px; 2329 font-weight: 600; 2330} 2331 2332.eventlist-widget-content { 2333 overflow-y: auto; 2334 padding: 8px; 2335 flex: 1; 2336} 2337 2338.eventlist-widget-date { 2339 font-size: 11px; 2340 font-weight: 600; 2341 color: #666; 2342 margin: 8px 0 4px 0; 2343 padding-bottom: 2px; 2344 border-bottom: 1px solid #e0e0e0; 2345} 2346 2347.eventlist-widget-item { 2348 background: #fafafa; 2349 border: 1px solid #e0e0e0; 2350 border-left: 3px solid #3498db; 2351 border-radius: 3px; 2352 padding: 6px 8px; 2353 margin-bottom: 6px; 2354 transition: all 0.15s; 2355} 2356 2357.eventlist-widget-item:hover { 2358 background: #f0f0f0; 2359 box-shadow: 0 1px 3px rgba(0,0,0,0.1); 2360} 2361 2362.eventlist-widget-title { 2363 font-size: 12px; 2364 font-weight: 600; 2365 color: #2c3e50; 2366 margin-bottom: 2px; 2367} 2368 2369.eventlist-widget-time { 2370 font-size: 11px; 2371 color: #666; 2372 margin-bottom: 4px; 2373} 2374 2375.eventlist-widget-desc { 2376 font-size: 11px; 2377 color: #555; 2378 margin-top: 4px; 2379 line-height: 1.4; 2380} 2381 2382.eventlist-widget-desc img { 2383 max-width: 100%; 2384 height: auto; 2385 border-radius: 3px; 2386 margin: 4px 0; 2387} 2388 2389.eventlist-widget-desc a { 2390 color: #008800; 2391 text-decoration: none; 2392 border-bottom: 1px dotted #008800; 2393} 2394 2395.eventlist-widget-desc a:hover { 2396 border-bottom-style: solid; 2397} 2398 2399.eventlist-widget-empty { 2400 text-align: center; 2401 color: #999; 2402 font-size: 12px; 2403 padding: 20px; 2404 margin: 0; 2405} 2406 2407/* Standalone event panel (right panel only) */ 2408.event-panel-standalone { 2409 width: 320px; 2410 background: #ffffff; 2411 border: 1px solid #d0d0d0; 2412 border-radius: 6px; 2413 box-shadow: 0 2px 6px rgba(0,0,0,0.08); 2414 display: flex; 2415 flex-direction: column; 2416 max-height: 600px; 2417 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 2418 font-size: 13px; 2419} 2420 2421.event-panel-standalone .event-list-compact { 2422 overflow-y: auto; 2423 flex: 1; 2424 padding: 10px; 2425} 2426 2427/* Event panel - Compact two-row header for ~500px width (10% smaller) */ 2428.panel-header-compact { 2429 background: #f5f5f5; 2430 border-bottom: 2px solid #ddd; 2431} 2432 2433.panel-header-row-1 { 2434 display: flex; 2435 align-items: center; 2436 gap: 7px; 2437 padding: 7px 11px; 2438 background: #fafafa; 2439 border-bottom: 1px solid #e8e8e8; 2440} 2441 2442.panel-header-row-2 { 2443 display: flex; 2444 align-items: center; 2445 gap: 7px; 2446 padding: 7px 11px; 2447 background: #ffffff; 2448} 2449 2450.panel-nav-btn { 2451 background: #ffffff; 2452 border: 1px solid #ccc; 2453 color: #333; 2454 width: 29px; 2455 height: 29px; 2456 border-radius: 4px; 2457 cursor: pointer; 2458 font-size: 16px; 2459 font-weight: bold; 2460 transition: all 0.2s; 2461 display: flex; 2462 align-items: center; 2463 justify-content: center; 2464 padding: 0; 2465 flex-shrink: 0; 2466} 2467 2468.panel-nav-btn:hover { 2469 background: #00cc07; 2470 color: white; 2471 border-color: #00cc07; 2472} 2473 2474.panel-month-title { 2475 margin: 0; 2476 font-size: 13px; 2477 font-weight: 600; 2478 color: #2c3e50; 2479 cursor: pointer; 2480 padding: 5px 9px; 2481 border-radius: 4px; 2482 transition: background 0.2s; 2483 white-space: nowrap; 2484 user-select: none; 2485 flex: 1; 2486 text-align: center; 2487 background: #ffffff; 2488 border: 1px solid #e0e0e0; 2489} 2490 2491.panel-month-title:hover { 2492 background: #e8f5e9; 2493 border-color: #00cc07; 2494} 2495 2496.panel-ns-badge { 2497 background: #e3f2fd; 2498 color: #1976d2; 2499 padding: 3px 7px; 2500 border-radius: 11px; 2501 font-size: 9px; 2502 font-weight: 600; 2503 text-transform: uppercase; 2504 letter-spacing: 0.3px; 2505 white-space: nowrap; 2506 border: 1px solid #bbdefb; 2507 flex-shrink: 0; 2508} 2509 2510.panel-ns-badge.filter-on { 2511 background: #ff9800; 2512 color: white; 2513 border-color: #f57c00; 2514 cursor: pointer; 2515 transition: all 0.2s; 2516} 2517 2518.panel-ns-badge.filter-on:hover { 2519 background: #f57c00; 2520} 2521 2522.panel-today-btn { 2523 background: #ffffff; 2524 border: 1px solid #ccc; 2525 color: #333; 2526 padding: 5px 11px; 2527 border-radius: 4px; 2528 cursor: pointer; 2529 font-size: 10px; 2530 font-weight: 600; 2531 transition: all 0.2s; 2532 white-space: nowrap; 2533 flex-shrink: 0; 2534} 2535 2536.panel-today-btn:hover { 2537 background: #00cc07; 2538 color: white; 2539 border-color: #00cc07; 2540} 2541 2542.panel-search-box { 2543 position: relative; 2544 flex: 1; 2545} 2546 2547.panel-search-input { 2548 width: 100%; 2549 padding: 5px 25px 5px 9px; 2550 border: 1px solid #d0d0d0; 2551 border-radius: 4px; 2552 font-size: 11px; 2553 outline: none; 2554 transition: border-color 0.2s, box-shadow 0.2s; 2555 background: #fafafa; 2556} 2557 2558.panel-search-input:focus { 2559 border-color: #00cc07; 2560 box-shadow: 0 0 0 2px rgba(0, 204, 7, 0.1); 2561 background: white; 2562} 2563 2564.panel-search-input::placeholder { 2565 color: #999; 2566} 2567 2568.panel-search-clear { 2569 position: absolute; 2570 right: 5px; 2571 top: 50%; 2572 transform: translateY(-50%); 2573 background: none; 2574 border: none; 2575 color: #999; 2576 cursor: pointer; 2577 padding: 3px; 2578 font-size: 13px; 2579 line-height: 1; 2580 transition: color 0.2s; 2581} 2582 2583.panel-search-clear:hover { 2584 color: #333; 2585} 2586 2587.panel-add-btn { 2588 background: #00cc07; 2589 border: 1px solid #00a806; 2590 color: white; 2591 padding: 5px 13px; 2592 border-radius: 4px; 2593 cursor: pointer; 2594 font-size: 11px; 2595 font-weight: 600; 2596 transition: all 0.2s; 2597 white-space: nowrap; 2598 flex-shrink: 0; 2599} 2600 2601.panel-add-btn:hover { 2602 background: #00a806; 2603 transform: translateY(-1px); 2604 box-shadow: 0 2px 4px rgba(0,0,0,0.1); 2605} 2606 2607.panel-standalone-header { 2608 display: flex; 2609 align-items: center; 2610 gap: 8px; 2611 padding: 12px 12px; 2612 background: #fafafa; 2613 border-bottom: 1px solid #e0e0e0; 2614 flex-shrink: 0; 2615} 2616 2617.panel-header-content { 2618 flex: 1; 2619 display: flex; 2620 flex-direction: column; 2621 align-items: center; 2622 gap: 4px; 2623} 2624 2625.panel-standalone-header h3 { 2626 margin: 0; 2627 font-size: 12px; 2628 font-weight: 600; 2629 color: #2c3e50; 2630 white-space: nowrap; 2631} 2632 2633.panel-standalone-header .calendar-month-picker { 2634 cursor: pointer; 2635 user-select: none; 2636 transition: all 0.15s; 2637 padding: 4px 8px; 2638 border-radius: 4px; 2639 white-space: nowrap; 2640} 2641 2642.panel-standalone-header .calendar-month-picker:hover { 2643 background: #e8e8e8; 2644 color: #008800; 2645} 2646 2647.panel-standalone-header .namespace-badge { 2648 font-size: 11px; 2649 font-weight: 500; 2650 color: #388e3c; 2651 background: #e8f5e9; 2652 padding: 2px 8px; 2653 border-radius: 3px; 2654 text-decoration: none; 2655 transition: all 0.15s; 2656 display: inline-block; 2657} 2658 2659.panel-standalone-header .namespace-badge:hover { 2660 background: #c8e6c9; 2661 color: #2e7d32; 2662} 2663 2664.panel-standalone-actions { 2665 padding: 10px 16px; 2666 background: #ffffff; 2667 border-bottom: 1px solid #e0e0e0; 2668 flex-shrink: 0; 2669 display: flex; 2670 align-items: center; 2671 gap: 8px; 2672} 2673 2674.panel-standalone-actions .add-event-compact { 2675 flex-shrink: 0; 2676} 2677 2678.eventlist-day-group { 2679 margin-bottom: 24px; 2680} 2681 2682.eventlist-date { 2683 margin: 0 0 12px 0; 2684 font-size: 14px; 2685 font-weight: 600; 2686 color: #2c3e50; 2687 background: #f8f8f8; 2688 padding: 8px 12px; 2689 border-left: 4px solid #008800; 2690} 2691 2692.eventlist-item { 2693 display: flex; 2694 margin-bottom: 10px; 2695 background: white; 2696 border: 1px solid #e0e0e0; 2697 border-radius: 4px; 2698 overflow: hidden; 2699} 2700 2701.eventlist-content { 2702 flex: 1; 2703 padding: 12px; 2704 display: flex; 2705 align-items: center; 2706 gap: 12px; 2707} 2708 2709.eventlist-time { 2710 font-size: 12px; 2711 font-weight: 600; 2712 color: #008800; 2713 min-width: 50px; 2714} 2715 2716.eventlist-title { 2717 font-size: 14px; 2718 font-weight: 500; 2719 color: #2c3e50; 2720} 2721 2722.eventlist-desc { 2723 font-size: 12px; 2724 color: #666; 2725 margin-top: 6px; 2726 line-height: 1.4; 2727} 2728 2729/* =================================== 2730 MOBILE RESPONSIVE - EVENTLIST & EVENTPANEL 2731 =================================== */ 2732 2733/* Tablet and below (768px) */ 2734@media (max-width: 768px) { 2735 /* Event Panel Standalone */ 2736 .event-panel-standalone { 2737 width: 100%; 2738 max-width: 100%; 2739 border-radius: 0; 2740 max-height: none; 2741 min-height: 400px; 2742 } 2743 2744 /* Compact Event List Widget */ 2745 .eventlist-compact-widget { 2746 width: 100% !important; 2747 max-width: 100%; 2748 border-radius: 0; 2749 } 2750 2751 .eventlist-widget-header h4 { 2752 font-size: 14px; 2753 } 2754 2755 .eventlist-widget-title { 2756 font-size: 13px; 2757 } 2758 2759 .eventlist-widget-time { 2760 font-size: 12px; 2761 } 2762 2763 /* Standalone event list (old style) */ 2764 .eventlist-standalone { 2765 max-width: 100%; 2766 margin: 10px; 2767 padding: 15px; 2768 border-radius: 0; 2769 } 2770 2771 .eventlist-standalone h3 { 2772 font-size: 16px; 2773 } 2774} 2775 2776/* Mobile (480px and below) */ 2777@media (max-width: 480px) { 2778 /* Event Panel Standalone */ 2779 .event-panel-standalone { 2780 font-size: 12px; 2781 min-height: 300px; 2782 } 2783 2784 .panel-standalone-header { 2785 padding: 10px 12px; 2786 } 2787 2788 .panel-standalone-header h3 { 2789 font-size: 12px; 2790 } 2791 2792 .panel-standalone-actions { 2793 padding: 8px 12px; 2794 } 2795 2796 .event-panel-standalone .event-list-compact { 2797 padding: 8px; 2798 } 2799 2800 /* Compact Event List Widget */ 2801 .eventlist-compact-widget { 2802 min-width: 280px; 2803 } 2804 2805 .eventlist-widget-header { 2806 padding: 6px 10px; 2807 } 2808 2809 .eventlist-widget-header h4 { 2810 font-size: 13px; 2811 } 2812 2813 .eventlist-widget-content { 2814 padding: 6px; 2815 } 2816 2817 .eventlist-widget-item { 2818 padding: 5px 6px; 2819 margin-bottom: 5px; 2820 } 2821 2822 .eventlist-widget-title { 2823 font-size: 12px; 2824 } 2825 2826 .eventlist-widget-time { 2827 font-size: 11px; 2828 } 2829 2830 .eventlist-widget-desc { 2831 font-size: 11px; 2832 } 2833 2834 /* Standalone event list */ 2835 .eventlist-standalone { 2836 margin: 5px; 2837 padding: 10px; 2838 } 2839 2840 .eventlist-standalone h3 { 2841 font-size: 14px; 2842 margin-bottom: 15px; 2843 } 2844 2845 .eventlist-day-group { 2846 margin-bottom: 18px; 2847 } 2848 2849 .eventlist-date { 2850 font-size: 13px; 2851 padding: 6px 10px; 2852 } 2853 2854 .eventlist-title { 2855 font-size: 13px; 2856 } 2857 2858 .eventlist-time { 2859 font-size: 11px; 2860 } 2861 2862 .eventlist-desc { 2863 font-size: 11px; 2864 } 2865} 2866 2867/* Very small mobile (320px) */ 2868@media (max-width: 320px) { 2869 .eventlist-compact-widget { 2870 min-width: 100%; 2871 } 2872 2873 .event-panel-standalone { 2874 min-height: 250px; 2875 } 2876 2877 .eventlist-widget-header h4 { 2878 font-size: 12px; 2879 } 2880 2881 .eventlist-widget-title { 2882 font-size: 11px; 2883 } 2884 2885 .panel-standalone-header h3 { 2886 font-size: 12px; 2887 } 2888} 2889 2890/* Past Events Collapsible Section */ 2891.past-events-section { 2892 margin-bottom: 10px; 2893 border-bottom: 1px solid var(--border-color, #e0e0e0); 2894 border-top: 1px solid var(--border-color, #e0e0e0); 2895} 2896 2897.past-events-toggle { 2898 padding: 6px 10px; 2899 background: var(--cell-bg); 2900 color: var(--text-dim); 2901 cursor: pointer; 2902 user-select: none; 2903 font-size: 11px; 2904 font-weight: 600; 2905 display: flex; 2906 align-items: center; 2907 border-radius: 3px; 2908 transition: background 0.2s; 2909} 2910 2911.past-events-toggle:hover { 2912 background: var(--background-alt); 2913} 2914 2915.past-events-arrow { 2916 font-size: 9px; 2917 margin-right: 5px; 2918 transition: transform 0.2s; 2919 display: inline-block; 2920 width: 10px; 2921 color: var(--text-dim); 2922} 2923 2924.past-events-label { 2925 color: var(--text-dim); 2926} 2927 2928.past-events-content { 2929 margin-top: 5px; 2930} 2931 2932/* Namespace Search Dropdown */ 2933.namespace-search-wrapper { 2934 position: relative; 2935} 2936 2937.namespace-search-input { 2938 width: 100%; 2939} 2940 2941.namespace-dropdown { 2942 position: absolute; 2943 top: 100%; 2944 left: 0; 2945 right: 0; 2946 max-height: 200px; 2947 overflow-y: auto; 2948 background: var(--cell-bg, white); 2949 border: 1px solid var(--border-color, #ddd); 2950 border-top: none; 2951 border-radius: 0 0 4px 4px; 2952 box-shadow: 0 4px 8px var(--shadow-color, rgba(0,0,0,0.1)); 2953 z-index: 1000; 2954 margin-top: -1px; 2955} 2956 2957.namespace-option { 2958 padding: 8px 12px; 2959 cursor: pointer; 2960 font-size: 12px; 2961 color: var(--text-primary, #333); 2962 border-bottom: 1px solid var(--border-color, #f0f0f0); 2963 transition: background-color 0.15s; 2964} 2965 2966.namespace-option:hover { 2967 background-color: var(--background-alt, #f5f5f5); 2968} 2969 2970.namespace-option.selected { 2971 background-color: var(--cell-today-bg, #e3f2fd); 2972 color: var(--text-bright, #1976d2); 2973} 2974 2975.namespace-option:last-child { 2976 border-bottom: none; 2977} 2978 2979/* Matrix-themed Sidebar Widget */ 2980.sidebar-matrix { 2981 font-family: system-ui, sans-serif !important; 2982 background: linear-gradient(180deg, #242424 0%, #2a2a2a 100%) !important; 2983 border: 2px solid #00cc07 !important; 2984 box-shadow: 0 0 15px rgba(0, 204, 7, 0.4), inset 0 0 20px rgba(0, 204, 7, 0.05) !important; 2985} 2986 2987.sidebar-matrix-header { 2988 background: linear-gradient(180deg, #2a2a2a 0%, #242424 100%) !important; 2989 border-bottom: 2px solid #00cc07 !important; 2990 box-shadow: 0 2px 8px rgba(0, 204, 7, 0.3) !important; 2991} 2992 2993.sidebar-matrix-clock { 2994 animation: matrix-pulse 2s ease-in-out infinite; 2995} 2996 2997.sidebar-matrix-date { 2998 opacity: 0.9; 2999} 3000 3001@keyframes matrix-pulse { 3002 0%, 100% { 3003 text-shadow: 0 0 6px rgba(0, 204, 7, 0.5); 3004 } 3005 50% { 3006 text-shadow: 0 0 10px rgba(0, 255, 0, 0.8), 0 0 15px rgba(0, 204, 7, 0.4); 3007 } 3008} 3009 3010/* Matrix glow effect for sidebar */ 3011.sidebar-widget.sidebar-matrix::before { 3012 content: ''; 3013 position: absolute; 3014 top: -2px; 3015 left: -2px; 3016 right: -2px; 3017 bottom: -2px; 3018 background: linear-gradient(45deg, #00cc07, #00ff00, #00cc07); 3019 border-radius: 4px; 3020 opacity: 0; 3021 z-index: -1; 3022 animation: matrix-border-glow 3s ease-in-out infinite; 3023} 3024 3025@keyframes matrix-border-glow { 3026 0%, 100% { 3027 opacity: 0; 3028 } 3029 50% { 3030 opacity: 0.3; 3031 } 3032} 3033 3034/* Scrollbar styling for matrix theme */ 3035.sidebar-matrix ::-webkit-scrollbar { 3036 width: 6px; 3037} 3038 3039.sidebar-matrix ::-webkit-scrollbar-track { 3040 background: #242424; 3041} 3042 3043.sidebar-matrix ::-webkit-scrollbar-thumb { 3044 background: #00cc07; 3045 border-radius: 3px; 3046 box-shadow: 0 0 5px rgba(0, 204, 7, 0.5); 3047} 3048 3049.sidebar-matrix ::-webkit-scrollbar-thumb:hover { 3050 background: #00ff00; 3051 box-shadow: 0 0 8px rgba(0, 255, 0, 0.8); 3052} 3053 3054/* ==================================== 3055 PINK BLING THEME - SPECIAL EFFECTS 3056 ==================================== */ 3057 3058/* Shimmer animation for today's cell - TONED DOWN */ 3059@keyframes pink-shimmer { 3060 0% { 3061 box-shadow: 0 0 3px rgba(255, 20, 147, 0.2), 3062 0 0 5px rgba(255, 20, 147, 0.1); 3063 } 3064 50% { 3065 box-shadow: 0 0 8px rgba(255, 20, 147, 0.4), 3066 0 0 12px rgba(255, 20, 147, 0.2); 3067 } 3068 100% { 3069 box-shadow: 0 0 3px rgba(255, 20, 147, 0.2), 3070 0 0 5px rgba(255, 20, 147, 0.1); 3071 } 3072} 3073 3074/* Sparkle animation for today's day number - SUBTLE */ 3075@keyframes pink-sparkle { 3076 0%, 100% { 3077 text-shadow: 0 0 3px rgba(255, 20, 147, 0.6); 3078 transform: scale(1); 3079 } 3080 50% { 3081 text-shadow: 0 0 6px rgba(255, 20, 147, 0.8), 3082 0 0 10px rgba(255, 105, 180, 0.5); 3083 transform: scale(1.02); 3084 } 3085} 3086 3087/* Glow pulse for event bars - SUBTLE */ 3088@keyframes pink-glow-pulse { 3089 0%, 100% { 3090 box-shadow: 0 0 2px currentColor; 3091 } 3092 50% { 3093 box-shadow: 0 0 4px currentColor, 3094 0 0 6px rgba(255, 105, 180, 0.3); 3095 } 3096} 3097 3098/* Gradient shimmer for headers */ 3099@keyframes pink-gradient-shimmer { 3100 0% { 3101 background-position: 0% 50%; 3102 } 3103 50% { 3104 background-position: 100% 50%; 3105 } 3106 100% { 3107 background-position: 0% 50%; 3108 } 3109} 3110 3111/* Pink particle explosion on click */ 3112@keyframes particle-explode { 3113 0% { 3114 opacity: 1; 3115 transform: translate(0, 0) scale(1); 3116 } 3117 100% { 3118 opacity: 0; 3119 transform: translate(var(--tx), var(--ty)) scale(0); 3120 } 3121} 3122 3123/* Cursor trail glow */ 3124@keyframes cursor-trail-fade { 3125 0% { 3126 opacity: 1; 3127 transform: scale(1); 3128 } 3129 100% { 3130 opacity: 0; 3131 transform: scale(0.5); 3132 } 3133} 3134 3135/* Pink particle styles */ 3136.pink-particle { 3137 position: fixed; /* Changed to fixed so it works anywhere on screen */ 3138 width: 6px; 3139 height: 6px; 3140 background: radial-gradient(circle, #ff1493, #ff69b4); 3141 border-radius: 50%; 3142 pointer-events: none; 3143 z-index: 9999999; /* Above everything including dialogs */ 3144 box-shadow: 0 0 8px #ff1493, 3145 0 0 15px #ff69b4; 3146} 3147 3148/* Cursor trail glow */ 3149.pink-cursor-trail { 3150 position: fixed; /* Changed to fixed so it works anywhere on screen */ 3151 width: 8px; 3152 height: 8px; 3153 background: radial-gradient(circle, rgba(255, 20, 147, 0.8), rgba(255, 105, 180, 0.4)); 3154 border-radius: 50%; 3155 pointer-events: none; 3156 z-index: 9999998; /* Just below particles */ 3157 box-shadow: 0 0 10px rgba(255, 20, 147, 0.6), 3158 0 0 20px rgba(255, 105, 180, 0.3); 3159} 3160 3161/* Tiny neon pixel sparkles */ 3162.pink-pixel-sparkle { 3163 position: fixed; 3164 width: 2px; 3165 height: 2px; 3166 background: #fff; 3167 border-radius: 50%; 3168 pointer-events: none; 3169 z-index: 9999997; /* Just below trail */ 3170 box-shadow: 0 0 2px #ff1493, 3171 0 0 4px #ff69b4, 3172 0 0 6px #fff; 3173} 3174 3175/* Pixel sparkle twinkle animation */ 3176@keyframes pixel-twinkle { 3177 0%, 100% { 3178 opacity: 0; 3179 transform: scale(0); 3180 } 3181 50% { 3182 opacity: 1; 3183 transform: scale(1.5); 3184 } 3185} 3186 3187/* Pixel sparkle float away */ 3188@keyframes pixel-float-away { 3189 0% { 3190 opacity: 1; 3191 transform: translateY(0) scale(1); 3192 } 3193 100% { 3194 opacity: 0; 3195 transform: translateY(-30px) scale(0); 3196 } 3197} 3198 3199/* Pink theme specific styles - TONED DOWN */ 3200.calendar-theme-pink .cal-today { 3201 animation: pink-shimmer 2s ease-in-out infinite; 3202 border: 2px solid #ff1493 !important; 3203 position: relative; 3204 overflow: visible; 3205} 3206 3207.calendar-theme-pink .cal-today .day-num { 3208 animation: pink-sparkle 1.5s ease-in-out infinite; 3209} 3210 3211.calendar-theme-pink .event-bar { 3212 animation: pink-glow-pulse 2s ease-in-out infinite; 3213} 3214 3215.calendar-theme-pink .calendar-compact-header { 3216 background: linear-gradient(90deg, #2d1a24, #3d2030, #2d1a24, #1a0d14); 3217 background-size: 300% 300%; 3218 animation: pink-gradient-shimmer 3s ease infinite; 3219} 3220 3221.calendar-theme-pink .event-list-header { 3222 background: linear-gradient(90deg, #2d1a24, #3d2030, #2d1a24); 3223 background-size: 300% 300%; 3224 animation: pink-gradient-shimmer 3s ease infinite; 3225} 3226 3227/* Subtle hover glow - TONED DOWN */ 3228.calendar-theme-pink .cal-today:hover { 3229 box-shadow: 0 0 10px rgba(255, 20, 147, 0.5), 3230 0 0 15px rgba(255, 20, 147, 0.3) !important; 3231} 3232 3233/* Pink theme event items get subtle glow */ 3234.calendar-theme-pink .event-compact-item { 3235 box-shadow: 0 0 2px rgba(255, 20, 147, 0.1); 3236 transition: all 0.3s ease; 3237} 3238 3239.calendar-theme-pink .event-compact-item:hover { 3240 box-shadow: 0 0 5px rgba(255, 20, 147, 0.3); 3241 transform: translateX(2px); 3242} 3243 3244/* Calendar borders get subtle glow */ 3245.calendar-theme-pink.calendar-compact-container { 3246 box-shadow: 0 0 8px rgba(255, 20, 147, 0.2), 3247 0 2px 4px rgba(0,0,0,0.06); 3248 position: relative; 3249} 3250 3251/* Today badge extra sparkle */ 3252.calendar-theme-pink .event-today-badge { 3253 animation: pink-sparkle 1.5s ease-in-out infinite; 3254} 3255 3256/* Past due badge pulsing effect - SUBTLE */ 3257@keyframes pink-pulse-urgent { 3258 0%, 100% { 3259 box-shadow: 0 0 3px rgba(255, 140, 0, 0.4); 3260 } 3261 50% { 3262 box-shadow: 0 0 8px rgba(255, 140, 0, 0.6); 3263 } 3264} 3265 3266.calendar-theme-pink .event-pastdue-badge { 3267 animation: pink-pulse-urgent 1s ease-in-out infinite; 3268} 3269