Skip to content

Commit 0e651d8

Browse files
thebenternthebentern
committed
More light mode display fixes
1 parent a72fd30 commit 0e651d8

File tree

7 files changed

+183
-23
lines changed

7 files changed

+183
-23
lines changed

‎app.vue‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -173,22 +173,22 @@
173173
</transition-group>
174174
</div>
175175

176-
<div class="fixed right-2 sm:right-4 bottom-4 sm:bottom-6 group z-50">
176+
<div v-show="isConnected" class="fixed right-2 sm:right-4 top-4 sm:top-6 group z-[10000]">
177177
<button
178178
type="button"
179179
:disabled="true"
180180
:class="{
181181
'border-purple-400/50 bg-purple-500/10': serialMonitorStore.isConnected && !serialMonitorStore.isReaderLocked,
182182
'border-meshtastic/50 bg-meshtastic/10': (serialMonitorStore.isConnected && serialMonitorStore.isReaderLocked) || firmwareStore.isConnected,
183-
'border-zinc-700 bg-zinc-800/50': !isConnected,
183+
'connection-status-disconnected': !isConnected,
184184
}"
185185
class="inline-flex items-center gap-2 border backdrop-blur-md font-medium rounded-xl text-xs px-3 sm:px-4 py-2 text-center shadow-lg transition-all duration-300"
186186
>
187187
<span
188188
:class="{
189189
'text-purple-400': serialMonitorStore.isConnected && !serialMonitorStore.isReaderLocked,
190190
'text-meshtastic': (serialMonitorStore.isConnected && serialMonitorStore.isReaderLocked) || firmwareStore.isConnected,
191-
'text-gray-400': !isConnected,
191+
'connection-status-disconnected-text': !isConnected,
192192
}"
193193
>
194194
{{ connectionButtonLabel }}
@@ -395,6 +395,31 @@ onMounted(() => {
395395
transition: background 1.5s cubic-bezier(0.4, 0, 0.2, 1),
396396
color 1.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
397397
}
398+
399+
/* Light mode konami - use light retro background */
400+
:root[data-theme="light"] .konami-code {
401+
background: linear-gradient(
402+
-45deg,
403+
#e8f5e9,
404+
#f1f8f1,
405+
#eff7ef,
406+
#e6f4e6,
407+
#e8f2e8,
408+
#e8f5e9
409+
) !important;
410+
color: #1a3a1a !important;
411+
}
412+
413+
:root[data-theme="light"] .konami-code,
414+
:root[data-theme="light"] .konami-code * {
415+
color: #1a3a1a !important;
416+
text-shadow: none !important;
417+
}
418+
419+
:root[data-theme="light"] .konami-code h2 {
420+
color: #0d5f0d !important;
421+
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5) !important;
422+
}
398423
399424
@keyframes konamiGradient {
400425
0% {

‎assets/css/main.css‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -576,6 +576,131 @@
576576
:root[data-theme="light"] .text-warning {
577577
color: rgb(161, 98, 7); /* amber-700 for better contrast on light bg */
578578
}
579+
580+
/* Theme-aware meshtastic green text - dark in light mode */
581+
.text-meshtastic-dark {
582+
color: #1A9B4A;
583+
}
584+
585+
:root[data-theme="dark"] .text-meshtastic-dark {
586+
color: #67EA94;
587+
}
588+
589+
/* Theme-aware hover text for dropdown items */
590+
.hover\:text-meshtastic-dark:hover {
591+
color: #1A9B4A;
592+
}
593+
594+
:root[data-theme="dark"] .hover\:text-meshtastic-dark:hover {
595+
color: #67EA94;
596+
}
597+
598+
/* Connection status button - disconnected state */
599+
.connection-status-disconnected {
600+
border-color: var(--border-default);
601+
background: var(--surface-secondary);
602+
}
603+
604+
.connection-status-disconnected-text {
605+
color: var(--text-muted);
606+
}
607+
608+
/* Serial monitor toolbar */
609+
.serial-toolbar {
610+
background: var(--surface-modal);
611+
border: 1px solid var(--border-default);
612+
}
613+
614+
:root[data-theme="light"] .serial-toolbar {
615+
background: #f5f4f0;
616+
border: 1px solid #d1d0c9;
617+
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
618+
}
619+
620+
.serial-toolbar-inner {
621+
background: linear-gradient(to right, var(--surface-secondary), transparent, var(--surface-secondary));
622+
}
623+
624+
:root[data-theme="light"] .serial-toolbar-inner {
625+
background: linear-gradient(to right, rgba(0,0,0,0.02), transparent, rgba(0,0,0,0.02));
626+
}
627+
628+
.serial-action-buttons {
629+
background: var(--surface-secondary);
630+
border: 1px solid var(--border-default);
631+
}
632+
633+
:root[data-theme="light"] .serial-action-buttons {
634+
background: #e8e7e3;
635+
border: 1px solid #c8c7c1;
636+
}
637+
638+
.serial-action-btn {
639+
color: var(--text-muted);
640+
}
641+
642+
.serial-action-btn:hover {
643+
color: var(--primary-color);
644+
background: var(--surface-primary);
645+
}
646+
647+
:root[data-theme="light"] .serial-action-btn {
648+
color: #5c5b57;
649+
}
650+
651+
:root[data-theme="light"] .serial-action-btn:hover {
652+
color: #1A9B4A;
653+
background: rgba(26, 155, 74, 0.1);
654+
}
655+
656+
.serial-disconnect-btn {
657+
color: var(--text-muted);
658+
background: var(--surface-secondary);
659+
border: 1px solid var(--border-default);
660+
}
661+
662+
.serial-disconnect-btn:hover {
663+
color: #f87171;
664+
border-color: rgba(248, 113, 113, 0.4);
665+
}
666+
667+
:root[data-theme="light"] .serial-disconnect-btn {
668+
color: #5c5b57;
669+
background: #e8e7e3;
670+
border: 1px solid #c8c7c1;
671+
}
672+
673+
:root[data-theme="light"] .serial-disconnect-btn:hover {
674+
color: #dc2626;
675+
border-color: rgba(220, 38, 38, 0.5);
676+
}
677+
678+
.serial-terminal-container {
679+
background: var(--surface-secondary);
680+
border: 1px solid var(--border-default);
681+
}
682+
683+
:root[data-theme="light"] .serial-terminal-container {
684+
background: #f5f4f0;
685+
border: 1px solid #d1d0c9;
686+
}
687+
688+
.serial-loading-overlay {
689+
background: var(--surface-modal);
690+
}
691+
692+
:root[data-theme="light"] .serial-loading-overlay {
693+
background: rgba(245, 244, 240, 0.9);
694+
}
695+
696+
/* Modal backdrop - theme aware */
697+
.modal-backdrop {
698+
background: rgba(0, 0, 0, 0.3);
699+
}
700+
701+
:root[data-theme="light"] .modal-backdrop {
702+
background: rgba(0, 0, 0, 0.05);
703+
}
579704

580705
.flash-header-close {
581706
@apply inline-flex items-center justify-center;

‎components/Device.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
id="device-modal"
3737
tabindex="-1"
3838
aria-hidden="true"
39-
class="hidden fixed inset-0 z-[60] flex items-start justify-center bg-black/30 backdrop-blur-sm px-4 sm:px-6 md:px-8 py-8 md:py-12"
39+
class="hidden fixed inset-0 z-[60] flex items-start justify-center modal-backdrop backdrop-blur-sm px-4 sm:px-6 md:px-8 py-8 md:py-12"
4040
>
4141
<div
4242
class="relative w-full max-w-6xl"

‎components/Firmware.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
<li v-for="release in store.$state.previews">
3838
<a
3939
href="#"
40-
class="block px-4 py-2 hover:text-meshtastic hover:bg-surface-secondary cursor-pointer transition-colors"
40+
class="block px-4 py-2 hover:text-meshtastic-dark hover:bg-surface-secondary cursor-pointer transition-colors"
4141
@click="setSelectedFirmware(release)"
4242
>
4343
{{ release.title.replace('Meshtastic Firmware ', '').replace('Pre-release ', '') }}
@@ -58,7 +58,7 @@
5858
<li v-for="release in store.$state.alpha">
5959
<a
6060
href="#"
61-
class="block px-4 py-2 hover:text-meshtastic hover:bg-surface-secondary cursor-pointer transition-colors"
61+
class="block px-4 py-2 hover:text-meshtastic-dark hover:bg-surface-secondary cursor-pointer transition-colors"
6262
@click="setSelectedFirmware(release)"
6363
>
6464
{{ release.title.replace('Meshtastic Firmware ', '') }}
@@ -78,7 +78,7 @@
7878
>
7979
<li v-for="release in store.$state.stable">
8080
<span
81-
class="block px-4 py-2 hover:text-meshtastic hover:bg-surface-secondary cursor-pointer transition-colors"
81+
class="block px-4 py-2 hover:text-meshtastic-dark hover:bg-surface-secondary cursor-pointer transition-colors"
8282
@click="setSelectedFirmware(release)"
8383
>
8484
{{ release.title.replace('Meshtastic Firmware ', '') }}

‎components/Flash.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
id="flash-modal"
3939
tabindex="-1"
4040
aria-hidden="true"
41-
class="hidden fixed inset-0 z-[60] bg-black/30 backdrop-blur-sm px-4 sm:px-6 md:px-8 py-8 md:py-12"
41+
class="hidden fixed inset-0 z-[60] modal-backdrop backdrop-blur-sm px-4 sm:px-6 md:px-8 py-8 md:py-12"
4242
>
4343
<div class="flex h-full w-full items-start justify-center">
4444
<div class="relative w-full max-w-5xl">

‎components/SerialMonitor.vue‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
class="w-full mt-2 px-0 sm:px-0 h-[calc(100vh-140px)] flex flex-col gap-3"
55
>
66
<!-- Top toolbar -->
7-
<div class="relative overflow-hidden rounded-xl border border-white/10">
8-
<div class="absolute inset-0 bg-gradient-to-r from-gray-800/50 via-gray-800/30 to-gray-800/50 backdrop-blur-md" />
7+
<div class="relative overflow-hidden rounded-xl serial-toolbar">
8+
<div class="absolute inset-0 serial-toolbar-inner backdrop-blur-md" />
99
<div class="absolute inset-0 opacity-50 bg-[radial-gradient(circle_at_20%_50%,rgba(103,234,148,0.1),transparent_50%)]" />
1010
<div class="relative flex items-center justify-between gap-6 px-4 py-3">
1111
<!-- Connection Status -->
@@ -15,10 +15,10 @@
1515
<div v-if="serialMonitorStore.isConnected" class="absolute inset-0 w-3 h-3 rounded-full bg-green-500 animate-pulse" />
1616
</div>
1717
<div class="flex flex-col gap-0.5 min-w-0">
18-
<span class="text-xs font-semibold uppercase tracking-wide leading-none" :class="serialMonitorStore.isConnected ? 'text-green-400' : 'text-gray-400'">
18+
<span class="text-xs font-semibold uppercase tracking-wide leading-none" :class="serialMonitorStore.isConnected ? 'text-meshtastic-dark' : 'text-theme-muted'">
1919
{{ serialMonitorStore.isConnected ? 'Connected' : 'Disconnected' }}
2020
</span>
21-
<span class="text-xs text-gray-500 font-medium leading-none">Serial Monitor</span>
21+
<span class="text-xs text-theme-muted font-medium leading-none">Serial Monitor</span>
2222
</div>
2323
</div>
2424

@@ -27,40 +27,40 @@
2727

2828
<!-- Action buttons and Disconnect -->
2929
<div class="flex items-center gap-2 flex-shrink-0">
30-
<div class="flex items-center gap-1 bg-gray-900/80 backdrop-blur-sm rounded-lg p-1.5 border border-white/10 hover:border-white/20 transition-colors">
30+
<div class="flex items-center gap-1 serial-action-buttons backdrop-blur-sm rounded-lg p-1.5 transition-colors">
3131
<button
3232
type="button"
3333
title="Clear logs"
34-
class="group relative p-2 text-gray-400 hover:text-white rounded-md transition-all duration-200 hover:bg-white/10"
34+
class="group relative p-2 serial-action-btn rounded-md transition-all duration-200"
3535
@click="clearTerminal"
3636
>
3737
<Trash class="h-4 w-4 transition-transform group-hover:scale-110" />
38-
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">Clear</div>
38+
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-surface-modal text-theme text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">Clear</div>
3939
</button>
4040
<button
4141
type="button"
4242
title="Copy logs to clipboard"
43-
class="group relative p-2 text-gray-400 hover:text-white rounded-md transition-all duration-200 hover:bg-white/10"
43+
class="group relative p-2 serial-action-btn rounded-md transition-all duration-200"
4444
@click="copyToClipboard"
4545
>
4646
<Clipboard class="h-4 w-4 transition-transform group-hover:scale-110" />
47-
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">Copy</div>
47+
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-surface-modal text-theme text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">Copy</div>
4848
</button>
4949
<button
5050
type="button"
5151
title="Save logs to file"
52-
class="group relative p-2 text-gray-400 hover:text-white rounded-md transition-all duration-200 hover:bg-white/10"
52+
class="group relative p-2 serial-action-btn rounded-md transition-all duration-200"
5353
@click="saveToFile"
5454
>
5555
<Download class="h-4 w-4 transition-transform group-hover:scale-110" />
56-
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">Save</div>
56+
<div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-surface-modal text-theme text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">Save</div>
5757
</button>
5858
</div>
5959

6060
<!-- Disconnect button -->
6161
<button
6262
v-if="serialMonitorStore.isConnected"
63-
class="group relative flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-300 hover:text-red-400 bg-gray-900/80 hover:bg-gray-900/60 border border-white/10 hover:border-red-500/40 rounded-lg transition-all duration-200 overflow-hidden"
63+
class="group relative flex items-center gap-2 px-4 py-2 text-sm font-medium serial-disconnect-btn rounded-lg transition-all duration-200 overflow-hidden"
6464
@click="disconnect()"
6565
>
6666
<X class="h-4 w-4 relative transition-transform group-hover:rotate-90 duration-200" />
@@ -70,11 +70,11 @@
7070
</div>
7171
</div>
7272

73-
<div class="flex-1 min-h-0 shadow-lg rounded-xl border border-white/10 overflow-hidden flex items-center justify-center relative">
73+
<div class="flex-1 min-h-0 shadow-lg rounded-xl serial-terminal-container overflow-hidden flex items-center justify-center relative">
7474
<div ref="terminalContainer" class="h-full w-full" />
75-
<div v-if="serialMonitorStore.isConnected && serialMonitorStore.rawBuffer.length === 0" class="absolute inset-0 flex flex-col items-center justify-center bg-gray-900/80 backdrop-blur-sm pointer-events-none">
75+
<div v-if="serialMonitorStore.isConnected && serialMonitorStore.rawBuffer.length === 0" class="absolute inset-0 flex flex-col items-center justify-center serial-loading-overlay backdrop-blur-sm pointer-events-none">
7676
<div class="loader mb-4" />
77-
<p class="text-gray-400 text-sm">{{ $t('serial.waiting_for_data') }}</p>
77+
<p class="text-theme-muted text-sm">{{ $t('serial.waiting_for_data') }}</p>
7878
</div>
7979
</div>
8080
</div>

‎stores/deviceStore.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,16 @@ export const useDeviceStore = defineStore('device', {
170170
}
171171
},
172172
async openDeviceConnection(shouldConfigure: boolean = true): Promise<MeshDevice> {
173+
// Close any existing port first
174+
if (this.port) {
175+
try {
176+
await this.port.close()
177+
}
178+
catch {
179+
// Port may not be open, ignore
180+
}
181+
}
182+
173183
// Request serial port from user
174184
this.port = await navigator.serial.requestPort()
175185

0 commit comments

Comments
 (0)