calendar.css 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. /* Styles for the calendar section.
  2. ------------------------------------------------- */
  3. #calendar {
  4. overflow: hidden;
  5. }
  6. /* Used to indicate the current day in the grid. */
  7. #main_grid .calendar_today span.day_text, #month_grid .calendar_today, .calendar_week tr.days_wrapper td.calendar_today:first-child {
  8. font-weight: bold;
  9. }
  10. .calendar_today, td.days:hover {
  11. background: #fff;
  12. }
  13. #month_grid {
  14. width: 284px;
  15. float: left;
  16. text-align: center;
  17. overflow: hidden;
  18. margin-right: 1%;
  19. }
  20. #month_grid h3 a {
  21. padding: 0 6px 0 6px;
  22. }
  23. #month_grid table {
  24. width: 100%;
  25. margin-bottom: 12px;
  26. border-collapse: collapse;
  27. background: #f0f4f7;
  28. border: 1px solid #ccc;
  29. }
  30. #main_grid {
  31. overflow: auto;
  32. }
  33. #main_grid table {
  34. width: 99.9%;
  35. border-collapse: collapse;
  36. background: #f0f4f7;
  37. margin: 1px 0 0 0;
  38. border: 1px solid #ccc;
  39. overflow: auto;
  40. -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-sizing: border-box;
  41. margin-left: 1px;
  42. }
  43. #main_grid .cat_bar {
  44. border-radius: 5px 5px 0 0;
  45. margin: 0 0 0 1px;
  46. }
  47. #month_grid table th:first-child {
  48. background: #e7eaef;
  49. }
  50. #month_grid table th.days {
  51. background: #e7eaef;
  52. }
  53. #month_grid table th.days, #month_grid table td.weeks {
  54. padding: 5px;
  55. text-align: center;
  56. }
  57. #month_grid table td.weeks {
  58. font-size: large;
  59. background: #e7eaef;
  60. }
  61. #month_grid td.weeks a:hover {
  62. text-decoration: underline;
  63. }
  64. #month_grid h3.catbg, #main_grid h3.catbg {
  65. padding: 8px 6px 4px 6px;
  66. }
  67. #main_grid h3.catbg span {
  68. display: block;
  69. font-size: 1.5em;
  70. margin: -3px 4px 0 4px;
  71. }
  72. #main_grid table th:first-child {
  73. background: #e7eaef;
  74. }
  75. #main_grid table th.days {
  76. width: 14%;
  77. padding: 10px;
  78. text-align: left;
  79. background: #e7eaef;
  80. }
  81. #main_grid table td.weeks {
  82. text-align: center;
  83. font-weight: bold;
  84. font-size: 1.8em;
  85. background: #e7eaef;
  86. }
  87. #main_grid table td.weeks a:hover {
  88. text-decoration: none;
  89. }
  90. /* Main Highlighting */
  91. #main_grid table td.disabled, #month_grid table td.disabled {
  92. background: rgba(238, 238, 238, 1.0);
  93. }
  94. #main_grid table td.events, #month_grid table td.events {
  95. background: rgba(30, 245, 20, 0.1);
  96. }
  97. #main_grid table td.holidays, #month_grid table td.holidays {
  98. background: rgba(23, 110, 245, 0.1);
  99. }
  100. #main_grid table td.birthdays, #month_grid table td.birthdays {
  101. background: rgba(102, 0, 255, 0.1);
  102. }
  103. /* Special Case Highlighting */
  104. #main_grid table td.events:hover, #month_grid table td.events:hover, #month_grid table td.calendar_today.events {
  105. background: rgba(30, 245, 20, 0.2);
  106. }
  107. #main_grid table td.holidays:hover, #month_grid table td.holidays:hover, #month_grid table td.calendar_today.holidays {
  108. background: rgba(23, 110, 245, 0.2);
  109. }
  110. #main_grid table td.birthdays:hover, #month_grid table td.birthdays:hover, #month_grid table td.calendar_today.birthdays {
  111. background: rgba(153, 51, 255, 0.2);
  112. }
  113. #main_grid table td.days, #month_grid table td.days {
  114. vertical-align: top;
  115. text-align: left;
  116. border-right: 1px solid #ccc;
  117. border-bottom: 1px solid #ccc;
  118. }
  119. #main_grid table td.days {
  120. padding: 10px;
  121. }
  122. #month_grid table td.days {
  123. padding: 5px;
  124. width: 14.28%;
  125. text-align: center;
  126. }
  127. #main_grid table tbody tr:nth-child(2) td.days, #month_grid table tbody tr:nth-child(2) {
  128. border-top: 1px solid #ccc;
  129. }
  130. #main_grid table tbody tr.days_wrapper > td:nth-child(2), #month_grid table tr.days_wrapper > td:nth-child(2) {
  131. border-left: 1px solid #ccc;
  132. }
  133. #main_grid table tr.days_wrapper:nth-child(2) > td.weeks {
  134. border-top: 1px solid #ccc;
  135. }
  136. #main_grid table:last-child td.weeks {
  137. border-bottom: 1px solid #ccc;
  138. }
  139. #main_grid td#post_event {
  140. background: #e7eaef;
  141. text-align: center;
  142. padding-top: 12px;
  143. margin-right: 0;
  144. }
  145. #main_grid img.calendar_icon {
  146. float: left;
  147. width: 16px;
  148. margin: 2px 2px;
  149. }
  150. #main_grid .act_day {
  151. font-size: 12pt;
  152. }
  153. #main_grid .active_post_event > a {
  154. color: #999;
  155. }
  156. div.week_month_title {
  157. font-weight: bold;
  158. font-size: xx-large;
  159. margin: 10px 0 12px 2px;
  160. }
  161. div.week_month_title a {
  162. color: #555;
  163. }
  164. td.week_post {
  165. vertical-align: middle !important;
  166. }
  167. div.week_add_event {
  168. text-align: center;
  169. }
  170. div.week_add_event > a {
  171. font-size: x-large;
  172. color: #999;
  173. }
  174. div.week_add_event > a:hover {
  175. color: #555;
  176. }
  177. span.hidelink {
  178. font-style: italic;
  179. }
  180. #view_button {
  181. margin-top: -2px;
  182. }
  183. /* Cheat and match this to the submit button. */
  184. #main_grid .buttonlist {
  185. margin: -4px 12px 0 0;
  186. }
  187. #month_grid .compact {
  188. padding: 2px;
  189. }
  190. #month_grid .comfortable {
  191. padding: 5px;
  192. }
  193. #main_grid .compact, .calendar_week .compact {
  194. height: 45px;
  195. }
  196. #main_grid .comfortable, .calendar_week .comfortable {
  197. height: 100px;
  198. padding: 10px;
  199. }