style: stylelint fix
This commit is contained in:
pengzhanbo
parent
5a96bacdec
commit
fa14c4c00b
@ -9,11 +9,11 @@
|
||||
--vp-code-copy-code-hover-border-color: #e2e2e3;
|
||||
--vp-code-copy-code-hover-bg: #fff;
|
||||
--vp-code-copy-code-active-text: rgba(60, 60, 67, 0.78);
|
||||
--vp-code-copy-copied-text-content: 'Copied';
|
||||
--vp-code-copy-copied-text-content: "Copied";
|
||||
}
|
||||
|
||||
html[lang='zh-CN'] {
|
||||
--vp-code-copy-copied-text-content: '已复制';
|
||||
html[lang="zh-CN"] {
|
||||
--vp-code-copy-copied-text-content: "已复制";
|
||||
}
|
||||
|
||||
.dark {
|
||||
@ -25,71 +25,76 @@ html[lang='zh-CN'] {
|
||||
}
|
||||
|
||||
.copy-code-button {
|
||||
/*rtl:ignore*/
|
||||
direction: ltr;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
/*rtl:ignore*/
|
||||
|
||||
/* rtl:ignore */
|
||||
right: 12px;
|
||||
z-index: 3;
|
||||
border: 1px solid var(--vp-code-copy-code-border-color);
|
||||
border-radius: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: var(--vp-code-copy-code-bg);
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
background-color: var(--vp-code-copy-code-bg);
|
||||
background-image: var(--vp-icon-copy);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
background-size: 20px;
|
||||
background-repeat: no-repeat;
|
||||
border: 1px solid var(--vp-code-copy-code-border-color);
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
transition:
|
||||
border-color 0.25s,
|
||||
background-color 0.25s,
|
||||
opacity 0.25s;
|
||||
|
||||
/* rtl:ignore */
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
[class*='language-']:hover > .copy-code-button,
|
||||
[class*='language-'] > .copy-code-button:focus,
|
||||
[class*='language-'] > .copy-code-button.copied {
|
||||
[class*="language-"]:hover > .copy-code-button,
|
||||
[class*="language-"] > .copy-code-button:focus,
|
||||
[class*="language-"] > .copy-code-button.copied {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[class*='language-'] > .copy-code-button:hover,
|
||||
[class*='language-'] > .copy-code-button.copied {
|
||||
border-color: var(--vp-code-copy-code-hover-border-color);
|
||||
[class*="language-"] > .copy-code-button:hover,
|
||||
[class*="language-"] > .copy-code-button.copied {
|
||||
background-color: var(--vp-code-copy-code-hover-bg);
|
||||
border-color: var(--vp-code-copy-code-hover-border-color);
|
||||
}
|
||||
|
||||
[class*='language-'] > .copy-code-button.copied,
|
||||
[class*='language-'] > .copy-code-button:hover.copied {
|
||||
/*rtl:ignore*/
|
||||
border-radius: 0 4px 4px 0;
|
||||
[class*="language-"] > .copy-code-button.copied,
|
||||
[class*="language-"] > .copy-code-button:hover.copied {
|
||||
background-color: var(--vp-code-copy-code-hover-bg);
|
||||
background-image: var(--vp-icon-copied);
|
||||
|
||||
/* rtl:ignore */
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
[class*='language-'] > .copy-code-button.copied::before,
|
||||
[class*='language-'] > .copy-code-button:hover.copied::before {
|
||||
[class*="language-"] > .copy-code-button.copied::before,
|
||||
[class*="language-"] > .copy-code-button:hover.copied::before {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
/*rtl:ignore*/
|
||||
transform: translateX(calc(-100% - 1px));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid var(--vp-code-copy-code-hover-border-color);
|
||||
/*rtl:ignore*/
|
||||
border-right: 0;
|
||||
border-radius: 4px 0 0 4px;
|
||||
padding: 0 10px;
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-code-copy-code-active-text);
|
||||
background-color: var(--vp-code-copy-code-hover-bg);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
content: var(--vp-code-copy-copied-text-content);
|
||||
background-color: var(--vp-code-copy-code-hover-bg);
|
||||
border: 1px solid var(--vp-code-copy-code-hover-border-color);
|
||||
|
||||
/* rtl:ignore */
|
||||
border-right: 0;
|
||||
border-radius: 4px 0 0 4px;
|
||||
|
||||
/* rtl:ignore */
|
||||
transform: translateX(calc(-100% - 1px));
|
||||
}
|
||||
|
||||
@ -28,18 +28,19 @@ const { archives } = useArchives()
|
||||
|
||||
<style scoped>
|
||||
.archives-wrapper {
|
||||
padding: 32px 24px;
|
||||
flex: 1;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.archives-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-brand-1);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.archives-title .icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
@ -56,8 +57,8 @@ const { archives } = useArchives()
|
||||
}
|
||||
|
||||
.archive-title {
|
||||
margin-top: 2rem;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -46,10 +46,10 @@ function linkTo(e: Event) {
|
||||
<style scoped>
|
||||
.icon {
|
||||
display: inline-block;
|
||||
margin-top: -1px;
|
||||
margin-left: 4px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin-top: -1px;
|
||||
margin-left: 4px;
|
||||
fill: var(--vp-c-text-3);
|
||||
transition: fill 0.25s;
|
||||
}
|
||||
|
||||
@ -38,7 +38,6 @@ const show = computed(() => {
|
||||
return y.value > windowHeight.value / 2
|
||||
})
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
let timer: NodeJS.Timeout | null = null
|
||||
function resetScrolling() {
|
||||
timer && clearTimeout(timer)
|
||||
@ -77,15 +76,15 @@ function handleClick() {
|
||||
<style scoped>
|
||||
.back-to-top-button {
|
||||
position: fixed;
|
||||
inset-inline-end: 1rem;
|
||||
right: 20px;
|
||||
bottom: 64px;
|
||||
z-index: var(--vp-z-index-back-to-top);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-color: var(--vp-c-bg);
|
||||
border-radius: 100%;
|
||||
box-shadow: var(--vp-shadow-2);
|
||||
background-color: var(--vp-c-bg);
|
||||
inset-inline-end: 1rem;
|
||||
transition:
|
||||
background-color 0.25s ease,
|
||||
box-shadow 0.25s ease;
|
||||
@ -96,8 +95,8 @@ function handleClick() {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.back-to-top-button .percent.show,
|
||||
@ -108,19 +107,19 @@ function handleClick() {
|
||||
.back-to-top-button .percent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
font-size: 10px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.back-to-top-button .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: var(--vp-c-text-3);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.back-to-top-button svg {
|
||||
@ -131,23 +130,24 @@ function handleClick() {
|
||||
.back-to-top-button svg circle {
|
||||
fill: none;
|
||||
stroke: var(--vp-c-brand-2);
|
||||
stroke-dasharray: 0% 314.1593%;
|
||||
stroke-width: 4px;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 50% 50%;
|
||||
r: 16;
|
||||
stroke-dasharray: 0% 314.1593%;
|
||||
stroke-width: 4px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.back-to-top-button {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.back-to-top-button .percent {
|
||||
line-height: 48px;
|
||||
font-size: 14px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.back-to-top-button .icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
@ -14,10 +14,12 @@ defineProps<{
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
/*rtl:ignore*/
|
||||
|
||||
/* rtl:ignore */
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/*rtl:ignore*/
|
||||
|
||||
/* rtl:ignore */
|
||||
left: 0;
|
||||
z-index: var(--vp-z-index-backdrop);
|
||||
background: var(--vp-backdrop-bg-color);
|
||||
@ -33,7 +35,7 @@ defineProps<{
|
||||
transition-duration: 0.25s;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
@media (width >= 1280px) {
|
||||
.backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -26,18 +26,18 @@ const page = usePageData<PlumeThemePageData>()
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding-top: var(--vp-nav-height);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.blog-wrapper {
|
||||
max-width: 784px;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
@media (width >= 1440px) {
|
||||
.blog-wrapper {
|
||||
max-width: 1104px;
|
||||
}
|
||||
|
||||
@ -40,12 +40,12 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
|
||||
position: sticky;
|
||||
top: calc(var(--vp-nav-height) + 2rem);
|
||||
width: 270px;
|
||||
margin-left: 2rem;
|
||||
padding: 1rem 0;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 12rem;
|
||||
border-left: solid 1px var(--vp-c-divider);
|
||||
margin-left: 2rem;
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
border-left: solid 1px var(--vp-c-divider);
|
||||
|
||||
img {
|
||||
width: 50%;
|
||||
@ -53,24 +53,24 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 1.5rem;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (width <= 768px) {
|
||||
.blog-aside-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-nav {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
padding: 10px 12px 0;
|
||||
margin: 24px 24px 0;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
border-top: solid 1px var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@ -79,18 +79,19 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3px;
|
||||
color: var(--vp-c-brand-1);
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-brand-1);
|
||||
border-radius: 8px;
|
||||
transition: all var(--t-color);
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--vp-c-brand-2);
|
||||
}
|
||||
|
||||
.nav-link .icon {
|
||||
margin-right: 4px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -85,19 +85,19 @@ const showBlogExtract = computed(() => {
|
||||
|
||||
<style scoped>
|
||||
.blog-extract {
|
||||
display: block;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 30%;
|
||||
z-index: calc(var(--vp-z-index-nav) - 1);
|
||||
display: block;
|
||||
padding: 4px 10px;
|
||||
border-top-left-radius: 99px;
|
||||
border-bottom-left-radius: 99px;
|
||||
cursor: pointer;
|
||||
background-color: var(--vp-c-bg);
|
||||
border: solid 1px var(--vp-c-divider);
|
||||
border-right: none;
|
||||
border-top-left-radius: 99px;
|
||||
border-bottom-left-radius: 99px;
|
||||
box-shadow: var(--vp-shadow-2);
|
||||
z-index: calc(var(--vp-z-index-nav) - 1);
|
||||
background-color: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.blog-extract .icon {
|
||||
@ -105,7 +105,7 @@ const showBlogExtract = computed(() => {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.blog-extract {
|
||||
display: none;
|
||||
}
|
||||
@ -124,8 +124,8 @@ const showBlogExtract = computed(() => {
|
||||
left: 0;
|
||||
z-index: var(--vp-z-index-overlay);
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.blog-modal.fade-enter-from,
|
||||
@ -149,8 +149,8 @@ const showBlogExtract = computed(() => {
|
||||
box-shadow:
|
||||
0 -3px 12px rgba(0, 0, 0, 0.1),
|
||||
0 -1px 4px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.dark .blog-modal-container {
|
||||
@ -182,11 +182,11 @@ const showBlogExtract = computed(() => {
|
||||
}
|
||||
|
||||
.blog-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 10px 0 0;
|
||||
margin: 24px 0 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
border-top: solid 1px var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@ -194,15 +194,15 @@ const showBlogExtract = computed(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 3px;
|
||||
color: var(--vp-c-brand-1);
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-brand-1);
|
||||
border-radius: 8px;
|
||||
transition: all var(--t-color);
|
||||
}
|
||||
|
||||
.nav-link .icon {
|
||||
margin-right: 4px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -36,13 +36,13 @@ function onClick({ target: el }: Event) {
|
||||
|
||||
.outline-link {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
color: var(--vp-c-text-2);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
transition: color 0.5s;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.outline-link:hover,
|
||||
|
||||
@ -23,15 +23,15 @@ defineProps<{
|
||||
|
||||
<style scoped>
|
||||
.menu-group {
|
||||
padding: 12px 12px 0;
|
||||
margin: 12px -12px 0;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.menu-group:first-child {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.menu-group + .menu-group {
|
||||
@ -41,9 +41,9 @@ defineProps<{
|
||||
|
||||
.title {
|
||||
padding: 0 12px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 32px;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@ -30,20 +30,20 @@ const page = usePageData()
|
||||
|
||||
<style scoped>
|
||||
.menu-group + .menu-link {
|
||||
padding: 12px 12px 0;
|
||||
margin: 12px -12px 0;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: block;
|
||||
border-radius: 6px;
|
||||
padding: 0 12px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
color: var(--vp-c-text-1);
|
||||
white-space: nowrap;
|
||||
border-radius: 6px;
|
||||
transition:
|
||||
background-color 0.25s,
|
||||
color 0.25s;
|
||||
|
||||
@ -27,25 +27,25 @@ defineProps<{
|
||||
|
||||
<style scoped>
|
||||
.menu-wrapper {
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
min-width: 128px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
max-height: calc(100vh - var(--vp-nav-height));
|
||||
padding: 12px;
|
||||
overflow-y: auto;
|
||||
background-color: var(--vp-c-bg-elv);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--vp-shadow-3);
|
||||
transition: background-color 0.5s;
|
||||
max-height: calc(100vh - var(--vp-nav-height));
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.menu-wrapper :deep(.group) {
|
||||
margin: 0 -12px;
|
||||
padding: 0 12px 12px;
|
||||
margin: 0 -12px;
|
||||
}
|
||||
|
||||
.menu-wrapper :deep(.group + .group) {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
padding: 11px 12px 12px;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.menu-wrapper :deep(.group:last-child) {
|
||||
@ -53,8 +53,8 @@ defineProps<{
|
||||
}
|
||||
|
||||
.menu-wrapper :deep(.group + .item) {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
padding: 11px 16px 0;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.menu-wrapper :deep(.item) {
|
||||
@ -64,9 +64,9 @@ defineProps<{
|
||||
|
||||
.menu-wrapper :deep(.label) {
|
||||
flex-grow: 1;
|
||||
line-height: 28px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
@ -90,17 +90,17 @@ export default {
|
||||
}
|
||||
|
||||
.flyout-wrapper:hover .menu,
|
||||
.button[aria-expanded='true'] + .menu {
|
||||
opacity: 1;
|
||||
.button[aria-expanded="true"] + .menu {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
height: var(--vp-nav-height);
|
||||
padding: 0 12px;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.5s;
|
||||
}
|
||||
@ -108,32 +108,33 @@ export default {
|
||||
.text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* line-height: var(--vp-nav-height); */
|
||||
line-height: normal;
|
||||
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 {
|
||||
margin-right: 0px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
margin-right: 0;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.text-icon {
|
||||
margin-left: 4px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: currentColor;
|
||||
margin-left: 4px;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: currentColor;
|
||||
fill: currentcolor;
|
||||
transition: fill 0.25s;
|
||||
}
|
||||
|
||||
@ -141,8 +142,8 @@ export default {
|
||||
position: absolute;
|
||||
top: calc(var(--vp-nav-height) / 2 + 20px);
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 0.25s,
|
||||
visibility 0.25s,
|
||||
|
||||
@ -37,66 +37,69 @@ const list = computed(() => matter.value.list || [])
|
||||
<style scoped>
|
||||
.friends-wrapper {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding-top: var(--vp-nav-height);
|
||||
padding-bottom: 5rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.friends-wrapper .title {
|
||||
padding-top: 3rem;
|
||||
padding-left: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-brand-1);
|
||||
padding-left: 1rem;
|
||||
padding-top: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.friends-wrapper .description {
|
||||
color: var(--vp-c-text-1);
|
||||
padding-left: 1rem;
|
||||
margin-bottom: 16px;
|
||||
line-height: 28px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.friends-list {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
margin-top: 64px;
|
||||
padding: 0 16px;
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
.edit-link {
|
||||
margin-top: 64px;
|
||||
padding-left: 1rem;
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
@media (width >= 640px) {
|
||||
.friends-wrapper .title,
|
||||
.friends-wrapper .description,
|
||||
.edit-link {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.friends-list {
|
||||
padding: 0 16px;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.friends-wrapper {
|
||||
max-width: 784px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.friends-list {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
@media (width >= 1440px) {
|
||||
.friends-wrapper {
|
||||
max-width: 1104px;
|
||||
}
|
||||
|
||||
.friends-list {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
@ -105,11 +108,11 @@ const list = computed(() => matter.value.list || [])
|
||||
.edit-link-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 0;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
color: var(--vp-c-brand-1);
|
||||
border: 0;
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@ -118,9 +121,9 @@ const list = computed(() => matter.value.list || [])
|
||||
}
|
||||
|
||||
.edit-link-icon {
|
||||
margin-right: 8px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: currentColor;
|
||||
margin-right: 8px;
|
||||
fill: currentcolor;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,12 +28,12 @@ defineProps<{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-friends-border-color);
|
||||
margin-bottom: 8px;
|
||||
transition: all 0.25s;
|
||||
background-color: var(--vp-friends-bg-color);
|
||||
border: 1px solid var(--vp-friends-border-color);
|
||||
border-radius: 6px;
|
||||
box-shadow: var(--vp-shadow-1);
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
.friend:hover {
|
||||
@ -48,35 +48,36 @@ defineProps<{
|
||||
.avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 100%;
|
||||
background-size: cover;
|
||||
background-color: var(--vp-c-default-soft);
|
||||
background-size: cover;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content .title {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: var(--vp-friends-link-color);
|
||||
padding-left: 16px;
|
||||
padding-bottom: 8px;
|
||||
margin-left: -16px;
|
||||
padding-left: 16px;
|
||||
margin-bottom: 8px;
|
||||
margin-left: -16px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--vp-friends-link-color);
|
||||
border-bottom: 1px dashed var(--vp-friends-border-color);
|
||||
}
|
||||
|
||||
.content p {
|
||||
display: -webkit-box;
|
||||
padding-top: 8px;
|
||||
overflow: hidden;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
padding-top: 8px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
color: var(--vp-friends-text-color);
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
color: var(--vp-friends-text-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -75,11 +75,11 @@ const actions = computed(() => {
|
||||
<style scoped>
|
||||
.plume-home {
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
min-height: calc(100vh - var(--vp-nav-height));
|
||||
filter: var(--vp-home-hero-image-filter);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
transition: all var(--t-color);
|
||||
}
|
||||
|
||||
@ -88,13 +88,13 @@ const actions = computed(() => {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding-top: 4rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.plume-home .content {
|
||||
padding: 0 2rem;
|
||||
width: 100%;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.plume-home .content .hero-name {
|
||||
@ -107,34 +107,36 @@ const actions = computed(() => {
|
||||
.plume-home .content .hero-tagline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
margin-top: 1rem;
|
||||
color: var(--vp-c-text-hero-tagline);
|
||||
line-height: 1.25;
|
||||
color: var(--vp-c-text-hero-tagline);
|
||||
}
|
||||
|
||||
.plume-home .content .hero-tagline .line {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
height: 0;
|
||||
border-top: solid 1px var(--vp-c-text-hero-tagline);
|
||||
margin-right: 1rem;
|
||||
border-top: solid 1px var(--vp-c-text-hero-tagline);
|
||||
}
|
||||
|
||||
.plume-home .content .hero-text {
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
margin-top: 1.5rem;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-top: 1.5rem;
|
||||
color: var(--vp-c-text-hero-text);
|
||||
|
||||
/* padding: 6px 20px; */
|
||||
border-radius: 5px;
|
||||
|
||||
/* background-color: rgba(0, 0, 0, 0.25); */
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.plume-home .container {
|
||||
max-width: 768px;
|
||||
padding-top: 8rem;
|
||||
@ -145,7 +147,7 @@ const actions = computed(() => {
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
@media (width >= 1440px) {
|
||||
.plume-home .container {
|
||||
max-width: 1104px;
|
||||
padding-top: 8rem;
|
||||
@ -159,8 +161,8 @@ const actions = computed(() => {
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: -6px;
|
||||
padding-top: 24px;
|
||||
margin: -6px;
|
||||
}
|
||||
|
||||
.action {
|
||||
|
||||
@ -22,8 +22,8 @@ const { hasSidebar } = useSidebar()
|
||||
.layout-content {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
margin: var(--vp-layout-top-height, 0px) auto 0;
|
||||
width: 100%;
|
||||
margin: var(--vp-layout-top-height, 0) auto 0;
|
||||
}
|
||||
|
||||
.layout-content.is-home {
|
||||
@ -35,23 +35,24 @@ const { hasSidebar } = useSidebar()
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.layout-content {
|
||||
padding-top: var(--vp-nav-height);
|
||||
}
|
||||
|
||||
.layout-content.has-sidebar {
|
||||
margin: var(--vp-layout-top-height, 0px) 0 0;
|
||||
padding-left: var(--vp-sidebar-width);
|
||||
margin: var(--vp-layout-top-height, 0) 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
@media (width >= 1440px) {
|
||||
.layout-content.has-sidebar {
|
||||
padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
|
||||
padding-left: calc(
|
||||
(100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)
|
||||
);
|
||||
padding-left:
|
||||
calc(
|
||||
(100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)
|
||||
);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -71,17 +71,18 @@ const showLocalNav = computed(() => {
|
||||
.local-nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
/*rtl:ignore*/
|
||||
|
||||
/* rtl:ignore */
|
||||
left: 0;
|
||||
z-index: var(--vp-z-index-local-nav);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding-top: var(--vp-layout-top-height, 0);
|
||||
background-color: var(--vp-local-nav-bg-color);
|
||||
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%;
|
||||
background-color: var(--vp-local-nav-bg-color);
|
||||
transition:
|
||||
border-color 0.5s,
|
||||
background-color 0.5s;
|
||||
@ -95,7 +96,7 @@ const showLocalNav = computed(() => {
|
||||
border-top-color: transparent;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.local-nav {
|
||||
display: none;
|
||||
}
|
||||
@ -111,9 +112,9 @@ const showLocalNav = computed(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 24px 11px;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.5s;
|
||||
}
|
||||
@ -127,25 +128,25 @@ const showLocalNav = computed(() => {
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.menu {
|
||||
padding: 0 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
margin-right: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
margin-right: 8px;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.top-link {
|
||||
display: block;
|
||||
padding: 12px 24px 11px;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.5s;
|
||||
}
|
||||
@ -155,7 +156,7 @@ const showLocalNav = computed(() => {
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.top-link {
|
||||
padding: 12px 32px 11px;
|
||||
}
|
||||
|
||||
@ -78,13 +78,13 @@ function scrollToTop() {
|
||||
}
|
||||
|
||||
.local-nav-outline-dropdown button {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.5s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.local-nav-outline-dropdown button:hover {
|
||||
@ -98,16 +98,16 @@ function scrollToTop() {
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: currentColor;
|
||||
margin-left: 2px;
|
||||
vertical-align: middle;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
:deep(.outline-link) {
|
||||
font-size: 14px;
|
||||
padding: 2px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.open > .icon {
|
||||
@ -121,11 +121,11 @@ function scrollToTop() {
|
||||
left: 16px;
|
||||
display: grid;
|
||||
gap: 1px;
|
||||
border: 1px solid var(--vp-c-border);
|
||||
border-radius: 8px;
|
||||
background-color: var(--vp-c-gutter);
|
||||
max-height: calc(var(--vp-vh, 100vh) - 86px);
|
||||
overflow: hidden auto;
|
||||
background-color: var(--vp-c-gutter);
|
||||
border: 1px solid var(--vp-c-border);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--vp-shadow-3);
|
||||
}
|
||||
|
||||
@ -136,9 +136,9 @@ function scrollToTop() {
|
||||
.top-link {
|
||||
display: block;
|
||||
padding: 0 16px;
|
||||
line-height: 48px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 48px;
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
|
||||
@ -61,36 +61,36 @@ watchPostEffect(() => {
|
||||
<style scoped>
|
||||
.navbar-wrapper {
|
||||
position: relative;
|
||||
border-bottom: 1px solid transparent;
|
||||
padding: 0 8px 0 24px;
|
||||
height: var(--vp-nav-height);
|
||||
pointer-events: none;
|
||||
padding: 0 8px 0 24px;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.navbar-wrapper {
|
||||
padding: 0 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.navbar-wrapper.has-sidebar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar-wrapper:not(.has-sidebar):not(.top) {
|
||||
border-bottom-color: var(--vp-c-gutter);
|
||||
.navbar-wrapper:not(.has-sidebar, .top) {
|
||||
background-color: var(--vp-nav-bg-color);
|
||||
border-bottom-color: var(--vp-c-gutter);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
max-width: calc(var(--vp-layout-max-width) - 64px);
|
||||
height: var(--vp-nav-height);
|
||||
margin: 0 auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -98,7 +98,7 @@ watchPostEffect(() => {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.navbar-wrapper.has-sidebar .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
@ -110,29 +110,31 @@ watchPostEffect(() => {
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.navbar-wrapper.has-sidebar .title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
padding: 0 32px;
|
||||
width: var(--vp-sidebar-width);
|
||||
height: var(--vp-nav-height);
|
||||
padding: 0 32px;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
@media (width >= 1440px) {
|
||||
.navbar-wrapper.has-sidebar .title {
|
||||
padding-left: max(
|
||||
32px,
|
||||
calc((100% - (var(--vp-layout-max-width) - 64px)) / 2)
|
||||
);
|
||||
width: calc(
|
||||
(100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) -
|
||||
width:
|
||||
calc(
|
||||
(100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) -
|
||||
32px
|
||||
);
|
||||
);
|
||||
padding-left:
|
||||
max(
|
||||
32px,
|
||||
calc((100% - (var(--vp-layout-max-width) - 64px)) / 2)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -140,7 +142,7 @@ watchPostEffect(() => {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.navbar-wrapper.has-sidebar .content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@ -149,31 +151,32 @@ watchPostEffect(() => {
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
@media (width >= 1440px) {
|
||||
.navbar-wrapper.has-sidebar .content {
|
||||
padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
|
||||
padding-left: calc(
|
||||
(100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)
|
||||
);
|
||||
padding-left:
|
||||
calc(
|
||||
(100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.content-body {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: calc(var(--vp-nav-height) - 1px);
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.navbar-wrapper:not(.top) .content-body {
|
||||
position: relative;
|
||||
background-color: var(--vp-nav-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
@media (width <= 767px) {
|
||||
.content-body {
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
@ -184,12 +187,12 @@ watchPostEffect(() => {
|
||||
.menu + .social-links::before,
|
||||
.translations + .appearance::before,
|
||||
.appearance + .social-links::before {
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
margin-left: 8px;
|
||||
content: "";
|
||||
background-color: var(--vp-c-divider);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.menu + .appearance::before,
|
||||
@ -205,7 +208,7 @@ watchPostEffect(() => {
|
||||
margin-right: -8px;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.navbar-wrapper.has-sidebar .curtain {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@ -218,17 +221,18 @@ watchPostEffect(() => {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
content: "";
|
||||
background: linear-gradient(var(--vp-c-bg), transparent 70%);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
@media (width >= 1440px) {
|
||||
.navbar-wrapper.has-sidebar .curtain {
|
||||
width: calc(
|
||||
100% -
|
||||
width:
|
||||
calc(
|
||||
100% -
|
||||
((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))
|
||||
);
|
||||
);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -16,7 +16,7 @@ const theme = useThemeLocaleData()
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
@media (width >= 1280px) {
|
||||
.navbar-appearance {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -55,13 +55,13 @@ const hasExtraContent = computed(
|
||||
margin-right: -12px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.navbar-extra {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
@media (width >= 1280px) {
|
||||
.navbar-extra {
|
||||
display: none;
|
||||
}
|
||||
@ -69,9 +69,9 @@ const hasExtraContent = computed(
|
||||
|
||||
.trans-title {
|
||||
padding: 0 24px 0 12px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
|
||||
@ -27,13 +27,13 @@ defineEmits<(e: 'click') => void>()
|
||||
<style scoped>
|
||||
.navbar-hamburger {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: var(--vp-nav-height);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.navbar-hamburger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -25,7 +25,7 @@ const theme = useThemeLocaleData()
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.navbar-menu {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -33,9 +33,9 @@ const page = usePageData()
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
line-height: var(--vp-nav-height);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: var(--vp-nav-height);
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@ -5,19 +5,14 @@
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.navbar-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.navbar-search {
|
||||
flex-grow: 1;
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.navbar-search {
|
||||
padding-left: 32px;
|
||||
}
|
||||
@ -29,6 +24,51 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (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 (width >= 768px) {
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
top: 1px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 8px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
.DocSearch-Button .DocSearch-Button-Placeholder {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
.DocSearch-Button .DocSearch-Button-Keys {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* plugin-docsearch */
|
||||
.DocSearch {
|
||||
--docsearch-primary-color: var(--vp-c-brand-1);
|
||||
@ -55,12 +95,12 @@
|
||||
|
||||
.navbar-search .DocSearch-Button {
|
||||
display: flex;
|
||||
justify-content: center !important;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
justify-content: center !important;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: var(--docsearch-searchbox-background);
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
@ -82,23 +122,6 @@
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-search .DocSearch-Button {
|
||||
justify-content: flex-start;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 0 10px 0 12px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
}
|
||||
|
||||
.navbar-search .DocSearch-Button:hover {
|
||||
border-color: var(--vp-c-brand-1);
|
||||
background: var(--docsearch-searchbox-focus-background);
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -109,7 +132,7 @@
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--vp-c-text-1);
|
||||
fill: currentColor;
|
||||
fill: currentcolor;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
@ -117,20 +140,10 @@
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.DocSearch-Button .DocSearch-Search-Icon {
|
||||
top: 1px;
|
||||
margin-right: 8px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Placeholder {
|
||||
display: none;
|
||||
margin-top: 2px;
|
||||
padding: 0 16px 0 0;
|
||||
margin-top: 2px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
@ -141,67 +154,58 @@
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.DocSearch-Button .DocSearch-Button-Placeholder {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Keys {
|
||||
/*rtl:ignore*/
|
||||
/* rtl:ignore */
|
||||
direction: ltr;
|
||||
display: none;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.DocSearch-Button .DocSearch-Button-Keys {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key {
|
||||
display: block;
|
||||
margin: 2px 0 0 0;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
/*rtl:begin:ignore*/
|
||||
border-right: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
padding-left: 6px;
|
||||
/*rtl:end:ignore*/
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
|
||||
/* rtl:end:ignore */
|
||||
min-width: 0;
|
||||
height: 22px;
|
||||
line-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 {
|
||||
/*rtl:begin:ignore*/
|
||||
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;
|
||||
padding-left: 2px;
|
||||
padding-right: 6px;
|
||||
/*rtl:end:ignore*/
|
||||
|
||||
/* rtl:end:ignore */
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child {
|
||||
font-size: 1px;
|
||||
letter-spacing: -12px;
|
||||
color: transparent;
|
||||
letter-spacing: -12px;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child:after {
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child::after {
|
||||
font-size: 12px;
|
||||
letter-spacing: normal;
|
||||
color: var(--docsearch-muted-color);
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.DocSearch-Button .DocSearch-Button-Key:first-child > * {
|
||||
@ -213,8 +217,8 @@
|
||||
}
|
||||
|
||||
.DocSearch-Form {
|
||||
border: 1px solid var(--vp-c-brand-1);
|
||||
background-color: var(--vp-c-white);
|
||||
border: 1px solid var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.dark .DocSearch-Form {
|
||||
@ -228,5 +232,6 @@
|
||||
padding: 0 0.4rem 0 1.555rem;
|
||||
background-position: 0.5rem 0.4rem;
|
||||
}
|
||||
|
||||
/* plugin-search */
|
||||
</style>
|
||||
|
||||
@ -18,7 +18,7 @@ const theme = useThemeLocaleData()
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
@media (width >= 1280px) {
|
||||
.navbar-social-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -27,12 +27,12 @@ const { hasSidebar } = useSidebar()
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid transparent;
|
||||
width: 100%;
|
||||
height: var(--vp-nav-height);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
@ -40,7 +40,7 @@ const { hasSidebar } = useSidebar()
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.title {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@ -51,7 +51,7 @@ const { hasSidebar } = useSidebar()
|
||||
}
|
||||
|
||||
:deep(.logo) {
|
||||
margin-right: 8px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -33,7 +33,7 @@ const { currentLang, localeLinks } = useLangs()
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
@media (width >= 1280px) {
|
||||
.navbar-translations {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -42,9 +42,9 @@ const { currentLang, localeLinks } = useLangs()
|
||||
|
||||
.title {
|
||||
padding: 0 24px 0 12px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -33,19 +33,18 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
|
||||
<style scoped>
|
||||
.nav-screen {
|
||||
position: fixed;
|
||||
top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px));
|
||||
/*rtl:ignore*/
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/*rtl:ignore*/
|
||||
left: 0;
|
||||
padding: 0 32px;
|
||||
inset: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) 0 0 0;
|
||||
|
||||
/* rtl:ignore */
|
||||
|
||||
/* rtl:ignore */
|
||||
width: 100%;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
background-color: var(--vp-nav-screen-bg-color);
|
||||
padding: 0 32px;
|
||||
overflow-y: auto;
|
||||
transition: background-color 0.5s;
|
||||
pointer-events: auto;
|
||||
background-color: var(--vp-nav-screen-bg-color);
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
.nav-screen.fade-enter-active,
|
||||
@ -68,16 +67,16 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.nav-screen {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
padding: 24px 0 96px;
|
||||
max-width: 288px;
|
||||
padding: 24px 0 96px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.menu + .translations,
|
||||
|
||||
@ -17,19 +17,19 @@ const theme = useThemeLocaleData()
|
||||
<style scoped>
|
||||
.nav-screen-appearance {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
justify-content: space-between;
|
||||
padding: 12px 14px 12px 16px;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
transition: var(--t-color);
|
||||
transition-property: background-color;
|
||||
}
|
||||
|
||||
.text {
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -60,9 +60,9 @@ function toggle() {
|
||||
|
||||
<style scoped>
|
||||
.nav-screen-menu-group {
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
height: 48px;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
transition: border-color 0.5s;
|
||||
}
|
||||
|
||||
@ -75,8 +75,8 @@ function toggle() {
|
||||
}
|
||||
|
||||
.nav-screen-menu-group.open {
|
||||
padding-bottom: 10px;
|
||||
height: auto;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.nav-screen-menu-group.open .button {
|
||||
@ -85,19 +85,19 @@ function toggle() {
|
||||
}
|
||||
|
||||
.nav-screen-menu-group.open .button-icon {
|
||||
/*rtl:ignore*/
|
||||
/* rtl:ignore */
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 4px 11px 0;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
line-height: 24px;
|
||||
padding: 12px 4px 11px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
@ -120,7 +120,7 @@ function toggle() {
|
||||
}
|
||||
|
||||
.group:first-child {
|
||||
padding-top: 0px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.group + .group,
|
||||
|
||||
@ -26,9 +26,9 @@ const closeScreen = inject('close-screen') as () => void
|
||||
.nav-screen-menu-group-link {
|
||||
display: block;
|
||||
margin-left: 12px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@ -31,9 +31,9 @@ defineProps<{
|
||||
}
|
||||
|
||||
.title {
|
||||
line-height: 32px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@ -21,12 +21,12 @@ const closeScreen = inject('close-screen') as () => void
|
||||
<style scoped>
|
||||
.nav-screen-menu-link {
|
||||
display: block;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
padding: 12px 0 11px;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: var(--vp-c-text-1);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
transition:
|
||||
border-color 0.25s,
|
||||
color 0.25s;
|
||||
|
||||
@ -56,7 +56,7 @@ function toggle() {
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.icon.lang {
|
||||
@ -72,8 +72,8 @@ function toggle() {
|
||||
}
|
||||
|
||||
.link {
|
||||
line-height: 32px;
|
||||
font-size: 13px;
|
||||
line-height: 32px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -29,8 +29,9 @@ provide('close-screen', closeScreen)
|
||||
<style scoped>
|
||||
.nav-wrapper {
|
||||
position: relative;
|
||||
top: var(--vp-layout-top-height, 0px);
|
||||
/*rtl:ignore*/
|
||||
top: var(--vp-layout-top-height, 0);
|
||||
|
||||
/* rtl:ignore */
|
||||
left: 0;
|
||||
z-index: var(--vp-z-index-nav);
|
||||
width: 100%;
|
||||
@ -43,11 +44,11 @@ provide('close-screen', closeScreen)
|
||||
}
|
||||
|
||||
.nav-wrapper.fixed :deep(.navbar-wrapper) {
|
||||
border-bottom-color: var(--vp-c-gutter);
|
||||
background-color: var(--vp-nav-bg-color);
|
||||
border-bottom-color: var(--vp-c-gutter);
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.nav-wrapper {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
@ -55,26 +55,17 @@ onContentUpdated(() => zoom?.refresh())
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.plume-page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
.plume-page {
|
||||
padding: 32px 24px 96px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* .plume-page.is-blog {
|
||||
padding-top: calc(var(--vp-nav-height) + 32px);
|
||||
} */
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.plume-page {
|
||||
padding: 48px 32px 128px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.plume-page,
|
||||
.plume-page.is-blog {
|
||||
padding: 32px 32px 0;
|
||||
@ -91,7 +82,7 @@ onContentUpdated(() => zoom?.refresh())
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
@media (width >= 1280px) {
|
||||
.plume-page .container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -102,7 +93,7 @@ onContentUpdated(() => zoom?.refresh())
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
@media (width >= 1440px) {
|
||||
.plume-page:not(.has-sidebar) .content {
|
||||
max-width: 784px;
|
||||
}
|
||||
@ -112,33 +103,58 @@ onContentUpdated(() => zoom?.refresh())
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
@media (width >= 960px) {
|
||||
.content {
|
||||
padding: 0 32px 128px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 1280px) {
|
||||
.content {
|
||||
order: 1;
|
||||
min-width: 640px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.plume-page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.plume-page {
|
||||
width: 100%;
|
||||
padding: 32px 24px 96px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.aside {
|
||||
position: relative;
|
||||
display: none;
|
||||
order: 2;
|
||||
flex-grow: 1;
|
||||
padding-left: 32px;
|
||||
order: 2;
|
||||
width: 100%;
|
||||
max-width: 256px;
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
.aside-container {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
margin-top: calc(
|
||||
(var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1 - 32px
|
||||
);
|
||||
padding-top: calc(
|
||||
var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px
|
||||
);
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding-top:
|
||||
calc(
|
||||
var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px
|
||||
);
|
||||
margin-top:
|
||||
calc(
|
||||
(var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1 - 32px
|
||||
);
|
||||
overflow: hidden auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
@ -158,30 +174,17 @@ onContentUpdated(() => zoom?.refresh())
|
||||
.aside-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: calc(
|
||||
100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px)
|
||||
);
|
||||
min-height:
|
||||
calc(
|
||||
100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px)
|
||||
);
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.content {
|
||||
padding: 0 32px 128px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.content {
|
||||
order: 1;
|
||||
margin: 0;
|
||||
min-width: 640px;
|
||||
}
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
|
||||
@ -81,10 +81,10 @@ function handlePrint() {
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
border-left: 1px solid var(--vp-c-divider);
|
||||
padding-left: 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border-left: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.outline-marker {
|
||||
@ -92,10 +92,10 @@ function handlePrint() {
|
||||
top: 32px;
|
||||
left: -1px;
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
width: 2px;
|
||||
height: 18px;
|
||||
background-color: var(--vp-c-brand-1);
|
||||
opacity: 0;
|
||||
transition:
|
||||
top 0.25s cubic-bezier(0, 1, 0.5, 1),
|
||||
background-color 0.5s,
|
||||
@ -105,15 +105,16 @@ function handlePrint() {
|
||||
.outline-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
letter-spacing: 0.4px;
|
||||
line-height: 28px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
.outline-title .icon {
|
||||
margin-left: 4px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-left: 4px;
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -31,11 +31,11 @@ defineProps<{
|
||||
|
||||
.outline-link {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
line-height: 28px;
|
||||
color: var(--vp-c-text-2);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
|
||||
@ -76,11 +76,11 @@ const showFooter = computed(() => {
|
||||
margin-top: 96px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
@media (width >= 640px) {
|
||||
.edit-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
@ -88,11 +88,11 @@ const showFooter = computed(() => {
|
||||
.edit-link-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 0;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
color: var(--vp-c-brand-1);
|
||||
border: 0;
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@ -107,36 +107,36 @@ const showFooter = computed(() => {
|
||||
}
|
||||
|
||||
.edit-link-icon {
|
||||
margin-right: 8px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: currentColor;
|
||||
margin-right: 8px;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.last-updated-text {
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
@media (width >= 640px) {
|
||||
.last-updated-text {
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.contributors {
|
||||
margin-top: -10px;
|
||||
padding-bottom: 6px;
|
||||
line-height: 32px;
|
||||
margin-top: -10px;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
@media (width >= 640px) {
|
||||
.contributors {
|
||||
text-align: right;
|
||||
}
|
||||
@ -150,20 +150,21 @@ const showFooter = computed(() => {
|
||||
|
||||
.contributors-info {
|
||||
color: var(--vp-c-text-2);
|
||||
|
||||
.contributor {
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
}
|
||||
|
||||
.prev-next {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
margin-top: 10px;
|
||||
padding-top: 24px;
|
||||
display: grid;
|
||||
grid-row-gap: 8px;
|
||||
padding-top: 24px;
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
@media (width >= 640px) {
|
||||
.prev-next {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-column-gap: 16px;
|
||||
@ -172,11 +173,11 @@ const showFooter = computed(() => {
|
||||
|
||||
.pager-link {
|
||||
display: block;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 11px 16px 13px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 11px 16px 13px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
|
||||
@ -191,17 +192,17 @@ const showFooter = computed(() => {
|
||||
|
||||
.desc {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
color: var(--vp-c-brand-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@ -72,11 +72,11 @@ const hasMeta = computed(() => readingTime.value.times || tags.value.length || c
|
||||
|
||||
<style scoped>
|
||||
.page-category-wrapper {
|
||||
padding-left: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 2rem;
|
||||
border-left: solid 4px var(--vp-c-brand-1);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.page-category-wrapper .category {
|
||||
@ -94,23 +94,24 @@ const hasMeta = computed(() => readingTime.value.times || tags.value.length || c
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.page-title.padding {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.page-meta-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
padding: 1rem 0 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 14px;
|
||||
color: var(--vp-c-text-3);
|
||||
border-bottom: solid 1px var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@ -128,8 +129,8 @@ const hasMeta = computed(() => readingTime.value.times || tags.value.length || c
|
||||
|
||||
.page-meta-wrapper .tag {
|
||||
display: inline-block;
|
||||
padding: 3px;
|
||||
line-height: 1;
|
||||
padding: 3px 3px;
|
||||
color: var(--vp-c-text-2);
|
||||
background-color: var(--vp-c-mute);
|
||||
border-radius: 4px;
|
||||
@ -149,9 +150,9 @@ const hasMeta = computed(() => readingTime.value.times || tags.value.length || c
|
||||
|
||||
.page-meta-wrapper .create-time {
|
||||
flex: 1;
|
||||
min-width: 110px;
|
||||
justify-content: right;
|
||||
text-align: right;
|
||||
min-width: 110px;
|
||||
margin-right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -65,6 +65,12 @@ const createTime = computed(() => {
|
||||
.post-item {
|
||||
padding-top: 1rem;
|
||||
margin: 0 1.75rem 2rem;
|
||||
|
||||
@media (width >= 960px) {
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
// border-bottom: solid 1px var(--vp-c-divider);
|
||||
|
||||
&:last-of-type {
|
||||
@ -74,10 +80,10 @@ const createTime = computed(() => {
|
||||
h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
transition: color var(--t-color);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
h3:hover {
|
||||
@ -88,34 +94,28 @@ const createTime = computed(() => {
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.sticky {
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
padding: 3px 6px;
|
||||
margin-left: 0.5rem;
|
||||
border-radius: 4px;
|
||||
line-height: 1;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
@ -148,9 +148,11 @@ const createTime = computed(() => {
|
||||
.plume-content :deep(p) {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.plume-content :deep(p:first-of-type) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.plume-content :deep(p:last-of-type) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@ -31,8 +31,8 @@ const {
|
||||
|
||||
<style scoped>
|
||||
.post-list {
|
||||
padding-top: 2rem;
|
||||
flex: 1;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
@ -43,10 +43,10 @@ const {
|
||||
}
|
||||
|
||||
.btn {
|
||||
color: var(--vp-c-brand-1);
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--vp-c-brand-1);
|
||||
padding: 0 4px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-brand-1);
|
||||
border: 1px solid var(--vp-c-brand-1);
|
||||
border-radius: 4px;
|
||||
transition: all var(--t-color);
|
||||
}
|
||||
@ -56,16 +56,17 @@ const {
|
||||
background-color: var(--vp-c-brand-2);
|
||||
border-color: var(--vp-c-brand-2);
|
||||
}
|
||||
|
||||
.btn[disabled],
|
||||
.btn[disabled]:hover {
|
||||
color: var(--vp-c-gray-1);
|
||||
border-color: var(--vp-c-divider);
|
||||
background-color: transparent;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
border-color: var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.page-info {
|
||||
color: var(--vp-c-text-3);
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -25,8 +25,8 @@ defineProps<{
|
||||
|
||||
<style scoped>
|
||||
.post-list {
|
||||
margin-top: 32px;
|
||||
padding: 0 12px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.post-list li {
|
||||
@ -38,12 +38,12 @@ defineProps<{
|
||||
}
|
||||
|
||||
.post-list .post-title {
|
||||
display: -webkit-box;
|
||||
flex: 1;
|
||||
margin-right: 14px;
|
||||
overflow: hidden;
|
||||
font-weight: 600;
|
||||
transition: all var(--t-color);
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
line-clamp: 1;
|
||||
@ -57,6 +57,7 @@ defineProps<{
|
||||
.post-list li:hover .post-title {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.post-list li:hover .post-time {
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
@ -58,74 +58,75 @@ watch(
|
||||
<style scoped>
|
||||
.sidebar-wrapper {
|
||||
position: fixed;
|
||||
top: var(--vp-layout-top-height, 0px);
|
||||
top: var(--vp-layout-top-height, 0);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: var(--vp-z-index-sidebar);
|
||||
padding: 32px 32px 96px;
|
||||
width: calc(100vw - 64px);
|
||||
max-width: 320px;
|
||||
padding: 32px 32px 96px;
|
||||
overflow: hidden auto;
|
||||
background-color: var(--vp-sidebar-bg-color);
|
||||
opacity: 0;
|
||||
box-shadow: var(--vp-c-shadow-3);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 0.5s,
|
||||
transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.sidebar-wrapper.open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
transition:
|
||||
opacity 0.25s,
|
||||
transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.dark .sidebar-wrapper {
|
||||
box-shadow: var(--vp-shadow-1);
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.sidebar-wrapper {
|
||||
z-index: 1;
|
||||
padding-top: var(--vp-nav-height);
|
||||
width: var(--vp-sidebar-width);
|
||||
max-width: 100%;
|
||||
background-color: var(--vp-sidebar-bg-color);
|
||||
opacity: 1;
|
||||
padding-top: var(--vp-nav-height);
|
||||
visibility: visible;
|
||||
background-color: var(--vp-sidebar-bg-color);
|
||||
box-shadow: none;
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
@media (width >= 1440px) {
|
||||
.sidebar-wrapper {
|
||||
padding-left: max(
|
||||
32px,
|
||||
calc((100% - (var(--vp-layout-max-width) - 64px)) / 2)
|
||||
);
|
||||
width: calc(
|
||||
(100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) -
|
||||
width:
|
||||
calc(
|
||||
(100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) -
|
||||
32px
|
||||
);
|
||||
);
|
||||
padding-left:
|
||||
max(
|
||||
32px,
|
||||
calc((100% - (var(--vp-layout-max-width) - 64px)) / 2)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.curtain {
|
||||
position: sticky;
|
||||
top: -64px;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
height: var(--vp-nav-height);
|
||||
margin-top: calc(var(--vp-nav-height) * -1);
|
||||
margin-right: -32px;
|
||||
margin-left: -32px;
|
||||
height: var(--vp-nav-height);
|
||||
background-color: var(--vp-sidebar-bg-color);
|
||||
}
|
||||
}
|
||||
@ -135,14 +136,14 @@ watch(
|
||||
}
|
||||
|
||||
.group + .group {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
@media (width >= 960px) {
|
||||
.group {
|
||||
padding-top: 10px;
|
||||
width: calc(var(--vp-sidebar-width) - 64px);
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -147,8 +147,8 @@ function onCaretClick() {
|
||||
.text {
|
||||
flex-grow: 1;
|
||||
padding: 4px 0;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
@ -195,11 +195,11 @@ function onCaretClick() {
|
||||
|
||||
.caret {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: -7px;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: -7px;
|
||||
color: var(--vp-c-text-3);
|
||||
cursor: pointer;
|
||||
transition: color 0.25s;
|
||||
@ -216,9 +216,9 @@ function onCaretClick() {
|
||||
.caret-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: currentColor;
|
||||
transform: rotate(90deg);
|
||||
fill: currentcolor;
|
||||
transition: transform 0.25s;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.sidebar-item.collapsed .caret-icon {
|
||||
@ -230,8 +230,8 @@ function onCaretClick() {
|
||||
.sidebar-item.level-3 .items,
|
||||
.sidebar-item.level-4 .items,
|
||||
.sidebar-item.level-5 .items {
|
||||
border-left: 1px solid var(--vp-c-divider);
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.sidebar-item.collapsed .items {
|
||||
|
||||
@ -44,25 +44,25 @@ function focusOnTargetAnchor({ target }: Event) {
|
||||
.skip-link {
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
padding: 8px 16px;
|
||||
z-index: 999;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
color: var(--vp-c-brand-1);
|
||||
box-shadow: var(--vp-shadow-3);
|
||||
text-decoration: none;
|
||||
background-color: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--vp-shadow-3);
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
height: auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
clip: auto;
|
||||
clip-path: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
@media (width >= 1280px) {
|
||||
.skip-link {
|
||||
top: 14px;
|
||||
left: 16px;
|
||||
|
||||
@ -29,8 +29,8 @@ const svg = computed(() => {
|
||||
<style scoped>
|
||||
.social-link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: var(--vp-c-text-2);
|
||||
@ -45,6 +45,6 @@ const svg = computed(() => {
|
||||
.social-link > :deep(svg) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: currentColor;
|
||||
fill: currentcolor;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -11,13 +11,13 @@
|
||||
<style scoped>
|
||||
.switch-wrapper {
|
||||
position: relative;
|
||||
border-radius: 11px;
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid var(--vp-input-border-color);
|
||||
background-color: var(--vp-input-switch-bg-color);
|
||||
border: 1px solid var(--vp-input-border-color);
|
||||
border-radius: 11px;
|
||||
transition:
|
||||
border-color 0.25s ease,
|
||||
background-color 0.25s ease;
|
||||
@ -30,12 +30,13 @@
|
||||
.check {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
/*rtl:ignore*/
|
||||
|
||||
/* rtl:ignore */
|
||||
left: 1px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--vp-c-neutral-inverse);
|
||||
border-radius: 50%;
|
||||
box-shadow: var(--vp-shadow-1);
|
||||
transition: transform 0.25s;
|
||||
}
|
||||
@ -45,8 +46,8 @@
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.icon :deep(svg) {
|
||||
|
||||
@ -69,7 +69,6 @@ function useAppearance() {
|
||||
checked.value = dark
|
||||
classList[dark ? 'add' : 'remove']('dark')
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const _ = window.getComputedStyle(css).opacity
|
||||
document.head.removeChild(css)
|
||||
}
|
||||
@ -112,7 +111,7 @@ watch(checked, (newIsDark) => {
|
||||
}
|
||||
|
||||
.dark .switch-appearance :deep(.check) {
|
||||
/*rtl:ignore*/
|
||||
/* rtl:ignore */
|
||||
transform: translateX(18px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -37,69 +37,75 @@ const { tags: tagsLink } = useBlogExtract()
|
||||
|
||||
<style scoped>
|
||||
.tags-wrapper {
|
||||
padding: 32px 24px 168px;
|
||||
flex: 1;
|
||||
padding: 32px 24px 168px;
|
||||
}
|
||||
|
||||
.tags-wrapper.has-list {
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
|
||||
.tags-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-brand-1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tags-title .icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.tags .tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
word-wrap: break-word;
|
||||
margin: 8px;
|
||||
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);
|
||||
border: solid 1px var(--vp-tag-color);
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
word-wrap: break-word;
|
||||
cursor: pointer;
|
||||
border: solid 1px var(--vp-tag-color);
|
||||
border-radius: 4px;
|
||||
transition: all var(--t-color);
|
||||
}
|
||||
|
||||
.tag-title {
|
||||
padding-bottom: 8px;
|
||||
margin: 20px 12px -10px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
padding-bottom: 8px;
|
||||
margin: 20px 12px -10px 12px;
|
||||
}
|
||||
|
||||
.tag-count {
|
||||
display: inline-block;
|
||||
border-left: 1px solid var(--vp-tag-color);
|
||||
padding-left: 6px;
|
||||
margin-left: 4px;
|
||||
color: var(--vp-tag-color);
|
||||
border-left: 1px solid var(--vp-tag-color);
|
||||
transition: all var(--t-color);
|
||||
}
|
||||
|
||||
.tags .tag:hover,
|
||||
.tags .tag.active {
|
||||
background-color: var(--vp-tag-color);
|
||||
color: var(--vp-c-bg);
|
||||
background-color: var(--vp-tag-color);
|
||||
}
|
||||
|
||||
.tags .tag:hover .tag-count,
|
||||
|
||||
@ -52,10 +52,10 @@ function linkTo(e: Event) {
|
||||
<style scoped>
|
||||
.VPButton {
|
||||
display: inline-block;
|
||||
border: 1px solid transparent;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
border: 1px solid transparent;
|
||||
transition:
|
||||
color 0.25s,
|
||||
border-color 0.25s,
|
||||
@ -70,70 +70,70 @@ function linkTo(e: Event) {
|
||||
}
|
||||
|
||||
.VPButton.medium {
|
||||
border-radius: 20px;
|
||||
padding: 0 20px;
|
||||
line-height: 38px;
|
||||
font-size: 14px;
|
||||
line-height: 38px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.VPButton.big {
|
||||
border-radius: 24px;
|
||||
padding: 0 24px;
|
||||
line-height: 46px;
|
||||
font-size: 16px;
|
||||
line-height: 46px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.VPButton.brand {
|
||||
border-color: var(--vp-button-brand-border);
|
||||
color: var(--vp-button-brand-text);
|
||||
background-color: var(--vp-button-brand-bg);
|
||||
border-color: var(--vp-button-brand-border);
|
||||
}
|
||||
|
||||
.VPButton.brand:hover {
|
||||
border-color: var(--vp-button-brand-hover-border);
|
||||
color: var(--vp-button-brand-hover-text);
|
||||
background-color: var(--vp-button-brand-hover-bg);
|
||||
border-color: var(--vp-button-brand-hover-border);
|
||||
}
|
||||
|
||||
.VPButton.brand:active {
|
||||
border-color: var(--vp-button-brand-active-border);
|
||||
color: var(--vp-button-brand-active-text);
|
||||
background-color: var(--vp-button-brand-active-bg);
|
||||
border-color: var(--vp-button-brand-active-border);
|
||||
}
|
||||
|
||||
.VPButton.alt {
|
||||
border-color: var(--vp-button-alt-border);
|
||||
color: var(--vp-button-alt-text);
|
||||
background-color: var(--vp-button-alt-bg);
|
||||
border-color: var(--vp-button-alt-border);
|
||||
}
|
||||
|
||||
.VPButton.alt:hover {
|
||||
border-color: var(--vp-button-alt-hover-border);
|
||||
color: var(--vp-button-alt-hover-text);
|
||||
background-color: var(--vp-button-alt-hover-bg);
|
||||
border-color: var(--vp-button-alt-hover-border);
|
||||
}
|
||||
|
||||
.VPButton.alt:active {
|
||||
border-color: var(--vp-button-alt-active-border);
|
||||
color: var(--vp-button-alt-active-text);
|
||||
background-color: var(--vp-button-alt-active-bg);
|
||||
border-color: var(--vp-button-alt-active-border);
|
||||
}
|
||||
|
||||
.VPButton.sponsor {
|
||||
border-color: var(--vp-button-sponsor-border);
|
||||
color: var(--vp-button-sponsor-text);
|
||||
background-color: var(--vp-button-sponsor-bg);
|
||||
border-color: var(--vp-button-sponsor-border);
|
||||
}
|
||||
|
||||
.VPButton.sponsor:hover {
|
||||
border-color: var(--vp-button-sponsor-hover-border);
|
||||
color: var(--vp-button-sponsor-hover-text);
|
||||
background-color: var(--vp-button-sponsor-hover-bg);
|
||||
border-color: var(--vp-button-sponsor-hover-border);
|
||||
}
|
||||
|
||||
.VPButton.sponsor:active {
|
||||
border-color: var(--vp-button-sponsor-active-border);
|
||||
color: var(--vp-button-sponsor-active-text);
|
||||
background-color: var(--vp-button-sponsor-active-bg);
|
||||
border-color: var(--vp-button-sponsor-active-border);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -31,9 +31,9 @@ const { hasSidebar } = useSidebar()
|
||||
.plume-footer {
|
||||
position: relative;
|
||||
z-index: var(--vp-z-index-footer);
|
||||
border-top: 1px solid var(--vp-c-gutter);
|
||||
padding: 32px 24px;
|
||||
background-color: var(--vp-c-bg);
|
||||
border-top: 1px solid var(--vp-c-gutter);
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
@ -54,23 +54,23 @@ const { hasSidebar } = useSidebar()
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.plume-footer {
|
||||
padding: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: var(--vp-layout-max-width);
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.message,
|
||||
.copyright {
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
|
||||
@ -18,13 +18,13 @@ withDefaults(defineProps<Props>(), {
|
||||
<style scoped>
|
||||
.badge-view {
|
||||
display: inline-block;
|
||||
margin-left: 2px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 12px;
|
||||
padding: 0 10px;
|
||||
line-height: 22px;
|
||||
margin-left: 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 12px;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
@ -32,11 +32,13 @@ h1 .badge-view {
|
||||
margin-top: 4px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
h2 .badge-view {
|
||||
margin-top: 3px;
|
||||
padding: 0 8px;
|
||||
margin-top: 3px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
h3 .badge-view {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -44,31 +46,31 @@ h3 .badge-view {
|
||||
h4 .badge-view,
|
||||
h5 .badge-view,
|
||||
h6 .badge-view {
|
||||
vertical-align: middle;
|
||||
line-height: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.badge-view.info {
|
||||
border-color: var(--vp-badge-info-border);
|
||||
color: var(--vp-badge-info-text);
|
||||
background-color: var(--vp-badge-info-bg);
|
||||
border-color: var(--vp-badge-info-border);
|
||||
}
|
||||
|
||||
.badge-view.tip {
|
||||
border-color: var(--vp-badge-tip-border);
|
||||
color: var(--vp-badge-tip-text);
|
||||
background-color: var(--vp-badge-tip-bg);
|
||||
border-color: var(--vp-badge-tip-border);
|
||||
}
|
||||
|
||||
.badge-view.warning {
|
||||
border-color: var(--vp-badge-warning-border);
|
||||
color: var(--vp-badge-warning-text);
|
||||
background-color: var(--vp-badge-warning-bg);
|
||||
border-color: var(--vp-badge-warning-border);
|
||||
}
|
||||
|
||||
.badge-view.danger {
|
||||
border-color: var(--vp-badge-danger-border);
|
||||
color: var(--vp-badge-danger-text);
|
||||
background-color: var(--vp-badge-danger-bg);
|
||||
border-color: var(--vp-badge-danger-border);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,11 +9,11 @@ import IconExternalLink from '../icons/IconExternalLink.vue'
|
||||
<style scoped>
|
||||
.external-icon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: var(--vp-c-text-3);
|
||||
vertical-align: middle;
|
||||
top: 1px;
|
||||
display: inline-block;
|
||||
width: 0.8em;
|
||||
height: 0.8em;
|
||||
color: var(--vp-c-text-3);
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,3 +8,4 @@ export * from './page.js'
|
||||
export * from './readingTime.js'
|
||||
export * from './blog.js'
|
||||
export * from './locale.js'
|
||||
export * from './useRouteQuery.js'
|
||||
|
||||
@ -46,36 +46,36 @@ const themeData = useThemeLocaleData()
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.not-found {
|
||||
padding: 96px 32px 168px;
|
||||
}
|
||||
}
|
||||
|
||||
.code {
|
||||
line-height: 64px;
|
||||
font-size: 64px;
|
||||
font-weight: 600;
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-top: 12px;
|
||||
letter-spacing: 2px;
|
||||
line-height: 20px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 24px auto 18px;
|
||||
width: 64px;
|
||||
height: 1px;
|
||||
margin: 24px auto 18px;
|
||||
background-color: var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.quote {
|
||||
margin: 0 auto;
|
||||
max-width: 256px;
|
||||
margin: 0 auto;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
@ -87,19 +87,19 @@ const themeData = useThemeLocaleData()
|
||||
|
||||
.link {
|
||||
display: inline-block;
|
||||
border: 1px solid var(--vp-c-brand);
|
||||
border-radius: 16px;
|
||||
padding: 3px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-brand);
|
||||
border: 1px solid var(--vp-c-brand);
|
||||
border-radius: 16px;
|
||||
transition:
|
||||
border-color 0.25s,
|
||||
color 0.25s;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
border-color: var(--vp-c-brand-dark);
|
||||
color: var(--vp-c-brand-dark);
|
||||
border-color: var(--vp-c-brand-dark);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,19 +9,19 @@ html:not(.dark) .vp-code span {
|
||||
.plume-content {
|
||||
pre {
|
||||
padding: 1.3rem 1.5rem;
|
||||
margin: 0 0 0.85rem 0;
|
||||
border-radius: 6px;
|
||||
margin: 0 0 0.85rem;
|
||||
overflow: auto;
|
||||
font-size: 14px;
|
||||
border-radius: 6px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--vp-c-brand-1) var(--vp-c-border);
|
||||
font-size: 14px;
|
||||
|
||||
code {
|
||||
color: #fff;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
overflow-wrap: unset;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
overflow-wrap: unset;
|
||||
-webkit-font-smoothing: auto;
|
||||
-moz-osx-font-smoothing: auto;
|
||||
}
|
||||
@ -32,26 +32,26 @@ html:not(.dark) .vp-code span {
|
||||
}
|
||||
|
||||
.code-tabs {
|
||||
.div[class*='language-'] {
|
||||
.div[class*="language-"] {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div[class*='language-'] {
|
||||
div[class*="language-"] {
|
||||
position: relative;
|
||||
background-color: var(--vp-code-block-bg);
|
||||
border-radius: 6px;
|
||||
|
||||
&::before {
|
||||
content: attr(data-ext);
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 0.8em;
|
||||
right: 1em;
|
||||
z-index: 3;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-code-line-number-color);
|
||||
content: attr(data-ext);
|
||||
}
|
||||
|
||||
code {
|
||||
@ -60,20 +60,21 @@ div[class*='language-'] {
|
||||
}
|
||||
|
||||
pre {
|
||||
// force override the background color to be compatible with shiki
|
||||
background: transparent !important;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
// force override the background color to be compatible with shiki
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.highlight-lines {
|
||||
user-select: none;
|
||||
padding-top: 1.3rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-top: 1.3rem;
|
||||
line-height: 1.5;
|
||||
user-select: none;
|
||||
|
||||
.highlight-line {
|
||||
background-color: var(--vp-c-default-soft);
|
||||
@ -91,19 +92,19 @@ div[class*='language-'] {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
height: 100%;
|
||||
content: " ";
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-left: 2rem;
|
||||
padding-left: 1rem;
|
||||
margin-left: 2rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@ -111,40 +112,40 @@ div[class*='language-'] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 2rem;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
color: var(--vp-code-line-number-color);
|
||||
padding-top: 1.25rem;
|
||||
line-height: var(--vp-code-line-height);
|
||||
color: var(--vp-code-line-number-color);
|
||||
text-align: center;
|
||||
counter-reset: line-number;
|
||||
border-right: var(--vp-code-block-divider-color) 1px solid;
|
||||
|
||||
.line-number {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
user-select: none;
|
||||
height: 1.5rem;
|
||||
user-select: none;
|
||||
|
||||
&::before {
|
||||
counter-increment: line-number;
|
||||
content: counter(line-number);
|
||||
font-size: 0.85em;
|
||||
content: counter(line-number);
|
||||
counter-increment: line-number;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] code .highlighted {
|
||||
.plume-content [class*="language-"] code .highlighted {
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
width: calc(100% + 2 * 24px);
|
||||
padding: 0 24px;
|
||||
margin: 0 -24px;
|
||||
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;
|
||||
z-index: 2;
|
||||
|
||||
&.error {
|
||||
background-color: var(--vp-code-line-error-color);
|
||||
@ -155,12 +156,12 @@ div[class*='language-'] {
|
||||
}
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] code .diff {
|
||||
transition: background-color 0.5s;
|
||||
margin: 0 -24px;
|
||||
padding: 0 24px;
|
||||
width: calc(100% + 2 * 24px);
|
||||
.plume-content [class*="language-"] code .diff {
|
||||
display: inline-block;
|
||||
width: calc(100% + 2 * 24px);
|
||||
padding: 0 24px;
|
||||
margin: 0 -24px;
|
||||
transition: background-color 0.5s;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
@ -173,8 +174,8 @@ div[class*='language-'] {
|
||||
}
|
||||
|
||||
&.remove::before {
|
||||
content: '-';
|
||||
color: var(--vp-code-line-diff-remove-symbol-color);
|
||||
content: "-";
|
||||
transform: translateX(-6px);
|
||||
}
|
||||
|
||||
@ -183,13 +184,13 @@ div[class*='language-'] {
|
||||
}
|
||||
|
||||
&.add::before {
|
||||
content: '+';
|
||||
color: var(--vp-code-line-diff-add-symbol-color);
|
||||
content: "+";
|
||||
transform: translateX(-6px);
|
||||
}
|
||||
}
|
||||
|
||||
.plume-content [class*='language-'] .has-focused-lines .line:not(.has-focus) {
|
||||
.plume-content [class*="language-"] .has-focused-lines .line:not(.has-focus) {
|
||||
filter: blur(0.095rem);
|
||||
opacity: 0.7;
|
||||
transition:
|
||||
@ -197,27 +198,24 @@ div[class*='language-'] {
|
||||
opacity 0.35s;
|
||||
}
|
||||
|
||||
.plume-content
|
||||
[class*='language-']:hover
|
||||
.has-focused-lines
|
||||
.line:not(.has-focus) {
|
||||
.plume-content [class*="language-"]:hover .has-focused-lines .line:not(.has-focus) {
|
||||
filter: blur(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.code-tabs-nav {
|
||||
margin-bottom: 0rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// narrow mobile
|
||||
@media (max-width: 419px) {
|
||||
@media (width <= 419px) {
|
||||
.plume-content {
|
||||
div[class*='language-'] {
|
||||
div[class*="language-"] {
|
||||
margin: 0.85rem -1.5rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.hint-container div[class*='language-'] {
|
||||
.hint-container div[class*="language-"] {
|
||||
margin: 0.85rem -1rem 0.85rem -1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,18 +14,18 @@
|
||||
}
|
||||
|
||||
.plume-content h1 {
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 40px;
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.plume-content h2 {
|
||||
margin: 48px 0 16px;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
padding-top: 24px;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 32px;
|
||||
margin: 48px 0 16px;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
letter-spacing: -0.02em;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.plume-content h2:first-of-type {
|
||||
@ -34,15 +34,15 @@
|
||||
|
||||
.plume-content h3 {
|
||||
margin: 32px 0 0;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 28px;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.plume-content .header-anchor {
|
||||
float: left;
|
||||
margin-left: -0.87em;
|
||||
padding-right: 0.23em;
|
||||
margin-left: -0.87em;
|
||||
font-weight: 500;
|
||||
user-select: none;
|
||||
opacity: 0;
|
||||
@ -66,11 +66,11 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
.plume-content h1 {
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 40px;
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -100,9 +100,9 @@
|
||||
}
|
||||
|
||||
.plume-content blockquote {
|
||||
padding-left: 16px;
|
||||
margin: 16px 0;
|
||||
border-left: 2px solid var(--vp-c-divider);
|
||||
padding-left: 16px;
|
||||
transition: border-color 0.5s;
|
||||
}
|
||||
|
||||
@ -166,9 +166,9 @@
|
||||
|
||||
.plume-content table {
|
||||
display: block;
|
||||
border-collapse: collapse;
|
||||
margin: 20px 0;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.plume-content tr {
|
||||
@ -183,15 +183,15 @@
|
||||
|
||||
.plume-content th,
|
||||
.plume-content td {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.plume-content th {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
text-align: left;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
@ -263,9 +263,9 @@
|
||||
}
|
||||
|
||||
.plume-content :not(pre) > code {
|
||||
border-radius: 4px;
|
||||
padding: 3px 6px;
|
||||
background-color: var(--vp-code-bg);
|
||||
border-radius: 4px;
|
||||
transition:
|
||||
color 0.25s,
|
||||
background-color 0.5s;
|
||||
|
||||
@ -1,165 +1,239 @@
|
||||
/* webfont-marker-begin */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
|
||||
@import "https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap";
|
||||
|
||||
html body {
|
||||
font-synthesis: style;
|
||||
}
|
||||
|
||||
/* webfont-marker-end */
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: normal;
|
||||
font-named-instance: 'Regular';
|
||||
src: url('../fonts/inter-roman-cyrillic.woff2') format('woff2');
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-roman-cyrillic.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
font-named-instance: "Regular";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: normal;
|
||||
font-named-instance: 'Regular';
|
||||
src: url('../fonts/inter-roman-cyrillic-ext.woff2') format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-roman-cyrillic-ext.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range:
|
||||
U+0460-052F,
|
||||
U+1C80-1C88,
|
||||
U+20B4,
|
||||
U+2DE0-2DFF,
|
||||
U+A640-A69F,
|
||||
U+FE2E-FE2F;
|
||||
font-named-instance: "Regular";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: normal;
|
||||
font-named-instance: 'Regular';
|
||||
src: url('../fonts/inter-roman-greek.woff2') format('woff2');
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-roman-greek.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range: U+0370-03FF;
|
||||
font-named-instance: "Regular";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: normal;
|
||||
font-named-instance: 'Regular';
|
||||
src: url('../fonts/inter-roman-greek-ext.woff2') format('woff2');
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-roman-greek-ext.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range: U+1F00-1FFF;
|
||||
font-named-instance: "Regular";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: normal;
|
||||
font-named-instance: 'Regular';
|
||||
src: url('../fonts/inter-roman-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
|
||||
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
|
||||
U+FEFF, U+FFFD;
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-roman-latin.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range:
|
||||
U+0000-00FF,
|
||||
U+0131,
|
||||
U+0152-0153,
|
||||
U+02BB-02BC,
|
||||
U+02C6,
|
||||
U+02DA,
|
||||
U+02DC,
|
||||
U+2000-206F,
|
||||
U+2074,
|
||||
U+20AC,
|
||||
U+2122,
|
||||
U+2191,
|
||||
U+2193,
|
||||
U+2212,
|
||||
U+2215,
|
||||
U+FEFF,
|
||||
U+FFFD;
|
||||
font-named-instance: "Regular";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: normal;
|
||||
font-named-instance: 'Regular';
|
||||
src: url('../fonts/inter-roman-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
|
||||
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-roman-latin-ext.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range:
|
||||
U+0100-024F,
|
||||
U+0259,
|
||||
U+1E00-1EFF,
|
||||
U+2020,
|
||||
U+20A0-20AB,
|
||||
U+20AD-20CF,
|
||||
U+2113,
|
||||
U+2C60-2C7F,
|
||||
U+A720-A7FF;
|
||||
font-named-instance: "Regular";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: normal;
|
||||
font-named-instance: 'Regular';
|
||||
src: url('../fonts/inter-roman-vietnamese.woff2') format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
|
||||
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-roman-vietnamese.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range:
|
||||
U+0102-0103,
|
||||
U+0110-0111,
|
||||
U+0128-0129,
|
||||
U+0168-0169,
|
||||
U+01A0-01A1,
|
||||
U+01AF-01B0,
|
||||
U+1EA0-1EF9,
|
||||
U+20AB;
|
||||
font-named-instance: "Regular";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: italic;
|
||||
font-named-instance: 'Italic';
|
||||
src: url('../fonts/inter-italic-cyrillic.woff2') format('woff2');
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-italic-cyrillic.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
font-named-instance: "Italic";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: italic;
|
||||
font-named-instance: 'Italic';
|
||||
src: url('../fonts/inter-italic-cyrillic-ext.woff2') format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-italic-cyrillic-ext.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range:
|
||||
U+0460-052F,
|
||||
U+1C80-1C88,
|
||||
U+20B4,
|
||||
U+2DE0-2DFF,
|
||||
U+A640-A69F,
|
||||
U+FE2E-FE2F;
|
||||
font-named-instance: "Italic";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: italic;
|
||||
font-named-instance: 'Italic';
|
||||
src: url('../fonts/inter-italic-greek.woff2') format('woff2');
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-italic-greek.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range: U+0370-03FF;
|
||||
font-named-instance: "Italic";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: italic;
|
||||
font-named-instance: 'Italic';
|
||||
src: url('../fonts/inter-italic-greek-ext.woff2') format('woff2');
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-italic-greek-ext.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range: U+1F00-1FFF;
|
||||
font-named-instance: "Italic";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: italic;
|
||||
font-named-instance: 'Italic';
|
||||
src: url('../fonts/inter-italic-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
|
||||
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
|
||||
U+FEFF, U+FFFD;
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-italic-latin.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range:
|
||||
U+0000-00FF,
|
||||
U+0131,
|
||||
U+0152-0153,
|
||||
U+02BB-02BC,
|
||||
U+02C6,
|
||||
U+02DA,
|
||||
U+02DC,
|
||||
U+2000-206F,
|
||||
U+2074,
|
||||
U+20AC,
|
||||
U+2122,
|
||||
U+2191,
|
||||
U+2193,
|
||||
U+2212,
|
||||
U+2215,
|
||||
U+FEFF,
|
||||
U+FFFD;
|
||||
font-named-instance: "Italic";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: italic;
|
||||
font-named-instance: 'Italic';
|
||||
src: url('../fonts/inter-italic-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
|
||||
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-italic-latin-ext.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range:
|
||||
U+0100-024F,
|
||||
U+0259,
|
||||
U+1E00-1EFF,
|
||||
U+2020,
|
||||
U+20A0-20AB,
|
||||
U+20AD-20CF,
|
||||
U+2113,
|
||||
U+2C60-2C7F,
|
||||
U+A720-A7FF;
|
||||
font-named-instance: "Italic";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Inter var";
|
||||
font-style: italic;
|
||||
font-named-instance: 'Italic';
|
||||
src: url('../fonts/inter-italic-vietnamese.woff2') format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
|
||||
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||
font-weight: 100 900;
|
||||
src: url("../fonts/inter-italic-vietnamese.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
unicode-range:
|
||||
U+0102-0103,
|
||||
U+0110-0111,
|
||||
U+0128-0129,
|
||||
U+0168-0169,
|
||||
U+01A0-01A1,
|
||||
U+01AF-01B0,
|
||||
U+1EA0-1EF9,
|
||||
U+20AB;
|
||||
font-named-instance: "Italic";
|
||||
}
|
||||
|
||||
/* Chinese quotes rendering fix. 中英文弯引号共享 Unicode 码位，确保引号使用中文字体渲染 */
|
||||
@font-face {
|
||||
font-family: 'Chinese Quotes';
|
||||
src: local('PingFang SC Regular'), local('PingFang SC'), local('SimHei'),
|
||||
local('Source Han Sans SC');
|
||||
font-family: "Chinese Quotes";
|
||||
src:
|
||||
local("PingFang SC Regular"),
|
||||
local("PingFang SC"),
|
||||
local("SimHei"),
|
||||
local("Source Han Sans SC");
|
||||
unicode-range: U+2018, U+2019, U+201C, U+201D; /* 分别是 ‘’“” */
|
||||
}
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
@import '@vuepress/plugin-palette/palette';
|
||||
|
||||
@import 'vars';
|
||||
@import 'fonts';
|
||||
@import 'normalize';
|
||||
@import 'nprogress';
|
||||
@import 'utils';
|
||||
@import 'content';
|
||||
@import 'code';
|
||||
@import 'md-enhance';
|
||||
@import 'search';
|
||||
|
||||
@import '@vuepress/plugin-palette/style';
|
||||
@import "@vuepress/plugin-palette/palette";
|
||||
@import "vars";
|
||||
@import "fonts";
|
||||
@import "normalize";
|
||||
@import "nprogress";
|
||||
@import "utils";
|
||||
@import "content";
|
||||
@import "code";
|
||||
@import "md-enhance";
|
||||
@import "search";
|
||||
@import "@vuepress/plugin-palette/style";
|
||||
|
||||
@ -1,14 +1,20 @@
|
||||
.plume-content {
|
||||
@media (width <= 419px) {
|
||||
.vp-code-demo {
|
||||
margin: 8px -12px;
|
||||
}
|
||||
}
|
||||
|
||||
.hint-container {
|
||||
border-radius: 8px;
|
||||
padding: 16px 16px 8px;
|
||||
line-height: 24px;
|
||||
font-size: var(--vp-custom-block-font-size);
|
||||
line-height: 24px;
|
||||
color: var(--vp-c-text-2);
|
||||
border-radius: 8px;
|
||||
|
||||
.hint-container-title {
|
||||
font-weight: 600;
|
||||
margin-top: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p + p {
|
||||
@ -20,18 +26,18 @@
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
div[class*='language-'] {
|
||||
div[class*="language-"] {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
div[class*='language-'] code {
|
||||
div[class*="language-"] code {
|
||||
font-weight: 400;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.note {
|
||||
border-radius: 0;
|
||||
color: var(--vp-c-text-3);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.info {
|
||||
@ -56,8 +62,8 @@
|
||||
summary {
|
||||
margin: -1.5rem -1.5rem -1.1rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
color: var(--vp-c-text-1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
summary + p {
|
||||
@ -73,39 +79,46 @@
|
||||
code {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
[class*='language-'] .line-numbers {
|
||||
[class*="language-"] .line-numbers {
|
||||
padding-top: 21px;
|
||||
}
|
||||
|
||||
@ -117,8 +130,15 @@
|
||||
}
|
||||
|
||||
.vp-code-demo {
|
||||
border: solid 1px var(--vp-c-divider);
|
||||
overflow: hidden;
|
||||
border: solid 1px var(--vp-c-divider);
|
||||
|
||||
@media (width <= 419px) {
|
||||
.vp-code-demo-codes div[class*="language-"] {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
@ -155,38 +175,27 @@
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.vp-code-demo-codes div[class*='language-'] {
|
||||
.vp-code-demo-codes div[class*="language-"] {
|
||||
border-bottom: 2px dashed var(--vp-c-divider);
|
||||
|
||||
&:first-of-type {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vp-code-demo-codes div[class*='language-'] pre {
|
||||
.vp-code-demo-codes div[class*="language-"] pre {
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 419px) {
|
||||
.vp-code-demo-codes div[class*='language-'] {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 419px) {
|
||||
.vp-code-demo {
|
||||
margin: 8px -12px;
|
||||
}
|
||||
}
|
||||
|
||||
.task-list-container {
|
||||
padding-left: 0;
|
||||
|
||||
.task-list-item {
|
||||
input {
|
||||
width: 0;
|
||||
@ -194,30 +203,169 @@
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-left: 1.2em;
|
||||
}
|
||||
|
||||
input::before,
|
||||
input::after {
|
||||
content: none;
|
||||
position: absolute;
|
||||
top: -1em;
|
||||
left: 0;
|
||||
font-size: 1em;
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
content: none;
|
||||
}
|
||||
|
||||
input::after {
|
||||
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="%23c2c2c4" d="M26 27.5H6A1.5 1.5 0 0 1 4.5 26V6c0-.83.67-1.5 1.5-1.5h20c.828 0 1.5.67 1.5 1.5v20a1.5 1.5 0 0 1-1.5 1.5m-18.5-3h17v-17h-17z"%2F%3E%3C%2Fsvg%3E');
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
input:checked[disabled]::after {
|
||||
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;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vp-tabs {
|
||||
margin: 1.5rem -0.75rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.hint-container .vp-tabs {
|
||||
margin: 1rem -0.45rem 1rem -0.75rem;
|
||||
|
||||
.vp-tab {
|
||||
padding: 0.45rem 0.75rem;
|
||||
font-size: 14px;
|
||||
|
||||
p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footnotes-sep {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.footnotes {
|
||||
position: relative;
|
||||
padding: 48px 0 12px 16px;
|
||||
margin-left: -16px;
|
||||
font-size: 14px;
|
||||
border-left: 4px solid var(--vp-c-default-soft);
|
||||
|
||||
@media (width >= 419px) {
|
||||
& {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
|
||||
[lang="zh-CN"] & {
|
||||
content: "脚注:";
|
||||
}
|
||||
|
||||
[lang="en-US"] & {
|
||||
content: "Footnotes:";
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
margin: 0;
|
||||
|
||||
p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
li:first-of-type p:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
li:last-of-type p:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footnote-item {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
|
||||
> p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footnote-backref {
|
||||
position: relative;
|
||||
color: transparent;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -0.4em;
|
||||
left: 0;
|
||||
font-size: 1em;
|
||||
content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="1em" height="1em" viewBox="0 0 48 48"%3E%3Cg fill="none" stroke="%23c2c2c4" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"%3E%3Cpath d="m13 8l-7 6l7 7"%2F%3E%3Cpath d="M6 14h22.994c6.883 0 12.728 5.62 12.996 12.5c.284 7.27-5.723 13.5-12.996 13.5H11.998"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
|
||||
}
|
||||
}
|
||||
|
||||
.footnote-anchor {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.plume-content {
|
||||
figure {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
margin: 1rem auto;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> a {
|
||||
&[href^="http://"],
|
||||
&[href^="https://"] {
|
||||
&::after {
|
||||
@media print {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.external-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
display: inline-block;
|
||||
margin: 6px auto;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
36
theme/src/client/styles/normalize.scss
vendored
36
theme/src/client/styles/normalize.scss
vendored
@ -2,13 +2,13 @@
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
animation-delay: -1ms !important;
|
||||
animation-duration: 1ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
background-attachment: initial !important;
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: 0s !important;
|
||||
transition-delay: 0s !important;
|
||||
transition-duration: 0s !important;
|
||||
animation-duration: 1ms !important;
|
||||
animation-delay: -1ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@ html {
|
||||
body {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
text-rendering: optimizelegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@ -38,13 +38,13 @@ html.dark {
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
line-height: 24px;
|
||||
margin: 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
@ -52,8 +52,8 @@ html,
|
||||
body {
|
||||
color: var(--vp-c-text-1);
|
||||
background-color: var(--vp-c-bg);
|
||||
transition-duration: 0.25s;
|
||||
transition-timing-function: ease;
|
||||
transition-duration: 0.25s;
|
||||
transition-property: color, background-color;
|
||||
}
|
||||
|
||||
@ -68,9 +68,9 @@ h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
@ -100,7 +100,7 @@ b {
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role='button'],
|
||||
[role="button"],
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
@ -116,9 +116,9 @@ a {
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@ -158,10 +158,10 @@ input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
@ -172,7 +172,7 @@ button {
|
||||
}
|
||||
|
||||
button:enabled,
|
||||
[role='button']:enabled {
|
||||
[role="button"]:enabled {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -220,11 +220,11 @@ textarea::placeholder {
|
||||
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type='number'] {
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
@ -239,8 +239,8 @@ select {
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
.search-box .suggestions {
|
||||
box-shadow: var(--vp-shadow-3);
|
||||
top: 2.5rem;
|
||||
right: -1rem;
|
||||
border-radius: 12px;
|
||||
padding: 16px 12px;
|
||||
background-color: var(--vp-c-bg);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--vp-shadow-3);
|
||||
}
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
@ -3,9 +3,8 @@
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-c-white: #ffffff;
|
||||
--vp-c-black: #000000;
|
||||
|
||||
--vp-c-white: #fff;
|
||||
--vp-c-black: #000;
|
||||
--vp-c-neutral: var(--vp-c-black);
|
||||
--vp-c-neutral-inverse: var(--vp-c-white);
|
||||
}
|
||||
@ -125,9 +124,9 @@
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-c-bg: #ffffff;
|
||||
--vp-c-bg: #fff;
|
||||
--vp-c-bg-alt: #f6f6f7;
|
||||
--vp-c-bg-elv: #ffffff;
|
||||
--vp-c-bg-elv: #fff;
|
||||
--vp-c-bg-soft: #f6f6f7;
|
||||
}
|
||||
|
||||
@ -160,7 +159,7 @@
|
||||
.dark {
|
||||
--vp-c-border: #3c3f44;
|
||||
--vp-c-divider: #2e2e32;
|
||||
--vp-c-gutter: #000000;
|
||||
--vp-c-gutter: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -245,12 +244,35 @@
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-font-family-base: 'Chinese Quotes', 'Inter var', 'Inter', ui-sans-serif,
|
||||
system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--vp-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco,
|
||||
Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
--vp-font-family-base:
|
||||
"Chinese Quotes",
|
||||
"Inter var",
|
||||
"Inter",
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
blinkmacsystemfont,
|
||||
"Segoe UI",
|
||||
roboto,
|
||||
"Helvetica Neue",
|
||||
helvetica,
|
||||
arial,
|
||||
"Noto Sans",
|
||||
sans-serif,
|
||||
"Apple Color Emoji",
|
||||
"Segoe UI Emoji",
|
||||
"Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
--vp-font-family-mono:
|
||||
ui-monospace,
|
||||
sfmono-regular,
|
||||
"SF Mono",
|
||||
menlo,
|
||||
monaco,
|
||||
consolas,
|
||||
"Liberation Mono",
|
||||
"Courier New",
|
||||
monospace;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -301,7 +323,7 @@
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-header-anchor-symbol: '#';
|
||||
--vp-header-anchor-symbol: "#";
|
||||
}
|
||||
|
||||
/**
|
||||
@ -339,7 +361,7 @@
|
||||
--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-copy-copied-text-content: "Copied";
|
||||
|
||||
// --vp-code-tab-divider: var(--vp-code-block-divider-color);
|
||||
// --vp-code-tab-text-color: var(--vp-c-text-2);
|
||||
@ -349,8 +371,8 @@
|
||||
// --vp-code-tab-active-bar-color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
html[lang='zh-CN'] {
|
||||
--vp-code-copy-copied-text-content: '已复制';
|
||||
html[lang="zh-CN"] {
|
||||
--vp-code-copy-copied-text-content: "已复制";
|
||||
}
|
||||
|
||||
/**
|
||||
@ -509,6 +531,7 @@ html[lang='zh-CN'] {
|
||||
--vp-friends-link-color: var(--vp-c-brand-1);
|
||||
--vp-friends-border-color: var(--vp-c-border);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Badge
|
||||
* -------------------------------------------------------------------------- */
|
||||
@ -631,6 +654,14 @@ html.dark {
|
||||
--code-demo-header-bg-color: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
/* md enhance tabs */
|
||||
:root {
|
||||
--tab-bg-color: var(--vp-c-bg);
|
||||
--tab-nav-bg-color: var(--vp-c-bg-soft);
|
||||
--tab-nav-hover-color: var(--vp-c-bg);
|
||||
--tab-nav-text-color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
:root {
|
||||
--t-color: 250ms ease;
|
||||
--code-bg-color: var(--vp-code-block-bg);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user