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 busy slots/periods or unused days. */ 112 113 /* Hide the controls. */ 114 115 input#hidebusy, 116 input#showdays, 117 118 /* Hide the enable labels when controls are already enabled. */ 119 /* Hide the disable labels when controls are already disabled. */ 120 121 input#hidebusy:checked ~ .controls label.enable[for=hidebusy], 122 input#showdays:checked ~ .controls label.disable[for=showdays], 123 input#hidebusy:not(:checked) ~ .controls label.disable[for=hidebusy], 124 input#showdays:not(:checked) ~ .controls label.enable[for=showdays], 125 126 /* Hide calendar rows depending on the selected controls. */ 127 128 input#hidebusy:checked ~ .calendar tr.slot.busy, 129 input#showdays:not(:checked) ~ .calendar thead.separator.empty, 130 input#showdays:not(:checked) ~ .calendar tbody.points.empty { 131 display: none; 132 } 133 134 /* Show slot endpoints when hiding adjacent busy periods. */ 135 136 input#hidebusy:checked ~ .calendar th.timeslot span.endpoint { 137 display: block; 138 } 139 140 /* Style the labels. */ 141 142 label.enable, 143 label.disable { 144 padding-left: 0.25em; 145 } 146 147 label.showdays { 148 border-left: 1em solid #faa; /* th.participantheading background-color */ 149 } 150 151 label.hidebusy { 152 border-left: 1em solid #af8; /* td.event background-color */ 153 }