Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-05-24 01:12:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: tailwind issues (#18528)

Browse Source 
fix: tailwind issues (maybe)
This commit is contained in:
Daniel Dietzler 2025-05-23 19:34:24 +02:00 committed by GitHub
parent e12c67742c
commit e61c575b01
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 41 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/src/app.css
View File

@ -1,9 +1,8 @@
@import 'tailwindcss'; @import 'tailwindcss';
@import '@immich/ui/theme/default.css'; @import '@immich/ui/theme/default.css';
@source "../node_modules/@immich/ui";
/* @import '/usr/ui/dist/theme/default.css'; */ /* @import '/usr/ui/dist/theme/default.css'; */
@config '../tailwind.config.js';
@utility immich-form-input { @utility immich-form-input {
@apply rounded-xl bg-slate-200 px-3 py-3 text-sm focus:border-immich-primary disabled:cursor-not-allowed disabled:bg-gray-400 disabled:text-gray-100 dark:bg-gray-600 dark:text-immich-dark-fg dark:disabled:bg-gray-800 dark:disabled:text-gray-200; @apply rounded-xl bg-slate-200 px-3 py-3 text-sm focus:border-immich-primary disabled:cursor-not-allowed disabled:bg-gray-400 disabled:text-gray-100 dark:bg-gray-600 dark:text-immich-dark-fg dark:disabled:bg-gray-800 dark:disabled:text-gray-200;
} }
@ -27,8 +26,48 @@
scrollbar-gutter: stable both-edges; scrollbar-gutter: stable both-edges;
} }
@utility grid-auto-fit-* {
grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--spacing) * --value(number)), 100%), 1fr));
}
@utility grid-auto-fill-* {
grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--spacing) * --value(number)), 100%), 1fr));
}
@custom-variant dark (&:where(.dark, .dark *)); @custom-variant dark (&:where(.dark, .dark *));
@theme inline {
--color-immich-primary: rgb(var(--immich-primary));
--color-immich-bg: rgb(var(--immich-bg));
--color-immich-fg: rgb(var(--immich-fg));
--color-immich-gray: rgb(var(--immich-gray));
--color-immich-error: rgb(var(--immich-error));
--color-immich-success: rgb(var(--immich-success));
--color-immich-warning: rgb(var(--immich-warning));
--color-immich-dark-primary: rgb(var(--immich-dark-primary));
--color-immich-dark-bg: rgb(var(--immich-dark-bg));
--color-immich-dark-fg: rgb(var(--immich-dark-fg));
--color-immich-dark-gray: rgb(var(--immich-dark-gray));
--color-immich-dark-error: rgb(var(--immich-dark-error));
--color-immich-dark-success: rgb(var(--immich-dark-success));
--color-immich-dark-warning: rgb(var(--immich-dark-warning));
}
@theme {
--font-immich-mono: Overpass Mono, monospace;
--spacing-18: 4.5rem;
--breakpoint-tall: 800px;
--breakpoint-2xl: 1535px;
--breakpoint-xl: 1279px;
--breakpoint-lg: 1023px;
--breakpoint-md: 767px;
--breakpoint-sm: 639px;
--breakpoint-sidebar: 850px;
}
@layer base { @layer base {
:root { :root {
/* light */ /* light */

63
web/tailwind.config.js
View File

@ -1,63 +0,0 @@
import plugin from 'tailwindcss/plugin';
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./src/**/*.{html,js,svelte,ts}',
'./node_modules/@immich/ui/dist/**/*.{svelte,js}',
'../../ui/src/**/*.{html,js,svelte,ts}',
],
theme: {
extend: {
colors: {
// Light Theme
'immich-primary': 'rgb(var(--immich-primary) / <alpha-value>)',
'immich-bg': 'rgb(var(--immich-bg) / <alpha-value>)',
'immich-fg': 'rgb(var(--immich-fg) / <alpha-value>)',
'immich-gray': 'rgb(var(--immich-gray) / <alpha-value>)',
'immich-error': 'rgb(var(--immich-error) / <alpha-value>)',
'immich-success': 'rgb(var(--immich-success) / <alpha-value>)',
'immich-warning': 'rgb(var(--immich-warning) / <alpha-value>)',
// Dark Theme
'immich-dark-primary': 'rgb(var(--immich-dark-primary) / <alpha-value>)',
'immich-dark-bg': 'rgb(var(--immich-dark-bg) / <alpha-value>)',
'immich-dark-fg': 'rgb(var(--immich-dark-fg) / <alpha-value>)',
'immich-dark-gray': 'rgb(var(--immich-dark-gray) / <alpha-value>)',
'immich-dark-error': 'rgb(var(--immich-dark-error) / <alpha-value>)',
'immich-dark-success': 'rgb(var(--immich-dark-success) / <alpha-value>)',
'immich-dark-warning': 'rgb(var(--immich-dark-warning) / <alpha-value>)',
},
fontFamily: {
'immich-mono': ['Overpass Mono', 'monospace'],
},
spacing: {
18: '4.5rem',
},
screens: {
tall: { raw: '(min-height: 800px)' },
'max-2xl': { max: '1535px' },
'max-xl': { max: '1279px' },
'max-lg': { max: '1023px' },
'max-md': { max: '767px' },
'max-sm': { max: '639px' },
sidebar: { min: '850px' },
},
},
},
plugins: [
plugin(({ matchUtilities, theme }) => {
matchUtilities(
{
'grid-auto-fit': (value) => ({
gridTemplateColumns: `repeat(auto-fit, minmax(min(${value}, 100%), 1fr))`,
}),
'grid-auto-fill': (value) => ({
gridTemplateColumns: `repeat(auto-fill, minmax(min(${value}, 100%), 1fr))`,
}),
},
{ values: theme('width') },
);
}),
],
};