summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/lib/tabs
diff options
context:
space:
mode:
authorWolfgang Müller2024-11-22 18:17:57 +0100
committerWolfgang Müller2024-11-22 18:17:57 +0100
commit387550086a00b5a1b8221c1528e6f616430e7b3c (patch)
treeb92625ebd3fd658410aa7bce1bdb31e53be72949 /frontend/src/lib/tabs
parent940ef5c245d29b1441bfa1a88c808f637075b109 (diff)
downloadhircine-trunk.tar.gz
frontend: Improve highlighting of current focusHEADtrunk
Elements now have a consistent style applied to them when in focus. Additionally, select elements will now have an outline when focused, making it easier to notice the currently selected element.
Diffstat (limited to 'frontend/src/lib/tabs')
-rw-r--r--frontend/src/lib/tabs/Tab.svelte2
-rw-r--r--frontend/src/lib/tabs/Tabs.svelte4
2 files changed, 3 insertions, 3 deletions
diff --git a/frontend/src/lib/tabs/Tab.svelte b/frontend/src/lib/tabs/Tab.svelte
index 0a6be57..cddd072 100644
--- a/frontend/src/lib/tabs/Tab.svelte
+++ b/frontend/src/lib/tabs/Tab.svelte
@@ -8,7 +8,7 @@
</script>
{#if $context.current === id}
- <div class="h-full overflow-auto py-2 pe-3" in:fade={fadeDefault}>
+ <div class="h-full overflow-auto py-2 pe-3 ps-1" in:fade={fadeDefault}>
<slot />
</div>
{/if}
diff --git a/frontend/src/lib/tabs/Tabs.svelte b/frontend/src/lib/tabs/Tabs.svelte
index 09cdbdd..fd5d08e 100644
--- a/frontend/src/lib/tabs/Tabs.svelte
+++ b/frontend/src/lib/tabs/Tabs.svelte
@@ -8,13 +8,13 @@
<div class="flex h-full max-h-full flex-col">
<nav>
- <ul class="me-3 flex border-b-2 border-slate-700 text-sm">
+ <ul class="me-3 ms-1 flex border-b-2 border-slate-700 text-sm">
{#each Object.entries($context.tabs) as [id, { title, badge }]}
<li class="-mb-0.5">
<button
type="button"
class:active={$context.current === id}
- class="relative flex gap-1 p-1 px-3 hover:border-b-2 hover:border-slate-200"
+ class="focus-background relative flex gap-1 p-1 px-3 hover:border-b-2 hover:border-slate-200"
on:click={() => ($context.current = id)}
>
{#if badge}