Web Inspector: Hide DOM search result highlights when find banner is not showing
[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     left: 3px;
45     right: 3px;
46
47     background-color: rgba(0, 128, 252, 0.1);
48     border-radius: 5px;
49 }
50
51 body.mac-platform.legacy .dom-tree-outline li.hovered:not(.selected) .selection {
52     background-color: rgba(56, 121, 217, 0.1);
53 }
54
55 .dom-tree-outline li .selection {
56     display: none;
57     position: absolute;
58     left: 0;
59     right: 0;
60     height: 15px;
61     z-index: -1;
62 }
63
64 .dom-tree-outline li.selected .selection {
65     display: block;
66     background-color: rgb(212, 212, 212);
67 }
68
69 .dom-tree-outline li.elements-drag-over .selection {
70     display: block;
71     margin-top: -2px;
72     border-top: 2px solid rgb(0, 128, 252);
73 }
74
75 body.mac-platform.legacy .dom-tree-outline li.elements-drag-over .selection {
76     border-top: 2px solid rgb(56, 121, 217);
77 }
78
79 .dom-tree-outline:focus li.selected .selection {
80     background-color: rgb(0, 128, 252);
81 }
82
83 body.mac-platform.legacy .dom-tree-outline:focus li.selected .selection {
84     background-color: rgb(56, 121, 217);
85 }
86
87 .dom-tree-outline ol {
88     list-style-type: none;
89     padding-left: 14px;
90     margin: 0;
91 }
92
93 .dom-tree-outline ol.children {
94     display: none;
95 }
96
97 .dom-tree-outline ol.children.expanded {
98     display: block;
99 }
100
101 .dom-tree-outline li {
102     padding: 0 0 0 12px;
103     word-wrap: break-word;
104 }
105
106 .dom-tree-outline:focus li.selected {
107     color: white;
108 }
109
110 .dom-tree-outline:focus li.selected * {
111     color: inherit;
112 }
113
114 .dom-tree-outline li.parent {
115     margin-left: -10px;
116 }
117
118 .dom-tree-outline li .html-tag.close {
119     margin-left: -14px;
120 }
121
122 .dom-tree-outline li.parent::before {
123     float: left;
124
125     content: "";
126
127     background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal);
128     background-size: 8px 8px;
129     background-repeat: no-repeat;
130
131     width: 8px;
132     height: 8px;
133
134     margin-top: 2px;
135     padding-right: 2px;
136 }
137
138 .dom-tree-outline:focus li.parent.selected::before {
139     background-image: -webkit-canvas(disclosure-triangle-tiny-closed-selected);
140 }
141
142 .dom-tree-outline li.parent.expanded::before {
143     background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal);
144 }
145
146 .dom-tree-outline:focus li.parent.expanded.selected::before {
147     background-image: -webkit-canvas(disclosure-triangle-tiny-open-selected);
148 }
149
150 .dom-tree-outline .add-attribute {
151     margin-left: 1px;
152     margin-right: 1px;
153     white-space: nowrap;
154 }
155
156 .dom-tree-outline .html-text-node.large {
157     display: inline-block;
158     min-width: 100%;
159     white-space: pre-wrap;
160 }
161
162 .showing-find-banner .dom-tree-outline .search-highlight {
163     color: black;
164     background-color: rgba(235, 215, 38, 0.2);
165     border-bottom: 1px solid rgb(237, 202, 71);
166 }