AMAZEHOME/cook
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: optimize scrollbar

Browse Source
This commit is contained in:
YunYouJun
2022-04-16 02:01:04 +08:00
parent f1353054ae
commit 8c871ee4f9
4 changed files with 34 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Menu.vue
View File

@@ -8,19 +8,19 @@ import { toggleDark } from '~/composables'
<div i-ri-home-2-line /> <div i-ri-home-2-line />
</RouterLink> </RouterLink>
<button class="icon-btn mx-2 !outline-none" title="切换" @click="toggleDark()"> <button class="icon-btn mx-2 hover:text-yellow-400 !outline-none" title="切换" @click="toggleDark()">
<div i="ri-sun-line dark:ri-moon-line" /> <div i="ri-sun-line dark:ri-moon-line" />
</button> </button>
<RouterLink class="icon-btn mx-2" to="/about" title="关于"> <RouterLink class="icon-btn mx-2 hover:text-blue-400" to="/about" title="关于">
<div i-ri-information-line /> <div i-ri-information-line />
</RouterLink> </RouterLink>
<a class="icon-btn mx-2" rel="noreferrer" href="https://space.bilibili.com/1579790" target="_blank" title="BiliBili"> <a class="icon-btn mx-2 hover:text-pink-400" rel="noreferrer" href="https://space.bilibili.com/1579790" target="_blank" title="BiliBili">
<div i-ri-bilibili-line /> <div i-ri-bilibili-line />
</a> </a>
<a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/YunYouJun/cook" target="_blank" title="GitHub"> <a class="icon-btn mx-2 hover:text-black-400" rel="noreferrer" href="https://github.com/YunYouJun/cook" target="_blank" title="GitHub">
<div i-ri-github-line /> <div i-ri-github-line />
</a> </a>
</nav> </nav>

2
src/components/ToolTag.vue
View File

@@ -8,7 +8,7 @@ defineProps<{
<span <span
class="tag rounded" p="x-2" class="tag rounded" p="x-2"
:border="'~ stone-200 dark:stone-800' + (active ? 'dark:stone-200' : '')" :border="'~ stone-200 dark:stone-800' + (active ? 'dark:stone-200' : '')"
:bg="active ? 'stone-500 opacity-90' : 'stone-300 opacity-20'" :bg="active ? 'stone-600 opacity-100' : 'stone-300 opacity-20'"
:text="active ? 'stone-100' : 'stone-800 dark:stone-200'" :text="active ? 'stone-100' : 'stone-800 dark:stone-200'"
> >
<slot /> <slot />

2
src/pages/index.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div text-4xl m="t-4"> <div text-4xl m="t-4">
<div i-mdi-pot-steam-outline inline-block /> <div class="bg-gradient-to-b from-dark-100 to-black-900 dark:(from-stone-200 to-light-900)" i-mdi-pot-steam-outline inline-block />
</div> </div>
<p text="sm" m="b-4"> <p text="sm" m="b-4">
好的，今天我们来做菜！ 好的，今天我们来做菜！

28
src/styles/index.scss
View File

@@ -25,3 +25,31 @@ a {
.v-leave-to { .v-leave-to {
opacity: 0; opacity: 0;
} }
// scrollbar
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
border-radius: 2px;
background-color: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: rgba(122, 122, 122, 0.3);
&:window-inactive {
background-color: rgba(122, 122, 122, 0.3);
}
&:hover {
background-color: rgba(122, 122, 122, 0.7);
}
&:active {
background-color: rgba(122, 122, 122, 0.9);
}
}