helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore: upgrade to tailwind v4 (#18353)

Browse source
This commit is contained in:
Daniel Dietzler 2025-05-18 15:51:33 +02:00 • committed by GitHub
parent c411c1472a
commit 56156b97e7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
48 changed files with 930 additions and 733 deletions
Download patch file Download diff file Expand all files Collapse all files

4
web/src/lib/components/shared-components/combobox.svelte
View file

@ -277,7 +277,7 @@
class:!rounded-b-none={isOpen && dropdownDirection === 'bottom'}
class:!rounded-t-none={isOpen && dropdownDirection === 'top'}
class:cursor-pointer={!isActive}
class="immich-form-input text-sm w-full !pe-12 transition-all"
class="immich-form-input text-sm w-full pe-12! transition-all"
id={inputId}
onfocus={activate}
oninput={onInput}
@ -341,7 +341,7 @@
role="listbox"
id={listboxId}
transition:fly={{ duration: 250 }}
class="fixed z-[1] text-start text-sm w-full overflow-y-auto bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-900"
class="fixed z-1 text-start text-sm w-full overflow-y-auto bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-900"
class:rounded-b-xl={dropdownDirection === 'bottom'}
class:rounded-t-xl={dropdownDirection === 'top'}
class:shadow={dropdownDirection === 'bottom'}

2
web/src/lib/components/shared-components/context-menu/context-menu.svelte
View file

@ -73,7 +73,7 @@
bind:this={menuElement}
class="{isVisible
? 'max-h-dvh'
: 'max-h-0'} flex flex-col transition-all duration-[250ms] ease-in-out outline-none overflow-auto"
: 'max-h-0'} flex flex-col transition-all duration-250 ease-in-out outline-none overflow-auto"
role="menu"
tabindex="-1"
>

2
web/src/lib/components/shared-components/control-app-bar.svelte
View file

@ -66,7 +66,7 @@
let buttonClass = $derived(forceDark ? 'hover:text-immich-dark-gray' : undefined);
</script>
<div in:fly={{ y: 10, duration: 200 }} class="absolute top-0 w-full bg-transparent z-[1]">
<div in:fly={{ y: 10, duration: 200 }} class="absolute top-0 w-full bg-transparent z-1">
<nav
id="asset-selection-app-bar"
class={[

6
web/src/lib/components/shared-components/full-screen-modal.svelte
View file

@ -52,17 +52,17 @@
$effect(() => {
switch (width) {
case 'extra-wide': {
modalWidth = 'w-[56rem]';
modalWidth = 'w-4xl';
break;
}
case 'wide': {
modalWidth = 'w-[48rem]';
modalWidth = 'w-3xl';
break;
}
case 'narrow': {
modalWidth = 'w-[28rem]';
modalWidth = 'w-md';
break;
}

2
web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
View file

@ -497,7 +497,7 @@
/>
{#if showAssetName && !isTimelineAsset(currentAsset)}
<div
class="absolute text-center p-1 text-xs font-mono font-semibold w-full bottom-0 bg-gradient-to-t bg-slate-50/75 overflow-clip text-ellipsis whitespace-pre-wrap"
class="absolute text-center p-1 text-xs font-mono font-semibold w-full bottom-0 bg-linear-to-t bg-slate-50/75 overflow-clip text-ellipsis whitespace-pre-wrap"
>
{currentAsset.originalFileName}
</div>

2
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View file

@ -25,7 +25,7 @@
in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
id="account-info-panel"
class="absolute z-[1] end-[25px] top-[75px] w-[min(360px,100vw-50px)] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
class="absolute z-1 end-[25px] top-[75px] w-[min(360px,100vw-50px)] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
use:focusTrap
>
<div

7
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View file

@ -51,13 +51,10 @@
<svelte:window bind:innerWidth />
<nav
id="dashboard-navbar"
class="max-md:h-[var(--navbar-height-md)] h-[var(--navbar-height)] w-dvw text-sm overflow-hidden"
>
<nav id="dashboard-navbar" class="max-md:h-(--navbar-height-md) h-(--navbar-height) w-dvw text-sm overflow-hidden">
<SkipLink text={$t('skip_to_content')} />
<div
class="grid h-full grid-cols-[theme(spacing.32)_auto] items-center py-2 sidebar:grid-cols-[theme(spacing.64)_auto] {noBorder
class="grid h-full grid-cols-[--spacing(32)_auto] items-center py-2 sidebar:grid-cols-[--spacing(64)_auto] {noBorder
? ''
: 'border-b'}"
>

2
web/src/lib/components/shared-components/navigation-bar/notification-panel.svelte
View file

@ -39,7 +39,7 @@
in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
id="notification-panel"
class="absolute right-[25px] top-[70px] z-[1] w-[min(360px,100vw-50px)] rounded-3xl bg-gray-100 border border-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray text-light"
class="absolute right-[25px] top-[70px] z-1 w-[min(360px,100vw-50px)] rounded-3xl bg-gray-100 border border-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray text-light"
use:focusTrap
>
<Stack class="max-h-[500px]">

2
web/src/lib/components/shared-components/password-field.svelte
View file

@ -19,7 +19,7 @@
<div class="relative w-full">
<input
{...rest}
class="immich-form-input w-full !pe-12"
class="immich-form-input w-full pe-12!"
type={showPassword ? 'text' : 'password'}
{required}
value={password}

10
web/src/lib/components/shared-components/scrubber/scrubber.svelte
View file

@ -446,7 +446,7 @@
aria-valuemax={toScrollY(1)}
aria-valuemin={toScrollY(0)}
data-id="immich-scrubbable-scrollbar"
class="absolute end-0 z-[1] select-none hover:cursor-row-resize"
class="absolute end-0 z-1 select-none hover:cursor-row-resize"
style:padding-top={PADDING_TOP + 'px'}
style:padding-bottom={PADDING_BOTTOM + 'px'}
style:width
@ -483,7 +483,7 @@
out:fade={{ duration: 200 }}
>
<Icon path={mdiPlay} size="20" class="-rotate-90 relative top-[9px] -end-[2px]" />
<Icon path={mdiPlay} size="20" class="rotate-90 relative top-[1px] -end-[2px]" />
<Icon path={mdiPlay} size="20" class="rotate-90 relative top-px -end-[2px]" />
{#if (assetStore.scrolling && scrollHoverLabel) || isHover || isDragging}
<p
transition:fade={{ duration: 200 }}
@ -521,7 +521,7 @@
data-label={segments.at(0)?.dateFormatted}
>
{#if relativeTopOffset > 6}
<div class="absolute end-[0.75rem] h-[4px] w-[4px] rounded-full bg-gray-300"></div>
<div class="absolute end-3 h-[4px] w-[4px] rounded-full bg-gray-300"></div>
{/if}
</div>
<!-- Time Segment -->
@ -535,12 +535,12 @@
>
{#if !usingMobileDevice}
{#if segment.hasLabel}
<div class="absolute end-[1.25rem] top-[-16px] text-[12px] dark:text-immich-dark-fg font-immich-mono">
<div class="absolute end-5 top-[-16px] text-[12px] dark:text-immich-dark-fg font-immich-mono">
{segment.date.year}
</div>
{/if}
{#if segment.hasDot}
<div class="absolute end-[0.75rem] bottom-0 h-[4px] w-[4px] rounded-full bg-gray-300"></div>
<div class="absolute end-3 bottom-0 h-[4px] w-[4px] rounded-full bg-gray-300"></div>
{/if}
{/if}
</div>

6
web/src/lib/components/shared-components/search-bar/search-text-section.svelte
View file

@ -34,7 +34,7 @@
{#if queryType === 'smart'}
<label for="context-input" class="immich-form-label">{$t('search_by_context')}</label>
<input
class="immich-form-input hover:cursor-text w-full !mt-1"
class="immich-form-input hover:cursor-text w-full mt-1!"
type="text"
id="context-input"
name="context"
@ -44,7 +44,7 @@
{:else if queryType === 'metadata'}
<label for="file-name-input" class="immich-form-label">{$t('search_by_filename')}</label>
<input
class="immich-form-input hover:cursor-text w-full !mt-1"
class="immich-form-input hover:cursor-text w-full mt-1!"
type="text"
id="file-name-input"
name="file-name"
@ -55,7 +55,7 @@
{:else if queryType === 'description'}
<label for="description-input" class="immich-form-label">{$t('search_by_description')}</label>
<input
class="immich-form-input hover:cursor-text w-full !mt-1"
class="immich-form-input hover:cursor-text w-full mt-1!"
type="text"
id="description-input"
name="description"

2
web/src/lib/components/shared-components/settings/setting-select.svelte
View file

@ -70,7 +70,7 @@
: 'text-immich-fg dark:text-immich-bg'}"
/>
<select
class="immich-form-input w-full appearance-none row-start-1 col-start-1 !pe-6"
class="immich-form-input w-full appearance-none row-start-1 col-start-1 pe-6!"
{disabled}
aria-describedby={desc ? `${name}-desc` : undefined}
{name}

2
web/src/lib/components/shared-components/tree/tree.svelte
View file

@ -31,7 +31,7 @@
<a
href={getLink(path)}
title={value}
class={`flex flex-grow place-items-center ps-2 py-1 text-sm rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 hover:font-semibold ${isTarget ? 'bg-slate-100 dark:bg-slate-700 font-semibold text-immich-primary dark:text-immich-dark-primary' : 'dark:text-gray-200'}`}
class={`flex grow place-items-center ps-2 py-1 text-sm rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 hover:font-semibold ${isTarget ? 'bg-slate-100 dark:bg-slate-700 font-semibold text-immich-primary dark:text-immich-dark-primary' : 'dark:text-gray-200'}`}
data-sveltekit-keepfocus
>
<button type="button" {onclick} class={Object.values(tree).length === 0 ? 'invisible' : ''}>