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 html.dragging {
  37   overflow-x: hidden;
  38 }
  39
  40 body.dragging .tag-line {
  41   cursor: grabbing;
  42 }
  43
  44 #root-wrapper:after {
  45    content: "";
  46    display: block;
  47    clear: both;
  48    position:relative;
  49 }
  50
  51 .html-editor {
  52   display: none;
  53   position: absolute;
  54   z-index: 2;
  55
  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). */
  59   margin-left: -1000em;
  60   padding-left: 1000em;
  61 }
  62
  63 .html-editor-inner {
  64   border: solid .1px;
  65   flex: 1 1 auto;
  66
  67   /* Keep the editor away from the markup view floating scrollbars */
  68   margin-inline-end: 12px;
  69 }
  70
  71 .html-editor iframe {
  72   height: 100%;
  73   width: 100%;
  74   border: none;
  75   margin: 0;
  76   padding: 0;
  77 }
  78
  79 .children {
  80   list-style: none;
  81   padding: 0;
  82   margin: 0;
  83 }
  84
  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. */
  88 .child {
  89   margin-left: -1000em;
  90   padding-left: 1001em;
  91 }
  92
  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 */
  95 .child.dragging {
  96   position: relative;
  97   pointer-events: none;
  98   opacity: 0.7;
  99   z-index: 1;
 100   height: 0;
 101 }
 102
 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
 105  * dropped here */
 106 .tag-line.drop-target::before,
 107 .tag-line.drag-target::before {
 108   content: '';
 109   position: absolute;
 110   top: 0;
 111   width: 100%;
 112   /* Offset these by 1000px to make sure they cover the full width of the view */
 113   padding-left: 1000px;
 114   left: -1000px;
 115 }
 116
 117 .tag-line.drag-target::before {
 118   border-top: 2px solid var(--theme-content-color2);
 119 }
 120
 121 .tag-line.drop-target::before {
 122   border-top: 2px solid var(--theme-contrast-background);
 123 }
 124
 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 {
 128   margin-left: 14px;
 129 }
 130
 131 .tag-line {
 132   min-height: 1.4em;
 133   line-height: 1.4em;
 134   position: relative;
 135   cursor: default;
 136   padding-left: 2px;
 137 }
 138
 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
 146    * padding */
 147   background-position: -6px 2px;
 148   border-left: 6px solid transparent;
 149   margin-left: -6px;
 150 }
 151
 152 .html-editor-container {
 153   position: relative;
 154   min-height: 200px;
 155 }
 156
 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 {
 161   position: absolute;
 162   left: -1000em;
 163   right: 0;
 164   height: 100%;
 165   z-index: 0;
 166 }
 167
 168 .expander {
 169   display: inline-block;
 170   margin-left: -14px;
 171   vertical-align: middle;
 172   /* Make sure the expander still appears above the tag-state */
 173   position: relative;
 174   z-index: 1;
 175 }
 176
 177 .child.collapsed .child, .child.collapsed .children {
 178   display: none;
 179 }
 180
 181 .child > .tag-line:first-child .close {
 182   display: none;
 183 }
 184
 185 .child.collapsed > .tag-line:first-child .close {
 186   display: inline;
 187 }
 188
 189 .child.collapsed > .tag-line ~ .tag-line {
 190   display: none;
 191 }
 192
 193 .child.collapsed .close {
 194   display: inline;
 195 }
 196
 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 {
 200   display: none;
 201 }
 202
 203 .closing-bracket {
 204   pointer-events: none;
 205 }
 206
 207 .newattr {
 208   display: inline-block;
 209   width: 1em;
 210   height: 1ex;
 211   margin-right: -1em;
 212   padding: 1px 0;
 213 }
 214
 215 .attr-value .link {
 216   text-decoration: underline;
 217 }
 218
 219 .newattr:focus {
 220   margin-right: 0;
 221 }
 222
 223 .flash-out {
 224   transition: background .5s;
 225 }
 226
 227 .markupview-events {
 228   display: none;
 229   cursor: pointer;
 230 }
 231
 232 .editor {
 233   /* Make sure the editor still appears above the tag-state */
 234   position: relative;
 235   z-index: 1;
 236 }
 237
 238 .editor.text {
 239   display: inline-block;
 240 }
 241
 242 .editor.text pre,
 243 .editor.comment pre {
 244   font: inherit;
 245 }
 246
 247 .more-nodes {
 248   padding-left: 16px;
 249 }
 250
 251 .styleinspector-propertyeditor {
 252   border: 1px solid #CCC;
 253 }
 254
 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 {
 258   content: "";
 259   background: var(--theme-highlight-lightorange);
 260   border-radius: 50%;
 261   width: .8em;
 262   height: .8em;
 263   margin-top: .3em;
 264   left: 1px;
 265   position: absolute;
 266   z-index: 1;
 267 }
 268
 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);
 281 }
 282
 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);
 287 }
 288
 289 /* In case a node isn't displayed in the page, we fade the syntax highlighting */
 290 .not-displayed .open,
 291 .not-displayed .close {
 292   opacity: .7;
 293 }
 294
 295 /* Events */
 296 .markupview-events {
 297   font-size: 8px;
 298   font-weight: bold;
 299   line-height: 10px;
 300   border-radius: 3px;
 301   padding: 0px 2px;
 302   margin-inline-start: 5px;
 303   -moz-user-select: none;
 304 }
 305
 306 .markupview-events {
 307   background-color: var(--theme-body-color-alt);
 308   color: var(--theme-body-background);
 309 }