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 window: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+. */
12 #style-editor-chrome {
14 background-color: #000000;
20 .stylesheet-rule-count,
21 li.splitview-active > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton,
22 li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton {
26 .devtools-toolbar > spacer {
30 .style-editor-newButton {
31 list-style-image: url(images/add.svg);
34 .style-editor-importButton {
35 list-style-image: url(images/import.svg);
38 .stylesheet-details-container {
42 .stylesheet-media-container {
46 .stylesheet-error-message {
50 li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message {
56 text-decoration: none;
64 .stylesheet-name > label {
69 .stylesheet-info > h1 {
73 .splitview-nav > li > hgroup.stylesheet-info {
74 -moz-box-pack: center;
77 .stylesheet-more > spacer {
83 color: var(--theme-highlight-blue);
86 .stylesheet-rule-count,
87 .stylesheet-linked-file,
88 .stylesheet-saveButton {
89 color: var(--theme-body-color);
92 .stylesheet-saveButton {
96 text-decoration: underline;
100 .splitview-active .stylesheet-title,
101 .splitview-active .stylesheet-name {
102 color: var(--theme-highlight-lightorange);
105 .splitview-active .stylesheet-rule-count,
106 .splitview-active .stylesheet-linked-file,
107 .splitview-active .stylesheet-saveButton {
108 color: var(--theme-highlight-pink);
111 .splitview-nav:focus {
112 outline: 0; /* focus ring is on the stylesheet name */
115 .splitview-nav > li {
116 -moz-box-orient: horizontal;
119 .splitview-nav > li > hgroup {
121 -moz-box-orient: vertical;
125 .splitview-nav > li.unsaved > hgroup .stylesheet-name {
129 .splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
130 .splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
134 .splitview-nav.empty > p {
138 .stylesheet-sidebar {
142 border-color: var(--theme-splitter-color);
146 border-bottom: 1px solid var(--theme-splitter-color);
153 border-bottom: 1px solid;
156 .media-responsive-mode-toggle {
157 color: var(--theme-highlight-blue);
158 text-decoration: underline;
162 padding-inline-start: 4px;
165 .media-condition-unmatched {
170 .media-rule-condition {
175 .stylesheet-enabled {
180 background-image: url("images/itemToggle.svg");
181 background-repeat: no-repeat;
182 background-clip: content-box;
183 background-position: center;
184 background-size: 16px;
187 /* filter: var(--icon-filter);*/
190 .disabled > .stylesheet-enabled {
191 filter: url(images/filters.svg#disabled-icon-state);
194 .splitview-nav > li > .stylesheet-enabled:focus,
195 .splitview-nav > li:hover > .stylesheet-enabled {
199 .stylesheet-linked-file:not(:empty){
200 margin-inline-end: 0.4em;
203 .stylesheet-linked-file:not(:empty):before {
204 margin-inline-start: 0.4em;
208 li.unsaved > hgroup > h1 > .stylesheet-name:before {
212 li.linked-file-error .stylesheet-linked-file {
213 text-decoration: line-through;
216 li.linked-file-error .stylesheet-linked-file:after {
221 li.linked-file-error .stylesheet-rule-count {
225 .stylesheet-more > h3 {
227 margin-inline-end: 2px;
230 .devtools-searchinput,
231 .devtools-filterinput {
237 text-decoration: underline;
249 @media (max-width: 700px) {
250 .stylesheet-sidebar {
256 @media (max-width: 550px) {
257 li.splitview-active > hgroup > .stylesheet-more > .stylesheet-rule-count,
258 li:hover > hgroup > .stylesheet-more > .stylesheet-rule-count {
266 .splitview-nav > li.splitview-active {
267 background-size: 0 0, 0 0, auto;
270 .stylesheet-enabled {
272 background-position: 0 0;
276 .disabled > .stylesheet-enabled {
277 background-position: -24px 0;
280 .splitview-nav > li > hgroup.stylesheet-info {
281 -moz-box-align: baseline;
282 -moz-box-orient: horizontal;
286 .stylesheet-sidebar {
295 .stylesheet-more > spacer {
301 .csscoverage-report {
302 background-color: var(--theme-contrastsidebar-background);
303 -moz-box-orient: horizontal;
306 .csscoverage-report-container {
314 .csscoverage-report-content {
316 -moz-column-width: 300px;
318 -moz-user-select: text;
321 .csscoverage-report-summary,
322 .csscoverage-report-unused,
323 .csscoverage-report-optimize {
324 display: inline-block;
327 .csscoverage-report-unused,
328 .csscoverage-report-optimize {
333 @media (max-width: 950px) {
334 .csscoverage-report-content {
338 .csscoverage-report-summary {
344 .csscoverage-report h1 {
348 .csscoverage-report h2 {
352 .csscoverage-report h1,
353 .csscoverage-report h2,
354 .csscoverage-report h3 {
359 .csscoverage-report code,
360 .csscoverage-report textarea {
361 font-family: var(--monospace-font-family);
365 .csscoverage-list:after {
369 .csscoverage-list:last-child:after {
373 .csscoverage-report textarea {
378 .csscoverage-report a {
380 text-decoration: underline;
383 .csscoverage-report > .csscoverage-toolbar {
389 .csscoverage-report > .csscoverage-toolbarbutton {
397 border-inline-start: none;
400 .csscoverage-report .pie-table-chart-container {
401 -moz-box-orient: vertical;
405 .chart-colored-blob[name="Used Preload"] {
406 fill: var(--theme-highlight-pink);
407 background: var(--theme-highlight-pink);
410 .chart-colored-blob[name=Used] {
411 fill: var(--theme-highlight-green);
412 background: var(--theme-highlight-green);
415 .chart-colored-blob[name=Unused] {
416 fill: var(--theme-highlight-lightorange);
417 background: var(--theme-highlight-lightorange);
420 /* Undo 'largest' customization */
421 .pie-chart-slice[largest] {
423 stroke: rgba(0,0,0,0.2);
426 .csscoverage-report .pie-chart-slice {
430 .csscoverage-report-chart {