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