| /* |
| * Copyright (C) 2013 Google Inc. All rights reserved. |
| * |
| * Redistribution and use in source and binary forms, with or without |
| * modification, are permitted provided that the following conditions are |
| * met: |
| * |
| * * Redistributions of source code must retain the above copyright |
| * notice, this list of conditions and the following disclaimer. |
| * * Redistributions in binary form must reproduce the above |
| * copyright notice, this list of conditions and the following disclaimer |
| * in the documentation and/or other materials provided with the |
| * distribution. |
| * * Neither the name of Google Inc. nor the names of its |
| * contributors may be used to endorse or promote products derived from |
| * this software without specific prior written permission. |
| * |
| * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS |
| * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT |
| * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR |
| * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT |
| * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, |
| * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT |
| * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
| * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
| * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
| * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| */ |
| |
| .network-log-grid.data-grid { |
| border: none !important; /* stylelint-disable-line declaration-no-important */ |
| flex: auto; |
| } |
| |
| .network-log-grid.data-grid.no-selection:focus-visible { |
| border: none !important; /* stylelint-disable-line declaration-no-important */ |
| } |
| |
| #network-container { |
| border: 1px solid var(--color-details-hairline); |
| overflow: hidden; |
| } |
| |
| #network-container.grid-focused.no-node-selected:focus-within { |
| border: 1px solid var(--legacy-accent-color); |
| } |
| |
| .network-summary-bar { |
| flex: 0 0 27px; |
| line-height: 27px; |
| padding-left: 5px; |
| background-color: var(--color-background-elevation-1); |
| border-top: 1px solid var(--color-details-hairline); |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| overflow: hidden; |
| user-select: text; |
| } |
| |
| .panel.network .toolbar.network-summary-bar { |
| border-bottom: 0; |
| } |
| |
| .network-summary-bar span[is="dt-icon-label"] { |
| margin-right: 6px; |
| } |
| |
| .network-summary-bar > * { |
| flex: none; |
| } |
| |
| .network-log-grid.data-grid table.data { |
| background: transparent; |
| } |
| |
| .network-log-grid.data-grid td { |
| height: 41px; |
| border-left: 1px solid var(--color-details-hairline); |
| vertical-align: middle; |
| } |
| |
| .network-log-grid.data-grid .corner { |
| display: none; |
| } |
| |
| .network-log-grid.data-grid.small td { |
| height: 21px; |
| } |
| |
| .network-waterfall-header, |
| .network-log-grid.data-grid th { |
| border-bottom: 1px solid var(--color-details-hairline); |
| border-left: 1px solid var(--color-details-hairline); |
| } |
| |
| .network-log-grid.data-grid table.data th { |
| border-bottom: none; |
| } |
| |
| .network-waterfall-header, |
| .network-log-grid.data-grid .header-container { |
| height: 31px; |
| background-color: var(--color-background-elevation-1); |
| } |
| |
| .network-log-grid.data-grid .data-container { |
| top: 31px; |
| } |
| |
| .network-waterfall-header.small, |
| .network-log-grid.data-grid.small .header-container { |
| height: 27px; |
| } |
| |
| .network-log-grid.data-grid.small .data-container { |
| top: 27px; |
| } |
| |
| .network-log-grid.data-grid select { |
| appearance: none; |
| border: none; |
| width: 100%; |
| color: inherit; |
| } |
| |
| .network-log-grid.data-grid .name-column { |
| cursor: pointer; |
| } |
| |
| .network-log-grid.data-grid .waterfall-column { |
| padding: 1px 0; |
| } |
| |
| .network-log-grid.data-grid .waterfall-column .sort-order-icon-container { |
| right: 15px; |
| pointer-events: none; |
| } |
| |
| .network-log-grid.data-grid th.sortable:active { |
| background-image: none !important; /* stylelint-disable-line declaration-no-important */ |
| } |
| |
| .network-cell-subtitle { |
| font-weight: normal; |
| color: var(--color-text-secondary); |
| } |
| |
| .network-badge { |
| margin-right: 4px; |
| } |
| |
| .status-column .devtools-link { |
| color: inherit; |
| } |
| |
| .initiator-column .devtools-link { |
| color: inherit; |
| } |
| |
| .network-error-row, |
| .network-error-row .network-cell-subtitle { |
| /* stylelint-disable-next-line declaration-no-important */ |
| color: var(--color-red) !important; |
| } |
| |
| .network-log-grid.data-grid tr.selected.network-error-row, |
| .network-log-grid.data-grid tr.selected.network-error-row .network-cell-subtitle, |
| .network-log-grid.data-grid tr.selected.network-error-row .network-dim-cell, |
| .network-log-grid.data-grid:focus tr.selected.network-error-row .devtools-link, |
| .network-log-grid.data-grid:focus tr.selected.network-error-row, |
| .network-log-grid.data-grid:focus tr.selected.network-error-row .network-cell-subtitle, |
| .network-log-grid.data-grid:focus tr.selected.network-error-row .network-dim-cell { |
| color: var(--color-accent-red); |
| } |
| |
| /* We are using a multitude of different selector specificity rules here, which |
| is incompatible with what stylelint requires as ordering of the rules. */ |
| /* stylelint-disable no-descending-specificity */ |
| |
| .network-log-grid.data-grid tr.selected, |
| .network-log-grid.data-grid tr.selected .network-cell-subtitle, |
| .network-log-grid.data-grid tr.selected .network-dim-cell { |
| color: inherit; |
| } |
| |
| .network-log-grid.data-grid:focus tr.selected, |
| .network-log-grid.data-grid:focus tr.selected .network-cell-subtitle, |
| .network-log-grid.data-grid:focus tr.selected .network-dim-cell { |
| color: var(--legacy-selection-fg-color); |
| } |
| |
| .network-header-subtitle { |
| color: var(--color-text-secondary); |
| } |
| |
| .network-log-grid.data-grid.small .network-cell-subtitle, |
| .network-log-grid.data-grid.small .network-header-subtitle { |
| display: none; |
| } |
| |
| .network-log-grid.data-grid.small tr.selected .network-cell-subtitle-show-inline-when-selected { |
| display: inline; |
| margin-left: 4px; |
| } |
| |
| .network-log-grid tr.highlighted-row { |
| --override-highlight-fade-from: rgb(255 255 120 / 100%); |
| --override-highlight-fade-to: rgb(255 255 120 / 0%); |
| |
| animation: network-row-highlight-fadeout 2s 0s; |
| } |
| /* See comment above why the rules were disabled */ |
| /* stylelint-enable no-descending-specificity */ |
| |
| @keyframes network-row-highlight-fadeout { |
| from { |
| background-color: var(--override-highlight-fade-from); |
| } |
| |
| to { |
| background-color: var(--override-highlight-fade-to); |
| } |
| } |
| |
| /* Resource preview icons */ |
| /* These rules are grouped by type and therefore do not adhere to the ordering of stylelint */ |
| /* stylelint-disable no-descending-specificity, no-duplicate-selectors */ |
| |
| .network-log-grid.data-grid .icon.image { |
| position: relative; |
| } |
| |
| .network-log-grid.data-grid .icon { |
| float: left; |
| width: 32px; |
| height: 32px; |
| margin-top: 1px; |
| margin-right: 3px; |
| } |
| |
| .network-log-grid.data-grid:focus .data-grid-data-grid-node.selected img.icon { |
| filter: brightness(0) invert(1); |
| } |
| |
| .network-log-grid.data-grid:focus .data-grid-data-grid-node.selected [is="ui-icon"].icon-mask { |
| --network-grid-selected-color: #dadce0; |
| --override-icon-mask-background-color: var(--network-grid-selected-color); |
| } |
| |
| .network-log-grid.data-grid .network-error-row.data-grid-data-grid-node img.icon, |
| .network-log-grid.data-grid .network-error-row.data-grid-data-grid-node.selected img.icon { |
| /* This is generated with https://codepen.io/sosuke/pen/Pjoqqp to target var(--color-red) */ |
| filter: brightness(0) saturate(100%) invert(35%) sepia(76%) saturate(1413%) hue-rotate(338deg) brightness(92%) contrast(103%); |
| } |
| |
| .network-log-grid.data-grid.small .icon { |
| margin-top: 0; |
| width: 18px; |
| height: 18px; |
| } |
| |
| .image-network-icon-preview { |
| background: var(--color-image-preview-background); |
| border: 1px solid var(--color-details-hairline); |
| bottom: 0; |
| left: 0; |
| margin: auto; |
| overflow: hidden; |
| right: 0; |
| top: 0; |
| } |
| |
| .network-log-grid.data-grid .image-network-icon-preview { |
| position: absolute; |
| max-width: 18px; |
| max-height: 21px; |
| min-width: 1px; |
| min-height: 1px; |
| } |
| |
| .network-log-grid.data-grid.small .image-network-icon-preview { |
| left: 2px; |
| right: 2px; |
| max-width: 10px; |
| max-height: 12px; |
| } |
| |
| .network-log-grid.data-grid .trailing-link-icon { |
| padding-left: 0.5ex; |
| } |
| /* stylelint-enable no-descending-specificity, no-duplicate-selectors */ |
| /* This is part of the large color block declared above, but should not be |
| extracted out. */ |
| /* stylelint-disable-next-line no-descending-specificity */ |
| .network-dim-cell { |
| color: var(--color-text-secondary); |
| } |
| |
| .network-frame-divider { |
| --override-frame-divider: #fccc49; |
| |
| width: 2px; |
| background-color: var(--override-frame-divider); |
| z-index: 10; |
| visibility: hidden; |
| } |
| |
| .-theme-with-dark-background .network-frame-divider, |
| :host-context(.-theme-with-dark-background) .network-frame-divider { |
| --override-frame-divider: rgb(182 134 3); |
| } |
| |
| #network-container:not(.brief-mode) .data-container { |
| overflow: hidden; |
| } |
| |
| .network-log-grid.data-grid .resources-dividers { |
| z-index: 0; |
| } |
| |
| .network-log-grid.data-grid .resources-dividers-label-bar { |
| background-color: transparent; |
| border: none; |
| height: 30px; |
| pointer-events: none; |
| } |
| |
| .network-log-grid.data-grid span.separator-in-cell { |
| user-select: none; |
| min-width: 1ex; |
| display: inline-block; |
| } |
| |
| .network-status-pane { |
| color: var(--color-text-secondary); |
| background-color: var(--color-background); |
| z-index: 500; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| text-align: center; |
| padding: 0 20px; |
| overflow: auto; |
| } |
| |
| .network-status-pane > .recording-hint { |
| font-size: 14px; |
| text-align: center; |
| line-height: 28px; |
| } |
| |
| .network-waterfall-header { |
| position: absolute; |
| border-left: 0; |
| width: 100%; |
| display: table; |
| z-index: 200; |
| } |
| |
| .network-waterfall-header:hover { |
| background-color: var(--color-background-highlight); |
| } |
| |
| .network-waterfall-header div { |
| display: table-cell; |
| line-height: 14px; |
| margin: auto 0; |
| vertical-align: middle; |
| text-align: left; |
| font-weight: normal; |
| padding: 0 4px; |
| } |
| /* All network-waterfall-header rules are defined here instead of above */ |
| /* stylelint-disable-next-line no-descending-specificity */ |
| .network-waterfall-header .sort-order-icon-container { |
| position: absolute; |
| top: 1px; |
| right: 0; |
| bottom: 1px; |
| display: flex; |
| align-items: center; |
| } |
| |
| .network-waterfall-header .sort-order-icon { |
| align-items: center; |
| margin-right: 4px; |
| margin-bottom: -2px; |
| } |
| |
| .network-frame-group-icon { |
| display: inline-block; |
| margin: -8px -2px; |
| } |
| |
| .network-frame-group-badge { |
| margin-right: 4px; |
| } |
| |
| @media (forced-colors: active) { |
| .network-status-pane > .recording-hint { |
| color: canvastext; |
| } |
| |
| .initiator-column .devtools-link { |
| color: linktext; |
| } |
| |
| /* This is part of the large color block declared above, but should not be |
| extracted out. */ |
| /* stylelint-disable no-descending-specificity */ |
| .network-log-grid.data-grid table.data tr.revealed.selected, |
| .network-log-grid.data-grid:focus table.data tr.revealed.selected, |
| .network-log-grid.data-grid:focus tr.selected .network-dim-cell, |
| .network-log-grid.data-grid tr.selected .network-dim-cell, |
| .network-log-grid.data-grid:focus tr.selected .initiator-column .devtools-link, |
| .network-log-grid.data-grid tr.selected .initiator-column .devtools-link, |
| .network-waterfall-header:hover * { |
| color: HighlightText; |
| } |
| /* stylelint-enable no-descending-specificity */ |
| |
| .network-log-grid { |
| --network-grid-default-color: canvas; |
| --network-grid-stripe-color: canvas; |
| --network-grid-hovered-color: Highlight; |
| --network-grid-selected-color: ButtonText; |
| --network-grid-focus-selected-color: Highlight; |
| } |
| |
| #network-container.no-node-selected:focus-within, |
| .network-status-pane { |
| forced-color-adjust: none; |
| border-color: Highlight; |
| background-color: canvas !important; /* stylelint-disable-line declaration-no-important */ |
| } |
| |
| .network-waterfall-header:hover { |
| forced-color-adjust: none; |
| background-color: Highlight; |
| } |
| |
| .network-waterfall-header.small, |
| .network-log-grid.data-grid.small .header-container .network-waterfall-header, |
| .network-log-grid.data-grid .header-container { |
| background-color: canvas; |
| } |
| |
| .network-waterfall-header:hover .sort-order-icon-container [is="ui-icon"].icon-mask { |
| background-color: HighlightText; |
| } |
| } |