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 }