Annotation-Pushers
/
Annotation-System
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

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

It's in mock_filter.html just in case I overwrite out.html
This commit is contained in:
Matt Mascarenhas 2017-05-15 02:11:11 +01:00
parent a6093b7008
commit 81ae532ce4
6 changed files with 555 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
hmml_to_html/hero.css
View File

@ -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;
}

6
hmml_to_html/hmml_to_html.c
View File

@ -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"

300
hmml_to_html/mock_filter.html Normal file
View File

@ -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>

22
hmml_to_html/obbg.css
View File

@ -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;
}

145
hmml_to_html/riscy.css
View File

@ -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):

148
hmml_to_html/style.css
View File

@ -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: &#9662; ▾
Open link in new tab: &#10555; or &10559; or &8599; or &#11127;
Play from timecode: &#9205; (or, if ↓ &#9656;)
Playable from timecode: &#9657;
*/