Clean up ChunkedUpdateDrawingAreaProxy
[WebKit-https.git] / Tools / Scripts / webkitpy / tool / commands / data / rebaselineserver / main.css
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 }