hexabot/widget/src/components/UserInput.scss
2024-10-12 10:27:05 +01:00

124 lines
2.2 KiB
SCSS

.sc-user-input {
min-height: 55px;
margin: 0px;
position: relative;
bottom: 0;
display: flex;
background-color: #f4f7f9;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
border: 1px solid #eaeaea;
}
.sc-user-input--text {
flex-grow: 1;
resize: none;
border: none;
outline: none;
border-bottom-left-radius: 10px;
box-sizing: border-box;
padding: 18px 8px;
font-size: 15px;
font-weight: 400;
line-height: 1.33;
white-space: pre-wrap;
word-wrap: break-word;
color: #565867;
-webkit-font-smoothing: antialiased;
max-height: 200px;
overflow: scroll;
bottom: 0;
overflow-x: hidden;
overflow-y: auto;
}
.sc-user-input--text:empty:before {
content: attr(placeholder);
display: block; /* For Firefox */
color: rgba(86, 88, 103, 0.5);
filter: contrast(15%);
outline: none;
cursor: text;
}
.sc-user-input--text[contenteditable='true']:focus:empty:before {
position: absolute;
}
.sc-user-input--text[contenteditable='true']:focus:empty:after {
content: '\00a0';
}
.sc-user-input--buttons {
display: flex;
gap: 4px;
margin: 0 .5rem;
}
.sc-user-input--button {
display: flex;
flex-direction: column;
justify-content: center;
}
.sc-user-input--button:not(:last-child) {
margin-right: 2px;
}
.sc-user-input.active {
box-shadow: none;
background-color: white;
box-shadow: 0px -5px 20px 0px rgba(150, 165, 190, 0.2);
}
.sc-user-input--button label {
position: relative;
height: 24px;
padding-left: 3px;
cursor: pointer;
}
.sc-user-input--button label:hover path {
fill: rgba(86, 88, 103, 1);
}
.sc-user-input--button input {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 99999;
height: 100%;
opacity: 0;
cursor: pointer;
overflow: hidden;
}
.sc-file-container {
padding: 5px 20px;
display: flex;
align-items: center;
}
.sc-user-input--file-icon {
vertical-align: bottom;
width: 16px;
height: 16px;
}
.delete-file-message {
font-style: normal;
float: right;
cursor: pointer;
color: #c8cad0;
}
.delete-file-message:hover {
color: #5d5e6d;
}
.icon-file-message {
margin-right: 5px;
}