cinera: Tweak filter

Introduce nullTopic, visually represent the media in annotations and
default to "exclusive" mode

cinera/cinera.css

@@ -239,11 +239,14 @@
     z-index: 1;
 }
 
-.cineraMenus > .menu .refs,
-.cineraMenus > .menu .filter_container {
+.cineraMenus > .menu .refs {
     width: 350px;
 }
 
+.cineraMenus > .menu .filter_container {
+    min-width: 350px;
+}
+
 .cineraMenus > .menu .credits_container {
     min-width: 240px;
 }
@@ -370,25 +373,41 @@
 
 .cineraMenus > .menu > .filter_container .filters > * {
     width: 50%;
+    flex-grow: 1;
 }
 
-.cineraMenus > .menu > .filter_container .filter_content {
+.cineraDefaultMediumIndicator {
+    color: #FEF697;
+}
+
+.cineraMenus > .menu > .filter_container .filter_content,
+.cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories {
     cursor: pointer;
+    display: flex;
+    align-items: center;
 }
 
-.cineraMenus > .menu > .filter_container .filter_content .icon {
-    margin: 0 4px;
+.cineraMenus > .menu > .filter_container .filter_content .icon,
+.cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .categoryMedium {
+    font-style: normal;
+    margin-left: 4px;
+}
+
+.cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .categoryMedium + .categoryMedium {
+    margin-left: 2px;
 }
 
 .cineraMenus > .menu > .filter_container .filter_content.off .icon {
     background: transparent;
 }
 
-.cineraMenus > .menu > .filter_container .filter_content.rant .icon {
-    color: #F00;
+.cineraMenus > .menu > .filter_container .filter_content.rant .icon,
+.cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .categoryMedium.rant {
+    color: #BA0001;
 }
 
-.cineraMenus > .menu > .filter_container .filter_media .filter_content.off .icon {
+.cineraMenus > .menu > .filter_container .filter_media .filter_content.off .icon,
+.cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .categoryMedium.off {
     opacity: 0.32;
 }
 
@@ -447,12 +466,7 @@
 .cineraMenus .filter_content.authored .cineraText,
 .cineraPlayerContainer .markers_container > .marker.authored,
 .cineraPlayerContainer .markers_container > .marker.off_authored {
-    font-style: oblique;
-}
-
-.cineraPlayerContainer .markers_container > .marker.off_authored,
-.cineraPlayerContainer .markers_container > .marker.off_rant {
-    opacity: 0.5;
+    font-style: oblique !important;
 }
 
 .cineraPlayerContainer .markers_container > .marker .cineraContent sup {
@@ -477,7 +491,7 @@
     top: -2px;
 }
 
-.cineraPlayerContainer .markers_container > .marker .cineraContent .categories {
+.cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories {
     display: inline-flex;
     margin: 4px;
 }
@@ -487,18 +501,18 @@
 }
 
 .cineraMenus > .menu > .filter_container .filter_content .category,
-.cineraPlayerContainer .markers_container > .marker .cineraContent .categories .category {
+.cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .category {
     border-radius: 50%;
     height: 5px;
     width: 5px;
 }
 
 .cineraMenus > .menu > .filter_container .filter_content .category.off,
-.cineraPlayerContainer .markers_container > .marker .cineraContent .categories .category.off {
+.cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .category.off {
     background: transparent;
 }
 
-.cineraPlayerContainer .markers_container > .marker .cineraContent .categories .category {
+.cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .category {
     margin-left: 2px;
 }
 

cinera/cinera_player_pre.js

@@ -875,7 +875,7 @@ function filterItemToggle(filterItem) {
         {
             filterItem.querySelector(".icon").style.backgroundColor = "transparent";
         }
-        var testMarkers = document.querySelectorAll(".marker." + selectedCategory + ", .marker.cat_" + selectedCategory);
+        var testMarkers = playerContainer.querySelectorAll(".marker." + selectedCategory + ", .marker.cat_" + selectedCategory);
         for(var j = 0; j < testMarkers.length; ++j)
         {
             if(filterState[selectedCategory].type == "topic")
@@ -894,6 +894,14 @@ function filterItemToggle(filterItem) {
             }
             else
             {
+                var markerCategories = testMarkers[j].querySelectorAll(".categoryMedium." + selectedCategory);
+                for(var k = 0; k < markerCategories.length; ++k)
+                {
+                    if(markerCategories[k].classList.contains(selectedCategory))
+                    {
+                        markerCategories[k].classList.add("off");
+                    }
+                }
                 testMarkers[j].classList.remove(selectedCategory);
                 testMarkers[j].classList.add("off_" + selectedCategory);
             }
@@ -951,6 +959,14 @@ function filterItemToggle(filterItem) {
             {
                 testMarkers[j].classList.remove("off_" + selectedCategory);
                 testMarkers[j].classList.add(selectedCategory);
+                var markerCategories = testMarkers[j].querySelectorAll(".categoryMedium." + selectedCategory);
+                for(var k = 0; k < markerCategories.length; ++k)
+                {
+                    if(markerCategories[k].classList.contains(selectedCategory))
+                    {
+                        markerCategories[k].classList.remove("off");
+                    }
+                }
             }
 
             Skipping = 0;
@@ -990,7 +1006,7 @@ function resetFilter() {
         }
     }
 
-    if(filterMode == "exclusive")
+    if(filterMode == "inclusive")
     {
         toggleFilterMode();
     }