You are here

event.css in Event 5.2

Same filename and directory in other branches
  1. 5 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;
  font-size: 0.8em;
}
.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. font-size: 0.8em;
  141. }
  142. .event-calendar .end {
  143. font-style: normal;
  144. color: #555;
  145. margin: 2px 0 2px 0;
  146. padding-left: 9px;
  147. font-size: 0.8em;
  148. }
  149. .event-calendar .ongoing {
  150. font-style: normal;
  151. color: #555;
  152. margin: 2px 0 2px 0;
  153. padding-left: 9px;
  154. font-size: 0.8em;
  155. }
  156. .event-calendar div.info {
  157. visibility: hidden;
  158. height: 0px;
  159. overflow:hidden;
  160. padding-left: 3px;
  161. }
  162. /* individual node view styles */
  163. .event-calendar div.monthview .title {
  164. font-size: 0.8em;
  165. }
  166. .event-calendar div.dayview {
  167. width: auto;
  168. }
  169. .event-calendar div.tableview {
  170. width: auto;
  171. }
  172. .event-calendar div.tableview .links {
  173. }
  174. .event-calendar .event-empty {
  175. min-height: 6em;
  176. }
  177. /* hack to make Internet Explorer for Windows display calendar height correctly \*/
  178. * html .event-calendar .event-empty {
  179. height: 6em;
  180. }
  181. /* end of hack */
  182. .container-inline .day input {
  183. width: auto;
  184. display: inline;
  185. }
  186. /* multi-day event top stripes */
  187. .event-calendar .event .stripe {
  188. height: 5px;
  189. }
  190. .event-calendar .event .stripe-1 {
  191. background-color: #FF6;
  192. height: 5px;
  193. width: 100%;
  194. }
  195. .event-calendar .event .stripe-2 {
  196. background-color: #F66;
  197. height: 5px;
  198. width: 100%;
  199. }
  200. .event-calendar .event .stripe-3 {
  201. background-color: #668CFF;
  202. height: 5px;
  203. width: 100%;
  204. }
  205. .event-calendar .event .stripe-4 {
  206. background-color: #FFB366;
  207. height: 5px;
  208. width: 100%;
  209. }
  210. .event-calendar .event .stripe-5 {
  211. background-color: #85FF66;
  212. height: 5px;
  213. width: 100%;
  214. }
  215. .event-calendar .event .stripe-6 {
  216. background-color: #A666FF;
  217. height: 5px;
  218. width: 100%;
  219. }
  220. .event-calendar .event .stripe-7 {
  221. background-color: #FFE066;
  222. height: 5px;
  223. width: 100%;
  224. }
  225. .event-calendar .event .stripe-8 {
  226. background-color: #66FFFF;
  227. height: 5px;
  228. width: 100%;
  229. }
  230. .event-calendar .event .stripe-9 {
  231. background-color: #FF66D9;
  232. height: 5px;
  233. width: 100%;
  234. }
  235. .event-calendar .event .stripe-10 {
  236. background-color: #DDD;
  237. height: 5px;
  238. width: 100%;
  239. }
  240. .event-calendar div.month-view table.event-block thead,
  241. .event-calendar div.month-view table.event-block tbody {
  242. font-size: .9em;
  243. }
  244. .event-calendar div.month-view table.event-block th {
  245. font-weight: normal;
  246. }
  247. #block-event-1 .item-list ul li a {
  248. margin-top: 8px;
  249. }
  250. span.event-timeleft {
  251. padding-bottom: 3px;
  252. text-align: right;
  253. width: auto;
  254. display: block;
  255. }
  256. span.event-nodetype {
  257. padding: 0px 0px 0px 5px;
  258. display: block;
  259. width: auto;
  260. text-align: right;
  261. float: right;
  262. }
  263. .ical-link {
  264. text-align: right;
  265. }
  266. .event div.form-item {
  267. white-space: normal;
  268. }