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

updates #1068

Browse Source 
- For roster contacts, only show remove icons on hover.
- Show light background color when hovering over an item in the
controlbox.

Ideally this background color will be 100% of the controlbox width, but
I'm not opening that can of worms now...
This commit is contained in:
JC Brand 2018-05-11 10:19:14 +02:00
parent 1d8a45ff88
commit 73807959d3
9 changed files with 312 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
css/converse.css
View File

@ -6987,9 +6987,6 @@ body.reset {
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
#conversejs .list-container {
text-align: left;
margin: 0.3em 0; }
#conversejs .btn {
color: #fff; }
#conversejs .btn .fa {
@ -7801,15 +7798,6 @@ body.reset {
text-overflow: ellipsis; }
#conversejs #controlbox .controlbox-pane .userinfo .profile {
margin-bottom: 0.75em; }
#conversejs #controlbox .list-container .items-list .list-item {
border: none;
clear: both;
color: #666;
display: block;
height: 2em;
overflow: hidden;
text-shadow: 0 1px 0 #FAFAFA;
word-wrap: break-word; }
#conversejs #controlbox #chatrooms {
padding: 0; }
#conversejs #controlbox #chatrooms form.add-chatroom {
@ -7819,56 +7807,6 @@ body.reset {
#conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
width: 100%; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle {
display: block;
color: #666;
padding: 0 0 0.5rem 0; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle:hover {
color: #585B51; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list {
margin: 0.5em 0;
text-align: left; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a:hover {
color: #206485; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.fa:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.fa:hover {
color: #818479; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .open-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .open-room {
width: 100%;
font-weight: bold; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.room-info:before,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.room-info:before {
font-size: 15px; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.open-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.open-room {
width: 68%;
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 0.5em; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.available-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.available-room {
width: 85%; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark {
color: #A8ABA1; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on {
color: #578EA9; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on:hover {
color: #206485; }
#conversejs #controlbox .controlbox-section {
margin: 1em 0 0 0; }
#conversejs #controlbox .controlbox-section .controlbox-heading {
@ -8017,9 +7955,89 @@ body.reset {
#conversejs:not(.fullscreen) #controlbox .controlbox-panes {
border-radius: 4px; }
#conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicator {
#conversejs .list-container {
text-align: left;
padding: 0.3em 0; }
#conversejs .list-container .rooms-toggle {
display: block;
color: #666;
padding: 0 0 0.5rem 0; }
#conversejs .list-container .rooms-toggle:hover {
color: #585B51; }
#conversejs .list-container .items-list {
text-align: left; }
#conversejs .list-container .items-list .list-item {
border: none;
clear: both;
color: #666;
display: block;
height: 2em;
overflow: hidden;
padding-top: 0.5em;
text-shadow: 0 1px 0 #FAFAFA;
word-wrap: break-word; }
#conversejs .list-container .items-list .available-chatroom:hover,
#conversejs .list-container .items-list .open-headline:hover,
#conversejs .list-container .items-list .open-chatroom:hover {
background-color: #eff4f7; }
#conversejs .list-container .items-list .available-chatroom.unread-msgs .msgs-indicator,
#conversejs .list-container .items-list .open-headline.unread-msgs .msgs-indicator,
#conversejs .list-container .items-list .open-chatroom.unread-msgs .msgs-indicator {
border-radius: 10%;
opacity: 1; }
#conversejs .list-container .items-list .available-chatroom.unread-msgs .available-room,
#conversejs .list-container .items-list .available-chatroom.unread-msgs .open-room,
#conversejs .list-container .items-list .open-headline.unread-msgs .available-room,
#conversejs .list-container .items-list .open-headline.unread-msgs .open-room,
#conversejs .list-container .items-list .open-chatroom.unread-msgs .available-room,
#conversejs .list-container .items-list .open-chatroom.unread-msgs .open-room {
width: 100%;
font-weight: bold; }
#conversejs .list-container .items-list .available-chatroom a:hover,
#conversejs .list-container .items-list .open-headline a:hover,
#conversejs .list-container .items-list .open-chatroom a:hover {
color: #206485; }
#conversejs .list-container .items-list .available-chatroom a.room-info:before,
#conversejs .list-container .items-list .open-headline a.room-info:before,
#conversejs .list-container .items-list .open-chatroom a.room-info:before {
font-size: 15px; }
#conversejs .list-container .items-list .available-chatroom a.open-room,
#conversejs .list-container .items-list .open-headline a.open-room,
#conversejs .list-container .items-list .open-chatroom a.open-room {
width: 68%;
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 0.5em; }
#conversejs .list-container .items-list .available-chatroom a.available-room,
#conversejs .list-container .items-list .open-headline a.available-room,
#conversejs .list-container .items-list .open-chatroom a.available-room {
width: 85%; }
#conversejs .list-container .items-list .available-chatroom .add-bookmark,
#conversejs .list-container .items-list .available-chatroom .remove-bookmark,
#conversejs .list-container .items-list .open-headline .add-bookmark,
#conversejs .list-container .items-list .open-headline .remove-bookmark,
#conversejs .list-container .items-list .open-chatroom .add-bookmark,
#conversejs .list-container .items-list .open-chatroom .remove-bookmark {
color: #A8ABA1; }
#conversejs .list-container .items-list .available-chatroom .add-bookmark.button-on,
#conversejs .list-container .items-list .available-chatroom .remove-bookmark.button-on,
#conversejs .list-container .items-list .open-headline .add-bookmark.button-on,
#conversejs .list-container .items-list .open-headline .remove-bookmark.button-on,
#conversejs .list-container .items-list .open-chatroom .add-bookmark.button-on,
#conversejs .list-container .items-list .open-chatroom .remove-bookmark.button-on {
color: #578EA9; }
#conversejs .list-container .items-list .available-chatroom .add-bookmark.button-on:hover,
#conversejs .list-container .items-list .available-chatroom .remove-bookmark.button-on:hover,
#conversejs .list-container .items-list .open-headline .add-bookmark.button-on:hover,
#conversejs .list-container .items-list .open-headline .remove-bookmark.button-on:hover,
#conversejs .list-container .items-list .open-chatroom .add-bookmark.button-on:hover,
#conversejs .list-container .items-list .open-chatroom .remove-bookmark.button-on:hover {
color: #206485; }
#conversejs.fullscreen #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom a.open-room {
width: 80%; }
#conversejs #converse-roster {
text-align: left;
@ -8075,12 +8093,12 @@ body.reset {
clear: both;
color: #666;
display: block;
height: 24px;
overflow-y: hidden;
text-shadow: 0 1px 0 #FAFAFA;
line-height: 14px;
width: 100%;
margin-top: 0.5em; }
height: 2em;
padding-top: 0.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a {
line-height: 16px; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fa {
@ -8089,8 +8107,8 @@ body.reset {
padding: 0 0.2em 0 0; }
#conversejs #converse-roster .roster-contacts .roster-group li a:hover {
color: #206485; }
#conversejs #converse-roster .roster-contacts .roster-group li a.fa:hover {
color: #818479; }
#conversejs #converse-roster .roster-contacts .roster-group li a .fa:hover {
color: white; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
margin: 0;
padding: 0; }
@ -8134,16 +8152,20 @@ body.reset {
text-overflow: ellipsis; }
#conversejs #converse-roster .roster-contacts .roster-group li span {
padding: 0; }
#conversejs #converse-roster .roster-contacts .roster-group li a.decline-xmpp-request {
#conversejs #converse-roster .roster-contacts .roster-group li .decline-xmpp-request {
margin-left: 5px; }
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact {
#conversejs #converse-roster .roster-contacts .roster-group li .remove-xmpp-contact {
font-size: 10px;
float: right;
margin: 0;
padding: 0;
width: 2em; }
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:before {
width: 2em;
display: none; }
#conversejs #converse-roster .roster-contacts .roster-group li .remove-xmpp-contact:before {
font-size: 14px; }
#conversejs #converse-roster .roster-contacts .roster-group li:hover {
background-color: #eff4f7; }
#conversejs #converse-roster .roster-contacts .roster-group li:hover .remove-xmpp-contact {
display: inline-block; }
#conversejs #converse-roster span.pending-contact-name {
line-height: 16px;
width: 100%; }

169
css/inverse.css
View File

@ -6987,9 +6987,6 @@ body.reset {
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
#conversejs .list-container {
text-align: left;
margin: 0.3em 0; }
#conversejs .btn {
color: #fff; }
#conversejs .btn .fa {
@ -7871,15 +7868,6 @@ body {
text-overflow: ellipsis; }
#conversejs #controlbox .controlbox-pane .userinfo .profile {
margin-bottom: 0.75em; }
#conversejs #controlbox .list-container .items-list .list-item {
border: none;
clear: both;
color: #666;
display: block;
height: 2em;
overflow: hidden;
text-shadow: 0 1px 0 #FAFAFA;
word-wrap: break-word; }
#conversejs #controlbox #chatrooms {
padding: 0; }
#conversejs #controlbox #chatrooms form.add-chatroom {
@ -7889,56 +7877,6 @@ body {
#conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
width: 100%; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle {
display: block;
color: #666;
padding: 0 0 0.5rem 0; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle:hover {
color: #585B51; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list {
margin: 0.5em 0;
text-align: left; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a:hover {
color: #206485; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.fa:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.fa:hover {
color: #818479; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .open-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .open-room {
width: 100%;
font-weight: bold; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.room-info:before,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.room-info:before {
font-size: 15px; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.open-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.open-room {
width: 68%;
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 0.5em; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.available-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.available-room {
width: 85%; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark {
color: #A8ABA1; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on {
color: #578EA9; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on:hover {
color: #206485; }
#conversejs #controlbox .controlbox-section {
margin: 1em 0 0 0; }
#conversejs #controlbox .controlbox-section .controlbox-heading {
@ -8207,12 +8145,12 @@ body {
clear: both;
color: #666;
display: block;
height: 24px;
overflow-y: hidden;
text-shadow: 0 1px 0 #FAFAFA;
line-height: 16px;
width: 100%;
margin-top: 0.5em; }
height: 2em;
padding-top: 0.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a {
line-height: 22px; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fa {
@ -8221,8 +8159,8 @@ body {
padding: 0 0.2em 0 0; }
#conversejs #converse-roster .roster-contacts .roster-group li a:hover {
color: #206485; }
#conversejs #converse-roster .roster-contacts .roster-group li a.fa:hover {
color: #818479; }
#conversejs #converse-roster .roster-contacts .roster-group li a .fa:hover {
color: white; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
margin: 0;
padding: 0; }
@ -8266,26 +8204,111 @@ body {
text-overflow: ellipsis; }
#conversejs #converse-roster .roster-contacts .roster-group li span {
padding: 0; }
#conversejs #converse-roster .roster-contacts .roster-group li a.decline-xmpp-request {
#conversejs #converse-roster .roster-contacts .roster-group li .decline-xmpp-request {
margin-left: 5px; }
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact {
#conversejs #converse-roster .roster-contacts .roster-group li .remove-xmpp-contact {
font-size: 10px;
float: right;
margin: 0;
padding: 0;
width: 2em; }
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:before {
width: 2em;
display: none; }
#conversejs #converse-roster .roster-contacts .roster-group li .remove-xmpp-contact:before {
font-size: 16px; }
#conversejs #converse-roster .roster-contacts .roster-group li:hover {
background-color: #eff4f7; }
#conversejs #converse-roster .roster-contacts .roster-group li:hover .remove-xmpp-contact {
display: inline-block; }
#conversejs #converse-roster span.pending-contact-name {
line-height: 22px;
width: 100%; }
#conversejs #converse-roster {
padding-bottom: 3em; }
#conversejs .list-container {
text-align: left;
padding: 0.3em 0; }
#conversejs .list-container .rooms-toggle {
display: block;
color: #666;
padding: 0 0 0.5rem 0; }
#conversejs .list-container .rooms-toggle:hover {
color: #585B51; }
#conversejs .list-container .items-list {
text-align: left; }
#conversejs .list-container .items-list .list-item {
border: none;
clear: both;
color: #666;
display: block;
height: 2em;
overflow: hidden;
padding-top: 0.5em;
text-shadow: 0 1px 0 #FAFAFA;
word-wrap: break-word; }
#conversejs .list-container .items-list .available-chatroom:hover,
#conversejs .list-container .items-list .open-headline:hover,
#conversejs .list-container .items-list .open-chatroom:hover {
background-color: #eff4f7; }
#conversejs .list-container .items-list .available-chatroom.unread-msgs .msgs-indicator,
#conversejs .list-container .items-list .open-headline.unread-msgs .msgs-indicator,
#conversejs .list-container .items-list .open-chatroom.unread-msgs .msgs-indicator {
border-radius: 10%;
opacity: 1; }
#conversejs .list-container .items-list .available-chatroom.unread-msgs .available-room,
#conversejs .list-container .items-list .available-chatroom.unread-msgs .open-room,
#conversejs .list-container .items-list .open-headline.unread-msgs .available-room,
#conversejs .list-container .items-list .open-headline.unread-msgs .open-room,
#conversejs .list-container .items-list .open-chatroom.unread-msgs .available-room,
#conversejs .list-container .items-list .open-chatroom.unread-msgs .open-room {
width: 100%;
font-weight: bold; }
#conversejs .list-container .items-list .available-chatroom a:hover,
#conversejs .list-container .items-list .open-headline a:hover,
#conversejs .list-container .items-list .open-chatroom a:hover {
color: #206485; }
#conversejs .list-container .items-list .available-chatroom a.room-info:before,
#conversejs .list-container .items-list .open-headline a.room-info:before,
#conversejs .list-container .items-list .open-chatroom a.room-info:before {
font-size: 15px; }
#conversejs .list-container .items-list .available-chatroom a.open-room,
#conversejs .list-container .items-list .open-headline a.open-room,
#conversejs .list-container .items-list .open-chatroom a.open-room {
width: 68%;
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 0.5em; }
#conversejs .list-container .items-list .available-chatroom a.available-room,
#conversejs .list-container .items-list .open-headline a.available-room,
#conversejs .list-container .items-list .open-chatroom a.available-room {
width: 85%; }
#conversejs .list-container .items-list .available-chatroom .add-bookmark,
#conversejs .list-container .items-list .available-chatroom .remove-bookmark,
#conversejs .list-container .items-list .open-headline .add-bookmark,
#conversejs .list-container .items-list .open-headline .remove-bookmark,
#conversejs .list-container .items-list .open-chatroom .add-bookmark,
#conversejs .list-container .items-list .open-chatroom .remove-bookmark {
color: #A8ABA1; }
#conversejs .list-container .items-list .available-chatroom .add-bookmark.button-on,
#conversejs .list-container .items-list .available-chatroom .remove-bookmark.button-on,
#conversejs .list-container .items-list .open-headline .add-bookmark.button-on,
#conversejs .list-container .items-list .open-headline .remove-bookmark.button-on,
#conversejs .list-container .items-list .open-chatroom .add-bookmark.button-on,
#conversejs .list-container .items-list .open-chatroom .remove-bookmark.button-on {
color: #578EA9; }
#conversejs .list-container .items-list .available-chatroom .add-bookmark.button-on:hover,
#conversejs .list-container .items-list .available-chatroom .remove-bookmark.button-on:hover,
#conversejs .list-container .items-list .open-headline .add-bookmark.button-on:hover,
#conversejs .list-container .items-list .open-headline .remove-bookmark.button-on:hover,
#conversejs .list-container .items-list .open-chatroom .add-bookmark.button-on:hover,
#conversejs .list-container .items-list .open-chatroom .remove-bookmark.button-on:hover {
color: #206485; }
#conversejs.fullscreen #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom a.open-room {
width: 80%; }
#conversejs #converse-roster {
padding-bottom: 3em; }
#conversejs.converse-embedded .add-chatroom input[type="submit"],
#conversejs.converse-embedded .add-chatroom input[type="button"],
#conversejs .add-chatroom input[type="submit"],

76
sass/_controlbox.scss
View File

@ -226,21 +226,6 @@
}
}
.list-container {
.items-list {
.list-item {
border: none;
clear: both;
color: $text-color;
display: block;
height: 2em;
overflow: hidden;
text-shadow: 0 1px 0 $text-shadow-color;
word-wrap: break-word;
}
}
}
#chatrooms {
padding: 0;
@ -253,67 +238,6 @@
margin: 0;
padding: 0;
}
.rooms-list-container {
.rooms-toggle {
display: block;
color: $text-color;
padding: 0 0 0.5rem 0;
&:hover {
color: $dark-gray-color;
}
}
.rooms-list {
margin: 0.5em 0;
text-align: left;
.available-chatroom,
.open-chatroom {
a:hover {
color: $dark-link-color;
}
a.fa:hover {
color: $gray-color;
}
&.unread-msgs {
.available-room,
.open-room {
width: 100%;
font-weight: bold;
}
}
a {
&.room-info {
&:before {
font-size: 15px;
}
}
&.open-room {
width: 68%;
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 0.5em;
}
&.available-room {
width: 85%;
}
}
.add-bookmark,
.remove-bookmark {
&.button-on {
color: $link-color;
&:hover {
color: $dark-link-color;
}
}
color: $subdued-color;
}
}
}
}
}
.controlbox-section {

5
sass/_core.scss
View File

@ -229,11 +229,6 @@ body.reset {
-moz-osx-font-smoothing: grayscale;
}
.list-container {
text-align: left;
margin: 0.3em 0;
}
.btn {
color: #fff;
.fa {

90
sass/_roomslist.scss
View File

@ -1,11 +1,97 @@
#conversejs {
#controlbox {
.available-chatroom {
.list-container {
text-align: left;
padding: 0.3em 0;
.rooms-toggle {
display: block;
color: $text-color;
padding: 0 0 0.5rem 0;
&:hover {
color: $dark-gray-color;
}
}
.items-list {
text-align: left;
.list-item {
border: none;
clear: both;
color: $text-color;
display: block;
height: 2em;
overflow: hidden;
padding-top: 0.5em;
text-shadow: 0 1px 0 $text-shadow-color;
word-wrap: break-word;
}
.available-chatroom,
.open-headline,
.open-chatroom {
&:hover {
background-color: lighten($controlbox-head-color, 45%);
}
&.unread-msgs {
.msgs-indicator {
border-radius: 10%;
opacity: 1;
}
.available-room,
.open-room {
width: 100%;
font-weight: bold;
}
}
a {
&:hover {
color: $dark-link-color;
}
&.room-info {
&:before {
font-size: 15px;
}
}
&.open-room {
width: 68%;
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 0.5em;
}
&.available-room {
width: 85%;
}
}
.add-bookmark,
.remove-bookmark {
&.button-on {
color: $link-color;
&:hover {
color: $dark-link-color;
}
}
color: $subdued-color;
}
}
}
}
}
#conversejs.fullscreen {
#controlbox {
#chatrooms {
.bookmarks-list {
dl.rooms-list.bookmarks {
dd.available-chatroom {
a {
&.open-room {
width: 80%;
}
}
}
}
}
}
}

24
sass/_roster.scss
View File

@ -77,12 +77,12 @@
clear: both;
color: $text-color;
display: block;
height: 24px;
overflow-y: hidden;
text-shadow: 0 1px 0 $text-shadow-color;
line-height: $font-size;
width: 100%;
margin-top: 0.5em;
height: 2em;
padding-top: 0.5em;
&.requesting-xmpp-contact {
a {
@ -95,11 +95,13 @@
padding: 0 0.2em 0 0;
}
}
a:hover {
a {
&:hover {
color: $dark-link-color;
}
a.fa:hover {
color: $gray-color;
.fa:hover {
color: white;
}
}
.open-chat {
@ -159,20 +161,24 @@
span {
padding: 0;
}
a {
&.decline-xmpp-request {
.decline-xmpp-request {
margin-left: 5px;
}
&.remove-xmpp-contact {
.remove-xmpp-contact {
font-size: $font-size-tiny;
float: right;
margin: 0;
padding: 0;
width: 2em;
display: none;
&:before {
font-size: $font-size;
}
}
&:hover {
background-color: lighten($controlbox-head-color, 45%);
.remove-xmpp-contact {
display: inline-block;
}
}
}
}

2
sass/_variables.scss
View File

@ -96,6 +96,8 @@ $message-font-size: 14px !default;
$font-size-tiny: 10px !default;
$controlbox-width: 250px !default;
$controlbox-head-color: $light-blue !default;
$chat-gutter: 0.5em !default;
$minimized-chats-width: 130px !default;

2
sass/inverse.scss
View File

@ -46,9 +46,9 @@
@import "controlbox";
@import "inverse/controlbox";
@import "roster";
@import "roomslist";
@import "inverse/roster";
@import "bookmarks";
@import "inverse/bookmarks";
@import "chatrooms";
@import "inverse/chatrooms";
@import "headline";

17
sass/inverse/_bookmarks.scss
View File

@ -1,17 +0,0 @@
#conversejs.fullscreen {
#controlbox {
#chatrooms {
.bookmarks-list {
dl.rooms-list.bookmarks {
dd.available-chatroom {
a {
&.open-room {
width: 80%;
}
}
}
}
}
}
}
}