Web Player Refactor #2
@@ -42,7 +42,7 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
const classes = $derived(
|
const classes = $derived(
|
||||||
`inline-flex items-center justify-center gap-2 rounded-control transition focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none disabled:opacity-40 ${sizes[size]} ${variants[variant]} ${klass}`
|
`inline-flex items-center justify-center gap-2 rounded-control btn-transition focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg focus-visible:outline-none disabled:opacity-40 ${sizes[size]} ${variants[variant]} ${klass}`
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -121,6 +121,11 @@
|
|||||||
@apply text-xs tabular-nums;
|
@apply text-xs tabular-nums;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@utility btn-transition {
|
||||||
|
transition-property: color, border-color, outline-color, opacity, box-shadow, filter;
|
||||||
|
transition-timing-function: var(--default-transition-timing-function);
|
||||||
|
transition-duration: var(--default-transition-duration);
|
||||||
|
}
|
||||||
@utility glass-bar {
|
@utility glass-bar {
|
||||||
background-image: var(--mf-bar-bg);
|
background-image: var(--mf-bar-bg);
|
||||||
border-top: 1px solid var(--mf-hairline);
|
border-top: 1px solid var(--mf-hairline);
|
||||||
|
|||||||
Reference in New Issue
Block a user