| /* |
| * Copyright 2020 The Chromium Authors |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. |
| */ |
| |
| /* Remove container padding from TreeOutline. |
| * Allows issues to touch the edges of the container. */ |
| :host, |
| .issues { |
| padding: 0; |
| overflow: auto; |
| } |
| |
| .issues { |
| --issue-indent: 8px; |
| } |
| |
| /* The top most parents need to be larger, as they may include an unhide button. */ |
| .tree-outline.issues > li { |
| min-height: var(--sys-size-13); |
| } |
| |
| /* Override whitespace behavior for tree items to allow wrapping */ |
| .issues li { |
| white-space: normal; |
| align-items: flex-start; |
| } |
| |
| /* Hide toggle for tree items which cannot be collapsed */ |
| .issues .always-parent::before { |
| display: none; |
| } |
| |
| .issues li.parent::before { |
| margin-top: 7px; |
| } |
| |
| .issues .affected-resources li.parent::before { |
| margin-top: 0; |
| } |
| |
| .issue-category, |
| .issue-kind, |
| .issue { |
| padding: 0 8px; |
| padding-left: var(--issue-indent); |
| overflow: hidden; |
| flex: none; |
| transition: background-color 200ms; |
| border: 1px solid var(--sys-color-divider); |
| border-width: 0 0 1px; |
| } |
| |
| .issue-category.hidden-issues.parent.expanded, |
| .issue-kind.parent.expanded { |
| border-width: 0 0 1px; |
| background-color: var(--sys-color-surface2); |
| } |
| |
| .issue-category + .children .issue, |
| .issue.expanded { |
| background: var(--sys-color-cdt-base-container); |
| } |
| |
| .issue.expanded { |
| border-width: 0; |
| } |
| |
| .issue.selected, |
| .issue.expanded.selected { |
| background-color: var(--sys-color-surface2); |
| |
| &:focus { |
| background-color: var(--sys-color-tonal-container); |
| } |
| } |
| |
| .tree-outline li:not(.selected):hover .selection { |
| background-color: unset; |
| } |
| |
| .tree-outline li.issue:not(.expanded, .selected):hover .selection { |
| background-color: var(--sys-color-state-hover-on-subtle); |
| } |
| |
| .tree-outline li.issue.expanded:not(.selected):hover { |
| background-color: var(--sys-color-state-hover-on-subtle); |
| } |
| |
| .unhide-all-issues-button { |
| margin: 0; |
| } |
| |
| p { |
| margin-block: 2px; |
| } |
| |
| /* Override selected tree item styles for issues to avoid changing width. */ |
| .tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) .tree-outline.hide-selection-when-blurred .issue-category.selected:focus-visible, |
| .tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) .tree-outline.hide-selection-when-blurred .issue-kind.selected:focus-visible, |
| .tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) .tree-outline.hide-selection-when-blurred .issue.selected:focus-visible { |
| width: auto; |
| padding-right: 8px; |
| } |
| |
| .header { |
| display: flex; |
| flex-direction: row; |
| align-items: flex-start; |
| padding: 4px 0; |
| cursor: pointer; |
| width: 100%; |
| |
| & > :not(.unhide-all-issues-button) { |
| margin-top: var(--sys-size-2); |
| } |
| } |
| |
| .header devtools-hide-issues-menu { |
| visibility: hidden; |
| } |
| |
| .header:hover devtools-hide-issues-menu, |
| .issue.selected devtools-hide-issues-menu { |
| visibility: visible; |
| } |
| |
| .title { |
| flex: 1; |
| font-size: 12px; |
| color: var(--sys-color-on-surface); |
| font-weight: normal; |
| user-select: text; |
| padding-top: 2px; |
| } |
| |
| .issue.expanded .title { |
| font-weight: 450; |
| } |
| |
| .issue-body.children { |
| border-bottom: 1px solid var(--sys-color-divider); |
| padding: 6px 0; |
| position: relative; |
| padding-left: calc(var(--issue-indent) + 43px); |
| padding-bottom: 26px; |
| padding-right: 8px; |
| } |
| |
| .issue-category + .children, |
| .issue-kind + .children { |
| --issue-indent: 24px; |
| |
| padding-left: 0; |
| } |
| |
| /* Show a colored border on the left side of opened issues. */ |
| .issue-body::before { |
| content: ""; |
| display: block; |
| position: absolute; |
| left: calc(var(--issue-indent) + 23px); |
| top: 0; |
| bottom: 20px; |
| width: 2px; |
| } |
| |
| .issue-kind-breaking-change.issue-body::before { |
| border-left: 2px solid var(--issue-color-yellow); |
| } |
| |
| .issue-kind-page-error.issue-body::before { |
| border-left: 2px solid var(--issue-color-red); |
| } |
| |
| .issue-kind-improvement.issue-body::before { |
| border-left: 2px solid var(--issue-color-blue); |
| } |
| |
| .tree-outline .issue-body li:hover:not(:has(devtools-checkbox)) .selection { |
| background-color: unset; |
| } |
| |
| devtools-icon.leading-issue-icon { |
| margin: 1px 0 -1px 7px; |
| } |
| |
| .message { |
| line-height: 18px; |
| font-size: 12px; |
| color: var(--sys-color-token-subtle); |
| margin-bottom: 4px; |
| user-select: text; |
| } |
| |
| .message p { |
| margin-bottom: 16px; |
| } |
| |
| .message li { |
| margin-top: 8px; |
| } |
| |
| .message code { |
| color: var(--sys-color-on-surface); |
| padding: 0 2px; |
| font-size: 12px; |
| user-select: text; |
| cursor: text; |
| background: var(--sys-color-surface2); |
| } |
| |
| .separator::before { |
| content: "·"; |
| padding-left: 1ex; |
| padding-right: 1ex; |
| } |
| |
| .link { |
| font-size: 12px; |
| color: var(--sys-color-primary); |
| } |
| |
| .link-wrapper { |
| margin-top: 15px; |
| user-select: text; |
| } |
| |
| .affected-resources-label, |
| .resolutions-label { |
| margin-top: 5px; |
| font-size: 10px; |
| font-weight: 500; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| color: var(--sys-color-on-surface); |
| display: inline-block; |
| } |
| |
| .link-list { |
| list-style-type: none; |
| list-style-position: inside; |
| padding-inline-start: 0; |
| } |
| |
| .resolutions-list { |
| list-style-type: none; |
| list-style-position: inside; |
| padding-inline-start: 0; |
| } |
| |
| /* We inherit all the styles from treeoutline, but these are simple text <li>, so we override some styles */ |
| .link-list li::before { |
| content: none; |
| mask-image: none; |
| } |
| |
| .resolutions-list li::before { |
| content: "→"; |
| mask-image: none; |
| padding-right: 5px; |
| position: relative; |
| top: -1px; |
| } |
| |
| .resolutions-list li { |
| display: list-item; |
| } |
| |
| ul > li.plain-enum { |
| display: list-item; |
| } |
| |
| /* This is a hack because the tree view's CSS overrides list styling in a non-compositional way. This |
| can be removed once we've moved to proper components. */ |
| ul > li.plain-enum::before { |
| content: ""; |
| padding: 0; |
| margin: 0; |
| max-width: 0; |
| } |
| |
| .affected-resources-label + .affected-resources { |
| padding: 3px 0 0; |
| position: relative; |
| user-select: text; |
| } |
| |
| .affected-resource-label { |
| font-size: 12px; |
| line-height: 18px; |
| color: var(--sys-color-on-surface); |
| position: relative; |
| cursor: pointer; |
| } |
| |
| .affected-resource-cookie { |
| font-size: 12px; |
| line-height: 18px; |
| border: 0; |
| border-collapse: collapse; |
| } |
| |
| .affected-resource-element { |
| font-size: 12px; |
| line-height: 18px; |
| color: var(--sys-color-primary); |
| border: 0; |
| border-collapse: collapse; |
| } |
| |
| .affected-resource-row { |
| font-size: 12px; |
| line-height: 18px; |
| border: 0; |
| border-collapse: collapse; |
| vertical-align: top; |
| } |
| |
| .affected-resource-mixed-content { |
| font-size: 12px; |
| line-height: 18px; |
| border: 0; |
| border-collapse: collapse; |
| } |
| |
| .affected-resource-heavy-ad { |
| font-size: 12px; |
| line-height: 18px; |
| border: 0; |
| border-collapse: collapse; |
| } |
| |
| .affected-resource-request { |
| font-size: 12px; |
| line-height: 18px; |
| border: 0; |
| border-collapse: collapse; |
| } |
| |
| .affected-resource-source { |
| font-size: 12px; |
| line-height: 18px; |
| color: var(--sys-color-primary); |
| border: 0; |
| border-collapse: collapse; |
| } |
| |
| .affected-resource-list { |
| border-spacing: 10px 0; |
| margin-left: -12px; |
| } |
| |
| .affected-resource-header { |
| font-size: 12px; |
| color: var(--sys-color-on-surface); |
| padding-left: 2px; |
| } |
| |
| .code-example { |
| font-family: var(--monospace-font-family); |
| font-size: var(--monospace-font-size); |
| } |
| |
| .affected-resource-blocked-status { |
| color: var(--issue-color-red); |
| } |
| |
| .affected-resource-report-only-status { |
| color: var(--issue-color-yellow); |
| } |
| |
| .affected-resource-cookie-info { |
| color: var(--sys-color-token-subtle); |
| padding: 2px; |
| text-align: right; |
| } |
| |
| .affected-resource-cookie-info-header { |
| text-align: right; |
| } |
| |
| .affected-resource-mixed-content-info { |
| color: var(--sys-color-token-subtle); |
| padding: 2px; |
| } |
| |
| .affected-resource-heavy-ad-info { |
| color: var(--sys-color-token-subtle); |
| padding: 2px; |
| } |
| |
| .affected-resource-heavy-ad-info-frame { |
| display: flex; |
| align-items: center; |
| color: var(--sys-color-token-subtle); |
| padding: 2px; |
| } |
| |
| .affected-resource-cell { |
| color: var(--sys-color-token-subtle); |
| padding: 2px; |
| } |
| |
| .affected-resource-cell.link { |
| color: var(--sys-color-primary); |
| } |
| |
| .affected-resource-cell span.icon { |
| margin-right: 0.5ex; |
| vertical-align: sub; |
| } |
| |
| .affected-resources > .parent { |
| margin-top: 0; |
| padding: 2px 5px 0; |
| } |
| |
| .affected-resources > .parent.expanded { |
| background: var(--sys-color-cdt-base-container); |
| } |
| |
| .affected-resources > .children.expanded { |
| background: var(--sys-color-cdt-base-container); |
| padding: 6px 0 9px 5px; |
| } |
| |
| .aggregated-issues-count { |
| padding: 3px 7px 0; |
| } |
| |
| .affected-resource-directive-info-header { |
| text-align: left; |
| } |
| |
| .affected-resource-directive { |
| font-size: 12px; |
| line-height: 18px; |
| border: 0; |
| border-collapse: collapse; |
| } |
| |
| .affected-resource-directive-info { |
| color: var(--sys-color-token-subtle); |
| padding: 2px; |
| text-align: left; |
| } |
| |
| .devtools-link { |
| padding-top: 4px; |
| } |
| |
| devtools-icon.link-icon { |
| vertical-align: sub; |
| margin-right: 0.5ch; |
| } |
| |
| devtools-icon.elements-panel, |
| devtools-icon.network-panel { |
| margin-right: 0.5ex; |
| vertical-align: baseline; |
| height: 14px; |
| } |
| |
| @media (forced-colors: active) { |
| .title { |
| color: ButtonText; |
| } |
| |
| .tree-outline:not(.hide-selection-when-blurred) .selected .header .title, |
| .tree-outline.hide-selection-when-blurred .selected:focus-visible .header .title { |
| color: HighlightText; |
| } |
| } |
