Mercurial > hg > webaudioevaluationtool
annotate interfaces/mushra.css @ 1141:df4284a31f69
Moved interfaces into their own sub-directory
author | Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk> |
---|---|
date | Wed, 13 Jan 2016 09:34:46 +0000 |
parents | |
children | 92f26057b934 |
rev | line source |
---|---|
n@1141 | 1 /* |
n@1141 | 2 * Hold any style information for MUSHRA interface. Customise if you like to make the interface your own! |
n@1141 | 3 * |
n@1141 | 4 */ |
n@1141 | 5 body { |
n@1141 | 6 /* Set the background colour (note US English spelling) to grey*/ |
n@1141 | 7 background-color: #ddd |
n@1141 | 8 } |
n@1141 | 9 |
n@1141 | 10 div.pageTitle { |
n@1141 | 11 width: auto; |
n@1141 | 12 height: 20px; |
n@1141 | 13 margin: 10px 0px; |
n@1141 | 14 } |
n@1141 | 15 |
n@1141 | 16 div.pageTitle span{ |
n@1141 | 17 font-size: 1.5em; |
n@1141 | 18 } |
n@1141 | 19 |
n@1141 | 20 div.testHalt { |
n@1141 | 21 /* Specify any colouring during the test halt for pre/post questions */ |
n@1141 | 22 background-color: rgba(0,0,0,0.5); |
n@1141 | 23 /* Don't mess with this bit */ |
n@1141 | 24 z-index: 2; |
n@1141 | 25 width: 100%; |
n@1141 | 26 height: 100%; |
n@1141 | 27 position: absolute; |
n@1141 | 28 left: 0px; |
n@1141 | 29 top: 0px; |
n@1141 | 30 } |
n@1141 | 31 |
n@1141 | 32 button { |
n@1141 | 33 /* Specify any button structure or style */ |
n@1141 | 34 min-width: 20px; |
n@1141 | 35 background-color: #ddd |
n@1141 | 36 } |
n@1141 | 37 |
n@1141 | 38 div#slider-holder { |
n@1141 | 39 height: inherit; |
n@1141 | 40 position: absolute; |
n@1141 | 41 left: 0px; |
n@1141 | 42 z-index: 3; |
n@1141 | 43 } |
n@1141 | 44 |
n@1141 | 45 div#scale-holder { |
n@1141 | 46 height: inherit; |
n@1141 | 47 position: absolute; |
n@1141 | 48 left: 0px; |
n@1141 | 49 z-index: 2; |
n@1141 | 50 } |
n@1141 | 51 |
n@1141 | 52 div#scale-text-holder { |
n@1141 | 53 position:relative; |
n@1141 | 54 width: 100px; |
n@1141 | 55 float: left; |
n@1141 | 56 } |
n@1141 | 57 div.scale-text { |
n@1141 | 58 position: absolute; |
n@1141 | 59 } |
n@1141 | 60 |
n@1141 | 61 canvas#scale-canvas { |
n@1141 | 62 position: relative; |
n@1141 | 63 float: left; |
n@1141 | 64 } |
n@1141 | 65 |
n@1141 | 66 div.track-slider { |
n@1141 | 67 float: left; |
n@1141 | 68 width: 94px; |
n@1141 | 69 border: solid; |
n@1141 | 70 border-width: 1px; |
n@1141 | 71 border-color: black; |
n@1141 | 72 padding:2px; |
n@1141 | 73 margin-left: 50px; |
n@1141 | 74 } |
n@1141 | 75 |
n@1141 | 76 button.outside-reference { |
n@1141 | 77 width:120px; |
n@1141 | 78 height:20px; |
n@1141 | 79 margin-bottom:5px; |
n@1141 | 80 position: absolute; |
n@1141 | 81 } |
n@1141 | 82 |
n@1141 | 83 div.track-slider-playing { |
n@1141 | 84 background-color: #FFDDDD; |
n@1141 | 85 } |
n@1141 | 86 |
n@1141 | 87 input.track-slider-range { |
n@1141 | 88 margin: 2px 0px; |
n@1141 | 89 } |
n@1141 | 90 |
n@1141 | 91 input[type=range][orient=vertical] |
n@1141 | 92 { |
n@1141 | 93 writing-mode: bt-lr; /* IE */ |
n@1141 | 94 -webkit-appearance: slider-vertical; /* WebKit */ |
n@1141 | 95 width: 8px; |
n@1141 | 96 padding: 0 5px; |
n@1141 | 97 color: rgb(255, 144, 144); |
n@1141 | 98 } |
n@1141 | 99 |
n@1141 | 100 input[type=range]::-webkit-slider-runnable-track { |
n@1141 | 101 width: 8px; |
n@1141 | 102 cursor: pointer; |
n@1141 | 103 background: #fff; |
n@1141 | 104 border-radius: 4px; |
n@1141 | 105 border: 1px solid #000; |
n@1141 | 106 } |
n@1141 | 107 |
n@1141 | 108 input[type=range]::-moz-range-track { |
n@1141 | 109 width: 8px; |
n@1141 | 110 cursor: pointer; |
n@1141 | 111 background: #fff; |
n@1141 | 112 border-radius: 4px; |
n@1141 | 113 border: 1px solid #000; |
n@1141 | 114 } |
n@1141 | 115 |
n@1141 | 116 input.track-slider-not-moved[type=range]::-webkit-slider-runnable-track { |
n@1141 | 117 background: #aaa; |
n@1141 | 118 } |
n@1141 | 119 |
n@1141 | 120 input.track-slider-not-moved[type=range]::-moz-range-track { |
n@1141 | 121 background: #aaa; |
n@1141 | 122 } |
n@1141 | 123 |
n@1141 | 124 |
n@1141 | 125 input[type=range]::-moz-range-thumb { |
n@1141 | 126 margin-left: -7px; |
n@1141 | 127 cursor: pointer; |
n@1141 | 128 margin-top: -1px; |
n@1141 | 129 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; |
n@1141 | 130 } |
n@1141 | 131 |
n@1141 | 132 input[type=range]::-webkit-slider-thumb { |
n@1141 | 133 cursor: pointer; |
n@1141 | 134 margin-top: -1px; |
n@1141 | 135 margin-left: -4px; |
n@1141 | 136 } |