diff options
Diffstat (limited to 'Source/WebInspectorUI/UserInterface/DOMTreeOutline.css')
-rw-r--r-- | Source/WebInspectorUI/UserInterface/DOMTreeOutline.css | 148 |
1 files changed, 148 insertions, 0 deletions
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeOutline.css b/Source/WebInspectorUI/UserInterface/DOMTreeOutline.css new file mode 100644 index 000000000..3194b59dc --- /dev/null +++ b/Source/WebInspectorUI/UserInterface/DOMTreeOutline.css @@ -0,0 +1,148 @@ +/* + * 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. + */ + +.dom-tree-outline { + position: relative; + + padding: 0 6px; + margin: 0; + min-width: 100%; + + outline: none; + + list-style-type: none; + + /* Needed to make the negative z-index on .selection works. Otherwise the background-color from .syntax-highlighted hides the selection. */ + background-color: transparent !important; + color: black; +} + +.dom-tree-outline li.hovered:not(.selected) .selection { + display: block; + left: 3px; + right: 3px; + + background-color: rgba(56, 121, 217, 0.1); + border-radius: 5px; +} + +.dom-tree-outline li .selection { + display: none; + position: absolute; + left: 0; + right: 0; + height: 15px; + z-index: -1; +} + +.dom-tree-outline li.selected .selection { + display: block; + background-color: rgb(212, 212, 212); +} + +.dom-tree-outline li.elements-drag-over .selection { + display: block; + margin-top: -2px; + border-top: 2px solid rgb(56, 121, 217); +} + +.dom-tree-outline:focus li.selected .selection { + background-color: rgb(56, 121, 217); +} + +.dom-tree-outline ol { + list-style-type: none; + padding-left: 14px; + margin: 0; +} + +.dom-tree-outline ol.children { + display: none; +} + +.dom-tree-outline ol.children.expanded { + display: block; +} + +.dom-tree-outline li { + padding: 0 0 0 12px; + word-wrap: break-word; +} + +.dom-tree-outline:focus li.selected { + color: white; +} + +.dom-tree-outline:focus li.selected * { + color: inherit; +} + +.dom-tree-outline li.parent { + margin-left: -10px; +} + +.dom-tree-outline li .html-tag.close { + margin-left: -14px; +} + +.dom-tree-outline li.parent::before { + float: left; + + content: ""; + + background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal); + background-size: 8px 8px; + background-repeat: no-repeat; + + width: 8px; + height: 8px; + + margin-top: 2px; + padding-right: 2px; +} + +.dom-tree-outline:focus li.parent.selected::before { + background-image: -webkit-canvas(disclosure-triangle-tiny-closed-selected); +} + +.dom-tree-outline li.parent.expanded::before { + background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal); +} + +.dom-tree-outline:focus li.parent.expanded.selected::before { + background-image: -webkit-canvas(disclosure-triangle-tiny-open-selected); +} + +.dom-tree-outline .add-attribute { + margin-left: 1px; + margin-right: 1px; + white-space: nowrap; +} + +.dom-tree-outline .html-text-node.large { + display: inline-block; + min-width: 100%; + white-space: pre-wrap; +} |