yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

feat: 代码块高亮 外观切换过渡效果

Browse Source
This commit is contained in:
pengzhanbo 2024-02-04 10:16:16 +08:00
parent 5e75106987
commit 13f7421022
2 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
theme/src/client/styles/code.scss
View File

@ -21,6 +21,7 @@ html:not(.dark) .vp-code span {
overflow-wrap: unset;
background-color: transparent;
border-radius: 0;
transition: background-color, var(--t-color), color var(--t-color);
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
@ -55,6 +56,7 @@ div[class*="language-"] {
position: relative;
margin: 0.85rem -1.5rem;
background-color: var(--vp-code-block-bg);
transition: background-color, var(--t-color);
&::before {
position: absolute;
@ -64,6 +66,7 @@ div[class*="language-"] {
font-size: 0.75rem;
color: var(--vp-code-line-number-color);
content: attr(data-ext);
transition: color var(--t-color);
}
code {
@ -112,6 +115,7 @@ div[class*="language-"] {
.highlight-line {
background-color: var(--vp-c-default-soft);
transition: background-color var(--t-color);
}
}
@ -155,6 +159,7 @@ div[class*="language-"] {
text-align: center;
counter-reset: line-number;
border-right: var(--vp-code-block-divider-color) 1px solid;
transition: border-right var(--t-color), color var(--t-color);
.line-number {
position: relative;

15
theme/src/client/styles/md-enhance.scss
View File

@ -160,6 +160,7 @@
.vp-code-demo {
overflow: hidden;
border: solid 1px var(--vp-c-divider);
transition: border var(--t-color);
@media (max-width: 419px) {
.vp-code-demo-codes div[class*="language-"] {
@ -174,6 +175,7 @@
.vp-code-demo-header {
padding: 8px 12px;
transition: background-color var(--t-color);
}
.vp-code-demo-code-wrapper {
@ -183,6 +185,7 @@
.vp-code-demo-toggle-button {
margin: 0 12px 0 8px;
background-color: var(--vp-c-gray-2);
transition: background-color var(--t-color);
&:hover {
background-color: var(--vp-c-gray-1);
@ -205,6 +208,7 @@
.vp-code-demo-codes div[class*="language-"] {
border-bottom: 2px dashed var(--vp-c-divider);
transition: border-bottom var(--t-color);
&:first-of-type {
border-top: 1px solid var(--vp-c-divider);
@ -276,6 +280,7 @@
margin: 1.5rem -0.75rem;
overflow: hidden;
border: 1px solid var(--vp-c-divider);
transition: border var(--t-color);
}
@media (min-width: 419px) {
@ -430,6 +435,8 @@
border: solid 1px var(--vp-c-divider);
border-radius: 8px;
box-shadow: var(--vp-shadow-2);
transition: var(--t-color);
transition-property: border, box-shadow;
&.has-title .demo-head {
border-bottom-color: transparent;
@ -459,6 +466,7 @@
justify-content: flex-start;
min-height: 0;
border-bottom: solid 1px var(--vp-c-divider);
transition: border-bottom var(--t-color);
}
.demo-ctrl {
@ -473,8 +481,9 @@
display: inline-block;
width: 10px;
height: 10px;
background: #ccc;
background-color: #ccc;
border-radius: 100%;
transition: background-color var(--t-color);
&:nth-child(1) {
background-color: var(--vp-c-danger-3);
@ -500,6 +509,8 @@
background-color: var(--vp-c-bg-alt);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
transition: var(--t-color);
transition-property: color, background-color;
}
.demo-title p {
@ -518,6 +529,7 @@
width: 8px;
height: 8px;
content: " ";
transition: background var(--t-color);
}
.demo-title::before {
@ -538,6 +550,7 @@
background-color: var(--vp-c-bg-alt);
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
transition: background-color var(--t-color);
> *:first-child {
margin-top: 0;