1.1 --- a/htdocs/styles.css Sun Sep 27 01:26:05 2015 +0200
1.2 +++ b/htdocs/styles.css Sun Sep 27 02:19:42 2015 +0200
1.3 @@ -1,6 +1,5 @@
1.4 /* Table styling. */
1.5
1.6 -table.calendar,
1.7 table.conflicts,
1.8 table.counters,
1.9 table.recurrence,
1.10 @@ -8,6 +7,34 @@
1.11 border: 2px solid #000;
1.12 }
1.13
1.14 +div.calendar {
1.15 + display: table;
1.16 +}
1.17 +
1.18 +div.dayheading {
1.19 + display: table-caption;
1.20 + text-align: center;
1.21 + width: 100%;
1.22 +}
1.23 +
1.24 +div.tablerow {
1.25 + display: table-row;
1.26 +}
1.27 +
1.28 +div.tableheading {
1.29 + display: table-header-group;
1.30 +}
1.31 +
1.32 +div.tablebody {
1.33 + display: table-row-group;
1.34 +}
1.35 +
1.36 +div.tablecell {
1.37 + display: table-cell;
1.38 + padding: 0.25em;
1.39 + width: 10em;
1.40 +}
1.41 +
1.42 colgroup#columns-request {
1.43 background-color: #eef;
1.44 }
1.45 @@ -16,73 +43,76 @@
1.46 background-color: #fee;
1.47 }
1.48
1.49 -th.requestheading {
1.50 +.requestheading {
1.51 background-color: #aaf;
1.52 }
1.53
1.54 -th.participantheading{
1.55 +.participantheading{
1.56 background-color: #faa;
1.57 }
1.58
1.59 -th.dayheading,
1.60 -th.mainheading {
1.61 +.dayheading,
1.62 +.mainheading {
1.63 background-color: #f85;
1.64 }
1.65
1.66 -th.timeslot,
1.67 -th.objectheading {
1.68 +.timeslot,
1.69 +.objectheading {
1.70 white-space: nowrap;
1.71 }
1.72
1.73 -th.objectheading {
1.74 +.objectheading {
1.75 background-color: #fca;
1.76 }
1.77
1.78 -th.timeslot {
1.79 +.timeslot {
1.80 padding-top: 0;
1.81 vertical-align: top;
1.82 }
1.83
1.84 -th.timeslot span.endpoint {
1.85 +.timeslot span.endpoint {
1.86 display: none;
1.87 font-size: smaller;
1.88 }
1.89
1.90 -td.event {
1.91 +.event {
1.92 background-color: #ff8;
1.93 - border: 2px solid #000;
1.94 + border-right: 2px solid #777;
1.95 }
1.96
1.97 -td.event.only-organising {
1.98 +.event.only-organising {
1.99 background-color: #afd;
1.100 }
1.101
1.102 -td.event.organising {
1.103 +.event.organising {
1.104 background-color: #af8;
1.105 }
1.106
1.107 -td.event.continued {
1.108 +.event.continued {
1.109 border-top: 2px dotted #000;
1.110 }
1.111
1.112 -td.event.continues {
1.113 +.event.continues {
1.114 border-bottom: 2px dotted #000;
1.115 }
1.116
1.117 -td.event:target {
1.118 - border-width: 4px;
1.119 +.event.ends {
1.120 + border-bottom: 2px solid #777;
1.121 +}
1.122 +
1.123 +.event:target {
1.124 background-color: #ee2;
1.125 }
1.126
1.127 -td.event.organising:target {
1.128 +.event.organising:target {
1.129 background-color: #5f4;
1.130 }
1.131
1.132 -td.event a {
1.133 +.event a {
1.134 color: #009;
1.135 }
1.136
1.137 -th.objectheading.error {
1.138 +.objectheading.error {
1.139 background-color: #f77;
1.140 }
1.141
1.142 @@ -136,17 +166,16 @@
1.143 display: inline;
1.144 }
1.145
1.146 -th.container,
1.147 -td.container {
1.148 +.container {
1.149 padding: 0; /* for regions covered by labels */
1.150 }
1.151
1.152 -th.dayheading:hover,
1.153 -th.dayheading:focus,
1.154 -th.timeslot:hover,
1.155 -th.timeslot:focus,
1.156 -td.container:hover,
1.157 -td.container:focus {
1.158 +.dayheading:hover,
1.159 +.dayheading:focus,
1.160 +.timeslot:hover,
1.161 +.timeslot:focus,
1.162 +.container:hover,
1.163 +.container:focus {
1.164 background-color: #af8;
1.165 }
1.166
1.167 @@ -161,8 +190,8 @@
1.168 text-align: center;
1.169 }
1.170
1.171 -td.container:hover label.newevent.popup,
1.172 -td.container:focus label.newevent.popup {
1.173 +.container:hover label.newevent.popup,
1.174 +.container:focus label.newevent.popup {
1.175 visibility: visible;
1.176 }
1.177
1.178 @@ -183,9 +212,10 @@
1.179
1.180 /* Hide calendar rows depending on the selected controls. */
1.181
1.182 -input#hidebusy:checked ~ .calendar tr.slot.busy,
1.183 -input#showdays:not(:checked) ~ .calendar thead.separator.empty,
1.184 -input#showdays:not(:checked) ~ .calendar tbody.points.empty,
1.185 +input#hidebusy:checked ~ .calendar div.slot.busy,
1.186 +input#showdays:not(:checked) ~ .calendar div.dayheading.empty,
1.187 +input#showdays:not(:checked) ~ .calendar div.tableheading.empty,
1.188 +input#showdays:not(:checked) ~ .calendar div.points.empty,
1.189
1.190 /* Hiding/showing end datetimes and start/end times. */
1.191
1.192 @@ -215,7 +245,7 @@
1.193
1.194 /* Show slot endpoints when hiding adjacent busy periods. */
1.195
1.196 -input#hidebusy:checked ~ .calendar th.timeslot span.endpoint {
1.197 +input#hidebusy:checked ~ .calendar .timeslot span.endpoint {
1.198 display: block;
1.199 }
1.200
1.201 @@ -283,11 +313,11 @@
1.202 }
1.203
1.204 label.showdays {
1.205 - border-left: 1em solid #faa; /* th.participantheading background-color */
1.206 + border-left: 1em solid #faa; /* .participantheading background-color */
1.207 }
1.208
1.209 label.hidebusy {
1.210 - border-left: 1em solid #af8; /* td.event background-color */
1.211 + border-left: 1em solid #af8; /* .event background-color */
1.212 }
1.213
1.214 label.reset {