[FIX] Machine Utilization dark mode visibility and contrast
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 42s

This commit is contained in:
2026-03-25 14:50:56 +08:00
parent 3629caebd0
commit c015666f87

View File

@@ -252,7 +252,7 @@ window.utilizationDashboard = function(initialMachines, initialStats) {
<p class="text-[11px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-[0.2em] mb-3">{{ __('Reporting Period') }}</p> <p class="text-[11px] font-black text-cyan-600 dark:text-cyan-400 uppercase tracking-[0.2em] mb-3">{{ __('Reporting Period') }}</p>
<div class="relative group"> <div class="relative group">
<input type="date" x-model="startDate" @change="fetchData" <input type="date" x-model="startDate" @change="fetchData"
class="w-full bg-transparent border-none p-0 text-xl font-black text-slate-800 dark:text-white focus:ring-0 cursor-pointer"> class="w-full bg-transparent border-none p-0 text-xl font-black text-slate-800 dark:text-white focus:ring-0 cursor-pointer dark:[&::-webkit-calendar-picker-indicator]:invert">
<div class="absolute bottom-0 left-0 w-0 h-0.5 bg-cyan-500 group-hover:w-full transition-all duration-500"></div> <div class="absolute bottom-0 left-0 w-0 h-0.5 bg-cyan-500 group-hover:w-full transition-all duration-500"></div>
</div> </div>
<p class="mt-3 text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Select date to sync data') }}</p> <p class="mt-3 text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Select date to sync data') }}</p>
@@ -321,9 +321,9 @@ window.utilizationDashboard = function(initialMachines, initialStats) {
<!-- Machine Header --> <!-- Machine Header -->
<div class="luxury-card rounded-[2.5rem] p-8 border-b-4 border-b-cyan-500 shadow-xl shadow-cyan-500/5 relative overflow-hidden"> <div class="luxury-card rounded-[2.5rem] p-8 border-b-4 border-b-cyan-500 shadow-xl shadow-cyan-500/5 relative overflow-hidden">
<div class="absolute top-0 right-0 p-8"> <div class="absolute top-0 right-0 p-8">
<div class="flex items-center gap-2 px-4 py-2 rounded-full bg-slate-900/5 dark:bg-white/5 backdrop-blur-md"> <div class="flex items-center gap-2 px-4 py-2 rounded-full bg-slate-900/5 dark:bg-white/10 backdrop-blur-md">
<div :class="selectedMachine.status === 'online' ? 'bg-emerald-500' : 'bg-slate-400'" class="size-2 rounded-full"></div> <div :class="selectedMachine.status === 'online' ? 'bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.4)]' : 'bg-slate-400'" class="w-2 h-2 rounded-full"></div>
<span class="text-[10px] font-black uppercase tracking-widest" x-text="selectedMachine.status === 'online' ? '{{ __("Online") }}' : '{{ __("Offline") }}'"></span> <span class="text-[10px] font-black uppercase tracking-widest text-slate-600 dark:text-slate-200" x-text="selectedMachine.status === 'online' ? '{{ __("Online") }}' : '{{ __("Offline") }}'"></span>
</div> </div>
</div> </div>