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