homebridge-multiple-switch 1.3.2 → 1.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/homebridge-ui/public/index.html +50 -18
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [1.3.3] - 2026-03-21
|
|
4
|
+
|
|
5
|
+
### Fixed
|
|
6
|
+
- Custom UI light/dark mode support: all labels, inputs, cards, and borders
|
|
7
|
+
now use Homebridge Bootstrap CSS variables (`--bs-body-color`, `--bs-body-bg`,
|
|
8
|
+
`--bs-border-color`, `--bs-tertiary-bg`) for proper theme adaptation
|
|
9
|
+
|
|
3
10
|
## [1.3.2] - 2026-03-21
|
|
4
11
|
|
|
5
12
|
### Changed
|
|
@@ -1,33 +1,65 @@
|
|
|
1
1
|
<style>
|
|
2
2
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
3
|
-
body {
|
|
3
|
+
body {
|
|
4
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
5
|
+
color: var(--bs-body-color, inherit);
|
|
6
|
+
}
|
|
4
7
|
.form-group { margin-bottom: 16px; }
|
|
5
|
-
label {
|
|
6
|
-
|
|
8
|
+
label {
|
|
9
|
+
display: block; font-weight: 600; margin-bottom: 4px; font-size: 14px;
|
|
10
|
+
color: var(--bs-body-color, inherit);
|
|
11
|
+
}
|
|
12
|
+
.desc {
|
|
13
|
+
color: var(--bs-secondary-color, #888);
|
|
14
|
+
font-size: 12px; margin-bottom: 6px;
|
|
15
|
+
}
|
|
7
16
|
input[type="text"], input[type="number"], select {
|
|
8
|
-
width: 100%; padding: 8px 10px;
|
|
9
|
-
|
|
17
|
+
width: 100%; padding: 8px 10px;
|
|
18
|
+
border: 1px solid var(--bs-border-color, #444);
|
|
19
|
+
border-radius: 6px; font-size: 14px;
|
|
20
|
+
background: var(--bs-body-bg, transparent);
|
|
21
|
+
color: var(--bs-body-color, inherit);
|
|
22
|
+
transition: border-color 0.2s;
|
|
23
|
+
}
|
|
24
|
+
input:focus, select:focus {
|
|
25
|
+
border-color: var(--bs-primary, #007bff);
|
|
26
|
+
outline: none;
|
|
10
27
|
}
|
|
11
|
-
input:focus, select:focus { border-color: #007bff; outline: none; }
|
|
12
28
|
.switch-card {
|
|
13
|
-
border: 1px solid
|
|
14
|
-
|
|
29
|
+
border: 1px solid var(--bs-border-color, #444);
|
|
30
|
+
border-radius: 8px; padding: 16px; margin-bottom: 12px;
|
|
31
|
+
background: var(--bs-tertiary-bg, rgba(128,128,128,0.08));
|
|
32
|
+
position: relative;
|
|
33
|
+
}
|
|
34
|
+
.switch-card .switch-header {
|
|
35
|
+
display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
|
|
36
|
+
}
|
|
37
|
+
.switch-card .switch-header strong {
|
|
38
|
+
font-size: 14px;
|
|
39
|
+
color: var(--bs-body-color, inherit);
|
|
40
|
+
}
|
|
41
|
+
.btn {
|
|
42
|
+
padding: 8px 16px; border: none; border-radius: 6px;
|
|
43
|
+
cursor: pointer; font-size: 13px; font-weight: 600;
|
|
15
44
|
}
|
|
16
|
-
.switch-card .switch-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
|
|
17
|
-
.switch-card .switch-header strong { font-size: 14px; }
|
|
18
|
-
.btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; }
|
|
19
45
|
.btn-danger { background: #dc3545; color: #fff; }
|
|
20
46
|
.btn-danger:hover { background: #c82333; }
|
|
21
|
-
.btn-primary { background: #007bff; color: #fff; }
|
|
22
|
-
.btn-primary:hover {
|
|
23
|
-
.btn-success { background: #28a745; color: #fff; }
|
|
24
|
-
.btn-success:hover { background: #218838; }
|
|
47
|
+
.btn-primary { background: var(--bs-primary, #007bff); color: #fff; }
|
|
48
|
+
.btn-primary:hover { opacity: 0.85; }
|
|
25
49
|
.actions { margin-top: 16px; display: flex; gap: 10px; }
|
|
26
|
-
h4 { margin-bottom: 8px; }
|
|
27
50
|
.toggle-wrap { display: flex; align-items: center; gap: 8px; }
|
|
28
|
-
.toggle-wrap input[type="checkbox"] { width: 18px; height: 18px; }
|
|
29
|
-
.
|
|
51
|
+
.toggle-wrap input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--bs-primary, #007bff); }
|
|
52
|
+
.toggle-wrap span { color: var(--bs-body-color, inherit); }
|
|
53
|
+
.section-title {
|
|
54
|
+
font-size: 15px; font-weight: 700; margin-bottom: 10px;
|
|
55
|
+
padding-bottom: 6px; border-bottom: 1px solid var(--bs-border-color, #444);
|
|
56
|
+
color: var(--bs-body-color, inherit);
|
|
57
|
+
}
|
|
30
58
|
.inline-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
|
59
|
+
select option {
|
|
60
|
+
background: var(--bs-body-bg, #fff);
|
|
61
|
+
color: var(--bs-body-color, #000);
|
|
62
|
+
}
|
|
31
63
|
</style>
|
|
32
64
|
|
|
33
65
|
<div id="app"></div>
|
package/package.json
CHANGED