Web Inspector: Make DOM node attribute changes highlighting less obnoxious
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / DOMTreeOutline.css
1 /*
2  * Copyright (C) 2013 Apple Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 .dom-tree-outline {
27     position: relative;
28
29     padding: 0 6px;
30     margin: 0;
31     min-width: 100%;
32
33     outline: none;
34
35     list-style-type: none;
36
37  /* Needed to make the negative z-index on .selection works. Otherwise the background-color from .syntax-highlighted hides the selection. */
38     background-color: transparent !important;
39     color: black;
40 }
41
42 .dom-tree-outline li.hovered:not(.selected) .selection {
43     display: block;
44     background-color: hsla(209, 100%, 49%, 0.1);
45 }
46
47 .dom-tree-outline li .selection {
48     display: none;
49     position: absolute;
50     left: 0;
51     right: 0;
52     height: 15px;
53     z-index: -1;
54 }
55
56 .dom-tree-outline li.selected .selection {
57     display: block;
58     background-color: hsl(0, 0%, 83%);
59 }
60
61 .dom-tree-outline li.elements-drag-over .selection {
62     display: block;
63     margin-top: -2px;
64     border-top: 2px solid hsl(209, 100%, 49%);
65 }
66
67 .dom-tree-outline:focus li.selected .selection {
68     background-color: hsl(209, 100%, 49%);
69 }
70
71 .dom-tree-outline li.selected > span::after {
72     content: " = $0";
73     color: hsla(0, 0%, 0%, 0.33);
74     position: absolute;
75     white-space: pre;
76 }
77
78 .dom-tree-outline:focus li.selected > span::after {
79     color: hsla(0, 100%, 100%, 0.7);
80 }
81
82 .dom-tree-outline ol {
83     list-style-type: none;
84     padding-left: 1.2em;
85     margin: 0;
86 }
87
88 .dom-tree-outline ol.children {
89     display: none;
90 }
91
92 .dom-tree-outline ol.children.expanded {
93     display: block;
94 }
95
96 .dom-tree-outline li {
97     padding: 0 0 0 17px;
98     word-wrap: break-word;
99 }
100
101 .dom-tree-outline.single-node li {
102     padding-left: 2px;
103 }
104
105 .dom-tree-outline:focus li.selected {
106     color: white;
107 }
108
109 .dom-tree-outline:focus li.selected * {
110     color: inherit;
111 }
112
113 .dom-tree-outline li.parent {
114     margin-left: -15px;
115 }
116
117 .dom-tree-outline li .html-tag.close {
118     margin-left: -13px;
119 }
120
121 .dom-tree-outline li.parent::before {
122     float: left;
123
124     content: "";
125
126     background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-closed-normal);
127     background-size: 13px 13px;
128     background-repeat: no-repeat;
129
130     width: 13px;
131     height: 13px;
132
133     margin-left: 0;
134     padding-right: 2px;
135 }
136
137 .dom-tree-outline:focus li.parent.selected::before {
138     background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-closed-selected);
139 }
140
141 .dom-tree-outline li.parent.expanded::before {
142     background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-open-normal);
143 }
144
145 .dom-tree-outline:focus li.parent.expanded.selected::before {
146     background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-open-selected);
147 }
148
149 .dom-tree-outline .html-text-node.large {
150     display: inline-block;
151     min-width: 100%;
152     white-space: pre-wrap;
153 }
154
155 .dom-tree-outline .html-pseudo-element {
156     color: hsl(0, 59%, 41%);
157 }
158
159 .dom-tree-outline .html-fragment.shadow {
160     opacity: 0.6;
161 }
162
163 .showing-find-banner .dom-tree-outline .search-highlight {
164     color: black;
165     background-color: hsla(53, 83%, 53%, 0.2);
166     border-bottom: 1px solid hsl(47, 82%, 60%);
167 }
168
169 @keyframes node-state-changed {
170     from { background-color: hsla(83, 100%, 48%, 0.4); }
171 }
172
173 .node-state-changed {
174     animation: node-state-changed 1s cubic-bezier(0.25, 0, 0.25, 1);
175 }