fullcalendar.css 30 KB

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