X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fdevtools%2Fmarkup-view.css;h=f257ffcae6948e9c51cf30055ea5bdf93e3efe1a;hp=0db502957e3d7a3f2590b1729b2d898f8e87be7f;hb=de5e780daa5242500976dde56483222a51ecdae5;hpb=7bc075b60dbf0a7a6a0fd49787e7315acbce49c2

diff --git a/LCARStrek/browser/devtools/markup-view.css b/LCARStrek/browser/devtools/markup-view.css
index 0db50295..f257ffca 100644
--- a/LCARStrek/browser/devtools/markup-view.css
+++ b/LCARStrek/browser/devtools/markup-view.css
@@ -7,67 +7,90 @@
   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-closed.gif");
 }
 
-.expander[expanded] {
-  background-image: url("chrome://global/skin/tree/twisty-open.gif");
+#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);
 }