Commit | Line | Data |
---|---|---|
2efcd25d RK |
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 | ||
a5cb6e53 RK |
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 | } | |
10 | ||
2efcd25d RK |
11 | .ruleview { |
12 | height: 100%; | |
13 | } | |
14 | ||
15 | .ruleview-rule-source { | |
16 | -moz-padding-start: 5px; | |
a21f2959 | 17 | text-align: end; |
2efcd25d RK |
18 | float: right; |
19 | -moz-user-select: none; | |
20 | } | |
21 | ||
3d64e0ce RK |
22 | .ruleview-rule-source, |
23 | .ruleview-rule-source > label { | |
24 | cursor: pointer; | |
25 | } | |
26 | ||
27 | .ruleview-rule-source[unselectable], | |
28 | .ruleview-rule-source[unselectable] > label { | |
29 | cursor: default; | |
30 | } | |
31 | ||
32 | .ruleview-rule-source:not([unselectable]):hover { | |
33 | text-decoration: underline; | |
34 | } | |
35 | ||
1b13529a | 36 | .ruleview-header { |
2efcd25d RK |
37 | border-top-width: 1px; |
38 | border-bottom-width: 1px; | |
39 | border-top-style: solid; | |
40 | border-bottom-style: solid; | |
41 | padding: 1px 4px; | |
42 | margin-top: 4px; | |
43 | -moz-user-select: none; | |
dfa34f73 | 44 | word-wrap: break-word; |
2efcd25d RK |
45 | } |
46 | ||
ed1a91c6 RK |
47 | .ruleview-rule, |
48 | #noResults { | |
2efcd25d RK |
49 | padding: 2px 4px; |
50 | } | |
51 | ||
3d64e0ce | 52 | /* User agent styles are not editable, display them differently */ |
832af407 | 53 | .ruleview-rule[uneditable=true] { |
28e80a05 | 54 | background: var(--theme-toolbar-background); |
3d64e0ce RK |
55 | } |
56 | ||
57 | .ruleview-rule[uneditable=true] :focus { | |
58 | outline: none; | |
59 | } | |
60 | ||
61 | .ruleview-rule[uneditable=true] .theme-link { | |
28e80a05 | 62 | color: var(--theme-text-blue); |
3d64e0ce RK |
63 | } |
64 | ||
65 | .ruleview-rule[uneditable=true] .ruleview-enableproperty { | |
66 | visibility: hidden; | |
67 | } | |
68 | ||
9168a62c RK |
69 | .ruleview-rule[uneditable=true] .ruleview-colorswatch, |
70 | .ruleview-rule[uneditable=true] .ruleview-bezierswatch { | |
3d64e0ce RK |
71 | cursor: default; |
72 | } | |
73 | ||
3d64e0ce | 74 | .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname, |
d74db938 RK |
75 | .ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer > |
76 | .ruleview-propertyvalue { | |
3d64e0ce RK |
77 | border-bottom-color: transparent; |
78 | } | |
79 | ||
ed1a91c6 RK |
80 | #noResults { |
81 | font: message-box; | |
82 | color: #8050B0; | |
83 | } | |
84 | ||
2efcd25d RK |
85 | .ruleview-rule + .ruleview-rule { |
86 | border-top-width: 1px; | |
87 | border-top-style: dotted; | |
88 | } | |
89 | ||
90 | .ruleview-warning { | |
dccbbf95 | 91 | background: url("alerticon-warning.png"); |
2efcd25d | 92 | -moz-margin-start: 5px; |
1b13529a RK |
93 | display: inline-block; |
94 | vertical-align: top; | |
2efcd25d RK |
95 | width: 13px; |
96 | height: 12px; | |
97 | } | |
98 | ||
d74db938 | 99 | @media (min-resolution: 1.25dppx) { |
dccbbf95 RK |
100 | .ruleview-warning { |
101 | background-image: url("alerticon-warning@2x.png"); | |
102 | } | |
103 | } | |
104 | ||
2efcd25d RK |
105 | .ruleview-ruleopen { |
106 | -moz-padding-end: 5px; | |
107 | } | |
108 | ||
109 | .ruleview-ruleclose { | |
110 | cursor: text; | |
111 | padding-right: 20px; | |
112 | } | |
113 | ||
114 | .ruleview-propertylist { | |
115 | list-style: none; | |
116 | padding: 0; | |
117 | margin: 0; | |
118 | } | |
119 | ||
120 | .ruleview-rule:not(:hover) .ruleview-enableproperty { | |
121 | visibility: hidden; | |
122 | } | |
123 | ||
124 | .ruleview-expander { | |
125 | display: inline-block; | |
126 | } | |
127 | ||
128 | .ruleview-newproperty { | |
129 | /* (enable checkbox width: 12px) + (expander width: 15px) */ | |
130 | -moz-margin-start: 27px; | |
131 | } | |
132 | ||
133 | .ruleview-namecontainer, | |
d74db938 | 134 | .ruleview-propertyvaluecontainer, |
2efcd25d RK |
135 | .ruleview-propertyname, |
136 | .ruleview-propertyvalue { | |
137 | text-decoration: inherit; | |
138 | } | |
139 | ||
140 | .ruleview-computedlist { | |
141 | list-style: none; | |
142 | padding: 0; | |
143 | } | |
144 | ||
145 | .ruleview-computed { | |
146 | -moz-margin-start: 35px; | |
147 | } | |
148 | ||
9168a62c RK |
149 | .ruleview-colorswatch, |
150 | .ruleview-bezierswatch { | |
3d64e0ce | 151 | cursor: pointer; |
3a0880a9 RK |
152 | border-radius: 50%; |
153 | width: 1em; | |
154 | height: 1em; | |
155 | vertical-align: text-top; | |
156 | -moz-margin-end: 5px; | |
dccbbf95 | 157 | display: inline-block; |
ed88669c | 158 | position: relative; |
dccbbf95 RK |
159 | } |
160 | ||
161 | .ruleview-colorswatch::before { | |
162 | content: ''; | |
163 | background-color: #9C9CFF; | |
164 | background-image: linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090), | |
165 | linear-gradient(45deg, #A09090 25%, transparent 25%, transparent 75%, #A09090 75%, #A09090); | |
166 | background-size: 12px 12px; | |
167 | background-position: 0 0, 6px 6px; | |
168 | position: absolute; | |
169 | border-radius: 50%; | |
ed88669c RK |
170 | top: 0; |
171 | left: 0; | |
172 | right: 0; | |
173 | bottom: 0; | |
dccbbf95 | 174 | z-index: -1; |
3a0880a9 RK |
175 | } |
176 | ||
9168a62c RK |
177 | .ruleview-bezierswatch { |
178 | background: url("chrome://browser/skin/devtools/cubic-bezier-swatch.png"); | |
179 | background-size: 1em; | |
180 | } | |
181 | ||
d74db938 | 182 | @media (min-resolution: 1.25dppx) { |
9168a62c RK |
183 | .ruleview-bezierswatch { |
184 | background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png"); | |
185 | background-size: 1em; | |
186 | } | |
187 | } | |
188 | ||
2efcd25d RK |
189 | .ruleview-overridden { |
190 | text-decoration: line-through; | |
191 | } | |
192 | ||
193 | .styleinspector-propertyeditor { | |
194 | border: 1px solid #A09090; | |
195 | padding: 0; | |
196 | } | |
197 | ||
198 | .ruleview-property { | |
589b5528 | 199 | border-left: 3px solid transparent; |
dfa34f73 | 200 | clear: right; |
2efcd25d RK |
201 | } |
202 | ||
d74db938 | 203 | .ruleview-propertycontainer > * { |
2efcd25d RK |
204 | vertical-align: middle; |
205 | } | |
206 | ||
207 | .ruleview-property[dirty] { | |
28e80a05 | 208 | border-left-color: var(--theme-highlight-green); |
2efcd25d RK |
209 | } |
210 | ||
a5cb6e53 RK |
211 | .ruleview-highlight { |
212 | background-color: var(--rule-highlight-background-color); | |
213 | } | |
214 | ||
2efcd25d | 215 | .ruleview-namecontainer > .ruleview-propertyname, |
d74db938 | 216 | .ruleview-propertyvaluecontainer > .ruleview-propertyvalue { |
2efcd25d RK |
217 | border-bottom: 1px dashed transparent; |
218 | } | |
219 | ||
220 | .ruleview-namecontainer:hover > .ruleview-propertyname, | |
d74db938 | 221 | .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue { |
2efcd25d RK |
222 | border-bottom-color: #008484; |
223 | } | |
224 | ||
dfa34f73 RK |
225 | .ruleview-selector { |
226 | word-wrap: break-word; | |
227 | } | |
228 | ||
2efcd25d RK |
229 | .ruleview-selector-separator, .ruleview-selector-unmatched { |
230 | color: #8050B0; | |
231 | } | |
05148fed RK |
232 | |
233 | .ruleview-selectorhighlighter { | |
234 | background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0; | |
235 | padding-left: 16px; | |
236 | margin-left: 5px; | |
237 | cursor: pointer; | |
238 | } | |
239 | ||
240 | .ruleview-selectorhighlighter:hover { | |
241 | background-position: -32px 0; | |
242 | } | |
243 | ||
244 | .ruleview-selectorhighlighter:active, | |
245 | .ruleview-selectorhighlighter.highlighted { | |
246 | background-position: -16px 0; | |
247 | } | |
1f756abf RK |
248 | |
249 | #pseudo-class-panel:not([hidden]) { | |
250 | border-bottom: 1px solid var(--theme-splitter-color); | |
251 | } | |
252 | ||
253 | #ruleview-add-rule-button::before { | |
254 | background-image: url("chrome://browser/skin/devtools/add.svg#add"); | |
255 | background-size: cover; | |
256 | } | |
257 | #ruleview-add-rule-button:hover::before { | |
258 | background-image: url("chrome://browser/skin/devtools/add.svg#add-checked"); | |
259 | } | |
260 | ||
261 | #pseudo-class-panel-toggle::before { | |
262 | background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class"); | |
263 | background-size: cover; | |
264 | } | |
265 | #pseudo-class-panel-toggle:hover::before, | |
266 | #pseudo-class-panel-toggle[checked]::before { | |
267 | background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class-checked"); | |
268 | filter: none !important; | |
269 | } |