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;
57 color: var(--theme-highlight-blue);
65 .stylesheet-name > label {
70 .stylesheet-info > h1 {
74 .splitview-nav > li > hgroup.stylesheet-info {
75 -moz-box-pack: center;
78 .stylesheet-more > spacer {
82 .stylesheet-rule-count,
83 .stylesheet-linked-file,
84 .stylesheet-saveButton {
85 color: var(--theme-body-color);
88 .stylesheet-saveButton {
89 text-decoration: underline;
93 .splitview-active .stylesheet-title,
94 .splitview-active .stylesheet-name {
95 color: var(--theme-highlight-lightorange);
98 .splitview-active .stylesheet-rule-count,
99 .splitview-active .stylesheet-linked-file,
100 .splitview-active .stylesheet-saveButton {
101 color: var(--theme-highlight-pink);
104 .splitview-nav:focus {
105 outline: 0; /* focus ring is on the stylesheet name */
108 .splitview-nav > li {
109 -moz-box-orient: horizontal;
112 .splitview-nav > li > hgroup {
114 -moz-box-orient: vertical;
118 .splitview-nav > li.unsaved > hgroup .stylesheet-name {
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 {
127 .splitview-nav.empty > p {
131 .stylesheet-sidebar {
135 border-color: #9C9CFF; /* Splitters */
139 border-bottom: 1px solid var(--theme-splitter-color);
146 border-bottom: 1px solid;
149 .media-responsive-mode-toggle {
150 color: var(--theme-highlight-blue);
151 text-decoration: underline;
155 padding-inline-start: 4px;
158 .media-condition-unmatched {
163 .media-rule-condition {
168 .stylesheet-enabled {
173 background-image: url("images/itemToggle.svg");
174 background-repeat: no-repeat;
175 background-clip: content-box;
176 background-position: center;
177 background-size: 16px;
180 /* filter: var(--icon-filter);*/
183 .disabled > .stylesheet-enabled {
184 filter: url(images/filters.svg#disabled-icon-state);
187 .splitview-nav > li > .stylesheet-enabled:focus,
188 .splitview-nav > li:hover > .stylesheet-enabled {
192 .stylesheet-linked-file:not(:empty){
193 margin-inline-end: 0.4em;
196 .stylesheet-linked-file:not(:empty):before {
197 margin-inline-start: 0.4em;
201 li.unsaved > hgroup > h1 > .stylesheet-name:before {
205 li.linked-file-error .stylesheet-linked-file {
206 text-decoration: line-through;
209 li.linked-file-error .stylesheet-linked-file:after {
214 li.linked-file-error .stylesheet-rule-count {
218 .stylesheet-more > h3 {
220 -moz-margin-end: 2px;
223 .devtools-searchinput,
224 .devtools-filterinput {
230 text-decoration: underline;
242 @media (max-width: 700px) {
243 .stylesheet-sidebar {
249 @media (max-width: 550px) {
250 li.splitview-active > hgroup > .stylesheet-more > .stylesheet-rule-count,
251 li:hover > hgroup > .stylesheet-more > .stylesheet-rule-count {
259 .splitview-nav > li.splitview-active {
260 background-size: 0 0, 0 0, auto;
263 .stylesheet-enabled {
265 background-position: 0 0;
269 .disabled > .stylesheet-enabled {
270 background-position: -24px 0;
273 .splitview-nav > li > hgroup.stylesheet-info {
274 -moz-box-align: baseline;
275 -moz-box-orient: horizontal;
279 .stylesheet-sidebar {
288 .stylesheet-more > spacer {
293 .csscoverage-report {
294 background-color: var(--theme-contrastsidebar-background);
295 -moz-box-orient: horizontal;
298 .csscoverage-report-container {
306 .csscoverage-report-content {
308 -moz-column-width: 300px;
310 -moz-user-select: text;
313 .csscoverage-report-summary,
314 .csscoverage-report-unused,
315 .csscoverage-report-optimize {
316 display: inline-block;
319 .csscoverage-report-unused,
320 .csscoverage-report-optimize {
325 @media (max-width: 950px) {
326 .csscoverage-report-content {
330 .csscoverage-report-summary {
336 .csscoverage-report h1 {
340 .csscoverage-report h2 {
344 .csscoverage-report h1,
345 .csscoverage-report h2,
346 .csscoverage-report h3 {
351 .csscoverage-report code,
352 .csscoverage-report textarea {
353 font-family: var(--monospace-font-family);
357 .csscoverage-list:after {
361 .csscoverage-list:last-child:after {
365 .csscoverage-report textarea {
370 .csscoverage-report a {
372 text-decoration: underline;
375 .csscoverage-report > .csscoverage-toolbar {
381 .csscoverage-report > .csscoverage-toolbarbutton {
389 border-inline-start: none;
392 .csscoverage-report .pie-table-chart-container {
393 -moz-box-orient: vertical;
397 .chart-colored-blob[name="Used Preload"] {
398 fill: var(--theme-highlight-pink);
399 background: var(--theme-highlight-pink);;
402 .chart-colored-blob[name=Used] {
403 fill: var(--theme-highlight-green);
404 background: var(--theme-highlight-green);
407 .chart-colored-blob[name=Unused] {
408 fill: var(--theme-highlight-lightorange);
409 background: var(--theme-highlight-lightorange);
412 /* Undo 'largest' customization */
413 .pie-chart-slice[largest] {
415 stroke: rgba(0,0,0,0.2);
418 .csscoverage-report .pie-chart-slice {
422 .csscoverage-report-chart {