| /* |
| * Copyright 2015 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. |
| */ |
| |
| :host { |
| flex: 1 1 auto; |
| padding: 2px 0 0; |
| } |
| |
| .tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) { |
| min-width: 100%; |
| display: inline-block; |
| } |
| |
| .tree-outline { |
| padding: 0 0 4px 4px; |
| margin: 0; |
| z-index: 0; |
| position: relative; |
| } |
| |
| .tree-outline:focus-visible { |
| box-shadow: 0 0 0 2px var(--legacy-accent-color) inset; |
| } |
| |
| .tree-outline li .selection { |
| display: none; |
| z-index: -1; |
| margin-left: -10000px; |
| } |
| |
| .tree-outline:not(.hide-selection-when-blurred) li.selected { |
| color: var(--legacy-selection-inactive-fg-color); |
| } |
| |
| .tree-outline:not(.hide-selection-when-blurred) li.selected .selection { |
| display: block; |
| background-color: var(--legacy-selection-inactive-bg-color); |
| } |
| |
| .tree-outline:not(.hide-selection-when-blurred) li.elements-drag-over .selection { |
| display: block; |
| margin-top: -2px; |
| border-top: 2px solid; |
| border-top-color: var(--legacy-selection-bg-color); |
| } |
| |
| .tree-outline:not(.hide-selection-when-blurred) li.hovered:not(.selected) .selection { |
| display: block; |
| left: 3px; |
| right: 3px; |
| background-color: var(--item-hover-color); |
| border-radius: 5px; |
| } |
| |
| .tree-outline:not(.hide-selection-when-blurred) li.in-clipboard .highlight { |
| outline: 1px dotted var(--color-background-highlight); |
| } |
| |
| ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection { |
| background-color: var(--legacy-selection-bg-color); |
| } |
| |
| ol.tree-outline:not(.hide-selection-when-blurred) li.parent.selected:focus::before { |
| background-color: var(--legacy-selection-fg-color); |
| } |
| |
| ol.tree-outline, |
| .tree-outline ol { |
| list-style-type: none; |
| } |
| |
| .tree-outline ol { |
| padding-left: 12px; |
| } |
| |
| .tree-outline li { |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| position: relative; |
| display: flex; |
| align-items: center; |
| min-height: 16px; |
| } |
| |
| ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus { |
| color: var(--legacy-selection-fg-color); |
| } |
| |
| ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus * { |
| color: inherit; |
| } |
| |
| .tree-outline li .icons-container { |
| align-self: center; |
| display: flex; |
| align-items: center; |
| } |
| |
| .tree-outline li .leading-icons { |
| margin-right: 4px; |
| } |
| |
| .tree-outline li .trailing-icons { |
| margin-left: 4px; |
| } |
| |
| .tree-outline li::before { |
| user-select: none; |
| -webkit-mask-image: var(--image-file-treeoutlineTriangles); |
| -webkit-mask-size: 32px 24px; |
| -webkit-mask-position: 0 0; |
| background-color: var(--color-text-secondary); |
| content: "\A0\A0"; |
| text-shadow: none; |
| margin-right: -2px; |
| height: 12px; |
| width: 13px; |
| } |
| |
| .tree-outline li:not(.parent)::before { |
| background-color: transparent; |
| } |
| |
| .tree-outline li.parent.expanded::before { |
| -webkit-mask-position: -16px 0; |
| } |
| |
| .tree-outline ol.children { |
| display: none; |
| } |
| |
| .tree-outline ol.children.expanded { |
| display: block; |
| } |
| |
| .tree-outline.tree-outline-dense li { |
| margin-top: 1px; |
| min-height: 12px; |
| } |
| |
| .tree-outline.tree-outline-dense li.parent { |
| margin-top: 0; |
| } |
| |
| .tree-outline.tree-outline-dense li.parent::before { |
| top: 0; |
| } |
| |
| .tree-outline.tree-outline-dense ol { |
| padding-left: 10px; |
| } |
| |
| .tree-outline.hide-selection-when-blurred .selected:focus-visible { |
| background: var(--legacy-focus-bg-color); |
| border-radius: 2px; |
| } |
| |
| .tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) .tree-outline.hide-selection-when-blurred .selected:focus-visible { |
| width: fit-content; |
| padding-right: 3px; |
| } |
| |
| @media (forced-colors: active) { |
| .tree-outline-disclosure li.parent::before, |
| .tree-outline:not(.hide-selection-when-blurred) li.parent:not(.selected)::before, |
| .tree-outline li [is="ui-icon"].icon-mask { |
| forced-color-adjust: none; |
| background-color: ButtonText; |
| } |
| |
| .tree-outline-disclosure li.parent:hover:not(.selected)::before, |
| .tree-outline:not(.hide-selection-when-blurred) li.parent:hover:not(.selected)::before { |
| background-color: ButtonText; |
| } |
| |
| .tree-outline:not(.hide-selection-when-blurred) li.selected .selection { |
| forced-color-adjust: none; |
| background-color: ButtonText; |
| } |
| |
| ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection, |
| .tree-outline.hide-selection-when-blurred .selected:focus-visible { |
| forced-color-adjust: none; |
| background-color: Highlight; |
| } |
| |
| ol.tree-outline:not(.hide-selection-when-blurred) li.parent.selected::before, |
| ol.tree-outline:not(.hide-selection-when-blurred) li.parent.selected:focus::before, |
| .tree-outline.hide-selection-when-blurred .selected:focus-visible::before { |
| background-color: HighlightText; |
| } |
| |
| .tree-outline li:not(.parent)::before, |
| .tree-outline li:not(.parent):hover::before, |
| .tree-outline.hide-selection-when-blurred .selected:focus-visible:not(.parent)::before { |
| forced-color-adjust: none; |
| background-color: transparent; |
| } |
| |
| .tree-outline li.selected [is="ui-icon"].icon-mask, |
| .tree-outline li.selected:focus [is="ui-icon"]:not(.icon-mask) { |
| background-color: HighlightText !important; /* stylelint-disable-line declaration-no-important */ |
| } |
| |
| ol.tree-outline:not(.hide-selection-when-blurred) li.selected, |
| .tree-outline:not(.hide-selection-when-blurred) li.selected .tree-element-title, |
| .tree-outline:not(.hide-selection-when-blurred) li.selected:focus, |
| .tree-outline:not(.hide-selection-when-blurred) li:focus-visible .tree-element-title, |
| .tree-outline:not(.hide-selection-when-blurred) li.selected:focus .tree-element-title, |
| .tree-outline:not(.hide-selection-when-blurred) li.selected span, |
| .tree-outline.hide-selection-when-blurred .selected:focus-visible span { |
| forced-color-adjust: none; |
| color: HighlightText; |
| } |
| |
| .tree-outline:not(.hide-selection-when-blurred) li.selected:focus-visible devtools-adorner, |
| .tree-outline.hide-selection-when-blurred li.selected:focus-visible devtools-adorner { |
| --override-adorner-background-color: Highlight; |
| --override-adorner-border-color: HighlightText; |
| } |
| |
| .tree-outline:not(.hide-selection-when-blurred) devtools-icon, |
| .tree-outline.hide-selection-when-blurred devtools-icon { |
| --icon-color: ButtonText; |
| } |
| |
| .tree-outline:not(.hide-selection-when-blurred) .selected devtools-icon, |
| .tree-outline.hide-selection-when-blurred .selected:focus-visible devtools-icon { |
| --icon-color: HighlightText; |
| } |
| } |