Mercurial > hg > webaudioevaluationtool
annotate interfaces/ape.css @ 3041:0a5f34a5eec6
Implemented #78 for APE. Plus some APE fixes
author | Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk> |
---|---|
date | Tue, 26 Sep 2017 14:02:34 +0100 |
parents | be845c47bdaf |
children |
rev | line source |
---|---|
nickjillings@1341 | 1 /* |
nickjillings@1341 | 2 * Hold any style information for APE interface. Customise if you like to make the interface your own! |
nickjillings@1341 | 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.title { |
nicholas@2538 | 11 /* Specify any colouring for the title */ |
nickjillings@1341 | 12 } |
nickjillings@1341 | 13 div.pageTitle { |
nicholas@2538 | 14 width: auto; |
nicholas@2538 | 15 height: 20px; |
nicholas@2538 | 16 margin-top: 5px; |
nicholas@2538 | 17 margin-bottom: 10px; |
nickjillings@1341 | 18 } |
nicholas@2538 | 19 div.pageTitle span { |
nicholas@2538 | 20 font-size: 1.5em; |
nickjillings@1341 | 21 } |
nickjillings@1341 | 22 button { |
nicholas@2538 | 23 /* Specify any button structure or style */ |
nicholas@2538 | 24 min-width: 20px; |
nicholas@2538 | 25 background-color: #ddd |
nickjillings@1341 | 26 } |
nickjillings@1341 | 27 div.slider { |
nicholas@2538 | 28 /* Specify any structure for the slider holder interface */ |
nicholas@2538 | 29 height: 150px; |
nicholas@2538 | 30 margin: 5px 50px; |
nicholas@2538 | 31 -moz-user-select: -moz-none; |
nicholas@2538 | 32 -khtml-user-select: none; |
nicholas@2538 | 33 -webkit-user-select: none; |
nickjillings@1341 | 34 } |
nickjillings@1341 | 35 div.sliderScale { |
nicholas@2538 | 36 width: 100%; |
nicholas@2538 | 37 min-height: 30px; |
nicholas@2538 | 38 -moz-user-select: -moz-none; |
nicholas@2538 | 39 -khtml-user-select: none; |
nicholas@2538 | 40 -webkit-user-select: none; |
nickjillings@1341 | 41 } |
nickjillings@1341 | 42 div.sliderScale span { |
nicholas@2538 | 43 /* Any formatting of text below scale */ |
nicholas@2538 | 44 font-size: 1.2em; |
nicholas@2538 | 45 min-width: 5px; |
nicholas@2391 | 46 max-width: 100px; |
nicholas@2391 | 47 text-align: center; |
nicholas@2538 | 48 height: 20px; |
nicholas@2538 | 49 position: absolute; |
nickjillings@1341 | 50 } |
nickjillings@1341 | 51 div.track-slider { |
nicholas@2538 | 52 /* Specify any structure for the slider objects */ |
nicholas@2538 | 53 position: absolute; |
nicholas@2538 | 54 height: inherit; |
nicholas@2538 | 55 width: 12px; |
nicholas@2538 | 56 float: left; |
nicholas@2538 | 57 background-color: rgb(100, 200, 100); |
nicholas@2538 | 58 -moz-user-select: -moz-none; |
nicholas@2538 | 59 -khtml-user-select: none; |
nicholas@2538 | 60 -webkit-user-select: none; |
nickjillings@1296 | 61 border: 1px solid black; |
nickjillings@1341 | 62 } |
nicholas@3041 | 63 canvas.tick-canvas { |
nicholas@3041 | 64 z-index: -1; |
nicholas@3041 | 65 position: absolute; |
nicholas@3041 | 66 height: 150px; |
nicholas@3041 | 67 background-color: #eee; |
nicholas@3041 | 68 } |
nicholas@2396 | 69 div#outside-reference-holder { |
nicholas@2396 | 70 display: flex; |
nicholas@2396 | 71 align-content: center; |
nicholas@2396 | 72 justify-content: center; |
nicholas@2396 | 73 margin-bottom: 5px; |
nicholas@2396 | 74 } |
nickjillings@1341 | 75 div.outside-reference { |
nicholas@2538 | 76 width: 120px; |
nicholas@2396 | 77 text-align: center; |
nicholas@2538 | 78 height: 20px; |
nicholas@2538 | 79 background-color: rgb(100, 200, 100); |
nicholas@2396 | 80 position: inherit; |
nicholas@2396 | 81 margin: 0px 5px; |
nickjillings@1341 | 82 } |
nickjillings@1341 | 83 div.track-slider-disabled { |
nicholas@2538 | 84 background-color: rgb(100, 100, 100); |
nickjillings@1341 | 85 } |
nickjillings@1341 | 86 div.track-slider-playing { |
nicholas@2538 | 87 background-color: #FF0000; |
nickjillings@1341 | 88 } |
nickjillings@1341 | 89 div.comment-box-playing { |
nicholas@2538 | 90 background-color: #FFDDDD; |
nickjillings@1341 | 91 } |
nickjillings@1356 | 92 div#master-volume-holder { |
nickjillings@1356 | 93 position: absolute; |
nickjillings@1356 | 94 top: 10px; |
nickjillings@1356 | 95 left: 120px; |
nicholas@2538 | 96 } |
nicholas@2782 | 97 div.imageController { |
nicholas@2782 | 98 align-content: center; |
nicholas@2782 | 99 text-align: center; |
nicholas@2782 | 100 height: 250px; |
nicholas@2782 | 101 } |
nicholas@2782 | 102 div.imageController img { |
nicholas@2782 | 103 max-height: 250px; |
nicholas@2782 | 104 } |