calendar.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515
  1. [class*="cal-cell"] {
  2. float: left;
  3. margin-left: 0;
  4. min-height: 1px;
  5. }
  6. .cal-row-fluid {
  7. width: 100%;
  8. *zoom: 1;
  9. }
  10. .cal-row-fluid:before,
  11. .cal-row-fluid:after {
  12. display: table;
  13. content: "";
  14. line-height: 0;
  15. }
  16. .cal-row-fluid:after {
  17. clear: both;
  18. }
  19. .cal-row-fluid [class*="cal-cell"] {
  20. display: block;
  21. width: 100%;
  22. -webkit-box-sizing: border-box;
  23. -moz-box-sizing: border-box;
  24. box-sizing: border-box;
  25. float: left;
  26. margin-left: 0%;
  27. *margin-left: -0.05213764337851929%;
  28. }
  29. .cal-row-fluid [class*="cal-cell"]:first-child {
  30. margin-left: 0;
  31. }
  32. .cal-row-fluid .controls-row [class*="cal-cell"] + [class*="cal-cell"] {
  33. margin-left: 0%;
  34. }
  35. .cal-row-fluid .cal-cell7 {
  36. width: 100%;
  37. *width: 99.94669509594883%;
  38. }
  39. .cal-row-fluid .cal-cell6 {
  40. width: 85.71428571428571%;
  41. *width: 85.66098081023453%;
  42. }
  43. .cal-row-fluid .cal-cell5 {
  44. width: 71.42857142857142%;
  45. *width: 71.37526652452024%;
  46. }
  47. .cal-row-fluid .cal-cell4 {
  48. width: 57.14285714285714%;
  49. *width: 57.089552238805965%;
  50. }
  51. .cal-row-fluid .cal-cell3 {
  52. width: 42.857142857142854%;
  53. *width: 42.80383795309168%;
  54. }
  55. .cal-row-fluid .cal-cell2 {
  56. width: 28.57142857142857%;
  57. *width: 28.518123667377395%;
  58. }
  59. .cal-row-fluid .cal-cell1 {
  60. width: 14.285714285714285%;
  61. *width: 14.232409381663112%;
  62. }
  63. .cal-week-box .cal-offset7,
  64. .cal-row-fluid .cal-offset7,
  65. .cal-row-fluid .cal-offset7:first-child {
  66. margin-left: 100%;
  67. *margin-left: 99.89339019189765%;
  68. }
  69. .cal-week-box .cal-offset6,
  70. .cal-row-fluid .cal-offset6,
  71. .cal-row-fluid .cal-offset6:first-child {
  72. margin-left: 85.71428571428571%;
  73. *margin-left: 85.60767590618336%;
  74. }
  75. .cal-week-box .cal-offset5,
  76. .cal-row-fluid .cal-offset5,
  77. .cal-row-fluid .cal-offset5:first-child {
  78. margin-left: 71.42857142857142%;
  79. *margin-left: 71.32196162046907%;
  80. }
  81. .cal-week-box .cal-offset4,
  82. .cal-row-fluid .cal-offset4,
  83. .cal-row-fluid .cal-offset4:first-child {
  84. margin-left: 57.14285714285714%;
  85. *margin-left: 57.03624733475479%;
  86. }
  87. .cal-week-box .cal-offset3,
  88. .cal-row-fluid .cal-offset3,
  89. .cal-row-fluid .cal-offset3:first-child {
  90. margin-left: 42.857142857142854%;
  91. *margin-left: 42.750533049040506%;
  92. }
  93. .cal-week-box .cal-offset2,
  94. .cal-row-fluid .cal-offset2,
  95. .cal-row-fluid .cal-offset2:first-child {
  96. margin-left: 28.57142857142857%;
  97. *margin-left: 28.46481876332622%;
  98. }
  99. .cal-week-box .cal-offset1,
  100. .cal-row-fluid .cal-offset1,
  101. .cal-row-fluid .cal-offset1:first-child {
  102. margin-left: 14.285714285714285%;
  103. *margin-left: 14.17910447761194%;
  104. }
  105. .cal-row-fluid .cal-cell1 {
  106. width: 14.285714285714285%;
  107. *width: 14.233576642335766%;
  108. }
  109. [class*="cal-cell"].hide,
  110. .cal-row-fluid [class*="cal-cell"].hide {
  111. display: none;
  112. }
  113. [class*="cal-cell"].pull-right,
  114. .cal-row-fluid [class*="cal-cell"].pull-right {
  115. float: right;
  116. }
  117. .cal-row-head [class*="cal-cell"]:first-child,
  118. .cal-row-head [class*="cal-cell"] {
  119. min-height: auto;
  120. overflow: hidden;
  121. text-overflow: ellipsis;
  122. }
  123. .cal-events-num {
  124. margin-top: 20px;
  125. }
  126. .cal-month-day {
  127. position: relative;
  128. display: block;
  129. width: 100%;
  130. }
  131. #cal-week-box {
  132. position: absolute;
  133. width: 70px;
  134. left: -71px;
  135. top: -1px;
  136. padding: 8px 5px;
  137. cursor: pointer;
  138. }
  139. #cal-day-tick {
  140. position: absolute;
  141. right: 50%;
  142. bottom: -21px;
  143. padding: 0px 5px;
  144. cursor: pointer;
  145. z-index: 5;
  146. text-align: center;
  147. width: 26px;
  148. margin-right: -17px;
  149. }
  150. .cal-year-box #cal-day-tick {
  151. margin-right: -7px;
  152. }
  153. #cal-slide-box {
  154. position: relative;
  155. }
  156. #cal-slide-tick {
  157. position: absolute;
  158. width: 16px;
  159. margin-left: -7px;
  160. height: 9px;
  161. top: -1px;
  162. z-index: 1;
  163. }
  164. #cal-slide-tick.tick-month1 {
  165. left: 12.5%;
  166. }
  167. #cal-slide-tick.tick-month2 {
  168. left: 37.5%;
  169. }
  170. #cal-slide-tick.tick-month3 {
  171. left: 62.5%;
  172. }
  173. #cal-slide-tick.tick-month4 {
  174. left: 87.5%;
  175. }
  176. #cal-slide-tick.tick-day1 {
  177. left: 7.14285714285715%;
  178. }
  179. #cal-slide-tick.tick-day2 {
  180. left: 21.42857142857143%;
  181. }
  182. #cal-slide-tick.tick-day3 {
  183. left: 35.71428571428572%;
  184. }
  185. #cal-slide-tick.tick-day4 {
  186. left: 50%;
  187. }
  188. #cal-slide-tick.tick-day5 {
  189. left: 64.2857142857143%;
  190. }
  191. #cal-slide-tick.tick-day6 {
  192. left: 78.57142857142859%;
  193. }
  194. #cal-slide-tick.tick-day7 {
  195. left: 92.85714285714285%;
  196. }
  197. .events-list {
  198. position: absolute;
  199. bottom: 0;
  200. left: 0;
  201. overflow: hidden;
  202. }
  203. #cal-slide-content ul.unstyled {
  204. margin-bottom: 0;
  205. }
  206. .cal-week-box {
  207. position: relative;
  208. }
  209. .cal-week-box [data-event-class] {
  210. white-space: nowrap;
  211. height: 30px;
  212. margin: 1px 1px;
  213. line-height: 30px;
  214. text-overflow: ellipsis;
  215. overflow: hidden;
  216. padding-left: 10px;
  217. }
  218. .cal-week-box .cal-column {
  219. position: absolute;
  220. height: 100%;
  221. z-index: -1;
  222. }
  223. .cal-week-box .arrow-before,
  224. .cal-week-box .arrow-after {
  225. position: relative;
  226. }
  227. .cal-week-box .arrow-after:after {
  228. content: "";
  229. position: absolute;
  230. top: 0px;
  231. width: 0;
  232. height: 0;
  233. right: 0;
  234. border-top: 15px solid #ffffff;
  235. border-left: 8px solid;
  236. border-bottom: 15px solid #FFFFFF;
  237. }
  238. .cal-week-box .arrow-before:before {
  239. content: "";
  240. position: absolute;
  241. top: 0px;
  242. width: 0;
  243. height: 0;
  244. left: 1px;
  245. border-top: 15px solid transparent;
  246. border-left: 8px solid #FFFFFF;
  247. border-bottom: 15px solid transparent;
  248. }
  249. #cal-day-box {
  250. text-wrap: none;
  251. }
  252. #cal-day-box .cal-day-hour-part {
  253. height: 30px;
  254. box-sizing: border-box;
  255. -moz-box-sizing: border-box;
  256. -webkit-box-sizing: border-box;
  257. border-bottom: thin dashed #e1e1e1;
  258. }
  259. #cal-day-box .cal-day-hour .day-highlight {
  260. height: 30px;
  261. }
  262. #cal-day-box .cal-hours {
  263. font-weight: bolder;
  264. }
  265. #cal-day-box .cal-day-hour:nth-child(odd) {
  266. background-color: #fafafa;
  267. }
  268. #cal-day-box #cal-day-panel {
  269. position: relative;
  270. padding-left: 60px;
  271. }
  272. #cal-day-box #cal-day-panel-hour {
  273. position: absolute;
  274. width: 100%;
  275. margin-left: -60px;
  276. }
  277. #cal-day-box .day-event {
  278. position: relative;
  279. max-width: 200px;
  280. overflow: hidden;
  281. }
  282. #cal-day-box .day-highlight {
  283. line-height: 30px;
  284. padding-left: 8px;
  285. padding-right: 8px;
  286. box-sizing: border-box;
  287. -moz-box-sizing: border-box;
  288. -webkit-box-sizing: border-box;
  289. border: 1px solid #c3c3c3;
  290. margin: 1px 1px;
  291. overflow: hidden;
  292. text-overflow: ellipsis;
  293. }
  294. #cal-day-box .day-highlight.dh-event-important {
  295. border: 1px solid #ad2121;
  296. }
  297. #cal-day-box .day-highlight.dh-event-warning {
  298. border: 1px solid #e3bc08;
  299. }
  300. #cal-day-box .day-highlight.dh-event-info {
  301. border: 1px solid #1e90ff;
  302. }
  303. #cal-day-box .day-highlight.dh-event-inverse {
  304. border: 1px solid #1b1b1b;
  305. }
  306. #cal-day-box .day-highlight.dh-event-success {
  307. border: 1px solid #006400;
  308. }
  309. #cal-day-box .day-highlight.dh-event-special {
  310. background-color: #ffe6ff;
  311. border: 1px solid #800080;
  312. }
  313. .event {
  314. display: block;
  315. background-color: #c3c3c3;
  316. width: 12px;
  317. height: 12px;
  318. margin-right: 2px;
  319. margin-bottom: 2px;
  320. -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
  321. box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
  322. border-radius: 8px;
  323. border: 1px solid #ffffff;
  324. }
  325. .event-block {
  326. display: block;
  327. background-color: #c3c3c3;
  328. width: 20px;
  329. height: 100%;
  330. }
  331. .cal-event-list .event.pull-left {
  332. margin-top: 3px;
  333. }
  334. .event-important {
  335. background-color: #ad2121;
  336. }
  337. .event-info {
  338. background-color: #1e90ff;
  339. }
  340. .event-warning {
  341. background-color: #e3bc08;
  342. }
  343. .event-inverse {
  344. background-color: #1b1b1b;
  345. }
  346. .event-success {
  347. background-color: #006400;
  348. }
  349. .event-special {
  350. background-color: #800080;
  351. }
  352. .day-highlight:hover,
  353. .day-highlight {
  354. background-color: #dddddd;
  355. }
  356. .day-highlight.dh-event-important:hover,
  357. .day-highlight.dh-event-important {
  358. background-color: #fae3e3;
  359. }
  360. .day-highlight.dh-event-warning:hover,
  361. .day-highlight.dh-event-warning {
  362. background-color: #fdf1ba;
  363. }
  364. .day-highlight.dh-event-info:hover,
  365. .day-highlight.dh-event-info {
  366. background-color: #d1e8ff;
  367. }
  368. .day-highlight.dh-event-inverse:hover,
  369. .day-highlight.dh-event-inverse {
  370. background-color: #c1c1c1;
  371. }
  372. .day-highlight.dh-event-success:hover,
  373. .day-highlight.dh-event-success {
  374. background-color: #caffca;
  375. }
  376. .day-highlight.dh-event-special:hover,
  377. .day-highlight.dh-event-special {
  378. background-color: #ffe6ff;
  379. }
  380. .cal-row-head [class*="cal-cell"]:first-child,
  381. .cal-row-head [class*="cal-cell"] {
  382. font-weight: bolder;
  383. text-align: center;
  384. border: 0px solid;
  385. padding: 5px 0;
  386. }
  387. .cal-row-head [class*="cal-cell"] small {
  388. font-weight: normal;
  389. }
  390. .cal-year-box .row-fluid:hover,
  391. .cal-row-fluid:hover {
  392. background-color: #fafafa;
  393. }
  394. .cal-month-day {
  395. height: 100px;
  396. }
  397. [class*="cal-cell"]:hover {
  398. background-color: #ededed;
  399. }
  400. .cal-year-box [class*="span"],
  401. .cal-month-box [class*="cal-cell"] {
  402. min-height: 100px;
  403. border-right: 1px solid #e1e1e1;
  404. position: relative;
  405. }
  406. .cal-year-box [class*="span"] {
  407. min-height: 60px;
  408. }
  409. .cal-year-box .row-fluid [class*="span"]:last-child,
  410. .cal-month-box .cal-row-fluid [class*="cal-cell"]:last-child {
  411. border-right: 0px;
  412. }
  413. .cal-year-box .row-fluid,
  414. .cal-month-box .cal-row-fluid {
  415. border-bottom: 1px solid #e1e1e1;
  416. margin-left: 0px;
  417. margin-right: 0px;
  418. }
  419. .cal-year-box .row-fluid:last-child,
  420. .cal-month-box .cal-row-fluid:last-child {
  421. border-bottom: 0px;
  422. }
  423. .cal-month-box,
  424. .cal-year-box,
  425. .cal-week-box {
  426. border-top: 1px solid #e1e1e1;
  427. border-bottom: 1px solid #e1e1e1;
  428. border-right: 1px solid #e1e1e1;
  429. border-left: 1px solid #e1e1e1;
  430. border-radius: 2px;
  431. }
  432. span[data-cal-date] {
  433. font-size: 1.2em;
  434. font-weight: normal;
  435. opacity: 0.5;
  436. cursor: pointer;
  437. transition: all 0.3s ease-in-out;
  438. -webkit-transition: all 0.1s ease-in-out;
  439. -moz-transition: all 0.1s ease-in-out;
  440. -ms-transition: all 0.1s ease-in-out;
  441. -o-transition: all 0.1s ease-in-out;
  442. margin-top: 15px;
  443. margin-right: 15px;
  444. }
  445. span[data-cal-date]:hover {
  446. opacity: 1;
  447. }
  448. .cal-day-outmonth span[data-cal-date] {
  449. opacity: 0.1;
  450. cursor: default;
  451. }
  452. .cal-day-today {
  453. background-color: #e8fde7;
  454. }
  455. .cal-day-today span[data-cal-date] {
  456. color: darkgreen;
  457. }
  458. .cal-month-box .cal-day-today span[data-cal-date] {
  459. font-size: 1.9em;
  460. }
  461. .cal-day-holiday span[data-cal-date] {
  462. color: #800080;
  463. }
  464. .cal-day-weekend span[data-cal-date] {
  465. color: darkred;
  466. }
  467. #cal-week-box {
  468. border: 1px solid #e1e1e1;
  469. border-right: 0px;
  470. border-radius: 5px 0 0 5px;
  471. background-color: #fafafa;
  472. text-align: right;
  473. }
  474. #cal-day-tick {
  475. border: 1px solid #e1e1e1;
  476. border-top: 0px solid;
  477. border-radius: 0 0 5px 5px;
  478. background-color: #ededed;
  479. text-align: center;
  480. }
  481. #cal-slide-box {
  482. border-top: 0px solid #8c8c8c;
  483. }
  484. #cal-slide-content {
  485. padding: 20px;
  486. color: #ffffff;
  487. background-image: url("../img/dark_wood.png");
  488. -webkit-box-shadow: inset 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
  489. box-shadow: inset 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
  490. }
  491. #cal-slide-tick {
  492. background-image: url("../img/tick.png?2");
  493. }
  494. #cal-slide-content:hover {
  495. background-color: transparent;
  496. }
  497. #cal-slide-content a.event-item {
  498. color: #ffffff;
  499. font-weight: normal;
  500. line-height: 22px;
  501. }
  502. .events-list {
  503. max-height: 47px;
  504. padding-left: 5px;
  505. }
  506. .cal-column {
  507. border-left: 1px solid #e1e1e1;
  508. }
  509. a.cal-event-week {
  510. text-decoration: none;
  511. color: #151515;
  512. }
  513. .badge-important {
  514. background-color: #b94a48;
  515. }