diff --git a/ts/editor/editor.scss b/ts/editor/editor.scss index 3be5e2b0f..3e16a0392 100644 --- a/ts/editor/editor.scss +++ b/ts/editor/editor.scss @@ -133,15 +133,18 @@ button.highlighted { } } -.icon { - cursor: pointer; - color: var(--text-fg); +.icon > svg { + fill: var(--text-fg); +} - &.is-inactive::before { +.pin-icon { + cursor: pointer; + + &.is-inactive { opacity: 0.1; } - &.icon--hover::before { + &.icon--hover { opacity: 0.5; } } diff --git a/ts/editor/labelContainer.ts b/ts/editor/labelContainer.ts index e34a59a95..41b205048 100644 --- a/ts/editor/labelContainer.ts +++ b/ts/editor/labelContainer.ts @@ -1,5 +1,5 @@ import { bridgeCommand } from "./lib"; -// import pinIcon from "./pin-angle.svg"; +import pinIcon from "./pin-angle.svg"; function removeHoverIcon(evt: Event): void { const icon = evt.currentTarget as HTMLElement; @@ -24,7 +24,8 @@ export class LabelContainer extends HTMLDivElement { this.appendChild(this.label); this.sticky = document.createElement("span"); - this.sticky.className = "bi me-1 bi-pin-angle icon"; + this.sticky.className = "icon pin-icon me-1"; + this.sticky.innerHTML = pinIcon; this.sticky.hidden = true; this.appendChild(this.sticky);