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