Mercurial > hg > webaudioevaluationtool
annotate interfaces/mushra.css @ 2548:67cf18d08af8
Merge branch 'master' of https://github.com/BrechtDeMan/WebAudioEvaluationTool
author | www-data <www-data@sucuk.dcs.qmul.ac.uk> |
---|---|
date | Thu, 17 Nov 2016 13:20:56 +0000 |
parents | 464c6c6692d6 |
children | d4707c4a8b98 |
rev | line source |
---|---|
nickjillings@1341 | 1 /* |
nickjillings@1341 | 2 * Hold any style information for MUSHRA interface. Customise if you like to make the interface your own! |
nickjillings@1341 | 3 * |
nickjillings@1341 | 4 */ |
nicholas@2538 | 5 |
nickjillings@1341 | 6 body { |
nicholas@2538 | 7 /* Set the background colour (note US English spelling) to grey*/ |
nicholas@2538 | 8 background-color: #ddd |
nickjillings@1341 | 9 } |
nickjillings@1341 | 10 div.pageTitle { |
nicholas@2538 | 11 width: auto; |
nicholas@2538 | 12 height: 20px; |
nicholas@2538 | 13 margin: 10px 0px; |
nickjillings@1341 | 14 } |
nicholas@2538 | 15 div.pageTitle span { |
nicholas@2538 | 16 font-size: 1.5em; |
nickjillings@1341 | 17 } |
nickjillings@1341 | 18 button { |
nicholas@2538 | 19 /* Specify any button structure or style */ |
nicholas@2538 | 20 min-width: 20px; |
nicholas@2538 | 21 background-color: #ddd |
nickjillings@1341 | 22 } |
nickjillings@1341 | 23 div#slider-holder { |
nicholas@2538 | 24 height: inherit; |
nicholas@2538 | 25 position: absolute; |
nicholas@2538 | 26 left: 0px; |
nicholas@2538 | 27 z-index: 3; |
nickjillings@1341 | 28 } |
nickjillings@1341 | 29 div#scale-holder { |
nicholas@2538 | 30 height: inherit; |
nicholas@2538 | 31 position: absolute; |
nicholas@2538 | 32 left: 0px; |
nicholas@2538 | 33 z-index: 2; |
nickjillings@1341 | 34 } |
nickjillings@1341 | 35 div#scale-text-holder { |
nicholas@2538 | 36 position: relative; |
nicholas@2538 | 37 width: 100px; |
nicholas@2538 | 38 float: left; |
nickjillings@1341 | 39 } |
nickjillings@1341 | 40 div.scale-text { |
nicholas@2538 | 41 position: absolute; |
nickjillings@1341 | 42 } |
nickjillings@1341 | 43 canvas#scale-canvas { |
nicholas@2538 | 44 position: relative; |
nicholas@2538 | 45 float: left; |
nickjillings@1341 | 46 } |
nickjillings@1341 | 47 div.track-slider { |
nicholas@2538 | 48 float: left; |
nicholas@2538 | 49 width: 94px; |
nicholas@2538 | 50 border: solid; |
nicholas@2538 | 51 border-width: 1px; |
nicholas@2538 | 52 border-color: black; |
nicholas@2538 | 53 padding: 2px; |
nicholas@2538 | 54 margin-left: 50px; |
nickjillings@1341 | 55 } |
nicholas@2395 | 56 div#outside-reference-holder { |
nicholas@2395 | 57 display: flex; |
nicholas@2395 | 58 align-content: center; |
nicholas@2395 | 59 justify-content: center; |
nicholas@2395 | 60 margin-bottom: 5px; |
nicholas@2395 | 61 } |
nickjillings@1341 | 62 button.outside-reference { |
nicholas@2395 | 63 position: inherit; |
nicholas@2395 | 64 margin: 0px 5px; |
nickjillings@1341 | 65 } |
nickjillings@1341 | 66 div.track-slider-playing { |
nicholas@2538 | 67 background-color: #FFDDDD; |
nickjillings@1341 | 68 } |
nickjillings@1341 | 69 input.track-slider-range { |
nicholas@2538 | 70 margin: 2px 0px; |
nickjillings@1341 | 71 } |
nicholas@2538 | 72 input[type=range][orient=vertical] { |
nicholas@2538 | 73 writing-mode: bt-lr; |
nicholas@2538 | 74 /* IE */ |
nicholas@2538 | 75 -webkit-appearance: slider-vertical; |
nicholas@2538 | 76 /* WebKit */ |
nickjillings@1341 | 77 width: 8px; |
nickjillings@1341 | 78 padding: 0 5px; |
nickjillings@1341 | 79 color: rgb(255, 144, 144); |
nickjillings@1341 | 80 } |
nickjillings@1341 | 81 input[type=range]::-webkit-slider-runnable-track { |
nicholas@2538 | 82 width: 8px; |
nicholas@2538 | 83 cursor: pointer; |
nicholas@2538 | 84 background: #fff; |
nicholas@2538 | 85 border-radius: 4px; |
nicholas@2538 | 86 border: 1px solid #000; |
nickjillings@1341 | 87 } |
nickjillings@1341 | 88 input[type=range]::-moz-range-track { |
nicholas@2538 | 89 width: 8px; |
nicholas@2538 | 90 cursor: pointer; |
nicholas@2538 | 91 background: #fff; |
nicholas@2538 | 92 border-radius: 4px; |
nicholas@2538 | 93 border: 1px solid #000; |
nickjillings@1341 | 94 } |
nicholas@2380 | 95 input[type=range]::-ms-track { |
nicholas@2538 | 96 cursor: pointer; |
nicholas@2538 | 97 background: #fff; |
nicholas@2538 | 98 border-radius: 4px; |
nicholas@2538 | 99 border: 1px solid #000; |
nicholas@2380 | 100 } |
nickjillings@1341 | 101 input.track-slider-not-moved[type=range]::-webkit-slider-runnable-track { |
nicholas@2538 | 102 background: #aaa; |
nickjillings@1341 | 103 } |
nickjillings@1341 | 104 input.track-slider-not-moved[type=range]::-moz-range-track { |
nicholas@2538 | 105 background: #aaa; |
nickjillings@1341 | 106 } |
nickjillings@1341 | 107 input[type=range]::-moz-range-thumb { |
nicholas@2538 | 108 margin-left: -7px; |
nicholas@2538 | 109 cursor: pointer; |
nicholas@2538 | 110 margin-top: -1px; |
nicholas@2538 | 111 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; |
nickjillings@1341 | 112 } |
nickjillings@1341 | 113 input[type=range]::-webkit-slider-thumb { |
nicholas@2538 | 114 cursor: pointer; |
nicholas@2538 | 115 margin-top: -1px; |
nicholas@2538 | 116 margin-left: -4px; |
nickjillings@1341 | 117 } |
nicholas@2380 | 118 input[type=range]::-ms-thumb { |
nicholas@2538 | 119 cursor: pointer; |
nicholas@2538 | 120 margin-top: -1px; |
nicholas@2538 | 121 margin-left: -4px; |
nicholas@2380 | 122 } |
nicholas@2380 | 123 input[type=range]::-ms-tooltip { |
nicholas@2538 | 124 visibility: hidden; |
nicholas@2380 | 125 } |
nickjillings@1356 | 126 div#page-count { |
nickjillings@1356 | 127 float: left; |
nickjillings@1356 | 128 margin: 0px 5px; |
nickjillings@1356 | 129 } |
nickjillings@1356 | 130 div#master-volume-holder { |
nickjillings@1356 | 131 position: absolute; |
nickjillings@1356 | 132 top: 10px; |
nickjillings@1356 | 133 left: 120px; |
nicholas@2538 | 134 } |