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