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 float: right; 129 margin-left: 1em; 130 background-color: #eee; 131 } 132 133 .partstat, 134 .partstat option { 135 padding: 0.25em; 136 } 137 138 select.partstat { 139 background-color: #ccc; 140 padding: 0; 141 font-family: inherit; 142 font-size: inherit; 143 } 144 145 .affected { 146 font-weight: bold; 147 } 148 149 table.recurrence .replaced, 150 table.conflicts .replaced, 151 table.counters .replaced { 152 text-decoration: line-through; 153 } 154 155 .objectvalue.dtstart.excluded, 156 .objectvalue.dtstart.replaced { 157 vertical-align: top; 158 } 159 160 table.counters tr.selected { 161 background-color: #af8; 162 } 163 164 table.counters td, 165 table.counters th { 166 vertical-align: top; 167 } 168 169 /* New event controls. */ 170 171 .newevent-with-periods { 172 display: none; 173 } 174 175 /* Selection of slots/periods for new events. */ 176 177 input.newevent.selector { 178 display: none; 179 } 180 181 input.newevent.selector:checked ~ p.newevent-with-periods { 182 display: block; 183 } 184 185 th.container, 186 td.container { 187 padding: 0; /* for regions covered by labels */ 188 } 189 190 caption.dayheading:hover, 191 caption.dayheading:focus, 192 th.timeslot:hover, 193 th.timeslot:focus, 194 td.container:hover, 195 td.container:focus { 196 background-color: #af8; 197 } 198 199 label.day, 200 label.newevent.popup { 201 display: block; /* to make labels cover regions */ 202 padding: 0.25em; 203 } 204 205 label.newevent.popup { 206 visibility: hidden; 207 text-align: center; 208 } 209 210 td.container:hover label.newevent.popup, 211 td.container:focus label.newevent.popup { 212 visibility: visible; 213 } 214 215 /* Hiding/showing busy slots/periods or unused days. */ 216 217 /* Hide the controls. */ 218 219 input#earlier, 220 input#later, 221 input#hidebusy, 222 input#showdays, 223 224 /* Hide the enable labels when controls are already enabled. */ 225 /* Hide the disable labels when controls are already disabled. */ 226 227 input#hidebusy:checked ~ .controls label.enable[for=hidebusy], 228 input#showdays:checked ~ .controls label.disable[for=showdays], 229 input#hidebusy:not(:checked) ~ .controls label.disable[for=hidebusy], 230 input#showdays:not(:checked) ~ .controls label.enable[for=showdays], 231 232 /* Hide calendar rows depending on the selected controls. */ 233 234 input#hidebusy:checked ~ div.calendar tr.slot.busy, 235 input#showdays:not(:checked) ~ div.calendar .calendar.empty, 236 237 /* Hiding/showing start/end times. */ 238 239 input#dttimes-enable, 240 input#dtend-enable, 241 input#dttimes-enable:not(:checked) ~ .object td.objectvalue .time.enabled, 242 input#dttimes-enable:checked ~ .object td.objectvalue .time.disabled, 243 input#dtend-enable:not(:checked) ~ .object td.objectvalue.dtend .dt.enabled, 244 input#dtend-enable:checked ~ .object td.objectvalue.dtend .dt.disabled, 245 246 /* Hiding/showing remove/uninvite labels. */ 247 248 input.add, 249 input.remove, 250 input.remove:checked ~ label.remove, 251 input.remove:not(:checked) ~ label.removed, 252 253 /* Hide the participation refresh control, selected using a label. */ 254 255 input.refresh, 256 257 /* Hide the reset control, selected using a label. */ 258 259 input#reset { 260 display: none; 261 } 262 263 /* Hiding/showing end datetimes and start/end times. */ 264 265 input#dtend-enable:not(:checked) ~ .object td.objectvalue.dtend .date.enabled, 266 input#dtend-enable:checked ~ .object td.objectvalue.dtend .date.disabled { 267 visibility: hidden; 268 } 269 270 /* Show slot endpoints when hiding adjacent busy periods. */ 271 272 input#hidebusy:checked ~ div.calendar th.timeslot span.endpoint { 273 display: block; 274 } 275 276 /* Make calendar labels occupy cells completely. 277 See: http://stackoverflow.com/questions/2841484/how-can-a-label-completely-fill-its-parent-td 278 */ 279 280 tr.slot { 281 height: 0; 282 } 283 284 th.timeslot, 285 td.empty { 286 height: 100%; 287 } 288 289 label.timepoint, 290 label.newevent { 291 display: block; 292 min-height: 100%; 293 } 294 295 /* Style the labels. */ 296 297 label.earlier, 298 label.later, 299 label.day, 300 label.timepoint, 301 label.newevent, 302 .dt.disabled label, 303 .dt.enabled label, 304 .date.disabled label, 305 .date.enabled label, 306 label.add, 307 label.remove, 308 label.removed, 309 label.hidebusy, 310 label.showdays, 311 label.reset { 312 cursor: pointer; 313 } 314 315 label.add, 316 label.remove, 317 label.removed { 318 float: right; 319 text-align: right; 320 } 321 322 label.add span.action, 323 label.remove span.action, 324 label.removed span.action { 325 font-size: smaller; 326 display: block; 327 } 328 329 p label.add, 330 p label.remove, 331 p label.removed { 332 float: none; 333 } 334 335 label.earlier, 336 label.later, 337 .dt.disabled label, 338 .dt.enabled label, 339 .date.disabled label, 340 .date.enabled label, 341 label.add, 342 label.remove, 343 label.removed, 344 label.hidebusy, 345 label.showdays, 346 label.reset { 347 color: #009; 348 text-decoration: underline; 349 } 350 351 .dt.disabled label, 352 .dt.enabled label, 353 .date.disabled label, 354 .date.enabled label { 355 display: inline-block; 356 } 357 358 .dt.enabled label, 359 .date.enabled label { 360 margin-top: 0.25em; 361 } 362 363 label.earlier, 364 label.later, 365 label.hidebusy, 366 label.showdays, 367 label.reset { 368 padding-left: 0.25em; 369 } 370 371 label.earlier { 372 border-left: 1em solid #f85; 373 } 374 375 label.later { 376 border-left: 1em solid #f85; 377 } 378 379 label.showdays { 380 border-left: 1em solid #faa; /* th.participantheading background-color */ 381 } 382 383 label.hidebusy { 384 border-left: 1em solid #af8; /* td.event background-color */ 385 } 386 387 label.reset { 388 border-left: 1em solid #5f4; 389 }