FIX: Styling

This commit is contained in:
Robert Kossessa
2024-03-02 16:06:11 +01:00
parent f3bc680d05
commit 6e02fa4ac5
2 changed files with 10 additions and 7 deletions

View File

@@ -34,6 +34,9 @@
--ring: 240 10% 3.9%;
--radius: 0.5rem;
--scrollbar-foreground: rgb(39 39 42);
--scrollbar-background: transparent;
}
.dark {

View File

@@ -3,7 +3,7 @@
class="m-2 flex h-12 overflow-hidden rounded-lg transition-all"
:class="{
'border border-zinc-100 bg-zinc-300': selected,
'border border-transparent hover:border-zinc-900': !selected,
'border border-transparent bg-zinc-900/30 hover:border-zinc-900': !selected,
group: showHoverButtons
}"
>
@@ -26,7 +26,7 @@
class="h-full min-w-0 flex-1 rounded-lg bg-transparent pl-8 text-sm transition-all focus-visible:outline-none focus-visible:ring-0"
:class="{
'bg-zinc-300 font-semibold text-black hover:bg-zinc-200': selected,
'text-muted-foreground hover:bg-zinc-900/50': !selected
'text-muted-foreground hover:bg-zinc-900': !selected
}"
@blur="onNameInputBlur"
/>
@@ -35,7 +35,7 @@
type="submit"
:class="{
'bg-zinc-300 text-black hover:bg-zinc-200': selected,
'bg-zinc-900/50 text-zinc-100 hover:bg-zinc-900': !selected
'text-zinc-100 hover:bg-zinc-900': !selected
}"
class="flex aspect-square h-full shrink-0 items-center justify-center rounded-lg transition-all"
>
@@ -47,7 +47,7 @@
v-else
:class="{
'bg-zinc-300 font-semibold text-black hover:bg-zinc-200': selected,
'bg-zinc-900/50 text-muted-foreground hover:bg-zinc-900': !selected
'text-muted-foreground hover:bg-zinc-900': !selected
}"
class="h-12 flex-1 truncate rounded-lg pr-4 text-left text-sm transition-all"
@click="!editing && $emit('select') && $refs.profileTitle.scramble()"
@@ -74,7 +74,7 @@
v-if="nameEditable"
:class="{
'bg-zinc-300 text-black hover:bg-zinc-200': selected,
'bg-zinc-900/50 text-zinc-100 hover:bg-zinc-900': !selected,
'text-zinc-100 hover:bg-zinc-900': !selected,
'group-hover:w-12': !editing
}"
class="flex h-12 w-0 shrink-0 items-center justify-center rounded-lg transition-all"
@@ -85,7 +85,7 @@
<button
:class="{
'bg-zinc-300 text-black hover:bg-zinc-200': selected,
'bg-zinc-900/50 text-zinc-100 hover:bg-zinc-900': !selected,
'text-zinc-100 hover:bg-zinc-900': !selected,
'group-hover:w-12': !editing,
'rounded-l-lg': !nameEditable
}"
@@ -121,7 +121,7 @@
<button
:class="{
'bg-zinc-300 text-black hover:bg-zinc-200': selected,
'bg-zinc-900/50 text-zinc-100 hover:bg-zinc-900': !selected,
'text-zinc-100 hover:bg-zinc-900': !selected,
'group-hover:w-12': !editing
}"
class="flex h-12 w-0 shrink-0 items-center justify-center rounded-lg transition-all"