annotate css/core.css @ 2346:5f1e2b66d8bb

Fix for #62 #63. No longer calculating left justification, using table to align content into cells.
author Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk>
date Mon, 16 May 2016 10:46:31 +0100
parents 9239f1d74f01
children 76a4878d0f1f
rev   line source
nicholas@2224 1 /* structure.css
nicholas@2224 2 * Define the structure for classes and objects in HTML
nicholas@2224 3 */
nicholas@2224 4
nicholas@2224 5 div.title {
nicholas@2224 6 width: 100%;
nicholas@2224 7 height: 50px;
nicholas@2224 8 margin-bottom: 10px;
nicholas@2224 9 font-size: 2em;
nicholas@2224 10 }
nicholas@2224 11
nicholas@2224 12 div.indicator-box {
nicholas@2224 13 position: absolute;
nicholas@2224 14 left: 150px;
nicholas@2224 15 top: 10px;
nicholas@2224 16 width: 300px;
nicholas@2224 17 height: 60px;
nicholas@2224 18 padding: 20px;
nicholas@2224 19 border-radius: 10px;
nicholas@2224 20 background-color: rgb(100,200,200);
nicholas@2224 21 }
nicholas@2224 22
nicholas@2224 23 div.comment-div {
nicholas@2224 24 border:1px solid #444444;
nicholas@2224 25 max-width: 600px;
nicholas@2224 26 min-width: 400px;
nicholas@2224 27 float: left;
nicholas@2224 28 margin: 5px 10px 5px 5px;
nicholas@2224 29 height: 90px;
nicholas@2224 30 border-radius: 10px;
nicholas@2224 31 }
nicholas@2224 32
nicholas@2224 33 div.comment-div span {
nicholas@2224 34 margin-left: 15px;
nicholas@2224 35 }
nicholas@2224 36
nicholas@2224 37 div.popupHolder {
nicholas@2224 38 width: 500px;
nicholas@2224 39 min-height: 250px;
nicholas@2224 40 max-height: 400px;
nicholas@2224 41 background-color: #fff;
nicholas@2224 42 border-radius: 10px;
nicholas@2224 43 box-shadow: 0px 0px 50px #000;
nicholas@2297 44 z-index: 10;
giuliomoro@2339 45 position: fixed;
nicholas@2224 46 }
nicholas@2224 47
nicholas@2224 48 div#popupContent {
nicholas@2224 49 margin-top: 20px;
nicholas@2224 50 margin-bottom: 35px;
giuliomoro@2339 51 overflow: auto;
nicholas@2224 52 }
nicholas@2224 53
nicholas@2285 54 div#popupTitleHolder {
nicholas@2224 55 width: inherit;
nicholas@2224 56 min-height: 25px;
nicholas@2224 57 max-height: 250px;
nicholas@2224 58 overflow: auto;
nicholas@2224 59 margin-bottom: 5px;
giuliomoro@2339 60 padding: 8px;
nicholas@2344 61 text-align: center;
giuliomoro@2339 62 }
giuliomoro@2339 63
giuliomoro@2339 64 #popupTitle {
giuliomoro@2339 65 white-space: pre-line;
nicholas@2224 66 }
nicholas@2224 67
nicholas@2224 68 div#popupResponse {
nicholas@2224 69 width: inherit;
nicholas@2224 70 min-height: 50px;
nicholas@2224 71 max-height: 320px;
nicholas@2224 72 overflow: auto;
nicholas@2224 73 position: relative;
nicholas@2224 74 }
nicholas@2224 75
nicholas@2224 76 button.popupButton {
nicholas@2224 77 /* Button for popup window
nicholas@2224 78 */
nicholas@2224 79 width: 50px;
nicholas@2224 80 height: 25px;
nicholas@2224 81 position: absolute;
nicholas@2224 82 border-radius: 5px;
nicholas@2224 83 border: #444;
nicholas@2224 84 border-width: 1px;
nicholas@2224 85 border-style: solid;
nicholas@2224 86 background-color: #fff;
nicholas@2224 87 }
nicholas@2224 88
nicholas@2224 89 div.popup-option-checbox {
nicholas@2224 90 /* Popup window checkbox */
nicholas@2224 91 padding: 5px;
nicholas@2224 92 width: fit-content;
nicholas@2224 93 width: -moz-fit-content;
nicholas@2224 94 width: -webkit-fit-content;
nicholas@2224 95 }
nicholas@2224 96
nicholas@2224 97 div.popup-option-checbox input{
nicholas@2224 98 /* Popup window checkbox */
nicholas@2224 99 margin-right: 15px;
nicholas@2224 100 }
nicholas@2224 101
nicholas@2346 102 table.popup-option-list {
nicholas@2346 103 margin: auto;
nicholas@2346 104 }
nicholas@2346 105
nicholas@2346 106 table.popup-option-list tr {
nicholas@2346 107 padding: 5px;
nicholas@2346 108 }
nicholas@2346 109
nicholas@2346 110 table.popup-option-list tr td {
nicholas@2346 111 padding: 5px;
nicholas@2346 112 }
nicholas@2346 113
nicholas@2224 114 button#popup-proceed {
nicholas@2224 115 bottom: 10px;
nicholas@2224 116 right: 10px;
nicholas@2224 117 }
nicholas@2224 118
nicholas@2224 119 button#popup-previous {
nicholas@2224 120 bottom: 10px;
nicholas@2224 121 left: 10px;
nicholas@2224 122 }
nicholas@2224 123
nicholas@2224 124 div.testHalt {
nicholas@2224 125 /* Specify any colouring during the test halt for pre/post questions */
nicholas@2224 126 background-color: rgba(0,0,0,0.5);
nicholas@2224 127 /* Don't mess with this bit */
nicholas@2297 128 z-index: 9;
nicholas@2224 129 width: 100%;
nicholas@2224 130 height: 100%;
nicholas@2297 131 position: fixed;
nicholas@2224 132 left: 0px;
nicholas@2224 133 top: 0px;
nicholas@2224 134 }
nicholas@2224 135
nicholas@2224 136 button.outside-reference {
nicholas@2224 137 width:120px;
nicholas@2224 138 height:20px;
nicholas@2224 139 margin-bottom:5px;
nicholas@2224 140 position: absolute;
nicholas@2224 141 }
nicholas@2224 142
nicholas@2224 143 textarea.trackComment {
nicholas@2224 144 max-width: 594px;
nicholas@2224 145 min-width: 350px;
nicholas@2224 146 max-height: 60px;
nicholas@2224 147 resize: none;
nicholas@2224 148 }
nicholas@2224 149
nicholas@2224 150 div.playhead {
nicholas@2224 151 width: 500px;
nicholas@2224 152 height: 50px;
nicholas@2224 153 background-color: #eee;
nicholas@2224 154 border-radius: 10px;
nicholas@2224 155 padding: 10px;
nicholas@2224 156 }
nicholas@2224 157
nicholas@2224 158 div.playhead-scrub-track {
nicholas@2224 159 width: 100%;
nicholas@2224 160 height: 10px;
nicholas@2224 161 border-style: solid;
nicholas@2224 162 border-width: 1px;
nicholas@2224 163 }
nicholas@2224 164
nicholas@2224 165 div#playhead-scrubber {
nicholas@2224 166 width: 10px;
nicholas@2224 167 height: 10px;
nicholas@2224 168 position: relative;
nicholas@2224 169 background-color: #000;
nicholas@2224 170 }
nicholas@2224 171
nicholas@2224 172 div#master-volume-holder {
nicholas@2224 173 width: 250px;
nicholas@2224 174 float: left;
nicholas@2224 175 border: black 1px solid;
nicholas@2224 176 border-radius: 5px;
nicholas@2224 177 padding: 5px;
nicholas@2224 178 }
nicholas@2224 179
nicholas@2224 180 input#master-volume-control {
nicholas@2224 181 width: 200px;
nicholas@2224 182 height: 25px;
nicholas@2224 183 float: left;
nicholas@2224 184 margin: 0px;
nicholas@2224 185 padding: 0px;
nicholas@2224 186 }
nicholas@2224 187
nicholas@2224 188 span#master-volume-feedback {
nicholas@2224 189 width: 45px;
nicholas@2224 190 height: 25px;
nicholas@2224 191 margin-left: 5px;
nicholas@2224 192 float: left;
nicholas@2224 193 }
nicholas@2224 194
nicholas@2224 195 div.error-colour {
nicholas@2224 196 background-color: #FF8F8F;
nicholas@2224 197 }
nicholas@2224 198 button.error-colour {
nicholas@2224 199 background-color: #FF8F8F;
nicholas@2224 200 color: black;
nicholas@2224 201 }
nicholas@2224 202
nicholas@2224 203 div.calibration-holder {
nicholas@2224 204 text-align: center;
nicholas@2224 205 align-content: center;
nicholas@2224 206 height: auto;
nicholas@2224 207 }
nicholas@2224 208
nicholas@2224 209 div.calibration-slider {
nicholas@2224 210 width: 50px;
nicholas@2224 211 margin: 2px;
nicholas@2224 212 text-align: center;
nicholas@2224 213 align-content: center;
nicholas@2224 214 float: left;
nicholas@2224 215 }
nicholas@2224 216
nicholas@2224 217 div.calibration-slider input[type=range][orient=vertical]
nicholas@2224 218 {
nicholas@2224 219 writing-mode: bt-lr; /* IE */
nicholas@2224 220 -webkit-appearance: slider-vertical; /* WebKit */
nicholas@2224 221 width: 8px;
nicholas@2224 222 padding: 0 5px;
nicholas@2224 223 height: 290px;
giuliomoro@2339 224 }