From 2a0949307b90aec74fff038b19212d37fe4f84a0 Mon Sep 17 00:00:00 2001
From: Hermes <hermes@local>
Date: Sat, 8 Aug 2026 18:01:15 +0200
Subject: [PATCH] fix: inject CSS into <head> (Template.add does NOT inject
 style); styles were missing

---
 plugin.js | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/plugin.js b/plugin.js
index 371a170..76269d1 100644
--- a/plugin.js
+++ b/plugin.js
@@ -42,14 +42,17 @@
         }
     }
 
-    // Plugin templates/styles (pattern from Shikimori plugin):
-    // own namespaced classes so they do NOT collide with Lampa native .card__img
-    // (native card__img is hidden until its own lazy-load runs, so our <img> must use a custom class).
+    // Plugin templates/styles.
+    // NOTE: Lampa.Template.add() only stores the string in memory — it does NOT
+    // inject <style> into the page. So we inject CSS manually into <head>, and use
+    // Template.add only for the card HTML template.
+    // Own namespaced classes (mm-card) so they do NOT collide with Lampa native
+    // .card__img (which Lampa hides until its own lazy-load runs).
     function injectStyles() {
         if (window.__mymovies_css_injected) return;
         window.__mymovies_css_injected = true;
 
-        // Card template with poster image
+        // Card HTML template (used via Lampa.Template.get)
         Lampa.Template.add('mymovies-card',
             '<div class="mm-card selector">' +
                 '<div class="mm-card__view">' +
@@ -59,9 +62,8 @@
                 '<div class="mm-card__age">{year}</div>' +
             '</div>');
 
-        // Styles
-        Lampa.Template.add('mymovies-style',
-            '<style>' +
+        // Inject CSS into <head> so it actually applies
+        var css =
             '.mymovies{padding:2.2em 3.4em;overflow-y:auto;height:100%;box-sizing:border-box}' +
             '.movies-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1.4em}' +
             '.mm-card{background:#1c1f26;border-radius:6px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:transform .15s}' +
@@ -76,8 +78,8 @@
             '.detail-info h1{margin:0 0 .4em;font-size:1.8em}' +
             '.detail-info>div{margin:.3em 0;opacity:.85}' +
             '.detail-actions{margin-top:1.5em}' +
-            '.mymovies-empty{padding:2em;opacity:.6;font-size:1.2em}' +
-            '</style>');
+            '.mymovies-empty{padding:2em;opacity:.6;font-size:1.2em}';
+        $('<style id="mymovies-style">').text(css).appendTo('head');
     }
 
     // ---------- Component: movie list ----------