diff --git a/src/background/background.js b/src/background/background.js index dd5ac3dc12c3ec6826639a7cffed4237cad14330..9b1c26eef5887bf1c05caaa927a5a922c7174b2d 100644 --- a/src/background/background.js +++ b/src/background/background.js @@ -322,25 +322,25 @@ function showInstructionPopup(details) { popup.style.transform = "translate(-50%, -50%)"; popup.style.backgroundColor = "#a08e9f"; popup.style.color = "#323046"; - popup.style.padding = "20px"; + popup.style.padding = "12px"; popup.style.borderRadius = "10px"; popup.style.boxShadow = "0 2px 10px rgba(0, 0, 0, 0.3)"; popup.style.zIndex = "10000"; popup.style.fontFamily = "Luciole"; - popup.style.fontSize = "14px"; + popup.style.fontSize = "16px"; popup.style.width = "300px"; popup.style.textAlign = "center"; popup.innerHTML = \` - <h5 style="color: #fff; font-weight: bold; margin-top: 0;">🔑 Connexion à l'extension</h5> - <p style="margin: 15px 0;"> - Après avoir renseigné vos identifiants, cliquez sur + <h5 style="color: #fff; font-weight: bold; margin-top: 2px;">Connexion à l'extension</h5> + <p style="margin: 8px 0;"> + Après avoir renseigné vos identifiants, veuillez cliquer sur <strong>"Se connecter avec BaLex"</strong>. </p> <button id="close-popup-btn" style=" width: 100%; margin-top: 15px; - padding: 10px; + padding: 8px; border: none; background-color: #8d5c70; color: #fbfcfc; diff --git a/src/utils/highlighting.js b/src/utils/highlighting.js index 3a9829850c6793efaed40504cf5c789f6616adb6..bc9386d34abe0529ae758c876681ed9273445b1e 100644 --- a/src/utils/highlighting.js +++ b/src/utils/highlighting.js @@ -134,18 +134,18 @@ browser.runtime.onMessage.addListener((message) => { // Fonction asynchrone pour mettre à jour le style d'un élément surligné en fonction des lexiques qui le concernent async function updateHighlightStyle(span, lexIds) { if (!lexIds || lexIds.length === 0) { - span.style.backgroundColor = "rgba(255, 255, 0, 0.25)"; + span.style.backgroundColor = "rgba(255, 255, 0, 0.3)"; span.style.backgroundImage = ""; return; } if (lexIds.length === 1) { const hexColor = await getColorForLexicon(lexIds[0]); - const rgbaColor = hexToRgba(hexColor, 0.25); + const rgbaColor = hexToRgba(hexColor, 0.3); span.style.backgroundColor = rgbaColor; span.style.backgroundImage = ""; } else { const hexColors = await Promise.all(lexIds.map(id => getColorForLexicon(id))); - const colors = hexColors.map(hex => hexToRgba(hex, 0.25)); + const colors = hexColors.map(hex => hexToRgba(hex, 0.3)); const n = colors.length; let stops = []; for (let i = 0; i < n; i++) { @@ -407,7 +407,7 @@ browser.runtime.onMessage.addListener((message) => { span.setAttribute('data-lexicons', JSON.stringify(matchedLexiconIds)); if (matchedLexiconIds.length === 0) { - span.style.backgroundColor = "rgba(255, 255, 0, 0.25)"; + span.style.backgroundColor = "rgba(255, 255, 0, 0.3)"; } else { updateHighlightStyle(span, matchedLexiconIds); }