Switched annotation markers to + signs in non-print contexts

material/base.html

@@ -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 %}

material/overrides/main.html

@@ -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 %}

src/assets/javascripts/browser/element/focus/index.ts

@@ -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"

src/assets/javascripts/templates/annotation/index.tsx

@@ -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>
   )
 }

src/assets/stylesheets/main/layout/_tooltip.scss

@@ -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);