diff --git a/manifest.json b/manifest.json
index 351df485ea3b522ae88bc11ddb7d392d649b8291..5817a844c640730cf92f218f1a8d4ba04e8302a2 100644
--- a/manifest.json
+++ b/manifest.json
@@ -38,11 +38,6 @@
"default_title": "ff2BaLex"
},
- "options_ui": {
- "page": "src/options/options.html",
- "open_in_tab": false
- },
-
"sidebar_action": {
"default_title": "BaLex",
"default_panel": "src/sidebar/sidebar.html",
@@ -64,7 +59,7 @@
"src/utils/stats.js",
"src/utils/highlighting.js"
],
- "css": ["src/context_menu/custom_context_menu.css"],
+ "css": ["src/css/custom_context_menu.css"],
"run_at": "document_idle"
},
{
diff --git a/src/context_menu/custom_context_menu.css b/src/css/custom_context_menu.css
similarity index 100%
rename from src/context_menu/custom_context_menu.css
rename to src/css/custom_context_menu.css
diff --git a/src/css/plugin.css b/src/css/plugin.css
new file mode 100644
index 0000000000000000000000000000000000000000..2bd8f350c3d68bd5a5328f97563469301032a304
--- /dev/null
+++ b/src/css/plugin.css
@@ -0,0 +1,353 @@
+
+@font-face {
+ font-family: 'Luciole';
+ src: url('../fonts/Luciole-Regular/Luciole-Regular.woff2') format('woff2'),
+ url('../fonts/Luciole-Regular/Luciole-Regular.woff') format('woff');
+ font-weight: normal;
+ 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;
+}
+
+body {
+ font-family: Luciole;
+ font-size: medium;
+ margin: 0;
+ padding: 8px;
+ background-color: #525877;
+ color: #323046;
+ border-radius: 10px;
+ width: 200px;
+}
+button {
+ font-family: Luciole;
+ width: 100%;
+ padding: 12px;
+ margin-bottom: 8px;
+ font-size: 14px;
+ font-weight: bold;
+ border: none;
+ cursor: pointer;
+ border-radius: 6px;
+ transition: background 0.3s, transform 0.2s;
+ background-color: #a08e9f;
+ color: white;
+}
+button:hover {
+ background-color: #dddedd;
+ color: #8d5c70;
+}
+#auth-button {
+ width: auto;
+ display: inline-flex;
+ padding: 6px 12px;
+ font-size: 16px;
+ font-family: Luciole;
+ background: none;
+ border: none;
+ color: white;
+ align-items: center;
+ gap: 6px;
+ border-radius: 20px;
+ cursor: pointer;
+ transition: background 0.3s;
+ text-align: center;
+}
+#auth-button:hover {
+ background: rgba(255,255,255,0.2);
+}
+#auth-button svg {
+ width: 18px;
+ height: 18px;
+ fill: white;
+ transition: transform 0.3s ease-in-out;
+}
+#auth-button:hover svg {
+ transform: scale(1.1);
+}
+#auth-section {
+ display: flex;
+ 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;
+}
+.option-container {
+ background: #444;
+ padding: 8px;
+ border-radius: 10px;
+ box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+}
+.option-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: nowrap;
+ padding: 12px;
+ border-radius: 6px;
+ background-color: #444;
+ color: white;
+ transition: transform 0.2s, box-shadow 0.2s;
+}
+.option-row:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+.option-row label {
+ font-weight: lighter;
+ flex: 1;
+ margin: 0;
+ font-size: 13px;
+ align-items: center;
+}
+.option-row input[type="checkbox"],
+.option-row input[type="number"] {
+ appearance: none;
+ width: 20px;
+ height: 20px;
+ border: 2px solid #8d5c70;
+ border-radius: 50%;
+ background-color: #fff;
+ cursor: pointer;
+ transition: background-color 0.3s, border-color 0.3s;
+}
+.option-row input[type="checkbox"]:checked {
+ background-color: #8d5c70;
+ border-color: #8d5c70;
+}
+.toggle-switch {
+ position: absolute;
+ display: inline-block;
+ width: 30px;
+ height: 16px;
+ right: 0;
+ left: auto;
+}
+.toggle-switch .slider:before {
+ position: absolute;
+ content: "";
+ width: 12px;
+ height: 12px;
+ left: 2px;
+ bottom: 2px;
+ background-color: white;
+ transition: 0.4s;
+ border-radius: 50%;
+}
+.toggle-switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ transition: 0.4s;
+ border-radius: 24px;
+}
+input:checked + .slider {
+ background-color: #8d5c70;
+}
+input:checked + .slider:before {
+ transform: translateX(14px);
+}
+.threshold-container input[type="number"] {
+ width: 45px;
+ height: 45px;
+ line-height: 50px;
+ text-align: center;
+ border-radius: 50%;
+ border: 2px solid #8d5c70;
+ font-size: 13px;
+ box-sizing: border-box;
+ 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);
+}
+.language-selection {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+.lang-option {
+ padding: 4px 10px;
+ border: 2px solid #8d5c70;
+ border-radius: 16px;
+ background: rgb(152, 152, 152);
+ color: #8d5c70;
+ cursor: pointer;
+ font-size: 0.85rem;
+ transition: background 0.3s, color 0.3s, transform 0.2s;
+}
+.lang-option:hover {
+ background: #8d5c70;
+ color: white;
+ transform: scale(1.05);
+}
+.lang-option.selected {
+ background: #8d5c70;
+ 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;
+ color: white;
+ border: 2px solid #8d5c70;
+ border-radius: 8px;
+}
+.hidden {
+ display: none;
+}
+#error-message {
+ font-size: 13px;
+ font-style: italic;
+ text-align: center;
+ color: white;
+}
+.tooltip-container {
+ position: relative;
+ display: inline-block;
+ pointer-events: auto !important;
+}
+.tooltip {
+ all: unset;
+ display: block;
+ box-sizing: border-box;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ color: #fff !important;
+ font-size: 12px !important;
+ font-weight: lighter !important;
+ padding: 6px 10px;
+ border-radius: 5px;
+ white-space: normal;
+ overflow-wrap: break-word;
+ width: 200px;
+ text-align: center;
+ visibility: hidden;
+ transition: visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
+ pointer-events: none;
+ z-index: 1000;
+ line-height: normal;
+}
+/* Règle générique pour les tooltips */
+.tooltip-container .tooltip {
+ bottom: 120%;
+ transform: translateX(-50%);
+ background-color: rgba(0,0,0,0.9) !important;
+ visibility: hidden;
+ pointer-events: auto !important;
+}
+.tooltip-container:hover .tooltip {
+ visibility: visible !important;
+ transform: translateX(-50%) translateY(-5px);
+ pointer-events: auto !important;
+}
+/* Style spécifique pour le bouton de connexion */
+#auth-button .tooltip {
+ top: 120%;
+ bottom: auto;
+}
+#auth-button.tooltip-container:hover .tooltip {
+ visibility: visible !important;
+ transform: translateX(-50%) translateY(5px);
+}
+/* Permettre l'interaction avec les tooltips même sur les boutons désactivés */
+button:disabled .tooltip {
+ pointer-events: auto !important;
+}
+
+.tooltip-langues-suivies {
+ left: 50% !important;
+ transform: translateX(-28%) !important;
+}
+
diff --git a/src/css/sidebar.css b/src/css/sidebar.css
new file mode 100644
index 0000000000000000000000000000000000000000..12305db5db7fa8454ab1543cc7e3501a2856e009
--- /dev/null
+++ b/src/css/sidebar.css
@@ -0,0 +1,401 @@
+@font-face {
+ font-family: 'Luciole';
+ src: url('../fonts/Luciole-Regular/Luciole-Regular.woff2') format('woff2'),
+ url('../fonts/Luciole-Regular/Luciole-Regular.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
+}
+/* Style global */
+body {
+ font-family: Luciole;
+ font-size: medium;
+ margin: 0;
+ padding: 10px;
+ background-color: #525877;
+ color: #323046;
+}
+
+/* Conteneurs principaux */
+#menu, #etat, #definitionContainer {
+ padding: 10px;
+ margin-bottom: 10px;
+ border-radius: 10px;
+ background-color: #a08e9f;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+ overflow: visible;
+}
+
+/* En-têtes de blocs */
+.block-header {
+ position: relative;
+ text-align: center;
+ margin-top: 2px;
+}
+.block-header h3 {
+ display: inline-block;
+ margin-top: 5px;
+ margin-bottom: 0;
+}
+
+/* Bouton de connexion */
+#auth-button {
+ width: auto;
+ display: inline-flex;
+ padding: 6px 12px;
+ font-size: 16px;
+ font-family: Luciole;
+ background: none;
+ border: none;
+ color: white;
+ align-items: center;
+ gap: 6px;
+ border-radius: 20px;
+ cursor: pointer;
+ transition: background 0.3s;
+}
+#auth-button:hover {
+ background: rgba(255,255,255,0.2);
+}
+#auth-button svg {
+ width: 18px;
+ height: 18px;
+ fill: white;
+ transition: transform 0.3s ease-in-out;
+}
+#auth-button:hover svg {
+ transform: scale(1.1);
+}
+#auth-section {
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 10px;
+}
+
+/* Boutons de bascule (toggle) */
+.toggle-btn {
+ position: absolute;
+ right: 8px;
+ background: none;
+ margin: 0;
+ border: none;
+ color: #fff;
+ font-size: 15px;
+ padding: 3px 5px;
+ cursor: pointer;
+ width: auto;
+ 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;
+ text-align: center;
+ margin-top: 5px;
+}
+
+/* Style des lexiques */
+.lexique-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 6px;
+ margin-bottom: 5px;
+ border-radius: 5px;
+ background-color: #dcdde1;
+ position: relative;
+}
+.lexique-item:hover {
+ background-color: #c4c7ce;
+}
+.lexique-label {
+ font-weight: bold;
+ color: #323046;
+ flex-grow: 1;
+ font-size: 12px;
+ text-align: center;
+}
+
+/* Icône du lexique */
+.lexique-icon {
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ background-color: #ccc;
+ margin-right: 10px;
+ 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 */
+.tooltip {
+ all: unset;
+ display: block;
+ box-sizing: border-box;
+ position: absolute;
+ bottom: 120%;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: rgba(0,0,0,0.75);
+ color: #fff;
+ font-size: 12px !important;
+ font-weight: lighter !important;
+ 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;
+}
+
+.tooltip-container:hover .tooltip {
+ opacity: 1;
+ transform: translateX(-50%) translateY(-5px);
+}
+.tooltip-container.left .tooltip {
+ left: 0;
+ transform: translateX(0) translateY(-5px);
+}
+.tooltip-container.right .tooltip {
+ right: 0;
+ left: auto;
+ transform: translateX(0) translateY(-5px);
+}
+
+/* Cases à cocher personnalisées */
+.lexique-checkbox {
+ appearance: none;
+ width: 20px;
+ height: 20px;
+ border: 2px solid #8d5c70;
+ border-radius: 5px;
+ background-color: #fff;
+ transition: background 0.3s ease, border-color 0.3s ease;
+ cursor: pointer;
+ position: relative;
+}
+.lexique-checkbox:hover {
+ border-color: #6a3e50;
+}
+.lexique-checkbox:checked {
+ background-color: #8d5c70;
+ border-color: #8d5c70;
+}
+.lexique-checkbox:checked::after {
+ content: '✔';
+ font-size: 16px;
+ color: white;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+/* Bouton de surlignage */
+.lexique-highlight-toggle {
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 2px;
+ transition: transform 0.2s ease-in-out;
+ 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 */
+.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 */
+ transition: background-color 0.3s;
+ background-color: rgba(255, 255, 0, 0.15);
+
+}
+
+.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 */
+}
+
+.color-bands div {
+ flex: 1; /* Chaque bande occupe une part égale */
+ 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;
+}
+#definitionContainer {
+ background-color: #444;
+ padding: 10px;
+ border-radius: 10px;
+ color: white;
+}
+#definitionsList {
+ list-style: none;
+ padding: 0;
+}
+#definitionsList li {
+ margin-bottom: 10px;
+}
+.definition-source {
+ font-weight: bold;
+ color: #ffa500;
+}
+.modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background: rgba(0,0,0,0.5);
+ display: none;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+}
+.modal-content {
+ background: white;
+ color: #8d5c70;
+ padding: 1rem;
+ max-width: 600px;
+ max-height: 80vh;
+ overflow-y: auto;
+ border-radius: 8px;
+}
+.close-button {
+ float: right;
+ cursor: pointer;
+ font-weight: bold;
+ color: #666;
+}
+.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;
+}
+#messageContainer {
+ display: none;
+ text-align: center;
+ color: #323046;
+}
diff --git a/src/plugin/plugin.html b/src/plugin/plugin.html
index 7a6cd827631fa0f2437aac9c798ffcf3458e8503..395fd68ed015c7be767e44c150c29eecede6c04d 100644
--- a/src/plugin/plugin.html
+++ b/src/plugin/plugin.html
@@ -5,360 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Extension BaLex</title>
<script src="../utils/logger.js"></script>
- <style>
- @font-face {
- font-family: 'Luciole';
- src: url('../fonts/Luciole-Regular/Luciole-Regular.woff2') format('woff2'),
- url('../fonts/Luciole-Regular/Luciole-Regular.woff') format('woff');
- font-weight: normal;
- 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;
- }
-
- body {
- font-family: Luciole;
- font-size: medium;
- margin: 0;
- padding: 8px;
- background-color: #525877;
- color: #323046;
- border-radius: 10px;
- width: 200px;
- }
- button {
- font-family: Luciole;
- width: 100%;
- padding: 12px;
- margin-bottom: 8px;
- font-size: 14px;
- font-weight: bold;
- border: none;
- cursor: pointer;
- border-radius: 6px;
- transition: background 0.3s, transform 0.2s;
- background-color: #a08e9f;
- color: white;
- }
- button:hover {
- background-color: #dddedd;
- color: #8d5c70;
- }
- #auth-button {
- width: auto;
- display: inline-flex;
- padding: 6px 12px;
- font-size: 16px;
- font-family: Luciole;
- background: none;
- border: none;
- color: white;
- align-items: center;
- gap: 6px;
- border-radius: 20px;
- cursor: pointer;
- transition: background 0.3s;
- text-align: center;
- }
- #auth-button:hover {
- background: rgba(255,255,255,0.2);
- }
- #auth-button svg {
- width: 18px;
- height: 18px;
- fill: white;
- transition: transform 0.3s ease-in-out;
- }
- #auth-button:hover svg {
- transform: scale(1.1);
- }
- #auth-section {
- display: flex;
- 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;
- }
- .option-container {
- background: #444;
- padding: 8px;
- border-radius: 10px;
- box-shadow: 0 2px 6px rgba(0,0,0,0.2);
- }
- .option-row {
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-wrap: nowrap;
- padding: 12px;
- border-radius: 6px;
- background-color: #444;
- color: white;
- transition: transform 0.2s, box-shadow 0.2s;
- }
- .option-row:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
- }
- .option-row label {
- font-weight: lighter;
- flex: 1;
- margin: 0;
- font-size: 13px;
- align-items: center;
- }
- .option-row input[type="checkbox"],
- .option-row input[type="number"] {
- appearance: none;
- width: 20px;
- height: 20px;
- border: 2px solid #8d5c70;
- border-radius: 50%;
- background-color: #fff;
- cursor: pointer;
- transition: background-color 0.3s, border-color 0.3s;
- }
- .option-row input[type="checkbox"]:checked {
- background-color: #8d5c70;
- border-color: #8d5c70;
- }
- .toggle-switch {
- position: absolute;
- display: inline-block;
- width: 30px;
- height: 16px;
- right: 0;
- left: auto;
- }
- .toggle-switch .slider:before {
- position: absolute;
- content: "";
- width: 12px;
- height: 12px;
- left: 2px;
- bottom: 2px;
- background-color: white;
- transition: 0.4s;
- border-radius: 50%;
- }
- .toggle-switch input {
- opacity: 0;
- width: 0;
- height: 0;
- }
- .slider {
- position: absolute;
- cursor: pointer;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: #ccc;
- transition: 0.4s;
- border-radius: 24px;
- }
- input:checked + .slider {
- background-color: #8d5c70;
- }
- input:checked + .slider:before {
- transform: translateX(14px);
- }
- .threshold-container input[type="number"] {
- width: 45px;
- height: 45px;
- line-height: 50px;
- text-align: center;
- border-radius: 50%;
- border: 2px solid #8d5c70;
- font-size: 13px;
- box-sizing: border-box;
- 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);
- }
- .language-selection {
- display: flex;
- flex-wrap: wrap;
- gap: 8px;
- }
- .lang-option {
- padding: 4px 10px;
- border: 2px solid #8d5c70;
- border-radius: 16px;
- background: rgb(152, 152, 152);
- color: #8d5c70;
- cursor: pointer;
- font-size: 0.85rem;
- transition: background 0.3s, color 0.3s, transform 0.2s;
- }
- .lang-option:hover {
- background: #8d5c70;
- color: white;
- transform: scale(1.05);
- }
- .lang-option.selected {
- background: #8d5c70;
- 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;
- color: white;
- border: 2px solid #8d5c70;
- border-radius: 8px;
- }
- .hidden {
- display: none;
- }
- #error-message {
- font-size: 13px;
- font-style: italic;
- text-align: center;
- color: white;
- }
- .tooltip-container {
- position: relative;
- display: inline-block;
- pointer-events: auto !important;
- }
- .tooltip {
- all: unset;
- display: block;
- box-sizing: border-box;
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- color: #fff !important;
- font-size: 12px !important;
- font-weight: lighter !important;
- padding: 6px 10px;
- border-radius: 5px;
- white-space: normal;
- overflow-wrap: break-word;
- width: 200px;
- text-align: center;
- visibility: hidden;
- transition: visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
- pointer-events: none;
- z-index: 1000;
- line-height: normal;
- }
- /* Règle générique pour les tooltips */
- .tooltip-container .tooltip {
- bottom: 120%;
- transform: translateX(-50%);
- background-color: rgba(0,0,0,0.9) !important;
- visibility: hidden;
- pointer-events: auto !important;
- }
- .tooltip-container:hover .tooltip {
- visibility: visible !important;
- transform: translateX(-50%) translateY(-5px);
- pointer-events: auto !important;
- }
- /* Style spécifique pour le bouton de connexion */
- #auth-button .tooltip {
- top: 120%;
- bottom: auto;
- }
- #auth-button.tooltip-container:hover .tooltip {
- visibility: visible !important;
- transform: translateX(-50%) translateY(5px);
- }
- /* Permettre l'interaction avec les tooltips même sur les boutons désactivés */
- button:disabled .tooltip {
- pointer-events: auto !important;
- }
-
- .tooltip-langues-suivies {
- left: 50% !important;
- transform: translateX(-28%) !important;
- }
-
- </style>
+ <link rel="stylesheet" href="../css/plugin.css">
</head>
<body>
<div id="extension-name">Extension BaLex</div>
diff --git a/src/sidebar/sidebar.html b/src/sidebar/sidebar.html
index 99ef99e15b5663b39e7fb6895196e675dfe416e6..397643335f62f76c7e1c74824570ee54192b8317 100644
--- a/src/sidebar/sidebar.html
+++ b/src/sidebar/sidebar.html
@@ -9,409 +9,8 @@
<script src="../utils/api.js" defer></script>
<script src="../utils/definitions.js" defer></script>
<script src="sidebar.js" defer></script>
- <style>
- @font-face {
- font-family: 'Luciole';
- src: url('../fonts/Luciole-Regular/Luciole-Regular.woff2') format('woff2'),
- url('../fonts/Luciole-Regular/Luciole-Regular.woff') format('woff');
- font-weight: normal;
- font-style: normal;
- }
- /* Style global */
- body {
- font-family: Luciole;
- font-size: medium;
- margin: 0;
- padding: 10px;
- background-color: #525877;
- color: #323046;
- }
+ <link rel="stylesheet" href="../css/sidebar.css">
- /* Conteneurs principaux */
- #menu, #etat, #definitionContainer {
- padding: 10px;
- margin-bottom: 10px;
- border-radius: 10px;
- background-color: #a08e9f;
- box-shadow: 0 2px 5px rgba(0,0,0,0.2);
- overflow: visible;
- }
-
- /* En-têtes de blocs */
- .block-header {
- position: relative;
- text-align: center;
- margin-top: 2px;
- }
- .block-header h3 {
- display: inline-block;
- margin-top: 5px;
- margin-bottom: 0;
- }
-
- /* Bouton de connexion */
- #auth-button {
- width: auto;
- display: inline-flex;
- padding: 6px 12px;
- font-size: 16px;
- font-family: Luciole;
- background: none;
- border: none;
- color: white;
- align-items: center;
- gap: 6px;
- border-radius: 20px;
- cursor: pointer;
- transition: background 0.3s;
- }
- #auth-button:hover {
- background: rgba(255,255,255,0.2);
- }
- #auth-button svg {
- width: 18px;
- height: 18px;
- fill: white;
- transition: transform 0.3s ease-in-out;
- }
- #auth-button:hover svg {
- transform: scale(1.1);
- }
- #auth-section {
- display: flex;
- justify-content: flex-end;
- margin-bottom: 10px;
- }
-
- /* Boutons de bascule (toggle) */
- .toggle-btn {
- position: absolute;
- right: 8px;
- background: none;
- margin: 0;
- border: none;
- color: #fff;
- font-size: 15px;
- padding: 3px 5px;
- cursor: pointer;
- width: auto;
- 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;
- text-align: center;
- margin-top: 5px;
- }
-
- /* Style des lexiques */
- .lexique-item {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 6px;
- margin-bottom: 5px;
- border-radius: 5px;
- background-color: #dcdde1;
- position: relative;
- }
- .lexique-item:hover {
- background-color: #c4c7ce;
- }
- .lexique-label {
- font-weight: bold;
- color: #323046;
- flex-grow: 1;
- font-size: 12px;
- text-align: center;
- }
-
- /* Icône du lexique */
- .lexique-icon {
- width: 25px;
- height: 25px;
- border-radius: 50%;
- background-color: #ccc;
- margin-right: 10px;
- 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 */
- .tooltip {
- all: unset;
- display: block;
- box-sizing: border-box;
- position: absolute;
- bottom: 120%;
- left: 50%;
- transform: translateX(-50%);
- background-color: rgba(0,0,0,0.75);
- color: #fff;
- font-size: 12px !important;
- font-weight: lighter !important;
- 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;
- }
-
- .tooltip-container:hover .tooltip {
- opacity: 1;
- transform: translateX(-50%) translateY(-5px);
- }
- .tooltip-container.left .tooltip {
- left: 0;
- transform: translateX(0) translateY(-5px);
- }
- .tooltip-container.right .tooltip {
- right: 0;
- left: auto;
- transform: translateX(0) translateY(-5px);
- }
-
- /* Cases à cocher personnalisées */
- .lexique-checkbox {
- appearance: none;
- width: 20px;
- height: 20px;
- border: 2px solid #8d5c70;
- border-radius: 5px;
- background-color: #fff;
- transition: background 0.3s ease, border-color 0.3s ease;
- cursor: pointer;
- position: relative;
- }
- .lexique-checkbox:hover {
- border-color: #6a3e50;
- }
- .lexique-checkbox:checked {
- background-color: #8d5c70;
- border-color: #8d5c70;
- }
- .lexique-checkbox:checked::after {
- content: '✔';
- font-size: 16px;
- color: white;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
-
- /* Bouton de surlignage */
- .lexique-highlight-toggle {
- background: none;
- border: none;
- cursor: pointer;
- padding: 2px;
- transition: transform 0.2s ease-in-out;
- 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 */
- .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 */
- transition: background-color 0.3s;
- background-color: rgba(255, 255, 0, 0.15);
-
- }
-
- .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 */
- }
-
- .color-bands div {
- flex: 1; /* Chaque bande occupe une part égale */
- 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;
- }
- #definitionContainer {
- background-color: #444;
- padding: 10px;
- border-radius: 10px;
- color: white;
- }
- #definitionsList {
- list-style: none;
- padding: 0;
- }
- #definitionsList li {
- margin-bottom: 10px;
- }
- .definition-source {
- font-weight: bold;
- color: #ffa500;
- }
- .modal-overlay {
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- background: rgba(0,0,0,0.5);
- display: none;
- align-items: center;
- justify-content: center;
- z-index: 9999;
- }
- .modal-content {
- background: white;
- color: #8d5c70;
- padding: 1rem;
- max-width: 600px;
- max-height: 80vh;
- overflow-y: auto;
- border-radius: 8px;
- }
- .close-button {
- float: right;
- cursor: pointer;
- font-weight: bold;
- color: #666;
- }
- .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;
- }
- #messageContainer {
- display: none;
- text-align: center;
- color: #323046;
- }
- </style>
</head>
<body>
<!-- Bouton de connexion -->