LCARStrek/browser/devtools/ruleview.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 .ruleview {
   6   height: 100%;
   7 }
   8
   9 .ruleview-rule-source {
  10   -moz-padding-start: 5px;
  11   cursor: pointer;
  12   text-align: right;
  13   float: right;
  14   -moz-user-select: none;
  15 }
  16
  17 .ruleview-header {
  18   border-top-width: 1px;
  19   border-bottom-width: 1px;
  20   border-top-style: solid;
  21   border-bottom-style: solid;
  22   padding: 1px 4px;
  23   margin-top: 4px;
  24   -moz-user-select: none;
  25   word-wrap: break-word;
  26 }
  27
  28 .ruleview-rule-source:hover {
  29   text-decoration: underline;
  30 }
  31
  32 .ruleview-rule,
  33 #noResults {
  34   padding: 2px 4px;
  35 }
  36
  37 #noResults {
  38   font: message-box;
  39   color: #8050B0;
  40 }
  41
  42 .ruleview-rule + .ruleview-rule {
  43   border-top-width: 1px;
  44   border-top-style: dotted;
  45 }
  46
  47 .ruleview-warning {
  48   background: url("alerticon-warning.png");
  49   -moz-margin-start: 5px;
  50   display: inline-block;
  51   vertical-align: top;
  52   width: 13px;
  53   height: 12px;
  54 }
  55
  56 @media (min-resolution: 2dppx) {
  57   .ruleview-warning {
  58     background-image: url("alerticon-warning@2x.png");
  59   }
  60 }
  61
  62 .ruleview-ruleopen {
  63   -moz-padding-end: 5px;
  64 }
  65
  66 .ruleview-ruleclose {
  67   cursor: text;
  68   padding-right: 20px;
  69 }
  70
  71 .ruleview-propertylist {
  72   list-style: none;
  73   padding: 0;
  74   margin: 0;
  75 }
  76
  77 .ruleview-rule:not(:hover) .ruleview-enableproperty {
  78   visibility: hidden;
  79 }
  80
  81 .ruleview-expander {
  82   display: inline-block;
  83 }
  84
  85 .ruleview-newproperty {
  86   /* (enable checkbox width: 12px) + (expander width: 15px) */
  87   -moz-margin-start: 27px;
  88 }
  89
  90 .ruleview-namecontainer,
  91 .ruleview-propertycontainer,
  92 .ruleview-propertyname,
  93 .ruleview-propertyvalue {
  94   text-decoration: inherit;
  95 }
  96
  97 .ruleview-computedlist {
  98   list-style: none;
  99   padding: 0;
 100 }
 101
 102 .ruleview-computed {
 103   -moz-margin-start: 35px;
 104 }
 105
 106 .ruleview-colorswatch {
 107   border-radius: 50%;
 108   width: 1em;
 109   height: 1em;
 110   vertical-align: text-top;
 111   -moz-margin-end: 5px;
 112   display: inline-block;
 113 }
 114
 115 .ruleview-colorswatch::before {
 116   content: '';
 117   background-color: #9C9CFF;
 118   background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
 119                     linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
 120   background-size: 12px 12px;
 121   background-position: 0 0, 6px 6px;
 122   position: absolute;
 123   border-radius: 50%;
 124   width: 1em;
 125   height: 1em;
 126   z-index: -1;
 127 }
 128
 129 .ruleview-overridden {
 130   text-decoration: line-through;
 131 }
 132
 133 .styleinspector-propertyeditor {
 134   border: 1px solid #A09090;
 135   padding: 0;
 136 }
 137
 138 .ruleview-property {
 139   border-left: 3px solid transparent;
 140   clear: right;
 141 }
 142
 143 .ruleview-property  > * {
 144   vertical-align: middle;
 145 }
 146
 147 .ruleview-property[dirty] {
 148   border-left-color: #9C9CFF; /* Green */
 149 }
 150
 151 .ruleview-namecontainer > .ruleview-propertyname,
 152 .ruleview-propertycontainer > .ruleview-propertyvalue {
 153   border-bottom: 1px dashed transparent;
 154 }
 155
 156 .ruleview-namecontainer:hover > .ruleview-propertyname,
 157 .ruleview-propertycontainer:hover > .ruleview-propertyvalue {
 158   border-bottom-color: #008484;
 159 }
 160
 161 .ruleview-selector {
 162   word-wrap: break-word;
 163 }
 164
 165 .ruleview-selector-separator, .ruleview-selector-unmatched {
 166   color: #8050B0;
 167 }