Mercurial > hg > webaudioevaluationtool
annotate interfaces/AB.css @ 3141:335bc77627e0 tip
fixing discrete interface to allow labels to display
author | Dave Moffat <me@davemoffat.com> |
---|---|
date | Mon, 26 Jul 2021 12:15:24 +0100 |
parents | f83b364d3d4b |
children |
rev | line source |
---|---|
nickjillings@1341 | 1 body { |
nicholas@2538 | 2 /* Set the background colour (note US English spelling) to grey*/ |
nicholas@2538 | 3 background-color: #fff |
nickjillings@1341 | 4 } |
nicholas@2768 | 5 div#feedbackHolder { |
nicholas@2768 | 6 display: flex; |
nicholas@2768 | 7 flex-direction: column; |
nicholas@2768 | 8 } |
nickjillings@1341 | 9 div.pageTitle { |
nicholas@2538 | 10 width: auto; |
nicholas@2538 | 11 height: 20px; |
nicholas@2538 | 12 margin: 10px 0px; |
nickjillings@1341 | 13 } |
nicholas@2538 | 14 div.pageTitle span { |
nicholas@2538 | 15 font-size: 1.5em; |
nickjillings@1341 | 16 } |
nickjillings@1341 | 17 button { |
nicholas@2538 | 18 /* Specify any button structure or style */ |
nicholas@2538 | 19 min-width: 20px; |
nicholas@2538 | 20 background-color: #ddd |
nickjillings@1341 | 21 } |
nickjillings@1341 | 22 button.big-button { |
nicholas@2538 | 23 width: 250px; |
nicholas@2538 | 24 height: 40px; |
nicholas@2538 | 25 font-size: 1.2em; |
nickjillings@1341 | 26 } |
nicholas@3047 | 27 div#submit-holder { |
nicholas@3047 | 28 width: 100%; |
nicholas@3047 | 29 text-align: center; |
nicholas@3047 | 30 } |
nickjillings@2177 | 31 div.interface-buttons { |
nickjillings@2177 | 32 height: 40px; |
nickjillings@2177 | 33 } |
nicholas@2396 | 34 div#outside-reference-holder { |
nicholas@2396 | 35 display: flex; |
nicholas@2396 | 36 align-content: center; |
nicholas@2396 | 37 justify-content: center; |
nicholas@2396 | 38 margin-bottom: 5px; |
nicholas@2396 | 39 } |
nickjillings@2177 | 40 button.outside-reference { |
nicholas@2396 | 41 height: 40px; |
nicholas@2396 | 42 position: inherit; |
nicholas@2396 | 43 margin: 0px 5px; |
nickjillings@2177 | 44 } |
nicholas@2768 | 45 div#box-holders { |
nicholas@2768 | 46 width: 100%; |
nicholas@2771 | 47 text-align: center; |
nicholas@2768 | 48 } |
nicholas@2776 | 49 div#playback-holder { |
nicholas@2776 | 50 float: none; |
nicholas@2768 | 51 } |
nickjillings@2110 | 52 div.comparator-holder { |
nicholas@2538 | 53 width: 260px; |
nicholas@2538 | 54 height: 300px; |
nicholas@2538 | 55 border: black 1px solid; |
nicholas@2538 | 56 padding-top: 5px; |
nickjillings@1341 | 57 margin: 25px; |
nicholas@2770 | 58 display: inline-block; |
nickjillings@1341 | 59 } |
nickjillings@2110 | 60 div.comparator-selector { |
nicholas@2538 | 61 width: 248px; |
nicholas@2538 | 62 height: 250px; |
nicholas@2538 | 63 border: black 1px solid; |
nicholas@2538 | 64 position: relative; |
nicholas@2538 | 65 background-color: #FF0000; |
nickjillings@1378 | 66 border-radius: 20px; |
nicholas@2768 | 67 text-align: center; |
nicholas@2770 | 68 display: block; |
nicholas@2770 | 69 margin: auto; |
nickjillings@1341 | 70 } |
n@2794 | 71 div.comparator-image { |
nicholas@2815 | 72 background-color: rgba(255, 255, 255, 0); |
n@2794 | 73 } |
n@2794 | 74 img.comparator-image { |
n@2794 | 75 width: inherit; |
n@2794 | 76 height: inherit; |
n@2794 | 77 z-index: -1; |
n@2794 | 78 position: absolute; |
n@2794 | 79 display: inline; |
n@2794 | 80 right: 0px; |
n@2794 | 81 } |
nickjillings@1341 | 82 div.disabled { |
nicholas@2538 | 83 background-color: #AAA; |
nickjillings@1341 | 84 } |
nickjillings@1341 | 85 div.selected { |
nicholas@2815 | 86 background-color: rgba(0, 200, 0, 0.4); |
nickjillings@1341 | 87 } |
nickjillings@2110 | 88 div.comparator-selector span { |
nicholas@2538 | 89 font-size: 4em; |
nickjillings@1341 | 90 } |
nickjillings@2110 | 91 button.comparator-button { |
nicholas@2538 | 92 width: 250px; |
nicholas@2538 | 93 height: 38px; |
nicholas@2538 | 94 position: relative; |
nicholas@2538 | 95 margin-top: 5px; |
nickjillings@1341 | 96 } |
nickjillings@1356 | 97 div.playhead { |
nickjillings@1356 | 98 margin: 5px; |
nickjillings@1356 | 99 } |
nickjillings@1356 | 100 div#page-count { |
nickjillings@1356 | 101 float: left; |
nickjillings@1356 | 102 margin: 0px 5px; |
nickjillings@1356 | 103 } |