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