You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

508 lines
11 KiB

2 years ago
  1. /*!
  2. * FullCalendar Scheduler v1.5.0
  3. * Docs & License: http://fullcalendar.io/scheduler/
  4. * (c) 2016 Adam Shaw
  5. */
  6. /* TODO: break this file up */
  7. /* Scroller
  8. --------------------------------------------------------------------------------------------------*/
  9. .fc-scroller-clip {
  10. overflow: hidden; /* for clipping scrollbars */
  11. position: relative; /* so things like scrollfollowers can attach to this */
  12. }
  13. /* supresses rendering of native scrollbars */
  14. /* on .fc-scroller */
  15. .fc-no-scrollbars {
  16. background: rgba(255, 255, 255, 0); /* hack for dynamic DOM nodes (in Chrome OSX at least) */
  17. }
  18. .fc-no-scrollbars::-webkit-scrollbar {
  19. width: 0;
  20. height: 0;
  21. }
  22. .fc-scroller-canvas {
  23. position: relative; /* origin for bg */
  24. box-sizing: border-box; /* so that padding (for gutter) will be part of height */
  25. min-height: 100%;
  26. }
  27. .fc-scroller-canvas > .fc-bg {
  28. z-index: 1; /* make default? */
  29. }
  30. .fc-scroller-canvas > .fc-content {
  31. z-index: 2; /* make default? */
  32. position: relative; /* origin for inner content */
  33. border-style: solid;
  34. border-width: 0;
  35. }
  36. /* for themed, hard to get the border-color, so just forget it (REVISIT) */
  37. .ui-widget .fc-scroller-canvas > .fc-content {
  38. border-color: transparent;
  39. }
  40. .fc-scroller-canvas.fc-gutter-left > .fc-content { border-left-width: 1px; margin-left: -1px }
  41. .fc-scroller-canvas.fc-gutter-right > .fc-content { border-right-width: 1px; margin-right: -1px }
  42. .fc-scroller-canvas.fc-gutter-top > .fc-content { border-top-width: 1px; margin-top: -1px }
  43. /* content is responsible for bottom border */
  44. /* View Structure
  45. --------------------------------------------------------------------------------------------------*/
  46. .fc-rtl .fc-timeline {
  47. direction: rtl;
  48. }
  49. .fc-timeline .fc-divider {
  50. width: 3px;
  51. border-style: double; /* overcome neighboring borders */
  52. }
  53. .fc-timeline .fc-head > tr > .fc-divider {
  54. border-bottom: 0;
  55. }
  56. .fc-timeline .fc-body > tr > .fc-divider {
  57. border-top: 0;
  58. }
  59. .fc-timeline .fc-body .fc-divider.ui-widget-header {
  60. background-image: none;
  61. }
  62. .fc-scrolled .fc-head .fc-scroller {
  63. z-index: 2; /* so drop shadow will go above body panes */
  64. }
  65. .fc-timeline.fc-scrolled .fc-head .fc-scroller {
  66. box-shadow: 0 3px 4px rgba(0,0,0,0.075);
  67. }
  68. .fc-timeline .fc-body .fc-scroller {
  69. z-index: 1;
  70. }
  71. /*
  72. on most tables that expand to the edges, kill the outer border,
  73. because the container elements take care of it.
  74. example tables:
  75. .fc-scroller-canvas .fc-content table
  76. .fc-scroller-canvas .fc-bg .fc-slats table
  77. */
  78. .fc-timeline .fc-scroller-canvas > div > table,
  79. .fc-timeline .fc-scroller-canvas > div > div > table {
  80. border-style: hidden;
  81. }
  82. /*
  83. for resource rows (in both the spreadsheet and timeline areas),
  84. undo previous rule in order to always show last border.
  85. */
  86. .fc-timeline .fc-scroller-canvas > .fc-content > .fc-rows > table {
  87. border-bottom-style: none;
  88. }
  89. /* Table Cell Common
  90. --------------------------------------------------------------------------------------------------*/
  91. .fc-timeline th,
  92. .fc-timeline td {
  93. white-space: nowrap;
  94. }
  95. .fc-timeline .fc-cell-content {
  96. overflow: hidden;
  97. }
  98. .fc-timeline .fc-cell-text {
  99. padding-left: 4px;
  100. padding-right: 4px;
  101. }
  102. .fc-timeline .fc-col-resizer {
  103. cursor: col-resize;
  104. }
  105. /*
  106. Cells at the start of a week
  107. TODO: figure out better styling
  108. .fc-ltr .fc-timeline .fc-em-cell div {
  109. border-left: 3px solid #eee;
  110. height: 100%;
  111. }
  112. .fc-rtl .fc-timeline .fc-em-cell {
  113. border-right-width: 3px;
  114. }
  115. */
  116. /* head */
  117. .fc-timeline th {
  118. vertical-align: middle;
  119. }
  120. .fc-timeline .fc-head .fc-cell-content {
  121. padding-top: 3px;
  122. padding-bottom: 3px;
  123. }
  124. /* body */
  125. .fc-timeline .fc-body .ui-widget-content {
  126. background-image: none;
  127. }
  128. /* Resource Area
  129. --------------------------------------------------------------------------------------------------*/
  130. .fc-resource-area {
  131. width: 30%;
  132. }
  133. .fc-resource-area col {
  134. width: 40%;
  135. min-width: 70px; /* will be read by JS */
  136. }
  137. .fc-resource-area col.fc-main-col {
  138. width: 60%; /* make the first column in a nested setup bigger */
  139. }
  140. .fc-flat .fc-expander-space { /* fc-flat is opposite of fc-nested */
  141. display: none;
  142. }
  143. .fc-ltr .fc-resource-area tr > * {
  144. text-align: left;
  145. }
  146. .fc-rtl .fc-resource-area tr > * {
  147. text-align: right;
  148. }
  149. .fc-resource-area .fc-cell-content {
  150. padding-left: 4px;
  151. padding-right: 4px;
  152. }
  153. /* head */
  154. .fc-resource-area .fc-super th {
  155. text-align: center;
  156. }
  157. .fc-resource-area th > div {
  158. position: relative;
  159. }
  160. .fc-resource-area th .fc-cell-content {
  161. position: relative;
  162. z-index: 1;
  163. }
  164. .fc-resource-area th .fc-col-resizer {
  165. position: absolute;
  166. z-index: 2;
  167. top: 0;
  168. bottom: 0;
  169. width: 5px;
  170. }
  171. .fc-ltr .fc-resource-area th .fc-col-resizer {
  172. right: -3px;
  173. }
  174. .fc-rtl .fc-resource-area th .fc-col-resizer {
  175. left: -3px;
  176. }
  177. /* body */
  178. tr.fc-collapsed > td, /* before the transition (prevents initial flicker) */
  179. tr.fc-transitioning > td { /* during the transition */
  180. overflow: hidden; /* prevents absolutely-positioned events from bleeding out */
  181. }
  182. tr.fc-transitioning > td > div {
  183. transition: margin-top 0.2s;
  184. }
  185. tr.fc-collapsed > td > div {
  186. margin-top: -10px;
  187. }
  188. .fc-body .fc-resource-area .fc-cell-content { /* might BE the cell */
  189. padding-top: 8px;
  190. padding-bottom: 8px;
  191. }
  192. .fc-no-overlap .fc-body .fc-resource-area .fc-cell-content { /* might BE the cell */
  193. padding-top: 5px;
  194. padding-bottom: 5px;
  195. }
  196. .fc-resource-area .fc-icon { /* the expander and spacers before the expander */
  197. width: 1em; /* ensure constant width, esp for empty icons */
  198. font-size: .9em;
  199. vertical-align: middle;
  200. margin-top: -1%;
  201. }
  202. .fc-resource-area .fc-expander {
  203. cursor: pointer;
  204. color: #666; /* for the icon within */
  205. }
  206. /* Time Area
  207. --------------------------------------------------------------------------------------------------*/
  208. .fc-time-area col {
  209. min-width: 2.2em; /* detected by JS */
  210. }
  211. /* head */
  212. .fc-ltr .fc-time-area .fc-chrono th {
  213. text-align: left;
  214. }
  215. .fc-rtl .fc-time-area .fc-chrono th {
  216. text-align: right;
  217. }
  218. /* body slats (vertical lines) */
  219. .fc-time-area .fc-slats { /* fc-bg is responsible for a lot of this now! */
  220. position: absolute;
  221. z-index: 1;
  222. top: 0;
  223. left: 0;
  224. right: 0;
  225. bottom: 0;
  226. }
  227. .fc-time-area .fc-slats table {
  228. height: 100%;
  229. }
  230. .fc-time-area .fc-slats .fc-minor {
  231. border-style: dotted;
  232. }
  233. .fc-time-area .fc-slats td {
  234. border-width: 0 1px; /* need to do this. sometimes -1 margin wouldn't hide the dotted */
  235. }
  236. .fc-ltr .fc-time-area .fc-slats td {
  237. border-right-width: 0;
  238. }
  239. .fc-rtl .fc-time-area .fc-slats td {
  240. border-left-width: 0;
  241. }
  242. /* body content containers
  243. can be within rows or directly within the pane's content
  244. */
  245. .fc-time-area .fc-bgevent-container,
  246. .fc-time-area .fc-highlight-container {
  247. position: absolute;
  248. z-index: 2; /* only for directly within pane. not for row. overridden later */
  249. top: 0;
  250. bottom: 0;
  251. width: 0;
  252. }
  253. .fc-ltr .fc-time-area .fc-helper-container, /* only within row */
  254. .fc-ltr .fc-time-area .fc-bgevent-container,
  255. .fc-ltr .fc-time-area .fc-highlight-container {
  256. left: 0;
  257. }
  258. .fc-rtl .fc-time-area .fc-helper-container, /* only within row */
  259. .fc-rtl .fc-time-area .fc-bgevent-container,
  260. .fc-rtl .fc-time-area .fc-highlight-container {
  261. right: 0;
  262. }
  263. .fc-time-area .fc-bgevent,
  264. .fc-time-area .fc-highlight {
  265. position: absolute;
  266. top: 0;
  267. bottom: 0;
  268. }
  269. /* body resource rows */
  270. .fc-time-area .fc-rows {
  271. position: relative;
  272. z-index: 3;
  273. }
  274. .fc-time-area .fc-rows .ui-widget-content {
  275. background: none;
  276. }
  277. .fc-time-area .fc-rows td > div {
  278. position: relative;
  279. }
  280. .fc-time-area .fc-rows .fc-bgevent-container,
  281. .fc-time-area .fc-rows .fc-highlight-container {
  282. z-index: 1;
  283. }
  284. .fc-time-area .fc-event-container {
  285. position: relative;
  286. z-index: 2; /* above bgevent and highlight */
  287. width: 0; /* for event positioning. will end up on correct side based on dir */
  288. }
  289. .fc-time-area .fc-helper-container { /* also an fc-event-container */
  290. position: absolute;
  291. z-index: 3;
  292. top: 0;
  293. }
  294. .fc-time-area .fc-event-container {
  295. padding-bottom: 8px;
  296. top: -1px;
  297. }
  298. .fc-time-area tr:first-child .fc-event-container {
  299. top: 0;
  300. }
  301. .fc-no-overlap .fc-time-area .fc-event-container {
  302. padding-bottom: 0;
  303. top: 0;
  304. }
  305. /* Now Indicator
  306. --------------------------------------------------------------------------------------------------*/
  307. .fc-timeline .fc-now-indicator { /* both the arrow and the line */
  308. z-index: 3; /* one above scroller's fc-content */
  309. top: 0;
  310. }
  311. .fc-time-area .fc-now-indicator-arrow {
  312. margin: 0 -6px; /* 5, then one more to counteract scroller's negative margins */
  313. /* triangle pointing down... */
  314. border-width: 6px 5px 0 5px;
  315. border-left-color: transparent;
  316. border-right-color: transparent;
  317. }
  318. .fc-time-area .fc-now-indicator-line {
  319. margin: 0 -1px; /* counteract scroller's negative margins */
  320. bottom: 0;
  321. border-left-width: 1px;
  322. }
  323. /* Time Grid Events
  324. --------------------------------------------------------------------------------------------------*/
  325. .fc-timeline-event {
  326. position: absolute;
  327. border-radius: 0;
  328. padding: 2px 0;
  329. margin-bottom: 1px;
  330. }
  331. .fc-no-overlap .fc-timeline-event {
  332. padding: 5px 0;
  333. margin-bottom: 0;
  334. }
  335. /* don't overlap grid lines at the event's end */
  336. .fc-ltr .fc-timeline-event { margin-right: 1px }
  337. .fc-rtl .fc-timeline-event { margin-left: 1px }
  338. .fc-timeline-event .fc-content {
  339. padding: 0 1px;
  340. white-space: nowrap;
  341. overflow: hidden;
  342. }
  343. .fc-timeline-event .fc-time {
  344. font-weight: bold;
  345. padding: 0 1px;
  346. }
  347. .fc-rtl .fc-timeline-event .fc-time {
  348. display: inline-block; /* will force it on the other side */
  349. }
  350. .fc-timeline-event .fc-title {
  351. padding: 0 1px;
  352. }
  353. .fc-timeline-event.fc-selected .fc-bg {
  354. display: none; /* hide semi-white background, to appear darker */
  355. }
  356. /* follower logic */
  357. .fc-ltr .fc-timeline-event .fc-title {
  358. padding-left: 10px;
  359. margin-left: -8px;
  360. }
  361. .fc-rtl .fc-timeline-event .fc-title {
  362. padding-right: 10px;
  363. margin-right: -8px;
  364. }
  365. .fc-ltr .fc-timeline-event.fc-not-start .fc-title {
  366. margin-left: -2px;
  367. }
  368. .fc-rtl .fc-timeline-event.fc-not-start .fc-title {
  369. margin-right: -2px;
  370. }
  371. .fc-timeline-event.fc-not-start .fc-title,
  372. .fc-body .fc-time-area .fc-following {
  373. position: relative;
  374. }
  375. .fc-timeline-event.fc-not-start .fc-title:before,
  376. .fc-body .fc-time-area .fc-following:before { /* generic arrow */
  377. content: "";
  378. position: absolute;
  379. top: 50%;
  380. margin-top: -5px;
  381. border: 5px solid #000;
  382. border-top-color: transparent;
  383. border-bottom-color: transparent;
  384. opacity: .5;
  385. }
  386. .fc-ltr .fc-timeline-event.fc-not-start .fc-title:before,
  387. .fc-ltr .fc-body .fc-time-area .fc-following:before { /* LTR. left pointing arrow */
  388. border-left: 0;
  389. left: 2px;
  390. }
  391. .fc-rtl .fc-timeline-event.fc-not-start .fc-title:before,
  392. .fc-rtl .fc-body .fc-time-area .fc-following:before { /* RTL. right pointing arrow */
  393. border-right: 0;
  394. right: 2px;
  395. }
  396. /* License Message
  397. --------------------------------------------------------------------------------------------------*/
  398. .fc-license-message {
  399. position: absolute;
  400. z-index: 99999;
  401. bottom: 1px;
  402. left: 1px;
  403. background: #eee;
  404. border-color: #ddd;
  405. border-style: solid;
  406. border-width: 1px 1px 0 0;
  407. padding: 2px 4px;
  408. font-size: 12px;
  409. border-top-right-radius: 3px;
  410. }