mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-05-10 04:37:29 +08:00
feat: blur
This commit is contained in:
@@ -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);
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -35,6 +35,7 @@ export default {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: var(--header-height);
|
||||
}
|
||||
|
||||
.twitter-callback-page-text {
|
||||
|
||||
Reference in New Issue
Block a user