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