52 lines
3.0 KiB
HTML
52 lines
3.0 KiB
HTML
<!-- Color Scheme Modal -->
|
|
<div v-if="showColorSchemeModal" class="color-scheme-modal" @click.self="closeColorSchemeModal">
|
|
<div class="color-scheme-modal-content">
|
|
<div class="color-scheme-header">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h2 class="color-scheme-title">
|
|
<i class="fas fa-palette"></i>
|
|
<span v-text="t('colorScheme.title')"></span>
|
|
</h2>
|
|
<button @click="closeColorSchemeModal" class="text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<p class="color-scheme-subtitle" v-text="t('colorScheme.subtitle')"></p>
|
|
</div>
|
|
|
|
<div class="color-scheme-body">
|
|
<div class="color-scheme-section">
|
|
<h3 class="color-scheme-section-title">
|
|
<i :class="isDarkMode ? 'fas fa-moon' : 'fas fa-sun'"></i>
|
|
<span v-text="isDarkMode ? t('colorScheme.darkThemes') : t('colorScheme.lightThemes')"></span>
|
|
</h3>
|
|
<div class="color-scheme-grid">
|
|
<div v-for="scheme in colorSchemes[isDarkMode ? 'dark' : 'light']"
|
|
:key="scheme.id"
|
|
@click="selectColorScheme(scheme.id)"
|
|
:class="['color-scheme-option', currentColorScheme === scheme.id ? 'active' : '']">
|
|
<div class="color-scheme-preview">
|
|
<div :class="`preview-${isDarkMode ? 'dark-' : ''}${scheme.id}-primary color-scheme-preview-segment`"></div>
|
|
<div :class="`preview-${isDarkMode ? 'dark-' : ''}${scheme.id}-secondary color-scheme-preview-segment`"></div>
|
|
<div :class="`preview-${isDarkMode ? 'dark-' : ''}${scheme.id}-tertiary color-scheme-preview-segment`"></div>
|
|
</div>
|
|
<div class="color-scheme-name" v-text="t('colorScheme.themes.' + (isDarkMode ? 'dark' : 'light') + '.' + scheme.id + '.name')"></div>
|
|
<div class="color-scheme-description" v-text="t('colorScheme.themes.' + (isDarkMode ? 'dark' : 'light') + '.' + scheme.id + '.description')"></div>
|
|
<div v-if="currentColorScheme === scheme.id" class="color-scheme-check">
|
|
<i class="fas fa-check"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-scheme-footer">
|
|
<button @click="resetColorScheme" class="color-scheme-reset-btn">
|
|
<i class="fas fa-undo mr-2"></i><span v-text="t('colorScheme.resetToDefault')"></span>
|
|
</button>
|
|
<button @click="closeColorSchemeModal" class="color-scheme-close-btn" v-text="t('common.close')">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|