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

Nice styling and fix sizing issue for chatrooms list and info

Browse Source
This commit is contained in:
JC Brand 2015-10-30 17:33:14 +00:00
parent c647783281
commit cd4d6a981c
5 changed files with 33 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
css/converse.css
View File

@ -1053,9 +1053,9 @@
width: auto;
z-index: 30; }
#conversejs ::selection {
background-color: #E1E6E5; }
background-color: #DCF9F6; }
#conversejs ::-moz-selection {
background-color: #E1E6E5; }
background-color: #DCF9F6; }
#conversejs .no-text-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
@ -1435,7 +1435,7 @@
padding: 5px;
z-index: 98; }
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover {
background-color: #E1E6E5; }
background-color: #DCF9F6; }
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li {
padding: 7px;
background-color: white;
@ -1449,7 +1449,7 @@
padding: 1px;
text-decoration: none; }
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li:hover {
background-color: #E1E6E5; }
background-color: #DCF9F6; }
#conversejs .chatbox .dragresize {
background: transparent;
border: 0;
@ -1552,34 +1552,28 @@
color: #818479;
font-weight: normal;
padding: 0;
padding-bottom: 0.5em;
text-shadow: 0 1px 0 #FAFAFA; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom {
border: none;
clear: both;
color: #818479;
display: block;
font-weight: bold;
overflow: hidden;
padding: 0;
padding-top: 0.5em;
text-overflow: ellipsis;
padding: 0.4em;
text-shadow: 0 1px 0 #FAFAFA;
white-space: nowrap; }
word-wrap: break-word; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom:hover {
background-color: #E1E6E5; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom:hover .room-info {
display: block;
font-size: 14px; }
background-color: #DCF9F6; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.room-info {
width: 15px;
display: none;
clear: right; }
clear: right;
display: block; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.room-info:before {
font-size: 15px; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.open-room {
float: left;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 150px; }
width: 85%; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom .room-info {
font-size: 11px;
font-style: normal;
@ -1613,7 +1607,7 @@
z-index: 21;
background-color: #FCFDFD; }
#conversejs #controlbox .dropdown dd ul li:hover {
background-color: #E1E6E5; }
background-color: #DCF9F6; }
#conversejs #controlbox .dropdown dd.search-xmpp ul {
box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
#conversejs #controlbox .dropdown dd.search-xmpp ul li:hover {
@ -1754,7 +1748,6 @@
border-top-right-radius: 4px;
color: #0a0a0a;
float: right;
font-weight: bold;
height: 100%;
margin: 0 7px;
padding: 10px 8px 0 8px; }
@ -1779,9 +1772,8 @@
#conversejs #converse-roster .filter-type {
display: table-cell;
float: right;
font-size: calc(14px - 2px);
font-size: calc(14px - 1px);
height: 25px;
margin: 0 0 0.5em -1px;
padding: 0;
width: 84px;
border-radius: 0;
@ -1813,7 +1805,7 @@
padding: 0.5em;
text-shadow: 0 1px 0 #FAFAFA; }
#conversejs #converse-roster .roster-contacts dt.roster-group:hover {
background-color: #E1E6E5; }
background-color: #DCF9F6; }
#conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle {
color: #818479;
display: block;
@ -1829,7 +1821,7 @@
padding: 4px 2px 0 4px;
text-shadow: 0 1px 0 #FAFAFA; }
#conversejs #converse-roster .roster-contacts dd:hover {
background-color: #E1E6E5; }
background-color: #DCF9F6; }
#conversejs #converse-roster .roster-contacts dd:hover a.remove-xmpp-contact {
display: inline-block; }
#conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact.request-actions {

6
mockup/controlbox.html
View File

@ -271,7 +271,11 @@
<a class="room-info icon-room-info" data-room-jid="eee@conference.opkode.com" title="Show more information on this room" href="#">&nbsp;</a>
</dd>
<dd class="available-chatroom">
<a class="open-room" data-room-jid="hello@conference.opkode.com" title="Click to open this room" href="#">Software Development</a>
<a class="open-room" data-room-jid="hello@conference.opkode.com" title="Click to open this room" href="#">Software Development Techniques</a>
<a class="room-info icon-room-info" data-room-jid="hello@conference.opkode.com" title="Show more information on this room" href="#">&nbsp;</a>
</dd>
<dd class="available-chatroom">
<a class="open-room" data-room-jid="hello@conference.opkode.com" title="Click to open this room" href="#">Support</a>
<a class="room-info icon-room-info" data-room-jid="hello@conference.opkode.com" title="Show more information on this room" href="#">&nbsp;</a>
</dd>
</dl>

23
sass/_controlbox.scss
View File

@ -108,6 +108,7 @@
color: $text-color;
font-weight: normal;
padding: 0;
padding-bottom: 0.5em;
text-shadow: 0 1px 0 $text-shadow-color;
}
dd.available-chatroom {
@ -115,32 +116,25 @@
clear: both;
color: $text-color;
display: block;
font-weight: bold;
overflow: hidden;
padding: 0;
padding-top: 0.5em;
text-overflow: ellipsis;
padding: 0.4em;
text-shadow: 0 1px 0 $text-shadow-color;
white-space: nowrap;
word-wrap: break-word;
&:hover {
background-color: $highlight-color;
.room-info {
display: block;
font-size: 14px;
}
}
a {
&.room-info {
width: 15px;
display: none;
clear: right;
display: block;
&:before {
font-size: 15px;
}
}
&.open-room {
float: left;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 150px;
width: 85%;
}
}
.room-info {
@ -377,7 +371,6 @@
border-top-right-radius: $chatbox-border-radius;
color: #0a0a0a;
float: right;
font-weight: bold;
height: 100%;
margin: 0 $chat-gutter;
padding: 10px 8px 0 8px;

3
sass/_roster.scss
View File

@ -23,9 +23,8 @@
.filter-type {
display: table-cell;
float: right;
font-size: calc(#{$font-size} - 2px);
font-size: calc(#{$font-size} - 1px);
height: $controlbox-dropdown-height;
margin: 0 0 0.5em -1px;
padding: 0;
width: 84px;
border-radius: 0;

3
sass/_variables.scss
View File

@ -10,7 +10,6 @@ $text-shadow-color: #FAFAFA !default;
$text-color: #818479 !default;
$border-color: #CCC !default;
$icon-color: #114327 !default;
$highlight-color: #E1E6E5 !default;
$chat-head-color: #F4A261 !default;
$chatroom-head-color: #E76F51 !default;
$chat-head-text-color: white !default;
@ -21,6 +20,8 @@ $chat-textarea-height: 70px !default;
$message-them-color: #1A9707 !default;
$roster-height: 194px !default;
$highlight-color: #DCF9F6 !default;
$controlbox-head-color: #577BDD !default;
$controlbox-dropdown-height: 25px !default;