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