1 body, 2 #participants, 3 #pending-requests { 4 background-color: #fff; 5 } 6 7 #participants { 8 float: right; 9 } 10 11 #pending-requests { 12 float: left; 13 } 14 15 #calendar-controls, 16 #time-navigation, 17 div.calendar { 18 clear: both; 19 } 20 21 /* Table styling. */ 22 23 table.calendar { 24 min-width: 100%; 25 table-layout: fixed; 26 } 27 28 table.conflicts, 29 table.counters, 30 table.recurrence, 31 table.object { 32 border: 2px solid #000; 33 } 34 35 colgroup#columns-request { 36 background-color: #eef; 37 } 38 39 colgroup#columns-freebusy { 40 background-color: #fee; 41 } 42 43 th.requestheading { 44 background-color: #aaf; 45 } 46 47 th.participantheading{ 48 background-color: #faa; 49 } 50 51 caption.dayheading, 52 th.mainheading { 53 background-color: #f85; 54 width: 100%; 55 } 56 57 th.timeslot, 58 th.objectheading { 59 white-space: nowrap; 60 } 61 62 th.objectheading { 63 background-color: #fca; 64 } 65 66 th.timeslot { 67 padding-top: 0; 68 vertical-align: top; 69 width: 10em; 70 } 71 72 th.timeslot span.endpoint { 73 display: none; 74 font-size: smaller; 75 position: relative; 76 bottom: 0.25em; 77 } 78 79 td.event { 80 background-color: #ff8; 81 border: 2px solid #000; 82 width: 10em; 83 } 84 85 td.empty { 86 min-width: 10em; 87 } 88 89 td.event.only-organising { 90 background-color: #afd; 91 } 92 93 td.event.organising { 94 background-color: #af8; 95 } 96 97 td.event.continued { 98 border-top: 2px dotted #000; 99 } 100 101 td.event.continues { 102 border-bottom: 2px dotted #000; 103 } 104 105 td.event:target { 106 border-width: 4px; 107 background-color: #ee2; 108 } 109 110 td.event.organising:target { 111 background-color: #5f4; 112 } 113 114 td.event a { 115 color: #009; 116 } 117 118 th.objectheading.error { 119 background-color: #f77; 120 } 121 122 .partstat { 123 margin-left: 1em; 124 background-color: #eee; 125 } 126 127 .partstat, 128 .partstat option { 129 padding: 0.25em; 130 } 131 132 select.partstat { 133 background-color: #ccc; 134 padding: 0; 135 font-family: inherit; 136 font-size: inherit; 137 } 138 139 .affected { 140 font-weight: bold; 141 } 142 143 table.recurrence .replaced, 144 table.conflicts .replaced, 145 table.counters .replaced { 146 text-decoration: line-through; 147 } 148 149 .objectvalue.dtstart.excluded, 150 .objectvalue.dtstart.replaced { 151 vertical-align: top; 152 } 153 154 table.counters tr.selected { 155 background-color: #af8; 156 } 157 158 table.counters td, 159 table.counters th { 160 vertical-align: top; 161 } 162 163 /* New event controls. */ 164 165 .newevent-with-periods { 166 display: none; 167 } 168 169 /* Selection of slots/periods for new events. */ 170 171 input.newevent.selector { 172 display: none; 173 } 174 175 input.newevent.selector:checked ~ p.newevent-with-periods { 176 display: block; 177 } 178 179 th.container, 180 td.container { 181 padding: 0; /* for regions covered by labels */ 182 } 183 184 caption.dayheading:hover, 185 caption.dayheading:focus, 186 th.timeslot:hover, 187 th.timeslot:focus, 188 td.container:hover, 189 td.container:focus { 190 background-color: #af8; 191 } 192 193 label.day, 194 label.newevent.popup { 195 display: block; /* to make labels cover regions */ 196 padding: 0.25em; 197 } 198 199 label.newevent.popup { 200 visibility: hidden; 201 text-align: center; 202 } 203 204 td.container:hover label.newevent.popup, 205 td.container:focus label.newevent.popup { 206 visibility: visible; 207 } 208 209 /* Hiding/showing busy slots/periods or unused days. */ 210 211 /* Hide the controls. */ 212 213 input#earlier, 214 input#later, 215 input#hidebusy, 216 input#showdays, 217 218 /* Hide the enable labels when controls are already enabled. */ 219 /* Hide the disable labels when controls are already disabled. */ 220 221 input#hidebusy:checked ~ .controls label.enable[for=hidebusy], 222 input#showdays:checked ~ .controls label.disable[for=showdays], 223 input#hidebusy:not(:checked) ~ .controls label.disable[for=hidebusy], 224 input#showdays:not(:checked) ~ .controls label.enable[for=showdays], 225 226 /* Hide calendar rows depending on the selected controls. */ 227 228 input#hidebusy:checked ~ div.calendar tr.slot.busy, 229 input#showdays:not(:checked) ~ div.calendar .calendar.empty, 230 231 /* Hiding/showing start/end times. */ 232 233 input#dttimes-enable, 234 input#dtend-enable, 235 input#dttimes-enable:not(:checked) ~ .object td.objectvalue .time.enabled, 236 input#dttimes-enable:checked ~ .object td.objectvalue .time.disabled, 237 input#dtend-enable:not(:checked) ~ .object td.objectvalue.dtend .dt.enabled, 238 input#dtend-enable:checked ~ .object td.objectvalue.dtend .dt.disabled, 239 240 /* Hiding/showing remove/uninvite labels. */ 241 242 input.add, 243 input.remove, 244 input.remove:checked ~ label.remove, 245 input.remove:not(:checked) ~ label.removed, 246 247 /* Hide the participation refresh control, selected using a label. */ 248 249 input.refresh, 250 251 /* Hide the reset control, selected using a label. */ 252 253 input#reset { 254 display: none; 255 } 256 257 /* Hiding/showing end datetimes and start/end times. */ 258 259 input#dtend-enable:not(:checked) ~ .object td.objectvalue.dtend .date.enabled, 260 input#dtend-enable:checked ~ .object td.objectvalue.dtend .date.disabled { 261 visibility: hidden; 262 } 263 264 /* Show slot endpoints when hiding adjacent busy periods. */ 265 266 input#hidebusy:checked ~ div.calendar th.timeslot span.endpoint { 267 display: block; 268 } 269 270 /* Make calendar labels occupy cells completely. 271 See: http://stackoverflow.com/questions/2841484/how-can-a-label-completely-fill-its-parent-td 272 */ 273 274 tr.slot { 275 height: 0; 276 } 277 278 th.timeslot, 279 td.empty { 280 height: 100%; 281 } 282 283 label.timepoint, 284 label.newevent { 285 display: block; 286 min-height: 100%; 287 } 288 289 /* Style the labels. */ 290 291 label.earlier, 292 label.later, 293 label.day, 294 label.timepoint, 295 label.newevent, 296 .dt.disabled label, 297 .dt.enabled label, 298 .date.disabled label, 299 .date.enabled label, 300 label.add, 301 label.remove, 302 label.removed, 303 label.hidebusy, 304 label.showdays, 305 label.reset { 306 cursor: pointer; 307 } 308 309 label.add, 310 label.remove, 311 label.removed { 312 float: right; 313 text-align: right; 314 } 315 316 label.add span.action, 317 label.remove span.action, 318 label.removed span.action { 319 font-size: smaller; 320 display: block; 321 } 322 323 p label.add, 324 p label.remove, 325 p label.removed { 326 float: none; 327 } 328 329 label.earlier, 330 label.later, 331 .dt.disabled label, 332 .dt.enabled label, 333 .date.disabled label, 334 .date.enabled label, 335 label.add, 336 label.remove, 337 label.removed, 338 label.hidebusy, 339 label.showdays, 340 label.reset { 341 color: #009; 342 text-decoration: underline; 343 } 344 345 .dt.disabled label, 346 .dt.enabled label, 347 .date.disabled label, 348 .date.enabled label { 349 display: inline-block; 350 } 351 352 .dt.enabled label, 353 .date.enabled label { 354 margin-top: 0.25em; 355 } 356 357 label.earlier, 358 label.later, 359 label.hidebusy, 360 label.showdays, 361 label.reset { 362 padding-left: 0.25em; 363 } 364 365 label.earlier { 366 border-left: 1em solid #f85; 367 } 368 369 label.later { 370 border-left: 1em solid #f85; 371 } 372 373 label.showdays { 374 border-left: 1em solid #faa; /* th.participantheading background-color */ 375 } 376 377 label.hidebusy { 378 border-left: 1em solid #af8; /* td.event background-color */ 379 } 380 381 label.reset { 382 border-left: 1em solid #5f4; 383 }