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): update css style

Browse Source
This commit is contained in:
Kuingsmile
2026-01-18 10:53:07 +08:00
parent c938cbf9f1
commit deafefb8b3
28 changed files with 246 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -49,7 +49,6 @@
"@piclist/i18n": "^2.0.0", "@piclist/i18n": "^2.0.0",
"@piclist/store": "^3.0.1", "@piclist/store": "^3.0.1",
"@smithy/node-http-handler": "^4.4.7", "@smithy/node-http-handler": "^4.4.7",
"@vueuse/core": "^14.1.0",
"adm-zip": "^0.5.16", "adm-zip": "^0.5.16",
"ali-oss": "^6.23.0", "ali-oss": "^6.23.0",
"axios": "^1.13.2", "axios": "^1.13.2",
@@ -67,7 +66,6 @@
"lodash-es": "^4.17.22", "lodash-es": "^4.17.22",
"marked": "^17.0.1", "marked": "^17.0.1",
"mime": "^4.1.0", "mime": "^4.1.0",
"mitt": "^3.0.1",
"multer": "^2.0.2", "multer": "^2.0.2",
"node-ssh-no-cpu-features": "^2.0.0", "node-ssh-no-cpu-features": "^2.0.0",
"nodejs-file-downloader": "^4.13.0", "nodejs-file-downloader": "^4.13.0",
@@ -104,6 +102,7 @@
"@types/write-file-atomic": "^4.0.3", "@types/write-file-atomic": "^4.0.3",
"@videojs-player/vue": "^1.0.0", "@videojs-player/vue": "^1.0.0",
"@vitejs/plugin-vue": "^6.0.3", "@vitejs/plugin-vue": "^6.0.3",
"@vueuse/core": "^14.1.0",
"baseline-browser-mapping": "^2.9.13", "baseline-browser-mapping": "^2.9.13",
"dexie": "^3.2.4", "dexie": "^3.2.4",
"dotenv": "^17.2.3", "dotenv": "^17.2.3",
@@ -123,6 +122,7 @@
"husky": "^9.1.7", "husky": "^9.1.7",
"js-yaml": "^4.1.1", "js-yaml": "^4.1.1",
"lucide-vue-next": "^0.562.0", "lucide-vue-next": "^0.562.0",
"mitt": "^3.0.1",
"node-bump-version": "^2.0.0", "node-bump-version": "^2.0.0",
"pinia": "^3.0.4", "pinia": "^3.0.4",
"pinia-plugin-persistedstate": "^4.7.1", "pinia-plugin-persistedstate": "^4.7.1",

2
src/renderer/components/ImageLocal.vue
View File

@@ -90,7 +90,7 @@ onBeforeMount(async () => {
.loading-spinner { .loading-spinner {
border: 2px solid #e4e7ed; border: 2px solid #e4e7ed;
border-top: 2px solid #409eff; border-top: 2px solid #409eff;
border-radius: 50%; border-radius: var(--radius-round);
width: 24px; width: 24px;
height: 24px; height: 24px;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;

2
src/renderer/components/ImagePreSign.vue
View File

@@ -106,7 +106,7 @@ onMounted(getUrl)
.loading-spinner { .loading-spinner {
border: 2px solid #e4e7ed; border: 2px solid #e4e7ed;
border-top: 2px solid #409eff; border-top: 2px solid #409eff;
border-radius: 50%; border-radius: var(--radius-round);
width: 24px; width: 24px;
height: 24px; height: 24px;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;

2
src/renderer/components/ImageWebdav.vue
View File

@@ -134,7 +134,7 @@ onMounted(fetchImage)
.loading-spinner { .loading-spinner {
border: 2px solid #e4e7ed; border: 2px solid #e4e7ed;
border-top: 2px solid #409eff; border-top: 2px solid #409eff;
border-radius: 50%; border-radius: var(--radius-round);
width: 24px; width: 24px;
height: 24px; height: 24px;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;

16
src/renderer/components/css/FirstTimeGuide.css
View File

@@ -19,7 +19,7 @@
.guide-spotlight { .guide-spotlight {
position: absolute; position: absolute;
border: 2px solid var(--color-accent); border: 2px solid var(--color-accent);
border-radius: 8px; border-radius: var(--radius-md);
box-shadow: box-shadow:
0 0 0 9999px rgb(0 0 0 / 10%), 0 0 0 9999px rgb(0 0 0 / 10%),
0 0 20px rgb(255 255 255 / 30%), 0 0 20px rgb(255 255 255 / 30%),
@@ -33,7 +33,7 @@
position: absolute; position: absolute;
background: var(--color-background-tertiary); background: var(--color-background-tertiary);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 10px; border-radius: var(--radius-lg);
box-shadow: 0 10px 40px rgb(0 0 0 / 25%); box-shadow: 0 10px 40px rgb(0 0 0 / 25%);
width: 420px; width: 420px;
max-width: 90vw; max-width: 90vw;
@@ -44,7 +44,7 @@
} }
.guide-overlay.advancedAnimation .guide-card { .guide-overlay.advancedAnimation .guide-card {
animation: slide-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); animation: slide-up var(--transition-bounce-slow);
} }
.guide-header { .guide-header {
@@ -79,7 +79,7 @@
color: var(--color-text-secondary); color: var(--color-text-secondary);
cursor: pointer; cursor: pointer;
padding: 4px; padding: 4px;
border-radius: 6px; border-radius: var(--radius-sm);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -102,7 +102,7 @@
width: 40px; width: 40px;
height: 40px; height: 40px;
flex-shrink: 0; flex-shrink: 0;
border-radius: 10px; border-radius: var(--radius-lg);
background: var(--color-accent); background: var(--color-accent);
display: flex; display: flex;
align-items: center; align-items: center;
@@ -131,7 +131,7 @@
.guide-additional-info { .guide-additional-info {
background: var(--color-background-tertiary); background: var(--color-background-tertiary);
border-radius: 6px; border-radius: var(--radius-sm);
padding: 10px 12px; padding: 10px 12px;
margin-top: 10px; margin-top: 10px;
} }
@@ -166,7 +166,7 @@
.progress-dot { .progress-dot {
width: 6px; width: 6px;
height: 6px; height: 6px;
border-radius: 50%; border-radius: var(--radius-round);
background: var(--color-border); background: var(--color-border);
transition: all 0.3s; transition: all 0.3s;
} }
@@ -189,7 +189,7 @@
.guide-btn { .guide-btn {
padding: 6px 12px; padding: 6px 12px;
border-radius: 6px; border-radius: var(--radius-sm);
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;

86
src/renderer/components/css/ImageProcessSetting.css
View File

@@ -13,11 +13,9 @@
display: flex; display: flex;
margin-bottom: 2rem; margin-bottom: 2rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 14px; border-radius: var(--radius-xl);
padding: 6px; padding: 6px;
box-shadow: box-shadow:var(--shadow-sm);
0 2px 12px rgb(0 0 0 / 6%),
inset 0 1px 0 rgb(255 255 255 / 5%);
} }
.tab-indicator { .tab-indicator {
@@ -25,11 +23,11 @@
top: 6px; top: 6px;
left: 6px; left: 6px;
z-index: 0; z-index: 0;
border-radius: 10px; border-radius: var(--radius-lg);
height: calc(100% - 12px); height: calc(100% - 12px);
background: var(--color-accent); background: var(--color-accent);
box-shadow: 0 2px 8px rgb(64 158 255 / 35%); box-shadow: var(--shadow-md);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-medium);
} }
.tab-button { .tab-button {
@@ -39,7 +37,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: none; border: none;
border-radius: 10px; border-radius: var(--radius-lg);
padding: 0.875rem 1.25rem; padding: 0.875rem 1.25rem;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 600; font-weight: 600;
@@ -92,19 +90,15 @@
/* ==================== Settings Section ==================== */ /* ==================== Settings Section ==================== */
.settings-section { .settings-section {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 16px; border-radius: var(--radius-xl);
padding: 1.75rem; padding: 1.75rem;
background: var(--color-background-primary); background: var(--color-background-primary);
box-shadow: box-shadow: var(--shadow-sm);
0 2px 12px rgb(0 0 0 / 5%),
0 1px 2px rgb(0 0 0 / 3%);
transition: all 0.25s ease; transition: all 0.25s ease;
} }
.settings-section:hover { .settings-section:hover {
box-shadow: box-shadow: var(--shadow-md);
0 4px 20px rgb(0 0 0 / 8%),
0 2px 4px rgb(0 0 0 / 4%);
} }
/* Section Header with Icon */ /* Section Header with Icon */
@@ -119,7 +113,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 10px; border-radius: var(--radius-lg);
width: 30px; width: 30px;
height: 30px; height: 30px;
color: var(--color-accent); color: var(--color-accent);
@@ -175,7 +169,7 @@
.form-input, .form-input,
.form-textarea { .form-textarea {
border: 1.5px solid var(--color-border); border: 1.5px solid var(--color-border);
border-radius: 10px; border-radius: var(--radius-lg);
padding: 0.875rem 1rem; padding: 0.875rem 1rem;
width: 100%; width: 100%;
font-size: 0.9rem; font-size: 0.9rem;
@@ -194,7 +188,7 @@
.form-textarea:focus { .form-textarea:focus {
border-color: var(--color-accent); border-color: var(--color-accent);
outline: none; outline: none;
box-shadow: 0 0 0 3px rgb(64 158 255 / 15%); box-shadow: var(--shadow-sm);
} }
.form-textarea { .form-textarea {
@@ -217,13 +211,11 @@
.form-range::-webkit-slider-thumb { .form-range::-webkit-slider-thumb {
border: 2px solid var(--color-border); border: 2px solid var(--color-border);
border-radius: 50%; border-radius: var(--radius-round);
width: 22px; width: 22px;
height: 22px; height: 22px;
background: var(--color-accent); background: var(--color-accent);
box-shadow: box-shadow: var(--shadow-sm);
0 2px 8px rgb(64 158 255 / 40%),
0 1px 2px rgb(0 0 0 / 10%);
appearance: none; appearance: none;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
@@ -231,20 +223,16 @@
.form-range::-webkit-slider-thumb:hover { .form-range::-webkit-slider-thumb:hover {
transform: scale(1.1); transform: scale(1.1);
box-shadow: box-shadow: var(--shadow-md);
0 4px 12px rgb(64 158 255 / 50%),
0 2px 4px rgb(0 0 0 / 15%);
} }
.form-range::-moz-range-thumb { .form-range::-moz-range-thumb {
border: 2px solid var(--color-border); border: 2px solid var(--color-border);
border-radius: 50%; border-radius: var(--radius-round);
width: 22px; width: 22px;
height: 22px; height: 22px;
background: var(--color-accent); background: var(--color-accent);
box-shadow: box-shadow: var(--shadow-sm);
0 2px 8px rgb(64 158 255 / 40%),
0 1px 2px rgb(0 0 0 / 10%);
cursor: pointer; cursor: pointer;
} }
@@ -253,7 +241,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 0.5rem; margin-top: 0.5rem;
border-radius: 8px; border-radius: var(--radius-md);
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
min-width: 3.5rem; min-width: 3.5rem;
font-size: 0.8rem; font-size: 0.8rem;
@@ -261,14 +249,14 @@
text-align: center; text-align: center;
color: white; color: white;
background: var(--color-accent); background: var(--color-accent);
box-shadow: 0 2px 6px rgb(64 158 255 / 30%); box-shadow: var(--shadow-sm);
} }
/* ==================== Color Input ==================== */ /* ==================== Color Input ==================== */
.form-color { .form-color {
overflow: hidden; overflow: hidden;
border: 2px solid var(--color-border); border: 2px solid var(--color-border);
border-radius: 10px; border-radius: var(--radius-lg);
padding: 2px; padding: 2px;
width: 48px; width: 48px;
height: 48px; height: 48px;
@@ -279,7 +267,7 @@
.form-color:hover { .form-color:hover {
border-color: var(--color-accent); border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgb(64 158 255 / 15%); box-shadow: var(--shadow-sm);
} }
.form-color:focus { .form-color:focus {
@@ -311,7 +299,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
border: 1.5px solid var(--color-border); border: 1.5px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1.125rem 1.25rem; padding: 1.125rem 1.25rem;
background: var(--color-background-primary); background: var(--color-background-primary);
transition: all 0.25s ease; transition: all 0.25s ease;
@@ -331,12 +319,12 @@
.switch-slider { .switch-slider {
position: relative; position: relative;
border-radius: 14px; border-radius: var(--radius-xl);
width: 52px; width: 52px;
height: 28px; height: 28px;
background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%); background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%); box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-medium);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -344,14 +332,14 @@
position: absolute; position: absolute;
top: 3px; top: 3px;
left: 3px; left: 3px;
border-radius: 50%; border-radius: var(--radius-round);
width: 22px; width: 22px;
height: 22px; height: 22px;
background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%); background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
box-shadow: box-shadow:
0 2px 6px rgb(0 0 0 / 20%), 0 2px 6px rgb(0 0 0 / 20%),
0 1px 2px rgb(0 0 0 / 10%); 0 1px 2px rgb(0 0 0 / 10%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-medium);
content: ''; content: '';
} }
@@ -396,7 +384,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
border: 1.5px solid var(--color-border); border: 1.5px solid var(--color-border);
border-radius: 10px; border-radius: var(--radius-lg);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
background: var(--color-background-primary); background: var(--color-background-primary);
transition: all 0.25s ease; transition: all 0.25s ease;
@@ -416,7 +404,7 @@
.radio-indicator { .radio-indicator {
position: relative; position: relative;
border: 2px solid var(--color-border); border: 2px solid var(--color-border);
border-radius: 50%; border-radius: var(--radius-round);
width: 18px; width: 18px;
height: 18px; height: 18px;
background: var(--color-background-primary); background: var(--color-background-primary);
@@ -432,7 +420,7 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
border-radius: 50%; border-radius: var(--radius-round);
width: 10px; width: 10px;
height: 10px; height: 10px;
background: var(--color-accent); background: var(--color-accent);
@@ -456,7 +444,7 @@
.position-button { .position-button {
border: 1.5px solid var(--color-border); border: 1.5px solid var(--color-border);
border-radius: 10px; border-radius: var(--radius-lg);
padding: 0.875rem; padding: 0.875rem;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 600; font-weight: 600;
@@ -487,7 +475,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
border: 1.5px solid var(--color-border); border: 1.5px solid var(--color-border);
border-radius: 10px; border-radius: var(--radius-lg);
padding: 0.75rem 1.25rem; padding: 0.75rem 1.25rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
@@ -509,7 +497,7 @@
small { small {
display: block; display: block;
margin-top: 0.5rem; margin-top: 0.5rem;
border-radius: 6px; border-radius: var(--radius-sm);
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
font-size: 0.8rem; font-size: 0.8rem;
color: var(--color-text-tertiary); color: var(--color-text-tertiary);
@@ -609,7 +597,7 @@ small {
overflow-y: auto; overflow-y: auto;
margin-top: 0.75rem; margin-top: 0.75rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 0; padding: 0;
max-height: 400px; max-height: 400px;
background: var(--color-background-tertiary); background: var(--color-background-tertiary);
@@ -660,7 +648,7 @@ small {
.placeholder-item code { .placeholder-item code {
margin-right: 0.875rem; margin-right: 0.875rem;
border: 1px solid rgb(255 255 255 / 20%); border: 1px solid rgb(255 255 255 / 20%);
border-radius: 8px; border-radius: var(--radius-md);
padding: 0.3rem 0.6rem; padding: 0.3rem 0.6rem;
min-width: 80px; min-width: 80px;
font-size: 1rem; font-size: 1rem;
@@ -686,12 +674,12 @@ small {
} }
.placeholder-help::-webkit-scrollbar-track { .placeholder-help::-webkit-scrollbar-track {
border-radius: 10px; border-radius: var(--radius-lg);
background: transparent; background: transparent;
} }
.placeholder-help::-webkit-scrollbar-thumb { .placeholder-help::-webkit-scrollbar-thumb {
border-radius: 10px; border-radius: var(--radius-lg);
background: var(--color-border); background: var(--color-border);
transition: background 0.2s ease; transition: background 0.2s ease;
} }
@@ -704,7 +692,7 @@ small {
.rename-toggle-card { .rename-toggle-card {
margin-bottom: 1rem; margin-bottom: 1rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 10px; border-radius: var(--radius-lg);
padding: 0.25rem; padding: 0.25rem;
background: var(--color-background-tertiary); background: var(--color-background-tertiary);
} }

2
src/renderer/components/css/InputBox.css
View File

@@ -10,7 +10,7 @@
} }
.inputbox-scale-enter-active { .inputbox-scale-enter-active {
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); transition: all var(--transition-bounce-md);
} }
.inputbox-scale-leave-active { .inputbox-scale-leave-active {

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

@@ -74,7 +74,7 @@
.app-version { .app-version {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 3px 8px; padding: 3px 8px;
font-size: 10px; font-size: 10px;
font-weight: 500; font-weight: 500;
@@ -151,7 +151,7 @@
bottom: 4px; bottom: 4px;
left: 4px; left: 4px;
border: none; border: none;
border-radius: 6px; border-radius: var(--radius-sm);
padding: 8px; padding: 8px;
color: var(--color-text-tertiary); color: var(--color-text-tertiary);
background: transparent; background: transparent;
@@ -222,7 +222,7 @@
.submenu-item { .submenu-item {
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 6px; border-radius: var(--radius-sm);
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 500; font-weight: 500;
@@ -271,7 +271,7 @@
.dialog-panel { .dialog-panel {
overflow: visible; overflow: visible;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 16px; border-radius: var(--radius-xl);
width: 100%; width: 100%;
max-width: 500px; max-width: 500px;
background: var(--color-background-tertiary); background: var(--color-background-tertiary);

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

@@ -15,7 +15,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 6px; border-radius: var(--radius-sm);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
@@ -55,7 +55,7 @@
.map-settings-panel { .map-settings-panel {
margin-top: 1rem; margin-top: 1rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: var(--radius-md);
padding: 1rem; padding: 1rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
box-shadow: 0 2px 8px rgb(0 0 0 / 10%); box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
@@ -80,7 +80,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 6px; border-radius: var(--radius-sm);
padding: 0.75rem; padding: 0.75rem;
background: var(--color-background-primary); background: var(--color-background-primary);
transition: all 0.2s ease; transition: all 0.2s ease;
@@ -119,7 +119,7 @@
.switch-slider { .switch-slider {
position: relative; position: relative;
border-radius: 12px; border-radius: var(--radius-lg);
width: 44px; width: 44px;
height: 24px; height: 24px;
background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%); background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
@@ -131,14 +131,14 @@
position: absolute; position: absolute;
top: 2px; top: 2px;
left: 2px; left: 2px;
border-radius: 50%; border-radius: var(--radius-round);
width: 20px; width: 20px;
height: 20px; height: 20px;
background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%); background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
box-shadow: box-shadow:
0 2px 6px rgb(0 0 0 / 20%), 0 2px 6px rgb(0 0 0 / 20%),
0 1px 2px rgb(0 0 0 / 10%); 0 1px 2px rgb(0 0 0 / 10%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-medium);
content: ''; content: '';
} }
@@ -158,7 +158,7 @@
.form-range, .form-range,
.form-color { .form-color {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 6px; border-radius: var(--radius-sm);
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-background-primary); background: var(--color-background-primary);
outline: none; outline: none;
@@ -187,7 +187,7 @@
.form-range.small::-webkit-slider-thumb { .form-range.small::-webkit-slider-thumb {
border: 2px solid #ffffff; border: 2px solid #ffffff;
border-radius: 50%; border-radius: var(--radius-round);
width: 18px; width: 18px;
height: 18px; height: 18px;
background: var(--color-accent); background: var(--color-accent);
@@ -198,7 +198,7 @@
.form-range.small::-moz-range-thumb { .form-range.small::-moz-range-thumb {
border: 2px solid #ffffff; border: 2px solid #ffffff;
border-radius: 50%; border-radius: var(--radius-round);
width: 18px; width: 18px;
height: 18px; height: 18px;
background: var(--color-accent); background: var(--color-accent);
@@ -275,7 +275,7 @@
.radio-indicator { .radio-indicator {
position: relative; position: relative;
border: 2px solid var(--color-border); border: 2px solid var(--color-border);
border-radius: 50%; border-radius: var(--radius-round);
width: 14px; width: 14px;
height: 14px; height: 14px;
background: var(--color-background-primary); background: var(--color-background-primary);
@@ -291,7 +291,7 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
border-radius: 50%; border-radius: var(--radius-round);
width: 6px; width: 6px;
height: 6px; height: 6px;
background: var(--color-accent); background: var(--color-accent);

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

@@ -48,7 +48,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 50%; border-radius: var(--radius-round);
padding: 2px; padding: 2px;
color: var(--color-text-secondary); color: var(--color-text-secondary);
transition: var(--transition-fast); transition: var(--transition-fast);
@@ -255,7 +255,7 @@
height: 1.5rem; height: 1.5rem;
background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%); 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); transition: all var(--transition-medium);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -263,7 +263,7 @@
position: absolute; position: absolute;
top: 2px; top: 2px;
left: 2px; left: 2px;
border-radius: 50%; border-radius: var(--radius-round);
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%); background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);

4
src/renderer/components/ui/ConfirmMessageBox.vue
View File

@@ -120,7 +120,7 @@ export default {
} }
.messagebox-scale-enter-active { .messagebox-scale-enter-active {
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); transition: all var(--transition-bounce-md);
} }
.messagebox-scale-leave-active { .messagebox-scale-leave-active {
@@ -206,7 +206,7 @@ export default {
border-radius: 0.625rem; border-radius: 0.625rem;
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
animation: icon-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); animation: icon-pop var(--transition-bounce-slow);
} }
@keyframes icon-pop { @keyframes icon-pop {

10
src/renderer/layouts/Main.vue
View File

@@ -82,9 +82,12 @@ export default { name: 'MainPage' }
--radius-lg: 12px; --radius-lg: 12px;
--radius-xl: 16px; --radius-xl: 16px;
--radius-2xl: 20px; --radius-2xl: 20px;
--radius-round: 50%;
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-medium: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-medium: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce-md: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
--transition-bounce-slow: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
} }
:root.dark { :root.dark {
@@ -115,9 +118,12 @@ export default { name: 'MainPage' }
--radius-lg: 12px; --radius-lg: 12px;
--radius-xl: 16px; --radius-xl: 16px;
--radius-2xl: 20px; --radius-2xl: 20px;
--radius-round: 50%;
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-medium: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-medium: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce-md: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
--transition-bounce-slow: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
} }
body { body {
@@ -168,7 +174,7 @@ body {
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border: 3px solid var(--color-background-primary); border: 3px solid var(--color-background-primary);
border-radius: 6px; border-radius: var(--radius-sm);
background-color: var(--color-border); background-color: var(--color-border);
transition: background-color var(--transition-fast); transition: background-color var(--transition-fast);
} }
@@ -183,7 +189,7 @@ body {
::selection { ::selection {
color: var(--color-text-primary); color: var(--color-text-primary);
background-color: rgb(0 122 255 / 20%); background-color: color-mix(in srgb, var(--color-accent), transparent 80%);
} }
:focus { :focus {

8
src/renderer/manage/components/CustomSwitch.vue
View File

@@ -86,7 +86,7 @@ const toggleTooltip = () => {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 50%; border-radius: var(--radius-round);
padding: 2px; padding: 2px;
width: 20px; width: 20px;
height: 20px; height: 20px;
@@ -147,7 +147,7 @@ const toggleTooltip = () => {
border-radius: 24px; border-radius: 24px;
background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%); background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%); box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-medium);
cursor: pointer; cursor: pointer;
} }
@@ -155,14 +155,14 @@ const toggleTooltip = () => {
position: absolute; position: absolute;
bottom: 2px; bottom: 2px;
left: 2px; left: 2px;
border-radius: 50%; border-radius: var(--radius-round);
width: 17px; width: 17px;
height: 17px; height: 17px;
background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%); background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
box-shadow: box-shadow:
0 2px 6px rgb(0 0 0 / 20%), 0 2px 6px rgb(0 0 0 / 20%),
0 1px 2px rgb(0 0 0 / 10%); 0 1px 2px rgb(0 0 0 / 10%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-medium);
content: ''; content: '';
} }

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

@@ -929,7 +929,7 @@
border-radius: 24px; border-radius: 24px;
background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%); background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%); box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-medium);
cursor: pointer; cursor: pointer;
} }
@@ -937,14 +937,14 @@
position: absolute; position: absolute;
bottom: 3px; bottom: 3px;
left: 3px; left: 3px;
border-radius: 50%; border-radius: var(--radius-round);
width: 18px; width: 18px;
height: 18px; height: 18px;
background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%); background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
box-shadow: box-shadow:
0 2px 6px rgb(0 0 0 / 20%), 0 2px 6px rgb(0 0 0 / 20%),
0 1px 2px rgb(0 0 0 / 10%); 0 1px 2px rgb(0 0 0 / 10%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-medium);
content: ""; content: "";
} }
@@ -1080,7 +1080,7 @@ input:checked + .switch-slider::before {
position: absolute; position: absolute;
top: 0.25rem; top: 0.25rem;
right: 0.25rem; right: 0.25rem;
border-radius: 10px; border-radius: var(--radius-lg);
padding: 0.125rem 0.375rem; padding: 0.125rem 0.375rem;
min-width: 16px; min-width: 16px;
font-size: 0.625rem; font-size: 0.625rem;
@@ -1354,7 +1354,7 @@ input:checked + .switch-slider::before {
width: 16px; width: 16px;
height: 16px; height: 16px;
border: 2px solid rgb(255 255 255 / 30%); border: 2px solid rgb(255 255 255 / 30%);
border-radius: 50%; border-radius: var(--radius-round);
border-top: 2px solid #ffffff; border-top: 2px solid #ffffff;
margin-right: 0.5rem; margin-right: 0.5rem;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;

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

@@ -433,7 +433,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: none; border: none;
border-radius: 50%; border-radius: var(--radius-round);
width: 20px; width: 20px;
height: 20px; height: 20px;
color: var(--color-text-primary); color: var(--color-text-primary);
@@ -489,10 +489,10 @@
.switch-slider { .switch-slider {
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: 14px; border-radius: var(--radius-xl);
background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%); background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%); box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-medium);
cursor: pointer; cursor: pointer;
} }
@@ -500,14 +500,14 @@
position: absolute; position: absolute;
bottom: 3px; bottom: 3px;
left: 3px; left: 3px;
border-radius: 50%; border-radius: var(--radius-round);
width: 18px; width: 18px;
height: 18px; height: 18px;
background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%); background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
box-shadow: box-shadow:
0 2px 6px rgb(0 0 0 / 20%), 0 2px 6px rgb(0 0 0 / 20%),
0 1px 2px rgb(0 0 0 / 10%); 0 1px 2px rgb(0 0 0 / 10%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-medium);
content: ""; content: "";
} }

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

@@ -148,7 +148,7 @@ html, body {
.loading-spinner { .loading-spinner {
border: 2px solid var(--color-border); border: 2px solid var(--color-border);
border-top: 2px solid var(--color-accent); border-top: 2px solid var(--color-accent);
border-radius: 50%; border-radius: var(--radius-round);
width: 20px; width: 20px;
height: 20px; height: 20px;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
@@ -355,7 +355,7 @@ html, body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 6px; border-radius: var(--radius-sm);
width: 32px; width: 32px;
height: 32px; height: 32px;
font-size: 1.5rem; font-size: 1.5rem;
@@ -664,7 +664,7 @@ html, body {
position: absolute; position: absolute;
top: 2px; top: 2px;
left: 2px; left: 2px;
border-radius: 50%; border-radius: var(--radius-round);
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
background: white; background: white;

4
src/renderer/manage/pages/css/ManageSetting.css
View File

@@ -262,7 +262,7 @@
.radio-custom { .radio-custom {
position: relative; position: relative;
border: 2px solid var(--color-border); border: 2px solid var(--color-border);
border-radius: 50%; border-radius: var(--radius-round);
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
background: var(--color-background-tiertiary); background: var(--color-background-tiertiary);
@@ -274,7 +274,7 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
border-radius: 50%; border-radius: var(--radius-round);
width: 8px; width: 8px;
height: 8px; height: 8px;
background: var(--color-accent); background: var(--color-accent);

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

@@ -15,7 +15,7 @@
<img <img
v-if="!dragover && !isShowingProgress" v-if="!dragover && !isShowingProgress"
:src="logoPath ? logoPath : './squareLogo.png'" :src="logoPath ? logoPath : './squareLogo.png'"
style="border-radius: 50%; width: 100%; height: 100%" style="border-radius: var(--radius-round); width: 100%; height: 100%"
draggable="false" draggable="false"
@dragstart.prevent @dragstart.prevent
/> />

6
src/renderer/pages/RenamePage.vue
View File

@@ -130,7 +130,7 @@ export default {
.rename-card { .rename-card {
overflow: hidden; overflow: hidden;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
width: 100%; width: 100%;
max-width: 500px; max-width: 500px;
background: var(--color-background-primary); background: var(--color-background-primary);
@@ -168,7 +168,7 @@ export default {
.form-input { .form-input {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: var(--radius-md);
padding: 0.875rem 1rem; padding: 0.875rem 1rem;
padding-right: 2.5rem; padding-right: 2.5rem;
width: 100%; width: 100%;
@@ -237,7 +237,7 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: none; border: none;
border-radius: 8px; border-radius: var(--radius-md);
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
min-width: fit-content; min-width: fit-content;
font-size: 0.875rem; font-size: 0.875rem;

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

@@ -160,7 +160,7 @@ html, body {
border-radius: 24px; border-radius: 24px;
background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%); background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%); box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-medium);
cursor: pointer; cursor: pointer;
} }
@@ -168,14 +168,14 @@ html, body {
position: absolute; position: absolute;
bottom: 2px; bottom: 2px;
left: 2px; left: 2px;
border-radius: 50%; border-radius: var(--radius-round);
width: 17px; width: 17px;
height: 17px; height: 17px;
background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%); background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
box-shadow: box-shadow:
0 2px 6px rgb(0 0 0 / 20%), 0 2px 6px rgb(0 0 0 / 20%),
0 1px 2px rgb(0 0 0 / 10%); 0 1px 2px rgb(0 0 0 / 10%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-medium);
content: ""; content: "";
} }
@@ -219,7 +219,7 @@ input:checked + .switch-slider::before {
} }
.grid-slider::-webkit-slider-thumb { .grid-slider::-webkit-slider-thumb {
border-radius: 50%; border-radius: var(--radius-round);
width: 15px; width: 15px;
height: 15px; height: 15px;
background: var(--color-accent); background: var(--color-accent);
@@ -235,7 +235,7 @@ input:checked + .switch-slider::before {
.grid-slider::-moz-range-thumb { .grid-slider::-moz-range-thumb {
border: none; border: none;
border-radius: 50%; border-radius: var(--radius-round);
width: 14px; width: 14px;
height: 14px; height: 14px;
background: var(--color-accent); background: var(--color-accent);
@@ -698,7 +698,7 @@ input:checked + .switch-slider::before {
.loader-spinner { .loader-spinner {
border: 2px solid var(--color-border-secondary); border: 2px solid var(--color-border-secondary);
border-top: 2px solid var(--color-accent); border-top: 2px solid var(--color-accent);
border-radius: 50%; border-radius: var(--radius-round);
width: 24px; width: 24px;
height: 24px; height: 24px;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
@@ -843,7 +843,7 @@ input:checked + .switch-slider::before {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: none; border: none;
border-radius: 50%; border-radius: var(--radius-round);
width: 40px; width: 40px;
height: 40px; height: 40px;
color: white; color: white;
@@ -869,7 +869,7 @@ input:checked + .switch-slider::before {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: none; border: none;
border-radius: 50%; border-radius: var(--radius-round);
width: 48px; width: 48px;
height: 48px; height: 48px;
color: white; color: white;
@@ -1059,7 +1059,7 @@ input:checked + .switch-slider::before {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: none; border: none;
border-radius: 50%; border-radius: var(--radius-round);
width: 20px; width: 20px;
height: 20px; height: 20px;
color: white; color: white;
@@ -1093,7 +1093,7 @@ input:checked + .switch-slider::before {
.placeholder-item code { .placeholder-item code {
margin-right: 0.875rem; margin-right: 0.875rem;
border: 1px solid rgb(255 255 255 / 20%); border: 1px solid rgb(255 255 255 / 20%);
border-radius: 8px; border-radius: var(--radius-md);
padding: 0.3rem 0.6rem; padding: 0.3rem 0.6rem;
min-width: 80px; min-width: 80px;
font-size: 1rem; font-size: 1rem;
@@ -1493,7 +1493,7 @@ input:checked + .switch-slider::before {
overflow-y: auto; overflow-y: auto;
margin-top: 0.75rem; margin-top: 0.75rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 0; padding: 0;
max-height: 400px; max-height: 400px;
background: var(--color-background-tertiary); background: var(--color-background-tertiary);

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

@@ -41,7 +41,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border: 1px solid var(--color-border-secondary); border: 1px solid var(--color-border-secondary);
border-radius: 20px; border-radius: var(--radius-2xl);
padding: 1.5rem 2rem; padding: 1.5rem 2rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
@@ -59,7 +59,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 14px; border-radius: var(--radius-xl);
width: 56px; width: 56px;
height: 56px; height: 56px;
color: var(--color-accent); color: var(--color-accent);
@@ -95,7 +95,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: var(--radius-md);
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 500; font-weight: 500;
@@ -124,12 +124,12 @@
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
border: none; border: none;
border-radius: 12px; border-radius: var(--radius-lg);
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-size: 0.875rem; font-size: 0.875rem;
font-family: inherit; font-family: inherit;
font-weight: 600; font-weight: 600;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-medium);
gap: 0.5rem; gap: 0.5rem;
cursor: pointer; cursor: pointer;
} }
@@ -204,12 +204,12 @@
.config-card { .config-card {
overflow: hidden; overflow: hidden;
border: 1px solid var(--color-border-secondary); border: 1px solid var(--color-border-secondary);
border-radius: 20px; border-radius: var(--radius-2xl);
background: var(--color-background-secondary); background: var(--color-background-secondary);
box-shadow: box-shadow:
0 4px 24px rgb(0 0 0 / 6%), 0 4px 24px rgb(0 0 0 / 6%),
0 1px 2px rgb(0 0 0 / 4%); 0 1px 2px rgb(0 0 0 / 4%);
animation: card-enter 0.4s cubic-bezier(0.4, 0, 0.2, 1); animation: card-enter var(--transition-slow);
} }
@keyframes card-enter { @keyframes card-enter {
@@ -237,7 +237,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 10px; border-radius: var(--radius-lg);
width: 36px; width: 36px;
height: 36px; height: 36px;
color: var(--color-accent); color: var(--color-accent);
@@ -289,7 +289,7 @@
z-index: 1000; z-index: 1000;
overflow: hidden; overflow: hidden;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 14px; border-radius: var(--radius-xl);
min-width: 220px; min-width: 220px;
background: var(--color-surface); background: var(--color-surface);
box-shadow: box-shadow:
@@ -343,7 +343,7 @@
/* Dropdown Transition */ /* Dropdown Transition */
.dropdown-enter-active, .dropdown-enter-active,
.dropdown-leave-active { .dropdown-leave-active {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-fast);
} }
.dropdown-enter-from, .dropdown-enter-from,
@@ -355,10 +355,10 @@
.empty-state-card { .empty-state-card {
overflow: hidden; overflow: hidden;
border: 1px solid var(--color-border-secondary); border: 1px solid var(--color-border-secondary);
border-radius: 20px; border-radius: var(--radius-2xl);
background: var(--color-surface); background: var(--color-surface);
box-shadow: 0 4px 24px rgb(0 0 0 / 6%); box-shadow: 0 4px 24px rgb(0 0 0 / 6%);
animation: card-enter 0.4s cubic-bezier(0.4, 0, 0.2, 1); animation: card-enter var(--transition-slow);
} }
.empty-state { .empty-state {
@@ -372,7 +372,7 @@
align-items: center; align-items: center;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
border: 2px dashed var(--color-border); border: 2px dashed var(--color-border);
border-radius: 20px; border-radius: var(--radius-2xl);
width: 96px; width: 96px;
height: 96px; height: 96px;
color: var(--color-text-tertiary); color: var(--color-text-tertiary);
@@ -423,7 +423,7 @@
inset: 0; inset: 0;
border: 3px solid rgb(255 255 255 / 15%); border: 3px solid rgb(255 255 255 / 15%);
border-top-color: white; border-top-color: white;
border-radius: 50%; border-radius: var(--radius-round);
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
@@ -476,7 +476,7 @@
.page-header { .page-header {
align-items: stretch; align-items: stretch;
border-radius: 16px; border-radius: var(--radius-xl);
padding: 1.25rem; padding: 1.25rem;
flex-direction: column; flex-direction: column;
} }
@@ -506,7 +506,7 @@
} }
.config-card { .config-card {
border-radius: 16px; border-radius: var(--radius-xl);
} }
.card-body { .card-body {

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

@@ -21,7 +21,7 @@
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 1rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1rem; padding: 1rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
box-shadow: 0 2px 8px rgb(0 0 0 / 10%); box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
@@ -54,7 +54,7 @@
display: flex; display: flex;
margin-bottom: 1rem; margin-bottom: 1rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 0.5rem; padding: 0.5rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
box-shadow: 0 2px 8px rgb(0 0 0 / 10%); box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
@@ -65,7 +65,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: none; border: none;
border-radius: 8px; border-radius: var(--radius-md);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
@@ -102,7 +102,7 @@
.settings-section { .settings-section {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1.5rem; padding: 1.5rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
box-shadow: 0 2px 8px var(--color-border); box-shadow: 0 2px 8px var(--color-border);
@@ -142,7 +142,7 @@
.form-textarea, .form-textarea,
.form-select { .form-select {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: var(--radius-md);
padding: 0.75rem; padding: 0.75rem;
width: 100%; width: 100%;
font-size: 0.875rem; font-size: 0.875rem;
@@ -164,7 +164,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid var(--color-border-secondary); border: 1px solid var(--color-border-secondary);
border-radius: 8px; border-radius: var(--radius-md);
padding: 0.75rem; padding: 0.75rem;
background: var(--color-background-tertiary); background: var(--color-background-tertiary);
transition: all 0.2s ease; transition: all 0.2s ease;
@@ -190,7 +190,7 @@
height: 21px; height: 21px;
background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%); background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%); box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-medium);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -198,14 +198,14 @@
position: absolute; position: absolute;
top: 2px; top: 2px;
left: 2px; left: 2px;
border-radius: 50%; border-radius: var(--radius-round);
width: 17px; width: 17px;
height: 17px; height: 17px;
background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%); background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
box-shadow: box-shadow:
0 2px 6px rgb(0 0 0 / 20%), 0 2px 6px rgb(0 0 0 / 20%),
0 1px 2px rgb(0 0 0 / 10%); 0 1px 2px rgb(0 0 0 / 10%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-medium);
content: ''; content: '';
} }
@@ -240,7 +240,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: none; border: none;
border-radius: 8px; border-radius: var(--radius-md);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
min-width: fit-content; min-width: fit-content;
font-size: 0.875rem; font-size: 0.875rem;
@@ -290,7 +290,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid var(--color-border-secondary); border: 1px solid var(--color-border-secondary);
border-radius: 6px; border-radius: var(--radius-sm);
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
background: var(--color-background-tertiary); background: var(--color-background-tertiary);
transition: all 0.2s ease; transition: all 0.2s ease;
@@ -353,7 +353,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: var(--radius-md);
width: 40px; width: 40px;
color: var(--color-text-secondary); color: var(--color-text-secondary);
background: var(--color-background-tertiary); background: var(--color-background-tertiary);
@@ -408,7 +408,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: none; border: none;
border-radius: 6px; border-radius: var(--radius-sm);
width: 32px; width: 32px;
height: 32px; height: 32px;
font-size: 1.5rem; font-size: 1.5rem;
@@ -486,7 +486,7 @@ small {
overflow-y: auto; overflow-y: auto;
margin-top: 0.75rem; margin-top: 0.75rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 0; padding: 0;
max-height: 400px; max-height: 400px;
background: var(--color-background-tertiary); background: var(--color-background-tertiary);
@@ -536,7 +536,7 @@ small {
.placeholder-item code { .placeholder-item code {
margin-right: 0.875rem; margin-right: 0.875rem;
border: 1px solid rgb(255 255 255 / 20%); border: 1px solid rgb(255 255 255 / 20%);
border-radius: 8px; border-radius: var(--radius-md);
padding: 0.3rem 0.6rem; padding: 0.3rem 0.6rem;
min-width: 80px; min-width: 80px;
font-size: 1rem; font-size: 1rem;
@@ -545,7 +545,7 @@ small {
text-align: center; text-align: center;
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-background-secondary); background: var(--color-background-secondary);
box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%); box-shadow: var(--shadow-md);
letter-spacing: 0.02em; letter-spacing: 0.02em;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -562,12 +562,12 @@ small {
} }
.placeholder-help::-webkit-scrollbar-track { .placeholder-help::-webkit-scrollbar-track {
border-radius: 10px; border-radius: var(--radius-lg);
background: transparent; background: transparent;
} }
.placeholder-help::-webkit-scrollbar-thumb { .placeholder-help::-webkit-scrollbar-thumb {
border-radius: 10px; border-radius: var(--radius-lg);
background: var(--color-border); background: var(--color-border);
transition: background 0.2s ease; transition: background 0.2s ease;
} }
@@ -580,7 +580,7 @@ small {
.update-info { .update-info {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: var(--radius-md);
padding: 1rem; padding: 1rem;
background: var(--color-background); background: var(--color-background);
} }
@@ -603,7 +603,7 @@ small {
.release-notes-card { .release-notes-card {
overflow: hidden; overflow: hidden;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
background: var(--color-background-secondary); background: var(--color-background-secondary);
box-shadow: 0 2px 8px rgb(0 0 0 / 10%); box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
} }
@@ -750,7 +750,7 @@ small {
.config-section { .config-section {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1.25rem; padding: 1.25rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
transition: all 0.2s ease; transition: all 0.2s ease;
@@ -798,7 +798,7 @@ small {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: var(--radius-md);
padding: 0.875rem 1rem; padding: 0.875rem 1rem;
min-height: 48px; min-height: 48px;
font-size: 0.875rem; font-size: 0.875rem;
@@ -858,7 +858,7 @@ small {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 16px; border-radius: var(--radius-xl);
padding: 1.5rem; padding: 1.5rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
box-shadow: 0 4px 16px rgb(0 0 0 / 8%); box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
@@ -875,7 +875,7 @@ small {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 14px; border-radius: var(--radius-xl);
width: 46px; width: 46px;
height: 46px; height: 46px;
color: white; color: white;
@@ -901,7 +901,7 @@ small {
.sync-type-badge { .sync-type-badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
border-radius: 6px; border-radius: var(--radius-sm);
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
@@ -958,7 +958,7 @@ small {
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 0.5rem 1.25rem; padding: 0.5rem 1.25rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
transition: all 0.25s ease; transition: all 0.25s ease;
@@ -977,7 +977,7 @@ small {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 10px; border-radius: var(--radius-lg);
width: 38px; width: 38px;
height: 38px; height: 38px;
color: white; color: white;
@@ -1034,7 +1034,7 @@ small {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: 1px dashed var(--color-border); border: 1px dashed var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1.5rem 1rem; padding: 1.5rem 1rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
transition: all 0.25s ease; transition: all 0.25s ease;
@@ -1078,7 +1078,7 @@ small {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 10px; border-radius: var(--radius-lg);
width: 34px; width: 34px;
height: 34px; height: 34px;
color: var(--color-surface); color: var(--color-surface);
@@ -1122,7 +1122,7 @@ small {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: 2px solid var(--color-border); border: 2px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1rem 0.5rem; padding: 1rem 0.5rem;
background: var(--color-background-tertiary); background: var(--color-background-tertiary);
transition: all 0.2s ease; transition: all 0.2s ease;
@@ -1226,7 +1226,7 @@ small {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
border-radius: 12px; border-radius: var(--radius-lg);
width: 44px; width: 44px;
height: 44px; height: 44px;
flex-shrink: 0; flex-shrink: 0;
@@ -1245,7 +1245,7 @@ small {
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1.25rem; padding: 1.25rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
transition: all 0.25s ease; transition: all 0.25s ease;
@@ -1268,7 +1268,7 @@ small {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 10px; border-radius: var(--radius-lg);
width: 44px; width: 44px;
height: 44px; height: 44px;
color: var(--color-accent); color: var(--color-accent);
@@ -1315,7 +1315,7 @@ small {
.server-config-card { .server-config-card {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1.25rem; padding: 1.25rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
transition: all 0.25s ease; transition: all 0.25s ease;
@@ -1339,7 +1339,7 @@ small {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 8px; border-radius: var(--radius-md);
width: 36px; width: 36px;
height: 36px; height: 36px;
color: white; color: white;
@@ -1347,7 +1347,7 @@ small {
} }
.server-config-badge { .server-config-badge {
border-radius: 6px; border-radius: var(--radius-sm);
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
font-size: 0.7rem; font-size: 0.7rem;
font-weight: 600; font-weight: 600;
@@ -1373,7 +1373,7 @@ small {
/* Encryption Key Section */ /* Encryption Key Section */
.encryption-key-section { .encryption-key-section {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1.25rem; padding: 1.25rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
} }
@@ -1389,7 +1389,7 @@ small {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 8px; border-radius: var(--radius-md);
width: 32px; width: 32px;
height: 32px; height: 32px;
color: var(--color-accent); color: var(--color-accent);
@@ -1417,7 +1417,7 @@ small {
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 16px; border-radius: var(--radius-xl);
padding: 1.5rem 2rem; padding: 1.5rem 2rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
box-shadow: 0 4px 16px rgb(0 0 0 / 8%); box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
@@ -1428,7 +1428,7 @@ small {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 16px; border-radius: var(--radius-xl);
width: 44px; width: 44px;
height: 44px; height: 44px;
color: white; color: white;
@@ -1454,7 +1454,7 @@ small {
} }
.version-badge { .version-badge {
border-radius: 8px; border-radius: var(--radius-md);
padding: 0.3rem 0.75rem; padding: 0.3rem 0.75rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
@@ -1475,7 +1475,7 @@ small {
/* Update Preferences */ /* Update Preferences */
.update-preferences-section .update-preference-card { .update-preferences-section .update-preference-card {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 0.25rem; padding: 0.25rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
} }
@@ -1489,7 +1489,7 @@ small {
.release-notes-card.enhanced { .release-notes-card.enhanced {
overflow: hidden; overflow: hidden;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 16px; border-radius: var(--radius-xl);
background: var(--color-background-secondary); background: var(--color-background-secondary);
box-shadow: 0 4px 16px rgb(0 0 0 / 8%); box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
} }
@@ -1545,7 +1545,7 @@ small {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 50%; border-radius: var(--radius-round);
width: 48px; width: 48px;
height: 48px; height: 48px;
color: var(--color-accent); color: var(--color-accent);
@@ -1625,7 +1625,7 @@ small {
.system-option-card { .system-option-card {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1rem; padding: 1rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
} }
@@ -1650,7 +1650,7 @@ small {
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 1rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1rem; padding: 1rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
transition: all 0.25s ease; transition: all 0.25s ease;
@@ -1669,7 +1669,7 @@ small {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 10px; border-radius: var(--radius-lg);
width: 25px; width: 25px;
height: 25px; height: 25px;
color: white; color: white;
@@ -1714,7 +1714,7 @@ small {
.system-toggle-card { .system-toggle-card {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 10px; border-radius: var(--radius-lg);
padding: 0.25rem; padding: 0.25rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
} }
@@ -1787,7 +1787,7 @@ small {
.startup-toggle-card { .startup-toggle-card {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 0.25rem; padding: 0.25rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
} }
@@ -1803,7 +1803,7 @@ small {
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1.25rem; padding: 1.25rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
transition: all 0.25s ease; transition: all 0.25s ease;
@@ -1822,7 +1822,7 @@ small {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 10px; border-radius: var(--radius-lg);
width: 44px; width: 44px;
height: 44px; height: 44px;
color: white; color: white;
@@ -1867,7 +1867,7 @@ small {
.upload-feature-card { .upload-feature-card {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 0.25rem; padding: 0.25rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
} }
@@ -1899,7 +1899,7 @@ small {
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1rem; padding: 1rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
transition: all 0.25s ease; transition: all 0.25s ease;
@@ -1917,7 +1917,7 @@ small {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 8px; border-radius: var(--radius-md);
width: 36px; width: 36px;
height: 36px; height: 36px;
color: var(--color-accent); color: var(--color-accent);
@@ -1965,7 +1965,7 @@ small {
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1.25rem; padding: 1.25rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
transition: all 0.25s ease; transition: all 0.25s ease;
@@ -1984,7 +1984,7 @@ small {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 10px; border-radius: var(--radius-lg);
width: 30px; width: 30px;
height: 30px; height: 30px;
color: white; color: white;
@@ -2018,7 +2018,7 @@ small {
.upload-toggle-card { .upload-toggle-card {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 10px; border-radius: var(--radius-lg);
padding: 0.25rem; padding: 0.25rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
} }
@@ -2040,7 +2040,7 @@ small {
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 1rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1.25rem; padding: 1.25rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
transition: all 0.25s ease; transition: all 0.25s ease;
@@ -2059,7 +2059,7 @@ small {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 10px; border-radius: var(--radius-lg);
width: 30px; width: 30px;
height: 30px; height: 30px;
color: white; color: white;
@@ -2105,7 +2105,7 @@ small {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
margin-top: 1rem; margin-top: 1rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1rem; padding: 1rem;
background: var(--color-background-tertiary); background: var(--color-background-tertiary);
gap: 1rem; gap: 1rem;
@@ -2134,7 +2134,7 @@ small {
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: var(--radius-md);
padding: 0.625rem 0.875rem; padding: 0.625rem 0.875rem;
background: var(--color-background-secondary); background: var(--color-background-secondary);
transition: all 0.2s ease; transition: all 0.2s ease;
@@ -2164,7 +2164,7 @@ small {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 10px; border-radius: var(--radius-lg);
width: 40px; width: 40px;
height: 40px; height: 40px;
color: white; color: white;
@@ -2176,7 +2176,7 @@ small {
.placeholder-info-card { .placeholder-info-card {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 10px; border-radius: var(--radius-lg);
padding: 1rem; padding: 1rem;
background: var(--color-background-tertiary); background: var(--color-background-tertiary);
} }
@@ -2209,7 +2209,7 @@ small {
} }
.placeholder-info-item code { .placeholder-info-item code {
border-radius: 6px; border-radius: var(--radius-sm);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
min-width: 80px; min-width: 80px;
@@ -2234,7 +2234,7 @@ small {
.proxy-config-card { .proxy-config-card {
display: flex; display: flex;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 10px; border-radius: var(--radius-lg);
padding: 1rem; padding: 1rem;
background: var(--color-background-tertiary); background: var(--color-background-tertiary);
gap: 0.75rem; gap: 0.75rem;
@@ -2248,7 +2248,7 @@ small {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 8px; border-radius: var(--radius-md);
width: 36px; width: 36px;
height: 36px; height: 36px;
color: white; color: white;
@@ -2311,7 +2311,7 @@ small {
.version-card { .version-card {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
min-width: 120px; min-width: 120px;
text-align: center; text-align: center;
@@ -2350,7 +2350,7 @@ small {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 10px; border-radius: var(--radius-lg);
padding: 1rem; padding: 1rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
@@ -2367,7 +2367,7 @@ small {
.rename-toggle-card { .rename-toggle-card {
margin-bottom: 1rem; margin-bottom: 1rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 10px; border-radius: var(--radius-lg);
padding: 0.25rem; padding: 0.25rem;
background: var(--color-background-tertiary); background: var(--color-background-tertiary);
} }
@@ -2423,7 +2423,7 @@ small {
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1rem; padding: 1rem;
text-align: center; text-align: center;
background: var(--color-background-tertiary); background: var(--color-background-tertiary);
@@ -2444,7 +2444,7 @@ small {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 10px; border-radius: var(--radius-lg);
width: 42px; width: 42px;
height: 42px; height: 42px;
color: white; color: white;
@@ -2487,7 +2487,7 @@ small {
align-items: flex-start; align-items: flex-start;
margin-bottom: 1rem; margin-bottom: 1rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 10px; border-radius: var(--radius-lg);
padding: 0.875rem 1rem; padding: 0.875rem 1rem;
font-size: 0.8rem; font-size: 0.8rem;
color: var(--color-text-secondary); color: var(--color-text-secondary);
@@ -2499,7 +2499,7 @@ small {
.server-toggle-card { .server-toggle-card {
margin-bottom: 1rem; margin-bottom: 1rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 0.25rem; padding: 0.25rem;
background: var(--color-background-tertiary); background: var(--color-background-tertiary);
} }
@@ -2512,7 +2512,7 @@ small {
.server-config-section { .server-config-section {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1rem; padding: 1rem;
background: var(--color-background-tertiary); background: var(--color-background-tertiary);
} }
@@ -2665,7 +2665,7 @@ small {
.notes-body :deep(pre) { .notes-body :deep(pre) {
overflow-x: auto; overflow-x: auto;
border-radius: 8px; border-radius: var(--radius-md);
padding: 1rem; padding: 1rem;
margin: 0.875rem 0; margin: 0.875rem 0;
background: var(--color-surface); background: var(--color-surface);

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

@@ -302,7 +302,7 @@ html, body {
.loading-spinner { .loading-spinner {
border: 3px solid var(--color-border); border: 3px solid var(--color-border);
border-top: 3px solid var(--color-accent); border-top: 3px solid var(--color-accent);
border-radius: 50%; border-radius: var(--radius-round);
width: 40px; width: 40px;
height: 40px; height: 40px;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
@@ -527,7 +527,7 @@ html, body {
.button-spinner { .button-spinner {
border: 2px solid transparent; border: 2px solid transparent;
border-top: 2px solid currentcolor; border-top: 2px solid currentcolor;
border-radius: 50%; border-radius: var(--radius-round);
width: 16px; width: 16px;
height: 16px; height: 16px;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;

16
src/renderer/pages/css/ShortKey.css
View File

@@ -19,7 +19,7 @@
align-items: center; align-items: center;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1.5rem; padding: 1.5rem;
background: var(--color-surface); background: var(--color-surface);
box-shadow: 0 2px 8px rgb(0 0 0 / 10%); box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
@@ -52,7 +52,7 @@
.shortkey-card { .shortkey-card {
overflow: hidden; overflow: hidden;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
background: var(--color-background-primary); background: var(--color-background-primary);
box-shadow: 0 2px 8px var(--color-border); box-shadow: 0 2px 8px var(--color-border);
} }
@@ -110,7 +110,7 @@
.key-display { .key-display {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 6px; border-radius: var(--radius-sm);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
font-size: 0.75rem; font-size: 0.75rem;
font-family: monospace; font-family: monospace;
@@ -131,7 +131,7 @@
.status-badge { .status-badge {
display: inline-block; display: inline-block;
border-radius: 12px; border-radius: var(--radius-lg);
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 500; font-weight: 500;
@@ -174,7 +174,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: none; border: none;
border-radius: 6px; border-radius: var(--radius-sm);
padding: 0.5rem 0.875rem; padding: 0.5rem 0.875rem;
min-width: fit-content; min-width: fit-content;
font-size: 0.75rem; font-size: 0.75rem;
@@ -253,7 +253,7 @@
.modal-content { .modal-content {
overflow: hidden; overflow: hidden;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: var(--radius-lg);
width: 100%; width: 100%;
max-width: 500px; max-width: 500px;
max-height: 90vh; max-height: 90vh;
@@ -281,7 +281,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: none; border: none;
border-radius: 6px; border-radius: var(--radius-sm);
width: 32px; width: 32px;
height: 32px; height: 32px;
color: var(--color-text-secondary); color: var(--color-text-secondary);
@@ -323,7 +323,7 @@
.form-input { .form-input {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: var(--radius-md);
padding: 0.75rem; padding: 0.75rem;
width: 100%; width: 100%;
font-size: 0.875rem; font-size: 0.875rem;

18
src/renderer/pages/css/UpdatePage.css
View File

@@ -26,7 +26,7 @@
position: relative; position: relative;
overflow: auto; overflow: auto;
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;
border-radius: 16px; border-radius: var(--radius-xl);
width: 90%; width: 90%;
height: 90%; height: 90%;
flex-shrink: 0; flex-shrink: 0;
@@ -34,7 +34,7 @@
box-shadow: box-shadow:
0 4px 6px -1px rgb(0 0 0 / 10%), 0 4px 6px -1px rgb(0 0 0 / 10%),
0 2px 4px -1px rgb(0 0 0 / 6%); 0 2px 4px -1px rgb(0 0 0 / 6%);
animation: slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1); animation: slide-up var(--transition-bounce-md);
} }
@keyframes slide-up { @keyframes slide-up {
@@ -93,7 +93,7 @@
} }
.version-number { .version-number {
border-radius: 6px; border-radius: var(--radius-sm);
padding: 0.125rem 0.5rem; padding: 0.125rem 0.5rem;
font-weight: 600; font-weight: 600;
background: #f1f5f9; background: #f1f5f9;
@@ -142,8 +142,8 @@
left: 0; left: 0;
border-radius: 9999px; border-radius: 9999px;
height: 100%; height: 100%;
background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%); background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1); transition: width var(--transition-bounce-md);
} }
/* Content */ /* Content */
@@ -166,7 +166,7 @@
.notes-body { .notes-body {
overflow-y: auto; overflow-y: auto;
border-radius: 12px; border-radius: var(--radius-lg);
padding: 1.25rem; padding: 1.25rem;
max-height: 195px; max-height: 195px;
font-size: 0.9375rem; font-size: 0.9375rem;
@@ -214,7 +214,7 @@
.notes-body :deep(pre) { .notes-body :deep(pre) {
overflow-x: auto; overflow-x: auto;
border-radius: 8px; border-radius: var(--radius-md);
padding: 1rem; padding: 1rem;
margin: 0.875rem 0; margin: 0.875rem 0;
background: #e2e8f0; background: #e2e8f0;
@@ -267,7 +267,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: 2px solid #cbd5e1; border: 2px solid #cbd5e1;
border-radius: 6px; border-radius: var(--radius-sm);
width: 20px; width: 20px;
height: 20px; height: 20px;
background: white; background: white;
@@ -322,7 +322,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: none; border: none;
border-radius: 10px; border-radius: var(--radius-lg);
padding: 0.625rem 1.25rem; padding: 0.625rem 1.25rem;
font-size: 0.9375rem; font-size: 0.9375rem;
font-family: inherit; font-family: inherit;

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

@@ -990,7 +990,7 @@ html, body {
======================================== */ ======================================== */
.task-list-enter-active, .task-list-enter-active,
.task-list-leave-active { .task-list-leave-active {
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-medium);
} }
.task-list-enter-from { .task-list-enter-from {
@@ -1004,7 +1004,7 @@ html, body {
} }
.task-list-move { .task-list-move {
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); transition: transform var(--transition-medium);
} }
/* Task item status text colors */ /* Task item status text colors */
@@ -1522,7 +1522,7 @@ html, body {
background: var(--color-background-secondary); background: var(--color-background-secondary);
color: var(--color-text-primary); color: var(--color-text-primary);
cursor: pointer; cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-fast);
white-space: nowrap; white-space: nowrap;
box-shadow: 0 1px 2px rgb(0 0 0 / 5%); box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
} }
@@ -1626,7 +1626,7 @@ html, body {
height: 100%; height: 100%;
background: linear-gradient(90deg, var(--color-accent), var(--color-success)); background: linear-gradient(90deg, var(--color-accent), var(--color-success));
border-radius: var(--radius-full); border-radius: var(--radius-full);
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: width var(--transition-medium);
box-shadow: 0 0 8px rgb(0 122 255 / 25%); box-shadow: 0 0 8px rgb(0 122 255 / 25%);
} }
@@ -1702,7 +1702,7 @@ html, body {
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--color-surface-elevated); background: var(--color-surface-elevated);
color: var(--color-text-primary); color: var(--color-text-primary);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-fast);
box-sizing: border-box; box-sizing: border-box;
} }
@@ -1790,7 +1790,7 @@ html, body {
border: 1px solid var(--color-border-secondary); border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
background: var(--color-background-secondary); background: var(--color-background-secondary);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-fast);
box-shadow: 0 1px 2px rgb(0 0 0 / 5%); box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
} }

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

@@ -25,7 +25,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border: var(--color-border); border: var(--color-border);
border-radius: 20px; border-radius: var(--radius-2xl);
padding: 1.75rem 2rem; padding: 1.75rem 2rem;
background:var(--color-background-secondary); background:var(--color-background-secondary);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
@@ -43,7 +43,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 14px; border-radius: var(--radius-xl);
width: 56px; width: 56px;
height: 56px; height: 56px;
color: var(--color-accent); color: var(--color-accent);
@@ -86,12 +86,12 @@
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
border: none; border: none;
border-radius: 12px; border-radius: var(--radius-lg);
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
font-size: 0.875rem; font-size: 0.875rem;
font-family: inherit; font-family: inherit;
font-weight: 600; font-weight: 600;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-medium);
gap: 0.5rem; gap: 0.5rem;
cursor: pointer; cursor: pointer;
} }
@@ -155,15 +155,15 @@
display: flex; display: flex;
overflow: hidden; overflow: hidden;
border: 1px solid var(--color-border-secondary); border: 1px solid var(--color-border-secondary);
border-radius: 16px; border-radius: var(--radius-xl);
padding: 1.25rem; padding: 1.25rem;
min-height: 180px; min-height: 180px;
background: var(--color-background-secondary); background: var(--color-background-secondary);
box-shadow: box-shadow:
0 2px 8px rgb(0 0 0 / 4%), 0 2px 8px rgb(0 0 0 / 4%),
0 1px 2px rgb(0 0 0 / 6%); 0 1px 2px rgb(0 0 0 / 6%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-medium);
animation: card-enter 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards; animation: card-enter var(--transition-slow) backwards;
animation-delay: var(--delay, 0ms); animation-delay: var(--delay, 0ms);
flex-direction: column; flex-direction: column;
cursor: pointer; cursor: pointer;
@@ -211,7 +211,7 @@
} }
.indicator-dot { .indicator-dot {
border-radius: 50%; border-radius: var(--radius-round);
width: 10px; width: 10px;
height: 10px; height: 10px;
background: var(--color-accent); background: var(--color-accent);
@@ -246,7 +246,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 10px; border-radius: var(--radius-lg);
width: 40px; width: 40px;
height: 40px; height: 40px;
color: var(--color-accent); color: var(--color-accent);
@@ -284,7 +284,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: var(--radius-md);
width: 30px; width: 30px;
height: 30px; height: 30px;
color: var(--color-text-secondary); color: var(--color-text-secondary);
@@ -339,7 +339,7 @@
.status-badge { .status-badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
border-radius: 20px; border-radius: var(--radius-2xl);
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 500; font-weight: 500;
@@ -391,7 +391,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: 2px dashed var(--color-border); border: 2px dashed var(--color-border);
border-radius: 14px; border-radius: var(--radius-xl);
width: 56px; width: 56px;
height: 56px; height: 56px;
color: var(--color-text-tertiary); color: var(--color-text-tertiary);
@@ -434,12 +434,12 @@
Transition Group Animations Transition Group Animations
============================================ */ ============================================ */
.config-list-enter-active { .config-list-enter-active {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-slow);
} }
.config-list-leave-active { .config-list-leave-active {
position: absolute; position: absolute;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all var(--transition-medium);
} }
.config-list-enter-from { .config-list-enter-from {
@@ -453,7 +453,7 @@
} }
.config-list-move { .config-list-move {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: transform var(--transition-slow);
} }
/* ============================================ /* ============================================
@@ -467,7 +467,7 @@
.page-header { .page-header {
align-items: stretch; align-items: stretch;
border-radius: 16px; border-radius: var(--radius-xl);
padding: 1.25rem; padding: 1.25rem;
flex-direction: column; flex-direction: column;
} }

2
src/renderer/pages/css/common/modal.css
View File

@@ -54,7 +54,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 50%; border-radius: var(--radius-round);
width: 32px; width: 32px;
height: 32px; height: 32px;
color: var(--color-text-secondary); color: var(--color-text-secondary);