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 281 /* Hide the participation refresh control, selected using a label. */ 282 283 input.refresh, 284 285 /* Hide the reset control, selected using a label. */ 286 287 input#reset { 288 display: none; 289 } 290 291 /* Hiding/showing end datetimes and start/end times. */ 292 293 input#dtend-enable:not(:checked) ~ .object td.objectvalue.dtend .date.enabled, 294 input#dtend-enable:checked ~ .object td.objectvalue.dtend .date.disabled { 295 visibility: hidden; 296 } 297 298 /* Show slot endpoints when hiding adjacent busy periods. */ 299 300 input#hidebusy:checked ~ div.calendar th.timeslot span.endpoint { 301 display: block; 302 } 303 304 /* Separate the ignore control. */ 305 306 input.ignore { 307 margin-left: 2em; 308 } 309 310 /* Make calendar labels occupy cells completely. 311 See: http://stackoverflow.com/questions/2841484/how-can-a-label-completely-fill-its-parent-td 312 */ 313 314 tr.slot { 315 height: 0; 316 } 317 318 th.timeslot, 319 td.empty { 320 height: 100%; 321 } 322 323 label.timepoint, 324 label.newevent { 325 display: block; 326 min-height: 100%; 327 } 328 329 /* Style the labels. */ 330 331 label.earlier, 332 label.later, 333 label.earlier-events, 334 label.later-events, 335 label.day, 336 label.timepoint, 337 label.newevent, 338 .dt.disabled label, 339 .dt.enabled label, 340 .date.disabled label, 341 .date.enabled label, 342 label.add, 343 label.remove, 344 label.removed, 345 label.hidebusy, 346 label.showdays, 347 label.reset { 348 cursor: pointer; 349 } 350 351 label.add, 352 label.remove, 353 label.removed { 354 float: right; 355 text-align: right; 356 } 357 358 label.add span.action, 359 label.remove span.action, 360 label.removed span.action { 361 font-size: smaller; 362 display: block; 363 } 364 365 p label.add, 366 p label.remove, 367 p label.removed { 368 float: none; 369 } 370 371 label.earlier, 372 label.later, 373 label.earlier-events, 374 label.later-events, 375 .dt.disabled label, 376 .dt.enabled label, 377 .date.disabled label, 378 .date.enabled label, 379 label.add, 380 label.remove, 381 label.removed, 382 label.hidebusy, 383 label.showdays, 384 label.reset { 385 color: #009; 386 text-decoration: underline; 387 } 388 389 .dt.disabled label, 390 .dt.enabled label, 391 .date.disabled label, 392 .date.enabled label { 393 display: inline-block; 394 } 395 396 .dt.enabled label, 397 .date.enabled label { 398 margin-top: 0.25em; 399 } 400 401 label.earlier, 402 label.later, 403 label.earlier-events, 404 label.later-events, 405 label.hidebusy, 406 label.showdays, 407 label.reset { 408 padding-left: 0.25em; 409 } 410 411 label.earlier { 412 border-left: 1em solid #f85; 413 } 414 415 label.later { 416 border-left: 1em solid #f85; 417 } 418 419 label.earlier-events { 420 border-left: 1em solid #d52; 421 } 422 423 label.later-events { 424 border-left: 1em solid #d52; 425 } 426 427 label.showdays { 428 border-left: 1em solid #faa; /* th.participantheading background-color */ 429 } 430 431 label.hidebusy { 432 border-left: 1em solid #af8; /* td.event background-color */ 433 } 434 435 label.reset { 436 border-left: 1em solid #5f4; 437 }