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