/* ========================================================================== vryno-notes.css — the contextual keyword inside saved note text. ========================================================================== One component. It styles nothing that already exists, so it cannot regress a page: every rule below is scoped to .vp-kw, which only vryno-notes.js ever creates. THE CONSTRAINT THAT DROVE THE DESIGN "Keep the existing note typography and layout unchanged." A keyword sits in the middle of a sentence, so anything that changes its metrics reflows the note -- and a hover state that adds padding would make the words after it jump every time the pointer crossed them. So the keyword inherits font, size, weight and line-height from the note, and its horizontal padding is cancelled by an equal negative margin. The hover chip therefore has breathing room without occupying any: the sentence measures the same, wraps the same and sits on the same baseline whether the keyword is there or not. WHAT SIGNALS THAT IT IS CLICKABLE At rest the accent colour and a 1px dotted underline -- the same weight of hint the app already uses for its info markers, not a button. On hover the underline goes solid and a soft accent chip appears behind it. On focus a 2px accent ring, so keyboard users see what Enter will open. On touch the chip is always visible: a touch device has no hover state, and without it the keyword would be indistinguishable from prose. COLOUR --primary is not remapped for dark mode in this app, and #5235ef on the dark violet-black page is 1.6:1 -- unreadable. So the accent is declared once as --vp-kw-ink and lightened under [data-bs-theme="dark"], which is the mechanism this app already uses. Measured: 6.7:1 light, 8.0:1 dark at rest, 5.6:1 and 6.4:1 on the hover chip. All above AA for body text. ICONS Each keyword carries its type's Tabler icon in the markup, hidden by default -- an icon in the text flow is exactly the layout change the brief ruled out. To turn them on, add .vp-kw-icons to or to any container; the rule is at the bottom of this file. ========================================================================== */ :root { --vp-kw-ink: var(--primary, #5235ef); --vp-kw-chip: var(--primary-transparent, #ece7fb); --vp-kw-line: 1px; } [data-bs-theme="dark"] { /* Lighter violet, same hue family as --primary, so the accent still reads as the app's accent rather than a second brand colour. */ --vp-kw-ink: #a99bff; --vp-kw-chip: rgba(103, 76, 226, 0.26); } /* --------------------------------------------------------------- the keyword */ .vp-kw { /* Everything typographic is inherited on purpose. */ font: inherit; letter-spacing: inherit; line-height: inherit; display: inline; color: var(--vp-kw-ink); cursor: pointer; /* padding in, margin out: net zero on the sentence's metrics */ padding: 0 0.2em; margin: 0 -0.2em; border-radius: 5px; background-color: transparent; text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: var(--vp-kw-line); text-underline-offset: 2px; /* "e-mail" must not break at the hyphen and leave half a control on the line above -- the same reason .vp-info-glue exists. */ white-space: nowrap; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color 0.12s ease, color 0.12s ease; } .vp-kw:hover, .vp-kw:focus-visible { background-color: var(--vp-kw-chip); text-decoration-style: solid; } .vp-kw:focus-visible { outline: 2px solid var(--vp-kw-ink); outline-offset: 1px; } /* Pressed state, so a tap is acknowledged before the dialog paints. */ .vp-kw:active { background-color: var(--vp-kw-chip); filter: brightness(0.94); } /* A keyword must never inherit an underline decoration from an ancestor and end up double-underlined, nor pick up a link colour. */ .vp-kw .vp-kw-text { font: inherit; color: inherit; text-decoration: inherit; } /* ------------------------------------------------------------------- touch */ /* No hover state exists here, so the resting state has to carry the hint. */ @media (hover: none) { .vp-kw { background-color: var(--vp-kw-chip); text-decoration-style: solid; } } /* ------------------------------------------------------------------- icons */ /* Hidden by default: see the header. Opt in with .vp-kw-icons on or on any ancestor of the notes you want icons in. */ .vp-kw-ico { display: none; } .vp-kw-icons .vp-kw-ico { display: inline; font-size: 0.85em; opacity: 0.6; margin-right: 0.15em; } .vp-kw-icons .vp-kw:hover .vp-kw-ico, .vp-kw-icons .vp-kw:focus-visible .vp-kw-ico { opacity: 1; } /* ========================================================================== THE REMOVE BUTTON — .vp-rm ========================================================================== Always visible, not hover-revealed. Two reasons. The question this control answers is "how do I get rid of this?", and a control you have to discover by hovering does not answer it. And an opacity:0 button is a trap: it still takes clicks, so a hidden Remove sits under the pointer waiting to be hit by accident. Visible and quiet beats invisible and clickable. Quiet means it takes the muted grey the timestamps already use, and only becomes red on hover, focus and press. Nothing is destroyed by the button itself -- it opens the confirmation dialog -- so it does not need to shout. It sits in the header row beside the timestamp, inside .vp-rm-group, so the row keeps its two-column shape. Where an entry has no header row, .vp-rm-host pins it to the top-right corner instead. ========================================================================== */ .vp-rm-group { display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; } .vp-rm { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 20px; margin-top: -5px; margin-left: 3px; margin-bottom: -2px; padding: 0; flex-shrink: 0; border: 0; border-radius: 5px; background: transparent; color: var(--gray-400, #9b95c9); cursor: pointer; line-height: 1; font-size: 14px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color 0.12s ease, color 0.12s ease; } [data-bs-theme="dark"] .vp-rm { color: var(--dtf-muted, #7f869e); } .vp-rm:hover, .vp-rm:focus-visible { background-color: var(--danger-transparent, #fdecec); color: var(--danger, #e5252a); } [data-bs-theme="dark"] .vp-rm:hover, [data-bs-theme="dark"] .vp-rm:focus-visible { background-color: rgba(229, 37, 42, 0.18); color: #ff8a8e; } .vp-rm:focus-visible { outline: 2px solid var(--danger, #e5252a); outline-offset: 1px; } .vp-rm:active { transform: scale(0.94); } /* Fallback placement: an entry with no header row to sit in. */ .vp-rm-host { position: relative; } .vp-rm-host > .vp-rm { position: absolute; top: 6px; right: 6px; z-index: 2; } /* Touch: grow the hit area to 44px without changing the 28px box the row measures, so the button stays easy to hit and the layout stays put. */ @media (hover: none) { .vp-rm::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .vp-rm { position: relative; } .vp-rm-host > .vp-rm { position: absolute; } } @media print { .vp-rm { display: none !important; } } /* --------------------------------------------------------------- deference */ @media (prefers-reduced-motion: reduce) { .vp-kw, .vp-rm { transition: none; } .vp-rm:active { transform: none; } } /* On paper the keyword is not a control, so it should read as the plain word the user typed. */ @media print { .vp-kw { color: inherit; background: none; text-decoration: none; padding: 0; margin: 0; } .vp-kw-ico { display: none !important; } }