mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
perf: 优化交互体验，调整 UI
This commit is contained in:
pengzhanbo
parent
5ccb6f02c4
commit
b9ffac184a
@ -48,11 +48,11 @@ const page = usePageData()
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: var(--vp-c-brand);
|
||||
background-color: var(--vp-c-bg-elv-mute);
|
||||
color: var(--vp-c-brand-1);
|
||||
background-color: var(--vp-c-default-soft);
|
||||
}
|
||||
|
||||
.link.active {
|
||||
color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -69,7 +69,7 @@ export default {
|
||||
}
|
||||
|
||||
.flyout-wrapper:hover {
|
||||
color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@ -82,11 +82,11 @@ export default {
|
||||
}
|
||||
|
||||
.flyout-wrapper.active .text {
|
||||
color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.flyout-wrapper.active:hover .text {
|
||||
color: var(--vp-c-brand-dark);
|
||||
color: var(--vp-c-brand-2);
|
||||
}
|
||||
|
||||
.flyout-wrapper:hover .menu,
|
||||
|
||||
@ -72,6 +72,7 @@ const classes = computed(() => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--vp-c-gutter);
|
||||
border-bottom: 1px solid var(--vp-c-gutter);
|
||||
padding-top: var(--vp-layout-top-height, 0px);
|
||||
width: 100%;
|
||||
|
||||
@ -120,7 +120,7 @@ function scrollToTop() {
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
display: grid;
|
||||
/* gap: 1px; */
|
||||
gap: 1px;
|
||||
border: 1px solid var(--vp-c-border);
|
||||
border-radius: 8px;
|
||||
background-color: var(--vp-c-gutter);
|
||||
|
||||
@ -42,10 +42,10 @@ const page = usePageData()
|
||||
}
|
||||
|
||||
.navbar-menu-link.active {
|
||||
color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.navbar-menu-link:hover {
|
||||
color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
}
|
||||
|
||||
.DocSearch {
|
||||
--docsearch-primary-color: var(--vp-c-brand);
|
||||
--docsearch-primary-color: var(--vp-c-brand-1);
|
||||
--docsearch-highlight-color: var(--docsearch-primary-color);
|
||||
--docsearch-text-color: var(--vp-c-text-1);
|
||||
--docsearch-muted-color: var(--vp-c-text-2);
|
||||
@ -41,7 +41,7 @@
|
||||
--docsearch-modal-shadow: none;
|
||||
--docsearch-footer-shadow: none;
|
||||
--docsearch-logo-color: var(--vp-c-text-2);
|
||||
--docsearch-hit-background: var(--vp-c-bg-soft-mute);
|
||||
--docsearch-hit-background: var(--vp-c-default-soft);
|
||||
--docsearch-hit-color: var(--vp-c-text-2);
|
||||
--docsearch-hit-shadow: none;
|
||||
}
|
||||
@ -83,7 +83,7 @@
|
||||
}
|
||||
|
||||
.DocSearch-Button:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
border-color: var(--vp-c-brand-1);
|
||||
background: var(--vp-c-bg-alt);
|
||||
}
|
||||
}
|
||||
@ -200,11 +200,11 @@
|
||||
}
|
||||
|
||||
.DocSearch-Form {
|
||||
border: 1px solid var(--vp-c-brand);
|
||||
border: 1px solid var(--vp-c-brand-1);
|
||||
background-color: var(--vp-c-white);
|
||||
}
|
||||
|
||||
.dark .DocSearch-Form {
|
||||
background-color: var(--vp-c-bg-soft-mute);
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -81,7 +81,7 @@ function toggle() {
|
||||
|
||||
.nav-screen-menu-group.open .button {
|
||||
padding-bottom: 6px;
|
||||
color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.nav-screen-menu-group.open .button-icon {
|
||||
@ -103,7 +103,7 @@ function toggle() {
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.button-text i {
|
||||
|
||||
@ -34,6 +34,6 @@ const closeScreen = inject('close-screen') as () => void
|
||||
}
|
||||
|
||||
.nav-screen-menu-group-link:hover {
|
||||
color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -31,6 +31,6 @@ const closeScreen = inject('close-screen') as () => void
|
||||
}
|
||||
|
||||
.nav-screen-menu-link:hover {
|
||||
color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -81,7 +81,7 @@ function handleClick({ target: el }: Event) {
|
||||
opacity: 0;
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
background-color: var(--vp-c-brand);
|
||||
background-color: var(--vp-c-brand-1);
|
||||
transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s,
|
||||
opacity 0.25s;
|
||||
}
|
||||
|
||||
@ -65,7 +65,7 @@ const hasMeta = computed(() => tags.value.length || createTime.value)
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 2rem;
|
||||
border-left: solid 4px var(--vp-c-brand);
|
||||
border-left: solid 4px var(--vp-c-brand-1);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
@ -75,7 +75,7 @@ const hasMeta = computed(() => tags.value.length || createTime.value)
|
||||
}
|
||||
|
||||
.page-category-wrapper .category:hover {
|
||||
color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.page-category-wrapper .dot {
|
||||
|
||||
@ -78,7 +78,7 @@ const createTime = computed(() => {
|
||||
}
|
||||
|
||||
h3:hover {
|
||||
color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand-1);
|
||||
|
||||
.sticky {
|
||||
color: var(--vp-c-text-2);
|
||||
@ -100,7 +100,7 @@ const createTime = computed(() => {
|
||||
line-height: 1;
|
||||
font-size: 13px;
|
||||
color: var(--vp-c-text-2);
|
||||
background-color: var(--vp-c-bg-soft-mute);
|
||||
background-color: var(--vp-c-default-soft);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -137,7 +137,7 @@ function onCaretClick() {
|
||||
.sidebar-item.level-3.is-active > .item > .indicator,
|
||||
.sidebar-item.level-4.is-active > .item > .indicator,
|
||||
.sidebar-item.level-5.is-active > .item > .indicator {
|
||||
background-color: var(--vp-c-brand);
|
||||
background-color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.link {
|
||||
@ -173,7 +173,7 @@ function onCaretClick() {
|
||||
.sidebar-item.level-3.is-link > .item > .link:hover .text,
|
||||
.sidebar-item.level-4.is-link > .item > .link:hover .text,
|
||||
.sidebar-item.level-5.is-link > .item > .link:hover .text {
|
||||
color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.sidebar-item.level-0.has-active > .item > .link > .text,
|
||||
@ -191,7 +191,7 @@ function onCaretClick() {
|
||||
.sidebar-item.level-3.is-active > .item .link > .text,
|
||||
.sidebar-item.level-4.is-active > .item .link > .text,
|
||||
.sidebar-item.level-5.is-active > .item .link > .text {
|
||||
color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.caret {
|
||||
|
||||
@ -50,7 +50,7 @@ function focusOnTargetAnchor({ target }: Event) {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
color: var(--vp-c-brand);
|
||||
color: var(--vp-c-brand-1);
|
||||
box-shadow: var(--vp-shadow-3);
|
||||
background-color: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
}
|
||||
|
||||
.switch-wrapper:hover {
|
||||
border-color: var(--vp-input-hover-border-color);
|
||||
border-color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.check {
|
||||
|
||||
@ -28,18 +28,24 @@ withDefaults(defineProps<Props>(), {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
h1 .badge-view,
|
||||
h2 .badge-view,
|
||||
h3 .badge-view,
|
||||
h1 .badge-view {
|
||||
margin-top: 4px;
|
||||
vertical-align: top;
|
||||
}
|
||||
h2 .badge-view {
|
||||
margin-top: 3px;
|
||||
padding: 0 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
h3 .badge-view {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
h4 .badge-view,
|
||||
h5 .badge-view,
|
||||
h6 .badge-view {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
h2 .badge-view {
|
||||
border-radius: 11px;
|
||||
line-height: 20px;
|
||||
vertical-align: middle;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.badge-view.info {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
}
|
||||
|
||||
html:not(.dark) .vp-code span {
|
||||
color: var(--shiki-light, rgba(60, 60, 67, 0.92));
|
||||
color: var(--shiki-light, rgba(60, 60, 67, 0.78));
|
||||
}
|
||||
|
||||
code[class*='language-'],
|
||||
@ -65,20 +65,6 @@ pre[class*='language-'] {
|
||||
scrollbar-color: var(--c-brand) var(--c-border);
|
||||
font-size: 14px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--vp-code-block-bg);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(220, 220, 220, 0.35);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #fff;
|
||||
padding: 0;
|
||||
@ -139,7 +125,7 @@ div[class*='language-'] {
|
||||
line-height: 1.5;
|
||||
|
||||
.highlight-line {
|
||||
background-color: rgba(142, 150, 170, 0.14);
|
||||
background-color: var(--vp-c-default-soft);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -26,7 +26,6 @@
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 32px;
|
||||
font-size: 24px;
|
||||
transition: all var(--t-color);
|
||||
}
|
||||
|
||||
.plume-content h2:first-of-type {
|
||||
@ -116,13 +115,16 @@
|
||||
|
||||
.plume-content a {
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-brand);
|
||||
text-decoration-style: dotted;
|
||||
transition: color 0.25s;
|
||||
color: var(--vp-c-brand-1);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
transition:
|
||||
color 0.25s,
|
||||
opacity 0.25s;
|
||||
}
|
||||
|
||||
.plume-content a:hover {
|
||||
color: var(--vp-c-brand-dark);
|
||||
color: var(--vp-c-brand-2);
|
||||
}
|
||||
|
||||
.plume-content strong {
|
||||
@ -168,6 +170,7 @@
|
||||
}
|
||||
|
||||
.plume-content tr {
|
||||
background-color: var(--vp-c-bg);
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
@ -254,15 +257,15 @@
|
||||
/* inline code */
|
||||
.plume-content :not(pre, h1, h2, h3, h4, h5, h6) > code {
|
||||
font-size: var(--vp-code-font-size);
|
||||
color: var(--vp-code-color);
|
||||
}
|
||||
|
||||
.plume-content :not(pre) > code {
|
||||
border-radius: 4px;
|
||||
padding: 3px 6px;
|
||||
color: var(--vp-c-text-code);
|
||||
background-color: var(--vp-c-mute);
|
||||
background-color: var(--vp-code-bg);
|
||||
transition:
|
||||
color 0.5s,
|
||||
color 0.25s,
|
||||
background-color 0.5s;
|
||||
}
|
||||
|
||||
@ -273,254 +276,13 @@
|
||||
}
|
||||
|
||||
.plume-content a > code {
|
||||
color: var(--vp-c-brand);
|
||||
transition: color 0.25s;
|
||||
color: var(--vp-code-link-color);
|
||||
}
|
||||
|
||||
.plume-content a:hover > code {
|
||||
color: var(--vp-c-brand-dark);
|
||||
color: var(--vp-code-link-hover-color);
|
||||
}
|
||||
|
||||
.plume-content .vp-code-tabs-nav {
|
||||
margin: 0.85rem 0 0;
|
||||
}
|
||||
|
||||
// .plume-content div[class*='language-'] {
|
||||
// position: relative;
|
||||
// margin: 16px -24px;
|
||||
// background-color: var(--vp-code-block-bg);
|
||||
// overflow-x: auto;
|
||||
// transition: background-color 0.5s;
|
||||
// }
|
||||
|
||||
// @media (min-width: 640px) {
|
||||
// .plume-content div[class*='language-'] {
|
||||
// border-radius: 8px;
|
||||
// margin: 16px 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @media (max-width: 639px) {
|
||||
// .plume-content li div[class*='language-'] {
|
||||
// border-radius: 8px 0 0 8px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .plume-content div[class*='language-'] + div[class*='language-'],
|
||||
// .plume-content div[class$='-api'] + div[class*='language-'],
|
||||
// .plume-content
|
||||
// div[class*='language-']
|
||||
// + div[class$='-api']
|
||||
// > div[class*='language-'] {
|
||||
// margin-top: -8px;
|
||||
// }
|
||||
|
||||
// .plume-content [class*='language-'] pre,
|
||||
// .plume-content [class*='language-'] code {
|
||||
// /*rtl:ignore*/
|
||||
// direction: ltr;
|
||||
// /*rtl:ignore*/
|
||||
// text-align: left;
|
||||
// white-space: pre;
|
||||
// word-spacing: normal;
|
||||
// word-break: normal;
|
||||
// word-wrap: normal;
|
||||
// -moz-tab-size: 4;
|
||||
// -o-tab-size: 4;
|
||||
// tab-size: 4;
|
||||
// -webkit-hyphens: none;
|
||||
// -moz-hyphens: none;
|
||||
// -ms-hyphens: none;
|
||||
// hyphens: none;
|
||||
// }
|
||||
|
||||
// .plume-content [class*='language-'] pre {
|
||||
// position: relative;
|
||||
// z-index: 1;
|
||||
// margin: 0;
|
||||
// padding: 16px 0;
|
||||
// background: transparent;
|
||||
// overflow-x: auto;
|
||||
// }
|
||||
|
||||
// .plume-content [class*='language-'] code {
|
||||
// display: block;
|
||||
// padding: 0 24px;
|
||||
// width: fit-content;
|
||||
// min-width: 100%;
|
||||
// line-height: var(--vp-code-line-height);
|
||||
// font-size: var(--vp-code-font-size);
|
||||
// color: var(--vp-code-block-color);
|
||||
// transition: color 0.5s;
|
||||
// }
|
||||
|
||||
// .plume-content [class*='language-'] code .highlighted {
|
||||
// background-color: var(--vp-code-line-highlight-color);
|
||||
// transition: background-color 0.5s;
|
||||
// margin: 0 -24px;
|
||||
// padding: 0 24px;
|
||||
// width: calc(100% + 2 * 24px);
|
||||
// display: inline-block;
|
||||
// }
|
||||
|
||||
// .plume-content [class*='language-'] code .highlighted.error {
|
||||
// background-color: var(--vp-code-line-error-color);
|
||||
// }
|
||||
|
||||
// .plume-content [class*='language-'] code .highlighted.warning {
|
||||
// background-color: var(--vp-code-line-warning-color);
|
||||
// }
|
||||
|
||||
// .plume-content [class*='language-'] code .diff {
|
||||
// transition: background-color 0.5s;
|
||||
// margin: 0 -24px;
|
||||
// padding: 0 24px;
|
||||
// width: calc(100% + 2 * 24px);
|
||||
// display: inline-block;
|
||||
// }
|
||||
|
||||
// .plume-content [class*='language-'] code .diff::before {
|
||||
// position: absolute;
|
||||
// left: 10px;
|
||||
// }
|
||||
|
||||
// .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, opacity 0.35s;
|
||||
// }
|
||||
|
||||
// .plume-content
|
||||
// [class*='language-']:hover
|
||||
// .has-focused-lines
|
||||
// .line:not(.has-focus) {
|
||||
// filter: blur(0);
|
||||
// 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);
|
||||
// }
|
||||
|
||||
// .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);
|
||||
// }
|
||||
|
||||
// .plume-content div[class*='language-'].line-numbers-mode {
|
||||
// /*rtl:ignore*/
|
||||
// padding-left: 32px;
|
||||
// }
|
||||
|
||||
// .plume-content .line-numbers {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// /*rtl:ignore*/
|
||||
// left: 0;
|
||||
// z-index: 3;
|
||||
// /*rtl:ignore*/
|
||||
// border-right: 1px solid var(--vp-code-block-divider-color);
|
||||
// padding-top: 16px;
|
||||
// width: 32px;
|
||||
// text-align: center;
|
||||
// font-family: var(--vp-font-family-mono);
|
||||
// line-height: var(--vp-code-line-height);
|
||||
// font-size: var(--vp-code-font-size);
|
||||
// color: var(--vp-code-line-number-color);
|
||||
// transition: border-color 0.5s, color 0.5s;
|
||||
// }
|
||||
|
||||
// .plume-content [class*='language-'] > button.copy {
|
||||
// /*rtl:ignore*/
|
||||
// direction: ltr;
|
||||
// position: absolute;
|
||||
// top: 8px;
|
||||
// /*rtl:ignore*/
|
||||
// right: 8px;
|
||||
// z-index: 3;
|
||||
// display: block;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// border-radius: 4px;
|
||||
// width: 40px;
|
||||
// height: 40px;
|
||||
// background-color: var(--vp-code-block-bg);
|
||||
// opacity: 0;
|
||||
// cursor: pointer;
|
||||
// background-image: var(--vp-icon-copy);
|
||||
// background-position: 50%;
|
||||
// background-size: 20px;
|
||||
// background-repeat: no-repeat;
|
||||
// transition: opacity 0.4s;
|
||||
// }
|
||||
|
||||
// .plume-content [class*='language-']:hover > button.copy,
|
||||
// .plume-content [class*='language-'] > button.copy:focus {
|
||||
// opacity: 1;
|
||||
// }
|
||||
|
||||
// .plume-content [class*='language-'] > button.copy:hover {
|
||||
// background-color: var(--vp-code-copy-code-hover-bg);
|
||||
// }
|
||||
|
||||
// .plume-content [class*='language-'] > button.copy.copied,
|
||||
// .plume-content [class*='language-'] > button.copy:hover.copied {
|
||||
// /*rtl:ignore*/
|
||||
// border-radius: 0 4px 4px 0;
|
||||
// background-color: var(--vp-code-copy-code-hover-bg);
|
||||
// background-image: var(--vp-icon-copied);
|
||||
// }
|
||||
|
||||
// .plume-content [class*='language-'] > button.copy.copied::before,
|
||||
// .plume-content [class*='language-'] > button.copy:hover.copied::before {
|
||||
// position: relative;
|
||||
// /*rtl:ignore*/
|
||||
// left: -65px;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// /*rtl:ignore*/
|
||||
// border-radius: 4px 0 0 4px;
|
||||
// width: 64px;
|
||||
// height: 40px;
|
||||
// text-align: center;
|
||||
// font-size: 12px;
|
||||
// font-weight: 500;
|
||||
// color: var(--vp-code-copy-code-active-text);
|
||||
// background-color: var(--vp-code-copy-code-hover-bg);
|
||||
// white-space: nowrap;
|
||||
// content: 'Copied';
|
||||
// }
|
||||
|
||||
// .plume-content [class*='language-'] > span.lang {
|
||||
// position: absolute;
|
||||
// top: 6px;
|
||||
// /*rtl:ignore*/
|
||||
// right: 12px;
|
||||
// z-index: 2;
|
||||
// font-size: 12px;
|
||||
// font-weight: 500;
|
||||
// color: var(--vp-c-text-dark-3);
|
||||
// transition: color 0.4s, opacity 0.4s;
|
||||
// }
|
||||
|
||||
// .plume-content [class*='language-']:hover > button.copy + span.lang,
|
||||
// .plume-content [class*='language-'] > button.copy:focus + span.lang {
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
@ -5,5 +5,6 @@
|
||||
@use 'utils';
|
||||
@use 'content';
|
||||
@use 'code';
|
||||
@use 'md-enhance';
|
||||
|
||||
@use '@vuepress/plugin-palette/style';
|
||||
|
||||
90
theme/src/client/styles/md-enhance.scss
Normal file
90
theme/src/client/styles/md-enhance.scss
Normal file
@ -0,0 +1,90 @@
|
||||
.plume-content .hint-container {
|
||||
border-radius: 8px;
|
||||
padding: 16px 16px 8px;
|
||||
line-height: 24px;
|
||||
font-size: var(--vp-custom-block-font-size);
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.plume-content .hint-container .hint-container-title {
|
||||
font-weight: 600;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.hint-container.note {
|
||||
color: var(--vp-custom-block-info-text);
|
||||
}
|
||||
|
||||
.hint-container.tip {
|
||||
color: var(--vp-custom-block-tip-text);
|
||||
}
|
||||
|
||||
.hint-container.warning {
|
||||
color: var(--vp-custom-block-warning-text);
|
||||
}
|
||||
|
||||
.hint-container.caution {
|
||||
color: var(--vp-custom-block-danger-text);
|
||||
}
|
||||
|
||||
.hint-container.detail {
|
||||
color: var(--vp-custom-block-detail-text);
|
||||
}
|
||||
|
||||
.plume-content .hint-container.details summary {
|
||||
margin: -1.5rem -1.5rem -1.1rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.plume-content .hint-container.details summary + p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.plume-content .hint-container p + p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.plume-content .hint-container code {
|
||||
font-size: var(--vp-custom-block-code-font-size);
|
||||
}
|
||||
|
||||
.plume-content .hint-container {
|
||||
&.note,
|
||||
&.tip,
|
||||
&.detail,
|
||||
&.important {
|
||||
a,
|
||||
code {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
a:hover {
|
||||
color: var(--vp-c-brand-2);
|
||||
}
|
||||
}
|
||||
&.warning {
|
||||
a,
|
||||
code {
|
||||
color: var(--vp-c-warning-1);
|
||||
}
|
||||
a:hover {
|
||||
color: var(--vp-c-warning-2);
|
||||
}
|
||||
}
|
||||
&.caution {
|
||||
a,
|
||||
code {
|
||||
color: var(--vp-c-danger-1);
|
||||
}
|
||||
a:hover {
|
||||
color: var(--vp-c-danger-2);
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
blockquote > p {
|
||||
font-size: var(--vp-custom-block-font-size);
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
9
theme/src/client/styles/normalize.scss
vendored
9
theme/src/client/styles/normalize.scss
vendored
@ -256,3 +256,12 @@ p {
|
||||
vite-error-overlay {
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
mjx-container {
|
||||
display: inline-block;
|
||||
margin: auto 2px -2px;
|
||||
}
|
||||
|
||||
mjx-container > svg {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@ -1,155 +1,233 @@
|
||||
/**
|
||||
* Colors Base
|
||||
*
|
||||
* These are the pure base color presets. Most of the time, you should not be
|
||||
* using these colors directly in the theme but rather use "Colors Theme"
|
||||
* instead because those are "Theme (light or dark)" dependant.
|
||||
* Colors: Solid
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-c-white: #ffffff;
|
||||
--vp-c-black: #000000;
|
||||
|
||||
--vp-c-gray: #8e8e93;
|
||||
--vp-c-neutral: var(--vp-c-black);
|
||||
--vp-c-neutral-inverse: var(--vp-c-white);
|
||||
}
|
||||
|
||||
--vp-c-text-light-1: rgba(60, 60, 67, 0.92);
|
||||
--vp-c-text-light-2: rgba(60, 60, 67, 0.7);
|
||||
--vp-c-text-light-3: rgba(60, 60, 67, 0.33);
|
||||
.dark {
|
||||
--vp-c-neutral: var(--vp-c-white);
|
||||
--vp-c-neutral-inverse: var(--vp-c-black);
|
||||
}
|
||||
|
||||
--vp-c-text-dark-1: rgba(255, 255, 245, 0.86);
|
||||
--vp-c-text-dark-2: rgba(235, 235, 245, 0.6);
|
||||
--vp-c-text-dark-3: rgba(235, 235, 245, 0.38);
|
||||
/**
|
||||
* Colors: Palette
|
||||
*
|
||||
* The primitive colors used for accent colors. These colors are referenced
|
||||
* by functional colors such as "Text", "Background", or "Brand".
|
||||
*
|
||||
* Each colors have exact same color scale system with 3 levels of solid
|
||||
* colors with different brightness, and 1 soft color.
|
||||
*
|
||||
* - `XXX-1`: The most solid color used mainly for colored text. It must
|
||||
* satisfy the contrast ratio against when used on top of `XXX-soft`.
|
||||
*
|
||||
* - `XXX-2`: The color used mainly for hover state of the button.
|
||||
*
|
||||
* - `XXX-3`: The color for solid background, such as bg color of the button.
|
||||
* It must satisfy the contrast ratio with pure white (#ffffff) text on
|
||||
* top of it.
|
||||
*
|
||||
* - `XXX-soft`: The color used for subtle background such as custom container
|
||||
* or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
|
||||
* on top of it.
|
||||
*
|
||||
* The soft color must be semi transparent alpha channel. This is crucial
|
||||
* because it allows adding multiple "soft" colors on top of each other
|
||||
* to create a accent, such as when having inline code block inside
|
||||
* custom containers.
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
--vp-c-green: #10b981;
|
||||
--vp-c-green-light: #34d399;
|
||||
--vp-c-green-lighter: #6ee7b7;
|
||||
--vp-c-green-dark: #059669;
|
||||
--vp-c-green-darker: #047857;
|
||||
--vp-c-green-dimm-1: rgba(16, 185, 129, 0.05);
|
||||
--vp-c-green-dimm-2: rgba(16, 185, 129, 0.2);
|
||||
--vp-c-green-dimm-3: rgba(16, 185, 129, 0.5);
|
||||
:root {
|
||||
--vp-c-gray-1: #dddde3;
|
||||
--vp-c-gray-2: #e4e4e9;
|
||||
--vp-c-gray-3: #ebebef;
|
||||
--vp-c-gray-soft: rgba(142, 150, 170, 0.14);
|
||||
|
||||
--vp-c-yellow: #eab308;
|
||||
--vp-c-yellow-light: #facc15;
|
||||
--vp-c-yellow-lighter: #fde047;
|
||||
--vp-c-yellow-dark: #ca8a04;
|
||||
--vp-c-yellow-darker: #a16207;
|
||||
--vp-c-yellow-dimm-1: rgba(234, 179, 8, 0.05);
|
||||
--vp-c-yellow-dimm-2: rgba(234, 179, 8, 0.2);
|
||||
--vp-c-yellow-dimm-3: rgba(234, 179, 8, 0.5);
|
||||
--vp-c-turquoise-1: #5086a1;
|
||||
--vp-c-turquoise-2: #6aa1b7;
|
||||
--vp-c-turquoise-3: #8cccd5;
|
||||
--vp-c-turquoise-soft: rgba(131, 208, 218, 0.314);
|
||||
|
||||
--vp-c-red: #f43f5e;
|
||||
--vp-c-red-light: #fb7185;
|
||||
--vp-c-red-lighter: #fda4af;
|
||||
--vp-c-red-dark: #e11d48;
|
||||
--vp-c-red-darker: #be123c;
|
||||
--vp-c-red-dimm-1: rgba(244, 63, 94, 0.05);
|
||||
--vp-c-red-dimm-2: rgba(244, 63, 94, 0.2);
|
||||
--vp-c-red-dimm-3: rgba(244, 63, 94, 0.5);
|
||||
--vp-c-green-1: #18794e;
|
||||
--vp-c-green-2: #299764;
|
||||
--vp-c-green-3: #30a46c;
|
||||
--vp-c-green-soft: rgba(16, 185, 129, 0.14);
|
||||
|
||||
--vp-c-yellow-1: #915930;
|
||||
--vp-c-yellow-2: #946300;
|
||||
--vp-c-yellow-3: #9f6a00;
|
||||
--vp-c-yellow-soft: rgba(234, 179, 8, 0.14);
|
||||
|
||||
--vp-c-red-1: #b8272c;
|
||||
--vp-c-red-2: #d5393e;
|
||||
--vp-c-red-3: #e0575b;
|
||||
--vp-c-red-soft: rgba(244, 63, 94, 0.14);
|
||||
|
||||
--vp-c-sponsor: #db2777;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--vp-c-gray-1: #515c67;
|
||||
--vp-c-gray-2: #414853;
|
||||
--vp-c-gray-3: #32363f;
|
||||
--vp-c-gray-soft: rgba(101, 117, 133, 0.16);
|
||||
|
||||
--vp-c-turquoise-1: #8cccd5;
|
||||
--vp-c-turquoise-2: #6aa1b7;
|
||||
--vp-c-turquoise-3: #5086a1;
|
||||
--vp-c-turquoise-soft: rgba(131, 208, 218, 0.314);
|
||||
|
||||
--vp-c-green-1: #3dd68c;
|
||||
--vp-c-green-2: #30a46c;
|
||||
--vp-c-green-3: #298459;
|
||||
--vp-c-green-soft: rgba(16, 185, 129, 0.16);
|
||||
|
||||
--vp-c-yellow-1: #f9b44e;
|
||||
--vp-c-yellow-2: #da8b17;
|
||||
--vp-c-yellow-3: #a46a0a;
|
||||
--vp-c-yellow-soft: rgba(234, 179, 8, 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);
|
||||
}
|
||||
|
||||
/**
|
||||
* Colors Theme
|
||||
* Colors: Background
|
||||
*
|
||||
* - `bg`: The bg color used for main screen.
|
||||
*
|
||||
* - `bg-alt`: The alternative bg color used in places such as "sidebar",
|
||||
* or "code block".
|
||||
*
|
||||
* - `bg-elv`: The elevated bg color. This is used at parts where it "floats",
|
||||
* such as "dialog".
|
||||
*
|
||||
* - `bg-soft`: The bg color to slightly distinguish some components from
|
||||
* the page. Used for things like "carbon ads" or "table".
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-c-bg: #ffffff;
|
||||
|
||||
--vp-c-bg-elv: #ffffff;
|
||||
--vp-c-bg-elv-up: #ffffff;
|
||||
--vp-c-bg-elv-down: #f6f6f7;
|
||||
--vp-c-bg-elv-mute: #f6f6f7;
|
||||
|
||||
--vp-c-bg-soft: #f6f6f7;
|
||||
--vp-c-bg-soft-up: #ffffff;
|
||||
--vp-c-bg-soft-down: #e3e3e5;
|
||||
--vp-c-bg-soft-mute: #e3e3e5;
|
||||
|
||||
--vp-c-bg-alt: #f6f6f7;
|
||||
|
||||
--vp-c-border: rgba(60, 60, 67, 0.29);
|
||||
--vp-c-divider: rgba(60, 60, 67, 0.12);
|
||||
--vp-c-gutter: rgba(60, 60, 67, 0.12);
|
||||
|
||||
--vp-c-neutral: var(--vp-c-black);
|
||||
--vp-c-neutral-inverse: var(--vp-c-white);
|
||||
|
||||
--vp-c-text-1: var(--vp-c-text-light-1);
|
||||
--vp-c-text-2: var(--vp-c-text-light-2);
|
||||
--vp-c-text-3: var(--vp-c-text-light-3);
|
||||
|
||||
--vp-c-text-inverse-1: var(--vp-c-text-dark-1);
|
||||
--vp-c-text-inverse-2: var(--vp-c-text-dark-2);
|
||||
--vp-c-text-inverse-3: var(--vp-c-text-dark-3);
|
||||
|
||||
--vp-c-text-hero-name: var(--vp-c-text-dark-1);
|
||||
--vp-c-text-hero-tagline: var(--vp-c-text-dark-2);
|
||||
--vp-c-text-hero-text: var(--vp-c-text-dark-1);
|
||||
|
||||
--vp-c-text-code: #476582;
|
||||
|
||||
--vp-c-brand: var(--vp-c-green);
|
||||
--vp-c-brand-light: var(--vp-c-green-light);
|
||||
--vp-c-brand-lighter: var(--vp-c-green-lighter);
|
||||
--vp-c-brand-dark: var(--vp-c-green-dark);
|
||||
--vp-c-brand-darker: var(--vp-c-green-darker);
|
||||
|
||||
--vp-c-mute: #f6f6f7;
|
||||
--vp-c-mute-light: #f9f9fc;
|
||||
--vp-c-mute-lighter: #ffffff;
|
||||
--vp-c-mute-dark: #e3e3e5;
|
||||
--vp-c-mute-darker: #d7d7d9;
|
||||
|
||||
--search-bg-color: var(--vp-c-bg-elv-mute);
|
||||
--search-text-color: var(--vp-c-text-2);
|
||||
--search-item-text-color: var(--vp-c-text-1);
|
||||
--search-item-focus-bg-color: var(--vp-c-bg-alt);
|
||||
--search-input-width: 8rem;
|
||||
--search-result-width: 20rem;
|
||||
--search-border-color: var(--vp-c-divider);
|
||||
|
||||
--c-brand: var(--vp-c-brand);
|
||||
--vp-c-bg-elv: #ffffff;
|
||||
--vp-c-bg-soft: #f6f6f7;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--vp-c-bg: #1e1e20;
|
||||
|
||||
--vp-c-bg-elv: #252529;
|
||||
--vp-c-bg-elv-up: #313136;
|
||||
--vp-c-bg-elv-down: #1e1e20;
|
||||
--vp-c-bg-elv-mute: #313136;
|
||||
|
||||
--vp-c-bg-soft: #252529;
|
||||
--vp-c-bg-soft-up: #313136;
|
||||
--vp-c-bg-soft-down: #1e1e20;
|
||||
--vp-c-bg-soft-mute: #313136;
|
||||
|
||||
.dark {
|
||||
--vp-c-bg: #1b1b1f;
|
||||
--vp-c-bg-alt: #161618;
|
||||
--vp-c-bg-elv: #202127;
|
||||
--vp-c-bg-soft: #202127;
|
||||
}
|
||||
|
||||
--vp-c-border: rgba(82, 82, 89, 0.68);
|
||||
--vp-c-divider: rgba(82, 82, 89, 0.32);
|
||||
/**
|
||||
* Colors: Borders
|
||||
*
|
||||
* - `divider`: This is used for separators. This is used to divide sections
|
||||
* within the same components, such as having separator on "h2" heading.
|
||||
*
|
||||
* - `border`: This is designed for borders on interactive components.
|
||||
* For example this should be used for a button outline.
|
||||
*
|
||||
* - `gutter`: This is used to divide components in the page. For example
|
||||
* the header and the lest of the page.
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-c-border: #c2c2c4;
|
||||
--vp-c-divider: #e2e2e3;
|
||||
--vp-c-gutter: #e2e2e3;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--vp-c-border: #3c3f44;
|
||||
--vp-c-divider: #2e2e32;
|
||||
--vp-c-gutter: #000000;
|
||||
}
|
||||
|
||||
--vp-c-neutral: var(--vp-c-white);
|
||||
--vp-c-neutral-inverse: var(--vp-c-black);
|
||||
/**
|
||||
* Colors: Text
|
||||
*
|
||||
* - `text-1`: Used for primary text.
|
||||
*
|
||||
* - `text-2`: Used for muted texts, such as "inactive menu" or "info texts".
|
||||
*
|
||||
* - `text-3`: Used for subtle texts, such as "placeholders" or "caret icon".
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
--vp-c-text-1: var(--vp-c-text-dark-1);
|
||||
--vp-c-text-2: var(--vp-c-text-dark-2);
|
||||
--vp-c-text-3: var(--vp-c-text-dark-3);
|
||||
:root {
|
||||
--vp-c-text-1: rgba(60, 60, 67);
|
||||
--vp-c-text-2: rgba(60, 60, 67, 0.78);
|
||||
--vp-c-text-3: rgba(60, 60, 67, 0.56);
|
||||
|
||||
--vp-c-text-inverse-1: var(--vp-c-text-light-1);
|
||||
--vp-c-text-inverse-2: var(--vp-c-text-light-2);
|
||||
--vp-c-text-inverse-3: var(--vp-c-text-light-3);
|
||||
--vp-c-text-dark-1: rgba(255, 255, 245, 0.86);
|
||||
--vp-c-text-dark-2: rgba(235, 235, 245, 0.6);
|
||||
--vp-c-text-dark-3: rgba(235, 235, 245, 0.38);
|
||||
}
|
||||
|
||||
--vp-c-text-code: #c9def1;
|
||||
.dark {
|
||||
--vp-c-text-1: rgba(255, 255, 245, 0.86);
|
||||
--vp-c-text-2: rgba(235, 235, 245, 0.6);
|
||||
--vp-c-text-3: rgba(235, 235, 245, 0.38);
|
||||
}
|
||||
|
||||
--vp-c-mute: #313136;
|
||||
--vp-c-mute-light: #3a3a3c;
|
||||
--vp-c-mute-lighter: #505053;
|
||||
--vp-c-mute-dark: #2c2c30;
|
||||
--vp-c-mute-darker: #252529;
|
||||
/**
|
||||
* Colors: Function
|
||||
*
|
||||
* - `default`: The color used purely for subtle indication without any
|
||||
* special meanings attached to it such as bg color for menu hover state.
|
||||
*
|
||||
* - `brand`: Used for primary brand colors, such as link text, button with
|
||||
* brand theme, etc.
|
||||
*
|
||||
* - `tip`: Used to indicate useful information. The default theme uses the
|
||||
* brand color for this by default.
|
||||
*
|
||||
* - `warning`: Used to indicate warning to the users. Used in custom
|
||||
* container, badges, etc.
|
||||
*
|
||||
* - `danger`: Used to show error, or dangerous message to the users. Used
|
||||
* in custom container, badges, etc.
|
||||
*
|
||||
* To understand the scaling system, refer to "Colors: Palette" section.
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-c-default-1: var(--vp-c-gray-1);
|
||||
--vp-c-default-2: var(--vp-c-gray-2);
|
||||
--vp-c-default-3: var(--vp-c-gray-3);
|
||||
--vp-c-default-soft: var(--vp-c-gray-soft);
|
||||
|
||||
--vp-c-brand-1: var(--vp-c-turquoise-1);
|
||||
--vp-c-brand-2: var(--vp-c-turquoise-2);
|
||||
--vp-c-brand-3: var(--vp-c-turquoise-3);
|
||||
--vp-c-brand-soft: var(--vp-c-turquoise-soft);
|
||||
|
||||
/* DEPRECATED: Use `--vp-c-brand-1` instead. */
|
||||
--vp-c-brand: var(--vp-c-brand-1);
|
||||
|
||||
--vp-c-tip-1: var(--vp-c-brand-1);
|
||||
--vp-c-tip-2: var(--vp-c-brand-2);
|
||||
--vp-c-tip-3: var(--vp-c-brand-3);
|
||||
--vp-c-tip-soft: var(--vp-c-brand-soft);
|
||||
|
||||
--vp-c-warning-1: var(--vp-c-yellow-1);
|
||||
--vp-c-warning-2: var(--vp-c-yellow-2);
|
||||
--vp-c-warning-3: var(--vp-c-yellow-3);
|
||||
--vp-c-warning-soft: var(--vp-c-yellow-soft);
|
||||
|
||||
--vp-c-danger-1: var(--vp-c-red-1);
|
||||
--vp-c-danger-2: var(--vp-c-red-2);
|
||||
--vp-c-danger-3: var(--vp-c-red-3);
|
||||
--vp-c-danger-soft: var(--vp-c-red-soft);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -182,21 +260,12 @@ html.dark {
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-z-index-local-nav: 10;
|
||||
--vp-z-index-nav: 20;
|
||||
--vp-z-index-layout-top: 30;
|
||||
--vp-z-index-backdrop: 40;
|
||||
--vp-z-index-sidebar: 50;
|
||||
--vp-z-index-footer: 60;
|
||||
}
|
||||
|
||||
/**
|
||||
* Icons
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
|
||||
--vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
|
||||
--vp-z-index-footer: 10;
|
||||
--vp-z-index-local-nav: 20;
|
||||
--vp-z-index-nav: 30;
|
||||
--vp-z-index-layout-top: 40;
|
||||
--vp-z-index-backdrop: 50;
|
||||
--vp-z-index-sidebar: 60;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -207,6 +276,14 @@ html.dark {
|
||||
--vp-layout-max-width: 1440px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Header Anchor
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-header-anchor-symbol: '#';
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Code
|
||||
* -------------------------------------------------------------------------- */
|
||||
@ -214,46 +291,42 @@ html.dark {
|
||||
:root {
|
||||
--vp-code-line-height: 1.7;
|
||||
--vp-code-font-size: 0.875em;
|
||||
--vp-code-color: var(--vp-c-brand-1);
|
||||
--vp-code-link-color: var(--vp-c-brand-1);
|
||||
--vp-code-link-hover-color: var(--vp-c-brand-2);
|
||||
--vp-code-bg: var(--vp-c-default-soft);
|
||||
|
||||
--vp-code-block-color: var(--vp-c-text-dark-1);
|
||||
// --vp-code-block-bg: #292b30;
|
||||
--vp-code-block-bg: #f6f6f7;
|
||||
--vp-code-block-divider-color: #e2e2e3;
|
||||
--vp-code-block-color: var(--vp-c-text-2);
|
||||
--vp-code-block-bg: var(--vp-c-bg-alt);
|
||||
--vp-code-block-divider-color: var(--vp-c-gutter);
|
||||
|
||||
--code-tabs-nav-text-color: var(--vp-c-text-light-2);
|
||||
--code-tabs-nav-bg-color: #e6e6e7;
|
||||
--code-tabs-nav-hover-color: var(--vp-code-block-bg);
|
||||
--vp-code-lang-color: var(--vp-c-text-3);
|
||||
|
||||
--vp-code-line-highlight-color: rgba(142, 150, 170, 0.14);
|
||||
--vp-code-line-number-color: var(--vp-c-text-light-3);
|
||||
--vp-code-line-highlight-color: var(--vp-c-default-soft);
|
||||
--vp-code-line-number-color: var(--vp-c-text-3);
|
||||
|
||||
--vp-code-line-diff-add-color: var(--vp-c-green-dimm-2);
|
||||
--vp-code-line-diff-add-symbol-color: var(--vp-c-green);
|
||||
--vp-code-line-diff-add-color: var(--vp-c-green-soft);
|
||||
--vp-code-line-diff-add-symbol-color: var(--vp-c-green-1);
|
||||
|
||||
--vp-code-line-diff-remove-color: var(--vp-c-red-dimm-2);
|
||||
--vp-code-line-diff-remove-symbol-color: var(--vp-c-red);
|
||||
--vp-code-line-diff-remove-color: var(--vp-c-red-soft);
|
||||
--vp-code-line-diff-remove-symbol-color: var(--vp-c-red-1);
|
||||
|
||||
--vp-code-line-warning-color: var(--vp-c-yellow-dimm-2);
|
||||
--vp-code-line-error-color: var(--vp-c-red-dimm-2);
|
||||
--vp-code-line-warning-color: var(--vp-c-yellow-soft);
|
||||
--vp-code-line-error-color: var(--vp-c-red-soft);
|
||||
|
||||
--vp-code-copy-code-hover-bg: rgba(255, 255, 255, 0.05);
|
||||
--vp-code-copy-code-active-text: var(--vp-c-text-dark-2);
|
||||
--vp-code-copy-code-border-color: var(--vp-c-divider);
|
||||
--vp-code-copy-code-bg: var(--vp-c-bg-soft);
|
||||
--vp-code-copy-code-hover-border-color: var(--vp-c-divider);
|
||||
--vp-code-copy-code-hover-bg: var(--vp-c-bg);
|
||||
--vp-code-copy-code-active-text: var(--vp-c-text-2);
|
||||
--vp-code-copy-copied-text-content: 'Copied';
|
||||
|
||||
--vp-code-tab-divider: var(--vp-code-block-divider-color);
|
||||
--vp-code-tab-text-color: var(--vp-c-text-dark-2);
|
||||
--vp-code-tab-text-color: var(--vp-c-text-2);
|
||||
--vp-code-tab-bg: var(--vp-code-block-bg);
|
||||
--vp-code-tab-hover-text-color: var(--vp-c-text-dark-1);
|
||||
--vp-code-tab-active-text-color: var(--vp-c-text-dark-1);
|
||||
--vp-code-tab-active-bar-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--vp-code-block-bg: #161618;
|
||||
--vp-code-block-divider-color: #000000;
|
||||
--vp-code-line-number-color: var(--vp-c-text-dark-3);
|
||||
--code-tabs-nav-text-color: var(--vp-c-text-dark-2);
|
||||
--code-tabs-nav-bg-color: #3a404c;
|
||||
--code-tabs-nav-hover-color: #434a57;
|
||||
--vp-code-tab-hover-text-color: var(--vp-c-text-1);
|
||||
--vp-code-tab-active-text-color: var(--vp-c-text-1);
|
||||
--vp-code-tab-active-bar-color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -261,28 +334,28 @@ html.dark {
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-button-brand-border: var(--vp-c-brand-lighter);
|
||||
--vp-button-brand-border: transparent;
|
||||
--vp-button-brand-text: var(--vp-c-white);
|
||||
--vp-button-brand-bg: var(--vp-c-brand);
|
||||
--vp-button-brand-hover-border: var(--vp-c-brand-lighter);
|
||||
--vp-button-brand-bg: var(--vp-c-brand-1);
|
||||
--vp-button-brand-hover-border: transparent;
|
||||
--vp-button-brand-hover-text: var(--vp-c-white);
|
||||
--vp-button-brand-hover-bg: var(--vp-c-brand-dark);
|
||||
--vp-button-brand-active-border: var(--vp-c-brand-lighter);
|
||||
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
|
||||
--vp-button-brand-active-border: transparent;
|
||||
--vp-button-brand-active-text: var(--vp-c-white);
|
||||
--vp-button-brand-active-bg: var(--vp-c-brand-darker);
|
||||
--vp-button-brand-active-bg: var(--vp-c-brand-1);
|
||||
|
||||
--vp-button-alt-border: var(--vp-c-border);
|
||||
--vp-button-alt-text: var(--vp-c-neutral);
|
||||
--vp-button-alt-bg: var(--vp-c-mute);
|
||||
--vp-button-alt-hover-border: var(--vp-c-border);
|
||||
--vp-button-alt-hover-text: var(--vp-c-neutral);
|
||||
--vp-button-alt-hover-bg: var(--vp-c-mute-dark);
|
||||
--vp-button-alt-active-border: var(--vp-c-border);
|
||||
--vp-button-alt-active-text: var(--vp-c-neutral);
|
||||
--vp-button-alt-active-bg: var(--vp-c-mute-darker);
|
||||
--vp-button-alt-border: transparent;
|
||||
--vp-button-alt-text: var(--vp-c-text-1);
|
||||
--vp-button-alt-bg: var(--vp-c-default-3);
|
||||
--vp-button-alt-hover-border: transparent;
|
||||
--vp-button-alt-hover-text: var(--vp-c-text-1);
|
||||
--vp-button-alt-hover-bg: var(--vp-c-default-2);
|
||||
--vp-button-alt-active-border: transparent;
|
||||
--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-gray-light-3);
|
||||
--vp-button-sponsor-text: var(--vp-c-text-light-2);
|
||||
--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);
|
||||
@ -292,9 +365,10 @@ html.dark {
|
||||
--vp-button-sponsor-active-bg: transparent;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--vp-button-sponsor-border: var(--vp-c-gray-dark-1);
|
||||
--vp-button-sponsor-text: var(--vp-c-text-dark-2);
|
||||
.dark {
|
||||
--vp-button-brand-bg: var(--vp-c-brand-2);
|
||||
--vp-button-brand-hover-bg: var(--vp-c-brand-1);
|
||||
--vp-button-brand-active-bg: var(--vp-c-brand-3);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -305,30 +379,30 @@ html.dark {
|
||||
--vp-custom-block-font-size: 14px;
|
||||
--vp-custom-block-code-font-size: 13px;
|
||||
|
||||
--vp-custom-block-info-border: var(--vp-c-border);
|
||||
--vp-custom-block-info-text: var(--vp-c-text-2);
|
||||
--vp-custom-block-info-bg: var(--vp-c-bg-soft);
|
||||
--vp-custom-block-info-code-bg: var(--vp-c-mute);
|
||||
--vp-custom-block-info-border: transparent;
|
||||
--vp-custom-block-info-text: var(--vp-c-text-1);
|
||||
--vp-custom-block-info-bg: var(--vp-c-default-soft);
|
||||
--vp-custom-block-info-code-bg: var(--vp-c-default-soft);
|
||||
|
||||
--vp-custom-block-tip-border: var(--vp-c-green-dimm-3);
|
||||
--vp-custom-block-tip-text: var(--vp-c-green);
|
||||
--vp-custom-block-tip-bg: var(--vp-c-green-dimm-1);
|
||||
--vp-custom-block-tip-code-bg: var(--vp-custom-block-tip-bg);
|
||||
--vp-custom-block-tip-border: transparent;
|
||||
--vp-custom-block-tip-text: var(--vp-c-text-1);
|
||||
--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
|
||||
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
|
||||
|
||||
--vp-custom-block-warning-border: var(--vp-c-yellow-dimm-3);
|
||||
--vp-custom-block-warning-text: var(--vp-c-yellow);
|
||||
--vp-custom-block-warning-bg: var(--vp-c-yellow-dimm-1);
|
||||
--vp-custom-block-warning-code-bg: var(--vp-custom-block-warning-bg);
|
||||
--vp-custom-block-warning-border: transparent;
|
||||
--vp-custom-block-warning-text: var(--vp-c-text-1);
|
||||
--vp-custom-block-warning-bg: var(--vp-c-warning-soft);
|
||||
--vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);
|
||||
|
||||
--vp-custom-block-danger-border: var(--vp-c-red-dimm-3);
|
||||
--vp-custom-block-danger-text: var(--vp-c-red);
|
||||
--vp-custom-block-danger-bg: var(--vp-c-red-dimm-1);
|
||||
--vp-custom-block-danger-code-bg: var(--vp-custom-block-danger-bg);
|
||||
--vp-custom-block-danger-border: transparent;
|
||||
--vp-custom-block-danger-text: var(--vp-c-text-1);
|
||||
--vp-custom-block-danger-bg: var(--vp-c-danger-soft);
|
||||
--vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);
|
||||
|
||||
--vp-custom-block-details-border: var(--vp-custom-block-info-border);
|
||||
--vp-custom-block-details-text: var(--vp-custom-block-info-text);
|
||||
--vp-custom-block-details-bg: var(--vp-custom-block-info-bg);
|
||||
--vp-custom-block-details-code-bg: var(--vp-custom-block-details-bg);
|
||||
--vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -338,9 +412,8 @@ html.dark {
|
||||
:root {
|
||||
--vp-input-border-color: var(--vp-c-border);
|
||||
--vp-input-bg-color: var(--vp-c-bg-alt);
|
||||
--vp-input-hover-border-color: var(--vp-c-gray);
|
||||
|
||||
--vp-input-switch-bg-color: var(--vp-c-mute);
|
||||
--vp-input-switch-bg-color: var(--vp-c-gray-soft);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -351,6 +424,15 @@ html.dark {
|
||||
--vp-nav-height: 64px;
|
||||
--vp-nav-bg-color: var(--vp-c-bg);
|
||||
--vp-nav-screen-bg-color: var(--vp-c-bg);
|
||||
--vp-nav-logo-height: 24px;
|
||||
}
|
||||
|
||||
.hide-nav {
|
||||
--vp-nav-height: 0px;
|
||||
}
|
||||
|
||||
.hide-nav .VPSidebar {
|
||||
--vp-nav-height: 22px;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -383,11 +465,15 @@ html.dark {
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-home-hero-name-color: var(--vp-c-brand);
|
||||
--vp-home-hero-name-color: var(--vp-c-brand-1);
|
||||
--vp-home-hero-name-background: transparent;
|
||||
|
||||
--vp-home-hero-image-background-image: none;
|
||||
--vp-home-hero-image-filter: none;
|
||||
|
||||
--vp-c-text-hero-name: var(--vp-c-text-dark-1);
|
||||
--vp-c-text-hero-tagline: var(--vp-c-text-dark-2);
|
||||
--vp-c-text-hero-text: var(--vp-c-text-dark-1);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -395,33 +481,114 @@ html.dark {
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-badge-info-border: var(--vp-c-border);
|
||||
--vp-badge-info-border: transparent;
|
||||
--vp-badge-info-text: var(--vp-c-text-2);
|
||||
--vp-badge-info-bg: var(--vp-c-bg-soft);
|
||||
--vp-badge-info-bg: var(--vp-c-default-soft);
|
||||
|
||||
--vp-badge-tip-border: var(--vp-c-green-dark);
|
||||
--vp-badge-tip-text: var(--vp-c-green);
|
||||
--vp-badge-tip-bg: var(--vp-c-green-dimm-1);
|
||||
--vp-badge-tip-border: transparent;
|
||||
--vp-badge-tip-text: var(--vp-c-brand-1);
|
||||
--vp-badge-tip-bg: var(--vp-c-brand-soft);
|
||||
|
||||
--vp-badge-warning-border: var(--vp-c-yellow-dark);
|
||||
--vp-badge-warning-text: var(--vp-c-yellow);
|
||||
--vp-badge-warning-bg: var(--vp-c-yellow-dimm-1);
|
||||
--vp-badge-warning-border: transparent;
|
||||
--vp-badge-warning-text: var(--vp-c-warning-1);
|
||||
--vp-badge-warning-bg: var(--vp-c-warning-soft);
|
||||
|
||||
--vp-badge-danger-border: var(--vp-c-red-dark);
|
||||
--vp-badge-danger-text: var(--vp-c-red);
|
||||
--vp-badge-danger-bg: var(--vp-c-red-dimm-1);
|
||||
--vp-badge-danger-border: transparent;
|
||||
--vp-badge-danger-text: var(--vp-c-danger-1);
|
||||
--vp-badge-danger-bg: var(--vp-c-danger-soft);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: CarbonAds
|
||||
* Component: Carbon Ads
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
// :root {
|
||||
// --vp-carbon-ads-text-color: var(--vp-c-text-1);
|
||||
// --vp-carbon-ads-poweredby-color: var(--vp-c-text-2);
|
||||
// --vp-carbon-ads-bg-color: var(--vp-c-bg-soft);
|
||||
// --vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);
|
||||
// --vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1);
|
||||
// }
|
||||
|
||||
/**
|
||||
* Component: Local Search
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-carbon-ads-text-color: var(--vp-c-text-1);
|
||||
--vp-carbon-ads-poweredby-color: var(--vp-c-text-2);
|
||||
--vp-carbon-ads-bg-color: var(--vp-c-bg-soft);
|
||||
--vp-carbon-ads-hover-text-color: var(--vp-c-brand);
|
||||
--vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1);
|
||||
--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 {
|
||||
--search-bg-color: var(--vp-c-bg-elv);
|
||||
--search-text-color: var(--vp-c-text-2);
|
||||
--search-item-text-color: var(--vp-c-text-1);
|
||||
--search-item-focus-bg-color: var(--vp-c-bg-alt);
|
||||
--search-input-width: 8rem;
|
||||
--search-result-width: 20rem;
|
||||
--search-border-color: var(--vp-c-divider);
|
||||
--search-accent-color: var(--vp-c-brand-2);
|
||||
}
|
||||
|
||||
/* md enhance code-tabs */
|
||||
:root {
|
||||
--code-tabs-nav-text-color: var(--vp-c-text-1);
|
||||
--code-tabs-nav-bg-color: #e6e6e7;
|
||||
--code-tabs-nav-hover-color: var(--vp-code-block-bg);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--code-tabs-nav-bg-color: #3a404c;
|
||||
--code-tabs-nav-hover-color: #434a57;
|
||||
}
|
||||
|
||||
/* md enhance hints */
|
||||
:root {
|
||||
// important
|
||||
--important-title-color: var(--vp-c-text-1);
|
||||
--important-bg-color: #f4eefe;
|
||||
--important-border-color: #f4eefe;
|
||||
--important-code-bg-color: rgb(163 113 247 / 10%);
|
||||
// info
|
||||
--info-title-color: var(--vp-c-text-1);
|
||||
--info-bg-color: var(--vp-custom-block-info-bg);
|
||||
--info-border-color: var(--vp-custom-block-info-border);
|
||||
--info-code-bg-color: var(--vp-custom-block-info-code-bg);
|
||||
|
||||
// note
|
||||
--note-title-color: var(--vp-c-text-3);
|
||||
--note-bg-color: var(--vp-c-bg-elv);
|
||||
--note-border-color: var(--vp-c-divider);
|
||||
--note-code-bg-color: var(--vp-c-default-soft);
|
||||
|
||||
// tip
|
||||
--tip-title-color: var(--vp-c-text-1);
|
||||
--tip-bg-color: var(--vp-custom-block-tip-bg);
|
||||
--tip-border-color: var(--vp-custom-block-tip-border);
|
||||
--tip-code-bg-color: var(--vp-custom-block-tip-code-bg);
|
||||
|
||||
// warning
|
||||
--warning-title-color: var(--vp-c-text-1);
|
||||
--warning-bg-color: var(--vp-custom-block-warning-bg);
|
||||
--warning-border-color: var(--vp-custom-block-warning-border);
|
||||
--warning-code-bg-color: var(--vp-custom-block-warning-code-bg);
|
||||
|
||||
// caution
|
||||
--caution-title-color: var(--vp-c-text-1);
|
||||
--caution-bg-color: var(--vp-custom-block-danger-bg);
|
||||
--caution-border-color: var(--vp-custom-block-danger-border);
|
||||
--caution-code-bg-color: var(--vp-custom-block-danger-code-bg);
|
||||
|
||||
// detail
|
||||
--detail-bg-color: var(--vp-custom-block-details-bg);
|
||||
--detail-text-color: inherit;
|
||||
--detail-code-bg-color: var(--vp-custom-block-details-code-bg);
|
||||
}
|
||||
|
||||
:root {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user