much better!

This commit is contained in:
Chris Kruining 2024-11-28 08:31:31 +01:00
parent 76c5de5c32
commit bfb668a164
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
14 changed files with 93 additions and 71 deletions

View file

@ -12,9 +12,9 @@
padding: var(--padding-m) 0;
font-size: var(--text-s);
background-color: var(--surface-1);
background-color: var(--surface-700);
color: var(--text-1);
border: 1px solid var(--surface-5);
border: 1px solid var(--surface-300);
border-radius: var(--radii-m);
& > li {
@ -31,7 +31,7 @@
}
&:hover {
background-color: var(--surface-4);
background-color: var(--surface-400);
}
}

View file

@ -9,7 +9,7 @@
block-size: 100%;
overflow: clip auto;
background-color: var(--surface-1);
background-color: var(--surface-600);
& input[type="checkbox"] {
margin: .1em;
@ -20,7 +20,7 @@
min-block-size: max(2em, 100%);
max-block-size: 50em;
background-color: var(--surface-1);
background-color: var(--surface-600);
color: var(--text-1);
border-color: var(--text-2);
border-radius: var(--radii-s);
@ -59,8 +59,8 @@
& .header {
position: sticky;
inset-block-start: 0;
background-color: var(--surface-1);
border-block-end: 1px solid var(--surface-5);
background-color: var(--surface-600);
border-block-end: 1px solid var(--surface-300);
}
& .row {

View file

@ -15,7 +15,7 @@
text-align: start;
&:hover {
background-color: var(--surface-4);
background-color: var(--surface-500);
}
}
@ -31,8 +31,8 @@
padding: var(--padding-m) 0;
inline-size: max-content;
background-color: var(--surface-4);
border: 1px solid var(--surface-5);
background-color: var(--surface-500);
border: 1px solid var(--surface-300);
border-block-start-width: 0;
margin: unset;
@ -44,7 +44,7 @@
grid-column: span 2;
inline-size: calc(100% - (2 * var(--padding-m)));
margin-block: 0;
border: 1px solid var(--surface-5);
border: 1px solid var(--surface-300);
}
& > .item {
@ -53,10 +53,10 @@
grid-template-columns: subgrid;
align-items: center;
background-color: var(--surface-4);
background-color: var(--surface-500);
&:hover {
background-color: var(--surface-5);
background-color: var(--surface-600);
}
& > sub {
@ -67,23 +67,23 @@
}
:popover-open + .item {
background-color: var(--surface-4);
background-color: var(--surface-500);
}
.commandPalette {
display: none;
background-color: var(--surface-1);
background-color: var(--surface-700);
color: var(--text-1);
gap: var(--padding-m);
padding: var(--padding-l);
border: 1px solid var(--surface-3);
border: 1px solid var(--surface-500);
&[open] {
display: grid;
}
&::backdrop {
background-color: color(from var(--surface-1) xyz x y z / .2);
background-color: color(from var(--surface-700) xyz x y z / .2);
backdrop-filter: blur(.25em);
pointer-events: all !important;
}
@ -94,7 +94,7 @@
gap: var(--padding-m);
& > input {
background-color: var(--surface-2);
background-color: var(--surface-600);
color: var(--text-1);
border: none;
padding: var(--padding-m);

View file

@ -216,7 +216,11 @@ export const selectable = (element: HTMLElement, options: Accessor<{ value: obje
};
createRenderEffect(() => {
element.dataset.selected = isSelected() ? 'true' : undefined;
if (isSelected()) {
element.dataset.selected = 'true';
} else {
delete element.dataset.selected;
}
});
const onPointerDown = (e: Event) => {