Remove the light mode.

This commit is contained in:
2025-12-12 23:07:29 +00:00
parent a5d69ccb86
commit 4aab8af16f
33 changed files with 501 additions and 548 deletions
+15 -15
View File
@@ -255,7 +255,7 @@ const remainingCount = computed(() => {
<div
v-for="item in progressItems"
:key="item.id"
class="bg-gray-50 dark:bg-gray-800/50 rounded-xl p-4 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
class="bg-gray-800/50 rounded-xl p-4 hover:bg-gray-800 transition-colors"
>
<div class="flex items-start justify-between mb-3">
<div class="flex items-center space-x-3">
@@ -266,30 +266,30 @@ const remainingCount = computed(() => {
<i class="fas text-white text-sm" :class="item.icon"></i>
</div>
<div>
<div class="text-sm font-semibold text-gray-900 dark:text-white">
<div class="text-sm font-semibold text-white">
{{ item.name }}
</div>
<div class="flex items-center space-x-2 text-xs text-gray-600 dark:text-gray-400">
<div class="flex items-center space-x-2 text-xs text-gray-400">
<span>{{ item.category }}</span>
<span class="text-gray-600 dark:text-gray-400"></span>
<span class="text-gray-400"></span>
<span class="font-medium">Tier {{ item.tierIndex }}/{{ item.totalTiers }}</span>
</div>
</div>
</div>
<div class="text-right">
<div class="text-sm font-bold" :class="item.isClose ? 'text-green-500' : 'text-gray-700 dark:text-gray-200'">
<div class="text-sm font-bold" :class="item.isClose ? 'text-green-500' : 'text-gray-200'">
{{ formatNumber(item.currentValue) }}
<span class="text-gray-600 dark:text-gray-400 font-normal">/</span>
<span class="text-gray-600 dark:text-gray-400 font-medium">{{ formatNumber(item.target) }}</span>
<span class="text-gray-400 font-normal">/</span>
<span class="text-gray-400 font-medium">{{ formatNumber(item.target) }}</span>
</div>
<div class="text-xs text-gray-600 dark:text-gray-400 mt-0.5">
<div class="text-xs text-gray-400 mt-0.5">
{{ item.remaining > 0 ? `${formatNumber(item.remaining)} to go` : 'Ready to claim!' }}
</div>
</div>
</div>
<!-- Progress Bar -->
<div class="h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
<div class="h-2.5 bg-gray-700 rounded-full overflow-hidden">
<div
class="h-full rounded-full transition-all duration-500 ease-out"
:class="item.progressColor"
@@ -304,14 +304,14 @@ const remainingCount = computed(() => {
v-for="(t, idx) in item.allTiers.slice(0, 5)"
:key="t.threshold"
class="w-1.5 h-1.5 rounded-full"
:class="idx < item.tierIndex ? 'bg-green-500' : 'bg-gray-300 dark:bg-gray-600'"
:class="idx < item.tierIndex ? 'bg-green-500' : 'bg-gray-600'"
:title="`Tier ${idx + 1}: ${t.name} (${formatNumber(t.threshold)})`"
></span>
<span v-if="item.totalTiers > 5" class="text-[10px] text-gray-600 dark:text-gray-400">+{{ item.totalTiers - 5 }}</span>
<span v-if="item.totalTiers > 5" class="text-[10px] text-gray-400">+{{ item.totalTiers - 5 }}</span>
</div>
<span
class="text-xs font-semibold"
:class="item.isClose ? 'text-green-500' : 'text-gray-600 dark:text-gray-400'"
:class="item.isClose ? 'text-green-500' : 'text-gray-400'"
>
{{ item.progress }}%
</span>
@@ -319,16 +319,16 @@ const remainingCount = computed(() => {
</div>
<!-- Show more indicator -->
<div v-if="remainingCount > 0" class="text-center text-xs text-gray-600 dark:text-gray-400 pt-2">
<div v-if="remainingCount > 0" class="text-center text-xs text-gray-400 pt-2">
+{{ remainingCount }} more achievements to unlock
</div>
<!-- Empty state -->
<div v-if="!progressItems.length" class="text-center py-8 text-gray-600 dark:text-gray-400">
<div v-if="!progressItems.length" class="text-center py-8 text-gray-400">
<div class="w-16 h-16 mx-auto mb-3 rounded-2xl bg-gradient-to-br from-yellow-400 to-amber-500 flex items-center justify-center shadow-lg">
<i class="fas fa-trophy text-2xl text-white"></i>
</div>
<p class="font-medium text-gray-700 dark:text-gray-300">All achievements unlocked!</p>
<p class="font-medium text-gray-300">All achievements unlocked!</p>
<p class="text-sm mt-1">You're a legend!</p>
</div>
</div>