Make JetStream 2
[WebKit-https.git] / PerformanceTests / JetStream2 / JetStream.css
1 /*
2  * Copyright (C) 2018 Apple 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
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24 */
25
26 body {
27     font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
28     font-size: 14px;
29     line-height: 19px;
30     /* background-image: url(Swoosh.png); */
31     background-repeat: no-repeat;
32     background-position: center -40px;
33     background-size: 3000px auto;
34     padding-bottom: 00px;
35 }
36
37 ::selection {
38     background-color: black;
39     color: white;
40 }
41
42 main {
43     display: block; /* For IE11 */
44     width: 800px;
45     margin: auto;
46     text-align: center;
47     padding: 10px;
48 }
49
50 img {
51     -webkit-user-select: none;
52     -webkit-user-drag: none;
53 }
54
55 #logo {
56     width: 621px;
57     height: 96px;
58     margin-top: 40px;
59 }
60
61 #magic {
62     position: absolute;
63     top: -900px;
64     left: -900px;
65     width: 300px;
66     height: 300px;
67     display: none;
68 }
69
70 /*
71 @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-resolution: 192dpi) {
72     #logo {
73         content: url(JetStream-Logo@2x.png);
74     }
75
76     body {
77         background-image: url(Swoosh@2x.png);
78     }
79 }
80 */
81
82 p.summary {
83     margin: 18px auto 5px;
84     background-image: -webkit-linear-gradient(right, white 70%, rgba(255, 255, 255, 0));
85     background-image: -moz-linear-gradient(right, white 70%, rgba(255, 255, 255, 0));
86     background-image: linear-gradient(to right, white 70%, rgba(255, 255, 255, 0));
87     padding: 15px 125px 0;
88     text-align: center;
89 }
90
91 p.summary + p.summary {
92     padding-top: 5px;
93     margin-top: 5px;
94 }
95
96 p.summary:empty {
97     display: none;
98 }
99
100 h1 {
101     color: black;
102     text-align: center;
103     font-size: 54px;
104 }
105
106 p {
107     text-align: left;
108     text-indent: 20px;
109 }
110
111 p:first-of-type {
112     text-indent: 0;
113 }
114
115 dt {
116     margin-top: 10px;
117     font-weight: bold;
118     text-align: left;
119 }
120
121 dd {
122     text-align: left;
123     padding: 10px 20px;
124     margin: 0;
125 }
126
127 #status {
128     margin-top: 20px;
129 }
130
131 #status {
132     height: 20px;
133 }
134
135 #status a:link {
136     font-weight: bold;
137 }
138
139 #result-summary:empty {
140     display: none;
141 }
142
143 #result-summary {
144         margin-top: 20px;
145 }
146
147 #result-summary label {
148     font-weight: bold;
149 }
150
151 #result-summary .score {
152         font-weight: bold;
153     font-size: 40px;
154         line-height: 40px;
155     color: black;
156 }
157
158 #result-summary .score .interval {
159         display: block;
160         font-size: 16px;
161         line-height: 16px;
162         font-weight: normal;
163 }
164
165 .interval {
166     opacity: 0.75;
167 }
168
169 a:link, a:visited {
170     color: black;
171     text-decoration: none;
172 }
173
174 a:link:hover {
175     text-decoration: underline;
176 }
177
178 table {
179     border-spacing: 0;
180     border-collapse: collapse;
181     margin-top: 15px;
182     width: 100%;
183     table-layout: fixed;
184 }
185
186 td, th {
187     padding: 4px 8px;
188 }
189
190 th {
191     font-size: 12px;
192 }
193
194 tr:first-child > th:nth-child(even) {
195     width: px;
196 }
197
198 tr:nth-child(even):not(:first-child, .benchmark-running) {
199     background-color: rgb(237, 237, 237);
200 }
201
202 .result {
203     white-space: nowrap;
204 }
205
206 .benchmark-running {
207     background-color: black;
208     color: white;
209 }
210
211 :not(.benchmark-running) .result {
212     color: black;
213 }
214
215 .benchmark-running .result {
216     color: white;
217 }
218
219 /*
220 .result .benchmark-running {
221     color: red;
222 }
223 */
224
225 .benchmark-name {
226     white-space: nowrap;
227     text-align: left;
228 }
229
230 .result.category,
231 .benchmark-name.category {
232     font-weight: bold;
233 }
234
235 .benchmark-name:not(.category):not(.geometric-mean) {
236     text-indent: 0.5em;
237 }
238
239 .geometric-mean {
240     font-weight: bold;
241 }
242
243 .benchmark-name:not(:first-child) {
244     border-left: 15px solid white;
245 }
246
247 .benchmark-name a:link,
248 .benchmark-name a:visited {
249     color: black;
250 }
251
252 .highlighted-result {
253     background-color: black;
254     color: white;
255 }