Mercurial Repositories > eric / file comparison

comparison: src/eric7/DebugClients/Python/coverage/htmlfiles/style.scss

src/eric7/DebugClients/Python/coverage/htmlfiles/style.scss

branch
eric7
changeset 9209
b99e7fd55fd3
parent 9099
0e511e0e94a3
equal deleted inserted replaced
9208:3fc8dfeb6ebe 9209:b99e7fd55fd3
1 /* Licensed under the Apache License: http://www.apache.org/licenses/LICENSE-2.0 */
2 /* For details: https://github.com/nedbat/coveragepy/blob/master/NOTICE.txt */
3
4 // CSS styles for coverage.py HTML reports.
5
6 // When you edit this file, you need to run "make css" to get the CSS file
7 // generated, and then check in both the .scss and the .css files.
8
9 // When working on the file, this command is useful:
10 // sass --watch --style=compact --sourcemap=none --no-cache coverage/htmlfiles/style.scss:htmlcov/style.css
11 //
12 // OR you can process sass purely in python with `pip install pysass`, then:
13 // pysassc --style=compact coverage/htmlfiles/style.scss coverage/htmlfiles/style.css
14
15 // Ignore this comment, it's for the CSS output file:
16 /* Don't edit this .css file. Edit the .scss file instead! */
17
18 // Dimensions
19 $left-gutter: 3.5rem;
20
21 //
22 // Declare colors and variables
23 //
24
25 $font-normal: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
26 $font-code: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
27
28 $off-button-lighten: 50%;
29 $hover-dark-amt: 95%;
30
31 $focus-color: #007acc;
32
33 $mis-color: #ff0000;
34 $run-color: #00dd00;
35 $exc-color: #808080;
36 $par-color: #bbbb00;
37
38 $light-bg: #fff;
39 $light-fg: #000;
40 $light-gray1: #f8f8f8;
41 $light-gray2: #eee;
42 $light-gray3: #ccc;
43 $light-gray4: #999;
44 $light-gray5: #666;
45 $light-gray6: #333;
46 $light-pln-bg: $light-bg;
47 $light-mis-bg: #fdd;
48 $light-run-bg: #dfd;
49 $light-exc-bg: $light-gray2;
50 $light-par-bg: #ffa;
51 $light-token-com: #008000;
52 $light-token-str: #0451a5;
53 $light-context-bg-color: #d0e8ff;
54
55 $dark-bg: #1e1e1e;
56 $dark-fg: #eee;
57 $dark-gray1: #222;
58 $dark-gray2: #333;
59 $dark-gray3: #444;
60 $dark-gray4: #777;
61 $dark-gray5: #aaa;
62 $dark-gray6: #ddd;
63 $dark-pln-bg: $dark-bg;
64 $dark-mis-bg: #4b1818;
65 $dark-run-bg: #373d29;
66 $dark-exc-bg: $dark-gray2;
67 $dark-par-bg: #650;
68 $dark-token-com: #6a9955;
69 $dark-token-str: #9cdcfe;
70 $dark-context-bg-color: #056;
71
72 //
73 // Mixins and utilities
74 //
75
76 @mixin background-dark($color) {
77 @media (prefers-color-scheme: dark) {
78 background: $color;
79 }
80 }
81 @mixin color-dark($color) {
82 @media (prefers-color-scheme: dark) {
83 color: $color;
84 }
85 }
86 @mixin border-color-dark($color) {
87 @media (prefers-color-scheme: dark) {
88 border-color: $color;
89 }
90 }
91
92 // Add visual outline to navigable elements on focus improve accessibility.
93 @mixin focus-border {
94 &:active, &:focus {
95 outline: 2px dashed $focus-color;
96 }
97 }
98
99 // Page-wide styles
100 html, body, h1, h2, h3, p, table, td, th {
101 margin: 0;
102 padding: 0;
103 border: 0;
104 font-weight: inherit;
105 font-style: inherit;
106 font-size: 100%;
107 font-family: inherit;
108 vertical-align: baseline;
109 }
110
111 // Set baseline grid to 16 pt.
112 body {
113 font-family: $font-normal;
114 font-size: 1em;
115 background: $light-bg;
116 color: $light-fg;
117 @include background-dark($dark-bg);
118 @include color-dark($dark-fg);
119 }
120
121 html>body {
122 font-size: 16px;
123 }
124
125 a {
126 @include focus-border;
127 }
128
129 p {
130 font-size: .875em;
131 line-height: 1.4em;
132 }
133
134 table {
135 border-collapse: collapse;
136 }
137 td {
138 vertical-align: top;
139 }
140 table tr.hidden {
141 display: none !important;
142 }
143
144 p#no_rows {
145 display: none;
146 font-size: 1.2em;
147 }
148
149 a.nav {
150 text-decoration: none;
151 color: inherit;
152
153 &:hover {
154 text-decoration: underline;
155 color: inherit;
156 }
157 }
158
159 .hidden {
160 display: none;
161 }
162
163 // Page structure
164 header {
165 background: $light-gray1;
166 @include background-dark(black);
167 width: 100%;
168 z-index: 2;
169 border-bottom: 1px solid $light-gray3;
170 @include border-color-dark($dark-gray2);
171
172 .content {
173 padding: 1rem $left-gutter;
174 }
175
176 h2 {
177 margin-top: .5em;
178 font-size: 1em;
179 }
180
181 p.text {
182 margin: .5em 0 -.5em;
183 color: $light-gray5;
184 @include color-dark($dark-gray5);
185 font-style: italic;
186 }
187
188 &.sticky {
189 position: fixed;
190 left: 0;
191 right: 0;
192 height: 2.5em;
193
194 .text {
195 display: none;
196 }
197
198 h1, h2 {
199 font-size: 1em;
200 margin-top: 0;
201 display: inline-block;
202 }
203
204 .content {
205 padding: .5rem $left-gutter;
206 p {
207 font-size: 1em;
208 }
209 }
210
211 & ~ #source {
212 padding-top: 6.5em;
213 }
214 }
215 }
216
217 main {
218 position: relative;
219 z-index: 1;
220 }
221
222 footer {
223 margin: 1rem $left-gutter;
224
225 .content {
226 padding: 0;
227 color: $light-gray5;
228 @include color-dark($dark-gray5);
229 font-style: italic;
230 }
231 }
232
233 #index {
234 margin: 1rem 0 0 $left-gutter;
235 }
236
237 // Header styles
238
239 h1 {
240 font-size: 1.25em;
241 display: inline-block;
242 }
243
244 #filter_container {
245 float: right;
246 margin: 0 2em 0 0;
247
248 input {
249 width: 10em;
250 padding: 0.2em 0.5em;
251 border: 2px solid $light-gray3;
252 background: $light-bg;
253 color: $light-fg;
254 @include border-color-dark($dark-gray3);
255 @include background-dark($dark-bg);
256 @include color-dark($dark-fg);
257 &:focus {
258 border-color: $focus-color;
259 }
260 }
261 }
262
263 header button {
264 font-family: inherit;
265 font-size: inherit;
266 border: 1px solid;
267 border-radius: .2em;
268 color: inherit;
269 padding: .1em .5em;
270 margin: 1px calc(.1em + 1px);
271 cursor: pointer;
272 border-color: $light-gray3;
273 @include border-color-dark($dark-gray3);
274 @include focus-border;
275
276 &.run {
277 background: mix($light-run-bg, $light-bg, $off-button-lighten);
278 @include background-dark($dark-run-bg);
279 &.show_run {
280 background: $light-run-bg;
281 @include background-dark($dark-run-bg);
282 border: 2px solid $run-color;
283 margin: 0 .1em;
284 }
285 }
286 &.mis {
287 background: mix($light-mis-bg, $light-bg, $off-button-lighten);
288 @include background-dark($dark-mis-bg);
289 &.show_mis {
290 background: $light-mis-bg;
291 @include background-dark($dark-mis-bg);
292 border: 2px solid $mis-color;
293 margin: 0 .1em;
294 }
295 }
296 &.exc {
297 background: mix($light-exc-bg, $light-bg, $off-button-lighten);
298 @include background-dark($dark-exc-bg);
299 &.show_exc {
300 background: $light-exc-bg;
301 @include background-dark($dark-exc-bg);
302 border: 2px solid $exc-color;
303 margin: 0 .1em;
304 }
305 }
306 &.par {
307 background: mix($light-par-bg, $light-bg, $off-button-lighten);
308 @include background-dark($dark-par-bg);
309 &.show_par {
310 background: $light-par-bg;
311 @include background-dark($dark-par-bg);
312 border: 2px solid $par-color;
313 margin: 0 .1em;
314 }
315 }
316 }
317
318 // Yellow post-it things.
319 %popup {
320 display: none;
321 position: absolute;
322 z-index: 999;
323 background: #ffffcc;
324 border: 1px solid #888;
325 border-radius: .2em;
326 color: #333;
327 padding: .25em .5em;
328 }
329
330 // Yellow post-it's in the text listings.
331 %in-text-popup {
332 @extend %popup;
333 white-space: normal;
334 float: right;
335 top: 1.75em;
336 right: 1em;
337 height: auto;
338 }
339
340 // Help panel
341 #help_panel_wrapper {
342 float: right;
343 position: relative;
344 }
345
346 #keyboard_icon {
347 margin: 5px;
348 }
349
350 #help_panel_state {
351 display: none;
352 }
353
354 #help_panel {
355 @extend %popup;
356 top: 25px;
357 right: 0;
358 padding: .75em;
359 border: 1px solid #883;
360
361 color: #333;
362
363 .keyhelp p {
364 margin-top: .75em;
365 }
366
367 .legend {
368 font-style: italic;
369 margin-bottom: 1em;
370 }
371
372 .indexfile & {
373 width: 25em;
374 }
375
376 .pyfile & {
377 width: 18em;
378 }
379
380 #help_panel_state:checked ~ & {
381 display: block;
382 }
383 }
384
385 kbd {
386 border: 1px solid black;
387 border-color: #888 #333 #333 #888;
388 padding: .1em .35em;
389 font-family: $font-code;
390 font-weight: bold;
391 background: #eee;
392 border-radius: 3px;
393 }
394
395 // Source file styles
396
397 // The slim bar at the left edge of the source lines, colored by coverage.
398 $border-indicator-width: .2em;
399
400 #source {
401 padding: 1em 0 1em $left-gutter;
402 font-family: $font-code;
403
404 p {
405 // position relative makes position:absolute pop-ups appear in the right place.
406 position: relative;
407 white-space: pre;
408
409 * {
410 box-sizing: border-box;
411 }
412
413 .n {
414 float: left;
415 text-align: right;
416 width: $left-gutter;
417 box-sizing: border-box;
418 margin-left: -$left-gutter;
419 padding-right: 1em;
420 color: $light-gray4;
421 @include color-dark($dark-gray4);
422
423 &.highlight {
424 background: #ffdd00;
425 }
426
427 a {
428 // These two lines make anchors to the line scroll the line to be
429 // visible beneath the fixed-position header.
430 margin-top: -4em;
431 padding-top: 4em;
432
433 text-decoration: none;
434 color: $light-gray4;
435 @include color-dark($dark-gray4);
436 &:hover {
437 text-decoration: underline;
438 color: $light-gray4;
439 @include color-dark($dark-gray4);
440 }
441 }
442 }
443
444 .t {
445 display: inline-block;
446 width: 100%;
447 box-sizing: border-box;
448 margin-left: -.5em;
449 padding-left: .5em - $border-indicator-width;
450 border-left: $border-indicator-width solid $light-bg;
451 @include border-color-dark($dark-bg);
452
453 &:hover {
454 background: mix($light-pln-bg, $light-fg, $hover-dark-amt);
455 @include background-dark(mix($dark-pln-bg, $dark-fg, $hover-dark-amt));
456
457 & ~ .r .annotate.long {
458 display: block;
459 }
460 }
461
462 // Syntax coloring
463 .com {
464 color: $light-token-com;
465 @include color-dark($dark-token-com);
466 font-style: italic;
467 line-height: 1px;
468 }
469 .key {
470 font-weight: bold;
471 line-height: 1px;
472 }
473 .str {
474 color: $light-token-str;
475 @include color-dark($dark-token-str);
476 }
477 }
478
479 &.mis {
480 .t {
481 border-left: $border-indicator-width solid $mis-color;
482 }
483
484 &.show_mis .t {
485 background: $light-mis-bg;
486 @include background-dark($dark-mis-bg);
487
488 &:hover {
489 background: mix($light-mis-bg, $light-fg, $hover-dark-amt);
490 @include background-dark(mix($dark-mis-bg, $dark-fg, $hover-dark-amt));
491 }
492 }
493 }
494
495 &.run {
496 .t {
497 border-left: $border-indicator-width solid $run-color;
498 }
499
500 &.show_run .t {
501 background: $light-run-bg;
502 @include background-dark($dark-run-bg);
503
504 &:hover {
505 background: mix($light-run-bg, $light-fg, $hover-dark-amt);
506 @include background-dark(mix($dark-run-bg, $dark-fg, $hover-dark-amt));
507 }
508 }
509 }
510
511 &.exc {
512 .t {
513 border-left: $border-indicator-width solid $exc-color;
514 }
515
516 &.show_exc .t {
517 background: $light-exc-bg;
518 @include background-dark($dark-exc-bg);
519
520 &:hover {
521 background: mix($light-exc-bg, $light-fg, $hover-dark-amt);
522 @include background-dark(mix($dark-exc-bg, $dark-fg, $hover-dark-amt));
523 }
524 }
525 }
526
527 &.par {
528 .t {
529 border-left: $border-indicator-width solid $par-color;
530 }
531
532 &.show_par .t {
533 background: $light-par-bg;
534 @include background-dark($dark-par-bg);
535
536 &:hover {
537 background: mix($light-par-bg, $light-fg, $hover-dark-amt);
538 @include background-dark(mix($dark-par-bg, $dark-fg, $hover-dark-amt));
539 }
540 }
541
542 }
543
544 .r {
545 position: absolute;
546 top: 0;
547 right: 2.5em;
548 font-family: $font-normal;
549 }
550
551 .annotate {
552 font-family: $font-normal;
553 color: $light-gray5;
554 @include color-dark($dark-gray6);
555 padding-right: .5em;
556
557 &.short:hover ~ .long {
558 display: block;
559 }
560
561 &.long {
562 @extend %in-text-popup;
563 width: 30em;
564 right: 2.5em;
565 }
566 }
567
568 input {
569 display: none;
570
571 & ~ .r label.ctx {
572 cursor: pointer;
573 border-radius: .25em;
574 &::before {
575 content: "▶ ";
576 }
577 &:hover {
578 background: mix($light-context-bg-color, $light-bg, $off-button-lighten);
579 @include background-dark(mix($dark-context-bg-color, $dark-bg, $off-button-lighten));
580 color: $light-gray5;
581 @include color-dark($dark-gray5);
582 }
583 }
584
585 &:checked ~ .r label.ctx {
586 background: $light-context-bg-color;
587 @include background-dark($dark-context-bg-color);
588 color: $light-gray5;
589 @include color-dark($dark-gray5);
590 border-radius: .75em .75em 0 0;
591 padding: 0 .5em;
592 margin: -.25em 0;
593 &::before {
594 content: "▼ ";
595 }
596 }
597
598 &:checked ~ .ctxs {
599 padding: .25em .5em;
600 overflow-y: scroll;
601 max-height: 10.5em;
602 }
603 }
604
605 label.ctx {
606 color: $light-gray4;
607 @include color-dark($dark-gray4);
608 display: inline-block;
609 padding: 0 .5em;
610 font-size: .8333em; // 10/12
611 }
612
613 .ctxs {
614 display: block;
615 max-height: 0;
616 overflow-y: hidden;
617 transition: all .2s;
618 padding: 0 .5em;
619 font-family: $font-normal;
620 white-space: nowrap;
621 background: $light-context-bg-color;
622 @include background-dark($dark-context-bg-color);
623 border-radius: .25em;
624 margin-right: 1.75em;
625 span {
626 display: block;
627 text-align: right;
628 }
629 }
630 }
631 }
632
633
634 // index styles
635 #index {
636 font-family: $font-code;
637 font-size: 0.875em;
638
639 table.index {
640 margin-left: -.5em;
641 }
642 td, th {
643 text-align: right;
644 width: 5em;
645 padding: .25em .5em;
646 border-bottom: 1px solid $light-gray2;
647 @include border-color-dark($dark-gray2);
648 &.name {
649 text-align: left;
650 width: auto;
651 }
652 }
653 th {
654 font-style: italic;
655 color: $light-gray6;
656 @include color-dark($dark-gray6);
657 cursor: pointer;
658 &:hover {
659 background: $light-gray2;
660 @include background-dark($dark-gray2);
661 }
662 &[aria-sort="ascending"], &[aria-sort="descending"] {
663 white-space: nowrap;
664 background: $light-gray2;
665 @include background-dark($dark-gray2);
666 padding-left: .5em;
667 }
668 &[aria-sort="ascending"]::after {
669 font-family: sans-serif;
670 content: " ↑";
671 }
672 &[aria-sort="descending"]::after {
673 font-family: sans-serif;
674 content: " ↓";
675 }
676 }
677 td.name a {
678 text-decoration: none;
679 color: inherit;
680 }
681
682 tr.total td,
683 tr.total_dynamic td {
684 font-weight: bold;
685 border-top: 1px solid #ccc;
686 border-bottom: none;
687 }
688 tr.file:hover {
689 background: $light-gray2;
690 @include background-dark($dark-gray2);
691 td.name {
692 text-decoration: underline;
693 color: inherit;
694 }
695 }
696 }
697
698 // scroll marker styles
699 #scroll_marker {
700 position: fixed;
701 z-index: 3;
702 right: 0;
703 top: 0;
704 width: 16px;
705 height: 100%;
706 background: $light-bg;
707 border-left: 1px solid $light-gray2;
708 @include background-dark($dark-bg);
709 @include border-color-dark($dark-gray2);
710 will-change: transform; // for faster scrolling of fixed element in Chrome
711
712 .marker {
713 background: $light-gray3;
714 @include background-dark($dark-gray3);
715 position: absolute;
716 min-height: 3px;
717 width: 100%;
718 }
719 }

Mercurial Repository: eric

eric ide

mercurial