comparison interfaces/mushra.css @ 2623:d4707c4a8b98

#146 implemented for Mushra

 
 body {
     /* Set the background colour (note US English spelling) to grey*/
     background-color: #ddd
 }
+
 div.pageTitle {
     width: auto;
     height: 20px;
     margin: 10px 0px;
 }
+
 div.pageTitle span {
     font-size: 1.5em;
 }
+
 button {
     /* Specify any button structure or style */
     min-width: 20px;
     background-color: #ddd
 }
+
 div#slider-holder {
     height: inherit;
     position: absolute;
     left: 0px;
     z-index: 3;
 }
+
 div#scale-holder {
     height: inherit;
     position: absolute;
     left: 0px;
     z-index: 2;
 }
+
 div#scale-text-holder {
     position: relative;
     width: 100px;
     float: left;
 }
+
 div.scale-text {
     position: absolute;
 }
+
 canvas#scale-canvas {
     position: relative;
     float: left;
 }
+
 div.track-slider {
     float: left;
     width: 94px;
     border: solid;
     border-width: 1px;
     border-color: black;
     padding: 2px;
     margin-left: 50px;
 }
+
 div#outside-reference-holder {
     display: flex;
     align-content: center;
     justify-content: center;
     margin-bottom: 5px;
 }
+
 button.outside-reference {
     position: inherit;
     margin: 0px 5px;
 }
+
 div.track-slider-playing {
     background-color: #FFDDDD;
 }
+
 input.track-slider-range {
     margin: 2px 0px;
 }
+
 input[type=range][orient=vertical] {
     writing-mode: bt-lr;
     /* IE */
     -webkit-appearance: slider-vertical;
     /* WebKit */
     width: 8px;
     padding: 0 5px;
     color: rgb(255, 144, 144);
 }
+
 input[type=range]::-webkit-slider-runnable-track {
     width: 8px;
     cursor: pointer;
     background: #fff;
     border-radius: 4px;
     border: 1px solid #000;
 }
+
 input[type=range]::-moz-range-track {
     width: 8px;
     cursor: pointer;
     background: #fff;
     border-radius: 4px;
     border: 1px solid #000;
 }
+
 input[type=range]::-ms-track {
     cursor: pointer;
     background: #fff;
     border-radius: 4px;
     border: 1px solid #000;
 }
+
 input.track-slider-not-moved[type=range]::-webkit-slider-runnable-track {
     background: #aaa;
 }
+
 input.track-slider-not-moved[type=range]::-moz-range-track {
     background: #aaa;
 }
+
 input[type=range]::-moz-range-thumb {
     margin-left: -7px;
     cursor: pointer;
     margin-top: -1px;
     box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
 }
+
 input[type=range]::-webkit-slider-thumb {
     cursor: pointer;
     margin-top: -1px;
     margin-left: -4px;
 }
+
 input[type=range]::-ms-thumb {
     cursor: pointer;
     margin-top: -1px;
     margin-left: -4px;
 }
+
 input[type=range]::-ms-tooltip {
     visibility: hidden;
 }
+
+input.track-slider-range-disabled {}
+
+input.track-slider-range-disabled[type=range]::-webkit-slider-runnable-track {
+    cursor: not-allowed;
+}
+
+input.track-slider-range-disabled[type=range]::-moz-range-track {
+    cursor: not-allowed;
+}
+
+input.track-slider-range-disabled[type=range]::-ms-track {
+    cursor: not-allowed;
+}
+
+input.track-slider-range-disabled[type=range]::-moz-range-thumb {
+    cursor: not-allowed;
+    background-color: #888;
+}
+
+input.track-slider-range-disabled[type=range]::-webkit-slider-thumb {
+    cursor: not-allowed;
+    background-color: #888;
+}
+
+input.track-slider-range-disabled[type=range]::-ms-thumb {
+    cursor: not-allowed;
+    background-color: #888;
+}
+
 div#page-count {
     float: left;
     margin: 0px 5px;
 }
+
 div#master-volume-holder {
     position: absolute;
     top: 10px;
     left: 120px;
 }