Mercurial > hg > webaudioevaluationtool
annotate interfaces/horizontal-sliders.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 | 38d2150045f5 |
children |
rev | line source |
---|---|
nickjillings@1343 | 1 /* |
nickjillings@1343 | 2 * Hold any style information for MUSHRA interface. Customise if you like to make the interface your own! |
nicholas@3132 | 3 * |
nickjillings@1343 | 4 */ |
nicholas@2538 | 5 |
nickjillings@1343 | 6 body { |
nicholas@2538 | 7 /* Set the background colour (note US English spelling) to grey*/ |
nicholas@2538 | 8 background-color: #ddd |
nickjillings@1343 | 9 } |
nickjillings@1343 | 10 div.pageTitle { |
nicholas@2538 | 11 width: auto; |
nicholas@2538 | 12 height: 20px; |
nicholas@2538 | 13 margin: 10px 0px; |
nickjillings@1343 | 14 } |
nicholas@2538 | 15 div.pageTitle span { |
nicholas@2538 | 16 font-size: 1.5em; |
nickjillings@1343 | 17 } |
nickjillings@1343 | 18 button { |
nicholas@2538 | 19 /* Specify any button structure or style */ |
nicholas@2538 | 20 min-width: 20px; |
nicholas@2538 | 21 background-color: #ddd |
nickjillings@1343 | 22 } |
nickjillings@1343 | 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; |
nicholas@2538 | 28 margin-top: 25px; |
nickjillings@1343 | 29 } |
nickjillings@1343 | 30 div#scale-holder { |
nicholas@2538 | 31 height: inherit; |
nicholas@2538 | 32 position: absolute; |
nicholas@2538 | 33 left: 0px; |
nicholas@2538 | 34 z-index: 2; |
nickjillings@1343 | 35 } |
nickjillings@1343 | 36 div#scale-text-holder { |
nicholas@2538 | 37 position: relative; |
nicholas@2538 | 38 float: left; |
nickjillings@1343 | 39 } |
nickjillings@1343 | 40 div.scale-text { |
nicholas@2538 | 41 position: absolute; |
nicholas@2538 | 42 font-size: 1.2em; |
nickjillings@1343 | 43 } |
nickjillings@1343 | 44 canvas#scale-canvas { |
nicholas@2538 | 45 position: relative; |
nicholas@2538 | 46 float: left; |
nickjillings@1343 | 47 } |
nickjillings@1343 | 48 div.track-slider { |
nicholas@2538 | 49 float: left; |
nicholas@2538 | 50 height: 94px; |
nicholas@2538 | 51 border: solid; |
nicholas@2538 | 52 border-width: 1px; |
nicholas@2538 | 53 border-color: black; |
nicholas@2538 | 54 margin-left: 94px; |
nicholas@2538 | 55 margin-bottom: 25px; |
nicholas@3132 | 56 display: grid; |
nicholas@3132 | 57 grid-template-columns: 113px 1fr 107px; |
nickjillings@1343 | 58 } |
nickjillings@1343 | 59 div.track-slider-title { |
nicholas@3132 | 60 padding-top: 30px; |
nickjillings@1343 | 61 } |
nickjillings@1343 | 62 button.track-slider-button { |
nicholas@3132 | 63 width: 90px; |
nicholas@3132 | 64 height: 74px; |
nicholas@3132 | 65 margin: 10px; |
nickjillings@1343 | 66 } |
nicholas@2396 | 67 div#outside-reference-holder { |
nicholas@2396 | 68 display: flex; |
nicholas@2396 | 69 align-content: center; |
nicholas@2396 | 70 justify-content: center; |
nicholas@2396 | 71 margin-bottom: 5px; |
nicholas@2396 | 72 } |
nickjillings@1343 | 73 button.outside-reference { |
nicholas@2396 | 74 position: inherit; |
nicholas@2396 | 75 margin: 0px 5px; |
nickjillings@1343 | 76 } |
nickjillings@1343 | 77 div.track-slider-playing { |
nicholas@2841 | 78 background-color: rgba(255, 201, 201, 0.5); |
nickjillings@1343 | 79 } |
nicholas@2538 | 80 input[type=range] { |
nickjillings@1343 | 81 height: 94px; |
nickjillings@1347 | 82 padding: 0px; |
nickjillings@1343 | 83 color: rgb(255, 144, 144); |
nicholas@3132 | 84 background-color: rgba(0,0,0,0); |
nickjillings@1343 | 85 } |
nickjillings@1343 | 86 input[type=range]::-webkit-slider-runnable-track { |
nicholas@2538 | 87 cursor: pointer; |
nicholas@2538 | 88 background: #fff; |
nicholas@2538 | 89 border-radius: 4px; |
nicholas@2538 | 90 border: 1px solid #000; |
nickjillings@1343 | 91 } |
nickjillings@1343 | 92 input[type=range]::-moz-range-track { |
nicholas@2538 | 93 height: 8px; |
nicholas@2538 | 94 cursor: pointer; |
nicholas@2538 | 95 background: #fff; |
nicholas@2538 | 96 border-radius: 4px; |
nicholas@2538 | 97 border: 1px solid #000; |
nickjillings@1343 | 98 } |
nickjillings@1343 | 99 input.track-slider-not-moved[type=range]::-webkit-slider-runnable-track { |
nicholas@2538 | 100 background: #aaa; |
nickjillings@1343 | 101 } |
nickjillings@1343 | 102 input.track-slider-not-moved[type=range]::-moz-range-track { |
nicholas@2538 | 103 background: #aaa; |
nickjillings@1356 | 104 } |
nickjillings@1356 | 105 div#page-count { |
nickjillings@1356 | 106 float: left; |
nickjillings@1356 | 107 margin: 0px 5px; |
nickjillings@1356 | 108 } |
nickjillings@1356 | 109 div#master-volume-holder { |
nickjillings@1356 | 110 position: absolute; |
nickjillings@1356 | 111 top: 10px; |
nickjillings@1356 | 112 left: 120px; |
nicholas@2538 | 113 } |
nicholas@2725 | 114 div.comment-box-playing { |
nicholas@2725 | 115 background-color: #FFDDDD; |
nicholas@2725 | 116 } |