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 .disabled-control { 142 color: #888; 143 } 144 145 #test-output { 146 border-spacing: 0; 147 border-collapse: collapse; 148 margin: 0 auto; 149 width: 100%; 150 } 151 152 #test-output td, 153 #test-output th { 154 padding: 0; 155 vertical-align: top; 156 } 157 158 #image-outputs img, 159 #image-outputs canvas, 160 #image-outputs #diff-checksum { 161 width: 800px; 162 height: 600px; 163 border: solid 1px #ddd; 164 -webkit-user-select: none; 165 -webkit-user-drag: none; 166 } 167 168 #image-outputs img, 169 #image-outputs canvas { 170 cursor: crosshair; 171 } 172 173 #image-outputs img.loading, 174 #image-outputs canvas.loading { 175 opacity: .5; 176 } 177 178 #image-outputs #actual-image { 179 margin: 0 1em; 180 } 181 182 #test-output #labels th { 183 text-align: center; 184 color: #666; 185 } 186 187 #text-outputs .text-output { 188 height: 600px; 189 width: 800px; 190 overflow: auto; 191 } 192 193 #test-output h2 { 194 border-bottom: solid 1px #ccc; 195 font-weight: bold; 196 margin: 0; 197 background: #eee; 198 } 199 200 #footer { 201 position: absolute; 202 bottom: 0; 203 left: 0; 204 right: 0; 205 margin-top: 1em; 206 } 207 208 #state.needs_rebaseline { 209 color: yellow; 210 } 211 212 #state.rebaseline_failed { 213 color: red; 214 } 215 216 #state.rebaseline_succeeded { 217 color: green; 218 } 219 220 #state.in_queue { 221 color: gray; 222 } 223 224 #current-baselines { 225 font-weight: normal !important; 226 } 227 228 #current-baselines .platform { 229 font-weight: bold; 230 } 231 232 #current-baselines a { 233 color: #ddf; 234 } 235 236 #current-baselines .was-used-for-test { 237 color: #aaf; 238 font-weight: bold; 239 } 240 241 #action-buttons { 242 float: right; 243 } 244 245 #action-buttons .link { 246 margin-right: 1em; 247 } 248 249 #footer button { 250 padding: 1em; 251 } 252 253 #loupe { 254 -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, .5); 255 position: absolute; 256 width: 634px; 257 top: 50%; 258 left: 50%; 259 margin-left: -151px; 260 margin-top: -50px; 261 background: #fff; 262 border-spacing: 0; 263 border-collapse: collapse; 264 } 265 266 #loupe td { 267 padding: 0; 268 border: solid 1px #ccc; 269 } 270 271 #loupe label { 272 color: #999; 273 padding-right: 1em; 274 } 275 276 #loupe span { 277 color: #000; 278 font-weight: bold; 279 } 280 281 #loupe canvas { 282 cursor: crosshair; 283 } 284 285 #loupe #loupe-close { 286 float: right; 287 } 288 289 #loupe #loupe-info { 290 background: #eee; 291 padding: .3em .5em; 292 } 293 294 #loupe #loupe-colors td { 295 text-align: center; 296 } 297 298 #loupe .loupe-container { 299 position: relative; 300 width: 210px; 301 height: 210px; 302 } 303 304 #loupe .center-highlight { 305 position: absolute; 306 width: 10px; 307 height: 10px; 308 top: 50%; 309 left: 50%; 310 margin-left: -5px; 311 margin-top: -5px; 312 outline: solid 1px #999; 313 } 314