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