some corrections and finishing touches to that LCARStrek works well for Firefox 55...
[themes.git] / devtools / styleeditor.css
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/. */
5
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+. */
9   padding: 0;
10 }
11
12 #style-editor-chrome {
13   background-color: #000000;
14 }
15
16 .csscoverage-report {
17   background: #A09090; /* Toolbars */
18 }
19
20 .csscoverage-report-container {
21   height: 100vh;
22   padding: 10px;
23 }
24
25 .csscoverage-report-content {
26   font-size: 13px;
27   margin: 0 auto;
28   max-width: 600px;
29   padding: 0 10px;
30 }
31
32 .csscoverage-report h1,
33 .csscoverage-report h2,
34 .csscoverage-report h3 {
35   font-weight: bold;
36 }
37
38 .csscoverage-report textarea {
39   width: 100%;
40   height: 100px;
41 }
42
43 .csscoverage-report > .csscoverage-toolbar {
44   border: none;
45   margin: 0;
46   padding: 0;
47 }
48
49 .csscoverage-report > .csscoverage-toolbarbutton {
50   min-width: 4em;
51   min-height: 100vh;
52   margin: 0;
53   padding: 0;
54   border-radius: 0;
55   border-top: none;
56   border-bottom: none;
57   -moz-border-start: none;
58 }
59
60 .stylesheet-title,
61 .stylesheet-name {
62   text-decoration: none;
63   color: #9C9CFF;
64 }
65
66 .stylesheet-name {
67   font-size: 13px;
68 }
69
70 .stylesheet-rule-count,
71 .stylesheet-linked-file,
72 .stylesheet-saveButton {
73   color: #FF9F00;
74 }
75
76 .stylesheet-saveButton {
77   text-decoration: underline;
78   cursor: pointer;
79 }
80
81 .splitview-active .stylesheet-title,
82 .splitview-active .stylesheet-name {
83   color: #FFCF00;
84 }
85
86 .splitview-active .stylesheet-rule-count,
87 .splitview-active .stylesheet-linked-file,
88 .splitview-active .stylesheet-saveButton {
89   color: #E7ADE7;
90 }
91
92 .splitview-nav:focus {
93   outline: 0; /* focus ring is on the stylesheet name */
94 }
95
96 .splitview-nav > li.unsaved > hgroup .stylesheet-name {
97   font-style: italic;
98 }
99
100 .splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
101 .splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
102   font-style: italic;
103 }
104
105 .splitview-nav.empty > p {
106   padding: 0 10px;
107 }
108
109 .stylesheet-sidebar {
110   width: 230px;
111 }
112
113 .stylesheet-sidebar {
114   border-left: 1px solid #9C9CFF;
115 }
116
117 .media-rule-label {
118   border-bottom: 1px solid #A09090;
119 }
120
121 .media-rule-label {
122   padding: 4px;
123   cursor: pointer;
124 }
125
126 .media-condition-unmatched {
127   color: #8050B0;
128 }
129
130 .stylesheet-enabled {
131   padding: 8px 0;
132   margin: 0 8px;
133   background-image: url("itemToggle.png");
134   background-repeat: no-repeat;
135   background-clip: content-box;
136   background-position: 0 8px;
137   background-size: 48px 24px;
138   width: 24px;
139   height: 40px;
140 }
141
142 @media (min-resolution: 2dppx) {
143   .stylesheet-enabled {
144     background-image: url("itemToggle@2x.png");
145   }
146 }
147
148 .disabled > .stylesheet-enabled {
149   background-position: -24px 8px;
150 }
151
152 #style-editor-options {
153   width: 20px;
154   overflow: hidden;
155 }
156
157 .splitview-nav > li > .stylesheet-enabled:focus,
158 .splitview-nav > li:hover > .stylesheet-enabled {
159   outline: 0;
160 }
161
162 .stylesheet-linked-file:not(:empty){
163   -moz-margin-end: 0.4em;
164 }
165
166 .stylesheet-linked-file:not(:empty):before {
167   -moz-margin-start: 0.4em;
168 }
169
170 li.linked-file-error .stylesheet-linked-file:after {
171   font-size: 110%;
172 }
173
174 .stylesheet-more > h3 {
175   font-size: 11px;
176   -moz-margin-end: 2px;
177 }
178
179 .devtools-searchinput {
180   max-width: 25ex;
181   font-size: 11px;
182 }
183
184 .placeholder {
185   color: white;
186 }
187
188 .placeholder a {
189   text-decoration: underline;
190 }
191
192 h1,
193 h2,
194 h3 {
195   font-size: inherit;
196   font-weight: normal;
197   margin: 0;
198   padding: 0;
199 }
200
201 @media (max-width: 700px) {
202   .stylesheet-sidebar {
203     width: 150px;
204   }
205 }
206
207 /* portrait mode */
208 @media (max-width: 550px) {
209   .splitview-nav {
210     box-shadow: none;
211   }
212
213   .splitview-nav > li.splitview-active {
214     background-size: 0 0, 0 0, auto;
215   }
216
217   .stylesheet-enabled {
218     padding: 0;
219     background-position: 0 0;
220     height: 24px;
221   }
222
223   .disabled > .stylesheet-enabled {
224     background-position: -24px 0;
225   }
226
227   .splitview-nav > li > hgroup.stylesheet-info {
228     -moz-box-align: baseline;
229   }
230
231   .stylesheet-sidebar {
232     width: 180px;
233   }
234 }