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