tag UI improvements

changedetectionio/blueprint/watchlist/templates/watch-overview.html

@@ -69,39 +69,40 @@ document.addEventListener('DOMContentLoaded', function() {
 
 /* Auto-generated tag colors */
 {%- for uuid, tag in tags -%}
-{%- if tag and tag.title -%}
-{%- set class_name = tag.title|sanitize_tag_class -%}
-{%- if tag.get('tag_colour') -%}
-.button-tag.tag-{{ class_name }},
-.watch-tag-list.tag-{{ class_name }} {
-  background-color: {{ tag.tag_colour }};
-  color: {{ wcag_text_color(tag.tag_colour) }};
-}
-{%- else -%}
-{%- set colors = generate_tag_colors(tag.title) -%}
-.button-tag.tag-{{ class_name }} {
-  background-color: {{ colors['light']['bg'] }};
-  color: {{ colors['light']['color'] }};
-}
+    {%- if tag and tag.title -%}
+    {%- set class_name = tag.title|sanitize_tag_class -%}
+        {%- if tag.get('tag_colour') -%}
+            .button-tag.tag-{{ class_name }},
+            .watch-tag-list.tag-{{ class_name }} {
+              background-color: {{ tag.tag_colour }};
+              color: {{ wcag_text_color(tag.tag_colour) }};
+            }
+            {%- else -%}
+                {%- set colors = generate_tag_colors(tag.title) -%}
+                .button-tag.tag-{{ class_name }} {
+                  background-color: {{ colors['light']['bg'] }};
+                  color: {{ colors['light']['color'] }};
+                }
 
-.watch-tag-list.tag-{{ class_name }} {
-  background-color: {{ colors['light']['bg'] }};
-  color: {{ colors['light']['color'] }};
-}
+                .watch-tag-list.tag-{{ class_name }} {
+                  background-color: {{ colors['light']['bg'] }};
+                  color: {{ colors['light']['color'] }};
+                }
 
-html[data-darkmode="true"] .button-tag.tag-{{ class_name }} {
-  background-color: {{ colors['dark']['bg'] }};
-  color: {{ colors['dark']['color'] }};
-}
+                html[data-darkmode="true"] .button-tag.tag-{{ class_name }} {
+                  background-color: {{ colors['dark']['bg'] }};
+                  color: {{ colors['dark']['color'] }};
+                }
 
-html[data-darkmode="true"] .watch-tag-list.tag-{{ class_name }} {
-  background-color: {{ colors['dark']['bg'] }};
-  color: {{ colors['dark']['color'] }};
-}
-{%- endif -%}
-{%- endif -%}
-{%- endfor -%}
+                html[data-darkmode="true"] .watch-tag-list.tag-{{ class_name }} {
+                  background-color: {{ colors['dark']['bg'] }};
+                  color: {{ colors['dark']['color'] }};
+                }
+            {%- endif -%}
+        {%- endif -%}
+    {%- endfor -%}
 </style>
+
 {% if llm_configured %}
 <script>
 window.watchOverviewI18n = {
@@ -163,8 +164,8 @@ window.watchOverviewI18n = {
         'has-error' if errored_count else '',
     ] -%}
     <div id="watch-table-wrapper" class="{{ wrapper_classes | reject('equalto', '') | join(' ') }}">
-        <div>
-            <a href="{{url_for('watchlist.index')}}" class="pure-button button-tag {{'active' if not active_tag_uuid }}">{{ _('All') }}</a>
+        <div id="tag-lister" class="{% if active_tag %}active-tag{% endif %}">
+            <a id="tag-all" href="{{url_for('watchlist.index')}}" class="pure-button button-tag {{'active' if not active_tag_uuid }}">{{ _('All') }}</a>
             <!-- tag list -->
             {%- for uuid, tag in tags -%}
                 {%- if tag != "" -%}

changedetectionio/static/styles/scss/parts/_watch_table.scss

@@ -330,6 +330,20 @@ body.has-queue {
       }
     }
   }
+
+  #tag-lister {
+    #tag-all {
+      opacity: 1.0;
+    }
+    &.active-tag {
+      .button-tag {
+        opacity: 0.35;
+        &.active {
+          opacity: 1;
+        }
+      }
+    }
+  }
 }
 
 .group-overview-table {

changedetectionio/static/styles/scss/styles.scss

@@ -334,15 +334,16 @@ a.pure-button-selected {
 .button-tag {
   background: var(--color-background-button-tag);
   color: var(--color-text-button);
-  font-size: 65%;
+  font-size: 75%;
   border-bottom-left-radius: initial;
   border-bottom-right-radius: initial;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
   margin-right: 4px;
   &.active {
     background: var(--color-background-button-tag-active);
     font-weight: bold;
   }
-
 }
 
 .button-error {