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

Style bouton de connexion

parent a5b78ec2
No related branches found
No related tags found
2 merge requests!8Test final,!5Ajout manuel d'un mot dans un ou plusieurs lexique(s)
Hide whitespace changes
Inline Side-by-side
barre_latérale/sidebar.html
+ 50
− 5
View file @ 6291ea0e
...@@ -41,6 +41,45 @@ ...@@ -41,6 +41,45 @@
margin-bottom: 0; margin-bottom: 0;
} }
/* Bouton de connexion */
#auth-button {
width: auto;
display: inline-flex;
padding: 6px 12px;
font-size: 18px;
font-family: Bradley Hand, cursive;
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;
}
/* Utilisation de la classe pour les boutons de bascule */ /* Utilisation de la classe pour les boutons de bascule */
.toggle-btn { .toggle-btn {
position: absolute; position: absolute;
...@@ -96,8 +135,9 @@ ...@@ -96,8 +135,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 8px; padding: 6px;
margin-bottom: 5px; margin-bottom: 5px;
margin-top: 2px;
border-radius: 5px; border-radius: 5px;
background-color: #dcdde1; background-color: #dcdde1;
width: 100%; width: 100%;
...@@ -242,6 +282,15 @@ ...@@ -242,6 +282,15 @@
</head> </head>
<body> <body>
<!-- Bouton de connexion -->
<div id="auth-section">
<button id="auth-button">
<span id="auth-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 2a1 1 0 0 1 1 1v2h2V3a1 1 0 0 1 2 0v2h2a2 2 0 0 1 2 2v3h-2V7h-2v3a1 1 0 1 1-2 0V7h-2v3a1 1 0 1 1-2 0V7H6v3H4V7a2 2 0 0 1 2-2h2V3a1 1 0 0 1 1-1Zm-6 10h16v4a2 2 0 0 1-2 2h-4v2h2a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h2v-2H6a2 2 0 0 1-2-2v-4Z"/></svg>
</span>
<span id="auth-text">Se connecter</span>
</button>
</div>
<!-- Bloc 1 : Menu des lexiques --> <!-- Bloc 1 : Menu des lexiques -->
<div id="menu"> <div id="menu">
...@@ -250,11 +299,7 @@ ...@@ -250,11 +299,7 @@
<button class="toggle-btn"></button> <button class="toggle-btn"></button>
</div> </div>
<div id="menuContent" class="block-content"> <div id="menuContent" class="block-content">
<p id="highlight-note" style="display: none;">Cochez un/des lexique(s) pour activer le surlignage des mots sur la page.</p>
<div id="lexiques">Chargement...</div> <div id="lexiques">Chargement...</div>
<div id="auth-section">
<button id="auth-button">Se connecter</button>
</div>
</div> </div>
</div> </div>
......
barre_latérale/sidebar.js
+ 1
− 0
View file @ 6291ea0e
...@@ -47,6 +47,7 @@ function updateAuthButton(isLoggedIn) { ...@@ -47,6 +47,7 @@ function updateAuthButton(isLoggedIn) {
} }
} }
function toggleElementsVisibility(isLoggedIn) { function toggleElementsVisibility(isLoggedIn) {
const elementsToShowOrHide = [ const elementsToShowOrHide = [
{ id: "add-to-lexiques", shouldShow: isLoggedIn }, { id: "add-to-lexiques", shouldShow: isLoggedIn },
......
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