gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-29 20:43:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Very basic styling of the command palette

Browse Source
This commit is contained in:
Ian Donahue 2023-03-10 18:28:17 +01:00
parent 18757d40e0
commit 07e2ea90c0
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/lib/components/CommandPalette.svelte
View File

@ -79,7 +79,7 @@
} }
} }
let activeClass = ['active', 'bg-orange-800', 'text-white']; let activeClass = ['active', 'bg-zinc-700/50', 'text-white'];
function upMenu() { function upMenu() {
const menu = document.getElementById('commandMenu'); const menu = document.getElementById('commandMenu');
@ -189,7 +189,8 @@
bind:this={palette} bind:this={palette}
in:fade={{ duration: 100 }} in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }} out:fade={{ duration: 100 }}
class="mx-auto max-w-2xl transform divide-y divide-zinc-500 divide-opacity-20 overflow-hidden rounded-xl bg-zinc-900 shadow-2xl transition-all" class="mx-auto max-w-2xl transform divide-y divide-zinc-500 divide-opacity-20 overflow-hidden rounded-xl bg-zinc-900 shadow-2xl transition-all border border-zinc-700"
style="border-width: 0.5px;"
> >
<div class="relative"> <div class="relative">
<svg <svg
@ -230,9 +231,9 @@
<svelte:component this={item.icon} /> <svelte:component this={item.icon} />
<span class="ml-3 flex-auto truncate">{item.text}</span> <span class="ml-3 flex-auto truncate">{item.text}</span>
{#if item.key} {#if item.key}
<span class="ml-3 flex-none text-xs font-semibold text-zinc-400" <span class="ml-3 flex-none text-xs font-semibold text-zinc-400 px-1 py-1 bg-zinc-800 border-b border-black rounded">
><kbd class="font-sans">⌘</kbd><kbd class="font-sans">{item.key}</kbd></span <kbd class="font-sans">⌘</kbd><kbd class="font-sans">{item.key}</kbd>
> </span>
{/if} {/if}
</li> </li>
{/each} {/each}