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): optimize UI of multiple pages

Browse Source
This commit is contained in:
Kuingsmile
2026-01-17 19:21:26 +08:00
parent 07c0805813
commit 8cff2c208e
22 changed files with 164 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -172,7 +172,7 @@
} }
.progress-dot.active { .progress-dot.active {
background: var(--color-primary); background: var(--color-accent);
width: 20px; width: 20px;
border-radius: 3px; border-radius: 3px;
} }

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

@@ -617,7 +617,7 @@ small {
} }
.placeholder-category { .placeholder-category {
border-bottom: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border);
} }
.placeholder-category:last-child { .placeholder-category:last-child {
@@ -626,7 +626,7 @@ small {
.category-title { .category-title {
margin: 0; margin: 0;
border-bottom: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border);
padding: 0.875rem 1rem 0.5rem; padding: 0.875rem 1rem 0.5rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;

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

@@ -59,17 +59,16 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: none;
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 0.375rem;
color: var(--color-text-secondary); 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; transition: all 0.15s ease;
cursor: pointer; cursor: pointer;
} }
.inputbox-close:hover { .inputbox-close:hover {
color: var(--color-text-primary); color: var(--color-danger);
background: var(--color-surface-elevated); background: var(--color-surface-elevated);
} }
@@ -106,13 +105,13 @@
} }
.inputbox-input:hover { .inputbox-input:hover {
border-color: var(--color-border-hover); border-color: var(--color-accent);
background: var(--color-background-elevated); background: var(--color-background-tertiary);
} }
.inputbox-input:focus { .inputbox-input:focus {
border-color: var(--color-primary); border-color: var(--color-accent);
background: var(--color-background-elevated); background: var(--color-background-tertiary);
box-shadow: 0 0 0 3px rgb(59 130 246 / 10%); box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
} }
@@ -138,13 +137,13 @@
} }
.inputbox-textarea:hover { .inputbox-textarea:hover {
border-color: var(--color-border-hover); border-color: var(--color-accent);
background: var(--color-background-elevated); background: var(--color-background-tertiary);
} }
.inputbox-textarea:focus { .inputbox-textarea:focus {
border-color: var(--color-primary); border-color: var(--color-accent);
background: var(--color-background-elevated); background: var(--color-background-tertiary);
} }
.inputbox-textarea::placeholder { .inputbox-textarea::placeholder {
@@ -187,18 +186,18 @@
.cancel-btn { .cancel-btn {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
color: var(--color-text-secondary); color: var(--color-text-secondary);
background: var(--color-background-elevated); background: var(--color-background-secondary);
} }
.cancel-btn:hover { .cancel-btn:hover {
border-color: var(--color-border-hover); border-color: var(--color-accent);
background: var(--color-background-elevated-hover); background: var(--color-background-secondary);
} }
/* Confirm Button */ /* Confirm Button */
.confirm-btn { .confirm-btn {
border: none; border: none;
color: var(--color-text-on-primary); color: var(--color-text-primary);
background: var(--color-accent); background: var(--color-accent);
} }

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

@@ -69,7 +69,7 @@
.app-text:hover { .app-text:hover {
cursor: pointer; cursor: pointer;
color: var(--color-blue-common); color: var(--color-accent);
} }
.app-version { .app-version {
@@ -79,7 +79,7 @@
font-size: 10px; font-size: 10px;
font-weight: 500; font-weight: 500;
color: var(--color-text-secondary); color: var(--color-text-secondary);
background: var(--color-surface); background: var(--color-background-secondary);
} }
.theme-section { .theme-section {

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

@@ -284,7 +284,7 @@
} }
.radio-input:checked + .radio-indicator { .radio-input:checked + .radio-indicator {
border-color: var(--color-blue-common); border-color: var(--color-accent);
} }
.radio-input:checked + .radio-indicator::after { .radio-input:checked + .radio-indicator::after {
@@ -294,7 +294,7 @@
border-radius: 50%; border-radius: 50%;
width: 6px; width: 6px;
height: 6px; height: 6px;
background: var(--color-blue-common); background: var(--color-accent);
content: ''; content: '';
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }

2
src/renderer/components/ui/TitleBar.vue
View File

@@ -3,7 +3,7 @@
<div class="title-bar-content"> <div class="title-bar-content">
<div v-if="osGlobal !== 'darwin'" class="title-left"> <div v-if="osGlobal !== 'darwin'" class="title-left">
<div class="app-icon"> <div class="app-icon">
<img :src="defaultLogo" width="20" height="20" /> <img :src="defaultLogo" width="18" height="18" />
</div> </div>
</div> </div>

1
src/renderer/i18n/locales/en.json
View File

@@ -264,6 +264,7 @@
"getFileListFailed": "Get file list failed", "getFileListFailed": "Get file list failed",
"getFileListSuccess": "Get file list success", "getFileListSuccess": "Get file list success",
"getInBackground": "Getting file list in background, please do not switch pages", "getInBackground": "Getting file list in background, please do not switch pages",
"imagePreview": "Image Preview",
"includeExt": "Include file extensions when replacing", "includeExt": "Include file extensions when replacing",
"inputCustomDomain": "Enter Custom Domain", "inputCustomDomain": "Enter Custom Domain",
"inputFolderTitle": "Please enter folder name", "inputFolderTitle": "Please enter folder name",

1
src/renderer/i18n/locales/zh-CN.json
View File

@@ -264,6 +264,7 @@
"getFileListFailed": "获取文件列表失败", "getFileListFailed": "获取文件列表失败",
"getFileListSuccess": "获取文件列表成功", "getFileListSuccess": "获取文件列表成功",
"getInBackground": "正在后台获取文件列表，请不要切换页面", "getInBackground": "正在后台获取文件列表，请不要切换页面",
"imagePreview": "图像预览",
"includeExt": "替换时包含后缀名", "includeExt": "替换时包含后缀名",
"inputCustomDomain": "输入自定义域名", "inputCustomDomain": "输入自定义域名",
"inputFolderTitle": "请输入文件夹名称", "inputFolderTitle": "请输入文件夹名称",

1
src/renderer/i18n/locales/zh-TW.json
View File

@@ -264,6 +264,7 @@
"getFileListFailed": "取得檔案清單失敗", "getFileListFailed": "取得檔案清單失敗",
"getFileListSuccess": "取得檔案清單成功", "getFileListSuccess": "取得檔案清單成功",
"getInBackground": "正在背景取得檔案清單，請不要切換頁面", "getInBackground": "正在背景取得檔案清單，請不要切換頁面",
"imagePreview": "圖像預覽",
"includeExt": "替換時包含副檔名", "includeExt": "替換時包含副檔名",
"inputCustomDomain": "輸入自訂網域名稱", "inputCustomDomain": "輸入自訂網域名稱",
"inputFolderTitle": "請輸入資料夾名稱", "inputFolderTitle": "請輸入資料夾名稱",

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

@@ -131,8 +131,8 @@ const toggleTooltip = () => {
.switch { .switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 3rem; width: 44px;
height: 1.5rem; height: 20px;
} }
.switch-input { .switch-input {
@@ -144,30 +144,37 @@ const toggleTooltip = () => {
.switch-slider { .switch-slider {
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: 0.75rem; border-radius: 24px;
background: var(--color-primary); background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
transition: var(--transition-fast); box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer; cursor: pointer;
} }
.switch-button { .switch-button {
position: absolute; position: absolute;
top: 2px; bottom: 2px;
left: 2px; left: 2px;
border-radius: 50%; border-radius: 50%;
width: 1.25rem; width: 17px;
height: 1.25rem; height: 17px;
background: white; background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
box-shadow: var(--shadow-sm); box-shadow:
transition: var(--transition-fast); 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 { .switch-input:checked + .switch-slider {
background: var(--color-accent); background: var(--color-accent);
box-shadow:
inset 0 1px 3px rgb(0 0 0 / 10%),
0 2px 8px color-mix(in srgb, var(--color-accent), transparent 30%);
} }
.switch-input:checked + .switch-slider .switch-button { .switch-input:checked + .switch-slider .switch-button {
transform: translateX(1.5rem); transform: translateX(23px);
} }
.switch-input:focus + .switch-slider { .switch-input:focus + .switch-slider {

2
src/renderer/manage/pages/BucketPage.vue
View File

@@ -579,7 +579,7 @@
<div v-if="isShowImagePreview" class="modal-overlay" @click="isShowImagePreview = false"> <div v-if="isShowImagePreview" class="modal-overlay" @click="isShowImagePreview = false">
<div class="modal-container" style="max-width: 90vw; max-height: 90vh" @click.stop> <div class="modal-container" style="max-width: 90vw; max-height: 90vh" @click.stop>
<div class="modal-header"> <div class="modal-header">
<h3 class="modal-title">Image Preview</h3> <h3 class="modal-title">{{ t('pages.manage.bucket.imagePreview') }}</h3>
<button class="modal-close" @click="isShowImagePreview = false"> <button class="modal-close" @click="isShowImagePreview = false">
<XIcon class="action-icon" /> <XIcon class="action-icon" />
</button> </button>

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

@@ -59,9 +59,8 @@
.custom-domain-input:focus { .custom-domain-input:focus {
border-color: var(--color-accent); border-color: var(--color-accent);
background: white;
outline: none; outline: none;
box-shadow: 0 0 0 3px var(--color-accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
} }
.custom-domain-select { .custom-domain-select {
@@ -185,8 +184,7 @@
} }
.action-button.secondary:hover { .action-button.secondary:hover {
border-color: var(--color-accent); border-color: var(--color-accent-hover);
color: var(--color-accent);
} }
.action-button.danger { .action-button.danger {
@@ -217,8 +215,8 @@
.search-input:focus { .search-input:focus {
border-color: var(--color-accent); border-color: var(--color-accent);
outline: none; outline: none;
background: white; background: var(--color-background-tertiary);
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);
} }
/* Breadcrumb */ /* Breadcrumb */
@@ -476,7 +474,7 @@
.virtual-gallery-scroller .file-grid-item.selected { .virtual-gallery-scroller .file-grid-item.selected {
border-color: var(--color-accent); 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 { .virtual-gallery-scroller .file-preview {
@@ -773,7 +771,7 @@
} }
.file-actions-dropdown-item:hover { .file-actions-dropdown-item:hover {
color: var(--color-blue-common); color: var(--color-accent);
background: var(--color-surface-elevated); background: var(--color-surface-elevated);
} }

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

@@ -47,7 +47,7 @@
.header-icon { .header-icon {
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--color-blue-common); color: var(--color-accent);
} }
.header-content h1 { .header-content h1 {
@@ -174,13 +174,13 @@
.tab-button:hover { .tab-button:hover {
border-color: var(--color-border); border-color: var(--color-border);
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-surface-elevated); background: var(--color-background-tertiary);
} }
.tab-button.active { .tab-button.active {
border-color: var(--color-primary); border-color: var(--color-border-secondary);
color: white; color: white;
background: var(--color-primary); background: var(--color-accent);
} }
.tab-icon { .tab-icon {
@@ -379,7 +379,7 @@
.info-card.primary { .info-card.primary {
border: 1px solid rgb(99 102 241 / 20%); border: 1px solid rgb(99 102 241 / 20%);
color: var(--color-primary); color: var(--color-accent);
background: rgb(99 102 241 / 10%); background: rgb(99 102 241 / 10%);
} }

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

@@ -277,8 +277,8 @@ html, body {
align-items: center; align-items: center;
border: none; border: none;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 0.75rem 1.5rem; padding: 0.5rem 1rem;
font-size: 0.875rem; font-size: 0.8rem;
font-family: inherit; font-family: inherit;
font-weight: 500; font-weight: 500;
transition: var(--transition-fast); transition: var(--transition-fast);
@@ -300,18 +300,16 @@ html, body {
.action-button.secondary { .action-button.secondary {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-surface-elevated); background: var(--color-accent);
} }
.action-button.secondary:hover { .action-button.secondary:hover {
border-color: var(--color-accent); border-color: var(--color-accent);
color: var(--color-accent);
background: var(--color-surface);
} }
.button-icon { .button-icon {
width: 16px; width: 14px;
height: 16px; height: 14px;
} }
/* Dialog styles */ /* Dialog styles */
@@ -347,6 +345,7 @@ html, body {
.dialog-title { .dialog-title {
font-size: 1.25rem; font-size: 1.25rem;
margin-bottom: 10px;
font-weight: 600; font-weight: 600;
color: var(--color-text-primary); color: var(--color-text-primary);
} }
@@ -355,7 +354,7 @@ html, body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: none; border: 1px solid var(--color-border);
border-radius: 6px; border-radius: 6px;
width: 32px; width: 32px;
height: 32px; height: 32px;
@@ -368,7 +367,7 @@ html, body {
.dialog-close:hover { .dialog-close:hover {
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-surface-elevated); background: var(--color-surface);
} }
.close-icon { .close-icon {
@@ -394,10 +393,10 @@ html, body {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid var(--color-border); border: 2px solid var(--color-border);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 1.5rem; padding: 1.5rem;
background: var(--color-surface-elevated); background: var(--color-background-secondary);
transition: var(--transition-fast); transition: var(--transition-fast);
flex-direction: column; flex-direction: column;
cursor: pointer; cursor: pointer;
@@ -411,16 +410,16 @@ html, body {
.picbed-card.active { .picbed-card.active {
border-color: var(--color-accent); border-color: var(--color-accent);
background-color: rgb(64 158 255 / 10%); background-color: var(--color-surface);
} }
.picbed-card.main-card { .picbed-card.main-card {
border-color: var(--color-error); border-color: var(--color-primary);
} }
.picbed-card.main-card:hover { .picbed-card.main-card:hover {
border-color: var(--color-error); border-color: var(--color-primary);
background-color: rgb(255 59 48 / 10%); background-color: var(--color-surface);
} }
.card-icon { .card-icon {
@@ -449,8 +448,8 @@ html, body {
} }
.card-title { .card-title {
font-size: 0.875rem; font-size: 0.9rem;
font-weight: 500; font-weight: 600;
color: var(--color-text-primary); color: var(--color-text-primary);
} }

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

@@ -177,7 +177,7 @@
margin: 0; margin: 0;
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 500;
color: var(--color-accent); color: var(--color-text-primary);
} }
/* Pattern Table */ /* Pattern Table */
@@ -190,6 +190,7 @@
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600;
} }
.pattern-table th { .pattern-table th {
@@ -234,7 +235,7 @@
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: 0.625rem; padding: 0.625rem;
background: var(--color-background-secondary); background: var(--color-background-t);
transition: var(--transition-fast); transition: var(--transition-fast);
gap: 0.75rem; gap: 0.75rem;
cursor: pointer; cursor: pointer;
@@ -264,7 +265,7 @@
border-radius: 50%; border-radius: 50%;
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
background: var(--color-surface-elevated); background: var(--color-background-tiertiary);
transition: var(--transition-fast); transition: var(--transition-fast);
flex-shrink: 0; flex-shrink: 0;
} }

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

@@ -95,7 +95,7 @@
<div class="filter-group"> <div class="filter-group">
<label class="filter-label">{{ t('pages.gallery.pasteFormat') }}</label> <label class="filter-label">{{ t('pages.gallery.pasteFormat') }}</label>
<select v-model="pasteStyle" class="custom-select" @change="handlePasteStyleChange"> <select v-model="pasteStyle" class="custom-select" @change="handlePasteStyleChange">
<option v-for="(value, key) in pasteStyleMap" :key="key" :value="value"> <option v-for="(value, key) in pasteStyleMap" :key="key" :value="value" class="select-option">
{{ key }} {{ key }}
</option> </option>
</select> </select>
@@ -104,7 +104,7 @@
<div class="filter-group"> <div class="filter-group">
<label class="filter-label">{{ t('pages.gallery.urlType') }}</label> <label class="filter-label">{{ t('pages.gallery.urlType') }}</label>
<select v-model="useShortUrl" class="custom-select" @change="handleUseShortUrlChange"> <select v-model="useShortUrl" class="custom-select" @change="handleUseShortUrlChange">
<option v-for="(value, key) in shortURLMap" :key="key" :value="value"> <option v-for="(value, key) in shortURLMap" :key="key" :value="value" class="select-option">
{{ key }} {{ key }}
</option> </option>
</select> </select>
@@ -144,7 +144,7 @@
:placeholder="$t('pages.gallery.searchFilename')" :placeholder="$t('pages.gallery.searchFilename')"
/> />
<button v-if="searchText" class="clear-button" @click="cleanSearch"> <button v-if="searchText" class="clear-button" @click="cleanSearch">
<XIcon :size="14" /> <XIcon :size="15" />
</button> </button>
</div> </div>
</div> </div>

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

@@ -180,9 +180,9 @@ export default {
} }
.form-input:focus { .form-input:focus {
border-color: var(--color-blue-common); border-color: var(--color-accent);
outline: none; 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 { .form-input.input-error {

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

@@ -103,7 +103,7 @@ html, body {
align-items: center; align-items: center;
border: none; border: none;
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: 0.625rem 1rem; padding: 0.325rem 0.5rem;
font-size: 0.875rem; font-size: 0.875rem;
font-family: inherit; font-family: inherit;
font-weight: 500; font-weight: 500;
@@ -145,7 +145,7 @@ html, body {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 44px; width: 44px;
height: 24px; height: 20px;
} }
.custom-switch input { .custom-switch input {
@@ -159,18 +159,18 @@ html, body {
inset: 0; inset: 0;
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 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer; cursor: pointer;
} }
.switch-slider::before { .switch-slider::before {
position: absolute; position: absolute;
bottom: 3px; bottom: 2px;
left: 3px; left: 2px;
border-radius: 50%; border-radius: 50%;
width: 18px; width: 17px;
height: 18px; 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%),
@@ -183,11 +183,11 @@ input:checked + .switch-slider {
background: var(--color-accent); background: var(--color-accent);
box-shadow: box-shadow:
inset 0 1px 3px rgb(0 0 0 / 10%), 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 { input:checked + .switch-slider::before {
transform: translateX(20px); transform: translateX(22px);
} }
/* Grid Size Control */ /* Grid Size Control */
@@ -220,8 +220,8 @@ input:checked + .switch-slider::before {
.grid-slider::-webkit-slider-thumb { .grid-slider::-webkit-slider-thumb {
border-radius: 50%; border-radius: 50%;
width: 14px; width: 15px;
height: 14px; height: 15px;
background: var(--color-accent); background: var(--color-accent);
transition: var(--transition-fast); transition: var(--transition-fast);
appearance: none; appearance: none;
@@ -230,7 +230,7 @@ input:checked + .switch-slider::before {
.grid-slider::-webkit-slider-thumb:hover { .grid-slider::-webkit-slider-thumb:hover {
transform: scale(1.15); 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 { .grid-slider::-moz-range-thumb {
@@ -245,7 +245,7 @@ input:checked + .switch-slider::before {
.grid-slider::-moz-range-thumb:hover { .grid-slider::-moz-range-thumb:hover {
transform: scale(1.15); 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 { .grid-value {
@@ -311,16 +311,22 @@ input:checked + .switch-slider::before {
font-size: 0.85rem; font-size: 0.85rem;
text-align: center; text-align: center;
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-surface); background: var(--color-background-secondary);
transition: var(--transition-fast); transition: var(--transition-fast);
cursor: pointer; cursor: pointer;
line-height: 1.4; line-height: 1.4;
} }
.custom-select:focus { .custom-select:focus {
border-color: var(--color-accent-hover); border-color: var(--color-accent);
outline: none; 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 */ /* Custom Multiselect */
@@ -339,7 +345,7 @@ input:checked + .switch-slider::before {
height: 28px; height: 28px;
font-size: 0.85rem; font-size: 0.85rem;
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-surface); background: var(--color-background-secondary);
transition: var(--transition-fast); transition: var(--transition-fast);
cursor: pointer; cursor: pointer;
line-height: 1.4; line-height: 1.4;
@@ -352,7 +358,7 @@ input:checked + .switch-slider::before {
.multiselect-trigger:focus, .multiselect-trigger:focus,
.multiselect-trigger.active { .multiselect-trigger.active {
border-color: var(--color-accent-hover); 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 { .multiselect-dropdown {
@@ -409,7 +415,7 @@ input:checked + .switch-slider::before {
height: 28px; height: 28px;
font-size: 0.75rem; font-size: 0.75rem;
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-surface); background: var(--color-background-secondary);
transition: var(--transition-fast); transition: var(--transition-fast);
flex: 1; flex: 1;
line-height: 1.2; line-height: 1.2;
@@ -443,7 +449,7 @@ input:checked + .switch-slider::before {
height: 28px; height: 28px;
font-size: 0.85rem; font-size: 0.85rem;
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-surface); background: var(--color-background-secondary);
transition: var(--transition-fast); transition: var(--transition-fast);
gap: 0.25rem; gap: 0.25rem;
cursor: pointer; cursor: pointer;
@@ -457,7 +463,7 @@ input:checked + .switch-slider::before {
.sort-button:focus, .sort-button:focus,
.sort-button.active { .sort-button.active {
border-color: var(--color-accent-hover); 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 { .sort-options {
@@ -467,7 +473,7 @@ input:checked + .switch-slider::before {
border: 1px solid var(--color-border-secondary); border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-md); border-radius: var(--radius-md);
min-width: 160px; min-width: 160px;
background: var(--color-surface-elevated); background: var(--color-background-tertiary);
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
} }
@@ -480,7 +486,7 @@ input:checked + .switch-slider::before {
font-size: 0.95rem; font-size: 0.95rem;
text-align: center; text-align: center;
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-surface); background: var(--color-background-tertiary);
transition: var(--transition-fast); transition: var(--transition-fast);
cursor: pointer; cursor: pointer;
line-height: 1.4; line-height: 1.4;
@@ -513,14 +519,18 @@ input:checked + .switch-slider::before {
width: 100%; width: 100%;
font-size: 0.8rem; font-size: 0.8rem;
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-surface); background: var(--color-background-secondary);
transition: var(--transition-fast); transition: var(--transition-fast);
} }
.search-input:focus { .search-input:focus {
border-color: var(--color-accent-hover); border-color: var(--color-accent-hover);
outline: none; 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 { .search-icon {
@@ -559,7 +569,7 @@ input:checked + .switch-slider::before {
align-items: center; align-items: center;
border: none; border: none;
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: 0.625rem 1rem; padding: 0.425rem 1rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
opacity: 0.5; opacity: 0.5;
@@ -650,7 +660,7 @@ input:checked + .switch-slider::before {
.empty-icon { .empty-icon {
margin-bottom: 1rem; margin-bottom: 1rem;
color: var(--color-text-secondary); color: var(--color-accent);
} }
.empty-state h3 { .empty-state h3 {
@@ -673,8 +683,6 @@ input:checked + .switch-slider::before {
padding: 1.5rem; padding: 1.5rem;
} }
/* Image Container */ /* Image Container */
.image-placeholder { .image-placeholder {
@@ -726,7 +734,7 @@ input:checked + .switch-slider::before {
.icon-button { .icon-button {
display: flex; display: flex;
justify-content: left; justify-content: center;
align-items: center; align-items: center;
border: none; border: none;
border-radius: var(--radius-md); border-radius: var(--radius-md);
@@ -744,18 +752,18 @@ input:checked + .switch-slider::before {
} }
.copy-icon:hover { .copy-icon:hover {
color: var(--color-copy); color: var(--color-warning);
background: rgb(6 182 212 / 10%); background: color-mix(in srgb, var(--color-warning), transparent 90%);
} }
.edit-icon:hover { .edit-icon:hover {
color: var(--color-success); color: var(--color-success);
background: rgb(16 185 129 / 10%); background: color-mix(in srgb, var(--color-success), transparent 90%);
} }
.delete-icon:hover { .delete-icon:hover {
color: var(--color-error); color: var(--color-error);
background: rgb(239 68 68 / 10%); background: color-mix(in srgb, var(--color-error), transparent 90%);
} }
/* Custom Checkbox */ /* Custom Checkbox */
@@ -779,8 +787,8 @@ input:checked + .switch-slider::before {
display: inline-block; display: inline-block;
border: 2px solid var(--color-border); border: 2px solid var(--color-border);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
width: 18px; width: 16px;
height: 18px; height: 16px;
transition: var(--transition-fast); transition: var(--transition-fast);
} }
@@ -791,8 +799,8 @@ input:checked + .switch-slider::before {
.custom-checkbox input[type="checkbox"]:checked + .checkbox-mark::after { .custom-checkbox input[type="checkbox"]:checked + .checkbox-mark::after {
position: absolute; position: absolute;
top: -1px; top: -2px;
left: 3px; left: 1px;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
color: white; color: white;
@@ -922,7 +930,7 @@ input:checked + .switch-slider::before {
margin: 0; margin: 0;
margin-right: 1rem; margin-right: 1rem;
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 600;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
color: var(--color-text-primary); color: var(--color-text-primary);
@@ -931,8 +939,11 @@ input:checked + .switch-slider::before {
.image-counter { .image-counter {
font-size: 0.875rem; font-size: 0.875rem;
margin-right: 1rem;
margin-top: 0.25rem;
font-weight: 600;
white-space: nowrap; white-space: nowrap;
color: var(--color-text-secondary); color: var(--color-text-primary);
} }
/* Modal Overlay */ /* Modal Overlay */
@@ -979,19 +990,19 @@ input:checked + .switch-slider::before {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border: none; border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-md); border-radius: var(--radius-md);
width: 32px; width: 32px;
height: 32px; height: 32px;
color: var(--color-text-secondary); color: var(--color-text-secondary);
background: var(--color-surface-elevated); background: var(--color-background-tertiary);
transition: var(--transition-fast); transition: var(--transition-fast);
cursor: pointer; cursor: pointer;
} }
.modal-close-btn:hover { .modal-close-btn:hover {
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-border-secondary); background: var(--color-surface-elevated);
} }
.modal-body { .modal-body {
@@ -1038,7 +1049,7 @@ input:checked + .switch-slider::before {
} }
.form-input:focus { .form-input:focus {
border-color: var(--color-blue-common); border-color: var(--color-accent);
outline: none; outline: none;
box-shadow: 0 0 0 3px rgb(59 130 246 / 10%); 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); 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 { .placeholder-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -1335,8 +1331,8 @@ input:checked + .switch-slider::before {
} }
.virtual-gallery-scroller .gallery-item.selected { .virtual-gallery-scroller .gallery-item.selected {
border-color: var(--color-blue-common); 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 .image-container { .virtual-gallery-scroller .image-container {
@@ -1352,8 +1348,8 @@ input:checked + .switch-slider::before {
} }
.virtual-gallery-scroller .image-container.selected { .virtual-gallery-scroller .image-container.selected {
outline: 2px solid var(--color-blue-common); outline: 2px solid 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 60%);
} }
.virtual-gallery-scroller .image-info { .virtual-gallery-scroller .image-info {
@@ -1441,8 +1437,9 @@ input:checked + .switch-slider::before {
.image-help-text { .image-help-text {
margin-top: 0.25rem; margin-top: 0.25rem;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 500;
text-align: center; text-align: center;
color: var(--color-text-tertiary); color: var(--color-text-primary);
} }
.image-viewer:active { .image-viewer:active {
@@ -1504,7 +1501,7 @@ input:checked + .switch-slider::before {
} }
.placeholder-category { .placeholder-category {
border-bottom: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border);
} }
.placeholder-category:last-child { .placeholder-category:last-child {
@@ -1513,7 +1510,7 @@ input:checked + .switch-slider::before {
.category-title { .category-title {
margin: 0; margin: 0;
border-bottom: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border);
padding: 0.875rem 1rem 0.5rem; padding: 0.875rem 1rem 0.5rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;

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

@@ -185,9 +185,9 @@
.switch-slider { .switch-slider {
position: relative; position: relative;
border-radius: 12px; border-radius: 24px;
width: 44px; width: 44px;
height: 24px; 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 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -199,8 +199,8 @@
top: 2px; top: 2px;
left: 2px; left: 2px;
border-radius: 50%; border-radius: 50%;
width: 20px; width: 17px;
height: 20px; 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%),
@@ -213,11 +213,11 @@
background: var(--color-accent); background: var(--color-accent);
box-shadow: box-shadow:
inset 0 1px 3px rgb(0 0 0 / 10%), 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 { .switch-input:checked + .switch-slider::before {
transform: translateX(20px); transform: translateX(23px);
} }
.switch-content { .switch-content {
@@ -494,7 +494,7 @@ small {
} }
.placeholder-category { .placeholder-category {
border-bottom: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border);
} }
.placeholder-category:last-child { .placeholder-category:last-child {
@@ -503,7 +503,7 @@ small {
.category-title { .category-title {
margin: 0; margin: 0;
border-bottom: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border);
padding: 0.875rem 1rem 0.5rem; padding: 0.875rem 1rem 0.5rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
@@ -905,8 +905,8 @@ small {
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
color: var(--color-primary); color: var(--color-accent);
background: var(--color-surface-elevated); background: var(--color-background-tertiary);
letter-spacing: 0.02em; letter-spacing: 0.02em;
} }

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

@@ -219,7 +219,7 @@ html, body {
align-items: center; align-items: center;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
color: var(--color-text); color: var(--color-text-primary);
gap: 0.5rem; gap: 0.5rem;
} }
@@ -235,8 +235,8 @@ html, body {
} }
.checkbox-input:checked + .checkbox-label::before { .checkbox-input:checked + .checkbox-label::before {
border-color: var(--color-primary); border-color: var(--color-accent);
background: var(--color-primary); background: var(--color-accent);
} }
.checkbox-input:checked + .checkbox-label::after { .checkbox-input:checked + .checkbox-label::after {
@@ -249,7 +249,7 @@ html, body {
} }
.checkbox-label:hover::before { .checkbox-label:hover::before {
border-color: var(--color-primary); border-color: var(--color-accent);
} }
.checkbox-description { .checkbox-description {

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

@@ -334,7 +334,7 @@
} }
.form-input:focus { .form-input:focus {
border-color: var(--color-blue-common); border-color: var(--color-accent);
outline: none; outline: none;
box-shadow: 0 0 0 2px rgb(64 158 255 / 20%); box-shadow: 0 0 0 2px rgb(64 158 255 / 20%);
} }

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

@@ -162,7 +162,7 @@ html, body {
.picbed-badge:hover { .picbed-badge:hover {
border-color: var(--color-accent-hover); border-color: var(--color-accent-hover);
color: var(--color-accent-hover); color: var(--color-accent-hover);
background: var(--color-surface-elevated); background: var(--color-background-tertiary);
transform: translateY(-1px); transform: translateY(-1px);
} }
@@ -350,7 +350,7 @@ html, body {
font-size: 0.875rem; font-size: 0.875rem;
font-family: inherit; font-family: inherit;
font-weight: 500; font-weight: 500;
color: var(--color-text-sec); color: var(--color-text-secondary);
background: transparent; background: transparent;
transition: var(--transition-fast); transition: var(--transition-fast);
gap: 0.5rem; gap: 0.5rem;
@@ -364,12 +364,7 @@ html, body {
.segmented-button:hover { .segmented-button:hover {
color: var(--color-accent-hover); color: var(--color-accent-hover);
background: var(--color-surface-elevated); background: var(--color-background-tertiary);
}
.segmented-button:active {
background: var(--color-surface-elevated);
transform: scale(0.98);
} }
/* Main Upload Card */ /* Main Upload Card */
@@ -1524,7 +1519,7 @@ html, body {
padding: 0.625rem 1rem; padding: 0.625rem 1rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: white; 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 0.2s cubic-bezier(0.4, 0, 0.2, 1);