diff --git a/hmml_to_html/hero.css b/hmml_to_html/hero.css index 7a641f1..3a98ffa 100644 --- a/hmml_to_html/hero.css +++ b/hmml_to_html/hero.css @@ -1,80 +1,100 @@ -.title { - background-color: #444; +.title.hero, +.title.hero .menu .refs, +.title.hero .menu > .refs .ref, +.markers_container.hero, +.markers_container.hero > .marker { + background-color: #161616; + border-color: #000; } -.title > a { - color: rgba(38, 139, 210, 1); +.title.hero, +.title.hero .menu > .refs .ref, +.markers_container.hero > .marker > .content { + color: #8A877D; } -.title > a:visited { - color: rgba(38, 139, 210, 1); -} - -.title .refs_container { +.title.hero .menu { 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 { - background-color: #666; +.title.hero .menu:hover, +.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 { - background-color: black; - 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 { +.title.hero .menu > .refs .ref.current, +.markers_container.hero > .marker .progress .content { background-color: #8B3D23; - color: black; + color: #000; } -.title .refs_container > .refs .ref:hover { - background-color: #222; +.title.hero .menu > .refs .ref .source, +.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 { - color: #888; +.title.hero .menu > .refs .ref .timecode:hover { + color: #FFF; } -.markers_container > .marker { - border-bottom: 1px solid rgba(255, 255, 255, 0.05); -} - -.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 { +/* Regular */ +.markers_container.hero > .marker.current > .content { color: #B57714; } -.markers_container > .marker .progress .content { - background-color: #8B3D23; - color: black; +/* Blackboard */ +.markers_container.hero > .marker.blackboard { + 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; +} diff --git a/hmml_to_html/hmml_to_html.c b/hmml_to_html/hmml_to_html.c index bfac585..d250590 100644 --- a/hmml_to_html/hmml_to_html.c +++ b/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" diff --git a/hmml_to_html/mock_filter.html b/hmml_to_html/mock_filter.html new file mode 100644 index 0000000..7c4e1d3 --- /dev/null +++ b/hmml_to_html/mock_filter.html @@ -0,0 +1,300 @@ + + + + + + + + + + + +
+ Coloured Nicks +
+ Quotes ▼ +
+
+ + +
Quote 1
+
Stay RISCY, everyone
+
—miotatsu, Wed Nov 16 21:03:26 2016
+ +
+ [α]2:56 +
+ + + +
Quote 2
+
I dream of nice things
+
—miotatsu, Fri Dec 2 21:00:05 2016
+ +
+ [β]5:12 +
+ +
+
+
+ References ▼ +
+
+ + +
Wikipedia
+
Logic gate
+ +
+ [1]1:00[3]10:24 +
+ + + +
Charles Petzold (Microsoft Press)
+
Code: The Hidden Language of Computer Hardware and Software
+ +
+ [2]1:00 +
+ + + +
Handmade Network
+ +
+ [4]12:34[5]16:32 +
+ +
+
+
+ +
+
Filter mode:
+
+
+
Topics
+
+ rendering +
+
+ hardware +
+
+ mathematics +
+
+
+
Media
+
+ 💢rant +
+
+ 🖌blackboard +
+
+
+
+
+ Annotator: Miblo +
+
+
+
+
+
1:00insofaras Some text referring to Zilarrezko about this thing1 regarding circuit design he saw in Code2
+
+
1:00insofaras Some text referring to Zilarrezko about this thing1 regarding circuit design he saw in Code2
+
+
+
1:00insofaras Some text referring to Zilarrezko about this thing1 regarding circuit design he saw in Code2
+
+
+
+
2:56“Stay RISCY, everyone”α
+
+
2:56“Stay RISCY, everyone”α
+
+
+
2:56“Stay RISCY, everyone”α
+
+
+
+
5:12Matrix multiplicationβ
+
+
5:12Matrix multiplicationβ
+
+
+
5:12Matrix multiplicationβ
+
+
+
+
10:24More stuff referring to the milton forum post3
+
+
10:24More stuff referring to the milton forum post3
+
+
+
10:24More stuff referring to the milton forum post3
+
+
+
+
10:42Some text. Simples!
+
+
10:42Some text. Simples!
+
+
+
10:42Some text. Simples!
+
+
+
+
12:34Something about the Handmade.Network4
+
+
12:34Something about the Handmade.Network4
+
+
+
12:34Something about the Handmade.Network4
+
+
+
+
16:32Something else about the Handmade.Network5
+
+
16:32Something else about the Handmade.Network5
+
+
+
16:32Something else about the Handmade.Network5
+
+
+
+
+ + + diff --git a/hmml_to_html/obbg.css b/hmml_to_html/obbg.css index d8d55dd..e6f656c 100644 --- a/hmml_to_html/obbg.css +++ b/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; } diff --git a/hmml_to_html/riscy.css b/hmml_to_html/riscy.css index 7a5216c..8e07915 100644 --- a/hmml_to_html/riscy.css +++ b/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 { - background-color: #FFF8E7; -} - -.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); -} - +.title.riscy > .menu:hover, +.title.riscy > .menu > .refs .ref:hover, +.title.riscy > .menu > .filter .filter_mode:hover, +.title.riscy > .menu > .filter .filter_content:hover, .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 { - background-color: #FFF8E7; - 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.blackboard > .content, +.markers_container.riscy > .marker.blackboard > .progress .content, .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): diff --git a/hmml_to_html/style.css b/hmml_to_html/style.css index e647390..7d7ac17 100644 --- a/hmml_to_html/style.css +++ b/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 { - border: 2px solid; - border-top:none; +.title > .menu .refs, +.title > .menu .filter { + 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 { - text-decoration: underline; +.title > .menu > .refs .ref .timecode:hover { + /* 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 { - font-size: 10px; - line-height: 8px; +.title > .menu > .refs .ref .quote_byline { 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 { - display: inline-block; - font-size: 12px; -} - -.title .refs_container > .refs .ref .ref_indices .timecode:first-child::before { +.title > .menu > .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: ▹ + */