gitea-yuany3721/vuepress-theme-plume
1
0
Fork 1
mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-23 10:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(theme): add type support for mark (#480)

Browse Source
This commit is contained in:
pengzhanbo 2025-02-23 02:00:43 +08:00 committed by GitHub
parent ddc82895ab
commit fded7e807a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 82 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
theme/src/client/styles/content.css
View File

@ -290,41 +290,6 @@
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
* -------------------------------------------------------------------------- */

1
theme/src/client/styles/index.css
View File

@ -7,6 +7,7 @@
@import url("./compat.css");
@import url("./utils.css");
@import url("./content.css");
@import url("./mark.css");
@import url("./code.css");
@import url("./hint-container.css");
@import url("./twoslash.css");

69
theme/src/client/styles/mark.css Normal file
View File

@ -0,0 +1,69 @@
/**
* Mark
* -------------------------------------------------------------------------- */
mark {
padding: 2px;
color: var(--vp-mark-text);
background-color: var(--vp-mark-bg, mark);
background-image: var(--vp-mark-bg-image);
}
mark:where([class]) {
--vp-mark-bg: mark;
--vp-mark-bg-image: none;
border-radius: 3px;
}
mark:where(:not([class])) {
--vp-mark-text: currentcolor;
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;
}
mark:where(.note, .tip, .info, .warning, .danger, .caution, .important) {
--vp-mark-text: marktext;
--vp-mark-bg-image: none;
}
mark:where(.note) {
--vp-mark-bg: mark;
}
mark:where(.info) {
--vp-mark-bg: var(--vp-c-default-1);
}
mark:where(.tip) {
--vp-mark-bg: #3c3;
}
mark:where(.warning) {
--vp-mark-bg: #fc0;
}
mark:where(.caution, .danger) {
--vp-mark-bg: #f99;
}
mark:where(.important) {
--vp-mark-bg: #ccf;
}
:not(h1,h2,h3,h4,h5,h6) mark:where(:not([class])) {
font-weight: bold;
}
@keyframes mark-highlight {
0% {
background-position: 0 1em;
}
100% {
background-position: 0 0;
}
}

19
theme/src/client/styles/vars.css
View File

@ -678,13 +678,18 @@
* mark
* -------------------------------------------------------------------------- */
:root {
--vp-mark-color: var(--vp-c-brand-3);
--vp-mark-color-soft: var(--vp-c-brand-soft);
}
[data-theme="dark"] {
--vp-mark-color: var(--vp-c-brand-3);
--vp-mark-color-soft: var(--vp-c-brand-soft);
--vp-mark-text: marktext;
--vp-mark-bg: "";
--vp-mark-bg-image:
linear-gradient(
to bottom,
transparent 25%,
var(--vp-c-brand-soft) 30%,
var(--vp-c-brand-soft) 50%,
var(--vp-c-brand-3) 75%,
var(--vp-c-brand-3) 90%,
var(--vp-c-brand-soft) 100%
);
}
/**