Thèmes CSS personnalisés (Theme Library)

Un thème CSS personnalisé repeint l'ensemble de Marinara. Utilise la Theme Library (bibliothèque de thèmes) pour créer, importer, exporter et changer de thème. Ce guide liste aussi les variables et les classes CSS qu'un thème peut utiliser, et explique comment les thèmes cohabitent avec le CSS de fiche. Pour un changement rapide sans CSS, voir Styles de fenêtres de chat prêts à utiliser.

Avant de commencer : si tu ouvres Marinara depuis un autre appareil, comme un téléphone, le serveur a besoin d'un secret d'administration avant que tu puisses créer, modifier, importer, activer ou supprimer des thèmes. Sur l'ordinateur qui fait tourner le serveur, aucun secret n'est nécessaire.

1. Sur le serveur, définis ADMIN_SECRET dans le fichier .env.
2. Dans l'application, ouvre Settings → Advanced → Admin Access (Paramètres → Avancé → Accès administrateur) et saisis la même valeur.

Voir la Référence de configuration du serveur et le guide d'accès à distance. Pour passer à un thème que quelqu'un t'a donné, va à Activer un thème.

Ce qu'est un thème personnalisé

Le CSS, abréviation de Cascading Style Sheets, est le code qui définit les couleurs, les bordures et les espacements. Un thème est un bloc de CSS qui peut changer l'arrière-plan de la page, la couleur d'accentuation, les cartes, les bordures, le texte et plus encore.

Les thèmes vivent dans la Theme Library, sur ton serveur Marinara : ils se synchronisent donc sur tous les appareils connectés au même serveur. La plupart des autres réglages d'apparence restent sur un seul appareil. Un seul thème peut être actif à la fois, et tu peux en garder autant que tu veux.

Où trouver la Theme Library

1. Ouvre Settings.
2. Ouvre l'onglet Addons.
3. Repère la section Theme Library.

Créer un thème

1. Dans la section Theme Library, clique sur Create Theme (créer un thème).
2. Saisis un nom dans le champ du nom (il affiche "Theme name...").
3. Écris ou colle ton CSS dans la grande zone de texte.
4. Laisse Preview (aperçu) activé pour voir tes changements en direct pendant que tu tapes. Désactive-le pour arrêter l'aperçu en direct.
5. Clique sur Save (enregistrer).

Un nouveau thème part d'un modèle qui liste les variables courantes sous forme d'exemples mis en commentaire. Retire les marques de commentaire et donne tes propres valeurs. Un thème tout neuf est activé quand tu l'enregistres, et tu vois : Theme "My Theme" saved and activated.

Pour modifier un thème plus tard, retrouve-le dans Installed Themes (thèmes installés), clique sur l'icône de code (infobulle Edit theme CSS), fais tes modifications et clique sur Save. La modification ne change pas le thème actif.

Importer et exporter des thèmes

Pour importer un thème :

1. Clique sur Import File (importer un fichier) dans la section Theme Library.
2. Choisis un fichier .css ou .json.
3. Lis le message. Il indique combien de thèmes ont été importés ou ignorés, et combien ont échoué.

Un fichier .css devient un seul thème, qui porte le nom du fichier. Un fichier .json peut contenir un ou plusieurs thèmes. Importe tel quel un fichier exporté depuis Marinara, ou écris-en un petit toi-même :

{ "name": "My Theme", "css": "..." }

Les thèmes importés ne s'activent pas d'eux-mêmes. Un thème qui a le même nom et le même CSS qu'un thème déjà présent sur le serveur est ignoré.

Pour exporter un thème, clique sur l'icône de téléversement (infobulle Export theme) sur sa ligne dans Installed Themes. Marinara télécharge un fichier .json que tu peux importer ailleurs.

Activer un thème

La liste Installed Themes montre tous les thèmes, avec une entrée Default Theme (thème par défaut) en haut.

1. Clique sur le nom d'un thème pour l'activer. Une coche signale le thème actif.
2. Clique sur Default Theme pour désactiver le thème personnalisé et revenir à l'apparence intégrée.

Le bouton Reset Appearance (réinitialiser l'apparence), en haut de App Style (style de l'application) dans Settings → Appearance (Paramètres → Apparence), désactive lui aussi le thème actif.

Pour supprimer un thème, clique sur l'icône de corbeille (infobulle Remove theme) et confirme dans la boîte de dialogue Delete Theme. Son CSS est alors supprimé définitivement du serveur.

Si ça n'a pas marché : quand l'application a une drôle d'allure, vérifie à la fois le thème actif et tout CSS de fiche présent dans le chat. Voir Les thèmes et le CSS de fiche.

Styles de fenêtres de chat prêts à utiliser

Avant de commencer : aucun CSS n'est nécessaire.

1. Ouvre Settings → Appearance → App (Paramètres → Apparence → Application).
2. En bas de App Style, repère Chat widget style (style des widgets du chat).
3. Choisis un style.

Chaque style a sa propre police, fonctionne en mode clair et sombre, et habille ensemble les boutons, les fenêtres et les sections repliables. Choisir un style réinitialise Font (police), Shape (forme) et les trois couleurs. Les positions de tes fenêtres ne changent pas.

Tu peux changer ces éléments séparément :

• Font et Shape suivent le style (Preset font, Preset shape) jusqu'à ce que tu en choisisses d'autres.
• Border & Buttons Color (couleur des bordures et des boutons) change les contours et les icônes des boutons. Les icônes utilisent la première couleur d'un dégradé.
• Background Color (couleur de fond) remplit les boutons, les fenêtres, les sections repliables et les champs modifiables.
• Text Color (couleur du texte) change le texte des widgets. Les dégradés apparaissent sur les titres et les étiquettes, et les champs modifiables utilisent la première couleur.

Chaque couleur propose un sélecteur de couleur pour une couleur unie et une option de dégradé. Reset color (réinitialiser la couleur), à côté d'un contrôle, revient aux couleurs claires ou sombres du style. Les écussons décoratifs gardent leurs couleurs d'origine.

Étendre le style au chat

Trois interrupteurs sous les sélecteurs de couleur étendent le style. Chacun est désactivé au départ et fonctionne seul. En désactiver un rétablit le style habituel du chat pour cette partie, et choisir un autre style conserve tes choix d'interrupteurs.

Les boutons d'historique, Load More (en charger plus) et Show older (afficher les plus anciens), suivent les interrupteurs comme les autres contrôles du chat. En Game Mode, les interrupteurs s'appliquent aussi aux apartés, aux widgets du HUD, au panneau de carte, aux fiches de personnage, aux journaux, à l'inventaire, aux panneaux de combat et aux boîtes de dialogue. Professor Mari peut aussi créer des thèmes personnalisés pour ces zones.

Un thème personnalisé peut toujours remplacer les styles. Les variables de fenêtres et de tiroirs ci-dessous ont la priorité sur les couleurs du style. Utilise --mari-window-font-family pour la police des fenêtres, --mari-drawer-radius pour les coins des sections et --mari-window-ornament: none pour masquer l'ornement du titre. Pour retirer toute la décoration du style, choisis d'abord Default.

Les thèmes et le CSS de fiche

Marinara propose deux façons d'ajouter du CSS personnalisé, et les deux peuvent être actives en même temps.

• Un thème personnalisé repeint toute l'application. Il a le droit de redéfinir les variables fondamentales de Marinara, d'employer !important et d'employer position: fixed.
• Le CSS de fiche est intégré dans une fiche de personnage ou de persona et s'active chat par chat. Il est nettoyé plus sévèrement : il ne peut pas redéfinir les variables fondamentales, !important est retiré, et position: fixed devient position: absolute. Il met en forme les messages du chat, pas l'application entière. Voir le Guide du CSS de fiche.

Limites de taille et de nom

Un nom de thème peut atteindre 200 caractères. Le CSS peut peser jusqu'à 256 Kio, mesurés en octets UTF-8. Au-delà, le thème est refusé à l'enregistrement comme à l'import. Le CSS des thèmes personnalisés est aussi nettoyé avant de s'appliquer : les styles qui chargent un fichier depuis un autre site web ne fonctionnent pas. Intègre plutôt une image ou une police sous forme d'URI data:.

La référence des variables CSS

L'éditeur de thème contient une section dépliable CSS Variable Reference (référence des variables CSS). Clique dessus pour voir les variables les plus utiles à redéfinir. Un thème modifie l'application en donnant une valeur à ces variables dans un bloc :root. La référence liste ces variables :

Un thème peut définir n'importe quelle variable CSS utilisée par Marinara, pas seulement celles-ci. Certains effets ont leurs propres variables. Par exemple, --marinara-theme-accent-pulse: enabled demande l'animation de pulsation de l'accentuation.

Habiller les fenêtres et tiroirs du chat

Sur ordinateur, Chat Settings (réglages du chat) s'ouvre dans une fenêtre déplaçable. Ses sections repliables sont appelées drawers (tiroirs). Un tiroir peut se détacher dans sa propre fenêtre, puis se réduire à un petit bouton déplaçable, appelé bubble (bulle).

D'autres outils du chat utilisent aussi ces fenêtres et boutons, notamment Game controls, Session, Volume, Game Assets, les chats connectés et les contrôles de packages. Sur téléphone, la plupart des fenêtres s'ouvrent en panneaux sur toute la largeur ; Echo Chamber reste une fenêtre compacte que tu peux déplacer et redimensionner. Les outils sortis de Chat Settings figurent dans le menu déplaçable à trois points Chat tools (outils du chat) ; les boutons des trackers restent séparés.

Les classes, attributs de données et variables ci-dessous permettent à un thème d'habiller ces éléments ensemble. Les règles de ton thème remplacent les valeurs par défaut sans !important.

Classes

Attributs de données

• data-window identifie une fenêtre et sa bulle : chat-settings, trackers, les fenêtres de contrôles control:game, control:session, control:volume, control:assets, control:connected-chat, control:package:<package> et control:beholder:<package>, et drawer:<window>:<drawer> pour un tiroir détaché, par exemple drawer:chat-settings:chat-name.
• data-drawer identifie un tiroir, par exemple chat-name. Certains noms commencent par le mode du chat, comme roleplay-agents ou conversation-agents. Les trackers utilisent tracker-world, tracker-persona, tracker-characters, tracker-quests, tracker-inventory, tracker-custom et agent-activity.
• data-presentation vaut "window" sur une fenêtre d'ordinateur ou "sheet" sur un panneau de téléphone.
• data-pinned et data-locked valent "true" quand la fenêtre est épinglée ou verrouillée.
• data-window-control identifie chaque bouton de la barre de titre : "pin", "lock", "close" ou "put-back". Un bouton d'épinglage ou de verrouillage enfoncé possède aussi aria-pressed="true".
• data-chat-settings-control identifie les boutons supplémentaires de la barre de titre de Chat Settings : "reset-view", "favorite-layout" et "tracker-panel". L'étoile favorite possède aria-pressed="true" et une icône remplie quand la disposition actuelle correspond à la favorite enregistrée.
• data-edge vaut "n", "s", "e", "w", "ne", "nw", "se" ou "sw" sur chaque poignée de redimensionnement.
• Le bouton de bascule d'un tiroir ouvert, dans .mari-drawer__header, possède aria-expanded="true".
• data-drawer-control="pop-out" marque le bouton de détachement d'un tiroir.
• data-outside="true" marque un aperçu de glissement assez éloigné de sa fenêtre pour se détacher au relâchement.
• data-axis vaut "x" sur un guide d'alignement vertical et "y" sur un guide horizontal.
• data-detached vaut "true" quand un tiroir apparaît dans sa propre fenêtre, sur cette fenêtre et sur le tiroir qu'elle contient. La fenêtre d'un tiroir détaché est identifiée par data-window="drawer:<window>:<drawer>", par exemple data-window="drawer:chat-settings:chat-name", et data-drawer-host indique sa fenêtre d'origine.
• data-dragging vaut "true" sur un tiroir pendant le déplacement de son titre, et data-drop-target vaut "true" sur une fenêtre quand un tiroir détaché est maintenu au-dessus, prêt à y revenir.
• Une bulle possède le data-window de sa fenêtre et data-minimized="true", par exemple .mari-window-bubble[data-window="control:volume"]. Les fenêtres de contrôles sont nommées control:game, control:session, control:volume, control:assets, control:connected-chat, control:package:<package> et control:beholder:<package>. data-dragging vaut "true" sur une bulle pendant son déplacement. Une bulle qui affiche un résumé en direct à la place de son icône, comme un tracker World State réduit, possède data-banner="true" et s'élargit à la taille du résumé.
• Une bulle verrouillée possède data-locked="true", y compris le bouton Chat Settings. Elle ouvre toujours sa fenêtre, mais ne peut pas être déplacée tant que la fenêtre n'est pas déverrouillée. Utilise .mari-window-bubble[data-locked="true"] pour donner un aspect distinct à ces boutons.
• Sur téléphone, les fenêtres possèdent data-presentation="sheet", comme leurs bulles, qui sont un peu plus grandes. La bulle de Tracker Panel est .mari-window-bubble[data-tracker-panel-toggle="bubble"].
• Le bouton Chat Settings est aussi une bulle : .mari-window-bubble[data-chat-settings-button], avec data-open="true" quand Chat Settings est ouvert.
• Une section détachée se réduit à une bulle avec data-drawer-host (sa fenêtre d'origine), et le bouton Put back (remettre en place) de sa fenêtre est [data-window-control="put-back"].

Variables

Chaque variable reprend les couleurs communes des contrôles du chat si elle n'est pas définie. Un thème ne doit donc définir que celles qu'il veut changer.

Définis une variable dans :root pour changer toutes les fenêtres, ou sur un sélecteur pour en changer une :

:root {
  --mari-window-radius: 0.5rem;
  --mari-window-bubble-bg: #3b0764;
}

[data-window="chat-settings"] .mari-drawer[data-drawer="chat-name"] {
  --mari-drawer-border: transparent;
}

Habiller les messages, les champs de saisie et les contrôles du chat

Les trois interrupteurs Apply preset permettent aussi à un thème personnalisé d'utiliser le design des widgets dans le reste du chat. Un thème peut remplacer chaque partie avec les variables ci-dessous. Demande à Professor Mari un thème de chat assorti si tu préfères ne pas écrire le CSS toi-même.

Par exemple, avec Apply preset font et Apply preset colors activés :

:root {
  --mari-chat-font-family: Georgia, serif;
  --mari-chat-bg: #251e29;
  --mari-chat-text: #f4e8dc;
  --mari-chat-border: linear-gradient(100deg, #d6aa66, #dda0b2);
}

Les variables non définies suivent les réglages et le preset des widgets. L'interrupteur correspondant doit être activé pour que ces variables s'appliquent via le style intégré. Les messages Conversation gardent leur propre forme même quand Apply preset shape est activé. Les thèmes personnalisés peuvent aussi cibler directement les classes ; garde les contours de focus, les menus et le contenu des messages hors de tout découpage décoratif.

Sur téléphone, le menu à trois points se déploie en boutons ronds. Son déclencheur est [data-chat-tools-menu-button], la pile ouverte est [data-chat-tools-menu], et chaque élément de liste porte data-chat-tools-menu-item avec l'ID de sa fenêtre. Les boutons d'outils utilisent .mari-window-bubble.mari-chat-tools-button et data-chat-tools-menu-tool avec ce même ID. La pile n'a pas de cadre de fenêtre ; ses boutons suivent les couleurs des widgets et la taille des boutons, indépendamment des trois interrupteurs pour le reste du chat, tout en gardant leur forme ronde.

Guides associés

• Guide du CSS de fiche
• Réglages d'apparence
• Référence de configuration du serveur
• Accès à distance : connexion et liste d'autorisation d'IP