matei/zeroone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPD: Button consistency

Browse Source
This commit is contained in:
Robert Kossessa
2024-02-05 13:09:31 +01:00
parent 7d5c10de1c
commit 180372bf0d
5 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/main.css
View File

@@ -26,3 +26,9 @@ body {
::-webkit-scrollbar-track { /* Background */ ::-webkit-scrollbar-track { /* Background */
background: var(--scrollbar-background); background: var(--scrollbar-background);
} }
::selection {
background: #c66936;
color: black;
text-shadow: none;
}

6
src/components/common/HSVInput.vue
View File

@@ -87,7 +87,7 @@
class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900" class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
style="background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%)" /> style="background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%)" />
<SliderThumb <SliderThumb
class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 outline outline-zinc-100 bg-zinc-300 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center" class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 border border-zinc-100 bg-zinc-300 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)"> style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)">
<MoreHorizontal class="h-full" /> <MoreHorizontal class="h-full" />
</SliderThumb> </SliderThumb>
@@ -101,7 +101,7 @@
class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900" class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
:style="{background: `linear-gradient(90deg, hsl(0, 0%, ${saturationSliderColor.lightness()}%) 0%, hsl(${saturationSliderColor.hue()}, 100%, ${saturationSliderColor.lightness()}%) 100%)`}" /> :style="{background: `linear-gradient(90deg, hsl(0, 0%, ${saturationSliderColor.lightness()}%) 0%, hsl(${saturationSliderColor.hue()}, 100%, ${saturationSliderColor.lightness()}%) 100%)`}" />
<SliderThumb <SliderThumb
class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 outline outline-zinc-100 bg-zinc-300 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center" class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 border border-zinc-100 bg-zinc-300 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)"> style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)">
<MoreHorizontal class="h-full" /> <MoreHorizontal class="h-full" />
</SliderThumb> </SliderThumb>
@@ -115,7 +115,7 @@
class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900" class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
:style="{background: `linear-gradient(90deg, black, ${valueSliderColor.hex()} 100%`}" /> :style="{background: `linear-gradient(90deg, black, ${valueSliderColor.hex()} 100%`}" />
<SliderThumb <SliderThumb
class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 outline outline-zinc-100 bg-zinc-300 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center" class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 border border-zinc-100 bg-zinc-300 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)"> style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)">
<MoreHorizontal class="h-full" /> <MoreHorizontal class="h-full" />
</SliderThumb> </SliderThumb>

6
src/components/common/TabSelectButton.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<button <button
class="flex-1 flex flex-col items-center rounded-lg p-2 gap-2 font-heading transition-all" class="flex-1 flex flex-col items-center rounded-lg p-2 gap-2 font-heading transition-all border"
:class="{'text-black bg-zinc-300 hover:bg-zinc-200': selected, :class="{'text-black bg-zinc-300 hover:bg-zinc-200 border-zinc-100': selected,
'hover:bg-zinc-800 text-muted-foreground' : !selected}" 'hover:bg-zinc-800 text-muted-foreground border-transparent' : !selected}"
@click="$emit('select'); $refs.title.scramble()"> @click="$emit('select'); $refs.title.scramble()">
<slot v-if="$slots['replace']" name="replace" /> <slot v-if="$slots['replace']" name="replace" />
<template v-else> <template v-else>

20
src/components/profile/ProfileButton.vue
View File

@@ -1,6 +1,7 @@
<template> <template>
<div <div
class="h-12 flex overflow-hidden rounded-lg m-2" class="h-12 flex overflow-hidden rounded-lg m-2"
:class="{'border border-zinc-100 bg-zinc-300': selected}"
@mouseenter="hover=true" @mouseleave="hover=false"> @mouseenter="hover=true" @mouseleave="hover=false">
<form <form
v-if="nameEditable && editing" v-if="nameEditable && editing"
@@ -10,7 +11,7 @@
<input <input
ref="profileNameInput" v-model="nameInput" ref="profileNameInput" v-model="nameInput"
onfocus="this.select()" :placeholder="$t('profiles.name_placeholder')" onfocus="this.select()" :placeholder="$t('profiles.name_placeholder')"
class="flex-1 pl-6 h-full text-sm bg-transparent focus-visible:ring-0 focus-visible:outline-none min-w-0 transition-colors" class="flex-1 pl-6 h-full rounded-r-lg text-sm bg-transparent focus-visible:ring-0 focus-visible:outline-none min-w-0 transition-all"
:class="{'font-semibold bg-zinc-300 hover:bg-zinc-200 text-black' : selected, :class="{'font-semibold bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}" 'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
@blur="onNameInputBlur"> @blur="onNameInputBlur">
@@ -19,7 +20,7 @@
type="submit" type="submit"
:class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected, :class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected}" 'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected}"
class="flex h-full aspect-square justify-center items-center flex-shrink-0 transition-colors "> class="flex h-full rounded-l-lg aspect-square justify-center items-center flex-shrink-0 transition-all">
<Check class="h-4 w-4" /> <Check class="h-4 w-4" />
</button> </button>
</form> </form>
@@ -27,7 +28,7 @@
v-else v-else
:class="{'font-semibold bg-zinc-300 hover:bg-zinc-200 text-black' : selected, :class="{'font-semibold bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}" 'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
class="flex-1 h-12 text-left text-sm whitespace-nowrap overflow-hidden text-ellipsis pr-4 transition-colors" class="flex-1 h-12 rounded-r-lg text-left text-sm whitespace-nowrap overflow-hidden text-ellipsis pr-4 transition-all"
@click="!editing && $emit('select') && $refs.profileTitle.scramble()"> @click="!editing && $emit('select') && $refs.profileTitle.scramble()">
<span class="ml-4 w-4 mr-2" :class="{'ml-4': !draggable}"> <span class="ml-4 w-4 mr-2" :class="{'ml-4': !draggable}">
<GripHorizontal <GripHorizontal
@@ -52,15 +53,16 @@
:class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected, :class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected, 'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
'w-12' : hover && !editing}" 'w-12' : hover && !editing}"
class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors" class="flex w-0 h-12 rounded-l-lg justify-center items-center flex-shrink-0 transition-all"
@click="startEditing"> @click="startEditing">
<PenLine class="h-4 w-4" /> <PenLine class="h-4 w-4" />
</button> </button>
<button <button
:class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected, :class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected, 'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
'w-12' : hover && !editing}" 'w-12' : hover && !editing,
class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors" 'rounded-l-lg': !nameEditable}"
class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-all"
@click="$emit('duplicate')"> @click="$emit('duplicate')">
<Copy class="h-4 w-4" /> <Copy class="h-4 w-4" />
</button> </button>
@@ -68,7 +70,7 @@
:class="{'bg-orange-600 hover:bg-orange-500 text-black' : selected, :class="{'bg-orange-600 hover:bg-orange-500 text-black' : selected,
'hover:bg-opacity-100 bg-orange-900 text-zinc-100 bg-opacity-50': !selected, 'hover:bg-opacity-100 bg-orange-900 text-zinc-100 bg-opacity-50': !selected,
'w-12' : hover && !editing}" 'w-12' : hover && !editing}"
class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors" class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-all"
@click="confirmDelete=true"> @click="confirmDelete=true">
<Trash2 class="h-4 w-4" /> <Trash2 class="h-4 w-4" />
</button> </button>
@@ -78,7 +80,7 @@
:class="{'bg-orange-600 hover:bg-orange-500 text-black' : selected, :class="{'bg-orange-600 hover:bg-orange-500 text-black' : selected,
'hover:bg-opacity-100 bg-orange-900 text-zinc-100 bg-opacity-50': !selected, 'hover:bg-opacity-100 bg-orange-900 text-zinc-100 bg-opacity-50': !selected,
'w-12' : hover && !editing}" 'w-12' : hover && !editing}"
class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors" class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-all"
@click="$emit('delete', profile.id)"> @click="$emit('delete', profile.id)">
<Check class="h-4 w-4" /> <Check class="h-4 w-4" />
</button> </button>
@@ -86,7 +88,7 @@
:class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected, :class="{'bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected, 'hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50': !selected,
'w-12' : hover && !editing}" 'w-12' : hover && !editing}"
class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-colors" class="flex w-0 h-12 justify-center items-center flex-shrink-0 transition-all"
@click="confirmDelete=false"> @click="confirmDelete=false">
<X class="h-4 w-4" /> <X class="h-4 w-4" />
</button> </button>

2
src/components/ui/slider/Slider.vue
View File

@@ -43,7 +43,7 @@ const emits = defineEmits(['update:modelValue', 'valueCommit'])
<SliderRange class="absolute h-1.5 bg-primary rounded-full" /> <SliderRange class="absolute h-1.5 bg-primary rounded-full" />
</SliderTrack> </SliderTrack>
<SliderThumb <SliderThumb
class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 outline outline-zinc-100 bg-zinc-300 transition-all duration-75 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center" class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 border border-zinc-100 bg-zinc-300 transition-all duration-75 focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)"> style="box-shadow: -3px 0 15px 0 rgba(0,0,0,0.6)">
<MoreHorizontal class="h-full" /> <MoreHorizontal class="h-full" />
</SliderThumb> </SliderThumb>