style: use distinct colors for WiFi and Bluetooth devices
WiFi devices now shown in orange (#f59f00), Bluetooth in blue (#4dabf7). Makes it easier to distinguish device types on map and in device list. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -8,6 +8,8 @@
|
||||
|
||||
--color-primary: #00ff88;
|
||||
--color-secondary: #4dabf7;
|
||||
--color-wifi: #f59f00;
|
||||
--color-bluetooth: #4dabf7;
|
||||
--color-warning: #ffd93d;
|
||||
--color-danger: #ff6b6b;
|
||||
--color-text: #eee;
|
||||
@@ -162,8 +164,8 @@ body {
|
||||
}
|
||||
|
||||
.filter-btn.wifi {
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-wifi);
|
||||
border-color: var(--color-wifi);
|
||||
}
|
||||
|
||||
.filter-btn.wifi.inactive {
|
||||
@@ -173,8 +175,8 @@ body {
|
||||
}
|
||||
|
||||
.filter-btn.bluetooth {
|
||||
color: var(--color-secondary);
|
||||
border-color: var(--color-secondary);
|
||||
color: var(--color-bluetooth);
|
||||
border-color: var(--color-bluetooth);
|
||||
}
|
||||
|
||||
.filter-btn.bluetooth.inactive {
|
||||
@@ -283,11 +285,11 @@ body {
|
||||
}
|
||||
|
||||
.device-card.wifi {
|
||||
border-left: 3px solid var(--color-primary);
|
||||
border-left: 3px solid var(--color-wifi);
|
||||
}
|
||||
|
||||
.device-card.bluetooth {
|
||||
border-left: 3px solid var(--color-secondary);
|
||||
border-left: 3px solid var(--color-bluetooth);
|
||||
}
|
||||
|
||||
.device-header {
|
||||
@@ -661,12 +663,12 @@ body {
|
||||
}
|
||||
|
||||
.device-detail-panel.wifi {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 4px 20px rgba(0, 255, 136, 0.2);
|
||||
border-color: var(--color-wifi);
|
||||
box-shadow: 0 4px 20px rgba(245, 159, 0, 0.2);
|
||||
}
|
||||
|
||||
.device-detail-panel.bluetooth {
|
||||
border-color: var(--color-secondary);
|
||||
border-color: var(--color-bluetooth);
|
||||
box-shadow: 0 4px 20px rgba(77, 171, 247, 0.2);
|
||||
}
|
||||
|
||||
@@ -929,14 +931,14 @@ body {
|
||||
}
|
||||
|
||||
.marker-3d.wifi .marker-icon {
|
||||
background: var(--color-primary);
|
||||
box-shadow: 0 0 15px var(--color-primary), 0 2px 8px rgba(0, 0, 0, 0.5);
|
||||
background: var(--color-wifi);
|
||||
box-shadow: 0 0 15px var(--color-wifi), 0 2px 8px rgba(0, 0, 0, 0.5);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.marker-3d.bluetooth .marker-icon {
|
||||
background: var(--color-secondary);
|
||||
box-shadow: 0 0 15px var(--color-secondary), 0 2px 8px rgba(0, 0, 0, 0.5);
|
||||
background: var(--color-bluetooth);
|
||||
box-shadow: 0 0 15px var(--color-bluetooth), 0 2px 8px rgba(0, 0, 0, 0.5);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
|
||||
@@ -46,8 +46,8 @@
|
||||
defaultLon: {{ lon | default(4.3517) }},
|
||||
apiBase: '{{ url_for("index") }}api',
|
||||
colors: {
|
||||
wifi: '#00ff88',
|
||||
bluetooth: '#4dabf7',
|
||||
wifi: '#f59f00', // Orange for WiFi
|
||||
bluetooth: '#4dabf7', // Blue for Bluetooth
|
||||
warning: '#ffd93d',
|
||||
danger: '#ff6b6b'
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user