Reskin the whole admin UI (not just game widgets) with Bulma

Loads Bulma 1.0.2 in base.html (data-theme="dark" for its native dark palette) for every page that extends it, plus play.html directly. Converts every admin template — index, game dashboard, screens list, element types, object new/edit, data form/list — to real Bulma markup: navbar, breadcrumb component, box/card, field/control/input/select, table, notification, buttons, and a native Bulma modal for the data-row detail popup. Forge's own style.css keeps only what Bulma doesn't cover (the fixed-viewport builder/object-edit layouts, the element tree, canvas, flow-graph editor) and now acts as a secondary/override layer rather than a competing design system, matching how per-element inline customization already overrides widget defaults.

screen_edit.html (the 3-panel screen builder) gets the same navbar/breadcrumb/button treatment plus its top rename form, but its flow-graph node editor, canvas and element tree keep their existing custom styling — several of their inputs have JS relying on exact DOM sibling structure (e.g. slider oninput reading nextElementSibling) or Bulma's own select/wrapper requirement, and reskinning them without a browser to verify against risked silently breaking the app's most complex feature. Buttons and headings there are still fully converted (safe, purely additive class changes).

Verified: full test suite green, every route smoke-rendered 200 OK via the test client after the change.

templates/data_list.html

@@ -1,17 +1,17 @@
 {% extends "base.html" %}
 {% block title %}{{ definition.name }} — {{ game.name }}{% endblock %}
 {% block breadcrumb %}
-<a class="crumb" href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a>
-<span class="crumb-sep">/</span><span class="crumb">{{ definition.name }}</span>
+<li><a href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a></li>
+<li class="is-active"><a>{{ definition.name }}</a></li>
 {% endblock %}
 {% block content %}
-<h1>{{ definition.name }}
-  <a class="smallBtn" href="{{ url_for('object_edit', slug=game.slug, definition_id=definition.id) }}" title="Modifier cet objet" style="text-decoration:none; margin-left:6px;">✏️</a>
+<h1 class="title">{{ definition.name }}
+  <a class="button is-small" href="{{ url_for('object_edit', slug=game.slug, definition_id=definition.id) }}" title="Modifier cet objet">✏️</a>
 </h1>
-<p class="hint">Table SQL : {{ definition.table_name }} — {{ definition.fields|length }} champ(s)</p>
+<p class="help mb-4">Table SQL : {{ definition.table_name }} — {{ definition.fields|length }} champ(s)</p>
 
 {% if referenced_by %}
-<div class="warningBanner">
+<div class="notification is-warning is-light">
   ⚠️ D'autres objets ont une relation vers « {{ definition.name }} » :
   {{ referenced_by|map(attribute='name')|join(', ') }}.
   La suppression de cet objet est bloquée tant que ces relations existent.
@@ -19,16 +19,16 @@
 {% endif %}
 
 {% if blocked_row_id %}
-<div class="warningBanner">
+<div class="notification is-warning is-light">
   ⚠️ Impossible de supprimer l'entrée #{{ blocked_row_id }} : elle est référencée par
   {% for ref in blocked_row_refs %}{{ ref.count }} entrée(s) de « {{ ref.definition_name }} » (champ « {{ ref.field_name }} »){% if not loop.last %}, {% endif %}{% endfor %}.
   Modifie ou supprime d'abord ces entrées.
 </div>
 {% endif %}
 
-<a class="addBtn" href="{{ url_for('data_new', slug=game.slug, definition_id=definition.id) }}">+ Ajouter une entrée</a>
+<a class="button is-primary is-outlined mb-4" href="{{ url_for('data_new', slug=game.slug, definition_id=definition.id) }}">+ Ajouter une entrée</a>
 
-<h2>Données enregistrées</h2>
+<h2 class="subtitle">Données enregistrées</h2>
 {% if rows %}
 {% macro row_field_display(f, r) %}
 {%- if f.type == 'relation' -%}
@@ -39,8 +39,8 @@
 {{ r[f.name|colname] }}
 {%- endif -%}
 {% endmacro %}
-<div class="dataTableWrap">
-<table class="dataTable">
+<div class="table-container">
+<table class="table is-fullwidth is-hoverable dataTable">
   <thead>
     <tr>
       <th>#</th>
@@ -56,12 +56,12 @@
       <td>{{ row_field_display(f, r) }}</td>
       {% endfor %}
       <td>
-        <div class="rowActions">
-          <button type="button" class="smallBtn" title="Voir cette entrée en détail" onclick="openRowDetail({{ r.id }})">👁️</button>
-          <a class="smallBtn" href="{{ url_for('data_edit', slug=game.slug, definition_id=definition.id, row_id=r.id) }}">✏️</a>
+        <div class="buttons is-inline-flex are-small">
+          <button type="button" class="button is-small" title="Voir cette entrée en détail" onclick="openRowDetail({{ r.id }})">👁️</button>
+          <a class="button is-small" href="{{ url_for('data_edit', slug=game.slug, definition_id=definition.id, row_id=r.id) }}">✏️</a>
           <form method="post" action="{{ url_for('data_delete', slug=game.slug, definition_id=definition.id, row_id=r.id) }}"
                 onsubmit="return confirm('Supprimer définitivement l\'entrée #{{ r.id }} ?');">
-            <button type="submit" class="smallBtn danger">🗑️</button>
+            <button type="submit" class="button is-small is-danger">🗑️</button>
           </form>
         </div>
       </td>
@@ -72,41 +72,42 @@
 </div>
 
 {% for r in rows %}
-<div class="rowDetailModal" id="rowDetail{{ r.id }}" onclick="if(event.target===this) closeRowDetail({{ r.id }});">
-  <div class="rowDetailCard">
-    <div class="rowDetailHeader">
-      <h3>Entrée #{{ r.id }}</h3>
-      <button type="button" class="smallBtn" title="Fermer" onclick="closeRowDetail({{ r.id }})">✕</button>
-    </div>
-    <div class="rowDetailBody">
+<div class="modal" id="rowDetail{{ r.id }}">
+  <div class="modal-background" onclick="closeRowDetail({{ r.id }})"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Entrée #{{ r.id }}</p>
+      <button class="delete" aria-label="Fermer" onclick="closeRowDetail({{ r.id }})"></button>
+    </header>
+    <section class="modal-card-body">
       {% for f in definition.fields %}
       <div class="rowDetailField">
         <div class="rowDetailLabel">{{ f.name }}</div>
         <div class="rowDetailValue">{{ row_field_display(f, r) }}</div>
       </div>
       {% endfor %}
-    </div>
+    </section>
   </div>
 </div>
 {% endfor %}
 {% else %}
-<p class="hint">Aucune donnée enregistrée pour l'instant.</p>
+<p class="help">Aucune donnée enregistrée pour l'instant.</p>
 {% endif %}
 
 <script>
 function openRowDetail(id) {
   var modal = document.getElementById('rowDetail' + id);
-  if (modal) modal.classList.add('open');
+  if (modal) modal.classList.add('is-active');
 }
 function closeRowDetail(id) {
   var modal = document.getElementById('rowDetail' + id);
-  if (modal) modal.classList.remove('open');
+  if (modal) modal.classList.remove('is-active');
 }
 if (!window.__forgeRowDetailEscBound) {
   window.__forgeRowDetailEscBound = true;
   document.addEventListener('keydown', function (e) {
     if (e.key !== 'Escape') return;
-    document.querySelectorAll('.rowDetailModal.open').forEach(function (m) { m.classList.remove('open'); });
+    document.querySelectorAll('.modal.is-active').forEach(function (m) { m.classList.remove('is-active'); });
   });
 }
 </script>