js / style.css
AilexGPT's picture
Update style.css
ab499b2
body, html {
height: 100%;
margin: 0;
font-family: 'Arial', sans-serif;
background: linear-gradient(145deg, #121212, #1d1d1d);
color: white;
}
#sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 250px;
background: linear-gradient(145deg, #1f1f1f, #2b2b2b);
display: flex;
flex-direction: column;
padding: 20px;
box-sizing: border-box;
box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.5);
}
button {
background-color: #333;
color: white;
border: none;
padding: 10px 20px;
margin-bottom: 10px;
cursor: pointer;
transition: background-color 0.2s;
border-radius: 4px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
button:hover {
background: linear-gradient(145deg, #444, #555);
}
#dark-mode-toggle {
margin-top: auto;
display: flex;
align-items: center;
}
#dark-mode {
accent-color: #4caf50;
margin-left: auto;
}
#chat-interface {
margin-left: 250px;
padding: 20px;
}
#conversation-history {
height: calc(100vh - 180px);
overflow-y: auto;
background: linear-gradient(145deg, #333, #424242);
padding: 10px;
margin-bottom: 20px;
border-radius: 4px;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
#message-input-area {
display: flex;
border-radius: 4px;
background: #333;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
#message-input {
flex-grow: 1;
padding: 10px;
border: none;
color: white;
background: transparent;
outline: none;
}
#send-message {
background-color: #4caf50;
border: none;
padding: 0 20px;
cursor: pointer;
border-radius: 0 4px 4px 0;
transition: background-color 0.2s;
}
#send-message:hover {
background: linear-gradient(145deg, #66bb6a, #4caf50);
}
footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: #222;
border-radius: 4px;
box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.2);
}
#model-version-label, #settings-toggle label {
margin-right: 10px;
}
#footer input[type="checkbox"] {
accent-color: #4caf50;
}
/* Zusätzliche Glanzeffekte für die Inputs */
input[type="text"], input[type="checkbox"] {
border: 1px solid #555;
background-clip: padding-box;
}
/* Stil für Nachrichten im Chat */
.message {
margin: 10px;
padding: 10px;
border-radius: 8px;
position: relative;
display: inline-block;
max-width: 80%;
}
.message:before {
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
/* Nachrichten des Benutzers */
.message.user {
background: #4caf50;
align-self: flex-end;
}
.message.user:before {
right: -10px;
top: 10px;
border-width: 5px 0 5px 10px;
border-color: transparent transparent transparent #4caf50;
}
/* Nachrichten des Bots */
.message.bot {
background: #333;
align-self: flex-start;
}
.message.bot:before {
left: -10px;
top: 10px;
border-width: 5px 10px 5px 0;
border-color: transparent #333 transparent transparent;
}
/* Fehlermeldungen */
.message.error {
background: #ff6961;
}
.message.error:before {
left: -10px;
top: 10px;
border-width: 5px 10px 5px 0;
border-color: transparent #ff6961 transparent transparent;
}