Mercurial > hg > waet-hammond-1
annotate interfaces/horizontal-sliders.css @ 22:1f375b7d75fd tip
updated warning for breaks during test
author | Giulio Moro <giuliomoro@yahoo.it> |
---|---|
date | Fri, 13 May 2016 19:01:08 +0100 |
parents | d2eb0e6ccaaf |
children |
rev | line source |
---|---|
giuliomoro@0 | 1 /* |
giuliomoro@0 | 2 * Hold any style information for MUSHRA interface. Customise if you like to make the interface your own! |
giuliomoro@0 | 3 * |
giuliomoro@0 | 4 */ |
giuliomoro@0 | 5 body { |
giuliomoro@0 | 6 /* Set the background colour (note US English spelling) to grey*/ |
giuliomoro@0 | 7 background-color: #ddd |
giuliomoro@0 | 8 } |
giuliomoro@0 | 9 |
giuliomoro@0 | 10 div.pageTitle { |
giuliomoro@0 | 11 width: auto; |
giuliomoro@0 | 12 height: 20px; |
giuliomoro@0 | 13 margin: 10px 0px; |
giuliomoro@0 | 14 } |
giuliomoro@0 | 15 |
giuliomoro@0 | 16 div.pageTitle span{ |
giuliomoro@0 | 17 font-size: 1.5em; |
giuliomoro@0 | 18 } |
giuliomoro@0 | 19 |
giuliomoro@0 | 20 div.testHalt { |
giuliomoro@0 | 21 /* Specify any colouring during the test halt for pre/post questions */ |
giuliomoro@0 | 22 background-color: rgba(0,0,0,0.5); |
giuliomoro@0 | 23 /* Don't mess with this bit */ |
giuliomoro@0 | 24 z-index: 2; |
giuliomoro@0 | 25 width: 100%; |
giuliomoro@0 | 26 height: 100%; |
giuliomoro@0 | 27 position: absolute; |
giuliomoro@0 | 28 left: 0px; |
giuliomoro@0 | 29 top: 0px; |
giuliomoro@0 | 30 } |
giuliomoro@0 | 31 |
giuliomoro@0 | 32 button { |
giuliomoro@0 | 33 /* Specify any button structure or style */ |
giuliomoro@0 | 34 min-width: 20px; |
giuliomoro@0 | 35 background-color: #ddd |
giuliomoro@0 | 36 } |
giuliomoro@0 | 37 |
giuliomoro@0 | 38 div#slider-holder { |
giuliomoro@0 | 39 height: inherit; |
giuliomoro@0 | 40 position: absolute; |
giuliomoro@0 | 41 left: 0px; |
giuliomoro@0 | 42 z-index: 3; |
giuliomoro@0 | 43 margin-top:25px; |
giuliomoro@0 | 44 } |
giuliomoro@0 | 45 |
giuliomoro@0 | 46 div#scale-holder { |
giuliomoro@0 | 47 height: inherit; |
giuliomoro@0 | 48 position: absolute; |
giuliomoro@0 | 49 left: 0px; |
giuliomoro@0 | 50 z-index: 2; |
giuliomoro@0 | 51 } |
giuliomoro@0 | 52 |
giuliomoro@0 | 53 div#scale-text-holder { |
giuliomoro@0 | 54 position:relative; |
giuliomoro@0 | 55 float: left; |
giuliomoro@0 | 56 } |
giuliomoro@0 | 57 div.scale-text { |
giuliomoro@0 | 58 position: absolute; |
giuliomoro@0 | 59 font-size: 1.2em; |
giuliomoro@0 | 60 } |
giuliomoro@0 | 61 |
giuliomoro@0 | 62 canvas#scale-canvas { |
giuliomoro@0 | 63 position: relative; |
giuliomoro@0 | 64 float: left; |
giuliomoro@0 | 65 } |
giuliomoro@0 | 66 |
giuliomoro@0 | 67 div.track-slider { |
giuliomoro@0 | 68 float: left; |
giuliomoro@0 | 69 height: 94px; |
giuliomoro@0 | 70 border: solid; |
giuliomoro@0 | 71 border-width: 1px; |
giuliomoro@0 | 72 border-color: black; |
giuliomoro@0 | 73 padding:2px; |
giuliomoro@0 | 74 margin-left: 94px; |
giuliomoro@0 | 75 margin-bottom: 25px; |
giuliomoro@0 | 76 } |
giuliomoro@0 | 77 |
giuliomoro@0 | 78 div.track-slider-title { |
giuliomoro@0 | 79 float: left; |
giuliomoro@0 | 80 padding-top: 40px; |
giuliomoro@0 | 81 width: 100px; |
giuliomoro@0 | 82 } |
giuliomoro@0 | 83 |
giuliomoro@0 | 84 button.track-slider-button { |
giuliomoro@0 | 85 float: left; |
giuliomoro@0 | 86 width: 100px; |
giuliomoro@0 | 87 height: 94px; |
giuliomoro@0 | 88 } |
giuliomoro@0 | 89 |
giuliomoro@0 | 90 |
giuliomoro@0 | 91 button.outside-reference { |
giuliomoro@0 | 92 width:120px; |
giuliomoro@0 | 93 height:20px; |
giuliomoro@0 | 94 margin-bottom:5px; |
giuliomoro@0 | 95 position: absolute; |
giuliomoro@0 | 96 } |
giuliomoro@0 | 97 |
giuliomoro@0 | 98 div.track-slider-playing { |
giuliomoro@0 | 99 background-color: #FFDDDD; |
giuliomoro@0 | 100 } |
giuliomoro@0 | 101 |
giuliomoro@0 | 102 input.track-slider-range { |
giuliomoro@0 | 103 float: left; |
giuliomoro@0 | 104 margin: 2px 10px; |
giuliomoro@0 | 105 } |
giuliomoro@0 | 106 |
giuliomoro@0 | 107 input[type=range] |
giuliomoro@0 | 108 { |
giuliomoro@0 | 109 height: 94px; |
giuliomoro@0 | 110 padding: 0px; |
giuliomoro@0 | 111 color: rgb(255, 144, 144); |
giuliomoro@0 | 112 } |
giuliomoro@0 | 113 |
giuliomoro@0 | 114 input[type=range]::-webkit-slider-runnable-track { |
giuliomoro@0 | 115 cursor: pointer; |
giuliomoro@0 | 116 background: #fff; |
giuliomoro@0 | 117 border-radius: 4px; |
giuliomoro@0 | 118 border: 1px solid #000; |
giuliomoro@0 | 119 } |
giuliomoro@0 | 120 |
giuliomoro@0 | 121 input[type=range]::-moz-range-track { |
giuliomoro@0 | 122 height: 8px; |
giuliomoro@0 | 123 cursor: pointer; |
giuliomoro@0 | 124 background: #fff; |
giuliomoro@0 | 125 border-radius: 4px; |
giuliomoro@0 | 126 border: 1px solid #000; |
giuliomoro@0 | 127 } |
giuliomoro@0 | 128 |
giuliomoro@0 | 129 input.track-slider-not-moved[type=range]::-webkit-slider-runnable-track { |
giuliomoro@0 | 130 background: #aaa; |
giuliomoro@0 | 131 } |
giuliomoro@0 | 132 |
giuliomoro@0 | 133 input.track-slider-not-moved[type=range]::-moz-range-track { |
giuliomoro@0 | 134 background: #aaa; |
giuliomoro@0 | 135 } |
giuliomoro@0 | 136 |
giuliomoro@0 | 137 div#page-count { |
giuliomoro@0 | 138 float: left; |
giuliomoro@0 | 139 margin: 0px 5px; |
giuliomoro@0 | 140 } |
giuliomoro@0 | 141 |
giuliomoro@0 | 142 div#master-volume-holder { |
giuliomoro@0 | 143 position: absolute; |
giuliomoro@0 | 144 top: 10px; |
giuliomoro@0 | 145 left: 120px; |
giuliomoro@0 | 146 } |