nitro-react/src/views/room/widgets/chat-input/ChatInputView.scss

78 lines
1.8 KiB
SCSS
Raw Normal View History

2021-05-12 02:29:00 +02:00
@media only screen and (max-width: 600px) {
.nitro-chat-input {
bottom: 65px !important;
}
}
2021-04-24 03:05:37 +02:00
.nitro-chat-input {
2021-05-05 00:41:47 +02:00
position: fixed;
display: flex;
2021-05-12 02:29:00 +02:00
bottom: 9px;
left: 50%;
transform: translateX(-50%);
2021-05-05 00:41:47 +02:00
pointer-events: none;
z-index: $chatinput-zindex;
2021-04-24 03:05:37 +02:00
2021-05-05 00:41:47 +02:00
.chatinput-container {
position: relative;
2021-05-12 02:29:00 +02:00
height: 40px;
2021-05-05 00:41:47 +02:00
border-radius: 8px;
2021-05-12 02:29:00 +02:00
border: 2px solid rgb(0, 0, 0);
2021-05-05 00:41:47 +02:00
background: #EDEDED;
pointer-events: all;
2021-05-12 02:29:00 +02:00
padding-right: 30px;
width: 100%;
2021-05-05 00:41:47 +02:00
.input-sizer {
display: inline-grid;
vertical-align: top;
align-items: center;
position: relative;
height: 100%;
2021-05-12 02:29:00 +02:00
padding: 0 10px;
2021-05-05 00:41:47 +02:00
&::after,
input,
textarea {
width: auto;
min-width: 1em;
grid-area: 1 / 2;
margin: 0;
resize: none;
background: none;
appearance: none;
border: none;
}
&::after {
content: attr(data-value) ' ';
visibility: hidden;
white-space: pre-wrap;
}
}
.chat-input {
height: 100%;
font-size: 16px;
outline: 0;
border: 0;
position: relative;
background: transparent;
}
&:before {
content: "";
position: absolute;
width: 98%;
height: 5px;
border-radius: 8px;
top: 1px;
left: 0;
right: 0;
margin: auto;
background: rgb(255, 255, 255);
z-index: 1;
}
}
2021-04-24 03:05:37 +02:00
}