fullcalendar.css 30 KB

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