Updated messages styles and add support for encryption icon

resources/chat/message_status_icons.style

@@ -10,6 +10,10 @@
     height: 1.6em;
 }
 
+.inline-message-icon {
+    margin-top: -.4em;
+}
+
 .x-ltime.message-status {
     left: 0px;
     margin-left: -1.5em;
@@ -24,6 +28,19 @@
     clear: both;
 }
 
+.smooth {
+    float: right;
+}
+
+.smooth  > .status-icon {
+    height: 1.1em;
+    margin-left: 4px;
+}
+
+.x-rtime:not(.message-status) {
+    clear: both;
+}
+
 .stockholm {
     float: right;
     padding-right: 5px;
@@ -55,7 +72,7 @@
     filter: invert(38%) sepia(17%) saturate(0%) hue-rotate(177deg) brightness(94%) contrast(97%);
 }
 
-.delivered, .displayed {
+.delivered, .displayed, .is-secure {
     filter: invert(28%) sepia(98%) saturate(2550%) hue-rotate(107deg) brightness(102%) contrast(103%);
 }
 

resources/chat/styles/Smooth Operator/html/message.html

@@ -6,9 +6,10 @@
 		<span class="x-sender">{message.sender.name} </span>
 		<span class="x-rtime" title="{message.date}">{message.time} </span>
 		<span class="x-ltime" title="{message.date}">{message.time} </span>
-                <span id="status-{message.id}">{message.status}</span>
+		<span id="encryption-{message.id}" class="smooth"></span>
+        <span id="status-{message.id}">{message.status}</span>
 		<span class="x-mark"></span>
-		<span class="x-message" title="{message.time}">{message.message} </span>
+		<span id='text-{message.id}' class="x-message" title="{message.time}">{message.message} </span>
 	</span>
 	<span id="insert"></span>
 </div>

resources/chat/styles/Smooth Operator/html/message_continuation.html

@@ -6,9 +6,10 @@
 		<span class="x-sender">{message.sender.name} </span>
 		<span class="x-rtime" title="{message.date}">{message.time} </span>
 		<span class="x-ltime" title="{message.date}">{message.time} </span>
-                <span id="status-{message.id}">{message.status}</span>
+        <span id="encryption-{message.id}" class="smooth"></span>
+        <span id="status-{message.id}">{message.status}</span>
 		<span class="x-mark"></span>
-		<span class="x-message" title="{message.time}">{message.message} </span>
+        <span id='text-{message.id}' class="x-message" title="{message.time}">{message.message} </span>
 	</span>
 	<span id="insert"></span>
 </div>

resources/chat/styles/Smooth Operator/html/message_status.html

 <span id='status-{message.id}'>
     <span class="x-ltime message-status"><img class="{message.css_classes} {message.status}" src="{message.iconpath}" /></span>
-    <span class="x-rtime"><img class="{message.css_classes} {message.status}" src="{message.iconpath}" /></span>
+    <span class="x-rtime message-status"><img class="{message.css_classes} {message.status}" src="{message.iconpath}" /></span>
 </span>

resources/chat/styles/Stockholm/html/message.html

-<div class="x-container {message.css_classes} {user_icons} {message.text_direction}">
+<div id="{message.id}" class="x-container {message.css_classes} {user_icons} {message.text_direction}">
 	<img class="x-buddyicon" src="{message.sender.iconpath}" />
 	<div class="x-iconoverlay"></div>
 	<div class="x-mentionicon" title="Mentioned!"></div>
@@ -7,9 +7,10 @@
 		<div class="x-sender">{message.sender.name}</div>
 	</div>
 	<div class="x-message {message.text_direction}">
-                <span id="status-{message.id}">{message.status}</span>
+        <span id="encryption-{message.id}" class="stockholm"></span>
+        <span id="status-{message.id}">{message.status}</span>
 		<div class="x-time" title="{message.date}">{message.time}</div>
-		<div class="x-text">{message.message}</div>
+                <div id="text-{message.id}" class="x-text">{message.message}</div>
 	</div>
 	<div id="insert"></div>
 </div>

resources/chat/styles/Stockholm/html/message_continuation.html

 <div class="x-message {message.css_classes} {message.text_direction}">
-        <span id="status-{message.id}">{message.status}</span>
+    <span id="encryption-{message.id}" class="stockholm"></span>
+    <span id="status-{message.id}">{message.status}</span>
 	<div class="x-time" title="{message.date}">{message.time}</div>
-	<div class="x-text">{message.message}</div>
+        <div id="text-{message.id}" class="x-text">{message.message}</div>
 </div>
 <div id="insert"></div>