1 /* 2 * Copyright (c) 2010 Google Inc. All rights reserved. 3 * 4 * Redistribution and use in source and binary forms, with or without 5 * modification, are permitted provided that the following conditions are 6 * met: 7 * 8 * * Redistributions of source code must retain the above copyright 9 * notice, this list of conditions and the following disclaimer. 10 * * Redistributions in binary form must reproduce the above 11 * copyright notice, this list of conditions and the following disclaimer 12 * in the documentation and/or other materials provided with the 13 * distribution. 14 * * Neither the name of Google Inc. nor the names of its 15 * contributors may be used to endorse or promote products derived from 16 * this software without specific prior written permission. 17 * 18 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 19 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 20 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 21 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 22 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 23 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 29 */ 30 31 body { 32 font-size: 12px; 33 font-family: Helvetica, Arial, sans-serif; 34 padding: 0; 35 margin: 0; 36 } 37 38 .loading { 39 opacity: 0.5; 40 } 41 42 div { 43 margin: 0; 44 } 45 46 a, .link { 47 color: #aaf; 48 text-decoration: underline; 49 cursor: pointer; 50 } 51 52 .link.selected { 53 color: #fff; 54 font-weight: bold; 55 text-decoration: none; 56 } 57 58 #log, 59 #queue { 60 padding: .25em 0 0 .25em; 61 position: absolute; 62 right: 0; 63 height: 200px; 64 overflow: auto; 65 background: #fff; 66 -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5); 67 } 68 69 #log { 70 top: 2em; 71 width: 500px; 72 } 73 74 #queue { 75 bottom: 3em; 76 width: 400px; 77 } 78 79 #queue-select { 80 display: block; 81 width: 390px; 82 } 83 84 #header, 85 #footer { 86 padding: .5em 1em; 87 background: #333; 88 color: #fff; 89 -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); 90 } 91 92 #header { 93 margin-bottom: 1em; 94 } 95 96 #header .divider, 97 #footer .divider { 98 opacity: .3; 99 padding: 0 .5em; 100 } 101 102 #header label, 103 #footer label { 104 padding-right: 1em; 105 color: #ccc; 106 } 107 108 #test-link { 109 margin-right: 1em; 110 } 111 112 #header label span, 113 #footer label span { 114 color: #fff; 115 font-weight: bold; 116 } 117 118 #nav-buttons { 119 white-space: nowrap; 120 } 121 122 #nav-buttons button { 123 background: #fff; 124 border: 0; 125 border-radius: 10px; 126 } 127 128 #nav-buttons button:active { 129 -webkit-box-shadow: 0 0 5px #33f inset; 130 background: #aaa; 131 } 132 133 #nav-buttons button[disabled] { 134 opacity: .5; 135 } 136 137 #controls { 138 float: right; 139 } 140 141 #test-output { 142 border-spacing: 0; 143 border-collapse: collapse; 144 margin: 0 auto; 145 width: 100%; 146 } 147 148 #test-output td, 149 #test-output th { 150 padding: 0; 151 vertical-align: top; 152 } 153 154 #image-outputs img, 155 #image-outputs canvas, 156 #image-outputs #diff-checksum { 157 width: 800px; 158 height: 600px; 159 border: solid 1px #ddd; 160 -webkit-user-select: none; 161 -webkit-user-drag: none; 162 } 163 164 #image-outputs img, 165 #image-outputs canvas { 166 cursor: crosshair; 167 } 168 169 #image-outputs img.loading, 170 #image-outputs canvas.loading { 171 opacity: .5; 172 } 173 174 #image-outputs #actual-image { 175 margin: 0 1em; 176 } 177 178 #test-output #labels th { 179 text-align: center; 180 color: #666; 181 } 182 183 #text-outputs .text-output { 184 height: 600px; 185 width: 800px; 186 overflow: auto; 187 } 188 189 #test-output h2 { 190 border-bottom: solid 1px #ccc; 191 font-weight: bold; 192 margin: 0; 193 background: #eee; 194 } 195 196 #footer { 197 position: absolute; 198 bottom: 0; 199 left: 0; 200 right: 0; 201 margin-top: 1em; 202 } 203 204 #state.needs_rebaseline { 205 color: yellow; 206 } 207 208 #state.rebaseline_failed { 209 color: red; 210 } 211 212 #state.rebaseline_succeeded { 213 color: green; 214 } 215 216 #state.in_queue { 217 color: gray; 218 } 219 220 #current-baselines { 221 font-weight: normal !important; 222 } 223 224 #current-baselines .platform { 225 font-weight: bold; 226 } 227 228 #current-baselines a { 229 color: #ddf; 230 } 231 232 #current-baselines .was-used-for-test { 233 color: #aaf; 234 font-weight: bold; 235 } 236 237 #action-buttons { 238 float: right; 239 } 240 241 #action-buttons .link { 242 margin-right: 1em; 243 } 244 245 #footer button { 246 padding: 1em; 247 } 248 249 #loupe { 250 -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, .5); 251 position: absolute; 252 width: 634px; 253 top: 50%; 254 left: 50%; 255 margin-left: -151px; 256 margin-top: -50px; 257 background: #fff; 258 border-spacing: 0; 259 border-collapse: collapse; 260 } 261 262 #loupe td { 263 padding: 0; 264 border: solid 1px #ccc; 265 } 266 267 #loupe label { 268 color: #999; 269 padding-right: 1em; 270 } 271 272 #loupe span { 273 color: #000; 274 font-weight: bold; 275 } 276 277 #loupe canvas { 278 cursor: crosshair; 279 } 280 281 #loupe #loupe-close { 282 float: right; 283 } 284 285 #loupe #loupe-info { 286 background: #eee; 287 padding: .3em .5em; 288 } 289 290 #loupe #loupe-colors td { 291 text-align: center; 292 } 293 294 #loupe .loupe-container { 295 position: relative; 296 width: 210px; 297 height: 210px; 298 } 299 300 #loupe .center-highlight { 301 position: absolute; 302 width: 10px; 303 height: 10px; 304 top: 50%; 305 left: 50%; 306 margin-left: -5px; 307 margin-top: -5px; 308 outline: solid 1px #999; 309 } 310