Restyled chatbar
This commit is contained in:
parent
029b90f2b1
commit
840c4965a5
@ -27,9 +27,9 @@
|
|||||||
margin: 0px;
|
margin: 0px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
&:nth-child(even) {
|
// &:nth-child(even) {
|
||||||
background-color: rgb(245,245,245);
|
// background-color: rgb(245,245,245);
|
||||||
}
|
// }
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@ -39,7 +39,7 @@
|
|||||||
|
|
||||||
#chatbody {
|
#chatbody {
|
||||||
@media @landscape {
|
@media @landscape {
|
||||||
height: calc(~'100% - 121px');
|
height: calc(~'100% - 70px');
|
||||||
}
|
}
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
padding-left: 0px;
|
padding-left: 0px;
|
||||||
@ -165,9 +165,13 @@
|
|||||||
float: left;
|
float: left;
|
||||||
width: 75%;
|
width: 75%;
|
||||||
resize: none;
|
resize: none;
|
||||||
padding:5px;
|
border-bottom-left-radius: 10px;
|
||||||
border-radius:4px;
|
border-top-left-radius: 10px;
|
||||||
|
border-bottom-right-radius: 0px;
|
||||||
|
border-top-right-radius: 0px;
|
||||||
|
|
||||||
border:1px solid extract(@lightGrey, 3);
|
border:1px solid extract(@lightGrey, 3);
|
||||||
|
margin: 0px;
|
||||||
|
|
||||||
@media @landscape {
|
@media @landscape {
|
||||||
height: 40px; /* same height as send button */
|
height: 40px; /* same height as send button */
|
||||||
@ -201,9 +205,10 @@
|
|||||||
|
|
||||||
.panel-footer {
|
.panel-footer {
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
/* padding: 10px; TODO: investigate (causes the overflow in the chat's title) */
|
|
||||||
position: relative;
|
position: relative;
|
||||||
background: extract(@white, 1);
|
background: extract(@white, 1);
|
||||||
|
padding: 0;
|
||||||
|
border-top: 1px solid extract(@lightGrey, 3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.private-chat-user-box {
|
.private-chat-user-box {
|
||||||
@ -220,34 +225,37 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#sendMessageButton {
|
#sendMessageButton {
|
||||||
background-color: extract(@azure, 1);
|
|
||||||
width: 20%; /* 75% for the message input, 5% margin between the two */
|
width: 20%; /* 75% for the message input, 5% margin between the two */
|
||||||
color: extract(@white, 1);
|
color: extract(@black, 1);
|
||||||
|
background-color: extract(@white, 1);
|
||||||
|
font-weight: bold;
|
||||||
|
height: 50px;
|
||||||
|
margin: 0px;
|
||||||
|
|
||||||
|
border: 1px solid extract(@lightGrey, 3);
|
||||||
|
border-bottom-left-radius: 00px;
|
||||||
|
border-top-left-radius: 0px;
|
||||||
|
border-top-right-radius: 10px;
|
||||||
|
border-bottom-right-radius: 10px;
|
||||||
|
|
||||||
@media @desktop-portrait {
|
@media @desktop-portrait {
|
||||||
width: 20%; /* 75% for the message input, 5% margin between the two */
|
width: 20%; /* 75% for the message input, 5% margin between the two */
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
margin-left: 5%;
|
|
||||||
}
|
}
|
||||||
@media @mobile-portrait {
|
@media @mobile-portrait {
|
||||||
width: 15vw;
|
width: 15vw;
|
||||||
height: 8vw;
|
height: 8vw;
|
||||||
font-size: 4vw;
|
font-size: 4vw;
|
||||||
margin-left: 5%;
|
|
||||||
}
|
}
|
||||||
@media @mobile-portrait-with-keyboard {
|
@media @mobile-portrait-with-keyboard {
|
||||||
width: 19vw;
|
width: 19vw;
|
||||||
height: 21vh;
|
height: 21vh;
|
||||||
font-size: 3vh;
|
font-size: 3vh;
|
||||||
margin-left: 1%;
|
|
||||||
margin-right: 1%;
|
|
||||||
marigin-top: 2vh;
|
|
||||||
margin-bottom: 2vh;
|
|
||||||
}
|
}
|
||||||
@media @landscape {
|
@media @landscape {
|
||||||
height: 40px;
|
height: 50px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
margin-left: 5%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -186,10 +186,6 @@ body {
|
|||||||
background: extract(@darkGrey, 4);
|
background: extract(@darkGrey, 4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-footer {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recordingStatus {
|
.recordingStatus {
|
||||||
background: none!important;
|
background: none!important;
|
||||||
border: none;
|
border: none;
|
||||||
|
@ -26,24 +26,25 @@
|
|||||||
{{#if privateChatDisabled}}
|
{{#if privateChatDisabled}}
|
||||||
<textarea id="newMessageInput" class="disabledChat" placeholder="Private chat is temporarily locked (disabled)" rel="tooltip" data-placement="top" title="Private chat is temporarily locked" disabled></textarea>
|
<textarea id="newMessageInput" class="disabledChat" placeholder="Private chat is temporarily locked (disabled)" rel="tooltip" data-placement="top" title="Private chat is temporarily locked" disabled></textarea>
|
||||||
{{else}}
|
{{else}}
|
||||||
<textarea id="newMessageInput" placeholder="Write a message..." rel="tooltip" data-placement="top" title="Write a new message"></textarea>
|
{{> chatInputControls}}
|
||||||
<button type="submit" id="sendMessageButton" class="btn" rel="tooltip" data-placement="top">
|
|
||||||
Send
|
|
||||||
</button>
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{else}}
|
{{else}}
|
||||||
{{#if publicChatDisabled}}
|
{{#if publicChatDisabled}}
|
||||||
<textarea id="newMessageInput" class="disabledChat" placeholder="Public chat is temporarily locked (disabled)" rel="tooltip" data-placement="top" title="Public chat is temporarily locked" disabled></textarea>
|
<textarea id="newMessageInput" class="disabledChat" placeholder="Public chat is temporarily locked (disabled)" rel="tooltip" data-placement="top" title="Public chat is temporarily locked" disabled></textarea>
|
||||||
{{else}}
|
{{else}}
|
||||||
<textarea id="newMessageInput" placeholder="Write a message..." rel="tooltip" data-placement="top" title="Write a new message"></textarea>
|
{{> chatInputControls}}
|
||||||
<button type="submit" id="sendMessageButton" class="btn" rel="tooltip" data-placement="top">
|
|
||||||
Send
|
|
||||||
</button>
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<template name="chatInputControls">
|
||||||
|
<textarea id="newMessageInput" rel="tooltip" data-placement="top" title="Write a new message"></textarea>
|
||||||
|
<button type="submit" id="sendMessageButton" class="btn" rel="tooltip" data-placement="top">
|
||||||
|
Send
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template name="chatOptions">
|
<template name="chatOptions">
|
||||||
<p>Chat Options:</p>
|
<p>Chat Options:</p>
|
||||||
{{> optionsFontSize}}
|
{{> optionsFontSize}}
|
||||||
|
Loading…
Reference in New Issue
Block a user