landaiqing/voidraft
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

✨ Added dark theme and white theme switching

Browse Source
This commit is contained in:
landaiqing
2025-06-09 02:29:15 +08:00
parent 7f97b4a937
commit aff08f4d3d
23 changed files with 630 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/src/views/settings/Settings.vue
View File

@@ -45,7 +45,7 @@ const goBackToEditor = async () => {
<h1>{{ t('settings.title') }}</h1>
</div>
</div>
<div class="settings-nav">
<div class="settings-nav thin-scrollbar">
<div
v-for="item in navItems"
:key="item.id"
@@ -76,8 +76,8 @@ const goBackToEditor = async () => {
height: 100vh;
margin: 0;
padding: 0;
background-color: #2a2a2a;
color: #e0e0e0;
background-color: var(--settings-bg);
color: var(--settings-text);
display: flex;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -85,16 +85,16 @@ const goBackToEditor = async () => {
.settings-sidebar {
width: 200px;
height: 100%;
background-color: #333333;
border-right: 1px solid #444444;
background-color: var(--settings-card-bg);
border-right: 1px solid var(--settings-border);
display: flex;
flex-direction: column;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
.settings-header {
padding: 20px 16px;
border-bottom: 1px solid #444444;
background-color: #2d2d2d;
border-bottom: 1px solid var(--settings-border);
background-color: var(--settings-card-bg);
.header-content {
display: flex;
@@ -104,7 +104,7 @@ const goBackToEditor = async () => {
.back-button {
background: none;
border: none;
color: #a0a0a0;
color: var(--settings-text-secondary);
cursor: pointer;
padding: 6px;
border-radius: 4px;
@@ -114,8 +114,8 @@ const goBackToEditor = async () => {
transition: all 0.2s ease;
&:hover {
color: #e0e0e0;
background-color: #3a3a3a;
color: var(--settings-text);
background-color: var(--settings-hover);
}
svg {
@@ -128,7 +128,7 @@ const goBackToEditor = async () => {
font-size: 18px;
font-weight: 600;
margin: 0;
color: #ffffff;
color: var(--settings-text);
}
}
}
@@ -138,19 +138,6 @@ const goBackToEditor = async () => {
padding: 10px 0;
overflow-y: auto;
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-track {
background: #333333;
}
&::-webkit-scrollbar-thumb {
background-color: #555555;
border-radius: 4px;
}
.nav-item {
display: flex;
align-items: center;
@@ -160,11 +147,11 @@ const goBackToEditor = async () => {
border-left: 3px solid transparent;
&:hover {
background-color: #3a3a3a;
background-color: var(--settings-hover);
}
&.active {
background-color: #3c3c3c;
background-color: var(--settings-hover);
border-left-color: #4a9eff;
font-weight: 500;
}
@@ -183,8 +170,8 @@ const goBackToEditor = async () => {
.settings-footer {
padding: 12px 16px 16px 16px;
border-top: 1px solid #444444;
background-color: #2d2d2d;
border-top: 1px solid var(--settings-border);
background-color: var(--settings-card-bg);
.memory-info-section {
display: flex;
@@ -193,7 +180,7 @@ const goBackToEditor = async () => {
.section-title {
font-size: 10px;
color: #777777;
color: var(--settings-text-secondary);
font-weight: 500;
margin-bottom: 0;
text-transform: uppercase;
@@ -206,36 +193,11 @@ const goBackToEditor = async () => {
.settings-content {
flex: 1;
height: 100%;
padding: 24px;
padding: 24px 24px 48px 24px;
overflow-y: auto;
background-color: #2a2a2a;
&::-webkit-scrollbar {
width: 10px;
}
&::-webkit-scrollbar-track {
background: #2a2a2a;
}
&::-webkit-scrollbar-thumb {
background-color: #555555;
border-radius: 5px;
border: 2px solid #2a2a2a;
}
background-color: var(--settings-bg);
}
}
// 自定义变量
:root {
--border-color: #444444;
--hover-color: #3a3a3a;
--active-bg: #3c3c3c;
--accent-color: #4a9eff;
--bg-primary: #2a2a2a;
--bg-secondary: #333333;
--text-primary: #e0e0e0;
--text-secondary: #a0a0a0;
--text-muted: #777777;
}
</style>

9
frontend/src/views/settings/components/SettingItem.vue
View File

@@ -21,11 +21,12 @@ defineProps<{
.setting-item {
display: flex;
padding: 14px 0;
border-bottom: 1px solid #444444;
border-bottom: 1px solid var(--settings-border);
transition: background-color 0.15s ease;
&:hover {
background-color: rgba(255, 255, 255, 0.03);
background-color: var(--settings-hover);
opacity: 0.8;
}
&:last-child {
@@ -40,12 +41,12 @@ defineProps<{
font-size: 14px;
font-weight: 500;
margin-bottom: 6px;
color: #e0e0e0;
color: var(--settings-text);
}
.setting-description {
font-size: 12px;
color: #a0a0a0;
color: var(--settings-text-secondary);
line-height: 1.5;
}
}

9
frontend/src/views/settings/components/SettingSection.vue
View File

@@ -16,19 +16,20 @@ defineProps<{
<style scoped lang="scss">
.setting-section {
margin-bottom: 30px;
background-color: #333333;
background-color: var(--settings-card-bg);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
border: 1px solid var(--settings-border);
.section-title {
font-size: 14px;
font-weight: 600;
margin: 0;
padding: 12px 16px;
background-color: #3d3d3d;
color: #ffffff;
border-bottom: 1px solid #444444;
background-color: var(--settings-hover);
color: var(--settings-text);
border-bottom: 1px solid var(--settings-border);
}
.section-content {

4
frontend/src/views/settings/components/ToggleSwitch.vue
View File

@@ -22,7 +22,7 @@ const toggle = () => {
.toggle-switch {
width: 40px;
height: 20px;
background-color: #555555;
background-color: var(--settings-input-border);
border-radius: 10px;
position: relative;
cursor: pointer;
@@ -44,7 +44,7 @@ const toggle = () => {
left: 2px;
width: 16px;
height: 16px;
background-color: #f0f0f0;
background-color: var(--settings-text);
border-radius: 50%;
transition: all 0.2s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

43
frontend/src/views/settings/pages/AppearancePage.vue
View File

@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
import { ref, computed, watch } from 'vue';
import SettingSection from '../components/SettingSection.vue';
import SettingItem from '../components/SettingItem.vue';
import type { ThemeType } from '@/types';
import type { ThemeType, SystemThemeType } from '@/types';
import { LanguageType } from '@/../bindings/voidraft/internal/models';
import { AVAILABLE_THEMES } from '@/types/theme';
import { useTheme } from '@/composables/useTheme';
@@ -21,6 +21,13 @@ const languageOptions = [
{ value: LanguageType.LangEnUS, label: t('languages.en-US') },
];
// 系统主题选项
const systemThemeOptions = [
{ value: 'dark' as SystemThemeType, label: t('systemTheme.dark') },
{ value: 'light' as SystemThemeType, label: t('systemTheme.light') },
{ value: 'auto' as SystemThemeType, label: t('systemTheme.auto') },
];
// 更新语言设置
const updateLanguage = async (event: Event) => {
const select = event.target as HTMLSelectElement;
@@ -32,6 +39,17 @@ const updateLanguage = async (event: Event) => {
);
};
// 更新系统主题设置
const updateSystemTheme = async (event: Event) => {
const select = event.target as HTMLSelectElement;
const selectedSystemTheme = select.value as SystemThemeType;
await safeCall(
() => configStore.setSystemTheme(selectedSystemTheme),
'config.systemThemeChangeFailed'
);
};
// 主题选择
const themeOptions = computed(() => AVAILABLE_THEMES);
const selectedTheme = ref<ThemeType>(configStore.config.appearance.theme || 'default-dark' as ThemeType);
@@ -77,6 +95,16 @@ watch(() => configStore.config.appearance.theme, (newTheme) => {
</SettingItem>
</SettingSection>
<SettingSection :title="t('settings.systemTheme')">
<SettingItem :title="t('settings.systemTheme')">
<select class="select-input" :value="configStore.config.appearance.systemTheme" @change="updateSystemTheme">
<option v-for="option in systemThemeOptions" :key="option.value" :value="option.value">
{{ option.label }}
</option>
</select>
</SettingItem>
</SettingSection>
<SettingSection :title="t('settings.appearance')">
<div class="appearance-content">
<div class="theme-selection-area">
@@ -140,6 +168,7 @@ watch(() => configStore.config.appearance.theme, (newTheme) => {
<style scoped lang="scss">
.settings-page {
max-width: 1000px;
padding-bottom: 48px;
}
.appearance-content {
@@ -169,17 +198,18 @@ watch(() => configStore.config.appearance.theme, (newTheme) => {
.select-input {
min-width: 150px;
padding: 8px 12px;
border: 1px solid #555555;
border: 1px solid var(--settings-input-border);
border-radius: 4px;
background-color: #3a3a3a;
color: #e0e0e0;
background-color: var(--settings-input-bg);
color: var(--settings-text);
font-size: 13px;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 16px;
padding-right: 30px;
transition: border-color 0.2s ease;
&:focus {
outline: none;
@@ -187,7 +217,8 @@ watch(() => configStore.config.appearance.theme, (newTheme) => {
}
option {
background-color: #2a2a2a;
background-color: var(--settings-card-bg);
color: var(--settings-text);
}
}

87
frontend/src/views/settings/pages/EditingPage.vue
View File

@@ -295,30 +295,31 @@ const fontPreviewText = computed(() => {
<style scoped lang="scss">
.settings-page {
max-width: 800px;
padding-bottom: 48px;
}
.number-control {
display: flex;
align-items: center;
gap: 10px;
gap: 8px;
.control-button {
width: 30px;
height: 30px;
width: 28px;
height: 28px;
border: 1px solid var(--settings-input-border);
background-color: var(--settings-input-bg);
color: var(--settings-text);
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background-color: #3a3a3a;
border: 1px solid #555555;
border-radius: 4px;
color: #e0e0e0;
cursor: pointer;
font-size: 16px;
font-size: 14px;
transition: all 0.2s ease;
&:hover:not(:disabled) {
background-color: #444444;
border-color: #666666;
background-color: var(--settings-hover);
border-color: var(--settings-border);
}
&:active:not(:disabled) {
@@ -335,9 +336,9 @@ const fontPreviewText = computed(() => {
min-width: 50px;
text-align: center;
font-size: 14px;
color: #e0e0e0;
background-color: #3a3a3a;
border: 1px solid #555555;
color: var(--settings-text);
background-color: var(--settings-input-bg);
border: 1px solid var(--settings-input-border);
border-radius: 4px;
padding: 5px 8px;
}
@@ -346,14 +347,14 @@ const fontPreviewText = computed(() => {
.font-size-preview {
margin: 15px 0 5px 20px;
padding: 15px;
background-color: #252525;
border: 1px solid #444444;
background-color: var(--settings-card-bg);
border: 1px solid var(--settings-border);
border-radius: 4px;
font-family: 'Consolas', 'Courier New', monospace;
.preview-label {
font-size: 12px;
color: #888888;
color: var(--text-muted);
margin-bottom: 8px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@@ -364,7 +365,7 @@ const fontPreviewText = computed(() => {
span {
line-height: 1.4;
color: #d0d0d0;
color: var(--settings-text-secondary);
}
.indent {
@@ -377,13 +378,13 @@ const fontPreviewText = computed(() => {
.font-preview {
margin: 15px 0 5px 20px;
padding: 15px;
background-color: #252525;
border: 1px solid #444444;
background-color: var(--settings-card-bg);
border: 1px solid var(--settings-border);
border-radius: 4px;
.preview-label {
font-size: 12px;
color: #888888;
color: var(--text-muted);
margin-bottom: 8px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@@ -393,7 +394,7 @@ const fontPreviewText = computed(() => {
flex-direction: column;
span {
color: #d0d0d0;
color: var(--settings-text-secondary);
}
.indent {
@@ -407,10 +408,10 @@ const fontPreviewText = computed(() => {
.font-weight-select {
min-width: 180px;
padding: 8px 12px;
border: 1px solid #555555;
border: 1px solid var(--settings-input-border);
border-radius: 4px;
background-color: #3a3a3a;
color: #e0e0e0;
background-color: var(--settings-input-bg);
color: var(--settings-text);
font-size: 13px;
cursor: pointer;
@@ -420,12 +421,12 @@ const fontPreviewText = computed(() => {
}
&:hover {
border-color: #666666;
border-color: var(--settings-border);
}
option {
background-color: #3a3a3a;
color: #e0e0e0;
background-color: var(--settings-input-bg);
color: var(--settings-text);
padding: 4px 8px;
}
}
@@ -433,18 +434,18 @@ const fontPreviewText = computed(() => {
.tab-type-toggle {
min-width: 100px;
padding: 8px 15px;
background-color: #3a3a3a;
border: 1px solid #555555;
background-color: var(--settings-input-bg);
border: 1px solid var(--settings-input-border);
border-radius: 4px;
color: #e0e0e0;
color: var(--settings-text);
cursor: pointer;
font-size: 13px;
text-align: center;
transition: all 0.2s ease;
&:hover {
background-color: #444444;
border-color: #666666;
background-color: var(--settings-hover);
border-color: var(--settings-border);
}
&:active {
@@ -455,10 +456,10 @@ const fontPreviewText = computed(() => {
.number-input {
width: 100px;
padding: 8px 12px;
border: 1px solid #555555;
border: 1px solid var(--settings-input-border);
border-radius: 4px;
background-color: #3a3a3a;
color: #e0e0e0;
background-color: var(--settings-input-bg);
color: var(--settings-text);
font-size: 13px;
&:focus {
@@ -467,14 +468,14 @@ const fontPreviewText = computed(() => {
}
&:hover {
border-color: #666666;
border-color: var(--settings-border);
}
&:disabled {
opacity: 0.7;
cursor: not-allowed;
background-color: #2a2a2a;
color: #a0a0a0;
background-color: var(--settings-hover);
color: var(--text-muted);
}
}
@@ -491,8 +492,8 @@ const fontPreviewText = computed(() => {
cursor: not-allowed;
&:hover {
background-color: #3a3a3a;
border-color: #555555;
background-color: var(--settings-input-bg);
border-color: var(--settings-input-border);
}
}
@@ -506,8 +507,8 @@ const fontPreviewText = computed(() => {
cursor: not-allowed;
&:hover {
background-color: #3a3a3a;
border-color: #555555;
background-color: var(--settings-input-bg);
border-color: var(--settings-input-border);
transform: none;
}

98
frontend/src/views/settings/pages/GeneralPage.vue
View File

@@ -148,9 +148,11 @@ const progressBarClass = computed(() => {
});
const progressBarWidth = computed(() => {
if (isMigrating.value) {
// 只有在显示消息且正在迁移时才显示进度条
if (showMessages.value && isMigrating.value) {
return migrationProgress.progress + '%';
} else if (migrationComplete.value || migrationFailed.value) {
} else if (showMessages.value && (migrationComplete.value || migrationFailed.value)) {
// 迁移完成或失败时，短暂显示100%，然后随着消息隐藏而隐藏
return '100%';
}
return '0%';
@@ -369,7 +371,7 @@ onUnmounted(() => {
<div
class="progress-bar"
:class="[
{ 'active': showMessages },
{ 'active': showMessages && (isMigrating || migrationComplete || migrationFailed) },
progressBarClass
]"
:style="{ width: progressBarWidth }"
@@ -392,7 +394,7 @@ onUnmounted(() => {
</SettingSection>
<SettingSection :title="t('settings.dangerZone')">
<SettingItem :title="t('settings.resetAllSettings')" :description="t('settings.resetDescription')">
<SettingItem :title="t('settings.resetAllSettings')">
<button
class="reset-button"
:class="{ 'confirming': resetConfirmState === 'confirming' }"
@@ -415,6 +417,7 @@ onUnmounted(() => {
<style scoped lang="scss">
.settings-page {
max-width: 800px;
padding-bottom: 48px;
}
.hotkey-selector {
@@ -453,15 +456,15 @@ onUnmounted(() => {
.modifier-key {
display: inline-block;
padding: 6px 12px;
background-color: #444444;
border: 1px solid #555555;
background-color: var(--settings-input-bg);
border: 1px solid var(--settings-input-border);
border-radius: 4px;
color: #b0b0b0;
color: var(--settings-text-secondary);
font-size: 13px;
transition: all 0.2s ease;
&:hover {
background-color: #4a4a4a;
background-color: var(--settings-hover);
}
}
@@ -476,13 +479,13 @@ onUnmounted(() => {
.key-select {
min-width: 80px;
padding: 8px 12px;
background-color: #3a3a3a;
border: 1px solid #555555;
background-color: var(--settings-input-bg);
border: 1px solid var(--settings-input-border);
border-radius: 4px;
color: #e0e0e0;
color: var(--settings-text);
font-size: 13px;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 16px;
@@ -496,11 +499,12 @@ onUnmounted(() => {
&:disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #2a2a2a;
background-color: var(--settings-hover);
}
option {
background-color: #2a2a2a;
background-color: var(--settings-input-bg);
color: var(--settings-text);
}
}
@@ -509,19 +513,19 @@ onUnmounted(() => {
align-items: center;
gap: 8px;
padding: 8px 12px;
background-color: #252525;
border: 1px solid #444444;
background-color: var(--settings-card-bg);
border: 1px solid var(--settings-border);
border-radius: 4px;
margin-top: 8px;
.preview-label {
font-size: 12px;
color: #888888;
color: var(--settings-text-secondary);
}
.preview-hotkey {
font-size: 13px;
color: #4a9eff;
color: var(--settings-text);
font-weight: 500;
font-family: 'Consolas', 'Courier New', monospace;
}
@@ -544,7 +548,7 @@ onUnmounted(() => {
.setting-title {
font-size: 14px;
font-weight: 500;
color: #e0e0e0;
color: var(--settings-text);
}
}
}
@@ -563,24 +567,23 @@ onUnmounted(() => {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
background-color: #3a3a3a;
border: 1px solid #555555;
background-color: var(--settings-input-bg);
border: 1px solid var(--settings-input-border);
border-radius: 4px;
color: #e0e0e0;
color: var(--settings-text);
font-size: 13px;
line-height: 1.2;
transition: all 0.2s ease;
cursor: pointer;
&:hover:not(:disabled) {
border-color: #4a9eff;
background-color: #404040;
border-color: var(--settings-hover);
background-color: var(--settings-hover);
}
&:focus {
outline: none;
border-color: #4a9eff;
background-color: #404040;
}
&:disabled {
@@ -589,7 +592,7 @@ onUnmounted(() => {
}
&::placeholder {
color: #888888;
color: var(--text-muted);
}
}
@@ -598,25 +601,27 @@ onUnmounted(() => {
bottom: 0;
left: 0;
height: 2px;
background-color: #22c55e;
transition: width 0.3s ease;
background-color: transparent;
border-radius: 0 0 4px 4px;
transition: all 0.3s ease;
width: 0;
opacity: 0;
&.active {
opacity: 1;
}
&.migrating {
background-color: #3b82f6;
animation: progress-wave 2s infinite;
}
&.migrating {
background-color: #3b82f6;
}
&.success {
background-color: #22c55e;
}
&.success {
background-color: #22c55e;
}
&.error {
background-color: #ef4444;
&.error {
background-color: #ef4444;
}
}
}
}
@@ -653,10 +658,10 @@ onUnmounted(() => {
}
&.start {
color: #94a3b8;
color: var(--text-muted);
&::before {
background-color: #94a3b8;
background-color: var(--text-muted);
}
}
@@ -732,6 +737,19 @@ onUnmounted(() => {
}
}
// 进度条波浪动画
@keyframes progress-wave {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
// 按钮脉冲动画
@keyframes pulse-button {
0% {

31
frontend/src/views/settings/pages/KeyBindingsPage.vue
View File

@@ -121,6 +121,7 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
<style scoped lang="scss">
.settings-page {
max-width: 800px;
padding-bottom: 48px;
}
.key-bindings-container {
@@ -129,8 +130,8 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
.key-bindings-header {
display: flex;
padding: 0 0 10px 0;
border-bottom: 1px solid #444444;
color: #a0a0a0;
border-bottom: 1px solid var(--settings-border);
color: var(--text-muted);
font-size: 13px;
font-weight: 500;
}
@@ -138,7 +139,7 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
.key-binding-row {
display: flex;
padding: 14px 0;
border-bottom: 1px solid #3a3a3a;
border-bottom: 1px solid var(--settings-border);
align-items: center;
transition: background-color 0.2s ease;
@@ -147,7 +148,7 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
}
&:hover {
background-color: rgba(255, 255, 255, 0.03);
background-color: var(--settings-hover);
}
&.is-editing {
@@ -159,6 +160,7 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
flex: 1;
padding-right: 10px;
font-size: 14px;
color: var(--settings-text);
}
.keybinding-col {
@@ -169,15 +171,16 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
&.is-editing {
font-style: italic;
color: #a0a0a0;
color: var(--text-muted);
}
.key-badge {
background-color: #3a3a3a;
background-color: var(--settings-input-bg);
padding: 3px 8px;
border-radius: 3px;
font-size: 12px;
border: 1px solid #555555;
border: 1px solid var(--settings-input-border);
color: var(--settings-text);
}
}
@@ -187,17 +190,17 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
.edit-button {
padding: 5px 10px;
background-color: #3a3a3a;
border: 1px solid #555555;
background-color: var(--settings-input-bg);
border: 1px solid var(--settings-input-border);
border-radius: 4px;
color: #e0e0e0;
color: var(--settings-text);
cursor: pointer;
font-size: 13px;
transition: all 0.2s ease;
&:hover {
background-color: #444444;
border-color: #666666;
background-color: var(--settings-hover);
border-color: var(--settings-border);
}
&:active {
@@ -209,9 +212,9 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
.coming-soon-placeholder {
padding: 20px;
background-color: #333333;
background-color: var(--settings-card-bg);
border-radius: 6px;
color: #a0a0a0;
color: var(--text-muted);
text-align: center;
font-style: italic;
font-size: 14px;

25
frontend/src/views/settings/pages/UpdatesPage.vue
View File

@@ -89,6 +89,7 @@ const downloadUpdate = () => {
<style scoped lang="scss">
.settings-page {
max-width: 800px;
padding-bottom: 48px;
}
.update-info {
@@ -105,22 +106,22 @@ const downloadUpdate = () => {
font-size: 14px;
.label {
color: #a0a0a0;
color: var(--text-muted);
margin-right: 5px;
}
.version {
color: #e0e0e0;
color: var(--settings-text);
font-weight: 500;
}
}
.check-button {
padding: 8px 16px;
background-color: #3a3a3a;
border: 1px solid #555555;
background-color: var(--settings-input-bg);
border: 1px solid var(--settings-input-border);
border-radius: 4px;
color: #e0e0e0;
color: var(--settings-text);
cursor: pointer;
font-size: 13px;
transition: all 0.2s ease;
@@ -129,8 +130,8 @@ const downloadUpdate = () => {
gap: 8px;
&:hover:not(:disabled) {
background-color: #444444;
border-color: #666666;
background-color: var(--settings-hover);
border-color: var(--settings-border);
}
&:active:not(:disabled) {
@@ -148,7 +149,7 @@ const downloadUpdate = () => {
height: 14px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #e0e0e0;
border-top-color: var(--settings-text);
animation: spin 1s linear infinite;
}
@@ -159,8 +160,8 @@ const downloadUpdate = () => {
}
.update-available {
background-color: #2c3847;
border: 1px solid #3a4a5c;
background-color: var(--settings-card-bg);
border: 1px solid var(--settings-border);
border-radius: 6px;
padding: 16px;
@@ -199,7 +200,7 @@ const downloadUpdate = () => {
.update-notes {
.notes-title {
font-size: 13px;
color: #b0b0b0;
color: var(--settings-text-secondary);
margin-bottom: 8px;
}
@@ -209,7 +210,7 @@ const downloadUpdate = () => {
li {
font-size: 13px;
color: #d0d0d0;
color: var(--settings-text-secondary);
margin-bottom: 6px;
&:last-child {