react-native-devtools-frontend/front_end/network/networkTimingTable.css

/*
 * Copyright 2017 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

.network-timing-table {
    width: 380px;
    border-spacing: 0;
    padding-left: 10px;
    padding-right: 10px;
    line-height: initial;
}

.network-timing-start {
    border-top: 5px solid transparent;
}

.network-timing-start th span.network-timing-hidden-header {
    height: 1px;
    width: 1px;
    position: absolute;
    overflow: hidden;
}

.network-timing-table-header td, .network-timing-footer td {
    border-top: 10px solid transparent;
}

.network-timing-table-header td {
    color: #737373;
}

.network-timing-table-header td:last-child {
    text-align: right;
}

table.network-timing-table > tr:not(.network-timing-table-header):not(.network-timing-footer) > td:first-child {
    padding-left: 12px;
}

.network-timing-table col.labels {
    width: 156px;
}

.network-timing-table col.duration {
    width: 80px;
}

.network-timing-table td {
    padding: 4px 0;
}

.network-timing-table td.caution {
    font-weight: bold;
    color: rgb(255, 128, 0);
    padding: 2px 0;
}

.network-timing-table hr.break {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, #eee, #bbb, #eee);
}

.network-timing-footer td:last-child {
    font-weight: bold;
    text-align: right;
}

.network-timing-row {
    position: relative;
    height: 15px;
}

.network-timing-bar {
    position: absolute;
    min-width: 1px;
    top: 0;
    bottom: 0;
}

.network-timing-bar-title {
    color: #222;
    white-space: nowrap;
    text-align: right;
}

.network-timing-bar.queueing,
.network-timing-bar.total {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.network-timing-bar.blocking, -theme-preserve {
    background-color: #AAAAAA;
}

.network-timing-bar.proxy, -theme-preserve {
    background-color: #A1887F;
}

.network-timing-bar.dns, -theme-preserve {
    background-color: #009688;
}

.network-timing-bar.connecting,
.network-timing-bar.serviceworker,
.network-timing-bar.serviceworker-preparation, -theme-preserve {
    background-color: #FF9800;
}

.network-timing-bar.ssl, -theme-preserve {
    background-color: #9C27B0;
}

.network-timing-bar.sending, -theme-preserve {
    background-color: #B0BEC5;
}

.network-timing-bar.waiting, -theme-preserve {
    background-color: #00C853;
}

.network-timing-bar.receiving, -theme-preserve,
.network-timing-bar.receiving-push, -theme-preserve {
    background-color: #03A9F4;
}

.network-timing-bar.push, -theme-preserve {
    background-color: #8CDBff;
}

.network-timing-bar.server-timing, -theme-preserve {
    background-color: #ddd;
}

.network-timing-table td.network-timing-metric {
    white-space: nowrap;
    max-width: 150px;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.network-timing-bar.proxy,
.network-timing-bar.dns,
.network-timing-bar.ssl,
.network-timing-bar.connecting,
.network-timing-bar.blocking {
    height: 10px;
    margin: auto;
}

@media (forced-colors: active) {
    .network-timing-bar.blocking, -theme-preserve,
    .network-timing-bar.proxy, -theme-preserve,
    .network-timing-bar.dns, -theme-preserve,
    .network-timing-bar.connecting,
    .network-timing-bar.serviceworker,
    .network-timing-bar.serviceworker-preparation, -theme-preserve,
    .network-timing-bar.ssl, -theme-preserve,
    .network-timing-bar.sending, -theme-preserve,
    .network-timing-bar.waiting, -theme-preserve,
    .network-timing-bar.receiving, -theme-preserve,
    .network-timing-bar.receiving-push, -theme-preserve,
    .network-timing-bar.push, -theme-preserve,
    .network-timing-bar.server-timing, -theme-preserve {
        forced-color-adjust: none;
    }
    .network-timing-table-header td, .network-timing-footer td {
        forced-color-adjust: none;
        color: ButtonText;;
    }
}