fix scroll, add color

This commit is contained in:
KUN1007 2023-06-06 16:05:37 +08:00
parent 369ebf150e
commit 5e3cd1a63e
12 changed files with 58 additions and 76 deletions

View file

@ -69,7 +69,7 @@ export default {
}, },
nonMoe: { nonMoe: {
log: 'Non-moe Record', log: 'Non-moe Record',
title: 'All the non-moe behavior were recorded here, please do not do that', title: `All the non-moe behavior were recorded here, don't do that`,
reason: 'reason', reason: 'reason',
consequence: 'consequence', consequence: 'consequence',
moemoepoint: 'moemoepoint', moemoepoint: 'moemoepoint',

View file

@ -92,7 +92,7 @@ $kungalgame-pink-4: #e85aad;
*/ */
// $kungalgame-trans-black: #1f2328; // $kungalgame-trans-black: #1f2328;
// $kungalgame-trans-white-1: #fffffff7; // $kungalgame-trans-white-1: #fffffff7;
// $kungalgame-trans-white-2: #ffffffd9; $kungalgame-trans-white-2: #ffffffd9;
// $kungalgame-trans-white-3: #ffffffc7; // $kungalgame-trans-white-3: #ffffffc7;
// $kungalgame-trans-white-4: #ffffffa1; // $kungalgame-trans-white-4: #ffffffa1;
$kungalgame-trans-white-5: #ffffff8e; $kungalgame-trans-white-5: #ffffff8e;

View file

@ -51,6 +51,7 @@ html {
*/ */
--kungalgame-trans-white-2: #ffffffd9;
--kungalgame-trans-white-5: #ffffff8e; --kungalgame-trans-white-5: #ffffff8e;
/* 这个白色是占位符,不然会导致塌陷 */ /* 这个白色是占位符,不然会导致塌陷 */
--kungalgame-trans-white-9: #ffffff00; --kungalgame-trans-white-9: #ffffff00;

View file

@ -39,17 +39,14 @@ import SingleTopic from './topic/SingleTopic.vue'
/* 帖子区域弹性盒 */ /* 帖子区域弹性盒 */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} &::-webkit-scrollbar {
/* 帖子区滚动条 */ display: inline;
.topic-container::-webkit-scrollbar { width: 4px;
display: inline; height: 0;
width: 4px; }
height: 0; &::-webkit-scrollbar-thumb {
background-color: var(--kungalgame-red-2); background: var(--kungalgame-blue-4);
border-radius: 2px; border-radius: 2px;
} }
.topic-container::-webkit-scrollbar-thumb {
background: var(--kungalgame-blue-4);
border-radius: 2px;
} }
</style> </style>

View file

@ -53,6 +53,15 @@ const total = props.isIncome ? 'totalIncome' : 'totalExpenditure'
padding: 10px; padding: 10px;
/* y 轴溢出滚动 */ /* y 轴溢出滚动 */
overflow-y: scroll; overflow-y: scroll;
&::-webkit-scrollbar {
display: inline;
width: 4px;
height: 0;
}
&::-webkit-scrollbar-thumb {
background: var(--kungalgame-blue-4);
border-radius: 2px;
}
} }
/* 总收入 */ /* 总收入 */
.sum { .sum {
@ -67,19 +76,6 @@ const total = props.isIncome ? 'totalIncome' : 'totalExpenditure'
background-color: var(--kungalgame-trans-blue-0); background-color: var(--kungalgame-trans-blue-0);
} }
} }
/* 滚动条的样式 */
.container::-webkit-scrollbar {
display: inline;
width: 4px;
height: 0;
background-color: var(--kungalgame-red-2);
border-radius: 2px;
}
.container::-webkit-scrollbar-thumb {
background: var(--kungalgame-blue-4);
border-radius: 2px;
}
/* 支出的样式 */ /* 支出的样式 */
.expenditure-form { .expenditure-form {
border: 1px solid var(--kungalgame-red-4); border: 1px solid var(--kungalgame-red-4);

View file

@ -21,15 +21,6 @@
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
* {
list-style: none;
padding: 0;
margin: 0;
text-decoration: none;
}
*::-webkit-scrollbar {
display: none;
}
.root { .root {
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;

View file

@ -207,10 +207,20 @@ import Aside from './components/Aside.vue'
.content { .content {
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
background-color: var(--kungalgame-trans-white-2);
border: 1px solid var(--kungalgame-blue-4); border: 1px solid var(--kungalgame-blue-4);
border-radius: 7px; border-radius: 7px;
display: flex; display: flex;
box-shadow: var(--shadow); box-shadow: var(--shadow);
&::-webkit-scrollbar {
display: inline;
width: 4px;
height: 0;
}
&:hover::-webkit-scrollbar-thumb {
background: var(--kungalgame-blue-4);
border-radius: 2px;
}
} }
/* 文章区距离侧边的距离 */ /* 文章区距离侧边的距离 */
.article { .article {

View file

@ -20,17 +20,14 @@ import SingleTopic from '../components/SingleTopic.vue'
flex-direction: column; flex-direction: column;
/* 溢出显示滚动条 */ /* 溢出显示滚动条 */
overflow-y: scroll; overflow-y: scroll;
} &::-webkit-scrollbar {
/* 滚动条的样式 */ display: inline;
.article::-webkit-scrollbar { width: 4px;
display: inline; height: 0;
width: 4px; }
height: 0; &::-webkit-scrollbar-thumb {
background-color: var(--kungalgame-red-2); background: var(--kungalgame-blue-4);
border-radius: 2px; border-radius: 2px;
} }
.article::-webkit-scrollbar-thumb {
background: var(--kungalgame-blue-4);
border-radius: 2px;
} }
</style> </style>

View file

@ -102,8 +102,6 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
display: inline; display: inline;
width: 4px; width: 4px;
height: 0; height: 0;
background-color: var(--kungalgame-red-2);
border-radius: 2px;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: var(--kungalgame-blue-4); background: var(--kungalgame-blue-4);

View file

@ -80,17 +80,14 @@ import KUNgalgamer from './KUNGalgamer.vue'
flex-direction: column; flex-direction: column;
margin-right: 10px; margin-right: 10px;
overflow-y: scroll; overflow-y: scroll;
} &::-webkit-scrollbar {
/* 滚动条的样式 */ display: inline;
.kungalgamer-container::-webkit-scrollbar { width: 4px;
display: inline; height: 0;
width: 4px; }
height: 0; &::-webkit-scrollbar-thumb {
background-color: var(--kungalgame-red-2); background: var(--kungalgame-blue-4);
border-radius: 2px; border-radius: 2px;
} }
.kungalgamer-container::-webkit-scrollbar-thumb {
background: var(--kungalgame-blue-4);
border-radius: 2px;
} }
</style> </style>

View file

@ -83,8 +83,6 @@ import Topic from './Topic.vue'
display: inline; display: inline;
width: 4px; width: 4px;
height: 0; height: 0;
background-color: var(--kungalgame-red-2);
border-radius: 2px;
} }
.topic-container::-webkit-scrollbar-thumb { .topic-container::-webkit-scrollbar-thumb {
background: var(--kungalgame-blue-4); background: var(--kungalgame-blue-4);

View file

@ -26,17 +26,14 @@ import SingleHistory from './SingleLog.vue'
flex-direction: column; flex-direction: column;
/* y 轴溢出滚动 */ /* y 轴溢出滚动 */
overflow-y: scroll; overflow-y: scroll;
} &::-webkit-scrollbar {
/* 帖子区滚动条 */ display: inline;
.history-list::-webkit-scrollbar { width: 4px;
display: inline; height: 0;
width: 4px; }
height: 0; &::-webkit-scrollbar-thumb {
background-color: var(--kungalgame-red-2); background: var(--kungalgame-blue-4);
border-radius: 2px; border-radius: 2px;
} }
.history-list::-webkit-scrollbar-thumb {
background: var(--kungalgame-blue-4);
border-radius: 2px;
} }
</style> </style>