GithubBackup/PicList
1
0
Fork 0
mirror of https://github.com/Kuingsmile/PicList.git synced 2026-05-06 20:42:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ Feature(custom): add advanced animation

Browse Source
This commit is contained in:
Kuingsmile
2026-01-15 15:32:37 +08:00
parent 3775e1ff1a
commit 0fac820d31
18 changed files with 298 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
resources/theme/anime.css
View File

File diff suppressed because one or more lines are too long

11
src/renderer/components/css/PerPicbedSetting.css
View File

@@ -134,14 +134,19 @@
border-radius: 50%; border-radius: 50%;
width: 20px; width: 20px;
height: 20px; height: 20px;
background: #ffffff; background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
box-shadow: 0 2px 4px rgb(0 0 0 / 20%); box-shadow:
transition: all 0.3s ease; 0 2px 6px rgb(0 0 0 / 20%),
0 1px 2px rgb(0 0 0 / 10%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
content: ''; content: '';
} }
.switch-input:checked + .switch-slider { .switch-input:checked + .switch-slider {
background: var(--color-accent); background: var(--color-accent);
box-shadow:
inset 0 1px 3px rgb(0 0 0 / 10%),
0 2px 8px rgb(64 158 255 / 30%);
} }
.switch-input:checked + .switch-slider::before { .switch-input:checked + .switch-slider::before {

8
src/renderer/components/css/UnifiedConfigForm.css
View File

@@ -253,8 +253,9 @@
border-radius: 0.75rem; border-radius: 0.75rem;
width: 3rem; width: 3rem;
height: 1.5rem; height: 1.5rem;
background: var(--color-border); background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
transition: var(--transition-fast); transition: var(--transition-fast);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -265,13 +266,16 @@
border-radius: 50%; border-radius: 50%;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
background: white; background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transition: var(--transition-fast); transition: var(--transition-fast);
} }
.switch-input:checked + .switch-slider { .switch-input:checked + .switch-slider {
background: var(--color-accent); background: var(--color-accent);
box-shadow:
inset 0 1px 3px rgb(0 0 0 / 10%),
0 2px 8px rgb(64 158 255 / 30%);
} }
.switch-input:checked + .switch-slider .switch-button { .switch-input:checked + .switch-slider .switch-button {

80
src/renderer/manage/pages/ManageMain.vue
View File

@@ -99,54 +99,56 @@
</div> </div>
<!-- PicBed Switch Dialog --> <!-- PicBed Switch Dialog -->
<div v-if="picBedSwitchDialogVisible" class="dialog-overlay" @click="picBedSwitchDialogVisible = false"> <transition name="modal">
<div class="dialog-container" @click.stop> <div v-if="picBedSwitchDialogVisible" class="dialog-overlay" @click="picBedSwitchDialogVisible = false">
<div class="dialog-header"> <div class="dialog-container" @click.stop>
<h3 class="dialog-title"> <div class="dialog-header">
{{ t('pages.manage.main.switchPicBed') }} <h3 class="dialog-title">
</h3> {{ t('pages.manage.main.switchPicBed') }}
<button class="dialog-close" @click="picBedSwitchDialogVisible = false"> </h3>
<XIcon class="close-icon" /> <button class="dialog-close" @click="picBedSwitchDialogVisible = false">
</button> <XIcon class="close-icon" />
</div> </button>
<div class="dialog-content"> </div>
<div class="choice-cos"> <div class="dialog-content">
<!-- Back to main card --> <div class="choice-cos">
<div class="picbed-card main-card" @click="switchPicBed('main')"> <!-- Back to main card -->
<div class="card-icon"> <div class="picbed-card main-card" @click="switchPicBed('main')">
<HomeIcon class="main-icon" /> <div class="card-icon">
</div> <HomeIcon class="main-icon" />
<div class="card-content"> </div>
<div class="card-title main-title"> <div class="card-content">
{{ $t('pages.manage.main.backToHome') }} <div class="card-title main-title">
{{ $t('pages.manage.main.backToHome') }}
</div>
</div> </div>
</div> </div>
</div>
<!-- PicBed cards --> <!-- PicBed cards -->
<div <div
v-for="(config, alias) in allPicBedConfigure" v-for="(config, alias) in allPicBedConfigure"
:key="String(alias)" :key="String(alias)"
class="picbed-card" class="picbed-card"
:class="{ active: String(alias) === currentAlias }" :class="{ active: String(alias) === currentAlias }"
@click="switchPicBed(String(alias))" @click="switchPicBed(String(alias))"
> >
<div class="card-icon"> <div class="card-icon">
<img :src="`./assets/${config.picBedName}.webp`" class="picbed-icon" /> <img :src="`./assets/${config.picBedName}.webp`" class="picbed-icon" />
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="card-title"> <div class="card-title">
{{ config.alias }} {{ config.alias }}
</div>
</div>
<div v-if="String(alias) === currentAlias" class="check-icon">
<CheckIcon />
</div> </div>
</div>
<div v-if="String(alias) === currentAlias" class="check-icon">
<CheckIcon />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </transition>
<!-- New Bucket Drawer --> <!-- New Bucket Drawer -->
<div v-if="nweBucketDrawerVisible" class="drawer-overlay" @click="nweBucketDrawerVisible = false"> <div v-if="nweBucketDrawerVisible" class="drawer-overlay" @click="nweBucketDrawerVisible = false">

42
src/renderer/manage/pages/css/BucketPage.css
View File

@@ -59,6 +59,7 @@
.custom-domain-input:focus { .custom-domain-input:focus {
border-color: var(--color-accent); border-color: var(--color-accent);
background: white;
outline: none; outline: none;
box-shadow: 0 0 0 3px var(--color-accent-soft); box-shadow: 0 0 0 3px var(--color-accent-soft);
} }
@@ -155,7 +156,7 @@
padding: 0.5rem; padding: 0.5rem;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 500; font-weight: 500;
color: var(--color-accent); color: var(--color-text-primary);
background: var(--color-background-secondary); background: var(--color-background-secondary);
transition: var(--transition-fast); transition: var(--transition-fast);
gap: 0.25rem; gap: 0.25rem;
@@ -209,13 +210,14 @@
width: 200px; width: 200px;
font-size: 0.875rem; font-size: 0.875rem;
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-surface-elevated); background: var(--color-background-tertiary);
transition: var(--transition-fast); transition: var(--transition-fast);
} }
.search-input:focus { .search-input:focus {
border-color: var(--color-accent); border-color: var(--color-accent);
outline: none; outline: none;
background: white;
box-shadow: 0 0 0 3px var(--color-accent-soft); box-shadow: 0 0 0 3px var(--color-accent-soft);
} }
@@ -608,7 +610,7 @@
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
width: 100%; width: 100%;
background: var(--color-surface); background: var(--color-background-secondary);
transition: var(--transition-medium); transition: var(--transition-medium);
gap: 0.75rem; gap: 0.75rem;
cursor: pointer; cursor: pointer;
@@ -706,7 +708,7 @@
/* Ensure dropdown is never clipped */ /* Ensure dropdown is never clipped */
max-height: 300px; max-height: 300px;
white-space: nowrap; white-space: nowrap;
background: var(--color-surface); background: var(--color-background-tertiary);
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
transform-origin: top right; transform-origin: top right;
animation: dropdown-appear 0.15s ease-out; animation: dropdown-appear 0.15s ease-out;
@@ -793,7 +795,7 @@
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
max-width: 90vw; max-width: 90vw;
max-height: 90vh; max-height: 90vh;
background: var(--color-surface); background: var(--color-background-tertiary);
box-shadow: var(--shadow-xl); box-shadow: var(--shadow-xl);
flex-direction: column; flex-direction: column;
} }
@@ -869,12 +871,13 @@
width: 100%; width: 100%;
font-size: 0.875rem; font-size: 0.875rem;
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-surface-elevated); background: var(--color-background-tertiary);
transition: var(--transition-fast); transition: var(--transition-fast);
} }
.form-input:focus { .form-input:focus {
border-color: var(--color-accent); border-color: var(--color-accent);
background: white;
outline: none; outline: none;
box-shadow: 0 0 0 3px var(--color-accent-soft); box-shadow: 0 0 0 3px var(--color-accent-soft);
} }
@@ -926,8 +929,9 @@
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: 24px; border-radius: 24px;
background-color: var(--color-border); background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
transition: 0.3s; box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer; cursor: pointer;
} }
@@ -938,13 +942,19 @@
border-radius: 50%; border-radius: 50%;
width: 18px; width: 18px;
height: 18px; height: 18px;
background-color: white; background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
transition: 0.3s; box-shadow:
0 2px 6px rgb(0 0 0 / 20%),
0 1px 2px rgb(0 0 0 / 10%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
content: ""; content: "";
} }
input:checked + .switch-slider { input:checked + .switch-slider {
background-color: var(--color-accent); background: var(--color-accent);
box-shadow:
inset 0 1px 3px rgb(0 0 0 / 10%),
0 2px 8px rgb(64 158 255 / 30%);
} }
input:checked + .switch-slider::before { input:checked + .switch-slider::before {
@@ -971,7 +981,7 @@ input:checked + .switch-slider::before {
width: 60%; width: 60%;
max-width: 800px; max-width: 800px;
height: 100%; height: 100%;
background: var(--color-background-secondary); background: var(--color-background-tertiary);
box-shadow: var(--shadow-xl); box-shadow: var(--shadow-xl);
transition: transform 0.3s ease-out; transition: transform 0.3s ease-out;
flex-direction: column; flex-direction: column;
@@ -1010,7 +1020,7 @@ input:checked + .switch-slider::before {
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 3rem 2rem; padding: 3rem 2rem;
text-align: center; text-align: center;
background: var(--color-surface-elevated); background: var(--color-surface);
transition: var(--transition-medium); transition: var(--transition-medium);
cursor: pointer; cursor: pointer;
} }
@@ -1018,7 +1028,7 @@ input:checked + .switch-slider::before {
.upload-area:hover, .upload-area:hover,
.upload-area.dragover { .upload-area.dragover {
border-color: var(--color-accent); border-color: var(--color-accent);
background: var(--color-accent-soft); background: var(--color-surface-elevated);
} }
.upload-area-text { .upload-area-text {
@@ -1154,7 +1164,7 @@ input:checked + .switch-slider::before {
font-size: 0.75rem; font-size: 0.75rem;
text-align: center; text-align: center;
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-surface-elevated); background: var(--color-background-tertiary);
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
@@ -1456,7 +1466,7 @@ input:checked + .switch-slider::before {
padding: 0.75rem; padding: 0.75rem;
border: 1px solid var(--color-border-secondary); border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--color-surface-elevated); background: var(--color-background-secondary);
transition: var(--transition-fast); transition: var(--transition-fast);
} }

27
src/renderer/manage/pages/css/LoginPage.css
View File

@@ -436,7 +436,7 @@
border-radius: 50%; border-radius: 50%;
width: 20px; width: 20px;
height: 20px; height: 20px;
color: var(--color-text-tertiary); color: var(--color-text-primary);
background: var(--color-background-secondary); background: var(--color-background-secondary);
transition: var(--transition-fast); transition: var(--transition-fast);
cursor: help; cursor: help;
@@ -455,7 +455,7 @@
width: 100%; width: 100%;
font-size: 0.875rem; font-size: 0.875rem;
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-background-primary); background: var(--color-background-tertiary);
transition: var(--transition-fast); transition: var(--transition-fast);
} }
@@ -489,9 +489,10 @@
.switch-slider { .switch-slider {
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: 24px; border-radius: 14px;
background-color: var(--color-border); background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
transition: var(--transition-fast); box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer; cursor: pointer;
} }
@@ -502,13 +503,19 @@
border-radius: 50%; border-radius: 50%;
width: 18px; width: 18px;
height: 18px; height: 18px;
background-color: white; background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
transition: var(--transition-fast); box-shadow:
0 2px 6px rgb(0 0 0 / 20%),
0 1px 2px rgb(0 0 0 / 10%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
content: ""; content: "";
} }
input:checked + .switch-slider { input:checked + .switch-slider {
background-color: var(--color-success); background: var(--color-accent);
box-shadow:
inset 0 1px 3px rgb(0 0 0 / 10%),
0 2px 8px rgb(64 158 255 / 30%);
} }
input:checked + .switch-slider::before { input:checked + .switch-slider::before {
@@ -567,13 +574,13 @@ input:checked + .switch-slider::before {
font-size: 0.875rem; font-size: 0.875rem;
text-align: left; text-align: left;
color: var(--color-text-primary); color: var(--color-text-primary);
background: none; background: var(--color-background-tertiary);
transition: var(--transition-fast); transition: var(--transition-fast);
cursor: pointer; cursor: pointer;
} }
.dropdown-item:hover { .dropdown-item:hover {
background: var(--color-background-secondary); background: var(--color-accent);
} }
/* Config Table Section */ /* Config Table Section */

15
src/renderer/manage/pages/css/ManageMain.css
View File

@@ -333,7 +333,7 @@ html, body {
width: 85vw; width: 85vw;
max-width: 90vw; max-width: 90vw;
max-height: 85vh; max-height: 85vh;
background: var(--color-background-secondary); background: var(--color-background-tertiary);
box-shadow: var(--shadow-xl); box-shadow: var(--shadow-xl);
scrollbar-width: none; scrollbar-width: none;
} }
@@ -480,10 +480,12 @@ html, body {
.drawer-container { .drawer-container {
overflow-y: auto; overflow-y: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-2xl);
width: 400px; width: 400px;
max-width: 90vw; max-width: 90vw;
height: 100vh; height: calc(100vh - 32px);
background: var(--color-background-secondary); background: var(--color-background-tertiary);
box-shadow: var(--shadow-xl); box-shadow: var(--shadow-xl);
} }
@@ -570,14 +572,15 @@ html, body {
padding: 0.75rem; padding: 0.75rem;
width: 100%; width: 100%;
font-size: 0.875rem; font-size: 0.875rem;
color: var(--color-text-primary); color: var(--color-text-secondary);
background: var(--color-surface-elevated); background: var(--color-surface);
transition: var(--transition-fast); transition: var(--transition-fast);
box-sizing: border-box; box-sizing: border-box;
} }
.form-input:focus { .form-input:focus {
border-color: var(--color-accent); border-color: var(--color-accent);
background: white;
outline: none; outline: none;
box-shadow: 0 0 0 2px rgb(0 122 255 / 20%); box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
} }
@@ -614,7 +617,7 @@ html, body {
width: 100%; width: 100%;
font-size: 0.875rem; font-size: 0.875rem;
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-surface-elevated); background: var(--color-background-tertiary);
transition: var(--transition-fast); transition: var(--transition-fast);
appearance: none; appearance: none;
cursor: pointer; cursor: pointer;

1
src/renderer/pages/MiniPage.vue
View File

@@ -206,7 +206,6 @@ html, body, #app
background: transparent background: transparent
#mini-page #mini-page
background: #409EFF; background: #409EFF;
border-radius: 32px;
overflow: hidden; overflow: hidden;
color #FFF color #FFF
height 100vh height 100vh

10
src/renderer/pages/PicGoSetting.vue
View File

@@ -2181,7 +2181,11 @@ async function loadThemes() {
IRPCActionType.THEME_RESOLVE_THEMES, IRPCActionType.THEME_RESOLVE_THEMES,
) )
if (themes && themes.length > 0) { if (themes && themes.length > 0) {
themeList.value = themes themeList.value = themes.sort((a, b) => {
if (a.key === 'default.css') return -1
if (b.key === 'default.css') return 1
return a.label.localeCompare(b.label)
})
} }
} catch (error) { } catch (error) {
console.error('Failed to load themes:', error) console.error('Failed to load themes:', error)
@@ -2235,13 +2239,13 @@ async function handleThemeChange(theme: string) {
async function initData() { async function initData() {
const config = (await getConfig<IConfig>()) || ({} as IConfig) const config = (await getConfig<IConfig>()) || ({} as IConfig)
isDisableGPU.value = (await getConfig<boolean>(configPaths.settings.isDisableGPU)) || false
const settings = config.settings || {} const settings = config.settings || {}
const picBed = config.picBed const picBed = config.picBed
isDisableGPU.value = settings.isDisableGPU || false
showPicBedList.value = picBedG.value.filter(item => item.visible).map(item => item.name) showPicBedList.value = picBedG.value.filter(item => item.visible).map(item => item.name)
galleryPicBedFilterList.value = settings.galleryPicBedFilter || [] galleryPicBedFilterList.value = settings.galleryPicBedFilter || []
currentTheme.value = settings.theme || 'default.css' currentTheme.value = settings.theme || 'default.css'
await loadThemes() loadThemes()
formKeys.forEach(key => { formKeys.forEach(key => {
;(formOfSetting.value as any)[key] = settings[key] ?? formOfSetting.value[key] ;(formOfSetting.value as any)[key] = settings[key] ?? formOfSetting.value[key]
}) })

12
src/renderer/pages/Plugin.vue
View File

@@ -170,7 +170,7 @@
<!-- Config Modal --> <!-- Config Modal -->
<transition name="modal"> <transition name="modal">
<div v-if="dialogVisible" class="modal-overlay" @click="dialogVisible = false"> <div v-if="dialogVisible" class="modal-overlay" :class="advancedAnimation" @click="dialogVisible = false">
<div class="modal-container" @click.stop> <div class="modal-container" @click.stop>
<div class="modal-header"> <div class="modal-header">
<h2 class="modal-title"> <h2 class="modal-title">
@@ -248,6 +248,7 @@ const dialogVisible = ref(false)
const pluginNameList = ref<string[]>([]) const pluginNameList = ref<string[]>([])
const loading = ref(true) const loading = ref(true)
const needReload = ref(false) const needReload = ref(false)
const enableAdvancedAnimation = ref(false)
const latestVersionMap = reactive<Record<string, string>>({}) const latestVersionMap = reactive<Record<string, string>>({})
const $configForm = useTemplateRef('$configForm') const $configForm = useTemplateRef('$configForm')
const strictSearch = useStorage('plugin-strict-search', true) const strictSearch = useStorage('plugin-strict-search', true)
@@ -257,6 +258,14 @@ function setSrc(e: Event) {
target.src = import.meta.env.BASE_URL + 'roundLogo.png' target.src = import.meta.env.BASE_URL + 'roundLogo.png'
} }
async function initConf() {
enableAdvancedAnimation.value = (await getConfig<boolean>(configPaths.settings.isCustomMiniIcon)) || false
}
const advancedAnimation = computed(() => ({
advancedAnimation: enableAdvancedAnimation.value,
}))
const npmSearchText = computed(() => { const npmSearchText = computed(() => {
return searchText.value.match('picgo-plugin-') return searchText.value.match('picgo-plugin-')
? searchText.value ? searchText.value
@@ -558,6 +567,7 @@ onBeforeMount(async () => {
window.electron.ipcRendererOn(PICGO_TOGGLE_PLUGIN, picgoTogglePluginHandler) window.electron.ipcRendererOn(PICGO_TOGGLE_PLUGIN, picgoTogglePluginHandler)
getPluginList() getPluginList()
getSearchResult = debounce(_getSearchResult, 50) getSearchResult = debounce(_getSearchResult, 50)
initConf()
needReload.value = (await getConfig<boolean>(configPaths.needReload)) || false needReload.value = (await getConfig<boolean>(configPaths.needReload)) || false
}) })

32
src/renderer/pages/css/Gallery.css
View File

@@ -1,8 +1,16 @@
@import url('./common/advancedAnimation.css');
/* Global scrolling behavior */ /* Global scrolling behavior */
html, body { html, body {
overflow-x: hidden; overflow-x: hidden;
} }
.header-icon {
display: flex;
align-items: center;
color: var(--color-accent);
}
/* Custom Scrollbar Styles */ /* Custom Scrollbar Styles */
.gallery-content::-webkit-scrollbar { .gallery-content::-webkit-scrollbar {
width: 8px; width: 8px;
@@ -150,8 +158,9 @@ html, body {
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: 24px; border-radius: 24px;
background-color: var(--color-border); background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
transition: 0.3s; box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer; cursor: pointer;
} }
@@ -162,13 +171,19 @@ html, body {
border-radius: 50%; border-radius: 50%;
width: 18px; width: 18px;
height: 18px; height: 18px;
background-color: white; background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
transition: 0.3s; box-shadow:
0 2px 6px rgb(0 0 0 / 20%),
0 1px 2px rgb(0 0 0 / 10%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
content: ""; content: "";
} }
input:checked + .switch-slider { input:checked + .switch-slider {
background-color: var(--color-accent); background: var(--color-accent);
box-shadow:
inset 0 1px 3px rgb(0 0 0 / 10%),
0 2px 8px rgb(64 158 255 / 30%);
} }
input:checked + .switch-slider::before { input:checked + .switch-slider::before {
@@ -1507,13 +1522,6 @@ input:checked + .switch-slider::before {
letter-spacing: 0.02em; letter-spacing: 0.02em;
} }
.advancedAnimation {
backdrop-filter: blur(5px) saturate(180%);
background: rgb(255 255 255 / 20%);
border: 1px solid rgb(255 255 255 / 30%);
box-shadow: 0 8px 32px rgb(0 0 0 / 10%);
}
.placeholder-item:hover { .placeholder-item:hover {
background: rgb(var(--color-accent-rgb), 0.08); background: rgb(var(--color-accent-rgb), 0.08);
} }

97
src/renderer/pages/picbeds/Picbeds.css → src/renderer/pages/css/Picbeds.css
View File

@@ -1,3 +1,6 @@
@import url('./common/modal.css');
@import url('./common/advancedAnimation.css');
/* Page Container */ /* Page Container */
.picbeds-page { .picbeds-page {
position: relative; position: relative;
@@ -552,15 +555,6 @@
left: 0; left: 0;
min-width: 100%; min-width: 100%;
} }
.modal-overlay {
padding: 1rem;
}
.modal-header,
.modal-content {
padding: 1.5rem;
}
} }
@media (width >= 1024px) { @media (width >= 1024px) {
@@ -575,88 +569,3 @@
outline: 1px solid var(--color-accent); outline: 1px solid var(--color-accent);
outline-offset: 2px; outline-offset: 2px;
} }
/* Modal */
.modal-overlay {
position: fixed;
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
overflow-y: auto;
padding: 2rem;
background: rgb(0 0 0 / 50%);
inset: 0;
}
.modal-container {
overflow: hidden;
margin: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-2xl);
width: 90vw;
max-width: 90vw;
height: 85vh;
max-height: 85vh;
background: var(--color-surface);
box-shadow: var(--shadow-xl);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-border-secondary);
padding: 0.95rem 1rem;
}
.modal-title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-primary);
}
.modal-subtitle {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-primary);
}
.modal-close {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--color-border);
border-radius: 50%;
width: 32px;
height: 32px;
color: var(--color-text-secondary);
background: var(--color-surface-elevated);
cursor: pointer;
}
.modal-close:hover {
border-color: var(--color-danger);
color: var(--color-danger);
background: var(--color-surface);
}
.modal-content {
overflow-y: auto;
padding: 0.2rem;
max-height: calc(90vh - 120px);
scrollbar-width: none;
-ms-overflow-style: none;
}
.modal-content::-webkit-scrollbar {
display: none;
}
.modal-close:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}

23
src/renderer/pages/css/PicgoSetting.css
View File

@@ -1,3 +1,4 @@
@import url('./common/advancedAnimation.css');
/* stylelint-disable selector-pseudo-class-no-unknown */ /* stylelint-disable selector-pseudo-class-no-unknown */
.piclist-settings { .piclist-settings {
overflow-y: auto; overflow-y: auto;
@@ -187,8 +188,9 @@
border-radius: 12px; border-radius: 12px;
width: 44px; width: 44px;
height: 24px; height: 24px;
background: var(--color-border); background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
transition: background-color 0.3s; box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -199,13 +201,19 @@
border-radius: 50%; border-radius: 50%;
width: 20px; width: 20px;
height: 20px; height: 20px;
background: white; background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
transition: transform 0.3s; box-shadow:
0 2px 6px rgb(0 0 0 / 20%),
0 1px 2px rgb(0 0 0 / 10%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
content: ''; content: '';
} }
.switch-input:checked + .switch-slider { .switch-input:checked + .switch-slider {
background: var(--color-accent); background: var(--color-accent);
box-shadow:
inset 0 1px 3px rgb(0 0 0 / 10%),
0 2px 8px rgb(64 158 255 / 30%);
} }
.switch-input:checked + .switch-slider::before { .switch-input:checked + .switch-slider::before {
@@ -2667,10 +2675,3 @@ small {
padding: 0; padding: 0;
background: transparent; background: transparent;
} }
.advancedAnimation {
backdrop-filter: blur(5px) saturate(180%);
background: rgb(255 255 255 / 20%);
border: 1px solid rgb(255 255 255 / 30%);
box-shadow: 0 8px 32px rgb(0 0 0 / 10%);
}

2
src/renderer/pages/css/PluginPage.css
View File

@@ -1,3 +1,5 @@
@import url('./common/advancedAnimation.css');
/* Global scrolling behavior */ /* Global scrolling behavior */
html, body { html, body {
overflow-x: hidden; overflow-x: hidden;

127
src/renderer/pages/css/UploadPage.css
View File

@@ -1,3 +1,6 @@
@import url('./common/modal.css');
@import url('./common/advancedAnimation.css');
/* Global scrolling behavior */ /* Global scrolling behavior */
html, body { html, body {
overflow-x: hidden; overflow-x: hidden;
@@ -692,111 +695,6 @@ html, body {
border-bottom-right-radius: calc(var(--radius-md) - 1px); border-bottom-right-radius: calc(var(--radius-md) - 1px);
} }
/* Modal - Base Styles (Used by ImageProcess Dialog) */
.modal-overlay {
position: fixed;
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
overflow-y: auto;
padding: 2rem;
background: rgb(0 0 0 / 50%);
inset: 0;
animation: fade-in 0.2s ease-out;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.modal-container {
overflow: hidden;
margin: auto;
border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-2xl);
width: 90vw;
max-width: 90vw;
height: 85vh;
max-height: 85vh;
background: var(--color-background-tertiary);
box-shadow: var(--shadow-xl);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-border-secondary);
padding: 1rem 1.25rem;
background: var(--color-background-secondary);
}
.modal-title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-primary);
}
.modal-subtitle {
margin: 0.25rem 0 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-secondary);
}
.modal-close {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--color-border);
border-radius: 50%;
width: 32px;
height: 32px;
color: var(--color-text-secondary);
background: var(--color-surface-elevated);
cursor: pointer;
transition: all var(--transition-fast);
}
.modal-close:hover {
border-color: var(--color-danger);
color: white;
background: var(--color-danger);
transform: scale(1.05);
}
.modal-content {
overflow-y: auto;
max-height: calc(90vh - 90px);
scrollbar-width: none;
-ms-overflow-style: none;
}
.modal-content::-webkit-scrollbar {
width: 0.5rem;
}
.modal-content::-webkit-scrollbar-track {
background: var(--color-surface);
}
.modal-content::-webkit-scrollbar-thumb {
background: var(--color-border-secondary);
border-radius: var(--radius-full);
}
.modal-content::-webkit-scrollbar-thumb:hover {
background: var(--color-text-tertiary);
}
/* Transitions */ /* Transitions */
.progress-enter-active, .progress-enter-active,
.progress-leave-active { .progress-leave-active {
@@ -860,15 +758,6 @@ html, body {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
} }
.modal-overlay {
padding: 1rem;
}
.modal-header,
.modal-content {
padding: 1.5rem;
}
} }
@media (width <= 480px) { @media (width <= 480px) {
@@ -931,8 +820,7 @@ html, body {
.action-button:focus-visible, .action-button:focus-visible,
.quick-action-button:focus-visible, .quick-action-button:focus-visible,
.format-button:focus-visible, .format-button:focus-visible,
.toggle-button:focus-visible, .toggle-button:focus-visible {
.modal-close:focus-visible {
outline: 2px solid var(--color-accent); outline: 2px solid var(--color-accent);
outline-offset: 2px; outline-offset: 2px;
} }
@@ -2363,10 +2251,3 @@ html, body {
.icon-btn:hover { .icon-btn:hover {
color: var(--color-text-primary); color: var(--color-text-primary);
} }
.advancedAnimation {
backdrop-filter: blur(5px) saturate(180%);
background: rgb(255 255 255 / 20%);
border: 1px solid rgb(255 255 255 / 30%);
box-shadow: 0 8px 32px rgb(0 0 0 / 10%);
}

6
src/renderer/pages/css/common/advancedAnimation.css Normal file
View File

@@ -0,0 +1,6 @@
.advancedAnimation {
backdrop-filter: blur(5px) saturate(180%);
background: rgb(255 255 255 / 20%);
border: 1px solid rgb(255 255 255 / 30%);
box-shadow: 0 8px 32px rgb(0 0 0 / 10%);
}

111
src/renderer/pages/css/common/modal.css Normal file
View File

@@ -0,0 +1,111 @@
/* Modal - Base Styles (Used by ImageProcess Dialog) */
.modal-overlay {
position: fixed;
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
overflow-y: auto;
padding: 2rem;
background: rgb(0 0 0 / 50%);
inset: 0;
}
.modal-container {
overflow: hidden;
margin: auto;
border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-2xl);
width: 90vw;
max-width: 90vw;
height: 85vh;
max-height: 85vh;
background: var(--color-background-tertiary);
box-shadow: var(--shadow-xl);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-border-secondary);
padding: 1rem 1.25rem;
background: var(--color-background-secondary);
}
.modal-title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-primary);
}
.modal-subtitle {
margin: 0.25rem 0 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-secondary);
}
.modal-close {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--color-border);
border-radius: 50%;
width: 32px;
height: 32px;
color: var(--color-text-secondary);
background: var(--color-surface-elevated);
cursor: pointer;
transition: all var(--transition-fast);
}
.modal-close:hover {
border-color: var(--color-danger);
color: white;
background: var(--color-danger);
transform: scale(1.05);
}
.modal-content {
overflow-y: auto;
max-height: calc(90vh - 90px);
scrollbar-width: none;
-ms-overflow-style: none;
}
.modal-content::-webkit-scrollbar {
width: 0.5rem;
}
.modal-content::-webkit-scrollbar-track {
background: var(--color-surface);
}
.modal-content::-webkit-scrollbar-thumb {
background: var(--color-border-secondary);
border-radius: var(--radius-full);
}
.modal-content::-webkit-scrollbar-thumb:hover {
background: var(--color-text-tertiary);
}
@media (width <= 768px) {
.modal-overlay {
padding: 1rem;
}
.modal-header,
.modal-content {
padding: 1.5rem;
}
}
.modal-close:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}

16
src/renderer/pages/picbeds/index.vue
View File

@@ -119,7 +119,7 @@
</Transition> </Transition>
<transition name="modal"> <transition name="modal">
<div v-if="imageProcessDialogVisible" class="modal-overlay" @click.stop> <div v-if="imageProcessDialogVisible" class="modal-overlay" :class="advancedAnimation" @click.stop>
<div class="modal-container" @click.stop> <div class="modal-container" @click.stop>
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title"> <h3 class="modal-title">
@@ -157,7 +157,7 @@ import {
XIcon, XIcon,
} from 'lucide-vue-next' } from 'lucide-vue-next'
import { v4 as uuid } from 'uuid' import { v4 as uuid } from 'uuid'
import { onBeforeMount, ref, useTemplateRef } from 'vue' import { computed, onBeforeMount, ref, useTemplateRef } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
@@ -180,6 +180,7 @@ const picBedName = ref('')
const loading = ref(false) const loading = ref(false)
const dropdownVisible = ref(false) const dropdownVisible = ref(false)
const imageProcessDialogVisible = ref(false) const imageProcessDialogVisible = ref(false)
const enableAdvancedAnimation = ref(false)
const $route = useRoute() const $route = useRoute()
const $router = useRouter() const $router = useRouter()
const $configForm = useTemplateRef('$configForm') const $configForm = useTemplateRef('$configForm')
@@ -188,9 +189,18 @@ const currentPicbedType = $route.params.type as string
type.value = $route.params.type as string type.value = $route.params.type as string
async function initConf() {
enableAdvancedAnimation.value = (await getConfig<boolean>(configPaths.settings.isCustomMiniIcon)) || false
}
const advancedAnimation = computed(() => ({
advancedAnimation: enableAdvancedAnimation.value,
}))
onBeforeMount(async () => { onBeforeMount(async () => {
loading.value = true loading.value = true
try { try {
initConf()
await getPicBeds() await getPicBeds()
await getPicBedConfigList() await getPicBedConfigList()
} finally { } finally {
@@ -331,4 +341,4 @@ export default {
} }
</script> </script>
<style scoped src="./Picbeds.css"></style> <style scoped src="../css/Picbeds.css"></style>