Merge branch 'master' into 0809gw-messagemodule

webroot/styles/layout.css

@@ -376,10 +376,21 @@ h2 {
 }
 #message-body-form {
   font-size: 1em;
+  height: 60px;
 }
 #message-body-form:disabled{
   opacity: .5;
 }
+#message-body-form img {
+  display: inline;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+#message-body-form .emoji {
+  width: 40px;
+}
+
 #message-form-actions {
   flex-direction: row;
   justify-content: space-between;
@@ -387,6 +398,15 @@ h2 {
   width: 100%;
 }
 
+.message-text img {
+  display: inline;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.message-text .emoji {
+  width: 60px;
+}
 
 /* ************************************************8 */
 
@@ -618,18 +638,86 @@ h2 {
   border-radius: 15px;
 }
 
+.message-text .instagram-embed {
+  height: 314px;
+}
+
+.message-text code {
+  background-color:darkslategrey;
+  padding: 3px;
+}
+/* Emoji picker */
+#emoji-button {
+  position: relative;
+  top: -65px;
+  right: 10px;
+  cursor: pointer;
+}
+
 .message-text .embedded-image {
   width: 100%;
   height: 170px;
   border-radius: 15px;
 }
 
-.message-text .highlighted {
-  color: orange;
-  font-weight: bold;
+.message-text code {
+  background-color:darkslategrey;
+  padding: 3px;
+}
+
+/* Emoji picker */
+#emoji-button {
+  position: relative;
+  top: -65px;
+  right: 10px;
+  cursor: pointer;
+}
+.message-text .embedded-image {
+  width: 100%;
+  height: 170px;
+  border-radius: 15px;
 }
 
 .message-text code {
   background-color:darkslategrey;
   padding: 3px;
-}
+}
+.message-text .highlighted {
+  color: orange;
+  font-weight: 400;
+  font-size: 14px;
+
+}
+
+.message-text code {
+  background-color:darkslategrey;
+  padding: 3px;
+}
+
+/*
+The chat input has a fake placeholder that is styled below.
+It pulls the placeholder text from the div's placeholder attribute.
+But really it's just the innerHTML content.
+*/
+
+/* If the div is empty then show the placeholder */
+#message-body-form:empty:before{
+  content: attr(placeholder);
+  pointer-events: none;
+  display: block; /* For Firefox */
+
+  /* Style the div's placeholder text color */
+  color: rgba(0, 0, 0, 0.5);
+}
+
+/* When chat is enabled (contenteditable=true)  */
+#message-body-form[contenteditable=true]:before {
+  opacity: 1.0;
+}
+
+
+/* When chat is disabled (contenteditable=false) chat input div should appear disabled. */
+#message-body-form[contenteditable=false] {
+  opacity: 0.6;
+}
+