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 }
|