You are here

event.css in Event 5

Same filename and directory in other branches
  1. 5.2 event.css
/*  event calendar table styles  */
.event-calendar table {
  border: 1px solid #242;
  border-collapse: collapse;
  border-spacing: 0;
  width: 98%; /* Setting at 100% causes problem in Internet Explorer. */
  margin-bottom: 1em;
}
.event-calendar tr {
  padding: 0;
  margin: 0;
  background: white;
}
.event-calendar th {
  color: #000;
  background: #aac;
  text-align: center;
  padding: 1px 0.33em;
  border: 1px solid #242;
}
.event-calendar .month-view td,
.event-calendar .week-view td {
  width: 14%; /* 14% is about 1/7 of total table width */
}
.event-calendar td {
  border: 1px solid #bbb;
  color: #777;
  text-align: right;
  vertical-align: top;
  margin: 0;
  padding: 0;
}
.event-calendar th.heading {
  border-width: 1px 0px;
}
.event-calendar th.prev {
  text-align: left;
  border-width: 1px 0px 1px 1px;
}
.event-calendar th.next {
  text-align: right;
  border-width: 1px 1px 1px 0px;
}
.event-calendar th a {
  font-weight: bold;
  color: #363636;
}
.event-calendar td a {
  color: #222244;
  font-weight: bold;
  text-decoration: none;
}
.event-calendar td a:hover {
  text-decoration: underline;
}
.event-calendar td.sat, .event-calendar td.sun {
  background: #fdd;
}
.event-calendar td.selected {
  background: #99f;
}
.event-calendar td.today {
  background: #f99;
}
.event-calendar td.year, .event-calendar td.month {
  text-align: center;
  border-width: 1px 0px;
}

/*  days of the week header cells */
.event-calendar td.days {
  color: #cce;
  background: #224;
  text-align: center;
  border: 1px solid #242;
  border-width: 0 1px 1px 0;
}

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

/*  event node times for the body */
.event-nodeapi div {
  color: #000;
  padding: 0.5em 1em 0 0;
}
.event-nodeapi div label { color: #999; }

/*  individual node container  */
.event-calendar div.event {
  font-style: italic;
  background-color: #fff;
  border: solid 1px #555;
  text-align: left;
  margin: 0.25em 0 0.5em 0.25em;
}
.event-calendar div.title {
  padding-left: 3px;
}
.event-calendar div.title a {
  color: #000;
}
.event-calendar div.title a:hover {
  color: #c00;
}
.event-calendar .content {
  margin: 5px;
  padding: 3px;
  border-left: solid 2px #ddd;
  padding-left: 5px;
}
.event-calendar div.type {
  margin-left: 5px;
  font-size: 0.8em;
}
.event-calendar div.type a {
  color: #00c;
}
.event-calendar div.type a:hover {
  color: #c00;
}
.event-calendar div.links {
  padding-left: 3px;
}
.event-calendar div.links a {
  color: #00c;
}
.event-calendar div.links a:hover {
  color: #c00;
}
.event-calendar .start {
  font-style: normal;
  color: #555;
  margin: 2px 0 2px 0;
  padding-left: 3px;
}
.event-calendar .end {
  font-style: normal;
  color: #555;
  margin: 2px 0 2px 0;
  padding-left: 9px;
  font-size: 0.8em;
}
.event-calendar .ongoing {
  font-style: normal;
  color: #555;
  margin: 2px 0 2px 0;
  padding-left: 9px;
  font-size: 0.8em;
}
.event-calendar div.info {
  visibility: hidden;
  height: 0px;
  overflow:hidden;
  padding-left: 3px;
}

/*  individual node view styles  */
.event-calendar div.monthview .title {
  font-size: 0.8em;
}
.event-calendar div.dayview {
  width: auto;
}
.event-calendar div.tableview {
  width: auto;
}
.event-calendar div.tableview .links {
}
.event-calendar .event-empty {
  min-height: 6em;
}
/* hack to make Internet Explorer for Windows display calendar height correctly \*/
* html .event-calendar .event-empty {
  height: 6em;
}
/* end of hack */
.container-inline .day input {
  width: auto;
  display: inline;
}

/*  multi-day event top stripes  */
.event-calendar .event .stripe {
  height: 5px;
}
.event-calendar .event .stripe-1 {
  background-color: #FF6;
  height: 5px;
  width: 100%;
}
.event-calendar .event .stripe-2 {
  background-color: #F66;
  height: 5px;
  width: 100%;
}
.event-calendar .event .stripe-3 {
  background-color: #668CFF;
  height: 5px;
  width: 100%;
}
.event-calendar .event .stripe-4 {
  background-color: #FFB366;
  height: 5px;
  width: 100%;
}
.event-calendar .event .stripe-5 {
  background-color: #85FF66;
  height: 5px;
  width: 100%;
}
.event-calendar .event .stripe-6 {
  background-color: #A666FF;
  height: 5px;
  width: 100%;
}
.event-calendar .event .stripe-7 {
  background-color: #FFE066;
  height: 5px;
  width: 100%;
}
.event-calendar .event .stripe-8 {
  background-color: #66FFFF;
  height: 5px;
  width: 100%;
}
.event-calendar .event .stripe-9 {
  background-color: #FF66D9;
  height: 5px;
  width: 100%;
}
.event-calendar .event .stripe-10 {
  background-color: #DDD;
  height: 5px;
  width: 100%;
}
.event-calendar div.month-view table.event-block thead,
.event-calendar div.month-view table.event-block tbody {
  font-size: .9em;
}
.event-calendar div.month-view table.event-block th { 
  font-weight: normal;
}
#block-event-1 .item-list ul li a { 
  margin-top: 8px; 
}

span.event-timeleft {
  padding-bottom: 3px;
  text-align: right;
  width: auto;
  display: block;
}
span.event-nodetype {
  padding: 0px 0px 0px 5px;
  display: block;
  width: auto;
  text-align: right;
  float: right;
}
.ical-link {
  text-align: right;
}
.event div.form-item {
  white-space: normal;
}

File

event.css
View source
  1. /* event calendar table styles */
  2. .event-calendar table {
  3. border: 1px solid #242;
  4. border-collapse: collapse;
  5. border-spacing: 0;
  6. width: 98%; /* Setting at 100% causes problem in Internet Explorer. */
  7. margin-bottom: 1em;
  8. }
  9. .event-calendar tr {
  10. padding: 0;
  11. margin: 0;
  12. background: white;
  13. }
  14. .event-calendar th {
  15. color: #000;
  16. background: #aac;
  17. text-align: center;
  18. padding: 1px 0.33em;
  19. border: 1px solid #242;
  20. }
  21. .event-calendar .month-view td,
  22. .event-calendar .week-view td {
  23. width: 14%; /* 14% is about 1/7 of total table width */
  24. }
  25. .event-calendar td {
  26. border: 1px solid #bbb;
  27. color: #777;
  28. text-align: right;
  29. vertical-align: top;
  30. margin: 0;
  31. padding: 0;
  32. }
  33. .event-calendar th.heading {
  34. border-width: 1px 0px;
  35. }
  36. .event-calendar th.prev {
  37. text-align: left;
  38. border-width: 1px 0px 1px 1px;
  39. }
  40. .event-calendar th.next {
  41. text-align: right;
  42. border-width: 1px 1px 1px 0px;
  43. }
  44. .event-calendar th a {
  45. font-weight: bold;
  46. color: #363636;
  47. }
  48. .event-calendar td a {
  49. color: #222244;
  50. font-weight: bold;
  51. text-decoration: none;
  52. }
  53. .event-calendar td a:hover {
  54. text-decoration: underline;
  55. }
  56. .event-calendar td.sat, .event-calendar td.sun {
  57. background: #fdd;
  58. }
  59. .event-calendar td.selected {
  60. background: #99f;
  61. }
  62. .event-calendar td.today {
  63. background: #f99;
  64. }
  65. .event-calendar td.year, .event-calendar td.month {
  66. text-align: center;
  67. border-width: 1px 0px;
  68. }
  69. /* days of the week header cells */
  70. .event-calendar td.days {
  71. color: #cce;
  72. background: #224;
  73. text-align: center;
  74. border: 1px solid #242;
  75. border-width: 0 1px 1px 0;
  76. }
  77. /* floating day number div */
  78. .event-calendar div.day {
  79. float: right;
  80. text-align: center;
  81. border: 1px solid gray;
  82. border-width: 0 0 1px 1px;
  83. padding: 0.125em 0.25em 0 0.25em;
  84. margin: 0;
  85. background: #f3f3f3;
  86. }
  87. /* event node times for the body */
  88. .event-nodeapi div {
  89. color: #000;
  90. padding: 0.5em 1em 0 0;
  91. }
  92. .event-nodeapi div label { color: #999; }
  93. /* individual node container */
  94. .event-calendar div.event {
  95. font-style: italic;
  96. background-color: #fff;
  97. border: solid 1px #555;
  98. text-align: left;
  99. margin: 0.25em 0 0.5em 0.25em;
  100. }
  101. .event-calendar div.title {
  102. padding-left: 3px;
  103. }
  104. .event-calendar div.title a {
  105. color: #000;
  106. }
  107. .event-calendar div.title a:hover {
  108. color: #c00;
  109. }
  110. .event-calendar .content {
  111. margin: 5px;
  112. padding: 3px;
  113. border-left: solid 2px #ddd;
  114. padding-left: 5px;
  115. }
  116. .event-calendar div.type {
  117. margin-left: 5px;
  118. font-size: 0.8em;
  119. }
  120. .event-calendar div.type a {
  121. color: #00c;
  122. }
  123. .event-calendar div.type a:hover {
  124. color: #c00;
  125. }
  126. .event-calendar div.links {
  127. padding-left: 3px;
  128. }
  129. .event-calendar div.links a {
  130. color: #00c;
  131. }
  132. .event-calendar div.links a:hover {
  133. color: #c00;
  134. }
  135. .event-calendar .start {
  136. font-style: normal;
  137. color: #555;
  138. margin: 2px 0 2px 0;
  139. padding-left: 3px;
  140. }
  141. .event-calendar .end {
  142. font-style: normal;
  143. color: #555;
  144. margin: 2px 0 2px 0;
  145. padding-left: 9px;
  146. font-size: 0.8em;
  147. }
  148. .event-calendar .ongoing {
  149. font-style: normal;
  150. color: #555;
  151. margin: 2px 0 2px 0;
  152. padding-left: 9px;
  153. font-size: 0.8em;
  154. }
  155. .event-calendar div.info {
  156. visibility: hidden;
  157. height: 0px;
  158. overflow:hidden;
  159. padding-left: 3px;
  160. }
  161. /* individual node view styles */
  162. .event-calendar div.monthview .title {
  163. font-size: 0.8em;
  164. }
  165. .event-calendar div.dayview {
  166. width: auto;
  167. }
  168. .event-calendar div.tableview {
  169. width: auto;
  170. }
  171. .event-calendar div.tableview .links {
  172. }
  173. .event-calendar .event-empty {
  174. min-height: 6em;
  175. }
  176. /* hack to make Internet Explorer for Windows display calendar height correctly \*/
  177. * html .event-calendar .event-empty {
  178. height: 6em;
  179. }
  180. /* end of hack */
  181. .container-inline .day input {
  182. width: auto;
  183. display: inline;
  184. }
  185. /* multi-day event top stripes */
  186. .event-calendar .event .stripe {
  187. height: 5px;
  188. }
  189. .event-calendar .event .stripe-1 {
  190. background-color: #FF6;
  191. height: 5px;
  192. width: 100%;
  193. }
  194. .event-calendar .event .stripe-2 {
  195. background-color: #F66;
  196. height: 5px;
  197. width: 100%;
  198. }
  199. .event-calendar .event .stripe-3 {
  200. background-color: #668CFF;
  201. height: 5px;
  202. width: 100%;
  203. }
  204. .event-calendar .event .stripe-4 {
  205. background-color: #FFB366;
  206. height: 5px;
  207. width: 100%;
  208. }
  209. .event-calendar .event .stripe-5 {
  210. background-color: #85FF66;
  211. height: 5px;
  212. width: 100%;
  213. }
  214. .event-calendar .event .stripe-6 {
  215. background-color: #A666FF;
  216. height: 5px;
  217. width: 100%;
  218. }
  219. .event-calendar .event .stripe-7 {
  220. background-color: #FFE066;
  221. height: 5px;
  222. width: 100%;
  223. }
  224. .event-calendar .event .stripe-8 {
  225. background-color: #66FFFF;
  226. height: 5px;
  227. width: 100%;
  228. }
  229. .event-calendar .event .stripe-9 {
  230. background-color: #FF66D9;
  231. height: 5px;
  232. width: 100%;
  233. }
  234. .event-calendar .event .stripe-10 {
  235. background-color: #DDD;
  236. height: 5px;
  237. width: 100%;
  238. }
  239. .event-calendar div.month-view table.event-block thead,
  240. .event-calendar div.month-view table.event-block tbody {
  241. font-size: .9em;
  242. }
  243. .event-calendar div.month-view table.event-block th {
  244. font-weight: normal;
  245. }
  246. #block-event-1 .item-list ul li a {
  247. margin-top: 8px;
  248. }
  249. span.event-timeleft {
  250. padding-bottom: 3px;
  251. text-align: right;
  252. width: auto;
  253. display: block;
  254. }
  255. span.event-nodetype {
  256. padding: 0px 0px 0px 5px;
  257. display: block;
  258. width: auto;
  259. text-align: right;
  260. float: right;
  261. }
  262. .ical-link {
  263. text-align: right;
  264. }
  265. .event div.form-item {
  266. white-space: normal;
  267. }