LCARStrek/browser/devtools/highlighter.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   The :-moz-native-anonymous selector prefix prevents the styles defined here
   7   from impacting web content.
   8   Indeed, this pseudo-class is only available to chrome code.
   9   This stylesheet is loaded as a ua stylesheet via the addon sdk, so having this
  10   pseudo-class is important.
  11   Having bug 1086532 fixed would make it possible to load this stylesheet in a
  12   <style scoped> node instead, directly in the native anonymous container
  13   element.
  14 */
  15
  16 :-moz-native-anonymous .highlighter-container {
  17   pointer-events: none;
  18   position: absolute;
  19   width: 100%;
  20   height: 100%;
  21 }
  22
  23 :-moz-native-anonymous .highlighter-container [hidden] {
  24   display: none;
  25 }
  26
  27 /* Box model highlighter */
  28 :-moz-native-anonymous .box-model-container {
  29   opacity: 0.4;
  30 }
  31
  32 :-moz-native-anonymous .box-model-content {
  33   fill: #008484;
  34 }
  35
  36 :-moz-native-anonymous .box-model-padding {
  37   fill: #9C9CFF;
  38 }
  39
  40 :-moz-native-anonymous .box-model-border {
  41   fill: #FFCF00;
  42 }
  43
  44 :-moz-native-anonymous .box-model-margin {
  45   fill: #A09090;
  46 }
  47
  48 :-moz-native-anonymous .box-model-content,
  49 :-moz-native-anonymous .box-model-padding,
  50 :-moz-native-anonymous .box-model-border,
  51 :-moz-native-anonymous .box-model-margin {
  52   stroke: none;
  53 }
  54
  55 :-moz-native-anonymous .box-model-guide-top,
  56 :-moz-native-anonymous .box-model-guide-right,
  57 :-moz-native-anonymous .box-model-guide-bottom,
  58 :-moz-native-anonymous .box-model-guide-left {
  59   stroke: #E7ADE7;
  60   stroke-dasharray: 5 3;
  61   shape-rendering: crispEdges;
  62 }
  63
  64 /* Highlighter - Node Infobar */
  65
  66 :-moz-native-anonymous .box-model-nodeinfobar-container {
  67   position: absolute;
  68   max-width: 95%;
  69
  70   font: message-box;
  71   font-size: 11px;
  72 }
  73
  74 :-moz-native-anonymous .box-model-nodeinfobar {
  75   position: relative;
  76
  77   /* Centering the nodeinfobar in the container */
  78   left: -50%;
  79
  80   padding: 5px;
  81   min-width: 75px;
  82
  83   border-radius: 3px;
  84   background: #000000 no-repeat padding-box;
  85
  86   color: #FF9F00;
  87 }
  88
  89 :-moz-native-anonymous .box-model-nodeinfobar-container[hide-arrow] > .box-model-nodeinfobar {
  90   margin: 7px 0;
  91 }
  92
  93 /* Arrows */
  94
  95 :-moz-native-anonymous .box-model-nodeinfobar-container > .box-model-nodeinfobar:before {
  96   content: "";
  97   display: none;
  98
  99   position: absolute;
 100   left: calc(50% - 14px);
 101
 102   height: 0;
 103   width: 0;
 104   border: 14px solid #008484;
 105   border-left-color: transparent;
 106   border-right-color: transparent;
 107 }
 108
 109 :-moz-native-anonymous .box-model-nodeinfobar-container[position="top"]:not([hide-arrow]) > .box-model-nodeinfobar:before {
 110   border-bottom: 0;
 111   top: 100%;
 112   display: block;
 113 }
 114
 115 :-moz-native-anonymous .box-model-nodeinfobar-container[position="bottom"]:not([hide-arrow]) > .box-model-nodeinfobar:before {
 116   border-top: 0;
 117   bottom: 100%;
 118   display: block;
 119 }
 120
 121 /* Text container */
 122
 123 :-moz-native-anonymous .box-model-nodeinfobar-text {
 124   overflow: hidden;
 125   white-space: nowrap;
 126   direction: ltr;
 127   text-align: center;
 128   padding-bottom: 1px;
 129 }
 130
 131 :-moz-native-anonymous .highlighter-nodeinfobar-tagname {
 132   color: #FFCF00;
 133 }
 134
 135 :-moz-native-anonymous .highlighter-nodeinfobar-id {
 136   color: #9C9CFF;
 137 }
 138
 139 :-moz-native-anonymous .highlighter-nodeinfobar-classes,
 140 :-moz-native-anonymous .highlighter-nodeinfobar-pseudo-classes {
 141   color: #FF9F00;
 142 }
 143
 144 :-moz-native-anonymous .highlighter-nodeinfobar-dimensions {
 145   color: #A09090;
 146   -moz-border-start: 1px solid #9C9CFF;
 147   -moz-margin-start: 6px;
 148   -moz-padding-start: 6px;
 149 }
 150
 151 /* Css transform highlighter */
 152
 153 :-moz-native-anonymous .css-transform-transformed {
 154   fill: #9C9CFF;
 155   opacity: 0.8;
 156 }
 157
 158 :-moz-native-anonymous .css-transform-untransformed {
 159   fill: #A09090;
 160   opacity: 0.8;
 161 }
 162
 163 :-moz-native-anonymous .css-transform-transformed,
 164 :-moz-native-anonymous .css-transform-untransformed,
 165 :-moz-native-anonymous .css-transform-line {
 166   stroke: #E7ADE7;
 167   stroke-dasharray: 5 3;
 168   stroke-width: 2;
 169 }