diff --git a/css/converse.css b/css/converse.css index 81ae88124..e1919c4c5 100644 --- a/css/converse.css +++ b/css/converse.css @@ -6834,8 +6834,9 @@ body.reset { font-weight: normal; font-style: normal; } .icon-conversejs { - padding-right: 0.2em; + padding-right: 0.5em; font-family: 'Converse-js'; + font-size: 80%; speak: none; font-style: normal; font-weight: normal; @@ -6849,6 +6850,13 @@ body.reset { .icon-conversejs:before { content: "\e600"; } +.converse-brand-heading { + font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; + font-size: 6em; + font-weight: normal; } + .converse-brand-heading .icon-conversejs { + font-size: 60%; } + #conversejs { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); @@ -6858,6 +6866,10 @@ body.reset { direction: ltr; display: block; z-index: 1031; } + #conversejs .brand-heading { + font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; } + #conversejs .brand-heading .icon-conversejs { + font-size: 80%; } #conversejs .converse-chatboxes { z-index: 1031; position: fixed; @@ -6988,6 +7000,8 @@ body.reset { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #conversejs .btn { + font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; + font-weight: normal; color: #fff; } #conversejs .btn .fa { color: #fff; @@ -7213,7 +7227,7 @@ body.reset { margin: 0; } @media screen and (max-width: 575px) { - body .brand-heading { + body .converse-brand-heading { font-size: 3.75em; } #conversejs:not(.converse-embedded) .chatbox .chat-body { @@ -7355,6 +7369,7 @@ body.reset { width: 100%; height: 100vh; } } #conversejs .chatbox .chat-title { + font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; color: white; display: block; line-height: 20px; @@ -7810,6 +7825,7 @@ body.reset { #conversejs #controlbox .controlbox-section { margin: 1em 0 0 0; } #conversejs #controlbox .controlbox-section .controlbox-heading { + font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; margin: 0 0 0.5em 0; text-transform: uppercase; } #conversejs #controlbox .dropdown a { @@ -7959,6 +7975,7 @@ body.reset { text-align: left; padding: 0.3em 0; } #conversejs .list-container .rooms-toggle { + font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; display: block; color: #666; padding: 0 0 0.5rem 0; } @@ -8082,6 +8099,7 @@ body.reset { text-shadow: 0 1px 0 #FAFAFA; margin: 0.75em 0 0.75em 0; } #conversejs #converse-roster .roster-contacts .roster-group .group-toggle { + font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; color: #666; display: block; width: 100%; @@ -8292,8 +8310,8 @@ body.reset { padding: 0.5em; } #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-heading, #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading { - padding: 0.3em 0; - font-weight: bold; } + font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; + padding: 0.3em 0; } #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features, #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features { width: 100%; } @@ -8541,7 +8559,11 @@ body.reset { padding-bottom: 0.25rem; display: block; } #conversejs .message.chat-msg .chat-msg-heading .chat-msg-author { - font-weight: bold; } + font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; + font-size: 115%; } + #conversejs .message.chat-msg .chat-msg-heading .chat-msg-author .badge { + font-size: 80%; + font-family: "Helvetica", "Arial", sans-serif; } #conversejs .message.chat-msg .chat-msg-heading .chat-msg-time { padding-left: 0.25em; color: #8c8c8c; } diff --git a/css/inverse.css b/css/inverse.css index 65c90c566..375fe5a65 100644 --- a/css/inverse.css +++ b/css/inverse.css @@ -6834,8 +6834,9 @@ body.reset { font-weight: normal; font-style: normal; } .icon-conversejs { - padding-right: 0.2em; + padding-right: 0.5em; font-family: 'Converse-js'; + font-size: 80%; speak: none; font-style: normal; font-weight: normal; @@ -6849,6 +6850,13 @@ body.reset { .icon-conversejs:before { content: "\e600"; } +.converse-brand-heading { + font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; + font-size: 6em; + font-weight: normal; } + .converse-brand-heading .icon-conversejs { + font-size: 60%; } + #conversejs { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); @@ -6858,6 +6866,10 @@ body.reset { direction: ltr; display: block; z-index: 1031; } + #conversejs .brand-heading { + font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; } + #conversejs .brand-heading .icon-conversejs { + font-size: 80%; } #conversejs .converse-chatboxes { z-index: 1031; position: fixed; @@ -6988,6 +7000,8 @@ body.reset { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #conversejs .btn { + font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; + font-weight: normal; color: #fff; } #conversejs .btn .fa { color: #fff; @@ -7213,7 +7227,7 @@ body.reset { margin: 0; } @media screen and (max-width: 575px) { - body .brand-heading { + body .converse-brand-heading { font-size: 3.75em; } #conversejs:not(.converse-embedded) .chatbox .chat-body { @@ -7406,6 +7420,7 @@ body { width: 100%; height: 100vh; } } #conversejs .chatbox .chat-title { + font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif; color: white; display: block; line-height: 24px; @@ -7880,6 +7895,7 @@ body { #conversejs #controlbox .controlbox-section { margin: 1em 0 0 0; } #conversejs #controlbox .controlbox-section .controlbox-heading { + font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; margin: 0 0 0.5em 0; text-transform: uppercase; } #conversejs #controlbox .dropdown a { @@ -8134,6 +8150,7 @@ body { text-shadow: 0 1px 0 #FAFAFA; margin: 0.75em 0 0.75em 0; } #conversejs #converse-roster .roster-contacts .roster-group .group-toggle { + font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; color: #666; display: block; width: 100%; @@ -8226,6 +8243,7 @@ body { text-align: left; padding: 0.3em 0; } #conversejs .list-container .rooms-toggle { + font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; display: block; color: #666; padding: 0 0 0.5rem 0; } @@ -8431,8 +8449,8 @@ body { padding: 0.5em; } #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-heading, #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading { - padding: 0.3em 0; - font-weight: bold; } + font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; + padding: 0.3em 0; } #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features, #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features { width: 100%; } @@ -8726,7 +8744,11 @@ body { padding-bottom: 0.25rem; display: block; } #conversejs .message.chat-msg .chat-msg-heading .chat-msg-author { - font-weight: bold; } + font-family: Futura, Helvetica, Trebuchet MS, Arial, sans-serif; + font-size: 115%; } + #conversejs .message.chat-msg .chat-msg-heading .chat-msg-author .badge { + font-size: 80%; + font-family: "Helvetica", "Arial", sans-serif; } #conversejs .message.chat-msg .chat-msg-heading .chat-msg-time { padding-left: 0.25em; color: #8c8c8c; } diff --git a/css/theme.css b/css/theme.css index ac2da9442..9d262ca91 100644 --- a/css/theme.css +++ b/css/theme.css @@ -16,8 +16,8 @@ h4, h5, h6 { margin: 0 0 35px; - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 700; + font-family: Futura,Trebuchet MS,Arial,sans-serif; + font-weight: normal; letter-spacing: 1px; } p { @@ -131,11 +131,19 @@ a:focus { .outro { background: url('images/bgtr.svg') top right no-repeat, url('images/bgbl.svg') bottom left no-repeat, url('images/overlay.png'), linear-gradient(45deg, #384955, #655361, #85505f); } + + .brand-heading { - font-size: 2em; - text-align: center; - margin-top: 2.5em; + font-family: Futura,Trebuchet MS,Arial,sans-serif; + font-weight: normal; + font-size: 2em; + text-align: center; + margin-top: 2.5em; } +.brand-heading .icon-conversejs { + font-size: 60%; +} + .brand-heading-embedded { margin-top: 1.5em; } @@ -242,7 +250,7 @@ a:focus { } } .btn { - font-family: FontAwesome; + font-family: Futura,Trebuchet MS,Arial,sans-serif; font-weight: 400; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; diff --git a/dev.html b/dev.html index 368a5915a..74ce13f5b 100644 --- a/dev.html +++ b/dev.html @@ -17,7 +17,7 @@
A free and open-source XMPP chat client in your browser
Now also available in a fullscreen version.
@@ -105,7 +105,7 @@
You can start using it here immediately, or you can integrate it into your own website. Take a look at the demo page for other examples of how Converse.js can be configured and used.
diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss
index 61c07460b..96aa61c55 100644
--- a/sass/_chatbox.scss
+++ b/sass/_chatbox.scss
@@ -136,6 +136,7 @@
}
}
.chat-title {
+ font-family: Futura,Helvetica,Trebuchet MS,Arial,sans-serif;
color: white;
display: block;
line-height: $line-height-large;
diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss
index 68508f851..fe6e9b8b3 100644
--- a/sass/_chatrooms.scss
+++ b/sass/_chatrooms.scss
@@ -124,8 +124,8 @@
padding: 0.5em;
.occupants-heading {
+ font-family: $heading-font;
padding: 0.3em 0;
- font-weight: bold;
}
.chatroom-features {
diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss
index a9260cfe6..591b442ba 100644
--- a/sass/_controlbox.scss
+++ b/sass/_controlbox.scss
@@ -244,6 +244,7 @@
margin: 1em 0 0 0;
.controlbox-heading {
+ font-family: $heading-font;
margin: 0 0 0.5em 0;
text-transform: uppercase;
}
diff --git a/sass/_core.scss b/sass/_core.scss
index 89e93abd0..da73b6415 100644
--- a/sass/_core.scss
+++ b/sass/_core.scss
@@ -22,8 +22,9 @@ body.reset {
}
.icon-conversejs {
- padding-right: 0.2em;
+ padding-right: 0.5em;
font-family: 'Converse-js';
+ font-size: 80%;
speak: none;
font-style: normal;
font-weight: normal;
@@ -39,6 +40,15 @@ body.reset {
content: "\e600";
}
+.converse-brand-heading {
+ font-family: $heading-font;
+ font-size: 6em;
+ font-weight: normal;
+ .icon-conversejs {
+ font-size: 60%;
+ }
+}
+
#conversejs {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
@@ -49,6 +59,13 @@ body.reset {
display: block;
z-index: 1031; // One more than bootstrap navbar
+ .brand-heading {
+ font-family: $heading-font;
+ .icon-conversejs {
+ font-size: 80%;
+ }
+ }
+
.converse-chatboxes {
z-index: 1031; // One more than bootstrap navbar
position: fixed;
@@ -230,6 +247,8 @@ body.reset {
}
.btn {
+ font-family: $heading-font;
+ font-weight: normal;
color: #fff;
.fa {
color: #fff;
@@ -455,9 +474,9 @@ body.reset {
@media screen and (max-width: 575px) {
body {
- .brand-heading {
+ .converse-brand-heading {
font-size: 3.75em;
- }
+ }
}
#conversejs:not(.converse-embedded) {
.chatbox {
diff --git a/sass/_messages.scss b/sass/_messages.scss
index 430869cd5..48b93ef34 100644
--- a/sass/_messages.scss
+++ b/sass/_messages.scss
@@ -136,7 +136,12 @@
display: block;
.chat-msg-author {
- font-weight: bold;
+ font-family: $heading-font;
+ font-size: 115%;
+ .badge {
+ font-size: 80%;
+ font-family: $normal_font;
+ }
}
.chat-msg-time {
padding-left: 0.25em;
diff --git a/sass/_roomslist.scss b/sass/_roomslist.scss
index 4a5ce88f2..b756c4a78 100644
--- a/sass/_roomslist.scss
+++ b/sass/_roomslist.scss
@@ -4,6 +4,7 @@
padding: 0.3em 0;
.rooms-toggle {
+ font-family: $heading-font;
display: block;
color: $text-color;
padding: 0 0 0.5rem 0;
diff --git a/sass/_roster.scss b/sass/_roster.scss
index 36608e14a..a01d72317 100644
--- a/sass/_roster.scss
+++ b/sass/_roster.scss
@@ -66,6 +66,7 @@
&:hover {
color: $dark-gray-color;
}
+ font-family: $heading-font;
color: $text-color;
display: block;
width: 100%;
diff --git a/sass/_variables.scss b/sass/_variables.scss
index e2999d0ba..41eec3f75 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -107,6 +107,9 @@ $small-mobile-chat-height: 300px !default;
$font-path: "../fonticons/fonts/" !default;
+$normal-font: "Helvetica", "Arial", sans-serif;
+$heading-font: Futura,Helvetica,Trebuchet MS,Arial,sans-serif !default;
+
$chatroom-head-color: $red !default;
$chatroom-color-light: $light-red !default;
$chatroom-color-dark: $darkest-red !default;
Converse.js is written in Javascript and runs in your browser.
+ Converse is written in JavaScript and runs in your browser.