From 61e6e1789472468993b3256c8c8c42acad2d2bc8 Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Sun, 4 Feb 2024 10:31:23 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=20=E6=96=87=E7=AB=A0=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=20=E5=A4=96=E8=A7=82=E5=88=87=E6=8D=A2=E8=BF=87=E6=B8=A1?= =?UTF-8?q?=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- theme/src/client/components/Page.vue | 4 ++-- theme/src/client/components/PageAside.vue | 5 +++-- theme/src/client/components/PageAsideItem.vue | 3 +-- theme/src/client/components/PageFooter.vue | 12 +++++++++--- theme/src/client/components/PageMeta.vue | 2 ++ theme/src/client/components/PostItem.vue | 13 +++++++++++++ theme/src/client/components/ShortPostList.vue | 3 ++- 7 files changed, 32 insertions(+), 10 deletions(-) diff --git a/theme/src/client/components/Page.vue b/theme/src/client/components/Page.vue index a6dbc696..d1c2e827 100644 --- a/theme/src/client/components/Page.vue +++ b/theme/src/client/components/Page.vue @@ -101,14 +101,14 @@ onContentUpdated(() => zoom?.refresh()) display: none; } -.aside-curtain { +/* .aside-curtain { position: fixed; bottom: 0; z-index: 10; width: 224px; height: 32px; background: linear-gradient(transparent, var(--vp-c-bg) 70%); -} +} */ .aside-content { display: flex; diff --git a/theme/src/client/components/PageAside.vue b/theme/src/client/components/PageAside.vue index bb03dc5f..2bc9a77c 100644 --- a/theme/src/client/components/PageAside.vue +++ b/theme/src/client/components/PageAside.vue @@ -76,6 +76,7 @@ function handlePrint() { font-size: 13px; font-weight: 500; border-left: 1px solid var(--vp-c-divider); + transition: border-left var(--t-color); } .outline-marker { @@ -89,8 +90,8 @@ function handlePrint() { opacity: 0; transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), - background-color 0.5s, - opacity 0.25s; + background-color var(--t-color), + opacity var(--t-color); } .outline-title { diff --git a/theme/src/client/components/PageAsideItem.vue b/theme/src/client/components/PageAsideItem.vue index 9d4e649b..bef7ece1 100644 --- a/theme/src/client/components/PageAsideItem.vue +++ b/theme/src/client/components/PageAsideItem.vue @@ -43,13 +43,12 @@ function handleClick({ target: el }: Event) { color: var(--vp-c-text-2); text-overflow: ellipsis; white-space: nowrap; - transition: color 0.5s; + transition: color var(--t-color); } .outline-link:hover, .outline-link.active { color: var(--vp-c-text-1); - transition: color 0.25s; } .outline-link.nested { diff --git a/theme/src/client/components/PageFooter.vue b/theme/src/client/components/PageFooter.vue index e5299a28..7533e166 100644 --- a/theme/src/client/components/PageFooter.vue +++ b/theme/src/client/components/PageFooter.vue @@ -106,7 +106,7 @@ const showFooter = computed(() => { line-height: 32px; color: var(--vp-c-brand-1); border: 0; - transition: color 0.25s; + transition: color var(--t-color); } .edit-link-button:hover { @@ -131,6 +131,7 @@ const showFooter = computed(() => { font-weight: 500; line-height: 24px; color: var(--vp-c-text-2); + transition: color var(--t-color); } @media (min-width: 640px) { @@ -159,13 +160,16 @@ const showFooter = computed(() => { padding-right: 10px; font-weight: 500; color: var(--vp-c-text-2); + transition: color var(--t-color); } .contributors-info { color: var(--vp-c-text-2); + transition: color var(--t-color); .contributor { color: var(--vp-c-text-3); + transition: color var(--t-color); } } @@ -175,6 +179,7 @@ const showFooter = computed(() => { padding-top: 24px; margin-top: 10px; border-top: 1px solid var(--vp-c-divider); + transition: border-top var(--t-color); } @media (min-width: 640px) { @@ -197,7 +202,7 @@ const showFooter = computed(() => { padding: 11px 16px 13px; border: 1px solid var(--vp-c-divider); border-radius: 8px; - transition: border-color 0.25s; + transition: border-color var(--t-color); } .pager-link:hover { @@ -215,6 +220,7 @@ const showFooter = computed(() => { font-weight: 500; line-height: 20px; color: var(--vp-c-text-2); + transition: color var(--t-color); } .title { @@ -223,6 +229,6 @@ const showFooter = computed(() => { font-weight: 500; line-height: 20px; color: var(--vp-c-brand-1); - transition: color 0.25s; + transition: color var(--t-color); } diff --git a/theme/src/client/components/PageMeta.vue b/theme/src/client/components/PageMeta.vue index 05c58e16..f6f8bda4 100644 --- a/theme/src/client/components/PageMeta.vue +++ b/theme/src/client/components/PageMeta.vue @@ -86,6 +86,7 @@ const hasMeta = computed(() => readingTime.value.times || tags.value.length || c font-size: 16px; font-weight: 400; border-left: solid 4px var(--vp-c-brand-1); + transition: border-left var(--t-color); } .page-category-wrapper .category { @@ -122,6 +123,7 @@ const hasMeta = computed(() => readingTime.value.times || tags.value.length || c font-size: 14px; color: var(--vp-c-text-3); border-bottom: solid 1px var(--vp-c-divider); + transition: color var(--t-color), border-bottom var(--t-color); } .page-meta-wrapper p { diff --git a/theme/src/client/components/PostItem.vue b/theme/src/client/components/PostItem.vue index dd6deaf3..78a0b84c 100644 --- a/theme/src/client/components/PostItem.vue +++ b/theme/src/client/components/PostItem.vue @@ -92,6 +92,8 @@ const createTime = computed(() => color: var(--vp-c-text-2); background-color: var(--vp-c-default-soft); border-radius: 4px; + transition: var(--t-color); + transition-property: color, background-color; } .post-item h3 { @@ -100,6 +102,7 @@ const createTime = computed(() => margin-bottom: 0.75rem; font-size: 18px; font-weight: 600; + color: var(--vp-c-text-1); transition: color var(--t-color); } @@ -117,6 +120,13 @@ const createTime = computed(() => margin: 0 0 24px 20px; background-color: var(--vp-c-bg); border-radius: 8px; + box-shadow: var(--vp-shadow-1); + transition: var(--t-color); + transition-property: background-color, color, box-shadow; + will-change: transform; + } + + .post-item:hover { box-shadow: var(--vp-shadow-2); } } @@ -140,6 +150,7 @@ const createTime = computed(() => font-size: 14px; font-weight: 400; color: var(--vp-c-text-2); + transition: color var(--t-color); } .post-meta > div { @@ -166,6 +177,7 @@ const createTime = computed(() => color: var(--vp-tag-color); background-color: var(--vp-tag-bg-color); border-radius: 3px; + transition: color var(--t-color), background-color var(--t-color); } .post-meta .tag-list .tag:last-of-type { @@ -177,6 +189,7 @@ const createTime = computed(() => height: 14px; margin: 0.3rem; color: var(--vp-c-text-3); + transition: color var(--t-color); } .plume-content :deep(p) { diff --git a/theme/src/client/components/ShortPostList.vue b/theme/src/client/components/ShortPostList.vue index 7af34743..5c9b8ba5 100644 --- a/theme/src/client/components/ShortPostList.vue +++ b/theme/src/client/components/ShortPostList.vue @@ -35,6 +35,7 @@ defineProps<{ justify-content: space-between; margin: 14px 0; color: var(--vp-c-text-1); + transition: color var(--t-color); } .post-list .post-title { @@ -52,7 +53,7 @@ defineProps<{ .post-list .post-time { color: var(--vp-c-text-3); - transition: all var(--t-color); + transition: color var(--t-color); } .post-list li:hover .post-title {