fullcalendar.css 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293
  1. /*!
  2. * FullCalendar v3.10.2
  3. * Docs & License: https://fullcalendar.io/
  4. * (c) 2019 Adam Shaw
  5. */
  6. .fc {
  7. direction: ltr;
  8. text-align: left; }
  9. .fc-rtl {
  10. text-align: right; }
  11. body .fc {
  12. /* extra precedence to overcome jqui */
  13. font-size: 1em; }
  14. /* Colors
  15. --------------------------------------------------------------------------------------------------*/
  16. .fc-highlight {
  17. /* when user is selecting cells */
  18. background: #bce8f1;
  19. opacity: .3; }
  20. .fc-bgevent {
  21. /* default look for background events */
  22. background: #8fdf82;
  23. opacity: .3; }
  24. .fc-nonbusiness {
  25. /* default look for non-business-hours areas */
  26. /* will inherit .fc-bgevent's styles */
  27. background: #d7d7d7; }
  28. /* Buttons (styled <button> tags, normalized to work cross-browser)
  29. --------------------------------------------------------------------------------------------------*/
  30. .fc button {
  31. /* force height to include the border and padding */
  32. -moz-box-sizing: border-box;
  33. -webkit-box-sizing: border-box;
  34. box-sizing: border-box;
  35. /* dimensions */
  36. margin: 0;
  37. height: 2.1em;
  38. padding: 0 .6em;
  39. /* text & cursor */
  40. font-size: 1em;
  41. /* normalize */
  42. white-space: nowrap;
  43. cursor: pointer; }
  44. /* Firefox has an annoying inner border */
  45. .fc button::-moz-focus-inner {
  46. margin: 0;
  47. padding: 0; }
  48. .fc-state-default {
  49. /* non-theme */
  50. border: 1px solid; }
  51. .fc-state-default.fc-corner-left {
  52. /* non-theme */
  53. border-top-left-radius: 4px;
  54. border-bottom-left-radius: 4px; }
  55. .fc-state-default.fc-corner-right {
  56. /* non-theme */
  57. border-top-right-radius: 4px;
  58. border-bottom-right-radius: 4px; }
  59. /* icons in buttons */
  60. .fc button .fc-icon {
  61. /* non-theme */
  62. position: relative;
  63. top: -0.05em;
  64. /* seems to be a good adjustment across browsers */
  65. margin: 0 .2em;
  66. vertical-align: middle; }
  67. /*
  68. button states
  69. borrowed from twitter bootstrap (http://twitter.github.com/bootstrap/)
  70. */
  71. .fc-state-default {
  72. background-color: #f5f5f5;
  73. background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  74. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  75. background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  76. background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  77. background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  78. background-repeat: repeat-x;
  79. border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  80. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  81. color: #333;
  82. text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  83. box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); }
  84. .fc-state-hover,
  85. .fc-state-down,
  86. .fc-state-active,
  87. .fc-state-disabled {
  88. color: #333333;
  89. background-color: #e6e6e6; }
  90. .fc-state-hover {
  91. color: #333333;
  92. text-decoration: none;
  93. background-position: 0 -15px;
  94. -webkit-transition: background-position 0.1s linear;
  95. -moz-transition: background-position 0.1s linear;
  96. -o-transition: background-position 0.1s linear;
  97. transition: background-position 0.1s linear; }
  98. .fc-state-down,
  99. .fc-state-active {
  100. background-color: #cccccc;
  101. background-image: none;
  102. box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); }
  103. .fc-state-disabled {
  104. cursor: default;
  105. background-image: none;
  106. opacity: 0.65;
  107. box-shadow: none; }
  108. /* Buttons Groups
  109. --------------------------------------------------------------------------------------------------*/
  110. .fc-button-group {
  111. display: inline-block; }
  112. /*
  113. every button that is not first in a button group should scootch over one pixel and cover the
  114. previous button's border...
  115. */
  116. .fc .fc-button-group > * {
  117. /* extra precedence b/c buttons have margin set to zero */
  118. float: left;
  119. margin: 0 0 0 -1px; }
  120. .fc .fc-button-group > :first-child {
  121. /* same */
  122. margin-left: 0; }
  123. /* Popover
  124. --------------------------------------------------------------------------------------------------*/
  125. .fc-popover {
  126. position: absolute;
  127. box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }
  128. .fc-popover .fc-header {
  129. /* TODO: be more consistent with fc-head/fc-body */
  130. padding: 2px 4px; }
  131. .fc-popover .fc-header .fc-title {
  132. margin: 0 2px; }
  133. .fc-popover .fc-header .fc-close {
  134. cursor: pointer; }
  135. .fc-ltr .fc-popover .fc-header .fc-title,
  136. .fc-rtl .fc-popover .fc-header .fc-close {
  137. float: left; }
  138. .fc-rtl .fc-popover .fc-header .fc-title,
  139. .fc-ltr .fc-popover .fc-header .fc-close {
  140. float: right; }
  141. /* Misc Reusable Components
  142. --------------------------------------------------------------------------------------------------*/
  143. .fc-divider {
  144. border-style: solid;
  145. border-width: 1px; }
  146. hr.fc-divider {
  147. height: 0;
  148. margin: 0;
  149. padding: 0 0 2px;
  150. /* height is unreliable across browsers, so use padding */
  151. border-width: 1px 0; }
  152. .fc-clear {
  153. clear: both; }
  154. .fc-bg,
  155. .fc-bgevent-skeleton,
  156. .fc-highlight-skeleton,
  157. .fc-helper-skeleton {
  158. /* these element should always cling to top-left/right corners */
  159. position: absolute;
  160. top: 0;
  161. left: 0;
  162. right: 0; }
  163. .fc-bg {
  164. bottom: 0;
  165. /* strech bg to bottom edge */ }
  166. .fc-bg table {
  167. height: 100%;
  168. /* strech bg to bottom edge */ }
  169. /* Tables
  170. --------------------------------------------------------------------------------------------------*/
  171. .fc table {
  172. width: 100%;
  173. box-sizing: border-box;
  174. /* fix scrollbar issue in firefox */
  175. table-layout: fixed;
  176. border-collapse: collapse;
  177. border-spacing: 0;
  178. font-size: 1em;
  179. /* normalize cross-browser */ }
  180. .fc th {
  181. text-align: center; }
  182. .fc th,
  183. .fc td {
  184. border-style: solid;
  185. border-width: 1px;
  186. padding: 0;
  187. vertical-align: top; }
  188. .fc td.fc-today {
  189. border-style: double;
  190. /* overcome neighboring borders */ }
  191. /* Internal Nav Links
  192. --------------------------------------------------------------------------------------------------*/
  193. a[data-goto] {
  194. cursor: pointer; }
  195. a[data-goto]:hover {
  196. text-decoration: underline; }
  197. /* Fake Table Rows
  198. --------------------------------------------------------------------------------------------------*/
  199. .fc .fc-row {
  200. /* extra precedence to overcome themes w/ .ui-widget-content forcing a 1px border */
  201. /* no visible border by default. but make available if need be (scrollbar width compensation) */
  202. border-style: solid;
  203. border-width: 0; }
  204. .fc-row table {
  205. /* don't put left/right border on anything within a fake row.
  206. the outer tbody will worry about this */
  207. border-left: 0 hidden transparent;
  208. border-right: 0 hidden transparent;
  209. /* no bottom borders on rows */
  210. border-bottom: 0 hidden transparent; }
  211. .fc-row:first-child table {
  212. border-top: 0 hidden transparent;
  213. /* no top border on first row */ }
  214. /* Day Row (used within the header and the DayGrid)
  215. --------------------------------------------------------------------------------------------------*/
  216. .fc-row {
  217. position: relative; }
  218. .fc-row .fc-bg {
  219. z-index: 1; }
  220. /* highlighting cells & background event skeleton */
  221. .fc-row .fc-bgevent-skeleton,
  222. .fc-row .fc-highlight-skeleton {
  223. bottom: 0;
  224. /* stretch skeleton to bottom of row */ }
  225. .fc-row .fc-bgevent-skeleton table,
  226. .fc-row .fc-highlight-skeleton table {
  227. height: 100%;
  228. /* stretch skeleton to bottom of row */ }
  229. .fc-row .fc-highlight-skeleton td,
  230. .fc-row .fc-bgevent-skeleton td {
  231. border-color: transparent; }
  232. .fc-row .fc-bgevent-skeleton {
  233. z-index: 2; }
  234. .fc-row .fc-highlight-skeleton {
  235. z-index: 3; }
  236. /*
  237. row content (which contains day/week numbers and events) as well as "helper" (which contains
  238. temporary rendered events).
  239. */
  240. .fc-row .fc-content-skeleton {
  241. position: relative;
  242. z-index: 4;
  243. padding-bottom: 2px;
  244. /* matches the space above the events */ }
  245. .fc-row .fc-helper-skeleton {
  246. z-index: 5; }
  247. .fc .fc-row .fc-content-skeleton table,
  248. .fc .fc-row .fc-content-skeleton td,
  249. .fc .fc-row .fc-helper-skeleton td {
  250. /* see-through to the background below */
  251. /* extra precedence to prevent theme-provided backgrounds */
  252. background: none;
  253. /* in case <td>s are globally styled */
  254. border-color: transparent; }
  255. .fc-row .fc-content-skeleton td,
  256. .fc-row .fc-helper-skeleton td {
  257. /* don't put a border between events and/or the day number */
  258. border-bottom: 0; }
  259. .fc-row .fc-content-skeleton tbody td,
  260. .fc-row .fc-helper-skeleton tbody td {
  261. /* don't put a border between event cells */
  262. border-top: 0; }
  263. /* Scrolling Container
  264. --------------------------------------------------------------------------------------------------*/
  265. .fc-scroller {
  266. -webkit-overflow-scrolling: touch; }
  267. /* TODO: move to agenda/basic */
  268. .fc-scroller > .fc-day-grid,
  269. .fc-scroller > .fc-time-grid {
  270. position: relative;
  271. /* re-scope all positions */
  272. width: 100%;
  273. /* hack to force re-sizing this inner element when scrollbars appear/disappear */ }
  274. /* Global Event Styles
  275. --------------------------------------------------------------------------------------------------*/
  276. .fc-event {
  277. position: relative;
  278. /* for resize handle and other inner positioning */
  279. display: block;
  280. /* make the <a> tag block */
  281. font-size: .85em;
  282. line-height: 1.3;
  283. border-radius: 3px;
  284. border: 1px solid #3a87ad;
  285. /* default BORDER color */ }
  286. .fc-event,
  287. .fc-event-dot {
  288. background-color: #3a87ad;
  289. /* default BACKGROUND color */ }
  290. .fc-event,
  291. .fc-event:hover {
  292. color: #fff;
  293. /* default TEXT color */
  294. text-decoration: none;
  295. /* if <a> has an href */ }
  296. .fc-event[href],
  297. .fc-event.fc-draggable {
  298. cursor: pointer;
  299. /* give events with links and draggable events a hand mouse pointer */ }
  300. .fc-not-allowed,
  301. .fc-not-allowed .fc-event {
  302. /* to override an event's custom cursor */
  303. cursor: not-allowed; }
  304. .fc-event .fc-bg {
  305. /* the generic .fc-bg already does position */
  306. z-index: 1;
  307. background: #fff;
  308. opacity: .25; }
  309. .fc-event .fc-content {
  310. position: relative;
  311. z-index: 2; }
  312. /* resizer (cursor AND touch devices) */
  313. .fc-event .fc-resizer {
  314. position: absolute;
  315. z-index: 4; }
  316. /* resizer (touch devices) */
  317. .fc-event .fc-resizer {
  318. display: none; }
  319. .fc-event.fc-allow-mouse-resize .fc-resizer,
  320. .fc-event.fc-selected .fc-resizer {
  321. /* only show when hovering or selected (with touch) */
  322. display: block; }
  323. /* hit area */
  324. .fc-event.fc-selected .fc-resizer:before {
  325. /* 40x40 touch area */
  326. content: "";
  327. position: absolute;
  328. z-index: 9999;
  329. /* user of this util can scope within a lower z-index */
  330. top: 50%;
  331. left: 50%;
  332. width: 40px;
  333. height: 40px;
  334. margin-left: -20px;
  335. margin-top: -20px; }
  336. /* Event Selection (only for touch devices)
  337. --------------------------------------------------------------------------------------------------*/
  338. .fc-event.fc-selected {
  339. z-index: 9999 !important;
  340. /* overcomes inline z-index */
  341. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
  342. .fc-event.fc-selected.fc-dragging {
  343. box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3); }
  344. /* Horizontal Events
  345. --------------------------------------------------------------------------------------------------*/
  346. /* bigger touch area when selected */
  347. .fc-h-event.fc-selected:before {
  348. content: "";
  349. position: absolute;
  350. z-index: 3;
  351. /* below resizers */
  352. top: -10px;
  353. bottom: -10px;
  354. left: 0;
  355. right: 0; }
  356. /* events that are continuing to/from another week. kill rounded corners and butt up against edge */
  357. .fc-ltr .fc-h-event.fc-not-start,
  358. .fc-rtl .fc-h-event.fc-not-end {
  359. margin-left: 0;
  360. border-left-width: 0;
  361. padding-left: 1px;
  362. /* replace the border with padding */
  363. border-top-left-radius: 0;
  364. border-bottom-left-radius: 0; }
  365. .fc-ltr .fc-h-event.fc-not-end,
  366. .fc-rtl .fc-h-event.fc-not-start {
  367. margin-right: 0;
  368. border-right-width: 0;
  369. padding-right: 1px;
  370. /* replace the border with padding */
  371. border-top-right-radius: 0;
  372. border-bottom-right-radius: 0; }
  373. /* resizer (cursor AND touch devices) */
  374. /* left resizer */
  375. .fc-ltr .fc-h-event .fc-start-resizer,
  376. .fc-rtl .fc-h-event .fc-end-resizer {
  377. cursor: w-resize;
  378. left: -1px;
  379. /* overcome border */ }
  380. /* right resizer */
  381. .fc-ltr .fc-h-event .fc-end-resizer,
  382. .fc-rtl .fc-h-event .fc-start-resizer {
  383. cursor: e-resize;
  384. right: -1px;
  385. /* overcome border */ }
  386. /* resizer (mouse devices) */
  387. .fc-h-event.fc-allow-mouse-resize .fc-resizer {
  388. width: 7px;
  389. top: -1px;
  390. /* overcome top border */
  391. bottom: -1px;
  392. /* overcome bottom border */ }
  393. /* resizer (touch devices) */
  394. .fc-h-event.fc-selected .fc-resizer {
  395. /* 8x8 little dot */
  396. border-radius: 4px;
  397. border-width: 1px;
  398. width: 6px;
  399. height: 6px;
  400. border-style: solid;
  401. border-color: inherit;
  402. background: #fff;
  403. /* vertically center */
  404. top: 50%;
  405. margin-top: -4px; }
  406. /* left resizer */
  407. .fc-ltr .fc-h-event.fc-selected .fc-start-resizer,
  408. .fc-rtl .fc-h-event.fc-selected .fc-end-resizer {
  409. margin-left: -4px;
  410. /* centers the 8x8 dot on the left edge */ }
  411. /* right resizer */
  412. .fc-ltr .fc-h-event.fc-selected .fc-end-resizer,
  413. .fc-rtl .fc-h-event.fc-selected .fc-start-resizer {
  414. margin-right: -4px;
  415. /* centers the 8x8 dot on the right edge */ }
  416. /* DayGrid events
  417. ----------------------------------------------------------------------------------------------------
  418. We use the full "fc-day-grid-event" class instead of using descendants because the event won't
  419. be a descendant of the grid when it is being dragged.
  420. */
  421. .fc-day-grid-event {
  422. margin: 1px 2px 0;
  423. /* spacing between events and edges */
  424. padding: 0 1px; }
  425. tr:first-child > td > .fc-day-grid-event {
  426. margin-top: 2px;
  427. /* a little bit more space before the first event */ }
  428. .fc-day-grid-event.fc-selected:after {
  429. content: "";
  430. position: absolute;
  431. z-index: 1;
  432. /* same z-index as fc-bg, behind text */
  433. /* overcome the borders */
  434. top: -1px;
  435. right: -1px;
  436. bottom: -1px;
  437. left: -1px;
  438. /* darkening effect */
  439. background: #000;
  440. opacity: .25; }
  441. .fc-day-grid-event .fc-content {
  442. /* force events to be one-line tall */
  443. white-space: nowrap;
  444. overflow: hidden; }
  445. .fc-day-grid-event .fc-time {
  446. font-weight: bold; }
  447. /* resizer (cursor devices) */
  448. /* left resizer */
  449. .fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer,
  450. .fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer {
  451. margin-left: -2px;
  452. /* to the day cell's edge */ }
  453. /* right resizer */
  454. .fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer,
  455. .fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer {
  456. margin-right: -2px;
  457. /* to the day cell's edge */ }
  458. /* Event Limiting
  459. --------------------------------------------------------------------------------------------------*/
  460. /* "more" link that represents hidden events */
  461. a.fc-more {
  462. margin: 1px 3px;
  463. font-size: .85em;
  464. cursor: pointer;
  465. text-decoration: none; }
  466. a.fc-more:hover {
  467. text-decoration: underline; }
  468. .fc-limited {
  469. /* rows and cells that are hidden because of a "more" link */
  470. display: none; }
  471. /* popover that appears when "more" link is clicked */
  472. .fc-day-grid .fc-row {
  473. z-index: 1;
  474. /* make the "more" popover one higher than this */ }
  475. .fc-more-popover {
  476. z-index: 2;
  477. width: 220px; }
  478. .fc-more-popover .fc-event-container {
  479. padding: 10px; }
  480. /* Now Indicator
  481. --------------------------------------------------------------------------------------------------*/
  482. .fc-now-indicator {
  483. position: absolute;
  484. border: 0 solid red; }
  485. /* Utilities
  486. --------------------------------------------------------------------------------------------------*/
  487. .fc-unselectable {
  488. -webkit-user-select: none;
  489. -khtml-user-select: none;
  490. -moz-user-select: none;
  491. -ms-user-select: none;
  492. user-select: none;
  493. -webkit-touch-callout: none;
  494. -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  495. /*
  496. TODO: more distinction between this file and common.css
  497. */
  498. /* Colors
  499. --------------------------------------------------------------------------------------------------*/
  500. .fc-unthemed th,
  501. .fc-unthemed td,
  502. .fc-unthemed thead,
  503. .fc-unthemed tbody,
  504. .fc-unthemed .fc-divider,
  505. .fc-unthemed .fc-row,
  506. .fc-unthemed .fc-content,
  507. .fc-unthemed .fc-popover,
  508. .fc-unthemed .fc-list-view,
  509. .fc-unthemed .fc-list-heading td {
  510. border-color: #ddd; }
  511. .fc-unthemed .fc-popover {
  512. background-color: #fff; }
  513. .fc-unthemed .fc-divider,
  514. .fc-unthemed .fc-popover .fc-header,
  515. .fc-unthemed .fc-list-heading td {
  516. background: #eee; }
  517. .fc-unthemed .fc-popover .fc-header .fc-close {
  518. color: #666; }
  519. .fc-unthemed td.fc-today {
  520. background: #fcf8e3; }
  521. .fc-unthemed .fc-disabled-day {
  522. background: #d7d7d7;
  523. opacity: .3; }
  524. /* Icons (inline elements with styled text that mock arrow icons)
  525. --------------------------------------------------------------------------------------------------*/
  526. .fc-icon {
  527. display: inline-block;
  528. height: 1em;
  529. line-height: 1em;
  530. font-size: 1em;
  531. text-align: center;
  532. overflow: hidden;
  533. font-family: "Courier New", Courier, monospace;
  534. /* don't allow browser text-selection */
  535. -webkit-touch-callout: none;
  536. -webkit-user-select: none;
  537. -khtml-user-select: none;
  538. -moz-user-select: none;
  539. -ms-user-select: none;
  540. user-select: none; }
  541. /*
  542. Acceptable font-family overrides for individual icons:
  543. "Arial", sans-serif
  544. "Times New Roman", serif
  545. NOTE: use percentage font sizes or else old IE chokes
  546. */
  547. .fc-icon:after {
  548. position: relative; }
  549. .fc-icon-left-single-arrow:after {
  550. content: "\2039";
  551. font-weight: bold;
  552. font-size: 200%;
  553. top: -7%; }
  554. .fc-icon-right-single-arrow:after {
  555. content: "\203A";
  556. font-weight: bold;
  557. font-size: 200%;
  558. top: -7%; }
  559. .fc-icon-left-double-arrow:after {
  560. content: "\AB";
  561. font-size: 160%;
  562. top: -7%; }
  563. .fc-icon-right-double-arrow:after {
  564. content: "\BB";
  565. font-size: 160%;
  566. top: -7%; }
  567. .fc-icon-left-triangle:after {
  568. content: "\25C4";
  569. font-size: 125%;
  570. top: 3%; }
  571. .fc-icon-right-triangle:after {
  572. content: "\25BA";
  573. font-size: 125%;
  574. top: 3%; }
  575. .fc-icon-down-triangle:after {
  576. content: "\25BC";
  577. font-size: 125%;
  578. top: 2%; }
  579. .fc-icon-x:after {
  580. content: "\D7";
  581. font-size: 200%;
  582. top: 6%; }
  583. /* Popover
  584. --------------------------------------------------------------------------------------------------*/
  585. .fc-unthemed .fc-popover {
  586. border-width: 1px;
  587. border-style: solid; }
  588. .fc-unthemed .fc-popover .fc-header .fc-close {
  589. font-size: .9em;
  590. margin-top: 2px; }
  591. /* List View
  592. --------------------------------------------------------------------------------------------------*/
  593. .fc-unthemed .fc-list-item:hover td {
  594. background-color: #f5f5f5; }
  595. /* Colors
  596. --------------------------------------------------------------------------------------------------*/
  597. .ui-widget .fc-disabled-day {
  598. background-image: none; }
  599. /* Popover
  600. --------------------------------------------------------------------------------------------------*/
  601. .fc-popover > .ui-widget-header + .ui-widget-content {
  602. border-top: 0;
  603. /* where they meet, let the header have the border */ }
  604. /* Global Event Styles
  605. --------------------------------------------------------------------------------------------------*/
  606. .ui-widget .fc-event {
  607. /* overpower jqui's styles on <a> tags. TODO: more DRY */
  608. color: #fff;
  609. /* default TEXT color */
  610. text-decoration: none;
  611. /* if <a> has an href */
  612. /* undo ui-widget-header bold */
  613. font-weight: normal; }
  614. /* TimeGrid axis running down the side (for both the all-day area and the slot area)
  615. --------------------------------------------------------------------------------------------------*/
  616. .ui-widget td.fc-axis {
  617. font-weight: normal;
  618. /* overcome bold */ }
  619. /* TimeGrid Slats (lines that run horizontally)
  620. --------------------------------------------------------------------------------------------------*/
  621. .fc-time-grid .fc-slats .ui-widget-content {
  622. background: none;
  623. /* see through to fc-bg */ }
  624. .fc.fc-bootstrap3 a {
  625. text-decoration: none; }
  626. .fc.fc-bootstrap3 a[data-goto]:hover {
  627. text-decoration: underline; }
  628. .fc-bootstrap3 hr.fc-divider {
  629. border-color: inherit; }
  630. .fc-bootstrap3 .fc-today.alert {
  631. border-radius: 0; }
  632. /* Popover
  633. --------------------------------------------------------------------------------------------------*/
  634. .fc-bootstrap3 .fc-popover .panel-body {
  635. padding: 0; }
  636. /* TimeGrid Slats (lines that run horizontally)
  637. --------------------------------------------------------------------------------------------------*/
  638. .fc-bootstrap3 .fc-time-grid .fc-slats table {
  639. /* some themes have background color. see through to slats */
  640. background: none; }
  641. .fc.fc-bootstrap4 a {
  642. text-decoration: none; }
  643. .fc.fc-bootstrap4 a[data-goto]:hover {
  644. text-decoration: underline; }
  645. .fc-bootstrap4 hr.fc-divider {
  646. border-color: inherit; }
  647. .fc-bootstrap4 .fc-today.alert {
  648. border-radius: 0; }
  649. .fc-bootstrap4 a.fc-event:not([href]):not([tabindex]) {
  650. color: #fff; }
  651. .fc-bootstrap4 .fc-popover.card {
  652. position: absolute; }
  653. /* Popover
  654. --------------------------------------------------------------------------------------------------*/
  655. .fc-bootstrap4 .fc-popover .card-body {
  656. padding: 0; }
  657. /* TimeGrid Slats (lines that run horizontally)
  658. --------------------------------------------------------------------------------------------------*/
  659. .fc-bootstrap4 .fc-time-grid .fc-slats table {
  660. /* some themes have background color. see through to slats */
  661. background: none; }
  662. /* Toolbar
  663. --------------------------------------------------------------------------------------------------*/
  664. .fc-toolbar {
  665. text-align: center; }
  666. .fc-toolbar.fc-header-toolbar {
  667. margin-bottom: 1em; }
  668. .fc-toolbar.fc-footer-toolbar {
  669. margin-top: 1em; }
  670. .fc-toolbar .fc-left {
  671. float: left; }
  672. .fc-toolbar .fc-right {
  673. float: right; }
  674. .fc-toolbar .fc-center {
  675. display: inline-block; }
  676. /* the things within each left/right/center section */
  677. .fc .fc-toolbar > * > * {
  678. /* extra precedence to override button border margins */
  679. float: left;
  680. margin-left: .75em; }
  681. /* the first thing within each left/center/right section */
  682. .fc .fc-toolbar > * > :first-child {
  683. /* extra precedence to override button border margins */
  684. margin-left: 0; }
  685. /* title text */
  686. .fc-toolbar h2 {
  687. margin: 0; }
  688. /* button layering (for border precedence) */
  689. .fc-toolbar button {
  690. position: relative; }
  691. .fc-toolbar .fc-state-hover,
  692. .fc-toolbar .ui-state-hover {
  693. z-index: 2; }
  694. .fc-toolbar .fc-state-down {
  695. z-index: 3; }
  696. .fc-toolbar .fc-state-active,
  697. .fc-toolbar .ui-state-active {
  698. z-index: 4; }
  699. .fc-toolbar button:focus {
  700. z-index: 5; }
  701. /* View Structure
  702. --------------------------------------------------------------------------------------------------*/
  703. /* undo twitter bootstrap's box-sizing rules. normalizes positioning techniques */
  704. /* don't do this for the toolbar because we'll want bootstrap to style those buttons as some pt */
  705. .fc-view-container *,
  706. .fc-view-container *:before,
  707. .fc-view-container *:after {
  708. -webkit-box-sizing: content-box;
  709. -moz-box-sizing: content-box;
  710. box-sizing: content-box; }
  711. .fc-view,
  712. .fc-view > table {
  713. /* so dragged elements can be above the view's main element */
  714. position: relative;
  715. z-index: 1; }
  716. /* BasicView
  717. --------------------------------------------------------------------------------------------------*/
  718. /* day row structure */
  719. .fc-basicWeek-view .fc-content-skeleton,
  720. .fc-basicDay-view .fc-content-skeleton {
  721. /* there may be week numbers in these views, so no padding-top */
  722. padding-bottom: 1em;
  723. /* ensure a space at bottom of cell for user selecting/clicking */ }
  724. .fc-basic-view .fc-body .fc-row {
  725. min-height: 4em;
  726. /* ensure that all rows are at least this tall */ }
  727. /* a "rigid" row will take up a constant amount of height because content-skeleton is absolute */
  728. .fc-row.fc-rigid {
  729. overflow: hidden; }
  730. .fc-row.fc-rigid .fc-content-skeleton {
  731. position: absolute;
  732. top: 0;
  733. left: 0;
  734. right: 0; }
  735. /* week and day number styling */
  736. .fc-day-top.fc-other-month {
  737. opacity: 0.3; }
  738. .fc-basic-view .fc-week-number,
  739. .fc-basic-view .fc-day-number {
  740. padding: 2px; }
  741. .fc-basic-view th.fc-week-number,
  742. .fc-basic-view th.fc-day-number {
  743. padding: 0 2px;
  744. /* column headers can't have as much v space */ }
  745. .fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
  746. float: right; }
  747. .fc-rtl .fc-basic-view .fc-day-top .fc-day-number {
  748. float: left; }
  749. .fc-ltr .fc-basic-view .fc-day-top .fc-week-number {
  750. float: left;
  751. border-radius: 0 0 3px 0; }
  752. .fc-rtl .fc-basic-view .fc-day-top .fc-week-number {
  753. float: right;
  754. border-radius: 0 0 0 3px; }
  755. .fc-basic-view .fc-day-top .fc-week-number {
  756. min-width: 1.5em;
  757. text-align: center;
  758. background-color: #f2f2f2;
  759. color: #808080; }
  760. /* when week/day number have own column */
  761. .fc-basic-view td.fc-week-number {
  762. text-align: center; }
  763. .fc-basic-view td.fc-week-number > * {
  764. /* work around the way we do column resizing and ensure a minimum width */
  765. display: inline-block;
  766. min-width: 1.25em; }
  767. /* AgendaView all-day area
  768. --------------------------------------------------------------------------------------------------*/
  769. .fc-agenda-view .fc-day-grid {
  770. position: relative;
  771. z-index: 2;
  772. /* so the "more.." popover will be over the time grid */ }
  773. .fc-agenda-view .fc-day-grid .fc-row {
  774. min-height: 3em;
  775. /* all-day section will never get shorter than this */ }
  776. .fc-agenda-view .fc-day-grid .fc-row .fc-content-skeleton {
  777. padding-bottom: 1em;
  778. /* give space underneath events for clicking/selecting days */ }
  779. /* TimeGrid axis running down the side (for both the all-day area and the slot area)
  780. --------------------------------------------------------------------------------------------------*/
  781. .fc .fc-axis {
  782. /* .fc to overcome default cell styles */
  783. vertical-align: middle;
  784. padding: 0 4px;
  785. white-space: nowrap; }
  786. .fc-ltr .fc-axis {
  787. text-align: right; }
  788. .fc-rtl .fc-axis {
  789. text-align: left; }
  790. /* TimeGrid Structure
  791. --------------------------------------------------------------------------------------------------*/
  792. .fc-time-grid-container,
  793. .fc-time-grid {
  794. /* so slats/bg/content/etc positions get scoped within here */
  795. position: relative;
  796. z-index: 1; }
  797. .fc-time-grid {
  798. min-height: 100%;
  799. /* so if height setting is 'auto', .fc-bg stretches to fill height */ }
  800. .fc-time-grid table {
  801. /* don't put outer borders on slats/bg/content/etc */
  802. border: 0 hidden transparent; }
  803. .fc-time-grid > .fc-bg {
  804. z-index: 1; }
  805. .fc-time-grid .fc-slats,
  806. .fc-time-grid > hr {
  807. /* the <hr> AgendaView injects when grid is shorter than scroller */
  808. position: relative;
  809. z-index: 2; }
  810. .fc-time-grid .fc-content-col {
  811. position: relative;
  812. /* because now-indicator lives directly inside */ }
  813. .fc-time-grid .fc-content-skeleton {
  814. position: absolute;
  815. z-index: 3;
  816. top: 0;
  817. left: 0;
  818. right: 0; }
  819. /* divs within a cell within the fc-content-skeleton */
  820. .fc-time-grid .fc-business-container {
  821. position: relative;
  822. z-index: 1; }
  823. .fc-time-grid .fc-bgevent-container {
  824. position: relative;
  825. z-index: 2; }
  826. .fc-time-grid .fc-highlight-container {
  827. position: relative;
  828. z-index: 3; }
  829. .fc-time-grid .fc-event-container {
  830. position: relative;
  831. z-index: 4; }
  832. .fc-time-grid .fc-now-indicator-line {
  833. z-index: 5; }
  834. .fc-time-grid .fc-helper-container {
  835. /* also is fc-event-container */
  836. position: relative;
  837. z-index: 6; }
  838. /* TimeGrid Slats (lines that run horizontally)
  839. --------------------------------------------------------------------------------------------------*/
  840. .fc-time-grid .fc-slats td {
  841. height: 1.5em;
  842. border-bottom: 0;
  843. /* each cell is responsible for its top border */ }
  844. .fc-time-grid .fc-slats .fc-minor td {
  845. border-top-style: dotted; }
  846. /* TimeGrid Highlighting Slots
  847. --------------------------------------------------------------------------------------------------*/
  848. .fc-time-grid .fc-highlight-container {
  849. /* a div within a cell within the fc-highlight-skeleton */
  850. position: relative;
  851. /* scopes the left/right of the fc-highlight to be in the column */ }
  852. .fc-time-grid .fc-highlight {
  853. position: absolute;
  854. left: 0;
  855. right: 0;
  856. /* top and bottom will be in by JS */ }
  857. /* TimeGrid Event Containment
  858. --------------------------------------------------------------------------------------------------*/
  859. .fc-ltr .fc-time-grid .fc-event-container {
  860. /* space on the sides of events for LTR (default) */
  861. margin: 0 2.5% 0 2px; }
  862. .fc-rtl .fc-time-grid .fc-event-container {
  863. /* space on the sides of events for RTL */
  864. margin: 0 2px 0 2.5%; }
  865. .fc-time-grid .fc-event,
  866. .fc-time-grid .fc-bgevent {
  867. position: absolute;
  868. z-index: 1;
  869. /* scope inner z-index's */ }
  870. .fc-time-grid .fc-bgevent {
  871. /* background events always span full width */
  872. left: 0;
  873. right: 0; }
  874. /* Generic Vertical Event
  875. --------------------------------------------------------------------------------------------------*/
  876. .fc-v-event.fc-not-start {
  877. /* events that are continuing from another day */
  878. /* replace space made by the top border with padding */
  879. border-top-width: 0;
  880. padding-top: 1px;
  881. /* remove top rounded corners */
  882. border-top-left-radius: 0;
  883. border-top-right-radius: 0; }
  884. .fc-v-event.fc-not-end {
  885. /* replace space made by the top border with padding */
  886. border-bottom-width: 0;
  887. padding-bottom: 1px;
  888. /* remove bottom rounded corners */
  889. border-bottom-left-radius: 0;
  890. border-bottom-right-radius: 0; }
  891. /* TimeGrid Event Styling
  892. ----------------------------------------------------------------------------------------------------
  893. We use the full "fc-time-grid-event" class instead of using descendants because the event won't
  894. be a descendant of the grid when it is being dragged.
  895. */
  896. .fc-time-grid-event {
  897. overflow: hidden;
  898. /* don't let the bg flow over rounded corners */ }
  899. .fc-time-grid-event.fc-selected {
  900. /* need to allow touch resizers to extend outside event's bounding box */
  901. /* common fc-selected styles hide the fc-bg, so don't need this anyway */
  902. overflow: visible; }
  903. .fc-time-grid-event.fc-selected .fc-bg {
  904. display: none;
  905. /* hide semi-white background, to appear darker */ }
  906. .fc-time-grid-event .fc-content {
  907. overflow: hidden;
  908. /* for when .fc-selected */ }
  909. .fc-time-grid-event .fc-time,
  910. .fc-time-grid-event .fc-title {
  911. padding: 0 1px; }
  912. .fc-time-grid-event .fc-time {
  913. font-size: .85em;
  914. white-space: nowrap; }
  915. /* short mode, where time and title are on the same line */
  916. .fc-time-grid-event.fc-short .fc-content {
  917. /* don't wrap to second line (now that contents will be inline) */
  918. white-space: nowrap; }
  919. .fc-time-grid-event.fc-short .fc-time,
  920. .fc-time-grid-event.fc-short .fc-title {
  921. /* put the time and title on the same line */
  922. display: inline-block;
  923. vertical-align: top; }
  924. .fc-time-grid-event.fc-short .fc-time span {
  925. display: none;
  926. /* don't display the full time text... */ }
  927. .fc-time-grid-event.fc-short .fc-time:before {
  928. content: attr(data-start);
  929. /* ...instead, display only the start time */ }
  930. .fc-time-grid-event.fc-short .fc-time:after {
  931. content: "\A0-\A0";
  932. /* seperate with a dash, wrapped in nbsp's */ }
  933. .fc-time-grid-event.fc-short .fc-title {
  934. font-size: .85em;
  935. /* make the title text the same size as the time */
  936. padding: 0;
  937. /* undo padding from above */ }
  938. /* resizer (cursor device) */
  939. .fc-time-grid-event.fc-allow-mouse-resize .fc-resizer {
  940. left: 0;
  941. right: 0;
  942. bottom: 0;
  943. height: 8px;
  944. overflow: hidden;
  945. line-height: 8px;
  946. font-size: 11px;
  947. font-family: monospace;
  948. text-align: center;
  949. cursor: s-resize; }
  950. .fc-time-grid-event.fc-allow-mouse-resize .fc-resizer:after {
  951. content: "="; }
  952. /* resizer (touch device) */
  953. .fc-time-grid-event.fc-selected .fc-resizer {
  954. /* 10x10 dot */
  955. border-radius: 5px;
  956. border-width: 1px;
  957. width: 8px;
  958. height: 8px;
  959. border-style: solid;
  960. border-color: inherit;
  961. background: #fff;
  962. /* horizontally center */
  963. left: 50%;
  964. margin-left: -5px;
  965. /* center on the bottom edge */
  966. bottom: -5px; }
  967. /* Now Indicator
  968. --------------------------------------------------------------------------------------------------*/
  969. .fc-time-grid .fc-now-indicator-line {
  970. border-top-width: 1px;
  971. left: 0;
  972. right: 0; }
  973. /* arrow on axis */
  974. .fc-time-grid .fc-now-indicator-arrow {
  975. margin-top: -5px;
  976. /* vertically center on top coordinate */ }
  977. .fc-ltr .fc-time-grid .fc-now-indicator-arrow {
  978. left: 0;
  979. /* triangle pointing right... */
  980. border-width: 5px 0 5px 6px;
  981. border-top-color: transparent;
  982. border-bottom-color: transparent; }
  983. .fc-rtl .fc-time-grid .fc-now-indicator-arrow {
  984. right: 0;
  985. /* triangle pointing left... */
  986. border-width: 5px 6px 5px 0;
  987. border-top-color: transparent;
  988. border-bottom-color: transparent; }
  989. /* List View
  990. --------------------------------------------------------------------------------------------------*/
  991. /* possibly reusable */
  992. .fc-event-dot {
  993. display: inline-block;
  994. width: 10px;
  995. height: 10px;
  996. border-radius: 5px; }
  997. /* view wrapper */
  998. .fc-rtl .fc-list-view {
  999. direction: rtl;
  1000. /* unlike core views, leverage browser RTL */ }
  1001. .fc-list-view {
  1002. border-width: 1px;
  1003. border-style: solid; }
  1004. /* table resets */
  1005. .fc .fc-list-table {
  1006. table-layout: auto;
  1007. /* for shrinkwrapping cell content */ }
  1008. .fc-list-table td {
  1009. border-width: 1px 0 0;
  1010. padding: 8px 14px; }
  1011. .fc-list-table tr:first-child td {
  1012. border-top-width: 0; }
  1013. /* day headings with the list */
  1014. .fc-list-heading {
  1015. border-bottom-width: 1px; }
  1016. .fc-list-heading td {
  1017. font-weight: bold; }
  1018. .fc-ltr .fc-list-heading-main {
  1019. float: left; }
  1020. .fc-ltr .fc-list-heading-alt {
  1021. float: right; }
  1022. .fc-rtl .fc-list-heading-main {
  1023. float: right; }
  1024. .fc-rtl .fc-list-heading-alt {
  1025. float: left; }
  1026. /* event list items */
  1027. .fc-list-item.fc-has-url {
  1028. cursor: pointer;
  1029. /* whole row will be clickable */ }
  1030. .fc-list-item-marker,
  1031. .fc-list-item-time {
  1032. white-space: nowrap;
  1033. width: 1px; }
  1034. /* make the dot closer to the event title */
  1035. .fc-ltr .fc-list-item-marker {
  1036. padding-right: 0; }
  1037. .fc-rtl .fc-list-item-marker {
  1038. padding-left: 0; }
  1039. .fc-list-item-title a {
  1040. /* every event title cell has an <a> tag */
  1041. text-decoration: none;
  1042. color: inherit; }
  1043. .fc-list-item-title a[href]:hover {
  1044. /* hover effect only on titles with hrefs */
  1045. text-decoration: underline; }
  1046. /* message when no events */
  1047. .fc-list-empty-wrap2 {
  1048. position: absolute;
  1049. top: 0;
  1050. left: 0;
  1051. right: 0;
  1052. bottom: 0; }
  1053. .fc-list-empty-wrap1 {
  1054. width: 100%;
  1055. height: 100%;
  1056. display: table; }
  1057. .fc-list-empty {
  1058. display: table-cell;
  1059. vertical-align: middle;
  1060. text-align: center; }
  1061. .fc-unthemed .fc-list-empty {
  1062. /* theme will provide own background */
  1063. background-color: #eee; }