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: right;
  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   cursor: default;
  65 }
  66
  67
  68 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
  69 .ruleview-rule[uneditable=true] .ruleview-propertycontainer > .ruleview-propertyvalue {
  70   border-bottom-color: transparent;
  71 }
  72
  73 #noResults {
  74   font: message-box;
  75   color: #8050B0;
  76 }
  77
  78 .ruleview-rule + .ruleview-rule {
  79   border-top-width: 1px;
  80   border-top-style: dotted;
  81 }
  82
  83 .ruleview-warning {
  84   background: url("alerticon-warning.png");
  85   -moz-margin-start: 5px;
  86   display: inline-block;
  87   vertical-align: top;
  88   width: 13px;
  89   height: 12px;
  90 }
  91
  92 @media (min-resolution: 2dppx) {
  93   .ruleview-warning {
  94     background-image: url("alerticon-warning@2x.png");
  95   }
  96 }
  97
  98 .ruleview-ruleopen {
  99   -moz-padding-end: 5px;
 100 }
 101
 102 .ruleview-ruleclose {
 103   cursor: text;
 104   padding-right: 20px;
 105 }
 106
 107 .ruleview-propertylist {
 108   list-style: none;
 109   padding: 0;
 110   margin: 0;
 111 }
 112
 113 .ruleview-rule:not(:hover) .ruleview-enableproperty {
 114   visibility: hidden;
 115 }
 116
 117 .ruleview-expander {
 118   display: inline-block;
 119 }
 120
 121 .ruleview-newproperty {
 122   /* (enable checkbox width: 12px) + (expander width: 15px) */
 123   -moz-margin-start: 27px;
 124 }
 125
 126 .ruleview-namecontainer,
 127 .ruleview-propertycontainer,
 128 .ruleview-propertyname,
 129 .ruleview-propertyvalue {
 130   text-decoration: inherit;
 131 }
 132
 133 .ruleview-computedlist {
 134   list-style: none;
 135   padding: 0;
 136 }
 137
 138 .ruleview-computed {
 139   -moz-margin-start: 35px;
 140 }
 141
 142 .ruleview-colorswatch {
 143   cursor: pointer;
 144   border-radius: 50%;
 145   width: 1em;
 146   height: 1em;
 147   vertical-align: text-top;
 148   -moz-margin-end: 5px;
 149   display: inline-block;
 150   position: relative;
 151 }
 152
 153 .ruleview-colorswatch::before {
 154   content: '';
 155   background-color: #9C9CFF;
 156   background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
 157                     linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
 158   background-size: 12px 12px;
 159   background-position: 0 0, 6px 6px;
 160   position: absolute;
 161   border-radius: 50%;
 162   top: 0;
 163   left: 0;
 164   right: 0;
 165   bottom: 0;
 166   z-index: -1;
 167 }
 168
 169 .ruleview-overridden {
 170   text-decoration: line-through;
 171 }
 172
 173 .styleinspector-propertyeditor {
 174   border: 1px solid #A09090;
 175   padding: 0;
 176 }
 177
 178 .ruleview-property {
 179   border-left: 3px solid transparent;
 180   clear: right;
 181 }
 182
 183 .ruleview-property  > * {
 184   vertical-align: middle;
 185 }
 186
 187 .ruleview-property[dirty] {
 188   border-left-color: #9C9CFF; /* Green */
 189 }
 190
 191 .ruleview-namecontainer > .ruleview-propertyname,
 192 .ruleview-propertycontainer > .ruleview-propertyvalue {
 193   border-bottom: 1px dashed transparent;
 194 }
 195
 196 .ruleview-namecontainer:hover > .ruleview-propertyname,
 197 .ruleview-propertycontainer:hover > .ruleview-propertyvalue {
 198   border-bottom-color: #008484;
 199 }
 200
 201 .ruleview-selector {
 202   word-wrap: break-word;
 203 }
 204
 205 .ruleview-selector-separator, .ruleview-selector-unmatched {
 206   color: #8050B0;
 207 }