|
@@ -1120,6 +1120,22 @@
|
|
|
#conversejs {
|
|
|
width: 100%;
|
|
|
width: 100vw; } }
|
|
|
+ #converse-embedded-chat .fade-in,
|
|
|
+ #conversejs .fade-in {
|
|
|
+ opacity: 0;
|
|
|
+ /* make things invisible upon start */
|
|
|
+ -webkit-animation-name: fadein;
|
|
|
+ -moz-animation-name: fadein;
|
|
|
+ animation-name: fadein;
|
|
|
+ -webkit-animation-fill-mode: forwards;
|
|
|
+ -moz-animation-fill-mode: forwards;
|
|
|
+ animation-fill-mode: forwards;
|
|
|
+ -webkit-animation-duration: 1s;
|
|
|
+ -moz-animation-duration: 1s;
|
|
|
+ animation-duration: 1s;
|
|
|
+ -webkit-animation-timing-function: ease;
|
|
|
+ -moz-animation-timing-function: ease;
|
|
|
+ animation-timing-function: ease; }
|
|
|
#converse-embedded-chat ::-webkit-input-placeholder,
|
|
|
#conversejs ::-webkit-input-placeholder {
|
|
|
/* Chrome/Opera/Safari */
|
|
@@ -1267,7 +1283,8 @@
|
|
|
color: #A53214; }
|
|
|
#converse-embedded-chat .reg-feedback,
|
|
|
#conversejs .reg-feedback {
|
|
|
- font-size: 85%; }
|
|
|
+ font-size: 85%;
|
|
|
+ margin-bottom: 1em; }
|
|
|
#converse-embedded-chat .reg-feedback,
|
|
|
#converse-embedded-chat #converse-login .conn-feedback,
|
|
|
#conversejs .reg-feedback,
|
|
@@ -1295,7 +1312,7 @@
|
|
|
padding: 0.5em 0; }
|
|
|
#converse-embedded-chat .pure-button,
|
|
|
#conversejs .pure-button {
|
|
|
- border-radius: 7px; }
|
|
|
+ border-radius: 5px; }
|
|
|
#converse-embedded-chat .button-primary,
|
|
|
#conversejs .button-primary {
|
|
|
color: white;
|
|
@@ -1316,7 +1333,7 @@
|
|
|
#conversejs form.pure-form.converse-form legend {
|
|
|
color: #777;
|
|
|
font-size: 125%;
|
|
|
- margin-bottom: 2em; }
|
|
|
+ margin-bottom: 1em; }
|
|
|
#converse-embedded-chat form.pure-form.converse-form input[type=checkbox],
|
|
|
#conversejs form.pure-form.converse-form input[type=checkbox] {
|
|
|
display: block; }
|
|
@@ -1395,6 +1412,24 @@ body {
|
|
|
body .brand-heading {
|
|
|
font-size: 600%;
|
|
|
margin-left: -10%; }
|
|
|
+ body .brand-heading.fade-in {
|
|
|
+ opacity: 0;
|
|
|
+ /* make things invisible upon start */
|
|
|
+ -webkit-animation-name: fadein;
|
|
|
+ -moz-animation-name: fadein;
|
|
|
+ animation-name: fadein;
|
|
|
+ -webkit-animation-fill-mode: forwards;
|
|
|
+ -moz-animation-fill-mode: forwards;
|
|
|
+ animation-fill-mode: forwards;
|
|
|
+ -webkit-animation-duration: 1s;
|
|
|
+ -moz-animation-duration: 1s;
|
|
|
+ animation-duration: 1s;
|
|
|
+ -webkit-animation-timing-function: ease;
|
|
|
+ -moz-animation-timing-function: ease;
|
|
|
+ animation-timing-function: ease;
|
|
|
+ -webkit-animation-delay: 2s;
|
|
|
+ -moz-animation-delay: 2s;
|
|
|
+ animation-delay: 2s; }
|
|
|
body .brand-heading .icon-conversejs {
|
|
|
font-size: 88%; }
|
|
|
body div.content {
|
|
@@ -1419,7 +1454,8 @@ body {
|
|
|
margin: 1em; }
|
|
|
#conversejs form.pure-form.converse-form input[type=checkbox] {
|
|
|
margin-left: 1em;
|
|
|
- display: inline; }
|
|
|
+ display: inline;
|
|
|
+ margin-bottom: 2em; }
|
|
|
#conversejs form.pure-form.converse-form input[type=text],
|
|
|
#conversejs form.pure-form.converse-form input[type=password],
|
|
|
#conversejs form.pure-form.converse-form input[type=number],
|
|
@@ -1434,7 +1470,7 @@ body {
|
|
|
|
|
|
#converse-embedded-chat .flyout,
|
|
|
#conversejs .flyout {
|
|
|
- border-radius: 7px;
|
|
|
+ border-radius: 0;
|
|
|
bottom: 6px;
|
|
|
display: block;
|
|
|
position: absolute; }
|
|
@@ -1554,8 +1590,8 @@ body {
|
|
|
#converse-embedded-chat .chatbox .chat-body,
|
|
|
#conversejs .chatbox .chat-body {
|
|
|
background-color: white;
|
|
|
- border-bottom-left-radius: 7px;
|
|
|
- border-bottom-right-radius: 7px;
|
|
|
+ border-bottom-left-radius: 0;
|
|
|
+ border-bottom-right-radius: 0;
|
|
|
border-top: 0;
|
|
|
height: 289px;
|
|
|
height: -webkit-calc(100% - 62px);
|
|
@@ -1670,8 +1706,8 @@ body {
|
|
|
#conversejs .chatbox form.sendXMPPMessage {
|
|
|
-moz-background-clip: padding;
|
|
|
-webkit-background-clip: padding-box;
|
|
|
- border-bottom-left-radius: 7px;
|
|
|
- border-bottom-right-radius: 7px;
|
|
|
+ border-bottom-left-radius: 0;
|
|
|
+ border-bottom-right-radius: 0;
|
|
|
background-clip: padding-box;
|
|
|
border-top: 1px solid #BBB;
|
|
|
border: 0;
|
|
@@ -1690,8 +1726,8 @@ body {
|
|
|
width: 100%; } }
|
|
|
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
|
|
|
#conversejs .chatbox form.sendXMPPMessage .chat-textarea {
|
|
|
- border-bottom-left-radius: 7px;
|
|
|
- border-bottom-right-radius: 7px;
|
|
|
+ border-bottom-left-radius: 0;
|
|
|
+ border-bottom-right-radius: 0;
|
|
|
border: 0;
|
|
|
height: 70px;
|
|
|
padding: 0.5em;
|
|
@@ -1898,8 +1934,8 @@ body {
|
|
|
min-width: auto; }
|
|
|
#conversejs .chatbox .chat-body {
|
|
|
background-color: #3AA569;
|
|
|
- border-top-left-radius: 7px;
|
|
|
- border-top-right-radius: 7px; }
|
|
|
+ border-top-left-radius: 0;
|
|
|
+ border-top-right-radius: 0; }
|
|
|
#conversejs .chatbox .chat-body .chat-message {
|
|
|
line-height: 22px;
|
|
|
font-size: 14px;
|
|
@@ -1913,8 +1949,8 @@ body {
|
|
|
margin-bottom: -5.5px; }
|
|
|
#conversejs .chatbox .chat-content {
|
|
|
padding: 0 1em 1em 1em;
|
|
|
- border-top-left-radius: 7px;
|
|
|
- border-top-right-radius: 7px; }
|
|
|
+ border-top-left-radius: 0;
|
|
|
+ border-top-right-radius: 0; }
|
|
|
#conversejs .chatbox .chat-title {
|
|
|
font-size: 26px;
|
|
|
line-height: 26px; }
|
|
@@ -1940,8 +1976,8 @@ body {
|
|
|
margin: 0; } }
|
|
|
#conversejs #controlbox .controlbox-head {
|
|
|
background-color: #578EA9;
|
|
|
- border-top-left-radius: 7px;
|
|
|
- border-top-right-radius: 7px;
|
|
|
+ border-top-left-radius: 0;
|
|
|
+ border-top-right-radius: 0;
|
|
|
color: white;
|
|
|
height: 62px;
|
|
|
margin: 0;
|
|
@@ -1954,10 +1990,9 @@ body {
|
|
|
#conversejs #controlbox .controlbox-head {
|
|
|
border-top-left-radius: 0;
|
|
|
border-top-right-radius: 0; } }
|
|
|
- #conversejs #controlbox.logged-out .controlbox-head {
|
|
|
- background-color: white; }
|
|
|
- #conversejs #controlbox.logged-out .controlbox-head .chatbox-btn {
|
|
|
- color: #578EA9; }
|
|
|
+ #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
|
|
|
+ position: relative;
|
|
|
+ overflow-y: auto; }
|
|
|
#conversejs #controlbox form.search-xmpp-contact {
|
|
|
margin: 0;
|
|
|
padding-left: 5px;
|
|
@@ -1976,14 +2011,27 @@ body {
|
|
|
padding-left: 2em;
|
|
|
font-weight: bold; }
|
|
|
#conversejs #controlbox #converse-register {
|
|
|
+ opacity: 0;
|
|
|
+ /* make things invisible upon start */
|
|
|
+ -webkit-animation-name: fadein;
|
|
|
+ -moz-animation-name: fadein;
|
|
|
+ animation-name: fadein;
|
|
|
+ -webkit-animation-fill-mode: forwards;
|
|
|
+ -moz-animation-fill-mode: forwards;
|
|
|
+ animation-fill-mode: forwards;
|
|
|
+ -webkit-animation-duration: 1s;
|
|
|
+ -moz-animation-duration: 1s;
|
|
|
+ animation-duration: 1s;
|
|
|
+ -webkit-animation-timing-function: ease;
|
|
|
+ -moz-animation-timing-function: ease;
|
|
|
+ animation-timing-function: ease;
|
|
|
background: white; }
|
|
|
#conversejs #controlbox #converse-register .title {
|
|
|
font-weight: bold; }
|
|
|
#conversejs #controlbox #converse-register .info {
|
|
|
- font-style: italic;
|
|
|
color: green;
|
|
|
- font-size: 85%;
|
|
|
- margin: 5px 0; }
|
|
|
+ font-size: 90%;
|
|
|
+ margin: 1.5em 0; }
|
|
|
#conversejs #controlbox #converse-register .form-errors {
|
|
|
color: red;
|
|
|
display: none; }
|
|
@@ -2021,26 +2069,30 @@ body {
|
|
|
font-weight: bold; }
|
|
|
#conversejs #controlbox .conn-feedback p.error {
|
|
|
color: #A53214; }
|
|
|
- #conversejs #controlbox .brand-heading-container {
|
|
|
- text-align: center; }
|
|
|
- #conversejs #controlbox .brand-heading-container .brand-heading {
|
|
|
- font-size: 150%; }
|
|
|
- #conversejs #controlbox .brand-heading-container .brand-name {
|
|
|
- font-size: 120%; }
|
|
|
+ #conversejs #controlbox .brand-heading-container .brand-heading {
|
|
|
+ text-align: left;
|
|
|
+ font-size: 150%; }
|
|
|
+ #conversejs #controlbox .brand-heading-container .brand-name {
|
|
|
+ font-size: 120%; }
|
|
|
#conversejs #controlbox .toggle-register-login {
|
|
|
font-weight: bold; }
|
|
|
#conversejs #controlbox .oauth-login {
|
|
|
+ margin-left: 0;
|
|
|
color: #777; }
|
|
|
- #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
|
|
|
- margin: 2em 0; }
|
|
|
- #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
|
|
|
- height: auto;
|
|
|
- white-space: normal; }
|
|
|
- #conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
|
|
|
- color: #3AA569; }
|
|
|
- #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
|
|
|
- width: 100%;
|
|
|
- margin: 1em 0; }
|
|
|
+ #conversejs #controlbox .oauth-login .icon-social:before {
|
|
|
+ font-size: 18px; }
|
|
|
+ #conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
|
|
|
+ height: auto;
|
|
|
+ white-space: normal; }
|
|
|
+ #conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
|
|
|
+ color: #3AA569; }
|
|
|
+ #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
|
|
|
+ width: 100%;
|
|
|
+ margin: 1em 0; }
|
|
|
+ #conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
|
|
|
+ display: block;
|
|
|
+ font-weight: normal;
|
|
|
+ margin: 1em 0; }
|
|
|
#conversejs #controlbox #users .add-converse-contact {
|
|
|
margin: 0 0 0.75em 0; }
|
|
|
#conversejs #controlbox #chatrooms form.add-chatroom {
|
|
@@ -2263,17 +2315,23 @@ body {
|
|
|
padding: 1px;
|
|
|
float: right; }
|
|
|
#conversejs #controlbox .controlbox-panes {
|
|
|
- background-color: white; }
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: scroll; }
|
|
|
#conversejs #controlbox .controlbox-pane {
|
|
|
padding: 1.2em;
|
|
|
background-color: white;
|
|
|
border: 0;
|
|
|
font-size: 16px;
|
|
|
position: absolute;
|
|
|
+ left: 0;
|
|
|
text-align: center;
|
|
|
width: 100%;
|
|
|
overflow-y: auto;
|
|
|
overflow-x: hidden; }
|
|
|
+ #conversejs #controlbox .controlbox-pane .switch-form {
|
|
|
+ padding-bottom: 2em; }
|
|
|
+ #conversejs #controlbox .controlbox-pane .switch-form p {
|
|
|
+ margin-top: 0.5em; }
|
|
|
#conversejs #controlbox .controlbox-pane label {
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
@@ -2330,17 +2388,34 @@ body {
|
|
|
padding-top: 2em; }
|
|
|
#conversejs #controlbox .toggle-register-login {
|
|
|
line-height: 30px; }
|
|
|
- #conversejs #controlbox .brand-heading-container .brand-heading {
|
|
|
- font-size: 600%;
|
|
|
- padding: 0.7em 0 0 0;
|
|
|
- opacity: 0.8;
|
|
|
- color: #387592; }
|
|
|
- #conversejs #controlbox .brand-heading-container .brand-subtitle {
|
|
|
- font-size: 90%; }
|
|
|
- @media screen and (max-width: 480px) {
|
|
|
+ #conversejs #controlbox .brand-heading-container {
|
|
|
+ text-align: center; }
|
|
|
#conversejs #controlbox .brand-heading-container .brand-heading {
|
|
|
- font-size: 400%; } }
|
|
|
+ text-align: center;
|
|
|
+ font-size: 600%;
|
|
|
+ padding: 0.7em 0 0 0;
|
|
|
+ opacity: 0.8;
|
|
|
+ color: #387592; }
|
|
|
+ #conversejs #controlbox .brand-heading-container .brand-subtitle {
|
|
|
+ font-size: 90%; }
|
|
|
+ @media screen and (max-width: 480px) {
|
|
|
+ #conversejs #controlbox .brand-heading-container .brand-heading {
|
|
|
+ font-size: 400%; } }
|
|
|
#conversejs #controlbox.logged-out {
|
|
|
+ opacity: 0;
|
|
|
+ /* make things invisible upon start */
|
|
|
+ -webkit-animation-name: fadein;
|
|
|
+ -moz-animation-name: fadein;
|
|
|
+ animation-name: fadein;
|
|
|
+ -webkit-animation-fill-mode: forwards;
|
|
|
+ -moz-animation-fill-mode: forwards;
|
|
|
+ animation-fill-mode: forwards;
|
|
|
+ -webkit-animation-duration: 1s;
|
|
|
+ -moz-animation-duration: 1s;
|
|
|
+ animation-duration: 1s;
|
|
|
+ -webkit-animation-timing-function: ease;
|
|
|
+ -moz-animation-timing-function: ease;
|
|
|
+ animation-timing-function: ease;
|
|
|
width: 100%; }
|
|
|
#conversejs #controlbox.logged-out .box-flyout {
|
|
|
width: 100%; }
|
|
@@ -2357,19 +2432,23 @@ body {
|
|
|
height: 63px;
|
|
|
padding: 6px 0 6px 0;
|
|
|
margin-top: 0.5em; }
|
|
|
- #conversejs #controlbox #converse-register,
|
|
|
- #conversejs #controlbox #converse-login {
|
|
|
+ #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
|
|
|
margin: 3em 30% 3em 30%; }
|
|
|
+ #conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login .title, #conversejs #controlbox #converse-login .instructions, #conversejs #controlbox #converse-login label {
|
|
|
+ margin: 1em 0; }
|
|
|
+ #conversejs #controlbox #converse-register input[type=submit],
|
|
|
+ #conversejs #controlbox #converse-register input[type=button], #conversejs #controlbox #converse-login input[type=submit],
|
|
|
+ #conversejs #controlbox #converse-login input[type=button] {
|
|
|
+ width: auto; }
|
|
|
+ #conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
|
|
|
+ width: 100%;
|
|
|
+ margin: 1em 0; }
|
|
|
+ #conversejs #controlbox #converse-register input.pure-button, #conversejs #controlbox #converse-login input.pure-button {
|
|
|
+ margin: 1em 0.5em; }
|
|
|
@media screen and (max-width: 480px) {
|
|
|
#conversejs #controlbox #converse-register,
|
|
|
#conversejs #controlbox #converse-login {
|
|
|
margin: 3em 10% 3em 10%; } }
|
|
|
- #conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login .title, #conversejs #controlbox #converse-login .instructions, #conversejs #controlbox #converse-login label {
|
|
|
- margin: 1em 0; }
|
|
|
- #conversejs #controlbox #converse-register input[type=submit],
|
|
|
- #conversejs #controlbox #converse-register input[type=button], #conversejs #controlbox #converse-login input[type=submit],
|
|
|
- #conversejs #controlbox #converse-login input[type=button] {
|
|
|
- width: auto; }
|
|
|
#conversejs #controlbox #controlbox-tabs {
|
|
|
/* single tab */ }
|
|
|
#conversejs #controlbox #controlbox-tabs li {
|
|
@@ -2380,11 +2459,11 @@ body {
|
|
|
font-size: 18px; }
|
|
|
#conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover {
|
|
|
height: 63px; }
|
|
|
+ #conversejs #controlbox .controlbox-panes {
|
|
|
+ background-color: white; }
|
|
|
#conversejs #controlbox .controlbox-pane {
|
|
|
height: -webkit-calc(100% - 63px);
|
|
|
- height: calc(100% - 63px);
|
|
|
- border-bottom-left-radius: 0;
|
|
|
- border-bottom-right-radius: 0; }
|
|
|
+ height: calc(100% - 63px); }
|
|
|
|
|
|
#conversejs #converse-roster {
|
|
|
text-align: left;
|
|
@@ -2617,8 +2696,8 @@ body {
|
|
|
#converse-embedded-chat .chatroom .box-flyout .chatroom-body,
|
|
|
#conversejs .chatroom .box-flyout .chatroom-body {
|
|
|
height: 289px;
|
|
|
- border-bottom-left-radius: 7px;
|
|
|
- border-bottom-right-radius: 7px;
|
|
|
+ border-bottom-left-radius: 0;
|
|
|
+ border-bottom-right-radius: 0;
|
|
|
height: -webkit-calc(100% - 62px);
|
|
|
height: calc(100% - 62px);
|
|
|
background-color: white;
|
|
@@ -2664,7 +2743,7 @@ body {
|
|
|
vertical-align: top;
|
|
|
background-color: white;
|
|
|
border-left: 1px solid #777;
|
|
|
- border-bottom-right-radius: 7px;
|
|
|
+ border-bottom-right-radius: 0;
|
|
|
width: 30%;
|
|
|
height: 100%;
|
|
|
padding: 0.5em; }
|
|
@@ -2743,8 +2822,8 @@ body {
|
|
|
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container,
|
|
|
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
|
|
|
background-color: white;
|
|
|
- border-bottom-left-radius: 7px;
|
|
|
- border-bottom-right-radius: 7px;
|
|
|
+ border-bottom-left-radius: 0;
|
|
|
+ border-bottom-right-radius: 0;
|
|
|
border: 0;
|
|
|
color: #777;
|
|
|
font-size: 16px;
|
|
@@ -2803,22 +2882,22 @@ body {
|
|
|
width: -webkit-calc(100% - 250px);
|
|
|
width: calc(100% - 250px); }
|
|
|
#conversejs .chatroom .box-flyout .chatroom-body {
|
|
|
- border-top-left-radius: 7px;
|
|
|
- border-top-right-radius: 7px; }
|
|
|
+ border-top-left-radius: 0;
|
|
|
+ border-top-right-radius: 0; }
|
|
|
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
|
|
|
- border-radius: 7px; }
|
|
|
+ border-radius: 0; }
|
|
|
#conversejs .chatroom .box-flyout .chatroom-body .chat-area {
|
|
|
- border-top-left-radius: 7px;
|
|
|
+ border-top-left-radius: 0;
|
|
|
min-width: auto; }
|
|
|
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
|
|
|
- border-top-left-radius: 7px;
|
|
|
+ border-top-left-radius: 0;
|
|
|
padding: 0 1em 1em 1em; }
|
|
|
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
|
|
|
max-width: 100%; }
|
|
|
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
|
|
|
max-width: 100%; }
|
|
|
#conversejs .chatroom .box-flyout .chatroom-body .occupants {
|
|
|
- border-top-right-radius: 7px;
|
|
|
+ border-top-right-radius: 0;
|
|
|
padding: 1em; }
|
|
|
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
|
|
|
font-size: 18px; }
|
|
@@ -2842,12 +2921,12 @@ body {
|
|
|
background-color: #E7A151; }
|
|
|
#conversejs .chatbox.headlines .chat-body {
|
|
|
background-color: #E7A151;
|
|
|
- border-radius: 7px; }
|
|
|
+ border-radius: 0; }
|
|
|
#conversejs .chatbox.headlines .chat-body .chat-message span.chat-msg-them {
|
|
|
color: #D2842B; }
|
|
|
#conversejs .chatbox.headlines .chat-content {
|
|
|
height: 100%;
|
|
|
- border-radius: 7px; }
|
|
|
+ border-radius: 0; }
|
|
|
|
|
|
#conversejs .chatbox.headlines .box-flyout {
|
|
|
background-color: #E7A151; }
|