mirror of
https://github.com/xlorepdarkhelm/numinar-coding-project.git
synced 2026-09-10 10:03:26 -04:00
325 lines
8.1 KiB
CSS
325 lines
8.1 KiB
CSS
/* Override inline styles if present */
|
|
.fc-event[style],
|
|
.fc-daygrid-event[style],
|
|
.fc-event-main[style],
|
|
.fc-event-main-frame[style] {
|
|
background: inherit !important;
|
|
background-color: inherit !important;
|
|
}
|
|
/* Force FullCalendar event blocks to use the correct background and text color */
|
|
.fc-event,
|
|
.fc-daygrid-event {
|
|
background-color: var(
|
|
--fc-event-bg-color,
|
|
var(--color-primary, #1976d2)
|
|
) !important;
|
|
color: var(--color-white, #fff) !important;
|
|
border-radius: 4px !important;
|
|
border: none !important;
|
|
}
|
|
/* Inline event styles from CalendarViewInline.css */
|
|
.calendar-event-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 4px;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
background-color: var(--fc-event-bg-color, var(--color-primary, #1976d2));
|
|
color: var(--color-white, #fff);
|
|
}
|
|
|
|
.fc-event-title-ellipsis {
|
|
display: block;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 100%;
|
|
min-width: 0;
|
|
font-size: inherit;
|
|
}
|
|
|
|
/* Non-business hours styling */
|
|
.fc-timegrid-col-bg .fc-non-business,
|
|
.fc-non-business {
|
|
background: var(--color-calendar-nonbusiness, #888) !important;
|
|
opacity: 0.5 !important;
|
|
}
|
|
|
|
/* Event content truncation */
|
|
.fc-event-title-ellipsis,
|
|
.fc-event .fc-event-main > div,
|
|
.fc-event-title,
|
|
.fc-event-main,
|
|
.fc-event .fc-event-main-frame,
|
|
.fc-event .fc-event-title,
|
|
.fc-event .fc-event-title-container,
|
|
.fc-event .fc-event-time,
|
|
.fc-event .fc-event-title,
|
|
.fc-event .fc-event-title-container,
|
|
.fc-event .fc-event-main {
|
|
white-space: nowrap !important;
|
|
overflow: hidden !important;
|
|
text-overflow: ellipsis !important;
|
|
max-width: 100% !important;
|
|
display: block !important;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Weekend and weekday styling */
|
|
.fc .fc-daygrid-day.fc-day-sat .fc-daygrid-day-frame,
|
|
.fc .fc-daygrid-day.fc-day-sun .fc-daygrid-day-frame,
|
|
.fc .fc-timegrid-col.fc-day-sat,
|
|
.fc .fc-timegrid-col.fc-day-sun {
|
|
background: var(
|
|
--color-calendar-nonbusiness,
|
|
#888
|
|
) !important; /* unified non-business color */
|
|
border-color: var(--color-calendar-border, #bbb) !important;
|
|
}
|
|
|
|
.fc .fc-daygrid-day.fc-day-sat .fc-daygrid-day-number,
|
|
.fc .fc-daygrid-day.fc-day-sun .fc-daygrid-day-number {
|
|
color: var(--color-calendar-title, #e0e0e0) !important;
|
|
font-weight: 500 !important;
|
|
opacity: 0.7 !important;
|
|
}
|
|
|
|
/* Weekday non-business hours */
|
|
.fc .fc-non-business {
|
|
background: var(--color-calendar-nonbusiness, #888) !important;
|
|
opacity: 0.5 !important;
|
|
}
|
|
|
|
/* Workday all-day and time slots */
|
|
.fc .fc-daygrid-day .fc-daygrid-day-frame,
|
|
.fc .fc-timegrid-col {
|
|
background: var(--color-calendar-blocked, #c0c0c0) !important;
|
|
}
|
|
|
|
/* Lighter border for all-day row on weekends */
|
|
.fc .fc-daygrid-day.fc-day-sat,
|
|
.fc .fc-daygrid-day.fc-day-sun {
|
|
border-color: var(--color-calendar-border, #bbb) !important;
|
|
}
|
|
|
|
/* Out-of-month days styling */
|
|
.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-frame {
|
|
background: var(--color-calendar-muted, #aaa) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
/* =============================== */
|
|
/* Calendar cell backgrounds */
|
|
/* =============================== */
|
|
:root {
|
|
--fc-page-bg-color: var(--color-page-bg, #a0a0a0);
|
|
--fc-neutral-bg-color: var(--color-neutral-bg, #e3f2fd);
|
|
--fc-today-bg-color: var(--color-today-bg, #e3f2fd);
|
|
--fc-event-bg-color: var(--color-event-bg, #1976d2);
|
|
--fc-border-color: var(--color-border, #707070);
|
|
}
|
|
|
|
.calendarContainer {
|
|
padding: 2rem;
|
|
background: var(--color-calendar-bg, #f8fafc) !important;
|
|
border-radius: 16px !important;
|
|
box-shadow: 0 4px 24px rgba(30, 64, 175, 0.08) !important;
|
|
/* Responsive container, no fixed height */
|
|
}
|
|
|
|
.calendar-scroll-area {
|
|
flex: 1 1 auto;
|
|
overflow-y: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.fc {
|
|
font-family: "Inter", "Roboto", Arial, sans-serif !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.fc .fc-toolbar {
|
|
background: var(--color-primary, #1976d2) !important;
|
|
color: var(--color-white, #fff) !important;
|
|
border-radius: 12px 12px 0 0 !important;
|
|
padding: 0.5rem 1rem !important;
|
|
}
|
|
|
|
.fc .fc-toolbar-title {
|
|
font-size: 1.5rem !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.fc .fc-button {
|
|
background: var(--color-primary, #1976d2) !important;
|
|
color: var(--color-white, #fff) !important;
|
|
border: none !important;
|
|
border-radius: 6px !important;
|
|
padding: 0.3rem 0.8rem !important;
|
|
margin: 0 0.2rem !important;
|
|
font-weight: 500 !important;
|
|
transition: background 0.2s !important;
|
|
}
|
|
|
|
.fc .fc-button:hover,
|
|
.fc .fc-button:focus {
|
|
background: #1565c0 !important;
|
|
}
|
|
|
|
.fc .fc-daygrid-day {
|
|
box-shadow: 0 1px 4px rgba(30, 64, 175, 0.08) !important;
|
|
transition: box-shadow 0.2s !important;
|
|
}
|
|
|
|
.fc .fc-daygrid-day:hover {
|
|
box-shadow: 0 4px 12px rgba(30, 64, 175, 0.16) !important;
|
|
background: #e3f2fd !important;
|
|
}
|
|
|
|
.fc .fc-daygrid-day-number {
|
|
font-weight: 600 !important;
|
|
color: var(--color-calendar-event, #1976d2) !important;
|
|
}
|
|
|
|
.fc .fc-event {
|
|
color: var(--color-white, #fff) !important;
|
|
padding: 2px 6px !important;
|
|
font-size: 0.95rem !important;
|
|
box-shadow: 0 2px 8px rgba(30, 64, 175, 0.12) !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.fc .fc-event:hover {
|
|
background: #1565c0 !important;
|
|
}
|
|
|
|
.fc .fc-day-today {
|
|
background: #e3f2fd !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.fc .fc-daygrid-day .fc-daygrid-day-frame {
|
|
background: #c0c0c0 !important;
|
|
box-shadow: 0 1px 4px rgba(30, 64, 175, 0.08) !important;
|
|
transition: box-shadow 0.2s !important;
|
|
}
|
|
|
|
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
|
|
background: #d0d0d0 !important;
|
|
box-shadow: 0 4px 12px rgba(30, 64, 175, 0.16) !important;
|
|
}
|
|
|
|
.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-frame {
|
|
background: #aaa !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
|
|
color: var(--color-white, #fff) !important;
|
|
opacity: 1 !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.fc .fc-daygrid-day:hover .fc-daygrid-day-frame {
|
|
background: #e3f2fd !important;
|
|
box-shadow: 0 4px 12px rgba(30, 64, 175, 0.16) !important;
|
|
}
|
|
|
|
.fc,
|
|
.fc-toolbar.fc-header-toolbar {
|
|
margin-bottom: 0px !important;
|
|
}
|
|
|
|
/* =============================== */
|
|
/* Room color classes for events */
|
|
/* =============================== */
|
|
/*
|
|
* .room-color-0 to .room-color-19
|
|
* Used to assign unique background colors to events based on room ID.
|
|
* These classes are mapped in the frontend logic (getRoomClass).
|
|
*/
|
|
.room-color-1 {
|
|
background: var(--room-color-1, #1976d2) !important;
|
|
}
|
|
.room-color-2 {
|
|
background: var(--room-color-2, #388e3c) !important;
|
|
}
|
|
.room-color-3 {
|
|
background: var(--room-color-3, #fbc02d) !important;
|
|
}
|
|
.room-color-4 {
|
|
background: var(--room-color-4, #d32f2f) !important;
|
|
}
|
|
.room-color-5 {
|
|
background: var(--room-color-5, #7b1fa2) !important;
|
|
}
|
|
.room-color-6 {
|
|
background: var(--room-color-6, #0288d1) !important;
|
|
}
|
|
.room-color-7 {
|
|
background: var(--room-color-7, #c2185b) !important;
|
|
}
|
|
.room-color-8 {
|
|
background: var(--room-color-8, #ffa000) !important;
|
|
}
|
|
.room-color-9 {
|
|
background: var(--room-color-9, #009688) !important;
|
|
}
|
|
.room-color-10 {
|
|
background: var(--room-color-10, #8bc34a) !important;
|
|
}
|
|
.room-color-11 {
|
|
background: var(--room-color-11, #e91e63) !important;
|
|
}
|
|
.room-color-12 {
|
|
background: var(--room-color-12, #00bcd4) !important;
|
|
}
|
|
.room-color-13 {
|
|
background: var(--room-color-13, #ff5722) !important;
|
|
}
|
|
.room-color-14 {
|
|
background: var(--room-color-14, #9c27b0) !important;
|
|
}
|
|
.room-color-15 {
|
|
background: var(--room-color-15, #3f51b5) !important;
|
|
}
|
|
.room-color-16 {
|
|
background: var(--room-color-16, #4caf50) !important;
|
|
}
|
|
.room-color-17 {
|
|
background: var(--room-color-17, #ff9800) !important;
|
|
}
|
|
.room-color-18 {
|
|
background: var(--room-color-18, #607d8b) !important;
|
|
}
|
|
.room-color-19 {
|
|
background: var(--room-color-19, #795548) !important;
|
|
}
|
|
|
|
/* Ensure event text is readable on colored backgrounds */
|
|
.room-color-0,
|
|
.room-color-1,
|
|
.room-color-2,
|
|
.room-color-3,
|
|
.room-color-4,
|
|
.room-color-5,
|
|
.room-color-6,
|
|
.room-color-7,
|
|
.room-color-8,
|
|
.room-color-9,
|
|
.room-color-10,
|
|
.room-color-11,
|
|
.room-color-12,
|
|
.room-color-13,
|
|
.room-color-14,
|
|
.room-color-15,
|
|
.room-color-16,
|
|
.room-color-17,
|
|
.room-color-18,
|
|
.room-color-19 {
|
|
color: var(--color-white, #fff) !important;
|
|
}
|