Add highlights to selected filters and streams/subjects in the left sidebars, as well as a pointer arrow

(imported from commit 5c799a19c5bde52705c60e1b9fdae832bd5474f0)

zephyr/static/styles/zephyr.css

@@ -259,7 +259,11 @@ a:hover code {
 }
 
 #stream_filters li:hover {
-    background-color: lightgrey;
+    background-color: #e2e8dd;
+}
+
+#stream_filters li.active-subject-filter:hover {
+    background-color: #ccd6cc;
 }
 
 #user_presences {
@@ -339,6 +343,20 @@ ul.filters hr {
 
 li.active-filter, li.active-subject-filter {
     font-weight: bold;
+    background: #ccd6cc;
+    position: relative;
+}
+
+li.active-filter:after, li.active-subject-filter:after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    right: -6px;
+    margin-top: -6px;
+    display: block;
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+    border-left: 6px solid #ccd6cc;
 }
 
 li.hidden-filter {
@@ -1679,6 +1697,11 @@ ul.expanded_subjects {
 
 li.expanded_subject {
     margin-left: .3em;
+}
+
+li.expanded_subject .subject_box {
+    display: inline-block;
+    width: 100%;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;

zephyr/static/templates/sidebar_subject_list.handlebars

@@ -1,12 +1,14 @@
 <ul class='expanded_subjects' data-stream='{{stream}}'>
     {{#each subjects}}
     <li class='expanded_subject' data-name='{{subject}}'>
+      <span class='subject_box'>
         <a href='{{url}}'>
           {{subject}}
           <span class="subject_count {{#if is_zero}}zero_count{{/if}}">
               (<span class="value">{{unread}}</span>)
           </span>
         </a>
+      </span>
     </li>
     {{/each}}
 </ul>