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