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   text-align: end;
  12   float: right;
  13   -moz-user-select: none;
  14 }
  15
  16 .ruleview-rule-source,
  17 .ruleview-rule-source > label {
  18   cursor: pointer;
  19 }
  20
  21 .ruleview-rule-source[unselectable],
  22 .ruleview-rule-source[unselectable] > label {
  23   cursor: default;
  24 }
  25
  26 .ruleview-rule-source:not([unselectable]):hover {
  27   text-decoration: underline;
  28 }
  29
  30 .ruleview-header {
  31   border-top-width: 1px;
  32   border-bottom-width: 1px;
  33   border-top-style: solid;
  34   border-bottom-style: solid;
  35   padding: 1px 4px;
  36   margin-top: 4px;
  37   -moz-user-select: none;
  38   word-wrap: break-word;
  39 }
  40
  41 .ruleview-rule,
  42 #noResults {
  43   padding: 2px 4px;
  44 }
  45
  46 /* User agent styles are not editable, display them differently */
  47 .theme-dark .ruleview-rule[uneditable=true] {
  48   background: #A09090; /* Tab Toolbar */
  49 }
  50
  51 .ruleview-rule[uneditable=true] :focus {
  52   outline: none;
  53 }
  54
  55 .ruleview-rule[uneditable=true] .theme-link {
  56   color: #336699; /* Blue - Grey */
  57 }
  58
  59 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
  60   visibility: hidden;
  61 }
  62
  63 .ruleview-rule[uneditable=true] .ruleview-colorswatch,
  64 .ruleview-rule[uneditable=true] .ruleview-bezierswatch {
  65   cursor: default;
  66 }
  67
  68
  69 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
  70 .ruleview-rule[uneditable=true] .ruleview-propertycontainer > .ruleview-propertyvalue {
  71   border-bottom-color: transparent;
  72 }
  73
  74 #noResults {
  75   font: message-box;
  76   color: #8050B0;
  77 }
  78
  79 .ruleview-rule + .ruleview-rule {
  80   border-top-width: 1px;
  81   border-top-style: dotted;
  82 }
  83
  84 .ruleview-warning {
  85   background: url("alerticon-warning.png");
  86   -moz-margin-start: 5px;
  87   display: inline-block;
  88   vertical-align: top;
  89   width: 13px;
  90   height: 12px;
  91 }
  92
  93 @media (min-resolution: 2dppx) {
  94   .ruleview-warning {
  95     background-image: url("alerticon-warning@2x.png");
  96   }
  97 }
  98
  99 .ruleview-ruleopen {
 100   -moz-padding-end: 5px;
 101 }
 102
 103 .ruleview-ruleclose {
 104   cursor: text;
 105   padding-right: 20px;
 106 }
 107
 108 .ruleview-propertylist {
 109   list-style: none;
 110   padding: 0;
 111   margin: 0;
 112 }
 113
 114 .ruleview-rule:not(:hover) .ruleview-enableproperty {
 115   visibility: hidden;
 116 }
 117
 118 .ruleview-expander {
 119   display: inline-block;
 120 }
 121
 122 .ruleview-newproperty {
 123   /* (enable checkbox width: 12px) + (expander width: 15px) */
 124   -moz-margin-start: 27px;
 125 }
 126
 127 .ruleview-namecontainer,
 128 .ruleview-propertycontainer,
 129 .ruleview-propertyname,
 130 .ruleview-propertyvalue {
 131   text-decoration: inherit;
 132 }
 133
 134 .ruleview-computedlist {
 135   list-style: none;
 136   padding: 0;
 137 }
 138
 139 .ruleview-computed {
 140   -moz-margin-start: 35px;
 141 }
 142
 143 .ruleview-colorswatch,
 144 .ruleview-bezierswatch {
 145   cursor: pointer;
 146   border-radius: 50%;
 147   width: 1em;
 148   height: 1em;
 149   vertical-align: text-top;
 150   -moz-margin-end: 5px;
 151   display: inline-block;
 152   position: relative;
 153 }
 154
 155 .ruleview-colorswatch::before {
 156   content: '';
 157   background-color: #9C9CFF;
 158   background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
 159                     linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
 160   background-size: 12px 12px;
 161   background-position: 0 0, 6px 6px;
 162   position: absolute;
 163   border-radius: 50%;
 164   top: 0;
 165   left: 0;
 166   right: 0;
 167   bottom: 0;
 168   z-index: -1;
 169 }
 170
 171 .ruleview-bezierswatch {
 172   background: url("chrome://browser/skin/devtools/cubic-bezier-swatch.png");
 173   background-size: 1em;
 174 }
 175
 176 @media (min-resolution: 2dppx) {
 177   .ruleview-bezierswatch {
 178     background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png");
 179     background-size: 1em;
 180   }
 181 }
 182
 183 .ruleview-overridden {
 184   text-decoration: line-through;
 185 }
 186
 187 .styleinspector-propertyeditor {
 188   border: 1px solid #A09090;
 189   padding: 0;
 190 }
 191
 192 .ruleview-property {
 193   border-left: 3px solid transparent;
 194   clear: right;
 195 }
 196
 197 .ruleview-property  > * {
 198   vertical-align: middle;
 199 }
 200
 201 .ruleview-property[dirty] {
 202   border-left-color: #9C9CFF; /* Green */
 203 }
 204
 205 .ruleview-namecontainer > .ruleview-propertyname,
 206 .ruleview-propertycontainer > .ruleview-propertyvalue {
 207   border-bottom: 1px dashed transparent;
 208 }
 209
 210 .ruleview-namecontainer:hover > .ruleview-propertyname,
 211 .ruleview-propertycontainer:hover > .ruleview-propertyvalue {
 212   border-bottom-color: #008484;
 213 }
 214
 215 .ruleview-selector {
 216   word-wrap: break-word;
 217 }
 218
 219 .ruleview-selector-separator, .ruleview-selector-unmatched {
 220   color: #8050B0;
 221 }