| /* |
| * Copyright (c) 2014 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. |
| */ |
| |
| .elements-disclosure { |
| width: 100%; |
| display: inline-block; |
| line-height: normal; |
| } |
| |
| .elements-disclosure li { |
| /** Keep margin-left & padding-left in sync with ElementsTreeElements.updateDecorators **/ |
| padding: 0 0 0 14px; |
| margin-top: 1px; |
| margin-left: -2px; |
| word-wrap: break-word; |
| position: relative; |
| min-height: 14px; |
| } |
| |
| .elements-disclosure li.parent { |
| /** Keep it in sync with ElementsTreeElements.updateDecorators **/ |
| margin-left: -13px; |
| } |
| |
| .elements-disclosure li.selected:after { |
| font-style: italic; |
| content: " == $0"; |
| color: black; |
| opacity: 0.6; |
| position: absolute; |
| } |
| |
| .elements-disclosure li.selected.editing-as-html:after { |
| display: none; |
| } |
| |
| .elements-disclosure ol:focus li.selected:after { |
| color: white; |
| } |
| |
| .elements-disclosure li.parent::before { |
| box-sizing: border-box; |
| } |
| |
| .elements-disclosure li.parent::before { |
| -webkit-user-select: none; |
| -webkit-mask-image: url(Images/toolbarButtonGlyphs.png); |
| -webkit-mask-size: 352px 168px; |
| content: "aa"; |
| color: transparent; |
| text-shadow: none; |
| margin-right: -3px; |
| } |
| |
| .elements-disclosure li.always-parent::before { |
| visibility: hidden; |
| } |
| |
| @media (-webkit-min-device-pixel-ratio: 1.5) { |
| .elements-disclosure li.parent::before { |
| -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png); |
| } |
| } /* media */ |
| |
| .elements-disclosure li.parent::before { |
| -webkit-mask-position: -4px -96px; |
| background-color: rgb(110, 110, 110); |
| } |
| |
| .elements-disclosure li .selection { |
| display: none; |
| z-index: -1; |
| margin-left: -10000px; |
| } |
| |
| .elements-disclosure li.hovered:not(.selected) .selection { |
| display: block; |
| left: 3px; |
| right: 3px; |
| background-color: rgba(56, 121, 217, 0.1); |
| border-radius: 5px; |
| } |
| |
| .elements-disclosure li.parent.expanded::before { |
| -webkit-mask-position: -20px -96px; |
| } |
| |
| .elements-disclosure li.selected .selection { |
| display: block; |
| background-color: #dadada; |
| } |
| |
| .elements-disclosure ol { |
| list-style-type: none; |
| /** Keep it in sync with ElementsTreeElements.updateDecorators **/ |
| -webkit-padding-start: 12px; |
| margin: 0; |
| } |
| |
| .elements-disclosure ol.children { |
| display: none; |
| } |
| |
| .elements-disclosure ol.children.expanded { |
| display: block; |
| } |
| |
| .elements-disclosure li .webkit-html-tag.close { |
| margin-left: -12px; |
| } |
| |
| .elements-disclosure > ol { |
| position: relative; |
| margin: 0; |
| cursor: default; |
| min-width: 100%; |
| min-height: 100%; |
| -webkit-transform: translateZ(0); |
| padding-left: 2px; |
| } |
| |
| .elements-disclosure ol:focus li.selected { |
| color: white; |
| } |
| |
| .elements-disclosure ol:focus li.parent.selected::before { |
| background-color: white; |
| } |
| |
| .elements-disclosure ol:focus li.selected * { |
| color: inherit; |
| } |
| |
| .elements-disclosure ol:focus li.selected .selection { |
| background-color: rgb(56, 121, 217); |
| } |
| |
| .elements-tree-outline ol.shadow-root-depth-4 { |
| background-color: rgba(0, 0, 0, 0.04); |
| } |
| |
| .elements-tree-outline ol.shadow-root-depth-3 { |
| background-color: rgba(0, 0, 0, 0.03); |
| } |
| |
| .elements-tree-outline ol.shadow-root-depth-2 { |
| background-color: rgba(0, 0, 0, 0.02); |
| } |
| |
| .elements-tree-outline ol.shadow-root-depth-1 { |
| background-color: rgba(0, 0, 0, 0.01); |
| } |
| |
| .elements-tree-outline ol.shadow-root-deep { |
| background-color: transparent; |
| } |
| |
| .elements-tree-editor { |
| -webkit-user-select: text; |
| -webkit-user-modify: read-write-plaintext-only; |
| } |
| |
| .elements-disclosure li.elements-drag-over .selection { |
| display: block; |
| margin-top: -2px; |
| border-top: 2px solid rgb(56, 121, 217); |
| } |
| |
| .elements-disclosure li.in-clipboard .highlight { |
| outline: 1px dotted darkgrey; |
| } |
| |
| .CodeMirror { |
| box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px; |
| outline: 1px solid rgb(66%, 66%, 66%) !important; |
| background-color: white; |
| } |
| |
| .CodeMirror-lines { |
| padding: 0; |
| } |
| |
| .CodeMirror pre { |
| padding: 0; |
| } |
| |
| button, input, select { |
| font-family: inherit; |
| font-size: inherit; |
| } |
| |
| .editing { |
| -webkit-user-select: text; |
| box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px; |
| outline: 1px solid rgb(66%, 66%, 66%) !important; |
| background-color: white; |
| -webkit-user-modify: read-write-plaintext-only; |
| text-overflow: clip !important; |
| padding-left: 2px; |
| margin-left: -2px; |
| padding-right: 2px; |
| margin-right: -2px; |
| margin-bottom: -1px; |
| padding-bottom: 1px; |
| opacity: 1.0 !important; |
| } |
| |
| .editing, |
| .editing * { |
| color: #222 !important; |
| text-decoration: none !important; |
| } |
| |
| .editing br { |
| display: none; |
| } |
| |
| .elements-gutter-decoration { |
| position: absolute; |
| left: 2px; |
| margin-top: 2px; |
| height: 9px; |
| width: 9px; |
| border-radius: 5px; |
| border: 1px solid orange; |
| background-color: orange; |
| cursor: pointer; |
| } |
| |
| .elements-gutter-decoration.elements-has-decorated-children { |
| opacity: 0.5; |
| } |
| |
| .add-attribute { |
| margin-left: 1px; |
| margin-right: 1px; |
| white-space: nowrap; |
| } |
| |
| .webkit-html-attribute-value a { |
| cursor: default !important; |
| } |
| |
| .elements-tree-nowrap, .elements-tree-nowrap .li { |
| white-space: pre !important; |
| } |
| |
| .elements-disclosure .elements-tree-nowrap li { |
| word-wrap: normal; |
| } |
| |
| /* DOM update highlight */ |
| @-webkit-keyframes dom-update-highlight-animation { |
| from { |
| background-color: rgb(158, 54, 153); |
| color: white; |
| } |
| 80% { |
| background-color: rgb(245, 219, 244); |
| color: inherit; |
| } |
| to { |
| background-color: inherit; |
| } |
| } |
| |
| @-webkit-keyframes dom-update-highlight-animation-dark { |
| from { |
| background-color: rgb(158, 54, 153); |
| color: white; |
| } |
| 80% { |
| background-color: #333; |
| color: inherit; |
| } |
| to { |
| background-color: inherit; |
| } |
| } |
| |
| .dom-update-highlight { |
| -webkit-animation: dom-update-highlight-animation 1.4s 1 cubic-bezier(0, 0, 0.2, 1); |
| border-radius: 2px; |
| } |
| |
| :host-context(.-theme-with-dark-background) .dom-update-highlight { |
| -webkit-animation: dom-update-highlight-animation-dark 1.4s 1 cubic-bezier(0, 0, 0.2, 1); |
| } |
| |
| .elements-disclosure.single-node li { |
| padding-left: 2px; |
| } |
| |
| .elements-tree-shortcut-title { |
| color: rgb(87, 87, 87); |
| } |
| |
| ol:hover > li > .elements-tree-shortcut-link { |
| display: initial; |
| } |
| |
| .elements-tree-shortcut-link { |
| color: rgb(87, 87, 87); |
| display: none; |
| } |
| |
| ol:focus li.selected .webkit-html-tag { |
| color: #a5a5a5; |
| } |
| |
| ol:focus li.selected .webkit-html-tag-name, |
| ol:focus li.selected .webkit-html-close-tag-name, |
| ol:focus li.selected .webkit-html-attribute-value, |
| ol:focus li.selected .webkit-html-external-link, |
| ol:focus li.selected .webkit-html-resource-link { |
| color: white; |
| } |
| |
| ol:focus li.selected .webkit-html-attribute-name { |
| color: #ccc; |
| } |
| |
| .elements-disclosure .gutter-container { |
| position: absolute; |
| top: 0; |
| } |
| |
| .elements-disclosure li.selected .gutter-container:not(.has-decorations) { |
| left: 0px; |
| width: 16.25px; |
| height: 18px; |
| transform: rotate(-90deg) translateX(-13px) scale(0.8); |
| transform-origin: 0% 0%; |
| -webkit-mask-image: url(Images/toolbarButtonGlyphs.png); |
| -webkit-mask-position: -201px -27px; |
| -webkit-mask-size: 352px 168px; |
| background-color: white; |
| cursor: pointer; |
| } |
| |
| @media (-webkit-min-device-pixel-ratio: 1.5) { |
| .elements-disclosure li.selected .gutter-container:not(.has-decorations) { |
| -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png); |
| } |
| } /* media */ |
| |
| /** Guide line */ |
| li.selected { |
| z-index: 0; |
| } |
| |
| li.hovered:not(.always-parent) + ol.children, .elements-tree-outline ol.shadow-root, li.selected:not(.always-parent) + ol.children { |
| margin-left: 5px; |
| -webkit-padding-start: 6px; |
| border-width: 1px; |
| border-left-style: solid; |
| } |
| |
| li.hovered:not(.always-parent) + ol.children:not(.shadow-root) { |
| border-color: hsla(0,0%,0%,0.1); |
| } |
| |
| .elements-tree-outline ol.shadow-root { |
| border-color: hsla(0,0%,80%,1); |
| } |
| |
| li.selected:not(.always-parent) + ol.children { |
| border-color: hsla(216,68%,80%,1) !important; |
| } |