← Back
Editing: 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); --fc-event-text-color: var(--color-main-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; 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-block-start-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: var(--default-grid-baseline) 0 calc(var(--default-grid-baseline) + 1px); padding: 0 var(--default-grid-baseline); text-align: center; font-weight: bold !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; /* https://developer.mozilla.org/en-US/docs/Web/CSS/word-break */ /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */ 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-inline-start: 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.8; } } // ### FullCalendar Event adjustments .fc-event { padding-inline-start: 3px; // Only show the left border, thick and full-opacity (dot events and list events are excluded) &:not(.fc-daygrid-dot-event):not(.fc-list-event) { border-block-start-width: 0 !important; border-block-end-width: 0 !important; border-inline-end-width: 0 !important; border-inline-start-width: calc(var(--default-grid-baseline) + var(--default-grid-basline) * 0.5) !important; border-inline-start-style: solid !important; } // Free (TRANSP:TRANSPARENT) events: hollow left strip — 1px accent | page-bg | 1px accent &.fc-event-nc-free { &:not(.fc-daygrid-dot-event):not(.fc-list-event) { &:not(.fc-timegrid-event) { position: relative; } // Hide the solid left border; the ::before pseudo-element takes its place border-inline-start-color: transparent !important; &::before { content: ''; position: absolute; // Offset into the (transparent) border area so we start at the true left edge inset-inline-start: calc(-1 * var(--default-grid-baseline)); top: 0; bottom: 0; width: var(--default-grid-baseline); background: var(--fc-page-bg-color); border-inline-start: 1px solid var(--nc-event-color, currentColor); border-inline-end: 1px solid var(--nc-event-color, currentColor); border-start-start-radius: inherit; border-end-start-radius: inherit; box-sizing: border-box; } } } &.fc-event-nc-task-completed, &.fc-event-nc-cancelled { .fc-event-title, .fc-list-event-title { text-decoration: line-through !important; } } // Participation-state events with no fill keep the thick left stripe plus a 1px frame. &.fc-event-nc-all-declined, &.fc-event-nc-needs-action, &.fc-event-nc-declined { &:not(.fc-daygrid-dot-event):not(.fc-list-event) { background-color: transparent !important; border-block-start-width: 1px !important; border-block-end-width: 1px !important; border-inline-end-width: 1px !important; border-inline-start-width: calc(var(--default-grid-baseline) + var(--default-grid-basline) * 0.5) !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; inset-inline-end: 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-inline-end: 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; } } .fc-timeGridWeek-view { .fc-daygrid-more-link { /* https://developer.mozilla.org/en-US/docs/Web/CSS/word-break */ /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */ 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 { /* https://developer.mozilla.org/en-US/docs/Web/CSS/word-break */ /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */ word-break: break-word; white-space: normal; } .fc-daygrid-day-frame { min-height: 150px !important; } } // Fix week button overlapping with the toggle .fc-col-header-cell { padding-top: 10px !important; &-cushion { text-overflow: ellipsis; overflow: clip; max-width: 100%; } } .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; } // Leave some space for dragging .fc-timeGridDay-view, .fc-timeGridWeek-view { .fc-event { margin-inline-end: 1vw; } .fc-event-mirror { border: none !important; } } .fc-timeGridDay-view { .fc-event { margin-inline-end: 2vw; } } // High-contrast mode: events use plain page background so the coloured left // border is the sole colour indicator (no transparency, no stripe patterns). // Two triggers: // 1. OS/browser prefers-contrast: more media feature. // 2. Nextcloud in-app Accessibility theme, which writes // data-themes="light-highcontrast" (or dark-highcontrast) on <body> // without necessarily setting the OS media feature. @mixin _fc-high-contrast-events { .fc-event:not(.fc-daygrid-dot-event):not(.fc-list-event) { background-color: var(--fc-page-bg-color) !important; background-image: none !important; .fc-event-title, .fc-event-time { color: var(--color-main-text) !important; } } } @media (prefers-contrast: more) { @include _fc-high-contrast-events; } [data-theme-light-highcontrast], [data-theme-dark-highcontrast], [data-themes*="highcontrast"] { @include _fc-high-contrast-events; }
Save File
Cancel