Make wavy underline markings smaller

dodona-edu · Sep 20, 2023 · f33bbed · f33bbed
1 parent 7ba9ddd
commit f33bbed
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/app/assets/javascripts/components/annotations/annotation_marker.ts b/app/assets/javascripts/components/annotations/annotation_marker.ts
@@ -34,13 +34,16 @@ export class AnnotationMarker extends LitElement {
 
     static getStyle(annotation: Annotation): string {
         if (["error", "warning", "info"].includes(annotation.type)) {
-            // shorthand notation does not work in safari
+            const strokeWidth = annotation.isHovered ? 1.7 : 0.7;
+            // -webkit is required for chrome
             return `
-                text-decoration-line: underline;
-                text-decoration-color: ${AnnotationMarker.colors[annotation.type]};
-                text-decoration-thickness: ${annotation.isHovered ? 2 : 1}px;
-                text-decoration-style: wavy;
-                text-decoration-skip-ink: none;
+                -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="3">%3Cpath%20d%3D%22m0%202.5%20l2%20-1.5%20l1%200%20l2%201.5%20l1%200%22%20stroke%3D%22%23d12%22%20fill%3D%22none%22%20stroke-width%3D%22${strokeWidth}%22%2F%3E</svg>');
+                mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="3">%3Cpath%20d%3D%22m0%202.5%20l2%20-1.5%20l1%200%20l2%201.5%20l1%200%22%20stroke%3D%22%23d12%22%20fill%3D%22none%22%20stroke-width%3D%22${strokeWidth}%22%2F%3E</svg>');
+                -webkit-mask-position: left bottom;
+                mask-position: left bottom;
+                -webkit-mask-repeat: repeat-x;
+                mask-repeat: repeat-x;
+                background-color: ${AnnotationMarker.colors[annotation.type]};
             `;
         } else {
             const key = annotation.isHovered ? `${annotation.type}-intense` : annotation.type;