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