style: refine Beam tree visibility toggles
This commit is contained in:
parent
7e4b91b2da
commit
9e61480ad1
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@
|
|||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./dcViewer.css?v=10">
|
||||
<link rel="stylesheet" href="./dcViewer.css?v=11">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
|
|
|||
Loading…
Reference in New Issue