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

Move more Sass out of core into separate files.

Browse Source
This commit is contained in:
JC Brand 2015-10-28 07:33:50 +00:00
parent 37c6925e9c
commit ee9f73ab50
6 changed files with 123 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
css/converse.css
View File

@ -397,48 +397,12 @@
background-color: #176679; background-color: #176679;
border-right: 1px solid #176679; border-right: 1px solid #176679;
border-left: 1px solid #176679; } border-left: 1px solid #176679; }
#conversejs .chat-info {
color: #6C4C44; }
#conversejs .chat-error {
color: #681F2C;
font-weight: bold; }
#conversejs .chat-error,
#conversejs .chat-info,
#conversejs .chat-message {
padding: 2px 0; }
#conversejs .chat-message-room,
#conversejs .chat-message-them,
#conversejs .chat-message-me {
font-weight: bold;
white-space: nowrap;
max-width: 100px;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
float: left;
padding-right: 3px; }
#conversejs .chat-message-content {
word-wrap: break-word; }
#conversejs .chat-message-room,
#conversejs .chat-message-them {
color: #346121; }
#conversejs .chat-message-me {
color: #436F64; }
#conversejs .chat-event,
#conversejs .chat-date,
#conversejs .chat-info {
color: #808080; }
#conversejs li.chat-info { #conversejs li.chat-info {
padding-left: 10px; } padding-left: 10px; }
#conversejs .chat-date {
display: inline-block;
padding-top: 10px; }
#conversejs .not-implemented { #conversejs .not-implemented {
margin-top: 3em; margin-top: 3em;
margin-left: 0.3em; margin-left: 0.3em;
color: #808080; } color: #808080; }
#conversejs .mentioned {
font-weight: bold; }
#conversejs .delayed .chat-message-them { #conversejs .delayed .chat-message-them {
color: #FB5D50; } color: #FB5D50; }
#conversejs .delayed .chat-message-me { #conversejs .delayed .chat-message-me {
@ -484,26 +448,17 @@
padding: 1px 0 1px 5px; } padding: 1px 0 1px 5px; }
#conversejs .activated { #conversejs .activated {
display: block !important; } display: block !important; }
#conversejs a.subscribe-to-user { #conversejs form label {
padding-left: 2em;
font-weight: bold; }
#conversejs #found-users {
padding: 10px 0 5px 5px;
border: 0; }
#conversejs .form-help {
color: gray;
font-size: 85%;
padding-top: 5px; }
#conversejs .form-help:hover {
color: #6C4C44; }
#conversejs .chatroom-form label,
#conversejs .controlbox-pane label,
#conversejs #converse-register label,
#conversejs #converse-login label {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
height: auto; height: auto;
margin: 4px; } margin: 4px; }
#conversejs form .form-help {
color: gray;
font-size: 85%;
padding-top: 5px; }
#conversejs form .form-help:hover {
color: #6C4C44; }
#conversejs .chat-textarea-chatbox-selected { #conversejs .chat-textarea-chatbox-selected {
border: 1px solid #578308; border: 1px solid #578308;
margin: 0; } margin: 0; }
@ -572,6 +527,37 @@
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
padding: 5px; } padding: 5px; }
#conversejs .chatbox .chat-body .chat-event,
#conversejs .chatbox .chat-body .chat-date,
#conversejs .chatbox .chat-body .chat-info {
color: #808080; }
#conversejs .chatbox .chat-body .chat-date {
display: inline-block;
padding-top: 10px; }
#conversejs .chatbox .chat-body .chat-error,
#conversejs .chatbox .chat-body .chat-info,
#conversejs .chatbox .chat-body .chat-message {
padding: 2px 0; }
#conversejs .chatbox .chat-body .chat-message span {
font-weight: bold;
white-space: nowrap;
max-width: 100px;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
float: left;
padding-right: 3px; }
#conversejs .chatbox .chat-body .chat-message span.chat-message-them {
color: #346121; }
#conversejs .chatbox .chat-body .chat-message span.chat-message-me {
color: #436F64; }
#conversejs .chatbox .chat-body .chat-message .chat-message-content {
word-wrap: break-word; }
#conversejs .chatbox .chat-body .chat-info {
color: #6C4C44; }
#conversejs .chatbox .chat-body .chat-error {
color: #681F2C;
font-weight: bold; }
#conversejs .chatbox .chat-content { #conversejs .chatbox .chat-content {
position: relative; position: relative;
padding: 0.5em; padding: 0.5em;
@ -743,6 +729,9 @@
padding: 0 0 5px 5px; } padding: 0 0 5px 5px; }
#conversejs #controlbox form.search-xmpp-contact input { #conversejs #controlbox form.search-xmpp-contact input {
width: 8em; } width: 8em; }
#conversejs #controlbox a.subscribe-to-user {
padding-left: 2em;
font-weight: bold; }
#conversejs #controlbox #converse-register { #conversejs #controlbox #converse-register {
background: white; } background: white; }
#conversejs #controlbox #converse-register .title { #conversejs #controlbox #converse-register .title {
@ -993,6 +982,11 @@
height: calc(100% - 44px); height: calc(100% - 44px);
overflow-y: hidden; overflow-y: hidden;
overflow-x: hidden; } overflow-x: hidden; }
#conversejs #controlbox .controlbox-pane label {
font-size: 14px;
font-weight: bold;
height: auto;
margin: 4px; }
#conversejs #controlbox .controlbox-pane dd { #conversejs #controlbox .controlbox-pane dd {
margin-left: 0; margin-left: 0;
margin-bottom: 0; } margin-bottom: 0; }
@ -1169,6 +1163,10 @@
min-width: 200px; } min-width: 200px; }
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content { #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
padding: 0.5em 0.5em 0 0.5em; } padding: 0.5em 0.5em 0 0.5em; }
#conversejs .chatroom .box-flyout .chatroom-body .mentioned {
font-weight: bold; }
#conversejs .chatroom .box-flyout .chatroom-body .chat-message-room {
color: #346121; }
#conversejs .chatroom .box-flyout .chatroom-body .participants { #conversejs .chatroom .box-flyout .chatroom-body .participants {
display: table-cell; display: table-cell;
vertical-align: top; vertical-align: top;

42
sass/_chatbox.scss
View File

@ -65,6 +65,48 @@
margin: 0; margin: 0;
padding: 5px; padding: 5px;
} }
.chat-event,
.chat-date,
.chat-info {
color: #808080;
}
.chat-date {
display: inline-block;
padding-top: 10px;
}
.chat-error,
.chat-info,
.chat-message {
padding: 2px 0;
}
.chat-message {
span {
font-weight: bold;
white-space: nowrap;
max-width: 100px;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
float: left;
padding-right: 3px;
&.chat-message-them {
color: $message-them-color;
}
&.chat-message-me {
color: $link-color;
}
}
.chat-message-content {
word-wrap: break-word;
}
}
.chat-info {
color: $text-color;
}
.chat-error {
color: $warning-color;
font-weight: bold;
}
} }
.chat-content { .chat-content {
position: relative; position: relative;

6
sass/_chatrooms.scss
View File

@ -30,6 +30,12 @@
padding: 0.5em 0.5em 0 0.5em; // Work around a weird box-sizing issue in Chromium related to bottom padding. padding: 0.5em 0.5em 0 0.5em; // Work around a weird box-sizing issue in Chromium related to bottom padding.
} }
} }
.mentioned {
font-weight: bold;
}
.chat-message-room {
color: $message-them-color;
}
.participants { .participants {
display: table-cell; display: table-cell;
vertical-align: top; vertical-align: top;

11
sass/_controlbox.scss
View File

@ -18,6 +18,10 @@
width: 8em; width: 8em;
} }
} }
a.subscribe-to-user {
padding-left: 2em;
font-weight: bold;
}
#converse-register { #converse-register {
background: white; background: white;
@ -349,7 +353,12 @@
@include calc(height, '100% - #{$chat-head-height}'); @include calc(height, '100% - #{$chat-head-height}');
overflow-y: hidden; overflow-y: hidden;
overflow-x: hidden; overflow-x: hidden;
label {
font-size: $font-size;
font-weight: bold;
height: auto;
margin: 4px;
}
dd { dd {
margin-left: 0; margin-left: 0;
margin-bottom: 0; margin-bottom: 0;

73
sass/_core.scss
View File

@ -118,67 +118,17 @@
border-right: 1px solid #176679; border-right: 1px solid #176679;
border-left: 1px solid #176679; border-left: 1px solid #176679;
} }
.chat-info {
color: $text-color;
}
.chat-error {
color: $warning-color;
font-weight: bold;
}
.chat-error,
.chat-info,
.chat-message {
padding: 2px 0;
}
.chat-message-room,
.chat-message-them,
.chat-message-me {
font-weight: bold;
white-space: nowrap;
max-width: 100px;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
float: left;
padding-right: 3px;
}
.chat-message-content {
word-wrap: break-word;
}
.chat-message-room,
.chat-message-them {
color: $message-them-color;
}
.chat-message-me {
color: $link-color;
}
.chat-event,
.chat-date,
.chat-info {
color: #808080;
}
li.chat-info { li.chat-info {
padding-left: 10px; padding-left: 10px;
} }
.chat-date {
display: inline-block;
padding-top: 10px;
}
.not-implemented { .not-implemented {
margin-top: 3em; margin-top: 3em;
margin-left: 0.3em; margin-left: 0.3em;
color: #808080; color: #808080;
} }
.mentioned {
font-weight: bold;
}
.delayed { .delayed {
.chat-message-them { .chat-message-them {
color: #FB5D50; color: #FB5D50;
@ -246,16 +196,13 @@
display: block !important; display: block !important;
} }
a.subscribe-to-user { form {
padding-left: 2em; label {
font-size: $font-size;
font-weight: bold; font-weight: bold;
height: auto;
margin: 4px;
} }
#found-users {
padding: 10px 0 5px 5px;
border: 0;
}
.form-help { .form-help {
color: gray; color: gray;
font-size: 85%; font-size: 85%;
@ -264,22 +211,12 @@
color: $text-color; color: $text-color;
} }
} }
.chatroom-form label,
.controlbox-pane label,
#converse-register label,
#converse-login label {
font-size: $font-size;
font-weight: bold;
height: auto;
margin: 4px;
} }
.chat-textarea-chatbox-selected { .chat-textarea-chatbox-selected {
border: 1px solid #578308; border: 1px solid #578308;
margin: 0; margin: 0;
} }
.chat-textarea-chatroom-selected { .chat-textarea-chatroom-selected {
border: 2px solid $link-color; border: 2px solid $link-color;
margin: 0; margin: 0;

2
src/templates/controlbox.html
View File

@ -4,7 +4,7 @@
<div class="dragresize dragresize-left"></div> <div class="dragresize dragresize-left"></div>
<div class="chat-head controlbox-head"> <div class="chat-head controlbox-head">
<ul id="controlbox-tabs"></ul> <ul id="controlbox-tabs"></ul>
<a class="close-chatbox-button icon-close"></a> <a class="chatbox-btn close-chatbox-button icon-close"></a>
</div> </div>
<div class="controlbox-panes"></div> <div class="controlbox-panes"></div>
</div> </div>