clndr.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528
  1. @import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
  2. .noselect {
  3. -webkit-user-select: none;
  4. /* Chrome/Safari */
  5. -moz-user-select: none;
  6. /* Firefox */
  7. -ms-user-select: none;
  8. /* IE10+ */
  9. }
  10. .left-align {
  11. text-align: left;
  12. }
  13. .right-align {
  14. text-align: right;
  15. }
  16. .cal1 {
  17. max-width: 100%;
  18. font-size: 1em;
  19. }
  20. .cal1 .clndr .clndr-controls {
  21. display: inline-block;
  22. width: 100%;
  23. position: relative;
  24. padding: 1em;
  25. background-color: #052963;
  26. margin: 0;
  27. }
  28. .cal1 .clndr .clndr-controls .month {
  29. float: left;
  30. width: 33%;
  31. text-align: center;
  32. font-size: 1.5em;
  33. color: #fff;
  34. }
  35. .cal1 .clndr .clndr-controls .clndr-control-button {
  36. float: left;
  37. width: 33%;
  38. font-size: 1em;
  39. color: #fff;
  40. margin-top: 0.4em;
  41. text-transform: capitalize;
  42. }
  43. .cal1 .clndr .clndr-controls .clndr-control-button.rightalign {
  44. text-align: right;
  45. }
  46. .cal1 .clndr .clndr-controls .clndr-control-button .clndr-next-button {
  47. cursor: pointer;
  48. -webkit-user-select: none;
  49. /* Chrome/Safari */
  50. -moz-user-select: none;
  51. /* Firefox */
  52. -ms-user-select: none;
  53. /* IE10+ */
  54. }
  55. .cal1 .clndr .clndr-controls .clndr-control-button .clndr-next-button:hover {
  56. color: #00C6D7;
  57. }
  58. .cal1 .clndr .clndr-controls .clndr-control-button .clndr-next-button.inactive {
  59. opacity: 0.5;
  60. }
  61. .cal1 .clndr .clndr-controls .clndr-control-button .clndr-next-button.inactive:hover {
  62. background: none;
  63. cursor: default;
  64. }
  65. .cal1 .clndr .clndr-controls .clndr-control-button .clndr-previous-button {
  66. cursor: pointer;
  67. -webkit-user-select: none;
  68. /* Chrome/Safari */
  69. -moz-user-select: none;
  70. /* Firefox */
  71. -ms-user-select: none;
  72. /* IE10+ */
  73. }
  74. .cal1 .clndr .clndr-controls .clndr-control-button .clndr-previous-button:hover {
  75. color: #00C6D7;
  76. }
  77. .cal1 .clndr .clndr-controls .clndr-control-button .clndr-previous-button.inactive {
  78. opacity: 0.5;
  79. }
  80. .cal1 .clndr .clndr-controls .clndr-control-button .clndr-previous-button.inactive:hover {
  81. background: none;
  82. cursor: default;
  83. }
  84. .cal1 .clndr .clndr-table {
  85. table-layout: fixed;
  86. width: 100%;
  87. }
  88. .cal1 .clndr .clndr-table .header-days {
  89. height: 60px;
  90. font-size: 1em;
  91. background-color: #052963;
  92. }
  93. .cal1 .clndr .clndr-table .header-days .header-day {
  94. vertical-align: middle;
  95. text-align: center;
  96. border-left: 1px solid #D8D8D8;
  97. border-top: 1px solid #D8D8D8;
  98. color: #00C6D7;
  99. }
  100. .cal1 .clndr .clndr-table .header-days .header-day:last-child {
  101. border-right: 1px solid #D8D8D8;
  102. }
  103. .cal1 .clndr .clndr-table tr {
  104. height: 85px;
  105. }
  106. .cal1 .clndr .clndr-table tr td {
  107. vertical-align: top;
  108. }
  109. .cal1 .clndr .clndr-table tr .day {
  110. border-left: 1px solid #D8D8D8;
  111. border-top: 1px solid #D8D8D8;
  112. width: 100%;
  113. height: inherit;
  114. }
  115. .cal1 .clndr .clndr-table tr .day:hover {
  116. background: #eee;
  117. }
  118. .cal1 .clndr .clndr-table tr .day.today,
  119. .cal1 .clndr .clndr-table tr .day.my-today {
  120. background: rgb(0, 198, 215);
  121. color: #fff;
  122. }
  123. .cal1 .clndr .clndr-table tr .day.today:hover,
  124. .cal1 .clndr .clndr-table tr .day.my-today:hover {
  125. background: #ea4c89;
  126. }
  127. .cal1 .clndr .clndr-table tr .day.today.event,
  128. .cal1 .clndr .clndr-table tr .day.my-today.event {
  129. background: #a7dbc1;
  130. }
  131. .cal1 .clndr .clndr-table tr .day.event,
  132. .cal1 .clndr .clndr-table tr .day.my-event {
  133. color: #00C6D7;
  134. font-weight: 400;
  135. }
  136. .cal1 .clndr .clndr-table tr .day.event:hover,
  137. .cal1 .clndr .clndr-table tr .day.my-event:hover {
  138. }
  139. .cal1 .clndr .clndr-table tr .day.inactive,
  140. .cal1 .clndr .clndr-table tr .day.my-inactive {
  141. background: #ddd;
  142. }
  143. .cal1 .clndr .clndr-table tr .day:last-child {
  144. border-right: 1px solid #D8D8D8;
  145. }
  146. .cal1 .clndr .clndr-table tr .day .day-contents {
  147. box-sizing: border-box;
  148. padding: 8px;
  149. font-size: 1em;
  150. text-align: right;
  151. }
  152. .cal1 .clndr .clndr-table tr .empty,
  153. .cal1 .clndr .clndr-table tr .adjacent-month,
  154. .cal1 .clndr .clndr-table tr .my-empty,
  155. .cal1 .clndr .clndr-table tr .my-adjacent-month {
  156. border-left: 1px solid #D8D8D8;
  157. border-top: 1px solid #D8D8D8;
  158. width: 100%;
  159. height: inherit;
  160. background: #eee;
  161. }
  162. .cal1 .clndr .clndr-table tr .empty:hover,
  163. .cal1 .clndr .clndr-table tr .adjacent-month:hover,
  164. .cal1 .clndr .clndr-table tr .my-empty:hover,
  165. .cal1 .clndr .clndr-table tr .my-adjacent-month:hover {
  166. background: #ddd;
  167. }
  168. .cal1 .clndr .clndr-table tr .empty:last-child,
  169. .cal1 .clndr .clndr-table tr .adjacent-month:last-child,
  170. .cal1 .clndr .clndr-table tr .my-empty:last-child,
  171. .cal1 .clndr .clndr-table tr .my-adjacent-month:last-child {
  172. border-right: 1px solid #D8D8D8;
  173. }
  174. .cal1 .clndr .clndr-table tr:last-child .day,
  175. .cal1 .clndr .clndr-table tr:last-child .my-day {
  176. border-bottom: 1px solid #D8D8D8;
  177. }
  178. .cal1 .clndr .clndr-table tr:last-child .empty,
  179. .cal1 .clndr .clndr-table tr:last-child .my-empty {
  180. border-bottom: 1px solid #D8D8D8;
  181. }
  182. .cal2 {
  183. max-width: 177px;
  184. margin: 30px auto;
  185. font-family: 'Droid Sans Mono';
  186. }
  187. .cal2 .clndr .clndr-controls {
  188. display: block;
  189. display: inline-block;
  190. width: 100%;
  191. margin-bottom: 3px;
  192. }
  193. .cal2 .clndr .clndr-controls .clndr-previous-button {
  194. float: left;
  195. width: 10%;
  196. text-align: left;
  197. cursor: pointer;
  198. -webkit-user-select: none;
  199. /* Chrome/Safari */
  200. -moz-user-select: none;
  201. /* Firefox */
  202. -ms-user-select: none;
  203. /* IE10+ */
  204. }
  205. .cal2 .clndr .clndr-controls .clndr-previous-button:hover {
  206. background-color: #f4f4f4;
  207. }
  208. .cal2 .clndr .clndr-controls .month {
  209. float: left;
  210. width: 80%;
  211. text-align: center;
  212. }
  213. .cal2 .clndr .clndr-controls .clndr-next-button {
  214. float: left;
  215. width: 10%;
  216. text-align: right;
  217. cursor: pointer;
  218. -webkit-user-select: none;
  219. /* Chrome/Safari */
  220. -moz-user-select: none;
  221. /* Firefox */
  222. -ms-user-select: none;
  223. /* IE10+ */
  224. }
  225. .cal2 .clndr .clndr-controls .clndr-next-button:hover {
  226. background-color: #f4f4f4;
  227. }
  228. .cal2 .clndr .clndr-grid {
  229. text-align: center;
  230. border: 1px solid #D8D8D8;
  231. display: inline-block;
  232. }
  233. .cal2 .clndr .clndr-grid .header-day {
  234. float: left;
  235. width: 25px;
  236. height: 25px;
  237. background: #FF4545;
  238. }
  239. .cal2 .clndr .clndr-grid .day {
  240. float: left;
  241. width: 25px;
  242. height: 25px;
  243. }
  244. .cal2 .clndr .clndr-grid .day.event {
  245. background-color: #B4E09F;
  246. }
  247. .cal2 .clndr .clndr-grid .day.today {
  248. background-color: #E3C57F;
  249. }
  250. .cal2 .clndr .clndr-grid .day.selected {
  251. background-color: #E37FD6;
  252. }
  253. .cal2 .clndr .clndr-grid .day.inactive {
  254. color: gray;
  255. }
  256. .cal2 .clndr .clndr-grid .empty,
  257. .cal2 .clndr .clndr-grid .adjacent-month {
  258. float: left;
  259. width: 25px;
  260. height: 25px;
  261. background: #ddd;
  262. }
  263. .cal2 .clndr .clndr-today-button {
  264. width: 100%;
  265. text-align: center;
  266. cursor: pointer;
  267. }
  268. .cal2 .clndr .clndr-today-button:hover {
  269. background-color: #ddd;
  270. }
  271. .cal2 .multi-month-controls .quarter-button {
  272. display: inline-block;
  273. width: 25%;
  274. }
  275. .cal2 .multi-month-controls .quarter-button:hover {
  276. cursor: pointer;
  277. background-color: #f4f4f4;
  278. }
  279. .cal2 .day.inactive {
  280. background-color: #aaa;
  281. }
  282. .cal3 {
  283. max-width: 354px;
  284. margin: 0 auto;
  285. font-family: 'Droid Sans Mono';
  286. }
  287. .cal3 .cal {
  288. float: left;
  289. width: 177px;
  290. }
  291. .cal3 .clndr .clndr-controls {
  292. display: block;
  293. display: inline-block;
  294. width: 100%;
  295. margin-bottom: 8px;
  296. }
  297. .cal3 .clndr .clndr-controls.top {
  298. margin-bottom: -22px;
  299. position: relative;
  300. z-index: 1;
  301. }
  302. .cal3 .clndr .clndr-controls .clndr-previous-button {
  303. float: left;
  304. width: 10%;
  305. text-align: left;
  306. cursor: pointer;
  307. -webkit-user-select: none;
  308. /* Chrome/Safari */
  309. -moz-user-select: none;
  310. /* Firefox */
  311. -ms-user-select: none;
  312. /* IE10+ */
  313. }
  314. .cal3 .clndr .clndr-controls .clndr-previous-button:hover {
  315. background-color: #f4f4f4;
  316. }
  317. .cal3 .clndr .clndr-controls .month {
  318. text-align: center;
  319. width: 80%;
  320. margin: 0 auto;
  321. }
  322. .cal3 .clndr .clndr-controls .clndr-next-button {
  323. float: right;
  324. width: 10%;
  325. text-align: right;
  326. cursor: pointer;
  327. -webkit-user-select: none;
  328. /* Chrome/Safari */
  329. -moz-user-select: none;
  330. /* Firefox */
  331. -ms-user-select: none;
  332. /* IE10+ */
  333. }
  334. .cal3 .clndr .clndr-controls .clndr-next-button:hover {
  335. background-color: #f4f4f4;
  336. }
  337. .cal3 .clndr .clndr-grid {
  338. text-align: center;
  339. border: 1px solid #D8D8D8;
  340. display: inline-block;
  341. }
  342. .cal3 .clndr .clndr-grid .header-day {
  343. float: left;
  344. width: 25px;
  345. height: 25px;
  346. background: #FF4545;
  347. }
  348. .cal3 .clndr .clndr-grid .day {
  349. float: left;
  350. width: 25px;
  351. height: 25px;
  352. }
  353. .cal3 .clndr .clndr-grid .day.event {
  354. background-color: #B4E09F;
  355. }
  356. .cal3 .clndr .clndr-grid .day.today {
  357. background-color: #E3C57F;
  358. }
  359. .cal3 .clndr .clndr-grid .empty,
  360. .cal3 .clndr .clndr-grid .adjacent-month {
  361. float: left;
  362. width: 25px;
  363. height: 25px;
  364. background: #ddd;
  365. }
  366. .cal3 .clndr .clndr-today-button {
  367. width: 100%;
  368. text-align: center;
  369. cursor: pointer;
  370. }
  371. .cal3 .clndr .clndr-today-button:hover {
  372. background-color: #ddd;
  373. }
  374. .cal3 .multi-month-controls .quarter-button {
  375. display: inline-block;
  376. width: 25%;
  377. }
  378. .cal3 .multi-month-controls .quarter-button:hover {
  379. cursor: pointer;
  380. background-color: #f4f4f4;
  381. }
  382. .clndr-next-button,
  383. .clndr-previous-button,
  384. .clndr-next-year-button,
  385. .clndr-previous-year-button {
  386. -webkit-user-select: none;
  387. /* Chrome/Safari */
  388. -moz-user-select: none;
  389. /* Firefox */
  390. -ms-user-select: none;
  391. /* IE10+ */
  392. }
  393. .clndr-next-button.inactive,
  394. .clndr-previous-button.inactive,
  395. .clndr-next-year-button.inactive,
  396. .clndr-previous-year-button.inactive {
  397. opacity: 0.5;
  398. cursor: default;
  399. }
  400. @media (max-width: 640px) {
  401. .cal1 .clndr .clndr-table tr {
  402. height: 55px;
  403. }
  404. .cal1 .clndr .clndr-controls .month {
  405. font-size: 1.2em;
  406. }
  407. .cal1 .clndr .clndr-controls .clndr-control-button {
  408. margin-top: 0;
  409. }
  410. }
  411. @media (max-width: 480px) {
  412. .cal1 .clndr .clndr-controls .month {
  413. font-size: 1em;
  414. width: 34%;
  415. }
  416. }
  417. @media (max-width: 320px) {
  418. .cal1 .clndr .clndr-controls {
  419. padding: 0.8em .6em;
  420. }
  421. .cal1 .clndr .clndr-controls .clndr-control-button {
  422. width: 29%;
  423. font-size: 0.9em;
  424. }
  425. .cal1 .clndr .clndr-controls .month {
  426. font-size: 0.9em;
  427. width: 41%;
  428. }
  429. .cal1 .clndr .clndr-table .header-days {
  430. height: 33px;
  431. font-size: 0.9em;
  432. }
  433. .cal1 .clndr .clndr-table tr .day .day-contents {
  434. font-size: 0.75em;
  435. }
  436. .cal1 .clndr .clndr-table tr {
  437. height: 37px;
  438. }
  439. }