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