tenfourfox/devtools/server/actors/highlighters.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/*
  The :-moz-native-anonymous selector prefix prevents the styles defined here
  from impacting web content.
  Indeed, this pseudo-class is only available to chrome code.
  This stylesheet is loaded as a ua stylesheet via the addon sdk, so having this
  pseudo-class is important.
  Having bug 1086532 fixed would make it possible to load this stylesheet in a
  <style scoped> node instead, directly in the native anonymous container
  element.
*/

:-moz-native-anonymous .highlighter-container {
  position: absolute;
  width: 100%;
  height: 100%;
  /* The container for all highlighters doesn't react to pointer-events by
     default. This is because most highlighters cover the whole viewport but
     don't contain UIs that need to be accessed.
     If your highlighter has UI that needs to be interacted with, add
     'pointer-events:auto;' on its container element. */
  pointer-events: none;
}

:-moz-native-anonymous .highlighter-container [hidden] {
  display: none;
}

/* Box model highlighter */

:-moz-native-anonymous .box-model-regions {
  opacity: 0.6;
}

/* Box model regions can be faded (see the onlyRegionArea option in
   highlighters.js) in order to only display certain regions. */
:-moz-native-anonymous .box-model-regions [faded] {
  display: none;
}

:-moz-native-anonymous .box-model-content {
  fill: #87ceeb;
}

:-moz-native-anonymous .box-model-padding {
  fill: #6a5acd;
}

:-moz-native-anonymous .box-model-border {
  fill: #444444;
}

:-moz-native-anonymous .box-model-margin {
  fill: #edff64;
}

:-moz-native-anonymous .box-model-content,
:-moz-native-anonymous .box-model-padding,
:-moz-native-anonymous .box-model-border,
:-moz-native-anonymous .box-model-margin {
  stroke: none;
}

:-moz-native-anonymous .box-model-guide-top,
:-moz-native-anonymous .box-model-guide-right,
:-moz-native-anonymous .box-model-guide-bottom,
:-moz-native-anonymous .box-model-guide-left {
  stroke: #08c;
  stroke-dasharray: 5 3;
  shape-rendering: crispEdges;
}

/* Highlighter - Node Infobar */

:-moz-native-anonymous .box-model-nodeinfobar-container {
  position: absolute;
  max-width: 95%;

  font: message-box;
  font-size: 11px;
}

:-moz-native-anonymous .box-model-nodeinfobar {
  position: relative;

  /* Centering the nodeinfobar in the container */
  left: -50%;

  padding: 5px;
  min-width: 75px;

  border-radius: 3px;
  background: hsl(214,13%,24%) no-repeat padding-box;

  color: hsl(216,33%,97%);
  text-shadow: none;
}

:-moz-native-anonymous .box-model-nodeinfobar-container[hide-arrow] > .box-model-nodeinfobar {
  margin: 7px 0;
}

/* Arrows */

:-moz-native-anonymous .box-model-nodeinfobar-container > .box-model-nodeinfobar:before {
  content: "";
  display: none;

  position: absolute;
  left: calc(50% - 8px);

  height: 0;
  width: 0;
  border: 8px solid hsl(214,13%,24%);
  border-left-color: transparent;
  border-right-color: transparent;
}

:-moz-native-anonymous .box-model-nodeinfobar-container[position="top"]:not([hide-arrow]) > .box-model-nodeinfobar:before {
  border-bottom: 0;
  top: 100%;
  display: block;
}

:-moz-native-anonymous .box-model-nodeinfobar-container[position="bottom"]:not([hide-arrow]) > .box-model-nodeinfobar:before {
  border-top: 0;
  bottom: 100%;
  display: block;
}

/* Text container */

:-moz-native-anonymous .box-model-nodeinfobar-text {
  overflow: hidden;
  white-space: nowrap;
  direction: ltr;
  text-align: center;
  padding-bottom: 1px;
}

:-moz-native-anonymous .box-model-nodeinfobar-tagname {
  color: hsl(285,100%,75%);
  text-transform: lowercase;
}

:-moz-native-anonymous .box-model-nodeinfobar-id {
  color: hsl(103,46%,54%);
}

:-moz-native-anonymous .box-model-nodeinfobar-classes,
:-moz-native-anonymous .box-model-nodeinfobar-pseudo-classes {
  color: hsl(200,74%,57%);
}

:-moz-native-anonymous .box-model-nodeinfobar-dimensions {
  color: hsl(210,30%,85%);
  -moz-border-start: 1px solid #5a6169;
  -moz-margin-start: 6px;
  -moz-padding-start: 6px;
}

/* Css transform highlighter */

:-moz-native-anonymous .css-transform-transformed {
  fill: #80d4ff;
  opacity: 0.8;
}

:-moz-native-anonymous .css-transform-untransformed {
  fill: #66cc52;
  opacity: 0.8;
}

:-moz-native-anonymous .css-transform-transformed,
:-moz-native-anonymous .css-transform-untransformed,
:-moz-native-anonymous .css-transform-line {
  stroke: #08c;
  stroke-dasharray: 5 3;
  stroke-width: 2;
}

/* Rect highlighter */

:-moz-native-anonymous .highlighted-rect {
  position: absolute;
  background: #80d4ff;
  opacity: 0.8;
}

/* Element geometry highlighter */

:-moz-native-anonymous .geometry-editor-root {
  /* The geometry editor can be interacted with, so it needs to react to
     pointer events */
  pointer-events: auto;
}

:-moz-native-anonymous .geometry-editor-offset-parent {
  stroke: #08c;
  shape-rendering: crispEdges;
  stroke-dasharray: 5 3;
  fill: transparent;
}

:-moz-native-anonymous .geometry-editor-current-node {
  stroke: #08c;
  shape-rendering: crispEdges;
  fill: #87ceeb;
  opacity: 0.6;
}

:-moz-native-anonymous .geometry-editor-arrow {
  stroke: #08c;
  shape-rendering: crispEdges;
}

:-moz-native-anonymous .geometry-editor-label-bubble {
  fill: hsl(214,13%,24%);
  shape-rendering: crispEdges;
}

:-moz-native-anonymous .geometry-editor-label-text {
  fill: hsl(216,33%,97%);
  font: message-box;
  font-size: 10px;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Rules highlighter */

:-moz-native-anonymous .rulers-highlighter-elements {
  shape-rendering: crispEdges;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
}

:-moz-native-anonymous .rulers-highlighter-elements > g {
  opacity: 0.8;
}

:-moz-native-anonymous .rulers-highlighter-elements > g > rect {
  fill: #fff;
}

:-moz-native-anonymous .rulers-highlighter-ruler-graduations {
  stroke: #bebebe;
}

:-moz-native-anonymous .rulers-highlighter-ruler-markers {
  stroke: #202020;
}

:-moz-native-anonymous .rulers-highlighter-horizontal-labels > text,
:-moz-native-anonymous .rulers-highlighter-vertical-labels > text {
  stroke: none;
  fill: #202020;
  font: message-box;
  font-size: 9px;
  dominant-baseline: hanging;
}

:-moz-native-anonymous .rulers-highlighter-horizontal-labels > text {
  text-anchor: left;
}

:-moz-native-anonymous .rulers-highlighter-vertical-labels > text {
  transform: rotate(-90deg);
  text-anchor: end;
}

/* Measuring Tool highlighter */

:-moz-native-anonymous .measuring-tool-highlighter-root {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
  cursor: crosshair;
}

:-moz-native-anonymous .measuring-tool-highlighter-root path {
  shape-rendering: crispEdges;
  fill: rgba(135, 206, 235, 0.6);
  stroke: #08c;
  pointer-events: none;
}

:-moz-native-anonymous .dragging path {
  fill: rgba(135, 206, 235, 0.6);
  stroke: #08c;
  opacity: 0.45;
}

:-moz-native-anonymous .measuring-tool-highlighter-label-size,
:-moz-native-anonymous .measuring-tool-highlighter-label-position {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  border-radius: 4px;
  padding: 4px;
  white-space: pre-line;
  font: message-box;
  font-size: 10px;
  pointer-events: none;
  -moz-user-select: none;
  box-sizing: border-box;
}

:-moz-native-anonymous .measuring-tool-highlighter-label-position {
  color: #fff;
  background: hsla(214, 13%, 24%, 0.8);
}

:-moz-native-anonymous .measuring-tool-highlighter-label-size {
  color: hsl(216, 33%, 97%);
  background: hsl(214, 13%, 24%);
  line-height: 1.5em;
}

:-moz-native-anonymous .measuring-tool-highlighter-guide-top,
:-moz-native-anonymous .measuring-tool-highlighter-guide-right,
:-moz-native-anonymous .measuring-tool-highlighter-guide-bottom,
:-moz-native-anonymous .measuring-tool-highlighter-guide-left {
  stroke: #08c;
  stroke-dasharray: 5 3;
  shape-rendering: crispEdges;
}