Add caption and style it
This commit is contained in:
parent
3c48c2bd2d
commit
620121b505
2 changed files with 12 additions and 3 deletions
|
|
@ -3,13 +3,19 @@
|
|||
|
||||
<style>
|
||||
:root {
|
||||
--color-empty: {{ $p.color_empty }};
|
||||
--color-empty: {{ $p.color_empty_dark }};
|
||||
--color-low: {{ $p.color_low }};
|
||||
--color-mid: {{ $p.color_mid }};
|
||||
--color-high: {{ $p.color_high }};
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--color-empty: {{ $p.color_empty_light }};
|
||||
}
|
||||
}
|
||||
#heatmap { overflow-x: auto; }
|
||||
#heatmap text { font-family: inherit; fill: currentColor; }
|
||||
#heatmap-caption {font-size: 0.8em; text-align: center; margin-top: 0px;}
|
||||
#tooltip {
|
||||
position: fixed;
|
||||
background: #333;
|
||||
|
|
@ -33,5 +39,8 @@
|
|||
document.getElementById("heatmap").appendChild(svg);
|
||||
setupTooltips(svg);
|
||||
</script>
|
||||
{{ with $p.caption }}
|
||||
<p id="heatmap-caption"> {{ . | safeHTML }} </p>
|
||||
{{ end }}
|
||||
<div id="tooltip" class="hidden"></div>
|
||||
<div id="legend"></div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue