602 line
11KB

  1. /*!
  2. * FullCalendar v2.0.0-beta2 Stylesheet
  3. * Docs & License: http://arshaw.com/fullcalendar/
  4. * (c) 2013 Adam Shaw
  5. */
  6. .fc {
  7. direction: ltr;
  8. text-align: left;
  9. }
  10. .fc table {
  11. border-collapse: collapse;
  12. border-spacing: 0;
  13. }
  14. html .fc,
  15. .fc table {
  16. font-size: 1em;
  17. }
  18. .fc td,
  19. .fc th {
  20. padding: 0;
  21. vertical-align: top;
  22. }
  23. /* Header
  24. ------------------------------------------------------------------------*/
  25. .fc-header td {
  26. white-space: nowrap;
  27. }
  28. .fc-header-left {
  29. width: 25%;
  30. text-align: left;
  31. }
  32. .fc-header-center {
  33. text-align: center;
  34. }
  35. .fc-header-right {
  36. width: 25%;
  37. text-align: right;
  38. }
  39. .fc-header-title {
  40. display: inline-block;
  41. vertical-align: top;
  42. }
  43. .fc-header-title h2 {
  44. margin-top: 0;
  45. white-space: nowrap;
  46. }
  47. .fc .fc-header-space {
  48. padding-left: 10px;
  49. }
  50. .fc-header .fc-button {
  51. margin-bottom: 1em;
  52. vertical-align: top;
  53. }
  54. /* buttons edges butting together */
  55. .fc-header .fc-button {
  56. margin-right: -1px;
  57. }
  58. .fc-header .fc-corner-right, /* non-theme */
  59. .fc-header .ui-corner-right { /* theme */
  60. margin-right: 0; /* back to normal */
  61. }
  62. /* button layering (for border precedence) */
  63. .fc-header .fc-state-hover,
  64. .fc-header .ui-state-hover {
  65. z-index: 2;
  66. }
  67. .fc-header .fc-state-down {
  68. z-index: 3;
  69. }
  70. .fc-header .fc-state-active,
  71. .fc-header .ui-state-active {
  72. z-index: 4;
  73. }
  74. /* Content
  75. ------------------------------------------------------------------------*/
  76. .fc-content {
  77. position: relative;
  78. z-index: 1; /* scopes all other z-index's to be inside this container */
  79. clear: both;
  80. zoom: 1; /* for IE7, gives accurate coordinates for [un]freezeContentHeight */
  81. }
  82. .fc-view {
  83. position: relative;
  84. width: 100%;
  85. overflow: hidden;
  86. }
  87. /* Cell Styles
  88. ------------------------------------------------------------------------*/
  89. .fc-widget-header, /* <th>, usually */
  90. .fc-widget-content { /* <td>, usually */
  91. border: 1px solid #ddd;
  92. }
  93. .fc-state-highlight { /* <td> today cell */ /* TODO: add .fc-today to <th> */
  94. background: #fcf8e3;
  95. }
  96. .fc-cell-overlay { /* semi-transparent rectangle while dragging */
  97. background: #bce8f1;
  98. opacity: .3;
  99. filter: alpha(opacity=30); /* for IE */
  100. }
  101. /* Buttons
  102. ------------------------------------------------------------------------*/
  103. .fc-button {
  104. position: relative;
  105. display: inline-block;
  106. padding: 0 .6em;
  107. overflow: hidden;
  108. height: 1.9em;
  109. line-height: 1.9em;
  110. white-space: nowrap;
  111. cursor: pointer;
  112. }
  113. .fc-state-default { /* non-theme */
  114. border: 1px solid;
  115. }
  116. .fc-state-default.fc-corner-left { /* non-theme */
  117. border-top-left-radius: 4px;
  118. border-bottom-left-radius: 4px;
  119. }
  120. .fc-state-default.fc-corner-right { /* non-theme */
  121. border-top-right-radius: 4px;
  122. border-bottom-right-radius: 4px;
  123. }
  124. /*
  125. Our default prev/next buttons use HTML entities like &lsaquo; &rsaquo; &laquo; &raquo;
  126. and we'll try to make them look good cross-browser.
  127. */
  128. .fc-button .fc-icon {
  129. margin: 0 .1em;
  130. font-size: 2em;
  131. font-family: "Courier New", Courier, monospace;
  132. vertical-align: baseline; /* for IE7 */
  133. }
  134. .fc-icon-left-single-arrow:after {
  135. content: "\02039";
  136. font-weight: bold;
  137. }
  138. .fc-icon-right-single-arrow:after {
  139. content: "\0203A";
  140. font-weight: bold;
  141. }
  142. .fc-icon-left-double-arrow:after {
  143. content: "\000AB";
  144. }
  145. .fc-icon-right-double-arrow:after {
  146. content: "\000BB";
  147. }
  148. /* icon (for jquery ui) */
  149. .fc-button .ui-icon {
  150. position: relative;
  151. top: 50%;
  152. float: left;
  153. margin-top: -8px; /* we know jqui icons are always 16px tall */
  154. }
  155. /*
  156. button states
  157. borrowed from twitter bootstrap (http://twitter.github.com/bootstrap/)
  158. */
  159. .fc-state-default {
  160. background-color: #f5f5f5;
  161. background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  162. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  163. background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  164. background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  165. background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  166. background-repeat: repeat-x;
  167. border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  168. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  169. color: #333;
  170. text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  171. box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  172. }
  173. .fc-state-hover,
  174. .fc-state-down,
  175. .fc-state-active,
  176. .fc-state-disabled {
  177. color: #333333;
  178. background-color: #e6e6e6;
  179. }
  180. .fc-state-hover {
  181. color: #333333;
  182. text-decoration: none;
  183. background-position: 0 -15px;
  184. -webkit-transition: background-position 0.1s linear;
  185. -moz-transition: background-position 0.1s linear;
  186. -o-transition: background-position 0.1s linear;
  187. transition: background-position 0.1s linear;
  188. }
  189. .fc-state-down,
  190. .fc-state-active {
  191. background-color: #cccccc;
  192. background-image: none;
  193. outline: 0;
  194. box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  195. }
  196. .fc-state-disabled {
  197. cursor: default;
  198. background-image: none;
  199. opacity: 0.65;
  200. filter: alpha(opacity=65);
  201. box-shadow: none;
  202. }
  203. /* Global Event Styles
  204. ------------------------------------------------------------------------*/
  205. .fc-event-container > * {
  206. z-index: 8;
  207. }
  208. .fc-event-container > .ui-draggable-dragging,
  209. .fc-event-container > .ui-resizable-resizing {
  210. z-index: 9;
  211. }
  212. .fc-event {
  213. border: 1px solid #3a87ad; /* default BORDER color */
  214. background-color: #3a87ad; /* default BACKGROUND color */
  215. color: #fff; /* default TEXT color */
  216. font-size: .85em;
  217. cursor: default;
  218. }
  219. a.fc-event {
  220. text-decoration: none;
  221. }
  222. a.fc-event,
  223. .fc-event-draggable {
  224. cursor: pointer;
  225. }
  226. .fc-rtl .fc-event {
  227. text-align: right;
  228. }
  229. .fc-event-inner {
  230. width: 100%;
  231. height: 100%;
  232. overflow: hidden;
  233. }
  234. .fc-event-time,
  235. .fc-event-title {
  236. padding: 0 1px;
  237. }
  238. .fc .ui-resizable-handle {
  239. display: block;
  240. position: absolute;
  241. z-index: 99999;
  242. overflow: hidden; /* hacky spaces (IE6/7) */
  243. font-size: 300%; /* */
  244. line-height: 50%; /* */
  245. }
  246. /* Horizontal Events
  247. ------------------------------------------------------------------------*/
  248. .fc-event-hori {
  249. border-width: 1px 0;
  250. margin-bottom: 1px;
  251. }
  252. .fc-ltr .fc-event-hori.fc-event-start,
  253. .fc-rtl .fc-event-hori.fc-event-end {
  254. border-left-width: 1px;
  255. border-top-left-radius: 3px;
  256. border-bottom-left-radius: 3px;
  257. }
  258. .fc-ltr .fc-event-hori.fc-event-end,
  259. .fc-rtl .fc-event-hori.fc-event-start {
  260. border-right-width: 1px;
  261. border-top-right-radius: 3px;
  262. border-bottom-right-radius: 3px;
  263. }
  264. /* resizable */
  265. .fc-event-hori .ui-resizable-e {
  266. top: 0 !important; /* importants override pre jquery ui 1.7 styles */
  267. right: -3px !important;
  268. width: 7px !important;
  269. height: 100% !important;
  270. cursor: e-resize;
  271. }
  272. .fc-event-hori .ui-resizable-w {
  273. top: 0 !important;
  274. left: -3px !important;
  275. width: 7px !important;
  276. height: 100% !important;
  277. cursor: w-resize;
  278. }
  279. .fc-event-hori .ui-resizable-handle {
  280. _padding-bottom: 14px; /* IE6 had 0 height */
  281. }
  282. /* Reusable Separate-border Table
  283. ------------------------------------------------------------*/
  284. table.fc-border-separate {
  285. border-collapse: separate;
  286. }
  287. .fc-border-separate th,
  288. .fc-border-separate td {
  289. border-width: 1px 0 0 1px;
  290. }
  291. .fc-border-separate th.fc-last,
  292. .fc-border-separate td.fc-last {
  293. border-right-width: 1px;
  294. }
  295. .fc-border-separate tr.fc-last th,
  296. .fc-border-separate tr.fc-last td {
  297. border-bottom-width: 1px;
  298. }
  299. .fc-border-separate tbody tr.fc-first td,
  300. .fc-border-separate tbody tr.fc-first th {
  301. border-top-width: 0;
  302. }
  303. /* Month View, Basic Week View, Basic Day View
  304. ------------------------------------------------------------------------*/
  305. .fc-grid th {
  306. text-align: center;
  307. }
  308. .fc .fc-week-number {
  309. width: 22px;
  310. text-align: center;
  311. }
  312. .fc .fc-week-number div {
  313. padding: 0 2px;
  314. }
  315. .fc-grid .fc-day-number {
  316. float: right;
  317. padding: 0 2px;
  318. }
  319. .fc-grid .fc-other-month .fc-day-number {
  320. opacity: 0.3;
  321. filter: alpha(opacity=30); /* for IE */
  322. /* opacity with small font can sometimes look too faded
  323. might want to set the 'color' property instead
  324. making day-numbers bold also fixes the problem */
  325. }
  326. .fc-grid .fc-day-content {
  327. clear: both;
  328. padding: 2px 2px 1px; /* distance between events and day edges */
  329. }
  330. /* event styles */
  331. .fc-grid .fc-event-time {
  332. font-weight: bold;
  333. }
  334. /* right-to-left */
  335. .fc-rtl .fc-grid .fc-day-number {
  336. float: left;
  337. }
  338. .fc-rtl .fc-grid .fc-event-time {
  339. float: right;
  340. }
  341. /* Agenda Week View, Agenda Day View
  342. ------------------------------------------------------------------------*/
  343. .fc-agenda table {
  344. border-collapse: separate;
  345. }
  346. .fc-agenda-days th {
  347. text-align: center;
  348. }
  349. .fc-agenda .fc-agenda-axis {
  350. width: 50px;
  351. padding: 0 4px;
  352. vertical-align: middle;
  353. text-align: right;
  354. font-weight: normal;
  355. }
  356. .fc-agenda-slots .fc-agenda-axis {
  357. white-space: nowrap;
  358. }
  359. .fc-agenda .fc-week-number {
  360. font-weight: bold;
  361. }
  362. .fc-agenda .fc-day-content {
  363. padding: 2px 2px 1px;
  364. }
  365. /* make axis border take precedence */
  366. .fc-agenda-days .fc-agenda-axis {
  367. border-right-width: 1px;
  368. }
  369. .fc-agenda-days .fc-col0 {
  370. border-left-width: 0;
  371. }
  372. /* all-day area */
  373. .fc-agenda-allday th {
  374. border-width: 0 1px;
  375. }
  376. .fc-agenda-allday .fc-day-content {
  377. min-height: 34px; /* TODO: doesnt work well in quirksmode */
  378. _height: 34px;
  379. }
  380. /* divider (between all-day and slots) */
  381. .fc-agenda-divider-inner {
  382. height: 2px;
  383. overflow: hidden;
  384. }
  385. .fc-widget-header .fc-agenda-divider-inner {
  386. background: #eee;
  387. }
  388. /* slot rows */
  389. .fc-agenda-slots th {
  390. border-width: 1px 1px 0;
  391. }
  392. .fc-agenda-slots td {
  393. border-width: 1px 0 0;
  394. background: none;
  395. }
  396. .fc-agenda-slots td div {
  397. height: 20px;
  398. }
  399. .fc-agenda-slots tr.fc-slot0 th,
  400. .fc-agenda-slots tr.fc-slot0 td {
  401. border-top-width: 0;
  402. }
  403. .fc-agenda-slots tr.fc-minor th,
  404. .fc-agenda-slots tr.fc-minor td {
  405. border-top-style: dotted;
  406. }
  407. .fc-agenda-slots tr.fc-minor th.ui-widget-header {
  408. *border-top-style: solid; /* doesn't work with background in IE6/7 */
  409. }
  410. /* Vertical Events
  411. ------------------------------------------------------------------------*/
  412. .fc-event-vert {
  413. border-width: 0 1px;
  414. }
  415. .fc-event-vert.fc-event-start {
  416. border-top-width: 1px;
  417. border-top-left-radius: 3px;
  418. border-top-right-radius: 3px;
  419. }
  420. .fc-event-vert.fc-event-end {
  421. border-bottom-width: 1px;
  422. border-bottom-left-radius: 3px;
  423. border-bottom-right-radius: 3px;
  424. }
  425. .fc-event-vert .fc-event-time {
  426. white-space: nowrap;
  427. font-size: 10px;
  428. }
  429. .fc-event-vert .fc-event-inner {
  430. position: relative;
  431. z-index: 2;
  432. }
  433. .fc-event-vert .fc-event-bg { /* makes the event lighter w/ a semi-transparent overlay */
  434. position: absolute;
  435. z-index: 1;
  436. top: 0;
  437. left: 0;
  438. width: 100%;
  439. height: 100%;
  440. background: #fff;
  441. opacity: .25;
  442. filter: alpha(opacity=25);
  443. }
  444. .fc .ui-draggable-dragging .fc-event-bg, /* TODO: something nicer like .fc-opacity */
  445. .fc-select-helper .fc-event-bg {
  446. display: none\9; /* for IE6/7/8. nested opacity filters while dragging don't work */
  447. }
  448. /* resizable */
  449. .fc-event-vert .ui-resizable-s {
  450. bottom: 0 !important; /* importants override pre jquery ui 1.7 styles */
  451. width: 100% !important;
  452. height: 8px !important;
  453. overflow: hidden !important;
  454. line-height: 8px !important;
  455. font-size: 11px !important;
  456. font-family: monospace;
  457. text-align: center;
  458. cursor: s-resize;
  459. }
  460. .fc-agenda .ui-resizable-resizing { /* TODO: better selector */
  461. _overflow: hidden;
  462. }