/* ======================================== Улучшенные стили для календаря ======================================== */ /* Улучшенное отображение дней с событиями */ .fc-daygrid-day { position: relative; } /* Современный стиль для ячеек календаря */ .fc-daygrid-day-frame { min-height: 100px; position: relative; } /* Убираем стандартные рамки событий и делаем их более гладкими */ .fc-event { border-radius: 4px !important; margin: 1px 2px !important; padding: 2px 4px !important; cursor: pointer; transition: all 0.2s ease; position: relative; } /* Улучшенное отображение текста события */ .fc-event-title { font-weight: 500; padding: 1px 0; } /* Стиль для дней с большим количеством событий */ .fc-daygrid-day.fc-day-today { background-color: rgba(13, 110, 253, 0.05) !important; } .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { background-color: #0d6efd; color: white; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; } /* Улучшенный popover для множества событий */ .fc-popover { border-radius: 8px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important; border: 1px solid rgba(0,0,0,0.1) !important; max-width: 300px; } .fc-popover-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: white !important; padding: 8px 12px !important; border-radius: 8px 8px 0 0 !important; font-weight: 600; } .fc-popover-body { padding: 8px !important; max-height: 400px; overflow-y: auto; } /* Стили для ссылки "+N еще" */ .fc-more-link { color: #0d6efd !important; font-weight: 600 !important; font-size: 11px !important; padding: 2px 6px !important; border-radius: 3px !important; background: rgba(13, 110, 253, 0.1) !important; transition: all 0.2s ease; } .fc-more-link:hover { background: rgba(13, 110, 253, 0.2) !important; text-decoration: none !important; } /* Улучшенное отображение времени события */ .fc-event-time { font-weight: 400; font-size: 10px; opacity: 0.9; margin-right: 3px; } /* Стиль для событий с левой цветной границей (календарь) */ .fc-event.has-calendar-color { padding-left: 8px !important; } /* Анимация появления событий */ @keyframes fadeInEvent { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } .fc-event { animation: fadeInEvent 0.3s ease; } /* Улучшенный hover для всех событий */ .fc-event:hover { z-index: 999 !important; transform: translateY(-2px) scale(1.02); } /* Стиль для выходных дней */ .fc-day-sat, .fc-day-sun { background-color: rgba(220, 53, 69, 0.02); } /* Улучшенная читаемость заголовков дней недели */ .fc-col-header-cell { font-weight: 600; background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%); border-color: #dee2e6 !important; } /* Современный стиль для кнопок навигации календаря */ .fc-button { border-radius: 6px !important; padding: 6px 12px !important; font-weight: 500 !important; transition: all 0.2s ease !important; } .fc-button:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; } /* Стиль для заголовка календаря */ .fc-toolbar-title { font-weight: 600 !important; font-size: 1.25rem !important; color: #2c3e50; } /* Улучшенное отображение номера дня */ .fc-daygrid-day-number { padding: 4px 6px; font-weight: 500; color: #495057; } /* Стиль для прошедших дней */ .fc-day-past:not(.fc-day-today) { background-color: rgba(0,0,0,0.02); } .fc-day-past:not(.fc-day-today) .fc-daygrid-day-number { color: #adb5bd; } /* Улучшенное отображение границ между днями */ .fc-daygrid-day-frame { border: 1px solid #e9ecef !important; } /* Стиль для событий на весь день */ .fc-daygrid-event.fc-daygrid-block-event { padding: 3px 6px !important; } /* Адаптивность для мобильных */ @media (max-width: 768px) { .fc-daygrid-day-frame { min-height: 80px; } .fc-event { font-size: 10px !important; padding: 1px 3px !important; } .fc-toolbar-title { font-size: 1rem !important; } } /* Улучшенная прокрутка в popover */ .fc-popover-body::-webkit-scrollbar { width: 6px; } .fc-popover-body::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; } .fc-popover-body::-webkit-scrollbar-thumb { background: #888; border-radius: 3px; } .fc-popover-body::-webkit-scrollbar-thumb:hover { background: #555; } /* Индикатор загрузки событий */ .fc-view-harness.fc-view-harness-active { position: relative; } /* Стиль для событий разной продолжительности */ .fc-event.fc-event-start.fc-event-end { /* Событие в один день - закругленные углы */ border-radius: 4px !important; } .fc-event.fc-event-start:not(.fc-event-end) { /* Начало многодневного события - закругление слева */ border-radius: 4px 0 0 4px !important; } .fc-event:not(.fc-event-start).fc-event-end { /* Конец многодневного события - закругление справа */ border-radius: 0 4px 4px 0 !important; } .fc-event:not(.fc-event-start):not(.fc-event-end) { /* Середина многодневного события - без закруглений */ border-radius: 0 !important; } /* Улучшенная видимость выбранной даты при создании события */ .fc-highlight { background: rgba(13, 110, 253, 0.15) !important; border-radius: 4px; } /* Стиль для недели */ .week-strip-header { font-weight: 600; color: #495057; padding: 12px 0 8px; border-top: 1px solid #e9ecef; margin-top: 16px; display: flex; justify-content: space-between; align-items: center; } .week-vertical { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } /* Улучшенный стиль для списка календарей */ .calendar-list-container { scrollbar-width: thin; scrollbar-color: #cbd5e0 #f7fafc; } .calendar-list-container::-webkit-scrollbar { width: 6px; } .calendar-list-container::-webkit-scrollbar-track { background: #f7fafc; border-radius: 3px; } .calendar-list-container::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 3px; } .calendar-list-container::-webkit-scrollbar-thumb:hover { background: #a0aec0; }