You are here

calendar.css in Calendar 7.3

Same filename and directory in other branches
  1. 8 css/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

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