nitro-react/src/views/room/widgets/chat-input/ChatInputView.scss
2021-05-12 04:52:24 -04:00

76 lines
1.7 KiB
SCSS

@media only screen and (max-width: 600px) {
.nitro-chat-input {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 65px !important;
}
}
.nitro-chat-input {
pointer-events: none;
z-index: $chatinput-zindex;
.chatinput-container {
position: relative;
height: 40px;
border-radius: 8px;
border: 2px solid rgb(0, 0, 0);
background: #EDEDED;
pointer-events: all;
padding-right: 30px;
width: 100%;
.input-sizer {
display: inline-grid;
vertical-align: top;
align-items: center;
position: relative;
height: 100%;
padding: 0 10px;
&::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;
}
}
}