[VER] Story style sheet

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcstory",
-  "version": "4.3.2",
+  "version": "4.3.4",
   "description": "Editeur de cartes narratives",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

page/css-dialog.html

@@ -7,11 +7,14 @@ <h2 data-help="helpStyleSheet medium">
 <select>
   <option value="">exemples</option>
   <option value="cssColor">
-    Couleur
+    Couleur du titre
   </option>
   <option value='cssMarianne'>
     Police Marianne
   </option>
+  <option value='cssRoundButton'>
+    Boutons ronds
+  </option>
 </select>
 
 <textarea class="css"></textarea>

page/onglet-miseenforme.css

@@ -101,6 +101,7 @@
   max-height: calc(100dvh - 15em);
   display: block;
   font-size: 1em;
+  tab-size: 2;
 }
 .ol-ext-dialog.dialogCSS pre[aria-hidden="true"] {
   display: none;

page/onglet-miseenforme.html

@@ -17,7 +17,7 @@ <h2 data-help="infoMiseEnForme small">
             <!-- <label>Couleur boutons</label> <input data-attr="color-txt" />-->
           </div>
           <div data-attr="css">
-            <button class="button button-colored" disabled>
+            <button class="button button-colored">
               Ajouter une feuille de style
             </button>
           </div>

src/i18n.fr.js

@@ -117,11 +117,19 @@ Les indicateurs sont des valeurs séparées par des virgules. Vous pouvez alors
 helpStyleSheet: `
 # Ajouter une feuille de style
 ----
-*Ajouter dus tyle à vos carte*
+*Ajouter du style à vos carte*
 
-Vous pouvez ajouter une feuille de style au [format Sass](https://fr.wikipedia.org/wiki/Sass_%28langage%29) qui s'appliquera à vos carte.
-Cela vous permet de modifier la couleur, la forme, la police de caractère des élements de la carte (voir son comportement).
+Vous pouvez ajouter une feuille de style au [format CSS](https://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade) qui s'appliquera à vos carte.
+Cela vous permet de modifier la couleur, la forme, la police de caractère des élements de la carte (utiliser le menu pour avoir des exemples dans la boîte de dialogue).
 Attention, néanmoins, une mauvaise utilisation peut engendrer des comportements non prévus qui peuvent gèner l'utilisation de la carte au final.
+
+Vous pouvez utiliser les selecteurs \`story\` pour appliquer le style à la fenêtre de carte, \`dialog\` pour ne l'appliquer qu'aux dialogues ou \`body\` pour l'appliquer aux deux.
+\`\`\`CSS
+/* Afficher le texte en rouge (carte et dialogues) */
+body {
+  color: red;
+}
+\`\`\`
 `,
 	infoShare: `# Partage`,
 	loadCarte: `Charger une carte`,

src/menu/onglet-miseenforme.js

@@ -15,28 +15,40 @@ import dlogCSS from '../../page/css-dialog.html';
 
 /* Examples */
 i18n.set('fr', {
-  cssColor: `// variables scss
-$primary-color: #369;
-$back-color: #ccf;
-
-color: $primary-color;
-background-color: $back-color;
-.title > img {
-  color: $back-color;
+  cssColor: `/* Titres en rouge sur fond noir + bords blancs */
+story .title {
+  color: #800;
+  text-shadow: 1px 1px #fff, 1px -1px #fff, -1px 1px #fff, -1px -1px #fff;
+  background-color: #000;
+}
+story .title h1,
+story .title h2 {
+  padding-left: 2px;
+}
+/* Couleur de fond du logo */
+story .title > img {
+  color: #000;
 }
 `,
 cssMarianne: `// Font definition
-@font-face { font-family: Marianne; font-style: normal; font-weight: 300; src: url(./fonts/Marianne-Light.woff2) format("woff2"),url(./fonts/Marianne-Light.woff) format("woff") }
-@font-face { font-family: Marianne; font-style: italic; font-weight: 300; src: url(./fonts/Marianne-Light_Italic.woff2) format("woff2"),url(./fonts/Marianne-Light_Italic.woff) format("woff") }
-@font-face { font-family: Marianne; font-style: normal; font-weight: 400; src: url(./fonts/Marianne-Regular.woff2) format("woff2"),url(./fonts/Marianne-Regular.woff) format("woff") }
-@font-face { font-family: Marianne; font-style: italic; font-weight: 400; src: url(./fonts/Marianne-Regular_Italic.woff2) format("woff2"),url(./fonts/Marianne-Regular_Italic.woff) format("woff") }
-@font-face { font-family: Marianne; font-style: normal; font-weight: 500; src: url(./fonts/Marianne-Medium.woff2) format("woff2"),url(./fonts/Marianne-Medium.woff) format("woff") }
-@font-face { font-family: Marianne; font-style: italic; font-weight: 500; src: url(./fonts/Marianne-Medium_Italic.woff2) format("woff2"),url(./fonts/Marianne-Medium_Italic.woff) format("woff") }
-@font-face { font-family: Marianne; font-style: normal; font-weight: 700; src: url(./fonts/Marianne-Bold.woff2) format("woff2"),url(./fonts/Marianne-Bold.woff) format("woff") }
-@font-face { font-family: Marianne; font-style: italic; font-weight: 700; src: url(./fonts/Marianne-Bold_Italic.woff2) format("woff2"),url(./fonts/Marianne-Bold_Italic.woff) format("woff") }
-
-font-family: Marianne;
-`
+@font-face { font-family: Marianne; font-style: normal; font-weight: 300; src: url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Light.woff2) format("woff2"),url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Light.woff) format("woff") }
+@font-face { font-family: Marianne; font-style: italic; font-weight: 300; src: url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Light_Italic.woff2) format("woff2"),url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Light_Italic.woff) format("woff") }
+@font-face { font-family: Marianne; font-style: normal; font-weight: 400; src: url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Regular.woff2) format("woff2"),url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Regular.woff) format("woff") }
+@font-face { font-family: Marianne; font-style: italic; font-weight: 400; src: url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Regular_Italic.woff2) format("woff2"),url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Regular_Italic.woff) format("woff") }
+@font-face { font-family: Marianne; font-style: normal; font-weight: 500; src: url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Medium.woff2) format("woff2"),url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Medium.woff) format("woff") }
+@font-face { font-family: Marianne; font-style: italic; font-weight: 500; src: url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Medium_Italic.woff2) format("woff2"),url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Medium_Italic.woff) format("woff") }
+@font-face { font-family: Marianne; font-style: normal; font-weight: 700; src: url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Bold.woff2) format("woff2"),url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Bold.woff) format("woff") }
+@font-face { font-family: Marianne; font-style: italic; font-weight: 700; src: url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Bold_Italic.woff2) format("woff2"),url(https://ignf-ma-carte.github.io/mcviewer/fonts/Marianne-Bold_Italic.woff) format("woff") }
+
+body {
+  font-family: Marianne;
+}
+`,
+cssRoundButton: `/* Boutons ronds */
+story .ol-control,
+story .ol-control button {
+  border-radius: 1em;
+}`
 });
 
 /* Ajout onglet au Menu */
@@ -183,7 +195,7 @@ ongletMEF.querySelector('[data-attr="css"] button').addEventListener('click', ()
   helpData(content);
   // Story value
   content.querySelector('.css').value = story.get('css') || '';
-  // Exmaples
+  // Examples
   content.querySelectorAll('select option').forEach(o => {
     o.value = _T(o.value)
   })
@@ -192,6 +204,19 @@ ongletMEF.querySelector('[data-attr="css"] button').addEventListener('click', ()
     // reset
     e.target.value = ""
   })
+  // Prevent tab
+  content.querySelector('textarea').addEventListener('keydown', e => {
+    if (e.keyCode == 9) {
+      const start = e.target.selectionStart;
+      const end = e.target.selectionEnd;
+      // set textarea value to: text before caret + tab + text after caret
+      e.target.value = e.target.value.substring(0, start) + '\t' + e.target.value.substring(end);
+      // put caret at right position again
+      e.target.selectionStart = e.target.selectionEnd = start + 1;
+
+      e.preventDefault();
+    }
+  })
 })