1body {
2  font-family: Helvetica, Arial, sans-serif;
3  font-size: 12px;
4  /* do not increase min-width as some may use split screens */
5  min-width: 800px;
6  color: #999;
7}
8
9h1 {
10  font-size: 24px;
11  color: black;
12}
13
14h2 {
15  font-size: 16px;
16  color: black;
17}
18
19p {
20  color: black;
21}
22
23a {
24  color: #999;
25}
26
27table {
28  border-collapse: collapse;
29}
30
31/******************************
32 * SUMMARY INFORMATION
33 ******************************/
34#environment td {
35  padding: 5px;
36  border: 1px solid #e6e6e6;
37  vertical-align: top;
38}
39#environment tr:nth-child(odd) {
40  background-color: #f6f6f6;
41}
42#environment ul {
43  margin: 0;
44  padding: 0 20px;
45}
46
47/******************************
48 * TEST RESULT COLORS
49 ******************************/
50span.passed,
51.passed .col-result {
52  color: green;
53}
54
55span.skipped,
56span.xfailed,
57span.rerun,
58.skipped .col-result,
59.xfailed .col-result,
60.rerun .col-result {
61  color: orange;
62}
63
64span.error,
65span.failed,
66span.xpassed,
67.error .col-result,
68.failed .col-result,
69.xpassed .col-result {
70  color: red;
71}
72
73.col-links__extra {
74  margin-right: 3px;
75}
76
77/******************************
78 * RESULTS TABLE
79 *
80 * 1. Table Layout
81 * 2. Extra
82 * 3. Sorting items
83 *
84 ******************************/
85/*------------------
86 * 1. Table Layout
87 *------------------*/
88#results-table {
89  border: 1px solid #e6e6e6;
90  color: #999;
91  font-size: 12px;
92  width: 100%;
93}
94#results-table th,
95#results-table td {
96  padding: 5px;
97  border: 1px solid #e6e6e6;
98  text-align: left;
99}
100#results-table th {
101  font-weight: bold;
102}
103
104/*------------------
105 * 2. Extra
106 *------------------*/
107.logwrapper {
108  max-height: 230px;
109  overflow-y: scroll;
110  background-color: #e6e6e6;
111}
112.logwrapper.expanded {
113  max-height: none;
114}
115.logwrapper.expanded .logexpander:after {
116  content: "collapse [-]";
117}
118.logwrapper .logexpander {
119  z-index: 1;
120  position: sticky;
121  top: 10px;
122  width: max-content;
123  border: 1px solid;
124  border-radius: 3px;
125  padding: 5px 7px;
126  margin: 10px 0 10px calc(100% - 80px);
127  cursor: pointer;
128  background-color: #e6e6e6;
129}
130.logwrapper .logexpander:after {
131  content: "expand [+]";
132}
133.logwrapper .logexpander:hover {
134  color: #000;
135  border-color: #000;
136}
137.logwrapper .log {
138  min-height: 40px;
139  position: relative;
140  top: -50px;
141  height: calc(100% + 50px);
142  border: 1px solid #e6e6e6;
143  color: black;
144  display: block;
145  font-family: "Courier New", Courier, monospace;
146  padding: 5px;
147  padding-right: 80px;
148  white-space: pre-wrap;
149}
150
151div.media {
152  border: 1px solid #e6e6e6;
153  float: right;
154  height: 240px;
155  margin: 0 5px;
156  overflow: hidden;
157  width: 320px;
158}
159
160.media-container {
161  display: grid;
162  grid-template-columns: 25px auto 25px;
163  align-items: center;
164  flex: 1 1;
165  overflow: hidden;
166  height: 200px;
167}
168
169.media-container--fullscreen {
170  grid-template-columns: 0px auto 0px;
171}
172
173.media-container__nav--right,
174.media-container__nav--left {
175  text-align: center;
176  cursor: pointer;
177}
178
179.media-container__viewport {
180  cursor: pointer;
181  text-align: center;
182  height: inherit;
183}
184.media-container__viewport img,
185.media-container__viewport video {
186  object-fit: cover;
187  width: 100%;
188  max-height: 100%;
189}
190
191.media__name,
192.media__counter {
193  display: flex;
194  flex-direction: row;
195  justify-content: space-around;
196  flex: 0 0 25px;
197  align-items: center;
198}
199
200.collapsible td:not(.col-links) {
201  cursor: pointer;
202}
203.collapsible td:not(.col-links):hover::after {
204  color: #bbb;
205  font-style: italic;
206  cursor: pointer;
207}
208
209.col-result {
210  width: 130px;
211}
212.col-result:hover::after {
213  content: " (hide details)";
214}
215
216.col-result.collapsed:hover::after {
217  content: " (show details)";
218}
219
220#environment-header h2:hover::after {
221  content: " (hide details)";
222  color: #bbb;
223  font-style: italic;
224  cursor: pointer;
225  font-size: 12px;
226}
227
228#environment-header.collapsed h2:hover::after {
229  content: " (show details)";
230  color: #bbb;
231  font-style: italic;
232  cursor: pointer;
233  font-size: 12px;
234}
235
236/*------------------
237 * 3. Sorting items
238 *------------------*/
239.sortable {
240  cursor: pointer;
241}
242.sortable.desc:after {
243  content: " ";
244  position: relative;
245  left: 5px;
246  bottom: -12.5px;
247  border: 10px solid #4caf50;
248  border-bottom: 0;
249  border-left-color: transparent;
250  border-right-color: transparent;
251}
252.sortable.asc:after {
253  content: " ";
254  position: relative;
255  left: 5px;
256  bottom: 12.5px;
257  border: 10px solid #4caf50;
258  border-top: 0;
259  border-left-color: transparent;
260  border-right-color: transparent;
261}
262
263.hidden, .summary__reload__button.hidden {
264  display: none;
265}
266
267.summary__data {
268  flex: 0 0 550px;
269}
270.summary__reload {
271  flex: 1 1;
272  display: flex;
273  justify-content: center;
274}
275.summary__reload__button {
276  flex: 0 0 300px;
277  display: flex;
278  color: white;
279  font-weight: bold;
280  background-color: #4caf50;
281  text-align: center;
282  justify-content: center;
283  align-items: center;
284  border-radius: 3px;
285  cursor: pointer;
286}
287.summary__reload__button:hover {
288  background-color: #46a049;
289}
290.summary__spacer {
291  flex: 0 0 550px;
292}
293
294.controls {
295  display: flex;
296  justify-content: space-between;
297}
298
299.filters,
300.collapse {
301  display: flex;
302  align-items: center;
303}
304.filters button,
305.collapse button {
306  color: #999;
307  border: none;
308  background: none;
309  cursor: pointer;
310  text-decoration: underline;
311}
312.filters button:hover,
313.collapse button:hover {
314  color: #ccc;
315}
316
317.filter__label {
318  margin-right: 10px;
319}
320