61 lines
2.2 KiB
CSS
61 lines
2.2 KiB
CSS
/* src/styles/global.css */
|
|
@import "tailwindcss";
|
|
|
|
/* 1. Reci Tailwindu v4 da skenira Flowbite komponente unutar node_modules */
|
|
@source "../../node_modules/flowbite/**/*.js";
|
|
|
|
/* 2. Učitaj Flowbite plugin koristeći v4 sintaksu */
|
|
@plugin "flowbite/plugin";
|
|
|
|
@theme {
|
|
--color-canvas-base: var(--app-canvas-base);
|
|
--color-canvas-elevated: var(--app-canvas-elevated);
|
|
--color-canvas-deep: var(--app-canvas-deep);
|
|
|
|
--color-brand-primary: var(--app-brand-primary);
|
|
--color-brand-accent: var(--app-brand-accent);
|
|
--color-brand-accent-bright: var(--app-brand-accent-bright);
|
|
|
|
--color-text-main: var(--app-text-main);
|
|
--color-text-muted: var(--app-text-muted);
|
|
--color-border-hairline: var(--app-border-hairline);
|
|
|
|
/* Registracija globalne animacije */
|
|
--animate-blob-float: blobFloat 10s ease-in-out infinite;
|
|
|
|
@keyframes blobFloat {
|
|
0%, 100% { transform: translateY(0px) scale(1) rotate(0deg); }
|
|
50% { transform: translateY(-20px) scale(1.02) rotate(1deg); }
|
|
}
|
|
}
|
|
|
|
/* 🌙 DARK MOD: Kada 'html' element dobije klasu .dark, varijable poprimaju Blade Runner estetiku */
|
|
@variant dark (&:where(.dark, .dark *));
|
|
|
|
/* ==============================================================================
|
|
🚀 DRY UTILITY KOMPONENTE (Tailwind v4 Sintaksa)
|
|
============================================================================== */
|
|
|
|
/* Stvaramo unificiranu bazu gumba koja radi kroz Astro i Preact */
|
|
@utility btn-erp {
|
|
@apply inline-flex items-center justify-center font-sans font-bold uppercase tracking-wider text-xs px-4 py-2.5 rounded-md shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
|
|
/* Primarni gumb (Popravljen s ispravnom v4 prozirnošću na hoveru) */
|
|
@utility btn-erp-primary {
|
|
/* ✅ POPRAVLJENO: bg-brand-primary/90 postavlja prozirnost izravno na boju tijekom hover stanja */
|
|
@apply btn-erp bg-brand-primary text-white hover:bg-brand-primary/90 active:scale-[0.98];
|
|
}
|
|
|
|
/* Opcionalni Outline gumb */
|
|
@utility btn-erp-outline {
|
|
@apply btn-erp border border-border-hairline text-text-muted hover:bg-canvas-deep;
|
|
}
|
|
|
|
/* Modal blur efekt — blurira main content, ali ne i Navbar */
|
|
#main-content {
|
|
transition: filter 0.2s ease;
|
|
}
|
|
body.modal-open #main-content {
|
|
filter: blur(4px);
|
|
} |