GithubBackup/PicList
1
0
Fork 0
mirror of https://github.com/Kuingsmile/PicList.git synced 2026-08-28 19:47:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ Feature(custom): avoide overwrite css file if already exist

Browse Source
This commit is contained in:
Kuingsmile
2026-01-15 10:39:50 +08:00
parent bccb33e3c5
commit 5e73e1a2b6
10 changed files with 109 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/apis/app/theme/index.ts
+13 -10
View File
@@ -21,14 +21,14 @@ export async function resolveThemes(): Promise<{ key: string; label: string }[]>
const result: string[] = [] const result: string[] = []
files.forEach(item => { files.forEach(item => {
if (item.stats?.isFile()) { if (item.stats?.isFile()) {
result.push(item.path.replace(themesDir() + '/', '')) result.push(path.basename(item.path))
} }
}) })
const themes = await Promise.all( const themes = await Promise.all(
result result
.filter(file => file.endsWith('.css')) .filter(file => file.endsWith('.css'))
.map(async file => { .map(async file => {
const css = (await fs.readFile(file, 'utf-8')) || '' const css = (await fs.readFile(path.join(themesDir(), file), 'utf-8')) || ''
let name = file let name = file
if (css.startsWith('/*')) { if (css.startsWith('/*')) {
name = css.split('\n')[0].replace('/*', '').replace('*/', '').trim() || file name = css.split('\n')[0].replace('/*', '').replace('*/', '').trim() || file
@@ -44,13 +44,17 @@ export async function resolveThemes(): Promise<{ key: string; label: string }[]>
} }
export async function fetchThemes(): Promise<void> { export async function fetchThemes(): Promise<void> {
const zipUrl = 'https://github.com/Kuingsmile/piclist-themeHub/releases/download/latest/themes.zip' try {
const zipData = await axios.get(zipUrl, { const zipUrl = 'https://github.com/Kuingsmile/piclist-themeHub/releases/download/latest/themes.zip'
responseType: 'arraybuffer', const zipData = await axios.get(zipUrl, {
headers: { 'Content-Type': 'application/octet-stream' }, responseType: 'arraybuffer',
}) headers: { 'Content-Type': 'application/octet-stream' },
const zip = new AdmZip(zipData.data as Buffer) })
zip.extractAllTo(themesDir(), true) const zip = new AdmZip(zipData.data as Buffer)
zip.extractAllTo(themesDir(), true)
} catch (_e) {
console.error('Failed to fetch themes from remote.')
}
} }
export async function importThemes(files: string[]): Promise<void> { export async function importThemes(files: string[]): Promise<void> {
@@ -68,7 +72,6 @@ export async function readTheme(theme: string): Promise<string> {
export async function applyTheme(theme: string): Promise<void> { export async function applyTheme(theme: string): Promise<void> {
theme = path.basename(theme) theme = path.basename(theme)
console.log('Applying theme:', theme)
const css = await readTheme(theme) const css = await readTheme(theme)
if (windowManager.has(IWindowList.SETTING_WINDOW)) { if (windowManager.has(IWindowList.SETTING_WINDOW)) {
try { try {
src/main/utils/beforeOpen.ts
-2
View File
@@ -126,8 +126,6 @@ function resolveCss() {
const dest = path.join(themesDir(), path.basename(item)) const dest = path.join(themesDir(), path.basename(item))
if (!fs.pathExistsSync(dest)) { if (!fs.pathExistsSync(dest)) {
fs.copyFileSync(item, dest) fs.copyFileSync(item, dest)
} else {
diffFilesAndUpdate(item, dest)
} }
}) })
} catch (e) { } catch (e) {
src/renderer/components/css/ImageProcessSetting.css
+20 -73
View File
@@ -122,36 +122,11 @@
border-radius: 10px; border-radius: 10px;
width: 30px; width: 30px;
height: 30px; height: 30px;
color: #409eff; color: var(--color-accent);
background: linear-gradient(135deg, #409eff15 0%, #409eff25 100%); background: var(--color-background-secondary);
flex-shrink: 0; flex-shrink: 0;
} }
.section-icon.watermark-icon {
color: #67c23a;
background: linear-gradient(135deg, #67c23a15 0%, #67c23a25 100%);
}
.section-icon.transform-icon {
color: #e6a23c;
background: linear-gradient(135deg, #e6a23c15 0%, #e6a23c25 100%);
}
.section-icon.rotate-icon {
color: #909399;
background: linear-gradient(135deg, #e6a23c15 0%, #e6a23c25 100%);
}
.section-icon.resize-icon {
color: #f56c6c;
background: linear-gradient(135deg, #f56c6c15 0%, #f56c6c25 100%);
}
.section-icon.percent-icon {
color: #b37feb;
background: linear-gradient(135deg, #b37feb15 0%, #b37feb25 100%);
}
.section-title-group h2 { .section-title-group h2 {
margin: 0 0 0.25rem; margin: 0 0 0.25rem;
font-size: 1.125rem; font-size: 1.125rem;
@@ -212,12 +187,12 @@
.form-input:hover, .form-input:hover,
.form-textarea:hover { .form-textarea:hover {
border-color: var(--color-border-hover, #c0c4cc); border-color: var(--color-border-secondary);
} }
.form-input:focus, .form-input:focus,
.form-textarea:focus { .form-textarea:focus {
border-color: #409eff; border-color: var(--color-accent);
outline: none; outline: none;
box-shadow: 0 0 0 3px rgb(64 158 255 / 15%); box-shadow: 0 0 0 3px rgb(64 158 255 / 15%);
} }
@@ -234,18 +209,18 @@
border-radius: 4px; border-radius: 4px;
width: 100%; width: 100%;
height: 8px; height: 8px;
background: linear-gradient(90deg, #409eff 0%, #e4e7ed 0%); background: linear-gradient(90deg, var(--color-accent) 0%, #e4e7ed 0%);
outline: none; outline: none;
appearance: none; appearance: none;
transition: background 0.15s ease; transition: background 0.15s ease;
} }
.form-range::-webkit-slider-thumb { .form-range::-webkit-slider-thumb {
border: 3px solid #ffffff; border: 2px solid var(--color-border);
border-radius: 50%; border-radius: 50%;
width: 22px; width: 22px;
height: 22px; height: 22px;
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%); background: var(--color-accent);
box-shadow: box-shadow:
0 2px 8px rgb(64 158 255 / 40%), 0 2px 8px rgb(64 158 255 / 40%),
0 1px 2px rgb(0 0 0 / 10%); 0 1px 2px rgb(0 0 0 / 10%);
@@ -262,11 +237,11 @@
} }
.form-range::-moz-range-thumb { .form-range::-moz-range-thumb {
border: 3px solid #ffffff; border: 2px solid var(--color-border);
border-radius: 50%; border-radius: 50%;
width: 22px; width: 22px;
height: 22px; height: 22px;
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%); background: var(--color-accent);
box-shadow: box-shadow:
0 2px 8px rgb(64 158 255 / 40%), 0 2px 8px rgb(64 158 255 / 40%),
0 1px 2px rgb(0 0 0 / 10%); 0 1px 2px rgb(0 0 0 / 10%);
@@ -285,7 +260,7 @@
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
color: white; color: white;
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%); background: var(--color-accent);
box-shadow: 0 2px 6px rgb(64 158 255 / 30%); box-shadow: 0 2px 6px rgb(64 158 255 / 30%);
} }
@@ -303,12 +278,12 @@
} }
.form-color:hover { .form-color:hover {
border-color: #409eff; border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgb(64 158 255 / 15%); box-shadow: 0 0 0 3px rgb(64 158 255 / 15%);
} }
.form-color:focus { .form-color:focus {
border-color: #409eff; border-color: var(--color-accent);
outline: none; outline: none;
box-shadow: 0 0 0 3px rgb(64 158 255 / 20%); box-shadow: 0 0 0 3px rgb(64 158 255 / 20%);
} }
@@ -345,7 +320,7 @@
} }
.switch-label:hover { .switch-label:hover {
border-color: #409eff; border-color: var(--color-accent);
background: var(--color-surface); background: var(--color-surface);
box-shadow: 0 2px 8px rgb(64 158 255 / 10%); box-shadow: 0 2px 8px rgb(64 158 255 / 10%);
} }
@@ -493,16 +468,16 @@
} }
.position-button:hover { .position-button:hover {
border-color: #409eff; border-color: var(--color-accent);
color: var(--color-text-primary); color: var(--color-text-primary);
background: rgb(64 158 255 / 8%); background: rgb(64 158 255 / 8%);
transform: translateY(-1px); transform: translateY(-1px);
} }
.position-button.active { .position-button.active {
border-color: #409eff; border-color: var(--color-accent);
color: white; color: white;
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%); background: var(--color-background-secondary);
box-shadow: 0 4px 12px rgb(64 158 255 / 35%); box-shadow: 0 4px 12px rgb(64 158 255 / 35%);
transform: translateY(-1px); transform: translateY(-1px);
} }
@@ -525,36 +500,11 @@
} }
.btn:hover { .btn:hover {
border-color: #409eff; border-color: var(--color-accent);
background: var(--color-background-secondary); background: var(--color-background-secondary);
transform: translateY(-1px); transform: translateY(-1px);
} }
.btn-primary {
border-color: #409eff;
color: white;
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
box-shadow: 0 2px 8px rgb(64 158 255 / 30%);
}
.btn-primary:hover {
border-color: #66b1ff;
background: linear-gradient(135deg, #66b1ff 0%, #79bbff 100%);
box-shadow: 0 4px 12px rgb(64 158 255 / 40%);
}
.btn-secondary {
border-color: var(--color-border);
color: var(--color-text-secondary);
background: var(--color-background-primary);
}
.btn-secondary:hover {
border-color: var(--color-border-secondary);
color: var(--color-text-primary);
background: var(--color-background-secondary);
}
/* ==================== Small Text / Hints ==================== */ /* ==================== Small Text / Hints ==================== */
small { small {
display: block; display: block;
@@ -628,7 +578,7 @@ small {
} }
.tab-button.active { .tab-button.active {
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%); background: var(--color-accent);
} }
.form-grid { .form-grid {
@@ -717,8 +667,8 @@ small {
font-family: 'SF Mono', Monaco, Menlo, 'Ubuntu Mono', monospace; font-family: 'SF Mono', Monaco, Menlo, 'Ubuntu Mono', monospace;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
color: white; color: var(--color-text-primary);
background: var(--color-blue-common); 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: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
letter-spacing: 0.02em; letter-spacing: 0.02em;
flex-shrink: 0; flex-shrink: 0;
@@ -775,6 +725,3 @@ small {
color: var(--color-accent); color: var(--color-accent);
} }
.section-icon.rename-icon {
background: linear-gradient(135deg, #52c41a25 0%, #52c41a35 100%);
}
src/renderer/components/css/NavigationPage.css
+2 -2
View File
@@ -274,7 +274,7 @@
border-radius: 16px; border-radius: 16px;
width: 100%; width: 100%;
max-width: 500px; max-width: 500px;
background: var(--color-background-secondary); background: var(--color-background-tertiary);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
} }
@@ -348,7 +348,7 @@
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--border-radius); border-radius: var(--border-radius);
max-height: 300px; max-height: 300px;
background: var(--color-background-primary); background: var(--color-background-tertiary);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
} }
src/renderer/pages/PicGoSetting.vue
+7 -17
View File
@@ -448,7 +448,7 @@
<!-- Processing Action Cards --> <!-- Processing Action Cards -->
<div class="processing-actions-grid"> <div class="processing-actions-grid">
<div class="processing-action-card" @click="advancedRenameVisible = true"> <div class="processing-action-card" @click="advancedRenameVisible = true">
<div class="processing-action-icon rename"> <div class="processing-action-icon">
<Edit :size="15" /> <Edit :size="15" />
</div> </div>
<div class="processing-action-info"> <div class="processing-action-info">
@@ -458,7 +458,7 @@
</div> </div>
<div class="processing-action-card" @click="imageProcessDialogVisible = true"> <div class="processing-action-card" @click="imageProcessDialogVisible = true">
<div class="processing-action-icon image"> <div class="processing-action-icon">
<ImageIcon :size="20" /> <ImageIcon :size="20" />
</div> </div>
<div class="processing-action-info"> <div class="processing-action-info">
@@ -859,14 +859,11 @@
<div class="input-with-icon"> <div class="input-with-icon">
<input <input
v-model.trim="formOfSetting.aesPassword" v-model.trim="formOfSetting.aesPassword"
:type="apiKeyVisible ? 'text' : 'password'" type="text"
class="form-input" class="form-input"
:placeholder="t('pages.settings.advanced.serverEncryptionKey')" :placeholder="t('pages.settings.advanced.serverEncryptionKey')"
@change="handleAesPasswordChange(formOfSetting.aesPassword)" @change="handleAesPasswordChange(formOfSetting.aesPassword)"
/> />
<div class="icon-btn" @click="apiKeyVisible = !apiKeyVisible">
<component :is="apiKeyVisible ? Eye : EyeOff" :size="16" />
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -1031,7 +1028,7 @@
<div class="dialog-content"> <div class="dialog-content">
<div class="proxy-config-grid"> <div class="proxy-config-grid">
<div class="proxy-config-card"> <div class="proxy-config-card">
<div class="proxy-config-icon upload"> <div class="proxy-config-icon">
<CloudUpload :size="18" /> <CloudUpload :size="18" />
</div> </div>
<div class="proxy-config-field"> <div class="proxy-config-field">
@@ -1040,7 +1037,7 @@
</div> </div>
</div> </div>
<div class="proxy-config-card"> <div class="proxy-config-card">
<div class="proxy-config-icon plugin"> <div class="proxy-config-icon">
<Settings :size="18" /> <Settings :size="18" />
</div> </div>
<div class="proxy-config-field"> <div class="proxy-config-field">
@@ -1054,7 +1051,7 @@
</div> </div>
</div> </div>
<div class="proxy-config-card full-width"> <div class="proxy-config-card full-width">
<div class="proxy-config-icon mirror"> <div class="proxy-config-icon">
<Globe :size="18" /> <Globe :size="18" />
</div> </div>
<div class="proxy-config-field"> <div class="proxy-config-field">
@@ -1430,13 +1427,10 @@
<div class="input-with-icon"> <div class="input-with-icon">
<input <input
v-model="formOfSetting.serverKey" v-model="formOfSetting.serverKey"
:type="serverKeyVisible ? 'text' : 'password'" type="text"
class="form-input" class="form-input"
:placeholder="t('pages.settings.advanced.serverKeyPlaceholder')" :placeholder="t('pages.settings.advanced.serverKeyPlaceholder')"
/> />
<div class="icon-btn" @click="serverKeyVisible = !serverKeyVisible">
<component :is="serverKeyVisible ? Eye : EyeOff" :size="16" />
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -1798,8 +1792,6 @@ import {
CloudUpload, CloudUpload,
Download, Download,
Edit, Edit,
Eye,
EyeOff,
FileText, FileText,
FolderOpen, FolderOpen,
GitBranch, GitBranch,
@@ -2045,8 +2037,6 @@ const logFileVisible = ref(false)
const customLinkVisible = ref(false) const customLinkVisible = ref(false)
const checkUpdateVisible = ref(false) const checkUpdateVisible = ref(false)
const serverVisible = ref(false) const serverVisible = ref(false)
const serverKeyVisible = ref(false)
const apiKeyVisible = ref(false)
const webServerVisible = ref(false) const webServerVisible = ref(false)
const syncVisible = ref(false) const syncVisible = ref(false)
const upDownConfigVisible = ref(false) const upDownConfigVisible = ref(false)
src/renderer/pages/css/PicgoSetting.css
+50 -301
View File
@@ -146,7 +146,7 @@
width: 100%; width: 100%;
font-size: 0.875rem; font-size: 0.875rem;
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-surface); background: var(--color-background-tertiary);
transition: all 0.2s ease; transition: all 0.2s ease;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -158,52 +158,6 @@
outline: none; outline: none;
} }
.form-textarea {
min-height: 80px;
resize: vertical;
}
.form-range {
margin-bottom: 0.5rem;
border-radius: 3px;
width: 100%;
height: 6px;
background: #e4e7ed;
outline: none;
appearance: none;
}
.form-range::-webkit-slider-thumb {
border-radius: 50%;
width: 20px;
height: 20px;
background: #409eff;
appearance: none;
cursor: pointer;
}
.form-range::-moz-range-thumb {
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
background: #409eff;
cursor: pointer;
}
.range-value {
font-size: 0.875rem;
text-align: center;
color: var(--color-text-secondary);
}
/* Grid Layout */
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
/* Switch Component */ /* Switch Component */
.switch-label { .switch-label {
display: flex; display: flex;
@@ -272,66 +226,6 @@
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }
/* Radio Group */
.radio-group {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.radio-option {
display: flex;
align-items: center;
border: 1px solid var(--color-border-secondary);
border-radius: 8px;
padding: 0.75rem;
background: var(--color-background-tertiary);
transition: all 0.2s ease;
gap: 0.75rem;
cursor: pointer;
}
.radio-option:hover {
border-color: var(--color-border);
background: var(--color-background-secondary);
}
.radio-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.radio-indicator {
position: relative;
border: 2px solid var(--color-border);
border-radius: 50%;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.radio-input:checked + .radio-indicator {
border-color: #409eff;
}
.radio-input:checked + .radio-indicator::after {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
width: 10px;
height: 10px;
background: #409eff;
content: '';
transform: translate(-50%, -50%);
}
.radio-label {
font-weight: 500;
color: var(--color-text-primary);
}
/* Buttons */ /* Buttons */
.btn { .btn {
display: flex; display: flex;
@@ -364,7 +258,7 @@
} }
.btn-primary:hover:not(:disabled) { .btn-primary:hover:not(:disabled) {
background: #66b1ff; background: var(--color-accent-hover);
} }
.btn-secondary { .btn-secondary {
@@ -377,15 +271,6 @@
background: var(--color-background-secondary); background: var(--color-background-secondary);
} }
.btn-danger {
color: white;
background: #f56c6c;
}
.btn-danger:hover:not(:disabled) {
background: #f78989;
}
/* Checkbox Group */ /* Checkbox Group */
.checkbox-group { .checkbox-group {
display: flex; display: flex;
@@ -426,8 +311,8 @@
} }
.checkbox-input:checked + .checkbox-indicator { .checkbox-input:checked + .checkbox-indicator {
border-color: #409eff; border-color: var(--color-accent);
background: #409eff; background: var(--color-accent);
} }
.checkbox-input:checked + .checkbox-indicator::after { .checkbox-input:checked + .checkbox-indicator::after {
@@ -481,7 +366,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: rgb(0 0 0 / 80%); background: rgb(0 0 0 / 50%);
} }
.dialog { .dialog {
@@ -492,8 +377,8 @@
width: 85vw; width: 85vw;
max-width: 90vw; max-width: 90vw;
max-height: 85vh; max-height: 85vh;
background: var(--color-surface); background: var(--color-background-tertiary);
box-shadow: var(--shadow-xl); box-shadow: var(--shadow-xl);
box-shadow: 0 10px 25px rgb(0 0 0 / 15%); box-shadow: 0 10px 25px rgb(0 0 0 / 15%);
} }
@@ -520,14 +405,14 @@
height: 32px; height: 32px;
font-size: 1.5rem; font-size: 1.5rem;
color: var(--color-text-secondary); color: var(--color-text-secondary);
background: none; background: var(--color-surface);
transition: all 0.2s ease; transition: all 0.2s ease;
cursor: pointer; cursor: pointer;
} }
.dialog-close:hover { .dialog-close:hover {
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-background-secondary); background: var(--color-surface-elevated);
} }
.dialog-content { .dialog-content {
@@ -558,17 +443,6 @@
flex: 1; flex: 1;
} }
/* Notice Text */
.notice-text {
margin-bottom: 1rem;
border-radius: 8px;
padding: 1rem;
font-size: 0.925rem;
text-align: center;
color: #1c2630ff;
background: rgb(0 128 255 / 10%);
}
/* Small text */ /* Small text */
small { small {
font-size: 0.75rem; font-size: 0.75rem;
@@ -661,8 +535,8 @@ small {
font-family: 'SF Mono', Monaco, Menlo, 'Ubuntu Mono', monospace; font-family: 'SF Mono', Monaco, Menlo, 'Ubuntu Mono', monospace;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
color: white; color: var(--color-text-primary);
background: var(--color-blue-common); 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: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
letter-spacing: 0.02em; letter-spacing: 0.02em;
flex-shrink: 0; flex-shrink: 0;
@@ -722,7 +596,7 @@ small {
overflow: hidden; overflow: hidden;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: 12px;
background: var(--color-surface); 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%);
} }
@@ -732,7 +606,7 @@ small {
align-items: center; align-items: center;
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
background: var(--color-background); background: var(--color-background-secondary);
} }
.release-notes-header h3 { .release-notes-header h3 {
@@ -769,7 +643,7 @@ small {
.release-notes-content { .release-notes-content {
overflow-y: auto; overflow-y: auto;
max-height: 400px; max-height: 400px;
background: var(--color-background); background: var(--color-background-secondary);
scrollbar-width: thin; scrollbar-width: thin;
} }
@@ -997,7 +871,7 @@ small {
width: 46px; width: 46px;
height: 46px; height: 46px;
color: white; color: white;
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%); background: var(--color-accent);
box-shadow: 0 4px 12px rgb(64 158 255 / 30%); box-shadow: 0 4px 12px rgb(64 158 255 / 30%);
} }
@@ -1023,8 +897,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: #409eff; color: var(--color-primary);
background: rgb(64 158 255 / 15%); background: var(--color-surface-elevated);
letter-spacing: 0.02em; letter-spacing: 0.02em;
} }
@@ -1103,11 +977,11 @@ small {
} }
.sync-action-icon.upload { .sync-action-icon.upload {
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%); background: var(--color-accent);
} }
.sync-action-icon.migrate { .sync-action-icon.migrate {
background: linear-gradient(135deg, #67c23a 0%, #95d475 100%); background: var(--color-accent);
} }
.sync-action-content { .sync-action-content {
@@ -1254,9 +1128,9 @@ small {
} }
.sync-type-btn.active { .sync-type-btn.active {
border-color: #409eff; border-color: var(--color-border);
color: #409eff; color: var(--color-accent);
background: rgb(64 158 255 / 12%); background: var(--color-surface);
box-shadow: 0 0 0 3px rgb(64 158 255 / 15%); box-shadow: 0 0 0 3px rgb(64 158 255 / 15%);
} }
@@ -1267,13 +1141,13 @@ small {
.sync-type-btn.active svg, .sync-type-btn.active svg,
.sync-type-btn:hover svg { .sync-type-btn:hover svg {
color: #409eff; color: var(--color-accent);
} }
.sync-type-btn span { .sync-type-btn span {
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
color: inherit; color: var(--color-text-primary);
} }
/* Sync Config Fields */ /* Sync Config Fields */
@@ -1349,31 +1223,7 @@ small {
height: 44px; height: 44px;
color: var(--color-surface); color: var(--color-surface);
flex-shrink: 0; flex-shrink: 0;
} background: var(--color-accent);
.section-icon-wrapper.small-icon {
width: 34px;
height: 34px;
}
.section-icon-wrapper.log {
background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
}
.section-icon-wrapper.network {
background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
}
.section-icon-wrapper.server {
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
}
.section-icon-wrapper.update {
background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
}
.section-icon-wrapper.notes {
background: linear-gradient(135deg, #909399 0%, #b1b3b8 100%);
} }
/* Advanced Action Grid */ /* Advanced Action Grid */
@@ -1485,14 +1335,7 @@ small {
width: 36px; width: 36px;
height: 36px; height: 36px;
color: white; color: white;
} background: var(--color-accent);
.server-config-icon.web {
background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
}
.server-config-icon.api {
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
} }
.server-config-badge { .server-config-badge {
@@ -1541,7 +1384,7 @@ small {
border-radius: 8px; border-radius: 8px;
width: 32px; width: 32px;
height: 32px; height: 32px;
color: #e6a23c; color: var(--color-accent);
background: rgb(230 162 60 / 15%); background: rgb(230 162 60 / 15%);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -1581,8 +1424,7 @@ small {
width: 44px; width: 44px;
height: 44px; height: 44px;
color: white; color: white;
background: linear-gradient(135deg, #67c23a 0%, #95d475 100%); background: var(--color-accent);
box-shadow: 0 4px 12px rgb(103 194 58 / 30%);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -1608,8 +1450,8 @@ small {
padding: 0.3rem 0.75rem; padding: 0.3rem 0.75rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
color: #67c23a; color: var(--color-success);
background: rgb(103 194 58 / 15%); background: var(--color-background-secondary);
} }
.version-label { .version-label {
@@ -1636,12 +1478,11 @@ small {
background: transparent; background: transparent;
} }
/* Enhanced Release Notes */
.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: 16px;
background: var(--color-surface); 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%);
} }
@@ -1680,7 +1521,7 @@ small {
.release-notes-card.enhanced .release-notes-content { .release-notes-card.enhanced .release-notes-content {
overflow-y: auto; overflow-y: auto;
max-height: 400px; max-height: 400px;
background: var(--color-background-primary); background: var(--color-background-secondary);
} }
.release-notes-loading { .release-notes-loading {
@@ -1741,7 +1582,7 @@ small {
align-items: center; align-items: center;
border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-border);
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
background: var(--color-background-tertiary); background: var(--color-background-secondary);
} }
/* Responsive for Advanced & Update */ /* Responsive for Advanced & Update */
@@ -1830,7 +1671,7 @@ small {
width: 25px; width: 25px;
height: 25px; height: 25px;
color: white; color: white;
background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%); background: var(--color-accent);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -1983,7 +1824,7 @@ small {
width: 44px; width: 44px;
height: 44px; height: 44px;
color: white; color: white;
background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%); background: var(--color-accent);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -2015,33 +1856,6 @@ small {
transform: translateX(4px); transform: translateX(4px);
} }
/* ==================== Upload Settings Panel ==================== */
/* Section Icon Wrapper - Upload Colors */
.section-icon-wrapper.upload {
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
}
.section-icon-wrapper.processing {
background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
}
.section-icon-wrapper.clipboard {
background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
}
.section-icon-wrapper.link {
background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
}
.section-icon-wrapper.picbed {
background: linear-gradient(135deg, #f56c6c 0%, #f89898 100%);
}
.section-icon-wrapper.gallery {
background: linear-gradient(135deg, #b37feb 0%, #d3adf7 100%);
}
/* Upload Behavior Grid */ /* Upload Behavior Grid */
.upload-behavior-grid { .upload-behavior-grid {
display: grid; display: grid;
@@ -2173,14 +1987,7 @@ small {
height: 30px; height: 30px;
color: white; color: white;
flex-shrink: 0; flex-shrink: 0;
} background: var(--color-accent);
.processing-action-icon.rename {
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
}
.processing-action-icon.image {
background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
} }
.processing-action-info { .processing-action-info {
@@ -2254,7 +2061,7 @@ small {
width: 30px; width: 30px;
height: 30px; height: 30px;
color: white; color: white;
background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%); background: var(--color-accent);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -2360,26 +2167,7 @@ small {
height: 40px; height: 40px;
color: white; color: white;
flex-shrink: 0; flex-shrink: 0;
} background: var(--color-accent);
.dialog-icon-wrapper.link {
background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
}
.dialog-icon-wrapper.network {
background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
}
.dialog-icon-wrapper.window {
background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
}
.dialog-icon-wrapper.update {
background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
}
.dialog-icon-wrapper.rename {
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
} }
/* Placeholder Info Card */ /* Placeholder Info Card */
@@ -2420,13 +2208,14 @@ small {
.placeholder-info-item code { .placeholder-info-item code {
border-radius: 6px; border-radius: 6px;
border: 1px solid var(--color-border);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
min-width: 80px; min-width: 80px;
font-family: 'SF Mono', Monaco, Menlo, monospace; font-family: 'SF Mono', Monaco, Menlo, monospace;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
color: white; color: var(--color-text-primary);
background: var(--color-accent); background: var(--color-background-secondary);
} }
.placeholder-info-item span { .placeholder-info-item span {
@@ -2462,18 +2251,7 @@ small {
height: 36px; height: 36px;
color: white; color: white;
flex-shrink: 0; flex-shrink: 0;
} background: var(--color-accent);
.proxy-config-icon.upload {
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
}
.proxy-config-icon.plugin {
background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
}
.proxy-config-icon.mirror {
background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
} }
.proxy-config-field { .proxy-config-field {
@@ -2540,7 +2318,7 @@ small {
} }
.version-card.latest.has-update { .version-card.latest.has-update {
border-color: #67c23a; border-color: var(--color-success);
background: rgb(103 194 58 / 10%); background: rgb(103 194 58 / 10%);
} }
@@ -2558,7 +2336,7 @@ small {
} }
.version-card.latest.has-update .version-card-value { .version-card.latest.has-update .version-card-value {
color: #67c23a; color: var(--color-success);
} }
.version-arrow { .version-arrow {
@@ -2574,7 +2352,7 @@ small {
padding: 1rem; padding: 1rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
color: #67c23a; color: var(--color-success);
background: rgb(103 194 58 / 12%); background: rgb(103 194 58 / 12%);
gap: 0.5rem; gap: 0.5rem;
} }
@@ -2615,10 +2393,6 @@ small {
max-width: 600px; max-width: 600px;
} }
.dialog-icon-wrapper.log {
background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
}
.log-files-section { .log-files-section {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@@ -2672,7 +2446,7 @@ small {
width: 42px; width: 42px;
height: 42px; height: 42px;
color: white; color: white;
background: linear-gradient(135deg, #67c23a 0%, #95d475 100%); background: var(--color-accent);
} }
.log-file-info { .log-file-info {
@@ -2706,14 +2480,6 @@ small {
max-width: 550px; max-width: 550px;
} }
.dialog-icon-wrapper.server {
background: linear-gradient(135deg, #409eff 0%, #79bbff 100%);
}
.dialog-icon-wrapper.webserver {
background: linear-gradient(135deg, #e6a23c 0%, #f0c78a 100%);
}
.server-notice-card { .server-notice-card {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@@ -2864,7 +2630,7 @@ small {
margin-top: 1.25rem; margin-top: 1.25rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-weight: 700; font-weight: 700;
color: #1e293b; color: var(--color-text-primary);
} }
.notes-body :deep(h1:first-child), .notes-body :deep(h1:first-child),
@@ -2891,8 +2657,8 @@ small {
border-radius: 4px; border-radius: 4px;
padding: 0.125rem 0.375rem; padding: 0.125rem 0.375rem;
font-size: 0.875em; font-size: 0.875em;
background: #e2e8f0; background: var(--color-surface);
color: #334155; color: var(--color-text-primary);
} }
.notes-body :deep(pre) { .notes-body :deep(pre) {
@@ -2900,27 +2666,10 @@ small {
border-radius: 8px; border-radius: 8px;
padding: 1rem; padding: 1rem;
margin: 0.875rem 0; margin: 0.875rem 0;
background: #e2e8f0; background: var(--color-surface);
} }
.notes-body :deep(pre code) { .notes-body :deep(pre code) {
padding: 0; padding: 0;
background: transparent; background: transparent;
} }
.icon-btn {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-secondary);
transition: color 0.2s ease;
}
.icon-btn:hover {
color: var(--color-text-primary);
}
src/renderer/pages/css/PluginPage.css
+1
View File
@@ -489,6 +489,7 @@ html, body {
} }
.settings-button { .settings-button {
border: 1px solid var(--color-border);
color: var(--color-text-primary); color: var(--color-text-primary);
background: var(--color-background-secondary); background: var(--color-background-secondary);
} }
src/renderer/pages/css/ShortKey.css
+8 -8
View File
@@ -139,13 +139,13 @@
.status-enabled { .status-enabled {
border: 1px solid rgb(103 194 58 / 20%); border: 1px solid rgb(103 194 58 / 20%);
color: #67c23a; color: var(--color-success);
background: rgb(103 194 58 / 10%); background: rgb(103 194 58 / 10%);
} }
.status-disabled { .status-disabled {
border: 1px solid rgb(245 108 108 / 20%); border: 1px solid rgb(245 108 108 / 20%);
color: #f56c6c; color: var(--color-danger);
background: rgb(245 108 108 / 10%); background: rgb(245 108 108 / 10%);
} }
@@ -202,11 +202,11 @@
.btn-primary { .btn-primary {
color: white; color: white;
background: #409eff; background: var(--color-accent);
} }
.btn-primary:hover:not(:disabled) { .btn-primary:hover:not(:disabled) {
background: #66b1ff; background: var(--color-accent-hover);
} }
.btn-secondary { .btn-secondary {
@@ -222,20 +222,20 @@
.btn-success { .btn-success {
color: white; color: white;
background: #67c23a; background: var(--color-success);
} }
.btn-success:hover:not(:disabled) { .btn-success:hover:not(:disabled) {
background: #85ce61; background: var(--color-success);
} }
.btn-danger { .btn-danger {
color: white; color: white;
background: #f56c6c; background: var(--color-danger);
} }
.btn-danger:hover:not(:disabled) { .btn-danger:hover:not(:disabled) {
background: #f78989; background: var(--color-danger);
} }
/* Modal */ /* Modal */
src/renderer/pages/css/ToolboxPage.css
+6 -13
View File
@@ -14,7 +14,7 @@ html, body {
flex-direction: column; flex-direction: column;
gap: 1.25rem; gap: 1.25rem;
box-sizing: border-box; box-sizing: border-box;
background: var(--color-surface); background: var(--color-background-tertiary);
} }
/* Card Base */ /* Card Base */
@@ -22,7 +22,7 @@ html, body {
overflow: auto; overflow: auto;
border: 1px solid var(--color-border-secondary); border: 1px solid var(--color-border-secondary);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
background: var(--color-surface); background: var(--color-background-tertiary);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transition: var(--transition-medium); transition: var(--transition-medium);
} }
@@ -138,8 +138,8 @@ html, body {
padding: 0.75rem 1.25rem; padding: 0.75rem 1.25rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
color: #67C23A; color: var(--color-success);
background: linear-gradient(135deg, rgb(103 194 58 / 10%) 0%, var(--color-surface) 100%); background: var(--color-background-secondary);
} }
.cant-fix-container { .cant-fix-container {
@@ -239,11 +239,11 @@ html, body {
} }
.item-error { .item-error {
border-left: 3px solid #F56C6C; border-left: 3px solid var(--color-danger);
} }
.item-success { .item-success {
border-left: 3px solid #67C23A; border-left: 3px solid var(--color-success);
} }
.item-loading { .item-loading {
@@ -361,10 +361,3 @@ html, body {
padding: 0 1rem 0.75rem; padding: 0 1rem 0.75rem;
} }
} }
/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
.item-header:hover {
background: rgb(255 255 255 / 5%);
}
}
src/renderer/pages/css/UploadPage.css
+1 -1
View File
@@ -735,7 +735,7 @@ html, body {
align-items: center; align-items: center;
border-bottom: 1px solid var(--color-border-secondary); border-bottom: 1px solid var(--color-border-secondary);
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
background: var(--color-surface); background: var(--color-background-secondary);
} }
.modal-title { .modal-title {