351 lines
7.3 KiB
CSS
351 lines
7.3 KiB
CSS
/* Scroller
|
|
--------------------------------------------------------------------------------------------------*/
|
|
.fc-scroller-clip {
|
|
overflow: hidden;
|
|
/* for clipping scrollbars */
|
|
position: relative;
|
|
/* so things like scrollfollowers can attach to this */
|
|
}
|
|
|
|
/* supresses rendering of native scrollbars */
|
|
/* on .fc-scroller */
|
|
.fc-no-scrollbars {
|
|
background: rgba(255, 255, 255, 0);
|
|
/* hack for dynamic DOM nodes (in Chrome OSX at least) */
|
|
}
|
|
|
|
.fc-no-scrollbars::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.fc-scroller-canvas {
|
|
position: relative;
|
|
/* origin for bg */
|
|
box-sizing: border-box;
|
|
/* so that padding (for gutter) will be part of height */
|
|
min-height: 100%;
|
|
}
|
|
|
|
.fc-scroller-canvas > .fc-bg {
|
|
z-index: 1;
|
|
/* make default? */
|
|
}
|
|
|
|
.fc-scroller-canvas > .fc-content {
|
|
z-index: 2;
|
|
/* make default? */
|
|
position: relative;
|
|
/* origin for inner content */
|
|
border-style: solid;
|
|
border-width: 0;
|
|
}
|
|
|
|
.fc-scroller-canvas.fc-gutter-left > .fc-content {
|
|
border-left-width: 1px;
|
|
margin-left: -1px;
|
|
}
|
|
|
|
.fc-scroller-canvas.fc-gutter-right > .fc-content {
|
|
border-right-width: 1px;
|
|
margin-right: -1px;
|
|
}
|
|
|
|
.fc-scroller-canvas.fc-gutter-top > .fc-content {
|
|
border-top-width: 1px;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
/* content is responsible for bottom border */
|
|
/* View Structure
|
|
--------------------------------------------------------------------------------------------------*/
|
|
.fc-rtl .fc-timeline {
|
|
direction: rtl;
|
|
}
|
|
|
|
.fc-scrolled .fc-head .fc-scroller {
|
|
z-index: 2;
|
|
/* so drop shadow will go above body panes */
|
|
}
|
|
|
|
.fc-timeline.fc-scrolled .fc-head .fc-scroller {
|
|
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.075);
|
|
}
|
|
|
|
.fc-timeline .fc-body .fc-scroller {
|
|
z-index: 1;
|
|
}
|
|
|
|
/*
|
|
on most tables that expand to the edges, kill the outer border,
|
|
because the container elements take care of it.
|
|
example tables:
|
|
.fc-scroller-canvas .fc-content table
|
|
.fc-scroller-canvas .fc-bg .fc-slats table
|
|
*/
|
|
.fc-timeline .fc-scroller-canvas > div > table,
|
|
.fc-timeline .fc-scroller-canvas > div > div > table {
|
|
border-style: hidden;
|
|
}
|
|
|
|
/*
|
|
for resource rows (in both the spreadsheet and timeline areas),
|
|
undo previous rule in order to always show last border.
|
|
*/
|
|
.fc-timeline .fc-scroller-canvas > .fc-content > .fc-rows > table {
|
|
border-bottom-style: none;
|
|
}
|
|
|
|
/* Table Cell Common
|
|
--------------------------------------------------------------------------------------------------*/
|
|
.fc-timeline th,
|
|
.fc-timeline td {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.fc-timeline .fc-cell-content {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.fc-timeline .fc-cell-text {
|
|
display: inline-block;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
/*
|
|
Cells at the start of a week
|
|
TODO: figure out better styling
|
|
|
|
.fc-ltr .fc-timeline .fc-em-cell div {
|
|
border-left: 3px solid #eee;
|
|
height: 100%;
|
|
}
|
|
.fc-rtl .fc-timeline .fc-em-cell {
|
|
border-right-width: 3px;
|
|
}
|
|
*/
|
|
/* head */
|
|
.fc-timeline th {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.fc-timeline .fc-head .fc-cell-content {
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.fc-timeline .fc-head .fc-time-area .fc-cell-content {
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Time Area
|
|
--------------------------------------------------------------------------------------------------*/
|
|
.fc-time-area col {
|
|
min-width: 2.2em;
|
|
/* detected by JS */
|
|
}
|
|
|
|
/* head */
|
|
.fc-ltr .fc-time-area .fc-chrono th {
|
|
text-align: left;
|
|
}
|
|
|
|
.fc-rtl .fc-time-area .fc-chrono th {
|
|
text-align: right;
|
|
}
|
|
|
|
/* body slats (vertical lines) */
|
|
.fc-time-area .fc-slats {
|
|
/* fc-bg is responsible for a lot of this now! */
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.fc-time-area .fc-slats table {
|
|
height: 100%;
|
|
}
|
|
|
|
.fc-time-area .fc-slats .fc-minor {
|
|
border-style: dotted;
|
|
}
|
|
|
|
.fc-time-area .fc-slats td {
|
|
border-width: 0 1px;
|
|
/* need to do this. sometimes -1 margin wouldn't hide the dotted */
|
|
}
|
|
|
|
.fc-ltr .fc-time-area .fc-slats td {
|
|
border-right-width: 0;
|
|
}
|
|
|
|
.fc-rtl .fc-time-area .fc-slats td {
|
|
border-left-width: 0;
|
|
}
|
|
|
|
/* body content containers
|
|
can be within rows or directly within the pane's content
|
|
*/
|
|
.fc-time-area .fc-bgevent-container,
|
|
.fc-time-area .fc-highlight-container {
|
|
position: absolute;
|
|
z-index: 2;
|
|
/* only for directly within pane. not for row. overridden later */
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.fc-ltr .fc-time-area .fc-mirror-container,
|
|
.fc-ltr .fc-time-area .fc-bgevent-container,
|
|
.fc-ltr .fc-time-area .fc-highlight-container {
|
|
left: 0;
|
|
}
|
|
|
|
.fc-rtl .fc-time-area .fc-mirror-container,
|
|
.fc-rtl .fc-time-area .fc-bgevent-container,
|
|
.fc-rtl .fc-time-area .fc-highlight-container {
|
|
right: 0;
|
|
}
|
|
|
|
.fc-time-area .fc-bgevent,
|
|
.fc-time-area .fc-highlight {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
/* Now Indicator
|
|
--------------------------------------------------------------------------------------------------*/
|
|
.fc-timeline .fc-now-indicator {
|
|
/* both the arrow and the line */
|
|
z-index: 3;
|
|
/* one above scroller's fc-content */
|
|
top: 0;
|
|
}
|
|
|
|
.fc-time-area .fc-now-indicator-arrow {
|
|
margin: 0 -6px;
|
|
/* 5, then one more to counteract scroller's negative margins */
|
|
/* triangle pointing down... */
|
|
border-width: 6px 5px 0 5px;
|
|
border-left-color: transparent;
|
|
border-right-color: transparent;
|
|
}
|
|
|
|
.fc-time-area .fc-now-indicator-line {
|
|
margin: 0 -1px;
|
|
/* counteract scroller's negative margins */
|
|
bottom: 0;
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
/* Event Container
|
|
--------------------------------------------------------------------------------------------------*/
|
|
.fc-time-area .fc-event-container {
|
|
position: relative;
|
|
z-index: 2;
|
|
/* above bgevent and highlight */
|
|
width: 0;
|
|
/* for event positioning. will end up on correct side based on dir */
|
|
}
|
|
|
|
.fc-time-area .fc-mirror-container {
|
|
/* also an fc-event-container */
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: 0;
|
|
}
|
|
|
|
.fc-time-area .fc-event-container {
|
|
padding-bottom: 8px;
|
|
top: -1px;
|
|
}
|
|
|
|
.fc-time-area tr:first-child .fc-event-container {
|
|
top: 0;
|
|
}
|
|
|
|
.fc-no-overlap .fc-time-area .fc-event-container {
|
|
padding-bottom: 0;
|
|
top: 0;
|
|
}
|
|
|
|
/* Time Grid Events
|
|
--------------------------------------------------------------------------------------------------*/
|
|
.fc-timeline-event {
|
|
position: absolute;
|
|
display: flex;
|
|
border-radius: 0;
|
|
padding: 2px 1px;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.fc-no-overlap .fc-timeline-event {
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.fc-ltr .fc-timeline-event {
|
|
flex-direction: row;
|
|
margin-right: 1px;
|
|
}
|
|
|
|
.fc-rtl .fc-timeline-event {
|
|
margin-left: 1px;
|
|
}
|
|
|
|
.fc-timeline-event .fc-time-wrap {
|
|
flex-shrink: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.fc-timeline-event .fc-title-wrap {
|
|
flex-grow: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.fc-timeline-event .fc-time,
|
|
.fc-timeline-event .fc-title {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
max-width: 100%;
|
|
padding: 0 2px;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.fc-timeline-event .fc-time {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.fc-timeline-event.fc-not-start:before,
|
|
.fc-timeline-event.fc-not-end:after {
|
|
content: "";
|
|
align-self: center;
|
|
width: 0;
|
|
height: 0;
|
|
margin: 0 1px;
|
|
border: 5px solid #000;
|
|
border-top-color: transparent;
|
|
border-bottom-color: transparent;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.fc-ltr .fc-timeline-event.fc-not-start:before,
|
|
.fc-rtl .fc-timeline-event.fc-not-end:after {
|
|
border-left: 0;
|
|
}
|
|
|
|
.fc-ltr .fc-timeline-event.fc-not-end:after,
|
|
.fc-rtl .fc-timeline-event.fc-not-start:before {
|
|
border-right: 0;
|
|
} |