Use proper text/drop shadow on tree-dots icon and face name (#3800)

This commit is contained in:
Daniele Ricci 2023-08-21 01:36:31 +02:00 committed by GitHub
parent 6aed1180e7
commit e2afc43506
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 3 deletions

View File

@ -56,6 +56,14 @@ input:focus-visible {
outline: none !important; outline: none !important;
} }
.text-white-shadow {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.icon-white-drop-shadow {
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.8));
}
@layer utilities { @layer utilities {
.immich-form-input { .immich-form-input {
@apply rounded-xl bg-slate-200 p-4 text-sm focus:border-immich-primary disabled:cursor-not-allowed disabled:bg-gray-400 disabled:text-gray-200 dark:bg-gray-600 dark:text-immich-dark-fg dark:disabled:bg-gray-800; @apply rounded-xl bg-slate-200 p-4 text-sm focus:border-immich-primary disabled:cursor-not-allowed disabled:bg-gray-400 disabled:text-gray-200 dark:bg-gray-600 dark:text-immich-dark-fg dark:disabled:bg-gray-800;

View File

@ -74,7 +74,7 @@
data-testid="context-button-parent" data-testid="context-button-parent"
> >
<IconButton color="overlay-primary"> <IconButton color="overlay-primary">
<DotsVertical size="20" /> <DotsVertical size="20" class="icon-white-drop-shadow" color="white" />
</IconButton> </IconButton>
</div> </div>
{/if} {/if}

View File

@ -25,7 +25,9 @@
<ImageThumbnail shadow url={api.getPeopleThumbnailUrl(person.id)} altText={person.name} widthStyle="100%" /> <ImageThumbnail shadow url={api.getPeopleThumbnailUrl(person.id)} altText={person.name} widthStyle="100%" />
</div> </div>
{#if person.name} {#if person.name}
<span class="absolute bottom-2 left-0 w-full select-text px-1 text-center font-medium text-white"> <span
class="text-white-shadow absolute bottom-2 left-0 w-full select-text px-1 text-center font-medium text-white"
>
{person.name} {person.name}
</span> </span>
{/if} {/if}
@ -40,7 +42,7 @@
id={`icon-${person.id}`} id={`icon-${person.id}`}
> >
<IconButton color="transparent-primary"> <IconButton color="transparent-primary">
<DotsVertical size="20" /> <DotsVertical size="20" class="icon-white-drop-shadow" color="white" />
</IconButton> </IconButton>
{#if showContextMenu} {#if showContextMenu}