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 .theme-dark {
6  --row-striped-background: rgba(255, 255, 255, 0.05);
7 }
8
9.theme-light {
10  --row-striped-background: rgba(247, 247, 247, 0.8);
11}
12
13#sidebar-panel-computedview {
14  margin: 0;
15  display: flex;
16  flex-direction: column;
17  width: 100%;
18  height: 100%;
19}
20
21/* Reset the global rotation of the icon done for RTL layout.
22   Computed view is always LTR */
23#sidebar-panel-computedview .theme-twisty:not(.open):dir(rtl),
24#sidebar-panel-computedview .theme-twisty:not([open]):-moz-locale-dir(rtl) {
25  transform: rotate(-90deg);
26}
27
28#computedview-panel .inspector-tabpanel {
29  min-width: 0;
30}
31
32#computedview-panel #browser-style-checkbox-label {
33  overflow: hidden;
34  text-overflow: ellipsis;
35}
36
37#computed-container {
38  overflow: auto;
39  height: 100%;
40}
41
42/* This extra wrapper only serves as a way to get the content of the view focusable.
43   So that when the user reaches it either via keyboard or mouse, we know that the view
44   is focused and therefore can handle shortcuts.
45   However, for accessibility reasons, tabindex is set to -1 to avoid having to tab
46   through it, and the outline is hidden. */
47#computed-container-focusable {
48  height: 100%;
49  outline: none;
50}
51
52#computed-toolbar {
53  display: flex;
54  align-items: center;
55  user-select: none;
56}
57
58#browser-style-checkbox {
59  /* Bug 1200073 - extra space before the browser styles checkbox so
60     they aren't squished together in a small window. Put also
61     an extra space after. */
62  margin-inline-start: 5px;
63  margin-inline-end: 0;
64}
65
66#browser-style-checkbox-label {
67  white-space: nowrap;
68  padding-inline-start: 5px;
69  margin-inline-end: 5px;
70}
71
72#computed-property-container {
73  user-select: text;
74  overflow-y: auto;
75  overflow-x: hidden;
76  flex: auto;
77  border-top: 1px solid var(--theme-splitter-color);
78  margin-top: -1px;
79}
80
81.row-striped {
82  background: var(--row-striped-background);
83}
84
85.computed-property-hidden {
86  display: none;
87}
88
89.computed-property-view {
90  padding: 2px 0px;
91  padding-inline-start: 5px;
92  display: flex;
93  flex-wrap: wrap;
94}
95
96.computed-property-name-container {
97  width: 230px;
98}
99
100.computed-property-value-container {
101  display: flex;
102  flex: 1 1 168px;
103  overflow: hidden;
104}
105
106.computed-property-name-container > *,
107.computed-property-value-container > * {
108  display: inline-block;
109  vertical-align: middle;
110}
111
112.computed-property-name {
113  outline: 0 !important;
114}
115
116.computed-other-property-value::before {
117  content: "";
118  display: inline-block;
119  vertical-align: -0.5px;
120  width: 8px;
121  height: 8px;
122  margin: 0 1px;
123  background-image: url(images/arrow-e.svg);
124  background-repeat: no-repeat;
125  background-size: contain;
126  -moz-context-properties: fill;
127  fill: var(--theme-text-color-inactive);
128}
129
130.computed-other-property-value:dir(rtl)::before {
131  transform: scaleX(-1);
132}
133
134.computed-property-value {
135  padding-inline-start: 14px;
136  outline: 0 !important;
137}
138
139.computed-property-content {
140  padding-inline-start: 17px;
141}
142
143/* Bug 1360238 - getSelection displays an extra "\n" on multiple sibling block elements.
144   We rely on this behavior to add an extra "\n" between matched selectors (Bug 1222737).
145   Therefore we use <div> elements around matched selectors and need this class
146   to keep them inline. We do that to avoid doing any formatting logic in JS.
147   Once Bug 1360238 will be fixed, we'll probably have to change the behavior
148   and remove this class. */
149.fix-get-selection {
150  display: inline;
151}
152
153.visually-hidden {
154  clip: rect(1px, 1px, 1px, 1px);
155  clip-path: inset(50%);
156  height: 1px;
157  width: 1px;
158  margin: -1px;
159  overflow: hidden;
160  padding: 0;
161  position: absolute;
162}
163
164/* From skin */
165.computed-expander {
166  visibility: hidden;
167}
168
169.computed-expandable {
170  visibility: visible;
171}
172
173.match {
174  visibility: hidden;
175}
176
177.matchedselectors > p {
178  clear: both;
179  margin: 0;
180  margin-inline-end: 2px;
181  padding: 2px;
182  overflow-x: hidden;
183  border-style: dotted;
184  border-color: var(--theme-splitter-color);
185  border-width: 1px 1px 0 1px;
186}
187
188.matchedselectors > p:last-of-type {
189  border-bottom-width: 1px;
190}
191
192.matched {
193  text-decoration: line-through;
194}
195
196.parentmatch {
197  opacity: 0.5;
198}
199
200#computed-no-results {
201  height: 100%;
202}
203
204.onlyuserstyles {
205  cursor: pointer;
206}
207
208.legendKey {
209  margin: 0 5px;
210}
211
212.computed-link {
213  padding: 0 3px;
214  cursor: pointer;
215  float: inline-end;
216}
217
218/* Take away these two :visited rules to get a core dumper     */
219/* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
220
221.computed-link,
222.computed-link:visited {
223  text-decoration: none;
224}
225
226.computed-link:hover {
227  text-decoration: underline;
228}
229
230.computed-colorswatch {
231  border-radius: 50%;
232  width: 0.9em;
233  height: 0.9em;
234  vertical-align: middle;
235  margin-inline-end: 5px;
236  display: inline-block;
237  position: relative;
238}
239
240.computed-colorswatch::before {
241  content: '';
242  background-color: #eee;
243  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
244                    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
245  background-size: 12px 12px;
246  background-position: 0 0, 6px 6px;
247  position: absolute;
248  border-radius: 50%;
249  top: 0;
250  left: 0;
251  right: 0;
252  bottom: 0;
253  z-index: -1;
254}
255