paul@923 | 1 | body { |
paul@881 | 2 | background-color: #fff; |
paul@881 | 3 | } |
paul@881 | 4 | |
paul@923 | 5 | #user-navigation { |
paul@923 | 6 | float: right; |
paul@923 | 7 | clear: right; |
paul@923 | 8 | } |
paul@923 | 9 | |
paul@923 | 10 | #user-navigation a { |
paul@923 | 11 | background-color: #7bf; |
paul@923 | 12 | color: #000; |
paul@923 | 13 | text-decoration: none; |
paul@923 | 14 | font-weight: bold; |
paul@923 | 15 | padding: 0.25em; |
paul@923 | 16 | border: 1px dotted #000; |
paul@923 | 17 | } |
paul@923 | 18 | |
paul@881 | 19 | #participants { |
paul@881 | 20 | float: right; |
paul@923 | 21 | clear: right; |
paul@881 | 22 | } |
paul@881 | 23 | |
paul@881 | 24 | #pending-requests { |
paul@881 | 25 | float: left; |
paul@923 | 26 | clear: left; |
paul@881 | 27 | } |
paul@881 | 28 | |
paul@881 | 29 | #calendar-controls, |
paul@881 | 30 | #time-navigation, |
paul@913 | 31 | .view-period, |
paul@881 | 32 | div.calendar { |
paul@881 | 33 | clear: both; |
paul@881 | 34 | } |
paul@881 | 35 | |
paul@212 | 36 | /* Table styling. */ |
paul@212 | 37 | |
paul@869 | 38 | table.calendar { |
paul@869 | 39 | min-width: 100%; |
paul@869 | 40 | table-layout: fixed; |
paul@869 | 41 | } |
paul@869 | 42 | |
paul@302 | 43 | table.conflicts, |
paul@766 | 44 | table.counters, |
paul@922 | 45 | table.profile, |
paul@427 | 46 | table.recurrence, |
paul@230 | 47 | table.object { |
paul@188 | 48 | border: 2px solid #000; |
paul@188 | 49 | } |
paul@188 | 50 | |
paul@188 | 51 | colgroup#columns-request { |
paul@188 | 52 | background-color: #eef; |
paul@188 | 53 | } |
paul@188 | 54 | |
paul@188 | 55 | colgroup#columns-freebusy { |
paul@188 | 56 | background-color: #fee; |
paul@188 | 57 | } |
paul@188 | 58 | |
paul@193 | 59 | th.requestheading { |
paul@193 | 60 | background-color: #aaf; |
paul@193 | 61 | } |
paul@193 | 62 | |
paul@193 | 63 | th.participantheading{ |
paul@193 | 64 | background-color: #faa; |
paul@193 | 65 | } |
paul@193 | 66 | |
paul@772 | 67 | caption.dayheading, |
paul@212 | 68 | th.mainheading { |
paul@188 | 69 | background-color: #f85; |
paul@772 | 70 | width: 100%; |
paul@188 | 71 | } |
paul@188 | 72 | |
paul@922 | 73 | table.profile th.mainheading { |
paul@922 | 74 | background-color: #7bf; |
paul@922 | 75 | } |
paul@922 | 76 | |
paul@212 | 77 | th.timeslot, |
paul@922 | 78 | th.profileheading, |
paul@212 | 79 | th.objectheading { |
paul@212 | 80 | white-space: nowrap; |
paul@212 | 81 | } |
paul@212 | 82 | |
paul@373 | 83 | th.objectheading { |
paul@373 | 84 | background-color: #fca; |
paul@373 | 85 | } |
paul@373 | 86 | |
paul@922 | 87 | th.profileheading { |
paul@922 | 88 | background-color: #bef; |
paul@922 | 89 | text-align: right; |
paul@922 | 90 | } |
paul@922 | 91 | |
paul@212 | 92 | th.timeslot { |
paul@188 | 93 | padding-top: 0; |
paul@325 | 94 | vertical-align: top; |
paul@869 | 95 | width: 10em; |
paul@188 | 96 | } |
paul@188 | 97 | |
paul@241 | 98 | th.timeslot span.endpoint { |
paul@241 | 99 | display: none; |
paul@241 | 100 | font-size: smaller; |
paul@882 | 101 | position: relative; |
paul@882 | 102 | bottom: 0.25em; |
paul@241 | 103 | } |
paul@241 | 104 | |
paul@188 | 105 | td.event { |
paul@275 | 106 | background-color: #ff8; |
paul@275 | 107 | border: 2px solid #000; |
paul@904 | 108 | } |
paul@904 | 109 | |
paul@904 | 110 | td.empty:not(.padding), |
paul@904 | 111 | td.event { |
paul@772 | 112 | width: 10em; |
paul@275 | 113 | } |
paul@275 | 114 | |
paul@904 | 115 | td.empty.padding { |
paul@869 | 116 | min-width: 10em; |
paul@869 | 117 | } |
paul@869 | 118 | |
paul@486 | 119 | td.event.only-organising { |
paul@486 | 120 | background-color: #afd; |
paul@486 | 121 | } |
paul@486 | 122 | |
paul@275 | 123 | td.event.organising { |
paul@188 | 124 | background-color: #af8; |
paul@188 | 125 | } |
paul@189 | 126 | |
paul@195 | 127 | td.event.continued { |
paul@195 | 128 | border-top: 2px dotted #000; |
paul@195 | 129 | } |
paul@195 | 130 | |
paul@195 | 131 | td.event.continues { |
paul@195 | 132 | border-bottom: 2px dotted #000; |
paul@195 | 133 | } |
paul@195 | 134 | |
paul@189 | 135 | td.event:target { |
paul@328 | 136 | border-width: 4px; |
paul@328 | 137 | background-color: #ee2; |
paul@328 | 138 | } |
paul@328 | 139 | |
paul@328 | 140 | td.event.organising:target { |
paul@189 | 141 | background-color: #5f4; |
paul@189 | 142 | } |
paul@190 | 143 | |
paul@190 | 144 | td.event a { |
paul@190 | 145 | color: #009; |
paul@190 | 146 | } |
paul@196 | 147 | |
paul@922 | 148 | th.profileheading.error, |
paul@415 | 149 | th.objectheading.error { |
paul@415 | 150 | background-color: #f77; |
paul@299 | 151 | } |
paul@299 | 152 | |
paul@315 | 153 | .partstat { |
paul@920 | 154 | float: right; |
paul@315 | 155 | margin-left: 1em; |
paul@324 | 156 | background-color: #eee; |
paul@324 | 157 | } |
paul@324 | 158 | |
paul@324 | 159 | .partstat, |
paul@324 | 160 | .partstat option { |
paul@315 | 161 | padding: 0.25em; |
paul@315 | 162 | } |
paul@315 | 163 | |
paul@324 | 164 | select.partstat { |
paul@324 | 165 | background-color: #ccc; |
paul@324 | 166 | padding: 0; |
paul@324 | 167 | font-family: inherit; |
paul@324 | 168 | font-size: inherit; |
paul@315 | 169 | } |
paul@315 | 170 | |
paul@383 | 171 | .affected { |
paul@383 | 172 | font-weight: bold; |
paul@383 | 173 | } |
paul@383 | 174 | |
paul@500 | 175 | table.recurrence .replaced, |
paul@856 | 176 | table.conflicts .replaced, |
paul@856 | 177 | table.counters .replaced { |
paul@357 | 178 | text-decoration: line-through; |
paul@357 | 179 | } |
paul@357 | 180 | |
paul@784 | 181 | .objectvalue.dtstart.excluded, |
paul@487 | 182 | .objectvalue.dtstart.replaced { |
paul@487 | 183 | vertical-align: top; |
paul@487 | 184 | } |
paul@487 | 185 | |
paul@777 | 186 | table.counters tr.selected { |
paul@806 | 187 | background-color: #af8; |
paul@777 | 188 | } |
paul@777 | 189 | |
paul@850 | 190 | table.counters td, |
paul@850 | 191 | table.counters th { |
paul@850 | 192 | vertical-align: top; |
paul@850 | 193 | } |
paul@850 | 194 | |
paul@513 | 195 | /* New event controls. */ |
paul@513 | 196 | |
paul@513 | 197 | .newevent-with-periods { |
paul@513 | 198 | display: none; |
paul@513 | 199 | } |
paul@513 | 200 | |
paul@203 | 201 | /* Selection of slots/periods for new events. */ |
paul@203 | 202 | |
paul@249 | 203 | input.newevent.selector { |
paul@196 | 204 | display: none; |
paul@196 | 205 | } |
paul@196 | 206 | |
paul@773 | 207 | input.newevent.selector:checked ~ p.newevent-with-periods { |
paul@773 | 208 | display: block; |
paul@767 | 209 | } |
paul@767 | 210 | |
paul@243 | 211 | th.container, |
paul@236 | 212 | td.container { |
paul@243 | 213 | padding: 0; /* for regions covered by labels */ |
paul@236 | 214 | } |
paul@236 | 215 | |
paul@772 | 216 | caption.dayheading:hover, |
paul@772 | 217 | caption.dayheading:focus, |
paul@236 | 218 | th.timeslot:hover, |
paul@236 | 219 | th.timeslot:focus, |
paul@236 | 220 | td.container:hover, |
paul@236 | 221 | td.container:focus { |
paul@236 | 222 | background-color: #af8; |
paul@196 | 223 | } |
paul@196 | 224 | |
paul@243 | 225 | label.day, |
paul@243 | 226 | label.newevent.popup { |
paul@243 | 227 | display: block; /* to make labels cover regions */ |
paul@243 | 228 | padding: 0.25em; |
paul@243 | 229 | } |
paul@243 | 230 | |
paul@236 | 231 | label.newevent.popup { |
paul@236 | 232 | visibility: hidden; |
paul@236 | 233 | text-align: center; |
paul@196 | 234 | } |
paul@196 | 235 | |
paul@236 | 236 | td.container:hover label.newevent.popup, |
paul@236 | 237 | td.container:focus label.newevent.popup { |
paul@236 | 238 | visibility: visible; |
paul@196 | 239 | } |
paul@196 | 240 | |
paul@280 | 241 | /* Hiding/showing busy slots/periods or unused days. */ |
paul@279 | 242 | |
paul@279 | 243 | /* Hide the controls. */ |
paul@203 | 244 | |
paul@876 | 245 | input#earlier, |
paul@876 | 246 | input#later, |
paul@926 | 247 | input#earlier-events, |
paul@926 | 248 | input#later-events, |
paul@279 | 249 | input#hidebusy, |
paul@281 | 250 | input#showdays, |
paul@279 | 251 | |
paul@279 | 252 | /* Hide the enable labels when controls are already enabled. */ |
paul@288 | 253 | /* Hide the disable labels when controls are already disabled. */ |
paul@203 | 254 | |
paul@279 | 255 | input#hidebusy:checked ~ .controls label.enable[for=hidebusy], |
paul@288 | 256 | input#showdays:checked ~ .controls label.disable[for=showdays], |
paul@279 | 257 | input#hidebusy:not(:checked) ~ .controls label.disable[for=hidebusy], |
paul@288 | 258 | input#showdays:not(:checked) ~ .controls label.enable[for=showdays], |
paul@203 | 259 | |
paul@279 | 260 | /* Hide calendar rows depending on the selected controls. */ |
paul@279 | 261 | |
paul@773 | 262 | input#hidebusy:checked ~ div.calendar tr.slot.busy, |
paul@773 | 263 | input#showdays:not(:checked) ~ div.calendar .calendar.empty, |
paul@241 | 264 | |
paul@886 | 265 | /* Hiding/showing start/end times. */ |
paul@290 | 266 | |
paul@300 | 267 | input#dttimes-enable, |
paul@290 | 268 | input#dtend-enable, |
paul@427 | 269 | input#dttimes-enable:not(:checked) ~ .object td.objectvalue .time.enabled, |
paul@300 | 270 | input#dttimes-enable:checked ~ .object td.objectvalue .time.disabled, |
paul@427 | 271 | input#dtend-enable:not(:checked) ~ .object td.objectvalue.dtend .dt.enabled, |
paul@308 | 272 | input#dtend-enable:checked ~ .object td.objectvalue.dtend .dt.disabled, |
paul@308 | 273 | |
paul@308 | 274 | /* Hiding/showing remove/uninvite labels. */ |
paul@308 | 275 | |
paul@315 | 276 | input.add, |
paul@308 | 277 | input.remove, |
paul@308 | 278 | input.remove:checked ~ label.remove, |
paul@396 | 279 | input.remove:not(:checked) ~ label.removed, |
paul@396 | 280 | |
paul@473 | 281 | /* Hide the participation refresh control, selected using a label. */ |
paul@473 | 282 | |
paul@473 | 283 | input.refresh, |
paul@473 | 284 | |
paul@396 | 285 | /* Hide the reset control, selected using a label. */ |
paul@396 | 286 | |
paul@396 | 287 | input#reset { |
paul@290 | 288 | display: none; |
paul@290 | 289 | } |
paul@290 | 290 | |
paul@886 | 291 | /* Hiding/showing end datetimes and start/end times. */ |
paul@886 | 292 | |
paul@886 | 293 | input#dtend-enable:not(:checked) ~ .object td.objectvalue.dtend .date.enabled, |
paul@886 | 294 | input#dtend-enable:checked ~ .object td.objectvalue.dtend .date.disabled { |
paul@886 | 295 | visibility: hidden; |
paul@886 | 296 | } |
paul@886 | 297 | |
paul@308 | 298 | /* Show slot endpoints when hiding adjacent busy periods. */ |
paul@308 | 299 | |
paul@773 | 300 | input#hidebusy:checked ~ div.calendar th.timeslot span.endpoint { |
paul@308 | 301 | display: block; |
paul@308 | 302 | } |
paul@308 | 303 | |
paul@1000 | 304 | /* Separate the ignore control. */ |
paul@1000 | 305 | |
paul@1000 | 306 | input.ignore { |
paul@1000 | 307 | margin-left: 2em; |
paul@1000 | 308 | } |
paul@1000 | 309 | |
paul@775 | 310 | /* Make calendar labels occupy cells completely. |
paul@775 | 311 | See: http://stackoverflow.com/questions/2841484/how-can-a-label-completely-fill-its-parent-td |
paul@775 | 312 | */ |
paul@775 | 313 | |
paul@775 | 314 | tr.slot { |
paul@775 | 315 | height: 0; |
paul@775 | 316 | } |
paul@775 | 317 | |
paul@775 | 318 | th.timeslot, |
paul@775 | 319 | td.empty { |
paul@775 | 320 | height: 100%; |
paul@775 | 321 | } |
paul@775 | 322 | |
paul@775 | 323 | label.timepoint, |
paul@775 | 324 | label.newevent { |
paul@775 | 325 | display: block; |
paul@775 | 326 | min-height: 100%; |
paul@775 | 327 | } |
paul@775 | 328 | |
paul@279 | 329 | /* Style the labels. */ |
paul@279 | 330 | |
paul@876 | 331 | label.earlier, |
paul@876 | 332 | label.later, |
paul@930 | 333 | label.earlier-events, |
paul@930 | 334 | label.later-events, |
paul@471 | 335 | label.day, |
paul@471 | 336 | label.timepoint, |
paul@471 | 337 | label.newevent, |
paul@471 | 338 | .dt.disabled label, |
paul@471 | 339 | .dt.enabled label, |
paul@886 | 340 | .date.disabled label, |
paul@886 | 341 | .date.enabled label, |
paul@471 | 342 | label.add, |
paul@471 | 343 | label.remove, |
paul@471 | 344 | label.removed, |
paul@471 | 345 | label.hidebusy, |
paul@471 | 346 | label.showdays, |
paul@471 | 347 | label.reset { |
paul@471 | 348 | cursor: pointer; |
paul@471 | 349 | } |
paul@471 | 350 | |
paul@315 | 351 | label.add, |
paul@308 | 352 | label.remove, |
paul@308 | 353 | label.removed { |
paul@308 | 354 | float: right; |
paul@701 | 355 | text-align: right; |
paul@701 | 356 | } |
paul@701 | 357 | |
paul@701 | 358 | label.add span.action, |
paul@701 | 359 | label.remove span.action, |
paul@701 | 360 | label.removed span.action { |
paul@701 | 361 | font-size: smaller; |
paul@701 | 362 | display: block; |
paul@308 | 363 | } |
paul@308 | 364 | |
paul@500 | 365 | p label.add, |
paul@500 | 366 | p label.remove, |
paul@500 | 367 | p label.removed { |
paul@500 | 368 | float: none; |
paul@500 | 369 | } |
paul@500 | 370 | |
paul@876 | 371 | label.earlier, |
paul@876 | 372 | label.later, |
paul@930 | 373 | label.earlier-events, |
paul@930 | 374 | label.later-events, |
paul@300 | 375 | .dt.disabled label, |
paul@300 | 376 | .dt.enabled label, |
paul@886 | 377 | .date.disabled label, |
paul@886 | 378 | .date.enabled label, |
paul@315 | 379 | label.add, |
paul@308 | 380 | label.remove, |
paul@308 | 381 | label.removed, |
paul@300 | 382 | label.hidebusy, |
paul@396 | 383 | label.showdays, |
paul@396 | 384 | label.reset { |
paul@300 | 385 | color: #009; |
paul@300 | 386 | text-decoration: underline; |
paul@300 | 387 | } |
paul@300 | 388 | |
paul@412 | 389 | .dt.disabled label, |
paul@886 | 390 | .dt.enabled label, |
paul@886 | 391 | .date.disabled label, |
paul@886 | 392 | .date.enabled label { |
paul@402 | 393 | display: inline-block; |
paul@412 | 394 | } |
paul@412 | 395 | |
paul@886 | 396 | .dt.enabled label, |
paul@886 | 397 | .date.enabled label { |
paul@290 | 398 | margin-top: 0.25em; |
paul@290 | 399 | } |
paul@290 | 400 | |
paul@876 | 401 | label.earlier, |
paul@876 | 402 | label.later, |
paul@930 | 403 | label.earlier-events, |
paul@930 | 404 | label.later-events, |
paul@300 | 405 | label.hidebusy, |
paul@396 | 406 | label.showdays, |
paul@396 | 407 | label.reset { |
paul@230 | 408 | padding-left: 0.25em; |
paul@203 | 409 | } |
paul@237 | 410 | |
paul@876 | 411 | label.earlier { |
paul@876 | 412 | border-left: 1em solid #f85; |
paul@876 | 413 | } |
paul@876 | 414 | |
paul@876 | 415 | label.later { |
paul@876 | 416 | border-left: 1em solid #f85; |
paul@876 | 417 | } |
paul@876 | 418 | |
paul@930 | 419 | label.earlier-events { |
paul@930 | 420 | border-left: 1em solid #d52; |
paul@930 | 421 | } |
paul@930 | 422 | |
paul@930 | 423 | label.later-events { |
paul@930 | 424 | border-left: 1em solid #d52; |
paul@930 | 425 | } |
paul@930 | 426 | |
paul@281 | 427 | label.showdays { |
paul@237 | 428 | border-left: 1em solid #faa; /* th.participantheading background-color */ |
paul@237 | 429 | } |
paul@237 | 430 | |
paul@237 | 431 | label.hidebusy { |
paul@237 | 432 | border-left: 1em solid #af8; /* td.event background-color */ |
paul@237 | 433 | } |
paul@396 | 434 | |
paul@396 | 435 | label.reset { |
paul@806 | 436 | border-left: 1em solid #5f4; |
paul@396 | 437 | } |