mirror of
https://git.mills.io/saltyim/saltyim.git
synced 2024-07-03 00:33:38 +00:00
823c112547
As outlined in [issue #155](https://git.mills.io/saltyim/saltyim/issues/155) and will also improve things such as overflow not working (there's currently no wrapping on overflow) and changing the sidebar and text input to be fixed so only the chatbox scrolls and the text input doesn't overflow off of the view area. Reviewed-on: https://git.mills.io/saltyim/saltyim/pulls/161 Reviewed-by: James Mills <james@mills.io> Co-authored-by: Sheldon Smith <screem@noreply@mills.io> Co-committed-by: Sheldon Smith <screem@noreply@mills.io>
123 lines
2.2 KiB
CSS
123 lines
2.2 KiB
CSS
html, body {
|
|
background-color: var(--mdc-theme-background);
|
|
color: var(--mdc-theme-text-primary-on-background);
|
|
font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu";
|
|
margin: 0;
|
|
}
|
|
|
|
form {
|
|
margin: 0 0.5rem;
|
|
background-color: var(--mdc-theme-primary);
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-content: flex-start;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
#wrapper {
|
|
margin: 0;
|
|
background: #eee;
|
|
flex: 1;
|
|
width: 100%;
|
|
}
|
|
|
|
#chatbox {
|
|
box-sizing: border-box;
|
|
background: #efefef;
|
|
padding: 10px;
|
|
height: calc(100vh - 130px);
|
|
width: 100%;
|
|
display: block;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.chat-msg.user > .msg-avatar img,
|
|
.chat-msg.self > .msg-avatar img {
|
|
max-width: 45px;
|
|
max-height: 45px;
|
|
border-radius: 50%;
|
|
float: left;
|
|
width: 15%;
|
|
}
|
|
|
|
.chat-msg.user > .msg-avatar img {
|
|
float: left;
|
|
}
|
|
|
|
.chat-msg.self > .msg-avatar img {
|
|
float: right;
|
|
}
|
|
|
|
.cm-msg-text {
|
|
background: white;
|
|
padding: 10px 15px 10px 15px;
|
|
color: #666;
|
|
max-width: 75%;
|
|
float: left;
|
|
margin-left: 10px;
|
|
position: relative;
|
|
margin-bottom: 1.25rem;
|
|
border-radius: 0.5rem;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.chat-msg {
|
|
clear: both;
|
|
}
|
|
|
|
.chat-msg.self > .cm-msg-text {
|
|
float: right;
|
|
margin-right: 10px;
|
|
background: var(--mdc-theme-primary);
|
|
color: white;
|
|
}
|
|
|
|
.cm-msg-time {
|
|
font-size: small;
|
|
}
|
|
|
|
#chat-send {
|
|
color: #fff;
|
|
vertical-align: middle;
|
|
height: 3.5rem;
|
|
margin-left: -0.5rem;
|
|
}
|
|
|
|
#chat-input {
|
|
flex: 1;
|
|
border-radius: 0.5rem;
|
|
border: 2px solid var(--mdc-theme-primary);
|
|
padding: 10px;
|
|
}
|
|
|
|
#config-user-input {
|
|
width: 500px;
|
|
}
|
|
|
|
#config-endpoint-input {
|
|
width: 500px;
|
|
}
|
|
|
|
|
|
@font-face {
|
|
font-family: 'wdc';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url(micons.woff2) format('woff2');
|
|
}
|
|
|
|
.material-icons {
|
|
font-family: 'wdc';
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-size: 1.5rem;
|
|
line-height: 1;
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
word-wrap: normal;
|
|
direction: ltr;
|
|
-webkit-font-feature-settings: 'liga';
|
|
-webkit-font-smoothing: antialiased;
|
|
} |