blob: f96b187f0bf49071c411c650a4dc2df5a5d3e2ea [file] [log] [blame]
/*
* Copyright (C) 2013 Apple 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:
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. 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.
*
* THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS 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 APPLE INC. OR ITS 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.
*/
.tree-outline.dom {
position: relative;
min-width: 100%;
margin: 0;
padding: 0;
outline: none;
list-style-type: none;
/* Needed to make the negative z-index on .selection-area works. Otherwise the background-color from .syntax-highlighted hides the selection. */
background-color: transparent !important;
color: var(--text-color);
--item-pseudo-class-enabled-selection-before-start: 2px;
--sublist-margin-start: 4px;
--sublist-padding-start: 1px;
--sublist-border-width-start: 9px;
}
.tree-outline.dom li .selection-area {
position: absolute;
left: 0;
right: 0;
height: 15px;
z-index: -1;
}
.tree-outline.dom li.selected .selection-area {
background-color: var(--selected-background-color-unfocused);
}
.tree-outline.dom li.elements-drag-over .selection-area {
margin-top: -2px;
border-top: 2px solid var(--selected-background-color);
}
.tree-outline.dom:focus li:matches(.selected, .hovered) .selection-area {
background-color: var(--selected-background-color);
}
.tree-outline.dom li.hovered:not(.selected) .selection-area {
opacity: 0.3;
}
.tree-outline.dom.show-last-selected li.last-selected > span::after {
content: " = $0";
color: var(--console-secondary-text-color);
position: absolute;
white-space: pre;
}
.tree-outline.dom.show-last-selected:focus li.last-selected > span::after {
color: var(--selected-secondary-text-color);
}
.tree-outline.dom ol {
list-style-type: none;
margin: 0;
-webkit-padding-start: calc(var(--sublist-margin-start) + var(--sublist-padding-start) + var(--sublist-border-width-start));
}
.tree-outline.dom ol.children {
display: none;
}
.tree-outline.dom ol.children.expanded {
display: block;
}
.tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded {
-webkit-margin-start: var(--sublist-margin-start);
-webkit-padding-start: var(--sublist-padding-start);
border: 0 solid hsla(0, 0%, 83%, 0.5);
}
body[dir=ltr] .tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded {
border-left-width: var(--sublist-border-width-start);
}
body[dir=rtl] .tree-outline.dom li:matches(.hovered, .selected) + ol.children.expanded {
border-right-width: var(--sublist-border-width-start);
}
.tree-outline.dom li.selected + ol.children.expanded {
border-color: hsl(0, 0%, 65%, 0.5);
}
.tree-outline.dom li {
padding: 0;
word-wrap: break-word;
--item-padding-start: 17px;
--item-padding-end: 6px;
}
.tree-outline.dom li:not(.editing) {
-webkit-padding-start: var(--item-padding-start);
-webkit-padding-end: var(--item-padding-end);
}
.tree-outline.dom li.editing {
-webkit-margin-start: var(--item-padding-start);
-webkit-margin-end: var(--item-padding-end);
}
.tree-outline.dom li.pseudo-class-enabled > .selection-area::before {
display: inline-block;
position: absolute;
top: 4px;
width: 5px;
height: 5px;
content: "";
background-color: var(--glyph-color-active);
border-radius: 50%;
}
body[dir=ltr] .tree-outline.dom li.pseudo-class-enabled > .selection-area::before {
left: var(--item-pseudo-class-enabled-selection-before-start);
}
body[dir=rtl] .tree-outline.dom li.pseudo-class-enabled > .selection-area::before {
right: var(--item-pseudo-class-enabled-selection-before-start);
}
.tree-outline.dom.single-node li {
-webkit-padding-start: 2px;
}
.tree-outline.dom:focus li.selected {
color: white;
}
.tree-outline.dom:focus li.selected.pseudo-class-enabled > .selection-area::before {
background-color: hsl(0, 100%, 100%);
}
.tree-outline.dom:focus li.selected * {
color: inherit;
}
.tree-outline.dom li.parent {
-webkit-margin-start: -15px;
line-height: 13px;
}
.tree-outline.dom li .html-tag.close {
-webkit-margin-start: calc(-1 * var(--sublist-margin-start) - var(--sublist-border-width-start));
}
.tree-outline.dom li.parent::before {
position: relative;
z-index: 20;
width: 13px;
height: 13px;
-webkit-padding-end: 2px;
content: "";
background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
background-size: 13px 13px;
background-repeat: no-repeat;
}
body[dir=ltr] .tree-outline.dom li.parent::before {
float: left;
}
body[dir=rtl] .tree-outline.dom li.parent::before {
float: right;
transform: scaleX(-1);
}
.tree-outline.dom:focus li.parent.selected::before {
background-image: url(../Images/DisclosureTriangles.svg#closed-selected);
}
.tree-outline.dom li.parent.expanded::before {
background-image: url(../Images/DisclosureTriangles.svg#open-normal);
}
.tree-outline.dom:focus li.parent.expanded.selected::before {
background-image: url(../Images/DisclosureTriangles.svg#open-selected);
}
.tree-outline.dom .html-text-node.large {
display: inline-block;
min-width: 100%;
white-space: pre-wrap;
}
.tree-outline.dom .html-pseudo-element {
color: hsl(0, 59%, 41%);
}
.tree-outline.dom .shadow {
color: gray;
}
/* Cannot apply styling directly to the parent element since it has a disclosure triangle. */
.tree-outline.dom li.parent.shadow::after {
display: block;
/* Adds padding to the right edge. */
width: calc(100% + 8px);
height: 1.2em;
margin-top: -13px;
-webkit-margin-start: -2px;
content: "";
background-color: hsla(0, 0%, 90%, 0.5);
}
.tree-outline.dom li.parent.shadow + ol.children.expanded {
background-color: hsla(0, 0%, 90%, 0.5);
}
.showing-find-banner .tree-outline.dom .search-highlight {
color: black;
background-color: hsla(53, 83%, 53%, 0.2);
border-bottom: 1px solid hsl(47, 82%, 60%);
}
@keyframes node-state-changed {
from { background-color: var(--value-changed-highlight); }
}
.node-state-changed {
animation: node-state-changed 1s cubic-bezier(0.25, 0, 0.25, 1);
}
@keyframes dom-tree-outline-highlight-fadeout {
from { background-color: highlight; }
}
.highlight .selection-area {
animation: "dom-tree-outline-highlight-fadeout" 2s;
}
.tree-outline.dom li .highlight {
background-color: hsla(53, 83%, 53%, 0.2);
border-bottom: 1px solid hsl(47, 82%, 60%);
}
@media (prefers-color-scheme: dark) {
.tree-outline.dom .shadow {
color: var(--text-color);
}
/* FIXME: extract this as a variable. It's slightly different from var(background-color-secondary),
but close enough for now. It needs to use partial translucency so that the selection area shines through. */
.tree-outline.dom li.parent.shadow + ol.children.expanded,
.tree-outline.dom li.parent.shadow::after {
background-color: hsla(0, 0%, 90%, 0.1);
}
.showing-find-banner .tree-outline.dom .search-highlight {
/* FIXME: This should use a variable. */
background-color: hsla(53, 83%, 53%, 0.8);
}
.tree-outline.dom .html-pseudo-element {
color: hsl(0, 80%, 65%);
}
}