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 @@
-

Converse

+

Converse

@@ -37,8 +37,8 @@ notify_all_room_messages: [ 'discuss@conference.conversejs.org' ], - bosh_service_url: 'http://chat.example.org:5280/http-bind/', - // bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes + // bosh_service_url: 'http://chat.example.org:5280/http-bind/', + bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes message_archiving: 'always', debug: true }); diff --git a/index.html b/index.html index 6abea2b98..fc3dc971c 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - Converse.js + Converse @@ -74,7 +74,7 @@
-

converse

+

Converse

A free and open-source XMPP chat client in your browser

Now also available in a fullscreen version. @@ -105,7 +105,7 @@

-

Converse.js is written in Javascript and runs in your browser.

+

Converse is written in JavaScript and runs in your browser.

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;