mirror of
https://github.com/Kuingsmile/PicList.git
synced 2026-07-12 16:11:27 +08:00
✨ Feature(custom): support theme system and add a new theme hub for piclist
This commit is contained in:
Kuingsmile
@@ -73,6 +73,37 @@
|
||||
<option value="main">{{ t('pages.settings.system.mainMode') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="system-option-card">
|
||||
<div class="system-option-header">
|
||||
<ImageIcon :size="18" />
|
||||
<span>{{ t('pages.settings.system.chooseTheme') }}</span>
|
||||
</div>
|
||||
<select v-model="currentTheme" class="form-select">
|
||||
<option v-for="theme in themeList" :key="theme.key" :value="theme.key">
|
||||
{{ theme.label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="theme-actions-grid">
|
||||
<button
|
||||
class="btn btn-secondary theme-action-btn"
|
||||
:disabled="downloadingThemes"
|
||||
@click="handleDownloadThemes"
|
||||
>
|
||||
<Download :size="14" />
|
||||
<span>{{
|
||||
downloadingThemes
|
||||
? t('pages.settings.system.downloadingThemes')
|
||||
: t('pages.settings.system.downloadThemes')
|
||||
}}</span>
|
||||
</button>
|
||||
<button class="btn btn-secondary theme-action-btn" @click="handleImportThemes">
|
||||
<Import :size="14" />
|
||||
<span>{{ t('pages.settings.system.importThemes') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1812,6 +1843,9 @@ const { picBedG, updatePicBeds } = usePicBed()
|
||||
|
||||
const showPicBedList = ref<string[]>([])
|
||||
const galleryPicBedFilterList = ref<string[]>([])
|
||||
const themeList = ref<{ key: string; label: string }[]>([{ key: 'default.css', label: '默认' }])
|
||||
const currentTheme = ref('default.css')
|
||||
const downloadingThemes = ref(false)
|
||||
const currentTab = useStorage<'system' | 'sync' | 'upload' | 'advanced' | 'update'>('settings-current-tab', 'system')
|
||||
|
||||
// Tab configuration
|
||||
@@ -1883,6 +1917,7 @@ const formOfSetting = ref<ISettingForm>({
|
||||
mainWindowWidth: 1200,
|
||||
mainWindowHeight: 800,
|
||||
enableSecondUploader: false,
|
||||
theme: 'default.css',
|
||||
})
|
||||
|
||||
const proxy = ref('')
|
||||
@@ -1956,6 +1991,12 @@ const addWatch = () => {
|
||||
handleShortUrlServerChange(newVal)
|
||||
}
|
||||
})
|
||||
|
||||
watch(currentTheme, newVal => {
|
||||
if (newVal) {
|
||||
handleThemeChange(newVal)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const addProxyWatch = () => {
|
||||
@@ -2095,12 +2136,69 @@ onBeforeMount(() => {
|
||||
initData()
|
||||
})
|
||||
|
||||
async function loadThemes() {
|
||||
try {
|
||||
const themes = await window.electron.triggerRPC<{ key: string; label: string }[]>(
|
||||
IRPCActionType.THEME_RESOLVE_THEMES,
|
||||
)
|
||||
if (themes && themes.length > 0) {
|
||||
themeList.value = themes
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load themes:', error)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDownloadThemes() {
|
||||
try {
|
||||
downloadingThemes.value = true
|
||||
await window.electron.triggerRPC(IRPCActionType.THEME_FETCH_THEMES)
|
||||
message.success(t('pages.settings.system.downloadThemesSuccess'))
|
||||
await loadThemes()
|
||||
} catch (error) {
|
||||
console.error('Failed to download themes:', error)
|
||||
message.error(t('pages.settings.system.downloadThemesFailed'))
|
||||
} finally {
|
||||
downloadingThemes.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleImportThemes() {
|
||||
try {
|
||||
const result = await window.electron.triggerRPC<string[]>(IRPCActionType.MANAGE_OPEN_FILE_SELECT_DIALOG, {
|
||||
title: t('pages.settings.system.importThemes'),
|
||||
filters: [{ name: 'CSS Files', extensions: ['css'] }],
|
||||
properties: ['openFile', 'multiSelections'],
|
||||
})
|
||||
if (result && result.length > 0) {
|
||||
await window.electron.triggerRPC(IRPCActionType.THEME_IMPORT_THEMES, result)
|
||||
message.success(t('pages.settings.system.importThemesSuccess'))
|
||||
await loadThemes()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to import themes:', error)
|
||||
message.error(t('pages.settings.system.importThemesFailed'))
|
||||
}
|
||||
}
|
||||
|
||||
async function handleThemeChange(theme: string) {
|
||||
try {
|
||||
await window.electron.triggerRPC(IRPCActionType.THEME_APPLY_THEME, theme)
|
||||
saveConfig({ [configPaths.settings.theme]: theme })
|
||||
} catch (error) {
|
||||
console.error('Failed to apply theme:', error)
|
||||
message.error(t('pages.settings.system.applyThemeFailed'))
|
||||
}
|
||||
}
|
||||
|
||||
async function initData() {
|
||||
const config = (await getConfig<IConfig>()) || ({} as IConfig)
|
||||
const settings = config.settings || {}
|
||||
const picBed = config.picBed
|
||||
showPicBedList.value = picBedG.value.filter(item => item.visible).map(item => item.name)
|
||||
galleryPicBedFilterList.value = settings.galleryPicBedFilter || []
|
||||
currentTheme.value = settings.theme || 'default.css'
|
||||
await loadThemes()
|
||||
formKeys.forEach(key => {
|
||||
;(formOfSetting.value as any)[key] = settings[key] ?? formOfSetting.value[key]
|
||||
})
|
||||
|
||||
@@ -339,12 +339,4 @@ export default {
|
||||
.input-error {
|
||||
animation: shake 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Dark mode adjustments */
|
||||
:root.dark .rename-card,
|
||||
:root.auto.dark .rename-card {
|
||||
box-shadow:
|
||||
0 20px 25px -5px rgb(0 0 0 / 30%),
|
||||
0 10px 10px -5px rgb(0 0 0 / 20%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -134,11 +134,11 @@
|
||||
</div>
|
||||
<div class="quick-actions">
|
||||
<button class="quick-action-button" @click="uploadClipboardFiles">
|
||||
<ClipboardIcon :size="20" />
|
||||
<ClipboardIcon class="action-icon" :size="18" />
|
||||
<span>{{ t('pages.upload.clipboardPicture') }}</span>
|
||||
</button>
|
||||
<button class="quick-action-button" @click="uploadURLFiles">
|
||||
<LinkIcon :size="20" />
|
||||
<LinkIcon class="action-icon" :size="18" />
|
||||
<span>{{ t('pages.upload.urlUpload') }}</span>
|
||||
</button>
|
||||
<button
|
||||
@@ -146,7 +146,7 @@
|
||||
:class="{ 'has-badge': taskQueueStatus.tasks.length > 0 }"
|
||||
@click="openTaskDialog"
|
||||
>
|
||||
<ListTodoIcon :size="20" />
|
||||
<ListTodoIcon class="action-icon" :size="18" />
|
||||
<span>{{ t('pages.upload.taskUpload') }}</span>
|
||||
<span v-if="taskQueueStatus.tasks.length > 0" class="task-count-badge">
|
||||
{{ taskQueueStatus.tasks.length }}
|
||||
|
||||
@@ -41,7 +41,7 @@ html, body {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-border-secondary);
|
||||
border-radius: var(--radius-xl);
|
||||
background: var(--color-surface);
|
||||
background: var(--color-background-secondary);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: var(--transition-medium);
|
||||
}
|
||||
@@ -717,7 +717,7 @@ input:checked + .switch-slider::before {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: var(--color-text-secondary);
|
||||
background: var(--color-surface-elevated);
|
||||
background: var(--color-background-secondary);
|
||||
transition: var(--transition-fast);
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1303,7 +1303,7 @@ input:checked + .switch-slider::before {
|
||||
border: 1px solid var(--color-border-secondary);
|
||||
border-radius: var(--radius-lg);
|
||||
margin: 0;
|
||||
background: var(--color-surface);
|
||||
background: var(--color-background-secondary);
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: calc(100% - 8px);
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
background: var(--color-surface);
|
||||
background: var(--color-background-secondary);
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 0.5rem;
|
||||
background: var(--color-background-primary);
|
||||
background: var(--color-background-secondary);
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
|
||||
.tab-button.active {
|
||||
color: white;
|
||||
background: #409eff;
|
||||
background: var(--color-accent);
|
||||
box-shadow: 0 2px 4px rgb(64 158 255 / 30%);
|
||||
}
|
||||
|
||||
@@ -146,7 +146,7 @@
|
||||
width: 100%;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-primary);
|
||||
background: var(--color-background-primary);
|
||||
background: var(--color-surface);
|
||||
transition: all 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -154,9 +154,8 @@
|
||||
.form-input:focus,
|
||||
.form-textarea:focus,
|
||||
.form-select:focus {
|
||||
border-color: var(--color-blue-common);
|
||||
border-color: var(--color-accent);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--el-color-primary-light-9, rgb(64 158 255 / 20%));
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
@@ -252,7 +251,7 @@
|
||||
}
|
||||
|
||||
.switch-input:checked + .switch-slider {
|
||||
background: #409eff;
|
||||
background: var(--color-accent);
|
||||
}
|
||||
|
||||
.switch-input:checked + .switch-slider::before {
|
||||
@@ -361,7 +360,7 @@
|
||||
|
||||
.btn-primary {
|
||||
color: white;
|
||||
background: #409eff;
|
||||
background: var(--color-accent);
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
@@ -371,7 +370,7 @@
|
||||
.btn-secondary {
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-primary);
|
||||
background: var(--color-background-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
@@ -600,81 +599,6 @@ small {
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode adjustments */
|
||||
:root.dark .piclist-settings,
|
||||
:root.auto.dark .piclist-settings {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .settings-header,
|
||||
:root.dark .tab-navigation,
|
||||
:root.dark .settings-section,
|
||||
:root.auto.dark .settings-header,
|
||||
:root.auto.dark .tab-navigation,
|
||||
:root.auto.dark .settings-section {
|
||||
border-color: var(--color-border);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .form-input,
|
||||
:root.dark .form-textarea,
|
||||
:root.dark .form-select,
|
||||
:root.auto.dark .form-input,
|
||||
:root.auto.dark .form-textarea,
|
||||
:root.auto.dark .form-select {
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text-primary);
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .switch-slider::before,
|
||||
:root.auto.dark .switch-slider::before {
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
:root.dark .btn-secondary,
|
||||
:root.auto.dark .btn-secondary {
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text-primary);
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .btn-secondary:hover,
|
||||
:root.auto.dark .btn-secondary:hover {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .switch-label,
|
||||
:root.auto.dark .switch-label {
|
||||
border-color: var(--color-border);
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .switch-label:hover,
|
||||
:root.auto.dark .switch-label:hover {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .radio-option,
|
||||
:root.dark .checkbox-option,
|
||||
:root.auto.dark .radio-option,
|
||||
:root.auto.dark .checkbox-option {
|
||||
border-color: var(--color-border);
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .radio-option:hover,
|
||||
:root.dark .checkbox-option:hover,
|
||||
:root.auto.dark .radio-option:hover,
|
||||
:root.auto.dark .checkbox-option:hover {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .dialog,
|
||||
:root.auto.dark .dialog {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
/* Placeholder Help Styles */
|
||||
.placeholder-help {
|
||||
overflow-y: auto;
|
||||
@@ -770,36 +694,6 @@ small {
|
||||
background: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Dark theme adjustments */
|
||||
:root.dark .placeholder-help,
|
||||
:root.auto.dark .placeholder-help {
|
||||
border-color: var(--color-border);
|
||||
background: var(--color-background-secondary);
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
:root.dark .category-title,
|
||||
:root.auto.dark .category-title {
|
||||
border-bottom-color: var(--color-border);
|
||||
background: linear-gradient(135deg, var(--color-background-tertiary) 0%, var(--color-background-secondary) 100%);
|
||||
}
|
||||
|
||||
:root.dark .placeholder-category,
|
||||
:root.auto.dark .placeholder-category {
|
||||
border-bottom-color: var(--color-border);
|
||||
}
|
||||
|
||||
:root.dark .placeholder-item:hover,
|
||||
:root.auto.dark .placeholder-item:hover {
|
||||
background: rgb(var(--color-accent-rgb), 0.12);
|
||||
}
|
||||
|
||||
:root.dark .placeholder-item code,
|
||||
:root.auto.dark .placeholder-item code {
|
||||
border-color: rgb(255 255 255 / 15%);
|
||||
background: var(--color-blue-common);
|
||||
}
|
||||
|
||||
/* Update info and Release Notes Styles */
|
||||
.update-info {
|
||||
margin-bottom: 1.5rem;
|
||||
@@ -943,7 +837,7 @@ small {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-tertiary);
|
||||
color: var(--color-text-secondary);
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
@@ -1184,7 +1078,7 @@ small {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 0.5rem 1.25rem;
|
||||
background: var(--color-background-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
transition: all 0.25s ease;
|
||||
cursor: pointer;
|
||||
gap: 1rem;
|
||||
@@ -1260,7 +1154,7 @@ small {
|
||||
border: 1px dashed var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem 1rem;
|
||||
background: var(--color-background-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
transition: all 0.25s ease;
|
||||
cursor: pointer;
|
||||
gap: 0.75rem;
|
||||
@@ -1305,8 +1199,8 @@ small {
|
||||
border-radius: 10px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
color: white;
|
||||
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
|
||||
color: var(--color-surface);
|
||||
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
|
||||
box-shadow: 0 4px 12px rgb(64 158 255 / 25%);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -1418,50 +1312,6 @@ small {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Dark Mode Adjustments for Sync Panel */
|
||||
:root.dark .sync-overview-card,
|
||||
:root.auto.dark .sync-overview-card {
|
||||
background: linear-gradient(135deg, var(--color-background-secondary) 0%, var(--color-background-tertiary) 100%);
|
||||
box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
:root.dark .sync-action-card,
|
||||
:root.auto.dark .sync-action-card {
|
||||
border-color: var(--color-border);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .sync-action-card:hover,
|
||||
:root.auto.dark .sync-action-card:hover {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .file-action-btn,
|
||||
:root.auto.dark .file-action-btn {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .file-action-btn:hover,
|
||||
:root.auto.dark .file-action-btn:hover {
|
||||
background: rgb(64 158 255 / 12%);
|
||||
}
|
||||
|
||||
:root.dark .sync-type-btn,
|
||||
:root.auto.dark .sync-type-btn {
|
||||
border-color: var(--color-border);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .sync-type-btn:hover,
|
||||
:root.auto.dark .sync-type-btn:hover {
|
||||
background: rgb(64 158 255 / 15%);
|
||||
}
|
||||
|
||||
:root.dark .sync-type-btn.active,
|
||||
:root.auto.dark .sync-type-btn.active {
|
||||
background: rgb(64 158 255 / 20%);
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
@media (width <= 768px) {
|
||||
.sync-overview-card {
|
||||
@@ -1497,7 +1347,7 @@ small {
|
||||
border-radius: 12px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
color: white;
|
||||
color: var(--color-surface);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -1539,7 +1389,7 @@ small {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem;
|
||||
background: var(--color-background-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
transition: all 0.25s ease;
|
||||
cursor: pointer;
|
||||
gap: 1rem;
|
||||
@@ -1609,7 +1459,7 @@ small {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem;
|
||||
background: var(--color-background-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
transition: all 0.25s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1674,7 +1524,7 @@ small {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem;
|
||||
background: var(--color-background-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
.encryption-key-header {
|
||||
@@ -1777,7 +1627,7 @@ small {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 0.25rem;
|
||||
background: var(--color-background-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
.update-preferences-section .switch-label {
|
||||
@@ -1801,7 +1651,7 @@ small {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
padding: 1rem 1.5rem;
|
||||
background: var(--color-background-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
.release-notes-title {
|
||||
@@ -1894,64 +1744,6 @@ small {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
/* Dark Mode for Advanced & Update */
|
||||
:root.dark .advanced-action-card,
|
||||
:root.auto.dark .advanced-action-card {
|
||||
border-color: var(--color-border);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .advanced-action-card:hover,
|
||||
:root.auto.dark .advanced-action-card:hover {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .server-config-card,
|
||||
:root.auto.dark .server-config-card {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .server-config-card:hover,
|
||||
:root.auto.dark .server-config-card:hover {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .encryption-key-section,
|
||||
:root.auto.dark .encryption-key-section {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .update-status-card,
|
||||
:root.auto.dark .update-status-card {
|
||||
background: linear-gradient(135deg, var(--color-background-secondary) 0%, var(--color-background-tertiary) 100%);
|
||||
box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
:root.dark .release-notes-card.enhanced,
|
||||
:root.auto.dark .release-notes-card.enhanced {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .release-notes-card.enhanced .release-notes-header,
|
||||
:root.auto.dark .release-notes-card.enhanced .release-notes-header {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .release-notes-card.enhanced .release-notes-content,
|
||||
:root.auto.dark .release-notes-card.enhanced .release-notes-content {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .release-notes-card.enhanced .release-notes-footer,
|
||||
:root.auto.dark .release-notes-card.enhanced .release-notes-footer {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .update-preference-card,
|
||||
:root.auto.dark .update-preference-card {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
/* Responsive for Advanced & Update */
|
||||
@media (width <= 768px) {
|
||||
.advanced-action-grid {
|
||||
@@ -1975,17 +1767,10 @@ small {
|
||||
|
||||
/* ==================== System Settings Panel ==================== */
|
||||
|
||||
/* Section Icon Wrapper - Additional Colors */
|
||||
.section-icon-wrapper.window,
|
||||
.section-icon-wrapper.startup,
|
||||
.section-icon-wrapper.language {
|
||||
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
|
||||
}
|
||||
|
||||
.section-icon-wrapper.window {
|
||||
background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
|
||||
}
|
||||
|
||||
.section-icon-wrapper.startup {
|
||||
background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
|
||||
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
|
||||
}
|
||||
|
||||
/* System Option Grid */
|
||||
@@ -1999,7 +1784,7 @@ small {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
background: var(--color-background-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
.system-option-header {
|
||||
@@ -2024,7 +1809,7 @@ small {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
background: var(--color-background-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
transition: all 0.25s ease;
|
||||
cursor: pointer;
|
||||
gap: 1rem;
|
||||
@@ -2088,7 +1873,7 @@ small {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 10px;
|
||||
padding: 0.25rem;
|
||||
background: var(--color-background-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
.system-toggle-card .switch-label {
|
||||
@@ -2117,6 +1902,39 @@ small {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Theme Actions Grid */
|
||||
.theme-actions-grid {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.theme-action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.theme-action-btn svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.theme-action-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.theme-action-btn:not(:disabled):hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgb(64 158 255 / 15%);
|
||||
}
|
||||
|
||||
/* Startup Options Grid */
|
||||
.startup-options-grid {
|
||||
display: grid;
|
||||
@@ -2128,7 +1946,7 @@ small {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 0.25rem;
|
||||
background: var(--color-background-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
.startup-toggle-card .switch-label {
|
||||
@@ -2144,7 +1962,7 @@ small {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem;
|
||||
background: var(--color-background-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
transition: all 0.25s ease;
|
||||
cursor: pointer;
|
||||
gap: 1rem;
|
||||
@@ -2235,7 +2053,7 @@ small {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 0.25rem;
|
||||
background: var(--color-background-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
.upload-feature-card .switch-label {
|
||||
@@ -2267,7 +2085,7 @@ small {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
background: var(--color-background-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
transition: all 0.25s ease;
|
||||
cursor: pointer;
|
||||
gap: 0.75rem;
|
||||
@@ -2275,7 +2093,6 @@ small {
|
||||
|
||||
.upload-action-card:hover {
|
||||
border-color: var(--color-accent);
|
||||
background: var(--color-background-secondary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgb(64 158 255 / 15%);
|
||||
}
|
||||
@@ -2334,7 +2151,7 @@ small {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem;
|
||||
background: var(--color-background-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
transition: all 0.25s ease;
|
||||
cursor: pointer;
|
||||
gap: 1rem;
|
||||
@@ -2394,7 +2211,7 @@ small {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 10px;
|
||||
padding: 0.25rem;
|
||||
background: var(--color-background-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
.upload-toggle-card .switch-label {
|
||||
@@ -2416,7 +2233,7 @@ small {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem;
|
||||
background: var(--color-background-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
transition: all 0.25s ease;
|
||||
cursor: pointer;
|
||||
gap: 1rem;
|
||||
@@ -2510,7 +2327,7 @@ small {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
padding: 0.625rem 0.875rem;
|
||||
background: var(--color-background-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
gap: 0.5rem;
|
||||
@@ -2791,122 +2608,6 @@ small {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Dark Mode Adjustments */
|
||||
:root.dark .system-option-card,
|
||||
:root.auto.dark .system-option-card {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .window-size-card,
|
||||
:root.auto.dark .window-size-card {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .window-size-card:hover,
|
||||
:root.auto.dark .window-size-card:hover {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .system-toggle-card,
|
||||
:root.auto.dark .system-toggle-card {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .startup-toggle-card,
|
||||
:root.auto.dark .startup-toggle-card {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .shortcut-action-card,
|
||||
:root.auto.dark .shortcut-action-card {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .shortcut-action-card:hover,
|
||||
:root.auto.dark .shortcut-action-card:hover {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .upload-feature-card,
|
||||
:root.auto.dark .upload-feature-card {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .upload-action-card,
|
||||
:root.auto.dark .upload-action-card {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .upload-action-card:hover,
|
||||
:root.auto.dark .upload-action-card:hover {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .processing-action-card,
|
||||
:root.auto.dark .processing-action-card {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .processing-action-card:hover,
|
||||
:root.auto.dark .processing-action-card:hover {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .upload-toggle-card,
|
||||
:root.auto.dark .upload-toggle-card {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .url-format-action-card,
|
||||
:root.auto.dark .url-format-action-card {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .url-format-action-card:hover,
|
||||
:root.auto.dark .url-format-action-card:hover {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .short-url-config,
|
||||
:root.auto.dark .short-url-config {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .picbed-checkbox-card,
|
||||
:root.auto.dark .picbed-checkbox-card {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .picbed-checkbox-card:hover,
|
||||
:root.auto.dark .picbed-checkbox-card:hover {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .enhanced-dialog,
|
||||
:root.auto.dark .enhanced-dialog {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .placeholder-info-card,
|
||||
:root.auto.dark .placeholder-info-card {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .proxy-config-card,
|
||||
:root.auto.dark .proxy-config-card {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .version-card,
|
||||
:root.auto.dark .version-card {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .rename-toggle-card,
|
||||
:root.auto.dark .rename-toggle-card {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
/* ============================
|
||||
Log Dialog Styles
|
||||
============================ */
|
||||
@@ -3087,31 +2788,6 @@ small {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Dark mode for new dialog components */
|
||||
:root.dark .log-file-card,
|
||||
:root.auto.dark .log-file-card {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .log-file-card:hover,
|
||||
:root.auto.dark .log-file-card:hover {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .server-notice-card,
|
||||
:root.auto.dark .server-notice-card {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .server-toggle-card,
|
||||
:root.auto.dark .server-toggle-card {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
:root.dark .server-config-section,
|
||||
:root.auto.dark .server-config-section {
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
@media (width <= 768px) {
|
||||
@@ -3174,12 +2850,11 @@ small {
|
||||
|
||||
.notes-body {
|
||||
overflow-y: auto;
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem;
|
||||
max-height: 195px;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
background: var(--color-background-tertiary);
|
||||
background: var(--color-background-secondary);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@ html, body {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-border-secondary);
|
||||
border-radius: var(--radius-xl);
|
||||
background: var(--color-surface);
|
||||
background: var(--color-background-secondary);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: var(--transition-medium);
|
||||
}
|
||||
@@ -86,7 +86,7 @@ html, body {
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
background: var(--color-blue-common);
|
||||
background: var(--color-accent);
|
||||
transition: var(--transition-fast);
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
@@ -101,7 +101,7 @@ html, body {
|
||||
.action-button.secondary {
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-primary);
|
||||
background: var(--color-surface-elevated);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
.action-button.secondary:hover {
|
||||
@@ -148,12 +148,13 @@ html, body {
|
||||
font-size: 0.875rem;
|
||||
font-family: inherit;
|
||||
color: var(--color-text-primary);
|
||||
background: var(--color-surface-elevated);
|
||||
background: var(--color-background-secondary);
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: var(--color-accent);
|
||||
background: var(--color-background-tertiary);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
|
||||
}
|
||||
@@ -369,8 +370,7 @@ html, body {
|
||||
}
|
||||
|
||||
.plugin-logo {
|
||||
border: 1px solid var(--color-border-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
border-radius: var(--radius-lg);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
object-fit: cover;
|
||||
@@ -407,7 +407,7 @@ html, body {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
color: var(--color-text-secondary);
|
||||
background: var(--color-surface-elevated);
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
.plugin-author {
|
||||
@@ -434,7 +434,7 @@ html, body {
|
||||
min-height: 2.6rem;
|
||||
font-size: 0.875rem;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--color-text-secondary);
|
||||
color: var(--color-text-primary);
|
||||
line-height: 1.5;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
@@ -489,8 +489,8 @@ html, body {
|
||||
}
|
||||
|
||||
.settings-button {
|
||||
color: white;
|
||||
background: var(--color-blue-common);
|
||||
color: var(--color-text-primary);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
.settings-button:hover:not(:disabled) {
|
||||
@@ -501,7 +501,7 @@ html, body {
|
||||
.disabled-button {
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-secondary);
|
||||
background: var(--color-surface-elevated);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
.disabled-button:hover:not(:disabled) {
|
||||
@@ -660,7 +660,7 @@ html, body {
|
||||
|
||||
.btn:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.btn:hover:not(:disabled) {
|
||||
@@ -755,48 +755,6 @@ html, body {
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode adjustments */
|
||||
:root.dark .plugin-container,
|
||||
:root.auto.dark .plugin-container {
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
:root.dark .plugin-card,
|
||||
:root.auto.dark .plugin-card {
|
||||
border-color: var(--color-border-secondary);
|
||||
background: var(--color-surface-elevated);
|
||||
}
|
||||
|
||||
:root.dark .search-input,
|
||||
:root.auto.dark .search-input {
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text-primary);
|
||||
background: var(--color-surface-elevated);
|
||||
}
|
||||
|
||||
:root.dark .search-input:focus,
|
||||
:root.auto.dark .search-input:focus {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
:root.dark .modal-container,
|
||||
:root.auto.dark .modal-container {
|
||||
border-color: var(--color-border);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
:root.dark .btn-secondary,
|
||||
:root.auto.dark .btn-secondary {
|
||||
border-color: var(--color-border);
|
||||
background: var(--color-surface-elevated);
|
||||
}
|
||||
|
||||
:root.dark .btn-secondary:hover,
|
||||
:root.auto.dark .btn-secondary:hover {
|
||||
border-color: var(--color-accent);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
|
||||
@@ -380,7 +380,7 @@ html, body {
|
||||
border: 2px dashed var(--color-border);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 3rem 2rem;
|
||||
background: var(--color-background-primary);
|
||||
background: var(--color-background-secondary);
|
||||
transition: var(--transition-medium);
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -409,7 +409,7 @@ html, body {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
color: white;
|
||||
background: var(--color-accent-hover);
|
||||
background: var(--color-accent);
|
||||
transition: var(--transition-medium);
|
||||
}
|
||||
|
||||
@@ -522,15 +522,19 @@ html, body {
|
||||
|
||||
.quick-action-button:hover {
|
||||
border-color: var(--color-accent-hover);
|
||||
background: var(--color-surface-elevated);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.quick-action-button .action-icon {
|
||||
flex-shrink: 0;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.quick-action-button span {
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-primary);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.quick-action-button.has-badge {
|
||||
@@ -631,7 +635,7 @@ html, body {
|
||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-secondary);
|
||||
background: var(--color-surface-elevated);
|
||||
background: var(--color-surface);
|
||||
transition: var(--transition-fast);
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -653,7 +657,7 @@ html, body {
|
||||
border: 1px solid var(--color-border-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
width: 100%;
|
||||
background: var(--color-surface-elevated);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.toggle-button {
|
||||
@@ -721,7 +725,7 @@ html, body {
|
||||
max-width: 90vw;
|
||||
height: 85vh;
|
||||
max-height: 85vh;
|
||||
background: var(--color-surface);
|
||||
background: var(--color-background-tertiary);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
@@ -731,7 +735,7 @@ html, body {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--color-border-secondary);
|
||||
padding: 1rem 1.25rem;
|
||||
background: var(--color-surface-elevated);
|
||||
background: var(--color-background-tertiary);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@@ -896,28 +900,6 @@ html, body {
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode adjustments */
|
||||
:root.dark .upload-zone,
|
||||
:root.auto.dark .upload-zone {
|
||||
background: linear-gradient(135deg, var(--color-background-secondary) 0%, var(--color-background-tertiary) 100%);
|
||||
}
|
||||
|
||||
:root.dark .upload-zone:hover,
|
||||
:root.dark .upload-zone.drag-active,
|
||||
:root.auto.dark .upload-zone:hover,
|
||||
:root.auto.dark .upload-zone.drag-active {
|
||||
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-light-blue) 100%);
|
||||
}
|
||||
|
||||
:root.dark .picbed-badge.is-active,
|
||||
:root.auto.dark .picbed-badge.is-active,
|
||||
:root.dark .picbed-badge:hover
|
||||
{
|
||||
border-color: var(--color-accent-hover);
|
||||
border-width: 0.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Animation for upload icon */
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
@@ -1633,11 +1615,7 @@ html, body {
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
padding: 1rem 1.25rem;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--color-surface-elevated) 0%,
|
||||
var(--color-surface) 100%
|
||||
);
|
||||
background: var(--color-surface);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
@@ -1797,6 +1775,7 @@ html, body {
|
||||
padding: 1rem 1.25rem 1.25rem;
|
||||
background: var(--color-surface);
|
||||
border-bottom: 1px solid var(--color-background-primary);
|
||||
scrollbar-color: var(--color-border-secondary) var(--color-surface);
|
||||
}
|
||||
|
||||
.settings-grid {
|
||||
@@ -1920,7 +1899,7 @@ html, body {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 1.25rem;
|
||||
background: var(--color-background-secondary);
|
||||
background: var(--color-surface);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
@@ -1929,7 +1908,7 @@ html, body {
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
padding: 0.625rem 1rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border: 1px solid var(--color-border-secondary);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-background-secondary);
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@@ -1970,7 +1949,7 @@ html, body {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--color-border);
|
||||
border: 1px solid var(--color-border-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-background-secondary);
|
||||
color: var(--color-text-secondary);
|
||||
@@ -1988,7 +1967,7 @@ html, body {
|
||||
}
|
||||
|
||||
.filter-tab.active {
|
||||
background: linear-gradient(135deg, var(--color-accent) 0%, rgb(0 100 220) 100%);
|
||||
background: var(--color-accent);
|
||||
border-color: transparent;
|
||||
color: var(--color-background-tertiary);
|
||||
box-shadow: 0 2px 8px rgb(0 122 255 / 30%);
|
||||
|
||||
@@ -175,7 +175,7 @@
|
||||
border-radius: 16px;
|
||||
padding: 1.25rem;
|
||||
min-height: 180px;
|
||||
background: var(--color-surface);
|
||||
background: var(--color-background-secondary);
|
||||
box-shadow:
|
||||
0 2px 8px rgb(0 0 0 / 4%),
|
||||
0 1px 2px rgb(0 0 0 / 6%);
|
||||
@@ -326,7 +326,7 @@
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
color: var(--color-text-secondary);
|
||||
background: var(--color-surface-elevated);
|
||||
background: var(--color-background-secondary);
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -392,7 +392,7 @@
|
||||
|
||||
.status-badge.inactive {
|
||||
color: var(--color-text-tertiary);
|
||||
background: var(--color-surface-elevated);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
.config-card:hover .status-badge.inactive {
|
||||
@@ -407,7 +407,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 2px dashed var(--color-border);
|
||||
background: var(--color-surface-elevated);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
.config-card-add:hover {
|
||||
@@ -433,7 +433,7 @@
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
color: var(--color-text-tertiary);
|
||||
background: var(--color-surface);
|
||||
background: var(--color-background-secondary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
@@ -6,22 +6,6 @@
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
/* Ambient Background Effect */
|
||||
.ambient-bg {
|
||||
position: fixed;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
z-index: 0;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background:
|
||||
radial-gradient(circle at 30% 20%, rgb(var(--accent-rgb) / 8%) 0%, transparent 50%),
|
||||
radial-gradient(circle at 70% 80%, rgb(16 185 129 / 6%) 0%, transparent 50%),
|
||||
radial-gradient(circle at 50% 50%, rgb(59 130 246 / 4%) 0%, transparent 40%);
|
||||
animation: ambient-drift 25s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes ambient-drift {
|
||||
0%,
|
||||
100% {
|
||||
@@ -161,7 +145,7 @@
|
||||
|
||||
.btn-secondary {
|
||||
color: var(--color-text-primary);
|
||||
background: var(--color-surface-elevated);
|
||||
background: var(--color-background-secondary);
|
||||
box-shadow:
|
||||
0 2px 8px rgb(0 0 0 / 8%),
|
||||
inset 0 1px 0 rgb(255 255 255 / 5%);
|
||||
@@ -245,7 +229,7 @@
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-border-secondary);
|
||||
border-radius: 20px;
|
||||
background: var(--color-surface);
|
||||
background: var(--color-background-secondary);
|
||||
box-shadow:
|
||||
0 4px 24px rgb(0 0 0 / 6%),
|
||||
0 1px 2px rgb(0 0 0 / 4%);
|
||||
@@ -269,7 +253,7 @@
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--color-border-secondary);
|
||||
padding: 1.25rem 1.5rem;
|
||||
background: var(--color-surface-elevated);
|
||||
background: var(--color-background-secondary);
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
<template>
|
||||
<div class="picbeds-page">
|
||||
<!-- Ambient Background -->
|
||||
<div class="ambient-bg" />
|
||||
|
||||
<div class="page-container">
|
||||
<header class="page-header">
|
||||
<div class="header-content">
|
||||
|
||||
Reference in New Issue
Block a user