fullcalendar.scss

/*!
 * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */

/** Override some FullCalendar CSS vars: */
.fc {
	--fc-small-font-size: 0.875em;
	--fc-page-bg-color: var(--color-main-background) !important;
	--fc-neutral-bg-color: var(--color-background-dark) !important;
	--fc-neutral-text-color: var(--color-text-lighter) !important;
	--fc-border-color: var(--color-border) !important;

	--fc-daygrid-event-dot-width: 10px !important;

	--fc-event-bg-color: var(--color-primary-element);
	--fc-event-border-color: var(--color-primary-element-text);
	--fc-event-text-color: var(--color-primary-element-text);
	--fc-event-selected-overlay-color: var(--color-box-shadow);

	--fc-event-resizer-thickness: 8px;
	--fc-event-resizer-dot-total-width: 8px;
	--fc-event-resizer-dot-border-width: 1px;

	--fc-non-business-color: var(--color-background-dark);
	--fc-bg-event-color: var(--color-primary-element);
	--fc-bg-event-opacity: 0.3;
	--fc-highlight-color: rgba(188, 232, 241, 0.3); // TODO - use some color css var from us?
	--fc-today-bg-color: var(--color-main-background) !important;
	--fc-now-indicator-color: red;
	--fc-list-event-hover-bg-color: var(--color-background-hover) !important;
}

.fc {
	font-family: var(--font-face) !important;
}

// ### FullCalendar Grid adjustments
// Make the labels lighter
.fc-timegrid-axis-frame,
.fc-timegrid-slot-label,
.fc-col-header-cell a {
	color: var(--color-text-lighter) !important;
}

// Remove dotted half-lines
.fc .fc-timegrid-slot-minor {
	border-top-style: none !important;
}

// Center the date in month view
.fc-daygrid-day-top {
	justify-content: center;
}

// Override Nextcloud styles which highlight table rows on hover
.fc-state-highlight.fc-day-number,
.fc tbody tr,
.fc tbody tr:hover,
.fc tbody tr:focus {
	background: inherit !important;
}

// Today highlighting
.fc-day-today {
	&.fc-col-header-cell {
		a, span {
			padding: 2px 6px;
			font-weight: bold;
			background-color: var(--color-primary-element);
			color: var(--color-primary-element-text) !important;
			border-radius: var(--border-radius-small);
		}
	}

	.fc-event {
		box-shadow: 0px 0px 0px 1px var(--color-primary-element-light) !important;
		margin-top: 0px;
	}

	.fc-daygrid-day-top {
		.fc-daygrid-day-number {
			margin: 4px;
			width: 24px;
			height: 24px;
			text-align: center;
			font-weight: bold !important;
			padding: 0 !important;
			background: var(--color-primary-element);
			color: var(--color-primary-element-text);
			border-radius: var(--border-radius-small);
		}
	}
}

// Fix list table
.fc-list-table td {
	white-space: normal;
	word-break: break-word;
}

// Prevent events overlapping over day header
.fc .fc-list-sticky .fc-list-day > * {
	z-index: 1;
}

// Padding to account for left navigation toggle
.fc-list-table .fc-list-day-cushion {
	padding-left: calc(var(--default-clickable-area) + var(--default-grid-baseline) * 2);
}

// highlight current day (exclude day view)
.fc-timeGridWeek-view,
.fc-dayGridMonth-view {
	.fc-col-header-cell.fc-day-today,
	.fc-daygrid-day.fc-day-today,
	.fc-timegrid-col.fc-day-today {
		background-color: var(--color-primary-element-light) !important;
	}
}

// emphasize current month in month view
.fc-daygrid-day.fc-day.fc-day-other,
.fc .fc-daygrid-day.fc-day-today.fc-day-other {
	background-color: var(--color-background-dark) !important;
	border: 1px solid var(--color-background-darker);
	.fc-daygrid-day-top {
		opacity: 0.6;
	}
}

// ### FullCalendar Event adjustments
.fc-event {
	padding-left: 3px;
	border-width: 2px;

	&.fc-event-nc-task-completed,
	&.fc-event-nc-tentative,
	&.fc-event-past,
	&.fc-event-nc-cancelled {
		opacity: .5;
	}

	&.fc-event-nc-task-completed,
	&.fc-event-nc-cancelled {
		.fc-event-title,
		.fc-list-event-title {
			text-decoration: line-through !important;
		}
	}

	.fc-event-title {
		text-overflow: ellipsis;
		font-weight: 700;
	}

	// Reminder icon on events with alarms set
	.fc-event-nc-alarms {
		.icon-event-reminder {
			background-color: inherit;
			background-position: right;
			position: absolute;
			top: 0;
			right: 0;
			&--light {
				background-image: var(--icon-calendar-reminder-fffffe)
			}
			&--dark {
				background-image: var(--icon-calendar-reminder-000001)
			}
		}
	}

	// Checkboxes for Tasks
	.fc-event-title-container {
		display: flex;
		align-content: center;

		.fc-event-title-checkbox {
			margin: 4px 4px 0 0;
			line-height: 1;
		}
	}

	.fc-list-event-checkbox {
		margin: 2px 4px 0 -2px;
		line-height: 1;
	}

	.fc-daygrid-event-checkbox {
		margin: 2px 4px 0 4px;
		line-height: 1;
	}

	.fc-list-event-location span,
	.fc-list-event-description span {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		white-space: pre-wrap;
		max-width: 25vw;
	}

	svg {
		margin-right: 2px;
	}

	@media only screen and (max-width: 767px) {
		.fc-list-event-location,
		.fc-list-event-description {
			display: none;
		}
	}
}

.fc-list-empty {
	.fc-list-empty-cushion {
		display: none;
	}

	.empty-content {
		margin-top: 0 !important;
	}
}

// Fix week view
.fc-col-header-cell {
	word-break: break-word;
	white-space: normal;
}

.fc-timeGridWeek-view {
	.fc-daygrid-more-link {
		word-break: break-all;
		white-space: normal;
	}

	.fc-event-main {
		flex-wrap: wrap;
	}
}

.fc-timegrid-col-events{
	margin: 0 !important;
}

.fc-v-event {
	&.fc-timegrid-event-short {
		min-height: 2em;
	}

	.fc-event-title {
		white-space: initial;
	}
}

// Fix Month view
.fc-dayGridMonth-view {
	.fc-daygrid-more-link {
		word-break: break-word;
		white-space: normal;
	}
	.fc-daygrid-day-frame {
		min-height: 150px !important;
	}
}
.fc-daygrid-day-events {
	position:relative !important;
}

// Fix week button overlapping with the toggle
.fc-col-header-cell {
    padding-top: 10px !important;
}
.fc-timegrid-axis-cushion  {
	margin-top: 44px;
}
// Additional workaround for Firefox
.fc-timegrid-axis.fc-scrollgrid-shrink {
	height: 65px;
}

.fc-timegrid-event-harness, .fc-timegrid-event {
	// previously was 1px for no apparent reason
	margin-bottom: 0;
}