From 9b388af0cc5125ffbcc2dc785dd0a25953def924 Mon Sep 17 00:00:00 2001
From: bes-r <noreply@bes-r.github.com>
Date: Sat, 6 Jun 2026 20:53:14 +0200
Subject: [PATCH] v0.4.1 - fix: @apply anim brak alle Tailwind-styling

---
 CHANGELOG.md                   | 12 ++++++++++++
 server-up/app.py               |  2 +-
 server-up/templates/index.html |  6 +++---
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f0aa5e1..32ac5ba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,15 @@
+# v0.4.1 — Fix: styling werd niet toegepast
+
+## Fix bovenop v0.4.0
+
+De volledige Tailwind-stylesheet faalde stil omdat `.modal` via `@apply` de
+eigen CSS-animatieklasse `anim` toepaste. Tailwind's `@apply` accepteert alleen
+Tailwind-utilities, geen losse CSS-klassen, waardoor de hele Play-CDN-compilatie
+afbrak en de pagina ongestyled (kaal HTML) werd geladen. De animatie staat nu
+als gewone CSS-regel (`.anim, .modal { animation: … }`) los van `@apply`.
+
+---
+
 # v0.4.0 — Volledig nieuw UI-ontwerp (Modern SaaS)
 
 ## Nieuw in v0.4.0
diff --git a/server-up/app.py b/server-up/app.py
index 51f415a..60af414 100644
--- a/server-up/app.py
+++ b/server-up/app.py
@@ -18,7 +18,7 @@ from core.modules import Module, CORE, discover
 
 app = Flask(__name__, static_folder="static", template_folder="templates")
 
-VERSION = os.environ.get("SU_VERSION", "0.4.0")
+VERSION = os.environ.get("SU_VERSION", "0.4.1")
 
 MODULES: list[Module] = []
 USER_MOD = APP / "modules"
diff --git a/server-up/templates/index.html b/server-up/templates/index.html
index 8359b29..df6b9e2 100644
--- a/server-up/templates/index.html
+++ b/server-up/templates/index.html
@@ -56,7 +56,7 @@ tailwind.config = {
   ::-webkit-scrollbar-track { background: transparent; }
   .dark ::-webkit-scrollbar-thumb { background: rgb(48 60 76 / .8); }
   @keyframes fadeup { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }
-  .anim { animation: fadeup .28s ease both; }
+  .anim, .modal { animation: fadeup .28s ease both; }
   .log-ok{color:#4ade80}.log-error{color:#f87171}.log-warn{color:#fbbf24}.log-info{color:#60a5fa}.log-dim{color:#7c8aa0}.log-section{color:#818cf8;font-weight:600}
 </style>
 </head>
@@ -714,7 +714,7 @@ tailwind.config = {
     .empty      { @apply text-center py-16 text-dm dark:text-dm-dark; }
     .empty span { @apply text-5xl opacity-40 block mb-2; }
     .empty p    { @apply text-sm; }
-    .modal      { @apply bg-s1 dark:bg-s1-dark border border-bd dark:border-bd-dark rounded-2xl w-full shadow-pop anim; }
+    .modal      { @apply bg-s1 dark:bg-s1-dark border border-bd dark:border-bd-dark rounded-2xl w-full shadow-pop; }
     .modal-head { @apply px-5 py-4 text-base font-extrabold text-wh dark:text-wh-dark flex items-center gap-2.5 border-b border-bd dark:border-bd-dark; }
     .modal-body { @apply px-5 py-4; }
     .modal-foot { @apply px-5 py-4 flex justify-end gap-2 border-t border-bd dark:border-bd-dark; }
@@ -724,7 +724,7 @@ tailwind.config = {
 <script>
 function app() {
   return {
-    version: '0.4.0',
+    version: '0.4.1',
     page: location.hash.slice(1) || 'dashboard',
     isMobile: window.innerWidth < 768,
     sidebarOpen: window.innerWidth >= 768 && localStorage.getItem('sidebar') !== 'closed',