148 lines
3.4 KiB
CSS
Executable File
148 lines
3.4 KiB
CSS
Executable File
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
|
|
|
|
|
|
|
|
|
|
/* Basis-Styling */
|
|
|
|
|
|
|
|
|
|
|
|
#chatbox-button {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
cursor: pointer;
|
|
background-color: #996633; /* Braun #996633 */
|
|
color: white; /* Weiße Textfarbe */
|
|
border: none; /* Keine Umrandung */
|
|
border-radius: 50%; /* Runde Form */
|
|
padding: 20px;
|
|
font-size: 20px;
|
|
transition: background-color 0.3s ease; /* Hover-Effekt */
|
|
}
|
|
|
|
#chatbox-button:hover {
|
|
background-color: #774422; /* Dunkleres Braun beim Hovern */
|
|
}
|
|
|
|
|
|
|
|
|
|
#modalbox {
|
|
position: fixed; /* Festlegen der Position */
|
|
top: 50%; /* Positionierung vertikal mittig */
|
|
left: 50%; /* Positionierung horizontal mittig */
|
|
transform: translate(-50%, -50%); /* Verschieben von der Mitte */
|
|
width: 550px; /* Breite der Modalbox */
|
|
max-width: 90%; /* Maximale Breite für Responsiveness */
|
|
background-color: white;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.5);
|
|
display: none; /* Modalbox wird zunächst ausgeblendet */
|
|
z-index: 100;
|
|
}
|
|
|
|
#modalbox-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#modalbox-title {
|
|
font-weight: bold;
|
|
font-family: "Permanent Marker", cursive;
|
|
}
|
|
|
|
#close-button {
|
|
cursor: pointer;
|
|
font-size: 40pt;
|
|
color: red;
|
|
}
|
|
|
|
#chat-messages {
|
|
height: 300px; /* Höhe des Nachrichtenbereichs */
|
|
overflow-y: scroll; /* Scrollfunktion aktivieren */
|
|
padding: 10px;
|
|
}
|
|
|
|
.message {
|
|
margin-bottom: 10px;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
position: relative;
|
|
}
|
|
|
|
.message-sender {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.message-content {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.own-message {
|
|
background-color: #f0f0f0;
|
|
align-self: flex-end; /* Eigene Nachrichten rechtsbündig */
|
|
}
|
|
|
|
.other-message {
|
|
background-color: #e0e0e0;
|
|
}
|
|
|
|
#chat-input {
|
|
display: flex;
|
|
flex-direction: column; /* Anordnung in Spalten */
|
|
}
|
|
|
|
#name-input{
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#name-input, #email-input {
|
|
flex-grow: 1; /* Nameingabefeld über die gesamte Breite */
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 3px;
|
|
margin-top: 3px;
|
|
margin-bottom: 3px;
|
|
|
|
}
|
|
|
|
#message-input {
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 3px;
|
|
margin-bottom: 5px; /* Abstand zwischen den Eingabefeldern */
|
|
}
|
|
|
|
#send-button {
|
|
background-color: #4CAF50; /* Grün */
|
|
color: white;
|
|
padding: 10px;
|
|
border: none;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
width: auto; /* Automatische Breite */
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#chat-input {
|
|
flex-direction: column; /* Anordnung in Spalten */
|
|
}
|
|
|
|
#name-input,
|
|
#message-input {
|
|
margin-bottom: 1px; /* Abstand zwischen den Eingabefeldern */
|
|
}
|
|
|
|
#send-button {
|
|
width: 100%; /* Volle Breite des Containers */
|
|
margin-top: 1px; /* Abstand zum vorherigen Element */
|
|
}
|
|
|
|
|
|
} |