From 8cff2c208e648b1e2ed61af4ba7ce208ac593008 Mon Sep 17 00:00:00 2001 From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com> Date: Sat, 17 Jan 2026 19:21:26 +0800 Subject: [PATCH] :sparkles: Feature(custom): optimize UI of multiple pages --- .../components/css/FirstTimeGuide.css | 2 +- .../components/css/ImageProcessSetting.css | 4 +- src/renderer/components/css/InputBox.css | 31 ++--- .../components/css/NavigationPage.css | 4 +- .../components/css/PerPicbedSetting.css | 4 +- src/renderer/components/ui/TitleBar.vue | 2 +- src/renderer/i18n/locales/en.json | 1 + src/renderer/i18n/locales/zh-CN.json | 1 + src/renderer/i18n/locales/zh-TW.json | 1 + .../manage/components/CustomSwitch.vue | 31 +++-- src/renderer/manage/pages/BucketPage.vue | 2 +- src/renderer/manage/pages/css/BucketPage.css | 14 +- src/renderer/manage/pages/css/LoginPage.css | 10 +- src/renderer/manage/pages/css/ManageMain.css | 33 +++-- .../manage/pages/css/ManageSetting.css | 7 +- src/renderer/pages/Gallery.vue | 6 +- src/renderer/pages/RenamePage.vue | 4 +- src/renderer/pages/css/Gallery.css | 129 +++++++++--------- src/renderer/pages/css/PicgoSetting.css | 20 +-- src/renderer/pages/css/PluginPage.css | 8 +- src/renderer/pages/css/ShortKey.css | 2 +- src/renderer/pages/css/UploadPage.css | 13 +- 22 files changed, 164 insertions(+), 165 deletions(-) diff --git a/src/renderer/components/css/FirstTimeGuide.css b/src/renderer/components/css/FirstTimeGuide.css index d55e523a..43529534 100644 --- a/src/renderer/components/css/FirstTimeGuide.css +++ b/src/renderer/components/css/FirstTimeGuide.css @@ -172,7 +172,7 @@ } .progress-dot.active { - background: var(--color-primary); + background: var(--color-accent); width: 20px; border-radius: 3px; } diff --git a/src/renderer/components/css/ImageProcessSetting.css b/src/renderer/components/css/ImageProcessSetting.css index 1fef80fb..2b4dd5d0 100644 --- a/src/renderer/components/css/ImageProcessSetting.css +++ b/src/renderer/components/css/ImageProcessSetting.css @@ -617,7 +617,7 @@ small { } .placeholder-category { - border-bottom: 1px solid var(--color-border-light); + border-bottom: 1px solid var(--color-border); } .placeholder-category:last-child { @@ -626,7 +626,7 @@ small { .category-title { margin: 0; - border-bottom: 1px solid var(--color-border-light); + border-bottom: 1px solid var(--color-border); padding: 0.875rem 1rem 0.5rem; font-size: 0.875rem; font-weight: 600; diff --git a/src/renderer/components/css/InputBox.css b/src/renderer/components/css/InputBox.css index 257dd8f1..350c3206 100644 --- a/src/renderer/components/css/InputBox.css +++ b/src/renderer/components/css/InputBox.css @@ -59,17 +59,16 @@ display: flex; justify-content: center; align-items: center; - border: none; border-radius: 0.5rem; - padding: 0.375rem; color: var(--color-text-secondary); - background: var(--color-surface-elevated); + border: 1px solid var(--color-border); + background: var(--color-background-tertiary); transition: all 0.15s ease; cursor: pointer; } .inputbox-close:hover { - color: var(--color-text-primary); + color: var(--color-danger); background: var(--color-surface-elevated); } @@ -106,13 +105,13 @@ } .inputbox-input:hover { - border-color: var(--color-border-hover); - background: var(--color-background-elevated); + border-color: var(--color-accent); + background: var(--color-background-tertiary); } .inputbox-input:focus { - border-color: var(--color-primary); - background: var(--color-background-elevated); + border-color: var(--color-accent); + background: var(--color-background-tertiary); box-shadow: 0 0 0 3px rgb(59 130 246 / 10%); } @@ -138,13 +137,13 @@ } .inputbox-textarea:hover { - border-color: var(--color-border-hover); - background: var(--color-background-elevated); + border-color: var(--color-accent); + background: var(--color-background-tertiary); } .inputbox-textarea:focus { - border-color: var(--color-primary); - background: var(--color-background-elevated); + border-color: var(--color-accent); + background: var(--color-background-tertiary); } .inputbox-textarea::placeholder { @@ -187,18 +186,18 @@ .cancel-btn { border: 1px solid var(--color-border); color: var(--color-text-secondary); - background: var(--color-background-elevated); + background: var(--color-background-secondary); } .cancel-btn:hover { - border-color: var(--color-border-hover); - background: var(--color-background-elevated-hover); + border-color: var(--color-accent); + background: var(--color-background-secondary); } /* Confirm Button */ .confirm-btn { border: none; - color: var(--color-text-on-primary); + color: var(--color-text-primary); background: var(--color-accent); } diff --git a/src/renderer/components/css/NavigationPage.css b/src/renderer/components/css/NavigationPage.css index 679dd7db..c03d3503 100644 --- a/src/renderer/components/css/NavigationPage.css +++ b/src/renderer/components/css/NavigationPage.css @@ -69,7 +69,7 @@ .app-text:hover { cursor: pointer; - color: var(--color-blue-common); + color: var(--color-accent); } .app-version { @@ -79,7 +79,7 @@ font-size: 10px; font-weight: 500; color: var(--color-text-secondary); - background: var(--color-surface); + background: var(--color-background-secondary); } .theme-section { diff --git a/src/renderer/components/css/PerPicbedSetting.css b/src/renderer/components/css/PerPicbedSetting.css index 5f5a8080..ffc016b7 100644 --- a/src/renderer/components/css/PerPicbedSetting.css +++ b/src/renderer/components/css/PerPicbedSetting.css @@ -284,7 +284,7 @@ } .radio-input:checked + .radio-indicator { - border-color: var(--color-blue-common); + border-color: var(--color-accent); } .radio-input:checked + .radio-indicator::after { @@ -294,7 +294,7 @@ border-radius: 50%; width: 6px; height: 6px; - background: var(--color-blue-common); + background: var(--color-accent); content: ''; transform: translate(-50%, -50%); } diff --git a/src/renderer/components/ui/TitleBar.vue b/src/renderer/components/ui/TitleBar.vue index 5d970c72..38aadea4 100644 --- a/src/renderer/components/ui/TitleBar.vue +++ b/src/renderer/components/ui/TitleBar.vue @@ -3,7 +3,7 @@
- +
diff --git a/src/renderer/i18n/locales/en.json b/src/renderer/i18n/locales/en.json index 2039287f..8c2c4f42 100644 --- a/src/renderer/i18n/locales/en.json +++ b/src/renderer/i18n/locales/en.json @@ -264,6 +264,7 @@ "getFileListFailed": "Get file list failed", "getFileListSuccess": "Get file list success", "getInBackground": "Getting file list in background, please do not switch pages", + "imagePreview": "Image Preview", "includeExt": "Include file extensions when replacing", "inputCustomDomain": "Enter Custom Domain", "inputFolderTitle": "Please enter folder name", diff --git a/src/renderer/i18n/locales/zh-CN.json b/src/renderer/i18n/locales/zh-CN.json index 5dd15dbc..883ffa80 100644 --- a/src/renderer/i18n/locales/zh-CN.json +++ b/src/renderer/i18n/locales/zh-CN.json @@ -264,6 +264,7 @@ "getFileListFailed": "获取文件列表失败", "getFileListSuccess": "获取文件列表成功", "getInBackground": "正在后台获取文件列表，请不要切换页面", + "imagePreview": "图像预览", "includeExt": "替换时包含后缀名", "inputCustomDomain": "输入自定义域名", "inputFolderTitle": "请输入文件夹名称", diff --git a/src/renderer/i18n/locales/zh-TW.json b/src/renderer/i18n/locales/zh-TW.json index 626d84a9..33890bac 100644 --- a/src/renderer/i18n/locales/zh-TW.json +++ b/src/renderer/i18n/locales/zh-TW.json @@ -264,6 +264,7 @@ "getFileListFailed": "取得檔案清單失敗", "getFileListSuccess": "取得檔案清單成功", "getInBackground": "正在背景取得檔案清單，請不要切換頁面", + "imagePreview": "圖像預覽", "includeExt": "替換時包含副檔名", "inputCustomDomain": "輸入自訂網域名稱", "inputFolderTitle": "請輸入資料夾名稱", diff --git a/src/renderer/manage/components/CustomSwitch.vue b/src/renderer/manage/components/CustomSwitch.vue index d2f5a16f..61277372 100644 --- a/src/renderer/manage/components/CustomSwitch.vue +++ b/src/renderer/manage/components/CustomSwitch.vue @@ -131,8 +131,8 @@ const toggleTooltip = () => { .switch { position: relative; display: inline-block; - width: 3rem; - height: 1.5rem; + width: 44px; + height: 20px; } .switch-input { @@ -144,30 +144,37 @@ const toggleTooltip = () => { .switch-slider { position: absolute; inset: 0; - border-radius: 0.75rem; - background: var(--color-primary); - transition: var(--transition-fast); + border-radius: 24px; + background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%); + 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; } .switch-button { position: absolute; - top: 2px; + bottom: 2px; left: 2px; border-radius: 50%; - width: 1.25rem; - height: 1.25rem; - background: white; - box-shadow: var(--shadow-sm); - transition: var(--transition-fast); + width: 17px; + height: 17px; + background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%); + 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: ''; } .switch-input:checked + .switch-slider { background: var(--color-accent); + box-shadow: + inset 0 1px 3px rgb(0 0 0 / 10%), + 0 2px 8px color-mix(in srgb, var(--color-accent), transparent 30%); } .switch-input:checked + .switch-slider .switch-button { - transform: translateX(1.5rem); + transform: translateX(23px); } .switch-input:focus + .switch-slider { diff --git a/src/renderer/manage/pages/BucketPage.vue b/src/renderer/manage/pages/BucketPage.vue index 2c9d9013..f1a0125b 100644 --- a/src/renderer/manage/pages/BucketPage.vue +++ b/src/renderer/manage/pages/BucketPage.vue @@ -579,7 +579,7 @@
-

Image Preview

+

{{ t('pages.manage.bucket.imagePreview') }}

diff --git a/src/renderer/manage/pages/css/BucketPage.css b/src/renderer/manage/pages/css/BucketPage.css index c86abdcd..d60f32f0 100644 --- a/src/renderer/manage/pages/css/BucketPage.css +++ b/src/renderer/manage/pages/css/BucketPage.css @@ -59,9 +59,8 @@ .custom-domain-input:focus { border-color: var(--color-accent); - background: white; outline: none; - box-shadow: 0 0 0 3px var(--color-accent-soft); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent); } .custom-domain-select { @@ -185,8 +184,7 @@ } .action-button.secondary:hover { - border-color: var(--color-accent); - color: var(--color-accent); + border-color: var(--color-accent-hover); } .action-button.danger { @@ -217,8 +215,8 @@ .search-input:focus { border-color: var(--color-accent); outline: none; - background: white; - box-shadow: 0 0 0 3px var(--color-accent-soft); + background: var(--color-background-tertiary); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent); } /* Breadcrumb */ @@ -476,7 +474,7 @@ .virtual-gallery-scroller .file-grid-item.selected { border-color: var(--color-accent); - box-shadow: 0 0 0 2px rgb(59 130 246 / 20%); + box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent), transparent 40%); } .virtual-gallery-scroller .file-preview { @@ -773,7 +771,7 @@ } .file-actions-dropdown-item:hover { - color: var(--color-blue-common); + color: var(--color-accent); background: var(--color-surface-elevated); } diff --git a/src/renderer/manage/pages/css/LoginPage.css b/src/renderer/manage/pages/css/LoginPage.css index ff3a0767..7b0daa2d 100644 --- a/src/renderer/manage/pages/css/LoginPage.css +++ b/src/renderer/manage/pages/css/LoginPage.css @@ -47,7 +47,7 @@ .header-icon { display: flex; align-items: center; - color: var(--color-blue-common); + color: var(--color-accent); } .header-content h1 { @@ -174,13 +174,13 @@ .tab-button:hover { border-color: var(--color-border); color: var(--color-text-primary); - background: var(--color-surface-elevated); + background: var(--color-background-tertiary); } .tab-button.active { - border-color: var(--color-primary); + border-color: var(--color-border-secondary); color: white; - background: var(--color-primary); + background: var(--color-accent); } .tab-icon { @@ -379,7 +379,7 @@ .info-card.primary { border: 1px solid rgb(99 102 241 / 20%); - color: var(--color-primary); + color: var(--color-accent); background: rgb(99 102 241 / 10%); } diff --git a/src/renderer/manage/pages/css/ManageMain.css b/src/renderer/manage/pages/css/ManageMain.css index 2e4d8c00..2277f4e0 100644 --- a/src/renderer/manage/pages/css/ManageMain.css +++ b/src/renderer/manage/pages/css/ManageMain.css @@ -277,8 +277,8 @@ html, body { align-items: center; border: none; border-radius: var(--radius-lg); - padding: 0.75rem 1.5rem; - font-size: 0.875rem; + padding: 0.5rem 1rem; + font-size: 0.8rem; font-family: inherit; font-weight: 500; transition: var(--transition-fast); @@ -300,18 +300,16 @@ html, body { .action-button.secondary { border: 1px solid var(--color-border); color: var(--color-text-primary); - background: var(--color-surface-elevated); + background: var(--color-accent); } .action-button.secondary:hover { border-color: var(--color-accent); - color: var(--color-accent); - background: var(--color-surface); } .button-icon { - width: 16px; - height: 16px; + width: 14px; + height: 14px; } /* Dialog styles */ @@ -347,6 +345,7 @@ html, body { .dialog-title { font-size: 1.25rem; + margin-bottom: 10px; font-weight: 600; color: var(--color-text-primary); } @@ -355,7 +354,7 @@ html, body { display: flex; justify-content: center; align-items: center; - border: none; + border: 1px solid var(--color-border); border-radius: 6px; width: 32px; height: 32px; @@ -368,7 +367,7 @@ html, body { .dialog-close:hover { color: var(--color-text-primary); - background: var(--color-surface-elevated); + background: var(--color-surface); } .close-icon { @@ -394,10 +393,10 @@ html, body { position: relative; display: flex; align-items: center; - border: 1px solid var(--color-border); + border: 2px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; - background: var(--color-surface-elevated); + background: var(--color-background-secondary); transition: var(--transition-fast); flex-direction: column; cursor: pointer; @@ -411,16 +410,16 @@ html, body { .picbed-card.active { border-color: var(--color-accent); - background-color: rgb(64 158 255 / 10%); + background-color: var(--color-surface); } .picbed-card.main-card { - border-color: var(--color-error); + border-color: var(--color-primary); } .picbed-card.main-card:hover { - border-color: var(--color-error); - background-color: rgb(255 59 48 / 10%); + border-color: var(--color-primary); + background-color: var(--color-surface); } .card-icon { @@ -449,8 +448,8 @@ html, body { } .card-title { - font-size: 0.875rem; - font-weight: 500; + font-size: 0.9rem; + font-weight: 600; color: var(--color-text-primary); } diff --git a/src/renderer/manage/pages/css/ManageSetting.css b/src/renderer/manage/pages/css/ManageSetting.css index bb714a35..7c511d88 100644 --- a/src/renderer/manage/pages/css/ManageSetting.css +++ b/src/renderer/manage/pages/css/ManageSetting.css @@ -177,7 +177,7 @@ margin: 0; font-size: 1rem; font-weight: 500; - color: var(--color-accent); + color: var(--color-text-primary); } /* Pattern Table */ @@ -190,6 +190,7 @@ width: 100%; border-collapse: collapse; font-size: 0.75rem; + font-weight: 600; } .pattern-table th { @@ -234,7 +235,7 @@ border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.625rem; - background: var(--color-background-secondary); + background: var(--color-background-t); transition: var(--transition-fast); gap: 0.75rem; cursor: pointer; @@ -264,7 +265,7 @@ border-radius: 50%; width: 1.25rem; height: 1.25rem; - background: var(--color-surface-elevated); + background: var(--color-background-tiertiary); transition: var(--transition-fast); flex-shrink: 0; } diff --git a/src/renderer/pages/Gallery.vue b/src/renderer/pages/Gallery.vue index 39280bf5..d338b5f5 100644 --- a/src/renderer/pages/Gallery.vue +++ b/src/renderer/pages/Gallery.vue @@ -95,7 +95,7 @@
@@ -104,7 +104,7 @@
@@ -144,7 +144,7 @@ :placeholder="$t('pages.gallery.searchFilename')" />
diff --git a/src/renderer/pages/RenamePage.vue b/src/renderer/pages/RenamePage.vue index 524c923e..c3ac39de 100644 --- a/src/renderer/pages/RenamePage.vue +++ b/src/renderer/pages/RenamePage.vue @@ -180,9 +180,9 @@ export default { } .form-input:focus { - border-color: var(--color-blue-common); + border-color: var(--color-accent); outline: none; - box-shadow: 0 0 0 2px rgb(64 158 255 / 20%); + box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-hover), transparent 60%); } .form-input.input-error { diff --git a/src/renderer/pages/css/Gallery.css b/src/renderer/pages/css/Gallery.css index a77e62ea..3ecda62b 100644 --- a/src/renderer/pages/css/Gallery.css +++ b/src/renderer/pages/css/Gallery.css @@ -103,7 +103,7 @@ html, body { align-items: center; border: none; border-radius: var(--radius-md); - padding: 0.625rem 1rem; + padding: 0.325rem 0.5rem; font-size: 0.875rem; font-family: inherit; font-weight: 500; @@ -145,7 +145,7 @@ html, body { position: relative; display: inline-block; width: 44px; - height: 24px; + height: 20px; } .custom-switch input { @@ -159,18 +159,18 @@ html, body { inset: 0; border-radius: 24px; 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); cursor: pointer; } .switch-slider::before { position: absolute; - bottom: 3px; - left: 3px; + bottom: 2px; + left: 2px; border-radius: 50%; - width: 18px; - height: 18px; + width: 17px; + height: 17px; background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%); box-shadow: 0 2px 6px rgb(0 0 0 / 20%), @@ -183,11 +183,11 @@ input:checked + .switch-slider { background: var(--color-accent); box-shadow: inset 0 1px 3px rgb(0 0 0 / 10%), - 0 2px 8px rgb(64 158 255 / 30%); + 0 2px 8px color-mix(in srgb, var(--color-accent), transparent 30%); } input:checked + .switch-slider::before { - transform: translateX(20px); + transform: translateX(22px); } /* Grid Size Control */ @@ -220,8 +220,8 @@ input:checked + .switch-slider::before { .grid-slider::-webkit-slider-thumb { border-radius: 50%; - width: 14px; - height: 14px; + width: 15px; + height: 15px; background: var(--color-accent); transition: var(--transition-fast); appearance: none; @@ -230,7 +230,7 @@ input:checked + .switch-slider::before { .grid-slider::-webkit-slider-thumb:hover { transform: scale(1.15); - box-shadow: 0 0 0 3px rgb(56 114 250 / 20%); + box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent), transparent 60%); } .grid-slider::-moz-range-thumb { @@ -245,7 +245,7 @@ input:checked + .switch-slider::before { .grid-slider::-moz-range-thumb:hover { transform: scale(1.15); - box-shadow: 0 0 0 3px rgb(56 114 250 / 20%); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent), transparent 60%); } .grid-value { @@ -311,16 +311,22 @@ input:checked + .switch-slider::before { font-size: 0.85rem; text-align: center; color: var(--color-text-primary); - background: var(--color-surface); + background: var(--color-background-secondary); transition: var(--transition-fast); cursor: pointer; line-height: 1.4; } .custom-select:focus { - border-color: var(--color-accent-hover); + border-color: var(--color-accent); outline: none; - box-shadow: 0 0 0 3px rgb(59 130 246 / 10%); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent), transparent 80%); +} + +.select-option { + font-size: 0.85rem; + color: var(--color-text-primary); + background: var(--color-background-tertiary); } /* Custom Multiselect */ @@ -339,7 +345,7 @@ input:checked + .switch-slider::before { height: 28px; font-size: 0.85rem; color: var(--color-text-primary); - background: var(--color-surface); + background: var(--color-background-secondary); transition: var(--transition-fast); cursor: pointer; line-height: 1.4; @@ -352,7 +358,7 @@ input:checked + .switch-slider::before { .multiselect-trigger:focus, .multiselect-trigger.active { border-color: var(--color-accent-hover); - box-shadow: 0 0 0 2px rgb(59 130 246 / 10%); + box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent), transparent 80%); } .multiselect-dropdown { @@ -409,7 +415,7 @@ input:checked + .switch-slider::before { height: 28px; font-size: 0.75rem; color: var(--color-text-primary); - background: var(--color-surface); + background: var(--color-background-secondary); transition: var(--transition-fast); flex: 1; line-height: 1.2; @@ -443,7 +449,7 @@ input:checked + .switch-slider::before { height: 28px; font-size: 0.85rem; color: var(--color-text-primary); - background: var(--color-surface); + background: var(--color-background-secondary); transition: var(--transition-fast); gap: 0.25rem; cursor: pointer; @@ -457,7 +463,7 @@ input:checked + .switch-slider::before { .sort-button:focus, .sort-button.active { border-color: var(--color-accent-hover); - box-shadow: 0 0 0 2px rgb(59 130 246 / 10%); + box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent), transparent 80%); } .sort-options { @@ -467,7 +473,7 @@ input:checked + .switch-slider::before { border: 1px solid var(--color-border-secondary); border-radius: var(--radius-md); min-width: 160px; - background: var(--color-surface-elevated); + background: var(--color-background-tertiary); box-shadow: var(--shadow-lg); } @@ -480,7 +486,7 @@ input:checked + .switch-slider::before { font-size: 0.95rem; text-align: center; color: var(--color-text-primary); - background: var(--color-surface); + background: var(--color-background-tertiary); transition: var(--transition-fast); cursor: pointer; line-height: 1.4; @@ -513,14 +519,18 @@ input:checked + .switch-slider::before { width: 100%; font-size: 0.8rem; color: var(--color-text-primary); - background: var(--color-surface); + background: var(--color-background-secondary); transition: var(--transition-fast); } .search-input:focus { border-color: var(--color-accent-hover); outline: none; - box-shadow: 0 0 0 3px rgb(59 130 246 / 10%); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-hover), transparent 40%); +} + +.search-input::placeholder { + color: var(--color-text-secondary); } .search-icon { @@ -559,7 +569,7 @@ input:checked + .switch-slider::before { align-items: center; border: none; border-radius: var(--radius-md); - padding: 0.625rem 1rem; + padding: 0.425rem 1rem; font-size: 0.875rem; font-weight: 500; opacity: 0.5; @@ -650,7 +660,7 @@ input:checked + .switch-slider::before { .empty-icon { margin-bottom: 1rem; - color: var(--color-text-secondary); + color: var(--color-accent); } .empty-state h3 { @@ -673,8 +683,6 @@ input:checked + .switch-slider::before { padding: 1.5rem; } - - /* Image Container */ .image-placeholder { @@ -726,7 +734,7 @@ input:checked + .switch-slider::before { .icon-button { display: flex; - justify-content: left; + justify-content: center; align-items: center; border: none; border-radius: var(--radius-md); @@ -744,18 +752,18 @@ input:checked + .switch-slider::before { } .copy-icon:hover { - color: var(--color-copy); - background: rgb(6 182 212 / 10%); + color: var(--color-warning); + background: color-mix(in srgb, var(--color-warning), transparent 90%); } .edit-icon:hover { color: var(--color-success); - background: rgb(16 185 129 / 10%); + background: color-mix(in srgb, var(--color-success), transparent 90%); } .delete-icon:hover { color: var(--color-error); - background: rgb(239 68 68 / 10%); + background: color-mix(in srgb, var(--color-error), transparent 90%); } /* Custom Checkbox */ @@ -779,8 +787,8 @@ input:checked + .switch-slider::before { display: inline-block; border: 2px solid var(--color-border); border-radius: var(--radius-sm); - width: 18px; - height: 18px; + width: 16px; + height: 16px; transition: var(--transition-fast); } @@ -791,8 +799,8 @@ input:checked + .switch-slider::before { .custom-checkbox input[type="checkbox"]:checked + .checkbox-mark::after { position: absolute; - top: -1px; - left: 3px; + top: -2px; + left: 1px; font-size: 12px; font-weight: bold; color: white; @@ -922,7 +930,7 @@ input:checked + .switch-slider::before { margin: 0; margin-right: 1rem; font-size: 1rem; - font-weight: 500; + font-weight: 600; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-primary); @@ -931,8 +939,11 @@ input:checked + .switch-slider::before { .image-counter { font-size: 0.875rem; + margin-right: 1rem; + margin-top: 0.25rem; + font-weight: 600; white-space: nowrap; - color: var(--color-text-secondary); + color: var(--color-text-primary); } /* Modal Overlay */ @@ -979,19 +990,19 @@ input:checked + .switch-slider::before { display: flex; justify-content: center; align-items: center; - border: none; + border: 1px solid var(--color-border-secondary); border-radius: var(--radius-md); width: 32px; height: 32px; color: var(--color-text-secondary); - background: var(--color-surface-elevated); + background: var(--color-background-tertiary); transition: var(--transition-fast); cursor: pointer; } .modal-close-btn:hover { color: var(--color-text-primary); - background: var(--color-border-secondary); + background: var(--color-surface-elevated); } .modal-body { @@ -1038,7 +1049,7 @@ input:checked + .switch-slider::before { } .form-input:focus { - border-color: var(--color-blue-common); + border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px rgb(59 130 246 / 10%); } @@ -1061,21 +1072,6 @@ input:checked + .switch-slider::before { background: var(--color-accent-hover); } -.info-panel { - margin-top: 1rem; - border: 1px solid var(--color-border-secondary); - border-radius: var(--radius-md); - padding: 1rem; - background: var(--color-surface-elevated); -} - -.info-panel h4 { - margin: 0 0 0.75rem; - font-size: 0.875rem; - font-weight: 600; - color: var(--color-text-primary); -} - .placeholder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); @@ -1335,8 +1331,8 @@ input:checked + .switch-slider::before { } .virtual-gallery-scroller .gallery-item.selected { - border-color: var(--color-blue-common); - box-shadow: 0 0 0 2px rgb(59 130 246 / 20%); + border-color: var(--color-accent); + box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent), transparent 40%); } .virtual-gallery-scroller .image-container { @@ -1352,8 +1348,8 @@ input:checked + .switch-slider::before { } .virtual-gallery-scroller .image-container.selected { - outline: 2px solid var(--color-blue-common); - box-shadow: 0 0 0 2px rgb(59 130 246 / 20%); + outline: 2px solid var(--color-accent); + box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent), transparent 60%); } .virtual-gallery-scroller .image-info { @@ -1441,8 +1437,9 @@ input:checked + .switch-slider::before { .image-help-text { margin-top: 0.25rem; font-size: 0.75rem; + font-weight: 500; text-align: center; - color: var(--color-text-tertiary); + color: var(--color-text-primary); } .image-viewer:active { @@ -1504,7 +1501,7 @@ input:checked + .switch-slider::before { } .placeholder-category { - border-bottom: 1px solid var(--color-border-light); + border-bottom: 1px solid var(--color-border); } .placeholder-category:last-child { @@ -1513,7 +1510,7 @@ input:checked + .switch-slider::before { .category-title { margin: 0; - border-bottom: 1px solid var(--color-border-light); + border-bottom: 1px solid var(--color-border); padding: 0.875rem 1rem 0.5rem; font-size: 0.875rem; font-weight: 600; diff --git a/src/renderer/pages/css/PicgoSetting.css b/src/renderer/pages/css/PicgoSetting.css index acd16418..1e2855b0 100644 --- a/src/renderer/pages/css/PicgoSetting.css +++ b/src/renderer/pages/css/PicgoSetting.css @@ -185,9 +185,9 @@ .switch-slider { position: relative; - border-radius: 12px; + border-radius: 24px; width: 44px; - height: 24px; + height: 21px; background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%); box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); @@ -199,8 +199,8 @@ top: 2px; left: 2px; border-radius: 50%; - width: 20px; - height: 20px; + width: 17px; + height: 17px; background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%); box-shadow: 0 2px 6px rgb(0 0 0 / 20%), @@ -213,11 +213,11 @@ background: var(--color-accent); box-shadow: inset 0 1px 3px rgb(0 0 0 / 10%), - 0 2px 8px rgb(64 158 255 / 30%); + 0 2px 8px color-mix(in srgb, var(--color-accent), transparent 30%); } .switch-input:checked + .switch-slider::before { - transform: translateX(20px); + transform: translateX(23px); } .switch-content { @@ -494,7 +494,7 @@ small { } .placeholder-category { - border-bottom: 1px solid var(--color-border-light); + border-bottom: 1px solid var(--color-border); } .placeholder-category:last-child { @@ -503,7 +503,7 @@ small { .category-title { margin: 0; - border-bottom: 1px solid var(--color-border-light); + border-bottom: 1px solid var(--color-border); padding: 0.875rem 1rem 0.5rem; font-size: 0.875rem; font-weight: 600; @@ -905,8 +905,8 @@ small { padding: 0.2rem 0.5rem; font-size: 0.75rem; font-weight: 600; - color: var(--color-primary); - background: var(--color-surface-elevated); + color: var(--color-accent); + background: var(--color-background-tertiary); letter-spacing: 0.02em; } diff --git a/src/renderer/pages/css/PluginPage.css b/src/renderer/pages/css/PluginPage.css index 88fdd8d3..024abcfd 100644 --- a/src/renderer/pages/css/PluginPage.css +++ b/src/renderer/pages/css/PluginPage.css @@ -219,7 +219,7 @@ html, body { align-items: center; font-size: 0.875rem; font-weight: 500; - color: var(--color-text); + color: var(--color-text-primary); gap: 0.5rem; } @@ -235,8 +235,8 @@ html, body { } .checkbox-input:checked + .checkbox-label::before { - border-color: var(--color-primary); - background: var(--color-primary); + border-color: var(--color-accent); + background: var(--color-accent); } .checkbox-input:checked + .checkbox-label::after { @@ -249,7 +249,7 @@ html, body { } .checkbox-label:hover::before { - border-color: var(--color-primary); + border-color: var(--color-accent); } .checkbox-description { diff --git a/src/renderer/pages/css/ShortKey.css b/src/renderer/pages/css/ShortKey.css index 2a7c637e..eb42076e 100644 --- a/src/renderer/pages/css/ShortKey.css +++ b/src/renderer/pages/css/ShortKey.css @@ -334,7 +334,7 @@ } .form-input:focus { - border-color: var(--color-blue-common); + border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 2px rgb(64 158 255 / 20%); } diff --git a/src/renderer/pages/css/UploadPage.css b/src/renderer/pages/css/UploadPage.css index 62527893..04b73e52 100644 --- a/src/renderer/pages/css/UploadPage.css +++ b/src/renderer/pages/css/UploadPage.css @@ -162,7 +162,7 @@ html, body { .picbed-badge:hover { border-color: var(--color-accent-hover); color: var(--color-accent-hover); - background: var(--color-surface-elevated); + background: var(--color-background-tertiary); transform: translateY(-1px); } @@ -350,7 +350,7 @@ html, body { font-size: 0.875rem; font-family: inherit; font-weight: 500; - color: var(--color-text-sec); + color: var(--color-text-secondary); background: transparent; transition: var(--transition-fast); gap: 0.5rem; @@ -364,12 +364,7 @@ html, body { .segmented-button:hover { color: var(--color-accent-hover); - background: var(--color-surface-elevated); -} - -.segmented-button:active { - background: var(--color-surface-elevated); - transform: scale(0.98); + background: var(--color-background-tertiary); } /* Main Upload Card */ @@ -1524,7 +1519,7 @@ html, body { padding: 0.625rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); - background: white; + background: var(--color-background-secondary); color: var(--color-text-primary); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);