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