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