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