/* From content */
* {
- -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
:root {
}
.property-name {
- width: 50%;
+ /* -12px is so the expander triangle isn't pushed up above the property */
+ width: calc(100% - 12px);
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.property-value {
- width: 50%;
- max-width: 100%;
+ width: 100%;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 200px;
}
.property-value {
- width: auto;
+ /* -212px is accounting for the 200px property-name and the 12px triangle */
+ width: calc(100% - 212px);
}
}
}
.computedview-colorswatch {
- display: inline-block;
border-radius: 50%;
width: 1em;
height: 1em;
vertical-align: text-top;
-moz-margin-end: 5px;
+ display: inline-block;
+}
+
+.computedview-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%;
+ width: 1em;
+ height: 1em;
+ z-index: -1;
}