LCARStrek/devtools/markup.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 :root {
   6   --markup-outline: var(--theme-splitter-color);
   7   font: 12px "Liberation Mono", Consolas, "Courier New", monospace;
   8 }
   9
  10 * {
  11   padding: 0;
  12   margin: 0;
  13 }
  14
  15 :root {
  16   -moz-control-character-visibility: visible;
  17 }
  18
  19 body {
  20   -moz-user-select: none;
  21 }
  22
  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 */
  26 #root {
  27   float: left;
  28   min-width: 100%;
  29 }
  30
  31 /* Don't display a parent-child outline for the root elements */
  32 #root > ul > li > .children {
  33   background: none;
  34 }
  35
  36 body.dragging .tag-line {
  37   cursor: grabbing;
  38 }
  39
  40 #root-wrapper:after {
  41    content: "";
  42    display: block;
  43    clear: both;
  44    position:relative;
  45 }
  46
  47 .html-editor {
  48   display: none;
  49   position: absolute;
  50   z-index: 2;
  51
  52   /* Use the same margin/padding trick used by .child tags to ensure that
  53    * the editor covers up any content to the left (including expander arrows
  54    * and hover effects). */
  55   margin-left: -1000em;
  56   padding-left: 1000em;
  57 }
  58
  59 .html-editor-inner {
  60   border: solid .1px;
  61   flex: 1 1 auto;
  62
  63   /* Keep the editor away from the markup view floating scrollbars */
  64   margin-inline-end: 12px;
  65 }
  66
  67 .html-editor iframe {
  68   height: 100%;
  69   width: 100%;
  70   border: none;
  71   margin: 0;
  72   padding: 0;
  73 }
  74
  75 .children {
  76   list-style: none;
  77   padding: 0;
  78   margin: 0;
  79 }
  80
  81 /* Tags are organized in a UL/LI tree and indented thanks to a left padding.
  82  * A very large padding is used in combination with a slightly smaller margin
  83  * to make sure childs actually span from edge-to-edge. */
  84 .child {
  85   margin-left: -1000em;
  86   padding-left: 1001em;
  87 }
  88
  89 /* Normally this element takes space in the layout even if it's position: relative
  90  * by adding height: 0 we let surrounding elements to fill the blank space */
  91 .child.dragging {
  92   position: relative;
  93   pointer-events: none;
  94   opacity: 0.7;
  95   z-index: 1;
  96   height: 0;
  97 }
  98
  99 /* Indicates a tag-line in the markup-view as being an active drop target by
 100  * drawing a horizontal line where the dragged element would be inserted if
 101  * dropped here */
 102 .tag-line.drop-target::before,
 103 .tag-line.drag-target::before {
 104   content: '';
 105   position: absolute;
 106   top: 0;
 107   width: 100%;
 108   /* Offset these by 1000px to make sure they cover the full width of the view */
 109   padding-left: 1000px;
 110   left: -1000px;
 111 }
 112
 113 .tag-line.drag-target::before {
 114   border-top: 2px solid var(--theme-content-color2);
 115 }
 116
 117 .tag-line.drop-target::before {
 118   border-top: 2px solid var(--theme-contrast-background);
 119 }
 120
 121 /* In case the indicator is put on the closing .tag-line, the indentation level
 122  * will become misleading, so we push it forward to match the indentation level */
 123 ul.children + .tag-line::before {
 124   margin-left: 14px;
 125 }
 126
 127 .tag-line {
 128   min-height: 1.4em;
 129   line-height: 1.4em;
 130   position: relative;
 131   cursor: default;
 132   padding-left: 2px;
 133 }
 134
 135 .tag-line[selected] + .children {
 136   background-image: linear-gradient(to top, var(--markup-outline), var(--markup-outline));
 137   background-repeat: no-repeat;
 138   /* Shorten the outline height by 4px to account for the 2px top padding and
 139    * allow for a 2px bottom padding */
 140   background-size: 1.5px calc(100% - 4px);
 141   /* Align the outline to under the expander arrow and provide 2px top
 142    * padding */
 143   background-position: -6px 2px;
 144   border-left: 6px solid transparent;
 145   margin-left: -6px;
 146 }
 147
 148 .html-editor-container {
 149   position: relative;
 150   min-height: 200px;
 151 }
 152
 153 /* This extra element placed in each tag is positioned absolutely to cover the
 154  * whole tag line and is used for background styling (when a selection is made
 155  * or when the tag is flashing) */
 156 .tag-line .tag-state {
 157   position: absolute;
 158   left: -1000em;
 159   right: 0;
 160   height: 100%;
 161   z-index: 0;
 162 }
 163
 164 .expander {
 165   display: inline-block;
 166   margin-left: -14px;
 167   vertical-align: middle;
 168   /* Make sure the expander still appears above the tag-state */
 169   position: relative;
 170   z-index: 1;
 171 }
 172
 173 .child.collapsed .child, .child.collapsed .children {
 174   display: none;
 175 }
 176
 177 .child > .tag-line:first-child .close {
 178   display: none;
 179 }
 180
 181 .child.collapsed > .tag-line:first-child .close {
 182   display: inline;
 183 }
 184
 185 .child.collapsed > .tag-line ~ .tag-line {
 186   display: none;
 187 }
 188
 189 .child.collapsed .close {
 190   display: inline;
 191 }
 192
 193 /* Hide HTML void elements (img, hr, br, …) closing tag when the element is not
 194  * expanded (it can be if it has pseudo-elements attached) */
 195 .child.collapsed > .tag-line .void-element .close {
 196   display: none;
 197 }
 198
 199 .closing-bracket {
 200   pointer-events: none;
 201 }
 202
 203 .newattr {
 204   display: inline-block;
 205   width: 1em;
 206   height: 1ex;
 207   margin-right: -1em;
 208   padding: 1px 0;
 209 }
 210
 211 .attr-value .link {
 212   text-decoration: underline;
 213 }
 214
 215 .newattr:focus {
 216   margin-right: 0;
 217 }
 218
 219 .flash-out {
 220   transition: background .5s;
 221 }
 222
 223 .markupview-events {
 224   display: none;
 225   cursor: pointer;
 226 }
 227
 228 .editor {
 229   /* Make sure the editor still appears above the tag-state */
 230   position: relative;
 231   z-index: 1;
 232 }
 233
 234 .editor.text {
 235   display: inline-block;
 236 }
 237
 238 .editor.text pre,
 239 .editor.comment pre {
 240   font: inherit;
 241 }
 242
 243 .more-nodes {
 244   padding-left: 16px;
 245 }
 246
 247 .styleinspector-propertyeditor {
 248   border: 1px solid #CCC;
 249 }
 250
 251 /* Draw a circle next to nodes that have a pseudo class lock.
 252    Center vertically with the 1.4em line height on .tag-line */
 253 .child.pseudoclass-locked::before {
 254   content: "";
 255   background: var(--theme-highlight-lightorange);
 256   border-radius: 50%;
 257   width: .8em;
 258   height: .8em;
 259   margin-top: .3em;
 260   left: 1px;
 261   position: absolute;
 262   z-index: 1;
 263 }
 264
 265 /* Selected nodes in the tree should have light selected text.
 266    theme-selected doesn't work in this case since the text is a
 267    sibling of the class, not a child. */
 268 .theme-selected ~ .editor,
 269 .theme-selected ~ .editor .theme-fg-color1,
 270 .theme-selected ~ .editor .theme-fg-color2,
 271 .theme-selected ~ .editor .theme-fg-color3,
 272 .theme-selected ~ .editor .theme-fg-color4,
 273 .theme-selected ~ .editor .theme-fg-color5,
 274 .theme-selected ~ .editor .theme-fg-color6,
 275 .theme-selected ~ .editor .theme-fg-color7 {
 276   color: var(--theme-selection-color);
 277 }
 278
 279 /* Make sure even text nodes are white when selected in the Inspector panel. */
 280 .theme-firebug .theme-selected ~ .editor .open,
 281 .theme-firebug .theme-selected ~ .editor .close {
 282   color: var(--theme-selection-color);
 283 }
 284
 285 /* In case a node isn't displayed in the page, we fade the syntax highlighting */
 286 .not-displayed .open,
 287 .not-displayed .close {
 288   opacity: .7;
 289 }
 290
 291 /* Events */
 292 .markupview-events {
 293   font-size: 8px;
 294   font-weight: bold;
 295   line-height: 10px;
 296   border-radius: 3px;
 297   padding: 0px 2px;
 298   margin-inline-start: 5px;
 299   -moz-user-select: none;
 300 }
 301
 302 .markupview-events {
 303   background-color: var(--theme-body-color-alt);
 304   color: var(--theme-body-background);
 305 }