Skip to content

C
converse.js
Commit 1405884c authored by JC Brand's avatar JC Brand
Browse files
Options

Reset user agent styles. Fix login form margin and height

parent 617019af
Show whitespace changes
Inline Side-by-side
Showing with 19 additions and 151 deletions
css/converse.css
View file @ 1405884c
...@@ -4755,9 +4755,10 @@ ...@@ -4755,9 +4755,10 @@
#conversejs .invisible { #conversejs .invisible {
visibility: hidden !important; } visibility: hidden !important; }
#converse-embedded-chat, body.reset {
margin: 0; }
#conversejs { #conversejs {
margin-left: -0.5em;
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right); padding-right: env(safe-area-inset-right);
bottom: 0; bottom: 0;
...@@ -4770,39 +4771,29 @@ ...@@ -4770,39 +4771,29 @@
font-size: 14px; font-size: 14px;
position: fixed; position: fixed;
z-index: 1031; } z-index: 1031; }
#converse-embedded-chat ::-webkit-input-placeholder,
#conversejs ::-webkit-input-placeholder { #conversejs ::-webkit-input-placeholder {
/* Chrome/Opera/Safari */ /* Chrome/Opera/Safari */
color: #A8ABA1; } color: #A8ABA1; }
#converse-embedded-chat ::-moz-placeholder,
#conversejs ::-moz-placeholder { #conversejs ::-moz-placeholder {
/* Firefox 19+ */ /* Firefox 19+ */
color: #A8ABA1; } color: #A8ABA1; }
#converse-embedded-chat :-ms-input-placeholder,
#conversejs :-ms-input-placeholder { #conversejs :-ms-input-placeholder {
/* IE 10+ */ /* IE 10+ */
color: #A8ABA1; } color: #A8ABA1; }
#converse-embedded-chat :-moz-placeholder,
#conversejs :-moz-placeholder { #conversejs :-moz-placeholder {
/* Firefox 18- */ /* Firefox 18- */
color: #A8ABA1; } color: #A8ABA1; }
#converse-embedded-chat ::placeholder,
#conversejs ::placeholder { #conversejs ::placeholder {
color: #A8ABA1; } color: #A8ABA1; }
#converse-embedded-chat ::selection,
#conversejs ::selection { #conversejs ::selection {
background-color: #DCF9F6; } background-color: #DCF9F6; }
#converse-embedded-chat ::-moz-selection,
#conversejs ::-moz-selection { #conversejs ::-moz-selection {
background-color: #DCF9F6; } background-color: #DCF9F6; }
#converse-embedded-chat canvas,
#conversejs canvas { #conversejs canvas {
background: #777; background: #777;
border-radius: 4px; } border-radius: 4px; }
#converse-embedded-chat .circle,
#conversejs .circle { #conversejs .circle {
border-radius: 50%; } border-radius: 50%; }
#converse-embedded-chat .sidebar,
#conversejs .sidebar { #conversejs .sidebar {
display: none; display: none;
width: 50px; width: 50px;
...@@ -4811,25 +4802,20 @@ ...@@ -4811,25 +4802,20 @@
background-color: #578EA9; background-color: #578EA9;
color: white; color: white;
text-align: center; } text-align: center; }
#converse-embedded-chat .sidebar .chatbox-btn,
#conversejs .sidebar .chatbox-btn { #conversejs .sidebar .chatbox-btn {
float: none; float: none;
margin: 0; margin: 0;
font-size: 1.35em; } font-size: 1.35em; }
#converse-embedded-chat .sidebar .chatbox-btn.fa-vcard,
#conversejs .sidebar .chatbox-btn.fa-vcard { #conversejs .sidebar .chatbox-btn.fa-vcard {
margin-top: 1em; } margin-top: 1em; }
#converse-embedded-chat .sidebar .bottom,
#conversejs .sidebar .bottom { #conversejs .sidebar .bottom {
position: absolute; position: absolute;
bottom: 1em; } bottom: 1em; }
#converse-embedded-chat .badge,
#conversejs .badge { #conversejs .badge {
padding: 0.4em; padding: 0.4em;
line-height: 1; line-height: 1;
font-weight: normal; font-weight: normal;
font-size: 90%; } font-size: 90%; }
#converse-embedded-chat .fa,
#conversejs .fa { #conversejs .fa {
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
display: inline-block; display: inline-block;
...@@ -4837,14 +4823,11 @@ ...@@ -4837,14 +4823,11 @@
text-rendering: auto; text-rendering: auto;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; } -moz-osx-font-smoothing: grayscale; }
#converse-embedded-chat .list-container,
#conversejs .list-container { #conversejs .list-container {
text-align: left; text-align: left;
margin: 0.3em 0; } margin: 0.3em 0; }
#converse-embedded-chat .btn.btn-primary,
#conversejs .btn.btn-primary { #conversejs .btn.btn-primary {
color: #fff; } color: #fff; }
#converse-embedded-chat .no-text-select,
#conversejs .no-text-select { #conversejs .no-text-select {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
...@@ -4905,7 +4888,6 @@ ...@@ -4905,7 +4888,6 @@
opacity: 0; } opacity: 0; }
100% { 100% {
opacity: 1; } } opacity: 1; } }
#converse-embedded-chat .fade-in,
#conversejs .fade-in { #conversejs .fade-in {
opacity: 0; opacity: 0;
/* make things invisible upon start */ /* make things invisible upon start */
...@@ -4921,7 +4903,6 @@ ...@@ -4921,7 +4903,6 @@
-webkit-animation-timing-function: ease; -webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease; -moz-animation-timing-function: ease;
animation-timing-function: ease; } animation-timing-function: ease; }
#converse-embedded-chat .visible,
#conversejs .visible { #conversejs .visible {
opacity: 0; opacity: 0;
/* make things invisible upon start */ /* make things invisible upon start */
...@@ -4937,16 +4918,13 @@ ...@@ -4937,16 +4918,13 @@
-webkit-animation-timing-function: ease; -webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease; -moz-animation-timing-function: ease;
animation-timing-function: ease; } animation-timing-function: ease; }
#converse-embedded-chat .hidden,
#conversejs .hidden { #conversejs .hidden {
opacity: 0; opacity: 0;
display: none; } display: none; }
#converse-embedded-chat .collapsed,
#conversejs .collapsed { #conversejs .collapsed {
height: 0 !important; height: 0 !important;
overflow: hidden !important; overflow: hidden !important;
padding: 0 !important; } padding: 0 !important; }
#converse-embedded-chat .locked,
#conversejs .locked { #conversejs .locked {
padding-right: 22px; } padding-right: 22px; }
@-webkit-keyframes spin { @-webkit-keyframes spin {
...@@ -4972,10 +4950,8 @@ ...@@ -4972,10 +4950,8 @@
-ms-transform: rotate(359deg); -ms-transform: rotate(359deg);
-o-transform: rotate(359deg); -o-transform: rotate(359deg);
transform: rotate(359deg); } } transform: rotate(359deg); } }
#converse-embedded-chat .emojione,
#conversejs .emojione { #conversejs .emojione {
height: 20px; } height: 20px; }
#converse-embedded-chat .spinner,
#conversejs .spinner { #conversejs .spinner {
-webkit-animation: spin 2s infinite, linear; -webkit-animation: spin 2s infinite, linear;
-moz-animation: spin 2s infinite, linear; -moz-animation: spin 2s infinite, linear;
...@@ -4983,152 +4959,107 @@ ...@@ -4983,152 +4959,107 @@
display: block; display: block;
text-align: center; text-align: center;
margin: 1em; } margin: 1em; }
#converse-embedded-chat .spinner:before,
#conversejs .spinner:before { #conversejs .spinner:before {
font-size: 24px; font-size: 24px;
font-family: 'Converse-js' !important; font-family: 'Converse-js' !important;
content: "\231b"; } content: "\231b"; }
#converse-embedded-chat .left,
#conversejs .left { #conversejs .left {
float: left; } float: left; }
#converse-embedded-chat .right,
#conversejs .right { #conversejs .right {
float: right; } float: right; }
#converse-embedded-chat .centered,
#conversejs .centered { #conversejs .centered {
text-align: center; text-align: center;
display: block; display: block;
margin: 0; margin: 0;
padding: 10% 0; } padding: 10% 0; }
#converse-embedded-chat .hor_centered,
#conversejs .hor_centered { #conversejs .hor_centered {
text-align: center; text-align: center;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
clear: both; } clear: both; }
#converse-embedded-chat .button-group,
#converse-embedded-chat .input-button-group,
#conversejs .button-group, #conversejs .button-group,
#conversejs .input-button-group { #conversejs .input-button-group {
display: table; } display: table; }
#converse-embedded-chat .button-group,
#conversejs .button-group { #conversejs .button-group {
width: 100%; } width: 100%; }
#converse-embedded-chat .input-button-group button,
#converse-embedded-chat .input-button-group input,
#conversejs .input-button-group button, #conversejs .input-button-group button,
#conversejs .input-button-group input { #conversejs .input-button-group input {
display: table-cell; } display: table-cell; }
#converse-embedded-chat .error,
#conversejs .error { #conversejs .error {
color: #A53214; } color: #A53214; }
#converse-embedded-chat .info,
#conversejs .info { #conversejs .info {
color: #1E9652; } color: #1E9652; }
#converse-embedded-chat .reg-feedback,
#conversejs .reg-feedback { #conversejs .reg-feedback {
font-size: 85%; font-size: 85%;
margin-bottom: 1em; } margin-bottom: 1em; }
#converse-embedded-chat .reg-feedback,
#converse-embedded-chat #converse-login .conn-feedback,
#conversejs .reg-feedback, #conversejs .reg-feedback,
#conversejs #converse-login .conn-feedback { #conversejs #converse-login .conn-feedback {
display: block; display: block;
text-align: center; text-align: center;
width: 100%; } width: 100%; }
#converse-embedded-chat .activated,
#conversejs .activated { #conversejs .activated {
display: block !important; } display: block !important; }
#converse-embedded-chat .pure-form-message,
#conversejs .pure-form-message { #conversejs .pure-form-message {
padding: 0.5em 0; } padding: 0.5em 0; }
#converse-embedded-chat .pure-button,
#conversejs .pure-button { #conversejs .pure-button {
border-radius: 5px; } border-radius: 5px; }
#converse-embedded-chat .button-primary,
#conversejs .button-primary { #conversejs .button-primary {
color: white; color: white;
background-color: #3AA569; } background-color: #3AA569; }
#converse-embedded-chat .button-secondary,
#conversejs .button-secondary { #conversejs .button-secondary {
color: white; color: white;
background-color: #387592; } background-color: #387592; }
#converse-embedded-chat .button-cancel,
#conversejs .button-cancel { #conversejs .button-cancel {
color: white; color: white;
background-color: #777; } background-color: #777; }
#converse-embedded-chat form.pure-form.converse-form,
#conversejs form.pure-form.converse-form { #conversejs form.pure-form.converse-form {
background: white; background: white;
padding: 1em; } padding: 1em; }
#converse-embedded-chat form.pure-form.converse-form legend,
#conversejs form.pure-form.converse-form legend { #conversejs form.pure-form.converse-form legend {
color: #777; color: #777;
font-size: 125%; font-size: 125%;
margin-bottom: 1.5em; } margin-bottom: 1.5em; }
#converse-embedded-chat form.pure-form.converse-form input[type=checkbox],
#conversejs form.pure-form.converse-form input[type=checkbox] { #conversejs form.pure-form.converse-form input[type=checkbox] {
display: block; } display: block; }
#converse-embedded-chat form.pure-form.converse-form select,
#converse-embedded-chat form.pure-form.converse-form input[type=password],
#converse-embedded-chat form.pure-form.converse-form input[type=number],
#converse-embedded-chat form.pure-form.converse-form input[type=text],
#conversejs form.pure-form.converse-form select, #conversejs form.pure-form.converse-form select,
#conversejs form.pure-form.converse-form input[type=password], #conversejs form.pure-form.converse-form input[type=password],
#conversejs form.pure-form.converse-form input[type=number], #conversejs form.pure-form.converse-form input[type=number],
#conversejs form.pure-form.converse-form input[type=text] { #conversejs form.pure-form.converse-form input[type=text] {
min-width: 50%; } min-width: 50%; }
#converse-embedded-chat form.pure-form.converse-form label,
#conversejs form.pure-form.converse-form label { #conversejs form.pure-form.converse-form label {
font-size: 16px; } font-size: 16px; }
#converse-embedded-chat form.pure-form.converse-form input[type=text],
#converse-embedded-chat form.pure-form.converse-form input[type=password],
#converse-embedded-chat form.pure-form.converse-form input[type=number],
#converse-embedded-chat form.pure-form.converse-form input[type=button],
#converse-embedded-chat form.pure-form.converse-form input[type=submit],
#conversejs form.pure-form.converse-form input[type=text], #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=password],
#conversejs form.pure-form.converse-form input[type=number], #conversejs form.pure-form.converse-form input[type=number],
#conversejs form.pure-form.converse-form input[type=button], #conversejs form.pure-form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=submit] { #conversejs form.pure-form.converse-form input[type=submit] {
padding: 0.5em; } padding: 0.5em; }
#converse-embedded-chat form.pure-form.converse-form input[type=button],
#converse-embedded-chat form.pure-form.converse-form input[type=submit],
#conversejs form.pure-form.converse-form input[type=button], #conversejs form.pure-form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=submit] { #conversejs form.pure-form.converse-form input[type=submit] {
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
margin: 0.5em 0; margin: 0.5em 0;
border: none; } border: none; }
#converse-embedded-chat form.pure-form.converse-form input.error,
#conversejs form.pure-form.converse-form input.error { #conversejs form.pure-form.converse-form input.error {
border: 1px solid #A53214; border: 1px solid #A53214;
color: #777; } color: #777; }
#converse-embedded-chat form.pure-form.converse-form .form-help,
#conversejs form.pure-form.converse-form .form-help { #conversejs form.pure-form.converse-form .form-help {
color: gray; color: gray;
font-size: 85%; font-size: 85%;
padding-top: 0.5em; } padding-top: 0.5em; }
#converse-embedded-chat form.pure-form.converse-form .form-help:hover,
#conversejs form.pure-form.converse-form .form-help:hover { #conversejs form.pure-form.converse-form .form-help:hover {
color: #777; } color: #777; }
#converse-embedded-chat form.pure-form.converse-form .form-help.error,
#conversejs form.pure-form.converse-form .form-help.error { #conversejs form.pure-form.converse-form .form-help.error {
color: #A53214; } color: #A53214; }
#converse-embedded-chat form.pure-form.converse-centered-form,
#conversejs form.pure-form.converse-centered-form { #conversejs form.pure-form.converse-centered-form {
text-align: center; text-align: center;
width: 100%; } width: 100%; }
#converse-embedded-chat .chat-textarea-chatbox-selected,
#conversejs .chat-textarea-chatbox-selected { #conversejs .chat-textarea-chatbox-selected {
border: 1px solid #578308; border: 1px solid #578308;
margin: 0; } margin: 0; }
#converse-embedded-chat .chat-textarea-chatroom-selected,
#conversejs .chat-textarea-chatroom-selected { #conversejs .chat-textarea-chatroom-selected {
border: 2px solid #578EA9; border: 2px solid #578EA9;
margin: 0; } margin: 0; }
#converse-embedded-chat .dropdown dt,
#converse-embedded-chat .dropdown ul,
#conversejs .dropdown dt, #conversejs .dropdown dt,
#conversejs .dropdown ul { #conversejs .dropdown ul {
margin: 0; margin: 0;
...@@ -5980,7 +5911,8 @@ ...@@ -5980,7 +5911,8 @@
float: right; } float: right; }
#conversejs #controlbox .controlbox-panes { #conversejs #controlbox .controlbox-panes {
height: 100%; height: 100%;
overflow-y: auto; } overflow-y: auto;
background-color: white; }
#conversejs #controlbox .controlbox-pane { #conversejs #controlbox .controlbox-pane {
padding: 1em; padding: 1em;
background-color: white; background-color: white;
......
css/inverse.css
View file @ 1405884c
...@@ -4755,9 +4755,10 @@ ...@@ -4755,9 +4755,10 @@
#conversejs .invisible { #conversejs .invisible {
visibility: hidden !important; } visibility: hidden !important; }
#converse-embedded-chat, body.reset {
margin: 0; }
#conversejs { #conversejs {
margin-left: -0.5em;
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right); padding-right: env(safe-area-inset-right);
bottom: 0; bottom: 0;
...@@ -4770,39 +4771,29 @@ ...@@ -4770,39 +4771,29 @@
font-size: 16px; font-size: 16px;
position: fixed; position: fixed;
z-index: 1031; } z-index: 1031; }
#converse-embedded-chat ::-webkit-input-placeholder,
#conversejs ::-webkit-input-placeholder { #conversejs ::-webkit-input-placeholder {
/* Chrome/Opera/Safari */ /* Chrome/Opera/Safari */
color: #A8ABA1; } color: #A8ABA1; }
#converse-embedded-chat ::-moz-placeholder,
#conversejs ::-moz-placeholder { #conversejs ::-moz-placeholder {
/* Firefox 19+ */ /* Firefox 19+ */
color: #A8ABA1; } color: #A8ABA1; }
#converse-embedded-chat :-ms-input-placeholder,
#conversejs :-ms-input-placeholder { #conversejs :-ms-input-placeholder {
/* IE 10+ */ /* IE 10+ */
color: #A8ABA1; } color: #A8ABA1; }
#converse-embedded-chat :-moz-placeholder,
#conversejs :-moz-placeholder { #conversejs :-moz-placeholder {
/* Firefox 18- */ /* Firefox 18- */
color: #A8ABA1; } color: #A8ABA1; }
#converse-embedded-chat ::placeholder,
#conversejs ::placeholder { #conversejs ::placeholder {
color: #A8ABA1; } color: #A8ABA1; }
#converse-embedded-chat ::selection,
#conversejs ::selection { #conversejs ::selection {
background-color: #DCF9F6; } background-color: #DCF9F6; }
#converse-embedded-chat ::-moz-selection,
#conversejs ::-moz-selection { #conversejs ::-moz-selection {
background-color: #DCF9F6; } background-color: #DCF9F6; }
#converse-embedded-chat canvas,
#conversejs canvas { #conversejs canvas {
background: #777; background: #777;
border-radius: 4px; } border-radius: 4px; }
#converse-embedded-chat .circle,
#conversejs .circle { #conversejs .circle {
border-radius: 50%; } border-radius: 50%; }
#converse-embedded-chat .sidebar,
#conversejs .sidebar { #conversejs .sidebar {
display: none; display: none;
width: 50px; width: 50px;
...@@ -4811,25 +4802,20 @@ ...@@ -4811,25 +4802,20 @@
background-color: #578EA9; background-color: #578EA9;
color: white; color: white;
text-align: center; } text-align: center; }
#converse-embedded-chat .sidebar .chatbox-btn,
#conversejs .sidebar .chatbox-btn { #conversejs .sidebar .chatbox-btn {
float: none; float: none;
margin: 0; margin: 0;
font-size: 1.35em; } font-size: 1.35em; }
#converse-embedded-chat .sidebar .chatbox-btn.fa-vcard,
#conversejs .sidebar .chatbox-btn.fa-vcard { #conversejs .sidebar .chatbox-btn.fa-vcard {
margin-top: 1em; } margin-top: 1em; }
#converse-embedded-chat .sidebar .bottom,
#conversejs .sidebar .bottom { #conversejs .sidebar .bottom {
position: absolute; position: absolute;
bottom: 1em; } bottom: 1em; }
#converse-embedded-chat .badge,
#conversejs .badge { #conversejs .badge {
padding: 0.4em; padding: 0.4em;
line-height: 1; line-height: 1;
font-weight: normal; font-weight: normal;
font-size: 90%; } font-size: 90%; }
#converse-embedded-chat .fa,
#conversejs .fa { #conversejs .fa {
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
display: inline-block; display: inline-block;
...@@ -4837,14 +4823,11 @@ ...@@ -4837,14 +4823,11 @@
text-rendering: auto; text-rendering: auto;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; } -moz-osx-font-smoothing: grayscale; }
#converse-embedded-chat .list-container,
#conversejs .list-container { #conversejs .list-container {
text-align: left; text-align: left;
margin: 0.3em 0; } margin: 0.3em 0; }
#converse-embedded-chat .btn.btn-primary,
#conversejs .btn.btn-primary { #conversejs .btn.btn-primary {
color: #fff; } color: #fff; }
#converse-embedded-chat .no-text-select,
#conversejs .no-text-select { #conversejs .no-text-select {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
...@@ -4905,7 +4888,6 @@ ...@@ -4905,7 +4888,6 @@
opacity: 0; } opacity: 0; }
100% { 100% {
opacity: 1; } } opacity: 1; } }
#converse-embedded-chat .fade-in,
#conversejs .fade-in { #conversejs .fade-in {
opacity: 0; opacity: 0;
/* make things invisible upon start */ /* make things invisible upon start */
...@@ -4921,7 +4903,6 @@ ...@@ -4921,7 +4903,6 @@
-webkit-animation-timing-function: ease; -webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease; -moz-animation-timing-function: ease;
animation-timing-function: ease; } animation-timing-function: ease; }
#converse-embedded-chat .visible,
#conversejs .visible { #conversejs .visible {
opacity: 0; opacity: 0;
/* make things invisible upon start */ /* make things invisible upon start */
...@@ -4937,16 +4918,13 @@ ...@@ -4937,16 +4918,13 @@
-webkit-animation-timing-function: ease; -webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease; -moz-animation-timing-function: ease;
animation-timing-function: ease; } animation-timing-function: ease; }
#converse-embedded-chat .hidden,
#conversejs .hidden { #conversejs .hidden {
opacity: 0; opacity: 0;
display: none; } display: none; }
#converse-embedded-chat .collapsed,
#conversejs .collapsed { #conversejs .collapsed {
height: 0 !important; height: 0 !important;
overflow: hidden !important; overflow: hidden !important;
padding: 0 !important; } padding: 0 !important; }
#converse-embedded-chat .locked,
#conversejs .locked { #conversejs .locked {
padding-right: 22px; } padding-right: 22px; }
@-webkit-keyframes spin { @-webkit-keyframes spin {
...@@ -4972,10 +4950,8 @@ ...@@ -4972,10 +4950,8 @@
-ms-transform: rotate(359deg); -ms-transform: rotate(359deg);
-o-transform: rotate(359deg); -o-transform: rotate(359deg);
transform: rotate(359deg); } } transform: rotate(359deg); } }
#converse-embedded-chat .emojione,
#conversejs .emojione { #conversejs .emojione {
height: 22px; } height: 22px; }
#converse-embedded-chat .spinner,
#conversejs .spinner { #conversejs .spinner {
-webkit-animation: spin 2s infinite, linear; -webkit-animation: spin 2s infinite, linear;
-moz-animation: spin 2s infinite, linear; -moz-animation: spin 2s infinite, linear;
...@@ -4983,152 +4959,107 @@ ...@@ -4983,152 +4959,107 @@
display: block; display: block;
text-align: center; text-align: center;
margin: 1em; } margin: 1em; }
#converse-embedded-chat .spinner:before,
#conversejs .spinner:before { #conversejs .spinner:before {
font-size: 24px; font-size: 24px;
font-family: 'Converse-js' !important; font-family: 'Converse-js' !important;
content: "\231b"; } content: "\231b"; }
#converse-embedded-chat .left,
#conversejs .left { #conversejs .left {
float: left; } float: left; }
#converse-embedded-chat .right,
#conversejs .right { #conversejs .right {
float: right; } float: right; }
#converse-embedded-chat .centered,
#conversejs .centered { #conversejs .centered {
text-align: center; text-align: center;
display: block; display: block;
margin: 0; margin: 0;
padding: 10% 0; } padding: 10% 0; }
#converse-embedded-chat .hor_centered,
#conversejs .hor_centered { #conversejs .hor_centered {
text-align: center; text-align: center;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
clear: both; } clear: both; }
#converse-embedded-chat .button-group,
#converse-embedded-chat .input-button-group,
#conversejs .button-group, #conversejs .button-group,
#conversejs .input-button-group { #conversejs .input-button-group {
display: table; } display: table; }
#converse-embedded-chat .button-group,
#conversejs .button-group { #conversejs .button-group {
width: 100%; } width: 100%; }
#converse-embedded-chat .input-button-group button,
#converse-embedded-chat .input-button-group input,
#conversejs .input-button-group button, #conversejs .input-button-group button,
#conversejs .input-button-group input { #conversejs .input-button-group input {
display: table-cell; } display: table-cell; }
#converse-embedded-chat .error,
#conversejs .error { #conversejs .error {
color: #A53214; } color: #A53214; }
#converse-embedded-chat .info,
#conversejs .info { #conversejs .info {
color: #1E9652; } color: #1E9652; }
#converse-embedded-chat .reg-feedback,
#conversejs .reg-feedback { #conversejs .reg-feedback {
font-size: 85%; font-size: 85%;
margin-bottom: 1em; } margin-bottom: 1em; }
#converse-embedded-chat .reg-feedback,
#converse-embedded-chat #converse-login .conn-feedback,
#conversejs .reg-feedback, #conversejs .reg-feedback,
#conversejs #converse-login .conn-feedback { #conversejs #converse-login .conn-feedback {
display: block; display: block;
text-align: center; text-align: center;
width: 100%; } width: 100%; }
#converse-embedded-chat .activated,
#conversejs .activated { #conversejs .activated {
display: block !important; } display: block !important; }
#converse-embedded-chat .pure-form-message,
#conversejs .pure-form-message { #conversejs .pure-form-message {
padding: 0.5em 0; } padding: 0.5em 0; }
#converse-embedded-chat .pure-button,
#conversejs .pure-button { #conversejs .pure-button {
border-radius: 5px; } border-radius: 5px; }
#converse-embedded-chat .button-primary,
#conversejs .button-primary { #conversejs .button-primary {
color: white; color: white;
background-color: #E7A151; } background-color: #E7A151; }
#converse-embedded-chat .button-secondary,
#conversejs .button-secondary { #conversejs .button-secondary {
color: white; color: white;
background-color: #387592; } background-color: #387592; }
#converse-embedded-chat .button-cancel,
#conversejs .button-cancel { #conversejs .button-cancel {
color: white; color: white;
background-color: #777; } background-color: #777; }
#converse-embedded-chat form.pure-form.converse-form,
#conversejs form.pure-form.converse-form { #conversejs form.pure-form.converse-form {
background: white; background: white;
padding: 1em; } padding: 1em; }
#converse-embedded-chat form.pure-form.converse-form legend,
#conversejs form.pure-form.converse-form legend { #conversejs form.pure-form.converse-form legend {
color: #777; color: #777;
font-size: 125%; font-size: 125%;
margin-bottom: 1.5em; } margin-bottom: 1.5em; }
#converse-embedded-chat form.pure-form.converse-form input[type=checkbox],
#conversejs form.pure-form.converse-form input[type=checkbox] { #conversejs form.pure-form.converse-form input[type=checkbox] {
display: block; } display: block; }
#converse-embedded-chat form.pure-form.converse-form select,
#converse-embedded-chat form.pure-form.converse-form input[type=password],
#converse-embedded-chat form.pure-form.converse-form input[type=number],
#converse-embedded-chat form.pure-form.converse-form input[type=text],
#conversejs form.pure-form.converse-form select, #conversejs form.pure-form.converse-form select,
#conversejs form.pure-form.converse-form input[type=password], #conversejs form.pure-form.converse-form input[type=password],
#conversejs form.pure-form.converse-form input[type=number], #conversejs form.pure-form.converse-form input[type=number],
#conversejs form.pure-form.converse-form input[type=text] { #conversejs form.pure-form.converse-form input[type=text] {
min-width: 50%; } min-width: 50%; }
#converse-embedded-chat form.pure-form.converse-form label,
#conversejs form.pure-form.converse-form label { #conversejs form.pure-form.converse-form label {
font-size: 18px; } font-size: 18px; }
#converse-embedded-chat form.pure-form.converse-form input[type=text],
#converse-embedded-chat form.pure-form.converse-form input[type=password],
#converse-embedded-chat form.pure-form.converse-form input[type=number],
#converse-embedded-chat form.pure-form.converse-form input[type=button],
#converse-embedded-chat form.pure-form.converse-form input[type=submit],
#conversejs form.pure-form.converse-form input[type=text], #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=password],
#conversejs form.pure-form.converse-form input[type=number], #conversejs form.pure-form.converse-form input[type=number],
#conversejs form.pure-form.converse-form input[type=button], #conversejs form.pure-form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=submit] { #conversejs form.pure-form.converse-form input[type=submit] {
padding: 0.5em; } padding: 0.5em; }
#converse-embedded-chat form.pure-form.converse-form input[type=button],
#converse-embedded-chat form.pure-form.converse-form input[type=submit],
#conversejs form.pure-form.converse-form input[type=button], #conversejs form.pure-form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=submit] { #conversejs form.pure-form.converse-form input[type=submit] {
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
margin: 0.5em 0; margin: 0.5em 0;
border: none; } border: none; }
#converse-embedded-chat form.pure-form.converse-form input.error,
#conversejs form.pure-form.converse-form input.error { #conversejs form.pure-form.converse-form input.error {
border: 1px solid #A53214; border: 1px solid #A53214;
color: #777; } color: #777; }
#converse-embedded-chat form.pure-form.converse-form .form-help,
#conversejs form.pure-form.converse-form .form-help { #conversejs form.pure-form.converse-form .form-help {
color: gray; color: gray;
font-size: 85%; font-size: 85%;
padding-top: 0.5em; } padding-top: 0.5em; }
#converse-embedded-chat form.pure-form.converse-form .form-help:hover,
#conversejs form.pure-form.converse-form .form-help:hover { #conversejs form.pure-form.converse-form .form-help:hover {
color: #777; } color: #777; }
#converse-embedded-chat form.pure-form.converse-form .form-help.error,
#conversejs form.pure-form.converse-form .form-help.error { #conversejs form.pure-form.converse-form .form-help.error {
color: #A53214; } color: #A53214; }
#converse-embedded-chat form.pure-form.converse-centered-form,
#conversejs form.pure-form.converse-centered-form { #conversejs form.pure-form.converse-centered-form {
text-align: center; text-align: center;
width: 100%; } width: 100%; }
#converse-embedded-chat .chat-textarea-chatbox-selected,
#conversejs .chat-textarea-chatbox-selected { #conversejs .chat-textarea-chatbox-selected {
border: 1px solid #578308; border: 1px solid #578308;
margin: 0; } margin: 0; }
#converse-embedded-chat .chat-textarea-chatroom-selected,
#conversejs .chat-textarea-chatroom-selected { #conversejs .chat-textarea-chatroom-selected {
border: 2px solid #578EA9; border: 2px solid #578EA9;
margin: 0; } margin: 0; }
#converse-embedded-chat .dropdown dt,
#converse-embedded-chat .dropdown ul,
#conversejs .dropdown dt, #conversejs .dropdown dt,
#conversejs .dropdown ul { #conversejs .dropdown ul {
margin: 0; margin: 0;
...@@ -6052,7 +5983,8 @@ body { ...@@ -6052,7 +5983,8 @@ body {
float: right; } float: right; }
#conversejs #controlbox .controlbox-panes { #conversejs #controlbox .controlbox-panes {
height: 100%; height: 100%;
overflow-y: auto; } overflow-y: auto;
background-color: white; }
#conversejs #controlbox .controlbox-pane { #conversejs #controlbox .controlbox-pane {
padding: 1.2em; padding: 1.2em;
background-color: white; background-color: white;
...@@ -6142,7 +6074,7 @@ body { ...@@ -6142,7 +6074,7 @@ body {
#conversejs.fullscreen #controlbox .controlbox-pane { #conversejs.fullscreen #controlbox .controlbox-pane {
border-radius: 0; } border-radius: 0; }
#conversejs.fullscreen #controlbox #login-dialog { #conversejs.fullscreen #controlbox #login-dialog {
border-radius: 4px; } border-radius: 0; }
#conversejs.fullscreen #controlbox #login-dialog .converse-form { #conversejs.fullscreen #controlbox #login-dialog .converse-form {
margin: 0; margin: 0;
padding: 3em 2em 3em; } padding: 3em 2em 3em; }
......
mockup/chatbox.html
View file @ 1405884c
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" /> <link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
</head> </head>
<body> <body class="reset">
<div id="conversejs" class="fullscreen"> <div id="conversejs" class="fullscreen">
<div class="sidebar"></div> <div class="sidebar"></div>
<div class="row no-gutters"> <div class="row no-gutters">
......
sass/_controlbox.scss
View file @ 1405884c
...@@ -406,6 +406,7 @@ ...@@ -406,6 +406,7 @@
.controlbox-panes { .controlbox-panes {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
background-color: white;
} }
.controlbox-pane { .controlbox-pane {
......
sass/_core.scss
View file @ 1405884c
...@@ -6,9 +6,11 @@ ...@@ -6,9 +6,11 @@
@include animation-timing-function(ease); @include animation-timing-function(ease);
} }
#converse-embedded-chat, body.reset {
margin: 0;
}
#conversejs { #conversejs {
margin-left: -$chat-gutter; // Mystery why this is necessary
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right); padding-right: env(safe-area-inset-right);
bottom: 0; bottom: 0;
......
sass/inverse/_controlbox.scss
View file @ 1405884c
#conversejs.fullscreen { #conversejs.fullscreen {
#controlbox { #controlbox {
margin: 0; margin: 0;
// margin-left: -$chat-gutter; // Mystery why this is necessary
.controlbox-pane { .controlbox-pane {
border-radius: 0; border-radius: 0;
} }
#login-dialog { #login-dialog {
border-radius: $chatbox-border-radius; border-radius: 0;
.converse-form { .converse-form {
margin: 0; margin: 0;
padding: 3em 2em 3em; padding: 3em 2em 3em;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7