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 /* Selection of slots/periods for new events. */ 71 72 input.newevent.selector { 73 display: none; 74 } 75 76 th.container, 77 td.container { 78 padding: 0; /* for regions covered by labels */ 79 } 80 81 th.dayheading:hover, 82 th.dayheading:focus, 83 th.timeslot:hover, 84 th.timeslot:focus, 85 td.container:hover, 86 td.container:focus { 87 background-color: #af8; 88 } 89 90 label.day, 91 label.newevent.popup { 92 display: block; /* to make labels cover regions */ 93 padding: 0.25em; 94 } 95 96 label.newevent.popup { 97 visibility: hidden; 98 text-align: center; 99 } 100 101 td.container:hover label.newevent.popup, 102 td.container:focus label.newevent.popup { 103 visibility: visible; 104 } 105 106 input.newevent:checked ~ .timepoint { 107 background-color: #5f4; 108 text-decoration: underline; 109 } 110 111 /* Hiding/showing unused slots/periods. */ 112 113 input#hideslots { 114 display: none; 115 } 116 117 input#hideslots:checked ~ .controls label.enable[for=hideslots] { 118 display: none; 119 } 120 121 input#hideslots:not(:checked) ~ .controls label.disable[for=hideslots] { 122 display: none; 123 } 124 125 input#hideslots:checked ~ .calendar tr.slot.daystart.empty { 126 display: none; 127 } 128 129 /* Hiding/showing busy slots/periods. */ 130 131 input#hidebusy { 132 display: none; 133 } 134 135 input#hidebusy:checked ~ .controls label.enable[for=hidebusy] { 136 display: none; 137 } 138 139 input#hidebusy:not(:checked) ~ .controls label.disable[for=hidebusy] { 140 display: none; 141 } 142 143 input#hidebusy:checked ~ .calendar tr.slot.busy { 144 display: none; 145 } 146 147 input#hidebusy:checked ~ .calendar th.timeslot span.endpoint { 148 display: block; 149 } 150 151 label.enable, 152 label.disable { 153 padding-left: 0.25em; 154 } 155 156 label.hideslots { 157 border-left: 1em solid #faa; /* th.participantheading background-color */ 158 } 159 160 label.hidebusy { 161 border-left: 1em solid #af8; /* td.event background-color */ 162 }