renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

style: adjust styles

Browse Source
This commit is contained in:
Hakadao
2023-10-06 20:08:11 +08:00
parent 79fc29053a
commit 19e5ca50b9
2 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Settings/components/Appearance.vue
View File

@@ -88,11 +88,12 @@ function changeWallpaper(url: string) {
<div flex="~ gap-2 wrap" justify-end>
<div
v-for="color in themeColorOptions" :key="color"
w-20px h-20px rounded-8 cursor-pointer transition duration-300
w-20px h-20px rounded-8 cursor-pointer transition duration-300 box-border
:style="{
background: color,
transform: color === settings.themeColor ? 'scale(1.2)' : 'scale(1)',
border: color === settings.themeColor ? '2px solid var(--bew-text-1)' : 'none',
transform: color === settings.themeColor ? 'scale(1.3)' : 'scale(1)',
border: color === settings.themeColor ? '2px solid white' : '2px solid transparent',
boxShadow: color === settings.themeColor ? '0 0 0 1px var(--bew-border-color), var(--bew-shadow-1)' : 'none',
}"
@click="changeThemeColor(color)"
/>
@@ -100,11 +101,12 @@ function changeWallpaper(url: string) {
</SettingsItem>
<SettingsItem :title="$t('settings.follow_bilibili_evolved_color')" :desc="$t('settings.follow_bilibili_evolved_color_desc')">
<div
w-20px h-20px rounded-8 cursor-pointer
w-20px h-20px rounded-8 cursor-pointer transition duration-300 box-border
:style="{
background: bilibiliEvolvedThemeColor,
transform: bilibiliEvolvedThemeColor === settings.themeColor ? 'scale(1.2)' : 'scale(1)',
border: bilibiliEvolvedThemeColor === settings.themeColor ? '2px solid var(--bew-text-1)' : 'none',
transform: bilibiliEvolvedThemeColor === settings.themeColor ? 'scale(1.3)' : 'scale(1)',
border: bilibiliEvolvedThemeColor === settings.themeColor ? '2px solid white' : '2px solid transparent',
boxShadow: bilibiliEvolvedThemeColor === settings.themeColor ? '0 0 0 1px var(--bew-border-color), var(--bew-shadow-1)' : 'none',
}"
@click="changeThemeColor(bilibiliEvolvedThemeColor)"
/>

2
src/styles/variables.scss
View File

@@ -6,7 +6,7 @@
--bew-filter-glass: blur(20px) saturate(180%);
// #region shadow
--bew-shadow-1: 0 4px 6px -1px rgb(0 0 0 / 0.1),
--bew-shadow-1: 0 4px 6px -1px rgb(0 0 0 / 0.15),
0 2px 4px -2px rgb(0 0 0 / 0.1);
--bew-shadow-2: 0 10px 15px -3px rgb(0 0 0 / 0.22),
0 4px 6px -4px rgb(0 0 0 / 0.16);