colorize unread and starred icons

Author: dhewg

src/assets/index.html

@@ -27,13 +27,13 @@
                         :class="{active: filterSelected == 'unread'}"
                         title="Unread"
                         @click="filterSelected = 'unread'">
-                    <span class="icon">{% inline "circle-full.svg" %}</span>
+                    <span class="icon icon-unread">{% inline "circle-full.svg" %}</span>
                 </button>
                 <button class="toolbar-item"
                         :class="{active: filterSelected == 'starred'}"
                         title="Starred"
                         @click="filterSelected = 'starred'">
-                    <span class="icon">{% inline "star-full.svg" %}</span>
+                    <span class="icon icon-starred">{% inline "star-full.svg" %}</span>
                 </button>
                 <button class="toolbar-item"
                         :class="{active: filterSelected == ''}"
@@ -274,8 +274,8 @@
                     <div class="selectgroup-label d-flex flex-column">
                         <div style="line-height: 1; opacity: .7; margin-bottom: .1rem;" class="d-flex align-items-center">
                             <transition name="indicator">
-                                <span class="icon icon-small mr-1" v-if="item.status=='unread'">{% inline "circle-full.svg" %}</span>
-                                <span class="icon icon-small mr-1" v-if="item.status=='starred'">{% inline "star-full.svg" %}</span>
+                                <span class="icon icon-small icon-unread mr-1" v-if="item.status=='unread'">{% inline "circle-full.svg" %}</span>
+                                <span class="icon icon-small icon-starred mr-1" v-if="item.status=='starred'">{% inline "star-full.svg" %}</span>
                             </transition>
                             <small class="flex-fill text-truncate mr-1">
                                 {{ (feedsById[item.feed_id] || {}).title }}
@@ -297,14 +297,14 @@
                 <button class="toolbar-item"
                         @click="toggleItemStarred(itemSelectedDetails)"
                         title="Mark Starred">
-                    <span class="icon" v-if="itemSelectedDetails.status=='starred'" >{% inline "star-full.svg" %}</span>
-                    <span class="icon" v-else-if="itemSelectedDetails.status!='starred'" >{% inline "star.svg" %}</span>
+                    <span class="icon icon-starred" v-if="itemSelectedDetails.status=='starred'" >{% inline "star-full.svg" %}</span>
+                    <span class="icon icon-starred" v-else-if="itemSelectedDetails.status!='starred'" >{% inline "star.svg" %}</span>
                 </button>
                 <button class="toolbar-item"
                         title="Mark Unread"
                         @click="toggleItemRead(itemSelectedDetails)">
-                    <span class="icon" v-if="itemSelectedDetails.status=='unread'">{% inline "circle-full.svg" %}</span>
-                    <span class="icon" v-if="itemSelectedDetails.status!='unread'">{% inline "circle.svg" %}</span>
+                    <span class="icon icon-unread" v-if="itemSelectedDetails.status=='unread'">{% inline "circle-full.svg" %}</span>
+                    <span class="icon icon-unread" v-if="itemSelectedDetails.status!='unread'">{% inline "circle.svg" %}</span>
                 </button>
                 <dropdown class="settings-dropdown" toggle-class="toolbar-item px-2" drop="center" title="Appearance">
                     <template v-slot:button>

src/assets/stylesheets/app.css

@@ -134,6 +134,14 @@ select.form-control:not([multiple]):not([size]) {
   height: .6rem;
 }
 
+.icon-unread {
+  color: lightgreen;
+}
+
+.icon-starred {
+  color: gold;
+}
+
 .feed-icon {
   width: 16px;
   height: 16px;