Fri, 16 Jan 2015 18:13:44 +0100
Integrate suggestion from review to improve consistency with existing code.
1 /* vim:set ts=2 sw=2 sts=2 et: */
2 /* This Source Code Form is subject to the terms of the Mozilla Public
3 * License, v. 2.0. If a copy of the MPL was not distributed with this
4 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
6 * {
7 box-sizing: border-box;
8 }
10 :root {
11 height: 100%;
12 }
14 body {
15 margin: 0;
16 display : flex;
17 flex-direction: column;
18 height: 100%;
19 }
21 #propertyContainer {
22 -moz-user-select: text;
23 overflow: auto;
24 min-height: 0;
25 flex: 1;
26 }
28 .property-view-hidden,
29 .property-content-hidden {
30 display: none;
31 }
33 .property-view {
34 clear: both;
35 padding: 2px 0 2px 17px;
36 }
38 .property-view > * {
39 display: inline-block;
40 vertical-align: middle;
41 }
43 .property-name {
44 /* -12px is so the expander triangle isn't pushed up above the property */
45 width: calc(100% - 12px);
46 overflow-x: hidden;
47 text-overflow: ellipsis;
48 white-space: nowrap;
49 outline: 0;
50 }
52 .property-value {
53 width: 100%;
54 overflow-x: hidden;
55 text-overflow: ellipsis;
56 white-space: nowrap;
57 background-image: url(arrow-e.png);
58 background-repeat: no-repeat;
59 background-size: 5px 8px;
60 background-position: 2px center;
61 padding-left: 10px;
62 outline: 0;
63 }
65 .other-property-value {
66 background-image: url(arrow-e.png);
67 background-repeat: no-repeat;
68 background-size: 5px 8px;
69 background-position: left center;
70 padding-left: 8px;
71 }
73 @media (min-width: 400px) {
74 .property-name {
75 width: 200px;
76 }
77 .property-value {
78 /* -212px is accounting for the 200px property-name and the 12px triangle */
79 width: calc(100% - 212px);
80 }
81 }
83 .property-content {
84 padding-left: 17px;
85 }
87 /* From skin */
88 .expander {
89 visibility: hidden;
90 margin-left: -12px!important;
91 }
93 .expandable {
94 visibility: visible;
95 }
97 .match {
98 visibility: hidden;
99 }
101 .matchedselectors > p {
102 clear: both;
103 margin: 0 2px 0 0;
104 padding: 2px;
105 overflow-x: hidden;
106 border-style: dotted;
107 border-color: rgba(128,128,128,0.4);
108 border-width: 1px 1px 0 1px;
109 }
111 .matchedselectors > p:last-of-type {
112 border-bottom-width: 1px;
113 }
115 /* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */
116 .rule-text {
117 direction: ltr;
118 }
120 .matched {
121 text-decoration: line-through;
122 }
124 .parentmatch {
125 opacity: 0.5;
126 }
128 #noResults {
129 font-size: 110%;
130 margin: 5px;
131 text-align: center;
132 }
134 .onlyuserstyles {
135 cursor: pointer;
136 }
138 .legendKey {
139 margin: 0 5px;
140 }
142 .devtools-toolbar {
143 width: 100%;
144 }
146 .link {
147 padding: 0 3px;
148 cursor: pointer;
149 float: right;
150 }
152 .computedview-colorswatch {
153 display: inline-block;
154 border-radius: 50%;
155 width: 1em;
156 height: 1em;
157 vertical-align: text-top;
158 -moz-margin-end: 5px;
159 }