Skip to content

C
converse.js
Commit 19d9e281 authored by JC Brand's avatar JC Brand
Browse files
Options

Update css and keep input and textarea values across toggles

parent d5348ea8
Hide whitespace changes
Inline Side-by-side
Showing with 185 additions and 181 deletions
css/converse.css
View file @ 19d9e281
......@@ -1691,8 +1691,8 @@
margin: 0;
padding: 0;
position: relative; }
#converse-embedded-chat .chatbox form.sendXMPPMessage,
#conversejs .chatbox form.sendXMPPMessage {
#converse-embedded-chat .chatbox .sendXMPPMessage,
#conversejs .chatbox .sendXMPPMessage {
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
border-bottom-left-radius: 4px;
......@@ -1706,18 +1706,18 @@
height: 95px;
min-width: 200px; }
@media screen and (max-height: 450px) {
#converse-embedded-chat .chatbox form.sendXMPPMessage,
#conversejs .chatbox form.sendXMPPMessage {
#converse-embedded-chat .chatbox .sendXMPPMessage,
#conversejs .chatbox .sendXMPPMessage {
width: 100%; } }
@media screen and (max-width: 480px) {
#converse-embedded-chat .chatbox form.sendXMPPMessage,
#conversejs .chatbox form.sendXMPPMessage {
#converse-embedded-chat .chatbox .sendXMPPMessage,
#conversejs .chatbox .sendXMPPMessage {
width: 100%; } }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea-hint,
#conversejs .chatbox form.sendXMPPMessage .chat-textarea-hint {
#converse-embedded-chat .chatbox .sendXMPPMessage .spoiler-hint,
#conversejs .chatbox .sendXMPPMessage .spoiler-hint {
width: 100%; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
#conversejs .chatbox form.sendXMPPMessage .chat-textarea {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea,
#conversejs .chatbox .sendXMPPMessage .chat-textarea {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border: 0;
......@@ -1725,12 +1725,12 @@
padding: 0.5em;
width: 100%;
resize: none; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea.spoiler,
#conversejs .chatbox form.sendXMPPMessage .chat-textarea.spoiler {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea.spoiler,
#conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
background-color: #e7f7ee;
height: 42px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .send-button,
#conversejs .chatbox form.sendXMPPMessage .send-button {
#converse-embedded-chat .chatbox .sendXMPPMessage .send-button,
#conversejs .chatbox .sendXMPPMessage .send-button {
position: absolute;
left: 3px;
width: -webkit-calc(100% - 6px);
......@@ -1740,63 +1740,63 @@
font-size: 80%;
height: 27px;
bottom: -30px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar {
box-sizing: border-box;
margin: 0;
padding: 5px;
height: 25px;
display: block;
background-color: #E7FBF0; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar a {
font-size: 14px;
color: #777;
text-decoration: none;
text-shadow: none; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text {
font-size: 12px;
padding-right: 3px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted {
color: #777; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
color: #578EA9; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified {
color: #cf5300; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private a,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .private a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .private {
color: #4b7003; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr {
float: right; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li {
cursor: pointer;
display: inline-block;
list-style: none;
margin-top: 1px;
padding: 0 3px 0 3px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li:hover {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li:hover {
cursor: pointer; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu {
background-color: #fff;
bottom: 100%;
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
......@@ -1804,71 +1804,71 @@
margin: 0;
position: absolute;
right: 0; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
color: #578EA9; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
height: 100px;
overflow: scroll;
padding: 0.5em; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
overflow: hidden;
left: 0; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
height: 30px;
padding: 4px;
z-index: 98; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
font-size: 20px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
margin-left: 0;
cursor: pointer;
list-style: none;
position: relative; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
padding: 0.3em; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
color: #8f2831; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
color: #777; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley {
padding-left: 5px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul {
z-index: 99; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
display: block;
padding: 7px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
display: block; }
#converse-embedded-chat .chatbox .dragresize,
#conversejs .chatbox .dragresize {
......
css/inverse.css
View file @ 19d9e281
......@@ -1756,8 +1756,8 @@ body {
margin: 0;
padding: 0;
position: relative; }
#converse-embedded-chat .chatbox form.sendXMPPMessage,
#conversejs .chatbox form.sendXMPPMessage {
#converse-embedded-chat .chatbox .sendXMPPMessage,
#conversejs .chatbox .sendXMPPMessage {
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
border-bottom-left-radius: 0;
......@@ -1771,18 +1771,18 @@ body {
height: 99px;
min-width: 100%; }
@media screen and (max-height: 450px) {
#converse-embedded-chat .chatbox form.sendXMPPMessage,
#conversejs .chatbox form.sendXMPPMessage {
#converse-embedded-chat .chatbox .sendXMPPMessage,
#conversejs .chatbox .sendXMPPMessage {
width: 100%; } }
@media screen and (max-width: 480px) {
#converse-embedded-chat .chatbox form.sendXMPPMessage,
#conversejs .chatbox form.sendXMPPMessage {
#converse-embedded-chat .chatbox .sendXMPPMessage,
#conversejs .chatbox .sendXMPPMessage {
width: 100%; } }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea-hint,
#conversejs .chatbox form.sendXMPPMessage .chat-textarea-hint {
#converse-embedded-chat .chatbox .sendXMPPMessage .spoiler-hint,
#conversejs .chatbox .sendXMPPMessage .spoiler-hint {
width: 100%; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
#conversejs .chatbox form.sendXMPPMessage .chat-textarea {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea,
#conversejs .chatbox .sendXMPPMessage .chat-textarea {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 0;
......@@ -1790,12 +1790,12 @@ body {
padding: 0.5em;
width: 100%;
resize: none; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea.spoiler,
#conversejs .chatbox form.sendXMPPMessage .chat-textarea.spoiler {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea.spoiler,
#conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
background-color: #e7f7ee;
height: 42px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .send-button,
#conversejs .chatbox form.sendXMPPMessage .send-button {
#converse-embedded-chat .chatbox .sendXMPPMessage .send-button,
#conversejs .chatbox .sendXMPPMessage .send-button {
position: absolute;
left: 3px;
width: -webkit-calc(100% - 6px);
......@@ -1805,63 +1805,63 @@ body {
font-size: 80%;
height: 27px;
bottom: -30px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar {
box-sizing: border-box;
margin: 0;
padding: 5px;
height: 29px;
display: block;
background-color: #E7FBF0; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar a {
font-size: 16px;
color: #777;
text-decoration: none;
text-shadow: none; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text {
font-size: 12px;
padding-right: 3px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted {
color: #777; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
color: #578EA9; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified {
color: #cf5300; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private a,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .private a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .private {
color: #4b7003; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr {
float: right; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li {
cursor: pointer;
display: inline-block;
list-style: none;
margin-top: 1px;
padding: 0 3px 0 3px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li:hover {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li:hover {
cursor: pointer; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu {
background-color: #fff;
bottom: 100%;
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
......@@ -1869,71 +1869,71 @@ body {
margin: 0;
position: absolute;
right: 0; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
color: #578EA9; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
height: 150px;
overflow: scroll;
padding: 0.5em; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
overflow: hidden;
left: 0; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
height: 32px;
padding: 4px;
z-index: 98; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
font-size: 26px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
margin-left: 0;
cursor: pointer;
list-style: none;
position: relative; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
padding: 0.3em; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
color: #8f2831; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
color: #777; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley {
padding-left: 5px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul {
z-index: 99; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
display: block;
padding: 7px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
background-color: #DCF9F6; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
display: block; }
#converse-embedded-chat .chatbox .dragresize,
#conversejs .chatbox .dragresize {
......
sass/_chatbox.scss
View file @ 19d9e281
......@@ -230,7 +230,8 @@
position: relative;
}
}
form.sendXMPPMessage {
.sendXMPPMessage {
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
@include border-bottom-radius($chatbox-border-radius);
......@@ -248,9 +249,10 @@
@media screen and (max-width: $mobile-portrait-length) {
width: 100%;
}
.chat-textarea-hint {
.spoiler-hint {
width: 100%;
}
.chat-textarea {
@include border-bottom-radius($chatbox-border-radius);
border: 0;
......
src/converse-chatview.js
View file @ 19d9e281
......@@ -284,7 +284,9 @@
'label_send': __('Send'),
'show_send_button': _converse.show_send_button,
'show_textarea': true,
'show_toolbar': _converse.show_toolbar
'show_toolbar': _converse.show_toolbar,
'hint_value': _.get(this.el.querySelector('.spoiler-hint'), 'value'),
'message_value': _.get(this.el.querySelector('.chat-textarea'), 'value')
}));
},
......@@ -784,9 +786,9 @@
.c(_converse.ACTIVE, {'xmlns': Strophe.NS.CHATSTATES}).up();
if (this.message_form_view.model.get('sending_spoiler')) {
const has_hint = this.el.querySelector('.chat-textarea-hint').value.length > 0;
const has_hint = this.el.querySelector('.spoiler-hint').value.length > 0;
if (has_hint) {
const hint = document.querySelector('.chat-textarea-hint').value;
const hint = document.querySelector('.spoiler-hint').value;
stanza.c('spoiler', {'xmlns': Strophe.NS.SPOILER }, hint);
} else {
stanza.c('spoiler', {'xmlns': Strophe.NS.SPOILER });
......@@ -867,7 +869,7 @@
'is_spoiler': is_spoiler
};
if (is_spoiler) {
const spoiler = this.el.querySelector('.chat-textarea-hint')
const spoiler = this.el.querySelector('.spoiler-hint')
attrs.spoiler_hint = spoiler.textContent.length > 0 ? spoiler.textContent : __('Spoiler');
}
return attrs;
......
src/templates/chatbox_message_form.html
View file @ 19d9e281
......@@ -5,15 +5,15 @@
<ul class="chat-toolbar no-text-select"></ul>
{[ } ]}
{[ if (o.allow_spoiler_messages) { ]}
<input type="text" placeholder="{{o.label_spoiler_hint}}"
class="{[ if (!o.sending_spoiler) { ]} hidden {[ } ]} chat-textarea-hint"/>
<input type="text" placeholder="{{o.label_spoiler_hint}}" value="{{ o.hint_value }}"
class="{[ if (!o.sending_spoiler) { ]} hidden {[ } ]} spoiler-hint"/>
{[ } ]}
<textarea
type="text"
class="chat-textarea
{[ if (o.show_send_button) { ]} chat-textarea-send-button {[ } ]}
{[ if (o.sending_spoiler) { ]} spoiler {[ } ]}"
placeholder="{{{o.label_personal_message}}}"></textarea>
placeholder="{{{o.label_personal_message}}}">{{ o.message_value }}</textarea>
{[ if (o.show_send_button) { ]}
<button type="submit" class="pure-button send-button">{{{ o.label_send }}}</button>
{[ } ]}
......
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