Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add dark mode #931

Merged
merged 2 commits into from Jun 28, 2020
Merged

Add dark mode #931

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bcf70b4
Add dark mode to HTML output; improve accessibility
vsalvino Feb 11, 2020
bcd571b
Fix tests
vsalvino Jun 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 4 additions & 4 deletions coverage/htmlfiles/pyfile.html
View file
Open in desktop
Expand Up @@ -33,12 +33,12 @@ <h1>Coverage for <b>{{relative_filename|escape}}</b> :

<h2 class="stats">
{{nums.n_statements}} statements &nbsp;
<span class="{{category.run}} shortkey_r button_toggle_run">{{nums.n_executed}} run</span>
<span class="{{category.mis}} shortkey_m button_toggle_mis">{{nums.n_missing}} missing</span>
<span class="{{category.exc}} shortkey_x button_toggle_exc">{{nums.n_excluded}} excluded</span>
<button type="button" class="{{category.run}} shortkey_r button_toggle_run" title="Toggle lines run">{{nums.n_executed}} run</button>
<button type="button" class="{{category.mis}} shortkey_m button_toggle_mis" title="Toggle lines missing">{{nums.n_missing}} missing</button>
<button type="button" class="{{category.exc}} shortkey_x button_toggle_exc" title="Toggle lines excluded">{{nums.n_excluded}} excluded</button>

{% if has_arcs %}
<span class="{{category.par}} shortkey_p button_toggle_par">{{nums.n_partial_branches}} partial</span>
<button type="button" class="{{category.par}} shortkey_p button_toggle_par" title="Toggle lines partially run">{{nums.n_partial_branches}} partial</button>
{% endif %}
</h2>
</div>
Expand Down
243 changes: 201 additions & 42 deletions coverage/htmlfiles/style.css
View file
Open in desktop
Expand Up @@ -4,11 +4,17 @@
/* Don't edit this .css file. Edit the .scss file instead! */
html, body, h1, h2, h3, p, table, td, th { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

body { font-family: georgia, serif; font-size: 1em; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 1em; background: #fff; color: #000; }

@media (prefers-color-scheme: dark) { body { background: #1e1e1e; } }

@media (prefers-color-scheme: dark) { body { color: #eee; } }

html > body { font-size: 16px; }

p { font-size: .75em; line-height: 1.33333333em; }
a:active, a:focus { outline: 2px dashed #007acc; }

p { font-size: .875em; line-height: 1.4em; }

table { border-collapse: collapse; }

Expand All @@ -19,106 +25,259 @@ table tr.hidden { display: none !important; }
p#no_rows { display: none; font-size: 1.2em; }

a.nav { text-decoration: none; color: inherit; }

a.nav:hover { text-decoration: underline; color: inherit; }

#header { background: #f8f8f8; width: 100%; border-bottom: 1px solid #eee; }

@media (prefers-color-scheme: dark) { #header { background: black; } }

@media (prefers-color-scheme: dark) { #header { border-color: #333; } }

.indexfile #footer { margin: 1em 3em; }

.pyfile #footer { margin: 1em 1em; }

#footer .content { padding: 0; font-size: 85%; font-family: verdana, sans-serif; color: #666666; font-style: italic; }
#footer .content { padding: 0; color: #666; font-style: italic; }

@media (prefers-color-scheme: dark) { #footer .content { color: #aaa; } }

#index { margin: 1em 0 0 3em; }

#header .content { padding: 1em 3rem; }

h1 { font-size: 1.25em; display: inline-block; }

#filter_container { display: inline-block; float: right; margin: 0 2em 0 0; }
#filter_container input { width: 10em; }
#filter_container { float: right; margin: 0 2em 0 0; }

#filter_container input { width: 10em; padding: 0.2em 0.5em; border: 2px solid #ccc; background: #fff; color: #000; }

@media (prefers-color-scheme: dark) { #filter_container input { border-color: #444; } }

@media (prefers-color-scheme: dark) { #filter_container input { background: #1e1e1e; } }

@media (prefers-color-scheme: dark) { #filter_container input { color: #eee; } }

#filter_container input:focus { border-color: #007acc; }

h2.stats { margin-top: .5em; font-size: 1em; }

.stats span { border: 1px solid; border-radius: .1em; padding: .1em .5em; margin: 0 .1em; cursor: pointer; border-color: #ccc #999 #999 #ccc; }
.stats span.run { background: #eeffee; }
.stats span.run.show_run { border-color: #999 #ccc #ccc #999; background: #ddffdd; }
.stats span.mis { background: #ffeeee; }
.stats span.mis.show_mis { border-color: #999 #ccc #ccc #999; background: #ffdddd; }
.stats span.exc { background: #f7f7f7; }
.stats span.exc.show_exc { border-color: #999 #ccc #ccc #999; background: #eeeeee; }
.stats span.par { background: #ffffd5; }
.stats span.par.show_par { border-color: #999 #ccc #ccc #999; background: #ffffaa; }
.stats button { font-family: inherit; font-size: inherit; border: 2px solid; border-radius: .1em; color: inherit; padding: .1em .5em; margin: 0 .1em; cursor: pointer; border-color: #ccc; }

@media (prefers-color-scheme: dark) { .stats button { border-color: #444; } }

.stats button:active, .stats button:focus { outline: 2px dashed #007acc; }

.stats button:active, .stats button:focus { outline: 2px dashed #007acc; }

.stats button.run { background: #eeffee; }

@media (prefers-color-scheme: dark) { .stats button.run { background: #373d29; } }

.stats button.run.show_run { background: #dfd; border-color: #00dd00; }

@media (prefers-color-scheme: dark) { .stats button.run.show_run { background: #373d29; } }

.stats button.mis { background: #ffeeee; }

@media (prefers-color-scheme: dark) { .stats button.mis { background: #4b1818; } }

.stats button.mis.show_mis { background: #fdd; border-color: #ff0000; }

@media (prefers-color-scheme: dark) { .stats button.mis.show_mis { background: #4b1818; } }

.stats button.exc { background: #f7f7f7; }

@media (prefers-color-scheme: dark) { .stats button.exc { background: #333; } }

.stats button.exc.show_exc { background: #eee; border-color: #808080; }

@media (prefers-color-scheme: dark) { .stats button.exc.show_exc { background: #333; } }

.stats button.par { background: #ffffd5; }

#source p .annotate.long, .help_panel { display: none; position: absolute; z-index: 999; background: #ffffcc; border: 1px solid #888; border-radius: .2em; box-shadow: #cccccc .2em .2em .2em; color: #333; padding: .25em .5em; }
@media (prefers-color-scheme: dark) { .stats button.par { background: #650; } }

.stats button.par.show_par { background: #ffa; border-color: #dddd00; }

@media (prefers-color-scheme: dark) { .stats button.par.show_par { background: #650; } }

.help_panel, #source p .annotate.long { display: none; position: absolute; z-index: 999; background: #ffffcc; border: 1px solid #888; border-radius: .2em; color: #333; padding: .25em .5em; }

#source p .annotate.long { white-space: normal; float: right; top: 1.75em; right: 1em; height: auto; }

#keyboard_icon { float: right; margin: 5px; cursor: pointer; }

.help_panel { padding: .5em; border: 1px solid #883; }

.help_panel .legend { font-style: italic; margin-bottom: 1em; }
.indexfile .help_panel { width: 20em; height: 4em; }
.pyfile .help_panel { width: 16em; height: 8em; }

.indexfile .help_panel { width: 20em; min-height: 4em; }

.pyfile .help_panel { width: 16em; min-height: 8em; }

#panel_icon { float: right; cursor: pointer; }

.keyhelp { margin: .75em; }
.keyhelp .key { border: 1px solid black; border-color: #888 #333 #333 #888; padding: .1em .35em; font-family: monospace; font-weight: bold; background: #eee; }

#source { padding: 1em 0 1em 3rem; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; }
.keyhelp .key { border: 1px solid black; border-color: #888 #333 #333 #888; padding: .1em .35em; font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: bold; background: #eee; }

#source { padding: 1em 0 1em 3rem; font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

#source p { position: relative; white-space: pre; }

#source p * { box-sizing: border-box; }
#source p .n { float: left; text-align: right; width: 3rem; box-sizing: border-box; margin-left: -3rem; padding-right: 1em; color: #999999; font-family: verdana, sans-serif; }
#source p .n a { text-decoration: none; color: #999999; font-size: .8333em; line-height: 1em; }
#source p .n a:hover { text-decoration: underline; color: #999999; }

#source p .n { float: left; text-align: right; width: 3rem; box-sizing: border-box; margin-left: -3rem; padding-right: 1em; color: #999; }

@media (prefers-color-scheme: dark) { #source p .n { color: #777; } }

#source p .n a { text-decoration: none; color: #999; }

@media (prefers-color-scheme: dark) { #source p .n a { color: #777; } }

#source p .n a:hover { text-decoration: underline; color: #999; }

@media (prefers-color-scheme: dark) { #source p .n a:hover { color: #777; } }

#source p.highlight .n { background: #ffdd00; }
#source p .t { display: inline-block; width: 100%; box-sizing: border-box; margin-left: -.5em; padding-left: 0.3em; border-left: 0.2em solid white; }

#source p .t { display: inline-block; width: 100%; box-sizing: border-box; margin-left: -.5em; padding-left: 0.3em; border-left: 0.2em solid #fff; }

@media (prefers-color-scheme: dark) { #source p .t { border-color: #1e1e1e; } }

#source p .t:hover { background: #f2f2f2; }

@media (prefers-color-scheme: dark) { #source p .t:hover { background: #282828; } }

#source p .t:hover ~ .r .annotate.long { display: block; }
#source p .t .com { color: green; font-style: italic; line-height: 1px; }

#source p .t .com { color: #008000; font-style: italic; line-height: 1px; }

@media (prefers-color-scheme: dark) { #source p .t .com { color: #6A9955; } }

#source p .t .key { font-weight: bold; line-height: 1px; }
#source p .t .str { color: #000080; }

#source p .t .str { color: #0451A5; }

@media (prefers-color-scheme: dark) { #source p .t .str { color: #9CDCFE; } }

#source p.mis .t { border-left: 0.2em solid #ff0000; }
#source p.mis.show_mis .t { background: #ffdddd; }

#source p.mis.show_mis .t { background: #fdd; }

@media (prefers-color-scheme: dark) { #source p.mis.show_mis .t { background: #4b1818; } }

#source p.mis.show_mis .t:hover { background: #f2d2d2; }
#source p.run .t { border-left: 0.2em solid #00ff00; }
#source p.run.show_run .t { background: #ddffdd; }

@media (prefers-color-scheme: dark) { #source p.mis.show_mis .t:hover { background: #532323; } }

#source p.run .t { border-left: 0.2em solid #00dd00; }

#source p.run.show_run .t { background: #dfd; }

@media (prefers-color-scheme: dark) { #source p.run.show_run .t { background: #373d29; } }

#source p.run.show_run .t:hover { background: #d2f2d2; }

@media (prefers-color-scheme: dark) { #source p.run.show_run .t:hover { background: #404633; } }

#source p.exc .t { border-left: 0.2em solid #808080; }
#source p.exc.show_exc .t { background: #eeeeee; }

#source p.exc.show_exc .t { background: #eee; }

@media (prefers-color-scheme: dark) { #source p.exc.show_exc .t { background: #333; } }

#source p.exc.show_exc .t:hover { background: #e2e2e2; }
#source p.par .t { border-left: 0.2em solid #eeee99; }
#source p.par.show_par .t { background: #ffffaa; }

@media (prefers-color-scheme: dark) { #source p.exc.show_exc .t:hover { background: #3c3c3c; } }

#source p.par .t { border-left: 0.2em solid #dddd00; }

#source p.par.show_par .t { background: #ffa; }

@media (prefers-color-scheme: dark) { #source p.par.show_par .t { background: #650; } }

#source p.par.show_par .t:hover { background: #f2f2a2; }
#source p .r { position: absolute; top: 0; right: 2.5em; font-family: verdana, sans-serif; }
#source p .annotate { font-family: georgia; color: #666; padding-right: .5em; }

@media (prefers-color-scheme: dark) { #source p.par.show_par .t:hover { background: #6d5d0c; } }

#source p .r { position: absolute; top: 0; right: 2.5em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }

#source p .annotate { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; color: #666; padding-right: .5em; }

@media (prefers-color-scheme: dark) { #source p .annotate { color: #ddd; } }

#source p .annotate.short:hover ~ .long { display: block; }

#source p .annotate.long { width: 30em; right: 2.5em; }

#source p input { display: none; }

#source p input ~ .r label.ctx { cursor: pointer; border-radius: .25em; }

#source p input ~ .r label.ctx::before { content: "▶ "; }

#source p input ~ .r label.ctx:hover { background: #d5f7ff; color: #666; }

#source p input:checked ~ .r label.ctx { background: #aaeeff; color: #666; border-radius: .75em .75em 0 0; padding: 0 .5em; margin: -.25em 0; }

#source p input:checked ~ .r label.ctx::before { content: "▼ "; }

#source p input:checked ~ .ctxs { padding: .25em .5em; overflow-y: scroll; max-height: 10.5em; }

#source p label.ctx { color: #999; display: inline-block; padding: 0 .5em; font-size: .8333em; }
#source p .ctxs { display: block; max-height: 0; overflow-y: hidden; transition: all .2s; padding: 0 .5em; font-family: verdana, sans-serif; white-space: nowrap; background: #aaeeff; border-radius: .25em; margin-right: 1.75em; }

@media (prefers-color-scheme: dark) { #source p label.ctx { color: #777; } }

#source p .ctxs { display: block; max-height: 0; overflow-y: hidden; transition: all .2s; padding: 0 .5em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; white-space: nowrap; background: #aaeeff; border-radius: .25em; margin-right: 1.75em; }

#source p .ctxs span { display: block; text-align: right; }

#index { font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.875em; }

#index td, #index th { text-align: right; width: 5em; padding: .25em .5em; border-bottom: 1px solid #eee; }

@media (prefers-color-scheme: dark) { #index td, #index th { border-color: #333; } }

#index td.left, #index th.left { padding-left: 0; }

#index td.right, #index th.right { padding-right: 0; }

#index td.name, #index th.name { text-align: left; width: auto; }
#index th { font-style: italic; color: #333; border-bottom: 1px solid #ccc; cursor: pointer; }
#index th:hover { background: #eee; border-bottom: 1px solid #999; }
#index th.headerSortDown, #index th.headerSortUp { border-bottom: 1px solid #000; white-space: nowrap; background: #eee; }

#index th { font-style: italic; color: #333; cursor: pointer; }

@media (prefers-color-scheme: dark) { #index th { color: #ddd; } }

#index th:hover { background: #eee; }

@media (prefers-color-scheme: dark) { #index th:hover { background: #333; } }

#index th.headerSortDown, #index th.headerSortUp { white-space: nowrap; background: #eee; }

@media (prefers-color-scheme: dark) { #index th.headerSortDown, #index th.headerSortUp { background: #333; } }

#index th.headerSortDown:after { content: " ↓"; }

#index th.headerSortUp:after { content: " ↑"; }
#index td.name a { text-decoration: none; color: #000; }

#index td.name a { text-decoration: none; color: inherit; }

#index tr.total td, #index tr.total_dynamic td { font-weight: bold; border-top: 1px solid #ccc; border-bottom: none; }
#index tr.file:hover { background: #eeeeee; }
#index tr.file:hover td.name { text-decoration: underline; color: #000; }

#scroll_marker { position: fixed; right: 0; top: 0; width: 16px; height: 100%; background: white; border-left: 1px solid #eee; will-change: transform; }
#scroll_marker .marker { background: #ddd; position: absolute; min-height: 3px; width: 100%; }
#index tr.file:hover { background: #eee; }

@media (prefers-color-scheme: dark) { #index tr.file:hover { background: #333; } }

#index tr.file:hover td.name { text-decoration: underline; color: inherit; }

#scroll_marker { position: fixed; right: 0; top: 0; width: 16px; height: 100%; background: #fff; border-left: 1px solid #eee; will-change: transform; }

@media (prefers-color-scheme: dark) { #scroll_marker { background: #1e1e1e; } }

@media (prefers-color-scheme: dark) { #scroll_marker { border-color: #333; } }

#scroll_marker .marker { background: #ccc; position: absolute; min-height: 3px; width: 100%; }

@media (prefers-color-scheme: dark) { #scroll_marker .marker { background: #444; } }