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