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