//// /// Copyright (c) 2016-2023 Martin Donath /// /// Permission is hereby granted, free of charge, to any person obtaining a /// copy of this software and associated documentation files (the "Software"), /// to deal in the Software without restriction, including without limitation /// the rights to use, copy, modify, merge, publish, distribute, sublicense, /// and/or sell copies of the Software, and to permit persons to whom the /// Software is furnished to do so, subject to the following conditions: /// /// The above copyright notice and this permission notice shall be included in /// all copies or substantial portions of the Software. /// /// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR /// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, /// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL /// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER /// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING /// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER /// DEALINGS //// // ---------------------------------------------------------------------------- // Keyframes // ---------------------------------------------------------------------------- // Continuous pulse animation @keyframes pulse { 0% { transform: scale(0.95); } 75% { transform: scale(1); } 100% { transform: scale(0.95); } } // ---------------------------------------------------------------------------- // Rules // ---------------------------------------------------------------------------- // Tooltip variables :root { --md-annotation-bg-icon: svg-load("material/circle.svg"); --md-annotation-icon: svg-load("material/plus-circle.svg"); --md-tooltip-width: #{px2rem(400px)}; } // ---------------------------------------------------------------------------- // Tooltip .md-tooltip { position: absolute; top: var(--md-tooltip-y); left: clamp( var(--md-tooltip-0, #{px2rem(0px)}) + #{px2rem(16px)}, var(--md-tooltip-x), 100vw + var(--md-tooltip-0, #{px2rem(0px)}) + #{px2rem(16px)} - var(--md-tooltip-width) - 2 * #{px2rem(16px)} ); // Hack: set an explicit `z-index` so we can transition it to ensure that any // following elements are not overlaying the tooltip during the transition. z-index: 0; width: var(--md-tooltip-width); max-width: calc(100vw - 2 * #{px2rem(16px)}); font-family: var(--md-text-font-family); color: var(--md-default-fg-color); background-color: var(--md-default-bg-color); border-radius: px2rem(2px); box-shadow: var(--md-shadow-z2); opacity: 0; transition: transform 0ms 250ms, opacity 250ms, z-index 250ms; transform: translateY(px2rem(-8px)); // Hack: promote to own layer to reduce jitter backface-visibility: hidden; // Active tooltip &--active { z-index: 2; opacity: 1; transition: transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1), opacity 250ms, z-index 0ms; transform: translateY(0); } // Show outline on target and for keyboard devices :is(.focus-visible > &, &:target) { outline: var(--md-accent-fg-color) auto; } // Tooltip wrapper &__inner { padding: px2rem(16px); font-size: px2rem(12.8px); // Adjust spacing on first child &.md-typeset > :first-child { margin-top: 0; } // Adjust spacing on last child &.md-typeset > :last-child { margin-bottom: 0; } } } // ---------------------------------------------------------------------------- // Annotation .md-annotation { font-weight: 400; white-space: normal; vertical-align: text-bottom; outline: none; // Adjust for right-to-left languages [dir="rtl"] & { direction: rtl; } // Annotation index in code block code & { font-family: var(--md-code-font-family); font-size: inherit; } // Annotation is not hidden (e.g. when copying) &:not([hidden]) { display: inline-block; // Hack: ensure that the line height doesn't exceed the line height of the // hosting line, because it will lead to dancing pixels. line-height: 1.25; } // Annotation index &__index { position: relative; z-index: 0; display: inline-block; margin-inline: 0.4ch; vertical-align: text-top; cursor: pointer; user-select: none; outline: none; // Hack: increase specificity to override default for anchors in typesetted // content, because transitions are defined on anchor elements .md-annotation & { transition: z-index 250ms; } // Hack: Work around Firefox bug that renders a subpixel outline when // rotating a mask image element. // https://bugzilla.mozilla.org/show_bug.cgi?id=1671784 overflow: hidden; // stylelint-disable-line order/properties-order border-radius: 0.01px; // [screen]: Render annotation markers as icons @media screen { width: 2.2ch; // Annotation is visible [data-md-visible] > & { animation: pulse 2000ms infinite; } // Annotation marker background &::before { position: absolute; top: -0.1ch; z-index: -1; width: 2.2ch; height: 2.2ch; content: ""; background: var(--md-default-bg-color); mask-image: var(--md-annotation-bg-icon); mask-position: center; mask-repeat: no-repeat; mask-size: contain; } // Annotation marker – the marker must be positioned absolutely behind // the index, because it shouldn't impact the rendering of a code block. // Otherwise, small rounding differences in browsers can sometimes mess up // alignment of text following an annotation. &::after { position: absolute; top: -0.1ch; z-index: -1; width: 2.2ch; height: 2.2ch; content: ""; background-color: var(--md-default-fg-color--lighter); transition: background-color 250ms, transform 250ms; // Hack: promote to own layer to reduce jitter transform: scale(1.0001); mask-image: var(--md-annotation-icon); mask-position: center; mask-repeat: no-repeat; mask-size: contain; // Annotation marker for active tooltip .md-tooltip--active + & { transform: rotate(45deg); } // Annotation marker for active tooltip or on hover :is(.md-tooltip--active + &, :hover > &) { background-color: var(--md-accent-fg-color); } } } // Annotation index for active tooltip .md-tooltip--active + & { z-index: 2; transition-duration: 0ms; animation-play-state: paused; } // Annotation marker [data-md-annotation-id] { display: inline-block; // [print]: Render annotation markers as numbers @media print { padding: 0 0.6ch; font-weight: 700; color: var(--md-default-bg-color); white-space: nowrap; background: var(--md-default-fg-color--lighter); border-radius: 2ch; // Annotation marker content &::after { content: attr(data-md-annotation-id); } } } } } // ---------------------------------------------------------------------------- // Scoped in typesetted content to match specificity of regular content .md-typeset { // Annotation list .md-annotation-list { list-style: none; counter-reset: xxx; // Annotation list item li { position: relative; // Annotation list marker &::before { position: absolute; top: px2em(4px); inset-inline-start: px2em(-34px); min-width: 2ch; height: 2ch; padding: 0 0.6ch; font-size: px2em(14.2px); font-weight: 700; line-height: 1.25; color: var(--md-default-bg-color); text-align: center; content: counter(xxx); counter-increment: xxx; background: var(--md-default-fg-color--lighter); border-radius: 2ch; } } } }