diff --git a/src/css/custom_context_menu.css b/src/css/custom_context_menu.css index 82c76a1ee36414570a46da8912c421ecb9214409..11bbfab77be8d6353d00d716da320a16f27b4f09 100644 --- a/src/css/custom_context_menu.css +++ b/src/css/custom_context_menu.css @@ -1,4 +1,4 @@ - +/* Import de la police Luciole */ @font-face { font-family: 'Luciole'; src: url('../fonts/Luciole-Regular/Luciole-Regular.woff2') format('woff2'), @@ -7,7 +7,7 @@ font-style: normal; } -/* === Conteneur principal du menu contextuel === */ +/* Conteneur principal du menu contextuel */ #whiteBox { position: absolute; display: none; @@ -23,7 +23,7 @@ z-index: 10000; } -/* === Titre/texte indiquant le mot sélectionné === */ +/* Mot sélectionné */ #whiteBox #selectedWord { margin: 0; margin-bottom: 8px; @@ -34,7 +34,7 @@ text-align: center; } -/* === Conteneur des icônes === */ +/* Icônes */ #whiteBox .icon-container { position: relative; display: flex; @@ -45,13 +45,10 @@ margin: 0; padding: 0; } - #whiteBox .icon-container:hover { background-color: rgba(255, 255, 255, 0.1); border-radius: 6px; } - -/* === Les icônes elles-mêmes === */ #whiteBox .icon { width: 40px; height: 40px; @@ -59,12 +56,11 @@ margin : 0 auto; display: block; } - #whiteBox .icon:hover { transform: scale(1.15); } -/* === Message (tooltips) === */ +/* Messages d'information (tooltips) */ #whiteBox .tooltip { visibility: hidden; background-color: #333; @@ -82,13 +78,12 @@ transition: opacity 0.2s ease, visibility 0.2s ease; z-index: 1000; } - #whiteBox .icon-container:hover .tooltip { visibility: visible; opacity: 1; } -/* === Style global du lexiconPicker === */ +/* Style du sélectionneur de lexiques */ #lexiconPicker { position: absolute; z-index: 10000; @@ -107,6 +102,11 @@ justify-content: center; gap: 2px; } +#lexiconPicker p { + font-size: 12px; + font-weight: bold; + text-align: center; +} /* Style pour les icônes de lexique */ #lexiconPicker .lexicon-option { @@ -122,18 +122,14 @@ transition: border 0.2s ease; flex: 0 0 auto; } - /* Effet au survol pour les icônes */ #lexiconPicker .lexicon-option:hover { border: 2px solid #6e76c7; } - -/* Classe pour indiquer qu'une icône est sélectionnée */ +/* Indiquer qu'une icône est sélectionnée */ #lexiconPicker .lexicon-option.selected { border: 2px solid #323046; } - -/* Style pour le cercle de couleur (icône interne) */ #lexiconPicker .color-circle { width: 28px; height: 28px; @@ -157,10 +153,3 @@ flex-basis: 100%; margin-top: 8px; } - -#lexiconPicker p { - font-size: 12px; - font-weight: bold; - text-align: center; -} - diff --git a/src/css/plugin.css b/src/css/plugin.css index 2bd8f350c3d68bd5a5328f97563469301032a304..6d8a5bd7eabc3e9efa15602cf54db1a5e29de149 100644 --- a/src/css/plugin.css +++ b/src/css/plugin.css @@ -1,4 +1,4 @@ - +/* Import de la police Luciole */ @font-face { font-family: 'Luciole'; src: url('../fonts/Luciole-Regular/Luciole-Regular.woff2') format('woff2'), @@ -7,41 +7,7 @@ font-style: normal; } -#extension-notification { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: rgba(0, 0, 0, 0.85); - color: white; - padding: 15px; - border-radius: 8px; - text-align: center; - width: 80%; - max-width: 250px; - z-index: 1000; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); - transition: visibility 0.3s ease; -} -#extension-notification.hidden { - visibility: hidden; -} - -#close-notification { - margin-top: 10px; - padding: 5px 10px; - background-color: #8d5c70; - color: white; - border: none; - cursor: pointer; - border-radius: 5px; - font-weight: bold; -} -#close-notification:hover { - background-color: #dddedd; - color: #8d5c70; -} - +/* Styles généraux */ body { font-family: Luciole; font-size: medium; @@ -52,6 +18,9 @@ body { border-radius: 10px; width: 200px; } +.hidden { + display: none; +} button { font-family: Luciole; width: 100%; @@ -70,6 +39,20 @@ button:hover { background-color: #dddedd; color: #8d5c70; } + +/* En-tête de l'extension */ +#extension-name { + font-family: Luciole; + text-align: center; + font-size: 23px; + font-weight: bold; + padding: 5px; + color: #8d5c70; + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: white; +} + +/* Bouton de connexion */ #auth-button { width: auto; display: inline-flex; @@ -103,16 +86,8 @@ button:hover { justify-content: center; margin-bottom: 10px; } -#extension-name { - font-family: Luciole; - text-align: center; - font-size: 23px; - font-weight: bold; - padding: 5px; - color: #8d5c70; - -webkit-text-stroke-width: 1px; - -webkit-text-stroke-color: white; -} + +/* Options du menu de l'extension */ .option-container { background: #444; padding: 8px; @@ -156,6 +131,46 @@ button:hover { background-color: #8d5c70; border-color: #8d5c70; } + +/* Bouton pour ouvrir les statistiques */ +#open-stats { + padding: 6px; + font-weight: lighter; + width: auto; + display: block; + margin: 0 auto; + margin-bottom: 10px; + background-color: #525877; + color: white; + border: 2px solid #8d5c70; + border-radius: 8px; +} + +/* Bloc d'options d'ajout automatique */ +.option-row.auto-add-row { + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 12px; + margin-bottom: 0; + background: transparent; + border-bottom: 1px solid #555; +} +.option-row.auto-add-row span { + font-size: 14px; + font-weight: lighter; +} +.option-row.stopwords { + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 13px; + font-weight: lighter; +} + +/* Bouton pour afficher/masquer le bloc d'options d'ajout automatique et la sélection d'options*/ .toggle-switch { position: absolute; display: inline-block; @@ -197,6 +212,8 @@ input:checked + .slider { input:checked + .slider:before { transform: translateX(14px); } + +/* Conteneur pour le seuil d'ajout automatique */ .threshold-container input[type="number"] { width: 45px; height: 45px; @@ -209,21 +226,8 @@ input:checked + .slider:before { background: #fff; color: #333; } -#save-options { - border: none; - background: #8d5c70; - border-radius: 6px; - color: white; - padding: 8px 12px; - font-size: 14px; - cursor: pointer; - transition: background 0.3s, transform 0.2s; -} -#save-options:hover { - background: #ccc; - color: #8d5c70; - transform: translateY(-2px); -} + +/* Sélection des langues */ .language-selection { display: flex; flex-wrap: wrap; @@ -249,49 +253,25 @@ input:checked + .slider:before { color: white; border-color: #8d5c70; } -.option-row.auto-add-row { - position: relative; - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px 12px; - margin-bottom: 0; - background: transparent; - border-bottom: 1px solid #555; -} -.option-row.auto-add-row span { - font-size: 14px; - font-weight: lighter; -} -.option-row.stopwords { - position: relative; - display: flex; - align-items: center; - justify-content: space-between; - font-size: 13px; - font-weight: lighter; -} -#open-stats { - padding: 6px; - font-weight: lighter; - width: auto; - display: block; - margin: 0 auto; - margin-bottom: 10px; - background-color: #525877; + +/* Bouton pour enregistrer les options */ +#save-options { + border: none; + background: #8d5c70; + border-radius: 6px; color: white; - border: 2px solid #8d5c70; - border-radius: 8px; -} -.hidden { - display: none; + padding: 8px 12px; + font-size: 14px; + cursor: pointer; + transition: background 0.3s, transform 0.2s; } -#error-message { - font-size: 13px; - font-style: italic; - text-align: center; - color: white; +#save-options:hover { + background: #ccc; + color: #8d5c70; + transform: translateY(-2px); } + +/* Messages d'information (tooltips) */ .tooltip-container { position: relative; display: inline-block; @@ -319,7 +299,6 @@ input:checked + .slider:before { z-index: 1000; line-height: normal; } -/* Règle générique pour les tooltips */ .tooltip-container .tooltip { bottom: 120%; transform: translateX(-50%); @@ -332,7 +311,6 @@ input:checked + .slider:before { transform: translateX(-50%) translateY(-5px); pointer-events: auto !important; } -/* Style spécifique pour le bouton de connexion */ #auth-button .tooltip { top: 120%; bottom: auto; @@ -351,3 +329,44 @@ button:disabled .tooltip { transform: translateX(-28%) !important; } +/* Notifications et erreurs */ +#extension-notification { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: rgba(0, 0, 0, 0.85); + color: white; + padding: 15px; + border-radius: 8px; + text-align: center; + width: 80%; + max-width: 250px; + z-index: 1000; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); + transition: visibility 0.3s ease; +} +#extension-notification.hidden { + visibility: hidden; +} + +#close-notification { + margin-top: 10px; + padding: 5px 10px; + background-color: #8d5c70; + color: white; + border: none; + cursor: pointer; + border-radius: 5px; + font-weight: bold; +} +#close-notification:hover { + background-color: #dddedd; + color: #8d5c70; +} +#error-message { + font-size: 13px; + font-style: italic; + text-align: center; + color: white; +} diff --git a/src/css/sidebar.css b/src/css/sidebar.css index 12305db5db7fa8454ab1543cc7e3501a2856e009..76e6dc47dca1b3ee394a2140d59132ae7a59df7e 100644 --- a/src/css/sidebar.css +++ b/src/css/sidebar.css @@ -1,3 +1,4 @@ +/* Import de la police Luciole */ @font-face { font-family: 'Luciole'; src: url('../fonts/Luciole-Regular/Luciole-Regular.woff2') format('woff2'), @@ -5,6 +6,7 @@ font-weight: normal; font-style: normal; } + /* Style global */ body { font-family: Luciole; @@ -25,7 +27,7 @@ body { overflow: visible; } -/* En-têtes de blocs */ +/* En-têtes et contenu des blocs */ .block-header { position: relative; text-align: center; @@ -36,6 +38,31 @@ body { margin-top: 5px; margin-bottom: 0; } +.block-content { + padding-top: 2px; +} +.hidden { + display: none; +} + +/* Boutons */ +button { + font-family: Luciole; + width: 100%; + margin-top: 5px; + padding: 10px; + border: none; + background-color: #8d5c70; + color: #fbfcfc; + font-weight: bold; + cursor: pointer; + text-align: center; + border-radius: 5px; +} +button:hover { + background-color: #dddedd; + color: #8d5c70; +} /* Bouton de connexion */ #auth-button { @@ -86,33 +113,6 @@ body { display: inline-block; } -/* Contenu des blocs */ -.block-content { - padding-top: 2px; -} -.hidden { - display: none; -} - -/* Boutons standards */ -button { - font-family: Luciole; - width: 100%; - margin-top: 5px; - padding: 10px; - border: none; - background-color: #8d5c70; - color: #fbfcfc; - font-weight: bold; - cursor: pointer; - text-align: center; - border-radius: 5px; -} -button:hover { - background-color: #dddedd; - color: #8d5c70; -} - /* Mot sélectionné */ #motSelectionne { font-style: italic; @@ -152,15 +152,7 @@ button:hover { flex-shrink: 0; } -/* Conteneur pour tooltip (pour checkbox et surlignage) */ -.tooltip-container { - position: relative; - display: inline-block; - cursor: pointer; - overflow: visible; -} - -/* Style pour tous les tooltips */ +/* Messages d'information (tooltips) */ .tooltip { all: unset; display: block; @@ -185,7 +177,12 @@ button:hover { z-index: 10; line-height: normal; } - +.tooltip-container { + position: relative; + display: inline-block; + cursor: pointer; + overflow: visible; +} .tooltip-container:hover .tooltip { opacity: 1; transform: translateX(-50%) translateY(-5px); @@ -199,8 +196,68 @@ button:hover { left: auto; transform: translateX(0) translateY(-5px); } +/* Tooltip pour le bouton de surlignage */ +button.lexique-highlight-toggle .tooltip { + all: unset; + display: block; + box-sizing: border-box; + position: absolute; + bottom: 120%; + left: 50%; + transform: translateX(-50%) translateY(-5px); + background-color: rgba(0, 0, 0, 0.75); + color: #fff; + font-size: 14px; + font-weight: lighter; + padding: 6px 10px; + border-radius: 5px; + white-space: normal; + overflow-wrap: break-word; + width: 180px; + text-align: center; + opacity: 0; + transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out; + pointer-events: none; + z-index: 10; + line-height: normal; +} +button.lexique-highlight-toggle:hover .tooltip { + opacity: 1; + transform: translateX(-50%) translateY(-5px); +} -/* Cases à cocher personnalisées */ +/* Section Lexique */ +.lexicon-section { + margin-bottom: 10px; +} +.lexicon-header { + font-weight: bold; + cursor: pointer; + padding: 5px; + background-color: #8d5c70; + border-radius: 5px; + text-align: center; +} +.lexicon-header:hover { + background-color: #dddedd; + color: #8d5c70; +} +.lexicon-content { + margin-top: 5px; +} +.lexicon-option { + margin-right: -10px; +} +#mesLexiquesList { + display: inline; + padding: 0; + align-items: center; +} +#mesLexiquesContainer h4 { + margin-bottom: 5px; +} + +/* Cases à cocher pour les lexiques */ .lexique-checkbox { appearance: none; width: 20px; @@ -229,7 +286,7 @@ button:hover { transform: translate(-50%, -50%); } -/* Bouton de surlignage */ +/* Surlignage */ .lexique-highlight-toggle { background: none; border: none; @@ -239,104 +296,46 @@ button:hover { width: 15%; position: relative; } - .feutre-icon { width: 20px; height: 20px; filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg); transition: filter 0.3s ease-in-out; } - -/* Ajout de la classe active */ +/* Icone active */ .lexique-highlight-toggle.active .feutre-icon, .lexique-highlight-toggle[data-active="true"] .feutre-icon { filter: brightness(0) saturate(100%) invert(83%) sepia(89%) saturate(588%) hue-rotate(360deg); } - -button.lexique-highlight-toggle .tooltip { - all: unset; - display: block; - box-sizing: border-box; - position: absolute; - bottom: 120%; - left: 50%; - transform: translateX(-50%) translateY(-5px); - background-color: rgba(0, 0, 0, 0.75); - color: #fff; - font-size: 14px; - font-weight: lighter; - padding: 6px 10px; - border-radius: 5px; - white-space: normal; - overflow-wrap: break-word; - width: 180px; - text-align: center; - opacity: 0; - transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out; - pointer-events: none; - z-index: 10; - line-height: normal; -} - -button.lexique-highlight-toggle:hover .tooltip { - opacity: 1; - transform: translateX(-50%) translateY(-5px); -} - .lexicon-highlight { - position: relative; /* Pour positionner le conteneur de bandes en absolu */ - display: inline-block; /* Pour que le span prenne en compte les dimensions */ - padding-bottom: 4px; /* Laisser de l'espace pour les bandes */ - border-bottom: 1px dashed #666; /* Vous pouvez conserver votre bordure si besoin */ + position: relative; + display: inline-block; + padding-bottom: 4px; + border-bottom: 1px dashed #666; transition: background-color 0.3s; background-color: rgba(255, 255, 0, 0.15); } - +/* Bandes de couleurs pour le surlignage */ .color-bands { position: absolute; left: 0; right: 0; bottom: 0; - height: 3px; /* Ajustez la hauteur des bandes */ - display: flex; /* Pour répartir équitablement les bandes */ + height: 3px; + display: flex; } - .color-bands div { - flex: 1; /* Chaque bande occupe une part égale */ + flex: 1; height: 100%; } - - -.lexicon-section { - margin-bottom: 10px; -} -.lexicon-header { - font-weight: bold; - cursor: pointer; - padding: 5px; - background-color: #8d5c70; - border-radius: 5px; - text-align: center; -} -.lexicon-header:hover { - background-color: #dddedd; - color: #8d5c70; -} -.lexicon-content { - margin-top: 5px; -} -.lexicon-option { - margin-right: -10px; -} -#mesLexiquesList { - display: inline; - padding: 0; - align-items: center; -} -#mesLexiquesContainer h4 { - margin-bottom: 5px; +#highlighting-options p { + margin: 5px 0; + font-size: small; + color: #333; } + +/* Section Définitions */ #definitionContainer { background-color: #444; padding: 10px; @@ -354,6 +353,13 @@ button.lexique-highlight-toggle:hover .tooltip { font-weight: bold; color: #ffa500; } +#noDefinitionsContainer { + display: block !important; + color: red !important; + font-weight: bold; +} + +/* Modal de définition */ .modal-overlay { position: fixed; top: 0; @@ -384,18 +390,10 @@ button.lexique-highlight-toggle:hover .tooltip { .close-button:hover { color: #000; } -#highlighting-options p { - margin: 5px 0; - font-size: small; - color: #333; -} -#noDefinitionsContainer { - display: block !important; - color: red !important; - font-weight: bold; -} + +/* Message si utilisateur déconnecté/analyse désactivée */ #messageContainer { display: none; text-align: center; color: #323046; -} +} \ No newline at end of file diff --git a/src/plugin/plugin.html b/src/plugin/plugin.html index 395fd68ed015c7be767e44c150c29eecede6c04d..98cb1c18abfeeac6e7fa50a33c7fb66b1c1dc9a3 100644 --- a/src/plugin/plugin.html +++ b/src/plugin/plugin.html @@ -9,6 +9,8 @@ </head> <body> <div id="extension-name">Extension BaLex</div> + + <!-- Section de connexion --> <div id="auth-section"> <button id="auth-button"> <span id="auth-icon"> @@ -19,11 +21,15 @@ <span id="auth-text">Se connecter</span> </button> </div> + + <!-- Section des options de l'extension --> <button id="toggleExtensionBtn">Activer/Désactiver</button> <button id="toggleStatsBtn">Statistiques</button> <button id="open-stats">Afficher les statistiques</button> + <!-- Indicateur de chargement de Pyodide --> <div id="pyodide-loading"></div> + <!-- Section des options d'ajout automatique --> <div id="stats-options" class="option-container"> <div id="auto-add-container" class="option-row auto-add-row"> <span>Ajout automatique</span> @@ -57,7 +63,8 @@ <button id="save-options" class="hidden">Valider</button> </div> </div> - + + <!-- Notification de l'extension --> <div id="extension-notification" class="hidden"> <p id="notification-text"></p> <button id="close-notification">OK</button> diff --git a/src/sidebar/sidebar.html b/src/sidebar/sidebar.html index 397643335f62f76c7e1c74824570ee54192b8317..fce4745e7dfc2f650699a92c3bf1825bb17fd33e 100644 --- a/src/sidebar/sidebar.html +++ b/src/sidebar/sidebar.html @@ -29,10 +29,10 @@ <div id="menu"> <div class="block-header"> <h3>Lexiques</h3> - <button class="toggle-btn">+</button> + <button class="toggle-btn">+</button> <!-- Bouton pour afficher/masquer le bloc --> </div> <div id="menuContent" class="block-content hidden"> - <div id="lexiques">Chargement...</div> + <div id="lexiques">Chargement...</div> </div> </div> @@ -42,8 +42,8 @@ <h3>Mot sélectionné</h3> <button class="toggle-btn"></button> </div> - <div id="etatContent" class="block-content hidden"> - <p id="motSelectionne">Aucun mot sélectionné</p> + <div id="etatContent" class="block-content hidden"> + <p id="motSelectionne">Aucun mot sélectionné</p> <p id="lexiconResult"></p> <div id="add-to-lexiques" style="display: none;"> <button id="add-word-button">Ajouter le mot sélectionné</button> @@ -84,7 +84,7 @@ <ul id="wiktionnaireList"></ul> </div> - <!-- Fenêtre modale cachée --> + <!-- Fenêtre modale cachée pour afficher les détails--> <div id="modalOverlay" class="modal-overlay"> <div class="modal-content"> <span id="closeModalBtn" class="close-button">X</span>