jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-05-25 03:57:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add 毛玻璃效果 + 开关

Browse Source
This commit is contained in:
tim
2025-08-16 18:11:56 +08:00
parent 4e2171a8a6
commit a756c2fab3
6 changed files with 68 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend_nuxt/assets/global.css
View File

@@ -15,8 +15,7 @@
/* 加一个app前缀防止与firefox的userChrome.css中的--menu-background-color冲突 */ /* 加一个app前缀防止与firefox的userChrome.css中的--menu-background-color冲突 */
--app-menu-background-color: white; --app-menu-background-color: white;
--background-color: white; --background-color: white;
/* --background-color-blur: rgba(255, 255, 255, 0.57); */ --background-color-blur: rgba(255, 255, 255, 0.57);
--background-color-blur: var(--background-color);
--menu-border-color: lightgray; --menu-border-color: lightgray;
--normal-border-color: lightgray; --normal-border-color: lightgray;
--menu-selected-background-color: rgba(208, 250, 255, 0.659); --menu-selected-background-color: rgba(208, 250, 255, 0.659);
@@ -70,6 +69,7 @@
--blur-4: none; --blur-4: none;
--blur-5: none; --blur-5: none;
--blur-10: none; --blur-10: none;
--background-color-blur: var(--background-color);
} }
body { body {

1
frontend_nuxt/components/HeaderComponent.vue
View File

@@ -210,6 +210,7 @@ onMounted(async () => {
width: 100%; width: 100%;
height: 100%; height: 100%;
max-width: var(--page-max-width); max-width: var(--page-max-width);
backdrop-filter: var(--blur-10);
} }
.header-content-left { .header-content-left {

1
frontend_nuxt/components/MenuComponent.vue
View File

@@ -239,6 +239,7 @@ const gotoTag = (t) => {
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;
scrollbar-width: none; scrollbar-width: none;
backdrop-filter: var(--blur-10);
} }
.menu-content { .menu-content {

1
frontend_nuxt/pages/index.vue
View File

@@ -417,6 +417,7 @@ const sanitizeDescription = (text) => stripMarkdown(text)
gap: 10px; gap: 10px;
width: 100%; width: 100%;
padding: 10px 0; padding: 10px 0;
backdrop-filter: var(--blur-10);
} }
.topic-item-container { .topic-item-container {

1
frontend_nuxt/pages/message.vue
View File

@@ -649,6 +649,7 @@ onActivated(() => {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
backdrop-filter: var(--blur-10);
} }
.message-page-header-right { .message-page-header-right {

12
frontend_nuxt/pages/users/[id].vue
View File

@@ -229,6 +229,7 @@
text="暂无时间线" text="暂无时间线"
icon="fas fa-inbox" icon="fas fa-inbox"
/> />
<div class="timeline-list">
<BaseTimeline :items="filteredTimelineItems"> <BaseTimeline :items="filteredTimelineItems">
<template #item="{ item }"> <template #item="{ item }">
<template v-if="item.type === 'post'"> <template v-if="item.type === 'post'">
@@ -286,6 +287,7 @@
</template> </template>
</BaseTimeline> </BaseTimeline>
</div> </div>
</div>
<div v-else-if="selectedTab === 'following'" class="follow-container"> <div v-else-if="selectedTab === 'following'" class="follow-container">
<div class="follow-tabs"> <div class="follow-tabs">
@@ -729,6 +731,7 @@ watch(selectedTab, async (val) => {
border-bottom: 1px solid var(--normal-border-color); border-bottom: 1px solid var(--normal-border-color);
scrollbar-width: none; scrollbar-width: none;
overflow-x: auto; overflow-x: auto;
backdrop-filter: var(--blur-10);
} }
.profile-tabs-item { .profile-tabs-item {
@@ -810,7 +813,10 @@ watch(selectedTab, async (val) => {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border-bottom: 1px solid var(--normal-border-color); border-bottom: 1px solid var(--normal-border-color);
margin-bottom: 10px; }
.timeline-list {
padding: 10px 20px;
} }
.timeline-tab-item { .timeline-tab-item {
@@ -823,10 +829,6 @@ watch(selectedTab, async (val) => {
border-bottom: 2px solid var(--primary-color); border-bottom: 2px solid var(--primary-color);
} }
.profile-timeline {
padding: 20px;
}
.timeline-date { .timeline-date {
font-size: 12px; font-size: 12px;
color: gray; color: gray;