style: lint fix
This commit is contained in:
pengzhanbo
parent
1e0ac4315b
commit
8f7f4cab42
@ -7,11 +7,13 @@ export const theme = themePlume({
|
||||
hostname: 'https://pengzhanbo.cn',
|
||||
repo: 'https://github.com/pengzhanbo/vuepress-theme-plume',
|
||||
docsDir: 'docs',
|
||||
|
||||
avatar: {
|
||||
url: '/images/blogger.jpg',
|
||||
name: 'Plume Theme',
|
||||
description: 'The Theme for Vuepress 2.0',
|
||||
},
|
||||
|
||||
social: [{ icon: 'github', link: 'https://github.com/pengzhanbo' }],
|
||||
footer: { copyright: 'Copyright © 2022-present pengzhanbo' },
|
||||
|
||||
@ -26,10 +28,10 @@ export const theme = themePlume({
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
// docsearch: {
|
||||
// apiKey: '111',
|
||||
// appId: '111',
|
||||
// indexName: '1234',
|
||||
// }
|
||||
docsearch: {
|
||||
apiKey: '111',
|
||||
appId: '111',
|
||||
indexName: '1234',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
@ -11,4 +11,7 @@ export default config({
|
||||
__VUE_OPTIONS_API__: 'readonly',
|
||||
__VUE_PROD_DEVTOOLS__: 'readonly',
|
||||
},
|
||||
rules: {
|
||||
'vue/no-v-text-v-html-on-component': 'off',
|
||||
},
|
||||
})
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { defineClientConfig } from '@vuepress/client'
|
||||
import { setupCopyCode } from './setupCopyCode.js'
|
||||
|
||||
import './styles/button.scss'
|
||||
import './styles/button.css'
|
||||
|
||||
export default defineClientConfig({
|
||||
setup() {
|
||||
|
||||
@ -5,7 +5,7 @@ export default stylelintConfig({
|
||||
'selector-pseudo-element-no-unknown': [true, {
|
||||
ignorePseudoElements: ['input-placeholder'],
|
||||
}],
|
||||
'no-descending-specificity': null,
|
||||
// 'no-descending-specificity': null,
|
||||
'custom-property-empty-line-before': null,
|
||||
'property-no-vendor-prefix': null,
|
||||
'selector-no-vendor-prefix': null,
|
||||
|
||||
@ -29,7 +29,9 @@ const { archives } = useArchives()
|
||||
<style scoped>
|
||||
.archives-wrapper {
|
||||
flex: 1;
|
||||
max-width: 768px;
|
||||
padding: 32px 24px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.archives-title {
|
||||
|
||||
@ -67,7 +67,7 @@ const showBlogExtract = computed(() => {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="hasBlogExtract" class="blog-nav">
|
||||
<div v-if="hasBlogExtract" class="blog-nav" :class="{ 'no-avatar': !avatar }">
|
||||
<AutoLink class="nav-link" :href="tags.link">
|
||||
<IconTag class="icon" />
|
||||
<span>{{ tags.text }}</span>
|
||||
@ -190,6 +190,12 @@ const showBlogExtract = computed(() => {
|
||||
border-top: solid 1px var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.blog-nav.no-avatar {
|
||||
padding-top: 0;
|
||||
margin: 0;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -69,6 +69,35 @@ export default {
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: currentcolor;
|
||||
transition: fill 0.25s;
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: absolute;
|
||||
top: calc(var(--vp-nav-height) / 2 + 20px);
|
||||
right: 0;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 0.25s,
|
||||
visibility 0.25s,
|
||||
transform 0.25s;
|
||||
}
|
||||
|
||||
.flyout-wrapper:hover {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
@ -105,18 +134,6 @@ export default {
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
/* line-height: var(--vp-nav-height); */
|
||||
line-height: normal;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.option-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@ -130,23 +147,4 @@ export default {
|
||||
margin-left: 4px;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: currentcolor;
|
||||
transition: fill 0.25s;
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: absolute;
|
||||
top: calc(var(--vp-nav-height) / 2 + 20px);
|
||||
right: 0;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 0.25s,
|
||||
visibility 0.25s,
|
||||
transform 0.25s;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -22,11 +22,19 @@ const list = computed(() => matter.value.list || [])
|
||||
{{ matter.description }}
|
||||
</p>
|
||||
<section v-if="list.length" class="friends-list">
|
||||
<FriendsItem v-for="(friend, index) in list" :key="friend.name + index" :friend="friend" />
|
||||
<FriendsItem
|
||||
v-for="(friend, index) in list"
|
||||
:key="friend.name + index"
|
||||
:friend="friend"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<div v-if="editNavLink" class="edit-link">
|
||||
<AutoLink class="edit-link-button" :href="editNavLink.link" :no-icon="true">
|
||||
<AutoLink
|
||||
class="edit-link-button"
|
||||
:href="editNavLink.link"
|
||||
:no-icon="true"
|
||||
>
|
||||
<IconEdit class="edit-link-icon" aria-label="edit icon" />
|
||||
{{ editNavLink.text }}
|
||||
</AutoLink>
|
||||
|
||||
@ -9,11 +9,23 @@ defineProps<{
|
||||
|
||||
<template>
|
||||
<div class="friend">
|
||||
<AutoLink class="avatar-link" :href="friend.link" no-icon>
|
||||
<div class="avatar" :style="{ backgroundImage: `url(${friend.avatar})` }" />
|
||||
<AutoLink
|
||||
class="avatar-link"
|
||||
:href="friend.link"
|
||||
no-icon
|
||||
>
|
||||
<div
|
||||
class="avatar"
|
||||
:style="{ backgroundImage: `url(${friend.avatar})` }"
|
||||
/>
|
||||
</AutoLink>
|
||||
|
||||
<div class="content">
|
||||
<AutoLink class="title" :href="friend.link" no-icon>
|
||||
<AutoLink
|
||||
class="title"
|
||||
:href="friend.link"
|
||||
no-icon
|
||||
>
|
||||
{{ friend.name }}
|
||||
</AutoLink>
|
||||
<p v-if="friend.desc">
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
import { usePageFrontmatter, withBase } from '@vuepress/client'
|
||||
import { computed } from 'vue'
|
||||
import type { PlumeThemeHomeFrontmatter } from '../../shared/index.js'
|
||||
|
||||
// import { useThemeLocaleData } from '../composables/index.js'
|
||||
import { useDarkMode } from '../composables/darkMode.js'
|
||||
import VButton from './VButton.vue'
|
||||
|
||||
|
||||
@ -46,6 +46,37 @@ defineEmits<(e: 'click') => void>()
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.top,
|
||||
.middle,
|
||||
.bottom {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background-color: var(--vp-c-text-1);
|
||||
transition:
|
||||
top 0.25s,
|
||||
background-color 0.5s,
|
||||
transform 0.25s;
|
||||
}
|
||||
|
||||
.top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.middle {
|
||||
top: 6px;
|
||||
left: 0;
|
||||
transform: translateX(8px);
|
||||
}
|
||||
|
||||
.bottom {
|
||||
top: 12px;
|
||||
left: 0;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.navbar-hamburger:hover .top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -88,35 +119,4 @@ defineEmits<(e: 'click') => void>()
|
||||
background-color 0.25s,
|
||||
transform 0.25s;
|
||||
}
|
||||
|
||||
.top,
|
||||
.middle,
|
||||
.bottom {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background-color: var(--vp-c-text-1);
|
||||
transition:
|
||||
top 0.25s,
|
||||
background-color 0.5s,
|
||||
transform 0.25s;
|
||||
}
|
||||
|
||||
.top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.middle {
|
||||
top: 6px;
|
||||
left: 0;
|
||||
transform: translateX(8px);
|
||||
}
|
||||
|
||||
.bottom {
|
||||
top: 12px;
|
||||
left: 0;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,236 +3,3 @@
|
||||
<DocSearch />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.navbar-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* plugin-docsearch */
|
||||
.DocSearch {
|
||||
--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);
|
||||
--docsearch-searchbox-shadow: none;
|
||||
--docsearch-searchbox-background: var(--vp-c-default-soft);
|
||||
--docsearch-searchbox-focus-background: var(--vp-c-default-3);
|
||||
--docsearch-key-gradient: transparent;
|
||||
--docsearch-key-shadow: none;
|
||||
--docsearch-modal-background: var(--vp-c-bg-soft);
|
||||
--docsearch-footer-background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.dark .DocSearch {
|
||||
--docsearch-modal-shadow: none;
|
||||
--docsearch-footer-shadow: none;
|
||||
--docsearch-logo-color: var(--vp-c-text-2);
|
||||
--docsearch-hit-background: var(--vp-c-default-soft);
|
||||
--docsearch-hit-color: var(--vp-c-text-2);
|
||||
--docsearch-hit-shadow: none;
|
||||
}
|
||||
|
||||
.navbar-search .DocSearch-Button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center !important;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: var(--docsearch-searchbox-background);
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
|
||||
.navbar-search .DocSearch-Button:hover {
|
||||
background: var(--docsearch-searchbox-focus-background);
|
||||
}
|
||||
|
||||
.navbar-search .DocSearch-Button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.navbar-search .DocSearch-Button:focus:not(:focus-visible) {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.navbar-search #docsearch-container {
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--vp-c-text-1);
|
||||
fill: currentcolor;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.DocSearch-Button:hover .DocSearch-Search-Icon {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Placeholder {
|
||||
display: none;
|
||||
padding: 0 16px 0 0;
|
||||
margin-top: 2px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.DocSearch-Button:hover .DocSearch-Button-Placeholder {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Keys {
|
||||
/* rtl:ignore */
|
||||
direction: ltr;
|
||||
display: none;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key {
|
||||
display: block;
|
||||
width: auto;
|
||||
|
||||
/* rtl:end:ignore */
|
||||
min-width: 0;
|
||||
height: 22px;
|
||||
padding-left: 6px;
|
||||
margin: 2px 0 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
|
||||
/* rtl:begin:ignore */
|
||||
border-right: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
transition:
|
||||
color 0.5s,
|
||||
border-color 0.5s;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
|
||||
padding-right: 6px;
|
||||
padding-left: 2px;
|
||||
|
||||
/* rtl:begin:ignore */
|
||||
border-right: 1px solid var(--vp-c-divider);
|
||||
border-left: none;
|
||||
border-radius: 0 4px 4px 0;
|
||||
|
||||
/* rtl:end:ignore */
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child {
|
||||
font-size: 1px;
|
||||
color: transparent;
|
||||
letter-spacing: -12px;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child::after {
|
||||
font-size: 12px;
|
||||
color: var(--docsearch-muted-color);
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child > * {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dark .DocSearch-Footer {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.DocSearch-Form {
|
||||
background-color: var(--vp-c-white);
|
||||
border: 1px solid var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.dark .DocSearch-Form {
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
/* plugin-docsearch */
|
||||
|
||||
/* plugin-search */
|
||||
.navbar-search .search-box input {
|
||||
padding: 0 0.4rem 0 1.555rem;
|
||||
background-position: 0.5rem 0.4rem;
|
||||
}
|
||||
|
||||
/* plugin-search */
|
||||
|
||||
/* stylelint-disable-next-line order/order */
|
||||
@media (min-width: 768px) {
|
||||
.navbar-search {
|
||||
flex-grow: 1;
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.navbar-search {
|
||||
padding-left: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.navbar-search {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-search .DocSearch-Button {
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 10px 0 12px;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.navbar-search .DocSearch-Button:hover {
|
||||
background: var(--docsearch-searchbox-focus-background);
|
||||
border-color: var(--vp-c-brand-1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
top: 1px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 8px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.DocSearch-Button .DocSearch-Button-Placeholder {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.DocSearch-Button .DocSearch-Button-Keys {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -47,6 +47,12 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 288px;
|
||||
padding: 24px 0 96px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nav-screen.fade-enter-active,
|
||||
.nav-screen.fade-leave-active {
|
||||
transition: opacity 0.25s;
|
||||
@ -73,12 +79,6 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 288px;
|
||||
padding: 24px 0 96px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.menu + .translations,
|
||||
.menu + .appearance,
|
||||
.translations + .appearance {
|
||||
|
||||
@ -79,16 +79,6 @@ function toggle() {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.nav-screen-menu-group.open .button {
|
||||
padding-bottom: 6px;
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.nav-screen-menu-group.open .button-icon {
|
||||
/* rtl:ignore */
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -106,8 +96,9 @@ function toggle() {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.button-text i {
|
||||
font-style: normal;
|
||||
.nav-screen-menu-group.open .button {
|
||||
padding-bottom: 6px;
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
@ -119,6 +110,15 @@ function toggle() {
|
||||
transform 0.25s;
|
||||
}
|
||||
|
||||
.nav-screen-menu-group.open .button-icon {
|
||||
/* rtl:ignore */
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.button-text i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.group:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@ -55,68 +55,6 @@ onContentUpdated(() => zoom?.refresh())
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* .plume-page.is-blog {
|
||||
padding-top: calc(var(--vp-nav-height) + 32px);
|
||||
} */
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.plume-page {
|
||||
padding: 48px 32px 128px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.plume-page,
|
||||
.plume-page.is-blog {
|
||||
padding: 32px 32px 0;
|
||||
}
|
||||
|
||||
.plume-page:not(.has-sidebar) .container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
max-width: 992px;
|
||||
}
|
||||
|
||||
.plume-page:not(.has-sidebar) .content {
|
||||
max-width: 752px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.plume-page .container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.plume-page .aside {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.plume-page:not(.has-sidebar) .content {
|
||||
max-width: 784px;
|
||||
}
|
||||
|
||||
.plume-page:not(.has-sidebar) .container {
|
||||
max-width: 1204px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.content {
|
||||
padding: 0 32px 128px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.content {
|
||||
order: 1;
|
||||
min-width: 640px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.plume-page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -198,4 +136,62 @@ onContentUpdated(() => zoom?.refresh())
|
||||
.giscus-wrapper {
|
||||
padding: 5rem 0 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.plume-page {
|
||||
padding: 48px 32px 128px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.plume-page,
|
||||
.plume-page.is-blog {
|
||||
padding: 32px 32px 0;
|
||||
}
|
||||
|
||||
.plume-page:not(.has-sidebar) .container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
max-width: 992px;
|
||||
}
|
||||
|
||||
.plume-page:not(.has-sidebar) .content {
|
||||
max-width: 752px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.plume-page .container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.plume-page .aside {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.plume-page:not(.has-sidebar) .content {
|
||||
max-width: 784px;
|
||||
}
|
||||
|
||||
.plume-page:not(.has-sidebar) .container {
|
||||
max-width: 1204px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.content {
|
||||
padding: 0 32px 128px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.content {
|
||||
order: 1;
|
||||
min-width: 640px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -25,7 +25,11 @@ const showFooter = computed(() => {
|
||||
<footer v-if="showFooter" class="page-footer">
|
||||
<div v-if="editNavLink || lastUpdated" class="edit-info">
|
||||
<div v-if="editNavLink" class="edit-link">
|
||||
<AutoLink class="edit-link-button" :href="editNavLink.link" :no-icon="true">
|
||||
<AutoLink
|
||||
class="edit-link-button"
|
||||
:href="editNavLink.link"
|
||||
:no-icon="true"
|
||||
>
|
||||
<IconEdit class="edit-link-icon" aria-label="edit icon" />
|
||||
{{ editNavLink.text }}
|
||||
</AutoLink>
|
||||
@ -34,12 +38,17 @@ const showFooter = computed(() => {
|
||||
<div v-if="lastUpdated" class="last-updated">
|
||||
<p class="last-updated-text">
|
||||
{{ themeLocale.lastUpdatedText || 'Last updated' }}:
|
||||
<time :datetime="lastUpdated" class="last-updated-time">{{ lastUpdated }}</time>
|
||||
<time :datetime="lastUpdated" class="last-updated-time">
|
||||
{{ lastUpdated }}
|
||||
</time>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="contributors && contributors.length" class="contributors">
|
||||
<span class="contributors-label">{{ themeLocale.contributorsText || 'Contributors' }}:</span>
|
||||
<span class="contributors-label">
|
||||
{{ themeLocale.contributorsText || 'Contributors' }}:
|
||||
</span>
|
||||
<span class="contributors-info">
|
||||
<template v-for="(contributor, index) in contributors" :key="contributor">
|
||||
<span class="contributor" :title="`email: ${contributor.email}`">
|
||||
@ -52,18 +61,22 @@ const showFooter = computed(() => {
|
||||
|
||||
<nav v-if="prev?.link || next?.link" class="prev-next">
|
||||
<div class="pager">
|
||||
<AutoLink v-if="prev?.link" class="pager-link prev" :href="prev.link">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<AutoLink
|
||||
v-if="prev?.link"
|
||||
class="pager-link prev"
|
||||
:href="prev.link"
|
||||
>
|
||||
<span class="desc" v-html="themeLocale.prevPageLabel || 'Previous page'" />
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<span class="title" v-html="prev.text" />
|
||||
</AutoLink>
|
||||
</div>
|
||||
<div class="pager">
|
||||
<AutoLink v-if="next?.link" class="pager-link next" :href="next.link">
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<AutoLink
|
||||
v-if="next?.link"
|
||||
class="pager-link next"
|
||||
:href="next.link"
|
||||
>
|
||||
<span class="desc" v-html="themeLocale.nextPageLabel || 'Next page'" />
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<span class="title" v-html="next.text" />
|
||||
</AutoLink>
|
||||
</div>
|
||||
@ -71,7 +84,7 @@ const showFooter = computed(() => {
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style scoped>
|
||||
.page-footer {
|
||||
margin-top: 96px;
|
||||
}
|
||||
|
||||
@ -10,17 +10,17 @@ const props = defineProps<{
|
||||
post: PlumeThemeBlogPostItem
|
||||
}>()
|
||||
|
||||
const categoryList = computed(() => {
|
||||
return props.post.categoryList ?? []
|
||||
})
|
||||
const categoryList = computed(() =>
|
||||
props.post.categoryList ?? [],
|
||||
)
|
||||
|
||||
const tags = computed(() => {
|
||||
return (props.post.tags ?? []).slice(0, 4)
|
||||
})
|
||||
const tags = computed(() =>
|
||||
(props.post.tags ?? []).slice(0, 4),
|
||||
)
|
||||
|
||||
const createTime = computed(() => {
|
||||
return props.post.createTime?.split(' ')[0].replace(/\//g, '-')
|
||||
})
|
||||
const createTime = computed(() =>
|
||||
props.post.createTime?.split(' ')[0].replace(/\//g, '-'),
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -56,54 +56,52 @@ const createTime = computed(() => {
|
||||
<span>{{ createTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div v-if="post.excerpt" class="plume-content" v-html="post.excerpt" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style scoped>
|
||||
.post-item {
|
||||
padding-top: 1rem;
|
||||
margin: 0 1.75rem 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
// border-bottom: solid 1px var(--vp-c-divider);
|
||||
.post-item:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
.post-item .sticky {
|
||||
display: inline-block;
|
||||
padding: 3px 6px;
|
||||
margin-left: 0.5rem;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: var(--vp-c-text-2);
|
||||
background-color: var(--vp-c-default-soft);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
transition: color var(--t-color);
|
||||
}
|
||||
.post-item h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
transition: color var(--t-color);
|
||||
}
|
||||
|
||||
h3:hover {
|
||||
color: var(--vp-c-brand-1);
|
||||
.post-item h3:hover {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.sticky {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
}
|
||||
.post-item h3:hover .sticky {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.sticky {
|
||||
display: inline-block;
|
||||
padding: 3px 6px;
|
||||
margin-left: 0.5rem;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: var(--vp-c-text-2);
|
||||
background-color: var(--vp-c-default-soft);
|
||||
border-radius: 4px;
|
||||
@media (min-width: 960px) {
|
||||
.post-item h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -116,33 +114,33 @@ const createTime = computed(() => {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-right: 1rem;
|
||||
.post-meta > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.post-meta > div:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.post-meta .tag-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin: 0 0.2rem;
|
||||
}
|
||||
}
|
||||
.post-meta .tag-list .tag {
|
||||
margin: 0 0.2rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin: 0.3rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
.post-meta .icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin: 0.3rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.plume-content :deep(p) {
|
||||
|
||||
@ -16,13 +16,30 @@ const {
|
||||
|
||||
<template>
|
||||
<div class="post-list">
|
||||
<PostItem v-for="post in postList" :key="post.path" :post="post" />
|
||||
<PostItem
|
||||
v-for="post in postList"
|
||||
:key="post.path"
|
||||
:post="post"
|
||||
/>
|
||||
|
||||
<div v-if="isPaginationEnabled" class="pagination">
|
||||
<button type="button" class="btn prev" :disabled="isFirstPage" @click="() => changePage(-1)">
|
||||
<button
|
||||
type="button"
|
||||
class="btn prev"
|
||||
:disabled="isFirstPage"
|
||||
@click="() => changePage(-1)"
|
||||
>
|
||||
{{ pagination?.prevPageText || 'Prev' }}
|
||||
</button>
|
||||
<span class="page-info">{{ page }} / {{ totalPage }}</span>
|
||||
<button type="button" class="btn next" :disabled="isLastPage" @click="() => changePage(1)">
|
||||
<span class="page-info">
|
||||
{{ page }} / {{ totalPage }}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
class="btn next"
|
||||
:disabled="isLastPage"
|
||||
@click="() => changePage(1)"
|
||||
>
|
||||
{{ pagination?.nextPageText || 'Next' }}
|
||||
</button>
|
||||
</div>
|
||||
@ -32,7 +49,9 @@ const {
|
||||
<style scoped>
|
||||
.post-list {
|
||||
flex: 1;
|
||||
max-width: 768px;
|
||||
padding-top: 2rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
|
||||
@ -69,13 +69,15 @@ function onCaretClick() {
|
||||
>
|
||||
<div class="indicator" />
|
||||
|
||||
<AutoLink v-if="item.link" :tag="linkTag" class="link" :href="item.link">
|
||||
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
<AutoLink
|
||||
v-if="item.link"
|
||||
:tag="linkTag"
|
||||
class="link"
|
||||
:href="item.link"
|
||||
>
|
||||
<Component :is="textTag" class="text" v-html="item.text" />
|
||||
</AutoLink>
|
||||
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
|
||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
||||
|
||||
<Component :is="textTag" v-else class="text" v-html="item.text" />
|
||||
|
||||
<div
|
||||
@ -166,15 +168,6 @@ function onCaretClick() {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.sidebar-item.level-0.is-link > .item > .link:hover .text,
|
||||
.sidebar-item.level-1.is-link > .item > .link:hover .text,
|
||||
.sidebar-item.level-2.is-link > .item > .link:hover .text,
|
||||
.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-1);
|
||||
}
|
||||
|
||||
.sidebar-item.level-0.has-active > .item > .link > .text,
|
||||
.sidebar-item.level-1.has-active > .item > .link > .text,
|
||||
.sidebar-item.level-2.has-active > .item > .link > .text,
|
||||
@ -193,6 +186,15 @@ function onCaretClick() {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.sidebar-item.level-0.is-link > .item > .link:hover .text,
|
||||
.sidebar-item.level-1.is-link > .item > .link:hover .text,
|
||||
.sidebar-item.level-2.is-link > .item > .link:hover .text,
|
||||
.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-1);
|
||||
}
|
||||
|
||||
.caret {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -38,7 +38,9 @@ const { tags: tagsLink } = useBlogExtract()
|
||||
<style scoped>
|
||||
.tags-wrapper {
|
||||
flex: 1;
|
||||
max-width: 768px;
|
||||
padding: 32px 24px 168px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tags-wrapper.has-list {
|
||||
@ -73,10 +75,6 @@ const { tags: tagsLink } = useBlogExtract()
|
||||
padding: 6px 6px 6px 10px;
|
||||
margin: 8px;
|
||||
line-height: 1;
|
||||
|
||||
/* background-color: var(--vp-c-default-soft); */
|
||||
|
||||
/* color: var(--vp-c-text-2); */
|
||||
color: var(--vp-tag-color);
|
||||
word-wrap: break-word;
|
||||
cursor: pointer;
|
||||
|
||||
@ -209,49 +209,6 @@
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom Block
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
// .plume-content .custom-block {
|
||||
// margin: 16px 0;
|
||||
// }
|
||||
|
||||
// .plume-content .custom-block p {
|
||||
// margin: 8px 0;
|
||||
// line-height: 24px;
|
||||
// }
|
||||
|
||||
// .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: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 div[class*='language-'] {
|
||||
// margin: 8px 0;
|
||||
// }
|
||||
|
||||
// .plume-content .custom-block div[class*='language-'] code {
|
||||
// font-weight: 400;
|
||||
// background-color: transparent;
|
||||
// }
|
||||
|
||||
/**
|
||||
* Code
|
||||
* -------------------------------------------------------------------------- */
|
||||
@ -284,7 +241,3 @@
|
||||
.plume-content a:hover > code {
|
||||
color: var(--vp-code-link-hover-color);
|
||||
}
|
||||
|
||||
.plume-content .vp-code-tabs-nav {
|
||||
margin: 0.85rem 0 0;
|
||||
}
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
/* stylelint-disable no-descending-specificity */
|
||||
|
||||
/* ------------------ Markdown Enhance: Hint Container ------------------ */
|
||||
.plume-content {
|
||||
.hint-container {
|
||||
padding: 16px 16px 8px;
|
||||
@ -20,6 +23,12 @@
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
th,
|
||||
blockquote > p {
|
||||
font-size: var(--vp-custom-block-font-size);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
div[class*="language-"] {
|
||||
margin: 8px 0;
|
||||
}
|
||||
@ -115,14 +124,18 @@
|
||||
[class*="language-"] .line-numbers {
|
||||
padding-top: 21px;
|
||||
}
|
||||
|
||||
th,
|
||||
blockquote > p {
|
||||
font-size: var(--vp-custom-block-font-size);
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------ Markdown Enhance: Code Tabs ----------------------- */
|
||||
.plume-content {
|
||||
.vp-code-tabs-nav {
|
||||
margin: 0.85rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------- Markdown Enhance: Code Demo -------------------- */
|
||||
.plume-content {
|
||||
.vp-code-demo {
|
||||
overflow: hidden;
|
||||
border: solid 1px var(--vp-c-divider);
|
||||
@ -193,7 +206,10 @@
|
||||
margin: 8px -12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------- Markdown Enhance: Task List ---------------------- */
|
||||
.plume-content {
|
||||
.task-list-container {
|
||||
padding-left: 0;
|
||||
|
||||
@ -232,7 +248,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------- Markdown Enhance: Tabs ----------------------------- */
|
||||
.plume-content {
|
||||
.vp-tabs {
|
||||
margin: 1.5rem -0.75rem;
|
||||
overflow: hidden;
|
||||
@ -258,7 +277,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------- Markdown Enhance: Footnote -------------------------------- */
|
||||
.plume-content {
|
||||
.footnotes-sep {
|
||||
margin-top: 48px;
|
||||
}
|
||||
@ -341,6 +363,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------- Markdown Enhance: Image Figure --------------------- */
|
||||
.plume-content {
|
||||
figure {
|
||||
position: relative;
|
||||
|
||||
26
theme/src/client/styles/normalize.scss
vendored
26
theme/src/client/styles/normalize.scss
vendored
@ -164,6 +164,19 @@ textarea {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0;
|
||||
font-family: inherit;
|
||||
@ -196,10 +209,6 @@ table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
input:-ms-input-placeholder,
|
||||
textarea:-ms-input-placeholder {
|
||||
color: var(--vp-c-text-3);
|
||||
@ -229,15 +238,6 @@ input[type="number"] {
|
||||
appearance: textfield;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
@ -1,3 +1,234 @@
|
||||
.navbar-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* plugin-docsearch */
|
||||
.DocSearch {
|
||||
--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);
|
||||
--docsearch-searchbox-shadow: none;
|
||||
--docsearch-searchbox-background: var(--vp-c-default-soft);
|
||||
--docsearch-searchbox-focus-background: var(--vp-c-default-3);
|
||||
--docsearch-key-gradient: transparent;
|
||||
--docsearch-key-shadow: none;
|
||||
--docsearch-modal-background: var(--vp-c-bg-soft);
|
||||
--docsearch-footer-background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.dark .DocSearch {
|
||||
--docsearch-modal-shadow: none;
|
||||
--docsearch-footer-shadow: none;
|
||||
--docsearch-logo-color: var(--vp-c-text-2);
|
||||
--docsearch-hit-background: var(--vp-c-default-soft);
|
||||
--docsearch-hit-color: var(--vp-c-text-2);
|
||||
--docsearch-hit-shadow: none;
|
||||
}
|
||||
|
||||
.navbar-search .DocSearch-Button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center !important;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: var(--docsearch-searchbox-background);
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
|
||||
.navbar-search .DocSearch-Button:hover {
|
||||
background: var(--docsearch-searchbox-focus-background);
|
||||
}
|
||||
|
||||
.navbar-search .DocSearch-Button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.navbar-search .DocSearch-Button:focus:not(:focus-visible) {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.navbar-search #docsearch-container {
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--vp-c-text-1);
|
||||
fill: currentcolor;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.DocSearch-Button:hover .DocSearch-Search-Icon {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Placeholder {
|
||||
display: none;
|
||||
padding: 0 16px 0 0;
|
||||
margin-top: 2px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.DocSearch-Button:hover .DocSearch-Button-Placeholder {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Keys {
|
||||
/* rtl:ignore */
|
||||
direction: ltr;
|
||||
display: none;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key {
|
||||
display: block;
|
||||
width: auto;
|
||||
|
||||
/* rtl:end:ignore */
|
||||
min-width: 0;
|
||||
height: 22px;
|
||||
padding-left: 6px;
|
||||
margin: 2px 0 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
|
||||
/* rtl:begin:ignore */
|
||||
border-right: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
transition:
|
||||
color 0.5s,
|
||||
border-color 0.5s;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
|
||||
padding-right: 6px;
|
||||
padding-left: 2px;
|
||||
|
||||
/* rtl:begin:ignore */
|
||||
border-right: 1px solid var(--vp-c-divider);
|
||||
border-left: none;
|
||||
border-radius: 0 4px 4px 0;
|
||||
|
||||
/* rtl:end:ignore */
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child {
|
||||
font-size: 1px;
|
||||
color: transparent;
|
||||
letter-spacing: -12px;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child::after {
|
||||
font-size: 12px;
|
||||
color: var(--docsearch-muted-color);
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child > * {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dark .DocSearch-Footer {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.DocSearch-Form {
|
||||
background-color: var(--vp-c-white);
|
||||
border: 1px solid var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.dark .DocSearch-Form {
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
/* plugin-docsearch */
|
||||
|
||||
/* plugin-search */
|
||||
.navbar-search .search-box input {
|
||||
padding: 0 0.4rem 0 1.555rem;
|
||||
background-position: 0.5rem 0.4rem;
|
||||
}
|
||||
|
||||
/* plugin-search */
|
||||
|
||||
/* stylelint-disable-next-line order/order */
|
||||
@media (min-width: 768px) {
|
||||
.navbar-search {
|
||||
flex-grow: 1;
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.navbar-search {
|
||||
padding-left: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.navbar-search {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-search .DocSearch-Button {
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 10px 0 12px;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.navbar-search .DocSearch-Button:hover {
|
||||
background: var(--docsearch-searchbox-focus-background);
|
||||
border-color: var(--vp-c-brand-1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
top: 1px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 8px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.DocSearch-Button .DocSearch-Button-Placeholder {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.DocSearch-Button .DocSearch-Button-Keys {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.search-box .suggestions {
|
||||
top: 2.5rem;
|
||||
right: -1rem;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user