Mercurial > hg > webaudioevaluationtool
annotate interfaces/discrete.css @ 3141:335bc77627e0 tip
fixing discrete interface to allow labels to display
author | Dave Moffat <me@davemoffat.com> |
---|---|
date | Mon, 26 Jul 2021 12:15:24 +0100 |
parents | b14c618ecf2b |
children |
rev | line source |
---|---|
nickjillings@1345 | 1 /* |
nickjillings@1345 | 2 * Hold any style information for MUSHRA interface. Customise if you like to make the interface your own! |
nicholas@3133 | 3 * |
nickjillings@1345 | 4 */ |
nicholas@2538 | 5 |
nickjillings@1345 | 6 body { |
nicholas@2538 | 7 /* Set the background colour (note US English spelling) to grey*/ |
nicholas@2538 | 8 background-color: #ddd |
nickjillings@1345 | 9 } |
nickjillings@1345 | 10 div.pageTitle { |
nicholas@2538 | 11 width: auto; |
nicholas@2538 | 12 height: 20px; |
nicholas@2538 | 13 margin: 10px 0px; |
nickjillings@1345 | 14 } |
nicholas@2538 | 15 div.pageTitle span { |
nicholas@2538 | 16 font-size: 1.5em; |
nickjillings@1345 | 17 } |
nickjillings@1345 | 18 button { |
nicholas@2538 | 19 /* Specify any button structure or style */ |
nicholas@2538 | 20 min-width: 20px; |
nicholas@2538 | 21 background-color: #ddd |
nickjillings@1345 | 22 } |
nicholas@3045 | 23 div#slider-box { |
nicholas@3045 | 24 width: 75%; |
nicholas@3045 | 25 height: auto; |
nicholas@3045 | 26 margin: auto; |
nicholas@3045 | 27 padding-bottom: 20px; |
nickjillings@1345 | 28 } |
nicholas@3045 | 29 div#slider-grid { |
nicholas@3045 | 30 display: grid; |
nicholas@3045 | 31 grid-template-columns: 1fr; |
nicholas@3045 | 32 grid-row-gap: 10px; |
nickjillings@1345 | 33 } |
nickjillings@1345 | 34 div#scale-text-holder { |
nicholas@3045 | 35 display: grid; |
nicholas@3045 | 36 grid-template-rows: 1fr; |
nicholas@3045 | 37 min-height: 25px; |
nicholas@3045 | 38 text-align: center; |
nicholas@3045 | 39 } |
nicholas@3045 | 40 div.discrete-row { |
nicholas@3045 | 41 display: grid; |
nicholas@3045 | 42 grid-template-rows: 1fr; |
nicholas@3045 | 43 padding: 10px; |
nicholas@3045 | 44 border: 1px solid black; |
nicholas@3045 | 45 height: 50px; |
nicholas@3045 | 46 } |
nicholas@3045 | 47 button.discrete-button { |
nicholas@3045 | 48 width: 100px; |
nicholas@3045 | 49 } |
nicholas@3045 | 50 div.discrete-label { |
nicholas@3045 | 51 width: 100px; |
nicholas@3045 | 52 text-align: center; |
nickjillings@1345 | 53 } |
nickjillings@1345 | 54 div.scale-text { |
nicholas@2538 | 55 position: relative; |
nickjillings@1345 | 56 } |
nicholas@3045 | 57 div.scale-text > span { |
nicholas@3045 | 58 position: absolute; |
nicholas@3045 | 59 bottom: 0; |
nicholas@3045 | 60 width: 100%; |
nicholas@3045 | 61 left: 0; |
nickjillings@1345 | 62 } |
nicholas@3045 | 63 div.discrete-row-playing { |
nicholas@3045 | 64 background-color: rgba(255, 201, 201, 0.5); |
nickjillings@1345 | 65 } |