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#hidebusy, 248 input#showdays, 249 250 /* Hide the enable labels when controls are already enabled. */ 251 /* Hide the disable labels when controls are already disabled. */ 252 253 input#hidebusy:checked ~ .controls label.enable[for=hidebusy], 254 input#showdays:checked ~ .controls label.disable[for=showdays], 255 input#hidebusy:not(:checked) ~ .controls label.disable[for=hidebusy], 256 input#showdays:not(:checked) ~ .controls label.enable[for=showdays], 257 258 /* Hide calendar rows depending on the selected controls. */ 259 260 input#hidebusy:checked ~ div.calendar tr.slot.busy, 261 input#showdays:not(:checked) ~ div.calendar .calendar.empty, 262 263 /* Hiding/showing start/end times. */ 264 265 input#dttimes-enable, 266 input#dtend-enable, 267 input#dttimes-enable:not(:checked) ~ .object td.objectvalue .time.enabled, 268 input#dttimes-enable:checked ~ .object td.objectvalue .time.disabled, 269 input#dtend-enable:not(:checked) ~ .object td.objectvalue.dtend .dt.enabled, 270 input#dtend-enable:checked ~ .object td.objectvalue.dtend .dt.disabled, 271 272 /* Hiding/showing remove/uninvite labels. */ 273 274 input.add, 275 input.remove, 276 input.remove:checked ~ label.remove, 277 input.remove:not(:checked) ~ label.removed, 278 279 /* Hide the participation refresh control, selected using a label. */ 280 281 input.refresh, 282 283 /* Hide the reset control, selected using a label. */ 284 285 input#reset { 286 display: none; 287 } 288 289 /* Hiding/showing end datetimes and start/end times. */ 290 291 input#dtend-enable:not(:checked) ~ .object td.objectvalue.dtend .date.enabled, 292 input#dtend-enable:checked ~ .object td.objectvalue.dtend .date.disabled { 293 visibility: hidden; 294 } 295 296 /* Show slot endpoints when hiding adjacent busy periods. */ 297 298 input#hidebusy:checked ~ div.calendar th.timeslot span.endpoint { 299 display: block; 300 } 301 302 /* Make calendar labels occupy cells completely. 303 See: http://stackoverflow.com/questions/2841484/how-can-a-label-completely-fill-its-parent-td 304 */ 305 306 tr.slot { 307 height: 0; 308 } 309 310 th.timeslot, 311 td.empty { 312 height: 100%; 313 } 314 315 label.timepoint, 316 label.newevent { 317 display: block; 318 min-height: 100%; 319 } 320 321 /* Style the labels. */ 322 323 label.earlier, 324 label.later, 325 label.day, 326 label.timepoint, 327 label.newevent, 328 .dt.disabled label, 329 .dt.enabled label, 330 .date.disabled label, 331 .date.enabled label, 332 label.add, 333 label.remove, 334 label.removed, 335 label.hidebusy, 336 label.showdays, 337 label.reset { 338 cursor: pointer; 339 } 340 341 label.add, 342 label.remove, 343 label.removed { 344 float: right; 345 text-align: right; 346 } 347 348 label.add span.action, 349 label.remove span.action, 350 label.removed span.action { 351 font-size: smaller; 352 display: block; 353 } 354 355 p label.add, 356 p label.remove, 357 p label.removed { 358 float: none; 359 } 360 361 label.earlier, 362 label.later, 363 .dt.disabled label, 364 .dt.enabled label, 365 .date.disabled label, 366 .date.enabled label, 367 label.add, 368 label.remove, 369 label.removed, 370 label.hidebusy, 371 label.showdays, 372 label.reset { 373 color: #009; 374 text-decoration: underline; 375 } 376 377 .dt.disabled label, 378 .dt.enabled label, 379 .date.disabled label, 380 .date.enabled label { 381 display: inline-block; 382 } 383 384 .dt.enabled label, 385 .date.enabled label { 386 margin-top: 0.25em; 387 } 388 389 label.earlier, 390 label.later, 391 label.hidebusy, 392 label.showdays, 393 label.reset { 394 padding-left: 0.25em; 395 } 396 397 label.earlier { 398 border-left: 1em solid #f85; 399 } 400 401 label.later { 402 border-left: 1em solid #f85; 403 } 404 405 label.showdays { 406 border-left: 1em solid #faa; /* th.participantheading background-color */ 407 } 408 409 label.hidebusy { 410 border-left: 1em solid #af8; /* td.event background-color */ 411 } 412 413 label.reset { 414 border-left: 1em solid #5f4; 415 }