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