1 .network-log-grid.data-grid {
11 .network-log-grid.data-grid table.data {
12 -webkit-background-size: 1px 82px;
13 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)));
17 .network-log-grid.data-grid.small table.data {
18 -webkit-background-size: 1px 42px;
21 .network-log-grid.data-grid td {
24 border-right: 1px solid rgb(210, 210, 210);
25 vertical-align: middle;
28 .network-log-grid.data-grid.small td {
32 .network-log-grid.data-grid th {
33 border-bottom: 1px solid rgb(64%, 64%, 64%);
39 .network-log-grid.data-grid.small th {
43 .network-log-grid.data-grid th, .network-log-grid.data-grid th.sort-descending, .network-log-grid.data-grid th.sort-ascending {
44 background: -webkit-gradient(linear, left top, left bottom, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
47 .network-log-grid.data-grid .data-container {
51 .network-log-grid.data-grid.small .data-container {
55 .network-log-grid.data-grid select {
56 -webkit-appearance: none;
57 background-color: transparent;
64 .network-log-grid.data-grid.small tr.offscreen {
68 .network-log-grid.data-grid tr.offscreen {
72 .network-log-grid.data-grid tr.offscreen td {
76 .network-log-grid.data-grid tr.filler {
77 background-color: white;
80 .network-log-grid.data-grid tr:not(.filler) td.name-column {
85 #network-container:not(.brief-mode) .network-log-grid.data-grid td.name-column:hover {
86 text-decoration: underline;
89 .network-log-grid.data-grid td.method-column,
90 .network-log-grid.data-grid td.status-column,
91 .network-log-grid.data-grid td.type-column,
92 .network-log-grid.data-grid td.initiator-column,
93 .network-log-grid.data-grid td.size-column,
94 .network-log-grid.data-grid td.time-column {
95 background-color: rgba(0, 0, 0, 0.07);
98 .network-log-grid.data-grid td.size-column,
99 .network-log-grid.data-grid td.time-column {
103 .network-log-grid.data-grid.small .network-graph-side {
107 .network-log-grid.data-grid th.sortable:active {
108 background-image: none !important;
111 .network-cell-subtitle {
116 .network-error-row, .network-error-row .network-cell-subtitle {
117 color: rgb(230, 0, 0);
120 .initiator-column a {
124 .network-log-grid.data-grid tr.selected .network-cell-subtitle {
128 .network-header-subtitle {
132 .network-log-grid.data-grid.small .network-cell-subtitle,
133 .network-log-grid.data-grid.small .network-header-subtitle
138 /* Resource preview icons */
140 .network-log-grid.data-grid .icon {
141 content: url(Images/resourcePlainIcon.png);
144 .network-log-grid.data-grid.small .icon {
145 content: url(Images/resourcePlainIconSmall.png);
148 .network-log-grid.data-grid .network-category-scripts .icon {
149 content: url(Images/resourceJSIcon.png);
152 .network-log-grid.data-grid.small .network-category-scripts .icon {
153 content: url(Images/resourceDocumentIconSmall.png);
156 .network-log-grid.data-grid .network-category-documents .icon {
157 content: url(Images/resourceDocumentIcon.png);
160 .network-log-grid.data-grid.small .network-category-documents .icon {
161 content: url(Images/resourceDocumentIconSmall.png);
164 .network-log-grid.data-grid .network-category-stylesheets .icon {
165 content: url(Images/resourceCSSIcon.png);
168 .network-log-grid.data-grid.small .network-category-stylesheets .icon {
169 content: url(Images/resourceDocumentIconSmall.png);
172 .network-log-grid.data-grid .network-category-images .icon {
174 background-image: url(Images/resourcePlainIcon.png);
175 background-repeat: no-repeat;
179 .network-log-grid.data-grid.small .network-category-images .icon {
180 background-image: url(Images/resourcePlainIconSmall.png);
184 .network-log-grid.data-grid .icon {
192 .network-log-grid.data-grid.small .icon {
197 .network-log-grid.data-grid .image-network-icon-preview {
210 .network-log-grid.data-grid.small .image-network-icon-preview {
221 .network-graph-side {
227 border-top: 1px solid transparent;
231 .network-graph-bar-area {
239 .network-graph-label {
247 color: rgba(0, 0, 0, 0.75);
248 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;
254 -webkit-transition: opacity 250ms ease-in-out;
257 .network-graph-side:hover .network-graph-label {
261 .network-graph-label:empty {
265 .network-graph-label.waiting {
269 .network-graph-label.waiting-right {
273 .network-graph-label.before {
274 color: rgba(0, 0, 0, 0.7);
280 .network-graph-label.before::after {
283 content: url(Images/graphLabelCalloutLeft.png);
286 .network-graph-label.after {
287 color: rgba(0, 0, 0, 0.7);
293 .network-graph-label.after::before {
296 content: url(Images/graphLabelCalloutRight.png);
304 border-width: 6px 7px;
308 -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7;
311 .network-graph-bar.waiting, .network-graph-bar.waiting-right {
315 /* Resource categories */
318 .resource-cached .network-graph-bar {
319 -webkit-border-image: url(Images/timelineHollowPillGray.png) 6 7 6 7;
322 .network-category-documents .network-graph-bar {
323 -webkit-border-image: url(Images/timelinePillBlue.png) 6 7 6 7;
326 .network-category-documents.resource-cached .network-graph-bar {
327 -webkit-border-image: url(Images/timelineHollowPillBlue.png) 6 7 6 7;
330 .network-category-stylesheets .network-graph-bar {
331 -webkit-border-image: url(Images/timelinePillGreen.png) 6 7 6 7;
334 .network-category-stylesheets.resource-cached .network-graph-bar {
335 -webkit-border-image: url(Images/timelineHollowPillGreen.png) 6 7 6 7;
338 .network-category-images .network-graph-bar {
339 -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7;
342 .network-category-images.resource-cached .network-graph-bar {
343 -webkit-border-image: url(Images/timelineHollowPillPurple.png) 6 7 6 7;
346 .network-category-fonts .network-graph-bar {
347 -webkit-border-image: url(Images/timelinePillRed.png) 6 7 6 7;
350 .network-category-fonts.resource-cached .network-graph-bar {
351 -webkit-border-image: url(Images/timelineHollowPillRed.png) 6 7 6 7;
354 .network-category-scripts .network-graph-bar {
355 -webkit-border-image: url(Images/timelinePillOrange.png) 6 7 6 7;
358 .network-category-scripts.resource-cached .network-graph-bar {
359 -webkit-border-image: url(Images/timelineHollowPillOrange.png) 6 7 6 7;
362 .network-category-xhr .network-graph-bar {
363 -webkit-border-image: url(Images/timelinePillYellow.png) 6 7 6 7;
366 .network-category-xhr.resource-cached .network-graph-bar {
367 -webkit-border-image: url(Images/timelineHollowPillYellow.png) 6 7 6 7;
370 .network-category-websockets .network-graph-bar {
371 -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7;
374 .network-category-websockets.resource-cached .network-graph-bar {
375 -webkit-border-image: url(Images/timelineHollowPillGray.png) 6 7 6 7;
384 .network-timeline-grid {
390 pointer-events: none;
393 .network-event-divider-padding {
398 pointer-events: auto;
401 .network-event-divider {
409 .network-timeline-grid.small .network-event-divider {
413 .network-red-divider {
414 background-color: rgba(255, 0, 0, 0.5);
417 .network-blue-divider {
418 background-color: rgba(0, 0, 255, 0.5);
421 .network-log-grid.data-grid .resources-dividers {
425 .network-log-grid.data-grid .resources-dividers-label-bar {
426 background-color: transparent;
429 pointer-events: none;
432 .network-timeline-grid.small .resources-dividers-label-bar {
436 .network-timeline-grid .resources-divider-label {
442 .network-timeline-grid .resources-dividers-label-bar .resources-divider {
446 .network-timeline-grid.small .resources-dividers-label-bar .resources-divider {
450 .network-timeline-grid .resources-divider.first .resources-divider-label {
454 .network-timeline-grid .resources-dividers-label-bar .resources-divider.first {
455 background-color: transparent;
463 .network-log-grid.data-grid table.data tr.revealed.network-item {
467 .network-log-grid.data-grid.filter-all table.data tr.revealed.network-item,
468 .network-log-grid.data-grid.filter-documents table.data tr.revealed.network-category-documents,
469 .network-log-grid.data-grid.filter-stylesheets table.data tr.revealed.network-category-stylesheets,
470 .network-log-grid.data-grid.filter-images table.data tr.revealed.network-category-images,
471 .network-log-grid.data-grid.filter-scripts table.data tr.revealed.network-category-scripts,
472 .network-log-grid.data-grid.filter-xhr table.data tr.revealed.network-category-xhr,
473 .network-log-grid.data-grid.filter-fonts table.data tr.revealed.network-category-fonts,
474 .network-log-grid.data-grid.filter-websockets table.data tr.revealed.network-category-websockets,
475 .network-log-grid.data-grid.filter-other table.data tr.revealed.network-category-other {
481 .network-log-grid.data-grid tr.filler td {
482 padding-bottom: 20px !important;
485 .network-log-grid.data-grid .network-summary-bar {
491 background-color: rgb(101, 111, 130);
494 .network-log-grid.data-grid .network-summary-bar td {
496 height: 20px !important;
503 text-overflow : ellipsis;
506 .network-log-grid.data-grid .network-summary-bar img {
507 vertical-align: middle;
519 border-right: 0 none transparent;
524 // Brief mode peculiarities.
525 #network-container.brief-mode .network-timeline-grid {
529 #network-container.brief-mode td,
530 #network-container.brief-mode th {
534 #network-container.brief-mode th.corner {
538 #network-container.brief-mode .network-log-grid.data-grid .data-grid-resizer {
542 #network-container.brief-mode .network-timeline-grid {
546 #network-container:not(.brief-mode) .data-grid tr.selected {
547 background-color: transparent;
551 #network-container.brief-mode .data-grid .data-container {