Switched annotation markers to + signs in non-print contexts

This commit is contained in:
squidfunk 2021-12-09 21:31:12 +01:00
parent 16939c16ae
commit 1ddf8723b0
14 changed files with 67 additions and 42 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -34,7 +34,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.52c8dc4b.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.2d264350.min.css' | url }}">
{% if config.theme.palette %}
{% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.9204c3b2.min.css' | url }}">
@ -213,7 +213,7 @@
</script>
{% endblock %}
{% block scripts %}
<script src="{{ 'assets/javascripts/bundle.a5f8ea78.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.17f42bbf.min.js' | url }}"></script>
{% for path in config["extra_javascript"] %}
<script src="{{ path | url }}"></script>
{% endfor %}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -16,5 +16,5 @@
{% endblock %}
{% block scripts %}
{{ super() }}
<script src="{{ 'overrides/assets/javascripts/bundle.ab1cf86a.min.js' | url }}"></script>
<script src="{{ 'overrides/assets/javascripts/bundle.05395296.min.js' | url }}"></script>
{% endblock %}

View File

@ -22,6 +22,7 @@
import {
Observable,
debounceTime,
distinctUntilChanged,
fromEvent,
map,
@ -43,6 +44,9 @@ import { getActiveElement } from "../_"
* within the elements itself. A better solutions are `focusin` and `focusout`
* events, which bubble up the tree and allow for more fine-grained control.
*
* `debounceTime` is necessary, because when a focus change happens inside an
* element, the observable would first emit `false` and then `true` again.
*
* @param el - Element
*
* @returns Element focus observable
@ -55,6 +59,7 @@ export function watchElementFocus(
fromEvent(document.body, "focusout")
)
.pipe(
debounceTime(1),
map(() => {
const active = getActiveElement()
return typeof active !== "undefined"

View File

@ -39,7 +39,9 @@ export function renderAnnotation(id: number): HTMLElement {
<div class="md-annotation__inner md-tooltip">
<div class="md-tooltip__inner md-typeset"></div>
</div>
<span class="md-annotation__index">{id}</span>
<span class="md-annotation__index">
<span data-md-annotation-id={id}></span>
</span>
</aside>
)
}

View File

@ -214,6 +214,24 @@
}
}
// Annotation marker content
[data-md-annotation-id]::before {
display: inline-block;
transition: transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1);
content: attr(data-md-annotation-id);
// [not print]: if we're not in print mode, show a `+` sign instead of
// the original numbers, as context is already given by the position.
@media not print {
content: "+";
// Annotation marker content on focus
:focus-within > & {
transform: rotate(45deg);
}
}
}
// Annotation index on focus/hover
:is(:focus-within, :hover) > & {
color: var(--md-accent-bg-color);