feat: blur

This commit is contained in:
Tim
2025-07-29 21:01:51 +08:00
parent 275360983f
commit 393128b326
23 changed files with 80 additions and 20 deletions

View File

@@ -76,10 +76,16 @@ export default {
background-color: var(--background-color);
margin: 0 auto;
height: calc(100vh - var(--header-height));
padding-top: var(--header-height);
overflow-y: auto;
}
.about-tabs {
position: sticky;
top: 1px;
z-index: 200;
background-color: var(--background-color-blur);
backdrop-filter: blur(10px);
display: flex;
flex-direction: row;
border-bottom: 1px solid var(--normal-border-color);

View File

@@ -75,6 +75,7 @@ export default {
padding: 20px;
height: calc(100vh - var(--header-height) - 40px);
overflow-y: auto;
padding-top: calc(var(--header-height) + 20px);
}
.activity-list-page-card {

View File

@@ -32,6 +32,7 @@ export default {
.discord-callback-page {
background-color: var(--background-color);
height: calc(100vh - var(--header-height));
padding-top: var(--header-height);
display: flex;
flex-direction: column;
align-items: center;

View File

@@ -212,6 +212,7 @@ export default {
justify-content: center;
background-color: var(--background-color);
height: calc(100vh - var(--header-height));
padding-top: var(--header-height);
padding-right: 20px;
padding-left: 20px;
overflow-y: auto;

View File

@@ -132,6 +132,7 @@ export default {
align-items: center;
background-color: var(--background-color);
height: calc(100vh - var(--header-height));
padding-top: var(--header-height);
}
.forgot-content {
display: flex;

View File

@@ -32,6 +32,7 @@ export default {
.github-callback-page {
background-color: var(--background-color);
height: calc(100vh - var(--header-height));
padding-top: var(--header-height);
display: flex;
flex-direction: column;
align-items: center;

View File

@@ -27,7 +27,7 @@
<div class="article-container">
<template v-if="selectedTopic === '最新' || selectedTopic === '排行榜' || selectedTopic === '最新回复'">
<div class="header-container">
<div class="article-header-container">
<div class="header-item main-item">
<div class="header-item-text">话题</div>
</div>
@@ -385,6 +385,7 @@ export default {
.home-page {
background-color: var(--background-color);
height: calc(100vh - var(--header-height));
padding-top: var(--header-height);
display: flex;
flex-direction: column;
align-items: center;
@@ -437,9 +438,11 @@ export default {
}
.topic-container {
position: sticky;
z-index: 1000;
background-color: var(--background-color);
/* position: sticky;
top: 1px;
z-index: 1000; */
background-color: var(--background-color-blur);
backdrop-filter: blur(10px);
display: flex;
flex-direction: row;
align-items: center;
@@ -482,7 +485,7 @@ export default {
width: 100%;
}
.header-container {
.article-header-container {
display: flex;
flex-direction: row;
align-items: center;
@@ -692,7 +695,7 @@ export default {
margin-right: 3%;
}
.header-container {
.article-header-container {
display: none;
}
@@ -721,6 +724,7 @@ export default {
.topic-container {
position: static;
z-index: 0;
}
}

View File

@@ -124,6 +124,7 @@ export default {
align-items: center;
justify-content: center;
height: calc(100vh - var(--header-height));
padding-top: var(--header-height);
width: 100%;
background-color: var(--background-color);
}

View File

@@ -535,10 +535,16 @@ export default {
.message-page {
background-color: var(--background-color);
height: calc(100vh - var(--header-height));
padding-top: var(--header-height);
overflow-y: auto;
}
.message-page-header {
position: sticky;
top: 1px;
z-index: 200;
background-color: var(--background-color-blur);
backdrop-filter: blur(10px);
display: flex;
flex-direction: row;
justify-content: space-between;

View File

@@ -262,6 +262,7 @@ export default {
justify-content: center;
background-color: var(--background-color);
height: calc(100vh - var(--header-height));
padding-top: var(--header-height);
padding-right: 20px;
padding-left: 20px;
overflow-y: auto;

View File

@@ -18,6 +18,7 @@ export default {
flex-direction: column;
align-items: center;
height: calc(100vh - var(--header-height));
padding-top: var(--header-height);
text-align: center;
background-color: var(--background-color);
}

View File

@@ -597,7 +597,7 @@ export default {
background-color: var(--background-color);
display: flex;
flex-direction: row;
height: calc(100vh - var(--header-height));
height: 100vh;
}
.loading-container {
@@ -612,11 +612,13 @@ export default {
overflow-y: auto;
scrollbar-width: none;
padding: 20px;
height: calc(100% - 40px);
height: calc(100% - 40px - var(--header-height));
width: calc(85% - 40px);
padding-top: calc(var(--header-height) + 20px);
}
.post-page-scroller-container {
padding-top: var(--header-height);
display: flex;
flex-direction: column;
width: 15%;
@@ -905,6 +907,7 @@ export default {
.post-page-main-container {
width: calc(100% - 20px);
padding: 10px;
padding-top: calc(var(--header-height) + 10px);
}
.article-title {

View File

@@ -490,6 +490,7 @@ export default {
.profile-page {
background-color: var(--background-color);
height: calc(100vh - var(--header-height));
padding-top: var(--header-height);
overflow-y: auto;
overflow-x: hidden;
}
@@ -630,6 +631,11 @@ export default {
}
.profile-tabs {
position: sticky;
top: 1px;
z-index: 200;
background-color: var(--background-color-blur);
backdrop-filter: blur(10px);
display: flex;
flex-direction: row;
padding: 0 20px;

View File

@@ -226,6 +226,7 @@ export default {
background-color: var(--background-color);
padding: 40px;
height: calc(100vh - var(--header-height) - 80px);
padding-top: calc(var(--header-height) + 40px);
overflow-y: auto;
}

View File

@@ -223,6 +223,7 @@ export default {
align-items: center;
justify-content: center;
height: calc(100vh - var(--header-height));
padding-top: var(--header-height);
width: 100%;
background-color: var(--background-color);
}

View File

@@ -83,6 +83,7 @@ export default {
align-items: center;
background-color: var(--background-color);
height: calc(100vh - var(--header-height));
padding-top: var(--header-height);
}
.reason-title {

View File

@@ -49,5 +49,6 @@ onMounted(loadData)
background-color: var(--background-color);
margin: 0 auto;
height: calc(100vh - var(--header-height) - 40px);
padding-top: calc(var(--header-height) + 20px);
}
</style>

View File

@@ -35,6 +35,7 @@ export default {
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: var(--header-height);
}
.twitter-callback-page-text {