1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
6 --markup-outline: var(--theme-splitter-color);
7 font: 12px "Liberation Mono", Consolas, "Courier New", monospace;
16 -moz-control-character-visibility: visible;
20 -moz-user-select: none;
23 /* Force height and width (possibly overflowing) from inline elements.
24 * This allows long overflows of text or input fields to still be styled with
25 * the container, rather than the background disappearing when scrolling */
31 /* Don't display a parent-child outline for the root elements */
32 #root > ul > li > .children {
40 body.dragging .tag-line {
56 /* Use the same margin/padding trick used by .child tags to ensure that
57 * the editor covers up any content to the left (including expander arrows
58 * and hover effects). */
67 /* Keep the editor away from the markup view floating scrollbars */
68 margin-inline-end: 12px;
85 /* Tags are organized in a UL/LI tree and indented thanks to a left padding.
86 * A very large padding is used in combination with a slightly smaller margin
87 * to make sure childs actually span from edge-to-edge. */
93 /* Normally this element takes space in the layout even if it's position: relative
94 * by adding height: 0 we let surrounding elements to fill the blank space */
103 /* Indicates a tag-line in the markup-view as being an active drop target by
104 * drawing a horizontal line where the dragged element would be inserted if
106 .tag-line.drop-target::before,
107 .tag-line.drag-target::before {
112 /* Offset these by 1000px to make sure they cover the full width of the view */
113 padding-left: 1000px;
117 .tag-line.drag-target::before {
118 border-top: 2px solid var(--theme-content-color2);
121 .tag-line.drop-target::before {
122 border-top: 2px solid var(--theme-contrast-background);
125 /* In case the indicator is put on the closing .tag-line, the indentation level
126 * will become misleading, so we push it forward to match the indentation level */
127 ul.children + .tag-line::before {
139 .tag-line[selected] + .children {
140 background-image: linear-gradient(to top, var(--markup-outline), var(--markup-outline));
141 background-repeat: no-repeat;
142 /* Shorten the outline height by 4px to account for the 2px top padding and
143 * allow for a 2px bottom padding */
144 background-size: 1.5px calc(100% - 4px);
145 /* Align the outline to under the expander arrow and provide 2px top
147 background-position: -6px 2px;
148 border-left: 6px solid transparent;
152 .html-editor-container {
157 /* This extra element placed in each tag is positioned absolutely to cover the
158 * whole tag line and is used for background styling (when a selection is made
159 * or when the tag is flashing) */
160 .tag-line .tag-state {
169 display: inline-block;
171 vertical-align: middle;
172 /* Make sure the expander still appears above the tag-state */
177 .child.collapsed .child, .child.collapsed .children {
181 .child > .tag-line:first-child .close {
185 .child.collapsed > .tag-line:first-child .close {
189 .child.collapsed > .tag-line ~ .tag-line {
193 .child.collapsed .close {
197 /* Hide HTML void elements (img, hr, br, …) closing tag when the element is not
198 * expanded (it can be if it has pseudo-elements attached) */
199 .child.collapsed > .tag-line .void-element .close {
204 pointer-events: none;
208 display: inline-block;
216 text-decoration: underline;
224 transition: background .5s;
233 /* Make sure the editor still appears above the tag-state */
239 display: inline-block;
243 .editor.comment pre {
251 .styleinspector-propertyeditor {
252 border: 1px solid #CCC;
255 /* Draw a circle next to nodes that have a pseudo class lock.
256 Center vertically with the 1.4em line height on .tag-line */
257 .child.pseudoclass-locked::before {
259 background: var(--theme-highlight-lightorange);
269 /* Selected nodes in the tree should have light selected text.
270 theme-selected doesn't work in this case since the text is a
271 sibling of the class, not a child. */
272 .theme-selected ~ .editor,
273 .theme-selected ~ .editor .theme-fg-color1,
274 .theme-selected ~ .editor .theme-fg-color2,
275 .theme-selected ~ .editor .theme-fg-color3,
276 .theme-selected ~ .editor .theme-fg-color4,
277 .theme-selected ~ .editor .theme-fg-color5,
278 .theme-selected ~ .editor .theme-fg-color6,
279 .theme-selected ~ .editor .theme-fg-color7 {
280 color: var(--theme-selection-color);
283 /* Make sure even text nodes are white when selected in the Inspector panel. */
284 .theme-firebug .theme-selected ~ .editor .open,
285 .theme-firebug .theme-selected ~ .editor .close {
286 color: var(--theme-selection-color);
289 /* In case a node isn't displayed in the page, we fade the syntax highlighting */
290 .not-displayed .open,
291 .not-displayed .close {
302 margin-inline-start: 5px;
303 -moz-user-select: none;
307 background-color: var(--theme-body-color-alt);
308 color: var(--theme-body-background);