Commit 19d9e281 authored by JC Brand's avatar JC Brand

Update css and keep input and textarea values across toggles

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