yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

feat: 文章页面 外观切换过渡效果

Browse Source
This commit is contained in:
pengzhanbo 2024-02-04 10:31:23 +08:00
parent e3a9c07ed3
commit 61e6e17894
7 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
theme/src/client/components/Page.vue
View File

@ -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;

5
theme/src/client/components/PageAside.vue
View File

@ -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 {

3
theme/src/client/components/PageAsideItem.vue
View File

@ -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 {

12
theme/src/client/components/PageFooter.vue
View File

@ -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);
}
</style>

2
theme/src/client/components/PageMeta.vue
View File

@ -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 {

13
theme/src/client/components/PostItem.vue
View File

@ -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) {

3
theme/src/client/components/ShortPostList.vue
View File

@ -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 {