hmml_to_html.c: Mockup the filter menu style [#21]

It's in mock_filter.html just in case I overwrite out.html

hmml_to_html/hero.css

@@ -1,80 +1,100 @@
-.title {
+.title.hero,
-    background-color: #444;
+.title.hero .menu .refs,
+.title.hero .menu > .refs .ref,
+.markers_container.hero,
+.markers_container.hero > .marker {
+    background-color: #161616;
+    border-color: #000;
 }
 
-.title > a {
+.title.hero,
-    color: rgba(38, 139, 210, 1);
+.title.hero .menu > .refs .ref,
+.markers_container.hero > .marker > .content {
+    color: #8A877D;
 }
 
-.title > a:visited {
+.title.hero .menu {
-    color: rgba(38, 139, 210, 1);
-}
-
-.title .refs_container {
     transition: box-shadow 800ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
     box-shadow: inset 0 0 0 #B57714;
 }
 
-.title .refs_container:hover {
+.title.hero .menu:hover,
-    background-color: #666;
+.title.hero .menu > .refs .ref:hover,
+.markers_container.hero > .marker:hover > .content {
+
+    background-color: #222;
 }
 
-.title .refs_container.current {
+.title.hero .menu.current {
     box-shadow: inset 0px 0px 30px #B57714;
 }
 
-.title .refs_container .refs {
+.title.hero .menu > .refs .ref.current,
-    background-color: black;
+.markers_container.hero > .marker .progress .content {
-    border: 3px solid #444;
-    border-top: none;
-}
-
-.title .refs_container > .refs .ref {
-    border-bottom: 1px solid rgb(51, 51, 51);
-    color: white;
-}
-
-.title .refs_container > .refs .ref.current {
     background-color: #8B3D23;
-    color: black;
+    color: #000;
 }
 
-.title .refs_container > .refs .ref:hover {
+.title.hero .menu > .refs .ref .source,
-    background-color: #222;
+.title.hero .menu > .refs .ref .quote_byline {
+    color: #6B3E0B;
 }
 
-.title .refs_container > .refs .ref.current:hover {
+.title.hero .menu > .refs .ref.current .source,
+.title.hero .menu > .refs .ref.current .quote_byline {
+    color: #111;
+}
+
+.title.hero .menu > .refs .ref.current:hover,
+.markers_container.hero > .marker:hover .faded .content {
     background-color: rgba(139, 61, 35, 0.7);
 }
 
-.title .refs_container > .refs .ref .source {
+.title.hero .menu > .refs .ref .timecode:hover {
-    color: #888;
+    color: #FFF;
 }
 
-.markers_container > .marker {
+/* Regular */
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+.markers_container.hero > .marker.current > .content {
-}
-
-.markers_container > .marker:hover > .content {
-    background-color: #222;
-}
-
-.markers_container > .marker:hover .faded .content {
-    background-color: rgba(139, 61, 35, 0.7);
-    color: black;
-}
-
-.markers_container > .marker > .content {
-    background-color: #161616;
-    color: #8A877D;
-}
-
-.markers_container > .marker.current > .content {
     color: #B57714;
 }
 
-.markers_container > .marker .progress .content {
+/* Blackboard */
-    background-color: #8B3D23;
+.markers_container.hero > .marker.blackboard {
-    color: black;
+    background: #000;
+    border-color: #161616;
 }
 
+.markers_container.hero > .marker.blackboard > .content {
+    color: #D7BA82;
+}
+
+.markers_container.hero > .marker:hover.blackboard > .content {
+    background: #111;
+}
+
+/* Run */
+.markers_container.hero > .marker.run > .content,
+.markers_container.hero > .marker.run > .progress .content,
+.markers_container.hero > .marker:hover.run > .faded .content {
+    background: hsla(128, 16%, 64%, .2);
+    background-image: linear-gradient(to right, blue 4%, black 4%, black 96%, red 4%),
+                      linear-gradient(to bottom, blue 4%, black 4%, black 96%, red 4%),
+    /*#236a58*/
+}
+
+.markers_container.hero > .marker.run > .content {
+    color: #D7BA82;
+}
+
+.markers_container.hero > .marker:hover.run > .content {
+    background: #111;
+}
+
+.markers_container.hero > .marker.run > .progress .content {
+    color: #D7BA82;
+}
+
+.markers_container.hero > .marker:hover.run > .faded .content {
+    background: #111;
+}

hmml_to_html/hmml_to_html.c

@@ -468,7 +468,7 @@ GenerateTopicColours(buffer *Colour, char *Topic)
 
         while(TopicsPtr - TopicsBuffer < TopicsLength)
         {
-            TopicsPtr += 39;
+            TopicsPtr += StringLength(".category.");
             if(!StringsDifferL(SanitisePunctuation(Topic), TopicsPtr, StringLength(Topic)))
             {
                 free(TopicsBuffer);
@@ -482,7 +482,7 @@ GenerateTopicColours(buffer *Colour, char *Topic)
             ++TopicsPtr;
         }
 
-        fprintf(TopicsFile, ".marker .content .categories .category.%s { border-color: %s; background: %s; }\n",
+        fprintf(TopicsFile, ".category.%s { border: 1px solid %s; background: %s; }\n",
             SanitisePunctuation(Topic), StringToColourHash(Colour, Topic), StringToColourHash(Colour, Topic));
 
         fclose(TopicsFile);
@@ -1309,7 +1309,7 @@ HMML.metadata.annotator);
 "}\n"
 "\n"
 "function onRefChanged(ref) {\n"
-"    var sourceMenus = document.querySelectorAll(\".refs_container\");\n"
+"    var sourceMenus = document.querySelectorAll(\".menu\");\n"
 "    for (var MenuIndex = 0; MenuIndex < sourceMenus.length; ++MenuIndex)\n"
 "        {\n"
 "        var SetMenu = 0;\n"

hmml_to_html/mock_filter.html

@@ -0,0 +1,300 @@
+<html>
+    <head>
+        <meta charset="UTF-8">
+
+        <!-- Load the player -->
+        <script type="text/javascript" src="player.js"></script>
+        <link rel="stylesheet" type="text/css" href="style.css">
+        <link rel="stylesheet" type="text/css" href="riscy.css">
+        <link rel="stylesheet" type="text/css" href="topics.css">
+    </head>
+    <body>
+        <div class="title riscy">
+            <span class="episode_name">Coloured Nicks</span>
+            <div class="menu">
+                <span>Quotes &#9660;</span>
+                <div class="mouse_catcher"></div>
+                <div class="refs">
+                    <span data-id="&#945;" class="ref">
+                        <span class="ref_content">
+                            <div class="source">Quote 1</div>
+                            <div class="ref_title">Stay RISCY, everyone</div>
+                            <div class="quote_byline">&mdash;miotatsu, Wed Nov 16 21:03:26 2016</div>
+                        </span>
+                        <div class="ref_indices">
+                            <span data-timestamp="176" class="timecode"><span class="ref_index">[&#945;]</span><span class="time">2:56</span></span>
+                        </div>
+                    </span>
+                    <span data-id="&#946;" class="ref">
+                        <span class="ref_content">
+                            <div class="source">Quote 2</div>
+                            <div class="ref_title">I dream of nice things</div>
+                            <div class="quote_byline">&mdash;miotatsu, Fri Dec  2 21:00:05 2016</div>
+                        </span>
+                        <div class="ref_indices">
+                            <span data-timestamp="312" class="timecode"><span class="ref_index">[&#946;]</span><span class="time">5:12</span></span>
+                        </div>
+                    </span>
+                </div>
+            </div>
+            <div class="menu">
+                <span>References &#9660;</span>
+                <div class="mouse_catcher"></div>
+                <div class="refs">
+                    <a data-id="https://en.wikipedia.org/wiki/Logic_gate" href="https://en.wikipedia.org/wiki/Logic_gate" target="_blank" class="ref">
+                        <span class="ref_content">
+                            <div class="source">Wikipedia</div>
+                            <div class="ref_title">Logic gate</div>
+                        </span>
+                        <div class="ref_indices">
+                            <span data-timestamp="60" class="timecode"><span class="ref_index">[1]</span><span class="time">1:00</span></span><span data-timestamp="624" class="timecode"><span class="ref_index">[3]</span><span class="time">10:24</span></span>
+                        </div>
+                    </a>
+                    <a data-id="0-7356-0505-X" href="http://www.charlespetzold.com/code/" target="_blank" class="ref">
+                        <span class="ref_content">
+                            <div class="source">Charles Petzold (Microsoft Press)</div>
+                            <div class="ref_title">Code: The Hidden Language of Computer Hardware and Software</div>
+                        </span>
+                        <div class="ref_indices">
+                            <span data-timestamp="60" class="timecode"><span class="ref_index">[2]</span><span class="time">1:00</span></span>
+                        </div>
+                    </a>
+                    <a data-id="https://handmade.network/" href="https://handmade.network/" target="_blank" class="ref">
+                        <span class="ref_content">
+                            <div class="ref_title">Handmade Network</div>
+                        </span>
+                        <div class="ref_indices">
+                            <span data-timestamp="754" class="timecode"><span class="ref_index">[4]</span><span class="time">12:34</span></span><span data-timestamp="992" class="timecode"><span class="ref_index">[5]</span><span class="time">16:32</span></span>
+                        </div>
+                    </a>
+                </div>
+            </div>
+            <div class="menu">
+                <span><img src="hues_HCL.png"></span>
+                <div class="filter">
+                    <div class="filter_mode inclusive">Filter mode: </div>
+                    <div class="filters">
+                        <div class="filter_topics">
+                            <div class="filter_title">Topics</div>
+                            <div class="filter_content">
+                                <span class="icon category rendering"></span><span class="text">rendering</span>
+                            </div>
+                            <div class="filter_content">
+                                <span class="icon category hardware"></span><span class="text">hardware</span>
+                            </div>
+                            <div class="filter_content">
+                                <span class="icon category mathematics"></span><span class="text">mathematics</span>
+                            </div>
+                        </div>
+                        <div class="filter_media">
+                            <div class="filter_title">Media</div>
+                            <div class="filter_content rant">
+                                <span class="icon">&#128162;</span><span class="text">rant</span>
+                            </div>
+                            <div class="filter_content blackboard">
+                                <span class="icon">&#128396;</span><span class="text">blackboard</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <span class="annotator_container">Annotator: <span class="annotator">Miblo</span></span>
+        </div>
+        <div class="player_container">
+            <div class="video_container" data-videoId="ug5WkCROkOk"></div>
+            <div class="markers_container riscy">
+                <div data-timestamp="60" class="marker authored cat_hardware research" data-ref="https://en.wikipedia.org/wiki/Logic_gate,0-7356-0505-X">
+                    <div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><span class="categories"><div class="category hardware"></div></span></div>
+                    <div class="progress faded">
+                        <div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><span class="categories"><div class="category hardware"></div></span></div>
+                    </div>
+                    <div class="progress main">
+                        <div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><span class="categories"><div class="category hardware"></div></span></div>
+                    </div>
+                </div>
+                <div data-timestamp="176" class="marker" data-ref="&#945;">
+                    <div class="content"><span class="timecode">2:56</span>&#8220;Stay RISCY, everyone&#8221;<sup>&#945;</sup></div>
+                    <div class="progress faded">
+                        <div class="content"><span class="timecode">2:56</span>&#8220;Stay RISCY, everyone&#8221;<sup>&#945;</sup></div>
+                    </div>
+                    <div class="progress main">
+                        <div class="content"><span class="timecode">2:56</span>&#8220;Stay RISCY, everyone&#8221;<sup>&#945;</sup></div>
+                    </div>
+                </div>
+                <div data-timestamp="312" class="marker blackboard rant cat_mathematics" data-ref="&#946;">
+                    <div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>&#946;</sup><span class="categories"><div class="category mathematics"></div></span></div>
+                    <div class="progress faded">
+                        <div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>&#946;</sup><span class="categories"><div class="category mathematics"></div></span></div>
+                    </div>
+                    <div class="progress main">
+                        <div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>&#946;</sup><span class="categories"><div class="category mathematics"></div></span></div>
+                    </div>
+                </div>
+                <div data-timestamp="624" class="marker" data-ref="https://en.wikipedia.org/wiki/Logic_gate">
+                    <div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: hsl(26, 83%, 26%); text-decoration: none">milton</a> forum post<sup>3</sup></div>
+                    <div class="progress faded">
+                        <div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: hsl(26, 83%, 26%); text-decoration: none">milton</a> forum post<sup>3</sup></div>
+                    </div>
+                    <div class="progress main">
+                        <div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: hsl(26, 83%, 26%); text-decoration: none">milton</a> forum post<sup>3</sup></div>
+                    </div>
+                </div>
+                <div data-timestamp="642" class="marker rant">
+                    <div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
+                    <div class="progress faded">
+                        <div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
+                    </div>
+                    <div class="progress main">
+                        <div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
+                    </div>
+                </div>
+                <div data-timestamp="754" class="marker" data-ref="https://handmade.network/">
+                    <div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>4</sup></div>
+                    <div class="progress faded">
+                        <div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>4</sup></div>
+                    </div>
+                    <div class="progress main">
+                        <div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>4</sup></div>
+                    </div>
+                </div>
+                <div data-timestamp="992" class="marker" data-ref="https://handmade.network/">
+                    <div class="content"><span class="timecode">16:32</span>Something else about the Handmade.Network<sup>5</sup></div>
+                    <div class="progress faded">
+                        <div class="content"><span class="timecode">16:32</span>Something else about the Handmade.Network<sup>5</sup></div>
+                    </div>
+                    <div class="progress main">
+                        <div class="content"><span class="timecode">16:32</span>Something else about the Handmade.Network<sup>5</sup></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <script>
+            var player = new Player(document.querySelector(".player_container"), onRefChanged);
+            window.addEventListener("resize", function() { player.updateSize(); });
+                document.addEventListener("keypress", function(ev) {
+                    switch (ev.key) {
+                        case 'n':
+                        case 'd':
+                        case 's': {
+                                player.jumpToNextMarker();
+                        } break;
+
+                        case 'p':
+                        case 'a':
+                        case 'w': {
+                                player.jumpToPrevMarker();
+                        } break;
+    }
+});
+
+var refTimecodes = document.querySelectorAll(".refs .ref .timecode");
+for (var i = 0; i < refTimecodes.length; ++i) {
+    refTimecodes[i].addEventListener("click", function(ev) {
+        if (player) {
+            var time = ev.currentTarget.getAttribute("data-timestamp");
+            player.setTime(parseInt(time, 10));
+            player.play();
+            ev.preventDefault();
+            ev.stopPropagation();
+            return false;
+        }
+    });
+}
+
+/*
+    NOTE(matt): The filter system will need to know whether we are inclusive or exclusive, which it gets / sets from that classList
+*/
+
+var filterModeElement = document.querySelector(".filter_mode");
+var filterMode = filterModeElement.classList[1];
+filterModeElement.addEventListener("click", function(ev) {
+    if(filterMode == "inclusive")
+    {
+        filterModeElement.classList.remove("inclusive");
+        filterModeElement.classList.add("exclusive");
+        filterMode = "exclusive";
+    }
+    else
+    {
+        filterModeElement.classList.remove("exclusive");
+        filterModeElement.classList.add("inclusive");
+        filterMode = "inclusive";
+    }
+});
+
+var filterTopics = document.querySelectorAll(".filter_topics > .filter_content");
+for (var i = 0; i < filterTopics.length; ++i)
+{
+    filterTopics[i].addEventListener("click", function(ev) {
+
+        if(!(this.classList.contains("off")))
+        {
+            this.classList.add("off");
+        }
+        else
+        {
+            this.classList.remove("off");
+        }
+    });
+}
+
+var filterMedia = document.querySelectorAll(".filter_media > .filter_content");
+for (var i = 0; i < filterMedia.length; ++i)
+{
+    filterMedia[i].addEventListener("click", function(ev) {
+
+        if(!(this.classList.contains("off")))
+        {
+            this.classList.add("off");
+        }
+        else
+        {
+            this.classList.remove("off");
+        }
+    });
+}
+
+var refSources = document.querySelectorAll(".refs .ref");
+for (var i = 0; i < refSources.length; ++i) {
+    refSources[i].addEventListener("click", function(ev) {
+        if (player) {
+            player.pause();
+        }
+    });
+}
+
+function onRefChanged(ref) {
+    var sourceMenus = document.querySelectorAll(".menu");
+    for (var MenuIndex = 0; MenuIndex < sourceMenus.length; ++MenuIndex)
+        {
+        var SetMenu = 0;
+        if (ref !== undefined && ref !== null) {
+            var refElements = sourceMenus[MenuIndex].querySelectorAll(".refs .ref");
+            var refs = ref.split(",");
+
+            for (var i = 0; i < refElements.length; ++i) {
+                if (refs.includes(refElements[i].getAttribute("data-id"))) {
+                    refElements[i].classList.add("current");
+                    SetMenu = 1;
+                } else {
+                    refElements[i].classList.remove("current");
+                }
+            }
+            if(SetMenu) {
+                sourceMenus[MenuIndex].classList.add("current");
+            } else {
+                sourceMenus[MenuIndex].classList.remove("current");
+            }
+
+        } else {
+            sourceMenus[MenuIndex].classList.remove("current");
+            var refs = sourceMenus[MenuIndex].querySelectorAll(".refs .ref");
+            for (var i = 0; i < refs.length; ++i) {
+                refs[i].classList.remove("current");
+            }
+        }
+    }
+}
+        </script>
+    </body>
+</html>

hmml_to_html/obbg.css

@@ -10,51 +10,51 @@
     border-color: #372F46;
 }
 
-.title.obbg .refs_container {
+.title.obbg .menu {
     transition: box-shadow 800ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
     box-shadow: inset 0 0 0 #372F46;
 }
 
-.title.obbg .refs_container:hover {
+.title.obbg .menu:hover {
     background-color: #FFF8E7;
 }
 
-.title.obbg > .refs_container.current {
+.title.obbg > .menu.current {
     box-shadow: inset 0px 0px 30px #372F46;
 }
 
-.title.obbg .refs_container .refs {
+.title.obbg .menu .refs {
     background-color: #EEE;
     border-color: #372F46;
 }
 
-.title.obbg .refs_container > .refs .ref {
+.title.obbg .menu > .refs .ref {
     border-color: #372F46;
     color: #000000;
 }
 
-.title.obbg .refs_container > .refs .ref.current {
+.title.obbg .menu > .refs .ref.current {
     background-color: #372F46;
     color: #FFFFFF;
 }
 
-.title.obbg .refs_container > .refs .ref:hover {
+.title.obbg .menu > .refs .ref:hover {
     background-color: #DDD;
 }
 
-.title.obbg .refs_container > .refs .ref.current:hover {
+.title.obbg .menu > .refs .ref.current:hover {
     background-color: #68557E;
 }
 
-.title.obbg .refs_container > .refs .ref .source {
+.title.obbg .menu > .refs .ref .source {
     color: #888;
 }
 
-.title.obbg .refs_container > .refs .ref .quote_byline {
+.title.obbg .menu > .refs .ref .quote_byline {
     color: #888;
 }
 
-.title.obbg .refs_container > .refs .ref.current .source {
+.title.obbg .menu > .refs .ref.current .source {
     color: #FFF8E7;
 }
 

hmml_to_html/riscy.css

@@ -1,127 +1,92 @@
-.title.riscy {
+.title.riscy,
+.title.riscy > .menu .refs,
+.title.riscy > .menu .filter,
+.title.riscy > .menu > .refs .ref,
+.title.riscy > .menu > .filter .filter_mode,
+.markers_container.riscy,
+.markers_container.riscy > .marker {
     background-color: #EEE;
-    color: #000000;
     border-color: rgba(246, 178, 26, 0.8);
 }
 
-.title.riscy .refs_container {
+.title.riscy,
+.title.riscy > .menu > .refs .ref,
+.title.riscy > .menu > .refs .ref .timecode:hover::before,
+.markers_container.riscy > .marker > .content {
+    color: #000;
+}
+
+.title.riscy > .menu {
     transition: box-shadow 800ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
     box-shadow: inset 0 0 0 #2A3172;
 }
 
-.title.riscy .refs_container:hover {
+.title.riscy > .menu:hover,
-    background-color: #FFF8E7;
+.title.riscy > .menu > .refs .ref:hover,
-}
+.title.riscy > .menu > .filter .filter_mode:hover,
-
+.title.riscy > .menu > .filter .filter_content:hover,
-.title.riscy > .refs_container.current {
-    box-shadow: inset 0px 0px 30px #2A3172;
-}
-
-.title.riscy .refs_container .refs {
-    background-color: #EEE;
-    border-color: rgba(246, 178, 26, 0.8);
-}
-
-.title.riscy .refs_container > .refs .ref {
-    border-color: rgba(246, 178, 26, 0.8);
-    color: #000000;
-}
-
-.title.riscy .refs_container > .refs .ref.current {
-    background-color: #2A3172;
-    color: #EEE;
-}
-
-.title.riscy .refs_container > .refs .ref:hover {
-    background-color: #FFF8E7;
-}
-
-.title.riscy .refs_container > .refs .ref.current:hover {
-    background-color: rgba(42, 49, 114, 0.7);
-}
-
-.title.riscy .refs_container > .refs .ref .source {
-    color: #888;
-}
-
-.title.riscy .refs_container > .refs .ref .quote_byline {
-    color: #888;
-}
-
-.title.riscy .refs_container > .refs .ref.current .source {
-    color: #FFF8E7;
-}
-
-/* Regular */
-.markers_container.riscy {
-    background-color: #EEE;
-}
-
-.markers_container.riscy > .marker {
-    border-color: rgba(246, 178, 26, 0.8);
-}
-
 .markers_container.riscy > .marker:hover > .content {
     background-color: #FFF8E7;
 }
 
+.title.riscy > .menu.current {
+    box-shadow: inset 0px 0px 30px #2A3172;
+}
+
+.title.riscy > .menu > .refs .ref.current,
+.title.riscy > .menu > .refs .ref.current .timecode:hover::before,
+.markers_container.riscy > .marker > .progress .content {
+    color: #FFF;
+}
+
+.title.riscy > .menu > .refs .ref.current,
+.markers_container.riscy > .marker > .progress .content {
+    background-color: rgb(42, 49, 114);
+}
+
+.title.riscy > .menu > .refs .ref .source,
+.title.riscy > .menu > .refs .ref .quote_byline,
+.title > .menu > .filter .filter_content.off .text {
+    color: #888;
+}
+
+.title.riscy > .menu > .refs .ref.current .source,
+.title.riscy > .menu > .refs .ref.current .quote_byline {
+    color: #FFF8E7;
+}
+
+.title.riscy > .menu > .refs .ref.current:hover,
 .markers_container.riscy > .marker:hover > .faded .content {
     background-color: rgba(42, 49, 114, 0.7);
-    color: #FFFFFF;
-}
-
-.markers_container.riscy > .marker > .content {
-    background-color: #EEE;
-    color: #000000;
 }
 
+/* Regular */
+.title.riscy > .menu > .refs .ref .ref_indices .timecode:hover,
 .markers_container.riscy > .marker.current > .content {
     color: #2A3172;
 }
 
-.markers_container.riscy > .marker > .progress .content {
-    background-color: #2A3172;
-    color: #FFFFFF;
-}
-
 /* Blackboard */
-.markers_container.riscy > .marker:hover.blackboard > .content {
+.markers_container.riscy > .marker.blackboard > .content,
-    background-color: #FFF8E7;
+.markers_container.riscy > .marker.blackboard > .progress .content,
-    background-size: 12px 12px;
-    background-image: linear-gradient(to right , rgba(51, 153, 255, .16) 1px, transparent 1px),
-                      linear-gradient(to bottom, rgba(51, 153, 255, .16) 1px, transparent 1px);
-    background-position: center;
-}
-
 .markers_container.riscy > .marker:hover.blackboard > .faded .content {
-    background-color: rgba(42, 49, 114, 0.7);
     background-size: 12px 12px;
-    background-image: linear-gradient(to right , rgba(0, 0, 0, .16) 1px, transparent 1px),
-                      linear-gradient(to bottom, rgba(0, 0, 0, .16) 1px, transparent 1px);
     background-position: center;
-    color: #FFFFFF;
 }
 
 .markers_container.riscy > .marker.blackboard > .content {
-    background-color: #EEE;
-    background-size: 12px 12px;
     background-image: linear-gradient(to right , rgba(51, 153, 255, .16) 1px, transparent 1px),
                       linear-gradient(to bottom, rgba(51, 153, 255, .16) 1px, transparent 1px);
-    background-position: center;
-    color: #000000;
-}
-
-.markers_container.riscy > .marker.blackboard.current > .content {
-    color: #2A3172;
 }
 
 .markers_container.riscy > .marker.blackboard > .progress .content {
-    background-color: #2A3172;
-    background-size: 12px 12px;
     background-image: linear-gradient(to right , rgba(255, 255, 255, .16) 1px, transparent 1px),
                       linear-gradient(to bottom, rgba(255, 255, 255, .16) 1px, transparent 1px);
-    background-position: center;
+}
-    color: #FFFFFF;
+
+.markers_container.riscy > .marker:hover.blackboard > .faded .content {
+    background-image: linear-gradient(to right , rgba(0, 0, 0, .16) 1px, transparent 1px),
+                      linear-gradient(to bottom, rgba(0, 0, 0, .16) 1px, transparent 1px);
 }
 
 /* TODO(matt):

hmml_to_html/style.css

@@ -14,11 +14,11 @@
     flex: 1 1;
 }
 
-.title .refs_container {
+.title > .menu {
     position: relative;
 }
 
-.title .refs_container .mouse_catcher {
+.title > .menu .mouse_catcher {
     position: absolute;
     height: 100%;
     width: 100%;
@@ -26,22 +26,28 @@
     right: 0;
 }
 
-.title .refs_container .refs {
+.title > .menu .refs,
-    border: 2px solid;
+.title > .menu .filter {
-    border-top:none;
+    border: 1px solid;
+    border-top: none;
+    display: none;
+    /* TODO(matt): Set the height to the player's height */
+    max-height: 512px;
+    overflow-y: auto;
     position: absolute;
-    top: 100%;
     right: 0;
+    top: 100%;
     width: 350px;
     z-index: 1;
-    display: none;
 }
 
-.title .refs_container:hover .refs {
+.title > .menu:hover .refs,
+.title > .menu:hover .filter {
     display: block;
 }
 
-.title .refs_container > .refs .ref {
+.title > .menu > .refs .ref,
+.title > .menu > .refs .filter { /* TODO(matt): See what this is! */
     border-bottom: 1px solid;
     padding: 10px;
     display: flex;
@@ -50,63 +56,119 @@
     text-decoration: none;
 }
 
-.title .refs_container > .refs .ref:last-child {
+.title > .menu > .refs .ref:last-child,
+.title > .menu > .refs .filter:last-child { /* TODO(matt): See what this is! */
     border: none;
 }
 
-.title .refs_container > .refs .ref .timecode {
+.title > .menu > .refs .ref .timecode {
+    cursor: pointer;
     display: inline-block;
     font-size: 12px;
     padding: 0;
 }
 
-.title .refs_container > .refs .ref .timecode:hover .time {
+.title > .menu > .refs .ref .timecode:hover {
-    text-decoration: underline;
+    /* TODO(matt): background-image "play" symbol, right aligned */
 }
 
-.title .refs_container > .refs .ref .ref_content {
+.title > .menu > .refs .ref .ref_content,
+.title > .menu > .refs .ref .filter_content {
     margin-bottom: 8px;
     width: 100%;
 }
 
-.title .refs_container > .refs .ref .source {
+.title > .menu > .refs .ref .source,
+.title > .menu > .refs .ref .quote_byline {
     font-size: 10px;
     line-height: 8px;
 }
 
-.title .refs_container > .refs .ref .ref_title {
+.title > .menu > .refs .ref .ref_title {
     font-style: oblique;
 }
 
-.title .refs_container > .refs .ref .quote_byline {
+.title > .menu > .refs .ref .quote_byline {
-    font-size: 10px;
-    line-height: 8px;
     text-align: right;
     width: 100%;
 }
 
-.title .refs_container > .refs .ref .ref_indices {
+.title > .menu > .refs .ref .ref_indices {
     text-align: center;
+    width: 100%;
 }
 
-.title .refs_container > .refs .ref .ref_indices .timecode {
+.title > .menu > .refs .ref .ref_indices .timecode:first-child::before {
-    display: inline-block;
-    font-size: 12px;
-}
-
-.title .refs_container > .refs .ref .ref_indices .timecode:first-child::before {
     content: "";
 }
 
-.title .refs_container > .refs .ref .ref_indices .timecode::before {
+.title > .menu > .refs .ref .ref_indices .timecode::before {
     content: "•";
     margin: 0 4px;
 }
 
-.title .refs_container > .refs .ref .timecode .ref_index {
+.title > .menu > .refs .ref .timecode .ref_index {
     margin-right: 4px;
 }
 
+.title > .menu > .filter .filter_mode {
+    cursor: pointer;
+    border-bottom: 1px solid;
+    text-align: center;
+    font-size: 12px;
+}
+
+.title > .menu > .filter .filter_mode.exclusive:after {
+    content: "exclusive";
+}
+
+.title > .menu > .filter .filter_mode.inclusive:after {
+    content: "inclusive";
+}
+
+.title > .menu > .filter .filter_title {
+    font-size: 9px;
+    text-align: center;
+}
+
+.title > .menu > .filter .filters {
+    display: flex;
+    flex-flow: row nowrap;
+}
+
+.title > .menu > .filter .filters > * {
+    width: 50%;
+}
+
+.title > .menu > .filter .filter_content {
+    cursor: pointer;
+}
+
+.title > .menu > .filter .filter_content .icon {
+    margin: 0 4px;
+}
+
+.title > .menu > .filter > .filter_media .filter_content .icon {
+    margin: 0 .5em 0 4px;
+}
+
+.title > .menu > .filter .filter_content.off .icon {
+    background: transparent;
+}
+
+.title > .menu > .filter .filter_content.rant .icon {
+    color: #F00;
+}
+
+.title > .menu > .filter .filter_media .filter_content.off .icon {
+    opacity: 0.32;
+}
+
+.title > .menu > .filter .filter_content.rant .text,
+.markers_container > .marker.rant .content {
+    font-variant: small-caps;
+}
+
 .player_container {
     display: flex;
     flex-direction: row;
@@ -152,10 +214,6 @@
     font-variant: normal;
 }
 
-.markers_container > .marker.rant .content {
-    font-variant: small-caps;
-}
-
 .markers_container > .marker .progress {
     position: absolute;
     top: 0;
@@ -178,14 +236,29 @@
     margin: 4px;
 }
 
+.title > .menu > .filter .filter_content {
+    display: flex;
+}
+
+.title > .menu > .filter .filter_content .category,
 .markers_container > .marker .content .categories .category {
-    border: 1px solid;
     border-radius: 50%;
     height: 5px;
-    margin-left: 2px;
     width: 5px;
 }
 
+.title > .menu > .filter .filter_content .category.off {
+    background: transparent;
+}
+
+.markers_container > .marker .content .categories .category {
+    margin-left: 2px;
+}
+
+.title > .menu > .filter .filter_content .icon {
+    margin-right: 8px;
+}
+
 /* CUSTOM PAGE STYLE */
 
 body {
@@ -195,3 +268,10 @@ body {
     margin: 0;
     padding: 0;
 }
+
+/*
+Open menu: ▾ ▾
+Open link in new tab: ⤻ or &10559; or &8599; or ⭷
+Play from timecode: ⏵ (or, if ↓ ▸)
+Playable from timecode: ▹
+ */