Spaces:
Running
Running
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; | |
} | |