/** * Preline Pro template pack — optional livelier accents for lists & data views. * Activated when (see inject script in same repo). * Uses translucent tints so light/dark themes both read clearly. */ html[data-preline-vibrancy="1"] table.min-w-full thead { background: linear-gradient( 180deg, color-mix(in oklab, var(--color-blue-500, #3b82f6) 10%, transparent) 0%, color-mix(in oklab, var(--color-violet-500, #8b5cf6) 4%, transparent) 55%, transparent 100% ); } html[data-preline-vibrancy="1"].dark table.min-w-full thead { background: linear-gradient( 180deg, color-mix(in oklab, var(--color-blue-400, #60a5fa) 12%, transparent) 0%, color-mix(in oklab, var(--color-violet-400, #a78bfa) 6%, transparent) 50%, transparent 100% ); } /* Zebra rows — easier row-to-row comparison */ html[data-preline-vibrancy="1"]:not(.dark) table.min-w-full tbody tr:nth-child(even) { background-color: color-mix(in oklab, var(--color-slate-500, #64748b) 6%, transparent); } html[data-preline-vibrancy="1"].dark table.min-w-full tbody tr:nth-child(even) { background-color: color-mix(in oklab, var(--color-slate-400, #94a3b8) 5%, transparent); } /* Card table shells — subtle top colour strip on header row */ html[data-preline-vibrancy="1"] .bg-card.border.border-card-line.shadow-xs.rounded-xl > .border-b.border-card-header, html[data-preline-vibrancy="1"] .flex.flex-col.bg-card.border.border-card-line.shadow-xs.rounded-xl > .py-3.px-5.border-b.border-card-header { background: linear-gradient( 90deg, color-mix(in oklab, var(--color-indigo-500, #6366f1) 9%, transparent), transparent 70% ); } html[data-preline-vibrancy="1"].dark .bg-card.border.border-card-line.shadow-xs.rounded-xl > .border-b.border-card-header, html[data-preline-vibrancy="1"].dark .flex.flex-col.bg-card.border.border-card-line.shadow-xs.rounded-xl > .py-3.px-5.border-b.border-card-header { background: linear-gradient( 90deg, color-mix(in oklab, var(--color-indigo-400, #818cf8) 11%, transparent), transparent 72% ); } /* Status pills — clearer edge when templates use tinted badge backgrounds */ html[data-preline-vibrancy="1"] [class*="bg-emerald-500/10"] { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-emerald-500, #10b981) 28%, transparent); } html[data-preline-vibrancy="1"] [class*="bg-amber-500/10"] { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-amber-500, #f59e0b) 30%, transparent); } html[data-preline-vibrancy="1"] [class*="bg-rose-500/10"] { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-rose-500, #f43f5e) 28%, transparent); } html[data-preline-vibrancy="1"] [class*="bg-blue-500/10"] { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-blue-500, #3b82f6) 28%, transparent); } html[data-preline-vibrancy="1"] [class*="bg-violet-500/10"] { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-violet-500, #8b5cf6) 28%, transparent); }