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

CSS changes.

Browse Source 
- Try to harmonize the color scheme a bit.
- Visually distinguish the toolbar.
- Remove the map file from version control
This commit is contained in:
JC Brand 2015-06-27 09:14:02 +02:00
parent 2c21575719
commit f5c73cfeaa
5 changed files with 49 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -48,3 +48,5 @@ converse-no-otr.js
converse-no-otr.min.js converse-no-otr.min.js
converse.nojquery.js converse.nojquery.js
converse.nojquery.min.js converse.nojquery.min.js
css/converse.css.map

53
css/converse.css
View File

@ -51,9 +51,9 @@
/* @group Tabs */ /* @group Tabs */
/* status dropdown styles */ } /* status dropdown styles */ }
#conversejs ::selection { #conversejs ::selection {
background-color: #E3C9C1; } background-color: #E1E6E5; }
#conversejs ::-moz-selection { #conversejs ::-moz-selection {
background-color: #E3C9C1; } background-color: #E1E6E5; }
#conversejs *, #conversejs *:before, #conversejs *:after { #conversejs *, #conversejs *:before, #conversejs *:after {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -484,7 +484,7 @@
background-color: #ffffff; background-color: #ffffff;
line-height: 1.3em; line-height: 1.3em;
height: 206px; height: 206px;
height: calc(100% - 84px); } height: calc(100% - 89px); }
#conversejs .chat-info { #conversejs .chat-info {
color: #6C4C44; } color: #6C4C44; }
#conversejs .chat-error { #conversejs .chat-error {
@ -509,7 +509,7 @@
word-wrap: break-word; } word-wrap: break-word; }
#conversejs .chat-message-room, #conversejs .chat-message-room,
#conversejs .chat-message-them { #conversejs .chat-message-them {
color: #4B7003; } color: #346121; }
#conversejs .chat-message-me { #conversejs .chat-message-me {
color: #436F64; } color: #436F64; }
#conversejs .chat-event, #conversejs .chat-event,
@ -570,7 +570,7 @@
position: relative; position: relative;
padding: 5px; } padding: 5px; }
#conversejs .chat-head-chatroom { #conversejs .chat-head-chatroom {
background-color: #0F592F; } background-color: #346121; }
#conversejs .chat-head-chatbox { #conversejs .chat-head-chatbox {
background-color: #436F64; } background-color: #436F64; }
#conversejs .user-custom-message, #conversejs .user-custom-message,
@ -592,7 +592,7 @@
#conversejs dl.add-converse-contact { #conversejs dl.add-converse-contact {
margin: 0 0.5em 0.75em 0.5em; } margin: 0 0.5em 0.75em 0.5em; }
#conversejs .fancy-dropdown { #conversejs .fancy-dropdown {
border: 1px solid #F1DCD6; border: 1px solid #E5E9E8;
height: 25px; height: 25px;
text-align: left; } text-align: left; }
#conversejs .fancy-dropdown .choose-xmpp-status { #conversejs .fancy-dropdown .choose-xmpp-status {
@ -629,7 +629,7 @@
#conversejs a.configure-chatroom-button, #conversejs a.configure-chatroom-button,
#conversejs a.toggle-chatbox-button, #conversejs a.toggle-chatbox-button,
#conversejs a.close-chatbox-button { #conversejs a.close-chatbox-button {
border-radius: 6px; border-radius: 5px;
border: 1px solid #888; border: 1px solid #888;
color: white; color: white;
cursor: pointer; cursor: pointer;
@ -637,7 +637,10 @@
float: right; float: right;
font-size: 10px; font-size: 10px;
margin: 0 0 0 3px; margin: 0 0 0 3px;
padding: 3px 3px 2px 3px; padding-top: 3px;
padding-bottom: 3px;
padding-left: 2px;
padding-right: 3px;
text-decoration: none; } text-decoration: none; }
#conversejs a.configure-chatroom-button:active, #conversejs a.configure-chatroom-button:active,
#conversejs a.toggle-chatbox-button:active, #conversejs a.toggle-chatbox-button:active,
@ -804,7 +807,7 @@
#conversejs dd.available-chatroom a.open-room { #conversejs dd.available-chatroom a.open-room {
width: 150px; } width: 150px; }
#conversejs dd.available-chatroom:hover { #conversejs dd.available-chatroom:hover {
background-color: #E3C9C1; } background-color: #E1E6E5; }
#conversejs dd.available-chatroom:hover .room-info { #conversejs dd.available-chatroom:hover .room-info {
display: block; display: block;
font-size: 14px; } font-size: 14px; }
@ -818,7 +821,7 @@
text-shadow: 0 1px 0 #FAFAFA; } text-shadow: 0 1px 0 #FAFAFA; }
#conversejs .roster-group:hover, #conversejs .roster-group:hover,
#conversejs #converse-roster dd:hover { #conversejs #converse-roster dd:hover {
background-color: #E3C9C1; } background-color: #E1E6E5; }
#conversejs .chatbox, #conversejs .chatbox,
#conversejs .chatroom { #conversejs .chatroom {
height: 35px; height: 35px;
@ -853,16 +856,16 @@
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
border: 1px solid #F1DCD6; border: 1px solid #E5E9E8;
width: 100%; width: 100%;
z-index: 21; z-index: 21;
background-color: #F1E2DD; } background-color: beige; }
#conversejs .chatbox .dropdown dd ul li:hover { #conversejs .chatbox .dropdown dd ul li:hover {
background-color: #E3C9C1; } background-color: #E1E6E5; }
#conversejs .chatbox .dropdown dd.search-xmpp ul { #conversejs .chatbox .dropdown dd.search-xmpp ul {
box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); } box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
#conversejs .chatbox .dropdown dd.search-xmpp ul li:hover { #conversejs .chatbox .dropdown dd.search-xmpp ul li:hover {
background-color: #F1E2DD; } background-color: beige; }
#conversejs .chatbox .dropdown dt a span { #conversejs .chatbox .dropdown dt a span {
cursor: pointer; cursor: pointer;
display: block; display: block;
@ -1104,7 +1107,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
position: relative; position: relative;
height: 82px; height: 87px;
width: 200px; } width: 200px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
#conversejs form.sendXMPPMessage { #conversejs form.sendXMPPMessage {
@ -1120,9 +1123,10 @@
#conversejs .chat-toolbar { #conversejs .chat-toolbar {
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
padding: 0 4px; padding: 5px;
height: 20px; height: 25px;
display: block; } display: block;
background-color: beige; }
#conversejs .chat-toolbar a { #conversejs .chat-toolbar a {
color: #436F64; } color: #436F64; }
#conversejs .chat-toolbar .unencrypted a, #conversejs .chat-toolbar .unencrypted a,
@ -1149,7 +1153,7 @@
#conversejs .chat-toolbar ul { #conversejs .chat-toolbar ul {
background: #fff; background: #fff;
bottom: 100%; bottom: 100%;
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
display: none; display: none;
font-size: 12px; font-size: 12px;
margin: 0 0 1px 0; margin: 0 0 1px 0;
@ -1162,14 +1166,16 @@
#conversejs .chat-toolbar ul li a:hover { #conversejs .chat-toolbar ul li a:hover {
color: #8f2831; } color: #8f2831; }
#conversejs .chat-toolbar .toggle-smiley { #conversejs .chat-toolbar .toggle-smiley {
color: #436F64;
padding-left: 5px; } padding-left: 5px; }
#conversejs .chat-toolbar .toggle-smiley ul li { #conversejs .chat-toolbar .toggle-smiley ul li {
font-size: 14px; font-size: 14px;
padding: 5px; padding: 5px;
z-index: 98; } z-index: 98; }
#conversejs .chat-toolbar .toggle-smiley ul li:hover { #conversejs .chat-toolbar .toggle-smiley ul li:hover {
background-color: #E3C9C1; } background-color: #E1E6E5; }
#conversejs .chat-toolbar .toggle-otr ul li { #conversejs .chat-toolbar .toggle-otr ul li {
padding: 7px;
background-color: white; background-color: white;
display: block; display: block;
z-index: 99; } z-index: 99; }
@ -1180,9 +1186,12 @@
display: block; display: block;
padding: 1px; padding: 1px;
text-decoration: none; } text-decoration: none; }
#conversejs .chat-toolbar .toggle-otr ul li:hover {
background-color: #E1E6E5; }
#conversejs .chat-toolbar-text { #conversejs .chat-toolbar-text {
font-size: 12px; font-size: 12px;
padding-right: 3px; } padding-right: 3px;
text-shadow: 0 1px 0 white; }
#conversejs #set-custom-xmpp-status { #conversejs #set-custom-xmpp-status {
float: left; float: left;
padding: 0; } padding: 0; }
@ -1206,7 +1215,7 @@
#conversejs #controlbox div.xmpp-status { #conversejs #controlbox div.xmpp-status {
display: inline; } display: inline; }
#conversejs .chatbox .dropdown { #conversejs .chatbox .dropdown {
background-color: #F1E2DD; } background-color: beige; }
#conversejs .chatbox .dropdown dd { #conversejs .chatbox .dropdown dd {
position: relative; } position: relative; }
#conversejs .chatbox .dropdown dd, #conversejs .chatbox .dropdown dd,

7
css/converse.css.map
View File

File diff suppressed because one or more lines are too long

11
sass/_core.scss
View File

@ -1313,9 +1313,10 @@
.chat-toolbar { .chat-toolbar {
font-size: $font-size; font-size: $font-size;
margin: 0; margin: 0;
padding: 0 4px; padding: 5px;
height: $toolbar-height; height: $toolbar-height;
display: block; display: block;
background-color: $light-background-color;
a { a {
color: $link-color; color: $link-color;
@ -1356,7 +1357,7 @@
ul { ul {
background: #fff; background: #fff;
bottom: 100%; bottom: 100%;
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
display: none; display: none;
font-size: 12px; font-size: 12px;
margin: 0 0 1px 0; margin: 0 0 1px 0;
@ -1373,6 +1374,7 @@
} }
.toggle-smiley { .toggle-smiley {
color: $link-color;
padding-left: 5px; padding-left: 5px;
ul { ul {
li { li {
@ -1389,6 +1391,7 @@
.toggle-otr { .toggle-otr {
ul { ul {
li { li {
padding: 7px;
background-color: white; background-color: white;
display: block; display: block;
z-index: 99; z-index: 99;
@ -1401,6 +1404,9 @@
text-decoration: none; text-decoration: none;
} }
} }
li:hover {
background-color: $highlight-color;
}
} }
} }
} }
@ -1408,6 +1414,7 @@
.chat-toolbar-text { .chat-toolbar-text {
font-size: 12px; font-size: 12px;
padding-right: 3px; padding-right: 3px;
text-shadow: 0 1px 0 white
} }
#set-custom-xmpp-status { #set-custom-xmpp-status {

13
sass/_variables.scss
View File

@ -5,19 +5,20 @@
$text-color: #6C4C44 !default; $text-color: #6C4C44 !default;
$border-color: #CCC !default; $border-color: #CCC !default;
$warning-color: #681F2C !default; $warning-color: #681F2C !default;
$light-background-border-color: #F1DCD6 !default; $light-background-border-color: #E5E9E8 !default;
$light-background-color: #F1E2DD !default; $light-background-color: beige !default;
$icon-color: #114327 !default; $icon-color: #114327 !default;
$highlight-color: #E3C9C1 !default; $highlight-color: #E1E6E5 !default;
$chat-head-color: #436F64 !default; $chat-head-color: #436F64 !default;
$chatroom-head-color: #0F592F !default; $chatroom-head-color: #346121 !default;
$chat-head-text-color: white !default; $chat-head-text-color: white !default;
$chat-head-inverse-text-color: white !default; $chat-head-inverse-text-color: white !default;
$chat-head-height: 44px !default; $chat-head-height: 44px !default;
$save-button-color: #436F64 !default; $save-button-color: #436F64 !default;
$chat-textarea-height: 62px !default; $chat-textarea-height: 62px !default;
$toolbar-height: 20px !default; $toolbar-height: 25px !default;
$message-them-color: #4B7003 !default; $toolbar-color: beige !default;
$message-them-color: #346121 !default;
$roster-height: 194px !default; $roster-height: 194px !default;
$controlbox-dropdown-height: 25px !default; $controlbox-dropdown-height: 25px !default;