diff --git a/theme/src/client/styles/content.css b/theme/src/client/styles/content.css index 10860859..00d655b4 100644 --- a/theme/src/client/styles/content.css +++ b/theme/src/client/styles/content.css @@ -13,9 +13,9 @@ .vp-doc h6 { position: relative; font-weight: 600; + color: var(--vp-c-text-1); overflow-wrap: break-word; outline: none; - transition: color var(--t-color); } .vp-doc h1 { @@ -62,7 +62,7 @@ .vp-doc .header-anchor { position: relative; - color: inherit; + color: currentcolor; text-decoration: none; } @@ -277,6 +277,41 @@ color: var(--vp-code-link-hover-color); } +.vp-doc mark { + padding: 2px; + color: currentcolor; + background-color: transparent; + background-image: + linear-gradient( + to bottom, + transparent 25%, + var(--vp-mark-color-soft) 30%, + var(--vp-mark-color-soft) 50%, + var(--vp-mark-color) 75%, + var(--vp-mark-color) 90%, + var(--vp-mark-color-soft) 100% + ); + background-repeat: no-repeat; + background-position: 0 1em; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + animation: mark-highlight 1.5s 0.5s forwards; +} + +.vp-doc :not(h1,h2,h3,h4,h5,h6) mark { + font-weight: bold; +} + +@keyframes mark-highlight { + 0% { + background-position: 0 1em; + } + + 100% { + background-position: 0 0; + } +} + /** * External links * -------------------------------------------------------------------------- */ diff --git a/theme/src/client/styles/vars.css b/theme/src/client/styles/vars.css index 0aae1f7b..149fdc34 100644 --- a/theme/src/client/styles/vars.css +++ b/theme/src/client/styles/vars.css @@ -632,3 +632,16 @@ html.dark { --photo-swipe-bullet: var(--vp-c-bg); --photo-swipe-bullet-active: var(--vp-c-brand-1); } + +/** + * mark + * -------------------------------------------------------------------------- */ +:root { + --vp-mark-color: var(--vp-c-brand-3); + --vp-mark-color-soft: var(--vp-c-brand-soft); +} + +.dark { + --vp-mark-color: var(--vp-c-brand-3); + --vp-mark-color-soft: var(--vp-c-brand-soft); +}