Mercurial > hg > webaudioevaluationtool
annotate interfaces/ABX.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 | 2020be3c592c |
children |
rev | line source |
---|---|
nickjillings@2161 | 1 body { |
nicholas@2538 | 2 /* Set the background colour (note US English spelling) to grey*/ |
nicholas@2538 | 3 background-color: #fff |
nickjillings@2161 | 4 } |
nickjillings@2161 | 5 div.pageTitle { |
nicholas@2538 | 6 width: auto; |
nicholas@2538 | 7 height: 20px; |
nicholas@2538 | 8 margin-top: 20px; |
nickjillings@2161 | 9 } |
nicholas@2538 | 10 div.pageTitle span { |
nicholas@2538 | 11 font-size: 1.5em; |
nickjillings@2161 | 12 } |
nickjillings@2161 | 13 button { |
nicholas@2538 | 14 /* Specify any button structure or style */ |
nicholas@2538 | 15 min-width: 20px; |
nicholas@2538 | 16 background-color: #ddd |
nickjillings@2161 | 17 } |
nickjillings@2161 | 18 button.big-button { |
nicholas@2538 | 19 width: 250px; |
nicholas@2538 | 20 height: 40px; |
nicholas@2538 | 21 font-size: 1.2em; |
nickjillings@2161 | 22 } |
nicholas@3044 | 23 div#submit-holder { |
nicholas@3044 | 24 width: 100%; |
nicholas@3044 | 25 text-align: center; |
nicholas@3044 | 26 } |
nicholas@2772 | 27 div#box-holders { |
nicholas@2772 | 28 width: 100%; |
nicholas@2772 | 29 } |
nicholas@2776 | 30 div#playback-holder { |
nicholas@2776 | 31 float: none; |
nicholas@2772 | 32 } |
nickjillings@2161 | 33 div.comparator-holder { |
nicholas@2538 | 34 width: 260px; |
nicholas@2538 | 35 height: 300px; |
nicholas@2538 | 36 border: black 1px solid; |
nicholas@2538 | 37 padding-top: 5px; |
nickjillings@2161 | 38 margin: 25px; |
nicholas@2772 | 39 display: inline-block; |
nickjillings@2161 | 40 } |
nickjillings@2161 | 41 div.comparator-selector { |
nicholas@2538 | 42 width: 248px; |
nicholas@2538 | 43 height: 250px; |
nicholas@2538 | 44 border: black 1px solid; |
nicholas@2538 | 45 position: relative; |
nicholas@2538 | 46 background-color: #FF0000; |
nickjillings@2161 | 47 border-radius: 20px; |
nicholas@2772 | 48 text-align: center; |
nicholas@2772 | 49 display: block; |
nicholas@2772 | 50 margin: auto; |
nickjillings@2161 | 51 } |
nicholas@2806 | 52 div.comparator-image { |
nicholas@2806 | 53 background-color: rgba(255, 255, 255, 0); |
nicholas@2806 | 54 } |
nicholas@2806 | 55 img.comparator-image { |
nicholas@2806 | 56 width: inherit; |
nicholas@2806 | 57 height: inherit; |
nicholas@2806 | 58 z-index: -1; |
nicholas@2806 | 59 position: absolute; |
nicholas@2806 | 60 display: inline; |
nicholas@2806 | 61 right: 0px; |
nicholas@2806 | 62 } |
nickjillings@2161 | 63 div.disabled { |
nicholas@2538 | 64 background-color: #AAA; |
nickjillings@2161 | 65 } |
nickjillings@2161 | 66 div.selected { |
nicholas@2815 | 67 background-color: rgba(0, 200, 0, 0.4); |
nickjillings@2161 | 68 } |
nicholas@2538 | 69 div.comparator-selector.inactive { |
nicholas@2538 | 70 background-color: yellow !important; |
giuliomoro@2305 | 71 } |
nickjillings@2161 | 72 div.comparator-selector span { |
nicholas@2538 | 73 font-size: 4em; |
nickjillings@2161 | 74 } |
nickjillings@2161 | 75 button.comparator-button { |
nicholas@2538 | 76 width: 250px; |
nicholas@2538 | 77 height: 38px; |
nicholas@2538 | 78 position: relative; |
nicholas@2538 | 79 margin-top: 5px; |
nickjillings@2161 | 80 } |
nickjillings@2161 | 81 div.playhead { |
nickjillings@2161 | 82 margin: 5px; |
nickjillings@2161 | 83 } |
nickjillings@2161 | 84 div#page-count { |
nickjillings@2161 | 85 float: left; |
nickjillings@2161 | 86 margin: 0px 5px; |
nickjillings@2161 | 87 } |