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