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