nvrl/narlblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed tables and alerts

Browse Source
This commit is contained in:
Nils Pukropp
2026-03-27 11:41:47 +01:00
parent 005c5f370c
commit 72060a583a
2 changed files with 28 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/ui/Alert.ts
View File

@@ -2,17 +2,31 @@ export function showAlert(msg: string, type: 'success' | 'error', elementId: str
const alertEl = document.getElementById(elementId);
if (alertEl) {
alertEl.textContent = msg;
alertEl.className = `p-4 rounded-lg mb-6 text-sm md:text-base ${
type === 'success'
? 'bg-green/20 text-green border border-green/30'
: 'bg-red/20 text-red border border-red/30'
}`;
// Define colors based on type using theme variables
const colorVar = type === 'success' ? 'var(--green)' : 'var(--red)';
// Apply inline styles for guaranteed high contrast and glassy look
alertEl.style.display = 'block';
alertEl.style.backgroundColor = `color-mix(in srgb, ${colorVar} 15%, transparent)`;
alertEl.style.color = 'var(--text)';
alertEl.style.border = `1px solid color-mix(in srgb, ${colorVar} 40%, transparent)`;
alertEl.style.padding = '1rem';
alertEl.style.borderRadius = '0.75rem';
alertEl.style.marginBottom = '1.5rem';
alertEl.style.fontSize = '0.875rem';
alertEl.style.fontWeight = '600';
alertEl.style.backdropFilter = 'blur(12px)';
alertEl.style.textAlign = 'center';
alertEl.style.boxShadow = '0 4px 15px -5px rgba(0,0,0,0.3)';
alertEl.classList.remove('hidden');
window.scrollTo({ top: 0, behavior: 'smooth' });
setTimeout(() => {
alertEl.classList.add('hidden');
alertEl.style.display = 'none';
}, 5000);
}
}

9
frontend/src/styles/global.css
View File

@@ -112,6 +112,15 @@ body {
.prose pre { @apply p-3 md:p-4 rounded-xl overflow-x-auto border border-white/5 my-4 md:my-6 text-xs md:text-sm; background-color: var(--crust) !important; }
.prose code { @apply bg-surface0 px-1.5 py-0.5 rounded text-xs md:text-sm font-mono; color: var(--peach) !important; }
.prose pre code { background-color: transparent !important; padding: 0 !important; border-radius: 0 !important; color: inherit !important; }
.prose img { @apply max-w-full h-auto rounded-xl shadow-lg border border-white/5 my-6 md:my-8; }
/* Professional Table Styles */
.prose table { @apply w-full mb-8 border-collapse overflow-hidden rounded-xl; border: 1px solid var(--surface1); }
.prose thead { @apply bg-surface0/50; }
.prose th { @apply px-4 py-3 text-left font-bold text-mauve border-b border-surface1 text-sm md:text-base; }
.prose td { @apply px-4 py-2 border-b border-surface1 text-sm md:text-base; color: var(--text) !important; }
.prose tr:last-child td { @apply border-b-0; }
.prose tr:nth-child(even) { @apply bg-surface0/20; }
/* Dynamic UI Components */
.glass {