Spaces:
Sleeping
Sleeping
File size: 1,991 Bytes
3b6bb5e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
/* Conteneur principal pour le bouton et la carte */
.assistant-tab {
position: fixed;
bottom: 10px; /* Distance du bas de l'écran */
right: 10px; /* Distance du bord droit */
display: flex;
flex-direction: column-reverse; /* Le bouton est en dessous de la carte */
align-items: flex-end; /* Aligner à droite */
z-index: 2;
gap: 10px; /* Espacement entre le bouton et la carte */
}
/* Bouton représentant le majordome/chatbot */
.assistant-button {
background-color: var(--bg-color);
color: var(--neutral-color);
border: 1px solid black;
border-radius: 50%; /* Bouton circulaire */
width: 60px;
height: 60px;
font-size: 28px; /* Taille de l'icône */
cursor: pointer;
box-shadow: var(--box-shadow);
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
}
.assistant-button:hover {
background-color: var(--primary-color);
}
/* Carte pour afficher les messages */
.assistant-card {
background-color: var(--neutral-color);
color: var(--bg-color);
box-shadow: var(--box-shadow);
border-radius: 10px;
width: 300px;
padding: 15px;
position: relative;
transform: translateY(100%); /* Cachée par défaut */
transition: transform 0.3s ease;
font-family: Arial, sans-serif;
font-size: 14px;
}
.assistant-tab.open .assistant-card {
transform: translateY(0); /* La carte apparaît au-dessus du bouton */
}
/* Styles pour les messages */
.assistant-message {
margin-bottom: 10px;
line-height: 1.5;
}
.assistant-message.strong {
font-weight: bold;
}
.assistant-chatbot {
color: var(--primary-color);
}
.assistant-visitor {
color: rgba(0, 0, 0, 0.774);
}
/* Lien pour l'action */
.action-link {
color: blue;
text-decoration: underline;
cursor: pointer;
}
.action-link:hover {
text-decoration: none;
}
|