/* classes attached to */ .fc-not-allowed { /* override events' custom cursors */ cursor: not-allowed; .fc-event { /* override events' custom cursors */ cursor: not-allowed; } } .fc-unselectable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .fc { /* layout of immediate children */ display: flex; flex-direction: column; font-size: 1em; table { border-collapse: collapse; border-spacing: 0; font-size: 1em; /* normalize cross-browser */ } th { text-align: center; vertical-align: top; padding: 0; } td { vertical-align: top; padding: 0; } a[data-navlink] { cursor: pointer; } } .fc-direction-ltr { direction: ltr; text-align: start; } .fc-direction-rtl { direction: rtl; text-align: end; } .fc-theme-standard { td, th { border: 1px solid #{$border}; } } /* for FF, which doesn't expand a 100% div within a table cell. use absolute positioning */ /* inner-wrappers are responsible for being absolute */ /* TODO: best place for this? */ .fc-liquid-hack { td, th { position: relative; } } @font-face { font-family: 'fcicons'; src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format("truetype"); font-weight: normal; font-style: normal; } .fc-icon { /* added for fc */ display: inline-block; width: 1em; height: 1em; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'fcicons' !important; speak-as: normal; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fc-icon-chevron-left:before { content: "\e900"; } .fc-icon-chevron-right:before { content: "\e901"; } .fc-icon-chevrons-left:before { content: "\e902"; } .fc-icon-chevrons-right:before { content: "\e903"; } .fc-icon-minus-square:before { content: "\e904"; } .fc-icon-plus-square:before { content: "\e905"; } .fc-icon-x:before { content: "\e906"; } /* Lots taken from Flatly (MIT): https://bootswatch.com/4/flatly/bootstrap.css These styles only apply when the standard-theme is activated. When it's NOT activated, the fc-button classes won't even be in the DOM. */ .fc { .fc-button { border-radius: 0; overflow: visible; text-transform: none; margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; &:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; } -webkit-appearance: button; &:not(:disabled) { cursor: pointer; } &::-moz-focus-inner { padding: 0; border-style: none; } display: inline-block; font-weight: 400; text-align: center; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 0.8125rem; line-height: 1.5; border-radius: 5px; &:hover { text-decoration: none; } &:focus { outline: 0; } &:disabled { opacity: 0.65; } .fc-icon { vertical-align: middle; font-size: 1.5em; /* bump up the size (but don't make it bigger than line-height of button, which is 1.5em also) */ } } .fc-button-group { position: relative; display: inline-flex; vertical-align: middle; >.fc-button { position: relative; flex: 1 1 auto; &:hover, &:focus, &:active, &.fc-button-active { z-index: 0; } } } } .fc-direction-ltr .fc-button-group>.fc-button { &:not(:first-child) { margin-inline-start: -1px; border-start-start-radius: 0; border-end-start-radius: 0; } &:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; } } .fc-direction-rtl .fc-button-group>.fc-button { &:not(:first-child) { margin-inline-end: -1px; border-start-end-radius: 0; border-end-end-radius: 0; } &:not(:last-child) { border-start-start-radius: 0; border-end-start-radius: 0; } } .fc { .fc-toolbar { display: flex; justify-content: space-between; align-items: center; &.fc-header-toolbar { margin-block-end: 1.5em; } &.fc-footer-toolbar { margin-block-start: 1.5em; } } .fc-toolbar-title { font-size: 1.75em; margin: 0; } } .fc-direction-ltr .fc-toolbar>*> :not(:first-child) { margin-inline-start: .75em; /* space between */ } .fc-direction-rtl { .fc-toolbar>*> :not(:first-child) { margin-inline-end: .75em; /* space between */ } .fc-toolbar-ltr { /* when the toolbar-chunk positioning system is explicitly left-to-right */ flex-direction: row-reverse; } } .fc { .fc-scroller { -webkit-overflow-scrolling: touch; position: relative; /* for abs-positioned elements within */ } .fc-scroller-liquid { height: 100%; } .fc-scroller-liquid-absolute { position: absolute; inset-block-start: 0; inset-inline-end: 0; inset-inline-start: 0; inset-block-end: 0; } .fc-scroller-harness { position: relative; overflow: hidden; direction: ltr; /* hack for chrome computing the scroller's right/left wrong for rtl. undone below... */ /* TODO: demonstrate in codepen */ } .fc-scroller-harness-liquid { height: 100%; } } .fc-direction-rtl .fc-scroller-harness>.fc-scroller { /* undo above hack */ direction: rtl; } .fc-theme-standard .fc-scrollgrid { border: 1px solid #{$border}; } .fc { .fc-scrollgrid { /* all tables (self included) */ width: 100%; /* because tables don't normally do this */ table-layout: fixed; table { /* all tables (self included) */ width: 100%; /* because tables don't normally do this */ table-layout: fixed; /* inner tables */ border-block-start-style: hidden; border-inline-start-style: hidden; border-inline-end-style: hidden; } border-collapse: separate; border-inline-end-width: 0; border-block-end-width: 0; } .fc-scrollgrid-liquid { height: 100%; } .fc-scrollgrid-section { /* a */ height: 1px; >td { height: 1px; /* needs a height so inner div within grow. better than 0, for firefox */ } table { height: 1px; /* for most browsers, if a height isn't set on the table, can't do liquid-height within cells */ /* serves as a min-height. harmless */ } } .fc-scrollgrid-section-liquid { height: auto; >td { height: 100%; /* better than `auto`, for firefox */ } } .fc-scrollgrid-section>* { border-block-start-width: 0; border-inline-start-width: 0; } .fc-scrollgrid-section-header>*, .fc-scrollgrid-section-footer>* { border-block-end-width: 0; } .fc-scrollgrid-section-body table, .fc-scrollgrid-section-footer table { border-block-end-style: hidden; /* head keeps its bottom border tho */ } .fc-scrollgrid-section-sticky>* { background: rgb($white); position: sticky; z-index: 2; /* TODO: var */ /* TODO: box-shadow when sticking */ } .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky>* { inset-block-start: 0; /* because border-sharing causes a gap at the top */ /* TODO: give safari -1. has bug */ } .fc-scrollgrid-section-footer.fc-scrollgrid-section-sticky>* { inset-block-end: 0; /* known bug: bottom-stickiness doesn't work in safari */ } .fc-scrollgrid-sticky-shim { /* for horizontal scrollbar */ height: 1px; /* needs height to create scrollbars */ margin-block-end: -1px; } } .fc-sticky { /* no .fc wrap because used as child of body */ position: -webkit-sticky; position: sticky; } .fc { .fc-view-harness { flex-grow: 1; /* because this harness is WITHIN the .fc's flexbox */ position: relative; } .fc-view-harness-active>.fc-view { position: absolute; inset-block-start: 0; inset-inline-end: 0; inset-block-end: 0; inset-inline-start: 0; } .fc-col-header-cell-cushion { display: inline-block; /* x-browser for when sticky (when multi-tier header) */ padding: 2px 4px; } .fc-bg-event, .fc-non-business, .fc-highlight { /* will always have a harness with position:relative/absolute, so absolutely expand */ position: absolute; inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: 0; } .fc-non-business { background: transparent; } .fc-bg-event { background: rgb(4, 179, 114, 0.3); opacity: 0.3; .fc-event-title { margin: .5em; font-size: .85em; font-style: italic; } } .fc-highlight { background: rgba(188, 232, 241, 0.3); } .fc-cell-shaded, .fc-day-disabled { background: rgba(208, 208, 208, 0.3); } } /* link resets */ /* ---------------------------------------------------------------------------------------------------- */ a.fc-event { text-decoration: none; &:hover { text-decoration: none; } } /* cursor */ .fc-event { &[href], &.fc-event-draggable { cursor: pointer; } .fc-event-main { position: relative; z-index: 2; } } /* event text content */ /* ---------------------------------------------------------------------------------------------------- */ /* dragging */ /* ---------------------------------------------------------------------------------------------------- */ .fc-event-dragging { &:not(.fc-event-selected) { /* MOUSE */ opacity: 0.75; } &.fc-event-selected { /* TOUCH */ box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3); } } /* resizing */ /* ---------------------------------------------------------------------------------------------------- */ /* (subclasses should hone positioning for touch and non-touch) */ .fc-event { .fc-event-resizer { display: none; position: absolute; z-index: 4; } &:hover .fc-event-resizer { display: block; } } .fc-event-selected { .fc-event-resizer { display: block; border-radius: 4px; border-width: 1px; width: 8px; height: 8px; border-style: solid; border-color: inherit; background: rgb($white); &:before { content: ''; position: absolute; inset-block-start: -20px; inset-inline-start: -20px; inset-inline-end: -20px; inset-block-end: -20px; } } box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); &:before { content: ""; position: absolute; z-index: 3; inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: 0; } &:after { content: ""; background: rgba(0, 0, 0, 0.25); position: absolute; z-index: 1; /* assume there's a border on all sides. overcome it. */ /* sometimes there's NOT a border, in which case the dimmer will go over */ /* an adjacent border, which looks fine. */ inset-block-start: -1px; inset-inline-start: -1px; inset-inline-end: -1px; inset-block-end: -1px; } } /* selecting (always TOUCH) */ /* ---------------------------------------------------------------------------------------------------- */ /* A HORIZONTAL event */ .fc-h-event { .fc-event-main { color: #{$fixed-black}; } .fc-event-main-frame { display: flex; /* for make fc-event-title-container expand */ } .fc-event-time { max-width: 100%; /* clip overflow on this element */ overflow: hidden; } .fc-event-title-container { /* serves as a container for the sticky cushion */ flex-grow: 1; flex-shrink: 1; min-width: 0; /* important for allowing to shrink all the way */ } .fc-event-title { display: inline-block; /* need this to be sticky cross-browser */ vertical-align: top; /* for not messing up line-height */ inset-inline-start: 0; /* for sticky */ inset-inline-end: 0; /* for sticky */ max-width: 100%; /* clip overflow on this element */ overflow: hidden; } &.fc-event-selected:before { /* expand hit area */ inset-block-start: -10px; inset-block-end: -10px; } } /* adjust border and border-radius (if there is any) for non-start/end */ .fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-start), .fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-end) { border-start-start-radius: 0; border-end-start-radius: 0; border-inline-start-width: 0; } .fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-end), .fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-start) { border-start-end-radius: 0; border-end-end-radius: 0; border-inline-end-width: 0; } /* resizers */ .fc-h-event:not(.fc-event-selected) .fc-event-resizer { inset-block-start: 0; inset-block-end: 0; width: 8px; } .fc-direction-ltr .fc-h-event:not(.fc-event-selected) .fc-event-resizer-start, .fc-direction-rtl .fc-h-event:not(.fc-event-selected) .fc-event-resizer-end { cursor: w-resize; inset-inline-start: -4px; } .fc-direction-ltr .fc-h-event:not(.fc-event-selected) .fc-event-resizer-end, .fc-direction-rtl .fc-h-event:not(.fc-event-selected) .fc-event-resizer-start { cursor: e-resize; inset-inline-end: -4px; } /* resizers for TOUCH */ .fc-h-event.fc-event-selected .fc-event-resizer { inset-block-start: 50%; margin-block-start: -4px; } .fc-direction-ltr .fc-h-event.fc-event-selected .fc-event-resizer-start, .fc-direction-rtl .fc-h-event.fc-event-selected .fc-event-resizer-end { inset-inline-start: -4px; } .fc-direction-ltr .fc-h-event.fc-event-selected .fc-event-resizer-end, .fc-direction-rtl .fc-h-event.fc-event-selected .fc-event-resizer-start { inset-inline-end: -4px; } .fc { .fc-popover { position: absolute; inset-block-start: 0; /* for when not positioned yet */ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .fc-popover-header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 3px 4px; } .fc-popover-title { margin: 0 2px; } .fc-popover-close { cursor: pointer; opacity: 0.65; font-size: 1.1em; } } .fc-theme-standard { .fc-popover { border: 1px solid #{$border}; background: rgb($white); } .fc-popover-header { background: rgba(208, 208, 208, 0.3); } } /* help things clear margins of inner content */ .fc-daygrid-day-frame:before, .fc-daygrid-day-events:before, .fc-daygrid-event-harness:before, .fc-daygrid-day-frame:after, .fc-daygrid-day-events:after, .fc-daygrid-event-harness:after { content: ""; clear: both; display: table; } .fc { .fc-daygrid-body { /* a
that wraps the table */ position: relative; z-index: 0; /* container inner z-index's because s can't do it */ } .fc-daygrid-day.fc-day-today { background-color: #{$black-03}; } .fc-daygrid-day-frame { position: relative; min-height: 100%; /* seems to work better than `height` because sets height after rows/cells naturally do it */ } .fc-daygrid-day-top { display: flex; flex-direction: row-reverse; } .fc-day-other .fc-daygrid-day-top { opacity: 0.3; } .fc-daygrid-day-number { position: relative; z-index: 4; padding: 4px; color: #{$default-color}; } .fc-daygrid-day-events { margin-block-start: 1px; /* needs to be margin, not padding, so that available cell height can be computed */ } .fc-daygrid-body-balanced .fc-daygrid-day-events { position: absolute; inset-inline-start: 0; inset-inline-end: 0; } .fc-daygrid-body-unbalanced .fc-daygrid-day-events { position: relative; /* for containing abs positioned event harnesses */ min-height: 2em; /* in addition to being a min-height during natural height, equalizes the heights a little bit */ } .fc-daygrid-body-natural .fc-daygrid-day-events { margin-block-end: 1em; } .fc-daygrid-event-harness { position: relative; } .fc-daygrid-event-harness-abs { position: absolute; inset-block-start: 0; /* fallback coords for when cannot yet be computed */ inset-inline-start: 0; /* */ inset-inline-end: 0; /* */ } .fc-daygrid-bg-harness { position: absolute; inset-block-start: 0; inset-block-end: 0; } .fc-daygrid-day-bg { .fc-non-business { z-index: 1; } .fc-bg-event { z-index: 2; } .fc-highlight { z-index: 3; } } .fc-daygrid-event { z-index: 6; margin-block-start: 1px; &.fc-event-mirror { z-index: 7; } } .fc-daygrid-day-bottom { font-size: .85em; margin: 2px 3px 0; } .fc-daygrid-more-link { position: relative; z-index: 4; cursor: pointer; } .fc-daygrid-week-number { position: absolute; z-index: 5; inset-block-start: 0; padding: 2px; min-width: 1.5em; text-align: center; background-color: rgba(208, 208, 208, 0.3); color: #808080; } .fc-more-popover { z-index: 8; .fc-popover-body { min-width: 220px; padding: 10px; } } } .fc-direction-ltr .fc-daygrid-event.fc-event-start, .fc-direction-rtl .fc-daygrid-event.fc-event-end { margin-inline-start: 2px; } .fc-direction-ltr .fc-daygrid-event.fc-event-end, .fc-direction-rtl .fc-daygrid-event.fc-event-start { margin-inline-end: 2px; } .fc-direction-ltr .fc-daygrid-week-number { inset-inline-start: 0; border-start-start-radius: 0; border-start-end-radius: 0; border-end-end-radius: 3px; border-end-start-radius: 0; } .fc-direction-rtl .fc-daygrid-week-number { inset-inline-end: 0; border-start-start-radius: 0; border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: 3px; } .fc-liquid-hack .fc-daygrid-day-frame { position: static; /* will cause inner absolute stuff to expand to */ } .fc-daygrid-event { /* make root-level, because will be dragged-and-dropped outside of a component root */ position: relative; /* for z-indexes assigned later */ white-space: nowrap; border-radius: 3px; /* dot event needs this to when selected */ font-size: .85em; } /* --- the rectangle ("block") style of event --- */ .fc-daygrid-block-event { .fc-event-time { font-weight: bold; padding: 5px 10px; } .fc-event-title { padding: 5px 10px; } } /* --- the dot style of event --- */ .fc-daygrid-dot-event { display: flex; align-items: center; padding: 2px 0; .fc-event-title { flex-grow: 1; flex-shrink: 1; min-width: 0; /* important for allowing to shrink all the way */ overflow: hidden; padding: 2px; } &:hover, &.fc-event-mirror { background: rgba(0, 0, 0, 0.1); } &.fc-event-selected:before { /* expand hit area */ inset-block-start: -10px; inset-block-end: -10px; } } /* --- spacing between time and title --- */ .fc-direction-ltr .fc-daygrid-event .fc-event-time { margin-inline-end: 3px; margin-inline-start: 6px; } .fc-direction-rtl .fc-daygrid-event .fc-event-time { margin-inline-start: 3px; margin-inline-end: 6px; } /* A VERTICAL event */ .fc-v-event { .fc-event-main { color: $fixed-black; height: 100%; } .fc-event-main-frame { height: 100%; display: flex; flex-direction: column; } .fc-event-time { flex-grow: 0; flex-shrink: 0; max-height: 100%; overflow: hidden; } .fc-event-title-container { /* a container for the sticky cushion */ flex-grow: 1; flex-shrink: 1; min-height: 0; /* important for allowing to shrink all the way */ } .fc-event-title { /* will have fc-sticky on it */ inset-block-start: 0; inset-block-end: 0; max-height: 100%; /* clip overflow */ overflow: hidden; } &:not(.fc-event-start) { border-block-start-width: 0; border-start-start-radius: 0; border-start-end-radius: 0; } &:not(.fc-event-end) { border-block-end-width: 0; border-end-start-radius: 0; border-end-end-radius: 0; } &.fc-event-selected:before { /* expand hit area */ inset-inline-start: -10px; inset-inline-end: -10px; } .fc-event-resizer-start { cursor: n-resize; } .fc-event-resizer-end { cursor: s-resize; } &:not(.fc-event-selected) { .fc-event-resizer { height: 8px; inset-inline-start: 0; inset-inline-end: 0; } .fc-event-resizer-start { inset-block-start: -4px; } .fc-event-resizer-end { inset-block-end: -4px; } } &.fc-event-selected { .fc-event-resizer { inset-inline-start: 50%; margin-inline-start: -4px; } .fc-event-resizer-start { inset-block-start: -4px; } .fc-event-resizer-end { inset-block-end: -4px; } } } .fc { .fc-timegrid .fc-daygrid-body { /* the all-day daygrid within the timegrid view */ z-index: 2; /* put above the timegrid-body so that more-popover is above everything. TODO: better solution */ } .fc-timegrid-divider { padding: 0 0 2px; /* browsers get confused when you set height. use padding instead */ } .fc-timegrid-body { position: relative; z-index: 1; /* scope the z-indexes of slots and cols */ min-height: 100%; /* fill height always, even when slat table doesn't grow */ } .fc-timegrid-axis-chunk { /* for advanced ScrollGrid */ position: relative; >table { position: relative; z-index: 1; /* above the now-indicator-container */ } } .fc-timegrid-slots { position: relative; z-index: 1; } .fc-timegrid-slot { /* a */ height: 1.5em; border-block-end: 0; &:empty:before { content: '\00a0'; /* make sure there's at least an empty space to create height for height syncing */ } } .fc-timegrid-slot-minor { border-block-start-style: dotted; } .fc-timegrid-slot-label-cushion { display: inline-block; white-space: nowrap; } .fc-timegrid-slot-label { vertical-align: middle; /* vertical align the slots */ } .fc-timegrid-axis-cushion, .fc-timegrid-slot-label-cushion { padding: 0 4px; } .fc-timegrid-axis-frame-liquid { height: 100%; /* will need liquid-hack in FF */ } .fc-timegrid-axis-frame { overflow: hidden; display: flex; align-items: center; /* vertical align */ justify-content: flex-end; /* horizontal align. matches text-align below */ } .fc-timegrid-axis-cushion { max-width: 60px; /* limits the width of the "all-day" text */ flex-shrink: 0; /* allows text to expand how it normally would, regardless of constrained width */ } } .fc-direction-ltr .fc-timegrid-slot-label-frame { text-align: end; } .fc-direction-rtl .fc-timegrid-slot-label-frame { text-align: start; } .fc-liquid-hack .fc-timegrid-axis-frame-liquid { height: auto; position: absolute; inset-block-start: 0; inset-inline-end: 0; inset-block-end: 0; inset-inline-start: 0; } .fc { .fc-timegrid-col.fc-day-today { background-color: rgba(255, 220, 40, 0.15); } .fc-timegrid-col-frame { min-height: 100%; /* liquid-hack is below */ position: relative; } } .fc-liquid-hack .fc-timegrid-col-frame { height: auto; position: absolute; inset-block-start: 0; inset-inline-end: 0; inset-block-end: 0; inset-inline-start: 0; } .fc-media-screen { .fc-timegrid-cols { position: absolute; /* no z-index. children will decide and go above slots */ inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: 0; >table { height: 100%; } } .fc-timegrid-col-bg, .fc-timegrid-col-events, .fc-timegrid-now-indicator-container { position: absolute; inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 0; } .fc-timegrid-event-harness { position: absolute; /* top/left/right/bottom will all be set by JS */ } } .fc { .fc-timegrid-col-bg { z-index: 2; /* TODO: kill */ .fc-non-business { z-index: 1; } .fc-bg-event { z-index: 2; } .fc-highlight { z-index: 3; } } .fc-timegrid-bg-harness { position: absolute; /* top/bottom will be set by JS */ inset-inline-start: 0; inset-inline-end: 0; } .fc-timegrid-col-events { z-index: 3; /* child event segs have z-indexes that are scoped within this div */ } .fc-timegrid-now-indicator-container { inset-block-end: 0; overflow: hidden; /* don't let overflow of lines/arrows cause unnecessary scrolling */ /* z-index is set on the individual elements */ } } .fc-direction-ltr .fc-timegrid-col-events { margin-block-start: 0; margin-inline-end: 2.5%; margin-block-end: 0; margin-inline-start: 2px; } .fc-direction-rtl .fc-timegrid-col-events { margin-block-start: 0; margin-inline-end: 2px; margin-block-end: 0; margin-inline-start: 2.5%; } .fc-timegrid-event-harness-inset .fc-timegrid-event { box-shadow: 0px 0px 0px 1px rgb($white); } .fc-timegrid-event { &.fc-event-mirror { box-shadow: 0px 0px 0px 1px rgb($white); } /* events need to be root */ font-size: .85em; border-radius: 3px; .fc-event-main { padding: 1px 1px 0; } .fc-event-time { white-space: nowrap; font-size: .85em; margin-block-end: 1px; } } .fc-timegrid-event-condensed { .fc-event-main-frame { flex-direction: row; overflow: hidden; } .fc-event-time:after { content: '\00a0-\00a0'; /* dash surrounded by non-breaking spaces */ } .fc-event-title { font-size: .85em; } } .fc-media-screen .fc-timegrid-event { position: absolute; /* absolute WITHIN the harness */ inset-block-start: 0; inset-block-end: 1px; /* stay away from bottom slot line */ inset-inline-start: 0; inset-inline-end: 0; } .fc { .fc-timegrid-now-indicator-line { position: absolute; z-index: 4; inset-inline-start: 0; inset-inline-end: 0; border-style: solid; border-color: red; border-width: 1px 0 0; } .fc-timegrid-now-indicator-arrow { position: absolute; z-index: 4; margin-block-start: -5px; /* vertically center on top coordinate */ border-style: solid; border-color: red; } } .fc-direction-ltr .fc-timegrid-now-indicator-arrow { inset-inline-start: 0; /* triangle pointing right. TODO: mixin */ border-width: 5px 0 5px 6px; border-block-start-color: transparent; border-block-end-color: transparent; } .fc-direction-rtl .fc-timegrid-now-indicator-arrow { inset-inline-end: 0; /* triangle pointing left. TODO: mixin */ border-width: 5px 6px 5px 0; border-block-start-color: transparent; border-block-end-color: transparent; } .fc-theme-standard .fc-list { border: 1px solid #{$border}; } .fc { .fc-list-empty { background-color: #{$bg-hover}; height: 100%; display: flex; justify-content: center; align-items: center; /* vertically aligns fc-list-empty-inner */ } .fc-list-empty-cushion { margin: 5em 0; } .fc-list-table { width: 100%; border-style: hidden; /* kill outer border on theme */ tr>* { border-inline-start: 0; border-inline-end: 0; } } .fc-list-sticky .fc-list-day>* { /* the cells */ position: -webkit-sticky; position: sticky; inset-block-start: 0; background: rgb($white); /* for when headers are styled to be transparent and sticky */ } .fc-list-table { th { padding: 0; /* uses an inner-wrapper instead... */ } td { padding: 8px 14px; } } .fc-list-day-cushion { padding: 8px 14px; &:after { content: ""; clear: both; display: table; /* clear floating */ } } } .fc-theme-standard .fc-list-day-cushion { background-color: #{$bg-hover}; } .fc-direction-ltr .fc-list-day-text, .fc-direction-rtl .fc-list-day-side-text { float: $float-start; } .fc-direction-ltr .fc-list-day-side-text { float: $float-end; } .fc-direction-rtl { .fc-list-day-text { float: $float-end; } .fc-list-table .fc-list-event-graphic { padding-inline-start: 0; } } /* make the dot closer to the event title */ .fc .fc-list-event.fc-event-forced-url { cursor: pointer; /* whole row will seem clickable */ } .fc-list-event.fc-event { background: transparent; color: #{$default-color}; } .fc { .fc-list-event-graphic, .fc-list-event-time { white-space: nowrap; width: 1px; } .fc-list-event-title a { color: inherit; text-decoration: none; } .fc-list-event.fc-event-forced-url:hover a { text-decoration: underline; } } .fc-theme-bootstrap a:not([href]) { color: inherit; } #external-events { .fc-event { margin: 5px 0; cursor: move; padding: 8px; border: 0; } p { margin: 1.5em 0; font-size: 11px; color: #666; input { margin: 0; vertical-align: middle; } } } @media (max-width: 767px) { .fc { .fc-toolbar { display: inline-block; } .fc-toolbar-title { position: absolute; inset-inline-end: 10px; font-size: 20px; inset-block-start: 10px; display: contents; } } .fc-toolbar-chunk { margin-block-end: 10px; } .fc .fc-col-header-cell-cushion { display: inline-block; padding: 2px 0px; } } @media (max-width: 320px) { .fc .fc-toolbar-title { font-size: 16px; display: contents; } } .fc-theme-standard th { padding: 15px; } .fc-event { border: 0px solid #{$primary} !important; } .fc-theme-standard .fc-list-day-cushion { .fc-list-day-text, .fc-list-day-side-text { color: #{$default-color} !important; font-weight: 500; } } .fc-event-dragging { padding: 8px; } .fc-list-table td { border: 0; } #calendar2 .fc-scrollgrid.fc-scrollgrid-liquid thead { tr { td { border-block-end: 0 !important; } th { border-block-end: 0; } border-block-end: 0; } border-block-end: 0; } .fc-col-header thead th { padding: 15px; } .fc-theme-standard th { padding: 0; } .fc .fc-daygrid-body-natural .fc-daygrid-day-events { margin-block-end: 0; } .fc-event-title { color: $fixed-black; }