Mercurial > dottes
comparison web/css/dottes.css @ 613:af814cd756e8
Sort out column widths for web tune list.
In the process discover display: table-column and use those on
tune headers and footers to set column widths.
| author | Jim Hague <jim.hague@acm.org> |
|---|---|
| date | Sat, 05 Nov 2016 10:46:41 +0000 |
| parents | ed823ea54c83 |
| children | 2fe68733ec17 |
comparison
equal
deleted
inserted
replaced
| 611:b6b80aca673d | 613:af814cd756e8 |
|---|---|
| 130 { | 130 { |
| 131 display: table; | 131 display: table; |
| 132 width: 100%; | 132 width: 100%; |
| 133 } | 133 } |
| 134 | 134 |
| 135 div.dottes-tune-header-icons-column | |
| 136 { | |
| 137 display: table-column; | |
| 138 width: 25%; | |
| 139 } | |
| 140 | |
| 141 div.dottes-tune-header-title-column | |
| 142 { | |
| 143 display: table-column; | |
| 144 width: 50%; | |
| 145 } | |
| 146 | |
| 147 div.dottes-tune-header-last-column | |
| 148 { | |
| 149 display: table-column; | |
| 150 width: 25%; | |
| 151 } | |
| 152 | |
| 135 div.dottes-tune-header-row | 153 div.dottes-tune-header-row |
| 136 { | 154 { |
| 137 display: table-row; | 155 display: table-row; |
| 138 } | 156 } |
| 139 | 157 |
| 140 div.dottes-tune-header-left | 158 div.dottes-tune-header-icons |
| 141 { | 159 { |
| 142 display: table-cell; | 160 display: table-cell; |
| 143 width: 25%; | 161 } |
| 144 } | 162 |
| 145 | 163 div.dottes-tune-header-title |
| 146 div.dottes-tune-header-middle | 164 { |
| 147 { | 165 display: table-cell; |
| 148 display: table-cell; | 166 } |
| 149 } | 167 |
| 150 | 168 div.dottes-tune-header-title h1 |
| 151 div.dottes-tune-header-middle h1 | |
| 152 { | 169 { |
| 153 font-weight: bold; | 170 font-weight: bold; |
| 154 text-align: center; | 171 text-align: center; |
| 155 margin: 0px; | 172 margin: 0px; |
| 156 } | 173 } |
| 157 | 174 |
| 158 div.dottes-tune-header-middle h2 | 175 div.dottes-tune-header-title h2 |
| 159 { | 176 { |
| 160 font-weight: normal; | 177 font-weight: normal; |
| 161 text-align: center; | 178 text-align: center; |
| 162 margin: 0px; | 179 margin: 0px; |
| 163 } | 180 } |
| 164 | 181 |
| 165 div.dottes-tune-header-right | 182 div.dottes-tune-header-composer |
| 166 { | 183 { |
| 167 display: table-cell; | 184 display: table-cell; |
| 168 text-align: right; | 185 text-align: right; |
| 169 width: 25%; | |
| 170 } | 186 } |
| 171 | 187 |
| 172 div.dottes-tune-footer | 188 div.dottes-tune-footer |
| 173 { | 189 { |
| 174 display: table; | 190 display: table; |
| 175 width: 100%; | 191 width: 100%; |
| 176 } | 192 } |
| 177 | 193 |
| 194 div.dottes-tune-footer-links-column | |
| 195 { | |
| 196 display: table-column; | |
| 197 width: 25%; | |
| 198 } | |
| 199 | |
| 200 div.dottes-tune-footer-play-column | |
| 201 { | |
| 202 display: table-column; | |
| 203 width: 50%; | |
| 204 } | |
| 205 | |
| 206 div.dottes-tune-footer-last-column | |
| 207 { | |
| 208 display: table-column; | |
| 209 width: 25%; | |
| 210 } | |
| 211 | |
| 178 div.dottes-tune-footer-row | 212 div.dottes-tune-footer-row |
| 179 { | 213 { |
| 180 display: table-row; | 214 display: table-row; |
| 181 } | 215 } |
| 182 | 216 |
| 183 div.dottes-tune-footer-left | 217 div.dottes-tune-footer-links |
| 184 { | 218 { |
| 185 display: table-cell; | 219 display: table-cell; |
| 186 width: 25%; | 220 } |
| 187 } | 221 |
| 188 | 222 div.dottes-tune-footer-play |
| 189 div.dottes-tune-footer-centre | |
| 190 { | 223 { |
| 191 display: table-cell; | 224 display: table-cell; |
| 192 text-align: center; | 225 text-align: center; |
| 193 width: 50%; | 226 } |
| 194 } | 227 |
| 195 | 228 div.dottes-tune-footer-last |
| 196 div.dottes-tune-footer-right | |
| 197 { | 229 { |
| 198 display: table-cell; | 230 display: table-cell; |
| 199 text-align: right; | 231 text-align: right; |
| 200 width: 25%; | |
| 201 } | 232 } |
| 202 | 233 |
| 203 a.dottes-tune-link | 234 a.dottes-tune-link |
| 204 { | 235 { |
| 205 position: relative; | 236 position: relative; |
| 252 div.dottes-tune-list-item | 283 div.dottes-tune-list-item |
| 253 { | 284 { |
| 254 display: table-row; | 285 display: table-row; |
| 255 } | 286 } |
| 256 | 287 |
| 288 div.dottes-tune-list-link-column | |
| 289 { | |
| 290 display: table-column; | |
| 291 } | |
| 292 | |
| 293 div.dottes-tune-list-image-column | |
| 294 { | |
| 295 display: table-column; | |
| 296 width: 80%; | |
| 297 } | |
| 298 | |
| 257 div.dottes-tune-list-item-link | 299 div.dottes-tune-list-item-link |
| 258 { | 300 { |
| 259 display: table-cell; | 301 display: table-cell; |
| 260 vertical-align: middle; | 302 vertical-align: middle; |
| 261 } | 303 } |
| 264 { | 306 { |
| 265 display: table-cell; | 307 display: table-cell; |
| 266 vertical-align: middle; | 308 vertical-align: middle; |
| 267 } | 309 } |
| 268 | 310 |
| 311 div.dottes-tune-list-item-image img | |
| 312 { | |
| 313 width: 100%; | |
| 314 } | |
| 315 | |
| 269 div.dottes-notes-no | 316 div.dottes-notes-no |
| 270 { | 317 { |
| 271 display: none; | 318 display: none; |
| 272 } | 319 } |
| 273 | 320 |