LCARStrek/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   --rule-filter-icon: url("magnifying-glass.png");
  10 }
  11
  12 .ruleview {
  13   height: 100%;
  14 }
  15
  16 .ruleview-rule-source {
  17   text-align: end;
  18   float: right;
  19   -moz-user-select: none;
  20   margin-bottom: 2px;
  21 }
  22
  23 .ruleview-rule-source > label {
  24   cursor: pointer;
  25   margin: 0;
  26 }
  27
  28 .ruleview-rule-source[unselectable],
  29 .ruleview-rule-source[unselectable] > label {
  30   cursor: default;
  31 }
  32
  33 .ruleview-rule-source:not([unselectable]):hover {
  34   text-decoration: underline;
  35 }
  36
  37 .ruleview-header {
  38   border-top-width: 1px;
  39   border-bottom-width: 1px;
  40   border-top-style: solid;
  41   border-bottom-style: solid;
  42   padding: 1px 4px;
  43   margin-top: 4px;
  44   -moz-user-select: none;
  45   word-wrap: break-word;
  46 }
  47
  48 .ruleview-rule,
  49 #noResults {
  50   padding: 2px 4px;
  51 }
  52
  53 /**
  54  * Display rules that don't match the current selected element and uneditable
  55  * user agent styles differently
  56  */
  57 .ruleview-rule[unmatched=true],
  58 .ruleview-rule[uneditable=true] {
  59   background: var(--theme-toolbar-background);
  60 }
  61
  62 .ruleview-rule[uneditable=true] :focus {
  63   outline: none;
  64 }
  65
  66 .ruleview-rule[uneditable=true] .theme-link {
  67   color: var(--theme-text-blue);
  68 }
  69
  70 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
  71   visibility: hidden;
  72 }
  73
  74 .ruleview-rule[uneditable=true] .ruleview-colorswatch,
  75 .ruleview-rule[uneditable=true] .ruleview-bezierswatch {
  76   cursor: default;
  77 }
  78
  79 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
  80 .ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
  81 .ruleview-propertyvalue {
  82   border-bottom-color: transparent;
  83 }
  84
  85 #noResults {
  86   font: message-box;
  87   color: #8050B0;
  88 }
  89
  90 .ruleview-rule + .ruleview-rule {
  91   border-top-width: 1px;
  92   border-top-style: dotted;
  93 }
  94
  95 .ruleview-warning {
  96   background: url("images/alerticon-warning.png");
  97   -moz-margin-start: 5px;
  98   display: inline-block;
  99   width: 13px;
 100   height: 12px;
 101 }
 102
 103 @media (min-resolution: 1.1dppx) {
 104   .ruleview-warning {
 105     background-image: url("images/alerticon-warning@2x.png");
 106   }
 107 }
 108
 109 .ruleview-overridden-rule-filter {
 110   background-image: var(--rule-filter-icon);
 111   background-size: 11px 11px;
 112   -moz-margin-start: 5px;
 113   display: inline-block;
 114   width: 11px;
 115   height: 11px;
 116 }
 117
 118 .ruleview-ruleopen {
 119   -moz-padding-end: 5px;
 120 }
 121
 122 .ruleview-ruleclose {
 123   cursor: text;
 124   padding-right: 20px;
 125 }
 126
 127 .ruleview-propertylist {
 128   list-style: none;
 129   padding: 0;
 130   margin: 0;
 131 }
 132
 133 .ruleview-rule:not(:hover) .ruleview-enableproperty {
 134   visibility: hidden;
 135 }
 136
 137 .ruleview-expander {
 138   display: inline-block;
 139 }
 140
 141 .ruleview-newproperty {
 142   /* (enable checkbox width: 12px) + (expander width: 15px) */
 143   -moz-margin-start: 27px;
 144 }
 145
 146 .ruleview-namecontainer,
 147 .ruleview-propertyvaluecontainer,
 148 .ruleview-propertyname,
 149 .ruleview-propertyvalue {
 150   text-decoration: inherit;
 151 }
 152
 153 .ruleview-computedlist {
 154   list-style: none;
 155   padding: 0;
 156 }
 157
 158 .ruleview-computed {
 159   -moz-margin-start: 35px;
 160 }
 161
 162 .ruleview-swatch {
 163   cursor: pointer;
 164   border-radius: 50%;
 165   width: 0.9em;
 166   height: 0.9em;
 167   vertical-align: middle;
 168   -moz-margin-end: 5px;
 169   display: inline-block;
 170   position: relative;
 171 }
 172
 173 .ruleview-colorswatch::before {
 174   content: '';
 175   background-color: #9C9CFF;
 176   background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
 177                     linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
 178   background-size: 12px 12px;
 179   background-position: 0 0, 6px 6px;
 180   position: absolute;
 181   border-radius: 50%;
 182   top: 0;
 183   left: 0;
 184   right: 0;
 185   bottom: 0;
 186   z-index: -1;
 187 }
 188
 189 .ruleview-bezierswatch {
 190   background: url("chrome://devtools/skin/images/cubic-bezier-swatch.png");
 191   background-size: 1em;
 192 }
 193
 194 @media (min-resolution: 1.1dppx) {
 195   .ruleview-bezierswatch {
 196     background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png");
 197     background-size: 1em;
 198   }
 199 }
 200
 201 .ruleview-overridden {
 202   text-decoration: line-through;
 203 }
 204
 205 .styleinspector-propertyeditor {
 206   border: 1px solid #A09090;
 207   padding: 0;
 208 }
 209
 210 .ruleview-property {
 211   border-left: 3px solid transparent;
 212   clear: right;
 213 }
 214
 215 .ruleview-propertycontainer > * {
 216   vertical-align: middle;
 217 }
 218
 219 .ruleview-property[dirty] {
 220   border-left-color: var(--theme-highlight-green);
 221 }
 222
 223 .ruleview-highlight {
 224   background-color: var(--rule-highlight-background-color);
 225 }
 226
 227 .ruleview-namecontainer > .ruleview-propertyname,
 228 .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
 229   border-bottom: 1px dashed transparent;
 230 }
 231
 232 .ruleview-namecontainer:hover > .ruleview-propertyname,
 233 .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
 234   border-bottom-color: #008484;
 235 }
 236
 237 .ruleview-selectorcontainer {
 238   word-wrap: break-word;
 239   cursor: text;
 240 }
 241
 242 .ruleview-selector-separator, .ruleview-selector-unmatched {
 243   color: #8050B0;
 244 }
 245
 246 .ruleview-selector-matched > .ruleview-selector-attribute {
 247   /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
 248 }
 249
 250 .ruleview-selector-matched > .ruleview-selector-pseudo-class {
 251   /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
 252 }
 253
 254 .ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
 255   font-weight: bold;
 256   color: var(--theme-highlight-orange);
 257 }
 258
 259 .ruleview-selectorhighlighter {
 260   background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
 261   padding-left: 16px;
 262   margin-left: 5px;
 263   cursor: pointer;
 264 }
 265
 266 .ruleview-selectorhighlighter:hover {
 267   background-position: -32px 0;
 268 }
 269
 270 .ruleview-selectorhighlighter:active,
 271 .ruleview-selectorhighlighter.highlighted {
 272   background-position: -16px 0;
 273 }
 274
 275 #pseudo-class-panel:not([hidden]) {
 276   border-bottom: 1px solid var(--theme-splitter-color);
 277 }
 278
 279 #ruleview-add-rule-button::before {
 280   background-image: url("chrome://devtools/skin/images/add.svg#add");
 281   background-size: cover;
 282 }
 283 #ruleview-add-rule-button:hover::before {
 284   background-image: url("chrome://devtools/skin/images/add.svg#add-checked");
 285 }
 286
 287 #pseudo-class-panel-toggle::before {
 288   background-image: url("chrome://devtools/skin/pseudo-class.svg#pseudo-class");
 289   background-size: cover;
 290 }
 291 #pseudo-class-panel-toggle:hover::before,
 292 #pseudo-class-panel-toggle[checked]::before {
 293   background-image: url("chrome://devtools/skin/pseudo-class.svg#pseudo-class-checked");
 294   filter: none !important;
 295 }
 296
 297 /**
 298  * These buttons are using opacity instead of background color to indicate
 299  * the state
 300  */
 301 /*
 302 #ruleview-add-rule-button,
 303 #pseudo-class-panel-toggle,
 304 .ruleview-overridden-rule-filter {
 305   opacity: 0.8;
 306 }
 307
 308 #ruleview-add-rule-button:not([disabled]):hover,
 309 #pseudo-class-panel-toggle:hover,
 310 #pseudo-class-panel-toggle[checked],
 311 .ruleview-overridden-rule-filter:hover {
 312   opacity: 1;
 313 }
 314
 315 #ruleview-add-rule-button,
 316 #pseudo-class-panel-toggle,
 317 #pseudo-class-panel-toggle:hover,
 318 #pseudo-class-panel-toggle[checked]::before {
 319   background-color: transparent !important;
 320 }
 321 */