Skip to content
Snippets Groups Projects
Commit 286f9c18 authored by Lucie Bader's avatar Lucie Bader
Browse files

Séparation css/html

parent 08a023fb
No related branches found
No related tags found
1 merge request!8Test final
Hide whitespace changes
Inline Side-by-side
manifest.json
+ 1
− 6
View file @ 286f9c18
......@@ -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"
},
{
......
src/css/plugin.css 0 → 100644
+ 353
− 0
View file @ 286f9c18
@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;
}
src/css/sidebar.css 0 → 100644
+ 401
− 0
View file @ 286f9c18
@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;
}
src/plugin/plugin.html
+ 1
− 354
View file @ 286f9c18
......@@ -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>
......
src/sidebar/sidebar.html
+ 1
− 402
View file @ 286f9c18
......@@ -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 -->
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment