perf: 优化内容容器在移动端的表现效果
This commit is contained in:
pengzhanbo
parent
8fafa54940
commit
75c59c588c
@ -1 +0,0 @@
|
||||
@import '@vuepress/plugin-palette/palette';
|
||||
@ -1,6 +1,3 @@
|
||||
// ===============================
|
||||
// Forked and modified from prismjs/themes/prism-tomorrow.css
|
||||
|
||||
.dark .vp-code span {
|
||||
color: var(--shiki-dark, rgba(235, 235, 245, 0.6));
|
||||
}
|
||||
@ -11,13 +8,12 @@ html:not(.dark) .vp-code span {
|
||||
|
||||
.plume-content {
|
||||
pre {
|
||||
// line-height: 1.4;
|
||||
padding: 1.3rem 1.5rem;
|
||||
margin: 0 0 0.85rem 0;
|
||||
border-radius: 6px;
|
||||
overflow: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--c-brand) var(--c-border);
|
||||
scrollbar-color: var(--vp-c-brand-1) var(--vp-c-border);
|
||||
font-size: 14px;
|
||||
|
||||
code {
|
||||
@ -43,10 +39,6 @@ html:not(.dark) .vp-code span {
|
||||
}
|
||||
}
|
||||
|
||||
.code-tabs-nav {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
div[class*='language-'] {
|
||||
position: relative;
|
||||
background-color: var(--vp-code-block-bg);
|
||||
@ -105,7 +97,6 @@ div[class*='language-'] {
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
// width: var(--code-ln-wrapper-width);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@ -125,7 +116,7 @@ div[class*='language-'] {
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
color: var(--vp-code-line-number-color);
|
||||
padding-top: 1.14rem;
|
||||
padding-top: 1.25rem;
|
||||
line-height: var(--vp-code-line-height);
|
||||
counter-reset: line-number;
|
||||
border-right: var(--vp-code-block-divider-color) 1px solid;
|
||||
@ -153,14 +144,15 @@ div[class*='language-'] {
|
||||
padding: 0 24px;
|
||||
width: calc(100% + 2 * 24px);
|
||||
display: inline-block;
|
||||
}
|
||||
z-index: 2;
|
||||
|
||||
.plume-content [class*='language-'] code .highlighted.error {
|
||||
background-color: var(--vp-code-line-error-color);
|
||||
}
|
||||
&.error {
|
||||
background-color: var(--vp-code-line-error-color);
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] code .highlighted.warning {
|
||||
background-color: var(--vp-code-line-warning-color);
|
||||
&.warning {
|
||||
background-color: var(--vp-code-line-warning-color);
|
||||
}
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] code .diff {
|
||||
@ -169,22 +161,36 @@ div[class*='language-'] {
|
||||
padding: 0 24px;
|
||||
width: calc(100% + 2 * 24px);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] code .diff::before {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
&.remove {
|
||||
background-color: var(--vp-code-line-diff-remove-color);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&.remove::before {
|
||||
content: '-';
|
||||
color: var(--vp-code-line-diff-remove-symbol-color);
|
||||
transform: translateX(-6px);
|
||||
}
|
||||
|
||||
&.add {
|
||||
background-color: var(--vp-code-line-diff-add-color);
|
||||
}
|
||||
|
||||
&.add::before {
|
||||
content: '+';
|
||||
color: var(--vp-code-line-diff-add-symbol-color);
|
||||
transform: translateX(-6px);
|
||||
}
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] .has-focused-lines .line:not(.has-focus) {
|
||||
filter: blur(0.095rem);
|
||||
opacity: 0.4;
|
||||
transition:
|
||||
filter 0.35s,
|
||||
opacity 0.35s;
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] .has-focused-lines .line:not(.has-focus) {
|
||||
opacity: 0.7;
|
||||
transition:
|
||||
filter 0.35s,
|
||||
@ -199,25 +205,8 @@ div[class*='language-'] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] code .diff.remove {
|
||||
background-color: var(--vp-code-line-diff-remove-color);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] code .diff.remove::before {
|
||||
content: '-';
|
||||
color: var(--vp-code-line-diff-remove-symbol-color);
|
||||
transform: translateX(-6px);
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] code .diff.add {
|
||||
background-color: var(--vp-code-line-diff-add-color);
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] code .diff.add::before {
|
||||
content: '+';
|
||||
color: var(--vp-code-line-diff-add-symbol-color);
|
||||
transform: translateX(-6px);
|
||||
.code-tabs-nav {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
// narrow mobile
|
||||
@ -237,7 +226,3 @@ div[class*='language-'] {
|
||||
margin: 0 -1.5rem -0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hint-container.info pre code {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@ -213,44 +213,44 @@
|
||||
* Custom Block
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
.plume-content .custom-block {
|
||||
margin: 16px 0;
|
||||
}
|
||||
// .plume-content .custom-block {
|
||||
// margin: 16px 0;
|
||||
// }
|
||||
|
||||
.plume-content .custom-block p {
|
||||
margin: 8px 0;
|
||||
line-height: 24px;
|
||||
}
|
||||
// .plume-content .custom-block p {
|
||||
// margin: 8px 0;
|
||||
// line-height: 24px;
|
||||
// }
|
||||
|
||||
.plume-content .custom-block p:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
// .plume-content .custom-block p:first-child {
|
||||
// margin: 0;
|
||||
// }
|
||||
|
||||
.plume-content .custom-block a {
|
||||
color: inherit;
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
// .plume-content .custom-block a {
|
||||
// color: inherit;
|
||||
// font-weight: 600;
|
||||
// text-decoration: underline;
|
||||
// transition: opacity 0.25s;
|
||||
// }
|
||||
|
||||
.plume-content .custom-block a:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
// .plume-content .custom-block a:hover {
|
||||
// opacity: 0.6;
|
||||
// }
|
||||
|
||||
.plume-content .custom-block code {
|
||||
font-size: var(--vp-custom-block-code-font-size);
|
||||
font-weight: 700;
|
||||
color: inherit;
|
||||
}
|
||||
// .plume-content .custom-block code {
|
||||
// font-size: var(--vp-custom-block-code-font-size);
|
||||
// font-weight: 700;
|
||||
// color: inherit;
|
||||
// }
|
||||
|
||||
.plume-content .custom-block div[class*='language-'] {
|
||||
margin: 8px 0;
|
||||
}
|
||||
// .plume-content .custom-block div[class*='language-'] {
|
||||
// margin: 8px 0;
|
||||
// }
|
||||
|
||||
.plume-content .custom-block div[class*='language-'] code {
|
||||
font-weight: 400;
|
||||
background-color: transparent;
|
||||
}
|
||||
// .plume-content .custom-block div[class*='language-'] code {
|
||||
// font-weight: 400;
|
||||
// background-color: transparent;
|
||||
// }
|
||||
|
||||
/**
|
||||
* Code
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
@use 'vars';
|
||||
@use 'fonts';
|
||||
@use 'normalize';
|
||||
@use 'nprogress';
|
||||
@use 'utils';
|
||||
@use 'content';
|
||||
@use 'code';
|
||||
@use 'md-enhance';
|
||||
@use 'search';
|
||||
@import '@vuepress/plugin-palette/palette';
|
||||
|
||||
@use '@vuepress/plugin-palette/style';
|
||||
@import 'vars';
|
||||
@import 'fonts';
|
||||
@import 'normalize';
|
||||
@import 'nprogress';
|
||||
@import 'utils';
|
||||
@import 'content';
|
||||
@import 'code';
|
||||
@import 'md-enhance';
|
||||
@import 'search';
|
||||
|
||||
@import '@vuepress/plugin-palette/style';
|
||||
|
||||
@ -11,6 +11,24 @@
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: var(--vp-custom-block-code-font-size);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
div[class*='language-'] {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
div[class*='language-'] code {
|
||||
font-weight: 400;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.note {
|
||||
border-radius: 0;
|
||||
color: var(--vp-c-text-3);
|
||||
@ -45,21 +63,12 @@
|
||||
summary + p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: var(--vp-custom-block-code-font-size);
|
||||
}
|
||||
|
||||
&.note,
|
||||
&.info,
|
||||
&.tip,
|
||||
&.detail,
|
||||
&.important {
|
||||
&.detail {
|
||||
a,
|
||||
code {
|
||||
color: var(--vp-c-brand-1);
|
||||
@ -68,6 +77,15 @@
|
||||
color: var(--vp-c-brand-2);
|
||||
}
|
||||
}
|
||||
&.important {
|
||||
a,
|
||||
code {
|
||||
color: var(--vp-c-purple-1);
|
||||
}
|
||||
a:hover {
|
||||
color: var(--vp-c-purple-2);
|
||||
}
|
||||
}
|
||||
&.warning {
|
||||
a,
|
||||
code {
|
||||
@ -87,16 +105,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
[class*="language-"] code {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
[class*="language-"] .line-numbers {
|
||||
[class*='language-'] .line-numbers {
|
||||
padding-top: 21px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
th,
|
||||
blockquote > p {
|
||||
font-size: var(--vp-custom-block-font-size);
|
||||
@ -205,7 +217,6 @@
|
||||
content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath fill="%23299764" d="M29.548 3.043a2.5 2.5 0 0 0-3.513.4L16 16.067l-3.508-4.414a2.5 2.5 0 0 0-3.915 3.112l5.465 6.875c.474.597 1.195.943 1.957.943s1.482-.35 1.957-.944L29.95 6.555c.86-1.08.68-2.654-.402-3.513zM24.5 24.5h-17v-17h12.756l2.385-3H6c-.83 0-1.5.67-1.5 1.5v20c0 .828.67 1.5 1.5 1.5h20a1.5 1.5 0 0 0 1.5-1.5V12.85l-3 3.774z"%2F%3E%3C%2Fsvg%3E');
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
3
theme/src/client/styles/normalize.scss
vendored
3
theme/src/client/styles/normalize.scss
vendored
@ -52,7 +52,8 @@ html,
|
||||
body {
|
||||
color: var(--vp-c-text-1);
|
||||
background-color: var(--vp-c-bg);
|
||||
transition: var(--t-color);
|
||||
transition-duration: 0.25s;
|
||||
transition-timing-function: ease;
|
||||
transition-property: color, background-color;
|
||||
}
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
#nprogress .bar {
|
||||
background: var(--vp-c-brand);
|
||||
background: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
#nprogress .spinner-icon {
|
||||
border-top-color: var(--vp-c-brand);
|
||||
border-left-color: var(--vp-c-brand);
|
||||
border-top-color: var(--vp-c-brand-1);
|
||||
border-left-color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
#nprogress .peg {
|
||||
box-shadow:
|
||||
0 0 10px var(--vp-c-brand),
|
||||
0 0 5px var(--vp-c-brand);
|
||||
0 0 10px var(--vp-c-brand-1),
|
||||
0 0 5px var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
@ -69,7 +69,10 @@
|
||||
--vp-c-red-3: #e0575b;
|
||||
--vp-c-red-soft: rgba(244, 63, 94, 0.14);
|
||||
|
||||
--vp-c-purple: #f4eefe;
|
||||
--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-sponsor: #db2777;
|
||||
}
|
||||
@ -95,7 +98,10 @@
|
||||
--vp-c-yellow-3: #a46a0a;
|
||||
--vp-c-yellow-soft: rgba(234, 179, 8, 0.16);
|
||||
|
||||
--vp-c-purple: #423655;
|
||||
--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;
|
||||
@ -372,15 +378,15 @@ html[lang='zh-CN'] {
|
||||
--vp-button-alt-active-text: var(--vp-c-text-1);
|
||||
--vp-button-alt-active-bg: var(--vp-c-default-1);
|
||||
|
||||
--vp-button-sponsor-border: var(--vp-c-text-2);
|
||||
--vp-button-sponsor-text: var(--vp-c-text-2);
|
||||
--vp-button-sponsor-bg: transparent;
|
||||
--vp-button-sponsor-hover-border: var(--vp-c-sponsor);
|
||||
--vp-button-sponsor-hover-text: var(--vp-c-sponsor);
|
||||
--vp-button-sponsor-hover-bg: transparent;
|
||||
--vp-button-sponsor-active-border: var(--vp-c-sponsor);
|
||||
--vp-button-sponsor-active-text: var(--vp-c-sponsor);
|
||||
--vp-button-sponsor-active-bg: transparent;
|
||||
// --vp-button-sponsor-border: var(--vp-c-text-2);
|
||||
// --vp-button-sponsor-text: var(--vp-c-text-2);
|
||||
// --vp-button-sponsor-bg: transparent;
|
||||
// --vp-button-sponsor-hover-border: var(--vp-c-sponsor);
|
||||
// --vp-button-sponsor-hover-text: var(--vp-c-sponsor);
|
||||
// --vp-button-sponsor-hover-bg: transparent;
|
||||
// --vp-button-sponsor-active-border: var(--vp-c-sponsor);
|
||||
// --vp-button-sponsor-active-text: var(--vp-c-sponsor);
|
||||
// --vp-button-sponsor-active-bg: transparent;
|
||||
}
|
||||
|
||||
.dark {
|
||||
@ -449,7 +455,7 @@ html[lang='zh-CN'] {
|
||||
--vp-nav-height: 0px;
|
||||
}
|
||||
|
||||
.hide-nav .VPSidebar {
|
||||
.hide-nav .sidebar {
|
||||
--vp-nav-height: 22px;
|
||||
}
|
||||
|
||||
@ -541,15 +547,15 @@ html[lang='zh-CN'] {
|
||||
* Component: Local Search
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-local-search-bg: var(--vp-c-bg);
|
||||
--vp-local-search-result-bg: var(--vp-c-bg);
|
||||
--vp-local-search-result-border: var(--vp-c-divider);
|
||||
--vp-local-search-result-selected-bg: var(--vp-c-bg);
|
||||
--vp-local-search-result-selected-border: var(--vp-c-brand-1);
|
||||
--vp-local-search-highlight-bg: var(--vp-c-brand-1);
|
||||
--vp-local-search-highlight-text: var(--vp-c-neutral-inverse);
|
||||
}
|
||||
// :root {
|
||||
// --vp-local-search-bg: var(--vp-c-bg);
|
||||
// --vp-local-search-result-bg: var(--vp-c-bg);
|
||||
// --vp-local-search-result-border: var(--vp-c-divider);
|
||||
// --vp-local-search-result-selected-bg: var(--vp-c-bg);
|
||||
// --vp-local-search-result-selected-border: var(--vp-c-brand-1);
|
||||
// --vp-local-search-highlight-bg: var(--vp-c-brand-1);
|
||||
// --vp-local-search-highlight-text: var(--vp-c-neutral-inverse);
|
||||
// }
|
||||
|
||||
/** Component: Search **/
|
||||
:root {
|
||||
@ -580,9 +586,9 @@ html[lang='zh-CN'] {
|
||||
html.dark {
|
||||
/* important */
|
||||
--important-title-color: var(--vp-c-text-1);
|
||||
--important-bg-color: var(--vp-c-purple);
|
||||
--important-border-color: var(--vp-c-purple);
|
||||
--important-code-bg-color: rgb(163 113 247 / 10%);
|
||||
--important-bg-color: var(--vp-c-purple-soft);
|
||||
--important-border-color: transparent;
|
||||
--important-code-bg-color: var(--vp-c-purple-soft);
|
||||
|
||||
// info
|
||||
--info-title-color: var(--vp-c-text-1);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user