/* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ :root { --markup-outline: var(--theme-splitter-color); font: 12px "Liberation Mono", Consolas, "Courier New", monospace; } * { padding: 0; margin: 0; } :root { -moz-control-character-visibility: visible; } body { -moz-user-select: none; } /* Force height and width (possibly overflowing) from inline elements. * This allows long overflows of text or input fields to still be styled with * the container, rather than the background disappearing when scrolling */ #root { float: left; min-width: 100%; } /* Don't display a parent-child outline for the root elements */ #root > ul > li > .children { background: none; } html.dragging { overflow-x: hidden; } body.dragging .tag-line { cursor: grabbing; } #root-wrapper:after { content: ""; display: block; clear: both; position:relative; } .html-editor { display: none; position: absolute; z-index: 2; /* Use the same margin/padding trick used by .child tags to ensure that * the editor covers up any content to the left (including expander arrows * and hover effects). */ margin-left: -1000em; padding-left: 1000em; } .html-editor-inner { border: solid .1px; flex: 1 1 auto; /* Keep the editor away from the markup view floating scrollbars */ margin-inline-end: 12px; } .html-editor iframe { height: 100%; width: 100%; border: none; margin: 0; padding: 0; } .children { list-style: none; padding: 0; margin: 0; } /* Tags are organized in a UL/LI tree and indented thanks to a left padding. * A very large padding is used in combination with a slightly smaller margin * to make sure childs actually span from edge-to-edge. */ .child { margin-left: -1000em; padding-left: 1001em; } /* Normally this element takes space in the layout even if it's position: relative * by adding height: 0 we let surrounding elements to fill the blank space */ .child.dragging { position: relative; pointer-events: none; opacity: 0.7; z-index: 1; height: 0; } /* Indicates a tag-line in the markup-view as being an active drop target by * drawing a horizontal line where the dragged element would be inserted if * dropped here */ .tag-line.drop-target::before, .tag-line.drag-target::before { content: ''; position: absolute; top: 0; width: 100%; /* Offset these by 1000px to make sure they cover the full width of the view */ padding-left: 1000px; left: -1000px; } .tag-line.drag-target::before { border-top: 2px solid var(--theme-content-color2); } .tag-line.drop-target::before { border-top: 2px solid var(--theme-contrast-background); } /* In case the indicator is put on the closing .tag-line, the indentation level * will become misleading, so we push it forward to match the indentation level */ ul.children + .tag-line::before { margin-left: 14px; } .tag-line { min-height: 1.4em; line-height: 1.4em; position: relative; cursor: default; padding-left: 2px; } .tag-line[selected] + .children { background-image: linear-gradient(to top, var(--markup-outline), var(--markup-outline)); background-repeat: no-repeat; /* Shorten the outline height by 4px to account for the 2px top padding and * allow for a 2px bottom padding */ background-size: 1.5px calc(100% - 4px); /* Align the outline to under the expander arrow and provide 2px top * padding */ background-position: -6px 2px; border-left: 6px solid transparent; margin-left: -6px; } .html-editor-container { position: relative; min-height: 200px; } /* This extra element placed in each tag is positioned absolutely to cover the * whole tag line and is used for background styling (when a selection is made * or when the tag is flashing) */ .tag-line .tag-state { position: absolute; left: -1000em; right: 0; height: 100%; z-index: 0; } .expander { display: inline-block; margin-left: -14px; vertical-align: middle; /* Make sure the expander still appears above the tag-state */ position: relative; z-index: 1; } .child.collapsed .child, .child.collapsed .children { display: none; } .child > .tag-line:first-child .close { display: none; } .child.collapsed > .tag-line:first-child .close { display: inline; } .child.collapsed > .tag-line ~ .tag-line { display: none; } .child.collapsed .close { display: inline; } /* Hide HTML void elements (img, hr, br, …) closing tag when the element is not * expanded (it can be if it has pseudo-elements attached) */ .child.collapsed > .tag-line .void-element .close { display: none; } .closing-bracket { pointer-events: none; } .newattr { display: inline-block; width: 1em; height: 1ex; margin-right: -1em; padding: 1px 0; } .attr-value .link { text-decoration: underline; } .newattr:focus { margin-right: 0; } .flash-out { transition: background .5s; } .markupview-events { display: none; cursor: pointer; } .editor { /* Make sure the editor still appears above the tag-state */ position: relative; z-index: 1; } .editor.text { display: inline-block; } .editor.text pre, .editor.comment pre { font: inherit; } .more-nodes { padding-left: 16px; } .styleinspector-propertyeditor { border: 1px solid #CCC; } /* Draw a circle next to nodes that have a pseudo class lock. Center vertically with the 1.4em line height on .tag-line */ .child.pseudoclass-locked::before { content: ""; background: var(--theme-highlight-lightorange); border-radius: 50%; width: .8em; height: .8em; margin-top: .3em; left: 1px; position: absolute; z-index: 1; } /* Selected nodes in the tree should have light selected text. theme-selected doesn't work in this case since the text is a sibling of the class, not a child. */ .theme-selected ~ .editor, .theme-selected ~ .editor .theme-fg-color1, .theme-selected ~ .editor .theme-fg-color2, .theme-selected ~ .editor .theme-fg-color3, .theme-selected ~ .editor .theme-fg-color4, .theme-selected ~ .editor .theme-fg-color5, .theme-selected ~ .editor .theme-fg-color6, .theme-selected ~ .editor .theme-fg-color7 { color: var(--theme-selection-color); } /* Make sure even text nodes are white when selected in the Inspector panel. */ .theme-firebug .theme-selected ~ .editor .open, .theme-firebug .theme-selected ~ .editor .close { color: var(--theme-selection-color); } /* In case a node isn't displayed in the page, we fade the syntax highlighting */ .not-displayed .open, .not-displayed .close { opacity: .7; } /* Events */ .markupview-events { font-size: 8px; font-weight: bold; line-height: 10px; border-radius: 3px; padding: 0px 2px; margin-inline-start: 5px; -moz-user-select: none; } .markupview-events { background-color: var(--theme-body-color-alt); color: var(--theme-body-background); }