annotate interfaces/mushra.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 9ac4f490a1d8
children
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!
n@2989 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;
nicholas@3038 42 text-align: right;
nicholas@3038 43 min-width: 100px;
nickjillings@1341 44 }
nickjillings@1341 45 canvas#scale-canvas {
nicholas@2538 46 position: relative;
nicholas@2538 47 float: left;
nickjillings@1341 48 }
nickjillings@1341 49 div.track-slider {
nicholas@2538 50 float: left;
nicholas@2538 51 width: 94px;
nicholas@2538 52 border: solid;
nicholas@2538 53 border-width: 1px;
nicholas@2538 54 border-color: black;
nicholas@2538 55 padding: 2px;
nicholas@2538 56 margin-left: 50px;
nickjillings@1341 57 }
nicholas@2395 58 div#outside-reference-holder {
nicholas@2395 59 display: flex;
nicholas@2395 60 align-content: center;
nicholas@2395 61 justify-content: center;
nicholas@2395 62 margin-bottom: 5px;
nicholas@2395 63 }
nickjillings@1341 64 button.outside-reference {
nicholas@2395 65 position: inherit;
nicholas@2395 66 margin: 0px 5px;
nickjillings@1341 67 }
nickjillings@1341 68 div.track-slider-playing {
nicholas@2838 69 background-color: rgba(255, 201, 201, 0.5);
nickjillings@1341 70 }
nickjillings@1341 71 input.track-slider-range {
nicholas@2538 72 margin: 2px 0px;
nickjillings@1341 73 }
nicholas@2538 74 input[type=range][orient=vertical] {
nicholas@2538 75 writing-mode: bt-lr;
nicholas@2538 76 /* IE */
nicholas@2538 77 -webkit-appearance: slider-vertical;
nicholas@2538 78 /* WebKit */
nickjillings@1341 79 width: 8px;
nickjillings@1341 80 padding: 0 5px;
nickjillings@1341 81 color: rgb(255, 144, 144);
nickjillings@1341 82 }
n@2989 83 input[type=range][orient=vertical]::-webkit-slider-runnable-track {
nicholas@2538 84 width: 8px;
nicholas@2538 85 cursor: pointer;
nicholas@2538 86 background: #fff;
nicholas@2538 87 border-radius: 4px;
nicholas@2538 88 border: 1px solid #000;
nickjillings@1341 89 }
n@2989 90 input[type=range][orient=vertical]::-moz-range-track {
nicholas@2538 91 width: 8px;
nicholas@2538 92 cursor: pointer;
nicholas@2538 93 background: #fff;
nicholas@2538 94 border-radius: 4px;
nicholas@2538 95 border: 1px solid #000;
nickjillings@1341 96 }
n@2989 97 input[type=range][orient=vertical]::-ms-track {
nicholas@2538 98 cursor: pointer;
nicholas@2538 99 background: #fff;
nicholas@2538 100 border-radius: 4px;
nicholas@2538 101 border: 1px solid #000;
nicholas@2380 102 }
n@2989 103 input.track-slider-not-moved[type=range][orient=vertical]::-webkit-slider-runnable-track {
nicholas@2538 104 background: #aaa;
nickjillings@1341 105 }
n@2989 106 input.track-slider-not-moved[type=range][orient=vertical]::-moz-range-track {
nicholas@2538 107 background: #aaa;
nickjillings@1341 108 }
n@2989 109 input[type=range][orient=vertical]::-moz-range-thumb {
nicholas@2538 110 margin-left: -7px;
nicholas@2538 111 cursor: pointer;
nicholas@2538 112 margin-top: -1px;
nicholas@2538 113 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
nickjillings@1341 114 }
n@2989 115 input[type=range][orient=vertical]::-webkit-slider-thumb {
nicholas@2538 116 cursor: pointer;
nicholas@2538 117 margin-top: -1px;
nicholas@2538 118 margin-left: -4px;
nickjillings@1341 119 }
n@2989 120 input[type=range][orient=vertical]::-ms-thumb {
nicholas@2538 121 cursor: pointer;
nicholas@2538 122 margin-top: -1px;
nicholas@2538 123 margin-left: -4px;
nicholas@2380 124 }
n@2989 125 input[type=range][orient=vertical]::-ms-tooltip {
nicholas@2538 126 visibility: hidden;
nicholas@2380 127 }
nicholas@2623 128 input.track-slider-range-disabled {}
nicholas@2623 129 input.track-slider-range-disabled[type=range]::-webkit-slider-runnable-track {
nicholas@2623 130 cursor: not-allowed;
nicholas@2623 131 }
nicholas@2623 132 input.track-slider-range-disabled[type=range]::-moz-range-track {
nicholas@2623 133 cursor: not-allowed;
nicholas@2623 134 }
nicholas@2623 135 input.track-slider-range-disabled[type=range]::-ms-track {
nicholas@2623 136 cursor: not-allowed;
nicholas@2623 137 }
nicholas@2623 138 input.track-slider-range-disabled[type=range]::-moz-range-thumb {
nicholas@2623 139 cursor: not-allowed;
nicholas@2623 140 background-color: #888;
nicholas@2623 141 }
nicholas@2623 142 input.track-slider-range-disabled[type=range]::-webkit-slider-thumb {
nicholas@2623 143 cursor: not-allowed;
nicholas@2623 144 background-color: #888;
nicholas@2623 145 }
nicholas@2623 146 input.track-slider-range-disabled[type=range]::-ms-thumb {
nicholas@2623 147 cursor: not-allowed;
nicholas@2623 148 background-color: #888;
nicholas@2623 149 }
nickjillings@1356 150 div#page-count {
nickjillings@1356 151 float: left;
nickjillings@1356 152 margin: 0px 5px;
nickjillings@1356 153 }
nickjillings@1356 154 div#master-volume-holder {
nickjillings@1356 155 position: absolute;
nickjillings@1356 156 top: 10px;
nickjillings@1356 157 left: 120px;
nicholas@2538 158 }