Make tables on the new flakiness dashboard sortable
[WebKit-https.git] / Websites / test-results / main.css
1 #testName {
2     width: 99%;
3     font-size: 1em;
4     outline: none;
5     border: 1px solid #ccc;
6     border-radius: 5px;
7     padding: 5px;
8 }
9
10 .actionBar {
11
12 }
13
14 .testResults {
15     border: 1px solid #ccc;
16     border-radius: 5px;
17     padding: 5px;
18     margin: 10px 0px;
19     position: relative;
20 }
21
22 .closeButton {
23     position: absolute;
24     right: 5px;
25     top: 5px;
26     width: 1em;
27     height: 1em;
28     stroke: #999;
29 }
30
31 .resultsTable {
32     font-size: small;
33     border-collapse: collapse;
34     border: 0px solid #fff;
35     padding: 0;
36     margin: 0;
37 }
38
39 .resultsTable caption {
40     font-size: large;
41     font-weight: normal;
42     text-align: left;
43     margin-bottom: 0.3em;
44     white-space: pre;
45 }
46
47 .resultsTable thead th {
48     font-weight: bold;
49 }
50
51 .resultsTable td,
52 .resultsTable th {
53     white-space: pre;
54     border: 0px solid #fff;
55     padding: 0 0.5em;
56     margin: 0;
57 }
58
59 .resultsTable th,
60 .resultsTable .passingRate {
61     text-align: left;
62     font-weight: normal;
63     padding-right: 10px;
64 }
65
66 .resultsTable th {
67     width: 15em;
68 }
69
70 .resultsTable .passingRate {
71     width: 3em;
72 }
73
74 .resultsTable .resultCell {
75     display: inline-block;
76     padding: 0.2em 0.2em;
77     vertical-align: bottom;
78 }
79
80 .resultsTable thead {
81     cursor: pointer;
82 }
83
84 .resultsTable th {
85     background-repeat: no-repeat;
86     background-position: right 10px center;
87 }
88
89 .resultsTable th.headerSortUp {
90     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6'><polygon points='0,0 8,0 4,6' fill='#999'/></svg>");
91 }
92
93 .resultsTable th.headerSortDown {
94     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><polygon points='0,6 8,6 4,0' fill='#999'/></svg>");
95 }
96
97 .resultsTable tbody tr:hover {
98     background-color: #eee;
99 }
100
101 .resultsTable a {
102     color: #00f;
103     text-shadow: none;
104     text-decoration: underline;
105 }
106
107 .resultsTable a:visited {
108     color: #006;
109 }
110
111 .resultsTable span a {
112     display: block;
113     width: 1.5em;
114     height: 2.5em;
115     border-radius: 5px;
116     font-size: 0.7em;
117     text-align: center;
118     line-height: 2.5em;
119     padding: 0.1em;
120     color: inherit;
121     text-decoration: none;
122 }
123
124 .resultsTable .PASS a {
125     background-color: #0c3;
126 }
127
128 .resultsTable .TEXT a {
129     background-color: #c33;
130 }
131
132 .resultsTable .IMAGE a {
133     background-color: #fc3;
134 }
135
136 .resultsTable .TEXT.PASS a {
137     background-color: #cf3;
138 }
139
140 .resultsTable .CRASH a {
141     background-color: #f00;
142 }
143
144 .resultsTable .TIMEOUT a {
145     background-color: #000;
146     color: #fff;
147 }
148
149 .candidateWindow {
150     z-index: 999;
151     position: absolute;
152     background: white;
153     color: black;
154     border: 1px solid #ccc;
155     border-radius: 5px;
156     margin: 5px 0 0 0;
157     padding: 5px;
158     font-size: 1em;
159     list-style: none;
160 }
161
162 .candidateWindow em {
163     background-color: #ccc;
164     font-style: normal;
165 }
166
167 .candidateWindow .selected {
168     background-color: #0cf;
169     color: white;
170 }
171
172 #tooltipContainer {
173     position: absolute;
174 }
175
176 .tooltip {
177     position: relative;
178     border-radius: 5px;
179     padding: 5px;
180     opacity: 0.9;
181     background: #333;
182     color: #eee;
183     font-size: small;
184     line-height: 130%;
185 }
186
187 .tooltip:after {
188     position: absolute;
189     width: 0;
190     height: 0;
191     left: 50%;
192     margin-left: -9px;
193     bottom: -19px;
194     content: "";
195     display: block;
196     border-style: solid;
197     border-width: 10px;
198     border-color: #333 transparent transparent transparent;
199 }
200
201 .tooltip ul,
202 .tooltip li {
203     padding: 0;
204     margin: 0;
205     list-style: none;
206 }
207
208 .tooltip a {
209     color: white;
210     text-shadow: none;
211     text-decoration: underline;
212 }