Web Inspector: Fonts refactoring
[WebKit-https.git] / Source / WebCore / inspector / front-end / networkLogView.css
1 .network-log-grid.data-grid {
2     border: none;
3     position: absolute;
4     top: 0;
5     left: 0;
6     right: 0;
7     bottom: 0;
8 }
9
10 .network-log-grid.data-grid table.data {
11     -webkit-background-size: 1px 82px;
12     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.05)));
13 }
14
15 .network-log-grid.data-grid.small table.data {
16     -webkit-background-size: 1px 42px;
17 }
18
19 .network-log-grid.data-grid td {
20     line-height: 17px;
21     height: 41px;
22     border-right: 1px solid rgb(210, 210, 210);
23     vertical-align: middle;
24 }
25
26 .network-log-grid.data-grid.small td {
27     height: 21px;
28 }
29
30 .network-log-grid.data-grid th {
31     border-bottom: 1px solid rgb(64%, 64%, 64%);
32     height: 30px;
33 }
34
35 .network-log-grid.data-grid.small th {
36     height: 22px;
37 }
38
39 .network-log-grid.data-grid th, .network-log-grid.data-grid th.sort-descending, .network-log-grid.data-grid th.sort-ascending {
40     background: -webkit-gradient(linear, left top, left bottom, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
41 }
42
43 .network-log-grid.data-grid .data-container {
44     top: 31px;
45 }
46
47 .network-log-grid.data-grid.small .data-container {
48     top: 23px;
49 }
50
51 .network-log-grid.data-grid select {
52     -webkit-appearance: none;
53     background-color: transparent;
54     border: none;
55     width: 100%;
56     font-size: inherit;
57     color: inherit;
58 }
59
60 .network-log-grid.data-grid.small tr.offscreen {
61     height: 21px;
62 }
63
64 .network-log-grid.data-grid tr.offscreen {
65     height: 41px;
66 }
67
68 .network-log-grid.data-grid tr.offscreen > td > div {
69     display: none;
70 }
71
72 .network-log-grid.data-grid tr.filler {
73     background-color: white;
74 }
75
76 .network-log-grid.data-grid tr:not(.filler) td.name-column {
77     cursor: pointer;
78 }
79
80 #network-container:not(.brief-mode) .network-log-grid.data-grid td.name-column:hover {
81     text-decoration: underline;
82 }
83
84 .network-log-grid.data-grid.small .network-graph-side {
85     height: 14px;
86 }
87
88 .network-log-grid.data-grid th.sortable:active {
89     background-image: none !important;
90 }
91
92 .network-cell-subtitle {
93     font-weight: normal;
94     color: gray;
95 }
96
97 .network-error-row, .network-error-row .network-cell-subtitle {
98     color: rgb(230, 0, 0);
99 }
100
101 .initiator-column a {
102     color: inherit;
103 }
104
105 .network-log-grid.data-grid tr.selected .network-cell-subtitle {
106     color: white;
107 }
108
109 .network-log-grid tr.highlighted-row {
110     -webkit-animation: "network-row-highlight-fadeout" 2s 0s;
111 }
112
113 @-webkit-keyframes network-row-highlight-fadeout {
114     from {background-color: rgba(56, 121, 217, 1); }
115     to { background-color: rgba(56, 121, 217, 0); }
116 }
117
118 .network-header-subtitle {
119     color: gray;
120 }
121
122 .network-log-grid.data-grid.small .network-cell-subtitle,
123 .network-log-grid.data-grid.small .network-header-subtitle
124 {
125     display: none;
126 }
127
128 /* Resource preview icons */
129
130 .network-log-grid.data-grid .icon {
131     content: url(Images/resourcePlainIcon.png);
132 }
133
134 .network-log-grid.data-grid.small .icon {
135     content: url(Images/resourcePlainIconSmall.png);
136 }
137
138 .network-log-grid.data-grid .network-type-script .icon {
139     content: url(Images/resourceJSIcon.png);
140 }
141
142 .network-log-grid.data-grid.small .network-type-script .icon {
143     content: url(Images/resourceDocumentIconSmall.png);
144 }
145
146 .network-log-grid.data-grid .network-type-document .icon {
147     content: url(Images/resourceDocumentIcon.png);
148 }
149
150 .network-log-grid.data-grid.small .network-type-document .icon {
151     content: url(Images/resourceDocumentIconSmall.png);
152 }
153
154 .network-log-grid.data-grid .network-type-stylesheet .icon {
155     content: url(Images/resourceCSSIcon.png);
156 }
157
158 .network-log-grid.data-grid.small .network-type-stylesheet .icon {
159     content: url(Images/resourceDocumentIconSmall.png);
160 }
161
162 .network-log-grid.data-grid .network-type-image .icon {
163     position: relative;
164     background-image: url(Images/resourcePlainIcon.png);
165     background-repeat: no-repeat;
166     content: "";
167 }
168
169 .network-log-grid.data-grid.small .network-type-image .icon {
170     background-image: url(Images/resourcePlainIconSmall.png);
171     content: "";
172 }
173
174 .network-log-grid.data-grid .icon {
175     float: left;
176     width: 32px;
177     height: 32px;
178     margin-top: 1px;
179     margin-right: 3px;
180 }
181
182 .network-log-grid.data-grid.small .icon {
183     width: 16px;
184     height: 16px;
185 }
186
187 .network-log-grid.data-grid .image-network-icon-preview {
188     position: absolute;
189     margin: auto;
190     top: 3px;
191     bottom: 4px;
192     left: 5px;
193     right: 5px;
194     max-width: 18px;
195     max-height: 21px;
196     min-width: 1px;
197     min-height: 1px;
198 }
199
200 .network-log-grid.data-grid.small .image-network-icon-preview {
201     top: 2px;
202     bottom: 1px;
203     left: 3px;
204     right: 3px;
205     max-width: 8px;
206     max-height: 11px;
207 }
208
209 /* Graph styles */
210
211 .network-graph-side {
212     position: relative;
213     height: 36px;
214     padding: 0;
215     white-space: nowrap;
216     margin-top: 1px;
217     border-top: 1px solid transparent;
218     overflow: hidden;
219 }
220
221 .network-graph-bar-area {
222     position: absolute;
223     top: 0;
224     bottom: 0;
225 }
226
227 .network-graph-bar-area,
228 .network-timeline-grid .resources-dividers,
229 .network-timeline-grid .resources-event-dividers,
230 .network-timeline-grid .resources-dividers-label-bar {
231     right: 12px;
232     left: 12px;
233 }
234
235 .network-graph-label {
236     position: absolute;
237     top: 0;
238     bottom: 0;
239     margin: auto -7px;
240     height: 13px;
241     line-height: 13px;
242     font-size: 90%;
243     color: rgba(0, 0, 0, 0.75);
244     text-shadow: rgba(255, 255, 255, 0.25) 1px 0 0, rgba(255, 255, 255, 0.25) -1px 0 0, rgba(255, 255, 255, 0.333) 0 1px 0, rgba(255, 255, 255, 0.25) 0 -1px 0;
245     z-index: 150;
246     overflow: hidden;
247     text-align: center;
248     opacity: 0;
249     -webkit-transition: opacity 250ms ease-in-out;
250 }
251
252 .network-graph-side:hover .network-graph-label {
253     opacity: 1;
254 }
255
256 .network-graph-label:empty {
257     display: none;
258 }
259
260 .network-graph-label.waiting {
261     margin-right: 5px;
262 }
263
264 .network-graph-label.waiting-right {
265     margin-left: 5px;
266 }
267
268 .network-graph-label.before {
269     color: rgba(0, 0, 0, 0.7);
270     text-shadow: none;
271     text-align: right;
272     margin-right: 2px;
273 }
274
275 .network-graph-label.before::after {
276     padding-left: 2px;
277     height: 6px;
278     content: url(Images/graphLabelCalloutLeft.png);
279 }
280
281 .network-graph-label.after {
282     color: rgba(0, 0, 0, 0.7);
283     text-shadow: none;
284     text-align: left;
285     margin-left: 2px;
286 }
287
288 .network-graph-label.after::before {
289     padding-right: 2px;
290     height: 6px;
291     content: url(Images/graphLabelCalloutRight.png);
292 }
293
294 .network-graph-bar {
295     position: absolute;
296     top: 0;
297     bottom: 0;
298     margin: auto -7px;
299     border-width: 6px 7px;
300     height: 0;
301     min-width: 14px;
302     opacity: 0.65;
303     -webkit-border-image: url(Images/timelinePillGray.png) 7 7 7 7;
304 }
305
306 .network-graph-bar.waiting, .network-graph-bar.waiting-right {
307     opacity: 0.35;
308 }
309
310 /* Resource categories */
311
312
313 .resource-cached .network-graph-bar {
314     -webkit-border-image: url(Images/timelineHollowPillGray.png) 7 7 7 7;
315 }
316
317 .network-type-document .network-graph-bar {
318     -webkit-border-image: url(Images/timelinePillBlue.png) 7 7 7 7;
319 }
320
321 .network-type-document.resource-cached .network-graph-bar {
322     -webkit-border-image: url(Images/timelineHollowPillBlue.png) 7 7 7 7;
323 }
324
325 .network-type-stylesheet .network-graph-bar {
326     -webkit-border-image: url(Images/timelinePillGreen.png) 7 7 7 7;
327 }
328
329 .network-type-stylesheet.resource-cached .network-graph-bar {
330     -webkit-border-image: url(Images/timelineHollowPillGreen.png) 7 7 7 7;
331 }
332
333 .network-type-image .network-graph-bar {
334     -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7;
335 }
336
337 .network-type-image.resource-cached .network-graph-bar {
338     border-image: url(Images/timelineHollowPillPurple.png) 7 7 7 7;
339 }
340
341 .network-type-font .network-graph-bar {
342     -webkit-border-image: url(Images/timelinePillRed.png) 7 7 7 7;
343 }
344
345 .network-type-font.resource-cached .network-graph-bar {
346     -webkit-border-image: url(Images/timelineHollowPillRed.png) 7 7 7 7;
347 }
348
349 .network-type-script .network-graph-bar {
350     -webkit-border-image: url(Images/timelinePillOrange.png) 7 7 7 7;
351 }
352
353 .network-type-script.resource-cached .network-graph-bar {
354     -webkit-border-image: url(Images/timelineHollowPillOrange.png) 7 7 7 7;
355 }
356
357 .network-type-xhr .network-graph-bar {
358     -webkit-border-image: url(Images/timelinePillYellow.png) 7 7 7 7;
359 }
360
361 .network-type-xhr.resource-cached .network-graph-bar {
362     -webkit-border-image: url(Images/timelineHollowPillYellow.png) 7 7 7 7;
363 }
364
365 .network-type-websocket .network-graph-bar {
366     -webkit-border-image: url(Images/timelinePillGray.png) 7 7 7 7;
367 }
368
369 .network-type-websocket.resource-cached .network-graph-bar {
370    -webkit-border-image: url(Images/timelineHollowPillGray.png) 7 7 7 7;
371 }
372
373 .network-dim-cell {
374     color: grey;
375 }
376
377 /* Dividers */
378
379 .network-timeline-grid {
380     position: absolute;
381     top: 0;
382     bottom: 0;
383     left: 0;
384     right: 14px; /* Keep in sync with td.corner width */
385     pointer-events: none;
386 }
387
388 .network-log-grid.data-grid .timeline-column,
389 .network.panel .data-grid th.timeline-column {
390     border-right: none;
391 }
392
393 .data-grid td.timeline-column {
394     padding-left: 0;
395     padding-right: 0;
396 }
397
398 .network-event-divider-padding {
399     position: absolute;
400     width: 8px;
401     top: 0;
402     bottom: 0;
403     pointer-events: auto;
404 }
405
406 .network-event-divider {
407     position: absolute;
408     width: 2px;
409     top: 31px;
410     bottom: 0;
411     z-index: 300;
412 }
413
414 .network-timeline-grid.small .network-event-divider {
415     top: 23px;
416 }
417
418 .network-red-divider {
419     background-color: rgba(255, 0, 0, 0.5);
420 }
421
422 .network-blue-divider {
423     background-color: rgba(0, 0, 255, 0.5);
424 }
425
426 .network-log-grid.data-grid .resources-dividers {
427     z-index: 0;
428 }
429
430 .network-log-grid.data-grid .resources-dividers-label-bar {
431     background-color: transparent;
432     border: none;
433     height: 30px;
434     pointer-events: none;
435 }
436
437 .network-timeline-grid.small .resources-dividers-label-bar {
438     height: 23px;
439 }
440
441 .network-timeline-grid .resources-divider-label {
442     top: 0;
443     margin-top: -5px;
444 }
445
446 .network-timeline-grid .resources-dividers-label-bar .resources-divider {
447     top: 23px;
448 }
449
450 .network-timeline-grid.small .resources-dividers-label-bar .resources-divider {
451     top: 15px;
452 }
453
454 .network-timeline-grid .resources-divider.first .resources-divider-label {
455     display: none;
456 }
457
458 .network-timeline-grid .resources-dividers-label-bar .resources-divider.first {
459     background-color: transparent;
460 }
461
462 /* Filters */
463
464 .network-log-grid.data-grid table.data tr.revealed.network-item {
465     display: none;
466 }
467
468 /* Summary */
469
470 .network-log-grid.data-grid tr.filler td {
471     padding-bottom: 20px !important;
472 }
473
474 .network-log-grid.data-grid .network-summary-bar {
475     position: absolute;
476     left: 0;
477     right: 0;
478     bottom: 0;
479     background-color: rgb(101, 111, 130);
480 }
481
482 .network-log-grid.data-grid .network-summary-bar td {
483     color: white;
484     height: 20px !important;
485     border: none;
486     font-size: 110%;
487     padding: 0 0 0 8px;
488     white-space: pre;
489     overflow : hidden;
490     text-overflow : ellipsis;
491 }
492
493 .network-log-grid.data-grid .network-summary-bar img {
494     vertical-align: middle;
495     padding-right: 8px;
496 }
497
498 #network-container {
499     position: absolute;
500     top: 0;
501     left: 0;
502     bottom: 0;
503     right: 0;
504     width: 100%;
505     height: 100%;
506     border-right: 0 none transparent;
507     overflow-y: auto;
508     overflow-x: hidden;
509 }
510
511 // Brief mode peculiarities.
512 #network-container.brief-mode .network-timeline-grid {
513     display: none;
514 }
515
516 #network-container.brief-mode td,
517 #network-container.brief-mode th {
518     border-right: none;
519 }
520
521 #network-container.brief-mode th.corner {
522     display: none;
523 }
524
525 #network-container.brief-mode .network-log-grid.data-grid .data-grid-resizer {
526     display: none;
527 }
528
529 #network-container.brief-mode .network-timeline-grid {
530     display: none;
531 }
532
533 #network-container:not(.brief-mode) .data-grid tr.selected {
534     background-color: transparent;
535     color: black;
536 }
537
538 #network-container.brief-mode .data-grid .data-container {
539     padding-right: 0;
540 }