Mercurial Repositories > eric / file comparison

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

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

branch
eric7
changeset 8775
0802ae193343
child 9099
0e511e0e94a3
equal deleted inserted replaced
8774:d728227e8ebb 8775:0802ae193343
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 // Page structure
160 header {
161 background: $light-gray1;
162 @include background-dark(black);
163 width: 100%;
164 z-index: 2;
165 border-bottom: 1px solid $light-gray3;
166 @include border-color-dark($dark-gray2);
167
168 .content {
169 padding: 1rem $left-gutter;
170 }
171
172 h2 {
173 margin-top: .5em;
174 font-size: 1em;
175 }
176
177 &.sticky {
178 position: fixed;
179 left: 0;
180 right: 0;
181 height: 2.5em;
182
183 .text {
184 display: none;
185 }
186
187 h1, h2 {
188 font-size: 1em;
189 margin-top: 0;
190 display: inline-block;
191 }
192
193 .content {
194 padding: .5rem $left-gutter;
195 p {
196 font-size: 1em;
197 }
198 }
199
200 & ~ #source {
201 padding-top: 6.5em;
202 }
203 }
204 }
205
206 main {
207 position: relative;
208 z-index: 1;
209 }
210
211 .indexfile footer {
212 margin: 1rem $left-gutter;
213 }
214
215 .pyfile footer {
216 margin: 1rem 1rem;
217 }
218
219 footer .content {
220 padding: 0;
221 color: $light-gray5;
222 @include color-dark($dark-gray5);
223 font-style: italic;
224 }
225
226 #index {
227 margin: 1rem 0 0 $left-gutter;
228 }
229
230 // Header styles
231
232 h1 {
233 font-size: 1.25em;
234 display: inline-block;
235 }
236
237 #filter_container {
238 float: right;
239 margin: 0 2em 0 0;
240
241 input {
242 width: 10em;
243 padding: 0.2em 0.5em;
244 border: 2px solid $light-gray3;
245 background: $light-bg;
246 color: $light-fg;
247 @include border-color-dark($dark-gray3);
248 @include background-dark($dark-bg);
249 @include color-dark($dark-fg);
250 &:focus {
251 border-color: $focus-color;
252 }
253 }
254 }
255
256 header button {
257 font-family: inherit;
258 font-size: inherit;
259 border: 1px solid;
260 border-radius: .2em;
261 color: inherit;
262 padding: .1em .5em;
263 margin: 1px calc(.1em + 1px);
264 cursor: pointer;
265 border-color: $light-gray3;
266 @include border-color-dark($dark-gray3);
267 @include focus-border;
268
269 &.run {
270 background: mix($light-run-bg, $light-bg, $off-button-lighten);
271 @include background-dark($dark-run-bg);
272 &.show_run {
273 background: $light-run-bg;
274 @include background-dark($dark-run-bg);
275 border: 2px solid $run-color;
276 margin: 0 .1em;
277 }
278 }
279 &.mis {
280 background: mix($light-mis-bg, $light-bg, $off-button-lighten);
281 @include background-dark($dark-mis-bg);
282 &.show_mis {
283 background: $light-mis-bg;
284 @include background-dark($dark-mis-bg);
285 border: 2px solid $mis-color;
286 margin: 0 .1em;
287 }
288 }
289 &.exc {
290 background: mix($light-exc-bg, $light-bg, $off-button-lighten);
291 @include background-dark($dark-exc-bg);
292 &.show_exc {
293 background: $light-exc-bg;
294 @include background-dark($dark-exc-bg);
295 border: 2px solid $exc-color;
296 margin: 0 .1em;
297 }
298 }
299 &.par {
300 background: mix($light-par-bg, $light-bg, $off-button-lighten);
301 @include background-dark($dark-par-bg);
302 &.show_par {
303 background: $light-par-bg;
304 @include background-dark($dark-par-bg);
305 border: 2px solid $par-color;
306 margin: 0 .1em;
307 }
308 }
309 }
310
311 // Yellow post-it things.
312 %popup {
313 display: none;
314 position: absolute;
315 z-index: 999;
316 background: #ffffcc;
317 border: 1px solid #888;
318 border-radius: .2em;
319 color: #333;
320 padding: .25em .5em;
321 }
322
323 // Yellow post-it's in the text listings.
324 %in-text-popup {
325 @extend %popup;
326 white-space: normal;
327 float: right;
328 top: 1.75em;
329 right: 1em;
330 height: auto;
331 }
332
333 // Help panel
334 #help_panel_wrapper {
335 float: right;
336 position: relative;
337 }
338
339 #keyboard_icon {
340 margin: 5px;
341 }
342
343 #help_panel_state {
344 display: none;
345 }
346
347 #help_panel {
348 @extend %popup;
349 top: 25px;
350 right: 0;
351 padding: .75em;
352 border: 1px solid #883;
353
354 .legend {
355 font-style: italic;
356 margin-bottom: 1em;
357 }
358
359 .indexfile & {
360 width: 25em;
361 //min-height: 4em;
362 }
363
364 .pyfile & {
365 width: 18em;
366 //min-height: 8em;
367 }
368
369 #help_panel_state:checked ~ & {
370 display: block;
371 }
372 }
373
374 .keyhelp {
375 margin-top: .75em;
376 }
377
378 kbd {
379 border: 1px solid black;
380 border-color: #888 #333 #333 #888;
381 padding: .1em .35em;
382 font-family: $font-code;
383 font-weight: bold;
384 background: #eee;
385 border-radius: 3px;
386 }
387
388 // Source file styles
389
390 // The slim bar at the left edge of the source lines, colored by coverage.
391 $border-indicator-width: .2em;
392
393 #source {
394 padding: 1em 0 1em $left-gutter;
395 font-family: $font-code;
396
397 p {
398 // position relative makes position:absolute pop-ups appear in the right place.
399 position: relative;
400 white-space: pre;
401
402 * {
403 box-sizing: border-box;
404 }
405
406 .n {
407 float: left;
408 text-align: right;
409 width: $left-gutter;
410 box-sizing: border-box;
411 margin-left: -$left-gutter;
412 padding-right: 1em;
413 color: $light-gray4;
414 @include color-dark($dark-gray4);
415
416 &.highlight {
417 background: #ffdd00;
418 }
419
420 a {
421 // These two lines make anchors to the line scroll the line to be
422 // visible beneath the fixed-position header.
423 margin-top: -4em;
424 padding-top: 4em;
425
426 text-decoration: none;
427 color: $light-gray4;
428 @include color-dark($dark-gray4);
429 &:hover {
430 text-decoration: underline;
431 color: $light-gray4;
432 @include color-dark($dark-gray4);
433 }
434 }
435 }
436
437 .t {
438 display: inline-block;
439 width: 100%;
440 box-sizing: border-box;
441 margin-left: -.5em;
442 padding-left: .5em - $border-indicator-width;
443 border-left: $border-indicator-width solid $light-bg;
444 @include border-color-dark($dark-bg);
445
446 &:hover {
447 background: mix($light-pln-bg, $light-fg, $hover-dark-amt);
448 @include background-dark(mix($dark-pln-bg, $dark-fg, $hover-dark-amt));
449
450 & ~ .r .annotate.long {
451 display: block;
452 }
453 }
454
455 // Syntax coloring
456 .com {
457 color: $light-token-com;
458 @include color-dark($dark-token-com);
459 font-style: italic;
460 line-height: 1px;
461 }
462 .key {
463 font-weight: bold;
464 line-height: 1px;
465 }
466 .str {
467 color: $light-token-str;
468 @include color-dark($dark-token-str);
469 }
470 }
471
472 &.mis {
473 .t {
474 border-left: $border-indicator-width solid $mis-color;
475 }
476
477 &.show_mis .t {
478 background: $light-mis-bg;
479 @include background-dark($dark-mis-bg);
480
481 &:hover {
482 background: mix($light-mis-bg, $light-fg, $hover-dark-amt);
483 @include background-dark(mix($dark-mis-bg, $dark-fg, $hover-dark-amt));
484 }
485 }
486 }
487
488 &.run {
489 .t {
490 border-left: $border-indicator-width solid $run-color;
491 }
492
493 &.show_run .t {
494 background: $light-run-bg;
495 @include background-dark($dark-run-bg);
496
497 &:hover {
498 background: mix($light-run-bg, $light-fg, $hover-dark-amt);
499 @include background-dark(mix($dark-run-bg, $dark-fg, $hover-dark-amt));
500 }
501 }
502 }
503
504 &.exc {
505 .t {
506 border-left: $border-indicator-width solid $exc-color;
507 }
508
509 &.show_exc .t {
510 background: $light-exc-bg;
511 @include background-dark($dark-exc-bg);
512
513 &:hover {
514 background: mix($light-exc-bg, $light-fg, $hover-dark-amt);
515 @include background-dark(mix($dark-exc-bg, $dark-fg, $hover-dark-amt));
516 }
517 }
518 }
519
520 &.par {
521 .t {
522 border-left: $border-indicator-width solid $par-color;
523 }
524
525 &.show_par .t {
526 background: $light-par-bg;
527 @include background-dark($dark-par-bg);
528
529 &:hover {
530 background: mix($light-par-bg, $light-fg, $hover-dark-amt);
531 @include background-dark(mix($dark-par-bg, $dark-fg, $hover-dark-amt));
532 }
533 }
534
535 }
536
537 .r {
538 position: absolute;
539 top: 0;
540 right: 2.5em;
541 font-family: $font-normal;
542 }
543
544 .annotate {
545 font-family: $font-normal;
546 color: $light-gray5;
547 @include color-dark($dark-gray6);
548 padding-right: .5em;
549
550 &.short:hover ~ .long {
551 display: block;
552 }
553
554 &.long {
555 @extend %in-text-popup;
556 width: 30em;
557 right: 2.5em;
558 }
559 }
560
561 input {
562 display: none;
563
564 & ~ .r label.ctx {
565 cursor: pointer;
566 border-radius: .25em;
567 &::before {
568 content: "▶ ";
569 }
570 &:hover {
571 background: mix($light-context-bg-color, $light-bg, $off-button-lighten);
572 @include background-dark(mix($dark-context-bg-color, $dark-bg, $off-button-lighten));
573 color: $light-gray5;
574 @include color-dark($dark-gray5);
575 }
576 }
577
578 &:checked ~ .r label.ctx {
579 background: $light-context-bg-color;
580 @include background-dark($dark-context-bg-color);
581 color: $light-gray5;
582 @include color-dark($dark-gray5);
583 border-radius: .75em .75em 0 0;
584 padding: 0 .5em;
585 margin: -.25em 0;
586 &::before {
587 content: "▼ ";
588 }
589 }
590
591 &:checked ~ .ctxs {
592 padding: .25em .5em;
593 overflow-y: scroll;
594 max-height: 10.5em;
595 }
596 }
597
598 label.ctx {
599 color: $light-gray4;
600 @include color-dark($dark-gray4);
601 display: inline-block;
602 padding: 0 .5em;
603 font-size: .8333em; // 10/12
604 }
605
606 .ctxs {
607 display: block;
608 max-height: 0;
609 overflow-y: hidden;
610 transition: all .2s;
611 padding: 0 .5em;
612 font-family: $font-normal;
613 white-space: nowrap;
614 background: $light-context-bg-color;
615 @include background-dark($dark-context-bg-color);
616 border-radius: .25em;
617 margin-right: 1.75em;
618 span {
619 display: block;
620 text-align: right;
621 }
622 }
623 }
624 }
625
626
627 // index styles
628 #index {
629 font-family: $font-code;
630 font-size: 0.875em;
631
632 table.index {
633 margin-left: -.5em;
634 }
635 td, th {
636 text-align: right;
637 width: 5em;
638 padding: .25em .5em;
639 border-bottom: 1px solid $light-gray2;
640 @include border-color-dark($dark-gray2);
641 &.name {
642 text-align: left;
643 width: auto;
644 }
645 }
646 th {
647 font-style: italic;
648 color: $light-gray6;
649 @include color-dark($dark-gray6);
650 cursor: pointer;
651 &:hover {
652 background: $light-gray2;
653 @include background-dark($dark-gray2);
654 }
655 &[aria-sort="ascending"], &[aria-sort="descending"] {
656 white-space: nowrap;
657 background: $light-gray2;
658 @include background-dark($dark-gray2);
659 padding-left: .5em;
660 }
661 &[aria-sort="ascending"]::after {
662 font-family: sans-serif;
663 content: " ↑";
664 }
665 &[aria-sort="descending"]::after {
666 font-family: sans-serif;
667 content: " ↓";
668 }
669 }
670 td.name a {
671 text-decoration: none;
672 color: inherit;
673 }
674
675 tr.total td,
676 tr.total_dynamic td {
677 font-weight: bold;
678 border-top: 1px solid #ccc;
679 border-bottom: none;
680 }
681 tr.file:hover {
682 background: $light-gray2;
683 @include background-dark($dark-gray2);
684 td.name {
685 text-decoration: underline;
686 color: inherit;
687 }
688 }
689 }
690
691 // scroll marker styles
692 #scroll_marker {
693 position: fixed;
694 z-index: 3;
695 right: 0;
696 top: 0;
697 width: 16px;
698 height: 100%;
699 background: $light-bg;
700 border-left: 1px solid $light-gray2;
701 @include background-dark($dark-bg);
702 @include border-color-dark($dark-gray2);
703 will-change: transform; // for faster scrolling of fixed element in Chrome
704
705 .marker {
706 background: $light-gray3;
707 @include background-dark($dark-gray3);
708 position: absolute;
709 min-height: 3px;
710 width: 100%;
711 }
712 }

Mercurial Repository: eric

eric ide

mercurial