make both Nightly devtools and 48/49 devtools work well
[themes.git] / LCARStrek / devtools / styleeditor.css
CommitLineData
e0c47e26 1/* vim:set ts=2 sw=2 sts=2 et: */
9099c61d
RK
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/. */
e0c47e26 5
445863a2
RK
6window:not([windowtype]) {
7 /* This does not apply to the standalone window in FF 19 and lower,
8 * only to the dev toolbox in FF 20+. */
9 padding: 0;
10}
11
e0c47e26 12#style-editor-chrome {
1e9e1791 13 -moz-box-flex: 1;
e0c47e26
RK
14 background-color: #000000;
15}
16
1e9e1791
RK
17.splitview-nav > li,
18.stylesheet-info,
19.stylesheet-more,
20.stylesheet-rule-count,
21li.splitview-active > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton,
22li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton {
23 display: -moz-box;
24}
25
26.devtools-toolbar > spacer {
27 -moz-box-flex: 1;
28}
29
30.style-editor-newButton {
31 list-style-image: url(images/add.svg);
32}
33
34.style-editor-importButton {
35 list-style-image: url(images/import.svg);
36}
37
38.stylesheet-details-container {
39 -moz-box-flex: 1;
40}
41
42.stylesheet-media-container {
43 overflow-y: auto;
44}
45
46.stylesheet-error-message {
47 display: none;
48}
49
50li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message {
51 display: block;
52}
53
e0c47e26
RK
54.stylesheet-title,
55.stylesheet-name {
56 text-decoration: none;
28e80a05 57 color: var(--theme-highlight-blue);
e0c47e26
RK
58}
59
60.stylesheet-name {
61 font-size: 13px;
1e9e1791
RK
62 white-space: nowrap;
63}
64
65.stylesheet-name > label {
66 display: inline;
67 cursor: pointer;
68}
69
70.stylesheet-info > h1 {
71 -moz-box-flex: 1;
72}
73
74.splitview-nav > li > hgroup.stylesheet-info {
75 -moz-box-pack: center;
76}
77
78.stylesheet-more > spacer {
79 -moz-box-flex: 1;
e0c47e26
RK
80}
81
82.stylesheet-rule-count,
46e71434 83.stylesheet-linked-file,
e0c47e26 84.stylesheet-saveButton {
28e80a05 85 color: var(--theme-body-color);
e0c47e26
RK
86}
87
88.stylesheet-saveButton {
89 text-decoration: underline;
90 cursor: pointer;
91}
92
93.splitview-active .stylesheet-title,
94.splitview-active .stylesheet-name {
28e80a05 95 color: var(--theme-highlight-lightorange);
e0c47e26
RK
96}
97
98.splitview-active .stylesheet-rule-count,
46e71434 99.splitview-active .stylesheet-linked-file,
e0c47e26 100.splitview-active .stylesheet-saveButton {
28e80a05 101 color: var(--theme-highlight-pink);
e0c47e26
RK
102}
103
104.splitview-nav:focus {
105 outline: 0; /* focus ring is on the stylesheet name */
106}
107
1e9e1791
RK
108.splitview-nav > li {
109 -moz-box-orient: horizontal;
110}
111
112.splitview-nav > li > hgroup {
113 display: -moz-box;
114 -moz-box-orient: vertical;
115 -moz-box-flex: 1;
116}
117
e0c47e26
RK
118.splitview-nav > li.unsaved > hgroup .stylesheet-name {
119 font-style: italic;
120}
121
122.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
123.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
124 font-style: italic;
125}
126
82b4252f
RK
127.splitview-nav.empty > p {
128 padding: 0 10px;
129}
130
3d64e0ce 131.stylesheet-sidebar {
9168a62c
RK
132 max-width: 400px;
133 min-width: 100px;
3d64e0ce 134
2b5a5147 135 border-color: #9C9CFF; /* Splitters */
3d64e0ce
RK
136}
137
138.media-rule-label {
1e9e1791 139 border-bottom: 1px solid var(--theme-splitter-color);
3d64e0ce
RK
140}
141
142.media-rule-label {
1e9e1791 143 display: flex;
3d64e0ce
RK
144 padding: 4px;
145 cursor: pointer;
1e9e1791 146 border-bottom: 1px solid;
3d64e0ce
RK
147}
148
d0a8de80
RK
149.media-responsive-mode-toggle {
150 color: var(--theme-highlight-blue);
151 text-decoration: underline;
152}
153
2b5a5147 154.media-rule-line {
1e9e1791 155 padding-inline-start: 4px;
2b5a5147
RK
156}
157
3d64e0ce
RK
158.media-condition-unmatched {
159 color: #8050B0;
d0a8de80 160/* opacity: 0.4;*/
3d64e0ce
RK
161}
162
1e9e1791
RK
163.media-rule-condition {
164 flex: 1;
165 overflow: hidden;
166}
167
e0c47e26 168.stylesheet-enabled {
1e9e1791
RK
169 display: -moz-box;
170 cursor: pointer;
e0c47e26
RK
171 padding: 8px 0;
172 margin: 0 8px;
1e9e1791 173 background-image: url("images/itemToggle.svg");
e0c47e26
RK
174 background-repeat: no-repeat;
175 background-clip: content-box;
1e9e1791
RK
176 background-position: center;
177 background-size: 16px;
e0c47e26
RK
178 width: 24px;
179 height: 40px;
1e9e1791 180/* filter: var(--icon-filter);*/
3d64e0ce
RK
181}
182
e0c47e26 183.disabled > .stylesheet-enabled {
1e9e1791 184 filter: url(images/filters.svg#disabled-icon-state);
e0c47e26
RK
185}
186
187.splitview-nav > li > .stylesheet-enabled:focus,
188.splitview-nav > li:hover > .stylesheet-enabled {
189 outline: 0;
190}
191
46e71434 192.stylesheet-linked-file:not(:empty){
1e9e1791 193 margin-inline-end: 0.4em;
46e71434
RK
194}
195
196.stylesheet-linked-file:not(:empty):before {
1e9e1791
RK
197 margin-inline-start: 0.4em;
198 content: " ↳ ";
199}
200
201li.unsaved > hgroup > h1 > .stylesheet-name:before {
202 content: "*";
203}
204
205li.linked-file-error .stylesheet-linked-file {
206 text-decoration: line-through;
46e71434
RK
207}
208
209li.linked-file-error .stylesheet-linked-file:after {
210 font-size: 110%;
1e9e1791
RK
211 content: " ✘";
212}
213
214li.linked-file-error .stylesheet-rule-count {
215 visibility: hidden;
e0c47e26
RK
216}
217
218.stylesheet-more > h3 {
219 font-size: 11px;
220 -moz-margin-end: 2px;
221}
222
1e9e1791
RK
223.devtools-searchinput,
224.devtools-filterinput {
e0c47e26
RK
225 max-width: 25ex;
226 font-size: 11px;
227}
228
e0c47e26
RK
229.placeholder a {
230 text-decoration: underline;
231}
232
233h1,
234h2,
235h3 {
236 font-size: inherit;
237 font-weight: normal;
238 margin: 0;
239 padding: 0;
240}
241
3d64e0ce
RK
242@media (max-width: 700px) {
243 .stylesheet-sidebar {
244 width: 150px;
245 }
246}
247
e0c47e26
RK
248/* portrait mode */
249@media (max-width: 550px) {
1e9e1791
RK
250 li.splitview-active > hgroup > .stylesheet-more > .stylesheet-rule-count,
251 li:hover > hgroup > .stylesheet-more > .stylesheet-rule-count {
252 display: none;
253 }
254
e0c47e26
RK
255 .splitview-nav {
256 box-shadow: none;
257 }
258
259 .splitview-nav > li.splitview-active {
260 background-size: 0 0, 0 0, auto;
261 }
262
263 .stylesheet-enabled {
264 padding: 0;
265 background-position: 0 0;
266 height: 24px;
267 }
268
269 .disabled > .stylesheet-enabled {
270 background-position: -24px 0;
271 }
272
273 .splitview-nav > li > hgroup.stylesheet-info {
274 -moz-box-align: baseline;
1e9e1791
RK
275 -moz-box-orient: horizontal;
276 -moz-box-flex: 1;
e0c47e26 277 }
3d64e0ce
RK
278
279 .stylesheet-sidebar {
280 width: 180px;
281 }
1e9e1791
RK
282
283 .stylesheet-more {
284 -moz-box-flex: 1;
285 -moz-box-pack: end;
286 }
287
288 .stylesheet-more > spacer {
289 -moz-box-flex: 0;
290 }
e0c47e26 291}
28e80a05
RK
292
293.csscoverage-report {
294 background-color: var(--theme-contrastsidebar-background);
1e9e1791 295 -moz-box-orient: horizontal;
28e80a05
RK
296}
297
298.csscoverage-report-container {
299 height: 100vh;
1e9e1791
RK
300 padding: 0 10px;
301 overflow-x: hidden;
302 overflow-y: auto;
303 -moz-box-flex: 1;
28e80a05
RK
304}
305
306.csscoverage-report-content {
307 margin: 20px auto;
308 -moz-column-width: 300px;
309 font-size: 13px;
1e9e1791
RK
310 -moz-user-select: text;
311}
312
313.csscoverage-report-summary,
314.csscoverage-report-unused,
315.csscoverage-report-optimize {
316 display: inline-block;
317}
318
319.csscoverage-report-unused,
320.csscoverage-report-optimize {
321 flex: 1;
322 min-width: 0;
323}
324
325@media (max-width: 950px) {
326 .csscoverage-report-content {
327 display: block;
328 }
329
330 .csscoverage-report-summary {
331 display: block;
332 text-align: center;
333 }
28e80a05
RK
334}
335
336.csscoverage-report h1 {
337 font-size: 120%;
338}
339
340.csscoverage-report h2 {
341 font-size: 110%;
342}
343
344.csscoverage-report h1,
345.csscoverage-report h2,
346.csscoverage-report h3 {
347 font-weight: bold;
348 margin: 10px 0;
349}
350
1e9e1791
RK
351.csscoverage-report code,
352.csscoverage-report textarea {
353 font-family: var(--monospace-font-family);
354 font-size: inherit;
355}
356
28e80a05
RK
357.csscoverage-list:after {
358 content: ', ';
359}
360
361.csscoverage-list:last-child:after {
362 display: none;
363}
364
365.csscoverage-report textarea {
366 width: 100%;
367 height: 100px;
368}
369
370.csscoverage-report a {
371 cursor: pointer;
372 text-decoration: underline;
373}
374
375.csscoverage-report > .csscoverage-toolbar {
376 border: none;
377 margin: 0;
378 padding: 0;
379}
380
381.csscoverage-report > .csscoverage-toolbarbutton {
382 min-width: 4em;
383 min-height: 100vh;
384 margin: 0;
385 padding: 0;
386 border-radius: 0;
387 border-top: none;
388 border-bottom: none;
1e9e1791
RK
389 border-inline-start: none;
390}
391
392.csscoverage-report .pie-table-chart-container {
393 -moz-box-orient: vertical;
394 text-align: start;
28e80a05
RK
395}
396
397.chart-colored-blob[name="Used Preload"] {
398 fill: var(--theme-highlight-pink);
399 background: var(--theme-highlight-pink);;
400}
401
402.chart-colored-blob[name=Used] {
403 fill: var(--theme-highlight-green);
404 background: var(--theme-highlight-green);
405}
406
407.chart-colored-blob[name=Unused] {
408 fill: var(--theme-highlight-lightorange);
409 background: var(--theme-highlight-lightorange);
410}
411
412/* Undo 'largest' customization */
413.pie-chart-slice[largest] {
414 stroke-width: 1px;
415 stroke: rgba(0,0,0,0.2);
416}
417
418.csscoverage-report .pie-chart-slice {
419 cursor: default;
420}
421
422.csscoverage-report-chart {
1e9e1791 423 margin: 0 20px;
28e80a05 424}