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 /* Make calendar labels occupy cells completely. 305 See: http://stackoverflow.com/questions/2841484/how-can-a-label-completely-fill-its-parent-td 306 */ 307 308 tr.slot { 309 height: 0; 310 } 311 312 th.timeslot, 313 td.empty { 314 height: 100%; 315 } 316 317 label.timepoint, 318 label.newevent { 319 display: block; 320 min-height: 100%; 321 } 322 323 /* Style the labels. */ 324 325 label.earlier, 326 label.later, 327 label.day, 328 label.timepoint, 329 label.newevent, 330 .dt.disabled label, 331 .dt.enabled label, 332 .date.disabled label, 333 .date.enabled label, 334 label.add, 335 label.remove, 336 label.removed, 337 label.hidebusy, 338 label.showdays, 339 label.reset { 340 cursor: pointer; 341 } 342 343 label.add, 344 label.remove, 345 label.removed { 346 float: right; 347 text-align: right; 348 } 349 350 label.add span.action, 351 label.remove span.action, 352 label.removed span.action { 353 font-size: smaller; 354 display: block; 355 } 356 357 p label.add, 358 p label.remove, 359 p label.removed { 360 float: none; 361 } 362 363 label.earlier, 364 label.later, 365 .dt.disabled label, 366 .dt.enabled label, 367 .date.disabled label, 368 .date.enabled label, 369 label.add, 370 label.remove, 371 label.removed, 372 label.hidebusy, 373 label.showdays, 374 label.reset { 375 color: #009; 376 text-decoration: underline; 377 } 378 379 .dt.disabled label, 380 .dt.enabled label, 381 .date.disabled label, 382 .date.enabled label { 383 display: inline-block; 384 } 385 386 .dt.enabled label, 387 .date.enabled label { 388 margin-top: 0.25em; 389 } 390 391 label.earlier, 392 label.later, 393 label.hidebusy, 394 label.showdays, 395 label.reset { 396 padding-left: 0.25em; 397 } 398 399 label.earlier { 400 border-left: 1em solid #f85; 401 } 402 403 label.later { 404 border-left: 1em solid #f85; 405 } 406 407 label.showdays { 408 border-left: 1em solid #faa; /* th.participantheading background-color */ 409 } 410 411 label.hidebusy { 412 border-left: 1em solid #af8; /* td.event background-color */ 413 } 414 415 label.reset { 416 border-left: 1em solid #5f4; 417 }