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