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