Guide du thème CSS de fiche

Le CSS de fiche donne à une fiche de personnage ou de persona son propre style dans le chat. Tu intègres du CSS dans le champ Creator Notes (notes du créateur) de la fiche, et Marinara l'applique aux messages de ce personnage. Il ne peut styliser que le chat, jamais le reste de l'application. Ce guide s'adresse aux créateurs de fiches.

Avant de commencer

Les termes utilisés dans ce guide :

Démarrage rapide

Voici un bloc de départ à coller à l'étape 2 :

Tu ajoutes le CSS à la fiche, puis tu l'actives dans le chat.

  1. Ouvre le personnage dans le Character Editor (éditeur de personnage) et repère Creator Notes. Les personas ont le même champ dans le Persona Editor (éditeur de persona).
  2. Colle le bloc de départ dans Creator Notes, puis enregistre la fiche.
  3. Ouvre un chat avec ce personnage.
  4. Ouvre Chat Settings, puis Characters (ou Party en Game Mode).
  5. Choisis Exclusive ou Chat sous Card Theming. Le réglage démarre sur Disabled.

Les messages du personnage changent aussitôt.

Si ça n'a pas marché : les boutons Disabled, Exclusive et Chat n'apparaissent que si un personnage actif du chat a du CSS dans son champ Creator Notes. Le CSS d'un persona seul ne les fait pas apparaître : le thème d'un persona a donc besoin, lui aussi, d'un personnage du chat avec un bloc `


Game Mode bénéficie d'une prise en charge de base. En mode **Chat**, le CSS de fiche atteint toute la surface de jeu : `[data-card-css]` habille donc la zone de jeu. Game Mode a sa propre mise en page, sans bulles de message : vise large, par exemple l'arrière-plan de la zone. Le style par personnage (**Exclusive**) de la narration de jeu n'est pas encore disponible.

## Ce que tu peux styliser

Roleplay et Conversation reposent sur le même squelette. Tiens-t'en aux classes `mari-*` et aux attributs `data-*` ci-dessous. Les autres classes changent d'une version à l'autre.

| Sélecteur | Ce qu'il vise |
| --- | --- |
| `[data-card-css]` | Toute la ligne de message (l'élément de portée). Pratique pour un liseré sur le bord, ou pour la zone de chat en mode **Chat**. |
| `[data-card-css] .mari-message-bubble` | La bulle visible : arrière-plan, bordure, coins, ombre. En **Bubbles** et en roleplay. |
| `[data-card-css] .mari-message-content` | En **Bubbles**, l'élément de bulle lui-même. En **Linear**, uniquement le texte du message. |
| `[data-card-css] .mari-message-name` | Le nom affiché du personnage. |
| `[data-card-css] .mari-message-meta` | La ligne d'en-tête qui porte le nom et l'horodatage. |
| `[data-card-css] .mari-message-timestamp` | L'horodatage. |
| `[data-card-css] .mari-message-avatar` | La colonne de l'avatar. |
| `[data-card-css] .mari-message-narrator` | Les messages du narrateur (roleplay). |
| `[data-card-css] .mari-message-user` | Les messages de l'utilisateur. Utilise `.mari-message-assistant` pour les messages du personnage. |
| `[data-card-css] p`, `[data-card-css] span` | Les paragraphes et les éléments span en ligne dans le texte. |
| `[data-grouped]` | Les messages qui prolongent ceux du même personnage. Conversation uniquement. Utilise `[data-card-css]:not([data-grouped])` pour le premier message d'un groupe. |

Pour changer de mise en page, ouvre **Settings → Appearance → Conversation** (Paramètres → Apparence → Conversation), puis **Conversation Display** (affichage de Conversation), puis **Chat Layout** (disposition du chat). En **Linear**, stylise `.mari-message-content` (le texte) et `[data-card-css]` (la ligne), puisqu'il n'y a pas de bulle.

Une bulle stylisée :

[data-card-css] .mari-message-bubble { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border: 1px solid rgba(100, 149, 237, 0.35); border-radius: 1rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } [data-card-css] .mari-message-name { color: #6495ed; text-shadow: 0 0 8px rgba(100, 149, 237, 0.5); } [data-card-css] .mari-message-content { font-family: Georgia, serif; }


### Indicateur de saisie

Dans la mise en page **Linear** de Conversation, une ligne "(name) is typing..." s'affiche pendant qu'un personnage écrit.

| Sélecteur | Ce qu'il vise |
| --- | --- |
| `[data-card-css] .mari-typing-text` | L'étiquette. |
| `[data-card-css] .mari-typing-dots span` | Les points animés. |
| `[data-card-css] .mari-typing-indicator` | La ligne. Elle porte le nom dans `data-typing-name`. |

[data-card-css] .mari-typing-text { color: #ff66cc; font-style: italic; } [data-card-css] .mari-typing-dots span { background: #ff66cc; }


### Avatar

L'avatar est un cercle par défaut. L'exemple vise le bouton d'avatar cliquable. Pour un avatar non cliquable, utilise `.mari-message-avatar > div`. En roleplay, le bouton se trouve dans un `div` supplémentaire qui produit une lueur. Aplatis-le si tu ne veux garder que ton propre anneau.

[data-card-css] .mari-message-avatar button { border-radius: 6px; / 0 for sharp corners, 50% for a circle / box-shadow: 0 0 0 2px #ff66cc; } @chat-mode roleplay { [data-card-css] .mari-message-avatar > div { box-shadow: none; } }


### Panneau contextuel de profil About Me (Conversation uniquement)

En mode Conversation, un clic sur un avatar ouvre un panneau contextuel de profil avec le "about me". Les fiches de personnage et les personas peuvent habiller leur propre panneau contextuel. Il n'existe ni en roleplay ni en Game Mode : place donc ces règles dans `@chat-mode conversation` si ta fiche fournit aussi du CSS pour d'autres modes.

La carte du panneau contextuel est l'élément de portée. Vise-la avec `[data-card-css].mari-about-me-popout` (sans espace, même élément), et ses enfants comme des descendants. En mode **Chat**, tu peux utiliser `.mari-about-me-name` directement.

| Sélecteur | Ce qu'il vise |
| --- | --- |
| `[data-card-css].mari-about-me-popout` | La carte du panneau contextuel : arrière-plan, bordure, forme. |
| `[data-card-css] .mari-about-me-banner` | La bande de bannière du haut (par défaut, la couleur du nom). |
| `[data-card-css] .mari-about-me-avatar` | Le conteneur de l'avatar agrandi. Utilise `... > div` pour le cercle. |
| `[data-card-css] .mari-about-me-status` | Le point du statut de présence (personnages uniquement). |
| `[data-card-css] .mari-about-me-name` | Le titre du nom affiché. |
| `[data-card-css] .mari-about-me-handle` | La ligne secondaire en @nom, affichée quand un nom affiché Convo diffère. |
| `[data-card-css] .mari-about-me-presence` | La ligne de statut ou d'activité (personnages uniquement). |
| `[data-card-css] .mari-about-me-box` | Le cadre conteneur du About Me. |
| `[data-card-css] .mari-about-me-label` | La légende "ABOUT ME". |
| `[data-card-css] .mari-about-me-badge` | La pastille Default ou Chat-specific. |
| `[data-card-css] .mari-about-me-text` | Le corps de texte "about me". |

@chat-mode conversation { [data-card-css].mari-about-me-popout { background: radial-gradient(120% 120% at 50% 0%, #241a3a 0%, #14101f 70%); border: 1px solid rgba(180, 120, 255, 0.45); border-radius: 1.25rem; } [data-card-css] .mari-about-me-banner { background: linear-gradient(90deg, #b478ff, #ff77c6); } [data-card-css] .mari-about-me-name { color: #e9d8ff; } }


<a id="what-you-cannot-style"></a>

## Ce que tu ne peux pas styliser

Le nettoyage retire ces éléments pour des raisons de sécurité.

| Bloqué | Pourquoi |
| --- | --- |
| `url(https://...)` | Aucune requête réseau, pour éviter le pistage et les fuites de données. Seul `url(data:...)` est autorisé, pour les images et les polices intégrées. |
| `@font-face` avec des URL externes | Seules les sources de police en `data:` sont conservées. Le nom de la famille est renommé, pour qu'il ne puisse pas remplacer les polices de l'application. |
| `@import` | Aucun chargement de feuille de style externe. |
| Sélecteurs `:has()` | Ils ne peuvent pas sonder des éléments hors du chat. |
| Règles imbriquées et sélecteurs qui commencent par `~` ou `+` | Supprimés, pour que le CSS de fiche ne puisse pas sortir de sa portée. Écris des sélecteurs ordinaires. |
| HTML dans `content:` | Le texte décoratif est autorisé, mais `<` et `>` sont retirés et le texte est limité à 200 caractères. `attr()` et `counter()` sont autorisés. |
| `position: fixed` | Réécrit en `position: absolute`, donc pas de surcouche plein écran. |
| `!important` | Retiré, pour que le CSS de fiche ne puisse pas forcer le remplacement des styles de l'application. |
| Jetons du thème de l'application | Les jetons comme `--primary` et `--background` sont retirés, pour que le CSS de fiche ne puisse pas repeindre l'interface de l'application. |

Le CSS de fiche l'emporte sur les styles de message de l'application pour les couleurs, les arrière-plans, les bordures et les polices à l'intérieur du chat. Il ne peut rien contre ce que le nettoyage retire, contre tout ce qui se trouve hors du chat, ni contre les styles que l'application applique en ligne ou avec `!important`. La couleur et la taille de police globales du chat, définies dans **Settings**, en sont un exemple.

Pour une police personnalisée, intègre-la avec un URI `data:` en base64, ou utilise une pile de polices système.

@font-face { font-family: "MyFont"; src: url(data:font/woff2;base64,d09GMgAB...) format("woff2"); }


## Conseils

1. Stylise la bulle avec `.mari-message-bubble`, pas avec `[data-card-css]`. La ligne occupe toute la largeur : un arrière-plan posé dessus reste presque invisible.
2. Utilise des couleurs `rgba()` pour qu'elles s'accordent avec les thèmes clairs comme sombres.
3. Garde des animations discrètes. Préfère `transition` à une `animation` lourde sur les appareils modestes. Anime `opacity`, pas `box-shadow`, qui redessine l'élément à chaque image.
4. Utilise `@media (max-width: 768px)` pour les téléphones.
5. Ne dépends pas des classes utilitaires. Seules les accroches `mari-*` documentées sont stables.

## Vitrine : Eldritch Grimoire

Cet exemple touche les principales accroches, dans chaque mode : des noms lumineux, un texte serif assorti, un avatar cerclé, une bulle de roleplay animée avec une rune dans le coin, une bulle de Conversation, un indicateur de saisie inquiétant et la surface de jeu. Colle-le dans **Creator Notes**, puis choisis un mode de Card Theming dans **Chat Settings → Characters** (ou **Party** en Game Mode). Choisis **Chat** pour la surface de jeu. Change les couleurs, le glyphe `content` et les polices pour en faire ta création.


## Créer du CSS de fiche avec l'aide d'une IA

Pour ne pas écrire le CSS à la main, donne le prompt ci-dessous à un assistant IA. Complète la description de ton personnage à l'endroit indiqué.

I'm creating a character card for Marinara Engine (an AI chat app). The card has a "Creator Notes" field where I can embed <style> blocks. Write CSS that themes the character's messages.

Character concept: [describe the aesthetic]

Technical constraints:

use normal class selectors for things inside it.

corners / shadow); [data-card-css] .mari-message-content = the text; [data-card-css] .mari-message-name = the display name; [data-card-css] .mari-message-avatar button = the clickable avatar (non-clickable fallback: .mari-message-avatar > div; in roleplay the button sits under an extra glow-wrapper div).

[data-card-css] .mari-typing-dots span.

[data-card-css].mari-about-me-popout (the card), the banner via .mari-about-me-banner, the avatar via .mari-about-me-avatar > div, the name via .mari-about-me-name, the box via .mari-about-me-box, and the body via .mari-about-me-text. Wrap these in @chat-mode conversation { ... }.

@chat-mode conversation { ... }; CSS outside applies everywhere.

(--primary, etc.). position: fixed becomes absolute. Use url(data:...) and rgba() colors.

(roleplay rows never carry it); there, use [data-card-css]:not([data-grouped]) for first-in-group.

Output a single <style> block I can paste into Creator Notes.


## Guides associés

- [Réglages d'apparence](appearance-settings.md)
- [Thèmes CSS personnalisés (bibliothèque de thèmes)](custom-css-themes.md)
- [Créer et modifier des personnages](../characters/creating-and-editing-characters.md)