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