perf: update content style
This commit is contained in:
pengzhanbo
parent
81870e0c23
commit
afb88ee4be
@ -10,16 +10,14 @@ html:not(.dark) .vp-code span {
|
||||
pre {
|
||||
padding: 1.3rem 1.5rem;
|
||||
margin: 0 0 0.85rem;
|
||||
overflow: auto;
|
||||
font-size: 14px;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
|
||||
scrollbar-color: var(--vp-c-brand-1) var(--vp-c-border);
|
||||
scrollbar-width: thin;
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
font-size: var(--vp-code-font-size);
|
||||
color: var(--vp-code-block-color);
|
||||
overflow-wrap: unset;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
@ -27,6 +25,12 @@ html:not(.dark) .vp-code span {
|
||||
-webkit-font-smoothing: auto;
|
||||
-moz-osx-font-smoothing: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
& {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line-number {
|
||||
@ -41,14 +45,20 @@ html:not(.dark) .vp-code span {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.plume-content li pre {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="language-"] {
|
||||
position: relative;
|
||||
margin: 0.85rem -1.5rem;
|
||||
background-color: var(--vp-code-block-bg);
|
||||
border-radius: 6px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0.8em;
|
||||
top: 5px;
|
||||
right: 1em;
|
||||
z-index: 3;
|
||||
font-size: 0.75rem;
|
||||
@ -58,6 +68,7 @@ div[class*="language-"] {
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
@ -69,6 +80,27 @@ div[class*="language-"] {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
|
||||
/* rtl:ignore */
|
||||
text-align: left;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
|
||||
/* rtl:ignore */
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.highlight-lines {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -117,8 +149,8 @@ div[class*="language-"] {
|
||||
z-index: 1;
|
||||
width: 2rem;
|
||||
height: 100%;
|
||||
padding-top: 1.25rem;
|
||||
line-height: var(--vp-code-line-height);
|
||||
padding-top: 1.3rem;
|
||||
line-height: 1.4rem;
|
||||
color: var(--vp-code-line-number-color);
|
||||
text-align: center;
|
||||
counter-reset: line-number;
|
||||
@ -138,6 +170,19 @@ div[class*="language-"] {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
& {
|
||||
margin: 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.plume-content li & {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plume-content [class*="language-"] code .highlighted {
|
||||
@ -206,11 +251,11 @@ div[class*="language-"] {
|
||||
}
|
||||
|
||||
// narrow mobile
|
||||
@media (max-width: 419px) {
|
||||
.plume-content {
|
||||
div[class*="language-"] {
|
||||
margin: 0.85rem -1.5rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// @media (max-width: 419px) {
|
||||
// .plume-content {
|
||||
// div[class*="language-"] {
|
||||
// margin: 0.85rem -1.5rem;
|
||||
// border-radius: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
.plume-content h6 {
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
overflow-wrap: break-word;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -40,30 +41,29 @@
|
||||
}
|
||||
|
||||
.plume-content .header-anchor {
|
||||
float: left;
|
||||
padding-right: 0.23em;
|
||||
margin-left: -0.87em;
|
||||
font-weight: 500;
|
||||
user-select: none;
|
||||
opacity: 0;
|
||||
transition:
|
||||
color 0.25s,
|
||||
opacity 0.25s;
|
||||
position: relative;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover::before {
|
||||
position: absolute;
|
||||
left: -0.75em;
|
||||
font-size: 0.8em;
|
||||
color: var(--vp-c-brand-1);
|
||||
content: var(--vp-header-anchor-symbol);
|
||||
}
|
||||
|
||||
.plume-content h1:hover .header-anchor,
|
||||
.plume-content h1 .header-anchor:focus,
|
||||
.plume-content h2:hover .header-anchor,
|
||||
.plume-content h2 .header-anchor:focus,
|
||||
.plume-content h3:hover .header-anchor,
|
||||
.plume-content h3 .header-anchor:focus,
|
||||
.plume-content h4:hover .header-anchor,
|
||||
.plume-content h4 .header-anchor:focus,
|
||||
.plume-content h5:hover .header-anchor,
|
||||
.plume-content h5 .header-anchor:focus,
|
||||
.plume-content h6:hover .header-anchor,
|
||||
.plume-content h6 .header-anchor:focus {
|
||||
opacity: 1;
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: -0.75em;
|
||||
color: var(--vp-c-brand-1);
|
||||
content: var(--vp-header-anchor-symbol);
|
||||
outline: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@ -122,9 +122,18 @@
|
||||
color 0.25s,
|
||||
opacity 0.25s,
|
||||
text-underline-offset 0.25s;
|
||||
|
||||
@media print {
|
||||
&[href^="http://"],
|
||||
&[href^="https://"] {
|
||||
&::after {
|
||||
content: " (" attr(href) ") ";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plume-content a:hover {
|
||||
.plume-content :not(h1,h2,h3,h4,h5,h6) a:hover {
|
||||
color: var(--vp-c-brand-2);
|
||||
text-underline-offset: 5px;
|
||||
}
|
||||
|
||||
@ -39,6 +39,10 @@
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
div[class*="language-"].line-numbers-mode .line-numbers {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 419px) {
|
||||
div[class*="language-"] {
|
||||
margin: 0.85rem -0.75rem 0.85rem -1rem;
|
||||
|
||||
@ -68,10 +68,10 @@
|
||||
--vp-c-red-3: #e0575b;
|
||||
--vp-c-red-soft: rgba(244, 63, 94, 0.14);
|
||||
|
||||
--vp-c-purple-1: #734bb0;
|
||||
--vp-c-purple-2: #9a72da;
|
||||
--vp-c-purple-3: #d2c5e7;
|
||||
--vp-c-purple-soft: rgba(109, 85, 148, 0.14);
|
||||
--vp-c-purple-1: #6f42c1;
|
||||
--vp-c-purple-2: #7e4cc9;
|
||||
--vp-c-purple-3: #8e5cd9;
|
||||
--vp-c-purple-soft: rgba(159, 122, 234, 0.14);
|
||||
|
||||
--vp-c-sponsor: #db2777;
|
||||
}
|
||||
@ -97,15 +97,15 @@
|
||||
--vp-c-yellow-3: #a46a0a;
|
||||
--vp-c-yellow-soft: rgba(234, 179, 8, 0.16);
|
||||
|
||||
--vp-c-purple-1: #9c74da;
|
||||
--vp-c-purple-2: #a987df;
|
||||
--vp-c-purple-3: #c3b4da;
|
||||
--vp-c-purple-soft: rgba(109, 85, 148, 0.16);
|
||||
|
||||
--vp-c-red-1: #f66f81;
|
||||
--vp-c-red-2: #f14158;
|
||||
--vp-c-red-3: #b62a3c;
|
||||
--vp-c-red-soft: rgba(244, 63, 94, 0.16);
|
||||
|
||||
--vp-c-purple-1: #c8abfa;
|
||||
--vp-c-purple-2: #a879e6;
|
||||
--vp-c-purple-3: #8e5cd9;
|
||||
--vp-c-purple-soft: rgba(159, 122, 234, 0.16);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -273,6 +273,7 @@
|
||||
"Liberation Mono",
|
||||
"Courier New",
|
||||
monospace;
|
||||
--vp-header-anchor-symbol: "#";
|
||||
}
|
||||
|
||||
/**
|
||||
@ -459,7 +460,7 @@ html[lang="zh-CN"] {
|
||||
--vp-input-border-color: var(--vp-c-border);
|
||||
--vp-input-bg-color: var(--vp-c-bg-alt);
|
||||
|
||||
--vp-input-switch-bg-color: var(--vp-c-gray-soft);
|
||||
--vp-input-switch-bg-color: var(--vp-c-default-soft);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -595,7 +596,7 @@ html[lang="zh-CN"] {
|
||||
/* md enhance code-tabs */
|
||||
:root {
|
||||
--code-tabs-nav-text-color: var(--vp-c-text-1);
|
||||
--code-tabs-nav-bg-color: #e6e6e7;
|
||||
--code-tabs-nav-bg-color: var(--vp-c-default-3);
|
||||
--code-tabs-nav-hover-color: var(--vp-code-block-bg);
|
||||
}
|
||||
|
||||
@ -658,7 +659,7 @@ html.dark {
|
||||
:root {
|
||||
--tab-bg-color: var(--vp-c-bg);
|
||||
--tab-nav-bg-color: var(--vp-c-bg-soft);
|
||||
--tab-nav-hover-color: var(--vp-c-bg);
|
||||
--tab-nav-hover-color: var(--tab-bg-color);
|
||||
--tab-nav-text-color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user