calendar/css/fullcalendar.scss

/**
 * Calendar App
 *
 * @copyright 2020 Georg Ehrke <oc.list@georgehrke.com>
 *
 * @author Georg Ehrke
 *
 * This library is free software; you can redistribute it and/or
 * modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
 * License as published by the Free Software Foundation; either
 * version 3 of the License, or any later version.
 *
 * This library is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU AFFERO GENERAL PUBLIC LICENSE for more details.
 *
 * You should have received a copy of the GNU Affero General Public
 * License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 *
 */

/** Override some FullCalendar CSS vars: */
:root {
	--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);
	--fc-event-border-color: var(--color-primary-text);
	--fc-event-text-color: var(--color-primary-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);
	--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;
}

// 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 {
			background-color: var(--color-primary);
			color: var(--color-primary-text) !important;
			border-radius: var(--border-radius-pill);
			padding: 2px 6px;
			font-weight: bold;
		}
	}

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

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

// Fix right border on today not being visible in month and week view when using Firefox
.fc .fc-daygrid-day.fc-day-today,
.fc .fc-timegrid-col.fc-day-today {
	background-color: unset !important;
}

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

	&.fc-event-nc-task-completed,
	&.fc-event-nc-tentative,
	&.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;
	}

	// 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 {
				@include icon-color('reminder', 'calendar', '#fffffe', 1);
			}
			&--dark {
				@include icon-color('reminder', 'calendar', '#000001', 1);
			}
		}
	}

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

		.fc-event-title-checkbox {
			margin: 6px 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;
	}

	@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-v-event {
        min-height: 4em;
}

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

// 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;
}