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 31body { 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 42div { 43 margin: 0; 44} 45 46a, .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