Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Various style improvements related to embedded chats.

Browse Source
This commit is contained in:
JC Brand 2017-02-03 12:26:14 +00:00
parent 552b80fe69
commit ba32dfdb83
5 changed files with 67 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
css/converse-muc-embedded.css
View File

@ -28,24 +28,37 @@
box-shadow: none; }
#converse-embedded-chat .chatbox .chat-title {
padding: 0.3em;
font-size: 110%; }
font-size: 150%; }
#converse-embedded-chat .chatbox-btn {
display: none; }
#converse-embedded-chat .chatroom .box-flyout {
min-width: auto;
width: 100%;
height: 90vh; }
height: 55vh; }
#converse-embedded-chat .chatroom .box-flyout .chat-body {
height: -webkit-calc(100% - 55px);
height: calc(100% - 55px); }
#converse-embedded-chat .chatroom .box-flyout .occupants-heading {
font-size: 150%; }
#converse-embedded-chat .chatroom .box-flyout .chat-content {
height: calc(100% - 97px); }
#converse-embedded-chat .chatroom .box-flyout .chat-content .chat-message {
margin: 0.5em;
font-size: 120%; }
#converse-embedded-chat .chatroom .box-flyout .sendXMPPMessage .chat-textarea {
padding: 0.5em;
font-size: 110%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container {
height: auto;
font-size: 180%;
float: left;
height: 100%;
width: 100%;
position: relative; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input {
font-size: 60%; }
#converse-embedded-chat .chatroom .box-flyout .occupants .occupant-list {
padding-left: 0.3em; }
#converse-embedded-chat .chatroom .box-flyout .occupants .occupant-list li.occupant {
font-size: 14px; }
font-size: 120%; }
/*# sourceMappingURL=converse-muc-embedded.css.map */

32
css/converse.css
View File

@ -1327,7 +1327,7 @@
#converse-embedded-chat form.pure-form.converse-form,
#conversejs form.pure-form.converse-form {
background: white;
margin: 1em; }
padding: 1em; }
#converse-embedded-chat form.pure-form.converse-form legend,
#conversejs form.pure-form.converse-form legend {
color: #818479; }
@ -1344,7 +1344,8 @@
#conversejs form.pure-form.converse-form input[type=number],
#conversejs form.pure-form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=submit] {
height: 2.2em; }
height: 2.2em;
padding: 0.5em; }
#converse-embedded-chat form.pure-form.converse-form input[type=button],
#converse-embedded-chat form.pure-form.converse-form input[type=submit],
#conversejs form.pure-form.converse-form input[type=button],
@ -1366,7 +1367,11 @@
color: #818479; }
#converse-embedded-chat form.pure-form.converse-centered-form,
#conversejs form.pure-form.converse-centered-form {
text-align: center; }
position: absolute;
top: 30%;
transform: translateY(-50%);
text-align: center;
width: 100%; }
#converse-embedded-chat .chat-textarea-chatbox-selected,
#conversejs .chat-textarea-chatbox-selected {
border: 1px solid #578308;
@ -1731,14 +1736,17 @@
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley {
color: #2A9D8F;
padding-left: 5px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li {
font-size: 14px;
padding: 5px;
z-index: 98; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul {
left: 0; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li {
font-size: 14px;
padding: 5px;
z-index: 98; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li {
padding: 7px;
@ -2353,7 +2361,7 @@
border: 0;
color: #818479;
font-size: 14px;
height: 100%;
height: 289px;
height: -webkit-calc(100% - 55px);
height: calc(100% - 55px);
overflow-y: auto;

1
sass/_chatbox.scss
View File

@ -326,6 +326,7 @@
color: $link-color;
padding-left: 5px;
ul {
left: 0;
li {
font-size: $font-size;
padding: 5px;

7
sass/_core.scss
View File

@ -160,7 +160,7 @@
form {
&.pure-form.converse-form {
background: white;
margin: 1em;
padding: 1em;
legend {
color: $text-color;
}
@ -173,6 +173,7 @@
input[type=button],
input[type=submit] {
height: 2.2em;
padding: 0.5em;
}
input[type=button],
input[type=submit] {
@ -194,7 +195,11 @@
}
}
&.pure-form.converse-centered-form {
position: absolute;
top: 30%;
transform: translateY(-50%);
text-align: center;
width: 100%;
}
}

27
sass/_muc_embedded.scss
View File

@ -28,7 +28,7 @@
}
.chat-title {
padding: 0.3em;
font-size: 110%;
font-size: 150%;
}
}
.chatbox-btn {
@ -38,24 +38,43 @@
.box-flyout {
min-width: auto;
width: 100%;
height: 90vh;
height: 55vh;
.chat-body {
@include calc(height, '100% - #{$chat-head-height}');
}
.occupants-heading {
font-size: 150%;
}
.chat-content {
height: calc(100% - #{$toolbar-height + $chat-textarea-height +2px});
.chat-message {
margin: 0.5em;
font-size: 120%;
}
}
.sendXMPPMessage {
.chat-textarea {
padding: 0.5em;
font-size: 110%;
}
}
.chatroom-body {
.chatroom-form-container {
height: auto;
font-size: 180%;
float: left;
height: 100%;
width: 100%;
position: relative;
input {
font-size: 60%;
}
}
}
.occupants {
.occupant-list {
padding-left: 0.3em;
li.occupant {
font-size: 14px;
font-size: 120%;
}
}
}