annotate interfaces/mushra.css @ 1089:3de455e48d70

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