diff --git a/frontend/dcViewer.css b/frontend/dcViewer.css
index 39323ac..a4d8dbe 100644
--- a/frontend/dcViewer.css
+++ b/frontend/dcViewer.css
@@ -599,7 +599,39 @@ header {
}
.tree li > input[type="checkbox"] {
- margin-right: 6px;
+ appearance: none;
+ -webkit-appearance: none;
+ display: inline-block;
+ width: 12px;
+ height: 12px;
+ margin: 0 6px 0 0;
+ vertical-align: -1px;
+ border: 0;
+ border-radius: 4px;
+ background: color-mix(in srgb, var(--modal-element) var(--modal-focus-alpha, 100%), transparent);
+ box-shadow: inset 0 0 0 1px var(--modal-element-outline, var(--modal-element));
+ cursor: pointer;
+ transition:
+ background-color 160ms ease,
+ box-shadow 160ms ease;
+}
+
+.tree li > input[type="checkbox"]:checked {
+ background: var(--highlight-color, var(--accent));
+ box-shadow: none;
+}
+
+.tree li > input[type="checkbox"]:hover {
+ background: var(--nodedc-glass-control-hover);
+}
+
+.tree li > input[type="checkbox"]:checked:hover {
+ background: color-mix(in srgb, var(--highlight-color, var(--accent)) 86%, white 14%);
+}
+
+.tree li > input[type="checkbox"]:focus,
+.tree li > input[type="checkbox"]:focus-visible {
+ outline: none;
}
.inspector-controls {
diff --git a/frontend/index.html b/frontend/index.html
index 474b928..632bb06 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -87,7 +87,7 @@
-
+