paul@212 | 1 | /* Table styling. */ |
paul@212 | 2 | |
paul@230 | 3 | table.calendar, |
paul@302 | 4 | table.conflicts, |
paul@230 | 5 | table.object { |
paul@188 | 6 | border: 2px solid #000; |
paul@188 | 7 | } |
paul@188 | 8 | |
paul@188 | 9 | colgroup#columns-request { |
paul@188 | 10 | background-color: #eef; |
paul@188 | 11 | } |
paul@188 | 12 | |
paul@188 | 13 | colgroup#columns-freebusy { |
paul@188 | 14 | background-color: #fee; |
paul@188 | 15 | } |
paul@188 | 16 | |
paul@193 | 17 | th.requestheading { |
paul@193 | 18 | background-color: #aaf; |
paul@193 | 19 | } |
paul@193 | 20 | |
paul@193 | 21 | th.participantheading{ |
paul@193 | 22 | background-color: #faa; |
paul@193 | 23 | } |
paul@193 | 24 | |
paul@212 | 25 | th.dayheading, |
paul@212 | 26 | th.mainheading { |
paul@188 | 27 | background-color: #f85; |
paul@188 | 28 | } |
paul@188 | 29 | |
paul@212 | 30 | th.timeslot, |
paul@212 | 31 | th.objectheading { |
paul@188 | 32 | vertical-align: top; |
paul@212 | 33 | white-space: nowrap; |
paul@212 | 34 | } |
paul@212 | 35 | |
paul@212 | 36 | th.timeslot { |
paul@188 | 37 | padding-top: 0; |
paul@188 | 38 | } |
paul@188 | 39 | |
paul@241 | 40 | th.timeslot span.endpoint { |
paul@241 | 41 | display: none; |
paul@241 | 42 | font-size: smaller; |
paul@241 | 43 | } |
paul@241 | 44 | |
paul@188 | 45 | td.event { |
paul@275 | 46 | background-color: #ff8; |
paul@275 | 47 | border: 2px solid #000; |
paul@275 | 48 | } |
paul@275 | 49 | |
paul@275 | 50 | td.event.organising { |
paul@188 | 51 | background-color: #af8; |
paul@188 | 52 | } |
paul@189 | 53 | |
paul@195 | 54 | td.event.continued { |
paul@195 | 55 | border-top: 2px dotted #000; |
paul@195 | 56 | } |
paul@195 | 57 | |
paul@195 | 58 | td.event.continues { |
paul@195 | 59 | border-bottom: 2px dotted #000; |
paul@195 | 60 | } |
paul@195 | 61 | |
paul@189 | 62 | td.event:target { |
paul@189 | 63 | background-color: #5f4; |
paul@195 | 64 | border-width: 4px; |
paul@189 | 65 | } |
paul@190 | 66 | |
paul@190 | 67 | td.event a { |
paul@190 | 68 | color: #009; |
paul@190 | 69 | } |
paul@196 | 70 | |
paul@299 | 71 | .error { |
paul@299 | 72 | background-color: #faa; |
paul@299 | 73 | } |
paul@299 | 74 | |
paul@315 | 75 | .partstat { |
paul@315 | 76 | margin-left: 1em; |
paul@324 | 77 | background-color: #eee; |
paul@324 | 78 | } |
paul@324 | 79 | |
paul@324 | 80 | .partstat, |
paul@324 | 81 | .partstat option { |
paul@315 | 82 | padding: 0.25em; |
paul@315 | 83 | } |
paul@315 | 84 | |
paul@324 | 85 | select.partstat { |
paul@324 | 86 | background-color: #ccc; |
paul@324 | 87 | padding: 0; |
paul@324 | 88 | font-family: inherit; |
paul@324 | 89 | font-size: inherit; |
paul@315 | 90 | } |
paul@315 | 91 | |
paul@203 | 92 | /* Selection of slots/periods for new events. */ |
paul@203 | 93 | |
paul@249 | 94 | input.newevent.selector { |
paul@196 | 95 | display: none; |
paul@196 | 96 | } |
paul@196 | 97 | |
paul@243 | 98 | th.container, |
paul@236 | 99 | td.container { |
paul@243 | 100 | padding: 0; /* for regions covered by labels */ |
paul@236 | 101 | } |
paul@236 | 102 | |
paul@242 | 103 | th.dayheading:hover, |
paul@242 | 104 | th.dayheading:focus, |
paul@236 | 105 | th.timeslot:hover, |
paul@236 | 106 | th.timeslot:focus, |
paul@236 | 107 | td.container:hover, |
paul@236 | 108 | td.container:focus { |
paul@236 | 109 | background-color: #af8; |
paul@196 | 110 | } |
paul@196 | 111 | |
paul@243 | 112 | label.day, |
paul@243 | 113 | label.newevent.popup { |
paul@243 | 114 | display: block; /* to make labels cover regions */ |
paul@243 | 115 | padding: 0.25em; |
paul@243 | 116 | } |
paul@243 | 117 | |
paul@236 | 118 | label.newevent.popup { |
paul@236 | 119 | visibility: hidden; |
paul@236 | 120 | text-align: center; |
paul@196 | 121 | } |
paul@196 | 122 | |
paul@236 | 123 | td.container:hover label.newevent.popup, |
paul@236 | 124 | td.container:focus label.newevent.popup { |
paul@236 | 125 | visibility: visible; |
paul@196 | 126 | } |
paul@196 | 127 | |
paul@196 | 128 | input.newevent:checked ~ .timepoint { |
paul@243 | 129 | background-color: #5f4; |
paul@196 | 130 | text-decoration: underline; |
paul@196 | 131 | } |
paul@203 | 132 | |
paul@280 | 133 | /* Hiding/showing busy slots/periods or unused days. */ |
paul@279 | 134 | |
paul@279 | 135 | /* Hide the controls. */ |
paul@203 | 136 | |
paul@279 | 137 | input#hidebusy, |
paul@281 | 138 | input#showdays, |
paul@279 | 139 | |
paul@279 | 140 | /* Hide the enable labels when controls are already enabled. */ |
paul@288 | 141 | /* Hide the disable labels when controls are already disabled. */ |
paul@203 | 142 | |
paul@279 | 143 | input#hidebusy:checked ~ .controls label.enable[for=hidebusy], |
paul@288 | 144 | input#showdays:checked ~ .controls label.disable[for=showdays], |
paul@279 | 145 | input#hidebusy:not(:checked) ~ .controls label.disable[for=hidebusy], |
paul@288 | 146 | input#showdays:not(:checked) ~ .controls label.enable[for=showdays], |
paul@203 | 147 | |
paul@279 | 148 | /* Hide calendar rows depending on the selected controls. */ |
paul@279 | 149 | |
paul@279 | 150 | input#hidebusy:checked ~ .calendar tr.slot.busy, |
paul@282 | 151 | input#showdays:not(:checked) ~ .calendar thead.separator.empty, |
paul@308 | 152 | input#showdays:not(:checked) ~ .calendar tbody.points.empty, |
paul@241 | 153 | |
paul@300 | 154 | /* Hiding/showing end datetimes and start/end times. */ |
paul@290 | 155 | |
paul@300 | 156 | input#dttimes-disable, |
paul@300 | 157 | input#dttimes-enable, |
paul@290 | 158 | input#dtend-disable, |
paul@290 | 159 | input#dtend-enable, |
paul@300 | 160 | input#dttimes-disable:checked ~ .object td.objectvalue .time.enabled, |
paul@300 | 161 | input#dttimes-enable:checked ~ .object td.objectvalue .time.disabled, |
paul@300 | 162 | input#dtend-disable:checked ~ .object td.objectvalue.dtend .dt.enabled, |
paul@308 | 163 | input#dtend-enable:checked ~ .object td.objectvalue.dtend .dt.disabled, |
paul@308 | 164 | |
paul@308 | 165 | /* Hiding/showing remove/uninvite labels. */ |
paul@308 | 166 | |
paul@315 | 167 | input.add, |
paul@308 | 168 | input.remove, |
paul@308 | 169 | input.remove:checked ~ label.remove, |
paul@308 | 170 | input.remove:not(:checked) ~ label.removed { |
paul@290 | 171 | display: none; |
paul@290 | 172 | } |
paul@290 | 173 | |
paul@308 | 174 | /* Show slot endpoints when hiding adjacent busy periods. */ |
paul@308 | 175 | |
paul@308 | 176 | input#hidebusy:checked ~ .calendar th.timeslot span.endpoint { |
paul@308 | 177 | display: block; |
paul@308 | 178 | } |
paul@308 | 179 | |
paul@279 | 180 | /* Style the labels. */ |
paul@279 | 181 | |
paul@315 | 182 | label.add, |
paul@308 | 183 | label.remove, |
paul@308 | 184 | label.removed { |
paul@308 | 185 | float: right; |
paul@308 | 186 | } |
paul@308 | 187 | |
paul@300 | 188 | .dt.disabled label, |
paul@300 | 189 | .dt.enabled label, |
paul@315 | 190 | label.add, |
paul@308 | 191 | label.remove, |
paul@308 | 192 | label.removed, |
paul@300 | 193 | label.hidebusy, |
paul@300 | 194 | label.showdays { |
paul@300 | 195 | color: #009; |
paul@300 | 196 | text-decoration: underline; |
paul@300 | 197 | } |
paul@300 | 198 | |
paul@300 | 199 | .dt.enabled label { |
paul@290 | 200 | display: block; |
paul@290 | 201 | margin-top: 0.25em; |
paul@290 | 202 | } |
paul@290 | 203 | |
paul@300 | 204 | label.hidebusy, |
paul@300 | 205 | label.showdays { |
paul@230 | 206 | padding-left: 0.25em; |
paul@203 | 207 | } |
paul@237 | 208 | |
paul@281 | 209 | label.showdays { |
paul@237 | 210 | border-left: 1em solid #faa; /* th.participantheading background-color */ |
paul@237 | 211 | } |
paul@237 | 212 | |
paul@237 | 213 | label.hidebusy { |
paul@237 | 214 | border-left: 1em solid #af8; /* td.event background-color */ |
paul@237 | 215 | } |