margin: 0;
}
-body {
- font: message-box;
- background-color: #000000;
- color: #FF9F00;
+.more-nodes {
+ padding-left: 16px;
}
-.tagname {
- color: #FFCF00;
-}
-
-.attrname {
- color: #9C9CFF;
+.styleinspector-propertyeditor {
+ border: 1px solid #9C9CFF;
}
-.attrvalue {
- color: #E7ADE7;
-}
-.newattr {
- cursor: pointer;
+/* 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);
}
-.comment {
- color: #8050B0;
+/* In case a node isn't displayed in the page, we fade the syntax highlighting */
+.not-displayed .open,
+.not-displayed .close {
+ opacity: .7;
}
-.selected {
- background-color: #008484;
+.tag-line {
+ padding-left: 2px;
}
-/* Give some padding to focusable elements to match the editor input
- * that will replace them. */
-span[tabindex] {
- display: inline-block;
- padding: 1px 0;
-}
+/* Preview */
-li.container {
- position: relative;
- padding: 2px 0 0 2px;
-}
+#previewbar {
+ position: fixed;
+ top: 0;
+ right: 0;
+ width: 90px;
+ background: black;
+ border-left: 1px solid;
+ border-bottom: 1px solid;
+ overflow: hidden;
-.codebox {
- padding-left: 14px;
+ background: var(--theme-toolbar-background);
+ border-color: var(--theme-splitter-color);
}
-.expander {
+#preview {
position: absolute;
- top: 5px;
- left: 0;
- width: 14px;
- height: 14px;
+ top: 0;
+ right: 5px;
+ width: 80px;
+ height: 100%;
+ background-image: -moz-element(#root);
background-repeat: no-repeat;
- background-position: center;
- background-image: url("chrome://global/skin/tree/twisty-clsd.png");
}
-.expander[expanded] {
- background-image: url("chrome://global/skin/tree/twisty-open.png");
+#previewbar.hide,
+#previewbar.disabled {
+ display: none;
}
-.styleinspector-propertyeditor {
- border: 1px solid #9C9CFF;
+#viewbox {
+ position: absolute;
+ top: 0;
+ right: 5px;
+ width: 80px;
+ border: 1px dashed #9C9CFF;
+ background: #000000;
+ outline: 1px solid transparent;
+}
+
+/* Events */
+.markupview-events {
+ font-size: 8px;
+ font-weight: bold;
+ line-height: 10px;
+ border-radius: 3px;
+ padding: 0px 2px;
+ -moz-margin-start: 5px;
+ -moz-user-select: none;
+
+ background-color: var(--theme-body-color-alt);
+ color: var(--theme-body-background);
}