You are here

calendar.css in Calendar 7

Same filename and directory in other branches
  1. 5.2 calendar.css
  2. 5 calendar.css
  3. 6.2 calendar.css
  4. 7.2 calendar.css
/*  calendar calendar table styles  */
.calendar-calendar tr.odd, .calendar-calendar tr.even {
  background-color:#fff;
}
.calendar-calendar table {
  border-collapse: collapse;
  border-spacing: 0;
  margin:0 auto;
  padding:0;
  width: 100%; /* Setting at 100% causes problem in Internet Explorer. */
  clear:both;
}
.calendar-calendar .month-view table {
  border:none;
  padding:0;
  margin:0;
  width:100%;
  clear: both;
}

  /* IE needs a little help to get the side by side tables to the right size */
.calendar-calendar .year-view td {
  width:32%;
  padding:1px;
  border:none;
}

.calendar-calendar .year-view td table td {
  width:13%;
  padding:0;
}

.calendar-calendar tr {
  padding: 0;
  margin: 0;
  background-color: white;
}
.calendar-calendar th {
  color: #fff;
  background-color: #ccc;
  text-align: center;
  margin:0;
}
.calendar-calendar th a {
  font-weight: bold;
  color: #fff;
  background-color: #ccc;
}
.calendar-calendar td {
  width: 12%; /* 14% is about 1/7 of total table width */
  min-width: 12%;
  border: 1px solid #ccc;
  color: #777;
  text-align: right;
  vertical-align: top;
  margin: 0;
  padding:0;
}

/* simplify the mini calendar by removing borders */
.calendar-calendar .mini {
  border:none;
 }

/* format for the week number in the first cell */
.calendar-calendar td.week {
  width:1%;
  min-width:1%;
  }
.calendar-calendar .week {
  clear:both;
  font-style: normal;
  color: #555;
  font-size: 0.8em;
}
.calendar-calendar .week a {
  font-weight:normal;
}

/* IE6 does not support min-height, using Min-Height fast hack from http://www.dustindiaz.com/min-height-fast-hack */
.calendar-calendar .inner {
  min-height:5em;
  height:auto !important;
  height:5em;
  padding:0;
  margin:0;
}
.calendar-calendar .inner div {
  padding:0;
  margin:0;
}
/* Make sure paragraphs buried in calendar cells use padding, not margins, for separation so the background color doesn't come through. */
.calendar-calendar .inner p {
  padding:0 0 .8em 0;
  margin:0;
}
.calendar-calendar td a {
  font-weight: bold;
  text-decoration: none;
}
.calendar-calendar td a:hover {
  text-decoration: underline;
}
.calendar-calendar td.year, 
.calendar-calendar td.month {
  text-align: center;
}

/* format days of the week header cells */
.calendar-calendar th.days {
  color: #ccc;
  background-color: #224;
  text-align: center;
  padding:1px;
  margin:0;
 }

/*  floating day number div  */
.calendar-calendar div.day {
  float: right;
  text-align: center;
  padding: 0.125em 0.25em 0 0.25em;
  margin: 0;
  background-color: #f3f3f3;
  border: 1px solid gray;
  border-width: 0 0 1px 1px;
  clear:both;
  width:1.5em;
}

/*  individual node container  */
.calendar-calendar div.calendar {
  background-color: #fff;
  border: solid 1px #ddd;
  text-align: left;
  margin:0 .25em .25em 0;
  width: 96%;
  float:right; /* needed to keep IE from hiding the floating day number */
  clear:both;
}
/* No floating of day view content because there is no floating day number */
.calendar-calendar .day-view div.calendar {
  float:none;
  width:98%;
  margin:1% 1% 0 1%;
}

.calendar-calendar div.title {
  font-size:.8em;
  text-align:center;
}

.calendar-calendar div.title a {
  color: #000;
}
.calendar-calendar div.title a:hover {
  color: #c00;
}
.calendar-calendar .content {
  clear:both;
  padding: 3px;
  padding-left: 5px;
}
.calendar div.form-item {
  white-space: normal;
}

table td.mini, 
table th.mini, 
table.mini td.week {
  padding:0 1px 0 0;
  margin:0;
  }
table td.mini a {
  font-weight:normal;
  }
.calendar-calendar .mini-day-off {
  padding:0px;
}
.calendar-calendar .mini-day-on {
  padding:0px;
}
table .mini-day-on a {
  text-decoration:underline;
  }
.calendar-calendar .mini .title {
  font-size:.8em;
  }
.mini .calendar-calendar .week {
  font-size:.7em;
  }
.mini-row {
  width:100%;
  border:none;
}
.mini{
  width:32%;
  vertical-align:top;
  }

/* formatting for the legend stripe and block */
.calendar-calendar .stripe {
  height: 5px;
  width: auto;
  font-size:1px !important;
  line-height:1px !important;
}
.calendar-calendar .day-view .stripe {
  width:100%;
}
table.calendar-legend {
  background-color:#ccc;
  width:100%;
  margin:0;
  padding:0;
}
table.calendar-legend tr.odd .stripe,
table.calendar-legend tr.even .stripe {
  height:12px !important;
  font-size:9px !important;
  line-height:10px !important;
}
.calendar-legend td {
  text-align:left;
}

.calendar-empty {
  font-size:1px;
  line-height:1px;
}

/* formatting for the full day view */  
.calendar-calendar td.calendar-agenda-hour {
  font-family:serif;
  text-align:right;
  border:none;
  border-top:1px #333 dotted;
  padding-top:.25em;
  width:1%;
}
.calendar-calendar td.calendar-agenda-no-hours {
  min-width:1%;
}
.calendar-calendar td.calendar-agenda-hour .calendar-hour {
  font-size:1.2em;
  font-weight:bold;
}
.calendar-calendar td.calendar-agenda-hour .calendar-ampm {
  font-size:1em;
}
.calendar-calendar td.calendar-agenda-items {
  border:1px #333 dotted;
  text-align:left;
}
.calendar-calendar td.calendar-agenda-items div.calendar {
  width:auto;
  padding:.25em;
  margin:0;
}
.calendar-calendar div.calendar div.inner .calendar-agenda-empty {
  width:100%;
  text-align:center;
  vertical-align:middle;
  padding:1em 0;
  background-color:#fff;
}

/* the popup date selector for jumping to a new date */
.calendar-date-select form {
  text-align:right;
  float:right;
  width:25%;
}
.calendar-date-select div, 
.calendar-date-select input, 
.calendar-date-select label {
  text-align:right;
  padding:0;
  margin:0;
  float:right;
  clear:both;
}
.calendar-date-select .description {
  float:right;
}
.calendar-label {
  font-weight:bold;
  display:block;
  clear:both;
}

.calendar-calendar div.date-nav {
  background-color:#ccc;
  color:#777;
  width:auto;
  border:1px solid #ccc;
}
.calendar-calendar div.date-nav a, 
.calendar-calendar div.date-nav h3 {
  color:#777;
}
.calendar-calendar th.days {
  background-color:#eee;
  color:#777;
  font-weight:bold;
  border:1px solid #ccc;
}
.calendar-calendar td.empty {
  background:#ccc;
  border-color:#ccc;
}
.calendar-calendar table.mini td.empty {
  background:#fff;
  border-color:#fff;
}
.calendar-calendar td div.day {
  border:1px solid #ccc;
  border-top:none;
  border-right:none;
  margin-bottom:2px;
}
.calendar-calendar td .inner div,
.calendar-calendar td .inner div a {
  background:#eee;
}
/* Set small font size for all items in calendar div, themes can override this. */
/* Use x-small instead of em to avoid multiplying effect in nested items. */
.calendar-calendar div.calendar {
  border:none;
  font-size:x-small;
}
.calendar-calendar td .inner div.calendar div,
.calendar-calendar td .inner div.calendar div a {
  border:none;
  background:#ffc;
  padding:0 2px;
}
.calendar-calendar td .inner div.calendar div.calendar-more,
.calendar-calendar td .inner div.calendar div.calendar-more a {
  color:#444;
  background:#fff;
  text-align:right;
}
.calendar-calendar td .inner .view-field,
.calendar-calendar td .inner .view-field a {
  color:#444;
  font-weight:normal;
}

.calendar-calendar td span.date-display-single,
.calendar-calendar td span.date-display-start,
.calendar-calendar td span.date-display-end,
.calendar-calendar td span.date-display-separator {
  font-weight:bold;
}
.calendar-calendar td .inner div.day a {
  color:#4b85ac;
}
.calendar-calendar tr td.today,
.calendar-calendar tr.odd td.today,
.calendar-calendar tr.even td.today {
  background-color:#C3D6E4;
}
.calendar-calendar td .inner div.calendar div div.view-data-node-data-field-date-field-date-value {
  border-bottom:1px solid #ccc;
}

/* The following are not used by default but are available for themes */
.calendar-calendar td.past {}
.calendar-calendar td.future {}
.calendar-calendar td.has-events {}
.calendar-calendar td.has-no-events {}

File

calendar.css
View source
  1. /* calendar calendar table styles */
  2. .calendar-calendar tr.odd, .calendar-calendar tr.even {
  3. background-color:#fff;
  4. }
  5. .calendar-calendar table {
  6. border-collapse: collapse;
  7. border-spacing: 0;
  8. margin:0 auto;
  9. padding:0;
  10. width: 100%; /* Setting at 100% causes problem in Internet Explorer. */
  11. clear:both;
  12. }
  13. .calendar-calendar .month-view table {
  14. border:none;
  15. padding:0;
  16. margin:0;
  17. width:100%;
  18. clear: both;
  19. }
  20. /* IE needs a little help to get the side by side tables to the right size */
  21. .calendar-calendar .year-view td {
  22. width:32%;
  23. padding:1px;
  24. border:none;
  25. }
  26. .calendar-calendar .year-view td table td {
  27. width:13%;
  28. padding:0;
  29. }
  30. .calendar-calendar tr {
  31. padding: 0;
  32. margin: 0;
  33. background-color: white;
  34. }
  35. .calendar-calendar th {
  36. color: #fff;
  37. background-color: #ccc;
  38. text-align: center;
  39. margin:0;
  40. }
  41. .calendar-calendar th a {
  42. font-weight: bold;
  43. color: #fff;
  44. background-color: #ccc;
  45. }
  46. .calendar-calendar td {
  47. width: 12%; /* 14% is about 1/7 of total table width */
  48. min-width: 12%;
  49. border: 1px solid #ccc;
  50. color: #777;
  51. text-align: right;
  52. vertical-align: top;
  53. margin: 0;
  54. padding:0;
  55. }
  56. /* simplify the mini calendar by removing borders */
  57. .calendar-calendar .mini {
  58. border:none;
  59. }
  60. /* format for the week number in the first cell */
  61. .calendar-calendar td.week {
  62. width:1%;
  63. min-width:1%;
  64. }
  65. .calendar-calendar .week {
  66. clear:both;
  67. font-style: normal;
  68. color: #555;
  69. font-size: 0.8em;
  70. }
  71. .calendar-calendar .week a {
  72. font-weight:normal;
  73. }
  74. /* IE6 does not support min-height, using Min-Height fast hack from http://www.dustindiaz.com/min-height-fast-hack */
  75. .calendar-calendar .inner {
  76. min-height:5em;
  77. height:auto !important;
  78. height:5em;
  79. padding:0;
  80. margin:0;
  81. }
  82. .calendar-calendar .inner div {
  83. padding:0;
  84. margin:0;
  85. }
  86. /* Make sure paragraphs buried in calendar cells use padding, not margins, for separation so the background color doesn't come through. */
  87. .calendar-calendar .inner p {
  88. padding:0 0 .8em 0;
  89. margin:0;
  90. }
  91. .calendar-calendar td a {
  92. font-weight: bold;
  93. text-decoration: none;
  94. }
  95. .calendar-calendar td a:hover {
  96. text-decoration: underline;
  97. }
  98. .calendar-calendar td.year,
  99. .calendar-calendar td.month {
  100. text-align: center;
  101. }
  102. /* format days of the week header cells */
  103. .calendar-calendar th.days {
  104. color: #ccc;
  105. background-color: #224;
  106. text-align: center;
  107. padding:1px;
  108. margin:0;
  109. }
  110. /* floating day number div */
  111. .calendar-calendar div.day {
  112. float: right;
  113. text-align: center;
  114. padding: 0.125em 0.25em 0 0.25em;
  115. margin: 0;
  116. background-color: #f3f3f3;
  117. border: 1px solid gray;
  118. border-width: 0 0 1px 1px;
  119. clear:both;
  120. width:1.5em;
  121. }
  122. /* individual node container */
  123. .calendar-calendar div.calendar {
  124. background-color: #fff;
  125. border: solid 1px #ddd;
  126. text-align: left;
  127. margin:0 .25em .25em 0;
  128. width: 96%;
  129. float:right; /* needed to keep IE from hiding the floating day number */
  130. clear:both;
  131. }
  132. /* No floating of day view content because there is no floating day number */
  133. .calendar-calendar .day-view div.calendar {
  134. float:none;
  135. width:98%;
  136. margin:1% 1% 0 1%;
  137. }
  138. .calendar-calendar div.title {
  139. font-size:.8em;
  140. text-align:center;
  141. }
  142. .calendar-calendar div.title a {
  143. color: #000;
  144. }
  145. .calendar-calendar div.title a:hover {
  146. color: #c00;
  147. }
  148. .calendar-calendar .content {
  149. clear:both;
  150. padding: 3px;
  151. padding-left: 5px;
  152. }
  153. .calendar div.form-item {
  154. white-space: normal;
  155. }
  156. table td.mini,
  157. table th.mini,
  158. table.mini td.week {
  159. padding:0 1px 0 0;
  160. margin:0;
  161. }
  162. table td.mini a {
  163. font-weight:normal;
  164. }
  165. .calendar-calendar .mini-day-off {
  166. padding:0px;
  167. }
  168. .calendar-calendar .mini-day-on {
  169. padding:0px;
  170. }
  171. table .mini-day-on a {
  172. text-decoration:underline;
  173. }
  174. .calendar-calendar .mini .title {
  175. font-size:.8em;
  176. }
  177. .mini .calendar-calendar .week {
  178. font-size:.7em;
  179. }
  180. .mini-row {
  181. width:100%;
  182. border:none;
  183. }
  184. .mini{
  185. width:32%;
  186. vertical-align:top;
  187. }
  188. /* formatting for the legend stripe and block */
  189. .calendar-calendar .stripe {
  190. height: 5px;
  191. width: auto;
  192. font-size:1px !important;
  193. line-height:1px !important;
  194. }
  195. .calendar-calendar .day-view .stripe {
  196. width:100%;
  197. }
  198. table.calendar-legend {
  199. background-color:#ccc;
  200. width:100%;
  201. margin:0;
  202. padding:0;
  203. }
  204. table.calendar-legend tr.odd .stripe,
  205. table.calendar-legend tr.even .stripe {
  206. height:12px !important;
  207. font-size:9px !important;
  208. line-height:10px !important;
  209. }
  210. .calendar-legend td {
  211. text-align:left;
  212. }
  213. .calendar-empty {
  214. font-size:1px;
  215. line-height:1px;
  216. }
  217. /* formatting for the full day view */
  218. .calendar-calendar td.calendar-agenda-hour {
  219. font-family:serif;
  220. text-align:right;
  221. border:none;
  222. border-top:1px #333 dotted;
  223. padding-top:.25em;
  224. width:1%;
  225. }
  226. .calendar-calendar td.calendar-agenda-no-hours {
  227. min-width:1%;
  228. }
  229. .calendar-calendar td.calendar-agenda-hour .calendar-hour {
  230. font-size:1.2em;
  231. font-weight:bold;
  232. }
  233. .calendar-calendar td.calendar-agenda-hour .calendar-ampm {
  234. font-size:1em;
  235. }
  236. .calendar-calendar td.calendar-agenda-items {
  237. border:1px #333 dotted;
  238. text-align:left;
  239. }
  240. .calendar-calendar td.calendar-agenda-items div.calendar {
  241. width:auto;
  242. padding:.25em;
  243. margin:0;
  244. }
  245. .calendar-calendar div.calendar div.inner .calendar-agenda-empty {
  246. width:100%;
  247. text-align:center;
  248. vertical-align:middle;
  249. padding:1em 0;
  250. background-color:#fff;
  251. }
  252. /* the popup date selector for jumping to a new date */
  253. .calendar-date-select form {
  254. text-align:right;
  255. float:right;
  256. width:25%;
  257. }
  258. .calendar-date-select div,
  259. .calendar-date-select input,
  260. .calendar-date-select label {
  261. text-align:right;
  262. padding:0;
  263. margin:0;
  264. float:right;
  265. clear:both;
  266. }
  267. .calendar-date-select .description {
  268. float:right;
  269. }
  270. .calendar-label {
  271. font-weight:bold;
  272. display:block;
  273. clear:both;
  274. }
  275. .calendar-calendar div.date-nav {
  276. background-color:#ccc;
  277. color:#777;
  278. width:auto;
  279. border:1px solid #ccc;
  280. }
  281. .calendar-calendar div.date-nav a,
  282. .calendar-calendar div.date-nav h3 {
  283. color:#777;
  284. }
  285. .calendar-calendar th.days {
  286. background-color:#eee;
  287. color:#777;
  288. font-weight:bold;
  289. border:1px solid #ccc;
  290. }
  291. .calendar-calendar td.empty {
  292. background:#ccc;
  293. border-color:#ccc;
  294. }
  295. .calendar-calendar table.mini td.empty {
  296. background:#fff;
  297. border-color:#fff;
  298. }
  299. .calendar-calendar td div.day {
  300. border:1px solid #ccc;
  301. border-top:none;
  302. border-right:none;
  303. margin-bottom:2px;
  304. }
  305. .calendar-calendar td .inner div,
  306. .calendar-calendar td .inner div a {
  307. background:#eee;
  308. }
  309. /* Set small font size for all items in calendar div, themes can override this. */
  310. /* Use x-small instead of em to avoid multiplying effect in nested items. */
  311. .calendar-calendar div.calendar {
  312. border:none;
  313. font-size:x-small;
  314. }
  315. .calendar-calendar td .inner div.calendar div,
  316. .calendar-calendar td .inner div.calendar div a {
  317. border:none;
  318. background:#ffc;
  319. padding:0 2px;
  320. }
  321. .calendar-calendar td .inner div.calendar div.calendar-more,
  322. .calendar-calendar td .inner div.calendar div.calendar-more a {
  323. color:#444;
  324. background:#fff;
  325. text-align:right;
  326. }
  327. .calendar-calendar td .inner .view-field,
  328. .calendar-calendar td .inner .view-field a {
  329. color:#444;
  330. font-weight:normal;
  331. }
  332. .calendar-calendar td span.date-display-single,
  333. .calendar-calendar td span.date-display-start,
  334. .calendar-calendar td span.date-display-end,
  335. .calendar-calendar td span.date-display-separator {
  336. font-weight:bold;
  337. }
  338. .calendar-calendar td .inner div.day a {
  339. color:#4b85ac;
  340. }
  341. .calendar-calendar tr td.today,
  342. .calendar-calendar tr.odd td.today,
  343. .calendar-calendar tr.even td.today {
  344. background-color:#C3D6E4;
  345. }
  346. .calendar-calendar td .inner div.calendar div div.view-data-node-data-field-date-field-date-value {
  347. border-bottom:1px solid #ccc;
  348. }
  349. /* The following are not used by default but are available for themes */
  350. .calendar-calendar td.past {}
  351. .calendar-calendar td.future {}
  352. .calendar-calendar td.has-events {}
  353. .calendar-calendar td.has-no-events {}