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

Change text color and default chat height.

Browse Source
This commit is contained in:
JC Brand 2015-10-29 07:51:55 +00:00
parent 5ea879e46a
commit bb670e2053
4 changed files with 45 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
css/converse.css
View File

@ -5,6 +5,7 @@
* Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
* Licensed under the Mozilla Public License
*/
/* https://coolors.co/app/818479-b5cbb7-d2e4c4-e4e9b2-e7e08b */
@font-face {
font-family: 'Converse-js';
src: url("../fonticons/fonts/icomoon.eot?-mnoxh0");
@ -1037,7 +1038,7 @@
#conversejs {
bottom: 0;
color: #777;
color: #818479;
direction: ltr;
display: block;
font-size: 14px;
@ -1181,7 +1182,7 @@
background: white;
margin: 1em; }
#conversejs form.pure-form.converse-form legend {
color: #777; }
color: #818479; }
#conversejs form.pure-form.converse-form label {
margin-top: 1em; }
#conversejs form.pure-form.converse-form input[type=text],
@ -1196,13 +1197,13 @@
padding-right: 1em; }
#conversejs form.pure-form.converse-form input.error {
border: 1px solid red;
color: #777; }
color: #818479; }
#conversejs form.pure-form.converse-form .form-help {
color: gray;
font-size: 85%;
padding-top: 5px; }
#conversejs form.pure-form.converse-form .form-help:hover {
color: #777; }
color: #818479; }
#conversejs .chat-textarea-chatbox-selected {
border: 1px solid #578308;
margin: 0; }
@ -1231,8 +1232,8 @@
position: absolute; }
#conversejs .chatbox .box-flyout {
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: 400px;
min-height: 200px;
height: 450px;
min-height: 225px;
min-width: 200px;
width: 200px;
z-index: 1; }
@ -1267,12 +1268,12 @@
height: -webkit-calc(100% - 44px);
height: calc(100% - 44px); }
#conversejs .chatbox .chat-body p {
color: #777;
color: #818479;
font-size: 14px;
margin: 0;
padding: 5px; }
#conversejs .chatbox .chat-body .chat-info {
color: #777;
color: #818479;
color: #808080;
margin: 0.3em; }
#conversejs .chatbox .chat-body .chat-info.chat-event {
@ -1309,7 +1310,7 @@
position: relative;
padding: 0.5em;
font-size: 13px;
color: #777;
color: #818479;
overflow-y: auto;
border: 0;
background-color: #ffffff;
@ -1514,7 +1515,7 @@
color: gray;
font-size: 85%; }
#conversejs #controlbox #converse-register .instructions:hover {
color: #777; }
color: #818479; }
#conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
margin-top: 2em; }
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
@ -1543,14 +1544,14 @@
text-align: left; }
#conversejs #controlbox #chatrooms #available-chatrooms dt {
border: none;
color: #777;
color: #818479;
font-weight: normal;
padding: 0;
text-shadow: 0 1px 0 #FAFAFA; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom {
border: none;
clear: both;
color: #777;
color: #818479;
display: block;
font-weight: bold;
overflow: hidden;
@ -1638,13 +1639,6 @@
font-size: 12px;
list-style-type: none;
/* single tab */ }
#conversejs #controlbox #controlbox-tabs a.current,
#conversejs #controlbox #controlbox-tabs a.current:hover {
box-shadow: none;
border-bottom: 0;
height: 44px;
cursor: default;
color: #777; }
#conversejs #controlbox #controlbox-tabs li {
float: left;
list-style: none;
@ -1657,7 +1651,7 @@
border-top-left-radius: 4px;
border-top-right-radius: 4px;
box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
color: #888;
color: #818479;
display: block;
font-size: 12px;
height: 43px;
@ -1666,7 +1660,13 @@
text-align: center;
text-decoration: none; }
#conversejs #controlbox #controlbox-tabs li a:hover {
color: #777; }
color: #818479; }
#conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover {
box-shadow: none;
border-bottom: 0;
height: 44px;
cursor: default;
color: #818479; }
#conversejs #controlbox .xmpp-status {
display: inline; }
#conversejs #controlbox .fancy-dropdown {
@ -1802,7 +1802,7 @@
overflow-y: auto; }
#conversejs #converse-roster .roster-contacts dt.roster-group {
border: none;
color: #777;
color: #818479;
display: none;
font-weight: normal;
padding: 0.5em;
@ -1810,13 +1810,13 @@
#conversejs #converse-roster .roster-contacts dt.roster-group:hover {
background-color: #E1E6E5; }
#conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle {
color: #777;
color: #818479;
display: block;
width: 100%; }
#conversejs #converse-roster .roster-contacts dd {
border: none;
clear: both;
color: #777;
color: #818479;
display: block;
font-weight: bold;
height: 24px;
@ -1854,7 +1854,7 @@
width: 22px;
margin: 0;
display: none;
color: #777; }
color: #818479; }
#conversejs #converse-roster .roster-contacts dd a .open-chat {
width: 80%; }
#conversejs #converse-roster span.pending-contact-name {
@ -1927,7 +1927,7 @@
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border: 0;
color: #777;
color: #818479;
font-size: 14px;
height: 289px;
height: -webkit-calc(100% - 44px);

2
mockup/controlbox.html
View File

@ -9,7 +9,7 @@
<link type="text/css" href="../css/converse.css" rel="stylesheet" media="screen" />
<script src="../components/jquery/dist/jquery.min.js"></script>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<body id="page-top" data-spy="scroll" data-target=".navbar-custom" style="background-color: white">
<!-- HEADER -->
<div id="header_wrap" class="outer">

26
sass/_controlbox.scss
View File

@ -2,7 +2,7 @@
#controlbox {
display: none;
.controlbox-head {
background-color: $chat-head-color;
background-color: $controlbox-head-color;
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
color: $chat-head-inverse-text-color;
@ -242,15 +242,6 @@
font-size: 12px;
list-style-type: none;
a.current,
a.current:hover {
box-shadow: none;
border-bottom: 0;
height: $chat-head-height;
cursor: default;
color: $text-color;
}
/* single tab */
li {
float: left;
@ -258,14 +249,13 @@
padding-left: 0;
text-shadow: white 0 1px 0;
width: 38%;
a {
background-color: white;
border-bottom: 1px solid $border-color;
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
color: #888;
color: $text-color;
display: block;
font-size: 12px;
height: $chat-head-height - 1px;
@ -273,10 +263,18 @@
margin: 0;
text-align: center;
text-decoration: none;
}
a:hover {
&:hover {
color: $text-color;
}
&.current,
&.current:hover {
box-shadow: none;
border-bottom: 0;
height: $chat-head-height;
cursor: default;
color: $text-color;
}
}
}
}

6
sass/_variables.scss
View File

@ -1,15 +1,17 @@
/* https://coolors.co/app/818479-b5cbb7-d2e4c4-e4e9b2-e7e08b */
$link-color: #436F64 !default;
$inverse-link-color: white !default;
$link-shadow-color: #FAFAFA !default;
$text-shadow-color: #FAFAFA !default;
$text-color: #777 !default;
$text-color: #818479 !default;
$border-color: #CCC !default;
$warning-color: #681F2C !default;
$light-background-border-color: #E5E9E8 !default;
$light-background-color: beige !default;
$icon-color: #114327 !default;
$highlight-color: #E1E6E5 !default;
$controlbox-head-color: #436F64 !default;
$chat-head-color: #436F64 !default;
$chatroom-head-color: #346121 !default;
$chat-head-text-color: white !default;
@ -34,7 +36,7 @@ $legend-font-size: 16px !default;
$chatroom-width: 300px !default;
$chat-width: 200px !default;
$chat-height: 400px !default;
$chat-height: 450px !default;
$chat-gutter: 7px !default;
$minimized-chats-width: 130px !default;