+ display: inline-block;
+ position: relative;
+}
+
+.ruleview-colorswatch::before {
+ content: '';
+ background-color: #9C9CFF;
+ background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090),
+ linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090);
+ background-size: 12px 12px;
+ background-position: 0 0, 6px 6px;
+ position: absolute;
+ border-radius: 50%;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: -1;
+}
+
+.ruleview-bezierswatch {
+ background: url("chrome://browser/skin/devtools/cubic-bezier-swatch.png");
+ background-size: 1em;
+}
+
+@media (min-resolution: 1.25dppx) {
+ .ruleview-bezierswatch {
+ background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png");
+ background-size: 1em;
+ }