make add icon work
[themes.git] / LCARStrek / devtools / canvasdebugger.css
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 file,
3  * You can obtain one at http://mozilla.org/MPL/2.0/. */
4
5 /* Reload and waiting notices */
6
7 .notice-container {
8   margin-top: -50vh;
9   background-color: var(--theme-toolbar-background);
10   color: var(--theme-body-color);
11 }
12
13 #empty-notice > button {
14   min-width: 30px;
15   min-height: 28px;
16   margin: 0;
17   list-style-image: url("profiler-stopwatch.svg");
18 }
19
20 #empty-notice > button .button-text {
21   display: none;
22 }
23
24 #waiting-notice {
25   font-size: 110%;
26 }
27
28 /* Snapshots pane */
29
30 #snapshots-pane > tabs {
31   -moz-border-end: 1px solid;
32 }
33
34 #snapshots-pane .devtools-toolbar {
35   -moz-border-end: 1px solid;
36
37   -moz-border-end-color: #9C9CFF; /* Match the splitter color. */
38 }
39
40 #record-snapshot {
41   list-style-image: url("chrome://devtools/skin/profiler-stopwatch-tbutton.svg");
42 }
43
44 #record-snapshot:hover {
45   list-style-image: url("chrome://devtools/skin/profiler-stopwatch.svg");
46 }
47
48 #record-snapshot[checked] {
49   list-style-image: url("chrome://devtools/skin/profiler-stopwatch-checked-tbutton.svg");
50 }
51
52 #record-snapshot[checked]:hover {
53   list-style-image: url("chrome://devtools/skin/profiler-stopwatch-checked.svg");
54 }
55
56 /* Snapshots items */
57
58 .snapshot-item-thumbnail {
59   image-rendering: -moz-crisp-edges;
60   background-image: linear-gradient(45deg, #504848 25%, transparent 25%, transparent 75%, #504848 75%, #504848), linear-gradient(45deg, #504848 25%, transparent 25%, transparent 75%, #504848 75%, #504848);
61   background-size: 12px 12px, 12px 12px;
62   background-position: 0px 0px, 6px 6px;
63   background-repeat: repeat, repeat;
64 }
65
66 .snapshot-item-thumbnail[flipped=true] {
67   transform: scaleY(-1);
68 }
69
70 .snapshot-item-thumbnail {
71   background-color: #000000;
72 }
73
74 .snapshot-item-details {
75   -moz-padding-start: 6px;
76 }
77
78 .snapshot-item-calls {
79   padding-top: 4px;
80   font-size: 80%;
81 }
82
83 .snapshot-item-calls,
84 .snapshot-item-save {
85   color: var(--theme-body-color);
86 }
87
88 .snapshot-item-save {
89   padding-bottom: 2px;
90   font-size: 90%;
91 }
92
93 .snapshot-item-calls,
94 .snapshot-item-save {
95   color: #A09090; /* Foreground (Text) - Grey */
96 }
97
98 .snapshot-item-save {
99   text-decoration: underline;
100   cursor: pointer;
101 }
102
103 .snapshot-item-save[disabled=true] {
104   text-decoration: none;
105   pointer-events: none;
106 }
107
108 .snapshot-item-footer.devtools-throbber::before {
109   margin-top: -2px;
110 }
111
112 #snapshots-list .selected label {
113   /* Text inside a selected item should not be custom colored. */
114   color: inherit !important;
115 }
116
117 /* Debugging pane controls */
118
119 #debugging-controls .devtools-toolbarbutton > .toolbarbutton-icon {
120   width: 16px;
121   height: 16px;
122 }
123
124 #resume {
125   list-style-image: url("debugger-play.png");
126   -moz-image-region: rect(0px,32px,16px,16px);
127 }
128
129 #step-over {
130   list-style-image: url("debugger-step-over.png");
131 }
132
133 #step-in {
134   list-style-image: url("debugger-step-in.png");
135 }
136
137 #step-out {
138   list-style-image: url("debugger-step-out.png");
139 }
140
141 @media (min-resolution: 1.1dppx) {
142   #resume {
143     list-style-image: url(debugger-play@2x.png);
144     -moz-image-region: rect(0px,64px,32px,32px);
145   }
146
147   #step-over {
148     list-style-image: url(debugger-step-over@2x.png);
149   }
150
151   #step-in {
152     list-style-image: url(debugger-step-in@2x.png);
153   }
154
155   #step-out {
156     list-style-image: url(debugger-step-out@2x.png);
157   }
158 }
159
160 #debugging-controls > toolbarbutton {
161   transition: opacity 0.15s ease-in-out;
162 }
163
164 #debugging-controls > toolbarbutton[disabled=true] {
165   opacity: 0.5;
166 }
167
168 #calls-slider {
169   -moz-padding-end: 24px;
170 }
171
172 #calls-slider .scale-slider {
173   margin: 0;
174 }
175
176 #debugging-toolbar-sizer-button {
177   /* This button's only purpose in life is to make the
178      container .devtools-toolbar have the right height. */
179   visibility: hidden;
180   min-width: 1px;
181 }
182
183 /* Calls list pane */
184
185 #calls-list .side-menu-widget-container {
186   background: transparent;
187 }
188
189 #calls-list .side-menu-widget-item {
190   padding: 0;
191 }
192
193 /* Calls list items */
194
195 #calls-list .side-menu-widget-item {
196   border-color: #504848;
197   border-bottom-color: transparent;
198 }
199
200 .call-item-view:hover {
201   background-color: #402800;
202 }
203
204 .call-item-view[draw-call] {
205   background-color: #403800;
206 }
207
208 .call-item-view[interesting-call] {
209   background-color: #272740;
210 }
211
212 .call-item-gutter {
213   width: calc(3em + 22px);
214   -moz-padding-start: 22px;
215   -moz-padding-end: 4px;
216   padding-top: 2px;
217   padding-bottom: 2px;
218   -moz-border-end: 1px solid;
219   -moz-margin-end: 6px;
220 }
221
222 .selected .call-item-gutter {
223   background-image: url("editor-debug-location.png");
224   background-repeat: no-repeat;
225   background-position: 6px center;
226   background-size: 12px;
227 }
228
229 @media (min-resolution: 1.1dppx) {
230   .selected .call-item-gutter {
231     background-image: url("editor-debug-location@2x.png");
232   }
233 }
234
235 .call-item-gutter {
236   background-color: var(--theme-contrastsidebar-background);
237   color: var(--theme-contrastsidebar-color);
238   border-color: var(--theme-contrastsidebar-bordercolor);
239 }
240
241 .call-item-index {
242   text-align: end;
243 }
244
245 .call-item-context {
246   color: var(--theme-highlight-lightorange);
247 }
248
249 .call-item-name {
250   color: var(--theme-highlight-blue);
251 }
252
253 .call-item-location {
254   -moz-padding-start: 2px;
255   -moz-padding-end: 6px;
256   text-align: end;
257   cursor: pointer;
258   color: var(--theme-highlight-bluegrey);
259 }
260
261 .call-item-location:hover {
262   color: var(--theme-highlight-blue);
263 }
264
265 .call-item-view:hover .call-item-location,
266 .call-item-view[expanded] .call-item-location {
267   text-decoration: underline;
268 }
269
270 .call-item-location {
271   border-color: #A09090;
272 }
273
274 .call-item-stack {
275   -moz-padding-start: calc(3em + 22px);
276   padding-bottom: 10px;
277 }
278
279 .call-item-stack {
280   background: #403800;
281 }
282
283 .call-item-stack-fn {
284   padding-top: 2px;
285   padding-bottom: 2px;
286 }
287
288 .call-item-stack-fn-location {
289   -moz-padding-start: 2px;
290   -moz-padding-end: 6px;
291   text-align: end;
292   cursor: pointer;
293   text-decoration: underline;
294 }
295
296 .call-item-stack-fn-name {
297   color: var(--theme-content-color2);
298 }
299
300 .theme-dark .call-item-stack-fn-location {
301   color: var(--theme-content-color1);
302 }
303
304 .theme-dark .call-item-stack-fn-location:hover {
305   color: var(--theme-highlight-blue);
306 }
307
308 #calls-list .selected .call-item-contents > label:not(.call-item-gutter) {
309   /* Text inside a selected item should not be custom colored. */
310   color: inherit !important;
311 }
312
313 /* Rendering preview */
314
315 #screenshot-container {
316   background-image: linear-gradient(45deg, #504848 25%, transparent 25%, transparent 75%, #504848 75%, #504848), linear-gradient(45deg, #504848 25%, transparent 25%, transparent 75%, #504848 75%, #504848);
317   background-size: 30px 30px, 30px 30px;
318   background-position: 0px 0px, 15px 15px;
319   background-repeat: repeat, repeat;
320 }
321
322 #screenshot-container {
323   background-color: #000000;
324 }
325
326 @media (min-width: 701px) {
327   #screenshot-container {
328     width: 30vw;
329     max-width: 50vw;
330     min-width: 100px;
331   }
332 }
333
334 @media (max-width: 700px) {
335   #screenshot-container {
336     height: 40vh;
337     max-height: 70vh;
338     min-height: 100px;
339   }
340 }
341
342 #screenshot-image {
343   background-image: -moz-element(#screenshot-rendering);
344   background-size: contain;
345   background-position: center, center;
346   background-repeat: no-repeat;
347 }
348
349 #screenshot-image[flipped=true] {
350   transform: scaleY(-1);
351 }
352
353 #screenshot-dimensions {
354   padding-top: 4px;
355   padding-bottom: 4px;
356   text-align: center;
357 }
358
359 #screenshot-dimensions {
360   background-color: #402800;
361 }
362
363 /* Snapshot filmstrip */
364
365 #snapshot-filmstrip {
366   overflow: hidden;
367 }
368
369 #snapshot-filmstrip {
370   border-top: 1px solid #000;
371   color: var(--theme-body-color);
372 }
373
374 .filmstrip-thumbnail {
375   image-rendering: -moz-crisp-edges;
376   background-image: linear-gradient(45deg, #504848 25%, transparent 25%, transparent 75%, #504848 75%, #504848), linear-gradient(45deg, #504848 25%, transparent 25%, transparent 75%, #504848 75%, #504848);
377   background-size: 12px 12px, 12px 12px;
378   background-position: 0px -1px, 6px 5px;
379   background-repeat: repeat, repeat;
380   background-origin: content-box;
381   cursor: pointer;
382   padding-top: 1px;
383   padding-bottom: 1px;
384   transition: opacity 0.1s ease-in-out;
385 }
386
387 .filmstrip-thumbnail[flipped=true] {
388   transform: scaleY(-1);
389 }
390
391 .filmstrip-thumbnail {
392   background-color: #000000;
393 }
394
395 .filmstrip-thumbnail {
396   -moz-border-end: 1px solid var(--theme--contrastsidebar-bordercolor)
397 }
398
399 #snapshot-filmstrip > .filmstrip-thumbnail:hover,
400 #snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] {
401   border: 1px solid var(--theme-highlight-blue);
402   margin: 0 0 0 -1px;
403   padding: 0;
404   opacity: 0.66;
405 }