LCARStrek/devtools/markup-view.css

   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/. */
   4
   5 * {
   6   padding: 0;
   7   margin: 0;
   8 }
   9
  10 .more-nodes {
  11   padding-left: 16px;
  12 }
  13
  14 .styleinspector-propertyeditor {
  15   border: 1px solid #9C9CFF;
  16 }
  17
  18 /* Draw a circle next to nodes that have a pseudo class lock.
  19    Center vertically with the 1.4em line height on .tag-line */
  20 .child.pseudoclass-locked::before {
  21   content: "";
  22   background: var(--theme-highlight-lightorange);
  23   border-radius: 50%;
  24   width: .8em;
  25   height: .8em;
  26   margin-top: .3em;
  27   left: 1px;
  28   position: absolute;
  29 }
  30
  31 /* Selected nodes in the tree should have light selected text.
  32    theme-selected doesn't work in this case since the text is a
  33    sibling of the class, not a child. */
  34 .theme-selected ~ .editor,
  35 .theme-selected ~ .editor .theme-fg-color1,
  36 .theme-selected ~ .editor .theme-fg-color2,
  37 .theme-selected ~ .editor .theme-fg-color3,
  38 .theme-selected ~ .editor .theme-fg-color4,
  39 .theme-selected ~ .editor .theme-fg-color5,
  40 .theme-selected ~ .editor .theme-fg-color6,
  41 .theme-selected ~ .editor .theme-fg-color7 {
  42   color: var(--theme-selection-color);
  43 }
  44
  45 /* In case a node isn't displayed in the page, we fade the syntax highlighting */
  46 .not-displayed .open,
  47 .not-displayed .close {
  48   opacity: .7;
  49 }
  50
  51 .tag-line {
  52   padding-left: 2px;
  53 }
  54
  55 /* Preview */
  56
  57 #previewbar {
  58   position: fixed;
  59   top: 0;
  60   right: 0;
  61   width: 90px;
  62   background: black;
  63   border-left: 1px solid;
  64   border-bottom: 1px solid;
  65   overflow: hidden;
  66
  67   background: var(--theme-toolbar-background);
  68   border-color: var(--theme-splitter-color);
  69 }
  70
  71 #preview {
  72   position: absolute;
  73   top: 0;
  74   right: 5px;
  75   width: 80px;
  76   height: 100%;
  77   background-image: -moz-element(#root);
  78   background-repeat: no-repeat;
  79 }
  80
  81 #previewbar.hide,
  82 #previewbar.disabled {
  83   display: none;
  84 }
  85
  86 #viewbox {
  87   position: absolute;
  88   top: 0;
  89   right: 5px;
  90   width: 80px;
  91   border: 1px dashed #9C9CFF;
  92   background: #000000;
  93   outline: 1px solid transparent;
  94 }
  95
  96 /* Events */
  97 .markupview-events {
  98   font-size: 8px;
  99   font-weight: bold;
 100   line-height: 10px;
 101   border-radius: 3px;
 102   padding: 0px 2px;
 103   -moz-margin-start: 5px;
 104   -moz-user-select: none;
 105
 106   background-color: var(--theme-body-color-alt);
 107   color: var(--theme-body-background);
 108 }